centralise style variables so toolbar can include rather than duplcia…

…ting
PostHog · Nov 15, 2023 · 29f5254 · 29f5254
1 parent 8ab811d
commit 29f5254
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 94 deletions.
diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss
@@ -544,51 +544,15 @@ body {
     touch-action: manipulation; // Disable double-tap-to-zoom on mobile, making taps slightly snappier
 
     &.posthog-3000[theme='light'] {
-        --text-3000: var(--text-3000-light);
-        --muted-3000: var(--muted-3000-light);
-        --trace-3000: var(--trace-3000-light);
-        --primary-3000: var(--primary-3000-light);
-        --primary-3000-hover: var(--primary-3000-hover-light);
-        --secondary-3000: var(--secondary-3000-light);
-        --secondary-3000-hover: var(--secondary-3000-hover-light);
-        --accent-3000: var(--accent-3000-light);
-        --bg-3000: var(--bg-3000-light);
-        --border-3000: var(--border-3000-light);
-        --border-bold-3000: var(--border-bold-3000-light);
-        --glass-bg-3000: var(--glass-bg-3000-light);
-        --glass-border-3000: var(--glass-border-3000-light);
-        --bg-light: #fff;
-        --link: var(--link-3000-light);
+        @include light-mode-3000-variables;
     }
 
     &.posthog-3000[theme='dark'] {
-        --text-3000: var(--text-3000-dark);
-        --muted-3000: var(--muted-3000-dark);
-        --trace-3000: var(--trace-3000-dark);
-        --primary-3000: var(--primary-3000-dark);
-        --primary-3000-hover: var(--primary-3000-hover-dark);
-        --secondary-3000: var(--secondary-3000-dark);
-        --secondary-3000-hover: var(--secondary-3000-hover-dark);
-        --accent-3000: var(--accent-3000-dark);
-        --bg-3000: var(--bg-3000-dark);
-        --border-3000: var(--border-3000-dark);
-        --border-bold-3000: var(--border-bold-3000-dark);
-        --glass-bg-3000: var(--glass-bg-3000-dark);
-        --glass-border-3000: var(--glass-border-3000-dark);
-        --bg-light: var(--accent-3000);
-        --brand-key: #fff; // In dark mode the black in PostHog's logo is replaced with white for proper contrast
-        --link: var(--link-3000-dark);
+        @include dark-mode-3000-variables;
     }
 
     &.posthog-3000 {
-        --default: var(--text-3000);
-        --muted: var(--muted-3000);
-        --muted-alt: var(--muted-3000);
-        --primary-alt: var(--text-3000);
-        --border: var(--border-3000);
-        --border-bold: var(--border-bold-3000);
-        --mid: var(--bg-3000);
-        --side: var(--bg-3000);
+        @include posthog-3000-variables;
 
         background: var(--bg-3000);
         overflow: hidden; // Each area handles scrolling individually (e.g. navbar, scene, side panel)
@@ -765,7 +729,7 @@ body {
     }
 
     // Hide some parts of the UI that were causing flakiness
-    ::-webkit-scrollbar, // Scrollbar in WebKit/Blink browsers 
+    ::-webkit-scrollbar, // Scrollbar in WebKit/Blink browsers
     .LemonTabs__bar::after, // Active tab slider
     .scrollable::after, // Scrollability indicators
     .scrollable::before {

diff --git a/frontend/src/styles/vars.scss b/frontend/src/styles/vars.scss
@@ -324,3 +324,54 @@ $_lifecycle_dormant: $_danger;
     --notebook-column-left-width: 27rem;
     --notebook-column-right-width: 20rem;
 }
+
+// defined here so that they can be shared with the toolbar
+@mixin light-mode-3000-variables {
+    --text-3000: var(--text-3000-light);
+    --muted-3000: var(--muted-3000-light);
+    --trace-3000: var(--trace-3000-light);
+    --primary-3000: var(--primary-3000-light);
+    --primary-3000-hover: var(--primary-3000-hover-light);
+    --secondary-3000: var(--secondary-3000-light);
+    --secondary-3000-hover: var(--secondary-3000-hover-light);
+    --accent-3000: var(--accent-3000-light);
+    --bg-3000: var(--bg-3000-light);
+    --border-3000: var(--border-3000-light);
+    --border-bold-3000: var(--border-bold-3000-light);
+    --glass-bg-3000: var(--glass-bg-3000-light);
+    --glass-border-3000: var(--glass-border-3000-light);
+    --bg-light: #fff;
+    --link: var(--link-3000-light);
+}
+
+// defined here so that they can be shared with the toolbar
+@mixin dark-mode-3000-variables {
+    --text-3000: var(--text-3000-dark);
+    --muted-3000: var(--muted-3000-dark);
+    --trace-3000: var(--trace-3000-dark);
+    --primary-3000: var(--primary-3000-dark);
+    --primary-3000-hover: var(--primary-3000-hover-dark);
+    --secondary-3000: var(--secondary-3000-dark);
+    --secondary-3000-hover: var(--secondary-3000-hover-dark);
+    --accent-3000: var(--accent-3000-dark);
+    --bg-3000: var(--bg-3000-dark);
+    --border-3000: var(--border-3000-dark);
+    --border-bold-3000: var(--border-bold-3000-dark);
+    --glass-bg-3000: var(--glass-bg-3000-dark);
+    --glass-border-3000: var(--glass-border-3000-dark);
+    --bg-light: var(--accent-3000);
+    --brand-key: #fff; // In dark mode the black in PostHog's logo is replaced with white for proper contrast
+    --link: var(--link-3000-dark);
+}
+
+// defined here so that they can be shared with the toolbar
+@mixin posthog-3000-variables {
+    --default: var(--text-3000);
+    --muted: var(--muted-3000);
+    --muted-alt: var(--muted-3000);
+    --primary-alt: var(--text-3000);
+    --border: var(--border-3000);
+    --border-bold: var(--border-bold-3000);
+    --mid: var(--bg-3000);
+    --side: var(--bg-3000);
+}
diff --git a/frontend/src/toolbar/button/ToolbarButton.scss b/frontend/src/toolbar/button/ToolbarButton.scss
@@ -1,27 +1,9 @@
-// default to light theme
+@import '../../styles/vars';
+
 #button-toolbar {
-    --text-3000: var(--text-3000-light);
-    --muted-3000: var(--muted-3000-light);
-    --trace-3000: var(--trace-3000-light);
-    --primary-3000: var(--primary-3000-light);
-    --primary-3000-hover: var(--primary-3000-hover-light);
-    --secondary-3000: var(--secondary-3000-light);
-    --secondary-3000-hover: var(--secondary-3000-hover-light);
-    --accent-3000: var(--accent-3000-light);
-    --bg-3000: var(--bg-3000-light);
-    --border-3000: var(--border-3000-light);
-    --border-bold-3000: var(--border-bold-3000-light);
-    --glass-bg-3000: var(--glass-bg-3000-light);
-    --glass-border-3000: var(--glass-border-3000-light);
-    --bg-light: #fff;
-    --default: var(--text-3000);
-    --muted: var(--muted-3000);
-    --muted-alt: var(--muted-3000);
-    --primary-alt: var(--text-3000);
-    --border: var(--border-3000);
-    --border-bold: var(--border-bold-3000);
-    --mid: var(--bg-3000);
-    --side: var(--bg-3000);
+    // default to light theme
+    @include light-mode-3000-variables;
+    @include posthog-3000-variables;
 
     user-select: none; // Make the app feel less page-like and more app-like - apps scarcely allow text selection
 
@@ -58,24 +40,10 @@
 }
 
 #button-toolbar[theme='dark'] {
-    --text-3000: var(--text-3000-dark);
-    --muted-3000: var(--muted-3000-dark);
-    --trace-3000: var(--trace-3000-dark);
-    --primary-3000: var(--primary-3000-dark);
-    --primary-3000-hover: var(--primary-3000-hover-dark);
-    --secondary-3000: var(--secondary-3000-dark);
-    --secondary-3000-hover: var(--secondary-3000-hover-dark);
-    --accent-3000: var(--accent-3000-dark);
-    --bg-3000: var(--bg-3000-dark);
-    --border-3000: var(--border-3000-dark);
-    --border-bold-3000: var(--border-bold-3000-dark);
-    --glass-bg-3000: var(--glass-bg-3000-dark);
-    --glass-border-3000: var(--glass-border-3000-dark);
-    --bg-light: var(--accent-3000);
+    @include dark-mode-3000-variables;
 
     // override the mark value so that feature flag overrides are visible _and legible_ in dark mode
     --mark: var(--secondary-3000-hover-dark);
-    --brand-key: #fff; // In dark mode the black in PostHog's logo is replaced with white for proper contrast
 }
 
 .Toolbar3000 {

diff --git a/frontend/src/toolbar/styles.scss b/frontend/src/toolbar/styles.scss
@@ -15,22 +15,6 @@
     font-family: var(--font-sans);
     font-size: 14px;
     line-height: 1.5;
-
-    // Hedgehog mode doesn't use 3000 so, we fallback to standard colors
-    --text-3000: var(--default);
-    --muted-3000: var(--muted);
-    --trace-3000: var(--trace-3000-light);
-    --primary-3000: var(--primary);
-    --primary-3000-hover: var(--primary-light);
-    --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;
 }
 
 .LemonModal__overlay--force-modal-above-popovers {