@datacamp/waffles-tokens - npm Package Compare versions

Comparing version 2.0.0-beta.1 to 2.0.0-beta.2

CHANGELOG.md

@@ -6,2 +6,21 @@ # Change Log
 
+# [2.0.0-beta.2](https://github.com/datacamp/design-system/compare/@datacamp/waffles-tokens@2.0.0-beta.1...@datacamp/waffles-tokens@2.0.0-beta.2) (2021-07-26)
+
+
+### Features
+
+* add lineHeights transformation ([006fbb0](https://github.com/datacamp/design-system/commit/006fbb0))
+* add sizing token ([7ececb8](https://github.com/datacamp/design-system/commit/7ececb8))
+* add tests and update snapshots ([9f58e65](https://github.com/datacamp/design-system/commit/9f58e65))
+* add transformations for fontWeights and fontFamilies ([20a62fe](https://github.com/datacamp/design-system/commit/20a62fe))
+* check for lib directory ([acb747d](https://github.com/datacamp/design-system/commit/acb747d))
+* flatten colors tokens ([e748863](https://github.com/datacamp/design-system/commit/e748863))
+* remove typography and paragraphSpacing ([52ef532](https://github.com/datacamp/design-system/commit/52ef532))
+* update readme ([866e733](https://github.com/datacamp/design-system/commit/866e733))
+* update some tokens values ([771d648](https://github.com/datacamp/design-system/commit/771d648))
+
+
+
+
+
 # [2.0.0-beta.1](https://github.com/datacamp/design-system/compare/@datacamp/waffles-tokens@2.0.0-beta.0...@datacamp/waffles-tokens@2.0.0-beta.1) (2021-07-15)
@@ -8,0 +27,0 @@

lib/tokens.common.js

@@ -8,4 +8,5 @@ "use strict";
 var sizing = {
-  small: '36px',
-  medium: '48px'
+  small: '24px',
+  medium: '36px',
+  large: '48px'
 };
@@ -23,48 +24,48 @@ exports.sizing = sizing;
   navyLight: '#213147',
-  navy: '#05192d',
+  navy: '#05192D',
   navyDark: '#000820',
-  navySubtleTextOnDark: '#9ba3ab',
-  navySubtleTextOnLight: '#65707c',
-  greenLight: '#65ff8f',
-  green: '#03ef62',
-  greenDark: '#00c53b',
+  navySubtleTextOnDark: '#9BA3AB',
+  navySubtleTextOnLight: '#65707C',
+  greenLight: '#65FF8F',
+  green: '#03EF62',
+  greenDark: '#00C53B',
   greenDarkText: '#008700',
-  white: '#ffffff',
-  greySubtle: '#f7f7fc',
-  greyLight: '#efefef',
-  grey: '#e8e8ea',
-  greyMedium: '#d9d9e2',
-  greyDark: '#848c92',
-  beigeSubtle: '#fffbf3',
-  beigeLight: '#f7f3eb',
-  beige: '#efebe4',
-  beigeMedium: '#e5e1da',
-  redLight: '#ff782d',
-  red: '#ff5400',
-  redDark: '#dd3400',
-  redDarkText: '#c01100',
-  orangeLight: '#ffbc4b',
-  orange: '#ff931e',
-  orangeDark: '#d87300',
-  orangeDarkText: '#b75900',
-  yellowLight: '#ffec3c',
-  yellow: '#fcce0d',
-  yellowDark: '#cfa600',
+  white: '#FFFFFF',
+  greySubtle: '#F7F7FC',
+  greyLight: '#EFEFEF',
+  grey: '#E8E8EA',
+  greyMedium: '#D9D9E2',
+  greyDark: '#848C92',
+  beigeSubtle: '#FFFBF3',
+  beigeLight: '#F7F3EB',
+  beige: '#EFEBE4',
+  beigeMedium: '#E5E1DA',
+  redLight: '#FF782D',
+  red: '#FF5400',
+  redDark: '#DD3400',
+  redDarkText: '#C01100',
+  orangeLight: '#FFBC4B',
+  orange: '#FF931E',
+  orangeDark: '#D87300',
+  orangeDarkText: '#B75900',
+  yellowLight: '#FFEC3C',
+  yellow: '#FCCE0D',
+  yellowDark: '#CFA600',
   yellowDarkText: '#907000',
-  blue: '#06bdfc',
-  blueDark: '#009bd8',
-  blueLight: '#60e7ff',
-  blueDarkText: '#007bb6',
-  purpleLight: '#974dff',
-  purple: '#7933ff',
-  purpleDark: '#5646a5',
-  purpleDarkText: '#5646a5',
-  pinkLight: '#ff95cf',
-  pink: '#ff6ea9',
-  pinkDark: '#dc4d8b',
-  pinkDarkText: '#bf3072',
-  brandFacebook: '#1778f2',
-  brandTwitter: '#00acee',
-  brandGoogle: '#db4437',
-  brandLinkedIn: '#0e76a8'
+  blueLight: '#60E7FF',
+  blue: '#06BDFC',
+  blueDark: '#009BD8',
+  blueDarkText: '#007BB6',
+  purpleLight: '#974DFF',
+  purple: '#7933FF',
+  purpleDark: '#5646A5',
+  purpleDarkText: '#5646A5',
+  pinkLight: '#FF95CF',
+  pink: '#FF6EA9',
+  pinkDark: '#DC4D8B',
+  pinkDarkText: '#BF3072',
+  brandFacebook: '#1778F2',
+  brandTwitter: '#00ACEE',
+  brandGoogle: '#DB4437',
+  brandLinkedIn: '#0E76A8'
 };
@@ -93,3 +94,2 @@ exports.colors = colors;
   regular: 400,
-  light: 100,
   bold: 800
@@ -113,4 +113,4 @@ };
 var letterSpacing = {
+  tight: '-0.5px',
   default: '0px',
-  tight: '-0.5px',
   relaxed: '1.5px'
@@ -120,7 +120,5 @@ };
 var lineHeights = {
-  small: '16px',
-  medium: '20px',
-  large: '22px',
-  xlarge: '24px',
-  xxlarge: '34px'
+  tight: 1,
+  default: 1.25,
+  relaxed: 1.5
 };
@@ -131,3 +129,3 @@ exports.lineHeights = lineHeights;
   medium: '40%',
-  height: '60%'
+  high: '60%'
 };
@@ -139,4 +137,4 @@ exports.opacity = opacity;
   dropdown: 7000,
+  overlay: 8000,
   modal: 9000,
-  overlay: 8000,
   toast: 10000
@@ -143,0 +141,0 @@ };

lib/tokens.d.ts

 export namespace sizing {
     const small: string;
     const medium: string;
+    const large: string;
 }
@@ -11,3 +12,4 @@ export namespace spacing {
     export { medium_1 as medium };
-    export const large: string;
+    const large_1: string;
+    export { large_1 as large };
     export const xlarge: string;
@@ -47,5 +49,5 @@ }
     const yellowDarkText: string;
+    const blueLight: string;
     const blue: string;
     const blueDark: string;
-    const blueLight: string;
     const blueDarkText: string;
@@ -89,3 +91,2 @@ const purpleLight: string;
     const regular: number;
-    const light: number;
     const bold: number;
@@ -102,4 +103,4 @@ }
     export { medium_5 as medium };
-    const large_1: string;
-    export { large_1 as large };
+    const large_2: string;
+    export { large_2 as large };
     const xlarge_1: string;
@@ -111,39 +112,35 @@ export { xlarge_1 as xlarge };
 export namespace letterSpacing {
+    export const tight: string;
     const _default: string;
     export { _default as default };
-    export const tight: string;
     export const relaxed: string;
 }
 export namespace lineHeights {
-    const small_3: string;
-    export { small_3 as small };
-    const medium_6: string;
-    export { medium_6 as medium };
-    const large_2: string;
-    export { large_2 as large };
-    const xlarge_2: string;
-    export { xlarge_2 as xlarge };
-    const xxlarge_1: string;
-    export { xxlarge_1 as xxlarge };
+    const tight_1: number;
+    export { tight_1 as tight };
+    const _default_1: number;
+    export { _default_1 as default };
+    const relaxed_1: number;
+    export { relaxed_1 as relaxed };
 }
 export namespace opacity {
     export const low: string;
-    const medium_7: string;
-    export { medium_7 as medium };
-    export const height: string;
+    const medium_6: string;
+    export { medium_6 as medium };
+    export const high: string;
 }
 export namespace zIndex {
-    const _default_1: number;
-    export { _default_1 as default };
+    const _default_2: number;
+    export { _default_2 as default };
     export const sticky: number;
     export const dropdown: number;
+    export const overlay: number;
     export const modal: number;
-    export const overlay: number;
     export const toast: number;
 }
 export namespace breakpoints {
-    const small_4: string;
-    export { small_4 as small };
-    const medium_8: string;
-    export { medium_8 as medium };
+    const small_3: string;
+    export { small_3 as small };
+    const medium_7: string;
+    export { medium_7 as medium };
     const large_3: string;
@@ -150,0 +147,0 @@ export { large_3 as large };

lib/tokens.esm.js

@@ -8,4 +8,5 @@ "use strict";
 var sizing = {
-  small: '36px',
-  medium: '48px'
+  small: '24px',
+  medium: '36px',
+  large: '48px'
 };
@@ -23,48 +24,48 @@ exports.sizing = sizing;
   navyLight: '#213147',
-  navy: '#05192d',
+  navy: '#05192D',
   navyDark: '#000820',
-  navySubtleTextOnDark: '#9ba3ab',
-  navySubtleTextOnLight: '#65707c',
-  greenLight: '#65ff8f',
-  green: '#03ef62',
-  greenDark: '#00c53b',
+  navySubtleTextOnDark: '#9BA3AB',
+  navySubtleTextOnLight: '#65707C',
+  greenLight: '#65FF8F',
+  green: '#03EF62',
+  greenDark: '#00C53B',
   greenDarkText: '#008700',
-  white: '#ffffff',
-  greySubtle: '#f7f7fc',
-  greyLight: '#efefef',
-  grey: '#e8e8ea',
-  greyMedium: '#d9d9e2',
-  greyDark: '#848c92',
-  beigeSubtle: '#fffbf3',
-  beigeLight: '#f7f3eb',
-  beige: '#efebe4',
-  beigeMedium: '#e5e1da',
-  redLight: '#ff782d',
-  red: '#ff5400',
-  redDark: '#dd3400',
-  redDarkText: '#c01100',
-  orangeLight: '#ffbc4b',
-  orange: '#ff931e',
-  orangeDark: '#d87300',
-  orangeDarkText: '#b75900',
-  yellowLight: '#ffec3c',
-  yellow: '#fcce0d',
-  yellowDark: '#cfa600',
+  white: '#FFFFFF',
+  greySubtle: '#F7F7FC',
+  greyLight: '#EFEFEF',
+  grey: '#E8E8EA',
+  greyMedium: '#D9D9E2',
+  greyDark: '#848C92',
+  beigeSubtle: '#FFFBF3',
+  beigeLight: '#F7F3EB',
+  beige: '#EFEBE4',
+  beigeMedium: '#E5E1DA',
+  redLight: '#FF782D',
+  red: '#FF5400',
+  redDark: '#DD3400',
+  redDarkText: '#C01100',
+  orangeLight: '#FFBC4B',
+  orange: '#FF931E',
+  orangeDark: '#D87300',
+  orangeDarkText: '#B75900',
+  yellowLight: '#FFEC3C',
+  yellow: '#FCCE0D',
+  yellowDark: '#CFA600',
   yellowDarkText: '#907000',
-  blue: '#06bdfc',
-  blueDark: '#009bd8',
-  blueLight: '#60e7ff',
-  blueDarkText: '#007bb6',
-  purpleLight: '#974dff',
-  purple: '#7933ff',
-  purpleDark: '#5646a5',
-  purpleDarkText: '#5646a5',
-  pinkLight: '#ff95cf',
-  pink: '#ff6ea9',
-  pinkDark: '#dc4d8b',
-  pinkDarkText: '#bf3072',
-  brandFacebook: '#1778f2',
-  brandTwitter: '#00acee',
-  brandGoogle: '#db4437',
-  brandLinkedIn: '#0e76a8'
+  blueLight: '#60E7FF',
+  blue: '#06BDFC',
+  blueDark: '#009BD8',
+  blueDarkText: '#007BB6',
+  purpleLight: '#974DFF',
+  purple: '#7933FF',
+  purpleDark: '#5646A5',
+  purpleDarkText: '#5646A5',
+  pinkLight: '#FF95CF',
+  pink: '#FF6EA9',
+  pinkDark: '#DC4D8B',
+  pinkDarkText: '#BF3072',
+  brandFacebook: '#1778F2',
+  brandTwitter: '#00ACEE',
+  brandGoogle: '#DB4437',
+  brandLinkedIn: '#0E76A8'
 };
@@ -93,3 +94,2 @@ exports.colors = colors;
   regular: 400,
-  light: 100,
   bold: 800
@@ -113,4 +113,4 @@ };
 var letterSpacing = {
+  tight: '-0.5px',
   default: '0px',
-  tight: '-0.5px',
   relaxed: '1.5px'
@@ -120,7 +120,5 @@ };
 var lineHeights = {
-  small: '16px',
-  medium: '20px',
-  large: '22px',
-  xlarge: '24px',
-  xxlarge: '34px'
+  tight: 1,
+  default: 1.25,
+  relaxed: 1.5
 };
@@ -131,3 +129,3 @@ exports.lineHeights = lineHeights;
   medium: '40%',
-  height: '60%'
+  high: '60%'
 };
@@ -139,4 +137,4 @@ exports.opacity = opacity;
   dropdown: 7000,
+  overlay: 8000,
   modal: 9000,
-  overlay: 8000,
   toast: 10000
@@ -143,0 +141,0 @@ };

package.json

 {
   "name": "@datacamp/waffles-tokens",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.2",
   "description": "",
@@ -37,3 +37,3 @@ "main": "lib/tokens.common.js",
   },
-  "gitHead": "ddcda560607c5d09b3d8e42ca40fa121f2cbcb91"
+  "gitHead": "783efc8ddbd099a2d8fac1567dd5d79dea0cfcf6"
 }

README.md

@@ -31,2 +31,3 @@ # Tokens
 ### Deprecated tokens groups
+
 - 🚨 `spatial` group is deprecated
@@ -100,7 +101,6 @@ - use tokens from `sizing`, `spacing`, and `zIndex` groups
 - 🔄 `lineHeight` -> `lineHeights`
-  - in most cases use the same `lineHeight` in tandem with `fontSize`
-  - 🚨 `base` -> `medium`
-  - 🚨 `heading` -> `large`
-  - 🚨 `largeHeading` -> `xlarge`
-  - 🟢 new `small` token
-  - 🟢 new `xxlarge` token
+  - in most cases, for headings use `default` token and for large amout of mid-sized text use `relaxed`
+  - 🚨 `base` -> `relaxed`
+  - 🚨 `heading` -> `default`
+  - 🚨 `largeHeading` -> `default`
+  - 🟢 new `tight` token

No alert changes

Improved metrics

Total package byte prevSize

77807

increased by1.19%

Worsened metrics

Lines of code

476

decreased by-1.45%

No dependency changes