@inkeep/cxkit-theme 0.0.0-dev-20250221234142

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Chakra UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# @inkeep

package/dist/color-utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function s(t){return Number.parseInt(t,16)||0}function u(t){return s(t)/255<=.03928?s(t)/255/12.92:((s(t)/255+.055)/1.055)**2.4}function c(t){return .2126*u(t.slice(1,3))+.7152*u(t.slice(3,5))+.0722*u(t.slice(-2))}function o(t,e){const n=c(t),r=c(e);return(Math.max(n,r)+.05)/(Math.min(n,r)+.05)}function a(t,e,n){const r=o(t,e),i=o(t,n);return r>i?e:n}exports.getTextColorBasedOnBgColor=a;

package/dist/color-utils.d.cts

@@ -0,0 +1 @@
+export declare function getTextColorBasedOnBgColor(bgColor: string, lightColor: string, darkColor: string): string;

package/dist/color-utils.d.ts

@@ -0,0 +1 @@
+export declare function getTextColorBasedOnBgColor(bgColor: string, lightColor: string, darkColor: string): string;

package/dist/color-utils.js

@@ -0,0 +1,20 @@
+function c(t) {
+  return Number.parseInt(t, 16) || 0;
+}
+function r(t) {
+  return c(t) / 255 <= 0.03928 ? c(t) / 255 / 12.92 : ((c(t) / 255 + 0.055) / 1.055) ** 2.4;
+}
+function u(t) {
+  return 0.2126 * r(t.slice(1, 3)) + 0.7152 * r(t.slice(3, 5)) + 0.0722 * r(t.slice(-2));
+}
+function i(t, e) {
+  const n = u(t), s = u(e);
+  return (Math.max(n, s) + 0.05) / (Math.min(n, s) + 0.05);
+}
+function o(t, e, n) {
+  const s = i(t, e), a = i(t, n);
+  return s > a ? e : n;
+}
+export {
+  o as getTextColorBasedOnBgColor
+};

package/dist/colors.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./node_modules/.pnpm/colorjs.io@0.5.2/node_modules/colorjs.io/dist/color.cjs"),C=require("./color-utils.cjs"),f="#000000",S={whiteAlpha:{50:"rgba(255, 255, 255, 0.05)",100:"rgba(255, 255, 255, 0.1)",200:"rgba(255, 255, 255, 0.15)",300:"rgba(255, 255, 255, 0.2)",400:"rgba(255, 255, 255, 0.3)",500:"rgba(255, 255, 255, 0.4)",600:"rgba(255, 255, 255, 0.5)",700:"rgba(255, 255, 255, 0.6)",800:"rgba(255, 255, 255, 0.7)",900:"rgba(255, 255, 255, 0.8)",950:"rgba(255, 255, 255, 0.9)",1e3:"rgba(255, 255, 255, 0.95)"},blackAlpha:{50:"rgba(0, 0, 0, 0.05)",100:"rgba(0, 0, 0, 0.1)",200:"rgba(0, 0, 0, 0.15)",300:"rgba(0, 0, 0, 0.2)",400:"rgba(0, 0, 0, 0.3)",500:"rgba(0, 0, 0, 0.4)",600:"rgba(0, 0, 0, 0.5)",700:"rgba(0, 0, 0, 0.6)",800:"rgba(0, 0, 0, 0.7)",900:"rgba(0, 0, 0, 0.8)",950:"rgba(0, 0, 0, 0.9)",1e3:"rgba(0, 0, 0, 0.95)"},gray:{50:"#f9fafb",100:"#f3f4f6",200:"#eaecf1",300:"#d8dce2",400:"#c4c9d2",500:"#9ca3af",600:"#6b7280",700:"#4b5563",800:"#374151",900:"#1f2937",950:"#111827",1e3:"#030712"},grayDark:{1e3:"#111111",950:"#191919",900:"#222222",800:"#2a2a2a",700:"#313131",600:"#3a3a3a",500:"#484848",400:"#606060",300:"#6e6e6e",200:"#7b7b7b",100:"#b4b4b4",50:"#eeeeee"}};function l(n){return n.to("srgb").toString({format:"hex"})}function g(n,t,e){const c=n.lch,h=t.lch,s=c.l+(h.l-c.l)*e,i=c.c+(h.c-c.c)*e,a=c.h+(h.h-c.h)*e;return new r.default("lch",[s,i,a])}function o(n){return n.to("srgb")}const w=new r.default(f),b=n=>{const t=n instanceof r.default?n:new r.default(n),e=t.lch.c<3?t.lch.c:3,c=t.lch.c<10?t.lch.c:10,h=t.lch.c<5?t.lch.c:5;return{textBold:new r.default("lch",[10,h,t.lch.h]),textSubtle:new r.default("lch",[30,c,t.lch.h]),lighter:new r.default("lch",[98,t.lch.c*1.2,t.lch.h*.96]),light:new r.default("lch",[89,t.lch.c*1.2,t.lch.h*.96]),lightSubtle:new r.default("lch",[98,e,t.lch.h*.98]),medium:t,mediumSubtle:new r.default("lch",[t.lch.l*.5,t.lch.c,t.lch.h],.3),strong:new r.default("lch",[t.lch.l*.85,t.lch.c,t.lch.h]),stronger:new r.default("lch",[t.lch.l*.5,t.lch.c,t.lch.h])}},d=b(w),m=(n,t)=>{const e=Object.assign({},t?b(t):d,n);for(const a of Object.keys(e))e[a]instanceof r.default||(e[a]=new r.default(e[a]));const c=Object.keys(e).reduce((a,u)=>(a[u]=e[u].toGamut({space:"srgb",method:"lch.c"}).to("srgb").toString({format:"hex"}),a),{}),h={50:l(o(e.lighter)),100:l(o(g(e.lighter,e.light,.5))),200:l(o(e.light)),300:l(o(g(e.light,e.medium,.5))),400:l(o(g(e.light,e.medium,.75))),500:l(o(e.medium)),600:l(o(g(e.medium,e.strong,.75))),700:l(o(e.strong)),800:l(o(g(e.strong,e.stronger,.5))),900:l(o(e.stronger)),950:l(o(g(e.stronger,e.textBold,.5))),1e3:l(o(g(e.stronger,e.textBold,.75)))},s=c.textColorOnPrimary||C.getTextColorBasedOnBgColor(c.medium,"#ffffff",c.textBold);return{inkeepPrimary:{...c,textColorOnPrimary:s},inkeepExpandedPrimary:h}},x=m(d),y={...x,...S};exports.DEFAULT_PRIMARY_BRAND_COLOR=f;exports.colors=y;exports.createColorDict=b;exports.createColorScheme=m;

package/dist/colors.d.cts

@@ -0,0 +1,100 @@
+import { default as Color } from 'colorjs.io';
+import { UserProvidedColorScheme } from '@inkeep/cxkit-types';
+export declare const DEFAULT_PRIMARY_BRAND_COLOR = "#000000";
+export type ColorDict = Record<string, Color>;
+export declare const createColorDict: (color: Color | string) => Record<string, Color>;
+export declare const createColorScheme: (userScheme?: UserProvidedColorScheme, primaryColor?: Color | string) => InkeepColorScheme;
+export interface InkeepColorScheme {
+    inkeepPrimary: {
+        textColorOnPrimary: string;
+    };
+    inkeepExpandedPrimary: {
+        '50': string;
+        '100': string;
+        '200': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '700': string;
+        '800': string;
+        '900': string;
+        '950': string;
+        '1000': string;
+    };
+}
+export declare const colors: {
+    whiteAlpha: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+        1000: string;
+    };
+    blackAlpha: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+        1000: string;
+    };
+    gray: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+        1000: string;
+    };
+    grayDark: {
+        1000: string;
+        950: string;
+        900: string;
+        800: string;
+        700: string;
+        600: string;
+        500: string;
+        400: string;
+        300: string;
+        200: string;
+        100: string;
+        50: string;
+    };
+    inkeepPrimary: {
+        textColorOnPrimary: string;
+    };
+    inkeepExpandedPrimary: {
+        "50": string;
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+        "900": string;
+        "950": string;
+        "1000": string;
+    };
+};

package/dist/colors.d.ts

@@ -0,0 +1,100 @@
+import { default as Color } from 'colorjs.io';
+import { UserProvidedColorScheme } from '@inkeep/cxkit-types';
+export declare const DEFAULT_PRIMARY_BRAND_COLOR = "#000000";
+export type ColorDict = Record<string, Color>;
+export declare const createColorDict: (color: Color | string) => Record<string, Color>;
+export declare const createColorScheme: (userScheme?: UserProvidedColorScheme, primaryColor?: Color | string) => InkeepColorScheme;
+export interface InkeepColorScheme {
+    inkeepPrimary: {
+        textColorOnPrimary: string;
+    };
+    inkeepExpandedPrimary: {
+        '50': string;
+        '100': string;
+        '200': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '700': string;
+        '800': string;
+        '900': string;
+        '950': string;
+        '1000': string;
+    };
+}
+export declare const colors: {
+    whiteAlpha: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+        1000: string;
+    };
+    blackAlpha: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+        1000: string;
+    };
+    gray: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+        1000: string;
+    };
+    grayDark: {
+        1000: string;
+        950: string;
+        900: string;
+        800: string;
+        700: string;
+        600: string;
+        500: string;
+        400: string;
+        300: string;
+        200: string;
+        100: string;
+        50: string;
+    };
+    inkeepPrimary: {
+        textColorOnPrimary: string;
+    };
+    inkeepExpandedPrimary: {
+        "50": string;
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+        "900": string;
+        "950": string;
+        "1000": string;
+    };
+};

package/dist/colors.js

@@ -0,0 +1,137 @@
+import r from "./node_modules/.pnpm/colorjs.io@0.5.2/node_modules/colorjs.io/dist/color.js";
+import { getTextColorBasedOnBgColor as u } from "./color-utils.js";
+const d = "#000000", C = {
+  whiteAlpha: {
+    50: "rgba(255, 255, 255, 0.05)",
+    100: "rgba(255, 255, 255, 0.1)",
+    200: "rgba(255, 255, 255, 0.15)",
+    300: "rgba(255, 255, 255, 0.2)",
+    400: "rgba(255, 255, 255, 0.3)",
+    500: "rgba(255, 255, 255, 0.4)",
+    600: "rgba(255, 255, 255, 0.5)",
+    700: "rgba(255, 255, 255, 0.6)",
+    800: "rgba(255, 255, 255, 0.7)",
+    900: "rgba(255, 255, 255, 0.8)",
+    950: "rgba(255, 255, 255, 0.9)",
+    1e3: "rgba(255, 255, 255, 0.95)"
+  },
+  blackAlpha: {
+    50: "rgba(0, 0, 0, 0.05)",
+    100: "rgba(0, 0, 0, 0.1)",
+    200: "rgba(0, 0, 0, 0.15)",
+    300: "rgba(0, 0, 0, 0.2)",
+    400: "rgba(0, 0, 0, 0.3)",
+    500: "rgba(0, 0, 0, 0.4)",
+    600: "rgba(0, 0, 0, 0.5)",
+    700: "rgba(0, 0, 0, 0.6)",
+    800: "rgba(0, 0, 0, 0.7)",
+    900: "rgba(0, 0, 0, 0.8)",
+    950: "rgba(0, 0, 0, 0.9)",
+    1e3: "rgba(0, 0, 0, 0.95)"
+  },
+  gray: {
+    // tailwind modified gray scheme
+    50: "#f9fafb",
+    100: "#f3f4f6",
+    200: "#eaecf1",
+    // Slightly lightened
+    300: "#d8dce2",
+    // Slightly lightened
+    400: "#c4c9d2",
+    // New color (the rest of the colors are shifted accordingly)
+    500: "#9ca3af",
+    600: "#6b7280",
+    700: "#4b5563",
+    800: "#374151",
+    900: "#1f2937",
+    950: "#111827",
+    1e3: "#030712"
+  },
+  // radix neutral gray for dark mode ('grayDark')
+  grayDark: {
+    1e3: "#111111",
+    950: "#191919",
+    900: "#222222",
+    800: "#2a2a2a",
+    700: "#313131",
+    600: "#3a3a3a",
+    500: "#484848",
+    400: "#606060",
+    300: "#6e6e6e",
+    200: "#7b7b7b",
+    100: "#b4b4b4",
+    50: "#eeeeee"
+  }
+};
+function o(n) {
+  return n.to("srgb").toString({ format: "hex" });
+}
+function g(n, e, t) {
+  const c = n.lch, a = e.lch, s = c.l + (a.l - c.l) * t, b = c.c + (a.c - c.c) * t, h = c.h + (a.h - c.h) * t;
+  return new r("lch", [s, b, h]);
+}
+function l(n) {
+  return n.to("srgb");
+}
+const w = new r(d), m = (n) => {
+  const e = n instanceof r ? n : new r(n), t = e.lch.c < 3 ? e.lch.c : 3, c = e.lch.c < 10 ? e.lch.c : 10, a = e.lch.c < 5 ? e.lch.c : 5;
+  return {
+    textBold: new r("lch", [10, a, e.lch.h]),
+    textSubtle: new r("lch", [30, c, e.lch.h]),
+    lighter: new r("lch", [98, e.lch.c * 1.2, e.lch.h * 0.96]),
+    light: new r("lch", [89, e.lch.c * 1.2, e.lch.h * 0.96]),
+    lightSubtle: new r("lch", [98, t, e.lch.h * 0.98]),
+    medium: e,
+    mediumSubtle: new r(
+      "lch",
+      [e.lch.l * 0.5, e.lch.c, e.lch.h],
+      0.3
+    ),
+    strong: new r("lch", [e.lch.l * 0.85, e.lch.c, e.lch.h]),
+    stronger: new r("lch", [e.lch.l * 0.5, e.lch.c, e.lch.h])
+  };
+}, f = m(w), x = (n, e) => {
+  const t = Object.assign(
+    {},
+    e ? m(e) : f,
+    n
+  );
+  for (const h of Object.keys(t))
+    t[h] instanceof r || (t[h] = new r(t[h]));
+  const c = Object.keys(t).reduce((h, i) => (h[i] = t[i].toGamut({ space: "srgb", method: "lch.c" }).to("srgb").toString({ format: "hex" }), h), {}), a = {
+    50: o(l(t.lighter)),
+    100: o(l(g(t.lighter, t.light, 0.5))),
+    200: o(l(t.light)),
+    300: o(l(g(t.light, t.medium, 0.5))),
+    400: o(l(g(t.light, t.medium, 0.75))),
+    500: o(l(t.medium)),
+    600: o(l(g(t.medium, t.strong, 0.75))),
+    700: o(l(t.strong)),
+    800: o(l(g(t.strong, t.stronger, 0.5))),
+    900: o(l(t.stronger)),
+    950: o(l(g(t.stronger, t.textBold, 0.5))),
+    1e3: o(
+      l(g(t.stronger, t.textBold, 0.75))
+    )
+  }, s = c.textColorOnPrimary || u(
+    c.medium,
+    "#ffffff",
+    c.textBold
+  );
+  return {
+    inkeepPrimary: {
+      ...c,
+      textColorOnPrimary: s
+    },
+    inkeepExpandedPrimary: a
+  };
+}, S = x(f), B = {
+  ...S,
+  ...C
+};
+export {
+  d as DEFAULT_PRIMARY_BRAND_COLOR,
+  B as colors,
+  m as createColorDict,
+  x as createColorScheme
+};

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./colors.cjs"),r=require("./utils/create-css-variables.cjs"),o=require("./utils/generate-theme-variables.cjs"),a={heading:'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',body:'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',mono:'SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace'},t={"3xs":"0.45rem","2xs":"0.625rem",xs:"0.75rem","1sm":"0.8125rem",sm:"0.875rem","2sm":"0.9375rem",md:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem","5xl":"3rem","6xl":"3.75rem","7xl":"4.5rem","8xl":"6rem","9xl":"8rem"},s={hide:-1,auto:"auto",base:0,start:1,docked:10,dropdown:1e3,sticky:1100,banner:1200,overlay:1300,modal:1400,popover:1500,skipLink:1600,toast:1700,tooltip:1800},l={colors:e.colors,fontFamily:a,fontSize:t,zIndex:s};exports.DEFAULT_PRIMARY_BRAND_COLOR=e.DEFAULT_PRIMARY_BRAND_COLOR;exports.colors=e.colors;exports.createColorDict=e.createColorDict;exports.createColorScheme=e.createColorScheme;exports.createCSSVariables=r.createCSSVariables;exports.generateThemeVariables=o.generateThemeVariables;exports.themeMappings=o.themeMappings;exports.theme=l;

package/dist/index.d.cts

@@ -0,0 +1,120 @@
+export declare const theme: {
+    colors: {
+        whiteAlpha: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+            1000: string;
+        };
+        blackAlpha: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+            1000: string;
+        };
+        gray: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+            1000: string;
+        };
+        grayDark: {
+            1000: string;
+            950: string;
+            900: string;
+            800: string;
+            700: string;
+            600: string;
+            500: string;
+            400: string;
+            300: string;
+            200: string;
+            100: string;
+            50: string;
+        };
+        inkeepPrimary: {
+            textColorOnPrimary: string;
+        };
+        inkeepExpandedPrimary: {
+            "50": string;
+            "100": string;
+            "200": string;
+            "300": string;
+            "400": string;
+            "500": string;
+            "600": string;
+            "700": string;
+            "800": string;
+            "900": string;
+            "950": string;
+            "1000": string;
+        };
+    };
+    fontFamily: {
+        heading: string;
+        body: string;
+        mono: string;
+    };
+    fontSize: {
+        '3xs': string;
+        '2xs': string;
+        xs: string;
+        '1sm': string;
+        sm: string;
+        '2sm': string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+    };
+    zIndex: {
+        hide: number;
+        auto: string;
+        base: number;
+        start: number;
+        docked: number;
+        dropdown: number;
+        sticky: number;
+        banner: number;
+        overlay: number;
+        modal: number;
+        popover: number;
+        skipLink: number;
+        toast: number;
+        tooltip: number;
+    };
+};
+export * from './utils/create-css-variables';
+export * from './utils/generate-theme-variables';
+export * from './colors';

package/dist/index.d.ts

@@ -0,0 +1,120 @@
+export declare const theme: {
+    colors: {
+        whiteAlpha: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+            1000: string;
+        };
+        blackAlpha: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+            1000: string;
+        };
+        gray: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+            1000: string;
+        };
+        grayDark: {
+            1000: string;
+            950: string;
+            900: string;
+            800: string;
+            700: string;
+            600: string;
+            500: string;
+            400: string;
+            300: string;
+            200: string;
+            100: string;
+            50: string;
+        };
+        inkeepPrimary: {
+            textColorOnPrimary: string;
+        };
+        inkeepExpandedPrimary: {
+            "50": string;
+            "100": string;
+            "200": string;
+            "300": string;
+            "400": string;
+            "500": string;
+            "600": string;
+            "700": string;
+            "800": string;
+            "900": string;
+            "950": string;
+            "1000": string;
+        };
+    };
+    fontFamily: {
+        heading: string;
+        body: string;
+        mono: string;
+    };
+    fontSize: {
+        '3xs': string;
+        '2xs': string;
+        xs: string;
+        '1sm': string;
+        sm: string;
+        '2sm': string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+    };
+    zIndex: {
+        hide: number;
+        auto: string;
+        base: number;
+        start: number;
+        docked: number;
+        dropdown: number;
+        sticky: number;
+        banner: number;
+        overlay: number;
+        modal: number;
+        popover: number;
+        skipLink: number;
+        toast: number;
+        tooltip: number;
+    };
+};
+export * from './utils/create-css-variables';
+export * from './utils/generate-theme-variables';
+export * from './colors';