WIPfeature-color-scheme

7 files changed, 586 insertions, 861 deletions

diff --git a/app/javascript/styles/mastodon/_mixins.scss b/app/javascript/styles/mastodon/_mixins.scss
index dcfab6bd015..50c96a6f6f5 100644
--- a/app/javascript/styles/mastodon/_mixins.scss
+++ b/app/javascript/styles/mastodon/_mixins.scss
@@ -15,14 +15,19 @@
   outline: 0;
   box-sizing: border-box;
   width: 100%;
-  border: 0;
+  border: 1px solid var(--surface-outline);
   box-shadow: none;
   font-family: inherit;
-  background: $ui-base-color;
-  color: $darker-text-color;
+  background: var(--surface);
+  color: var(--on-surface);
   border-radius: 4px;
   font-size: 14px;
   margin: 0;
+
+  &::placeholder {
+    color: var(--on-surface-muted);
+    opacity: 1;
+  }
 }
 
 @mixin search-popout {
diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss
index 80d6c13cef7..2195799a985 100644
--- a/app/javascript/styles/mastodon/accounts.scss
+++ b/app/javascript/styles/mastodon/accounts.scss
@@ -216,8 +216,8 @@
   display: inline-flex;
   padding: 4px;
   padding-inline-end: 8px;
-  border: 1px solid $highlight-text-color;
-  color: $highlight-text-color;
+  border: 1px solid var(--primary);
+  color: var(--primary);
   font-weight: 500;
   font-size: 12px;
   letter-spacing: 0.5px;
@@ -305,16 +305,16 @@
   }
 
   .verified {
-    border: 1px solid rgba($valid-value-color, 0.5);
-    background: rgba($valid-value-color, 0.25);
+    border: 1px solid var(--successful-outline);
+    background: var(--successful-variant);
 
     a {
-      color: $valid-value-color;
+      color: var(--successful);
       font-weight: 500;
     }
 
     &__mark {
-      color: $valid-value-color;
+      color: var(--successful);
     }
   }
 
diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss
index 6714b24268f..74b64213269 100644
--- a/app/javascript/styles/mastodon/basics.scss
+++ b/app/javascript/styles/mastodon/basics.scss
@@ -6,9 +6,10 @@
   @return '%23' + unquote($color);
 }
 
+
 body {
   font-family: $font-sans-serif, sans-serif;
-  background: darken($ui-base-color, 7%);
+  background: var(--background);
   font-size: 13px;
   line-height: 18px;
   font-weight: 400;
@@ -66,10 +67,6 @@ body {
     }
   }
 
-  &.lighter {
-    background: $ui-base-color;
-  }
-
   &.with-modals {
     overflow-x: hidden;
     overflow-y: scroll;
@@ -109,7 +106,6 @@ body {
   }
 
   &.embed {
-    background: lighten($ui-base-color, 4%);
     margin: 0;
     padding-bottom: 0;
 
@@ -122,7 +118,6 @@ body {
   }
 
   &.admin {
-    background: darken($ui-base-color, 4%);
     padding: 0;
   }
 
@@ -130,7 +125,6 @@ body {
     position: absolute;
     text-align: center;
     color: $darker-text-color;
-    background: $ui-base-color;
     width: 100%;
     height: 100%;
     padding: 0;
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 7f0f15f1133..62d1d55edf9 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -47,11 +47,11 @@
 }
 
 .button {
-  background-color: $ui-button-background-color;
+  background-color: var(--primary);
   border: 10px none;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   box-sizing: border-box;
-  color: $ui-button-color;
+  color: var(--on-primary);
   cursor: pointer;
   display: inline-flex;
   align-items: center;
@@ -74,7 +74,7 @@
   &:active,
   &:focus,
   &:hover {
-    background-color: $ui-button-focus-background-color;
+    background-color: var(--primary-highlighted);
   }
 
   &:focus-visible {
@@ -85,14 +85,14 @@
     &:active,
     &:focus,
     &:hover {
-      background-color: $ui-button-destructive-focus-background-color;
+      background-color: var(--danger);
       transition: none;
     }
   }
 
   &:disabled,
   &.disabled {
-    background-color: $ui-primary-color;
+    background-color: var(--primary-muted);
     cursor: default;
   }
 
@@ -152,7 +152,7 @@
       &:focus,
       &:hover {
         background: $valid-value-color;
-        color: $primary-text-color;
+        color: var(--on-background);
       }
     }
 
@@ -164,7 +164,7 @@
       &:focus,
       &:hover {
         background: $error-value-color;
-        color: $primary-text-color;
+        color: var(--on-background);
       }
     }
   }
@@ -198,10 +198,10 @@
 
 .icon-button {
   display: inline-flex;
-  color: $action-button-color;
+  color: var(--on-background-muted);
   border: 0;
   padding: 0;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: transparent;
   cursor: pointer;
   align-items: center;
@@ -218,8 +218,8 @@
   &:hover,
   &:active,
   &:focus {
-    color: lighten($action-button-color, 7%);
-    background-color: rgba($action-button-color, 0.15);
+    color: var(--on-background);
+    // background-color: rgba($action-button-color, 0.15);
   }
 
   &:focus-visible {
@@ -227,7 +227,7 @@
   }
 
   &.disabled {
-    color: darken($action-button-color, 13%);
+    opacity: 0.5;
     background-color: transparent;
     cursor: default;
   }
@@ -253,30 +253,30 @@
   }
 
   &.active {
-    color: $highlight-text-color;
+    color: var(--primary);
 
     &:hover,
     &:active,
     &:focus {
-      color: $highlight-text-color;
+      color: var(--primary-highlighted);
       background-color: transparent;
     }
 
     &.disabled {
-      color: lighten($highlight-text-color, 13%);
+      color: var(--primary-muted);
     }
   }
 
   &.overlayed {
     box-sizing: content-box;
-    background: rgba($black, 0.65);
+    background: var(--overlay-variant);
     backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
-    color: rgba($white, 0.7);
-    border-radius: 4px;
+    color: var(--on-overlay);
+    border-radius: var(--radius-sm);
     padding: 2px;
 
     &:hover {
-      background: rgba($black, 0.9);
+      // background: rgba($black, 0.9);
     }
   }
 
@@ -302,7 +302,7 @@
 .text-icon-button {
   color: $lighter-text-color;
   border: 0;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: transparent;
   cursor: pointer;
   font-weight: 600;
@@ -392,7 +392,7 @@ body > [data-popper-placement] {
       flex: 0 0 auto;
       margin-inline-end: 10px;
       top: -1px;
-      border-radius: 4px;
+      border-radius: var(--radius-sm);
       vertical-align: middle;
       cursor: inherit;
 
@@ -411,7 +411,7 @@ body > [data-popper-placement] {
     background: $ui-primary-color;
     box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
     padding: 8px 10px;
-    border-radius: 4px;
+    border-radius: var(--radius-sm);
     font-size: 13px;
     font-weight: 400;
 
@@ -497,12 +497,12 @@ body > [data-popper-placement] {
   }
 
   .spoiler-input__input {
-    border-radius: 4px;
+    border-radius: var(--radius-sm);
   }
 
   .autosuggest-textarea__textarea {
     min-height: 100px;
-    border-radius: 4px 4px 0 0;
+    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
     padding-bottom: 0;
     padding-right: 10px + 22px; // Cannot use inline-end because of dir=auto
     resize: none;
@@ -532,7 +532,7 @@ body > [data-popper-placement] {
     z-index: 99;
     box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
     background: $ui-secondary-color;
-    border-radius: 0 0 4px 4px;
+    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
     color: $inverted-text-color;
     font-size: 14px;
     padding: 6px;
@@ -545,7 +545,7 @@ body > [data-popper-placement] {
   .autosuggest-textarea__suggestions__item {
     padding: 10px;
     cursor: pointer;
-    border-radius: 4px;
+    border-radius: var(--radius-sm);
 
     &:hover,
     &:focus,
@@ -672,7 +672,7 @@ body > [data-popper-placement] {
     }
 
     .compose-form__upload-thumbnail {
-      border-radius: 4px;
+      border-radius: var(--radius-sm);
       background-color: $base-shadow-color;
       background-position: center;
       background-size: cover;
@@ -686,7 +686,7 @@ body > [data-popper-placement] {
   .compose-form__buttons-wrapper {
     padding: 10px;
     background: darken($simple-background-color, 8%);
-    border-radius: 0 0 4px 4px;
+    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
     display: flex;
     justify-content: space-between;
     flex: 0 0 auto;
@@ -795,7 +795,7 @@ body > [data-popper-placement] {
 }
 
 .reply-indicator {
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   margin-bottom: 10px;
   background: $ui-primary-color;
   padding: 10px;
@@ -847,7 +847,7 @@ body > [data-popper-placement] {
   overflow: hidden;
   text-overflow: ellipsis;
   padding-top: 2px;
-  color: $primary-text-color;
+  color: var(--on-background);
 
   &:focus {
     outline: 0;
@@ -878,7 +878,7 @@ body > [data-popper-placement] {
   }
 
   a {
-    color: $secondary-text-color;
+    color: var(--primary);
     text-decoration: none;
     unicode-bidi: isolate;
 
@@ -898,15 +898,16 @@ body > [data-popper-placement] {
   }
 
   a.unhandled-link {
-    color: $highlight-text-color;
+    color: var(--primary);
   }
 
   .status__content__spoiler-link {
-    background: $action-button-color;
+    background: var(--surface);
+    color: var(--on-surface);
 
     &:hover,
     &:focus {
-      background: lighten($action-button-color, 7%);
+      background: var(--surface-highlighted);
       text-decoration: none;
     }
 
@@ -950,7 +951,7 @@ body > [data-popper-placement] {
   }
 
   a {
-    color: $secondary-text-color;
+    color: var(--primary);
     text-decoration: none;
 
     &:hover {
@@ -968,7 +969,7 @@ body > [data-popper-placement] {
     }
 
     &.unhandled-link {
-      color: $highlight-text-color;
+      color: var(--primary);
     }
   }
 }
@@ -983,7 +984,7 @@ body > [data-popper-placement] {
   align-items: center;
   font-size: 15px;
   line-height: 22px;
-  color: $highlight-text-color;
+  color: var(--primary);
   border: 0;
   background: transparent;
   padding: 0;
@@ -1007,7 +1008,7 @@ body > [data-popper-placement] {
   line-height: 22px;
   display: flex;
   justify-content: space-between;
-  color: $dark-text-color;
+  color: var(--on-background-muted);
 }
 
 .status__content__spoiler-link {
@@ -1026,7 +1027,7 @@ body > [data-popper-placement] {
 }
 
 .status__wrapper--filtered {
-  color: $dark-text-color;
+  color: var(--on-background-muted);
   border: 0;
   font-size: inherit;
   text-align: center;
@@ -1036,11 +1037,11 @@ body > [data-popper-placement] {
   box-sizing: border-box;
   width: 100%;
   clear: both;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid var(--background-outline);
 
   &__button {
     display: inline;
-    color: lighten($ui-highlight-color, 8%);
+    color: var(--primary);
     border: 0;
     background: transparent;
     padding: 0;
@@ -1057,11 +1058,11 @@ body > [data-popper-placement] {
 .focusable {
   &:focus {
     outline: 0;
-    background: lighten($ui-base-color, 4%);
+    background: var(--background-highlighted);
 
     .detailed-status,
     .detailed-status__action-bar {
-      background: lighten($ui-base-color, 8%);
+      background: var(--background-highlighted);
     }
   }
 }
@@ -1069,7 +1070,7 @@ body > [data-popper-placement] {
 .status {
   padding: 16px;
   min-height: 54px;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid var(--background-outline);
   cursor: auto;
 
   @keyframes fade {
@@ -1118,7 +1119,7 @@ body > [data-popper-placement] {
       }
 
       &__spoiler-link {
-        color: $primary-text-color;
+        color: var(--on-background);
         background: $ui-primary-color;
 
         &:hover,
@@ -1153,12 +1154,12 @@ body > [data-popper-placement] {
   }
 
   &--first-in-thread {
-    border-top: 1px solid lighten($ui-base-color, 8%);
+    border-top: 1px solid var(--background-outline);
   }
 
   &__line {
     height: 16px - 4px;
-    border-inline-start: 2px solid lighten($ui-base-color, 8%);
+    border-inline-start: 2px solid var(--background-outline);
     width: 0;
     position: absolute;
     top: 0;
@@ -1175,7 +1176,7 @@ body > [data-popper-placement] {
         top: 16px - 4px;
         height: 46px + 4px + 4px;
         width: 2px;
-        background: $ui-base-color;
+        background: var(--background);
         inset-inline-start: -2px;
       }
     }
@@ -1198,11 +1199,11 @@ body > [data-popper-placement] {
   height: 40px;
   order: 2;
   flex: 0 0 auto;
-  color: $dark-text-color;
+  color: var(--on-background-muted);
 }
 
 .notification__relative_time {
-  color: $dark-text-color;
+  color: var(--on-background-muted);
   float: right;
   font-size: 14px;
   padding-bottom: 1px;
@@ -1219,7 +1220,7 @@ body > [data-popper-placement] {
 }
 
 .status__display-name {
-  color: $dark-text-color;
+  color: var(--on-background-muted);
 }
 
 .status__info .status__display-name {
@@ -1299,10 +1300,10 @@ body > [data-popper-placement] {
   font-size: 15px;
   line-height: 22px;
   font-weight: 500;
-  color: $dark-text-color;
+  color: var(--on-background-muted);
 
   .status__display-name strong {
-    color: $dark-text-color;
+    color: var(--on-background);
   }
 
   > span {
@@ -1313,14 +1314,14 @@ body > [data-popper-placement] {
 }
 
 .status__wrapper-direct {
-  background: mix($ui-base-color, $ui-highlight-color, 95%);
+  //background: mix($ui-base-color, $ui-highlight-color, 95%);
 
   &:focus {
-    background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%);
+    //background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%);
   }
 
   .status__prepend {
-    color: $highlight-text-color;
+    //color: $highlight-text-color;
   }
 }
 
@@ -1332,6 +1333,18 @@ body > [data-popper-placement] {
   margin-top: 16px;
 }
 
+.detailed-status__action-bar,
+.status__action-bar {
+  .icon-button {
+    padding: 4px;
+
+    .icon {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+
 .detailed-status__action-bar-dropdown {
   flex: 1 1 auto;
   display: flex;
@@ -1341,9 +1354,9 @@ body > [data-popper-placement] {
 }
 
 .detailed-status {
-  background: lighten($ui-base-color, 4%);
+  background: var(--background);
   padding: 16px;
-  border-top: 1px solid lighten($ui-base-color, 8%);
+  border-top: 1px solid var(--background-outline);
 
   &--flex {
     display: flex;
@@ -1391,7 +1404,7 @@ body > [data-popper-placement] {
 
 .detailed-status__meta {
   margin-top: 16px;
-  color: $dark-text-color;
+  color: var(--on-background-muted);
   font-size: 14px;
   line-height: 18px;
 
@@ -1404,9 +1417,9 @@ body > [data-popper-placement] {
 }
 
 .detailed-status__action-bar {
-  background: lighten($ui-base-color, 4%);
-  border-top: 1px solid lighten($ui-base-color, 8%);
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  background: var(--background);
+  border-top: 1px solid var(--background-outline);
+  border-bottom: 1px solid var(--background-outline);
   display: flex;
   flex-direction: row;
   padding: 10px 0;
@@ -1415,26 +1428,22 @@ body > [data-popper-placement] {
 .detailed-status__wrapper-direct {
   .detailed-status,
   .detailed-status__action-bar {
-    background: mix($ui-base-color, $ui-highlight-color, 95%);
+    //background: mix($ui-base-color, $ui-highlight-color, 95%);
   }
 
   &:focus {
     .detailed-status,
     .detailed-status__action-bar {
-      background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%);
+      //background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%);
     }
   }
 
   .detailed-status__action-bar {
-    border-top-color: mix(
-      lighten($ui-base-color, 8%),
-      $ui-highlight-color,
-      95%
-    );
+    //border-top-color: mix(var(--Neutral-90), $ui-highlight-color, 95%);
   }
 
   .status__prepend {
-    color: $highlight-text-color;
+    //color: $highlight-text-color;
   }
 }
 
@@ -1470,12 +1479,12 @@ body > [data-popper-placement] {
 
 .domain {
   padding: 10px;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid var(--background-outline);
 
   .domain__domain-name {
     flex: 1 1 auto;
     display: block;
-    color: $primary-text-color;
+    color: var(--on-background);
     text-decoration: none;
     font-size: 14px;
     font-weight: 500;
@@ -1494,14 +1503,14 @@ body > [data-popper-placement] {
 
 .account {
   padding: 16px;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid var(--background-outline);
 
   .account__display-name {
     flex: 1 1 auto;
     display: flex;
     align-items: center;
     gap: 10px;
-    color: $darker-text-color;
+    color: var(--on-background-muted);
     overflow: hidden;
     text-decoration: none;
     font-size: 14px;
@@ -1536,10 +1545,10 @@ body > [data-popper-placement] {
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
     margin-top: 10px;
-    color: $darker-text-color;
+    color: var(--on-background-muted);
 
     &--missing {
-      color: $dark-text-color;
+      color: var(--on-background-muted);
     }
 
     p {
@@ -1610,7 +1619,7 @@ body > [data-popper-placement] {
       top: 50%;
       inset-inline-start: 50%;
       transform: translate(-50%, -50%);
-      color: $primary-text-color;
+      color: var(--on-background);
       text-shadow: 1px 1px 2px $base-shadow-color;
       font-weight: 700;
       font-size: 15px;
@@ -1667,7 +1676,7 @@ a .account__avatar {
 .status__display-name,
 .account__display-name {
   .display-name strong {
-    color: $primary-text-color;
+    color: var(--on-background);
   }
 }
 
@@ -1698,7 +1707,7 @@ a.account__display-name {
 }
 
 .detailed-status__display-name {
-  color: $darker-text-color;
+  color: var(--on-background-muted);
   display: flex;
   align-items: center;
   gap: 10px;
@@ -1715,7 +1724,7 @@ a.account__display-name {
   }
 
   strong {
-    color: $primary-text-color;
+    color: var(--on-background);
   }
 }
 
@@ -1727,33 +1736,21 @@ a.account__display-name {
 .muted {
   .status__content,
   .status__content p,
-  .status__content a {
-    color: $dark-text-color;
-  }
-
+  .status__content a,
+  .status__display-name,
   .status__display-name strong {
-    color: $dark-text-color;
-  }
-
-  .status__avatar {
-    opacity: 0.5;
+    color: var(--on-background-muted);
   }
 
+  .status__avatar,
   a.status__content__spoiler-link {
-    background: $ui-base-lighter-color;
-    color: $inverted-text-color;
-
-    &:hover,
-    &:focus {
-      background: lighten($ui-base-lighter-color, 7%);
-      text-decoration: none;
-    }
+    opacity: 0.5;
   }
 }
 
 .notification__report {
   padding: 16px;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid var(--background-outline);
   display: flex;
   gap: 10px;
 
@@ -1766,7 +1763,7 @@ a.account__display-name {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    color: $darker-text-color;
+    color: var(--on-background-muted);
     gap: 10px;
     font-size: 15px;
     line-height: 22px;
@@ -1792,7 +1789,7 @@ a.account__display-name {
   padding: 16px;
   padding-bottom: 0;
   cursor: default;
-  color: $darker-text-color;
+  color: var(--on-background-muted);
   font-size: 15px;
   line-height: 22px;
   font-weight: 500;
@@ -1807,7 +1804,7 @@ a.account__display-name {
   }
 
   .icon-star {
-    color: $gold-star;
+    color: var(--favourite);
   }
 
   > span {
@@ -1818,11 +1815,11 @@ a.account__display-name {
 }
 
 .icon-button.star-icon.active {
-  color: $gold-star;
+  color: var(--favourite);
 }
 
 .icon-button.bookmark-icon.active {
-  color: $red-bookmark;
+  color: var(--bookmark);
 }
 
 .no-reduce-motion .icon-button.star-icon {
@@ -1942,10 +1939,10 @@ a.account__display-name {
   flex-shrink: 0;
   cursor: default;
   gap: 10px;
-  color: $darker-text-color;
+  color: var(--on-background-muted);
 
   strong {
-    color: $secondary-text-color;
+    color: var(--on-background);
   }
 
   a {
@@ -2026,7 +2023,7 @@ a.account__display-name {
   background: var(--dropdown-background-color);
   border: 1px solid var(--dropdown-border-color);
   padding: 4px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   box-shadow: var(--dropdown-shadow);
   z-index: 9999;
 
@@ -2104,7 +2101,7 @@ a.account__display-name {
   display: block;
 
   &--dangerous {
-    color: $error-value-color;
+    color: var(--dangerous);
   }
 
   a,
@@ -2123,7 +2120,7 @@ a.account__display-name {
     text-overflow: ellipsis;
     white-space: nowrap;
     text-align: inherit;
-    border-radius: 4px;
+    border-radius: var(--radius-sm);
 
     &:focus,
     &:hover,
@@ -2262,7 +2259,7 @@ $ui-header-height: 55px;
 }
 
 .tabs-bar__wrapper {
-  background: darken($ui-base-color, 8%);
+  background: var(--background);
   position: sticky;
   top: $ui-header-height;
   z-index: 2;
@@ -2298,8 +2295,10 @@ $ui-header-height: 55px;
   flex-direction: column;
 
   > .scrollable {
-    background: $ui-base-color;
-    border-radius: 0 0 4px 4px;
+    background: var(--background);
+    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
+    border: 1px solid var(--background-outline);
+    border-top: 0;
   }
 }
 
@@ -2323,7 +2322,7 @@ $ui-header-height: 55px;
   display: flex;
   flex: 1 1 auto;
   padding: 13px 3px 11px;
-  color: $darker-text-color;
+  color: var(--on-background-muted);
   text-decoration: none;
   text-align: center;
   font-size: 16px;
@@ -2457,8 +2456,8 @@ $ui-header-height: 55px;
 
     .navigation-panel {
       margin: 0;
-      background: $ui-base-color;
-      border-inline-start: 1px solid lighten($ui-base-color, 8%);
+      background: var(--background);
+      border-inline-start: 1px solid var(--background-outline);
       height: 100vh;
     }
 
@@ -2476,8 +2475,8 @@ $ui-header-height: 55px;
 
   .layout-single-column .ui__header {
     display: flex;
-    background: $ui-base-color;
-    border-bottom: 1px solid lighten($ui-base-color, 8%);
+    background: var(--background);
+    border-bottom: 1px solid var(--background-outline);
   }
 
   .column-header,
@@ -2534,14 +2533,14 @@ $ui-header-height: 55px;
     position: absolute;
     inset-inline-start: 9px;
     top: -13px;
-    background: $ui-highlight-color;
-    border: 2px solid lighten($ui-base-color, 8%);
+    background: var(--primary);
+    border: 2px solid var(--surface);
     padding: 1px 6px;
     border-radius: 6px;
     font-size: 10px;
     font-weight: 500;
     line-height: 14px;
-    color: $primary-text-color;
+    color: var(--on-primary);
   }
 
   &__issue-badge {
@@ -2549,7 +2548,7 @@ $ui-header-height: 55px;
     inset-inline-start: 11px;
     bottom: 1px;
     display: block;
-    background: $error-red;
+    background: var(--dangerous);
     border-radius: 50%;
     width: 0.625rem;
     height: 0.625rem;
@@ -2557,7 +2556,7 @@ $ui-header-height: 55px;
 }
 
 .column-link--transparent .icon-with-badge__badge {
-  border-color: darken($ui-base-color, 8%);
+  border-color: var(--background);
 }
 
 .column-title {
@@ -2575,7 +2574,7 @@ $ui-header-height: 55px;
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
-    color: $darker-text-color;
+    color: var(--on-background-muted);
   }
 
   @media screen and (width >= 600px) {
@@ -2585,7 +2584,7 @@ $ui-header-height: 55px;
 
 .onboarding__footer {
   margin-top: 30px;
-  color: $dark-text-color;
+  color: var(--on-background-muted);
   text-align: center;
   font-size: 14px;
 
@@ -2601,8 +2600,8 @@ $ui-header-height: 55px;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
-  color: $highlight-text-color;
-  background: lighten($ui-base-color, 4%);
+  color: var(--on-surface);
+  background: var(--surface);
   border-radius: 8px;
   padding: 10px 15px;
   box-sizing: border-box;
@@ -2618,7 +2617,7 @@ $ui-header-height: 55px;
   &:hover,
   &:focus,
   &:active {
-    background: lighten($ui-base-color, 8%);
+    background: var(--surface-highlighted);
   }
 }
 
@@ -2634,13 +2633,13 @@ $ui-header-height: 55px;
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;
-  color: $darker-text-color;
+  color: var(--on-background-muted);
   text-align: center;
   margin-bottom: 30px;
 
   strong {
     font-weight: 700;
-    color: $secondary-text-color;
+    color: var(--on-background);
   }
 }
 
@@ -2660,7 +2659,8 @@ $ui-header-height: 55px;
   margin-bottom: 30px;
 
   &__item {
-    background: lighten($ui-base-color, 4%);
+    background: var(--surface);
+    color: var(--on-surface);
     border: 0;
     border-radius: 8px;
     display: flex;
@@ -2677,7 +2677,7 @@ $ui-header-height: 55px;
     &:hover,
     &:focus,
     &:active {
-      background: lighten($ui-base-color, 8%);
+      background: var(--surface-highlighted);
     }
 
     &__icon {
@@ -2688,7 +2688,7 @@ $ui-header-height: 55px;
       justify-content: center;
       width: 36px;
       height: 36px;
-      color: $highlight-text-color;
+      color: var(--primary);
       font-size: 1.2rem;
 
       @media screen and (width >= 600px) {
@@ -2705,7 +2705,7 @@ $ui-header-height: 55px;
       justify-content: center;
       width: 21px;
       height: 21px;
-      color: $primary-text-color;
+      color: var(--on-background);
 
       svg {
         height: 14px;
@@ -2720,7 +2720,7 @@ $ui-header-height: 55px;
       justify-content: center;
       width: 21px;
       height: 21px;
-      color: $highlight-text-color;
+      color: var(--primary);
       font-size: 17px;
 
       svg {
@@ -2734,13 +2734,13 @@ $ui-header-height: 55px;
       line-height: 20px;
 
       h6 {
-        color: $highlight-text-color;
+        color: var(--primary);
         font-weight: 500;
         font-size: 14px;
       }
 
       p {
-        color: $darker-text-color;
+        color: var(--on-surface);
         overflow: hidden;
       }
     }
@@ -2748,7 +2748,7 @@ $ui-header-height: 55px;
 }
 </