@epa-wg/custom-element-dist 0.0.38 → 0.0.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/README.md +5 -5
  3. package/bin/postinstall.sh +6 -1
  4. package/coverage/coverage-final.json +2 -2
  5. package/coverage/index.html +1 -1
  6. package/coverage/src/custom-element/custom-element.js.html +97 -97
  7. package/coverage/src/custom-element/http-request.js.html +10 -10
  8. package/coverage/src/custom-element/index.html +1 -1
  9. package/coverage/src/custom-element/local-storage.js.html +1 -1
  10. package/coverage/src/custom-element/location-element.js.html +1 -1
  11. package/coverage/src/custom-element/module-url.js.html +1 -1
  12. package/coverage/src/index.html +1 -1
  13. package/coverage/src/material/theme/colors.js.html +1 -1
  14. package/coverage/src/material/theme/index.html +1 -1
  15. package/coverage/src/mocks/handlers.ts.html +1 -1
  16. package/coverage/src/mocks/index.html +1 -1
  17. package/coverage/src/stories/frame.canvas.ts.html +1 -1
  18. package/coverage/src/stories/http-request.stories.ts.html +1 -1
  19. package/coverage/src/stories/index.html +1 -1
  20. package/coverage/src/stories/testStoryBook.ts.html +1 -1
  21. package/coverage/src/sum.ts.html +1 -1
  22. package/package.json +2 -2
  23. package/src/css/cem-combined.css +1058 -0
  24. package/src/custom-element/ide/web-types-dce.json +1 -1
  25. package/src/custom-element/ide/web-types-xsl.json +1 -1
  26. package/src/material/components/action.html +1 -1
  27. package/src/material/components/autocomplete.html +1 -1
  28. package/src/material/components/badge.html +1 -1
  29. package/src/material/components/dropdown.html +1 -1
  30. package/src/material/components/icon-link.html +1 -1
  31. package/src/material/components/icon.html +1 -1
  32. package/src/material/components/input.html +1 -1
  33. package/src/material/components/menu.html +1 -1
  34. package/src/material/components.html +13 -6
  35. package/src/material/index.html +2 -2
  36. package/src/mocks/versions.mock.ts +1 -1
  37. package/storybook-static/assets/{Color-F6OSRLHC-CGlEPECH.js → Color-F6OSRLHC-DM-zIDJc.js} +1 -1
  38. package/storybook-static/assets/{Configure-RleqRiQ0.js → Configure-Bv7Hf8nO.js} +1 -1
  39. package/storybook-static/assets/{DocsRenderer-CFRXHY34-Bz2y61tp.js → DocsRenderer-CFRXHY34-BNrvQCFF.js} +2 -2
  40. package/storybook-static/assets/{handlers-CxSWbsdK.js → handlers-C9n1hhtS.js} +1 -1
  41. package/storybook-static/assets/{http-request.stories-_1_UMvj-.js → http-request.stories-CwYdgaOh.js} +1 -1
  42. package/storybook-static/assets/{iframe-fXv0bS2C.js → iframe-DX9w3Kge.js} +2 -2
  43. package/storybook-static/assets/{index-DxjDM4Ny.js → index-C8cHSFtw.js} +1 -1
  44. package/storybook-static/assets/{index-Dm-gke4Y.js → index-DgXlQmnf.js} +3 -3
  45. package/storybook-static/assets/{preview-kbHljohz.js → preview-DxO5Yt9a.js} +1 -1
  46. package/storybook-static/assets/{preview-Dq4-5PA5.js → preview-ln0vFKa2.js} +2 -2
  47. package/storybook-static/iframe.html +1 -1
  48. package/storybook-static/project.json +1 -1
package/src/css/cem-combined.css ADDED
@@ -0,0 +1,1058 @@
1
+ /* Generated by scripts/generate-css-index.mjs. Do not edit by hand. */
2
+
3
+ /* cem-colors.css */
4
+
5
+
6
+ :root{
7
+ /* region branded colors: cem-color-[hue]-[variant] */
8
+
9
+ --cem-color-blue-xl : #e0e8ff ; /* Lightest blue ; Trust palette (light scene surface) */
10
+ --cem-color-blue-l : #d7e3ff ; /* Light blue ; Trust palette, attention semantic */
11
+ --cem-color-blue-d : #002f65 ; /* Dark blue ; Trust palette (dark theme) */
12
+ --cem-color-blue-xd : #001b3f ; /* Darkest blue ; Trust palette (dark scene surface) */
13
+ --cem-color-brown-xl : #d7ccc8 ; /* Extra light brown ; Conservative palette (light theme) */
14
+ --cem-color-brown-l : #a1887f ; /* Light brown ; Conservative emotion, brand-3 */
15
+ --cem-color-brown-d : #4e342e ; /* Dark brown ; Conservative palette (dark theme) */
16
+ --cem-color-brown-xd : #3e2723 ; /* Extra dark brown ; Conservative palette (dark theme, extreme) */
17
+ --cem-color-cyan-xl : #f1fefe ; /* Extra light cyan ; Used for comfort palette (light scenes) */
18
+ --cem-color-cyan-l : #00fbfb ; /* Light cyan ; Calm palette, creativity accent */
19
+ --cem-color-cyan-d : #006a6a ; /* Dark cyan ; Calm palette (dark theme) */
20
+ --cem-color-cyan-xd : #001010 ; /* Extra dark cyan ; Used for comfort palette (dark scenes) */
21
+ --cem-color-grey-l : #f1f1eb ; /* Light grey ; Conservative palette, neutral backgrounds */
22
+ --cem-color-grey-d : #1a1c18 ; /* Dark grey ; Conservative palette (dark theme) */
23
+ --cem-color-orange-xl : #f0f070 ; /* Extra light yellow ; Enthusiasm palette (light theme) */
24
+ --cem-color-orange-l : #ffe082 ; /* Light orange ; Enthusiasm emotion, brand-2 */
25
+ --cem-color-orange-d : #723600 ; /* Dark orange ; Enthusiasm hype (dark theme) */
26
+ --cem-color-orange-xd : #502400 ; /* Extra dark orange ; Enthusiasm palette (dark theme, extreme) */
27
+ --cem-color-purple-xl : #f3e5f5 ; /* Extra light purple ; Creativity palette (light theme) */
28
+ --cem-color-purple-l : #e1bee7 ; /* Light purple ; Creativity emotion, brand-1 */
29
+ --cem-color-purple-d : #6a1b9a ; /* Dark purple ; Creativity palette (dark theme) */
30
+ --cem-color-purple-xd : #4a148c ; /* Extra dark purple ; Creativity palette (dark theme, extreme) */
31
+ --cem-color-red-xl : #ffb4ab ; /* Extra light red ; Danger palette (light theme) */
32
+ --cem-color-red-l : #ba1a1a ; /* Light red ; Danger emotion, alert semantic */
33
+ --cem-color-red-d : #690005 ; /* Dark red ; Danger palette (dark theme) */
34
+ --cem-color-red-xd : #410002 ; /* Extra dark red ; Danger palette (dark theme, extreme) */
35
+ --cem-color-visitedtext-30-black : color-mix(in srgb, VisitedText 30%, black) ; /* light trust-x ; Native palette Trust extreme variant */
36
+ --cem-color-visitedtext-30-white : color-mix(in srgb, VisitedText 30%, white) ; /* dark trust-x ; Native palette Trust extreme variant */
37
+ --cem-color-mark-30-black : color-mix(in srgb, Mark 30%, black) ; /* light enthusiasm-x ; Native palette Enthusiasm extreme variant */
38
+ --cem-color-mark-30-white : color-mix(in srgb, Mark 30%, white) ; /* dark enthusiasm-x ; Native palette Enthusiasm extreme variant */
39
+ --cem-color-canvastext-30-purple : color-mix(in srgb, CanvasText 30%, purple ) ; /* light creativity-x ; Native palette Creativity extreme variant */
40
+ --cem-color-canvastext-30-lightpink : color-mix(in srgb, CanvasText 30%, lightpink) ; /* dark creativity-x ; Native palette Creativity extreme variant */
41
+ --cem-color-red-30-black : color-mix(in srgb, red 30%, black) ; /* light danger-x ; Native palette Danger extreme variant */
42
+ --cem-color-red-30-white : color-mix(in srgb, red 30%, white) ; /* dark danger-x ; Native palette Danger extreme variant */
43
+ --cem-color-white : white ; /* dark trust text ; Trust and Extreme palette dark mode text */
44
+
45
+ /* endregion branded colors */
46
+
47
+ /* emotion palette: cem-palette-[emotion]-[shift] */
48
+ /* region light/dark */
49
+ --cem-palette-comfort: light-dark(var( --cem-color-cyan-xl ), var( --cem-color-cyan-xd ) );
50
+ --cem-palette-comfort-x: light-dark(var( --cem-color-cyan-xd ), var( --cem-color-cyan-xl ) );
51
+ --cem-palette-comfort-text: light-dark(var( --cem-color-cyan-xd ), var( --cem-color-cyan-xl ) );
52
+ --cem-palette-comfort-text-x: light-dark(var( --cem-color-cyan-xl ), var( --cem-color-cyan-xd ) );
53
+ --cem-palette-calm: light-dark(var( --cem-color-cyan-l ), var( --cem-color-cyan-d ) );
54
+ --cem-palette-calm-x: light-dark(var( --cem-color-cyan-d ), var( --cem-color-cyan-l ) );
55
+ --cem-palette-calm-text: light-dark(var( --cem-palette-comfort-text ), var( --cem-palette-comfort-text ) );
56
+ --cem-palette-calm-text-x: light-dark(var( --cem-palette-comfort-text-x ), var( --cem-palette-comfort-text-x ) );
57
+ --cem-palette-trust: light-dark(var( --cem-color-blue-l ), var( --cem-color-blue-d ) );
58
+ --cem-palette-trust-x: light-dark(var( --cem-color-blue-d ), var( --cem-color-blue-l ) );
59
+ --cem-palette-trust-text: light-dark(var( --cem-palette-comfort-text ), var( --cem-color-white ) );
60
+ --cem-palette-trust-text-x: light-dark(var( --cem-palette-comfort-text-x ), var( --cem-palette-comfort-text-x ) );
61
+ --cem-palette-enthusiasm: light-dark(var( --cem-color-orange-l ), var( --cem-color-orange-d ) );
62
+ --cem-palette-enthusiasm-x: light-dark(var( --cem-color-orange-xd ), var( --cem-color-orange-xl ) );
63
+ --cem-palette-enthusiasm-text: light-dark(var( --cem-palette-comfort-text ), var( --cem-color-white ) );
64
+ --cem-palette-enthusiasm-text-x: light-dark(var( --cem-palette-comfort-text-x ), var( --cem-palette-comfort-text-x ) );
65
+ --cem-palette-creativity: light-dark(var( --cem-color-purple-l ), var( --cem-color-purple-d ) );
66
+ --cem-palette-creativity-x: light-dark(var( --cem-color-purple-d ), var( --cem-color-purple-l ) );
67
+ --cem-palette-creativity-text: light-dark(var( --cem-palette-comfort-text ), var( --cem-palette-comfort-text ) );
68
+ --cem-palette-creativity-text-x: light-dark(var( --cem-palette-comfort-text-x ), var( --cem-palette-comfort-text-x ) );
69
+ --cem-palette-danger: light-dark(var( --cem-color-red-l ), var( --cem-color-red-d ) );
70
+ --cem-palette-danger-x: light-dark(var( --cem-color-red-d ), var( --cem-color-red-l ) );
71
+ --cem-palette-danger-text: light-dark(var( --cem-palette-comfort-text-x ), var( --cem-palette-comfort-text ) );
72
+ --cem-palette-danger-text-x: light-dark(var( --cem-color-orange-xl ), var( --cem-color-orange-xl ) );
73
+ --cem-palette-conservative: light-dark(var( --cem-color-grey-l ), var( --cem-color-grey-d ) );
74
+ --cem-palette-conservative-x: light-dark(var( --cem-color-grey-d ), var( --cem-color-grey-l ) );
75
+ --cem-palette-conservative-text: light-dark(var( --cem-palette-comfort-text ), var( --cem-palette-comfort-text ) );
76
+ --cem-palette-conservative-text-x: light-dark(var( --cem-palette-comfort-text-x ), var( --cem-palette-comfort-text-x ) );
77
+
78
+ /* endregion light/dark */
79
+
80
+ /* region zebra outline colors for focus/selected/target (§8) */
81
+ --cem-zebra-color-0: var(--cem-palette-comfort);
82
+ --cem-zebra-color-1: var(--cem-palette-comfort);
83
+ --cem-zebra-color-2: var(--cem-palette-comfort);
84
+ --cem-zebra-color-3: var(--cem-palette-comfort);
85
+ --cem-zebra-strip-size: 2px;
86
+
87
+ /* :root state defaults match native theme so zebra is functional without an explicit theme class */
88
+ [focus], :focus, :focus-visible, :focus-within, .focus {
89
+ --cem-zebra-color-1: CanvasText;
90
+ }
91
+ [target], :target, .target {
92
+ --cem-zebra-color-2: Mark;
93
+ }
94
+ [selected], .selected {
95
+ --cem-zebra-color-3: SelectedItem;
96
+ }
97
+ /* endregion zebra */
98
+
99
+ /* region common for cem themes */
100
+ [data-theme*="cem-theme-"],
101
+ .cem-theme-native,
102
+ .cem-theme-contrast-light,
103
+ .cem-theme-contrast-dark,
104
+ .cem-theme-light,
105
+ .cem-theme-dark {
106
+
107
+ /* action intent tokens: cem-action-[intent]-[state]-[background|text] */
108
+
109
+
110
+ /* region explicit (trust) */
111
+
112
+
113
+ --cem-action-explicit-disabled-background: color-mix(in srgb, var(--cem-palette-trust) 30%, var(--cem-palette-conservative-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 30%, var(--cem-palette-conservative-x)) ~ color-mix(in srgb, var(--cem-palette-trust) 30%, var(--cem-palette-conservative-x)) ~ color-mix(in srgb, var(--cem-palette-trust) 30%, var(--cem-palette-conservative-x)) */
114
+ --cem-action-explicit-disabled-text: var(--cem-palette-conservative-text-x);
115
+
116
+ --cem-action-explicit-readonly-background: color-mix(in srgb, var(--cem-palette-trust) 80%, var(--cem-palette-trust-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 80%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-trust) 80%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-trust) 80%, var(--cem-palette-trust-x)) */
117
+ --cem-action-explicit-readonly-text: var(--cem-palette-trust-text);
118
+
119
+ --cem-action-explicit-editable-background: color-mix(in srgb, var(--cem-palette-trust) 90%, var(--cem-palette-trust-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-trust) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-trust) 90%, var(--cem-palette-trust-x)) */
120
+ --cem-action-explicit-editable-text: var(--cem-palette-trust-text);
121
+
122
+ --cem-action-explicit-default-background: var(--cem-palette-trust);/* var(--cem-palette-[emotion]) ~ var(--cem-palette-trust) ~ var(--cem-palette-trust) */
123
+ --cem-action-explicit-default-text: var(--cem-palette-trust-text);
124
+
125
+ --cem-action-explicit-indeterminate-background: color-mix(in srgb, var(--cem-palette-trust) 90%, var(--cem-palette-trust-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-trust) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-trust) 90%, var(--cem-palette-trust-x)) */
126
+ --cem-action-explicit-indeterminate-text: var(--cem-palette-trust-text);
127
+
128
+ --cem-action-explicit-hover-background: color-mix(in srgb, var(--cem-palette-trust) 70%, var(--cem-palette-trust-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 70%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-trust) 70%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-trust) 70%, var(--cem-palette-trust-x)) */
129
+ --cem-action-explicit-hover-text: var(--cem-palette-trust-text);
130
+
131
+ --cem-action-explicit-active-background: color-mix(in srgb, var(--cem-palette-trust) 25%, var(--cem-palette-trust-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 25%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-trust) 25%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-trust) 25%, var(--cem-palette-trust-x)) */
132
+ --cem-action-explicit-active-text: var(--cem-palette-trust-text-x);
133
+
134
+ --cem-action-explicit-pending-background: color-mix(in srgb, var(--cem-palette-trust) 5%, var(--cem-palette-trust-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 5%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-trust) 5%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-trust) 5%, var(--cem-palette-trust-x)) */
135
+ --cem-action-explicit-pending-text: var(--cem-palette-trust-text-x);
136
+
137
+ /* endregion explicit (trust) */
138
+
139
+
140
+ /* region primary (creativity) */
141
+
142
+
143
+ --cem-action-primary-disabled-background: color-mix(in srgb, var(--cem-palette-creativity) 30%, var(--cem-palette-conservative-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 30%, var(--cem-palette-conservative-x)) ~ color-mix(in srgb, var(--cem-palette-creativity) 30%, var(--cem-palette-conservative-x)) ~ color-mix(in srgb, var(--cem-palette-creativity) 30%, var(--cem-palette-conservative-x)) */
144
+ --cem-action-primary-disabled-text: var(--cem-palette-conservative-text-x);
145
+
146
+ --cem-action-primary-readonly-background: color-mix(in srgb, var(--cem-palette-creativity) 80%, var(--cem-palette-creativity-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 80%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-creativity) 80%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-creativity) 80%, var(--cem-palette-creativity-x)) */
147
+ --cem-action-primary-readonly-text: var(--cem-palette-creativity-text);
148
+
149
+ --cem-action-primary-editable-background: color-mix(in srgb, var(--cem-palette-creativity) 90%, var(--cem-palette-creativity-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-creativity) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-creativity) 90%, var(--cem-palette-creativity-x)) */
150
+ --cem-action-primary-editable-text: var(--cem-palette-creativity-text);
151
+
152
+ --cem-action-primary-default-background: var(--cem-palette-creativity);/* var(--cem-palette-[emotion]) ~ var(--cem-palette-creativity) ~ var(--cem-palette-creativity) */
153
+ --cem-action-primary-default-text: var(--cem-palette-creativity-text);
154
+
155
+ --cem-action-primary-indeterminate-background: color-mix(in srgb, var(--cem-palette-creativity) 90%, var(--cem-palette-creativity-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-creativity) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-creativity) 90%, var(--cem-palette-creativity-x)) */
156
+ --cem-action-primary-indeterminate-text: var(--cem-palette-creativity-text);
157
+
158
+ --cem-action-primary-hover-background: color-mix(in srgb, var(--cem-palette-creativity) 70%, var(--cem-palette-creativity-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 70%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-creativity) 70%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-creativity) 70%, var(--cem-palette-creativity-x)) */
159
+ --cem-action-primary-hover-text: var(--cem-palette-creativity-text);
160
+
161
+ --cem-action-primary-active-background: color-mix(in srgb, var(--cem-palette-creativity) 25%, var(--cem-palette-creativity-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 25%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-creativity) 25%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-creativity) 25%, var(--cem-palette-creativity-x)) */
162
+ --cem-action-primary-active-text: var(--cem-palette-creativity-text-x);
163
+
164
+ --cem-action-primary-pending-background: color-mix(in srgb, var(--cem-palette-creativity) 5%, var(--cem-palette-creativity-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 5%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-creativity) 5%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-creativity) 5%, var(--cem-palette-creativity-x)) */
165
+ --cem-action-primary-pending-text: var(--cem-palette-creativity-text-x);
166
+
167
+ /* endregion primary (creativity) */
168
+
169
+
170
+ /* region contextual (comfort) */
171
+
172
+
173
+ --cem-action-contextual-disabled-background: color-mix(in srgb, var(--cem-palette-comfort) 30%, var(--cem-palette-conservative-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 30%, var(--cem-palette-conservative-x)) ~ color-mix(in srgb, var(--cem-palette-comfort) 30%, var(--cem-palette-conservative-x)) ~ color-mix(in srgb, var(--cem-palette-comfort) 30%, var(--cem-palette-conservative-x)) */
174
+ --cem-action-contextual-disabled-text: var(--cem-palette-conservative-text-x);
175
+
176
+ --cem-action-contextual-readonly-background: color-mix(in srgb, var(--cem-palette-comfort) 80%, var(--cem-palette-comfort-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 80%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-comfort) 80%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-comfort) 80%, var(--cem-palette-comfort-x)) */
177
+ --cem-action-contextual-readonly-text: var(--cem-palette-comfort-text);
178
+
179
+ --cem-action-contextual-editable-background: color-mix(in srgb, var(--cem-palette-comfort) 90%, var(--cem-palette-comfort-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-comfort) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-comfort) 90%, var(--cem-palette-comfort-x)) */
180
+ --cem-action-contextual-editable-text: var(--cem-palette-comfort-text);
181
+
182
+ --cem-action-contextual-default-background: var(--cem-palette-comfort);/* var(--cem-palette-[emotion]) ~ var(--cem-palette-comfort) ~ var(--cem-palette-comfort) */
183
+ --cem-action-contextual-default-text: var(--cem-palette-comfort-text);
184
+
185
+ --cem-action-contextual-indeterminate-background: color-mix(in srgb, var(--cem-palette-comfort) 90%, var(--cem-palette-comfort-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-comfort) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-comfort) 90%, var(--cem-palette-comfort-x)) */
186
+ --cem-action-contextual-indeterminate-text: var(--cem-palette-comfort-text);
187
+
188
+ --cem-action-contextual-hover-background: color-mix(in srgb, var(--cem-palette-comfort) 70%, var(--cem-palette-comfort-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 70%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-comfort) 70%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-comfort) 70%, var(--cem-palette-comfort-x)) */
189
+ --cem-action-contextual-hover-text: var(--cem-palette-comfort-text);
190
+
191
+ --cem-action-contextual-active-background: color-mix(in srgb, var(--cem-palette-comfort) 25%, var(--cem-palette-comfort-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 25%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-comfort) 25%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-comfort) 25%, var(--cem-palette-comfort-x)) */
192
+ --cem-action-contextual-active-text: var(--cem-palette-comfort-text-x);
193
+
194
+ --cem-action-contextual-pending-background: color-mix(in srgb, var(--cem-palette-comfort) 5%, var(--cem-palette-comfort-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 5%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-comfort) 5%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-comfort) 5%, var(--cem-palette-comfort-x)) */
195
+ --cem-action-contextual-pending-text: var(--cem-palette-comfort-text-x);
196
+
197
+ /* endregion contextual (comfort) */
198
+
199
+
200
+ /* region alternate (enthusiasm) */
201
+
202
+
203
+ --cem-action-alternate-disabled-background: color-mix(in srgb, var(--cem-palette-enthusiasm) 30%, var(--cem-palette-conservative-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 30%, var(--cem-palette-conservative-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm) 30%, var(--cem-palette-conservative-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm) 30%, var(--cem-palette-conservative-x)) */
204
+ --cem-action-alternate-disabled-text: var(--cem-palette-conservative-text-x);
205
+
206
+ --cem-action-alternate-readonly-background: color-mix(in srgb, var(--cem-palette-enthusiasm) 80%, var(--cem-palette-enthusiasm-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 80%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm) 80%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm) 80%, var(--cem-palette-enthusiasm-x)) */
207
+ --cem-action-alternate-readonly-text: var(--cem-palette-enthusiasm-text);
208
+
209
+ --cem-action-alternate-editable-background: color-mix(in srgb, var(--cem-palette-enthusiasm) 90%, var(--cem-palette-enthusiasm-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm) 90%, var(--cem-palette-enthusiasm-x)) */
210
+ --cem-action-alternate-editable-text: var(--cem-palette-enthusiasm-text);
211
+
212
+ --cem-action-alternate-default-background: var(--cem-palette-enthusiasm);/* var(--cem-palette-[emotion]) ~ var(--cem-palette-enthusiasm) ~ var(--cem-palette-enthusiasm) */
213
+ --cem-action-alternate-default-text: var(--cem-palette-enthusiasm-text);
214
+
215
+ --cem-action-alternate-indeterminate-background: color-mix(in srgb, var(--cem-palette-enthusiasm) 90%, var(--cem-palette-enthusiasm-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm) 90%, var(--cem-palette-enthusiasm-x)) */
216
+ --cem-action-alternate-indeterminate-text: var(--cem-palette-enthusiasm-text);
217
+
218
+ --cem-action-alternate-hover-background: color-mix(in srgb, var(--cem-palette-enthusiasm) 70%, var(--cem-palette-enthusiasm-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 70%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm) 70%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm) 70%, var(--cem-palette-enthusiasm-x)) */
219
+ --cem-action-alternate-hover-text: var(--cem-palette-enthusiasm-text);
220
+
221
+ --cem-action-alternate-active-background: color-mix(in srgb, var(--cem-palette-enthusiasm) 25%, var(--cem-palette-enthusiasm-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 25%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm) 25%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm) 25%, var(--cem-palette-enthusiasm-x)) */
222
+ --cem-action-alternate-active-text: var(--cem-palette-enthusiasm-text-x);
223
+
224
+ --cem-action-alternate-pending-background: color-mix(in srgb, var(--cem-palette-enthusiasm) 5%, var(--cem-palette-enthusiasm-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 5%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm) 5%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm) 5%, var(--cem-palette-enthusiasm-x)) */
225
+ --cem-action-alternate-pending-text: var(--cem-palette-enthusiasm-text-x);
226
+
227
+ /* endregion alternate (enthusiasm) */
228
+
229
+
230
+ /* region destructive (danger) */
231
+
232
+
233
+ --cem-action-destructive-disabled-background: color-mix(in srgb, var(--cem-palette-danger) 30%, var(--cem-palette-conservative-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 30%, var(--cem-palette-conservative-x)) ~ color-mix(in srgb, var(--cem-palette-danger) 30%, var(--cem-palette-conservative-x)) ~ color-mix(in srgb, var(--cem-palette-danger) 30%, var(--cem-palette-conservative-x)) */
234
+ --cem-action-destructive-disabled-text: var(--cem-palette-conservative-text-x);
235
+
236
+ --cem-action-destructive-readonly-background: color-mix(in srgb, var(--cem-palette-danger) 80%, var(--cem-palette-danger-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 80%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-danger) 80%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-danger) 80%, var(--cem-palette-danger-x)) */
237
+ --cem-action-destructive-readonly-text: var(--cem-palette-danger-text);
238
+
239
+ --cem-action-destructive-editable-background: color-mix(in srgb, var(--cem-palette-danger) 90%, var(--cem-palette-danger-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-danger) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-danger) 90%, var(--cem-palette-danger-x)) */
240
+ --cem-action-destructive-editable-text: var(--cem-palette-danger-text);
241
+
242
+ --cem-action-destructive-default-background: var(--cem-palette-danger);/* var(--cem-palette-[emotion]) ~ var(--cem-palette-danger) ~ var(--cem-palette-danger) */
243
+ --cem-action-destructive-default-text: var(--cem-palette-danger-text);
244
+
245
+ --cem-action-destructive-indeterminate-background: color-mix(in srgb, var(--cem-palette-danger) 90%, var(--cem-palette-danger-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-danger) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-danger) 90%, var(--cem-palette-danger-x)) */
246
+ --cem-action-destructive-indeterminate-text: var(--cem-palette-danger-text);
247
+
248
+ --cem-action-destructive-hover-background: color-mix(in srgb, var(--cem-palette-danger) 70%, var(--cem-palette-danger-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 70%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-danger) 70%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-danger) 70%, var(--cem-palette-danger-x)) */
249
+ --cem-action-destructive-hover-text: var(--cem-palette-danger-text);
250
+
251
+ --cem-action-destructive-active-background: color-mix(in srgb, var(--cem-palette-danger) 25%, var(--cem-palette-danger-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 25%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-danger) 25%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-danger) 25%, var(--cem-palette-danger-x)) */
252
+ --cem-action-destructive-active-text: var(--cem-palette-danger-text-x);
253
+
254
+ --cem-action-destructive-pending-background: color-mix(in srgb, var(--cem-palette-danger) 5%, var(--cem-palette-danger-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 5%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-danger) 5%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-danger) 5%, var(--cem-palette-danger-x)) */
255
+ --cem-action-destructive-pending-text: var(--cem-palette-danger-text-x);
256
+
257
+ /* endregion destructive (danger) */
258
+
259
+
260
+ /* region zebra base: anchor all stripes to surface (§8.2) */
261
+ --cem-zebra-color-0: var(--cem-palette-comfort);
262
+ --cem-zebra-color-1: var(--cem-palette-comfort);
263
+ --cem-zebra-color-2: var(--cem-palette-comfort);
264
+ --cem-zebra-color-3: var(--cem-palette-comfort);
265
+ /* endregion zebra base */
266
+
267
+ background-color: var(--cem-palette-comfort);
268
+ color: var(--cem-palette-comfort-text);
269
+ }/* endregion common for cem themes */
270
+
271
+ .cem-theme-light, [data-theme="cem-theme-light"],
272
+ .cem-theme-contrast-light, [data-theme="cem-theme-contrast-light"]
273
+ {
274
+ color-scheme: light;
275
+ }
276
+
277
+ .cem-theme-dark, [data-theme="cem-theme-dark"],
278
+ .cem-theme-contrast-dark, [data-theme="cem-theme-contrast-dark"]
279
+ {
280
+ color-scheme: dark;
281
+ }
282
+
283
+ /* region zebra state: light/dark (§8.2 cem-zebra-mode-mapping) */
284
+
285
+ .cem-theme-light, [data-theme="cem-theme-light"] {
286
+ [focus], :focus, :focus-visible, :focus-within, .focus {
287
+ --cem-zebra-color-1: var(--cem-palette-trust-x);
288
+ }
289
+ [target], :target, .target {
290
+ --cem-zebra-color-2: var(--cem-color-orange-l);
291
+ }
292
+ [selected], .selected {
293
+ --cem-zebra-color-3: var(--cem-palette-creativity-x);
294
+ }
295
+ }
296
+ .cem-theme-dark, [data-theme="cem-theme-dark"] {
297
+ [focus], :focus, :focus-visible, :focus-within, .focus {
298
+ --cem-zebra-color-1: var(--cem-palette-comfort-x);
299
+ }
300
+ [target], :target, .target {
301
+ --cem-zebra-color-2: var(--cem-palette-creativity);
302
+ }
303
+ [selected], .selected {
304
+ --cem-zebra-color-3: var(--cem-palette-calm-x);
305
+ }
306
+ }
307
+ /* endregion zebra state: light/dark */
308
+
309
+ /* region zebra state: contrast (§8.2 cem-zebra-mode-mapping) */
310
+
311
+ .cem-theme-contrast-light, [data-theme="cem-theme-contrast-light"] {
312
+ [focus], :focus, :focus-visible, :focus-within, .focus {
313
+ --cem-zebra-color-1: var(--cem-palette-trust-x);
314
+ }
315
+ [target], :target, .target {
316
+ --cem-zebra-color-2: var(--cem-color-orange-l);
317
+ }
318
+ [selected], .selected {
319
+ --cem-zebra-color-3: var(--cem-palette-creativity-x);
320
+ }
321
+ }
322
+ .cem-theme-contrast-dark, [data-theme="cem-theme-contrast-dark"] {
323
+ [focus], :focus, :focus-visible, :focus-within, .focus {
324
+ --cem-zebra-color-1: var(--cem-palette-comfort-x);
325
+ }
326
+ [target], :target, .target {
327
+ --cem-zebra-color-2: var(--cem-palette-enthusiasm-x);
328
+ }
329
+ [selected], .selected {
330
+ --cem-zebra-color-3: var(--cem-palette-trust);
331
+ }
332
+ }
333
+ /* endregion zebra state: contrast */
334
+
335
+ /* override for native */
336
+ .cem-theme-native,[data-theme="cem-theme-native"]{
337
+ --cem-palette-comfort: Canvas;
338
+ --cem-palette-comfort-x: CanvasText;
339
+ --cem-palette-comfort-text: CanvasText;
340
+ --cem-palette-comfort-text-x: Canvas;
341
+ --cem-palette-calm: cyan;
342
+ --cem-palette-calm-x: rgb(0, 120, 120);
343
+ --cem-palette-calm-text: black;
344
+ --cem-palette-calm-text-x: white;
345
+ --cem-palette-trust: color-mix(in srgb, Highlight 70%, black);
346
+ --cem-palette-trust-x: light-dark(var(--cem-color-visitedtext-30-black), var(--cem-color-visitedtext-30-white) );
347
+ --cem-palette-trust-text: HighlightText;
348
+ --cem-palette-trust-text-x: light-dark(Canvas, Canvas );
349
+ --cem-palette-enthusiasm: Mark;
350
+ --cem-palette-enthusiasm-x: light-dark(var(--cem-color-mark-30-black), var(--cem-color-mark-30-white) );
351
+ --cem-palette-enthusiasm-text: MarkText;
352
+ --cem-palette-enthusiasm-text-x: Canvas;
353
+ --cem-palette-creativity: ButtonFace;
354
+ --cem-palette-creativity-x: light-dark(var(--cem-color-canvastext-30-purple), var(--cem-color-canvastext-30-lightpink) );
355
+ --cem-palette-creativity-text: CanvasText;
356
+ --cem-palette-creativity-text-x: Canvas;
357
+ --cem-palette-danger: light-dark(var(--cem-color-red-l), var(--cem-color-red-d) );
358
+ --cem-palette-danger-x: light-dark(var(--cem-color-red-30-black), var(--cem-color-red-30-white) );
359
+ --cem-palette-danger-text: light-dark(Canvas, CanvasText );
360
+ --cem-palette-danger-text-x: Canvas;
361
+ --cem-palette-conservative: ButtonFace;
362
+ --cem-palette-conservative-x: CanvasText;
363
+ --cem-palette-conservative-text: CanvasText;
364
+ --cem-palette-conservative-text-x: Canvas;
365
+
366
+ /* region zebra native overrides */
367
+ [focus], :focus, :focus-visible, :focus-within, .focus {
368
+ --cem-zebra-color-1: CanvasText;
369
+ }
370
+ [target], :target, .target {
371
+ --cem-zebra-color-2: Mark;
372
+ }
373
+ [selected], .selected {
374
+ --cem-zebra-color-3: SelectedItem;
375
+ }
376
+ /* endregion zebra native */
377
+ }/* native */
378
+
379
+ background-color: var(--cem-palette-comfort);
380
+ color: var(--cem-palette-comfort-text);
381
+ }/* root */
382
+
383
+ /* cem-dimension.css */
384
+
385
+ :root {
386
+ /* region dimension scale: cem-dim-[size] */
387
+ --cem-dim-xx-small: 0.25rem;
388
+ --cem-dim-x-small: 0.5rem;
389
+ --cem-dim-small: 0.75rem;
390
+ --cem-dim-medium: 1rem;
391
+ --cem-dim-large: 1.5rem;
392
+ --cem-dim-x-large: 2rem;
393
+ --cem-dim-xx-large: 4rem;
394
+ --cem-dim-xxx-large: 8rem;
395
+
396
+ /* endregion dimension scale */
397
+
398
+ /* region relationship gaps: cem-gap-[level] */
399
+ --cem-gap-related: var(--cem-dim-x-small);
400
+ --cem-gap-group: var(--cem-dim-small);
401
+ --cem-gap-block: var(--cem-dim-medium);
402
+ --cem-gap-section: var(--cem-dim-large);
403
+ --cem-gap-page: var(--cem-dim-x-large);
404
+
405
+ /* endregion gaps */
406
+
407
+ /* region insets: cem-inset-[level] */
408
+ --cem-inset-control: var(--cem-dim-x-small);
409
+ --cem-inset-container: var(--cem-dim-medium);
410
+ --cem-inset-surface: var(--cem-dim-large);
411
+
412
+ /* endregion insets */
413
+
414
+ /* region reading rhythm: cem-rhythm-reading-[level] */
415
+ --cem-rhythm-reading-paragraph: 0.75em;
416
+ --cem-rhythm-reading-section: var(--cem-dim-large);
417
+
418
+ /* endregion reading rhythm */
419
+
420
+ /* region data rhythm: cem-rhythm-data-[level] */
421
+ --cem-rhythm-data-row: var(--cem-dim-x-small);
422
+ --cem-rhythm-data-group: var(--cem-dim-medium);
423
+
424
+ /* endregion data rhythm */
425
+
426
+ /* region layout tokens: cem-layout-[purpose] (excludes deprecated) */
427
+ --cem-layout-stack-gap: var(--cem-gap-block);
428
+ --cem-layout-cluster-gap: var(--cem-gap-related);
429
+ --cem-layout-gutter: var(--cem-dim-medium);
430
+ --cem-layout-gutter-wide: var(--cem-dim-x-large);
431
+ --cem-layout-gutter-max: var(--cem-dim-xx-large);
432
+ --cem-layout-stack-tight: var(--cem-gap-related);
433
+ --cem-layout-stack-loose: var(--cem-gap-section);
434
+
435
+ /* endregion layout tokens */
436
+ }
437
+
438
+ /* region spacing mode: dense */
439
+ :root[data-cem-spacing="dense"] {
440
+ --cem-gap-related: var(--cem-dim-x-small);
441
+ --cem-gap-group: var(--cem-dim-x-small);
442
+ --cem-gap-block: var(--cem-dim-small);
443
+ --cem-gap-section: var(--cem-dim-medium);
444
+ --cem-gap-page: var(--cem-dim-large);
445
+ --cem-inset-control: var(--cem-dim-x-small);
446
+ --cem-inset-container: var(--cem-dim-small);
447
+ --cem-inset-surface: var(--cem-dim-medium);
448
+ --cem-layout-gutter: var(--cem-dim-small);
449
+ --cem-layout-gutter-wide: var(--cem-dim-large);
450
+ --cem-layout-gutter-max: var(--cem-dim-x-large);
451
+ --cem-rhythm-reading-paragraph: 0.6em;
452
+ --cem-rhythm-reading-section: var(--cem-dim-medium);
453
+ --cem-rhythm-data-row: var(--cem-dim-xx-small);
454
+ --cem-rhythm-data-group: var(--cem-dim-small);
455
+
456
+ }
457
+ /* endregion spacing mode: dense */
458
+
459
+ /* region spacing mode: sparse */
460
+ :root[data-cem-spacing="sparse"] {
461
+ --cem-gap-related: var(--cem-dim-small);
462
+ --cem-gap-group: var(--cem-dim-medium);
463
+ --cem-gap-block: var(--cem-dim-large);
464
+ --cem-gap-section: var(--cem-dim-x-large);
465
+ --cem-gap-page: var(--cem-dim-xx-large);
466
+ --cem-inset-control: var(--cem-dim-small);
467
+ --cem-inset-container: var(--cem-dim-large);
468
+ --cem-inset-surface: var(--cem-dim-x-large);
469
+ --cem-layout-gutter: var(--cem-dim-large);
470
+ --cem-layout-gutter-wide: var(--cem-dim-xx-large);
471
+ --cem-layout-gutter-max: var(--cem-dim-xxx-large);
472
+ --cem-rhythm-reading-paragraph: 1em;
473
+ --cem-rhythm-reading-section: var(--cem-dim-x-large);
474
+ --cem-rhythm-data-row: var(--cem-dim-small);
475
+ --cem-rhythm-data-group: var(--cem-dim-large);
476
+
477
+ }
478
+ /* endregion spacing mode: sparse */
479
+
480
+ /* cem-breakpoints.css */
481
+
482
+ /* ── Block A — CSS custom property reference values ─────────────────────── */
483
+
484
+ :root {
485
+ /* region width basis: epsilon + cem-bp-width-[range]-[min|max] */
486
+ --cem-bp-epsilon: 0.01px;
487
+ --cem-bp-epsilon-css: 0.01px;
488
+ --cem-bp-epsilon-mui: 0.05px;
489
+ --cem-bp-width-compact-min: 0px;
490
+ --cem-bp-width-compact-max: calc(var(--cem-bp-width-medium-min) - var(--cem-bp-epsilon));
491
+ --cem-bp-width-medium-min: 600px;
492
+ --cem-bp-width-medium-max: calc(var(--cem-bp-width-expanded-min) - var(--cem-bp-epsilon));
493
+ --cem-bp-width-expanded-min: 840px;
494
+ --cem-bp-width-expanded-max: calc(var(--cem-bp-width-large-min) - var(--cem-bp-epsilon));
495
+ --cem-bp-width-large-min: 1200px;
496
+ --cem-bp-width-large-max: calc(var(--cem-bp-width-xlarge-min) - var(--cem-bp-epsilon));
497
+ --cem-bp-width-xlarge-min: 1600px;
498
+
499
+ /* endregion width basis */
500
+
501
+ /* region height basis: cem-bp-height-[range]-[min|max] */
502
+ --cem-bp-height-compact-min: 0px;
503
+ --cem-bp-height-compact-max: calc(var(--cem-bp-height-medium-min) - var(--cem-bp-epsilon));
504
+ --cem-bp-height-medium-min: 480px;
505
+ --cem-bp-height-medium-max: calc(var(--cem-bp-height-expanded-min) - var(--cem-bp-epsilon));
506
+ --cem-bp-height-expanded-min: 900px;
507
+
508
+ /* endregion height basis */
509
+
510
+ /* region container query reference values: cem-cq-width-[range]-[min|max] */
511
+ /* Consumer must provide container-type: inline-size (see R-D1x-WRAP) */
512
+ --cem-cq-width-compact-max: calc(var(--cem-cq-width-medium-min) - var(--cem-bp-epsilon));
513
+ --cem-cq-width-medium-min: 600px;
514
+ --cem-cq-width-medium-max: calc(var(--cem-cq-width-expanded-min) - var(--cem-bp-epsilon));
515
+ --cem-cq-width-expanded-min: 840px;
516
+ --cem-cq-width-expanded-max: calc(var(--cem-cq-width-large-min) - var(--cem-bp-epsilon));
517
+ --cem-cq-width-large-min: 1200px;
518
+
519
+ /* endregion container query reference values */
520
+ }
521
+
522
+ /* ── Block B — @media active-width helpers ───────────────────────────────── */
523
+ /* Sets --cem-bp-active-width; read via JS: getComputedStyle(root).getPropertyValue('--cem-bp-active-width').trim() */
524
+
525
+
526
+ @media (max-width: 599.99px) {
527
+ :root {
528
+ --cem-bp-active-width: compact;
529
+ }
530
+ }
531
+
532
+ @media (min-width: 600px) and (max-width: 839.99px) {
533
+ :root {
534
+ --cem-bp-active-width: medium;
535
+ }
536
+ }
537
+
538
+ @media (min-width: 840px) and (max-width: 1199.99px) {
539
+ :root {
540
+ --cem-bp-active-width: expanded;
541
+ }
542
+ }
543
+
544
+ @media (min-width: 1200px) and (max-width: 1599.99px) {
545
+ :root {
546
+ --cem-bp-active-width: large;
547
+ }
548
+ }
549
+
550
+ @media (min-width: 1600px) {
551
+ :root {
552
+ --cem-bp-active-width: xlarge;
553
+ }
554
+ }
555
+
556
+
557
+ /* Height helpers (informative — most apps adapt on width only) */
558
+
559
+ @media (max-height: 479.99px) {
560
+ :root {
561
+ --cem-bp-active-height: compact;
562
+ }
563
+ }
564
+
565
+ @media (min-height: 480px) and (max-height: 899.99px) {
566
+ :root {
567
+ --cem-bp-active-height: medium;
568
+ }
569
+ }
570
+
571
+ @media (min-height: 900px) {
572
+ :root {
573
+ --cem-bp-active-height: expanded;
574
+ }
575
+ }
576
+
577
+
578
+ /* ── Block C — @container helpers ────────────────────────────────────────── */
579
+ /* Deferred: CEM does not emit @container selectors (R-D1x-WRAP). */
580
+ /* Use --cem-cq-width-* reference values in your own @container rules. */
581
+
582
+ /* cem-coupling.css */
583
+
584
+ :root {
585
+ /* region coupling minimums — mode-invariant safety anchors */
586
+ --cem-coupling-zone-min: 3rem;
587
+ --cem-coupling-guard-min: 0.5rem;
588
+ --cem-coupling-halo: 0.25rem;
589
+
590
+ /* endregion coupling minimums */
591
+ }
592
+
593
+ /* region coupling mode: forgiving — halo policy only (visuals owned by D2c Controls) */
594
+ :root[data-cem-coupling="forgiving"] {
595
+ --cem-coupling-halo: 0.125rem;
596
+
597
+ }
598
+ /* endregion coupling mode: forgiving */
599
+
600
+ /* region coupling mode: compact — halo policy only (visuals owned by D2c Controls) */
601
+ :root[data-cem-coupling="compact"] {
602
+ --cem-coupling-halo: 0.375rem;
603
+
604
+ }
605
+ /* endregion coupling mode: compact */
606
+
607
+ /* cem-controls.css */
608
+
609
+ :root {
610
+ /* region control geometry — balanced (default) baseline */
611
+ --cem-control-height: 2.5rem;
612
+ --cem-control-padding-x: 0.75rem;
613
+ --cem-control-padding-y: 0.5rem;
614
+ --cem-icon-button-size: var(--cem-coupling-zone-min);
615
+ --cem-icon-button-icon-size: 1.25rem;
616
+ --cem-list-row-height: 3rem;
617
+ --cem-menu-row-height: 3rem;
618
+ --cem-table-row-height: 2.5rem;
619
+
620
+ /* endregion control geometry */
621
+ }
622
+
623
+ /* region coupling mode: forgiving — larger visual geometry */
624
+ :root[data-cem-coupling="forgiving"] {
625
+ --cem-control-height: 2.75rem;
626
+ --cem-control-padding-x: 1rem;
627
+ --cem-control-padding-y: 0.625rem;
628
+ --cem-list-row-height: 3.25rem;
629
+ --cem-menu-row-height: 3.25rem;
630
+
631
+ }
632
+ /* endregion coupling mode: forgiving */
633
+
634
+ /* region coupling mode: compact — smaller visual geometry */
635
+ :root[data-cem-coupling="compact"] {
636
+ --cem-control-height: 2.25rem;
637
+ --cem-control-padding-x: 0.625rem;
638
+ --cem-control-padding-y: 0.375rem;
639
+ --cem-list-row-height: 2.75rem;
640
+ --cem-menu-row-height: 2.75rem;
641
+
642
+ }
643
+ /* endregion coupling mode: compact */
644
+
645
+ /* cem-shape.css */
646
+
647
+ :root {
648
+ /* region bend basis — sharp / smooth / round / circle plus active alias */
649
+ --cem-bend-sharp: 0;
650
+ --cem-bend-smooth: var(--cem-dim-x-small);
651
+ --cem-bend-round: calc(var(--cem-shape-height, var(--cem-control-height)) / 2);
652
+ --cem-bend-circle: 50%;
653
+ --cem-bend: var(--cem-bend-smooth);
654
+
655
+ /* endregion bend basis */
656
+
657
+ /* region semantic endpoints — role-first product contract */
658
+ --cem-bend-control: var(--cem-bend);
659
+ --cem-bend-surface: var(--cem-dim-small);
660
+ --cem-bend-overlay: var(--cem-bend);
661
+ --cem-bend-field: var(--cem-bend-control);
662
+ --cem-bend-modal: calc(var(--cem-dim-large) + var(--cem-dim-xx-small));
663
+ --cem-bend-control-round-ends: var(--cem-bend-round);
664
+ --cem-bend-media: var(--cem-bend);
665
+ --cem-bend-avatar: var(--cem-bend-circle);
666
+
667
+ /* endregion semantic endpoints */
668
+
669
+ /* region pattern tokens — asymmetric attachment */
670
+ --cem-bend-attached-edge: var(--cem-bend-sharp);
671
+ --cem-bend-free-edge: var(--cem-bend-modal);
672
+
673
+ /* endregion pattern tokens */
674
+
675
+ /* region action component bindings — geometry owned by D3 */
676
+ --cem-action-border-radius: var(--cem-bend-control);
677
+
678
+ /* endregion action component bindings */
679
+ }
680
+
681
+ /* region shape mode: sharp — technical, precise brand expression */
682
+ :root[data-cem-shape="sharp"] {
683
+ --cem-bend: var(--cem-bend-sharp);
684
+ --cem-bend-control: var(--cem-bend);
685
+ --cem-bend-surface: var(--cem-bend-smooth);
686
+ --cem-bend-overlay: var(--cem-bend-smooth);
687
+
688
+ }
689
+ /* endregion shape mode: sharp */
690
+
691
+ /* region shape mode: round — consumer, welcoming brand expression */
692
+ :root[data-cem-shape="round"] {
693
+ --cem-bend: var(--cem-bend-smooth);
694
+ --cem-bend-surface: var(--cem-dim-medium);
695
+ --cem-bend-overlay: var(--cem-bend-smooth);
696
+
697
+ }
698
+ /* endregion shape mode: round */
699
+
700
+ /* cem-layering.css */
701
+
702
+ :root {
703
+ /* region basis rungs — signed depth ladder as box-shadow recipes (NOT z-index) */
704
+ --cem-recess-2: inset 0 2px 4px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(0, 0, 0, 0.04);
705
+ --cem-recess-1: inset 0 1px 2px rgba(0, 0, 0, 0.04);
706
+ --cem-elevation-0: none;
707
+ --cem-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
708
+ --cem-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
709
+ --cem-elevation-3: 0 4px 8px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.08);
710
+ --cem-elevation-4: 0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.10);
711
+
712
+ /* endregion basis rungs */
713
+
714
+ /* region semantic endpoints — required product-facing contract */
715
+ --cem-layer-back: var(--cem-recess-1);
716
+ --cem-layer-base: var(--cem-elevation-0);
717
+ --cem-layer-work: var(--cem-elevation-1);
718
+ --cem-layer-overlay: var(--cem-elevation-3);
719
+ --cem-layer-command: var(--cem-elevation-4);
720
+
721
+ /* endregion semantic endpoints */
722
+
723
+ /* region optional semantic endpoints — back-deep / work-floating */
724
+ --cem-layer-back-deep: var(--cem-recess-2);
725
+ --cem-layer-work-floating: var(--cem-elevation-2);
726
+
727
+ /* endregion optional semantic endpoints */
728
+ }
729
+
730
+ /* region forced-colors fallback — collapse rungs; tier signal carried by D5 contour and spatial isolation */
731
+ @media (forced-colors: active) {
732
+ :root {
733
+ --cem-recess-2: none;
734
+ --cem-recess-1: none;
735
+ --cem-elevation-0: none;
736
+ --cem-elevation-1: none;
737
+ --cem-elevation-2: none;
738
+ --cem-elevation-3: none;
739
+ --cem-elevation-4: none;
740
+
741
+ }
742
+ }
743
+ /* endregion forced-colors fallback */
744
+
745
+ /* cem-stroke.css */
746
+
747
+ :root {
748
+ /* region stroke basis — none / hair / standard / strong */
749
+ --cem-stroke-none: 0px;
750
+ --cem-stroke-hair: 1px;
751
+ --cem-stroke-standard: 2px;
752
+ --cem-stroke-strong: 3px;
753
+
754
+ /* endregion stroke basis */
755
+
756
+ /* region semantic endpoints — boundary / divider / focus / selected / target / indicator-offset */
757
+ --cem-stroke-boundary: var(--cem-stroke-hair);
758
+ --cem-stroke-boundary-strong: var(--cem-stroke-standard);
759
+ --cem-stroke-divider: var(--cem-stroke-hair);
760
+ --cem-stroke-grid: var(--cem-stroke-divider);
761
+ --cem-stroke-focus: var(--cem-stroke-standard);
762
+ --cem-stroke-selected: var(--cem-stroke-standard);
763
+ --cem-stroke-target: var(--cem-stroke-standard);
764
+ --cem-stroke-indicator-offset: 2px;
765
+
766
+ /* endregion semantic endpoints */
767
+
768
+ /* region zebra pattern geometry — angle only (strip-size and colors owned by D0) */
769
+ --cem-zebra-angle: 45deg;
770
+
771
+ /* endregion zebra pattern geometry */
772
+
773
+ /* region ring recipes — box-shadow composition referencing D0 zebra tokens */
774
+ --cem-ring-zebra-3: 0 0 0 calc(1 * var(--cem-zebra-strip-size)) var(--cem-zebra-color-1), 0 0 0 calc(2 * var(--cem-zebra-strip-size)) var(--cem-zebra-color-2), 0 0 0 calc(3 * var(--cem-zebra-strip-size)) var(--cem-zebra-color-3);
775
+ --cem-ring-zebra-4: 0 0 0 calc(1 * var(--cem-zebra-strip-size)) var(--cem-zebra-color-0), 0 0 0 calc(2 * var(--cem-zebra-strip-size)) var(--cem-zebra-color-1), 0 0 0 calc(3 * var(--cem-zebra-strip-size)) var(--cem-zebra-color-2), 0 0 0 calc(4 * var(--cem-zebra-strip-size)) var(--cem-zebra-color-3);
776
+
777
+ /* endregion ring recipes */
778
+ }
779
+
780
+ /* region forced-colors fallback — collapse rings to a single Highlight outline (Principle P4) */
781
+ @media (forced-colors: active) {
782
+ :root {
783
+ --cem-ring-zebra-3: 0 0 0 var(--cem-stroke-focus) Highlight;
784
+ --cem-ring-zebra-4: 0 0 0 var(--cem-stroke-focus) Highlight;
785
+
786
+ }
787
+ }
788
+ /* endregion forced-colors fallback */
789
+
790
+ /* cem-voice-fonts-typography.css */
791
+
792
+ :root {
793
+ /* region 1) fontography — semantic family stacks */
794
+ --cem-fontography-reading-family: "Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
795
+ --cem-fontography-ui-family: var(--cem-fontography-reading-family);
796
+ --cem-fontography-script-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", "Noto Sans Mono", monospace;
797
+ --cem-fontography-initialism-family: "Barlow Semi Condensed", "Roboto Condensed", "Arial Narrow", var(--cem-fontography-ui-family);
798
+ --cem-fontography-brand-family: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
799
+
800
+ /* endregion fontography */
801
+
802
+ /* region 2) thickness — 7-step weight scale */
803
+ --cem-thickness-xx-light: 100;
804
+ --cem-thickness-x-light: 200;
805
+ --cem-thickness-light: 300;
806
+ --cem-thickness-normal: 400;
807
+ --cem-thickness-bold: 700;
808
+ --cem-thickness-x-bold: 800;
809
+ --cem-thickness-xx-bold: 900;
810
+
811
+ /* endregion thickness */
812
+
813
+ /* region 3) size — 7-step rem-based size scale */
814
+ --cem-typography-size-xxs: 0.75rem;
815
+ --cem-typography-size-xs: 0.8125rem;
816
+ --cem-typography-size-s: 0.875rem;
817
+ --cem-typography-size-m: 1rem;
818
+ --cem-typography-size-l: 1.125rem;
819
+ --cem-typography-size-xl: 1.375rem;
820
+ --cem-typography-size-xxl: 1.75rem;
821
+
822
+ /* endregion size */
823
+
824
+ /* region 4) line-height primitives */
825
+ --cem-typography-line-height-reading: 1.55;
826
+ --cem-typography-line-height-ui: 1.2;
827
+ --cem-typography-line-height-script: 1.4;
828
+ --cem-typography-line-height-badge: 1;
829
+
830
+ /* endregion line-height */
831
+
832
+ /* region 5) letter-spacing primitives */
833
+ --cem-typography-letter-spacing-reading: normal;
834
+ --cem-typography-letter-spacing-ui: 0.01em;
835
+ --cem-typography-letter-spacing-caps: 0.08em;
836
+
837
+ /* endregion letter-spacing */
838
+
839
+ /* region 6) typography feature policies */
840
+ --cem-typography-feature-numeric-data: tabular-nums lining-nums;
841
+ --cem-typography-feature-ligatures-script: none;
842
+ --cem-typography-feature-optical-sizing: auto;
843
+
844
+ /* endregion feature policies */
845
+
846
+ /* region 7) reading ergonomics */
847
+ --cem-typography-reading-measure-max: 65ch;
848
+ --cem-typography-reading-paragraph-gap: 0.75em;
849
+
850
+ /* endregion reading ergonomics */
851
+
852
+ /* region 8) voice — ink-thickness (drives font-weight) */
853
+ --cem-voice-whisper-ink-thickness: var(--cem-thickness-xx-light);
854
+ --cem-voice-soft-ink-thickness: var(--cem-thickness-x-light);
855
+ --cem-voice-gentle-ink-thickness: var(--cem-thickness-light);
856
+ --cem-voice-regular-ink-thickness: var(--cem-thickness-normal);
857
+ --cem-voice-firm-ink-thickness: var(--cem-thickness-bold);
858
+ --cem-voice-strong-ink-thickness: var(--cem-thickness-x-bold);
859
+ --cem-voice-loud-ink-thickness: var(--cem-thickness-xx-bold);
860
+
861
+ /* endregion voice ink-thickness */
862
+
863
+ /* region 9) voice — icon-stroke multipliers */
864
+ --cem-voice-whisper-icon-stroke-multiplier: 0.90;
865
+ --cem-voice-soft-icon-stroke-multiplier: 0.95;
866
+ --cem-voice-gentle-icon-stroke-multiplier: 1.00;
867
+ --cem-voice-regular-icon-stroke-multiplier: 1.00;
868
+ --cem-voice-firm-icon-stroke-multiplier: 1.10;
869
+ --cem-voice-strong-icon-stroke-multiplier: 1.20;
870
+ --cem-voice-loud-icon-stroke-multiplier: 1.30;
871
+
872
+ /* endregion voice icon-stroke */
873
+
874
+ /* region 10) voice — speech-volume (TTS adapter input, not screen-reader) */
875
+ --cem-voice-whisper-speech-volume: 0.65;
876
+ --cem-voice-soft-speech-volume: 0.75;
877
+ --cem-voice-gentle-speech-volume: 0.85;
878
+ --cem-voice-regular-speech-volume: 1.00;
879
+ --cem-voice-firm-speech-volume: 1.00;
880
+ --cem-voice-strong-speech-volume: 1.00;
881
+ --cem-voice-loud-speech-volume: 1.00;
882
+
883
+ /* endregion voice speech-volume */
884
+
885
+ /* region 11) voice — speech-rate */
886
+ --cem-voice-whisper-speech-rate: 1.00;
887
+ --cem-voice-soft-speech-rate: 1.00;
888
+ --cem-voice-gentle-speech-rate: 1.00;
889
+ --cem-voice-regular-speech-rate: 1.00;
890
+ --cem-voice-firm-speech-rate: 0.98;
891
+ --cem-voice-strong-speech-rate: 0.96;
892
+ --cem-voice-loud-speech-rate: 0.94;
893
+
894
+ /* endregion voice speech-rate */
895
+
896
+ /* region 12) voice — speech-pitch */
897
+ --cem-voice-whisper-speech-pitch: 0.95;
898
+ --cem-voice-soft-speech-pitch: 0.98;
899
+ --cem-voice-gentle-speech-pitch: 1.00;
900
+ --cem-voice-regular-speech-pitch: 1.00;
901
+ --cem-voice-firm-speech-pitch: 1.03;
902
+ --cem-voice-strong-speech-pitch: 1.06;
903
+ --cem-voice-loud-speech-pitch: 1.10;
904
+
905
+ /* endregion voice speech-pitch */
906
+
907
+ /* region 13) voice — ssml-emphasis */
908
+ --cem-voice-whisper-ssml-emphasis: reduced;
909
+ --cem-voice-soft-ssml-emphasis: reduced;
910
+ --cem-voice-gentle-ssml-emphasis: moderate;
911
+ --cem-voice-regular-ssml-emphasis: moderate;
912
+ --cem-voice-firm-ssml-emphasis: moderate;
913
+ --cem-voice-strong-ssml-emphasis: strong;
914
+ --cem-voice-loud-ssml-emphasis: strong;
915
+
916
+ /* endregion voice ssml-emphasis */
917
+
918
+ /* region 14) semantic role endpoints — 8 roles × ~9-10 properties each */
919
+ --cem-typography-reading-font-family: var(--cem-fontography-reading-family);
920
+ --cem-typography-reading-font-size: var(--cem-typography-size-m);
921
+ --cem-typography-reading-line-height: var(--cem-typography-line-height-reading);
922
+ --cem-typography-reading-letter-spacing: var(--cem-typography-letter-spacing-reading);
923
+ --cem-typography-reading-font-weight: var(--cem-voice-regular-ink-thickness);
924
+ --cem-typography-reading-speech-volume: var(--cem-voice-regular-speech-volume);
925
+ --cem-typography-reading-speech-rate: var(--cem-voice-regular-speech-rate);
926
+ --cem-typography-reading-speech-pitch: var(--cem-voice-regular-speech-pitch);
927
+ --cem-typography-reading-ssml-emphasis: var(--cem-voice-regular-ssml-emphasis);
928
+ --cem-typography-ui-font-family: var(--cem-fontography-ui-family);
929
+ --cem-typography-ui-font-size: var(--cem-typography-size-m);
930
+ --cem-typography-ui-line-height: var(--cem-typography-line-height-ui);
931
+ --cem-typography-ui-letter-spacing: var(--cem-typography-letter-spacing-ui);
932
+ --cem-typography-ui-font-weight: var(--cem-voice-gentle-ink-thickness);
933
+ --cem-typography-ui-speech-volume: var(--cem-voice-gentle-speech-volume);
934
+ --cem-typography-ui-speech-rate: var(--cem-voice-gentle-speech-rate);
935
+ --cem-typography-ui-speech-pitch: var(--cem-voice-gentle-speech-pitch);
936
+ --cem-typography-ui-ssml-emphasis: var(--cem-voice-gentle-ssml-emphasis);
937
+ --cem-typography-tag-font-family: var(--cem-fontography-ui-family);
938
+ --cem-typography-tag-font-size: var(--cem-typography-size-s);
939
+ --cem-typography-tag-line-height: var(--cem-typography-line-height-ui);
940
+ --cem-typography-tag-letter-spacing: var(--cem-typography-letter-spacing-ui);
941
+ --cem-typography-tag-font-weight: var(--cem-voice-firm-ink-thickness);
942
+ --cem-typography-tag-speech-volume: var(--cem-voice-firm-speech-volume);
943
+ --cem-typography-tag-speech-rate: var(--cem-voice-firm-speech-rate);
944
+ --cem-typography-tag-speech-pitch: var(--cem-voice-firm-speech-pitch);
945
+ --cem-typography-tag-ssml-emphasis: var(--cem-voice-firm-ssml-emphasis);
946
+ --cem-typography-script-font-family: var(--cem-fontography-script-family);
947
+ --cem-typography-script-font-size: var(--cem-typography-size-s);
948
+ --cem-typography-script-line-height: var(--cem-typography-line-height-script);
949
+ --cem-typography-script-letter-spacing: normal;
950
+ --cem-typography-script-font-weight: var(--cem-voice-regular-ink-thickness);
951
+ --cem-typography-script-font-variant-ligatures: var(--cem-typography-feature-ligatures-script);
952
+ --cem-typography-script-speech-volume: var(--cem-voice-regular-speech-volume);
953
+ --cem-typography-script-speech-rate: var(--cem-voice-gentle-speech-rate);
954
+ --cem-typography-script-speech-pitch: var(--cem-voice-gentle-speech-pitch);
955
+ --cem-typography-script-ssml-emphasis: var(--cem-voice-gentle-ssml-emphasis);
956
+ --cem-typography-data-font-family: var(--cem-fontography-ui-family);
957
+ --cem-typography-data-font-size: var(--cem-typography-size-m);
958
+ --cem-typography-data-line-height: var(--cem-typography-line-height-ui);
959
+ --cem-typography-data-letter-spacing: var(--cem-typography-letter-spacing-ui);
960
+ --cem-typography-data-font-weight: var(--cem-voice-regular-ink-thickness);
961
+ --cem-typography-data-font-variant-numeric: var(--cem-typography-feature-numeric-data);
962
+ --cem-typography-data-speech-volume: var(--cem-voice-regular-speech-volume);
963
+ --cem-typography-data-speech-rate: var(--cem-voice-firm-speech-rate);
964
+ --cem-typography-data-speech-pitch: var(--cem-voice-regular-speech-pitch);
965
+ --cem-typography-data-ssml-emphasis: var(--cem-voice-regular-ssml-emphasis);
966
+ --cem-typography-initialism-font-family: var(--cem-fontography-initialism-family);
967
+ --cem-typography-initialism-font-size: var(--cem-typography-size-s);
968
+ --cem-typography-initialism-line-height: var(--cem-typography-line-height-badge);
969
+ --cem-typography-initialism-letter-spacing: var(--cem-typography-letter-spacing-caps);
970
+ --cem-typography-initialism-font-weight: var(--cem-voice-firm-ink-thickness);
971
+ --cem-typography-initialism-text-transform: uppercase;
972
+ --cem-typography-initialism-speech-volume: var(--cem-voice-firm-speech-volume);
973
+ --cem-typography-initialism-speech-rate: var(--cem-voice-firm-speech-rate);
974
+ --cem-typography-initialism-speech-pitch: var(--cem-voice-firm-speech-pitch);
975
+ --cem-typography-initialism-ssml-emphasis: var(--cem-voice-firm-ssml-emphasis);
976
+ --cem-typography-iconized-font-family: var(--cem-fontography-initialism-family);
977
+ --cem-typography-iconized-font-size: calc(var(--cem-typography-size-m) * 2);
978
+ --cem-typography-iconized-line-height: var(--cem-typography-line-height-badge);
979
+ --cem-typography-iconized-letter-spacing: var(--cem-typography-letter-spacing-caps);
980
+ --cem-typography-iconized-font-weight: var(--cem-voice-strong-ink-thickness);
981
+ --cem-typography-iconized-text-transform: uppercase;
982
+ --cem-typography-iconized-speech-volume: var(--cem-voice-strong-speech-volume);
983
+ --cem-typography-iconized-speech-rate: var(--cem-voice-strong-speech-rate);
984
+ --cem-typography-iconized-speech-pitch: var(--cem-voice-strong-speech-pitch);
985
+ --cem-typography-iconized-ssml-emphasis: var(--cem-voice-strong-ssml-emphasis);
986
+ --cem-typography-brand-font-family: var(--cem-fontography-brand-family);
987
+ --cem-typography-brand-font-size: var(--cem-typography-size-xxl);
988
+ --cem-typography-brand-line-height: 1.1;
989
+ --cem-typography-brand-letter-spacing: normal;
990
+ --cem-typography-brand-font-weight: var(--cem-voice-strong-ink-thickness);
991
+ --cem-typography-brand-speech-volume: var(--cem-voice-strong-speech-volume);
992
+ --cem-typography-brand-speech-rate: var(--cem-voice-strong-speech-rate);
993
+ --cem-typography-brand-speech-pitch: var(--cem-voice-strong-speech-pitch);
994
+ --cem-typography-brand-ssml-emphasis: var(--cem-voice-strong-ssml-emphasis);
995
+
996
+ /* endregion semantic role endpoints */
997
+ }
998
+
999
+ /* region dark theme — lighter ink to compensate for perceived boldness on dark backgrounds */
1000
+ .cem-theme-dark, [data-theme="cem-theme-dark"],
1001
+ .cem-theme-contrast-dark, [data-theme="cem-theme-contrast-dark"] {
1002
+ --cem-voice-whisper-ink-thickness: 100;
1003
+ --cem-voice-soft-ink-thickness: 180;
1004
+ --cem-voice-gentle-ink-thickness: 280;
1005
+ --cem-voice-regular-ink-thickness: 350;
1006
+ --cem-voice-firm-ink-thickness: 650;
1007
+ --cem-voice-strong-ink-thickness: 750;
1008
+ --cem-voice-loud-ink-thickness: 850;
1009
+
1010
+ }
1011
+ /* endregion dark theme */
1012
+
1013
+ /* region contrast theme — stronger ink for visibility (overrides dark for shared rows) */
1014
+ .cem-theme-contrast-light, [data-theme="cem-theme-contrast-light"],
1015
+ .cem-theme-contrast-dark, [data-theme="cem-theme-contrast-dark"] {
1016
+ --cem-voice-gentle-ink-thickness: 400;
1017
+ --cem-voice-regular-ink-thickness: 500;
1018
+ --cem-voice-firm-ink-thickness: 750;
1019
+ --cem-voice-strong-ink-thickness: 850;
1020
+
1021
+ }
1022
+ /* endregion contrast theme */
1023
+
1024
+ /* cem-timing.css */
1025
+
1026
+ :root {
1027
+ /* region durations: cem-duration-[bucket] */
1028
+ --cem-duration-instant: 50ms;
1029
+ --cem-duration-noticeable: 250ms;
1030
+ --cem-duration-lingering: 300ms;
1031
+ --cem-duration-action: var(--cem-duration-noticeable);
1032
+ --cem-duration-overlay: var(--cem-duration-lingering);
1033
+
1034
+ /* endregion durations */
1035
+
1036
+ /* region easings: cem-easing-[intent] */
1037
+ --cem-easing-smooth: ease-in-out;
1038
+ --cem-easing-start-smooth: ease-in;
1039
+ --cem-easing-end-smooth: ease-out;
1040
+ --cem-easing-highlighted: cubic-bezier(0.2, 0, 0, 1);
1041
+ --cem-easing-highlighted-start: cubic-bezier(0.3, 0, 0.8, 0.15);
1042
+ --cem-easing-highlighted-end: cubic-bezier(0.05, 0.7, 0.1, 1);
1043
+ --cem-easing-uniform: linear;
1044
+ --cem-easing-classic: ease;
1045
+
1046
+ /* endregion easings */
1047
+ }
1048
+
1049
+ /* region prefers-reduced-motion: shorten durations, preserve ordering */
1050
+ @media (prefers-reduced-motion: reduce) {
1051
+ :root {
1052
+ --cem-duration-instant: 0ms;
1053
+ --cem-duration-noticeable: 50ms;
1054
+ --cem-duration-lingering: 100ms;
1055
+
1056
+ }
1057
+ }
1058
+ /* endregion prefers-reduced-motion */