feat(bezier-tokens): create a CSS entry point and add composition tok…

…ens (channel-io#1769)

.changeset/large-pants-brush.md

@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-tokens": minor
+---
+
+Add composition tokens, such as box-shadow.

.changeset/little-bikes-obey.md

@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-tokens": minor
+---
+
+Now serving one combined styles.css file. This is a breaking change for anyone who was importing the individual CSS files. You will need to update your import to `@channel.io/bezier-tokens/css/styles.css`.

packages/bezier-react/src/components/Spinner/Spinner.module.scss

@@ -1,7 +1,4 @@
-@mixin size($size) {
-  width: $size;
-  height: $size;
-}
+@use "../../styles/mixins/dimension";
 
 @layer components {
   @keyframes spin {
@@ -27,7 +24,7 @@
     animation: spin 1s linear infinite;
 
     &.xl {
-      @include size(50px);
+      @include dimension.square(50px);
       border-width: 4px;
     }
 
@@ -37,11 +34,11 @@
     }
 
     &.l {
-      @include size(24px);
+      @include dimension.square(24px);
     }
 
     &.m {
-      @include size(20px);
+      @include dimension.square(20px);
     }
 
     &.s,
@@ -50,11 +47,11 @@
     }
 
     &.s {
-      @include size(16px);
+      @include dimension.square(16px);
     }
 
     &.xs {
-      @include size(12px);
+      @include dimension.square(12px);
     }
   }
 }

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

@@ -1,3 +1 @@
-@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";
+@use "../../node_modules/@channel.io/bezier-tokens/dist/css/styles.css";

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

@@ -1,6 +1,6 @@
 @use 'sass:meta';
 
-@layer reset, tokens, base, components, utils;
+@layer reset, tokens, base, components;
 
 @layer reset {
   @include meta.load-css("reset")
@@ -13,7 +13,3 @@
 @layer base {
   @include meta.load-css("base")
 }
-
-@layer utils {
-  @include meta.load-css("utils")
-}

packages/bezier-react/src/styles/mixins/_dimension.scss

@@ -0,0 +1,4 @@
+@mixin square($dimension) {
+  width: $dimension;
+  height: $dimension;
+}

packages/bezier-react/src/styles/mixins/_typography.scss

@@ -0,0 +1,67 @@
+// NOTE: WIP. Change to only accessible from the Text component?
+@mixin size-11 {
+  font-size: var(--typography-size-11-font-size);
+  line-height: var(--typography-size-11-line-height);
+}
+
+@mixin size-12 {
+  font-size: var(--typography-size-12-font-size);
+  line-height: var(--typography-size-12-line-height);
+}
+
+@mixin size-13 {
+  font-size: var(--typography-size-13-font-size);
+  line-height: var(--typography-size-13-line-height);
+}
+
+@mixin size-14 {
+  font-size: var(--typography-size-14-font-size);
+  line-height: var(--typography-size-14-line-height);
+}
+
+@mixin size-15 {
+  font-size: var(--typography-size-15-font-size);
+  line-height: var(--typography-size-15-line-height);
+  letter-spacing: var(--typography-size-15-letter-spacing);
+}
+
+@mixin size-16 {
+  font-size: var(--typography-size-16-font-size);
+  line-height: var(--typography-size-16-line-height);
+  letter-spacing: var(--typography-size-16-letter-spacing);
+}
+
+@mixin size-17 {
+  font-size: var(--typography-size-17-font-size);
+  line-height: var(--typography-size-17-line-height);
+  letter-spacing: var(--typography-size-17-letter-spacing);
+}
+
+@mixin size-18 {
+  font-size: var(--typography-size-18-font-size);
+  line-height: var(--typography-size-18-line-height);
+}
+
+@mixin size-22 {
+  font-size: var(--typography-size-22-font-size);
+  line-height: var(--typography-size-22-line-height);
+  letter-spacing: var(--typography-size-22-letter-spacing);
+}
+
+@mixin size-24 {
+  font-size: var(--typography-size-24-font-size);
+  line-height: var(--typography-size-24-line-height);
+  letter-spacing: var(--typography-size-24-letter-spacing);
+}
+
+@mixin size-30 {
+  font-size: var(--typography-size-30-font-size);
+  line-height: var(--typography-size-30-line-height);
+  letter-spacing: var(--typography-size-30-letter-spacing);
+}
+
+@mixin size-36 {
+  font-size: var(--typography-size-36-font-size);
+  line-height: var(--typography-size-36-line-height);
+  letter-spacing: var(--typography-size-36-letter-spacing);
+}

packages/bezier-tokens/README.md

@@ -26,9 +26,7 @@ console.log(tokens.lightTheme.color['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.
 
 ```ts
-import '@channel.io/bezier-tokens/css/global.css'
-import '@channel.io/bezier-tokens/css/light-theme.css'
-import '@channel.io/bezier-tokens/css/dark-theme.css'
+import '@channel.io/bezier-tokens/css/styles.css'
 
 div {
   background: var(--bg-black-dark);

packages/bezier-tokens/package.json

@@ -30,9 +30,11 @@
     "dist"
   ],
   "scripts": {
-    "build": "run-s clean:build build:tokens build:js-index build:types",
+    "build": "run-s clean:build build:tokens build:web build:types",
     "build:tokens": "ts-node-esm scripts/build-tokens.ts",
-    "build:js-index": "ts-node-esm scripts/build-js-index.ts",
+    "build:web": "run-p 'build:web:*'",
+    "build:web:index-js": "ts-node-esm scripts/build-js-index.ts",
+    "build:web:index-css": "ts-node-esm scripts/build-css-index.ts",
     "build:types": "tsc -p tsconfig.build.json",
     "lint": "TIMING=1 eslint --cache .",
     "typecheck": "tsc --noEmit",
@@ -50,6 +52,7 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "eslint-config-bezier": "workspace:*",
+    "minimatch": "^9.0.3",
     "style-dictionary": "^3.9.0",
     "tsconfig": "workspace:*"
   }

packages/bezier-tokens/scripts/build-css-index.ts

@@ -0,0 +1,35 @@
+import fs from 'fs'
+import path from 'path'
+
+const buildPath = 'dist/css'
+const destination = 'styles.css'
+
+function concatenateStylesheet() {
+  const files = fs.readdirSync(buildPath)
+  const outputData = files
+    .filter(file => file.endsWith('.css') && file !== destination)
+    .map(file => fs.readFileSync(path.join(buildPath, file), 'utf8'))
+    .join('\n')
+
+  fs.writeFileSync(path.join(buildPath, destination), outputData)
+  // eslint-disable-next-line no-console
+  console.log(`\n✔︎ Created ${buildPath}/${destination}`)
+}
+
+function cleanUp() {
+  const files = fs.readdirSync(buildPath)
+  files.forEach(file => {
+    if (file !== destination) {
+      fs.unlinkSync(path.join(buildPath, file))
+      // eslint-disable-next-line no-console
+      console.log(`  ✔︎ Removed ${buildPath}/${file}`)
+    }
+  })
+}
+
+function main() {
+  concatenateStylesheet()
+  cleanUp()
+}
+
+main()

packages/bezier-tokens/scripts/build-js-index.ts

@@ -11,7 +11,7 @@ const getFileExtensionByModuleSystem = (isCjs: boolean) =>
 
 function buildJsIndexFile({ buildPath, isCjs }: BuildJsIndexFileOptions) {
   const fileExtension = getFileExtensionByModuleSystem(isCjs)
-  const indexFile = `index${fileExtension}`
+  const destination = `index${fileExtension}`
   let exportStatements = ''
 
   if (!fs.existsSync(buildPath)) {
@@ -21,11 +21,9 @@ function buildJsIndexFile({ buildPath, isCjs }: BuildJsIndexFileOptions) {
   }
 
   const files = fs.readdirSync(buildPath)
-  // eslint-disable-next-line no-console
-  console.log(`Reading files in ${buildPath}:`, files)
 
   files.forEach((file) => {
-    if (file.endsWith(fileExtension) && file !== indexFile) {
+    if (file.endsWith(fileExtension) && file !== destination) {
       const moduleName = file.replace(fileExtension, '')
       if (!isCjs) {
         exportStatements += `import ${moduleName} from './${file}';\n`
@@ -40,7 +38,7 @@ function buildJsIndexFile({ buildPath, isCjs }: BuildJsIndexFileOptions) {
   }
 
   files.forEach((file) => {
-    if (file.endsWith(fileExtension) && file !== indexFile) {
+    if (file.endsWith(fileExtension) && file !== destination) {
       const moduleName = file.replace(fileExtension, '')
       if (isCjs) {
         exportStatements += `  ${moduleName}: require('./${moduleName}'),\n`
@@ -52,9 +50,9 @@ function buildJsIndexFile({ buildPath, isCjs }: BuildJsIndexFileOptions) {
 
   exportStatements += '});\n'
 
-  fs.writeFileSync(path.join(buildPath, indexFile), exportStatements)
+  fs.writeFileSync(path.join(buildPath, destination), exportStatements)
   // eslint-disable-next-line no-console
-  console.log(`✅ Created ${indexFile} in ${buildPath}`)
+  console.log(`\n✔︎ Created ${buildPath}/${destination}`)
 }
 
 function main() {

packages/bezier-tokens/scripts/build-tokens.ts

@@ -1,5 +1,7 @@
+import { minimatch } from 'minimatch'
 import StyleDictionary, {
   type Config,
+  type Options,
   type Platform,
 } from 'style-dictionary'
 
@@ -8,63 +10,72 @@ import {
   customJsEsm,
 } from './lib/format'
 import {
+  customCubicBezier,
+  customFontFamily,
   customFontRem,
-  customRadiusPx,
 } from './lib/transform'
-import { toCamelCase } from './lib/utils'
 
-const TokenBuilder = StyleDictionary
+const TokenBuilder = StyleDictionary.registerTransform(customCubicBezier)
+  .registerTransform(customFontFamily)
   .registerTransform(customFontRem)
-  .registerTransform(customRadiusPx)
   .registerFormat(customJsCjs)
   .registerFormat(customJsEsm)
 
-function defineWebPlatform(options: Platform): Platform {
+function defineWebPlatform({ options, ...rest }: Platform): Platform {
   return {
     transforms: [
       'attribute/cti',
       'name/cti/kebab',
+      customCubicBezier.name,
+      customFontFamily.name,
       customFontRem.name,
-      customRadiusPx.name,
     ],
     basePxFontSize: 10,
-    ...options,
+    options: {
+      showFileHeader: false,
+      ...options,
+    },
+    ...rest,
   }
 }
 
 interface DefineConfigOptions {
   source: string[]
+  reference?: string[]
   destination: string
-  options?: {
+  options?: Options & {
     cssSelector: string
   }
 }
 
 function defineConfig({
   source,
+  reference = [],
   destination,
   options,
 }: DefineConfigOptions): Config {
   return {
-    source,
+    source: [...source, ...reference],
     platforms: {
       'web/cjs': defineWebPlatform({
         buildPath: 'dist/cjs/',
         files: [
           {
-            destination: `${toCamelCase(destination)}.js`,
+            destination: `${destination}.js`,
             format: customJsCjs.name,
-            filter: (token) => token.filePath.includes(destination),
+            filter: ({ filePath }) =>
+              source.some((src) => minimatch(filePath, src)),
           },
         ],
       }),
       'web/esm': defineWebPlatform({
         buildPath: 'dist/esm/',
         files: [
           {
-            destination: `${toCamelCase(destination)}.mjs`,
+            destination: `${destination}.mjs`,
             format: customJsEsm.name,
-            filter: (token) => token.filePath.includes(destination),
+            filter: ({ filePath }) =>
+              source.some((src) => minimatch(filePath, src)),
           },
         ],
       }),
@@ -74,7 +85,8 @@ function defineConfig({
           {
             destination: `${destination}.css`,
             format: 'css/variables',
-            filter: (token) => token.filePath.includes(destination),
+            filter: ({ filePath }) =>
+              source.some((src) => minimatch(filePath, src)),
             options: {
               selector: options?.cssSelector,
               outputReferences: true,
@@ -97,17 +109,19 @@ function main() {
     ),
     TokenBuilder.extend(
       defineConfig({
-        source: ['src/global/*.json', 'src/semantic/light-theme/*.json'],
-        destination: 'light-theme',
+        source: ['src/semantic/*.json', 'src/semantic/light-theme/*.json'],
+        reference: ['src/global/*.json'],
+        destination: 'lightTheme',
         options: {
           cssSelector: ':where(:root, :host), [data-bezier-theme="light"]',
         },
       }),
     ),
     TokenBuilder.extend(
       defineConfig({
-        source: ['src/global/*.json', 'src/semantic/dark-theme/*.json'],
-        destination: 'dark-theme',
+        source: ['src/semantic/*.json', 'src/semantic/dark-theme/*.json'],
+        reference: ['src/global/*.json'],
+        destination: 'darkTheme',
         options: { cssSelector: '[data-bezier-theme="dark"]' },
       }),
     ),