@ngneers/controls-themes 0.0.1-next.0

package/shade/filter/index.d.ts

@@ -0,0 +1,290 @@
+export declare const filterStyles: import("@ngneers/controls-themes").ThemePart<"filter", import("@ngneers/controls-themes").ControlTemplate<"filter", ["root", "inline", "summary", "icon", "popover-content", "rows", "row", "condition-divider", "footer", "footer-actions", "active-indicator"], readonly [{
+    readonly class: "popover";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+}, {
+    readonly class: "input-field";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+        readonly class: "input";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+        readonly projected: true;
+    }]>;
+}, {
+    readonly class: "value";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+        readonly class: "input";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+        readonly projected: true;
+    }]>;
+}, {
+    readonly class: "operator";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+        readonly class: "input";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+        readonly projected: true;
+    }]>;
+}, {
+    readonly class: "list-select";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
+        readonly class: "popover";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+    }, {
+        readonly class: "list-box";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"list-box", ["root", "empty", "invalid", "item", "group", "default-item", "default-group", "item-selected", "item-highlighted", "item-disabled"], readonly [{
+            readonly class: "checkbox";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "box-icon-visible", "invalid"], readonly []>;
+        }, {
+            readonly class: "scroller";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"scroller", ["root", "virtual", "item", "item-sticky"], readonly []>;
+        }]>;
+    }, {
+        readonly class: "filter";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+            readonly class: "input";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+            readonly projected: true;
+        }]>;
+    }]>;
+}, {
+    readonly class: "operator-select";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
+        readonly class: "popover";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+    }, {
+        readonly class: "list-box";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"list-box", ["root", "empty", "invalid", "item", "group", "default-item", "default-group", "item-selected", "item-highlighted", "item-disabled"], readonly [{
+            readonly class: "checkbox";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "box-icon-visible", "invalid"], readonly []>;
+        }, {
+            readonly class: "scroller";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"scroller", ["root", "virtual", "item", "item-sticky"], readonly []>;
+        }]>;
+    }, {
+        readonly class: "filter";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+            readonly class: "input";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+            readonly projected: true;
+        }]>;
+    }]>;
+}, {
+    readonly class: "calendar";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"calendar", ["root", "inline", "invalid", "details", "header", "navigation", "days", "week-day", "day", "day-selected", "day-today", "day-other-month", "months", "month", "time", "input-field"], readonly [{
+        readonly class: "input";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"mask-input", ["root", "section", "section-active", "section-placeholder", "separator", "proxy", "sr-only"], readonly []>;
+    }, {
+        readonly class: "trigger-icon";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"icon", ["root", "default"], readonly []>;
+    }, {
+        readonly class: "popover";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+    }, {
+        readonly class: "previous";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+    }, {
+        readonly class: "next";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+    }, {
+        readonly class: "current-month";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
+            readonly class: "popover";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+        }, {
+            readonly class: "list-box";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"list-box", ["root", "empty", "invalid", "item", "group", "default-item", "default-group", "item-selected", "item-highlighted", "item-disabled"], readonly [{
+                readonly class: "checkbox";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "box-icon-visible", "invalid"], readonly []>;
+            }, {
+                readonly class: "scroller";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"scroller", ["root", "virtual", "item", "item-sticky"], readonly []>;
+            }]>;
+        }, {
+            readonly class: "filter";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+                readonly class: "input";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+                readonly projected: true;
+            }]>;
+        }]>;
+    }, {
+        readonly class: "current-year";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
+            readonly class: "popover";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+        }, {
+            readonly class: "list-box";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"list-box", ["root", "empty", "invalid", "item", "group", "default-item", "default-group", "item-selected", "item-highlighted", "item-disabled"], readonly [{
+                readonly class: "checkbox";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "box-icon-visible", "invalid"], readonly []>;
+            }, {
+                readonly class: "scroller";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"scroller", ["root", "virtual", "item", "item-sticky"], readonly []>;
+            }]>;
+        }, {
+            readonly class: "filter";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+                readonly class: "input";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+                readonly projected: true;
+            }]>;
+        }]>;
+    }, {
+        readonly class: "current-month-field";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+            readonly class: "input";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+            readonly projected: true;
+        }]>;
+    }, {
+        readonly class: "current-year-field";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+            readonly class: "input";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+            readonly projected: true;
+        }]>;
+    }]>;
+}, {
+    readonly class: "input";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+}, {
+    readonly class: "remove-btn";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+}, {
+    readonly class: "add-button";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+}, {
+    readonly class: "cancel-button";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+}, {
+    readonly class: "apply-button";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+}, {
+    readonly class: "clear-button";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+}]>, import("@ngneers/controls-themes").VariableTemplate<"filter">[], [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;
+    };
+}>]>;
+//# sourceMappingURL=index.d.ts.map

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

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

package/shade/filter/index.js

@@ -0,0 +1,80 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { colorsTemplate, sizesTemplate } from '@ngneers/controls-themes/shade/base';
+import { filterControlTemplate } from '@ngneers/controls-themes/templates/filter';
+export const filterStyles = createThemePart({
+    controlTemplate: filterControlTemplate,
+    base: baseStyles.filter,
+    dependencies: [colorsTemplate, sizesTemplate],
+    root: {
+        // color.border swaps automatically between schemes, so no separate dark block is needed.
+        css: ({ v, c, d }) => css `
+      ${c('icon')} {
+        cursor: pointer;
+      }
+      ${c('popover-content')} {
+        padding: ${v('size.padding.lg')};
+        gap: ${v('size.padding.md')};
+      }
+      ${c('rows')} {
+        gap: ${v('size.padding.sm')};
+      }
+      ${c('row')} {
+        gap: ${v('size.padding.sm')};
+        flex-wrap: nowrap;
+      }
+      ${d('operator')} {
+        flex: 0 1 auto;
+        min-width: 0;
+      }
+      ${d('value')} {
+        flex: 1 1 0;
+        min-width: 80px;
+      }
+      ${d('remove-btn')} {
+        flex: 0 0 auto;
+      }
+      ${c('condition-divider')} {
+        gap: ${v('size.padding.sm')};
+        padding: ${v('size.padding.sm')} 0;
+        font-size: 0.75rem;
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: ${v('color.muted.foreground')};
+        cursor: pointer;
+        transition: color 0.15s ease;
+      }
+      ${c('condition-divider')}:hover {
+        color: ${v('color.foreground')};
+      }
+      ${c('condition-divider')}::before, ${c('condition-divider')}::after {
+        background: ${v('color.border')};
+      }
+      ${c('footer')} {
+        padding-top: ${v('size.padding.md')};
+        border-top: 1px solid ${v('color.border')};
+        gap: ${v('size.padding.sm')};
+      }
+      ${c('footer-actions')} {
+        gap: ${v('size.padding.sm')};
+      }
+      ${c('active-indicator')} {
+        top: -2px;
+        right: -2px;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: ${v('color.primary.base')};
+      }
+      ${c('summary')} {
+        padding-right: ${v('size.padding.sm')};
+      }
+      ${c('inline')} {
+        display: flex;
+        flex-direction: column;
+        gap: ${v('size.padding.md')};
+      }
+    `,
+    },
+});

package/shade/hint/index.d.ts

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

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

package/shade/hint/index.js

@@ -0,0 +1,43 @@
+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 { hintControlTemplate } from '@ngneers/controls-themes/templates/hint';
+export const hintStyles = createThemePart({
+    controlTemplate: hintControlTemplate,
+    base: baseStyles.hint,
+    dependencies: [colorsTemplate, sizesTemplate, fontTemplate],
+    root: {
+        // Shade's palette is intentionally monochrome, so it has no info/success/warning
+        // color tokens. Hints need semantic signalling, so those three kinds introduce
+        // fixed accessible hues here; `error` reuses the destructive token for cohesion
+        // and `default` is muted body text.
+        css: ({ v, c }) => css `
+      ${c('root')} {
+        color: ${v('color.muted.foreground')};
+        font-size: ${v('font.size.xs')};
+        line-height: ${v('font.size.xs')};
+      }
+
+      ${c('icon')} {
+        color: inherit;
+        font-size: 0.85rem;
+      }
+
+      ${c('kind-info')} {
+        color: #2563eb;
+      }
+
+      ${c('kind-success')} {
+        color: #16a34a;
+      }
+
+      ${c('kind-warning')} {
+        color: #d97706;
+      }
+
+      ${c('kind-error')} {
+        color: ${v('color.destructive.base')};
+      }
+    `,
+    },
+});

package/shade/icon/index.d.ts

@@ -0,0 +1,2 @@
+export declare const iconStyles: import("@ngneers/controls-themes").ThemePart<"icon", import("@ngneers/controls-themes").ControlTemplate<"icon", ["root", "default"], readonly []>, import("@ngneers/controls-themes").VariableTemplate<"icon">[], []>;
+//# sourceMappingURL=index.d.ts.map

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

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

package/shade/icon/index.js

@@ -0,0 +1,12 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { iconControlTemplate } from '@ngneers/controls-themes/templates/icon';
+export const iconStyles = createThemePart({
+    controlTemplate: iconControlTemplate,
+    base: baseStyles.icon,
+    dependencies: [],
+    root: {
+        // Icons stay undecorated and inherit `currentColor` via the base part (svg fill: currentColor).
+        css: () => css ``,
+    },
+});