@pisodev/ui-common 0.0.9 → 0.0.11
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 +11 -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,11 @@
|
|
|
1
|
+
// Unified SCSS entrypoint for @pisodev/ui-common
|
|
2
|
+
// Provides SCSS tokens and injects CSS variables/utility classes
|
|
3
|
+
|
|
4
|
+
@use 'sass:meta';
|
|
5
|
+
|
|
6
|
+
@forward './theme/colors';
|
|
7
|
+
@forward './typography/typography';
|
|
8
|
+
|
|
9
|
+
// Inline CSS files so consumers don't need extra @import
|
|
10
|
+
@include meta.load-css('./theme/colors.css');
|
|
11
|
+
@include meta.load-css('./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.11",
|
|
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
|
},
|