From 7046fef3c4d71d8e17f090b6f0af4a40eb5f6190 Mon Sep 17 00:00:00 2001
From: Denis Berezin <denis.berezin@metabase.com>
Date: Mon, 10 Jun 2024 16:34:51 +0300
Subject: [PATCH] feat(sdk): SDK theming part 5 - success, summarize, warning,
white, text-white, bg-white (#43676)
* Migrate success
* Migrate summarize
* Migrate warning
* Migrate white
* Add colors to storybook
* Fix CI
* Fix CI
* Codereview fixes
* Convert warning color
---
.storybook/preview-head.html | 17 ++++++++----
.../components/private/SdkContentWrapper.tsx | 4 +++
.../lib/theme/default-component-theme.ts | 4 +--
.../components/InvalidateNowButton.tsx | 2 +-
.../StrategyFormLauncher.styled.tsx | 2 +-
.../SettingsCloudStoreLink.styled.tsx | 4 +--
.../BillingInfo/BillingInfo.styled.tsx | 3 +--
.../ImageUpload/ImageUpload.styled.tsx | 2 +-
.../AccountHeader/AccountHeader.styled.tsx | 2 +-
.../LoginHistory/LoginHistory.styled.tsx | 3 +--
.../NotificationCard.styled.tsx | 2 +-
.../ActionViz/ActionForm.styled.tsx | 3 +--
.../ActionCreator/ActionCreator.styled.tsx | 3 +--
.../ActionCreatorHeader.styled.tsx | 2 +-
.../FormCreator/FormCreator.styled.tsx | 8 +++---
.../ActionPicker/ActionOptionItem.styled.tsx | 4 +--
.../DimensionList/DimensionList.styled.tsx | 2 +-
.../GuiQueryEditor/GuiQueryEditor.module.css | 2 +-
.../components/ObjectActionSelect.styled.tsx | 2 +-
.../CurrentPicker/CurrentPicker.styled.tsx | 4 +--
.../DatePicker/RelativeDatePicker.styled.tsx | 2 +-
.../filters/pickers/SelectPicker.styled.tsx | 4 +--
.../revisions/RevisionDiff.styled.tsx | 3 +--
.../MetadataBackButton.styled.tsx | 4 +--
.../MetadataTableColumn.styled.tsx | 3 +--
.../components/GroupsListing.styled.tsx | 6 ++---
.../MembershipSelect.styled.tsx | 6 ++---
.../people/components/NudgeToPro.styled.tsx | 3 +--
.../StrategyEditorForDatabases.styled.tsx | 4 +--
.../performance/components/StrategyForm.tsx | 3 +--
.../FilterableTree/FilterableTree.styled.tsx | 3 ++-
.../PermissionHelpDescription.styled.tsx | 2 +-
.../PermissionsSelect.styled.tsx | 2 +-
.../PermissionsSelectOption.styled.tsx | 2 +-
.../PermissionsTable.styled.tsx | 7 ++---
.../SettingsEditor/SettingsEditor.styled.tsx | 4 +--
.../VersionUpdateNotice.styled.tsx | 6 ++---
.../EmbeddingOption.styled.tsx | 3 +--
.../HostingInfoLink.styled.tsx | 3 +--
.../CronExpressionInput.styled.tsx | 2 +-
.../SlackAppsLink/SlackAppsLink.styled.tsx | 3 +--
.../tasks/components/Logs/Logs.styled.tsx | 2 +-
.../upsells/components/Upsells.styled.tsx | 7 +++--
.../ArchivedEntityBanner.tsx | 4 +--
.../ArchivedEntityBanner/BannerButton.tsx | 4 +--
.../AuthButton/AuthButton.styled.tsx | 2 +-
.../AuthLayout/AuthLayout.styled.tsx | 4 +--
.../PinnedQuestionCard.styled.tsx | 2 +-
.../ResultItem/ResultItem.styled.tsx | 4 +--
.../components/ResultItem/ResultItem.tsx | 4 +--
.../common/components/EntityPicker/utils.ts | 2 +-
.../BaseBucketPickerPopover.styled.tsx | 6 ++---
.../BulkActionBar/BulkActionBar.styled.tsx | 25 +++++++++---------
.../BulkActionBar/BulkActionBar.tsx | 2 +-
.../components/Calendar/Calendar.styled.tsx | 2 +-
.../src/metabase/components/Card/Card.tsx | 3 ++-
.../CollectionItem/CollectionItem.styled.tsx | 2 +-
.../components/CopyButton/CopyButton.tsx | 2 +-
.../CopyTextInput/CopyTextInput.styled.tsx | 3 +--
.../CopyWidget/CopyWidget.styled.tsx | 3 +--
.../DateMonthYearWidget.styled.tsx | 4 +--
.../DateQuarterYearWidget.styled.tsx | 6 ++---
.../components/EditBar/EditBar.styled.tsx | 13 +++++-----
.../components/HelpCard/HelpCard.styled.tsx | 2 +-
.../ItemsTable/BaseItemsTable.styled.tsx | 2 +-
.../MetadataInfo/MetadataInfo.styled.tsx | 2 +-
.../ModalContent/ModalContent.stories.tsx | 2 +-
.../SelectList/SelectListItem.styled.tsx | 2 +-
.../SingleSelectListField.styled.tsx | 4 +--
.../components/Toaster/Toaster.styled.tsx | 10 +++----
.../TokenField/TokenField.styled.tsx | 2 +-
.../UserAvatar/UserAvatar.styled.tsx | 6 ++---
.../UserPicker/UserPicker.styled.tsx | 3 +--
.../components/icons/CountdownIcon.styled.tsx | 4 +--
.../components/tree/TreeNode.styled.tsx | 2 +-
.../src/metabase/containers/UndoListing.jsx | 2 +-
.../containers/UndoListing.styled.tsx | 6 ++---
.../containers/Unsubscribe.styled.tsx | 2 +-
.../core/components/Button/Button.styled.tsx | 6 ++---
.../ColorPicker/ColorPicker.styled.tsx | 4 +--
.../components/Markdown/Markdown.styled.tsx | 3 ++-
.../core/components/Radio/Radio.styled.tsx | 4 ++-
.../SelectButton/SelectButton.styled.tsx | 2 +-
.../core/components/Slider/Slider.styled.tsx | 6 ++---
.../core/components/TabRow/TabRow.styled.tsx | 7 +++--
.../core/components/Toggle/Toggle.styled.tsx | 2 +-
.../css/components/buttons.module.css | 26 +++++++++----------
.../src/metabase/css/core/bordered.module.css | 2 +-
.../src/metabase/css/core/colors.module.css | 10 +++----
.../src/metabase/css/dashboard.module.css | 6 ++---
.../src/metabase/css/query_builder.module.css | 6 ++---
.../SidebarItem/SidebarItem.styled.tsx | 2 +-
.../TypeSelector/TypeSelector.styled.tsx | 3 ++-
.../TypeSelector/TypeSelector.tsx | 2 +-
.../DashCardCardParameterMapper.styled.tsx | 12 ++++-----
.../components/Dashboard/Dashboard.styled.tsx | 2 +-
.../DashboardEmptyState.styled.tsx | 4 ++-
.../DashboardHeader/SectionLayoutPreview.tsx | 2 +-
.../DashboardInfoSidebar.styled.tsx | 3 +--
.../components/DashboardMoveModal.tsx | 2 +-
.../components/ParametersPopover.styled.tsx | 4 +--
.../DatabaseEngineWidget.styled.tsx | 2 +-
.../FormMessage/FormMessage.styled.tsx | 2 +-
.../FormTextInput/FormTextInput.styled.tsx | 3 +--
.../CustomHomePageModal.tsx | 4 +--
.../components/HomeCard/HomeCard.styled.tsx | 4 +--
.../HomeHelpCard/HomeHelpCard.styled.tsx | 2 +-
frontend/src/metabase/hooks/use-palette.ts | 2 +-
frontend/src/metabase/lib/colors/groups.ts | 2 +-
frontend/src/metabase/lib/colors/palette.ts | 4 +--
.../metabase/lib/colors/scales.unit.spec.ts | 2 +-
.../ModelActionListItem.styled.tsx | 2 +-
.../NewModelOptions.styled.tsx | 3 +--
.../AdminNavbar/AdminNavItem.styled.tsx | 3 ++-
.../AdminNavbar/AdminNavbar.styled.tsx | 8 +++---
.../components/AdminNavbar/AdminNavbar.tsx | 2 +-
.../CollectionBreadcrumbs.styled.tsx | 2 +-
.../components/StoreLink/StoreLink.styled.tsx | 4 +--
.../search/SearchBar/SearchBar.styled.tsx | 2 +-
.../MainNavbar/MainNavbar.styled.tsx | 6 ++---
.../SidebarItems/SidebarItems.styled.tsx | 2 +-
.../palette/components/PaletteResultItem.tsx | 6 ++---
.../ParameterSettings.styled.tsx | 2 +-
.../ParameterValueWidget.module.css | 2 +-
.../ParameterWidget/ParameterWidget.styled.ts | 4 +--
.../EmbedFrame/EmbedFrame.module.css | 6 ++---
.../EmbedFrame/EmbedFrame.styled.tsx | 2 +-
.../EmbedFrame/LogoBadge.styled.tsx | 2 +-
.../InteractiveEmbeddingCTA.tsx | 2 +-
.../StaticEmbedSetupPane.styled.tsx | 2 +-
.../widgets/LegaleseStep/LegaleseStep.tsx | 2 +-
.../pulse/components/RecipientPicker.jsx | 2 +-
.../AlertModals/AlertModals.styled.tsx | 2 +-
.../DataSelectorDataBucketPicker.styled.tsx | 2 +-
.../DatasetEditor/DatasetEditor.styled.tsx | 10 +++----
.../MappedFieldPicker.styled.tsx | 5 ++--
.../EditorTabs/EditorTabs.styled.tsx | 4 +--
.../NativeQueryEditor.styled.tsx | 2 +-
.../QueryDownloadPopover.styled.tsx | 4 +--
.../ExpressionEditorSuggestions.styled.tsx | 5 +---
.../ExtractColumn/ExtractColumn.module.css | 2 +-
.../components/notebook/FieldsPickerIcon.tsx | 3 +--
.../NotebookCell/NotebookCell.styled.tsx | 9 ++++---
.../NotebookNativePreview.tsx | 2 +-
.../steps/DataStep/DataStep.styled.tsx | 3 +--
.../JoinConditionColumnPicker.tsx | 4 +--
.../JoinConditionOperatorPicker.styled.tsx | 2 +-
.../JoinConditionRemoveButton.styled.tsx | 4 +--
.../JoinTablePicker.styled.tsx | 3 +--
.../steps/SortStep/SortStep.styled.tsx | 4 +--
.../SnippetRow/SnippetRow.styled.tsx | 3 +--
.../TagEditorParam.styled.tsx | 2 +-
.../QuestionDisplayToggle.styled.tsx | 2 +-
.../NotebookContainer/NotebookContainer.tsx | 4 +--
.../components/view/ViewButton.tsx | 4 +--
.../components/view/ViewFooter.styled.tsx | 2 +-
.../view/ViewHeader/ViewHeader.styled.tsx | 4 +--
.../ToggleNativeQueryPreview.styled.tsx | 2 +-
.../view/sidebars/ChartTypeSidebar.styled.tsx | 4 +--
.../AddAggregationButton.styled.tsx | 5 ++--
.../AggregationItem.styled.tsx | 10 +++----
.../BreakoutColumnList.styled.tsx | 4 +--
.../BreakoutColumnListItem.styled.tsx | 23 ++++++++--------
.../SummarizeSidebar.styled.tsx | 3 +--
.../FilterPanelButton.styled.tsx | 5 ++--
.../QuestionMoveToast.styled.tsx | 3 +--
.../InfoText/InfoTextEditedInfo.styled.tsx | 3 +--
.../components/ItemIcon.styled.tsx | 2 +-
.../ActiveStep/ActiveStep.styled.tsx | 4 +--
.../CompletedStep/CompletedStep.styled.tsx | 2 +-
.../InactiveStep/InactiveStep.styled.tsx | 12 ++++-----
.../LanguageStep/LanguageStep.styled.tsx | 6 ++---
.../NewsletterForm/NewsletterForm.styled.tsx | 6 ++---
.../components/NewPulseSidebar.styled.tsx | 3 +--
.../components/ProgressBar/ProgressBar.tsx | 6 ++---
.../StatusLarge/StatusLarge.styled.tsx | 11 ++++----
.../StatusSmall/StatusSmall.styled.tsx | 2 +-
.../containers/GlobalStyles/GlobalStyles.tsx | 4 +++
.../TimelineEmptyState.styled.tsx | 8 +++---
.../TimelinePicker/TimelinePicker.styled.tsx | 6 ++---
.../navigation/NavLink/NavLink.styled.tsx | 6 ++---
frontend/src/metabase/ui/utils/colors.ts | 1 +
.../TimelineEventTooltip.styled.tsx | 3 +--
.../ClickActionControl.module.css | 4 +--
.../ClickActionControl.styled.tsx | 6 ++---
.../TableInteractive.styled.tsx | 2 +-
.../ChartSettingFieldPicker.styled.tsx | 4 +--
.../settings/ColumnItem/ColumnItem.styled.tsx | 2 +-
.../StaticSkeleton/StaticSkeleton.styled.tsx | 2 +-
.../echarts/cartesian/option/series.ts | 4 +--
.../cartesian/scatter/option/series.ts | 2 +-
.../visualizations/Gauge/Gauge.jsx | 2 +-
.../PivotTable/PivotTable.styled.tsx | 4 +--
193 files changed, 379 insertions(+), 408 deletions(-)
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 27940e11057..5f4ce19ca00 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 be893605724..732bf9c8b3b 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 abcf1baa0fa..fda2ec88554 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 3e5c0955e94..c261af7cb42 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 39303dd3f11..76be3a58977 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 e42c80d264f..73fdb993e0e 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 e939ad1b0a6..394da162832 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 73892e1869c..ec5fa12d213 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 40ccf65f310..4d67a5eb838 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 74b030a6c09..6e881b24240 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 b2d42dd813e..3176bc7c745 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 6d3176bb64f..b90c9b2a3a2 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 68aadbd3d69..640d71a1e07 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 3a630eeed2e..ebf1851630e 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 7241217f967..be63e7e67cd 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 83c998bbd35..080ed2e4b6e 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 916e03f5bb1..ff687c38c5f 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 969358e9535..7726028ca99 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 ead2eee7333..32ffb0901fa 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 76ca856ac77..833410e0ba4 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 b9809608a32..3bd3d40c659 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 6fbeba89201..7ca1d85efe6 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 132a89f6936..b169f43da0c 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 11302acfa17..6b5fab2d19d 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 1fc90002d7d..dc6d5bb2e6d 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 9d1f5be03f6..5c6a5127d18 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 6f674f4753d..dc980fc61f9 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 4d81de9da07..14ec42b16dd 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 924487161c5..9d4166a72ea 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 929e33b8221..62f18eb9f0c 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 6adcf4dbc7e..06db136c0da 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 aa66e206650..b892a02cc0d 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 844d819994c..c2747188522 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 f1c6ceca829..1a5c1682bde 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 f326f91bb49..94d511b1e4d 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 c2e452fc67c..40951f810e2 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 2f8465e0756..19050105950 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 2d66aced79a..72bbbf7f496 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 21719797ca5..02d009be80f 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 013f60b40bc..e63e24cfa18 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 4e7ca7606f8..aee6eb40f62 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 d2d1327c185..b28f55c2778 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 dc8d9885eaa..0577d3f1d3b 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 e4de77fd9bc..0322d1ba235 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 1752bcce0f4..61470ae912e 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 d63497e77ad..73d5d0815b4 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 9b5b616d52f..8a47237525e 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 66a543f4072..ae76a259e25 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 5e9aa036e94..6d17cdf26f3 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 c000d099bce..23e579c577e 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 4747f754567..bf519abd10a 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 7e4b63432eb..5a9a5c0bc87 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 78d6663b373..d505aa58644 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 227ca6fd993..326da1719e5 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 7f78e086c80..f46716a173d 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 2f5c29e6e3b..435ec21f3ce 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 deb46dd0878..1787a1e45a4 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 f6681720de7..1b09bd5d359 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 6479489790f..d0b91b08272 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 54796da7f69..cdc57b97dd1 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 3893ef478ac..f47511490e1 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 627395357b4..f676d138d20 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 9cff96b41cb..903904bba27 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 b996b08e701..280d862a677 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 76da38d9b12..16a302ddb99 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 c4c2aa08d28..6833ae5eb70 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 78a070c9758..f03e257be8c 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 cad6b5e947c..05474cb9eb8 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 7aefe00d1c3..8f04b89ef25 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 9db13557f13..cdfff06c111 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 8d626210b1a..0f46a59eb52 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 de03761eb25..5921b87ad41 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 0a7e01fa412..d4d35d4ff74 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 87c6232c80b..50fd3dcbfcf 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 ef27b604f84..9e244e3301b 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 17427367ba8..72d4a704a6c 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 3518e5751f0..19ad30d9e20 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 81d0570cf4e..1ad74c9b41e 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 d085a9fc7e6..ac4c4e7129f 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 cd44cab0b51..6ba82ad66bc 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 fe25f6ca616..4aaed46bca9 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 16c7169f642..2355c6dba8c 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 29d24289a85..5b17a1f87aa 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 6e0f17e8e74..815a6130f35 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 e162942cf1f..5b8846549a1 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 de316de6178..a38f8410e20 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 04fd19c814f..6226dfe721a 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 e2bcf3440e9..12a360e5dc0 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 42f5b7974af..7198220d9ad 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 75a991164d9..4f9d6c06aec 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 6346c0c94b8..acdcf68c61b 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 b509bc1e64f..05c30966e4c 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 c5dc3555300..7b97585706a 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 b2268dcd372..b0af2288a9f 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 8685bce99fa..2eba3065ed4 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 661d7a01ece..bc8aa4dc5bd 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 73d43ba52d1..77328728229 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 64f1ad53ade..b6da14680b8 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 7e5e2f78a4a..7082d0e53df 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 0a4fcec5699..c7fd90eb823 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 083b78fe4eb..7ad0c130109 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 b036c14c61d..177e77f54c6 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 c3f1dd36310..fdac5289073 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 890e7d2ce7c..91e9be639ef 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 a3e7a689ea1..cb62f6808e5 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 9ecc276f34c..07641b185dd 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 9efcc02fb44..947fbf0d847 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 4b071b9ec8d..cdcd91387ca 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 74d680648a9..10206296ba2 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 ee745ae2bf9..cc2bea80836 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 cbebe289b03..b5285b980da 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 33e54429cc2..5b18627b027 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 5b0ef90cedd..1f6de2dc473 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 d3a9797c4cb..712963b9af2 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 5135249f8f1..cabf6192efe 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 569ab651549..196b043682d 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 ceab76b2073..348387e22ba 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 0d4a4f72889..2d7ecceb152 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 13b863424ca..ee185671975 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 3457ae12571..50252970a47 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 c78c3cac3f7..780adf52dff 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 23d909caf99..d92971611fe 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 c31ea96ae5e..038dcab6c07 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 96ca8b9bc83..ed2a5ecb174 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 9ea91b52082..3730fda7f88 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 016d4807227..8ffff811473 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 5bdf8cb17c6..a3ea20c2155 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 6b8e59681ff..6bcca0deacc 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 0d54a65464c..a4ca42d8c83 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 525b36372a1..b665f7e1603 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 708bafd9187..511cad6e684 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 c4f4b9cffd5..c4147ef4715 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 cae64d1ff48..f8af113c6e3 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 ce8f6bc1593..87e956fa1f8 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 91d7602c965..5f7b9acc9e0 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 60ee95e04ac..416988c5148 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 aa014aa6395..41d70d3e8f6 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 a147fe0608a..f71c1f21f29 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 8c8e8c54146..0d14361c257 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 9ffbb082b7b..44437d48cc3 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 85d8a6a556e..7252b05a2b9 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 76557df4f67..87b14e36547 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 3925883a4aa..048c21eb5b7 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 b0cd55befaa..296c01b6c3d 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 5dfbb098ed4..7b6eb3ced7b 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 a614dfc2c60..7cc8b1a72c6 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 6f2d89ab2e6..56a4ae292ab 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 55027140d28..a4d09868d1b 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 de3138e294c..0ea11a372b5 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 fe9898fb87f..5a9f62abd30 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 d8855cb142b..950ab68f1bf 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 bd1eb2de546..d4d7c91b2bd 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 63fa588dee7..3df96a76e07 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 2f6f3292729..ae9f2a958d9 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 4d77362e738..a1d6cf01c02 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 d3e2cab9731..983cd8d7b1c 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 549b5c26174..851af984e98 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 02080434273..9f56618e60c 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 55f00cb1369..e41ad6a7a53 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 8fdcbe6b92a..7cb9a7fd211 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 88acaafd8e2..285e7f59cd7 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 ba95119c7d6..d7c4c45199e 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 1a9fa2fc042..9bdc1c808f8 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 eede6d51fe4..41863d29ea7 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 3f0caff9f32..73a97b47516 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 3e31053f590..c9cf2468937 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 e33f7f2934e..4c4d2d4e545 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 80353845510..c814bfb6ab1 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 74878d66eeb..2efaba935ea 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 7161d96523d..e64e9f5c5f4 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 2961085f2a7..4ac14863899 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 76474802484..34bb55d5aab 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 ff6697c9451..df071c14de6 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 bcaf0718202..928d378e08b 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 c803068a3a0..29fe056fff7 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 4890f8fa06e..76b711cbb04 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 2bacc7a6081..aecec0b50ab 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 3f945e92606..52822b9e404 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 e9f66cd1164..d56a516d35d 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 c6b9d386348..8152b619807 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 84259e0f204..e8c193b4ab4 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 3785266f60a..8cf04f5896c 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 8cba5afe331..1e49ea01ff4 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 8f4c7aa30fb..cb53bc97dd7 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 9e0613f98b0..539d8925cc9 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 c579877201f..1fd58f4f600 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 22ceb0c0bd8..eca98882c38 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 056ed2fb31d..251d752aeca 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 967ade644b8..3503665a246 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 44946699cf1..0161a493633 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 2cdb59cfb6e..a728beb6b04 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 c211770839d..b6fed349667 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 2135166f178..2f578ffa57c 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);
--
GitLab