@biom3/design-tokens - npm Package Compare versions

Comparing version 0.0.14-alpha to 0.0.15-alpha

dist/index.d.ts

@@ -9,3 +9,2 @@ type Colors = {
         6: string;
-        7: string;
     };
@@ -128,2 +127,3 @@ neutral: {
         300: string;
+        250: string;
         200: string;
@@ -186,3 +186,3 @@ 100: string;
         };
-        '2xSmall': {
+        xxSmall: {
             regular: {
@@ -233,3 +233,3 @@ fontSize: string;
     heading: {
-        '2xLarge': {
+        xxLarge: {
             regular: {
@@ -326,2 +326,3 @@ fontSize: string;
     xxLarge: number;
+    xxxLarge: number;
 };
@@ -328,0 +329,0 @@ type BaseTokens = {

dist/index.js

@@ -47,4 +47,3 @@ "use strict";
     5: "#36E0F8",
-    6: "#1F8290",
-    7: "#B026BD"
+    6: "#1F8290"
   },
@@ -108,3 +107,3 @@ neutral: {
     success: {
-      bright: "#ABF690",
+      bright: "#ABF790",
       dim: "#D5FAC7"
@@ -143,3 +142,3 @@ },
   1: {
-    spectrum: "linear-gradient(90.68deg, #C9A2F6 0%, #83E3F0 99.82%);",
+    spectrum: "linear-gradient(105.76deg, #F191FA -46.96%, #83E3F0 99.99%)",
     blendMode: "normal",
@@ -155,4 +154,3 @@ svgDefs: `
   2: {
-    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%)`,
+    spectrum: `radial-gradient(96.87% 65.57% at 54.34% 93.79%, #FCF5EE 0%, rgba(236, 190, 225, 0) 71.51%), radial-gradient(73.48% 242.97% at 26.54% 26.42%, #A3EEF8 0%, #A4DCF5 17.71%, #A6AEEC 38.02%, #ECBEE1 100%)`,
     blendMode: "normal, normal",
@@ -175,5 +173,3 @@ svgDefs: `
   3: {
-    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%)`,
+    spectrum: `radial-gradient(100% 100% at 24.5% 100%, rgba(106, 160, 242, 0.9) 0%, rgba(198, 229, 247, 0) 100%), linear-gradient(81.66deg, rgba(124, 246, 251, 0.48) 9.38%, rgba(254, 253, 248, 0.7) 98.47%), radial-gradient(4009.6% 10453.55% at 0% 0%, #7EF8FE 0%, #7ABFEC 30.21%, #AEC3ED 45.54%, #DEF3F6 61.46%, #FAF9F3 100%)`,
     blendMode: "normal, normal, normal",
@@ -213,4 +209,3 @@ svgDefs: `
     5: "#36E0F8",
-    6: "#1F8290",
-    7: "#B026BD"
+    6: "#1F8290"
   },
@@ -288,3 +283,3 @@ neutral: {
     primary: "#131313",
-    secondary: "#868686",
+    secondary: "#5C5C5C",
     link: {
@@ -319,4 +314,3 @@ primary: "#B026BD",
   2: {
-    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%)`,
+    spectrum: `radial-gradient(96.87% 65.57% at 54.34% 93.79%, #FCF5EE 0%, rgba(236, 190, 225, 0) 71.51%), radial-gradient(73.48% 242.97% at 26.54% 26.42%, #A3EEF8 0%, #A4DCF5 17.71%, #A6AEEC 38.02%, #ECBEE1 100%)`,
     blendMode: "normal, normal",
@@ -338,5 +332,3 @@ svgDefs: `<radialGradient id="gradient-2-bottomLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
   3: {
-    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%)`,
+    spectrum: `radial-gradient(100% 100% at 24.5% 100%, rgba(106, 160, 242, 0.9) 0%, rgba(198, 229, 247, 0) 100%), linear-gradient(81.66deg, rgba(124, 246, 251, 0.48) 9.38%, rgba(254, 253, 248, 0.7) 98.47%), radial-gradient(4009.6% 10453.55% at 0% 0%, #7EF8FE 0%, #7ABFEC 30.21%, #AEC3ED 45.54%, #DEF3F6 61.46%, #FAF9F3 100%)`,
     blendMode: "normal, normal, normal",
@@ -385,2 +377,3 @@ svgDefs: `<radialGradient id="gradient-3-bottomLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
     300: "24px",
+    250: "20px",
     200: "16px",
@@ -397,4 +390,4 @@ 100: "12px"
     body: {
-      secondary: `'Roboto Mono', monospace`,
-      primary: `'Roboto', sans-serif`
+      primary: `'Roboto', sans-serif`,
+      secondary: `'Roboto Mono', monospace`
     }
@@ -444,3 +437,3 @@ },
     },
-    "2xSmall": {
+    xxSmall: {
       regular: {
@@ -479,3 +472,3 @@ fontSize: "10px",
         casing: "uppercase",
-        letterSpacing: "1px"
+        letterSpacing: "2px"
       },
@@ -487,3 +480,3 @@ bold: {
         casing: "uppercase",
-        letterSpacing: "1px"
+        letterSpacing: "2px"
       }
@@ -493,3 +486,3 @@ }
   heading: {
-    "2xLarge": {
+    xxLarge: {
       regular: {
@@ -654,7 +647,8 @@ fontSize: "96px",
 var breakpoint = {
-  small: 320,
-  medium: 450,
-  large: 768,
-  xLarge: 1024,
-  xxLarge: 1280
+  small: 450,
+  medium: 768,
+  large: 1024,
+  xLarge: 1280,
+  xxLarge: 1536,
+  xxxLarge: 1920
 };
@@ -661,0 +655,0 @@ var base = {

package.json

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

src/index.ts

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

src/packageScripts/dumpTokens.ts

 import fs from 'fs/promises';
+
 import { designTokens } from '..';
@@ -3,0 +4,0 @@ import { fontFaceStylesImport } from '../tokens/base';

src/tokens/base.ts

@@ -37,2 +37,3 @@ import {
     300: '24px',
+    250: '20px',
     200: '16px',
@@ -50,4 +51,4 @@ 100: '12px',
     body: {
+      primary: `'Roboto', sans-serif`,
       secondary: `'Roboto Mono', monospace`,
-      primary: `'Roboto', sans-serif`,
     },
@@ -98,3 +99,3 @@ },
     },
-    '2xSmall': {
+    xxSmall: {
       regular: {
@@ -133,3 +134,3 @@ fontSize: '10px',
         casing: 'uppercase',
-        letterSpacing: '1px',
+        letterSpacing: '2px',
       },
@@ -141,3 +142,3 @@ bold: {
         casing: 'uppercase',
-        letterSpacing: '1px',
+        letterSpacing: '2px',
       },
@@ -147,3 +148,3 @@ },
   heading: {
-    '2xLarge': {
+    xxLarge: {
       regular: {
@@ -311,7 +312,8 @@ fontSize: '96px',
 const breakpoint: Breakpoints = {
-  small: 320,
-  medium: 450,
-  large: 768,
-  xLarge: 1024,
-  xxLarge: 1280,
+  small: 450,
+  medium: 768,
+  large: 1024,
+  xLarge: 1280,
+  xxLarge: 1536,
+  xxxLarge: 1920,
 } as const;
@@ -318,0 +320,0 @@

src/tokens/theme/onDark.ts

@@ -11,3 +11,2 @@ import { Colors, Gradients, Shadows } from '../../types';
     6: '#1F8290',
-    7: '#B026BD',
   },
@@ -71,3 +70,3 @@ neutral: {
     success: {
-      bright: '#ABF690',
+      bright: '#ABF790',
       dim: '#D5FAC7',
@@ -108,3 +107,3 @@ },
   1: {
-    spectrum: 'linear-gradient(90.68deg, #C9A2F6 0%, #83E3F0 99.82%);',
+    spectrum: 'linear-gradient(105.76deg, #F191FA -46.96%, #83E3F0 99.99%)',
     blendMode: 'normal',
@@ -120,4 +119,3 @@ svgDefs: `
   2: {
-    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%)`,
+    spectrum: `radial-gradient(96.87% 65.57% at 54.34% 93.79%, #FCF5EE 0%, rgba(236, 190, 225, 0) 71.51%), radial-gradient(73.48% 242.97% at 26.54% 26.42%, #A3EEF8 0%, #A4DCF5 17.71%, #A6AEEC 38.02%, #ECBEE1 100%)`,
     blendMode: 'normal, normal',
@@ -140,5 +138,3 @@ svgDefs: `
   3: {
-    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%)`,
+    spectrum: `radial-gradient(100% 100% at 24.5% 100%, rgba(106, 160, 242, 0.9) 0%, rgba(198, 229, 247, 0) 100%), linear-gradient(81.66deg, rgba(124, 246, 251, 0.48) 9.38%, rgba(254, 253, 248, 0.7) 98.47%), radial-gradient(4009.6% 10453.55% at 0% 0%, #7EF8FE 0%, #7ABFEC 30.21%, #AEC3ED 45.54%, #DEF3F6 61.46%, #FAF9F3 100%)`,
     blendMode: 'normal, normal, normal',
@@ -145,0 +141,0 @@ svgDefs: `

src/tokens/theme/onLight.ts

@@ -11,3 +11,2 @@ import { Colors, Gradients, Shadows } from '../../types';
     6: '#1F8290',
-    7: '#B026BD',
   },
@@ -85,3 +84,3 @@ neutral: {
     primary: '#131313',
-    secondary: '#868686',
+    secondary: '#5C5C5C',
     link: {
@@ -118,4 +117,3 @@ primary: '#B026BD',
   2: {
-    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%)`,
+    spectrum: `radial-gradient(96.87% 65.57% at 54.34% 93.79%, #FCF5EE 0%, rgba(236, 190, 225, 0) 71.51%), radial-gradient(73.48% 242.97% at 26.54% 26.42%, #A3EEF8 0%, #A4DCF5 17.71%, #A6AEEC 38.02%, #ECBEE1 100%)`,
     blendMode: 'normal, normal',
@@ -137,5 +135,3 @@ svgDefs: `<radialGradient id="gradient-2-bottomLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
   3: {
-    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%)`,
+    spectrum: `radial-gradient(100% 100% at 24.5% 100%, rgba(106, 160, 242, 0.9) 0%, rgba(198, 229, 247, 0) 100%), linear-gradient(81.66deg, rgba(124, 246, 251, 0.48) 9.38%, rgba(254, 253, 248, 0.7) 98.47%), radial-gradient(4009.6% 10453.55% at 0% 0%, #7EF8FE 0%, #7ABFEC 30.21%, #AEC3ED 45.54%, #DEF3F6 61.46%, #FAF9F3 100%)`,
     blendMode: 'normal, normal, normal',
@@ -142,0 +138,0 @@ svgDefs: `<radialGradient id="gradient-3-bottomLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"

src/types.ts

@@ -10,3 +10,2 @@ // Base Types
     6: string;
-    7: string;
   };
@@ -134,2 +133,3 @@ neutral: {
     300: string;
+    250: string;
     200: string;
@@ -194,3 +194,3 @@ 100: string;
     };
-    '2xSmall': {
+    xxSmall: {
       regular: {
@@ -241,3 +241,3 @@ fontSize: string;
   heading: {
-    '2xLarge': {
+    xxLarge: {
       regular: {
@@ -332,2 +332,3 @@ fontSize: string;
   xxLarge: number;
+  xxxLarge: number;
 };
@@ -334,0 +335,0 @@

src/utils/processTokenUtils.ts

 import get from 'lodash.get';
+
 import { DesignTokens } from '../types';
@@ -3,0 +4,0 @@

No alert changes

Improved metrics

Total package byte prevSize

109309

increased by0.69%

Worsened metrics

Lines of code

2718

decreased by-0.44%

No dependency changes