@gainsight-hub/design-tokens 0.1.2 → 0.2.1

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 (21) hide show
  1. package/dist/theme-manifest.json +195 -111
  2. package/dist/themes/ember.css +48 -0
  3. package/dist/themes/ember.css.d.ts +2 -0
  4. package/dist/themes/legacy.css +6 -0
  5. package/dist/themes/meadow.css +48 -0
  6. package/dist/themes/meadow.css.d.ts +2 -0
  7. package/dist/themes/ocean.css +48 -0
  8. package/dist/themes/ocean.css.d.ts +2 -0
  9. package/dist/themes/slate.css +48 -0
  10. package/dist/themes/slate.css.d.ts +2 -0
  11. package/dist/themes/violet.css +48 -0
  12. package/dist/themes/violet.css.d.ts +2 -0
  13. package/dist/themes.css +5 -3
  14. package/dist/token-catalog.json +3 -3
  15. package/package.json +2 -4
  16. package/dist/themes/antd.css +0 -48
  17. package/dist/themes/antd.css.d.ts +0 -2
  18. package/dist/themes/mui.css +0 -48
  19. package/dist/themes/mui.css.d.ts +0 -2
  20. package/dist/themes/spectrum.css +0 -48
  21. package/dist/themes/spectrum.css.d.ts +0 -2
package/dist/theme-manifest.json CHANGED
@@ -42,128 +42,212 @@
42
42
  }
43
43
  },
44
44
  {
45
- "id": "mui",
46
- "label": "Material UI",
47
- "description": "Material Design 3–inspired theme",
45
+ "id": "ocean",
46
+ "label": "Ocean",
47
+ "description": "Ocean-inspired blue palette with tinted surfaces and content",
48
48
  "light": {
49
- "--theme-brand-100": "#E3F2FD",
50
- "--theme-brand-200": "#BBDEFB",
51
- "--theme-brand-300": "#90CAF9",
52
- "--theme-brand-400": "#64B5F6",
53
- "--theme-brand-500": "#42A5F5",
54
- "--theme-brand-600": "#1E88E5",
55
- "--theme-brand-700": "#1976D2",
56
- "--theme-brand-800": "#1565C0",
57
- "--theme-brand-900": "#0D47A1",
58
- "--theme-brand-1000": "#072363",
59
- "--theme-neutral-0": "#FFFFFF",
60
- "--theme-neutral-100": "#FAFAFA",
61
- "--theme-neutral-200": "#F5F5F5",
62
- "--theme-neutral-300": "#E0E0E0",
63
- "--theme-neutral-400": "#BDBDBD",
64
- "--theme-neutral-500": "#9E9E9E",
65
- "--theme-neutral-600": "#757575",
66
- "--theme-neutral-700": "#616161",
67
- "--theme-neutral-800": "#424242",
68
- "--theme-neutral-900": "#303030",
69
- "--theme-neutral-1000": "#212121",
70
- "--font-family-sans": "Roboto, 'Helvetica Neue', Arial, sans-serif",
71
- "--font-family-mono": "'Roboto Mono', 'Courier New', monospace",
72
- "--radius-025": "1px",
73
- "--radius-050": "2px",
74
- "--radius-100": "4px",
75
- "--radius-150": "6px",
76
- "--radius-200": "8px",
77
- "--shadow-100": "0px 2px 1px -1px rgba(0,0,0,0.20), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)",
78
- "--shadow-200": "0px 2px 4px -1px rgba(0,0,0,0.20), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12)",
79
- "--shadow-300": "0px 5px 5px -3px rgba(0,0,0,0.20), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)",
80
- "--color-status-success-bold": "#2E7D32",
81
- "--color-status-danger-bold": "#D32F2F",
82
- "--color-status-information-bold": "#0288D1"
49
+ "--color-action-primary-default": "#1d4ed8",
50
+ "--color-action-primary-hover": "#1e40af",
51
+ "--color-action-primary-pressed": "#1e3a8a",
52
+ "--color-action-neutral-default": "#ffffff",
53
+ "--color-action-neutral-hover": "#f0f4ff",
54
+ "--color-action-neutral-pressed": "#e0e8ff",
55
+ "--color-surface-default": "#ffffff",
56
+ "--color-surface-muted": "#f3f4f6",
57
+ "--color-surface-inverse": "#0d1b3e",
58
+ "--color-surface-overlay": "#ffffff",
59
+ "--color-surface-page": "#f8faff",
60
+ "--color-surface-disabled": "#f3f4f6",
61
+ "--color-content-default": "#0d1b3e",
62
+ "--color-content-subtle": "#4a6280",
63
+ "--color-content-subtlest": "#93b4cf",
64
+ "--color-content-heading-default": "#0d1b3e",
65
+ "--color-content-heading-hero": "#0d1b3e",
66
+ "--color-content-inverse": "#ffffff",
67
+ "--color-content-disabled": "#9ca3af",
68
+ "--color-line-default": "#e5e7eb",
69
+ "--color-line-disabled": "#f3f4f6",
70
+ "--color-status-success-bold": "#166534",
71
+ "--color-status-information-bold": "#1d4ed8",
72
+ "--color-status-danger-bold": "#c2410c",
73
+ "--color-action-destructive-default": "#ef4444",
74
+ "--color-action-destructive-hover": "#dc2626",
75
+ "--color-action-destructive-pressed": "#b91c1c",
76
+ "--color-community-answered": "#166534",
77
+ "--color-community-unanswered": "#64748b",
78
+ "--color-community-highlighted": "#1d4ed8",
79
+ "--color-community-pinned": "#1d4ed8",
80
+ "--color-community-sticky": "#1d4ed8",
81
+ "--color-link-default": "#1d4ed8",
82
+ "--color-link-hover": "#1e40af"
83
83
  },
84
84
  "dark": {}
85
85
  },
86
86
  {
87
- "id": "antd",
88
- "label": "Ant Design",
89
- "description": "Ant Design 5.x–inspired theme",
87
+ "id": "ember",
88
+ "label": "Ember",
89
+ "description": "Warm ember-toned orange palette with rich earthy surfaces",
90
90
  "light": {
91
- "--theme-brand-100": "#E6F4FF",
92
- "--theme-brand-200": "#BAE0FF",
93
- "--theme-brand-300": "#91CAFF",
94
- "--theme-brand-400": "#69B1FF",
95
- "--theme-brand-500": "#4096FF",
96
- "--theme-brand-600": "#2880EB",
97
- "--theme-brand-700": "#1677FF",
98
- "--theme-brand-800": "#0958D9",
99
- "--theme-brand-900": "#003EB3",
100
- "--theme-brand-1000": "#002C8C",
101
- "--theme-neutral-0": "#FFFFFF",
102
- "--theme-neutral-100": "#FAFAFA",
103
- "--theme-neutral-200": "#F5F5F5",
104
- "--theme-neutral-300": "#D9D9D9",
105
- "--theme-neutral-400": "#BFBFBF",
106
- "--theme-neutral-500": "#8C8C8C",
107
- "--theme-neutral-600": "#595959",
108
- "--theme-neutral-700": "#434343",
109
- "--theme-neutral-800": "#262626",
110
- "--theme-neutral-900": "#1F1F1F",
111
- "--theme-neutral-1000": "#141414",
112
- "--font-family-sans": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
113
- "--font-family-mono": "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace",
114
- "--radius-025": "2px",
115
- "--radius-050": "6px",
116
- "--radius-100": "8px",
117
- "--radius-150": "12px",
118
- "--radius-200": "16px",
119
- "--shadow-100": "0 1px 2px 0 rgba(0,0,0,0.03), 0 1px 6px -1px rgba(0,0,0,0.02), 0 2px 4px 0 rgba(0,0,0,0.02)",
120
- "--shadow-200": "0 3px 6px -4px rgba(0,0,0,0.12), 0 6px 16px 0 rgba(0,0,0,0.08), 0 9px 28px 8px rgba(0,0,0,0.05)",
121
- "--shadow-300": "0 6px 16px -8px rgba(0,0,0,0.08), 0 9px 28px 0 rgba(0,0,0,0.05), 0 12px 48px 16px rgba(0,0,0,0.03)",
122
- "--color-status-success-bold": "#52C41A",
123
- "--color-status-danger-bold": "#FF4D4F",
124
- "--color-status-information-bold": "#1677FF"
91
+ "--color-action-primary-default": "#c2410c",
92
+ "--color-action-primary-hover": "#9a3412",
93
+ "--color-action-primary-pressed": "#7c2d12",
94
+ "--color-action-neutral-default": "#ffffff",
95
+ "--color-action-neutral-hover": "#fdf3ee",
96
+ "--color-action-neutral-pressed": "#fde8d8",
97
+ "--color-surface-default": "#ffffff",
98
+ "--color-surface-muted": "#f3f4f6",
99
+ "--color-surface-inverse": "#2c1206",
100
+ "--color-surface-overlay": "#ffffff",
101
+ "--color-surface-page": "#fdfaf8",
102
+ "--color-surface-disabled": "#f3f4f6",
103
+ "--color-content-default": "#2c1206",
104
+ "--color-content-subtle": "#7a5540",
105
+ "--color-content-subtlest": "#c4957a",
106
+ "--color-content-heading-default": "#2c1206",
107
+ "--color-content-heading-hero": "#2c1206",
108
+ "--color-content-inverse": "#ffffff",
109
+ "--color-content-disabled": "#9ca3af",
110
+ "--color-line-default": "#e5e7eb",
111
+ "--color-line-disabled": "#f3f4f6",
112
+ "--color-status-success-bold": "#166534",
113
+ "--color-status-information-bold": "#1d4ed8",
114
+ "--color-status-danger-bold": "#c2410c",
115
+ "--color-action-destructive-default": "#ef4444",
116
+ "--color-action-destructive-hover": "#dc2626",
117
+ "--color-action-destructive-pressed": "#b91c1c",
118
+ "--color-community-answered": "#166534",
119
+ "--color-community-unanswered": "#6b7280",
120
+ "--color-community-highlighted": "#c2410c",
121
+ "--color-community-pinned": "#c2410c",
122
+ "--color-community-sticky": "#c2410c",
123
+ "--color-link-default": "#c2410c",
124
+ "--color-link-hover": "#9a3412"
125
125
  },
126
126
  "dark": {}
127
127
  },
128
128
  {
129
- "id": "spectrum",
130
- "label": "Adobe Spectrum",
131
- "description": "Adobe Spectrum–inspired theme",
129
+ "id": "meadow",
130
+ "label": "Meadow",
131
+ "description": "Lush green palette inspired by natural meadows",
132
132
  "light": {
133
- "--theme-brand-100": "#EAF1FB",
134
- "--theme-brand-200": "#CBE0F8",
135
- "--theme-brand-300": "#A8CCF2",
136
- "--theme-brand-400": "#7FB7EB",
137
- "--theme-brand-500": "#5093DA",
138
- "--theme-brand-600": "#2171C5",
139
- "--theme-brand-700": "#0265DC",
140
- "--theme-brand-800": "#0550AE",
141
- "--theme-brand-900": "#1B3E6E",
142
- "--theme-brand-1000": "#0C2143",
143
- "--theme-neutral-0": "#FFFFFF",
144
- "--theme-neutral-100": "#F5F5F5",
145
- "--theme-neutral-200": "#EAEAEA",
146
- "--theme-neutral-300": "#D3D3D3",
147
- "--theme-neutral-400": "#BCBCBC",
148
- "--theme-neutral-500": "#909090",
149
- "--theme-neutral-600": "#6E6E6E",
150
- "--theme-neutral-700": "#4B4B4B",
151
- "--theme-neutral-800": "#2C2C2C",
152
- "--theme-neutral-900": "#222222",
153
- "--theme-neutral-1000": "#1A1A1A",
154
- "--font-family-sans": "'adobe-clean', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif",
155
- "--font-family-mono": "'Source Code Pro', 'SFMono-Regular', Consolas, monospace",
156
- "--radius-025": "0px",
157
- "--radius-050": "0px",
158
- "--radius-100": "0px",
159
- "--radius-150": "0px",
160
- "--radius-200": "0px",
161
- "--shadow-100": "0px 1px 4px rgba(0, 0, 0, 0.16)",
162
- "--shadow-200": "0px 4px 8px rgba(0, 0, 0, 0.12)",
163
- "--shadow-300": "0px 8px 16px rgba(0, 0, 0, 0.08)",
164
- "--color-status-success-bold": "#008854",
165
- "--color-status-danger-bold": "#D7373F",
166
- "--color-status-information-bold": "#0265DC"
133
+ "--color-action-primary-default": "#166534",
134
+ "--color-action-primary-hover": "#14532d",
135
+ "--color-action-primary-pressed": "#052e16",
136
+ "--color-action-neutral-default": "#ffffff",
137
+ "--color-action-neutral-hover": "#f0fdf5",
138
+ "--color-action-neutral-pressed": "#dcfce7",
139
+ "--color-surface-default": "#ffffff",
140
+ "--color-surface-muted": "#f3f4f6",
141
+ "--color-surface-inverse": "#052e16",
142
+ "--color-surface-overlay": "#ffffff",
143
+ "--color-surface-page": "#f7fdf9",
144
+ "--color-surface-disabled": "#f3f4f6",
145
+ "--color-content-default": "#052e16",
146
+ "--color-content-subtle": "#3d6b52",
147
+ "--color-content-subtlest": "#6fa882",
148
+ "--color-content-heading-default": "#052e16",
149
+ "--color-content-heading-hero": "#052e16",
150
+ "--color-content-inverse": "#ffffff",
151
+ "--color-content-disabled": "#9ca3af",
152
+ "--color-line-default": "#e5e7eb",
153
+ "--color-line-disabled": "#f3f4f6",
154
+ "--color-status-success-bold": "#166534",
155
+ "--color-status-information-bold": "#1d4ed8",
156
+ "--color-status-danger-bold": "#c2410c",
157
+ "--color-action-destructive-default": "#ef4444",
158
+ "--color-action-destructive-hover": "#dc2626",
159
+ "--color-action-destructive-pressed": "#b91c1c",
160
+ "--color-community-answered": "#166534",
161
+ "--color-community-unanswered": "#6b7280",
162
+ "--color-community-highlighted": "#166534",
163
+ "--color-community-pinned": "#166534",
164
+ "--color-community-sticky": "#166534",
165
+ "--color-link-default": "#166534",
166
+ "--color-link-hover": "#14532d"
167
+ },
168
+ "dark": {}
169
+ },
170
+ {
171
+ "id": "violet",
172
+ "label": "Violet",
173
+ "description": "Cool indigo-violet palette with subtle purple-tinted surfaces",
174
+ "light": {
175
+ "--color-action-primary-default": "#4f46e5",
176
+ "--color-action-primary-hover": "#4338ca",
177
+ "--color-action-primary-pressed": "#3730a3",
178
+ "--color-action-neutral-default": "#ffffff",
179
+ "--color-action-neutral-hover": "#f5f5ff",
180
+ "--color-action-neutral-pressed": "#eef0ff",
181
+ "--color-surface-default": "#ffffff",
182
+ "--color-surface-muted": "#f3f4f6",
183
+ "--color-surface-inverse": "#1e1b4b",
184
+ "--color-surface-overlay": "#ffffff",
185
+ "--color-surface-page": "#fafaff",
186
+ "--color-surface-disabled": "#f3f4f6",
187
+ "--color-content-default": "#1e1b4b",
188
+ "--color-content-subtle": "#5b5880",
189
+ "--color-content-subtlest": "#9896c8",
190
+ "--color-content-heading-default": "#1e1b4b",
191
+ "--color-content-heading-hero": "#1e1b4b",
192
+ "--color-content-inverse": "#ffffff",
193
+ "--color-content-disabled": "#9ca3af",
194
+ "--color-line-default": "#e5e7eb",
195
+ "--color-line-disabled": "#f3f4f6",
196
+ "--color-status-success-bold": "#166534",
197
+ "--color-status-information-bold": "#4f46e5",
198
+ "--color-status-danger-bold": "#c2410c",
199
+ "--color-action-destructive-default": "#ef4444",
200
+ "--color-action-destructive-hover": "#dc2626",
201
+ "--color-action-destructive-pressed": "#b91c1c",
202
+ "--color-community-answered": "#166534",
203
+ "--color-community-unanswered": "#6b7280",
204
+ "--color-community-highlighted": "#4f46e5",
205
+ "--color-community-pinned": "#4f46e5",
206
+ "--color-community-sticky": "#4f46e5",
207
+ "--color-link-default": "#4f46e5",
208
+ "--color-link-hover": "#4338ca"
209
+ },
210
+ "dark": {}
211
+ },
212
+ {
213
+ "id": "slate",
214
+ "label": "Slate",
215
+ "description": "Professional cool-gray palette built on Tailwind slate",
216
+ "light": {
217
+ "--color-action-primary-default": "#334155",
218
+ "--color-action-primary-hover": "#1e293b",
219
+ "--color-action-primary-pressed": "#0f172a",
220
+ "--color-action-neutral-default": "#ffffff",
221
+ "--color-action-neutral-hover": "#f8f9fa",
222
+ "--color-action-neutral-pressed": "#f1f3f5",
223
+ "--color-surface-default": "#ffffff",
224
+ "--color-surface-muted": "#f3f4f6",
225
+ "--color-surface-inverse": "#0f172a",
226
+ "--color-surface-overlay": "#ffffff",
227
+ "--color-surface-page": "#f9fafb",
228
+ "--color-surface-disabled": "#e2e8f0",
229
+ "--color-content-default": "#0f172a",
230
+ "--color-content-subtle": "#64748b",
231
+ "--color-content-subtlest": "#94a3b8",
232
+ "--color-content-heading-default": "#0f172a",
233
+ "--color-content-heading-hero": "#0f172a",
234
+ "--color-content-inverse": "#ffffff",
235
+ "--color-content-disabled": "#9ca3af",
236
+ "--color-line-default": "#e2e8f0",
237
+ "--color-line-disabled": "#f1f5f9",
238
+ "--color-status-success-bold": "#166534",
239
+ "--color-status-information-bold": "#1d4ed8",
240
+ "--color-status-danger-bold": "#c2410c",
241
+ "--color-action-destructive-default": "#ef4444",
242
+ "--color-action-destructive-hover": "#dc2626",
243
+ "--color-action-destructive-pressed": "#b91c1c",
244
+ "--color-community-answered": "#166534",
245
+ "--color-community-unanswered": "#64748b",
246
+ "--color-community-highlighted": "#334155",
247
+ "--color-community-pinned": "#334155",
248
+ "--color-community-sticky": "#334155",
249
+ "--color-link-default": "#334155",
250
+ "--color-link-hover": "#1e293b"
167
251
  },
168
252
  "dark": {}
169
253
  }
package/dist/themes/ember.css ADDED
@@ -0,0 +1,48 @@
1
+ /* Auto-generated — do not edit manually. Source: themes/ember/index.js */
2
+ /**
3
+ * Warm ember-toned orange palette with rich earthy surfaces
4
+ *
5
+ * Usage:
6
+ * import "@gainsight-hub/design-tokens/styles.css"; // must load first
7
+ * import "@gainsight-hub/design-tokens/themes/ember.css";
8
+ * document.documentElement.setAttribute("data-theme", "ember");
9
+ *
10
+ * Restore default theme:
11
+ * document.documentElement.removeAttribute("data-theme");
12
+ */
13
+ [data-theme="ember"] {
14
+ --color-action-primary-default: #c2410c;
15
+ --color-action-primary-hover: #9a3412;
16
+ --color-action-primary-pressed: #7c2d12;
17
+ --color-action-neutral-default: #ffffff;
18
+ --color-action-neutral-hover: #fdf3ee;
19
+ --color-action-neutral-pressed: #fde8d8;
20
+ --color-surface-default: #ffffff;
21
+ --color-surface-muted: #f3f4f6;
22
+ --color-surface-inverse: #2c1206;
23
+ --color-surface-overlay: #ffffff;
24
+ --color-surface-page: #fdfaf8;
25
+ --color-surface-disabled: #f3f4f6;
26
+ --color-content-default: #2c1206;
27
+ --color-content-subtle: #7a5540;
28
+ --color-content-subtlest: #c4957a;
29
+ --color-content-heading-default: #2c1206;
30
+ --color-content-heading-hero: #2c1206;
31
+ --color-content-inverse: #ffffff;
32
+ --color-content-disabled: #9ca3af;
33
+ --color-line-default: #e5e7eb;
34
+ --color-line-disabled: #f3f4f6;
35
+ --color-status-success-bold: #166534;
36
+ --color-status-information-bold: #1d4ed8;
37
+ --color-status-danger-bold: #c2410c;
38
+ --color-action-destructive-default: #ef4444;
39
+ --color-action-destructive-hover: #dc2626;
40
+ --color-action-destructive-pressed: #b91c1c;
41
+ --color-community-answered: #166534;
42
+ --color-community-unanswered: #6b7280;
43
+ --color-community-highlighted: #c2410c;
44
+ --color-community-pinned: #c2410c;
45
+ --color-community-sticky: #c2410c;
46
+ --color-link-default: #c2410c;
47
+ --color-link-hover: #9a3412;
48
+ }
package/dist/themes/ember.css.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ // CSS side-effect only — activates [data-theme="ember"] overrides, no exports.
2
+ export {};
package/dist/themes/legacy.css CHANGED
@@ -55,6 +55,12 @@
55
55
  --space-layout-gutter: var(--gutter, 12px);
56
56
  --backtotop-background: var(--config-footer-background-color, #2B3346);
57
57
  --backtotop-content: var(--config-footer-color, #FFFFFF);
58
+ --font-family-sans: var(--config--main-font-base-stack, Roboto, sans-serif);
59
+ --button-font-family: var(--config--main-button-base-font-family, Roboto, sans-serif);
60
+ --font-weight-regular: var(--config--main-font-base-weight, 400);
61
+ --font-weight-medium: var(--config-main-navigation-dropdown-font-weight, 500);
62
+ --font-weight-bold: var(--config--main-header-font-weight, 700);
63
+ --text-heading-small-font-weight: var(--config-thread-list-topic-title-font-weight, 500);
58
64
  --button-radius: var(--config-button-border-radius, 8px);
59
65
  --button-border-width: var(--config-button-border-width, 1px);
60
66
  --button-font-weight: var(--config--main-button-base-font-weight, 500);
package/dist/themes/meadow.css ADDED
@@ -0,0 +1,48 @@
1
+ /* Auto-generated — do not edit manually. Source: themes/meadow/index.js */
2
+ /**
3
+ * Lush green palette inspired by natural meadows
4
+ *
5
+ * Usage:
6
+ * import "@gainsight-hub/design-tokens/styles.css"; // must load first
7
+ * import "@gainsight-hub/design-tokens/themes/meadow.css";
8
+ * document.documentElement.setAttribute("data-theme", "meadow");
9
+ *
10
+ * Restore default theme:
11
+ * document.documentElement.removeAttribute("data-theme");
12
+ */
13
+ [data-theme="meadow"] {
14
+ --color-action-primary-default: #166534;
15
+ --color-action-primary-hover: #14532d;
16
+ --color-action-primary-pressed: #052e16;
17
+ --color-action-neutral-default: #ffffff;
18
+ --color-action-neutral-hover: #f0fdf5;
19
+ --color-action-neutral-pressed: #dcfce7;
20
+ --color-surface-default: #ffffff;
21
+ --color-surface-muted: #f3f4f6;
22
+ --color-surface-inverse: #052e16;
23
+ --color-surface-overlay: #ffffff;
24
+ --color-surface-page: #f7fdf9;
25
+ --color-surface-disabled: #f3f4f6;
26
+ --color-content-default: #052e16;
27
+ --color-content-subtle: #3d6b52;
28
+ --color-content-subtlest: #6fa882;
29
+ --color-content-heading-default: #052e16;
30
+ --color-content-heading-hero: #052e16;
31
+ --color-content-inverse: #ffffff;
32
+ --color-content-disabled: #9ca3af;
33
+ --color-line-default: #e5e7eb;
34
+ --color-line-disabled: #f3f4f6;
35
+ --color-status-success-bold: #166534;
36
+ --color-status-information-bold: #1d4ed8;
37
+ --color-status-danger-bold: #c2410c;
38
+ --color-action-destructive-default: #ef4444;
39
+ --color-action-destructive-hover: #dc2626;
40
+ --color-action-destructive-pressed: #b91c1c;
41
+ --color-community-answered: #166534;
42
+ --color-community-unanswered: #6b7280;
43
+ --color-community-highlighted: #166534;
44
+ --color-community-pinned: #166534;
45
+ --color-community-sticky: #166534;
46
+ --color-link-default: #166534;
47
+ --color-link-hover: #14532d;
48
+ }
package/dist/themes/meadow.css.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ // CSS side-effect only — activates [data-theme="meadow"] overrides, no exports.
2
+ export {};
package/dist/themes/ocean.css ADDED
@@ -0,0 +1,48 @@
1
+ /* Auto-generated — do not edit manually. Source: themes/ocean/index.js */
2
+ /**
3
+ * Ocean-inspired blue palette with tinted surfaces and content
4
+ *
5
+ * Usage:
6
+ * import "@gainsight-hub/design-tokens/styles.css"; // must load first
7
+ * import "@gainsight-hub/design-tokens/themes/ocean.css";
8
+ * document.documentElement.setAttribute("data-theme", "ocean");
9
+ *
10
+ * Restore default theme:
11
+ * document.documentElement.removeAttribute("data-theme");
12
+ */
13
+ [data-theme="ocean"] {
14
+ --color-action-primary-default: #1d4ed8;
15
+ --color-action-primary-hover: #1e40af;
16
+ --color-action-primary-pressed: #1e3a8a;
17
+ --color-action-neutral-default: #ffffff;
18
+ --color-action-neutral-hover: #f0f4ff;
19
+ --color-action-neutral-pressed: #e0e8ff;
20
+ --color-surface-default: #ffffff;
21
+ --color-surface-muted: #f3f4f6;
22
+ --color-surface-inverse: #0d1b3e;
23
+ --color-surface-overlay: #ffffff;
24
+ --color-surface-page: #f8faff;
25
+ --color-surface-disabled: #f3f4f6;
26
+ --color-content-default: #0d1b3e;
27
+ --color-content-subtle: #4a6280;
28
+ --color-content-subtlest: #93b4cf;
29
+ --color-content-heading-default: #0d1b3e;
30
+ --color-content-heading-hero: #0d1b3e;
31
+ --color-content-inverse: #ffffff;
32
+ --color-content-disabled: #9ca3af;
33
+ --color-line-default: #e5e7eb;
34
+ --color-line-disabled: #f3f4f6;
35
+ --color-status-success-bold: #166534;
36
+ --color-status-information-bold: #1d4ed8;
37
+ --color-status-danger-bold: #c2410c;
38
+ --color-action-destructive-default: #ef4444;
39
+ --color-action-destructive-hover: #dc2626;
40
+ --color-action-destructive-pressed: #b91c1c;
41
+ --color-community-answered: #166534;
42
+ --color-community-unanswered: #64748b;
43
+ --color-community-highlighted: #1d4ed8;
44
+ --color-community-pinned: #1d4ed8;
45
+ --color-community-sticky: #1d4ed8;
46
+ --color-link-default: #1d4ed8;
47
+ --color-link-hover: #1e40af;
48
+ }
package/dist/themes/ocean.css.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ // CSS side-effect only — activates [data-theme="ocean"] overrides, no exports.
2
+ export {};
package/dist/themes/slate.css ADDED
@@ -0,0 +1,48 @@
1
+ /* Auto-generated — do not edit manually. Source: themes/slate/index.js */
2
+ /**
3
+ * Professional cool-gray palette built on Tailwind slate
4
+ *
5
+ * Usage:
6
+ * import "@gainsight-hub/design-tokens/styles.css"; // must load first
7
+ * import "@gainsight-hub/design-tokens/themes/slate.css";
8
+ * document.documentElement.setAttribute("data-theme", "slate");
9
+ *
10
+ * Restore default theme:
11
+ * document.documentElement.removeAttribute("data-theme");
12
+ */
13
+ [data-theme="slate"] {
14
+ --color-action-primary-default: #334155;
15
+ --color-action-primary-hover: #1e293b;
16
+ --color-action-primary-pressed: #0f172a;
17
+ --color-action-neutral-default: #ffffff;
18
+ --color-action-neutral-hover: #f8f9fa;
19
+ --color-action-neutral-pressed: #f1f3f5;
20
+ --color-surface-default: #ffffff;
21
+ --color-surface-muted: #f3f4f6;
22
+ --color-surface-inverse: #0f172a;
23
+ --color-surface-overlay: #ffffff;
24
+ --color-surface-page: #f9fafb;
25
+ --color-surface-disabled: #e2e8f0;
26
+ --color-content-default: #0f172a;
27
+ --color-content-subtle: #64748b;
28
+ --color-content-subtlest: #94a3b8;
29
+ --color-content-heading-default: #0f172a;
30
+ --color-content-heading-hero: #0f172a;
31
+ --color-content-inverse: #ffffff;
32
+ --color-content-disabled: #9ca3af;
33
+ --color-line-default: #e2e8f0;
34
+ --color-line-disabled: #f1f5f9;
35
+ --color-status-success-bold: #166534;
36
+ --color-status-information-bold: #1d4ed8;
37
+ --color-status-danger-bold: #c2410c;
38
+ --color-action-destructive-default: #ef4444;
39
+ --color-action-destructive-hover: #dc2626;
40
+ --color-action-destructive-pressed: #b91c1c;
41
+ --color-community-answered: #166534;
42
+ --color-community-unanswered: #64748b;
43
+ --color-community-highlighted: #334155;
44
+ --color-community-pinned: #334155;
45
+ --color-community-sticky: #334155;
46
+ --color-link-default: #334155;
47
+ --color-link-hover: #1e293b;
48
+ }
package/dist/themes/slate.css.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ // CSS side-effect only — activates [data-theme="slate"] overrides, no exports.
2
+ export {};
package/dist/themes/violet.css ADDED
@@ -0,0 +1,48 @@
1
+ /* Auto-generated — do not edit manually. Source: themes/violet/index.js */
2
+ /**
3
+ * Cool indigo-violet palette with subtle purple-tinted surfaces
4
+ *
5
+ * Usage:
6
+ * import "@gainsight-hub/design-tokens/styles.css"; // must load first
7
+ * import "@gainsight-hub/design-tokens/themes/violet.css";
8
+ * document.documentElement.setAttribute("data-theme", "violet");
9
+ *
10
+ * Restore default theme:
11
+ * document.documentElement.removeAttribute("data-theme");
12
+ */
13
+ [data-theme="violet"] {
14
+ --color-action-primary-default: #4f46e5;
15
+ --color-action-primary-hover: #4338ca;
16
+ --color-action-primary-pressed: #3730a3;
17
+ --color-action-neutral-default: #ffffff;
18
+ --color-action-neutral-hover: #f5f5ff;
19
+ --color-action-neutral-pressed: #eef0ff;
20
+ --color-surface-default: #ffffff;
21
+ --color-surface-muted: #f3f4f6;
22
+ --color-surface-inverse: #1e1b4b;
23
+ --color-surface-overlay: #ffffff;
24
+ --color-surface-page: #fafaff;
25
+ --color-surface-disabled: #f3f4f6;
26
+ --color-content-default: #1e1b4b;
27
+ --color-content-subtle: #5b5880;
28
+ --color-content-subtlest: #9896c8;
29
+ --color-content-heading-default: #1e1b4b;
30
+ --color-content-heading-hero: #1e1b4b;
31
+ --color-content-inverse: #ffffff;
32
+ --color-content-disabled: #9ca3af;
33
+ --color-line-default: #e5e7eb;
34
+ --color-line-disabled: #f3f4f6;
35
+ --color-status-success-bold: #166534;
36
+ --color-status-information-bold: #4f46e5;
37
+ --color-status-danger-bold: #c2410c;
38
+ --color-action-destructive-default: #ef4444;
39
+ --color-action-destructive-hover: #dc2626;
40
+ --color-action-destructive-pressed: #b91c1c;
41
+ --color-community-answered: #166534;
42
+ --color-community-unanswered: #6b7280;
43
+ --color-community-highlighted: #4f46e5;
44
+ --color-community-pinned: #4f46e5;
45
+ --color-community-sticky: #4f46e5;
46
+ --color-link-default: #4f46e5;
47
+ --color-link-hover: #4338ca;
48
+ }
package/dist/themes/violet.css.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ // CSS side-effect only — activates [data-theme="violet"] overrides, no exports.
2
+ export {};
package/dist/themes.css CHANGED
@@ -2,6 +2,8 @@
2
2
  Use this unless you need to control which themes are loaded separately. */
3
3
  @import "./styles.css";
4
4
  @import "./themes/legacy.css";
5
- @import "./themes/mui.css";
6
- @import "./themes/antd.css";
7
- @import "./themes/spectrum.css";
5
+ @import "./themes/ocean.css";
6
+ @import "./themes/ember.css";
7
+ @import "./themes/meadow.css";
8
+ @import "./themes/violet.css";
9
+ @import "./themes/slate.css";
package/dist/token-catalog.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": "0.1.0",
3
- "generatedAt": "2026-05-18T10:51:54.522Z",
3
+ "generatedAt": "2026-06-03T09:32:29.217Z",
4
4
  "scales": {
5
5
  "brand": {
6
6
  "seedVar": "--theme-brand-700",
@@ -362,7 +362,7 @@
362
362
  "description": "default border and divider color used for standard UI boundaries, separators, and component outlines",
363
363
  "references": "color.neutral.300",
364
364
  "derivedFrom": "neutral",
365
- "legacyMapping": "$config--main-color-disabled"
365
+ "legacyMapping": "$config--main-border-base-color"
366
366
  },
367
367
  {
368
368
  "cssVar": "--color-line-disabled",
@@ -3091,7 +3091,7 @@
3091
3091
  "description": "default border and divider color used for standard UI boundaries, separators, and component outlines",
3092
3092
  "references": "color.neutral.300",
3093
3093
  "derivedFrom": "neutral",
3094
- "legacyMapping": "$config--main-color-disabled"
3094
+ "legacyMapping": "$config--main-border-base-color"
3095
3095
  },
3096
3096
  {
3097
3097
  "cssVar": "--color-line-disabled",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gainsight-hub/design-tokens",
3
- "version": "0.1.2",
3
+ "version": "0.2.1",
4
4
  "description": "Design tokens: CSS variables, JSON, TypeScript constants, and Tailwind preset.",
5
5
  "license": "UNLICENSED",
6
6
  "author": "Gainsight Design Systems",
@@ -28,9 +28,7 @@
28
28
  "./theme-manifest.json": "./dist/theme-manifest.json"
29
29
  },
30
30
  "scripts": {
31
- "build": "node ./build.js",
32
- "migrate:generate-mapping": "node ./themes/legacy/generate-mapping.js",
33
- "migrate:tokens": "node ./themes/legacy/migrate-tokens.js"
31
+ "build": "node ./build.js"
34
32
  },
35
33
  "engines": {
36
34
  "node": ">=18.0.0"
package/dist/themes/antd.css DELETED
@@ -1,48 +0,0 @@
1
- /* Auto-generated — do not edit manually. Source: themes/antd/index.js */
2
- /**
3
- * Ant Design 5.x–inspired theme
4
- *
5
- * Usage:
6
- * import "@gainsight-hub/design-tokens/styles.css"; // must load first
7
- * import "@gainsight-hub/design-tokens/themes/antd.css";
8
- * document.documentElement.setAttribute("data-theme", "antd");
9
- *
10
- * Restore default theme:
11
- * document.documentElement.removeAttribute("data-theme");
12
- */
13
- [data-theme="antd"] {
14
- --theme-brand-100: #E6F4FF;
15
- --theme-brand-200: #BAE0FF;
16
- --theme-brand-300: #91CAFF;
17
- --theme-brand-400: #69B1FF;
18
- --theme-brand-500: #4096FF;
19
- --theme-brand-600: #2880EB;
20
- --theme-brand-700: #1677FF;
21
- --theme-brand-800: #0958D9;
22
- --theme-brand-900: #003EB3;
23
- --theme-brand-1000: #002C8C;
24
- --theme-neutral-0: #FFFFFF;
25
- --theme-neutral-100: #FAFAFA;
26
- --theme-neutral-200: #F5F5F5;
27
- --theme-neutral-300: #D9D9D9;
28
- --theme-neutral-400: #BFBFBF;
29
- --theme-neutral-500: #8C8C8C;
30
- --theme-neutral-600: #595959;
31
- --theme-neutral-700: #434343;
32
- --theme-neutral-800: #262626;
33
- --theme-neutral-900: #1F1F1F;
34
- --theme-neutral-1000: #141414;
35
- --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
36
- --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
37
- --radius-025: 2px;
38
- --radius-050: 6px;
39
- --radius-100: 8px;
40
- --radius-150: 12px;
41
- --radius-200: 16px;
42
- --shadow-100: 0 1px 2px 0 rgba(0,0,0,0.03), 0 1px 6px -1px rgba(0,0,0,0.02), 0 2px 4px 0 rgba(0,0,0,0.02);
43
- --shadow-200: 0 3px 6px -4px rgba(0,0,0,0.12), 0 6px 16px 0 rgba(0,0,0,0.08), 0 9px 28px 8px rgba(0,0,0,0.05);
44
- --shadow-300: 0 6px 16px -8px rgba(0,0,0,0.08), 0 9px 28px 0 rgba(0,0,0,0.05), 0 12px 48px 16px rgba(0,0,0,0.03);
45
- --color-status-success-bold: #52C41A;
46
- --color-status-danger-bold: #FF4D4F;
47
- --color-status-information-bold: #1677FF;
48
- }
package/dist/themes/antd.css.d.ts DELETED
@@ -1,2 +0,0 @@
1
- // CSS side-effect only — activates [data-theme="antd"] overrides, no exports.
2
- export {};
package/dist/themes/mui.css DELETED
@@ -1,48 +0,0 @@
1
- /* Auto-generated — do not edit manually. Source: themes/mui/index.js */
2
- /**
3
- * Material Design 3–inspired theme
4
- *
5
- * Usage:
6
- * import "@gainsight-hub/design-tokens/styles.css"; // must load first
7
- * import "@gainsight-hub/design-tokens/themes/mui.css";
8
- * document.documentElement.setAttribute("data-theme", "mui");
9
- *
10
- * Restore default theme:
11
- * document.documentElement.removeAttribute("data-theme");
12
- */
13
- [data-theme="mui"] {
14
- --theme-brand-100: #E3F2FD;
15
- --theme-brand-200: #BBDEFB;
16
- --theme-brand-300: #90CAF9;
17
- --theme-brand-400: #64B5F6;
18
- --theme-brand-500: #42A5F5;
19
- --theme-brand-600: #1E88E5;
20
- --theme-brand-700: #1976D2;
21
- --theme-brand-800: #1565C0;
22
- --theme-brand-900: #0D47A1;
23
- --theme-brand-1000: #072363;
24
- --theme-neutral-0: #FFFFFF;
25
- --theme-neutral-100: #FAFAFA;
26
- --theme-neutral-200: #F5F5F5;
27
- --theme-neutral-300: #E0E0E0;
28
- --theme-neutral-400: #BDBDBD;
29
- --theme-neutral-500: #9E9E9E;
30
- --theme-neutral-600: #757575;
31
- --theme-neutral-700: #616161;
32
- --theme-neutral-800: #424242;
33
- --theme-neutral-900: #303030;
34
- --theme-neutral-1000: #212121;
35
- --font-family-sans: Roboto, 'Helvetica Neue', Arial, sans-serif;
36
- --font-family-mono: 'Roboto Mono', 'Courier New', monospace;
37
- --radius-025: 1px;
38
- --radius-050: 2px;
39
- --radius-100: 4px;
40
- --radius-150: 6px;
41
- --radius-200: 8px;
42
- --shadow-100: 0px 2px 1px -1px rgba(0,0,0,0.20), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
43
- --shadow-200: 0px 2px 4px -1px rgba(0,0,0,0.20), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
44
- --shadow-300: 0px 5px 5px -3px rgba(0,0,0,0.20), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
45
- --color-status-success-bold: #2E7D32;
46
- --color-status-danger-bold: #D32F2F;
47
- --color-status-information-bold: #0288D1;
48
- }
package/dist/themes/mui.css.d.ts DELETED
@@ -1,2 +0,0 @@
1
- // CSS side-effect only — activates [data-theme="mui"] overrides, no exports.
2
- export {};
package/dist/themes/spectrum.css DELETED
@@ -1,48 +0,0 @@
1
- /* Auto-generated — do not edit manually. Source: themes/spectrum/index.js */
2
- /**
3
- * Adobe Spectrum–inspired theme
4
- *
5
- * Usage:
6
- * import "@gainsight-hub/design-tokens/styles.css"; // must load first
7
- * import "@gainsight-hub/design-tokens/themes/spectrum.css";
8
- * document.documentElement.setAttribute("data-theme", "spectrum");
9
- *
10
- * Restore default theme:
11
- * document.documentElement.removeAttribute("data-theme");
12
- */
13
- [data-theme="spectrum"] {
14
- --theme-brand-100: #EAF1FB;
15
- --theme-brand-200: #CBE0F8;
16
- --theme-brand-300: #A8CCF2;
17
- --theme-brand-400: #7FB7EB;
18
- --theme-brand-500: #5093DA;
19
- --theme-brand-600: #2171C5;
20
- --theme-brand-700: #0265DC;
21
- --theme-brand-800: #0550AE;
22
- --theme-brand-900: #1B3E6E;
23
- --theme-brand-1000: #0C2143;
24
- --theme-neutral-0: #FFFFFF;
25
- --theme-neutral-100: #F5F5F5;
26
- --theme-neutral-200: #EAEAEA;
27
- --theme-neutral-300: #D3D3D3;
28
- --theme-neutral-400: #BCBCBC;
29
- --theme-neutral-500: #909090;
30
- --theme-neutral-600: #6E6E6E;
31
- --theme-neutral-700: #4B4B4B;
32
- --theme-neutral-800: #2C2C2C;
33
- --theme-neutral-900: #222222;
34
- --theme-neutral-1000: #1A1A1A;
35
- --font-family-sans: 'adobe-clean', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
36
- --font-family-mono: 'Source Code Pro', 'SFMono-Regular', Consolas, monospace;
37
- --radius-025: 0px;
38
- --radius-050: 0px;
39
- --radius-100: 0px;
40
- --radius-150: 0px;
41
- --radius-200: 0px;
42
- --shadow-100: 0px 1px 4px rgba(0, 0, 0, 0.16);
43
- --shadow-200: 0px 4px 8px rgba(0, 0, 0, 0.12);
44
- --shadow-300: 0px 8px 16px rgba(0, 0, 0, 0.08);
45
- --color-status-success-bold: #008854;
46
- --color-status-danger-bold: #D7373F;
47
- --color-status-information-bold: #0265DC;
48
- }
package/dist/themes/spectrum.css.d.ts DELETED
@@ -1,2 +0,0 @@
1
- // CSS side-effect only — activates [data-theme="spectrum"] overrides, no exports.
2
- export {};