@ngneers/controls-themes 0.0.1-pre2

package/nova/toast/index.d.ts

@@ -0,0 +1,159 @@
+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").ControlTemplate<string, string[], readonly any[]>[]>, 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;
+    };
+    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;
+    };
+}>, import("@ngneers/controls-themes").VariableTemplate<"anim", {
+    time: {
+        fade: null;
+        snappyFade: null;
+    };
+    ease: {
+        fade: null;
+        snappyFade: 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":"AAWA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2FtB,CAAC"}

package/nova/toast/index.js

@@ -0,0 +1,92 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { animationTemplate, colorsTemplate, fontTemplate, 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],
+    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: ${v('color.text')};
+        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);
+      }
+
+      ${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;
+      }
+    `,
+    },
+});

package/nova/toggle-button/index.d.ts

@@ -0,0 +1,159 @@
+export declare const toggleButtonStyles: import("@ngneers/controls-themes").ThemePart<"toggle-button", import("@ngneers/controls-themes").ControlTemplate<"toggle-button", ["root", "invalid", "button", "label", "active", "placeholder", "placeholder-active"], readonly []>, import("@ngneers/controls-themes").VariableTemplate<"toggle-button">[], [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;
+    };
+}>, import("@ngneers/controls-themes").VariableTemplate<"anim", {
+    time: {
+        fade: null;
+        snappyFade: null;
+    };
+    ease: {
+        fade: null;
+        snappyFade: null;
+    };
+}>]>;
+//# sourceMappingURL=index.d.ts.map

package/nova/toggle-button/index.d.ts.map

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

package/nova/toggle-button/index.js

@@ -0,0 +1,65 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { animationTemplate, colorsTemplate, fontTemplate, sizesTemplate, } from '@ngneers/controls-themes/nova/base';
+import { toggleButtonControlTemplate } from '@ngneers/controls-themes/templates/toggle-button';
+export const toggleButtonStyles = createThemePart({
+    controlTemplate: toggleButtonControlTemplate,
+    base: baseStyles.toggleButton,
+    dependencies: [colorsTemplate, sizesTemplate, fontTemplate, animationTemplate],
+    root: {
+        css: ({ v, c, d }) => css `
+      ${c('root')} ${c('button')} {
+        display: inline-grid;
+        border-radius: ${v('size.rounded.md')};
+        background-color: ${v('color.surface.100')};
+        padding: ${v('size.padding.md')} ${v('size.padding.lg')};
+        border: 1px solid ${v('color.surface.200')};
+        position: relative;
+        font-weight: ${v('font.weight.normal')};
+        cursor: pointer;
+        transition: background-color ${v('anim.ease.snappyFade')} ${v('anim.time.snappyFade')};
+        &:disabled {
+          cursor: default;
+          color: ${v('color.disabled.text')};
+          background-color: ${v('color.disabled.background')};
+        }
+        &[aria-readonly='true'] {
+          cursor: default;
+        }
+        &:focus-visible {
+          outline: 2px solid ${v('color.text')};
+        }
+      }
+      ${c('root')} ${c('button')}:hover:not(:disabled):not([aria-readonly='true']) {
+        background-color: ${v('color.surface.200')};
+      }
+      ${c('label')}, ${c('placeholder')}, ${c('placeholder-active')} {
+        align-items: center;
+        justify-content: center;
+        gap: ${v('size.padding.md')};
+      }
+      ${c('placeholder-active')} {
+        font-weight: ${v('font.weight.semibold')};
+      }
+      ${c('active')} ${c('button')} {
+        ${c('label')} {
+          font-weight: ${v('font.weight.semibold')};
+        }
+        &::before {
+          content: '';
+          position: absolute;
+          inset: ${v('size.padding.sm')};
+          background: ${v('color.background')};
+          border-radius: ${v('size.rounded.lg')};
+          transition: box-shadow ${v('anim.ease.snappyFade')} ${v('anim.time.snappyFade')};
+        }
+        &:disabled:before {
+          background: ${v('color.surface.100')};
+        }
+      }
+      ${c('invalid')} ${c('button')} {
+        border-color: ${v('color.invalid.border')};
+      }
+    `,
+    },
+});

package/nova/tooltip/index.d.ts

@@ -0,0 +1,142 @@
+export declare const tooltipStyles: import("@ngneers/controls-themes").ThemePart<"tooltip", import("@ngneers/controls-themes").ControlTemplate<"tooltip", ["root", "content", "text", "with-arrow", "closing", "top", "bottom", "left", "right", "start", "end"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>, import("@ngneers/controls-themes").VariableTemplate<"tooltip">[], [import("@ngneers/controls-themes").VariableTemplate<"anim", {
+    time: {
+        fade: null;
+        snappyFade: null;
+    };
+    ease: {
+        fade: null;
+        snappyFade: null;
+    };
+}>, 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/tooltip/index.d.ts.map

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

package/nova/tooltip/index.js

@@ -0,0 +1,53 @@
+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 { tooltipControlTemplate } from '@ngneers/controls-themes/templates/tooltip';
+export const tooltipStyles = createThemePart({
+    controlTemplate: tooltipControlTemplate,
+    base: baseStyles.tooltip,
+    dependencies: [animationTemplate, colorsTemplate, sizesTemplate],
+    root: {
+        css: ({ v, c }) => css `
+      ${c('content')} {
+        background: ${v('color.surface.950')};
+        color: ${v('color.surface.50')};
+        border-radius: ${v('size.rounded.md')};
+        padding: ${v('size.padding.md')};
+        white-space: pre-line;
+      }
+
+      ${c('with-arrow')} {
+        --arrow-width: 16px;
+        &::before {
+          background: ${v('color.surface.950')};
+        }
+      }
+
+      ${c('root')}:popover-open {
+        animation: ngn-tooltip-fade-in ${v('anim.time.fade')} ${v('anim.ease.fade')} forwards;
+      }
+
+      ${c('closing')}:popover-open {
+        animation: ngn-tooltip-fade-out ${v('anim.time.fade')} ${v('anim.ease.fade')} forwards;
+      }
+
+      @keyframes ngn-tooltip-fade-in {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+
+      @keyframes ngn-tooltip-fade-out {
+        from {
+          opacity: 1;
+        }
+        to {
+          opacity: 0;
+        }
+      }
+    `,
+    },
+});