@ibis-design/css 0.8.2 → 0.9.0

package/dist/tailwind.theme.js

@@ -178,7 +178,11 @@ module.exports = {
         },
         color: {
           default: "var(--border-color-default)",
+          subtle: "var(--border-color-subtle)",
+          strong: "var(--border-color-strong)",
           focus: "var(--border-color-focus)",
+          disabled: "var(--border-color-disabled)",
+          emphasis: "var(--border-color-emphasis)",
           button: "var(--border-color-button)"
         }
       },
@@ -248,9 +252,44 @@ module.exports = {
         green: "var(--color-green)",
         red: "var(--color-red)",
         orange: "var(--color-orange)",
+        surface: {
+          default: "var(--color-surface-default)",
+          muted: "var(--color-surface-muted)",
+          subtle: "var(--color-surface-subtle)",
+          elevated: "var(--color-surface-elevated)",
+          inverse: "var(--color-surface-inverse)",
+          disabled: "var(--color-surface-disabled)",
+          page: "var(--color-surface-page)"
+        },
         text: {
           primary: "var(--color-text-primary)",
-          inverse: "var(--color-text-inverse)"
+          secondary: "var(--color-text-secondary)",
+          muted: "var(--color-text-muted)",
+          disabled: "var(--color-text-disabled)",
+          inverse: "var(--color-text-inverse)",
+          onPrimary: "var(--color-text-on-primary)",
+          onMuted: "var(--color-text-on-muted)"
+        },
+        interactive: {
+          primary: {
+            bgSelected: "var(--color-interactive-primary-bg-selected)",
+            bgHover: "var(--color-interactive-primary-bg-hover)",
+            fg: "var(--color-interactive-primary-fg)",
+            fgDisabled: "var(--color-interactive-primary-fg-disabled)",
+            bgEmphasized: "var(--color-interactive-primary-bg-emphasized)",
+            borderSelected: "var(--color-interactive-primary-border-selected)",
+            indicator: "var(--color-interactive-primary-indicator)",
+            bgDisabled: "var(--color-interactive-primary-bg-disabled)",
+            fgOnDisabled: "var(--color-interactive-primary-fg-on-disabled)",
+            bgMenuHover: "var(--color-interactive-primary-bg-menu-hover)",
+            bgMenuSelected: "var(--color-interactive-primary-bg-menu-selected)",
+            bgMenuSelectedHover: "var(--color-interactive-primary-bg-menu-selected-hover)",
+            trackOn: "var(--color-interactive-primary-track-on)",
+            trackOff: "var(--color-interactive-primary-track-off)"
+          },
+          neutral: {
+            bgHover: "var(--color-interactive-neutral-bg-hover)"
+          }
         },
         toaster: {
           default: "var(--color-toaster-default)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibis-design/css",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "description": "Design tokens, CSS variables, and Tailwind preset for the IBIS design system.",
   "type": "module",
   "exports": {
@@ -13,14 +13,16 @@
     "./ibis/tailwind.preset": "./dist/tailwind.preset.js",
     "./alchemy/tailwind.preset": "./dist/tailwind.preset.js",
     "./components/*": "./dist/components/*",
-    "./tailwind.theme": "./dist/tailwind.theme.js"
+    "./tailwind.theme": "./dist/tailwind.theme.js",
+    "./theme": "./src/lib/set-theme.ts"
   },
   "files": [
-    "dist"
+    "dist",
+    "src/lib"
   ],
   "scripts": {
-    "build": "tsx src/scripts/build.ts && tsx src/scripts/validate-themes.ts",
-    "validate": "tsx src/scripts/validate-themes.ts",
+    "build": "tsx src/scripts/build.ts && tsx src/scripts/validate-themes.ts && tsx src/scripts/validate-component-tokens.ts",
+    "validate": "tsx src/scripts/validate-themes.ts && tsx src/scripts/validate-component-tokens.ts",
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {

package/src/lib/assemble-design-tokens.ts

@@ -0,0 +1,20 @@
+/**
+ * @param blocks - Formatted CSS blocks from Style Dictionary (one per global/theme layer).
+ * @returns Full design-tokens stylesheet with header comment.
+ */
+export const assembleDesignTokensStylesheet = (blocks: string[]): string => {
+  const body = blocks
+    .map((block) => block.trim())
+    .filter(Boolean)
+    .join("\n\n");
+
+  return `/**
+ * Do not edit directly. Generated by @ibis-design/css build.
+ * Set data-brand (ib | alc) and data-color-mode (light | dark) on <html>,
+ * or use setTheme() from @ibis-design/css/theme.
+ * :root holds global tokens; :root + [data-brand="ib"][data-color-mode="light"] is the default theme overlay.
+ */
+
+${body}
+`;
+};

package/src/lib/set-theme.ts

@@ -0,0 +1,73 @@
+import {
+  DEFAULT_BRAND,
+  DEFAULT_COLOR_MODE,
+  type BrandId,
+  type ColorModeId,
+  toThemeId,
+  type ThemeId,
+} from "./themes.ts";
+
+export {
+  DEFAULT_BRAND,
+  DEFAULT_COLOR_MODE,
+  DEFAULT_THEME_ID,
+  parseThemeId,
+  toThemeId,
+  type BrandId,
+  type ColorModeId,
+  type ThemeId,
+} from "./themes.ts";
+
+export type ThemeOptions = {
+  brand?: BrandId;
+  colorMode?: ColorModeId;
+};
+
+const isBrandId = (value: string): value is BrandId => value === "ib" || value === "alc";
+
+const isColorModeId = (value: string): value is ColorModeId =>
+  value === "light" || value === "dark";
+
+/**
+ * Applies brand and color mode to `document.documentElement` for CSS token switching.
+ *
+ * @param options - Brand and color mode; defaults to Ibis light
+ * @example
+ * setTheme({ brand: 'alc', colorMode: 'dark' });
+ */
+export const setTheme = (options: ThemeOptions = {}): ThemeId => {
+  const brand = options.brand ?? DEFAULT_BRAND;
+  const colorMode = options.colorMode ?? DEFAULT_COLOR_MODE;
+
+  if (typeof document !== "undefined") {
+    const root = document.documentElement;
+    root.dataset.brand = brand;
+    root.dataset.colorMode = colorMode;
+    delete root.dataset.theme;
+  }
+
+  return toThemeId(brand, colorMode);
+};
+
+/**
+ * Reads the active brand and color mode from the document root.
+ *
+ * @returns Current brand and color mode, or defaults when not in a browser
+ */
+export const getTheme = (): { brand: BrandId; colorMode: ColorModeId; themeId: ThemeId } => {
+  if (typeof document === "undefined") {
+    return {
+      brand: DEFAULT_BRAND,
+      colorMode: DEFAULT_COLOR_MODE,
+      themeId: toThemeId(DEFAULT_BRAND, DEFAULT_COLOR_MODE),
+    };
+  }
+
+  const brandRaw = document.documentElement.dataset.brand;
+  const modeRaw = document.documentElement.dataset.colorMode;
+
+  const brand = brandRaw && isBrandId(brandRaw) ? brandRaw : DEFAULT_BRAND;
+  const colorMode = modeRaw && isColorModeId(modeRaw) ? modeRaw : DEFAULT_COLOR_MODE;
+
+  return { brand, colorMode, themeId: toThemeId(brand, colorMode) };
+};

package/src/lib/themes.ts

@@ -0,0 +1,74 @@
+export type BrandId = "ib" | "alc";
+
+export type ColorModeId = "light" | "dark";
+
+/** Composite theme id used for Style Dictionary source files and RN JSON exports. */
+export type ThemeId = `${BrandId}-${ColorModeId}`;
+
+export type ThemeDefinition = {
+  id: ThemeId;
+  brand: BrandId;
+  colorMode: ColorModeId;
+  /** Selector passed to Style Dictionary css/variables `options.selector`. */
+  cssSelector: string;
+};
+
+const themeSelector = (brand: BrandId, colorMode: ColorModeId): string =>
+  `[data-brand="${brand}"][data-color-mode="${colorMode}"]`;
+
+export const THEMES: ThemeDefinition[] = [
+  {
+    id: "ib-light",
+    brand: "ib",
+    colorMode: "light",
+    cssSelector: ':root, [data-brand="ib"][data-color-mode="light"]',
+  },
+  {
+    id: "ib-dark",
+    brand: "ib",
+    colorMode: "dark",
+    cssSelector: themeSelector("ib", "dark"),
+  },
+  {
+    id: "alc-light",
+    brand: "alc",
+    colorMode: "light",
+    cssSelector: themeSelector("alc", "light"),
+  },
+  {
+    id: "alc-dark",
+    brand: "alc",
+    colorMode: "dark",
+    cssSelector: themeSelector("alc", "dark"),
+  },
+];
+
+export const DEFAULT_BRAND: BrandId = "ib";
+
+export const DEFAULT_COLOR_MODE: ColorModeId = "light";
+
+export const DEFAULT_THEME_ID: ThemeId = `${DEFAULT_BRAND}-${DEFAULT_COLOR_MODE}`;
+
+/**
+ * @param brand - Ibis or Alchemy
+ * @param colorMode - Light or dark
+ * @returns Composite theme id for token JSON / RN export filenames
+ */
+export const toThemeId = (brand: BrandId, colorMode: ColorModeId): ThemeId =>
+  `${brand}-${colorMode}`;
+
+/**
+ * @param themeId - Composite id such as `ib-dark`
+ * @returns Brand and color mode parsed from the id
+ * @throws When the id is not a valid theme id
+ */
+export const parseThemeId = (themeId: string): { brand: BrandId; colorMode: ColorModeId } => {
+  const match = /^(ib|alc)-(light|dark)$/.exec(themeId);
+  if (!match?.[1] || !match[2]) {
+    throw new Error(`Invalid theme id: ${themeId}`);
+  }
+  return {
+    brand: match[1] as BrandId,
+    colorMode: match[2] as ColorModeId,
+  };
+};