chore: cleanup css vars (#22974)

PostHog · Jun 18, 2024 · 9f0d9a8 · 9f0d9a8
1 parent d59313e
commit 9f0d9a8
Show file tree

Hide file tree

Showing 38 changed files with 47 additions and 47 deletions.
diff --git a/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss b/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss
@@ -12,7 +12,7 @@
     transition: background 0.3s ease;
 
     &:hover {
-        background-color: var(--mid);
+        background-color: var(--bg-3000);
     }
 
     input::-webkit-outer-spin-button,

diff --git a/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss b/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss
@@ -102,7 +102,7 @@
     }
 
     .DefinitionPopover {
-        background-color: var(--side);
+        background-color: var(--bg-3000);
 
         .DefinitionPopover__label {
             align-items: flex-start;

diff --git a/frontend/src/lib/components/PayGateMini/PayGateMini.tsx b/frontend/src/lib/components/PayGateMini/PayGateMini.tsx
@@ -157,7 +157,7 @@ function PayGateContent({
         <div
             className={clsx(
                 className,
-                background && 'bg-side border border-border',
+                background && 'bg-bg-3000 border border-border',
                 'PayGateMini rounded flex flex-col items-center p-4 text-center'
             )}
         >
@@ -203,7 +203,7 @@ const renderUsageLimitMessage = (
                     </Tooltip>
                     .
                 </p>
-                <p className="border border-border bg-side rounded p-4">
+                <p className="border border-border bg-bg-3000 rounded p-4">
                     <b>Your current plan limit:</b>{' '}
                     <span>
                         {featureAvailableOnOrg.limit} {featureAvailableOnOrg.unit}
@@ -262,7 +262,7 @@ const renderGateVariantMessage = (
 
 const GrandfatheredMessage = (): JSX.Element => {
     return (
-        <div className="flex gap-x-2 bg-side p-4 rounded text-left mb-4">
+        <div className="flex gap-x-2 bg-bg-3000 p-4 rounded text-left mb-4">
             <IconInfo className="text-muted text-2xl" />
             <p className="text-muted mb-0">
                 Your plan does not include this feature, but previously set settings may remain. Please upgrade your

diff --git a/frontend/src/lib/components/Sharing/SharingModal.scss b/frontend/src/lib/components/Sharing/SharingModal.scss
@@ -1,4 +1,4 @@
 .SharingPreview {
     padding: 0.5rem;
-    background-color: var(--mid);
+    background-color: var(--bg-3000);
 }
diff --git a/frontend/src/lib/components/TimeSensitiveAuthentication/TimeSensitiveAuthentication.tsx b/frontend/src/lib/components/TimeSensitiveAuthentication/TimeSensitiveAuthentication.tsx
@@ -119,7 +119,7 @@ export function TimeSensitiveAuthenticationArea({ children }: { children: JSX.El
     }, [])
 
     return timeSensitiveAuthenticationRequired ? (
-        <div className="flex-1 bg-side border border-border rounded flex flex-col items-center p-6 text-center w-full">
+        <div className="flex-1 bg-bg-3000 border border-border rounded flex flex-col items-center p-6 text-center w-full">
             <h2>Re-authentication required</h2>
 
             <p>For security purposes, this area requires that you re-authenticate</p>

diff --git a/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.stories.tsx b/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.stories.tsx
@@ -100,7 +100,9 @@ NestedMenu.args = {
                     ],
                 },
             ],
-            footer: <div className="flex items-center h-10 px-2 rounded bg-mid text-muted">I am a custom footer!</div>,
+            footer: (
+                <div className="flex items-center h-10 px-2 rounded bg-bg-3000 text-muted">I am a custom footer!</div>
+            ),
         },
         {
             items: [

diff --git a/frontend/src/lib/lemon-ui/LemonRow/LemonRow.scss b/frontend/src/lib/lemon-ui/LemonRow/LemonRow.scss
@@ -43,7 +43,7 @@
     }
 
     &.LemonRow--status-muted {
-        background: var(--side);
+        background: var(--bg-3000);
     }
 
     &.LemonRow--disabled {

diff --git a/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.stories.tsx b/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.stories.tsx
@@ -62,7 +62,7 @@ SectionedOptions.args = {
             ),
             options: [{ value: 'tomato', label: 'Tomato??', disabled: true }],
             footer: (
-                <div className="bg-side rounded p-2">
+                <div className="bg-bg-3000 rounded p-2">
                     <p className="text-muted max-w-60">
                         I am a custom footer! <br />
                         This might be a good time to tell you about our premium features...

diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
@@ -146,7 +146,7 @@
 
             &.LemonTable__expansion {
                 position: relative;
-                background: var(--side);
+                background: var(--bg-3000);
 
                 > td {
                     // Disable padding inside the expansion for better tailored placement of contents

diff --git a/frontend/src/queries/QueryEditor/QueryEditor.tsx b/frontend/src/queries/QueryEditor/QueryEditor.tsx
@@ -57,7 +57,7 @@ export function QueryEditor(props: QueryEditorProps): JSX.Element {
             <div
                 data-attr="query-editor"
                 className={clsx(
-                    'flex flex-col p-2 bg-mid space-y-2 resize-y overflow-auto h-80 rounded',
+                    'flex flex-col p-2 bg-bg-3000 space-y-2 resize-y overflow-auto h-80 rounded',
                     props.className
                 )}
             >

diff --git a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss
@@ -4,7 +4,7 @@
         column-gap: 1rem;
         width: 700px;
         padding: 0.5rem;
-        background-color: var(--side);
+        background-color: var(--bg-3000);
         border-radius: var(--radius);
 
         @media (max-width: 960px) {

diff --git a/frontend/src/queries/nodes/DataTable/DataTable.scss b/frontend/src/queries/nodes/DataTable/DataTable.scss
@@ -13,7 +13,7 @@
         font-weight: 600;
         color: var(--muted);
         text-align: center;
-        background-color: var(--mid);
+        background-color: var(--bg-3000);
     }
 
     @keyframes DataTable__highlight {

diff --git a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect.tsx b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect.tsx
@@ -73,7 +73,7 @@ const SelectOption = ({ title, description, value, selectedValue }: SelectOption
     <div className="flex p-1 items-center">
         <div
             className={`flex shrink-0 font-bold w-10 h-10 mr-3 justify-center items-center rounded text-xs ${
-                value === selectedValue ? 'bg-primary text-white' : 'bg-mid text-primary-alt'
+                value === selectedValue ? 'bg-primary text-white' : 'bg-bg-3000 text-primary-alt'
             }`}
         >
             {value}

diff --git a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.scss b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.scss
@@ -1,7 +1,7 @@
 .PropertyGroupFilters {
     .property-group {
         padding: 0.5rem;
-        background-color: var(--side);
+        background-color: var(--bg-3000);
         border-width: 1px;
         border-radius: var(--radius);
     }

diff --git a/frontend/src/scenes/PreflightCheck/PreflightCheck.scss b/frontend/src/scenes/PreflightCheck/PreflightCheck.scss
@@ -67,8 +67,8 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        background-color: var(--side);
-        border: 2px solid var(--mid);
+        background-color: var(--bg-3000);
+        border: 2px solid var(--bg-3000);
 
         p {
             margin-bottom: 0;

diff --git a/frontend/src/scenes/apps/ErrorDetailsModal.tsx b/frontend/src/scenes/apps/ErrorDetailsModal.tsx
@@ -102,13 +102,13 @@ function CollapsibleSection(props: {
     const [isExpanded, setIsExpanded] = useState(props.defaultIsExpanded)
 
     return (
-        <div className="bg-mid border rounded">
+        <div className="bg-bg-3000 border rounded">
             <LemonButton
                 fullWidth
                 onClick={() => setIsExpanded(!isExpanded)}
                 sideIcon={isExpanded ? <IconCollapse /> : <IconExpand />}
                 title={isExpanded ? 'Show less' : 'Show more'}
-                className="bg-mid"
+                className="bg-bg-3000"
             >
                 {props.title}
             </LemonButton>

diff --git a/frontend/src/scenes/billing/BillingProduct.tsx b/frontend/src/scenes/billing/BillingProduct.tsx
@@ -94,7 +94,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
             ref={ref}
         >
             <div className="border border-border rounded w-full bg-bg-light" ref={productRef}>
-                <div className="border-b border-border rounded-t bg-mid p-4">
+                <div className="border-b border-border rounded-t bg-bg-3000 p-4">
                     <div className="flex gap-4 items-center justify-between">
                         {getProductIcon(product.name, product.icon_key, 'text-2xl')}
                         <div>

diff --git a/frontend/src/scenes/billing/BillingProductAddon.tsx b/frontend/src/scenes/billing/BillingProductAddon.tsx
@@ -70,7 +70,7 @@ export const BillingProductAddon = ({ addon }: { addon: BillingProductV2AddonTyp
         addon.plans?.find((plan) => plan.plan_key === 'addon-20240404-og-customers')
 
     return (
-        <div className="bg-side rounded p-6 flex flex-col" ref={productRef}>
+        <div className="bg-bg-3000 rounded p-6 flex flex-col" ref={productRef}>
             <div className="flex justify-between gap-x-4">
                 <div className="flex gap-x-4">
                     <div className="w-8">{getProductIcon(addon.name, addon.icon_key, 'text-2xl')}</div>

diff --git a/frontend/src/scenes/billing/PlanComparison.tsx b/frontend/src/scenes/billing/PlanComparison.tsx
@@ -401,7 +401,7 @@ export const PlanComparison = ({
                                         <tr>
                                             <th
                                                 colSpan={3}
-                                                className="PlanTable__th__section bg-side justify-left rounded text-left mb-2"
+                                                className="PlanTable__th__section bg-bg-3000 justify-left rounded text-left mb-2"
                                             >
                                                 <div className="flex items-center gap-x-2 my-2">
                                                     {getProductIcon(

diff --git a/frontend/src/scenes/cohorts/Cohorts.scss b/frontend/src/scenes/cohorts/Cohorts.scss
@@ -6,7 +6,7 @@
 .cohort-recalculating {
     padding: 0.5rem 1rem;
     margin-top: 1rem;
-    background-color: var(--mid);
+    background-color: var(--bg-3000);
     border-radius: var(--radius);
 
     .ant-spin-spinning {

diff --git a/frontend/src/scenes/experiments/Experiment.scss b/frontend/src/scenes/experiments/Experiment.scss
@@ -147,7 +147,7 @@
         min-height: 320px;
         margin-top: 1rem;
         font-size: 24px;
-        background-color: var(--side);
+        background-color: var(--bg-3000);
         border: 1px solid var(--border);
     }
 

diff --git a/frontend/src/scenes/groups/GroupsIntroduction.tsx b/frontend/src/scenes/groups/GroupsIntroduction.tsx
@@ -32,7 +32,7 @@ export function GroupsIntroduction(): JSX.Element {
 
 export function GroupIntroductionFooter({ needsUpgrade }: { needsUpgrade: boolean }): JSX.Element {
     return (
-        <div className="text-sm bg-mid rounded p-2 max-w-60">
+        <div className="text-sm bg-bg-3000 rounded p-2 max-w-60">
             {needsUpgrade ? (
                 <>
                     Track usage of groups of users with Group&nbsp;Analytics.{' '}

diff --git a/frontend/src/scenes/insights/EmptyStates/EmptyStates.tsx b/frontend/src/scenes/insights/EmptyStates/EmptyStates.tsx
@@ -142,7 +142,7 @@ export function InsightLoadingStateWithLoadingBar({
                         </>
                     )}
                 </p>
-                <div className="p-4 rounded bg-mid flex gap-x-2 max-w-120">
+                <div className="p-4 rounded bg-bg-3000 flex gap-x-2 max-w-120">
                     <div className="flex">
                         <IconInfo className="w-4 h-4" />
                     </div>
@@ -190,7 +190,7 @@ export function InsightLoadingState({
             <Animation type={AnimationType.LaptopHog} />
             <div className="empty-state-inner">
                 <p className="mx-auto text-center">Crunching through hogloads of data...</p>
-                <div className="p-4 rounded bg-mid flex gap-x-2 max-w-120">
+                <div className="p-4 rounded bg-bg-3000 flex gap-x-2 max-w-120">
                     <div className="flex">
                         <IconInfo className="w-4 h-4" />
                     </div>
@@ -231,7 +231,7 @@ export function InsightTimeoutState({ queryId }: { queryId?: string | null }): J
                     </div>
                     <h2 className="text-xl leading-tight mb-6">Your query took too long to complete</h2>
                 </>
-                <div className="p-4 rounded bg-mid flex gap-x-2 max-w-120">
+                <div className="p-4 rounded bg-bg-3000 flex gap-x-2 max-w-120">
                     <div className="flex">
                         <IconInfo className="w-4 h-4" />
                     </div>

diff --git a/frontend/src/scenes/insights/filters/ActionFilter/ActionFilter.scss b/frontend/src/scenes/insights/filters/ActionFilter/ActionFilter.scss
@@ -29,7 +29,7 @@
 
         .ActionFilterRow-filters {
             padding: 0.5rem;
-            background-color: var(--side);
+            background-color: var(--bg-3000);
             border-bottom: 1px solid var(--border);
         }
     }

diff --git a/frontend/src/scenes/insights/views/Funnels/CorrelationMatrix.scss b/frontend/src/scenes/insights/views/Funnels/CorrelationMatrix.scss
@@ -35,7 +35,7 @@
             font-weight: bold;
             color: var(--muted);
             text-transform: uppercase;
-            background-color: var(--mid);
+            background-color: var(--bg-3000);
         }
 
         tbody {

diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodePersonFeed/Session.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodePersonFeed/Session.tsx
@@ -52,7 +52,7 @@ export const Session = ({ session }: SessionProps): JSX.Element => {
     }
 
     return (
-        <div className="flex flex-col rounded bg-side border overflow-hidden mb-3" title={session.sessionId}>
+        <div className="flex flex-col rounded bg-bg-3000 border overflow-hidden mb-3" title={session.sessionId}>
             <div className="flex items-center justify-between bg-bg-light p-0.5 pr-2 text-xs">
                 <div className="flex items-center">
                     <LemonButton

diff --git a/frontend/src/scenes/notebooks/Notebook/Notebook.scss b/frontend/src/scenes/notebooks/Notebook/Notebook.scss
@@ -128,7 +128,7 @@
             border-radius: var(--radius);
 
             &:hover {
-                background-color: var(--side);
+                background-color: var(--bg-3000);
             }
 
             & svg {

diff --git a/frontend/src/scenes/pipeline/PipelineNodeMetrics.tsx b/frontend/src/scenes/pipeline/PipelineNodeMetrics.tsx
@@ -353,13 +353,13 @@ function CollapsibleSection(props: {
     const [isExpanded, setIsExpanded] = useState(props.defaultIsExpanded)
 
     return (
-        <div className="bg-mid border rounded">
+        <div className="bg-bg-3000 border rounded">
             <LemonButton
                 fullWidth
                 onClick={() => setIsExpanded(!isExpanded)}
                 sideIcon={isExpanded ? <IconCollapse /> : <IconExpand />}
                 title={isExpanded ? 'Show less' : 'Show more'}
-                className="bg-mid"
+                className="bg-bg-3000"
             >
                 {props.title}
             </LemonButton>

diff --git a/frontend/src/scenes/products/Products.tsx b/frontend/src/scenes/products/Products.tsx
@@ -88,7 +88,7 @@ export function Products(): JSX.Element {
     const { isFirstProductOnboarding } = useValues(onboardingLogic)
 
     return (
-        <div className="flex flex-col flex-1 w-full px-6 items-center justify-center bg-mid h-[calc(100vh-var(--breadcrumbs-height-full)-2*var(--scene-padding))]">
+        <div className="flex flex-col flex-1 w-full px-6 items-center justify-center bg-bg-3000 h-[calc(100vh-var(--breadcrumbs-height-full)-2*var(--scene-padding))]">
             <div className="mb-8">
                 {isFirstProductOnboarding ? (
                     <h2 className="text-center text-4xl">Where do you want to start?</h2>

diff --git a/frontend/src/scenes/project-homepage/ProjectHomepage.scss b/frontend/src/scenes/project-homepage/ProjectHomepage.scss
@@ -46,6 +46,6 @@
         justify-content: center;
         width: 100%;
         padding: 4rem;
-        background-color: var(--side);
+        background-color: var(--bg-3000);
     }
 }
diff --git a/frontend/src/scenes/session-recordings/player/PlayerMeta.scss b/frontend/src/scenes/session-recordings/player/PlayerMeta.scss
@@ -8,7 +8,7 @@
     .PlayerMetaPersonProperties {
         padding: 0.5rem;
         overflow: auto;
-        background: var(--side);
+        background: var(--bg-3000);
         border-bottom: 1px solid transparent;
     }
 

diff --git a/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx b/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx
@@ -108,7 +108,7 @@ export function PlayerInspectorControls({
     }
 
     return (
-        <div className="bg-side border-b pb-2">
+        <div className="bg-bg-3000 border-b pb-2">
             <div className="flex justify-between flex-nowrap">
                 <div className="w-2.5 mb-2 border-b shrink-0" />
                 <TabButtons tabs={tabs} logicProps={logicProps} />

diff --git a/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorList.tsx b/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorList.tsx
@@ -184,7 +184,7 @@ export function PlayerInspectorList(): JSX.Element {
     }
 
     return (
-        <div className="flex flex-col bg-side flex-1 overflow-hidden relative">
+        <div className="flex flex-col bg-bg-3000 flex-1 overflow-hidden relative">
             {!snapshotsLoaded ? (
                 <div className="p-16 text-center text-muted-alt">Data will be shown once playback starts</div>
             ) : items.length ? (
@@ -219,7 +219,7 @@ export function PlayerInspectorList(): JSX.Element {
                         )}
                     </AutoSizer>
                     {syncScrollPaused && (
-                        <div className="absolute bottom-2 left-1/2 translate-x-[-50%] bg-side">
+                        <div className="absolute bottom-2 left-1/2 translate-x-[-50%] bg-bg-3000">
                             <LemonButton
                                 type="secondary"
                                 onClick={() => {

diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx
@@ -241,7 +241,7 @@ function RecordingsLists(): JSX.Element {
 
             <div className={clsx('overflow-y-auto')} onScroll={handleScroll} ref={contentRef}>
                 {!notebookNode && showFilters ? (
-                    <div className="bg-side border-b">
+                    <div className="bg-bg-3000 border-b">
                         <SessionRecordingsFilters
                             advancedFilters={advancedFilters}
                             simpleFilters={simpleFilters}

diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistSettings.tsx b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistSettings.tsx
@@ -12,7 +12,7 @@ export function SessionRecordingsPlaylistSettings(): JSX.Element {
     const { orderBy } = useValues(sessionRecordingsPlaylistLogic)
 
     return (
-        <div className="relative flex flex-col gap-2 p-3 bg-side border-b">
+        <div className="relative flex flex-col gap-2 p-3 bg-bg-3000 border-b">
             <Tooltip
                 title={
                     <div className="text-center">

diff --git a/frontend/src/scenes/trends/persons-modal/PersonsModal.tsx b/frontend/src/scenes/trends/persons-modal/PersonsModal.tsx
@@ -383,7 +383,7 @@ export function ActorRow({ actor, onOpenRecording, propertiesTimelineFilter }: A
             </div>
 
             {expanded ? (
-                <div className="PersonsModal__tabs bg-side border-t rounded-b">
+                <div className="PersonsModal__tabs bg-bg-3000 border-t rounded-b">
                     <LemonTabs
                         activeKey={tab}
                         onChange={setTab}

diff --git a/frontend/src/styles/antd.less b/frontend/src/styles/antd.less
@@ -21,7 +21,7 @@ with SASS, leading to duplicated config. When changing any variable here, please
 @layout-body-background: var(--bg-light);
 @font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Roboto', Helvetica, Arial, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-@table-expanded-row-bg: var(--side);
+@table-expanded-row-bg: var(--bg-3000);
 
 .hide-gte-lg {
     display: none !important;