@gainsight-hub/design-tokens 0.2.2 → 0.2.4

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 (12) hide show
  1. package/dist/applyThemeConfig.js +22 -6
  2. package/dist/styles.css +48 -51
  3. package/dist/tailwind.preset.cjs +3 -16
  4. package/dist/tailwind.preset.mjs +3 -16
  5. package/dist/theme-manifest.json +180 -5
  6. package/dist/themes/legacy.css +11 -3
  7. package/dist/token-catalog.json +258 -376
  8. package/dist/tokens.d.ts +18 -15
  9. package/dist/tokens.js +51 -56
  10. package/dist/tokens.json +59 -56
  11. package/dist/tokens.scss +51 -56
  12. package/package.json +1 -1
package/dist/applyThemeConfig.js CHANGED
@@ -9,7 +9,11 @@ function injectRootVars(styleId, vars) {
9
9
  if (entries.length === 0) return;
10
10
  const css = entries.map(([k, v]) => " " + k + ": " + v + ";").join("\n");
11
11
  let el = document.getElementById(styleId);
12
- if (!el) { el = document.createElement("style"); el.id = styleId; (document.head ?? document.documentElement).appendChild(el); }
12
+ if (!el) {
13
+ el = document.createElement("style");
14
+ el.id = styleId;
15
+ (document.head ?? document.documentElement).appendChild(el);
16
+ }
13
17
  el.textContent = ":root {\n" + css + "\n}";
14
18
  }
15
19
 
@@ -25,13 +29,25 @@ export function applyThemeConfig(config, mode = "light") {
25
29
  document.documentElement.removeAttribute("data-theme");
26
30
  document.documentElement.classList.remove("dark");
27
31
  }
32
+
28
33
  const themeId = config.themeId;
29
34
  const theme = manifest.themes.find(t => t.id === themeId);
30
- if (!theme) { console.warn("[design-tokens] theme \"" + themeId + "\" not found"); return; }
35
+ if (!theme) {
36
+ console.warn("[design-tokens] theme \"" + themeId + "\" not found");
37
+ return;
38
+ }
39
+
31
40
  const themeVars = theme[mode] ?? {};
32
- if (Object.keys(themeVars).length === 0) { removeRootVars(THEME_STYLE_ID); }
33
- else { injectRootVars(THEME_STYLE_ID, themeVars); }
41
+ if (Object.keys(themeVars).length === 0) {
42
+ removeRootVars(THEME_STYLE_ID);
43
+ } else {
44
+ injectRootVars(THEME_STYLE_ID, themeVars);
45
+ }
46
+
34
47
  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); }
48
+ if (Object.keys(overrideVars).length === 0) {
49
+ removeRootVars(MODE_OVERRIDES_STYLE_ID);
50
+ } else {
51
+ injectRootVars(MODE_OVERRIDES_STYLE_ID, overrideVars);
52
+ }
37
53
  }
package/dist/styles.css CHANGED
@@ -13,16 +13,16 @@
13
13
  /* ───────────────────────────────────────────────────────────────────────── */
14
14
 
15
15
  /* Brand scale */
16
- --theme-brand-100: #E9F2FF;
17
- --theme-brand-200: #CCE0FF;
18
- --theme-brand-300: #85B8FF;
19
- --theme-brand-400: #579DFF;
20
- --theme-brand-500: #388BFF;
21
- --theme-brand-600: #1D7AFC;
22
- --theme-brand-700: #0C66E4;
23
- --theme-brand-800: #0055CC;
24
- --theme-brand-900: #09326C;
25
- --theme-brand-1000: #1C2B41;
16
+ --theme-brand-100: #F2F0FF;
17
+ --theme-brand-200: #DCD8FD;
18
+ --theme-brand-300: #B3ACF6;
19
+ --theme-brand-400: #978FEF;
20
+ --theme-brand-500: #877EE7;
21
+ --theme-brand-600: #7970DB;
22
+ --theme-brand-700: #645DC6;
23
+ --theme-brand-800: #544DB2;
24
+ --theme-brand-900: #2F2C63;
25
+ --theme-brand-1000: #28273F;
26
26
 
27
27
  /* Neutral scale */
28
28
  --theme-neutral-0: #FFFFFF;
@@ -46,16 +46,16 @@
46
46
  /* ───────────────────────────────────────────────────────────────────────── */
47
47
 
48
48
  /* Color — Brand */
49
- --color-brand-100: var(--theme-brand-100, #E9F2FF);
50
- --color-brand-200: var(--theme-brand-200, #CCE0FF);
51
- --color-brand-300: var(--theme-brand-300, #85B8FF);
52
- --color-brand-400: var(--theme-brand-400, #579DFF);
53
- --color-brand-500: var(--theme-brand-500, #388BFF);
54
- --color-brand-600: var(--theme-brand-600, #1D7AFC);
55
- --color-brand-700: var(--theme-brand-700, #0C66E4);
56
- --color-brand-800: var(--theme-brand-800, #0055CC);
57
- --color-brand-900: var(--theme-brand-900, #09326C);
58
- --color-brand-1000: var(--theme-brand-1000, #1C2B41);
49
+ --color-brand-100: var(--theme-brand-100, #F2F0FF);
50
+ --color-brand-200: var(--theme-brand-200, #DCD8FD);
51
+ --color-brand-300: var(--theme-brand-300, #B3ACF6);
52
+ --color-brand-400: var(--theme-brand-400, #978FEF);
53
+ --color-brand-500: var(--theme-brand-500, #877EE7);
54
+ --color-brand-600: var(--theme-brand-600, #7970DB);
55
+ --color-brand-700: var(--theme-brand-700, #645DC6);
56
+ --color-brand-800: var(--theme-brand-800, #544DB2);
57
+ --color-brand-900: var(--theme-brand-900, #2F2C63);
58
+ --color-brand-1000: var(--theme-brand-1000, #28273F);
59
59
 
60
60
  /* Color — Neutral */
61
61
  --color-neutral-a100: rgba(43, 51, 70, 0.04);
@@ -107,7 +107,7 @@
107
107
  --color-red-500: #f15050;
108
108
  --color-red-600: #e23d3d;
109
109
  --color-red-700: #c92c2f;
110
- --color-red-800: #ae2426;
110
+ --color-red-800: #ae2424;
111
111
  --color-red-900: #5d1a1c;
112
112
  --color-red-1000: #421f21;
113
113
 
@@ -125,6 +125,8 @@
125
125
 
126
126
  /* Typography */
127
127
  --font-family-sans: Roboto;
128
+ --font-family-heading: Roboto;
129
+ --font-family-button: Roboto;
128
130
  --font-family-mono: Roboto Mono;
129
131
  --font-weight-regular: 400;
130
132
  --font-weight-medium: 500;
@@ -187,11 +189,11 @@
187
189
 
188
190
  /* Color — Action */
189
191
  --color-action-destructive-default: var(--color-red-700, #c92c2f); /** color used for actions that perform irreversible or potentially harmful operations */
190
- --color-action-destructive-hover: var(--color-red-800, #ae2426); /** color used when a destructive action is hovered */
192
+ --color-action-destructive-hover: var(--color-red-800, #ae2424); /** color used when a destructive action is hovered */
191
193
  --color-action-destructive-pressed: var(--color-red-900, #5d1a1c); /** color used when a destructive action is actively pressed */
192
- --color-action-primary-default: var(--color-brand-700, #0C66E4); /** default color used for the most prominent call-to-action in the interface */
193
- --color-action-primary-hover: var(--color-brand-800, #0055CC); /** color used when a primary action is hovered */
194
- --color-action-primary-pressed: var(--color-brand-900, #09326C); /** color used when a primary action is actively pressed */
194
+ --color-action-primary-default: var(--color-brand-700, #645DC6); /** default color used for the most prominent call-to-action in the interface */
195
+ --color-action-primary-hover: var(--color-brand-800, #544DB2); /** color used when a primary action is hovered */
196
+ --color-action-primary-pressed: var(--color-brand-900, #2F2C63); /** color used when a primary action is actively pressed */
195
197
  --color-action-neutral-default: var(--color-neutral-0, #FFFFFF); /** color used for less prominent actions that support the primary action */
196
198
  --color-action-neutral-hover: var(--color-neutral-100, #FAFAFA); /** color used when a secondary action is hovered */
197
199
  --color-action-neutral-pressed: var(--color-neutral-200, #F4F5F6); /** color used when a secondary action is actively pressed */
@@ -223,8 +225,8 @@
223
225
  --color-status-danger-bold: var(--color-red-700, #c92c2f); /** high-emphasis color used for neutral informational messages */
224
226
 
225
227
  /* Color — Link */
226
- --color-link-default: var(--color-brand-700, #0C66E4); /** default color used for interactive text links */
227
- --color-link-hover: var(--color-brand-800, #0055CC); /** color used for interactive text links on hover */
228
+ --color-link-default: var(--color-brand-700, #645DC6); /** default color used for interactive text links */
229
+ --color-link-hover: var(--color-brand-800, #544DB2); /** color used for interactive text links on hover */
228
230
 
229
231
  /* Color — Focus */
230
232
  --color-focus-ring: var(--color-blue-500, #388bff); /** default color used for focus rings on interactive elements */
@@ -241,67 +243,52 @@
241
243
  /* Color — Community */
242
244
  --color-community-answered: var(--color-green-700, #1f8444); /** color used to indicate that a question or thread has received an accepted answer */
243
245
  --color-community-unanswered: var(--color-neutral-700, #696E7C); /** color used to indicate that a question or thread has not yet received a response */
244
- --color-community-highlighted: var(--color-brand-700, #0C66E4); /** color used to highlight content that is featured or editorially promoted */
245
- --color-community-pinned: var(--color-brand-700, #0C66E4); /** color used to indicate content that is pinned and prioritized in listings */
246
+ --color-community-highlighted: var(--color-brand-700, #645DC6); /** color used to highlight content that is featured or editorially promoted */
247
+ --color-community-pinned: var(--color-brand-700, #645DC6); /** color used to indicate content that is pinned and prioritized in listings */
246
248
 
247
249
  /* Typography */
248
- --text-hero-font-family: var(--font-family-sans, Roboto);
249
250
  --text-hero-font-weight: var(--font-weight-bold, 700);
250
251
  --text-hero-font-size: var(--font-size-700, 2rem);
251
252
  --text-hero-line-height: var(--line-height-ratio-tight, 1.25);
252
- --text-heading-small-font-family: var(--font-family-sans, Roboto);
253
253
  --text-heading-small-font-weight: var(--font-weight-medium, 500);
254
254
  --text-heading-small-font-size: var(--font-size-400, 1.25rem);
255
255
  --text-heading-small-line-height: var(--line-height-ratio-tight, 1.25);
256
- --text-heading-medium-font-family: var(--font-family-sans, Roboto);
257
256
  --text-heading-medium-font-weight: var(--font-weight-medium, 500);
258
257
  --text-heading-medium-font-size: var(--font-size-500, 1.5rem);
259
258
  --text-heading-medium-line-height: var(--line-height-ratio-tight, 1.25);
260
- --text-heading-large-font-family: var(--font-family-sans, Roboto);
261
259
  --text-heading-large-font-weight: var(--font-weight-bold, 700);
262
260
  --text-heading-large-font-size: var(--font-size-600, 1.75rem);
263
261
  --text-heading-large-line-height: var(--line-height-ratio-tight, 1.25);
264
- --text-heading-xlarge-font-family: var(--font-family-sans, Roboto);
265
262
  --text-heading-xlarge-font-weight: var(--font-weight-bold, 700);
266
263
  --text-heading-xlarge-font-size: var(--font-size-700, 2rem);
267
264
  --text-heading-xlarge-line-height: var(--line-height-ratio-tight, 1.25);
268
- --text-body-small-font-family: var(--font-family-sans, Roboto);
269
265
  --text-body-small-font-weight: var(--font-weight-regular, 400);
270
266
  --text-body-small-font-size: var(--font-size-200, 0.875rem);
271
267
  --text-body-small-line-height: var(--line-height-ratio-relaxed, 1.5);
272
- --text-body-medium-font-family: var(--font-family-sans, Roboto);
273
268
  --text-body-medium-font-weight: var(--font-weight-regular, 400);
274
269
  --text-body-medium-font-size: var(--font-size-300, 1rem);
275
270
  --text-body-medium-line-height: var(--line-height-ratio-relaxed, 1.5);
276
- --text-body-large-font-family: var(--font-family-sans, Roboto);
277
271
  --text-body-large-font-weight: var(--font-weight-regular, 400);
278
272
  --text-body-large-font-size: var(--font-size-400, 1.25rem);
279
273
  --text-body-large-line-height: var(--line-height-ratio-relaxed, 1.5);
280
- --text-navigation-font-family: var(--font-family-sans, Roboto);
281
274
  --text-navigation-font-weight: var(--font-weight-regular, 400);
282
275
  --text-navigation-font-size: var(--font-size-200, 0.875rem);
283
276
  --text-navigation-line-height: var(--line-height-grid-200, 1.25rem);
284
- --text-menu-font-family: var(--font-family-sans, Roboto);
285
277
  --text-menu-font-weight: var(--font-weight-regular, 400);
286
278
  --text-menu-font-size: var(--font-size-200, 0.875rem);
287
279
  --text-menu-line-height: var(--line-height-grid-200, 1.25rem);
288
- --text-button-font-family: var(--font-family-sans, Roboto);
289
280
  --text-button-font-weight: var(--font-weight-medium, 500);
290
281
  --text-button-font-size: var(--font-size-200, 0.875rem);
291
282
  --text-button-line-height: var(--line-height-grid-200, 1.25rem);
292
- --text-label-small-font-family: var(--font-family-sans, Roboto);
293
283
  --text-label-small-font-weight: var(--font-weight-medium, 500);
294
284
  --text-label-small-font-size: var(--font-size-200, 0.875rem);
295
285
  --text-label-small-line-height: var(--line-height-grid-200, 1.25rem);
296
- --text-label-medium-font-family: var(--font-family-sans, Roboto);
297
286
  --text-label-medium-font-weight: var(--font-weight-medium, 500);
298
287
  --text-label-medium-font-size: var(--font-size-300, 1rem);
299
288
  --text-label-medium-line-height: var(--line-height-grid-300, 1.5rem);
300
- --text-caption-font-family: var(--font-family-sans, Roboto);
301
289
  --text-caption-font-weight: var(--font-weight-regular, 400);
302
290
  --text-caption-font-size: var(--font-size-100, 0.75rem);
303
291
  --text-caption-line-height: var(--line-height-grid-100, 1rem);
304
- --text-code-font-family: var(--font-family-mono, Roboto Mono);
305
292
  --text-code-font-weight: var(--font-weight-regular, 400);
306
293
  --text-code-font-size: var(--font-size-300, 1rem);
307
294
  --text-code-line-height: var(--line-height-ratio-relaxed, 1.5);
@@ -348,7 +335,7 @@
348
335
  --button-destructive-background-default: var(--color-action-destructive-default, #c92c2f); /** Destructive button background in default state. */
349
336
  --button-destructive-background-hover: color-mix(in oklch, var(--button-destructive-background-default) 85%, black); /** Destructive button background on hover. */
350
337
  --button-destructive-background-pressed: color-mix(in oklch, var(--button-destructive-background-default) 70%, black); /** Destructive button background on press. */
351
- --button-primary-background-default: var(--color-action-primary-default, #0C66E4); /** Primary button background in default state. */
338
+ --button-primary-background-default: var(--color-action-primary-default, #645DC6); /** Primary button background in default state. */
352
339
  --button-primary-background-hover: color-mix(in oklch, var(--button-primary-background-default) 85%, black); /** Primary button background on hover. */
353
340
  --button-primary-background-pressed: color-mix(in oklch, var(--button-primary-background-default) 70%, black); /** Primary button background on press. */
354
341
  --button-primary-content-default: var(--color-content-inverse, #FFFFFF); /** Primary button label/icon color in default state. */
@@ -375,7 +362,7 @@
375
362
  --button-vote-border-default: var(--color-line-default, #DEDFE2); /** Vote button border color in default state. */
376
363
  --button-vote-border-hover: var(--color-line-default, #DEDFE2); /** Vote button border color on hover. */
377
364
  --button-vote-border-pressed: var(--color-line-default, #DEDFE2); /** Vote button border color on press. */
378
- --button-vote-selected-background-default: var(--color-action-primary-default, #0C66E4); /** Vote button background when selected (default). */
365
+ --button-vote-selected-background-default: var(--color-action-primary-default, #645DC6); /** Vote button background when selected (default). */
379
366
  --button-vote-selected-background-hover: color-mix(in oklch, var(--button-vote-selected-background-default) 85%, black); /** Vote button background when selected (hovered). */
380
367
  --button-vote-selected-background-pressed: color-mix(in oklch, var(--button-vote-selected-background-default) 70%, black); /** Vote button background when selected (pressed). */
381
368
  --button-vote-selected-content-default: var(--color-content-inverse, #FFFFFF); /** Vote button content color when selected (default). */
@@ -395,11 +382,21 @@
395
382
  --card-background-hover: color-mix(in oklch, var(--card-background-default) 85%, black); /** Card background on hover. */
396
383
  --card-background-pressed: color-mix(in oklch, var(--card-background-default) 70%, black); /** Card background on press. */
397
384
  --card-title-default: var(--color-content-heading-default, #2B3346); /** Card title color in default state. */
398
- --card-title-hover: var(--color-link-default, #0C66E4); /** Card title color on hover (link styling). */
385
+ --card-title-hover: var(--color-link-default, #645DC6); /** Card title color on hover (link styling). */
399
386
  --card-title-pressed: var(--color-content-heading-default, #2B3346); /** Card title color on press. */
400
387
  --card-content-default: var(--color-content-default, #2B3346); /** Card body/content color in default state. */
401
388
  --card-content-hover: var(--color-content-default, #2B3346); /** Card body/content color on hover. */
402
- --card-content-pressed: var(--color-link-hover, #0055CC); /** Card body/content color on press (link hovered styling). */
389
+ --card-content-pressed: var(--color-link-hover, #544DB2); /** Card body/content color on press (link hovered styling). */
390
+
391
+ /* Sidebar */
392
+ --sidebar-shadow: none; /** Sidebar widget placeholder box shadow. */
393
+ --sidebar-border-radius: var(--radius-100, 8px); /** Sidebar widget placeholder border radius. */
394
+ --sidebar-border-width: var(--border-width-100, 1px); /** Sidebar widget placeholder border width. */
395
+ --sidebar-title-font-family: var(--font-family-sans, Roboto); /** Sidebar widget title font family. */
396
+ --sidebar-title-font-weight: var(--font-weight-medium, 500); /** Sidebar widget title font weight. */
397
+ --sidebar-background: var(--color-surface-default, #FFFFFF); /** Sidebar widget placeholder background color. */
398
+ --sidebar-border-color: var(--color-line-default, #DEDFE2); /** Sidebar widget placeholder border color. */
399
+ --sidebar-title-color: var(--color-content-heading-default, #2B3346); /** Sidebar widget title text color. */
403
400
 
404
401
  /* Feed */
405
402
  --feed-container-shadow: none; /** Feed container shadow (none). */
@@ -419,11 +416,11 @@
419
416
  --feed-item-background-hover: color-mix(in oklch, var(--feed-item-background-default) 85%, black); /** Feed item background on hover. */
420
417
  --feed-item-background-pressed: color-mix(in oklch, var(--feed-item-background-default) 70%, black); /** Feed item background on press. */
421
418
  --feed-item-title-default: var(--color-content-heading-default, #2B3346); /** Feed item title color in default state. */
422
- --feed-item-title-hover: var(--color-link-default, #0C66E4); /** Feed item title color on hover (link styling). */
423
- --feed-item-title-pressed: var(--color-link-hover, #0055CC); /** Feed item title color on press (link hovered styling). */
419
+ --feed-item-title-hover: var(--color-link-default, #645DC6); /** Feed item title color on hover (link styling). */
420
+ --feed-item-title-pressed: var(--color-link-hover, #544DB2); /** Feed item title color on press (link hovered styling). */
424
421
  --feed-item-content-default: var(--color-content-default, #2B3346); /** Feed item content color in default state. */
425
422
  --feed-item-content-hover: var(--color-content-default, #2B3346); /** Feed item content color on hover. */
426
- --feed-item-content-pressed: var(--color-link-hover, #0055CC); /** Feed item content color on press (link hovered styling). */
423
+ --feed-item-content-pressed: var(--color-link-hover, #544DB2); /** Feed item content color on press (link hovered styling). */
427
424
 
428
425
  /* Navigation */
429
426
  --navigation-border-top: rgba(0, 0, 0, 0); /** Top border of navigation (transparent). */
package/dist/tailwind.preset.cjs CHANGED
@@ -221,22 +221,9 @@ module.exports = {
221
221
  },
222
222
  "fontFamily": {
223
223
  "font-family-sans": "var(--font-family-sans)",
224
- "font-family-mono": "var(--font-family-mono)",
225
- "text-hero-font-family": "var(--text-hero-font-family)",
226
- "text-heading-small-font-family": "var(--text-heading-small-font-family)",
227
- "text-heading-medium-font-family": "var(--text-heading-medium-font-family)",
228
- "text-heading-large-font-family": "var(--text-heading-large-font-family)",
229
- "text-heading-xlarge-font-family": "var(--text-heading-xlarge-font-family)",
230
- "text-body-small-font-family": "var(--text-body-small-font-family)",
231
- "text-body-medium-font-family": "var(--text-body-medium-font-family)",
232
- "text-body-large-font-family": "var(--text-body-large-font-family)",
233
- "text-navigation-font-family": "var(--text-navigation-font-family)",
234
- "text-menu-font-family": "var(--text-menu-font-family)",
235
- "text-button-font-family": "var(--text-button-font-family)",
236
- "text-label-small-font-family": "var(--text-label-small-font-family)",
237
- "text-label-medium-font-family": "var(--text-label-medium-font-family)",
238
- "text-caption-font-family": "var(--text-caption-font-family)",
239
- "text-code-font-family": "var(--text-code-font-family)"
224
+ "font-family-heading": "var(--font-family-heading)",
225
+ "font-family-button": "var(--font-family-button)",
226
+ "font-family-mono": "var(--font-family-mono)"
240
227
  },
241
228
  "fontWeight": {
242
229
  "font-weight-regular": "var(--font-weight-regular)",
package/dist/tailwind.preset.mjs CHANGED
@@ -221,22 +221,9 @@ export default {
221
221
  },
222
222
  "fontFamily": {
223
223
  "font-family-sans": "var(--font-family-sans)",
224
- "font-family-mono": "var(--font-family-mono)",
225
- "text-hero-font-family": "var(--text-hero-font-family)",
226
- "text-heading-small-font-family": "var(--text-heading-small-font-family)",
227
- "text-heading-medium-font-family": "var(--text-heading-medium-font-family)",
228
- "text-heading-large-font-family": "var(--text-heading-large-font-family)",
229
- "text-heading-xlarge-font-family": "var(--text-heading-xlarge-font-family)",
230
- "text-body-small-font-family": "var(--text-body-small-font-family)",
231
- "text-body-medium-font-family": "var(--text-body-medium-font-family)",
232
- "text-body-large-font-family": "var(--text-body-large-font-family)",
233
- "text-navigation-font-family": "var(--text-navigation-font-family)",
234
- "text-menu-font-family": "var(--text-menu-font-family)",
235
- "text-button-font-family": "var(--text-button-font-family)",
236
- "text-label-small-font-family": "var(--text-label-small-font-family)",
237
- "text-label-medium-font-family": "var(--text-label-medium-font-family)",
238
- "text-caption-font-family": "var(--text-caption-font-family)",
239
- "text-code-font-family": "var(--text-code-font-family)"
224
+ "font-family-heading": "var(--font-family-heading)",
225
+ "font-family-button": "var(--font-family-button)",
226
+ "font-family-mono": "var(--font-family-mono)"
240
227
  },
241
228
  "fontWeight": {
242
229
  "font-weight-regular": "var(--font-weight-regular)",
package/dist/theme-manifest.json CHANGED
@@ -81,7 +81,42 @@
81
81
  "--color-link-default": "#1d4ed8",
82
82
  "--color-link-hover": "#1e40af"
83
83
  },
84
- "dark": {}
84
+ "dark": {
85
+ "--color-action-primary-default": "#60a5fa",
86
+ "--color-action-primary-hover": "#93c5fd",
87
+ "--color-action-primary-pressed": "#bae6fd",
88
+ "--color-action-neutral-default": "#1e3a5f",
89
+ "--color-action-neutral-hover": "#0c2a4a",
90
+ "--color-action-neutral-pressed": "#0c1a2e",
91
+ "--color-surface-default": "#1e3a5f",
92
+ "--color-surface-muted": "#0c2a4a",
93
+ "--color-surface-inverse": "#e0f2fe",
94
+ "--color-surface-overlay": "#1e3a5f",
95
+ "--color-surface-page": "#0c1a2e",
96
+ "--color-surface-disabled": "#1e3a5f",
97
+ "--color-content-default": "#e0f2fe",
98
+ "--color-content-subtle": "#7dd3fc",
99
+ "--color-content-subtlest": "#38bdf8",
100
+ "--color-content-heading-default": "#e0f2fe",
101
+ "--color-content-heading-hero": "#e0f2fe",
102
+ "--color-content-inverse": "#0c1a2e",
103
+ "--color-content-disabled": "#1e3a5f",
104
+ "--color-line-default": "#2d5278",
105
+ "--color-line-disabled": "#1e3a5f",
106
+ "--color-status-success-bold": "#4ade80",
107
+ "--color-status-information-bold": "#60a5fa",
108
+ "--color-status-danger-bold": "#f87171",
109
+ "--color-action-destructive-default": "#f87171",
110
+ "--color-action-destructive-hover": "#fca5a5",
111
+ "--color-action-destructive-pressed": "#fecaca",
112
+ "--color-community-answered": "#4ade80",
113
+ "--color-community-unanswered": "#94a3b8",
114
+ "--color-community-highlighted": "#60a5fa",
115
+ "--color-community-pinned": "#60a5fa",
116
+ "--color-community-sticky": "#60a5fa",
117
+ "--color-link-default": "#60a5fa",
118
+ "--color-link-hover": "#93c5fd"
119
+ }
85
120
  },
86
121
  {
87
122
  "id": "ember",
@@ -123,7 +158,42 @@
123
158
  "--color-link-default": "#c2410c",
124
159
  "--color-link-hover": "#9a3412"
125
160
  },
126
- "dark": {}
161
+ "dark": {
162
+ "--color-action-primary-default": "#f87171",
163
+ "--color-action-primary-hover": "#fca5a5",
164
+ "--color-action-primary-pressed": "#fecaca",
165
+ "--color-action-neutral-default": "#2d1010",
166
+ "--color-action-neutral-hover": "#1c0a0a",
167
+ "--color-action-neutral-pressed": "#0a0000",
168
+ "--color-surface-default": "#2d1010",
169
+ "--color-surface-muted": "#1c0a0a",
170
+ "--color-surface-inverse": "#fee2e2",
171
+ "--color-surface-overlay": "#2d1010",
172
+ "--color-surface-page": "#1c0a0a",
173
+ "--color-surface-disabled": "#2d1010",
174
+ "--color-content-default": "#fee2e2",
175
+ "--color-content-subtle": "#fca5a5",
176
+ "--color-content-subtlest": "#f87171",
177
+ "--color-content-heading-default": "#fee2e2",
178
+ "--color-content-heading-hero": "#fee2e2",
179
+ "--color-content-inverse": "#1c0a0a",
180
+ "--color-content-disabled": "#2d1010",
181
+ "--color-line-default": "#4a2020",
182
+ "--color-line-disabled": "#2d1010",
183
+ "--color-status-success-bold": "#4ade80",
184
+ "--color-status-information-bold": "#60a5fa",
185
+ "--color-status-danger-bold": "#f87171",
186
+ "--color-action-destructive-default": "#f87171",
187
+ "--color-action-destructive-hover": "#fca5a5",
188
+ "--color-action-destructive-pressed": "#fecaca",
189
+ "--color-community-answered": "#4ade80",
190
+ "--color-community-unanswered": "#9ca3af",
191
+ "--color-community-highlighted": "#f87171",
192
+ "--color-community-pinned": "#f87171",
193
+ "--color-community-sticky": "#f87171",
194
+ "--color-link-default": "#f87171",
195
+ "--color-link-hover": "#fca5a5"
196
+ }
127
197
  },
128
198
  {
129
199
  "id": "meadow",
@@ -165,7 +235,42 @@
165
235
  "--color-link-default": "#166534",
166
236
  "--color-link-hover": "#14532d"
167
237
  },
168
- "dark": {}
238
+ "dark": {
239
+ "--color-action-primary-default": "#4ade80",
240
+ "--color-action-primary-hover": "#86efac",
241
+ "--color-action-primary-pressed": "#bbf7d0",
242
+ "--color-action-neutral-default": "#0f4a24",
243
+ "--color-action-neutral-hover": "#052e16",
244
+ "--color-action-neutral-pressed": "#021a0e",
245
+ "--color-surface-default": "#0f4a24",
246
+ "--color-surface-muted": "#052e16",
247
+ "--color-surface-inverse": "#dcfce7",
248
+ "--color-surface-overlay": "#0f4a24",
249
+ "--color-surface-page": "#052e16",
250
+ "--color-surface-disabled": "#0f4a24",
251
+ "--color-content-default": "#dcfce7",
252
+ "--color-content-subtle": "#86efac",
253
+ "--color-content-subtlest": "#4ade80",
254
+ "--color-content-heading-default": "#dcfce7",
255
+ "--color-content-heading-hero": "#dcfce7",
256
+ "--color-content-inverse": "#052e16",
257
+ "--color-content-disabled": "#0f4a24",
258
+ "--color-line-default": "#1e6634",
259
+ "--color-line-disabled": "#0f4a24",
260
+ "--color-status-success-bold": "#4ade80",
261
+ "--color-status-information-bold": "#60a5fa",
262
+ "--color-status-danger-bold": "#f87171",
263
+ "--color-action-destructive-default": "#f87171",
264
+ "--color-action-destructive-hover": "#fca5a5",
265
+ "--color-action-destructive-pressed": "#fecaca",
266
+ "--color-community-answered": "#4ade80",
267
+ "--color-community-unanswered": "#9ca3af",
268
+ "--color-community-highlighted": "#4ade80",
269
+ "--color-community-pinned": "#4ade80",
270
+ "--color-community-sticky": "#4ade80",
271
+ "--color-link-default": "#4ade80",
272
+ "--color-link-hover": "#86efac"
273
+ }
169
274
  },
170
275
  {
171
276
  "id": "violet",
@@ -207,7 +312,42 @@
207
312
  "--color-link-default": "#4f46e5",
208
313
  "--color-link-hover": "#4338ca"
209
314
  },
210
- "dark": {}
315
+ "dark": {
316
+ "--color-action-primary-default": "#a78bfa",
317
+ "--color-action-primary-hover": "#c4b5fd",
318
+ "--color-action-primary-pressed": "#ddd6fe",
319
+ "--color-action-neutral-default": "#2d0d4e",
320
+ "--color-action-neutral-hover": "#1e0533",
321
+ "--color-action-neutral-pressed": "#0f0020",
322
+ "--color-surface-default": "#2d0d4e",
323
+ "--color-surface-muted": "#1e0533",
324
+ "--color-surface-inverse": "#f3e8ff",
325
+ "--color-surface-overlay": "#2d0d4e",
326
+ "--color-surface-page": "#1e0533",
327
+ "--color-surface-disabled": "#2d0d4e",
328
+ "--color-content-default": "#f3e8ff",
329
+ "--color-content-subtle": "#c4b5fd",
330
+ "--color-content-subtlest": "#a78bfa",
331
+ "--color-content-heading-default": "#f3e8ff",
332
+ "--color-content-heading-hero": "#f3e8ff",
333
+ "--color-content-inverse": "#1e0533",
334
+ "--color-content-disabled": "#2d0d4e",
335
+ "--color-line-default": "#4a1d7a",
336
+ "--color-line-disabled": "#2d0d4e",
337
+ "--color-status-success-bold": "#4ade80",
338
+ "--color-status-information-bold": "#60a5fa",
339
+ "--color-status-danger-bold": "#f87171",
340
+ "--color-action-destructive-default": "#f87171",
341
+ "--color-action-destructive-hover": "#fca5a5",
342
+ "--color-action-destructive-pressed": "#fecaca",
343
+ "--color-community-answered": "#4ade80",
344
+ "--color-community-unanswered": "#9ca3af",
345
+ "--color-community-highlighted": "#a78bfa",
346
+ "--color-community-pinned": "#a78bfa",
347
+ "--color-community-sticky": "#a78bfa",
348
+ "--color-link-default": "#a78bfa",
349
+ "--color-link-hover": "#c4b5fd"
350
+ }
211
351
  },
212
352
  {
213
353
  "id": "slate",
@@ -249,7 +389,42 @@
249
389
  "--color-link-default": "#334155",
250
390
  "--color-link-hover": "#1e293b"
251
391
  },
252
- "dark": {}
392
+ "dark": {
393
+ "--color-action-primary-default": "#818cf8",
394
+ "--color-action-primary-hover": "#a5b4fc",
395
+ "--color-action-primary-pressed": "#c7d2fe",
396
+ "--color-action-neutral-default": "#1e293b",
397
+ "--color-action-neutral-hover": "#0f172a",
398
+ "--color-action-neutral-pressed": "#020617",
399
+ "--color-surface-default": "#1e293b",
400
+ "--color-surface-muted": "#0f172a",
401
+ "--color-surface-inverse": "#f1f5f9",
402
+ "--color-surface-overlay": "#1e293b",
403
+ "--color-surface-page": "#0f172a",
404
+ "--color-surface-disabled": "#1e293b",
405
+ "--color-content-default": "#f1f5f9",
406
+ "--color-content-subtle": "#94a3b8",
407
+ "--color-content-subtlest": "#64748b",
408
+ "--color-content-heading-default": "#f1f5f9",
409
+ "--color-content-heading-hero": "#f1f5f9",
410
+ "--color-content-inverse": "#0f172a",
411
+ "--color-content-disabled": "#475569",
412
+ "--color-line-default": "#475569",
413
+ "--color-line-disabled": "#334155",
414
+ "--color-status-success-bold": "#4ade80",
415
+ "--color-status-information-bold": "#60a5fa",
416
+ "--color-status-danger-bold": "#f87171",
417
+ "--color-action-destructive-default": "#f87171",
418
+ "--color-action-destructive-hover": "#fca5a5",
419
+ "--color-action-destructive-pressed": "#fecaca",
420
+ "--color-community-answered": "#4ade80",
421
+ "--color-community-unanswered": "#94a3b8",
422
+ "--color-community-highlighted": "#818cf8",
423
+ "--color-community-pinned": "#818cf8",
424
+ "--color-community-sticky": "#818cf8",
425
+ "--color-link-default": "#818cf8",
426
+ "--color-link-hover": "#a5b4fc"
427
+ }
253
428
  }
254
429
  ],
255
430
  "defaultTheme": "gainsight-light"
package/dist/themes/legacy.css CHANGED
@@ -38,10 +38,10 @@
38
38
  --color-surface-inverse: var(--config--main-color-night, #2B3346);
39
39
  --color-content-default: var(--config--main-color-night, #2B3346);
40
40
  --color-content-subtle: var(--config-meta-text-color, #4F5663);
41
- --color-content-subtlest: var(--config-main-navigation-search-placeholder-color, #696E7C);
41
+ --color-content-subtlest: var(--config--main-color-dusk, #696E7C);
42
42
  --color-content-heading-default: var(--config-header-color, #2B3346);
43
43
  --color-content-heading-hero: var(--config-hero-color, #FFFFFF);
44
- --color-line-default: var(--config--main-color-disabled, #DEDFE2);
44
+ --color-line-default: var(--config--main-border-base-color, #DEDFE2);
45
45
  --color-status-success-bold: var(--config--main-color-success, #1f8444);
46
46
  --color-status-information-bold: var(--config--main-color-info, #0c66e4);
47
47
  --color-status-danger-bold: var(--config--main-color-alert, #c92c2f);
@@ -49,7 +49,7 @@
49
49
  --color-community-unanswered: var(--config-topic-question-color, #696E7C);
50
50
  --color-community-highlighted: var(--config--main-color-brand, #0C66E4);
51
51
  --color-community-pinned: var(--config--main-color-brand, #0C66E4);
52
- --color-link-default: var(--config--main-color-brand, #0C66E4);
52
+ --color-link-default: var(--config-link-base-color, #0C66E4);
53
53
  --color-link-hover: var(--config-link-base-hover-color, #0055CC);
54
54
  --color-skeleton-subtle: var(--color-skeleton-default, #2b33460a);
55
55
  --space-layout-gutter: var(--gutter, 12px);
@@ -136,6 +136,14 @@
136
136
  --card-shadow-default: var(--config-card-shadow, none);
137
137
  --card-shadow-hover: var(--config-card-hover-shadow, 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1));
138
138
  --card-shadow-pressed: var(--config-card-active-shadow, 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1));
139
+ --sidebar-background: var(--config-sidebar-background-color, #FFFFFF);
140
+ --sidebar-border-radius: var(--config-sidebar-border-radius, 8px);
141
+ --sidebar-border-color: var(--config-sidebar-border-color, #DEDFE2);
142
+ --sidebar-border-width: var(--config-sidebar-border-width, 1px);
143
+ --sidebar-shadow: var(--config-sidebar-shadow, none);
144
+ --sidebar-title-color: var(--config-header-color, #2B3346);
145
+ --sidebar-title-font-family: var(--config-sidebar-widget-font-family, Roboto, sans-serif);
146
+ --sidebar-title-font-weight: var(--config-sidebar-widget-font-weight, 500);
139
147
  --feed-item-radius: var(--config-list-views-card-border-radius, 8px);
140
148
  --feed-item-border-width: var(--config-list-views-card-border-width, 1px);
141
149
  --feed-item-border-default: var(--config-list-views-card-default-border-color, #DEDFE2);