@channel.io/bezier-tokens 0.1.0-alpha.0 → 0.1.0-alpha.2
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 +3 -5
- package/dist/cjs/darkTheme.js +120 -108
- package/dist/cjs/global.js +240 -187
- package/dist/cjs/lightTheme.js +120 -108
- package/dist/css/styles.css +448 -0
- package/dist/esm/darkTheme.mjs +120 -108
- package/dist/esm/global.mjs +240 -187
- package/dist/esm/lightTheme.mjs +120 -108
- package/dist/types/cjs/darkTheme.d.ts +16 -2
- package/dist/types/cjs/global.d.ts +239 -181
- package/dist/types/cjs/index.d.ts +477 -385
- package/dist/types/cjs/lightTheme.d.ts +16 -2
- package/dist/types/esm/darkTheme.d.mts +121 -104
- package/dist/types/esm/global.d.mts +239 -181
- package/dist/types/esm/index.d.mts +477 -385
- package/dist/types/esm/index.d.mts.map +1 -1
- package/dist/types/esm/lightTheme.d.mts +121 -104
- package/package.json +6 -3
- package/dist/css/dark-theme.css +0 -109
- package/dist/css/global.css +0 -188
- package/dist/css/light-theme.css +0 -109
package/README.md
CHANGED
|
@@ -17,8 +17,8 @@ You can access and use values by token group.
|
|
|
17
17
|
```ts
|
|
18
18
|
import { tokens } from '@channel.io/bezier-tokens'
|
|
19
19
|
|
|
20
|
-
console.log(tokens.global['blue-300']) // "#..."
|
|
21
|
-
console.log(tokens.lightTheme['bg-black-dark']) // "#..."
|
|
20
|
+
console.log(tokens.global.color['blue-300']) // "#..."
|
|
21
|
+
console.log(tokens.lightTheme.color['bg-black-dark']) // "#..."
|
|
22
22
|
```
|
|
23
23
|
|
|
24
24
|
### CSS
|
|
@@ -26,9 +26,7 @@ console.log(tokens.lightTheme['bg-black-dark']) // "#..."
|
|
|
26
26
|
Provide all design tokens as CSS variables. If you want to apply dark theme tokens, add the `data-bezier-theme="dark"` attribute to the parent element. The default is light theme tokens, which can also be applied by adding the `data-bezier-theme="light"` attribute to the parent element.
|
|
27
27
|
|
|
28
28
|
```ts
|
|
29
|
-
import '@channel.io/bezier-tokens/css/
|
|
30
|
-
import '@channel.io/bezier-tokens/css/light-theme.css'
|
|
31
|
-
import '@channel.io/bezier-tokens/css/dark-theme.css'
|
|
29
|
+
import '@channel.io/bezier-tokens/css/styles.css'
|
|
32
30
|
|
|
33
31
|
div {
|
|
34
32
|
background: var(--bg-black-dark);
|
package/dist/cjs/darkTheme.js
CHANGED
|
@@ -1,109 +1,121 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Do not edit directly
|
|
3
|
-
* Generated on Wed, 22 Nov 2023 01:40:49 GMT
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
1
|
module.exports = {
|
|
7
|
-
"
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
"
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
"
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
2
|
+
"elevation": {
|
|
3
|
+
"ev-1": "inset 0 0 2px 0 #FFFFFF14, 0 0 2px 0 #00000014, 0 1px 2px 0 #00000026",
|
|
4
|
+
"ev-2": "inset 0 0 2px 0 #FFFFFF14, 0 0 2px 0 #00000014, 0 2px 6px 0 #00000026",
|
|
5
|
+
"ev-3": "inset 0 0 2px 0 #FFFFFF14, 0 0 2px 0 #00000014, 0 4px 12px 0 #00000033",
|
|
6
|
+
"ev-4": "inset 0 0 2px 0 #FFFFFF14, 0 0 2px 0 #00000014, 0 4px 20px 0 #00000066",
|
|
7
|
+
"ev-5": "inset 0 0 2px 0 #FFFFFF14, 0 0 2px 0 #00000014, 0 6px 40px 0 #00000099",
|
|
8
|
+
"ev-6": "inset 0 0 2px 0 #FFFFFF14, 0 0 2px 0 #00000014, 0 12px 60px 0 #00000099",
|
|
9
|
+
"ev-inner": "inset 0 0 2px 0 #FFFFFF14",
|
|
10
|
+
"ev-base": "0 0 2px 0 #00000014",
|
|
11
|
+
},
|
|
12
|
+
"input": {
|
|
13
|
+
"input-box-shadow": "0 1px 2px 0 #FFFFFF14, inset 0 0 0 1px #FFFFFF33",
|
|
14
|
+
"input-box-shadow-focused": "0 0 0 3px #6687FF66, inset 0 0 0 1px #6687FF",
|
|
15
|
+
"input-box-shadow-invalid": "0 0 0 3px #FFAB5C66, inset 0 0 0 1px #FFAB5C",
|
|
16
|
+
},
|
|
17
|
+
"color": {
|
|
18
|
+
"bg-white-high": "#464748",
|
|
19
|
+
"bg-white-normal": "#242428",
|
|
20
|
+
"bg-white-low": "#313234",
|
|
21
|
+
"bg-white-dim-dark": "#00000099",
|
|
22
|
+
"bg-white-dim-light": "#00000033",
|
|
23
|
+
"bg-gnb": "#464748CC",
|
|
24
|
+
"bg-navi": "#313234CC",
|
|
25
|
+
"bg-header": "#313234",
|
|
26
|
+
"bg-lounge": "#313234E6",
|
|
27
|
+
"bg-black-darkest": "#FFFFFF99",
|
|
28
|
+
"bg-black-darker": "#FFFFFF66",
|
|
29
|
+
"bg-black-dark": "#FFFFFF33",
|
|
30
|
+
"bg-black-light": "#FFFFFF1F",
|
|
31
|
+
"bg-black-lighter": "#FFFFFF14",
|
|
32
|
+
"bg-black-lightest": "#FFFFFF0D",
|
|
33
|
+
"bg-grey-darkest": "#FFFFFF",
|
|
34
|
+
"bg-grey-dark": "#A7A7AA",
|
|
35
|
+
"bg-grey-dim-lightest": "#2A2B2DCC",
|
|
36
|
+
"bg-grey-light": "#464748",
|
|
37
|
+
"bg-grey-lighter": "#313234",
|
|
38
|
+
"bg-grey-lightest": "#2A2B2D",
|
|
39
|
+
"bgtxt-blue-dark": "#5E56F0",
|
|
40
|
+
"bgtxt-blue-normal": "#6687FF",
|
|
41
|
+
"bgtxt-blue-light": "#6687FF66",
|
|
42
|
+
"bgtxt-blue-lighter": "#6687FF4D",
|
|
43
|
+
"bgtxt-blue-lightest": "#6687FF33",
|
|
44
|
+
"bgtxt-cobalt-dark": "#329BE7",
|
|
45
|
+
"bgtxt-cobalt-normal": "#47C8FF",
|
|
46
|
+
"bgtxt-cobalt-light": "#47C8FF66",
|
|
47
|
+
"bgtxt-cobalt-lighter": "#47C8FF4D",
|
|
48
|
+
"bgtxt-cobalt-lightest": "#47C8FF33",
|
|
49
|
+
"bgtxt-teal-dark": "#0FB3A3",
|
|
50
|
+
"bgtxt-teal-normal": "#3CDDCD",
|
|
51
|
+
"bgtxt-teal-light": "#3CDDCD66",
|
|
52
|
+
"bgtxt-teal-lighter": "#3CDDCD4D",
|
|
53
|
+
"bgtxt-teal-lightest": "#3CDDCD33",
|
|
54
|
+
"bgtxt-green-dark": "#31A552",
|
|
55
|
+
"bgtxt-green-normal": "#3ACF5A",
|
|
56
|
+
"bgtxt-green-light": "#3ACF5A66",
|
|
57
|
+
"bgtxt-green-lighter": "#3ACF5A4D",
|
|
58
|
+
"bgtxt-green-lightest": "#3ACF5A33",
|
|
59
|
+
"bgtxt-olive-dark": "#A0A540",
|
|
60
|
+
"bgtxt-olive-normal": "#CAD548",
|
|
61
|
+
"bgtxt-olive-light": "#CAD54866",
|
|
62
|
+
"bgtxt-olive-lighter": "#CAD5484D",
|
|
63
|
+
"bgtxt-olive-lightest": "#CAD54833",
|
|
64
|
+
"bgtxt-yellow-dark": "#EDBC40",
|
|
65
|
+
"bgtxt-yellow-normal": "#FDD353",
|
|
66
|
+
"bgtxt-yellow-light": "#FDD35366",
|
|
67
|
+
"bgtxt-yellow-lighter": "#FDD3534D",
|
|
68
|
+
"bgtxt-yellow-lightest": "#FDD35333",
|
|
69
|
+
"bgtxt-orange-dark": "#F4800B",
|
|
70
|
+
"bgtxt-orange-normal": "#FFAB5C",
|
|
71
|
+
"bgtxt-orange-light": "#FFAB5C66",
|
|
72
|
+
"bgtxt-orange-lighter": "#FFAB5C4D",
|
|
73
|
+
"bgtxt-orange-lightest": "#FFAB5C33",
|
|
74
|
+
"bgtxt-red-dark": "#E94E58",
|
|
75
|
+
"bgtxt-red-normal": "#FF5C5C",
|
|
76
|
+
"bgtxt-red-light": "#FF5C5C66",
|
|
77
|
+
"bgtxt-red-lighter": "#FF5C5C4D",
|
|
78
|
+
"bgtxt-red-lightest": "#FF5C5C33",
|
|
79
|
+
"bgtxt-pink-dark": "#CB48AD",
|
|
80
|
+
"bgtxt-pink-normal": "#EC6FD3",
|
|
81
|
+
"bgtxt-pink-light": "#EC6FD366",
|
|
82
|
+
"bgtxt-pink-lighter": "#EC6FD34D",
|
|
83
|
+
"bgtxt-pink-lightest": "#EC6FD333",
|
|
84
|
+
"bgtxt-purple-dark": "#915CE0",
|
|
85
|
+
"bgtxt-purple-normal": "#B570FF",
|
|
86
|
+
"bgtxt-purple-light": "#B570FF66",
|
|
87
|
+
"bgtxt-purple-lighter": "#B570FF4D",
|
|
88
|
+
"bgtxt-purple-lightest": "#B570FF33",
|
|
89
|
+
"bgtxt-navy-dark": "#3A4F8D",
|
|
90
|
+
"bgtxt-navy-normal": "#647CC9",
|
|
91
|
+
"bgtxt-navy-light": "#647CC966",
|
|
92
|
+
"bgtxt-navy-lighter": "#647CC94D",
|
|
93
|
+
"bgtxt-navy-lightest": "#647CC933",
|
|
94
|
+
"bgtxt-absolute-black-dark": "#000000",
|
|
95
|
+
"bgtxt-absolute-black-normal": "#000000D9",
|
|
96
|
+
"bgtxt-absolute-black-light": "#00000099",
|
|
97
|
+
"bgtxt-absolute-black-lighter": "#00000066",
|
|
98
|
+
"bgtxt-absolute-black-lightest": "#00000033",
|
|
99
|
+
"bgtxt-absolute-white-dark": "#FFFFFF",
|
|
100
|
+
"bgtxt-absolute-white-normal": "#FFFFFFE6",
|
|
101
|
+
"bgtxt-absolute-white-light": "#FFFFFF99",
|
|
102
|
+
"bgtxt-absolute-white-lighter": "#FFFFFF66",
|
|
103
|
+
"bgtxt-absolute-white-lightest": "#FFFFFF33",
|
|
104
|
+
"txt-black-pure": "#FFFFFF",
|
|
105
|
+
"txt-black-darkest": "#FFFFFFCC",
|
|
106
|
+
"txt-black-darker": "#FFFFFF99",
|
|
107
|
+
"txt-black-dark": "#FFFFFF66",
|
|
108
|
+
"txt-white-normal": "#242428",
|
|
109
|
+
"bdr-black-dark": "#FFFFFF33",
|
|
110
|
+
"bdr-black-light": "#FFFFFF1F",
|
|
111
|
+
"bdr-black-lightest": "#FFFFFF0D",
|
|
112
|
+
"bdr-grey-light": "#464748",
|
|
113
|
+
"bdr-white": "#464748",
|
|
114
|
+
"shdw-xlarge": "#00000099",
|
|
115
|
+
"shdw-large": "#00000066",
|
|
116
|
+
"shdw-medium": "#00000033",
|
|
117
|
+
"shdw-small": "#00000026",
|
|
118
|
+
"shdw-base": "#00000014",
|
|
119
|
+
"shdw-inner-base": "#FFFFFF14",
|
|
120
|
+
}
|
|
121
|
+
}
|