@biom3/design-tokens - npm Package Compare versions

Comparing version 0.0.5-alpha to 0.0.6-alpha

package.json

 {
   "name": "@biom3/design-tokens",
-  "version": "0.0.5-alpha",
+  "version": "0.0.6-alpha",
   "main": "./dist/index.js",
@@ -5,0 +5,0 @@ "types": "./dist/index.d.ts",

README.md

@@ -22,2 +22,18 @@ ![BIOM3-textured-logos-10](https://user-images.githubusercontent.com/1452237/205792502-2b1e7d79-6f0e-42dc-a455-dbcb5506cef1.png)
 
+To use these variables inside bespoke react typescript components:
+
+```typescript
+import { base, ui, pickTokenValue } from "@biom3/design-tokens";
+const DemoComponent = () => (
+  <div
+    style={{
+      fontSize: base.text.body.medium.regular.fontSize,
+      color: pickTokenValue(ui.text.body.color.primary, base),
+    }}
+  >
+    test component text
+  </div>
+);
+```
+
 ### Using the css variable design tokens:
@@ -28,8 +44,19 @@
 ```typescript
-import "@biom3/design-tokens/css/base.global.css"; // contains all BASE design tokens which dont involve colour
+import "@biom3/design-tokens/css/base-onLight.global.css"; // contains all "onLight" BASE design tokens
+// import "@biom3/design-tokens/css/base-onDark.global.css"; // contains all "onDark" BASE design tokens
 import "@biom3/design-tokens/css/ui.global.css"; // contains all UI design tokens
-import "@biom3/design-tokens/css/theme-light.global.css"; // contains all light theme base tokens
-// import "@biom3/design-tokens/css/theme-dark.global.css"; // contains all dark theme base tokens
 ```
 
-**\*@NOTE** All css variable declarations are scoped to the body selector and will overwrite each other, so you should only use 1 theme css file at a time. Choose the theme css file based on whether you are planning to display UI in "onDark" or "onLight" (or add your own!).
+**\*@NOTE** All css-variable declarations are global styles scoped to the body selector, thus the base design-token files will overwrite each other, so you should only use 1 base design-token css file at a time. Choose the theme css file based on whether you are planning to display UI in "onDark" or "onLight" (or add your own!).
+
+To use these css variables, the procedure is simple:
+
+```css
+@import "@biom3/design-tokens/css/base-onDark.global.css";
+@import "@biom3/design-tokens/css/ui.global.css";
+
+/* your bespoke item class styles */
+.headingText {
+  color: var(--ui-text-heading-color-primary);
+}
+```

src/dumpTokens.ts

 import * as tokens from "./tokens";
-import { DesignTokens, ProcessedUiTokens } from "./types";
+import { DesignTokens, ProcessedUiTokens, UiTokens } from "./types";
 
@@ -12,2 +12,3 @@ import {
   calculateSpacingAndBorderRadiusTokens,
+  recursivelyConvertUiToBaseTokenCssVariableReferences,
   recursivelyResolveTokens,
@@ -30,3 +31,3 @@ } from "./utils";
     "base",
-    "css/base.global.css"
+    "css/base-onLight.global.css"
   );
@@ -36,2 +37,14 @@
     {
+      spacingUnit: tokens.base.spacingUnit,
+      borderRadiusUnit: tokens.base.borderRadiusUnit,
+      font: tokens.base.font,
+      text: tokens.base.text,
+      breakpoint: tokens.base.breakpoint,
+    },
+    "base",
+    "css/base-onDark.global.css"
+  );
+
+  await recursivelyOutputTokens(
+    {
       color: onLightColors,
@@ -42,3 +55,3 @@ gradient: onLightGradients,
     "base",
-    "css/theme-light.global.css"
+    "css/base-onLight.global.css"
   );
@@ -53,16 +66,17 @@
     "base",
-    "css/theme-dark.global.css"
+    "css/base-onDark.global.css"
   );
 
-  const processedUiTokens = recursivelyResolveTokens(
-    {
+  const remappedCssVariableUiTokens =
+    recursivelyConvertUiToBaseTokenCssVariableReferences({
       text: tokens.ui.text,
       elevation: tokens.ui.elevation,
+    } as UiTokens);
+
+  const uiTokensWithCalculatedTokens = calculateSpacingAndBorderRadiusTokens(
+    {
+      ...remappedCssVariableUiTokens,
       spacing: {},
       borderRadius: {},
     } as ProcessedUiTokens,
-    tokens as DesignTokens
-  );
-  const uiTokensWithCalculatedTokens = calculateSpacingAndBorderRadiusTokens(
-    processedUiTokens,
     tokens.base
@@ -77,6 +91,5 @@ );
 
-  await wrapCssFileWithBodySelector("css/base.global.css");
-  await wrapCssFileWithBodySelector("css/theme-light.global.css");
-  await wrapCssFileWithBodySelector("css/theme-dark.global.css");
+  await wrapCssFileWithBodySelector("css/base-onLight.global.css");
+  await wrapCssFileWithBodySelector("css/base-onDark.global.css");
   await wrapCssFileWithBodySelector("css/ui.global.css");
 })();

src/utils.ts

@@ -61,1 +61,21 @@ import {
 }
+
+export function recursivelyConvertUiToBaseTokenCssVariableReferences<
+  T extends Leaf
+>(leaf: T) {
+  if (typeof leaf !== "string" && leaf != null) {
+    let leafKey: keyof typeof leaf;
+    for (leafKey in leaf) {
+      let child = leaf[leafKey];
+      if (typeof child === "object") {
+        leaf[leafKey] = recursivelyConvertUiToBaseTokenCssVariableReferences({
+          ...child,
+        });
+      } else if (typeof child === "string") {
+        leaf[leafKey] = `var(--${child.replaceAll(".", "-")})`;
+      }
+    }
+  }
+
+  return leaf;
+}

No alert changes

Improved metrics

Total package byte prevSize

76963

increased by6.27%

Lines of code

2208

increased by3.52%

Number of lines in readme file

61

increased by79.41%

Worsened metrics

Number of package files

18

decreased by-5.26%

No dependency changes