feat(switch): add new colours strategy

add new colours startegy BREAKING CHANGE: new colours strategy
adevinta · Aug 2, 2023 · 7013e7f · 7013e7f
1 parent 6354f52
commit 7013e7f
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 19 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/switch/package.json b/packages/components/switch/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/switch",
-  "version": "1.14.4",
+  "version": "1.14.3-colours.0",
   "description": "A control that allows the user to toggle between checked and not checked.",
   "publishConfig": {
     "access": "public"
@@ -20,8 +20,8 @@
     "@radix-ui/react-id": "1.0.1",
     "@radix-ui/react-switch": "1.0.3",
     "@spark-ui/form-field": "^1.2.1",
-    "@spark-ui/icons": "^1.19.5",
-    "@spark-ui/internal-utils": "^1.6.1",
+    "@spark-ui/icons": "^1.19.4",
+    "@spark-ui/internal-utils": "colours",
     "@spark-ui/label": "^1.5.0",
     "@spark-ui/slot": "^1.6.1",
     "@spark-ui/use-combined-state": "^0.5.0",

diff --git a/packages/components/switch/src/Switch.stories.tsx b/packages/components/switch/src/Switch.stories.tsx
@@ -73,8 +73,10 @@ export const Sizes: StoryFn = _args => (
 )
 
 const switchColors: ComponentProps<typeof Switch>['intent'][] = [
-  'primary',
-  'secondary',
+  'main',
+  'support',
+  'accent',
+  'basic',
   'success',
   'alert',
   'error',

diff --git a/packages/components/switch/src/SwitchInput.styles.ts b/packages/components/switch/src/SwitchInput.styles.ts
@@ -21,14 +21,12 @@ export const styles = cva(
       }),
       intent: makeVariants<
         'intent',
-        ['primary', 'secondary', 'success', 'alert', 'error', 'info', 'neutral']
+        ['main', 'support', 'accent', 'basic', 'success', 'alert', 'error', 'info', 'neutral']
       >({
-        primary: ['spark-state-checked:bg-primary', 'hover:ring-primary-container', 'text-primary'],
-        secondary: [
-          'spark-state-checked:bg-secondary',
-          'hover:ring-secondary-container',
-          'text-secondary',
-        ],
+        main: ['spark-state-checked:bg-main', 'hover:ring-main-container', 'text-main'],
+        support: ['spark-state-checked:bg-support', 'hover:ring-support-container', 'text-support'],
+        accent: ['spark-state-checked:bg-accent', 'hover:ring-accent-container', 'text-accent'],
+        basic: ['spark-state-checked:bg-basic', 'hover:ring-basic-container', 'text-basic'],
         success: ['spark-state-checked:bg-success', 'hover:ring-success-container', 'text-success'],
         alert: ['spark-state-checked:bg-alert', 'hover:ring-alert-container', 'text-alert'],
         error: ['spark-state-checked:bg-error', 'hover:ring-error-container', 'text-error'],
@@ -37,7 +35,7 @@ export const styles = cva(
       }),
     },
     defaultVariants: {
-      intent: 'primary',
+      intent: 'basic',
       size: 'sm',
     },
   }