@omni-design/components 0.11.0 → 0.12.0

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 (42) hide show
  1. package/.claude/commands/ScanComponents.md +1 -1
  2. package/.claude/commands/ShareComponent.md +1 -1
  3. package/CLAUDE.md +5 -3
  4. package/dist/index.esm.js +3 -3
  5. package/dist/index.esm.js.map +1 -1
  6. package/dist/index.js +3 -3
  7. package/dist/index.js.map +1 -1
  8. package/dist/types/components/Button/Button.d.ts +3 -1
  9. package/dist/types/components/ButtonGroup/ButtonGroup.d.ts +3 -2
  10. package/dist/types/components/Chip/Chip.d.ts +1 -1
  11. package/dist/types/components/IconBadge/IconBadge.d.ts +1 -1
  12. package/dist/types/components/Loader/Loader.d.ts +66 -0
  13. package/dist/types/components/Loader/index.d.ts +1 -0
  14. package/dist/types/components/MiniSwatch/MiniSwatch.d.ts +7 -0
  15. package/dist/types/components/MiniSwatch/index.d.ts +1 -0
  16. package/dist/types/components/Swatch/Swatch.d.ts +14 -0
  17. package/dist/types/components/Swatch/index.d.ts +1 -0
  18. package/dist/types/components/Switch/Switch.d.ts +24 -8
  19. package/dist/types/components/Switch/index.d.ts +1 -1
  20. package/dist/types/components/index.d.ts +5 -0
  21. package/dist/types/docs/DocPanels.d.ts +39 -0
  22. package/dist/types/docs/components.d.ts +212 -0
  23. package/dist/types/docs/componentsData.d.ts +587 -0
  24. package/dist/types/docs/componentsForms.d.ts +597 -0
  25. package/dist/types/docs/componentsNav.d.ts +420 -0
  26. package/dist/types/docs/componentsOverlays.d.ts +379 -0
  27. package/dist/types/docs/componentsRest.d.ts +158 -0
  28. package/dist/types/docs/componentsSurfaces.d.ts +339 -0
  29. package/dist/types/docs/docsLink.d.ts +32 -0
  30. package/dist/types/docs/examples.d.ts +37 -0
  31. package/dist/types/docs/foundations.d.ts +28 -0
  32. package/dist/types/docs/index.d.ts +5 -0
  33. package/docs/components.md +71 -55
  34. package/package.json +1 -1
  35. package/public/styles/Dark-Mode.css +12056 -13009
  36. package/public/styles/Light-Mode.css +11240 -12370
  37. package/public/styles/base.css +364 -182
  38. package/public/styles/core.css +480 -123
  39. package/public/styles/foundation.css +124 -53
  40. package/public/styles/styles.css +5 -5
  41. package/public/styles/theme.json +2 -2
  42. package/public/styles/typography-tokens.css +686 -158
package/public/styles/base.css CHANGED
@@ -1,9 +1,11 @@
1
- @import url('https://fonts.googleapis.com/css2?family=Prata&display=swap');
2
- @import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
1
+ @import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:GRAD,ROND,opsz,slnt,wdth,wght@0..100,0..100,6..144,-10..0,25..151,1..1000&display=swap');
2
+ @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400&display=swap');
3
+ @import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@640&display=swap');
4
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
3
5
 
4
6
  /* ========================================
5
7
  * Base CSS Variables
6
- * Generated from DynoDesign JSON
8
+ * Generated from OmniDesign JSON
7
9
  * Auto-generated - do not edit manually
8
10
  * ======================================== */
9
11
 
@@ -13,146 +15,108 @@
13
15
  * ======================================== */
14
16
 
15
17
  :root {
16
- --Surface: var(--Primary-Background-11-Surface);
17
- --Surface-Dim: var(--Primary-Background-11-Surface-Dim);
18
- --Surface-Bright: var(--Primary-Background-11-Surface-Bright);
19
- --Container: var(--Primary-Background-11-Container);
20
- --Container-Lowest: var(--Primary-Background-11-Container-Lowest);
21
- --Container-Low: var(--Primary-Background-11-Container-Low);
22
- --Container-High: var(--Primary-Background-11-Container-High);
23
- --Container-Highest: var(--Primary-Background-11-Container-Highest);
18
+ --Surface: var(--Primary-Background-9-Surface);
19
+ --Surface-Dim: var(--Primary-Background-9-Surface-Dim);
20
+ --Surface-Bright: var(--Primary-Background-9-Surface-Bright);
21
+ --Container: var(--Primary-Background-9-Container);
22
+ --Container-Lowest: var(--Primary-Background-9-Container-Lowest);
23
+ --Container-Low: var(--Primary-Background-9-Container-Low);
24
+ --Container-High: var(--Primary-Background-9-Container-High);
25
+ --Container-Highest: var(--Primary-Background-9-Container-Highest);
24
26
  /* Default Theme */
25
- --Background: var(--Primary-Background-11-Surface);
26
- --Surface-Dim: var(--Primary-Background-11-Surface-Dim);
27
- --Surface-Bright: var(--Primary-Background-11-Surface-Bright);
28
- --Header: var(--Header-Surfaces-Primary-Color-11);
29
- --Text: var(--Text-Surfaces-Primary-Color-11);
30
- --Quiet: var(--Quiet-Surfaces-Primary-Color-11);
31
- --Border: var(--Border-Surfaces-Primary-Color-11);
32
- --Border-Variant: var(--Border-Variant-Surfaces-Primary-Color-11);
33
- --Hotlink: var(--Text-Surfaces-Info-Color-11);
34
- --Hotlink-Visited: var(--Text-Surfaces-Hotlink-Visited-Color-11);
35
- --Hover: var(--Hover-Primary-Color-11);
36
- --Active: var(--Active-Primary-Color-11);
37
- --Focus-Visible: var(--Focus-Visible-Surfaces-Color-11);
38
- --Buttons-Primary-Hover: #fbfdf9;
39
- --Buttons-Primary-Active: #fbfdf9;
40
- --Buttons-Primary-Light-Button: var(--Primary-Color-12);
41
- --Buttons-Primary-Light-Text: var(--Text-Surfaces-Primary-Color-12);
42
- --Buttons-Primary-Light-Border: var(--Border-Surfaces-Primary-Color-12);
43
- --Buttons-Primary-Light-Hover: #FFFFFF;
44
- --Buttons-Primary-Light-Active: #FFFFFF;
27
+ --Background: var(--Primary-Background-9-Surface);
28
+ --Surface-Dim: var(--Primary-Background-9-Surface-Dim);
29
+ --Surface-Bright: var(--Primary-Background-9-Surface-Bright);
30
+ --Header: var(--Header-Surfaces-Primary-Color-9);
31
+ --Text: var(--Text-Surfaces-Primary-Color-9);
32
+ --Quiet: var(--Quiet-Surfaces-Primary-Color-9);
33
+ --Border: var(--Border-Surfaces-Primary-Color-9);
34
+ --Border-Variant: var(--Border-Variant-Surfaces-Primary-Color-9);
35
+ --Hotlink: var(--Text-Surfaces-Info-Color-9);
36
+ --Hotlink-Visited: var(--Text-Surfaces-Hotlink-Visited-Color-9);
37
+ --Hover: var(--Hover-Primary-Color-9);
38
+ --Pressed: var(--Pressed-Primary-Color-9);
39
+ --Focus-Visible: var(--Focus-Visible-Surfaces-Color-9);
40
+ --Buttons-Primary-Hover: #e9ecd7;
41
+ --Buttons-Primary-Pressed: #f0f2e2;
45
42
  --Buttons-Secondary-Button: var(--Secondary-Color-9);
46
43
  --Buttons-Secondary-Text: var(--Text-Surfaces-Secondary-Color-9);
47
- --Buttons-Secondary-Border: var(--Border-Surfaces-Secondary-Color-11);
48
- --Buttons-Secondary-Hover: #fceded;
49
- --Buttons-Secondary-Active: #fceded;
50
- --Buttons-Secondary-Light-Button: var(--Secondary-Color-12);
51
- --Buttons-Secondary-Light-Text: var(--Text-Surfaces-Secondary-Color-12);
52
- --Buttons-Secondary-Light-Border: var(--Border-Surfaces-Secondary-Color-11);
53
- --Buttons-Secondary-Light-Hover: #FFFFFF;
54
- --Buttons-Secondary-Light-Active: #FFFFFF;
44
+ --Buttons-Secondary-Border: var(--Border-Surfaces-Secondary-Color-9);
45
+ --Buttons-Secondary-Hover: #ffe1e0;
46
+ --Buttons-Secondary-Pressed: #ffeae9;
55
47
  --Buttons-Tertiary-Button: var(--Tertiary-Color-9);
56
48
  --Buttons-Tertiary-Text: var(--Text-Surfaces-Tertiary-Color-9);
57
- --Buttons-Tertiary-Border: var(--Border-Surfaces-Tertiary-Color-11);
58
- --Buttons-Tertiary-Hover: #f7efe9;
59
- --Buttons-Tertiary-Active: #f7efe9;
60
- --Buttons-Tertiary-Light-Button: var(--Tertiary-Color-12);
61
- --Buttons-Tertiary-Light-Text: var(--Text-Surfaces-Tertiary-Color-12);
62
- --Buttons-Tertiary-Light-Border: var(--Border-Surfaces-Tertiary-Color-11);
63
- --Buttons-Tertiary-Light-Hover: #FFFFFF;
64
- --Buttons-Tertiary-Light-Active: #FFFFFF;
65
- --Buttons-Primary-Button: var(--Primary-Button-Containers-Background-11-Button);
66
- --Buttons-Primary-Text: var(--Primary-Button-Containers-Background-11-Text);
67
- --Buttons-Primary-Border: var(--Border-Containers-Primary-Color-11);
68
- --Buttons-Primary-Hover: #fbfdf9;
69
- --Buttons-Primary-Active: #fbfdf9;
70
- --Buttons-Primary-Light-Border: var(--Border-Containers-Primary-Color-12);
71
- --Buttons-Secondary-Border: var(--Border-Containers-Secondary-Color-11);
72
- --Buttons-Secondary-Light-Border: var(--Border-Containers-Secondary-Color-11);
73
- --Buttons-Tertiary-Border: var(--Border-Containers-Tertiary-Color-11);
74
- --Buttons-Tertiary-Light-Border: var(--Border-Containers-Tertiary-Color-11);
75
- --Buttons-Neutral-Button: var(--Neutral-Color-9);
76
- --Buttons-Neutral-Text: var(--Text-Surfaces-Neutral-Color-9);
77
- --Buttons-Neutral-Border: var(--Border-Containers-Neutral-Color-11);
78
- --Buttons-Neutral-Hover: #f1f1f1;
79
- --Buttons-Neutral-Active: #f1f1f1;
80
- --Buttons-Neutral-Light-Button: var(--Neutral-Color-12);
81
- --Buttons-Neutral-Light-Text: var(--Text-Surfaces-Neutral-Color-12);
82
- --Buttons-Neutral-Light-Border: var(--Border-Containers-Neutral-Color-11);
83
- --Buttons-Neutral-Light-Hover: #FFFFFF;
84
- --Buttons-Neutral-Light-Active: #FFFFFF;
85
- --Buttons-Info-Button: var(--Info-Color-9);
86
- --Buttons-Info-Text: var(--Text-Surfaces-Info-Color-9);
87
- --Buttons-Info-Border: var(--Border-Containers-Info-Color-11);
88
- --Buttons-Info-Hover: #eeefff;
89
- --Buttons-Info-Active: #eeefff;
90
- --Buttons-Info-Light-Button: var(--Info-Color-12);
91
- --Buttons-Info-Light-Text: var(--Text-Surfaces-Info-Color-12);
92
- --Buttons-Info-Light-Border: var(--Border-Containers-Info-Color-11);
93
- --Buttons-Info-Light-Hover: #FFFFFF;
94
- --Buttons-Info-Light-Active: #FFFFFF;
95
- --Buttons-Success-Button: var(--Success-Color-9);
96
- --Buttons-Success-Text: var(--Text-Surfaces-Success-Color-9);
97
- --Buttons-Success-Border: var(--Border-Containers-Success-Color-11);
98
- --Buttons-Success-Hover: #dff7e4;
99
- --Buttons-Success-Active: #dff7e4;
100
- --Buttons-Success-Light-Button: var(--Success-Color-12);
101
- --Buttons-Success-Light-Text: var(--Text-Surfaces-Success-Color-12);
102
- --Buttons-Success-Light-Border: var(--Border-Containers-Success-Color-11);
103
- --Buttons-Success-Light-Hover: #FFFFFF;
104
- --Buttons-Success-Light-Active: #FFFFFF;
105
- --Buttons-Warning-Button: var(--Warning-Color-9);
106
- --Buttons-Warning-Text: var(--Text-Surfaces-Warning-Color-9);
107
- --Buttons-Warning-Border: var(--Border-Containers-Warning-Color-11);
108
- --Buttons-Warning-Hover: #ffedd3;
109
- --Buttons-Warning-Active: #ffedd3;
110
- --Buttons-Warning-Light-Button: var(--Warning-Color-12);
111
- --Buttons-Warning-Light-Text: var(--Text-Surfaces-Warning-Color-12);
112
- --Buttons-Warning-Light-Border: var(--Border-Containers-Warning-Color-11);
113
- --Buttons-Warning-Light-Hover: #FFFFFF;
114
- --Buttons-Warning-Light-Active: #FFFFFF;
115
- --Buttons-Error-Button: var(--Error-Color-9);
116
- --Buttons-Error-Text: var(--Text-Surfaces-Error-Color-9);
117
- --Buttons-Error-Border: var(--Border-Containers-Error-Color-11);
118
- --Buttons-Error-Hover: #ffe8e3;
119
- --Buttons-Error-Active: #ffe8e3;
120
- --Buttons-Error-Light-Button: var(--Error-Color-12);
121
- --Buttons-Error-Light-Text: var(--Text-Surfaces-Error-Color-12);
122
- --Buttons-Error-Light-Border: var(--Border-Containers-Error-Color-11);
123
- --Buttons-Error-Light-Hover: #FFFFFF;
124
- --Buttons-Error-Light-Active: #FFFFFF;
125
- --Buttons-BlackWhite-Light-Button: var(--White);
126
- --Buttons-BlackWhite-Light-Text: var(--Text-Surfaces-BW-Button-Color-1);
127
- --Buttons-BlackWhite-Light-Hover: #FFFFFF;
128
- --Buttons-BlackWhite-Light-Active: #FFFFFF;
129
- --Buttons-BlackWhite-Medium-Button: var(--Neutral-Color-1);
130
- --Buttons-BlackWhite-Medium-Text: var(--Text-Surfaces-BW-Button-Color-12);
131
- --Buttons-BlackWhite-Medium-Hover: #000000;
132
- --Buttons-BlackWhite-Medium-Active: #000000;
49
+ --Buttons-Tertiary-Border: var(--Border-Surfaces-Tertiary-Color-9);
50
+ --Buttons-Tertiary-Hover: #ffe4cd;
51
+ --Buttons-Tertiary-Pressed: #ffecdc;
52
+ --Buttons-Primary-Button: var(--Primary-Button-Containers-Background-9-Button);
53
+ --Buttons-Primary-Text: var(--Primary-Button-Containers-Background-9-Text);
54
+ --Buttons-Primary-Border: var(--Border-Containers-Primary-Color-9);
55
+ --Buttons-Primary-Hover: #e9ecd7;
56
+ --Buttons-Primary-Pressed: #f0f2e2;
57
+ --Buttons-Secondary-Border: var(--Border-Containers-Secondary-Color-9);
58
+ --Buttons-Tertiary-Border: var(--Border-Containers-Tertiary-Color-9);
59
+ --Buttons-Neutral-Button: var(--Neutral-Color-6);
60
+ --Buttons-Neutral-Text: var(--Text-Surfaces-Neutral-Color-6);
61
+ --Buttons-Neutral-Border: var(--Border-Containers-Neutral-Color-9);
62
+ --Buttons-Neutral-Hover: #9d9d9d;
63
+ --Buttons-Neutral-Pressed: #aeaeae;
64
+ --Buttons-Info-Button: var(--Info-Color-6);
65
+ --Buttons-Info-Text: var(--Text-Surfaces-Info-Color-6);
66
+ --Buttons-Info-Border: var(--Border-Containers-Info-Color-9);
67
+ --Buttons-Info-Hover: #7496ff;
68
+ --Buttons-Info-Pressed: #90a7ff;
69
+ --Buttons-Success-Button: var(--Success-Color-6);
70
+ --Buttons-Success-Text: var(--Text-Surfaces-Success-Color-6);
71
+ --Buttons-Success-Border: var(--Border-Containers-Success-Color-9);
72
+ --Buttons-Success-Hover: #4daf6f;
73
+ --Buttons-Success-Pressed: #6abf84;
74
+ --Buttons-Warning-Button: var(--Warning-Color-6);
75
+ --Buttons-Warning-Text: var(--Text-Surfaces-Warning-Color-6);
76
+ --Buttons-Warning-Border: var(--Border-Containers-Warning-Color-9);
77
+ --Buttons-Warning-Hover: #ce911e;
78
+ --Buttons-Warning-Pressed: #e3a12b;
79
+ --Buttons-Error-Button: var(--Error-Color-6);
80
+ --Buttons-Error-Text: var(--Text-Surfaces-Error-Color-6);
81
+ --Buttons-Error-Border: var(--Border-Containers-Error-Color-9);
82
+ --Buttons-Error-Hover: #f77069;
83
+ --Buttons-Error-Pressed: #ff877d;
84
+ --Buttons-White-Button: var(--White);
85
+ --Buttons-White-Text: var(--Text-Surfaces-BW-Button-Color-1);
86
+ --Buttons-White-Quiet: var(--Neutral-Color-5);
87
+ --Buttons-White-Hover: #fbfbfb;
88
+ --Buttons-White-Pressed: #f9f9f9;
89
+ --Buttons-Black-Button: var(--Neutral-Color-1);
90
+ --Buttons-Black-Text: var(--Text-Surfaces-BW-Button-Color-12);
91
+ --Buttons-Black-Quiet: var(--Neutral-Color-6);
92
+ --Buttons-Black-Hover: #0a0a0a;
93
+ --Buttons-Black-Pressed: #101010;
133
94
  --Buttons-Default-Button: var(--Default-Button-Default-Medium-Button);
134
95
  --Buttons-Default-Text: var(--Default-Button-Default-Medium-Text);
135
- --Buttons-Default-Border: var(--Default-Button-Border-Surfaces-Default-Color-11);
136
- --Buttons-Default-Hover: #f5dddd;
137
- --Buttons-Default-Active: #f5dddd;
138
- --Icons-Default: var(--Icon-Surfaces-Neutral-Color-11);
139
- --Icons-Default-Variant: var(--Icon-Variant-Surfaces-Neutral-Color-11);
140
- --Icons-Primary: var(--Icon-Surfaces-Primary-Color-11);
141
- --Icons-Primary-Variant: var(--Icon-Variant-Surfaces-Primary-Color-11);
142
- --Icons-Secondary: var(--Icon-Surfaces-Secondary-Color-11);
143
- --Icons-Secondary-Variant: var(--Icon-Variant-Surfaces-Secondary-Color-11);
144
- --Icons-Tertiary: var(--Icon-Surfaces-Tertiary-Color-11);
145
- --Icons-Tertiary-Variant: var(--Icon-Variant-Surfaces-Tertiary-Color-11);
146
- --Icons-Neutral: var(--Icon-Surfaces-Neutral-Color-11);
147
- --Icons-Neutral-Variant: var(--Icon-Variant-Surfaces-Neutral-Color-11);
148
- --Icons-Info: var(--Icon-Surfaces-Info-Color-11);
149
- --Icons-Info-Variant: var(--Icon-Variant-Surfaces-Info-Color-11);
150
- --Icons-Success: var(--Icon-Surfaces-Success-Color-11);
151
- --Icons-Success-Variant: var(--Icon-Variant-Surfaces-Success-Color-11);
152
- --Icons-Warning: var(--Icon-Surfaces-Warning-Color-11);
153
- --Icons-Warning-Variant: var(--Icon-Variant-Surfaces-Warning-Color-11);
154
- --Icons-Error: var(--Icon-Surfaces-Error-Color-11);
155
- --Icons-Error-Variant: var(--Icon-Variant-Surfaces-Error-Color-11);
96
+ --Buttons-Default-Border: var(--Buttons-Secondary-Border);
97
+ --Buttons-Default-Highlight: var(--Buttons-Secondary-Highlight);
98
+ --Buttons-Default-Lowlight: var(--Buttons-Secondary-Lowlight);
99
+ --Buttons-Default-Quiet: var(--Buttons-Secondary-Quiet);
100
+ --Buttons-Default-Hover: #efa5a4;
101
+ --Buttons-Default-Pressed: #efa5a4;
102
+ --Icons-Default: var(--Icon-Surfaces-Neutral-Color-9);
103
+ --Icons-Default-Variant: var(--Icon-Variant-Surfaces-Neutral-Color-9);
104
+ --Icons-Primary: var(--Icon-Surfaces-Primary-Color-9);
105
+ --Icons-Primary-Variant: var(--Icon-Variant-Surfaces-Primary-Color-9);
106
+ --Icons-Secondary: var(--Icon-Surfaces-Secondary-Color-9);
107
+ --Icons-Secondary-Variant: var(--Icon-Variant-Surfaces-Secondary-Color-9);
108
+ --Icons-Tertiary: var(--Icon-Surfaces-Tertiary-Color-9);
109
+ --Icons-Tertiary-Variant: var(--Icon-Variant-Surfaces-Tertiary-Color-9);
110
+ --Icons-Neutral: var(--Icon-Surfaces-Neutral-Color-9);
111
+ --Icons-Neutral-Variant: var(--Icon-Variant-Surfaces-Neutral-Color-9);
112
+ --Icons-Info: var(--Icon-Surfaces-Info-Color-9);
113
+ --Icons-Info-Variant: var(--Icon-Variant-Surfaces-Info-Color-9);
114
+ --Icons-Success: var(--Icon-Surfaces-Success-Color-9);
115
+ --Icons-Success-Variant: var(--Icon-Variant-Surfaces-Success-Color-9);
116
+ --Icons-Warning: var(--Icon-Surfaces-Warning-Color-9);
117
+ --Icons-Warning-Variant: var(--Icon-Variant-Surfaces-Warning-Color-9);
118
+ --Icons-Error: var(--Icon-Surfaces-Error-Color-9);
119
+ --Icons-Error-Variant: var(--Icon-Variant-Surfaces-Error-Color-9);
156
120
  }
157
121
 
158
122
  :root {
@@ -165,73 +129,291 @@
165
129
  --Chart-Lines: #e2e2e2;
166
130
 
167
131
  /* Solid Chart Colors */
168
- --Chart-1: #eef2ea;
169
- --Chart-2: #fceded;
170
- --Chart-3: #f7efe9;
171
- --Chart-4: #eeefff;
132
+ --Chart-1: #f0f2e2;
133
+ --Chart-2: #ffeae9;
134
+ --Chart-3: #ffecdc;
135
+ --Chart-4: #edeeff;
172
136
  --Chart-5: #dff7e4;
173
- --Chart-6: #ffedd3;
174
- --Chart-7: #ffe8e3;
137
+ --Chart-6: #ffedd1;
138
+ --Chart-7: #ffe7e1;
175
139
  --Chart-8: #f1f1f1;
176
- --Chart-9: #dfe4d9;
177
- --Chart-10: #f5dddd;
140
+ --Chart-9: #e1e5cc;
141
+ --Chart-10: #ffd8d7;
178
142
 
179
143
  /* Opaque Chart Colors (50% opacity) */
180
- --Chart-1-Opaque: rgba(238, 242, 234, 0.5);
181
- --Chart-2-Opaque: rgba(252, 237, 237, 0.5);
182
- --Chart-3-Opaque: rgba(247, 239, 233, 0.5);
183
- --Chart-4-Opaque: rgba(238, 239, 255, 0.5);
144
+ --Chart-1-Opaque: rgba(240, 242, 226, 0.5);
145
+ --Chart-2-Opaque: rgba(255, 234, 233, 0.5);
146
+ --Chart-3-Opaque: rgba(255, 236, 220, 0.5);
147
+ --Chart-4-Opaque: rgba(237, 238, 255, 0.5);
184
148
  --Chart-5-Opaque: rgba(223, 247, 228, 0.5);
185
- --Chart-6-Opaque: rgba(255, 237, 211, 0.5);
186
- --Chart-7-Opaque: rgba(255, 232, 227, 0.5);
149
+ --Chart-6-Opaque: rgba(255, 237, 209, 0.5);
150
+ --Chart-7-Opaque: rgba(255, 231, 225, 0.5);
187
151
  --Chart-8-Opaque: rgba(241, 241, 241, 0.5);
188
- --Chart-9-Opaque: rgba(223, 228, 217, 0.5);
189
- --Chart-10-Opaque: rgba(245, 221, 221, 0.5);
152
+ --Chart-9-Opaque: rgba(225, 229, 204, 0.5);
153
+ --Chart-10-Opaque: rgba(255, 216, 215, 0.5);
190
154
 
191
155
  /* ========================================
192
156
  * Effect Levels (Box Shadows)
193
157
  * ======================================== */
194
158
 
195
- /* Per-elevation dropshadow tokens — defaults pre-computed for a white
196
- surface using the studio's shared Comeau-style math (drop L,
197
- ascending alpha). Brand CSS overrides --Dropshadow-Color-1..5 per
198
- surface scope at runtime; the Effect-Level recipes below pick up the
199
- overridden values automatically via var(). */
200
- --Dropshadow-Color-1: #8c8c8c1a; /* L=55, S=0, alpha 0.10 */
201
- --Dropshadow-Color-2: #73737329; /* L=45, S=0, alpha 0.16 */
202
- --Dropshadow-Color-3: #59595938; /* L=35, S=0, alpha 0.22 */
203
- --Dropshadow-Color-4: #4040404d; /* L=25, S=0, alpha 0.30 */
204
- --Dropshadow-Color-5: #2e2e2e66; /* L=18, S=0, alpha 0.40 */
205
-
206
- /* Layered shadow recipes — each level stacks its own atmospheric shadow
207
- on top of the previous level's contact shadow. Higher elevations read
208
- as more dramatic, not weaker. Shared with the studio's per-design-
209
- system CSS export so generated systems and the lib's defaults agree. */
210
159
  --Effect-Level-0: none;
211
- --Effect-Level-1: 0 1px 2px var(--Dropshadow-Color-1);
212
- --Effect-Level-2: 0 2px 4px var(--Dropshadow-Color-2), 0 1px 2px var(--Dropshadow-Color-1);
213
- --Effect-Level-3: 0 4px 8px var(--Dropshadow-Color-3), 0 2px 4px var(--Dropshadow-Color-2);
214
- --Effect-Level-4: 0 8px 16px var(--Dropshadow-Color-4), 0 4px 8px var(--Dropshadow-Color-3);
215
- --Effect-Level-5: 0 16px 32px var(--Dropshadow-Color-5), 0 8px 16px var(--Dropshadow-Color-4);
160
+ --Effect-Level-1: 0.3px 0.5px 0.6px 0px rgba(var(--Dropshadow-Color), 0.345), 0.4px 0.8px 1px -1.2px rgba(var(--Dropshadow-Color), 0.345), 1px 2px 2.5px -2.5px rgba(var(--Dropshadow-Color), 0.345);
161
+ --Effect-Level-2: 0.3px 0.5px 0.6px 0px rgba(var(--Dropshadow-Color), 0.306), 0.5px 1px 1.2px -0.8px rgba(var(--Dropshadow-Color), 0.306), 1px 2px 2.6px -1.7px rgba(var(--Dropshadow-Color), 0.306), 2.3px 4.5px 5.7px -2.5px rgba(var(--Dropshadow-Color), 0.306);
162
+ --Effect-Level-3: 0.3px 0.5px 0.6px 0px rgba(var(--Dropshadow-Color), 0.361), 0.8px 1.6px 2px -0.8px rgba(var(--Dropshadow-Color), 0.361), 2.1px 4.2px 5.2px -1.7px rgba(var(--Dropshadow-Color), 0.361), 5px 10px 12.6px -2.5px rgba(var(--Dropshadow-Color), 0.361);
163
+ --Effect-Level-4: 0.3px 0.5px 0.6px 0px rgba(var(--Dropshadow-Color), 0.329), 0.9px 1.8px 2.2px -0.5px rgba(var(--Dropshadow-Color), 0.329), 1.9px 3.9px 4.9px -1px rgba(var(--Dropshadow-Color), 0.329), 3.7px 7.3px 9.2px -1.5px rgba(var(--Dropshadow-Color), 0.329), 6.5px 13px 16.4px -2px rgba(var(--Dropshadow-Color), 0.329), 11.2px 22.4px 28.2px -2.5px rgba(var(--Dropshadow-Color), 0.329);
164
+ --Effect-Level-5: 0.3px 0.5px 0.6px 0px rgba(var(--Dropshadow-Color), 0.333), 1.2px 2.4px 3px -0.4px rgba(var(--Dropshadow-Color), 0.333), 2.6px 5.1px 6.4px -0.7px rgba(var(--Dropshadow-Color), 0.333), 4.5px 9px 11.3px -1.1px rgba(var(--Dropshadow-Color), 0.333), 7.3px 14.6px 18.3px -1.4px rgba(var(--Dropshadow-Color), 0.333), 11.2px 22.5px 28.3px -1.8px rgba(var(--Dropshadow-Color), 0.333), 16.9px 33.8px 42.5px -2.1px rgba(var(--Dropshadow-Color), 0.333), 25px 50px 62.9px -2.5px rgba(var(--Dropshadow-Color), 0.333);
216
165
 
217
- --Set-Font-Family-Header: "Prata", serif;
218
- --Set-Font-Family-Header-Weight: 200;
219
- --Set-Font-Family-Body: "Roboto", sans-serif;
166
+ --Set-Font-Family-Header: "Google Sans Flex", sans-serif;
167
+ --Set-Font-Family-Header-Weight: 640;
168
+ --Set-Font-Family-Body: "Poppins", sans-serif;
220
169
  --Set-Font-Family-Body-Weight: 400;
221
170
  --Set-Font-Family-Body-Semibold-Weight: 600;
222
171
  --Set-Font-Family-Body-Bold-Weight: 700;
223
- --Set-Font-Family-Decorative: "Permanent Marker", sans-serif;
224
- --Set-Font-Family-Decorative-Weight: 200;
172
+ --Set-Font-Family-Decorative: "Raleway", sans-serif;
173
+ --Set-Font-Family-Decorative-Weight: 400;
225
174
  }
226
175
 
227
176
 
228
177
  :root {
229
- --Button-Radius: 8px;
230
- /* Structural default so outline borders render even when no brand CSS is
231
- loaded (the studio chrome). A brand's generated base.css overrides this. */
232
- --Button-Border-Width: 1px;
233
- --Card-Radius: 11px;
178
+ /* Default Primary / Secondary / Tertiary Tone — the Color-N each brand colour sits at. */
179
+ --DPT: 6;
180
+ --DST: 7;
181
+ --DTT: 8;
182
+ /* Motion — durations by role, easings by where the motion starts and ends. */
183
+ --Motion-Duration-Instant: 100ms;
184
+ --Motion-Duration-Fast: 150ms;
185
+ --Motion-Duration-Moderate: 200ms;
186
+ --Motion-Duration-Slow: 300ms;
187
+ --Motion-Easing-Standard: cubic-bezier(0.2, 0, 0, 1);
188
+ --Motion-Easing-Enter: cubic-bezier(0, 0, 0, 1);
189
+ --Motion-Easing-Exit: cubic-bezier(0.3, 0, 1, 1);
190
+ --Motion-Easing-Linear: linear;
191
+ --Style-Border-Radius: 2px;
192
+ --Button-Radius: 2px;
193
+ --Sm-Button-Radius: 2px;
194
+ --Lg-Button-Radius: 2px;
195
+ --Button-Inner-Focus-Radius: 1px;
196
+ --Sm-Button-Inner-Focus-Radius: 1px;
197
+ --Lg-Button-Inner-Focus-Radius: 1px;
198
+ --Button-Focus-Radius: 5px;
199
+ --Sm-Button-Focus-Radius: 5px;
200
+ --Lg-Button-Focus-Radius: 5px;
201
+ --Button-Icon-Radius: 32px;
202
+ --Sm-Button-Icon-Radius: 12px;
203
+ --Lg-Button-Icon-Radius: 28px;
204
+ --Button-Icon-Inner-Radius: 31px;
205
+ --Sm-Button-Icon-Inner-Radius: 11px;
206
+ --Lg-Button-Icon-Inner-Radius: 27px;
207
+ --Button-Icon-Focus-Radius: 35px;
208
+ --Sm-Button-Icon-Focus-Radius: 15px;
209
+ --Lg-Button-Icon-Focus-Radius: 31px;
210
+ --Card-Radius: 18px;
211
+ --Accordion-Radius: 2px;
212
+ --Accordion-Focus-Radius: 5px;
213
+ --Accordion-Inner-Focus-Radius: 0px;
214
+ --Tooltip-Radius: 8px;
215
+ --Sm-Tooltip-Radius: 8px;
216
+ --Lg-Tooltip-Radius: 8px;
217
+ --Tooltip-Arrow-Height: 8px;
218
+ --Sm-Tooltip-Arrow-Height: 6px;
219
+ --Lg-Tooltip-Arrow-Height: 10px;
220
+ --Tooltip-Arrow-Width: 16px;
221
+ --Sm-Tooltip-Arrow-Width: 12px;
222
+ --Lg-Tooltip-Arrow-Width: 20px;
223
+ --Tooltip-Visible-Arrow-Height: 6px;
224
+ --Sm-Tooltip-Visible-Arrow-Height: 4px;
225
+ --Lg-Tooltip-Visible-Arrow-Height: 7px;
226
+ --Tooltip-Padding: 8px;
227
+ --Sm-Tooltip-Padding: 4px;
228
+ --Lg-Tooltip-Padding: 12px;
229
+ --Tooltip-Gap: 4px;
230
+ --Sm-Tooltip-Gap: 2px;
231
+ --Lg-Tooltip-Gap: 6px;
232
+ --Radio-Size: 20px;
233
+ --Sm-Radio-Size: 16px;
234
+ --Lg-Radio-Size: 24px;
235
+ --Radio-Dot: 10px;
236
+ --Sm-Radio-Dot: 8px;
237
+ --Lg-Radio-Dot: 12px;
238
+ --Radio-Gap: 8px;
239
+ --Sm-Radio-Gap: 4px;
240
+ --Lg-Radio-Gap: 12px;
241
+ --Checkbox-Width: 20px;
242
+ --Sm-Checkbox-Width: 16px;
243
+ --Lg-Checkbox-Width: 24px;
244
+ --Checkbox-Radius: 4px;
245
+ --Sm-Checkbox-Radius: 3.2px;
246
+ --Lg-Checkbox-Radius: 4.8px;
247
+ --Checkbox-Icon: 14px;
248
+ --Sm-Checkbox-Icon: 12px;
249
+ --Lg-Checkbox-Icon: 18px;
250
+ --Checkbox-Gap: 8px;
251
+ --Sm-Checkbox-Gap: 4px;
252
+ --Lg-Checkbox-Gap: 12px;
253
+ --Divider: 1px;
254
+ --Sm-Divider: 0.5px;
255
+ --Lg-Divider: 2px;
256
+ --Step-Bar: 2px;
257
+ --Sm-Step-Bar: 1px;
258
+ --Lg-Step-Bar: 4px;
259
+ --No-Count-Step: 12px;
260
+ --Sm-No-Count-Step: 8px;
261
+ --Lg-No-Count-Step: 16px;
262
+ --Sm-Card-Radius: 14px;
263
+ --Lg-Card-Radius: 23px;
264
+ --Card-Inner-Radius: 17px;
265
+ --Sm-Card-Inner-Radius: 13px;
266
+ --Lg-Card-Inner-Radius: 22px;
267
+ --Card-Focus-Radius: 21px;
268
+ --Sm-Card-Focus-Radius: 17px;
269
+ --Lg-Card-Focus-Radius: 26px;
234
270
  --Card-Padding: 16px;
271
+ --Sm-Card-Padding: 12px;
272
+ --Lg-Card-Padding: 20px;
273
+ --Modal-Padding: 24px;
274
+ --Sm-Modal-Padding: 18px;
275
+ --Lg-Modal-Padding: 30px;
276
+ --Modal-Radius: 18px;
277
+ --Modal-Inner-Radius: 17px;
278
+ --Modal-Focus-Radius: 21px;
279
+ --List-Item-Radius: 2px;
280
+ --List-Item-Focus-Radius: 0px;
281
+ --List-Item-Padding: 12px;
282
+ --List-Item-Gap: 12px;
283
+ --Sm-List-Item-Padding: 8px;
284
+ --Lg-List-Item-Padding: 16px;
285
+ --Sm-List-Item-Gap: 8px;
286
+ --Lg-List-Item-Gap: 16px;
287
+ --Sm-List-Item-Radius: 2px;
288
+ --Lg-List-Item-Radius: 2px;
289
+ --Sm-List-Item-Focus-Radius: 0px;
290
+ --Lg-List-Item-Focus-Radius: 0px;
291
+ --List-Item-Image-Radius: 1px;
292
+ --List-Item-Default-Image-Width: 64px;
293
+ --Sm-List-Item-Default-Image-Width: 48px;
294
+ --Lg-List-Item-Default-Image-Width: 80px;
295
+ --Dropdown-Frame-Radius: 2px;
296
+ --Menu-Item-Radius: 0px;
297
+ --Menu-Focus-Radius: 0px;
298
+ --Disabled: 0.38;
299
+ --Rail-Width: 80px;
300
+ --Sm-Rail-Width: 72px;
301
+ --Lg-Rail-Width: 96px;
302
+ --App-Bar-Height: 64px;
303
+ --Sm-App-Bar-Height: 56px;
304
+ --Lg-App-Bar-Height: 72px;
305
+ --Nav-Bar-Height: 83px;
306
+ --Sm-Nav-Bar-Height: 73px;
307
+ --Lg-Nav-Bar-Height: 93px;
308
+ --Input-Radius: 2px;
309
+ --Sm-Input-Radius: 1px;
310
+ --Lg-Input-Radius: 3px;
311
+ --Input-Inner-Focus-Radius: 1px;
312
+ --Input-Focus-Radius: 5px;
313
+ --Input-Inner-Focus-Visible: var(--Input-Inner-Focus-Radius);
314
+ --Input-Swatch-Radius: 2px;
315
+ --Sm-Input-Swatch-Radius: 1px;
316
+ --Lg-Input-Swatch-Radius: 3px;
317
+ --Input-Padding: 8px;
318
+ --Button-Border-Width: 1px;
319
+ --Button-Min-Width: 60px;
320
+ --Lg-Button-Min-Width: 100px;
321
+ --Button-Padding: 8px;
322
+ --Sm-Button-Padding: var(--Button-Padding);
323
+ --Button-Text: 16px;
324
+ --Sm-Button-Text: 14px;
325
+ --Lg-Button-Text: 20px;
326
+ --Avatar-Text: 14px;
327
+ --Sm-Avatar-Text: 12px;
328
+ --Lg-Avatar-Text: 18px;
329
+ --Button-Numbers: 12px;
330
+ --Sm-Button-Numbers: 10px;
331
+ --Lg-Button-Numbers: 16px;
332
+ --Button-Icon: 20px;
333
+ --Sm-Button-Icon: 16px;
334
+ --Lg-Button-Icon: 32px;
335
+ --Button-Icon-Only: 24px;
336
+ --Sm-Button-Icon-Only: 16px;
337
+ --Lg-Button-Icon-Only: 40px;
338
+ --Button-Text-Padding: 4px;
339
+ --Sm-Button-Text-Padding: 4px;
340
+ --Lg-Button-Text-Padding: 8px;
341
+ --Button-Height: 32px;
342
+ --Sm-Button-Height: 24px;
343
+ --Lg-Button-Height: 56px;
344
+ --Small-Button-Height: var(--Sm-Button-Height);
345
+ --Large-Button-Height: var(--Lg-Button-Height);
346
+ --Lg-Button-Padding: 16px;
347
+ --Large-Button-Padding: var(--Lg-Button-Padding);
348
+ --Button-Bevel: 0;
349
+ --Button-Bevel-Px: 0px;
350
+ --Button-Bevel-Opacity: 0.5;
351
+ --Effect-Level-0: none;
352
+ --Effect-Level-1: 0.3px 0.5px 0.5px 0px rgba(var(--Dropshadow-Color), 0.31), 1px 2px 2.1px -3.7px rgba(var(--Dropshadow-Color), 0.31);
353
+ --Effect-Level-2: 0.3px 0.5px 0.5px 0px rgba(var(--Dropshadow-Color), 0.243), 0.7px 1.4px 1.4px -1.9px rgba(var(--Dropshadow-Color), 0.243), 2.3px 4.5px 4.6px -3.7px rgba(var(--Dropshadow-Color), 0.243);
354
+ --Effect-Level-3: 0.3px 0.5px 0.5px 0px rgba(var(--Dropshadow-Color), 0.286), 1.3px 2.6px 2.7px -1.9px rgba(var(--Dropshadow-Color), 0.286), 5px 10px 10.3px -3.7px rgba(var(--Dropshadow-Color), 0.286);
355
+ --Effect-Level-4: 0.3px 0.5px 0.5px 0px rgba(var(--Dropshadow-Color), 0.235), 1.1px 2.2px 2.3px -0.9px rgba(var(--Dropshadow-Color), 0.235), 2.7px 5.4px 5.6px -1.9px rgba(var(--Dropshadow-Color), 0.235), 5.7px 11.3px 11.7px -2.8px rgba(var(--Dropshadow-Color), 0.235), 11.2px 22.4px 23.1px -3.7px rgba(var(--Dropshadow-Color), 0.235);
356
+ --Effect-Level-5: 0.3px 0.5px 0.5px 0px rgba(var(--Dropshadow-Color), 0.267), 1.7px 3.4px 3.5px -0.7px rgba(var(--Dropshadow-Color), 0.267), 4.1px 8.1px 8.4px -1.5px rgba(var(--Dropshadow-Color), 0.267), 8px 15.9px 16.4px -2.2px rgba(var(--Dropshadow-Color), 0.267), 14.4px 28.8px 29.7px -3px rgba(var(--Dropshadow-Color), 0.267), 25px 50px 51.6px -3.7px rgba(var(--Dropshadow-Color), 0.267);
357
+ }
358
+
359
+ [class*="chip-"][class*="-light"][data-surface] {
360
+ background-color: var(--Background);
361
+ color: var(--Text);
362
+ }
363
+ /* TextArea (and any MUI-backed field) inherits MUI's corner instead of
364
+ --Input-Radius. Repoint it, outline included. */
365
+ .MuiOutlinedInput-root.MuiOutlinedInput-root,
366
+ .MuiOutlinedInput-root.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
367
+ border-radius: var(--Input-Radius, var(--Style-Border-Radius));
368
+ }
369
+
370
+ /* ── Motion mode ─────────────────────────────────────────────────────────
371
+ Durations are tokens, so a mode is a redefinition rather than a rewrite.
372
+ The blanket rule beside them catches transitions still written as
373
+ literals, so the mode can be trusted before every component migrates. */
374
+
375
+ /* Follows the operating system unless data-motion overrides it. */
376
+ @media (prefers-reduced-motion: reduce) {
377
+ :root:not([data-motion="Motion"]) {
378
+ --Motion-Duration-Instant: 0s;
379
+ --Motion-Duration-Fast: 0s;
380
+ --Motion-Duration-Moderate: 0s;
381
+ --Motion-Duration-Slow: 0s;
382
+ }
383
+ :root:not([data-motion="Motion"]),
384
+ :root:not([data-motion="Motion"]) *,
385
+ :root:not([data-motion="Motion"]) *::before,
386
+ :root:not([data-motion="Motion"]) *::after {
387
+ transition-duration: 0s !important;
388
+ animation-duration: 0s !important;
389
+ animation-iteration-count: 1 !important;
390
+ scroll-behavior: auto !important;
391
+ }
392
+ }
393
+
394
+ /* Explicit: no motion. */
395
+ [data-motion="No-Motion"] {
396
+ --Motion-Duration-Instant: 0s;
397
+ --Motion-Duration-Fast: 0s;
398
+ --Motion-Duration-Moderate: 0s;
399
+ --Motion-Duration-Slow: 0s;
400
+ }
401
+ [data-motion="No-Motion"],
402
+ [data-motion="No-Motion"] *,
403
+ [data-motion="No-Motion"] *::before,
404
+ [data-motion="No-Motion"] *::after {
405
+ transition-duration: 0s !important;
406
+ animation-duration: 0s !important;
407
+ animation-iteration-count: 1 !important;
408
+ scroll-behavior: auto !important;
409
+ }
410
+
411
+ /* Explicit: motion, even where the OS asks for less. */
412
+ [data-motion="Motion"] {
413
+ --Motion-Duration-Instant: 100ms;
414
+ --Motion-Duration-Fast: 150ms;
415
+ --Motion-Duration-Moderate: 200ms;
416
+ --Motion-Duration-Slow: 300ms;
235
417
  }
236
418
 
237
419