Update "PixelGenius Platform" from zeroheight

packages/design-system/src/scripts/build-colors-style.ts

@@ -44,10 +44,10 @@ const generateScssContent = (
 // Function to build and write SCSS for a given theme
 export const buildColorsScss = (theme: "dark" | "light"): void => {
   // Define the input and output file paths
-  const partFileName = theme === "dark" ? "Default" : "Light";
+  const partFileName = theme === "dark" ? "default" : "light";
   const inputFilePath = path.join(
     tokensDir,
-    `token_Color_${partFileName}.json`,
+    `token_color_${partFileName}.json`,
   );
   const outputFilePath = path.join(stylesDir, `_colors-${theme}.scss`);
 

packages/design-system/src/scripts/build-colors-tailwind.ts

@@ -31,7 +31,7 @@ const generateColorsTsContent = (tokens: Record<string, any>): string => {
 
 // Function to build and write colors.ts
 export const buildColorsTailwind = (): void => {
-  const inputFilePath = path.join(tokensDir, `token_Color_Light.json`);
+  const inputFilePath = path.join(tokensDir, `token_color_light.json`);
   const outputFilePath = path.join(outputDir, `colors.ts`);
 
   // Ensure the input file exists

packages/design-system/src/scripts/build-palette-style.ts

@@ -3,7 +3,7 @@ import * as path from 'path';
 import { hexToHsl } from './utills.js';
 
 // Paths for input and output files
-const inputFilePath = path.join(__dirname, '../tokens/token_Palette_Primitive.json');
+const inputFilePath = path.join(__dirname, '../tokens/token_palette_primitive.json');
 const outputFilePath = path.join(__dirname, '../styles/base/_palette.scss');
 
 // Generate SCSS content with groups separated by an empty line

packages/design-system/src/scripts/build-palette-tailwind.ts

@@ -2,7 +2,7 @@ import * as fs from "fs";
 import * as path from "path";
 
 // Paths for input and output files
-const inputFilePath = path.join(__dirname, "../tokens/token_Palette_Primitive.json");
+const inputFilePath = path.join(__dirname, "../tokens/token_palette_primitive.json");
 const outputFilePath = path.join(__dirname, "../tailwind/palette.ts");
 
 // Generate TypeScript content with groups of palette colors

packages/design-system/src/styles/base/_colors-dark.scss

@@ -3,13 +3,14 @@
 @layer base {
   :root {
     --accent: var(--zinc-800);
-    --accent-foreground: var(--General-white);
+    --accent-foreground: var(--general-white);
     --background: var(--zinc-950);
+    --black: var(--general-black);
     --border: var(--zinc-800);
     --card: var(--zinc-900);
-    --card-foreground: var(--General-white);
+    --card-foreground: var(--general-white);
     --destructive: var(--rose-500);
-    --destructive-foreground: var(--General-black);
+    --destructive-foreground: var(--general-black);
     --error: var(--rose-500);
     --error-border: var(--red-900);
     --error-foreground: var(--red-100);
@@ -21,19 +22,20 @@
     --muted: var(--zinc-800);
     --muted-foreground: var(--zinc-400);
     --popover: var(--zinc-950);
-    --popover-foreground: var(--General-white);
+    --popover-foreground: var(--general-white);
     --primary: var(--purple-500);
-    --primary-foreground: var(--General-white);
+    --primary-foreground: var(--general-white);
     --primary-light: var(--purple-100);
     --ring: var(--zinc-600);
     --secondary: var(--zinc-800);
-    --secondary-foreground: var(--General-white);
+    --secondary-foreground: var(--general-white);
     --success: var(--emerald-500);
     --success-border: var(--green-900);
     --success-foreground: var(--green-50);
     --table-header: rgba(39, 39, 42, 0.5000);
     --warning: var(--amber-500);
     --warning-border: var(--amber-900);
     --warning-foreground: var(--amber-100);
+    --white: var(--general-white);
   }
 }

packages/design-system/src/styles/base/_colors-light.scss

@@ -4,12 +4,13 @@
   .light {
     --accent: var(--zinc-100);
     --accent-foreground: var(--zinc-900);
-    --background: var(--General-white);
+    --background: var(--general-white);
+    --black: var(--general-black);
     --border: var(--zinc-200);
     --card: var(--zinc-100);
     --card-foreground: var(--slate-900);
     --destructive: var(--red-600);
-    --destructive-foreground: var(--General-white);
+    --destructive-foreground: var(--general-white);
     --error: var(--red-500);
     --error-border: var(--red-200);
     --error-foreground: var(--red-600);
@@ -20,10 +21,10 @@
     --input: var(--zinc-200);
     --muted: var(--zinc-100);
     --muted-foreground: var(--zinc-500);
-    --popover: var(--General-white);
+    --popover: var(--general-white);
     --popover-foreground: var(--slate-900);
     --primary: var(--purple-500);
-    --primary-foreground: var(--General-white);
+    --primary-foreground: var(--general-white);
     --primary-light: var(--purple-100);
     --ring: var(--zinc-400);
     --secondary: var(--zinc-100);
@@ -34,6 +35,7 @@
     --table-header: rgba(244, 244, 245, 0.5000);
     --warning: var(--amber-500);
     --warning-border: var(--amber-200);
-    --warning-foreground: var(--General-white);
+    --warning-foreground: var(--general-white);
+    --white: var(--general-white);
   }
 }

packages/design-system/src/styles/base/_palette.scss

@@ -1,8 +1,5 @@
 @layer base {
   :root {
-  --General-black: 0 0% 0%;
-  --General-white: 0 0% 100%;
-
   --amber-50: 48 100% 96%;
   --amber-100: 48 96% 89%;
   --amber-200: 48 97% 77%;
@@ -63,6 +60,10 @@
   --fuchsia-900: 297 64% 28%;
   --fuchsia-950: 297 90% 16%;
 
+  --general-black: 0 0% 0%;
+  --general-white: 0 0% 100%;
+
+  --gray-50: 210 20% 98%;
   --gray-100: 220 14% 96%;
   --gray-200: 220 13% 91%;
   --gray-300: 216 12% 84%;
@@ -73,7 +74,6 @@
   --gray-800: 215 28% 17%;
   --gray-900: 221 39% 11%;
   --gray-950: 224 71% 4%;
-  --gray-ali: 210 20% 98%;
 
   --green-50: 138 76% 97%;
   --green-100: 141 84% 93%;

packages/design-system/src/tailwind/colors.ts

@@ -2,6 +2,7 @@ export const colors = {
   "accent": "hsl(var(--accent))",
   "accent-foreground": "hsl(var(--accent-foreground))",
   "background": "hsl(var(--background))",
+  "black": "hsl(var(--black))",
   "border": "hsl(var(--border))",
   "card": "hsl(var(--card))",
   "card-foreground": "hsl(var(--card-foreground))",
@@ -32,4 +33,5 @@ export const colors = {
   "warning": "hsl(var(--warning))",
   "warning-border": "hsl(var(--warning-border))",
   "warning-foreground": "hsl(var(--warning-foreground))",
+  "white": "hsl(var(--white))",
 };

packages/design-system/src/tailwind/palette.ts

@@ -1,8 +1,4 @@
 export const palette = {
-  "General": {
-    "black": "var(--General-black)",
-    "white": "var(--General-white)",
-  },
   "amber": {
     "50": "var(--amber-50)",
     "100": "var(--amber-100)",
@@ -68,7 +64,12 @@ export const palette = {
     "900": "var(--fuchsia-900)",
     "950": "var(--fuchsia-950)",
   },
+  "general": {
+    "black": "var(--general-black)",
+    "white": "var(--general-white)",
+  },
   "gray": {
+    "50": "var(--gray-50)",
     "100": "var(--gray-100)",
     "200": "var(--gray-200)",
     "300": "var(--gray-300)",
@@ -79,7 +80,6 @@ export const palette = {
     "800": "var(--gray-800)",
     "900": "var(--gray-900)",
     "950": "var(--gray-950)",
-    "ali": "var(--gray-ali)",
   },
   "green": {
     "50": "var(--green-50)",

packages/design-system/src/tokens/token_Icon_size_Mode 1.json

@@ -0,0 +1,14 @@
+{
+  "LG": {
+    "$type": "number",
+    "$value": 24
+  },
+  "MD": {
+    "$type": "number",
+    "$value": 18
+  },
+  "XS": {
+    "$type": "number",
+    "$value": 16
+  }
+}

packages/design-system/src/tokens/token_color_default.json

@@ -0,0 +1,176 @@
+{
+  "color": {
+    "accent": {
+      "$type": "color",
+      "$value": "{zinc.800}",
+      "$description": "Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc"
+    },
+    "accent-foreground": {
+      "$type": "color",
+      "$value": "{general.white}",
+      "$description": "Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc"
+    },
+    "background": {
+      "$type": "color",
+      "$value": "{zinc.950}",
+      "$description": "Default background color of <body />...etc"
+    },
+    "black": {
+      "$type": "color",
+      "$value": "{general.black}"
+    },
+    "border": {
+      "$type": "color",
+      "$value": "{zinc.800}",
+      "$description": "Default border color"
+    },
+    "card": {
+      "$type": "color",
+      "$value": "{zinc.900}",
+      "$description": "Background color for <Card />"
+    },
+    "card-foreground": {
+      "$type": "color",
+      "$value": "{general.white}",
+      "$description": "Foreground color for <Card />"
+    },
+    "destructive": {
+      "$type": "color",
+      "$value": "{rose.500}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "destructive-foreground": {
+      "$type": "color",
+      "$value": "{general.black}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "error": {
+      "$type": "color",
+      "$value": "{rose.500}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "error-border": {
+      "$type": "color",
+      "$value": "{red.900}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "error-foreground": {
+      "$type": "color",
+      "$value": "{red.100}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "foreground": {
+      "$type": "color",
+      "$value": "{zinc.50}",
+      "$description": "Default foreground color of <body />...etc"
+    },
+    "information": {
+      "$type": "color",
+      "$value": "{sky.500}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "information-border": {
+      "$type": "color",
+      "$value": "{blue.900}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "information-foreground": {
+      "$type": "color",
+      "$value": "{blue.100}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "input": {
+      "$type": "color",
+      "$value": "{zinc.800}",
+      "$description": "Border color for inputs such as <Input />, <Select />, <Textarea />"
+    },
+    "muted": {
+      "$type": "color",
+      "$value": "{zinc.800}",
+      "$description": "Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch />"
+    },
+    "muted-foreground": {
+      "$type": "color",
+      "$value": "{zinc.400}",
+      "$description": "Muted Foreground such as <TabsList />, <Skeleton /> and <Switch />"
+    },
+    "popover": {
+      "$type": "color",
+      "$value": "{zinc.950}",
+      "$description": "Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover />"
+    },
+    "popover-foreground": {
+      "$type": "color",
+      "$value": "{general.white}",
+      "$description": "Foreground color for popovers such as <DropdownMenu />, <HoverCard />, <Popover />"
+    },
+    "primary": {
+      "$type": "color",
+      "$value": "{purple.500}",
+      "$description": "Primary colors for <Button />"
+    },
+    "primary-foreground": {
+      "$type": "color",
+      "$value": "{general.white}",
+      "$description": "Secondary colors for <Button />"
+    },
+    "primary-light": {
+      "$type": "color",
+      "$value": "{purple.100}"
+    },
+    "ring": {
+      "$type": "color",
+      "$value": "{zinc.600}",
+      "$description": "Used for focus ring"
+    },
+    "secondary": {
+      "$type": "color",
+      "$value": "{zinc.800}",
+      "$description": "Secondary colors for <Button />"
+    },
+    "secondary-foreground": {
+      "$type": "color",
+      "$value": "{general.white}",
+      "$description": "Secondary colors for <Button />"
+    },
+    "success": {
+      "$type": "color",
+      "$value": "{emerald.500}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "success-border": {
+      "$type": "color",
+      "$value": "{green.900}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "success-foreground": {
+      "$type": "color",
+      "$value": "{green.50}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "table-header": {
+      "$type": "color",
+      "$value": "rgba(39, 39, 42, 0.5000)",
+      "$description": "Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch />"
+    },
+    "warning": {
+      "$type": "color",
+      "$value": "{amber.500}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "warning-border": {
+      "$type": "color",
+      "$value": "{amber.900}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "warning-foreground": {
+      "$type": "color",
+      "$value": "{amber.100}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "white": {
+      "$type": "color",
+      "$value": "{general.white}"
+    }
+  }
+}