From ce40f03b5ddf2f57e031da196606a1bb14c1eb41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ali=20Mert=20=C3=87akar?= <mail@alimert.net>
Date: Tue, 26 Mar 2024 19:18:33 +0300
Subject: [PATCH] More styling

---
 src/pages/content/style.scss  |  26 ++-
 src/pages/content/themes.scss | 390 ++++++++++++++++++++++++++++++++++
 2 files changed, 414 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/content/themes.scss

diff --git a/src/pages/content/style.scss b/src/pages/content/style.scss
index 9b2a0e6..13d78f7 100644
--- a/src/pages/content/style.scss
+++ b/src/pages/content/style.scss
@@ -1,3 +1,4 @@
+@use 'themes';
 // TODO parse selectors from bitbucket with a script?
 //    {
 //         loader: "sass-loader",
@@ -11,7 +12,9 @@ $sidebarTabSelector: '.css-1hpn4bw';
 $sidebarButtonOnHover: '.css-t3yiul';
 $sidebarButton: '.css-1t5na7c';
 $sidebarButtonText: '.css-1olrtn';
-$sidebarButtonTextHover: 'css-1h2b0g4';
+$sidebarButtonTextHover: '.css-1h2b0g4';
+$sidebarRepoName: '.css-ienhqj';
+$sidebarRepoNameHover: '.css-ibmu9r';
 
 #{$bitbucketMain} {
   & #{$sidebarSelector} {
@@ -62,6 +65,24 @@ $sidebarButtonTextHover: 'css-1h2b0g4';
       }
     }
   }
+
+  div[data-testid='renderer-wrapper'] {
+    &:hover {
+      padding: 0.5rem;
+      background-color: var(--color-main);
+      border-radius: 15px;
+      filter: brightness(85%);
+    }
+  }
+
+  & #{$sidebarRepoName} {
+    filter: brightness(85%);
+  }
+
+  & #{$sidebarRepoNameHover} {
+    filter: brightness(85%);
+    background-color: var(--color-main) !important;
+  }
 }
 
 body:has(#{$bitbucketMain}) {
@@ -72,6 +93,7 @@ body:has(#{$bitbucketMain}) {
   --color-hover-text: #579dff;
   --color-token: #aab1be;
   --color-token-function: #c678dd;
-
+  // override bitbucket to dark
+  @include themes.bitbucket-dark-mode-colors;
   background-color: var(--color-main);
 }
diff --git a/src/pages/content/themes.scss b/src/pages/content/themes.scss
new file mode 100644
index 0000000..3710bdd
--- /dev/null
+++ b/src/pages/content/themes.scss
@@ -0,0 +1,390 @@
+@mixin bitbucket-dark-mode-colors {
+  --ds-text: #b6c2cf;
+  --ds-text-accent-lime: #b3df72;
+  --ds-text-accent-lime-bolder: #d3f1a7;
+  --ds-text-accent-red: #fd9891;
+  --ds-text-accent-red-bolder: #ffd5d2;
+  --ds-text-accent-orange: #fec195;
+  --ds-text-accent-orange-bolder: #fedec8;
+  --ds-text-accent-yellow: #f5cd47;
+  --ds-text-accent-yellow-bolder: #f8e6a0;
+  --ds-text-accent-green: #7ee2b8;
+  --ds-text-accent-green-bolder: #baf3db;
+  --ds-text-accent-teal: #9dd9ee;
+  --ds-text-accent-teal-bolder: #c6edfb;
+  --ds-text-accent-blue: #85b8ff;
+  --ds-text-accent-blue-bolder: #cce0ff;
+  --ds-text-accent-purple: #b8acf6;
+  --ds-text-accent-purple-bolder: #dfd8fd;
+  --ds-text-accent-magenta: #f797d2;
+  --ds-text-accent-magenta-bolder: #fdd0ec;
+  --ds-text-accent-gray: #9fadbc;
+  --ds-text-accent-gray-bolder: #dee4ea;
+  --ds-text-disabled: #bfdbf847;
+  --ds-text-inverse: #1d2125;
+  --ds-text-selected: #579dff;
+  --ds-text-brand: #579dff;
+  --ds-text-danger: #fd9891;
+  --ds-text-warning: #f5cd47;
+  --ds-text-warning-inverse: #1d2125;
+  --ds-text-success: #7ee2b8;
+  --ds-text-discovery: #b8acf6;
+  --ds-text-information: #85b8ff;
+  --ds-text-subtlest: #8c9bab;
+  --ds-text-subtle: #9fadbc;
+  --ds-link: #579dff;
+  --ds-link-pressed: #85b8ff;
+  --ds-link-visited: #b8acf6;
+  --ds-icon: #9fadbc;
+  --ds-icon-accent-lime: #82b536;
+  --ds-icon-accent-red: #e2483d;
+  --ds-icon-accent-orange: #f38a3f;
+  --ds-icon-accent-yellow: #f5cd47;
+  --ds-icon-accent-green: #2abb7f;
+  --ds-icon-accent-teal: #42b2d7;
+  --ds-icon-accent-blue: #388bff;
+  --ds-icon-accent-purple: #8f7ee7;
+  --ds-icon-accent-magenta: #da62ac;
+  --ds-icon-accent-gray: #738496;
+  --ds-icon-disabled: #bfdbf847;
+  --ds-icon-inverse: #1d2125;
+  --ds-icon-selected: #579dff;
+  --ds-icon-brand: #579dff;
+  --ds-icon-danger: #f15b50;
+  --ds-icon-warning: #f5cd47;
+  --ds-icon-warning-inverse: #1d2125;
+  --ds-icon-success: #2abb7f;
+  --ds-icon-discovery: #8f7ee7;
+  --ds-icon-information: #388bff;
+  --ds-icon-subtle: #8c9bab;
+  --ds-border: #a6c5e229;
+  --ds-border-accent-lime: #82b536;
+  --ds-border-accent-red: #f15b50;
+  --ds-border-accent-orange: #f38a3f;
+  --ds-border-accent-yellow: #cf9f02;
+  --ds-border-accent-green: #2abb7f;
+  --ds-border-accent-teal: #42b2d7;
+  --ds-border-accent-blue: #388bff;
+  --ds-border-accent-purple: #8f7ee7;
+  --ds-border-accent-magenta: #da62ac;
+  --ds-border-accent-gray: #738496;
+  --ds-border-disabled: #a1bdd914;
+  --ds-border-focused: #85b8ff;
+  --ds-border-input: #a6c5e229;
+  --ds-border-inverse: #161a1d;
+  --ds-border-selected: #579dff;
+  --ds-border-brand: #579dff;
+  --ds-border-danger: #f15b50;
+  --ds-border-warning: #cf9f02;
+  --ds-border-success: #2abb7f;
+  --ds-border-discovery: #8f7ee7;
+  --ds-border-information: #388bff;
+  --ds-border-bold: #738496;
+  --ds-background-accent-lime-subtlest: #28311b;
+  --ds-background-accent-lime-subtlest-hovered: #37471f;
+  --ds-background-accent-lime-subtlest-pressed: #4c6b1f;
+  --ds-background-accent-lime-subtler: #37471f;
+  --ds-background-accent-lime-subtler-hovered: #4c6b1f;
+  --ds-background-accent-lime-subtler-pressed: #5b7f24;
+  --ds-background-accent-lime-subtle: #4c6b1f;
+  --ds-background-accent-lime-subtle-hovered: #37471f;
+  --ds-background-accent-lime-subtle-pressed: #28311b;
+  --ds-background-accent-lime-bolder: #94c748;
+  --ds-background-accent-lime-bolder-hovered: #b3df72;
+  --ds-background-accent-lime-bolder-pressed: #d3f1a7;
+  --ds-background-accent-red-subtlest: #42221f;
+  --ds-background-accent-red-subtlest-hovered: #5d1f1a;
+  --ds-background-accent-red-subtlest-pressed: #ae2e24;
+  --ds-background-accent-red-subtler: #5d1f1a;
+  --ds-background-accent-red-subtler-hovered: #ae2e24;
+  --ds-background-accent-red-subtler-pressed: #c9372c;
+  --ds-background-accent-red-subtle: #ae2e24;
+  --ds-background-accent-red-subtle-hovered: #5d1f1a;
+  --ds-background-accent-red-subtle-pressed: #42221f;
+  --ds-background-accent-red-bolder: #f87168;
+  --ds-background-accent-red-bolder-hovered: #fd9891;
+  --ds-background-accent-red-bolder-pressed: #ffd5d2;
+  --ds-background-accent-orange-subtlest: #38291e;
+  --ds-background-accent-orange-subtlest-hovered: #702e00;
+  --ds-background-accent-orange-subtlest-pressed: #a54800;
+  --ds-background-accent-orange-subtler: #702e00;
+  --ds-background-accent-orange-subtler-hovered: #a54800;
+  --ds-background-accent-orange-subtler-pressed: #c25100;
+  --ds-background-accent-orange-subtle: #a54800;
+  --ds-background-accent-orange-subtle-hovered: #702e00;
+  --ds-background-accent-orange-subtle-pressed: #38291e;
+  --ds-background-accent-orange-bolder: #fea362;
+  --ds-background-accent-orange-bolder-hovered: #fec195;
+  --ds-background-accent-orange-bolder-pressed: #fedec8;
+  --ds-background-accent-yellow-subtlest: #332e1b;
+  --ds-background-accent-yellow-subtlest-hovered: #533f04;
+  --ds-background-accent-yellow-subtlest-pressed: #7f5f01;
+  --ds-background-accent-yellow-subtler: #533f04;
+  --ds-background-accent-yellow-subtler-hovered: #7f5f01;
+  --ds-background-accent-yellow-subtler-pressed: #946f00;
+  --ds-background-accent-yellow-subtle: #7f5f01;
+  --ds-background-accent-yellow-subtle-hovered: #533f04;
+  --ds-background-accent-yellow-subtle-pressed: #332e1b;
+  --ds-background-accent-yellow-bolder: #e2b203;
+  --ds-background-accent-yellow-bolder-hovered: #f5cd47;
+  --ds-background-accent-yellow-bolder-pressed: #f8e6a0;
+  --ds-background-accent-green-subtlest: #1c3329;
+  --ds-background-accent-green-subtlest-hovered: #164b35;
+  --ds-background-accent-green-subtlest-pressed: #216e4e;
+  --ds-background-accent-green-subtler: #164b35;
+  --ds-background-accent-green-subtler-hovered: #216e4e;
+  --ds-background-accent-green-subtler-pressed: #1f845a;
+  --ds-background-accent-green-subtle: #216e4e;
+  --ds-background-accent-green-subtle-hovered: #164b35;
+  --ds-background-accent-green-subtle-pressed: #1c3329;
+  --ds-background-accent-green-bolder: #4bce97;
+  --ds-background-accent-green-bolder-hovered: #7ee2b8;
+  --ds-background-accent-green-bolder-pressed: #baf3db;
+  --ds-background-accent-teal-subtlest: #1e3137;
+  --ds-background-accent-teal-subtlest-hovered: #164555;
+  --ds-background-accent-teal-subtlest-pressed: #206a83;
+  --ds-background-accent-teal-subtler: #164555;
+  --ds-background-accent-teal-subtler-hovered: #206a83;
+  --ds-background-accent-teal-subtler-pressed: #227d9b;
+  --ds-background-accent-teal-subtle: #206a83;
+  --ds-background-accent-teal-subtle-hovered: #164555;
+  --ds-background-accent-teal-subtle-pressed: #1e3137;
+  --ds-background-accent-teal-bolder: #6cc3e0;
+  --ds-background-accent-teal-bolder-hovered: #9dd9ee;
+  --ds-background-accent-teal-bolder-pressed: #c6edfb;
+  --ds-background-accent-blue-subtlest: #1c2b41;
+  --ds-background-accent-blue-subtlest-hovered: #09326c;
+  --ds-background-accent-blue-subtlest-pressed: #0055cc;
+  --ds-background-accent-blue-subtler: #09326c;
+  --ds-background-accent-blue-subtler-hovered: #0055cc;
+  --ds-background-accent-blue-subtler-pressed: #0c66e4;
+  --ds-background-accent-blue-subtle: #0055cc;
+  --ds-background-accent-blue-subtle-hovered: #09326c;
+  --ds-background-accent-blue-subtle-pressed: #1c2b41;
+  --ds-background-accent-blue-bolder: #579dff;
+  --ds-background-accent-blue-bolder-hovered: #85b8ff;
+  --ds-background-accent-blue-bolder-pressed: #cce0ff;
+  --ds-background-accent-purple-subtlest: #2b273f;
+  --ds-background-accent-purple-subtlest-hovered: #352c63;
+  --ds-background-accent-purple-subtlest-pressed: #5e4db2;
+  --ds-background-accent-purple-subtler: #352c63;
+  --ds-background-accent-purple-subtler-hovered: #5e4db2;
+  --ds-background-accent-purple-subtler-pressed: #6e5dc6;
+  --ds-background-accent-purple-subtle: #5e4db2;
+  --ds-background-accent-purple-subtle-hovered: #352c63;
+  --ds-background-accent-purple-subtle-pressed: #2b273f;
+  --ds-background-accent-purple-bolder: #9f8fef;
+  --ds-background-accent-purple-bolder-hovered: #b8acf6;
+  --ds-background-accent-purple-bolder-pressed: #dfd8fd;
+  --ds-background-accent-magenta-subtlest: #3d2232;
+  --ds-background-accent-magenta-subtlest-hovered: #50253f;
+  --ds-background-accent-magenta-subtlest-pressed: #943d73;
+  --ds-background-accent-magenta-subtler: #50253f;
+  --ds-background-accent-magenta-subtler-hovered: #943d73;
+  --ds-background-accent-magenta-subtler-pressed: #ae4787;
+  --ds-background-accent-magenta-subtle: #943d73;
+  --ds-background-accent-magenta-subtle-hovered: #50253f;
+  --ds-background-accent-magenta-subtle-pressed: #3d2232;
+  --ds-background-accent-magenta-bolder: #e774bb;
+  --ds-background-accent-magenta-bolder-hovered: #f797d2;
+  --ds-background-accent-magenta-bolder-pressed: #fdd0ec;
+  --ds-background-accent-gray-subtlest: #2c333a;
+  --ds-background-accent-gray-subtlest-hovered: #38414a;
+  --ds-background-accent-gray-subtlest-pressed: #454f59;
+  --ds-background-accent-gray-subtler: #454f59;
+  --ds-background-accent-gray-subtler-hovered: #596773;
+  --ds-background-accent-gray-subtler-pressed: #738496;
+  --ds-background-accent-gray-subtle: #596773;
+  --ds-background-accent-gray-subtle-hovered: #454f59;
+  --ds-background-accent-gray-subtle-pressed: #38414a;
+  --ds-background-accent-gray-bolder: #8c9bab;
+  --ds-background-accent-gray-bolder-hovered: #9fadbc;
+  --ds-background-accent-gray-bolder-pressed: #b6c2cf;
+  --ds-background-disabled: #bcd6f00a;
+  --ds-background-input: #22272b;
+  --ds-background-input-hovered: #282e33;
+  --ds-background-input-pressed: #22272b;
+  --ds-background-inverse-subtle: #ffffff29;
+  --ds-background-inverse-subtle-hovered: #ffffff3d;
+  --ds-background-inverse-subtle-pressed: #ffffff52;
+  --ds-background-neutral: #a1bdd914;
+  --ds-background-neutral-hovered: #a6c5e229;
+  --ds-background-neutral-pressed: #bfdbf847;
+  --ds-background-neutral-subtle: #00000000;
+  --ds-background-neutral-subtle-hovered: #a1bdd914;
+  --ds-background-neutral-subtle-pressed: #a6c5e229;
+  --ds-background-neutral-bold: #9fadbc;
+  --ds-background-neutral-bold-hovered: #b6c2cf;
+  --ds-background-neutral-bold-pressed: #c7d1db;
+  --ds-background-selected: #1c2b41;
+  --ds-background-selected-hovered: #09326c;
+  --ds-background-selected-pressed: #0055cc;
+  --ds-background-selected-bold: #579dff;
+  --ds-background-selected-bold-hovered: #85b8ff;
+  --ds-background-selected-bold-pressed: #cce0ff;
+  --ds-background-brand-subtlest: #1c2b41;
+  --ds-background-brand-subtlest-hovered: #09326c;
+  --ds-background-brand-subtlest-pressed: #0055cc;
+  --ds-background-brand-bold: #579dff;
+  --ds-background-brand-bold-hovered: #85b8ff;
+  --ds-background-brand-bold-pressed: #cce0ff;
+  --ds-background-brand-boldest: #e9f2ff;
+  --ds-background-brand-boldest-hovered: #cce0ff;
+  --ds-background-brand-boldest-pressed: #85b8ff;
+  --ds-background-danger: #42221f;
+  --ds-background-danger-hovered: #5d1f1a;
+  --ds-background-danger-pressed: #ae2e24;
+  --ds-background-danger-bold: #f87168;
+  --ds-background-danger-bold-hovered: #fd9891;
+  --ds-background-danger-bold-pressed: #ffd5d2;
+  --ds-background-warning: #332e1b;
+  --ds-background-warning-hovered: #533f04;
+  --ds-background-warning-pressed: #7f5f01;
+  --ds-background-warning-bold: #f5cd47;
+  --ds-background-warning-bold-hovered: #e2b203;
+  --ds-background-warning-bold-pressed: #cf9f02;
+  --ds-background-success: #1c3329;
+  --ds-background-success-hovered: #164b35;
+  --ds-background-success-pressed: #216e4e;
+  --ds-background-success-bold: #4bce97;
+  --ds-background-success-bold-hovered: #7ee2b8;
+  --ds-background-success-bold-pressed: #baf3db;
+  --ds-background-discovery: #2b273f;
+  --ds-background-discovery-hovered: #352c63;
+  --ds-background-discovery-pressed: #5e4db2;
+  --ds-background-discovery-bold: #9f8fef;
+  --ds-background-discovery-bold-hovered: #b8acf6;
+  --ds-background-discovery-bold-pressed: #dfd8fd;
+  --ds-background-information: #1c2b41;
+  --ds-background-information-hovered: #09326c;
+  --ds-background-information-pressed: #0055cc;
+  --ds-background-information-bold: #579dff;
+  --ds-background-information-bold-hovered: #85b8ff;
+  --ds-background-information-bold-pressed: #cce0ff;
+  --ds-blanket: #10121499;
+  --ds-blanket-selected: #1d7afc14;
+  --ds-blanket-danger: #e3493514;
+  --ds-interaction-hovered: #ffffff33;
+  --ds-interaction-pressed: #ffffff5c;
+  --ds-skeleton: #a1bdd914;
+  --ds-skeleton-subtle: #bcd6f00a;
+  --ds-chart-categorical-1: #2898bd;
+  --ds-chart-categorical-1-hovered: #42b2d7;
+  --ds-chart-categorical-2: #b8acf6;
+  --ds-chart-categorical-2-hovered: #dfd8fd;
+  --ds-chart-categorical-3: #e56910;
+  --ds-chart-categorical-3-hovered: #f38a3f;
+  --ds-chart-categorical-4: #f797d2;
+  --ds-chart-categorical-4-hovered: #fdd0ec;
+  --ds-chart-categorical-5: #cce0ff;
+  --ds-chart-categorical-5-hovered: #e9f2ff;
+  --ds-chart-categorical-6: #8270db;
+  --ds-chart-categorical-6-hovered: #8f7ee7;
+  --ds-chart-categorical-7: #fdd0ec;
+  --ds-chart-categorical-7-hovered: #ffecf8;
+  --ds-chart-categorical-8: #fec195;
+  --ds-chart-categorical-8-hovered: #fedec8;
+  --ds-chart-lime-bold: #82b536;
+  --ds-chart-lime-bold-hovered: #94c748;
+  --ds-chart-lime-bolder: #94c748;
+  --ds-chart-lime-bolder-hovered: #b3df72;
+  --ds-chart-lime-boldest: #b3df72;
+  --ds-chart-lime-boldest-hovered: #d3f1a7;
+  --ds-chart-neutral: #738496;
+  --ds-chart-neutral-hovered: #8c9bab;
+  --ds-chart-red-bold: #e2483d;
+  --ds-chart-red-bold-hovered: #f15b50;
+  --ds-chart-red-bolder: #f15b50;
+  --ds-chart-red-bolder-hovered: #f87168;
+  --ds-chart-red-boldest: #fd9891;
+  --ds-chart-red-boldest-hovered: #ffd5d2;
+  --ds-chart-orange-bold: #f38a3f;
+  --ds-chart-orange-bold-hovered: #fea362;
+  --ds-chart-orange-bolder: #fea362;
+  --ds-chart-orange-bolder-hovered: #fec195;
+  --ds-chart-orange-boldest: #fec195;
+  --ds-chart-orange-boldest-hovered: #fedec8;
+  --ds-chart-yellow-bold: #cf9f02;
+  --ds-chart-yellow-bold-hovered: #e2b203;
+  --ds-chart-yellow-bolder: #e2b203;
+  --ds-chart-yellow-bolder-hovered: #f5cd47;
+  --ds-chart-yellow-boldest: #f5cd47;
+  --ds-chart-yellow-boldest-hovered: #f8e6a0;
+  --ds-chart-green-bold: #2abb7f;
+  --ds-chart-green-bold-hovered: #4bce97;
+  --ds-chart-green-bolder: #4bce97;
+  --ds-chart-green-bolder-hovered: #7ee2b8;
+  --ds-chart-green-boldest: #7ee2b8;
+  --ds-chart-green-boldest-hovered: #baf3db;
+  --ds-chart-teal-bold: #42b2d7;
+  --ds-chart-teal-bold-hovered: #6cc3e0;
+  --ds-chart-teal-bolder: #6cc3e0;
+  --ds-chart-teal-bolder-hovered: #9dd9ee;
+  --ds-chart-teal-boldest: #9dd9ee;
+  --ds-chart-teal-boldest-hovered: #c6edfb;
+  --ds-chart-blue-bold: #1d7afc;
+  --ds-chart-blue-bold-hovered: #388bff;
+  --ds-chart-blue-bolder: #388bff;
+  --ds-chart-blue-bolder-hovered: #579dff;
+  --ds-chart-blue-boldest: #85b8ff;
+  --ds-chart-blue-boldest-hovered: #cce0ff;
+  --ds-chart-purple-bold: #8270db;
+  --ds-chart-purple-bold-hovered: #8f7ee7;
+  --ds-chart-purple-bolder: #8f7ee7;
+  --ds-chart-purple-bolder-hovered: #9f8fef;
+  --ds-chart-purple-boldest: #b8acf6;
+  --ds-chart-purple-boldest-hovered: #dfd8fd;
+  --ds-chart-magenta-bold: #cd519d;
+  --ds-chart-magenta-bold-hovered: #da62ac;
+  --ds-chart-magenta-bolder: #da62ac;
+  --ds-chart-magenta-bolder-hovered: #e774bb;
+  --ds-chart-magenta-boldest: #f797d2;
+  --ds-chart-magenta-boldest-hovered: #fdd0ec;
+  --ds-chart-gray-bold: #738496;
+  --ds-chart-gray-bold-hovered: #8c9bab;
+  --ds-chart-gray-bolder: #8c9bab;
+  --ds-chart-gray-bolder-hovered: #9fadbc;
+  --ds-chart-gray-boldest: #9fadbc;
+  --ds-chart-gray-boldest-hovered: #b6c2cf;
+  --ds-chart-brand: #388bff;
+  --ds-chart-brand-hovered: #579dff;
+  --ds-chart-danger: #e2483d;
+  --ds-chart-danger-hovered: #f15b50;
+  --ds-chart-danger-bold: #fd9891;
+  --ds-chart-danger-bold-hovered: #ffd5d2;
+  --ds-chart-warning: #cf9f02;
+  --ds-chart-warning-hovered: #e2b203;
+  --ds-chart-warning-bold: #f5cd47;
+  --ds-chart-warning-bold-hovered: #f8e6a0;
+  --ds-chart-success: #2abb7f;
+  --ds-chart-success-hovered: #4bce97;
+  --ds-chart-success-bold: #7ee2b8;
+  --ds-chart-success-bold-hovered: #baf3db;
+  --ds-chart-discovery: #8270db;
+  --ds-chart-discovery-hovered: #8f7ee7;
+  --ds-chart-discovery-bold: #b8acf6;
+  --ds-chart-discovery-bold-hovered: #dfd8fd;
+  --ds-chart-information: #1d7afc;
+  --ds-chart-information-hovered: #388bff;
+  --ds-chart-information-bold: #85b8ff;
+  --ds-chart-information-bold-hovered: #cce0ff;
+  --ds-surface: #1d2125;
+  --ds-surface-hovered: #22272b;
+  --ds-surface-pressed: #282e33;
+  --ds-surface-overlay: #282e33;
+  --ds-surface-overlay-hovered: #2c333a;
+  --ds-surface-overlay-pressed: #38414a;
+  --ds-surface-raised: #22272b;
+  --ds-surface-raised-hovered: #282e33;
+  --ds-surface-raised-pressed: #2c333a;
+  --ds-surface-sunken: #161a1d;
+  --ds-shadow-overflow: 0px 0px 12px #0304048f, 0px 0px 1px #03040480;
+  --ds-shadow-overflow-perimeter: #03040480;
+  --ds-shadow-overflow-spread: #0304048f;
+  --ds-shadow-overlay: 0px 0px 0px 1px #39424a, 0px 8px 12px #0304045c, 0px 0px 1px 1px #03040480;
+  --ds-shadow-raised: 0px 0px 0px 1px #00000000, 0px 1px 1px #03040480, 0px 0px 1px #03040480;
+  --ds-opacity-disabled: 0.4;
+  --ds-opacity-loading: 0.2;
+  --ds-UNSAFE-transparent: transparent;
+  --ds-elevation-surface-current: #1d2125;
+}