@hanzogui/themes 8.3.0 → 8.3.2

package/dist/cjs/palettes.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.palettes = void 0;
+const helpers_ts_1 = require("./helpers.js");
+const tokens_tsx_1 = require("./tokens.js");
+const brands_ts_1 = require("./brands.js");
+exports.palettes = (() => {
+    const lightTransparent = 'rgba(255,255,255,0)';
+    const darkTransparent = 'rgba(10,10,10,0)';
+    const transparent = (hsl, opacity = 0) => hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`);
+    const getColorPalette = (colors, color = colors[0]) => {
+        const colorPalette = Object.values(colors);
+        // were re-ordering these
+        const [head, tail] = [
+            colorPalette.slice(0, 6),
+            colorPalette.slice(colorPalette.length - 5),
+        ];
+        // add our transparent colors first/last
+        // and make sure the last (foreground) color is white/black rather than colorful
+        // this is mostly for consistency with the older theme-base
+        return [
+            transparent(colorPalette[0]),
+            ...head,
+            ...tail,
+            color,
+            transparent(colorPalette[colorPalette.length - 1]),
+        ];
+    };
+    const lightColor = 'hsl(0, 0%, 9.0%)';
+    const lightPalette = [
+        lightTransparent,
+        '#fff',
+        '#f8f8f8',
+        'hsl(0, 0%, 96.3%)',
+        'hsl(0, 0%, 94.1%)',
+        'hsl(0, 0%, 92.0%)',
+        'hsl(0, 0%, 90.0%)',
+        'hsl(0, 0%, 88.5%)',
+        'hsl(0, 0%, 81.0%)',
+        'hsl(0, 0%, 56.1%)',
+        'hsl(0, 0%, 50.3%)',
+        'hsl(0, 0%, 42.5%)',
+        lightColor,
+        darkTransparent,
+    ];
+    const darkColor = '#fff';
+    const darkPalette = [
+        darkTransparent,
+        '#050505',
+        '#151515',
+        '#191919',
+        '#232323',
+        '#282828',
+        '#323232',
+        '#424242',
+        '#494949',
+        '#545454',
+        '#626262',
+        '#a5a5a5',
+        darkColor,
+        lightTransparent,
+    ];
+    const lightPalettes = (0, helpers_ts_1.objectFromEntries)((0, helpers_ts_1.objectKeys)(tokens_tsx_1.colorTokens.light).map((key) => [`light_${key}`, getColorPalette(tokens_tsx_1.colorTokens.light[key], lightColor)]));
+    const darkPalettes = (0, helpers_ts_1.objectFromEntries)((0, helpers_ts_1.objectKeys)(tokens_tsx_1.colorTokens.dark).map((key) => [`dark_${key}`, getColorPalette(tokens_tsx_1.colorTokens.dark[key], darkColor)]));
+    const colorPalettes = {
+        ...lightPalettes,
+        ...darkPalettes,
+    };
+    // White-label accent palettes. Each brand is one data row in ./brands and is
+    // run through the SAME getColorPalette() as every built-in color, so a brand
+    // ramp is not a special case anywhere downstream — it is just another palette
+    // the theme builder can name.
+    const brandPalettes = (0, helpers_ts_1.objectFromEntries)((0, helpers_ts_1.objectKeys)(brands_ts_1.brandRamps).flatMap((brand) => [
+        [`light_${brand}`, getColorPalette(brands_ts_1.brandRamps[brand].light, lightColor)],
+        [`dark_${brand}`, getColorPalette(brands_ts_1.brandRamps[brand].dark, darkColor)],
+    ]));
+    return {
+        light: lightPalette,
+        dark: darkPalette,
+        ...colorPalettes,
+        ...brandPalettes,
+    };
+})();
+//# sourceMappingURL=palettes.js.map

package/dist/cjs/palettes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"palettes.js","sourceRoot":"","sources":["../../src/palettes.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/shadows.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shadows = void 0;
+const lightShadowColor = 'rgba(0,0,0,0.04)';
+const lightShadowColorStrong = 'rgba(0,0,0,0.085)';
+const darkShadowColor = 'rgba(0,0,0,0.2)';
+const darkShadowColorStrong = 'rgba(0,0,0,0.3)';
+exports.shadows = {
+    light: {
+        shadowColor: lightShadowColorStrong,
+        shadowColorHover: lightShadowColorStrong,
+        shadowColorPress: lightShadowColor,
+        shadowColorFocus: lightShadowColor,
+    },
+    dark: {
+        shadowColor: darkShadowColorStrong,
+        shadowColorHover: darkShadowColorStrong,
+        shadowColorPress: darkShadowColor,
+        shadowColorFocus: darkShadowColor,
+    },
+};
+//# sourceMappingURL=shadows.js.map

package/dist/cjs/shadows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadows.js","sourceRoot":"","sources":["../../src/shadows.tsx"],"names":[],"mappings":";;;AAAA,MAAM,gBAAgB,GAAG,kBAAkB,CAAA;AAC3C,MAAM,sBAAsB,GAAG,mBAAmB,CAAA;AAClD,MAAM,eAAe,GAAG,iBAAiB,CAAA;AACzC,MAAM,qBAAqB,GAAG,iBAAiB,CAAA;AAElC,QAAA,OAAO,GAAG;IACrB,KAAK,EAAE;QACL,WAAW,EAAE,sBAAsB;QACnC,gBAAgB,EAAE,sBAAsB;QACxC,gBAAgB,EAAE,gBAAgB;QAClC,gBAAgB,EAAE,gBAAgB;KACnC;IACD,IAAI,EAAE;QACJ,WAAW,EAAE,qBAAqB;QAClC,gBAAgB,EAAE,qBAAqB;QACvC,gBAAgB,EAAE,eAAe;QACjC,gBAAgB,EAAE,eAAe;KAClC;CACF,CAAA"}

package/dist/cjs/subtleChildrenThemes.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.subtleChildrenThemes = exports.v5SubtlePaletteAdjustments = void 0;
+const v5_themes_ts_1 = require("./v5-themes.js");
+exports.v5SubtlePaletteAdjustments = {
+    default: {
+        light: (hsl) => ({
+            ...hsl,
+            s: hsl.s * 0.9,
+        }),
+        dark: (hsl, i) => ({
+            ...hsl,
+            s: hsl.s * (i <= 4 ? 0.7 : 0.9),
+        }),
+    },
+    // yellow palette in radix is especially off from the rest
+    yellow: {
+        light: (hsl, i) => {
+            // progressively darken and desaturate toward text colors for better contrast
+            // i=1 is lightest bg, i=12 is darkest text
+            const t = (i - 1) / 11; // 0 to 1
+            // saturation: starts at sStart, ends at sEnd
+            const sStart = 0.65;
+            const sEnd = 0.4;
+            // lightness: starts at lStart, ends at lEnd
+            const lStart = 1.08;
+            const lEnd = 0.8;
+            return {
+                ...hsl,
+                s: hsl.s * (sStart + t * (sEnd - sStart)),
+                l: hsl.l * (lStart + t * (lEnd - lStart)),
+            };
+        },
+        dark: (hsl, i) => ({
+            ...hsl,
+            s: hsl.s * (i <= 7 ? 0.45 : 0.55),
+            l: hsl.l * (i <= 4 ? 0.8 : 1),
+        }),
+    },
+};
+exports.subtleChildrenThemes = (0, v5_themes_ts_1.adjustPalettes)(v5_themes_ts_1.defaultChildrenThemes, {
+    ...exports.v5SubtlePaletteAdjustments,
+    gray: undefined, // skip
+    neutral: undefined, // skip
+});
+//# sourceMappingURL=subtleChildrenThemes.js.map

package/dist/cjs/subtleChildrenThemes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"subtleChildrenThemes.js","sourceRoot":"","sources":["../../src/subtleChildrenThemes.ts"],"names":[],"mappings":";;;AAAA,iDAIuB;AAEV,QAAA,0BAA0B,GAEnC;IACF,OAAO,EAAE;QACP,KAAK,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;YACf,GAAG,GAAG;YACN,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,GAAG;SACf,CAAC;QACF,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;YACjB,GAAG,GAAG;YACN,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;SAChC,CAAC;KACH;IACD,0DAA0D;IAC1D,MAAM,EAAE;QACN,KAAK,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;YAChB,6EAA6E;YAC7E,2CAA2C;YAC3C,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAA,CAAC,SAAS;YAEhC,6CAA6C;YAC7C,MAAM,MAAM,GAAG,IAAI,CAAA;YACnB,MAAM,IAAI,GAAG,GAAG,CAAA;YAEhB,4CAA4C;YAC5C,MAAM,MAAM,GAAG,IAAI,CAAA;YACnB,MAAM,IAAI,GAAG,GAAG,CAAA;YAEhB,OAAO;gBACL,GAAG,GAAG;gBACN,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;gBACzC,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;aAC1C,CAAA;QACH,CAAC;QAED,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;YACjB,GAAG,GAAG;YACN,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;YACjC,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;SAC9B,CAAC;KACH;CACF,CAAA;AAEY,QAAA,oBAAoB,GAAG,IAAA,6BAAc,EAAC,oCAAqB,EAAE;IACxE,GAAG,QAAA,0BAA0B;IAC7B,IAAI,EAAE,SAAS,EAAE,OAAO;IACxB,OAAO,EAAE,SAAS,EAAE,OAAO;CAC5B,CAAC,CAAA"}

package/dist/cjs/templates.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.maskOptions = exports.templates = void 0;
+const palettes_tsx_1 = require("./palettes.js");
+const templateColorsSpecific = {
+    color1: 1,
+    color2: 2,
+    color3: 3,
+    color4: 4,
+    color5: 5,
+    color6: 6,
+    color7: 7,
+    color8: 8,
+    color9: 9,
+    color10: 10,
+    color11: 11,
+    color12: 12,
+};
+// templates use the palette and specify index
+// negative goes backwards from end so -1 is the last item
+const template = {
+    ...templateColorsSpecific,
+    // the background, color, etc keys here work like generics - they make it so you
+    // can publish components for others to use without mandating a specific color scale
+    // the @hanzogui/button Button component looks for `$background`, so you set the
+    // dark_red_Button theme to have a stronger background than the dark_red theme.
+    background: 2,
+    backgroundHover: 3,
+    backgroundPress: 4,
+    backgroundFocus: 5,
+    backgroundStrong: 1,
+    backgroundTransparent: 0,
+    color: -1,
+    colorHover: -2,
+    colorPress: -1,
+    colorFocus: -2,
+    colorTransparent: -0,
+    borderColor: 5,
+    borderColorHover: 6,
+    borderColorFocus: 4,
+    borderColorPress: 5,
+    placeholderColor: -4,
+};
+exports.templates = {
+    base: template,
+    colorLight: {
+        ...template,
+        // light color themes are a bit less sensitive
+        borderColor: 4,
+        borderColorHover: 5,
+        borderColorFocus: 4,
+        borderColorPress: 4,
+    },
+};
+const shadows = {
+    shadowColor: 0,
+    shadowColorHover: 0,
+    shadowColorPress: 0,
+    shadowColorFocus: 0,
+};
+const colors = {
+    ...shadows,
+    color: 0,
+    colorHover: 0,
+    colorFocus: 0,
+    colorPress: 0,
+};
+const baseMaskOptions = {
+    override: shadows,
+    skip: shadows,
+    // avoids the transparent ends
+    max: palettes_tsx_1.palettes.light.length - 2,
+    min: 1,
+};
+const skipShadowsAndSpecificColors = {
+    ...shadows,
+    ...templateColorsSpecific,
+};
+exports.maskOptions = {
+    component: {
+        ...baseMaskOptions,
+        override: colors,
+        skip: skipShadowsAndSpecificColors,
+    },
+    alt: {
+        ...baseMaskOptions,
+    },
+    button: {
+        ...baseMaskOptions,
+        override: {
+            ...colors,
+            borderColor: 'transparent',
+            borderColorHover: 'transparent',
+        },
+        skip: skipShadowsAndSpecificColors,
+    },
+};
+//# sourceMappingURL=templates.js.map

package/dist/cjs/templates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"templates.js","sourceRoot":"","sources":["../../src/templates.tsx"],"names":[],"mappings":";;;AAEA,gDAAyC;AAEzC,MAAM,sBAAsB,GAAG;IAC7B,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,EAAE;IACX,OAAO,EAAE,EAAE;IACX,OAAO,EAAE,EAAE;CACZ,CAAA;AAED,8CAA8C;AAC9C,0DAA0D;AAC1D,MAAM,QAAQ,GAAG;IACf,GAAG,sBAAsB;IACzB,gFAAgF;IAChF,oFAAoF;IACpF,gFAAgF;IAChF,+EAA+E;IAC/E,UAAU,EAAE,CAAC;IACb,eAAe,EAAE,CAAC;IAClB,eAAe,EAAE,CAAC;IAClB,eAAe,EAAE,CAAC;IAClB,gBAAgB,EAAE,CAAC;IACnB,qBAAqB,EAAE,CAAC;IACxB,KAAK,EAAE,CAAC,CAAC;IACT,UAAU,EAAE,CAAC,CAAC;IACd,UAAU,EAAE,CAAC,CAAC;IACd,UAAU,EAAE,CAAC,CAAC;IACd,gBAAgB,EAAE,CAAC,CAAC;IACpB,WAAW,EAAE,CAAC;IACd,gBAAgB,EAAE,CAAC;IACnB,gBAAgB,EAAE,CAAC;IACnB,gBAAgB,EAAE,CAAC;IACnB,gBAAgB,EAAE,CAAC,CAAC;CACrB,CAAA;AAEY,QAAA,SAAS,GAAG;IACvB,IAAI,EAAE,QAAQ;IACd,UAAU,EAAE;QACV,GAAG,QAAQ;QACX,8CAA8C;QAC9C,WAAW,EAAE,CAAC;QACd,gBAAgB,EAAE,CAAC;QACnB,gBAAgB,EAAE,CAAC;QACnB,gBAAgB,EAAE,CAAC;KACpB;CACF,CAAA;AAED,MAAM,OAAO,GAAG;IACd,WAAW,EAAE,CAAC;IACd,gBAAgB,EAAE,CAAC;IACnB,gBAAgB,EAAE,CAAC;IACnB,gBAAgB,EAAE,CAAC;CACpB,CAAA;AAED,MAAM,MAAM,GAAG;IACb,GAAG,OAAO;IACV,KAAK,EAAE,CAAC;IACR,UAAU,EAAE,CAAC;IACb,UAAU,EAAE,CAAC;IACb,UAAU,EAAE,CAAC;CACd,CAAA;AAED,MAAM,eAAe,GAAgB;IACnC,QAAQ,EAAE,OAAO;IACjB,IAAI,EAAE,OAAO;IACb,8BAA8B;IAC9B,GAAG,EAAE,uBAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;IAC9B,GAAG,EAAE,CAAC;CACP,CAAA;AAED,MAAM,4BAA4B,GAAG;IACnC,GAAG,OAAO;IACV,GAAG,sBAAsB;CAC1B,CAAA;AAEY,QAAA,WAAW,GAAG;IACzB,SAAS,EAAE;QACT,GAAG,eAAe;QAClB,QAAQ,EAAE,MAAM;QAChB,IAAI,EAAE,4BAA4B;KACnC;IACD,GAAG,EAAE;QACH,GAAG,eAAe;KACnB;IACD,MAAM,EAAE;QACN,GAAG,eAAe;QAClB,QAAQ,EAAE;YACR,GAAG,MAAM;YACT,WAAW,EAAE,aAAa;YAC1B,gBAAgB,EAAE,aAAa;SAChC;QACD,IAAI,EAAE,4BAA4B;KACnC;CACoC,CAAA"}

package/dist/cjs/themes-new.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.themes = void 0;
+const theme_builder_1 = require("@hanzogui/theme-builder");
+const componentThemeDefinitions_tsx_1 = require("./componentThemeDefinitions.js");
+const theme_builder_2 = require("@hanzogui/theme-builder");
+const palettes_tsx_1 = require("./palettes.js");
+const shadows_tsx_1 = require("./shadows.js");
+const templates_tsx_1 = require("./templates.js");
+const tokens_tsx_1 = require("./tokens.js");
+const colorThemeDefinition = (colorName) => [
+    {
+        parent: 'light',
+        palette: colorName,
+        template: 'colorLight',
+    },
+    {
+        parent: 'dark',
+        palette: colorName,
+        template: 'base',
+    },
+];
+const themesBuilder = (0, theme_builder_1.createThemeBuilder)()
+    .addPalettes(palettes_tsx_1.palettes)
+    .addTemplates(templates_tsx_1.templates)
+    .addMasks(theme_builder_2.masks)
+    .addThemes({
+    light: {
+        template: 'base',
+        palette: 'light',
+        nonInheritedValues: {
+            ...tokens_tsx_1.lightColors,
+            ...shadows_tsx_1.shadows.light,
+        },
+    },
+    dark: {
+        template: 'base',
+        palette: 'dark',
+        nonInheritedValues: {
+            ...tokens_tsx_1.darkColors,
+            ...shadows_tsx_1.shadows.dark,
+        },
+    },
+})
+    .addChildThemes({
+    orange: colorThemeDefinition('orange'),
+    yellow: colorThemeDefinition('yellow'),
+    green: colorThemeDefinition('green'),
+    blue: colorThemeDefinition('blue'),
+    purple: colorThemeDefinition('purple'),
+    pink: colorThemeDefinition('pink'),
+    red: colorThemeDefinition('red'),
+    // White-label brands, built exactly like the colors above so `<Theme
+    // name="lux">` behaves like `<Theme name="blue">`. Applied SPARINGLY —
+    // wrap an accent element, never the page; the canvas stays neutral.
+    hanzo: colorThemeDefinition('hanzo'),
+    lux: colorThemeDefinition('lux'),
+    zoo: colorThemeDefinition('zoo'),
+    pars: colorThemeDefinition('pars'),
+})
+    .addChildThemes({
+    alt1: {
+        mask: 'soften',
+        ...templates_tsx_1.maskOptions.alt,
+    },
+    alt2: {
+        mask: 'soften2',
+        ...templates_tsx_1.maskOptions.alt,
+    },
+    active: {
+        mask: 'soften3',
+        skip: {
+            color: 1,
+        },
+    },
+})
+    .addChildThemes(componentThemeDefinitions_tsx_1.componentThemeDefinitions, {
+// to save bundle size but make alt themes not work on components
+// avoidNestingWithin: ['alt1', 'alt2'],
+});
+// Annotated, not inferred: with the brand child themes added, the inferred type
+// exceeds what tsc will serialize (TS7056). This file is the INPUT to
+// `generate:new`, which emits the fully-typed snapshot in generated-new.ts —
+// that is where consumers get precise theme names, so a structural type here
+// costs nothing.
+exports.themes = themesBuilder.build();
+//# sourceMappingURL=themes-new.js.map

package/dist/cjs/themes-new.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes-new.js","sourceRoot":"","sources":["../../src/themes-new.ts"],"names":[],"mappings":";;;AAAA,2DAA4D;AAC5D,kFAA2E;AAC3E,2DAA+C;AAC/C,gDAAyC;AACzC,8CAAuC;AACvC,kDAAwD;AACxD,4CAAsD;AAEtD,MAAM,oBAAoB,GAAG,CAAC,SAAiB,EAAE,EAAE,CAAC;IAClD;QACE,MAAM,EAAE,OAAO;QACf,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,YAAY;KACvB;IACD;QACE,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,MAAM;KACjB;CACF,CAAA;AAED,MAAM,aAAa,GAAG,IAAA,kCAAkB,GAAE;KACvC,WAAW,CAAC,uBAAQ,CAAC;KACrB,YAAY,CAAC,yBAAS,CAAC;KACvB,QAAQ,CAAC,qBAAK,CAAC;KACf,SAAS,CAAC;IACT,KAAK,EAAE;QACL,QAAQ,EAAE,MAAM;QAChB,OAAO,EAAE,OAAO;QAChB,kBAAkB,EAAE;YAClB,GAAG,wBAAW;YACd,GAAG,qBAAO,CAAC,KAAK;SACjB;KACF;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,MAAM;QAChB,OAAO,EAAE,MAAM;QACf,kBAAkB,EAAE;YAClB,GAAG,uBAAU;YACb,GAAG,qBAAO,CAAC,IAAI;SAChB;KACF;CACF,CAAC;KACD,cAAc,CAAC;IACd,MAAM,EAAE,oBAAoB,CAAC,QAAQ,CAAC;IACtC,MAAM,EAAE,oBAAoB,CAAC,QAAQ,CAAC;IACtC,KAAK,EAAE,oBAAoB,CAAC,OAAO,CAAC;IACpC,IAAI,EAAE,oBAAoB,CAAC,MAAM,CAAC;IAClC,MAAM,EAAE,oBAAoB,CAAC,QAAQ,CAAC;IACtC,IAAI,EAAE,oBAAoB,CAAC,MAAM,CAAC;IAClC,GAAG,EAAE,oBAAoB,CAAC,KAAK,CAAC;IAEhC,qEAAqE;IACrE,uEAAuE;IACvE,oEAAoE;IACpE,KAAK,EAAE,oBAAoB,CAAC,OAAO,CAAC;IACpC,GAAG,EAAE,oBAAoB,CAAC,KAAK,CAAC;IAChC,GAAG,EAAE,oBAAoB,CAAC,KAAK,CAAC;IAChC,IAAI,EAAE,oBAAoB,CAAC,MAAM,CAAC;CACnC,CAAC;KACD,cAAc,CAAC;IACd,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,GAAG,2BAAW,CAAC,GAAG;KACnB;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS;QACf,GAAG,2BAAW,CAAC,GAAG;KACnB;IACD,MAAM,EAAE;QACN,IAAI,EAAE,SAAS;QACf,IAAI,EAAE;YACJ,KAAK,EAAE,CAAC;SACT;KACF;CACF,CAAC;KACD,cAAc,CAAC,yDAAyB,EAAE;AACzC,iEAAiE;AACjE,wCAAwC;CACzC,CAAC,CAAA;AAEJ,gFAAgF;AAChF,sEAAsE;AACtE,6EAA6E;AAC7E,6EAA6E;AAC7E,iBAAiB;AACJ,QAAA,MAAM,GAA2C,aAAa,CAAC,KAAK,EAAE,CAAA"}

package/dist/cjs/themes-old.js

@@ -0,0 +1,309 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.themes = void 0;
+const create_theme_1 = require("@hanzogui/create-theme");
+const tokens_tsx_1 = require("./tokens.js");
+const lightTransparent = 'rgba(255,255,255,0)';
+const darkTransparent = 'rgba(10,10,10,0)';
+// background => foreground
+const palettes = {
+    dark: [
+        darkTransparent,
+        '#050505',
+        '#151515',
+        '#191919',
+        '#232323',
+        '#282828',
+        '#323232',
+        '#424242',
+        '#494949',
+        '#545454',
+        '#626262',
+        '#a5a5a5',
+        '#fff',
+        lightTransparent,
+    ],
+    light: [
+        lightTransparent,
+        '#fff',
+        '#f9f9f9',
+        'hsl(0, 0%, 97.3%)',
+        'hsl(0, 0%, 95.1%)',
+        'hsl(0, 0%, 94.0%)',
+        'hsl(0, 0%, 92.0%)',
+        'hsl(0, 0%, 89.5%)',
+        'hsl(0, 0%, 81.0%)',
+        'hsl(0, 0%, 56.1%)',
+        'hsl(0, 0%, 50.3%)',
+        'hsl(0, 0%, 42.5%)',
+        'hsl(0, 0%, 9.0%)',
+        darkTransparent,
+    ],
+};
+const templateColors = {
+    color1: 1,
+    color2: 2,
+    color3: 3,
+    color4: 4,
+    color5: 5,
+    color6: 6,
+    color7: 7,
+    color8: 8,
+    color9: 9,
+    color10: 10,
+    color11: 11,
+    color12: 12,
+};
+const templateShadows = {
+    shadowColor: 1,
+    shadowColorHover: 1,
+    shadowColorPress: 2,
+    shadowColorFocus: 2,
+};
+// we can use subset of our template as a "override" so it doesn't get adjusted with masks
+// we want to skip over templateColor + templateShadows
+const toSkip = {
+    ...templateShadows,
+};
+const override = Object.fromEntries(Object.entries(toSkip).map(([k]) => [k, 0]));
+const overrideShadows = Object.fromEntries(Object.entries(templateShadows).map(([k]) => [k, 0]));
+const overrideWithColors = {
+    ...override,
+    color: 0,
+    colorHover: 0,
+    colorFocus: 0,
+    colorPress: 0,
+};
+// templates use the palette and specify index
+// negative goes backwards from end so -1 is the last item
+const template = {
+    ...templateColors,
+    ...toSkip,
+    // the background, color, etc keys here work like generics - they make it so you
+    // can publish components for others to use without mandating a specific color scale
+    // the @hanzogui/button Button component looks for `$background`, so you set the
+    // dark_red_Button theme to have a stronger background than the dark_red theme.
+    background: 2,
+    backgroundHover: 3,
+    backgroundPress: 4,
+    backgroundFocus: 5,
+    backgroundStrong: 1,
+    backgroundTransparent: 0,
+    color: -1,
+    colorHover: -2,
+    colorPress: -1,
+    colorFocus: -2,
+    colorTransparent: -0,
+    borderColor: 4,
+    borderColorHover: 5,
+    borderColorPress: 3,
+    borderColorFocus: 4,
+    placeholderColor: -4,
+};
+const lightShadowColor = 'rgba(0,0,0,0.02)';
+const lightShadowColorStrong = 'rgba(0,0,0,0.066)';
+const darkShadowColor = 'rgba(0,0,0,0.2)';
+const darkShadowColorStrong = 'rgba(0,0,0,0.3)';
+const lightShadows = {
+    shadowColor: lightShadowColorStrong,
+    shadowColorHover: lightShadowColorStrong,
+    shadowColorPress: lightShadowColor,
+    shadowColorFocus: lightShadowColor,
+};
+const darkShadows = {
+    shadowColor: darkShadowColorStrong,
+    shadowColorHover: darkShadowColorStrong,
+    shadowColorPress: darkShadowColor,
+    shadowColorFocus: darkShadowColor,
+};
+const lightTemplate = {
+    ...template,
+    background: 2,
+    backgroundHover: 3,
+    backgroundPress: 4,
+    // our light color palette is... a bit unique
+    borderColor: 6,
+    borderColorHover: 7,
+    borderColorFocus: 5,
+    borderColorPress: 6,
+    ...lightShadows,
+};
+const darkTemplate = { ...template, ...darkShadows };
+const light = (0, create_theme_1.createTheme)(palettes.light, lightTemplate);
+const dark = (0, create_theme_1.createTheme)(palettes.dark, darkTemplate);
+const baseThemes = {
+    light,
+    dark,
+};
+const masks = {
+    skip: create_theme_1.skipMask,
+    weaker: (0, create_theme_1.createWeakenMask)(),
+    stronger: (0, create_theme_1.createStrengthenMask)(),
+};
+// default mask options for most uses
+const maskOptions = {
+    override,
+    skip: toSkip,
+    // avoids the transparent ends
+    max: palettes.light.length - 2,
+    min: 1,
+};
+const transparent = (hsl, opacity = 0) => hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`);
+// setup colorThemes and their inverses
+const [lightColorThemes, darkColorThemes] = [tokens_tsx_1.colorTokens.light, tokens_tsx_1.colorTokens.dark].map((colorSet, i) => {
+    const isLight = i === 0;
+    const theme = baseThemes[isLight ? 'light' : 'dark'];
+    return Object.fromEntries(Object.keys(colorSet).map((color) => {
+        const colorPalette = Object.values(colorSet[color]);
+        // were re-ordering these
+        const [head, tail] = [
+            colorPalette.slice(0, 6),
+            colorPalette.slice(colorPalette.length - 5),
+        ];
+        // add our transparent colors first/last
+        // and make sure the last (foreground) color is white/black rather than colorful
+        // this is mostly for consistency with the older theme-base
+        const palette = [
+            transparent(colorPalette[0]),
+            ...head,
+            ...tail,
+            theme.color,
+            transparent(colorPalette[colorPalette.length - 1]),
+        ];
+        const colorTheme = (0, create_theme_1.createTheme)(palette, isLight
+            ? {
+                ...lightTemplate,
+                // light color themes are a bit less sensitive
+                borderColor: 4,
+                borderColorHover: 5,
+                borderColorFocus: 4,
+                borderColorPress: 4,
+            }
+            : darkTemplate);
+        return [color, colorTheme];
+    }));
+});
+const allThemes = (0, create_theme_1.addChildren)(baseThemes, (name, theme) => {
+    const isLight = name === 'light';
+    const inverseName = isLight ? 'dark' : 'light';
+    const inverseTheme = baseThemes[inverseName];
+    const colorThemes = isLight ? lightColorThemes : darkColorThemes;
+    const inverseColorThemes = isLight ? darkColorThemes : lightColorThemes;
+    const allColorThemes = (0, create_theme_1.addChildren)(colorThemes, (colorName, colorTheme) => {
+        const inverse = inverseColorThemes[colorName];
+        return {
+            ...getAltThemes({
+                theme: colorTheme,
+                inverse,
+                isLight,
+            }),
+            ...getComponentThemes(colorTheme, inverse, isLight),
+        };
+    });
+    const baseSubThemes = {
+        ...getAltThemes({ theme, inverse: inverseTheme, isLight }),
+        ...getComponentThemes(theme, inverseTheme, isLight),
+    };
+    return {
+        ...baseSubThemes,
+        ...allColorThemes,
+    };
+});
+function getAltThemes({ theme, inverse, isLight, activeTheme, }) {
+    const maskOptionsAlt = {
+        ...maskOptions,
+        override: overrideShadows,
+    };
+    const alt1 = (0, create_theme_1.applyMask)(theme, masks.weaker, maskOptionsAlt);
+    const alt2 = (0, create_theme_1.applyMask)(alt1, masks.weaker, maskOptionsAlt);
+    const active = activeTheme ??
+        (process.env.ACTIVE_THEME_INVERSE
+            ? inverse
+            : (() => {
+                return (0, create_theme_1.applyMask)(theme, masks.weaker, {
+                    ...maskOptions,
+                    strength: 3,
+                    skip: {
+                        ...maskOptions.skip,
+                        color: 1,
+                    },
+                });
+            })());
+    return (0, create_theme_1.addChildren)({ alt1, alt2, active }, (_, subTheme) => {
+        return getComponentThemes(subTheme, subTheme === inverse ? theme : inverse, isLight);
+    });
+}
+function getComponentThemes(theme, inverse, isLight) {
+    const componentMaskOptions = {
+        ...maskOptions,
+        override: overrideWithColors,
+        skip: {
+            ...maskOptions.skip,
+            // skip colors too just for component sub themes
+            ...templateColors,
+        },
+    };
+    const weaker1 = (0, create_theme_1.applyMask)(theme, masks.weaker, componentMaskOptions);
+    const base = (0, create_theme_1.applyMask)(weaker1, masks.stronger, componentMaskOptions);
+    const weaker2 = (0, create_theme_1.applyMask)(weaker1, masks.weaker, componentMaskOptions);
+    const stronger1 = (0, create_theme_1.applyMask)(theme, masks.stronger, componentMaskOptions);
+    const inverse1 = (0, create_theme_1.applyMask)(inverse, masks.weaker, componentMaskOptions);
+    const inverse2 = (0, create_theme_1.applyMask)(inverse1, masks.weaker, componentMaskOptions);
+    const strongerBorderLighterBackground = isLight
+        ? {
+            ...stronger1,
+            borderColor: weaker1.borderColor,
+            borderColorHover: weaker1.borderColorHover,
+            borderColorPress: weaker1.borderColorPress,
+            borderColorFocus: weaker1.borderColorFocus,
+        }
+        : {
+            ...(0, create_theme_1.applyMask)(theme, masks.skip, componentMaskOptions),
+            borderColor: weaker1.borderColor,
+            borderColorHover: weaker1.borderColorHover,
+            borderColorPress: weaker1.borderColorPress,
+            borderColorFocus: weaker1.borderColorFocus,
+        };
+    const overlayTheme = {
+        background: isLight ? 'rgba(0,0,0,0.5)' : 'rgba(0,0,0,0.9)',
+    };
+    const weaker2WithoutBorder = {
+        ...weaker2,
+        borderColor: 'transparent',
+        borderColorHover: 'transparent',
+    };
+    return {
+        ListItem: isLight ? stronger1 : base,
+        Card: weaker1,
+        Button: weaker2WithoutBorder,
+        Checkbox: weaker2,
+        DrawerFrame: weaker1,
+        SliderTrack: stronger1,
+        SliderTrackActive: weaker2,
+        SliderThumb: inverse1,
+        Progress: weaker1,
+        ProgressIndicator: inverse,
+        Switch: weaker2,
+        SwitchThumb: inverse2,
+        TooltipArrow: weaker1,
+        TooltipContent: weaker2,
+        Input: strongerBorderLighterBackground,
+        TextArea: strongerBorderLighterBackground,
+        Tooltip: inverse1,
+        // make overlays always dark
+        SheetOverlay: overlayTheme,
+        DialogOverlay: overlayTheme,
+        ModalOverlay: overlayTheme,
+    };
+}
+exports.themes = {
+    ...allThemes,
+    // bring back the full type, the rest use a subset to avoid clogging up ts,
+    // hanzogui will be smart and use the top level themes as the type for useTheme() etc
+    light: (0, create_theme_1.createTheme)(palettes.light, lightTemplate, { nonInheritedValues: tokens_tsx_1.lightColors }),
+    dark: (0, create_theme_1.createTheme)(palettes.dark, darkTemplate, { nonInheritedValues: tokens_tsx_1.darkColors }),
+};
+// if (process.env.NODE_ENV === 'development') {
+//   console.log(JSON.stringify(themes).length)
+// }
+//# sourceMappingURL=themes-old.js.map