Skip to content

Commit

Permalink
feat(plasma-*, sdds-*): Switch track and thumb tokens improved
Browse files Browse the repository at this point in the history
  • Loading branch information
@denivladislav
denivladislav committed Nov 22, 2024
1 parent 4de7e3c commit 0c53b1a
Show file tree
Hide file tree
Showing 13 changed files with 99 additions and 57 deletions.
8 changes: 5 additions & 3 deletions packages/plasma-asdk/src/components/Switch/Switch.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
`,
},
Expand All @@ -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);
`,
},
Expand Down
11 changes: 7 additions & 4 deletions packages/plasma-b2c/src/components/Switch/Switch.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand All @@ -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;
`,
},
Expand All @@ -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);
`,
},
Expand Down
16 changes: 9 additions & 7 deletions packages/plasma-new-hope/src/components/Switch/Switch.tokens.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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',

Expand Down
14 changes: 11 additions & 3 deletions packages/plasma-new-hope/src/components/Switch/_toggleSize/base.ts
View file
Original file line number Diff line number Diff line change
@@ -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});
Expand All @@ -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});
}
}
Expand Down
11 changes: 7 additions & 4 deletions packages/plasma-new-hope/src/examples/plasma_b2c/components/Switch/Switch.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand All @@ -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;
`,
},
Expand All @@ -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);
`,
},
Expand Down
15 changes: 9 additions & 6 deletions packages/plasma-new-hope/src/examples/plasma_b2c/components/Switch/Switch.outline.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand All @@ -77,21 +78,23 @@ 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;
`,
},
view: {
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);
`,
},
Expand Down
11 changes: 7 additions & 4 deletions packages/plasma-new-hope/src/examples/plasma_web/components/Switch/Switch.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand All @@ -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;
`,
},
Expand All @@ -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);
`,
},
Expand Down
15 changes: 9 additions & 6 deletions packages/plasma-new-hope/src/examples/plasma_web/components/Switch/Switch.outline.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand All @@ -77,21 +78,23 @@ 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;
`,
},
view: {
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);
`,
},
Expand Down
11 changes: 7 additions & 4 deletions packages/plasma-web/src/components/Switch/Switch.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand All @@ -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;
`,
},
Expand All @@ -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);
`,
},
Expand Down
11 changes: 7 additions & 4 deletions packages/sdds-dfa/src/components/Switch/Switch.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand All @@ -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;
`,
},
Expand All @@ -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);
`,
},
Expand Down
Loading

0 comments on commit 0c53b1a

Please sign in to comment.