diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 27940e11057d5f1749d033104765027023a89def..5f4ce19ca00cb15c1d1400ece831a11cc4dd02ac 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,20 +1,27 @@
<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.
diff --git a/enterprise/frontend/src/embedding-sdk/components/private/SdkContentWrapper.tsx b/enterprise/frontend/src/embedding-sdk/components/private/SdkContentWrapper.tsx
index be8936057246ba4ab154c6ad692446b7b5c0df6a..732bf9c8b3b39461c65db122d19da37ec992abb1 100644
--- a/enterprise/frontend/src/embedding-sdk/components/private/SdkContentWrapper.tsx
+++ b/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.
diff --git a/enterprise/frontend/src/embedding-sdk/lib/theme/default-component-theme.ts b/enterprise/frontend/src/embedding-sdk/lib/theme/default-component-theme.ts
index abcf1baa0fad9c8124d396092ede3d68f66980f2..fda2ec8855446710b4162bc6565116b9c3f1e8fa 100644
--- a/enterprise/frontend/src/embedding-sdk/lib/theme/default-component-theme.ts
+++ b/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: {
diff --git a/enterprise/frontend/src/metabase-enterprise/caching/components/InvalidateNowButton.tsx b/enterprise/frontend/src/metabase-enterprise/caching/components/InvalidateNowButton.tsx
index 3e5c0955e9407ac4556a140ac967c666a8ba09ce..c261af7cb42acbbaf7344a4bafd5c922f8d169d1 100644
--- a/enterprise/frontend/src/metabase-enterprise/caching/components/InvalidateNowButton.tsx
+++ b/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"),
}),
);
}
diff --git a/enterprise/frontend/src/metabase-enterprise/caching/components/StrategyFormLauncher.styled.tsx b/enterprise/frontend/src/metabase-enterprise/caching/components/StrategyFormLauncher.styled.tsx
index 39303dd3f115564039fb2212a9988ae59b9911d9..76be3a5897779216ed4f4d16099444943789eac2 100644
--- a/enterprise/frontend/src/metabase-enterprise/caching/components/StrategyFormLauncher.styled.tsx
+++ b/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`
diff --git a/enterprise/frontend/src/metabase-enterprise/hosting/components/SettingsCloudStoreLink/SettingsCloudStoreLink.styled.tsx b/enterprise/frontend/src/metabase-enterprise/hosting/components/SettingsCloudStoreLink/SettingsCloudStoreLink.styled.tsx
index e42c80d264fb1576dd520bc1c5913ae20e4a376a..73fdb993e0e8cca46bc5efd76f1ec2200fd471a2 100644
--- a/enterprise/frontend/src/metabase-enterprise/hosting/components/SettingsCloudStoreLink/SettingsCloudStoreLink.styled.tsx
+++ b/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;
`;
diff --git a/enterprise/frontend/src/metabase-enterprise/license/components/BillingInfo/BillingInfo.styled.tsx b/enterprise/frontend/src/metabase-enterprise/license/components/BillingInfo/BillingInfo.styled.tsx
index e939ad1b0a6ba08ce05868b0c5cb123c2e44c528..394da162832e2b593d230dc007e8ad9130913e28 100644
--- a/enterprise/frontend/src/metabase-enterprise/license/components/BillingInfo/BillingInfo.styled.tsx
+++ b/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;
diff --git a/enterprise/frontend/src/metabase-enterprise/whitelabel/components/ImageUpload/ImageUpload.styled.tsx b/enterprise/frontend/src/metabase-enterprise/whitelabel/components/ImageUpload/ImageUpload.styled.tsx
index 73892e1869cf41c9c00189a5496097759c7080e5..ec5fa12d2131188aad3e29364bfaa13f6acc716e 100644
--- a/enterprise/frontend/src/metabase-enterprise/whitelabel/components/ImageUpload/ImageUpload.styled.tsx
+++ b/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;
diff --git a/frontend/src/metabase/account/app/components/AccountHeader/AccountHeader.styled.tsx b/frontend/src/metabase/account/app/components/AccountHeader/AccountHeader.styled.tsx
index 40ccf65f31076b41e35398857a865245e98696bf..4d67a5eb838d56057d9612f1ba3da1744a6e7341 100644
--- a/frontend/src/metabase/account/app/components/AccountHeader/AccountHeader.styled.tsx
+++ b/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)};
diff --git a/frontend/src/metabase/account/login-history/components/LoginHistory/LoginHistory.styled.tsx b/frontend/src/metabase/account/login-history/components/LoginHistory/LoginHistory.styled.tsx
index 74b030a6c095b2ca4ef6bb60b162a642d1b0d3b1..6e881b2424073c64c244b7dc4ded223097c1dd3c 100644
--- a/frontend/src/metabase/account/login-history/components/LoginHistory/LoginHistory.styled.tsx
+++ b/frontend/src/metabase/account/login-history/components/LoginHistory/LoginHistory.styled.tsx
@@ -1,7 +1,6 @@
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);
`;
diff --git a/frontend/src/metabase/account/notifications/components/NotificationCard/NotificationCard.styled.tsx b/frontend/src/metabase/account/notifications/components/NotificationCard/NotificationCard.styled.tsx
index b2d42dd813ec705045f3b8e3a9685516e32a26b0..3176bc7c7455d4700dc5141cc983e94c87b96641 100644
--- a/frontend/src/metabase/account/notifications/components/NotificationCard/NotificationCard.styled.tsx
+++ b/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;
diff --git a/frontend/src/metabase/actions/components/ActionViz/ActionForm.styled.tsx b/frontend/src/metabase/actions/components/ActionViz/ActionForm.styled.tsx
index 6d3176bb64f689288e27358dc3658cfffe2058e7..b90c9b2a3a2433ea14e7d5d7eb07d2f72cf529f3 100644
--- a/frontend/src/metabase/actions/components/ActionViz/ActionForm.styled.tsx
+++ b/frontend/src/metabase/actions/components/ActionViz/ActionForm.styled.tsx
@@ -1,11 +1,10 @@
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;
diff --git a/frontend/src/metabase/actions/containers/ActionCreator/ActionCreator.styled.tsx b/frontend/src/metabase/actions/containers/ActionCreator/ActionCreator.styled.tsx
index 68aadbd3d698c71d6902cd2b01303c22406141c0..640d71a1e07f2b7f015c6c5cd4a520f0470332cd 100644
--- a/frontend/src/metabase/actions/containers/ActionCreator/ActionCreator.styled.tsx
+++ b/frontend/src/metabase/actions/containers/ActionCreator/ActionCreator.styled.tsx
@@ -1,6 +1,5 @@
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;
}
`;
diff --git a/frontend/src/metabase/actions/containers/ActionCreator/ActionCreatorHeader.styled.tsx b/frontend/src/metabase/actions/containers/ActionCreator/ActionCreatorHeader.styled.tsx
index 3a630eeed2e00bd10cd5a0c56f524e175d6929fe..ebf1851630e1d0ebd02b3119c43357a9b3ce73d6 100644
--- a/frontend/src/metabase/actions/containers/ActionCreator/ActionCreatorHeader.styled.tsx
+++ b/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)};
`;
diff --git a/frontend/src/metabase/actions/containers/ActionCreator/FormCreator/FormCreator.styled.tsx b/frontend/src/metabase/actions/containers/ActionCreator/FormCreator/FormCreator.styled.tsx
index 7241217f96703c84c5676e59ad5bd192500ae24b..be63e7e67cdca474087436a767e1785b927dabca 100644
--- a/frontend/src/metabase/actions/containers/ActionCreator/FormCreator/FormCreator.styled.tsx
+++ b/frontend/src/metabase/actions/containers/ActionCreator/FormCreator/FormCreator.styled.tsx
@@ -1,6 +1,6 @@
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;
`;
diff --git a/frontend/src/metabase/actions/containers/ActionPicker/ActionOptionItem.styled.tsx b/frontend/src/metabase/actions/containers/ActionPicker/ActionOptionItem.styled.tsx
index 83c998bbd358da4b48a8614a13d7ef27ae6bf3c5..080ed2e4b6e85ddfa51d29dc7c1034a906659c07 100644
--- a/frontend/src/metabase/actions/containers/ActionPicker/ActionOptionItem.styled.tsx
+++ b/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);
}
`;
diff --git a/frontend/src/metabase/admin/datamodel/components/DimensionList/DimensionList.styled.tsx b/frontend/src/metabase/admin/datamodel/components/DimensionList/DimensionList.styled.tsx
index 916e03f5bb1f461907d2795d62f044c7cd4dd0de..ff687c38c5f0b8cb2567f49a61411ba1f3e0516b 100644
--- a/frontend/src/metabase/admin/datamodel/components/DimensionList/DimensionList.styled.tsx
+++ b/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)};
`;
diff --git a/frontend/src/metabase/admin/datamodel/components/GuiQueryEditor/GuiQueryEditor.module.css b/frontend/src/metabase/admin/datamodel/components/GuiQueryEditor/GuiQueryEditor.module.css
index 969358e95351c355de1c543bafd9d6feb8b5015b..7726028ca990003e2c006a66fe9d4256afc932ad 100644
--- a/frontend/src/metabase/admin/datamodel/components/GuiQueryEditor/GuiQueryEditor.module.css
+++ b/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);
}
diff --git a/frontend/src/metabase/admin/datamodel/components/ObjectActionSelect.styled.tsx b/frontend/src/metabase/admin/datamodel/components/ObjectActionSelect.styled.tsx
index ead2eee733307cfa8f3e015728c2f1dd0b1c32fc..32ffb0901fa7f6c9f4e2466ab01b0fc92b0407c3 100644
--- a/frontend/src/metabase/admin/datamodel/components/ObjectActionSelect.styled.tsx
+++ b/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);
}
`;
diff --git a/frontend/src/metabase/admin/datamodel/components/filters/pickers/DatePicker/CurrentPicker/CurrentPicker.styled.tsx b/frontend/src/metabase/admin/datamodel/components/filters/pickers/DatePicker/CurrentPicker/CurrentPicker.styled.tsx
index 76ca856ac77c2617ff27c8c92ceec126194d7601..833410e0ba41d46b3272a78098ca678e7b4a8c6d 100644
--- a/frontend/src/metabase/admin/datamodel/components/filters/pickers/DatePicker/CurrentPicker/CurrentPicker.styled.tsx
+++ b/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)};
diff --git a/frontend/src/metabase/admin/datamodel/components/filters/pickers/DatePicker/RelativeDatePicker.styled.tsx b/frontend/src/metabase/admin/datamodel/components/filters/pickers/DatePicker/RelativeDatePicker.styled.tsx
index b9809608a32107e3463afdf54de4dcc2f0293184..3bd3d40c659b6345c4846e90df461353c849996e 100644
--- a/frontend/src/metabase/admin/datamodel/components/filters/pickers/DatePicker/RelativeDatePicker.styled.tsx
+++ b/frontend/src/metabase/admin/datamodel/components/filters/pickers/DatePicker/RelativeDatePicker.styled.tsx
@@ -24,7 +24,7 @@ export const NumericInput = styled(BaseNumericInput)<BaseProps>`
`;
export const OptionsContainer = styled.div`
- background-color: ${color("white")};
+ background-color: var(--mb-color-bg-white);
padding: ${space(2)} ${space(1)};
`;
diff --git a/frontend/src/metabase/admin/datamodel/components/filters/pickers/SelectPicker.styled.tsx b/frontend/src/metabase/admin/datamodel/components/filters/pickers/SelectPicker.styled.tsx
index 6fbeba89201d75d1bdd92de707ff0b9424a21da9..7ca1d85efe674ada5de6fdc3e496f14edb541cb4 100644
--- a/frontend/src/metabase/admin/datamodel/components/filters/pickers/SelectPicker.styled.tsx
+++ b/frontend/src/metabase/admin/datamodel/components/filters/pickers/SelectPicker.styled.tsx
@@ -7,7 +7,7 @@ export interface SelectPickerButtonProps {
}
export const SelectPickerButton = styled.button<SelectPickerButtonProps>`
- color: ${props => (props.isSelected ? color("white") : color("filter"))};
+ color: ${props => (props.isSelected ? color("text-white") : color("filter"))};
text-align: center;
font-weight: 700;
width: 100%;
@@ -15,5 +15,5 @@ export const SelectPickerButton = styled.button<SelectPickerButtonProps>`
border: 1px solid var(--mb-color-filter);
border-radius: 0.5rem;
background-color: ${props =>
- props.isSelected ? color("filter") : color("white")};
+ props.isSelected ? color("filter") : color("bg-white")};
`;
diff --git a/frontend/src/metabase/admin/datamodel/components/revisions/RevisionDiff.styled.tsx b/frontend/src/metabase/admin/datamodel/components/revisions/RevisionDiff.styled.tsx
index 132a89f693633e146e551d9c6e1b610fc3b009a7..b169f43da0c437ae6d2c32cca18e357bb33025df 100644
--- a/frontend/src/metabase/admin/datamodel/components/revisions/RevisionDiff.styled.tsx
+++ b/frontend/src/metabase/admin/datamodel/components/revisions/RevisionDiff.styled.tsx
@@ -1,6 +1,5 @@
import styled from "@emotion/styled";
-import { color } from "metabase/lib/colors";
import { Icon } from "metabase/ui";
export const EditIcon = styled(Icon)`
@@ -12,5 +11,5 @@ export const ErrorIcon = styled(Icon)`
`;
export const SuccessIcon = styled(Icon)`
- color: ${color("summarize")};
+ color: var(--mb-color-summarize);
`;
diff --git a/frontend/src/metabase/admin/datamodel/metadata/components/MetadataBackButton/MetadataBackButton.styled.tsx b/frontend/src/metabase/admin/datamodel/metadata/components/MetadataBackButton/MetadataBackButton.styled.tsx
index 11302acfa172a0c87e37e26cd8ae61dc260a50e6..6b5fab2d19dee6c378fa0ef2f392483a8146676f 100644
--- a/frontend/src/metabase/admin/datamodel/metadata/components/MetadataBackButton/MetadataBackButton.styled.tsx
+++ b/frontend/src/metabase/admin/datamodel/metadata/components/MetadataBackButton/MetadataBackButton.styled.tsx
@@ -1,15 +1,13 @@
import styled from "@emotion/styled";
import { Link } from "react-router";
-import { color } from "metabase/lib/colors";
-
export const BackButtonLink = styled(Link)`
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
border-radius: 99px;
- color: ${color("white")};
+ color: var(--mb-color-text-white);
background-color: var(--mb-color-bg-dark);
&:hover {
diff --git a/frontend/src/metabase/admin/datamodel/metadata/components/MetadataTableColumn/MetadataTableColumn.styled.tsx b/frontend/src/metabase/admin/datamodel/metadata/components/MetadataTableColumn/MetadataTableColumn.styled.tsx
index 1fc90002d7d21fb7541431e09b87f7c91f3889b3..dc6d5bb2e6da1a9c5b8d7de1f457524f50be78f4 100644
--- a/frontend/src/metabase/admin/datamodel/metadata/components/MetadataTableColumn/MetadataTableColumn.styled.tsx
+++ b/frontend/src/metabase/admin/datamodel/metadata/components/MetadataTableColumn/MetadataTableColumn.styled.tsx
@@ -2,7 +2,6 @@ import styled from "@emotion/styled";
import { Link } from "react-router";
import InputBlurChange from "metabase/components/InputBlurChange";
-import { color } from "metabase/lib/colors";
export const ColumnContainer = styled.section`
padding: 1rem 0.5rem 1rem 1rem;
@@ -15,7 +14,7 @@ export const ColumnContainer = styled.section`
&:last-child {
margin-bottom: 0;
}
- background: ${color("white")};
+ background: var(--mb-color-bg-white);
`;
export const ColumnInput = styled(InputBlurChange)`
diff --git a/frontend/src/metabase/admin/people/components/GroupsListing.styled.tsx b/frontend/src/metabase/admin/people/components/GroupsListing.styled.tsx
index 9d1f5be03f6d42a6de5eaf29c37c984d3dedcfbf..5c6a5127d18214260dcf8d225c65a64f260d3719 100644
--- a/frontend/src/metabase/admin/people/components/GroupsListing.styled.tsx
+++ b/frontend/src/metabase/admin/people/components/GroupsListing.styled.tsx
@@ -1,13 +1,11 @@
import styled from "@emotion/styled";
-import { color } from "metabase/lib/colors";
-
export const EditGroupButton = styled.li`
cursor: pointer;
padding: 0.5rem 1rem;
&:hover {
- color: ${color("white")};
+ color: var(--mb-color-text-white);
background-color: var(--mb-color-brand);
}
`;
@@ -18,7 +16,7 @@ export const DeleteModalTrigger = styled.li`
padding: 0.5rem 1rem;
&:hover {
- color: ${color("white")};
+ color: var(--mb-color-text-white);
background-color: var(--mb-color-brand);
}
`;
diff --git a/frontend/src/metabase/admin/people/components/MembershipSelect/MembershipSelect.styled.tsx b/frontend/src/metabase/admin/people/components/MembershipSelect/MembershipSelect.styled.tsx
index 6f674f4753d675af29ac297afdd63109facfacef..dc980fc61f99ddc78ae71c90ebf1f7f7783f4a3f 100644
--- a/frontend/src/metabase/admin/people/components/MembershipSelect/MembershipSelect.styled.tsx
+++ b/frontend/src/metabase/admin/people/components/MembershipSelect/MembershipSelect.styled.tsx
@@ -19,7 +19,7 @@ export const MembershipSelectItem = styled.li<MembershipSelectItemProps>`
justify-content: space-between;
cursor: ${props => (props.isDisabled ? "unset" : "pointer")};
padding: 0.5rem 1.5rem;
- background-color: ${color("white")};
+ background-color: var(--mb-color-bg-white);
color: ${color("text-medium")};
font-weight: 700;
@@ -27,11 +27,11 @@ export const MembershipSelectItem = styled.li<MembershipSelectItemProps>`
!props.isDisabled &&
css`
&:hover {
- color: ${color("white")};
+ color: var(--mb-color-text-white);
background-color: var(--mb-color-filter);
.Icon {
- color: ${color("white")} !important;
+ color: var(--mb-color-text-white) !important;
}
}
`}
diff --git a/frontend/src/metabase/admin/people/components/NudgeToPro.styled.tsx b/frontend/src/metabase/admin/people/components/NudgeToPro.styled.tsx
index 4d81de9da071fc1306aca842627fea56cfd9c70c..14ec42b16dd35429a6459be4f16f44e57ede9046 100644
--- a/frontend/src/metabase/admin/people/components/NudgeToPro.styled.tsx
+++ b/frontend/src/metabase/admin/people/components/NudgeToPro.styled.tsx
@@ -1,7 +1,6 @@
import styled from "@emotion/styled";
import ExternalLink from "metabase/core/components/ExternalLink";
-import { color } from "metabase/lib/colors";
export const NudgeCard = styled.div`
background-color: var(--mb-color-bg-light);
@@ -31,7 +30,7 @@ export const ProLink = styled(ExternalLink)`
width: fit-content;
&:hover {
- color: ${color("white")};
+ color: var(--mb-color-text-white);
background-color: var(--mb-color-brand);
}
`;
diff --git a/frontend/src/metabase/admin/performance/components/StrategyEditorForDatabases.styled.tsx b/frontend/src/metabase/admin/performance/components/StrategyEditorForDatabases.styled.tsx
index 924487161c5212e357e55a23d22093b9b174cc68..9d4166a72eaffdf23dbfad7da76dbc03bfc4d187 100644
--- a/frontend/src/metabase/admin/performance/components/StrategyEditorForDatabases.styled.tsx
+++ b/frontend/src/metabase/admin/performance/components/StrategyEditorForDatabases.styled.tsx
@@ -1,11 +1,9 @@
import { css } from "@emotion/react";
import styled from "@emotion/styled";
-import { color } from "metabase/lib/colors";
-
export const Panel = styled.section<{ hasLeftBorder?: boolean }>`
overflow-y: auto;
- background-color: ${color("white")};
+ background-color: var(--mb-color-bg-white);
height: 100%;
${props =>
diff --git a/frontend/src/metabase/admin/performance/components/StrategyForm.tsx b/frontend/src/metabase/admin/performance/components/StrategyForm.tsx
index 929e33b8221802e871e35bb454d5db50c39b6dd3..62f18eb9f0cccb79c3b7732673630a2691ce440d 100644
--- a/frontend/src/metabase/admin/performance/components/StrategyForm.tsx
+++ b/frontend/src/metabase/admin/performance/components/StrategyForm.tsx
@@ -14,7 +14,6 @@ import {
FormTextInput,
useFormContext,
} from "metabase/forms";
-import { color } from "metabase/lib/colors";
import { useSelector } from "metabase/lib/redux";
import { PLUGIN_CACHING } from "metabase/plugins";
import { getSetting } from "metabase/selectors/settings";
@@ -244,7 +243,7 @@ const FormButtonsGroup = ({
<Group
py="md"
spacing="md"
- bg={color("white")}
+ bg="bg-white"
className="form-buttons-group"
style={{
justifyContent: isInSidebar ? undefined : "flex-end",
diff --git a/frontend/src/metabase/admin/permissions/components/FilterableTree/FilterableTree.styled.tsx b/frontend/src/metabase/admin/permissions/components/FilterableTree/FilterableTree.styled.tsx
index 6adcf4dbc7e06882ae043f0d4446e9f4d3ecf8ec..06db136c0daf55e30cecd287d91d03afa839f8fa 100644
--- a/frontend/src/metabase/admin/permissions/components/FilterableTree/FilterableTree.styled.tsx
+++ b/frontend/src/metabase/admin/permissions/components/FilterableTree/FilterableTree.styled.tsx
@@ -28,7 +28,8 @@ export const EmptyStateContainer = styled.div`
`;
export const AdminTreeNode = styled(Tree.Node)`
- color: ${props => (props.isSelected ? color("white") : color("text-medium"))};
+ color: ${props =>
+ props.isSelected ? color("text-white") : color("text-medium")};
background-color: ${props => (props.isSelected ? color("filter") : "unset")};
diff --git a/frontend/src/metabase/admin/permissions/components/PermissionHelpDescription/PermissionHelpDescription.styled.tsx b/frontend/src/metabase/admin/permissions/components/PermissionHelpDescription/PermissionHelpDescription.styled.tsx
index aa66e206650aa5be707575faec200ee683e136e4..b892a02cc0db56513151d9a40b08f2408ee5c307 100644
--- a/frontend/src/metabase/admin/permissions/components/PermissionHelpDescription/PermissionHelpDescription.styled.tsx
+++ b/frontend/src/metabase/admin/permissions/components/PermissionHelpDescription/PermissionHelpDescription.styled.tsx
@@ -14,6 +14,6 @@ export const PermissionIconContainer = styled.div<PermissionIconContainerProps>`
justify-content: center;
border-radius: 0.25rem;
margin-right: 0.375rem;
- color: ${color("white")};
+ color: var(--mb-color-text-white);
background-color: ${props => color(props.color)};
`;
diff --git a/frontend/src/metabase/admin/permissions/components/PermissionsSelect/PermissionsSelect.styled.tsx b/frontend/src/metabase/admin/permissions/components/PermissionsSelect/PermissionsSelect.styled.tsx
index 844d819994cb68371f0e3ac074c4405ff0b37141..c27471885222d0b478b9412db26f1bfe6a63b517 100644
--- a/frontend/src/metabase/admin/permissions/components/PermissionsSelect/PermissionsSelect.styled.tsx
+++ b/frontend/src/metabase/admin/permissions/components/PermissionsSelect/PermissionsSelect.styled.tsx
@@ -30,7 +30,7 @@ export const OptionsListItem = styled.li`
padding: 0.5rem 1rem;
&:hover {
- color: ${color("white")};
+ color: var(--mb-color-text-white);
background-color: ${lighten("accent7", 0.1)};
}
`;
diff --git a/frontend/src/metabase/admin/permissions/components/PermissionsSelect/PermissionsSelectOption.styled.tsx b/frontend/src/metabase/admin/permissions/components/PermissionsSelect/PermissionsSelectOption.styled.tsx
index f1c6ceca829a239d095cdce3877d9e4bd0c3dc53..1a5c1682bde187228cd5bef8f613270e5d18aea6 100644
--- a/frontend/src/metabase/admin/permissions/components/PermissionsSelect/PermissionsSelectOption.styled.tsx
+++ b/frontend/src/metabase/admin/permissions/components/PermissionsSelect/PermissionsSelectOption.styled.tsx
@@ -15,7 +15,7 @@ export const IconContainer = styled.div<{ color: string }>`
border-radius: 3px;
width: 20px;
height: 20px;
- color: ${color("white")};
+ color: var(--mb-color-text-white);
background-color: ${props => color(props.color)};
flex-shrink: 0;
`;
diff --git a/frontend/src/metabase/admin/permissions/components/PermissionsTable/PermissionsTable.styled.tsx b/frontend/src/metabase/admin/permissions/components/PermissionsTable/PermissionsTable.styled.tsx
index f326f91bb495ec13698a81773bdc350244459751..94d511b1e4d3111c3a3a1fb2bb2c3abff3c85395 100644
--- a/frontend/src/metabase/admin/permissions/components/PermissionsTable/PermissionsTable.styled.tsx
+++ b/frontend/src/metabase/admin/permissions/components/PermissionsTable/PermissionsTable.styled.tsx
@@ -15,9 +15,10 @@ const getHeaderBackground = (theme: Theme) =>
`linear-gradient(to top, ${alpha(
theme.fn.themeColor("border"),
0.5,
- )}, ${alpha(theme.fn.themeColor("border"), 0.5)} 1px, ${color(
- "white",
- )} 1px, ${color("white")} 100%)`;
+ )}, ${alpha(
+ theme.fn.themeColor("border"),
+ 0.5,
+ )} 1px, var(--mb-color-bg-white) 1px, var(--mb-color-bg-white) 100%)`;
export const PermissionsTableRoot = styled.table`
border-collapse: collapse;
diff --git a/frontend/src/metabase/admin/settings/app/components/SettingsEditor/SettingsEditor.styled.tsx b/frontend/src/metabase/admin/settings/app/components/SettingsEditor/SettingsEditor.styled.tsx
index c2e452fc67c59c179a6c76543c91b8e8d3699273..40951f810e292c15be6d92f5f9e054a1faecc11f 100644
--- a/frontend/src/metabase/admin/settings/app/components/SettingsEditor/SettingsEditor.styled.tsx
+++ b/frontend/src/metabase/admin/settings/app/components/SettingsEditor/SettingsEditor.styled.tsx
@@ -1,10 +1,8 @@
import styled from "@emotion/styled";
-import { color } from "metabase/lib/colors";
-
export const NewVersionIndicator = styled.span`
padding: 0.25rem 0.5rem;
- color: ${color("white")};
+ color: var(--mb-color-text-white);
font-size: 0.75em;
font-weight: bold;
background-color: var(--mb-color-brand);
diff --git a/frontend/src/metabase/admin/settings/components/SettingsUpdatesForm/VersionUpdateNotice/VersionUpdateNotice.styled.tsx b/frontend/src/metabase/admin/settings/components/SettingsUpdatesForm/VersionUpdateNotice/VersionUpdateNotice.styled.tsx
index 2f8465e075686d3bfd4ea1fc6d654b24be96a47d..19050105950d3d19c4e05380bfd37706edf4e29f 100644
--- a/frontend/src/metabase/admin/settings/components/SettingsUpdatesForm/VersionUpdateNotice/VersionUpdateNotice.styled.tsx
+++ b/frontend/src/metabase/admin/settings/components/SettingsUpdatesForm/VersionUpdateNotice/VersionUpdateNotice.styled.tsx
@@ -1,14 +1,12 @@
import styled from "@emotion/styled";
-import { color } from "metabase/lib/colors";
-
export const NewVersionContainer = styled.div`
- background-color: ${color("summarize")};
+ background-color: var(--mb-color-summarize);
`;
export const OnLatestVersionMessage = styled.div`
padding: 1rem;
- color: ${color("white")};
+ color: var(--mb-color-text-white);
font-weight: bold;
border: 1px solid var(--mb-color-brand);
border-radius: 0.5rem;
diff --git a/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/EmbeddingOption.styled.tsx b/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/EmbeddingOption.styled.tsx
index 2d66aced79aeab669a2ae0dff9e30fc118c64759..72bbbf7f496f58474b4ea53ba4f3301895ecad0c 100644
--- a/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/EmbeddingOption.styled.tsx
+++ b/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/EmbeddingOption.styled.tsx
@@ -2,7 +2,6 @@ import styled from "@emotion/styled";
import Card from "metabase/components/Card";
import ExternalLink from "metabase/core/components/ExternalLink";
-import { color } from "metabase/lib/colors";
import { space } from "metabase/styled-components/theme";
export const StyledCard = styled(Card)`
@@ -20,7 +19,7 @@ export const Label = styled.span`
font-weight: 700;
border-radius: 0.25rem;
text-transform: uppercase;
- color: ${color("white")};
+ color: var(--mb-color-text-white);
background: var(--mb-color-brand);
`;
diff --git a/frontend/src/metabase/admin/settings/components/widgets/HostingInfoLink/HostingInfoLink.styled.tsx b/frontend/src/metabase/admin/settings/components/widgets/HostingInfoLink/HostingInfoLink.styled.tsx
index 21719797ca57691360850e26d0af132a5300bcbd..02d009be80fbff2c5b27df72a4b041d9d4a29389 100644
--- a/frontend/src/metabase/admin/settings/components/widgets/HostingInfoLink/HostingInfoLink.styled.tsx
+++ b/frontend/src/metabase/admin/settings/components/widgets/HostingInfoLink/HostingInfoLink.styled.tsx
@@ -1,7 +1,6 @@
import styled from "@emotion/styled";
import ExternalLink from "metabase/core/components/ExternalLink";
-import { color } from "metabase/lib/colors";
export const HostingLink = styled(ExternalLink)`
font-weight: bold;
@@ -11,7 +10,7 @@ export const HostingLink = styled(ExternalLink)`
border-radius: 0.5rem;
&:hover {
- color: ${color("white")};
+ color: var(--mb-color-text-white);
background-color: var(--mb-color-brand);
}
`;
diff --git a/frontend/src/metabase/admin/settings/components/widgets/ModelCachingScheduleWidget/CronExpressionInput.styled.tsx b/frontend/src/metabase/admin/settings/components/widgets/ModelCachingScheduleWidget/CronExpressionInput.styled.tsx
index 013f60b40bc9cc2ae4ce3fd5fe0e42ae5eecdb81..e63e24cfa18ff1b85ccce174a617402f5593636a 100644
--- a/frontend/src/metabase/admin/settings/components/widgets/ModelCachingScheduleWidget/CronExpressionInput.styled.tsx
+++ b/frontend/src/metabase/admin/settings/components/widgets/ModelCachingScheduleWidget/CronExpressionInput.styled.tsx
@@ -45,7 +45,7 @@ export const PopoverContent = styled.div`
background-color: #222;
padding: 18px;
- color: ${color("text-white")};
+ color: var(--mb-color-text-white);
`;
export const PopoverTitle = styled.span`
diff --git a/frontend/src/metabase/admin/settings/slack/components/SlackAppsLink/SlackAppsLink.styled.tsx b/frontend/src/metabase/admin/settings/slack/components/SlackAppsLink/SlackAppsLink.styled.tsx
index 4e7ca7606f83df1ba9dfc12affc58e81c05df498..aee6eb40f62ba7746b608af7d162cd2865ec1705 100644
--- a/frontend/src/metabase/admin/settings/slack/components/SlackAppsLink/SlackAppsLink.styled.tsx
+++ b/frontend/src/metabase/admin/settings/slack/components/SlackAppsLink/SlackAppsLink.styled.tsx
@@ -1,7 +1,6 @@
import styled from "@emotion/styled";
import ExternalLink from "metabase/core/components/ExternalLink";
-import { color } from "metabase/lib/colors";
import { Icon } from "metabase/ui";
export const LinkRoot = styled(ExternalLink)`
@@ -15,7 +14,7 @@ export const LinkText = styled.div`
`;
export const LinkIcon = styled(Icon)`
- color: ${color("white")};
+ color: var(--mb-color-text-white);
margin-left: 0.5rem;
width: 0.75rem;
height: 0.75rem;
diff --git a/frontend/src/metabase/admin/tasks/components/Logs/Logs.styled.tsx b/frontend/src/metabase/admin/tasks/components/Logs/Logs.styled.tsx
index d2d1327c185752f8b44ed9fecede80e3a12aea87..b28f55c2778878b084c06608aa7dd7722c4809a6 100644
--- a/frontend/src/metabase/admin/tasks/components/Logs/Logs.styled.tsx
+++ b/frontend/src/metabase/admin/tasks/components/Logs/Logs.styled.tsx
@@ -54,7 +54,7 @@ export const LogsContent = styled.div`
${LOG_PREFIX}-inverse {
color: var(--mb-color-text-dark);
- background-color: ${color("white")};
+ background-color: var(--mb-color-bg-white);
}
${LOG_PREFIX}-hidden {
diff --git a/frontend/src/metabase/admin/upsells/components/Upsells.styled.tsx b/frontend/src/metabase/admin/upsells/components/Upsells.styled.tsx
index dc8d9885eaa9b8f32d461d44f2e60e9d72d3e698..0577d3f1d3b46a5e86d151a10b41328115d89c72 100644
--- a/frontend/src/metabase/admin/upsells/components/Upsells.styled.tsx
+++ b/frontend/src/metabase/admin/upsells/components/Upsells.styled.tsx
@@ -1,7 +1,6 @@
import styled from "@emotion/styled";
import ExternalLink from "metabase/core/components/ExternalLink";
-import { color } from "metabase/lib/colors";
/**
* The upsell color palette is designed to function in harmony with the original Metabase set of Blues, Grays and Purples
@@ -30,7 +29,7 @@ export const UpsellPillComponent = styled(ExternalLink)`
&:hover {
background-color: ${upsellColors.primary};
- color: ${color("white")};
+ color: var(--mb-color-text-white);
border: 1px solid ${upsellColors.primary};
}
`;
@@ -54,7 +53,7 @@ export const UpsellCTALink = styled(ExternalLink)`
&:hover {
background-color: ${upsellColors.primary};
- color: ${color("white")};
+ color: var(--mb-color-text-white);
}
`;
@@ -64,5 +63,5 @@ export const UpsellCardComponent = styled.div`
border-radius: 0.5rem;
overflow: hidden;
border: 1px solid ${upsellColors.secondary};
- background-color: ${color("white")};
+ background-color: var(--mb-color-bg-white);
`;
diff --git a/frontend/src/metabase/archive/components/ArchivedEntityBanner/ArchivedEntityBanner.tsx b/frontend/src/metabase/archive/components/ArchivedEntityBanner/ArchivedEntityBanner.tsx
index e4de77fd9bc06dd671ad1289a7a0ea4c8b68ae8d..0322d1ba235c468e15618fa9b8cc1fb1f53d95e7 100644
--- a/frontend/src/metabase/archive/components/ArchivedEntityBanner/ArchivedEntityBanner.tsx
+++ b/frontend/src/metabase/archive/components/ArchivedEntityBanner/ArchivedEntityBanner.tsx
@@ -44,9 +44,9 @@ export const ArchivedEntityBanner = ({
style={{ marginInlineEnd: "1rem" }}
display={{ base: "none", sm: "block" }}
>
- <FixedSizeIcon color="white" name="trash_filled" />
+ <FixedSizeIcon color="text-white" name="trash_filled" />
</Box>
- <Text color="white" size="md" lh="1rem">
+ <Text color="text-white" size="md" lh="1rem">
{c(
"{0} is the entity in the trash, e.g. collection, dashboard, etc.",
).t`This ${entityType} is in the trash.`}
diff --git a/frontend/src/metabase/archive/components/ArchivedEntityBanner/BannerButton.tsx b/frontend/src/metabase/archive/components/ArchivedEntityBanner/BannerButton.tsx
index 1752bcce0f47f905ec3b5fd6a140a3f921eed74c..61470ae912edcb2136de9302cfa6af77f76a3c32 100644
--- a/frontend/src/metabase/archive/components/ArchivedEntityBanner/BannerButton.tsx
+++ b/frontend/src/metabase/archive/components/ArchivedEntityBanner/BannerButton.tsx
@@ -15,14 +15,14 @@ export const BannerButton = ({
<Button
compact
variant="outline"
- color="white"
+ color="text-white"
miw="2rem"
h="2rem"
onClick={onClick}
>
<Flex align="center" gap="sm">
<FixedSizeIcon size={12} name={iconName} />
- <Text color="white" display={{ base: "none", sm: "inline" }}>
+ <Text color="text-white" display={{ base: "none", sm: "inline" }}>
{children}
</Text>
</Flex>
diff --git a/frontend/src/metabase/auth/components/AuthButton/AuthButton.styled.tsx b/frontend/src/metabase/auth/components/AuthButton/AuthButton.styled.tsx
index d63497e77ad6536e278075147dd576de2093f545..73d5d0815b453eb57449fe31428fd11e7a46530d 100644
--- a/frontend/src/metabase/auth/components/AuthButton/AuthButton.styled.tsx
+++ b/frontend/src/metabase/auth/components/AuthButton/AuthButton.styled.tsx
@@ -17,7 +17,7 @@ export const CardLink = styled(TextLink)`
justify-content: center;
align-items: center;
padding: 1.25rem;
- background-color: ${color("white")};
+ background-color: var(--mb-color-bg-white);
box-shadow: 0 3px 10px var(--mb-color-shadow);
border-radius: 6px;
`;
diff --git a/frontend/src/metabase/auth/components/AuthLayout/AuthLayout.styled.tsx b/frontend/src/metabase/auth/components/AuthLayout/AuthLayout.styled.tsx
index 9b5b616d52f0f145e353787da30614ffc40e183f..8a47237525eb8c72cb587b8c4b9c34693f2c10ed 100644
--- a/frontend/src/metabase/auth/components/AuthLayout/AuthLayout.styled.tsx
+++ b/frontend/src/metabase/auth/components/AuthLayout/AuthLayout.styled.tsx
@@ -1,6 +1,6 @@
import styled from "@emotion/styled";
-import { color, hueRotate } from "metabase/lib/colors";
+import { hueRotate } from "metabase/lib/colors";
import { breakpointMinSmall } from "metabase/styled-components/theme";
export const LayoutRoot = styled.div`
@@ -23,7 +23,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;
diff --git a/frontend/src/metabase/collections/components/PinnedQuestionCard/PinnedQuestionCard.styled.tsx b/frontend/src/metabase/collections/components/PinnedQuestionCard/PinnedQuestionCard.styled.tsx
index 66a543f4072ddcd0f0e732704a97c01eec895afe..ae76a259e253b66ad1e70ffbb7c343817bf3c241 100644
--- a/frontend/src/metabase/collections/components/PinnedQuestionCard/PinnedQuestionCard.styled.tsx
+++ b/frontend/src/metabase/collections/components/PinnedQuestionCard/PinnedQuestionCard.styled.tsx
@@ -35,7 +35,7 @@ export const CardRoot = styled(Link)<CardRootProps>`
padding: ${props => (props.isPreview ? "0" : "0.5rem 0")};
border: 1px solid var(--mb-color-border);
border-radius: 0.375rem;
- background-color: ${color("white")};
+ background-color: var(--mb-color-bg-white);
&:hover {
${CardActionMenuContainer} {
diff --git a/frontend/src/metabase/common/components/EntityPicker/components/ResultItem/ResultItem.styled.tsx b/frontend/src/metabase/common/components/EntityPicker/components/ResultItem/ResultItem.styled.tsx
index 5e9aa036e944c31bacac9e50a0ac00ed4c61bba4..6d17cdf26f3a71f0dec6223e684fbfbf9c1e7b01 100644
--- a/frontend/src/metabase/common/components/EntityPicker/components/ResultItem/ResultItem.styled.tsx
+++ b/frontend/src/metabase/common/components/EntityPicker/components/ResultItem/ResultItem.styled.tsx
@@ -11,10 +11,10 @@ export const ChunkyListItem = styled.button<{
cursor: pointer;
background-color: ${({ isSelected }) =>
- isSelected ? "var(--mb-color-brand)" : color("white")};
+ isSelected ? color("brand") : color("bg-white")};
color: ${({ isSelected }) =>
- isSelected ? color("white") : color("text-dark")};
+ isSelected ? color("text-white") : color("text-dark")};
&:hover {
${({ isSelected }) =>
diff --git a/frontend/src/metabase/common/components/EntityPicker/components/ResultItem/ResultItem.tsx b/frontend/src/metabase/common/components/EntityPicker/components/ResultItem/ResultItem.tsx
index c000d099bce2ad19f3d22f7a938a4ffa568ab084..23e579c577e7f45fab4d18d2b2b25d481500e3db 100644
--- a/frontend/src/metabase/common/components/EntityPicker/components/ResultItem/ResultItem.tsx
+++ b/frontend/src/metabase/common/components/EntityPicker/components/ResultItem/ResultItem.tsx
@@ -50,7 +50,7 @@ export const ResultItem = ({
>
<Flex gap="md" miw="10rem" align="center" style={{ flex: 1 }}>
<FixedSizeIcon
- color={color(icon.color ?? (isSelected ? "white" : "brand"))}
+ color={color(icon.color ?? (isSelected ? "text-white" : "brand"))}
name={icon.name}
style={{
flexShrink: 0,
@@ -74,7 +74,7 @@ export const ResultItem = ({
{parentInfo && (
<Flex
style={{
- color: isSelected ? color("white") : color("text-light"),
+ color: isSelected ? color("text-white") : color("text-light"),
flexShrink: 0,
}}
align="center"
diff --git a/frontend/src/metabase/common/components/EntityPicker/utils.ts b/frontend/src/metabase/common/components/EntityPicker/utils.ts
index 4747f7545671d4c1fba055a7592cccafd726f36d..bf519abd10a1ecfca75dd6c54bb6bd25fcf9dacd 100644
--- a/frontend/src/metabase/common/components/EntityPicker/utils.ts
+++ b/frontend/src/metabase/common/components/EntityPicker/utils.ts
@@ -16,7 +16,7 @@ export const getEntityPickerIcon = <Id, Model extends string>(
}
if (isSelected && !icon.color) {
- icon.color = color("white");
+ icon.color = color("text-white");
}
if (icon.name === "folder" && isSelected) {
diff --git a/frontend/src/metabase/common/components/QueryColumnPicker/BucketPickerPopover/BaseBucketPickerPopover.styled.tsx b/frontend/src/metabase/common/components/QueryColumnPicker/BucketPickerPopover/BaseBucketPickerPopover.styled.tsx
index 7e4b63432eb35503db991948662074c05e111230..5a9a5c0bc87369ede61a8e3305174bfd2d407300 100644
--- a/frontend/src/metabase/common/components/QueryColumnPicker/BucketPickerPopover/BaseBucketPickerPopover.styled.tsx
+++ b/frontend/src/metabase/common/components/QueryColumnPicker/BucketPickerPopover/BaseBucketPickerPopover.styled.tsx
@@ -7,7 +7,7 @@ import type { ColorName } from "metabase/lib/colors/types";
import { Icon } from "metabase/ui";
export const TriggerIcon = styled(Icon)`
- color: ${color("white")} !important;
+ color: var(--mb-color-text-white) !important;
flex: 0 0 auto;
`;
@@ -26,7 +26,7 @@ export const TriggerButton = styled.button`
max-width: 50%;
gap: 0.5rem;
- color: ${alpha(color("white"), 0.5)};
+ color: ${() => alpha(color("text-white"), 0.5)};
font-weight: 700;
border-left: 2px solid ${() => alpha(color("border"), 0.1)};
padding: 0.5rem;
@@ -38,7 +38,7 @@ export const TriggerButton = styled.button`
}
&:hover {
- color: ${color("white")};
+ color: var(--mb-color-text-white);
}
`;
diff --git a/frontend/src/metabase/components/BulkActionBar/BulkActionBar.styled.tsx b/frontend/src/metabase/components/BulkActionBar/BulkActionBar.styled.tsx
index 78d6663b373111dca3190772e349e0fa51a1f9d4..d505aa58644ad3fc03223183779a79ad23026202 100644
--- a/frontend/src/metabase/components/BulkActionBar/BulkActionBar.styled.tsx
+++ b/frontend/src/metabase/components/BulkActionBar/BulkActionBar.styled.tsx
@@ -20,7 +20,7 @@ export const BulkActionsToast = styled.div<{ isNavbarOpen: boolean }>`
`;
export const ToastCard = styled(Card)`
- color: ${color("white")};
+ color: var(--mb-color-text-white);
padding: 0.75rem ${space(2)};
display: flex;
@@ -30,21 +30,20 @@ export const ToastCard = styled(Card)`
`;
export const BulkActionButton = styled(Button)`
- color: ${color("white")};
+ color: var(--mb-color-text-white);
+
+ border-color: ${() => alpha(color("bg-white"), 0)};
+ background-color: ${() => alpha(color("bg-white"), 0.1)};
- border-color: ${({ theme }) => alpha(theme.fn.themeColor("bg-white"), 0)};
- background-color: ${({ theme }) =>
- alpha(theme.fn.themeColor("bg-white"), 0.1)};
:hover {
- color: ${color("white")};
- border-color: ${({ theme }) => alpha(theme.fn.themeColor("bg-white"), 0)};
- background-color: ${({ theme }) =>
- alpha(theme.fn.themeColor("bg-white"), 0.3)};
+ color: var(--mb-color-text-white);
+ border-color: ${() => alpha(color("bg-white"), 0)};
+ background-color: ${() => alpha(color("bg-white"), 0.3)};
}
+
:disabled {
- border-color: ${({ theme }) => alpha(theme.fn.themeColor("bg-white"), 0)};
- background-color: ${({ theme }) =>
- alpha(theme.fn.themeColor("bg-white"), 0.1)};
+ border-color: ${() => alpha(color("bg-white"), 0)};
+ background-color: ${() => alpha(color("bg-white"), 0.1)};
}
` as unknown as typeof Button;
@@ -52,7 +51,7 @@ export const BulkActionDangerButton = styled(BulkActionButton)`
color: var(--mb-color-danger);
:hover {
- color: ${color("white")};
+ color: var(--mb-color-text-white);
background-color: var(--mb-color-bg-error);
}
` as unknown as typeof Button;
diff --git a/frontend/src/metabase/components/BulkActionBar/BulkActionBar.tsx b/frontend/src/metabase/components/BulkActionBar/BulkActionBar.tsx
index 227ca6fd99370fef70c330c88d290935c50f3f22..326da1719e599f8e3b905187e93ce06f6ce89907 100644
--- a/frontend/src/metabase/components/BulkActionBar/BulkActionBar.tsx
+++ b/frontend/src/metabase/components/BulkActionBar/BulkActionBar.tsx
@@ -44,7 +44,7 @@ export const BulkActionBar = ({
{styles => (
<BulkActionsToast style={styles} isNavbarOpen={isNavbarOpen}>
<ToastCard dark data-testid="toast-card">
- {message && <Text color="white">{message}</Text>}
+ {message && <Text color="text-white">{message}</Text>}
<Flex gap="sm" align="center">
{children}
</Flex>
diff --git a/frontend/src/metabase/components/Calendar/Calendar.styled.tsx b/frontend/src/metabase/components/Calendar/Calendar.styled.tsx
index 7f78e086c80eea84a3540bef5f4104b720194ef6..f46716a173d97f81872c0fcc9c5a8acd214a8a67 100644
--- a/frontend/src/metabase/components/Calendar/Calendar.styled.tsx
+++ b/frontend/src/metabase/components/Calendar/Calendar.styled.tsx
@@ -35,7 +35,7 @@ export const CalendarDay = styled.div<CalendarDayProps>`
${({ primaryColor, isSelectedStart, isSelectedEnd }) =>
(isSelectedStart || isSelectedEnd) &&
css`
- color: ${color("white")} !important;
+ color: var(--mb-color-text-white) !important;
background-color: ${primaryColor};
z-index: 1;
`}
diff --git a/frontend/src/metabase/components/Card/Card.tsx b/frontend/src/metabase/components/Card/Card.tsx
index 2f5c29e6e3b074eca6edd5cfff5563322f3c2833..435ec21f3ce2e3b049e727d96e0cb25242366338 100644
--- a/frontend/src/metabase/components/Card/Card.tsx
+++ b/frontend/src/metabase/components/Card/Card.tsx
@@ -12,7 +12,8 @@ type CardProps = {
};
const Card = styled.div<CardProps>`
- background-color: ${props => (props.dark ? color("text-dark") : "white")};
+ background-color: ${props =>
+ props.dark ? color("text-dark") : color("bg-white")};
border: 1px solid
${props => (props.dark ? "transparent" : "var(--mb-color-bg-medium)")};
${props => props.dark && `color: white`};
diff --git a/frontend/src/metabase/components/CollectionItem/CollectionItem.styled.tsx b/frontend/src/metabase/components/CollectionItem/CollectionItem.styled.tsx
index deb46dd0878453473c7bb6aeeb0cd3650cca4a61..1787a1e45a4f09cc9daf079ba1dfec4eb7721c06 100644
--- a/frontend/src/metabase/components/CollectionItem/CollectionItem.styled.tsx
+++ b/frontend/src/metabase/components/CollectionItem/CollectionItem.styled.tsx
@@ -36,5 +36,5 @@ export const CardContent = styled.div`
`;
export const CollectionIcon = styled(Icon)`
- color: ${color("white")};
+ color: var(--mb-color-text-white);
`;
diff --git a/frontend/src/metabase/components/CopyButton/CopyButton.tsx b/frontend/src/metabase/components/CopyButton/CopyButton.tsx
index f6681720de7b3d3607bc84c62e2786697111e18a..1b09bd5d359391be8260e8fa3d1d058c892fd6c1 100644
--- a/frontend/src/metabase/components/CopyButton/CopyButton.tsx
+++ b/frontend/src/metabase/components/CopyButton/CopyButton.tsx
@@ -29,7 +29,7 @@ export const CopyButton = ({
<CopyToClipboard text={value} onCopy={onCopyValue}>
<div className={className} style={style} data-testid="copy-button">
<Tooltip
- label={<Text fw={700} c="white">{t`Copied!`}</Text>}
+ label={<Text fw={700} c="text-white">{t`Copied!`}</Text>}
opened={copied}
>
<Icon name="copy" />
diff --git a/frontend/src/metabase/components/CopyTextInput/CopyTextInput.styled.tsx b/frontend/src/metabase/components/CopyTextInput/CopyTextInput.styled.tsx
index 6479489790f1608160a79da12ff2f915ef21854d..d0b91b0827220196520cf0161e1dc0275fddcb75 100644
--- a/frontend/src/metabase/components/CopyTextInput/CopyTextInput.styled.tsx
+++ b/frontend/src/metabase/components/CopyTextInput/CopyTextInput.styled.tsx
@@ -1,7 +1,6 @@
import styled from "@emotion/styled";
import { CopyButton } from "metabase/components/CopyButton";
-import { color } from "metabase/lib/colors";
export const CopyWidgetButton = styled(CopyButton)`
position: absolute;
@@ -19,7 +18,7 @@ export const CopyWidgetButton = styled(CopyButton)`
cursor: pointer;
&:hover {
- color: ${color("white")};
+ color: var(--mb-color-text-white);
background-color: var(--mb-color-brand);
}
`;
diff --git a/frontend/src/metabase/components/CopyWidget/CopyWidget.styled.tsx b/frontend/src/metabase/components/CopyWidget/CopyWidget.styled.tsx
index 54796da7f69b82c802206509f7843d919a6391ec..cdc57b97dd170626ccefce7d0e7f688cd4079b6d 100644
--- a/frontend/src/metabase/components/CopyWidget/CopyWidget.styled.tsx
+++ b/frontend/src/metabase/components/CopyWidget/CopyWidget.styled.tsx
@@ -1,7 +1,6 @@
import styled from "@emotion/styled";
import { CopyButton } from "metabase/components/CopyButton";
-import { color } from "metabase/lib/colors";
export const CopyWidgetButton = styled(CopyButton)`
position: absolute;
@@ -18,7 +17,7 @@ export const CopyWidgetButton = styled(CopyButton)`
outline: none;
&:hover {
- color: ${color("white")};
+ color: var(--mb-color-text-white);
background-color: var(--mb-color-brand);
}
`;
diff --git a/frontend/src/metabase/components/DateMonthYearWidget/DateMonthYearWidget.styled.tsx b/frontend/src/metabase/components/DateMonthYearWidget/DateMonthYearWidget.styled.tsx
index 3893ef478ac5af70bcc5fbca418d29603f4d81ab..f47511490e19c2913d90dd1450bc4c9a3c5363dd 100644
--- a/frontend/src/metabase/components/DateMonthYearWidget/DateMonthYearWidget.styled.tsx
+++ b/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 =>
diff --git a/frontend/src/metabase/components/DateQuarterYearWidget/DateQuarterYearWidget.styled.tsx b/frontend/src/metabase/components/DateQuarterYearWidget/DateQuarterYearWidget.styled.tsx
index 627395357b4a56f46e7cb486726c4bafd77b11c7..f676d138d2010d13915f101c6a47afa760f84b93 100644
--- a/frontend/src/metabase/components/DateQuarterYearWidget/DateQuarterYearWidget.styled.tsx
+++ b/frontend/src/metabase/components/DateQuarterYearWidget/DateQuarterYearWidget.styled.tsx
@@ -1,8 +1,6 @@
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);
`}
`;
diff --git a/frontend/src/metabase/components/EditBar/EditBar.styled.tsx b/frontend/src/metabase/components/EditBar/EditBar.styled.tsx
index 9cff96b41cb20fa2ca7a631420cd61769302e2ee..903904bba27f1fd57a13fceaa0ccd610ba30373c 100644
--- a/frontend/src/metabase/components/EditBar/EditBar.styled.tsx
+++ b/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;
`;
diff --git a/frontend/src/metabase/components/HelpCard/HelpCard.styled.tsx b/frontend/src/metabase/components/HelpCard/HelpCard.styled.tsx
index b996b08e7013a7944e3206207d8b2d1311b67b7b..280d862a67774b86bd955509324b80bfef701185 100644
--- a/frontend/src/metabase/components/HelpCard/HelpCard.styled.tsx
+++ b/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;
`;
diff --git a/frontend/src/metabase/components/ItemsTable/BaseItemsTable.styled.tsx b/frontend/src/metabase/components/ItemsTable/BaseItemsTable.styled.tsx
index 76da38d9b12c23a0e140e1a4c13639df79926759..16a302ddb99f2809354002726a6820185ad1cd18 100644
--- a/frontend/src/metabase/components/ItemsTable/BaseItemsTable.styled.tsx
+++ b/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;
diff --git a/frontend/src/metabase/components/MetadataInfo/MetadataInfo.styled.tsx b/frontend/src/metabase/components/MetadataInfo/MetadataInfo.styled.tsx
index c4c2aa08d2877fc592f0bc6ffc50bc4130c29ffe..6833ae5eb7062cd2dadc01b8a0385edc90cfaa5f 100644
--- a/frontend/src/metabase/components/MetadataInfo/MetadataInfo.styled.tsx
+++ b/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;
`;
diff --git a/frontend/src/metabase/components/ModalContent/ModalContent.stories.tsx b/frontend/src/metabase/components/ModalContent/ModalContent.stories.tsx
index 78a070c975861a0d6ae5b36e0c342b18c85febcd..f03e257be8c2b864f2f7de60e5e46b0a9e7f589f 100644
--- a/frontend/src/metabase/components/ModalContent/ModalContent.stories.tsx
+++ b/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",
}}
>
diff --git a/frontend/src/metabase/components/SelectList/SelectListItem.styled.tsx b/frontend/src/metabase/components/SelectList/SelectListItem.styled.tsx
index cad6b5e947cd8ae118e3f6e2f3408733e39455c9..05474cb9eb8662bf46aeb50f9a0dc705cc20e88f 100644
--- a/frontend/src/metabase/components/SelectList/SelectListItem.styled.tsx
+++ b/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);
}
`;
diff --git a/frontend/src/metabase/components/SingleSelectListField/SingleSelectListField.styled.tsx b/frontend/src/metabase/components/SingleSelectListField/SingleSelectListField.styled.tsx
index 7aefe00d1c3cba95845c103a53377ab354dc995c..8f04b89ef258d55e6593df51d5e99f6aafad4c67 100644
--- a/frontend/src/metabase/components/SingleSelectListField/SingleSelectListField.styled.tsx
+++ b/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 =>
diff --git a/frontend/src/metabase/components/Toaster/Toaster.styled.tsx b/frontend/src/metabase/components/Toaster/Toaster.styled.tsx
index 9db13557f13f603d070634383d18fc8418738a52..cdfff06c111b11f614500828da08c2702b21ec13 100644
--- a/frontend/src/metabase/components/Toaster/Toaster.styled.tsx
+++ b/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)};
}
`;
diff --git a/frontend/src/metabase/components/TokenField/TokenField.styled.tsx b/frontend/src/metabase/components/TokenField/TokenField.styled.tsx
index 8d626210b1ac0d4a9bc7437e29a61476f1a7ac3a..0f46a59eb52ead4e1ef43cd0632508ed821f7db9 100644
--- a/frontend/src/metabase/components/TokenField/TokenField.styled.tsx
+++ b/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)};
diff --git a/frontend/src/metabase/components/UserAvatar/UserAvatar.styled.tsx b/frontend/src/metabase/components/UserAvatar/UserAvatar.styled.tsx
index de03761eb253bb0b0e374bcb3b9043f7efb17051..5921b87ad41f14da9c6f21378b1ee379e29a85a3 100644
--- a/frontend/src/metabase/components/UserAvatar/UserAvatar.styled.tsx
+++ b/frontend/src/metabase/components/UserAvatar/UserAvatar.styled.tsx
@@ -1,6 +1,6 @@
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;
`;
diff --git a/frontend/src/metabase/components/UserPicker/UserPicker.styled.tsx b/frontend/src/metabase/components/UserPicker/UserPicker.styled.tsx
index 0a7e01fa412778ce9ddec8b1be8e8f8e8a1d47b6..d4d35d4ff747ee6bf3d532729da7a53898c8b02c 100644
--- a/frontend/src/metabase/components/UserPicker/UserPicker.styled.tsx
+++ b/frontend/src/metabase/components/UserPicker/UserPicker.styled.tsx
@@ -1,7 +1,6 @@
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`
diff --git a/frontend/src/metabase/components/icons/CountdownIcon.styled.tsx b/frontend/src/metabase/components/icons/CountdownIcon.styled.tsx
index 87c6232c80b8823b81800bb68b9a5223c70a8a9b..50fd3dcbfcf54596958d0e17cf39d11f5b4a69dc 100644
--- a/frontend/src/metabase/components/icons/CountdownIcon.styled.tsx
+++ b/frontend/src/metabase/components/icons/CountdownIcon.styled.tsx
@@ -1,7 +1,5 @@
import styled from "@emotion/styled";
-import { color } from "metabase/lib/colors";
-
export const IconRoot = styled.svg`
- color: ${color("summarize")};
+ color: var(--mb-color-summarize);
`;
diff --git a/frontend/src/metabase/components/tree/TreeNode.styled.tsx b/frontend/src/metabase/components/tree/TreeNode.styled.tsx
index ef27b604f84c25fec6dca25faa7c1039205f1739..9e244e3301beac60b875453c77c2d5b44daf751d 100644
--- a/frontend/src/metabase/components/tree/TreeNode.styled.tsx
+++ b/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;
diff --git a/frontend/src/metabase/containers/UndoListing.jsx b/frontend/src/metabase/containers/UndoListing.jsx
index 17427367ba80e11343c3d7a8b25e0b254b15d59f..72d4a704a6cca74237608187de62136f4c196560 100644
--- a/frontend/src/metabase/containers/UndoListing.jsx
+++ b/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>
diff --git a/frontend/src/metabase/containers/UndoListing.styled.tsx b/frontend/src/metabase/containers/UndoListing.styled.tsx
index 3518e5751f0adab05f240a772b8c8f0636d6bdb2..19ad30d9e20808a77fd67fa7bbc64e00abbacdb6 100644
--- a/frontend/src/metabase/containers/UndoListing.styled.tsx
+++ b/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)};
}
`;
diff --git a/frontend/src/metabase/containers/Unsubscribe.styled.tsx b/frontend/src/metabase/containers/Unsubscribe.styled.tsx
index 81d0570cf4e1747bde6dbf22a2503c89966bcd08..1ad74c9b41e43f0b96874d991b592b172684a247 100644
--- a/frontend/src/metabase/containers/Unsubscribe.styled.tsx
+++ b/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;
diff --git a/frontend/src/metabase/core/components/Button/Button.styled.tsx b/frontend/src/metabase/core/components/Button/Button.styled.tsx
index d085a9fc7e643d3c6339bfde22bd3564ff9eb21a..ac4c4e7129f302cfd1ebace06fa4e2cc4041d478 100644
--- a/frontend/src/metabase/core/components/Button/Button.styled.tsx
+++ b/frontend/src/metabase/core/components/Button/Button.styled.tsx
@@ -1,7 +1,7 @@
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)};
}
diff --git a/frontend/src/metabase/core/components/ColorPicker/ColorPicker.styled.tsx b/frontend/src/metabase/core/components/ColorPicker/ColorPicker.styled.tsx
index cd44cab0b51898293e6af9da8b251092262e6c68..6ba82ad66bc5c531f5814a9fb23afef59d590ba0 100644
--- a/frontend/src/metabase/core/components/ColorPicker/ColorPicker.styled.tsx
+++ b/frontend/src/metabase/core/components/ColorPicker/ColorPicker.styled.tsx
@@ -1,7 +1,5 @@
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;
`;
diff --git a/frontend/src/metabase/core/components/Markdown/Markdown.styled.tsx b/frontend/src/metabase/core/components/Markdown/Markdown.styled.tsx
index fe25f6ca616cad66a13afb7accedc86299f9cf02..4aaed46bca9016b94f80ecdae2be17a4d6cb6db2 100644
--- a/frontend/src/metabase/core/components/Markdown/Markdown.styled.tsx
+++ b/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 {
diff --git a/frontend/src/metabase/core/components/Radio/Radio.styled.tsx b/frontend/src/metabase/core/components/Radio/Radio.styled.tsx
index 16c7169f642070f7f4e14c820e4a6781e61ce424..2355c6dba8c8617a5033bc511b1281556c7e210c 100644
--- a/frontend/src/metabase/core/components/Radio/Radio.styled.tsx
+++ b/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)
diff --git a/frontend/src/metabase/core/components/SelectButton/SelectButton.styled.tsx b/frontend/src/metabase/core/components/SelectButton/SelectButton.styled.tsx
index 29d24289a8550226e4f906b01417755af61f0519..5b17a1f87aafacd57a611d2575cf81edc8153ee8 100644
--- a/frontend/src/metabase/core/components/SelectButton/SelectButton.styled.tsx
+++ b/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;
diff --git a/frontend/src/metabase/core/components/Slider/Slider.styled.tsx b/frontend/src/metabase/core/components/Slider/Slider.styled.tsx
index 6e0f17e8e740b97ae51c472ce85bd89579feb352..815a6130f356ed59824f0540f664707d945928fc 100644
--- a/frontend/src/metabase/core/components/Slider/Slider.styled.tsx
+++ b/frontend/src/metabase/core/components/Slider/Slider.styled.tsx
@@ -1,7 +1,7 @@
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;
diff --git a/frontend/src/metabase/core/components/TabRow/TabRow.styled.tsx b/frontend/src/metabase/core/components/TabRow/TabRow.styled.tsx
index e162942cf1f6974e2f4d72c512ab208f2a981e34..5b8846549a194bc1a24dfca472e8b08eef74d766 100644
--- a/frontend/src/metabase/core/components/TabRow/TabRow.styled.tsx
+++ b/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)
);
`;
diff --git a/frontend/src/metabase/core/components/Toggle/Toggle.styled.tsx b/frontend/src/metabase/core/components/Toggle/Toggle.styled.tsx
index de316de6178d018d4f759a992685c1481f92d2c7..a38f8410e202a0d2aa73f51ea235810bc257db6e 100644
--- a/frontend/src/metabase/core/components/Toggle/Toggle.styled.tsx
+++ b/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);
}
diff --git a/frontend/src/metabase/css/components/buttons.module.css b/frontend/src/metabase/css/components/buttons.module.css
index 04fd19c814f9333a4954d77f8243f1dfb25db59f..6226dfe721a830d2d8dab74d1969622d505c978d 100644
--- a/frontend/src/metabase/css/components/buttons.module.css
+++ b/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 {
diff --git a/frontend/src/metabase/css/core/bordered.module.css b/frontend/src/metabase/css/core/bordered.module.css
index e2bcf3440e982a23b93f89bd556c74f11247303c..12a360e5dc03839a84cfb07588755ec9531fdd91 100644
--- a/frontend/src/metabase/css/core/bordered.module.css
+++ b/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 {
diff --git a/frontend/src/metabase/css/core/colors.module.css b/frontend/src/metabase/css/core/colors.module.css
index 42f5b7974af39e0f32c63d8391ca61677f36cca6..7198220d9ad0ccb57a60a181a125f73866fa28a9 100644
--- a/frontend/src/metabase/css/core/colors.module.css
+++ b/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 {
diff --git a/frontend/src/metabase/css/dashboard.module.css b/frontend/src/metabase/css/dashboard.module.css
index 75a991164d96993c9444fbdc8d925cc8f8cc86c3..4f9d6c06aecb93a7c1470c46ef7c2a9a5f37a09d 100644
--- a/frontend/src/metabase/css/dashboard.module.css
+++ b/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;
}
diff --git a/frontend/src/metabase/css/query_builder.module.css b/frontend/src/metabase/css/query_builder.module.css
index 6346c0c94b8e665e3a4dbeddf6274be8db4dface..acdcf68c61b9effebc59de7038492f4ffbae5454 100644
--- a/frontend/src/metabase/css/query_builder.module.css
+++ b/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) {
diff --git a/frontend/src/metabase/dashboard/components/ClickBehaviorSidebar/SidebarItem/SidebarItem.styled.tsx b/frontend/src/metabase/dashboard/components/ClickBehaviorSidebar/SidebarItem/SidebarItem.styled.tsx
index b509bc1e64f2f449532017a5ad18e922a2f8257c..05c30966e4c41752708be02b25b15d4f732d8f02 100644
--- a/frontend/src/metabase/dashboard/components/ClickBehaviorSidebar/SidebarItem/SidebarItem.styled.tsx
+++ b/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`
diff --git a/frontend/src/metabase/dashboard/components/ClickBehaviorSidebar/TypeSelector/TypeSelector.styled.tsx b/frontend/src/metabase/dashboard/components/ClickBehaviorSidebar/TypeSelector/TypeSelector.styled.tsx
index c5dc35553009a37c00dd43103b761290f28e870c..7b97585706a881c5287989752be8e8a10d4c262c 100644
--- a/frontend/src/metabase/dashboard/components/ClickBehaviorSidebar/TypeSelector/TypeSelector.styled.tsx
+++ b/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")};
}
`;
diff --git a/frontend/src/metabase/dashboard/components/ClickBehaviorSidebar/TypeSelector/TypeSelector.tsx b/frontend/src/metabase/dashboard/components/ClickBehaviorSidebar/TypeSelector/TypeSelector.tsx
index b2268dcd372d566f63d5df8ee6ae201d4110624b..b0af2288a9f7de2fba1597f2fda969f27fe4811c 100644
--- a/frontend/src/metabase/dashboard/components/ClickBehaviorSidebar/TypeSelector/TypeSelector.tsx
+++ b/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>
diff --git a/frontend/src/metabase/dashboard/components/DashCard/DashCardParameterMapper/DashCardCardParameterMapper.styled.tsx b/frontend/src/metabase/dashboard/components/DashCard/DashCardParameterMapper/DashCardCardParameterMapper.styled.tsx
index 8685bce99fac9e635331b47d58be788be1751f27..2eba3065ed4a90150e509501019ebeca4711b894 100644
--- a/frontend/src/metabase/dashboard/components/DashCard/DashCardParameterMapper/DashCardCardParameterMapper.styled.tsx
+++ b/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)};
}
`;
diff --git a/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.styled.tsx b/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.styled.tsx
index 661d7a01ece75d537c659d4a9ec38a7309a2c180..bc8aa4dc5bd2fb16585cc66e3c63687983376fae 100644
--- a/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.styled.tsx
+++ b/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);
`}
`;
diff --git a/frontend/src/metabase/dashboard/components/Dashboard/DashboardEmptyState/DashboardEmptyState.styled.tsx b/frontend/src/metabase/dashboard/components/Dashboard/DashboardEmptyState/DashboardEmptyState.styled.tsx
index 73d43ba52d1bea22cea1c06bcdf1fe9628f5757e..773287282297640ac1a828aaf7a88e1d5642a1df 100644
--- a/frontend/src/metabase/dashboard/components/Dashboard/DashboardEmptyState/DashboardEmptyState.styled.tsx
+++ b/frontend/src/metabase/dashboard/components/Dashboard/DashboardEmptyState/DashboardEmptyState.styled.tsx
@@ -1,10 +1,12 @@
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)};
`;
diff --git a/frontend/src/metabase/dashboard/components/DashboardHeader/SectionLayoutPreview.tsx b/frontend/src/metabase/dashboard/components/DashboardHeader/SectionLayoutPreview.tsx
index 64f1ad53ade4a7057151f3ce8ff6f231bed0bb4b..b6da14680b8f3140319c2a6e1e1e316e225b78d9 100644
--- a/frontend/src/metabase/dashboard/components/DashboardHeader/SectionLayoutPreview.tsx
+++ b/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" }}
/>
);
diff --git a/frontend/src/metabase/dashboard/components/DashboardInfoSidebar/DashboardInfoSidebar.styled.tsx b/frontend/src/metabase/dashboard/components/DashboardInfoSidebar/DashboardInfoSidebar.styled.tsx
index 7e5e2f78a4ad8e6ea0f48331512fb060fe736ede..7082d0e53df22523b1f6837113526a83d0bab8b9 100644
--- a/frontend/src/metabase/dashboard/components/DashboardInfoSidebar/DashboardInfoSidebar.styled.tsx
+++ b/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
diff --git a/frontend/src/metabase/dashboard/components/DashboardMoveModal.tsx b/frontend/src/metabase/dashboard/components/DashboardMoveModal.tsx
index 0a4fcec569935603748aadb797f04f188b9ec689..c7fd90eb82382cbc091400dcfc0bb7be576f408f 100644
--- a/frontend/src/metabase/dashboard/components/DashboardMoveModal.tsx
+++ b/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}
diff --git a/frontend/src/metabase/dashboard/components/ParametersPopover.styled.tsx b/frontend/src/metabase/dashboard/components/ParametersPopover.styled.tsx
index 083b78fe4ebcaa414bdd4e9a1540c2b0f4457b59..7ad0c13010929a004bcaa389e340f5b25dfe236f 100644
--- a/frontend/src/metabase/dashboard/components/ParametersPopover.styled.tsx
+++ b/frontend/src/metabase/dashboard/components/ParametersPopover.styled.tsx
@@ -15,11 +15,11 @@ export const OptionItemRoot = styled.li`
cursor: pointer;
&:hover {
- color: ${color("white")};
+ color: var(--mb-color-text-white);
background-color: var(--mb-color-brand);
${OptionItemTitle}, ${OptionItemDescription} {
- color: ${color("white")};
+ color: var(--mb-color-text-white);
}
}
`;
diff --git a/frontend/src/metabase/databases/components/DatabaseEngineField/DatabaseEngineWidget.styled.tsx b/frontend/src/metabase/databases/components/DatabaseEngineField/DatabaseEngineWidget.styled.tsx
index b036c14c61da6cf1fc791e552d1092cc56894db0..177e77f54c6390a4e2188f150ea4cc65470df8a8 100644
--- a/frontend/src/metabase/databases/components/DatabaseEngineField/DatabaseEngineWidget.styled.tsx
+++ b/frontend/src/metabase/databases/components/DatabaseEngineField/DatabaseEngineWidget.styled.tsx
@@ -35,7 +35,7 @@ export const EngineCardRoot = styled.li<EngineCardRootProps>`
padding: 1rem;
border: 1px solid var(--mb-color-bg-medium);
border-radius: 0.375rem;
- background-color: ${color("white")};
+ background-color: var(--mb-color-bg-white);
cursor: pointer;
outline: ${props => props.isActive && `2px solid var(--mb-color-focus)`};
diff --git a/frontend/src/metabase/forms/components/FormMessage/FormMessage.styled.tsx b/frontend/src/metabase/forms/components/FormMessage/FormMessage.styled.tsx
index c3f1dd36310e0f8bd62b11329e5a37c9f429c5bf..fdac52890738bf2c8606175cc747d9b3b12cb2f6 100644
--- a/frontend/src/metabase/forms/components/FormMessage/FormMessage.styled.tsx
+++ b/frontend/src/metabase/forms/components/FormMessage/FormMessage.styled.tsx
@@ -10,7 +10,7 @@ export const FormMessageStyled = styled.span<{
noPadding?: boolean;
}>`
color: ${({ hasSucceeded }) =>
- hasSucceeded ? color("success") : color("error")};
+ hasSucceeded ? "var(--mb-color-success)" : color("error")};
float: left;
opacity: 0;
padding-bottom: ${({ noPadding }) => (noPadding ? "" : space(2))};
diff --git a/frontend/src/metabase/forms/components/FormTextInput/FormTextInput.styled.tsx b/frontend/src/metabase/forms/components/FormTextInput/FormTextInput.styled.tsx
index 890e7d2ce7cc54bf300edf8af8d8f1fcbd80d2d0..91e9be639ef5bf53535cb4078a6e439825bea247 100644
--- a/frontend/src/metabase/forms/components/FormTextInput/FormTextInput.styled.tsx
+++ b/frontend/src/metabase/forms/components/FormTextInput/FormTextInput.styled.tsx
@@ -1,7 +1,6 @@
import styled from "@emotion/styled";
import { CopyButton } from "metabase/components/CopyButton";
-import { color } from "metabase/lib/colors";
export const CopyWidgetButton = styled(CopyButton)`
position: absolute;
@@ -18,7 +17,7 @@ export const CopyWidgetButton = styled(CopyButton)`
outline: none;
&:hover {
- color: ${color("white")};
+ color: var(--mb-color-text-white);
background-color: var(--mb-color-brand);
}
`;
diff --git a/frontend/src/metabase/home/components/CustomHomePageModal/CustomHomePageModal.tsx b/frontend/src/metabase/home/components/CustomHomePageModal/CustomHomePageModal.tsx
index a3e7a689ea15024ba39c21b1221773abe0b17a49..cb62f6808e596ca62efbf80264d95276addc828a 100644
--- a/frontend/src/metabase/home/components/CustomHomePageModal/CustomHomePageModal.tsx
+++ b/frontend/src/metabase/home/components/CustomHomePageModal/CustomHomePageModal.tsx
@@ -46,13 +46,13 @@ export const CustomHomePageModal = ({
<Box ml="0.5rem" mr="2.5rem">
<Text
span
- c="white"
+ c="text-white"
fw={700}
>{t`This dashboard has been set as your homepage.`}</Text>
<br />
<Text
span
- c="white"
+ c="text-white"
>{t`You can change this in Admin > Settings > General.`}</Text>
</Box>
),
diff --git a/frontend/src/metabase/home/components/HomeCard/HomeCard.styled.tsx b/frontend/src/metabase/home/components/HomeCard/HomeCard.styled.tsx
index 9ecc276f34cd58bcea00045123587c1c59ba1237..07641b185ddd4288c677fc555e052134889338eb 100644
--- a/frontend/src/metabase/home/components/HomeCard/HomeCard.styled.tsx
+++ b/frontend/src/metabase/home/components/HomeCard/HomeCard.styled.tsx
@@ -1,7 +1,7 @@
import styled from "@emotion/styled";
import Link from "metabase/core/components/Link";
-import { alpha, color } from "metabase/lib/colors";
+import { alpha } from "metabase/lib/colors";
import {
breakpointMinLarge,
breakpointMinSmall,
@@ -13,7 +13,7 @@ export const CardRoot = styled(Link)`
padding: 1rem;
border: 1px solid var(--mb-color-border);
border-radius: 0.5rem;
- background-color: ${color("white")};
+ background-color: var(--mb-color-bg-white);
box-shadow: 0 7px 20px var(--mb-color-shadow);
max-width: 100%;
diff --git a/frontend/src/metabase/home/components/HomeHelpCard/HomeHelpCard.styled.tsx b/frontend/src/metabase/home/components/HomeHelpCard/HomeHelpCard.styled.tsx
index 9efcc02fb443ead50f4e83ce4b2c08507cc53802..947fbf0d847bb245e63b32966c1df036f31b1e34 100644
--- a/frontend/src/metabase/home/components/HomeHelpCard/HomeHelpCard.styled.tsx
+++ b/frontend/src/metabase/home/components/HomeHelpCard/HomeHelpCard.styled.tsx
@@ -6,7 +6,7 @@ import { breakpointMinLarge } from "metabase/styled-components/theme";
import { Icon } from "metabase/ui";
export const CardRoot = styled(ExternalLink)`
- background: ${color("white")};
+ background: var(--mb-color-bg-white);
display: flex;
align-items: center;
padding: 1rem;
diff --git a/frontend/src/metabase/hooks/use-palette.ts b/frontend/src/metabase/hooks/use-palette.ts
index 4b071b9ec8dfa0263c4ae2462ed319be045f1810..cdcd91387ca4f5a8ef67f5d6d86b7fb636f00793 100644
--- a/frontend/src/metabase/hooks/use-palette.ts
+++ b/frontend/src/metabase/hooks/use-palette.ts
@@ -19,5 +19,5 @@ export function usePalette(): ColorPalette {
"text-dark": theme.fn.themeColor("text-dark"),
"text-white": theme.fn.themeColor("text-white"),
};
- }, [theme.fn]);
+ }, [theme]);
}
diff --git a/frontend/src/metabase/lib/colors/groups.ts b/frontend/src/metabase/lib/colors/groups.ts
index 74d680648a9bda4df7f74f249221db070381ec32..10206296ba2e2e65a87e22f7eafc16fdc6eb8297 100644
--- a/frontend/src/metabase/lib/colors/groups.ts
+++ b/frontend/src/metabase/lib/colors/groups.ts
@@ -34,7 +34,7 @@ export const getDarkAccentColors = (palette?: ColorPalette) => {
export const getStatusColorRanges = () => {
return [
- [color("error"), color("white"), color("success")],
+ [color("error"), color("bg-white"), color("success")],
[color("error"), color("warning"), color("success")],
];
};
diff --git a/frontend/src/metabase/lib/colors/palette.ts b/frontend/src/metabase/lib/colors/palette.ts
index ee745ae2bf979bf573d6fae6e572420f810a4b4d..cc2bea8083652639ea31e1f21a725410b7113500 100644
--- a/frontend/src/metabase/lib/colors/palette.ts
+++ b/frontend/src/metabase/lib/colors/palette.ts
@@ -168,13 +168,13 @@ export const getTextColorForBackground = (
getColor: ColorGetter = color,
) => {
const whiteTextContrast =
- Color(getColor(backgroundColor)).contrast(Color(getColor("white"))) *
+ Color(getColor(backgroundColor)).contrast(Color(getColor("text-white"))) *
whiteTextColorPriorityFactor;
const darkTextContrast = Color(getColor(backgroundColor)).contrast(
Color(getColor("text-dark")),
);
return whiteTextContrast > darkTextContrast
- ? getColor("white")
+ ? getColor("text-white")
: getColor("text-dark");
};
diff --git a/frontend/src/metabase/lib/colors/scales.unit.spec.ts b/frontend/src/metabase/lib/colors/scales.unit.spec.ts
index cbebe289b0333b0cbafff428977abe40c9599678..b5285b980da7f4c5b2e37533b8583723591cfd32 100644
--- a/frontend/src/metabase/lib/colors/scales.unit.spec.ts
+++ b/frontend/src/metabase/lib/colors/scales.unit.spec.ts
@@ -2,7 +2,7 @@ import { color } from "./palette";
import { getColorScale } from "./scales";
describe("scales", () => {
- const colors = [color("white"), color("bg-black")];
+ const colors = [color("bg-white"), color("bg-black")];
it("should interpolate colors by default", () => {
const scale = getColorScale([0, 1], colors);
diff --git a/frontend/src/metabase/models/components/ModelDetailPage/ModelActionDetails/ModelActionListItem.styled.tsx b/frontend/src/metabase/models/components/ModelDetailPage/ModelActionDetails/ModelActionListItem.styled.tsx
index 33e54429cc28f40885c28d76276ad75cb616d2ba..5b18627b0272cbcc9473fee7f9751e9a3e58e00b 100644
--- a/frontend/src/metabase/models/components/ModelDetailPage/ModelActionDetails/ModelActionListItem.styled.tsx
+++ b/frontend/src/metabase/models/components/ModelDetailPage/ModelActionDetails/ModelActionListItem.styled.tsx
@@ -67,7 +67,7 @@ export const CodeBlock = styled.pre`
white-space: pre-wrap;
margin: 0;
- color: ${color("text-white")};
+ color: var(--mb-color-text-white);
background-color: ${color("text-dark")};
`;
diff --git a/frontend/src/metabase/models/containers/NewModelOptions/NewModelOptions.styled.tsx b/frontend/src/metabase/models/containers/NewModelOptions/NewModelOptions.styled.tsx
index 5b0ef90cedd97d285cc0658181a80b05a89f3212..1f6de2dc473c5249f2166e31aa6e67fe2859aa80 100644
--- a/frontend/src/metabase/models/containers/NewModelOptions/NewModelOptions.styled.tsx
+++ b/frontend/src/metabase/models/containers/NewModelOptions/NewModelOptions.styled.tsx
@@ -2,7 +2,6 @@ import styled from "@emotion/styled";
import { GridItem } from "metabase/components/Grid";
import ExternalLink from "metabase/core/components/ExternalLink";
-import { color } from "metabase/lib/colors";
import {
breakpointMinMedium,
breakpointMinSmall,
@@ -37,7 +36,7 @@ export const EducationalButton = styled(ExternalLink)`
transition: all 0.3s;
&:hover {
- color: ${color("white")};
+ color: var(--mb-color-text-white);
background-color: var(--mb-color-brand);
}
`;
diff --git a/frontend/src/metabase/nav/components/AdminNavbar/AdminNavItem.styled.tsx b/frontend/src/metabase/nav/components/AdminNavbar/AdminNavItem.styled.tsx
index d3a9797c4cbb8039da49000a4ed01000dd7b7a9d..712963b9af2aab1687b73788b612793a89b707e0 100644
--- a/frontend/src/metabase/nav/components/AdminNavbar/AdminNavItem.styled.tsx
+++ b/frontend/src/metabase/nav/components/AdminNavbar/AdminNavItem.styled.tsx
@@ -11,5 +11,6 @@ interface AdminNavLinkProps {
export const AdminNavLink = styled(Link)<AdminNavLinkProps>`
padding: 0.5rem 1rem;
text-decoration: none;
- color: ${props => (props.isSelected ? color("white") : alpha("white", 0.63))};
+ color: ${props =>
+ props.isSelected ? color("text-white") : alpha("text-white", 0.63)};
`;
diff --git a/frontend/src/metabase/nav/components/AdminNavbar/AdminNavbar.styled.tsx b/frontend/src/metabase/nav/components/AdminNavbar/AdminNavbar.styled.tsx
index 5135249f8f165d7096b634f22ecfe08f4b530d1d..cabf6192efec2018eefb1b3b8b06a8448275e70c 100644
--- a/frontend/src/metabase/nav/components/AdminNavbar/AdminNavbar.styled.tsx
+++ b/frontend/src/metabase/nav/components/AdminNavbar/AdminNavbar.styled.tsx
@@ -12,7 +12,7 @@ import { ADMIN_NAVBAR_HEIGHT } from "../../constants";
export const AdminNavbarRoot = styled.nav`
padding: 0.5rem 1rem;
background: ${color("admin-navbar")};
- color: ${color("white")};
+ color: var(--mb-color-text-white);
font-size: 0.85rem;
height: ${ADMIN_NAVBAR_HEIGHT};
display: flex;
@@ -60,18 +60,18 @@ export const AdminMobileNavBarItems = styled.ul`
`;
export const AdminExitLink = styled(Link)`
- border: 1px solid ${alpha("white", 0.2)};
+ border: 1px solid ${() => alpha("bg-white", 0.2)};
padding: 12px 18px;
border-radius: 5px;
font-weight: 700;
font-size: 13px;
transition: all 200ms;
- color: ${color("white")};
+ color: var(--mb-color-text-white);
white-space: nowrap;
text-align: center;
&:hover {
- color: ${color("white")};
+ color: var(--mb-color-text-white);
background-color: ${() => darken(color("filter"))};
border-color: ${() => darken(color("filter"))};
}
diff --git a/frontend/src/metabase/nav/components/AdminNavbar/AdminNavbar.tsx b/frontend/src/metabase/nav/components/AdminNavbar/AdminNavbar.tsx
index 569ab651549bac412b57ee8ddfdde535933d6263..196b043682ddb354208d6a2bd91b599465d47a46 100644
--- a/frontend/src/metabase/nav/components/AdminNavbar/AdminNavbar.tsx
+++ b/frontend/src/metabase/nav/components/AdminNavbar/AdminNavbar.tsx
@@ -97,7 +97,7 @@ const MobileNavbar = ({ adminPaths, currentPath }: AdminMobileNavbarProps) => {
variant="subtle"
p="0.25rem"
>
- <Icon name="burger" size={32} color="white" />
+ <Icon name="burger" size={32} color="text-white" />
</Button>
{mobileNavOpen && (
<AdminMobileNavBarItems>
diff --git a/frontend/src/metabase/nav/components/CollectionBreadcrumbs/CollectionBreadcrumbs.styled.tsx b/frontend/src/metabase/nav/components/CollectionBreadcrumbs/CollectionBreadcrumbs.styled.tsx
index ceab76b20732c23546ad493dab48b076c20b7c93..348387e22baab6d39f7fc3a7e6e69291ecb25796 100644
--- a/frontend/src/metabase/nav/components/CollectionBreadcrumbs/CollectionBreadcrumbs.styled.tsx
+++ b/frontend/src/metabase/nav/components/CollectionBreadcrumbs/CollectionBreadcrumbs.styled.tsx
@@ -29,7 +29,7 @@ export const ExpandButton = styled(Button)`
color: ${color("text-medium")};
&:hover {
- color: ${color("text-white")};
+ color: var(--mb-color-text-white);
background-color: var(--mb-color-brand);
}
`;
diff --git a/frontend/src/metabase/nav/components/StoreLink/StoreLink.styled.tsx b/frontend/src/metabase/nav/components/StoreLink/StoreLink.styled.tsx
index 0d4a4f72889e0f24520aa0d4d65d23c0f9ad1bc7..2d7ecceb1527ab6e36db480a9690347bb3ee7366 100644
--- a/frontend/src/metabase/nav/components/StoreLink/StoreLink.styled.tsx
+++ b/frontend/src/metabase/nav/components/StoreLink/StoreLink.styled.tsx
@@ -17,11 +17,11 @@ export const StoreIconWrapper = styled.div`
height: 40px;
border-radius: 6px;
cursor: pointer;
- color: ${color("white")};
+ color: var(--mb-color-text-white);
transition: all 300ms ease-in-out;
&:hover {
- color: ${color("white")};
+ color: var(--mb-color-text-white);
background-color: ${() => darken(color("filter"))};
}
diff --git a/frontend/src/metabase/nav/components/search/SearchBar/SearchBar.styled.tsx b/frontend/src/metabase/nav/components/search/SearchBar/SearchBar.styled.tsx
index 13b863424ca4f5dc170018642f5a38e187f3a3df..ee185671975baba303d664f933e1946ed61341db 100644
--- a/frontend/src/metabase/nav/components/search/SearchBar/SearchBar.styled.tsx
+++ b/frontend/src/metabase/nav/components/search/SearchBar/SearchBar.styled.tsx
@@ -37,7 +37,7 @@ export const SearchInputContainer = styled.div<{
`;
}
return css`
- background-color: ${color("white")};
+ background-color: var(--mb-color-bg-white);
&:hover {
background-color: var(--mb-color-bg-light);
diff --git a/frontend/src/metabase/nav/containers/MainNavbar/MainNavbar.styled.tsx b/frontend/src/metabase/nav/containers/MainNavbar/MainNavbar.styled.tsx
index 3457ae1257190ff376a9224d41ae716b9edef252..50252970a472e42ff1f892f32ad88c966852b42c 100644
--- a/frontend/src/metabase/nav/containers/MainNavbar/MainNavbar.styled.tsx
+++ b/frontend/src/metabase/nav/containers/MainNavbar/MainNavbar.styled.tsx
@@ -33,7 +33,7 @@ export const Sidebar = styled.aside<{ isOpen: boolean }>`
position: relative;
flex-shrink: 0;
align-items: center;
- background-color: ${color("white")};
+ background-color: var(--mb-color-bg-white);
overflow: auto;
overflow-x: hidden;
@@ -146,7 +146,7 @@ export const PaddedSidebarLink = styled(SidebarLink)`
export const AddYourOwnDataLink = styled(SidebarLink)`
background: var(--mb-color-brand);
border-radius: 8px;
- color: ${color("white")};
+ color: var(--mb-color-text-white);
margin: ${space(1)};
padding: 2px 6px;
svg {
@@ -160,7 +160,7 @@ export const AddYourOwnDataLink = styled(SidebarLink)`
&:hover {
background: ${() => lighten("brand", 0.12)};
- color: ${color("white")};
+ color: var(--mb-color-text-white);
svg {
color: var(--mb-color-brand-light) !important;
diff --git a/frontend/src/metabase/nav/containers/MainNavbar/SidebarItems/SidebarItems.styled.tsx b/frontend/src/metabase/nav/containers/MainNavbar/SidebarItems/SidebarItems.styled.tsx
index c78c3cac3f70bc25a56e99014bf37b263e1d1315..780adf52dff1581ea2def4bc2339a568dad8c76d 100644
--- a/frontend/src/metabase/nav/containers/MainNavbar/SidebarItems/SidebarItems.styled.tsx
+++ b/frontend/src/metabase/nav/containers/MainNavbar/SidebarItems/SidebarItems.styled.tsx
@@ -70,7 +70,7 @@ NodeRoot.defaultProps = {
};
export const collectionDragAndDropHoverStyle = css`
- color: ${color("text-white")};
+ color: var(--mb-color-text-white);
background-color: var(--mb-color-brand);
`;
diff --git a/frontend/src/metabase/palette/components/PaletteResultItem.tsx b/frontend/src/metabase/palette/components/PaletteResultItem.tsx
index 23d909caf993df37915aba0bf1de429438637492..d92971611fef52413aa6693d4f400934ec51abe2 100644
--- a/frontend/src/metabase/palette/components/PaletteResultItem.tsx
+++ b/frontend/src/metabase/palette/components/PaletteResultItem.tsx
@@ -39,7 +39,7 @@ export const PaletteResultItem = ({ item, active }: PaletteResultItemProps) => {
flexBasis: 0,
}}
bg={active ? color("brand") : "none"}
- c={active ? color("white") : color("text-dark")}
+ c={active ? color("text-white") : color("text-dark")}
aria-label={item.name}
>
{/** Icon Container */}
@@ -74,7 +74,7 @@ export const PaletteResultItem = ({ item, active }: PaletteResultItemProps) => {
{item.extra?.isVerified && (
<Icon
name="verified_filled"
- color={active ? color("white") : color("brand")}
+ color={active ? color("text-white") : color("brand")}
style={{
verticalAlign: "sub",
marginLeft: "0.25rem",
@@ -94,7 +94,7 @@ export const PaletteResultItem = ({ item, active }: PaletteResultItemProps) => {
</Box>
<Text
component="span"
- color={active ? "white" : "text-light"}
+ color={active ? "text-white" : "text-light"}
fw="normal"
style={{
textOverflow: "ellipsis",
diff --git a/frontend/src/metabase/parameters/components/ParameterSettings/ParameterSettings.styled.tsx b/frontend/src/metabase/parameters/components/ParameterSettings/ParameterSettings.styled.tsx
index c31ea96ae5e2c1eaf3205de42fc53485e43c380e..038dcab6c079dc20c021ef43aa9ac922b8161ec8 100644
--- a/frontend/src/metabase/parameters/components/ParameterSettings/ParameterSettings.styled.tsx
+++ b/frontend/src/metabase/parameters/components/ParameterSettings/ParameterSettings.styled.tsx
@@ -21,5 +21,5 @@ export const SettingValueWidget = styled(ParameterValueWidget)`
padding: 0.75rem 0.75rem;
border: 1px solid var(--mb-color-border);
border-radius: 0.5rem;
- background-color: ${color("white")};
+ background-color: var(--mb-color-bg-white);
`;
diff --git a/frontend/src/metabase/parameters/components/ParameterValueWidget.module.css b/frontend/src/metabase/parameters/components/ParameterValueWidget.module.css
index 96ca8b9bc8320665644cd00996009245169b67ce..ed2a5ecb17413dbd8731d3dc00aae115ca225c71 100644
--- a/frontend/src/metabase/parameters/components/ParameterValueWidget.module.css
+++ b/frontend/src/metabase/parameters/components/ParameterValueWidget.module.css
@@ -60,7 +60,7 @@
.DashboardNight .parameter.noPopover input:focus,
.ThemeNight .parameter.noPopover input:focus {
- color: var(--color-text-white);
+ color: var(--mb-color-text-white);
}
.name {
diff --git a/frontend/src/metabase/parameters/components/ParameterWidget/ParameterWidget.styled.ts b/frontend/src/metabase/parameters/components/ParameterWidget/ParameterWidget.styled.ts
index 9ea91b52082ed429aee49608679254775599ac91..3730fda7f8881296bc84c973213964ae84318a5c 100644
--- a/frontend/src/metabase/parameters/components/ParameterWidget/ParameterWidget.styled.ts
+++ b/frontend/src/metabase/parameters/components/ParameterWidget/ParameterWidget.styled.ts
@@ -50,9 +50,9 @@ export const ParameterContainer = styled.div<ParameterContainerProps>`
min-width: 170px;
margin: 0.25rem 0.5rem 0.25rem 0;
padding: 0.5rem;
- color: ${props => props.isEditingParameter && color("white")};
+ color: ${props => props.isEditingParameter && color("text-white")};
background-color: ${props =>
- props.isEditingParameter ? color("brand") : color("white")};
+ props.isEditingParameter ? color("brand") : color("bg-white")};
`;
export const SettingsIcon = styled(Icon)`
diff --git a/frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.module.css b/frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.module.css
index 016d48072272ba8a09248f9c8fb558a99c173209..8ffff811473b3a1e41f0f2dae317c59d632d3fcf 100644
--- a/frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.module.css
+++ b/frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.module.css
@@ -19,18 +19,18 @@ body {
.ThemeNight .EmbedFrameHeader,
.ThemeNight .EmbedFrameFooter {
- color: color-mod(var(--color-text-white) alpha(-14%));
+ color: color-mod(var(--mb-color-text-white) alpha(-14%));
background-color: var(--mb-color-bg-black);
border-color: var(--mb-color-bg-dark);
}
.ThemeNight.EmbedFrame .fullscreenNightText {
- color: color-mod(var(--color-text-white) alpha(-14%));
+ color: color-mod(var(--mb-color-text-white) alpha(-14%));
transition: color 1s linear;
}
.ThemeNight.EmbedFrame 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;
}
diff --git a/frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.styled.tsx b/frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.styled.tsx
index 5bdf8cb17c6d67111cb67af3f6bd0e5c1e5d86c9..a3ea20c2155f95179ffaeaeb6429c1960c9994c6 100644
--- a/frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.styled.tsx
+++ b/frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.styled.tsx
@@ -111,7 +111,7 @@ function getParameterPanelBackgroundColor(theme?: DisplayTheme) {
if (theme === "transparent") {
return "transparent";
}
- return color("white");
+ return color("bg-white");
}
function getParameterPanelBorderColor(theme?: DisplayTheme) {
diff --git a/frontend/src/metabase/public/components/EmbedFrame/LogoBadge.styled.tsx b/frontend/src/metabase/public/components/EmbedFrame/LogoBadge.styled.tsx
index 6b8e59681ff2a1837634a4bd3008635b146313b4..6bcca0deaccd21e4cd35aeee6fe4f96e8e0d8ad5 100644
--- a/frontend/src/metabase/public/components/EmbedFrame/LogoBadge.styled.tsx
+++ b/frontend/src/metabase/public/components/EmbedFrame/LogoBadge.styled.tsx
@@ -44,7 +44,7 @@ export const Message = styled.span<{ variant: Variant }>`
export const MetabaseName = styled.span<{ isDark: boolean; variant: Variant }>`
color: ${props => {
if (props.isDark) {
- return color("white");
+ return color("text-white");
}
return color(props.variant === "large" ? "text-dark" : "brand");
}};
diff --git a/frontend/src/metabase/public/components/EmbedModal/SelectEmbedTypePane/InteractiveEmbeddingCTA/InteractiveEmbeddingCTA.tsx b/frontend/src/metabase/public/components/EmbedModal/SelectEmbedTypePane/InteractiveEmbeddingCTA/InteractiveEmbeddingCTA.tsx
index 0d54a65464cdd24ef0a25c89934a1cdd5f0ea88a..a4ca42d8c83c64c9bfaa96212030b548d153602d 100644
--- a/frontend/src/metabase/public/components/EmbedModal/SelectEmbedTypePane/InteractiveEmbeddingCTA/InteractiveEmbeddingCTA.tsx
+++ b/frontend/src/metabase/public/components/EmbedModal/SelectEmbedTypePane/InteractiveEmbeddingCTA/InteractiveEmbeddingCTA.tsx
@@ -53,7 +53,7 @@ export const InteractiveEmbeddingCTA = () => {
>
<Text
align="center"
- c="white"
+ c="text-white"
span
tt="uppercase"
lts="0.7"
diff --git a/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/StaticEmbedSetupPane.styled.tsx b/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/StaticEmbedSetupPane.styled.tsx
index 525b36372a18c8061a4d528be0a10a2c98cb9fe3..b665f7e1603e438acb663ab99b845b98c538da60 100644
--- a/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/StaticEmbedSetupPane.styled.tsx
+++ b/frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/StaticEmbedSetupPane.styled.tsx
@@ -16,7 +16,7 @@ const SettingsAsideBlock = styled.div`
width: 21.6rem;
padding: 2rem;
border-right: 1px solid var(--mb-color-border);
- background-color: ${({ theme }) => theme.fn.themeColor("white")};
+ background-color: var(--mb-color-bg-white);
height: 45.125rem;
overflow-y: auto;
diff --git a/frontend/src/metabase/public/components/widgets/LegaleseStep/LegaleseStep.tsx b/frontend/src/metabase/public/components/widgets/LegaleseStep/LegaleseStep.tsx
index 708bafd918791b0128d73b4928a3f0a6de714cf7..511cad6e6847e67c941f6dabd2a3fdbf318e3912 100644
--- a/frontend/src/metabase/public/components/widgets/LegaleseStep/LegaleseStep.tsx
+++ b/frontend/src/metabase/public/components/widgets/LegaleseStep/LegaleseStep.tsx
@@ -24,7 +24,7 @@ export const LegaleseStep = ({
};
return (
- <Center bg="white" px="18rem" pt="6.25rem" pb="11.75rem">
+ <Center bg="bg-white" px="18rem" pt="6.25rem" pb="11.75rem">
<Stack align="center" spacing="3rem">
<Title order={2} fz="1.25rem">{t`First, some legalese`}</Title>
diff --git a/frontend/src/metabase/pulse/components/RecipientPicker.jsx b/frontend/src/metabase/pulse/components/RecipientPicker.jsx
index c4f4b9cffd5106b9d83af199cf00390686c49375..c4147ef471544cd92af8058e804302f1f668413b 100644
--- a/frontend/src/metabase/pulse/components/RecipientPicker.jsx
+++ b/frontend/src/metabase/pulse/components/RecipientPicker.jsx
@@ -77,7 +77,7 @@ export default class RecipientPicker extends Component {
valueRenderer={value => value.common_name ?? value.email}
optionRenderer={option => (
<div className={cx(CS.flex, CS.alignCenter)}>
- <Text color="white">
+ <Text color="text-white">
<UserAvatar user={option.value} />
</Text>
<span className={CS.ml1}>{option.value.common_name}</span>
diff --git a/frontend/src/metabase/query_builder/components/AlertModals/AlertModals.styled.tsx b/frontend/src/metabase/query_builder/components/AlertModals/AlertModals.styled.tsx
index cae64d1ff489fd1643ccb7a63521352aa3e78b45..f8af113c6e3793973bbf74e2fdc294ec81c183a4 100644
--- a/frontend/src/metabase/query_builder/components/AlertModals/AlertModals.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/AlertModals/AlertModals.styled.tsx
@@ -28,7 +28,7 @@ export const DangerZone = styled.div`
opacity: 1;
background-color: ${color("accent3")};
border-color: ${color("accent3")};
- color: ${color("text-white")};
+ color: var(--mb-color-text-white);
}
}
`;
diff --git a/frontend/src/metabase/query_builder/components/DataSelector/DataSelectorDataBucketPicker/DataSelectorDataBucketPicker.styled.tsx b/frontend/src/metabase/query_builder/components/DataSelector/DataSelectorDataBucketPicker/DataSelectorDataBucketPicker.styled.tsx
index ce8f6bc15934855f992ff47e2f3e7452829cdcdd..87e956fa1f8068a791dabe0aeb3f737795be1ab8 100644
--- a/frontend/src/metabase/query_builder/components/DataSelector/DataSelectorDataBucketPicker/DataSelectorDataBucketPicker.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/DataSelector/DataSelectorDataBucketPicker/DataSelectorDataBucketPicker.styled.tsx
@@ -41,7 +41,7 @@ export const DataBucketListItemContainer = styled(SelectList.BaseItem as any)`
${DataBucketListItemIcon},
${DataBucketListItemTitle},
${DataBucketListItemDescription} {
- color: ${color("text-white")};
+ color: var(--mb-color-text-white);
}
}
`;
diff --git a/frontend/src/metabase/query_builder/components/DatasetEditor/DatasetEditor.styled.tsx b/frontend/src/metabase/query_builder/components/DatasetEditor/DatasetEditor.styled.tsx
index 91d7602c965ac099438978254a7dce9169556853..5f7b9acc9e002bce118dbf9485f9af49cd916ade 100644
--- a/frontend/src/metabase/query_builder/components/DatasetEditor/DatasetEditor.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/DatasetEditor/DatasetEditor.styled.tsx
@@ -49,7 +49,7 @@ export const TableHeaderColumnName = styled.div<{ isSelected: boolean }>`
${props =>
props.isSelected &&
css`
- color: ${color("text-white")};
+ color: var(--mb-color-text-white);
background-color: var(--mb-color-brand);
`}
@@ -59,11 +59,11 @@ export const TableHeaderColumnName = styled.div<{ isSelected: boolean }>`
}
&:hover {
- color: ${color("white")};
+ color: var(--mb-color-text-white);
background-color: var(--mb-color-brand);
.Icon {
- background-color: ${color("white")};
+ background-color: var(--mb-color-bg-white);
color: var(--mb-color-brand);
}
}
@@ -71,9 +71,9 @@ export const TableHeaderColumnName = styled.div<{ isSelected: boolean }>`
export const FieldTypeIcon = styled(Icon)<{ isSelected: boolean }>`
background-color: ${props =>
- props.isSelected ? color("white") : color("brand")};
+ props.isSelected ? color("bg-white") : color("brand")};
- color: ${props => (props.isSelected ? color("brand") : color("white"))};
+ color: ${props => (props.isSelected ? color("brand") : color("text-white"))};
border-radius: 0.3em;
padding: 0.2em;
diff --git a/frontend/src/metabase/query_builder/components/DatasetEditor/DatasetFieldMetadataSidebar/MappedFieldPicker/MappedFieldPicker.styled.tsx b/frontend/src/metabase/query_builder/components/DatasetEditor/DatasetFieldMetadataSidebar/MappedFieldPicker/MappedFieldPicker.styled.tsx
index 60ee95e04ac1e1996e62d3f7da15b9d0c32a5a24..416988c51482d5fe09477b6c70a0262041fe2e51 100644
--- a/frontend/src/metabase/query_builder/components/DatasetEditor/DatasetFieldMetadataSidebar/MappedFieldPicker/MappedFieldPicker.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/DatasetEditor/DatasetFieldMetadataSidebar/MappedFieldPicker/MappedFieldPicker.styled.tsx
@@ -2,18 +2,17 @@ import { css } from "@emotion/react";
import styled from "@emotion/styled";
import SelectButton from "metabase/core/components/SelectButton";
-import { color } from "metabase/lib/colors";
export const StyledSelectButton = styled(SelectButton)`
${props =>
props.hasValue &&
css`
- color: ${color("text-white")} !important;
+ color: var(--mb-color-text-white) !important;
background-color: var(--mb-color-brand);
border-color: var(--mb-color-brand);
.Icon {
- color: ${color("text-white")};
+ color: var(--mb-color-text-white);
}
`};
`;
diff --git a/frontend/src/metabase/query_builder/components/DatasetEditor/EditorTabs/EditorTabs.styled.tsx b/frontend/src/metabase/query_builder/components/DatasetEditor/EditorTabs/EditorTabs.styled.tsx
index aa014aa639566fb140a8dc5aba1b040c8de07f2e..41d70d3e8f63530289410ea5da385f830b1a2009 100644
--- a/frontend/src/metabase/query_builder/components/DatasetEditor/EditorTabs/EditorTabs.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/DatasetEditor/EditorTabs/EditorTabs.styled.tsx
@@ -1,7 +1,7 @@
import { css } from "@emotion/react";
import styled from "@emotion/styled";
-import { alpha, darken, color } from "metabase/lib/colors";
+import { alpha, darken } from "metabase/lib/colors";
export const TabBar = styled.ul`
display: flex;
@@ -40,7 +40,7 @@ export const Tab = styled.label<{ selected: boolean; disabled?: boolean }>`
align-items: center;
padding: 6px 12px;
- color: ${color("text-white")};
+ color: var(--mb-color-text-white);
font-weight: bold;
border: 2px solid;
diff --git a/frontend/src/metabase/query_builder/components/NativeQueryEditor/NativeQueryEditor.styled.tsx b/frontend/src/metabase/query_builder/components/NativeQueryEditor/NativeQueryEditor.styled.tsx
index a147fe0608ab1a97caf9e90de08d704d2a7ea194..f71c1f21f293bacdbf2e0422a3694f4cb54781aa 100644
--- a/frontend/src/metabase/query_builder/components/NativeQueryEditor/NativeQueryEditor.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/NativeQueryEditor/NativeQueryEditor.styled.tsx
@@ -24,7 +24,7 @@ const getAceEditorStyles = () => css`
.ace_search_field,
.ace_searchbtn,
.ace_button {
- background-color: ${color("white")};
+ background-color: var(--mb-color-bg-white);
border-radius: 5px;
border: 1px solid var(--mb-color-border);
}
diff --git a/frontend/src/metabase/query_builder/components/QueryDownloadPopover/QueryDownloadPopover.styled.tsx b/frontend/src/metabase/query_builder/components/QueryDownloadPopover/QueryDownloadPopover.styled.tsx
index 8c8e8c54146ad47a5c66bf92f6a3d4825506569c..0d14361c2577b8872204312878cb5f74f2fdfbf5 100644
--- a/frontend/src/metabase/query_builder/components/QueryDownloadPopover/QueryDownloadPopover.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/QueryDownloadPopover/QueryDownloadPopover.styled.tsx
@@ -43,7 +43,7 @@ export const DownloadButtonText = styled.div`
font-weight: bold;
${DownloadButtonRoot}:hover & {
- color: ${color("white")};
+ color: var(--mb-color-text-white);
}
`;
@@ -52,6 +52,6 @@ export const DownloadButtonSecondaryText = styled.div`
font-weight: bold;
${DownloadButtonRoot}:hover & {
- color: ${color("white")};
+ color: var(--mb-color-text-white);
}
`;
diff --git a/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorSuggestions/ExpressionEditorSuggestions.styled.tsx b/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorSuggestions/ExpressionEditorSuggestions.styled.tsx
index 9ffbb082b7b38f45e18accad28fb664f85a4a404..44437d48cc3645cdf0e2a1f9f2ed56f13da4d7ad 100644
--- a/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorSuggestions/ExpressionEditorSuggestions.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorSuggestions/ExpressionEditorSuggestions.styled.tsx
@@ -16,7 +16,7 @@ export const SuggestionMatch = styled.span`
`;
const highlighted = css`
- color: ${color("white")};
+ color: var(--mb-color-text-white);
background-color: var(--mb-color-brand);
`;
@@ -27,8 +27,6 @@ export const ExpressionListItem = styled.li<{ isHighlighted: boolean }>`
padding-right: 0.5rem;
cursor: pointer;
height: 2rem;
- display: flex;
- align-items: center;
${props => props.isHighlighted && highlighted}
`;
@@ -50,7 +48,6 @@ export const SuggestionTitle = styled.span`
`;
export const PopoverHoverTarget = styled(BasePopoverHoverTarget)`
- padding: 0;
margin-left: auto;
padding: 0.3125rem 0;
visibility: hidden;
diff --git a/frontend/src/metabase/query_builder/components/expressions/ExtractColumn/ExtractColumn.module.css b/frontend/src/metabase/query_builder/components/expressions/ExtractColumn/ExtractColumn.module.css
index 85d8a6a556e9434a231c3072d2975161109fcba6..7252b05a2b9206d39a2866adfc8d7a0ad7afd442 100644
--- a/frontend/src/metabase/query_builder/components/expressions/ExtractColumn/ExtractColumn.module.css
+++ b/frontend/src/metabase/query_builder/components/expressions/ExtractColumn/ExtractColumn.module.css
@@ -18,7 +18,7 @@
.content,
.example {
- color: var(--color-white);
+ color: var(--mb-color-text-white);
}
}
diff --git a/frontend/src/metabase/query_builder/components/notebook/FieldsPickerIcon.tsx b/frontend/src/metabase/query_builder/components/notebook/FieldsPickerIcon.tsx
index 76557df4f6739aafd7e32ec04f64e5d46c8c2b18..87b14e365476645fab6a6603aa2fae0985557369 100644
--- a/frontend/src/metabase/query_builder/components/notebook/FieldsPickerIcon.tsx
+++ b/frontend/src/metabase/query_builder/components/notebook/FieldsPickerIcon.tsx
@@ -3,13 +3,12 @@ import { t } from "ttag";
import IconButtonWrapper from "metabase/components/IconButtonWrapper";
import Tooltip from "metabase/core/components/Tooltip";
-import { color } from "metabase/lib/colors";
import { Icon } from "metabase/ui";
import { NotebookCell } from "./NotebookCell";
const FieldPickerContentContainer = styled(IconButtonWrapper)`
- color: ${color("white")};
+ color: var(--mb-color-text-white);
padding: ${NotebookCell.CONTAINER_PADDING};
opacity: 0.5;
`;
diff --git a/frontend/src/metabase/query_builder/components/notebook/NotebookCell/NotebookCell.styled.tsx b/frontend/src/metabase/query_builder/components/notebook/NotebookCell/NotebookCell.styled.tsx
index 3925883a4aab8d38c1c543117437dbdf153b4c64..048c21eb5b741099483dcad3d77d28eb84df5f1e 100644
--- a/frontend/src/metabase/query_builder/components/notebook/NotebookCell/NotebookCell.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/notebook/NotebookCell/NotebookCell.styled.tsx
@@ -1,7 +1,7 @@
import { css } from "@emotion/react";
import styled from "@emotion/styled";
-import { alpha } from "metabase/lib/colors";
+import { alpha, color } from "metabase/lib/colors";
export type BorderSide = "top" | "right" | "bottom" | "left";
@@ -26,7 +26,7 @@ export const NotebookCellItemContainer = styled.div<{
display: flex;
align-items: center;
font-weight: bold;
- color: ${props => (props.inactive ? props.color : "white")};
+ color: ${props => (props.inactive ? props.color : color("text-white"))};
border-radius: 6px;
border: 2px solid transparent;
@@ -75,7 +75,10 @@ export const NotebookCellItemContentContainer = styled.div<{
${props =>
!!props.border &&
css`
- border-${props.border}: 1px solid ${alpha("white", 0.25)};
+ border-${props.border}: 1px solid ${alpha(
+ props.theme.fn.themeColor("bg-white"),
+ 0.25,
+ )};
`}
${props =>
diff --git a/frontend/src/metabase/query_builder/components/notebook/NotebookNativePreview/NotebookNativePreview.tsx b/frontend/src/metabase/query_builder/components/notebook/NotebookNativePreview/NotebookNativePreview.tsx
index b0cd55befaa9af89c96c0ac81fbc2eb8d1e6b00e..296c01b6c3d41a4af4b01e5a25e5b1b0ad795e76 100644
--- a/frontend/src/metabase/query_builder/components/notebook/NotebookNativePreview/NotebookNativePreview.tsx
+++ b/frontend/src/metabase/query_builder/components/notebook/NotebookNativePreview/NotebookNativePreview.tsx
@@ -68,7 +68,7 @@ export const NotebookNativePreview = (): JSX.Element => {
data-testid="native-query-preview-sidebar"
w="100%"
h="100%"
- bg={color("white")}
+ bg="bg-white"
display="flex"
style={{ flexDirection: "column" }}
>
diff --git a/frontend/src/metabase/query_builder/components/notebook/steps/DataStep/DataStep.styled.tsx b/frontend/src/metabase/query_builder/components/notebook/steps/DataStep/DataStep.styled.tsx
index 5dfbb098ed46a62968bff0f25d551227762e0e4e..7b6eb3ced7b1a434c7f9066a192aead41a8e5f4b 100644
--- a/frontend/src/metabase/query_builder/components/notebook/steps/DataStep/DataStep.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/notebook/steps/DataStep/DataStep.styled.tsx
@@ -1,12 +1,11 @@
import styled from "@emotion/styled";
import IconButtonWrapper from "metabase/components/IconButtonWrapper";
-import { color } from "metabase/lib/colors";
import { NotebookCell } from "../../NotebookCell";
export const DataStepIconButton = styled(IconButtonWrapper)`
- color: ${color("white")};
+ color: var(--mb-color-text-white);
padding: ${NotebookCell.CONTAINER_PADDING};
opacity: 0.5;
`;
diff --git a/frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/JoinConditionColumnPicker/JoinConditionColumnPicker.tsx b/frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/JoinConditionColumnPicker/JoinConditionColumnPicker.tsx
index a614dfc2c60adc0d18665e91ceeb7193a4ea2809..7cc8b1a72c65e00666b13f1fabb3d1fc9edf0a46 100644
--- a/frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/JoinConditionColumnPicker/JoinConditionColumnPicker.tsx
+++ b/frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/JoinConditionColumnPicker/JoinConditionColumnPicker.tsx
@@ -116,7 +116,7 @@ const JoinColumnTarget = forwardRef(function JoinColumnTarget(
display="block"
size={11}
lh={1}
- color={columnInfo ? "white" : "brand"}
+ color={columnInfo ? "text-white" : "brand"}
align="left"
weight={400}
>
@@ -125,7 +125,7 @@ const JoinColumnTarget = forwardRef(function JoinColumnTarget(
)}
<Text
display="block"
- color={columnInfo ? "white" : "brand"}
+ color={columnInfo ? "text-white" : "brand"}
align="left"
weight={700}
lh={1}
diff --git a/frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/JoinConditionOperatorPicker/JoinConditionOperatorPicker.styled.tsx b/frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/JoinConditionOperatorPicker/JoinConditionOperatorPicker.styled.tsx
index 6f2d89ab2e6498270b86c42a36effada6320ad18..56a4ae292abcbd53c9a055ef6f1a9d7560909728 100644
--- a/frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/JoinConditionOperatorPicker/JoinConditionOperatorPicker.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/JoinConditionOperatorPicker/JoinConditionOperatorPicker.styled.tsx
@@ -5,7 +5,7 @@ import SelectList from "metabase/components/SelectList";
import { color, lighten } from "metabase/lib/colors";
const getCompleteConditionStyle = (theme: Theme, isOpened = false) => css`
- color: ${color("white")};
+ color: var(--mb-color-text-white);
background-color: ${isOpened ? lighten("brand", 0.1) : "transparent"};
&:hover,
diff --git a/frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/JoinConditionRemoveButton/JoinConditionRemoveButton.styled.tsx b/frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/JoinConditionRemoveButton/JoinConditionRemoveButton.styled.tsx
index 55027140d28038f4e2bf7671c8249dfa3962d9cf..a4d09868d1b0c0e971cc2b414f964e8f788a525f 100644
--- a/frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/JoinConditionRemoveButton/JoinConditionRemoveButton.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/JoinConditionRemoveButton/JoinConditionRemoveButton.styled.tsx
@@ -13,10 +13,10 @@ export const RemoveButton = styled.button<RemoveButtonProps>`
width: 44px;
cursor: pointer;
border-radius: 0 8px 8px 0;
- border-left: 1px solid ${alpha(color("white"), 0.25)};
+ border-left: 1px solid ${() => alpha(color("bg-white"), 0.25)};
color: ${props =>
- props.isConditionComplete ? color("white") : color("brand")};
+ props.isConditionComplete ? color("text-white") : color("brand")};
&:hover,
&:focus {
diff --git a/frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/JoinTablePicker/JoinTablePicker.styled.tsx b/frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/JoinTablePicker/JoinTablePicker.styled.tsx
index de3138e294c8f1441b4e905d92ae93cd7630de9b..0ea11a372b5263cf04af18dd672a4506e7a0fcf5 100644
--- a/frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/JoinTablePicker/JoinTablePicker.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/JoinTablePicker/JoinTablePicker.styled.tsx
@@ -1,12 +1,11 @@
import styled from "@emotion/styled";
import IconButtonWrapper from "metabase/components/IconButtonWrapper/IconButtonWrapper";
-import { color } from "metabase/lib/colors";
import { NotebookCell } from "../../../NotebookCell";
export const ColumnPickerButton = styled(IconButtonWrapper)`
padding: ${NotebookCell.CONTAINER_PADDING};
opacity: 0.5;
- color: ${color("white")};
+ color: var(--mb-color-text-white);
`;
diff --git a/frontend/src/metabase/query_builder/components/notebook/steps/SortStep/SortStep.styled.tsx b/frontend/src/metabase/query_builder/components/notebook/steps/SortStep/SortStep.styled.tsx
index fe9898fb87fcf5cc9451ba4aa34238131ce3c7ac..5a9f62abd30fbf8ce481ac697d11128333efca96 100644
--- a/frontend/src/metabase/query_builder/components/notebook/steps/SortStep/SortStep.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/notebook/steps/SortStep/SortStep.styled.tsx
@@ -1,13 +1,11 @@
import styled from "@emotion/styled";
-import { color } from "metabase/lib/colors";
-
export const SortDirectionButton = styled.button`
display: flex;
align-items: center;
gap: 0.5rem;
- color: ${color("white")};
+ color: var(--mb-color-text-white);
font-weight: 700;
cursor: pointer;
`;
diff --git a/frontend/src/metabase/query_builder/components/template_tags/SnippetRow/SnippetRow.styled.tsx b/frontend/src/metabase/query_builder/components/template_tags/SnippetRow/SnippetRow.styled.tsx
index d8855cb142bd2a2ac0c35a952222073cc08f01c9..950ab68f1bf56c6dc240736d8e38a2b533b24fc4 100644
--- a/frontend/src/metabase/query_builder/components/template_tags/SnippetRow/SnippetRow.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/template_tags/SnippetRow/SnippetRow.styled.tsx
@@ -1,7 +1,6 @@
import styled from "@emotion/styled";
import Button from "metabase/core/components/Button";
-import { color } from "metabase/lib/colors";
export const SnippetButton = styled(Button)`
color: var(--mb-color-brand);
@@ -9,7 +8,7 @@ export const SnippetButton = styled(Button)`
margin-top: 0.5rem;
&:hover {
- color: ${color("white")};
+ color: var(--mb-color-text-white);
background-color: var(--mb-color-brand);
}
`;
diff --git a/frontend/src/metabase/query_builder/components/template_tags/TagEditorParamParts/TagEditorParam.styled.tsx b/frontend/src/metabase/query_builder/components/template_tags/TagEditorParamParts/TagEditorParam.styled.tsx
index bd1eb2de54625877b8f512ee44eb68596607d616..d4d7c91b2bdeb2b14f74543d9781128f2d42b08a 100644
--- a/frontend/src/metabase/query_builder/components/template_tags/TagEditorParamParts/TagEditorParam.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/template_tags/TagEditorParamParts/TagEditorParam.styled.tsx
@@ -45,7 +45,7 @@ export const DefaultParameterValueWidget = styled(ParameterValueWidget)`
font-weight: 700;
color: ${color("text-medium")};
border-radius: 0.5rem;
- background-color: ${color("white")};
+ background-color: var(--mb-color-bg-white);
border: 2px solid var(--mb-color-border);
`;
diff --git a/frontend/src/metabase/query_builder/components/view/QuestionDisplayToggle/QuestionDisplayToggle.styled.tsx b/frontend/src/metabase/query_builder/components/view/QuestionDisplayToggle/QuestionDisplayToggle.styled.tsx
index 63fa588dee75ca3ccb89a6bb4043337fb7fdf264..3df96a76e07431eac2e3740a8b1ffd291e86c607 100644
--- a/frontend/src/metabase/query_builder/components/view/QuestionDisplayToggle/QuestionDisplayToggle.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/view/QuestionDisplayToggle/QuestionDisplayToggle.styled.tsx
@@ -23,6 +23,6 @@ export const ToggleIcon = styled.div<ToggleIconProps>`
padding: 4px 8px;
cursor: pointer;
background-color: ${props => (props.active ? color("brand") : "transparent")};
- color: ${props => (props.active ? "white" : "inherit")};
+ color: ${props => (props.active ? "var(--mb-color-text-white)" : "inherit")};
border-radius: 99px;
`;
diff --git a/frontend/src/metabase/query_builder/components/view/View/NotebookContainer/NotebookContainer.tsx b/frontend/src/metabase/query_builder/components/view/View/NotebookContainer/NotebookContainer.tsx
index 2f6f3292729ba8c74683515072f6ad12574952d3..ae9f2a958d97b6c94a8cfe405d7919df4ae62e59 100644
--- a/frontend/src/metabase/query_builder/components/view/View/NotebookContainer/NotebookContainer.tsx
+++ b/frontend/src/metabase/query_builder/components/view/View/NotebookContainer/NotebookContainer.tsx
@@ -4,7 +4,7 @@ import type { ResizeCallbackData, ResizableBoxProps } from "react-resizable";
import { ResizableBox } from "react-resizable";
import { useWindowSize } from "react-use";
-import { color, darken } from "metabase/lib/colors";
+import { darken } from "metabase/lib/colors";
import { useSelector, useDispatch } from "metabase/lib/redux";
import {
setNotebookNativePreviewSidebarWidth,
@@ -98,7 +98,7 @@ export const NotebookContainer = ({
<Flex
pos="absolute"
inset={0}
- bg={color("white")}
+ bg="bg-white"
opacity={isOpen ? 1 : 0}
style={{
transform: transformStyle,
diff --git a/frontend/src/metabase/query_builder/components/view/ViewButton.tsx b/frontend/src/metabase/query_builder/components/view/ViewButton.tsx
index 4d77362e738a29107119bc899928a61856f6eee8..a1d6cf01c02564710be97c5e6d7b860bad06002f 100644
--- a/frontend/src/metabase/query_builder/components/view/ViewButton.tsx
+++ b/frontend/src/metabase/query_builder/components/view/ViewButton.tsx
@@ -14,7 +14,7 @@ const ViewButton = styled(Button)<Props>`
active ? color : alpha(color, 0.2)};
color: ${({ active, color = getDefaultColor() }) =>
- active ? "white" : color};
+ active ? "var(--mb-color-text-white)" : color};
border: none;
transition: background 300ms linear, border 300ms linear;
@@ -23,7 +23,7 @@ const ViewButton = styled(Button)<Props>`
background-color: ${({ active, color = getDefaultColor() }) =>
active ? alpha(color, 0.8) : alpha(color, 0.35)};
color: ${({ active, color = getDefaultColor() }) =>
- active ? "white" : color};
+ active ? "var(--mb-color-text-white)" : color};
}
> .Icon {
diff --git a/frontend/src/metabase/query_builder/components/view/ViewFooter.styled.tsx b/frontend/src/metabase/query_builder/components/view/ViewFooter.styled.tsx
index d3e2cab97317d4024bc1f912ba7c0dce01dd3d33..983cd8d7b1c22bd912f49c66c57a2c857c5944cf 100644
--- a/frontend/src/metabase/query_builder/components/view/ViewFooter.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/view/ViewFooter.styled.tsx
@@ -15,6 +15,6 @@ export const FooterButtonGroup = styled(ButtonGroup)`
align-items: stretch;
${Button.Root} {
- border: 1px solid ${"white"};
+ border: 1px solid var(--mb-color-bg-white);
}
`;
diff --git a/frontend/src/metabase/query_builder/components/view/ViewHeader/ViewHeader.styled.tsx b/frontend/src/metabase/query_builder/components/view/ViewHeader/ViewHeader.styled.tsx
index 549b5c2617466d92eb54cec390013ce9cc8c2b2e..851af984e983f6178a44fa29d555619edafb6626 100644
--- a/frontend/src/metabase/query_builder/components/view/ViewHeader/ViewHeader.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/view/ViewHeader/ViewHeader.styled.tsx
@@ -82,7 +82,7 @@ export const HeaderButton = styled(Button)<{ active: boolean }>`
font-size: 0.875rem;
background-color: ${({ active, color = getDefaultColor() }) =>
active ? color : "transparent"};
- color: ${({ active }) => (active ? "white" : color("text-dark"))};
+ color: ${({ active }) => (active ? color("text-white") : color("text-dark"))};
&:hover {
background-color: ${({ color = getDefaultColor() }) => alpha(color, 0.15)};
color: ${({ color }) => color};
@@ -213,6 +213,6 @@ export const ViewRunButtonWithTooltip = styled(
color: ${color("text-dark")};
&:hover {
- color: ${props => (props.isDirty ? color("white") : color("brand"))};
+ color: ${props => (props.isDirty ? color("text-white") : color("brand"))};
}
`;
diff --git a/frontend/src/metabase/query_builder/components/view/ViewHeader/components/ToggleNativeQueryPreview/ToggleNativeQueryPreview.styled.tsx b/frontend/src/metabase/query_builder/components/view/ViewHeader/components/ToggleNativeQueryPreview/ToggleNativeQueryPreview.styled.tsx
index 02080434273d2f249a31fb32ef3aadf1e57b6aec..9f56618e60ce6b3cf6544580bf695f5549380152 100644
--- a/frontend/src/metabase/query_builder/components/view/ViewHeader/components/ToggleNativeQueryPreview/ToggleNativeQueryPreview.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/view/ViewHeader/components/ToggleNativeQueryPreview/ToggleNativeQueryPreview.styled.tsx
@@ -9,7 +9,7 @@ interface SqlButtonProps {
export const SqlButton = styled(IconButtonWrapper)<SqlButtonProps>`
color: ${({ isSelected }) =>
- isSelected ? color("white") : color("text-dark")};
+ isSelected ? color("text-white") : color("text-dark")};
background-color: ${({ isSelected }) => isSelected && color("brand")};
height: 2rem;
width: 2rem;
diff --git a/frontend/src/metabase/query_builder/components/view/sidebars/ChartTypeSidebar.styled.tsx b/frontend/src/metabase/query_builder/components/view/sidebars/ChartTypeSidebar.styled.tsx
index 55f00cb1369a8f1e8f572b83cae6686024474d5c..e41ad6a7a5397ddd0d48c2497c769ea0f3d781f9 100644
--- a/frontend/src/metabase/query_builder/components/view/sidebars/ChartTypeSidebar.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/view/sidebars/ChartTypeSidebar.styled.tsx
@@ -9,7 +9,7 @@ export interface OptionRootProps {
const getOptionIconColor = ({ isSelected }: OptionIconContainerProps) => {
if (isSelected) {
- return color("white");
+ return color("text-white");
} else {
return color("brand");
}
@@ -56,7 +56,7 @@ export const SettingsButton = styled(Button)`
border: 1px solid var(--mb-color-border);
border-radius: 50px;
- background-color: ${color("white")};
+ background-color: var(--mb-color-bg-white);
opacity: 0;
`;
diff --git a/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/AddAggregationButton/AddAggregationButton.styled.tsx b/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/AddAggregationButton/AddAggregationButton.styled.tsx
index 8fdcbe6b92adeb16825ca901a990421f508616ee..7cb9a7fd211ed7ef15725157e9e7dbf421aca46a 100644
--- a/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/AddAggregationButton/AddAggregationButton.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/AddAggregationButton/AddAggregationButton.styled.tsx
@@ -1,16 +1,15 @@
import styled from "@emotion/styled";
import Button from "metabase/core/components/Button";
-import { color } from "metabase/lib/colors";
export const AddAggregationButtonRoot = styled(Button)`
padding: 0.625rem;
- color: ${color("summarize")};
+ color: var(--mb-color-summarize);
background-color: var(--mb-color-bg-light);
&:hover {
- color: ${color("summarize")};
+ color: var(--mb-color-summarize);
background-color: var(--mb-color-bg-medium);
}
`;
diff --git a/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/AggregationItem/AggregationItem.styled.tsx b/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/AggregationItem/AggregationItem.styled.tsx
index 88acaafd8e258d7cb2b7b9d80121ee1a66ccff83..285e7f59cd7ce9c0e6c0d1665638d83f43c28ae6 100644
--- a/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/AggregationItem/AggregationItem.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/AggregationItem/AggregationItem.styled.tsx
@@ -1,6 +1,6 @@
import styled from "@emotion/styled";
-import { color, alpha } from "metabase/lib/colors";
+import { alpha } from "metabase/lib/colors";
import { Icon } from "metabase/ui";
export const Root = styled.button`
@@ -9,16 +9,16 @@ export const Root = styled.button`
padding: 0.5rem;
font-weight: bold;
border-radius: 6px;
- color: ${color("white")};
- background-color: ${color("summarize")};
+ color: var(--mb-color-text-white);
+ background-color: var(--mb-color-summarize);
transition: background 300ms linear, border 300ms linear;
min-height: 34px;
min-width: 34px;
cursor: pointer;
&:hover {
- background-color: ${alpha("summarize", 0.8)};
- border-color: ${alpha("summarize", 0.8)};
+ background-color: ${() => alpha("summarize", 0.8)};
+ border-color: ${() => alpha("summarize", 0.8)};
}
`;
diff --git a/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/BreakoutColumnList/BreakoutColumnList.styled.tsx b/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/BreakoutColumnList/BreakoutColumnList.styled.tsx
index ba95119c7d62cc771647ceedb7cc12a6621d90c9..d7c4c45199e7fc92bbb104db938ab78e6dd09dd1 100644
--- a/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/BreakoutColumnList/BreakoutColumnList.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/BreakoutColumnList/BreakoutColumnList.styled.tsx
@@ -1,14 +1,12 @@
import styled from "@emotion/styled";
-import { color } from "metabase/lib/colors";
-
export const ColumnGroupName = styled.div`
margin: 1rem 0 0.5rem 0;
text-transform: uppercase;
font-weight: 700;
font-size: 0.75rem;
padding: 0 0.5rem;
- color: ${color("summarize")};
+ color: var(--mb-color-summarize);
`;
export const SearchContainer = styled.div`
diff --git a/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/BreakoutColumnList/BreakoutColumnListItem/BreakoutColumnListItem.styled.tsx b/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/BreakoutColumnList/BreakoutColumnListItem/BreakoutColumnListItem.styled.tsx
index 1a9fa2fc0420993ee03928d00c1eb12e20aff345..9bdc1c808f8b9b89a109add8b31e8a3562ed40ca 100644
--- a/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/BreakoutColumnList/BreakoutColumnListItem/BreakoutColumnListItem.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/BreakoutColumnList/BreakoutColumnListItem/BreakoutColumnListItem.styled.tsx
@@ -1,4 +1,4 @@
-import { css } from "@emotion/react";
+import { css, type Theme } from "@emotion/react";
import styled from "@emotion/styled";
import { BucketPickerPopover } from "metabase/common/components/QueryColumnPicker/BucketPickerPopover";
@@ -26,14 +26,14 @@ export const TitleContainer = styled.div`
`;
export const RemoveButton = styled(Button)`
- color: ${color("white")};
+ color: var(--mb-color-text-white);
background-color: transparent;
opacity: 0.6;
transition: all 100ms;
&:hover {
- color: ${color("white")};
+ color: var(--mb-color-text-white);
background-color: transparent;
opacity: 1;
}
@@ -48,7 +48,7 @@ RemoveButton.defaultProps = {
export const AddButton = styled(Button)`
width: 34px;
margin-left: 0.5rem;
- color: ${color("white")};
+ color: var(--mb-color-text-white);
transition: none;
`;
@@ -69,20 +69,20 @@ export const Title = styled.div`
font-weight: 700;
`;
-const selectedStyle = css`
+const getSelectedStyle = (theme: Theme) => css`
${Content},
${ColumnTypeIcon} {
- background-color: ${color("summarize")};
- color: ${color("white")};
+ background-color: var(--mb-color-summarize);
+ color: var(--mb-color-text-white);
}
${BucketPickerPopover.TriggerButton} {
opacity: 1;
- color: ${alpha("white", 0.65)};
+ color: ${alpha(theme.fn.themeColor("text-white"), 0.65)};
}
${BucketPickerPopover.TriggerButton}:hover {
- color: ${color("white")};
+ color: var(--mb-color-text-white);
opacity: 1;
}
`;
@@ -101,7 +101,7 @@ const unselectedStyle = css`
${Content},
${ColumnTypeIcon},
${AddButton} {
- color: ${color("summarize")};
+ color: var(--mb-color-summarize);
background-color: var(--mb-color-bg-light);
}
@@ -128,5 +128,6 @@ export const Root = styled.li<{ isSelected: boolean }>`
min-height: 34px;
position: relative;
- ${props => (props.isSelected ? selectedStyle : unselectedStyle)}
+ ${props =>
+ props.isSelected ? getSelectedStyle(props.theme) : unselectedStyle}
`;
diff --git a/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/SummarizeSidebar.styled.tsx b/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/SummarizeSidebar.styled.tsx
index eede6d51fe4194dbf06257bd9e001b5e6dfa2ac0..41863d29ea72c92f65e53e7bbf50fe726fbfd529 100644
--- a/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/SummarizeSidebar.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/SummarizeSidebar.styled.tsx
@@ -1,7 +1,6 @@
import styled from "@emotion/styled";
import { AggregationPicker as BaseAggregationPicker } from "metabase/common/components/AggregationPicker";
-import { color } from "metabase/lib/colors";
import SidebarContent from "metabase/query_builder/components/SidebarContent";
export const SidebarView = styled(SidebarContent)`
@@ -30,7 +29,7 @@ export const AggregationsContainer = styled(Section)`
`;
export const AggregationPicker = styled(BaseAggregationPicker)`
- color: ${color("summarize")};
+ color: var(--mb-color-summarize);
`;
export const ColumnListContainer = styled(Section)`
diff --git a/frontend/src/metabase/querying/components/FilterPanel/FilterPanelButton/FilterPanelButton.styled.tsx b/frontend/src/metabase/querying/components/FilterPanel/FilterPanelButton/FilterPanelButton.styled.tsx
index 3f0caff9f321dc1db95facc3f4b9f3cb77c17944..73a97b475163861c3d2f284a5160f91f6dd916f6 100644
--- a/frontend/src/metabase/querying/components/FilterPanel/FilterPanelButton/FilterPanelButton.styled.tsx
+++ b/frontend/src/metabase/querying/components/FilterPanel/FilterPanelButton/FilterPanelButton.styled.tsx
@@ -17,13 +17,14 @@ const shouldForwardProp = (propName: string) => {
export const FilterButton = styled(Button, {
shouldForwardProp,
})<FilterButtonProps>`
- color: ${({ isExpanded }) => (isExpanded ? color("white") : color("filter"))};
+ color: ${({ isExpanded }) =>
+ isExpanded ? color("text-white") : color("filter")};
background-color: ${({ isExpanded }) =>
isExpanded ? alpha("filter", 0.8) : alpha("filter", 0.2)};
transition: border 300ms linear, background 300ms linear;
&:hover {
- color: ${color("white")};
+ color: var(--mb-color-text-white);
background-color: var(--mb-color-filter);
}
diff --git a/frontend/src/metabase/questions/components/QuestionMoveToast/QuestionMoveToast.styled.tsx b/frontend/src/metabase/questions/components/QuestionMoveToast/QuestionMoveToast.styled.tsx
index 3e31053f59018f82cd7fc1a90bb8a39193289546..c9cf2468937084936d5333ba21517545dc72ccab 100644
--- a/frontend/src/metabase/questions/components/QuestionMoveToast/QuestionMoveToast.styled.tsx
+++ b/frontend/src/metabase/questions/components/QuestionMoveToast/QuestionMoveToast.styled.tsx
@@ -1,7 +1,6 @@
import styled from "@emotion/styled";
import Collections from "metabase/entities/collections";
-import { color } from "metabase/lib/colors";
import { space } from "metabase/styled-components/theme";
import { Icon } from "metabase/ui";
@@ -11,7 +10,7 @@ export const ToastRoot = styled.div`
`;
export const StyledIcon = styled(Icon)`
- color: ${color("text-white")};
+ color: var(--mb-color-text-white);
margin-right: ${space(1)};
`;
diff --git a/frontend/src/metabase/search/components/InfoText/InfoTextEditedInfo.styled.tsx b/frontend/src/metabase/search/components/InfoText/InfoTextEditedInfo.styled.tsx
index e33f7f2934e66ce0a7367a39e7c58889db0e8c69..4c4d2d4e545c24313014814e2c7397eaf8466edf 100644
--- a/frontend/src/metabase/search/components/InfoText/InfoTextEditedInfo.styled.tsx
+++ b/frontend/src/metabase/search/components/InfoText/InfoTextEditedInfo.styled.tsx
@@ -2,7 +2,6 @@ import { css } from "@emotion/react";
import styled from "@emotion/styled";
import LastEditInfoLabel from "metabase/components/LastEditInfoLabel";
-import { color } from "metabase/lib/colors";
import { breakpointMaxSmall } from "metabase/styled-components/theme";
export const LastEditedInfoText = styled(LastEditInfoLabel)`
@@ -29,5 +28,5 @@ export const LastEditedInfoText = styled(LastEditInfoLabel)`
`;
export const LastEditedInfoTooltip = styled(LastEditInfoLabel)`
- color: ${color("white")};
+ color: var(--mb-color-text-white);
`;
diff --git a/frontend/src/metabase/search/components/SearchResult/components/ItemIcon.styled.tsx b/frontend/src/metabase/search/components/SearchResult/components/ItemIcon.styled.tsx
index 8035384551099759cde839ca87078351be1e0438..c814bfb6ab13e42e61edf4ce074058df4f57b6e8 100644
--- a/frontend/src/metabase/search/components/SearchResult/components/ItemIcon.styled.tsx
+++ b/frontend/src/metabase/search/components/SearchResult/components/ItemIcon.styled.tsx
@@ -32,5 +32,5 @@ export const IconWrapper = styled.div<{
color: ${({ active, archived, type }) =>
getColorForIconWrapper(active, archived, type)};
flex-shrink: 0;
- background: ${color("white")};
+ background: var(--mb-color-bg-white);
`;
diff --git a/frontend/src/metabase/setup/components/ActiveStep/ActiveStep.styled.tsx b/frontend/src/metabase/setup/components/ActiveStep/ActiveStep.styled.tsx
index 74878d66eeb3f83951d2a561e5c1338122b3e9bd..2efaba935eae0b1db7237d47e2ea418a6a99afea 100644
--- a/frontend/src/metabase/setup/components/ActiveStep/ActiveStep.styled.tsx
+++ b/frontend/src/metabase/setup/components/ActiveStep/ActiveStep.styled.tsx
@@ -9,7 +9,7 @@ export const StepRoot = styled.section`
margin-bottom: 1.75rem;
border: 1px solid var(--mb-color-border);
border-radius: 0.5rem;
- background-color: ${color("white")};
+ background-color: var(--mb-color-bg-white);
${breakpointMinSmall} {
padding: 4rem;
@@ -35,7 +35,7 @@ export const StepLabel = styled.div`
height: 2.625rem;
border: 1px solid var(--mb-color-border);
border-radius: 50%;
- background-color: ${color("white")};
+ background-color: var(--mb-color-bg-white);
`;
export const StepLabelText = styled.span`
diff --git a/frontend/src/metabase/setup/components/CompletedStep/CompletedStep.styled.tsx b/frontend/src/metabase/setup/components/CompletedStep/CompletedStep.styled.tsx
index 7161d96523d4abf05a80a6e129a4e666b426902c..e64e9f5c5f4be4b0643767d8ff70ce34dd96132c 100644
--- a/frontend/src/metabase/setup/components/CompletedStep/CompletedStep.styled.tsx
+++ b/frontend/src/metabase/setup/components/CompletedStep/CompletedStep.styled.tsx
@@ -10,7 +10,7 @@ export const StepRoot = styled.section`
margin-bottom: 1.75rem;
border: 1px solid var(--mb-color-border);
border-radius: 0.5rem;
- background-color: ${color("white")};
+ background-color: var(--mb-color-bg-white);
`;
export const StepTitle = styled.div`
diff --git a/frontend/src/metabase/setup/components/InactiveStep/InactiveStep.styled.tsx b/frontend/src/metabase/setup/components/InactiveStep/InactiveStep.styled.tsx
index 2961085f2a723f4409283d78c3852d48102d0231..4ac14863899e1dddf6e4769eea3f827612676c07 100644
--- a/frontend/src/metabase/setup/components/InactiveStep/InactiveStep.styled.tsx
+++ b/frontend/src/metabase/setup/components/InactiveStep/InactiveStep.styled.tsx
@@ -14,12 +14,11 @@ export const StepRoot = styled.section<Props>`
padding: 1rem 2rem;
margin-bottom: 1.75rem;
background-color: ${props =>
- props.isCompleted ? color("white") : "var(--mb-color-bg-medium)"};
+ color(props.isCompleted ? "bg-white" : "bg-medium")};
`;
export const StepTitle = styled.div<Props>`
- color: ${props =>
- props.isCompleted ? color("success") : "var(--mb-color-brand)"};
+ color: ${props => (props.isCompleted ? color("success") : color("brand"))};
font-size: 1rem;
font-weight: 700;
margin: 0.5rem 0;
@@ -36,11 +35,10 @@ export const StepLabel = styled.div<Props>`
width: 2.625rem;
height: 2.625rem;
border: 1px solid
- ${props =>
- props.isCompleted ? color("success") : "var(--mb-color-border)"};
+ ${props => (props.isCompleted ? color("success") : color("border"))};
border-radius: 50%;
background-color: ${props =>
- props.isCompleted ? color("success") : color("white")};
+ props.isCompleted ? color("success") : color("bg-white")};
`;
export const StepLabelText = styled.span`
@@ -52,5 +50,5 @@ export const StepLabelText = styled.span`
export const StepLabelIcon = styled(Icon)`
width: 1rem;
height: 1rem;
- color: ${color("white")};
+ color: var(--mb-color-text-white);
`;
diff --git a/frontend/src/metabase/setup/components/LanguageStep/LanguageStep.styled.tsx b/frontend/src/metabase/setup/components/LanguageStep/LanguageStep.styled.tsx
index 76474802484f1deeecf18b1ca32bbee8fe87c470..34bb55d5aab84f5f85391e1717531e1335a0d0c6 100644
--- a/frontend/src/metabase/setup/components/LanguageStep/LanguageStep.styled.tsx
+++ b/frontend/src/metabase/setup/components/LanguageStep/LanguageStep.styled.tsx
@@ -34,14 +34,14 @@ export interface LocaleContainerProps {
export const LocaleButton = styled.span<LocaleContainerProps>`
display: block;
padding: 0.5rem;
- color: ${props => color(props.checked ? "white" : "text-dark")};
+ color: ${props => color(props.checked ? "text-white" : "text-dark")};
border-radius: 0.25rem;
background-color: ${props =>
- props.checked ? "var(--mb-color-brand)" : color("white")};
+ props.checked ? color("brand") : color("bg-white")};
font-weight: 700;
&:hover {
- color: ${color("white")};
+ color: var(--mb-color-text-white);
background-color: var(--mb-color-brand);
}
diff --git a/frontend/src/metabase/setup/components/NewsletterForm/NewsletterForm.styled.tsx b/frontend/src/metabase/setup/components/NewsletterForm/NewsletterForm.styled.tsx
index ff6697c94510493dc49cebe137ace1a2cfb41f00..df071c14de6bea451dbf31e33cfca087d487b71a 100644
--- a/frontend/src/metabase/setup/components/NewsletterForm/NewsletterForm.styled.tsx
+++ b/frontend/src/metabase/setup/components/NewsletterForm/NewsletterForm.styled.tsx
@@ -26,7 +26,7 @@ export const EmailFormLabelCard = styled.div`
display: flex;
padding: 0 1.5rem;
color: ${color("text-medium")};
- background-color: ${color("white")};
+ background-color: var(--mb-color-bg-white);
`;
export const EmailFormLabelIcon = styled(Icon)`
@@ -66,14 +66,14 @@ export const EmailFormSuccessContainer = styled.div`
`;
export const EmailFormSuccessIcon = styled(Icon)`
- color: ${color("success")};
+ color: var(--mb-color-success);
width: 1rem;
height: 1rem;
margin-right: 1rem;
`;
export const EmailFormSuccessText = styled.div`
- color: ${color("success")};
+ color: var(--mb-color-success);
font-size: 1rem;
font-weight: bold;
`;
diff --git a/frontend/src/metabase/sharing/components/NewPulseSidebar.styled.tsx b/frontend/src/metabase/sharing/components/NewPulseSidebar.styled.tsx
index bcaf07182029e42159cb5c5e6525b889bacb337e..928d378e08b29ae3897f9ec57fb2455dde7c6c9d 100644
--- a/frontend/src/metabase/sharing/components/NewPulseSidebar.styled.tsx
+++ b/frontend/src/metabase/sharing/components/NewPulseSidebar.styled.tsx
@@ -2,7 +2,6 @@ import { css } from "@emotion/react";
import styled from "@emotion/styled";
import Card from "metabase/components/Card";
-import { color } from "metabase/lib/colors";
export interface SlackCardProps {
isConfigured: boolean;
@@ -15,7 +14,7 @@ export const ChannelCard = styled(Card)<SlackCardProps>`
cursor: pointer;
&:hover {
- color: ${color("white")};
+ color: var(--mb-color-text-white);
background-color: var(--mb-color-brand);
}
`}
diff --git a/frontend/src/metabase/static-viz/components/ProgressBar/ProgressBar.tsx b/frontend/src/metabase/static-viz/components/ProgressBar/ProgressBar.tsx
index c803068a3a08c969175437fe13e0d6b6aeccd048..29fe056fff7de3258a3512034cd73218561da97f 100644
--- a/frontend/src/metabase/static-viz/components/ProgressBar/ProgressBar.tsx
+++ b/frontend/src/metabase/static-viz/components/ProgressBar/ProgressBar.tsx
@@ -105,18 +105,18 @@ const ProgressBar = ({
<>
<CheckMarkIcon
size={layout.iconSize}
- color="white"
+ color="var(--mb-color-text-white)"
x={10}
y={(layout.barHeight - layout.iconSize) / 2}
/>
<Text
fontSize={layout.fontSize}
textAnchor="start"
- color="white"
+ color="var(--mb-color-text-white)"
x={layout.iconSize + 16}
y={layout.barHeight / 2}
verticalAnchor="middle"
- fill="white"
+ fill="var(--mb-color-text-white)"
>
{barText}
</Text>
diff --git a/frontend/src/metabase/status/components/StatusLarge/StatusLarge.styled.tsx b/frontend/src/metabase/status/components/StatusLarge/StatusLarge.styled.tsx
index 4890f8fa06eb8bc52203d1939952816f8f77aa5d..76b711cbb04200ffe30dad5aadce2724fcdb4d81 100644
--- a/frontend/src/metabase/status/components/StatusLarge/StatusLarge.styled.tsx
+++ b/frontend/src/metabase/status/components/StatusLarge/StatusLarge.styled.tsx
@@ -7,7 +7,7 @@ import { color } from "metabase/lib/colors";
export const StatusRoot = styled.div`
width: 16rem;
border-radius: 6px;
- background-color: ${color("white")};
+ background-color: var(--mb-color-bg-white);
box-shadow: 0 1px 12px var(--mb-color-shadow);
overflow: hidden;
margin-top: 1rem;
@@ -31,11 +31,11 @@ export const StatusTitle = styled.div`
export const StatusToggle = styled(IconButtonWrapper)`
flex: 0 0 auto;
- color: ${color("white")};
+ color: var(--mb-color-text-white);
`;
export const StatusBody = styled.div`
- background-color: ${color("white")};
+ background-color: var(--mb-color-bg-white);
`;
export const StatusCardRoot = styled.div<{ hasBody?: boolean }>`
@@ -97,6 +97,7 @@ export const StatusCardIconContainer = styled.div<StatusCardIconContainerProps>`
width: 1.5rem;
height: 1.5rem;
border-radius: 1rem;
- color: ${color("white")};
- background-color: ${props => color(props.isError ? "error" : "success")};
+ color: var(--mb-color-text-white);
+ background-color: ${props =>
+ props.isError ? color("error") : color("success")};
`;
diff --git a/frontend/src/metabase/status/components/StatusSmall/StatusSmall.styled.tsx b/frontend/src/metabase/status/components/StatusSmall/StatusSmall.styled.tsx
index 2bacc7a6081f75c7df7087af8d7ba143f8d3a3bd..aecec0b50abf5cc3bf03edd135014519923130e3 100644
--- a/frontend/src/metabase/status/components/StatusSmall/StatusSmall.styled.tsx
+++ b/frontend/src/metabase/status/components/StatusSmall/StatusSmall.styled.tsx
@@ -14,7 +14,7 @@ const getIconColor = ({ status }: Props): string => {
case "incomplete":
return color("brand");
default:
- return color("white");
+ return color("text-white");
}
};
diff --git a/frontend/src/metabase/styled-components/containers/GlobalStyles/GlobalStyles.tsx b/frontend/src/metabase/styled-components/containers/GlobalStyles/GlobalStyles.tsx
index 3f945e92606787be09238448518eb6ee37f908e1..52822b9e404b33fe5c77396b74e7bdedd795ff27 100644
--- a/frontend/src/metabase/styled-components/containers/GlobalStyles/GlobalStyles.tsx
+++ b/frontend/src/metabase/styled-components/containers/GlobalStyles/GlobalStyles.tsx
@@ -36,6 +36,10 @@ export const GlobalStyles = (): JSX.Element => {
--mb-color-error: ${color("error")};
--mb-color-filter: ${color("filter")};
--mb-color-shadow: ${color("shadow")};
+ --mb-color-success: ${color("success")};
+ --mb-color-summarize: ${color("summarize")};
+ --mb-color-text-white: ${color("text-white")};
+ --mb-color-warning: ${color("warning")};
/*
Theming-specific CSS variables.
diff --git a/frontend/src/metabase/timelines/collections/components/TimelineEmptyState/TimelineEmptyState.styled.tsx b/frontend/src/metabase/timelines/collections/components/TimelineEmptyState/TimelineEmptyState.styled.tsx
index e9f66cd116418ac1367586a06150b7564ddc111b..d56a516d35dda483d8d27d631c9cda149fcd917d 100644
--- a/frontend/src/metabase/timelines/collections/components/TimelineEmptyState/TimelineEmptyState.styled.tsx
+++ b/frontend/src/metabase/timelines/collections/components/TimelineEmptyState/TimelineEmptyState.styled.tsx
@@ -34,7 +34,7 @@ export const EmptyStateTooltip = styled.div`
export const EmptyStateTooltipIcon = styled(Icon)`
flex: 0 0 auto;
- color: ${color("white")};
+ color: var(--mb-color-text-white);
width: 1rem;
height: 1rem;
`;
@@ -45,14 +45,14 @@ export const EmptyStateTooltipBody = styled.div`
`;
export const EmptyStateTooltipTitle = styled.div`
- color: ${color("white")};
+ color: var(--mb-color-text-white);
font-weight: bold;
margin-bottom: 0.25rem;
`;
export const EmptyStateTooltipDate = styled(DateTime)`
display: block;
- color: ${color("white")};
+ color: var(--mb-color-text-white);
`;
export const EmptyStateThread = styled.div`
@@ -69,7 +69,7 @@ export const EmptyStateThreadLine = styled.div`
`;
export const EmptyStateThreadIcon = styled(Icon)`
- color: ${color("white")};
+ color: var(--mb-color-text-white);
width: 1rem;
height: 1rem;
`;
diff --git a/frontend/src/metabase/timelines/common/components/TimelinePicker/TimelinePicker.styled.tsx b/frontend/src/metabase/timelines/common/components/TimelinePicker/TimelinePicker.styled.tsx
index c6b9d386348eace843b486868148e012323a41a8..8152b6198072a9eb8bfc9bc885317f66393b9d68 100644
--- a/frontend/src/metabase/timelines/common/components/TimelinePicker/TimelinePicker.styled.tsx
+++ b/frontend/src/metabase/timelines/common/components/TimelinePicker/TimelinePicker.styled.tsx
@@ -59,7 +59,7 @@ const selectedStyles = css`
background-color: var(--mb-color-brand);
${CardTitle}, ${CardDescription}, ${CardAside} {
- color: ${color("white")};
+ color: var(--mb-color-text-white);
}
${CardIcon} {
@@ -67,8 +67,8 @@ const selectedStyles = css`
}
${CardIconContainer} {
- border-color: ${color("white")};
- background-color: ${color("white")};
+ border-color: var(--mb-color-bg-white);
+ background-color: var(--mb-color-bg-white);
}
`;
diff --git a/frontend/src/metabase/ui/components/navigation/NavLink/NavLink.styled.tsx b/frontend/src/metabase/ui/components/navigation/NavLink/NavLink.styled.tsx
index 84259e0f2049c40165b65e12ec9ea9b8e4e6fcc2..e8c193b4ab4a061271d08f05da54f39aef9d8345 100644
--- a/frontend/src/metabase/ui/components/navigation/NavLink/NavLink.styled.tsx
+++ b/frontend/src/metabase/ui/components/navigation/NavLink/NavLink.styled.tsx
@@ -26,14 +26,14 @@ export const getNavLinkOverrides = (): MantineThemeOverride["components"] => ({
},
backgroundColor: theme.fn.themeColor("brand"),
- color: "white",
+ color: theme.fn.themeColor("text-white"),
"& .emotion-NavLink-label": {
- color: "white",
+ color: theme.fn.themeColor("text-white"),
},
"& .emotion-NavLink-icon": {
- color: "white",
+ color: theme.fn.themeColor("text-white"),
},
},
},
diff --git a/frontend/src/metabase/ui/utils/colors.ts b/frontend/src/metabase/ui/utils/colors.ts
index 3785266f60a78c753c010310ee55aebbebccb6c5..8cf04f5896ce61d038229a416ad2677a4eb8a420 100644
--- a/frontend/src/metabase/ui/utils/colors.ts
+++ b/frontend/src/metabase/ui/utils/colors.ts
@@ -43,6 +43,7 @@ const CUSTOM_COLORS = [
"text-light",
"text-medium",
"text-white",
+ "warning",
"white",
];
diff --git a/frontend/src/metabase/visualizations/components/ChartTooltip/TimelineEventTooltip.styled.tsx b/frontend/src/metabase/visualizations/components/ChartTooltip/TimelineEventTooltip.styled.tsx
index 8cba5afe331ec140a9d8bf79eaaa3d24a02b9629..1e49ea01ff4b68a259f20b3424463f042285c1c2 100644
--- a/frontend/src/metabase/visualizations/components/ChartTooltip/TimelineEventTooltip.styled.tsx
+++ b/frontend/src/metabase/visualizations/components/ChartTooltip/TimelineEventTooltip.styled.tsx
@@ -1,7 +1,6 @@
import styled from "@emotion/styled";
import DateTime from "metabase/components/DateTime";
-import { darken } from "metabase/lib/colors";
export const TimelineEventList = styled.ul`
max-width: 300px;
@@ -34,7 +33,7 @@ export const TimelineEventName = styled.span`
`;
export const TimelineEventDate = styled(DateTime)`
- color: ${darken("white", 0.02)};
+ color: var(--mb-color-text-white);
font-size: 0.75rem;
margin-top: 0.0625rem;
`;
diff --git a/frontend/src/metabase/visualizations/components/ClickActions/ClickActionControl.module.css b/frontend/src/metabase/visualizations/components/ClickActions/ClickActionControl.module.css
index 8f4c7aa30fb34a8c5bdf45e60a5f665937ebc16c..cb53bc97dd7fc15a72112bfe7b42b01943fe9012 100644
--- a/frontend/src/metabase/visualizations/components/ClickActions/ClickActionControl.module.css
+++ b/frontend/src/metabase/visualizations/components/ClickActions/ClickActionControl.module.css
@@ -13,11 +13,11 @@ button.horizontalButton {
color: var(--mb-color-text-dark);
&:hover {
- color: var(--color-white);
+ color: var(--mb-color-text-white);
background-color: var(--mb-color-brand);
.nested {
- color: var(--color-white);
+ color: var(--mb-color-text-white);
}
}
diff --git a/frontend/src/metabase/visualizations/components/ClickActions/ClickActionControl.styled.tsx b/frontend/src/metabase/visualizations/components/ClickActions/ClickActionControl.styled.tsx
index 9e0613f98b0f9ed311b48092317b99f8fd92cbc5..539d8925cc968e47f920c81110c24ce4f65e2e9a 100644
--- a/frontend/src/metabase/visualizations/components/ClickActions/ClickActionControl.styled.tsx
+++ b/frontend/src/metabase/visualizations/components/ClickActions/ClickActionControl.styled.tsx
@@ -35,7 +35,7 @@ export const TokenFilterActionButton = styled(Button)`
border-radius: 100px;
&:hover {
- color: ${({ theme }) => theme.fn.themeColor("white")};
+ color: var(--mb-color-text-white);
background-color: var(--mb-color-brand);
border-color: var(--mb-color-brand);
}
@@ -50,7 +50,7 @@ export const TokenActionButton = styled(Button)`
border-radius: 100px;
&:hover {
- color: ${({ theme }) => theme.fn.themeColor("white")};
+ color: var(--mb-color-text-white);
background-color: var(--mb-color-brand);
border-color: var(--mb-color-brand);
}
@@ -67,7 +67,7 @@ export const SortControl = styled(Button)`
border-radius: 100px;
&:hover {
- color: ${({ theme }) => theme.fn.themeColor("white")};
+ color: var(--mb-color-text-white);
background-color: var(--mb-color-brand);
border-color: var(--mb-color-brand);
}
diff --git a/frontend/src/metabase/visualizations/components/TableInteractive/TableInteractive.styled.tsx b/frontend/src/metabase/visualizations/components/TableInteractive/TableInteractive.styled.tsx
index c579877201f2ef977f1ef53773e7cf18f48402fe..1fd58f4f600d6a4426c97487ea0ce8522fd53d37 100644
--- a/frontend/src/metabase/visualizations/components/TableInteractive/TableInteractive.styled.tsx
+++ b/frontend/src/metabase/visualizations/components/TableInteractive/TableInteractive.styled.tsx
@@ -62,7 +62,7 @@ export const ExpandButton = styled(Button)`
margin-left: auto;
&:hover {
- color: ${({ theme }) => theme.fn?.themeColor("text-white")};
+ color: var(--mb-color-text-white);
background-color: var(--mb-color-brand);
}
`;
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.styled.tsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.styled.tsx
index 22ceb0c0bd8f0160342ce181cebb222ee7c54f0d..eca98882c38de3c11c431e34ede8bfbc1d15efda 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.styled.tsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.styled.tsx
@@ -19,7 +19,7 @@ export const ChartSettingFieldPickerRoot = styled.div<ChartSettingFieldPickerRoo
border-radius: 0.5rem;
padding-right: 1rem;
padding-left: 0.5rem;
- background: ${color("white")};
+ background: var(--mb-color-bg-white);
${Triggerable.Trigger} {
flex: 1;
@@ -51,7 +51,7 @@ export const ChartSettingFieldPickerRoot = styled.div<ChartSettingFieldPickerRoo
}
${SelectButton.Root}:disabled {
- background-color: ${color("white")};
+ background-color: var(--mb-color-bg-white);
}
`;
diff --git a/frontend/src/metabase/visualizations/components/settings/ColumnItem/ColumnItem.styled.tsx b/frontend/src/metabase/visualizations/components/settings/ColumnItem/ColumnItem.styled.tsx
index 056ed2fb31df123217b6189a44d07b7cf60e09e7..251d752aeca49ce8d400ec1185ac6f6740ef83a0 100644
--- a/frontend/src/metabase/visualizations/components/settings/ColumnItem/ColumnItem.styled.tsx
+++ b/frontend/src/metabase/visualizations/components/settings/ColumnItem/ColumnItem.styled.tsx
@@ -17,7 +17,7 @@ export const ColumnItemRoot = styled.div<ColumnItemRootProps>`
align-items: center;
border: 1px solid var(--mb-color-border);
border-radius: 0.5rem;
- background: ${color("white")};
+ background: var(--mb-color-bg-white);
&.dragging {
cursor: grabbing;
diff --git a/frontend/src/metabase/visualizations/components/skeletons/StaticSkeleton/StaticSkeleton.styled.tsx b/frontend/src/metabase/visualizations/components/skeletons/StaticSkeleton/StaticSkeleton.styled.tsx
index 967ade644b8035d7382d86d62375eae1fa51a7d7..3503665a246739622305ae053afba10f4fe56b13 100644
--- a/frontend/src/metabase/visualizations/components/skeletons/StaticSkeleton/StaticSkeleton.styled.tsx
+++ b/frontend/src/metabase/visualizations/components/skeletons/StaticSkeleton/StaticSkeleton.styled.tsx
@@ -54,5 +54,5 @@ export const SkeletonTooltipIconContainer = styled.div`
bottom: -0.5rem;
padding: 0.125rem;
border-radius: 0.5rem;
- background-color: ${color("white")};
+ background-color: var(--mb-color-bg-white);
`;
diff --git a/frontend/src/metabase/visualizations/echarts/cartesian/option/series.ts b/frontend/src/metabase/visualizations/echarts/cartesian/option/series.ts
index 44946699cf192fde30a00dac5b1de727e6696f4e..0161a493633d3b451576d486f5505171821a93f0 100644
--- a/frontend/src/metabase/visualizations/echarts/cartesian/option/series.ts
+++ b/frontend/src/metabase/visualizations/echarts/cartesian/option/series.ts
@@ -275,7 +275,7 @@ export const buildEChartsLabelOptions = (
fontWeight: CHART_STYLE.seriesLabels.weight,
fontSize,
color: renderingContext.getColor("text-dark"),
- textBorderColor: renderingContext.getColor("white"),
+ textBorderColor: renderingContext.getColor("bg-white"),
textBorderWidth: 3,
formatter:
formatter &&
@@ -407,7 +407,7 @@ function getDataLabelSeriesOption(
fontWeight: CHART_STYLE.seriesLabels.weight,
fontSize: CHART_STYLE.seriesLabels.size,
color: renderingContext.getColor("text-dark"),
- textBorderColor: renderingContext.getColor("white"),
+ textBorderColor: renderingContext.getColor("bg-white"),
textBorderWidth: 3,
},
labelLayout: {
diff --git a/frontend/src/metabase/visualizations/echarts/cartesian/scatter/option/series.ts b/frontend/src/metabase/visualizations/echarts/cartesian/scatter/option/series.ts
index 2cdb59cfb6ebcdac0ffad8ce06dca28691136e6e..a728beb6b04aa2f868ed91a7e5cce8b584e63d19 100644
--- a/frontend/src/metabase/visualizations/echarts/cartesian/scatter/option/series.ts
+++ b/frontend/src/metabase/visualizations/echarts/cartesian/scatter/option/series.ts
@@ -69,7 +69,7 @@ export function buildEChartsScatterSeries(
itemStyle: {
color: seriesModel.color,
opacity: CHART_STYLE.opacity.scatter,
- borderColor: renderingContext.getColor("white"),
+ borderColor: renderingContext.getColor("bg-white"),
borderWidth: 1,
},
emphasis: {
diff --git a/frontend/src/metabase/visualizations/visualizations/Gauge/Gauge.jsx b/frontend/src/metabase/visualizations/visualizations/Gauge/Gauge.jsx
index c211770839dfae39429825d12e69087eb6e67c3c..b6fed3496678b68611c9228a5f30a9f735a6636b 100644
--- a/frontend/src/metabase/visualizations/visualizations/Gauge/Gauge.jsx
+++ b/frontend/src/metabase/visualizations/visualizations/Gauge/Gauge.jsx
@@ -38,7 +38,7 @@ const getBackgroundArcColor = () => color("bg-medium");
const getSegmentLabelColor = () => color("text-dark");
const getCenterLabelColor = () => color("text-dark");
const getArrowFillColor = () => color("text-medium");
-const getArrowStrokeColor = () => "white";
+const getArrowStrokeColor = () => color("bg-white");
// in ems, but within the scaled 100px SVG element
const FONT_SIZE_SEGMENT_LABEL = 0.25;
diff --git a/frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.styled.tsx b/frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.styled.tsx
index 2135166f1782d59d5c830dbfaa6be7c334d80d10..2f578ffa57c877c799f51f852fe7a540f343eb76 100644
--- a/frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.styled.tsx
+++ b/frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.styled.tsx
@@ -73,7 +73,7 @@ const getCellBackgroundColor = ({
return alpha("bg-black", 0.1);
}
- return color(backgroundColor ?? "white");
+ return color(backgroundColor ?? "bg-white");
};
const getCellHoverBackground = (
@@ -95,7 +95,7 @@ const getColor = ({
isNightMode,
}: PivotTableCellProps & { theme: MantineTheme }) => {
if (isNightMode) {
- return color("white");
+ return color("text-white");
}
return color(theme.other.table.cell.textColor);