refactor: Removes hard coded colors (#11977)

* Removes hard coded colors

Removes hard coded colors defined in src/components/styles.ts. The colors defined in this file were used only in the Select component so they were migrated to src/components/Select/styles.tsx and ajusted to conform to the theme colors.

* Use theme context for Select styles

* Includes Theme Provider in tests with Select

superset-frontend/spec/javascripts/explore/components/ColorScheme_spec.jsx

@@ -18,10 +18,9 @@
  */
 /* eslint-disable no-unused-expressions */
 import React from 'react';
-import { mount } from 'enzyme';
 import { Select } from 'src/components/Select';
 import { getCategoricalSchemeRegistry } from '@superset-ui/core';
-
+import { styledMount as mount } from 'spec/helpers/theming';
 import ColorSchemeControl from 'src/explore/components/controls/ColorSchemeControl';
 
 const defaultProps = {

superset-frontend/spec/javascripts/explore/components/FilterBox_spec.jsx

@@ -17,8 +17,8 @@
  * under the License.
  */
 import React from 'react';
-import { shallow, mount } from 'enzyme';
-
+import { shallow } from 'enzyme';
+import { styledMount as mount } from 'spec/helpers/theming';
 import FilterBox from 'src/visualizations/FilterBox/FilterBox';
 import SelectControl from 'src/explore/components/controls/SelectControl';
 

superset-frontend/spec/javascripts/explore/components/SelectControl_spec.jsx

@@ -19,10 +19,11 @@
 /* eslint-disable no-unused-expressions */
 import React from 'react';
 import sinon from 'sinon';
-import { shallow, mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import { Select, CreatableSelect } from 'src/components/Select';
 import OnPasteSelect from 'src/components/Select/OnPasteSelect';
 import SelectControl from 'src/explore/components/controls/SelectControl';
+import { styledMount as mount } from 'spec/helpers/theming';
 
 const defaultProps = {
   choices: [

superset-frontend/spec/javascripts/explore/components/withAsyncVerification_spec.tsx

@@ -17,7 +17,8 @@
  * under the License.
  */
 import React from 'react';
-import { mount, ReactWrapper } from 'enzyme';
+import { ReactWrapper } from 'enzyme';
+import { styledMount as mount } from 'spec/helpers/theming';
 import { act } from 'react-dom/test-utils';
 
 import MetricsControl from 'src/explore/components/controls/MetricsControl';

superset-frontend/src/components/Select/SupersetStyledSelect.tsx

@@ -40,6 +40,7 @@ import {
 } from 'react-sortable-hoc';
 import arrayMove from 'array-move';
 import { Props as SelectProps } from 'react-select/src/Select';
+import { useTheme } from '@superset-ui/core';
 import {
   WindowedSelectComponentType,
   WindowedSelectProps,
@@ -52,13 +53,13 @@ import {
   DEFAULT_CLASS_NAME,
   DEFAULT_CLASS_NAME_PREFIX,
   DEFAULT_STYLES,
-  DEFAULT_THEME,
   DEFAULT_COMPONENTS,
   VALUE_LABELED_STYLES,
   PartialThemeConfig,
   PartialStylesConfig,
   SelectComponentsType,
   InputProps,
+  defaultTheme,
 } from './styles';
 import { findValue } from './utils';
 
@@ -176,7 +177,6 @@ function styled<
         }
         return optionRenderer ? optionRenderer(option) : getOptionLabel(option);
       },
-
       ...restProps
     } = selectProps;
 
@@ -256,6 +256,9 @@ function styled<
         selectRef.current = stateManager;
       }
     };
+
+    const theme = useTheme();
+
     return (
       <MaybeSortableSelect
         ref={setRef}
@@ -276,7 +279,9 @@ function styled<
         styles={{ ...DEFAULT_STYLES, ...stylesConfig } as SelectProps['styles']}
         // merge default theme from `react-select`, default theme for Superset,
         // and the theme from props.
-        theme={defaultTheme => merge(defaultTheme, DEFAULT_THEME, themeConfig)}
+        theme={reactSelectTheme =>
+          merge(reactSelectTheme, defaultTheme(theme), themeConfig)
+        }
         formatOptionLabel={formatOptionLabel}
         getOptionLabel={getOptionLabel}
         getOptionValue={getOptionValue}

superset-frontend/src/components/Select/styles.tsx

@@ -18,7 +18,7 @@
  */
 import React, { CSSProperties, ComponentType, ReactNode } from 'react';
 import { css, SerializedStyles, ClassNames } from '@emotion/core';
-import { supersetTheme } from '@superset-ui/core';
+import { SupersetTheme } from '@superset-ui/core';
 import {
   Styles,
   Theme,
@@ -27,8 +27,7 @@ import {
   InputProps as ReactSelectInputProps,
 } from 'react-select';
 import { Props as SelectProps } from 'react-select/src/Select';
-import { colors as reactSelectColros } from 'react-select/src/theme';
-import { supersetColors } from 'src/components/styles';
+import { colors as reactSelectColors } from 'react-select/src/theme';
 import { DeepNonNullable } from 'react-select/src/components';
 import { OptionType } from 'antd/lib/select';
 import { SupersetStyledSelectProps } from './SupersetStyledSelect';
@@ -40,6 +39,30 @@ type RecursivePartial<T> = {
   [P in keyof T]?: RecursivePartial<T[P]>;
 };
 
+const colors = (theme: SupersetTheme) => ({
+  primary: theme.colors.success.base,
+  danger: theme.colors.error.base,
+  warning: theme.colors.warning.base,
+  indicator: theme.colors.info.base,
+  almostBlack: theme.colors.grayscale.dark1,
+  grayDark: theme.colors.grayscale.dark1,
+  grayLight: theme.colors.grayscale.light2,
+  gray: theme.colors.grayscale.light1,
+  grayBg: theme.colors.grayscale.light4,
+  grayBgDarker: theme.colors.grayscale.light3,
+  grayBgDarkest: theme.colors.grayscale.light2,
+  grayHeading: theme.colors.grayscale.light1,
+  menuHover: theme.colors.grayscale.light3,
+  lightest: theme.colors.grayscale.light5,
+  darkest: theme.colors.grayscale.dark2,
+  grayBorder: theme.colors.grayscale.light2,
+  grayBorderLight: theme.colors.grayscale.light3,
+  grayBorderDark: theme.colors.grayscale.light1,
+  textDefault: theme.colors.grayscale.dark1,
+  textDarkest: theme.colors.grayscale.dark2,
+  dangerLight: theme.colors.error.light1,
+});
+
 export type ThemeConfig = {
   borderRadius: number;
   // z-index for menu dropdown
@@ -47,10 +70,10 @@ export type ThemeConfig = {
   zIndex: number;
   colors: {
     // add known colors
-    [key in keyof typeof reactSelectColros]: string;
+    [key in keyof typeof reactSelectColors]: string;
   } &
     {
-      [key in keyof typeof supersetColors]: string;
+      [key in keyof ReturnType<typeof colors>]: string;
     } & {
       [key: string]: string; // any other colors
     };
@@ -66,21 +89,22 @@ export type ThemeConfig = {
 
 export type PartialThemeConfig = RecursivePartial<ThemeConfig>;
 
-export const DEFAULT_THEME: PartialThemeConfig = {
-  borderRadius: supersetTheme.borderRadius,
-  zIndex: 11,
-  colors: {
-    ...supersetColors,
-    dangerLight: supersetColors.warning,
-  },
-  spacing: {
-    baseUnit: 3,
-    menuGutter: 0,
-    controlHeight: 28,
-    lineHeight: 19,
-    fontSize: 14,
-    minWidth: '7.5em', // just enough to display 'No options'
-  },
+export const defaultTheme: (
+  theme: SupersetTheme,
+) => PartialThemeConfig = theme => {
+  return {
+    borderRadius: theme.borderRadius,
+    zIndex: 11,
+    colors: colors(theme),
+    spacing: {
+      baseUnit: 3,
+      menuGutter: 0,
+      controlHeight: 28,
+      lineHeight: 19,
+      fontSize: 14,
+      minWidth: '7.5em', // just enough to display 'No options'
+    },
+  };
 };
 
 // let styles accept serialized CSS, too

superset-frontend/src/components/styles.ts

@@ -1,46 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-// Variables ported from "src/stylesheets/less/variables.less"
-// TODO: move to `@superset-ui/style`
-// Keep it here to make PRs easier for review.
-export const supersetColors = {
-  primary: '#00a699',
-  danger: '#fe4a49',
-  warning: '#ffab00',
-  indicator: '#44c0ff',
-  almostBlack: '#263238',
-  grayDark: '#484848',
-  grayLight: '#cfd8dc',
-  gray: '#879399',
-  grayBg: '#f5f5f5',
-  grayBgDarker: '#e8e8e8', // select option menu hover
-  grayBgDarkest: '#d2d2d2', // table cell bar chart
-  grayHeading: '#a3a3a3',
-  menuHover: '#f2f3f5',
-  lightest: '#fff',
-  darkest: '#000',
-
-  // addition most common colors
-  grayBorder: '#ccc',
-  grayBorderLight: '#d9d9d9',
-  grayBorderDark: '#b3b3b3',
-  textDefault: '#333',
-  textDarkest: '#111',
-};