75 lines
3.8 KiB
CSS
75 lines
3.8 KiB
CSS
/*
|
|
* Material Design 3 system tokens (type, shape, state, motion, elevation).
|
|
* Color roles live in palettes.css, generated by tools/palettes/build_palettes.mjs.
|
|
*/
|
|
|
|
:root {
|
|
/* Typeface */
|
|
--md-ref-typeface-plain: Roboto, system-ui, sans-serif;
|
|
|
|
/* Type scale, as `font` shorthand values: weight size/line-height family */
|
|
--md-sys-typescale-display-large: 400 3.5625rem/4rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-display-medium: 400 2.8125rem/3.25rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-display-small: 400 2.25rem/2.75rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-headline-large: 400 2rem/2.5rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-headline-medium: 400 1.75rem/2.25rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-headline-small: 400 1.5rem/2rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-title-large: 400 1.375rem/1.75rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-title-medium: 500 1rem/1.5rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-title-small: 500 0.875rem/1.25rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-body-large: 400 1rem/1.5rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-body-medium: 400 0.875rem/1.25rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-body-small: 400 0.75rem/1rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-label-large: 500 0.875rem/1.25rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-label-medium: 500 0.75rem/1rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-label-small: 500 0.6875rem/1rem var(--md-ref-typeface-plain);
|
|
|
|
/* Tracking (letter-spacing) per type role */
|
|
--md-sys-typescale-display-large-tracking: -0.25px;
|
|
--md-sys-typescale-title-medium-tracking: 0.15px;
|
|
--md-sys-typescale-title-small-tracking: 0.1px;
|
|
--md-sys-typescale-body-large-tracking: 0.5px;
|
|
--md-sys-typescale-body-medium-tracking: 0.25px;
|
|
--md-sys-typescale-body-small-tracking: 0.4px;
|
|
--md-sys-typescale-label-large-tracking: 0.1px;
|
|
--md-sys-typescale-label-medium-tracking: 0.5px;
|
|
--md-sys-typescale-label-small-tracking: 0.5px;
|
|
|
|
/* Shape */
|
|
--md-sys-shape-corner-none: 0;
|
|
--md-sys-shape-corner-extra-small: 4px;
|
|
--md-sys-shape-corner-small: 8px;
|
|
--md-sys-shape-corner-medium: 12px;
|
|
--md-sys-shape-corner-large: 16px;
|
|
--md-sys-shape-corner-extra-large: 28px;
|
|
--md-sys-shape-corner-full: 9999px;
|
|
|
|
/* State layer opacities */
|
|
--md-sys-state-hover-state-layer-opacity: 8%;
|
|
--md-sys-state-focus-state-layer-opacity: 10%;
|
|
--md-sys-state-pressed-state-layer-opacity: 10%;
|
|
--md-sys-state-dragged-state-layer-opacity: 16%;
|
|
--md-sys-state-disabled-content-opacity: 38%;
|
|
--md-sys-state-disabled-container-opacity: 12%;
|
|
|
|
/* Motion */
|
|
--md-sys-motion-duration-short2: 100ms;
|
|
--md-sys-motion-duration-short4: 200ms;
|
|
--md-sys-motion-duration-medium2: 300ms;
|
|
--md-sys-motion-duration-medium4: 400ms;
|
|
--md-sys-motion-duration-long2: 500ms;
|
|
--md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
--md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
|
|
--md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
|
|
--md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
|
|
--md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
|
|
|
|
/* Elevation (shadow part; M3 prefers surface-container roles for depth) */
|
|
--md-sys-elevation-level0: none;
|
|
--md-sys-elevation-level1: 0 1px 2px rgb(0 0 0 / 30%), 0 1px 3px 1px rgb(0 0 0 / 15%);
|
|
--md-sys-elevation-level2: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 6px 2px rgb(0 0 0 / 15%);
|
|
--md-sys-elevation-level3: 0 1px 3px rgb(0 0 0 / 30%), 0 4px 8px 3px rgb(0 0 0 / 15%);
|
|
--md-sys-elevation-level4: 0 2px 3px rgb(0 0 0 / 30%), 0 6px 10px 4px rgb(0 0 0 / 15%);
|
|
--md-sys-elevation-level5: 0 4px 4px rgb(0 0 0 / 30%), 0 8px 12px 6px rgb(0 0 0 / 15%);
|
|
}
|