@channel.io/bezier-tokens 0.2.12 → 0.3.0

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.
Files changed (18) hide show
  1. package/README.md +35 -10
  2. package/dist/alpha/cjs/global.js +16 -55
  3. package/dist/alpha/css/styles.css +14 -53
  4. package/dist/alpha/esm/global.mjs +16 -55
  5. package/dist/alpha/scss/dark-theme.scss +628 -0
  6. package/dist/alpha/scss/global.scss +920 -0
  7. package/dist/alpha/scss/index.scss +9 -0
  8. package/dist/alpha/scss/light-theme.scss +628 -0
  9. package/dist/scss/dark-theme.scss +294 -0
  10. package/dist/scss/global.scss +530 -0
  11. package/dist/scss/index.scss +9 -0
  12. package/dist/scss/light-theme.scss +294 -0
  13. package/dist/types/alpha/cjs/global.d.ts +44 -174
  14. package/dist/types/alpha/cjs/index.d.ts +44 -174
  15. package/dist/types/alpha/esm/global.d.mts +44 -174
  16. package/dist/types/alpha/esm/index.d.mts +44 -174
  17. package/dist/types/alpha/esm/index.d.mts.map +1 -1
  18. package/package.json +12 -7
package/README.md CHANGED
@@ -10,29 +10,54 @@ npm i -D @channel.io/bezier-tokens
10
10
 
11
11
  ## Usage
12
12
 
13
- ### JavaScript
13
+ ### CSS
14
14
 
15
- You can access and use values by token group.
15
+ 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.
16
16
 
17
17
  ```ts
18
- import { tokens } from '@channel.io/bezier-tokens'
18
+ import '@channel.io/bezier-tokens/css/styles.css'
19
+ ```
19
20
 
20
- console.log(tokens.global.color['blue-300']) // "#..."
21
- console.log(tokens.lightTheme.color['bg-black-dark']) // "#..."
21
+ ```html
22
+ <div data-bezier-theme="light">
23
+ <div class="foo" />
24
+ <div data-bezier-theme="dark">
25
+ <div class="foo" />
26
+ </div>
27
+ </div>
22
28
  ```
23
29
 
24
- ### CSS
30
+ ```css
31
+ .foo {
32
+ background-color: var(--bg-black-dark);
33
+ }
34
+ ```
25
35
 
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.
36
+ ### SCSS
27
37
 
28
- ```ts
29
- import '@channel.io/bezier-tokens/css/styles.css'
38
+ While CSS variables are recommended, you can also use SCSS variables directly if you need to.
39
+
40
+ ```scss
41
+ @use "sass:map";
42
+ @use "pkg:@channel.io/bezier-tokens" as *;
30
43
 
31
44
  div {
32
- background: var(--bg-black-dark);
45
+ border-radius: map.get($tokens, "global", "radius", "4"); // ...px
46
+ background-color: map.get($tokens, "light-theme", "bg", "black", "dark"); // #...
33
47
  }
34
48
  ```
35
49
 
50
+ ### JavaScript
51
+
52
+ You can access and use values by token group.
53
+
54
+ ```ts
55
+ import { tokens } from '@channel.io/bezier-tokens'
56
+
57
+ console.log(tokens.global.color['blue-300']) // "#..."
58
+ console.log(tokens.lightTheme.color['bg-black-dark']) // "#..."
59
+ ```
60
+
36
61
  ## Contributing
37
62
 
38
63
  See [contribution guide](https://github.com/channel-io/bezier-react/wiki/Contribute).
package/dist/alpha/cjs/global.js CHANGED
@@ -244,61 +244,6 @@ module.exports = Object.freeze({
244
244
  "alpha-color-shade-navy-400-20": Object.freeze({"value":"#5f69b033"}),
245
245
  "alpha-color-shade-navy-600-40": Object.freeze({"value":"#373b5666"}),
246
246
  }),
247
- "dimension": Object.freeze({
248
- "alpha-dimension-1": Object.freeze({"value":"1px"}),
249
- "alpha-dimension-2": Object.freeze({"value":"2px"}),
250
- "alpha-dimension-3": Object.freeze({"value":"3px"}),
251
- "alpha-dimension-4": Object.freeze({"value":"4px"}),
252
- "alpha-dimension-6": Object.freeze({"value":"6px"}),
253
- "alpha-dimension-7": Object.freeze({"value":"7px"}),
254
- "alpha-dimension-8": Object.freeze({"value":"8px"}),
255
- "alpha-dimension-10": Object.freeze({"value":"10px"}),
256
- "alpha-dimension-12": Object.freeze({"value":"12px"}),
257
- "alpha-dimension-14": Object.freeze({"value":"14px"}),
258
- "alpha-dimension-16": Object.freeze({"value":"16px"}),
259
- "alpha-dimension-20": Object.freeze({"value":"20px"}),
260
- "alpha-dimension-22": Object.freeze({"value":"22px"}),
261
- "alpha-dimension-24": Object.freeze({"value":"24px"}),
262
- "alpha-dimension-28": Object.freeze({"value":"28px"}),
263
- "alpha-dimension-30": Object.freeze({"value":"30px"}),
264
- "alpha-dimension-32": Object.freeze({"value":"32px"}),
265
- "alpha-dimension-36": Object.freeze({"value":"36px"}),
266
- "alpha-dimension-40": Object.freeze({"value":"40px"}),
267
- "alpha-dimension-42": Object.freeze({"value":"42px"}),
268
- "alpha-dimension-44": Object.freeze({"value":"44px"}),
269
- "alpha-dimension-48": Object.freeze({"value":"48px"}),
270
- "alpha-dimension-54": Object.freeze({"value":"54px"}),
271
- "alpha-dimension-60": Object.freeze({"value":"60px"}),
272
- "alpha-dimension-72": Object.freeze({"value":"72px"}),
273
- "alpha-dimension-90": Object.freeze({"value":"90px"}),
274
- "alpha-dimension-120": Object.freeze({"value":"120px"}),
275
- "alpha-dimension-160": Object.freeze({"value":"160px"}),
276
- "alpha-dimension-200": Object.freeze({"value":"200px"}),
277
- "alpha-dimension-240": Object.freeze({"value":"240px"}),
278
- "alpha-dimension-320": Object.freeze({"value":"320px"}),
279
- "alpha-dimension-420": Object.freeze({"value":"420px"}),
280
- "alpha-dimension-540": Object.freeze({"value":"540px"}),
281
- "alpha-dimension-640": Object.freeze({"value":"640px"}),
282
- "alpha-dimension-720": Object.freeze({"value":"720px"}),
283
- "alpha-dimension-800": Object.freeze({"value":"800px"}),
284
- "alpha-dimension-900": Object.freeze({"value":"900px"}),
285
- "alpha-dimension-source-10": Object.freeze({"value":"10px","ref":"alpha-dimension-10"}),
286
- "alpha-dimension-source-12": Object.freeze({"value":"12px","ref":"alpha-dimension-12"}),
287
- "alpha-dimension-source-16": Object.freeze({"value":"16px","ref":"alpha-dimension-16"}),
288
- "alpha-dimension-source-20": Object.freeze({"value":"20px","ref":"alpha-dimension-20"}),
289
- "alpha-dimension-source-24": Object.freeze({"value":"24px","ref":"alpha-dimension-24"}),
290
- "alpha-dimension-source-30": Object.freeze({"value":"30px","ref":"alpha-dimension-30"}),
291
- "alpha-dimension-source-36": Object.freeze({"value":"36px","ref":"alpha-dimension-36"}),
292
- "alpha-dimension-source-42": Object.freeze({"value":"42px","ref":"alpha-dimension-42"}),
293
- "alpha-dimension-source-48": Object.freeze({"value":"48px","ref":"alpha-dimension-48"}),
294
- "alpha-dimension-source-60": Object.freeze({"value":"60px","ref":"alpha-dimension-60"}),
295
- "alpha-dimension-source-72": Object.freeze({"value":"72px","ref":"alpha-dimension-72"}),
296
- "alpha-dimension-source-90": Object.freeze({"value":"90px","ref":"alpha-dimension-90"}),
297
- "alpha-dimension-source-120": Object.freeze({"value":"120px","ref":"alpha-dimension-120"}),
298
- "alpha-dimension-42-p": Object.freeze({"value":"42%"}),
299
- "alpha-dimension-100-p": Object.freeze({"value":"100%"}),
300
- "alpha-dimension-m-1": Object.freeze({"value":"-1px"}),
301
- }),
302
247
  "font": Object.freeze({
303
248
  "alpha-font-family-sans": Object.freeze({"value":"'Pretendard', 'NotoSansJP', 'system-ui', 'sans-serif'"}),
304
249
  "alpha-font-family-mono": Object.freeze({"value":"'ui-monospace', 'Cascadia Code', 'Source Code Pro', 'Menlo', 'Consolas', 'DejaVu Sans Mono', 'monospace'"}),
@@ -342,6 +287,22 @@ module.exports = Object.freeze({
342
287
  "opacity": Object.freeze({
343
288
  "alpha-opacity-disabled": Object.freeze({"value":0.4}),
344
289
  }),
290
+ "radius": Object.freeze({
291
+ "alpha-radius-2": Object.freeze({"value":"2px"}),
292
+ "alpha-radius-3": Object.freeze({"value":"3px"}),
293
+ "alpha-radius-4": Object.freeze({"value":"4px"}),
294
+ "alpha-radius-6": Object.freeze({"value":"6px"}),
295
+ "alpha-radius-7": Object.freeze({"value":"7px"}),
296
+ "alpha-radius-8": Object.freeze({"value":"8px"}),
297
+ "alpha-radius-10": Object.freeze({"value":"10px"}),
298
+ "alpha-radius-12": Object.freeze({"value":"12px"}),
299
+ "alpha-radius-14": Object.freeze({"value":"14px"}),
300
+ "alpha-radius-16": Object.freeze({"value":"16px"}),
301
+ "alpha-radius-20": Object.freeze({"value":"20px"}),
302
+ "alpha-radius-32": Object.freeze({"value":"32px"}),
303
+ "alpha-radius-rounded-half": Object.freeze({"value":"9999px"}),
304
+ "alpha-radius-smooth-corner": Object.freeze({"value":"42%"}),
305
+ }),
345
306
  "typography": Object.freeze({
346
307
  "alpha-typography-message-font-weight": Object.freeze({"value":400,"ref":"alpha-font-weight-regular"}),
347
308
  "alpha-typography-message-font-size": Object.freeze({"value":"1.55rem","ref":"alpha-font-size-15-5"}),
package/dist/alpha/css/styles.css CHANGED
@@ -730,59 +730,6 @@
730
730
  --alpha-color-shade-navy-600: #373b56;
731
731
  --alpha-color-shade-navy-400-20: #5f69b033;
732
732
  --alpha-color-shade-navy-600-40: #373b5666;
733
- --alpha-dimension-1: 1px;
734
- --alpha-dimension-2: 2px;
735
- --alpha-dimension-3: 3px;
736
- --alpha-dimension-4: 4px;
737
- --alpha-dimension-6: 6px;
738
- --alpha-dimension-7: 7px;
739
- --alpha-dimension-8: 8px;
740
- --alpha-dimension-10: 10px;
741
- --alpha-dimension-12: 12px;
742
- --alpha-dimension-14: 14px;
743
- --alpha-dimension-16: 16px;
744
- --alpha-dimension-20: 20px;
745
- --alpha-dimension-22: 22px;
746
- --alpha-dimension-24: 24px;
747
- --alpha-dimension-28: 28px;
748
- --alpha-dimension-30: 30px;
749
- --alpha-dimension-32: 32px;
750
- --alpha-dimension-36: 36px;
751
- --alpha-dimension-40: 40px;
752
- --alpha-dimension-42: 42px;
753
- --alpha-dimension-44: 44px;
754
- --alpha-dimension-48: 48px;
755
- --alpha-dimension-54: 54px;
756
- --alpha-dimension-60: 60px;
757
- --alpha-dimension-72: 72px;
758
- --alpha-dimension-90: 90px;
759
- --alpha-dimension-120: 120px;
760
- --alpha-dimension-160: 160px;
761
- --alpha-dimension-200: 200px;
762
- --alpha-dimension-240: 240px;
763
- --alpha-dimension-320: 320px;
764
- --alpha-dimension-420: 420px;
765
- --alpha-dimension-540: 540px;
766
- --alpha-dimension-640: 640px;
767
- --alpha-dimension-720: 720px;
768
- --alpha-dimension-800: 800px;
769
- --alpha-dimension-900: 900px;
770
- --alpha-dimension-source-10: var(--alpha-dimension-10);
771
- --alpha-dimension-source-12: var(--alpha-dimension-12);
772
- --alpha-dimension-source-16: var(--alpha-dimension-16);
773
- --alpha-dimension-source-20: var(--alpha-dimension-20);
774
- --alpha-dimension-source-24: var(--alpha-dimension-24);
775
- --alpha-dimension-source-30: var(--alpha-dimension-30);
776
- --alpha-dimension-source-36: var(--alpha-dimension-36);
777
- --alpha-dimension-source-42: var(--alpha-dimension-42);
778
- --alpha-dimension-source-48: var(--alpha-dimension-48);
779
- --alpha-dimension-source-60: var(--alpha-dimension-60);
780
- --alpha-dimension-source-72: var(--alpha-dimension-72);
781
- --alpha-dimension-source-90: var(--alpha-dimension-90);
782
- --alpha-dimension-source-120: var(--alpha-dimension-120);
783
- --alpha-dimension-42-p: 42%;
784
- --alpha-dimension-100-p: 100%;
785
- --alpha-dimension-m-1: -1px;
786
733
  --alpha-font-family-sans: 'Pretendard', 'NotoSansJP', 'system-ui', 'sans-serif';
787
734
  --alpha-font-family-mono: 'ui-monospace', 'Cascadia Code', 'Source Code Pro', 'Menlo', 'Consolas', 'DejaVu Sans Mono', 'monospace';
788
735
  --alpha-font-size-11: 1.1rem;
@@ -820,6 +767,20 @@
820
767
  --alpha-gradient-bg-blue: linear-gradient(90deg, var(--alpha-color-blue-300) 50%, var(--alpha-color-green-200) 100%);
821
768
  --alpha-gradient-fg-green: linear-gradient(90deg, var(--alpha-color-green-400) 0%, var(--alpha-color-green-300) 100%);
822
769
  --alpha-opacity-disabled: 0.4;
770
+ --alpha-radius-2: 2px;
771
+ --alpha-radius-3: 3px;
772
+ --alpha-radius-4: 4px;
773
+ --alpha-radius-6: 6px;
774
+ --alpha-radius-7: 7px;
775
+ --alpha-radius-8: 8px;
776
+ --alpha-radius-10: 10px;
777
+ --alpha-radius-12: 12px;
778
+ --alpha-radius-14: 14px;
779
+ --alpha-radius-16: 16px;
780
+ --alpha-radius-20: 20px;
781
+ --alpha-radius-32: 32px;
782
+ --alpha-radius-rounded-half: 9999px;
783
+ --alpha-radius-smooth-corner: 42%;
823
784
  --alpha-typography-message-font-weight: var(--alpha-font-weight-regular);
824
785
  --alpha-typography-message-font-size: var(--alpha-font-size-15-5);
825
786
  --alpha-typography-message-line-height: var(--alpha-font-line-height-23);
package/dist/alpha/esm/global.mjs CHANGED
@@ -244,61 +244,6 @@ export default Object.freeze({
244
244
  "alpha-color-shade-navy-400-20": Object.freeze({"value":"#5f69b033"}),
245
245
  "alpha-color-shade-navy-600-40": Object.freeze({"value":"#373b5666"}),
246
246
  }),
247
- "dimension": Object.freeze({
248
- "alpha-dimension-1": Object.freeze({"value":"1px"}),
249
- "alpha-dimension-2": Object.freeze({"value":"2px"}),
250
- "alpha-dimension-3": Object.freeze({"value":"3px"}),
251
- "alpha-dimension-4": Object.freeze({"value":"4px"}),
252
- "alpha-dimension-6": Object.freeze({"value":"6px"}),
253
- "alpha-dimension-7": Object.freeze({"value":"7px"}),
254
- "alpha-dimension-8": Object.freeze({"value":"8px"}),
255
- "alpha-dimension-10": Object.freeze({"value":"10px"}),
256
- "alpha-dimension-12": Object.freeze({"value":"12px"}),
257
- "alpha-dimension-14": Object.freeze({"value":"14px"}),
258
- "alpha-dimension-16": Object.freeze({"value":"16px"}),
259
- "alpha-dimension-20": Object.freeze({"value":"20px"}),
260
- "alpha-dimension-22": Object.freeze({"value":"22px"}),
261
- "alpha-dimension-24": Object.freeze({"value":"24px"}),
262
- "alpha-dimension-28": Object.freeze({"value":"28px"}),
263
- "alpha-dimension-30": Object.freeze({"value":"30px"}),
264
- "alpha-dimension-32": Object.freeze({"value":"32px"}),
265
- "alpha-dimension-36": Object.freeze({"value":"36px"}),
266
- "alpha-dimension-40": Object.freeze({"value":"40px"}),
267
- "alpha-dimension-42": Object.freeze({"value":"42px"}),
268
- "alpha-dimension-44": Object.freeze({"value":"44px"}),
269
- "alpha-dimension-48": Object.freeze({"value":"48px"}),
270
- "alpha-dimension-54": Object.freeze({"value":"54px"}),
271
- "alpha-dimension-60": Object.freeze({"value":"60px"}),
272
- "alpha-dimension-72": Object.freeze({"value":"72px"}),
273
- "alpha-dimension-90": Object.freeze({"value":"90px"}),
274
- "alpha-dimension-120": Object.freeze({"value":"120px"}),
275
- "alpha-dimension-160": Object.freeze({"value":"160px"}),
276
- "alpha-dimension-200": Object.freeze({"value":"200px"}),
277
- "alpha-dimension-240": Object.freeze({"value":"240px"}),
278
- "alpha-dimension-320": Object.freeze({"value":"320px"}),
279
- "alpha-dimension-420": Object.freeze({"value":"420px"}),
280
- "alpha-dimension-540": Object.freeze({"value":"540px"}),
281
- "alpha-dimension-640": Object.freeze({"value":"640px"}),
282
- "alpha-dimension-720": Object.freeze({"value":"720px"}),
283
- "alpha-dimension-800": Object.freeze({"value":"800px"}),
284
- "alpha-dimension-900": Object.freeze({"value":"900px"}),
285
- "alpha-dimension-source-10": Object.freeze({"value":"10px","ref":"alpha-dimension-10"}),
286
- "alpha-dimension-source-12": Object.freeze({"value":"12px","ref":"alpha-dimension-12"}),
287
- "alpha-dimension-source-16": Object.freeze({"value":"16px","ref":"alpha-dimension-16"}),
288
- "alpha-dimension-source-20": Object.freeze({"value":"20px","ref":"alpha-dimension-20"}),
289
- "alpha-dimension-source-24": Object.freeze({"value":"24px","ref":"alpha-dimension-24"}),
290
- "alpha-dimension-source-30": Object.freeze({"value":"30px","ref":"alpha-dimension-30"}),
291
- "alpha-dimension-source-36": Object.freeze({"value":"36px","ref":"alpha-dimension-36"}),
292
- "alpha-dimension-source-42": Object.freeze({"value":"42px","ref":"alpha-dimension-42"}),
293
- "alpha-dimension-source-48": Object.freeze({"value":"48px","ref":"alpha-dimension-48"}),
294
- "alpha-dimension-source-60": Object.freeze({"value":"60px","ref":"alpha-dimension-60"}),
295
- "alpha-dimension-source-72": Object.freeze({"value":"72px","ref":"alpha-dimension-72"}),
296
- "alpha-dimension-source-90": Object.freeze({"value":"90px","ref":"alpha-dimension-90"}),
297
- "alpha-dimension-source-120": Object.freeze({"value":"120px","ref":"alpha-dimension-120"}),
298
- "alpha-dimension-42-p": Object.freeze({"value":"42%"}),
299
- "alpha-dimension-100-p": Object.freeze({"value":"100%"}),
300
- "alpha-dimension-m-1": Object.freeze({"value":"-1px"}),
301
- }),
302
247
  "font": Object.freeze({
303
248
  "alpha-font-family-sans": Object.freeze({"value":"'Pretendard', 'NotoSansJP', 'system-ui', 'sans-serif'"}),
304
249
  "alpha-font-family-mono": Object.freeze({"value":"'ui-monospace', 'Cascadia Code', 'Source Code Pro', 'Menlo', 'Consolas', 'DejaVu Sans Mono', 'monospace'"}),
@@ -342,6 +287,22 @@ export default Object.freeze({
342
287
  "opacity": Object.freeze({
343
288
  "alpha-opacity-disabled": Object.freeze({"value":0.4}),
344
289
  }),
290
+ "radius": Object.freeze({
291
+ "alpha-radius-2": Object.freeze({"value":"2px"}),
292
+ "alpha-radius-3": Object.freeze({"value":"3px"}),
293
+ "alpha-radius-4": Object.freeze({"value":"4px"}),
294
+ "alpha-radius-6": Object.freeze({"value":"6px"}),
295
+ "alpha-radius-7": Object.freeze({"value":"7px"}),
296
+ "alpha-radius-8": Object.freeze({"value":"8px"}),
297
+ "alpha-radius-10": Object.freeze({"value":"10px"}),
298
+ "alpha-radius-12": Object.freeze({"value":"12px"}),
299
+ "alpha-radius-14": Object.freeze({"value":"14px"}),
300
+ "alpha-radius-16": Object.freeze({"value":"16px"}),
301
+ "alpha-radius-20": Object.freeze({"value":"20px"}),
302
+ "alpha-radius-32": Object.freeze({"value":"32px"}),
303
+ "alpha-radius-rounded-half": Object.freeze({"value":"9999px"}),
304
+ "alpha-radius-smooth-corner": Object.freeze({"value":"42%"}),
305
+ }),
345
306
  "typography": Object.freeze({
346
307
  "alpha-typography-message-font-weight": Object.freeze({"value":400,"ref":"alpha-font-weight-regular"}),
347
308
  "alpha-typography-message-font-size": Object.freeze({"value":"1.55rem","ref":"alpha-font-size-15-5"}),