@biom3/design-tokens - npm Package Compare versions

Comparing version 0.2.2-beta to 0.2.3-beta

dist/index.d.ts

@@ -1,2 +0,2 @@
-type BaseTokensLeaf = string | number | undefined | {
+type BaseTokensLeaf = string | number | number[] | undefined | {
     [key in any]: BaseTokensLeaf;
@@ -348,13 +348,29 @@ };
 type Animation = {
-    gentle: {
-        cssDuration: string;
-        cssEase: string;
-        jsEase: string;
-        jsDuration: number;
+    normal: {
+        gentle: {
+            cssDuration: string;
+            cssEase: string;
+            jsEase: string | number[];
+            jsDuration: number;
+        };
+        fast: {
+            cssDuration: string;
+            cssEase: string;
+            jsEase: string | number[];
+            jsDuration: number;
+        };
     };
-    fast: {
-        cssDuration: string;
-        cssEase: string;
-        jsEase: string;
-        jsDuration: number;
+    bounce: {
+        gentle: {
+            cssDuration: string;
+            cssEase: string;
+            jsEase: string | number[];
+            jsDuration: number;
+        };
+        fast: {
+            cssDuration: string;
+            cssEase: string;
+            jsEase: string | number[];
+            jsDuration: number;
+        };
     };
@@ -376,3 +392,3 @@ };
     zLevel: ZLevels;
-    animation: Animation;
+    motion: Animation;
 };
@@ -441,2 +457,7 @@ type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
 }>;
+type MotionTokenPaths = GenerateDesignTokensPaths<{
+    base: {
+        motion: Animation;
+    };
+}>;
 type BiomeTheme = {
@@ -459,2 +480,4 @@ base: ProcessedBaseTokens;
 
+declare function leafIsObject(leaf: unknown): leaf is Record<string, unknown>;
+
 declare const pickTokenValue: <T extends unknown>(themeProps: DesignTokens, selector: string) => T;
@@ -467,2 +490,2 @@ declare function smartPickTokenValue<T extends unknown>(themeProps: DesignTokens, selector: string): T;
 
-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 };
+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, MotionTokenPaths, ProcessedBaseTokens, ShadowTokenPaths, Shadows, ShortcircuitGradients, Spacing, SpacingTokenPaths, Text, TextTokenPaths, ZLevels, base, designTokens, fontFaceStylesImport, leafIsObject, onDarkBase, base as onLightBase, pickTokenValue, smartPickTokenValue };

dist/index.js

@@ -32,2 +32,3 @@ "use strict";
   fontFaceStylesImport: () => fontFaceStylesImport,
+  leafIsObject: () => leafIsObject,
   onDarkBase: () => onDarkBase,
@@ -664,14 +665,30 @@ onLightBase: () => base,
 };
-var animation = {
-  gentle: {
-    cssDuration: "0.4s",
-    jsDuration: 0.4,
-    cssEase: "ease-in-out",
-    jsEase: "easeInOut"
+var motion = {
+  normal: {
+    gentle: {
+      cssDuration: "0.4s",
+      jsDuration: 0.4,
+      cssEase: "ease-in-out",
+      jsEase: "easeInOut"
+    },
+    fast: {
+      cssDuration: "0.25s",
+      jsDuration: 0.25,
+      cssEase: "ease-in-out",
+      jsEase: "easeInOut"
+    }
   },
-  fast: {
-    cssDuration: "0.25s",
-    jsDuration: 0.25,
-    cssEase: "ease-in-out",
-    jsEase: "easeInOut"
+  bounce: {
+    gentle: {
+      cssDuration: "0.6s",
+      jsDuration: 0.6,
+      cssEase: "cubic-bezier(0.47, 1.74, 0.41, 0.8)",
+      jsEase: [0.47, 1.74, 0.41, 0.8]
+    },
+    fast: {
+      cssDuration: "0.45s",
+      jsDuration: 0.45,
+      cssEase: "cubic-bezier(0.47, 1.74, 0.41, 0.8)",
+      jsEase: [0.47, 1.74, 0.41, 0.8]
+    }
   }
@@ -692,3 +709,3 @@ };
   zLevel,
-  animation
+  motion
 };
@@ -708,5 +725,10 @@ var onDarkBase = {
   zLevel,
-  animation
+  motion
 };
 
+// src/utils/leafUtils.ts
+function leafIsObject(leaf) {
+  return typeof leaf !== "string" && typeof leaf !== "number" && !Array.isArray(leaf) && leaf != null;
+}
+
 // src/utils/processTokenUtils.ts
@@ -732,2 +754,3 @@ var import_lodash = __toESM(require("lodash.get"));
   fontFaceStylesImport,
+  leafIsObject,
   onDarkBase,
@@ -734,0 +757,0 @@ onLightBase,

package.json

 {
   "name": "@biom3/design-tokens",
-  "version": "0.2.2-beta",
+  "version": "0.2.3-beta",
   "main": "./dist/index.js",
@@ -16,3 +16,2 @@ "types": "./dist/index.d.ts",
     "build": "npm run build:tokens; npm run build:ts",
-    "prepack": "npm run build",
     "pack": "npm pack",
@@ -33,8 +32,8 @@ "prebuild:tokens": "rm  -rf ./css; mkdir css;",
     "nodemon": "^2.0.20",
+    "prepend-file": "^2.0.1",
+    "ts-config": "*",
     "ts-node": "^10.9.1",
-    "tsconfig": "*",
     "tsup": "^6.5.0",
-    "prepend-file": "^2.0.1",
     "typescript": "^4.9.5"
   }
 }

src/index.ts

 import { base, fontFaceStylesImport, onDarkBase } from './tokens/base';
 
 export * from './types';
+export { leafIsObject } from './utils/leafUtils';
 export { pickTokenValue, smartPickTokenValue } from './utils/processTokenUtils';
@@ -5,0 +6,0 @@ export { base, fontFaceStylesImport, onDarkBase, base as onLightBase };

src/tokens/base.ts

@@ -333,14 +333,30 @@ import {
 
-const animation: Animation = {
-  gentle: {
-    cssDuration: '0.4s',
-    jsDuration: 0.4,
-    cssEase: 'ease-in-out',
-    jsEase: 'easeInOut',
+const motion: Animation = {
+  normal: {
+    gentle: {
+      cssDuration: '0.4s',
+      jsDuration: 0.4,
+      cssEase: 'ease-in-out',
+      jsEase: 'easeInOut',
+    },
+    fast: {
+      cssDuration: '0.25s',
+      jsDuration: 0.25,
+      cssEase: 'ease-in-out',
+      jsEase: 'easeInOut',
+    },
   },
-  fast: {
-    cssDuration: '0.25s',
-    jsDuration: 0.25,
-    cssEase: 'ease-in-out',
-    jsEase: 'easeInOut',
+  bounce: {
+    gentle: {
+      cssDuration: '0.6s',
+      jsDuration: 0.6,
+      cssEase: 'cubic-bezier(0.47, 1.74, 0.41, 0.8)',
+      jsEase: [0.47, 1.74, 0.41, 0.8],
+    },
+    fast: {
+      cssDuration: '0.45s',
+      jsDuration: 0.45,
+      cssEase: 'cubic-bezier(0.47, 1.74, 0.41, 0.8)',
+      jsEase: [0.47, 1.74, 0.41, 0.8],
+    },
   },
@@ -362,3 +378,3 @@ };
   zLevel,
-  animation,
+  motion,
 };
@@ -379,3 +395,3 @@
   zLevel,
-  animation,
+  motion,
 };

src/types.ts

 export type BaseTokensLeaf =
   | string
   | number
+  | number[]
   | undefined
@@ -361,13 +362,29 @@ | {
 export type Animation = {
-  gentle: {
-    cssDuration: string;
-    cssEase: string;
-    jsEase: string;
-    jsDuration: number;
+  normal: {
+    gentle: {
+      cssDuration: string;
+      cssEase: string;
+      jsEase: string | number[];
+      jsDuration: number;
+    };
+    fast: {
+      cssDuration: string;
+      cssEase: string;
+      jsEase: string | number[];
+      jsDuration: number;
+    };
   };
-  fast: {
-    cssDuration: string;
-    cssEase: string;
-    jsEase: string;
-    jsDuration: number;
+  bounce: {
+    gentle: {
+      cssDuration: string;
+      cssEase: string;
+      jsEase: string | number[];
+      jsDuration: number;
+    };
+    fast: {
+      cssDuration: string;
+      cssEase: string;
+      jsEase: string | number[];
+      jsDuration: number;
+    };
   };
@@ -391,3 +408,3 @@ };
   zLevel: ZLevels;
-  animation: Animation;
+  motion: Animation;
 };
@@ -503,2 +520,5 @@
 }>;
+export type MotionTokenPaths = GenerateDesignTokensPaths<{
+  base: { motion: Animation };
+}>;
 
@@ -505,0 +525,0 @@ export type BiomeTheme = {

src/utils/fileSystemUtils.ts

@@ -8,2 +8,3 @@ /* eslint-disable no-restricted-syntax */
 import { BaseTokensLeaf } from '../types';
+import { leafIsObject } from './leafUtils';
 
@@ -15,3 +16,3 @@ export async function recursivelyOutputTokens<T extends BaseTokensLeaf>(
 ) {
-  if (typeof leaf !== 'string' && typeof leaf !== 'number' && leaf != null) {
+  if (leafIsObject(leaf)) {
     let leafKey: keyof typeof leaf;
@@ -18,0 +19,0 @@ for (leafKey in leaf) {

tsconfig.json

 {
-  "extends": "tsconfig/react-library.json",
+  "extends": "ts-config/react-library.json",
   "include": ["."],
   "exclude": ["dist", "build", "node_modules"],
-  "ts-node": {
-    "compilerOptions": {
-      "module": "commonjs",
-      "declaration": true
-    }
+  "compilerOptions": {
+    "module": "commonjs",
+    "declaration": true
   }
 }

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

126328

3.94%

Number of package files

20

5.26%

Lines of code

3187

3.78%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes