diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 38eb28f5a749bcf75d7197bf74a64f5564b42302..699bcdc2be348f9be8b10aebd1e0e1aedc346a98 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -14,5 +14,6 @@
     --mb-color-border: #eeecec;
     --mb-color-brand-light: #f9fbfc;
     --mb-color-brand-lighter: #eef6fc;
+    --mb-color-filter: #7172ad;
   }
 </style>
diff --git a/enterprise/frontend/src/embedding-sdk/components/private/SdkContentWrapper.tsx b/enterprise/frontend/src/embedding-sdk/components/private/SdkContentWrapper.tsx
index d9ee4e370a06ec8edbe6aea7894941eced6c0d21..1f1904e503f605936ab9263ab9681f981bd0b1e6 100644
--- a/enterprise/frontend/src/embedding-sdk/components/private/SdkContentWrapper.tsx
+++ b/enterprise/frontend/src/embedding-sdk/components/private/SdkContentWrapper.tsx
@@ -53,6 +53,9 @@ const SdkContentWrapperInner = styled.div<
   --mb-color-text-dark: ${({ theme }) => theme.fn.themeColor("text-dark")};
   --mb-color-text-medium: ${({ theme }) => theme.fn.themeColor("text-medium")};
   --mb-color-text-light: ${({ theme }) => theme.fn.themeColor("text-light")};
+  --mb-color-danger: ${({ theme }) => theme.fn.themeColor("danger")};
+  --mb-color-error: ${({ theme }) => theme.fn.themeColor("error")};
+  --mb-color-filter: ${({ theme }) => theme.fn.themeColor("filter")};
   --mb-color-bg-error: ${() => color("bg-error")};
   --mb-color-bg-medium: ${({ theme }) => theme.fn.themeColor("bg-medium")};
   --mb-color-bg-night: ${() => color("bg-night")};
diff --git a/enterprise/frontend/src/metabase-enterprise/auth/components/SessionTimeoutSetting/SessionTimeoutSetting.styled.tsx b/enterprise/frontend/src/metabase-enterprise/auth/components/SessionTimeoutSetting/SessionTimeoutSetting.styled.tsx
index 2ce8e7dd1a47d431b04074f91cf467ee9699d99c..bfca59a1067ad1df55b9267c41a8e1045720156a 100644
--- a/enterprise/frontend/src/metabase-enterprise/auth/components/SessionTimeoutSetting/SessionTimeoutSetting.styled.tsx
+++ b/enterprise/frontend/src/metabase-enterprise/auth/components/SessionTimeoutSetting/SessionTimeoutSetting.styled.tsx
@@ -1,7 +1,6 @@
 import styled from "@emotion/styled";
 
 import Input from "metabase/core/components/Input";
-import { color } from "metabase/lib/colors";
 
 export const SessionTimeoutSettingRoot = styled.div`
   margin: 0.5rem 0;
@@ -31,5 +30,5 @@ export const SessionTimeoutInput = styled(Input)<SessionTimeoutInputProps>`
 export const ErrorMessage = styled.div`
   text-align: right;
   margin-top: 0.5rem;
-  color: ${color("error")};
+  color: var(--mb-color-error);
 `;
diff --git a/enterprise/frontend/src/metabase-enterprise/caching/components/CacheTTLField/CacheTTLField.styled.tsx b/enterprise/frontend/src/metabase-enterprise/caching/components/CacheTTLField/CacheTTLField.styled.tsx
index fec4c3e14e827c75ea28a02ad990e5aef9841b96..4e6e6affec047784ce863e55e6347b12aac6934b 100644
--- a/enterprise/frontend/src/metabase-enterprise/caching/components/CacheTTLField/CacheTTLField.styled.tsx
+++ b/enterprise/frontend/src/metabase-enterprise/caching/components/CacheTTLField/CacheTTLField.styled.tsx
@@ -10,7 +10,7 @@ export const CacheTTLFieldContainer = styled.div`
 `;
 
 export const FieldText = styled.span<{ hasError?: boolean; margin: string }>`
-  color: ${props => color(props.hasError ? "error" : "text-dark")};
+  color: ${props => (props.hasError ? color("error") : color("text-dark"))};
   ${props => css`margin-${props.margin}: 10px;`}
 `;
 
@@ -18,7 +18,7 @@ export const Input = styled(NumericInput)`
   width: 50px;
   text-align: center;
 
-  color: ${props => color(props.hasError ? "error" : "text-dark")};
+  color: ${props => (props.hasError ? color("error") : color("text-dark"))};
   font-weight: bold;
   padding: 0.75em;
 
diff --git a/enterprise/frontend/src/metabase-enterprise/caching/components/ResetButtonContainer.styled.tsx b/enterprise/frontend/src/metabase-enterprise/caching/components/ResetButtonContainer.styled.tsx
index 954f30657d1f1d7b9aaa4672767813ddf6f864e1..0d160807c2832de5020290683bf8fd14c5bf7308 100644
--- a/enterprise/frontend/src/metabase-enterprise/caching/components/ResetButtonContainer.styled.tsx
+++ b/enterprise/frontend/src/metabase-enterprise/caching/components/ResetButtonContainer.styled.tsx
@@ -1,3 +1,4 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
 import type { FormSubmitButtonProps } from "metabase/forms";
@@ -7,8 +8,12 @@ import { alpha } from "metabase/lib/colors";
 export const ResetAllFormSubmitButton = styled(FormSubmitButton, {
   shouldForwardProp: prop => prop !== "highlightOnHover",
 })<FormSubmitButtonProps & { highlightOnHover?: boolean }>`
-  ${({ highlightOnHover }) =>
+  ${({ highlightOnHover, theme }) =>
     highlightOnHover
-      ? `:hover { background-color: ${alpha("error", 0.15)}; }`
+      ? css`
+          :hover {
+            background-color: ${alpha(theme.fn.themeColor("error"), 0.15)};
+          }
+        `
       : ""}
 `;
diff --git a/enterprise/frontend/src/metabase-enterprise/group_managers/components/UserTypeCell/UserTypeCell.styled.tsx b/enterprise/frontend/src/metabase-enterprise/group_managers/components/UserTypeCell/UserTypeCell.styled.tsx
index 764a80b8964ba88dd7707799a4ddf0b66767bd00..16ed7b6ba8d21caa1dfaa15a762b14ef1428aa23 100644
--- a/enterprise/frontend/src/metabase-enterprise/group_managers/components/UserTypeCell/UserTypeCell.styled.tsx
+++ b/enterprise/frontend/src/metabase-enterprise/group_managers/components/UserTypeCell/UserTypeCell.styled.tsx
@@ -4,7 +4,7 @@ import { color } from "metabase/lib/colors";
 
 export const ChangeTypeButton = styled.button`
   padding: 0 0.25rem;
-  color: ${color("filter")};
+  color: var(--mb-color-filter);
   cursor: pointer;
   vertical-align: middle;
 `;
diff --git a/enterprise/frontend/src/metabase-enterprise/group_managers/components/UserTypeToggle/UserTypeToggle.styled.tsx b/enterprise/frontend/src/metabase-enterprise/group_managers/components/UserTypeToggle/UserTypeToggle.styled.tsx
index 1926b0a27a62ddc46e445016ecae65af577f8489..07424dda95011806592493b92e6a95b7701ec74d 100644
--- a/enterprise/frontend/src/metabase-enterprise/group_managers/components/UserTypeToggle/UserTypeToggle.styled.tsx
+++ b/enterprise/frontend/src/metabase-enterprise/group_managers/components/UserTypeToggle/UserTypeToggle.styled.tsx
@@ -1,10 +1,8 @@
 import styled from "@emotion/styled";
 
-import { color } from "metabase/lib/colors";
-
 export const UserTypeToggleRoot = styled.button`
   padding: 0 0.5rem;
-  color: ${color("filter")};
+  color: var(--mb-color-filter);
   cursor: pointer;
   vertical-align: middle;
 `;
diff --git a/enterprise/frontend/src/metabase-enterprise/moderation/components/ModerationReviewBanner/ModerationReviewBanner.styled.tsx b/enterprise/frontend/src/metabase-enterprise/moderation/components/ModerationReviewBanner/ModerationReviewBanner.styled.tsx
index 7a6829730b677bc00a83d3c7119abe1e4e04ed30..2355c7150fbfbf9da34ed097ac5cf53096131363 100644
--- a/enterprise/frontend/src/metabase-enterprise/moderation/components/ModerationReviewBanner/ModerationReviewBanner.styled.tsx
+++ b/enterprise/frontend/src/metabase-enterprise/moderation/components/ModerationReviewBanner/ModerationReviewBanner.styled.tsx
@@ -38,6 +38,6 @@ export const IconButton = styled(Button)`
 
   &:hover {
     background-color: transparent;
-    color: ${color("danger")};
+    color: var(--mb-color-danger);
   }
 `;
diff --git a/frontend/src/metabase/actions/components/ActionViz/ActionButton.styled.tsx b/frontend/src/metabase/actions/components/ActionViz/ActionButton.styled.tsx
index 7383eb117cf12ddd233d6ea3d640f4f94a8e6d19..93546056d36c8650c0fb16faa97f48935c13c97e 100644
--- a/frontend/src/metabase/actions/components/ActionViz/ActionButton.styled.tsx
+++ b/frontend/src/metabase/actions/components/ActionViz/ActionButton.styled.tsx
@@ -1,7 +1,7 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
 import Button from "metabase/core/components/Button";
-import { color } from "metabase/lib/colors";
 
 export const StyledButton = styled(Button)<{
   isFullHeight?: boolean;
@@ -12,9 +12,9 @@ export const StyledButton = styled(Button)<{
 
   ${({ focus }) =>
     focus
-      ? `
-    border: 2px solid ${color("focus")};
-  `
+      ? css`
+          border: 2px solid var(--mb-color-focus);
+        `
       : ""}
 `;
 
diff --git a/frontend/src/metabase/actions/containers/ActionCreator/FormCreator/OptionEditor.styled.tsx b/frontend/src/metabase/actions/containers/ActionCreator/FormCreator/OptionEditor.styled.tsx
index 1c77e664016b63c4fb8f7e6e60edf9275d434342..c56040eb7375ddb50cc4b6384cf7fd451a54fd6c 100644
--- a/frontend/src/metabase/actions/containers/ActionCreator/FormCreator/OptionEditor.styled.tsx
+++ b/frontend/src/metabase/actions/containers/ActionCreator/FormCreator/OptionEditor.styled.tsx
@@ -22,7 +22,7 @@ export const AddMorePrompt = styled.div<{ isVisible: boolean }>`
 export const ErrorMessage = styled.div`
   text-align: center;
   font-size: 0.875rem;
-  color: ${color("error")};
+  color: var(--mb-color-error);
 `;
 
 export const TextArea = styled.textarea`
diff --git a/frontend/src/metabase/admin/databases/components/DatabaseEditApp/Sidebar/ModelActionsSection/ModelActionsSection.styled.tsx b/frontend/src/metabase/admin/databases/components/DatabaseEditApp/Sidebar/ModelActionsSection/ModelActionsSection.styled.tsx
index c2c1873c9ea81dec90fccf79be634663161f4bb4..68fcc111ec1572ba58f64716469e146dd30d4f15 100644
--- a/frontend/src/metabase/admin/databases/components/DatabaseEditApp/Sidebar/ModelActionsSection/ModelActionsSection.styled.tsx
+++ b/frontend/src/metabase/admin/databases/components/DatabaseEditApp/Sidebar/ModelActionsSection/ModelActionsSection.styled.tsx
@@ -25,7 +25,7 @@ export const Description = styled.p`
 `;
 
 export const Error = styled(Description)`
-  color: ${color("error")};
-  border-left: 3px solid ${color("error")};
+  color: var(--mb-color-error);
+  border-left: 3px solid var(--mb-color-error);
   padding-left: 12px;
 `;
diff --git a/frontend/src/metabase/admin/databases/components/DatabaseEditApp/Sidebar/ModelCachingControl/ModelCachingControl.styled.tsx b/frontend/src/metabase/admin/databases/components/DatabaseEditApp/Sidebar/ModelCachingControl/ModelCachingControl.styled.tsx
index 4ec27390b7a690513dbc3f3124ffe3c1918746be..901df8e6b402184a7b7bd92cc924b87f5e13cddf 100644
--- a/frontend/src/metabase/admin/databases/components/DatabaseEditApp/Sidebar/ModelCachingControl/ModelCachingControl.styled.tsx
+++ b/frontend/src/metabase/admin/databases/components/DatabaseEditApp/Sidebar/ModelCachingControl/ModelCachingControl.styled.tsx
@@ -33,6 +33,6 @@ export const FeatureDescriptionText = styled.p`
 
 export const ErrorMessage = styled.p`
   width: 80%;
-  color: ${color("error")};
+  color: var(--mb-color-error);
   line-height: 1.5rem;
 `;
diff --git a/frontend/src/metabase/admin/databases/components/DeleteDatabaseModel/DeleteDatabaseModal.styled.tsx b/frontend/src/metabase/admin/databases/components/DeleteDatabaseModel/DeleteDatabaseModal.styled.tsx
index a1f22f1e462c91637c30a01f259a8bea8cc7782f..5cd0fb2a30578bda5c6a4a40e2835c241f8275a0 100644
--- a/frontend/src/metabase/admin/databases/components/DeleteDatabaseModel/DeleteDatabaseModal.styled.tsx
+++ b/frontend/src/metabase/admin/databases/components/DeleteDatabaseModel/DeleteDatabaseModal.styled.tsx
@@ -1,7 +1,5 @@
 import styled from "@emotion/styled";
 
-import { color } from "metabase/lib/colors";
-
 export const DeleteDatabaseModalRoot = styled.form`
   display: flex;
   flex-direction: column;
@@ -35,7 +33,7 @@ export const DeleteDatabaseModalSection = styled.div<DeleteDatabaseModalSectionP
 `;
 
 export const ErrorMessage = styled.div`
-  color: ${color("error")};
+  color: var(--mb-color-error);
   padding: 0 1rem;
 `;
 
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 6f83973d452b25aeaca5bf2ee78f61debe8e93fe..916e03f5bb1f461907d2795d62f044c7cd4dd0de 100644
--- a/frontend/src/metabase/admin/datamodel/components/DimensionList/DimensionList.styled.tsx
+++ b/frontend/src/metabase/admin/datamodel/components/DimensionList/DimensionList.styled.tsx
@@ -5,6 +5,6 @@ import { alpha } from "metabase/lib/colors";
 export const FieldListGroupingTrigger = styled.div`
   display: flex;
   visibility: hidden;
-  border-left: 2px solid ${alpha("filter", 0.1)};
+  border-left: 2px solid ${() => alpha("filter", 0.1)};
   color: ${alpha("text-white", 0.5)};
 `;
diff --git a/frontend/src/metabase/admin/datamodel/components/FilterWidget/FilterWidget.styled.tsx b/frontend/src/metabase/admin/datamodel/components/FilterWidget/FilterWidget.styled.tsx
index 2123df835f2be4caa3411aecf39f67b2b915819b..cb8166193fffc41936c0480534df53cd300f0992 100644
--- a/frontend/src/metabase/admin/datamodel/components/FilterWidget/FilterWidget.styled.tsx
+++ b/frontend/src/metabase/admin/datamodel/components/FilterWidget/FilterWidget.styled.tsx
@@ -1,8 +1,6 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
-import { color } from "metabase/lib/colors";
-
 export interface FilterWidgetRootProps {
   isSelected: boolean;
 }
@@ -16,7 +14,7 @@ export const FilterWidgetRoot = styled.div<FilterWidgetRootProps>`
   ${({ isSelected }) =>
     isSelected &&
     css`
-      border-color: ${color("filter")};
+      border-color: var(--mb-color-filter);
     `}
 `;
 
@@ -35,7 +33,7 @@ export const FilterSection = styled.div`
 `;
 
 export const FilterField = styled(FilterSection)`
-  color: ${color("filter")};
+  color: var(--mb-color-filter);
   font-weight: 700;
 
   &:hover {
@@ -43,14 +41,14 @@ export const FilterField = styled(FilterSection)`
   }
 
   ${QueryOption} {
-    color: ${color("filter")};
+    color: var(--mb-color-filter);
   }
 `;
 
 export const FilterOperator = styled(FilterSection)`
-  color: ${color("filter")};
+  color: var(--mb-color-filter);
 
   ${QueryOption} {
-    color: ${color("filter")};
+    color: var(--mb-color-filter);
   }
 `;
diff --git a/frontend/src/metabase/admin/datamodel/components/filters/pickers/LegacyDatePicker/HoursMinutesInput.styled.tsx b/frontend/src/metabase/admin/datamodel/components/filters/pickers/LegacyDatePicker/HoursMinutesInput.styled.tsx
index c77fa75048f258f69d8bdc5b6433e8c9f371516f..4dc8f7d74245db7421d499024b291f515bf489ba 100644
--- a/frontend/src/metabase/admin/datamodel/components/filters/pickers/LegacyDatePicker/HoursMinutesInput.styled.tsx
+++ b/frontend/src/metabase/admin/datamodel/components/filters/pickers/LegacyDatePicker/HoursMinutesInput.styled.tsx
@@ -13,6 +13,6 @@ export const AmPmLabel = styled.span<AmPmLabelProps>`
   cursor: ${props => !props.isSelected && "pointer"};
 
   &:hover {
-    color: ${color("filter")};
+    color: var(--mb-color-filter);
   }
 `;
diff --git a/frontend/src/metabase/admin/datamodel/components/filters/pickers/LegacyDatePicker/RelativeDatePicker.styled.tsx b/frontend/src/metabase/admin/datamodel/components/filters/pickers/LegacyDatePicker/RelativeDatePicker.styled.tsx
index 28d910a93ba740a8d54e0b690bac28574fe464ab..1c6b08e0db6a49df114fe15def6427c83c9d9316 100644
--- a/frontend/src/metabase/admin/datamodel/components/filters/pickers/LegacyDatePicker/RelativeDatePicker.styled.tsx
+++ b/frontend/src/metabase/admin/datamodel/components/filters/pickers/LegacyDatePicker/RelativeDatePicker.styled.tsx
@@ -1,8 +1,7 @@
 import styled from "@emotion/styled";
 
 import NumericInput from "metabase/components/NumericInput";
-import { color } from "metabase/lib/colors";
 
 export const IntervalInput = styled(NumericInput)`
-  border-color: ${color("filter")};
+  border-color: var(--mb-color-filter);
 `;
diff --git a/frontend/src/metabase/admin/datamodel/components/filters/pickers/LegacyDatePicker/SpecificDatePicker.styled.tsx b/frontend/src/metabase/admin/datamodel/components/filters/pickers/LegacyDatePicker/SpecificDatePicker.styled.tsx
index 92c3286eac5d064e2e3b62ac4466b1aa538c134e..eadd25bae6377ac1669a7f309b396e2405f4482f 100644
--- a/frontend/src/metabase/admin/datamodel/components/filters/pickers/LegacyDatePicker/SpecificDatePicker.styled.tsx
+++ b/frontend/src/metabase/admin/datamodel/components/filters/pickers/LegacyDatePicker/SpecificDatePicker.styled.tsx
@@ -1,13 +1,11 @@
 import styled from "@emotion/styled";
 
-import { color } from "metabase/lib/colors";
-
 export const TimeLabel = styled.div`
   display: flex;
   align-items: center;
   cursor: pointer;
 
   &:hover {
-    color: ${color("filter")};
+    color: var(--mb-color-filter);
   }
 `;
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 7dbec21677304c86a19e6b27702e3c94cb175290..6fbeba89201d75d1bdd92de707ff0b9424a21da9 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
@@ -12,7 +12,7 @@ export const SelectPickerButton = styled.button<SelectPickerButtonProps>`
   font-weight: 700;
   width: 100%;
   height: 95px;
-  border: 1px solid ${color("filter")};
+  border: 1px solid var(--mb-color-filter);
   border-radius: 0.5rem;
   background-color: ${props =>
     props.isSelected ? color("filter") : color("white")};
diff --git a/frontend/src/metabase/admin/datamodel/components/filters/pickers/TextPicker.styled.tsx b/frontend/src/metabase/admin/datamodel/components/filters/pickers/TextPicker.styled.tsx
index 8b4860ce930bd0caec604f5ebde5074c53ec2a5b..e434d07232acd209eea000b4876c09c92aab9dfb 100644
--- a/frontend/src/metabase/admin/datamodel/components/filters/pickers/TextPicker.styled.tsx
+++ b/frontend/src/metabase/admin/datamodel/components/filters/pickers/TextPicker.styled.tsx
@@ -2,19 +2,17 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import AutosizeTextarea from "react-textarea-autosize";
 
-import { color } from "metabase/lib/colors";
-
 export interface TextPickerInputProps {
   hasInvalidValues: boolean;
 }
 
 export const TextPickerInput = styled.input<TextPickerInputProps>`
-  border-color: ${color("filter")};
+  border-color: var(--mb-color-filter);
 
   ${({ hasInvalidValues }) =>
     hasInvalidValues &&
     css`
-      border-color: ${color("error")};
+      border-color: var(--mb-color-error);
     `}
 `;
 
@@ -23,11 +21,11 @@ export interface TextPickerAreaProps {
 }
 
 export const TextPickerArea = styled(AutosizeTextarea)<TextPickerAreaProps>`
-  border-color: ${color("filter")};
+  border-color: var(--mb-color-filter);
 
   ${({ hasInvalidValues }) =>
     hasInvalidValues &&
     css`
-      border-color: ${color("error")};
+      border-color: var(--mb-color-error);
     `}
 `;
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 6ad8341b6f5c5194da45d4be9422718078435ff4..132a89f693633e146e551d9c6e1b610fc3b009a7 100644
--- a/frontend/src/metabase/admin/datamodel/components/revisions/RevisionDiff.styled.tsx
+++ b/frontend/src/metabase/admin/datamodel/components/revisions/RevisionDiff.styled.tsx
@@ -8,7 +8,7 @@ export const EditIcon = styled(Icon)`
 `;
 
 export const ErrorIcon = styled(Icon)`
-  color: ${color("error")};
+  color: var(--mb-color-error);
 `;
 
 export const SuccessIcon = styled(Icon)`
diff --git a/frontend/src/metabase/admin/datamodel/metadata/components/FieldRemappingSettings/FieldRemappingSettings.styled.tsx b/frontend/src/metabase/admin/datamodel/metadata/components/FieldRemappingSettings/FieldRemappingSettings.styled.tsx
index f013446653c1736993c3e605ff11706ba9cad96a..43a7010df19afd2ba1b4ab9ba1568cf59b6c9a18 100644
--- a/frontend/src/metabase/admin/datamodel/metadata/components/FieldRemappingSettings/FieldRemappingSettings.styled.tsx
+++ b/frontend/src/metabase/admin/datamodel/metadata/components/FieldRemappingSettings/FieldRemappingSettings.styled.tsx
@@ -26,7 +26,7 @@ export const FieldSelectButton = styled(SelectButton)<FieldSelectButtonProps>`
 `;
 
 export const ForeignKeyList = styled(FieldList)`
-  color: ${color("filter")};
+  color: var(--mb-color-filter);
 `;
 
 export const FieldValueMappingInput = styled(InputBlurChange)`
diff --git a/frontend/src/metabase/admin/people/components/GroupSummary.styled.tsx b/frontend/src/metabase/admin/people/components/GroupSummary.styled.tsx
index bb81b35057acacc0ef22fa8efe8d23f1aad91d6c..3815bf31e75f2096dac4b7eb6dfd3ff9424dc4cf 100644
--- a/frontend/src/metabase/admin/people/components/GroupSummary.styled.tsx
+++ b/frontend/src/metabase/admin/people/components/GroupSummary.styled.tsx
@@ -1,7 +1,5 @@
 import styled from "@emotion/styled";
 
-import { color } from "metabase/lib/colors";
-
 export const AdminGroupLabel = styled.span`
-  color: ${color("filter")};
+  color: var(--mb-color-filter);
 `;
diff --git a/frontend/src/metabase/admin/people/components/GroupsListing.styled.tsx b/frontend/src/metabase/admin/people/components/GroupsListing.styled.tsx
index 25af9eae4283ff3f60c92e232e8d0f6635a67ac6..9d1f5be03f6d42a6de5eaf29c37c984d3dedcfbf 100644
--- a/frontend/src/metabase/admin/people/components/GroupsListing.styled.tsx
+++ b/frontend/src/metabase/admin/people/components/GroupsListing.styled.tsx
@@ -13,7 +13,7 @@ export const EditGroupButton = styled.li`
 `;
 
 export const DeleteModalTrigger = styled.li`
-  color: ${color("error")};
+  color: var(--mb-color-error);
   cursor: pointer;
   padding: 0.5rem 1rem;
 
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 0501f640b117687536284a4fd48f65960a22b4c5..6f674f4753d675af29ac297afdd63109facfacef 100644
--- a/frontend/src/metabase/admin/people/components/MembershipSelect/MembershipSelect.styled.tsx
+++ b/frontend/src/metabase/admin/people/components/MembershipSelect/MembershipSelect.styled.tsx
@@ -28,7 +28,7 @@ export const MembershipSelectItem = styled.li<MembershipSelectItemProps>`
     css`
       &:hover {
         color: ${color("white")};
-        background-color: ${color("filter")};
+        background-color: var(--mb-color-filter);
 
         .Icon {
           color: ${color("white")} !important;
@@ -41,7 +41,7 @@ export const MembershipSelectHeader = styled.li`
   padding: 0.75rem 1.5rem 0.5rem 1.5rem;
   font-size: 12px;
   font-weight: 800;
-  color: ${color("filter")};
+  color: var(--mb-color-filter);
 `;
 
 export const MembershipActionsContainer = styled.div`
diff --git a/frontend/src/metabase/admin/permissions/components/PermissionsEditor/PermissionsEditorBreadcrumbs.styled.tsx b/frontend/src/metabase/admin/permissions/components/PermissionsEditor/PermissionsEditorBreadcrumbs.styled.tsx
index 6767b59ad2c7b806998be6aa82efdd496d1c8ff9..4bdbf5701cb1a6327ecabb44b5059cc776037776 100644
--- a/frontend/src/metabase/admin/permissions/components/PermissionsEditor/PermissionsEditorBreadcrumbs.styled.tsx
+++ b/frontend/src/metabase/admin/permissions/components/PermissionsEditor/PermissionsEditorBreadcrumbs.styled.tsx
@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 
-import { color, lighten } from "metabase/lib/colors";
+import { lighten } from "metabase/lib/colors";
 
 export const BreadcrumbsSeparator = styled.div`
   display: inline-block;
@@ -12,7 +12,7 @@ export const BreadcrumbsSeparator = styled.div`
 
 export const BreadcrumbsLink = styled.a`
   cursor: pointer;
-  color: ${color("filter")};
+  color: var(--mb-color-filter);
   transition: color 200ms;
 
   &:hover {
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 81558bdbde39679a62fdf5b79d4dd344242ebd27..844d819994cb68371f0e3ac074c4405ff0b37141 100644
--- a/frontend/src/metabase/admin/permissions/components/PermissionsSelect/PermissionsSelect.styled.tsx
+++ b/frontend/src/metabase/admin/permissions/components/PermissionsSelect/PermissionsSelect.styled.tsx
@@ -16,7 +16,7 @@ export const SelectedOption = styled(PermissionsSelectOption)`
   transition: color 200ms;
 
   &:hover {
-    color: ${color("filter")};
+    color: var(--mb-color-filter);
   }
 `;
 
diff --git a/frontend/src/metabase/admin/permissions/components/PermissionsSidebar/PermissionsSidebar.styled.tsx b/frontend/src/metabase/admin/permissions/components/PermissionsSidebar/PermissionsSidebar.styled.tsx
index cb4831d4a7bb8d937573768bffe565e23d3dc1ff..54a82d45732ceda4868fda63c86bbf46f59e9fbf 100644
--- a/frontend/src/metabase/admin/permissions/components/PermissionsSidebar/PermissionsSidebar.styled.tsx
+++ b/frontend/src/metabase/admin/permissions/components/PermissionsSidebar/PermissionsSidebar.styled.tsx
@@ -35,6 +35,6 @@ export const BackButton = styled.button`
   text-align: left;
 
   &:hover {
-    color: ${color("filter")};
+    color: var(--mb-color-filter);
   }
 `;
diff --git a/frontend/src/metabase/admin/permissions/components/ToolbarButton/ToolbarButton.styled.tsx b/frontend/src/metabase/admin/permissions/components/ToolbarButton/ToolbarButton.styled.tsx
index c82e17662600ff50d12a38b9e233676581d0f97c..59e08b01efe26da3013816e2907f7edd32ad99eb 100644
--- a/frontend/src/metabase/admin/permissions/components/ToolbarButton/ToolbarButton.styled.tsx
+++ b/frontend/src/metabase/admin/permissions/components/ToolbarButton/ToolbarButton.styled.tsx
@@ -13,7 +13,7 @@ export const ToolbarButtonRoot = styled.button`
   transition: color 200ms;
 
   &:hover {
-    color: ${color("filter")};
+    color: var(--mb-color-filter);
   }
 `;
 
diff --git a/frontend/src/metabase/admin/settings/auth/components/AuthCard/AuthCard.styled.tsx b/frontend/src/metabase/admin/settings/auth/components/AuthCard/AuthCard.styled.tsx
index e4aeff0cc79425fa15a7db8c1b6e76bfd1814a0f..2bb3dc0f9c9d3e766dc0405260c813b1cf3d09a6 100644
--- a/frontend/src/metabase/admin/settings/auth/components/AuthCard/AuthCard.styled.tsx
+++ b/frontend/src/metabase/admin/settings/auth/components/AuthCard/AuthCard.styled.tsx
@@ -36,8 +36,7 @@ interface CardBadgeProps {
 }
 
 export const CardBadge = styled.div<CardBadgeProps>`
-  color: ${props =>
-    props.isEnabled ? "var(--mb-color-brand)" : color("danger")};
+  color: ${props => (props.isEnabled ? color("brand") : color("danger"))};
   background-color: ${props =>
     props.isEnabled
       ? "var(--mb-color-brand-lighter)"
diff --git a/frontend/src/metabase/admin/settings/components/LicenseInput/LicenseInput.styled.tsx b/frontend/src/metabase/admin/settings/components/LicenseInput/LicenseInput.styled.tsx
index b3e203635f0f3f7334e845b1ff7ff52cb89ad69c..a5993c7663b4fa2825fe6e21092f2caca964e437 100644
--- a/frontend/src/metabase/admin/settings/components/LicenseInput/LicenseInput.styled.tsx
+++ b/frontend/src/metabase/admin/settings/components/LicenseInput/LicenseInput.styled.tsx
@@ -1,7 +1,6 @@
 import styled from "@emotion/styled";
 
 import Input from "metabase/core/components/Input";
-import { color } from "metabase/lib/colors";
 
 export const LicenseInputContainer = styled.div`
   display: flex;
@@ -17,5 +16,5 @@ export const LicenseTextInput = styled(Input)`
 export const LicenseErrorMessage = styled.div`
   margin-top: 8px;
   white-space: nowrap;
-  color: ${color("error")};
+  color: var(--mb-color-error);
 `;
diff --git a/frontend/src/metabase/admin/settings/components/SettingsSetting.styled.tsx b/frontend/src/metabase/admin/settings/components/SettingsSetting.styled.tsx
index 2f81fe9f95c0893543a896c93dbdac922bf50015..e15f5fb2b1f0292b3b03767d2de9c28568d091a4 100644
--- a/frontend/src/metabase/admin/settings/components/SettingsSetting.styled.tsx
+++ b/frontend/src/metabase/admin/settings/components/SettingsSetting.styled.tsx
@@ -18,7 +18,7 @@ export const SettingWarningMessage = styled.div`
 `;
 
 export const SettingErrorMessage = styled.div`
-  color: ${color("error")};
+  color: var(--mb-color-error);
   font-weight: bold;
   padding-top: 0.5rem;
 `;
diff --git a/frontend/src/metabase/admin/settings/components/widgets/GroupMappingsWidget/MappingRow/MappingRow.styled.tsx b/frontend/src/metabase/admin/settings/components/widgets/GroupMappingsWidget/MappingRow/MappingRow.styled.tsx
index c90e942ebb26913aa41382b170566766c48297f3..cb5fac71766fc4ab6183f0e867bdc617f24ed74b 100644
--- a/frontend/src/metabase/admin/settings/components/widgets/GroupMappingsWidget/MappingRow/MappingRow.styled.tsx
+++ b/frontend/src/metabase/admin/settings/components/widgets/GroupMappingsWidget/MappingRow/MappingRow.styled.tsx
@@ -7,6 +7,6 @@ export const DeleteMappingButton = styled(IconButtonWrapper)`
   color: ${color("text-dark")};
 
   &:hover {
-    color: ${color("danger")};
+    color: var(--mb-color-danger);
   }
 `;
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 2538f4b591f47546809bb7edd824dbfda10dd882..013f60b40bc9cc2ae4ce3fd5fe0e42ae5eecdb81 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
@@ -16,7 +16,7 @@ export const CustomScheduleLabel = styled.span`
 `;
 
 export const ErrorMessage = styled.span`
-  color: ${color("error")};
+  color: var(--mb-color-error);
   margin-top: 4px;
 `;
 
diff --git a/frontend/src/metabase/auth/components/AuthButton/AuthButton.styled.tsx b/frontend/src/metabase/auth/components/AuthButton/AuthButton.styled.tsx
index 4e3f8dc52b29c8659cedebc6cd349e559108d502..d63497e77ad6536e278075147dd576de2093f545 100644
--- a/frontend/src/metabase/auth/components/AuthButton/AuthButton.styled.tsx
+++ b/frontend/src/metabase/auth/components/AuthButton/AuthButton.styled.tsx
@@ -18,7 +18,7 @@ export const CardLink = styled(TextLink)`
   align-items: center;
   padding: 1.25rem;
   background-color: ${color("white")};
-  box-shadow: 0 3px 10px ${color("shadow")};
+  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 383fcb0fd320f39838b19ea2910d811d04bccd64..9b5b616d52f0f145e353787da30614ffc40e183f 100644
--- a/frontend/src/metabase/auth/components/AuthLayout/AuthLayout.styled.tsx
+++ b/frontend/src/metabase/auth/components/AuthLayout/AuthLayout.styled.tsx
@@ -24,7 +24,7 @@ export const LayoutCard = styled.div`
   margin-top: 1.5rem;
   padding: 2.5rem 1.5rem;
   background-color: ${color("white")};
-  box-shadow: 0 1px 15px ${color("shadow")};
+  box-shadow: 0 1px 15px var(--mb-color-shadow);
   border-radius: 6px;
 
   ${breakpointMinSmall} {
diff --git a/frontend/src/metabase/auth/components/GoogleButton/GoogleButton.styled.tsx b/frontend/src/metabase/auth/components/GoogleButton/GoogleButton.styled.tsx
index 63d9540866dda45e683c7839d4d2fdc6cb2af3d4..5ece40492fb69063130ac0a88d06d6867314456e 100644
--- a/frontend/src/metabase/auth/components/GoogleButton/GoogleButton.styled.tsx
+++ b/frontend/src/metabase/auth/components/GoogleButton/GoogleButton.styled.tsx
@@ -11,7 +11,7 @@ export const GoogleButtonRoot = styled.div`
 `;
 
 export const AuthError = styled.div`
-  color: ${color("error")};
+  color: var(--mb-color-error);
   text-align: center;
 `;
 
diff --git a/frontend/src/metabase/browse/components/BrowseContainer.styled.tsx b/frontend/src/metabase/browse/components/BrowseContainer.styled.tsx
index 9104cdf0ba0fe2d1725401f24bb05f06994955bb..e6e7cb96839673d5118ec2e8c67c377161114da2 100644
--- a/frontend/src/metabase/browse/components/BrowseContainer.styled.tsx
+++ b/frontend/src/metabase/browse/components/BrowseContainer.styled.tsx
@@ -1,7 +1,6 @@
 import styled from "@emotion/styled";
 
 import EmptyState from "metabase/components/EmptyState";
-import { color } from "metabase/lib/colors";
 import {
   breakpointMinMedium,
   breakpointMinSmall,
@@ -28,7 +27,7 @@ export const BrowseHeader = styled.header`
   display: flex;
   flex-direction: column;
   padding: 1rem 2.5rem 3rem 2.5rem;
-  color: ${color("dark")};
+  color: ${({ theme }) => theme.fn.themeColor("dark")};
 `;
 
 export const BrowseMain = styled.main`
diff --git a/frontend/src/metabase/browse/components/TableBrowser/TableBrowser.unit.spec.js b/frontend/src/metabase/browse/components/TableBrowser/TableBrowser.unit.spec.js
index 9df26b4ae55c8045ea0025b410a6186b11f367eb..011359de2e96529cffbb7aa5592f1f3c910dda0f 100644
--- a/frontend/src/metabase/browse/components/TableBrowser/TableBrowser.unit.spec.js
+++ b/frontend/src/metabase/browse/components/TableBrowser/TableBrowser.unit.spec.js
@@ -1,18 +1,14 @@
-import { render, screen } from "@testing-library/react";
+import { renderWithProviders, screen } from "__support__/ui";
 
 import TableBrowser from "./TableBrowser";
 
-const DatabaseLink = () => <div />;
-
-jest.mock("metabase/entities/databases", () => ({ Link: DatabaseLink }));
-
 describe("TableBrowser", () => {
   it("should render synced tables", () => {
     const tables = [
       getTable({ id: 1, name: "Orders", initial_sync_status: "complete" }),
     ];
 
-    render(
+    renderWithProviders(
       <TableBrowser
         tables={tables}
         getTableUrl={getTableUrl}
@@ -34,7 +30,7 @@ describe("TableBrowser", () => {
         getTable({ id: 1, name: "Orders", initial_sync_status: "incomplete" }),
       ];
 
-      render(
+      renderWithProviders(
         <TableBrowser
           database={database}
           tables={tables}
@@ -60,7 +56,7 @@ describe("TableBrowser", () => {
       getTable({ id: 1, name: "Orders", initial_sync_status: "aborted" }),
     ];
 
-    render(
+    renderWithProviders(
       <TableBrowser
         database={database}
         tables={tables}
diff --git a/frontend/src/metabase/components/BulkActionBar/BulkActionBar.styled.tsx b/frontend/src/metabase/components/BulkActionBar/BulkActionBar.styled.tsx
index 964fb5023920034a28f21a89035f32150c2ae3bc..78d6663b373111dca3190772e349e0fa51a1f9d4 100644
--- a/frontend/src/metabase/components/BulkActionBar/BulkActionBar.styled.tsx
+++ b/frontend/src/metabase/components/BulkActionBar/BulkActionBar.styled.tsx
@@ -49,10 +49,10 @@ export const BulkActionButton = styled(Button)`
 ` as unknown as typeof Button;
 
 export const BulkActionDangerButton = styled(BulkActionButton)`
-  color: ${color("danger")};
+  color: var(--mb-color-danger);
 
   :hover {
     color: ${color("white")};
-    background-color: ${color("danger")};
+    background-color: var(--mb-color-bg-error);
   }
 ` as unknown as typeof Button;
diff --git a/frontend/src/metabase/components/Card/Card.tsx b/frontend/src/metabase/components/Card/Card.tsx
index e1a05bd35abfc57814d5d90c008593c04ebff1f9..2f5c29e6e3b074eca6edd5cfff5563322f3c2833 100644
--- a/frontend/src/metabase/components/Card/Card.tsx
+++ b/frontend/src/metabase/components/Card/Card.tsx
@@ -1,3 +1,4 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
 import { color, alpha } from "metabase/lib/colors";
@@ -16,15 +17,25 @@ const Card = styled.div<CardProps>`
     ${props => (props.dark ? "transparent" : "var(--mb-color-bg-medium)")};
   ${props => props.dark && `color: white`};
   border-radius: 6px;
-  box-shadow: 0 7px 20px ${color("shadow")};
+  box-shadow: 0 7px 20px var(--mb-color-shadow);
   line-height: 24px;
+  ${({ hoverable, theme }) =>
+    hoverable &&
+    css`
+      &:hover {
+        box-shadow: 0 10px 22px ${alpha(theme.fn.themeColor("shadow"), 0.09)};
+      }
+    `};
   ${props =>
-    props.hoverable &&
-    `&:hover {
-    box-shadow: 0 10px 22px ${alpha(color("shadow"), 0.09)};
-  }`};
-  ${props => props.flat && `box-shadow: none;`};
-  ${props => props.compact && `box-shadow: 0 1px 2px ${color("shadow")};`};
+    props.flat &&
+    css`
+      box-shadow: none;
+    `};
+  ${props =>
+    props.compact &&
+    css`
+      box-shadow: 0 1px 2px var(--mb-color-shadow);
+    `};
 `;
 
 // eslint-disable-next-line import/no-default-export -- deprecated usage
diff --git a/frontend/src/metabase/components/DeleteModalWithConfirm/DeleteModalWithConfirm.styled.tsx b/frontend/src/metabase/components/DeleteModalWithConfirm/DeleteModalWithConfirm.styled.tsx
index 176d671b3a0f8e7ed718295ccdae0f3155956870..edfaa0fb70037bd6a90a4fc7883d53a710a15010 100644
--- a/frontend/src/metabase/components/DeleteModalWithConfirm/DeleteModalWithConfirm.styled.tsx
+++ b/frontend/src/metabase/components/DeleteModalWithConfirm/DeleteModalWithConfirm.styled.tsx
@@ -1,9 +1,8 @@
 import styled from "@emotion/styled";
 
 import CheckBox from "metabase/core/components/CheckBox";
-import { color } from "metabase/lib/colors";
 
 export const CheckboxLabel = styled(CheckBox.Label)`
-  color: ${color("danger")};
+  color: var(--mb-color-danger);
   font-size: 1.12em;
 `;
diff --git a/frontend/src/metabase/components/HelpCard/HelpCard.styled.tsx b/frontend/src/metabase/components/HelpCard/HelpCard.styled.tsx
index ecc80ec03ef144dd52b886e122911be54d83ca23..b996b08e7013a7944e3206207d8b2d1311b67b7b 100644
--- a/frontend/src/metabase/components/HelpCard/HelpCard.styled.tsx
+++ b/frontend/src/metabase/components/HelpCard/HelpCard.styled.tsx
@@ -11,7 +11,7 @@ const CardRootMixin = css`
   border: 1px solid var(--mb-color-border);
   border-radius: 0.375rem;
   background-color: ${color("white")};
-  box-shadow: 0 1px 6px ${color("shadow")};
+  box-shadow: 0 1px 6px var(--mb-color-shadow);
   box-sizing: border-box;
 `;
 
diff --git a/frontend/src/metabase/containers/Unsubscribe.styled.tsx b/frontend/src/metabase/containers/Unsubscribe.styled.tsx
index 7b38a7118405ac7f13d1bf7dfb5d5b97d15a6b9c..81d0570cf4e1747bde6dbf22a2503c89966bcd08 100644
--- a/frontend/src/metabase/containers/Unsubscribe.styled.tsx
+++ b/frontend/src/metabase/containers/Unsubscribe.styled.tsx
@@ -45,7 +45,7 @@ export const LayoutCard = styled.div`
   margin-top: 1.5rem;
   padding: 2.5rem 1.5rem;
   background-color: ${color("white")};
-  box-shadow: 0 1px 15px ${color("shadow")};
+  box-shadow: 0 1px 15px var(--mb-color-shadow);
   border-radius: 6px;
   min-height: 20rem;
   min-width: 35rem;
diff --git a/frontend/src/metabase/core/components/Button/Button.styled.tsx b/frontend/src/metabase/core/components/Button/Button.styled.tsx
index 4fc6e3c89629dde672ef7ddf8459d9159d514ae2..d085a9fc7e643d3c6339bfde22bd3564ff9eb21a 100644
--- a/frontend/src/metabase/core/components/Button/Button.styled.tsx
+++ b/frontend/src/metabase/core/components/Button/Button.styled.tsx
@@ -19,17 +19,17 @@ export const ButtonRoot = styled.button<ButtonRootProps>`
     }
   }
 
-  ${({ purple }) =>
+  ${({ purple, theme }) =>
     purple &&
     css`
       color: ${color("white")};
-      background-color: ${color("filter")};
-      border: 1px solid ${color("filter")};
+      background-color: var(--mb-color-filter);
+      border: 1px solid var(--mb-color-filter);
 
       &:hover {
         color: ${color("white")};
-        background-color: ${alpha("filter", 0.88)};
-        border-color: ${alpha("filter", 0.88)};
+        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/CheckBox/CheckBox.styled.tsx b/frontend/src/metabase/core/components/CheckBox/CheckBox.styled.tsx
index 46fc189f38f92b71bbd2221a970e97823d8968ad..644f2bc98d6451e2d9d3cbaef039bec84a280b83 100644
--- a/frontend/src/metabase/core/components/CheckBox/CheckBox.styled.tsx
+++ b/frontend/src/metabase/core/components/CheckBox/CheckBox.styled.tsx
@@ -40,7 +40,7 @@ export const CheckBoxContainer = styled.span<CheckBoxContainerProps>`
   opacity: ${props => (props.disabled ? "0.4" : "")};
 
   ${CheckBoxInput}:focus + & {
-    outline: 2px solid ${color("focus")};
+    outline: 2px solid var(--mb-color-focus);
   }
 
   ${CheckBoxInput}:focus:not(:focus-visible) + & {
diff --git a/frontend/src/metabase/core/components/FileInput/FileInput.styled.tsx b/frontend/src/metabase/core/components/FileInput/FileInput.styled.tsx
index 055ff88862098f9dd2b273a7544c8234c3ceb98b..b00938292951f5094cf340a7d323b3f1e6c93f36 100644
--- a/frontend/src/metabase/core/components/FileInput/FileInput.styled.tsx
+++ b/frontend/src/metabase/core/components/FileInput/FileInput.styled.tsx
@@ -44,7 +44,7 @@ export const InputButton = styled.span`
   user-select: none;
 
   ${InputField}:focus + & {
-    outline: 2px solid ${color("focus")};
+    outline: 2px solid var(--mb-color-focus);
   }
 
   ${InputField}:not(:focus-visible) + & {
diff --git a/frontend/src/metabase/core/components/FormErrorMessage/FormErrorMessage.styled.tsx b/frontend/src/metabase/core/components/FormErrorMessage/FormErrorMessage.styled.tsx
index da5c75733d3134cf0a5ae4736df05e07ec51a744..62a2bdd71486614e7c6b87fd14bca83985ce50eb 100644
--- a/frontend/src/metabase/core/components/FormErrorMessage/FormErrorMessage.styled.tsx
+++ b/frontend/src/metabase/core/components/FormErrorMessage/FormErrorMessage.styled.tsx
@@ -1,12 +1,10 @@
 import styled from "@emotion/styled";
 
-import { color } from "metabase/lib/colors";
-
 export interface ErrorMessageRootProps {
   inline?: boolean;
 }
 
 export const ErrorMessageRoot = styled.div<ErrorMessageRootProps>`
-  color: ${color("error")};
+  color: var(--mb-color-error);
   margin-top: ${props => !props.inline && "1rem"};
 `;
diff --git a/frontend/src/metabase/core/components/FormField/FormField.styled.tsx b/frontend/src/metabase/core/components/FormField/FormField.styled.tsx
index 38cde4feaf22a3faba47c6231f6322e5e584e623..7bd9eb37b6d417de4e87535f6c21b795d61c70df 100644
--- a/frontend/src/metabase/core/components/FormField/FormField.styled.tsx
+++ b/frontend/src/metabase/core/components/FormField/FormField.styled.tsx
@@ -55,7 +55,7 @@ export const FieldLabelContainer = styled.div<FieldLabelContainerProps>`
 `;
 
 export const FieldLabelError = styled.span`
-  color: ${color("error")};
+  color: var(--mb-color-error);
 `;
 
 export const FieldDescription = styled.div`
diff --git a/frontend/src/metabase/core/components/Input/Input.styled.tsx b/frontend/src/metabase/core/components/Input/Input.styled.tsx
index 2c6d61050ba86013747ffdb42d43bcb933e58a6c..3d34ceba132083149e3b6e7621b97e6439d5f77d 100644
--- a/frontend/src/metabase/core/components/Input/Input.styled.tsx
+++ b/frontend/src/metabase/core/components/Input/Input.styled.tsx
@@ -80,7 +80,7 @@ export const InputField = styled.input<InputProps>`
   ${props =>
     props.hasError &&
     css`
-      border-color: ${color("error")};
+      border-color: var(--mb-color-error);
     `};
 
   ${props =>
diff --git a/frontend/src/metabase/core/components/Radio/Radio.styled.tsx b/frontend/src/metabase/core/components/Radio/Radio.styled.tsx
index 2c32aee7f471875744aad2da447741198bbfcdef..16c7169f642070f7f4e14c820e4a6781e61ce424 100644
--- a/frontend/src/metabase/core/components/Radio/Radio.styled.tsx
+++ b/frontend/src/metabase/core/components/Radio/Radio.styled.tsx
@@ -73,7 +73,7 @@ export const RadioContainer = styled.div<RadioContainerProps>`
   }
 
   ${RadioInput}:focus + & {
-    outline: 2px solid ${color("focus")};
+    outline: 2px solid var(--mb-color-focus);
   }
 
   ${RadioInput}:focus:not(:focus-visible) + & {
diff --git a/frontend/src/metabase/core/components/SelectButton/SelectButton.styled.tsx b/frontend/src/metabase/core/components/SelectButton/SelectButton.styled.tsx
index 661398cc0897cae70835474b5fd38437d3d64d7d..29d24289a8550226e4f906b01417755af61f0519 100644
--- a/frontend/src/metabase/core/components/SelectButton/SelectButton.styled.tsx
+++ b/frontend/src/metabase/core/components/SelectButton/SelectButton.styled.tsx
@@ -27,7 +27,7 @@ export const SelectButtonRoot = styled.button<SelectButtonRootProps>`
   align-items: center;
   border: 1px solid
     ${({ hasValue, highlighted }) =>
-      hasValue && highlighted ? color("brand") : "var(--mb-color-border)"};
+      hasValue && highlighted ? color("brand") : color("border")};
   background-color: ${({ hasValue, highlighted }) =>
     hasValue && highlighted ? color("brand") : color("white")};
   border-radius: ${space(1)};
@@ -38,7 +38,7 @@ export const SelectButtonRoot = styled.button<SelectButtonRootProps>`
 
   &:focus {
     border-color: var(--mb-color-brand);
-    outline: 2px solid ${color("focus")};
+    outline: 2px solid var(--mb-color-focus);
   }
 
   &:not(:focus-visible) {
diff --git a/frontend/src/metabase/core/components/TextArea/TextArea.styled.tsx b/frontend/src/metabase/core/components/TextArea/TextArea.styled.tsx
index 9635d6974471c0571d14b11ac93d3cdc8a176a8f..9f4b208c02b33ccba1e37196f9df4e8c34d8b76e 100644
--- a/frontend/src/metabase/core/components/TextArea/TextArea.styled.tsx
+++ b/frontend/src/metabase/core/components/TextArea/TextArea.styled.tsx
@@ -39,7 +39,7 @@ export const TextAreaRoot = styled.textarea<TextAreaRootProps>`
   ${props =>
     props.hasError &&
     css`
-      border-color: ${color("error")};
+      border-color: var(--mb-color-error);
     `};
 
   ${props =>
diff --git a/frontend/src/metabase/core/components/Toggle/Toggle.styled.tsx b/frontend/src/metabase/core/components/Toggle/Toggle.styled.tsx
index 2720e21908ca00b3b2649f5dc488f8ad572778a9..de316de6178d018d4f759a992685c1481f92d2c7 100644
--- a/frontend/src/metabase/core/components/Toggle/Toggle.styled.tsx
+++ b/frontend/src/metabase/core/components/Toggle/Toggle.styled.tsx
@@ -61,7 +61,7 @@ export const ToggleRoot = styled.input<ToggleRootProps>`
     transform: translateX(${getTranslateX});
     background-color: ${color("white")};
     transition: transform 0.3s;
-    box-shadow: 2px 2px 6px ${color("shadow")};
+    box-shadow: 2px 2px 6px var(--mb-color-shadow);
   }
 
   ${focusOutlineStyle("brand")};
diff --git a/frontend/src/metabase/css/components/buttons.module.css b/frontend/src/metabase/css/components/buttons.module.css
index 14c65ec749f55fb15c1808c10e8a6c15fffbb237..04fd19c814f9333a4954d77f8243f1dfb25db59f 100644
--- a/frontend/src/metabase/css/components/buttons.module.css
+++ b/frontend/src/metabase/css/components/buttons.module.css
@@ -74,14 +74,14 @@
 
 .ButtonWarning {
   color: var(--color-text-white);
-  background: var(--color-error);
-  border: 1px solid var(--color-error);
+  background: var(--mb-color-error);
+  border: 1px solid var(--mb-color-error);
 }
 
 .ButtonWarning:hover {
   color: var(--color-text-white);
-  border-color: var(--color-error);
-  background-color: var(--color-error);
+  border-color: var(--mb-color-error);
+  background-color: var(--mb-color-error);
 }
 
 .ButtonCancel {
@@ -160,15 +160,15 @@
 }
 
 .ButtonDanger {
-  background-color: var(--color-error);
-  border-color: var(--color-error);
+  background-color: var(--mb-color-error);
+  border-color: var(--mb-color-error);
   color: var(--color-text-white);
 }
 
 .ButtonDanger:hover {
   color: white;
-  background-color: var(--color-error);
-  border-color: var(--color-error);
+  background-color: var(--mb-color-error);
+  border-color: var(--mb-color-error);
 }
 
 .ButtonSuccess {
diff --git a/frontend/src/metabase/css/components/form.module.css b/frontend/src/metabase/css/components/form.module.css
index 7ada2a2d7c91cf20510f5ef81f0b8c3c03a526d2..968c9f5c9cbf62709994eaeebea8c176f188d562 100644
--- a/frontend/src/metabase/css/components/form.module.css
+++ b/frontend/src/metabase/css/components/form.module.css
@@ -16,7 +16,7 @@
 }
 
 .FormField.FormFieldError {
-  color: var(--color-error);
+  color: var(--mb-color-error);
 }
 
 .FormLabel {
@@ -40,7 +40,7 @@
 }
 
 .FormField.FormFieldError .FormInput {
-  border-color: var(--color-error);
+  border-color: var(--mb-color-error);
 }
 
 .noFocus:focus {
diff --git a/frontend/src/metabase/css/core/bordered.module.css b/frontend/src/metabase/css/core/bordered.module.css
index 124314b0dacdca23b50544c722af782d7cb238d0..e2bcf3440e982a23b93f89bd556c74f11247303c 100644
--- a/frontend/src/metabase/css/core/bordered.module.css
+++ b/frontend/src/metabase/css/core/bordered.module.css
@@ -48,7 +48,7 @@
 }
 
 .borderError {
-  border-color: var(--color-error) !important;
+  border-color: var(--mb-color-error) !important;
 }
 
 .borderSuccess {
diff --git a/frontend/src/metabase/css/core/colors.module.css b/frontend/src/metabase/css/core/colors.module.css
index 34da09ddb26588d50605ed705407c1031d8ec464..42f5b7974af39e0f32c63d8391ca61677f36cca6 100644
--- a/frontend/src/metabase/css/core/colors.module.css
+++ b/frontend/src/metabase/css/core/colors.module.css
@@ -12,7 +12,8 @@
   --mb-color-brand-lighter: #eef6fc;
   --color-success: #84bb4c;
   --mb-color-summarize: #88bf4d;
-  --color-error: #ed6e6e;
+  --mb-color-error: #ed6e6e;
+  --mb-color-danger: #ed6e6e;
   --mb-color-text-dark: #4c5773;
   --mb-color-text-medium: #696e7b;
   --mb-color-text-light: #949aab;
@@ -22,10 +23,12 @@
   --mb-color-bg-medium: #edf2f5;
   --mb-color-bg-light: #f9fbfc;
   --mb-color-bg-white: #fff;
-  --mb-color-shadow: rgba(0, 0, 0, 0.13);
-  --mb-color-border: #eeecec;
   --mb-color-bg-error: #ed6e6e55;
   --mb-color-bg-night: #42484e;
+  --mb-color-shadow: rgba(0, 0, 0, 0.13);
+  --mb-color-border: #eeecec;
+  --mb-color-filter: #7172ad;
+  --mb-color-focus: #cbe2f7;
 }
 
 .textDefault {
@@ -44,11 +47,11 @@
 
 .textError,
 .textErrorHover {
-  color: var(--color-error);
+  color: var(--mb-color-error);
 }
 
 .bgErrorHover:hover {
-  background-color: var(--color-error);
+  background-color: var(--mb-color-error);
 }
 
 .bgErrorInput {
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 613710b402b40e13e539c408147a611c2c937592..8685bce99fac9e635331b47d58be788be1751f27 100644
--- a/frontend/src/metabase/dashboard/components/DashCard/DashCardParameterMapper/DashCardCardParameterMapper.styled.tsx
+++ b/frontend/src/metabase/dashboard/components/DashCard/DashCardParameterMapper/DashCardCardParameterMapper.styled.tsx
@@ -82,8 +82,8 @@ export const TargetButton = styled.div<{ variant: string }>`
   ${({ variant }) =>
     variant === "invalid" &&
     css`
-      border-color: ${color("error")};
-      background-color: ${color("error")};
+      border-color: var(--mb-color-error);
+      background-color: var(--mb-color-error);
       color: ${color("white")};
     `}
 `;
diff --git a/frontend/src/metabase/databases/components/DatabaseCacheScheduleField/DatabaseCacheScheduleField.styled.tsx b/frontend/src/metabase/databases/components/DatabaseCacheScheduleField/DatabaseCacheScheduleField.styled.tsx
index 6d4d858f5f39fd3ab05cb02df4929f44660c5567..4a21a3f37a0e982d119516d352f4756712f2237b 100644
--- a/frontend/src/metabase/databases/components/DatabaseCacheScheduleField/DatabaseCacheScheduleField.styled.tsx
+++ b/frontend/src/metabase/databases/components/DatabaseCacheScheduleField/DatabaseCacheScheduleField.styled.tsx
@@ -4,7 +4,7 @@ import { color } from "metabase/lib/colors";
 
 export const ScheduleOptionList = styled.div`
   border: 1px solid var(--mb-color-border);
-  box-shadow: 0 2px 2px ${color("shadow")};
+  box-shadow: 0 2px 2px var(--mb-color-shadow);
 `;
 
 interface ScheduleOptionRootProps {
diff --git a/frontend/src/metabase/databases/components/DatabaseEngineField/DatabaseEngineWidget.styled.tsx b/frontend/src/metabase/databases/components/DatabaseEngineField/DatabaseEngineWidget.styled.tsx
index 94fc5f2eb3fa715d98931aade5775d66fb37e873..b036c14c61da6cf1fc791e552d1092cc56894db0 100644
--- a/frontend/src/metabase/databases/components/DatabaseEngineField/DatabaseEngineWidget.styled.tsx
+++ b/frontend/src/metabase/databases/components/DatabaseEngineField/DatabaseEngineWidget.styled.tsx
@@ -37,7 +37,7 @@ export const EngineCardRoot = styled.li<EngineCardRootProps>`
   border-radius: 0.375rem;
   background-color: ${color("white")};
   cursor: pointer;
-  outline: ${props => (props.isActive ? `2px solid ${color("focus")}` : "")};
+  outline: ${props => props.isActive && `2px solid var(--mb-color-focus)`};
 
   &:hover {
     border-color: var(--mb-color-brand);
diff --git a/frontend/src/metabase/home/components/HomeCard/HomeCard.styled.tsx b/frontend/src/metabase/home/components/HomeCard/HomeCard.styled.tsx
index 62bce3541adbd20356f039d70b4431d54c89048f..9ecc276f34cd58bcea00045123587c1c59ba1237 100644
--- a/frontend/src/metabase/home/components/HomeCard/HomeCard.styled.tsx
+++ b/frontend/src/metabase/home/components/HomeCard/HomeCard.styled.tsx
@@ -14,7 +14,7 @@ export const CardRoot = styled(Link)`
   border: 1px solid var(--mb-color-border);
   border-radius: 0.5rem;
   background-color: ${color("white")};
-  box-shadow: 0 7px 20px ${color("shadow")};
+  box-shadow: 0 7px 20px var(--mb-color-shadow);
   max-width: 100%;
 
   ${breakpointMinSmall} {
@@ -26,6 +26,6 @@ export const CardRoot = styled(Link)`
   }
 
   &:hover {
-    box-shadow: 0 10px 22px ${alpha("shadow", 0.09)};
+    box-shadow: 0 10px 22px ${() => alpha("shadow", 0.09)};
   }
 `;
diff --git a/frontend/src/metabase/home/components/HomeHelpCard/HomeHelpCard.styled.tsx b/frontend/src/metabase/home/components/HomeHelpCard/HomeHelpCard.styled.tsx
index 9d497e50a9971e7baaef43006b5cced5001a0f04..9efcc02fb443ead50f4e83ce4b2c08507cc53802 100644
--- a/frontend/src/metabase/home/components/HomeHelpCard/HomeHelpCard.styled.tsx
+++ b/frontend/src/metabase/home/components/HomeHelpCard/HomeHelpCard.styled.tsx
@@ -10,7 +10,7 @@ export const CardRoot = styled(ExternalLink)`
   display: flex;
   align-items: center;
   padding: 1rem;
-  border: 1px solid ${color("focus")};
+  border: 1px solid var(--mb-color-focus);
   border-radius: 0.5rem;
 
   ${breakpointMinLarge} {
diff --git a/frontend/src/metabase/home/components/HomeXraySection/HomeXraySection.styled.tsx b/frontend/src/metabase/home/components/HomeXraySection/HomeXraySection.styled.tsx
index 564e3db0db6639423d714832d09c461b9f9e3edd..eac3e46e14a6a0faf806bbbaa5fe89aa3d14e95c 100644
--- a/frontend/src/metabase/home/components/HomeXraySection/HomeXraySection.styled.tsx
+++ b/frontend/src/metabase/home/components/HomeXraySection/HomeXraySection.styled.tsx
@@ -1,7 +1,6 @@
 import styled from "@emotion/styled";
 
 import Link from "metabase/core/components/Link";
-import { color } from "metabase/lib/colors";
 import { Icon } from "metabase/ui";
 
 export const SectionBody = styled.div`
@@ -17,7 +16,7 @@ export const DatabaseLink = styled(Link)`
 `;
 
 export const DatabaseLinkIcon = styled(Icon)`
-  color: ${color("focus")};
+  color: var(--mb-color-focus);
   width: 1rem;
   height: 1rem;
   margin-right: 0.25rem;
diff --git a/frontend/src/metabase/lib/colors/palette.ts b/frontend/src/metabase/lib/colors/palette.ts
index 75b6bee0d64beb1f682d762f2710247ed42d75c0..ee745ae2bf979bf573d6fae6e572420f810a4b4d 100644
--- a/frontend/src/metabase/lib/colors/palette.ts
+++ b/frontend/src/metabase/lib/colors/palette.ts
@@ -157,7 +157,7 @@ export const adjustBrightness = (
 export const getFocusColor = (
   colorName: string,
   palette: ColorPalette = colors,
-) => lighten(color(colorName, palette), 0.465);
+) => lighten(color(colorName, palette), 0.465); // #cbe2f7
 
 // We intentionally want to return white text color more frequently
 // https://www.notion.so/Maz-notes-on-viz-settings-67aed0e4ddcc4d4a83028992c4301820?d=513f4f7fa9c143cb874c7e4525dfb1e9#277d6b3eeb464eac86088abd144fde9e
diff --git a/frontend/src/metabase/metabot/components/MetabotPrompt/MetabotPrompt.styled.tsx b/frontend/src/metabase/metabot/components/MetabotPrompt/MetabotPrompt.styled.tsx
index 797abef61ad416cfbb6566f209d50f0716f2b82b..cf75cc8c5bd32f3d61ca484c4baaf35607073ac8 100644
--- a/frontend/src/metabase/metabot/components/MetabotPrompt/MetabotPrompt.styled.tsx
+++ b/frontend/src/metabase/metabot/components/MetabotPrompt/MetabotPrompt.styled.tsx
@@ -12,7 +12,7 @@ export const PromptSection = styled.div`
   align-items: center;
   border: 1px solid var(--mb-color-border);
   border-radius: 0.5rem;
-  box-shadow: 0 2px 2px ${color("shadow")};
+  box-shadow: 0 2px 2px var(--mb-color-shadow);
   background-color: var(--mb-color-bg-white);
 `;
 
diff --git a/frontend/src/metabase/nav/components/AdminNavbar/AdminNavbar.styled.tsx b/frontend/src/metabase/nav/components/AdminNavbar/AdminNavbar.styled.tsx
index d16ceda2d659a6b1af5524c956010db4431f3f69..5135249f8f165d7096b634f22ecfe08f4b530d1d 100644
--- a/frontend/src/metabase/nav/components/AdminNavbar/AdminNavbar.styled.tsx
+++ b/frontend/src/metabase/nav/components/AdminNavbar/AdminNavbar.styled.tsx
@@ -72,8 +72,8 @@ export const AdminExitLink = styled(Link)`
 
   &:hover {
     color: ${color("white")};
-    background-color: ${darken(color("filter"))};
-    border-color: ${darken(color("filter"))};
+    background-color: ${() => darken(color("filter"))};
+    border-color: ${() => darken(color("filter"))};
   }
 `;
 
diff --git a/frontend/src/metabase/nav/components/StoreLink/StoreLink.styled.tsx b/frontend/src/metabase/nav/components/StoreLink/StoreLink.styled.tsx
index cc02da4ca27ea3353e0f976632ec745ebbc32cd4..0d4a4f72889e0f24520aa0d4d65d23c0f9ad1bc7 100644
--- a/frontend/src/metabase/nav/components/StoreLink/StoreLink.styled.tsx
+++ b/frontend/src/metabase/nav/components/StoreLink/StoreLink.styled.tsx
@@ -22,7 +22,7 @@ export const StoreIconWrapper = styled.div`
 
   &:hover {
     color: ${color("white")};
-    background-color: ${darken(color("filter"))};
+    background-color: ${() => darken(color("filter"))};
   }
 
   @media (prefers-reduced-motion) {
diff --git a/frontend/src/metabase/parameters/components/ParameterSettings/ParameterSettings.styled.tsx b/frontend/src/metabase/parameters/components/ParameterSettings/ParameterSettings.styled.tsx
index 3c50987039734679971e3ebb400d444c32414aee..c31ea96ae5e2c1eaf3205de42fc53485e43c380e 100644
--- a/frontend/src/metabase/parameters/components/ParameterSettings/ParameterSettings.styled.tsx
+++ b/frontend/src/metabase/parameters/components/ParameterSettings/ParameterSettings.styled.tsx
@@ -13,7 +13,7 @@ export const SettingLabel = styled.label`
 
 export const SettingLabelError = styled.span`
   margin: 0 0.5rem;
-  color: ${color("error")};
+  color: var(--mb-color-error);
 `;
 
 export const SettingValueWidget = styled(ParameterValueWidget)`
diff --git a/frontend/src/metabase/parameters/components/ValuesSourceModal/ValuesSourceTypeModal.styled.tsx b/frontend/src/metabase/parameters/components/ValuesSourceModal/ValuesSourceTypeModal.styled.tsx
index 54c66b318f178f87a04fe15fb730cdbb2037b2b5..0c50c1442c7266d8fe3570182dc0ac92a0cfa615 100644
--- a/frontend/src/metabase/parameters/components/ValuesSourceModal/ValuesSourceTypeModal.styled.tsx
+++ b/frontend/src/metabase/parameters/components/ValuesSourceModal/ValuesSourceTypeModal.styled.tsx
@@ -44,7 +44,7 @@ export const ModalHelpMessage = styled.div`
 export const ModalErrorMessage = styled.div`
   color: ${color("text-medium")};
   padding: 1rem;
-  border: 1px solid ${color("error")};
+  border: 1px solid var(--mb-color-error);
   border-radius: 0.5rem;
 `;
 
diff --git a/frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.styled.tsx b/frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.styled.tsx
index 4d53471031447a716b47c7c2c73a17fa8fa99c41..5bdf8cb17c6d67111cb67af3f6bd0e5c1e5d86c9 100644
--- a/frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.styled.tsx
+++ b/frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.styled.tsx
@@ -35,7 +35,7 @@ export const Root = styled.div<{
     css`
       border: 1px solid var(--mb-color-border);
       border-radius: 8px;
-      box-shadow: 0 2px 2px ${color("shadow")};
+      box-shadow: 0 2px 2px var(--mb-color-shadow);
     `}
 `;
 
diff --git a/frontend/src/metabase/public/components/EmbedModal/SelectEmbedTypePane/icons/StaticEmbedIcon/StaticEmbedIcon.styled.tsx b/frontend/src/metabase/public/components/EmbedModal/SelectEmbedTypePane/icons/StaticEmbedIcon/StaticEmbedIcon.styled.tsx
index 3a6c18eb71cf13db33d00d54d73b379bc6b34bc6..141747dc6163cdb2869d8302d49ca7dc639567fa 100644
--- a/frontend/src/metabase/public/components/EmbedModal/SelectEmbedTypePane/icons/StaticEmbedIcon/StaticEmbedIcon.styled.tsx
+++ b/frontend/src/metabase/public/components/EmbedModal/SelectEmbedTypePane/icons/StaticEmbedIcon/StaticEmbedIcon.styled.tsx
@@ -1,25 +1,21 @@
-import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
 import { SharingPaneButtonContent } from "../../SharingPaneButton/SharingPaneButton.styled";
 
 export const StaticEmbedIconRoot = styled.svg`
-  ${({ theme }) =>
-    css`
-      color: var(--mb-color-bg-medium);
+  color: var(--mb-color-bg-medium);
 
-      .innerFill {
-        fill: var(--mb-color-bg-dark);
-        fill-opacity: 0.5;
-      }
+  .innerFill {
+    fill: var(--mb-color-bg-dark);
+    fill-opacity: 0.5;
+  }
 
-      ${SharingPaneButtonContent}:hover & {
-        color: ${theme.fn.themeColor("focus")};
+  ${SharingPaneButtonContent}:hover & {
+    color: var(--mb-color-focus);
 
-        .innerFill {
-          fill: var(--mb-color-brand);
-          fill-opacity: 1;
-        }
-      }
-    `}
+    .innerFill {
+      fill: var(--mb-color-brand);
+      fill-opacity: 1;
+    }
+  }
 `;
diff --git a/frontend/src/metabase/pulse/components/RecipientPicker.styled.tsx b/frontend/src/metabase/pulse/components/RecipientPicker.styled.tsx
index 1b35566f3d8648aef51d7e0ae942810b353d3e95..dabd0f3c0986eb8475975970f02088904f9f418a 100644
--- a/frontend/src/metabase/pulse/components/RecipientPicker.styled.tsx
+++ b/frontend/src/metabase/pulse/components/RecipientPicker.styled.tsx
@@ -1,8 +1,6 @@
 import styled from "@emotion/styled";
 
-import { color } from "metabase/lib/colors";
-
 export const ErrorMessage = styled.div`
-  color: ${color("error")};
+  color: var(--mb-color-error);
   margin-top: 0.5rem;
 `;
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 2be8b094ea375c3832a61edad4d1bdaee2f3fd01..a147fe0608ab1a97caf9e90de08d704d2a7ea194 100644
--- a/frontend/src/metabase/query_builder/components/NativeQueryEditor/NativeQueryEditor.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/NativeQueryEditor/NativeQueryEditor.styled.tsx
@@ -6,7 +6,7 @@ import { ResizableBox } from "react-resizable";
 import QueryBuilderS from "metabase/css/query_builder.module.css";
 import { color, darken } from "metabase/lib/colors";
 
-const aceEditorStyle = css`
+const getAceEditorStyles = () => css`
   .ace_editor {
     height: 100%;
     background-color: var(--mb-color-bg-light);
@@ -31,7 +31,7 @@ const aceEditorStyle = css`
 
   .ace_nomatch {
     border-radius: 5px;
-    outline: 1px solid ${color("error")};
+    outline: 1px solid var(--mb-color-error);
   }
 
   .ace_searchbtn {
@@ -131,7 +131,7 @@ export const NativeQueryEditorRoot = styled.div`
   width: 100%;
   background-color: var(--mb-color-bg-light);
 
-  ${aceEditorStyle}
+  ${() => getAceEditorStyles()}
 
   .${QueryBuilderS.GuiBuilderData} {
     border-right: none;
diff --git a/frontend/src/metabase/query_builder/components/VisualizationError/VisualizationError.styled.tsx b/frontend/src/metabase/query_builder/components/VisualizationError/VisualizationError.styled.tsx
index b850a290b7e15ca9cb0ba9ffbee6bf1fda6fad4d..f8a72e9d85da038f7a2d9f003485e1e76c4aa0e2 100644
--- a/frontend/src/metabase/query_builder/components/VisualizationError/VisualizationError.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/VisualizationError/VisualizationError.styled.tsx
@@ -33,7 +33,7 @@ export const QueryErrorTitle = styled.div`
 
 export const QueryErrorIcon = styled(Icon)`
   flex: 0 0 auto;
-  color: ${color("error")};
+  color: var(--mb-color-error);
   width: 1rem;
   height: 1rem;
   margin-right: 0.75rem;
diff --git a/frontend/src/metabase/query_builder/components/dataref/NodeList.styled.tsx b/frontend/src/metabase/query_builder/components/dataref/NodeList.styled.tsx
index 5553737187f4a729063d682908d2cbbb3af9326f..3d3514843a347d63af23cc1dc42ba6ab3e6a53f0 100644
--- a/frontend/src/metabase/query_builder/components/dataref/NodeList.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/dataref/NodeList.styled.tsx
@@ -20,7 +20,7 @@ export const NodeListIcon = styled(Icon)`
 `;
 
 export const NodeListItemIcon = styled(Icon)`
-  color: ${color("focus")};
+  color: var(--mb-color-focus);
   margin-top: 1px;
   width: ${space(2)};
 `;
diff --git a/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield/ExpressionEditorTextfield.styled.tsx b/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield/ExpressionEditorTextfield.styled.tsx
index 7da2cd31269cced1ec8fb31f4d7ea7030908fede..dd53f4145213cc3a879631f1bcbb947b43de222f 100644
--- a/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield/ExpressionEditorTextfield.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield/ExpressionEditorTextfield.styled.tsx
@@ -27,7 +27,7 @@ export const EditorContainer = styled.div<{
   ${({ hasError }) =>
     hasError &&
     css`
-      border-color: ${color("error")};
+      border-color: var(--mb-color-error);
     `}
 
   @media (prefers-reduced-motion) {
@@ -74,7 +74,7 @@ export const EditorContainer = styled.div<{
 
   .ace_content .error {
     position: absolute;
-    border-bottom: 2px solid ${color("error")};
+    border-bottom: 2px solid var(--mb-color-error);
     border-radius: 0px;
     background-color: var(--mb-color-bg-error);
   }
@@ -92,7 +92,7 @@ export const EditorEqualsSign = styled.div`
 `;
 
 export const ErrorMessageContainer = styled.div`
-  color: ${color("error")};
+  color: var(--mb-color-error);
   margin: 0.5rem 0;
   white-space: pre-wrap;
 `;
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 186fe4eec8834c42e19eec53f2b70f87222d588a..bd1eb2de54625877b8f512ee44eb68596607d616 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
@@ -29,7 +29,7 @@ export const ContainerLabel = styled.div<ContainerLabelProps>`
 
 export const ErrorSpan = styled.span`
   margin: 0 0.5rem;
-  color: ${color("error")};
+  color: var(--mb-color-error);
 `;
 
 interface InputContainerProps {
diff --git a/frontend/src/metabase/query_builder/components/view/sidebars/ModelCacheManagementSection/ModelCacheManagementSection.styled.tsx b/frontend/src/metabase/query_builder/components/view/sidebars/ModelCacheManagementSection/ModelCacheManagementSection.styled.tsx
index f5292d0287bb6047f0e8aed31e8967cd8b57ed19..6b2577c3d596ebf16f9b0f375ce4e8217b6d9761 100644
--- a/frontend/src/metabase/query_builder/components/view/sidebars/ModelCacheManagementSection/ModelCacheManagementSection.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/view/sidebars/ModelCacheManagementSection/ModelCacheManagementSection.styled.tsx
@@ -34,7 +34,7 @@ export const IconButton = styled.button`
 `;
 
 export const ErrorIcon = styled(Icon)`
-  color: ${color("error")};
+  color: var(--mb-color-error);
   margin-top: 1px;
   margin-left: 4px;
 `;
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 0551ef25692bf2994be4638b8e76f8bf2ad2dfb7..3f0caff9f321dc1db95facc3f4b9f3cb77c17944 100644
--- a/frontend/src/metabase/querying/components/FilterPanel/FilterPanelButton/FilterPanelButton.styled.tsx
+++ b/frontend/src/metabase/querying/components/FilterPanel/FilterPanelButton/FilterPanelButton.styled.tsx
@@ -24,7 +24,7 @@ export const FilterButton = styled(Button, {
 
   &:hover {
     color: ${color("white")};
-    background-color: ${color("filter")};
+    background-color: var(--mb-color-filter);
   }
 
   @media (prefers-reduced-motion) {
diff --git a/frontend/src/metabase/querying/components/FilterPicker/FilterColumnPicker/FilterColumnPicker.styled.tsx b/frontend/src/metabase/querying/components/FilterPicker/FilterColumnPicker/FilterColumnPicker.styled.tsx
index 1762f9d1043d7ab47165f2fc1ef55f481bfeba73..7178143e0362ea5e3b69727f982f6e023d1fd0ce 100644
--- a/frontend/src/metabase/querying/components/FilterPicker/FilterColumnPicker/FilterColumnPicker.styled.tsx
+++ b/frontend/src/metabase/querying/components/FilterPicker/FilterColumnPicker/FilterColumnPicker.styled.tsx
@@ -1,12 +1,11 @@
 import styled from "@emotion/styled";
 
 import AccordionList from "metabase/core/components/AccordionList";
-import { color } from "metabase/lib/colors";
 
 import { MAX_WIDTH, MIN_WIDTH } from "../constants";
 
 export const StyledAccordionList = styled(AccordionList)`
-  color: ${color("filter")};
+  color: var(--mb-color-filter);
   min-width: ${MIN_WIDTH}px;
   max-width: ${MAX_WIDTH}px;
 `;
diff --git a/frontend/src/metabase/setup/components/DataUsageStep/DataUsageStep.styled.tsx b/frontend/src/metabase/setup/components/DataUsageStep/DataUsageStep.styled.tsx
index d9293450e8e5859cfb74cb22d01170ec41c2cf6d..4e614ee7e867776a0edb9aa076a5e3e98a05f68c 100644
--- a/frontend/src/metabase/setup/components/DataUsageStep/DataUsageStep.styled.tsx
+++ b/frontend/src/metabase/setup/components/DataUsageStep/DataUsageStep.styled.tsx
@@ -34,6 +34,6 @@ export const StepInfoList = styled.ul`
 `;
 
 export const StepError = styled.div`
-  color: ${color("error")};
+  color: var(--mb-color-error);
   margin-top: 0.5rem;
 `;
diff --git a/frontend/src/metabase/setup/components/LanguageStep/LanguageStep.styled.tsx b/frontend/src/metabase/setup/components/LanguageStep/LanguageStep.styled.tsx
index 054bfd0e45600738755be8ff8968febac995d116..76474802484f1deeecf18b1ca32bbee8fe87c470 100644
--- a/frontend/src/metabase/setup/components/LanguageStep/LanguageStep.styled.tsx
+++ b/frontend/src/metabase/setup/components/LanguageStep/LanguageStep.styled.tsx
@@ -46,7 +46,7 @@ export const LocaleButton = styled.span<LocaleContainerProps>`
   }
 
   ${LocaleInput}:focus + & {
-    outline: 2px solid ${color("focus")};
+    outline: 2px solid var(--mb-color-focus);
   }
 
   ${LocaleInput}:focus:not(:focus-visible) + & {
diff --git a/frontend/src/metabase/status/components/StatusLarge/StatusLarge.styled.tsx b/frontend/src/metabase/status/components/StatusLarge/StatusLarge.styled.tsx
index b5ec1fe235d7567d7d12acd78eb66ba04008c922..4890f8fa06eb8bc52203d1939952816f8f77aa5d 100644
--- a/frontend/src/metabase/status/components/StatusLarge/StatusLarge.styled.tsx
+++ b/frontend/src/metabase/status/components/StatusLarge/StatusLarge.styled.tsx
@@ -8,7 +8,7 @@ export const StatusRoot = styled.div`
   width: 16rem;
   border-radius: 6px;
   background-color: ${color("white")};
-  box-shadow: 0 1px 12px ${color("shadow")};
+  box-shadow: 0 1px 12px var(--mb-color-shadow);
   overflow: hidden;
   margin-top: 1rem;
 `;
diff --git a/frontend/src/metabase/status/components/StatusSmall/StatusSmall.styled.tsx b/frontend/src/metabase/status/components/StatusSmall/StatusSmall.styled.tsx
index 17e497ef25999cdc49ea2609b0d6fc7150a407f9..2bacc7a6081f75c7df7087af8d7ba143f8d3a3bd 100644
--- a/frontend/src/metabase/status/components/StatusSmall/StatusSmall.styled.tsx
+++ b/frontend/src/metabase/status/components/StatusSmall/StatusSmall.styled.tsx
@@ -64,7 +64,7 @@ export const StatusContainer = styled.div<Props>`
   border: 0.25rem solid ${getBorderColor};
   border-radius: 50%;
   background-color: ${() => lighten("brand", 0.6)};
-  box-shadow: 0 1px 12px ${color("shadow")};
+  box-shadow: 0 1px 12px var(--mb-color-shadow);
 `;
 
 export const StatusIconContainer = styled.div`
diff --git a/frontend/src/metabase/styled-components/containers/GlobalStyles/GlobalStyles.tsx b/frontend/src/metabase/styled-components/containers/GlobalStyles/GlobalStyles.tsx
index e9efc19a6330dcc26cbf0fd1bf2b94a3f2812b46..415bead1bc50d3cd6bc59d82f16eb780b6523dd2 100644
--- a/frontend/src/metabase/styled-components/containers/GlobalStyles/GlobalStyles.tsx
+++ b/frontend/src/metabase/styled-components/containers/GlobalStyles/GlobalStyles.tsx
@@ -32,6 +32,10 @@ export const GlobalStyles = (): JSX.Element => {
       --mb-color-bg-night: ${color("bg-night")};
       --mb-color-bg-white: ${color("bg-white")};
       --mb-color-border: ${color("border")};
+      --mb-color-danger: ${color("danger")};
+      --mb-color-error: ${color("error")};
+      --mb-color-filter: ${color("filter")};
+      --mb-color-shadow: ${color("shadow")};
     }
 
     ${defaultFontFiles({ baseUrl: sitePath })}
diff --git a/frontend/src/metabase/timelines/common/components/FormArchiveButton/FormDangerButton.styled.tsx b/frontend/src/metabase/timelines/common/components/FormArchiveButton/FormDangerButton.styled.tsx
index 55e6e8f14bc5ed9cce36de5464c5c73a8c169fed..51a2eb1ab1a095d2b1219d7d7f37d8eda7b0e809 100644
--- a/frontend/src/metabase/timelines/common/components/FormArchiveButton/FormDangerButton.styled.tsx
+++ b/frontend/src/metabase/timelines/common/components/FormArchiveButton/FormDangerButton.styled.tsx
@@ -1,15 +1,14 @@
 import styled from "@emotion/styled";
 
 import Button from "metabase/core/components/Button/Button";
-import { color } from "metabase/lib/colors";
 
 export const ArchiveButton = styled(Button)`
-  color: ${color("danger")};
+  color: var(--mb-color-danger);
   padding-left: 0;
   padding-right: 0;
 
   &:hover {
-    color: ${color("danger")};
+    color: var(--mb-color-danger);
     background-color: transparent;
   }
 `;
diff --git a/frontend/src/metabase/visualizations/components/ClickActions/ClickActionControl.styled.tsx b/frontend/src/metabase/visualizations/components/ClickActions/ClickActionControl.styled.tsx
index b470b7cf48e63d631892fc9b6aa772f95028a6e4..9e0613f98b0f9ed311b48092317b99f8fd92cbc5 100644
--- a/frontend/src/metabase/visualizations/components/ClickActions/ClickActionControl.styled.tsx
+++ b/frontend/src/metabase/visualizations/components/ClickActions/ClickActionControl.styled.tsx
@@ -31,7 +31,7 @@ export const TokenFilterActionButton = styled(Button)`
   font-size: 1.25rem;
   line-height: 1rem;
   padding: 0.125rem 0.85rem 0.25rem;
-  border: 1px solid ${({ theme }) => theme.fn.themeColor("focus")};
+  border: 1px solid var(--mb-color-focus);
   border-radius: 100px;
 
   &:hover {
diff --git a/frontend/src/metabase/visualizations/visualizations/LinkViz/LinkViz.styled.tsx b/frontend/src/metabase/visualizations/visualizations/LinkViz/LinkViz.styled.tsx
index 17d7884d1511e08aaab3110073874a0332165567..e307cf13e06b0d8995e0133dcdbd72da481dcdfc 100644
--- a/frontend/src/metabase/visualizations/visualizations/LinkViz/LinkViz.styled.tsx
+++ b/frontend/src/metabase/visualizations/visualizations/LinkViz/LinkViz.styled.tsx
@@ -3,7 +3,6 @@ import styled from "@emotion/styled";
 import BaseExternalLink from "metabase/core/components/ExternalLink";
 import Input from "metabase/core/components/Input";
 import Link from "metabase/core/components/Link";
-import { color } from "metabase/lib/colors";
 import { RecentsList } from "metabase/nav/components/search/RecentsList";
 import { Icon } from "metabase/ui";
 
@@ -76,7 +75,7 @@ const searchResultsStyles = `
 
   border: 1px solid var(--mb-color-border);
   border-radius: 6px;
-  box-shadow: 0 7px 20px ${color("shadow")};
+  box-shadow: 0 7px 20px var(--mb-color-shadow);
   pointer-events: all;
 `;