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

apache · May 11, 2022 · 8bb8b7f · 8bb8b7f
1 parent 3a379af
commit 8bb8b7f
Show file tree

Hide file tree

Showing 19 changed files with 339 additions and 342 deletions.
diff --git 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`

diff --git 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`

diff --git 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};
   }
 `;
 

diff --git 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 = {

diff --git 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;
-
-  .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;
+  ${({ theme }) => `
+    border: 1px solid ${theme.colors.grayscale.light2};
+    border-radius: ${theme.gridUnit}px;
+    overflow: hidden;
 
-    .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`

diff --git 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';