feat(plasma-*, sdds-*): Switch track border tokens improved

salute-developers · Nov 18, 2024 · d1a202a · d1a202a
1 parent 3e5bfda
commit d1a202a
Show file tree

Hide file tree

Showing 13 changed files with 12 additions and 14 deletions.
diff --git a/packages/plasma-asdk/src/components/Switch/Switch.config.ts b/packages/plasma-asdk/src/components/Switch/Switch.config.ts
@@ -46,7 +46,6 @@ export const config = {
                 ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-main-hover);
                 ${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-secondary);
                 ${switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-secondary-hover);
-                ${switchTokens.trackBorderWidth}: 0rem;
                 ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default);
                 ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default);
                 ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11);

diff --git a/packages/plasma-b2c/src/components/Switch/Switch.config.ts b/packages/plasma-b2c/src/components/Switch/Switch.config.ts
@@ -87,7 +87,6 @@ export const config = {
                 ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover);
                 ${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-tertiary);
                 ${switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-tertiary-hover);
-                ${switchTokens.trackBorderWidth}: 0rem;
                 ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default);
                 ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default);
                 ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11);

diff --git a/packages/plasma-new-hope/src/components/Switch/Switch.tokens.ts b/packages/plasma-new-hope/src/components/Switch/Switch.tokens.ts
@@ -28,7 +28,8 @@ export const tokens = {
     verticalGap: '--plasma-switch-vertical-gap',
     trackWidth: '--plasma-switch__track-width',
     trackHeight: '--plasma-switch__track-height',
-    trackBorderWidth: '--plasma-switch__track-border',
+    trackBorderWidthOn: '--plasma-switch__track-checked_true-border-width',
+    trackBorderWidthOff: '--plasma-switch__track-checked_false-border-width',
     trackBorderColorOn: '--plasma-switch__track-checked_true-border-color',
     trackBorderColorOnHover: '--plasma-switch__track-checked_true_hovered_true-border-color',
     trackBorderColorOff: '--plasma-switch__track-checked_false-border-color',

diff --git a/packages/plasma-new-hope/src/components/Switch/_toggleSize/base.ts b/packages/plasma-new-hope/src/components/Switch/_toggleSize/base.ts
@@ -1,15 +1,15 @@
 import { css } from '@linaria/core';
 
 import { tokens } from '../Switch.tokens';
-import { StyledTrigger } from '../Switch.styles';
+import { StyledInput, StyledTrigger } from '../Switch.styles';
 
 export const base = css`
     ${StyledTrigger} {
         box-sizing: border-box;
         flex: 0 0 var(${tokens.trackWidth});
 
         border-style: solid;
-        border-width: var(${tokens.trackBorderWidth});
+        border-width: var(${tokens.trackBorderWidthOff});
         border-radius: var(${tokens.trackBorderRadius});
 
         width: var(${tokens.trackWidth});
@@ -23,6 +23,10 @@ export const base = css`
         }
     }
 
+    ${StyledInput}:checked ~ ${StyledTrigger} {
+        border-width: var(${tokens.trackBorderWidthOn}, var(${tokens.trackBorderWidthOff}));
+    }
+
     :active:not([disabled]) ${StyledTrigger}::after {
         width: calc(var(${tokens.thumbSize}) * var(${tokens.thumbPressScale}, 1));
     }

diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Switch/Switch.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Switch/Switch.config.ts
@@ -89,7 +89,6 @@ export const config = {
                 ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover);
                 ${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-tertiary);
                 ${switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-tertiary-hover);
-                ${switchTokens.trackBorderWidth}: 0rem;
                 ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default);
                 ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default);
                 ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11);

diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Switch/Switch.outline.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Switch/Switch.outline.config.ts
@@ -85,7 +85,8 @@ export const config = {
             default: css`
                 ${switchTokens.labelColor}: var(--text-primary);
                 ${switchTokens.descriptionColor}: var(--text-secondary);
-                ${switchTokens.trackBorderWidth}: 0.0625rem;
+                ${switchTokens.trackBorderWidthOn}: 0.0625rem;
+                ${switchTokens.trackBorderWidthOff}: 0.0625rem;
                 ${switchTokens.trackBorderColorOff}: var(--outline-secondary);
                 ${switchTokens.trackBorderColorOffHover}: var(--outline-secondary-hover);
                 ${switchTokens.trackBorderColorOn}: var(--outline-accent);

diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Switch/Switch.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Switch/Switch.config.ts
@@ -89,7 +89,6 @@ export const config = {
                 ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover);
                 ${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-tertiary);
                 ${switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-tertiary-hover);
-                ${switchTokens.trackBorderWidth}: 0rem;
                 ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default);
                 ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default);
                 ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11);

diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Switch/Switch.outline.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Switch/Switch.outline.config.ts
@@ -85,7 +85,8 @@ export const config = {
             default: css`
                 ${switchTokens.labelColor}: var(--text-primary);
                 ${switchTokens.descriptionColor}: var(--text-secondary);
-                ${switchTokens.trackBorderWidth}: 0.0625rem;
+                ${switchTokens.trackBorderWidthOn}: 0.0625rem;
+                ${switchTokens.trackBorderWidthOff}: 0.0625rem;
                 ${switchTokens.trackBorderColorOff}: var(--outline-secondary);
                 ${switchTokens.trackBorderColorOffHover}: var(--outline-secondary-hover);
                 ${switchTokens.trackBorderColorOn}: var(--outline-accent);

diff --git a/packages/plasma-web/src/components/Switch/Switch.config.ts b/packages/plasma-web/src/components/Switch/Switch.config.ts
@@ -87,7 +87,6 @@ export const config = {
                 ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover);
                 ${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-tertiary);
                 ${switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-tertiary-hover);
-                ${switchTokens.trackBorderWidth}: 0rem;
                 ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default);
                 ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default);
                 ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11);

diff --git a/packages/sdds-dfa/src/components/Switch/Switch.config.ts b/packages/sdds-dfa/src/components/Switch/Switch.config.ts
@@ -87,7 +87,6 @@ export const config = {
                 ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover);
                 ${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-tertiary);
                 ${switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-tertiary-hover);
-                ${switchTokens.trackBorderWidth}: 0rem;
                 ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default);
                 ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default);
                 ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11);

diff --git a/packages/sdds-finportal/src/components/Switch/Switch.config.ts b/packages/sdds-finportal/src/components/Switch/Switch.config.ts
@@ -87,7 +87,6 @@ export const config = {
                 ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover);
                 ${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-tertiary);
                 ${switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-tertiary-hover);
-                ${switchTokens.trackBorderWidth}: 0rem;
                 ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default);
                 ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default);
                 ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11);

diff --git a/packages/sdds-insol/src/components/Switch/Switch.config.ts b/packages/sdds-insol/src/components/Switch/Switch.config.ts
@@ -87,7 +87,6 @@ export const config = {
                 ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover);
                 ${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-tertiary);
                 ${switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-tertiary-hover);
-                ${switchTokens.trackBorderWidth}: 0rem;
                 ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default);
                 ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default);
                 ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11);

diff --git a/packages/sdds-serv/src/components/Switch/Switch.config.ts b/packages/sdds-serv/src/components/Switch/Switch.config.ts
@@ -87,7 +87,6 @@ export const config = {
                 ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover);
                 ${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-tertiary);
                 ${switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-tertiary-hover);
-                ${switchTokens.trackBorderWidth}: 0rem;
                 ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default);
                 ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default);
                 ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11);