@ncino/styles 8.0.0 → 9.0.0-preview.10

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 (27) hide show
  1. package/package.json +12 -4
  2. package/src/gator/_fonts.css +8 -0
  3. package/src/gator/_gator-grid.css +81 -0
  4. package/src/gator/_gator-sizing.css +179 -0
  5. package/src/gator/_gator-typography.css +171 -0
  6. package/src/gator/fonts/OpenSans-VariableFont.woff2 +0 -0
  7. package/src/gator/gator-global-styles.css +31 -0
  8. package/src/gator/themes/MUIGatorTheme.ts +237 -0
  9. package/src/gator/themes/components/accordion.ts +67 -0
  10. package/src/gator/themes/components/alert.ts +53 -0
  11. package/src/gator/themes/components/autocomplete.ts +156 -0
  12. package/src/gator/themes/components/avatar.ts +65 -0
  13. package/src/gator/themes/components/badge.ts +55 -0
  14. package/src/gator/themes/components/button.ts +71 -0
  15. package/src/gator/themes/components/card.ts +202 -0
  16. package/src/gator/themes/components/checkbox.ts +73 -0
  17. package/src/gator/themes/components/chip.ts +270 -0
  18. package/src/gator/themes/components/dialog.ts +62 -0
  19. package/src/gator/themes/components/form-control.ts +103 -0
  20. package/src/gator/themes/components/radio.ts +53 -0
  21. package/src/gator/themes/components/select.ts +74 -0
  22. package/src/gator/themes/components/table.ts +200 -0
  23. package/src/gator/themes/components/text-field.ts +100 -0
  24. package/src/gator/themes/utils/themeConfig.ts +111 -0
  25. package/src/gator/tokens/_gator-global-tokens.css +4 -0
  26. package/src/gator/tokens/primitive.tokens.css +113 -0
  27. package/src/gator/tokens/semantic.tokens.css +349 -0
package/src/gator/tokens/primitive.tokens.css ADDED
@@ -0,0 +1,113 @@
1
+ :host, :root {
2
+ /* Brand Colors */
3
+ /* Base HSL components (set by JavaScript utility) */
4
+ --color-brand-hue-default: 208;
5
+ --color-brand-saturation-default: 69%;
6
+
7
+ /* Solid brand scale using HSL calculations */
8
+ --color-brand-0: hsl(var(--color-brand-hue, var(--color-brand-hue-default)), 50%, 96%); /* #F0F5FA */
9
+ --color-brand-10: hsl(var(--color-brand-hue, var(--color-brand-hue-default)), 44%, 90%); /* #DAE7F1 */
10
+ --color-brand-20: hsl(var(--color-brand-hue, var(--color-brand-hue-default)), 30%, 80%); /* #BDCDDC */
11
+ --color-brand-30: hsl(var(--color-brand-hue, var(--color-brand-hue-default)), var(--color-brand-saturation, var(--color-brand-saturation-default)), 20%); /* #103656 */
12
+ --color-brand-40: hsl(var(--color-brand-hue, var(--color-brand-hue-default)), var(--color-brand-saturation, var(--color-brand-saturation-default)), 16%); /* #0D2B45 */
13
+ --color-brand-50: hsl(var(--color-brand-hue, var(--color-brand-hue-default)), var(--color-brand-saturation, var(--color-brand-saturation-default)), 8%); /* #061622 */
14
+
15
+ /* Alpha variations */
16
+ --color-brand-30-alpha-70: hsla(var(--color-brand-hue, var(--color-brand-hue-default)), var(--color-brand-saturation, var(--color-brand-saturation-default)), 20%, 0.7);
17
+ --color-brand-30-alpha-50: hsla(var(--color-brand-hue, var(--color-brand-hue-default)), var(--color-brand-saturation, var(--color-brand-saturation-default)), 20%, 0.5);
18
+ --color-brand-30-alpha-30: hsla(var(--color-brand-hue, var(--color-brand-hue-default)), var(--color-brand-saturation, var(--color-brand-saturation-default)), 20%, 0.3);
19
+
20
+ /* Neutral Colors */
21
+ --color-neutral-0: #FFFFFF;
22
+ --color-neutral-10: #F7F7F7;
23
+ --color-neutral-20: #F2F2F2;
24
+ --color-neutral-30: #E5E5E5;
25
+ --color-neutral-35: #DBDBDB;
26
+ --color-neutral-40: #BFBFBF;
27
+ --color-neutral-45: #808080;
28
+ --color-neutral-50: #6D6D6D;
29
+ --color-neutral-60: #404040;
30
+ --color-neutral-70: #1F1F1F;
31
+ --color-neutral-80: #040404;
32
+
33
+ /* Neutral Alpha Colors */
34
+ --color-neutral-40-alpha-70: rgba(191, 191, 191, 0.70);
35
+ --color-neutral-40-alpha-50: rgba(191, 191, 191, 0.50);
36
+ --color-neutral-40-alpha-30: rgba(191, 191, 191, 0.30);
37
+ --color-neutral-40-alpha-10: rgba(191, 191, 191, 0.10);
38
+ --color-neutral-40-alpha-8: rgba(191, 191, 191, 0.08);
39
+ --color-neutral-40-alpha-5: rgba(191, 191, 191, 0.05);
40
+ --color-neutral-40-alpha-4: rgba(191, 191, 191, 0.04);
41
+
42
+ --color-neutral-70-alpha-10: rgba(31, 31, 31, 0.10);
43
+ --color-neutral-70-alpha-8: rgba(31, 31, 31, 0.08);
44
+ --color-neutral-70-alpha-5: rgba(31, 31, 31, 0.05);
45
+ --color-neutral-70-alpha-4: rgba(31, 31, 31, 0.04);
46
+
47
+ --color-neutral-80-alpha-60: rgba(4, 4, 4, 0.60);
48
+ --color-neutral-80-alpha-10: rgba(4, 4, 4, 0.10);
49
+
50
+ /* Green Colors */
51
+ --color-green-0: #F2F7F5;
52
+ --color-green-10: #E9F7F0;
53
+ --color-green-20: #90D4B4;
54
+ --color-green-30: #22A969;
55
+ --color-green-40: #1B8754;
56
+ --color-green-50: #14653F;
57
+
58
+ /* Orange Colors */
59
+ --color-orange-0: #FEFBF9;
60
+ --color-orange-10: #FEF1E6;
61
+ --color-orange-20: #F5B77F;
62
+ --color-orange-30: #EC7000;
63
+ --color-orange-40: #BD5A00;
64
+ --color-orange-50: #8D4300;
65
+
66
+ /* Red Colors */
67
+ --color-red-0: #FAF6F5;
68
+ --color-red-10: #FAEBE7;
69
+ --color-red-20: #E99F88;
70
+ --color-red-30: #D44011;
71
+ --color-red-40: #AA330E;
72
+ --color-red-50: #9E2500;
73
+
74
+ /* Purple Colors */
75
+ --color-purple-0: #FCFAFF;
76
+ --color-purple-10: #F6EEFF;
77
+ --color-purple-20: #E5CCFF;
78
+ --color-purple-30: #8000FF;
79
+ --color-purple-40: #6600CC;
80
+ --color-purple-50: #4C0099;
81
+
82
+ /* Blue Colors */
83
+ --color-blue-0: #FAFBFF;
84
+ --color-blue-10: #E8ECFF;
85
+ --color-blue-20: #BBC6FF;
86
+ --color-blue-30: #3355FF;
87
+ --color-blue-40: #2A46D4;
88
+ --color-blue-50: #2238AA;
89
+
90
+ /* Aqua Colors */
91
+ --color-aqua-0: #F7FBFC;
92
+ --color-aqua-10: #EFF9FC;
93
+ --color-aqua-20: #A2DBF0;
94
+ --color-aqua-30: #009FD9;
95
+ --color-aqua-40: #0F6F91;
96
+ --color-aqua-50: #0A5069;
97
+
98
+ /* Gator Green Colors */
99
+ --color-gator-green-0: #F6FAF5;
100
+ --color-gator-green-10: #EFFAED;
101
+ --color-gator-green-20: #BDE1B7;
102
+ --color-gator-green-30: #18A600;
103
+ --color-gator-green-40: #107000;
104
+ --color-gator-green-50: #0D5700;
105
+
106
+ /* Yellow Colors */
107
+ --color-yellow-0: #FEFDF9;
108
+ --color-yellow-10: #FEFBF4;
109
+ --color-yellow-20: #FDE399;
110
+ --color-yellow-30: #FFBB00;
111
+ --color-yellow-40: #966F00;
112
+ --color-yellow-50: #735500;
113
+ }
package/src/gator/tokens/semantic.tokens.css ADDED
@@ -0,0 +1,349 @@
1
+ :host, :root {
2
+ /* Semantic Border Radius */
3
+ --border-radius-no-radius: 0rem;
4
+ --border-radius-x-small: 0.125rem;
5
+ --border-radius-small: 0.25rem;
6
+ --border-radius-medium: 0.5rem;
7
+ --border-radius-large: 0.75rem;
8
+ --border-radius-x-large: 1rem;
9
+ --border-radius-xx-large: 1.5rem;
10
+ --border-radius-xxx-large: 2rem;
11
+ --border-radius-circle: 9999px;
12
+
13
+ /* Semantic Background Colors */
14
+ --color-background-primary: var(--color-neutral-0);
15
+ --color-background-secondary: var(--color-neutral-10);
16
+ --color-background-inverse: var(--color-neutral-80);
17
+
18
+ /* Border Colors */
19
+ --color-border-primary: var(--color-neutral-50);
20
+ --color-border-secondary: var(--color-neutral-40);
21
+ --color-border-tertiary: var(--color-neutral-30);
22
+ --color-border-read-only: var(--color-neutral-40);
23
+ --color-border-disabled: var(--color-neutral-30);
24
+ --color-border-focus: var(--color-neutral-70);
25
+ --color-border-inverse: var(--color-neutral-0);
26
+ --color-border-neutral: var(--color-neutral-70);
27
+ --color-border-neutral-secondary: var(--color-neutral-80);
28
+
29
+ /* Border Colors - Brand */
30
+ --color-border-brand: var(--color-brand-30);
31
+ --color-border-brand-secondary: var(--color-brand-40);
32
+ --color-border-brand-tertiary: var(--color-brand-20);
33
+
34
+ /* Border Colors - Feedback States */
35
+ --color-border-success: var(--color-green-20);
36
+ --color-border-success-secondary: var(--color-green-40);
37
+ --color-border-warning: var(--color-orange-20);
38
+ --color-border-warning-secondary: var(--color-orange-40);
39
+ --color-border-error: var(--color-red-20);
40
+ --color-border-error-secondary: var(--color-red-40);
41
+
42
+ /* Border Colors - Extended Palette */
43
+ --color-border-purple: var(--color-purple-20);
44
+ --color-border-purple-secondary: var(--color-purple-40);
45
+ --color-border-blue: var(--color-blue-20);
46
+ --color-border-blue-secondary: var(--color-blue-40);
47
+ --color-border-aqua: var(--color-aqua-20);
48
+ --color-border-aqua-secondary: var(--color-aqua-40);
49
+ --color-border-gator-green: var(--color-gator-green-20);
50
+ --color-border-gator-green-secondary: var(--color-gator-green-40);
51
+ --color-border-yellow: var(--color-yellow-20);
52
+ --color-border-yellow-secondary: var(--color-yellow-40);
53
+
54
+ /* Data Visualization Colors */
55
+ --color-data-viz-brand-10: var(--color-brand-10);
56
+ --color-data-viz-brand-20: var(--color-brand-20);
57
+ --color-data-viz-brand-30: var(--color-brand-30);
58
+ --color-data-viz-brand-40: var(--color-brand-40);
59
+ --color-data-viz-brand-50: var(--color-brand-50);
60
+ --color-data-viz-success-10: var(--color-green-10);
61
+ --color-data-viz-success-20: var(--color-green-20);
62
+ --color-data-viz-success-30: var(--color-green-30);
63
+ --color-data-viz-success-40: var(--color-green-40);
64
+ --color-data-viz-success-50: var(--color-green-50);
65
+ --color-data-viz-warning-10: var(--color-orange-10);
66
+ --color-data-viz-warning-20: var(--color-orange-20);
67
+ --color-data-viz-warning-30: var(--color-orange-30);
68
+ --color-data-viz-warning-40: var(--color-orange-40);
69
+ --color-data-viz-warning-50: var(--color-orange-50);
70
+ --color-data-viz-error-10: var(--color-red-10);
71
+ --color-data-viz-error-20: var(--color-red-20);
72
+ --color-data-viz-error-30: var(--color-red-30);
73
+ --color-data-viz-error-40: var(--color-red-40);
74
+ --color-data-viz-error-50: var(--color-red-50);
75
+ --color-data-viz-purple-10: var(--color-purple-10);
76
+ --color-data-viz-purple-20: var(--color-purple-20);
77
+ --color-data-viz-purple-30: var(--color-purple-30);
78
+ --color-data-viz-purple-40: var(--color-purple-40);
79
+ --color-data-viz-purple-50: var(--color-purple-50);
80
+ --color-data-viz-blue-10: var(--color-blue-10);
81
+ --color-data-viz-blue-20: var(--color-blue-20);
82
+ --color-data-viz-blue-30: var(--color-blue-30);
83
+ --color-data-viz-blue-40: var(--color-blue-40);
84
+ --color-data-viz-blue-50: var(--color-blue-50);
85
+ --color-data-viz-aqua-10: var(--color-aqua-10);
86
+ --color-data-viz-aqua-20: var(--color-aqua-20);
87
+ --color-data-viz-aqua-30: var(--color-aqua-30);
88
+ --color-data-viz-aqua-40: var(--color-aqua-40);
89
+ --color-data-viz-aqua-50: var(--color-aqua-50);
90
+ --color-data-viz-gator-green-10: var(--color-gator-green-10);
91
+ --color-data-viz-gator-green-20: var(--color-gator-green-20);
92
+ --color-data-viz-gator-green-30: var(--color-gator-green-30);
93
+ --color-data-viz-gator-green-40: var(--color-gator-green-40);
94
+ --color-data-viz-gator-green-50: var(--color-gator-green-50);
95
+ --color-data-viz-yellow-10: var(--color-yellow-10);
96
+ --color-data-viz-yellow-20: var(--color-yellow-20);
97
+ --color-data-viz-yellow-30: var(--color-yellow-30);
98
+ --color-data-viz-yellow-40: var(--color-yellow-40);
99
+ --color-data-viz-yellow-50: var(--color-yellow-50);
100
+
101
+ /* Feedback Colors */
102
+ --color-feedback-brand: var(--color-brand-30);
103
+ --color-feedback-brand-secondary: var(--color-brand-40);
104
+ --color-feedback-brand-tertiary: var(--color-brand-50);
105
+ --color-feedback-neutral: var(--color-neutral-70);
106
+ --color-feedback-neutral-secondary: var(--color-neutral-80);
107
+ --color-feedback-neutral-tertiary: var(--color-neutral-80);
108
+ --color-feedback-success: var(--color-green-30);
109
+ --color-feedback-success-secondary: var(--color-green-40);
110
+ --color-feedback-success-tertiary: var(--color-green-50);
111
+ --color-feedback-warning: var(--color-orange-30);
112
+ --color-feedback-warning-secondary: var(--color-orange-40);
113
+ --color-feedback-warning-tertiary: var(--color-orange-50);
114
+ --color-feedback-error: var(--color-red-30);
115
+ --color-feedback-error-secondary: var(--color-red-40);
116
+ --color-feedback-error-tertiary: var(--color-red-50);
117
+
118
+ /* Icon Colors */
119
+ --color-icon-primary: var(--color-neutral-70);
120
+ --color-icon-secondary: var(--color-neutral-50);
121
+ --color-icon-tertiary: var(--color-neutral-40);
122
+ --color-icon-disabled: var(--color-neutral-40);
123
+ --color-icon-inverse: var(--color-neutral-0);
124
+ --color-icon-brand: var(--color-brand-30);
125
+ --color-icon-brand-secondary: var(--color-brand-20);
126
+ --color-icon-brand-tertiary: var(--color-brand-0);
127
+ --color-icon-success: var(--color-green-40);
128
+ --color-icon-warning: var(--color-orange-40);
129
+ --color-icon-error: var(--color-red-40);
130
+ --color-icon-ai: var(--color-purple-50);
131
+
132
+ /* Illustration Colors */
133
+ --color-illustration-primary: var(--color-neutral-70);
134
+ --color-illustration-brand: var(--color-brand-30);
135
+
136
+ /* Overlay Colors */
137
+ --color-overlay-primary: var(--color-neutral-80-alpha-10);
138
+ --color-overlay-secondary: var(--color-neutral-80-alpha-60);
139
+
140
+ /* Surface Colors */
141
+ --color-surface-primary: var(--color-neutral-0);
142
+ --color-surface-secondary: var(--color-neutral-10);
143
+ --color-surface-tertiary: var(--color-neutral-20);
144
+ --color-surface-neutral: var(--color-neutral-35);
145
+ --color-surface-neutral-secondary: var(--color-neutral-40);
146
+ --color-surface-neutral-tertiary: var(--color-neutral-45);
147
+ --color-surface-inverse: var(--color-neutral-70);
148
+ --color-surface-hover: var(--color-neutral-10);
149
+ --color-surface-disabled: var(--color-neutral-30);
150
+ --color-surface-loading: var(--color-neutral-35);
151
+
152
+ /* Surface Colors - Brand */
153
+ --color-surface-brand: var(--color-brand-0);
154
+ --color-surface-brand-secondary: var(--color-brand-10);
155
+ --color-surface-brand-tertiary: var(--color-brand-20);
156
+
157
+ /* Surface Colors - Feedback States */
158
+ --color-surface-success: var(--color-green-10);
159
+ --color-surface-success-secondary: var(--color-green-20);
160
+ --color-surface-warning: var(--color-orange-10);
161
+ --color-surface-warning-secondary: var(--color-orange-20);
162
+ --color-surface-error: var(--color-red-10);
163
+ --color-surface-error-secondary: var(--color-red-20);
164
+
165
+ /* Surface Colors - Extended Palette */
166
+ --color-surface-purple: var(--color-purple-10);
167
+ --color-surface-purple-secondary: var(--color-purple-20);
168
+ --color-surface-blue: var(--color-blue-10);
169
+ --color-surface-blue-secondary: var(--color-blue-20);
170
+ --color-surface-aqua: var(--color-aqua-10);
171
+ --color-surface-aqua-secondary: var(--color-aqua-20);
172
+ --color-surface-gator-green: var(--color-gator-green-10);
173
+ --color-surface-gator-green-secondary: var(--color-gator-green-20);
174
+ --color-surface-yellow: var(--color-yellow-10);
175
+ --color-surface-yellow-secondary: var(--color-yellow-20);
176
+
177
+ /* Surface Colors - Alpha */
178
+ --color-surface-alpha-neutral-strong: var(--color-neutral-40-alpha-70);
179
+ --color-surface-alpha-neutral-medium: var(--color-neutral-40-alpha-30);
180
+ --color-surface-alpha-brand-strong: var(--color-brand-30-alpha-70);
181
+ --color-surface-alpha-brand-medium: var(--color-brand-30-alpha-50);
182
+ --color-surface-alpha-brand-subtle: var(--color-brand-30-alpha-30);
183
+
184
+ /* Underline Colors */
185
+ --color-underline-primary: var(--color-neutral-40);
186
+ --color-underline-secondary: var(--color-neutral-70);
187
+ --color-underline-tertiary: var(--color-neutral-80);
188
+ --color-underline-brand: var(--color-brand-30);
189
+ --color-underline-brand-secondary: var(--color-brand-40);
190
+ --color-underline-brand-tertiary: var(--color-brand-50);
191
+
192
+ /* Text Colors */
193
+ --color-text-primary: var(--color-neutral-70);
194
+ --color-text-secondary: var(--color-neutral-50);
195
+ --color-text-placeholder: var(--color-neutral-45);
196
+ --color-text-inverse: var(--color-neutral-0);
197
+ --color-text-loading: var(--color-neutral-40);
198
+ --color-text-disabled: var(--color-neutral-40);
199
+ --color-text-brand: var(--color-brand-30);
200
+ --color-text-success: var(--color-green-40);
201
+ --color-text-warning: var(--color-orange-40);
202
+ --color-text-error: var(--color-red-40);
203
+ --color-text-ai: var(--color-purple-40);
204
+
205
+ /* Gradient Colors */
206
+ --color-gradient-surface: radial-gradient(135.16% 99.24% at 113.24% 116.21%, var(--color-surface-warning-secondary, #F5B77F) 0%, rgba(245, 183, 127, 0.00) 100%), radial-gradient(76.31% 76.31% at 50% 50%, var(--color-surface-purple-secondary, #E5CCFF) 0%, rgba(229, 204, 255, 0.00) 100%), radial-gradient(122.16% 126.39% at 8.91% 12.38%, var(--color-surface-aqua-secondary, #A2DBF0) 0%, rgba(162, 219, 240, 0.00) 100%), var(--color-surface-purple, #F6EEFF);
207
+ --color-gradient-surface-secondary: radial-gradient(135.16% 99.24% at 113.24% 116.21%, var(--color-orange-30, rgba(236, 112, 0, 0.50)) 0%, rgba(245, 183, 127, 0.00) 100%), linear-gradient(225deg, var(--color-purple-30, rgba(128, 0, 255, 0.20)) -3.96%, rgba(229, 204, 255, 0.00) 103.96%), radial-gradient(122.16% 126.39% at 8.91% 12.38%, var(--color-purple-30, rgba(128, 0, 255, 0.10)) 0%, rgba(162, 219, 240, 0.00) 100%), var(--color-surface-purple-secondary, #E5CCFF);
208
+ --color-gradient-surface-tertiary: radial-gradient(135.16% 99.24% at 113.24% 116.21%, rgba(245, 183, 127, 0.15) 0%, rgba(245, 183, 127, 0.00) 100%), radial-gradient(76.31% 76.31% at 50% 50%, rgba(229, 204, 255, 0.15) 0%, rgba(229, 204, 255, 0.00) 100%), radial-gradient(122.16% 126.39% at 8.91% 12.38%, rgba(162, 219, 240, 0.15) 0%, rgba(162, 219, 240, 0.00) 100%), var(--color-surface-purple, #F6EEFF);
209
+ --color-gradient-border: linear-gradient(316deg, var(--color-border-warning-secondary, #BD5A00) -11.08%, var(--color-orange-20, #F5B77F) 16.15%, var(--color-data-viz-purple-20, #E5CCFF) 43.38%, var(--color-data-viz-blue-30, #35F) 70.61%, var(--color-data-viz-purple-30, #8000FF) 97.84%);
210
+ --color-gradient-icon: linear-gradient(0deg, var(--color-orange-30, #EC7000) -10.01%, rgba(236, 112, 0, 0.00) 37.14%), linear-gradient(215deg, var(--color-border-aqua-secondary, #0F6F91) 15.88%, rgba(0, 159, 217, 0.00) 87.52%), linear-gradient(64deg, var(--color-border-purple-secondary, #60C) 8.4%, rgba(128, 0, 255, 0.00) 147.46%);
211
+ --color-gradient-text: linear-gradient(0deg, var(--color-orange-30, #EC7000) -10.01%, rgba(236, 112, 0, 0.00) 37.14%), linear-gradient(215deg, var(--color-border-aqua-secondary, #0F6F91) 15.88%, rgba(0, 159, 217, 0.00) 87.52%), linear-gradient(64deg, var(--color-border-purple-secondary, #60C) 8.4%, rgba(128, 0, 255, 0.00) 147.46%);
212
+
213
+ /* Font Families */
214
+ --font-family-headings: "Lexend Deca", system-ui, -apple-system, sans-serif;
215
+ --font-family-body: "Open Sans", system-ui, -apple-system, sans-serif;
216
+
217
+ /* Font Sizes - Desktop */
218
+ --font-size-body-1: 1.0625rem;
219
+ --font-size-body-2: 0.9375rem;
220
+ --font-size-body-3: 0.8125rem;
221
+ --font-size-display-1: 4.5rem;
222
+ --font-size-display-2: 4rem;
223
+ --font-size-heading-1: 2.5rem;
224
+ --font-size-heading-2: 2rem;
225
+ --font-size-heading-3: 1.625rem;
226
+ --font-size-heading-4: 1.375rem;
227
+ --font-size-heading-5: 1.25rem;
228
+ --font-size-heading-6: 1.125rem;
229
+ --font-size-subtitle-1: 1.0625rem;
230
+ --font-size-subtitle-2: 0.9375rem;
231
+ --font-size-subtitle-3: 0.8125rem;
232
+
233
+ /* Font Sizes - Mobile/Small Screens */
234
+ --font-size-sm-display-1: 3rem;
235
+ --font-size-sm-display-2: 2.25rem;
236
+ --font-size-sm-heading-1: 1.75rem;
237
+ --font-size-sm-heading-2: 1.5rem;
238
+ --font-size-sm-heading-3: 1.375rem;
239
+ --font-size-sm-heading-4: 1.25rem;
240
+ --font-size-sm-heading-5: 1.125rem;
241
+ --font-size-sm-heading-6: 1.0625rem;
242
+
243
+ /* Font Weight */
244
+ --font-weight-regular: 400;
245
+ --font-weight-medium: 500;
246
+ --font-weight-semi-bold: 600;
247
+ --font-weight-bold: 700;
248
+
249
+ /* Letter Spacing */
250
+ --letter-spacing-default: 0;
251
+ --letter-spacing-narrow: -1px;
252
+
253
+ /* Line Heights */
254
+ --line-height-body-1: 1.5rem;
255
+ --line-height-body-2: 1.375rem;
256
+ --line-height-body-3: 1.125rem;
257
+ --line-height-display-1: 5.625rem;
258
+ --line-height-display-2: 4.875rem;
259
+ --line-height-heading-1: 3.125rem;
260
+ --line-height-heading-2: 2.625rem;
261
+ --line-height-heading-3: 2.25rem;
262
+ --line-height-heading-4: 2rem;
263
+ --line-height-heading-5: 1.875rem;
264
+ --line-height-heading-6: 1.875rem;
265
+ --line-height-subtitle-1: 1.5rem;
266
+ --line-height-subtitle-2: 1.375rem;
267
+
268
+ /* Line Heights - Mobile/Small Screens */
269
+ --line-height-sm-display-1: 3.5rem;
270
+ --line-height-sm-display-2: 3rem;
271
+ --line-height-sm-heading-1: 2.25rem;
272
+ --line-height-sm-heading-2: 2rem;
273
+ --line-height-sm-heading-3: 2rem;
274
+ --line-height-sm-heading-4: 1.875rem;
275
+ --line-height-sm-heading-5: 1.875rem;
276
+ --line-height-sm-heading-6: 1.875rem;
277
+
278
+ /* Spacing */
279
+ --spacing-0: 0; /* 0px */
280
+ --spacing-1: 0.0625rem; /* 1px */
281
+ --spacing-2: 0.125rem; /* 2px */
282
+ --spacing-3: 0.25rem; /* 4px */
283
+ --spacing-4: 0.3125rem; /* 5px */
284
+ --spacing-5: 0.5rem; /* 8px */
285
+ --spacing-6: 0.5625rem; /* 9px */
286
+ --spacing-7: 0.75rem; /* 12px */
287
+ --spacing-8: 1rem; /* 16px */
288
+ --spacing-9: 1.25rem; /* 20px */
289
+ --spacing-10: 1.5rem; /* 24px */
290
+ --spacing-11: 2rem; /* 32px */
291
+ --spacing-12: 2.5rem; /* 40px */
292
+ --spacing-13: 3rem; /* 48px */
293
+ --spacing-14: 3.5rem; /* 56px */
294
+ --spacing-15: 4rem; /* 64px */
295
+ --spacing-16: 4.5rem; /* 72px */
296
+ --spacing-17: 5rem; /* 80px */
297
+ --spacing-18: 7.5rem; /* 120px */
298
+
299
+ /* Complex Shadows */
300
+ --shadow-1-card:
301
+ 0 1px 1.5px 0px var(--color-neutral-70-alpha-4),
302
+ 0 2px 5px 0px var(--color-neutral-70-alpha-5),
303
+ 0 3px 9px 6px var(--color-neutral-70-alpha-8);
304
+
305
+ --shadow-2-card-raised:
306
+ 0 5px 10px 0px var(--color-neutral-70-alpha-5),
307
+ 0 7px 14px 0px var(--color-neutral-70-alpha-8),
308
+ 0 3px 6px 0px var(--color-neutral-70-alpha-4);
309
+
310
+ --shadow-3-dropdown:
311
+ 0 7px 12px 0px var(--color-neutral-70-alpha-5),
312
+ 0 8px 16px 0px var(--color-neutral-70-alpha-8),
313
+ 0 9px 18px 0px var(--color-neutral-70-alpha-10);
314
+
315
+ --shadow-4-modal:
316
+ 0 9px 15px 0px var(--color-neutral-70-alpha-5),
317
+ 0 10px 20px 0px var(--color-neutral-70-alpha-8),
318
+ 0 9px 20px 0px var(--color-neutral-70-alpha-10);
319
+
320
+ --shadow-popover:
321
+ 0 -1px 1.5px 0px var(--color-neutral-70-alpha-4),
322
+ 0 2px 5px 0px var(--color-neutral-70-alpha-5),
323
+ 0 3px 9px 6px var(--color-neutral-70-alpha-8);
324
+
325
+ --shadow-panel-right:
326
+ -4px 0 10px 0px var(--color-neutral-70-alpha-5),
327
+ -4px 0 14px 0px var(--color-neutral-70-alpha-8),
328
+ -4px 0 6px 0px var(--color-neutral-70-alpha-4);
329
+
330
+ --shadow-panel-left:
331
+ 4px 0 10px 0px var(--color-neutral-70-alpha-5),
332
+ 4px 0 14px 0px var(--color-neutral-70-alpha-8),
333
+ 4px 0 6px 0px var(--color-neutral-70-alpha-4);
334
+
335
+ --shadow-panel-bottom:
336
+ 0 -4px 10px 0px var(--color-neutral-70-alpha-5),
337
+ 0 -4px 14px 0px var(--color-neutral-70-alpha-8),
338
+ 0 -4px 6px 0px var(--color-neutral-70-alpha-4);
339
+
340
+ --shadow-panel-top:
341
+ 0 4px 10px 0px var(--color-neutral-70-alpha-5),
342
+ 0 4px 14px 0px var(--color-neutral-70-alpha-8),
343
+ 0 4px 6px 0px var(--color-neutral-70-alpha-4);
344
+
345
+ /* Blur Effects */
346
+ --blur-sm: 4px;
347
+ --blur-md: 8px;
348
+ --blur-lg: 12px;
349
+ }