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/core/components/Markdown/Markdown.styled.tsx

@@ -31,7 +31,8 @@ export const MarkdownRoot = styled(getComponent(ReactMarkdown))<MarkdownProps>`
   a {
     cursor: pointer;
     text-decoration: none;
-    color: ${props => (props.unstyleLinks ? color("white") : color("brand"))};
+    color: ${props =>
+      props.unstyleLinks ? color("text-white") : color("brand")};
   }
 
   a:hover {

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

@@ -98,7 +98,9 @@ export const RadioContainerBubble = styled(RadioContainer)`
   border-radius: 10rem;
   font-weight: bold;
   color: ${props =>
-    props.checked ? color("white") : getContrastSchemeColor(props.colorScheme)};
+    props.checked
+      ? color("text-white")
+      : getContrastSchemeColor(props.colorScheme)};
   background-color: ${props =>
     props.checked
       ? getSchemeColor(props.colorScheme)

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

@@ -29,7 +29,7 @@ export const SelectButtonRoot = styled.button<SelectButtonRootProps>`
     ${({ hasValue, highlighted }) =>
       hasValue && highlighted ? color("brand") : color("border")};
   background-color: ${({ hasValue, highlighted }) =>
-    hasValue && highlighted ? color("brand") : color("white")};
+    hasValue && highlighted ? color("brand") : color("bg-white")};
   border-radius: ${space(1)};
   font-weight: 700;
   min-width: 104px;

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

 import { css } from "@emotion/react";
 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 THUMB_SIZE = "1.2rem";
@@ -24,7 +24,7 @@ const thumbStyles = `
   border-radius: 50%;
   border: 2px solid var(--mb-color-brand);
   box-sizing: border-box;
-  background-color: ${color("white")};
+  background-color: var(--mb-color-bg-white);
   cursor: pointer;
   box-shadow: 0 0 2px 1px var(--mb-color-brand);
   pointer-events: all;
@@ -81,7 +81,7 @@ export const SliderTooltip = styled.div`
   text-align: center;
   padding: ${space(0.5)} ${space(1)};
   background: var(--mb-color-bg-black);
-  color: ${color("white")};
+  color: var(--mb-color-text-white);
   display: block;
   border-radius: ${space(1)};
   opacity: 0;

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

@@ -43,7 +43,6 @@ export const ScrollButton = styled.button<ScrollButtonProps>`
   position: absolute;
   cursor: pointer;
   height: 100%;
-  height: 100%;
   width: 3rem;
   padding-bottom: ${space(2)};
   text-align: ${props => props.direction};
@@ -54,9 +53,9 @@ export const ScrollButton = styled.button<ScrollButtonProps>`
   ${props => props.direction}: 0;
   background: linear-gradient(
     to ${props => props.direction},
-    ${alpha("white", 0.1)},
-    ${alpha("white", 0.5)},
+    ${() => alpha("bg-white", 0.1)},
+    ${() => alpha("bg-white", 0.5)},
     30%,
-    ${color("white")}
+    var(--mb-color-bg-white)
   );
 `;

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

@@ -59,7 +59,7 @@ export const ToggleRoot = styled.input<ToggleRootProps>`
     position: absolute;
     top: 1px;
     transform: translateX(${getTranslateX});
-    background-color: ${color("white")};
+    background-color: var(--mb-color-bg-white);
     transition: transform 0.3s;
     box-shadow: 2px 2px 6px var(--mb-color-shadow);
   }

frontend/src/metabase/css/components/buttons.module.css

@@ -61,25 +61,25 @@
 }
 
 .ButtonPrimary {
-  color: var(--color-text-white);
+  color: var(--mb-color-text-white);
   background: var(--mb-color-brand);
   border: 1px solid var(--mb-color-brand);
 }
 
 .ButtonPrimary:hover {
-  color: var(--color-text-white);
+  color: var(--mb-color-text-white);
   border-color: var(--mb-color-brand);
   background-color: var(--mb-color-brand-alpha-88);
 }
 
 .ButtonWarning {
-  color: var(--color-text-white);
+  color: var(--mb-color-text-white);
   background: var(--mb-color-error);
   border: 1px solid var(--mb-color-error);
 }
 
 .ButtonWarning:hover {
-  color: var(--color-text-white);
+  color: var(--mb-color-text-white);
   border-color: var(--mb-color-error);
   background-color: var(--mb-color-error);
 }
@@ -131,8 +131,8 @@
 }
 
 .ButtonGroup .ButtonActive {
-  background-color: var(--color-success);
-  color: var(--color-text-white);
+  background-color: var(--mb-color-success);
+  color: var(--mb-color-text-white);
 }
 
 .ButtonGroup .Button:first-child {
@@ -162,7 +162,7 @@
 .ButtonDanger {
   background-color: var(--mb-color-error);
   border-color: var(--mb-color-error);
-  color: var(--color-text-white);
+  color: var(--mb-color-text-white);
 }
 
 .ButtonDanger:hover {
@@ -172,15 +172,15 @@
 }
 
 .ButtonSuccess {
-  background-color: var(--color-success);
-  border-color: var(--color-success);
-  color: var(--color-text-white);
+  background-color: var(--mb-color-success);
+  border-color: var(--mb-color-success);
+  color: var(--mb-color-text-white);
 }
 
 .ButtonSuccess:hover {
-  background-color: var(--color-success);
-  border-color: var(--color-success);
-  color: var(--color-text-white);
+  background-color: var(--mb-color-success);
+  border-color: var(--mb-color-success);
+  color: var(--mb-color-text-white);
 }
 
 .ButtonFullWidth {

frontend/src/metabase/css/core/bordered.module.css

@@ -52,7 +52,7 @@
 }
 
 .borderSuccess {
-  border-color: var(--color-success) !important;
+  border-color: var(--mb-color-success) !important;
 }
 
 .borderBrand {

frontend/src/metabase/css/core/colors.module.css

@@ -6,18 +6,17 @@
  * .storybook/preview-head.html
  */
 :root {
-  --color-white: #fff;
+  --mb-color-text-white: #fff;
   --mb-color-brand: #509ee3;
   --mb-color-brand-light: #f9fbfc;
   --mb-color-brand-lighter: #eef6fc;
-  --color-success: #84bb4c;
+  --mb-color-success: #84bb4c;
   --mb-color-summarize: #88bf4d;
   --mb-color-error: #ed6e6e;
   --mb-color-danger: #ed6e6e;
   --mb-color-text-dark: #4c5773;
   --mb-color-text-medium: #696e7b;
   --mb-color-text-light: #949aab;
-  --color-text-white: #fff;
   --mb-color-bg-black: #2e353b;
   --mb-color-bg-dark: #93a1ab;
   --mb-color-bg-medium: #edf2f5;
@@ -29,6 +28,7 @@
   --mb-color-border: #eeecec;
   --mb-color-filter: #7172ad;
   --mb-color-focus: #cbe2f7;
+  --mb-color-warning: #f9cf48;
 }
 
 .textDefault {
@@ -40,7 +40,7 @@
 }
 
 .textSuccess {
-  color: var(--color-success);
+  color: var(--mb-color-success);
 }
 
 /* error */
@@ -92,7 +92,7 @@
 /* white  - move to bottom for specificity since its often used on hovers, etc */
 .textWhite,
 .textWhiteHover:hover {
-  color: var(--color-text-white);
+  color: var(--mb-color-text-white);
 }
 
 .bgWhite {

frontend/src/metabase/css/dashboard.module.css

@@ -10,7 +10,7 @@
 }
 
 .Dashboard.DashboardNight .Card {
-  color: var(--color-text-white);
+  color: var(--mb-color-text-white);
 }
 
 .Dashboard.DashboardFullscreen .fullscreenNormalText {
@@ -19,12 +19,12 @@
 }
 
 .Dashboard.DashboardNight.DashboardFullscreen .fullscreenNightText {
-  color: color-mod(var(--color-text-white) alpha(-14%));
+  color: color-mod(var(--mb-color-text-white) alpha(-14%));
   transition: color 1s linear;
 }
 
 .Dashboard.DashboardNight .DashCard .Card svg text {
-  fill: color-mod(var(--color-text-white) alpha(-14%)) !important;
+  fill: color-mod(var(--mb-color-text-white) alpha(-14%)) !important;
   stroke: none !important;
 }
 

frontend/src/metabase/css/query_builder.module.css

@@ -91,15 +91,15 @@
 }
 
 .SelectionItem:hover :global(.Icon) {
-  color: var(--color-text-white) !important;
+  color: var(--mb-color-text-white) !important;
 }
 
 .SelectionItem:hover .SelectionModuleDisplay {
-  color: var(--color-text-white);
+  color: var(--mb-color-text-white);
 }
 
 .SelectionItem:hover .SelectionModuleDescription {
-  color: var(--color-text-white);
+  color: var(--mb-color-text-white);
 }
 
 .SelectionItem.SelectionItemSelected :global(.Icon-check) {

frontend/src/metabase/dashboard/components/ClickBehaviorSidebar/SidebarItem/SidebarItem.styled.tsx

@@ -41,7 +41,7 @@ export const SelectableSidebarItemRoot = styled(BaseSidebarItemRoot)<{
   background-color: ${props =>
     props.isSelected ? color("brand") : "transparent"};
 
-  color: ${props => (props.isSelected ? color("white") : "inherit")};
+  color: ${props => (props.isSelected ? color("text-white") : "inherit")};
 `;
 
 export const Content = styled.div`

frontend/src/metabase/dashboard/components/ClickBehaviorSidebar/TypeSelector/TypeSelector.styled.tsx

@@ -11,6 +11,7 @@ export const BehaviorOptionIcon = styled(SidebarItem.Icon)<{
     props.isSelected ? "transparent" : "var(--mb-color-border)"};
 
   .Icon {
-    color: ${props => (props.isSelected ? color("white") : color("brand"))};
+    color: ${props =>
+      props.isSelected ? color("text-white") : color("brand")};
   }
 `;

frontend/src/metabase/dashboard/components/ClickBehaviorSidebar/TypeSelector/TypeSelector.tsx

@@ -45,7 +45,7 @@ export const BehaviorOption = ({
     >
       <BehaviorOptionIcon
         name={selected ? "check" : icon}
-        color={selected ? color("white") : color("brand")}
+        color={selected ? color("text-white") : color("brand")}
         isSelected={selected}
       />
       <SidebarItem.Content>

frontend/src/metabase/dashboard/components/DashCard/DashCardParameterMapper/DashCardCardParameterMapper.styled.tsx

@@ -45,7 +45,7 @@ export const TargetButton = styled.div<{ variant: string }>`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: ${color("white")};
+  background-color: var(--mb-color-bg-white);
   cursor: pointer;
   border: 2px solid var(--mb-color-brand);
   border-radius: 8px;
@@ -67,7 +67,7 @@ export const TargetButton = styled.div<{ variant: string }>`
     css`
       border-color: var(--mb-color-brand);
       background-color: var(--mb-color-brand);
-      color: ${color("white")};
+      color: var(--mb-color-text-white);
     `}
 
   ${({ variant }) =>
@@ -84,7 +84,7 @@ export const TargetButton = styled.div<{ variant: string }>`
     css`
       border-color: var(--mb-color-error);
       background-color: var(--mb-color-error);
-      color: ${color("white")};
+      color: var(--mb-color-text-white);
     `}
 `;
 
@@ -100,14 +100,14 @@ export const TargetButtonText = styled.span`
 `;
 
 export const CloseIconButton = styled(Button)<{ icon?: string; size?: number }>`
-  color: ${color("white")};
+  color: var(--mb-color-text-white);
   background-color: transparent;
   border: none;
   padding: ${space(0)} !important;
 
   &:hover {
-    color: ${color("white")};
-    background-color: ${alpha("white", 0.2)};
+    color: var(--mb-color-text-white);
+    background-color: ${() => alpha("bg-white", 0.2)};
   }
 `;
 

frontend/src/metabase/dashboard/components/Dashboard/Dashboard.styled.tsx

@@ -85,7 +85,7 @@ export const DashboardHeaderContainer = styled.header<{
   ${({ isNightMode }) =>
     isNightMode &&
     css`
-      color: ${color("text-white")};
+      color: var(--mb-color-text-white);
     `}
 `;
 

frontend/src/metabase/dashboard/components/Dashboard/DashboardEmptyState/DashboardEmptyState.styled.tsx

 import styled from "@emotion/styled";
 
+import { color } from "metabase/lib/colors";
 import { space } from "metabase/styled-components/theme";
 
 export const Container = styled.div<{ isNightMode: boolean }>`
   box-sizing: border-box;
-  color: ${({ isNightMode }) => (isNightMode ? "white" : "inherit")};
+  color: ${({ isNightMode }) =>
+    isNightMode ? color("text-white") : "inherit"};
   margin-top: ${space(4)};
 `;
 

frontend/src/metabase/dashboard/components/DashboardHeader/SectionLayoutPreview.tsx

@@ -75,7 +75,7 @@ function PreviewCard({
       h={`${height}px`}
       top={`${top}px`}
       left={`${left}px`}
-      bg="white"
+      bg="bg-white"
       style={{ borderRadius: "2px" }}
     />
   );

frontend/src/metabase/dashboard/components/DashboardInfoSidebar/DashboardInfoSidebar.styled.tsx

@@ -2,7 +2,6 @@ import styled from "@emotion/styled";
 
 import EditableText from "metabase/core/components/EditableText";
 import FormField from "metabase/core/components/FormField/FormField";
-import { color } from "metabase/lib/colors";
 import { breakpointMaxSmall } from "metabase/styled-components/theme";
 
 import { SIDEBAR_WIDTH } from "../Sidebar";
@@ -10,7 +9,7 @@ import { SIDEBAR_WIDTH } from "../Sidebar";
 export const DashboardInfoSidebarRoot = styled.aside`
   width: ${SIDEBAR_WIDTH}px;
   min-width: ${SIDEBAR_WIDTH}px;
-  background: ${color("white")};
+  background: var(--mb-color-bg-white);
   border-left: 1px solid var(--mb-color-border);
   align-self: stretch;
   // FIXME: ensure that removing this style is OK

frontend/src/metabase/dashboard/components/DashboardMoveModal.tsx

@@ -57,7 +57,7 @@ const DashboardMoveToast = ({
   collectionId: CollectionId;
 }) => (
   <ToastRoot>
-    <Icon name="collection" className="mr1" color="white" />
+    <Icon name="collection" className="mr1" color="text-white" />
     {jt`Dashboard moved to ${(
       <Collection.Link
         id={collectionId}