diff --git a/frontend/__snapshots__/components-sharing--dashboard-sharing--dark.png b/frontend/__snapshots__/components-sharing--dashboard-sharing--dark.png index c002a3f9208..f11097ff399 100644 Binary files a/frontend/__snapshots__/components-sharing--dashboard-sharing--dark.png and b/frontend/__snapshots__/components-sharing--dashboard-sharing--dark.png differ diff --git a/frontend/__snapshots__/components-sharing--dashboard-sharing-licensed--dark.png b/frontend/__snapshots__/components-sharing--dashboard-sharing-licensed--dark.png index df56cf4d778..1db1edd6d9d 100644 Binary files a/frontend/__snapshots__/components-sharing--dashboard-sharing-licensed--dark.png and b/frontend/__snapshots__/components-sharing--dashboard-sharing-licensed--dark.png differ diff --git a/frontend/__snapshots__/components-sharing--insight-sharing--dark.png b/frontend/__snapshots__/components-sharing--insight-sharing--dark.png index 3a4c96dd34a..6e40bcdb705 100644 Binary files a/frontend/__snapshots__/components-sharing--insight-sharing--dark.png and b/frontend/__snapshots__/components-sharing--insight-sharing--dark.png differ diff --git a/frontend/__snapshots__/components-sharing--insight-sharing-licensed--dark.png b/frontend/__snapshots__/components-sharing--insight-sharing-licensed--dark.png index d92f09a21a5..425db32962a 100644 Binary files a/frontend/__snapshots__/components-sharing--insight-sharing-licensed--dark.png and b/frontend/__snapshots__/components-sharing--insight-sharing-licensed--dark.png differ diff --git a/frontend/__snapshots__/components-sharing--recording-sharing-licensed--dark.png b/frontend/__snapshots__/components-sharing--recording-sharing-licensed--dark.png index b00d08f223b..3511f7ab3b8 100644 Binary files a/frontend/__snapshots__/components-sharing--recording-sharing-licensed--dark.png and b/frontend/__snapshots__/components-sharing--recording-sharing-licensed--dark.png differ diff --git a/frontend/__snapshots__/components-subscriptions--subscription-no-integrations--dark.png b/frontend/__snapshots__/components-subscriptions--subscription-no-integrations--dark.png index 4772677f56b..501f48cba41 100644 Binary files a/frontend/__snapshots__/components-subscriptions--subscription-no-integrations--dark.png and b/frontend/__snapshots__/components-subscriptions--subscription-no-integrations--dark.png differ diff --git a/frontend/__snapshots__/components-subscriptions--subscriptions--dark.png b/frontend/__snapshots__/components-subscriptions--subscriptions--dark.png index ce4600ab4f5..0408aaeab5b 100644 Binary files a/frontend/__snapshots__/components-subscriptions--subscriptions--dark.png and b/frontend/__snapshots__/components-subscriptions--subscriptions--dark.png differ diff --git a/frontend/__snapshots__/components-subscriptions--subscriptions-edit--dark.png b/frontend/__snapshots__/components-subscriptions--subscriptions-edit--dark.png index 7f7796ee2cc..ed3da89ce74 100644 Binary files a/frontend/__snapshots__/components-subscriptions--subscriptions-edit--dark.png and b/frontend/__snapshots__/components-subscriptions--subscriptions-edit--dark.png differ diff --git a/frontend/__snapshots__/components-subscriptions--subscriptions-empty--dark.png b/frontend/__snapshots__/components-subscriptions--subscriptions-empty--dark.png index c944f916e0e..a7f58095675 100644 Binary files a/frontend/__snapshots__/components-subscriptions--subscriptions-empty--dark.png and b/frontend/__snapshots__/components-subscriptions--subscriptions-empty--dark.png differ diff --git a/frontend/__snapshots__/components-subscriptions--subscriptions-new--dark.png b/frontend/__snapshots__/components-subscriptions--subscriptions-new--dark.png index 3331c8cb751..cd2029002b1 100644 Binary files a/frontend/__snapshots__/components-subscriptions--subscriptions-new--dark.png and b/frontend/__snapshots__/components-subscriptions--subscriptions-new--dark.png differ diff --git a/frontend/__snapshots__/components-subscriptions--subscriptions-unavailable--dark.png b/frontend/__snapshots__/components-subscriptions--subscriptions-unavailable--dark.png index d646617a6d3..c5af4252037 100644 Binary files a/frontend/__snapshots__/components-subscriptions--subscriptions-unavailable--dark.png and b/frontend/__snapshots__/components-subscriptions--subscriptions-unavailable--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-colors--all-pre-thousand-color-options--dark.png b/frontend/__snapshots__/lemon-ui-colors--all-pre-thousand-color-options--dark.png index 24922cacca5..a0463997327 100644 Binary files a/frontend/__snapshots__/lemon-ui-colors--all-pre-thousand-color-options--dark.png and b/frontend/__snapshots__/lemon-ui-colors--all-pre-thousand-color-options--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-colors--all-pre-thousand-color-options--light.png b/frontend/__snapshots__/lemon-ui-colors--all-pre-thousand-color-options--light.png index 2c204b9ffd1..7c61a8f3e29 100644 Binary files a/frontend/__snapshots__/lemon-ui-colors--all-pre-thousand-color-options--light.png and b/frontend/__snapshots__/lemon-ui-colors--all-pre-thousand-color-options--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-colors--color-palette--dark.png b/frontend/__snapshots__/lemon-ui-colors--color-palette--dark.png index 74150138e8b..9ef8478d28e 100644 Binary files a/frontend/__snapshots__/lemon-ui-colors--color-palette--dark.png and b/frontend/__snapshots__/lemon-ui-colors--color-palette--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-colors--color-palette--light.png b/frontend/__snapshots__/lemon-ui-colors--color-palette--light.png index 62cf1c2370d..0e960169f58 100644 Binary files a/frontend/__snapshots__/lemon-ui-colors--color-palette--light.png and b/frontend/__snapshots__/lemon-ui-colors--color-palette--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-dialog--customised--dark.png b/frontend/__snapshots__/lemon-ui-lemon-dialog--customised--dark.png index f1735554514..5c72b519fcd 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-dialog--customised--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-dialog--customised--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-dialog--form--dark.png b/frontend/__snapshots__/lemon-ui-lemon-dialog--form--dark.png index c38df6011b2..fdb46940f28 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-dialog--form--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-dialog--form--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-dialog--minimal--dark.png b/frontend/__snapshots__/lemon-ui-lemon-dialog--minimal--dark.png index 03a8dce7e01..b3a3d64af5b 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-dialog--minimal--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-dialog--minimal--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-dialog--template--dark.png b/frontend/__snapshots__/lemon-ui-lemon-dialog--template--dark.png index 0faffdda5fd..f0f20f6ff64 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-dialog--template--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-dialog--template--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-field--fields-with-kea-form--dark.png b/frontend/__snapshots__/lemon-ui-lemon-field--fields-with-kea-form--dark.png index 5aeb67eab85..35cf11d2e0e 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-field--fields-with-kea-form--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-field--fields-with-kea-form--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-modal--inline--dark.png b/frontend/__snapshots__/lemon-ui-lemon-modal--inline--dark.png index 42760aa1172..ef01e5d8e1c 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-modal--inline--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-modal--inline--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-modal--with-custom-content--dark.png b/frontend/__snapshots__/lemon-ui-lemon-modal--with-custom-content--dark.png index 4328a4aa9b0..e9154436947 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-modal--with-custom-content--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-modal--with-custom-content--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-skeleton--dark-background--dark.png b/frontend/__snapshots__/lemon-ui-lemon-skeleton--dark-background--dark.png index 06564e56ff1..d891e117bb3 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-skeleton--dark-background--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-skeleton--dark-background--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-spinner--text-colored--dark.png b/frontend/__snapshots__/lemon-ui-spinner--text-colored--dark.png index 6db496ce01e..1fa9450592b 100644 Binary files a/frontend/__snapshots__/lemon-ui-spinner--text-colored--dark.png and b/frontend/__snapshots__/lemon-ui-spinner--text-colored--dark.png differ diff --git a/frontend/__snapshots__/scenes-app-dashboards--create-template--dark.png b/frontend/__snapshots__/scenes-app-dashboards--create-template--dark.png index ed2947ef9fd..5d946566e5e 100644 Binary files a/frontend/__snapshots__/scenes-app-dashboards--create-template--dark.png and b/frontend/__snapshots__/scenes-app-dashboards--create-template--dark.png differ diff --git a/frontend/__snapshots__/scenes-app-dashboards--edit-template--dark.png b/frontend/__snapshots__/scenes-app-dashboards--edit-template--dark.png index 0ff80daf821..58cfb63c80a 100644 Binary files a/frontend/__snapshots__/scenes-app-dashboards--edit-template--dark.png and b/frontend/__snapshots__/scenes-app-dashboards--edit-template--dark.png differ diff --git a/frontend/src/layout/navigation-3000/Navigation.scss b/frontend/src/layout/navigation-3000/Navigation.scss index 2128979356e..e1408ece058 100644 --- a/frontend/src/layout/navigation-3000/Navigation.scss +++ b/frontend/src/layout/navigation-3000/Navigation.scss @@ -140,13 +140,13 @@ left: 0; font-size: 1.25rem; line-height: 0.5625rem; - color: var(--default); + color: var(--text-3000); text-align: center; content: '•'; } .LemonButton__icon { - color: var(--default); + color: var(--text-3000); transform: translateY(-0.25rem); } } @@ -183,7 +183,7 @@ margin: 0; overflow: hidden; line-height: inherit; - color: var(--default); + color: var(--text-3000); text-overflow: ellipsis; } @@ -524,7 +524,7 @@ inset: 0 0 -1px; pointer-events: none; content: ''; - border: 1px solid var(--default); + border: 1px solid var(--border-3000); } } @@ -546,7 +546,7 @@ height: 100%; padding: 0 calc(var(--sidebar-horizontal-padding) + 2.5rem) 0 var(--sidebar-list-item-inset); font-size: 0.75rem; - color: var(--default); + color: var(--text-3000); background: none; outline: none; } @@ -556,7 +556,7 @@ inset: 0 0 -1px; pointer-events: none; content: ''; - border: 1px solid var(--default); + border: 1px solid var(--border); .SidebarListItem[aria-invalid='true'] & { border-color: var(--danger); diff --git a/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss b/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss index e32a279542f..8ee3e44a802 100644 --- a/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss +++ b/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss @@ -6,7 +6,7 @@ height: 1.25rem; padding: 0.125rem 0.25rem; font-size: 0.75rem; - color: var(--default); + color: var(--text-3000); text-transform: capitalize; user-select: none; background: var(--accent-3000); diff --git a/frontend/src/layout/navigation-3000/components/TopBar.scss b/frontend/src/layout/navigation-3000/components/TopBar.scss index 34bca649b81..a557ca3ab1a 100644 --- a/frontend/src/layout/navigation-3000/components/TopBar.scss +++ b/frontend/src/layout/navigation-3000/components/TopBar.scss @@ -79,7 +79,7 @@ flex-shrink: 0; align-items: center; overflow: hidden; - color: var(--default); + color: var(--text-3000); white-space: pre; cursor: default; diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelSupport.tsx b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelSupport.tsx index 069bc4710b6..dc0d55a443d 100644 --- a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelSupport.tsx +++ b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelSupport.tsx @@ -168,12 +168,12 @@ export const SidePanelSupport = (): JSX.Element => { >
{product.icon} - + {product.name}
- +
diff --git a/frontend/src/lib/components/AddToDashboard/AddToDashboardModal.tsx b/frontend/src/lib/components/AddToDashboard/AddToDashboardModal.tsx index e69da14b09f..088787c302c 100644 --- a/frontend/src/lib/components/AddToDashboard/AddToDashboardModal.tsx +++ b/frontend/src/lib/components/AddToDashboard/AddToDashboardModal.tsx @@ -163,7 +163,7 @@ export function AddToDashboardModal({ onChange={(newValue) => setSearchQuery(newValue)} />
- This insight is referenced on {currentDashboards.length}{' '} + This insight is referenced on {currentDashboards.length}{' '} {pluralize(currentDashboards.length, 'dashboard', 'dashboards', false)}
{/* eslint-disable-next-line react/forbid-dom-props */} diff --git a/frontend/src/lib/components/BridgePage/BridgePage.scss b/frontend/src/lib/components/BridgePage/BridgePage.scss index cbaa3daa963..7ce6464937b 100644 --- a/frontend/src/lib/components/BridgePage/BridgePage.scss +++ b/frontend/src/lib/components/BridgePage/BridgePage.scss @@ -48,7 +48,7 @@ padding: 2rem; background-color: white; border-radius: var(--radius); - box-shadow: var(--shadow-elevation); + box-shadow: var(--shadow-elevation-3000); h2 { font-weight: bold; @@ -88,7 +88,7 @@ font-size: 0.8em; font-weight: 600; color: #fff; - background-color: var(--default); + background-color: var(--text-3000); border-radius: 0.75rem; opacity: 0; transition-timing-function: cubic-bezier(0.455, 0.03, 0.31, 1.585); @@ -100,7 +100,7 @@ margin-top: -10px; content: ' '; border: 10px solid transparent; - border-left-color: var(--default); + border-left-color: var(--text-3000); } &.BridgePage__left__message--enter { diff --git a/frontend/src/lib/components/Cards/CardMeta.scss b/frontend/src/lib/components/Cards/CardMeta.scss index 6a88569cf3b..20895658547 100644 --- a/frontend/src/lib/components/Cards/CardMeta.scss +++ b/frontend/src/lib/components/Cards/CardMeta.scss @@ -106,7 +106,7 @@ &.CardMeta--details-shown { .CardMeta__details { margin-top: 0; - box-shadow: var(--shadow-elevation); + box-shadow: var(--shadow-elevation-3000); .CardMeta__details__content { pointer-events: all; diff --git a/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss b/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss index 8577e9c3764..432c85858af 100644 --- a/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss +++ b/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss @@ -7,7 +7,7 @@ font-size: 0.875rem; font-weight: normal; line-height: 1.375em; - color: var(--default); + color: var(--text-3000); cursor: pointer; transition: background 0.3s ease; diff --git a/frontend/src/lib/components/EditableField/EditableField.scss b/frontend/src/lib/components/EditableField/EditableField.scss index 57458413922..5bdc0e8176f 100644 --- a/frontend/src/lib/components/EditableField/EditableField.scss +++ b/frontend/src/lib/components/EditableField/EditableField.scss @@ -90,7 +90,7 @@ max-width: 100%; padding: 0; font: inherit; - color: var(--default); + color: var(--text-3000); background: transparent; border: none; outline: none; diff --git a/frontend/src/lib/components/HTMLElementsDisplay/HTMLElementsDisplay.tsx b/frontend/src/lib/components/HTMLElementsDisplay/HTMLElementsDisplay.tsx index 7c34ea76993..4e2c0b4c880 100644 --- a/frontend/src/lib/components/HTMLElementsDisplay/HTMLElementsDisplay.tsx +++ b/frontend/src/lib/components/HTMLElementsDisplay/HTMLElementsDisplay.tsx @@ -28,7 +28,7 @@ function CloseAllTags({ elements }: { elements: ElementType[] }): JSX.Element { }} > 
                             {indent(elements.length - index - 2)}
@@ -161,7 +161,7 @@ export function HTMLElementsDisplay({
                     <>
                         {elementsToShowDepth ? (
                             
diff --git a/frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.tsx b/frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.tsx
index e4925042c81..53a0fcb00d8 100644
--- a/frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.tsx
+++ b/frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.tsx
@@ -212,7 +212,7 @@ export function SelectableElement({
     return (
         
diff --git a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.scss b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.scss
index 6c5f4479e6b..7e7f1c598f2 100644
--- a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.scss
+++ b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.scss
@@ -5,7 +5,7 @@
     height: 2rem;
     padding: 0.25rem 0.625rem;
     overflow: hidden;
-    color: var(--default);
+    color: var(--text-3000);
     white-space: nowrap;
     cursor: default;
     background: var(--border);
diff --git a/frontend/src/lib/components/SceneDashboardChoice/SceneDashboardChoiceModal.tsx b/frontend/src/lib/components/SceneDashboardChoice/SceneDashboardChoiceModal.tsx
index b11eb3f627e..2dffa42fc49 100644
--- a/frontend/src/lib/components/SceneDashboardChoice/SceneDashboardChoiceModal.tsx
+++ b/frontend/src/lib/components/SceneDashboardChoice/SceneDashboardChoiceModal.tsx
@@ -60,7 +60,7 @@ export function SceneDashboardChoiceModal({ scene }: SceneDashboardChoiceModalPr
                                 

                                     

                                         {dashboard.name}
-                                        
+                                        
                                             {dashboard.description}
                                         
                                     

diff --git a/frontend/src/lib/components/SeriesGlyph.tsx b/frontend/src/lib/components/SeriesGlyph.tsx
index 2bcc8f0981c..1ebc8d30b3b 100644
--- a/frontend/src/lib/components/SeriesGlyph.tsx
+++ b/frontend/src/lib/components/SeriesGlyph.tsx
@@ -44,7 +44,7 @@ export function SeriesLetter({ className, hasBreakdown, seriesIndex, seriesColor
                               : hexToRGBA(color, 0.2),
                       }
                     : {
-                          color: 'var(--default)',
+                          color: 'var(--text-3000)',
                       }
             }
         >
diff --git a/frontend/src/lib/components/SocialLoginButton/SocialLoginButton.tsx b/frontend/src/lib/components/SocialLoginButton/SocialLoginButton.tsx
index 6edef668ef4..2f187ac999e 100644
--- a/frontend/src/lib/components/SocialLoginButton/SocialLoginButton.tsx
+++ b/frontend/src/lib/components/SocialLoginButton/SocialLoginButton.tsx
@@ -52,7 +52,7 @@ export function SocialLoginButton({ provider, extraQueryParams }: SocialLoginBut
     return (
         
             }>
-                {SSO_PROVIDER_NAMES[provider]}
+                {SSO_PROVIDER_NAMES[provider]}
             
         
     )
diff --git a/frontend/src/lib/components/Subscriptions/views/ManageSubscriptions.tsx b/frontend/src/lib/components/Subscriptions/views/ManageSubscriptions.tsx
index 28f95ce093b..af69201c34c 100644
--- a/frontend/src/lib/components/Subscriptions/views/ManageSubscriptions.tsx
+++ b/frontend/src/lib/components/Subscriptions/views/ManageSubscriptions.tsx
@@ -49,7 +49,7 @@ export function SubscriptionListItem({ subscription, onClick, onDelete }: Subscr
             

                 

                     
{subscription.title}

-                    
{capitalizeFirstLetter(subscription.summary)}

+                    
{capitalizeFirstLetter(subscription.summary)}

                 

                 {subscription.target_type === 'email' ? (
                      td:not(.LemonTable__cell--sticky) {
                     background: var(--primary-bg-hover);
@@ -166,7 +166,7 @@
             > td {
                 padding-top: 0.3125rem;
                 padding-bottom: 0.3125rem;
-                color: var(--text-secondary);
+                color: var(--text-secondary-3000);
 
                 // Make spacing of buttons tighter in tables by adding negative vertical margin
                 .LemonButton {
@@ -253,7 +253,7 @@
     cursor: default;
 
     .LemonTable__header-content {
-        color: var(--text-secondary);
+        color: var(--text-secondary-3000);
     }
 
     &.LemonTable__header--actionable {
@@ -262,14 +262,14 @@
         &:hover {
             &:not(:has(.LemonTable__header--no-hover:hover)) {
                 .LemonTable__header-content {
-                    color: var(--default);
+                    color: var(--text-3000);
                 }
             }
         }
 
         &:active {
             .LemonTable__header-content {
-                color: var(--default);
+                color: var(--text-3000);
             }
         }
     }
diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTableLink.tsx b/frontend/src/lib/lemon-ui/LemonTable/LemonTableLink.tsx
index dc39e5e1a02..c5c1b4915af 100644
--- a/frontend/src/lib/lemon-ui/LemonTable/LemonTableLink.tsx
+++ b/frontend/src/lib/lemon-ui/LemonTable/LemonTableLink.tsx
@@ -15,7 +15,7 @@ export function LemonTableLink({
                 
{title}

 
                 {description ? (
-                    

+                    

                         {typeof description === 'string' ? (
                             
                                 {description}
diff --git a/frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss b/frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss
index 807b7765e34..3d24fa061d1 100644
--- a/frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss
+++ b/frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss
@@ -6,7 +6,7 @@
     font-size: 0.75rem;
     font-weight: var(--font-medium);
     line-height: 1rem;
-    color: var(--default);
+    color: var(--text-3000);
     white-space: nowrap;
     background: var(--border);
     border-radius: var(--radius-sm);
diff --git a/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.scss b/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.scss
index 9c89b575b4a..5b52df766e0 100644
--- a/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.scss
+++ b/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.scss
@@ -5,7 +5,7 @@
     padding: 0.5rem;
     font-size: 0.875rem;
     line-height: 1.25rem;
-    color: var(--default);
+    color: var(--text-3000);
     text-align: left;
     text-overflow: ellipsis;
     cursor: text;
diff --git a/frontend/src/lib/lemon-ui/Lettermark/Lettermark.scss b/frontend/src/lib/lemon-ui/Lettermark/Lettermark.scss
index fc4a3e78efe..51462f200fd 100644
--- a/frontend/src/lib/lemon-ui/Lettermark/Lettermark.scss
+++ b/frontend/src/lib/lemon-ui/Lettermark/Lettermark.scss
@@ -17,7 +17,7 @@
     }
 
     &.Lettermark--variant-gray {
-        color: var(--default);
+        color: var(--text-3000);
         background: var(--border);
     }
 
diff --git a/frontend/src/lib/lemon-ui/Link/Link.scss b/frontend/src/lib/lemon-ui/Link/Link.scss
index fe883c1e996..ebb154f170e 100644
--- a/frontend/src/lib/lemon-ui/Link/Link.scss
+++ b/frontend/src/lib/lemon-ui/Link/Link.scss
@@ -29,7 +29,7 @@
     }
 
     &--subtle {
-        color: var(--default);
+        color: var(--text-3000);
 
         &:not(:disabled):hover {
             color: var(--primary-3000-hover);
diff --git a/frontend/src/lib/lemon-ui/Popover/Popover.scss b/frontend/src/lib/lemon-ui/Popover/Popover.scss
index bad37d8a3fd..43400591b26 100644
--- a/frontend/src/lib/lemon-ui/Popover/Popover.scss
+++ b/frontend/src/lib/lemon-ui/Popover/Popover.scss
@@ -31,7 +31,7 @@
     background: var(--bg-light);
     border: 1px solid var(--secondary-3000-button-border);
     border-radius: var(--radius);
-    box-shadow: var(--shadow-elevation);
+    box-shadow: var(--shadow-elevation-3000);
     opacity: 0;
     transition: opacity 50ms ease, transform 50ms ease;
     transform-origin: top;
diff --git a/frontend/src/lib/lemon-ui/colors.stories.tsx b/frontend/src/lib/lemon-ui/colors.stories.tsx
index 231032a0af5..c9ce42ece37 100644
--- a/frontend/src/lib/lemon-ui/colors.stories.tsx
+++ b/frontend/src/lib/lemon-ui/colors.stories.tsx
@@ -18,30 +18,27 @@ const meta: Meta = {
 export default meta
 
 const colorGroups = {
-    primary: ['primary-highlight', 'primary-light', 'primary', 'primary-dark'],
+    primary: ['primary-highlight', 'primary'],
     danger: ['danger-highlight', 'danger-light', 'danger', 'danger-dark'],
-    warning: ['warning-highlight', 'warning-light', 'warning', 'warning-dark'],
+    warning: ['warning-highlight', 'warning', 'warning-dark'],
     success: ['success-highlight', 'success-light', 'success', 'success-dark'],
-    'primary-alt': ['primary-alt-highlight', 'primary-alt', 'primary-alt-dark'],
+    'primary-alt': ['primary-alt-highlight', 'primary-alt'],
     'default (primary text)': ['default', 'default-dark'],
     'muted (secondary text)': ['muted', 'muted-dark'],
-    'muted-alt ': ['muted-alt', 'muted-alt-dark'],
+    'muted-alt ': ['muted-alt'],
     border: ['border', 'border-light', 'border-bold', 'border-active'],
     light: ['white', 'light'],
 }
 
 const preThousand = [
     'primary-highlight',
-    'primary-light',
     'primary',
-    'primary-dark',
     'danger-highlight',
     'danger-lighter',
     'danger-light',
     'danger',
     'danger-dark',
     'warning-highlight',
-    'warning-light',
     'warning',
     'warning-dark',
     'success-highlight',
@@ -50,13 +47,11 @@ const preThousand = [
     'success-dark',
     'primary-alt-highlight',
     'primary-alt',
-    'primary-alt-dark',
     'default',
     'default-dark',
     'muted',
     'muted-dark',
     'muted-alt',
-    'muted-alt-dark',
     'mark',
     'white',
     'bg-light',
diff --git a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss
index 5de86d1df4b..7033d5e9298 100644
--- a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss
+++ b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss
@@ -40,7 +40,7 @@
     .drag-handle {
         padding-right: 0.25rem;
         font-size: 1.2em;
-        color: var(--default);
+        color: var(--text-3000);
         cursor: move;
 
         svg {
diff --git a/frontend/src/scenes/batch_exports/BatchExportScene.tsx b/frontend/src/scenes/batch_exports/BatchExportScene.tsx
index e3a5f330064..8caa9614da6 100644
--- a/frontend/src/scenes/batch_exports/BatchExportScene.tsx
+++ b/frontend/src/scenes/batch_exports/BatchExportScene.tsx
@@ -121,7 +121,7 @@ function BatchExportLogEntryLevelDisplay(type: PipelineLogLevel): JSX.Element {
             color = 'var(--muted)'
             break
         case PipelineLogLevel.Log:
-            color = 'var(--default)'
+            color = 'var(--text-3000)'
             break
         case PipelineLogLevel.Info:
             color = 'var(--blue)'
diff --git a/frontend/src/scenes/billing/BillingProductPricingTable.tsx b/frontend/src/scenes/billing/BillingProductPricingTable.tsx
index 196551d3a2b..42ec5bb77c2 100644
--- a/frontend/src/scenes/billing/BillingProductPricingTable.tsx
+++ b/frontend/src/scenes/billing/BillingProductPricingTable.tsx
@@ -35,7 +35,9 @@ export const BillingProductPricingTable = ({
         {
             title: 'Total',
             dataIndex: 'total',
-            render: (_, item: BillingTableTierRow) => {item.total},
+            render: (_, item: BillingTableTierRow) => (
+                {item.total}
+            ),
         },
         { title: 'Projected Total', dataIndex: 'projectedTotal' },
     ]
diff --git a/frontend/src/scenes/cohorts/CohortEdit.tsx b/frontend/src/scenes/cohorts/CohortEdit.tsx
index a730df023b6..cdd7fdd0c7e 100644
--- a/frontend/src/scenes/cohorts/CohortEdit.tsx
+++ b/frontend/src/scenes/cohorts/CohortEdit.tsx
@@ -213,7 +213,7 @@ export function CohortEdit({ id }: CohortLogicProps): JSX.Element {
                                         onChange={(files) => onChange(files[0])}
                                         showUploadedFiles={false}
                                         callToAction={
-                                            

+                                            

                                                 {cohort.csv ? (
                                                     <>
                                                         
-                

+                

                     {is_success ? (
                         
                     ) : (
diff --git a/frontend/src/scenes/insights/views/Funnels/FunnelPropertyCorrelationTable.tsx b/frontend/src/scenes/insights/views/Funnels/FunnelPropertyCorrelationTable.tsx
index 9b23cf289d4..b10a1f3c14b 100644
--- a/frontend/src/scenes/insights/views/Funnels/FunnelPropertyCorrelationTable.tsx
+++ b/frontend/src/scenes/insights/views/Funnels/FunnelPropertyCorrelationTable.tsx
@@ -102,7 +102,7 @@ export function FunnelPropertyCorrelationTable(): JSX.Element | null {
 
         return (
             <>
-                

+                

                     {is_success ? (
                         
                     ) : (
diff --git a/frontend/src/scenes/insights/views/Histogram/Histogram.scss b/frontend/src/scenes/insights/views/Histogram/Histogram.scss
index d2e76482e53..2a6450cf2af 100644
--- a/frontend/src/scenes/insights/views/Histogram/Histogram.scss
+++ b/frontend/src/scenes/insights/views/Histogram/Histogram.scss
@@ -37,7 +37,7 @@
                 font-family: var(--font-sans);
                 font-size: 0.75rem;
                 font-weight: 500;
-                fill: var(--default);
+                fill: var(--text-3000);
             }
         }
 
diff --git a/frontend/src/scenes/insights/views/InsightsTable/columns/AggregationColumn.scss b/frontend/src/scenes/insights/views/InsightsTable/columns/AggregationColumn.scss
index c29705b9867..bba19ff0bbc 100644
--- a/frontend/src/scenes/insights/views/InsightsTable/columns/AggregationColumn.scss
+++ b/frontend/src/scenes/insights/views/InsightsTable/columns/AggregationColumn.scss
@@ -1,7 +1,7 @@
 .AggregationColumn__title {
-    color: var(--text-secondary);
+    color: var(--text-secondary-3000);
 
     &:hover {
-        color: var(--default);
+        color: var(--text-3000);
     }
 }
diff --git a/frontend/src/scenes/instance/SystemStatus/InstanceConfigSaveModal.tsx b/frontend/src/scenes/instance/SystemStatus/InstanceConfigSaveModal.tsx
index c9c593c7647..f0ecbe4f369 100644
--- a/frontend/src/scenes/instance/SystemStatus/InstanceConfigSaveModal.tsx
+++ b/frontend/src/scenes/instance/SystemStatus/InstanceConfigSaveModal.tsx
@@ -29,7 +29,7 @@ function ChangeRow({ metricKey, oldValue, value, isSecret }: ChangeRowInterface)
                 {!isSecret && (
                     <>
                         {' from '}
-                        
+                        
                             {RenderMetricValue(null, {
                                 key: metricKey,
                                 value: oldValue,
@@ -40,7 +40,7 @@ function ChangeRow({ metricKey, oldValue, value, isSecret }: ChangeRowInterface)
                     
                 )}
                 {' to '}
-                
+                
                     {RenderMetricValue(null, { key: metricKey, value, emptyNullLabel: 'Unset' })}
                 
                 {isSecret && (
diff --git a/frontend/src/scenes/pipeline/PipelinePluginConfiguration.tsx b/frontend/src/scenes/pipeline/PipelinePluginConfiguration.tsx
index 0cdb81f7400..648e83d1a08 100644
--- a/frontend/src/scenes/pipeline/PipelinePluginConfiguration.tsx
+++ b/frontend/src/scenes/pipeline/PipelinePluginConfiguration.tsx
@@ -140,7 +140,7 @@ export function PipelinePluginConfiguration({
                                         {plugin.name}
                                     

                                     {plugin.description ? (
-                                        

+                                        

                                             
                                                 {plugin.description}
                                             
diff --git a/frontend/src/scenes/pipeline/utils.tsx b/frontend/src/scenes/pipeline/utils.tsx
index 5d910f2c452..bfd6c1f4e30 100644
--- a/frontend/src/scenes/pipeline/utils.tsx
+++ b/frontend/src/scenes/pipeline/utils.tsx
@@ -235,7 +235,7 @@ export function LogLevelDisplay(level: PipelineLogLevel): JSX.Element {
             color = 'text-muted'
             break
         case PipelineLogLevel.Log:
-            color = 'text-default'
+            color = 'text-text-3000'
             break
         case PipelineLogLevel.Info:
             color = 'text-primary'
diff --git a/frontend/src/scenes/project-homepage/ProjectHomepage.scss b/frontend/src/scenes/project-homepage/ProjectHomepage.scss
index 759f253b69a..c18c105f2de 100644
--- a/frontend/src/scenes/project-homepage/ProjectHomepage.scss
+++ b/frontend/src/scenes/project-homepage/ProjectHomepage.scss
@@ -21,7 +21,7 @@
             }
 
             a {
-                color: var(--default);
+                color: var(--text-3000);
 
                 &:hover {
                     color: var(--primary-3000);
diff --git a/frontend/src/scenes/project-homepage/ProjectHomepage.tsx b/frontend/src/scenes/project-homepage/ProjectHomepage.tsx
index 5908f377617..996894f9ac4 100644
--- a/frontend/src/scenes/project-homepage/ProjectHomepage.tsx
+++ b/frontend/src/scenes/project-homepage/ProjectHomepage.tsx
@@ -97,7 +97,7 @@ function HomeDashboard({ dashboardLogicProps }: { dashboardLogicProps: Dashboard
                     {!dashboard && }
                     {dashboard?.name && (
                         <>
-                            
+                            
                                 
                                 {dashboard?.name}
                             
diff --git a/frontend/src/scenes/project-homepage/RecentRecordings.tsx b/frontend/src/scenes/project-homepage/RecentRecordings.tsx
index e6786752d94..d53ce5f4f7c 100644
--- a/frontend/src/scenes/project-homepage/RecentRecordings.tsx
+++ b/frontend/src/scenes/project-homepage/RecentRecordings.tsx
@@ -32,7 +32,7 @@ export function RecordingRow({ recording }: RecordingRowProps): JSX.Element {
             subtitle={`Recorded ${dayjs(recording.start_time).fromNow()}`}
             prefix={}
             suffix={
-                

+                

                     {humanFriendlyDuration(recording.recording_duration)}
                     
                 

diff --git a/frontend/src/scenes/retention/RetentionTable.tsx b/frontend/src/scenes/retention/RetentionTable.tsx
index 8e344750239..76cf7c17e29 100644
--- a/frontend/src/scenes/retention/RetentionTable.tsx
+++ b/frontend/src/scenes/retention/RetentionTable.tsx
@@ -109,7 +109,7 @@ function CohortDay({
 }): JSX.Element {
     const backgroundColorSaturation = percentage / 100
     const saturatedBackgroundColor = gradateColor(backgroundColor || BRAND_BLUE_HSL, backgroundColorSaturation, 0.1)
-    const textColor = backgroundColorSaturation > 0.4 ? '#fff' : 'var(--default)' // Ensure text contrast
+    const textColor = backgroundColorSaturation > 0.4 ? '#fff' : 'var(--text-3000)' // Ensure text contrast
 
     const numberCell = (
         

-                    

+                    

                         {listedInsightTypeMetadata.name}
                         {listedInsightTypeMetadata.description}
                     

diff --git a/frontend/src/scenes/session-recordings/errors/SessionRecordingErrors.tsx b/frontend/src/scenes/session-recordings/errors/SessionRecordingErrors.tsx
index cb6ef67cc5b..18df7c3a6af 100644
--- a/frontend/src/scenes/session-recordings/errors/SessionRecordingErrors.tsx
+++ b/frontend/src/scenes/session-recordings/errors/SessionRecordingErrors.tsx
@@ -36,7 +36,7 @@ export function SessionRecordingErrors(): JSX.Element {
                         render: (_, cluster) => {
                             const displayTitle = parseTitle(cluster.sample)
                             return (
-                                

+                                

                                     {displayTitle}
                                 

                             )
diff --git a/frontend/src/scenes/session-recordings/player/PlayerFrameOverlay.tsx b/frontend/src/scenes/session-recordings/player/PlayerFrameOverlay.tsx
index f591ce327a1..f8696614817 100644
--- a/frontend/src/scenes/session-recordings/player/PlayerFrameOverlay.tsx
+++ b/frontend/src/scenes/session-recordings/player/PlayerFrameOverlay.tsx
@@ -26,7 +26,7 @@ const PlayerFrameOverlayContent = (): JSX.Element | null => {
         content = (
             

                 
-                
We're unable to play this recording

+                
We're unable to play this recording

                 

                     An error occurred that is preventing this recording from being played. You can refresh the page to
                     reload the recording.
diff --git a/frontend/src/scenes/session-recordings/player/PlayerMeta.scss b/frontend/src/scenes/session-recordings/player/PlayerMeta.scss
index 1d0bfcfec5b..e45fbc05a33 100644
--- a/frontend/src/scenes/session-recordings/player/PlayerMeta.scss
+++ b/frontend/src/scenes/session-recordings/player/PlayerMeta.scss
@@ -80,7 +80,7 @@
     }
 
     .Link {
-        color: var(--default);
+        color: var(--text-3000);
 
         &:hover {
             color: var(--primary-3000);
diff --git a/frontend/src/scenes/session-recordings/player/PlayerUpNext.scss b/frontend/src/scenes/session-recordings/player/PlayerUpNext.scss
index 634ca26deb3..1d573607ad8 100644
--- a/frontend/src/scenes/session-recordings/player/PlayerUpNext.scss
+++ b/frontend/src/scenes/session-recordings/player/PlayerUpNext.scss
@@ -37,7 +37,7 @@
     backdrop-filter: blur(5px);
     border: 1px solid rgb(0 0 0 / 50%);
     border-radius: var(--radius);
-    box-shadow: var(--shadow-elevation);
+    box-shadow: var(--shadow-elevation-3000);
 
     .PlayerUpNextButtonBackground {
         position: absolute;
diff --git a/frontend/src/scenes/session-recordings/player/view-explorer/SessionRecordingPlayerExplorer.scss b/frontend/src/scenes/session-recordings/player/view-explorer/SessionRecordingPlayerExplorer.scss
index f09d91117b5..c134ab3abcf 100644
--- a/frontend/src/scenes/session-recordings/player/view-explorer/SessionRecordingPlayerExplorer.scss
+++ b/frontend/src/scenes/session-recordings/player/view-explorer/SessionRecordingPlayerExplorer.scss
@@ -10,7 +10,7 @@
         flex: 1;
         padding: 0.5rem;
         overflow: hidden;
-        background-color: var(--default);
+        background-color: var(--text-3000);
         border: 1px solid var(--border);
 
         .SessionRecordingPlayerExplorer__iframe {
diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.scss b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.scss
index ed2f90dc111..a7df986ce52 100644
--- a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.scss
+++ b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.scss
@@ -26,7 +26,7 @@
         }
 
         .text-link {
-            color: var(--default);
+            color: var(--text-3000);
         }
     }
 
diff --git a/frontend/src/scenes/surveys/EditSurvey.scss b/frontend/src/scenes/surveys/EditSurvey.scss
index e1334158f01..306d6b03938 100644
--- a/frontend/src/scenes/surveys/EditSurvey.scss
+++ b/frontend/src/scenes/surveys/EditSurvey.scss
@@ -19,7 +19,7 @@
 
 .SurveyQuestionDragHandle {
     font-size: 1.2em;
-    color: var(--default);
+    color: var(--text-3000);
     cursor: move;
     transform: rotate(90deg);
 }
diff --git a/frontend/src/styles/antd.less b/frontend/src/styles/antd.less
index 2e0564a3fcc..0cc37188c51 100644
--- a/frontend/src/styles/antd.less
+++ b/frontend/src/styles/antd.less
@@ -3,7 +3,7 @@ with SASS, leading to duplicated config. When changing any variable here, please
 @import 'antd/lib/style/themes/default.less';
 @import 'antd/dist/antd.less';
 
-@text-color: var(--default);
+@text-color: var(--text-3000);
 @text-muted: #5f5f5f;
 @primary-color: #1d4aff;
 @link-color: #1d4aff;
diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss
index a3e9815c28b..1700296135a 100644
--- a/frontend/src/styles/global.scss
+++ b/frontend/src/styles/global.scss
@@ -175,7 +175,7 @@ input::-ms-clear {
     cursor: unset;
     border: 1px solid var(--secondary-3000-button-border);
     border-radius: var(--radius);
-    box-shadow: var(--shadow-elevation);
+    box-shadow: var(--shadow-elevation-3000);
     opacity: 1 !important;
 }
 
@@ -188,7 +188,7 @@ input::-ms-clear {
     font-size: 0.875rem;
     font-weight: 500;
     line-height: 1.25rem;
-    color: var(--default);
+    color: var(--text-3000);
 
     b,
     strong {
@@ -263,7 +263,7 @@ input::-ms-clear {
     font-size: 12px;
     font-weight: bold;
     pointer-events: none;
-    border: 2px solid var(--default);
+    border: 2px solid var(--text-3000);
     border-radius: 50%;
 
     // variants
@@ -404,29 +404,7 @@ input::-ms-clear {
 // AntD overrrides, placed inside `body` to increase specifity (nicely avoiding the need for !important)
 body {
     // Until we have 3000 rolled out we fallback to standard colors
-    --text-3000: var(--default);
-    --text-secondary-3000: var(--text-secondary);
-    --muted-3000: var(--muted);
-    --trace-3000: var(--trace-3000-light);
-    --primary-3000: var(--primary);
     --primary-3000-highlight: var(--primary-highlight);
-    --primary-3000-hover: var(--primary-light);
-    --primary-3000-active: var(--primary-dark);
-    --secondary-3000: var(--secondary);
-    --secondary-3000-hover: var(--secondary-light);
-    --accent-3000: var(--side);
-    --bg-3000: var(--bg-light);
-    --border-3000: var(--border);
-    --border-bold-3000: var(--border);
-    --glass-bg-3000: var(--bg-light);
-    --glass-border-3000: var(--border);
-    --bg-light: #fff;
-    --bg-table: var(--bg-light);
-    --link: var(--primary-3000);
-    --tooltip-bg: var(--bg-charcoal);
-    --data-color-1-hover: #1d4affe5;
-    --shadow-elevation: var(--shadow-elevation-3000);
-    --primary: var(--primary-3000);
     --primary-highlight: var(--primary-3000-highlight);
 
     // Remove below once we're using Tailwind's base
@@ -450,14 +428,6 @@ body {
     }
 
     &[theme='dark'] {
-        .ant-empty-img-simple-path {
-            fill: var(--border-3000);
-        }
-
-        .ant-empty-img-simple-ellipse {
-            fill: var(--border-3000);
-        }
-
         @include dark-mode-3000-variables;
     }
 
@@ -493,7 +463,7 @@ body {
     h2,
     h3,
     h4 {
-        color: var(--default);
+        color: var(--text-3000);
     }
 
     h5 {
@@ -542,7 +512,7 @@ body {
     }
 
     .ant-dropdown {
-        color: var(--default);
+        color: var(--text-3000);
         border-radius: var(--radius);
     }
 
@@ -551,7 +521,7 @@ body {
     }
 
     .ant-modal-content {
-        box-shadow: var(--shadow-elevation);
+        box-shadow: var(--shadow-elevation-3000);
     }
 
     .ant-modal-mask {
@@ -619,19 +589,6 @@ body {
         }
     }
 
-    // Tooltip styles
-    .ant-tooltip-inner {
-        background-color: var(--tooltip-bg);
-    }
-
-    .ant-tooltip-arrow-content {
-        background-color: var(--tooltip-bg);
-    }
-
-    .ant-tooltip {
-        max-width: 350px;
-    }
-
     @include common-variables;
 }
 
diff --git a/frontend/src/styles/vars.scss b/frontend/src/styles/vars.scss
index 87581492909..8108bf20af1 100644
--- a/frontend/src/styles/vars.scss
+++ b/frontend/src/styles/vars.scss
@@ -9,33 +9,25 @@ $xl: 1200px;
 $xxl: 1600px;
 $colors: (
     'primary-highlight': rgba(#1d4aff, 0.1),
-    'primary-light': #345cff,
     'primary': #1d4aff,
-    'primary-dark': #1330a6,
     'danger-highlight': rgba(#db3707, 0.1),
     'danger-lighter': #ffa599,
     'danger-light': #df4b20,
     'danger': #db3707,
     'danger-dark': #992705,
     'warning-highlight': rgba(#f7a501, 0.1),
-    'warning-light': #f8b633,
     'warning': #f7a501,
     'warning-dark': #e09423,
     'highlight': #e49f2c,
-    'highlight-dark': #ffbd4f,
     'success-highlight': rgba(#388600, 0.1),
     'success-light': #5f9d32,
     'success': #388600,
     'success-dark': #245700,
     'primary-alt-highlight': rgba(#35416b, 0.1),
     'primary-alt': #35416b,
-    'primary-alt-dark': #222a46,
-    'default': #2d2d2d,
-    'default-dark': #050505,
     'muted': #5f5f5f,
     'muted-dark': #403939,
     'muted-alt': #747ea1,
-    'muted-alt-dark': #515871,
     'mark': hsl(42deg 93% 86% / 80%),
     'white': #fff,
     'bg-light': #fff,
@@ -53,8 +45,8 @@ $colors: (
     'brand-yellow': #f9bd2b,
     'brand-key': #000,
 
-    // This becomes white in dark mode
     // PostHog 3000
+    'default-light': #111,
     'text-3000-light': #111,
     'text-secondary-3000-light': rgba(#111, 0.7),
     'muted-3000-light': rgba(#111, 0.6),
@@ -91,6 +83,7 @@ $colors: (
     'shadow-elevation-3000-light': 0 3px 0 var(--border-3000-light),
     'shadow-elevation-3000-dark': 0 3px 0 var(--border-3000-dark),
     'text-3000-dark': #fff,
+    'default-dark': #050505,
     'text-secondary-3000-dark': rgba(#fff, 0.7),
     'muted-3000-dark': rgba(#fff, 0.5),
     'trace-3000-dark': rgba(#fff, 0.25),
@@ -126,6 +119,7 @@ $colors: (
     'danger-3000-button-border-hover-dark': #f54e00,
 
     // The derived colors
+    'default': var(--default),
     'text-3000': var(--text-3000),
     'text-secondary-3000': var(--text-secondary-3000),
     'muted-3000': var(--muted-3000),
@@ -154,11 +148,8 @@ $colors: (
 );
 
 // These vars are modified via SCSS for legacy reasons (e.g. darken/lighten), so keeping as SCSS vars for now.
-$_primary: map.get($colors, 'primary');
-$_success: map.get($colors, 'success');
-$_primary_bg_active: rgba($_primary, 0.2);
-$_lifecycle_new: $_primary;
-$_lifecycle_returning: $_success;
+$_lifecycle_new: map.get($colors, 'primary');
+$_lifecycle_returning: map.get($colors, 'success');
 $_lifecycle_resurrecting: #a56eff; // --data-lilac
 $_lifecycle_dormant: map.get($colors, 'danger');
 
@@ -167,14 +158,11 @@ $_lifecycle_dormant: map.get($colors, 'danger');
 @mixin root-variables {
     // TODO: Remove the primary-bg...
     --primary-bg-hover: var(--primary-highlight);
-    --primary-bg-active: #{$_primary_bg_active};
-    --bg-charcoal: #2d2d2d;
     --bg-bridge: #ebece8;
 
     // Non-color vars
     --radius: 0.375rem;
     --radius-sm: 0.25rem;
-    --shadow-elevation: 0px 16px 16px -16px rgb(0 0 0 / 35%);
     --modal-shadow-elevation: 0px 16px 16px -16px rgb(0 0 0 / 35%);
     --opacity-disabled: 0.6;
     --font-medium: 500;
@@ -189,7 +177,7 @@ $_lifecycle_dormant: map.get($colors, 'danger');
     --blue: #597dce;
     --purple: #c278cf;
     --green: var(--success);
-    --black: var(--default);
+    --black: var(--text-3000);
 
     //// Data colors (e.g. insight series). Note: colors.ts relies on these values being hexadecimal
     --data-color-1: #1d4aff;
@@ -293,7 +281,7 @@ $_lifecycle_dormant: map.get($colors, 'danger');
     --modal-transition-time: 200ms;
 
     // Tooltips
-    --tooltip-bg-light: var(--bg-charcoal);
+    --tooltip-bg-light: #2d2d2d;
     --tooltip-bg-dark: #656d81;
 
     // Notebooks
@@ -309,6 +297,7 @@ $_lifecycle_dormant: map.get($colors, 'danger');
 
 // defined here so that they can be shared with the toolbar
 @mixin light-mode-3000-variables {
+    --default: var(--default-light);
     --text-3000: var(--text-3000-light);
     --text-secondary-3000: var(--text-secondary-3000-light);
     --muted-3000: var(--muted-3000-light);
@@ -347,6 +336,7 @@ $_lifecycle_dormant: map.get($colors, 'danger');
 
 // defined here so that they can be shared with the toolbar
 @mixin dark-mode-3000-variables {
+    --default: var(--default-dark);
     --text-3000: var(--text-3000-dark);
     --text-secondary-3000: var(--text-secondary-3000-dark);
     --muted-3000: var(--muted-3000-dark);
@@ -392,7 +382,7 @@ $_lifecycle_dormant: map.get($colors, 'danger');
 
 // defined here so that they can be shared with the toolbar
 @mixin common-variables {
-    --default: var(--text-3000);
+    --primary: var(--primary-3000);
     --text-secondary: var(--text-secondary-3000);
     --muted: var(--muted-3000);
     --muted-alt: var(--muted-3000);
diff --git a/frontend/src/toolbar/bar/ToolbarButton.scss b/frontend/src/toolbar/bar/ToolbarButton.scss
index ce480f3fbab..d89d71b4ee8 100644
--- a/frontend/src/toolbar/bar/ToolbarButton.scss
+++ b/frontend/src/toolbar/bar/ToolbarButton.scss
@@ -34,7 +34,7 @@
     &:not([aria-disabled='true']):hover,
     &--active {
         button {
-            color: var(--default);
+            color: var(--text-3000);
             background: var(--border);
         }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 4a50b8880f6..c6eac5bf2e5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -93,7 +93,7 @@ const config = {
                 '1/2': '50%',
             },
             boxShadow: {
-                DEFAULT: 'var(--shadow-elevation)',
+                DEFAULT: 'var(--shadow-elevation-3000)',
             },
             flex: {
                 2: '2 2 0%',