From 10557f06ab7f6e28cb474ec68bd65c6fd8b895ed Mon Sep 17 00:00:00 2001 From: Vladislav Denisov Date: Wed, 20 Nov 2024 11:37:14 +0300 Subject: [PATCH 1/2] feat(plasma-*, sdds-*): Switch track and thumb tokens improved --- .../src/components/Switch/Switch.config.ts | 8 +++++--- .../src/components/Switch/Switch.config.ts | 11 +++++++---- .../src/components/Switch/Switch.tokens.ts | 16 +++++++++------- .../src/components/Switch/_toggleSize/base.ts | 14 +++++++++++--- .../components/Switch/Switch.config.ts | 11 +++++++---- .../components/Switch/Switch.outline.config.ts | 15 +++++++++------ .../components/Switch/Switch.config.ts | 11 +++++++---- .../components/Switch/Switch.outline.config.ts | 15 +++++++++------ .../src/components/Switch/Switch.config.ts | 11 +++++++---- .../src/components/Switch/Switch.config.ts | 11 +++++++---- .../src/components/Switch/Switch.config.ts | 11 +++++++---- .../src/components/Switch/Switch.config.ts | 11 +++++++---- .../src/components/Switch/Switch.config.ts | 11 +++++++---- 13 files changed, 99 insertions(+), 57 deletions(-) diff --git a/packages/plasma-asdk/src/components/Switch/Switch.config.ts b/packages/plasma-asdk/src/components/Switch/Switch.config.ts index 4926be8453..28eb508aff 100644 --- a/packages/plasma-asdk/src/components/Switch/Switch.config.ts +++ b/packages/plasma-asdk/src/components/Switch/Switch.config.ts @@ -34,7 +34,8 @@ export const config = { ${switchTokens.trackBorderRadius}: calc(var(${switchTokens.trackHeight}) / 2); ${switchTokens.thumbSize}: 1.5rem; ${switchTokens.thumbBorderRadius}: calc(var(${switchTokens.thumbSize}) / 2); - ${switchTokens.thumbOffset}: 0.125rem; + ${switchTokens.thumbOffsetOn}: 0.125rem; + ${switchTokens.thumbOffsetOff}: 0.125rem; ${switchTokens.thumbPressScale}: 1.25; `, }, @@ -46,9 +47,10 @@ 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.trackBorderWidthOn}: 0; + ${switchTokens.trackBorderWidthOff}: 0; ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default); + ${switchTokens.thumbBackgroundColorOff}: 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 index e60199af5d..14c283da5f 100644 --- a/packages/plasma-b2c/src/components/Switch/Switch.config.ts +++ b/packages/plasma-b2c/src/components/Switch/Switch.config.ts @@ -66,7 +66,8 @@ export const config = { ${switchTokens.trackBorderRadius}: calc(var(${switchTokens.trackHeight}) / 2); ${switchTokens.thumbSize}: 1.5rem; ${switchTokens.thumbBorderRadius}: calc(var(${switchTokens.thumbSize}) / 2); - ${switchTokens.thumbOffset}: 0.125rem; + ${switchTokens.thumbOffsetOn}: 0.125rem; + ${switchTokens.thumbOffsetOff}: 0.125rem; ${switchTokens.thumbPressScale}: 1.25; `, s: css` @@ -75,7 +76,8 @@ export const config = { ${switchTokens.trackBorderRadius}: calc(var(${switchTokens.trackHeight}) / 2); ${switchTokens.thumbSize}: 1rem; ${switchTokens.thumbBorderRadius}: calc(var(${switchTokens.thumbSize}) / 2); - ${switchTokens.thumbOffset}: 0.125rem; + ${switchTokens.thumbOffsetOn}: 0.125rem; + ${switchTokens.thumbOffsetOff}: 0.125rem; ${switchTokens.thumbPressScale}: 1.25; `, }, @@ -87,9 +89,10 @@ 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.trackBorderWidthOn}: 0; + ${switchTokens.trackBorderWidthOff}: 0; ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default); + ${switchTokens.thumbBackgroundColorOff}: 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 index 6ca6633a02..a705fbe693 100644 --- a/packages/plasma-new-hope/src/components/Switch/Switch.tokens.ts +++ b/packages/plasma-new-hope/src/components/Switch/Switch.tokens.ts @@ -28,11 +28,12 @@ export const tokens = { verticalGap: '--plasma-switch-vertical-gap', trackWidth: '--plasma-switch__track-width', trackHeight: '--plasma-switch__track-height', - trackBorderWidth: '--plasma-switch__track-border', - 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', - trackBorderColorOffHover: '--plasma-switch__track-checked_false_hovered_true-border-color', + 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', + trackBorderColorOffHover: '--plasma-switch__track_checked_false_hovered_true-border-color', trackBorderRadius: '--plasma-switch__track-border-radius', // NOTE: could be intersection with checked @@ -44,13 +45,14 @@ export const tokens = { trackFocusColor: '--plasma-switch__track-focus-color', thumbSize: '--plasma-switch__thumb-size', - thumbOffset: '--plasma-switch__thumb-offset', + thumbOffsetOn: '--plasma-switch__thumb_checked_true-offset', + thumbOffsetOff: '--plasma-switch__thumb_checked_false-offset', thumbBorderRadius: '--plasma-switch__thumb-border-radius', thumbPressScale: '--plasma-switch__thumb-scale', thumbBackgroundColorOn: '--plasma-switch__thumb_checked_true-bg-color', - thumbBackgroundColorOff: '--plasma-switch__thumb-checked_false-bg-color', + thumbBackgroundColorOff: '--plasma-switch__thumb_checked_false-bg-color', thumbBoxShadow: '--plasma-switch__thumb-box-shadow', thumbBoxShadowOn: '--plasma-switch__thumb-box-shadow_checked_true', diff --git a/packages/plasma-new-hope/src/components/Switch/_toggleSize/base.ts b/packages/plasma-new-hope/src/components/Switch/_toggleSize/base.ts index 54c8f3cc7c..312024e44c 100644 --- a/packages/plasma-new-hope/src/components/Switch/_toggleSize/base.ts +++ b/packages/plasma-new-hope/src/components/Switch/_toggleSize/base.ts @@ -1,7 +1,7 @@ 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} { @@ -9,7 +9,7 @@ export const base = css` 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}); @@ -19,7 +19,15 @@ export const base = css` width: var(${tokens.thumbSize}); height: var(${tokens.thumbSize}); border-radius: var(${tokens.thumbBorderRadius}); - margin: auto var(${tokens.thumbOffset}); + margin: auto var(${tokens.thumbOffsetOff}); + } + } + + ${StyledInput}:checked ~ ${StyledTrigger} { + border-width: var(${tokens.trackBorderWidthOn}, var(${tokens.trackBorderWidthOff})); + + &::after { + margin: auto var(${tokens.thumbOffsetOn}); } } 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 index f80836415b..90e6ecd991 100644 --- 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 @@ -68,7 +68,8 @@ export const config = { ${switchTokens.trackBorderRadius}: calc(var(${switchTokens.trackHeight}) / 2); ${switchTokens.thumbSize}: 1.5rem; ${switchTokens.thumbBorderRadius}: calc(var(${switchTokens.thumbSize}) / 2); - ${switchTokens.thumbOffset}: 0.125rem; + ${switchTokens.thumbOffsetOn}: 0.125rem; + ${switchTokens.thumbOffsetOff}: 0.125rem; ${switchTokens.thumbPressScale}: 1.25; `, s: css` @@ -77,7 +78,8 @@ export const config = { ${switchTokens.trackBorderRadius}: calc(var(${switchTokens.trackHeight}) / 2); ${switchTokens.thumbSize}: 1rem; ${switchTokens.thumbBorderRadius}: calc(var(${switchTokens.thumbSize}) / 2); - ${switchTokens.thumbOffset}: 0.125rem; + ${switchTokens.thumbOffsetOn}: 0.125rem; + ${switchTokens.thumbOffsetOff}: 0.125rem; ${switchTokens.thumbPressScale}: 1.25; `, }, @@ -89,9 +91,10 @@ 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.trackBorderWidthOn}: 0; + ${switchTokens.trackBorderWidthOff}: 0; ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default); + ${switchTokens.thumbBackgroundColorOff}: 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 index 477b868b25..600b8a1d6e 100644 --- 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 @@ -68,7 +68,8 @@ export const config = { ${switchTokens.trackBorderRadius}: calc(var(${switchTokens.trackHeight}) / 2); ${switchTokens.thumbSize}: 1.375rem; ${switchTokens.thumbBorderRadius}: calc(var(${switchTokens.thumbSize}) / 2); - ${switchTokens.thumbOffset}: 0.125rem; + ${switchTokens.thumbOffsetOn}: 0.125rem; + ${switchTokens.thumbOffsetOff}: 0.125rem; ${switchTokens.thumbPressScale}: 1.25; `, s: css` @@ -77,7 +78,8 @@ export const config = { ${switchTokens.trackBorderRadius}: calc(var(${switchTokens.trackHeight}) / 2); ${switchTokens.thumbSize}: 0.875rem; ${switchTokens.thumbBorderRadius}: calc(var(${switchTokens.thumbSize}) / 2); - ${switchTokens.thumbOffset}: 0.125rem; + ${switchTokens.thumbOffsetOn}: 0.125rem; + ${switchTokens.thumbOffsetOff}: 0.125rem; ${switchTokens.thumbPressScale}: 1.25; `, }, @@ -85,13 +87,14 @@ export const config = { default: css` ${switchTokens.labelColor}: var(--text-primary); ${switchTokens.descriptionColor}: var(--text-secondary); - ${switchTokens.trackBorderWidth}: 0.0625rem; - ${switchTokens.trackBorderColorOff}: var(--outline-secondary); - ${switchTokens.trackBorderColorOffHover}: var(--outline-secondary-hover); + ${switchTokens.trackBorderWidthOn}: 0.0625rem; + ${switchTokens.trackBorderWidthOff}: 0.0625rem; ${switchTokens.trackBorderColorOn}: var(--outline-accent); ${switchTokens.trackBorderColorOnHover}: var(--outline-accent-hover); - ${switchTokens.thumbBackgroundColorOff}: var(--text-tertiary); + ${switchTokens.trackBorderColorOff}: var(--outline-secondary); + ${switchTokens.trackBorderColorOffHover}: var(--outline-secondary-hover); ${switchTokens.thumbBackgroundColorOn}: var(--text-accent); + ${switchTokens.thumbBackgroundColorOff}: var(--text-tertiary); ${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.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Switch/Switch.config.ts index f80836415b..90e6ecd991 100644 --- 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 @@ -68,7 +68,8 @@ export const config = { ${switchTokens.trackBorderRadius}: calc(var(${switchTokens.trackHeight}) / 2); ${switchTokens.thumbSize}: 1.5rem; ${switchTokens.thumbBorderRadius}: calc(var(${switchTokens.thumbSize}) / 2); - ${switchTokens.thumbOffset}: 0.125rem; + ${switchTokens.thumbOffsetOn}: 0.125rem; + ${switchTokens.thumbOffsetOff}: 0.125rem; ${switchTokens.thumbPressScale}: 1.25; `, s: css` @@ -77,7 +78,8 @@ export const config = { ${switchTokens.trackBorderRadius}: calc(var(${switchTokens.trackHeight}) / 2); ${switchTokens.thumbSize}: 1rem; ${switchTokens.thumbBorderRadius}: calc(var(${switchTokens.thumbSize}) / 2); - ${switchTokens.thumbOffset}: 0.125rem; + ${switchTokens.thumbOffsetOn}: 0.125rem; + ${switchTokens.thumbOffsetOff}: 0.125rem; ${switchTokens.thumbPressScale}: 1.25; `, }, @@ -89,9 +91,10 @@ 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.trackBorderWidthOn}: 0; + ${switchTokens.trackBorderWidthOff}: 0; ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default); + ${switchTokens.thumbBackgroundColorOff}: 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 index 477b868b25..600b8a1d6e 100644 --- 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 @@ -68,7 +68,8 @@ export const config = { ${switchTokens.trackBorderRadius}: calc(var(${switchTokens.trackHeight}) / 2); ${switchTokens.thumbSize}: 1.375rem; ${switchTokens.thumbBorderRadius}: calc(var(${switchTokens.thumbSize}) / 2); - ${switchTokens.thumbOffset}: 0.125rem; + ${switchTokens.thumbOffsetOn}: 0.125rem; + ${switchTokens.thumbOffsetOff}: 0.125rem; ${switchTokens.thumbPressScale}: 1.25; `, s: css` @@ -77,7 +78,8 @@ export const config = { ${switchTokens.trackBorderRadius}: calc(var(${switchTokens.trackHeight}) / 2); ${switchTokens.thumbSize}: 0.875rem; ${switchTokens.thumbBorderRadius}: calc(var(${switchTokens.thumbSize}) / 2); - ${switchTokens.thumbOffset}: 0.125rem; + ${switchTokens.thumbOffsetOn}: 0.125rem; + ${switchTokens.thumbOffsetOff}: 0.125rem; ${switchTokens.thumbPressScale}: 1.25; `, }, @@ -85,13 +87,14 @@ export const config = { default: css` ${switchTokens.labelColor}: var(--text-primary); ${switchTokens.descriptionColor}: var(--text-secondary); - ${switchTokens.trackBorderWidth}: 0.0625rem; - ${switchTokens.trackBorderColorOff}: var(--outline-secondary); - ${switchTokens.trackBorderColorOffHover}: var(--outline-secondary-hover); + ${switchTokens.trackBorderWidthOn}: 0.0625rem; + ${switchTokens.trackBorderWidthOff}: 0.0625rem; ${switchTokens.trackBorderColorOn}: var(--outline-accent); ${switchTokens.trackBorderColorOnHover}: var(--outline-accent-hover); - ${switchTokens.thumbBackgroundColorOff}: var(--text-tertiary); + ${switchTokens.trackBorderColorOff}: var(--outline-secondary); + ${switchTokens.trackBorderColorOffHover}: var(--outline-secondary-hover); ${switchTokens.thumbBackgroundColorOn}: var(--text-accent); + ${switchTokens.thumbBackgroundColorOff}: var(--text-tertiary); ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11); `, }, diff --git a/packages/plasma-web/src/components/Switch/Switch.config.ts b/packages/plasma-web/src/components/Switch/Switch.config.ts index e60199af5d..14c283da5f 100644 --- a/packages/plasma-web/src/components/Switch/Switch.config.ts +++ b/packages/plasma-web/src/components/Switch/Switch.config.ts @@ -66,7 +66,8 @@ export const config = { ${switchTokens.trackBorderRadius}: calc(var(${switchTokens.trackHeight}) / 2); ${switchTokens.thumbSize}: 1.5rem; ${switchTokens.thumbBorderRadius}: calc(var(${switchTokens.thumbSize}) / 2); - ${switchTokens.thumbOffset}: 0.125rem; + ${switchTokens.thumbOffsetOn}: 0.125rem; + ${switchTokens.thumbOffsetOff}: 0.125rem; ${switchTokens.thumbPressScale}: 1.25; `, s: css` @@ -75,7 +76,8 @@ export const config = { ${switchTokens.trackBorderRadius}: calc(var(${switchTokens.trackHeight}) / 2); ${switchTokens.thumbSize}: 1rem; ${switchTokens.thumbBorderRadius}: calc(var(${switchTokens.thumbSize}) / 2); - ${switchTokens.thumbOffset}: 0.125rem; + ${switchTokens.thumbOffsetOn}: 0.125rem; + ${switchTokens.thumbOffsetOff}: 0.125rem; ${switchTokens.thumbPressScale}: 1.25; `, }, @@ -87,9 +89,10 @@ 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.trackBorderWidthOn}: 0; + ${switchTokens.trackBorderWidthOff}: 0; ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default); + ${switchTokens.thumbBackgroundColorOff}: 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 index e60199af5d..14c283da5f 100644 --- a/packages/sdds-dfa/src/components/Switch/Switch.config.ts +++ b/packages/sdds-dfa/src/components/Switch/Switch.config.ts @@ -66,7 +66,8 @@ export const config = { ${switchTokens.trackBorderRadius}: calc(var(${switchTokens.trackHeight}) / 2); ${switchTokens.thumbSize}: 1.5rem; ${switchTokens.thumbBorderRadius}: calc(var(${switchTokens.thumbSize}) / 2); - ${switchTokens.thumbOffset}: 0.125rem; + ${switchTokens.thumbOffsetOn}: 0.125rem; + ${switchTokens.thumbOffsetOff}: 0.125rem; ${switchTokens.thumbPressScale}: 1.25; `, s: css` @@ -75,7 +76,8 @@ export const config = { ${switchTokens.trackBorderRadius}: calc(var(${switchTokens.trackHeight}) / 2); ${switchTokens.thumbSize}: 1rem; ${switchTokens.thumbBorderRadius}: calc(var(${switchTokens.thumbSize}) / 2); - ${switchTokens.thumbOffset}: 0.125rem; + ${switchTokens.thumbOffsetOn}: 0.125rem; + ${switchTokens.thumbOffsetOff}: 0.125rem; ${switchTokens.thumbPressScale}: 1.25; `, }, @@ -87,9 +89,10 @@ 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.trackBorderWidthOn}: 0; + ${switchTokens.trackBorderWidthOff}: 0; ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default); + ${switchTokens.thumbBackgroundColorOff}: 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 index e60199af5d..14c283da5f 100644 --- a/packages/sdds-finportal/src/components/Switch/Switch.config.ts +++ b/packages/sdds-finportal/src/components/Switch/Switch.config.ts @@ -66,7 +66,8 @@ export const config = { ${switchTokens.trackBorderRadius}: calc(var(${switchTokens.trackHeight}) / 2); ${switchTokens.thumbSize}: 1.5rem; ${switchTokens.thumbBorderRadius}: calc(var(${switchTokens.thumbSize}) / 2); - ${switchTokens.thumbOffset}: 0.125rem; + ${switchTokens.thumbOffsetOn}: 0.125rem; + ${switchTokens.thumbOffsetOff}: 0.125rem; ${switchTokens.thumbPressScale}: 1.25; `, s: css` @@ -75,7 +76,8 @@ export const config = { ${switchTokens.trackBorderRadius}: calc(var(${switchTokens.trackHeight}) / 2); ${switchTokens.thumbSize}: 1rem; ${switchTokens.thumbBorderRadius}: calc(var(${switchTokens.thumbSize}) / 2); - ${switchTokens.thumbOffset}: 0.125rem; + ${switchTokens.thumbOffsetOn}: 0.125rem; + ${switchTokens.thumbOffsetOff}: 0.125rem; ${switchTokens.thumbPressScale}: 1.25; `, }, @@ -87,9 +89,10 @@ 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.trackBorderWidthOn}: 0; + ${switchTokens.trackBorderWidthOff}: 0; ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default); + ${switchTokens.thumbBackgroundColorOff}: 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 index e60199af5d..14c283da5f 100644 --- a/packages/sdds-insol/src/components/Switch/Switch.config.ts +++ b/packages/sdds-insol/src/components/Switch/Switch.config.ts @@ -66,7 +66,8 @@ export const config = { ${switchTokens.trackBorderRadius}: calc(var(${switchTokens.trackHeight}) / 2); ${switchTokens.thumbSize}: 1.5rem; ${switchTokens.thumbBorderRadius}: calc(var(${switchTokens.thumbSize}) / 2); - ${switchTokens.thumbOffset}: 0.125rem; + ${switchTokens.thumbOffsetOn}: 0.125rem; + ${switchTokens.thumbOffsetOff}: 0.125rem; ${switchTokens.thumbPressScale}: 1.25; `, s: css` @@ -75,7 +76,8 @@ export const config = { ${switchTokens.trackBorderRadius}: calc(var(${switchTokens.trackHeight}) / 2); ${switchTokens.thumbSize}: 1rem; ${switchTokens.thumbBorderRadius}: calc(var(${switchTokens.thumbSize}) / 2); - ${switchTokens.thumbOffset}: 0.125rem; + ${switchTokens.thumbOffsetOn}: 0.125rem; + ${switchTokens.thumbOffsetOff}: 0.125rem; ${switchTokens.thumbPressScale}: 1.25; `, }, @@ -87,9 +89,10 @@ 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.trackBorderWidthOn}: 0; + ${switchTokens.trackBorderWidthOff}: 0; ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default); + ${switchTokens.thumbBackgroundColorOff}: 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 index e60199af5d..14c283da5f 100644 --- a/packages/sdds-serv/src/components/Switch/Switch.config.ts +++ b/packages/sdds-serv/src/components/Switch/Switch.config.ts @@ -66,7 +66,8 @@ export const config = { ${switchTokens.trackBorderRadius}: calc(var(${switchTokens.trackHeight}) / 2); ${switchTokens.thumbSize}: 1.5rem; ${switchTokens.thumbBorderRadius}: calc(var(${switchTokens.thumbSize}) / 2); - ${switchTokens.thumbOffset}: 0.125rem; + ${switchTokens.thumbOffsetOn}: 0.125rem; + ${switchTokens.thumbOffsetOff}: 0.125rem; ${switchTokens.thumbPressScale}: 1.25; `, s: css` @@ -75,7 +76,8 @@ export const config = { ${switchTokens.trackBorderRadius}: calc(var(${switchTokens.trackHeight}) / 2); ${switchTokens.thumbSize}: 1rem; ${switchTokens.thumbBorderRadius}: calc(var(${switchTokens.thumbSize}) / 2); - ${switchTokens.thumbOffset}: 0.125rem; + ${switchTokens.thumbOffsetOn}: 0.125rem; + ${switchTokens.thumbOffsetOff}: 0.125rem; ${switchTokens.thumbPressScale}: 1.25; `, }, @@ -87,9 +89,10 @@ 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.trackBorderWidthOn}: 0; + ${switchTokens.trackBorderWidthOff}: 0; ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default); + ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default); ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11); `, }, From 92d8c57b67e1ecdbf32a389e4ff0e37c72ff5765 Mon Sep 17 00:00:00 2001 From: Vladislav Denisov Date: Wed, 20 Nov 2024 12:50:31 +0300 Subject: [PATCH 2/2] fix(sdds-cs): Switch design and storybook fixed --- .../src/components/Switch/Switch.config.ts | 27 ++++++++++++------- .../src/components/Switch/Switch.stories.tsx | 5 +--- 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/packages/sdds-cs/src/components/Switch/Switch.config.ts b/packages/sdds-cs/src/components/Switch/Switch.config.ts index 287e4006ee..a8a13987ba 100644 --- a/packages/sdds-cs/src/components/Switch/Switch.config.ts +++ b/packages/sdds-cs/src/components/Switch/Switch.config.ts @@ -29,21 +29,23 @@ 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.thumbOffsetOn}: 0.25rem; + ${switchTokens.thumbOffsetOff}: 0.125rem; ${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.thumbOffsetOn}: 0.25rem; + ${switchTokens.thumbOffsetOff}: 0.125rem; ${switchTokens.thumbPressScale}: 1.25; `, }, @@ -53,11 +55,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.trackBorderWidthOn}: 0; + ${switchTokens.trackBorderWidthOff}: 0.125rem; + ${switchTokens.trackBorderColorOn}: var(--outline-accent); + ${switchTokens.trackBorderColorOnHover}: var(--outline-accent-hover); + ${switchTokens.trackBorderColorOff}: var(--outline-solid-primary); + ${switchTokens.trackBorderColorOffHover}: var(--outline-solid-primary-hover); + ${switchTokens.thumbBackgroundColorOn}: var(--surface-solid-card); + ${switchTokens.thumbBackgroundColorOff}: var(--surface-accent); ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11); `, }, diff --git a/packages/sdds-cs/src/components/Switch/Switch.stories.tsx b/packages/sdds-cs/src/components/Switch/Switch.stories.tsx index c00d77b486..bf3d472638 100644 --- a/packages/sdds-cs/src/components/Switch/Switch.stories.tsx +++ b/packages/sdds-cs/src/components/Switch/Switch.stories.tsx @@ -30,9 +30,6 @@ const meta: Meta = { options: ['before', 'after'], control: { type: 'select' }, }, - size: { - control: { type: 'select' }, - }, toggleSize: { control: { type: 'select' }, }, @@ -57,6 +54,7 @@ const meta: Meta = { 'required', 'minLength', 'maxLength', + 'size', ]), }, args: { @@ -95,7 +93,6 @@ const StoryDefault = (args: SwitchProps) => { export const Default: StoryObj = { args: { - size: 's', toggleSize: 'l', disabled: false, },