feat(sdk): SDK theming part 4 - danger, dark, error, filter, focus, saturated, shadow (#43608)

* Migrate danger

* Migrate dark

* Migrate error

* Migrate filter

* Migrate focus

* Migrate saturated

* Migrate shadow

* Fix CI

* Fix CI

* Fix CI

.storybook/preview-head.html

@@ -14,5 +14,6 @@
     --mb-color-border: #eeecec;
     --mb-color-brand-light: #f9fbfc;
     --mb-color-brand-lighter: #eef6fc;
+    --mb-color-filter: #7172ad;
   }
 </style>

enterprise/frontend/src/embedding-sdk/components/private/SdkContentWrapper.tsx

@@ -53,6 +53,9 @@ const SdkContentWrapperInner = styled.div<
   --mb-color-text-dark: ${({ theme }) => theme.fn.themeColor("text-dark")};
   --mb-color-text-medium: ${({ theme }) => theme.fn.themeColor("text-medium")};
   --mb-color-text-light: ${({ theme }) => theme.fn.themeColor("text-light")};
+  --mb-color-danger: ${({ theme }) => theme.fn.themeColor("danger")};
+  --mb-color-error: ${({ theme }) => theme.fn.themeColor("error")};
+  --mb-color-filter: ${({ theme }) => theme.fn.themeColor("filter")};
   --mb-color-bg-error: ${() => color("bg-error")};
   --mb-color-bg-medium: ${({ theme }) => theme.fn.themeColor("bg-medium")};
   --mb-color-bg-night: ${() => color("bg-night")};

enterprise/frontend/src/metabase-enterprise/auth/components/SessionTimeoutSetting/SessionTimeoutSetting.styled.tsx

 import styled from "@emotion/styled";
 
 import Input from "metabase/core/components/Input";
-import { color } from "metabase/lib/colors";
 
 export const SessionTimeoutSettingRoot = styled.div`
   margin: 0.5rem 0;
@@ -31,5 +30,5 @@ export const SessionTimeoutInput = styled(Input)<SessionTimeoutInputProps>`
 export const ErrorMessage = styled.div`
   text-align: right;
   margin-top: 0.5rem;
-  color: ${color("error")};
+  color: var(--mb-color-error);
 `;

enterprise/frontend/src/metabase-enterprise/caching/components/CacheTTLField/CacheTTLField.styled.tsx

@@ -10,7 +10,7 @@ export const CacheTTLFieldContainer = styled.div`
 `;
 
 export const FieldText = styled.span<{ hasError?: boolean; margin: string }>`
-  color: ${props => color(props.hasError ? "error" : "text-dark")};
+  color: ${props => (props.hasError ? color("error") : color("text-dark"))};
   ${props => css`margin-${props.margin}: 10px;`}
 `;
 
@@ -18,7 +18,7 @@ export const Input = styled(NumericInput)`
   width: 50px;
   text-align: center;
 
-  color: ${props => color(props.hasError ? "error" : "text-dark")};
+  color: ${props => (props.hasError ? color("error") : color("text-dark"))};
   font-weight: bold;
   padding: 0.75em;
 

enterprise/frontend/src/metabase-enterprise/caching/components/ResetButtonContainer.styled.tsx

+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
 import type { FormSubmitButtonProps } from "metabase/forms";
@@ -7,8 +8,12 @@ import { alpha } from "metabase/lib/colors";
 export const ResetAllFormSubmitButton = styled(FormSubmitButton, {
   shouldForwardProp: prop => prop !== "highlightOnHover",
 })<FormSubmitButtonProps & { highlightOnHover?: boolean }>`
-  ${({ highlightOnHover }) =>
+  ${({ highlightOnHover, theme }) =>
     highlightOnHover
-      ? `:hover { background-color: ${alpha("error", 0.15)}; }`
+      ? css`
+          :hover {
+            background-color: ${alpha(theme.fn.themeColor("error"), 0.15)};
+          }
+        `
       : ""}
 `;

enterprise/frontend/src/metabase-enterprise/group_managers/components/UserTypeCell/UserTypeCell.styled.tsx

@@ -4,7 +4,7 @@ import { color } from "metabase/lib/colors";
 
 export const ChangeTypeButton = styled.button`
   padding: 0 0.25rem;
-  color: ${color("filter")};
+  color: var(--mb-color-filter);
   cursor: pointer;
   vertical-align: middle;
 `;

enterprise/frontend/src/metabase-enterprise/group_managers/components/UserTypeToggle/UserTypeToggle.styled.tsx

 import styled from "@emotion/styled";
 
-import { color } from "metabase/lib/colors";
-
 export const UserTypeToggleRoot = styled.button`
   padding: 0 0.5rem;
-  color: ${color("filter")};
+  color: var(--mb-color-filter);
   cursor: pointer;
   vertical-align: middle;
 `;

enterprise/frontend/src/metabase-enterprise/moderation/components/ModerationReviewBanner/ModerationReviewBanner.styled.tsx

@@ -38,6 +38,6 @@ export const IconButton = styled(Button)`
 
   &:hover {
     background-color: transparent;
-    color: ${color("danger")};
+    color: var(--mb-color-danger);
   }
 `;

frontend/src/metabase/actions/components/ActionViz/ActionButton.styled.tsx

+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
 import Button from "metabase/core/components/Button";
-import { color } from "metabase/lib/colors";
 
 export const StyledButton = styled(Button)<{
   isFullHeight?: boolean;
@@ -12,9 +12,9 @@ export const StyledButton = styled(Button)<{
 
   ${({ focus }) =>
     focus
-      ? `
-    border: 2px solid ${color("focus")};
-  `
+      ? css`
+          border: 2px solid var(--mb-color-focus);
+        `
       : ""}
 `;
 

frontend/src/metabase/actions/containers/ActionCreator/FormCreator/OptionEditor.styled.tsx

@@ -22,7 +22,7 @@ export const AddMorePrompt = styled.div<{ isVisible: boolean }>`
 export const ErrorMessage = styled.div`
   text-align: center;
   font-size: 0.875rem;
-  color: ${color("error")};
+  color: var(--mb-color-error);
 `;
 
 export const TextArea = styled.textarea`

frontend/src/metabase/admin/databases/components/DatabaseEditApp/Sidebar/ModelActionsSection/ModelActionsSection.styled.tsx

@@ -25,7 +25,7 @@ export const Description = styled.p`
 `;
 
 export const Error = styled(Description)`
-  color: ${color("error")};
-  border-left: 3px solid ${color("error")};
+  color: var(--mb-color-error);
+  border-left: 3px solid var(--mb-color-error);
   padding-left: 12px;
 `;

frontend/src/metabase/admin/databases/components/DatabaseEditApp/Sidebar/ModelCachingControl/ModelCachingControl.styled.tsx

@@ -33,6 +33,6 @@ export const FeatureDescriptionText = styled.p`
 
 export const ErrorMessage = styled.p`
   width: 80%;
-  color: ${color("error")};
+  color: var(--mb-color-error);
   line-height: 1.5rem;
 `;

frontend/src/metabase/admin/databases/components/DeleteDatabaseModel/DeleteDatabaseModal.styled.tsx

 import styled from "@emotion/styled";
 
-import { color } from "metabase/lib/colors";
-
 export const DeleteDatabaseModalRoot = styled.form`
   display: flex;
   flex-direction: column;
@@ -35,7 +33,7 @@ export const DeleteDatabaseModalSection = styled.div<DeleteDatabaseModalSectionP
 `;
 
 export const ErrorMessage = styled.div`
-  color: ${color("error")};
+  color: var(--mb-color-error);
   padding: 0 1rem;
 `;
 

frontend/src/metabase/admin/datamodel/components/DimensionList/DimensionList.styled.tsx

@@ -5,6 +5,6 @@ import { alpha } from "metabase/lib/colors";
 export const FieldListGroupingTrigger = styled.div`
   display: flex;
   visibility: hidden;
-  border-left: 2px solid ${alpha("filter", 0.1)};
+  border-left: 2px solid ${() => alpha("filter", 0.1)};
   color: ${alpha("text-white", 0.5)};
 `;

frontend/src/metabase/admin/datamodel/components/FilterWidget/FilterWidget.styled.tsx

 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
-import { color } from "metabase/lib/colors";
-
 export interface FilterWidgetRootProps {
   isSelected: boolean;
 }
@@ -16,7 +14,7 @@ export const FilterWidgetRoot = styled.div<FilterWidgetRootProps>`
   ${({ isSelected }) =>
     isSelected &&
     css`
-      border-color: ${color("filter")};
+      border-color: var(--mb-color-filter);
     `}
 `;
 
@@ -35,7 +33,7 @@ export const FilterSection = styled.div`
 `;
 
 export const FilterField = styled(FilterSection)`
-  color: ${color("filter")};
+  color: var(--mb-color-filter);
   font-weight: 700;
 
   &:hover {
@@ -43,14 +41,14 @@ export const FilterField = styled(FilterSection)`
   }
 
   ${QueryOption} {
-    color: ${color("filter")};
+    color: var(--mb-color-filter);
   }
 `;
 
 export const FilterOperator = styled(FilterSection)`
-  color: ${color("filter")};
+  color: var(--mb-color-filter);
 
   ${QueryOption} {
-    color: ${color("filter")};
+    color: var(--mb-color-filter);
   }
 `;

frontend/src/metabase/admin/datamodel/components/filters/pickers/LegacyDatePicker/HoursMinutesInput.styled.tsx

@@ -13,6 +13,6 @@ export const AmPmLabel = styled.span<AmPmLabelProps>`
   cursor: ${props => !props.isSelected && "pointer"};
 
   &:hover {
-    color: ${color("filter")};
+    color: var(--mb-color-filter);
   }
 `;

frontend/src/metabase/admin/datamodel/components/filters/pickers/LegacyDatePicker/RelativeDatePicker.styled.tsx

 import styled from "@emotion/styled";
 
 import NumericInput from "metabase/components/NumericInput";
-import { color } from "metabase/lib/colors";
 
 export const IntervalInput = styled(NumericInput)`
-  border-color: ${color("filter")};
+  border-color: var(--mb-color-filter);
 `;

frontend/src/metabase/admin/datamodel/components/filters/pickers/LegacyDatePicker/SpecificDatePicker.styled.tsx

 import styled from "@emotion/styled";
 
-import { color } from "metabase/lib/colors";
-
 export const TimeLabel = styled.div`
   display: flex;
   align-items: center;
   cursor: pointer;
 
   &:hover {
-    color: ${color("filter")};
+    color: var(--mb-color-filter);
   }
 `;

frontend/src/metabase/admin/datamodel/components/filters/pickers/SelectPicker.styled.tsx

@@ -12,7 +12,7 @@ export const SelectPickerButton = styled.button<SelectPickerButtonProps>`
   font-weight: 700;
   width: 100%;
   height: 95px;
-  border: 1px solid ${color("filter")};
+  border: 1px solid var(--mb-color-filter);
   border-radius: 0.5rem;
   background-color: ${props =>
     props.isSelected ? color("filter") : color("white")};

frontend/src/metabase/admin/datamodel/components/filters/pickers/TextPicker.styled.tsx

@@ -2,19 +2,17 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import AutosizeTextarea from "react-textarea-autosize";
 
-import { color } from "metabase/lib/colors";
-
 export interface TextPickerInputProps {
   hasInvalidValues: boolean;
 }
 
 export const TextPickerInput = styled.input<TextPickerInputProps>`
-  border-color: ${color("filter")};
+  border-color: var(--mb-color-filter);
 
   ${({ hasInvalidValues }) =>
     hasInvalidValues &&
     css`
-      border-color: ${color("error")};
+      border-color: var(--mb-color-error);
     `}
 `;
 
@@ -23,11 +21,11 @@ export interface TextPickerAreaProps {
 }
 
 export const TextPickerArea = styled(AutosizeTextarea)<TextPickerAreaProps>`
-  border-color: ${color("filter")};
+  border-color: var(--mb-color-filter);
 
   ${({ hasInvalidValues }) =>
     hasInvalidValues &&
     css`
-      border-color: ${color("error")};
+      border-color: var(--mb-color-error);
     `}
 `;