feat(sdk): SDK theming part 5 - success, summarize, warning, white, text-white, bg-white (#43676)

* Migrate success

* Migrate summarize

* Migrate warning

* Migrate white

* Add colors to storybook

* Fix CI

* Fix CI

* Codereview fixes

* Convert warning color

.storybook/preview-head.html

 <style>
   :root {
     --mb-default-font-family: "Lato";
-    --mb-color-brand: #509ee3;
-    --mb-color-brand-alpha-04: rgba(80, 158, 227, 0.04);
-    --mb-color-brand-alpha-88: rgba(80, 158, 227, 0.88);
-    --mb-color-focus: #cbe2f7;
     --mb-color-bg-dark: #93a1ab;
-    --mb-color-bg-light: #f9fbfc;
     --mb-color-bg-error: #ed6e6e55;
+    --mb-color-bg-light: #f9fbfc;
     --mb-color-bg-medium: #edf2f5;
     --mb-color-bg-night: #42484e;
     --mb-color-bg-white: #fff;
     --mb-color-border: #eeecec;
+    --mb-color-brand-alpha-04: rgba(80, 158, 227, 0.04);
+    --mb-color-brand-alpha-88: rgba(80, 158, 227, 0.88);
     --mb-color-brand-light: #f9fbfc;
     --mb-color-brand-lighter: #eef6fc;
+    --mb-color-brand: #509ee3;
+    --mb-color-danger: #ed6e6e;
+    --mb-color-error: #ed6e6e;
     --mb-color-filter: #7172ad;
+    --mb-color-focus: #cbe2f7;
+    --mb-color-shadow: rgba(0, 0, 0, 0.13);
+    --mb-color-success: #84bb4c;
+    --mb-color-summarize: #88bf4d;
+    --mb-color-text-white: #fff;
+    --mb-color-warning: #f9cf48;
 
     /*
       Theming-specific CSS variables.

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

@@ -59,6 +59,10 @@ const SdkContentWrapperInner = styled.div<
   --mb-color-bg-error: ${() => color("bg-error")};
   --mb-color-bg-medium: ${({ theme }) => theme.fn.themeColor("bg-medium")};
   --mb-color-bg-night: ${() => color("bg-night")};
+  --mb-color-text-white: ${({ theme }) => theme.fn.themeColor("text-white")};
+  --mb-color-success: ${({ theme }) => theme.fn.themeColor("success")};
+  --mb-color-summarize: ${({ theme }) => theme.fn.themeColor("summarize")};
+  --mb-color-warning: ${({ theme }) => theme.fn.themeColor("warning")};
 
   /**
     Theming-specific CSS variables.

enterprise/frontend/src/embedding-sdk/lib/theme/default-component-theme.ts

@@ -48,8 +48,8 @@ export const DEFAULT_METABASE_COMPONENT_THEME: MetabaseComponentTheme = {
   },
   pivotTable: {
     rowToggle: {
-      textColor: "white",
-      backgroundColor: "text-light",
+      textColor: "text-white",
+      backgroundColor: "text-light", // TODO: should it be "bg-dark" ?
     },
   },
   cartesian: {

enterprise/frontend/src/metabase-enterprise/caching/components/InvalidateNowButton.tsx

@@ -40,7 +40,7 @@ export const InvalidateNowButton = ({
             icon: "warning",
             message: e.data.message,
             toastColor: "error",
-            dismissIconColor: color("white"),
+            dismissIconColor: color("text-white"),
           }),
         );
       }

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

@@ -59,7 +59,7 @@ export const StyledLauncher = styled(Flex)<
   font-weight: ${({ forRoot, inheritsRootStrategy }) =>
     forRoot || inheritsRootStrategy ? "normal" : "bold"};
   background-color: ${({ forRoot }) =>
-    forRoot ? "var(--mb-color-bg-medium)" : color("white")};
+    forRoot ? color("bg-medium") : color("bg-white")};
   ${({ forRoot }) =>
     !forRoot &&
     css`

enterprise/frontend/src/metabase-enterprise/hosting/components/SettingsCloudStoreLink/SettingsCloudStoreLink.styled.tsx

@@ -12,7 +12,7 @@ export const Description = styled.p`
 export const Link = styled(ExternalLink)`
   display: inline-flex;
   align-items: center;
-  color: ${color("text-white")};
+  color: var(--mb-color-text-white);
   font-weight: bold;
   background-color: var(--mb-color-brand);
   padding: 12px 18px;
@@ -25,7 +25,7 @@ export const Link = styled(ExternalLink)`
 `;
 
 export const LinkIcon = styled(Icon)`
-  color: ${color("text-white")};
+  color: var(--mb-color-text-white);
   opacity: 0.6;
   margin-left: 8px;
 `;

enterprise/frontend/src/metabase-enterprise/license/components/BillingInfo/BillingInfo.styled.tsx

@@ -4,7 +4,6 @@ import styled from "@emotion/styled";
 import Card from "metabase/components/Card";
 import ExternalLink from "metabase/core/components/ExternalLink";
 import Link from "metabase/core/components/Link";
-import { color } from "metabase/lib/colors";
 import { Icon } from "metabase/ui";
 
 export const BillingInfoCard = styled(Card)`
@@ -39,7 +38,7 @@ export const BillingExternalLinkIcon = styled(Icon)`
 export const StoreButtonLink = styled(ExternalLink)`
   display: inline-flex;
   background-color: var(--mb-color-brand);
-  color: ${color("text-white")};
+  color: var(--mb-color-text-white);
   align-items: center;
   font-weight: bold;
   padding: 0.75rem 1rem;

enterprise/frontend/src/metabase-enterprise/whitelabel/components/ImageUpload/ImageUpload.styled.tsx

@@ -8,7 +8,7 @@ export const FileInput = styled.input`
     margin-right: 1rem;
     border-radius: 4px;
     border: 1px solid var(--mb-color-border);
-    background-color: ${color("white")};
+    background-color: var(--mb-color-bg-white);
     color: ${color("text-dark")};
     transition: 200ms;
     cursor: pointer;

frontend/src/metabase/account/app/components/AccountHeader/AccountHeader.styled.tsx

@@ -15,7 +15,7 @@ export const AccountHeaderRoot = styled.div`
   align-items: center;
   padding-top: ${space(1)};
   border-bottom: 1px solid var(--mb-color-border);
-  background-color: ${color("white")};
+  background-color: var(--mb-color-bg-white);
 
   ${breakpointMinSmall} {
     padding-top: ${space(2)};

frontend/src/metabase/account/login-history/components/LoginHistory/LoginHistory.styled.tsx

 import styled from "@emotion/styled";
 
 import Label from "metabase/components/type/Label";
-import { color } from "metabase/lib/colors";
 
 export const LoginGroup = styled.div`
   padding: 1rem 0;
@@ -18,5 +17,5 @@ export const LoginItemInfo = styled.div`
 `;
 
 export const LoginActiveLabel = styled(Label)`
-  color: ${color("summarize")};
+  color: var(--mb-color-summarize);
 `;

frontend/src/metabase/account/notifications/components/NotificationCard/NotificationCard.styled.tsx

@@ -9,7 +9,7 @@ export const NotificationCardRoot = styled.div`
   padding: 1rem 1.5rem;
   border: 1px solid var(--mb-color-border);
   border-radius: 6px;
-  background-color: ${color("white")};
+  background-color: var(--mb-color-bg-white);
 
   &:not(:last-child) {
     margin-bottom: 1.25rem;

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

 import styled from "@emotion/styled";
 
-import { color } from "metabase/lib/colors";
 import { space } from "metabase/styled-components/theme";
 
 export const FormWrapper = styled.div`
   padding: 1.5rem;
-  background-color: ${color("white")};
+  background-color: var(--mb-color-bg-white);
   border-radius: ${space(1)};
   border: 1px solid var(--mb-color-border);
   overflow-y: auto;

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

 import styled from "@emotion/styled";
 
-import { color } from "metabase/lib/colors";
 import SidebarContent from "metabase/query_builder/components/SidebarContent";
 import { space } from "metabase/styled-components/theme";
 
@@ -66,7 +65,7 @@ export const ModalRight = styled.div`
     top: 0;
     padding: 1.5rem 1.5rem 0.5rem 1.5rem;
     margin: 0;
-    background-color: ${color("white")};
+    background-color: var(--mb-color-bg-white);
     z-index: 5;
   }
 `;

frontend/src/metabase/actions/containers/ActionCreator/ActionCreatorHeader.styled.tsx

@@ -12,7 +12,7 @@ export const Container = styled.div`
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  background-color: ${color("white")};
+  background-color: var(--mb-color-bg-white);
   border-bottom: 1px solid var(--mb-color-border);
   padding: ${space(2)} ${space(3)};
 `;

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

 import styled from "@emotion/styled";
 
-import { color, alpha } from "metabase/lib/colors";
+import { alpha } from "metabase/lib/colors";
 import { space } from "metabase/styled-components/theme";
 
 export const FormContainer = styled.div`
@@ -8,7 +8,7 @@ export const FormContainer = styled.div`
   gap: ${space(2)};
   padding: 0 1.5rem 1rem;
   transition: flex 500ms ease-in-out;
-  background-color: ${color("white")};
+  background-color: var(--mb-color-bg-white);
   flex-direction: column;
 `;
 
@@ -24,8 +24,8 @@ export const FieldSettingsButtonsContainer = styled.div`
 
 export const WarningBanner = styled.div`
   padding: ${space(2)};
-  border: 1px solid ${color("warning")};
+  border: 1px solid var(--mb-color-warning);
   border-radius: ${space(1)};
-  background: ${alpha("warning", 0.1)};
+  background: ${() => alpha("warning", 0.1)};
   line-height: 1.25rem;
 `;

frontend/src/metabase/actions/containers/ActionPicker/ActionOptionItem.styled.tsx

@@ -12,7 +12,7 @@ export const ActionOptionListItem = styled.div<ActionOptionProps>`
   color: ${props =>
     props.isSelected ? color("text-white") : color("text-normal")};
   background-color: ${props =>
-    props.isSelected ? "var(--mb-color-brand)" : color("white")};
+    props.isSelected ? color("brand") : color("bg-white")};
   cursor: pointer;
 
   display: flex;
@@ -27,7 +27,7 @@ export const ActionOptionListItem = styled.div<ActionOptionProps>`
 
   &:hover {
     background-color: ${() => lighten("brand", 0.1)};
-    color: ${color("text-white")};
+    color: var(--mb-color-text-white);
   }
 `;
 

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

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

frontend/src/metabase/admin/datamodel/components/GuiQueryEditor/GuiQueryEditor.module.css

@@ -29,5 +29,5 @@
 /* create a smaller inset arrow on the right */
 .arrowRight::after {
   right: -19px;
-  border-left-color: var(--color-white);
+  border-left-color: var(--mb-color-bg-white);
 }

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

@@ -10,7 +10,7 @@ export const ActionLink = styled(Link)`
   text-decoration: none;
 
   &:hover {
-    color: ${color("white")};
+    color: var(--mb-color-text-white);
     background-color: var(--mb-color-brand);
   }
 `;

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

@@ -12,7 +12,7 @@ export const CurrentContainer = styled.div<{ first?: boolean }>`
 `;
 
 export const CurrentPopover = styled.div`
-  color: ${color("white")};
+  color: var(--mb-color-text-white);
   background-color: var(--mb-color-bg-black);
   padding: ${space(1)} ${space(2)};
 `;
@@ -29,7 +29,7 @@ export const CurrentButton = styled(Button)<ButtonProps>`
   background-color: ${({ selected, primaryColor = color("brand") }) =>
     selected ? primaryColor : alpha(primaryColor, 0.1)};
   color: ${({ selected, primaryColor = color("brand") }) =>
-    selected ? "white" : primaryColor};
+    selected ? "var(--mb-color-text-white)" : primaryColor};
 
   padding-top: ${space(1)};
   padding-bottom: ${space(1)};