Apply bezier-tokens to bezier-react's style sheet

.changeset/silver-pets-hammer.md

@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": minor
+---
+
+Apply bezier-tokens to bezier-react's style sheet and fix some invalid css selector.

packages/bezier-react/package.json

@@ -70,6 +70,7 @@
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.22.15",
     "@channel.io/bezier-icons": "^0.15.0",
+    "@channel.io/bezier-tokens": "0.1.0-alpha.0",
     "@mdx-js/react": "^1.6.22",
     "@rollup/plugin-alias": "^5.0.0",
     "@rollup/plugin-babel": "^6.0.3",
@@ -116,7 +117,7 @@
     "sass": "^1.63.6",
     "storybook": "^7.4.2",
     "styled-components": "^5.3.11",
-    "the-new-css-reset": "^1.9.0",
+    "the-new-css-reset": "^1.11.2",
     "ts-prune": "^0.10.3",
     "tsconfig": "workspace:*",
     "tsconfig-paths-webpack-plugin": "^4.1.0",

packages/bezier-react/src/styles/_base.scss

@@ -1,18 +1,17 @@
-$system-fonts: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Roboto', system-ui, sans-serif;
-
 html {
-  font-family: 'Inter', 'NotoSansKR', 'NotoSansJP', $system-fonts;
+  font-size: 62.5%; // 10/16 = 0.625. Make REM calculations easier.
+  font-family: var(--font-family-sans-kr);
+}
 
-  :lang(ja) {
-    font-family: 'Inter', 'NotoSansJP', 'NotoSansKR', $system-fonts;
-  }
+:lang(ja) {
+  font-family: var(--font-family-sans-jp);
 }
 
 code {
-  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-family: var(--font-family-mono);
 }
 
 ::placeholder {
-  color: var(--fg-black-dark);
+  color: var(--txt-black-dark);
   opacity: 1;
 }

packages/bezier-react/src/styles/_reset.scss

@@ -1,4 +1,3 @@
-// NOTE: Specify it as a relative path inside the monorepo so that both storybook and rollup can reference it without any setup.
 @use "../../node_modules/the-new-css-reset/css/reset.css";
 
 * {

packages/bezier-react/src/styles/_tokens.scss

@@ -0,0 +1,3 @@
+@use "../../node_modules/@channel.io/bezier-tokens/dist/css/global.css";
+@use "../../node_modules/@channel.io/bezier-tokens/dist/css/light-theme.css";
+@use "../../node_modules/@channel.io/bezier-tokens/dist/css/dark-theme.css";

packages/bezier-react/src/styles/index.scss

@@ -1,16 +1,19 @@
 @use 'sass:meta';
 
-// TODO: components, utilities layers
-@layer reset, base, tokens, components, utilities;
+@layer reset, tokens, base, components, utils;
 
 @layer reset {
   @include meta.load-css("reset")
 }
 
+@layer tokens {
+  @include meta.load-css("tokens")
+}
+
 @layer base {
   @include meta.load-css("base")
 }
 
-@layer tokens {
-  @include meta.load-css("tokens")
+@layer utils {
+  @include meta.load-css("utils")
 }