@ngneers/controls-themes 0.0.1-pre2

package/nova/calendar/index.d.ts

@@ -0,0 +1,150 @@
+export declare const calendarStyles: import("@ngneers/controls-themes").ThemePart<"calendar", import("@ngneers/controls-themes").ControlTemplate<"calendar", ["root", "inline", "input", "input-field", "details", "header", "navigation", "days", "week-day", "day", "day-selected", "day-today", "day-other-month", "months", "month", "current-month", "current-year", "time", "next", "previous"], readonly [import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>, import("@ngneers/controls-themes").ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter", "filter-icon", "list-box", "list-box-empty"], readonly [import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing", "anim-in", "anim-out"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>, import("@ngneers/controls-themes").ControlTemplate<"list-box", ["root", "empty", "invalid", "item", "group", "default-item", "default-group", "scroller", "item-selected", "item-highlighted"], readonly [import("@ngneers/controls-themes").ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "anim-box-icon-enter", "anim-box-icon-leave", "invalid"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>, import("@ngneers/controls-themes").ControlTemplate<"scroller", ["root", "virtual", "item", "spacer", "item-sticky"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>]>, import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>]>]>, import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>, import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>]>]>, import("@ngneers/controls-themes").VariableTemplate<"calendar">[], [import("@ngneers/controls-themes").VariableTemplate<"color", {
+    background: null;
+    border: null;
+    text: null;
+    disabled: {
+        text: null;
+        border: null;
+        background: null;
+    };
+    invalid: {
+        text: null;
+        border: null;
+        background: null;
+    };
+    accent: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    error: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    info: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    primary: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    secondary: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    success: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    surface: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    warning: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': 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", {
+    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/nova/calendar/index.d.ts.map

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

package/nova/calendar/index.js

@@ -0,0 +1,98 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { colorsTemplate, sizesTemplate, fontTemplate } from '@ngneers/controls-themes/nova/base';
+import { calendarControlTemplate } from '@ngneers/controls-themes/templates/calendar';
+export const calendarStyles = createThemePart({
+    controlTemplate: calendarControlTemplate,
+    base: baseStyles.calendar,
+    dependencies: [colorsTemplate, sizesTemplate, fontTemplate],
+    root: {
+        css: ({ v, c, d }) => css `
+      ${c('root')} {
+        --icon-size: 14px;
+        background: ${v('color.background')};
+      }
+      ${c('inline')} {
+        padding: ${v('size.padding.md')};
+        border: 1px solid ${v('color.surface.300')};
+        border-radius: ${v('size.rounded.md')};
+      }
+      ${c('details')} {
+        gap: ${v('size.padding.md')};
+        min-width: 300px;
+      }
+      ${c('header')} {
+        gap: ${v('size.padding.sm')};
+        padding: ${v('size.padding.md')};
+        padding-top: 0;
+        border-bottom: 1px solid ${v('color.surface.300')};
+        justify-content: space-between;
+      }
+      ${c('navigation')} {
+        align-items: center;
+        gap: ${v('size.padding.sm')};
+      }
+      ${c('days')} {
+        gap: ${v('size.padding.md')};
+      }
+      ${c('months')} {
+        gap: ${v('size.padding.sm')};
+      }
+      ${c('week-day')} {
+        font-weight: ${v('font.weight.semibold')};
+      }
+      ${c('day')} {
+        cursor: pointer;
+        width: 2rem;
+        height: 2rem;
+        background: transparent;
+        border-width: 0;
+        border-radius: ${v('size.rounded.full')};
+        &:hover {
+          background: ${v('color.surface.100')};
+        }
+        &:focus {
+          background: ${v('color.surface.200')};
+        }
+        &:active {
+          background: ${v('color.surface.300')};
+        }
+      }
+      ${c('day-today')} {
+        font-weight: ${v('font.weight.bold')};
+      }
+      ${c('day-other-month')} {
+        color: ${v('color.surface.400')};
+      }
+      ${c('day-selected')} {
+        background: ${v('color.surface.800')};
+        color: ${v('color.surface.50')};
+        &${c('day-other-month')} {
+          background: ${v('color.surface.400')};
+        }
+        &:not(${c('day-other-month')}):hover,
+        &:not(${c('day-other-month')}):focus,
+        &:not(${c('day-other-month')}):active {
+          background: ${v('color.surface.800')};
+        }
+      }
+      ${c('current-month')} {
+        width: 100%;
+      }
+      ${c('current-year')}${d('select', 'root')} ${d('input', 'root')} {
+        width: 3rem;
+      }
+      ${c('time')} {
+        border-top: 1px solid ${v('color.surface.300')};
+        width: 100%;
+        padding-top: ${v('size.padding.md')};
+        display: flex;
+        justify-content: center;
+        > * {
+          width: 120px;
+          display: block;
+        }
+      }
+    `,
+    },
+});

package/nova/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", "anim-box-icon-enter", "anim-box-icon-leave", "invalid"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>, import("@ngneers/controls-themes").VariableTemplate<"checkbox">[], [import("@ngneers/controls-themes").VariableTemplate<"color", {
+    background: null;
+    border: null;
+    text: null;
+    disabled: {
+        text: null;
+        border: null;
+        background: null;
+    };
+    invalid: {
+        text: null;
+        border: null;
+        background: null;
+    };
+    accent: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    error: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    info: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    primary: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    secondary: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    success: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    surface: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    warning: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': 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<"anim", {
+    time: {
+        fade: null;
+        snappyFade: null;
+    };
+    ease: {
+        fade: null;
+        snappyFade: null;
+    };
+}>]>;
+//# sourceMappingURL=index.d.ts.map

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

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

package/nova/checkbox/index.js

@@ -0,0 +1,65 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { animationTemplate, colorsTemplate, sizesTemplate, } from '@ngneers/controls-themes/nova/base';
+import { checkboxControlTemplate } from '@ngneers/controls-themes/templates/checkbox';
+export const checkboxStyles = createThemePart({
+    controlTemplate: checkboxControlTemplate,
+    base: baseStyles.checkbox,
+    dependencies: [colorsTemplate, sizesTemplate, animationTemplate],
+    root: {
+        css: ({ v, c, d }) => css `
+      ${c('box')} {
+        width: 1.5rem;
+        height: 1.5rem;
+        border: 2px solid ${v('color.border')};
+        border-radius: ${v('size.rounded.sm')};
+      }
+      ${c('root')}:has(${c('input')}[disabled]) ${c('box')} {
+        background-color: ${v('color.disabled.background')};
+        border-color: ${v('color.disabled.border')};
+      }
+      ${c('root')}:has(${c('input')}[aria-readonly]) ${c('box')} {
+        border-color: ${v('color.disabled.border')};
+      }
+      ${c('invalid')} ${c('box')} {
+        background-color: ${v('color.invalid.background')};
+        border-color: ${v('color.invalid.border')};
+      }
+      ${c('invalid')}:has(${c('input')}[disabled]) ${c('box')} {
+        background-color: ${v('color.disabled.background')};
+        border-color: ${v('color.error.300')};
+      }
+      ${c('invalid')}:has(${c('input')}[aria-readonly]) ${c('box')} {
+        background-color: ${v('color.invalid.background')};
+        border-color: ${v('color.error.300')};
+      }
+
+      ${c('root')}:has(${c('input')}:focus-visible) ${c('box')} {
+        outline: 2px solid ${v('color.text')};
+      }
+
+      ${c('anim-box-icon-enter')} {
+        /* prettier-ignore */
+        animation: ${c('anim-box-icon-enter', 'animation')} ${v('anim.time.snappyFade')} ${v('anim.ease.snappyFade')};
+        pointer-events: none;
+      }
+      ${c('anim-box-icon-leave')} {
+        /* prettier-ignore */
+        animation: ${c('anim-box-icon-enter', 'animation')} ${v('anim.time.snappyFade')} ${v('anim.ease.snappyFade')} reverse;
+        pointer-events: none;
+        position: absolute;
+      }
+
+      @keyframes ${c('anim-box-icon-enter', 'animation')} {
+        from {
+          opacity: 0;
+          transform: scale(0.8);
+        }
+        to {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+    `,
+    },
+});

package/nova/chip/index.d.ts

@@ -0,0 +1,150 @@
+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").ControlTemplate<string, string[], readonly any[]>[]>, import("@ngneers/controls-themes").VariableTemplate<"chip">[], [import("@ngneers/controls-themes").VariableTemplate<"color", {
+    background: null;
+    border: null;
+    text: null;
+    disabled: {
+        text: null;
+        border: null;
+        background: null;
+    };
+    invalid: {
+        text: null;
+        border: null;
+        background: null;
+    };
+    accent: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    error: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    info: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    primary: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    secondary: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    success: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    surface: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    warning: {
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': 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", {
+    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/nova/chip/index.d.ts.map

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

package/nova/chip/index.js

@@ -0,0 +1,78 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { colorsTemplate, fontTemplate, sizesTemplate, themedColors, } from '@ngneers/controls-themes/nova/base';
+import { chipControlTemplate } from '@ngneers/controls-themes/templates/chip';
+export const chipStyles = createThemePart({
+    controlTemplate: chipControlTemplate,
+    base: baseStyles.chip,
+    dependencies: [colorsTemplate, sizesTemplate, fontTemplate],
+    root: {
+        css: ({ v, c, d }) => css `
+      ${themedColors(c, v)}
+
+      ${c('root')} {
+        background: var(--theme-color-400);
+        border-radius: 999rem; /* Creates a pill shape */
+      }
+
+      ${c('content')} {
+        padding: ${v('size.padding.sm')} ${v('size.padding.lg')};
+        font-size: ${v('font.size.sm')};
+        line-height: 1.25rem;
+        background: none;
+        color: ${v('color.text')};
+        border: none;
+      }
+
+      ${c('close-button')} {
+        cursor: pointer;
+        padding: 0 ${v('size.padding.md')} 0 calc(${v('size.padding.sm')} / 2);
+        background: none;
+        color: ${v('color.text')};
+        border: none;
+        border-top-right-radius: 999rem; /* Creates a pill shape */
+        border-bottom-right-radius: 999rem; /* Creates a pill shape */
+        font-size: 0.75rem;
+
+        &:focus {
+          opacity: 0.8;
+        }
+
+        &:hover {
+          opacity: 0.7;
+        }
+
+        &:active {
+          opacity: 0.5;
+        }
+      }
+
+      ${c('actionable')} {
+        ${c('content')} {
+          cursor: pointer;
+          border-radius: 999rem; /* Creates a pill shape */
+        }
+
+        &:has(${c('content')}:focus) {
+          background: var(--theme-color-200);
+        }
+
+        &:has(${c('content')}:hover) {
+          background: var(--theme-color-300);
+        }
+
+        &:has(${c('content')}:active) {
+          background: var(--theme-color-100);
+        }
+      }
+
+      ${c('closable')} {
+        ${c('content')} {
+          padding-right: calc(${v('size.padding.sm')} / 2);
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      }
+    `,
+    },
+});