@ngneers/controls-themes 0.0.1-next.0

package/nova/avatar/index.d.ts

@@ -0,0 +1,511 @@
+export declare const avatarStyles: import("@ngneers/controls-themes").ThemePart<"avatar", import("@ngneers/controls-themes").ControlTemplate<"avatar", ["root", "image", "initials", `kind-${string}`], readonly []>, import("@ngneers/controls-themes").VariableTemplate<"avatar">[], [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;
+    };
+    primary: {
+        '700-on-50': null;
+        '600-on-100': null;
+        '50-contrast': null;
+        '100-contrast': null;
+        '200-contrast': null;
+        '300-contrast': null;
+        '400-contrast': null;
+        '500-contrast': null;
+        '600-contrast': null;
+        '700-contrast': null;
+        '800-contrast': null;
+        '900-contrast': null;
+        '950-contrast': null;
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    secondary: {
+        '700-on-50': null;
+        '600-on-100': null;
+        '50-contrast': null;
+        '100-contrast': null;
+        '200-contrast': null;
+        '300-contrast': null;
+        '400-contrast': null;
+        '500-contrast': null;
+        '600-contrast': null;
+        '700-contrast': null;
+        '800-contrast': null;
+        '900-contrast': null;
+        '950-contrast': null;
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    accent: {
+        '700-on-50': null;
+        '600-on-100': null;
+        '50-contrast': null;
+        '100-contrast': null;
+        '200-contrast': null;
+        '300-contrast': null;
+        '400-contrast': null;
+        '500-contrast': null;
+        '600-contrast': null;
+        '700-contrast': null;
+        '800-contrast': null;
+        '900-contrast': null;
+        '950-contrast': null;
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    error: {
+        '700-on-50': null;
+        '600-on-100': null;
+        '50-contrast': null;
+        '100-contrast': null;
+        '200-contrast': null;
+        '300-contrast': null;
+        '400-contrast': null;
+        '500-contrast': null;
+        '600-contrast': null;
+        '700-contrast': null;
+        '800-contrast': null;
+        '900-contrast': null;
+        '950-contrast': null;
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    warning: {
+        '700-on-50': null;
+        '600-on-100': null;
+        '50-contrast': null;
+        '100-contrast': null;
+        '200-contrast': null;
+        '300-contrast': null;
+        '400-contrast': null;
+        '500-contrast': null;
+        '600-contrast': null;
+        '700-contrast': null;
+        '800-contrast': null;
+        '900-contrast': null;
+        '950-contrast': null;
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    info: {
+        '700-on-50': null;
+        '600-on-100': null;
+        '50-contrast': null;
+        '100-contrast': null;
+        '200-contrast': null;
+        '300-contrast': null;
+        '400-contrast': null;
+        '500-contrast': null;
+        '600-contrast': null;
+        '700-contrast': null;
+        '800-contrast': null;
+        '900-contrast': null;
+        '950-contrast': null;
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    success: {
+        '700-on-50': null;
+        '600-on-100': null;
+        '50-contrast': null;
+        '100-contrast': null;
+        '200-contrast': null;
+        '300-contrast': null;
+        '400-contrast': null;
+        '500-contrast': null;
+        '600-contrast': null;
+        '700-contrast': null;
+        '800-contrast': null;
+        '900-contrast': null;
+        '950-contrast': null;
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    surface: {
+        '700-on-50': null;
+        '600-on-100': null;
+        '50-contrast': null;
+        '100-contrast': null;
+        '200-contrast': null;
+        '300-contrast': null;
+        '400-contrast': null;
+        '500-contrast': null;
+        '600-contrast': null;
+        '700-contrast': null;
+        '800-contrast': null;
+        '900-contrast': null;
+        '950-contrast': null;
+        '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;
+    };
+}>]>;
+export declare const avatarGroupStyles: import("@ngneers/controls-themes").ThemePart<"avatar-group", import("@ngneers/controls-themes").ControlTemplate<"avatar-group", ["root", `kind-${string}`], readonly [{
+    readonly class: "avatar";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"avatar", ["root", "image", "initials", `kind-${string}`], readonly []>;
+    readonly projected: true;
+}]>, import("@ngneers/controls-themes").VariableTemplate<"avatar-group">[], [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;
+    };
+    primary: {
+        '700-on-50': null;
+        '600-on-100': null;
+        '50-contrast': null;
+        '100-contrast': null;
+        '200-contrast': null;
+        '300-contrast': null;
+        '400-contrast': null;
+        '500-contrast': null;
+        '600-contrast': null;
+        '700-contrast': null;
+        '800-contrast': null;
+        '900-contrast': null;
+        '950-contrast': null;
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    secondary: {
+        '700-on-50': null;
+        '600-on-100': null;
+        '50-contrast': null;
+        '100-contrast': null;
+        '200-contrast': null;
+        '300-contrast': null;
+        '400-contrast': null;
+        '500-contrast': null;
+        '600-contrast': null;
+        '700-contrast': null;
+        '800-contrast': null;
+        '900-contrast': null;
+        '950-contrast': null;
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    accent: {
+        '700-on-50': null;
+        '600-on-100': null;
+        '50-contrast': null;
+        '100-contrast': null;
+        '200-contrast': null;
+        '300-contrast': null;
+        '400-contrast': null;
+        '500-contrast': null;
+        '600-contrast': null;
+        '700-contrast': null;
+        '800-contrast': null;
+        '900-contrast': null;
+        '950-contrast': null;
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    error: {
+        '700-on-50': null;
+        '600-on-100': null;
+        '50-contrast': null;
+        '100-contrast': null;
+        '200-contrast': null;
+        '300-contrast': null;
+        '400-contrast': null;
+        '500-contrast': null;
+        '600-contrast': null;
+        '700-contrast': null;
+        '800-contrast': null;
+        '900-contrast': null;
+        '950-contrast': null;
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    warning: {
+        '700-on-50': null;
+        '600-on-100': null;
+        '50-contrast': null;
+        '100-contrast': null;
+        '200-contrast': null;
+        '300-contrast': null;
+        '400-contrast': null;
+        '500-contrast': null;
+        '600-contrast': null;
+        '700-contrast': null;
+        '800-contrast': null;
+        '900-contrast': null;
+        '950-contrast': null;
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    info: {
+        '700-on-50': null;
+        '600-on-100': null;
+        '50-contrast': null;
+        '100-contrast': null;
+        '200-contrast': null;
+        '300-contrast': null;
+        '400-contrast': null;
+        '500-contrast': null;
+        '600-contrast': null;
+        '700-contrast': null;
+        '800-contrast': null;
+        '900-contrast': null;
+        '950-contrast': null;
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    success: {
+        '700-on-50': null;
+        '600-on-100': null;
+        '50-contrast': null;
+        '100-contrast': null;
+        '200-contrast': null;
+        '300-contrast': null;
+        '400-contrast': null;
+        '500-contrast': null;
+        '600-contrast': null;
+        '700-contrast': null;
+        '800-contrast': null;
+        '900-contrast': null;
+        '950-contrast': null;
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    surface: {
+        '700-on-50': null;
+        '600-on-100': null;
+        '50-contrast': null;
+        '100-contrast': null;
+        '200-contrast': null;
+        '300-contrast': null;
+        '400-contrast': null;
+        '500-contrast': null;
+        '600-contrast': null;
+        '700-contrast': null;
+        '800-contrast': null;
+        '900-contrast': null;
+        '950-contrast': null;
+        '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/avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/nova/avatar/index.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAoBvB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwB5B,CAAC"}

package/nova/avatar/index.js

@@ -0,0 +1,50 @@
+import { autoContrast, createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { colorsTemplate, fontTemplate, sizesTemplate } from '@ngneers/controls-themes/nova/base';
+import { avatarControlTemplate, avatarGroupControlTemplate, } from '@ngneers/controls-themes/templates/avatar';
+export const avatarStyles = createThemePart({
+    controlTemplate: avatarControlTemplate,
+    base: baseStyles.avatar,
+    dependencies: [colorsTemplate, sizesTemplate, fontTemplate],
+    root: {
+        css: ({ v, c }) => css `
+      ${c('root')} {
+        --avatar-bg: var(--color, ${v('color.primary.500')});
+        border-radius: ${v('size.rounded.full')};
+        &:not(:has(${c('image')})) {
+          background-color: var(--avatar-bg);
+        }
+      }
+      ${c('initials')} {
+        /* Adapts to a custom --color at runtime; pure-CSS since it can't be precomputed. */
+        color: ${autoContrast('var(--avatar-bg)')};
+        font-weight: ${v('font.weight.semibold')};
+      }
+    `,
+    },
+});
+export const avatarGroupStyles = createThemePart({
+    controlTemplate: avatarGroupControlTemplate,
+    base: baseStyles.avatarGroup,
+    dependencies: [colorsTemplate, sizesTemplate, fontTemplate],
+    root: {
+        css: ({ v, c, d }) => css `
+      ${c('root')} {
+        display: flex;
+      }
+      ${c('root')} ${d('avatar', 'root')} {
+        --border-width: 3px;
+        border: var(--border-width) solid ${v('color.background')};
+        &:not(:first-child) {
+          margin-left: -1.5rem;
+        }
+        &:first-child {
+          margin-left: calc(-1 * var(--border-width));
+        }
+        &:last-child {
+          margin-right: calc(-1 * var(--border-width));
+        }
+      }
+    `,
+    },
+});

package/nova/base/animation.d.ts

@@ -0,0 +1,21 @@
+export declare const animationTemplate: import("@ngneers/controls-themes").VariableTemplate<"anim", {
+    time: {
+        fade: null;
+        snappyFade: null;
+    };
+    ease: {
+        fade: null;
+        snappyFade: null;
+    };
+}>;
+export declare const animation: import("@ngneers/controls-themes").ThemePart<"anim", never, [import("@ngneers/controls-themes").VariableTemplate<"anim", {
+    time: {
+        fade: null;
+        snappyFade: null;
+    };
+    ease: {
+        fade: null;
+        snappyFade: null;
+    };
+}>], import("@ngneers/controls-themes").VariableTemplate[]>;
+//# sourceMappingURL=animation.d.ts.map

package/nova/base/animation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../../src/nova/base/animation.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;;;;;;;;;EAY5B,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;2DAepB,CAAC"}

package/nova/base/animation.js

@@ -0,0 +1,30 @@
+import { createThemePart, createVariableTemplate } from '@ngneers/controls-themes/api';
+export const animationTemplate = createVariableTemplate({
+    scope: 'anim',
+    variables: {
+        time: {
+            fade: null,
+            snappyFade: null,
+        },
+        ease: {
+            fade: null,
+            snappyFade: null,
+        },
+    },
+});
+export const animation = createThemePart({
+    scope: 'anim',
+    variables: [animationTemplate],
+    root: {
+        values: {
+            time: {
+                fade: '0.2s',
+                snappyFade: '0.1s',
+            },
+            ease: {
+                fade: 'ease',
+                snappyFade: 'ease-out',
+            },
+        },
+    },
+});