@pisodev/ui-common 0.0.3 → 0.0.6

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 CHANGED
@@ -1,146 +1,136 @@
1
- # @library/common
1
+ # @pisodev/ui-common
2
2
 
3
- Shared library for common components, utilities, and design tokens across projects.
3
+ Shared types, theme, and typography system for cross-platform UI components.
4
4
 
5
- ## Overview
5
+ ## Installation
6
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)
7
+ ```bash
8
+ npm install @pisodev/ui-common
9
+ ```
11
10
 
12
- ## Color System
11
+ > **Note**: This package is automatically installed as a dependency when you install `@pisodev/ui-web` or `@pisodev/ui-native`.
13
12
 
14
- The color system automatically converts Figma design tokens into hex values for use in CSS and SCSS.
13
+ ## Features
15
14
 
16
- ### Features
15
+ - **Theme System**: Light and dark color themes
16
+ - **Typography Presets**: Consistent typography across platforms
17
+ - **Type Definitions**: Shared TypeScript types
18
+ - **Color Scales**: Comprehensive color palette with alpha variants
19
+ - **Figma Integration**: Auto-generated from Figma design tokens
17
20
 
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
21
+ ## Usage
22
22
 
23
- ## Available Tokens
23
+ ### Colors
24
24
 
25
- **Scale Tokens** - Base color scales with light/dark mode variants
26
25
  ```typescript
27
- grayScale, blue1Scale, blue2Scale, greenScale, purpleScale, yellowScale, redScale
28
- ```
26
+ import { lightColors, darkColors } from '@pisodev/ui-common';
29
27
 
30
- **Alpha Tokens** - Transparent color variants
31
- ```typescript
32
- grayAlpha, blue1Alpha, blue2Alpha, greenAlpha, purpleAlpha, yellowAlpha, redAlpha, whiteAlpha
28
+ // Access color scales
29
+ const primaryColor = lightColors.colors.blue1['9'];
30
+ const grayScale = darkColors.colors.gray['5'];
31
+
32
+ // Available color scales:
33
+ // - gray, grayAlpha, graySemantic
34
+ // - whiteAlpha
35
+ // - blue1, blue1Alpha
36
+ // - blue2, blue2Alpha
37
+ // - green, greenAlpha
38
+ // - purple, purpleAlpha
39
+ // - yellow, yellowAlpha
40
+ // - red, redAlpha
33
41
  ```
34
42
 
35
- **Semantic Tokens** - Purpose-based colors
43
+ ### Typography
44
+
36
45
  ```typescript
37
- graySemantic, semanticPaper, semanticDivider, semanticOverlay, semanticBrand, semanticInformation
46
+ import { typographyPresets } from '@pisodev/ui-common';
47
+
48
+ // Access typography presets
49
+ const heading = typographyPresets.heading1;
50
+ // {
51
+ // fontFamily: string;
52
+ // fontSize: number;
53
+ // fontWeight: number;
54
+ // fontStyle: string;
55
+ // lineHeight: number;
56
+ // letterSpacing: number;
57
+ // }
38
58
  ```
39
59
 
40
- **Static Tokens** - Fixed colors across themes
60
+ ### Types
61
+
41
62
  ```typescript
42
- staticBlack, staticWhite, staticColor
63
+ import type { Theme, TypographyPreset } from '@pisodev/ui-common';
64
+
65
+ const customTheme: Theme = {
66
+ colors: {
67
+ // ... your color definitions
68
+ }
69
+ };
43
70
  ```
44
71
 
45
- ## Quick Start
72
+ ## Color System
46
73
 
47
- ### Using Colors in Your Project
74
+ The color system provides:
75
+ - **12-step scales**: From lightest to darkest
76
+ - **Light & Dark modes**: Full theme support
77
+ - **Alpha variants**: For transparency effects
78
+ - **Semantic colors**: Pre-defined semantic meanings
48
79
 
49
- **CSS:**
50
- ```css
51
- @import '@library/common/theme/colors.css';
80
+ ### Available Color Scales
52
81
 
53
- .button {
54
- background: var(--blue1-400);
55
- color: var(--gray-00);
56
- }
82
+ **Scale Tokens** - Base color scales with light/dark mode variants
83
+ ```typescript
84
+ grayScale, blue1Scale, blue2Scale, greenScale, purpleScale, yellowScale, redScale
57
85
  ```
58
86
 
59
- **SCSS:**
60
- ```scss
61
- @import '@library/common/theme/colors';
62
-
63
- .button {
64
- background: $blue1-400;
65
- color: $gray-00;
66
- }
87
+ **Alpha Tokens** - Transparent color variants
88
+ ```typescript
89
+ grayAlpha, blue1Alpha, blue2Alpha, greenAlpha, purpleAlpha, yellowAlpha, redAlpha, whiteAlpha
67
90
  ```
68
91
 
69
- **TypeScript/JavaScript:**
92
+ **Semantic Tokens** - Purpose-based colors
70
93
  ```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)'
94
+ graySemantic, semanticPaper, semanticDivider, semanticOverlay, semanticBrand, semanticInformation
75
95
  ```
76
96
 
77
- ---
97
+ ## Typography System
78
98
 
79
- ## Updating Colors
99
+ Typography presets are generated from design tokens and include:
100
+ - Font family
101
+ - Font size
102
+ - Font weight
103
+ - Line height
104
+ - Letter spacing
80
105
 
81
- When colors change in Figma:
106
+ ## Development
82
107
 
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`
108
+ This package uses automated scripts to generate color and typography data from design tokens.
109
+
110
+ ### Build
86
111
 
87
112
  ```bash
88
- npm run build:extract-colors # Parse JSON → colors.data.ts
89
- npm run build:colors # Generate CSS/SCSS
113
+ npm run build
90
114
  ```
91
115
 
92
- ---
93
-
94
- ## How It Works
116
+ This will:
117
+ 1. Extract typography from design tokens
118
+ 2. Extract and build color scales
119
+ 3. Compile TypeScript to distributable format
95
120
 
96
- ### From Figma to Hex Values
121
+ ### Updating Colors from Figma
97
122
 
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
- ```
123
+ When colors change in Figma:
125
124
 
126
- ### Key Features
125
+ 1. **Export** Figma tokens as JSON to `tokens/` directory
126
+ 2. **Extract** colors from tokens: `npm run build:colors`
127
+ 3. **Build** the package: `npm run build`
127
128
 
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
129
+ ```bash
130
+ npm run build:colors # Parse JSON colors.data.ts CSS/SCSS
131
+ npm run build # Full build with all steps
132
132
  ```
133
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
134
  ## File Structure
145
135
 
146
136
  ```
@@ -148,70 +138,18 @@ src/theme/
148
138
  ├── extract-colors.ts # Parses Figma JSON → colors.data.ts
149
139
  ├── build-colors.ts # Generates CSS/SCSS from colors.data.ts
150
140
  ├── 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)
141
+ ├── colors.ts # Theme exports
142
+ └── colors.types.ts # Type definitions
176
143
 
177
- **Force Light Mode:**
178
- ```html
179
- <html class="light">
180
- ```
144
+ src/typography/
145
+ ├── extract-typography.ts # Extracts typography from tokens
146
+ ├── typography.data.ts # Typography presets (auto-generated)
147
+ └── typography.ts # Typography exports
181
148
 
182
- **Force Dark Mode:**
183
- ```html
184
- <html class="dark">
149
+ tokens/
150
+ └── *.json # Figma design token JSON files
185
151
  ```
186
152
 
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
153
  ## License
216
154
 
217
- MIT
155
+ MIT © Piso
package/dist/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export * from './theme';
2
2
  export * from './types/Typography.base.types';
3
+ export * from './typography/typography';
3
4
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,+BAA+B,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yBAAyB,CAAC"}
package/dist/index.esm.js CHANGED
@@ -2,4 +2,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
2
2
  const tslib_1 = require("tslib");
3
3
  tslib_1.__exportStar(require("./theme"), exports);
4
4
  tslib_1.__exportStar(require("./types/Typography.base.types"), exports);
5
+ tslib_1.__exportStar(require("./typography/typography"), exports);
5
6
  //# sourceMappingURL=index.esm.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.esm.js","sources":["../src/index.ts"],"sourcesContent":["export * from './theme';\nexport * from './types/Typography.base.types';\n"],"names":[],"mappings":";;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA,CAAA;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA,CAAA"}
1
+ {"version":3,"file":"index.esm.js","sources":["../src/index.ts"],"sourcesContent":["export * from './theme';\nexport * from './types/Typography.base.types';\nexport * from './typography/typography';\n"],"names":[],"mappings":";;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA,CAAA;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA,CAAA;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA,CAAA"}
package/dist/index.js CHANGED
@@ -4,4 +4,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
4
4
  const tslib_1 = require("tslib");
5
5
  tslib_1.__exportStar(require("./theme"), exports);
6
6
  tslib_1.__exportStar(require("./types/Typography.base.types"), exports);
7
+ tslib_1.__exportStar(require("./typography/typography"), exports);
7
8
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["export * from './theme';\nexport * from './types/Typography.base.types';\n"],"names":[],"mappings":";;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA,CAAA;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA,CAAA;;"}
1
+ {"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["export * from './theme';\nexport * from './types/Typography.base.types';\nexport * from './typography/typography';\n"],"names":[],"mappings":";;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA,CAAA;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA,CAAA;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA,CAAA;;"}
@@ -366,12 +366,12 @@ export declare const semanticDivider: {
366
366
  };
367
367
  export declare const semanticOverlay: {
368
368
  readonly light: {
369
- readonly 'overlay-dim': "";
370
- readonly 'overlay-low': "";
369
+ readonly 'overlay-dim': "var(--static-black-alpha-500)";
370
+ readonly 'overlay-low': "var(--static-black-alpha-200)";
371
371
  };
372
372
  readonly dark: {
373
- readonly 'overlay-dim': "";
374
- readonly 'overlay-low': "";
373
+ readonly 'overlay-dim': "var(--static-black-alpha-500)";
374
+ readonly 'overlay-low': "var(--static-black-alpha-200)";
375
375
  };
376
376
  };
377
377
  export declare const semanticBrand: {
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=extract-typography.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"extract-typography.d.ts","sourceRoot":"","sources":["../../src/typography/extract-typography.ts"],"names":[],"mappings":""}
@@ -0,0 +1,11 @@
1
+ export { typographyPresets } from './typography.data';
2
+ export type TypographyPresetName = keyof typeof import('./typography.data').typographyPresets;
3
+ export type TypographyPreset = {
4
+ fontFamily: string;
5
+ fontSize: number;
6
+ fontWeight: number;
7
+ fontStyle: string;
8
+ lineHeight: number;
9
+ letterSpacing: number;
10
+ };
11
+ //# sourceMappingURL=typography.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/typography/typography.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAGtD,MAAM,MAAM,oBAAoB,GAAG,MAAM,cAAc,mBAAmB,EAAE,iBAAiB,CAAC;AAE9F,MAAM,MAAM,gBAAgB,GAAG;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC"}
@@ -0,0 +1,491 @@
1
+ export declare const typographyPresets: {
2
+ readonly h1: {
3
+ readonly fontFamily: "Inter";
4
+ readonly fontSize: 72;
5
+ readonly fontWeight: 600;
6
+ readonly fontStyle: "normal";
7
+ readonly lineHeight: 82.8;
8
+ readonly letterSpacing: 0;
9
+ };
10
+ readonly amount: {
11
+ readonly fontFamily: "Inter";
12
+ readonly fontSize: 60;
13
+ readonly fontWeight: 600;
14
+ readonly fontStyle: "normal";
15
+ readonly lineHeight: 69;
16
+ readonly letterSpacing: 0;
17
+ };
18
+ readonly h2: {
19
+ readonly fontFamily: "Inter";
20
+ readonly fontSize: 60;
21
+ readonly fontWeight: 600;
22
+ readonly fontStyle: "normal";
23
+ readonly lineHeight: 69;
24
+ readonly letterSpacing: 0;
25
+ };
26
+ readonly h3: {
27
+ readonly fontFamily: "Inter";
28
+ readonly fontSize: 54;
29
+ readonly fontWeight: 600;
30
+ readonly fontStyle: "normal";
31
+ readonly lineHeight: 62.1;
32
+ readonly letterSpacing: 0;
33
+ };
34
+ readonly h4: {
35
+ readonly fontFamily: "Inter";
36
+ readonly fontSize: 48;
37
+ readonly fontWeight: 600;
38
+ readonly fontStyle: "normal";
39
+ readonly lineHeight: 55.2;
40
+ readonly letterSpacing: 0;
41
+ };
42
+ readonly h5: {
43
+ readonly fontFamily: "Inter";
44
+ readonly fontSize: 42;
45
+ readonly fontWeight: 600;
46
+ readonly fontStyle: "normal";
47
+ readonly lineHeight: 48.3;
48
+ readonly letterSpacing: 0;
49
+ };
50
+ readonly 'title1-bold': {
51
+ readonly fontFamily: "Inter";
52
+ readonly fontSize: 32;
53
+ readonly fontWeight: 600;
54
+ readonly fontStyle: "normal";
55
+ readonly lineHeight: 48;
56
+ readonly letterSpacing: 0;
57
+ };
58
+ readonly 'title1-regular': {
59
+ readonly fontFamily: "Inter";
60
+ readonly fontSize: 32;
61
+ readonly fontWeight: 400;
62
+ readonly fontStyle: "normal";
63
+ readonly lineHeight: 48;
64
+ readonly letterSpacing: 0;
65
+ };
66
+ readonly 'title2-bold': {
67
+ readonly fontFamily: "Inter";
68
+ readonly fontSize: 26;
69
+ readonly fontWeight: 600;
70
+ readonly fontStyle: "normal";
71
+ readonly lineHeight: 39;
72
+ readonly letterSpacing: 0;
73
+ };
74
+ readonly 'title2-regular': {
75
+ readonly fontFamily: "Inter";
76
+ readonly fontSize: 26;
77
+ readonly fontWeight: 400;
78
+ readonly fontStyle: "normal";
79
+ readonly lineHeight: 39;
80
+ readonly letterSpacing: 0;
81
+ };
82
+ readonly 'title3-bold': {
83
+ readonly fontFamily: "Inter";
84
+ readonly fontSize: 24;
85
+ readonly fontWeight: 600;
86
+ readonly fontStyle: "normal";
87
+ readonly lineHeight: 36;
88
+ readonly letterSpacing: 0;
89
+ };
90
+ readonly 'title3-regular': {
91
+ readonly fontFamily: "Inter";
92
+ readonly fontSize: 24;
93
+ readonly fontWeight: 400;
94
+ readonly fontStyle: "normal";
95
+ readonly lineHeight: 36;
96
+ readonly letterSpacing: 0;
97
+ };
98
+ readonly 'title4-bold': {
99
+ readonly fontFamily: "Inter";
100
+ readonly fontSize: 20;
101
+ readonly fontWeight: 600;
102
+ readonly fontStyle: "normal";
103
+ readonly lineHeight: 30;
104
+ readonly letterSpacing: 0;
105
+ };
106
+ readonly 'title4-regular': {
107
+ readonly fontFamily: "Inter";
108
+ readonly fontSize: 20;
109
+ readonly fontWeight: 400;
110
+ readonly fontStyle: "normal";
111
+ readonly lineHeight: 30;
112
+ readonly letterSpacing: 0;
113
+ };
114
+ readonly 'title5-bold': {
115
+ readonly fontFamily: "Inter";
116
+ readonly fontSize: 19;
117
+ readonly fontWeight: 600;
118
+ readonly fontStyle: "normal";
119
+ readonly lineHeight: 28.5;
120
+ readonly letterSpacing: -0.19;
121
+ };
122
+ readonly 'title5-regular': {
123
+ readonly fontFamily: "Inter";
124
+ readonly fontSize: 19;
125
+ readonly fontWeight: 400;
126
+ readonly fontStyle: "normal";
127
+ readonly lineHeight: 28.5;
128
+ readonly letterSpacing: -0.19;
129
+ };
130
+ readonly 'subtitle1-bold': {
131
+ readonly fontFamily: "Inter";
132
+ readonly fontSize: 18;
133
+ readonly fontWeight: 600;
134
+ readonly fontStyle: "normal";
135
+ readonly lineHeight: 27;
136
+ readonly letterSpacing: -0.18;
137
+ };
138
+ readonly 'subtitle1-regular': {
139
+ readonly fontFamily: "Inter";
140
+ readonly fontSize: 18;
141
+ readonly fontWeight: 400;
142
+ readonly fontStyle: "normal";
143
+ readonly lineHeight: 27;
144
+ readonly letterSpacing: -0.18;
145
+ };
146
+ readonly 'subtitle2-bold': {
147
+ readonly fontFamily: "Inter";
148
+ readonly fontSize: 17;
149
+ readonly fontWeight: 600;
150
+ readonly fontStyle: "normal";
151
+ readonly lineHeight: 25.5;
152
+ readonly letterSpacing: -0.17;
153
+ };
154
+ readonly 'subtitle2-regular': {
155
+ readonly fontFamily: "Inter";
156
+ readonly fontSize: 17;
157
+ readonly fontWeight: 400;
158
+ readonly fontStyle: "normal";
159
+ readonly lineHeight: 25.5;
160
+ readonly letterSpacing: -0.17;
161
+ };
162
+ readonly 'body1-l1-bold': {
163
+ readonly fontFamily: "Inter";
164
+ readonly fontSize: 18;
165
+ readonly fontWeight: 600;
166
+ readonly fontStyle: "normal";
167
+ readonly lineHeight: 32.4;
168
+ readonly letterSpacing: -0.18;
169
+ };
170
+ readonly 'body1-l1-medium': {
171
+ readonly fontFamily: "Inter";
172
+ readonly fontSize: 18;
173
+ readonly fontWeight: 500;
174
+ readonly fontStyle: "normal";
175
+ readonly lineHeight: 32.4;
176
+ readonly letterSpacing: -0.18;
177
+ };
178
+ readonly 'body1-l1-regular': {
179
+ readonly fontFamily: "Inter";
180
+ readonly fontSize: 18;
181
+ readonly fontWeight: 400;
182
+ readonly fontStyle: "normal";
183
+ readonly lineHeight: 32.4;
184
+ readonly letterSpacing: -0.18;
185
+ };
186
+ readonly 'body1-l2-bold': {
187
+ readonly fontFamily: "Inter";
188
+ readonly fontSize: 18;
189
+ readonly fontWeight: 600;
190
+ readonly fontStyle: "normal";
191
+ readonly lineHeight: 27;
192
+ readonly letterSpacing: -0.18;
193
+ };
194
+ readonly 'body1-l2-medium': {
195
+ readonly fontFamily: "Inter";
196
+ readonly fontSize: 18;
197
+ readonly fontWeight: 500;
198
+ readonly fontStyle: "normal";
199
+ readonly lineHeight: 27;
200
+ readonly letterSpacing: -0.18;
201
+ };
202
+ readonly 'body1-l2-regular': {
203
+ readonly fontFamily: "Inter";
204
+ readonly fontSize: 18;
205
+ readonly fontWeight: 400;
206
+ readonly fontStyle: "normal";
207
+ readonly lineHeight: 27;
208
+ readonly letterSpacing: -0.18;
209
+ };
210
+ readonly 'body2-l1-bold': {
211
+ readonly fontFamily: "Inter";
212
+ readonly fontSize: 17;
213
+ readonly fontWeight: 600;
214
+ readonly fontStyle: "normal";
215
+ readonly lineHeight: 30.6;
216
+ readonly letterSpacing: -0.17;
217
+ };
218
+ readonly 'body2-l1-medium': {
219
+ readonly fontFamily: "Inter";
220
+ readonly fontSize: 17;
221
+ readonly fontWeight: 500;
222
+ readonly fontStyle: "normal";
223
+ readonly lineHeight: 30.6;
224
+ readonly letterSpacing: -0.17;
225
+ };
226
+ readonly 'body2-l1-regular': {
227
+ readonly fontFamily: "Inter";
228
+ readonly fontSize: 17;
229
+ readonly fontWeight: 400;
230
+ readonly fontStyle: "normal";
231
+ readonly lineHeight: 25.5;
232
+ readonly letterSpacing: -0.17;
233
+ };
234
+ readonly 'body2-l2-bold': {
235
+ readonly fontFamily: "Inter";
236
+ readonly fontSize: 17;
237
+ readonly fontWeight: 600;
238
+ readonly fontStyle: "normal";
239
+ readonly lineHeight: 25.5;
240
+ readonly letterSpacing: -0.17;
241
+ };
242
+ readonly 'body2-l2-medium': {
243
+ readonly fontFamily: "Inter";
244
+ readonly fontSize: 17;
245
+ readonly fontWeight: 500;
246
+ readonly fontStyle: "normal";
247
+ readonly lineHeight: 25.5;
248
+ readonly letterSpacing: -0.17;
249
+ };
250
+ readonly 'body3-l1-bold': {
251
+ readonly fontFamily: "Inter";
252
+ readonly fontSize: 16;
253
+ readonly fontWeight: 600;
254
+ readonly fontStyle: "normal";
255
+ readonly lineHeight: 28.8;
256
+ readonly letterSpacing: -0.16;
257
+ };
258
+ readonly 'body3-l1-medium': {
259
+ readonly fontFamily: "Inter";
260
+ readonly fontSize: 16;
261
+ readonly fontWeight: 500;
262
+ readonly fontStyle: "normal";
263
+ readonly lineHeight: 28.8;
264
+ readonly letterSpacing: -0.16;
265
+ };
266
+ readonly 'body3-l1-regular': {
267
+ readonly fontFamily: "Inter";
268
+ readonly fontSize: 16;
269
+ readonly fontWeight: 400;
270
+ readonly fontStyle: "normal";
271
+ readonly lineHeight: 28.8;
272
+ readonly letterSpacing: -0.16;
273
+ };
274
+ readonly 'body3-l2-bold': {
275
+ readonly fontFamily: "Inter";
276
+ readonly fontSize: 16;
277
+ readonly fontWeight: 600;
278
+ readonly fontStyle: "normal";
279
+ readonly lineHeight: 24;
280
+ readonly letterSpacing: -0.16;
281
+ };
282
+ readonly 'body3-l2-medium': {
283
+ readonly fontFamily: "Inter";
284
+ readonly fontSize: 16;
285
+ readonly fontWeight: 500;
286
+ readonly fontStyle: "normal";
287
+ readonly lineHeight: 24;
288
+ readonly letterSpacing: -0.16;
289
+ };
290
+ readonly 'body3-l2-regular': {
291
+ readonly fontFamily: "Inter";
292
+ readonly fontSize: 16;
293
+ readonly fontWeight: 400;
294
+ readonly fontStyle: "normal";
295
+ readonly lineHeight: 24;
296
+ readonly letterSpacing: -0.16;
297
+ };
298
+ readonly 'body4-l1-bold': {
299
+ readonly fontFamily: "Inter";
300
+ readonly fontSize: 15;
301
+ readonly fontWeight: 600;
302
+ readonly fontStyle: "normal";
303
+ readonly lineHeight: 27;
304
+ readonly letterSpacing: -0.15;
305
+ };
306
+ readonly 'body4-l1-medium': {
307
+ readonly fontFamily: "Inter";
308
+ readonly fontSize: 15;
309
+ readonly fontWeight: 500;
310
+ readonly fontStyle: "normal";
311
+ readonly lineHeight: 27;
312
+ readonly letterSpacing: -0.15;
313
+ };
314
+ readonly 'body4-l1-regular': {
315
+ readonly fontFamily: "Inter";
316
+ readonly fontSize: 15;
317
+ readonly fontWeight: 400;
318
+ readonly fontStyle: "normal";
319
+ readonly lineHeight: 27;
320
+ readonly letterSpacing: -0.15;
321
+ };
322
+ readonly 'body4-l2-bold': {
323
+ readonly fontFamily: "Inter";
324
+ readonly fontSize: 15;
325
+ readonly fontWeight: 600;
326
+ readonly fontStyle: "normal";
327
+ readonly lineHeight: 22.5;
328
+ readonly letterSpacing: -0.15;
329
+ };
330
+ readonly 'body4-l2-medium': {
331
+ readonly fontFamily: "Inter";
332
+ readonly fontSize: 15;
333
+ readonly fontWeight: 500;
334
+ readonly fontStyle: "normal";
335
+ readonly lineHeight: 22.5;
336
+ readonly letterSpacing: -0.15;
337
+ };
338
+ readonly 'body4-l2-regular': {
339
+ readonly fontFamily: "Inter";
340
+ readonly fontSize: 15;
341
+ readonly fontWeight: 400;
342
+ readonly fontStyle: "normal";
343
+ readonly lineHeight: 22.5;
344
+ readonly letterSpacing: -0.15;
345
+ };
346
+ readonly 'label1-bold': {
347
+ readonly fontFamily: "Inter";
348
+ readonly fontSize: 18;
349
+ readonly fontWeight: 600;
350
+ readonly fontStyle: "normal";
351
+ readonly lineHeight: 27;
352
+ readonly letterSpacing: -0.18;
353
+ };
354
+ readonly 'label1-regular': {
355
+ readonly fontFamily: "Inter";
356
+ readonly fontSize: 18;
357
+ readonly fontWeight: 400;
358
+ readonly fontStyle: "normal";
359
+ readonly lineHeight: 27;
360
+ readonly letterSpacing: -0.18;
361
+ };
362
+ readonly 'label2-bold': {
363
+ readonly fontFamily: "Inter";
364
+ readonly fontSize: 17;
365
+ readonly fontWeight: 600;
366
+ readonly fontStyle: "normal";
367
+ readonly lineHeight: 25.5;
368
+ readonly letterSpacing: -0.17;
369
+ };
370
+ readonly 'label2-regular': {
371
+ readonly fontFamily: "Inter";
372
+ readonly fontSize: 17;
373
+ readonly fontWeight: 400;
374
+ readonly fontStyle: "normal";
375
+ readonly lineHeight: 25.5;
376
+ readonly letterSpacing: -0.17;
377
+ };
378
+ readonly 'label3-bold': {
379
+ readonly fontFamily: "Inter";
380
+ readonly fontSize: 16;
381
+ readonly fontWeight: 600;
382
+ readonly fontStyle: "normal";
383
+ readonly lineHeight: 24;
384
+ readonly letterSpacing: -0.16;
385
+ };
386
+ readonly 'label3-regular': {
387
+ readonly fontFamily: "Inter";
388
+ readonly fontSize: 16;
389
+ readonly fontWeight: 400;
390
+ readonly fontStyle: "normal";
391
+ readonly lineHeight: 24;
392
+ readonly letterSpacing: -0.16;
393
+ };
394
+ readonly 'label4-bold': {
395
+ readonly fontFamily: "Inter";
396
+ readonly fontSize: 15;
397
+ readonly fontWeight: 600;
398
+ readonly fontStyle: "normal";
399
+ readonly lineHeight: 22.5;
400
+ readonly letterSpacing: -0.15;
401
+ };
402
+ readonly 'label4-regular': {
403
+ readonly fontFamily: "Inter";
404
+ readonly fontSize: 15;
405
+ readonly fontWeight: 400;
406
+ readonly fontStyle: "normal";
407
+ readonly lineHeight: 22.5;
408
+ readonly letterSpacing: -0.15;
409
+ };
410
+ readonly 'label5-bold': {
411
+ readonly fontFamily: "Inter";
412
+ readonly fontSize: 14;
413
+ readonly fontWeight: 600;
414
+ readonly fontStyle: "normal";
415
+ readonly lineHeight: 21;
416
+ readonly letterSpacing: -0.14;
417
+ };
418
+ readonly 'label5-regular': {
419
+ readonly fontFamily: "Inter";
420
+ readonly fontSize: 14;
421
+ readonly fontWeight: 400;
422
+ readonly fontStyle: "normal";
423
+ readonly lineHeight: 21;
424
+ readonly letterSpacing: -0.14;
425
+ };
426
+ readonly 'label6-bold': {
427
+ readonly fontFamily: "Inter";
428
+ readonly fontSize: 13;
429
+ readonly fontWeight: 600;
430
+ readonly fontStyle: "normal";
431
+ readonly lineHeight: 19.5;
432
+ readonly letterSpacing: -0.13;
433
+ };
434
+ readonly 'label6-regular': {
435
+ readonly fontFamily: "Inter";
436
+ readonly fontSize: 13;
437
+ readonly fontWeight: 400;
438
+ readonly fontStyle: "normal";
439
+ readonly lineHeight: 19.5;
440
+ readonly letterSpacing: -0.13;
441
+ };
442
+ readonly 'caption1-bold': {
443
+ readonly fontFamily: "Inter";
444
+ readonly fontSize: 12;
445
+ readonly fontWeight: 600;
446
+ readonly fontStyle: "normal";
447
+ readonly lineHeight: 18;
448
+ readonly letterSpacing: -0.12;
449
+ };
450
+ readonly 'caption1-regular': {
451
+ readonly fontFamily: "Inter";
452
+ readonly fontSize: 12;
453
+ readonly fontWeight: 400;
454
+ readonly fontStyle: "normal";
455
+ readonly lineHeight: 18;
456
+ readonly letterSpacing: -0.12;
457
+ };
458
+ readonly 'caption2-bold': {
459
+ readonly fontFamily: "Inter";
460
+ readonly fontSize: 11;
461
+ readonly fontWeight: 600;
462
+ readonly fontStyle: "normal";
463
+ readonly lineHeight: 16.5;
464
+ readonly letterSpacing: -0.11;
465
+ };
466
+ readonly 'caption2-regular': {
467
+ readonly fontFamily: "Inter";
468
+ readonly fontSize: 11;
469
+ readonly fontWeight: 400;
470
+ readonly fontStyle: "normal";
471
+ readonly lineHeight: 16.5;
472
+ readonly letterSpacing: -0.11;
473
+ };
474
+ readonly 'caption3-bold': {
475
+ readonly fontFamily: "Inter";
476
+ readonly fontSize: 10;
477
+ readonly fontWeight: 600;
478
+ readonly fontStyle: "normal";
479
+ readonly lineHeight: 15;
480
+ readonly letterSpacing: -0.1;
481
+ };
482
+ readonly 'caption3-regular': {
483
+ readonly fontFamily: "Inter";
484
+ readonly fontSize: 10;
485
+ readonly fontWeight: 400;
486
+ readonly fontStyle: "normal";
487
+ readonly lineHeight: 14;
488
+ readonly letterSpacing: -0.1;
489
+ };
490
+ };
491
+ //# sourceMappingURL=typography.data.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"typography.data.d.ts","sourceRoot":"","sources":["../../src/typography/typography.data.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyepB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pisodev/ui-common",
3
- "version": "0.0.3",
3
+ "version": "0.0.6",
4
4
  "description": "웹과 React Native를 위한 공통 타입 및 테마",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",
@@ -10,9 +10,9 @@
10
10
  "dist"
11
11
  ],
12
12
  "scripts": {
13
- "build:extract-colors": "ts-node src/theme/extract-colors.ts",
14
- "build:colors": "ts-node src/theme/build-colors.ts",
15
- "build": "npm run build:extract-colors && npm run build:colors && rollup -c rollup.config.js"
13
+ "build:typography": "ts-node src/typography/extract-typography.ts",
14
+ "build:colors": "ts-node src/theme/extract-colors.ts && ts-node src/theme/build-colors.ts",
15
+ "build": "npm run build:typography && npm run build:colors && rollup -c rollup.config.mjs"
16
16
  },
17
17
  "keywords": [
18
18
  "react",
@@ -20,8 +20,17 @@
20
20
  "theme",
21
21
  "typescript"
22
22
  ],
23
- "author": "",
23
+ "author": "Piso",
24
24
  "license": "MIT",
25
+ "repository": {
26
+ "type": "git",
27
+ "url": "https://github.com/PisoDev77/ui-library.git",
28
+ "directory": "packages/common"
29
+ },
30
+ "bugs": {
31
+ "url": "https://github.com/PisoDev77/ui-library/issues"
32
+ },
33
+ "homepage": "https://github.com/PisoDev77/ui-library/tree/master/packages/common#readme",
25
34
  "publishConfig": {
26
35
  "access": "public"
27
36
  },
@@ -33,6 +42,7 @@
33
42
  "rollup": "^4.54.0",
34
43
  "ts-node": "^10.9.2",
35
44
  "tslib": "^2.8.1",
45
+ "tsx": "^4.21.0",
36
46
  "typescript": "^5.9.3"
37
47
  }
38
48
  }