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

frontend/src/metabase/components/DateMonthYearWidget/DateMonthYearWidget.styled.tsx

@@ -28,8 +28,8 @@ export const MonthRoot = styled.div<MonthRootProps>`
   margin: 0.5rem 0;
   padding: 0.5rem 1rem;
   border-radius: 99px;
-  color: ${props => props.isSelected && color("white")};
-  background-color: ${props => props.isSelected && "var(--mb-color-brand)"};
+  color: ${props => props.isSelected && color("text-white")};
+  background-color: ${props => props.isSelected && color("brand")};
 
   &:hover {
     background-color: ${props =>

frontend/src/metabase/components/DateQuarterYearWidget/DateQuarterYearWidget.styled.tsx

 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
-import { color } from "metabase/lib/colors";
-
 export interface QuarterRootProps {
   isSelected: boolean;
 }
@@ -16,14 +14,14 @@ export const QuarterRoot = styled.li<QuarterRootProps>`
   cursor: pointer;
 
   &:hover {
-    color: ${color("white")};
+    color: var(--mb-color-text-white);
     background-color: var(--mb-color-brand);
   }
 
   ${({ isSelected }) =>
     isSelected &&
     css`
-      color: ${color("white")};
+      color: var(--mb-color-text-white);
       background-color: var(--mb-color-brand);
     `}
 `;

frontend/src/metabase/components/EditBar/EditBar.styled.tsx

@@ -18,9 +18,8 @@ export const Root = styled(FullWidthContainer)<{ admin: boolean }>`
     alpha(color(props.admin ? "accent7" : "brand"), 0.85)};
 
   .${ButtonsS.Button} {
-    color: ${color("text-white")};
-    background-color: ${({ theme }) =>
-      alpha(theme.fn.themeColor("bg-white"), 0.1)};
+    color: var(--mb-color-text-white);
+    background-color: ${() => alpha(color("bg-white"), 0.1)};
 
     border: none;
     font-size: 1em;
@@ -33,23 +32,23 @@ export const Root = styled(FullWidthContainer)<{ admin: boolean }>`
   }
 
   .${ButtonsS.Button}:hover {
-    color: ${color("text-white")};
+    color: var(--mb-color-text-white);
     background-color: ${props => color(props.admin ? "accent7" : "brand")};
   }
 `;
 
 export const EditIcon = styled(Icon)`
-  color: ${color("text-white")};
+  color: var(--mb-color-text-white);
   margin-right: 0.5rem;
 `;
 
 export const Title = styled.span`
-  color: ${color("text-white")};
+  color: var(--mb-color-text-white);
   font-weight: 700;
 `;
 
 export const Subtitle = styled.span`
-  color: ${alpha(color("text-white"), 0.5)};
+  color: ${() => alpha(color("text-white"), 0.5)};
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 `;

frontend/src/metabase/components/HelpCard/HelpCard.styled.tsx

@@ -10,7 +10,7 @@ const CardRootMixin = css`
   padding: 1.5rem;
   border: 1px solid var(--mb-color-border);
   border-radius: 0.375rem;
-  background-color: ${color("white")};
+  background-color: var(--mb-color-bg-white);
   box-shadow: 0 1px 6px var(--mb-color-shadow);
   box-sizing: border-box;
 `;

frontend/src/metabase/components/ItemsTable/BaseItemsTable.styled.tsx

@@ -13,7 +13,7 @@ import type { ResponsiveProps } from "./utils";
 import { getContainerQuery } from "./utils";
 
 export const Table = styled.table<{ isInDragLayer?: boolean }>`
-  background-color: ${color("white")};
+  background-color: var(--mb-color-bg-white);
   table-layout: fixed;
   border-collapse: unset;
   border-radius: 0.5rem;

frontend/src/metabase/components/MetadataInfo/MetadataInfo.styled.tsx

@@ -64,7 +64,7 @@ export const RelativeSizeIcon = styled(Icon)`
 
 export const InvertedColorRelativeSizeIcon = styled(RelativeSizeIcon)`
   background-color: var(--mb-color-brand);
-  color: ${color("white")};
+  color: var(--mb-color-text-white);
   border-radius: 0.3em;
   padding: 0.3em;
 `;

frontend/src/metabase/components/ModalContent/ModalContent.stories.tsx

@@ -29,7 +29,7 @@ const Template: ComponentStory<typeof ModalContent> = args => {
     <div
       style={{
         width: 1200,
-        background: color("white"),
+        background: color("bg-white"),
         border: "1px solid black",
       }}
     >

frontend/src/metabase/components/SelectList/SelectListItem.styled.tsx

@@ -20,7 +20,7 @@ const activeItemCss = css`
 
   ${ItemIcon},
   ${ItemTitle} {
-    color: ${color("white")};
+    color: var(--mb-color-text-white);
   }
 `;
 

frontend/src/metabase/components/SingleSelectListField/SingleSelectListField.styled.tsx

@@ -42,8 +42,8 @@ export const OptionItem = styled.div<OptionItemProps>`
   padding: 0.5rem 0.6rem;
   width: 100%;
   background-color: ${props =>
-    color(props.selected ? props.selectedColor : color("white"))};
-  color: ${props => color(props.selected ? "white" : color("text"))};
+    color(props.selected ? props.selectedColor : color("bg-white"))};
+  color: ${props => color(props.selected ? "text-white" : color("text"))};
 
   &:hover {
     background-color: ${props =>

frontend/src/metabase/components/Toaster/Toaster.styled.tsx

@@ -30,7 +30,7 @@ export const ToasterContainer = styled.div<ToasterContainerProps>`
 `;
 
 export const ToasterMessage = styled.p`
-  color: ${color("white")};
+  color: var(--mb-color-text-white);
   width: 250px;
   line-height: 24px;
   font-size: 14px;
@@ -40,10 +40,9 @@ export const ToasterMessage = styled.p`
 export const ToasterButton = styled.button`
   display: flex;
   padding: 7px 18px;
-  background-color: ${({ theme }) =>
-    alpha(theme.fn.themeColor("bg-white"), 0.1)};
+  background-color: ${() => alpha(color("bg-white"), 0.1)};
   border-radius: 6px;
-  color: ${color("white")};
+  color: var(--mb-color-text-white);
   width: 90px;
   height: fit-content;
   font-size: 14px;
@@ -52,8 +51,7 @@ export const ToasterButton = styled.button`
 
   &:hover {
     cursor: pointer;
-    background-color: ${({ theme }) =>
-      alpha(theme.fn.themeColor("bg-white"), 0.3)};
+    background-color: ${() => alpha(color("bg-white"), 0.3)};
   }
 `;
 

frontend/src/metabase/components/TokenField/TokenField.styled.tsx

@@ -13,7 +13,7 @@ export const TokenFieldContainer = styled.ul`
 
   max-height: 130px;
 
-  background-color: ${color("white")};
+  background-color: var(--mb-color-bg-white);
   overflow-x: auto;
   overflow-y: auto;
   border-radius: ${space(1)};

frontend/src/metabase/components/UserAvatar/UserAvatar.styled.tsx

 import styled from "@emotion/styled";
 
-import { color as brandColor, color } from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
 
 export interface AvatarProps {
   color?: string;
@@ -10,7 +10,7 @@ export interface AvatarProps {
 }
 
 export const Avatar = styled.div<AvatarProps>`
-  color: ${color("white")};
+  color: var(--mb-color-text-white);
   width: 3em;
   height: 3em;
   display: flex;
@@ -19,6 +19,6 @@ export const Avatar = styled.div<AvatarProps>`
   border-radius: 999px;
   font-weight: 900;
   line-height: 1;
-  background-color: ${({ bg = brandColor("brand") }) => bg};
+  background-color: ${({ bg = color("brand") }) => bg};
   flex-shrink: 0;
 `;

frontend/src/metabase/components/UserPicker/UserPicker.styled.tsx

 import styled from "@emotion/styled";
 
 import UserAvatar from "metabase/components/UserAvatar";
-import { color } from "metabase/lib/colors";
 import { space } from "metabase/styled-components/theme";
 
 export const UserPickerRoot = styled.div`
@@ -16,7 +15,7 @@ export const UserPickerOption = styled.div`
 `;
 
 export const UserPickerAvatar = styled(UserAvatar)`
-  color: ${color("white")};
+  color: var(--mb-color-text-white);
 `;
 
 export const UserPickerText = styled.div`

frontend/src/metabase/components/icons/CountdownIcon.styled.tsx

 import styled from "@emotion/styled";
 
-import { color } from "metabase/lib/colors";
-
 export const IconRoot = styled.svg`
-  color: ${color("summarize")};
+  color: var(--mb-color-summarize);
 `;

frontend/src/metabase/components/tree/TreeNode.styled.tsx

@@ -13,7 +13,7 @@ interface TreeNodeRootProps {
 export const TreeNodeRoot = styled.li<TreeNodeRootProps>`
   display: flex;
   align-items: center;
-  color: ${props => (props.isSelected ? color("white") : color("brand"))};
+  color: ${props => (props.isSelected ? color("text-white") : color("brand"))};
   background-color: ${props => (props.isSelected ? color("brand") : "unset")};
   padding-left: ${props => props.depth + 0.5}rem;
   padding-right: 0.5rem;

frontend/src/metabase/containers/UndoListing.jsx

@@ -83,7 +83,7 @@ function UndoToast({ undo, onUndo, onDismiss }) {
         >
           <CardContent>
             <CardContentSide maw="75ch">
-              {undo.icon && <CardIcon name={undo.icon} color="white" />}
+              {undo.icon && <CardIcon name={undo.icon} color="text-white" />}
               <Ellipsified showTooltip={false}>
                 {renderMessage(undo)}
               </Ellipsified>

frontend/src/metabase/containers/UndoListing.styled.tsx

@@ -59,15 +59,13 @@ export const DefaultText = styled.span`
 
 export const UndoButton = styled(Link)`
   font-weight: bold;
-  background-color: ${({ theme }) =>
-    alpha(theme.fn.themeColor("bg-white"), 0.1)};
+  background-color: ${() => alpha(color("bg-white"), 0.1)};
   padding: 4px 12px;
   margin-left: ${space(1)};
   border-radius: 8px;
 
   :hover {
-    background-color: ${({ theme }) =>
-      alpha(theme.fn.themeColor("bg-white"), 0.3)};
+    background-color: ${() => alpha(color("bg-white"), 0.3)};
   }
 `;
 

frontend/src/metabase/containers/Unsubscribe.styled.tsx

@@ -44,7 +44,7 @@ export const LayoutCard = styled.div`
   width: 100%;
   margin-top: 1.5rem;
   padding: 2.5rem 1.5rem;
-  background-color: ${color("white")};
+  background-color: var(--mb-color-bg-white);
   box-shadow: 0 1px 15px var(--mb-color-shadow);
   border-radius: 6px;
   min-height: 20rem;

frontend/src/metabase/core/components/Button/Button.styled.tsx

 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
-import { alpha, color } from "metabase/lib/colors";
+import { alpha } from "metabase/lib/colors";
 
 export interface ButtonRootProps {
   purple?: boolean;
@@ -22,12 +22,12 @@ export const ButtonRoot = styled.button<ButtonRootProps>`
   ${({ purple, theme }) =>
     purple &&
     css`
-      color: ${color("white")};
+      color: var(--mb-color-text-white);
       background-color: var(--mb-color-filter);
       border: 1px solid var(--mb-color-filter);
 
       &:hover {
-        color: ${color("white")};
+        color: var(--mb-color-text-white);
         background-color: ${alpha(theme.fn.themeColor("filter"), 0.88)};
         border-color: ${alpha(theme.fn.themeColor("filter"), 0.88)};
       }

frontend/src/metabase/core/components/ColorPicker/ColorPicker.styled.tsx

 import styled from "@emotion/styled";
 
-import { color } from "metabase/lib/colors";
-
 export const TriggerContainer = styled.div`
   display: flex;
   align-items: center;
@@ -59,7 +57,7 @@ export const HueContainer = styled.div`
 `;
 
 export const ControlsPointer = styled.div`
-  border: 2px solid ${color("white")};
+  border: 2px solid var(--mb-color-bg-white);
   border-radius: 50%;
   pointer-events: none;
 `;