@biom3/design-tokens - npm Package Compare versions

Comparing version 0.0.7-alpha to 0.0.8-alpha

dist/index.d.ts

@@ -77,15 +77,12 @@ type Colors = {
 };
+type Gradient = {
+    spectrum: string;
+    blendMode: string;
+    svgDefs: string;
+    svgDefIds: string;
+};
 type Gradients = {
-    1: {
-        spectrum: string;
-        blendMode: string;
-    };
-    2: {
-        spectrum: string;
-        blendMode: string;
-    };
-    3: {
-        spectrum: string;
-        blendMode: string;
-    };
+    1: Gradient;
+    2: Gradient;
+    3: Gradient;
 };
@@ -122,3 +119,3 @@ type Borders = {
         underline: string;
-        linethrough: string;
+        lineThrough: string;
         none: string;
@@ -308,2 +305,8 @@ };
 };
+type UiIcon = {
+    color: {
+        primary: string;
+        secondary: string;
+    };
+};
 type UiText = {
@@ -339,5 +342,8 @@ heading: {
     breakpoint: Breakpoints;
+    border: Borders;
+    icon: Icons;
 };
 type UiTokens = {
     text: UiText;
+    icon: UiIcon;
     elevation: Elevation;
@@ -380,8 +386,6 @@ };
 
-declare const borders: Borders;
-declare const icons: Icons;
 declare const base: BaseTokens;
 declare const onDarkBase: BaseTokens;
 declare const ui: UiTokens;
-declare const tokens: {
+declare const designTokens: {
     base: BaseTokens;
@@ -395,5 +399,6 @@ ui: UiTokens;
 declare function recursivelyResolveTokens<T extends Leaf>(leaf: T, theme: DesignTokens): T;
-declare function pickTokenValue(themeProps: DesignTokens, selector: string): string | undefined;
+declare const pickTokenValue: <T extends unknown>(themeProps: DesignTokens, selector: string) => T;
+declare function smartPickTokenValue<T extends unknown>(themeProps: DesignTokens, selector: string): T;
 declare function calculateSpacingAndBorderRadiusTokens(uiTokens: UiTokens, baseTokens: BaseTokens): ProcessedUiTokens;
 
-export { BaseTokens, DesignTokens, DesignTokensPaths, LeafPaths, ProcessedUiTokens, UiTokens, ValidSxValues, base, borders, calculateSpacingAndBorderRadiusTokens, icons, onDarkBase, pickTokenValue, recursivelyResolveTokens, tokens, ui };
+export { BaseTokens, BorderRadius, Borders, Breakpoints, Colors, DesignTokens, DesignTokensPaths, Elevation, Font, Gradient, Gradients, Icons, IntRange, LeafPaths, ProcessedUiTokens, Shadows, Spacing, Text, UiIcon, UiText, UiTokens, ValidSxValues, base, calculateSpacingAndBorderRadiusTokens, designTokens, onDarkBase, base as onLightBase, pickTokenValue, recursivelyResolveTokens, smartPickTokenValue, ui };

dist/index.js

@@ -44,9 +44,9 @@ "use strict";
   base: () => base,
-  borders: () => borders,
   calculateSpacingAndBorderRadiusTokens: () => calculateSpacingAndBorderRadiusTokens,
-  icons: () => icons,
+  designTokens: () => designTokens,
   onDarkBase: () => onDarkBase,
+  onLightBase: () => base,
   pickTokenValue: () => pickTokenValue,
   recursivelyResolveTokens: () => recursivelyResolveTokens,
-  tokens: () => tokens,
+  smartPickTokenValue: () => smartPickTokenValue,
   ui: () => ui
@@ -135,12 +135,58 @@ });
   1: {
-    spectrum: "linear-gradient(106deg, #C9A2F6 0%, #83E3F0 100%);",
-    blendMode: "normal"
+    spectrum: "linear-gradient(90.68deg, #C9A2F6 0%, #83E3F0 99.82%);",
+    blendMode: "normal",
+    svgDefs: `
+    <linearGradient id="gradient-1-singleLayer" x1="0" y1="0" x2="24" y2="0.214702"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#C9A2F6" />
+      <stop offset="1" stop-color="#83E3F0" />
+    </linearGradient>`,
+    svgDefIds: "gradient-1-singleLayer"
   },
   2: {
-    spectrum: "radial-gradient(92% 64% at 56% 92%, #FCF5EE 0%, rgba(236, 190, 225, 0) 72%), radial-gradient(72% 240% at 28% 28%, #A3EEF8 0%, #A4DCF5 16%, #A6AEEC 40%, #ECBEE1 100%)",
-    blendMode: "overlay, normal"
+    spectrum: `radial-gradient(92% 64% at 56% 92%, #FCF5EE 0%, #ecbee100 72%), 
+      radial-gradient(72% 240% at 28% 28%, #A3EEF8 0%, #A4DCF5 16%, #A6AEEC 40%, #ECBEE1 100%)`,
+    blendMode: "normal, normal",
+    svgDefs: `
+    <radialGradient id="gradient-2-bottomLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(4.7777 4.75595) rotate(44.9817) scale(18.6995 39.6574)">
+      <stop stop-color="#A3EEF8" />
+      <stop offset="0.177083" stop-color="#A4DCF5" />
+      <stop offset="0.380208" stop-color="#A6AEEC" />
+      <stop offset="1" stop-color="#ECBEE1" />
+    </radialGradient>
+    <radialGradient id="gradient-2-topLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(9.7806 16.8827) rotate(84.265) scale(9.68552 18.5286)">
+      <stop stop-color="#FCF5EE" />
+      <stop offset="0.715135" stop-color="#ECBEE1" stop-opacity="0" />
+    </radialGradient>`,
+    svgDefIds: `gradient-2-bottomLayer, gradient-2-topLayer`
   },
   3: {
-    spectrum: "radial-gradient(100% 100% at 24% 100%, rgba(106, 160, 242, 0.9) 0%, rgba(198, 229, 247, 0) 100%), linear-gradient(80deg, rgba(124, 246, 251, 0.48) 8%, rgba(254, 253, 248, 0.7) 98%), radial-gradient(4000% 10450% at 0% 0%, #7EF8FE 0%, #7ABFEC 30.21%, #AEC3ED 45.54%, #DEF3F6 61.46%, #FAF9F3 100%)",
-    blendMode: "overlay, normal, normal"
+    spectrum: `radial-gradient(100% 100% at 24% 100%, #6aa0f2e6 0%, #c6e5f700 100%), 
+      linear-gradient(80deg, #7cf6fb7a 8%, #fefdf8b3 98%), 
+      radial-gradient(4000% 10450% at 0% 0%, #7EF8FE 0%, #7ABFEC 30.21%, #AEC3ED 45.54%, #DEF3F6 61.46%, #FAF9F3 100%)`,
+    blendMode: "normal, normal, normal",
+    svgDefs: `
+    <radialGradient id="gradient-3-bottomLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="rotate(60.6728) scale(36.75 1550.85)">
+      <stop stop-color="#7EF8FE" />
+      <stop offset="0.302083" stop-color="#7ABFEC" />
+      <stop offset="0.455396" stop-color="#AEC3ED" />
+      <stop offset="0.614583" stop-color="#DEF3F6" />
+      <stop offset="1" stop-color="#FAF9F3" />
+    </radialGradient>
+    <linearGradient id="gradient-3-middleLayer" x1="-1.26123e-07" y1="4.8" x2="24" y2="2.16"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#7CF6FB" stop-opacity="0.48" />
+      <stop offset="1" stop-color="#FEFDF8" stop-opacity="0.7" />
+    </linearGradient>
+    <radialGradient id="gradient-3-topLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(4.41 18) rotate(-52.9472) scale(22.5541)">
+      <stop stop-color="#6AA0F2" />
+      <stop offset="1" stop-color="#C6E5F7" stop-opacity="0" />
+    </radialGradient>`,
+    svgDefIds: `gradient-3-bottomLayer,
+      gradient-3-middleLayer,
+      gradient-3-topLayer`
   }
@@ -228,12 +274,55 @@ };
   1: {
-    spectrum: "linear-gradient(106deg, #F191FA 0%, #83E3F0 100%)",
-    blendMode: "normal"
+    spectrum: "linear-gradient(90.68deg, #F191FA 0%, #83E3F0 99.82%)",
+    blendMode: "normal",
+    svgDefs: `<linearGradient id="gradient-1-singleLayer" x1="0" y1="0" x2="24" y2="0.214702"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#F191FA" />
+      <stop offset="1" stop-color="#83E3F0" />
+    </linearGradient>`,
+    svgDefIds: "gradient-1-singleLayer"
   },
   2: {
-    spectrum: "radial-gradient(92% 64% at 56% 92%, #FCF5EE 0%, rgba(236, 190, 225, 0) 72%), radial-gradient(72% 240% at 28% 28%, #A3EEF8 0%, #A4DCF5 16%, #A6AEEC 40%, #ECBEE1 100%)",
-    blendMode: "overlay, normal"
+    spectrum: `radial-gradient(92% 64% at 56% 92%, #FCF5EE 0%, #ecbee100 72%), 
+      radial-gradient(72% 240% at 28% 28%, #A3EEF8 0%, #A4DCF5 16%, #A6AEEC 40%, #ECBEE1 100%)`,
+    blendMode: "normal, normal",
+    svgDefs: `<radialGradient id="gradient-2-bottomLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(4.7777 4.75595) rotate(44.9817) scale(18.6995 39.6574)">
+      <stop stop-color="#A3EEF8" />
+      <stop offset="0.177083" stop-color="#A4DCF5" />
+      <stop offset="0.380208" stop-color="#A6AEEC" />
+      <stop offset="1" stop-color="#ECBEE1" />
+    </radialGradient>
+    <radialGradient id="gradient-2-topLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(9.7806 16.8827) rotate(84.265) scale(9.68552 18.5286)">
+      <stop stop-color="#FCF5EE" />
+      <stop offset="0.715135" stop-color="#ECBEE1" stop-opacity="0" />
+    </radialGradient>`,
+    svgDefIds: `gradient-2-bottomLayer, gradient-2-topLayer`
   },
   3: {
-    spectrum: "radial-gradient(100% 100% at 24% 100%, rgba(106, 160, 242, 0.9) 0%, rgba(198, 229, 247, 0) 100%), linear-gradient(80deg, rgba(124, 246, 251, 0.48) 8%, rgba(254, 253, 248, 0.7) 98%), radial-gradient(4000% 10450% at 0% 0%, #7EF8FE 0%, #7ABFEC 30.21%, #AEC3ED 45.54%, #DEF3F6 61.46%, #FAF9F3 100%)",
-    blendMode: "overlay, normal, normal"
+    spectrum: `radial-gradient(100% 100% at 24% 100%, #6aa0f2e6 0%, #c6e5f700 100%), 
+      linear-gradient(80deg, #7cf6fb7a 8%, #fefdf8b3 98%), 
+      radial-gradient(4000% 10450% at 0% 0%, #7EF8FE 0%, #7ABFEC 30.21%, #AEC3ED 45.54%, #DEF3F6 61.46%, #FAF9F3 100%)`,
+    blendMode: "normal, normal, normal",
+    svgDefs: `<radialGradient id="gradient-3-bottomLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="rotate(60.6728) scale(36.75 1550.85)">
+      <stop stop-color="#7EF8FE" />
+      <stop offset="0.302083" stop-color="#7ABFEC" />
+      <stop offset="0.455396" stop-color="#AEC3ED" />
+      <stop offset="0.614583" stop-color="#DEF3F6" />
+      <stop offset="1" stop-color="#FAF9F3" />
+    </radialGradient>
+    <linearGradient id="gradient-3-middleLayer" x1="-1.26123e-07" y1="4.8" x2="24" y2="2.16"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#7CF6FB" stop-opacity="0.48" />
+      <stop offset="1" stop-color="#FEFDF8" stop-opacity="0.7" />
+    </linearGradient>
+    <radialGradient id="gradient-3-topLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(4.41 18) rotate(-52.9472) scale(22.5541)">
+      <stop stop-color="#6AA0F2" />
+      <stop offset="1" stop-color="#C6E5F7" stop-opacity="0" />
+    </radialGradient>`,
+    svgDefIds: `gradient-3-bottomLayer,
+      gradient-3-middleLayer,
+      gradient-3-topLayer`
   }
@@ -243,3 +332,3 @@ };
 // src/tokens.ts
-var borders = {
+var border = {
   size: {
@@ -252,3 +341,3 @@ 400: "4px",
 };
-var icons = {
+var icon = {
   size: {
@@ -275,3 +364,3 @@ 500: "48px",
     underline: "underline",
-    linethrough: "linethrough",
+    lineThrough: "line-through",
     none: "none"
@@ -459,3 +548,5 @@ },
   text,
-  breakpoint
+  breakpoint,
+  icon,
+  border
 };
@@ -470,5 +561,13 @@ var onDarkBase = {
   text,
-  breakpoint
+  breakpoint,
+  icon,
+  border
 };
 var ui = {
+  icon: {
+    color: {
+      primary: "base.color.brand.1",
+      secondary: "base.color.brand.4"
+    }
+  },
   text: {
@@ -479,3 +578,3 @@ heading: {
         secondary: "base.color.brand.4",
-        atmosphere: "base.gradient.1.spectrum"
+        atmosphere: "base.gradient.1"
       }
@@ -507,3 +606,3 @@ },
 };
-var tokens = {
+var designTokens = {
   base,
@@ -530,4 +629,8 @@ ui
 }
-function pickTokenValue(themeProps, selector) {
-  const pickedToken = (0, import_lodash.default)(themeProps, selector);
+var pickTokenValue = (themeProps, selector) => (0, import_lodash.default)(themeProps, selector);
+function smartPickTokenValue(themeProps, selector) {
+  let pickedToken = pickTokenValue(themeProps, selector);
+  if (typeof pickedToken === "string" && pickedToken.match(/^base./)) {
+    pickedToken = pickTokenValue(themeProps, pickedToken);
+  }
   return pickedToken;
@@ -548,11 +651,11 @@ }
   base,
-  borders,
   calculateSpacingAndBorderRadiusTokens,
-  icons,
+  designTokens,
   onDarkBase,
+  onLightBase,
   pickTokenValue,
   recursivelyResolveTokens,
-  tokens,
+  smartPickTokenValue,
   ui
 });
 //# sourceMappingURL=index.js.map

package.json

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

src/index.ts

@@ -1,2 +0,8 @@
-export { borders, icons, base, ui, tokens, onDarkBase } from "./tokens";
+export {
+  base,
+  base as onLightBase,
+  onDarkBase,
+  ui,
+  designTokens,
+} from "./tokens";
 
@@ -7,12 +13,5 @@ export {
   recursivelyResolveTokens,
+  smartPickTokenValue,
 } from "./utils";
 
-export type {
-  BaseTokens,
-  DesignTokens,
-  UiTokens,
-  LeafPaths,
-  DesignTokensPaths,
-  ValidSxValues,
-  ProcessedUiTokens,
-} from "./types";
+export * from "./types";

src/themes/onDark.ts

@@ -83,15 +83,59 @@ import { Colors, Gradients, Shadows } from "../types";
   1: {
-    spectrum: "linear-gradient(106deg, #C9A2F6 0%, #83E3F0 100%);",
+    spectrum: "linear-gradient(90.68deg, #C9A2F6 0%, #83E3F0 99.82%);",
     blendMode: "normal",
+    svgDefs: `
+    <linearGradient id="gradient-1-singleLayer" x1="0" y1="0" x2="24" y2="0.214702"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#C9A2F6" />
+      <stop offset="1" stop-color="#83E3F0" />
+    </linearGradient>`,
+    svgDefIds: "gradient-1-singleLayer",
   },
   2: {
-    spectrum:
-      "radial-gradient(92% 64% at 56% 92%, #FCF5EE 0%, rgba(236, 190, 225, 0) 72%), radial-gradient(72% 240% at 28% 28%, #A3EEF8 0%, #A4DCF5 16%, #A6AEEC 40%, #ECBEE1 100%)",
-    blendMode: "overlay, normal",
+    spectrum: `radial-gradient(92% 64% at 56% 92%, #FCF5EE 0%, #ecbee100 72%), 
+      radial-gradient(72% 240% at 28% 28%, #A3EEF8 0%, #A4DCF5 16%, #A6AEEC 40%, #ECBEE1 100%)`,
+    blendMode: "normal, normal",
+    svgDefs: `
+    <radialGradient id="gradient-2-bottomLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(4.7777 4.75595) rotate(44.9817) scale(18.6995 39.6574)">
+      <stop stop-color="#A3EEF8" />
+      <stop offset="0.177083" stop-color="#A4DCF5" />
+      <stop offset="0.380208" stop-color="#A6AEEC" />
+      <stop offset="1" stop-color="#ECBEE1" />
+    </radialGradient>
+    <radialGradient id="gradient-2-topLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(9.7806 16.8827) rotate(84.265) scale(9.68552 18.5286)">
+      <stop stop-color="#FCF5EE" />
+      <stop offset="0.715135" stop-color="#ECBEE1" stop-opacity="0" />
+    </radialGradient>`,
+    svgDefIds: `gradient-2-bottomLayer, gradient-2-topLayer`,
   },
   3: {
-    spectrum:
-      "radial-gradient(100% 100% at 24% 100%, rgba(106, 160, 242, 0.9) 0%, rgba(198, 229, 247, 0) 100%), linear-gradient(80deg, rgba(124, 246, 251, 0.48) 8%, rgba(254, 253, 248, 0.7) 98%), radial-gradient(4000% 10450% at 0% 0%, #7EF8FE 0%, #7ABFEC 30.21%, #AEC3ED 45.54%, #DEF3F6 61.46%, #FAF9F3 100%)",
-    blendMode: "overlay, normal, normal",
+    spectrum: `radial-gradient(100% 100% at 24% 100%, #6aa0f2e6 0%, #c6e5f700 100%), 
+      linear-gradient(80deg, #7cf6fb7a 8%, #fefdf8b3 98%), 
+      radial-gradient(4000% 10450% at 0% 0%, #7EF8FE 0%, #7ABFEC 30.21%, #AEC3ED 45.54%, #DEF3F6 61.46%, #FAF9F3 100%)`,
+    blendMode: "normal, normal, normal",
+    svgDefs: `
+    <radialGradient id="gradient-3-bottomLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="rotate(60.6728) scale(36.75 1550.85)">
+      <stop stop-color="#7EF8FE" />
+      <stop offset="0.302083" stop-color="#7ABFEC" />
+      <stop offset="0.455396" stop-color="#AEC3ED" />
+      <stop offset="0.614583" stop-color="#DEF3F6" />
+      <stop offset="1" stop-color="#FAF9F3" />
+    </radialGradient>
+    <linearGradient id="gradient-3-middleLayer" x1="-1.26123e-07" y1="4.8" x2="24" y2="2.16"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#7CF6FB" stop-opacity="0.48" />
+      <stop offset="1" stop-color="#FEFDF8" stop-opacity="0.7" />
+    </linearGradient>
+    <radialGradient id="gradient-3-topLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(4.41 18) rotate(-52.9472) scale(22.5541)">
+      <stop stop-color="#6AA0F2" />
+      <stop offset="1" stop-color="#C6E5F7" stop-opacity="0" />
+    </radialGradient>`,
+    svgDefIds: `gradient-3-bottomLayer,
+      gradient-3-middleLayer,
+      gradient-3-topLayer`,
   },
 } as const;

src/themes/onLight.ts

@@ -83,15 +83,56 @@ import { Colors, Gradients, Shadows } from "../types";
   1: {
-    spectrum: "linear-gradient(106deg, #F191FA 0%, #83E3F0 100%)",
+    spectrum: "linear-gradient(90.68deg, #F191FA 0%, #83E3F0 99.82%)",
     blendMode: "normal",
+    svgDefs: `<linearGradient id="gradient-1-singleLayer" x1="0" y1="0" x2="24" y2="0.214702"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#F191FA" />
+      <stop offset="1" stop-color="#83E3F0" />
+    </linearGradient>`,
+    svgDefIds: "gradient-1-singleLayer",
   },
   2: {
-    spectrum:
-      "radial-gradient(92% 64% at 56% 92%, #FCF5EE 0%, rgba(236, 190, 225, 0) 72%), radial-gradient(72% 240% at 28% 28%, #A3EEF8 0%, #A4DCF5 16%, #A6AEEC 40%, #ECBEE1 100%)",
-    blendMode: "overlay, normal",
+    spectrum: `radial-gradient(92% 64% at 56% 92%, #FCF5EE 0%, #ecbee100 72%), 
+      radial-gradient(72% 240% at 28% 28%, #A3EEF8 0%, #A4DCF5 16%, #A6AEEC 40%, #ECBEE1 100%)`,
+    blendMode: "normal, normal",
+    svgDefs: `<radialGradient id="gradient-2-bottomLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(4.7777 4.75595) rotate(44.9817) scale(18.6995 39.6574)">
+      <stop stop-color="#A3EEF8" />
+      <stop offset="0.177083" stop-color="#A4DCF5" />
+      <stop offset="0.380208" stop-color="#A6AEEC" />
+      <stop offset="1" stop-color="#ECBEE1" />
+    </radialGradient>
+    <radialGradient id="gradient-2-topLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(9.7806 16.8827) rotate(84.265) scale(9.68552 18.5286)">
+      <stop stop-color="#FCF5EE" />
+      <stop offset="0.715135" stop-color="#ECBEE1" stop-opacity="0" />
+    </radialGradient>`,
+    svgDefIds: `gradient-2-bottomLayer, gradient-2-topLayer`,
   },
   3: {
-    spectrum:
-      "radial-gradient(100% 100% at 24% 100%, rgba(106, 160, 242, 0.9) 0%, rgba(198, 229, 247, 0) 100%), linear-gradient(80deg, rgba(124, 246, 251, 0.48) 8%, rgba(254, 253, 248, 0.7) 98%), radial-gradient(4000% 10450% at 0% 0%, #7EF8FE 0%, #7ABFEC 30.21%, #AEC3ED 45.54%, #DEF3F6 61.46%, #FAF9F3 100%)",
-    blendMode: "overlay, normal, normal",
+    spectrum: `radial-gradient(100% 100% at 24% 100%, #6aa0f2e6 0%, #c6e5f700 100%), 
+      linear-gradient(80deg, #7cf6fb7a 8%, #fefdf8b3 98%), 
+      radial-gradient(4000% 10450% at 0% 0%, #7EF8FE 0%, #7ABFEC 30.21%, #AEC3ED 45.54%, #DEF3F6 61.46%, #FAF9F3 100%)`,
+    blendMode: "normal, normal, normal",
+    svgDefs: `<radialGradient id="gradient-3-bottomLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="rotate(60.6728) scale(36.75 1550.85)">
+      <stop stop-color="#7EF8FE" />
+      <stop offset="0.302083" stop-color="#7ABFEC" />
+      <stop offset="0.455396" stop-color="#AEC3ED" />
+      <stop offset="0.614583" stop-color="#DEF3F6" />
+      <stop offset="1" stop-color="#FAF9F3" />
+    </radialGradient>
+    <linearGradient id="gradient-3-middleLayer" x1="-1.26123e-07" y1="4.8" x2="24" y2="2.16"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#7CF6FB" stop-opacity="0.48" />
+      <stop offset="1" stop-color="#FEFDF8" stop-opacity="0.7" />
+    </linearGradient>
+    <radialGradient id="gradient-3-topLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(4.41 18) rotate(-52.9472) scale(22.5541)">
+      <stop stop-color="#6AA0F2" />
+      <stop offset="1" stop-color="#C6E5F7" stop-opacity="0" />
+    </radialGradient>`,
+    svgDefIds: `gradient-3-bottomLayer,
+      gradient-3-middleLayer,
+      gradient-3-topLayer`,
   },
 } as const;

src/tokens.ts

@@ -19,3 +19,3 @@ import { onDarkColors, onDarkGradients, onDarkShadows } from "./themes/onDark";
 
-export const borders: Borders = {
+const border: Borders = {
   size: {
@@ -29,3 +29,3 @@ 400: "4px",
 
-export const icons: Icons = {
+const icon: Icons = {
   size: {
@@ -53,3 +53,3 @@ 500: "48px",
     underline: "underline",
-    linethrough: "linethrough",
+    lineThrough: "line-through",
     none: "none",
@@ -64,3 +64,2 @@ },
 const text: Text = {
-  // ! SUGGESTION: break into 'type' and 'font' base level properties to make extracting weights and variants easier.
   body: {
@@ -235,4 +234,4 @@ medium: {
 
+// @TODO: readonly most of these ... ?
 export const base: BaseTokens = {
-  // readonly most of these
   color: onLightColors,
@@ -245,8 +244,8 @@ gradient: onLightGradients,
   text,
-  // this is going to be dynamic!
-  breakpoint: breakpoint,
+  breakpoint,
+  icon,
+  border,
 };
 
 export const onDarkBase: BaseTokens = {
-  // readonly most of these
   color: onDarkColors,
@@ -259,7 +258,14 @@ gradient: onDarkGradients,
   text,
-  // this is going to be dynamic!
-  breakpoint: breakpoint,
+  breakpoint,
+  icon,
+  border,
 };
 
 export const ui: UiTokens = {
+  icon: {
+    color: {
+      primary: "base.color.brand.1",
+      secondary: "base.color.brand.4",
+    },
+  },
   text: {
@@ -270,3 +276,3 @@ heading: {
         secondary: "base.color.brand.4",
-        atmosphere: "base.gradient.1.spectrum",
+        atmosphere: "base.gradient.1",
       },
@@ -300,5 +306,5 @@ },
 
-export const tokens = {
+export const designTokens = {
   base,
   ui,
 };

src/types.ts

@@ -81,15 +81,13 @@ // Base Types
 
+export type Gradient = {
+  spectrum: string;
+  blendMode: string;
+  svgDefs: string;
+  svgDefIds: string;
+};
+
 export type Gradients = {
-  1: {
-    spectrum: string;
-    blendMode: string;
-  };
-  2: {
-    spectrum: string;
-    blendMode: string;
-  };
-  3: {
-    spectrum: string;
-    blendMode: string;
-  };
+  1: Gradient;
+  2: Gradient;
+  3: Gradient;
 };
@@ -129,3 +127,3 @@
     underline: string;
-    linethrough: string;
+    lineThrough: string;
     none: string;
@@ -321,2 +319,9 @@ };
 
+export type UiIcon = {
+  color: {
+    primary: string;
+    secondary: string;
+  };
+};
+
 export type UiText = {
@@ -353,2 +358,4 @@ heading: {
   breakpoint: Breakpoints;
+  border: Borders;
+  icon: Icons;
 };
@@ -358,2 +365,3 @@
   text: UiText;
+  icon: UiIcon;
   elevation: Elevation;
@@ -360,0 +368,0 @@ };

src/utils.ts

@@ -29,3 +29,3 @@ import {
       } else if (typeof child === "string") {
-        const resolvedValue = pickTokenValue(theme, child);
+        const resolvedValue = pickTokenValue<string>(theme, child);
         leaf[leafKey] = resolvedValue;
@@ -39,5 +39,16 @@ }
 
-export function pickTokenValue(themeProps: DesignTokens, selector: string) {
-  const pickedToken = get(themeProps, selector) as string | undefined;
-  return pickedToken;
+export const pickTokenValue = <T extends unknown>(
+  themeProps: DesignTokens,
+  selector: string
+) => get(themeProps, selector) as T;
+
+export function smartPickTokenValue<T extends unknown>(
+  themeProps: DesignTokens,
+  selector: string
+) {
+  let pickedToken = pickTokenValue<string | object>(themeProps, selector);
+  if (typeof pickedToken === "string" && pickedToken.match(/^base./)) {
+    pickedToken = pickTokenValue<string | object>(themeProps, pickedToken);
+  }
+  return pickedToken as T;
 }
@@ -44,0 +55,0 @@

No alert changes

Improved metrics

Total package byte prevSize

105062

increased by23.27%

Lines of code

2624

increased by12.81%

Number of lines in readme file

70

increased by2.94%

No dependency changes