chore: Removes hard-coded colors - iteration 3 (#20016)

2024-09-06 22:07:34 -04:00 · 2022-05-11 15:02:13 -03:00 · 2022-05-11 15:02:13 -03:00 · 8bb8b7f612
commit 8bb8b7f612
parent 3a379af1e7
19 changed files with 342 additions and 345 deletions
--- a/superset-frontend/src/SqlLab/components/ScheduleQueryButton/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ScheduleQueryButton/index.tsx
@ -94,20 +94,22 @@ const StyledRow = styled(Row)`
 `;

 export const StyledButtonComponent = styled(Button)`
-  background: none;
-  text-transform: none;
-  padding: 0px;
-  color: rgba(0, 0, 0, 0.85);
-  font-size: 14px;
-  font-weight: ${({ theme }) => theme.typography.weights.normal};
-  &:disabled {
+  ${({ theme }) => `
    background: none;
-    color: rgba(0, 0, 0, 0.85);
-    &:hover {
+    text-transform: none;
+    padding: 0px;
+    color: ${theme.colors.grayscale.dark2};
+    font-size: 14px;
+    font-weight: ${theme.typography.weights.normal};
+    &:disabled {
      background: none;
-      color: rgba(0, 0, 0, 0.85);
+      color: ${theme.colors.grayscale.dark2};
+      &:hover {
+        background: none;
+        color: ${theme.colors.grayscale.dark2};
+      }
    }
-  }
+  `}
 `;

 const StyledJsonSchema = styled.div`
--- a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
@ -96,21 +96,23 @@ const validatorMap =
 const scheduledQueriesConf = bootstrapData?.common?.conf?.SCHEDULED_QUERIES;

 const LimitSelectStyled = styled.span`
-  .ant-dropdown-trigger {
-    align-items: center;
-    color: black;
-    display: flex;
-    font-size: 12px;
-    margin-right: ${({ theme }) => theme.gridUnit * 2}px;
-    text-decoration: none;
-    span {
-      display: inline-block;
-      margin-right: ${({ theme }) => theme.gridUnit * 2}px;
-      &:last-of-type: {
-        margin-right: ${({ theme }) => theme.gridUnit * 4}px;
+  ${({ theme }) => `
+    .ant-dropdown-trigger {
+      align-items: center;
+      color: ${theme.colors.grayscale.dark2};
+      display: flex;
+      font-size: 12px;
+      margin-right: ${theme.gridUnit * 2}px;
+      text-decoration: none;
+      span {
+        display: inline-block;
+        margin-right: ${theme.gridUnit * 2}px;
+        &:last-of-type: {
+          margin-right: ${theme.gridUnit * 4}px;
+        }
      }
    }
-  }
+  `}
 `;

 const StyledToolbar = styled.div`
--- a/superset-frontend/src/components/InfoTooltip/index.tsx
+++ b/superset-frontend/src/components/InfoTooltip/index.tsx
@ -48,7 +48,7 @@ export interface InfoTooltipProps {
 const StyledTooltip = styled(Tooltip)`
  cursor: pointer;
  path:first-of-type {
-    fill: #999999;
+    fill: ${({ theme }) => theme.colors.grayscale.base};
  }
 `;

--- a/superset-frontend/src/components/ListView/ListView.tsx
+++ b/superset-frontend/src/components/ListView/ListView.tsx
@ -87,35 +87,38 @@ const ListViewStyles = styled.div`
 `;

 const BulkSelectWrapper = styled(Alert)`
-  border-radius: 0;
-  margin-bottom: 0;
-  color: #3d3d3d;
-  background-color: ${({ theme }) => theme.colors.primary.light4};
+  ${({ theme }) => `
+    border-radius: 0;
+    margin-bottom: 0;
+    color: ${theme.colors.grayscale.dark1};
+    background-color: ${theme.colors.primary.light4};

-  .selectedCopy {
-    display: inline-block;
-    padding: ${({ theme }) => theme.gridUnit * 2}px 0;
-  }
+    .selectedCopy {
+      display: inline-block;
+      padding: ${theme.gridUnit * 2}px 0;
+    }

-  .deselect-all {
-    color: #1985a0;
-    margin-left: ${({ theme }) => theme.gridUnit * 4}px;
-  }
+    .deselect-all {
+      color: ${theme.colors.primary.base};
+      margin-left: ${theme.gridUnit * 4}px;
+    }

-  .divider {
-    margin: ${({ theme: { gridUnit } }) =>
-      `${-gridUnit * 2}px 0 ${-gridUnit * 2}px ${gridUnit * 4}px`};
-    width: 1px;
-    height: ${({ theme }) => theme.gridUnit * 8}px;
-    box-shadow: inset -1px 0px 0px #dadada;
-    display: inline-flex;
-    vertical-align: middle;
-    position: relative;
-  }
+    .divider {
+      margin: ${`${-theme.gridUnit * 2}px 0 ${-theme.gridUnit * 2}px ${
+        theme.gridUnit * 4
+      }px`};
+      width: 1px;
+      height: ${theme.gridUnit * 8}px;
+      box-shadow: inset -1px 0px 0px ${theme.colors.grayscale.light2};
+      display: inline-flex;
+      vertical-align: middle;
+      position: relative;
+    }

-  .ant-alert-close-icon {
-    margin-top: ${({ theme }) => theme.gridUnit * 1.5}px;
-  }
+    .ant-alert-close-icon {
+      margin-top: ${theme.gridUnit * 1.5}px;
+    }
+  `}
 `;

 const bulkSelectColumnConfig = {
--- a/superset-frontend/src/components/ListViewCard/index.tsx
+++ b/superset-frontend/src/components/ListViewCard/index.tsx
@ -30,48 +30,31 @@ const ActionsWrapper = styled.div`
 `;

 const StyledCard = styled(AntdCard)`
-  border: 1px solid #d9dbe4;
-  border-radius: ${({ theme }) => theme.gridUnit}px;
-  overflow: hidden;
+  ${({ theme }) => `
+    border: 1px solid ${theme.colors.grayscale.light2};
+    border-radius: ${theme.gridUnit}px;
+    overflow: hidden;

-  .ant-card-body {
-    padding: ${({ theme }) => theme.gridUnit * 4}px
-      ${({ theme }) => theme.gridUnit * 2}px;
-  }
-  .ant-card-meta-detail > div:not(:last-child) {
-    margin-bottom: 0;
-  }
-  .gradient-container {
-    position: relative;
-    height: 100%;
-  }
-  &:hover {
-    box-shadow: 8px 8px 28px 0px rgba(0, 0, 0, 0.24);
-    transition: box-shadow ${({ theme }) => theme.transitionTiming}s ease-in-out;
-
-    .gradient-container:after {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
+    .ant-card-body {
+      padding: ${theme.gridUnit * 4}px
+        ${theme.gridUnit * 2}px;
+    }
+    .ant-card-meta-detail > div:not(:last-child) {
+      margin-bottom: 0;
+    }
+    .gradient-container {
+      position: relative;
      height: 100%;
-      display: inline-block;
-      background: linear-gradient(
-        180deg,
-        rgba(0, 0, 0, 0) 47.83%,
-        rgba(0, 0, 0, 0.219135) 79.64%,
-        rgba(0, 0, 0, 0.5) 100%
-      );
-
-      transition: background ${({ theme }) => theme.transitionTiming}s
-        ease-in-out;
    }
+    &:hover {
+      box-shadow: 8px 8px 28px 0px ${theme.colors.grayscale.light1};
+      transition: box-shadow ${theme.transitionTiming}s ease-in-out;

-    .cover-footer {
-      transform: translateY(0);
+      .cover-footer {
+        transform: translateY(0);
+      }
    }
-  }
+  `}
 `;

 const Cover = styled.div`
--- a/superset-frontend/src/components/Select/styles.tsx
+++ b/superset-frontend/src/components/Select/styles.tsx
@ -16,6 +16,10 @@
 * specific language governing permissions and limitations
 * under the License.
 */
+
+// Deprecated component
+/* eslint-disable theme-colors/no-literal-colors */
+
 import React, { CSSProperties, ComponentType, ReactNode } from 'react';
 import { SerializedStyles } from '@emotion/react';
 import { SupersetTheme, css } from '@superset-ui/core';
--- a/superset-frontend/src/components/TableCollection/index.tsx
+++ b/superset-frontend/src/components/TableCollection/index.tsx
@ -35,187 +35,168 @@ interface TableCollectionProps {
 }

 export const Table = styled.table`
-  background-color: ${({ theme }) => theme.colors.grayscale.light5};
-  border-collapse: separate;
-  border-radius: ${({ theme }) => theme.borderRadius}px;
+  ${({ theme }) => `
+    background-color: ${theme.colors.grayscale.light5};
+    border-collapse: separate;
+    border-radius: ${theme.borderRadius}px;

-  thead > tr > th {
-    border: 0;
-  }
-
-  tbody {
-    tr:first-of-type > td {
-      border-top: 0;
-    }
-  }
-  th {
-    background: ${({ theme }) => theme.colors.grayscale.light5};
-    position: sticky;
-    top: 0;
-
-    &:first-of-type {
-      padding-left: ${({ theme }) => theme.gridUnit * 4}px;
+    thead > tr > th {
+      border: 0;
    }

-    &.xs {
-      min-width: 25px;
-    }
-    &.sm {
-      min-width: 50px;
-    }
-    &.md {
-      min-width: 75px;
-    }
-    &.lg {
-      min-width: 100px;
-    }
-    &.xl {
-      min-width: 150px;
-    }
-    &.xxl {
-      min-width: 200px;
+    tbody {
+      tr:first-of-type > td {
+        border-top: 0;
+      }
    }
+    th {
+      background: ${theme.colors.grayscale.light5};
+      position: sticky;
+      top: 0;

-    span {
-      white-space: nowrap;
-      display: flex;
-      align-items: center;
-      line-height: 2;
-    }
+      &:first-of-type {
+        padding-left: ${theme.gridUnit * 4}px;
+      }

-    svg {
-      display: inline-block;
-      position: relative;
-    }
-  }
-
-  td {
-    &.xs {
-      width: 25px;
-    }
-    &.sm {
-      width: 50px;
-    }
-    &.md {
-      width: 75px;
-    }
-    &.lg {
-      width: 100px;
-    }
-    &.xl {
-      width: 150px;
-    }
-    &.xxl {
-      width: 200px;
-    }
-  }
-
-  .table-cell-loader {
-    position: relative;
-
-    .loading-bar {
-      background-color: ${({ theme }) => theme.colors.secondary.light4};
-      border-radius: 7px;
+      &.xs {
+        min-width: 25px;
+      }
+      &.sm {
+        min-width: 50px;
+      }
+      &.md {
+        min-width: 75px;
+      }
+      &.lg {
+        min-width: 100px;
+      }
+      &.xl {
+        min-width: 150px;
+      }
+      &.xxl {
+        min-width: 200px;
+      }

      span {
-        visibility: hidden;
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        line-height: 2;
+      }
+
+      svg {
+        display: inline-block;
+        position: relative;
      }
    }

-    .empty-loading-bar {
-      display: inline-block;
-      width: 100%;
-      height: 1.2em;
+    td {
+      &.xs {
+        width: 25px;
+      }
+      &.sm {
+        width: 50px;
+      }
+      &.md {
+        width: 75px;
+      }
+      &.lg {
+        width: 100px;
+      }
+      &.xl {
+        width: 150px;
+      }
+      &.xxl {
+        width: 200px;
+      }
    }

-    &:after {
-      position: absolute;
-      transform: translateY(-50%);
-      top: 50%;
-      left: 0;
-      content: '';
-      display: block;
-      width: 100%;
-      height: 48px;
-      background-image: linear-gradient(
-        100deg,
-        rgba(255, 255, 255, 0),
-        rgba(255, 255, 255, 0.5) 60%,
-        rgba(255, 255, 255, 0) 80%
-      );
-      background-size: 200px 48px;
-      background-position: -100px 0;
-      background-repeat: no-repeat;
-      animation: loading-shimmer 1s infinite;
+    .table-cell-loader {
+      position: relative;
+
+      .loading-bar {
+        background-color: ${theme.colors.secondary.light4};
+        border-radius: 7px;
+
+        span {
+          visibility: hidden;
+        }
+      }
+
+      .empty-loading-bar {
+        display: inline-block;
+        width: 100%;
+        height: 1.2em;
+      }
    }
-  }

-  .actions {
-    white-space: nowrap;
-    min-width: 100px;
+    .actions {
+      white-space: nowrap;
+      min-width: 100px;

-    svg,
-    i {
-      margin-right: 8px;
+      svg,
+      i {
+        margin-right: 8px;

-      &:hover {
-        path {
-          fill: ${({ theme }) => theme.colors.primary.base};
+        &:hover {
+          path {
+            fill: ${theme.colors.primary.base};
+          }
        }
      }
    }
-  }
-
-  .table-row {
-    .actions {
-      opacity: 0;
-      font-size: ${({ theme }) => theme.typography.sizes.xl}px;
-    }
-
-    &:hover {
-      background-color: ${({ theme }) => theme.colors.secondary.light5};

+    .table-row {
      .actions {
-        opacity: 1;
-        transition: opacity ease-in ${({ theme }) => theme.transitionTiming}s;
+        opacity: 0;
+        font-size: ${theme.typography.sizes.xl}px;
+      }
+
+      &:hover {
+        background-color: ${theme.colors.secondary.light5};
+
+        .actions {
+          opacity: 1;
+          transition: opacity ease-in ${theme.transitionTiming}s;
+        }
      }
    }
-  }

-  .table-row-selected {
-    background-color: ${({ theme }) => theme.colors.secondary.light4};
+    .table-row-selected {
+      background-color: ${theme.colors.secondary.light4};

-    &:hover {
-      background-color: ${({ theme }) => theme.colors.secondary.light4};
-    }
-  }
-
-  .table-cell {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    max-width: 320px;
-    line-height: 1;
-    vertical-align: middle;
-    &:first-of-type {
-      padding-left: ${({ theme }) => theme.gridUnit * 4}px;
-    }
-    &__wrap {
-      white-space: normal;
-    }
-    &__nowrap {
-      white-space: nowrap;
-    }
-  }
-
-  @keyframes loading-shimmer {
-    40% {
-      background-position: 100% 0;
+      &:hover {
+        background-color: ${theme.colors.secondary.light4};
+      }
    }

-    100% {
-      background-position: 100% 0;
+    .table-cell {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      max-width: 320px;
+      line-height: 1;
+      vertical-align: middle;
+      &:first-of-type {
+        padding-left: ${theme.gridUnit * 4}px;
+      }
+      &__wrap {
+        white-space: normal;
+      }
+      &__nowrap {
+        white-space: nowrap;
+      }
    }
-  }
+
+    @keyframes loading-shimmer {
+      40% {
+        background-position: 100% 0;
+      }
+
+      100% {
+        background-position: 100% 0;
+      }
+    }
+  `}
 `;

 Table.displayName = 'table';
--- a/superset-frontend/src/components/Tabs/Tabs.tsx
+++ b/superset-frontend/src/components/Tabs/Tabs.tsx
@ -96,27 +96,30 @@ const Tabs = Object.assign(StyledTabs, {
 });

 const StyledEditableTabs = styled(StyledTabs)`
-  .ant-tabs-content-holder {
-    background: white;
-  }
+  ${({ theme, fullWidth }) => `
+    .ant-tabs-content-holder {
+      background: ${theme.colors.grayscale.light5};
+    }

-  & > .ant-tabs-nav {
-    margin-bottom: 0;
-  }
+    & > .ant-tabs-nav {
+      margin-bottom: 0;
+    }

-  .ant-tabs-tab-remove {
-    padding-top: 0;
-    padding-bottom: 0;
-    height: ${({ theme }) => theme.gridUnit * 6}px;
-  }
+    .ant-tabs-tab-remove {
+      padding-top: 0;
+      padding-bottom: 0;
+      height: ${theme.gridUnit * 6}px;
+    }

-  ${({ fullWidth }) =>
-    fullWidth &&
-    css`
-      .ant-tabs-nav-list {
-        width: 100%;
-      }
-    `}
+    ${
+      fullWidth &&
+      css`
+        .ant-tabs-nav-list {
+          width: 100%;
+        }
+      `
+    }
+  `}
 `;

 const StyledCancelXIcon = styled(Icons.CancelX)`
--- a/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.jsx
+++ b/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.jsx
@ -50,21 +50,22 @@ const propTypes = {
 };

 const ActionsContainer = styled.div`
-  height: ${({ theme }) => theme.gridUnit * 16}px;
+  ${({ theme }) => `
+    height: ${theme.gridUnit * 16}px;

-  // TODO: replace hardcoded color with theme variable after refactoring filter-scope-selector.less to Emotion
-  border-top: ${({ theme }) => theme.gridUnit / 4}px solid #cfd8dc;
-  padding: ${({ theme }) => theme.gridUnit * 6}px;
-  margin: 0 0 0 ${({ theme }) => -theme.gridUnit * 6}px;
-  text-align: right;
+    border-top: ${theme.gridUnit / 4}px solid ${theme.colors.primary.light3};
+    padding: ${theme.gridUnit * 6}px;
+    margin: 0 0 0 ${-theme.gridUnit * 6}px;
+    text-align: right;

-  .btn {
-    margin-right: ${({ theme }) => theme.gridUnit * 4}px;
+    .btn {
+      margin-right: ${theme.gridUnit * 4}px;

-    &:last-child {
-      margin-right: 0;
+      &:last-child {
+        margin-right: 0;
+      }
    }
-  }
+  `}
 `;

 export default class FilterScopeSelector extends React.PureComponent {
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
@ -236,7 +236,7 @@ const StyledTabs = styled(Tabs)`
  .ant-tabs-nav {
    position: sticky;
    top: 0;
-    background: white;
+    background: ${({ theme }) => theme.colors.grayscale.light5};
    z-index: 1;
  }

--- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx
+++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx
@ -27,6 +27,7 @@ import {
  getChartMetadataRegistry,
  validateNonEmpty,
  isValidExpression,
+  withTheme,
 } from '@superset-ui/core';

 import SelectControl from 'src/explore/components/controls/SelectControl';
@ -97,7 +98,7 @@ const defaultProps = {
  close: () => {},
 };

-export default class AnnotationLayer extends React.PureComponent {
+class AnnotationLayer extends React.PureComponent {
  constructor(props) {
    super(props);
    const {
@ -710,7 +711,9 @@ export default class AnnotationLayer extends React.PureComponent {
    return (
      <>
        {this.props.error && (
-          <span style={{ color: 'red' }}>ERROR: {this.props.error}</span>
+          <span style={{ color: this.props.theme.colors.error.base }}>
+            ERROR: {this.props.error}
+          </span>
        )}
        <div style={{ display: 'flex', flexDirection: 'row' }}>
          <div style={{ marginRight: '2rem' }}>
@ -807,3 +810,5 @@ export default class AnnotationLayer extends React.PureComponent {

 AnnotationLayer.propTypes = propTypes;
 AnnotationLayer.defaultProps = defaultProps;
+
+export default withTheme(AnnotationLayer);
--- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx
+++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx
@ -141,10 +141,14 @@ class AnnotationLayerControl extends React.PureComponent {
  }

  renderInfo(anno) {
-    const { annotationError, annotationQuery } = this.props;
+    const { annotationError, annotationQuery, theme } = this.props;
    if (annotationQuery[anno.name]) {
      return (
-        <i className="fa fa-refresh" style={{ color: 'orange' }} aria-hidden />
+        <i
+          className="fa fa-refresh"
+          style={{ color: theme.colors.primary.base }}
+          aria-hidden
+        />
      );
    }
    if (annotationError[anno.name]) {
@ -157,7 +161,7 @@ class AnnotationLayerControl extends React.PureComponent {
      );
    }
    if (!anno.show) {
-      return <span style={{ color: 'red' }}> Hidden </span>;
+      return <span style={{ color: theme.colors.error.base }}> Hidden </span>;
    }
    return '';
  }
--- a/superset-frontend/src/explore/components/controls/ColorPickerControl.jsx
+++ b/superset-frontend/src/explore/components/controls/ColorPickerControl.jsx
@ -19,7 +19,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { SketchPicker } from 'react-color';
-import { getCategoricalSchemeRegistry } from '@superset-ui/core';
+import { getCategoricalSchemeRegistry, styled } from '@superset-ui/core';
 import Popover from 'src/components/Popover';
 import ControlHeader from '../ControlHeader';

@ -42,18 +42,19 @@ const swatchCommon = {
  bottom: '0px',
 };

+const StyledSwatch = styled.div`
+  ${({ theme }) => `
+      width: 50px;
+      height: 20px;
+      position: relative;
+      padding: ${theme.gridUnit}px;
+      borderRadius: ${theme.borderRadius}px;
+      display: inline-block;
+      cursor: pointer;
+    `}
+`;
+
 const styles = {
-  swatch: {
-    width: '50px',
-    height: '20px',
-    position: 'relative',
-    padding: '5px',
-    borderRadius: '1px',
-    display: 'inline-block',
-    cursor: 'pointer',
-    boxShadow:
-      'rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset',
-  },
  color: {
    ...swatchCommon,
    borderRadius: '2px',
@ -103,10 +104,10 @@ export default class ColorPickerControl extends React.Component {
          placement="right"
          content={this.renderPopover()}
        >
-          <div style={styles.swatch}>
+          <StyledSwatch>
            <div style={styles.checkboard} />
            <div style={colStyle} />
-          </div>
+          </StyledSwatch>
        </Popover>
      </div>
    );
--- a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx
+++ b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx
@ -17,7 +17,7 @@
 * under the License.
 */
 import React from 'react';
-import { styled, t } from '@superset-ui/core';
+import { styled, SupersetTheme, t, useTheme } from '@superset-ui/core';
 import { Form, FormItem, FormProps } from 'src/components/Form';
 import Select from 'src/components/Select/Select';
 import { Col, Row } from 'src/components';
@ -38,10 +38,10 @@ const JustifyEnd = styled.div`
  justify-content: flex-end;
 `;

-const colorSchemeOptions = [
-  { value: 'rgb(0,255,0)', label: t('green') },
-  { value: 'rgb(255,255,0)', label: t('yellow') },
-  { value: 'rgb(255,0,0)', label: t('red') },
+const colorSchemeOptions = (theme: SupersetTheme) => [
+  { value: theme.colors.success.light1, label: t('green') },
+  { value: theme.colors.alert.light1, label: t('yellow') },
+  { value: theme.colors.error.light1, label: t('red') },
 ];

 const operatorOptions = [
@ -187,44 +187,48 @@ export const FormattingPopoverContent = ({
  config?: ConditionalFormattingConfig;
  onChange: (config: ConditionalFormattingConfig) => void;
  columns: { label: string; value: string }[];
-}) => (
-  <Form
-    onFinish={onChange}
-    initialValues={config}
-    requiredMark="optional"
-    layout="vertical"
-  >
-    <Row gutter={12}>
-      <Col span={12}>
-        <FormItem
-          name="column"
-          label={t('Column')}
-          rules={rulesRequired}
-          initialValue={columns[0]?.value}
-        >
-          <Select ariaLabel={t('Select column')} options={columns} />
-        </FormItem>
-      </Col>
-      <Col span={12}>
-        <FormItem
-          name="colorScheme"
-          label={t('Color scheme')}
-          rules={rulesRequired}
-          initialValue={colorSchemeOptions[0].value}
-        >
-          <Select ariaLabel={t('Color scheme')} options={colorSchemeOptions} />
-        </FormItem>
-      </Col>
-    </Row>
-    <FormItem noStyle shouldUpdate={shouldFormItemUpdate}>
-      {renderOperatorFields}
-    </FormItem>
-    <FormItem>
-      <JustifyEnd>
-        <Button htmlType="submit" buttonStyle="primary">
-          {t('Apply')}
-        </Button>
-      </JustifyEnd>
-    </FormItem>
-  </Form>
-);
+}) => {
+  const theme = useTheme();
+  const colorScheme = colorSchemeOptions(theme);
+  return (
+    <Form
+      onFinish={onChange}
+      initialValues={config}
+      requiredMark="optional"
+      layout="vertical"
+    >
+      <Row gutter={12}>
+        <Col span={12}>
+          <FormItem
+            name="column"
+            label={t('Column')}
+            rules={rulesRequired}
+            initialValue={columns[0]?.value}
+          >
+            <Select ariaLabel={t('Select column')} options={columns} />
+          </FormItem>
+        </Col>
+        <Col span={12}>
+          <FormItem
+            name="colorScheme"
+            label={t('Color scheme')}
+            rules={rulesRequired}
+            initialValue={colorScheme[0].value}
+          >
+            <Select ariaLabel={t('Color scheme')} options={colorScheme} />
+          </FormItem>
+        </Col>
+      </Row>
+      <FormItem noStyle shouldUpdate={shouldFormItemUpdate}>
+        {renderOperatorFields}
+      </FormItem>
+      <FormItem>
+        <JustifyEnd>
+          <Button htmlType="submit" buttonStyle="primary">
+            {t('Apply')}
+          </Button>
+        </JustifyEnd>
+      </FormItem>
+    </Form>
+  );
+};
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
@ -114,7 +114,7 @@ const ContentStyleWrapper = styled.div`
    .control-label {
      font-size: 11px;
      font-weight: ${theme.typography.weights.medium};
-      color: #b2b2b2;
+      color: ${theme.colors.grayscale.light2};
      line-height: 16px;
      text-transform: uppercase;
      margin: 8px 0;
--- a/superset-frontend/src/explore/components/controls/TextAreaControl.jsx
+++ b/superset-frontend/src/explore/components/controls/TextAreaControl.jsx
@ -19,7 +19,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { TextArea } from 'src/components/Input';
-import { t } from '@superset-ui/core';
+import { t, withTheme } from '@superset-ui/core';

 import Button from 'src/components/Button';
 import { TextAreaEditor } from 'src/components/AsyncAceEditor';
@ -57,7 +57,7 @@ const defaultProps = {
  readOnly: false,
 };

-export default class TextAreaControl extends React.Component {
+class TextAreaControl extends React.Component {
  onControlChange(event) {
    const { value } = event.target;
    this.props.onChange(value);
@ -70,7 +70,9 @@ export default class TextAreaControl extends React.Component {
  renderEditor(inModal = false) {
    const minLines = inModal ? 40 : this.props.minLines || 12;
    if (this.props.language) {
-      const style = { border: '1px solid #CCC' };
+      const style = {
+        border: `1px solid ${this.props.theme.colors.grayscale.light1}`,
+      };
      if (this.props.readOnly) {
        style.backgroundColor = '#f2f2f2';
      }
@ -137,3 +139,5 @@ export default class TextAreaControl extends React.Component {

 TextAreaControl.propTypes = propTypes;
 TextAreaControl.defaultProps = defaultProps;
+
+export default withTheme(TextAreaControl);
--- a/superset-frontend/src/explore/components/controls/TextAreaControl.test.jsx
+++ b/superset-frontend/src/explore/components/controls/TextAreaControl.test.jsx
@ -19,7 +19,7 @@
 /* eslint-disable no-unused-expressions */
 import React from 'react';
 import sinon from 'sinon';
-import { shallow } from 'enzyme';
+import { styledMount as mount } from 'spec/helpers/theming';
 import { TextAreaEditor } from 'src/components/AsyncAceEditor';
 import { TextArea } from 'src/components/Input';

@ -34,7 +34,7 @@ const defaultProps = {
 describe('TextArea', () => {
  let wrapper;
  beforeEach(() => {
-    wrapper = shallow(<TextAreaControl {...defaultProps} />);
+    wrapper = mount(<TextAreaControl {...defaultProps} />);
  });

  it('renders a FormControl', () => {
@ -50,7 +50,7 @@ describe('TextArea', () => {
  it('renders a AceEditor when language is specified', () => {
    const props = { ...defaultProps };
    props.language = 'markdown';
-    wrapper = shallow(<TextAreaControl {...props} />);
+    wrapper = mount(<TextAreaControl {...props} />);
    expect(wrapper.find(TextArea)).not.toExist();
    expect(wrapper.find(TextAreaEditor)).toExist();
  });
@ -58,7 +58,7 @@ describe('TextArea', () => {
  it('calls onAreaEditorChange when entering in the AceEditor', () => {
    const props = { ...defaultProps };
    props.language = 'markdown';
-    wrapper = shallow(<TextAreaControl {...props} />);
+    wrapper = mount(<TextAreaControl {...props} />);
    wrapper.simulate('change', { target: { value: 'x' } });
    expect(defaultProps.onChange.calledWith('x')).toBe(true);
  });
--- a/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx
@ -324,7 +324,7 @@ const SavedQueries = ({
                        language="sql"
                        lineProps={{
                          style: {
-                            color: 'black',
+                            color: theme.colors.grayscale.dark2,
                            wordBreak: 'break-all',
                            whiteSpace: 'pre-wrap',
                          },
--- a/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx
+++ b/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx
@ -241,10 +241,10 @@ const TimeTable = ({
        <span
          key={column.key}
          data-value={v}
-          style={
+          css={theme =>
            color && {
              boxShadow: `inset 0px -2.5px 0px 0px ${color}`,
-              borderRight: '2px solid #fff',
+              borderRight: `2px solid ${theme.colors.grayscale.light5}`,
            }
          }
        >