style(Button): change 'secondary' variant to 'outlined' and add 'ghost' to 'tertiary' variant

superset-frontend/.storybook/preview.jsx

@@ -77,7 +77,7 @@ const themeDecorator = (Story, context) => {
             minHeight: '100vh',
             width: '100%',
             padding: 24,
-            backgroundColor: themeObject.theme.colorBgBase,
+            backgroundColor: themeObject.theme.colorBgContainer,
           }}
         >
           <Story {...context} />

superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx

@@ -24,7 +24,7 @@ import { css, styled, useTheme, t } from '@superset-ui/core';
 
 const StyledCalculatorIcon = styled(CalculatorOutlined)`
   ${({ theme }) => css`
-    color: ${theme.colors.grayscale.base};
+    color: ${theme.colorText};
     font-size: ${theme.fontSizeSM}px;
     & svg {
       margin-left: ${theme.sizeUnit}px;

superset-frontend/packages/superset-ui-core/src/chart/components/FallbackComponent.tsx

@@ -27,8 +27,8 @@ export default function FallbackComponent({ error, height, width }: Props) {
   return (
     <div
       css={(theme: SupersetTheme) => ({
-        backgroundColor: theme.colors.grayscale.dark2,
+        backgroundColor: theme.colorTextBase,
-        color: theme.colors.grayscale.light5,
+        color: theme.colorBgContainer,
         overflow: 'auto',
         padding: 32,
       })}

superset-frontend/packages/superset-ui-core/src/components/Button/index.tsx

@@ -65,16 +65,18 @@ export function Button(props: ButtonProps) {
   let antdType: ButtonType = 'default';
   let variant: ButtonVariantType = 'solid';
   let color: ButtonColorType = 'primary';
+  let ghost: boolean = false;
 
   if (!buttonStyle || buttonStyle === 'primary') {
     variant = 'solid';
     antdType = 'primary';
   } else if (buttonStyle === 'secondary') {
-    variant = 'filled';
+    variant = 'outlined';
     color = 'primary';
   } else if (buttonStyle === 'tertiary') {
     variant = 'outlined';
     color = 'default';
+    ghost = true;
   } else if (buttonStyle === 'dashed') {
     variant = 'dashed';
     antdType = 'dashed';
@@ -100,6 +102,7 @@ export function Button(props: ButtonProps) {
 
   const button = (
     <AntdButton
+      ghost={ghost}
       href={disabled ? undefined : href}
       disabled={disabled}
       type={antdType}

superset-frontend/packages/superset-ui-core/src/components/Checkbox/CheckboxIcons.tsx

@@ -52,7 +52,7 @@ export const CheckboxHalfChecked = () => {
     >
       <path
         d="M16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0Z"
-        fill={theme.colors.grayscale.light1}
+        fill={theme.colorBorder}
       />
       <path d="M14 10H4V8H14V10Z" fill="white" />
     </svg>
@@ -71,7 +71,7 @@ export const CheckboxUnchecked = () => {
     >
       <path
         d="M16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0Z"
-        fill={theme.colors.grayscale.light2}
+        fill={theme.colorBorderSecondary}
       />
       <path d="M16 2V16H2V2H16V2Z" fill="white" />
     </svg>

superset-frontend/packages/superset-ui-core/src/components/DeleteModal/index.tsx

@@ -27,7 +27,7 @@ const StyledDiv = styled.div`
   padding-top: 8px;
   width: 50%;
   label {
-    color: ${({ theme }) => theme.colors.grayscale.base};
+    color: ${({ theme }) => theme.colorText};
   }
 `;
 

superset-frontend/packages/superset-ui-core/src/components/Dropdown/index.tsx

@@ -31,7 +31,7 @@ const MenuDots = styled.div`
   width: ${({ theme }) => theme.sizeUnit * 0.75}px;
   height: ${({ theme }) => theme.sizeUnit * 0.75}px;
   border-radius: 50%;
-  background-color: ${({ theme }) => theme.colors.grayscale.light1};
+  background-color: ${({ theme }) => theme.colorBorder};
 
   font-weight: ${({ theme }) => theme.fontWeightNormal};
   display: inline-flex;
@@ -53,7 +53,7 @@ const MenuDots = styled.div`
     width: ${({ theme }) => theme.sizeUnit * 0.75}px;
     height: ${({ theme }) => theme.sizeUnit * 0.75}px;
     border-radius: 50%;
-    background-color: ${({ theme }) => theme.colors.grayscale.light1};
+    background-color: ${({ theme }) => theme.colorBorder};
   }
 
   &::before {

superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/index.tsx

@@ -398,13 +398,13 @@ export const DropdownContainer = forwardRef(
                   }
                   ::-webkit-scrollbar-thumb {
                     border-radius: 9px;
-                    background-color: ${theme.colors.grayscale.light1};
+                    background-color: ${theme.colorBorder};
                     border: 3px solid transparent;
                     background-clip: content-box;
                   }
                   ::-webkit-scrollbar-track {
-                    background-color: ${theme.colors.grayscale.light4};
+                    background-color: ${theme.colorBgContainer};
-                    border-left: 1px solid ${theme.colors.grayscale.light2};
+                    border-left: 1px solid ${theme.colorBorderSecondary};
                   }
                 }
               `}
@@ -436,7 +436,7 @@ export const DropdownContainer = forwardRef(
                     color={
                       (dropdownTriggerCount ?? overflowingCount) > 0
                         ? theme.colorPrimary
-                        : theme.colors.grayscale.light1
+                        : theme.colorBorder
                     }
                     showZero
                     css={css`
@@ -445,7 +445,7 @@ export const DropdownContainer = forwardRef(
                   />
                   <Icons.DownOutlined
                     iconSize="m"
-                    iconColor={theme.colors.grayscale.light1}
+                    iconColor={theme.colorBorder}
                     css={css`
                       .anticon {
                         display: flex;

superset-frontend/packages/superset-ui-core/src/components/ListViewCard/index.tsx

@@ -53,7 +53,7 @@ const StyledCard = styled(Card)`
 
 const Cover = styled.div`
   height: 264px;
-  border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+  border-bottom: 1px solid ${({ theme }) => theme.colorBorderSecondary};
   overflow: hidden;
 
   .cover-footer {

superset-frontend/packages/superset-ui-core/src/components/Metadata/index.tsx

@@ -30,7 +30,7 @@ const MetadataWrapper = styled.div`
 
 const MetadataText = styled.span`
   font-size: ${({ theme }) => theme.fontSizeXS}px;
-  color: ${({ theme }) => theme.colors.grayscale.light1};
+  color: ${({ theme }) => theme.colorBorder};
   font-weight: ${({ theme }) => theme.fontWeightStrong};
 `;
 

superset-frontend/packages/superset-ui-core/src/components/PopoverDropdown/index.tsx

@@ -60,12 +60,12 @@ const menuItemStyles = (theme: any) => css`
     }
 
     &:hover {
-      background: ${theme.colors.grayscale.light3};
+      background: ${theme.colorFill};
     }
 
     &.active {
       font-weight: ${theme.fontWeightStrong};
-      background: ${theme.colors.grayscale.light2};
+      background: ${theme.colorBorderSecondary};
     }
   }
 

superset-frontend/packages/superset-ui-core/src/components/PopoverSection/index.tsx

@@ -66,16 +66,14 @@ export default function PopoverSection({
             <Icons.InfoCircleOutlined
               role="img"
               iconSize="s"
-              iconColor={theme.colors.grayscale.light1}
+              iconColor={theme.colorBorder}
             />
           </Tooltip>
         )}
         <Icons.CheckOutlined
           iconSize="s"
           role="img"
-          iconColor={
+          iconColor={isSelected ? theme.colorPrimary : theme.colorText}
-            isSelected ? theme.colorPrimary : theme.colors.grayscale.base
-          }
         />
       </div>
       <div

superset-frontend/packages/superset-ui-core/src/components/RefreshLabel/index.tsx

@@ -45,7 +45,7 @@ const RefreshLabel = ({
         onClick={disabled ? undefined : onClick}
         css={(theme: SupersetTheme) => ({
           cursor: 'pointer',
-          color: theme.colors.grayscale.base,
+          color: theme.colorText,
           '&:hover': { color: theme.colorPrimary },
         })}
       />

superset-frontend/packages/superset-ui-core/src/components/Select/styles.tsx

@@ -103,17 +103,17 @@ export const StyledLoadingText = styled.div`
   ${({ theme }) => `
    margin-left: ${theme.sizeUnit * 3}px;
    line-height: ${theme.sizeUnit * 8}px;
-   color: ${theme.colors.grayscale.light1};
+   color: ${theme.colorBorder};
  `}
 `;
 
 export const StyledHelperText = styled.div`
   ${({ theme }) => `
    padding: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 3}px;
-   color: ${theme.colors.grayscale.base};
+   color: ${theme.colorText};
    font-size: ${theme.fontSizeSM}px;
    cursor: default;
-   border-bottom: 1px solid ${theme.colors.grayscale.light2};
+   border-bottom: 1px solid ${theme.colorBorderSecondary};
  `}
 `;
 
@@ -139,6 +139,6 @@ export const StyledErrorMessage = styled.div`
 export const StyledBulkActionsContainer = styled(Flex)`
   ${({ theme }) => `
     padding: ${theme.sizeUnit}px;
-    border-top: 1px solid ${theme.colors.grayscale.light3};
+    border-top: 1px solid ${theme.colorFill};
   `}
 `;

superset-frontend/packages/superset-ui-core/src/components/Table/cell-renderers/NullCell/index.tsx

@@ -20,7 +20,7 @@ import { styled } from '../../../..';
 import { Constants } from '../../..';
 
 const GrayCell = styled.span`
-  color: ${({ theme }) => theme.colors.grayscale.light1};
+  color: ${({ theme }) => theme.colorBorder};
 `;
 
 function NullCell() {

superset-frontend/packages/superset-ui-core/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx

@@ -74,7 +74,7 @@ function HeaderWithRadioGroup(props: HeaderWithRadioGroupProps) {
       >
         <Icons.SettingOutlined
           iconSize="m"
-          iconColor={theme.colors.grayscale.light1}
+          iconColor={theme.colorBorder}
           css={css`
             margin-top: ${theme.sizeUnit * 0.75}px;
             margin-right: ${theme.sizeUnit}px;

superset-frontend/packages/superset-ui-core/src/components/Tabs/Tabs.tsx

@@ -83,7 +83,7 @@ const Tabs = Object.assign(StyledTabs, {
 const StyledEditableTabs = styled(StyledTabs)`
   ${({ theme }) => `
     .ant-tabs-content-holder {
-      background: ${theme.colors.grayscale.light5};
+      background: ${theme.colorBgContainer};
     }
 
     & > .ant-tabs-nav {
@@ -99,7 +99,7 @@ const StyledEditableTabs = styled(StyledTabs)`
 `;
 
 const StyledCloseOutlined = styled(Icons.CloseOutlined)`
-  color: ${({ theme }) => theme.colors.grayscale.base};
+  color: ${({ theme }) => theme.colorText};
 `;
 export const EditableTabs = Object.assign(StyledEditableTabs, {
   TabPane: StyledTabPane,

superset-frontend/packages/superset-ui-core/src/components/TruncatedList/index.tsx

@@ -79,7 +79,7 @@ const StyledVisibleItem = styled.span`
 
 const StyledTooltipItem = styled.div`
   .link {
-    color: ${({ theme }) => theme.colors.grayscale.light5};
+    color: ${({ theme }) => theme.colorBgContainer};
     display: block;
     text-decoration: underline;
   }

superset-frontend/packages/superset-ui-core/src/theme/GlobalStyles.tsx

@@ -32,7 +32,7 @@ export const GlobalStyles = () => {
         }
 
         body {
-          background-color: ${theme.colorBgBase};
+          background-color: ${theme.colorBgContainer};
           color: ${theme.colorText};
           -webkit-font-smoothing: antialiased;
           margin: 0;

superset-frontend/packages/superset-ui-demo/storybook/shared/components/ResizableChartDemo.tsx

@@ -24,7 +24,7 @@ import { ResizeCallbackData } from 'react-resizable';
 import ResizablePanel, { Size } from './ResizablePanel';
 
 export const SupersetBody = styled.div`
-  background: ${({ theme }) => theme.colors.grayscale.light4};
+  background: ${({ theme }) => theme.colorBgContainer};
   padding: 16px;
   min-height: 100%;
 

superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-country-map/CountryMap.stories.tsx

@@ -84,7 +84,7 @@ export const BasicCountryMapStory = (
     return (
       <div
         style={{
-          color: theme.colors.grayscale.base,
+          color: theme.colorText,
           textAlign: 'center',
           padding: 20,
         }}

superset-frontend/plugins/legacy-plugin-chart-calendar/src/Calendar.js

@@ -124,7 +124,7 @@ function Calendar(element, props) {
         colorScale,
         min: legendColors[0],
         max: legendColors[legendColors.length - 1],
-        empty: theme.colors.grayscale.light5,
+        empty: theme.colorBgContainer,
       },
       displayLegend: showLegend,
       itemName: '',

superset-frontend/plugins/legacy-plugin-chart-calendar/src/ReactCalendar.jsx

@@ -32,8 +32,8 @@ const Calendar = ({ className, ...otherProps }) => {
           .d3-tip {
             line-height: 1;
             padding: ${theme.sizeUnit * 3}px;
-            background: ${theme.colors.grayscale.dark2};
+            background: ${theme.colorTextBase};
-            color: ${theme.colors.grayscale.light5};
+            color: ${theme.colorBgContainer};
             border-radius: 4px;
             pointer-events: none;
             z-index: 1000;
@@ -46,7 +46,7 @@ const Calendar = ({ className, ...otherProps }) => {
             font-size: ${theme.fontSizeXS};
             width: 100%;
             line-height: 1;
-            color: ${theme.colors.grayscale.dark2};
+            color: ${theme.colorTextBase};
             position: absolute;
             pointer-events: none;
           }
@@ -112,8 +112,8 @@ export default styled(Calendar)`
     .superset-legacy-chart-calendar .d3-tip {
       line-height: 1;
       padding: ${theme.sizeUnit * 3}px;
-      background: ${theme.colors.grayscale.dark2};
+      background: ${theme.colorTextBase};
-      color: ${theme.colors.grayscale.light5};
+      color: ${theme.colorBgContainer};
       border-radius: ${theme.borderRadius}px;
       pointer-events: none;
       z-index: 1000;
@@ -124,7 +124,7 @@ export default styled(Calendar)`
     }
 
     .cal-heatmap-container .graph-label {
-      fill: ${theme.colors.grayscale.base};
+      fill: ${theme.colorText};
       font-size: ${theme.fontSizeXS}px;
     }
 
@@ -134,11 +134,11 @@ export default styled(Calendar)`
     }
 
     .cal-heatmap-container .graph-rect {
-      fill: ${theme.colors.grayscale.light2};
+      fill: ${theme.colorBorderSecondary};
     }
 
     .cal-heatmap-container .graph-subdomain-group rect:hover {
-      stroke: ${theme.colors.grayscale.dark2};
+      stroke: ${theme.colorTextBase};
       stroke-width: 1px;
     }
 
@@ -152,88 +152,88 @@ export default styled(Calendar)`
     }
 
     .cal-heatmap-container .qi {
-      background-color: ${theme.colors.grayscale.base};
+      background-color: ${theme.colorText};
-      fill: ${theme.colors.grayscale.base};
-    }
-
-    .cal-heatmap-container .q1 {
-      background-color: ${theme.colors.warning.light2};
-      fill: ${theme.colors.warning.light2};
-    }
-
-    .cal-heatmap-container .q2 {
-      background-color: ${theme.colors.warning.light1};
-      fill: ${theme.colors.warning.light1};
-    }
-
-    .cal-heatmap-container .q3 {
-      background-color: ${theme.colors.success.light1};
-      fill: ${theme.colors.success.light1};
-    }
-
-    .cal-heatmap-container .q4 {
-      background-color: ${theme.colorSuccess};
-      fill: ${theme.colorSuccess};
-    }
-
-    .cal-heatmap-container .q5 {
-      background-color: ${theme.colors.success.dark1};
-      fill: ${theme.colors.success.dark1};
-    }
-
-    .cal-heatmap-container rect.highlight {
-      stroke: ${theme.colorText};
-      stroke-width: 1;
-    }
-
-    .cal-heatmap-container text.highlight {
       fill: ${theme.colorText};
     }
 
-    .cal-heatmap-container rect.highlight-now {
+    .cal-heatmap-container .q1 {
-      stroke: ${theme.colorError};
+      background-color: ${theme.colorError};
-    }
-
-    .cal-heatmap-container text.highlight-now {
       fill: ${theme.colorError};
-      font-weight: ${theme.fontWeightStrong};
     }
 
-    .cal-heatmap-container .domain-background {
+    .cal-heatmap-container .q2 {
-      fill: none;
+      background-color: ${theme.colorError};
-      shape-rendering: crispedges;
+      fill: ${theme.colorError};
     }
 
-    .ch-tooltip {
+    .cal-heatmap-container .q3 {
-      padding: ${theme.sizeUnit * 2}px;
+      background-color: ${theme.colorSuccessHover};
-      background: ${theme.colorText};
+      fill: ${theme.colorSuccessHover};
-      color: ${theme.colors.grayscale.light1};
-      font-size: ${theme.fontSizeSM}px;
-      line-height: 1.4;
-      width: 140px;
-      position: absolute;
-      z-index: 99999;
-      text-align: center;
-      border-radius: ${theme.borderRadius}px;
-      box-shadow: 2px 2px 2px ${theme.colors.grayscale.dark2};
-      display: none;
-      box-sizing: border-box;
     }
 
-    .ch-tooltip::after {
+    .cal - heatmap - container.q4 {
-      position: absolute;
+  background - color: ${theme.colorSuccess};
-      width: 0;
+  fill: ${theme.colorSuccess};
-      height: 0;
+}
-      border-color: transparent;
+
-      border-style: solid;
+    .cal - heatmap - container.q5 {
-      content: '';
+  background - color: ${theme.colorSuccessActive};
-      padding: 0;
+  fill: ${theme.colorSuccessActive};
-      display: block;
+}
-      bottom: -${theme.sizeUnit}px;
+
-      left: 50%;
+    .cal - heatmap - container rect.highlight {
-      margin-left: -${theme.sizeUnit}px;
+  stroke: ${theme.colorText};
-      border-width: ${theme.sizeUnit}px ${theme.sizeUnit}px 0;
+  stroke - width: 1;
-      border-top-color: ${theme.colorSplit};
+}
-    }
+
-  `}
+    .cal - heatmap - container text.highlight {
+  fill: ${theme.colorText};
+}
+
+    .cal - heatmap - container rect.highlight - now {
+  stroke: ${theme.colorError};
+}
+
+    .cal - heatmap - container text.highlight - now {
+  fill: ${theme.colorError};
+  font - weight: ${theme.fontWeightStrong};
+}
+
+    .cal - heatmap - container.domain - background {
+  fill: none;
+  shape - rendering: crispedges;
+}
+
+    .ch - tooltip {
+  padding: ${theme.sizeUnit * 2} px;
+  background: ${theme.colorText};
+  color: ${theme.colorBorder};
+  font - size: ${theme.fontSizeSM} px;
+  line - height: 1.4;
+  width: 140px;
+  position: absolute;
+  z - index: 99999;
+  text - align: center;
+  border - radius: ${theme.borderRadius} px;
+  box - shadow: 2px 2px 2px ${theme.colorTextBase};
+  display: none;
+  box - sizing: border - box;
+}
+
+    .ch - tooltip::after {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border - color: transparent;
+  border - style: solid;
+  content: '';
+  padding: 0;
+  display: block;
+  bottom: -${theme.sizeUnit} px;
+  left: 50 %;
+  margin - left: -${theme.sizeUnit} px;
+  border - width: ${theme.sizeUnit}px ${theme.sizeUnit}px 0;
+  border - top - color: ${theme.colorSplit};
+}
+`}
 `;

superset-frontend/plugins/legacy-plugin-chart-country-map/src/ReactCountryMap.jsx

@@ -30,7 +30,7 @@ const CountryMap = ({ className, ...otherProps }) => (
 export default styled(CountryMap)`
   ${({ theme }) => `
     .superset-legacy-chart-country-map svg {
-      background-color: ${theme.colors.grayscale.light5};
+      background-color: ${theme.colorBgContainer};
     }
 
     .superset-legacy-chart-country-map {
@@ -38,13 +38,13 @@ export default styled(CountryMap)`
     }
 
     .superset-legacy-chart-country-map .background {
-      fill: ${theme.colors.grayscale.light5};
+      fill: ${theme.colorBgContainer};
       pointer-events: all;
     }
 
     .superset-legacy-chart-country-map .map-layer {
-      fill: ${theme.colors.grayscale.light5};
+      fill: ${theme.colorBgContainer};
-      stroke: ${theme.colors.grayscale.light1};
+      stroke: ${theme.colorBorder};
     }
 
     .superset-legacy-chart-country-map .effect-layer {
@@ -69,7 +69,7 @@ export default styled(CountryMap)`
 
     .superset-legacy-chart-country-map path.region {
       cursor: pointer;
-      stroke: ${theme.colors.grayscale.light2};
+      stroke: ${theme.colorBorderSecondary};
     }
   `}
 `;

superset-frontend/plugins/legacy-plugin-chart-horizon/src/HorizonChart.jsx

@@ -65,7 +65,7 @@ const StyledDiv = styled.div`
     }
 
     .superset-legacy-chart-horizon .horizon-row {
-      border-bottom: solid 1px ${theme.colors.grayscale.light2};
+      border-bottom: solid 1px ${theme.colorBorderSecondary};
       border-top: 0;
       padding: 0;
       margin: 0;

superset-frontend/plugins/legacy-plugin-chart-paired-t-test/src/PairedTTest.jsx

@@ -70,7 +70,7 @@ const StyledDiv = styled.div`
     }
 
     .reactable-data tr:hover {
-      background-color: ${theme.colors.grayscale.light3};
+      background-color: ${theme.colorFill};
     }
 
     .reactable-data tr .false {
@@ -90,14 +90,14 @@ const StyledDiv = styled.div`
     }
 
     .reactable-data .control td {
-      background-color: ${theme.colors.grayscale.light3};
+      background-color: ${theme.colorFill};
     }
 
     .reactable-header-sortable:hover,
     .reactable-header-sortable:focus,
     .reactable-header-sort-asc,
     .reactable-header-sort-desc {
-      background-color: ${theme.colors.grayscale.light3};
+      background-color: ${theme.colorFill};
       position: relative;
     }
 

superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ReactParallelCoordinates.jsx

@@ -39,7 +39,7 @@ export default styled(ParallelCoordinates)`
         overflow: auto;
         div.row {
           &:hover {
-            background-color: ${theme.colors.grayscale.light2};
+            background-color: ${theme.colorBorderSecondary};
           }
         }
       }
@@ -62,14 +62,14 @@ export default styled(ParallelCoordinates)`
       fill: transparent;
     }
     .parcoords rect.background:hover {
-      fill: ${addAlpha(theme.colors.grayscale.base, 0.2)};
+      fill: ${addAlpha(theme.colorText, 0.2)};
     }
     .parcoords .resize rect {
-      fill: ${addAlpha(theme.colors.grayscale.dark2, 0.1)};
+      fill: ${addAlpha(theme.colorTextBase, 0.1)};
     }
     .parcoords rect.extent {
-      fill: ${addAlpha(theme.colors.grayscale.light5, 0.25)};
+      fill: ${addAlpha(theme.colorBgContainer, 0.25)};
-      stroke: ${addAlpha(theme.colors.grayscale.dark2, 0.6)};
+      stroke: ${addAlpha(theme.colorTextBase, 0.6)};
     }
     .parcoords .axis line,
     .parcoords .axis path {
@@ -93,7 +93,7 @@ export default styled(ParallelCoordinates)`
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none;
-      background-color: ${theme.colors.grayscale.light5};
+      background-color: ${theme.colorBgContainer};
     }
 
     /* data table styles */
@@ -106,7 +106,7 @@ export default styled(ParallelCoordinates)`
       margin: 0px;
     }
     .parcoords .row:nth-of-type(odd) {
-      background: ${addAlpha(theme.colors.grayscale.dark2, 0.05)};
+      background: ${addAlpha(theme.colorTextBase, 0.05)};
     }
     .parcoords .header {
       font-weight: ${theme.fontWeightStrong};

superset-frontend/plugins/legacy-plugin-chart-partition/src/ReactPartition.jsx

@@ -40,8 +40,8 @@ export default styled(Partition)`
     }
 
     .superset-legacy-chart-partition rect {
-      stroke: ${theme.colors.grayscale.light2};
+      stroke: ${theme.colorBorderSecondary};
-      fill: ${theme.colors.grayscale.light1};
+      fill: ${theme.colorBorder};
       fill-opacity: 80%;
       transition: fill-opacity 180ms linear;
       cursor: pointer;
@@ -57,7 +57,7 @@ export default styled(Partition)`
     }
 
     .superset-legacy-chart-partition g:hover text {
-      fill: ${theme.colors.grayscale.dark2};
+      fill: ${theme.colorTextBase};
     }
 
     .superset-legacy-chart-partition .partition-tooltip {
@@ -67,14 +67,14 @@ export default styled(Partition)`
       opacity: 0;
       padding: ${theme.sizeUnit}px;
       pointer-events: none;
-      background-color: ${theme.colors.grayscale.dark2};
+      background-color: ${theme.colorTextBase};
       border-radius: ${theme.borderRadius}px;
     }
 
     .partition-tooltip td {
       padding-left: ${theme.sizeUnit}px;
       font-size: ${theme.fontSizeSM}px;
-      color: ${theme.colors.grayscale.light5};
+      color: ${theme.colorBgContainer};
     }
   `}
 `;

superset-frontend/plugins/legacy-plugin-chart-rose/src/ReactRose.jsx

@@ -29,8 +29,8 @@ const Rose = ({ className, ...otherProps }) => (
         .tooltip {
           line-height: 1;
           padding: ${theme.sizeUnit * 3}px;
-          background: ${theme.colors.grayscale.dark2};
+          background: ${theme.colorTextBase};
-          color: ${theme.colors.grayscale.light5};
+          color: ${theme.colorBgContainer};
           border-radius: 4px;
           pointer-events: none;
           z-index: 1000;
@@ -46,7 +46,7 @@ export default styled(Rose)`
   ${({ theme }) => `
     .superset-legacy-chart-rose path {
         transition: fill-opacity 180ms linear;
-        stroke: ${theme.colors.grayscale.light5};
+        stroke: ${theme.colorBgContainer};
         stroke-width: 1px;
         stroke-opacity: 1;
         fill-opacity: 0.75;

superset-frontend/plugins/legacy-plugin-chart-world-map/src/ReactWorldMap.jsx

@@ -39,7 +39,7 @@ export default styled(WorldMapComponent)`
   .superset-legacy-chart-world-map {
     position: relative;
     svg {
-      background-color: ${({ theme }) => theme.colors.grayscale.light5};
+      background-color: ${({ theme }) => theme.colorBgContainer};
     }
   }
   .hoverinfo {

superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js

@@ -203,14 +203,14 @@ function WorldMap(element, props) {
     height,
     data: processedData,
     fills: {
-      defaultFill: theme.colors.grayscale.light2,
+      defaultFill: theme.colorBorderSecondary,
     },
     geographyConfig: {
       popupOnHover: !inContextMenu,
       highlightOnHover: !inContextMenu,
       borderWidth: 1,
       borderColor: theme.colorSplit,
-      highlightBorderColor: theme.colors.grayscale.light5,
+      highlightBorderColor: theme.colorBgContainer,
       highlightFillColor: color,
       highlightBorderWidth: 1,
       popupTemplate: (geo, d) =>
@@ -232,7 +232,7 @@ function WorldMap(element, props) {
       animate: true,
       highlightOnHover: !inContextMenu,
       highlightFillColor: color,
-      highlightBorderColor: theme.colors.grayscale.dark2,
+      highlightBorderColor: theme.colorText,
       highlightBorderWidth: 2,
       highlightBorderOpacity: 1,
       highlightFillOpacity: 0.85,

superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Legend.tsx

@@ -27,8 +27,8 @@ const StyledLegend = styled.div`
   ${({ theme }) => `
     font-size: ${theme.fontSizeSM}px;
     position: absolute;
-    background: ${theme.colors.grayscale.light5};
+    background: ${theme.colorBgContainer};
-    box-shadow: 0 0 ${theme.sizeUnit}px ${theme.colors.grayscale.light2};
+    box-shadow: 0 0 ${theme.sizeUnit}px ${theme.colorBorderSecondary};
     margin: ${theme.sizeUnit * 6}px;
     padding: ${theme.sizeUnit * 3}px ${theme.sizeUnit * 5}px;
     outline: none;
@@ -42,7 +42,7 @@ const StyledLegend = styled.div`
 
       & li a {
         display: flex;
-        color: ${theme.colors.grayscale.base};
+        color: ${theme.colorText};
         text-decoration: none;
         padding: ${theme.sizeUnit}px 0;
 

superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Tooltip.tsx

@@ -38,8 +38,8 @@ const StyledDiv = styled.div<{ top: number; left: number }>`
     left: ${left}px;
     padding: ${theme.sizeUnit * 2}px;
     margin: ${theme.sizeUnit * 2}px;
-    background: ${theme.colors.grayscale.dark2};
+    background: ${theme.colorTextBase};
-    color: ${theme.colors.grayscale.light5};
+    color: ${theme.colorBgContainer};
     maxWidth: 300px;
     fontSize: ${theme.fontSizeSM}px;
     zIndex: 9;

superset-frontend/plugins/legacy-preset-chart-nvd3/src/ReactNVD3.jsx

@@ -164,15 +164,15 @@ export default styled(NVD3)`
   .d3-tip.nv-event-annotation-layer-NATIVE {
     width: 200px;
     border-radius: 2px;
-    background-color: ${({ theme }) => theme.colors.grayscale.base};
+    background-color: ${({ theme }) => theme.colorText};
     fill-opacity: 0.6;
     margin: ${({ theme }) => theme.sizeUnit * 2}px;
     padding: ${({ theme }) => theme.sizeUnit * 2}px;
-    color: ${({ theme }) => theme.colors.grayscale.light5};
+    color: ${({ theme }) => theme.colorBgContainer};
     &:after {
       content: '\\25BC';
       font-size: ${({ theme }) => theme.fontSize};
-      color: ${({ theme }) => theme.colors.grayscale.base};
+      color: ${({ theme }) => theme.colorText};
       position: absolute;
       bottom: -14px;
       left: 94px;

superset-frontend/plugins/plugin-chart-ag-grid-table/src/styles/index.tsx

@@ -130,13 +130,13 @@ export const MenuContainer = styled.div`
       gap: ${theme.sizeUnit * 2}px;
 
       &:hover {
-        background-color: ${theme.colors.primary.light4};
+        background-color: ${theme.colorBgContainer};
       }
     }
 
     .menu-divider {
       height: 1px;
-      background-color: ${theme.colors.grayscale.light2};
+      background-color: ${theme.colorBorderSecondary};
       margin: ${theme.sizeUnit}px 0;
     }
   `}
@@ -165,16 +165,16 @@ export const PopoverContainer = styled.div`
 
 export const PaginationContainer = styled.div`
   ${({ theme }) => `
-    border: 1px solid ${theme.colors.grayscale.light2};
+    border: 1px solid ${theme.colorBorderSecondary};
     display: flex;
     align-items: center;
     justify-content: flex-end;
     padding: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 4}px;
-    border-top: 1px solid ${theme.colors.grayscale.light2};
+    border-top: 1px solid ${theme.colorBorderSecondary};
     font-size: ${theme.fontSize}px;
     color: ${theme.colorTextBase};
     transform: translateY(-${theme.sizeUnit}px);
-    background: ${theme.colorBgBase};
+    background: ${theme.colorBgContainer};
   `}
 `;
 
@@ -222,7 +222,7 @@ export const PageButton = styled.div<{ disabled?: boolean }>`
     svg {
       height: ${theme.sizeUnit * 3}px;
       width: ${theme.sizeUnit * 3}px;
-      fill: ${disabled ? theme.colors.grayscale.light1 : theme.colors.grayscale.dark2};
+      fill: ${disabled ? theme.colorBorder : theme.colorTextBase};
     }
   `}
 `;
@@ -239,14 +239,14 @@ export const InfoText = styled.div`
   max-width: 242px;
   ${({ theme }) => `
     padding: 0 ${theme.sizeUnit * 2}px;
-    color: ${theme.colors.grayscale.base};
+    color: ${theme.colorText};
     font-size: ${theme.fontSizeSM}px;
   `}
 `;
 
 export const ColumnLabel = styled.span`
   ${({ theme }) => `
-    color: ${theme.colors.grayscale.dark2};
+    color: ${theme.colorText};
   `}
 `;
 
@@ -279,9 +279,9 @@ export const StyledChartContainer = styled.div<{
   ${({ theme, height }) => css`
     height: ${height}px;
 
-    --ag-background-color: ${theme.colorBgBase};
+    --ag-background-color: ${theme.colorBgContainer};
     --ag-foreground-color: ${theme.colorText};
-    --ag-header-background-color: ${theme.colorBgBase};
+    --ag-header-background-color: ${theme.colorBgContainer};
     --ag-header-foreground-color: ${theme.colorText};
 
     .dt-is-filter {
@@ -292,7 +292,7 @@ export const StyledChartContainer = styled.div<{
     }
 
     .dt-is-active-filter {
-      background: ${theme.colors.primary.light3};
+      background: ${theme.colorBgLayout};
       :hover {
         background-color: ${theme.colorPrimaryBgHover};
       }
@@ -379,7 +379,7 @@ export const StyledChartContainer = styled.div<{
     .input-wrapper svg {
       pointer-events: none;
       transform: translate(${theme.sizeUnit * 7}px, ${theme.sizeUnit / 2}px);
-      color: ${theme.colors.grayscale.base};
+      color: ${theme.colorText};
     }
 
     .input-wrapper input {
@@ -389,16 +389,16 @@ export const StyledChartContainer = styled.div<{
         ${theme.sizeUnit * 1.5}px ${theme.sizeUnit * 8}px;
       line-height: 1.8;
       border-radius: ${theme.borderRadius}px;
-      border: 1px solid ${theme.colors.grayscale.light2};
+      border: 1px solid ${theme.colorBorderSecondary};
       background-color: transparent;
       outline: none;
 
       &:focus {
-        border-color: ${theme.colors.primary.base};
+        border-color: ${theme.colorPrimary};
       }
 
       &::placeholder {
-        color: ${theme.colors.grayscale.light1};
+        color: ${theme.colorBorder};
       }
     }
   `}

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx

@@ -169,7 +169,7 @@ export default function PopKPI(props: PopKPIProps) {
 
   const getArrowIndicatorColor = () => {
     if (!comparisonColorEnabled || percentDifferenceNumber === 0) {
-      return theme.colors.grayscale.base;
+      return theme.colorText;
     }
 
     if (percentDifferenceNumber > 0) {
@@ -190,7 +190,7 @@ export default function PopKPI(props: PopKPIProps) {
   `;
 
   const defaultBackgroundColor = theme.colorBgContainer;
-  const defaultTextColor = theme.colors.grayscale.base;
+  const defaultTextColor = theme.colorText;
   const { backgroundColor, textColor } = useMemo(() => {
     let bgColor = defaultBackgroundColor;
     let txtColor = defaultTextColor;

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts

@@ -249,7 +249,7 @@ export default function transformProps(
                 },
                 {
                   offset: 1,
-                  color: theme.colors.grayscale.light5,
+                  color: theme.colorBgContainer,
                 },
               ]),
             },

superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts

@@ -228,7 +228,7 @@ export default function transformProps(
     formatter,
     show: showLabels,
     color: theme.colorText,
-    textBorderColor: theme.colorBgBase,
+    textBorderColor: theme.colorBgContainer,
     textBorderWidth: 1,
   };
 

superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts

@@ -220,7 +220,7 @@ export default function transformProps(
         name: otherName,
         value: otherSum,
         itemStyle: {
-          color: theme.colors.grayscale.dark1,
+          color: theme.colorTextSecondary,
           opacity:
             filterState.selectedValues &&
             !filterState.selectedValues.includes(otherName)
@@ -368,7 +368,7 @@ export default function transformProps(
   const defaultLabel = {
     formatter,
     show: showLabels,
-    color: theme.colors.grayscale.dark2,
+    color: theme.colorText,
   };
 
   const chartPadding = getChartPadding(
@@ -403,7 +403,7 @@ export default function transformProps(
         label: {
           show: true,
           fontWeight: 'bold',
-          backgroundColor: theme.colors.grayscale.light5,
+          backgroundColor: theme.colorBgContainer,
         },
       },
       data: transformedData,

superset-frontend/plugins/plugin-chart-echarts/src/Sankey/transformProps.ts

@@ -74,7 +74,7 @@ export default function transformProps(
     },
     label: {
       color: theme.colorText,
-      textShadow: theme.colorBgBase,
+      textShadow: theme.colorBgContainer,
     },
   }));
 

superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/transformProps.ts

@@ -276,7 +276,7 @@ export default function transformProps(
   }
   const labelProps = {
     color: theme.colorText,
-    textBorderColor: theme.colorBgBase,
+    textBorderColor: theme.colorBgContainer,
     textBorderWidth: 1,
   };
   const traverse = (

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts

@@ -425,7 +425,7 @@ export function transformIntervalAnnotation(
     const intervalLabel: SeriesLabelOption = showLabel
       ? {
           show: true,
-          color: theme.colors.grayscale.dark2,
+          color: theme.colorText,
           position: 'insideTop',
           verticalAlign: 'top',
           fontWeight: 'bold',
@@ -433,19 +433,19 @@ export function transformIntervalAnnotation(
           emphasis: {
             position: 'insideTop',
             verticalAlign: 'top',
-            backgroundColor: theme.colors.grayscale.light5,
+            backgroundColor: theme.colorBgContainer,
           },
         }
       : {
           show: false,
-          color: theme.colors.grayscale.dark2,
+          color: theme.colorText,
           // @ts-ignore
           emphasis: {
             fontWeight: 'bold',
             show: true,
             position: 'insideTop',
             verticalAlign: 'top',
-            backgroundColor: theme.colors.grayscale.light5,
+            backgroundColor: theme.colorBgContainer,
           },
         };
     series.push({
@@ -506,25 +506,25 @@ export function transformEventAnnotation(
     const eventLabel: SeriesLineLabelOption = showLabel
       ? {
           show: true,
-          color: theme.colors.grayscale.dark2,
+          color: theme.colorText,
           position: 'insideEndTop',
           fontWeight: 'bold',
           formatter: (params: CallbackDataParams) => params.name,
           // @ts-ignore
           emphasis: {
-            backgroundColor: theme.colors.grayscale.light5,
+            backgroundColor: theme.colorBgContainer,
           },
         }
       : {
           show: false,
-          color: theme.colors.grayscale.dark2,
+          color: theme.colorText,
           position: 'insideEndTop',
           // @ts-ignore
           emphasis: {
             formatter: (params: CallbackDataParams) => params.name,
             fontWeight: 'bold',
             show: true,
-            backgroundColor: theme.colors.grayscale.light5,
+            backgroundColor: theme.colorBgContainer,
           },
         };
 

superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts

@@ -123,7 +123,7 @@ export default function transformProps(
   const { columnFormats = {}, currencyFormats = {} } = datasource;
   const { setDataMask = () => {}, onContextMenu } = hooks;
   const coltypeMapping = getColtypesMapping(queriesData[0]);
-  const BORDER_COLOR = theme.colorBgBase;
+  const BORDER_COLOR = theme.colorBgContainer;
 
   const {
     colorScheme,
@@ -165,7 +165,7 @@ export default function transformProps(
   const treeData = treeBuilder(data, groupbyLabels, metricLabel);
   const labelProps = {
     color: theme.colorText,
-    borderColor: theme.colorBgBase,
+    borderColor: theme.colorBgContainer,
     borderWidth: 1,
   };
   const traverse = (treeNodes: TreeNode[], path: string[]) =>
@@ -207,7 +207,7 @@ export default function transformProps(
             itemStyle: {
               colorAlpha: OpacityEnum.SemiTransparent,
               color: theme.colorText,
-              borderColor: theme.colorBgBase,
+              borderColor: theme.colorBgContainer,
               borderWidth: 2,
             },
             label: {

superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts

@@ -359,7 +359,7 @@ export default function transformProps(
     show: showValue,
     formatter: seriesformatter,
     color: theme.colorText,
-    borderColor: theme.colorBgBase,
+    borderColor: theme.colorBgContainer,
     borderWidth: 1,
   };
   const barSeries: BarSeriesOption[] = [

superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx

@@ -64,12 +64,12 @@ const METRIC_KEY = t('Metric');
 const vals = ['value'];
 
 const StyledPlusSquareOutlined = styled(PlusSquareOutlined)`
-  stroke: ${({ theme }) => theme.colors.grayscale.light2};
+  stroke: ${({ theme }) => theme.colorBorderSecondary};
   stroke-width: 16px;
 `;
 
 const StyledMinusSquareOutlined = styled(MinusSquareOutlined)`
-  stroke: ${({ theme }) => theme.colors.grayscale.light2};
+  stroke: ${({ theme }) => theme.colorBorderSecondary};
   stroke-width: 16px;
 `;
 

superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/Styles.js

@@ -33,7 +33,7 @@ export const Styles = styled.div`
     }
 
     table thead {
-      background-color: ${theme.colorBgBase};
+      background-color: ${theme.colorBgContainer};
       position: ${isDashboardEditMode ? 'inherit' : 'sticky'};
       top: 0;
     }
@@ -62,7 +62,7 @@ export const Styles = styled.div`
     table.pvtTable thead th.pvtSubtotalLabel,
     table.pvtTable tbody tr:last-of-type th,
     table.pvtTable tbody tr:last-of-type td {
-      border-bottom: 1px solid ${theme.colors.grayscale.light2};
+      border-bottom: 1px solid ${theme.colorBorderSecondary};
     }
 
     table.pvtTable
@@ -77,7 +77,7 @@ export const Styles = styled.div`
 
     table.pvtTable tbody tr td:last-of-type,
     table.pvtTable thead tr th:last-of-type:not(.pvtSubtotalLabel) {
-      border-right: 1px solid ${theme.colors.grayscale.light2};
+      border-right: 1px solid ${theme.colorBorderSecondary};
     }
 
     table.pvtTable
@@ -104,9 +104,9 @@ export const Styles = styled.div`
     table.pvtTable tbody tr td {
       color: ${theme.colorPrimaryText};
       padding: ${theme.sizeUnit}px;
-      background-color: ${theme.colors.grayscale.light5};
+      background-color: ${theme.colorBgContainer};
-      border-top: 1px solid ${theme.colors.grayscale.light2};
+      border-top: 1px solid ${theme.colorBorderSecondary};
-      border-left: 1px solid ${theme.colors.grayscale.light2};
+      border-left: 1px solid ${theme.colorBorderSecondary};
       vertical-align: top;
       text-align: right;
     }

superset-frontend/plugins/plugin-chart-table/src/Styles.tsx

@@ -41,7 +41,7 @@ export default styled.div`
     thead > tr > th {
       padding-right: 0;
       position: relative;
-      background-color: ${theme.colorBgBase};
+      background-color: ${theme.colorBgContainer};
       text-align: left;
       border-bottom: 2px solid ${theme.colorSplit};
       color: ${theme.colorText};
@@ -154,7 +154,7 @@ export default styled.div`
 
     .dt-pagination .pagination > li > a,
     .dt-pagination .pagination > li > span {
-      background-color: ${theme.colorBgBase};
+      background-color: ${theme.colorBgContainer};
       color: ${theme.colorText};
       border-color: ${theme.colorBorderSecondary};
     }

superset-frontend/plugins/plugin-chart-word-cloud/src/chart/WordCloud.tsx

@@ -106,7 +106,7 @@ class WordCloud extends PureComponent<FullWordCloudProps, WordCloudState> {
       text: 'Text',
     },
     defaultEncoding: {
-      color: { value: this.props.theme.colors.grayscale.dark2 },
+      color: { value: this.props.theme.colorTextBase },
       fontFamily: { value: this.props.theme.fontFamily },
       fontSize: { value: 20 },
       fontWeight: { value: 'bold' },

superset-frontend/src/SqlLab/components/QueryTable/styles.ts

@@ -33,7 +33,7 @@ export const verticalAlign = css`
 export const StyledTooltip = styled(IconTooltip)`
   padding-right: ${({ theme }) => theme.sizeUnit * 2}px;
   span {
-    color: ${({ theme }) => theme.colors.grayscale.base};
+    color: ${({ theme }) => theme.colorText};
     &: hover {
       color: ${({ theme }) => theme.colorPrimary};
     }

superset-frontend/src/SqlLab/components/SaveQuery/index.tsx

@@ -64,7 +64,7 @@ const Styles = styled.span`
   span[role='img']:not([aria-label='down']) {
     display: flex;
     margin: 0;
-    color: ${({ theme }) => theme.colors.grayscale.base};
+    color: ${({ theme }) => theme.colorText};
     svg {
       vertical-align: -${({ theme }) => theme.sizeUnit * 1.25}px;
       margin: 0;

superset-frontend/src/SqlLab/components/SqlEditorTabHeader/index.tsx

@@ -125,7 +125,7 @@ const SqlEditorTabHeader: FC<Props> = ({ queryEditor }) => {
       [QueryState.TimedOut]: theme.colorError,
     };
 
-    return statusColors[state] || theme.colors.grayscale.light2;
+    return statusColors[state] || theme.colorBorderSecondary;
   };
   return (
     <TabTitleWrapper>

superset-frontend/src/components/Chart/Chart.tsx

@@ -168,7 +168,7 @@ const MessageSpan = styled.span`
   text-align: center;
   margin: ${({ theme }) => theme.sizeUnit * 4}px auto;
   width: fit-content;
-  color: ${({ theme }) => theme.colors.grayscale.base};
+  color: ${({ theme }) => theme.colorText};
 `;
 
 class Chart extends PureComponent<ChartProps, {}> {

superset-frontend/src/components/Chart/ChartContextMenu/ChartContextMenu.tsx

@@ -224,11 +224,7 @@ const ChartContextMenu = (
               {t('Add cross-filter')}
               <MenuItemTooltip
                 title={crossFilteringTooltipTitle}
-                color={
+                color={!isCrossFilterDisabled ? theme.colorText : undefined}
-                  !isCrossFilterDisabled
-                    ? theme.colors.grayscale.base
-                    : undefined
-                }
               />
             </div>
           )}

superset-frontend/src/components/Chart/DrillDetail/DrillDetailTableControls.tsx

@@ -123,7 +123,7 @@ export default function TableControls({
       >
         <RowCountLabel loading={loading && !totalCount} rowcount={totalCount} />
         <Icons.ReloadOutlined
-          iconColor={theme.colors.grayscale.light1}
+          iconColor={theme.colorBorder}
           iconSize="l"
           aria-label={t('Reload')}
           role="button"

superset-frontend/src/components/GridTable/Header.tsx

@@ -70,7 +70,7 @@ const HeaderAction = styled.div`
     box-shadow: 0 0 2px var(--ag-chip-border-color);
     border-radius: 50%;
     &:hover {
-      box-shadow: 0 0 4px ${({ theme }) => theme.colors.grayscale.light1};
+      box-shadow: 0 0 4px ${({ theme }) => theme.colorBorder};
     }
   }
 `;

superset-frontend/src/components/GridTable/index.tsx

@@ -150,7 +150,7 @@ export function GridTable<RecordType extends object>({
             --ag-font-family: ${theme.fontFamily};
             --ag-font-size: ${theme.fontSize}px;
             --ag-row-height: ${rowHeight}px;
-            --ag-background-color: ${theme.colorBgBase};
+            --ag-background-color: ${theme.colorBgContainer};
             --ag-foreground-color: ${theme.colorText};
             --ag-header-background-color: ${theme.colorBgElevated};
             --ag-header-foreground-color: ${theme.colorTextHeading};

superset-frontend/src/components/ListView/CrossLinks.tsx

@@ -53,7 +53,7 @@ const StyledCrossLinks = styled.div`
 
       .count {
         cursor: pointer;
-        color: ${theme.colors.grayscale.base};
+        color: ${theme.colorText};
         font-weight: ${theme.fontWeightStrong};
       }
     }

superset-frontend/src/components/ListView/CrossLinksTooltip.tsx

@@ -30,7 +30,7 @@ export type CrossLinksTooltipProps = {
 
 const StyledLinkedTooltip = styled.div`
   .link {
-    color: ${({ theme }) => theme.colors.grayscale.light5};
+    color: ${({ theme }) => theme.colorBgContainer};
     display: block;
     text-decoration: underline;
   }

superset-frontend/src/components/ListView/Filters/Search.tsx

@@ -100,10 +100,7 @@ function SearchFilter(
         onPressEnter={handleSubmit}
         onBlur={handleSubmit}
         prefix={
-          <Icons.SearchOutlined
+          <Icons.SearchOutlined iconColor={theme.colorBorder} iconSize="l" />
-            iconColor={theme.colors.grayscale.light1}
-            iconSize="l"
-          />
         }
       />
     </FilterContainer>

superset-frontend/src/components/ListView/ListView.tsx

@@ -88,7 +88,7 @@ const ListViewStyles = styled.div`
 
     .row-count-container {
       margin-top: ${theme.sizeUnit * 2}px;
-      color: ${theme.colors.grayscale.base};
+      color: ${theme.colorText};
     }
   `}
 `;
@@ -160,7 +160,7 @@ const ViewModeContainer = styled.div`
     }
 
     .active {
-      background-color: ${theme.colors.grayscale.base};
+      background-color: ${theme.colorText};
 
       svg {
         color: ${theme.colorBgLayout};

superset-frontend/src/components/MessageToasts/ToastPresenter.tsx

@@ -63,7 +63,7 @@ const StyledToastPresenter = styled.div<VisualProps>(
     }
 
     .toast > button {
-      color: ${theme.colors.grayscale.light5};
+      color: ${theme.colorBgContainer};
       opacity: 1;
     }
 

superset-frontend/src/components/TableSelector/index.tsx

@@ -68,7 +68,7 @@ const TableSelectorWrapper = styled.div`
     }
 
     .table-length {
-      color: ${theme.colors.grayscale.light1};
+      color: ${theme.colorBorder};
     }
 
     .select {

superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx

@@ -96,7 +96,7 @@ const MetadataItem: FC<{
     <span
       css={(theme: Theme) => css`
         margin-right: ${theme.sizeUnit * 4}px;
-        color: ${theme.colors.grayscale.base};
+        color: ${theme.colorText};
       `}
     >
       {label}
@@ -214,7 +214,7 @@ const AddSliceCard: FC<{
           color: ${theme.colorText};
 
           &:hover {
-            //background: ${theme.colors.grayscale.light4};
+            //background: ${theme.colorBgContainer};
           }
 
           opacity: ${isSelected ? 0.4 : 'unset'};

superset-frontend/src/dashboard/components/BuilderComponentPane/index.tsx

@@ -53,8 +53,8 @@ const BuilderComponentPane = ({ topOffset = 0 }) => (
         position: absolute;
         height: 100%;
         width: ${BUILDER_PANE_WIDTH}px;
-        box-shadow: -4px 0 4px 0 ${rgba(theme.colors.grayscale.dark2, 0.1)};
+        box-shadow: -4px 0 4px 0 ${rgba(theme.colorText, 0.1)};
-        background-color: ${theme.colorBgBase};
+        background-color: ${theme.colorBgContainer};
       `}
     >
       <Tabs

superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx

@@ -140,7 +140,7 @@ const DashboardContentWrapper = styled.div`
       /* drop shadow for top-level tabs only */
       & .dashboard-component-tabs {
         box-shadow: 0 ${theme.sizeUnit}px ${theme.sizeUnit}px 0
-          ${addAlpha(theme.colors.grayscale.dark2, 0.1)};
+          ${addAlpha(theme.colorText, 0.1)};
         padding-left: ${theme.sizeUnit *
         2}px; /* note this is added to tab-level padding, to match header */
       }

superset-frontend/src/dashboard/components/DashboardBuilder/DashboardWrapper.tsx

@@ -44,8 +44,8 @@ const StyledDiv = styled.div`
       }
       & .empty-droptarget:before {
         display: block;
-        border-color: ${theme.colors.primary.light1};
+        border-color: ${theme.colorFillQuaternary};
-        background-color: ${theme.colors.primary.light3};
+        background-color: ${theme.colorBgLayout};
       }
       & .grid-row:after {
         border-style: hidden;

superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/index.tsx

@@ -175,7 +175,7 @@ const DetailsPanelPopover = ({
 
   return (
     <Popover
-      color={`${theme.colors.grayscale.dark2}cc`}
+      color={`${theme.colorTextBase}cc`}
       content={content}
       open={popoverVisible}
       onOpenChange={handleVisibility}

superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx

@@ -21,8 +21,8 @@ import { css, styled } from '@superset-ui/core';
 export const Pill = styled.div`
   ${({ theme }) => css`
     display: flex;
-    color: ${theme.colors.grayscale.light5};
+    color: ${theme.colorBgContainer};
-    background: ${theme.colors.grayscale.base};
+    background: ${theme.colorText};
     border-radius: 1em;
     vertical-align: text-top;
     padding: ${theme.sizeUnit}px ${theme.sizeUnit * 2}px;
@@ -36,7 +36,7 @@ export const Pill = styled.div`
 
     svg {
       position: relative;
-      color: ${theme.colors.grayscale.light5};
+      color: ${theme.colorBgContainer};
       width: 1em;
       height: 1em;
       display: inline-block;
@@ -115,7 +115,7 @@ export const FiltersDetailsContainer = styled.div`
     max-width: 300px;
     overflow-x: hidden;
 
-    color: ${theme.colors.grayscale.light5};
+    color: ${theme.colorBgContainer};
   `}
 `;
 
@@ -129,7 +129,7 @@ export const Separator = styled.div`
   ${({ theme }) => css`
     width: 100%;
     height: 1px;
-    background-color: ${theme.colors.grayscale.light1};
+    background-color: ${theme.colorBorder};
     margin: ${theme.sizeUnit * 4}px 0;
   `}
 `;

superset-frontend/src/dashboard/components/FiltersBadge/index.tsx

@@ -63,14 +63,14 @@ const StyledFilterCount = styled.div`
     margin-right: ${theme.sizeUnit}px;
     padding-left: ${theme.sizeUnit * 2}px;
     padding-right: ${theme.sizeUnit * 2}px;
-    background: ${theme.colors.grayscale.light4};
+    background: ${theme.colorBgContainer};
     border-radius: 4px;
     height: 100%;
     .anticon {
       vertical-align: middle;
-      color: ${theme.colors.grayscale.base};
+      color: ${theme.colorText};
       &:hover {
-        color: ${theme.colors.grayscale.light1};
+        color: ${theme.colorBorder};
       }
     }
 

superset-frontend/src/dashboard/components/Header/index.jsx

@@ -130,18 +130,18 @@ const StyledUndoRedoButton = styled(Button)`
 `;
 
 const undoRedoStyle = theme => css`
-  color: ${theme.colors.grayscale.light1};
+  color: ${theme.colorBorder};
   &:hover {
-    color: ${theme.colors.grayscale.base};
+    color: ${theme.colorText};
   }
 `;
 
 const undoRedoEmphasized = theme => css`
-  color: ${theme.colors.grayscale.base};
+  color: ${theme.colorText};
 `;
 
 const undoRedoDisabled = theme => css`
-  color: ${theme.colors.grayscale.light2};
+  color: ${theme.colorBorderSecondary};
 `;
 
 const saveBtnStyle = theme => css`

superset-frontend/src/dashboard/components/IconButton.tsx

@@ -29,7 +29,7 @@ const StyledDiv = styled.div`
   display: flex;
   align-items: center;
   cursor: pointer;
-  color: ${({ theme }) => theme.colors.grayscale.base};
+  color: ${({ theme }) => theme.colorText};
   &:hover {
     color: ${({ theme }) => theme.colorPrimary};
   }

superset-frontend/src/dashboard/components/OverwriteConfirm/OverwriteConfirmModal.tsx

@@ -58,7 +58,7 @@ const StackableHeader = styled(Button)<{ top: number }>`
   ${({ theme, top }) => `
      position: sticky;
      top: ${top}px;
-     background-color: ${theme.colors.grayscale.light5};
+     background-color: ${theme.colorBgContainer};
      margin: 0px;
      padding: 8px 4px;
      z-index: 1;

superset-frontend/src/dashboard/components/dnd/DragHandle.tsx

@@ -35,7 +35,7 @@ const DragHandleContainer = styled.div<{ position: 'left' | 'top' }>`
       transform: rotate(90deg);
     `}
     & path {
-      fill: ${theme.colors.grayscale.base};
+      fill: ${theme.colorText};
     }
   `}
 `;

superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.jsx

@@ -227,7 +227,7 @@ const ScopeSelector = styled.div`
               border-radius: ${theme.borderRadius}px;
               margin-top: ${theme.sizeUnit * -2}px;
               box-shadow: inset 0 0 0 2px ${theme.colorBorder};
-              background: ${theme.colors.grayscale.light3};
+              background: ${theme.colorFill};
             }
           }
 
@@ -309,7 +309,7 @@ const ActionsContainer = styled.div`
   ${({ theme }) => `
     height: ${theme.sizeUnit * 16}px;
 
-    border-top: ${theme.sizeUnit / 4}px solid ${theme.colors.primary.light3};
+    border-top: ${theme.sizeUnit / 4}px solid ${theme.colorBgLayout};
     padding: ${theme.sizeUnit * 6}px;
     margin: 0 0 0 ${-theme.sizeUnit * 6}px;
     text-align: right;

superset-frontend/src/dashboard/components/gridComponents/Divider.jsx

@@ -47,7 +47,7 @@ const DividerLine = styled.div`
       content: '';
       height: 1px;
       width: 100%;
-      background-color: ${theme.colors.grayscale.light2};
+      background-color: ${theme.colorBorderSecondary};
       display: block;
     }
 

superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx

@@ -79,7 +79,7 @@ const defaultProps = {
 const StyledTabsContainer = styled.div`
   ${({ theme }) => css`
     width: 100%;
-    background-color: ${theme.colorBgBase};
+    background-color: ${theme.colorBgContainer};
 
     .dashboard-component-tabs-content {
       min-height: ${theme.sizeUnit * 12}px;

superset-frontend/src/dashboard/components/gridComponents/new/DraggableNewComponent.tsx

@@ -40,10 +40,10 @@ const NewComponent = styled.div`
     flex-wrap: nowrap;
     align-items: center;
     padding: ${theme.sizeUnit * 4}px;
-    background: ${theme.colors.grayscale.light5};
+    background: ${theme.colorBgContainer};
     cursor: move;
     &:not(.static):hover {
-      background: ${theme.colors.grayscale.light4};
+      background: ${theme.colorBgContainer};
     }
   `}
 `;

superset-frontend/src/dashboard/components/menu/BackgroundStyleDropdown.tsx

@@ -47,7 +47,7 @@ const BackgroundStyleOption = styled.div`
       padding-left: 0;
       background: transparent;
       &:before {
-        background: ${theme.colors.grayscale.light5};
+        background: ${theme.colorBgContainer};
         border: 1px solid ${theme.colorBorder};
       }
     }

superset-frontend/src/dashboard/components/menu/WithPopoverMenu.tsx

@@ -75,8 +75,8 @@ const PopoverMenuStyles = styled.div`
     top: -42px;
     height: ${theme.sizeUnit * 10}px;
     padding: 0 ${theme.sizeUnit * 4}px;
-    background: ${theme.colors.grayscale.light5};
+    background: ${theme.colorBgContainer};
-    box-shadow: 0 1px 2px 1px ${addAlpha(theme.colors.grayscale.dark2, 0.35)};
+    box-shadow: 0 1px 2px 1px ${addAlpha(theme.colorText, 0.35)};
     font-size: ${theme.fontSize}px;
     cursor: default;
     z-index: 3000;
@@ -93,7 +93,7 @@ const PopoverMenuStyles = styled.div`
       content: '';
       width: 1px;
       height: 100%;
-      background: ${theme.colors.grayscale.light2};
+      background: ${theme.colorBorderSecondary};
       margin: 0 ${theme.sizeUnit * 4}px;
     }
   `}

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx

@@ -89,6 +89,13 @@ const horizontalStyle = (theme: SupersetTheme) => css`
     text-transform: capitalize;
     font-weight: ${theme.fontWeightNormal};
   }
+  & > .filter-apply-button {
+    &[disabled],
+    &[disabled]:hover {
+      color: ${theme.colorBorder};
+      background: ${theme.colorFill};
+    }
+  }
 `;
 
 const ButtonsContainer = styled.div<{ isVertical: boolean; width: number }>`

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.tsx

@@ -103,7 +103,7 @@ const CrossFilter = (props: {
                 margin-bottom: ${theme.sizeUnit * 4}px;
                 margin-top: ${theme.sizeUnit * 4}px;
             `}
-            background: ${theme.colors.grayscale.light2};
+            background: ${theme.colorBorderSecondary};
           `}
         />
       )}

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx

@@ -33,7 +33,7 @@ const StyledCrossFilterTitle = styled.div`
   ${({ theme }) => `
     display: flex;
     font-size: ${theme.fontSizeSM}px;
-    color: ${theme.colors.grayscale.base};
+    color: ${theme.colorText};
     vertical-align: middle;
     align-items: center;
   `}
@@ -42,13 +42,13 @@ const StyledCrossFilterTitle = styled.div`
 const StyledIconSearch = styled(Icons.SearchOutlined)`
   ${({ theme }) => `
     & > span.anticon.anticon-search {
-      color: ${theme.colors.grayscale.light1};
+      color: ${theme.colorBorder};
       margin-left: ${theme.sizeUnit}px;
       transition: 0.3s;
       vertical-align: middle;
       line-height: 0;
       &:hover {
-        color: ${theme.colors.grayscale.base};
+        color: ${theme.colorText};
       }
     }
   `}

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.tsx

@@ -71,7 +71,7 @@ const ScopingTitle = ({
     >
       {label}
       <Icons.DeleteOutlined
-        iconColor={theme.colors.grayscale.light3}
+        iconColor={theme.colorFill}
         iconSize="xl"
         onClick={(event: React.MouseEvent<HTMLElement>) => {
           event.stopPropagation();
@@ -150,7 +150,7 @@ export const ChartsScopingListPanel = ({
         css={css`
           width: 100%;
           height: 1px;
-          background-color: ${theme.colors.grayscale.light3};
+          background-color: ${theme.colorFill};
           margin: ${theme.sizeUnit * 3}px 0;
         `}
       />

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingTreePanel.tsx

@@ -51,7 +51,7 @@ interface ScopingTreePanelProps {
 const InfoText = styled.div`
   ${({ theme }) => css`
     font-size: ${theme.fontSizeSM}px;
-    color: ${theme.colors.grayscale.base};
+    color: ${theme.colorText};
     margin-bottom: ${theme.sizeUnit * 7}px;
   `}
 `;

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx

@@ -130,7 +130,7 @@ const HorizontalOverflowDivider = ({
               ${truncationCSS};
               display: block;
               font-size: ${theme.fontSizeSM}px;
-              color: ${theme.colors.grayscale.base};
+              color: ${theme.colorText};
               margin: ${theme.sizeUnit}px 0 0 0;
             `}
           >

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx

@@ -35,8 +35,8 @@ const HorizontalBar = styled.div`
     padding: ${theme.sizeUnit * 3}px ${theme.sizeUnit * 2}px ${
       theme.sizeUnit * 3
     }px ${theme.sizeUnit * 4}px;
-    background: ${theme.colorBgBase};
+    background: ${theme.colorBgContainer};
-    box-shadow: inset 0px -2px 2px -1px ${theme.colors.grayscale.light2};
+    box-shadow: inset 0px -2px 2px -1px ${theme.colorBorderSecondary};
   `}
 `;
 
@@ -57,7 +57,7 @@ const HorizontalBarContent = styled.div`
 const FilterBarEmptyStateContainer = styled.div`
   ${({ theme }) => `
     font-weight: ${theme.fontWeightStrong};
-    color: ${theme.colors.grayscale.base};
+    color: ${theme.colorText};
     font-size: ${theme.fontSizeSM}px;
     padding-left: ${theme.sizeUnit * 2}px;
   `}

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx

@@ -63,14 +63,14 @@ const Bar = styled.div<{ width: number }>`
     flex-direction: column;
     flex-grow: 1;
     width: ${width}px;
-    background: ${theme.colors.grayscale.light5};
+    background: ${theme.colorBgContainer};
     border-right: 1px solid ${theme.colorSplit};
     border-bottom: 1px solid ${theme.colorSplit};
     min-height: 100%;
     display: none;
     &.open {
       display: flex;
-      background-color: ${theme.colorBgBase};
+      background-color: ${theme.colorBgContainer};
     }
   `}
 `;

superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx

@@ -101,7 +101,7 @@ export const DependenciesRow = memo(({ filter }: FilterCardRowProps) => {
         >
           <Icons.InfoCircleOutlined
             iconSize="m"
-            iconColor={theme.colors.grayscale.light1}
+            iconColor={theme.colorBorder}
             css={css`
               margin-left: ${theme.sizeUnit}px;
             `}

superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx

@@ -73,7 +73,7 @@ export const NameRow = ({
         >
           <Icons.EditOutlined
             iconSize="l"
-            iconColor={theme.colors.grayscale.light1}
+            iconColor={theme.colorBorder}
             css={() => css`
               cursor: pointer;
             `}

superset-frontend/src/dashboard/components/nativeFilters/FilterCard/Styles.ts

@@ -41,7 +41,7 @@ export const Row = styled.div`
 
 export const RowLabel = styled.span`
   ${({ theme }) => css`
-    color: ${theme.colors.grayscale.base};
+    color: ${theme.colorText};
     padding-right: ${theme.sizeUnit * 4}px;
     margin-right: auto;
     white-space: nowrap;

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DependencyList.tsx

@@ -57,7 +57,7 @@ const DeleteFilter = styled(Icons.DeleteOutlined)`
   ${({ theme }) => `
     cursor: pointer;
     margin-left: ${theme.sizeUnit * 2}px;
-    color: ${theme.colors.grayscale.base};
+    color: ${theme.colorText};
     &:hover {
       color: ${theme.colorText};
     }
@@ -79,7 +79,7 @@ const RowPanel = styled.div`
 
 const Label = styled.div`
   font-size: ${({ theme }) => theme.fontSizeSM}px;
-  color: ${({ theme }) => theme.colors.grayscale.base};
+  color: ${({ theme }) => theme.colorText};
   margin-bottom: ${({ theme }) => theme.sizeUnit}px;
 `;
 

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx

@@ -183,7 +183,7 @@ const FilterTypeInfo = styled.div<{ expanded: boolean }>`
   ${({ theme, expanded }) => `
     width: ${expanded ? '49%' : `${FORM_ITEM_WIDTH}px`};
     font-size: ${theme.fontSizeSM}px;
-    color: ${theme.colors.grayscale.light1};
+    color: ${theme.colorBorder};
     margin:
       ${theme.sizeUnit * 2}px
       0px

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/RemovedFilter.tsx

@@ -27,7 +27,7 @@ const RemovedContent = styled.div`
   text-align: center;
   justify-content: center;
   align-items: center;
-  color: ${({ theme }) => theme.colors.grayscale.base};
+  color: ${({ theme }) => theme.colorText};
 `;
 
 type RemovedFilterProps = {

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx

@@ -740,7 +740,7 @@ function FiltersConfigModal({
           <StyledExpandButtonWrapper>
             <ToggleIcon
               iconSize="l"
-              iconColor={theme.colors.grayscale.dark2}
+              iconColor={theme.colorTextBase}
               onClick={toggleExpand}
             />
           </StyledExpandButtonWrapper>

superset-frontend/src/dashboard/util/useFilterFocusHighlightStyles.ts

@@ -31,7 +31,7 @@ const useFilterFocusHighlightStyles = (chartId: number) => {
 
   const focusedChartStyles = useMemo(
     () => ({
-      borderColor: theme.colors.primary.light2,
+      borderColor: theme.colorPrimaryBg,
       opacity: 1,
       boxShadow: `0px 0px ${theme.sizeUnit * 2}px ${theme.colorPrimary}`,
       pointerEvents: 'auto',

superset-frontend/src/explore/components/ControlPanelsContainer.tsx

@@ -125,8 +125,8 @@ const actionButtonsContainerStyles = (theme: SupersetTheme) => css`
   padding: ${theme.sizeUnit * 4}px;
   z-index: 999;
   background: linear-gradient(
-    ${rgba(theme.colorBgBase, 0)},
+    ${rgba(theme.colorBgContainer, 0)},
-    ${theme.colorBgBase} 35%
+    ${theme.colorBgContainer} 35%
   );
 
   & > button {

superset-frontend/src/explore/components/DataTableControl/index.tsx

@@ -42,7 +42,7 @@ import { prepareCopyToClipboardTabularData } from 'src/utils/common';
 import { getTimeColumns, setTimeColumns } from './utils';
 
 export const CellNull = styled('span')`
-  color: ${({ theme }) => theme.colors.grayscale.light1};
+  color: ${({ theme }) => theme.colorBorder};
 `;
 
 export const CopyButton = styled(Button)`
@@ -161,7 +161,7 @@ const FormatPickerContainer = styled.div`
 
 const FormatPickerLabel = styled.span`
   font-size: ${({ theme }) => theme.fontSizeSM}px;
-  color: ${({ theme }) => theme.colors.grayscale.base};
+  color: ${({ theme }) => theme.colorText};
   margin-bottom: ${({ theme }) => theme.sizeUnit * 2}px;
 `;
 
@@ -216,7 +216,7 @@ const DataTableTemporalHeaderCell = ({
       >
         <Icons.SettingOutlined
           iconSize="m"
-          iconColor={theme.colors.grayscale.light1}
+          iconColor={theme.colorBorder}
           css={{ marginRight: `${theme.sizeUnit}px` }}
           onClick={(e: React.MouseEvent<HTMLElement>) => e.stopPropagation()}
         />

superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx

@@ -189,7 +189,7 @@ export const DataTablesPane = ({
         )}
       </TableControlsWrapper>
     );
-  }, [handleCollapseChange, panelOpen, theme.colors.grayscale.base]);
+  }, [handleCollapseChange, panelOpen, theme.colorText]);
 
   const queryResultsPanes = useResultsPane({
     errorMessage,

superset-frontend/src/explore/components/DatasourcePanel/index.tsx

@@ -87,7 +87,7 @@ const DatasourceContainer = styled.div`
     .field-length {
       margin-bottom: ${theme.sizeUnit * 2}px;
       font-size: ${theme.fontSizeSM}px;
-      color: ${theme.colors.grayscale.light1};
+      color: ${theme.colorBorder};
     }
     .form-control.input-md {
       display: inline-flex;
@@ -97,7 +97,7 @@ const DatasourceContainer = styled.div`
     }
     .type-label {
       font-size: ${theme.fontSizeSM}px;
-      color: ${theme.colors.grayscale.base};
+      color: ${theme.colorText};
     }
     .Control {
       padding-bottom: 0;

superset-frontend/src/explore/components/RunQueryButton/index.tsx

@@ -38,18 +38,23 @@ export const RunQueryButton = ({
   errorMessage,
   isNewChart,
   canStopQuery,
-  chartIsStale,
 }: RunQueryButtonProps) => {
   const theme = useTheme();
   return loading ? (
-    <Button onClick={onStop} buttonStyle="danger" disabled={!canStopQuery}>
+    <Button
-      <Icons.Square iconSize="xs" iconColor={theme.colors.primary.light5} />
+      icon={
+        <Icons.Square iconSize="xs" iconColor={theme.colorFillQuaternary} />
+      }
+      onClick={onStop}
+      buttonStyle="danger"
+      disabled={!canStopQuery}
+    >
       {t('Stop')}
     </Button>
   ) : (
     <Button
       onClick={onQuery}
-      buttonStyle={chartIsStale ? 'primary' : 'secondary'}
+      buttonStyle="primary"
       disabled={!!errorMessage}
       data-test="run-query-button"
     >