@pisodev/ui-common 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +217 -0
- package/dist/theme/colors.data.d.ts +8 -6
- package/dist/theme/colors.data.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,217 @@
|
|
|
1
|
+
# @library/common
|
|
2
|
+
|
|
3
|
+
Shared library for common components, utilities, and design tokens across projects.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
This package provides:
|
|
8
|
+
- **Design Tokens**: Color system generated from Figma design tokens
|
|
9
|
+
- **Common Components**: Shared UI components (coming soon)
|
|
10
|
+
- **Utilities**: Helper functions and types (coming soon)
|
|
11
|
+
|
|
12
|
+
## Color System
|
|
13
|
+
|
|
14
|
+
The color system automatically converts Figma design tokens into hex values for use in CSS and SCSS.
|
|
15
|
+
|
|
16
|
+
### Features
|
|
17
|
+
|
|
18
|
+
- **Figma to Code**: Export Figma tokens → Auto-generate hex values
|
|
19
|
+
- **Three Token Types**: Scale, Semantic, and Static tokens
|
|
20
|
+
- **Theme Support**: Built-in light/dark mode switching
|
|
21
|
+
- **Type-Safe**: Full TypeScript support
|
|
22
|
+
|
|
23
|
+
## Available Tokens
|
|
24
|
+
|
|
25
|
+
**Scale Tokens** - Base color scales with light/dark mode variants
|
|
26
|
+
```typescript
|
|
27
|
+
grayScale, blue1Scale, blue2Scale, greenScale, purpleScale, yellowScale, redScale
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
**Alpha Tokens** - Transparent color variants
|
|
31
|
+
```typescript
|
|
32
|
+
grayAlpha, blue1Alpha, blue2Alpha, greenAlpha, purpleAlpha, yellowAlpha, redAlpha, whiteAlpha
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
**Semantic Tokens** - Purpose-based colors
|
|
36
|
+
```typescript
|
|
37
|
+
graySemantic, semanticPaper, semanticDivider, semanticOverlay, semanticBrand, semanticInformation
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
**Static Tokens** - Fixed colors across themes
|
|
41
|
+
```typescript
|
|
42
|
+
staticBlack, staticWhite, staticColor
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Quick Start
|
|
46
|
+
|
|
47
|
+
### Using Colors in Your Project
|
|
48
|
+
|
|
49
|
+
**CSS:**
|
|
50
|
+
```css
|
|
51
|
+
@import '@library/common/theme/colors.css';
|
|
52
|
+
|
|
53
|
+
.button {
|
|
54
|
+
background: var(--blue1-400);
|
|
55
|
+
color: var(--gray-00);
|
|
56
|
+
}
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
**SCSS:**
|
|
60
|
+
```scss
|
|
61
|
+
@import '@library/common/theme/colors';
|
|
62
|
+
|
|
63
|
+
.button {
|
|
64
|
+
background: $blue1-400;
|
|
65
|
+
color: $gray-00;
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
**TypeScript/JavaScript:**
|
|
70
|
+
```typescript
|
|
71
|
+
import { grayScale, semanticBrand } from '@library/common/theme/colors.data';
|
|
72
|
+
|
|
73
|
+
const primaryColor = grayScale.light['400']; // '#AAACAE'
|
|
74
|
+
const brandColor = semanticBrand['gluwa-primary']; // 'var(--blue1-400)'
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
---
|
|
78
|
+
|
|
79
|
+
## Updating Colors
|
|
80
|
+
|
|
81
|
+
When colors change in Figma:
|
|
82
|
+
|
|
83
|
+
1. **Export** Figma tokens as JSON to `tokens/` directory
|
|
84
|
+
2. **Extract** colors from tokens: `npm run build:extract-colors`
|
|
85
|
+
3. **Build** CSS/SCSS files: `npm run build:colors`
|
|
86
|
+
|
|
87
|
+
```bash
|
|
88
|
+
npm run build:extract-colors # Parse JSON → colors.data.ts
|
|
89
|
+
npm run build:colors # Generate CSS/SCSS
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
---
|
|
93
|
+
|
|
94
|
+
## How It Works
|
|
95
|
+
|
|
96
|
+
### From Figma to Hex Values
|
|
97
|
+
|
|
98
|
+
The system converts Figma design tokens into hex color values:
|
|
99
|
+
|
|
100
|
+
**1. Figma Tokens (JSON)**
|
|
101
|
+
```json
|
|
102
|
+
{
|
|
103
|
+
"scale-blue1": {
|
|
104
|
+
"400": {
|
|
105
|
+
"$value": { "hex": "#1473FF" }
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
**2. Generated TypeScript**
|
|
112
|
+
```typescript
|
|
113
|
+
export const blue1Scale = {
|
|
114
|
+
light: { '400': '#1473FF' },
|
|
115
|
+
dark: { '400': '#1473FF' }
|
|
116
|
+
}
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
**3. Generated CSS**
|
|
120
|
+
```css
|
|
121
|
+
:root {
|
|
122
|
+
--blue1-400: #1473FF;
|
|
123
|
+
}
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
### Key Features
|
|
127
|
+
|
|
128
|
+
**Alias References**
|
|
129
|
+
Semantic and static tokens reference scale tokens instead of duplicating hex values:
|
|
130
|
+
```typescript
|
|
131
|
+
'gluwa-primary': 'var(--blue1-400)' // ✅ References scale token
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
**Dynamic Generation**
|
|
135
|
+
Adding new colors in Figma automatically includes them in the build:
|
|
136
|
+
- No manual code updates needed
|
|
137
|
+
- Rename-safe across all files
|
|
138
|
+
|
|
139
|
+
**Sanitization**
|
|
140
|
+
Parentheses in token names are converted to suffixes:
|
|
141
|
+
- `"trugi-primary(legacy)"` → `"trugi-primary-legacy"`
|
|
142
|
+
- Ensures valid CSS/SCSS variable names
|
|
143
|
+
|
|
144
|
+
## File Structure
|
|
145
|
+
|
|
146
|
+
```
|
|
147
|
+
src/theme/
|
|
148
|
+
├── extract-colors.ts # Parses Figma JSON → colors.data.ts
|
|
149
|
+
├── build-colors.ts # Generates CSS/SCSS from colors.data.ts
|
|
150
|
+
├── colors.data.ts # TypeScript exports (auto-generated)
|
|
151
|
+
├── colors.css # CSS variables (auto-generated)
|
|
152
|
+
└── _colors.scss # SCSS variables (auto-generated)
|
|
153
|
+
|
|
154
|
+
tokens/
|
|
155
|
+
└── *.json # Figma design token JSON files
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
## Scripts
|
|
159
|
+
|
|
160
|
+
Add to your `package.json`:
|
|
161
|
+
```json
|
|
162
|
+
{
|
|
163
|
+
"scripts": {
|
|
164
|
+
"extract:colors": "tsx src/theme/extract-colors.ts",
|
|
165
|
+
"build:colors": "npm run extract:colors && tsx src/theme/build-colors.ts"
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
## Theme Switching
|
|
171
|
+
|
|
172
|
+
The generated CSS supports multiple theme modes:
|
|
173
|
+
|
|
174
|
+
**Auto (OS preference):**
|
|
175
|
+
Automatically switches based on system preference (default behavior)
|
|
176
|
+
|
|
177
|
+
**Force Light Mode:**
|
|
178
|
+
```html
|
|
179
|
+
<html class="light">
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
**Force Dark Mode:**
|
|
183
|
+
```html
|
|
184
|
+
<html class="dark">
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
## Extending the Color System
|
|
188
|
+
|
|
189
|
+
### Add New Color Scale
|
|
190
|
+
|
|
191
|
+
1. **In Figma:** Create new color group with `scale-{name}` prefix
|
|
192
|
+
2. **In Code:** Add mapping to [extract-colors.ts](src/theme/extract-colors.ts):
|
|
193
|
+
```typescript
|
|
194
|
+
const SCALE_EXPORT: Record<string, string> = {
|
|
195
|
+
// ...existing mappings
|
|
196
|
+
orange: 'orangeScale',
|
|
197
|
+
};
|
|
198
|
+
```
|
|
199
|
+
3. **Build:** Run `npm run build:colors`
|
|
200
|
+
|
|
201
|
+
### Add New Semantic Token Group
|
|
202
|
+
|
|
203
|
+
1. **In Figma:** Create new semantic group with `semantic-{name}` prefix
|
|
204
|
+
2. **In Code:** Add mapping to [extract-colors.ts](src/theme/extract-colors.ts):
|
|
205
|
+
```typescript
|
|
206
|
+
const SEMANTIC_GROUP_EXPORT: Record<string, string> = {
|
|
207
|
+
// ...existing mappings
|
|
208
|
+
text: 'semanticText',
|
|
209
|
+
};
|
|
210
|
+
```
|
|
211
|
+
3. **Build:** Run `npm run build:colors`
|
|
212
|
+
|
|
213
|
+
---
|
|
214
|
+
|
|
215
|
+
## License
|
|
216
|
+
|
|
217
|
+
MIT
|
|
@@ -396,6 +396,7 @@ export declare const semanticBrand: {
|
|
|
396
396
|
readonly 'space-primary-pressed': "var(--purple-600)";
|
|
397
397
|
readonly 'trugi-primary': "var(--blue2-400)";
|
|
398
398
|
readonly 'trugi-primary-hover': "var(--blue2-600)";
|
|
399
|
+
readonly 'trugi-primary-legacy': "#2848FEFF";
|
|
399
400
|
readonly 'trugi-primary-low': "var(--blue2-alpha-50)";
|
|
400
401
|
readonly 'trugi-primary-low-hover': "var(--blue2-alpha-100)";
|
|
401
402
|
readonly 'trugi-primary-low-pressed': "var(--blue2-alpha-100)";
|
|
@@ -422,6 +423,7 @@ export declare const semanticBrand: {
|
|
|
422
423
|
readonly 'space-primary-pressed': "var(--purple-600)";
|
|
423
424
|
readonly 'trugi-primary': "var(--blue2-400)";
|
|
424
425
|
readonly 'trugi-primary-hover': "var(--blue2-600)";
|
|
426
|
+
readonly 'trugi-primary-legacy': "#2848FEFF";
|
|
425
427
|
readonly 'trugi-primary-low': "var(--blue2-alpha-50)";
|
|
426
428
|
readonly 'trugi-primary-low-hover': "var(--blue2-alpha-100)";
|
|
427
429
|
readonly 'trugi-primary-low-pressed': "var(--blue2-alpha-100)";
|
|
@@ -510,9 +512,9 @@ export declare const staticColor: {
|
|
|
510
512
|
readonly 'purple-700': "#A8B8FFFF";
|
|
511
513
|
readonly 'red-400': "#FF4848FF";
|
|
512
514
|
readonly 'red-700': "#FFA7A7FF";
|
|
513
|
-
readonly 'trugi-blue-200': "#D9E8F9FF";
|
|
514
|
-
readonly 'trugi-blue-300': "#C0DAF8FF";
|
|
515
|
-
readonly 'trugi-blue-700': "#132DBBFF";
|
|
515
|
+
readonly 'trugi-blue-200-legacy': "#D9E8F9FF";
|
|
516
|
+
readonly 'trugi-blue-300-legacy': "#C0DAF8FF";
|
|
517
|
+
readonly 'trugi-blue-700-legacy': "#132DBBFF";
|
|
516
518
|
readonly 'trugi-blue-alpha': "#2848FE24";
|
|
517
519
|
readonly 'trugi-green': "#4EE28CFF";
|
|
518
520
|
readonly 'trugi-orange': "#FF8A4BFF";
|
|
@@ -540,9 +542,9 @@ export declare const staticColor: {
|
|
|
540
542
|
readonly 'purple-700': "#A8B8FFFF";
|
|
541
543
|
readonly 'red-400': "#FF4848FF";
|
|
542
544
|
readonly 'red-700': "#FFA7A7FF";
|
|
543
|
-
readonly 'trugi-blue-200': "#D9E8F9FF";
|
|
544
|
-
readonly 'trugi-blue-300': "#C0DAF8FF";
|
|
545
|
-
readonly 'trugi-blue-700': "#132DBBFF";
|
|
545
|
+
readonly 'trugi-blue-200-legacy': "#D9E8F9FF";
|
|
546
|
+
readonly 'trugi-blue-300-legacy': "#C0DAF8FF";
|
|
547
|
+
readonly 'trugi-blue-700-legacy': "#132DBBFF";
|
|
546
548
|
readonly 'trugi-blue-alpha': "#2848FE24";
|
|
547
549
|
readonly 'trugi-green': "#4EE28CFF";
|
|
548
550
|
readonly 'trugi-orange': "#FF8A4BFF";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colors.data.d.ts","sourceRoot":"","sources":["../../src/theme/colors.data.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BZ,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Bb,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Bb,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Bb,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Bd,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Bd,CAAC;AAEX,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BX,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;CAeZ,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;CAeb,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;CAeb,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;CAeb,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;CAed,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;CAed,CAAC;AAEX,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;CAeX,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;CAeb,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;;;;;CAWf,CAAC;AAEX,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;CAehB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;;;;;CAalB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;CASlB,CAAC;AAEX,eAAO,MAAM,aAAa
|
|
1
|
+
{"version":3,"file":"colors.data.d.ts","sourceRoot":"","sources":["../../src/theme/colors.data.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BZ,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Bb,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Bb,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Bb,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Bd,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Bd,CAAC;AAEX,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BX,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;CAeZ,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;CAeb,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;CAeb,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;CAeb,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;CAed,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;CAed,CAAC;AAEX,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;CAeX,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;CAeb,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;;;;;CAWf,CAAC;AAEX,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;CAehB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;;;;;CAalB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;CASlB,CAAC;AAEX,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDhB,CAAC;AAEX,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;CAqBtB,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;CAmBd,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;CAmBd,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6Dd,CAAC"}
|