@gainsight-hub/design-tokens 0.1.0 → 0.1.2

package/dist/applyThemeConfig.d.ts

@@ -0,0 +1,6 @@
+// Auto-generated — do not edit manually.
+export interface ThemeConfig {
+  themeId: string;
+  overrides: { light: Record<string, string>; dark: Record<string, string> };
+}
+export declare function applyThemeConfig(config: ThemeConfig, mode?: "light" | "dark"): void;

package/dist/applyThemeConfig.js

@@ -0,0 +1,37 @@
+// Auto-generated — do not edit manually.
+import manifest from "./theme-manifest.json";
+
+const THEME_STYLE_ID = "__gs-theme-base";
+const MODE_OVERRIDES_STYLE_ID = "__gs-mode-overrides";
+
+function injectRootVars(styleId, vars) {
+  const entries = Object.entries(vars);
+  if (entries.length === 0) return;
+  const css = entries.map(([k, v]) => "  " + k + ": " + v + ";").join("\n");
+  let el = document.getElementById(styleId);
+  if (!el) { el = document.createElement("style"); el.id = styleId; (document.head ?? document.documentElement).appendChild(el); }
+  el.textContent = ":root {\n" + css + "\n}";
+}
+
+function removeRootVars(styleId) {
+  document.getElementById(styleId)?.remove();
+}
+
+export function applyThemeConfig(config, mode = "light") {
+  if (mode === "dark") {
+    document.documentElement.setAttribute("data-theme", "dark");
+    document.documentElement.classList.add("dark");
+  } else {
+    document.documentElement.removeAttribute("data-theme");
+    document.documentElement.classList.remove("dark");
+  }
+  const themeId = config.themeId;
+  const theme = manifest.themes.find(t => t.id === themeId);
+  if (!theme) { console.warn("[design-tokens] theme \"" + themeId + "\" not found"); return; }
+  const themeVars = theme[mode] ?? {};
+  if (Object.keys(themeVars).length === 0) { removeRootVars(THEME_STYLE_ID); }
+  else { injectRootVars(THEME_STYLE_ID, themeVars); }
+  const overrideVars = config.overrides?.[mode] ?? {};
+  if (Object.keys(overrideVars).length === 0) { removeRootVars(MODE_OVERRIDES_STYLE_ID); }
+  else { injectRootVars(MODE_OVERRIDES_STYLE_ID, overrideVars); }
+}

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 // Auto-generated — do not edit manually.
 export * from "./tokens.js";
-export { applyThemeConfig } from "./applyTheme.js";
+export { applyThemeConfig, type ThemeConfig, type ThemeMode, type ThemeEntry } from "./applyThemeConfig.js";

package/dist/index.js

@@ -1,3 +1,3 @@
 // Auto-generated — do not edit manually.
 export * from "./tokens.js";
-export { applyThemeConfig } from "./applyTheme.js";
+export { applyThemeConfig } from "./applyThemeConfig.js";

package/dist/theme-manifest.json

@@ -2,19 +2,10 @@
   "themes": [
     {
       "id": "gainsight-light",
-      "label": "Light",
-      "description": "Gainsight design system — default light theme",
-      "selector": null,
-      "cssFile": null,
-      "variables": {}
-    },
-    {
-      "id": "dark",
-      "label": "Dark",
-      "description": "Gainsight design system — dark mode",
-      "selector": "[data-theme=\"dark\"]",
-      "cssFile": "@gainsight-hub/design-tokens/themes/dark.css",
-      "variables": {
+      "label": "Gainsight Default",
+      "description": "Gainsight design system — default theme",
+      "light": {},
+      "dark": {
         "--theme-neutral-0": "#2B3346",
         "--theme-neutral-100": "#3B4254",
         "--theme-neutral-200": "#4F5663",
@@ -50,41 +41,11 @@
         "--color-skeleton-subtle": "#3B4254"
       }
     },
-    {
-      "id": "legacy",
-      "label": "Legacy",
-      "description": "Gainsight legacy defaults (pre design-system migration)",
-      "selector": "[data-theme=\"legacy\"]",
-      "cssFile": "@gainsight-hub/design-tokens/themes/legacy.css",
-      "variables": {
-        "--theme-brand-600": "oklch(from var(--theme-brand-700) calc(l + 0.037) c h)",
-        "--theme-brand-500": "oklch(from var(--theme-brand-700) calc(l + 0.100) c h)",
-        "--theme-brand-400": "oklch(from var(--theme-brand-700) calc(l + 0.185) c h)",
-        "--theme-brand-300": "oklch(from var(--theme-brand-700) calc(l + 0.270) c h)",
-        "--theme-brand-200": "oklch(from var(--theme-brand-700) calc(l + 0.353) c h)",
-        "--theme-brand-100": "oklch(from var(--theme-brand-700) calc(l + 0.415) c h)",
-        "--theme-brand-800": "oklch(from var(--theme-brand-700) calc(l - 0.087) c h)",
-        "--theme-brand-900": "oklch(from var(--theme-brand-700) calc(l - 0.184) c h)",
-        "--theme-brand-1000": "oklch(from var(--theme-brand-700) calc(l - 0.279) c h)",
-        "--theme-neutral-0": "#FFFFFF",
-        "--theme-neutral-100": "oklch(from var(--theme-neutral-1000) calc(l + 0.654) calc(c * 0.003) h)",
-        "--theme-neutral-200": "oklch(from var(--theme-neutral-1000) calc(l + 0.624) calc(c * 0.003) h)",
-        "--theme-neutral-300": "oklch(from var(--theme-neutral-1000) calc(l + 0.567) calc(c * 0.042) h)",
-        "--theme-neutral-400": "oklch(from var(--theme-neutral-1000) calc(l + 0.482) calc(c * 0.087) h)",
-        "--theme-neutral-500": "oklch(from var(--theme-neutral-1000) calc(l + 0.361) calc(c * 0.383) h)",
-        "--theme-neutral-600": "oklch(from var(--theme-neutral-1000) calc(l + 0.291) calc(c * 0.626) h)",
-        "--theme-neutral-700": "oklch(from var(--theme-neutral-1000) calc(l + 0.219) calc(c * 0.888) h)",
-        "--theme-neutral-800": "oklch(from var(--theme-neutral-1000) calc(l + 0.139) calc(c * 1.011) h)",
-        "--theme-neutral-900": "oklch(from var(--theme-neutral-1000) calc(l + 0.066) calc(c * 1.045) h)"
-      }
-    },
     {
       "id": "mui",
       "label": "Material UI",
       "description": "Material Design 3–inspired theme",
-      "selector": "[data-theme=\"mui\"]",
-      "cssFile": "@gainsight-hub/design-tokens/themes/mui.css",
-      "variables": {
+      "light": {
         "--theme-brand-100": "#E3F2FD",
         "--theme-brand-200": "#BBDEFB",
         "--theme-brand-300": "#90CAF9",
@@ -119,15 +80,14 @@
         "--color-status-success-bold": "#2E7D32",
         "--color-status-danger-bold": "#D32F2F",
         "--color-status-information-bold": "#0288D1"
-      }
+      },
+      "dark": {}
     },
     {
       "id": "antd",
       "label": "Ant Design",
       "description": "Ant Design 5.x–inspired theme",
-      "selector": "[data-theme=\"antd\"]",
-      "cssFile": "@gainsight-hub/design-tokens/themes/antd.css",
-      "variables": {
+      "light": {
         "--theme-brand-100": "#E6F4FF",
         "--theme-brand-200": "#BAE0FF",
         "--theme-brand-300": "#91CAFF",
@@ -162,15 +122,14 @@
         "--color-status-success-bold": "#52C41A",
         "--color-status-danger-bold": "#FF4D4F",
         "--color-status-information-bold": "#1677FF"
-      }
+      },
+      "dark": {}
     },
     {
       "id": "spectrum",
       "label": "Adobe Spectrum",
       "description": "Adobe Spectrum–inspired theme",
-      "selector": "[data-theme=\"spectrum\"]",
-      "cssFile": "@gainsight-hub/design-tokens/themes/spectrum.css",
-      "variables": {
+      "light": {
         "--theme-brand-100": "#EAF1FB",
         "--theme-brand-200": "#CBE0F8",
         "--theme-brand-300": "#A8CCF2",
@@ -205,7 +164,8 @@
         "--color-status-success-bold": "#008854",
         "--color-status-danger-bold": "#D7373F",
         "--color-status-information-bold": "#0265DC"
-      }
+      },
+      "dark": {}
     }
   ],
   "defaultTheme": "gainsight-light"

package/dist/themes/legacy.css

@@ -12,26 +12,26 @@
  */
 [data-theme="legacy"] {
   --theme-brand-700: var(--config--main-color-brand, #0C66E4);
-  --theme-brand-600: oklch(from var(--theme-brand-700) calc(l + 0.037) c h);
-  --theme-brand-500: oklch(from var(--theme-brand-700) calc(l + 0.100) c h);
-  --theme-brand-400: oklch(from var(--theme-brand-700) calc(l + 0.185) c h);
-  --theme-brand-300: oklch(from var(--theme-brand-700) calc(l + 0.270) c h);
-  --theme-brand-200: oklch(from var(--theme-brand-700) calc(l + 0.353) c h);
-  --theme-brand-100: oklch(from var(--theme-brand-700) calc(l + 0.415) c h);
-  --theme-brand-800: oklch(from var(--theme-brand-700) calc(l - 0.087) c h);
-  --theme-brand-900: oklch(from var(--theme-brand-700) calc(l - 0.184) c h);
-  --theme-brand-1000: oklch(from var(--theme-brand-700) calc(l - 0.279) c h);
+  --theme-brand-600: oklch(from var(--theme-brand-700) calc(l + 0.0712) c h);
+  --theme-brand-500: oklch(from var(--theme-brand-700) calc(l + 0.1443) c h);
+  --theme-brand-400: oklch(from var(--theme-brand-700) calc(l + 0.2163) c h);
+  --theme-brand-300: oklch(from var(--theme-brand-700) calc(l + 0.2875) c h);
+  --theme-brand-200: oklch(from var(--theme-brand-700) calc(l + 0.3584) c h);
+  --theme-brand-100: oklch(from var(--theme-brand-700) calc(l + 0.4309) c h);
+  --theme-brand-800: oklch(from var(--theme-brand-700) calc(l - 0.0842) c h);
+  --theme-brand-900: oklch(from var(--theme-brand-700) calc(l - 0.1674) c h);
+  --theme-brand-1000: oklch(from var(--theme-brand-700) calc(l - 0.2511) c h);
   --theme-neutral-1000: var(--config--main-color-night, #2B3346);
   --theme-neutral-0: #FFFFFF;
-  --theme-neutral-100: oklch(from var(--theme-neutral-1000) calc(l + 0.654) calc(c * 0.003) h);
-  --theme-neutral-200: oklch(from var(--theme-neutral-1000) calc(l + 0.624) calc(c * 0.003) h);
-  --theme-neutral-300: oklch(from var(--theme-neutral-1000) calc(l + 0.567) calc(c * 0.042) h);
-  --theme-neutral-400: oklch(from var(--theme-neutral-1000) calc(l + 0.482) calc(c * 0.087) h);
-  --theme-neutral-500: oklch(from var(--theme-neutral-1000) calc(l + 0.361) calc(c * 0.383) h);
-  --theme-neutral-600: oklch(from var(--theme-neutral-1000) calc(l + 0.291) calc(c * 0.626) h);
-  --theme-neutral-700: oklch(from var(--theme-neutral-1000) calc(l + 0.219) calc(c * 0.888) h);
-  --theme-neutral-800: oklch(from var(--theme-neutral-1000) calc(l + 0.139) calc(c * 1.011) h);
-  --theme-neutral-900: oklch(from var(--theme-neutral-1000) calc(l + 0.066) calc(c * 1.045) h);
+  --theme-neutral-100: oklch(from var(--theme-neutral-1000) calc(l + 0.6097) calc(c * 0.1115) h);
+  --theme-neutral-200: oklch(from var(--theme-neutral-1000) calc(l + 0.5423) calc(c * 0.1931) h);
+  --theme-neutral-300: oklch(from var(--theme-neutral-1000) calc(l + 0.4735) calc(c * 0.2806) h);
+  --theme-neutral-400: oklch(from var(--theme-neutral-1000) calc(l + 0.4066) calc(c * 0.3733) h);
+  --theme-neutral-500: oklch(from var(--theme-neutral-1000) calc(l + 0.3392) calc(c * 0.5034) h);
+  --theme-neutral-600: oklch(from var(--theme-neutral-1000) calc(l + 0.2719) calc(c * 0.5672) h);
+  --theme-neutral-700: oklch(from var(--theme-neutral-1000) calc(l + 0.2031) calc(c * 0.6802) h);
+  --theme-neutral-800: oklch(from var(--theme-neutral-1000) calc(l + 0.1357) calc(c * 0.8035) h);
+  --theme-neutral-900: oklch(from var(--theme-neutral-1000) calc(l + 0.0692) calc(c * 0.8940) h);
   --color-action-primary-default: var(--config--main-color-brand, #0C66E4);
   --color-action-destructive-default: var(--config--main-color-alert, #c92c2f);
   --color-surface-page: var(--config-body-background-color, #FAFAFA);

package/dist/themes.css

@@ -1,7 +1,6 @@
 /* All design tokens + every theme override in one import.
    Use this unless you need to control which themes are loaded separately. */
 @import "./styles.css";
-@import "./themes/dark.css";
 @import "./themes/legacy.css";
 @import "./themes/mui.css";
 @import "./themes/antd.css";

package/dist/token-catalog.json

@@ -1,6 +1,6 @@
 {
   "version": "0.1.0",
-  "generatedAt": "2026-05-05T08:27:58.298Z",
+  "generatedAt": "2026-05-18T10:51:54.522Z",
   "scales": {
     "brand": {
       "seedVar": "--theme-brand-700",

package/package.json

@@ -1,26 +1,31 @@
 {
   "name": "@gainsight-hub/design-tokens",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Design tokens: CSS variables, JSON, TypeScript constants, and Tailwind preset.",
   "license": "UNLICENSED",
   "author": "Gainsight Design Systems",
   "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": ["dist"],
   "sideEffects": ["**/*.css"],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./styles.css": "./dist/styles.css",
     "./themes.css": "./dist/themes.css",
-    "./themes/*": "./dist/themes/*.css",
+    "./themes/*": "./dist/themes/*",
     "./tailwind": {
       "import": "./dist/tailwind.preset.mjs",
       "require": "./dist/tailwind.preset.cjs"
     },
     "./tokens.json": "./dist/tokens.json",
-    "./token-catalog.json": "./dist/token-catalog.json"
+    "./token-catalog.json": "./dist/token-catalog.json",
+    "./theme-manifest.json": "./dist/theme-manifest.json"
   },
   "scripts": {
     "build": "node ./build.js",

package/dist/applyTheme.d.ts

@@ -1,14 +0,0 @@
-// Auto-generated — do not edit manually.
-
-/**
- * Switches the active theme at runtime. Lazy-loads the theme CSS on first use.
- * Import styles.css first to establish the default light theme.
- *
- * @param themeId   Theme to activate ("gainsight-dark", "legacy", "theme-mui", …).
- *                  Pass "gainsight-light" to restore the default.
- * @param overrides Optional CSS variable overrides applied on top of the base theme.
- */
-export declare function applyThemeConfig(
-  themeId: string,
-  overrides?: Record<string, string>,
-): Promise<void>;

package/dist/applyTheme.js

@@ -1,66 +0,0 @@
-// Auto-generated — do not edit manually.
-const THEME_CSS_URLS = {
-  "dark": new URL("./themes/dark.css", import.meta.url).href,
-  "legacy": new URL("./themes/legacy.css", import.meta.url).href,
-  "mui": new URL("./themes/mui.css", import.meta.url).href,
-  "antd": new URL("./themes/antd.css", import.meta.url).href,
-  "spectrum": new URL("./themes/spectrum.css", import.meta.url).href,
-};
-
-const STYLE_ID = "__gs-theme-overrides";
-const _loaded = new Set();
-
-function loadCss(url) {
-  if (_loaded.has(url)) return Promise.resolve();
-  return new Promise((resolve, reject) => {
-    const link = document.createElement("link");
-    link.rel = "stylesheet";
-    link.href = url;
-    link.onload = () => { _loaded.add(url); resolve(); };
-    link.onerror = () => reject(new Error("Failed to load theme CSS: " + url));
-    document.head.appendChild(link);
-  });
-}
-
-function injectOverrides(overrides) {
-  const css = Object.entries(overrides).map(([k, v]) => "  " + k + ": " + v + ";").join("\n");
-  let el = document.getElementById(STYLE_ID);
-  if (!el) { el = document.createElement("style"); el.id = STYLE_ID; document.head.appendChild(el); }
-  el.textContent = ":root {\n" + css + "\n}";
-}
-
-function removeOverrides() {
-  document.getElementById(STYLE_ID)?.remove();
-}
-
-/**
- * Switches the active theme at runtime.
- *
- * @param {string} themeId   - Theme to activate. Use "gainsight-light" to restore the default.
- * @param {Record<string,string>} [overrides] - Optional CSS variable overrides applied on top.
- * @returns {Promise<void>}
- *
- * @example
- * import { applyThemeConfig } from "@gainsight-hub/design-tokens";
- *
- * await applyThemeConfig("gainsight-dark");
- * await applyThemeConfig("gainsight-dark", { "--theme-brand-700": "#FF6600" });
- * await applyThemeConfig("gainsight-light"); // restore default
- */
-export async function applyThemeConfig(themeId, overrides = {}) {
-  const cssUrl = THEME_CSS_URLS[themeId];
-
-  if (!cssUrl) {
-    // Default / light theme — remove any active theme attribute
-    document.documentElement.removeAttribute("data-theme");
-  } else {
-    await loadCss(cssUrl);
-    document.documentElement.setAttribute("data-theme", themeId);
-  }
-
-  if (Object.keys(overrides).length === 0) {
-    removeOverrides();
-  } else {
-    injectOverrides(overrides);
-  }
-}

package/dist/themes/dark.css

@@ -1,47 +0,0 @@
-/* Auto-generated — do not edit manually. Source: themes/dark/index.js */
-/**
- * Gainsight design system — dark mode
- *
- * Usage:
- *   import "@gainsight-hub/design-tokens/styles.css";        // must load first
- *   import "@gainsight-hub/design-tokens/themes/dark.css";
- *   document.documentElement.setAttribute("data-theme", "dark");
- *
- * Restore default theme:
- *   document.documentElement.removeAttribute("data-theme");
- */
-[data-theme="dark"] {
-  --theme-neutral-0: #2B3346;
-  --theme-neutral-100: #3B4254;
-  --theme-neutral-200: #4F5663;
-  --theme-neutral-300: #696E7C;
-  --theme-neutral-400: #7B808E;
-  --theme-neutral-500: #8D919B;
-  --theme-neutral-600: #B8BBC2;
-  --theme-neutral-700: #DEDFE2;
-  --theme-neutral-800: #F4F5F6;
-  --theme-neutral-900: #FAFAFA;
-  --theme-neutral-1000: #FFFFFF;
-  --config-hero-color: #FFFFFF;
-  --theme-brand-100: #1C2B41;
-  --theme-brand-200: #09326C;
-  --theme-brand-300: #0055CC;
-  --theme-brand-400: #0C66E4;
-  --theme-brand-500: #1D7AFC;
-  --theme-brand-600: #388BFF;
-  --theme-brand-700: #579DFF;
-  --theme-brand-800: #85B8FF;
-  --theme-brand-900: #CCE0FF;
-  --theme-brand-1000: #E9F2FF;
-  --color-status-success-bold: #4BCE7F;
-  --color-status-information-bold: #579DFF;
-  --color-status-danger-bold: #F86A68;
-  --color-community-answered: #4BCE7F;
-  --color-community-highlighted: #F5CD47;
-  --color-community-pinned: #579DFF;
-  --color-overlay-interactive-hover: rgba(255, 255, 255, 0.08);
-  --color-overlay-interactive-pressed: rgba(255, 255, 255, 0.14);
-  --color-overlay-backdrop: rgba(9, 30, 66, 0.72);
-  --color-skeleton-default: #4F5663;
-  --color-skeleton-subtle: #3B4254;
-}

package/dist/themes/dark.css.d.ts

@@ -1,2 +0,0 @@
-// CSS side-effect only — activates [data-theme="dark"] overrides, no exports.
-export {};