@biom3/design-tokens - npm Package Compare versions

Comparing version 0.0.15-alpha to 0.1.0-beta

dist/index.d.ts

@@ -92,2 +92,7 @@ type Colors = {
 };
+type ZLevels = {
+    tooltip: number;
+    modal: number;
+    popover: number;
+};
 type Shadows = {
@@ -325,2 +330,14 @@ 100: string;
 };
+type Animation = {
+    slow: {
+        duration: string;
+        cssEase: string;
+        jsEase: string;
+    };
+    fast: {
+        duration: string;
+        cssEase: string;
+        jsEase: string;
+    };
+};
 type BaseTokens = {
@@ -337,2 +354,4 @@ color: Colors;
     icon: Icons;
+    zLevel: ZLevels;
+    animation: Animation;
 };
@@ -356,6 +375,48 @@ type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
 type LooseAutocomplete<T> = T | (string & {});
-type DesignTokensPaths = GenerateDesignTokensPaths<{
-    base: BaseTokens;
+type ColorTokenPaths = GenerateDesignTokensPaths<{
+    base: {
+        color: Colors;
+    };
 }>;
-type ValidSxValues = LooseAutocomplete<DesignTokensPaths>;
+type GradientTokenPaths = GenerateDesignTokensPaths<{
+    base: {
+        gradient: Gradients;
+    };
+}>;
+type ShadowTokenPaths = GenerateDesignTokensPaths<{
+    base: {
+        shadow: Shadows;
+    };
+}>;
+type FontTokenPaths = GenerateDesignTokensPaths<{
+    base: {
+        font: Font;
+    };
+}>;
+type TextTokenPaths = GenerateDesignTokensPaths<{
+    base: {
+        text: Text;
+    };
+}>;
+type SpacingTokenPaths = GenerateDesignTokensPaths<{
+    base: {
+        spacing: Spacing;
+    };
+}>;
+type BorderRadiusTokenPaths = GenerateDesignTokensPaths<{
+    base: {
+        borderRadius: BorderRadius;
+    };
+}>;
+type BorderTokenPaths = GenerateDesignTokensPaths<{
+    base: {
+        border: Borders;
+    };
+}>;
+type IconTokenPaths = GenerateDesignTokensPaths<{
+    base: {
+        icon: Icons;
+    };
+}>;
+type ValidSxValues = string;
 type BiomeTheme = {
@@ -379,2 +440,2 @@ base: ProcessedBaseTokens;
 
-export { BaseTokens, BiomeTheme, BorderRadius, Borders, Breakpoints, Colors, DesignTokens, DesignTokensPaths, Font, GenerateDesignTokensPaths, Gradient, Gradients, Icons, IntRange, IsGradientTokenPath, ProcessedBaseTokens, Shadows, ShortcircuitGradients, Spacing, Text, ValidSxValues, base, designTokens, fontFaceStylesImport, onDarkBase, base as onLightBase, pickTokenValue, smartPickTokenValue };
+export { Animation, BaseTokens, BiomeTheme, BorderRadius, BorderRadiusTokenPaths, BorderTokenPaths, Borders, Breakpoints, ColorTokenPaths, Colors, DesignTokens, Font, FontTokenPaths, GenerateDesignTokensPaths, Gradient, GradientTokenPaths, Gradients, IconTokenPaths, Icons, IntRange, IsGradientTokenPath, LooseAutocomplete, ProcessedBaseTokens, ShadowTokenPaths, Shadows, ShortcircuitGradients, Spacing, SpacingTokenPaths, Text, TextTokenPaths, ValidSxValues, ZLevels, base, designTokens, fontFaceStylesImport, onDarkBase, base as onLightBase, pickTokenValue, smartPickTokenValue };

dist/index.js

@@ -639,2 +639,19 @@ "use strict";
 };
+var zLevel = {
+  tooltip: 11,
+  popover: 10,
+  modal: 9
+};
+var animation = {
+  slow: {
+    duration: "0.4s",
+    cssEase: "ease-in-out",
+    jsEase: "easeInOut"
+  },
+  fast: {
+    duration: "0.25s",
+    cssEase: "ease-in-out",
+    jsEase: "easeInOut"
+  }
+};
 var base = {
@@ -650,3 +667,5 @@ color: onLightColors,
   icon,
-  border
+  border,
+  zLevel,
+  animation
 };
@@ -663,3 +682,5 @@ var onDarkBase = {
   icon,
-  border
+  border,
+  zLevel,
+  animation
 };
@@ -666,0 +687,0 @@

package.json

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

src/packageScripts/dumpTokens.ts

 import fs from 'fs/promises';
 
-import { designTokens } from '..';
-import { fontFaceStylesImport } from '../tokens/base';
 import {
-  onDarkColors,
-  onDarkGradients,
-  onDarkShadows,
-} from '../tokens/theme/onDark';
+  base as onLightBase,
+  fontFaceStylesImport,
+  onDarkBase,
+} from '../tokens/base';
 import {
-  onLightColors,
-  onLightGradients,
-  onLightShadows,
-} from '../tokens/theme/onLight';
-import {
   recursivelyOutputTokens,
@@ -24,9 +17,3 @@ wrapCssFileWithBodySelector,
   await recursivelyOutputTokens(
-    {
-      spacingUnit: designTokens.base.spacing,
-      borderRadiusUnit: designTokens.base.borderRadius,
-      font: designTokens.base.font,
-      text: designTokens.base.text,
-      breakpoint: designTokens.base.breakpoint,
-    },
+    onLightBase,
     'base',
@@ -37,9 +24,3 @@ 'css/base-onLight.global.css',
   await recursivelyOutputTokens(
-    {
-      spacingUnit: designTokens.base.spacing,
-      borderRadiusUnit: designTokens.base.borderRadius,
-      font: designTokens.base.font,
-      text: designTokens.base.text,
-      breakpoint: designTokens.base.breakpoint,
-    },
+    onDarkBase,
     'base',
@@ -49,24 +30,4 @@ 'css/base-onDark.global.css',
 
-  await recursivelyOutputTokens(
-    {
-      color: onLightColors,
-      gradient: onLightGradients,
-      shadow: onLightShadows,
-    },
-    'base',
-    'css/base-onLight.global.css',
-  );
-
-  await recursivelyOutputTokens(
-    {
-      color: onDarkColors,
-      gradient: onDarkGradients,
-      shadow: onDarkShadows,
-    },
-    'base',
-    'css/base-onDark.global.css',
-  );
-
   await wrapCssFileWithBodySelector('css/base-onLight.global.css');
   await wrapCssFileWithBodySelector('css/base-onDark.global.css');
 })();

src/tokens/base.ts

 import {
+  Animation,
   BaseTokens,
@@ -10,2 +11,3 @@ BorderRadius,
   Text,
+  ZLevels,
 } from '../types';
@@ -315,2 +317,21 @@ import { onDarkColors, onDarkGradients, onDarkShadows } from './theme/onDark';
 
+const zLevel: ZLevels = {
+  tooltip: 11,
+  popover: 10,
+  modal: 9,
+} as const;
+
+const animation: Animation = {
+  slow: {
+    duration: '0.4s',
+    cssEase: 'ease-in-out',
+    jsEase: 'easeInOut',
+  },
+  fast: {
+    duration: '0.25s',
+    cssEase: 'ease-in-out',
+    jsEase: 'easeInOut',
+  },
+};
+
 export const base: BaseTokens = {
@@ -327,2 +348,4 @@ color: onLightColors,
   border,
+  zLevel,
+  animation,
 };
@@ -341,2 +364,4 @@
   border,
+  zLevel,
+  animation,
 };

src/types.ts

@@ -94,2 +94,8 @@ // Base Types
 
+export type ZLevels = {
+  tooltip: number;
+  modal: number;
+  popover: number;
+};
+
 export type Shadows = {
@@ -332,2 +338,15 @@ 100: string;
 
+export type Animation = {
+  slow: {
+    duration: string;
+    cssEase: string;
+    jsEase: string;
+  };
+  fast: {
+    duration: string;
+    cssEase: string;
+    jsEase: string;
+  };
+};
+
 export type BaseTokens = {
@@ -344,2 +363,4 @@ color: Colors;
   icon: Icons;
+  zLevel: ZLevels;
+  animation: Animation;
 };
@@ -426,9 +447,34 @@
 // Using '& {}' with any type stops that type from expanding to fill the union. In this case, we want to allow the user to autocomplete on any string union passed in, but also fallback to any string. Without (string & {}), autocomplete would not work as the 'string' primitive type would expand and override the union.
-type LooseAutocomplete<T> = T | (string & {});
+export type LooseAutocomplete<T> = T | (string & {});
 
-export type DesignTokensPaths = GenerateDesignTokensPaths<{
-  base: BaseTokens;
+export type ColorTokenPaths = GenerateDesignTokensPaths<{
+  base: { color: Colors };
 }>;
+export type GradientTokenPaths = GenerateDesignTokensPaths<{
+  base: { gradient: Gradients };
+}>;
+export type ShadowTokenPaths = GenerateDesignTokensPaths<{
+  base: { shadow: Shadows };
+}>;
+export type FontTokenPaths = GenerateDesignTokensPaths<{
+  base: { font: Font };
+}>;
+export type TextTokenPaths = GenerateDesignTokensPaths<{
+  base: { text: Text };
+}>;
+export type SpacingTokenPaths = GenerateDesignTokensPaths<{
+  base: { spacing: Spacing };
+}>;
+export type BorderRadiusTokenPaths = GenerateDesignTokensPaths<{
+  base: { borderRadius: BorderRadius };
+}>;
+export type BorderTokenPaths = GenerateDesignTokensPaths<{
+  base: { border: Borders };
+}>;
+export type IconTokenPaths = GenerateDesignTokensPaths<{
+  base: { icon: Icons };
+}>;
 
-export type ValidSxValues = LooseAutocomplete<DesignTokensPaths>;
+export type ValidSxValues = string;
+
 export type BiomeTheme = {
@@ -435,0 +481,0 @@ base: ProcessedBaseTokens;

src/utils/fileSystemUtils.ts

@@ -24,3 +24,3 @@ import fs from 'fs/promises';
         await recursivelyOutputTokens({ ...child }, selectors, cssFileName);
-      } else if (typeof child === 'string') {
+      } else if (typeof child === 'string' || typeof child === 'number') {
         await fs.appendFile(cssFileName, `\n  --${selectors}: ${child};`);
@@ -27,0 +27,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

116387

6.48%

Lines of code

2946

8.39%

No dependency changes