f214edff82
- Introduced Storybook configuration files (`main.ts`, `preview.ts`, `tsconfig.json`) for Angular components. - Created motion tokens in `motion-tokens.ts` to define durations, easing functions, and transforms. - Developed a Storybook story for motion tokens showcasing their usage and reduced motion fallback. - Added SCSS variables for motion durations, easing, and transforms in `_motion.scss`. - Implemented accessibility smoke tests using Playwright and Axe for automated accessibility checks. - Created portable and sealed bundle structures with corresponding JSON files for evidence locker. - Added shell script for verifying notify kit determinism.
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
export type MotionToken =
|
|
| 'durationXs'
|
|
| 'durationSm'
|
|
| 'durationMd'
|
|
| 'durationLg'
|
|
| 'durationXl'
|
|
| 'easeStandard'
|
|
| 'easeEntrance'
|
|
| 'easeExit'
|
|
| 'easeBounce'
|
|
| 'translateSm'
|
|
| 'translateMd'
|
|
| 'translateLg'
|
|
| 'scaleSm'
|
|
| 'scaleMd';
|
|
|
|
export const motionTokens: Record<MotionToken, string> = {
|
|
durationXs: 'var(--motion-duration-xs)',
|
|
durationSm: 'var(--motion-duration-sm)',
|
|
durationMd: 'var(--motion-duration-md)',
|
|
durationLg: 'var(--motion-duration-lg)',
|
|
durationXl: 'var(--motion-duration-xl)',
|
|
easeStandard: 'var(--motion-ease-standard)',
|
|
easeEntrance: 'var(--motion-ease-entrance)',
|
|
easeExit: 'var(--motion-ease-exit)',
|
|
easeBounce: 'var(--motion-ease-bounce)',
|
|
translateSm: 'var(--motion-translate-sm)',
|
|
translateMd: 'var(--motion-translate-md)',
|
|
translateLg: 'var(--motion-translate-lg)',
|
|
scaleSm: 'var(--motion-scale-sm)',
|
|
scaleMd: 'var(--motion-scale-md)',
|
|
};
|
|
|
|
export function reduceMotionEnabled(): boolean {
|
|
return (
|
|
document.documentElement.dataset.reduceMotion === '1' ||
|
|
document.documentElement.dataset.reduceMotion === 'true'
|
|
);
|
|
}
|