diff --git a/resources/css/foundation/hidden.css b/resources/css/foundation/hidden.css
new file mode 100644
index 00000000..addb0aaa
--- /dev/null
+++ b/resources/css/foundation/hidden.css
@@ -0,0 +1,23 @@
+/*
+ * The two rules that hide, outside every layer.
+ *
+ * A layered rule always loses to an unlayered one, and no rule without `!important` beats one with
+ * it, so these two sit outside the layers and carry `!important`: whatever `display` a component
+ * gives its root, `hidden` on it hides it, and an application can pass `hidden` to any component.
+ * `hidden="until-found"` is left to the browser, which keeps such content searchable.
+ * `[x-cloak]` hides what Alpine has not started yet; Alpine removes the attribute when it has.
+ *
+ * Only a layered `!important` could outrank these, and the package writes none. The file is
+ * apart from reset.css because material.css, which stays for applications importing it after
+ * Tailwind, needs `[x-cloak]` without the reset.
+ */
+
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+[hidden]:where(:not([hidden='until-found'])) {
+ display: none !important;
+}
+
+[x-cloak] {
+ display: none !important;
+}
diff --git a/resources/css/material.css b/resources/css/material.css
index e5fbcdd9..3524a01f 100644
--- a/resources/css/material.css
+++ b/resources/css/material.css
@@ -9,7 +9,8 @@
* @source '../../vendor/nonameweb/livewire-material/src';
*
* tokens/scheme.css is the package's own default (M3's baseline purple), so an application
- * renders before it has a scheme; the application's file declares the same roles later and wins.
+ * renders before it has a scheme; the application's file declares the same roles, unlayered, and
+ * wins over the default in `material.tokens`.
*/
@import './tokens/scheme.css';
@@ -20,6 +21,8 @@
@import './tokens/font.css';
@import './tokens/theme.css';
@import './tokens/state.css';
+@import './tokens/utilities.css';
+@import './foundation/hidden.css';
@import './components/actions.css';
@import './components/groups.css';
@import './components/list.css';
diff --git a/resources/css/tokens/elevation.css b/resources/css/tokens/elevation.css
index 849783be..65abc857 100644
--- a/resources/css/tokens/elevation.css
+++ b/resources/css/tokens/elevation.css
@@ -9,13 +9,18 @@
* 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);
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+@layer material.tokens {
+ :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);
+ }
}
diff --git a/resources/css/tokens/font.css b/resources/css/tokens/font.css
index ca18d2df..2a5fe5c4 100644
--- a/resources/css/tokens/font.css
+++ b/resources/css/tokens/font.css
@@ -6,13 +6,19 @@
* 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.
+ * The face sits in `material.base` (foundation/base.css imports it). An application that wants
+ * another typeface overrides `--md-ref-typeface-brand` in its own stylesheet, which outranks
+ * every package layer.
*/
-@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;
+
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+@layer material.base {
+ @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;
+ }
}
diff --git a/resources/css/tokens/motion.css b/resources/css/tokens/motion.css
index bc98b741..25d9306f 100644
--- a/resources/css/tokens/motion.css
+++ b/resources/css/tokens/motion.css
@@ -40,73 +40,78 @@
* 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.095 at 139ms; sampled over 350ms */
- --md-sys-motion-spatial-fast: linear(0, 0.0195, 0.0716, 0.1471, 0.2381, 0.3378, 0.4404, 0.5416, 0.6378, 0.7265, 0.806, 0.8754, 0.9342, 0.9826, 1.0211, 1.0503, 1.0713, 1.0849, 1.0924, 1.0948, 1.0931, 1.0882, 1.0812, 1.0726, 1.0632, 1.0534, 1.0438, 1.0347, 1.0263, 1.0187, 1.0121, 1.0064, 1.0018, 0.9981, 0.9953, 0.9933, 0.992, 0.9913, 0.991, 0.9912, 0.9916, 0.9923, 0.9931, 0.994, 0.9949, 0.9958, 0.9967, 0.9975, 1);
- --md-sys-motion-spatial-fast-duration: 350ms;
- /* damping 0.8, stiffness 380; settles in 440ms; peaks at 1.015 at 269ms; sampled over 500ms */
- --md-sys-motion-spatial-default: linear(0, 0.0185, 0.0663, 0.1336, 0.2126, 0.2973, 0.3832, 0.4669, 0.5461, 0.6192, 0.6854, 0.7443, 0.7958, 0.8402, 0.8779, 0.9094, 0.9354, 0.9564, 0.9731, 0.9861, 0.996, 1.0033, 1.0085, 1.0119, 1.014, 1.015, 1.0152, 1.0148, 1.014, 1.0129, 1.0117, 1.0104, 1.0091, 1.0078, 1.0066, 1.0055, 1.0046, 1.0037, 1.0029, 1.0023, 1.0017, 1.0013, 1.0009, 1.0006, 1.0004, 1.0002, 1, 0.9999, 1);
- --md-sys-motion-spatial-default-duration: 500ms;
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
- /* damping 0.8, stiffness 200; settles in 600ms; peaks at 1.015 at 370ms; sampled over 650ms */
- --md-sys-motion-spatial-slow: linear(0, 0.0166, 0.0597, 0.1211, 0.1939, 0.273, 0.354, 0.434, 0.5107, 0.5826, 0.6487, 0.7084, 0.7615, 0.8081, 0.8484, 0.8829, 0.912, 0.9361, 0.9559, 0.9719, 0.9845, 0.9943, 1.0017, 1.0071, 1.0108, 1.0132, 1.0146, 1.0151, 1.0151, 1.0145, 1.0137, 1.0126, 1.0114, 1.0102, 1.009, 1.0078, 1.0067, 1.0057, 1.0047, 1.0039, 1.0031, 1.0025, 1.0019, 1.0015, 1.0011, 1.0008, 1.0005, 1.0003, 1);
- --md-sys-motion-spatial-slow-duration: 650ms;
+@layer material.tokens {
+ :root {
+ /* damping 0.6, stiffness 800; settles in 360ms; peaks at 1.095 at 139ms; sampled over 350ms */
+ --md-sys-motion-spatial-fast: linear(0, 0.0195, 0.0716, 0.1471, 0.2381, 0.3378, 0.4404, 0.5416, 0.6378, 0.7265, 0.806, 0.8754, 0.9342, 0.9826, 1.0211, 1.0503, 1.0713, 1.0849, 1.0924, 1.0948, 1.0931, 1.0882, 1.0812, 1.0726, 1.0632, 1.0534, 1.0438, 1.0347, 1.0263, 1.0187, 1.0121, 1.0064, 1.0018, 0.9981, 0.9953, 0.9933, 0.992, 0.9913, 0.991, 0.9912, 0.9916, 0.9923, 0.9931, 0.994, 0.9949, 0.9958, 0.9967, 0.9975, 1);
+ --md-sys-motion-spatial-fast-duration: 350ms;
- /* damping 1.0, stiffness 3800; settles in 150ms; sampled over 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 0.8, stiffness 380; settles in 440ms; peaks at 1.015 at 269ms; sampled over 500ms */
+ --md-sys-motion-spatial-default: linear(0, 0.0185, 0.0663, 0.1336, 0.2126, 0.2973, 0.3832, 0.4669, 0.5461, 0.6192, 0.6854, 0.7443, 0.7958, 0.8402, 0.8779, 0.9094, 0.9354, 0.9564, 0.9731, 0.9861, 0.996, 1.0033, 1.0085, 1.0119, 1.014, 1.015, 1.0152, 1.0148, 1.014, 1.0129, 1.0117, 1.0104, 1.0091, 1.0078, 1.0066, 1.0055, 1.0046, 1.0037, 1.0029, 1.0023, 1.0017, 1.0013, 1.0009, 1.0006, 1.0004, 1.0002, 1, 0.9999, 1);
+ --md-sys-motion-spatial-default-duration: 500ms;
- /* damping 1.0, stiffness 1600; settles in 240ms; sampled over 200ms */
- --md-sys-motion-effects-default: linear(0, 0.0124, 0.0446, 0.0902, 0.1443, 0.2032, 0.2642, 0.3253, 0.3849, 0.4422, 0.4963, 0.547, 0.594, 0.6372, 0.6768, 0.7127, 0.7452, 0.7745, 0.8009, 0.8244, 0.8454, 0.8641, 0.8807, 0.8954, 0.9084, 0.9199, 0.93, 0.9389, 0.9467, 0.9536, 0.9596, 0.9648, 0.9694, 0.9734, 0.9769, 0.98, 0.9826, 0.985, 0.987, 0.9887, 0.9902, 0.9916, 0.9927, 0.9937, 0.9946, 0.9953, 0.9959, 0.9965, 1);
- --md-sys-motion-effects-default-duration: 200ms;
+ /* damping 0.8, stiffness 200; settles in 600ms; peaks at 1.015 at 370ms; sampled over 650ms */
+ --md-sys-motion-spatial-slow: linear(0, 0.0166, 0.0597, 0.1211, 0.1939, 0.273, 0.354, 0.434, 0.5107, 0.5826, 0.6487, 0.7084, 0.7615, 0.8081, 0.8484, 0.8829, 0.912, 0.9361, 0.9559, 0.9719, 0.9845, 0.9943, 1.0017, 1.0071, 1.0108, 1.0132, 1.0146, 1.0151, 1.0151, 1.0145, 1.0137, 1.0126, 1.0114, 1.0102, 1.009, 1.0078, 1.0067, 1.0057, 1.0047, 1.0039, 1.0031, 1.0025, 1.0019, 1.0015, 1.0011, 1.0008, 1.0005, 1.0003, 1);
+ --md-sys-motion-spatial-slow-duration: 650ms;
- /* damping 1.0, stiffness 800; settles in 330ms; sampled over 300ms */
- --md-sys-motion-effects-slow: linear(0, 0.0139, 0.0496, 0.0995, 0.1583, 0.2216, 0.2865, 0.3509, 0.4131, 0.4722, 0.5275, 0.5788, 0.6258, 0.6687, 0.7075, 0.7424, 0.7737, 0.8016, 0.8264, 0.8484, 0.8678, 0.8849, 0.8999, 0.9131, 0.9247, 0.9347, 0.9435, 0.9512, 0.9578, 0.9636, 0.9686, 0.973, 0.9767, 0.98, 0.9828, 0.9852, 0.9873, 0.9891, 0.9907, 0.992, 0.9931, 0.9941, 0.995, 0.9957, 0.9963, 0.9969, 0.9973, 0.9977, 1);
- --md-sys-motion-effects-slow-duration: 300ms;
+ /* damping 1.0, stiffness 3800; settles in 150ms; sampled over 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;
- --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;
-}
+ /* damping 1.0, stiffness 1600; settles in 240ms; sampled over 200ms */
+ --md-sys-motion-effects-default: linear(0, 0.0124, 0.0446, 0.0902, 0.1443, 0.2032, 0.2642, 0.3253, 0.3849, 0.4422, 0.4963, 0.547, 0.594, 0.6372, 0.6768, 0.7127, 0.7452, 0.7745, 0.8009, 0.8244, 0.8454, 0.8641, 0.8807, 0.8954, 0.9084, 0.9199, 0.93, 0.9389, 0.9467, 0.9536, 0.9596, 0.9648, 0.9694, 0.9734, 0.9769, 0.98, 0.9826, 0.985, 0.987, 0.9887, 0.9902, 0.9916, 0.9927, 0.9937, 0.9946, 0.9953, 0.9959, 0.9965, 1);
+ --md-sys-motion-effects-default-duration: 200ms;
-/*
- * The Standard scheme: the same three spatial springs at a damping ratio of 0.9, which leaves
- * a 0.2% overshoot instead of Expressive's 9% — motion that eases into place rather than
- * bouncing. Google's web durations for them are 350/500/750 ms; the effects springs, the
- * legacy easings and every other token are the ones above.
- */
-[data-motion="standard"] {
- /* damping 0.9, stiffness 1400; settles in 230ms; peaks at 1.002 at 193ms; sampled over 350ms */
- --md-sys-motion-spatial-fast: linear(0, 0.0316, 0.1076, 0.2062, 0.313, 0.4185, 0.517, 0.6056, 0.6828, 0.7486, 0.8036, 0.8487, 0.8852, 0.9142, 0.937, 0.9546, 0.968, 0.9781, 0.9856, 0.991, 0.9948, 0.9975, 0.9992, 1.0004, 1.001, 1.0014, 1.0015, 1.0015, 1.0014, 1.0013, 1.0011, 1.001, 1.0008, 1.0007, 1.0005, 1.0004, 1.0003, 1.0003, 1.0002, 1.0001, 1.0001, 1.0001, 1.0001, 1, 1, 1, 1, 1, 1);
- --md-sys-motion-spatial-fast-duration: 350ms;
+ /* damping 1.0, stiffness 800; settles in 330ms; sampled over 300ms */
+ --md-sys-motion-effects-slow: linear(0, 0.0139, 0.0496, 0.0995, 0.1583, 0.2216, 0.2865, 0.3509, 0.4131, 0.4722, 0.5275, 0.5788, 0.6258, 0.6687, 0.7075, 0.7424, 0.7737, 0.8016, 0.8264, 0.8484, 0.8678, 0.8849, 0.8999, 0.9131, 0.9247, 0.9347, 0.9435, 0.9512, 0.9578, 0.9636, 0.9686, 0.973, 0.9767, 0.98, 0.9828, 0.9852, 0.9873, 0.9891, 0.9907, 0.992, 0.9931, 0.9941, 0.995, 0.9957, 0.9963, 0.9969, 0.9973, 0.9977, 1);
+ --md-sys-motion-effects-slow-duration: 300ms;
- /* damping 0.9, stiffness 700; settles in 320ms; peaks at 1.002 at 272ms; sampled over 500ms */
- --md-sys-motion-spatial-default: linear(0, 0.0322, 0.1094, 0.2094, 0.3173, 0.4237, 0.5227, 0.6114, 0.6886, 0.7541, 0.8086, 0.8532, 0.8891, 0.9175, 0.9397, 0.9569, 0.9699, 0.9796, 0.9867, 0.9918, 0.9954, 0.9979, 0.9995, 1.0006, 1.0011, 1.0014, 1.0015, 1.0015, 1.0014, 1.0012, 1.0011, 1.0009, 1.0007, 1.0006, 1.0005, 1.0004, 1.0003, 1.0002, 1.0002, 1.0001, 1.0001, 1.0001, 1, 1, 1, 1, 1, 1, 1);
- --md-sys-motion-spatial-default-duration: 500ms;
+ --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;
+ }
- /* damping 0.9, stiffness 300; settles in 490ms; peaks at 1.002 at 416ms; sampled over 750ms */
- --md-sys-motion-spatial-slow: linear(0, 0.0311, 0.1061, 0.2037, 0.3095, 0.4143, 0.5125, 0.6009, 0.6782, 0.7442, 0.7995, 0.8451, 0.882, 0.9115, 0.9347, 0.9527, 0.9665, 0.9769, 0.9846, 0.9903, 0.9943, 0.9971, 0.999, 1.0002, 1.0009, 1.0013, 1.0015, 1.0015, 1.0014, 1.0013, 1.0012, 1.001, 1.0008, 1.0007, 1.0006, 1.0005, 1.0004, 1.0003, 1.0002, 1.0002, 1.0001, 1.0001, 1.0001, 1, 1, 1, 1, 1, 1);
- --md-sys-motion-spatial-slow-duration: 750ms;
-}
-
-@media (prefers-reduced-motion: reduce) {
- :root,
+ /*
+ * The Standard scheme: the same three spatial springs at a damping ratio of 0.9, which leaves
+ * a 0.2% overshoot instead of Expressive's 9% — motion that eases into place rather than
+ * bouncing. Google's web durations for them are 350/500/750 ms; the effects springs, the
+ * legacy easings and every other token are the ones above.
+ */
[data-motion="standard"] {
- --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;
+ /* damping 0.9, stiffness 1400; settles in 230ms; peaks at 1.002 at 193ms; sampled over 350ms */
+ --md-sys-motion-spatial-fast: linear(0, 0.0316, 0.1076, 0.2062, 0.313, 0.4185, 0.517, 0.6056, 0.6828, 0.7486, 0.8036, 0.8487, 0.8852, 0.9142, 0.937, 0.9546, 0.968, 0.9781, 0.9856, 0.991, 0.9948, 0.9975, 0.9992, 1.0004, 1.001, 1.0014, 1.0015, 1.0015, 1.0014, 1.0013, 1.0011, 1.001, 1.0008, 1.0007, 1.0005, 1.0004, 1.0003, 1.0003, 1.0002, 1.0001, 1.0001, 1.0001, 1.0001, 1, 1, 1, 1, 1, 1);
+ --md-sys-motion-spatial-fast-duration: 350ms;
+
+ /* damping 0.9, stiffness 700; settles in 320ms; peaks at 1.002 at 272ms; sampled over 500ms */
+ --md-sys-motion-spatial-default: linear(0, 0.0322, 0.1094, 0.2094, 0.3173, 0.4237, 0.5227, 0.6114, 0.6886, 0.7541, 0.8086, 0.8532, 0.8891, 0.9175, 0.9397, 0.9569, 0.9699, 0.9796, 0.9867, 0.9918, 0.9954, 0.9979, 0.9995, 1.0006, 1.0011, 1.0014, 1.0015, 1.0015, 1.0014, 1.0012, 1.0011, 1.0009, 1.0007, 1.0006, 1.0005, 1.0004, 1.0003, 1.0002, 1.0002, 1.0001, 1.0001, 1.0001, 1, 1, 1, 1, 1, 1, 1);
+ --md-sys-motion-spatial-default-duration: 500ms;
+
+ /* damping 0.9, stiffness 300; settles in 490ms; peaks at 1.002 at 416ms; sampled over 750ms */
+ --md-sys-motion-spatial-slow: linear(0, 0.0311, 0.1061, 0.2037, 0.3095, 0.4143, 0.5125, 0.6009, 0.6782, 0.7442, 0.7995, 0.8451, 0.882, 0.9115, 0.9347, 0.9527, 0.9665, 0.9769, 0.9846, 0.9903, 0.9943, 0.9971, 0.999, 1.0002, 1.0009, 1.0013, 1.0015, 1.0015, 1.0014, 1.0013, 1.0012, 1.001, 1.0008, 1.0007, 1.0006, 1.0005, 1.0004, 1.0003, 1.0002, 1.0002, 1.0001, 1.0001, 1.0001, 1, 1, 1, 1, 1, 1);
+ --md-sys-motion-spatial-slow-duration: 750ms;
+ }
+
+ @media (prefers-reduced-motion: reduce) {
+ :root,
+ [data-motion="standard"] {
+ --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;
+ }
}
}
diff --git a/resources/css/tokens/scheme.css b/resources/css/tokens/scheme.css
index 1a4735b1..1afe20e2 100644
--- a/resources/css/tokens/scheme.css
+++ b/resources/css/tokens/scheme.css
@@ -11,431 +11,439 @@
* data-contrast — which the head script writes from the visitor's choice, or from the
* operating system's contrast setting while that choice is `system`. No media query
* decides here, as none decides the theme.
+ *
+ * This is the package's default scheme, so the generated blocks are wrapped in
+ * `material.tokens` behind the layer statement (keep both when regenerating into this file): an
+ * application's own scheme, written unlayered, outranks it whatever the selectors.
*/
-:root,
-[data-theme='light'] {
- color-scheme: light;
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
- --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: #006d46;
- --md-sys-color-on-success: #e7ffed;
- --md-sys-color-success-container: #86f9bc;
- --md-sys-color-on-success-container: #00734a;
- --md-sys-color-warning: #7c5900;
- --md-sys-color-on-warning: #fff8f1;
- --md-sys-color-warning-container: #fab925;
- --md-sys-color-on-warning-container: #6a4b00;
- --md-sys-color-info: #005bc5;
- --md-sys-color-on-info: #f9f8ff;
- --md-sys-color-info-container: #1c7afc;
- --md-sys-color-on-info-container: #001435;
- --md-sys-color-inverse-error: #f97386;
- --md-sys-color-inverse-success: #3bb27b;
- --md-sys-color-inverse-warning: #f3b31e;
- --md-sys-color-inverse-info: #699cff;
-}
+@layer material.tokens {
+ :root,
+ [data-theme='light'] {
+ color-scheme: light;
-[data-theme='dark'] {
- color-scheme: dark;
+ --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: #006d46;
+ --md-sys-color-on-success: #e7ffed;
+ --md-sys-color-success-container: #86f9bc;
+ --md-sys-color-on-success-container: #00734a;
+ --md-sys-color-warning: #7c5900;
+ --md-sys-color-on-warning: #fff8f1;
+ --md-sys-color-warning-container: #fab925;
+ --md-sys-color-on-warning-container: #6a4b00;
+ --md-sys-color-info: #005bc5;
+ --md-sys-color-on-info: #f9f8ff;
+ --md-sys-color-info-container: #1c7afc;
+ --md-sys-color-on-info-container: #001435;
+ --md-sys-color-inverse-error: #f97386;
+ --md-sys-color-inverse-success: #3bb27b;
+ --md-sys-color-inverse-warning: #f3b31e;
+ --md-sys-color-inverse-info: #699cff;
+ }
- --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: #3bb27b;
- --md-sys-color-on-success: #002615;
- --md-sys-color-success-container: #059460;
- --md-sys-color-on-success-container: #001e10;
- --md-sys-color-warning: #f3b31e;
- --md-sys-color-on-warning: #4e3600;
- --md-sys-color-warning-container: #e4a604;
- --md-sys-color-on-warning-container: #593f00;
- --md-sys-color-info: #699cff;
- --md-sys-color-on-info: #001e4b;
- --md-sys-color-info-container: #0c74f6;
- --md-sys-color-on-info-container: #000a23;
- --md-sys-color-inverse-error: #a8364b;
- --md-sys-color-inverse-success: #006d46;
- --md-sys-color-inverse-warning: #7c5900;
- --md-sys-color-inverse-info: #005bc5;
-}
+ [data-theme='dark'] {
+ color-scheme: dark;
-[data-contrast='medium'],
-[data-contrast='medium'][data-theme='light'],
-[data-contrast='medium'] [data-theme='light'] {
- color-scheme: light;
+ --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: #3bb27b;
+ --md-sys-color-on-success: #002615;
+ --md-sys-color-success-container: #059460;
+ --md-sys-color-on-success-container: #001e10;
+ --md-sys-color-warning: #f3b31e;
+ --md-sys-color-on-warning: #4e3600;
+ --md-sys-color-warning-container: #e4a604;
+ --md-sys-color-on-warning-container: #593f00;
+ --md-sys-color-info: #699cff;
+ --md-sys-color-on-info: #001e4b;
+ --md-sys-color-info-container: #0c74f6;
+ --md-sys-color-on-info-container: #000a23;
+ --md-sys-color-inverse-error: #a8364b;
+ --md-sys-color-inverse-success: #006d46;
+ --md-sys-color-inverse-warning: #7c5900;
+ --md-sys-color-inverse-info: #005bc5;
+ }
- --md-sys-color-background: #fdf7fe;
- --md-sys-color-on-background: #25232b;
- --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: #25232b;
- --md-sys-color-on-surface-variant: #45414b;
- --md-sys-color-outline: #615d68;
- --md-sys-color-outline-variant: #7d7983;
- --md-sys-color-inverse-surface: #0f0d12;
- --md-sys-color-inverse-on-surface: #c8c3c9;
- --md-sys-color-primary: #483b6b;
- --md-sys-color-primary-dim: #3c305f;
- --md-sys-color-on-primary: #e1d3ff;
- --md-sys-color-primary-container: #7b6da0;
- --md-sys-color-on-primary-container: #ffffff;
- --md-sys-color-primary-fixed: #7b6da0;
- --md-sys-color-primary-fixed-dim: #6e6093;
- --md-sys-color-on-primary-fixed: #ffffff;
- --md-sys-color-on-primary-fixed-variant: #ffffff;
- --md-sys-color-inverse-primary: #d4c3fd;
- --md-sys-color-secondary: #464054;
- --md-sys-color-secondary-dim: #3a3548;
- --md-sys-color-on-secondary: #dfd5ef;
- --md-sys-color-secondary-container: #787187;
- --md-sys-color-on-secondary-container: #ffffff;
- --md-sys-color-secondary-fixed: #787187;
- --md-sys-color-secondary-fixed-dim: #6c657b;
- --md-sys-color-on-secondary-fixed: #ffffff;
- --md-sys-color-on-secondary-fixed-variant: #ffffff;
- --md-sys-color-tertiary: #5c3653;
- --md-sys-color-tertiary-dim: #502b47;
- --md-sys-color-on-tertiary: #ffcaee;
- --md-sys-color-tertiary-container: #936787;
- --md-sys-color-on-tertiary-container: #ffffff;
- --md-sys-color-tertiary-fixed: #936787;
- --md-sys-color-tertiary-fixed-dim: #855b7a;
- --md-sys-color-on-tertiary-fixed: #ffffff;
- --md-sys-color-on-tertiary-fixed-variant: #ffffff;
- --md-sys-color-error: #821830;
- --md-sys-color-error-dim: #6b0221;
- --md-sys-color-on-error: #ffcdd1;
- --md-sys-color-error-container: #c44b5f;
- --md-sys-color-on-error-container: #ffffff;
- --md-sys-color-success: #004d30;
- --md-sys-color-on-success: #7df0b3;
- --md-sys-color-success-container: #008656;
- --md-sys-color-on-success-container: #ffffff;
- --md-sys-color-warning: #593e00;
- --md-sys-color-on-warning: #ffd385;
- --md-sys-color-warning-container: #986d00;
- --md-sys-color-on-warning-container: #ffffff;
- --md-sys-color-info: #003f8e;
- --md-sys-color-on-info: #cbd9ff;
- --md-sys-color-info-container: #006fef;
- --md-sys-color-on-info-container: #ffffff;
- --md-sys-color-inverse-error: #ff9da8;
- --md-sys-color-inverse-success: #5ace94;
- --md-sys-color-inverse-warning: #f3b31e;
- --md-sys-color-inverse-info: #98b8ff;
-}
+ [data-contrast='medium'],
+ [data-contrast='medium'][data-theme='light'],
+ [data-contrast='medium'] [data-theme='light'] {
+ color-scheme: light;
-[data-contrast='medium'][data-theme='dark'],
-[data-contrast='medium'] [data-theme='dark'] {
- color-scheme: dark;
+ --md-sys-color-background: #fdf7fe;
+ --md-sys-color-on-background: #25232b;
+ --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: #25232b;
+ --md-sys-color-on-surface-variant: #45414b;
+ --md-sys-color-outline: #615d68;
+ --md-sys-color-outline-variant: #7d7983;
+ --md-sys-color-inverse-surface: #0f0d12;
+ --md-sys-color-inverse-on-surface: #c8c3c9;
+ --md-sys-color-primary: #483b6b;
+ --md-sys-color-primary-dim: #3c305f;
+ --md-sys-color-on-primary: #e1d3ff;
+ --md-sys-color-primary-container: #7b6da0;
+ --md-sys-color-on-primary-container: #ffffff;
+ --md-sys-color-primary-fixed: #7b6da0;
+ --md-sys-color-primary-fixed-dim: #6e6093;
+ --md-sys-color-on-primary-fixed: #ffffff;
+ --md-sys-color-on-primary-fixed-variant: #ffffff;
+ --md-sys-color-inverse-primary: #d4c3fd;
+ --md-sys-color-secondary: #464054;
+ --md-sys-color-secondary-dim: #3a3548;
+ --md-sys-color-on-secondary: #dfd5ef;
+ --md-sys-color-secondary-container: #787187;
+ --md-sys-color-on-secondary-container: #ffffff;
+ --md-sys-color-secondary-fixed: #787187;
+ --md-sys-color-secondary-fixed-dim: #6c657b;
+ --md-sys-color-on-secondary-fixed: #ffffff;
+ --md-sys-color-on-secondary-fixed-variant: #ffffff;
+ --md-sys-color-tertiary: #5c3653;
+ --md-sys-color-tertiary-dim: #502b47;
+ --md-sys-color-on-tertiary: #ffcaee;
+ --md-sys-color-tertiary-container: #936787;
+ --md-sys-color-on-tertiary-container: #ffffff;
+ --md-sys-color-tertiary-fixed: #936787;
+ --md-sys-color-tertiary-fixed-dim: #855b7a;
+ --md-sys-color-on-tertiary-fixed: #ffffff;
+ --md-sys-color-on-tertiary-fixed-variant: #ffffff;
+ --md-sys-color-error: #821830;
+ --md-sys-color-error-dim: #6b0221;
+ --md-sys-color-on-error: #ffcdd1;
+ --md-sys-color-error-container: #c44b5f;
+ --md-sys-color-on-error-container: #ffffff;
+ --md-sys-color-success: #004d30;
+ --md-sys-color-on-success: #7df0b3;
+ --md-sys-color-success-container: #008656;
+ --md-sys-color-on-success-container: #ffffff;
+ --md-sys-color-warning: #593e00;
+ --md-sys-color-on-warning: #ffd385;
+ --md-sys-color-warning-container: #986d00;
+ --md-sys-color-on-warning-container: #ffffff;
+ --md-sys-color-info: #003f8e;
+ --md-sys-color-on-info: #cbd9ff;
+ --md-sys-color-info-container: #006fef;
+ --md-sys-color-on-info-container: #ffffff;
+ --md-sys-color-inverse-error: #ff9da8;
+ --md-sys-color-inverse-success: #5ace94;
+ --md-sys-color-inverse-warning: #f3b31e;
+ --md-sys-color-inverse-info: #98b8ff;
+ }
- --md-sys-color-background: #0f0d12;
- --md-sys-color-on-background: #ffffff;
- --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: #ffffff;
- --md-sys-color-on-surface-variant: #bcb6c2;
- --md-sys-color-outline: #96919c;
- --md-sys-color-outline-variant: #78737e;
- --md-sys-color-inverse-surface: #fdf7fe;
- --md-sys-color-inverse-on-surface: #39373c;
- --md-sys-color-primary: #cdc0ec;
- --md-sys-color-primary-dim: #bfb2de;
- --md-sys-color-on-primary: #3a3054;
- --md-sys-color-primary-container: #7a6f96;
- --md-sys-color-on-primary-container: #ffffff;
- --md-sys-color-primary-fixed: #ded0fe;
- --md-sys-color-primary-fixed-dim: #d0c3ef;
- --md-sys-color-on-primary-fixed: #180e30;
- --md-sys-color-on-primary-fixed-variant: #3c3256;
- --md-sys-color-inverse-primary: #5a4f75;
- --md-sys-color-secondary: #cbc2db;
- --md-sys-color-secondary-dim: #beb5cd;
- --md-sys-color-on-secondary: #393347;
- --md-sys-color-secondary-container: #787187;
- --md-sys-color-on-secondary-container: #ffffff;
- --md-sys-color-secondary-fixed: #e8def8;
- --md-sys-color-secondary-fixed-dim: #dad0ea;
- --md-sys-color-on-secondary-fixed: #221d2f;
- --md-sys-color-on-secondary-fixed-variant: #423c50;
- --md-sys-color-tertiary: #ffcfef;
- --md-sys-color-tertiary-dim: #f4bfe3;
- --md-sys-color-on-tertiary: #5e3855;
- --md-sys-color-tertiary-container: #f4bfe3;
- --md-sys-color-on-tertiary-container: #542f4c;
- --md-sys-color-tertiary-fixed: #f4bfe3;
- --md-sys-color-tertiary-fixed-dim: #e5b2d5;
- --md-sys-color-on-tertiary-fixed: #180015;
- --md-sys-color-on-tertiary-fixed-variant: #4a2642;
- --md-sys-color-error: #ff9da8;
- --md-sys-color-error-dim: #ff8695;
- --md-sys-color-on-error: #5f001c;
- --md-sys-color-error-container: #c44b5f;
- --md-sys-color-on-error-container: #ffffff;
- --md-sys-color-success: #5ace94;
- --md-sys-color-on-success: #00341e;
- --md-sys-color-success-container: #008656;
- --md-sys-color-on-success-container: #ffffff;
- --md-sys-color-warning: #f3b31e;
- --md-sys-color-on-warning: #412d00;
- --md-sys-color-warning-container: #e4a604;
- --md-sys-color-on-warning-container: #332200;
- --md-sys-color-info: #98b8ff;
- --md-sys-color-on-info: #002a62;
- --md-sys-color-info-container: #006fef;
- --md-sys-color-on-info-container: #ffffff;
- --md-sys-color-inverse-error: #821830;
- --md-sys-color-inverse-success: #004d30;
- --md-sys-color-inverse-warning: #593e00;
- --md-sys-color-inverse-info: #003f8e;
-}
+ [data-contrast='medium'][data-theme='dark'],
+ [data-contrast='medium'] [data-theme='dark'] {
+ color-scheme: dark;
-[data-contrast='high'],
-[data-contrast='high'][data-theme='light'],
-[data-contrast='high'] [data-theme='light'] {
- color-scheme: light;
+ --md-sys-color-background: #0f0d12;
+ --md-sys-color-on-background: #ffffff;
+ --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: #ffffff;
+ --md-sys-color-on-surface-variant: #bcb6c2;
+ --md-sys-color-outline: #96919c;
+ --md-sys-color-outline-variant: #78737e;
+ --md-sys-color-inverse-surface: #fdf7fe;
+ --md-sys-color-inverse-on-surface: #39373c;
+ --md-sys-color-primary: #cdc0ec;
+ --md-sys-color-primary-dim: #bfb2de;
+ --md-sys-color-on-primary: #3a3054;
+ --md-sys-color-primary-container: #7a6f96;
+ --md-sys-color-on-primary-container: #ffffff;
+ --md-sys-color-primary-fixed: #ded0fe;
+ --md-sys-color-primary-fixed-dim: #d0c3ef;
+ --md-sys-color-on-primary-fixed: #180e30;
+ --md-sys-color-on-primary-fixed-variant: #3c3256;
+ --md-sys-color-inverse-primary: #5a4f75;
+ --md-sys-color-secondary: #cbc2db;
+ --md-sys-color-secondary-dim: #beb5cd;
+ --md-sys-color-on-secondary: #393347;
+ --md-sys-color-secondary-container: #787187;
+ --md-sys-color-on-secondary-container: #ffffff;
+ --md-sys-color-secondary-fixed: #e8def8;
+ --md-sys-color-secondary-fixed-dim: #dad0ea;
+ --md-sys-color-on-secondary-fixed: #221d2f;
+ --md-sys-color-on-secondary-fixed-variant: #423c50;
+ --md-sys-color-tertiary: #ffcfef;
+ --md-sys-color-tertiary-dim: #f4bfe3;
+ --md-sys-color-on-tertiary: #5e3855;
+ --md-sys-color-tertiary-container: #f4bfe3;
+ --md-sys-color-on-tertiary-container: #542f4c;
+ --md-sys-color-tertiary-fixed: #f4bfe3;
+ --md-sys-color-tertiary-fixed-dim: #e5b2d5;
+ --md-sys-color-on-tertiary-fixed: #180015;
+ --md-sys-color-on-tertiary-fixed-variant: #4a2642;
+ --md-sys-color-error: #ff9da8;
+ --md-sys-color-error-dim: #ff8695;
+ --md-sys-color-on-error: #5f001c;
+ --md-sys-color-error-container: #c44b5f;
+ --md-sys-color-on-error-container: #ffffff;
+ --md-sys-color-success: #5ace94;
+ --md-sys-color-on-success: #00341e;
+ --md-sys-color-success-container: #008656;
+ --md-sys-color-on-success-container: #ffffff;
+ --md-sys-color-warning: #f3b31e;
+ --md-sys-color-on-warning: #412d00;
+ --md-sys-color-warning-container: #e4a604;
+ --md-sys-color-on-warning-container: #332200;
+ --md-sys-color-info: #98b8ff;
+ --md-sys-color-on-info: #002a62;
+ --md-sys-color-info-container: #006fef;
+ --md-sys-color-on-info-container: #ffffff;
+ --md-sys-color-inverse-error: #821830;
+ --md-sys-color-inverse-success: #004d30;
+ --md-sys-color-inverse-warning: #593e00;
+ --md-sys-color-inverse-info: #003f8e;
+ }
- --md-sys-color-background: #fdf7fe;
- --md-sys-color-on-background: #000000;
- --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: #000000;
- --md-sys-color-on-surface-variant: #25232b;
- --md-sys-color-outline: #45414b;
- --md-sys-color-outline-variant: #54505a;
- --md-sys-color-inverse-surface: #0f0d12;
- --md-sys-color-inverse-on-surface: #ffffff;
- --md-sys-color-primary: #281b49;
- --md-sys-color-primary-dim: #1e103f;
- --md-sys-color-on-primary: #e1d3ff;
- --md-sys-color-primary-container: #584a7b;
- --md-sys-color-on-primary-container: #ffffff;
- --md-sys-color-primary-fixed: #584a7b;
- --md-sys-color-primary-fixed-dim: #4c3f6f;
- --md-sys-color-on-primary-fixed: #ffffff;
- --md-sys-color-on-primary-fixed-variant: #ffffff;
- --md-sys-color-inverse-primary: #d4c3fd;
- --md-sys-color-secondary: #262134;
- --md-sys-color-secondary-dim: #1c1729;
- --md-sys-color-on-secondary: #dfd6ef;
- --md-sys-color-secondary-container: #554f64;
- --md-sys-color-on-secondary-container: #ffffff;
- --md-sys-color-secondary-fixed: #554f64;
- --md-sys-color-secondary-fixed-dim: #494358;
- --md-sys-color-on-secondary-fixed: #ffffff;
- --md-sys-color-on-secondary-fixed-variant: #ffffff;
- --md-sys-color-tertiary: #391733;
- --md-sys-color-tertiary-dim: #2e0d28;
- --md-sys-color-on-tertiary: #ffcbee;
- --md-sys-color-tertiary-container: #6d4563;
- --md-sys-color-on-tertiary-container: #ffffff;
- --md-sys-color-tertiary-fixed: #6d4563;
- --md-sys-color-tertiary-fixed-dim: #603a57;
- --md-sys-color-on-tertiary-fixed: #ffffff;
- --md-sys-color-on-tertiary-fixed-variant: #ffffff;
- --md-sys-color-error: #500016;
- --md-sys-color-error-dim: #3d000f;
- --md-sys-color-on-error: #ffced2;
- --md-sys-color-error-container: #97283e;
- --md-sys-color-on-error-container: #ffffff;
- --md-sys-color-success: #002a18;
- --md-sys-color-on-success: #7df0b4;
- --md-sys-color-success-container: #005f3c;
- --md-sys-color-on-success-container: #ffffff;
- --md-sys-color-warning: #312100;
- --md-sys-color-on-warning: #ffd486;
- --md-sys-color-warning-container: #6c4d00;
- --md-sys-color-on-warning-container: #ffffff;
- --md-sys-color-info: #002252;
- --md-sys-color-on-info: #ccdaff;
- --md-sys-color-info-container: #004eac;
- --md-sys-color-on-info-container: #ffffff;
- --md-sys-color-inverse-error: #ffdddf;
- --md-sys-color-inverse-success: #89fcbf;
- --md-sys-color-inverse-warning: #ffe2b1;
- --md-sys-color-inverse-info: #dde5ff;
-}
+ [data-contrast='high'],
+ [data-contrast='high'][data-theme='light'],
+ [data-contrast='high'] [data-theme='light'] {
+ color-scheme: light;
-[data-contrast='high'][data-theme='dark'],
-[data-contrast='high'] [data-theme='dark'] {
- color-scheme: dark;
+ --md-sys-color-background: #fdf7fe;
+ --md-sys-color-on-background: #000000;
+ --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: #000000;
+ --md-sys-color-on-surface-variant: #25232b;
+ --md-sys-color-outline: #45414b;
+ --md-sys-color-outline-variant: #54505a;
+ --md-sys-color-inverse-surface: #0f0d12;
+ --md-sys-color-inverse-on-surface: #ffffff;
+ --md-sys-color-primary: #281b49;
+ --md-sys-color-primary-dim: #1e103f;
+ --md-sys-color-on-primary: #e1d3ff;
+ --md-sys-color-primary-container: #584a7b;
+ --md-sys-color-on-primary-container: #ffffff;
+ --md-sys-color-primary-fixed: #584a7b;
+ --md-sys-color-primary-fixed-dim: #4c3f6f;
+ --md-sys-color-on-primary-fixed: #ffffff;
+ --md-sys-color-on-primary-fixed-variant: #ffffff;
+ --md-sys-color-inverse-primary: #d4c3fd;
+ --md-sys-color-secondary: #262134;
+ --md-sys-color-secondary-dim: #1c1729;
+ --md-sys-color-on-secondary: #dfd6ef;
+ --md-sys-color-secondary-container: #554f64;
+ --md-sys-color-on-secondary-container: #ffffff;
+ --md-sys-color-secondary-fixed: #554f64;
+ --md-sys-color-secondary-fixed-dim: #494358;
+ --md-sys-color-on-secondary-fixed: #ffffff;
+ --md-sys-color-on-secondary-fixed-variant: #ffffff;
+ --md-sys-color-tertiary: #391733;
+ --md-sys-color-tertiary-dim: #2e0d28;
+ --md-sys-color-on-tertiary: #ffcbee;
+ --md-sys-color-tertiary-container: #6d4563;
+ --md-sys-color-on-tertiary-container: #ffffff;
+ --md-sys-color-tertiary-fixed: #6d4563;
+ --md-sys-color-tertiary-fixed-dim: #603a57;
+ --md-sys-color-on-tertiary-fixed: #ffffff;
+ --md-sys-color-on-tertiary-fixed-variant: #ffffff;
+ --md-sys-color-error: #500016;
+ --md-sys-color-error-dim: #3d000f;
+ --md-sys-color-on-error: #ffced2;
+ --md-sys-color-error-container: #97283e;
+ --md-sys-color-on-error-container: #ffffff;
+ --md-sys-color-success: #002a18;
+ --md-sys-color-on-success: #7df0b4;
+ --md-sys-color-success-container: #005f3c;
+ --md-sys-color-on-success-container: #ffffff;
+ --md-sys-color-warning: #312100;
+ --md-sys-color-on-warning: #ffd486;
+ --md-sys-color-warning-container: #6c4d00;
+ --md-sys-color-on-warning-container: #ffffff;
+ --md-sys-color-info: #002252;
+ --md-sys-color-on-info: #ccdaff;
+ --md-sys-color-info-container: #004eac;
+ --md-sys-color-on-info-container: #ffffff;
+ --md-sys-color-inverse-error: #ffdddf;
+ --md-sys-color-inverse-success: #89fcbf;
+ --md-sys-color-inverse-warning: #ffe2b1;
+ --md-sys-color-inverse-info: #dde5ff;
+ }
- --md-sys-color-background: #0f0d12;
- --md-sys-color-on-background: #ffffff;
- --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: #ffffff;
- --md-sys-color-on-surface-variant: #eae3ef;
- --md-sys-color-outline: #bcb6c2;
- --md-sys-color-outline-variant: #a7a1ad;
- --md-sys-color-inverse-surface: #fdf7fe;
- --md-sys-color-inverse-on-surface: #000000;
- --md-sys-color-primary: #ebe1ff;
- --md-sys-color-primary-dim: #ded0fe;
- --md-sys-color-on-primary: #302649;
- --md-sys-color-primary-container: #aa9dc8;
- --md-sys-color-on-primary-container: #000000;
- --md-sys-color-primary-fixed: #ded0fe;
- --md-sys-color-primary-fixed-dim: #d0c3ef;
- --md-sys-color-on-primary-fixed: #000000;
- --md-sys-color-on-primary-fixed-variant: #180e30;
- --md-sys-color-inverse-primary: #3c3256;
- --md-sys-color-secondary: #ebe1fb;
- --md-sys-color-secondary-dim: #ddd3ed;
- --md-sys-color-on-secondary: #2e293c;
- --md-sys-color-secondary-container: #a8a0b8;
- --md-sys-color-on-secondary-container: #000000;
- --md-sys-color-secondary-fixed: #e8def8;
- --md-sys-color-secondary-fixed-dim: #dad0ea;
- --md-sys-color-on-secondary-fixed: #000000;
- --md-sys-color-on-secondary-fixed-variant: #221d2f;
- --md-sys-color-tertiary: #ffdbf2;
- --md-sys-color-tertiary-dim: #fac5e9;
- --md-sys-color-on-tertiary: #43203b;
- --md-sys-color-tertiary-container: #f4bfe3;
- --md-sys-color-on-tertiary-container: #2e0e29;
- --md-sys-color-tertiary-fixed: #f4bfe3;
- --md-sys-color-tertiary-fixed-dim: #e5b2d5;
- --md-sys-color-on-tertiary-fixed: #000000;
- --md-sys-color-on-tertiary-fixed-variant: #180015;
- --md-sys-color-error: #ffdddf;
- --md-sys-color-error-dim: #ffc7cb;
- --md-sys-color-on-error: #5f001c;
- --md-sys-color-error-container: #ff798c;
- --md-sys-color-on-error-container: #000000;
- --md-sys-color-success: #89fcbf;
- --md-sys-color-on-success: #00341e;
- --md-sys-color-success-container: #42b880;
- --md-sys-color-on-success-container: #000000;
- --md-sys-color-warning: #ffe2b1;
- --md-sys-color-on-warning: #3c2900;
- --md-sys-color-warning-container: #e4a604;
- --md-sys-color-on-warning-container: #000000;
- --md-sys-color-info: #dde5ff;
- --md-sys-color-on-info: #002a62;
- --md-sys-color-info-container: #74a2ff;
- --md-sys-color-on-info-container: #000000;
- --md-sys-color-inverse-error: #500016;
- --md-sys-color-inverse-success: #002a18;
- --md-sys-color-inverse-warning: #312100;
- --md-sys-color-inverse-info: #002252;
+ [data-contrast='high'][data-theme='dark'],
+ [data-contrast='high'] [data-theme='dark'] {
+ color-scheme: dark;
+
+ --md-sys-color-background: #0f0d12;
+ --md-sys-color-on-background: #ffffff;
+ --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: #ffffff;
+ --md-sys-color-on-surface-variant: #eae3ef;
+ --md-sys-color-outline: #bcb6c2;
+ --md-sys-color-outline-variant: #a7a1ad;
+ --md-sys-color-inverse-surface: #fdf7fe;
+ --md-sys-color-inverse-on-surface: #000000;
+ --md-sys-color-primary: #ebe1ff;
+ --md-sys-color-primary-dim: #ded0fe;
+ --md-sys-color-on-primary: #302649;
+ --md-sys-color-primary-container: #aa9dc8;
+ --md-sys-color-on-primary-container: #000000;
+ --md-sys-color-primary-fixed: #ded0fe;
+ --md-sys-color-primary-fixed-dim: #d0c3ef;
+ --md-sys-color-on-primary-fixed: #000000;
+ --md-sys-color-on-primary-fixed-variant: #180e30;
+ --md-sys-color-inverse-primary: #3c3256;
+ --md-sys-color-secondary: #ebe1fb;
+ --md-sys-color-secondary-dim: #ddd3ed;
+ --md-sys-color-on-secondary: #2e293c;
+ --md-sys-color-secondary-container: #a8a0b8;
+ --md-sys-color-on-secondary-container: #000000;
+ --md-sys-color-secondary-fixed: #e8def8;
+ --md-sys-color-secondary-fixed-dim: #dad0ea;
+ --md-sys-color-on-secondary-fixed: #000000;
+ --md-sys-color-on-secondary-fixed-variant: #221d2f;
+ --md-sys-color-tertiary: #ffdbf2;
+ --md-sys-color-tertiary-dim: #fac5e9;
+ --md-sys-color-on-tertiary: #43203b;
+ --md-sys-color-tertiary-container: #f4bfe3;
+ --md-sys-color-on-tertiary-container: #2e0e29;
+ --md-sys-color-tertiary-fixed: #f4bfe3;
+ --md-sys-color-tertiary-fixed-dim: #e5b2d5;
+ --md-sys-color-on-tertiary-fixed: #000000;
+ --md-sys-color-on-tertiary-fixed-variant: #180015;
+ --md-sys-color-error: #ffdddf;
+ --md-sys-color-error-dim: #ffc7cb;
+ --md-sys-color-on-error: #5f001c;
+ --md-sys-color-error-container: #ff798c;
+ --md-sys-color-on-error-container: #000000;
+ --md-sys-color-success: #89fcbf;
+ --md-sys-color-on-success: #00341e;
+ --md-sys-color-success-container: #42b880;
+ --md-sys-color-on-success-container: #000000;
+ --md-sys-color-warning: #ffe2b1;
+ --md-sys-color-on-warning: #3c2900;
+ --md-sys-color-warning-container: #e4a604;
+ --md-sys-color-on-warning-container: #000000;
+ --md-sys-color-info: #dde5ff;
+ --md-sys-color-on-info: #002a62;
+ --md-sys-color-info-container: #74a2ff;
+ --md-sys-color-on-info-container: #000000;
+ --md-sys-color-inverse-error: #500016;
+ --md-sys-color-inverse-success: #002a18;
+ --md-sys-color-inverse-warning: #312100;
+ --md-sys-color-inverse-info: #002252;
+ }
}
diff --git a/resources/css/tokens/shape.css b/resources/css/tokens/shape.css
index af637c6b..e0636801 100644
--- a/resources/css/tokens/shape.css
+++ b/resources/css/tokens/shape.css
@@ -7,15 +7,20 @@
*
* 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;
+
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+@layer material.tokens {
+ :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;
+ }
}
diff --git a/resources/css/tokens/state.css b/resources/css/tokens/state.css
index 39f33e9b..3b1f0a5a 100644
--- a/resources/css/tokens/state.css
+++ b/resources/css/tokens/state.css
@@ -5,108 +5,20 @@
* element at 8% on hover, 10% on focus and press, 16% while dragged; disabled content at 38%
* and a disabled container at 12%.
*
- * `state-layer` puts M3's state layer on an element. Hover only where the pointer can hover,
- * because a touch screen keeps the last hover after a tap; `data-dragged` on the element draws
- * the dragged layer. The layer is a ::before, so the element becomes `position: relative` and
- * `isolation: isolate`; never pass `static` or a z-index to it.
- *
- * `touch-target` extends an element's pointer target to M3's 48×48px minimum without changing
- * what is drawn: a ::after centred on it, at least 48px each way. It is `::after`-based, so a
- * component that already draws with ::after wraps its control in an element carrying it.
- *
- * `focus-ring` is M3's focus indicator — 3px in secondary, 2px out, drawn only for keyboard
- * focus. The site gives no thickness or offset; the values are @material/web's focus ring
- * tokens (Apache-2.0, © Google LLC). `link` is a link in running text: underlined in the
- * colour of the words around it.
+ * The classes that draw them are foundation/interaction.css (`md-state-layer`, `md-focus-ring`,
+ * `md-touch-target`, `md-link`), and utilities.css for the components still written in Tailwind.
+ * The tokens sit in `material.tokens`, so an application's own unlayered declaration wins.
*/
-:root {
- --md-sys-state-hover-state-layer-opacity: 0.08;
- --md-sys-state-focus-state-layer-opacity: 0.1;
- --md-sys-state-pressed-state-layer-opacity: 0.1;
- --md-sys-state-dragged-state-layer-opacity: 0.16;
- --md-sys-state-disabled-content-opacity: 0.38;
- --md-sys-state-disabled-container-opacity: 0.12;
-}
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
-@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: var(--md-sys-state-hover-state-layer-opacity);
- }
- }
-
- &:focus-visible::before {
- opacity: var(--md-sys-state-focus-state-layer-opacity);
- }
-
- &:active::before {
- opacity: var(--md-sys-state-pressed-state-layer-opacity);
- }
-
- &[data-dragged]::before {
- opacity: var(--md-sys-state-dragged-state-layer-opacity);
- }
-
- &:disabled::before,
- &[aria-disabled='true']::before {
- display: none;
+@layer material.tokens {
+ :root {
+ --md-sys-state-hover-state-layer-opacity: 0.08;
+ --md-sys-state-focus-state-layer-opacity: 0.1;
+ --md-sys-state-pressed-state-layer-opacity: 0.1;
+ --md-sys-state-dragged-state-layer-opacity: 0.16;
+ --md-sys-state-disabled-content-opacity: 0.38;
+ --md-sys-state-disabled-container-opacity: 0.12;
}
}
-
-@utility touch-target {
- position: relative;
-
- &::after {
- content: '';
- position: absolute;
- top: 50%;
- left: 50%;
- width: 100%;
- height: 100%;
- min-width: 3rem;
- min-height: 3rem;
- transform: translate(-50%, -50%);
- }
-}
-
-@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;
-}
diff --git a/resources/css/tokens/type.css b/resources/css/tokens/type.css
index cfbd0264..f49b5f35 100644
--- a/resources/css/tokens/type.css
+++ b/resources/css/tokens/type.css
@@ -4,265 +4,90 @@
* Sizes, line heights, weights and tracking are androidx Compose Material 3's own token values
* (tokens/TypeScaleTokens.kt, Apache-2.0, © Google LLC, androidx-main @ 1608250), converted as
* M3's units table says: rem = sp / 16, tracking in rem as well (docs/reference/m3/styles.md
- * § Typography). A style is used through its utility, never by hand-assembling `text-*`,
- * `leading-*` and `tracking-*`:
+ * § Typography). A style is used whole, through its class, never by hand-assembling a size, a
+ * line height and a tracking:
*
- * …
- * …
+ * …
+ * …
+ *
+ * The `md-type-*` classes are text.css; the `type-*` utilities of the components still written in
+ * Tailwind are utilities.css, with the same declarations.
*
* 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, verified by
* `npm run check:font` — and they carry their own tracking, because M3 widens four of them and
* takes Display Large's negative tracking back to zero.
- *
- * M3 asks for emphasis one element at a time, and `font-variation-settings` inherits, so every
- * regular utility resets it: body copy inside an emphasized heading reads as itself again.
*/
-: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.0125rem;
- --md-sys-typescale-emphasized-display-lg: var(--md-ref-typeface-weight-medium) 3.5625rem/4rem var(--md-ref-typeface-brand);
- --md-sys-typescale-emphasized-display-lg-tracking: 0rem;
- --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-emphasized-display-md-tracking: 0rem;
- --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-emphasized-display-sm-tracking: 0rem;
- --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-emphasized-headline-lg-tracking: 0rem;
- --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-emphasized-headline-md-tracking: 0rem;
- --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-emphasized-headline-sm-tracking: 0rem;
- --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-emphasized-title-lg-tracking: 0rem;
- --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.0125rem;
- --md-sys-typescale-emphasized-title-md: var(--md-ref-typeface-weight-bold) 1rem/1.5rem var(--md-ref-typeface-plain);
- --md-sys-typescale-emphasized-title-md-tracking: 0.009375rem;
- --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-emphasized-title-sm-tracking: 0.00625rem;
- --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-emphasized-body-lg-tracking: 0.009375rem;
- --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.0125rem;
- --md-sys-typescale-emphasized-body-md: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain);
- --md-sys-typescale-emphasized-body-md-tracking: 0.015625rem;
- --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-emphasized-body-sm-tracking: 0.025rem;
- --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-emphasized-label-lg-tracking: 0.00625rem;
- --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-emphasized-label-md-tracking: 0.03125rem;
- --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);
- --md-sys-typescale-emphasized-label-sm-tracking: 0.03125rem;
-}
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
-@utility type-display-lg {
- font: var(--md-sys-typescale-display-lg);
- letter-spacing: var(--md-sys-typescale-display-lg-tracking);
- font-variation-settings: normal;
-}
+@layer material.tokens {
+ :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;
-@utility type-emphasized-display-lg {
- font: var(--md-sys-typescale-emphasized-display-lg);
- letter-spacing: var(--md-sys-typescale-emphasized-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);
- font-variation-settings: normal;
-}
-
-@utility type-emphasized-display-md {
- font: var(--md-sys-typescale-emphasized-display-md);
- letter-spacing: var(--md-sys-typescale-emphasized-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);
- font-variation-settings: normal;
-}
-
-@utility type-emphasized-display-sm {
- font: var(--md-sys-typescale-emphasized-display-sm);
- letter-spacing: var(--md-sys-typescale-emphasized-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);
- font-variation-settings: normal;
-}
-
-@utility type-emphasized-headline-lg {
- font: var(--md-sys-typescale-emphasized-headline-lg);
- letter-spacing: var(--md-sys-typescale-emphasized-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);
- font-variation-settings: normal;
-}
-
-@utility type-emphasized-headline-md {
- font: var(--md-sys-typescale-emphasized-headline-md);
- letter-spacing: var(--md-sys-typescale-emphasized-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);
- font-variation-settings: normal;
-}
-
-@utility type-emphasized-headline-sm {
- font: var(--md-sys-typescale-emphasized-headline-sm);
- letter-spacing: var(--md-sys-typescale-emphasized-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);
- font-variation-settings: normal;
-}
-
-@utility type-emphasized-title-lg {
- font: var(--md-sys-typescale-emphasized-title-lg);
- letter-spacing: var(--md-sys-typescale-emphasized-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);
- font-variation-settings: normal;
-}
-
-@utility type-emphasized-title-md {
- font: var(--md-sys-typescale-emphasized-title-md);
- letter-spacing: var(--md-sys-typescale-emphasized-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);
- font-variation-settings: normal;
-}
-
-@utility type-emphasized-title-sm {
- font: var(--md-sys-typescale-emphasized-title-sm);
- letter-spacing: var(--md-sys-typescale-emphasized-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);
- font-variation-settings: normal;
-}
-
-@utility type-emphasized-body-lg {
- font: var(--md-sys-typescale-emphasized-body-lg);
- letter-spacing: var(--md-sys-typescale-emphasized-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);
- font-variation-settings: normal;
-}
-
-@utility type-emphasized-body-md {
- font: var(--md-sys-typescale-emphasized-body-md);
- letter-spacing: var(--md-sys-typescale-emphasized-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);
- font-variation-settings: normal;
-}
-
-@utility type-emphasized-body-sm {
- font: var(--md-sys-typescale-emphasized-body-sm);
- letter-spacing: var(--md-sys-typescale-emphasized-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);
- font-variation-settings: normal;
-}
-
-@utility type-emphasized-label-lg {
- font: var(--md-sys-typescale-emphasized-label-lg);
- letter-spacing: var(--md-sys-typescale-emphasized-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);
- font-variation-settings: normal;
-}
-
-@utility type-emphasized-label-md {
- font: var(--md-sys-typescale-emphasized-label-md);
- letter-spacing: var(--md-sys-typescale-emphasized-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);
- font-variation-settings: normal;
-}
-
-@utility type-emphasized-label-sm {
- font: var(--md-sys-typescale-emphasized-label-sm);
- letter-spacing: var(--md-sys-typescale-emphasized-label-sm-tracking);
- font-variation-settings: "ROND" 100;
+ --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.0125rem;
+ --md-sys-typescale-emphasized-display-lg: var(--md-ref-typeface-weight-medium) 3.5625rem/4rem var(--md-ref-typeface-brand);
+ --md-sys-typescale-emphasized-display-lg-tracking: 0rem;
+ --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-emphasized-display-md-tracking: 0rem;
+ --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-emphasized-display-sm-tracking: 0rem;
+ --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-emphasized-headline-lg-tracking: 0rem;
+ --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-emphasized-headline-md-tracking: 0rem;
+ --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-emphasized-headline-sm-tracking: 0rem;
+ --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-emphasized-title-lg-tracking: 0rem;
+ --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.0125rem;
+ --md-sys-typescale-emphasized-title-md: var(--md-ref-typeface-weight-bold) 1rem/1.5rem var(--md-ref-typeface-plain);
+ --md-sys-typescale-emphasized-title-md-tracking: 0.009375rem;
+ --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-emphasized-title-sm-tracking: 0.00625rem;
+ --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-emphasized-body-lg-tracking: 0.009375rem;
+ --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.0125rem;
+ --md-sys-typescale-emphasized-body-md: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain);
+ --md-sys-typescale-emphasized-body-md-tracking: 0.015625rem;
+ --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-emphasized-body-sm-tracking: 0.025rem;
+ --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-emphasized-label-lg-tracking: 0.00625rem;
+ --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-emphasized-label-md-tracking: 0.03125rem;
+ --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);
+ --md-sys-typescale-emphasized-label-sm-tracking: 0.03125rem;
+ }
}
diff --git a/resources/css/tokens/utilities.css b/resources/css/tokens/utilities.css
new file mode 100644
index 00000000..55f77aa3
--- /dev/null
+++ b/resources/css/tokens/utilities.css
@@ -0,0 +1,286 @@
+/*
+ * The token utilities, for the components still written in Tailwind.
+ *
+ * Tailwind's side of tokens/state.css and tokens/type.css, kept apart so that the token files the
+ * foundation imports carry no Tailwind directive. material.css imports this file after Tailwind;
+ * it goes when the last component leaves Tailwind. New markup uses the plain-CSS classes instead,
+ * which carry the same declarations: `md-state-layer`, `md-focus-ring`, `md-touch-target` and
+ * `md-link` (foundation/interaction.css), and `md-type-*` (text.css).
+ *
+ * `state-layer` puts M3's state layer on an element. Hover only where the pointer can hover,
+ * because a touch screen keeps the last hover after a tap; `data-dragged` on the element draws
+ * the dragged layer. The layer is a ::before, so the element becomes `position: relative` and
+ * `isolation: isolate`; never pass `static` or a z-index to it.
+ *
+ * `touch-target` extends an element's pointer target to M3's 48×48px minimum without changing
+ * what is drawn: a ::after centred on it, at least 48px each way. It is `::after`-based, so a
+ * component that already draws with ::after wraps its control in an element carrying it.
+ *
+ * `focus-ring` is M3's focus indicator — 3px in secondary, 2px out, drawn only for keyboard
+ * focus. The site gives no thickness or offset; the values are @material/web's focus ring
+ * tokens (Apache-2.0, © Google LLC). `link` is a link in running text: underlined in the
+ * colour of the words around it.
+ *
+ * `type-*` is one of M3's 30 type styles (tokens/type.css): size, line height, weight and
+ * tracking together. M3 asks for emphasis one element at a time, and `font-variation-settings`
+ * inherits, so every regular utility resets it: body copy inside an emphasized heading reads as
+ * itself again.
+ */
+
+@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: var(--md-sys-state-hover-state-layer-opacity);
+ }
+ }
+
+ &:focus-visible::before {
+ opacity: var(--md-sys-state-focus-state-layer-opacity);
+ }
+
+ &:active::before {
+ opacity: var(--md-sys-state-pressed-state-layer-opacity);
+ }
+
+ &[data-dragged]::before {
+ opacity: var(--md-sys-state-dragged-state-layer-opacity);
+ }
+
+ &:disabled::before,
+ &[aria-disabled='true']::before {
+ display: none;
+ }
+}
+
+@utility touch-target {
+ position: relative;
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 100%;
+ height: 100%;
+ min-width: 3rem;
+ min-height: 3rem;
+ transform: translate(-50%, -50%);
+ }
+}
+
+@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;
+ }
+}
+
+@utility type-display-lg {
+ font: var(--md-sys-typescale-display-lg);
+ letter-spacing: var(--md-sys-typescale-display-lg-tracking);
+ font-variation-settings: normal;
+}
+
+@utility type-emphasized-display-lg {
+ font: var(--md-sys-typescale-emphasized-display-lg);
+ letter-spacing: var(--md-sys-typescale-emphasized-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);
+ font-variation-settings: normal;
+}
+
+@utility type-emphasized-display-md {
+ font: var(--md-sys-typescale-emphasized-display-md);
+ letter-spacing: var(--md-sys-typescale-emphasized-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);
+ font-variation-settings: normal;
+}
+
+@utility type-emphasized-display-sm {
+ font: var(--md-sys-typescale-emphasized-display-sm);
+ letter-spacing: var(--md-sys-typescale-emphasized-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);
+ font-variation-settings: normal;
+}
+
+@utility type-emphasized-headline-lg {
+ font: var(--md-sys-typescale-emphasized-headline-lg);
+ letter-spacing: var(--md-sys-typescale-emphasized-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);
+ font-variation-settings: normal;
+}
+
+@utility type-emphasized-headline-md {
+ font: var(--md-sys-typescale-emphasized-headline-md);
+ letter-spacing: var(--md-sys-typescale-emphasized-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);
+ font-variation-settings: normal;
+}
+
+@utility type-emphasized-headline-sm {
+ font: var(--md-sys-typescale-emphasized-headline-sm);
+ letter-spacing: var(--md-sys-typescale-emphasized-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);
+ font-variation-settings: normal;
+}
+
+@utility type-emphasized-title-lg {
+ font: var(--md-sys-typescale-emphasized-title-lg);
+ letter-spacing: var(--md-sys-typescale-emphasized-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);
+ font-variation-settings: normal;
+}
+
+@utility type-emphasized-title-md {
+ font: var(--md-sys-typescale-emphasized-title-md);
+ letter-spacing: var(--md-sys-typescale-emphasized-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);
+ font-variation-settings: normal;
+}
+
+@utility type-emphasized-title-sm {
+ font: var(--md-sys-typescale-emphasized-title-sm);
+ letter-spacing: var(--md-sys-typescale-emphasized-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);
+ font-variation-settings: normal;
+}
+
+@utility type-emphasized-body-lg {
+ font: var(--md-sys-typescale-emphasized-body-lg);
+ letter-spacing: var(--md-sys-typescale-emphasized-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);
+ font-variation-settings: normal;
+}
+
+@utility type-emphasized-body-md {
+ font: var(--md-sys-typescale-emphasized-body-md);
+ letter-spacing: var(--md-sys-typescale-emphasized-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);
+ font-variation-settings: normal;
+}
+
+@utility type-emphasized-body-sm {
+ font: var(--md-sys-typescale-emphasized-body-sm);
+ letter-spacing: var(--md-sys-typescale-emphasized-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);
+ font-variation-settings: normal;
+}
+
+@utility type-emphasized-label-lg {
+ font: var(--md-sys-typescale-emphasized-label-lg);
+ letter-spacing: var(--md-sys-typescale-emphasized-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);
+ font-variation-settings: normal;
+}
+
+@utility type-emphasized-label-md {
+ font: var(--md-sys-typescale-emphasized-label-md);
+ letter-spacing: var(--md-sys-typescale-emphasized-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);
+ font-variation-settings: normal;
+}
+
+@utility type-emphasized-label-sm {
+ font: var(--md-sys-typescale-emphasized-label-sm);
+ letter-spacing: var(--md-sys-typescale-emphasized-label-sm-tracking);
+ font-variation-settings: "ROND" 100;
+}
diff --git a/tests/Feature/TokensTest.php b/tests/Feature/TokensTest.php
index 0593bb17..84a8caf1 100644
--- a/tests/Feature/TokensTest.php
+++ b/tests/Feature/TokensTest.php
@@ -37,13 +37,14 @@ function typeStyles(): array
}
/**
- * The body of every `@utility type-…` block of type.css, keyed by utility name.
+ * The body of every `@utility type-…` block, keyed by utility name. The utilities live in
+ * tokens/utilities.css, apart from the tokens, so the foundation imports no Tailwind directive.
*
* @return array
*/
function typeUtilities(): array
{
- preg_match_all('/@utility (type-[\w-]+) \{\n(.*?)\n\}/s', File::get(packageCss('tokens/type.css')), $matches, PREG_SET_ORDER);
+ preg_match_all('/@utility (type-[\w-]+) \{\n(.*?)\n\}/s', File::get(packageCss('tokens/utilities.css')), $matches, PREG_SET_ORDER);
return array_combine(array_column($matches, 1), array_column($matches, 2));
}