@ngneers/controls-themes 0.0.1-next.0

package/shade/base/shadow.js

@@ -0,0 +1,25 @@
+import { createThemePart, createVariableTemplate } from '@ngneers/controls-themes/api';
+export const shadowTemplate = createVariableTemplate({
+    scope: 'shadow',
+    variables: {
+        sm: null,
+        md: null,
+        lg: null,
+        xl: null,
+    },
+});
+// NOTE: The template keeps nova's `sm/md/lg/xl` keys, but the values are the Tailwind/shadcn
+// scale shifted one step: shade `sm` = shadcn `shadow-xs`, `md` = `shadow-sm`,
+// `lg` = `shadow-md`, `xl` = `shadow-lg`. Pick keys by that mapping, not by the shadcn name.
+export const shadow = createThemePart({
+    scope: 'shadow',
+    variables: [shadowTemplate],
+    root: {
+        values: {
+            sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+            md: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+            lg: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+            xl: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+        },
+    },
+});

package/shade/base/sizes.d.ts

@@ -0,0 +1,31 @@
+/** Single radius design token the whole rounded scale derives from. */
+export declare const RADIUS = "0.625rem";
+export declare const sizesTemplate: import("@ngneers/controls-themes").VariableTemplate<"size", {
+    rounded: {
+        sm: null;
+        md: null;
+        lg: null;
+        full: null;
+    };
+    padding: {
+        sm: null;
+        md: null;
+        lg: null;
+        xl: null;
+    };
+}>;
+export declare const sizes: import("@ngneers/controls-themes").ThemePart<"size", never, [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[]>;
+//# sourceMappingURL=sizes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sizes.d.ts","sourceRoot":"","sources":["../../../src/shade/base/sizes.ts"],"names":[],"mappings":"AAEA,uEAAuE;AACvE,eAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAO,MAAM,aAAa;;;;;;;;;;;;;EAgBxB,CAAC;AAEH,eAAO,MAAM,KAAK;;;;;;;;;;;;;2DAmBhB,CAAC"}

package/shade/base/sizes.js

@@ -0,0 +1,40 @@
+import { createThemePart, createVariableTemplate } from '@ngneers/controls-themes/api';
+/** Single radius design token the whole rounded scale derives from. */
+export const RADIUS = '0.625rem';
+export const sizesTemplate = createVariableTemplate({
+    scope: 'size',
+    variables: {
+        rounded: {
+            sm: null,
+            md: null,
+            lg: null,
+            full: null,
+        },
+        padding: {
+            sm: null,
+            md: null,
+            lg: null,
+            xl: null,
+        },
+    },
+});
+export const sizes = createThemePart({
+    scope: 'size',
+    variables: [sizesTemplate],
+    root: {
+        values: {
+            rounded: {
+                sm: `calc(${RADIUS} - 4px)`,
+                md: `calc(${RADIUS} - 2px)`,
+                lg: RADIUS,
+                full: '9999px',
+            },
+            padding: {
+                sm: '0.25rem',
+                md: '0.5rem',
+                lg: '0.75rem',
+                xl: '1rem',
+            },
+        },
+    },
+});

package/shade/breadcrumb/index.d.ts

@@ -0,0 +1,155 @@
+export declare const breadcrumbStyles: import("@ngneers/controls-themes").ThemePart<"breadcrumb", import("@ngneers/controls-themes").ControlTemplate<"breadcrumb", ["root", "item", "item-clickable", "separator", "overflow"], readonly [{
+    readonly class: "item-view";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"item-view", ["root", "item", "item-overflowing", "more-items", "more-items-hidden", "more-items-default", "hidden-separator"], readonly []>;
+}, {
+    readonly class: "menu";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"menu", ["root", "submenu", "item", "item-opened", "icon-children", "separator"], readonly [{
+        readonly class: "popover";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+    }]>;
+}]>, import("@ngneers/controls-themes").VariableTemplate<"breadcrumb">[], [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/breadcrumb/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shade/breadcrumb/index.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2C3B,CAAC"}

package/shade/breadcrumb/index.js

@@ -0,0 +1,48 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { colorsTemplate, fontTemplate, sizesTemplate } from '@ngneers/controls-themes/shade/base';
+import { breadcrumbControlTemplate } from '@ngneers/controls-themes/templates/breadcrumb';
+export const breadcrumbStyles = createThemePart({
+    controlTemplate: breadcrumbControlTemplate,
+    base: baseStyles.breadcrumb,
+    dependencies: [colorsTemplate, sizesTemplate, fontTemplate],
+    root: {
+        css: ({ v, c, d }) => css `
+      ${c('root')} {
+        gap: ${v('size.padding.md')};
+        font-size: ${v('font.size.sm')};
+        ${d('item-view')} {
+          gap: ${v('size.padding.md')};
+        }
+      }
+      ${c('separator')} {
+        color: ${v('color.muted.foreground')};
+        ngn-icon {
+          margin-left: 0.5rem;
+          font-size: ${v('font.size.xs')};
+        }
+      }
+      ${c('item')},
+      ${c('overflow')} {
+        cursor: default;
+        color: ${v('color.muted.foreground')};
+        transition: color 0.2s;
+        background: transparent;
+        border: none;
+        padding: 0;
+        font-size: inherit;
+      }
+      ${c('item-clickable')},
+      ${c('overflow')} {
+        cursor: pointer;
+        &:hover {
+          color: ${v('color.foreground')};
+        }
+      }
+      ${c('item')}:last-child {
+        color: ${v('color.foreground')};
+        font-weight: ${v('font.weight.medium')};
+      }
+    `,
+    },
+});

package/shade/button/index.d.ts

@@ -0,0 +1,160 @@
+export declare const buttonStyles: import("@ngneers/controls-themes").ThemePart<"button", import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>, import("@ngneers/controls-themes").VariableTemplate<"button">[], [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<"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<"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/button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shade/button/index.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA0HvB,CAAC"}

package/shade/button/index.js

@@ -0,0 +1,127 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { animationTemplate, colorsTemplate, focusRing, focusRingSetup, fontTemplate, shadowTemplate, sizesTemplate, slotColors, } from '@ngneers/controls-themes/shade/base';
+import { buttonControlTemplate } from '@ngneers/controls-themes/templates/button';
+export const buttonStyles = createThemePart({
+    controlTemplate: buttonControlTemplate,
+    base: baseStyles.button,
+    dependencies: [animationTemplate, colorsTemplate, fontTemplate, shadowTemplate, sizesTemplate],
+    root: {
+        css: ({ v, c }) => css `
+      ${slotColors(c, v)}
+
+      ${c('root')} {
+        /* focus-ring contract (see focusRingSetup): kinds override --shade-shadow / --shade-ring */
+        ${focusRingSetup(v)}
+        box-sizing: border-box;
+        /* transparent border keeps bordered (outline) and borderless kinds pixel-identical */
+        border: 1px solid transparent;
+        border-radius: ${v('size.rounded.md')};
+        font-family: ${v('font.family')};
+        font-size: ${v('font.size.sm')};
+        font-weight: ${v('font.weight.medium')};
+        padding: ${v('size.padding.md')} ${v('size.padding.xl')};
+        gap: ${v('size.padding.sm')};
+        justify-content: center;
+        cursor: pointer;
+        box-shadow: var(--shade-shadow);
+        transition-property: color, background-color, border-color, box-shadow, transform;
+        transition-duration: ${v('anim.time.snappyFade')};
+        transition-timing-function: ${v('anim.ease.snappyFade')};
+        ${focusRing}
+        /* universal tactile press feedback for every kind */
+        &:active:not(:disabled) {
+          transform: scale(0.97);
+        }
+        &:disabled {
+          cursor: default;
+          opacity: 0.5;
+        }
+      }
+
+      /* Shared kind vocabulary across all themes: primary | secondary | text | icon | link.
+       * 'destructive' is NOT a kind — it is a color slot (color="destructive"); a destructive
+       * button is kind="primary" color="destructive", which retints --theme-bg/--theme-fg. */
+
+      /* primary — filled. Shifts the background toward its OWN foreground on hover/active: an
+       * opaque tonal change that stays visible whether the button is dark (zinc primary) or a
+       * light color slot on a white page, unlike mixing toward transparent. */
+      ${c('kind-primary')} {
+        --btn-bg: var(--theme-bg, ${v('color.primary.base')});
+        --btn-fg: var(--theme-fg, ${v('color.primary.foreground')});
+        --shade-shadow: ${v('shadow.sm')};
+        background: var(--btn-bg);
+        color: var(--btn-fg);
+        &:hover:not(:disabled) {
+          background: color-mix(in srgb, var(--btn-bg) 88%, var(--btn-fg));
+        }
+        &:active:not(:disabled) {
+          background: color-mix(in srgb, var(--btn-bg) 78%, var(--btn-fg));
+        }
+      }
+
+      /* secondary — outline (shadcn 'outline'): bordered, transparent fill, hover accent. */
+      ${c('kind-secondary')} {
+        --shade-shadow: ${v('shadow.sm')};
+        border-color: ${v('color.border')};
+        background: ${v('color.background')};
+        &:hover:not(:disabled) {
+          background: ${v('color.accent.base')};
+          color: ${v('color.accent.foreground')};
+        }
+        &:active:not(:disabled) {
+          background: color-mix(in srgb, ${v('color.accent.base')} 82%, ${v('color.foreground')});
+        }
+        &:focus-visible {
+          border-color: ${v('color.ring')};
+        }
+      }
+
+      /* text — ghost (shadcn 'ghost'): no border/fill, hover accent. */
+      ${c('kind-text')} {
+        background: transparent;
+        &:hover:not(:disabled) {
+          background: ${v('color.accent.base')};
+          color: ${v('color.accent.foreground')};
+        }
+        &:active:not(:disabled) {
+          background: color-mix(in srgb, ${v('color.accent.base')} 82%, ${v('color.foreground')});
+        }
+      }
+
+      /* Square, ghost-style icon-only button. Kept because the built-in controls (dialog/toast
+       * close, paginator nav, calendar nav, input-field clear, …) reference kind="icon".
+       * NOTE: the paginator sizes its page buttons with an inline
+       * width: calc(1rem + 2 * var(--padding)) — so --padding MUST be defined here or those
+       * buttons collapse to inconsistent widths. */
+      ${c('kind-icon')} {
+        --padding: ${v('size.padding.md')};
+        background: transparent;
+        padding: var(--padding);
+        width: calc(1em + 2 * var(--padding));
+        height: calc(1em + 2 * var(--padding));
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &:hover:not(:disabled) {
+          background: ${v('color.accent.base')};
+          color: ${v('color.accent.foreground')};
+        }
+        &:active:not(:disabled) {
+          background: color-mix(in srgb, ${v('color.accent.base')} 82%, ${v('color.foreground')});
+        }
+      }
+
+      ${c('kind-link')} {
+        background: transparent;
+        /* slot base color doubles as link text color */
+        color: var(--theme-bg, ${v('color.primary.base')});
+        text-decoration: none;
+        text-underline-offset: 4px;
+        &:hover:not(:disabled) {
+          text-decoration: underline;
+        }
+      }
+    `,
+    },
+});