@ngneers/controls-themes 0.0.1-next.0

package/shade/toast/index.js

@@ -0,0 +1,94 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { animationTemplate, colorsTemplate, fontTemplate, shadowTemplate, sizesTemplate, slotColors, } from '@ngneers/controls-themes/shade/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: {
+        // Popover-surfaced card by default; a color-* class tints it (e.g. destructive toasts).
+        css: ({ v, c }) => css `
+      ${slotColors(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-bg, ${v('color.popover.base')});
+        color: var(--theme-fg, ${v('color.popover.foreground')});
+        padding: ${v('size.padding.md')} ${v('size.padding.lg')};
+        border-radius: ${v('size.rounded.lg')};
+        font-size: ${v('font.size.sm')};
+        border: 1px solid ${v('color.border')};
+        box-shadow: ${v('shadow.xl')};
+      }
+
+      ${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/shade/toggle-button/index.d.ts

@@ -0,0 +1,160 @@
+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;
+    foreground: null;
+    text: null;
+    border: null;
+    input: null;
+    ring: null;
+    popover: {
+        base: null;
+        foreground: null;
+    };
+    primary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    secondary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    accent: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    surface: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    muted: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    destructive: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: 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", {
+    family: null;
+    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/shade/toggle-button/index.d.ts.map

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

package/shade/toggle-button/index.js

@@ -0,0 +1,71 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { animationTemplate, colorsTemplate, fontTemplate, shadowTemplate, sizesTemplate, } from '@ngneers/controls-themes/shade/base';
+import { toggleButtonControlTemplate } from '@ngneers/controls-themes/templates/toggle-button';
+export const toggleButtonStyles = createThemePart({
+    controlTemplate: toggleButtonControlTemplate,
+    base: baseStyles.toggleButton,
+    dependencies: [colorsTemplate, sizesTemplate, fontTemplate, animationTemplate, shadowTemplate],
+    root: {
+        css: ({ v, c }) => css `
+      ${c('root')} ${c('button')} {
+        display: inline-grid;
+        border-radius: ${v('size.rounded.md')};
+        background-color: ${v('color.muted.base')};
+        padding: ${v('size.padding.md')} ${v('size.padding.lg')};
+        border: 1px solid ${v('color.border')};
+        position: relative;
+        color: ${v('color.muted.foreground')};
+        font-size: ${v('font.size.sm')};
+        font-weight: ${v('font.weight.normal')};
+        cursor: pointer;
+        transition: background-color ${v('anim.time.snappyFade')} ${v('anim.ease.snappyFade')};
+        &:disabled {
+          cursor: default;
+          opacity: 0.5;
+        }
+        &[aria-readonly='true'] {
+          cursor: default;
+        }
+        &:focus-visible {
+          outline: 2px solid transparent;
+          outline-offset: 2px;
+          box-shadow: 0 0 0 3px color-mix(in srgb, ${v('color.ring')} 50%, transparent);
+        }
+      }
+      ${c('root')} ${c('button')}:hover:not(:disabled):not([aria-readonly='true']) {
+        background-color: ${v('color.accent.base')};
+        color: ${v('color.accent.foreground')};
+      }
+      ${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.medium')};
+      }
+      ${c('active')} ${c('button')} {
+        color: ${v('color.foreground')};
+        ${c('label')} {
+          font-weight: ${v('font.weight.medium')};
+        }
+        &::before {
+          content: '';
+          position: absolute;
+          inset: ${v('size.padding.sm')};
+          background: ${v('color.background')};
+          border-radius: ${v('size.rounded.sm')};
+          box-shadow: ${v('shadow.sm')};
+          transition: box-shadow ${v('anim.time.snappyFade')} ${v('anim.ease.snappyFade')};
+        }
+        &:disabled:before {
+          background: ${v('color.muted.base')};
+        }
+      }
+      ${c('invalid')} ${c('button')} {
+        border-color: ${v('color.destructive.base')};
+      }
+    `,
+    },
+});

package/shade/tooltip/index.d.ts

@@ -0,0 +1,155 @@
+export declare const tooltipStyles: import("@ngneers/controls-themes").ThemePart<"tooltip", import("@ngneers/controls-themes").ControlTemplate<"tooltip", ["root", "content", "text", "with-arrow", "closing", "fade-in", "fade-out", "top", "bottom", "left", "right", "start", "end"], readonly []>, 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;
+    foreground: null;
+    text: null;
+    border: null;
+    input: null;
+    ring: null;
+    popover: {
+        base: null;
+        foreground: null;
+    };
+    primary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    secondary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    accent: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    surface: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    muted: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    destructive: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+}>, import("@ngneers/controls-themes").VariableTemplate<"font", {
+    family: null;
+    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<"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/shade/tooltip/index.d.ts.map

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

package/shade/tooltip/index.js

@@ -0,0 +1,59 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { animationTemplate, colorsTemplate, fontTemplate, sizesTemplate, } from '@ngneers/controls-themes/shade/base';
+import { tooltipControlTemplate } from '@ngneers/controls-themes/templates/tooltip';
+export const tooltipStyles = createThemePart({
+    controlTemplate: tooltipControlTemplate,
+    base: baseStyles.tooltip,
+    dependencies: [animationTemplate, colorsTemplate, fontTemplate, sizesTemplate],
+    root: {
+        // Inverted surface: dark-on-light schemes get a black tooltip with white text and vice versa.
+        // Uses the surface slot inverted (not primary) so the tooltip stays neutral regardless of a
+        // customized primary/base color.
+        css: ({ v, c }) => css `
+      ${c('content')} {
+        background: ${v('color.surface.foreground')};
+        color: ${v('color.surface.base')};
+        border-radius: ${v('size.rounded.md')};
+        padding: ${v('size.padding.sm')} ${v('size.padding.md')};
+        font-size: ${v('font.size.xs')};
+        white-space: pre-line;
+      }
+
+      ${c('with-arrow')} {
+        --arrow-width: 10px;
+        &::before {
+          background: ${v('color.surface.foreground')};
+        }
+      }
+
+      ${c('root')}:popover-open {
+        animation: ${c('fade-in', 'animation')} ${v('anim.time.fade')} ${v('anim.ease.fade')}
+          forwards;
+      }
+
+      ${c('closing')}:popover-open {
+        animation: ${c('fade-out', 'animation')} ${v('anim.time.fade')} ${v('anim.ease.fade')}
+          forwards;
+      }
+
+      @keyframes ${c('fade-in', 'animation')} {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+
+      @keyframes ${c('fade-out', 'animation')} {
+        from {
+          opacity: 1;
+        }
+        to {
+          opacity: 0;
+        }
+      }
+    `,
+    },
+});

package/shade/tree/index.d.ts

@@ -0,0 +1,152 @@
+export declare const treeStyles: import("@ngneers/controls-themes").ThemePart<"tree", import("@ngneers/controls-themes").ControlTemplate<"tree", ["root", "empty", "invalid", "item", "group", "default-item", "toggle", "toggle-placeholder", "toggle-icon", "toggle-arrow", "item-checkbox-placeholder", "item-selectable", "item-selected", "item-highlighted", "item-disabled", "item-expanded"], readonly [{
+    readonly class: "scroller";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"scroller", ["root", "virtual", "item", "item-sticky"], readonly []>;
+}, {
+    readonly class: "item-checkbox";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "box-icon-visible", "invalid"], readonly []>;
+}]>, import("@ngneers/controls-themes").VariableTemplate<"tree">[], [import("@ngneers/controls-themes").VariableTemplate<"color", {
+    background: null;
+    foreground: null;
+    text: null;
+    border: null;
+    input: null;
+    ring: null;
+    popover: {
+        base: null;
+        foreground: null;
+    };
+    primary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    secondary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    accent: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    surface: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    muted: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    destructive: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: 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", {
+    family: null;
+    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/shade/tree/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shade/tree/index.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkFrB,CAAC"}