chore(3000): Fix dark mode colors

PostHog · Jun 22, 2023 · fe02c2a · fe02c2a
1 parent 54b9c98
commit fe02c2a
Show file tree

Hide file tree

Showing 84 changed files with 291 additions and 301 deletions.
diff --git a/frontend/src/exporter/ExportedInsight/ExportedInsight.scss b/frontend/src/exporter/ExportedInsight/ExportedInsight.scss
@@ -5,7 +5,7 @@
     border-radius: var(--radius);
     border: 1px solid var(--border);
     z-index: 3;
-    background: #fff;
+    background: var(--bg-light);
     display: flex;
     flex-direction: column;
 

diff --git a/frontend/src/layout/navigation-3000/Navigation.scss b/frontend/src/layout/navigation-3000/Navigation.scss
@@ -358,7 +358,7 @@
         --sidebar-list-item-marker-offset: var(--sidebar-list-item-ribbon-width);
         &::before {
             width: var(--sidebar-list-item-ribbon-width);
-            height: calc(100% + 1px);
+            height: 100%;
             background: var(--sidebar-list-item-status-color);
         }
     }

diff --git a/frontend/src/layout/navigation/ProjectSwitcher.tsx b/frontend/src/layout/navigation/ProjectSwitcher.tsx
@@ -16,11 +16,7 @@ export function ProjectName({ team }: { team: TeamBasicType }): JSX.Element {
     return (
         <div className="flex items-center">
             <span>{team.name}</span>
-            {team.is_demo ? (
-                <LemonSnack className="ml-2 text-xs shrink-0" color="primary-extralight">
-                    Demo
-                </LemonSnack>
-            ) : null}
+            {team.is_demo ? <LemonSnack className="ml-2 text-xs shrink-0">Demo</LemonSnack> : null}
         </div>
     )
 }

diff --git a/frontend/src/layout/navigation/TopBar/TopBar.scss b/frontend/src/layout/navigation/TopBar/TopBar.scss
@@ -145,7 +145,7 @@
     position: absolute;
     top: -0.375rem;
     right: -0.375rem;
-    color: var(--white);
+    color: #fff;
     background: var(--danger);
     font-size: 0.75rem;
     box-sizing: content-box;

diff --git a/frontend/src/lib/colors.ts b/frontend/src/lib/colors.ts
@@ -100,7 +100,7 @@ export function gradateColor(
     hsl: [number, number, number],
     strength: number,
     floor: number = 0
-): `hsl(${number} ${number}% ${number}%)` {
+): `hsla(${number}, ${number}%, ${number}%, ${string})` {
     const saturation = floor + (1 - floor) * strength
-    return `hsl(${hsl[0]} ${hsl[1]}% ${100 - (100 - hsl[2]) * saturation}%)`
+    return `hsla(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%, ${saturation.toPrecision(3)})`
 }
diff --git a/frontend/src/lib/components/BridgePage/BridgePage.scss b/frontend/src/lib/components/BridgePage/BridgePage.scss
@@ -79,7 +79,7 @@
             background-color: var(--default);
             border-radius: 0.75rem;
             padding: 0.5rem 0.75rem;
-            color: var(--white);
+            color: #fff;
             font-size: 0.8em;
             font-weight: 600;
 

diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightCard.scss b/frontend/src/lib/components/Cards/InsightCard/InsightCard.scss
@@ -157,7 +157,7 @@
 .SeriesDisplay__arrow {
     flex-shrink: 0;
     margin-right: 0.25rem;
-    color: var(--border-dark);
+    color: var(--border-bold);
     font-size: 1.25rem;
     vertical-align: middle;
 }
diff --git a/frontend/src/lib/components/Cards/TextCard/TextCard.scss b/frontend/src/lib/components/Cards/TextCard/TextCard.scss
@@ -1,5 +1,5 @@
 .TextCard {
-    background: #fff;
+    background: var(--bg-light);
 }
 
 .TextCard-Body {

diff --git a/frontend/src/lib/components/CodeSnippet/CodeSnippet.scss b/frontend/src/lib/components/CodeSnippet/CodeSnippet.scss
@@ -14,7 +14,7 @@
             box-shadow: transparent !important;
 
             .LemonIcon {
-                color: var(--white);
+                color: #fff;
             }
         }
     }

diff --git a/frontend/src/lib/components/CodeSnippet/index.tsx b/frontend/src/lib/components/CodeSnippet/index.tsx
@@ -1,5 +1,6 @@
 import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter'
 import okaidia from 'react-syntax-highlighter/dist/esm/styles/prism/okaidia'
+import synthwave84 from 'react-syntax-highlighter/dist/esm/styles/prism/synthwave84'
 import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash'
 import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx'
 import javascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript'
@@ -23,6 +24,9 @@ import { PopconfirmProps } from 'antd/lib/popconfirm'
 import './CodeSnippet.scss'
 import { IconCopy } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { useValues } from 'kea'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { FEATURE_FLAGS } from 'lib/constants'
 
 export enum Language {
     Text = 'text',
@@ -75,7 +79,7 @@ export interface Action {
 }
 
 export interface CodeSnippetProps {
-    children?: string
+    children: string
     language?: Language
     wrap?: boolean
     actions?: Action[]
@@ -93,6 +97,8 @@ export function CodeSnippet({
     copyDescription = 'code snippet',
     hideCopyButton = false,
 }: CodeSnippetProps): JSX.Element {
+    const { featureFlags } = useValues(featureFlagLogic)
+
     return (
         // eslint-disable-next-line react/forbid-dom-props
         <div className="CodeSnippet" style={style}>
@@ -118,7 +124,7 @@ export function CodeSnippet({
                 )}
             </div>
             <SyntaxHighlighter
-                style={okaidia}
+                style={featureFlags[FEATURE_FLAGS.POSTHOG_3000] ? synthwave84 : okaidia}
                 language={language}
                 wrapLines={wrap}
                 lineProps={{ style: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' } }}

diff --git a/frontend/src/lib/components/CommandPalette/index.scss b/frontend/src/lib/components/CommandPalette/index.scss
@@ -19,9 +19,9 @@
     width: 36rem;
     max-width: 100%;
     max-height: 60%;
-    color: var(--inverse);
+    color: #fff;
     border-radius: var(--radius);
-    background-color: var(--default);
+    background-color: var(--bg-3000-dark);
     overflow: hidden;
 
     @media (max-width: 500px) {

diff --git a/frontend/src/lib/components/DateDisplay/DateDisplay.scss b/frontend/src/lib/components/DateDisplay/DateDisplay.scss
@@ -3,7 +3,7 @@
     margin-right: 4px;
     padding: 2px 4px;
     border: 1px solid var(--border-light);
-    background-color: #fff;
+    background-color: var(--bg-light);
     border-radius: var(--radius);
     white-space: nowrap;
 }

diff --git a/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss b/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss
@@ -38,7 +38,7 @@
     height: 2rem;
     border: 1px solid var(--border);
     border-radius: 0.25rem;
-    background-color: #fff;
+    background-color: var(--bg-light);
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;

diff --git a/frontend/src/lib/components/DebugNotice.tsx b/frontend/src/lib/components/DebugNotice.tsx
@@ -28,7 +28,7 @@ export function DebugNotice(): JSX.Element | null {
     }
 
     return (
-        <div className="bg-white cursor-pointer border-t" onClick={() => setNoticeHidden(true)}>
+        <div className="bg-bg-light cursor-pointer border-t" onClick={() => setNoticeHidden(true)}>
             <div className="p-2 border-l-4 border-primary text-primary-dark  truncate flex justify-between">
                 <b>DEBUG mode</b>
                 <LemonButton

diff --git a/frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.scss b/frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.scss
@@ -10,6 +10,6 @@
     &--selected {
         background: var(--primary-highlight);
         color: black;
-        border-color: var(--primary-extralight);
+        border-color: var(--primary-highlight);
     }
 }
diff --git a/frontend/src/lib/components/ObjectTags/ObjectTags.tsx b/frontend/src/lib/components/ObjectTags/ObjectTags.tsx
@@ -123,7 +123,7 @@ export function ObjectTags({
                         style={{
                             cursor: 'pointer',
                             borderStyle: 'dashed',
-                            backgroundColor: '#ffffff',
+                            backgroundColor: 'var(--bg-light)',
                             display: addingNewTag ? 'none' : 'initial',
                         }}
                         icon={<PlusOutlined />}

diff --git a/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.scss b/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.scss
@@ -6,7 +6,7 @@
         width: 900px;
         max-width: 100%;
         min-width: 300px;
-        background: white;
+        background: var(--bg-light);
 
         .TaxonomicPropertyFilter__row__items {
             > :first-child {

diff --git a/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.scss b/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.scss
@@ -64,12 +64,12 @@
 
         &.selected {
             background-color: var(--primary);
-            color: white;
+            color: #fff;
         }
     }
 
     .condition-option {
-        background-color: white;
+        background-color: var(--bg-light);
         padding: 0.5rem;
         margin-left: 0.5rem;
         margin-right: 0.5rem;

diff --git a/frontend/src/lib/components/TZLabel/index.scss b/frontend/src/lib/components/TZLabel/index.scss
@@ -2,7 +2,7 @@
     white-space: nowrap;
 
     &.tz-label--hoverable {
-        border-bottom: 1px dotted var(--border-dark);
+        border-bottom: 1px dotted var(--border-bold);
         cursor: default;
     }
 }

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

diff --git a/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.scss b/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.scss
@@ -1,10 +1,14 @@
 .taxonomic-filter {
     width: 550px;
     max-width: calc(100vw - 40px);
-    background: white;
+    background: var(--bg-light);
     display: flex;
     flex-direction: column;
 
+    .posthog-3000 & {
+        background: var(--bg-3000);
+    }
+
     &.force-minimum-width {
         min-width: 300px;
     }
@@ -49,7 +53,7 @@
                 cursor: not-allowed;
             }
             &.taxonomic-pill-active {
-                color: var(--inverse);
+                color: #fff;
                 background: var(--primary);
                 border-color: var(--primary);
             }

diff --git a/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.stories.tsx b/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.stories.tsx
@@ -33,7 +33,7 @@ export const EventsFree: ComponentStoryFn<typeof TaxonomicFilter> = (args) => {
         setIndex(1)
     }, [])
     return (
-        <div className="w-fit border rounded p-2 bg-white">
+        <div className="w-fit border rounded p-2 bg-bg-light">
             <TaxonomicFilter {...args} />
         </div>
     )
@@ -79,7 +79,7 @@ Actions.args = {
 
 export const Properties: ComponentStoryFn<typeof TaxonomicFilter> = (args) => {
     return (
-        <div className="w-fit border rounded p-2 bg-white">
+        <div className="w-fit border rounded p-2 bg-bg-light">
             <TaxonomicFilter {...args} />
         </div>
     )

diff --git a/frontend/src/lib/components/UniversalSearch/UniversalSearch.scss b/frontend/src/lib/components/UniversalSearch/UniversalSearch.scss
@@ -17,7 +17,7 @@
 }
 
 .universal-search-popover {
-    background: white;
+    background: var(--bg-light);
     display: flex;
     flex-direction: column;
 

diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
@@ -18,6 +18,7 @@
     line-height: 1.5rem;
     font-weight: 500;
     cursor: pointer;
+    user-select: none;
     -webkit-appearance: none !important; // Important as this gets overridden by Ant styles...
 
     &.LemonButton--disabled {
@@ -122,6 +123,7 @@
         font-size: 1.5rem;
         flex-shrink: 0;
         transition: color 200ms ease;
+        justify-items: center;
     }
 
     // LemonStealth has some specific styles
@@ -187,25 +189,25 @@
 
             // Primary - blocked color style
             &.LemonButton--primary {
-                color: var(--white);
+                color: #fff;
                 background: var(--#{$status});
                 .LemonButton__icon {
-                    color: var(--white);
+                    color: #fff;
                 }
 
                 &:not(.LemonButton--disabled):hover,
                 &.LemonButton--active {
-                    color: var(--white);
+                    color: #fff;
                     background: var(--#{$status}-light, var(--#{$status}));
                     .LemonButton__icon {
-                        color: var(--white);
+                        color: #fff;
                     }
                 }
                 &:not(.LemonButton--disabled):active {
                     background: var(--#{$status}-dark, var(--#{$status}));
-                    color: var(--white);
+                    color: #fff;
                     .LemonButton__icon {
-                        color: var(--white);
+                        color: #fff;
                     }
                 }
             }
@@ -260,6 +262,11 @@
         &.LemonButton--primary {
             color: #fff;
             background: var(--primary-3000);
+            &:not(.LemonButton--disabled):hover,
+            &.LemonButton--active {
+                background: var(--primary-3000-hover);
+                color: var(--default);
+            }
             .LemonButton__icon {
                 color: #fff;
             }
@@ -268,6 +275,11 @@
         &.LemonButton--secondary {
             color: var(--default);
             background: var(--secondary-3000);
+            &:not(.LemonButton--disabled):hover,
+            &.LemonButton--active {
+                background: var(--secondary-3000-hover);
+                color: var(--default);
+            }
             .LemonButton__icon {
                 color: var(--default);
             }
@@ -304,11 +316,4 @@
     .LemonButtonWithSideAction--small & {
         right: 0.375rem;
     }
-
-    &.LemonButton--status-primary {
-        &:hover {
-            // NOTE: this is a rare case where we specify a unique hover style. Only primary status is supported
-            background: var(--primary-extralight);
-        }
-    }
 }
diff --git a/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss b/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss
@@ -25,7 +25,7 @@
             height: 1rem;
             transition: border 200ms ease, background 200ms ease;
             background: var(--bg-light);
-            border: 1.5px solid var(--border-dark);
+            border: 1.5px solid var(--border-bold);
             border-radius: 3px; // Intentionally a bit smaller than --radius
             flex-shrink: 0;
 

diff --git a/frontend/src/lib/lemon-ui/LemonLabel/LemonLabel.stories.tsx b/frontend/src/lib/lemon-ui/LemonLabel/LemonLabel.stories.tsx
@@ -33,7 +33,7 @@ Basic.args = {
 function ExplanationModal({ setOpen, open }: { setOpen: (open: boolean) => void; open: boolean }): JSX.Element {
     return (
         <LemonModal title="Let me explain you the label" isOpen={open} onClose={() => setOpen(false)}>
-            <div className="bg-white w-full max-w-lg h-full ml-auto relative z-10 overflow-auto">
+            <div className="bg-bg-light w-full max-w-lg h-full ml-auto relative z-10 overflow-auto">
                 <h3 className="text-lg text-semibold opacity-50 m-0">Labels are awesome.</h3>
                 <p>They truly are.</p>
             </div>

diff --git a/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss b/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss
@@ -68,7 +68,7 @@
     &.LemonSegmentedButton__option--selected {
         .LemonButton,
         .LemonButton__icon {
-            color: var(--white);
+            color: #fff;
         }
         .LemonButton {
             &:hover,

diff --git a/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.scss b/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.scss
@@ -63,7 +63,7 @@
 }
 
 .LemonSelectMultipleDropdown {
-    background: #fff;
+    background: var(--bg-light);
     padding: 0.5rem;
     border-radius: var(--radius);
     border: 1px solid var(--primary);