fix(sdds-cs): Switch design fixed

salute-developers · Nov 18, 2024 · 9c80a52 · 9c80a52
1 parent d1a202a
commit 9c80a52
Showing 1 changed file with 15 additions and 10 deletions.
diff --git a/packages/sdds-cs/src/components/Switch/Switch.config.ts b/packages/sdds-cs/src/components/Switch/Switch.config.ts
@@ -29,21 +29,21 @@ export const config = {
         },
         toggleSize: {
             l: css`
-                ${switchTokens.trackWidth}: 2.75rem;
+                ${switchTokens.trackWidth}: 3rem;
                 ${switchTokens.trackHeight}: 1.75rem;
                 ${switchTokens.trackBorderRadius}: calc(var(${switchTokens.trackHeight}) / 2);
-                ${switchTokens.thumbSize}: 1.5rem;
+                ${switchTokens.thumbSize}: 1.25rem;
                 ${switchTokens.thumbBorderRadius}: calc(var(${switchTokens.thumbSize}) / 2);
-                ${switchTokens.thumbOffset}: 0.125rem;
+                ${switchTokens.thumbOffset}: 0.25rem;
                 ${switchTokens.thumbPressScale}: 1.25;
             `,
             s: css`
                 ${switchTokens.trackWidth}: 2rem;
                 ${switchTokens.trackHeight}: 1.25rem;
                 ${switchTokens.trackBorderRadius}: calc(var(${switchTokens.trackHeight}) / 2);
-                ${switchTokens.thumbSize}: 1rem;
+                ${switchTokens.thumbSize}: 0.75rem;
                 ${switchTokens.thumbBorderRadius}: calc(var(${switchTokens.thumbSize}) / 2);
-                ${switchTokens.thumbOffset}: 0.125rem;
+                ${switchTokens.thumbOffset}: 0.25rem;
                 ${switchTokens.thumbPressScale}: 1.25;
             `,
         },
@@ -53,11 +53,16 @@ export const config = {
                 ${switchTokens.descriptionColor}: var(--text-secondary);
                 ${switchTokens.trackBackgroundColorOn}: var(--surface-accent);
                 ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover);
-                ${switchTokens.trackBackgroundColorOff}: var(--surface-solid-default);
-                ${switchTokens.trackBackgroundColorOffHover}: var(--surface-solid-default-hover);
-                ${switchTokens.trackBorderWidth}: 0rem;
-                ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default);
-                ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default);
+                ${switchTokens.trackBackgroundColorOff}: transparent;
+                ${switchTokens.trackBackgroundColorOffHover}: transparent;
+                ${switchTokens.trackBorderWidthOff}: 0.125rem;
+                ${switchTokens.trackBorderWidthOn}: 0;
+                ${switchTokens.trackBorderColorOff}: var(--outline-solid-primary);
+                ${switchTokens.trackBorderColorOffHover}: var(--outline-solid-primary-hover);
+                ${switchTokens.trackBorderColorOn}: var(--outline-accent);
+                ${switchTokens.trackBorderColorOnHover}: var(--outline-accent-hover);
+                ${switchTokens.thumbBackgroundColorOff}: var(--surface-accent);
+                ${switchTokens.thumbBackgroundColorOn}: var(--surface-solid-card);
                 ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11);
             `,
         },