Skip to content

Commit

Permalink
feat: add missing dark mode (#26744)
Browse files Browse the repository at this point in the history 
Co-authored-by: Eli Kinsey <[email protected]>
  • Loading branch information
@adamleithp @smallbrownbike
adamleithp and smallbrownbike authored Dec 7, 2024
1 parent 3759a04 commit 89352a8
Show file tree
Hide file tree
Showing 3 changed files with 257 additions and 14 deletions.
31 changes: 18 additions & 13 deletions frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@mixin secondary-variables {
--button-border-color: var(--secondary-3000-button-border);
--lemon-button-border-color: var(--secondary-3000-button-border);
--lemon-button-bg-color-active: var(--bg-light);
--lemon-button-border-color-hover: var(--secondary-3000-button-border-hover);
--lemon-button-frame-bg-color: var(--secondary-3000-frame-bg);
Expand Down Expand Up @@ -47,15 +47,16 @@
--lemon-button-transition: opacity 200ms ease, transform 200ms ease;
--lemon-button-border-width: 0;
--lemon-button-bg-color: transparent;
--button-border-color: none;
--lemon-button-border-color: none;
--lemon-button-border-color-hover: none;
--lemon-button-frame-bg-color: none;
--lemon-button-font-size: 0.875rem;
--lemon-button-icon-size: 1.5rem;
--lemon-button-height: 2.3125rem;
--lemon-button-gap: 0.5rem;
--lemon-button-icon-opacity: 0.8;
--lemon-button-color: var(--text-3000);
--xx-lemon-button-color: var(--text-3000);
--lemon-button-color: var(--content-primary);

// column-gap: 4px;
// flex-direction: row;
Expand Down Expand Up @@ -190,18 +191,18 @@
&.LemonButton--primary {
--lemon-button-bg-color: var(--primary-3000-button-bg);
--lemon-button-bg-color-active: var(--primary-3000-button-bg);
--button-border-color: var(--primary-3000-button-border);
--lemon-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-frame-bg);
--lemon-button-color: var(--text-3000-light);
--lemon-button-color: var(--content-primary);

&.LemonButton--status-alt {
--lemon-button-bg-color: var(--primary-3000-frame-bg-light);
--lemon-button-bg-color-active: var(--lemon-button-bg-color);
--button-border-color: var(--primary-3000-button-border);
--lemon-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);
--lemon-button-color: var(--content-primary);
}
}

Expand All @@ -214,19 +215,23 @@
&.LemonButton--status-danger,
&.LemonButton--primary.LemonButton--status-danger,
&.LemonButton--secondary.LemonButton--status-danger {
--lemon-button-color: var(--danger-3000-button-border-hover);
--button-border-color: var(--danger-3000-button-border);
--lemon-button-color: var(--content-danger);
--lemon-button-border-color: var(--danger-3000-button-border);
--lemon-button-border-color-hover: var(--danger-3000-button-border-hover);
--lemon-button-frame-bg-color: var(--danger-3000-frame-bg);
--lemon-button-icon-opacity: 1;

&[aria-disabled='true']:not(.LemonButton--loading) {
--lemon-button-color: var(--content-danger-bold-disabled);
}
}

&.LemonButton--secondary.LemonButton--status-alt {
--lemon-button-color: var(--muted);
--lemon-button-color: var(--content-tertiary);

&.LemonButton--active,
&:hover:not([aria-disabled='true']) {
--lemon-button-color: var(--text-3000);
--lemon-button-color: var(--content-tertiary);
}
}

Expand Down Expand Up @@ -264,7 +269,7 @@
inset: -1px;
z-index: 0;
content: '';
border: 1px solid var(--button-border-color);
border: 1px solid var(--lemon-button-border-color);
border-radius: var(--radius);
}

Expand All @@ -274,7 +279,7 @@
z-index: 0;
content: '';
background: var(--lemon-button-bg-color);
border: 1px solid var(--button-border-color);
border: 1px solid var(--lemon-button-border-color);
border-radius: var(--radius);
box-shadow: 0 var(--lemon-button-chrome-depth) 0 -1px var(--lemon-button-frame-bg-color);
transition: opacity 200ms ease;
Expand Down
238 changes: 238 additions & 0 deletions frontend/src/styles/global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,231 @@ Only 400 (`normal`), 500 (`var(--font-medium)`), 600 (`var(--font-semibold)`), o
@import 'utilities-legacy'; // TODO: Remove all legacy utilities

:root {
// Posthog 3030:
// https://www.figma.com/design/rQ5SvWb4P2AGt7o9KbKV21/Posthog-3030?node-id=79-2694&node-type=canvas&t=gY0DiwE0seyXYOL3-0
// Primitives colors
// DO NOT USE PRIMITIVE COLORS DIRECTLY.
// Use the semantic colors instead.
--primary-black: #000;
--primary-black-50: #00000080;
--primary-white: #fff;
--primary-white-50: #ffffff80;

// Neutral colors
--neutral-50: #fafafa;
--neutral-100: #f5f5f5;
--neutral-150: #ebebeb;
--neutral-200: #e0e0e0;
--neutral-250: #d6d6d6;
--neutral-300: #ccc;
--neutral-350: #bfbfbf;
--neutral-400: #b3b3b3;
--neutral-450: #a6a6a6;
--neutral-500: #999;
--neutral-550: #8c8c8c;
--neutral-600: #808080;
--neutral-650: #737373;
--neutral-700: #666;
--neutral-750: #595959;
--neutral-800: #4d4d4d;
--neutral-850: #404040;
--neutral-900: #333;
--neutral-950: #262626;

// Neutral warm colors (light mode backgrounds)
--neutral-warm-50: #f3f4f0;
--neutral-warm-100: #e8eae0;
--neutral-warm-150: #dde0d2;
--neutral-warm-200: #d2d6c2;
--neutral-warm-250: #c6cbb3;
--neutral-warm-300: #bbc1a3;
--neutral-warm-350: #b0b795;
--neutral-warm-400: #a5ac86;
--neutral-warm-450: #99a276;
--neutral-warm-500: #8e9867;
--neutral-warm-550: #80895d;
--neutral-warm-600: #727953;
--neutral-warm-650: #636a48;
--neutral-warm-700: #565c3e;
--neutral-warm-750: #474c34;
--neutral-warm-800: #393d29;
--neutral-warm-850: #2a2d1f;
--neutral-warm-900: #1d1f15;
--neutral-warm-950: #0e0f0b;

// Neutral cool colors (dark mode backgrounds)
--neutral-cool-50: #f1f2f3;
--neutral-cool-100: #e3e5e8;
--neutral-cool-150: #d6d8dc;
--neutral-cool-200: #c8cbd0;
--neutral-cool-250: #babec4;
--neutral-cool-300: #adb2b9;
--neutral-cool-350: #9fa5ad;
--neutral-cool-400: #9197a1;
--neutral-cool-450: #838a95;
--neutral-cool-500: #767e8a;
--neutral-cool-550: #6a717c;
--neutral-cool-600: #5e646e;
--neutral-cool-650: #525860;
--neutral-cool-700: #474c53;
--neutral-cool-750: #3b3f45;
--neutral-cool-800: #2f3237;
--neutral-cool-850: #232529;
--neutral-cool-900: #1b1c18;
--neutral-cool-950: #0e0e0c;

// Brand colors
--brand-100: #fddccc;
--brand-200: #fbb899;
--brand-300: #f99567;
--brand-400: #f77134;
--brand-500: #f54e01;
--brand-600: #c43e01;
--brand-700: #932f01;
--brand-800: #621f00;
--brand-900: #311000;

// Blue colors
--blue-100: #d2dcfd;
--blue-200: #a5b9fb;
--blue-300: #7995fa;
--blue-400: #4c72f8;
--blue-500: #1f4ff6;
--blue-600: #193fc5;
--blue-700: #132f94;
--blue-800: #0c2062;
--blue-900: #061031;

// Purple colors
--purple-100: #e0ceff;
--purple-200: #c29cff;
--purple-300: #a36bff;
--purple-400: #8539ff;
--purple-500: #6608ff;
--purple-600: #5206cc;
--purple-700: #3d0599;
--purple-800: #290366;
--purple-900: #140233;

// Violet colors
--violet-100: #f1d6ff;
--violet-200: #e4adff;
--violet-300: #d685ff;
--violet-400: #c95cff;
--violet-500: #b3f;
--violet-600: #9629cc;
--violet-700: #701f99;
--violet-800: #4b1466;
--violet-900: #250a33;

// Red colors
--red-50: #f9ebe6;
--red-100: #f8d7cd;
--red-200: #f1af9c;
--red-300: #e9876a;
--red-400: #e25f39;
--red-500: #db3707;
--red-600: #af2c06;
--red-700: #832104;
--red-800: #581603;
--red-900: #2c0b01;

// Orange colors
--orange-50: #fff3e5;
--orange-100: #ffe6cc;
--orange-200: #fc9;
--orange-300: #ffb366;
--orange-400: #f93;
--orange-500: #ff8000;
--orange-600: #c60;
--orange-700: #994d00;
--orange-800: #630;
--orange-850: #4c3201;
--orange-900: #331a00;

// Yellow colors
--yellow-100: #fdedcd;
--yellow-200: #fcdb9a;
--yellow-300: #fac968;
--yellow-400: #f9b735;
--yellow-500: #f7a503;
--yellow-600: #c68402;
--yellow-700: #946302;
--yellow-800: #634201;
--yellow-900: #312101;

// Green colors
--green-50: #ebf3e5;
--green-100: #d7e7cc;
--green-200: #afcf99;
--green-300: #88b666;
--green-400: #609e33;
--green-500: #388600;
--green-600: #2d6b00;
--green-700: #225000;
--green-800: #163600;
--green-900: #0b1b00;

// Teal colors
--teal-100: #d9f5f3;
--teal-200: #b3eae7;
--teal-300: #8de0dc;
--teal-400: #67d5d0;
--teal-500: #41cbc4;
--teal-600: #34a29d;
--teal-700: #277a76;
--teal-800: #1a514e;
--teal-900: #0d2927;

// Semantic colors
--content-primary: var(--neutral-950);
--content-secondary: var(--neutral-800);
--content-tertiary: var(--neutral-700);
--content-primary-inverse: var(--primary-white);
--content-secondary-inverse: var(--neutral-100);
--content-tertiary-inverse: var(--neutral-300);
--content-disabled: var(--neutral-300);
--content-brand: var(--brand-500);
--content-link: var(--brand-500);
--content-link-hover: var(--brand-400);
--content-link-pressed: var(--brand-600);
--content-warning-bold: var(--orange-700);
--content-danger: var(--red-500);
--content-danger-bold: var(--red-600);
--content-danger-bold-disabled: var(--red-800);
--content-success: var(--green-500);
--content-success-bold: var(--green-600);
--content-success-bold-disabled: var(--green-700);
--background-primary: var(--primary-white);
--background-secondary: var(--neutral-warm-50);
--background-tertiary: var(--neutral-warm-100);
--background-hover: var(--neutral-warm-50);
--background-pressed: var(--neutral-warm-100);
--background-selected: var(--orange-100);
--background-disabled: var(--neutral-warm-50);
--background-inverse: var(--neutral-warm-900);
--background-brand: var(--brand-500);
--background-brand-hover: var(--brand-600);
--background-brand-pressed: var(--brand-700);
--background-warning: var(--orange-500);
--background-warning-subtle: var(--orange-50);
--background-danger: var(--red-500);
--background-danger-subtle: var(--red-50);
--background-success: var(--green-500);
--background-success-subtle: var(--green-50);
--border-primary: var(--neutral-warm-600);
--border-secondary: var(--neutral-warm-400);
--border-tertiary: var(--neutral-warm-200);
--border-disabled: var(--neutral-warm-200);
--border-brand: var(--brand-500);
--border-inverse: var(--primary-white);
--border-focus: var(--blue-500);
--border-warning: var(--orange-500);
--border-danger: var(--red-500);
--border-success: var(--green-500);
--overlay-50: var(--primary-black-50);
--overlay-50-inverse: var(--primary-white-50);

@include root-variables;
}

Expand Down Expand Up @@ -350,6 +575,19 @@ body {
}

&[theme='dark'] {
// Semantic colors (Dark mode) WIP
--content-primary: var(--neutral-cool-100);
--content-warning-bold: var(--orange-100);
--content-danger-bold: var(--red-100);
--content-success-bold: var(--green-100);
--background-primary: var(--neutral-cool-900);
--background-secondary: var(--neutral-cool-850);
--background-tertiary: var(--neutral-cool-800);
--background-warning-subtle: var(--orange-850);
--background-danger-subtle: var(--red-800);
--background-success-subtle: var(--green-800);
--border-tertiary: var(--neutral-cool-750);

@include dark-mode-3000-variables;
}

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/styles/vars.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -311,7 +311,7 @@ $_lifecycle_dormant: map.get($colors, 'danger');
--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.6;
--opacity-disabled: 0.65;
--font-medium: 500;
--font-semibold: 600;
--font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', helvetica, arial,
Expand Down

0 comments on commit 89352a8

Please sign in to comment.