Add the Material 3 Expressive foundation
tests / lint (push) Successful in 1m0s
tests / feature (8.4) (push) Successful in 1m0s
tests / feature (8.5) (push) Successful in 1m1s
tests / browser (safari, webkit) (push) Successful in 1m59s
tests / browser (chrome, chromium) (push) Successful in 1m49s
tests / browser (firefox, firefox) (push) Successful in 1m54s
tests / lint (push) Successful in 1m0s
tests / feature (8.4) (push) Successful in 1m0s
tests / feature (8.5) (push) Successful in 1m1s
tests / browser (safari, webkit) (push) Successful in 1m59s
tests / browser (chrome, chromium) (push) Successful in 1m49s
tests / browser (firefox, firefox) (push) Successful in 1m54s
Colour, shape, type, elevation and motion as tokens and Tailwind utilities; `php artisan material:scheme`, which generates an app's colour roles with Google's material-color-utilities (spec 2025); the theme head script with light, dark and system and its Alpine store; Google Sans Flex; every Material Symbol (4,135, outlined and filled) drawn by <x-icon> without blade-icons; all 35 M3 Expressive shapes, ported from androidx, as <x-shape>; the x-figure directive; the Toasts concern; DesignGuard for applications' tests; and a showcase with every token, both themes side by side and an icon search. Colour utilities are `@theme inline`, so a section with its own data-theme repaints; without it they resolve once on :root. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
This commit is contained in:
Andreas Reinhold / reini
co-authored by
Claude Opus 5
Claude Opus 5
parent
9b53891a8e
commit
b48e879254
@@ -0,0 +1,21 @@
|
||||
/*
|
||||
* Elevation, as M3's five shadow levels.
|
||||
*
|
||||
* Geometry from @material/web's token files (Apache-2.0, © Google LLC). The colour goes
|
||||
* through `color-mix()` rather than their relative `hsl(from …)`, which needs a newer
|
||||
* browser for the same result.
|
||||
*
|
||||
* Shadows are for things that float over content — menus, the FAB, a floating toolbar, a
|
||||
* sheet. On a dark surface a shadow is nearly invisible, so a panel separates from the page
|
||||
* by its container tone instead. As utilities: shadow-elevation-1 … shadow-elevation-5.
|
||||
*/
|
||||
:root {
|
||||
--md-sys-color-shadow: #000000;
|
||||
--md-sys-color-scrim: #000000;
|
||||
|
||||
--md-sys-elevation-1: 0 1px 2px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 1px 3px 1px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
|
||||
--md-sys-elevation-2: 0 1px 2px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 2px 6px 2px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
|
||||
--md-sys-elevation-3: 0 1px 3px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 4px 8px 3px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
|
||||
--md-sys-elevation-4: 0 2px 3px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 6px 10px 4px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
|
||||
--md-sys-elevation-5: 0 4px 4px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 8px 12px 6px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
/*
|
||||
* Google Sans Flex (SIL Open Font License 1.1, resources/fonts/google-sans-flex/OFL.txt).
|
||||
*
|
||||
* One variable woff2, cut down with fontTools: Latin and Latin Extended plus a handful of
|
||||
* symbols (≈ →), weight 400–700 and roundness 0–100 kept, width, grade, slant and optical
|
||||
* size pinned — 63 KB where the full font is 4 MB. Vite copies it into the application's
|
||||
* build from this relative url.
|
||||
*
|
||||
* An application that wants another typeface overrides `--md-ref-typeface-brand` (and so
|
||||
* `font-sans`) after importing material.css.
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'Google Sans Flex';
|
||||
src: url('../../fonts/google-sans-flex/GoogleSansFlex-Latin.woff2') format('woff2');
|
||||
font-weight: 400 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
/*
|
||||
* Motion, as M3 Expressive's springs.
|
||||
*
|
||||
* M3 Expressive moves on physics, not on a duration and a curve: every transition is a
|
||||
* spring with a damping ratio and a stiffness. CSS cannot run a spring, so each one is
|
||||
* sampled into a `linear()` easing over the time it takes to settle (to within 0.1% of its
|
||||
* travel) — 49 points, past the resolution anyone can see at 60 Hz. The constants are
|
||||
* androidx Compose Material 3's own (tokens/ExpressiveMotionTokens.kt, Apache-2.0):
|
||||
*
|
||||
* spatial — position, size, shape. Underdamped, so the fast one overshoots by 9% and
|
||||
* settles back: that small bounce is what reads as Expressive.
|
||||
* effects — colour and opacity. Critically damped; a colour must never overshoot.
|
||||
*
|
||||
* Use a pair together, easing and duration, or the curve is stretched over the wrong time
|
||||
* and the bounce lands late:
|
||||
*
|
||||
* transition: transform var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);
|
||||
* class="transition-transform duration-(--md-sys-motion-spatial-fast-duration) ease-spatial-fast"
|
||||
*
|
||||
* The cubic-bezier easings below are M3's non-spring set (@material/web token values,
|
||||
* Apache-2.0, © Google LLC), for the few places a duration is fixed by something outside
|
||||
* the page — a view transition, an animated scroll.
|
||||
*
|
||||
* Reduced motion zeroes every duration here, so anything that animates through these tokens
|
||||
* turns instant with no per-component check; anything that animates without them is a bug.
|
||||
*/
|
||||
:root {
|
||||
/* damping 0.6, stiffness 800; settles in 360ms, peaks at 1.094 */
|
||||
--md-sys-motion-spatial-fast: linear(0, 0.0206, 0.0754, 0.1544, 0.2492, 0.3524, 0.458, 0.5613, 0.6588, 0.7479, 0.8269, 0.895, 0.952, 0.9981, 1.0338, 1.0603, 1.0783, 1.0893, 1.0942, 1.0943, 1.0906, 1.0842, 1.0759, 1.0665, 1.0565, 1.0465, 1.037, 1.0281, 1.0201, 1.0131, 1.0072, 1.0023, 0.9984, 0.9955, 0.9934, 0.992, 0.9912, 0.991, 0.9912, 0.9917, 0.9924, 0.9932, 0.9942, 0.9951, 0.996, 0.9969, 0.9977, 0.9984, 1);
|
||||
--md-sys-motion-spatial-fast-duration: 360ms;
|
||||
|
||||
/* damping 0.8, stiffness 380; settles in 440ms, peaks at 1.015 */
|
||||
--md-sys-motion-spatial-default: linear(0, 0.0145, 0.0527, 0.1076, 0.1736, 0.2461, 0.3214, 0.3968, 0.4702, 0.54, 0.6051, 0.665, 0.7193, 0.7679, 0.8108, 0.8483, 0.8807, 0.9083, 0.9316, 0.951, 0.9669, 0.9798, 0.99, 0.998, 1.004, 1.0085, 1.0116, 1.0136, 1.0147, 1.0151, 1.0151, 1.0146, 1.0138, 1.0128, 1.0118, 1.0106, 1.0095, 1.0084, 1.0073, 1.0063, 1.0053, 1.0045, 1.0037, 1.0031, 1.0025, 1.002, 1.0015, 1.0011, 1);
|
||||
--md-sys-motion-spatial-default-duration: 440ms;
|
||||
|
||||
/* damping 0.8, stiffness 200; settles in 600ms, peaks at 1.015 */
|
||||
--md-sys-motion-spatial-slow: linear(0, 0.0142, 0.0517, 0.1057, 0.1706, 0.2421, 0.3166, 0.3912, 0.464, 0.5334, 0.5984, 0.6583, 0.7127, 0.7615, 0.8047, 0.8426, 0.8755, 0.9036, 0.9274, 0.9473, 0.9638, 0.9771, 0.9878, 0.9962, 1.0027, 1.0074, 1.0108, 1.0131, 1.0144, 1.0151, 1.0151, 1.0148, 1.0141, 1.0132, 1.0122, 1.0111, 1.0099, 1.0088, 1.0077, 1.0067, 1.0057, 1.0049, 1.0041, 1.0034, 1.0027, 1.0022, 1.0017, 1.0013, 1);
|
||||
--md-sys-motion-spatial-slow-duration: 600ms;
|
||||
|
||||
/* damping 1.0, stiffness 3800; settles in 150ms */
|
||||
--md-sys-motion-effects-fast: linear(0, 0.0163, 0.0576, 0.1147, 0.1807, 0.2507, 0.3214, 0.3902, 0.4558, 0.5172, 0.5737, 0.6253, 0.6718, 0.7136, 0.7508, 0.7837, 0.8128, 0.8383, 0.8606, 0.8801, 0.897, 0.9117, 0.9244, 0.9353, 0.9448, 0.9529, 0.9599, 0.9658, 0.9709, 0.9753, 0.979, 0.9822, 0.9849, 0.9872, 0.9892, 0.9909, 0.9923, 0.9935, 0.9945, 0.9954, 0.9961, 0.9967, 0.9972, 0.9977, 0.998, 0.9983, 0.9986, 0.9988, 1);
|
||||
--md-sys-motion-effects-fast-duration: 150ms;
|
||||
|
||||
/* damping 1.0, stiffness 1600; settles in 240ms */
|
||||
--md-sys-motion-effects-default: linear(0, 0.0175, 0.0616, 0.1219, 0.1912, 0.2642, 0.3374, 0.4082, 0.4751, 0.5372, 0.594, 0.6454, 0.6916, 0.7326, 0.7689, 0.8009, 0.8288, 0.8532, 0.8743, 0.8926, 0.9084, 0.922, 0.9337, 0.9437, 0.9523, 0.9596, 0.9658, 0.9711, 0.9756, 0.9794, 0.9826, 0.9854, 0.9877, 0.9897, 0.9913, 0.9927, 0.9939, 0.9949, 0.9957, 0.9964, 0.997, 0.9975, 0.9979, 0.9982, 0.9985, 0.9988, 0.999, 0.9991, 1);
|
||||
--md-sys-motion-effects-default-duration: 240ms;
|
||||
|
||||
/* damping 1.0, stiffness 800; settles in 330ms */
|
||||
--md-sys-motion-effects-slow: linear(0, 0.0166, 0.0586, 0.1165, 0.1833, 0.254, 0.3253, 0.3947, 0.4606, 0.5221, 0.5788, 0.6303, 0.6768, 0.7184, 0.7554, 0.7881, 0.8169, 0.8421, 0.8641, 0.8833, 0.8999, 0.9144, 0.9268, 0.9375, 0.9467, 0.9546, 0.9614, 0.9672, 0.9722, 0.9764, 0.98, 0.9831, 0.9857, 0.9879, 0.9898, 0.9914, 0.9927, 0.9939, 0.9948, 0.9956, 0.9963, 0.9969, 0.9974, 0.9978, 0.9982, 0.9985, 0.9987, 0.9989, 1);
|
||||
--md-sys-motion-effects-slow-duration: 330ms;
|
||||
|
||||
--md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
|
||||
--md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
|
||||
--md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
|
||||
--md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
|
||||
--md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
|
||||
--md-sys-motion-duration-short: 150ms;
|
||||
--md-sys-motion-duration-medium: 300ms;
|
||||
--md-sys-motion-duration-long: 500ms;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
:root {
|
||||
--md-sys-motion-spatial-fast-duration: 0ms;
|
||||
--md-sys-motion-spatial-default-duration: 0ms;
|
||||
--md-sys-motion-spatial-slow-duration: 0ms;
|
||||
--md-sys-motion-effects-fast-duration: 0ms;
|
||||
--md-sys-motion-effects-default-duration: 0ms;
|
||||
--md-sys-motion-effects-slow-duration: 0ms;
|
||||
--md-sys-motion-duration-short: 0ms;
|
||||
--md-sys-motion-duration-medium: 0ms;
|
||||
--md-sys-motion-duration-long: 0ms;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
/*
|
||||
* Material 3 colour roles, generated by Google's material-color-utilities (spec 2025).
|
||||
*
|
||||
* php artisan material:scheme "#6750a4" --variant=tonal-spot
|
||||
*
|
||||
* Regenerate rather than editing a value: every pair here (a role and its on-role) carries
|
||||
* M3's contrast guarantee only as generated. The head script sets data-theme before the
|
||||
* first paint; the light block also stands without it.
|
||||
*/
|
||||
|
||||
:root,
|
||||
[data-theme='light'] {
|
||||
color-scheme: light;
|
||||
|
||||
--md-sys-color-background: #fdf7fe;
|
||||
--md-sys-color-on-background: #34313a;
|
||||
--md-sys-color-surface: #fdf7fe;
|
||||
--md-sys-color-surface-dim: #ded8e4;
|
||||
--md-sys-color-surface-bright: #fdf7fe;
|
||||
--md-sys-color-surface-container-lowest: #ffffff;
|
||||
--md-sys-color-surface-container-low: #f8f1fa;
|
||||
--md-sys-color-surface-container: #f2ecf5;
|
||||
--md-sys-color-surface-container-high: #ece6f0;
|
||||
--md-sys-color-surface-container-highest: #e7e0ec;
|
||||
--md-sys-color-on-surface: #34313a;
|
||||
--md-sys-color-on-surface-variant: #615d68;
|
||||
--md-sys-color-outline: #7d7983;
|
||||
--md-sys-color-outline-variant: #b5b0bb;
|
||||
--md-sys-color-inverse-surface: #0f0d12;
|
||||
--md-sys-color-inverse-on-surface: #a09ba1;
|
||||
--md-sys-color-primary: #655789;
|
||||
--md-sys-color-primary-dim: #594b7c;
|
||||
--md-sys-color-on-primary: #fdf7ff;
|
||||
--md-sys-color-primary-container: #d4c3fd;
|
||||
--md-sys-color-on-primary-container: #493c6c;
|
||||
--md-sys-color-primary-fixed: #d4c3fd;
|
||||
--md-sys-color-primary-fixed-dim: #c6b6ee;
|
||||
--md-sys-color-on-primary-fixed: #352857;
|
||||
--md-sys-color-on-primary-fixed-variant: #524576;
|
||||
--md-sys-color-inverse-primary: #d4c3fd;
|
||||
--md-sys-color-secondary: #625c71;
|
||||
--md-sys-color-secondary-dim: #565065;
|
||||
--md-sys-color-on-secondary: #fdf7ff;
|
||||
--md-sys-color-secondary-container: #e8def8;
|
||||
--md-sys-color-on-secondary-container: #554f63;
|
||||
--md-sys-color-secondary-fixed: #e8def8;
|
||||
--md-sys-color-secondary-fixed-dim: #dad0ea;
|
||||
--md-sys-color-on-secondary-fixed: #423c50;
|
||||
--md-sys-color-on-secondary-fixed-variant: #5f586e;
|
||||
--md-sys-color-tertiary: #7b5270;
|
||||
--md-sys-color-tertiary-dim: #6e4664;
|
||||
--md-sys-color-on-tertiary: #fff7f9;
|
||||
--md-sys-color-tertiary-container: #f4bfe3;
|
||||
--md-sys-color-on-tertiary-container: #5f3956;
|
||||
--md-sys-color-tertiary-fixed: #f4bfe3;
|
||||
--md-sys-color-tertiary-fixed-dim: #e5b2d5;
|
||||
--md-sys-color-on-tertiary-fixed: #4a2642;
|
||||
--md-sys-color-on-tertiary-fixed-variant: #694260;
|
||||
--md-sys-color-error: #a8364b;
|
||||
--md-sys-color-error-dim: #6b0221;
|
||||
--md-sys-color-on-error: #fff7f7;
|
||||
--md-sys-color-error-container: #f97386;
|
||||
--md-sys-color-on-error-container: #6e0523;
|
||||
--md-sys-color-success: #006c45;
|
||||
--md-sys-color-on-success: #ffffff;
|
||||
--md-sys-color-success-container: #86f9bc;
|
||||
--md-sys-color-on-success-container: #002112;
|
||||
--md-sys-color-warning: #7c5800;
|
||||
--md-sys-color-on-warning: #ffffff;
|
||||
--md-sys-color-warning-container: #ffdea6;
|
||||
--md-sys-color-on-warning-container: #271900;
|
||||
--md-sys-color-info: #005ac4;
|
||||
--md-sys-color-on-info: #ffffff;
|
||||
--md-sys-color-info-container: #d8e2ff;
|
||||
--md-sys-color-on-info-container: #001a42;
|
||||
--md-sys-color-inverse-error: #f97386;
|
||||
--md-sys-color-inverse-success: #69dca1;
|
||||
--md-sys-color-inverse-warning: #fdbb28;
|
||||
--md-sys-color-inverse-info: #aec6ff;
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
color-scheme: dark;
|
||||
|
||||
--md-sys-color-background: #0f0d12;
|
||||
--md-sys-color-on-background: #eae3ef;
|
||||
--md-sys-color-surface: #0f0d12;
|
||||
--md-sys-color-surface-dim: #0f0d12;
|
||||
--md-sys-color-surface-bright: #2e2b34;
|
||||
--md-sys-color-surface-container-lowest: #000000;
|
||||
--md-sys-color-surface-container-low: #141218;
|
||||
--md-sys-color-surface-container: #1b181f;
|
||||
--md-sys-color-surface-container-high: #211e26;
|
||||
--md-sys-color-surface-container-highest: #27242d;
|
||||
--md-sys-color-on-surface: #eae3ef;
|
||||
--md-sys-color-on-surface-variant: #aea9b4;
|
||||
--md-sys-color-outline: #78737e;
|
||||
--md-sys-color-outline-variant: #4a4650;
|
||||
--md-sys-color-inverse-surface: #fdf7fe;
|
||||
--md-sys-color-inverse-on-surface: #575459;
|
||||
--md-sys-color-primary: #cdc0ec;
|
||||
--md-sys-color-primary-dim: #bfb2de;
|
||||
--md-sys-color-on-primary: #443a5f;
|
||||
--md-sys-color-primary-container: #574d72;
|
||||
--md-sys-color-on-primary-container: #e9deff;
|
||||
--md-sys-color-primary-fixed: #ded0fe;
|
||||
--md-sys-color-primary-fixed-dim: #d0c3ef;
|
||||
--md-sys-color-on-primary-fixed: #3c3256;
|
||||
--md-sys-color-on-primary-fixed-variant: #594e74;
|
||||
--md-sys-color-inverse-primary: #645980;
|
||||
--md-sys-color-secondary: #cbc2db;
|
||||
--md-sys-color-secondary-dim: #beb5cd;
|
||||
--md-sys-color-on-secondary: #433d51;
|
||||
--md-sys-color-secondary-container: #3e384c;
|
||||
--md-sys-color-on-secondary-container: #c4bbd4;
|
||||
--md-sys-color-secondary-fixed: #e8def8;
|
||||
--md-sys-color-secondary-fixed-dim: #dad0ea;
|
||||
--md-sys-color-on-secondary-fixed: #423c50;
|
||||
--md-sys-color-on-secondary-fixed-variant: #5f586e;
|
||||
--md-sys-color-tertiary: #ffcfef;
|
||||
--md-sys-color-tertiary-dim: #f4bfe3;
|
||||
--md-sys-color-on-tertiary: #69415f;
|
||||
--md-sys-color-tertiary-container: #f4bfe3;
|
||||
--md-sys-color-on-tertiary-container: #5f3956;
|
||||
--md-sys-color-tertiary-fixed: #f4bfe3;
|
||||
--md-sys-color-tertiary-fixed-dim: #e5b2d5;
|
||||
--md-sys-color-on-tertiary-fixed: #4a2642;
|
||||
--md-sys-color-on-tertiary-fixed-variant: #694260;
|
||||
--md-sys-color-error: #f97386;
|
||||
--md-sys-color-error-dim: #c44b5f;
|
||||
--md-sys-color-on-error: #490013;
|
||||
--md-sys-color-error-container: #871c34;
|
||||
--md-sys-color-on-error-container: #ff97a3;
|
||||
--md-sys-color-success: #69dca1;
|
||||
--md-sys-color-on-success: #003822;
|
||||
--md-sys-color-success-container: #005233;
|
||||
--md-sys-color-on-success-container: #86f9bc;
|
||||
--md-sys-color-warning: #fdbb28;
|
||||
--md-sys-color-on-warning: #412d00;
|
||||
--md-sys-color-warning-container: #5e4200;
|
||||
--md-sys-color-on-warning-container: #ffdea6;
|
||||
--md-sys-color-info: #aec6ff;
|
||||
--md-sys-color-on-info: #002e6a;
|
||||
--md-sys-color-info-container: #004396;
|
||||
--md-sys-color-on-info-container: #d8e2ff;
|
||||
--md-sys-color-inverse-error: #a8364b;
|
||||
--md-sys-color-inverse-success: #006c45;
|
||||
--md-sys-color-inverse-warning: #7c5800;
|
||||
--md-sys-color-inverse-info: #005ac4;
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
{
|
||||
"seed": "#6750a4",
|
||||
"variant": "tonal-spot",
|
||||
"spec": "2025",
|
||||
"contrast": 0,
|
||||
"light": {
|
||||
"background": "#fdf7fe",
|
||||
"on-background": "#34313a",
|
||||
"surface": "#fdf7fe",
|
||||
"surface-dim": "#ded8e4",
|
||||
"surface-bright": "#fdf7fe",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-low": "#f8f1fa",
|
||||
"surface-container": "#f2ecf5",
|
||||
"surface-container-high": "#ece6f0",
|
||||
"surface-container-highest": "#e7e0ec",
|
||||
"on-surface": "#34313a",
|
||||
"on-surface-variant": "#615d68",
|
||||
"outline": "#7d7983",
|
||||
"outline-variant": "#b5b0bb",
|
||||
"inverse-surface": "#0f0d12",
|
||||
"inverse-on-surface": "#a09ba1",
|
||||
"primary": "#655789",
|
||||
"primary-dim": "#594b7c",
|
||||
"on-primary": "#fdf7ff",
|
||||
"primary-container": "#d4c3fd",
|
||||
"on-primary-container": "#493c6c",
|
||||
"primary-fixed": "#d4c3fd",
|
||||
"primary-fixed-dim": "#c6b6ee",
|
||||
"on-primary-fixed": "#352857",
|
||||
"on-primary-fixed-variant": "#524576",
|
||||
"inverse-primary": "#d4c3fd",
|
||||
"secondary": "#625c71",
|
||||
"secondary-dim": "#565065",
|
||||
"on-secondary": "#fdf7ff",
|
||||
"secondary-container": "#e8def8",
|
||||
"on-secondary-container": "#554f63",
|
||||
"secondary-fixed": "#e8def8",
|
||||
"secondary-fixed-dim": "#dad0ea",
|
||||
"on-secondary-fixed": "#423c50",
|
||||
"on-secondary-fixed-variant": "#5f586e",
|
||||
"tertiary": "#7b5270",
|
||||
"tertiary-dim": "#6e4664",
|
||||
"on-tertiary": "#fff7f9",
|
||||
"tertiary-container": "#f4bfe3",
|
||||
"on-tertiary-container": "#5f3956",
|
||||
"tertiary-fixed": "#f4bfe3",
|
||||
"tertiary-fixed-dim": "#e5b2d5",
|
||||
"on-tertiary-fixed": "#4a2642",
|
||||
"on-tertiary-fixed-variant": "#694260",
|
||||
"error": "#a8364b",
|
||||
"error-dim": "#6b0221",
|
||||
"on-error": "#fff7f7",
|
||||
"error-container": "#f97386",
|
||||
"on-error-container": "#6e0523",
|
||||
"success": "#006c45",
|
||||
"on-success": "#ffffff",
|
||||
"success-container": "#86f9bc",
|
||||
"on-success-container": "#002112",
|
||||
"warning": "#7c5800",
|
||||
"on-warning": "#ffffff",
|
||||
"warning-container": "#ffdea6",
|
||||
"on-warning-container": "#271900",
|
||||
"info": "#005ac4",
|
||||
"on-info": "#ffffff",
|
||||
"info-container": "#d8e2ff",
|
||||
"on-info-container": "#001a42",
|
||||
"inverse-error": "#f97386",
|
||||
"inverse-success": "#69dca1",
|
||||
"inverse-warning": "#fdbb28",
|
||||
"inverse-info": "#aec6ff"
|
||||
},
|
||||
"dark": {
|
||||
"background": "#0f0d12",
|
||||
"on-background": "#eae3ef",
|
||||
"surface": "#0f0d12",
|
||||
"surface-dim": "#0f0d12",
|
||||
"surface-bright": "#2e2b34",
|
||||
"surface-container-lowest": "#000000",
|
||||
"surface-container-low": "#141218",
|
||||
"surface-container": "#1b181f",
|
||||
"surface-container-high": "#211e26",
|
||||
"surface-container-highest": "#27242d",
|
||||
"on-surface": "#eae3ef",
|
||||
"on-surface-variant": "#aea9b4",
|
||||
"outline": "#78737e",
|
||||
"outline-variant": "#4a4650",
|
||||
"inverse-surface": "#fdf7fe",
|
||||
"inverse-on-surface": "#575459",
|
||||
"primary": "#cdc0ec",
|
||||
"primary-dim": "#bfb2de",
|
||||
"on-primary": "#443a5f",
|
||||
"primary-container": "#574d72",
|
||||
"on-primary-container": "#e9deff",
|
||||
"primary-fixed": "#ded0fe",
|
||||
"primary-fixed-dim": "#d0c3ef",
|
||||
"on-primary-fixed": "#3c3256",
|
||||
"on-primary-fixed-variant": "#594e74",
|
||||
"inverse-primary": "#645980",
|
||||
"secondary": "#cbc2db",
|
||||
"secondary-dim": "#beb5cd",
|
||||
"on-secondary": "#433d51",
|
||||
"secondary-container": "#3e384c",
|
||||
"on-secondary-container": "#c4bbd4",
|
||||
"secondary-fixed": "#e8def8",
|
||||
"secondary-fixed-dim": "#dad0ea",
|
||||
"on-secondary-fixed": "#423c50",
|
||||
"on-secondary-fixed-variant": "#5f586e",
|
||||
"tertiary": "#ffcfef",
|
||||
"tertiary-dim": "#f4bfe3",
|
||||
"on-tertiary": "#69415f",
|
||||
"tertiary-container": "#f4bfe3",
|
||||
"on-tertiary-container": "#5f3956",
|
||||
"tertiary-fixed": "#f4bfe3",
|
||||
"tertiary-fixed-dim": "#e5b2d5",
|
||||
"on-tertiary-fixed": "#4a2642",
|
||||
"on-tertiary-fixed-variant": "#694260",
|
||||
"error": "#f97386",
|
||||
"error-dim": "#c44b5f",
|
||||
"on-error": "#490013",
|
||||
"error-container": "#871c34",
|
||||
"on-error-container": "#ff97a3",
|
||||
"success": "#69dca1",
|
||||
"on-success": "#003822",
|
||||
"success-container": "#005233",
|
||||
"on-success-container": "#86f9bc",
|
||||
"warning": "#fdbb28",
|
||||
"on-warning": "#412d00",
|
||||
"warning-container": "#5e4200",
|
||||
"on-warning-container": "#ffdea6",
|
||||
"info": "#aec6ff",
|
||||
"on-info": "#002e6a",
|
||||
"info-container": "#004396",
|
||||
"on-info-container": "#d8e2ff",
|
||||
"inverse-error": "#a8364b",
|
||||
"inverse-success": "#006c45",
|
||||
"inverse-warning": "#7c5800",
|
||||
"inverse-info": "#005ac4"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
/*
|
||||
* Shape, as M3's corner scale.
|
||||
*
|
||||
* Values from @material/web's token files (Apache-2.0, © Google LLC). `full` is a large
|
||||
* length rather than @material/web's `50cqmin`, which resolves against a container an
|
||||
* application may never declare.
|
||||
*
|
||||
* As utilities: rounded-corner-xs … rounded-corner-full.
|
||||
*/
|
||||
:root {
|
||||
--md-sys-shape-corner-none: 0px;
|
||||
--md-sys-shape-corner-xs: 4px;
|
||||
--md-sys-shape-corner-sm: 8px;
|
||||
--md-sys-shape-corner-md: 12px;
|
||||
--md-sys-shape-corner-lg: 16px;
|
||||
--md-sys-shape-corner-lg-increased: 20px;
|
||||
--md-sys-shape-corner-xl: 28px;
|
||||
--md-sys-shape-corner-xl-increased: 32px;
|
||||
--md-sys-shape-corner-xxl: 48px;
|
||||
--md-sys-shape-corner-full: 9999px;
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
/*
|
||||
* Interaction states, as M3 draws them.
|
||||
*
|
||||
* `state-layer` puts M3's state layer on an element: its content colour laid over it at 8%
|
||||
* on hover, 10% on focus and press. Hover only where the pointer can hover, because a touch
|
||||
* screen keeps the last hover after a tap. The layer is a ::before, so the element becomes
|
||||
* `position: relative` and `isolation: isolate`; never pass `static` or a z-index to it.
|
||||
*
|
||||
* `focus-ring` is M3's focus indicator — 3px in secondary, 2px out — drawn only for keyboard
|
||||
* focus. `link` is a link in running text: underlined in the colour of the words around it.
|
||||
*/
|
||||
|
||||
@utility state-layer {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
border-radius: inherit;
|
||||
background-color: currentColor;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover::before {
|
||||
opacity: 0.08;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible::before,
|
||||
&:active::before {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
&:disabled::before,
|
||||
&[aria-disabled='true']::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@utility focus-ring {
|
||||
outline: none;
|
||||
|
||||
&:focus-visible {
|
||||
outline: 3px solid var(--md-sys-color-secondary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@utility link {
|
||||
cursor: pointer;
|
||||
text-decoration-line: underline;
|
||||
text-decoration-thickness: from-font;
|
||||
text-underline-offset: 0.15em;
|
||||
border-radius: var(--md-sys-shape-corner-xs);
|
||||
|
||||
&:focus-visible {
|
||||
outline: 3px solid var(--md-sys-color-secondary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
[x-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
/*
|
||||
* The Tailwind theme: every token as a utility.
|
||||
*
|
||||
* `--color-*: initial` clears Tailwind's default palette, so every colour a template can name
|
||||
* is an M3 role (bg-primary, text-on-surface-variant, border-outline-variant…) and a
|
||||
* `text-red-600` compiles to nothing. White and black come back as the two absolutes. An
|
||||
* application that wants more colours adds them in its own @theme after importing this file.
|
||||
*
|
||||
* The colour blocks are `@theme inline`: `bg-primary` compiles to
|
||||
* `background-color: var(--md-sys-color-primary)`, resolved on the element itself. Without
|
||||
* `inline` it compiles to `var(--color-primary)`, a variable computed once on :root — the
|
||||
* page-wide theme still switches, but a `data-theme="dark"` section inside a light page keeps
|
||||
* the light colours. Only blocks whose values are variables may be inline; a literal value in
|
||||
* an inline block would be copied into every utility and lose its variable.
|
||||
*/
|
||||
|
||||
@theme {
|
||||
--color-*: initial;
|
||||
--color-white: #ffffff;
|
||||
--color-black: #000000;
|
||||
|
||||
--font-sans: var(--md-ref-typeface-brand);
|
||||
}
|
||||
|
||||
/* The colour roles, as generated by `php artisan material:scheme`. */
|
||||
@theme inline {
|
||||
--color-background: var(--md-sys-color-background);
|
||||
--color-on-background: var(--md-sys-color-on-background);
|
||||
--color-surface: var(--md-sys-color-surface);
|
||||
--color-surface-dim: var(--md-sys-color-surface-dim);
|
||||
--color-surface-bright: var(--md-sys-color-surface-bright);
|
||||
--color-surface-container-lowest: var(--md-sys-color-surface-container-lowest);
|
||||
--color-surface-container-low: var(--md-sys-color-surface-container-low);
|
||||
--color-surface-container: var(--md-sys-color-surface-container);
|
||||
--color-surface-container-high: var(--md-sys-color-surface-container-high);
|
||||
--color-surface-container-highest: var(--md-sys-color-surface-container-highest);
|
||||
--color-on-surface: var(--md-sys-color-on-surface);
|
||||
--color-on-surface-variant: var(--md-sys-color-on-surface-variant);
|
||||
--color-outline: var(--md-sys-color-outline);
|
||||
--color-outline-variant: var(--md-sys-color-outline-variant);
|
||||
--color-inverse-surface: var(--md-sys-color-inverse-surface);
|
||||
--color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
|
||||
--color-primary: var(--md-sys-color-primary);
|
||||
--color-primary-dim: var(--md-sys-color-primary-dim);
|
||||
--color-on-primary: var(--md-sys-color-on-primary);
|
||||
--color-primary-container: var(--md-sys-color-primary-container);
|
||||
--color-on-primary-container: var(--md-sys-color-on-primary-container);
|
||||
--color-primary-fixed: var(--md-sys-color-primary-fixed);
|
||||
--color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim);
|
||||
--color-on-primary-fixed: var(--md-sys-color-on-primary-fixed);
|
||||
--color-on-primary-fixed-variant: var(--md-sys-color-on-primary-fixed-variant);
|
||||
--color-inverse-primary: var(--md-sys-color-inverse-primary);
|
||||
--color-secondary: var(--md-sys-color-secondary);
|
||||
--color-secondary-dim: var(--md-sys-color-secondary-dim);
|
||||
--color-on-secondary: var(--md-sys-color-on-secondary);
|
||||
--color-secondary-container: var(--md-sys-color-secondary-container);
|
||||
--color-on-secondary-container: var(--md-sys-color-on-secondary-container);
|
||||
--color-secondary-fixed: var(--md-sys-color-secondary-fixed);
|
||||
--color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim);
|
||||
--color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed);
|
||||
--color-on-secondary-fixed-variant: var(--md-sys-color-on-secondary-fixed-variant);
|
||||
--color-tertiary: var(--md-sys-color-tertiary);
|
||||
--color-tertiary-dim: var(--md-sys-color-tertiary-dim);
|
||||
--color-on-tertiary: var(--md-sys-color-on-tertiary);
|
||||
--color-tertiary-container: var(--md-sys-color-tertiary-container);
|
||||
--color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
|
||||
--color-tertiary-fixed: var(--md-sys-color-tertiary-fixed);
|
||||
--color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim);
|
||||
--color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed);
|
||||
--color-on-tertiary-fixed-variant: var(--md-sys-color-on-tertiary-fixed-variant);
|
||||
--color-error: var(--md-sys-color-error);
|
||||
--color-error-dim: var(--md-sys-color-error-dim);
|
||||
--color-on-error: var(--md-sys-color-on-error);
|
||||
--color-error-container: var(--md-sys-color-error-container);
|
||||
--color-on-error-container: var(--md-sys-color-on-error-container);
|
||||
--color-success: var(--md-sys-color-success);
|
||||
--color-on-success: var(--md-sys-color-on-success);
|
||||
--color-success-container: var(--md-sys-color-success-container);
|
||||
--color-on-success-container: var(--md-sys-color-on-success-container);
|
||||
--color-warning: var(--md-sys-color-warning);
|
||||
--color-on-warning: var(--md-sys-color-on-warning);
|
||||
--color-warning-container: var(--md-sys-color-warning-container);
|
||||
--color-on-warning-container: var(--md-sys-color-on-warning-container);
|
||||
--color-info: var(--md-sys-color-info);
|
||||
--color-on-info: var(--md-sys-color-on-info);
|
||||
--color-info-container: var(--md-sys-color-info-container);
|
||||
--color-on-info-container: var(--md-sys-color-on-info-container);
|
||||
--color-inverse-error: var(--md-sys-color-inverse-error);
|
||||
--color-inverse-success: var(--md-sys-color-inverse-success);
|
||||
--color-inverse-warning: var(--md-sys-color-inverse-warning);
|
||||
--color-inverse-info: var(--md-sys-color-inverse-info);
|
||||
--color-shadow: var(--md-sys-color-shadow);
|
||||
--color-scrim: var(--md-sys-color-scrim);
|
||||
}
|
||||
|
||||
/*
|
||||
* Ink and lines by what they are, rather than by an opacity number that means nothing out of
|
||||
* context: body copy, metadata, decoration; a structural line, a line around chrome, a divider.
|
||||
*/
|
||||
@theme inline {
|
||||
--color-body: var(--md-sys-color-on-surface-variant);
|
||||
--color-meta: color-mix(in oklab, var(--md-sys-color-on-surface) 60%, transparent);
|
||||
--color-quiet: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
--color-structure: var(--md-sys-color-outline-variant);
|
||||
--color-chrome: color-mix(in oklab, var(--md-sys-color-outline-variant) 60%, transparent);
|
||||
--color-divider: color-mix(in oklab, var(--md-sys-color-outline-variant) 40%, transparent);
|
||||
}
|
||||
|
||||
@theme {
|
||||
--radius-corner-none: var(--md-sys-shape-corner-none);
|
||||
--radius-corner-xs: var(--md-sys-shape-corner-xs);
|
||||
--radius-corner-sm: var(--md-sys-shape-corner-sm);
|
||||
--radius-corner-md: var(--md-sys-shape-corner-md);
|
||||
--radius-corner-lg: var(--md-sys-shape-corner-lg);
|
||||
--radius-corner-lg-increased: var(--md-sys-shape-corner-lg-increased);
|
||||
--radius-corner-xl: var(--md-sys-shape-corner-xl);
|
||||
--radius-corner-xl-increased: var(--md-sys-shape-corner-xl-increased);
|
||||
--radius-corner-xxl: var(--md-sys-shape-corner-xxl);
|
||||
--radius-corner-full: var(--md-sys-shape-corner-full);
|
||||
|
||||
--shadow-elevation-1: var(--md-sys-elevation-1);
|
||||
--shadow-elevation-2: var(--md-sys-elevation-2);
|
||||
--shadow-elevation-3: var(--md-sys-elevation-3);
|
||||
--shadow-elevation-4: var(--md-sys-elevation-4);
|
||||
--shadow-elevation-5: var(--md-sys-elevation-5);
|
||||
|
||||
--ease-spatial-fast: var(--md-sys-motion-spatial-fast);
|
||||
--ease-spatial-default: var(--md-sys-motion-spatial-default);
|
||||
--ease-spatial-slow: var(--md-sys-motion-spatial-slow);
|
||||
--ease-effects-fast: var(--md-sys-motion-effects-fast);
|
||||
--ease-effects-default: var(--md-sys-motion-effects-default);
|
||||
--ease-effects-slow: var(--md-sys-motion-effects-slow);
|
||||
--ease-standard: var(--md-sys-motion-easing-standard);
|
||||
--ease-emphasized: var(--md-sys-motion-easing-emphasized);
|
||||
--ease-emphasized-decelerate: var(--md-sys-motion-easing-emphasized-decelerate);
|
||||
--ease-emphasized-accelerate: var(--md-sys-motion-easing-emphasized-accelerate);
|
||||
}
|
||||
|
||||
/*
|
||||
* `dark:` follows the page's theme, not the operating system: <x-theme-script> has already
|
||||
* resolved `system` into data-theme, and the OS was never meant to be a second voice.
|
||||
*/
|
||||
@custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *));
|
||||
@@ -0,0 +1,231 @@
|
||||
/*
|
||||
* Type, as M3's typescale.
|
||||
*
|
||||
* Sizes, line heights and tracking are @material/web's token values (Apache-2.0, © Google
|
||||
* LLC). A style is used through its utility, never by hand-assembling `text-*`, `leading-*`
|
||||
* and `tracking-*`:
|
||||
*
|
||||
* <h2 class="type-title-lg">…</h2>
|
||||
* <p class="type-emphasized-headline-md tabular-nums">…</p>
|
||||
*
|
||||
* The brand typeface is Google Sans Flex (font.css). Emphasized styles are one weight step
|
||||
* heavier and fully rounded ("ROND" 100) — the axis that typeface exists for.
|
||||
*/
|
||||
:root {
|
||||
--md-ref-typeface-brand: 'Google Sans Flex', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--md-ref-typeface-plain: var(--md-ref-typeface-brand);
|
||||
--md-ref-typeface-weight-regular: 400;
|
||||
--md-ref-typeface-weight-medium: 500;
|
||||
--md-ref-typeface-weight-bold: 700;
|
||||
|
||||
--md-sys-typescale-display-lg: var(--md-ref-typeface-weight-regular) 3.5625rem/4rem var(--md-ref-typeface-brand);
|
||||
--md-sys-typescale-display-lg-tracking: -0.015625rem;
|
||||
--md-sys-typescale-emphasized-display-lg: var(--md-ref-typeface-weight-medium) 3.5625rem/4rem var(--md-ref-typeface-brand);
|
||||
--md-sys-typescale-display-md: var(--md-ref-typeface-weight-regular) 2.8125rem/3.25rem var(--md-ref-typeface-brand);
|
||||
--md-sys-typescale-display-md-tracking: 0rem;
|
||||
--md-sys-typescale-emphasized-display-md: var(--md-ref-typeface-weight-medium) 2.8125rem/3.25rem var(--md-ref-typeface-brand);
|
||||
--md-sys-typescale-display-sm: var(--md-ref-typeface-weight-regular) 2.25rem/2.75rem var(--md-ref-typeface-brand);
|
||||
--md-sys-typescale-display-sm-tracking: 0rem;
|
||||
--md-sys-typescale-emphasized-display-sm: var(--md-ref-typeface-weight-medium) 2.25rem/2.75rem var(--md-ref-typeface-brand);
|
||||
--md-sys-typescale-headline-lg: var(--md-ref-typeface-weight-regular) 2rem/2.5rem var(--md-ref-typeface-brand);
|
||||
--md-sys-typescale-headline-lg-tracking: 0rem;
|
||||
--md-sys-typescale-emphasized-headline-lg: var(--md-ref-typeface-weight-medium) 2rem/2.5rem var(--md-ref-typeface-brand);
|
||||
--md-sys-typescale-headline-md: var(--md-ref-typeface-weight-regular) 1.75rem/2.25rem var(--md-ref-typeface-brand);
|
||||
--md-sys-typescale-headline-md-tracking: 0rem;
|
||||
--md-sys-typescale-emphasized-headline-md: var(--md-ref-typeface-weight-medium) 1.75rem/2.25rem var(--md-ref-typeface-brand);
|
||||
--md-sys-typescale-headline-sm: var(--md-ref-typeface-weight-regular) 1.5rem/2rem var(--md-ref-typeface-brand);
|
||||
--md-sys-typescale-headline-sm-tracking: 0rem;
|
||||
--md-sys-typescale-emphasized-headline-sm: var(--md-ref-typeface-weight-medium) 1.5rem/2rem var(--md-ref-typeface-brand);
|
||||
--md-sys-typescale-title-lg: var(--md-ref-typeface-weight-regular) 1.375rem/1.75rem var(--md-ref-typeface-brand);
|
||||
--md-sys-typescale-title-lg-tracking: 0rem;
|
||||
--md-sys-typescale-emphasized-title-lg: var(--md-ref-typeface-weight-medium) 1.375rem/1.75rem var(--md-ref-typeface-brand);
|
||||
--md-sys-typescale-title-md: var(--md-ref-typeface-weight-medium) 1rem/1.5rem var(--md-ref-typeface-plain);
|
||||
--md-sys-typescale-title-md-tracking: 0.009375rem;
|
||||
--md-sys-typescale-emphasized-title-md: var(--md-ref-typeface-weight-bold) 1rem/1.5rem var(--md-ref-typeface-plain);
|
||||
--md-sys-typescale-title-sm: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain);
|
||||
--md-sys-typescale-title-sm-tracking: 0.00625rem;
|
||||
--md-sys-typescale-emphasized-title-sm: var(--md-ref-typeface-weight-bold) 0.875rem/1.25rem var(--md-ref-typeface-plain);
|
||||
--md-sys-typescale-body-lg: var(--md-ref-typeface-weight-regular) 1rem/1.5rem var(--md-ref-typeface-plain);
|
||||
--md-sys-typescale-body-lg-tracking: 0.03125rem;
|
||||
--md-sys-typescale-emphasized-body-lg: var(--md-ref-typeface-weight-medium) 1rem/1.5rem var(--md-ref-typeface-plain);
|
||||
--md-sys-typescale-body-md: var(--md-ref-typeface-weight-regular) 0.875rem/1.25rem var(--md-ref-typeface-plain);
|
||||
--md-sys-typescale-body-md-tracking: 0.015625rem;
|
||||
--md-sys-typescale-emphasized-body-md: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain);
|
||||
--md-sys-typescale-body-sm: var(--md-ref-typeface-weight-regular) 0.75rem/1rem var(--md-ref-typeface-plain);
|
||||
--md-sys-typescale-body-sm-tracking: 0.025rem;
|
||||
--md-sys-typescale-emphasized-body-sm: var(--md-ref-typeface-weight-medium) 0.75rem/1rem var(--md-ref-typeface-plain);
|
||||
--md-sys-typescale-label-lg: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain);
|
||||
--md-sys-typescale-label-lg-tracking: 0.00625rem;
|
||||
--md-sys-typescale-emphasized-label-lg: var(--md-ref-typeface-weight-bold) 0.875rem/1.25rem var(--md-ref-typeface-plain);
|
||||
--md-sys-typescale-label-md: var(--md-ref-typeface-weight-medium) 0.75rem/1rem var(--md-ref-typeface-plain);
|
||||
--md-sys-typescale-label-md-tracking: 0.03125rem;
|
||||
--md-sys-typescale-emphasized-label-md: var(--md-ref-typeface-weight-bold) 0.75rem/1rem var(--md-ref-typeface-plain);
|
||||
--md-sys-typescale-label-sm: var(--md-ref-typeface-weight-medium) 0.6875rem/1rem var(--md-ref-typeface-plain);
|
||||
--md-sys-typescale-label-sm-tracking: 0.03125rem;
|
||||
--md-sys-typescale-emphasized-label-sm: var(--md-ref-typeface-weight-bold) 0.6875rem/1rem var(--md-ref-typeface-plain);
|
||||
}
|
||||
|
||||
@utility type-display-lg {
|
||||
font: var(--md-sys-typescale-display-lg);
|
||||
letter-spacing: var(--md-sys-typescale-display-lg-tracking);
|
||||
}
|
||||
|
||||
@utility type-emphasized-display-lg {
|
||||
font: var(--md-sys-typescale-emphasized-display-lg);
|
||||
letter-spacing: var(--md-sys-typescale-display-lg-tracking);
|
||||
font-variation-settings: "ROND" 100;
|
||||
}
|
||||
|
||||
@utility type-display-md {
|
||||
font: var(--md-sys-typescale-display-md);
|
||||
letter-spacing: var(--md-sys-typescale-display-md-tracking);
|
||||
}
|
||||
|
||||
@utility type-emphasized-display-md {
|
||||
font: var(--md-sys-typescale-emphasized-display-md);
|
||||
letter-spacing: var(--md-sys-typescale-display-md-tracking);
|
||||
font-variation-settings: "ROND" 100;
|
||||
}
|
||||
|
||||
@utility type-display-sm {
|
||||
font: var(--md-sys-typescale-display-sm);
|
||||
letter-spacing: var(--md-sys-typescale-display-sm-tracking);
|
||||
}
|
||||
|
||||
@utility type-emphasized-display-sm {
|
||||
font: var(--md-sys-typescale-emphasized-display-sm);
|
||||
letter-spacing: var(--md-sys-typescale-display-sm-tracking);
|
||||
font-variation-settings: "ROND" 100;
|
||||
}
|
||||
|
||||
@utility type-headline-lg {
|
||||
font: var(--md-sys-typescale-headline-lg);
|
||||
letter-spacing: var(--md-sys-typescale-headline-lg-tracking);
|
||||
}
|
||||
|
||||
@utility type-emphasized-headline-lg {
|
||||
font: var(--md-sys-typescale-emphasized-headline-lg);
|
||||
letter-spacing: var(--md-sys-typescale-headline-lg-tracking);
|
||||
font-variation-settings: "ROND" 100;
|
||||
}
|
||||
|
||||
@utility type-headline-md {
|
||||
font: var(--md-sys-typescale-headline-md);
|
||||
letter-spacing: var(--md-sys-typescale-headline-md-tracking);
|
||||
}
|
||||
|
||||
@utility type-emphasized-headline-md {
|
||||
font: var(--md-sys-typescale-emphasized-headline-md);
|
||||
letter-spacing: var(--md-sys-typescale-headline-md-tracking);
|
||||
font-variation-settings: "ROND" 100;
|
||||
}
|
||||
|
||||
@utility type-headline-sm {
|
||||
font: var(--md-sys-typescale-headline-sm);
|
||||
letter-spacing: var(--md-sys-typescale-headline-sm-tracking);
|
||||
}
|
||||
|
||||
@utility type-emphasized-headline-sm {
|
||||
font: var(--md-sys-typescale-emphasized-headline-sm);
|
||||
letter-spacing: var(--md-sys-typescale-headline-sm-tracking);
|
||||
font-variation-settings: "ROND" 100;
|
||||
}
|
||||
|
||||
@utility type-title-lg {
|
||||
font: var(--md-sys-typescale-title-lg);
|
||||
letter-spacing: var(--md-sys-typescale-title-lg-tracking);
|
||||
}
|
||||
|
||||
@utility type-emphasized-title-lg {
|
||||
font: var(--md-sys-typescale-emphasized-title-lg);
|
||||
letter-spacing: var(--md-sys-typescale-title-lg-tracking);
|
||||
font-variation-settings: "ROND" 100;
|
||||
}
|
||||
|
||||
@utility type-title-md {
|
||||
font: var(--md-sys-typescale-title-md);
|
||||
letter-spacing: var(--md-sys-typescale-title-md-tracking);
|
||||
}
|
||||
|
||||
@utility type-emphasized-title-md {
|
||||
font: var(--md-sys-typescale-emphasized-title-md);
|
||||
letter-spacing: var(--md-sys-typescale-title-md-tracking);
|
||||
font-variation-settings: "ROND" 100;
|
||||
}
|
||||
|
||||
@utility type-title-sm {
|
||||
font: var(--md-sys-typescale-title-sm);
|
||||
letter-spacing: var(--md-sys-typescale-title-sm-tracking);
|
||||
}
|
||||
|
||||
@utility type-emphasized-title-sm {
|
||||
font: var(--md-sys-typescale-emphasized-title-sm);
|
||||
letter-spacing: var(--md-sys-typescale-title-sm-tracking);
|
||||
font-variation-settings: "ROND" 100;
|
||||
}
|
||||
|
||||
@utility type-body-lg {
|
||||
font: var(--md-sys-typescale-body-lg);
|
||||
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
|
||||
}
|
||||
|
||||
@utility type-emphasized-body-lg {
|
||||
font: var(--md-sys-typescale-emphasized-body-lg);
|
||||
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
|
||||
font-variation-settings: "ROND" 100;
|
||||
}
|
||||
|
||||
@utility type-body-md {
|
||||
font: var(--md-sys-typescale-body-md);
|
||||
letter-spacing: var(--md-sys-typescale-body-md-tracking);
|
||||
}
|
||||
|
||||
@utility type-emphasized-body-md {
|
||||
font: var(--md-sys-typescale-emphasized-body-md);
|
||||
letter-spacing: var(--md-sys-typescale-body-md-tracking);
|
||||
font-variation-settings: "ROND" 100;
|
||||
}
|
||||
|
||||
@utility type-body-sm {
|
||||
font: var(--md-sys-typescale-body-sm);
|
||||
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
|
||||
}
|
||||
|
||||
@utility type-emphasized-body-sm {
|
||||
font: var(--md-sys-typescale-emphasized-body-sm);
|
||||
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
|
||||
font-variation-settings: "ROND" 100;
|
||||
}
|
||||
|
||||
@utility type-label-lg {
|
||||
font: var(--md-sys-typescale-label-lg);
|
||||
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
||||
}
|
||||
|
||||
@utility type-emphasized-label-lg {
|
||||
font: var(--md-sys-typescale-emphasized-label-lg);
|
||||
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
||||
font-variation-settings: "ROND" 100;
|
||||
}
|
||||
|
||||
@utility type-label-md {
|
||||
font: var(--md-sys-typescale-label-md);
|
||||
letter-spacing: var(--md-sys-typescale-label-md-tracking);
|
||||
}
|
||||
|
||||
@utility type-emphasized-label-md {
|
||||
font: var(--md-sys-typescale-emphasized-label-md);
|
||||
letter-spacing: var(--md-sys-typescale-label-md-tracking);
|
||||
font-variation-settings: "ROND" 100;
|
||||
}
|
||||
|
||||
@utility type-label-sm {
|
||||
font: var(--md-sys-typescale-label-sm);
|
||||
letter-spacing: var(--md-sys-typescale-label-sm-tracking);
|
||||
}
|
||||
|
||||
@utility type-emphasized-label-sm {
|
||||
font: var(--md-sys-typescale-emphasized-label-sm);
|
||||
letter-spacing: var(--md-sys-typescale-label-sm-tracking);
|
||||
font-variation-settings: "ROND" 100;
|
||||
}
|
||||
Reference in New Issue
Block a user