@channel.io/bezier-tokens 0.2.13 → 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.
- package/README.md +35 -10
- package/dist/alpha/scss/dark-theme.scss +628 -0
- package/dist/alpha/scss/global.scss +920 -0
- package/dist/alpha/scss/index.scss +9 -0
- package/dist/alpha/scss/light-theme.scss +628 -0
- package/dist/scss/dark-theme.scss +294 -0
- package/dist/scss/global.scss +530 -0
- package/dist/scss/index.scss +9 -0
- package/dist/scss/light-theme.scss +294 -0
- 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
|
-
###
|
|
13
|
+
### CSS
|
|
14
14
|
|
|
15
|
-
|
|
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
|
|
18
|
+
import '@channel.io/bezier-tokens/css/styles.css'
|
|
19
|
+
```
|
|
19
20
|
|
|
20
|
-
|
|
21
|
-
|
|
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
|
-
|
|
30
|
+
```css
|
|
31
|
+
.foo {
|
|
32
|
+
background-color: var(--bg-black-dark);
|
|
33
|
+
}
|
|
34
|
+
```
|
|
25
35
|
|
|
26
|
-
|
|
36
|
+
### SCSS
|
|
27
37
|
|
|
28
|
-
|
|
29
|
-
|
|
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
|
-
|
|
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).
|