[Theming] Update Colors Export (#480)

* Bump @types/react from 16.9.53 to 16.9.55 (#473) * Bump @types/react-dom from 16.9.8 to 16.9.9 (#469) * Bump @types/enzyme from 3.10.7 to 3.10.8 (#470) * Bump lint-staged from 10.4.0 to 10.5.0 (#468) * Bump typescript from 4.0.3 to 4.0.5 (#471) * Bump chromatic from 5.2.0 to 5.3.0 (#478) * Bump @react-aria/focus from 3.2.2 to 3.2.3 (#479) * Mass commit: add TODO to existing COLORS export, fix lingering COLORS imports, update stories * Add react-is as devDependency to fix install warning * Fix visual regression in Available Constants story Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>
curology · Oct 30, 2020 · effc32f · effc32f
1 parent 4a5e75d
commit effc32f
Show file tree

Hide file tree

Showing 24 changed files with 646 additions and 1,240 deletions.
diff --git a/.size-snapshot.json b/.size-snapshot.json
@@ -1,13 +1,13 @@
 {
   "bundle.js": {
-    "bundled": 852635,
-    "minified": 783404,
-    "gzipped": 92446
+    "bundled": 827439,
+    "minified": 758189,
+    "gzipped": 91394
   },
   "bundle.umd.js": {
-    "bundled": 862161,
-    "minified": 759409,
-    "gzipped": 88484
+    "bundled": 836975,
+    "minified": 734219,
+    "gzipped": 87440
   },
   "shared-components/avatar/index.js": {
     "bundled": 550,
@@ -110,7 +110,7 @@
   "shared-components/button/index.js": {
     "bundled": 3741,
     "minified": 2006,
-    "gzipped": 815,
+    "gzipped": 814,
     "treeshaked": {
       "rollup": {
         "code": 1655,
@@ -458,9 +458,9 @@
     }
   },
   "shared-components/button/style.js": {
-    "bundled": 35974,
-    "minified": 34106,
-    "gzipped": 6775,
+    "bundled": 35978,
+    "minified": 34110,
+    "gzipped": 6768,
     "treeshaked": {
       "rollup": {
         "code": 4650,
@@ -488,7 +488,7 @@
   "shared-components/callout/index.js": {
     "bundled": 1294,
     "minified": 601,
-    "gzipped": 340,
+    "gzipped": 342,
     "treeshaked": {
       "rollup": {
         "code": 510,
@@ -612,16 +612,16 @@
     }
   },
   "shared-components/carousel/style.js": {
-    "bundled": 46209,
-    "minified": 45547,
-    "gzipped": 5097,
+    "bundled": 20523,
+    "minified": 19882,
+    "gzipped": 4875,
     "treeshaked": {
       "rollup": {
-        "code": 2501,
-        "import_statements": 158
+        "code": 3136,
+        "import_statements": 79
       },
       "webpack": {
-        "code": 3678
+        "code": 4187
       }
     }
   },
@@ -822,16 +822,16 @@
     }
   },
   "shared-components/button/components/roundButton/index.js": {
-    "bundled": 3771,
-    "minified": 1978,
+    "bundled": 3778,
+    "minified": 1980,
     "gzipped": 810,
     "treeshaked": {
       "rollup": {
-        "code": 1551,
+        "code": 1553,
         "import_statements": 623
       },
       "webpack": {
-        "code": 2909
+        "code": 2911
       }
     }
   },
@@ -1172,16 +1172,16 @@
     }
   },
   "shared-components/button/components/roundButton/style.js": {
-    "bundled": 28622,
-    "minified": 26937,
-    "gzipped": 5180,
+    "bundled": 28975,
+    "minified": 27269,
+    "gzipped": 5194,
     "treeshaked": {
       "rollup": {
-        "code": 630,
-        "import_statements": 222
+        "code": 594,
+        "import_statements": 186
       },
       "webpack": {
-        "code": 1843
+        "code": 1764
       }
     }
   },
@@ -1354,23 +1354,23 @@
     }
   },
   "constants/themes/types.js": {
-    "bundled": 432,
+    "bundled": 440,
     "minified": 411,
-    "gzipped": 229,
+    "gzipped": 230,
     "treeshaked": {
       "rollup": {
-        "code": 244,
-        "import_statements": 170
+        "code": 278,
+        "import_statements": 204
       },
       "webpack": {
-        "code": 1379
+        "code": 1385
       }
     }
   },
   "constants/themes/secondaryTheme.js": {
-    "bundled": 181,
-    "minified": 161,
-    "gzipped": 133,
+    "bundled": 177,
+    "minified": 154,
+    "gzipped": 128,
     "treeshaked": {
       "rollup": {
         "code": 30,
@@ -1396,9 +1396,9 @@
     }
   },
   "constants/themes/primaryTheme.js": {
-    "bundled": 169,
-    "minified": 149,
-    "gzipped": 129,
+    "bundled": 165,
+    "minified": 142,
+    "gzipped": 124,
     "treeshaked": {
       "rollup": {
         "code": 28,

diff --git a/package.json b/package.json
@@ -124,6 +124,7 @@
     "jest-junit": "^12.0.0",
     "lint-staged": "^10.1.3",
     "prettier": "2.1.2",
+    "react-is": "^16.13.1",
     "react-test-renderer": "^16.14.0",
     "regenerator-runtime": "^0.13.7",
     "rimraf": "^3.0.2",

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -1,12 +1,14 @@
 export { default as ANIMATION } from './animation';
 export { default as BOX_SHADOWS } from './boxShadows';
 export { default as BREAKPOINTS } from './breakpoints';
-export { default as COLORS, COLORS_PROP_TYPES } from './colors';
+// TODO: Remove once all consumer usage is using theming
+export { default as COLORS } from './colors';
 export { default as FONTS } from './fonts';
 export { default as GRID } from './grid';
 export { default as LAYOUT } from './layout';
 export { default as MEDIA_QUERIES } from './mediaQueries';
 export { default as PROGRESS_BAR_STATUS } from './progressBarStatus';
 export { default as SPACER } from './spacer';
+export { primaryTheme, secondaryTheme, COLORS_PROP_TYPES } from './themes';
 export { default as TYPOGRAPHY_CONSTANTS } from './typography';
 export { default as Z_SCALE } from './zScale';
diff --git a/src/constants/themes/index.ts b/src/constants/themes/index.ts
@@ -1,2 +1,3 @@
-export { default as primaryTheme } from './primaryTheme';
-export { default as secondaryTheme } from './secondaryTheme';
+export { primaryTheme } from './primaryTheme';
+export { secondaryTheme } from './secondaryTheme';
+export { COLORS_PROP_TYPES } from './types';
diff --git a/src/constants/themes/primaryTheme.ts b/src/constants/themes/primaryTheme.ts
@@ -1,9 +1,7 @@
 import PRIMARY_COLORS from '../colors/primary';
 
-const primaryTheme = {
+export const primaryTheme = {
   __type: 'primary',
   BOX_SHADOW: {},
   COLORS: PRIMARY_COLORS,
 } as const;
-
-export default primaryTheme;
diff --git a/src/constants/themes/secondaryTheme.ts b/src/constants/themes/secondaryTheme.ts
@@ -1,9 +1,7 @@
 import SECONDARY_COLORS from '../colors/secondary';
 
-const secondaryTheme = {
+export const secondaryTheme = {
   __type: 'secondary',
   BOX_SHADOW: {},
   COLORS: SECONDARY_COLORS,
 } as const;
-
-export default secondaryTheme;
diff --git a/src/constants/themes/types.ts b/src/constants/themes/types.ts
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 
-import { primaryTheme, secondaryTheme } from '.';
+import { primaryTheme } from './primaryTheme';
+import { secondaryTheme } from './secondaryTheme';
 
 type BoxShadow =
   | typeof primaryTheme['BOX_SHADOW']

diff --git a/src/shared-components/button/components/roundButton/index.tsx b/src/shared-components/button/components/roundButton/index.tsx
@@ -87,7 +87,7 @@ export const RoundButton = ({
           buttonColor={buttonColorWithTheme}
           buttonType={buttonType}
           disabled={disabled}
-          css={roundButtonLoader(disabled)}
+          css={roundButtonLoader(disabled, theme)}
           isLoading={loadingVal}
           textColor={textColor}
         />

diff --git a/src/shared-components/button/components/roundButton/style.ts b/src/shared-components/button/components/roundButton/style.ts
@@ -3,7 +3,7 @@ import { css } from '@emotion/core';
 import tinycolor from 'tinycolor2';
 import { ThemeColors, ThemeType } from 'src/constants/themes/types';
 
-import { ANIMATION, COLORS } from '../../../../constants';
+import { ANIMATION } from '../../../../constants';
 import { ButtonBase } from '../../style';
 import { textColorsAssociatedWithColors } from '../../constants';
 
@@ -54,14 +54,14 @@ export const RoundButtonBase = styled(ButtonBase)`
   }
 `;
 
-export const roundButtonLoader = (disabled: boolean) => css`
+export const roundButtonLoader = (disabled: boolean, theme: ThemeType) => css`
   width: 36px;
   margin: -3px -3px 0 0;
 
   ${disabled &&
   `
     & span {
-      background-color: ${COLORS.white};
+      background-color: ${theme.COLORS.white};
     }
   `}
 `;
@@ -72,7 +72,10 @@ export const roundButtonLoader = (disabled: boolean) => css`
  * @param  string color   the current color name of the round button (e.g purple, primary, etc.)
  * @return string         hex string of the alternate color (e.g. #efefef)
  */
-const determineAlternateTextColor = (buttonColor: ThemeColors) => {
+const determineAlternateTextColor = (
+  buttonColor: ThemeColors,
+  theme: ThemeType,
+) => {
   // create a lighter and darker version of the text
   const lighterVersion = tinycolor(buttonColor)
     .lighten(10)
@@ -88,7 +91,7 @@ const determineAlternateTextColor = (buttonColor: ThemeColors) => {
   const contrastLevel: tinycolor.WCAG2Options = { level: 'AA', size: 'large' };
 
   const lighterIsReadable = tinycolor.isReadable(
-    COLORS.defaultBackground,
+    theme.COLORS.defaultBackground,
     lighterVersion,
     contrastLevel,
   );
@@ -116,7 +119,7 @@ const buttonTextColor = (
 
   return tintedTextColor
     ? tintedTextColor.tint1
-    : determineAlternateTextColor(buttonColor);
+    : determineAlternateTextColor(buttonColor, theme);
 };
 
 export const roundButtonTextStyles = (

diff --git a/src/shared-components/carousel/style.ts b/src/shared-components/carousel/style.ts
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { ThemeType } from 'src/constants/themes/types';
 
-import { SPACER, COLORS } from '../../constants';
+import { SPACER } from '../../constants';
 
 import { CarouselType } from '.';
 
@@ -11,34 +11,34 @@ export const Card = styled.div`
   margin: 0 ${SPACER.small};
 `;
 
-const primaryStyles = css`
+const primaryStyles = (theme: ThemeType) => `
   .slick-dots {
     li {
-      background-color: ${COLORS.primary};
+      background-color: ${theme.COLORS.primary};
     }
   }
 `;
 
-const secondaryStyles = css`
+const secondaryStyles = (theme: ThemeType) => `
   .slick-dots {
     li {
-      background-color: ${COLORS.white};
+      background-color: ${theme.COLORS.white};
     }
   }
 `;
 
-const parseStyle = (carouselType: CarouselType) => {
+const parseStyle = (carouselType: CarouselType, theme: ThemeType) => {
   switch (carouselType) {
     case 'primary':
-      return primaryStyles;
+      return primaryStyles(theme);
     case 'secondary':
-      return secondaryStyles;
+      return secondaryStyles(theme);
     default:
-      return primaryStyles;
+      return primaryStyles(theme);
   }
 };
 
-const dotStyles = css`
+const dotStyles = `
   display: flex !important;
   position: absolute;
   left: 50%;
@@ -67,7 +67,7 @@ const dotStyles = css`
 `;
 
 // styles from the react-slick library
-const reactSlickStyles = css`
+const reactSlickStyles = `
   .slick-slider {
     position: relative;
     display: flex;
@@ -174,7 +174,7 @@ const parseOuterStyle = (numCardsVisible: number) => {
       maxWidth = '375px';
   }
 
-  return css`
+  return `
     max-width: ${maxWidth};
   `;
 };
@@ -189,15 +189,15 @@ export const InnerContainer = styled.div<{
   overflow: hidden !important;
   padding-bottom: ${SPACER.large};
 
-  ${reactSlickStyles};
+  ${reactSlickStyles}
 
   .slick-slider {
     flex-wrap: wrap;
   }
 
   .slick-dots {
-    ${dotStyles};
+    ${dotStyles}
   }
 
-  ${({ carouselType }) => parseStyle(carouselType)};
+  ${({ carouselType, theme }) => parseStyle(carouselType, theme)}
 `;