@channel.io/bezier-tokens - npm Package Compare versions

Comparing version 0.2.13 to 0.3.0

package.json

 {
   "name": "@channel.io/bezier-tokens",
-  "version": "0.2.13",
+  "version": "0.3.0",
   "description": "Design tokens for Bezier design system.",
@@ -22,3 +22,4 @@ "repository": {
         "default": "./dist/esm/index.mjs"
-      }
+      },
+      "sass": "./dist/scss/index.scss"
     },
@@ -33,6 +34,9 @@ "./alpha": {
         "default": "./dist/alpha/esm/index.mjs"
-      }
+      },
+      "sass": "./dist/alpha/scss/index.scss"
     },
     "./css/*": "./dist/css/*",
-    "./alpha/css/*": "./dist/alpha/css/*"
+    "./scss/*": "./dist/scss/*",
+    "./alpha/css/*": "./dist/alpha/css/*",
+    "./alpha/scss/*": "./dist/alpha/scss/*"
   },
@@ -47,3 +51,4 @@ "typesVersions": {
   "sideEffects": [
-    "**/*.css"
+    "**/*.css",
+    "**/*.scss"
   ],
@@ -72,5 +77,5 @@ "files": [
   "devDependencies": {
-    "@types/tinycolor2": "^1",
+    "@types/tinycolor2": "^1.4.6",
     "eslint-config-bezier": "workspace:*",
-    "minimatch": "^9.0.3",
+    "minimatch": "^10.0.1",
     "style-dictionary": "^3.9.2",
@@ -77,0 +82,0 @@ "tinycolor2": "^1.6.0",

README.md

@@ -13,25 +13,50 @@ # Bezier Tokens
 
-### 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
@@ -38,0 +63,0 @@

No alert changes

Improved metrics

Total package byte prevSize

1295922

increased by11.09%

Number of package files

60

increased by15.38%

Number of lines in readme file

68

increased by58.14%

No dependency changes