From 3312560cbdd68917ed500f02b04a9cd599b5295c Mon Sep 17 00:00:00 2001
From: Adam Leith <adamleithp@users.noreply.github.com>
Date: Sat, 22 Feb 2025 23:57:04 +0000
Subject: [PATCH 1/2] fix: added input story with all input elements to show
 contrast against surfaces

---
 .../lemon-ui/LemonCheckbox/LemonCheckbox.scss |  8 +--
 .../lib/lemon-ui/LemonSlider/LemonSlider.tsx  |  2 +-
 .../lib/lemon-ui/LemonSwitch/LemonSwitch.scss |  2 +-
 frontend/src/lib/ui/Inputs.stories.tsx        | 64 +++++++++++++++++++
 frontend/src/styles/base.scss                 |  6 +-
 frontend/tailwind.config.js                   |  3 +-
 6 files changed, 76 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/lib/ui/Inputs.stories.tsx

diff --git a/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss b/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss
index e6f764dbc9c80..78d455cee266e 100644
--- a/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss
+++ b/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss
@@ -33,13 +33,13 @@
             flex-shrink: 0;
             width: 1rem;
             height: 1rem;
-            background: var(--bg-surface-primary);
-            border: 1.5px solid var(--border-bold);
+            background: var(--bg-fill-input);
+            border: 1.5px solid var(--border-primary);
             border-radius: 0.25rem; // Intentionally a bit smaller than --radius
             transition: border 200ms ease, background 200ms ease;
 
             path {
-                stroke: var(--bg-surface-primary);
+                stroke: var(--text-primary-inverse);
                 stroke-dasharray: var(--tick-length);
                 stroke-dashoffset: var(--tick-length);
                 transition: stroke-dashoffset 200ms ease;
@@ -98,7 +98,7 @@
         label {
             min-height: var(--lemon-checkbox-height);
             padding: 0 0.75rem;
-            background: var(--bg-surface-primary);
+            background: var(--bg-fill-input);
             border: 1px solid var(--border-primary);
             border-radius: var(--radius);
         }
diff --git a/frontend/src/lib/lemon-ui/LemonSlider/LemonSlider.tsx b/frontend/src/lib/lemon-ui/LemonSlider/LemonSlider.tsx
index 0c9b77d3a6556..eceb5765232f8 100644
--- a/frontend/src/lib/lemon-ui/LemonSlider/LemonSlider.tsx
+++ b/frontend/src/lib/lemon-ui/LemonSlider/LemonSlider.tsx
@@ -115,7 +115,7 @@ export function LemonSlider({ value = 0, onChange, min, max, step = 1, className
                     setDragging(true)
                 }}
             >
-                <div className="w-full bg-fill-slider-rail rounded-full h-[6px]" />
+                <div className="w-full bg-fill-muted rounded-full h-[6px]" />
             </div>
             <div
                 className="absolute h-[6px] bg-accent-primary rounded-full pointer-events-none"
diff --git a/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss b/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss
index 56d3829446af9..850f83ddd1ee7 100644
--- a/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss
+++ b/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss
@@ -111,7 +111,7 @@
     width: 100%;
     height: 100%;
     pointer-events: none;
-    background-color: var(--bg-fill-switch);
+    background-color: var(--bg-fill-muted);
     border: 1px solid var(--border-primary);
     border-radius: var(--lemon-switch-height);
     transition: background-color 100ms ease;
diff --git a/frontend/src/lib/ui/Inputs.stories.tsx b/frontend/src/lib/ui/Inputs.stories.tsx
new file mode 100644
index 0000000000000..47789e51986e9
--- /dev/null
+++ b/frontend/src/lib/ui/Inputs.stories.tsx
@@ -0,0 +1,64 @@
+import { LemonCheckbox, LemonSwitch } from '@posthog/lemon-ui'
+import { Meta } from '@storybook/react'
+import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput'
+import { LemonRadio } from 'lib/lemon-ui/LemonRadio/LemonRadio'
+import { LemonSlider } from 'lib/lemon-ui/LemonSlider/LemonSlider'
+import { useState } from 'react'
+
+const meta: Meta = {
+    title: 'Design System/Inputs',
+    tags: ['autodocs'],
+}
+export default meta
+
+function GetAllInputs(): JSX.Element {
+    const [checked, setChecked] = useState(false)
+    const [radioValue, setRadioValue] = useState('this')
+
+    return (
+        <div className="flex flex-col gap-2">
+            <LemonInput />
+            <LemonInput placeholder="Placeholder" />
+            <LemonInput disabled />
+            <LemonInput disabled />
+            <LemonInput value={"I'm pre-filled"} />
+            <LemonSlider max={100} min={0} value={50} />
+            <LemonCheckbox label="Checkbox" />
+            <LemonCheckbox label="Checkbox" disabledReason="This is not the way to Amarillo" />
+            <LemonCheckbox label="Checkbox" checked />
+            <LemonRadio
+                value={radioValue}
+                options={[
+                    { label: 'This', value: 'this' },
+                    { label: 'That', value: 'that' },
+                ]}
+                onChange={setRadioValue}
+            />
+            <LemonRadio
+                value={radioValue}
+                options={[
+                    { label: 'This', value: 'this', disabledReason: 'This is not the way to Amarillo' },
+                    { label: 'That', value: 'that' },
+                ]}
+                onChange={setRadioValue}
+            />
+            <LemonSwitch checked={checked} onChange={() => setChecked(!checked)} />
+            <LemonSwitch checked={checked} bordered onChange={() => setChecked(!checked)} />
+            <LemonSwitch checked={true} disabledReason="This is not the way to Amarillo" />
+            <LemonSwitch checked={false} />
+            <LemonSwitch checked={false} bordered />
+            <LemonSwitch checked={false} disabledReason="This is not the way to Amarillo" />
+        </div>
+    )
+}
+
+export const AllInputs = (): JSX.Element => {
+    return (
+        <div className="space-y-2">
+            <div className="bg-primary p-4">{GetAllInputs()}</div>
+            <div className="bg-surface-primary p-4">{GetAllInputs()}</div>
+            <div className="bg-surface-secondary p-4">{GetAllInputs()}</div>
+            <div className="bg-surface-tertiary p-4">{GetAllInputs()}</div>
+        </div>
+    )
+}
diff --git a/frontend/src/styles/base.scss b/frontend/src/styles/base.scss
index f88a9342fede9..a99f2632a748f 100644
--- a/frontend/src/styles/base.scss
+++ b/frontend/src/styles/base.scss
@@ -396,6 +396,9 @@
     --bg-fill-secondary: var(--primitive-3000-25);
     --bg-fill-tertiary: var(--primitive-3000-50);
 
+    // A fill to always ensure contrast
+    --bg-fill-muted: color-mix(in oklab, var(--color-black) 10%, transparent);
+
     // Highlights
     --bg-fill-primary-highlight: color-mix(
         in oklab,
@@ -437,7 +440,6 @@
     // Inputs
     --bg-fill-input: var(--color-white);
     --bg-fill-switch: var(--primitive-neutral-cool-250);
-    --bg-fill-slider-rail: color-mix(in oklab, var(--color-black) 10%, transparent);
 
     // Content (text, icons)
     // //////////////////////////////////////////////////////////
@@ -822,6 +824,7 @@
     --bg-fill-primary: var(--primitive-neutral-cool-900);
     --bg-fill-secondary: var(--primitive-neutral-cool-850);
     --bg-fill-tertiary: var(--primitive-neutral-cool-800);
+    --bg-fill-muted: color-mix(in oklab, var(--color-white) 15%, transparent);
     --bg-fill-info-secondary: var(--color-blue-950);
     --bg-fill-info-tertiary: var(--color-blue-950);
     --bg-fill-warning-secondary: var(--color-yellow-950);
@@ -836,7 +839,6 @@
     --bg-fill-primary-highlight: color-mix(in oklab, var(--color-primary-950) 50%, transparent);
     --bg-fill-input: var(--primitive-neutral-cool-850);
     --bg-fill-switch: var(--primitive-neutral-cool-900);
-    --bg-fill-slider-rail: color-mix(in oklab, var(--color-white) 15%, transparent);
 
     // Content (text, icons) (dark mode)
     // //////////////////////////////////////////////////////////
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 47b9aa854d672..34426d2c1c8b1 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -633,6 +633,7 @@ const config = {
                 'fill-primary': 'var(--bg-fill-primary)',
                 'fill-secondary': 'var(--bg-fill-secondary)',
                 'fill-tertiary': 'var(--bg-fill-tertiary)',
+                'fill-muted': 'var(--bg-fill-muted)',
                 'fill-primary-highlight': 'var(--bg-fill-primary-highlight)',
                 'fill-info-secondary': 'var(--bg-fill-info-secondary)',
                 'fill-info-tertiary': 'var(--bg-fill-info-tertiary)',
@@ -648,7 +649,7 @@ const config = {
                 'fill-success-highlight': 'var(--bg-fill-success-highlight)',
                 'fill-input': 'var(--bg-fill-input)',
                 'fill-switch': 'var(--bg-fill-switch)',
-                'fill-slider-rail': 'var(--bg-fill-slider-rail)',
+                'fill-checkbox': 'var(--bg-fill-checkbox)',
             },
             textColor: {
                 ...commonColors,

From 02b760ac970ade101b539c03b668a1bdc8943158 Mon Sep 17 00:00:00 2001
From: Adam Leith <adamleithp@users.noreply.github.com>
Date: Sun, 23 Feb 2025 00:05:19 +0000
Subject: [PATCH 2/2] fix: hide wrapping div around BillingAlert /
 ProjectNotice if neither are to be shown

---
 frontend/src/layout/navigation-3000/Navigation.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/layout/navigation-3000/Navigation.tsx b/frontend/src/layout/navigation-3000/Navigation.tsx
index b0d5ba5be1dfd..636e6ae622915 100644
--- a/frontend/src/layout/navigation-3000/Navigation.tsx
+++ b/frontend/src/layout/navigation-3000/Navigation.tsx
@@ -60,10 +60,13 @@ export function Navigation({
                         sceneConfig?.layout === 'app-raw-no-header' && 'Navigation3000__scene--raw-no-header'
                     )}
                 >
-                    <div className={sceneConfig?.layout === 'app-raw-no-header' ? 'px-4' : ''}>
-                        {!sceneConfig?.hideBillingNotice && <BillingAlertsV2 />}
-                        {!sceneConfig?.hideProjectNotice && <ProjectNotice />}
-                    </div>
+                    {(!sceneConfig?.hideBillingNotice || !sceneConfig?.hideProjectNotice) && (
+                        <div className={sceneConfig?.layout === 'app-raw-no-header' ? 'px-4' : ''}>
+                            {!sceneConfig?.hideBillingNotice && <BillingAlertsV2 />}
+                            {!sceneConfig?.hideProjectNotice && <ProjectNotice />}
+                        </div>
+                    )}
+
                     {children}
                 </div>
             </main>