@ngneers/controls-themes 0.0.1-next.0

package/shade/input-field/index.js

@@ -0,0 +1,236 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { animationTemplate, colorsTemplate, fontTemplate, sizesTemplate, } from '@ngneers/controls-themes/shade/base';
+import { inputFieldControlTemplate } from '@ngneers/controls-themes/templates/input-field';
+export const inputFieldStyles = createThemePart({
+    controlTemplate: inputFieldControlTemplate,
+    base: baseStyles.inputField,
+    dependencies: [colorsTemplate, sizesTemplate, animationTemplate, fontTemplate],
+    root: {
+        // Label-kind positioning is preserved verbatim from the structural theme; only colors and
+        // the focus treatment (shadcn box-shadow ring) are restyled to shade tokens.
+        css: ({ v, c, d }) => {
+            const invalidDisabledSelector = `
+        ${c('invalid')}:disabled,
+        .ng-invalid.ng-touched:disabled ${c('root')},
+        ${c('root')}:has(.ng-invalid.ng-touched:disabled),
+        ${c('root')}:has(${d('input', 'invalid')}:disabled),
+        ${c('root')}:has([aria-invalid='true'][disabled])
+      `;
+            const invalidReadonlySelector = `
+          ${c('invalid')}:read-only,
+          .ng-invalid.ng-touched:read-only ${c('root')},
+          ${c('root')}:has(.ng-invalid.ng-touched:read-only),
+          ${c('root')}:has(${d('input', 'invalid')}:read-only),
+          ${c('invalid')}[aria-readonly],
+          .ng-invalid.ng-touched[aria-readonly] ${c('root')},
+          ${c('root')}:has(.ng-invalid.ng-touched[aria-readonly]),
+          ${c('root')}:has(${d('input', 'invalid')}[aria-readonly]),
+          ${c('root')}:has([aria-invalid='true'][aria-readonly='true'])
+        `;
+            function getFloating(klass) {
+                return `${klass}:has(${d('input', 'root')}:focus),
+          ${klass}:has(${d('input', 'root')}:not(${d('input', 'empty')}))`;
+            }
+            return css `
+        ${c('root')} {
+          /* Control text baseline (shadcn 0.875rem) so field-based controls (input, select,
+           * date pickers) don't inherit the larger ambient page size. */
+          font-size: ${v('font.size.sm')};
+          border-radius: ${v('size.rounded.md')};
+          border-color: ${v('color.input')};
+          border-width: 1px;
+          border-style: solid;
+          padding: ${v('size.padding.sm')} ${v('size.padding.md')};
+          background: ${v('color.background')};
+          color: ${v('color.foreground')};
+          box-shadow: none;
+          transition:
+            border-color 0.15s ease-in-out,
+            color 0.15s ease-in-out,
+            box-shadow 0.15s ease-in-out;
+          overflow: auto;
+          /** line-height + vertical padding + border */
+          --baseHeight: calc(1lh + 2 * ${v('size.padding.sm')} + 2px);
+          height: max(var(--baseHeight), fit-content);
+
+          /* regular */
+          &:focus-within {
+            border-color: ${v('color.ring')};
+            box-shadow: 0 0 0 3px color-mix(in srgb, ${v('color.ring')} 50%, transparent);
+          }
+        }
+
+        /* The wrapper owns the border, radius, shadow and focus ring — suppress the nested
+         * input's own so they don't stack into a visible double border/ring (base already
+         * drops the inner border). */
+        ${c('root')} ${d('input', 'root')} {
+          box-shadow: none;
+          border-radius: 0;
+        }
+
+        /* disabled: dim only, never recolored */
+        ${c('disabled')}, ${c('root')}:has(${d('input', 'root')}:disabled), ${c('root')}:has([role='combobox'][disabled]), :disabled ${c('root')},
+        ${c('root')}:has(${d('input', 'root')}[disabled]) {
+          opacity: 0.5;
+          cursor: default;
+          &:focus-within {
+            box-shadow: none;
+          }
+        }
+
+        /* read-only: muted fill, readable, clearly non-editable */
+        ${c('readonly')}, ${c('root')}:has(${d('input', 'root')}:read-only), ${c('root')}:has([aria-readonly='true']) {
+          background: ${v('color.muted.base')};
+          border-color: ${v('color.border')};
+          &:focus-within {
+            border-color: ${v('color.border')};
+            box-shadow: none;
+          }
+        }
+
+        /* invalid */
+        ${c('invalid')}, .ng-invalid.ng-touched ${c('root')}, ${c('root')}:has(.ng-invalid.ng-touched), ${c('root')}:has(${d('input', 'invalid')}), ${c('root')}:has([aria-invalid='true']) {
+          border-color: ${v('color.destructive.base')};
+          &:focus-within {
+            border-color: ${v('color.destructive.base')};
+            box-shadow: 0 0 0 3px
+              color-mix(in srgb, ${v('color.destructive.base')} 20%, transparent);
+          }
+        }
+
+        /* invalid & disabled */
+        ${invalidDisabledSelector} {
+          border-color: ${v('color.destructive.base')};
+        }
+
+        /* invalid & read-only */
+        ${invalidReadonlySelector} {
+          border-color: ${v('color.destructive.base')};
+        }
+
+        ${c('clear-button')} {
+          font-size: calc(1em * 0.9);
+          color: ${v('color.muted.foreground')};
+          &:hover {
+            color: ${v('color.foreground')};
+          }
+        }
+
+        /* Label Styles */
+        ${c('label')} {
+          color: ${v('color.muted.foreground')};
+          font-size: ${v('font.size.xs')};
+          font-weight: ${v('font.weight.medium')};
+
+          /* Sit above field adornments (e.g. spin buttons that bleed to the top border) so a
+           * floated 'on'/'over' label is never painted over by a leading/trailing control. */
+          z-index: 2;
+
+          max-width: 100%;
+          white-space: pre;
+          overflow: hidden;
+          text-overflow: ellipsis;
+
+          transition-duration: ${v('anim.time.fade')};
+          transition-timing-function: ${v('anim.ease.fade')};
+        }
+
+        /* Label over */
+        ${c('labelKind-over')}, ${c('labelKind-floatOver')} {
+          position: relative;
+          ${c('label')} {
+            position: absolute;
+            top: 0;
+            transform: translateY(-100%);
+            left: 0;
+            padding: 0 ${v('size.padding.md')};
+            transition-property: top, transform, font-size;
+          }
+        }
+        /* float: not floating */
+        ${c('labelKind-floatOver')}:not(${getFloating(c('labelKind-floatOver'))}) {
+          ${c('label')} {
+            /* Match the normalized field text size (see root) so the resting label doesn't
+             * render larger than the input text it sits over. */
+            font-size: ${v('font.size.sm')};
+            pointer-events: none;
+            top: 50%;
+            transform: translateY(-50%);
+          }
+        }
+
+        /* Label in */
+        ${c('labelKind-in')}, ${c('labelKind-floatIn')} {
+          position: relative;
+          ${c('root')} {
+            padding-top: 1.2rem;
+            height: max(calc(var(--baseHeight) + 1.2rem), fit-content);
+          }
+          ${c('label')} {
+            position: absolute;
+            padding: ${v('size.padding.sm')} ${v('size.padding.md')};
+            transform: translateY(0);
+            top: 0;
+            transition-property: top, transform, font-size;
+          }
+        }
+        /* float: not floating */
+        ${c('labelKind-floatIn')}:not(${getFloating(c('labelKind-floatIn'))}) {
+          ${c('label')} {
+            font-size: ${v('font.size.sm')};
+            pointer-events: none;
+            top: 50%;
+            transform: translateY(-50%);
+          }
+        }
+
+        /* Label on */
+        ${c('labelKind-on')}, ${c('labelKind-floatOn')} {
+          position: relative;
+          ${c('label')} {
+            position: absolute;
+            padding: ${v('size.padding.sm')} 4px;
+            top: 0;
+            left: ${v('size.padding.md')};
+            max-width: calc(100% - ${v('size.padding.md')} * 2);
+            transform: translateY(-55%);
+            transition-property: top, left, font-size, transform, padding;
+
+            &:before {
+              content: '';
+              z-index: -1;
+              position: absolute;
+              top: 55%;
+              transform: translateY(-50%) scale(1);
+              left: 0;
+              width: 100%;
+              height: 5px;
+              background: ${v('color.background')};
+              transition: transform ${v('anim.time.fade')} ${v('anim.ease.fade')};
+            }
+          }
+        }
+        /* float: not floating */
+        ${c('labelKind-floatOn')}:not(${getFloating(c('labelKind-floatOn'))}) {
+          ${c('label')} {
+            font-size: ${v('font.size.sm')};
+            pointer-events: none;
+            padding: 0 ${v('size.padding.md')};
+            left: 0;
+            transform: translateY(-50%);
+            top: 50%;
+            &:before {
+              transform: translateY(-50%) scale(0);
+            }
+          }
+        }
+
+        /* Label hidden */
+        ${c('labelKind-hidden')} ${c('label')} {
+          display: none;
+        }
+      `;
+        },
+    },
+});

package/shade/item-view/index.d.ts

@@ -0,0 +1,146 @@
+export declare const itemViewStyles: import("@ngneers/controls-themes").ThemePart<"item-view", import("@ngneers/controls-themes").ControlTemplate<"item-view", ["root", "item", "item-overflowing", "more-items", "more-items-hidden", "more-items-default", "hidden-separator"], readonly []>, import("@ngneers/controls-themes").VariableTemplate<"item-view">[], [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/item-view/index.d.ts.map

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

package/shade/item-view/index.js

@@ -0,0 +1,17 @@
+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 { itemViewControlTemplate } from '@ngneers/controls-themes/templates/item-view';
+export const itemViewStyles = createThemePart({
+    controlTemplate: itemViewControlTemplate,
+    base: baseStyles.itemView,
+    dependencies: [colorsTemplate, sizesTemplate, fontTemplate],
+    root: {
+        css: ({ v, c }) => css `
+      ${c('root')} {
+        font-size: ${v('font.size.sm')};
+        gap: 4px;
+      }
+    `,
+    },
+});

package/shade/list-box/index.d.ts

@@ -0,0 +1,152 @@
+export declare const listBoxStyles: import("@ngneers/controls-themes").ThemePart<"list-box", 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 []>;
+}]>, import("@ngneers/controls-themes").VariableTemplate<"list-box">[], [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/list-box/index.d.ts.map

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

package/shade/list-box/index.js

@@ -0,0 +1,76 @@
+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 { listBoxControlTemplate } from '@ngneers/controls-themes/templates/list-box';
+export const listBoxStyles = createThemePart({
+    controlTemplate: listBoxControlTemplate,
+    base: baseStyles.listBox,
+    dependencies: [colorsTemplate, sizesTemplate, fontTemplate],
+    root: {
+        css: ({ v, c, d }) => css `
+      ${c('root')} {
+        border-radius: ${v('size.rounded.md')};
+        border: 1px solid ${v('color.border')};
+        padding: ${v('size.padding.sm')};
+        background: ${v('color.background')};
+        color: ${v('color.foreground')};
+      }
+      ${c('invalid')} {
+        border-color: ${v('color.destructive.base')};
+      }
+      ${c('item')} {
+        padding: ${v('size.padding.sm')} ${v('size.padding.md')};
+        border-radius: ${v('size.rounded.sm')};
+        user-select: none;
+        cursor: default;
+        font-size: ${v('font.size.sm')};
+        &:hover {
+          background: ${v('color.accent.base')};
+          color: ${v('color.accent.foreground')};
+        }
+      }
+      ${c('item-highlighted')} {
+        background: ${v('color.accent.base')};
+        color: ${v('color.accent.foreground')};
+      }
+      ${c('item-selected')}:not(:has(${d('checkbox')})) {
+        background: ${v('color.accent.base')};
+        color: ${v('color.accent.foreground')};
+        &:hover {
+          background: ${v('color.accent.base')};
+        }
+      }
+      ${c('item-disabled')} {
+        opacity: 0.5;
+        &:hover {
+          background: transparent;
+          color: inherit;
+        }
+      }
+      ${c('group')} {
+        padding: ${v('size.padding.sm')} ${v('size.padding.md')};
+        font-weight: ${v('font.weight.medium')};
+        color: ${v('color.muted.foreground')};
+        background: ${v('color.surface.50')};
+        font-size: ${v('font.size.xs')};
+        cursor: default;
+      }
+      ${c('default-group')},
+      ${c('default-item')} {
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      ${c('empty')} {
+        text-align: center;
+        padding: ${v('size.padding.md')};
+        color: ${v('color.muted.foreground')};
+      }
+      ${c('root')} ${d('scroller', 'item')} {
+        gap: ${v('size.padding.md')};
+        align-items: center;
+      }
+    `,
+    },
+});