diff --git a/packages/plasma-asdk/src/components/Switch/Switch.config.ts b/packages/plasma-asdk/src/components/Switch/Switch.config.ts index 4926be8453..45323d0483 100644 --- 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 index e60199af5d..9817972d5c 100644 --- 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 index 6ca6633a02..3c0138bc1e 100644 --- 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 index 54c8f3cc7c..176bf8cbef 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}); @@ -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 index f80836415b..b3bc4afbb4 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 @@ -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 index 477b868b25..b52bbcae42 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 @@ -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 index f80836415b..b3bc4afbb4 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 @@ -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 index 477b868b25..b52bbcae42 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 @@ -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 index e60199af5d..9817972d5c 100644 --- 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 index e60199af5d..9817972d5c 100644 --- 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 index e60199af5d..9817972d5c 100644 --- 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 index e60199af5d..9817972d5c 100644 --- 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 index e60199af5d..9817972d5c 100644 --- 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);