es-components-via-theme - npm Package Compare versions

Comparing version 19.1.0 to 20.0.0

CHANGELOG.md

@@ -6,2 +6,27 @@ # Change Log
 
+# [20.0.0](https://github.com/WTW-IM/es-components/compare/v19.1.7...v20.0.0) (2020-04-09)
+
+
+### Breaking
+
+* extensive theme color changes, renaming of brand colors ([679011e866fd793e48fe428d5fc43758c8c81bcf](https://github.com/WTW-IM/es-components/commit/679011e866fd793e48fe428d5fc43758c8c81bcf))
+* theme.size -> theme.font, headingSizes moved ([c7b98fef009590378649177b4620450d8efff4ae](https://github.com/WTW-IM/es-components/commit/c7b98fef009590378649177b4620450d8efff4ae))
+
+### New
+
+* migration from v1 to v2 guide ([7c3c16b2f3769efc5b8ce847cad528f2e7c350e6](https://github.com/WTW-IM/es-components/commit/7c3c16b2f3769efc5b8ce847cad528f2e7c350e6))
+
+### Update
+
+* answerButton to coordinate with button changes ([0b3761155900e8642da0cc034e32d2b4f783525f](https://github.com/WTW-IM/es-components/commit/0b3761155900e8642da0cc034e32d2b4f783525f))
+* answerGroup focus color, heading theme use ([63163943938d7486ed34e6d39c2e00906170daa2](https://github.com/WTW-IM/es-components/commit/63163943938d7486ed34e6d39c2e00906170daa2))
+* finishing base Button changes ([33571bbbc8902b03f6a91e5683cd037fb7254ebc](https://github.com/WTW-IM/es-components/commit/33571bbbc8902b03f6a91e5683cd037fb7254ebc))
+* linkButton calcs hover color, removed hover colors from theme ([07da1e1d60c459071d99efaa3223a576d40001fe](https://github.com/WTW-IM/es-components/commit/07da1e1d60c459071d99efaa3223a576d40001fe))
+* outlineButton styles ([ac7cbb1f5da08ec0a2f56855af25a31bed6f016b](https://github.com/WTW-IM/es-components/commit/ac7cbb1f5da08ec0a2f56855af25a31bed6f016b))
+* starting new button styles ([4151e7a7bc5e3f683df618953d9d07e53cb87c81](https://github.com/WTW-IM/es-components/commit/4151e7a7bc5e3f683df618953d9d07e53cb87c81))
+
+
+
+
+
 # [19.1.0](https://github.com/WTW-IM/es-components/compare/v19.0.121...v19.1.0) (2020-03-26)
@@ -8,0 +33,0 @@

index.js

@@ -0,58 +1,85 @@
+// grayscale
 const white = '#fff';
 const gray0 = '#f9f9f9';
 const gray1 = '#f4f4f4';
-const gray2 = '#ecedee';
+const gray2 = '#ededed';
 const gray3 = '#e4e4e4';
 const gray4 = '#d8d8d8';
 const gray5 = '#c5c5c5';
-const gray6 = '#979797';
-const gray7 = '#707070';
-const gray8 = '#585858';
+const gray6 = '#919191';
+const gray7 = '#787878';
+const gray8 = '#5e5e5e';
 const gray9 = '#444';
 const black = '#000';
-const darkBlue = '#006685';
 
-const defaultColor = '#d8d8d8';
-const defaultHover = '#bfbfbf';
-const defaultBtnText = black;
-const primary = '#007fa7';
-const primaryHover = '#005874';
-const info = '#069';
-const infoHover = '#004466';
-const infoLight = '#b8e4f9';
-const success = '#006400';
-const successHover = '#004B00';
-const successLight = '#d9eedf';
-const warning = '#c25400';
-const warningHover = '#8f3e00';
-const warningLight = '#fcebde';
-const danger = '#EE0700';
-const dangerHover = '#BB0000';
-const dangerLight = '#fde7e7';
-const advisor = warning;
-const advisorLight = warningLight;
-const popoverHeader = darkBlue;
+// tints/shades
+const blue50 = '#e0f4fa';
+const blue100 = '#b3e3f2';
+const blue300 = '#4dbde0';
+const blue500 = '#00a0d2';
+const blue700 = '#008ec7';
+const blue900 = '#0073b6';
+const green50 = '#e0f8f1';
+const green100 = '#b3eddc';
+const green300 = '#4dd5ac';
+const green500 = '#00c389';
+const green700 = '#00b576';
+const green900 = '#00a159';
+const magenta50 = '#f8e2f4';
+const magenta100 = '#ecb7e3';
+const magenta300 = '#d458bd';
+const magenta500 = '#c110a0';
+const magenta700 = '#b30c8e';
+const magenta900 = '#9e0573';
+const violet50 = '#ebe2ee';
+const violet100 = '#ceb6d4';
+const violet300 = '#8c559a';
+const violet500 = '#5a0c6f';
+const violet700 = '#48085c';
+const violet900 = '#2e0340';
+const yellow50 = '#fff6e4';
+const yellow100 = '#ffeabb';
+const yellow300 = '#ffcd60';
+const yellow500 = '#ffb81c';
+const yellow700 = '#ffa814';
+const yellow900 = '#ff9109';
 
-const vbBlue = '#00a0d2';
-const vbGreen = '#00c389';
-const vbMagenta = '#c110a0';
-const wtwGray = '#63666a';
+// functional
+const primary = blue900;
+const primaryHover = '#00436a'; // from bda toolkit link example
+const primaryLight = blue700;
 
+// semantic
+const info = '#006699';
+const infoHover = '#004d66';
+const infoLight = '#c0ebff';
+const success = '#006000';
+const successHover = '#004000';
+const successLight = '#d2e9d2';
+const warning = '#de7400';
+const warningHover = '#a65600';
+const warningLight = '#f6e0ca';
+const danger = '#e60700';
+const dangerHover = '#970500';
+const dangerLight = '#ffc2c0';
+const advisor = '#ff6310';
+const advisorLight = '#fee7de';
+
+// brand colors
+const primary1 = '#00a0d2'; // used by: spinner, drawerPanel
+const primary2 = '#00c389'; // used by: spinner
+const primary3 = '#c110a0'; // used by: spinner, modalHeader, breadcrumb, Nav, progressTracker
+const secondary1 = '#5a0c6f'; // used by spinner, outlineButton
+const secondary2 = '#717171';
+
+// misc
+const inputFocus = '#83bffc';
 const boxShadowLight = 'rgba(0, 0, 0, 0.075)';
 const boxShadowDark = 'rgba(0, 0, 0, 0.5)';
 
-const inputBorder = gray5;
-const inputFocus = '#83bffc';
-const inputBoxShadow = 'rgba(102, 175, 233, 0.6)';
-
-const violet = '#5a0c6f';
-const blueLighter = '#d2f4ff';
-const greenLighter = '#c3ffed';
-const violetLighter = '#eac9f2';
-
 // Datepicker colors
-const dpBackground = '#006685';
+const dpBackground = primary;
 const navArrow = white;
 const navArrowHover = gray2;
-const selected = vbMagenta;
+const selected = primary3;
 const hover = '#7a0a65';
@@ -66,68 +93,83 @@ const keyboard = primary;
   colors: {
-    black: black,
-    gray0: gray0,
-    gray1: gray1,
-    gray2: gray2,
-    gray3: gray3,
-    gray4: gray4,
-    gray5: gray5,
-    gray6: gray6,
-    gray7: gray7,
-    gray8: gray8,
-    gray9: gray9,
-    white: white,
-    defaultColor: defaultColor,
-    defaultHover: defaultHover,
-    defaultBtnText: defaultBtnText,
-    primary: primary,
-    primaryHover: primaryHover,
-    success: success,
-    successHover: successHover,
-    successLight: successLight,
-    info: info,
-    infoHover: infoHover,
-    infoLight: infoLight,
-    warning: warning,
-    warningHover: warningHover,
-    warningLight: warningLight,
-    danger: danger,
-    dangerHover: dangerHover,
-    dangerLight: dangerLight,
-    advisor: advisor,
-    advisorLight: advisorLight,
-    boxShadowLight: boxShadowLight,
-    boxShadowDark: boxShadowDark,
-    inputFocus: inputFocus,
-    popoverHeader: popoverHeader,
-    greenLighter: greenLighter,
-    violetLighter: violetLighter,
-    blueLighter: blueLighter,
-    violet: violet,
-    softwareBlue: darkBlue
+    black,
+    gray0,
+    gray1,
+    gray2,
+    gray3,
+    gray4,
+    gray5,
+    gray6,
+    gray7,
+    gray8,
+    gray9,
+    white,
+    blue50,
+    blue100,
+    blue300,
+    blue500,
+    blue700,
+    blue900,
+    green50,
+    green100,
+    green300,
+    green500,
+    green700,
+    green900,
+    magenta50,
+    magenta100,
+    magenta300,
+    magenta500,
+    magenta700,
+    magenta900,
+    violet50,
+    violet100,
+    violet300,
+    violet500,
+    violet700,
+    violet900,
+    yellow50,
+    yellow100,
+    yellow300,
+    yellow500,
+    yellow700,
+    yellow900,
+    primary,
+    primaryHover,
+    primaryLight,
+    success,
+    successHover,
+    successLight,
+    info,
+    infoHover,
+    infoLight,
+    warning,
+    warningHover,
+    warningLight,
+    danger,
+    dangerHover,
+    dangerLight,
+    advisor,
+    advisorLight,
+    boxShadowLight,
+    boxShadowDark,
+    inputFocus
   },
   brandColors: {
-    vbBlue: vbBlue,
-    vbGreen: vbGreen,
-    vbMagenta: vbMagenta,
-    wtwGray: wtwGray
+    primary1,
+    primary2,
+    primary3,
+    secondary1,
+    secondary2
   },
   datepickerColors: {
-    dpBackground: dpBackground,
-    navArrow: navArrow,
-    navArrowHover: navArrowHover,
-    selected: selected,
-    hover: hover,
-    keyboard: keyboard,
-    inRange: inRange,
-    highlight: highlight,
-    highlightHover: highlightHover
+    dpBackground,
+    navArrow,
+    navArrowHover,
+    selected,
+    hover,
+    keyboard,
+    inRange,
+    highlight,
+    highlightHover
   },
-  headingSize: {
-    1: '44.78976px',
-    2: '37.3248px',
-    3: '31.104px',
-    4: '25.92px',
-    5: '21.6px',
-    6: '18px'
-  },
   promptStyles: {
@@ -226,73 +268,23 @@ readAloud: {
         primary: {
-          bgColor: primary,
-          textColor: white,
-          hoverBgColor: primaryHover,
-          hoverTextColor: white,
-          activeBgColor: primaryHover,
-          activeTextColor: white,
-          boxShadowColor: primaryHover
+          bgColor: primary
         },
         default: {
-          bgColor: defaultColor,
-          textColor: black,
-          hoverBgColor: defaultHover,
-          hoverTextColor: black,
-          activeBgColor: defaultHover,
-          activeTextColor: black,
-          boxShadowColor: defaultHover
+          bgColor: '#ccc'
         },
         darkDefault: {
-          bgColor: gray7,
-          textColor: white,
-          hoverBgColor: gray8,
-          hoverTextColor: white,
-          activeBgColor: gray8,
-          activeTextColor: white,
-          boxShadowColor: gray8
+          bgColor: gray8
         },
         success: {
-          bgColor: success,
-          textColor: white,
-          hoverBgColor: successHover,
-          hoverTextColor: white,
-          activeBgColor: successHover,
-          activeTextColor: white,
-          boxShadowColor: successHover
+          bgColor: success
         },
         info: {
-          bgColor: info,
-          textColor: white,
-          hoverBgColor: infoHover,
-          hoverTextColor: white,
-          activeBgColor: infoHover,
-          activeTextColor: white,
-          boxShadowColor: infoHover
+          bgColor: info
         },
         warning: {
-          bgColor: warning,
-          textColor: white,
-          hoverBgColor: warningHover,
-          hoverTextColor: white,
-          activeBgColor: warningHover,
-          activeTextColor: white,
-          boxShadowColor: warningHover
+          bgColor: warning
         },
         danger: {
-          bgColor: danger,
-          textColor: white,
-          hoverBgColor: dangerHover,
-          hoverTextColor: white,
-          activeBgColor: dangerHover,
-          activeTextColor: white,
-          boxShadowColor: dangerHover
+          bgColor: danger
         },
-        inherited: {
-          bgColor: 'inherit',
-          textColor: 'inherit',
-          hoverBgColor: 'inherit',
-          hoverTextColor: 'inherit',
-          activeBgColor: 'inherit',
-          activeTextColor: 'inherit',
-          boxShadowColor: 'inherit'
-        }
+        inherited: {}
       },
@@ -304,32 +296,32 @@ // size should always have default, lg, sm, xs
         lg: {
-          borderRadius: '5px',
-          fontSize: '26px',
-          lineHeight: '1.333',
-          paddingTop: '8px',
-          paddingSides: '20px',
-          paddingBottom: '5px'
+          borderRadius: '0.3rem',
+          fontSize: '1.4375rem',
+          lineHeight: '2',
+          paddingTop: '0.125rem',
+          paddingSides: '1rem',
+          paddingBottom: '0.125rem'
         },
         default: {
-          borderRadius: '4px',
-          fontSize: '18px',
-          paddingTop: '5px',
-          paddingSides: '15px',
-          paddingBottom: '4px',
-          lineHeight: '1.43'
+          borderRadius: '0.25rem',
+          fontSize: '1.15rem',
+          lineHeight: '1.5',
+          paddingTop: '0.25rem',
+          paddingSides: '1rem',
+          paddingBottom: '0.25rem'
         },
         sm: {
-          borderRadius: '3px',
-          fontSize: '17px',
-          lineHeight: '1.5',
-          paddingTop: '4px',
-          paddingSides: '10px',
-          paddingBottom: '3px'
+          borderRadius: '0.2rem',
+          fontSize: '1.00625rem',
+          lineHeight: '1.25',
+          paddingTop: '0.25rem',
+          paddingSides: '0.5rem',
+          paddingBottom: '0.25rem'
         },
         xs: {
-          borderRadius: '3px',
-          fontSize: '15px',
+          borderRadius: '0.25rem',
+          fontSize: '0.8855rem',
           lineHeight: '1.5',
-          paddingTop: '3px',
-          paddingSides: '10px',
-          paddingBottom: '2px',
+          paddingTop: '0.1rem',
+          paddingSides: '0.5rem',
+          paddingBottom: '0.1rem',
           textTransform: 'uppercase'
@@ -342,124 +334,63 @@ }
         primary: {
-          bgColor: white,
-          textColor: primary,
-          hoverBgColor: primary,
-          hoverTextColor: white,
-          activeBgColor: primaryHover,
-          activeTextColor: white,
-          borderColor: primary
+          bgColor: primary
         },
         default: {
-          bgColor: white,
-          textColor: gray7,
-          hoverBgColor: gray7,
-          hoverTextColor: white,
-          activeBgColor: gray8,
-          activeTextColor: white,
-          borderColor: gray7
+          bgColor: gray8
         },
         success: {
-          bgColor: white,
-          textColor: success,
-          hoverBgColor: success,
-          hoverTextColor: white,
-          activeBgColor: successHover,
-          activeTextColor: white,
-          borderColor: success
+          bgColor: success
         },
         info: {
-          bgColor: white,
-          textColor: info,
-          hoverBgColor: info,
-          hoverTextColor: white,
-          activeBgColor: infoHover,
-          activeTextColor: white,
-          borderColor: info
+          bgColor: info
         },
         warning: {
-          bgColor: white,
-          textColor: warning,
-          hoverBgColor: warning,
-          hoverTextColor: white,
-          activeBgColor: warningHover,
-          activeTextColor: white,
-          borderColor: warning
+          bgColor: warning
         },
         danger: {
-          bgColor: white,
-          textColor: danger,
-          hoverBgColor: danger,
-          hoverTextColor: white,
-          activeBgColor: dangerHover,
-          activeTextColor: white,
-          borderColor: danger
+          bgColor: danger
         },
-        gray: {
-          bgColor: white,
-          textColor: wtwGray,
-          hoverBgColor: wtwGray,
-          hoverTextColor: white,
-          activeBgColor: '#4a4d50',
-          activeTextColor: white,
-          borderColor: wtwGray
-        },
         magenta: {
-          bgColor: white,
-          textColor: vbMagenta,
-          hoverBgColor: vbMagenta,
-          hoverTextColor: white,
-          activeBgColor: '#920C79',
-          activeTextColor: white,
-          borderColor: vbMagenta
+          bgColor: primary3
         },
         violet: {
-          bgColor: white,
-          textColor: '#702082',
-          hoverBgColor: '#702082',
-          hoverTextColor: white,
-          activeBgColor: '#4d1659',
-          activeTextColor: white,
-          borderColor: '#702082'
+          bgColor: secondary1
         },
-        inherited: {
-          bgColor: 'inherit',
-          textColor: 'inherit',
-          hoverBgColor: 'inherit',
-          hoverTextColor: 'inherit',
-          activeBgColor: 'inherit',
-          activeTextColor: 'inherit',
-          boxShadowColor: 'inherit'
-        }
+        inherited: {}
       },
       size: {
         lg: {
-          borderRadius: '5px',
-          fontSize: '125%',
+          borderRadius: '0.3rem',
+          fontSize: '1.4375rem',
           fontWeight: 'bold',
-          paddingTop: '8px',
-          paddingSides: '25px',
-          paddingBottom: '8px'
+          lineHeight: '2',
+          paddingTop: '0.125rem',
+          paddingSides: '1rem',
+          paddingBottom: '0.125rem'
         },
         default: {
-          borderRadius: '4px',
-          fontSize: '18px',
+          borderRadius: '0.25rem',
+          fontSize: '1.15rem',
           fontWeight: 'bold',
-          paddingTop: '5px',
-          paddingSides: '15px',
-          paddingBottom: '5px'
+          lineHeight: '1.5',
+          paddingTop: '0.25rem',
+          paddingSides: '1rem',
+          paddingBottom: '0.25rem'
         },
         sm: {
-          borderRadius: '3px',
-          fontSize: '75%',
+          borderRadius: '0.2rem',
+          fontSize: '1.00625rem',
           fontWeight: 'bold',
-          paddingTop: '4px',
-          paddingSides: '10px',
-          paddingBottom: '4px'
+          lineHeight: '1.25',
+          paddingTop: '0.25rem',
+          paddingSides: '0.5rem',
+          paddingBottom: '0.25rem'
         },
         xs: {
-          borderRadius: '3px',
-          fontSize: '60%',
+          borderRadius: '0.25rem',
+          fontSize: '0.8855rem',
           fontWeight: 'bold',
-          paddingTop: '4px',
-          paddingSides: '8px',
-          paddingBottom: '4px',
+          lineHeight: '1.5',
+          paddingTop: '0.1rem',
+          paddingSides: '0.5rem',
+          paddingBottom: '0.1rem',
           textTransform: 'uppercase'
@@ -472,28 +403,21 @@ }
         default: {
-          textColor: defaultColor,
-          hoverTextColor: defaultHover
+          textColor: '#ccc'
         },
         primary: {
-          textColor: primary,
-          hoverTextColor: primaryHover
+          textColor: primary
         },
         success: {
-          textColor: success,
-          hoverTextColor: successHover
+          textColor: success
         },
         information: {
-          textColor: info,
-          hoverTextColor: infoHover,
+          textColor: info
         },
         danger: {
-          textColor: danger,
-          hoverTextColor: dangerHover
+          textColor: danger
         },
         warning: {
-          textColor: warning,
-          hoverTextColor: warningHover
+          textColor: warning
         },
         inherited: {
-          textColor: 'inherit',
-          hoverTextColor: 'inherit'
+          textColor: 'inherit'
         }
@@ -511,5 +435,5 @@ }
   validationTextColor: {
-    success: success,
-    warning: warning,
-    danger: danger
+    success,
+    warning,
+    danger
   },
@@ -536,11 +460,27 @@ validationInputColor: {
     default: {
-      borderColor: inputBorder,
+      borderColor: gray5,
       boxShadow: 'inset 0 1px 1px ' + boxShadowLight,
       focusBorderColor: inputFocus,
-      focusBoxShadow: '0 0 8px ' + inputBoxShadow
+      focusBoxShadow: '0 0 8px rgba(102, 175, 233, 0.6)'
     }
   },
-  sizes: {
+  font: {
     baseFontSize: '18px',
-    baseLineHeight: 1.428
+    baseLineHeight: 1.428,
+    headingDesktop: {
+      1: '44.78976px',
+      2: '37.3248px',
+      3: '31.104px',
+      4: '25.92px',
+      5: '21.6px',
+      6: '18px'
+    },
+    headingMobile: {
+      1: '38.7898px;',
+      2: '31.3248px',
+      3: '31.104px',
+      4: '25.92px',
+      5: '21.6px',
+      6: '18px'
+    }
   },
@@ -547,0 +487,0 @@ screenSize: {

package.json

 {
   "name": "es-components-via-theme",
-  "version": "19.1.0",
+  "version": "20.0.0",
   "main": "index.js",
   "author": "Willis Towers Watson - Individual Marketplace",
   "license": "MIT",
-  "gitHead": "58cc7e96854fea4442ae1b62b0c09c87fa99d78b"
+  "gitHead": "c8455739de1c0f3335380443fa581d3901a72b51"
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

14496

decreased by-8.68%

Lines of code

481

decreased by-11.09%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes