retail-design-system 1.0.0

package/packages/ui/src/foundations/colors/colors.ts

@@ -0,0 +1,475 @@
+export interface CompositeColor {
+  color: PrimitiveColor
+  name: string
+}
+
+export type CompositeColorName = keyof typeof composite
+
+export interface PrimitiveColor {
+  hex: string
+  name: string
+}
+
+export type PrimitiveColorName = keyof typeof primitive
+
+export const primitive: Record<string, PrimitiveColor> = {
+  "blue-400": {
+    hex: "#60A5FA",
+    name: "blue-400",
+  },
+  "blue-500": {
+    hex: "#3B82F6",
+    name: "blue-500",
+  },
+  "blue-900": {
+    hex: "#1E3A8A",
+    name: "blue-900",
+  },
+  "blue-950": {
+    hex: "#172554",
+    name: "blue-950",
+  },
+  "green-100": {
+    hex: "#DCFCE7",
+    name: "green-100",
+  },
+  "green-200": {
+    hex: "#BBF7D0",
+    name: "green-200",
+  },
+  "green-300": {
+    hex: "#86EFAC",
+    name: "green-300",
+  },
+  "green-400": {
+    hex: "#4ADE80",
+    name: "green-400",
+  },
+  "green-50": {
+    hex: "#F0FDF4",
+    name: "green-50",
+  },
+  "green-500": {
+    hex: "#22C55E",
+    name: "green-500",
+  },
+  "green-600": {
+    hex: "#16A34A",
+    name: "green-600",
+  },
+  "green-700": {
+    hex: "#15803D",
+    name: "green-700",
+  },
+  "green-800": {
+    hex: "#166534",
+    name: "green-800",
+  },
+  "green-900": {
+    hex: "#14532D",
+    name: "green-900",
+  },
+  "green-950": {
+    hex: "#052E16",
+    name: "green-950",
+  },
+  "neutral-200": {
+    hex: "#E4E4E7",
+    name: "neutral-200",
+  },
+  "neutral-400": {
+    hex: "#A1A1AA",
+    name: "neutral-400",
+  },
+  "neutral-50": {
+    hex: "#FAFAFA",
+    name: "neutral-50",
+  },
+  "orange-400": {
+    hex: "#FB923C",
+    name: "orange-400",
+  },
+  "orange-900": {
+    hex: "#7C2D12",
+    name: "orange-900",
+  },
+  "pink-400": {
+    hex: "#F472B6",
+    name: "pink-400",
+  },
+  "pink-900": {
+    hex: "#831843",
+    name: "pink-900",
+  },
+  "purple-400": {
+    hex: "#C084FC",
+    name: "purple-400",
+  },
+  "purple-900": {
+    hex: "#581C87",
+    name: "purple-900",
+  },
+  "red-400": {
+    hex: "#F87171",
+    name: "red-400",
+  },
+  "red-500": {
+    hex: "#EF4444",
+    name: "red-500",
+  },
+  "red-900": {
+    hex: "#7F1D1D",
+    name: "red-900",
+  },
+  "red-950": {
+    hex: "#450A0A",
+    name: "red-950",
+  },
+  "sprout-100": {
+    hex: "#DDF8E0",
+    name: "sprout-100",
+  },
+  "sprout-200": {
+    hex: "#C2F2C7",
+    name: "sprout-200",
+  },
+  "sprout-300": {
+    hex: "#A3EAAB",
+    name: "sprout-300",
+  },
+  "sprout-400": {
+    hex: "#82E28D",
+    name: "sprout-400",
+  },
+  "sprout-50": {
+    hex: "#F2FCF3",
+    name: "sprout-50",
+  },
+  "sprout-500": {
+    hex: "#5DDF6C",
+    name: "sprout-500",
+  },
+  "sprout-600": {
+    hex: "#3DCC4D",
+    name: "sprout-600",
+  },
+  "sprout-700": {
+    hex: "#2EAA3C",
+    name: "sprout-700",
+  },
+  "sprout-800": {
+    hex: "#25812F",
+    name: "sprout-800",
+  },
+  "sprout-900": {
+    hex: "#1A5821",
+    name: "sprout-900",
+  },
+  "sprout-950": {
+    hex: "#0E2E12",
+    name: "sprout-950",
+  },
+  "yellow-400": {
+    hex: "#FACC15",
+    name: "yellow-400",
+  },
+  "yellow-500": {
+    hex: "#EAB308",
+    name: "yellow-500",
+  },
+  "yellow-900": {
+    hex: "#713F12",
+    name: "yellow-900",
+  },
+  "yellow-950": {
+    hex: "#422006",
+    name: "yellow-950",
+  },
+  "zinc-100": {
+    hex: "#b0b4ba",
+    name: "zinc-100",
+  },
+  "zinc-200": {
+    hex: "#696e77",
+    name: "zinc-200",
+  },
+  "zinc-300": {
+    hex: "#5a6169",
+    name: "zinc-300",
+  },
+  "zinc-400": {
+    hex: "#43484e",
+    name: "zinc-400",
+  },
+  "zinc-50": {
+    hex: "#edeef0",
+    name: "zinc-50",
+  },
+  "zinc-500": {
+    hex: "#363a3f",
+    name: "zinc-500",
+  },
+  "zinc-600": {
+    hex: "#2e3135",
+    name: "zinc-600",
+  },
+  "zinc-700": {
+    hex: "#272a2d",
+    name: "zinc-700",
+  },
+  "zinc-800": {
+    hex: "#212225",
+    name: "zinc-800",
+  },
+  "zinc-900": {
+    hex: "#18191b",
+    name: "zinc-900",
+  },
+  "zinc-950": {
+    hex: "#111113",
+    name: "zinc-950",
+  },
+}
+
+export const composite: Record<string, CompositeColor> = {
+  "bg-accent": {
+    color: primitive["green-300"],
+    name: "bg-accent",
+  },
+  "bg-accent-inverse": {
+    color: primitive["green-950"],
+    name: "bg-accent-inverse",
+  },
+  "bg-decorative-blue": {
+    color: primitive["blue-400"],
+    name: "bg-decorative-blue",
+  },
+  "bg-decorative-blue-inverse": {
+    color: primitive["blue-900"],
+    name: "bg-decorative-blue-inverse",
+  },
+  "bg-decorative-orange": {
+    color: primitive["orange-400"],
+    name: "bg-decorative-orange",
+  },
+  "bg-decorative-orange-inverse": {
+    color: primitive["orange-900"],
+    name: "bg-decorative-orange-inverse",
+  },
+  "bg-decorative-pink": {
+    color: primitive["pink-400"],
+    name: "bg-decorative-pink",
+  },
+  "bg-decorative-pink-inverse": {
+    color: primitive["pink-900"],
+    name: "bg-decorative-pink-inverse",
+  },
+  "bg-decorative-purple": {
+    color: primitive["purple-400"],
+    name: "bg-decorative-purple",
+  },
+  "bg-decorative-purple-inverse": {
+    color: primitive["purple-900"],
+    name: "bg-decorative-purple-inverse",
+  },
+  "bg-error": {
+    color: primitive["red-400"],
+    name: "bg-error",
+  },
+  "bg-error-inverse": {
+    color: primitive["red-950"],
+    name: "bg-error-inverse",
+  },
+  "bg-info": {
+    color: primitive["blue-400"],
+    name: "bg-info",
+  },
+  "bg-info-inverse": {
+    color: primitive["blue-950"],
+    name: "bg-info-inverse",
+  },
+  "bg-interactive": {
+    color: primitive["green-300"],
+    name: "bg-interactive",
+  },
+  "bg-interactive-disabled": {
+    color: primitive["green-950"],
+    name: "bg-interactive-disabled",
+  },
+  "bg-interactive-inverse": {
+    color: primitive["green-950"],
+    name: "bg-interactive-inverse",
+  },
+  "bg-inverse": {
+    color: primitive["zinc-700"],
+    name: "bg-inverse",
+  },
+  "bg-muted": {
+    color: primitive["zinc-800"],
+    name: "bg-muted",
+  },
+  "bg-muted-disabled": {
+    color: primitive["zinc-900"],
+    name: "bg-muted-disabled",
+  },
+  "bg-muted-secondary": {
+    color: primitive["zinc-700"],
+    name: "bg-muted-secondary",
+  },
+  "bg-muted-secondary-disabled": {
+    color: primitive["zinc-800"],
+    name: "bg-muted-secondary-disabled",
+  },
+  "bg-primary": {
+    color: primitive["zinc-950"],
+    name: "bg-primary",
+  },
+  "bg-secondary": {
+    color: primitive["zinc-900"],
+    name: "bg-secondary",
+  },
+  "bg-success": {
+    color: primitive["sprout-400"],
+    name: "bg-success",
+  },
+  "bg-success-inverse": {
+    color: primitive["sprout-950"],
+    name: "bg-success-inverse",
+  },
+  "bg-tertiary": {
+    color: primitive["zinc-800"],
+    name: "bg-tertiary",
+  },
+  "bg-warning": {
+    color: primitive["yellow-400"],
+    name: "bg-warning",
+  },
+  "bg-warning-inverse": {
+    color: primitive["yellow-950"],
+    name: "bg-warning-inverse",
+  },
+  "border-accent": {
+    color: primitive["green-500"],
+    name: "border-accent",
+  },
+  "border-error": {
+    color: primitive["red-500"],
+    name: "border-error",
+  },
+  "border-info": {
+    color: primitive["blue-500"],
+    name: "border-info",
+  },
+  "border-inverse": {
+    color: primitive["zinc-50"],
+    name: "border-inverse",
+  },
+  "border-primary": {
+    color: primitive["zinc-900"],
+    name: "border-primary",
+  },
+  "border-secondary": {
+    color: primitive["zinc-800"],
+    name: "border-secondary",
+  },
+  "border-success": {
+    color: primitive["green-500"],
+    name: "border-success",
+  },
+  "border-tertiary": {
+    color: primitive["zinc-700"],
+    name: "border-tertiary",
+  },
+  "border-warning": {
+    color: primitive["yellow-500"],
+    name: "border-warning",
+  },
+  "text-accent": {
+    color: primitive["green-300"],
+    name: "text-accent",
+  },
+  "text-accent-muted": {
+    color: primitive["green-900"],
+    name: "text-accent-muted",
+  },
+  "text-error": {
+    color: primitive["red-400"],
+    name: "text-error",
+  },
+  "text-error-muted": {
+    color: primitive["red-900"],
+    name: "text-error-muted",
+  },
+  "text-info": {
+    color: primitive["blue-500"],
+    name: "text-info",
+  },
+  "text-info-muted": {
+    color: primitive["blue-900"],
+    name: "text-info-muted",
+  },
+  "text-inverse": {
+    color: primitive["zinc-950"],
+    name: "text-inverse",
+  },
+  "text-muted": {
+    color: primitive["zinc-500"],
+    name: "text-muted",
+  },
+  "text-on-accent": {
+    color: primitive["green-950"],
+    name: "text-on-accent",
+  },
+  "text-on-disabled": {
+    color: primitive["zinc-400"],
+    name: "text-on-disabled",
+  },
+  "text-on-error": {
+    color: primitive["red-950"],
+    name: "text-on-error",
+  },
+  "text-on-info": {
+    color: primitive["blue-950"],
+    name: "text-on-info",
+  },
+  "text-on-muted": {
+    color: primitive["zinc-50"],
+    name: "text-on-muted",
+  },
+  "text-on-success": {
+    color: primitive["sprout-950"],
+    name: "text-on-success",
+  },
+  "text-on-warning": {
+    color: primitive["yellow-950"],
+    name: "text-on-warning",
+  },
+  "text-primary": {
+    color: primitive["neutral-50"],
+    name: "text-primary",
+  },
+  "text-secondary": {
+    color: primitive["neutral-200"],
+    name: "text-secondary",
+  },
+  "text-success": {
+    color: primitive["sprout-500"],
+    name: "text-success",
+  },
+  "text-success-muted": {
+    color: primitive["sprout-900"],
+    name: "text-success-muted",
+  },
+  "text-tertiary": {
+    color: primitive["neutral-400"],
+    name: "text-tertiary",
+  },
+  "text-warning": {
+    color: primitive["yellow-500"],
+    name: "text-warning",
+  },
+  "text-warning-muted": {
+    color: primitive["yellow-900"],
+    name: "text-warning-muted",
+  },
+}

package/packages/ui/src/foundations/colors/generate-css.ts

@@ -0,0 +1,34 @@
+// oxlint-disable func-style
+// oxlint-disable import/no-nodejs-modules
+
+import { writeFileSync } from "node:fs"
+import { tailwindV3Colors } from "./tailwind-v3"
+
+// Generate CSS custom properties
+const generateCSS = (wrapper: string) => {
+  const cssLines = [wrapper === "root" ? ":root {" : "@theme {"]
+
+  // Sort the color names for consistent output
+  const sortedKeys = Object.keys(tailwindV3Colors).toSorted()
+
+  for (const colorName of sortedKeys) {
+    const hexValue = tailwindV3Colors[colorName]
+    cssLines.push(`  --color-${colorName}: ${hexValue};`)
+  }
+
+  cssLines.push("}")
+
+  return cssLines.join("\n")
+}
+
+// Write the Tailwind v3 CSS file
+const cssV3Content = generateCSS("root")
+const outputPathV3 = new URL("retail-design-system.css", import.meta.url)
+writeFileSync(outputPathV3, cssV3Content, "utf8")
+console.log(`✓ Generated ${outputPathV3.pathname}`)
+
+// Write the Tailwind v4 CSS file
+const cssV4Content = generateCSS("theme")
+const outputPathV4 = new URL("tailwind-v4.css", import.meta.url)
+writeFileSync(outputPathV4, cssV4Content, "utf8")
+console.log(`✓ Generated ${outputPathV4.pathname}`)

package/packages/ui/src/foundations/colors/retail-design-system.css

@@ -0,0 +1,116 @@
+:root {
+  --color-bg-accent: #86EFAC;
+  --color-bg-accent-inverse: #052E16;
+  --color-bg-decorative-blue: #60A5FA;
+  --color-bg-decorative-blue-inverse: #1E3A8A;
+  --color-bg-decorative-orange: #FB923C;
+  --color-bg-decorative-orange-inverse: #7C2D12;
+  --color-bg-decorative-pink: #F472B6;
+  --color-bg-decorative-pink-inverse: #831843;
+  --color-bg-decorative-purple: #C084FC;
+  --color-bg-decorative-purple-inverse: #581C87;
+  --color-bg-error: #F87171;
+  --color-bg-error-inverse: #450A0A;
+  --color-bg-info: #60A5FA;
+  --color-bg-info-inverse: #172554;
+  --color-bg-interactive: #86EFAC;
+  --color-bg-interactive-disabled: #052E16;
+  --color-bg-interactive-inverse: #052E16;
+  --color-bg-inverse: #272a2d;
+  --color-bg-muted: #212225;
+  --color-bg-muted-disabled: #18191b;
+  --color-bg-muted-secondary: #272a2d;
+  --color-bg-muted-secondary-disabled: #212225;
+  --color-bg-primary: #111113;
+  --color-bg-secondary: #18191b;
+  --color-bg-success: #82E28D;
+  --color-bg-success-inverse: #0E2E12;
+  --color-bg-tertiary: #212225;
+  --color-bg-warning: #FACC15;
+  --color-bg-warning-inverse: #422006;
+  --color-blue-400: #60A5FA;
+  --color-blue-500: #3B82F6;
+  --color-blue-900: #1E3A8A;
+  --color-blue-950: #172554;
+  --color-border-accent: #22C55E;
+  --color-border-error: #EF4444;
+  --color-border-info: #3B82F6;
+  --color-border-inverse: #edeef0;
+  --color-border-primary: #18191b;
+  --color-border-secondary: #212225;
+  --color-border-success: #22C55E;
+  --color-border-tertiary: #272a2d;
+  --color-border-warning: #EAB308;
+  --color-green-100: #DCFCE7;
+  --color-green-200: #BBF7D0;
+  --color-green-300: #86EFAC;
+  --color-green-400: #4ADE80;
+  --color-green-50: #F0FDF4;
+  --color-green-500: #22C55E;
+  --color-green-600: #16A34A;
+  --color-green-700: #15803D;
+  --color-green-800: #166534;
+  --color-green-900: #14532D;
+  --color-green-950: #052E16;
+  --color-neutral-200: #E4E4E7;
+  --color-neutral-400: #A1A1AA;
+  --color-neutral-50: #FAFAFA;
+  --color-orange-400: #FB923C;
+  --color-orange-900: #7C2D12;
+  --color-pink-400: #F472B6;
+  --color-pink-900: #831843;
+  --color-purple-400: #C084FC;
+  --color-purple-900: #581C87;
+  --color-red-400: #F87171;
+  --color-red-500: #EF4444;
+  --color-red-900: #7F1D1D;
+  --color-red-950: #450A0A;
+  --color-sprout-100: #DDF8E0;
+  --color-sprout-200: #C2F2C7;
+  --color-sprout-300: #A3EAAB;
+  --color-sprout-400: #82E28D;
+  --color-sprout-50: #F2FCF3;
+  --color-sprout-500: #5DDF6C;
+  --color-sprout-600: #3DCC4D;
+  --color-sprout-700: #2EAA3C;
+  --color-sprout-800: #25812F;
+  --color-sprout-900: #1A5821;
+  --color-sprout-950: #0E2E12;
+  --color-text-accent: #86EFAC;
+  --color-text-accent-muted: #14532D;
+  --color-text-error: #F87171;
+  --color-text-error-muted: #7F1D1D;
+  --color-text-info: #3B82F6;
+  --color-text-info-muted: #1E3A8A;
+  --color-text-inverse: #111113;
+  --color-text-muted: #363a3f;
+  --color-text-on-accent: #052E16;
+  --color-text-on-disabled: #43484e;
+  --color-text-on-error: #450A0A;
+  --color-text-on-info: #172554;
+  --color-text-on-muted: #edeef0;
+  --color-text-on-success: #0E2E12;
+  --color-text-on-warning: #422006;
+  --color-text-primary: #FAFAFA;
+  --color-text-secondary: #E4E4E7;
+  --color-text-success: #5DDF6C;
+  --color-text-success-muted: #1A5821;
+  --color-text-tertiary: #A1A1AA;
+  --color-text-warning: #EAB308;
+  --color-text-warning-muted: #713F12;
+  --color-yellow-400: #FACC15;
+  --color-yellow-500: #EAB308;
+  --color-yellow-900: #713F12;
+  --color-yellow-950: #422006;
+  --color-zinc-100: #b0b4ba;
+  --color-zinc-200: #696e77;
+  --color-zinc-300: #5a6169;
+  --color-zinc-400: #43484e;
+  --color-zinc-50: #edeef0;
+  --color-zinc-500: #363a3f;
+  --color-zinc-600: #2e3135;
+  --color-zinc-700: #272a2d;
+  --color-zinc-800: #212225;
+  --color-zinc-900: #18191b;
+  --color-zinc-950: #111113;
+}

package/packages/ui/src/foundations/colors/tailwind-v3.ts

@@ -0,0 +1,18 @@
+// oxlint-disable guard-for-in
+
+import {
+  type CompositeColorName,
+  composite,
+  type PrimitiveColorName,
+  primitive,
+} from "@/foundations/colors/colors"
+
+export const tailwindV3Colors: Record<CompositeColorName | PrimitiveColorName, string> = {}
+
+for (const key in primitive) {
+  tailwindV3Colors[primitive[key].name] = primitive[key].hex
+}
+
+for (const key in composite) {
+  tailwindV3Colors[composite[key].name] = composite[key].color.hex
+}