@sproutsocial/seeds-theme 0.1.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/README.md +259 -0
  2. package/dist/css-tokens.json +134 -0
  3. package/dist/legacy-dark.css +437 -0
  4. package/dist/legacy-light.css +437 -0
  5. package/dist/legacy.css +659 -0
  6. package/dist/schema.json +11798 -0
  7. package/dist/shadcn-dark.css +2 -0
  8. package/dist/shadcn-light.css +2 -0
  9. package/dist/shadcn.css +2 -0
  10. package/dist/shadcn.registry.json +77 -0
  11. package/dist/source/shadcn-dark.tokens.json +169 -0
  12. package/dist/source/shadcn-light.tokens.json +169 -0
  13. package/dist/source/theme-dark.tokens.json +1945 -0
  14. package/dist/source/theme-light.tokens.json +1945 -0
  15. package/dist/styled-components/index.cjs +1648 -0
  16. package/dist/styled-components/index.d.ts +3654 -0
  17. package/dist/styled-components/index.js +1641 -0
  18. package/dist/styled-components/index.ts +5285 -0
  19. package/dist/tailwind.css +40 -0
  20. package/dist/theme-dark.css +388 -0
  21. package/dist/theme-dark.d.ts +420 -0
  22. package/dist/theme-dark.js +401 -0
  23. package/dist/theme-dark.json +712 -0
  24. package/dist/theme-light.css +388 -0
  25. package/dist/theme-light.d.ts +420 -0
  26. package/dist/theme-light.js +400 -0
  27. package/dist/theme-light.json +712 -0
  28. package/dist/theme.css +611 -0
  29. package/mode-authoring.md +54 -0
  30. package/package.json +96 -0
  31. package/src/cli.js +42 -0
  32. package/src/compiler.d.ts +9 -0
  33. package/src/compiler.js +533 -0
  34. package/src/config.d.ts +39 -0
  35. package/src/config.js +280 -0
  36. package/src/contract.js +351 -0
  37. package/src/extension-schema.js +88 -0
  38. package/src/extension.d.ts +18 -0
  39. package/src/extension.js +81 -0
  40. package/src/index.d.ts +90 -0
  41. package/src/index.js +9 -0
  42. package/src/primitives.js +98 -0
@@ -0,0 +1,40 @@
1
+ @custom-variant dark (&:where(.dark, .dark *));
2
+
3
+ @theme inline {
4
+ --color-background: var(--background);
5
+ --color-foreground: var(--foreground);
6
+ --color-card: var(--card);
7
+ --color-card-foreground: var(--card-foreground);
8
+ --color-popover: var(--popover);
9
+ --color-popover-foreground: var(--popover-foreground);
10
+ --color-primary: var(--primary);
11
+ --color-primary-foreground: var(--primary-foreground);
12
+ --color-secondary: var(--secondary);
13
+ --color-secondary-foreground: var(--secondary-foreground);
14
+ --color-muted: var(--muted);
15
+ --color-muted-foreground: var(--muted-foreground);
16
+ --color-accent: var(--accent);
17
+ --color-accent-foreground: var(--accent-foreground);
18
+ --color-destructive: var(--destructive);
19
+ --color-destructive-foreground: var(--destructive-foreground);
20
+ --color-border: var(--border);
21
+ --color-input: var(--input);
22
+ --color-ring: var(--ring);
23
+ --color-chart-1: var(--chart-1);
24
+ --color-chart-2: var(--chart-2);
25
+ --color-chart-3: var(--chart-3);
26
+ --color-chart-4: var(--chart-4);
27
+ --color-chart-5: var(--chart-5);
28
+ --color-sidebar: var(--sidebar);
29
+ --color-sidebar-foreground: var(--sidebar-foreground);
30
+ --color-sidebar-primary: var(--sidebar-primary);
31
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
32
+ --color-sidebar-accent: var(--sidebar-accent);
33
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
34
+ --color-sidebar-border: var(--sidebar-border);
35
+ --color-sidebar-ring: var(--sidebar-ring);
36
+ --radius-sm: calc(var(--radius) - 4px);
37
+ --radius-md: calc(var(--radius) - 2px);
38
+ --radius-lg: var(--radius);
39
+ --radius-xl: calc(var(--radius) + 4px);
40
+ }
@@ -0,0 +1,388 @@
1
+ :root:where(.dark) {
2
+ --breakpoints-0: 900px;
3
+ --breakpoints-1: 1200px;
4
+ --breakpoints-2: 1500px;
5
+ --breakpoints-3: 1800px;
6
+ --breakpoints-sm: 640px;
7
+ --breakpoints-md: 768px;
8
+ --breakpoints-lg: 1024px;
9
+ --breakpoints-xl: 1280px;
10
+ --colors-gradient-ai-stop-2: oklch(0.7164 0.1786 301.98); /** Theme-owned AI gradient middle stop. No exact existing seeds-color primitive; preserved for compatibility. Other stops reference seeds-color. */
11
+ --colors-button-primary-border-base: oklch(0.0000 0.0000 0.00 / 0);
12
+ --colors-button-secondary-background-base: oklch(0.0000 0.0000 0.00 / 0);
13
+ --colors-button-pill-background-base: oklch(0.0000 0.0000 0.00 / 0);
14
+ --colors-button-pill-border-base: oklch(0.0000 0.0000 0.00 / 0);
15
+ --colors-button-destructive-border-base: oklch(0.0000 0.0000 0.00 / 0);
16
+ --colors-button-placeholder-background-base: oklch(0.0000 0.0000 0.00 / 0);
17
+ --colors-button-unstyled-background-base: oklch(0.0000 0.0000 0.00 / 0);
18
+ --colors-button-unstyled-border-base: oklch(0.0000 0.0000 0.00 / 0);
19
+ --colors-button-ai-primary-border-base: oklch(0.0000 0.0000 0.00 / 0);
20
+ --colors-button-ai-secondary-border-base: oklch(0.0000 0.0000 0.00 / 0);
21
+ --colors-button-ai-outline-background-base: oklch(0.0000 0.0000 0.00 / 0);
22
+ --colors-list-item-background-base: oklch(0.0000 0.0000 0.00 / 0);
23
+ --colors-nav-nav-item-background-base: oklch(0.0000 0.0000 0.00 / 0);
24
+ --colors-navigation-settings-list-item-background-base: oklch(0.0000 0.0000 0.00 / 0);
25
+ --mode: dark;
26
+ --colors-container-background-positive-sentiment: var(--color-blue-500);
27
+ --colors-container-background-negative-sentiment: var(--color-red-500);
28
+ --colors-container-background-neutral-sentiment: var(--color-neutral-300);
29
+ --colors-container-background-base: var(--color-neutral-900);
30
+ --colors-container-background-success: var(--color-green-900);
31
+ --colors-container-background-warning: var(--color-yellow-900);
32
+ --colors-container-background-error: var(--color-red-900);
33
+ --colors-container-background-info: var(--color-blue-900);
34
+ --colors-container-background-opportunity: var(--color-purple-900);
35
+ --colors-container-background-danger: var(--color-red-900);
36
+ --colors-container-background-decorative-green: var(--color-green-900);
37
+ --colors-container-background-decorative-blue: var(--color-blue-900);
38
+ --colors-container-background-decorative-purple: var(--color-purple-900);
39
+ --colors-container-background-decorative-yellow: var(--color-yellow-900);
40
+ --colors-container-background-decorative-orange: var(--color-orange-900);
41
+ --colors-container-background-decorative-red: var(--color-red-900);
42
+ --colors-container-background-decorative-neutral: var(--color-neutral-1000);
43
+ --colors-container-background-decorative-magenta: var(--color-magenta-900);
44
+ --colors-container-background-decorative-pink: var(--color-pink-900);
45
+ --colors-container-background-decorative-aqua: var(--color-aqua-900);
46
+ --colors-container-background-decorative-teal: var(--color-teal-900);
47
+ --colors-container-background-selected: var(--color-neutral-0);
48
+ --colors-container-border-success: var(--color-green-500);
49
+ --colors-container-border-warning: var(--color-yellow-600);
50
+ --colors-container-border-error: var(--color-red-600);
51
+ --colors-container-border-danger: var(--color-red-600);
52
+ --colors-container-border-info: var(--color-blue-600);
53
+ --colors-container-border-opportunity: var(--color-purple-500);
54
+ --colors-container-border-decorative-green: var(--color-green-500);
55
+ --colors-container-border-decorative-blue: var(--color-blue-600);
56
+ --colors-container-border-decorative-purple: var(--color-purple-500);
57
+ --colors-container-border-decorative-yellow: var(--color-yellow-600);
58
+ --colors-container-border-decorative-orange: var(--color-orange-600);
59
+ --colors-container-border-decorative-red: var(--color-red-600);
60
+ --colors-container-border-decorative-neutral: var(--color-neutral-600);
61
+ --colors-container-border-decorative-magenta: var(--color-magenta-600);
62
+ --colors-container-border-decorative-pink: var(--color-pink-600);
63
+ --colors-container-border-decorative-aqua: var(--color-aqua-500);
64
+ --colors-container-border-decorative-teal: var(--color-teal-500);
65
+ --colors-container-border-ai-generated: var(--color-purple-700);
66
+ --colors-container-border-base: var(--color-neutral-1100);
67
+ --colors-container-border-selected: var(--color-neutral-0);
68
+ --colors-gradient-ai-stop-3: var(--color-magenta-400);
69
+ --colors-gradient-ai: radial-gradient(circle at bottom left, var(--color-blue-400) 0%, var(--colors-gradient-ai-stop-2) 61%, var(--color-magenta-400) 100%);
70
+ --colors-gradient-ai-subtle: radial-gradient(circle at bottom left, color-mix(in srgb, var(--color-blue-400), transparent 80%) 0%, color-mix(in srgb, var(--colors-gradient-ai-stop-2), transparent 80%) 61%, color-mix(in srgb, var(--color-magenta-400), transparent 80%) 100%);
71
+ --colors-gradient-ai-stop-1: var(--color-blue-400);
72
+ --colors-button-primary-background-base: var(--color-blue-400);
73
+ --colors-button-primary-background-hover: var(--color-blue-300);
74
+ --colors-button-primary-background-active: var(--color-blue-200);
75
+ --colors-button-primary-text-base: var(--color-neutral-900);
76
+ --colors-button-primary-text-hover: var(--color-neutral-1000);
77
+ --colors-button-secondary-background-hover: var(--color-neutral-100);
78
+ --colors-button-secondary-background-active: var(--color-neutral-0);
79
+ --colors-button-secondary-border-base: var(--color-neutral-0);
80
+ --colors-button-secondary-text-base: var(--color-neutral-0);
81
+ --colors-button-secondary-text-hover: var(--color-neutral-800);
82
+ --colors-button-pill-background-hover: var(--color-neutral-1000);
83
+ --colors-button-pill-background-active: var(--color-neutral-900);
84
+ --colors-button-pill-border-hover: var(--color-neutral-0);
85
+ --colors-button-pill-text-base: var(--color-neutral-100);
86
+ --colors-button-pill-text-hover: var(--color-neutral-0);
87
+ --colors-button-destructive-background-base: var(--color-red-400);
88
+ --colors-button-destructive-background-hover: var(--color-red-300);
89
+ --colors-button-destructive-background-active: var(--color-red-200);
90
+ --colors-button-destructive-text-base: var(--color-neutral-900);
91
+ --colors-button-destructive-text-hover: var(--color-neutral-1000);
92
+ --colors-button-placeholder-background-hover: var(--color-neutral-1100);
93
+ --colors-button-placeholder-background-active: var(--color-neutral-1100);
94
+ --colors-button-placeholder-border-base: var(--color-neutral-500);
95
+ --colors-button-placeholder-text-base: var(--color-blue-400);
96
+ --colors-button-placeholder-text-hover: var(--color-blue-300);
97
+ --colors-button-unstyled-text-base: var(--color-neutral-300);
98
+ --colors-button-unstyled-text-hover: var(--color-neutral-200);
99
+ --colors-button-ai-primary-text-base: var(--color-neutral-0);
100
+ --colors-button-ai-primary-text-hover: var(--color-neutral-0);
101
+ --colors-button-ai-secondary-text-base: var(--color-neutral-100);
102
+ --colors-button-ai-secondary-text-hover: var(--color-neutral-100);
103
+ --colors-button-ai-outline-text-base: var(--color-neutral-100);
104
+ --colors-button-ai-outline-text-hover: var(--color-neutral-100);
105
+ --colors-button-overlay-background-base: color-mix(in srgb, var(--color-neutral-0), transparent 40%);
106
+ --colors-button-overlay-background-hover: color-mix(in srgb, var(--color-neutral-0), transparent 25%);
107
+ --colors-button-overlay-text-base: var(--color-neutral-1000);
108
+ --colors-icon-positive-sentiment: var(--color-blue-600);
109
+ --colors-icon-negative-sentiment: var(--color-red-600);
110
+ --colors-icon-base: var(--color-neutral-100);
111
+ --colors-icon-inverse: var(--color-neutral-900);
112
+ --colors-icon-success: var(--color-green-100);
113
+ --colors-icon-warning: var(--color-yellow-100);
114
+ --colors-icon-error: var(--color-red-100);
115
+ --colors-icon-danger: var(--color-red-100);
116
+ --colors-icon-info: var(--color-blue-100);
117
+ --colors-icon-opportunity: var(--color-purple-100);
118
+ --colors-icon-applied: var(--color-blue-400);
119
+ --colors-icon-neutral-sentiment: var(--color-neutral-500);
120
+ --colors-form-border-error: var(--color-red-600);
121
+ --colors-form-border-warning: var(--color-yellow-600);
122
+ --colors-form-border-base: var(--color-neutral-500);
123
+ --colors-form-border-selected: var(--color-neutral-0);
124
+ --colors-form-background-base: var(--color-neutral-900);
125
+ --colors-form-background-selected: var(--color-neutral-0);
126
+ --colors-form-placeholder-base: var(--color-neutral-500);
127
+ --colors-list-item-background-hover: var(--color-neutral-800);
128
+ --colors-list-item-background-selected: var(--color-neutral-0);
129
+ --colors-list-item-background-active: var(--color-neutral-0);
130
+ --colors-list-item-border-base: var(--color-neutral-600);
131
+ --colors-nav-nav-item-text-base: var(--color-neutral-0);
132
+ --colors-nav-nav-item-icon-base: var(--color-neutral-0);
133
+ --colors-nav-nav-item-indicator-notification-base: var(--color-pink-600);
134
+ --colors-nav-nav-item-indicator-user-status-online: var(--color-green-500);
135
+ --colors-nav-nav-item-indicator-user-status-offline: var(--color-red-600);
136
+ --colors-nav-nav-item-indicator-user-status-unavailable: var(--color-neutral-800);
137
+ --colors-nav-nav-item-background-hover: var(--color-neutral-800);
138
+ --colors-nav-nav-item-background-active: var(--color-neutral-1100);
139
+ --colors-nav-nav-item-background-selected: var(--color-neutral-700);
140
+ --colors-nav-nav-item-border-hover: var(--color-neutral-700);
141
+ --colors-nav-nav-item-border-active: var(--color-neutral-700);
142
+ --colors-nav-nav-item-border-selected: var(--color-neutral-700);
143
+ --colors-overlay-text-base: var(--color-neutral-0);
144
+ --colors-overlay-icon-base: var(--color-neutral-0);
145
+ --colors-overlay-background-base: color-mix(in srgb, var(--color-neutral-1000), transparent 28%);
146
+ --colors-overlay-background-inverse: color-mix(in srgb, var(--color-neutral-1100), transparent 30%);
147
+ --colors-illustration-fill: var(--color-blue-400);
148
+ --colors-illustration-stroke: var(--color-neutral-100);
149
+ --colors-dataviz-map-1: var(--color-teal-400);
150
+ --colors-dataviz-map-2: var(--color-purple-400);
151
+ --colors-dataviz-map-3: var(--color-pink-400);
152
+ --colors-dataviz-map-4: var(--color-yellow-500);
153
+ --colors-dataviz-map-5: var(--color-blue-400);
154
+ --colors-dataviz-map-6: var(--color-magenta-400);
155
+ --colors-dataviz-map-7: var(--color-green-400);
156
+ --colors-dataviz-map-8: var(--color-orange-400);
157
+ --colors-dataviz-map-9: var(--color-red-700);
158
+ --colors-dataviz-map-10: var(--color-teal-700);
159
+ --colors-dataviz-map-11: var(--color-purple-700);
160
+ --colors-dataviz-map-12: var(--color-pink-700);
161
+ --colors-dataviz-map-13: var(--color-yellow-800);
162
+ --colors-dataviz-map-14: var(--color-blue-700);
163
+ --colors-dataviz-map-15: var(--color-magenta-700);
164
+ --colors-dataviz-map-16: var(--color-green-700);
165
+ --colors-dataviz-map-17: var(--color-orange-700);
166
+ --colors-dataviz-map-18: var(--color-red-400);
167
+ --colors-dataviz-map-19: var(--color-green-200);
168
+ --colors-dataviz-map-20: var(--color-yellow-200);
169
+ --colors-dataviz-list-0: var(--color-teal-400);
170
+ --colors-dataviz-list-1: var(--color-purple-400);
171
+ --colors-dataviz-list-2: var(--color-pink-400);
172
+ --colors-dataviz-list-3: var(--color-yellow-500);
173
+ --colors-dataviz-list-4: var(--color-blue-400);
174
+ --colors-dataviz-list-5: var(--color-magenta-400);
175
+ --colors-dataviz-list-6: var(--color-green-400);
176
+ --colors-dataviz-list-7: var(--color-orange-400);
177
+ --colors-dataviz-list-8: var(--color-red-700);
178
+ --colors-dataviz-list-9: var(--color-teal-700);
179
+ --colors-dataviz-list-10: var(--color-purple-700);
180
+ --colors-dataviz-list-11: var(--color-pink-700);
181
+ --colors-dataviz-list-12: var(--color-yellow-800);
182
+ --colors-dataviz-list-13: var(--color-blue-700);
183
+ --colors-dataviz-list-14: var(--color-magenta-700);
184
+ --colors-dataviz-list-15: var(--color-green-700);
185
+ --colors-dataviz-list-16: var(--color-orange-700);
186
+ --colors-dataviz-list-17: var(--color-red-400);
187
+ --colors-dataviz-list-18: var(--color-green-200);
188
+ --colors-dataviz-list-19: var(--color-yellow-200);
189
+ --colors-dataviz-placeholder: var(--color-neutral-800);
190
+ --colors-dataviz-colors-list-0: var(--color-teal-400);
191
+ --colors-dataviz-colors-list-1: var(--color-purple-400);
192
+ --colors-dataviz-colors-list-2: var(--color-pink-400);
193
+ --colors-dataviz-colors-list-3: var(--color-yellow-500);
194
+ --colors-dataviz-colors-list-4: var(--color-blue-400);
195
+ --colors-dataviz-colors-list-5: var(--color-magenta-400);
196
+ --colors-dataviz-colors-list-6: var(--color-green-400);
197
+ --colors-dataviz-colors-list-7: var(--color-orange-400);
198
+ --colors-dataviz-colors-list-8: var(--color-red-700);
199
+ --colors-dataviz-colors-list-9: var(--color-teal-700);
200
+ --colors-dataviz-colors-list-10: var(--color-purple-700);
201
+ --colors-dataviz-colors-list-11: var(--color-pink-700);
202
+ --colors-dataviz-colors-list-12: var(--color-yellow-800);
203
+ --colors-dataviz-colors-list-13: var(--color-blue-700);
204
+ --colors-dataviz-colors-list-14: var(--color-magenta-700);
205
+ --colors-dataviz-colors-list-15: var(--color-green-700);
206
+ --colors-dataviz-colors-list-16: var(--color-orange-700);
207
+ --colors-dataviz-colors-list-17: var(--color-red-400);
208
+ --colors-dataviz-colors-list-18: var(--color-green-200);
209
+ --colors-dataviz-colors-list-19: var(--color-yellow-200);
210
+ --colors-dataviz-colors-map-1: var(--color-teal-400);
211
+ --colors-dataviz-colors-map-2: var(--color-purple-400);
212
+ --colors-dataviz-colors-map-3: var(--color-pink-400);
213
+ --colors-dataviz-colors-map-4: var(--color-yellow-500);
214
+ --colors-dataviz-colors-map-5: var(--color-blue-400);
215
+ --colors-dataviz-colors-map-6: var(--color-magenta-400);
216
+ --colors-dataviz-colors-map-7: var(--color-green-400);
217
+ --colors-dataviz-colors-map-8: var(--color-orange-400);
218
+ --colors-dataviz-colors-map-9: var(--color-red-700);
219
+ --colors-dataviz-colors-map-10: var(--color-teal-700);
220
+ --colors-dataviz-colors-map-11: var(--color-purple-700);
221
+ --colors-dataviz-colors-map-12: var(--color-pink-700);
222
+ --colors-dataviz-colors-map-13: var(--color-yellow-800);
223
+ --colors-dataviz-colors-map-14: var(--color-blue-700);
224
+ --colors-dataviz-colors-map-15: var(--color-magenta-700);
225
+ --colors-dataviz-colors-map-16: var(--color-green-700);
226
+ --colors-dataviz-colors-map-17: var(--color-orange-700);
227
+ --colors-dataviz-colors-map-18: var(--color-red-400);
228
+ --colors-dataviz-colors-map-19: var(--color-green-200);
229
+ --colors-dataviz-colors-map-20: var(--color-yellow-200);
230
+ --colors-ai-feature-decorative-primary: var(--color-teal-800);
231
+ --colors-ai-feature-decorative-secondary: var(--color-blue-900);
232
+ --colors-ai-feature-background-primary: var(--color-teal-100);
233
+ --colors-ai-feature-background-secondary: var(--color-blue-200);
234
+ --colors-ai-feature-background-default-primary: var(--color-teal-100);
235
+ --colors-ai-feature-background-default-secondary: var(--color-blue-200);
236
+ --colors-ai-feature-background-inverse-primary: var(--color-teal-800);
237
+ --colors-ai-feature-background-inverse-secondary: var(--color-blue-900);
238
+ --colors-navigation-settings-list-item-background-hover: var(--color-neutral-1100);
239
+ --colors-navigation-settings-list-item-background-selected: var(--color-neutral-800);
240
+ --colors-navigation-text-base: var(--color-neutral-0);
241
+ --colors-navigation-text-hover: var(--color-neutral-0);
242
+ --colors-navigation-icon-base: var(--color-neutral-0);
243
+ --colors-navigation-icon-hover: var(--color-neutral-0);
244
+ --colors-navigation-list-item-background-selected: var(--color-neutral-700);
245
+ --colors-navigation-list-item-background-base: var(--color-neutral-1000);
246
+ --colors-navigation-list-item-background-hover: var(--color-neutral-1100);
247
+ --colors-navigation-main-background-base: var(--color-neutral-1000);
248
+ --colors-navigation-main-background-overflow-gradient: var(--color-neutral-1100);
249
+ --colors-navigation-main-border-base: var(--color-neutral-1100);
250
+ --colors-navigation-secondary-background-base: var(--color-neutral-900);
251
+ --colors-navigation-secondary-widget-background-base: var(--color-neutral-800);
252
+ --colors-navigation-secondary-accordion-background-base: rgb(from var(--color-neutral-1000) r g b / calc(163 / 255));
253
+ --colors-date-picker-comparison-background-base: var(--color-neutral-400);
254
+ --colors-date-picker-comparison-text-base: var(--color-neutral-800);
255
+ --colors-listening-chart-indicator-hover-secondary: var(--color-neutral-0);
256
+ --colors-listening-chart-indicator-hover-primary: var(--color-neutral-300);
257
+ --colors-listening-chart-indicator-default-primary: var(--color-neutral-100);
258
+ --colors-listening-chart-indicator-default-secondary: var(--color-neutral-900);
259
+ --colors-listening-chart-spike-background-base: var(--color-teal-500);
260
+ --colors-listening-chart-spike-icon-base: var(--color-neutral-0);
261
+ --colors-listening-topic-types-brand-health: var(--color-red-400);
262
+ --colors-listening-topic-types-industry-insights: var(--color-green-400);
263
+ --colors-listening-topic-types-competitive-analysis: var(--color-yellow-400);
264
+ --colors-listening-topic-types-campaign-analysis: var(--color-magenta-400);
265
+ --colors-listening-topic-types-event-monitoring: var(--color-aqua-400);
266
+ --colors-listening-topic-types-featured-topic: var(--color-green-400);
267
+ --colors-listening-topic-types-custom-topic: var(--color-teal-400);
268
+ --colors-listening-world-map-empty: var(--color-neutral-200);
269
+ --colors-listening-world-map-q0: var(--color-purple-200);
270
+ --colors-listening-world-map-q1: var(--color-purple-300);
271
+ --colors-listening-world-map-q2: var(--color-purple-400);
272
+ --colors-listening-world-map-q3: var(--color-purple-500);
273
+ --colors-listening-world-map-q4: var(--color-purple-600);
274
+ --colors-listening-world-map-q5: var(--color-purple-700);
275
+ --colors-listening-world-map-q6: var(--color-purple-800);
276
+ --colors-listening-world-map-q7: var(--color-purple-900);
277
+ --colors-growth-carousel-indicator-active: var(--color-blue-600);
278
+ --colors-growth-carousel-indicator-inactive: var(--color-neutral-300);
279
+ --colors-growth-education-decorative-aqua: var(--color-aqua-600);
280
+ --colors-growth-education-decorative-teal: var(--color-teal-500);
281
+ --colors-growth-opportunity-background-base: var(--color-purple-700);
282
+ --colors-growth-opportunity-background-secondary: var(--color-neutral-700);
283
+ --colors-growth-opportunity-background-hover: var(--color-purple-500);
284
+ --colors-growth-opportunity-decorative-green: var(--color-green-700);
285
+ --colors-growth-opportunity-decorative-light-aqua: var(--color-aqua-600);
286
+ --colors-growth-opportunity-decorative-dark-aqua: var(--color-aqua-1100);
287
+ --colors-growth-opportunity-decorative-purple: var(--color-purple-700);
288
+ --colors-growth-opportunity-button-primary-base: var(--color-purple-400);
289
+ --colors-growth-opportunity-button-primary-hover: var(--color-purple-300);
290
+ --colors-growth-opportunity-badge-background-base: var(--color-purple-700);
291
+ --colors-growth-opportunity-badge-background-active: var(--color-purple-100);
292
+ --colors-growth-opportunity-badge-icon-base: var(--color-purple-200);
293
+ --colors-growth-opportunity-badge-icon-active: var(--color-purple-800);
294
+ --colors-growth-opportunity-badge-text-base: var(--color-purple-200);
295
+ --colors-growth-dark-modal-background-base: var(--color-aqua-1100);
296
+ --colors-growth-dark-modal-text-base: var(--color-neutral-0);
297
+ --colors-growth-dark-modal-cards-background-base: var(--color-neutral-0);
298
+ --colors-growth-dark-modal-cards-background-hover: var(--color-purple-100);
299
+ --colors-growth-dark-modal-cards-text-base: var(--color-neutral-800);
300
+ --colors-growth-dark-modal-cards-text-hover: var(--color-neutral-900);
301
+ --colors-growth-dark-modal-cards-border-base: var(--color-neutral-0);
302
+ --colors-growth-dark-modal-cards-border-hover: var(--color-purple-700);
303
+ --colors-growth-user-status-online: var(--color-green-700);
304
+ --colors-growth-featured-demo-background-primary-base: var(--color-blue-400);
305
+ --colors-growth-featured-demo-background-primary-hover: var(--color-blue-100);
306
+ --colors-growth-featured-demo-background-secondary-base: var(--color-purple-500);
307
+ --colors-growth-featured-demo-background-secondary-hover: var(--color-purple-100);
308
+ --colors-app-background-base: var(--color-neutral-1000);
309
+ --colors-link-base: var(--color-blue-400);
310
+ --colors-link-hover: var(--color-blue-300);
311
+ --colors-text-headline: var(--color-neutral-0);
312
+ --colors-text-subtext: var(--color-neutral-200);
313
+ --colors-text-body: var(--color-neutral-100);
314
+ --colors-text-inverse: var(--color-neutral-900);
315
+ --colors-text-error: var(--color-red-100);
316
+ --colors-text-background-highlight: var(--color-yellow-900);
317
+ --colors-text-background-selection: var(--color-blue-800);
318
+ --colors-text-decorative-green: var(--color-green-100);
319
+ --colors-text-decorative-blue: var(--color-blue-100);
320
+ --colors-text-decorative-purple: var(--color-purple-100);
321
+ --colors-text-decorative-yellow: var(--color-yellow-100);
322
+ --colors-text-decorative-orange: var(--color-orange-100);
323
+ --colors-text-decorative-red: var(--color-red-100);
324
+ --colors-text-decorative-neutral: var(--color-neutral-100);
325
+ --colors-text-decorative-magenta: var(--color-magenta-100);
326
+ --colors-text-decorative-pink: var(--color-pink-100);
327
+ --colors-text-decorative-aqua: var(--color-aqua-100);
328
+ --colors-text-decorative-teal: var(--color-teal-100);
329
+ --colors-text-ai-generated: var(--color-neutral-0);
330
+ --colors-menu-item-background-active: var(--color-neutral-700);
331
+ --colors-elevation-base: rgb(from var(--color-neutral-1100) r g b / calc(255 / 255));
332
+ --colors-user-status-online: var(--color-green-500);
333
+ --colors-user-status-offline: var(--color-red-500);
334
+ --colors-user-status-unavailable: var(--color-neutral-500);
335
+ --colors-analytics-trend-positive: var(--color-teal-500);
336
+ --colors-analytics-trend-neutral: var(--color-neutral-100);
337
+ --colors-analytics-trend-negative: var(--color-neutral-100);
338
+ --colors-analytics-overlay-background-base: color-mix(in srgb, var(--color-neutral-900), transparent 20%);
339
+ --colors-card-control-background-base: var(--color-neutral-900);
340
+ --colors-card-control-background-selected: var(--color-neutral-700);
341
+ --colors-card-control-background-hover: var(--color-neutral-800);
342
+ --colors-card-control-text-selected: var(--color-neutral-100);
343
+ --colors-tags-collections-background-base: var(--color-neutral-800);
344
+ --colors-placeholder: var(--color-neutral-800);
345
+ --radii-inner: var(--border-radius-500);
346
+ --radii-outer: var(--border-radius-600);
347
+ --radii-pill: var(--border-radius-1000);
348
+ --shadows-low: var(--elevation-level-100) var(--colors-elevation-base);
349
+ --shadows-medium: var(--elevation-level-300) var(--colors-elevation-base);
350
+ --shadows-high: var(--elevation-level-400) var(--colors-elevation-base);
351
+ --colors-container-background-ai-generated: var(--colors-gradient-ai-subtle), var(--colors-container-background-base);
352
+ --colors-button-ai-primary-background-base: var(--colors-gradient-ai);
353
+ --colors-button-ai-secondary-background-base: var(--colors-gradient-ai-subtle);
354
+ --colors-button-ai-outline-border-base: var(--colors-gradient-ai);
355
+ --background: var(--colors-app-background-base); /** Background CSS alias for colors.app.background.base. */
356
+ --foreground: var(--colors-text-body); /** Foreground CSS alias for colors.text.body. */
357
+ --card: var(--colors-container-background-base); /** Card CSS alias for colors.container.background.base. */
358
+ --card-foreground: var(--colors-text-headline); /** Card foreground CSS alias for colors.text.headline. */
359
+ --popover: var(--colors-container-background-base); /** Popover CSS alias for colors.container.background.base. */
360
+ --popover-foreground: var(--colors-text-body); /** Popover foreground CSS alias for colors.text.body. */
361
+ --primary: var(--colors-button-primary-background-base); /** Primary CSS alias for colors.button.primary.background.base. */
362
+ --primary-foreground: var(--colors-button-primary-text-base); /** Primary foreground CSS alias for colors.button.primary.text.base. */
363
+ --secondary: var(--colors-container-border-base); /** Secondary CSS alias for colors.container.border.base. */
364
+ --secondary-foreground: var(--colors-text-body); /** Secondary foreground CSS alias for colors.text.body. */
365
+ --muted: var(--colors-container-background-decorative-neutral); /** Muted CSS alias for colors.container.background.decorative.neutral. */
366
+ --muted-foreground: var(--colors-text-subtext); /** Muted foreground CSS alias for colors.text.subtext. */
367
+ --accent: var(--colors-list-item-background-hover); /** Accent CSS alias for colors.listItem.background.hover. */
368
+ --accent-foreground: var(--colors-text-body); /** Accent foreground CSS alias for colors.text.body. */
369
+ --destructive: var(--colors-button-destructive-background-base); /** Destructive CSS alias for colors.button.destructive.background.base. */
370
+ --destructive-foreground: var(--colors-button-destructive-text-base); /** Destructive foreground CSS alias for colors.button.destructive.text.base. */
371
+ --border: var(--colors-container-border-base); /** Border CSS alias for colors.container.border.base. */
372
+ --input: var(--colors-form-border-base); /** Input CSS alias for colors.form.border.base. */
373
+ --ring: var(--colors-form-border-selected); /** Ring CSS alias for colors.form.border.selected. */
374
+ --radius: var(--radii-inner); /** Radius CSS alias for radii.inner. */
375
+ --sidebar: var(--colors-navigation-main-background-base); /** Sidebar CSS alias for colors.navigation.main.background.base. */
376
+ --sidebar-foreground: var(--colors-navigation-text-base); /** Sidebar foreground CSS alias for colors.navigation.text.base. */
377
+ --sidebar-primary: var(--colors-navigation-list-item-background-selected); /** Sidebar primary CSS alias for colors.navigation.listItem.background.selected. */
378
+ --sidebar-primary-foreground: var(--colors-navigation-text-base); /** Sidebar primary foreground CSS alias for colors.navigation.text.base. */
379
+ --sidebar-accent: var(--colors-navigation-list-item-background-hover); /** Sidebar accent CSS alias for colors.navigation.listItem.background.hover. */
380
+ --sidebar-accent-foreground: var(--colors-navigation-text-hover); /** Sidebar accent foreground CSS alias for colors.navigation.text.hover. */
381
+ --sidebar-border: var(--colors-navigation-main-border-base); /** Sidebar border CSS alias for colors.navigation.main.border.base. */
382
+ --sidebar-ring: var(--colors-form-border-selected); /** Sidebar ring CSS alias for colors.form.border.selected. */
383
+ --chart-1: var(--colors-dataviz-map-1); /** Chart 1 CSS alias for colors.dataviz.map.1. */
384
+ --chart-2: var(--colors-dataviz-map-2); /** Chart 2 CSS alias for colors.dataviz.map.2. */
385
+ --chart-3: var(--colors-dataviz-map-3); /** Chart 3 CSS alias for colors.dataviz.map.3. */
386
+ --chart-4: var(--colors-dataviz-map-4); /** Chart 4 CSS alias for colors.dataviz.map.4. */
387
+ --chart-5: var(--colors-dataviz-map-5); /** Chart 5 CSS alias for colors.dataviz.map.5. */
388
+ }