@echothink-ui/style 0.2.0

package/src/carbon-bridge.css

@@ -0,0 +1,109 @@
+/* ========================================================================= *
+ * Carbon Bridge.
+ *
+ * Core controls wrap Carbon React, which reads --cds-* tokens. Presets only
+ * overrode --eth-* tokens, so Carbon controls ignored the preset (square,
+ * Carbon-blue, and — in studio-dark — white inputs on a dark page). This block
+ * maps the active preset's role tokens onto every --cds-* family Carbon
+ * consumes. Because the --eth-* values differ per preset, one shared bridge
+ * block themes all five presets.
+ *
+ * Dark mode: StyleScope additionally sets [data-carbon-theme="g100"] on the
+ * studio-dark scope, so the ~100 Carbon tokens NOT re-pointed here still get a
+ * correct dark base (Part A "theme-bundle base" of the architecture doc). This
+ * bridge then tints the subset that should follow the EchoThink palette.
+ *
+ * Applied to :root by StyleScope (global mode) so PORTALED Carbon content
+ * (modals, menus, tooltips, toasts mounted at document.body) inherits the
+ * theme instead of falling back to default Carbon.
+ * ========================================================================= */
+
+.eth-style-carbon-like,
+.eth-style-soft-card,
+.eth-style-glass,
+.eth-style-bright,
+.eth-style-studio-dark {
+  /* backgrounds + layers — drive every nested surface, not just the page */
+  --cds-background: var(--eth-bridge-bg);
+  --cds-background-hover: var(--eth-color-layer-hover);
+  --cds-background-active: var(--eth-color-layer-selected);
+  --cds-background-selected: var(--eth-color-layer-selected);
+  --cds-layer-01: var(--eth-color-card);
+  --cds-layer-02: var(--eth-color-layer-02);
+  --cds-layer-03: var(--eth-color-layer-03, var(--eth-color-layer-02));
+  --cds-layer: var(--cds-layer-01);
+  --cds-layer-hover-01: var(--eth-color-layer-hover);
+  --cds-layer-hover-02: var(--eth-color-layer-hover);
+  --cds-layer-active-01: var(--eth-color-layer-selected);
+  --cds-layer-selected-01: var(--eth-table-row-selected-bg);
+  --cds-layer-selected-02: var(--eth-table-row-selected-bg);
+  --cds-layer-selected-hover-01: var(--eth-table-row-selected-hover-bg);
+  --cds-layer-accent-01: var(--eth-table-header-bg);
+  --cds-layer-accent-02: var(--eth-table-header-bg);
+
+  /* fields — the source of the studio-dark white-box bug */
+  --cds-field-01: var(--eth-field-bg);
+  --cds-field-02: var(--eth-field-bg);
+  --cds-field-03: var(--eth-field-bg);
+  --cds-field-hover-01: var(--eth-field-bg-hover);
+  --cds-field-hover-02: var(--eth-field-bg-hover);
+  --cds-field-hover-03: var(--eth-field-bg-hover);
+
+  /* text + icons (every text role, including on-color and placeholder) */
+  --cds-text-primary: var(--eth-color-text-primary);
+  --cds-text-secondary: var(--eth-color-text-secondary);
+  --cds-text-helper: var(--eth-color-text-helper);
+  --cds-text-placeholder: var(--eth-field-placeholder);
+  --cds-text-error: var(--eth-status-danger-text);
+  --cds-text-on-color: var(--eth-btn-primary-text);
+  --cds-text-inverse: var(--eth-bridge-bg);
+  --cds-icon-primary: var(--eth-color-text-primary);
+  --cds-icon-secondary: var(--eth-color-text-secondary);
+  --cds-icon-on-color: var(--eth-btn-primary-text);
+
+  /* borders */
+  --cds-border-subtle: var(--eth-color-border-subtle);
+  --cds-border-subtle-00: var(--eth-color-border-subtle);
+  --cds-border-subtle-01: var(--eth-color-border-subtle);
+  --cds-border-subtle-02: var(--eth-color-border-subtle);
+  --cds-border-subtle-03: var(--eth-color-border-subtle);
+  --cds-border-strong: var(--eth-color-border-strong);
+  --cds-border-strong-01: var(--eth-color-border-strong);
+  --cds-border-strong-02: var(--eth-color-border-strong);
+  --cds-border-interactive: var(--eth-color-interactive-primary);
+
+  /* buttons (per variant + state) */
+  --cds-button-primary: var(--eth-btn-primary-bg);
+  --cds-button-primary-hover: var(--eth-btn-primary-bg-hover);
+  --cds-button-primary-active: var(--eth-btn-primary-bg-active);
+  --cds-button-secondary: var(--eth-btn-secondary-bg);
+  --cds-button-secondary-hover: var(--eth-btn-secondary-bg-hover);
+  --cds-button-secondary-active: var(--eth-btn-secondary-bg-active);
+  --cds-button-tertiary: var(--eth-btn-tertiary-text);
+  --cds-button-tertiary-hover: var(--eth-btn-tertiary-bg-hover);
+  --cds-button-danger-primary: var(--eth-btn-danger-bg);
+  --cds-button-danger-hover: var(--eth-btn-danger-bg-hover);
+  --cds-button-danger-active: var(--eth-btn-danger-bg-active, var(--eth-btn-danger-bg-hover));
+  --cds-button-disabled: var(--eth-btn-disabled-bg);
+
+  /* links + interactive */
+  --cds-link-primary: var(--eth-color-link);
+  --cds-link-primary-hover: var(--eth-color-interactive-strong);
+  --cds-interactive: var(--eth-color-interactive-primary);
+
+  /* support / status (icon glyph colors + notification fills) */
+  --cds-support-error: var(--eth-status-danger-icon);
+  --cds-support-success: var(--eth-status-success-icon);
+  --cds-support-warning: var(--eth-status-warning-icon);
+  --cds-support-info: var(--eth-status-info-icon);
+  --cds-notification-background-error: var(--eth-status-danger-bg);
+  --cds-notification-background-success: var(--eth-status-success-bg);
+  --cds-notification-background-warning: var(--eth-status-warning-bg);
+  --cds-notification-background-info: var(--eth-status-info-bg);
+
+  /* focus + overlay + typography */
+  --cds-focus: var(--eth-focus-ring-color);
+  --cds-overlay: var(--eth-overlay-bg);
+  --cds-font-family: var(--eth-font-family-sans);
+  --cds-font-mono: var(--eth-font-family-mono);
+}

package/src/density.css

@@ -0,0 +1,32 @@
+/* ========================================================================= *
+ * Layer 5 — Density sizing axis.
+ *
+ * Orthogonal to preset. Standard defaults live in base-roles.css :root (so a
+ * page with no [data-eth-density] attribute is "standard"). These blocks add
+ * the compact and comfortable steps. Composes with the existing spacing-scale
+ * density overrides in @echothink-ui/tokens.
+ * ========================================================================= */
+
+[data-eth-density="compact"] {
+  --eth-control-height: 32px;
+  --eth-control-padding-inline: 0.75rem;
+  --eth-control-padding-block: 0.25rem;
+  --eth-row-height: 32px;
+  --eth-cell-padding-inline: var(--eth-space-5);
+  --eth-cell-padding-block: var(--eth-space-2);
+  --eth-field-gap: var(--eth-space-3);
+  --eth-section-gap: var(--eth-space-6);
+  --eth-card-padding: var(--eth-space-6);
+}
+
+[data-eth-density="comfortable"] {
+  --eth-control-height: 48px;
+  --eth-control-padding-inline: 1.25rem;
+  --eth-control-padding-block: 0.75rem;
+  --eth-row-height: 56px;
+  --eth-cell-padding-inline: var(--eth-space-7);
+  --eth-cell-padding-block: var(--eth-space-5);
+  --eth-field-gap: var(--eth-space-6);
+  --eth-section-gap: var(--eth-space-10);
+  --eth-card-padding: var(--eth-space-9);
+}

package/src/index.tsx

@@ -0,0 +1,207 @@
+import * as React from "react";
+import "./styles.css";
+
+export const ethStylePresets = [
+  "carbon-like",
+  "soft-card",
+  "glass",
+  "bright",
+  "studio-dark"
+] as const;
+
+export type EthStylePreset = (typeof ethStylePresets)[number];
+
+export const defaultStylePreset: EthStylePreset = "carbon-like";
+
+export const ethStylePresetLabels: Record<EthStylePreset, string> = {
+  "carbon-like": "Carbon-like",
+  "soft-card": "Soft card",
+  glass: "Liquid glass",
+  bright: "Bright",
+  "studio-dark": "Studio dark"
+};
+
+export const ethStylePresetDescriptions: Record<EthStylePreset, string> = {
+  "carbon-like": "Square, flat Carbon-inspired surfaces.",
+  "soft-card": "Soft radius with quiet card elevation.",
+  glass: "Layered translucent surfaces with strong blur, highlights, and depth.",
+  bright: "High-key SaaS surfaces with crisp contrast.",
+  "studio-dark": "Dark workbench surfaces for dense tools."
+};
+
+/** Light/dark mode per preset. Drives the Carbon theme bundle + data-eth-mode. */
+export const ethStylePresetModes: Record<EthStylePreset, "light" | "dark"> = {
+  "carbon-like": "light",
+  "soft-card": "light",
+  glass: "light",
+  bright: "light",
+  "studio-dark": "dark"
+};
+
+/**
+ * Carbon theme bundle per preset (Part A "theme-bundle base"). Light presets
+ * base on the white bundle; studio-dark bases on g100 so every Carbon token
+ * the bridge does not re-point still resolves to a correct dark value.
+ */
+export const ethStylePresetCarbonThemes: Record<EthStylePreset, string> = {
+  "carbon-like": "white",
+  "soft-card": "white",
+  glass: "white",
+  bright: "white",
+  "studio-dark": "g100"
+};
+
+export const ethPalettes = ["default"] as const;
+export type EthPalette = (typeof ethPalettes)[number];
+export const defaultPalette: EthPalette = "default";
+
+const presetSet = new Set<string>(ethStylePresets);
+const paletteSet = new Set<string>(ethPalettes);
+
+function joinClassNames(...values: Array<string | undefined | false>) {
+  return values.filter(Boolean).join(" ");
+}
+
+export function isEthStylePreset(value: string): value is EthStylePreset {
+  return presetSet.has(value);
+}
+
+export function isEthPalette(value: string): value is EthPalette {
+  return paletteSet.has(value);
+}
+
+export function getEthStylePresetClassName(preset: EthStylePreset = defaultStylePreset) {
+  return `eth-style-${preset}`;
+}
+
+export function getEthPaletteClassName(palette: EthPalette = defaultPalette) {
+  return `eth-palette-${palette}`;
+}
+
+export function getEthStylePresetDataAttribute(preset: EthStylePreset = defaultStylePreset) {
+  return preset;
+}
+
+export function getEthStyleMode(preset: EthStylePreset = defaultStylePreset) {
+  return ethStylePresetModes[preset];
+}
+
+export function getEthStyleCarbonTheme(preset: EthStylePreset = defaultStylePreset) {
+  return ethStylePresetCarbonThemes[preset];
+}
+
+export function composeEthStylePresetClassName(
+  preset: EthStylePreset = defaultStylePreset,
+  className?: string
+) {
+  return joinClassNames(getEthStylePresetClassName(preset), className);
+}
+
+export const ethDensityModes = ["compact", "standard", "comfortable"] as const;
+export type EthDensityMode = (typeof ethDensityModes)[number];
+
+export const ethTypeScales = ["compact", "standard", "large"] as const;
+export type EthTypeScale = (typeof ethTypeScales)[number];
+
+export interface StyleScopeProps extends React.HTMLAttributes<HTMLDivElement> {
+  preset?: EthStylePreset;
+  /** Palette of raw color assets the preset maps from. */
+  palette?: EthPalette;
+  /** Orthogonal spacing axis. "standard" emits no attribute (token defaults). */
+  density?: EthDensityMode;
+  /** Orthogonal typography scale axis. "standard" emits no attribute. */
+  typeScale?: EthTypeScale;
+  /**
+   * Also mirror the preset/palette/Carbon-theme onto the document root so
+   * PORTALED Carbon content (modals, dropdown menus, tooltips, toasts mounted
+   * at document.body, outside this wrapper) inherits the theme instead of
+   * falling back to default Carbon. Defaults to true.
+   */
+  global?: boolean;
+}
+
+const useIsomorphicLayoutEffect =
+  typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+
+function applyGlobalTheme(
+  preset: EthStylePreset,
+  palette: EthPalette,
+  density: EthDensityMode,
+  typeScale: EthTypeScale
+) {
+  if (typeof document === "undefined") return undefined;
+  const root = document.documentElement;
+
+  const presetClass = getEthStylePresetClassName(preset);
+  const paletteClass = getEthPaletteClassName(palette);
+
+  // Desired attributes; a null value means "remove the attribute".
+  const desiredAttrs: Record<string, string | null> = {
+    "data-eth-palette": palette,
+    "data-eth-style-preset": getEthStylePresetDataAttribute(preset),
+    "data-eth-mode": getEthStyleMode(preset),
+    "data-carbon-theme": getEthStyleCarbonTheme(preset),
+    "data-eth-density": density === "standard" ? null : density,
+    "data-eth-type": typeScale === "standard" ? null : typeScale
+  };
+
+  // Snapshot prior preset/palette classes and the attributes we touch.
+  const removedClasses = Array.from(root.classList).filter(
+    (c) => c.startsWith("eth-style-") || c.startsWith("eth-palette-")
+  );
+  const prevAttrs: Record<string, string | null> = {};
+  Object.keys(desiredAttrs).forEach((key) => {
+    prevAttrs[key] = root.getAttribute(key);
+  });
+
+  removedClasses.forEach((c) => root.classList.remove(c));
+  root.classList.add(paletteClass, presetClass);
+  Object.entries(desiredAttrs).forEach(([key, value]) => {
+    if (value === null) root.removeAttribute(key);
+    else root.setAttribute(key, value);
+  });
+
+  return () => {
+    root.classList.remove(paletteClass, presetClass);
+    removedClasses.forEach((c) => root.classList.add(c));
+    Object.entries(prevAttrs).forEach(([key, value]) => {
+      if (value === null) root.removeAttribute(key);
+      else root.setAttribute(key, value);
+    });
+  };
+}
+
+export function StyleScope({
+  preset = defaultStylePreset,
+  palette = defaultPalette,
+  density = "standard",
+  typeScale = "standard",
+  global = true,
+  className,
+  children,
+  ...props
+}: StyleScopeProps) {
+  useIsomorphicLayoutEffect(() => {
+    if (!global) return undefined;
+    return applyGlobalTheme(preset, palette, density, typeScale);
+  }, [global, preset, palette, density, typeScale]);
+
+  return (
+    <div
+      {...props}
+      className={joinClassNames(
+        getEthPaletteClassName(palette),
+        getEthStylePresetClassName(preset),
+        className
+      )}
+      data-eth-palette={palette}
+      data-eth-style-preset={getEthStylePresetDataAttribute(preset)}
+      data-eth-mode={getEthStyleMode(preset)}
+      data-carbon-theme={getEthStyleCarbonTheme(preset)}
+      data-eth-density={density === "standard" ? undefined : density}
+      data-eth-type={typeScale === "standard" ? undefined : typeScale}
+    >
+      {children}
+    </div>
+  );
+}

package/src/palettes.css

@@ -0,0 +1,51 @@
+/* ========================================================================= *
+ * Layer 1 — Palette tokens.
+ *
+ * Raw color assets. No component, preset, or mode meaning. Presets map these
+ * into the semantic + role contract. Applied at :root so they always resolve,
+ * and under .eth-palette-<name> so multiple palettes can coexist on one page.
+ * ========================================================================= */
+
+:root,
+.eth-palette-default {
+  --eth-palette-neutral-0: #ffffff;
+  --eth-palette-neutral-25: #fbfcfe;
+  --eth-palette-neutral-50: #f6f7f9;
+  --eth-palette-neutral-100: #edf2f8;
+  --eth-palette-neutral-200: #dbe1ea;
+  --eth-palette-neutral-300: #c2ccd9;
+  --eth-palette-neutral-400: #9aa7b8;
+  --eth-palette-neutral-500: #6b7889;
+  --eth-palette-neutral-600: #5c6a7d;
+  --eth-palette-neutral-700: #526176;
+  --eth-palette-neutral-800: #33414f;
+  --eth-palette-neutral-900: #122033;
+  --eth-palette-neutral-950: #0b1623;
+
+  --eth-palette-blue-50: #edf6ff;
+  --eth-palette-blue-100: #dff0ff;
+  --eth-palette-blue-300: #7db2ff;
+  --eth-palette-blue-400: #4589ff;
+  --eth-palette-blue-500: #1768ff;
+  --eth-palette-blue-700: #0048d9;
+
+  --eth-palette-indigo-50: #eef0ff;
+  --eth-palette-indigo-300: #a5acff;
+  --eth-palette-indigo-500: #4f5bef;
+  --eth-palette-indigo-700: #3a3fd0;
+
+  --eth-palette-red-50: #fff1f1;
+  --eth-palette-red-300: #ff9a9f;
+  --eth-palette-red-500: #da1e28;
+  --eth-palette-red-700: #a2191f;
+
+  --eth-palette-green-50: #defbe6;
+  --eth-palette-green-300: #6fdc8c;
+  --eth-palette-green-500: #24a148;
+  --eth-palette-green-700: #198038;
+
+  --eth-palette-yellow-50: #fcf4d6;
+  --eth-palette-yellow-300: #f5d76e;
+  --eth-palette-yellow-500: #f1c21b;
+  --eth-palette-yellow-700: #8a6d00;
+}