@ngneers/controls-themes 0.0.1-next.0

package/shade/base/colors.d.ts

@@ -0,0 +1,353 @@
+export declare const COLOR_SLOTS: readonly ["surface", "primary", "secondary", "muted", "accent", "destructive"];
+export declare const PUBLIC_COLOR_SLOTS: readonly ["surface", "primary", "destructive"];
+export declare const colorsTemplate: import("@ngneers/controls-themes").VariableTemplate<"color", {
+    background: null;
+    foreground: null;
+    text: null;
+    border: null;
+    input: null;
+    ring: null;
+    popover: {
+        base: null;
+        foreground: null;
+    };
+    primary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    secondary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    accent: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    surface: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    muted: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    destructive: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+}>;
+export declare function createShadeColorPart(baseColor?: string): import("@ngneers/controls-themes").ThemePart<"color", never, [import("@ngneers/controls-themes").VariableTemplate<"color", {
+    background: null;
+    foreground: null;
+    text: null;
+    border: null;
+    input: null;
+    ring: null;
+    popover: {
+        base: null;
+        foreground: null;
+    };
+    primary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    secondary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    accent: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    surface: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    muted: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    destructive: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+}>], import("@ngneers/controls-themes").VariableTemplate[]>;
+export declare const zinc: import("@ngneers/controls-themes").ThemePart<"color", never, [import("@ngneers/controls-themes").VariableTemplate<"color", {
+    background: null;
+    foreground: null;
+    text: null;
+    border: null;
+    input: null;
+    ring: null;
+    popover: {
+        base: null;
+        foreground: null;
+    };
+    primary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    secondary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    accent: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    surface: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    muted: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    destructive: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+}>], import("@ngneers/controls-themes").VariableTemplate[]>;
+type ThemeSlotColor = (typeof COLOR_SLOTS)[number];
+type ThemeSlotVarName = `color.${ThemeSlotColor}.${'base' | 'foreground'}`;
+/**
+ * Emits per-slot `--theme-bg` / `--theme-fg` custom properties so control CSS can be
+ * written once against those two variables and recolored via `color-*` classes.
+ */
+export declare function slotColors(c: (className: `color-${string}`) => string, v: (varName: ThemeSlotVarName) => string): string;
+export {};
+//# sourceMappingURL=colors.d.ts.map

package/shade/base/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/shade/base/colors.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,WAAW,gFAOd,CAAC;AAMX,eAAO,MAAM,kBAAkB,gDAAiD,CAAC;AAqDjF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwBzB,CAAC;AA2CH,wBAAgB,oBAAoB,CAAC,SAAS,CAAC,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4DAatD;AAED,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2DAAyB,CAAC;AAE3C,KAAK,cAAc,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEnD,KAAK,gBAAgB,GAAG,SAAS,cAAc,IAAI,MAAM,GAAG,YAAY,EAAE,CAAC;AAE3E;;;GAGG;AACH,wBAAgB,UAAU,CACxB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,MAAM,EAAE,KAAK,MAAM,EAC3C,CAAC,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,MAAM,GACvC,MAAM,CASR"}

package/shade/base/colors.js

@@ -0,0 +1,153 @@
+import { createThemePart, createVariableTemplate, repeatVariables, } from '@ngneers/controls-themes/api';
+import { createShadeColors } from '@ngneers/controls-themes/shade/colors';
+// All color slots that get `.base`/`.foreground`/ramp CSS variables emitted. This is the set of
+// tokens the theme PARTS read internally — `accent` (every hover state), `muted` (muted text +
+// subtle backgrounds), `secondary` (chip/tag default) — plus the public ones. It is NOT the
+// user-selectable color list; see PUBLIC_COLOR_SLOTS.
+// When adding a slot, update all four touchpoints: ShadeSchemeColors, both scheme literals
+// in createShadeColors, COLOR_SLOTS, and toTemplateValues.
+export const COLOR_SLOTS = [
+    'surface',
+    'primary',
+    'secondary',
+    'muted',
+    'accent',
+    'destructive',
+];
+// The user-selectable colors (the `color="…"` input / `injectThemeColors`): just the neutral
+// dark (`primary`), neutral light (`surface`) and `destructive`. The other slots above are
+// internal styling tokens only — no control exposes them as a recolor option, so `slotColors`
+// emits `color-*` remap classes for these three alone.
+export const PUBLIC_COLOR_SLOTS = ['surface', 'primary', 'destructive'];
+// Numeric ramp levels, matching nova's `--ngn-color-<slot>-<level>` contract. Shade is
+// slot-based (its own parts read `.base`/`.foreground`), but the ramp is emitted too so that
+// consumers and built-in controls that reference a specific level — e.g. the paginator's
+// `var(--ngn-color-secondary-500)` — resolve to a real tone instead of an undefined variable.
+const RAMP_LEVELS = [25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 975];
+// Designed lightness (%) per ramp level for the DARK scheme; the LIGHT scheme uses the
+// complement (100 − value). It is intentionally non-linear rather than a plain lightness sweep:
+// shade's palette is monochrome, so a linear ramp leaves the mid-high levels a flat mid-gray and
+// nova-authored emphasis (`primary-700` headings, `-600` eyebrows) looks dimmer than body text.
+// This curve keeps the low levels subtle (near the background), `500` mid (so the paginator's
+// `secondary-500` highlight stays visible), and drives `600`+ toward the foreground so emphasis
+// reads strong in both schemes.
+const RAMP_DARK_LIGHTNESS = {
+    25: 6,
+    50: 9,
+    100: 14,
+    200: 22,
+    300: 34,
+    400: 48,
+    500: 62,
+    600: 80,
+    700: 91,
+    800: 96,
+    900: 98,
+    950: 99,
+    975: 100,
+};
+// Keeps the base color's hue/sat (so configurable base colors ramp correctly) with the designed
+// lightness curve above.
+function ramp(baseColor, isDark) {
+    return RAMP_LEVELS.reduce((acc, level) => {
+        const darkL = RAMP_DARK_LIGHTNESS[level];
+        const lightness = isDark ? darkL : 100 - darkL;
+        acc[`${level}`] = `hsl(from ${baseColor} h s ${lightness})`;
+        return acc;
+    }, {});
+}
+const RAMP_SHAPE = RAMP_LEVELS.reduce((acc, level) => {
+    acc[`${level}`] = null;
+    return acc;
+}, {});
+export const colorsTemplate = createVariableTemplate({
+    scope: 'color',
+    variables: {
+        ...repeatVariables(COLOR_SLOTS, {
+            base: null,
+            foreground: null,
+            ...RAMP_SHAPE,
+        }),
+        background: null,
+        foreground: null,
+        // Alias of `foreground`. Nova exposes `color.text`; docs components authored against nova
+        // reference `--ngn-color-text`, so shade emits it too (otherwise that text is unstyled →
+        // black-on-dark in dark mode).
+        text: null,
+        border: null,
+        input: null,
+        ring: null,
+        // Nested like the slots so all paired bg/fg tokens read the same, but intentionally
+        // not part of COLOR_SLOTS — popover is not a public recolorable slot.
+        popover: {
+            base: null,
+            foreground: null,
+        },
+    },
+});
+function toTemplateValues(scheme, isDark) {
+    return {
+        surface: {
+            base: scheme.surface,
+            foreground: scheme.surfaceForeground,
+            ...ramp(scheme.surface, isDark),
+        },
+        primary: {
+            base: scheme.primary,
+            foreground: scheme.primaryForeground,
+            ...ramp(scheme.primary, isDark),
+        },
+        secondary: {
+            base: scheme.secondary,
+            foreground: scheme.secondaryForeground,
+            ...ramp(scheme.secondary, isDark),
+        },
+        muted: {
+            base: scheme.muted,
+            foreground: scheme.mutedForeground,
+            ...ramp(scheme.muted, isDark),
+        },
+        accent: {
+            base: scheme.accent,
+            foreground: scheme.accentForeground,
+            ...ramp(scheme.accent, isDark),
+        },
+        destructive: {
+            base: scheme.destructive,
+            foreground: scheme.destructiveForeground,
+            ...ramp(scheme.destructive, isDark),
+        },
+        background: scheme.background,
+        foreground: scheme.foreground,
+        text: scheme.foreground,
+        border: scheme.border,
+        input: scheme.input,
+        ring: scheme.ring,
+    };
+}
+export function createShadeColorPart(baseColor) {
+    const colors = createShadeColors(baseColor);
+    return createThemePart({
+        scope: 'color',
+        variables: [colorsTemplate],
+        root: {
+            values: toTemplateValues(colors.light, false),
+        },
+        dark: {
+            values: toTemplateValues(colors.dark, true),
+        },
+    });
+}
+export const zinc = createShadeColorPart();
+/**
+ * Emits per-slot `--theme-bg` / `--theme-fg` custom properties so control CSS can be
+ * written once against those two variables and recolored via `color-*` classes.
+ */
+export function slotColors(c, v) {
+    return PUBLIC_COLOR_SLOTS.map(color => `
+      ${c(`color-${color}`)} {
+        --theme-bg: ${v(`color.${color}.base`)};
+        --theme-fg: ${v(`color.${color}.foreground`)};
+      }
+      `).join('\n');
+}

package/shade/base/focus.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Shared shadcn-style focus-ring pattern for interactive shade parts.
+ *
+ * Contract: `focusRingSetup(v)` goes at the top of a part's root class and defines two
+ * custom properties that kinds (or states) may override:
+ * - `--shade-shadow`: the resting elevation shadow (defaults to a no-op layer). Kinds opt
+ *   into elevation by setting it, e.g. `--shade-shadow: ${v('shadow.sm')};`, and should
+ *   render it via `box-shadow: var(--shade-shadow);`.
+ * - `--shade-ring`: the focus ring color (defaults to `color.ring` at 50%). Override for
+ *   deviating rings, e.g. a destructive kind at 20%.
+ *
+ * `focusRing` is the matching nested `&:focus-visible` rule that layers the 3px ring on
+ * top of the elevation shadow. Interpolate it inside the same root class.
+ */
+export declare function focusRingSetup(v: (varName: 'color.ring') => string): string;
+export declare const focusRing = "\n  &:focus-visible {\n    /* transparent normally; system-colored under forced-colors, where box-shadow doesn't render */\n    outline: 2px solid transparent;\n    outline-offset: 2px;\n    box-shadow:\n      0 0 0 3px var(--shade-ring),\n      var(--shade-shadow);\n  }\n";
+//# sourceMappingURL=focus.d.ts.map

package/shade/base/focus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus.d.ts","sourceRoot":"","sources":["../../../src/shade/base/focus.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,MAAM,GAAG,MAAM,CAM3E;AAED,eAAO,MAAM,SAAS,sRASrB,CAAC"}

package/shade/base/focus.js

@@ -0,0 +1,31 @@
+/**
+ * Shared shadcn-style focus-ring pattern for interactive shade parts.
+ *
+ * Contract: `focusRingSetup(v)` goes at the top of a part's root class and defines two
+ * custom properties that kinds (or states) may override:
+ * - `--shade-shadow`: the resting elevation shadow (defaults to a no-op layer). Kinds opt
+ *   into elevation by setting it, e.g. `--shade-shadow: ${v('shadow.sm')};`, and should
+ *   render it via `box-shadow: var(--shade-shadow);`.
+ * - `--shade-ring`: the focus ring color (defaults to `color.ring` at 50%). Override for
+ *   deviating rings, e.g. a destructive kind at 20%.
+ *
+ * `focusRing` is the matching nested `&:focus-visible` rule that layers the 3px ring on
+ * top of the elevation shadow. Interpolate it inside the same root class.
+ */
+export function focusRingSetup(v) {
+    return `
+    /* transparent no-op layer, never 'none' — must participate in the layered box-shadow list */
+    --shade-shadow: 0 0 #0000;
+    --shade-ring: color-mix(in srgb, ${v('color.ring')} 50%, transparent);
+  `;
+}
+export const focusRing = `
+  &:focus-visible {
+    /* transparent normally; system-colored under forced-colors, where box-shadow doesn't render */
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    box-shadow:
+      0 0 0 3px var(--shade-ring),
+      var(--shade-shadow);
+  }
+`;

package/shade/base/font.d.ts

@@ -0,0 +1,39 @@
+export declare const fontTemplate: import("@ngneers/controls-themes").VariableTemplate<"font", {
+    family: null;
+    weight: {
+        normal: null;
+        medium: null;
+        semibold: null;
+        bold: null;
+        extrabold: null;
+        black: null;
+    };
+    size: {
+        xs: null;
+        sm: null;
+        md: null;
+        lg: null;
+        xl: null;
+        '2xl': null;
+    };
+}>;
+export declare const font: import("@ngneers/controls-themes").ThemePart<"font", never, [import("@ngneers/controls-themes").VariableTemplate<"font", {
+    family: null;
+    weight: {
+        normal: null;
+        medium: null;
+        semibold: null;
+        bold: null;
+        extrabold: null;
+        black: null;
+    };
+    size: {
+        xs: null;
+        sm: null;
+        md: null;
+        lg: null;
+        xl: null;
+        '2xl': null;
+    };
+}>], import("@ngneers/controls-themes").VariableTemplate[]>;
+//# sourceMappingURL=font.d.ts.map

package/shade/base/font.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font.d.ts","sourceRoot":"","sources":["../../../src/shade/base/font.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;EAqBvB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;2DAwBf,CAAC"}

package/shade/base/font.js

@@ -0,0 +1,48 @@
+import { createThemePart, createVariableTemplate } from '@ngneers/controls-themes/api';
+export const fontTemplate = createVariableTemplate({
+    scope: 'font',
+    variables: {
+        family: null,
+        weight: {
+            normal: null,
+            medium: null,
+            semibold: null,
+            bold: null,
+            extrabold: null,
+            black: null,
+        },
+        size: {
+            xs: null,
+            sm: null,
+            md: null,
+            lg: null,
+            xl: null,
+            '2xl': null,
+        },
+    },
+});
+export const font = createThemePart({
+    scope: 'font',
+    variables: [fontTemplate],
+    root: {
+        values: {
+            family: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+            weight: {
+                normal: '400',
+                medium: '500',
+                semibold: '600',
+                bold: '700',
+                extrabold: '800',
+                black: '900',
+            },
+            size: {
+                xs: '0.75rem',
+                sm: '0.875rem',
+                md: '1rem',
+                lg: '1.125rem',
+                xl: '1.25rem',
+                '2xl': '1.5rem',
+            },
+        },
+    },
+});

package/shade/base/index.d.ts

@@ -0,0 +1,7 @@
+export * from './animation';
+export * from './colors';
+export * from './focus';
+export * from './font';
+export * from './shadow';
+export * from './sizes';
+//# sourceMappingURL=index.d.ts.map

package/shade/base/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shade/base/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}

package/shade/base/index.js

@@ -0,0 +1,6 @@
+export * from './animation';
+export * from './colors';
+export * from './focus';
+export * from './font';
+export * from './shadow';
+export * from './sizes';

package/shade/base/shadow.d.ts

@@ -0,0 +1,13 @@
+export declare const shadowTemplate: import("@ngneers/controls-themes").VariableTemplate<"shadow", {
+    sm: null;
+    md: null;
+    lg: null;
+    xl: null;
+}>;
+export declare const shadow: import("@ngneers/controls-themes").ThemePart<"shadow", never, [import("@ngneers/controls-themes").VariableTemplate<"shadow", {
+    sm: null;
+    md: null;
+    lg: null;
+    xl: null;
+}>], import("@ngneers/controls-themes").VariableTemplate[]>;
+//# sourceMappingURL=shadow.d.ts.map

package/shade/base/shadow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadow.d.ts","sourceRoot":"","sources":["../../../src/shade/base/shadow.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;;;EAQzB,CAAC;AAKH,eAAO,MAAM,MAAM;;;;;2DAWjB,CAAC"}