surtic86andClaude Opus 5.5
f08d2c3f6c
The size modes scale rem line heights to fractions (1.25rem = 22.857px in Large), and pixel rounding moved text up to 1.2px off center. Type scale line heights and the header's 3rem now round to whole px (no change in Normal). Segmented buttons, Reset to default and the project select drop core's vertical padding, which made the line overflow and sink. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
83 lines
4.5 KiB
CSS
83 lines
4.5 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. Line heights are rounded to
|
|
whole px: in the size modes 1.25rem is e.g. 22.857px, and the rounding moved text off center */
|
|
--md-sys-typescale-display-large: 400 3.5625rem/round(4rem, 1px) var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-display-medium: 400 2.8125rem/round(3.25rem, 1px) var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-display-small: 400 2.25rem/round(2.75rem, 1px) var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-headline-large: 400 2rem/round(2.5rem, 1px) var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-headline-medium: 400 1.75rem/round(2.25rem, 1px) var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-headline-small: 400 1.5rem/round(2rem, 1px) var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-title-large: 400 1.375rem/round(1.75rem, 1px) var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-title-medium: 500 1rem/round(1.5rem, 1px) var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-title-small: 500 0.875rem/round(1.25rem, 1px) var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-body-large: 400 1rem/round(1.5rem, 1px) var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-body-medium: 400 0.875rem/round(1.25rem, 1px) var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-body-small: 400 0.75rem/round(1rem, 1px) var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-label-large: 500 0.875rem/round(1.25rem, 1px) var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-label-medium: 500 0.75rem/round(1rem, 1px) var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-label-small: 500 0.6875rem/round(1rem, 1px) 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%);
|
|
|
|
/* Size mode (theme.js sets data-size): added to control heights, e.g. calc(40px + var(--nm-density)) */
|
|
--nm-density: 0px;
|
|
}
|
|
|
|
/* Text is in rem, so the root size scales it; percent keeps the browser's font setting */
|
|
:root[data-size="compact"] { font-size: 92.857%; --nm-density: -8px; } /* 13px body, M3 density -2 */
|
|
:root[data-size="large"] { font-size: 114.286%; --nm-density: 8px; } /* 16px body */
|