fix: max tool style changes + fix lemon button dark to use accent (#40518)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

common/tailwind/tailwind.config.js

@@ -32,7 +32,6 @@ const deprecatedColors = {
     'glass-border-3000-light': 'var(--glass-border-3000-light)',
     'link-3000-light': 'var(--link-3000-light)',
     'primary-3000-frame-bg-light': 'var(--primary-3000-frame-bg-light)',
-    'primary-3000-button-bg-light': 'var(--primary-3000-button-bg-light)',
     'primary-3000-button-border-light': 'var(--primary-3000-button-border-light)',
     'primary-3000-button-border-hover-light': 'var(--primary-3000-button-border-hover-light)',
     'secondary-3000-frame-bg-light': 'var(--secondary-3000-frame-bg-light)',
@@ -64,7 +63,6 @@ const deprecatedColors = {
     'glass-border-3000-dark': 'var(--glass-border-3000-dark)',
     'link-3000-dark': 'var(--link-3000-dark)',
     'primary-3000-frame-bg-dark': 'var(--primary-3000-frame-bg-dark)',
-    'primary-3000-button-bg-dark': 'var(--primary-3000-button-bg-dark)',
     'primary-3000-button-border-dark': 'var(--primary-3000-button-border-dark)',
     'primary-3000-button-border-hover-dark': 'var(--primary-3000-button-border-hover-dark)',
     'primary-alt-highlight-dark': 'var(--primary-alt-highlight-dark)',

frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss

@@ -208,7 +208,6 @@
             --lemon-button-bg-color-active: var(--lemon-button-bg-color);
             --button-border-color: var(--primary-3000-button-border);
             --lemon-button-border-color-hover: var(--primary-3000-button-border-hover);
-            --lemon-button-frame-bg-color: var(--primary-3000-button-bg-dark);
             --lemon-button-color: var(--text-3000-light);
         }
     }

frontend/src/lib/lemon-ui/colors.stories.tsx

@@ -112,7 +112,6 @@ const threeThousand = [
 
     ['bg-link-3000-light', 'bg-red-500'],
     ['bg-primary-3000-frame-bg-light', 'bg-red-500'],
-    ['bg-primary-3000-button-bg-light', 'bg-red-500'],
     ['bg-primary-3000-button-border-light', 'bg-red-500'],
     ['bg-primary-3000-button-border-hover-light', 'bg-red-500'],
 

frontend/src/scenes/max/MaxTool.tsx

@@ -4,9 +4,9 @@ import React from 'react'
 import { IconSparkles, IconWrench } from '@posthog/icons'
 import { Tooltip } from '@posthog/lemon-ui'
 
+import { AnimatedSparkles } from './components/AnimatedSparkles'
 import { ToolRegistration } from './max-constants'
 import { useMaxTool } from './useMaxTool'
-import { generateBurstPoints } from './utils'
 
 interface MaxToolProps extends Omit<ToolRegistration, 'name' | 'description'> {
     /** The child element(s) that will be wrapped by this component */
@@ -70,7 +70,7 @@ export function MaxTool({
                 >
                     <button
                         className={clsx(
-                            'absolute z-10 transition duration-50 cursor-pointer -scale-x-100 hover:scale-y-110 hover:-scale-x-110',
+                            'absolute z-10 transition duration-50 cursor-pointer -scale-x-100 hover:scale-y-110 hover:-scale-x-110 rounded-lg border border-dashed border-accent size-7 backdrop-blur-[2px] bg-[rgba(255,255,255,0.5)] dark:bg-[rgba(0,0,0,0.5)]',
                             position === 'top-right' && '-top-2 -right-2',
                             position === 'bottom-right' && '-bottom-2 -right-2',
                             position === 'top-left' && '-top-2 -left-2',
@@ -79,11 +79,7 @@ export function MaxTool({
                         type="button"
                         onClick={openMax || undefined}
                     >
-                        {/* Burst border - the inset and size vals are very specific just bc these look nice */}
-                        <svg className="absolute -inset-1 size-8" viewBox="0 0 100 100">
-                            <polygon points={generateBurstPoints(16, 3 / 16)} fill="var(--primary-3000)" />
-                        </svg>
-                        <IconSparkles className="relative size-6 pl-0.5 pb-0.5 text-bg-light" />
+                        <AnimatedSparkles className="relative size-full pl-0.5 pb-0.5" />
                     </button>
                 </Tooltip>
                 {typeof Children === 'function' ? <Children toolAvailable={true} /> : Children}

frontend/src/scenes/max/components/AnimatedSparkles.scss

@@ -0,0 +1,55 @@
+.sparkles-container {
+    position: relative;
+    display: inline-block;
+}
+
+.sparkle {
+    position: absolute;
+    transition: all 0.3s ease-out;
+    transform-origin: center;
+}
+
+.sparkles-container:hover .sparkle,
+.sparkles-container.animate .sparkle {
+    transform: scale(1);
+    animation: Sparkle__pulse 1.3s ease-in-out infinite;
+}
+
+.sparkle--small {
+    top: 3px;
+    left: 9px;
+    animation-delay: 0s;
+}
+
+.sparkle--medium {
+    top: 6px;
+    left: 13px;
+    animation-delay: 0.1s;
+}
+
+.sparkle--large {
+    right: 9px;
+    bottom: 3px;
+    animation-delay: 0.2s;
+}
+
+@keyframes Sparkle__pulse {
+    0% {
+        opacity: 1;
+        transform: scale(1);
+    }
+
+    20% {
+        opacity: 1;
+        transform: scale(1.1);
+    }
+
+    90% {
+        opacity: 0.3;
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}

frontend/src/scenes/max/components/AnimatedSparkles.tsx

@@ -0,0 +1,47 @@
+import './AnimatedSparkles.scss'
+
+interface SparkleProps {
+    size?: number
+    className?: string
+    delay?: number
+}
+
+function Sparkle({ size = 14, className = '', delay = 0 }: SparkleProps): JSX.Element {
+    return (
+        <svg
+            width={size}
+            height={size + 1}
+            viewBox="0 0 14 15"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className={`sparkle ${className} fill-accent dark:fill-white`}
+            style={{
+                animationDelay: `${delay}ms`,
+            }}
+        >
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M7 0C7 0 6.49944 2.07875 6.08971 3.78113C5.76569 5.12694 4.77707 6.17975 3.50849 6.5303C1.9232 6.96825 0 7.50005 0 7.50005C0 7.50005 1.9232 8.03143 3.50849 8.46949C4.77707 8.82025 5.76569 9.87317 6.08971 11.2189C6.49944 12.9214 7 15 7 15C7 15 7.50056 12.9214 7.91029 11.2189C8.23441 9.87317 9.22293 8.82025 10.4918 8.46949C12.0769 8.03143 14 7.50005 14 7.50005C14 7.50005 12.0769 6.96825 10.4918 6.5303C9.22293 6.17975 8.23441 5.12694 7.91029 3.78113C7.50056 2.07875 7 0 7 0Z"
+                fill="inherit"
+            />
+        </svg>
+    )
+}
+
+interface AnimatedSparklesProps {
+    className?: string
+    triggerAnimation?: boolean
+}
+
+export function AnimatedSparkles({ className = '', triggerAnimation = false }: AnimatedSparklesProps): JSX.Element {
+    return (
+        <div className={`sparkles-container ${triggerAnimation ? 'animate' : ''} ${className}`}>
+            <Sparkle key={0} size={5} delay={300} className="sparkle sparkle--small" />
+            <Sparkle key={1} size={8} delay={150} className="sparkle sparkle--medium" />
+            <Sparkle key={2} size={13} delay={0} className="sparkle sparkle--large" />
+        </div>
+    )
+}
+
+export default AnimatedSparkles

frontend/src/scenes/max/utils.ts

@@ -136,29 +136,6 @@ export function isDeepResearchReportCompletion(message: NotebookUpdateMessage):
     )
 }
 
-export function generateBurstPoints(spikeCount: number, spikiness: number): string {
-    if (spikiness < 0 || spikiness > 1) {
-        throw new Error('Spikiness must be between 0 and 1')
-    }
-    if (spikeCount < 1) {
-        throw new Error('Spikes must be at least 1')
-    }
-
-    let points = ''
-    const outerRadius = 50
-    const innerRadius = 50 * (1 - spikiness)
-
-    for (let i = 0; i < spikeCount * 2; i++) {
-        const radius = i % 2 === 0 ? outerRadius : innerRadius
-        const angle = (Math.PI * i) / spikeCount
-        const x = 50 + radius * Math.cos(angle)
-        const y = 50 + radius * Math.sin(angle)
-        points += `${x},${y} `
-    }
-
-    return points.trim()
-}
-
 // Utility functions for transforming data to max context
 export const insightToMaxContext = (
     insight: Partial<QueryBasedInsightModel>,

frontend/src/styles/base.scss

@@ -800,7 +800,7 @@
     --glass-border-3000-dark: var(--border-3000-dark);
     --link-3000-dark: #f1a82c;
     --primary-3000-frame-bg-dark: #926826;
-    --primary-3000-button-bg-dark: #e0a045;
+    --primary-3000-button-bg-dark: var(--color-accent);
     --primary-3000-button-border-dark: #b17816;
     --primary-3000-button-border-hover-dark: #8e5b03;
     --primary-alt-highlight-dark: #232429;
@@ -833,7 +833,7 @@
     --color-bg-table: #f9faf7;
     --link: var(--link-3000-light);
     --primary-3000-frame-bg: var(--primary-3000-frame-bg-light);
-    --primary-3000-button-bg: var(--primary-3000-button-bg-light);
+    --primary-3000-button-bg: var(--color-white);
     --primary-3000-button-border: var(--primary-3000-button-border-light);
     --primary-3000-button-border-hover: var(--primary-3000-button-border-hover-light);
     --primary-alt-highlight: var(--primary-alt-highlight-light);
@@ -1032,7 +1032,7 @@
     --link: var(--link-3000-dark);
     --shadow-elevation-3000: var(--shadow-elevation-3000-dark);
     --primary-3000-frame-bg: var(--primary-3000-frame-bg-dark);
-    --primary-3000-button-bg: var(--primary-3000-button-bg-dark);
+    --primary-3000-button-bg: var(--color-accent);
     --primary-3000-button-border: var(--primary-3000-button-border-dark);
     --primary-3000-button-border-hover: var(--primary-3000-button-border-hover-dark);
     --primary-alt-highlight: var(--primary-alt-highlight-dark);

frontend/src/styles/vars.scss

@@ -3,388 +3,3 @@ $md: 768px;
 $lg: 992px;
 $xl: 1200px;
 $xxl: 1600px;
-
-// THIS FILE WILL BE REMOVED
-// Do not use these colors.
-// They are only here for further development of the design system.
-// If you need a color variable, add it to globals.scss in :root {}
-// If you need to add the new color tailwind,
-// then add the new them to globals.scss in @theme {}
-
-// $colors: (
-//     'primary': #1d4aff,
-//     'danger-highlight': rgba(#db3707, 0.1),
-//     'danger-lighter': #ffa599,
-//     'danger-light': #df4b20,
-//     'danger': #db3707,
-//     'danger-dark': #992705,
-//     'warning-highlight': rgba(#f7a501, 0.1),
-//     'warning': #f7a501,
-//     'warning-dark': #e09423,
-//     'highlight': var(--color-accent),
-//     // #e49f2c, //TODO: remove this
-//     'success-highlight': rgba(#388600, 0.1),
-//     'success-light': #5f9d32,
-//     'success': #388600,
-//     'success-dark': #245700,
-//     'muted': #5f5f5f,
-//     'muted-alt': #747ea1,
-//     'mark': hsl(42deg 93% 86% / 80%),
-//     'white': #fff,
-//     'bg-light': #fff,
-//     'side': #fafaf9,
-//     'mid': #f2f2f2,
-//     'border': rgb(0 0 0 / 15%),
-//     'border-light': rgb(0 0 0 / 8%),
-//     'border-bold': rgb(0 0 0 / 24%),
-//     'transparent': transparent,
-//     'link': var(--color-accent),
-//     // #f54e00, //TODO: remove this
-//     // Colors of the PostHog logo
-//     'brand-blue': #1d4aff,
-//     'brand-red': #f54e00,
-//     'brand-yellow': #f9bd2b,
-//     'brand-key': #000,
-
-//     // PostHog 3000
-//     'text-3000-light': #111,
-//     'text-secondary-3000-light': rgba(#111, 0.7),
-//     'muted-3000-light': rgba(#111, 0.6),
-//     'trace-3000-light': rgba(#111, 0.25),
-//     'primary-3000-light': var(--color-accent),
-//     // #f54e01,
-//     'primary-highlight-light': rgba(#f54e01, 0.1),
-//     'primary-3000-hover-light': var(--color-accent-hover),
-//     // #f54e01, //TODO: remove this
-//     'primary-3000-active-light': var(--color-accent-active),
-//     // #f54e01, //TODO: remove this
-//     'secondary-3000-light': rgba(#cfd1c2, 0.6),
-//     'secondary-3000-hover-light': #cfd1c2,
-//     'accent-3000-light': #eeefe9,
-//     'bg-3000-light': #f3f4ef,
-//     'border-3000-light': #dadbd2,
-//     'border-bold-3000-light': #c1c2b9,
-//     'glass-bg-3000-light': #e4e5deb3,
-//     'glass-border-3000-light': #e4e5de,
-
-//     'link-3000-light': var(--color-accent),
-//     // #f54e00, //TODO: remove this
-//     'primary-3000-frame-bg-light': #eb9d2a,
-//     'primary-3000-button-bg-light': #fff,
-//     'primary-3000-button-border-light': #b17816,
-//     'primary-3000-button-border-hover-light': #8e5b03,
-
-//     'secondary-3000-frame-bg-light': #e1dddd,
-//     'secondary-3000-button-bg-light': #f3f4ef,
-//     'secondary-3000-button-border-light': #ccc,
-//     'secondary-3000-button-border-hover-light': #aaa,
-
-//     'danger-3000-frame-bg-light': #f54e0080,
-//     'danger-3000-button-border-light': #e96b30,
-//     'danger-3000-button-border-hover-light': #f54e00,
-
-//     'text-3000-dark': #fff,
-//     'text-secondary-3000-dark': rgba(#fff, 0.7),
-//     'muted-3000-dark': rgba(#fff, 0.5),
-//     'trace-3000-dark': rgba(#fff, 0.25),
-//     'primary-3000-dark': #f7a503,
-//     'primary-highlight-dark': rgba(#f7a503, 0.1),
-//     'primary-3000-hover-dark': var(--color-accent-hover),
-//     // #f7a503, //TODO: remove this
-//     'primary-3000-active-dark': var(--color-accent-active),
-//     // #f7a503, //TODO: remove this
-//     'primary-alt-highlight-light': #e5e7e0,
-
-//     'secondary-3000-dark': #1d1f27,
-//     'secondary-3000-hover-dark': #575d77,
-//     'accent-3000-dark': #21242b,
-//     'bg-3000-dark': #1d1f27,
-//     'border-3000-dark': #35373e,
-//     'border-bold-3000-dark': #3f4046,
-//     'glass-bg-3000-dark': #24262a99,
-//     'glass-border-3000-dark': var(--border-3000-dark),
-//     'link-3000-dark': var(--color-accent),
-//     // #f1a82c,
-//     'primary-3000-frame-bg-dark': #926826,
-//     'primary-3000-button-bg-dark': #e0a045,
-//     'primary-3000-button-border-dark': #b17816,
-//     'primary-3000-button-border-hover-dark': #8e5b03,
-//     'primary-alt-highlight-dark': #232429,
-
-//     'secondary-3000-frame-bg-dark': #323232,
-//     'secondary-3000-button-bg-dark': #1d1f27,
-//     'secondary-3000-button-border-dark': #4a4c52,
-//     'secondary-3000-button-border-hover-dark': #5e6064,
-
-//     'danger-3000-frame-bg-dark': #f54e0080,
-//     'danger-3000-button-border-dark': #c44003,
-//     'danger-3000-button-border-hover-dark': #f54e00,
-
-//     'shadow-elevation-3000-light': 0 3px 0 var(--border-3000-light),
-//     'shadow-elevation-3000-dark': 0 3px 0 var(--border-3000-dark),
-
-//     // The derived colors
-//     // `--default` is a pre-3000 alias for "default text color" (`--text-3000` now)
-//     'default': var(--default),
-//     'text-3000': var(--text-3000),
-//     'text-secondary-3000': var(--color-text-secondary-3000),
-//     'muted-3000': var(--muted-3000),
-//     'primary-3000': var(--color-accent),
-//     'secondary-3000': var(--secondary-3000),
-//     'secondary-3000-hover': var(--secondary-3000-hover),
-//     'accent-3000': var(--color-bg-surface-primary),
-//     'bg-3000': var(--color-bg-3000),
-//     'primary-highlight': var(--primary-highlight),
-//     'primary-alt-highlight': var(--primary-alt-highlight),
-//     'primary-alt': var(--primary-alt),
-// );
-
-// These vars are modified via SCSS for legacy reasons (e.g. darken/lighten), so keeping as SCSS vars for now.
-// $_lifecycle_new: map.get($colors, 'primary');
-// $_lifecycle_returning: map.get($colors, 'success');
-// $_lifecycle_resurrecting: #a56eff; // --data-lilac
-// $_lifecycle_dormant: map.get($colors, 'danger');
-
-// root variables are defined as a mixin here because
-// the toolbar needs them attached to :host not :root
-// @mixin root-variables {
-//     --color-bg-bridge: #ebece8;
-
-//     // Non-color vars
-//     --radius: 0.375rem; // Increased from Tailwind's default of 0.25rem
-//     --radius-sm: 0.25rem; // Increased from Tailwind's default of 0.125rem
-//     --radius-lg: 0.625rem; // Increased from Tailwind's default of 0.5rem
-//     --modal-shadow-elevation: 0px 16px 16px -16px rgb(0 0 0 / 35%);
-//     --opacity-disabled: 0.65;
-//     --font-medium: 500;
-//     --font-semibold: 600;
-//     --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', helvetica, arial,
-//         sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-//     --font-title: 'MatterSQ', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue',
-//         helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-//     --font-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace;
-
-//     // Dashboard item colors
-//     --blue: #597dce;
-//     --purple: #c278cf;
-//     --green: var(--success);
-//     --black: var(--text-3000);
-
-//     //// Data colors (e.g. insight series). Note: colors.ts relies on these values being hexadecimal
-//     --data-color-1: #1d4aff;
-//     --data-color-2: #621da6;
-//     --data-color-3: #42827e;
-//     --data-color-4: #ce0e74;
-//     --data-color-5: #f14f58;
-//     --data-color-6: #7c440e;
-//     --data-color-7: #529a0a;
-//     --data-color-8: #0476fb;
-//     --data-color-9: #fe729e;
-//     --data-color-10: #35416b;
-//     --data-color-11: #41cbc4;
-//     --data-color-12: #b64b02;
-//     --data-color-13: #e4a604;
-//     --data-color-14: #a56eff;
-//     --data-color-15: #30d5c8;
-
-//     // Lifecycle series
-//     --lifecycle-new: #{$_lifecycle_new};
-//     --lifecycle-returning: #{$_lifecycle_returning};
-//     --lifecycle-resurrecting: #{$_lifecycle_resurrecting};
-//     --lifecycle-dormant: #{$_lifecycle_dormant};
-//     --lifecycle-new-hover: #{color.adjust($_lifecycle_new, $lightness: -20%)};
-//     --lifecycle-returning-hover: #{color.adjust($_lifecycle_returning, $lightness: -20%)};
-//     --lifecycle-resurrecting-hover: #{color.adjust($_lifecycle_resurrecting, $lightness: -20%)};
-//     --lifecycle-dormant-hover: #{color.adjust($_lifecycle_dormant, $lightness: -20%)};
-
-//     // Funnels
-//     // TODO: unify with lib/colors.ts, getGraphColors()
-//     --funnel-axis: var(--border);
-//     --funnel-grid: #ddd;
-
-//     // Z-indexes
-//     --z-bottom-notice: 5100;
-//     --z-command-palette: 1875;
-//     --z-force-modal-above-popovers: 1850;
-//     --z-tooltip: 1070;
-
-//     // 1066 through 1069 are reserved to be set from code
-//     --z-definition-popover: 1065;
-//     --z-popover: 1064;
-//     --z-graph-tooltip: 1063;
-
-//     // 1061 and 1062 are reserved to be set from code
-//     --z-modal: 1060;
-//     --z-hedgehog-buddy: 1059;
-//     --z-annotation-popover: 1049;
-//     --z-drawer: 950;
-//     --z-notifications-popover: 949; // below the TZ aware popover but over the main-nav
-//     --z-main-nav: 948;
-//     --z-lemon-sidebar: 940;
-//     --z-lemon-activation-sidebar: 939;
-//     --z-mobile-nav-overlay: 931;
-//     --z-top-navigation: 800;
-//     --z-content-overlay: 488;
-//     --z-raised: 5;
-
-//     // Toasts
-//     // Update and override from react-toastify
-//     // which attaches these variables to :root
-//     // which means they aren't available in the toolbar
-//     --toastify-color-dark: var(--color-accent-3000-dark);
-//     --toastify-color-light: var(--color-bg-surface-primary);
-//     --toastify-color-info: var(--color-accent);
-//     --toastify-color-success: var(--success);
-//     --toastify-color-warning: var(--warning);
-//     --toastify-color-error: var(--danger);
-//     --toastify-color-progress-info: var(--toastify-color-info);
-//     --toastify-color-progress-success: var(--toastify-color-success);
-//     --toastify-color-progress-warning: var(--toastify-color-warning);
-//     --toastify-color-progress-error: var(--toastify-color-error);
-//     --toastify-toast-background: var(--color-bg-surface-primary);
-//     --toastify-toast-width: 26rem;
-//     --toastify-toast-min-height: 3.5rem;
-//     --toastify-toast-max-height: 16rem;
-//     --toastify-text-color-light: #757575;
-
-//     // In-app prompts
-//     --in-app-prompts-width: 26rem;
-//     --lettermark-1-bg: #dcb1e3;
-//     --lettermark-1-text: #572e5e;
-//     --lettermark-2-bg: #ffc4b2;
-//     --lettermark-2-text: #3e5891;
-//     --lettermark-3-bg: #fdedc9;
-//     --lettermark-3-text: #3e5891;
-//     --lettermark-4-bg: #3e5891;
-//     --lettermark-4-text: #ffc4b2;
-//     --lettermark-5-bg: #8da9e7;
-//     --lettermark-5-text: #572e5e;
-//     --lettermark-6-bg: #572e5e;
-//     --lettermark-6-text: #dcb1e3;
-//     --lettermark-7-bg: #ffc035;
-//     --lettermark-7-text: #35416b;
-//     --lettermark-8-bg: #ff906e;
-//     --lettermark-8-text: #2a3d65;
-
-//     // Modals
-//     --modal-backdrop-blur: 5px; // Half the value in Figma as blur is calculated differently there it seems
-//     --modal-backdrop-color: rgb(0 0 0 / 20%);
-//     --modal-transition-time: 200ms;
-
-//     // Tooltips
-//     --tooltip-bg-light: #2d2d2d;
-//     --tooltip-bg-dark: #656d81;
-
-//     // Notebooks
-//     --notebook-popover-transition-properties: 150ms cubic-bezier(0, 0.5, 0.5, 1);
-//     --notebook-column-left-width: 27rem;
-//     --notebook-column-right-width: 20rem;
-
-//     // Design System colors
-//     @each $name, $hex in $colors {
-//         --#{$name}: #{$hex};
-//     }
-// }
-
-// // defined here so that they can be shared with the toolbar
-// @mixin light-mode-3000-variables {
-//     --text-3000: var(--text-3000-light);
-//     --color-text-secondary-3000: var(--color-text-secondary-3000-light);
-//     --muted-3000: var(--muted-3000-light);
-//     --trace-3000: var(--trace-3000-light);
-//     --primary-3000: var(--color-accent); // var(--primary-3000-light); // TODO: remove this
-//     --primary-highlight: var(--color-accent-highlight); // var(--primary-highlight-light); // TODO: remove this
-//     --primary-3000-hover: var(--color-accent-hover); // var(--primary-3000-hover-light); // TODO: remove this
-//     --primary-3000-active: var(--color-accent-active); // var(--primary-3000-active-light); // TODO: remove this
-//     --secondary-3000: var(--secondary-3000-light);
-//     --secondary-3000-hover: var(--secondary-3000-hover-light);
-//     --color-accent-3000: var(--color-accent-3000-light);
-//     --color-bg-3000: var(--color-bg-3000-light);
-//     --border-3000: var(--border-3000-light);
-//     --border-light-opaque: #eee;
-//     --border-bold-3000: var(--border-bold-3000-light);
-
-//     // --glass-bg-3000: var(--glass-bg-3000-light);
-//     --glass-bg-3000: var(--color-bg-surface-tertiary); // var(--glass-bg-3000-light);
-//     --glass-border-3000: var(--glass-border-3000-light);
-//     --color-bg-light: #fff;
-//     --color-bg-table: #f9faf7;
-//     --link: var(--link-3000-light);
-//     --shadow-elevation-3000: var(--shadow-elevation-3000-light);
-//     --primary-3000-frame-bg: var(--primary-3000-frame-bg-light);
-//     --primary-3000-button-bg: var(--primary-3000-button-bg-light);
-//     --primary-3000-button-border: var(--primary-3000-button-border-light);
-//     --primary-3000-button-border-hover: var(--primary-3000-button-border-hover-light);
-//     --primary-alt-highlight: var(--primary-alt-highlight-light);
-//     --secondary-3000-frame-bg: var(--secondary-3000-frame-bg-light);
-//     --secondary-3000-button-bg: var(--secondary-3000-button-bg-light);
-//     --secondary-3000-button-border: var(--secondary-3000-button-border-light);
-//     --secondary-3000-button-border-hover: var(--secondary-3000-button-border-hover-light);
-//     --danger-3000-frame-bg: var(--danger-3000-frame-bg-light);
-//     --danger-3000-button-border: var(--danger-3000-button-border-light);
-//     --danger-3000-button-border-hover: var(--danger-3000-button-border-hover-light);
-//     --tooltip-bg: var(--tooltip-bg-light);
-// }
-
-// // defined here so that they can be shared with the toolbar
-// @mixin dark-mode-3000-variables {
-//     --text-3000: var(--text-3000-dark);
-//     --color-text-secondary-3000: var(--color-text-secondary-3000-dark);
-//     --muted-3000: var(--muted-3000-dark);
-//     --trace-3000: var(--trace-3000-dark);
-//     --primary-3000: var(--color-accent); // var(--primary-3000-dark); // TODO: remove this
-//     --primary-highlight: var(--color-accent-highlight); // var(--primary-highlight-dark); // TODO: remove this
-//     --primary-3000-hover: var(--color-accent-hover); // var(--primary-3000-hover-dark); // TODO: remove this
-//     --primary-3000-active: var(--color-accent-active); // var(--primary-3000-active-dark); // TODO: remove this
-//     --secondary-3000: var(--secondary-3000-dark);
-//     --secondary-3000-hover: var(--secondary-3000-hover-dark);
-//     --color-accent-3000: var(--color-accent-3000-dark);
-//     --color-bg-3000: var(--color-bg-3000-dark);
-//     --border-3000: var(--border-3000-dark);
-//     --border-light-opaque: #1e2028;
-//     --border-bold-3000: var(--border-bold-3000-dark);
-
-//     // --glass-bg-3000: var(--glass-bg-3000-dark);
-//     --glass-bg-3000: var(--surface-quaternary);
-//     --glass-border-3000: var(--glass-border-3000-dark);
-//     --color-bg-light: var(--color-bg-surface-primary);
-//     --color-bg-table: #232429;
-//     --brand-key: #fff; // In dark mode the black in PostHog's logo is replaced with white for proper contrast
-//     --link: var(--link-3000-dark);
-//     --shadow-elevation-3000: var(--shadow-elevation-3000-dark);
-//     --primary-3000-frame-bg: var(--primary-3000-frame-bg-dark);
-//     --primary-3000-button-bg: var(--primary-3000-button-bg-dark);
-//     --primary-3000-button-border: var(--primary-3000-button-border-dark);
-//     --primary-3000-button-border-hover: var(--primary-3000-button-border-hover-dark);
-//     --primary-alt-highlight: var(--primary-alt-highlight-dark);
-//     --secondary-3000-frame-bg: var(--secondary-3000-frame-bg-dark);
-//     --secondary-3000-button-bg: var(--secondary-3000-button-bg-dark);
-//     --secondary-3000-button-border: var(--secondary-3000-button-border-dark);
-//     --secondary-3000-button-border-hover: var(--secondary-3000-button-border-hover-dark);
-//     --danger-3000-frame-bg: var(--danger-3000-frame-bg-dark);
-//     --danger-3000-button-border: var(--danger-3000-button-border-dark);
-//     --danger-3000-button-border-hover: var(--danger-3000-button-border-hover-dark);
-//     --tooltip-bg: var(--tooltip-bg-dark);
-//     --data-color-2: #7f26d9;
-//     --data-color-3: #3e7a76;
-//     --data-color-4: #bf0d6c;
-//     --data-color-5: #f0474f;
-//     --data-color-6: #b36114;
-//     --data-color-10: #6576b3;
-// }
-
-// // defined here so that they can be shared with the toolbar
-// @mixin common-variables {
-//     --primary: var(--primary-3000); // Changed to accent
-//     --muted: var(--muted-3000);
-//     --default: var(--text-3000);
-
-//     // `--muted-alt` can be removed now, as it's the same as `--muted` after the 3000 redesign
-//     --muted-alt: var(--muted-3000);
-//     --primary-alt: var(--text-3000);
-//     --border: var(--color-border-primary);
-//     --border-bold: var(--border-bold-3000);
-//     --data-color-1: #1d4aff;
-//     --data-color-1-hover: #1a3cf6;
-//     --data-color-10: #35416b;
-// }