@ngneers/controls-themes 0.0.1-pre2

package/nova/slider/index.js

@@ -0,0 +1,98 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { colorsTemplate, sizesTemplate } from '@ngneers/controls-themes/nova/base';
+import { sliderControlTemplate } from '@ngneers/controls-themes/templates/slider';
+export const sliderStyles = createThemePart({
+    controlTemplate: sliderControlTemplate,
+    base: baseStyles.slider,
+    dependencies: [colorsTemplate, sizesTemplate],
+    root: {
+        css: ({ v, c, d }) => css `
+      ${c('root')} {
+        --trackThickness: 0.5rem;
+        --thumbBorderSize: 0.125rem;
+        --thumbSize: calc(var(--thumbBorderSize) * 2 + 1rem);
+        &:focus-visible {
+          outline: none;
+          ${c('thumb')} {
+            outline: 0.4rem solid ${v('color.surface.900')};
+            outline-offset: calc(-1px - var(--thumbBorderSize));
+          }
+        }
+      }
+      ${c('track')} {
+        background: ${v('color.surface.200')};
+        border-radius: ${v('size.rounded.md')};
+      }
+      ${c('fill')} {
+        background: ${v('color.surface.900')};
+        border-radius: ${v('size.rounded.md')};
+      }
+      ${c('thumb')} {
+        background: ${v('color.surface.50')};
+        border-radius: ${v('size.rounded.full')};
+        border: var(--thumbBorderSize) solid ${v('color.surface.900')};
+      }
+      ${c('root')}:not([disabled]):not([aria-readonly='true']) {
+        ${c('thumb')} {
+          cursor: grab;
+          &:active {
+            cursor: grabbing;
+          }
+        }
+      }
+      ${c('invalid')} {
+        ${c('track')} {
+          background: ${v('color.error.200')};
+        }
+        ${c('thumb')} {
+          border-color: ${v('color.error.500')};
+        }
+        ${c('fill')} {
+          background: ${v('color.error.500')};
+        }
+      }
+      ${c('root')}[disabled] {
+        ${c('track')} {
+          background: ${v('color.surface.100')};
+        }
+        ${c('thumb')} {
+          border-color: ${v('color.surface.200')};
+        }
+        ${c('fill')} {
+          background: ${v('color.surface.200')};
+        }
+        &${c('invalid')} {
+          ${c('track')} {
+            background: ${v('color.error.100')};
+          }
+          ${c('thumb')} {
+            border-color: ${v('color.error.200')};
+          }
+          ${c('fill')} {
+            background: ${v('color.error.200')};
+          }
+        }
+      }
+      ${c('root')}[aria-readonly='true'] {
+        ${c('thumb')} {
+          border-color: ${v('color.surface.700')};
+        }
+        ${c('fill')} {
+          background: ${v('color.surface.700')};
+        }
+        &${c('invalid')} {
+          ${c('track')} {
+            background: ${v('color.error.100')};
+          }
+          ${c('thumb')} {
+            border-color: ${v('color.error.300')};
+          }
+          ${c('fill')} {
+            background: ${v('color.error.300')};
+          }
+        }
+      }
+    `,
+    },
+});

package/nova/spinner/index.d.ts

@@ -0,0 +1,133 @@
+export declare const spinnerStyles: import("@ngneers/controls-themes").ThemePart<"spinner", import("@ngneers/controls-themes").ControlTemplate<"spinner", ["root", "circle", "svg", `color-${string}`, "centered"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>, import("@ngneers/controls-themes").VariableTemplate<"spinner">[], [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;
+    };
+}>]>;
+//# sourceMappingURL=index.d.ts.map

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

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

package/nova/spinner/index.js

@@ -0,0 +1,57 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { colorsTemplate, sizesTemplate, themedColors } from '@ngneers/controls-themes/nova/base';
+import { spinnerControlTemplate } from '@ngneers/controls-themes/templates/spinner';
+export const spinnerStyles = createThemePart({
+    controlTemplate: spinnerControlTemplate,
+    base: baseStyles.spinner,
+    dependencies: [colorsTemplate, sizesTemplate],
+    root: {
+        css: ({ v, c, d }) => css `
+      ${themedColors(c, v)}
+
+      ${c('root')} {
+        color: var(--theme-color-500);
+      }
+
+      ${c('svg')} {
+        animation: ${c('svg', 'animation')} 2000ms linear infinite;
+        transform-origin: 50% 50%;
+      }
+      ${c('circle')} {
+        --strokeWidth: var(--thickness, calc(var(--size) * 1px / 90 + 32px / 9));
+        --r: calc(var(--size) * 1px / 2 - var(--strokeWidth) / 2);
+        --1deg: calc(2 * pi * var(--r) / 360);
+        r: var(--r);
+        stroke-width: var(--strokeWidth);
+        animation: ${c('circle', 'animation')} 1400ms ease-in-out infinite;
+        transform-origin: 50% 50%;
+        stroke: currentColor;
+
+        stroke-linecap: round;
+      }
+      @keyframes ${c('circle', 'animation')} {
+        0% {
+          stroke-dasharray: calc(5 * var(--1deg)) calc(355 * var(--1deg));
+          transform: rotate(0);
+        }
+        50% {
+          stroke-dasharray: calc(270 * var(--1deg)) calc(90 * var(--1deg));
+          transform: rotate(90deg);
+        }
+        100% {
+          stroke-dasharray: calc(5 * var(--1deg)) calc(355 * var(--1deg));
+          transform: rotate(360deg);
+        }
+      }
+      @keyframes ${c('svg', 'animation')} {
+        0% {
+          transform: rotate(0);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    `,
+    },
+});

package/nova/splitter/index.d.ts

@@ -0,0 +1,120 @@
+export declare const splitterStyles: import("@ngneers/controls-themes").ThemePart<"splitter", import("@ngneers/controls-themes").ControlTemplate<"splitter", ["root", "horizontal", "vertical", "panel", "divider", "divider-handle", "dragging", "divider-dragging"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>, import("@ngneers/controls-themes").VariableTemplate<"splitter">[], [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;
+    };
+}>]>;
+//# sourceMappingURL=index.d.ts.map

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

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

package/nova/splitter/index.js

@@ -0,0 +1,37 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { colorsTemplate } from '@ngneers/controls-themes/nova/base';
+import { splitterControlTemplate } from '@ngneers/controls-themes/templates/splitter';
+export const splitterStyles = createThemePart({
+    controlTemplate: splitterControlTemplate,
+    base: baseStyles.splitter,
+    dependencies: [colorsTemplate],
+    root: {
+        css: ({ v, c }) => css `
+      ${c('divider-handle')} {
+        background: ${v('color.surface.100')};
+        &:hover {
+          background: ${v('color.surface.200')};
+        }
+        &:focus {
+          background: ${v('color.surface.300')};
+        }
+        &:active {
+          background: ${v('color.surface.400')};
+        }
+      }
+
+      ${c('horizontal')} {
+        ${c('divider')}, ${c('divider-handle')} {
+          width: 0.25rem;
+        }
+      }
+
+      ${c('vertical')} {
+        ${c('divider')}, ${c('divider-handle')} {
+          height: 0.25rem;
+        }
+      }
+    `,
+    },
+});

package/nova/switch/index.d.ts

@@ -0,0 +1,142 @@
+export declare const switchStyles: import("@ngneers/controls-themes").ThemePart<"switch", import("@ngneers/controls-themes").ControlTemplate<"switch", ["root", "input", "track", "track-checked", "thumb", "invalid"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>, import("@ngneers/controls-themes").VariableTemplate<"switch">[], [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/switch/index.d.ts.map

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

package/nova/switch/index.js

@@ -0,0 +1,61 @@
+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 { switchControlTemplate } from '@ngneers/controls-themes/templates/switch';
+export const switchStyles = createThemePart({
+    controlTemplate: switchControlTemplate,
+    base: baseStyles.switch,
+    dependencies: [colorsTemplate, sizesTemplate, animationTemplate],
+    root: {
+        css: ({ v, c, d }) => css `
+      ${c('track')} {
+        --height: 1.5rem;
+        width: 3rem;
+        height: var(--height);
+        background-color: ${v('color.surface.300')};
+        border-radius: calc(var(--height) / 2);
+        padding: 4px;
+        transition:
+          background-color ${v('anim.time.snappyFade')} ${v('anim.ease.snappyFade')},
+          padding ${v('anim.time.snappyFade')} ${v('anim.ease.snappyFade')};
+      }
+      ${c('input')} {
+        cursor: pointer;
+      }
+      ${c('input')}[disabled], ${c('input')}[aria-readonly] {
+        cursor: default;
+      }
+      ${c('thumb')} {
+        height: 100%;
+        aspect-ratio: 1 / 1;
+        border-radius: ${v('size.rounded.full')};
+        background-color: ${v('color.surface.50')};
+        transition: transform ${v('anim.time.snappyFade')} ${v('anim.ease.snappyFade')};
+      }
+      ${c('track-checked')} {
+        background-color: ${v('color.primary.500')};
+        padding: 2px;
+      }
+      ${c('track-checked')} ${c('thumb')} {
+        transform: translateX(1.5rem);
+      }
+
+      ${c('root')}:has(${c('input')}[disabled]) ${c('track')} {
+        background-color: ${v('color.disabled.background')};
+      }
+      ${c('invalid')} ${c('track')} {
+        background-color: ${v('color.invalid.border')};
+      }
+      ${c('invalid')}:has(${c('input')}[disabled]) ${c('track')} {
+        background-color: ${v('color.error.200')};
+      }
+      ${c('root')}:has(${c('input')}[aria-readonly]) ${c('thumb')} {
+        background-color: ${v('color.surface.100')};
+      }
+
+      ${c('root')}:has(${c('input')}:focus-visible) ${c('track')} {
+        outline: 2px solid ${v('color.text')};
+      }
+    `,
+    },
+});