@ngneers/controls-themes 0.0.1-pre2

package/nova/colors/index.d.ts

@@ -0,0 +1,27 @@
+type ColorShades = {
+    '25': string;
+    '50': string;
+    '100': string;
+    '200': string;
+    '300': string;
+    '400': string;
+    '500': string;
+    '600': string;
+    '700': string;
+    '800': string;
+    '900': string;
+    '950': string;
+    '975': string;
+};
+export declare function getColorShade(baseColor: string, level: number): string;
+export declare function getColorPalette(baseColor: string): ColorShades;
+export declare const inkColor: ColorShades;
+export declare const mustardColor: ColorShades;
+export declare const bubblegumColor: ColorShades;
+export declare const forestVerdantColor: ColorShades;
+export declare const solarMarigoldColor: ColorShades;
+export declare const crimsonFlameColor: ColorShades;
+export declare const electricSkyColor: ColorShades;
+export declare const greyColor: ColorShades;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/nova/colors/index.ts"],"names":[],"mappings":"AAAA,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wBAAgB,aAAa,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAEtE;AAID,wBAAgB,eAAe,CAAC,SAAS,EAAE,MAAM,GAAG,WAAW,CAK9D;AAED,eAAO,MAAM,QAAQ,aAA6B,CAAC;AACnD,eAAO,MAAM,YAAY,aAA6B,CAAC;AACvD,eAAO,MAAM,cAAc,aAA6B,CAAC;AACzD,eAAO,MAAM,kBAAkB,aAA6B,CAAC;AAC7D,eAAO,MAAM,kBAAkB,aAA6B,CAAC;AAC7D,eAAO,MAAM,iBAAiB,aAA6B,CAAC;AAC5D,eAAO,MAAM,gBAAgB,aAA6B,CAAC;AAC3D,eAAO,MAAM,SAAS,aAA6B,CAAC"}

package/nova/colors/index.js

@@ -0,0 +1,18 @@
+export function getColorShade(baseColor, level) {
+    return `hsl(from ${baseColor} h s ${(1000 - level) / 10})`;
+}
+const colors = [25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 975];
+export function getColorPalette(baseColor) {
+    return colors.reduce((acc, level) => {
+        acc[level.toString()] = getColorShade(baseColor, level);
+        return acc;
+    }, {});
+}
+export const inkColor = getColorPalette('#4557ba');
+export const mustardColor = getColorPalette('#ffc300');
+export const bubblegumColor = getColorPalette('#ff248a');
+export const forestVerdantColor = getColorPalette('#27c427');
+export const solarMarigoldColor = getColorPalette('#ff9500');
+export const crimsonFlameColor = getColorPalette('#ed1612');
+export const electricSkyColor = getColorPalette('#0da6f2');
+export const greyColor = getColorPalette('#475569');

package/nova/dialog/index.d.ts

@@ -0,0 +1,155 @@
+export declare const dialogStyles: import("@ngneers/controls-themes").ThemePart<"dialog", import("@ngneers/controls-themes").ControlTemplate<"dialog", ["root", "modal", "header", "default-header", "content", "footer", "default-footer", "close-button"], readonly [import("@ngneers/controls-themes").ControlTemplate<"movable", ["root", "movable", "moved", "drag-handle-grab", "drag-handle-grabbing"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>]>, import("@ngneers/controls-themes").VariableTemplate<"dialog">[], [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<"shadow", {
+    sm: null;
+    md: null;
+    lg: null;
+    xl: null;
+}>]>;
+//# sourceMappingURL=index.d.ts.map

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

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

package/nova/dialog/index.js

@@ -0,0 +1,40 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { colorsTemplate, fontTemplate, shadowTemplate, sizesTemplate, } from '@ngneers/controls-themes/nova/base';
+import { dialogControlTemplate } from '@ngneers/controls-themes/templates/dialog';
+export const dialogStyles = createThemePart({
+    controlTemplate: dialogControlTemplate,
+    base: baseStyles.dialog,
+    dependencies: [colorsTemplate, sizesTemplate, fontTemplate, shadowTemplate],
+    root: {
+        css: ({ v, c, d }) => css `
+      ${c('root')} {
+        background-color: ${v('color.background')};
+        border: 1px solid ${v('color.surface.300')};
+        border-radius: ${v('size.rounded.md')};
+        padding: ${v('size.padding.lg')};
+        box-shadow: ${v('shadow.lg')};
+      }
+      ${c('modal')} {
+        &::backdrop {
+          background-color: rgba(from ${v('color.text')} r g b / 0.1);
+        }
+      }
+      ${c('header')} {
+        gap: ${v('size.padding.sm')};
+        padding-bottom: ${v('size.padding.lg')};
+      }
+      ${c('default-header')} {
+        font-weight: 600;
+        font-size: ${v('font.size.2xl')};
+        margin: 0;
+      }
+      ${c('footer')} {
+        padding-top: ${v('size.padding.lg')};
+      }
+      ${c('default-footer')} {
+        gap: ${v('size.padding.sm')};
+      }
+    `,
+    },
+});

package/nova/drawer/index.d.ts

@@ -0,0 +1,164 @@
+export declare const drawerStyles: import("@ngneers/controls-themes").ThemePart<"drawer", import("@ngneers/controls-themes").ControlTemplate<"drawer", ["root", "horizontal", "content", "header", "footer", "default-header", "default-header-text", "anim-in", "anim-out"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>, import("@ngneers/controls-themes").VariableTemplate<"drawer">[], [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;
+    };
+}>, import("@ngneers/controls-themes").VariableTemplate<"shadow", {
+    sm: null;
+    md: null;
+    lg: null;
+    xl: null;
+}>]>;
+//# sourceMappingURL=index.d.ts.map

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

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

package/nova/drawer/index.js

@@ -0,0 +1,77 @@
+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/nova/base';
+import { drawerControlTemplate } from '@ngneers/controls-themes/templates/drawer';
+export const drawerStyles = createThemePart({
+    controlTemplate: drawerControlTemplate,
+    base: baseStyles.drawer,
+    dependencies: [colorsTemplate, sizesTemplate, fontTemplate, animationTemplate, shadowTemplate],
+    root: {
+        css: ({ v, c }) => css `
+      ${c('root')} {
+        box-shadow: ${v('shadow.lg')};
+        padding: ${v('size.padding.xl')};
+        gap: ${v('size.padding.md')};
+        transition:
+          display calc(${v('anim.time.fade')} + 10ms) allow-discrete,
+          overlay calc(${v('anim.time.fade')} + 10ms) allow-discrete;
+        animation: ${c('anim-in', 'animation')} ${v('anim.time.fade')} ${v('anim.ease.fade')};
+        background: ${v('color.background')};
+        &::backdrop {
+          transition: background-color ${v('anim.time.fade')};
+        }
+        &:popover-open::backdrop {
+          background-color: rgba(from ${v('color.text')} r g b / 0.1);
+          @starting-style {
+            background-color: transparent;
+          }
+        }
+        &:not(:popover-open) {
+          animation: ${c('anim-out', 'animation')} ${v('anim.time.fade')} ${v('anim.ease.fade')}
+            forwards;
+        }
+
+        &[data-position='top'] {
+          --animation-y: -40px;
+          --animation-x: 0;
+        }
+        &[data-position='right'] {
+          --animation-y: 0;
+          --animation-x: 40px;
+        }
+        &[data-position='bottom'] {
+          --animation-y: 40px;
+          --animation-x: 0;
+        }
+        &[data-position='left'] {
+          --animation-y: 0;
+          --animation-x: -40px;
+        }
+      }
+      @keyframes ${c('anim-in', 'animation')} {
+        from {
+          opacity: 0;
+          transform: translateY(var(--animation-y)) translateX(var(--animation-x));
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0) translateX(0);
+        }
+      }
+      @keyframes ${c('anim-out', 'animation')} {
+        from {
+          opacity: 1;
+          transform: translateY(0) translateX(0);
+        }
+        to {
+          opacity: 0;
+          transform: translateY(var(--animation-y)) translateX(var(--animation-x));
+        }
+      }
+      ${c('default-header-text')} {
+        font-weight: ${v('font.weight.semibold')};
+        font-size: ${v('font.size.xl')};
+      }
+    `,
+    },
+});

package/nova/edit-inplace/index.d.ts

@@ -0,0 +1,133 @@
+export declare const editInplaceStyles: import("@ngneers/controls-themes").ThemePart<"edit-inplace", import("@ngneers/controls-themes").ControlTemplate<"edit-inplace", ["root", "disabled", "readonly", "invalid", "default-display", "default-fallback-display", "default-edit", "default-edit-input", "default-edit-close-button"], readonly [import("@ngneers/controls-themes").ControlTemplate<"inplace", ["root", "content", "display", "disabled"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>]>, import("@ngneers/controls-themes").VariableTemplate<"edit-inplace">[], [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<"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/edit-inplace/index.d.ts.map

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

package/nova/edit-inplace/index.js

@@ -0,0 +1,48 @@
+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 { editInplaceControlTemplate } from '@ngneers/controls-themes/templates/edit-inplace';
+export const editInplaceStyles = createThemePart({
+    controlTemplate: editInplaceControlTemplate,
+    base: baseStyles.editInplace,
+    dependencies: [sizesTemplate, colorsTemplate],
+    root: {
+        css: ({ c, d, v }) => css `
+      ${c('default-display')} {
+        padding: 1px; /* To avoid layout shift when switching to edit mode */
+      }
+      ${c('root')} {
+        display: inline-block;
+      }
+      ${c('default-fallback-display')} {
+        font-style: italic;
+      }
+
+      ${c('readonly')} ${d('inplace', 'display')} {
+        cursor: default;
+        &:hover,
+        &:active,
+        &:focus-visible {
+          background-color: transparent;
+        }
+      }
+      ${c('disabled')} ${d('inplace', 'display')} {
+        cursor: default;
+        color: ${v('color.disabled.text')};
+        &:hover,
+        &:active,
+        &:focus-visible {
+          background-color: transparent;
+        }
+      }
+      ${c('invalid')} {
+        ${d('inplace', 'display')} {
+          color: ${v('color.error.500')};
+        }
+        &${c('disabled')} ${d('inplace', 'display')} {
+          color: ${v('color.error.200')};
+        }
+      }
+    `,
+    },
+});