@pisodev/ui-common 0.0.8 → 0.0.10
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 +30 -15
- package/dist/styles.scss +9 -0
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -22,31 +22,46 @@ npm install @pisodev/ui-common
|
|
|
22
22
|
|
|
23
23
|
### Colors
|
|
24
24
|
|
|
25
|
+
#### TypeScript (theme objects)
|
|
26
|
+
|
|
25
27
|
```typescript
|
|
26
28
|
import { lightColors, darkColors } from '@pisodev/ui-common';
|
|
27
29
|
|
|
28
|
-
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
//
|
|
33
|
-
//
|
|
34
|
-
//
|
|
35
|
-
//
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
30
|
+
const primaryColor = lightColors.colors.blue1['500'];
|
|
31
|
+
const grayScale = darkColors.colors.gray['200'];
|
|
32
|
+
|
|
33
|
+
// Available color groups:
|
|
34
|
+
// gray, grayAlpha, graySemantic, whiteAlpha
|
|
35
|
+
// blue1, blue1Alpha, blue2, blue2Alpha
|
|
36
|
+
// green, greenAlpha, purple, purpleAlpha
|
|
37
|
+
// yellow, yellowAlpha, red, redAlpha
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
#### SCSS (single entrypoint)
|
|
41
|
+
|
|
42
|
+
```scss
|
|
43
|
+
@use '@pisodev/ui-common/styles.scss' as ui;
|
|
44
|
+
|
|
45
|
+
.light-card {
|
|
46
|
+
background-color: ui.$gray-00-light;
|
|
47
|
+
border-color: ui.$gray-200-light;
|
|
48
|
+
color: ui.$gray-800-light;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.dark-card {
|
|
52
|
+
background-color: ui.$gray-900-dark;
|
|
53
|
+
color: ui.$gray-00-dark;
|
|
54
|
+
}
|
|
41
55
|
```
|
|
42
56
|
|
|
57
|
+
> `styles.scss` also injects `colors.css` (CSS variables) and `typography.css` (utility classes) once per compilation.
|
|
58
|
+
|
|
43
59
|
### Typography
|
|
44
60
|
|
|
45
61
|
```typescript
|
|
46
62
|
import { typographyPresets } from '@pisodev/ui-common';
|
|
47
63
|
|
|
48
|
-
|
|
49
|
-
const heading = typographyPresets.heading1;
|
|
64
|
+
const heading = typographyPresets['title2-bold'];
|
|
50
65
|
// {
|
|
51
66
|
// fontFamily: string;
|
|
52
67
|
// fontSize: number;
|
package/dist/styles.scss
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
// Unified SCSS entrypoint for @pisodev/ui-common
|
|
2
|
+
// Provides SCSS tokens and injects CSS variables/utility classes
|
|
3
|
+
|
|
4
|
+
@forward './theme/colors';
|
|
5
|
+
@forward './typography/typography';
|
|
6
|
+
|
|
7
|
+
// Ensure CSS variables + utility classes are registered once
|
|
8
|
+
@import './theme/colors.css';
|
|
9
|
+
@import './typography/typography.css';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pisodev/ui-common",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.10",
|
|
4
4
|
"description": "웹과 React Native를 위한 공통 타입 및 테마",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
},
|
|
15
15
|
"./theme/colors.css": "./dist/theme/colors.css",
|
|
16
16
|
"./theme/colors.scss": "./dist/theme/_colors.scss",
|
|
17
|
+
"./styles.scss": "./dist/styles.scss",
|
|
17
18
|
"./typography/typography.css": "./dist/typography/typography.css",
|
|
18
19
|
"./typography/typography.scss": "./dist/typography/_typography.scss"
|
|
19
20
|
},
|