@cdx-ui/components 0.1.1 → 0.1.2

package/src/components/Switch/styles.ts

@@ -4,40 +4,40 @@ import { cva, type VariantProps } from '@cdx-ui/utils';
 // NATIVE — Uniwind className bindings for RN Switch
 // =============================================================================
 
-export const switchThumbColorVariants = cva(['accent-white'], {
+export const switchThumbColorVariants = cva(['accent-surface-primary'], {
   variants: {
     isDisabled: {
-      true: 'accent-gray-200',
+      true: 'accent-surface-neutral-subtle',
       false: '',
     },
   },
   defaultVariants: { isDisabled: false },
 });
 
-export const switchTrackOnVariants = cva(['accent-blue-500'], {
+export const switchTrackOnVariants = cva(['accent-surface-action-strong'], {
   variants: {
     isInvalid: {
-      true: 'accent-red-500',
+      true: 'accent-surface-danger-strong',
       false: '',
     },
   },
   defaultVariants: { isInvalid: false },
 });
 
-export const switchTrackOffVariants = cva(['accent-gray-300'], {
+export const switchTrackOffVariants = cva(['accent-surface-neutral-subtle'], {
   variants: {
     isInvalid: {
-      true: 'accent-red-300',
+      true: 'accent-surface-danger-subtle',
       false: '',
     },
   },
   defaultVariants: { isInvalid: false },
 });
 
-export const switchIosBgVariants = cva(['accent-gray-300'], {
+export const switchIosBgVariants = cva(['accent-surface-neutral-subtle'], {
   variants: {
     isInvalid: {
-      true: 'accent-red-300',
+      true: 'accent-surface-danger-subtle',
       false: '',
     },
   },
@@ -53,8 +53,8 @@ export const switchTrackVariants = cva(
     'flex-row items-center rounded-full cursor-pointer',
     'transition-colors duration-200',
     'data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed',
-    'web:data-[focus-visible=true]:ring-3 web:data-[focus-visible=true]:ring-blue-300/50',
-    'web:data-[invalid=true]:data-[focus-visible=true]:ring-red-300/50',
+    'web:data-[focus-visible=true]:ring-3 web:data-[focus-visible=true]:ring-stroke-focus/50',
+    'web:data-[invalid=true]:data-[focus-visible=true]:ring-stroke-danger/50',
   ],
   {
     variants: {
@@ -73,8 +73,8 @@ export const switchTrackVariants = cva(
 export const switchWebTrackColorVariants = cva([], {
   variants: {
     isChecked: {
-      true: 'bg-blue-500 data-[hover=true]:bg-blue-600',
-      false: 'bg-gray-300 data-[hover=true]:bg-gray-400',
+      true: 'bg-surface-action-strong data-[hover=true]:bg-surface-action-strong-hover',
+      false: 'bg-surface-neutral-subtle data-[hover=true]:bg-surface-neutral-subtle-hover',
     },
     isInvalid: {
       true: '',
@@ -82,8 +82,16 @@ export const switchWebTrackColorVariants = cva([], {
     },
   },
   compoundVariants: [
-    { isChecked: true, isInvalid: true, className: 'bg-red-500 data-[hover=true]:bg-red-600' },
-    { isChecked: false, isInvalid: true, className: 'bg-red-300 data-[hover=true]:bg-red-400' },
+    {
+      isChecked: true,
+      isInvalid: true,
+      className: 'bg-surface-danger-strong data-[hover=true]:bg-surface-danger-strong-hover',
+    },
+    {
+      isChecked: false,
+      isInvalid: true,
+      className: 'bg-surface-danger-subtle data-[hover=true]:bg-surface-danger-subtle-hover',
+    },
   ],
   defaultVariants: {
     isChecked: false,
@@ -92,7 +100,7 @@ export const switchWebTrackColorVariants = cva([], {
 });
 
 export const switchThumbVariants = cva(
-  ['rounded-full bg-white shadow-sm', 'transition-transform duration-200'],
+  ['rounded-full bg-surface-primary shadow-sm', 'transition-transform duration-200'],
   {
     variants: {
       size: {