@gainsight-hub/design-tokens 0.2.1 → 0.2.3

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 +12 -15
  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 +14 -3
  7. package/dist/token-catalog.json +208 -326
  8. package/dist/tokens.d.ts +18 -15
  9. package/dist/tokens.js +10 -15
  10. package/dist/tokens.json +18 -15
  11. package/dist/tokens.scss +10 -15
  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
@@ -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;
@@ -245,63 +247,48 @@
245
247
  --color-community-pinned: var(--color-brand-700, #0C66E4); /** 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);
@@ -401,6 +388,16 @@
401
388
  --card-content-hover: var(--color-content-default, #2B3346); /** Card body/content color on hover. */
402
389
  --card-content-pressed: var(--color-link-hover, #0055CC); /** Card body/content color on press (link hovered styling). */
403
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. */
400
+
404
401
  /* Feed */
405
402
  --feed-container-shadow: none; /** Feed container shadow (none). */
406
403
  --feed-item-shadow-default: none; /** Feed item shadow in default state (none). */
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);
@@ -168,4 +176,7 @@
168
176
  --widget-introduction-icon-background: var(--config-cta-icon-background-color, #1f8444);
169
177
  --widget-introduction-icon-content: var(--config-cta-icon-check, #FFFFFF);
170
178
  --widget-introduction-close-content: var(--config-cta-close-button-color, #696E7C);
179
+ --widget-shadow: var(--config-widget-box-shadow, 0 2px 4px 0 rgba(0,0,0,0.08));
180
+ --color-overlay-backdrop: var(--config-cookie-modal-background-color, rgba(60,60,60,.9));
181
+ --color-tag-pill-background: var(--config-tag-pill-background-color, #FAFAFA);
171
182
  }