@ngneers/controls-themes 0.0.1-next.0

package/shade/checkbox/index.d.ts

@@ -0,0 +1,142 @@
+export declare const checkboxStyles: import("@ngneers/controls-themes").ThemePart<"checkbox", import("@ngneers/controls-themes").ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "box-icon-visible", "invalid"], readonly []>, import("@ngneers/controls-themes").VariableTemplate<"checkbox">[], [import("@ngneers/controls-themes").VariableTemplate<"anim", {
+    time: {
+        fade: null;
+        snappyFade: null;
+    };
+    ease: {
+        fade: null;
+        snappyFade: null;
+    };
+}>, 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<"shadow", {
+    sm: null;
+    md: null;
+    lg: null;
+    xl: null;
+}>, import("@ngneers/controls-themes").VariableTemplate<"size", {
+    rounded: {
+        sm: null;
+        md: null;
+        lg: null;
+        full: null;
+    };
+    padding: {
+        sm: null;
+        md: null;
+        lg: null;
+        xl: null;
+    };
+}>]>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shade/checkbox/index.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwEzB,CAAC"}

package/shade/checkbox/index.js

@@ -0,0 +1,77 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { animationTemplate, colorsTemplate, shadowTemplate, sizesTemplate, } from '@ngneers/controls-themes/shade/base';
+import { checkboxControlTemplate } from '@ngneers/controls-themes/templates/checkbox';
+export const checkboxStyles = createThemePart({
+    controlTemplate: checkboxControlTemplate,
+    base: baseStyles.checkbox,
+    dependencies: [animationTemplate, colorsTemplate, shadowTemplate, sizesTemplate],
+    root: {
+        css: ({ v, c }) => css `
+      ${c('box')} {
+        width: 1rem;
+        height: 1rem;
+        border: 1px solid
+          color-mix(in srgb, ${v('color.input')} 45%, ${v('color.muted.foreground')} 55%);
+        border-radius: ${v('size.rounded.sm')};
+        box-shadow: ${v('shadow.sm')};
+        color: ${v('color.primary.foreground')};
+        transition:
+          background-color ${v('anim.time.snappyFade')} ${v('anim.ease.snappyFade')},
+          border-color ${v('anim.time.snappyFade')} ${v('anim.ease.snappyFade')},
+          box-shadow ${v('anim.time.snappyFade')} ${v('anim.ease.snappyFade')};
+      }
+
+      ${c('box-checked')},
+      ${c('box-indeterminate')} {
+        background-color: ${v('color.primary.base')};
+        border-color: ${v('color.primary.base')};
+      }
+
+      ${c('invalid')} ${c('box')} {
+        border-color: ${v('color.destructive.base')};
+      }
+      ${c('invalid')} ${c('box-checked')},
+      ${c('invalid')} ${c('box-indeterminate')} {
+        background-color: ${v('color.destructive.base')};
+        color: ${v('color.destructive.foreground')};
+      }
+
+      /* readonly: muted fill, still readable, clearly non-editable */
+      ${c('root')}:has(${c('input')}[aria-readonly]) ${c('box')} {
+        background-color: ${v('color.muted.base')};
+      }
+
+      /* disabled dims the whole control; never recolor */
+      ${c('root')}:has(${c('input')}[disabled]) {
+        opacity: 0.5;
+        cursor: default;
+      }
+
+      /* focus lives on the hidden input; mirror the shared 3px ring onto the visible box */
+      ${c('root')}:has(${c('input')}:focus-visible) ${c('box')} {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+        box-shadow: 0 0 0 3px color-mix(in srgb, ${v('color.ring')} 50%, transparent);
+      }
+      ${c('invalid')}:has(${c('input')}:focus-visible) ${c('box')} {
+        box-shadow: 0 0 0 3px color-mix(in srgb, ${v('color.destructive.base')} 20%, transparent);
+      }
+
+      ${c('box-icon')} {
+        /* This icon scales with font-size (not --icon-size); shrink it so the check/dash
+         * sits inset within the box instead of filling it edge-to-edge. */
+        font-size: 0.72rem;
+        opacity: 0;
+        transform: scale(0.8);
+        transition:
+          opacity ${v('anim.time.snappyFade')} ${v('anim.ease.snappyFade')},
+          transform ${v('anim.time.snappyFade')} ${v('anim.ease.snappyFade')};
+      }
+      ${c('box-icon-visible')} {
+        opacity: 1;
+        transform: scale(1);
+      }
+    `,
+    },
+});

package/shade/chip/index.d.ts

@@ -0,0 +1,146 @@
+export declare const chipStyles: import("@ngneers/controls-themes").ThemePart<"chip", import("@ngneers/controls-themes").ControlTemplate<"chip", ["root", "closable", "actionable", "content", "close-button", "close-icon", `color-${string}`], readonly []>, import("@ngneers/controls-themes").VariableTemplate<"chip">[], [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<"size", {
+    rounded: {
+        sm: null;
+        md: null;
+        lg: null;
+        full: null;
+    };
+    padding: {
+        sm: null;
+        md: null;
+        lg: null;
+        xl: null;
+    };
+}>, 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;
+    };
+}>]>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shade/chip/index.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmErB,CAAC"}

package/shade/chip/index.js

@@ -0,0 +1,72 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { colorsTemplate, fontTemplate, sizesTemplate, slotColors, } from '@ngneers/controls-themes/shade/base';
+import { chipControlTemplate } from '@ngneers/controls-themes/templates/chip';
+export const chipStyles = createThemePart({
+    controlTemplate: chipControlTemplate,
+    base: baseStyles.chip,
+    dependencies: [colorsTemplate, sizesTemplate, fontTemplate],
+    root: {
+        // Secondary-toned pill by default; a color-* class recolors it via the slot vars.
+        css: ({ v, c }) => css `
+      ${slotColors(c, v)}
+
+      ${c('root')} {
+        --chip-bg: var(--theme-bg, ${v('color.secondary.base')});
+        background: var(--chip-bg);
+        border-radius: ${v('size.rounded.md')};
+      }
+
+      ${c('content')} {
+        padding: ${v('size.padding.sm')} ${v('size.padding.lg')};
+        font-size: ${v('font.size.sm')};
+        line-height: 1.25rem;
+        background: none;
+        color: var(--theme-fg, ${v('color.secondary.foreground')});
+        border: none;
+      }
+
+      ${c('close-button')} {
+        cursor: pointer;
+        padding: 0 ${v('size.padding.md')} 0 calc(${v('size.padding.sm')} / 2);
+        background: none;
+        color: var(--theme-fg, ${v('color.secondary.foreground')});
+        border: none;
+        border-top-right-radius: ${v('size.rounded.md')};
+        border-bottom-right-radius: ${v('size.rounded.md')};
+        font-size: 0.75rem;
+
+        &:focus {
+          opacity: 0.8;
+        }
+        &:hover {
+          opacity: 0.7;
+        }
+        &:active {
+          opacity: 0.5;
+        }
+      }
+
+      ${c('actionable')} {
+        ${c('content')} {
+          cursor: pointer;
+          border-radius: ${v('size.rounded.md')};
+        }
+        &:has(${c('content')}:hover) {
+          background: color-mix(in srgb, var(--chip-bg) 80%, transparent);
+        }
+        &:has(${c('content')}:active) {
+          background: color-mix(in srgb, var(--chip-bg) 70%, transparent);
+        }
+      }
+
+      ${c('closable')} {
+        ${c('content')} {
+          padding-right: calc(${v('size.padding.sm')} / 2);
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      }
+    `,
+    },
+});

package/shade/colors/index.d.ts

@@ -0,0 +1,42 @@
+export type ShadeSchemeColors = {
+    background: string;
+    foreground: string;
+    muted: string;
+    mutedForeground: string;
+    border: string;
+    input: string;
+    ring: string;
+    primary: string;
+    primaryForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    accent: string;
+    accentForeground: string;
+    destructive: string;
+    destructiveForeground: string;
+    surface: string;
+    surfaceForeground: string;
+};
+export type ShadeColors = {
+    light: ShadeSchemeColors;
+    dark: ShadeSchemeColors;
+};
+/**
+ * Derives a contrast-safe foreground (near-white or near-black) for an arbitrary base color,
+ * using the shared theme-domain {@link autoContrast} helper (relative OKLCH lightness pick,
+ * resolved live by the browser) — the same logic nova applies to custom colors.
+ */
+export declare function getContrastForeground(color: string): string;
+/**
+ * Returns a lightened variant of the given color (lightness increased by `amount`, capped at 95).
+ */
+export declare function getLightenedColor(color: string, amount: number): string;
+/**
+ * Creates the per-scheme color slot values for the shade theme.
+ *
+ * Without a `baseColor` the shadcn zinc defaults are returned. When a `baseColor` is
+ * given, the primary/ring slots are derived from it via CSS relative color syntax.
+ */
+export declare function createShadeColors(baseColor?: string): ShadeColors;
+export declare const zincColors: ShadeColors;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shade/colors/index.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,iBAAiB,CAAC;IACzB,IAAI,EAAE,iBAAiB,CAAC;CACzB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAE3D;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAEvE;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,WAAW,CAqDjE;AAED,eAAO,MAAM,UAAU,aAAsB,CAAC"}

package/shade/colors/index.js

@@ -0,0 +1,72 @@
+import { autoContrast } from '@ngneers/controls-themes/api';
+/**
+ * Derives a contrast-safe foreground (near-white or near-black) for an arbitrary base color,
+ * using the shared theme-domain {@link autoContrast} helper (relative OKLCH lightness pick,
+ * resolved live by the browser) — the same logic nova applies to custom colors.
+ */
+export function getContrastForeground(color) {
+    return autoContrast(color);
+}
+/**
+ * Returns a lightened variant of the given color (lightness increased by `amount`, capped at 95).
+ */
+export function getLightenedColor(color, amount) {
+    return `hsl(from ${color} h s calc(min(l + ${amount}, 95)))`;
+}
+/**
+ * Creates the per-scheme color slot values for the shade theme.
+ *
+ * Without a `baseColor` the shadcn zinc defaults are returned. When a `baseColor` is
+ * given, the primary/ring slots are derived from it via CSS relative color syntax.
+ */
+export function createShadeColors(baseColor) {
+    const light = {
+        background: '#ffffff',
+        foreground: '#09090b',
+        muted: '#f4f4f5',
+        mutedForeground: '#71717a',
+        border: '#e4e4e7',
+        input: '#e4e4e7',
+        ring: '#a1a1aa',
+        primary: '#18181b',
+        primaryForeground: '#fafafa',
+        secondary: '#f4f4f5',
+        secondaryForeground: '#18181b',
+        accent: '#f4f4f5',
+        accentForeground: '#18181b',
+        destructive: '#dc2626',
+        destructiveForeground: '#fafafa',
+        surface: '#ffffff',
+        surfaceForeground: '#09090b',
+    };
+    const dark = {
+        background: '#09090b',
+        foreground: '#fafafa',
+        muted: '#27272a',
+        mutedForeground: '#a1a1aa',
+        border: '#27272a',
+        input: '#3f3f46',
+        ring: '#52525b',
+        primary: '#fafafa',
+        primaryForeground: '#18181b',
+        secondary: '#27272a',
+        secondaryForeground: '#fafafa',
+        accent: '#27272a',
+        accentForeground: '#fafafa',
+        destructive: '#ef4444',
+        destructiveForeground: '#fafafa',
+        surface: '#18181b',
+        surfaceForeground: '#fafafa',
+    };
+    if (baseColor !== undefined) {
+        light.primary = baseColor;
+        light.primaryForeground = getContrastForeground(baseColor);
+        light.ring = getLightenedColor(baseColor, 20);
+        const darkPrimary = getLightenedColor(baseColor, 15);
+        dark.primary = darkPrimary;
+        dark.primaryForeground = getContrastForeground(darkPrimary);
+        dark.ring = baseColor;
+    }
+    return { light, dark };
+}
+export const zincColors = createShadeColors();