@rte-ds/core 1.2.1

package/design-tokens/tokens/public/themes/base/_violet-dark.scss

@@ -0,0 +1,171 @@
+// This file is auto-generated. Do not edit directly.
+
+@use '../../../../primitives/colors' as *;
+@use '../../../../primitives/devColors' as *;
+
+$violet-dark: (
+  "background-default": $greyscale-900,
+  "background-hover": $greyscale-800,
+  "background-neutral-regular-default": $greyscale-700,
+  "background-neutral-regular-hover": $greyscale-550,
+  "background-neutral-bold-default": $greyscale-200,
+  "background-neutral-bold-hover": $greyscale-50,
+  "background-neutral-navigation-default": $greyscale-50,
+  "background-neutral-navigation-hover": $greyscale-100,
+  "background-disabled": $greyscale-800,
+  "background-inverse": $core-white,
+  "background-brand-default": $violet-300,
+  "background-brand-hover": $violet-200,
+  "background-brand-pressed": $violet-100,
+  "background-brand-selected-default": $violet-300,
+  "background-brand-selected-hover": $violet-200,
+  "background-brand-unselected-default": $violet-700,
+  "background-brand-unselected-hover": $violet-600,
+  "background-brand-inverse-default": $greyscale-900,
+  "background-brand-inverse-hover": $violet-700,
+  "background-brand-inverse-pressed": $violet-600,
+  "background-brand-navigation-default": $violet-950,
+  "background-brand-navigation-hover": $violet-900,
+  "background-brand-navigation-pressed": $violet-700,
+  "background-danger-default": $rouge-indications-500,
+  "background-danger-hover": $rouge-indications-400,
+  "background-danger-pressed": $rouge-indications-300,
+  "background-info-default": $bleu-digital-400,
+  "background-warning-default": $jaune-500,
+  "background-success-default": $vert-digital-400,
+  "border-primary": $greyscale-400,
+  "border-secondary": $greyscale-600,
+  "border-tertiary": $greyscale-800,
+  "border-divider": $greyscale-400,
+  "border-disabled": $greyscale-700,
+  "border-inverse": $greyscale-900,
+  "border-brand-default": $violet-0,
+  "border-brand-focused": $violet-0,
+  "border-brand-navigation-active": $violet-700,
+  "border-brand-navigation-divider": $violet-800,
+  "border-danger": $rouge-indications-500,
+  "border-info": $bleu-digital-400,
+  "border-warning": $jaune-indications-400,
+  "border-success": $vert-digital-400,
+  "content-primary": $core-white,
+  "content-secondary": $greyscale-100,
+  "content-tertiary": $greyscale-300,
+  "content-primary-inverse": $greyscale-900,
+  "content-disabled": $greyscale-700,
+  "content-brand-default": $violet-0,
+  "content-brand-hover": $violet-50,
+  "content-brand-pressed": $violet-100,
+  "content-brand-navigation-default": $violet-100,
+  "content-brand-navigation-hover": $violet-50,
+  "content-brand-navigation-disabled": $violet-700,
+  "content-link-default": $bleu-digital-500,
+  "content-link-hover": $bleu-digital-400,
+  "content-link-pressed": $bleu-digital-300,
+  "content-link-visited-default": $violet-500,
+  "content-link-visited-hover": $violet-400,
+  "content-link-visited-pressed": $violet-300,
+  "content-danger-default": $rouge-indications-500,
+  "content-danger-hover": $rouge-indications-400,
+  "content-danger-inverse": $core-white,
+  "content-success-default": $vert-digital-400,
+  "content-success-hover": $vert-digital-500,
+  "content-info-default": $bleu-digital-400,
+  "content-info-hover": $bleu-digital-500,
+  "content-decorative": $greyscale-900,
+  "brand-navigation-divider": $violet-800,
+  "brand-navigation-divider-2": $violet-800,
+  "brand-navigation-divider-3": $violet-800,
+  "brand-navigation-divider-4": $violet-800,
+  "chart-brand": $violet-600,
+  "chart-neutral": $greyscale-350,
+  "chart-category-1": $bleu-iceberg-500,
+  "chart-category-2": $fuschia-500,
+  "chart-category-3": $violet-600,
+  "chart-category-4": $vert-foret-500,
+  "chart-category-5": $marine-900,
+  "chart-category-6": $jaune-indications-500,
+  "chart-category-7": $taupe-700,
+  "chart-category-8": $bleu-petrole-400,
+  "chart-bleu-iceberg": $bleu-iceberg-100,
+  "chart-bleu-iceberg-bold": $bleu-iceberg-500,
+  "chart-vert-foret": $vert-foret-100,
+  "chart-vert-foret-bold": $vert-foret-400,
+  "chart-violet": $violet-300,
+  "chart-violet-bold": $violet-600,
+  "chart-bleu-rte": $bleu-rte-100,
+  "chart-bleu-rte-bold": $bleu-rte-600,
+  "chart-bleu-digital": $bleu-digital-100,
+  "chart-bleu-digital-bold": $bleu-digital-500,
+  "chart-marine": $marine-100,
+  "chart-marine-bold": $marine-500,
+  "chart-bleu-petrole": $bleu-petrole-100,
+  "chart-bleu-petrole-bold": $bleu-petrole-500,
+  "chart-bleu-cyan": $bleu-cyan-100,
+  "chart-bleu-cyan-bold": $bleu-cyan-500,
+  "chart-vert": $vert-100,
+  "chart-vert-bold": $vert-500,
+  "chart-vert-indications": $vert-indications-200,
+  "chart-vert-indications-bold": $vert-indications-400,
+  "chart-vert-digital": $vert-digital-100,
+  "chart-vert-digital-bold": $vert-digital-400,
+  "chart-jaune": $jaune-100,
+  "chart-jaune-bold": $jaune-500,
+  "chart-jaune-ocre": $jaune-ocre-100,
+  "chart-jaune-ocre-bold": $jaune-ocre-400,
+  "chart-jaune-indications": $jaune-indications-100,
+  "chart-jaune-indications-bold": $jaune-indications-400,
+  "chart-saumon": $saumon-100,
+  "chart-saumon-bold": $saumon-500,
+  "chart-rose-digital": $rose-digital-200,
+  "chart-rose-digital-bold": $rose-digital-500,
+  "chart-fuschia": $fuschia-100,
+  "chart-fuschia-bold": $fuschia-500,
+  "chart-rouge-indications": $rouge-indications-100,
+  "chart-rouge-indications-bold": $rouge-indications-500,
+  "chart-greyscale": $greyscale-50,
+  "chart-greyscale-bold": $greyscale-550,
+  "chart-taupe": $taupe-200,
+  "chart-taupe-bold": $taupe-600,
+  "decorative-neutral": $greyscale-50,
+  "decorative-bleu-iceberg": $bleu-iceberg-200,
+  "decorative-vert-foret": $vert-foret-100,
+  "decorative-violet": $violet-200,
+  "decorative-bleu-rte": $bleu-rte-200,
+  "decorative-bleu-digital": $bleu-digital-200,
+  "decorative-marine": $marine-100,
+  "decorative-bleu-petrole": $bleu-petrole-200,
+  "decorative-bleu-cyan": $bleu-cyan-200,
+  "decorative-vert": $vert-200,
+  "decorative-vert-indications": $vert-indications-200,
+  "decorative-vert-digital": $vert-digital-200,
+  "decorative-jaune": $jaune-100,
+  "decorative-jaune-ocre": $jaune-ocre-200,
+  "decorative-jaune-indications": $jaune-indications-200,
+  "decorative-saumon": $saumon-300,
+  "decorative-rose-digital": $rose-digital-200,
+  "decorative-fuschia": $fuschia-200,
+  "decorative-rouge-indication": $rouge-indications-100,
+  "decorative-taupe": $taupe-200,
+  "elevation-surface-inner-shadow": rgba(0, 0, 0, 0.20),
+  "elevation-surface-shadow-1": rgba(255, 255, 255, 0.03),
+  "elevation-surface-shadow-2": rgba(255, 255, 255, 0.05),
+  "elevation-surface-shadow-3": rgba(255, 255, 255, 0.08),
+  "elevation-surface-shadow-4": rgba(255, 255, 255, 0.10),
+  "elevation-surface-shadow-5": rgba(255, 255, 255, 0.12),
+  "elevation-surface-shadow-6": rgba(255, 255, 255, 0.14),
+  "elevation-shadow-ambient": rgba(0, 0, 0, 0.20),
+  "elevation-shadow-ambient-darker": rgba(0, 0, 0, 0.40),
+  "elevation-shadow-ambient-brand": rgba(0, 0, 0, 0.17),
+  "elevation-shadow-key": rgba(0, 0, 0, 0.28),
+  "elevation-shadow-key-darker": rgba(0, 0, 0, 0.48),
+  "elevation-shadow-key-brand": rgba(0, 0, 0, 0.21),
+  "brand-navigation-divider-5": $violet-800,
+  "brand-navigation-divider-6": $violet-800,
+  "brand-navigation-divider-7": $violet-800,
+  // TODO remove this color (not a real token)
+  "background-brand-hover-opacity-20": $violet-200-opacity-20,
+  // TODO remove this color (not a real token)
+  "background-danger-hover-opacity-20": $rouge-indications-500-opacity-20,
+  // TODO remove this color (not a real token)
+  "background-hover-opacity-50": $greyscale-800-opacity-50,
+);

package/design-tokens/tokens/public/themes/base/_violet-light.scss

@@ -0,0 +1,171 @@
+// This file is auto-generated. Do not edit directly.
+
+@use '../../../../primitives/colors' as *;
+@use '../../../../primitives/devColors' as *;
+
+$violet-light: (
+  "background-default": $core-white,
+  "background-hover": $greyscale-50,
+  "background-neutral-regular-default": $greyscale-100,
+  "background-neutral-regular-hover": $greyscale-250,
+  "background-neutral-bold-default": $greyscale-600,
+  "background-neutral-bold-hover": $greyscale-750,
+  "background-neutral-navigation-default": $greyscale-50,
+  "background-neutral-navigation-hover": $greyscale-100,
+  "background-disabled": $greyscale-0,
+  "background-inverse": $greyscale-900,
+  "background-brand-default": $violet-600,
+  "background-brand-hover": $violet-700,
+  "background-brand-pressed": $violet-800,
+  "background-brand-selected-default": $violet-600,
+  "background-brand-selected-hover": $violet-700,
+  "background-brand-unselected-default": $violet-100,
+  "background-brand-unselected-hover": $violet-200,
+  "background-brand-inverse-default": $core-white,
+  "background-brand-inverse-hover": $violet-50,
+  "background-brand-inverse-pressed": $violet-100,
+  "background-brand-navigation-default": $violet-950,
+  "background-brand-navigation-hover": $violet-900,
+  "background-brand-navigation-pressed": $violet-700,
+  "background-danger-default": $rouge-indications-600,
+  "background-danger-hover": $rouge-indications-700,
+  "background-danger-pressed": $rouge-indications-800,
+  "background-info-default": $bleu-digital-600,
+  "background-warning-default": $jaune-500,
+  "background-success-default": $vert-digital-700,
+  "border-primary": $greyscale-600,
+  "border-secondary": $greyscale-400,
+  "border-tertiary": $greyscale-200,
+  "border-divider": $greyscale-200,
+  "border-disabled": $greyscale-200,
+  "border-inverse": $core-white,
+  "border-brand-default": $violet-600,
+  "border-brand-focused": $violet-900,
+  "border-brand-navigation-active": $violet-700,
+  "border-brand-navigation-divider": $violet-800,
+  "border-danger": $rouge-indications-600,
+  "border-info": $bleu-digital-600,
+  "border-warning": $jaune-indications-400,
+  "border-success": $vert-digital-700,
+  "content-primary": $greyscale-900,
+  "content-secondary": $greyscale-800,
+  "content-tertiary": $greyscale-600,
+  "content-primary-inverse": $core-white,
+  "content-disabled": $greyscale-200,
+  "content-brand-default": $violet-600,
+  "content-brand-hover": $violet-700,
+  "content-brand-pressed": $violet-800,
+  "content-brand-navigation-default": $violet-100,
+  "content-brand-navigation-hover": $violet-50,
+  "content-brand-navigation-disabled": $violet-700,
+  "content-link-default": $bleu-digital-500,
+  "content-link-hover": $bleu-digital-600,
+  "content-link-pressed": $bleu-digital-700,
+  "content-link-visited-default": $violet-600,
+  "content-link-visited-hover": $violet-700,
+  "content-link-visited-pressed": $violet-800,
+  "content-danger-default": $rouge-indications-600,
+  "content-danger-hover": $rouge-indications-700,
+  "content-danger-inverse": $core-white,
+  "content-success-default": $vert-digital-700,
+  "content-success-hover": $vert-digital-800,
+  "content-info-default": $bleu-digital-600,
+  "content-info-hover": $bleu-digital-700,
+  "content-decorative": $greyscale-900,
+  "brand-navigation-divider": $violet-800,
+  "brand-navigation-divider-2": $violet-800,
+  "brand-navigation-divider-3": $violet-800,
+  "brand-navigation-divider-4": $violet-800,
+  "chart-brand": $violet-600,
+  "chart-neutral": $greyscale-350,
+  "chart-category-1": $bleu-iceberg-500,
+  "chart-category-2": $fuschia-500,
+  "chart-category-3": $violet-600,
+  "chart-category-4": $vert-foret-500,
+  "chart-category-5": $marine-900,
+  "chart-category-6": $jaune-indications-500,
+  "chart-category-7": $taupe-700,
+  "chart-category-8": $bleu-petrole-400,
+  "chart-bleu-iceberg": $bleu-iceberg-100,
+  "chart-bleu-iceberg-bold": $bleu-iceberg-500,
+  "chart-vert-foret": $vert-foret-100,
+  "chart-vert-foret-bold": $vert-foret-400,
+  "chart-violet": $violet-300,
+  "chart-violet-bold": $violet-600,
+  "chart-bleu-rte": $bleu-rte-100,
+  "chart-bleu-rte-bold": $bleu-rte-600,
+  "chart-bleu-digital": $bleu-digital-100,
+  "chart-bleu-digital-bold": $bleu-digital-500,
+  "chart-marine": $marine-100,
+  "chart-marine-bold": $marine-500,
+  "chart-bleu-petrole": $bleu-petrole-100,
+  "chart-bleu-petrole-bold": $bleu-petrole-500,
+  "chart-bleu-cyan": $bleu-cyan-100,
+  "chart-bleu-cyan-bold": $bleu-cyan-500,
+  "chart-vert": $vert-100,
+  "chart-vert-bold": $vert-500,
+  "chart-vert-indications": $vert-indications-200,
+  "chart-vert-indications-bold": $vert-indications-400,
+  "chart-vert-digital": $vert-digital-100,
+  "chart-vert-digital-bold": $vert-digital-400,
+  "chart-jaune": $jaune-100,
+  "chart-jaune-bold": $jaune-500,
+  "chart-jaune-ocre": $jaune-ocre-100,
+  "chart-jaune-ocre-bold": $jaune-ocre-400,
+  "chart-jaune-indications": $jaune-indications-100,
+  "chart-jaune-indications-bold": $jaune-indications-400,
+  "chart-saumon": $saumon-100,
+  "chart-saumon-bold": $saumon-500,
+  "chart-rose-digital": $rose-digital-200,
+  "chart-rose-digital-bold": $rose-digital-500,
+  "chart-fuschia": $fuschia-100,
+  "chart-fuschia-bold": $fuschia-500,
+  "chart-rouge-indications": $rouge-indications-100,
+  "chart-rouge-indications-bold": $rouge-indications-500,
+  "chart-greyscale": $greyscale-50,
+  "chart-greyscale-bold": $greyscale-550,
+  "chart-taupe": $taupe-200,
+  "chart-taupe-bold": $taupe-600,
+  "decorative-neutral": $greyscale-50,
+  "decorative-bleu-iceberg": $bleu-iceberg-200,
+  "decorative-vert-foret": $vert-foret-100,
+  "decorative-violet": $violet-200,
+  "decorative-bleu-rte": $bleu-rte-200,
+  "decorative-bleu-digital": $bleu-digital-200,
+  "decorative-marine": $marine-100,
+  "decorative-bleu-petrole": $bleu-petrole-200,
+  "decorative-bleu-cyan": $bleu-cyan-200,
+  "decorative-vert": $vert-200,
+  "decorative-vert-indications": $vert-indications-200,
+  "decorative-vert-digital": $vert-digital-200,
+  "decorative-jaune": $jaune-100,
+  "decorative-jaune-ocre": $jaune-ocre-200,
+  "decorative-jaune-indications": $jaune-indications-200,
+  "decorative-saumon": $saumon-300,
+  "decorative-rose-digital": $rose-digital-200,
+  "decorative-fuschia": $fuschia-200,
+  "decorative-rouge-indication": $rouge-indications-100,
+  "decorative-taupe": $taupe-200,
+  "elevation-surface-inner-shadow": rgba(0, 0, 0, 0.00),
+  "elevation-surface-shadow-1": rgba(255, 255, 255, 0.00),
+  "elevation-surface-shadow-2": rgba(255, 255, 255, 0.00),
+  "elevation-surface-shadow-3": rgba(255, 255, 255, 0.00),
+  "elevation-surface-shadow-4": rgba(255, 255, 255, 0.00),
+  "elevation-surface-shadow-5": rgba(255, 255, 255, 0.00),
+  "elevation-surface-shadow-6": rgba(255, 255, 255, 0.00),
+  "elevation-shadow-ambient": rgba(0, 0, 0, 0.12),
+  "elevation-shadow-ambient-darker": rgba(0, 0, 0, 0.20),
+  "elevation-shadow-ambient-brand": rgba(0, 0, 0, 0.25),
+  "elevation-shadow-key": rgba(0, 0, 0, 0.14),
+  "elevation-shadow-key-darker": rgba(0, 0, 0, 0.24),
+  "elevation-shadow-key-brand": rgba(0, 0, 0, 0.31),
+  "brand-navigation-divider-5": $violet-800,
+  "brand-navigation-divider-6": $violet-800,
+  "brand-navigation-divider-7": $violet-800,
+  // TODO remove this color (not a real token)
+  "background-brand-hover-opacity-20": $violet-700-opacity-20,
+  // TODO remove this color (not a real token)
+  "background-danger-hover-opacity-20": $rouge-indications-700-opacity-20,
+  // TODO remove this color (not a real token)
+  "background-hover-opacity-50": $greyscale-50-opacity-50,
+);

package/eslint.config.js

@@ -0,0 +1 @@
+export { default } from "../../eslint.config.js";

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@rte-ds/core",
+  "version": "1.2.1",
+  "main": "index.js",
+  "scripts": {
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run",
+    "build": "npm run build:css-themes && npm run build:css-fonts",
+    "build:css-themes": "ts-node css-theme-generator.ts",
+    "build:css-fonts": "ts-node css-font-generator.ts",
+    "generate:tokens": "ts-node ./scripts/design-tokens/generator.ts",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "Apache-2.0",
+  "description": "Design Tokens, interfaces and utilities for the Design System RTE",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "sass": "^1.85.1"
+  },
+  "devDependencies": {
+    "sass": "^1.89.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4"
+  }
+}

package/scripts/design-tokens/common.ts

@@ -0,0 +1,35 @@
+import fs from "fs";
+import path, { resolve } from "path";
+
+export interface TokenValue {
+  $type: string;
+  $scopes: string[];
+  $value: string | number;
+}
+
+export const UNIT = "px";
+export const INDENT = " ".repeat(2);
+
+export enum PrivacyLevel {
+  PUBLIC = "public",
+  PRIVATE = "private",
+}
+
+const rootDir = path.join(resolve(__dirname), "../../design-tokens");
+const tokensDir = "tokens";
+const primitivesDir = "primitives";
+
+export const tokensOutputDir = path.join(rootDir, tokensDir);
+export const primitivesOutputDir = path.join(rootDir, primitivesDir);
+
+export function buildScssVariable(variableName: string[], value: string): string {
+  return `$${variableName.join("-")}: ${value};\n`.toLowerCase();
+}
+
+export function generateScssFile(scss: string, filePath: string) {
+  fs.writeFileSync(filePath, scss);
+}
+
+export function buildScssFileName(collection: string): string {
+  return `_${collection.toLowerCase()}.scss`;
+}

package/scripts/design-tokens/generator.ts

@@ -0,0 +1,24 @@
+import fs from "fs";
+import { resolve } from "path";
+
+import { generatePrimitivesScssFiles } from "./primitives-generator";
+import { generateTokensScssFiles, TokenItem } from "./tokens-generator";
+
+console.log("🔧 Generating design tokens...\n");
+
+const currentDir = resolve(__dirname);
+
+const inputPrimitivesSource = resolve(currentDir, "sourceFiles/primitives.json");
+const inputTokensSource = resolve(currentDir, "sourceFiles/tokens.json");
+
+const rawPrimitives = JSON.parse(fs.readFileSync(inputPrimitivesSource, "utf8"));
+console.log("📦 Generating primitives... ");
+generatePrimitivesScssFiles(rawPrimitives);
+console.log("✅ Primitives generated successfully.\n");
+
+const rawTokens: TokenItem[] = JSON.parse(fs.readFileSync(inputTokensSource, "utf8"));
+console.log("📦 Generating tokens... ");
+generateTokensScssFiles(rawTokens);
+console.log("✅ Tokens generated successfully.\n");
+
+console.log("✅ All design tokens generated successfully. ");

package/scripts/design-tokens/primitives-generator.spec.ts

@@ -0,0 +1,84 @@
+import fs from "fs";
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+import { Collection, generatePrimitivesScssFiles } from "./primitives-generator";
+
+vi.mock("fs");
+
+describe("primitives-generator", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("génère correctement les variables SCSS pour les couleurs", () => {
+    const colorCollection = [
+      {
+        collection: Collection.COLORS,
+        variables: {
+          bleu: {
+            100: { $value: "#abcdef" },
+            200: { $value: "#123456" },
+          },
+          rouge: {
+            500: { $value: "#ff0000" },
+          },
+        },
+      },
+    ];
+
+    const writeSpy = vi.spyOn(fs, "writeFileSync");
+
+    vi.spyOn(fs, "existsSync").mockReturnValue(true);
+
+    vi.spyOn(fs, "readFileSync").mockReturnValue(colorCollection.toString());
+
+    generatePrimitivesScssFiles(colorCollection);
+
+    expect(writeSpy).toHaveBeenCalledWith(
+      expect.stringContaining("_colors.scss"),
+      expect.stringContaining("$bleu-100: #abcdef;"),
+    );
+    expect(writeSpy).toHaveBeenCalledWith(
+      expect.stringContaining("_colors.scss"),
+      expect.stringContaining("$rouge-500: #ff0000;"),
+    );
+  });
+
+  it("génère correctement les variables SCSS pour la typo", () => {
+    const typoCollection = [
+      {
+        collection: Collection.TYPOGRAPHY,
+        variables: {
+          "font-weight": {
+            bold: { $value: "700" },
+          },
+          "font-family": {
+            main: { $value: "Nunito" },
+          },
+          "font-size": {
+            small: { $value: "12" },
+          },
+        },
+      },
+    ];
+
+    const writeSpy = vi.spyOn(fs, "writeFileSync");
+    vi.spyOn(fs, "existsSync").mockReturnValue(true);
+
+    generatePrimitivesScssFiles(typoCollection);
+
+    expect(writeSpy).toHaveBeenCalledWith(
+      expect.stringContaining("_typography.scss"),
+      expect.stringContaining("$font-weight-bold: 700;"),
+    );
+    expect(writeSpy).toHaveBeenCalledWith(
+      expect.stringContaining("_typography.scss"),
+      expect.stringContaining('$font-family-main: "Nunito";'),
+    );
+    expect(writeSpy).toHaveBeenCalledWith(
+      expect.stringContaining("_typography.scss"),
+      expect.stringContaining("$font-size-small: 12px;"),
+    );
+  });
+});

package/scripts/design-tokens/primitives-generator.ts

@@ -0,0 +1,66 @@
+import fs from "fs";
+import path from "path";
+
+import { generateScssFile, primitivesOutputDir, UNIT } from "./common";
+
+export enum Collection {
+  COLORS = "Primitive : Colors",
+  TYPOGRAPHY = "Primitive : Type",
+}
+
+interface CollectionItem {
+  collection: Collection;
+  variables: Record<string, Record<string, { $value: string }>>;
+}
+
+if (!fs.existsSync(primitivesOutputDir)) {
+  fs.mkdirSync(primitivesOutputDir);
+}
+
+export function generatePrimitivesScssFiles(json: CollectionItem[]) {
+  for (const tokenItem of json) {
+    let scss = "// This file is auto-generated. Do not edit directly.\n\n";
+    let filename = "";
+    switch (tokenItem.collection) {
+      case Collection.COLORS:
+        filename = "_colors.scss";
+        scss += extractColors(tokenItem);
+        generateScssFile(scss, path.join(primitivesOutputDir, filename));
+        break;
+
+      case Collection.TYPOGRAPHY:
+        filename = "_typography.scss";
+        scss += extractTypography(tokenItem);
+        generateScssFile(scss, path.join(primitivesOutputDir, filename));
+        break;
+    }
+  }
+}
+
+function extractColors(colorCollection: CollectionItem): string {
+  let scss = "";
+  for (const color in colorCollection.variables) {
+    for (const colorValue in colorCollection.variables[color]) {
+      const colorVariable = colorCollection.variables[color][colorValue];
+      scss += `$${color}-${colorValue}: ${colorVariable.$value};\n`.toLowerCase();
+    }
+  }
+  return scss;
+}
+
+function extractTypography(typographyCollection: CollectionItem): string {
+  let scss = "";
+  for (const category in typographyCollection.variables) {
+    for (const subCategory in typographyCollection.variables[category]) {
+      const typographyVariable = typographyCollection.variables[category][subCategory];
+      if (category === "font-weight") {
+        scss += `$${category}-${subCategory}: ${typographyVariable.$value};\n`.toLowerCase();
+      } else if (category === "font-family") {
+        scss += `$${category}-${subCategory}: "${typographyVariable.$value}";\n`;
+      } else {
+        scss += `$${category}-${subCategory}: ${typographyVariable.$value}${UNIT};\n`.toLowerCase();
+      }
+    }
+  }
+  return scss;
+}