feat: handle Automating the Design System with Zero Height

.github/workflows/build-design-system.yml

@@ -0,0 +1,34 @@
+name: Build Design System
+
+on:
+  push:
+    paths:
+      - "packages/design-system/src/tokens/**" # Trigger only when files in the tokens folder change
+  pull_request:
+    paths:
+      - "packages/design-system/src/tokens/**"
+
+jobs:
+  build-design-system:
+    runs-on: ubuntu-latest
+
+    steps:
+    # Step 1: Checkout the repository
+    - name: Checkout repository
+      uses: actions/checkout@v3
+
+    # Step 2: Set up Bun
+    - name: Setup Bun
+      uses: oven-sh/setup-bun@v1
+      with:
+        bun-version: latest
+
+    # Step 3: Navigate to the design-system package and install dependencies
+    - name: Install dependencies
+      working-directory: ./packages/design-system
+      run: bun install
+
+    # Step 4: Run the build script
+    - name: Run build script
+      working-directory: ./packages/design-system
+      run: bun run build

.hintrc

@@ -1,5 +1,8 @@
 {
   "extends": [
     "development"
-  ]
+  ],
+  "hints": {
+    "typescript-config/consistent-casing": "off"
+  }
 }

apps/core/app/auth/layout.tsx

@@ -1,4 +1,4 @@
-import "@repo/ui/globals.css";
+import "@repo/ui/globals.scss";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {

apps/core/app/layout.tsx

@@ -1,4 +1,4 @@
-import "@repo/ui/globals.css";
+import "@repo/ui/globals.scss";
 import { cn } from "@repo/ui/lib/utils";
 import type { Metadata } from "next";
 import { ThemeProvider } from "next-themes";

packages/design-system/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@repo/design-system",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "bun run src/scripts/build.ts"
+  },
+  "exports": {
+    "./styles": "./src/styles/main.scss", 
+    "./tailwind": "./src/tailwind/config.ts"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "*",
+    "style-dictionary": "^4.3.2"
+  }
+}

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

@@ -0,0 +1,79 @@
+import * as fs from "fs";
+import * as path from "path";
+
+// Paths for token files
+const tokensDir = path.join(__dirname, "../tokens");
+const stylesDir = path.join(__dirname, "../styles/base");
+const resolveTokenReference = (value: string): string => {
+  return value.replace(/{(.+?)}/g, (_, match) => `var(--${match.replace(".", "-")})`);
+};
+
+// Generate SCSS content for a given theme
+const generateScssContent = (
+  theme: "dark" | "light",
+  tokens: Record<string, any>,
+): string => {
+  const lines: string[] = [];
+
+  const selector = theme === "dark" ? ":root" : ".light";
+
+  // Add the @use directive
+  lines.push(`@use "_palette.scss" as *;\n`);
+
+  // Start the layer and class
+  lines.push(`@layer base {`);
+  lines.push(`  ${selector} {`);
+
+  // Process each token in the "color" group
+  const colorTokens = tokens.color;
+  for (const key in colorTokens) {
+    const value = colorTokens[key].$value;
+
+    // Convert token reference (e.g., {zinc.200}) to CSS variable (e.g., var(--zinc.200))
+    const resolvedValue = resolveTokenReference(value);
+    lines.push(`    --${key}: ${resolvedValue};`);
+  }
+
+  // Close the class and layer
+  lines.push(`  }`);
+  lines.push(`}`);
+
+  return lines.join("\n");
+};
+
+// 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 inputFilePath = path.join(
+    tokensDir,
+    `token_Color_${partFileName}.json`,
+  );
+  const outputFilePath = path.join(stylesDir, `_colors-${theme}.scss`);
+
+  // Ensure the input file exists
+  if (!fs.existsSync(inputFilePath)) {
+    console.error(`Token file not found: ${inputFilePath}`);
+    return;
+  }
+
+  // Read and parse the JSON file
+  const rawData = fs.readFileSync(inputFilePath, "utf-8");
+  const tokens = JSON.parse(rawData);
+
+  // Generate SCSS content
+  const scssContent = generateScssContent(theme, tokens);
+
+  // Ensure the output directory exists
+  if (!fs.existsSync(stylesDir)) {
+    fs.mkdirSync(stylesDir, { recursive: true });
+  }
+
+  // Write the SCSS content to the file
+  fs.writeFileSync(outputFilePath, scssContent, "utf-8");
+  console.log(`SCSS file created for ${theme} theme at: ${outputFilePath}`);
+};
+
+// Reusable calls for light and dark themes
+buildColorsScss("light");
+buildColorsScss("dark");

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

@@ -0,0 +1,61 @@
+import * as fs from "fs";
+import * as path from "path";
+
+// Paths for token files
+const tokensDir = path.join(__dirname, "../tokens");
+const outputDir = path.join(__dirname, "../tailwind");
+
+// Utility to resolve token references to match the key directly
+const resolveTokenReference = (key: string): string => {
+  return `hsl(var(--${key}))`;
+};
+
+// Generate TypeScript content for colors
+const generateColorsTsContent = (tokens: Record<string, any>): string => {
+  const colorTokens = tokens.color;
+  const lines: string[] = [];
+
+  // Add the TypeScript export header
+  lines.push(`export const colors = {`);
+
+  // Process each token and use the key for the variable name
+  for (const key in colorTokens) {
+    lines.push(`  "${key}": "${resolveTokenReference(key)}",`);
+  }
+
+  // Close the object
+  lines.push(`};`);
+
+  return lines.join("\n");
+};
+
+// Function to build and write colors.ts
+export const buildColorsTailwind = (): void => {
+  const inputFilePath = path.join(tokensDir, `token_Color_Light.json`);
+  const outputFilePath = path.join(outputDir, `colors.ts`);
+
+  // Ensure the input file exists
+  if (!fs.existsSync(inputFilePath)) {
+    console.error(`Token file not found: ${inputFilePath}`);
+    return;
+  }
+
+  // Read and parse the JSON file
+  const rawData = fs.readFileSync(inputFilePath, "utf-8");
+  const tokens = JSON.parse(rawData);
+
+  // Generate TypeScript content
+  const tsContent = generateColorsTsContent(tokens);
+
+  // Ensure the output directory exists
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+
+  // Write the TypeScript content to the file
+  fs.writeFileSync(outputFilePath, tsContent, "utf-8");
+  console.log(`colors.ts file created at: ${outputFilePath}`);
+};
+
+// Build colors.ts
+buildColorsTailwind();

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

@@ -0,0 +1,40 @@
+import * as fs from "fs";
+import * as path from "path";
+
+// Paths for the output file
+const outputDir = path.join(__dirname, "../tailwind");
+const outputFilePath = path.join(outputDir, "config.ts");
+
+// Content for the tailwindConfig.ts file
+const generateTailwindConfigContent = (): string => {
+  return `
+import { colors } from "./colors";
+import { palette } from "./palette";
+
+export const tailwindConfig = {
+  theme: {
+    extend: {
+      colors: { ...colors, ...palette },
+    },
+  },
+};
+`.trim();
+};
+
+// Function to create the tailwindConfig.ts file
+export const buildTailwindConfig = (): void => {
+  // Generate the content
+  const configContent = generateTailwindConfigContent();
+
+  // Ensure the output directory exists
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+
+  // Write the content to the file
+  fs.writeFileSync(outputFilePath, configContent, "utf-8");
+  console.log(`tailwindConfig.ts file created at: ${outputFilePath}`);
+};
+
+// Run the script
+buildTailwindConfig();

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

@@ -0,0 +1,32 @@
+import * as fs from "fs";
+import * as path from "path";
+
+// Paths for the output file
+const outputDir = path.join(__dirname, "../styles");
+const outputFilePath = path.join(outputDir, "main.scss");
+
+// Content for the main.scss file
+const generateMainScssContent = (): string => {
+  return `
+@use "./base/_colors-dark.scss" as *;
+@use "./base/_colors-light.scss" as *;
+`.trim();
+};
+
+// Function to create the main.scss file
+export const buildMainScss = (): void => {
+  // Generate the content
+  const scssContent = generateMainScssContent();
+
+  // Ensure the output directory exists
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+
+  // Write the content to the file
+  fs.writeFileSync(outputFilePath, scssContent, "utf-8");
+  console.log(`main.scss file created at: ${outputFilePath}`);
+};
+
+// Run the script
+buildMainScss();

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

@@ -0,0 +1,54 @@
+import * as fs from 'fs';
+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 outputFilePath = path.join(__dirname, '../styles/base/_palette.scss');
+
+// Generate SCSS content with groups separated by an empty line
+const generateScssContent = (tokens: Record<string, any>): string => {
+  const lines: string[] = [];
+
+  for (const group in tokens) {
+    const groupTokens = tokens[group];
+    for (const key in groupTokens) {
+      const value = groupTokens[key];
+      if (value.$type === 'color') {
+        lines.push(`  --${group}-${key}: ${hexToHsl(value.$value)};`);
+      }
+    }
+    lines.push(''); // Add an empty line after each group
+  }
+
+  return `
+@layer base {
+  :root {
+${lines.join('\n')}
+  }
+}
+`.trim();
+};
+
+// Function to build and write SCSS content
+export const buildPaletteScss = (): void => {
+  // Read and parse the JSON file
+  const rawData = fs.readFileSync(inputFilePath, 'utf-8');
+  const tokens = JSON.parse(rawData);
+
+  // Generate SCSS content
+  const scssContent = generateScssContent(tokens);
+
+  // Ensure the output directory exists
+  const outputDir = path.dirname(outputFilePath);
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+
+  // Write the SCSS content to the file
+  fs.writeFileSync(outputFilePath, scssContent, 'utf-8');
+  console.log(`SCSS file created at: ${outputFilePath}`);
+};
+
+// Run the script
+buildPaletteScss();