Merge pull request #264 from josemarluedke/chore/update-colors

chore: update theme colors (green, red)
josemarluedke · Feb 13, 2024 · 0863f90 · 0863f90
2 parents 38b9cad + 407d4bf
commit 0863f90
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 67 deletions.
diff --git a/packages/theme/src/colors/defaults.ts b/packages/theme/src/colors/defaults.ts
@@ -27,31 +27,31 @@ const blue = {
 };
 
 const green = {
-  '50': '#eefffb',
-  '100': '#c6fff3',
-  '200': '#8effea',
-  '300': '#4dfbde',
-  '400': '#19e8cc',
-  '500': '#00cab2',
-  '600': '#00a495',
-  '700': '#028378',
-  '800': '#086760',
-  '900': '#0c554f',
-  '950': '#003433'
+  '50': '#f0f9f3',
+  '100': '#dbf0e0',
+  '200': '#bae0c5',
+  '300': '#8dc8a3',
+  '400': '#5daa7c',
+  '500': '#43a16c',
+  '600': '#2C744B',
+  '700': '#225a3d',
+  '800': '#1d4832',
+  '900': '#183c2a',
+  '950': '#0d2117'
 };
 
 const red = {
-  '50': '#fff2f0',
-  '100': '#ffe3de',
-  '200': '#ffccc3',
-  '300': '#ffa89a',
-  '400': '#ff7760',
-  '500': '#ff4c2e',
-  '600': '#f44123',
-  '700': '#cd2408',
-  '800': '#a9220b',
-  '900': '#8b2311',
-  '950': '#4c0d03'
+  '50': '#fdf4f3',
+  '100': '#fbe7e5',
+  '200': '#f9d2cf',
+  '300': '#f4b3ad',
+  '400': '#EC9D96',
+  '500': '#e06358',
+  '600': '#BF453A',
+  '700': '#ab342a',
+  '800': '#8d2f27',
+  '900': '#762c26',
+  '950': '#40130f'
 };
 
 const yellow = {

diff --git a/packages/theme/src/components/forms/form-field.ts b/packages/theme/src/components/forms/form-field.ts
@@ -94,7 +94,7 @@ const checkboxRadioBase = tv({
     'text-primary',
     'border border-default-400',
     'bg-white dark:bg-default-100',
-    'checked:bg-origin-border checked:border-transparent checked:bg-current checked:bg-center checked:bg-no-repeat checked:disabled:bg-default-300'
+    'checked:bg-origin-border checked:border-transparent dark:checked:bg-current checked:bg-current checked:bg-center checked:bg-no-repeat checked:disabled:bg-default-300'
   ],
   variants: {
     size: {

diff --git a/packages/theme/src/components/listbox.ts b/packages/theme/src/components/listbox.ts
@@ -42,7 +42,7 @@ const listboxItem = tv({
       'text-xs',
       'border',
       'border-default-300',
-      'group-hover:border-current'
+      'group-data-is-active:border-current'
     ]
   },
   variants: {
@@ -95,8 +95,8 @@ const listboxItem = tv({
       intent: 'default',
       class: {
         base: [
-          'data-[active=true]:bg-default',
-          'data-[active=true]:text-default-foreground'
+          'data-is-active:bg-default',
+          'data-is-active:text-default-foreground'
         ]
       }
     },
@@ -105,8 +105,8 @@ const listboxItem = tv({
       intent: 'primary',
       class: {
         base: [
-          'data-[active=true]:bg-primary',
-          'data-[active=true]:text-primary-foreground'
+          'data-is-active:bg-primary',
+          'data-is-active:text-primary-foreground'
         ]
       }
     },
@@ -115,8 +115,8 @@ const listboxItem = tv({
       intent: 'success',
       class: {
         base: [
-          'data-[active=true]:bg-success',
-          'data-[active=true]:text-success-foreground'
+          'data-is-active:bg-success',
+          'data-is-active:text-success-foreground'
         ]
       }
     },
@@ -125,8 +125,8 @@ const listboxItem = tv({
       intent: 'warning',
       class: {
         base: [
-          'data-[active=true]:bg-warning',
-          'data-[active=true]:text-warning-foreground'
+          'data-is-active:bg-warning',
+          'data-is-active:text-warning-foreground'
         ]
       }
     },
@@ -135,8 +135,8 @@ const listboxItem = tv({
       intent: 'danger',
       class: {
         base: [
-          'data-[active=true]:bg-danger',
-          'data-[active=true]:text-danger-foreground'
+          'data-is-active:bg-danger',
+          'data-is-active:text-danger-foreground'
         ]
       }
     },
@@ -179,49 +179,37 @@ const listboxItem = tv({
       intent: 'default',
       class: {
         base: [
-          'data-[active=true]:border-default-700',
-          'data-[active=true]:text-default-700'
+          'data-is-active:border-default-700',
+          'data-is-active:text-default-700'
         ]
       }
     },
     {
       appearence: 'outlined',
       intent: 'primary',
       class: {
-        base: [
-          'data-[active=true]:border-primary',
-          'data-[active=true]:text-primary'
-        ]
+        base: ['data-is-active:border-primary', 'data-is-active:text-primary']
       }
     },
     {
       appearence: 'outlined',
       intent: 'success',
       class: {
-        base: [
-          'data-[active=true]:border-success',
-          'data-[active=true]:text-success'
-        ]
+        base: ['data-is-active:border-success', 'data-is-active:text-success']
       }
     },
     {
       appearence: 'outlined',
       intent: 'warning',
       class: {
-        base: [
-          'data-[active=true]:border-warning',
-          'data-[active=true]:text-warning'
-        ]
+        base: ['data-is-active:border-warning', 'data-is-active:text-warning']
       }
     },
     {
       appearence: 'outlined',
       intent: 'danger',
       class: {
-        base: [
-          'data-[active=true]:border-danger',
-          'data-[active=true]:text-danger'
-        ]
+        base: ['data-is-active:border-danger', 'data-is-active:text-danger']
       }
     },
 
@@ -231,9 +219,9 @@ const listboxItem = tv({
       intent: 'default',
       class: {
         base: [
-          'data-[active=true]:bg-default-700/20',
-          'data-[active=true]:border-default-700',
-          'data-[active=true]:text-default-700'
+          'data-is-active:bg-default-700/20',
+          'data-is-active:border-default-700',
+          'data-is-active:text-default-700'
         ]
       }
     },
@@ -242,9 +230,9 @@ const listboxItem = tv({
       intent: 'primary',
       class: {
         base: [
-          'data-[active=true]:bg-primary/20',
-          'data-[active=true]:border-primary-600',
-          'data-[active=true]:text-primary-600'
+          'data-is-active:bg-primary/20',
+          'data-is-active:border-primary-600',
+          'data-is-active:text-primary-600'
         ]
       }
     },
@@ -253,9 +241,9 @@ const listboxItem = tv({
       intent: 'success',
       class: {
         base: [
-          'data-[active=true]:bg-success/20',
-          'data-[active=true]:border-success-600',
-          'data-[active=true]:text-success-600'
+          'data-is-active:bg-success/20',
+          'data-is-active:border-success-600',
+          'data-is-active:text-success-600'
         ]
       }
     },
@@ -264,9 +252,9 @@ const listboxItem = tv({
       intent: 'warning',
       class: {
         base: [
-          'data-[active=true]:bg-warning/20',
-          'data-[active=true]:border-warning-600',
-          'data-[active=true]:text-warning-600'
+          'data-is-active:bg-warning/20',
+          'data-is-active:border-warning-600',
+          'data-is-active:text-warning-600'
         ]
       }
     },
@@ -275,9 +263,9 @@ const listboxItem = tv({
       intent: 'danger',
       class: {
         base: [
-          'data-[active=true]:bg-danger/20',
-          'data-[active=true]:border-danger-600',
-          'data-[active=true]:text-danger-600'
+          'data-is-active:bg-danger/20',
+          'data-is-active:border-danger-600',
+          'data-is-active:text-danger-600'
         ]
       }
     }

diff --git a/packages/theme/src/plugin.ts b/packages/theme/src/plugin.ts
@@ -24,6 +24,12 @@ function frontile(config: PluginConfig = {}): ReturnType<typeof plugin> {
         addVariant(variant.name, variant.definition);
       });
 
+      addVariant('data-is-active', '&[data-active=true]');
+      addVariant(
+        'group-data-is-active',
+        ':merge(.group)[data-active="true"] &'
+      );
+
       addTransitions(
         addComponents,
         '.notification-transition',