@gitbutler/design-core 2.2.1 → 3.0.0

package/tokens/tokens.css

@@ -3,331 +3,162 @@
  * ------------------------------------------- */
 
 :root {
-  --art-scene-bg: hsl(175 46.4% 89.0%);
-  --art-scene-fill: hsl(60 64.7% 96.7%);
-  --art-scene-outline: hsl(180 6.0% 29.6%);
-  --art-spot-fill: var(--clr-gray-70);
-  --art-spot-fill-pop: var(--clr-pop-70);
-  --bg-1: var(--clr-gray-100);
-  --bg-2: var(--clr-gray-90);
-  --bg-3: var(--clr-gray-80);
-  --bg-danger: var(--clr-danger-95);
-  --bg-mute: var(--clr-gray-95);
-  --bg-overlay: hsl(0 0.0% 83.9% / 0.45098039215686275);
-  --bg-pop: var(--clr-pop-95);
-  --bg-purple: var(--clr-purple-95);
-  --bg-safe: var(--clr-safe-95);
-  --bg-toast: var(--clr-gray-5);
-  --bg-warn: var(--clr-warn-95);
-  --border-1: var(--clr-gray-60);
-  --border-2: var(--clr-gray-70);
-  --border-3: var(--clr-gray-80);
-  --btn-danger-outline: var(--clr-danger-50);
-  --btn-danger-outline-bg: var(--clr-danger-70);
-  --btn-danger-outline-text: var(--clr-danger-40);
-  --btn-gray-outline: var(--clr-gray-50);
-  --btn-gray-outline-bg: var(--clr-gray-70);
-  --btn-gray-outline-text: var(--clr-gray-10);
-  --btn-opacity-outline-bg: 10%;
-  --btn-opacity-outline-bg-hover: 25%;
-  --btn-opacity-outline-border: 40%;
-  --btn-opacity-outline-icon: 70%;
-  --btn-opacity-solid-hover: 10%;
-  --btn-opacity-solid-icon: 80%;
-  --btn-pop-outline: var(--clr-pop-50);
-  --btn-pop-outline-bg: var(--clr-pop-70);
-  --btn-pop-outline-text: var(--clr-pop-40);
-  --btn-purple-outline: var(--clr-purple-50);
-  --btn-purple-outline-bg: var(--clr-purple-70);
-  --btn-purple-outline-text: var(--clr-purple-40);
-  --btn-safe-outline: var(--clr-safe-50);
-  --btn-safe-outline-bg: var(--clr-safe-70);
-  --btn-safe-outline-text: var(--clr-safe-40);
-  --btn-warn-outline: var(--clr-warn-50);
-  --btn-warn-outline-bg: var(--clr-warn-70);
-  --btn-warn-outline-text: var(--clr-warn-30);
-  --change-status-addition: var(--clr-safe-60);
-  --change-status-deletion: var(--clr-danger-60);
-  --change-status-modification: var(--clr-warn-60);
-  --change-status-rename: var(--clr-purple-60);
-  --chip-danger-bg: var(--clr-danger-80);
-  --chip-danger-fg: var(--clr-danger-40);
-  --chip-gray-bg: var(--clr-gray-80);
-  --chip-gray-fg: var(--clr-gray-20);
-  --chip-pop-bg: var(--clr-pop-80);
-  --chip-pop-fg: var(--clr-pop-40);
-  --chip-purple-bg: var(--clr-purple-80);
-  --chip-purple-fg: var(--clr-purple-40);
-  --chip-safe-bg: var(--clr-safe-80);
-  --chip-safe-fg: var(--clr-safe-40);
-  --chip-warn-bg: var(--clr-warn-80);
-  --chip-warn-fg: var(--clr-warn-40);
-  --clr-danger-5: hsl(8 67.7% 18.2%);
-  --clr-danger-10: hsl(8 68.1% 22.2%);
-  --clr-danger-20: hsl(8 67.9% 25.7%);
-  --clr-danger-30: hsl(8 67.8% 34.1%);
-  --clr-danger-40: hsl(8 67.9% 41.6%);
+  color-scheme: light dark;
+  --art-scene-bg: light-dark(hsl(175 46.4% 89.0%), hsl(177 44.1% 28.0%));
+  --art-scene-fill: light-dark(hsl(60 64.7% 96.7%), hsl(79 37.8% 82.4%));
+  --art-scene-outline: light-dark(hsl(180 6.0% 29.6%), hsl(180 25.9% 10.6%));
+  --art-spot-fill: light-dark(var(--clr-gray-70), var(--clr-gray-40));
+  --art-spot-fill-pop: light-dark(var(--clr-pop-70), var(--clr-pop-30));
+  --bg-1: light-dark(var(--clr-gray-100), var(--clr-gray-10));
+  --bg-2: light-dark(var(--clr-gray-90), var(--clr-gray-5));
+  --bg-3: light-dark(var(--clr-gray-80), var(--clr-gray-0));
+  --bg-danger: light-dark(var(--clr-danger-95), var(--clr-danger-5));
+  --bg-mute: light-dark(var(--clr-gray-95), var(--clr-gray-20));
+  --bg-overlay: light-dark(hsl(0 0.0% 83.9% / 0.45), hsl(0 0.0% 0.0% / 0.5));
+  --bg-pop: light-dark(var(--clr-pop-95), var(--clr-pop-5));
+  --bg-purple: light-dark(var(--clr-purple-95), var(--clr-purple-5));
+  --bg-safe: light-dark(var(--clr-safe-95), var(--clr-safe-5));
+  --bg-toast: light-dark(var(--clr-gray-5), var(--clr-gray-95));
+  --bg-warn: light-dark(var(--clr-warn-95), var(--clr-warn-5));
+  --border-1: light-dark(var(--clr-gray-60), var(--clr-gray-40));
+  --border-2: light-dark(var(--clr-gray-70), var(--clr-gray-30));
+  --border-3: light-dark(var(--clr-gray-80), var(--clr-gray-20));
+  --change-status-addition: light-dark(var(--clr-safe-60), var(--clr-safe-30));
+  --change-status-deletion: light-dark(var(--clr-danger-60), var(--clr-danger-30));
+  --change-status-modification: light-dark(var(--clr-warn-60), var(--clr-warn-30));
+  --change-status-rename: light-dark(var(--clr-purple-60), var(--clr-purple-40));
+  --clr-danger-5: hsl(8 67.9% 11.0%);
+  --clr-danger-10: hsl(9 68.8% 15.1%);
+  --clr-danger-20: hsl(8 67.5% 22.9%);
+  --clr-danger-30: hsl(8 67.7% 31.6%);
+  --clr-danger-40: hsl(8 67.8% 40.2%);
   --clr-danger-50: hsl(8 67.8% 50.0%);
-  --clr-danger-60: hsl(8 57.4% 69.6%);
-  --clr-danger-70: hsl(8 58.8% 81.0%);
-  --clr-danger-80: hsl(9 60.7% 89.0%);
-  --clr-danger-90: hsl(9 61.3% 93.9%);
-  --clr-danger-95: hsl(6 55.6% 96.5%);
+  --clr-danger-60: hsl(8 65.1% 67.5%);
+  --clr-danger-70: hsl(8 61.5% 79.6%);
+  --clr-danger-80: hsl(8 57.7% 89.8%);
+  --clr-danger-90: hsl(7 57.1% 94.5%);
+  --clr-danger-95: hsl(7 57.1% 97.3%);
   --clr-gray-0: hsl(0 0.0% 0.0%);
-  --clr-gray-5: hsl(24 9.8% 10.0%);
-  --clr-gray-10: hsl(20 8.3% 14.1%);
-  --clr-gray-20: hsl(23 7.4% 21.2%);
-  --clr-gray-30: hsl(22 7.5% 28.8%);
-  --clr-gray-40: hsl(26 7.6% 36.1%);
-  --clr-gray-50: hsl(23 7.8% 45.1%);
-  --clr-gray-60: hsl(23 7.1% 64.1%);
-  --clr-gray-70: hsl(26 6.2% 77.8%);
-  --clr-gray-80: hsl(20 5.9% 90.0%);
-  --clr-gray-90: hsl(30 7.7% 94.9%);
-  --clr-gray-95: hsl(60 7.7% 97.5%);
+  --clr-gray-5: hsl(0 0.0% 11.8%);
+  --clr-gray-10: hsl(0 0.0% 16.1%);
+  --clr-gray-20: hsl(0 0.0% 24.3%);
+  --clr-gray-30: hsl(0 0.0% 33.7%);
+  --clr-gray-40: hsl(0 0.0% 42.7%);
+  --clr-gray-50: hsl(0 0.0% 53.3%);
+  --clr-gray-60: hsl(0 0.0% 69.8%);
+  --clr-gray-70: hsl(0 0.0% 81.2%);
+  --clr-gray-80: hsl(0 0.0% 90.6%);
+  --clr-gray-90: hsl(0 0.0% 94.9%);
+  --clr-gray-95: hsl(0 0.0% 97.3%);
   --clr-gray-100: hsl(0 0.0% 100.0%);
-  --clr-pop-5: hsl(180 66.7% 8.2%);
-  --clr-pop-10: hsl(180 64.7% 13.3%);
-  --clr-pop-20: hsl(180 65.5% 17.1%);
-  --clr-pop-30: hsl(180 64.8% 24.5%);
-  --clr-pop-40: hsl(180 65.3% 32.7%);
+  --clr-pop-5: hsl(180 65.2% 9.0%);
+  --clr-pop-10: hsl(180 66.2% 12.7%);
+  --clr-pop-20: hsl(180 65.3% 19.2%);
+  --clr-pop-30: hsl(180 65.9% 26.5%);
+  --clr-pop-40: hsl(180 65.1% 33.7%);
   --clr-pop-50: hsl(180 65.4% 42.0%);
-  --clr-pop-60: hsl(180 55.0% 60.8%);
-  --clr-pop-70: hsl(180 56.1% 75.9%);
-  --clr-pop-80: hsl(180 57.1% 89.0%);
-  --clr-pop-90: hsl(180 60.0% 94.1%);
-  --clr-pop-95: hsl(180 55.6% 96.5%);
-  --clr-purple-5: hsl(270 59.5% 16.5%);
-  --clr-purple-10: hsl(270 60.0% 20.6%);
-  --clr-purple-20: hsl(270 60.0% 25.5%);
-  --clr-purple-30: hsl(270 60.4% 35.7%);
-  --clr-purple-40: hsl(270 59.8% 45.9%);
+  --clr-pop-60: hsl(180 64.6% 62.4%);
+  --clr-pop-70: hsl(180 60.3% 76.3%);
+  --clr-pop-80: hsl(180 56.7% 88.2%);
+  --clr-pop-90: hsl(180 57.6% 93.5%);
+  --clr-pop-95: hsl(180 52.9% 96.7%);
+  --clr-purple-5: hsl(270 60.0% 11.8%);
+  --clr-purple-10: hsl(270 59.5% 16.5%);
+  --clr-purple-20: hsl(270 60.0% 24.5%);
+  --clr-purple-30: hsl(270 59.8% 34.1%);
+  --clr-purple-40: hsl(270 60.2% 43.3%);
   --clr-purple-50: hsl(270 60.0% 53.9%);
-  --clr-purple-60: hsl(270 51.5% 74.1%);
-  --clr-purple-70: hsl(270 52.4% 83.5%);
-  --clr-purple-80: hsl(270 53.6% 89.0%);
-  --clr-purple-90: hsl(270 53.3% 94.1%);
-  --clr-purple-95: hsl(270 55.6% 96.5%);
-  --clr-safe-5: hsl(154 59.0% 7.6%);
-  --clr-safe-10: hsl(155 60.0% 12.7%);
-  --clr-safe-20: hsl(155 59.1% 17.3%);
-  --clr-safe-30: hsl(155 59.7% 26.3%);
-  --clr-safe-40: hsl(155 59.8% 36.1%);
+  --clr-purple-60: hsl(270 56.9% 70.0%);
+  --clr-purple-70: hsl(270 54.2% 81.2%);
+  --clr-purple-80: hsl(270 50.0% 90.6%);
+  --clr-purple-90: hsl(270 53.8% 94.9%);
+  --clr-purple-95: hsl(266 53.8% 97.5%);
+  --clr-safe-5: hsl(154 60.0% 9.8%);
+  --clr-safe-10: hsl(154 60.0% 13.7%);
+  --clr-safe-20: hsl(155 60.0% 20.6%);
+  --clr-safe-30: hsl(154 60.0% 28.4%);
+  --clr-safe-40: hsl(155 60.0% 36.3%);
   --clr-safe-50: hsl(155 60.0% 45.1%);
-  --clr-safe-60: hsl(155 50.8% 64.1%);
-  --clr-safe-70: hsl(155 52.2% 77.8%);
-  --clr-safe-80: hsl(154 53.6% 89.0%);
-  --clr-safe-90: hsl(154 53.3% 94.1%);
-  --clr-safe-95: hsl(156 55.6% 96.5%);
-  --clr-warn-5: hsl(35 95.1% 16.1%);
-  --clr-warn-10: hsl(35 94.2% 20.4%);
-  --clr-warn-20: hsl(35 95.1% 24.1%);
-  --clr-warn-30: hsl(35 95.2% 32.9%);
-  --clr-warn-40: hsl(34 90.8% 42.5%);
+  --clr-safe-60: hsl(155 59.1% 64.5%);
+  --clr-safe-70: hsl(155 54.8% 77.5%);
+  --clr-safe-80: hsl(155 50.9% 88.8%);
+  --clr-safe-90: hsl(156 48.4% 93.9%);
+  --clr-safe-95: hsl(158 50.0% 96.9%);
+  --clr-warn-5: hsl(35 96.4% 10.8%);
+  --clr-warn-10: hsl(35 94.9% 15.3%);
+  --clr-warn-20: hsl(35 94.9% 22.9%);
+  --clr-warn-30: hsl(35 95.0% 31.6%);
+  --clr-warn-40: hsl(35 95.1% 40.2%);
   --clr-warn-50: hsl(35 95.3% 50.0%);
-  --clr-warn-60: hsl(35 80.6% 69.6%);
-  --clr-warn-70: hsl(35 81.4% 81.0%);
-  --clr-warn-80: hsl(35 82.1% 89.0%);
-  --clr-warn-90: hsl(35 86.7% 94.1%);
-  --clr-warn-95: hsl(34 88.9% 96.5%);
-  --commit-integrated: var(--clr-purple-50);
+  --clr-warn-60: hsl(35 91.6% 67.5%);
+  --clr-warn-70: hsl(35 86.5% 79.6%);
+  --clr-warn-80: hsl(36 80.8% 89.8%);
+  --clr-warn-90: hsl(37 79.3% 94.3%);
+  --clr-warn-95: hsl(35 85.7% 97.3%);
+  --commit-integrated: light-dark(var(--clr-purple-50), var(--clr-purple-40));
   --commit-local: var(--clr-gray-50);
   --commit-remote: var(--clr-pop-50);
-  --commit-shadow: var(--clr-pop-60);
+  --commit-shadow: light-dark(var(--clr-pop-60), var(--clr-pop-30));
   --commit-upstream: var(--clr-warn-50);
-  --diff-addition-count-bg: hsl(158 67.5% 84.3%);
-  --diff-addition-count-border: hsl(155 36.1% 66.9%);
-  --diff-addition-count-text: hsl(154 17.2% 46.9%);
-  --diff-addition-line-bg: hsl(157 82.1% 89.0%);
-  --diff-addition-line-highlight: hsl(154 70.0% 76.5%);
-  --diff-count-bg: hsl(60 5.9% 96.7%);
-  --diff-count-border: var(--border-2);
-  --diff-count-text: var(--text-2);
-  --diff-deletion-count-bg: hsl(348 100.0% 92.0%);
-  --diff-deletion-count-border: hsl(0 51.1% 81.6%);
-  --diff-deletion-count-text: hsl(0 18.1% 53.5%);
-  --diff-deletion-line-bg: hsl(355 100.0% 95.1%);
-  --diff-deletion-line-highlight: hsl(346 93.4% 88.0%);
-  --diff-line-bg: var(--bg-1);
-  --diff-locked-count-bg: hsl(40 92.3% 89.8%);
-  --diff-locked-count-border: hsl(38 74.4% 75.5%);
-  --diff-locked-count-text: hsl(38 67.7% 43.7%);
-  --diff-locked-selected-count-bg: hsl(40 92.0% 75.5%);
-  --diff-locked-selected-count-border: hsl(38 67.9% 58.4%);
-  --diff-locked-selected-count-text: hsl(38 72.4% 38.4%);
-  --diff-selected-count-bg: var(--clr-pop-50);
-  --diff-selected-count-border: var(--clr-pop-40);
-  --diff-selected-count-text: var(--clr-pop-90);
-  --fill-danger-bg: var(--clr-danger-50);
+  --fill-danger-bg: light-dark(var(--clr-danger-50), var(--clr-danger-40));
   --fill-danger-fg: var(--clr-danger-95);
-  --fill-gray-bg: var(--clr-gray-20);
-  --fill-gray-fg: var(--clr-gray-100);
-  --fill-pop-bg: var(--clr-pop-50);
+  --fill-gray-bg: light-dark(var(--clr-gray-20), var(--clr-gray-80));
+  --fill-gray-fg: light-dark(var(--clr-gray-100), var(--clr-gray-0));
+  --fill-pop-bg: light-dark(var(--clr-pop-50), var(--clr-pop-40));
   --fill-pop-fg: var(--clr-gray-100);
   --fill-purple-bg: var(--clr-purple-50);
-  --fill-purple-fg: var(--clr-purple-95);
-  --fill-safe-bg: var(--clr-safe-50);
-  --fill-safe-fg: var(--clr-safe-95);
-  --fill-warn-bg: var(--clr-warn-50);
-  --fill-warn-fg: var(--clr-warn-95);
-  --focus-bg: var(--clr-pop-90);
-  --focus-bg-mute: var(--clr-gray-90);
-  --focus-fg: var(--clr-pop-50);
-  --focus-fg-mute: var(--clr-gray-60);
-  --fx-shadow-l: 0 10px 40px 0 var(--shadow-clr);
-  --fx-shadow-m: 0 6px 30px 0 var(--shadow-clr);
-  --fx-shadow-s: 0 4px 14px 0 var(--shadow-clr);
-  --opacity-disabled: 60%;
-  --opacity-hover: 5%;
-  --radius-button: 0.375rem;
+  --fill-purple-fg: light-dark(var(--clr-purple-95), var(--clr-purple-90));
+  --fill-safe-bg: light-dark(var(--clr-safe-50), var(--clr-safe-40));
+  --fill-safe-fg: light-dark(var(--clr-safe-95), var(--clr-safe-90));
+  --fill-warn-bg: light-dark(var(--clr-warn-50), var(--clr-warn-40));
+  --fill-warn-fg: light-dark(var(--clr-warn-95), var(--clr-warn-90));
+  --focus-ring: light-dark(var(--clr-pop-50), var(--clr-pop-40));
+  --focus-ring-mute: light-dark(var(--clr-gray-60), var(--clr-gray-40));
+  --opacity-5: 5%;
+  --opacity-10: 10%;
+  --opacity-20: 20%;
+  --opacity-30: 30%;
+  --opacity-40: 40%;
+  --opacity-50: 50%;
+  --opacity-60: 60%;
+  --opacity-70: 70%;
+  --opacity-80: 80%;
+  --opacity-90: 90%;
+  --opacity-95: 95%;
   --radius-l: 0.75rem;
-  --radius-m: 0.375rem;
+  --radius-m: 0.5rem;
   --radius-ml: 0.625rem;
   --radius-s: 0.25rem;
-  --shadow-clr: hsl(0 0.0% 0.0% / 0.10196078431372549);
+  --shadow-clr: light-dark(hsl(0 0.0% 0.0% / 0.1), hsl(0 0.0% 0.0% / 0.5));
   --size-button: 1.75rem;
-  --size-card-padding: 0.875rem;
   --size-cta: 2rem;
   --size-icon: 1rem;
   --size-tag: 1.375rem;
-  --text-1: var(--clr-gray-5);
-  --text-2: var(--clr-gray-50);
-  --text-3: var(--clr-gray-60);
-  --text-danger: var(--clr-danger-10);
+  --text-1: light-dark(var(--clr-gray-5), var(--clr-gray-95));
+  --text-2: light-dark(var(--clr-gray-50), var(--clr-gray-60));
+  --text-3: light-dark(var(--clr-gray-60), var(--clr-gray-40));
+  --text-danger: var(--clr-danger-50);
   --text-fontfamily-accent: But Head;
-  --text-fontfamily-default: Inter;
+  --text-fontfamily-base: Inter;
   --text-fontfamily-mono: Geist Mono;
-  --text-lineheight-accent: 110%;
+  --text-lineheight-accent: 94%;
   --text-lineheight-body: 160%;
   --text-lineheight-default: 120%;
-  --text-pop: var(--clr-pop-10);
-  --text-purple: var(--clr-purple-10);
-  --text-safe: var(--clr-safe-10);
-  --text-warn: var(--clr-warn-10);
-  --text-weight-bold: 600;
-  --text-weight-regular: 400;
-  --text-weight-semibold: 500;
-  --tooltip-bg: var(--clr-gray-95);
-  --tooltip-border: var(--clr-gray-80);
+  --text-pop: light-dark(var(--clr-pop-40), var(--clr-pop-50));
+  --text-purple: light-dark(var(--clr-purple-40), var(--clr-purple-50));
+  --text-safe: light-dark(var(--clr-safe-40), var(--clr-safe-50));
+  --text-warn: light-dark(var(--clr-warn-40), var(--clr-warn-50));
+  --text-weight-bold: 650;
+  --text-weight-regular: 450;
+  --text-weight-semibold: 550;
+  --tooltip-bg: light-dark(var(--clr-gray-95), var(--clr-gray-10));
+  --tooltip-border: light-dark(var(--clr-gray-80), var(--clr-gray-30));
 }
 
-:root.dark {
-  --art-scene-bg: hsl(177 44.1% 28.0%);
-  --art-scene-fill: hsl(79 37.8% 82.4%);
-  --art-scene-outline: hsl(180 25.9% 10.6%);
-  --art-spot-fill: var(--clr-gray-40);
-  --art-spot-fill-pop: var(--clr-pop-30);
-  --bg-1: var(--clr-gray-10);
-  --bg-2: var(--clr-gray-5);
-  --bg-3: var(--clr-gray-0);
-  --bg-danger: var(--clr-danger-5);
-  --bg-mute: var(--clr-gray-20);
-  --bg-overlay: hsl(0 0.0% 0.0% / 0.5019607843137255);
-  --bg-pop: var(--clr-pop-5);
-  --bg-purple: var(--clr-purple-5);
-  --bg-safe: var(--clr-safe-5);
-  --bg-toast: var(--clr-gray-95);
-  --bg-warn: var(--clr-warn-5);
-  --border-1: var(--clr-gray-40);
-  --border-2: var(--clr-gray-30);
-  --border-3: var(--clr-gray-20);
-  --btn-danger-outline: var(--clr-danger-50);
-  --btn-danger-outline-bg: var(--clr-danger-40);
-  --btn-danger-outline-text: var(--clr-danger-60);
-  --btn-gray-outline: var(--clr-gray-50);
-  --btn-gray-outline-bg: var(--clr-gray-40);
-  --btn-gray-outline-text: var(--clr-gray-100);
-  --btn-opacity-outline-bg: 10%;
-  --btn-opacity-outline-bg-hover: 25%;
-  --btn-opacity-outline-border: 40%;
-  --btn-opacity-outline-icon: 70%;
-  --btn-opacity-solid-hover: 10%;
-  --btn-opacity-solid-icon: 80%;
-  --btn-pop-outline: var(--clr-pop-50);
-  --btn-pop-outline-bg: var(--clr-pop-40);
-  --btn-pop-outline-text: var(--clr-pop-60);
-  --btn-purple-outline: var(--clr-purple-50);
-  --btn-purple-outline-bg: var(--clr-purple-40);
-  --btn-purple-outline-text: var(--clr-purple-60);
-  --btn-safe-outline: var(--clr-safe-50);
-  --btn-safe-outline-bg: var(--clr-safe-40);
-  --btn-safe-outline-text: var(--clr-safe-60);
-  --btn-warn-outline: var(--clr-warn-50);
-  --btn-warn-outline-bg: var(--clr-warn-40);
-  --btn-warn-outline-text: var(--clr-warn-60);
-  --change-status-addition: var(--clr-safe-30);
-  --change-status-deletion: var(--clr-danger-30);
-  --change-status-modification: var(--clr-warn-30);
-  --change-status-rename: var(--clr-purple-40);
-  --chip-danger-bg: var(--clr-danger-10);
-  --chip-danger-fg: var(--clr-danger-60);
-  --chip-gray-bg: var(--clr-gray-20);
-  --chip-gray-fg: var(--clr-gray-70);
-  --chip-pop-bg: var(--clr-pop-10);
-  --chip-pop-fg: var(--clr-pop-60);
-  --chip-purple-bg: var(--clr-purple-10);
-  --chip-purple-fg: var(--clr-purple-60);
-  --chip-safe-bg: var(--clr-safe-10);
-  --chip-safe-fg: var(--clr-safe-60);
-  --chip-warn-bg: var(--clr-warn-10);
-  --chip-warn-fg: var(--clr-warn-60);
-  --commit-integrated: var(--clr-purple-40);
-  --commit-local: var(--clr-gray-50);
-  --commit-remote: var(--clr-pop-50);
-  --commit-shadow: var(--clr-pop-30);
-  --commit-upstream: var(--clr-warn-50);
-  --diff-addition-count-bg: hsl(166 47.5% 23.1%);
-  --diff-addition-count-border: hsl(156 31.5% 35.5%);
-  --diff-addition-count-text: hsl(169 33.3% 62.4%);
-  --diff-addition-line-bg: hsl(168 52.9% 16.7%);
-  --diff-addition-line-highlight: hsl(168 71.8% 27.8%);
-  --diff-count-bg: hsl(12 5.5% 17.8%);
-  --diff-count-border: var(--border-2);
-  --diff-count-text: var(--text-2);
-  --diff-deletion-count-bg: hsl(350 51.4% 29.0%);
-  --diff-deletion-count-border: hsl(0 38.0% 42.4%);
-  --diff-deletion-count-text: hsl(349 64.6% 74.5%);
-  --diff-deletion-line-bg: hsl(347 57.0% 21.0%);
-  --diff-deletion-line-highlight: hsl(348 57.2% 39.4%);
-  --diff-line-bg: var(--bg-1);
-  --diff-locked-count-bg: hsl(36 62.7% 23.1%);
-  --diff-locked-count-border: hsl(35 48.4% 35.7%);
-  --diff-locked-count-text: hsl(38 74.7% 64.3%);
-  --diff-locked-selected-count-bg: hsl(36 68.5% 36.1%);
-  --diff-locked-selected-count-border: hsl(35 52.2% 49.2%);
-  --diff-locked-selected-count-text: hsl(38 94.7% 85.3%);
-  --diff-selected-count-bg: var(--clr-pop-30);
-  --diff-selected-count-border: var(--clr-pop-40);
-  --diff-selected-count-text: var(--clr-pop-80);
-  --fill-danger-bg: var(--clr-danger-40);
-  --fill-danger-fg: var(--clr-danger-95);
-  --fill-gray-bg: var(--clr-gray-80);
-  --fill-gray-fg: var(--clr-gray-0);
-  --fill-pop-bg: var(--clr-pop-40);
-  --fill-pop-fg: var(--clr-gray-100);
-  --fill-purple-bg: var(--clr-purple-50);
-  --fill-purple-fg: var(--clr-purple-90);
-  --fill-safe-bg: var(--clr-safe-40);
-  --fill-safe-fg: var(--clr-safe-90);
-  --fill-warn-bg: var(--clr-warn-40);
-  --fill-warn-fg: var(--clr-warn-90);
-  --focus-bg: var(--clr-pop-10);
-  --focus-bg-mute: var(--clr-gray-20);
-  --focus-fg: var(--clr-pop-40);
-  --focus-fg-mute: var(--clr-gray-40);
-  --fx-shadow-l: 0 10px 40px 0 var(--shadow-clr);
-  --fx-shadow-m: 0 6px 30px 0 var(--shadow-clr);
-  --fx-shadow-s: 0 4px 14px 0 var(--shadow-clr);
-  --shadow-clr: hsl(0 0.0% 0.0% / 0.5019607843137255);
-  --text-1: var(--clr-gray-95);
-  --text-2: var(--clr-gray-60);
-  --text-3: var(--clr-gray-40);
-  --text-danger: var(--clr-danger-80);
-  --text-pop: var(--clr-pop-80);
-  --text-purple: var(--clr-purple-80);
-  --text-safe: var(--clr-safe-80);
-  --text-warn: var(--clr-warn-80);
-  --tooltip-bg: var(--clr-gray-10);
-  --tooltip-border: var(--clr-gray-30);
+:root.light {
+  color-scheme: light;
 }
 
+:root.dark {
+  color-scheme: dark;
+}