Skip to content

Commit 945d741

Browse files
munlicodemunlicode
authored
feat: Implementation of core color palette, automated design token sync, and CI/CD pipeline (#3)
* feat: setup release-please and npm infrastructure for @kreozalabs/styles * feat: Implement automated CSS variable generation from TypeScript design tokens and expand color palette. * build: Update TypeScript configuration to include scripts and adjust module import extensions. * docs: overhaul README with updated usage instructions for Tailwind v4, maintenance guidelines, and development scripts. * feat: Add manual workflow dispatch trigger and switch to pnpm for dependency management and publishing.
1 parent 8bb83ad commit 945d741

12 files changed

Lines changed: 969 additions & 47 deletions

File tree

‎.github/workflows/release-please.yml‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
on:
2+
push:
3+
branches:
4+
- main
5+
workflow_dispatch: # Allows manual triggering for testing
6+
7+
permissions:
8+
contents: write
9+
pull-requests: write
10+
11+
name: release-please
12+
13+
jobs:
14+
release-please:
15+
runs-on: ubuntu-latest
16+
steps:
17+
- uses: googleapis/release-please-action@v4
18+
id: release
19+
with:
20+
token: ${{ secrets.GITHUB_TOKEN }}
21+
release-type: node
22+
23+
- name: checkout
24+
if: ${{ steps.release.outputs.release_created }}
25+
uses: actions/checkout@v4
26+
27+
- name: setup pnpm
28+
if: ${{ steps.release.outputs.release_created }}
29+
uses: pnpm/action-setup@v4
30+
31+
- name: setup node
32+
if: ${{ steps.release.outputs.release_created }}
33+
uses: actions/setup-node@v4
34+
with:
35+
node-version: 24
36+
registry-url: "https://registry.npmjs.org"
37+
cache: "pnpm"
38+
39+
- name: install dependencies
40+
if: ${{ steps.release.outputs.release_created }}
41+
run: pnpm install --no-frozen-lockfile
42+
43+
- name: publish to npm
44+
if: ${{ steps.release.outputs.release_created }}
45+
run: pnpm publish --no-git-checks
46+
env:
47+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

‎.gitignore‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
lerna-debug.log*
8+
9+
# Diagnostic reports (https://nodejs.org/api/report.html)
10+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11+
12+
# Runtime data
13+
pids
14+
*.pid
15+
*.seed
16+
*.pid.lock
17+
18+
# Directory for instrumented libs generated by jscoverage/JSCover
19+
lib-cov
20+
21+
# Coverage directory used by tools like istanbul
22+
coverage
23+
*.lcov
24+
25+
# nyc test coverage
26+
.nyc_output
27+
28+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29+
.grunt
30+
31+
# Bower dependency directory (https://bower.io/)
32+
bower_components
33+
34+
# node-waf configuration
35+
.lock-wscript
36+
37+
# Compiled binary addons (https://nodejs.org/api/addons.html)
38+
build/Release
39+
40+
# Dependency directories
41+
node_modules/
42+
jspm_packages/
43+
44+
# Snowpack dependency directory (https://snowpack.dev/)
45+
web_modules/
46+
47+
# TypeScript cache
48+
*.tsbuildinfo
49+
50+
# Optional npm cache directory
51+
.npm
52+
53+
# Optional eslint cache
54+
.eslintcache
55+
56+
# Optional stylelint cache
57+
.stylelintcache
58+
59+
# Optional REPL history
60+
.node_repl_history
61+
62+
# Output of 'npm pack'
63+
*.tgz
64+
65+
# Yarn Integrity file
66+
.yarn-integrity
67+
68+
# dotenv environment variable files
69+
.env
70+
.env.*
71+
!.env.example
72+
73+
# parcel-bundler cache (https://parceljs.org/)
74+
.cache
75+
.parcel-cache
76+
77+
# Next.js build output
78+
.next
79+
out
80+
81+
# Nuxt.js build / generate output
82+
.nuxt
83+
dist
84+
.output
85+
86+
# Gatsby files
87+
.cache/
88+
# Comment in the public line in if your project uses Gatsby and not Next.js
89+
# https://nextjs.org/blog/next-9-1#public-directory-support
90+
# public
91+
92+
# vuepress build output
93+
.vuepress/dist
94+
95+
# vuepress v2.x temp and cache directory
96+
.temp
97+
.cache
98+
99+
# Sveltekit cache directory
100+
.svelte-kit/
101+
102+
# vitepress build output
103+
**/.vitepress/dist
104+
105+
# vitepress cache directory
106+
**/.vitepress/cache
107+
108+
# Docusaurus cache and generated files
109+
.docusaurus
110+
111+
# Serverless directories
112+
.serverless/
113+
114+
# FuseBox cache
115+
.fusebox/
116+
117+
# DynamoDB Local files
118+
.dynamodb/
119+
120+
# Firebase cache directory
121+
.firebase/
122+
123+
# TernJS port file
124+
.tern-port
125+
126+
# Stores VSCode versions used for testing VSCode extensions
127+
.vscode-test
128+
129+
# pnpm
130+
.pnpm-store
131+
132+
# yarn v3
133+
.pnp.*
134+
.yarn/*
135+
!.yarn/patches
136+
!.yarn/plugins
137+
!.yarn/releases
138+
!.yarn/sdks
139+
!.yarn/versions
140+
141+
# Vite files
142+
vite.config.js.timestamp-*
143+
vite.config.ts.timestamp-*
144+
.vite/

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Changelog

‎README.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# @kreozalabs/styles
2+
3+
Core design system for the Kreoza platform. This package provides synchronized design tokens for TypeScript, CSS, and Tailwind CSS (v3 and v4).
4+
5+
## 🚀 Usage
6+
7+
### 1. Tailwind CSS v4 (Recommended)
8+
Tailwind v4 is CSS-first. Simply import the styles in your main CSS file:
9+
```css
10+
@import "tailwindcss";
11+
@import "@kreozalabs/styles";
12+
```
13+
This automatically registers all theme variables (e.g., `bg-primary`, `rounded-kreoza`, `text-h1`).
14+
15+
### 2. TypeScript / JavaScript
16+
Programmatic access to all raw hex values and design constants:
17+
```typescript
18+
import { tokens } from '@kreozalabs/styles';
19+
20+
const primaryColor = tokens.colors.light.primary;
21+
```
22+
23+
### 3. Tailwind CSS v3
24+
Add the preset to your `tailwind.config.js`:
25+
```javascript
26+
module.exports = {
27+
presets: [require('@kreozalabs/styles/tailwind-preset')],
28+
content: ["./src/**/*.{ts,tsx}"],
29+
}
30+
```
31+
32+
---
33+
34+
## 🛠 Maintenance (Single Source of Truth)
35+
36+
This package uses `tokens.ts` as the **Single Source of Truth**. Do not edit `tokens.css` or `base.css` variables manually.
37+
38+
### How to update existing values
39+
1. Open `tokens.ts`.
40+
2. Update the values (colors, fonts, etc.).
41+
3. Run `pnpm build`. This will regenerate `tokens.css` and the `dist/` files.
42+
43+
### How to add NEW token categories
44+
If you add a new category to `tokens.ts` (e.g., `spacing` or `shadows`):
45+
1. Update `tokens.ts` with the new data.
46+
2. Update `scripts/sync-tokens.ts` to include the logic for mapping these new tokens to CSS variables and the Tailwind `@theme` block.
47+
3. Run `pnpm build`.
48+
49+
---
50+
51+
## 📜 Development Scripts
52+
53+
- `pnpm build`: Cleans, synchronizes tokens, and transpiles.
54+
- `pnpm clean`: Removes all generated files (`dist/`, `tokens.css`).
55+
- `pnpm build:tokens`: Only runs the synchronization script.
56+
- `pnpm pack`: Creates a `.tgz` for local testing.
57+
58+
---
59+
60+
## 🎨 Design Summary
61+
62+
- **Primary Font**: `PT Sans` (legible, professional sans-serif).
63+
- **Modular Scale**: Uses a **1.414 ratio** (Augmented Fourth) to ensure harmonious typography sizing across all headings.
64+
- **Color System**: Tokens are centralized in `tokens.ts` to ensure consistent saturation and contrast across Light and Dark themes.
65+
- **License**: BSD-3-Clause

‎base.css‎

Lines changed: 17 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,24 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
1+
@import url('https://fonts.googleapis.com/css?family=PT%20Sans:700|PT%20Sans:400');
42

5-
@layer base {
6-
:root {
7-
--brand-flow: 239 84% 67%;
8-
--brand-space: 222 47% 11%;
9-
--brand-pulse: 173 80% 40%;
10-
--brand-spark: 351 95% 71%;
11-
--brand-graphite: 215 25% 27%;
3+
@import "tailwindcss";
124

13-
--background: var(--brand-space);
14-
--foreground: 210 40% 98%;
5+
@import "./tokens.css";
156

16-
--card: 222 47% 11%;
17-
--card-foreground: 210 40% 98%;
18-
19-
--popover: 222 47% 11%;
20-
--popover-foreground: 210 40% 98%;
21-
22-
--primary: var(--brand-flow);
23-
--primary-foreground: 222 47% 11%;
24-
25-
--secondary: 217.2 32.6% 17.5%;
26-
--secondary-foreground: 210 40% 98%;
27-
28-
--muted: 217.2 32.6% 17.5%;
29-
--muted-foreground: 215 20.2% 65.1%;
30-
31-
--accent: 217.2 32.6% 17.5%;
32-
--accent-foreground: 210 40% 98%;
7+
body {
8+
background-color: hsl(var(--background));
9+
color: hsl(var(--foreground));
10+
font-family: var(--font-family-sans);
11+
font-size: var(--font-size-base);
12+
}
3313

34-
--destructive: 0 62.8% 30.6%;
35-
--destructive-foreground: 210 40% 98%;
14+
h1 { font-size: var(--font-size-h1); }
15+
h2 { font-size: var(--font-size-h2); }
16+
h3 { font-size: var(--font-size-h3); }
17+
h4 { font-size: var(--font-size-h4); }
18+
h5 { font-size: var(--font-size-h5); }
3619

37-
--border: 217.2 32.6% 17.5%;
38-
--input: 217.2 32.6% 17.5%;
39-
--ring: var(--brand-flow);
40-
}
20+
h1, h2, h3, h4, h5 {
21+
font-family: var(--font-family-sans);
22+
font-weight: 700;
4123
}
4224

43-
body {
44-
background-color: hsl(var(--brand-space));
45-
color: hsl(var(--foreground));
46-
font-family: 'Inter', sans-serif;
47-
}

‎package.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "@kreozalabs/styles",
3+
"version": "0.1.0",
4+
"description": "Shared design system and styling for Kreoza platform",
5+
"main": "dist/tokens.js",
6+
"module": "dist/tokens.js",
7+
"types": "dist/tokens.d.ts",
8+
"files": [
9+
"dist",
10+
"base.css",
11+
"tokens.css",
12+
"tailwind-preset.js",
13+
"README.md"
14+
],
15+
"scripts": {
16+
"clean": "rm -rf dist tokens.css",
17+
"build:tokens": "tsx scripts/sync-tokens.ts",
18+
"build:ts": "tsc",
19+
"build": "pnpm clean && pnpm build:tokens && pnpm build:ts",
20+
"prepare": "pnpm build"
21+
},
22+
"author": "Kreoza Labs",
23+
"license": "BSD-3-Clause",
24+
"publishConfig": {
25+
"access": "public"
26+
},
27+
"repository": {
28+
"type": "git",
29+
"url": "git+https://github.com/kreozalabs/styles.git"
30+
},
31+
"packageManager": "pnpm@10.32.1",
32+
"devDependencies": {
33+
"@types/node": "^25.5.0",
34+
"color": "^5.0.3",
35+
"tsx": "^4.21.0",
36+
"typescript": "^6.0.2"
37+
}
38+
}

0 commit comments

Comments
 (0)