@channel.io/bezier-tokens 0.2.13 → 0.3.1

package/README.md

@@ -10,29 +10,54 @@ npm i -D @channel.io/bezier-tokens
 
 ## Usage
 
-### JavaScript
+### CSS
 
-You can access and use values by token group.
+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.
 
 ```ts
-import { tokens } from '@channel.io/bezier-tokens'
+import '@channel.io/bezier-tokens/css/styles.css'
+```
 
-console.log(tokens.global.color['blue-300']) // "#..."
-console.log(tokens.lightTheme.color['bg-black-dark']) // "#..."
+```html
+<div data-bezier-theme="light">
+  <div class="foo" />
+  <div data-bezier-theme="dark">
+    <div class="foo" />
+  </div>
+</div>
 ```
 
-### CSS
+```css
+.foo {
+  background-color: var(--bg-black-dark);
+}
+```
 
-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.
+### SCSS
 
-```ts
-import '@channel.io/bezier-tokens/css/styles.css'
+While CSS variables are recommended, you can also use SCSS variables directly if you need to.
+
+```scss
+@use "sass:map";
+@use "pkg:@channel.io/bezier-tokens" as *;
 
 div {
-  background: var(--bg-black-dark);
+  border-radius: map.get($tokens, "global", "radius", "4"); // ...px
+  background-color: map.get($tokens, "light-theme", "bg", "black", "dark"); // #...
 }
 ```
 
+### JavaScript
+
+You can access and use values by token group.
+
+```ts
+import { tokens } from '@channel.io/bezier-tokens'
+
+console.log(tokens.global.color['blue-300']) // "#..."
+console.log(tokens.lightTheme.color['bg-black-dark']) // "#..."
+```
+
 ## Contributing
 
 See [contribution guide](https://github.com/channel-io/bezier-react/wiki/Contribute).

package/dist/alpha/cjs/darkTheme.js

@@ -387,12 +387,12 @@ module.exports = Object.freeze({
     "alpha-color-bg-absolute-white-lightest-hovered": Object.freeze({"value":"#ededed4d"}),
     "alpha-color-bg-absolute-white-transparent": Object.freeze({"value":"#ffffff00","ref":"alpha-color-white-0"}),
     "alpha-color-bg-absolute-white-transparent-hovered": Object.freeze({"value":"#ffffff0d"}),
-    "alpha-color-surface-lowest": Object.freeze({"value":"#313234","ref":"alpha-color-grey-800"}),
-    "alpha-color-surface-lowest-hovered": Object.freeze({"value":"#3b3c3fff"}),
-    "alpha-color-surface-lower": Object.freeze({"value":"#2a2b2d","ref":"alpha-color-grey-850"}),
-    "alpha-color-surface-lower-hovered": Object.freeze({"value":"#343538ff"}),
-    "alpha-color-surface-normal": Object.freeze({"value":"#242428","ref":"alpha-color-grey-900"}),
-    "alpha-color-surface-normal-hovered": Object.freeze({"value":"#2e2e33ff"}),
+    "alpha-color-surface-lowest": Object.freeze({"value":"#2a2b2d","ref":"alpha-color-grey-850"}),
+    "alpha-color-surface-lowest-hovered": Object.freeze({"value":"#343538ff"}),
+    "alpha-color-surface-lower": Object.freeze({"value":"#242428","ref":"alpha-color-grey-900"}),
+    "alpha-color-surface-lower-hovered": Object.freeze({"value":"#2e2e33ff"}),
+    "alpha-color-surface-normal": Object.freeze({"value":"#1a1a1c","ref":"alpha-color-grey-950"}),
+    "alpha-color-surface-normal-hovered": Object.freeze({"value":"#242427ff"}),
     "alpha-color-shadow-xlarge": Object.freeze({"value":"#00000099","ref":"alpha-color-black-60"}),
     "alpha-color-shadow-xlarge-hovered": Object.freeze({"value":"#0a0a0a99"}),
     "alpha-color-shadow-large": Object.freeze({"value":"#00000066","ref":"alpha-color-black-40"}),

package/dist/alpha/cjs/global.js

@@ -189,6 +189,7 @@ module.exports = Object.freeze({
     "alpha-color-grey-800": Object.freeze({"value":"#313234"}),
     "alpha-color-grey-850": Object.freeze({"value":"#2a2b2d"}),
     "alpha-color-grey-900": Object.freeze({"value":"#242428"}),
+    "alpha-color-grey-950": Object.freeze({"value":"#1a1a1c"}),
     "alpha-color-grey-900-0": Object.freeze({"value":"#24242800"}),
     "alpha-color-grey-alpha-900-90": Object.freeze({"value":"#242428e6"}),
     "alpha-color-grey-alpha-850-80": Object.freeze({"value":"#2a2b2dcc"}),

package/dist/alpha/css/styles.css

@@ -382,12 +382,12 @@
   --alpha-color-bg-absolute-white-lightest-hovered: #ededed4d;
   --alpha-color-bg-absolute-white-transparent: var(--alpha-color-white-0);
   --alpha-color-bg-absolute-white-transparent-hovered: #ffffff0d;
-  --alpha-color-surface-lowest: var(--alpha-color-grey-800);
-  --alpha-color-surface-lowest-hovered: #3b3c3fff;
-  --alpha-color-surface-lower: var(--alpha-color-grey-850);
-  --alpha-color-surface-lower-hovered: #343538ff;
-  --alpha-color-surface-normal: var(--alpha-color-grey-900);
-  --alpha-color-surface-normal-hovered: #2e2e33ff;
+  --alpha-color-surface-lowest: var(--alpha-color-grey-850);
+  --alpha-color-surface-lowest-hovered: #343538ff;
+  --alpha-color-surface-lower: var(--alpha-color-grey-900);
+  --alpha-color-surface-lower-hovered: #2e2e33ff;
+  --alpha-color-surface-normal: var(--alpha-color-grey-950);
+  --alpha-color-surface-normal-hovered: #242427ff;
   --alpha-color-shadow-xlarge: var(--alpha-color-black-60);
   --alpha-color-shadow-xlarge-hovered: #0a0a0a99;
   --alpha-color-shadow-large: var(--alpha-color-black-40);
@@ -676,6 +676,7 @@
   --alpha-color-grey-800: #313234;
   --alpha-color-grey-850: #2a2b2d;
   --alpha-color-grey-900: #242428;
+  --alpha-color-grey-950: #1a1a1c;
   --alpha-color-grey-900-0: #24242800;
   --alpha-color-grey-alpha-900-90: #242428e6;
   --alpha-color-grey-alpha-850-80: #2a2b2dcc;

package/dist/alpha/esm/darkTheme.mjs

@@ -387,12 +387,12 @@ export default Object.freeze({
     "alpha-color-bg-absolute-white-lightest-hovered": Object.freeze({"value":"#ededed4d"}),
     "alpha-color-bg-absolute-white-transparent": Object.freeze({"value":"#ffffff00","ref":"alpha-color-white-0"}),
     "alpha-color-bg-absolute-white-transparent-hovered": Object.freeze({"value":"#ffffff0d"}),
-    "alpha-color-surface-lowest": Object.freeze({"value":"#313234","ref":"alpha-color-grey-800"}),
-    "alpha-color-surface-lowest-hovered": Object.freeze({"value":"#3b3c3fff"}),
-    "alpha-color-surface-lower": Object.freeze({"value":"#2a2b2d","ref":"alpha-color-grey-850"}),
-    "alpha-color-surface-lower-hovered": Object.freeze({"value":"#343538ff"}),
-    "alpha-color-surface-normal": Object.freeze({"value":"#242428","ref":"alpha-color-grey-900"}),
-    "alpha-color-surface-normal-hovered": Object.freeze({"value":"#2e2e33ff"}),
+    "alpha-color-surface-lowest": Object.freeze({"value":"#2a2b2d","ref":"alpha-color-grey-850"}),
+    "alpha-color-surface-lowest-hovered": Object.freeze({"value":"#343538ff"}),
+    "alpha-color-surface-lower": Object.freeze({"value":"#242428","ref":"alpha-color-grey-900"}),
+    "alpha-color-surface-lower-hovered": Object.freeze({"value":"#2e2e33ff"}),
+    "alpha-color-surface-normal": Object.freeze({"value":"#1a1a1c","ref":"alpha-color-grey-950"}),
+    "alpha-color-surface-normal-hovered": Object.freeze({"value":"#242427ff"}),
     "alpha-color-shadow-xlarge": Object.freeze({"value":"#00000099","ref":"alpha-color-black-60"}),
     "alpha-color-shadow-xlarge-hovered": Object.freeze({"value":"#0a0a0a99"}),
     "alpha-color-shadow-large": Object.freeze({"value":"#00000066","ref":"alpha-color-black-40"}),

package/dist/alpha/esm/global.mjs

@@ -189,6 +189,7 @@ export default Object.freeze({
     "alpha-color-grey-800": Object.freeze({"value":"#313234"}),
     "alpha-color-grey-850": Object.freeze({"value":"#2a2b2d"}),
     "alpha-color-grey-900": Object.freeze({"value":"#242428"}),
+    "alpha-color-grey-950": Object.freeze({"value":"#1a1a1c"}),
     "alpha-color-grey-900-0": Object.freeze({"value":"#24242800"}),
     "alpha-color-grey-alpha-900-90": Object.freeze({"value":"#242428e6"}),
     "alpha-color-grey-alpha-850-80": Object.freeze({"value":"#2a2b2dcc"}),