@ngneers/controls-themes 0.0.1-next.0

package/nova/tag/index.d.ts

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

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

package/nova/tag/index.js

@@ -0,0 +1,34 @@
+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 { tagControlTemplate } from '@ngneers/controls-themes/templates/tag';
+export const tagStyles = createThemePart({
+    controlTemplate: tagControlTemplate,
+    base: baseStyles.tag,
+    dependencies: [colorsTemplate, sizesTemplate, fontTemplate],
+    root: {
+        css: ({ v, c }) => css `
+      ${themedColors(c, v)}
+
+      ${c('root')} {
+        gap: ${v('size.padding.md')};
+        background: var(--theme-color-100);
+        color: var(--theme-color-600-on-100);
+        padding: ${v('size.padding.sm')} ${v('size.padding.md')};
+        line-height: 1;
+        border-radius: ${v('size.rounded.md')};
+        font-weight: ${v('font.weight.semibold')};
+        font-size: ${v('font.size.md')};
+      }
+
+      ${c('icon')} {
+        color: var(--theme-color-600-on-100);
+        font-size: inherit;
+      }
+
+      ${c('kind-pill')} {
+        border-radius: 999rem;
+      }
+    `,
+    },
+});

package/nova/theme-types.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="@ngneers/controls-custom-types" />
+
+import { COLORS, KINDS } from '.';
+
+declare module '@ngneers/controls-custom-types' {
+  export interface NgnThemeTypes {
+    kind: typeof KINDS;
+    color: typeof COLORS;
+  }
+}

package/nova/toast/index.d.ts

@@ -0,0 +1,268 @@
+export declare const toastStyles: import("@ngneers/controls-themes").ThemePart<"toast", import("@ngneers/controls-themes").ControlTemplate<"toast", ["root", "host", "anim-enter", "anim-leave", "defaultHeader", "defaultHeaderText", "defaultContent", `color-${string}`], readonly []>, import("@ngneers/controls-themes").VariableTemplate<"toast">[], [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;
+    };
+}>, import("@ngneers/controls-themes").VariableTemplate<"anim", {
+    time: {
+        fade: null;
+        snappyFade: null;
+    };
+    ease: {
+        fade: null;
+        snappyFade: null;
+    };
+}>, import("@ngneers/controls-themes").VariableTemplate<"shadow", {
+    sm: null;
+    md: null;
+    lg: null;
+    xl: null;
+}>]>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/nova/toast/index.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4FtB,CAAC"}

package/nova/toast/index.js

@@ -0,0 +1,93 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { animationTemplate, colorsTemplate, fontTemplate, shadowTemplate, sizesTemplate, themedColors, } from '@ngneers/controls-themes/nova/base';
+import { toastControlTemplate } from '@ngneers/controls-themes/templates/toast';
+export const toastStyles = createThemePart({
+    controlTemplate: toastControlTemplate,
+    base: baseStyles.toast,
+    dependencies: [colorsTemplate, sizesTemplate, fontTemplate, animationTemplate, shadowTemplate],
+    root: {
+        css: ({ v, c }) => css `
+      ${themedColors(c, v)}
+
+      ${c('host')} {
+        --toastGap: ${v('size.padding.md')};
+        max-width: min(35rem, 100%);
+        gap: var(--toastGap);
+        background: transparent;
+        top: ${v('size.padding.lg')};
+        right: ${v('size.padding.lg')};
+        margin-left: ${v('size.padding.lg')};
+        overflow: visible;
+      }
+
+      ${c('root')} {
+        background: var(--theme-color-400);
+        color: var(--theme-color-400-contrast);
+        padding: ${v('size.padding.md')} ${v('size.padding.lg')};
+        border-radius: ${v('size.rounded.md')};
+        font-size: ${v('font.size.sm')};
+        border: 1px solid var(--theme-color-600);
+        box-shadow: ${v('shadow.lg')};
+      }
+
+      ${c('defaultHeaderText')} {
+        font-weight: ${v('font.weight.semibold')};
+        display: flex;
+        align-items: center;
+        gap: ${v('size.padding.sm')};
+      }
+
+      ${c('anim-enter')} {
+        animation: ${c('anim-enter', 'animation')} ${v('anim.time.fade')} ${v('anim.ease.fade')};
+      }
+
+      @keyframes ${c('anim-enter', 'animation')} {
+        from {
+          transform: translateY(20%);
+          opacity: 0;
+        }
+        to {
+          transform: translateY(0);
+          opacity: 1;
+        }
+      }
+
+      ${c('anim-leave')} {
+        /* prettier-ignore */
+        animation: ${c('anim-leave', 'animation')} ${v('anim.time.snappyFade')} ${v('anim.ease.snappyFade')};
+        /*  Make sure that when one toast is removed, the toasts below it also move up */
+        & ~ * {
+          /* prettier-ignore */
+          animation: ${c('anim-leave', 'animation')}-after ${v('anim.time.snappyFade')} ${v('anim.ease.snappyFade')};
+        }
+      }
+
+      @keyframes ${c('anim-leave', 'animation')} {
+        0% {
+          transform: translateY(0);
+          opacity: 1;
+        }
+        75% {
+          opacity: 0;
+        }
+        100% {
+          transform: translateY(calc(-100% - var(--toastGap)));
+          opacity: 0;
+        }
+      }
+      @keyframes ${c('anim-leave', 'animation')}-after {
+        0% {
+          transform: translateY(0);
+        }
+        100% {
+          transform: translateY(calc(-100% - var(--toastGap)));
+        }
+      }
+
+      ${c('defaultContent')} {
+        line-height: 1.5;
+      }
+    `,
+    },
+});