Skip to content

Commit ffcefc6

Browse files
jameskosterjameskoster
committed
Remove hardcoded ms values from duration token names
Use semantic t-shirt size names only and resolve actual values from CSS custom properties at runtime, so labels stay accurate if token values change. Made-with: Cursor
1 parent 6a12bba commit ffcefc6

1 file changed

Lines changed: 13 additions & 11 deletions

File tree

‎storybook/stories/design-system/tokens/motion.story.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -36,39 +36,39 @@ const EASING_TOKENS = [
3636

3737
const DURATION_TOKENS = [
3838
{
39-
name: 'xs (50ms)',
39+
name: 'xs',
4040
variable: 'var(--wpds-motion-duration-xs)',
4141
description: 'Micro-delays and transition offsets.',
4242
},
4343
{
44-
name: 'sm (100ms)',
44+
name: 'sm',
4545
variable: 'var(--wpds-motion-duration-sm)',
4646
description: 'Micro-interactions like focus rings and state changes.',
4747
},
4848
{
49-
name: 'md (200ms)',
49+
name: 'md',
5050
variable: 'var(--wpds-motion-duration-md)',
5151
description: 'Standard transitions like menus and popovers.',
5252
},
5353
{
54-
name: 'lg (300ms)',
54+
name: 'lg',
5555
variable: 'var(--wpds-motion-duration-lg)',
5656
description: 'Deliberate animations like slides and reveals.',
5757
},
5858
{
59-
name: 'xl (400ms)',
59+
name: 'xl',
6060
variable: 'var(--wpds-motion-duration-xl)',
6161
description:
6262
'Extended animations like complex or multi-step transitions.',
6363
},
6464
];
6565

6666
const DURATION_OPTIONS = [
67-
{ label: 'xs (50ms)', value: '50ms' },
68-
{ label: 'sm (100ms)', value: '100ms' },
69-
{ label: 'md (200ms)', value: '200ms' },
70-
{ label: 'lg (300ms)', value: '300ms' },
71-
{ label: 'xl (400ms)', value: '400ms' },
67+
{ label: 'xs', value: 'var(--wpds-motion-duration-xs)' },
68+
{ label: 'sm', value: 'var(--wpds-motion-duration-sm)' },
69+
{ label: 'md', value: 'var(--wpds-motion-duration-md)' },
70+
{ label: 'lg', value: 'var(--wpds-motion-duration-lg)' },
71+
{ label: 'xl', value: 'var(--wpds-motion-duration-xl)' },
7272
{ label: 'Custom', value: 'custom' },
7373
];
7474

@@ -116,7 +116,9 @@ function AnimationRow( {
116116
function MotionDemo() {
117117
const [ animKey, setAnimKey ] = useState( 0 );
118118
const replay = useCallback( () => setAnimKey( ( k ) => k + 1 ), [] );
119-
const [ selectedDuration, setSelectedDuration ] = useState( '400ms' );
119+
const [ selectedDuration, setSelectedDuration ] = useState(
120+
'var(--wpds-motion-duration-xl)'
121+
);
120122
const [ customDuration, setCustomDuration ] = useState( '600' );
121123

122124
const easingDuration =

0 commit comments

Comments
 (0)