@biom3/design-tokens - npm Package Compare versions

Comparing version 0.2.0-beta to 0.2.1-beta

.eslintrc.js

 module.exports = {
   root: false,
   extends: ['custom'],
+  rules: {
+    '@typescript-eslint/no-unused-vars': 'off',
+  },
+  parserOptions: {
+    project: ['./tsconfig.json'],
+    tsconfigRootDir: __dirname,
+  },
+  ignorePatterns: ['tsup.config.ts'],
 };

dist/index.d.ts

@@ -0,1 +1,4 @@
+type BaseTokensLeaf = string | number | undefined | {
+    [key in any]: BaseTokensLeaf;
+};
 type Colors = {
@@ -78,2 +81,6 @@ brand: {
         };
+        destructive: {
+            bright: string;
+            dim: string;
+        };
     };
@@ -446,3 +453,3 @@ text: {
 
-declare const fontFaceStylesImport = "@import url(\"https://design-system.immutable.com/hosted-for-ds/css/im-fonts-v4.css\");";
+declare const fontFaceStylesImport = "@import url(\"https://biome.immutable.com/hosted-assets/css/im-fonts-v4.css\");";
 declare const base: BaseTokens;
@@ -458,2 +465,2 @@ declare const onDarkBase: BaseTokens;
 
-export { Animation, BaseTokens, BiomeTheme, BodySize, BodyWeight, BorderRadius, BorderRadiusTokenPaths, BorderTokenPaths, Borders, Breakpoints, CaptionSize, CaptionWeight, ColorModes, ColorTokenPaths, Colors, DesignTokens, Font, FontTokenPaths, GenerateDesignTokensPaths, Gradient, GradientTokenPaths, Gradients, HeadingSize, HeadingWeight, IconTokenPaths, Icons, IntRange, IsGradientTokenPath, LooseAutocomplete, ProcessedBaseTokens, ShadowTokenPaths, Shadows, ShortcircuitGradients, Spacing, SpacingTokenPaths, Text, TextTokenPaths, ZLevels, base, designTokens, fontFaceStylesImport, onDarkBase, base as onLightBase, pickTokenValue, smartPickTokenValue };
+export { Animation, BaseTokens, BaseTokensLeaf, BiomeTheme, BodySize, BodyWeight, BorderRadius, BorderRadiusTokenPaths, BorderTokenPaths, Borders, Breakpoints, CaptionSize, CaptionWeight, ColorModes, ColorTokenPaths, Colors, DesignTokens, Font, FontTokenPaths, GenerateDesignTokensPaths, Gradient, GradientTokenPaths, Gradients, HeadingSize, HeadingWeight, IconTokenPaths, Icons, IntRange, IsGradientTokenPath, LooseAutocomplete, ProcessedBaseTokens, ShadowTokenPaths, Shadows, ShortcircuitGradients, Spacing, SpacingTokenPaths, Text, TextTokenPaths, ZLevels, base, designTokens, fontFaceStylesImport, onDarkBase, base as onLightBase, pickTokenValue, smartPickTokenValue };

dist/index.js

@@ -116,13 +116,17 @@ "use strict";
       dim: "#F9ABB9"
+    },
+    destructive: {
+      bright: "#E01A3D",
+      dim: "#FF637F"
     }
   },
   text: {
-    primary: "#F3F3F3",
-    secondary: "#B6B6B6",
+    primary: "base.color.brand.1",
+    secondary: "base.color.brand.4",
     link: {
-      primary: "#F191FA",
-      secondary: "#F3F3F3"
+      primary: "base.color.accent.1",
+      secondary: "base.color.brand.1"
     },
     inverse: {
-      primary: "#131313",
+      primary: "base.color.brand.2",
       secondary: "#464646"
@@ -274,14 +278,18 @@ }
       dim: "#FFB1BF"
+    },
+    destructive: {
+      bright: "#E01A3D",
+      dim: "#FF637F"
     }
   },
   text: {
-    primary: "#131313",
+    primary: "base.color.brand.1",
     secondary: "#5C5C5C",
     link: {
-      primary: "#B026BD",
-      secondary: "#131313"
+      primary: "base.color.accent.1",
+      secondary: "base.color.brand.1"
     },
     inverse: {
-      primary: "#FFFFFF",
-      secondary: "#E0E0E0"
+      primary: "base.color.brand.2",
+      secondary: "base.color.brand.3"
     }
@@ -353,3 +361,3 @@ }
 // src/tokens/base.ts
-var fontFaceStylesImport = `@import url("https://design-system.immutable.com/hosted-for-ds/css/im-fonts-v4.css");`;
+var fontFaceStylesImport = `@import url("https://biome.immutable.com/hosted-assets/css/im-fonts-v4.css");`;
 var border = {
@@ -709,3 +717,3 @@ size: {
   if (typeof pickedToken === "string" && pickedToken.match(/^base./)) {
-    pickedToken = pickTokenValue(themeProps, pickedToken);
+    pickedToken = smartPickTokenValue(themeProps, pickedToken);
   }
@@ -712,0 +720,0 @@ return pickedToken;

package.json

 {
   "name": "@biom3/design-tokens",
-  "version": "0.2.0-beta",
+  "version": "0.2.1-beta",
   "main": "./dist/index.js",
@@ -29,11 +29,11 @@ "types": "./dist/index.d.ts",
     "can-npm-publish": "^1.3.6",
-    "eslint": "^8.33.0",
+    "eslint": "^8.43.0",
     "eslint-config-custom": "*",
     "nodemon": "^2.0.20",
-    "prepend-file": "^2.0.1",
     "ts-node": "^10.9.1",
     "tsconfig": "*",
     "tsup": "^6.5.0",
+    "prepend-file": "^2.0.1",
     "typescript": "^4.9.5"
   }
 }

readme.md

@@ -29,3 +29,7 @@ ![BIOM3-textured-logos-10](https://user-images.githubusercontent.com/1452237/205792502-2b1e7d79-6f0e-42dc-a455-dbcb5506cef1.png)
 ```typescript
-import { onDarkBase, onLightBase, pickTokenValue } from '@biom3/design-tokens';
+import {
+  onDarkBase,
+  onLightBase,
+  smartPickTokenValue,
+} from '@biom3/design-tokens';
 const DemoComponent = () => (
@@ -35,3 +39,3 @@ <div
       fontSize: onLightBase.text.body.medium.regular.fontSize,
-      color: pickTokenValue(onDarkBase, 'base.color.brand.1'),
+      color: smartPickTokenValue(onDarkBase, 'base.color.brand.1'),
     }}
@@ -38,0 +42,0 @@ >

src/index.ts

 import { base, fontFaceStylesImport, onDarkBase } from './tokens/base';
+
 export * from './types';
 export { pickTokenValue, smartPickTokenValue } from './utils/processTokenUtils';
 export { base, fontFaceStylesImport, onDarkBase, base as onLightBase };
-
 export const designTokens = {
   base,
 };

src/tokens/base.ts

@@ -20,3 +20,3 @@ import {
 
-export const fontFaceStylesImport = `@import url("https://design-system.immutable.com/hosted-for-ds/css/im-fonts-v4.css");`;
+export const fontFaceStylesImport = `@import url("https://biome.immutable.com/hosted-assets/css/im-fonts-v4.css");`;
 
@@ -23,0 +23,0 @@ const border: Borders = {

src/tokens/theme/onDark.ts

@@ -80,12 +80,16 @@ import { Colors, Gradients, Shadows } from '../../types';
     },
+    destructive: {
+      bright: '#E01A3D',
+      dim: '#FF637F',
+    },
   },
   text: {
-    primary: '#F3F3F3',
-    secondary: '#B6B6B6',
+    primary: 'base.color.brand.1',
+    secondary: 'base.color.brand.4',
     link: {
-      primary: '#F191FA',
-      secondary: '#F3F3F3',
+      primary: 'base.color.accent.1',
+      secondary: 'base.color.brand.1',
     },
     inverse: {
-      primary: '#131313',
+      primary: 'base.color.brand.2',
       secondary: '#464646',
@@ -161,19 +165,1 @@ },
 } as const;
-
-// @TODO: BUILD THIS OUT
-const surface = {
-  100: {
-    default: {
-      background: 'base.color.neutral.1000',
-      shadow: 'base.shadow.100',
-    },
-    hover: {
-      background: 'base.color.neutral.1000',
-      shadow: 'base.shadow.100',
-    },
-    active: {
-      background: 'base.color.neutral.1000',
-      shadow: 'base.shadow.100',
-    },
-  },
-};

src/tokens/theme/onLight.ts

@@ -80,13 +80,18 @@ import { Colors, Gradients, Shadows } from '../../types';
     },
+    destructive: {
+      bright: '#E01A3D',
+      dim: '#FF637F',
+    },
   },
+
   text: {
-    primary: '#131313',
+    primary: 'base.color.brand.1',
     secondary: '#5C5C5C',
     link: {
-      primary: '#B026BD',
-      secondary: '#131313',
+      primary: 'base.color.accent.1',
+      secondary: 'base.color.brand.1',
     },
     inverse: {
-      primary: '#FFFFFF',
-      secondary: '#E0E0E0',
+      primary: 'base.color.brand.2',
+      secondary: 'base.color.brand.3',
     },
@@ -93,0 +98,0 @@ },

src/types.ts

@@ -0,1 +1,9 @@
+export type BaseTokensLeaf =
+  | string
+  | number
+  | undefined
+  | {
+      [key in any]: BaseTokensLeaf;
+    };
+
 // Base Types
@@ -79,2 +87,6 @@ export type Colors = {
     };
+    destructive: {
+      bright: string;
+      dim: string;
+    };
   };
@@ -81,0 +93,0 @@ text: {

src/utils/fileSystemUtils.ts

@@ -0,11 +1,8 @@
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable no-await-in-loop */
 import fs from 'fs/promises';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import prependFile from 'prepend-file';
 
-type BaseTokensLeaf =
-  | string
-  | number
-  | undefined
-  | {
-      [key in any]: BaseTokensLeaf;
-    };
+import { BaseTokensLeaf } from '../types';
 
@@ -20,8 +17,10 @@ export async function recursivelyOutputTokens<T extends BaseTokensLeaf>(
     for (leafKey in leaf) {
-      let child = leaf[leafKey];
-      const selectors = `${leafParents}-${String(leafKey)}`;
-      if (typeof child === 'object') {
-        await recursivelyOutputTokens({ ...child }, selectors, cssFileName);
-      } else if (typeof child === 'string' || typeof child === 'number') {
-        await fs.appendFile(cssFileName, `\n  --${selectors}: ${child};`);
+      if (Object.hasOwn(leaf, leafKey)) {
+        const child = leaf[leafKey];
+        const selectors = `${leafParents}-${String(leafKey)}`;
+        if (typeof child === 'object') {
+          await recursivelyOutputTokens({ ...child }, selectors, cssFileName);
+        } else if (typeof child === 'string' || typeof child === 'number') {
+          await fs.appendFile(cssFileName, `\n  --${selectors}: ${child};`);
+        }
       }
@@ -28,0 +27,0 @@ }

src/utils/processTokenUtils.ts

@@ -5,9 +5,2 @@ import get from 'lodash.get';
 
-export type Leaf =
-  | string
-  | undefined
-  | {
-      [key in any]: Leaf;
-    };
-
 export const pickTokenValue = <T extends unknown>(
@@ -21,8 +14,8 @@ themeProps: DesignTokens,
   selector: string,
-) {
+): T {
   let pickedToken = pickTokenValue<string | object>(themeProps, selector);
   if (typeof pickedToken === 'string' && pickedToken.match(/^base./)) {
-    pickedToken = pickTokenValue<string | object>(themeProps, pickedToken);
+    pickedToken = smartPickTokenValue<string | object>(themeProps, pickedToken);
   }
   return pickedToken as T;
 }

No alert changes

Improved metrics

Total package byte prevSize

121545

0.83%

Lines of code

3071

0.72%

Number of lines in readme file

74

5.71%

No dependency changes