@gainsight-hub/design-tokens 0.1.1 → 0.2.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 (29) hide show
  1. package/dist/applyThemeConfig.d.ts +6 -0
  2. package/dist/applyThemeConfig.js +37 -0
  3. package/dist/index.d.ts +1 -1
  4. package/dist/index.js +1 -1
  5. package/dist/theme-manifest.json +206 -162
  6. package/dist/themes/ember.css +48 -0
  7. package/dist/themes/ember.css.d.ts +2 -0
  8. package/dist/themes/legacy.css +3 -0
  9. package/dist/themes/meadow.css +48 -0
  10. package/dist/themes/meadow.css.d.ts +2 -0
  11. package/dist/themes/ocean.css +48 -0
  12. package/dist/themes/ocean.css.d.ts +2 -0
  13. package/dist/themes/slate.css +48 -0
  14. package/dist/themes/slate.css.d.ts +2 -0
  15. package/dist/themes/violet.css +48 -0
  16. package/dist/themes/violet.css.d.ts +2 -0
  17. package/dist/themes.css +5 -4
  18. package/dist/token-catalog.json +3 -3
  19. package/package.json +7 -5
  20. package/dist/applyTheme.d.ts +0 -14
  21. package/dist/applyTheme.js +0 -66
  22. package/dist/themes/antd.css +0 -48
  23. package/dist/themes/antd.css.d.ts +0 -2
  24. package/dist/themes/dark.css +0 -47
  25. package/dist/themes/dark.css.d.ts +0 -2
  26. package/dist/themes/mui.css +0 -48
  27. package/dist/themes/mui.css.d.ts +0 -2
  28. package/dist/themes/spectrum.css +0 -48
  29. package/dist/themes/spectrum.css.d.ts +0 -2
package/dist/applyThemeConfig.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ // Auto-generated — do not edit manually.
2
+ export interface ThemeConfig {
3
+ themeId: string;
4
+ overrides: { light: Record<string, string>; dark: Record<string, string> };
5
+ }
6
+ export declare function applyThemeConfig(config: ThemeConfig, mode?: "light" | "dark"): void;
package/dist/applyThemeConfig.js ADDED
@@ -0,0 +1,37 @@
1
+ // Auto-generated — do not edit manually.
2
+ import manifest from "./theme-manifest.json";
3
+
4
+ const THEME_STYLE_ID = "__gs-theme-base";
5
+ const MODE_OVERRIDES_STYLE_ID = "__gs-mode-overrides";
6
+
7
+ function injectRootVars(styleId, vars) {
8
+ const entries = Object.entries(vars);
9
+ if (entries.length === 0) return;
10
+ const css = entries.map(([k, v]) => " " + k + ": " + v + ";").join("\n");
11
+ let el = document.getElementById(styleId);
12
+ if (!el) { el = document.createElement("style"); el.id = styleId; (document.head ?? document.documentElement).appendChild(el); }
13
+ el.textContent = ":root {\n" + css + "\n}";
14
+ }
15
+
16
+ function removeRootVars(styleId) {
17
+ document.getElementById(styleId)?.remove();
18
+ }
19
+
20
+ export function applyThemeConfig(config, mode = "light") {
21
+ if (mode === "dark") {
22
+ document.documentElement.setAttribute("data-theme", "dark");
23
+ document.documentElement.classList.add("dark");
24
+ } else {
25
+ document.documentElement.removeAttribute("data-theme");
26
+ document.documentElement.classList.remove("dark");
27
+ }
28
+ const themeId = config.themeId;
29
+ const theme = manifest.themes.find(t => t.id === themeId);
30
+ if (!theme) { console.warn("[design-tokens] theme \"" + themeId + "\" not found"); return; }
31
+ const themeVars = theme[mode] ?? {};
32
+ if (Object.keys(themeVars).length === 0) { removeRootVars(THEME_STYLE_ID); }
33
+ else { injectRootVars(THEME_STYLE_ID, themeVars); }
34
+ const overrideVars = config.overrides?.[mode] ?? {};
35
+ if (Object.keys(overrideVars).length === 0) { removeRootVars(MODE_OVERRIDES_STYLE_ID); }
36
+ else { injectRootVars(MODE_OVERRIDES_STYLE_ID, overrideVars); }
37
+ }
package/dist/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  // Auto-generated — do not edit manually.
2
2
  export * from "./tokens.js";
3
- export { applyThemeConfig } from "./applyTheme.js";
3
+ export { applyThemeConfig, type ThemeConfig, type ThemeMode, type ThemeEntry } from "./applyThemeConfig.js";
package/dist/index.js CHANGED
@@ -1,3 +1,3 @@
1
1
  // Auto-generated — do not edit manually.
2
2
  export * from "./tokens.js";
3
- export { applyThemeConfig } from "./applyTheme.js";
3
+ export { applyThemeConfig } from "./applyThemeConfig.js";
package/dist/theme-manifest.json CHANGED
@@ -2,19 +2,10 @@
2
2
  "themes": [
3
3
  {
4
4
  "id": "gainsight-light",
5
- "label": "Light",
6
- "description": "Gainsight design system — default light theme",
7
- "selector": null,
8
- "cssFile": null,
9
- "variables": {}
10
- },
11
- {
12
- "id": "dark",
13
- "label": "Dark",
14
- "description": "Gainsight design system — dark mode",
15
- "selector": "[data-theme=\"dark\"]",
16
- "cssFile": "@gainsight-hub/design-tokens/themes/dark.css",
17
- "variables": {
5
+ "label": "Gainsight Default",
6
+ "description": "Gainsight design system — default theme",
7
+ "light": {},
8
+ "dark": {
18
9
  "--theme-neutral-0": "#2B3346",
19
10
  "--theme-neutral-100": "#3B4254",
20
11
  "--theme-neutral-200": "#4F5663",
@@ -51,161 +42,214 @@
51
42
  }
52
43
  },
53
44
  {
54
- "id": "legacy",
55
- "label": "Legacy",
56
- "description": "Gainsight legacy defaults (pre design-system migration)",
57
- "selector": "[data-theme=\"legacy\"]",
58
- "cssFile": "@gainsight-hub/design-tokens/themes/legacy.css",
59
- "variables": {
60
- "--theme-brand-600": "oklch(from var(--theme-brand-700) calc(l + 0.0712) c h)",
61
- "--theme-brand-500": "oklch(from var(--theme-brand-700) calc(l + 0.1443) c h)",
62
- "--theme-brand-400": "oklch(from var(--theme-brand-700) calc(l + 0.2163) c h)",
63
- "--theme-brand-300": "oklch(from var(--theme-brand-700) calc(l + 0.2875) c h)",
64
- "--theme-brand-200": "oklch(from var(--theme-brand-700) calc(l + 0.3584) c h)",
65
- "--theme-brand-100": "oklch(from var(--theme-brand-700) calc(l + 0.4309) c h)",
66
- "--theme-brand-800": "oklch(from var(--theme-brand-700) calc(l - 0.0842) c h)",
67
- "--theme-brand-900": "oklch(from var(--theme-brand-700) calc(l - 0.1674) c h)",
68
- "--theme-brand-1000": "oklch(from var(--theme-brand-700) calc(l - 0.2511) c h)",
69
- "--theme-neutral-0": "#FFFFFF",
70
- "--theme-neutral-100": "oklch(from var(--theme-neutral-1000) calc(l + 0.6097) calc(c * 0.1115) h)",
71
- "--theme-neutral-200": "oklch(from var(--theme-neutral-1000) calc(l + 0.5423) calc(c * 0.1931) h)",
72
- "--theme-neutral-300": "oklch(from var(--theme-neutral-1000) calc(l + 0.4735) calc(c * 0.2806) h)",
73
- "--theme-neutral-400": "oklch(from var(--theme-neutral-1000) calc(l + 0.4066) calc(c * 0.3733) h)",
74
- "--theme-neutral-500": "oklch(from var(--theme-neutral-1000) calc(l + 0.3392) calc(c * 0.5034) h)",
75
- "--theme-neutral-600": "oklch(from var(--theme-neutral-1000) calc(l + 0.2719) calc(c * 0.5672) h)",
76
- "--theme-neutral-700": "oklch(from var(--theme-neutral-1000) calc(l + 0.2031) calc(c * 0.6802) h)",
77
- "--theme-neutral-800": "oklch(from var(--theme-neutral-1000) calc(l + 0.1357) calc(c * 0.8035) h)",
78
- "--theme-neutral-900": "oklch(from var(--theme-neutral-1000) calc(l + 0.0692) calc(c * 0.8940) h)"
79
- }
45
+ "id": "ocean",
46
+ "label": "Ocean",
47
+ "description": "Ocean-inspired blue palette with tinted surfaces and content",
48
+ "light": {
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
+ },
84
+ "dark": {}
80
85
  },
81
86
  {
82
- "id": "mui",
83
- "label": "Material UI",
84
- "description": "Material Design 3–inspired theme",
85
- "selector": "[data-theme=\"mui\"]",
86
- "cssFile": "@gainsight-hub/design-tokens/themes/mui.css",
87
- "variables": {
88
- "--theme-brand-100": "#E3F2FD",
89
- "--theme-brand-200": "#BBDEFB",
90
- "--theme-brand-300": "#90CAF9",
91
- "--theme-brand-400": "#64B5F6",
92
- "--theme-brand-500": "#42A5F5",
93
- "--theme-brand-600": "#1E88E5",
94
- "--theme-brand-700": "#1976D2",
95
- "--theme-brand-800": "#1565C0",
96
- "--theme-brand-900": "#0D47A1",
97
- "--theme-brand-1000": "#072363",
98
- "--theme-neutral-0": "#FFFFFF",
99
- "--theme-neutral-100": "#FAFAFA",
100
- "--theme-neutral-200": "#F5F5F5",
101
- "--theme-neutral-300": "#E0E0E0",
102
- "--theme-neutral-400": "#BDBDBD",
103
- "--theme-neutral-500": "#9E9E9E",
104
- "--theme-neutral-600": "#757575",
105
- "--theme-neutral-700": "#616161",
106
- "--theme-neutral-800": "#424242",
107
- "--theme-neutral-900": "#303030",
108
- "--theme-neutral-1000": "#212121",
109
- "--font-family-sans": "Roboto, 'Helvetica Neue', Arial, sans-serif",
110
- "--font-family-mono": "'Roboto Mono', 'Courier New', monospace",
111
- "--radius-025": "1px",
112
- "--radius-050": "2px",
113
- "--radius-100": "4px",
114
- "--radius-150": "6px",
115
- "--radius-200": "8px",
116
- "--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)",
117
- "--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)",
118
- "--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)",
119
- "--color-status-success-bold": "#2E7D32",
120
- "--color-status-danger-bold": "#D32F2F",
121
- "--color-status-information-bold": "#0288D1"
122
- }
87
+ "id": "ember",
88
+ "label": "Ember",
89
+ "description": "Warm ember-toned orange palette with rich earthy surfaces",
90
+ "light": {
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
+ },
126
+ "dark": {}
123
127
  },
124
128
  {
125
- "id": "antd",
126
- "label": "Ant Design",
127
- "description": "Ant Design 5.x–inspired theme",
128
- "selector": "[data-theme=\"antd\"]",
129
- "cssFile": "@gainsight-hub/design-tokens/themes/antd.css",
130
- "variables": {
131
- "--theme-brand-100": "#E6F4FF",
132
- "--theme-brand-200": "#BAE0FF",
133
- "--theme-brand-300": "#91CAFF",
134
- "--theme-brand-400": "#69B1FF",
135
- "--theme-brand-500": "#4096FF",
136
- "--theme-brand-600": "#2880EB",
137
- "--theme-brand-700": "#1677FF",
138
- "--theme-brand-800": "#0958D9",
139
- "--theme-brand-900": "#003EB3",
140
- "--theme-brand-1000": "#002C8C",
141
- "--theme-neutral-0": "#FFFFFF",
142
- "--theme-neutral-100": "#FAFAFA",
143
- "--theme-neutral-200": "#F5F5F5",
144
- "--theme-neutral-300": "#D9D9D9",
145
- "--theme-neutral-400": "#BFBFBF",
146
- "--theme-neutral-500": "#8C8C8C",
147
- "--theme-neutral-600": "#595959",
148
- "--theme-neutral-700": "#434343",
149
- "--theme-neutral-800": "#262626",
150
- "--theme-neutral-900": "#1F1F1F",
151
- "--theme-neutral-1000": "#141414",
152
- "--font-family-sans": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
153
- "--font-family-mono": "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace",
154
- "--radius-025": "2px",
155
- "--radius-050": "6px",
156
- "--radius-100": "8px",
157
- "--radius-150": "12px",
158
- "--radius-200": "16px",
159
- "--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)",
160
- "--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)",
161
- "--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)",
162
- "--color-status-success-bold": "#52C41A",
163
- "--color-status-danger-bold": "#FF4D4F",
164
- "--color-status-information-bold": "#1677FF"
165
- }
129
+ "id": "meadow",
130
+ "label": "Meadow",
131
+ "description": "Lush green palette inspired by natural meadows",
132
+ "light": {
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": {}
166
169
  },
167
170
  {
168
- "id": "spectrum",
169
- "label": "Adobe Spectrum",
170
- "description": "Adobe Spectrum–inspired theme",
171
- "selector": "[data-theme=\"spectrum\"]",
172
- "cssFile": "@gainsight-hub/design-tokens/themes/spectrum.css",
173
- "variables": {
174
- "--theme-brand-100": "#EAF1FB",
175
- "--theme-brand-200": "#CBE0F8",
176
- "--theme-brand-300": "#A8CCF2",
177
- "--theme-brand-400": "#7FB7EB",
178
- "--theme-brand-500": "#5093DA",
179
- "--theme-brand-600": "#2171C5",
180
- "--theme-brand-700": "#0265DC",
181
- "--theme-brand-800": "#0550AE",
182
- "--theme-brand-900": "#1B3E6E",
183
- "--theme-brand-1000": "#0C2143",
184
- "--theme-neutral-0": "#FFFFFF",
185
- "--theme-neutral-100": "#F5F5F5",
186
- "--theme-neutral-200": "#EAEAEA",
187
- "--theme-neutral-300": "#D3D3D3",
188
- "--theme-neutral-400": "#BCBCBC",
189
- "--theme-neutral-500": "#909090",
190
- "--theme-neutral-600": "#6E6E6E",
191
- "--theme-neutral-700": "#4B4B4B",
192
- "--theme-neutral-800": "#2C2C2C",
193
- "--theme-neutral-900": "#222222",
194
- "--theme-neutral-1000": "#1A1A1A",
195
- "--font-family-sans": "'adobe-clean', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif",
196
- "--font-family-mono": "'Source Code Pro', 'SFMono-Regular', Consolas, monospace",
197
- "--radius-025": "0px",
198
- "--radius-050": "0px",
199
- "--radius-100": "0px",
200
- "--radius-150": "0px",
201
- "--radius-200": "0px",
202
- "--shadow-100": "0px 1px 4px rgba(0, 0, 0, 0.16)",
203
- "--shadow-200": "0px 4px 8px rgba(0, 0, 0, 0.12)",
204
- "--shadow-300": "0px 8px 16px rgba(0, 0, 0, 0.08)",
205
- "--color-status-success-bold": "#008854",
206
- "--color-status-danger-bold": "#D7373F",
207
- "--color-status-information-bold": "#0265DC"
208
- }
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"
251
+ },
252
+ "dark": {}
209
253
  }
210
254
  ],
211
255
  "defaultTheme": "gainsight-light"
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,9 @@
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
+ --font-family-serif: var(--config--main-font-secondary, Georgia, serif);
60
+ --button-font-family: var(--config--main-button-base-font-family, Roboto, sans-serif);
58
61
  --button-radius: var(--config-button-border-radius, 8px);
59
62
  --button-border-width: var(--config-button-border-width, 1px);
60
63
  --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
@@ -1,8 +1,9 @@
1
1
  /* All design tokens + every theme override in one import.
2
2
  Use this unless you need to control which themes are loaded separately. */
3
3
  @import "./styles.css";
4
- @import "./themes/dark.css";
5
4
  @import "./themes/legacy.css";
6
- @import "./themes/mui.css";
7
- @import "./themes/antd.css";
8
- @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-08T06:37:41.505Z",
3
+ "generatedAt": "2026-06-03T06:35:14.792Z",
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,16 +1,20 @@
1
1
  {
2
2
  "name": "@gainsight-hub/design-tokens",
3
- "version": "0.1.1",
3
+ "version": "0.2.0",
4
4
  "description": "Design tokens: CSS variables, JSON, TypeScript constants, and Tailwind preset.",
5
5
  "license": "UNLICENSED",
6
6
  "author": "Gainsight Design Systems",
7
7
  "type": "module",
8
+ "main": "./dist/index.js",
9
+ "types": "./dist/index.d.ts",
8
10
  "files": ["dist"],
9
11
  "sideEffects": ["**/*.css"],
10
12
  "exports": {
11
13
  ".": {
12
14
  "types": "./dist/index.d.ts",
13
- "import": "./dist/index.js"
15
+ "import": "./dist/index.js",
16
+ "require": "./dist/index.js",
17
+ "default": "./dist/index.js"
14
18
  },
15
19
  "./styles.css": "./dist/styles.css",
16
20
  "./themes.css": "./dist/themes.css",
@@ -24,9 +28,7 @@
24
28
  "./theme-manifest.json": "./dist/theme-manifest.json"
25
29
  },
26
30
  "scripts": {
27
- "build": "node ./build.js",
28
- "migrate:generate-mapping": "node ./themes/legacy/generate-mapping.js",
29
- "migrate:tokens": "node ./themes/legacy/migrate-tokens.js"
31
+ "build": "node ./build.js"
30
32
  },
31
33
  "engines": {
32
34
  "node": ">=18.0.0"
package/dist/applyTheme.d.ts DELETED
@@ -1,14 +0,0 @@
1
- // Auto-generated — do not edit manually.
2
-
3
- /**
4
- * Switches the active theme at runtime. Lazy-loads the theme CSS on first use.
5
- * Import styles.css first to establish the default light theme.
6
- *
7
- * @param themeId Theme to activate ("gainsight-dark", "legacy", "theme-mui", …).
8
- * Pass "gainsight-light" to restore the default.
9
- * @param overrides Optional CSS variable overrides applied on top of the base theme.
10
- */
11
- export declare function applyThemeConfig(
12
- themeId: string,
13
- overrides?: Record<string, string>,
14
- ): Promise<void>;
package/dist/applyTheme.js DELETED
@@ -1,66 +0,0 @@
1
- // Auto-generated — do not edit manually.
2
- const THEME_CSS_URLS = {
3
- "dark": new URL("./themes/dark.css", import.meta.url).href,
4
- "legacy": new URL("./themes/legacy.css", import.meta.url).href,
5
- "mui": new URL("./themes/mui.css", import.meta.url).href,
6
- "antd": new URL("./themes/antd.css", import.meta.url).href,
7
- "spectrum": new URL("./themes/spectrum.css", import.meta.url).href,
8
- };
9
-
10
- const STYLE_ID = "__gs-theme-overrides";
11
- const _loaded = new Set();
12
-
13
- function loadCss(url) {
14
- if (_loaded.has(url)) return Promise.resolve();
15
- return new Promise((resolve, reject) => {
16
- const link = document.createElement("link");
17
- link.rel = "stylesheet";
18
- link.href = url;
19
- link.onload = () => { _loaded.add(url); resolve(); };
20
- link.onerror = () => reject(new Error("Failed to load theme CSS: " + url));
21
- document.head.appendChild(link);
22
- });
23
- }
24
-
25
- function injectOverrides(overrides) {
26
- const css = Object.entries(overrides).map(([k, v]) => " " + k + ": " + v + ";").join("\n");
27
- let el = document.getElementById(STYLE_ID);
28
- if (!el) { el = document.createElement("style"); el.id = STYLE_ID; document.head.appendChild(el); }
29
- el.textContent = ":root {\n" + css + "\n}";
30
- }
31
-
32
- function removeOverrides() {
33
- document.getElementById(STYLE_ID)?.remove();
34
- }
35
-
36
- /**
37
- * Switches the active theme at runtime.
38
- *
39
- * @param {string} themeId - Theme to activate. Use "gainsight-light" to restore the default.
40
- * @param {Record<string,string>} [overrides] - Optional CSS variable overrides applied on top.
41
- * @returns {Promise<void>}
42
- *
43
- * @example
44
- * import { applyThemeConfig } from "@gainsight-hub/design-tokens";
45
- *
46
- * await applyThemeConfig("gainsight-dark");
47
- * await applyThemeConfig("gainsight-dark", { "--theme-brand-700": "#FF6600" });
48
- * await applyThemeConfig("gainsight-light"); // restore default
49
- */
50
- export async function applyThemeConfig(themeId, overrides = {}) {
51
- const cssUrl = THEME_CSS_URLS[themeId];
52
-
53
- if (!cssUrl) {
54
- // Default / light theme — remove any active theme attribute
55
- document.documentElement.removeAttribute("data-theme");
56
- } else {
57
- await loadCss(cssUrl);
58
- document.documentElement.setAttribute("data-theme", themeId);
59
- }
60
-
61
- if (Object.keys(overrides).length === 0) {
62
- removeOverrides();
63
- } else {
64
- injectOverrides(overrides);
65
- }
66
- }
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/dark.css DELETED
@@ -1,47 +0,0 @@
1
- /* Auto-generated — do not edit manually. Source: themes/dark/index.js */
2
- /**
3
- * Gainsight design system — dark mode
4
- *
5
- * Usage:
6
- * import "@gainsight-hub/design-tokens/styles.css"; // must load first
7
- * import "@gainsight-hub/design-tokens/themes/dark.css";
8
- * document.documentElement.setAttribute("data-theme", "dark");
9
- *
10
- * Restore default theme:
11
- * document.documentElement.removeAttribute("data-theme");
12
- */
13
- [data-theme="dark"] {
14
- --theme-neutral-0: #2B3346;
15
- --theme-neutral-100: #3B4254;
16
- --theme-neutral-200: #4F5663;
17
- --theme-neutral-300: #696E7C;
18
- --theme-neutral-400: #7B808E;
19
- --theme-neutral-500: #8D919B;
20
- --theme-neutral-600: #B8BBC2;
21
- --theme-neutral-700: #DEDFE2;
22
- --theme-neutral-800: #F4F5F6;
23
- --theme-neutral-900: #FAFAFA;
24
- --theme-neutral-1000: #FFFFFF;
25
- --config-hero-color: #FFFFFF;
26
- --theme-brand-100: #1C2B41;
27
- --theme-brand-200: #09326C;
28
- --theme-brand-300: #0055CC;
29
- --theme-brand-400: #0C66E4;
30
- --theme-brand-500: #1D7AFC;
31
- --theme-brand-600: #388BFF;
32
- --theme-brand-700: #579DFF;
33
- --theme-brand-800: #85B8FF;
34
- --theme-brand-900: #CCE0FF;
35
- --theme-brand-1000: #E9F2FF;
36
- --color-status-success-bold: #4BCE7F;
37
- --color-status-information-bold: #579DFF;
38
- --color-status-danger-bold: #F86A68;
39
- --color-community-answered: #4BCE7F;
40
- --color-community-highlighted: #F5CD47;
41
- --color-community-pinned: #579DFF;
42
- --color-overlay-interactive-hover: rgba(255, 255, 255, 0.08);
43
- --color-overlay-interactive-pressed: rgba(255, 255, 255, 0.14);
44
- --color-overlay-backdrop: rgba(9, 30, 66, 0.72);
45
- --color-skeleton-default: #4F5663;
46
- --color-skeleton-subtle: #3B4254;
47
- }
package/dist/themes/dark.css.d.ts DELETED
@@ -1,2 +0,0 @@
1
- // CSS side-effect only — activates [data-theme="dark"] 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 {};