chore: remove more colors (#22882)

PostHog · Jun 12, 2024 · c6ee85d · c6ee85d
1 parent 5ad9b93
commit c6ee85d
Show file tree

Hide file tree

Showing 88 changed files with 99 additions and 155 deletions.
diff --git a/frontend/__snapshots__/components-sharing--dashboard-sharing--dark.png b/frontend/__snapshots__/components-sharing--dashboard-sharing--dark.png
diff --git a/frontend/__snapshots__/components-sharing--dashboard-sharing-licensed--dark.png b/frontend/__snapshots__/components-sharing--dashboard-sharing-licensed--dark.png
diff --git a/frontend/__snapshots__/components-sharing--insight-sharing--dark.png b/frontend/__snapshots__/components-sharing--insight-sharing--dark.png
diff --git a/frontend/__snapshots__/components-sharing--insight-sharing-licensed--dark.png b/frontend/__snapshots__/components-sharing--insight-sharing-licensed--dark.png
diff --git a/frontend/__snapshots__/components-sharing--recording-sharing-licensed--dark.png b/frontend/__snapshots__/components-sharing--recording-sharing-licensed--dark.png
diff --git a/.../__snapshots__/components-subscriptions--subscription-no-integrations--dark.png b/.../__snapshots__/components-subscriptions--subscription-no-integrations--dark.png
diff --git a/frontend/__snapshots__/components-subscriptions--subscriptions--dark.png b/frontend/__snapshots__/components-subscriptions--subscriptions--dark.png
diff --git a/frontend/__snapshots__/components-subscriptions--subscriptions-edit--dark.png b/frontend/__snapshots__/components-subscriptions--subscriptions-edit--dark.png
diff --git a/frontend/__snapshots__/components-subscriptions--subscriptions-empty--dark.png b/frontend/__snapshots__/components-subscriptions--subscriptions-empty--dark.png
diff --git a/frontend/__snapshots__/components-subscriptions--subscriptions-new--dark.png b/frontend/__snapshots__/components-subscriptions--subscriptions-new--dark.png
diff --git a/...end/__snapshots__/components-subscriptions--subscriptions-unavailable--dark.png b/...end/__snapshots__/components-subscriptions--subscriptions-unavailable--dark.png
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
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
diff --git a/frontend/__snapshots__/lemon-ui-colors--color-palette--dark.png b/frontend/__snapshots__/lemon-ui-colors--color-palette--dark.png
diff --git a/frontend/__snapshots__/lemon-ui-colors--color-palette--light.png b/frontend/__snapshots__/lemon-ui-colors--color-palette--light.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-dialog--customised--dark.png b/frontend/__snapshots__/lemon-ui-lemon-dialog--customised--dark.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-dialog--form--dark.png b/frontend/__snapshots__/lemon-ui-lemon-dialog--form--dark.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-dialog--minimal--dark.png b/frontend/__snapshots__/lemon-ui-lemon-dialog--minimal--dark.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-dialog--template--dark.png b/frontend/__snapshots__/lemon-ui-lemon-dialog--template--dark.png
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
diff --git a/frontend/__snapshots__/lemon-ui-lemon-modal--inline--dark.png b/frontend/__snapshots__/lemon-ui-lemon-modal--inline--dark.png
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
diff --git a/frontend/__snapshots__/lemon-ui-lemon-skeleton--dark-background--dark.png b/frontend/__snapshots__/lemon-ui-lemon-skeleton--dark-background--dark.png
diff --git a/frontend/__snapshots__/lemon-ui-spinner--text-colored--dark.png b/frontend/__snapshots__/lemon-ui-spinner--text-colored--dark.png
diff --git a/frontend/__snapshots__/scenes-app-dashboards--create-template--dark.png b/frontend/__snapshots__/scenes-app-dashboards--create-template--dark.png
diff --git a/frontend/__snapshots__/scenes-app-dashboards--edit-template--dark.png b/frontend/__snapshots__/scenes-app-dashboards--edit-template--dark.png
diff --git 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
@@ -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
@@ -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
@@ -168,12 +168,12 @@ export const SidePanelSupport = (): JSX.Element => {
                                             >
                                                 <div className="flex items-center gap-1.5">
                                                     {product.icon}
-                                                    <span className="text-default opacity-75 group-hover:opacity-100">
+                                                    <span className="text-text-3000 opacity-75 group-hover:opacity-100">
                                                         {product.name}
                                                     </span>
                                                 </div>
                                                 <div>
-                                                    <IconChevronDown className="text-default h-6 w-6 opacity-60 -rotate-90 group-hover:opacity-90" />
+                                                    <IconChevronDown className="text-text-3000 h-6 w-6 opacity-60 -rotate-90 group-hover:opacity-90" />
                                                 </div>
                                             </Link>
                                         </li>

diff --git 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)}
                 />
                 <div className="text-muted-alt">
-                    This insight is referenced on <strong className="text-default">{currentDashboards.length}</strong>{' '}
+                    This insight is referenced on <strong className="text-text-3000">{currentDashboards.length}</strong>{' '}
                     {pluralize(currentDashboards.length, 'dashboard', 'dashboards', false)}
                 </div>
                 {/* 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -28,7 +28,7 @@ function CloseAllTags({ elements }: { elements: ElementType[] }): JSX.Element {
                         }}
                     >
                         <pre
-                            className="whitespace-pre-wrap break-all p-0 m-0 rounded-none text-default text-sm"
+                            className="whitespace-pre-wrap break-all p-0 m-0 rounded-none text-text-3000 text-sm"
                             key={index}
                         >
                             {indent(elements.length - index - 2)}
@@ -161,7 +161,7 @@ export function HTMLElementsDisplay({
                     <>
                         {elementsToShowDepth ? (
                             <pre
-                                className="p-1 m-0 opacity-50 text-default text-sm cursor-pointer"
+                                className="p-1 m-0 opacity-50 text-text-3000 text-sm cursor-pointer"
                                 data-attr="elements-display-show-more-of-chain"
                                 onClick={showAdditionalElements}
                             >

diff --git a/frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.tsx b/frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.tsx
@@ -212,7 +212,7 @@ export function SelectableElement({
     return (
         <pre
             className={clsx(
-                'p-0 m-0 rounded whitespace-pre-wrap break-all text-default text-sm',
+                'p-0 m-0 rounded whitespace-pre-wrap break-all text-text-3000 text-sm',
                 isDeepestChild && highlight ? 'bg-brand-red' : 'bg-transparent'
             )}
         >

diff --git 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
@@ -60,7 +60,7 @@ export function SceneDashboardChoiceModal({ scene }: SceneDashboardChoiceModalPr
                                 <div className="flex flex-1 items-center justify-between overflow-hidden">
                                     <div className="flex-1 flex flex-col justify-center overflow-hidden">
                                         <strong>{dashboard.name}</strong>
-                                        <span className="text-default font-normal text-ellipsis">
+                                        <span className="text-text-3000 font-normal text-ellipsis">
                                             {dashboard.description}
                                         </span>
                                     </div>

diff --git 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
@@ -52,7 +52,7 @@ export function SocialLoginButton({ provider, extraQueryParams }: SocialLoginBut
     return (
         <SocialLoginLink provider={provider} extraQueryParams={extraQueryParams}>
             <LemonButton size="medium" icon={<SocialLoginIcon provider={provider} />}>
-                <span className="text-default">{SSO_PROVIDER_NAMES[provider]}</span>
+                <span className="text-text-3000">{SSO_PROVIDER_NAMES[provider]}</span>
             </LemonButton>
         </SocialLoginLink>
     )

diff --git 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
             <div className="flex justify-between flex-auto items-center p-2">
                 <div>
                     <div className="text-link font-medium">{subscription.title}</div>
-                    <div className="text-sm text-default">{capitalizeFirstLetter(subscription.summary)}</div>
+                    <div className="text-sm text-text-3000">{capitalizeFirstLetter(subscription.summary)}</div>
                 </div>
                 {subscription.target_type === 'email' ? (
                     <ProfileBubbles

diff --git a/frontend/src/lib/components/TaxonomicFilter/InfiniteList.scss b/frontend/src/lib/components/TaxonomicFilter/InfiniteList.scss
@@ -18,7 +18,7 @@
         align-items: center;
         justify-content: space-between;
         padding: 4px 12px;
-        color: var(--default);
+        color: var(--text-3000);
         cursor: pointer;
         border: none;
 

diff --git a/frontend/src/lib/components/UniversalFilters/UniversalFilterButton.scss b/frontend/src/lib/components/UniversalFilters/UniversalFilterButton.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/lemon-ui/LemonButton/LemonButton.scss b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
@@ -56,7 +56,7 @@
     --lemon-button-gap: 0.5rem;
     --lemon-button-icon-opacity: 0.8;
     --lemon-button-profile-picture-opacity: 0.9; // Profile pictures must be more prominent than icons
-    --lemon-button-color: var(--default);
+    --lemon-button-color: var(--text-3000);
 
     // column-gap: 4px;
     // flex-direction: row;
@@ -232,7 +232,7 @@
 
         &.LemonButton--active,
         &:hover:not([aria-disabled='true']) {
-            --lemon-button-color: var(--default);
+            --lemon-button-color: var(--text-3000);
         }
     }
 

diff --git a/frontend/src/lib/lemon-ui/LemonCard/LemonCard.scss b/frontend/src/lib/lemon-ui/LemonCard/LemonCard.scss
@@ -3,7 +3,7 @@
 
     &.LemonCard--hoverEffect {
         &:hover {
-            box-shadow: var(--shadow-elevation);
+            box-shadow: var(--shadow-elevation-3000);
             transform: scale(1.01);
         }
     }

diff --git a/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss b/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss
@@ -9,7 +9,7 @@
     padding: 0.25rem 0.5rem;
     font-size: 0.875rem;
     line-height: 1.25rem;
-    color: var(--default);
+    color: var(--text-3000);
     text-align: left;
     cursor: text;
     background: none;

diff --git a/frontend/src/lib/lemon-ui/LemonRow/LemonRow.scss b/frontend/src/lib/lemon-ui/LemonRow/LemonRow.scss
@@ -16,7 +16,7 @@
 
     &.LemonRow--status-highlighted {
         font-weight: 600;
-        color: var(--default);
+        color: var(--text-3000);
         background: var(--primary-bg-hover);
 
         .LemonRow__icon {

diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
@@ -96,7 +96,7 @@
     }
 
     a.Link {
-        color: var(--default);
+        color: var(--text-3000);
 
         &:not(:disabled):hover {
             color: var(--primary-3000-hover);
@@ -156,7 +156,7 @@
 
             &.LemonTable__row--status-highlighted {
                 font-weight: 600;
-                color: var(--default);
+                color: var(--text-3000);
 
                 > 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
@@ -15,7 +15,7 @@ export function LemonTableLink({
                 <div className="flex flex-row items-center font-semibold text-sm gap-1">{title}</div>
 
                 {description ? (
-                    <div className="text-default text-xs text-text-secondary-3000 mt-1">
+                    <div className="text-text-3000 text-xs text-text-secondary-3000 mt-1">
                         {typeof description === 'string' ? (
                             <LemonMarkdown className="max-w-[30rem]" lowKeyHeadings>
                                 {description}

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
-Original file line number
+Diff line change
@@ Expand Up @@
                                   : hexToRGBA(color, 0.2),
                           }
                         : {
-                              color: 'var(--default)',
+                              color: 'var(--text-3000)',
                           }
                 }
             >
@@ Expand Down @@