@janbox/storefront-ui 1.0.0

package/dist/theme/palette.cjs

@@ -0,0 +1,287 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Color = require("color");
+const lodashEs = require("lodash-es");
+const getColorVar = (key, fullVar = true) => {
+  const cssVarKey = `--${prefix}-${key.replaceAll(".", "-")}`;
+  return fullVar ? `var(${cssVarKey})` : cssVarKey;
+};
+const prefix = "color";
+const paletteVars = {
+  inherit: "inherit",
+  current: "currentColor",
+  transparent: "transparent",
+  black: "#000000",
+  white: "#FFFFFF",
+  background: {
+    subtle: getColorVar("background.subtle"),
+    default: getColorVar("background.default"),
+    emphasis: getColorVar("background.emphasis")
+  },
+  border: {
+    default: getColorVar("border.default")
+  },
+  surface: {
+    default: getColorVar("surface.default")
+  },
+  primary: {
+    100: getColorVar("primary.100"),
+    200: getColorVar("primary.200"),
+    300: getColorVar("primary.300"),
+    400: getColorVar("primary.400"),
+    500: getColorVar("primary.500"),
+    600: getColorVar("primary.600"),
+    700: getColorVar("primary.700"),
+    800: getColorVar("primary.800")
+    // 900: getColorVar('primary.900'),
+  },
+  secondary: {
+    100: getColorVar("secondary.100"),
+    200: getColorVar("secondary.200"),
+    300: getColorVar("secondary.300"),
+    400: getColorVar("secondary.400"),
+    500: getColorVar("secondary.500"),
+    600: getColorVar("secondary.600"),
+    700: getColorVar("secondary.700"),
+    800: getColorVar("secondary.800")
+    // 900: getColorVar('secondary.900'),
+  },
+  red: {
+    100: getColorVar("red.100"),
+    200: getColorVar("red.200"),
+    300: getColorVar("red.300"),
+    400: getColorVar("red.400"),
+    500: getColorVar("red.500"),
+    600: getColorVar("red.600"),
+    700: getColorVar("red.700"),
+    800: getColorVar("red.800")
+    // 900: getColorVar('red.900'),
+  },
+  orange: {
+    100: getColorVar("orange.100"),
+    200: getColorVar("orange.200"),
+    300: getColorVar("orange.300"),
+    400: getColorVar("orange.400"),
+    500: getColorVar("orange.500"),
+    600: getColorVar("orange.600"),
+    700: getColorVar("orange.700"),
+    800: getColorVar("orange.800")
+    // 900: getColorVar('orange.900'),
+  },
+  yellow: {
+    100: getColorVar("yellow.100"),
+    200: getColorVar("yellow.200"),
+    300: getColorVar("yellow.300"),
+    400: getColorVar("yellow.400"),
+    500: getColorVar("yellow.500"),
+    600: getColorVar("yellow.600"),
+    700: getColorVar("yellow.700"),
+    800: getColorVar("yellow.800")
+    // 900: getColorVar('yellow.900'),
+  },
+  green: {
+    100: getColorVar("green.100"),
+    200: getColorVar("green.200"),
+    300: getColorVar("green.300"),
+    400: getColorVar("green.400"),
+    500: getColorVar("green.500"),
+    600: getColorVar("green.600"),
+    700: getColorVar("green.700"),
+    800: getColorVar("green.800")
+    // 900: getColorVar('green.900'),
+  },
+  blue: {
+    100: getColorVar("blue.100"),
+    200: getColorVar("blue.200"),
+    300: getColorVar("blue.300"),
+    400: getColorVar("blue.400"),
+    500: getColorVar("blue.500"),
+    600: getColorVar("blue.600"),
+    700: getColorVar("blue.700"),
+    800: getColorVar("blue.800")
+    // 900: getColorVar('blue.900'),
+  },
+  violet: {
+    100: getColorVar("violet.100"),
+    200: getColorVar("violet.200"),
+    300: getColorVar("violet.300"),
+    400: getColorVar("violet.400"),
+    500: getColorVar("violet.500"),
+    600: getColorVar("violet.600"),
+    700: getColorVar("violet.700"),
+    800: getColorVar("violet.800")
+    // 900: getColorVar('violet.900'),
+  },
+  neutral: {
+    100: getColorVar("neutral.100"),
+    200: getColorVar("neutral.200"),
+    300: getColorVar("neutral.300"),
+    400: getColorVar("neutral.400"),
+    500: getColorVar("neutral.500"),
+    600: getColorVar("neutral.600"),
+    700: getColorVar("neutral.700"),
+    800: getColorVar("neutral.800")
+    // 900: getColorVar('neutral.900'),
+  }
+};
+const groupedColors = [
+  {
+    name: "Basic",
+    colors: ["transparent", "black", "white"]
+  },
+  {
+    name: "Background",
+    colors: ["background.subtle", "background.default", "background.emphasis"]
+  },
+  {
+    name: "Border",
+    colors: ["border.default"]
+  },
+  {
+    name: "Surface",
+    colors: ["surface.default"]
+  },
+  {
+    name: "Primary",
+    colors: [
+      "primary.100",
+      "primary.200",
+      "primary.300",
+      "primary.400",
+      "primary.500",
+      "primary.600",
+      "primary.700",
+      "primary.800"
+      // 'primary.900',
+    ]
+  },
+  {
+    name: "Secondary",
+    colors: [
+      "secondary.100",
+      "secondary.200",
+      "secondary.300",
+      "secondary.400",
+      "secondary.500",
+      "secondary.600",
+      "secondary.700",
+      "secondary.800"
+      // 'secondary.900',
+    ]
+  },
+  {
+    name: "Red",
+    colors: [
+      "red.100",
+      "red.200",
+      "red.300",
+      "red.400",
+      "red.500",
+      "red.600",
+      "red.700",
+      "red.800"
+      // 'red.900'
+    ]
+  },
+  {
+    name: "Orange",
+    colors: [
+      "orange.100",
+      "orange.200",
+      "orange.300",
+      "orange.400",
+      "orange.500",
+      "orange.600",
+      "orange.700",
+      "orange.800"
+      // 'orange.900',
+    ]
+  },
+  {
+    name: "Yellow",
+    colors: [
+      "yellow.100",
+      "yellow.200",
+      "yellow.300",
+      "yellow.400",
+      "yellow.500",
+      "yellow.600",
+      "yellow.700",
+      "yellow.800"
+      // 'yellow.900',
+    ]
+  },
+  {
+    name: "Green",
+    colors: [
+      "green.100",
+      "green.200",
+      "green.300",
+      "green.400",
+      "green.500",
+      "green.600",
+      "green.700",
+      "green.800"
+      // 'green.900',
+    ]
+  },
+  {
+    name: "Blue",
+    colors: [
+      "blue.100",
+      "blue.200",
+      "blue.300",
+      "blue.400",
+      "blue.500",
+      "blue.600",
+      "blue.700",
+      "blue.800"
+      // 'blue.900',
+    ]
+  },
+  {
+    name: "Violet",
+    colors: [
+      "violet.100",
+      "violet.200",
+      "violet.300",
+      "violet.400",
+      "violet.500",
+      "violet.600",
+      "violet.700",
+      "violet.800"
+      // 'violet.900',
+    ]
+  },
+  {
+    name: "Neutral",
+    colors: [
+      "neutral.100",
+      "neutral.200",
+      "neutral.300",
+      "neutral.400",
+      "neutral.500",
+      "neutral.600",
+      "neutral.700",
+      "neutral.800"
+      // 'neutral.900',
+    ]
+  }
+];
+const parseColor = (text = "", palette) => {
+  var _a, _b;
+  const regex = /var\(--([\w-]+)\)/;
+  const cssVarName = (_b = (_a = text.match(regex)) == null ? void 0 : _a.at(1)) == null ? void 0 : _b.replace(new RegExp(`${prefix}-`), "").replaceAll("-", ".");
+  try {
+    if (!cssVarName) {
+      return Color(text);
+    }
+    return Color(String(lodashEs.get(palette, cssVarName) ?? text));
+  } catch (error) {
+    return null;
+  }
+};
+exports.getColorVar = getColorVar;
+exports.groupedColors = groupedColors;
+exports.paletteVars = paletteVars;
+exports.parseColor = parseColor;

package/dist/theme/palette.d.ts

@@ -0,0 +1,46 @@
+import { Paths } from 'type-fest';
+export declare const getColorVar: (key: PaletteKey, fullVar?: boolean) => string;
+type Scale = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800;
+type ColorScale = Record<Scale, string>;
+export interface Palette {
+    readonly inherit: "inherit";
+    readonly current: "currentColor";
+    readonly transparent: "transparent";
+    readonly black: "#000000";
+    readonly white: "#FFFFFF";
+    background: {
+        subtle: string;
+        default: string;
+        emphasis: string;
+    };
+    border: {
+        default: string;
+    };
+    surface: {
+        default: string;
+    };
+    primary: ColorScale;
+    secondary: ColorScale;
+    red: ColorScale;
+    orange: ColorScale;
+    yellow: ColorScale;
+    green: ColorScale;
+    blue: ColorScale;
+    neutral: ColorScale;
+    violet: ColorScale;
+}
+export type PaletteKey = Paths<Palette>;
+export declare const paletteVars: Palette;
+export type GroupedColor = {
+    name: string;
+    colors: PaletteKey[];
+};
+export declare const groupedColors: GroupedColor[];
+export declare const parseColor: (text: string | undefined, palette: Palette) => import('color').ColorInstance | null;
+declare module "@emotion/react" {
+    interface Theme {
+        palette: Palette;
+    }
+}
+export {};
+//# sourceMappingURL=palette.d.ts.map

package/dist/theme/palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/theme/palette.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAElC,eAAO,MAAM,WAAW,QAAS,UAAU,8BAG1C,CAAC;AAIF,KAAK,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAE3D,KAAK,UAAU,GAAG,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AAExC,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC;IAC5B,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;IACjC,QAAQ,CAAC,WAAW,EAAE,aAAa,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,UAAU,EAAE;QACV,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;QAChB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,OAAO,EAAE;QACP,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,OAAO,EAAE,UAAU,CAAC;IACpB,SAAS,EAAE,UAAU,CAAC;IACtB,GAAG,EAAE,UAAU,CAAC;IAChB,MAAM,EAAE,UAAU,CAAC;IACnB,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,UAAU,CAAC;IAClB,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,UAAU,CAAC;IACpB,MAAM,EAAE,UAAU,CAAC;CACpB;AAED,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;AAExC,eAAO,MAAM,WAAW,EAAE,OAoHzB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,YAAY,EA+IvC,CAAC;AAEF,eAAO,MAAM,UAAU,sCAAwB,OAAO,yCAiBrD,CAAC;AAEF,OAAO,QAAQ,gBAAgB,CAAC;IAC9B,UAAiB,KAAK;QACpB,OAAO,EAAE,OAAO,CAAC;KAClB;CACF"}

package/dist/theme/palette.js

@@ -0,0 +1,287 @@
+import Color from "color";
+import { get } from "lodash-es";
+const getColorVar = (key, fullVar = true) => {
+  const cssVarKey = `--${prefix}-${key.replaceAll(".", "-")}`;
+  return fullVar ? `var(${cssVarKey})` : cssVarKey;
+};
+const prefix = "color";
+const paletteVars = {
+  inherit: "inherit",
+  current: "currentColor",
+  transparent: "transparent",
+  black: "#000000",
+  white: "#FFFFFF",
+  background: {
+    subtle: getColorVar("background.subtle"),
+    default: getColorVar("background.default"),
+    emphasis: getColorVar("background.emphasis")
+  },
+  border: {
+    default: getColorVar("border.default")
+  },
+  surface: {
+    default: getColorVar("surface.default")
+  },
+  primary: {
+    100: getColorVar("primary.100"),
+    200: getColorVar("primary.200"),
+    300: getColorVar("primary.300"),
+    400: getColorVar("primary.400"),
+    500: getColorVar("primary.500"),
+    600: getColorVar("primary.600"),
+    700: getColorVar("primary.700"),
+    800: getColorVar("primary.800")
+    // 900: getColorVar('primary.900'),
+  },
+  secondary: {
+    100: getColorVar("secondary.100"),
+    200: getColorVar("secondary.200"),
+    300: getColorVar("secondary.300"),
+    400: getColorVar("secondary.400"),
+    500: getColorVar("secondary.500"),
+    600: getColorVar("secondary.600"),
+    700: getColorVar("secondary.700"),
+    800: getColorVar("secondary.800")
+    // 900: getColorVar('secondary.900'),
+  },
+  red: {
+    100: getColorVar("red.100"),
+    200: getColorVar("red.200"),
+    300: getColorVar("red.300"),
+    400: getColorVar("red.400"),
+    500: getColorVar("red.500"),
+    600: getColorVar("red.600"),
+    700: getColorVar("red.700"),
+    800: getColorVar("red.800")
+    // 900: getColorVar('red.900'),
+  },
+  orange: {
+    100: getColorVar("orange.100"),
+    200: getColorVar("orange.200"),
+    300: getColorVar("orange.300"),
+    400: getColorVar("orange.400"),
+    500: getColorVar("orange.500"),
+    600: getColorVar("orange.600"),
+    700: getColorVar("orange.700"),
+    800: getColorVar("orange.800")
+    // 900: getColorVar('orange.900'),
+  },
+  yellow: {
+    100: getColorVar("yellow.100"),
+    200: getColorVar("yellow.200"),
+    300: getColorVar("yellow.300"),
+    400: getColorVar("yellow.400"),
+    500: getColorVar("yellow.500"),
+    600: getColorVar("yellow.600"),
+    700: getColorVar("yellow.700"),
+    800: getColorVar("yellow.800")
+    // 900: getColorVar('yellow.900'),
+  },
+  green: {
+    100: getColorVar("green.100"),
+    200: getColorVar("green.200"),
+    300: getColorVar("green.300"),
+    400: getColorVar("green.400"),
+    500: getColorVar("green.500"),
+    600: getColorVar("green.600"),
+    700: getColorVar("green.700"),
+    800: getColorVar("green.800")
+    // 900: getColorVar('green.900'),
+  },
+  blue: {
+    100: getColorVar("blue.100"),
+    200: getColorVar("blue.200"),
+    300: getColorVar("blue.300"),
+    400: getColorVar("blue.400"),
+    500: getColorVar("blue.500"),
+    600: getColorVar("blue.600"),
+    700: getColorVar("blue.700"),
+    800: getColorVar("blue.800")
+    // 900: getColorVar('blue.900'),
+  },
+  violet: {
+    100: getColorVar("violet.100"),
+    200: getColorVar("violet.200"),
+    300: getColorVar("violet.300"),
+    400: getColorVar("violet.400"),
+    500: getColorVar("violet.500"),
+    600: getColorVar("violet.600"),
+    700: getColorVar("violet.700"),
+    800: getColorVar("violet.800")
+    // 900: getColorVar('violet.900'),
+  },
+  neutral: {
+    100: getColorVar("neutral.100"),
+    200: getColorVar("neutral.200"),
+    300: getColorVar("neutral.300"),
+    400: getColorVar("neutral.400"),
+    500: getColorVar("neutral.500"),
+    600: getColorVar("neutral.600"),
+    700: getColorVar("neutral.700"),
+    800: getColorVar("neutral.800")
+    // 900: getColorVar('neutral.900'),
+  }
+};
+const groupedColors = [
+  {
+    name: "Basic",
+    colors: ["transparent", "black", "white"]
+  },
+  {
+    name: "Background",
+    colors: ["background.subtle", "background.default", "background.emphasis"]
+  },
+  {
+    name: "Border",
+    colors: ["border.default"]
+  },
+  {
+    name: "Surface",
+    colors: ["surface.default"]
+  },
+  {
+    name: "Primary",
+    colors: [
+      "primary.100",
+      "primary.200",
+      "primary.300",
+      "primary.400",
+      "primary.500",
+      "primary.600",
+      "primary.700",
+      "primary.800"
+      // 'primary.900',
+    ]
+  },
+  {
+    name: "Secondary",
+    colors: [
+      "secondary.100",
+      "secondary.200",
+      "secondary.300",
+      "secondary.400",
+      "secondary.500",
+      "secondary.600",
+      "secondary.700",
+      "secondary.800"
+      // 'secondary.900',
+    ]
+  },
+  {
+    name: "Red",
+    colors: [
+      "red.100",
+      "red.200",
+      "red.300",
+      "red.400",
+      "red.500",
+      "red.600",
+      "red.700",
+      "red.800"
+      // 'red.900'
+    ]
+  },
+  {
+    name: "Orange",
+    colors: [
+      "orange.100",
+      "orange.200",
+      "orange.300",
+      "orange.400",
+      "orange.500",
+      "orange.600",
+      "orange.700",
+      "orange.800"
+      // 'orange.900',
+    ]
+  },
+  {
+    name: "Yellow",
+    colors: [
+      "yellow.100",
+      "yellow.200",
+      "yellow.300",
+      "yellow.400",
+      "yellow.500",
+      "yellow.600",
+      "yellow.700",
+      "yellow.800"
+      // 'yellow.900',
+    ]
+  },
+  {
+    name: "Green",
+    colors: [
+      "green.100",
+      "green.200",
+      "green.300",
+      "green.400",
+      "green.500",
+      "green.600",
+      "green.700",
+      "green.800"
+      // 'green.900',
+    ]
+  },
+  {
+    name: "Blue",
+    colors: [
+      "blue.100",
+      "blue.200",
+      "blue.300",
+      "blue.400",
+      "blue.500",
+      "blue.600",
+      "blue.700",
+      "blue.800"
+      // 'blue.900',
+    ]
+  },
+  {
+    name: "Violet",
+    colors: [
+      "violet.100",
+      "violet.200",
+      "violet.300",
+      "violet.400",
+      "violet.500",
+      "violet.600",
+      "violet.700",
+      "violet.800"
+      // 'violet.900',
+    ]
+  },
+  {
+    name: "Neutral",
+    colors: [
+      "neutral.100",
+      "neutral.200",
+      "neutral.300",
+      "neutral.400",
+      "neutral.500",
+      "neutral.600",
+      "neutral.700",
+      "neutral.800"
+      // 'neutral.900',
+    ]
+  }
+];
+const parseColor = (text = "", palette) => {
+  var _a, _b;
+  const regex = /var\(--([\w-]+)\)/;
+  const cssVarName = (_b = (_a = text.match(regex)) == null ? void 0 : _a.at(1)) == null ? void 0 : _b.replace(new RegExp(`${prefix}-`), "").replaceAll("-", ".");
+  try {
+    if (!cssVarName) {
+      return Color(text);
+    }
+    return Color(String(get(palette, cssVarName) ?? text));
+  } catch (error) {
+    return null;
+  }
+};
+export {
+  getColorVar,
+  groupedColors,
+  paletteVars,
+  parseColor
+};