@kreozalabs/styles 0.1.0

package/LICENSE

@@ -0,0 +1,28 @@
+BSD 3-Clause License
+
+Copyright (c) 2026, Kreoza
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,65 @@
+# @kreozalabs/styles
+
+Core design system for the Kreoza platform. This package provides synchronized design tokens for TypeScript, CSS, and Tailwind CSS (v3 and v4).
+
+## 🚀 Usage
+
+### 1. Tailwind CSS v4 (Recommended)
+Tailwind v4 is CSS-first. Simply import the styles in your main CSS file:
+```css
+@import "tailwindcss";
+@import "@kreozalabs/styles";
+```
+This automatically registers all theme variables (e.g., `bg-primary`, `rounded-kreoza`, `text-h1`).
+
+### 2. TypeScript / JavaScript
+Programmatic access to all raw hex values and design constants:
+```typescript
+import { tokens } from '@kreozalabs/styles';
+
+const primaryColor = tokens.colors.light.primary;
+```
+
+### 3. Tailwind CSS v3
+Add the preset to your `tailwind.config.js`:
+```javascript
+module.exports = {
+  presets: [require('@kreozalabs/styles/tailwind-preset')],
+  content: ["./src/**/*.{ts,tsx}"],
+}
+```
+
+---
+
+## 🛠 Maintenance (Single Source of Truth)
+
+This package uses `tokens.ts` as the **Single Source of Truth**. Do not edit `tokens.css` or `base.css` variables manually.
+
+### How to update existing values
+1. Open `tokens.ts`.
+2. Update the values (colors, fonts, etc.).
+3. Run `pnpm build`. This will regenerate `tokens.css` and the `dist/` files.
+
+### How to add NEW token categories
+If you add a new category to `tokens.ts` (e.g., `spacing` or `shadows`):
+1. Update `tokens.ts` with the new data.
+2. Update `scripts/sync-tokens.ts` to include the logic for mapping these new tokens to CSS variables and the Tailwind `@theme` block.
+3. Run `pnpm build`.
+
+---
+
+## 📜 Development Scripts
+
+- `pnpm build`: Cleans, synchronizes tokens, and transpiles.
+- `pnpm clean`: Removes all generated files (`dist/`, `tokens.css`).
+- `pnpm build:tokens`: Only runs the synchronization script.
+- `pnpm pack`: Creates a `.tgz` for local testing.
+
+---
+
+## 🎨 Design Summary
+
+- **Primary Font**: `PT Sans` (legible, professional sans-serif).
+- **Modular Scale**: Uses a **1.414 ratio** (Augmented Fourth) to ensure harmonious typography sizing across all headings.
+- **Color System**: Tokens are centralized in `tokens.ts` to ensure consistent saturation and contrast across Light and Dark themes.
+- **License**: BSD-3-Clause

package/base.css

@@ -0,0 +1,24 @@
+@import url('https://fonts.googleapis.com/css?family=PT%20Sans:700|PT%20Sans:400');
+
+@import "tailwindcss";
+
+@import "./tokens.css";
+
+body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-base);
+}
+
+h1 { font-size: var(--font-size-h1); }
+h2 { font-size: var(--font-size-h2); }
+h3 { font-size: var(--font-size-h3); }
+h4 { font-size: var(--font-size-h4); }
+h5 { font-size: var(--font-size-h5); }
+
+h1, h2, h3, h4, h5 {
+  font-family: var(--font-family-sans);
+  font-weight: 700;
+}
+

package/dist/scripts/sync-tokens.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=sync-tokens.d.ts.map

package/dist/scripts/sync-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sync-tokens.d.ts","sourceRoot":"","sources":["../../scripts/sync-tokens.ts"],"names":[],"mappings":""}

package/dist/scripts/sync-tokens.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_path_1 = __importDefault(require("node:path"));
+const color_1 = __importDefault(require("color"));
+const tokens_js_1 = require("../tokens.js");
+const OUTPUT_FILE = node_path_1.default.join(process.cwd(), 'tokens.css');
+function hexToHslValues(hex) {
+    const color = (0, color_1.default)(hex);
+    const hsl = color.hsl().array();
+    // We want: H S% L% (without the hsl() wrapper) for Tailwind opacity support
+    return `${Math.round(hsl[0])} ${Math.round(hsl[1])}% ${Math.round(hsl[2])}%`;
+}
+function generateCSS() {
+    let css = '/* Generated file - do not edit manually */\n\n@layer base {\n  :root {\n';
+    // Light colors
+    Object.entries(tokens_js_1.tokens.colors.light).forEach(([name, value]) => {
+        css += `    --${name}: ${hexToHslValues(value)}; /* ${value} */\n`;
+    });
+    // Typography & Border Radius
+    css += '\n    /* Typography */\n';
+    css += `    --font-family-sans: ${tokens_js_1.tokens.typography.fontFamily};\n`;
+    Object.entries(tokens_js_1.tokens.typography.modularScale).forEach(([name, value]) => {
+        css += `    --font-size-${name}: ${value};\n`;
+    });
+    css += '\n    /* Border Radius */\n';
+    Object.entries(tokens_js_1.tokens.borderRadius).forEach(([name, value]) => {
+        css += `    --radius-${name}: ${value};\n`;
+    });
+    css += '  }\n\n  .dark {\n';
+    // Dark colors
+    Object.entries(tokens_js_1.tokens.colors.dark).forEach(([name, value]) => {
+        css += `    --${name}: ${hexToHslValues(value)}; /* ${value} */\n`;
+    });
+    // Tailwind CSS v4 Theme Block
+    css += '  }\n\n  /* Tailwind CSS v4 Theme */\n';
+    css += '  @theme {\n';
+    // Map colors
+    Object.keys(tokens_js_1.tokens.colors.light).forEach((name) => {
+        css += `    --color-${name}: hsl(var(--${name}));\n`;
+    });
+    // Map Typography
+    css += '    --font-sans: var(--font-family-sans);\n';
+    Object.keys(tokens_js_1.tokens.typography.modularScale).forEach((name) => {
+        css += `    --text-${name}: var(--font-size-${name});\n`;
+    });
+    // Map Radius
+    Object.keys(tokens_js_1.tokens.borderRadius).forEach((name) => {
+        css += `    --radius-${name}: var(--radius-${name});\n`;
+    });
+    css += '  }\n}\n';
+    node_fs_1.default.writeFileSync(OUTPUT_FILE, css);
+    console.log(`Successfully generated ${OUTPUT_FILE}`);
+}
+generateCSS();

package/dist/tokens.d.ts

@@ -0,0 +1,70 @@
+export declare const tokens: {
+    readonly colors: {
+        readonly light: {
+            readonly text: "#0c0e13";
+            readonly background: "#e8eaed";
+            readonly primary: "#5e8cc5";
+            readonly "primary-foreground": "#e8eaed";
+            readonly secondary: "#2fce03";
+            readonly "secondary-foreground": "#0c0e13";
+            readonly accent: "#d3763c";
+            readonly "accent-foreground": "#e8eaed";
+            readonly card: "#e8eaed";
+            readonly "card-foreground": "#0c0e13";
+            readonly popover: "#e8eaed";
+            readonly "popover-foreground": "#0c0e13";
+            readonly muted: "#d8d9db";
+            readonly "muted-foreground": "#464d59";
+            readonly destructive: "#ef4444";
+            readonly "destructive-foreground": "#e8eaed";
+            readonly border: "#ccd1d9";
+            readonly input: "#ccd1d9";
+            readonly ring: "#5e8cc5";
+        };
+        readonly dark: {
+            readonly text: "#eceef3";
+            readonly background: "#121417";
+            readonly primary: "#3a68a1";
+            readonly "primary-foreground": "#eceef3";
+            readonly secondary: "#5dfc31";
+            readonly "secondary-foreground": "#121417";
+            readonly accent: "#c3662c";
+            readonly "accent-foreground": "#eceef3";
+            readonly card: "#121417";
+            readonly "card-foreground": "#eceef3";
+            readonly popover: "#121417";
+            readonly "popover-foreground": "#eceef3";
+            readonly muted: "#21252b";
+            readonly "muted-foreground": "#b0b7c3";
+            readonly destructive: "#7f1d1d";
+            readonly "destructive-foreground": "#eceef3";
+            readonly border: "#2d343f";
+            readonly input: "#2d343f";
+            readonly ring: "#3a68a1";
+        };
+    };
+    readonly typography: {
+        readonly fontFamily: "'PT Sans', sans-serif";
+        readonly modularScale: {
+            readonly h1: "5.652rem";
+            readonly h2: "3.997rem";
+            readonly h3: "2.827rem";
+            readonly h4: "1.999rem";
+            readonly h5: "1.414rem";
+            readonly base: "1rem";
+            readonly small: "0.707rem";
+        };
+        readonly fontWeights: {
+            readonly regular: 400;
+            readonly bold: 700;
+        };
+    };
+    readonly borderRadius: {
+        readonly small: "0.25rem";
+        readonly medium: "0.5rem";
+        readonly large: "0.75rem";
+        readonly kreoza: "0.75rem";
+    };
+};
+export type DesignTokens = typeof tokens;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmET,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,OAAO,MAAM,CAAC"}

package/dist/tokens.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tokens = void 0;
+exports.tokens = {
+    colors: {
+        light: {
+            text: "#0c0e13",
+            background: "#e8eaed",
+            primary: "#5e8cc5",
+            "primary-foreground": "#e8eaed",
+            secondary: "#2fce03",
+            "secondary-foreground": "#0c0e13",
+            accent: "#d3763c",
+            "accent-foreground": "#e8eaed",
+            card: "#e8eaed",
+            "card-foreground": "#0c0e13",
+            popover: "#e8eaed",
+            "popover-foreground": "#0c0e13",
+            muted: "#d8d9db", // #d8d9db is approx 210 5% 85%
+            "muted-foreground": "#464d59", // #464d59 is approx 225 10% 30%
+            destructive: "#ef4444", // #ef4444 is 0 84% 60%
+            "destructive-foreground": "#e8eaed",
+            border: "#ccd1d9", // #ccd1d9 is 210 10% 80%
+            input: "#ccd1d9",
+            ring: "#5e8cc5",
+        },
+        dark: {
+            text: "#eceef3",
+            background: "#121417",
+            primary: "#3a68a1",
+            "primary-foreground": "#eceef3",
+            secondary: "#5dfc31",
+            "secondary-foreground": "#121417",
+            accent: "#c3662c",
+            "accent-foreground": "#eceef3",
+            card: "#121417",
+            "card-foreground": "#eceef3",
+            popover: "#121417",
+            "popover-foreground": "#eceef3",
+            muted: "#21252b", // approx 216 10% 15%
+            "muted-foreground": "#b0b7c3", // approx 225 10% 70%
+            destructive: "#7f1d1d", // approx 0 62.8% 30.6%
+            "destructive-foreground": "#eceef3",
+            border: "#2d343f", // approx 216 10% 20%
+            input: "#2d343f",
+            ring: "#3a68a1",
+        },
+    },
+    typography: {
+        fontFamily: "'PT Sans', sans-serif",
+        modularScale: {
+            h1: "5.652rem",
+            h2: "3.997rem",
+            h3: "2.827rem",
+            h4: "1.999rem",
+            h5: "1.414rem",
+            base: "1rem",
+            small: "0.707rem",
+        },
+        fontWeights: {
+            regular: 400,
+            bold: 700,
+        },
+    },
+    borderRadius: {
+        small: "0.25rem",
+        medium: "0.5rem",
+        large: "0.75rem",
+        kreoza: "0.75rem",
+    },
+};

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@kreozalabs/styles",
+  "version": "0.1.0",
+  "description": "Shared design system and styling for Kreoza platform",
+  "main": "dist/tokens.js",
+  "module": "dist/tokens.js",
+  "types": "dist/tokens.d.ts",
+  "files": [
+    "dist",
+    "base.css",
+    "tokens.css",
+    "tailwind-preset.js",
+    "README.md"
+  ],
+  "author": "Kreoza Labs",
+  "license": "BSD-3-Clause",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kreozalabs/styles.git"
+  },
+  "devDependencies": {
+    "@types/node": "^25.5.0",
+    "color": "^5.0.3",
+    "tsx": "^4.21.0",
+    "typescript": "^6.0.2"
+  },
+  "scripts": {
+    "clean": "rm -rf dist tokens.css",
+    "build:tokens": "tsx scripts/sync-tokens.ts",
+    "build:ts": "tsc",
+    "build": "pnpm clean && pnpm build:tokens && pnpm build:ts"
+  }
+}

package/tailwind-preset.js

@@ -0,0 +1,42 @@
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+      },
+      fontFamily: {
+        sans: ["PT Sans", "system-ui", "sans-serif"],
+        serif: ["Georgia", "serif"],
+        mono: ["JetBrains Mono", "monospace"],
+      },
+      borderRadius: {
+        'kreoza': '0.75rem',
+      },
+    },
+  },
+  plugins: [],
+};

package/tokens.css

@@ -0,0 +1,98 @@
+/* Generated file - do not edit manually */
+
+@layer base {
+  :root {
+    --text: 223 23% 6%; /* #0c0e13 */
+    --background: 216 12% 92%; /* #e8eaed */
+    --primary: 213 47% 57%; /* #5e8cc5 */
+    --primary-foreground: 216 12% 92%; /* #e8eaed */
+    --secondary: 107 97% 41%; /* #2fce03 */
+    --secondary-foreground: 223 23% 6%; /* #0c0e13 */
+    --accent: 23 63% 53%; /* #d3763c */
+    --accent-foreground: 216 12% 92%; /* #e8eaed */
+    --card: 216 12% 92%; /* #e8eaed */
+    --card-foreground: 223 23% 6%; /* #0c0e13 */
+    --popover: 216 12% 92%; /* #e8eaed */
+    --popover-foreground: 223 23% 6%; /* #0c0e13 */
+    --muted: 220 4% 85%; /* #d8d9db */
+    --muted-foreground: 218 12% 31%; /* #464d59 */
+    --destructive: 0 84% 60%; /* #ef4444 */
+    --destructive-foreground: 216 12% 92%; /* #e8eaed */
+    --border: 217 15% 83%; /* #ccd1d9 */
+    --input: 217 15% 83%; /* #ccd1d9 */
+    --ring: 213 47% 57%; /* #5e8cc5 */
+
+    /* Typography */
+    --font-family-sans: 'PT Sans', sans-serif;
+    --font-size-h1: 5.652rem;
+    --font-size-h2: 3.997rem;
+    --font-size-h3: 2.827rem;
+    --font-size-h4: 1.999rem;
+    --font-size-h5: 1.414rem;
+    --font-size-base: 1rem;
+    --font-size-small: 0.707rem;
+
+    /* Border Radius */
+    --radius-small: 0.25rem;
+    --radius-medium: 0.5rem;
+    --radius-large: 0.75rem;
+    --radius-kreoza: 0.75rem;
+  }
+
+  .dark {
+    --text: 223 23% 94%; /* #eceef3 */
+    --background: 216 12% 8%; /* #121417 */
+    --primary: 213 47% 43%; /* #3a68a1 */
+    --primary-foreground: 223 23% 94%; /* #eceef3 */
+    --secondary: 107 97% 59%; /* #5dfc31 */
+    --secondary-foreground: 216 12% 8%; /* #121417 */
+    --accent: 23 63% 47%; /* #c3662c */
+    --accent-foreground: 223 23% 94%; /* #eceef3 */
+    --card: 216 12% 8%; /* #121417 */
+    --card-foreground: 223 23% 94%; /* #eceef3 */
+    --popover: 216 12% 8%; /* #121417 */
+    --popover-foreground: 223 23% 94%; /* #eceef3 */
+    --muted: 216 13% 15%; /* #21252b */
+    --muted-foreground: 218 14% 73%; /* #b0b7c3 */
+    --destructive: 0 63% 31%; /* #7f1d1d */
+    --destructive-foreground: 223 23% 94%; /* #eceef3 */
+    --border: 217 17% 21%; /* #2d343f */
+    --input: 217 17% 21%; /* #2d343f */
+    --ring: 213 47% 43%; /* #3a68a1 */
+  }
+
+  /* Tailwind CSS v4 Theme */
+  @theme {
+    --color-text: hsl(var(--text));
+    --color-background: hsl(var(--background));
+    --color-primary: hsl(var(--primary));
+    --color-primary-foreground: hsl(var(--primary-foreground));
+    --color-secondary: hsl(var(--secondary));
+    --color-secondary-foreground: hsl(var(--secondary-foreground));
+    --color-accent: hsl(var(--accent));
+    --color-accent-foreground: hsl(var(--accent-foreground));
+    --color-card: hsl(var(--card));
+    --color-card-foreground: hsl(var(--card-foreground));
+    --color-popover: hsl(var(--popover));
+    --color-popover-foreground: hsl(var(--popover-foreground));
+    --color-muted: hsl(var(--muted));
+    --color-muted-foreground: hsl(var(--muted-foreground));
+    --color-destructive: hsl(var(--destructive));
+    --color-destructive-foreground: hsl(var(--destructive-foreground));
+    --color-border: hsl(var(--border));
+    --color-input: hsl(var(--input));
+    --color-ring: hsl(var(--ring));
+    --font-sans: var(--font-family-sans);
+    --text-h1: var(--font-size-h1);
+    --text-h2: var(--font-size-h2);
+    --text-h3: var(--font-size-h3);
+    --text-h4: var(--font-size-h4);
+    --text-h5: var(--font-size-h5);
+    --text-base: var(--font-size-base);
+    --text-small: var(--font-size-small);
+    --radius-small: var(--radius-small);
+    --radius-medium: var(--radius-medium);
+    --radius-large: var(--radius-large);
+    --radius-kreoza: var(--radius-kreoza);
+  }
+}