Update web theme tokens with latest design system tokens (#38387)

2026-03-29 03:00:33 +02:00 · 2026-03-25 15:34:38 +01:00
parent c9eefd0ae7
commit 37236acd3b
22 changed files with 295 additions and 380 deletions
--- a/app/javascript/mastodon/components/callout/styles.module.css
+++ b/app/javascript/mastodon/components/callout/styles.module.css
@@ -3,7 +3,7 @@
  align-items: start;
  padding: 12px;
  gap: 8px;
-  background-color: var(--color-bg-brand-softer);
+  background-color: var(--color-bg-brand-softest);
  color: var(--color-text-primary);
  border-radius: 12px;
 }
@@ -86,11 +86,11 @@
 }

 .variantSubtle {
-  border: 1px solid var(--color-bg-brand-softer);
+  border: 1px solid var(--color-bg-brand-softest);
  background-color: var(--color-bg-primary);

  .icon {
-    background-color: var(--color-bg-brand-softer);
+    background-color: var(--color-bg-brand-softest);
  }
 }

@@ -105,11 +105,11 @@

 .variantInverted {
  background-color: var(--color-bg-inverted);
-  color: var(--color-text-on-inverted);
+  color: var(--color-text-inverted);
 }

 .variantSuccess {
-  background-color: var(--color-bg-success-softer);
+  background-color: var(--color-bg-success-softest);

  .icon {
    background-color: var(--color-bg-success-soft);
@@ -117,7 +117,7 @@
 }

 .variantWarning {
-  background-color: var(--color-bg-warning-softer);
+  background-color: var(--color-bg-warning-softest);

  .icon {
    background-color: var(--color-bg-warning-soft);
@@ -125,7 +125,7 @@
 }

 .variantError {
-  background-color: var(--color-bg-error-softer);
+  background-color: var(--color-bg-error-softest);

  .icon {
    background-color: var(--color-bg-error-soft);
--- a/app/javascript/mastodon/components/form_fields/select.module.scss
+++ b/app/javascript/mastodon/components/form_fields/select.module.scss
@@ -61,6 +61,6 @@
  }

  [data-has-error='true'] & {
-    border-color: var(--color-text-error);
+    border-color: var(--color-border-error);
  }
 }
--- a/app/javascript/mastodon/components/form_fields/text_input.module.scss
+++ b/app/javascript/mastodon/components/form_fields/text_input.module.scss
@@ -32,11 +32,11 @@
  &:focus:user-invalid,
  &:required:user-invalid,
  [data-has-error='true'] & {
-    outline-color: var(--color-text-error);
+    outline-color: var(--color-border-error);
  }

  &:focus {
-    outline-color: var(--color-text-brand);
+    outline-color: var(--color-border-brand);
  }

  &:required:user-valid {
--- a/app/javascript/mastodon/components/tags/style.module.css
+++ b/app/javascript/mastodon/components/tags/style.module.css
@@ -22,8 +22,8 @@ button.tag:focus-visible {
 }

 .active {
-  border-color: var(--color-text-brand);
-  background: var(--color-bg-brand-softer);
+  border-color: var(--color-border-brand);
+  background: var(--color-bg-brand-softest);
  color: var(--color-text-brand);
 }

--- a/app/javascript/mastodon/features/account_edit/modals/styles.module.scss
+++ b/app/javascript/mastodon/features/account_edit/modals/styles.module.scss
@@ -58,7 +58,7 @@
  transition: background 0.2s ease-in-out;

  &:hover {
-    background: var(--color-bg-brand-softer);
+    background: var(--color-bg-brand-softest);
  }

  &:focus-visible {
--- a/app/javascript/mastodon/features/account_edit/styles.module.scss
+++ b/app/javascript/mastodon/features/account_edit/styles.module.scss
@@ -160,7 +160,7 @@
    &:active,
    &:focus,
    &:hover {
-      background-color: var(--color-bg-brand-softer);
+      background-color: var(--color-bg-brand-softest);
    }

    &:disabled {
@@ -177,7 +177,7 @@

 .deleteButton {
  --default-icon-color: var(--color-text-error);
-  --hover-bg-color: var(--color-bg-error-base-hover);
+  --hover-bg-color: var(--color-bg-error-base);
  --hover-icon-color: var(--color-text-on-error-base);
 }

@@ -201,7 +201,7 @@
  &,
  &:global(.active) {
    // Overrides the transparent background added by default with .active
-    --hover-bg-color: var(--color-bg-brand-softer-solid);
+    --hover-bg-color: var(--color-bg-brand-softest);
  }

  position: absolute;
--- a/app/javascript/mastodon/features/account_timeline/components/redesign.module.scss
+++ b/app/javascript/mastodon/features/account_timeline/components/redesign.module.scss
@@ -93,7 +93,7 @@
  }

  svg {
-    background: var(--color-bg-brand-softer);
+    background: var(--color-bg-brand-softest);
    width: 28px;
    height: 28px;
    padding: 5px;
@@ -184,7 +184,7 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;

 .badgeMuted {
  background-color: var(--color-bg-inverted);
-  color: var(--color-text-on-inverted);
+  color: var(--color-text-inverted);
 }

 .badgeBlocked {
@@ -270,7 +270,7 @@ svg.badgeIcon {
 }

 .fieldVerified {
-  background-color: var(--color-bg-success-softer);
+  background-color: var(--color-bg-success-softest);

  dt {
    padding-right: 24px;
@@ -292,8 +292,8 @@ svg.badgeIcon {
 }

 .fieldOverflowButton {
-  --default-bg-color: var(--color-bg-secondary-solid);
-  --hover-bg-color: var(--color-bg-brand-softer-solid);
+  --default-bg-color: var(--color-bg-secondary);
+  --hover-bg-color: var(--color-bg-brand-softest);

  position: absolute;
  right: 8px;
@@ -413,7 +413,7 @@ svg.badgeIcon {

  :global(.active) {
    color: var(--color-text-brand);
-    border-bottom: 4px solid var(--color-text-brand);
+    border-bottom: 4px solid var(--color-border-brand);
    padding-bottom: 14px;
  }
 }
--- a/app/javascript/mastodon/features/ui/components/skip_links/skip_links.module.scss
+++ b/app/javascript/mastodon/features/ui/components/skip_links/skip_links.module.scss
@@ -33,7 +33,7 @@

  &:focus-within {
    outline: var(--outline-focus-default);
-    background: var(--color-bg-brand-softer);
+    background: var(--color-bg-brand-softest);
  }

  :any-link {
--- a/app/javascript/styles/mastodon/_mixins.scss
+++ b/app/javascript/styles/mastodon/_mixins.scss
@@ -7,7 +7,7 @@
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border-radius: 4px;
-  border: 1px solid var(--color-border-on-bg-secondary);
+  border: 1px solid var(--color-border-primary);
  font-size: 17px;
  line-height: normal;
  margin: 0;
--- a/app/javascript/styles/mastodon/accounts.scss
+++ b/app/javascript/styles/mastodon/accounts.scss
@@ -13,7 +13,7 @@
    &:active,
    &:focus {
      .card__bar {
-        background: var(--color-bg-brand-softer);
+        background: var(--color-bg-brand-softest);
      }
    }
  }
@@ -220,8 +220,8 @@
 .information-badge {
  &.superapp {
    color: var(--color-text-success);
-    background-color: var(--color-bg-success-softer);
-    border-color: var(--color-border-on-bg-success-softer);
+    background-color: var(--color-bg-success-softest);
+    border-color: var(--color-border-success-soft);
  }
 }

@@ -229,7 +229,7 @@
  display: inline-flex;
  padding: 4px;
  padding-inline-end: 8px;
-  border: 1px solid var(--color-text-brand);
+  border: 1px solid var(--color-border-brand);
  color: var(--color-text-brand);
  font-weight: 500;
  font-size: 12px;
@@ -255,8 +255,8 @@

 .simple_form .not_recommended {
  color: var(--color-text-error);
-  background-color: var(--color-bg-error-softer);
-  border-color: var(--color-border-on-bg-error-softer);
+  background-color: var(--color-bg-error-softest);
+  border-color: var(--color-border-error-soft);
 }

 .account__header__fields {
@@ -310,8 +310,8 @@
  }

  .verified {
-    border: 1px solid var(--color-border-on-bg-success-softer);
-    background: var(--color-bg-success-softer);
+    border: 1px solid var(--color-border-success-soft);
+    background: var(--color-bg-success-softest);

    a {
      color: var(--color-text-success);
--- a/app/javascript/styles/mastodon/admin.scss
+++ b/app/javascript/styles/mastodon/admin.scss
@@ -68,7 +68,7 @@ $content-width: 840px;
        border-radius: 4px;

        &:focus {
-          background: var(--color-bg-brand-softer);
+          background: var(--color-bg-brand-softest);
        }

        .material-close {
@@ -438,7 +438,7 @@ $content-width: 840px;
      }

      ul .simple-navigation-active-leaf a {
-        border-bottom-color: var(--color-text-brand);
+        border-bottom-color: var(--color-border-brand);
      }
    }
  }
@@ -499,7 +499,7 @@ body,

 kbd {
  font-family: Courier, monospace;
-  background-color: var(--color-bg-brand-softer);
+  background-color: var(--color-bg-brand-softest);
  padding: 4px;
  padding-bottom: 2px;
  border-radius: 5px;
@@ -566,7 +566,7 @@ kbd {

      &.selected {
        color: var(--color-text-brand);
-        border-bottom: 2px solid var(--color-text-brand);
+        border-bottom: 2px solid var(--color-border-brand);
      }
    }
  }
@@ -829,14 +829,14 @@ a.name-tag,

 .speech-bubble {
  margin-bottom: 20px;
-  border-inline-start: 4px solid var(--color-text-brand);
+  border-inline-start: 4px solid var(--color-border-brand);

  &.positive {
    border-color: var(--color-text-success);
  }

  &.negative {
-    border-color: var(--color-text-error);
+    border-color: var(--color-border-error);
  }

  &.warning {
@@ -1298,7 +1298,7 @@ a.sparkline {
  &:hover,
  &:focus,
  &:active {
-    background: var(--color-bg-brand-softer);
+    background: var(--color-bg-brand-softest);
  }
 }

@@ -1922,7 +1922,7 @@ a.sparkline {
      width: calc(1.375rem + 1px);
      height: calc(1.375rem + 1px);
      background: var(--color-bg-primary);
-      border: 1px solid var(--color-text-brand);
+      border: 1px solid var(--color-border-brand);
      color: var(--color-text-brand);
      border-radius: 8px;
    }
@@ -2006,8 +2006,8 @@ a.sparkline {
      display: block;
      box-sizing: border-box;
      color: var(--color-text-primary);
-      background: var(--color-bg-brand-softer);
-      border: 1px solid var(--color-border-on-bg-brand-softer);
+      background: var(--color-bg-brand-softest);
+      border: 1px solid var(--color-border-brand-soft);
      border-radius: 8px;
      padding: 8px 13px;
      position: relative;
--- a/app/javascript/styles/mastodon/basics.scss
+++ b/app/javascript/styles/mastodon/basics.scss
@@ -2,13 +2,13 @@

 html {
  color: var(--color-text-primary);
-  background: var(--color-bg-ambient);
+  background: var(--color-bg-primary);

  &.custom-scrollbars {
    scrollbar-color: var(--color-text-secondary) var(--color-bg-secondary);
  }

-  --outline-focus-default: 2px solid var(--color-text-brand);
+  --outline-focus-default: 2px solid var(--color-border-brand);
  --avatar-border-radius: 8px;
  --max-media-height-small: 460px;
  --max-media-height-large: 566px;
@@ -46,7 +46,7 @@ html.has-modal {

 body {
  font-family: $font-sans-serif, sans-serif;
-  background: var(--color-bg-ambient);
+  background: var(--color-bg-primary);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -114,7 +114,7 @@
  }

  &:focus-visible {
-    outline: 2px solid var(--color-bg-brand-base);
+    outline: var(--outline-focus-default);
    outline-offset: 2px;
  }

@@ -169,12 +169,12 @@
    color: var(--color-text-brand);
    background: transparent;
    padding: 6px 17px;
-    border: 1px solid var(--color-text-brand);
+    border: 1px solid var(--color-border-brand);

    &:active,
    &:focus,
    &:hover {
-      border-color: var(--color-text-brand);
+      border-color: var(--color-border-brand);
      color: var(--color-text-brand);
      background-color: transparent;
      text-decoration: none;
@@ -184,7 +184,7 @@
      &:active,
      &:focus,
      &:hover {
-        border-color: var(--color-text-error);
+        border-color: var(--color-border-error);
        color: var(--color-text-error);
      }
    }
@@ -284,8 +284,8 @@
  --default-icon-color: var(--color-text-secondary);
  --default-bg-color: transparent;
  --hover-icon-color: var(--color-text-primary);
-  --hover-bg-color: var(--color-bg-brand-softer);
-  --focus-outline-color: var(--color-text-brand);
+  --hover-bg-color: var(--color-bg-brand-softest);
+  --focus-outline-color: var(--color-border-brand);

  display: inline-flex;
  color: var(--default-icon-color);
@@ -364,8 +364,8 @@
  &.copied {
    color: var(--color-text-success);
    transition: none;
-    background-color: var(--color-bg-success-softer);
-    border-color: var(--color-border-on-bg-brand-softer);
+    background-color: var(--color-bg-success-softest);
+    border-color: var(--color-border-success-soft);
  }
 }

@@ -537,21 +537,21 @@ body > [data-popper-placement] {
    flex-direction: column;
    flex: 0 1 auto;
    border-radius: 4px;
-    border: 1px solid var(--color-border-on-bg-secondary);
+    border: 1px solid var(--color-border-primary);
    transition: border-color 300ms linear;
    position: relative;
    background: var(--color-bg-secondary);

    &.active {
      transition: none;
-      border-color: var(--color-text-brand);
+      border-color: var(--color-border-brand);
    }
  }

  &__warning {
    color: var(--color-text-primary);
-    background: var(--color-bg-warning-softer);
-    border: 1px solid var(--color-border-on-bg-warning-softer);
+    background: var(--color-bg-warning-softest);
+    border: 1px solid var(--color-border-warning-soft);
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 13px;
@@ -619,7 +619,7 @@ body > [data-popper-placement] {

  .spoiler-input__input {
    padding: 12px 12px - 5px;
-    background: var(--color-bg-brand-softer);
+    background: var(--color-bg-brand-softest);
    color: var(--color-text-brand);
  }

@@ -885,7 +885,7 @@ body > [data-popper-placement] {
        line-height: 20px;
        letter-spacing: 0.1px;
        color: var(--color-text-brand);
-        background-color: var(--color-bg-secondary-solid);
+        background-color: var(--color-bg-secondary);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
@@ -917,7 +917,7 @@ body > [data-popper-placement] {
  gap: 4px;
  color: var(--color-text-brand);
  background: transparent;
-  border: 1px solid var(--color-text-brand);
+  border: 1px solid var(--color-border-brand);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
@@ -1464,9 +1464,9 @@ body > [data-popper-placement] {

 .focusable {
  &:focus-visible {
-    outline: 2px solid var(--color-text-brand);
+    outline: 2px solid var(--color-border-brand);
    outline-offset: -2px;
-    background: var(--color-bg-brand-softer);
+    background: var(--color-bg-brand-softest);
  }
 }

@@ -1587,7 +1587,7 @@ body > [data-popper-placement] {
    content: '';
    position: absolute;
    inset: 0;
-    background: var(--color-bg-brand-softer);
+    background: var(--color-bg-brand-softest);
    opacity: 0;
    animation: fade 0.7s reverse both 0.3s;
    pointer-events: none;
@@ -1739,7 +1739,7 @@ body > [data-popper-placement] {
 .notification-ungrouped--direct,
 .notification-group--direct,
 .notification-group--annual-report {
-  background: var(--color-bg-brand-softer);
+  background: var(--color-bg-brand-softest);

  &:focus {
    background: var(--color-bg-brand-soft);
@@ -1877,7 +1877,7 @@ body > [data-popper-placement] {
 .detailed-status__wrapper-direct {
  .detailed-status,
  .detailed-status__action-bar {
-    background: var(--color-bg-brand-softer);
+    background: var(--color-bg-brand-softest);
  }

  .status__prepend {
@@ -1932,7 +1932,7 @@ body > [data-popper-placement] {
  line-height: 20px;
  letter-spacing: 0.25px;
  color: var(--color-text-secondary);
-  background: var(--color-bg-brand-softer);
+  background: var(--color-bg-brand-softest);
  border-radius: 8px;
  cursor: default;
 }
@@ -2060,7 +2060,7 @@ body > [data-popper-placement] {

  &__domain-pill {
    display: inline-flex;
-    background: var(--color-bg-brand-softer);
+    background: var(--color-bg-brand-softest);
    border-radius: 4px;
    border: 0;
    color: var(--color-text-brand);
@@ -2121,7 +2121,7 @@ body > [data-popper-placement] {

      &__handle {
        border: 2px dashed var(--color-border-on-brand-softer);
-        background: var(--color-bg-brand-softer);
+        background: var(--color-bg-brand-softest);
        padding: 12px 8px;
        color: var(--color-text-brand);
        border-radius: 4px;
@@ -2903,11 +2903,15 @@ a.account__display-name {
    &:focus,
    &:hover,
    &:active {
-      &:not(:disabled, [aria-disabled='true']) {
-        background: var(--color-bg-secondary);
+      &:where(:not(:disabled, [aria-disabled='true'])) {
+        background: var(--color-bg-brand-softest);
        outline: 0;
      }
    }
+
+    &:focus-visible {
+      outline: var(--outline-focus-default);
+    }
  }

  button:disabled,
@@ -3072,7 +3076,7 @@ a.account__display-name {
    }

    &:focus-visible {
-      border-top-color: var(--color-text-brand);
+      border-top-color: var(--color-border-brand);
      border-radius: 0;
    }
  }
@@ -3087,7 +3091,7 @@ a.account__display-name {
  border-top: 0;

  @media screen and (min-width: $no-gap-breakpoint) {
-    border-top: 10px solid var(--color-bg-ambient);
+    border-top: 10px solid var(--color-bg-primary);
  }
 }

@@ -3586,7 +3590,7 @@ a.account__display-name {
  &.focused {
    transition: none;
    outline: 0;
-    border-color: var(--color-text-brand);
+    border-color: var(--color-border-brand);
  }

  &.copied {
@@ -3986,25 +3990,14 @@ a.account__display-name {
  height: 20px;
  padding: 0;
  border-radius: 10px;
-  background-color: rgb(from var(--color-bg-brand-softer) r g b / 50%);
-  border: 1px solid rgb(from var(--color-text-brand) r g b / 50%);
+  background-color: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border-primary);
  box-sizing: border-box;

-  .react-toggle:hover:not(.react-toggle--disabled) & {
-    background-color: rgb(
-      from var(--color-bg-brand-softer) r g b /
-        calc(50% + var(--overlay-strength-brand))
-    );
-  }
-
  .react-toggle--checked & {
    background-color: var(--color-bg-brand-base);
    border-color: var(--color-bg-brand-base);
  }
-
-  .react-toggle--checked:not(.react-toggle--disabled):hover & {
-    background-color: var(--color-bg-brand-base-hover);
-  }
 }

 .react-toggle-track-check,
@@ -4020,6 +4013,7 @@ a.account__display-name {
  height: 16px;
  border-radius: 50%;
  background-color: var(--color-text-on-brand-base);
+  box-shadow: 0 2px 4px 0 color-mix(var(--color-black), transparent 75%);
  box-sizing: border-box;
  transition: all 0.25s ease;
  transition-property: border-color, left;
@@ -4081,8 +4075,8 @@ a.account__display-name {

  &:focus-visible {
    outline: none;
-    border-color: var(--color-text-brand);
-    background: var(--color-bg-brand-softer);
+    border-color: var(--color-border-brand);
+    background: var(--color-bg-brand-softest);
  }

  &--logo {
@@ -4457,7 +4451,7 @@ a.status-card {
    }

    &:focus-visible {
-      outline: 2px solid var(--color-text-brand);
+      outline: var(--outline-focus-default);
      outline-offset: -2px;
    }
  }
@@ -4545,7 +4539,7 @@ a.status-card {
  z-index: 1;

  &.active {
-    box-shadow: 0 1px 0 var(--color-bg-brand-softer);
+    box-shadow: 0 1px 0 var(--color-bg-brand-softest);

    &::before {
      display: block;
@@ -4655,7 +4649,7 @@ a.status-card {
  &.active {
    .column-header__icon {
      color: var(--color-text-brand);
-      text-shadow: 0 0 10px var(--color-bg-brand-softer);
+      text-shadow: 0 0 10px var(--color-bg-brand-softest);
    }
  }

@@ -5150,7 +5144,7 @@ a.status-card {
        &:hover,
        &:active,
        &:focus {
-          background: var(--color-bg-brand-softer);
+          background: var(--color-bg-brand-softest);
          color: color-mix(
            in oklab,
            var(--color-text-primary),
@@ -5752,7 +5746,7 @@ a.status-card {
 .visibility-modal {
  &__quote-warning {
    color: var(--color-text-primary);
-    background: var(--color-bg-warning-softer);
+    background: var(--color-bg-warning-softest);
    padding: 16px;
    border-radius: 4px;

@@ -5787,7 +5781,7 @@ a.status-card {
    display: flex;
    align-items: center;
    color: var(--color-text-primary);
-    background: var(--color-bg-secondary-solid);
+    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    padding: 8px 12px;
    width: 100%;
@@ -5848,7 +5842,8 @@ a.status-card {

    .icon-button {
      padding: 0;
-      color: var(--color-text-secondary);
+
+      --default-icon-color: inherit;
    }

    .icon {
@@ -5901,7 +5896,10 @@ a.status-card {
          background: var(--color-bg-brand-base);

          .icon-button {
-            color: inherit;
+            --default-icon-color: inherit;
+            --default-bg-color: transparent;
+            --hover-icon-color: inherit;
+            --hover-bg-color: var(--color-bg-brand-base-hover);
          }
        }

@@ -6000,7 +5998,7 @@ a.status-card {
  }

  &:focus-visible {
-    box-shadow: 0 0 0 2px var(--color-text-brand);
+    box-shadow: 0 0 0 2px var(--color-border-brand);
  }

  &[aria-hidden='true'] {
@@ -6254,9 +6252,7 @@ a.status-card {
      --default-icon-color: var(--color-text-on-media);
      --default-bg-color: transparent;
      --hover-icon-color: var(--color-text-on-media);
-      --hover-bg-color: rgb(
-        from var(--color-text-on-media) r g b / var(--overlay-strength-brand)
-      );
+      --hover-bg-color: rgb(from var(--color-text-on-media) r g b / 10%);

      .icon {
        filter: var(--overlay-icon-shadow);
@@ -6272,8 +6268,7 @@ a.status-card {
        --default-icon-color: var(--color-text-favourite-highlight);
        --hover-icon-color: var(--color-text-favourite-highlight);
        --hover-bg-color: rgb(
-          from var(--color-text-favourite-highlight) r g b /
-            var(--overlay-strength-brand)
+          from var(--color-text-favourite-highlight) r g b / 10%
        );
      }

@@ -6918,7 +6913,7 @@ a.status-card {
  }

  .button.button-secondary {
-    border-color: var(--color-text-error);
+    border-color: var(--color-border-error);
    color: var(--color-text-error);
    flex: 0 0 auto;

@@ -6986,7 +6981,7 @@ a.status-card {
    &:hover,
    &:active,
    &:focus {
-      background: var(--color-bg-brand-softer);
+      background: var(--color-bg-brand-softest);
    }
  }
 }
@@ -7431,7 +7426,7 @@ a.status-card {
    inset: 2px;
    z-index: 1;
    border-radius: inherit;
-    border: 2px solid var(--color-text-on-inverted);
+    border: 2px solid var(--color-text-inverted);
    outline: 2px solid var(--color-bg-inverted);
    pointer-events: none;
  }
@@ -8150,7 +8145,7 @@ a.status-card {

    &.checked,
    &.indeterminate {
-      border-color: var(--color-text-brand);
+      border-color: var(--color-border-brand);
    }

    .icon {
@@ -8691,7 +8686,7 @@ noscript {
      }

      &:focus {
-        background: var(--color-bg-brand-softer);
+        background: var(--color-bg-brand-softest);
      }
    }
  }
@@ -8953,7 +8948,7 @@ noscript {
  }

  &__root {
-    background: var(--color-bg-brand-softer);
+    background: var(--color-bg-brand-softest);
    font-size: 13px;
    display: flex;
    align-items: flex-end;
@@ -9037,13 +9032,13 @@ noscript {

  &__item {
    flex-shrink: 0;
-    background: var(--color-bg-brand-softer);
+    background: var(--color-bg-brand-softest);
    color: color-mix(
      in oklab,
      var(--color-text-primary),
      var(--color-text-secondary)
    );
-    border: 1px solid var(--color-border-on-bg-brand-softer);
+    border: 1px solid var(--color-border-brand-soft);
    border-radius: 3px;
    box-sizing: border-box;
    margin: 2px;
@@ -9092,8 +9087,8 @@ noscript {

    &.active {
      color: var(--color-text-brand);
-      background-color: var(--color-bg-brand-softer);
-      border-color: var(--color-text-brand);
+      background-color: var(--color-bg-brand-softest);
+      border-color: var(--color-border-brand);
      transition: all 100ms ease-in;
      transition-property: background-color, color;
    }
@@ -9156,7 +9151,7 @@ noscript {
      inset-inline-start: 0;
      width: 100%;
      height: 100%;
-      border-inline-start: 4px solid var(--color-text-brand);
+      border-inline-start: 4px solid var(--color-border-brand);
      pointer-events: none;
    }
  }
@@ -9679,7 +9674,7 @@ noscript {
    }

    &.invalid &__input {
-      border-color: var(--color-text-error);
+      border-color: var(--color-border-error);
    }

    &.expanded .search__popout {
@@ -9950,8 +9945,8 @@ noscript {
  margin: 10px;
  margin-bottom: 5px;
  border-radius: 8px;
-  border: 1px solid var(--color-border-on-bg-brand-softer);
-  background: var(--color-bg-brand-softer);
+  border: 1px solid var(--color-border-brand-soft);
+  background: var(--color-bg-brand-softest);
  overflow: hidden;
  flex-shrink: 0;

@@ -10017,8 +10012,8 @@ noscript {
 }

 .warning-banner {
-  border: 1px solid var(--color-border-on-bg-error-softer);
-  background: var(--color-bg-error-softer);
+  border: 1px solid var(--color-border-error-soft);
+  background: var(--color-bg-error-softest);

  &__message {
    h1 {
@@ -10354,7 +10349,7 @@ noscript {
  width: auto;
  padding: 15px;
  margin: 0;
-  color: var(--color-text-on-inverted);
+  color: var(--color-text-inverted);
  background: var(--color-bg-inverted);
  backdrop-filter: blur(8px);
  border-radius: 8px;
@@ -10408,7 +10403,7 @@ noscript {
  &:hover,
  &:focus,
  &:active {
-    background: var(--color-bg-brand-softer);
+    background: var(--color-bg-brand-softest);
  }
 }

@@ -10510,13 +10505,16 @@ noscript {
    color: inherit;
    text-decoration: none;
    padding: 4px 12px;
-    background: var(--color-bg-brand-softer);
+    background: var(--color-bg-brand-softest);
    border-radius: 4px;
    font-weight: 500;

    &:hover,
    &:focus,
-    &:active {
+    &:active,
+    .focusable:focus-visible &,
+    .detailed-status__wrapper-direct .detailed-status &,
+    .status__wrapper-direct & {
      background: var(--color-bg-brand-soft);
    }
  }
@@ -10536,10 +10534,10 @@ noscript {
  padding: 16px 0;
  padding-bottom: 0;
  border-bottom: 1px solid var(--color-border-primary);
-  background: var(--color-bg-brand-softer);
+  background: var(--color-bg-brand-softest);

  &.focusable:focus-visible {
-    background: var(--color-bg-brand-softer);
+    background: var(--color-bg-brand-softest);
  }

  &__header {
@@ -11201,7 +11199,7 @@ noscript {
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
-    border-inline-start: 4px solid var(--color-text-brand);
+    border-inline-start: 4px solid var(--color-border-brand);
    pointer-events: none;
  }
 }
@@ -11398,8 +11396,8 @@ noscript {
  display: block;
  box-sizing: border-box;
  color: var(--color-text-primary);
-  background: var(--color-bg-brand-softer);
-  border: 1px solid var(--color-border-on-bg-brand-softer);
+  background: var(--color-bg-brand-softest);
+  border: 1px solid var(--color-border-brand-soft);
  border-radius: 8px;
  padding: 8px (5px + 8px);
  position: relative;
--- a/app/javascript/styles/mastodon/dashboard.scss
+++ b/app/javascript/styles/mastodon/dashboard.scss
@@ -30,7 +30,7 @@
      &:hover,
      &:focus,
      &:active {
-        background: var(--color-bg-brand-softer);
+        background: var(--color-bg-brand-softest);
      }
    }
  }
@@ -100,12 +100,12 @@
    }

    &.positive {
-      background: var(--color-bg-success-softer);
+      background: var(--color-bg-success-softest);
      color: var(--color-text-success);
    }

    &.negative {
-      background: var(--color-bg-error-softer);
+      background: var(--color-bg-error-softest);
      color: var(--color-text-error);
    }

--- a/app/javascript/styles/mastodon/emoji_picker.scss
+++ b/app/javascript/styles/mastodon/emoji_picker.scss
@@ -168,7 +168,7 @@
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
-    background-color: var(--color-bg-brand-softer);
+    background-color: var(--color-bg-brand-softest);
    border-radius: 100%;
  }
 }
--- a/app/javascript/styles/mastodon/forms.scss
+++ b/app/javascript/styles/mastodon/forms.scss
@@ -32,7 +32,7 @@ code {
    display: block;
    background: linear-gradient(
      to bottom,
-      var(--color-bg-secondary-solid),
+      var(--color-bg-secondary),
      transparent
    );
    position: absolute;
@@ -573,7 +573,7 @@ code {
  input[type='datetime-local'] {
    &:focus:user-invalid:not(:placeholder-shown),
    &:required:user-invalid:not(:placeholder-shown) {
-      border-color: var(--color-text-error);
+      border-color: var(--color-border-error);
    }
  }

@@ -763,7 +763,7 @@ code {
  input[type='datetime-local'],
  textarea,
  select {
-    border-color: var(--color-text-error);
+    border-color: var(--color-border-error);
  }
 }

@@ -801,27 +801,27 @@ code {
 .flash-message {
  color: var(--color-text-brand);
  background: transparent;
-  border: 1px solid var(--color-text-brand);
+  border: 1px solid var(--color-border-brand);
  border-radius: 4px;
  padding: 15px 10px;
  margin-bottom: 30px;
  text-align: center;

  &.notice {
-    border: 1px solid var(--color-border-on-bg-success-softer);
-    background: var(--color-bg-success-softer);
+    border: 1px solid var(--color-border-success-soft);
+    background: var(--color-bg-success-softest);
    color: var(--color-text-success);
  }

  &.warning {
-    border: 1px solid var(--color-border-on-bg-warning-softer);
-    background: var(--color-bg-warning-softer);
+    border: 1px solid var(--color-border-warning-soft);
+    background: var(--color-bg-warning-softest);
    color: var(--color-text-warning);
  }

  &.alert {
-    border: 1px solid var(--color-border-on-bg-error-softer);
-    background: var(--color-bg-error-softer);
+    border: 1px solid var(--color-border-error-soft);
+    background: var(--color-bg-error-softest);
    color: var(--color-text-error);
  }

@@ -887,7 +887,7 @@ code {
    }

    &:focus {
-      background: var(--color-bg-brand-softer);
+      background: var(--color-bg-brand-softest);
    }
  }

@@ -1373,7 +1373,7 @@ code {
    cursor: pointer;

    &:hover {
-      background-color: var(--color-bg-brand-softer);
+      background-color: var(--color-bg-brand-softest);
    }

    img {
@@ -1404,7 +1404,7 @@ code {
    }

    &.invalid img {
-      outline: 1px solid var(--color-text-error);
+      outline: 1px solid var(--color-border-error);
      outline-offset: -1px;
    }

@@ -1414,7 +1414,7 @@ code {
      width: 100%;
      height: 100%;
      position: absolute;
-      background: var(--color-bg-error-softer);
+      background: var(--color-bg-error-softest);
      z-index: 2;
      border-radius: 8px;
    }
--- a/app/javascript/styles/mastodon/modal.scss
+++ b/app/javascript/styles/mastodon/modal.scss
@@ -1,7 +1,7 @@
@use 'variables' as *;

 .modal-layout {
-  background: var(--color-bg-brand-softer);
+  background: var(--color-bg-brand-softest);
  display: flex;
  flex-direction: column;
  height: 100vh;
@@ -42,7 +42,7 @@
    position: absolute;
    inset: auto 0 0;
    height: 32px;
-    background-color: var(--color-bg-brand-softer);
+    background-color: var(--color-bg-brand-softest);

    /* Decorative zig-zag pattern at the bottom of the page */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="black"/></svg>');
--- a/app/javascript/styles/mastodon/polls.scss
+++ b/app/javascript/styles/mastodon/polls.scss
@@ -86,7 +86,7 @@
      padding: 8px 12px;

      &:focus {
-        border-color: var(--color-text-brand);
+        border-color: var(--color-border-brand);
      }

      @media screen and (width <= 600px) {
--- a/app/javascript/styles/mastodon/theme/_base.scss
+++ b/app/javascript/styles/mastodon/theme/_base.scss
@@ -1,40 +1,69 @@
@mixin palette {
-  --color-black: #000;
-  --color-grey-950: #181820;
-  --color-grey-800: #3a3a50;
-  --color-grey-700: #44445f;
-  --color-grey-600: #535374;
-  --color-grey-500: #67678e;
-  --color-grey-400: #88a;
-  --color-grey-300: #b2b1c8;
-  --color-grey-200: #d7d6e1;
-  --color-grey-100: #eeedf3;
-  --color-grey-50: #f6f6f9;
  --color-white: #fff;
-  --color-indigo-700: #5638cc;
-  --color-indigo-600: #6147e6;
-  --color-indigo-400: #8280f9;
-  --color-indigo-300: #a5abfd;
-  --color-indigo-200: #c8cdfe;
-  --color-indigo-100: #e0e3ff;
+  --color-black: #000;
+
+  // Grey
+  --color-grey-50: #f6f6f9;
+  --color-grey-100: #eeedf3;
+  --color-grey-200: #d7d6e1;
+  --color-grey-300: #b2b1c8;
+  --color-grey-400: #88a;
+  --color-grey-500: #67678e;
+  --color-grey-600: #535374;
+  --color-grey-700: #44445f;
+  --color-grey-800: #3a3a50;
+  --color-grey-900: #21212c;
+  --color-grey-950: #181820;
+
+  // Indigo
  --color-indigo-50: #f0f1ff;
+  --color-indigo-100: #e0e3ff;
+  --color-indigo-200: #c8cdfe;
+  --color-indigo-300: #a5abfd;
+  --color-indigo-400: #8280f9;
+  --color-indigo-500: #7263f2;
+  --color-indigo-600: #6147e6;
+  --color-indigo-700: #5638cc;
+  --color-indigo-800: #48359c;
+  --color-indigo-900: #3d317c;
+  --color-indigo-950: #261e48;
+
+  // Red
  --color-red-50: #fef2f2;
  --color-red-100: #ffe2e2;
+  --color-red-200: #ffc9c9;
  --color-red-300: #ffa2a2;
+  --color-red-400: #ff6467;
+  --color-red-500: #fb2c36;
+  --color-red-600: #e7000b;
+  --color-red-700: #c10007;
  --color-red-800: #9f0712;
  --color-red-900: #82181a;
  --color-red-950: #460809;
+
+  // Yellow
  --color-yellow-50: #fffbeb;
  --color-yellow-100: #fef3c6;
+  --color-yellow-200: #fee685;
+  --color-yellow-300: #ffd230;
  --color-yellow-400: #ffb900;
+  --color-yellow-500: #fe9a00;
  --color-yellow-600: #e17100;
  --color-yellow-700: #bb4d00;
+  --color-yellow-800: #973c00;
  --color-yellow-900: #7b3306;
  --color-yellow-950: #461901;
+
+  // Green
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
+  --color-green-200: #b9f8cf;
+  --color-green-300: #7bf1a8;
  --color-green-400: #05df72;
+  --color-green-500: #00c950;
  --color-green-600: #00a63e;
+  --color-green-700: #008236;
+  --color-green-800: #016630;
  --color-green-900: #0d542b;
  --color-green-950: #032e15;
 }
--- a/app/javascript/styles/mastodon/theme/_dark.scss
+++ b/app/javascript/styles/mastodon/theme/_dark.scss
@@ -5,150 +5,92 @@

  --color-text-primary: var(--color-grey-100);
  --color-text-secondary: var(--color-grey-300);
-  --color-text-tertiary: var(--color-grey-400);
-  --color-text-on-inverted: var(--color-grey-950);
+  --color-text-tertiary: var(--color-grey-400); // legacy
+  --color-text-inverted: var(--color-grey-950);
  --color-text-brand: var(--color-indigo-300);
  --color-text-brand-soft: color-mix(
    in oklab,
    var(--color-text-primary),
    var(--color-text-brand)
-  );
+  ); // legacy
+
  --color-text-on-brand-base: var(--color-white);
-  --color-text-brand-on-inverted: var(--color-indigo-600);
+  --color-text-brand-on-inverted: var(--color-indigo-600); // legacy
  --color-text-error: var(--color-red-300);
  --color-text-on-error-base: var(--color-white);
-  --color-text-warning: var(--color-yellow-400);
+  --color-text-warning: var(--color-yellow-400); // legacy
  --color-text-on-warning-base: var(--color-white);
-  --color-text-success: var(--color-green-400);
+  --color-text-success: var(--color-green-400); // legacy
  --color-text-on-success-base: var(--color-white);
-  --color-text-disabled: var(--color-grey-600);
-  --color-text-on-disabled: var(--color-grey-400);
-  --color-text-bookmark-highlight: var(--color-text-error);
-  --color-text-favourite-highlight: var(--color-text-warning);
-  --color-text-on-media: var(--color-white);
+  --color-text-disabled: var(--color-grey-600); // legacy
+  --color-text-on-disabled: var(--color-grey-400); // legacy
+  --color-text-bookmark-highlight: var(--color-text-error); // legacy
+  --color-text-favourite-highlight: var(--color-text-warning); // legacy
+  --color-text-on-media: var(--color-white); // legacy
  --color-text-status-links: color-mix(
    in oklab,
    var(--color-text-primary),
    var(--color-text-secondary)
-  );
+  ); // legacy

  /* BACKGROUND TOKENS */

  // Neutrals
  --color-bg-primary: var(--color-grey-950);
  --overlay-strength-secondary: 4%;
-  --color-bg-secondary-base: var(--color-white);
-  --color-bg-secondary: #{utils.css-alpha(
-      var(--color-bg-secondary-base),
-      var(--overlay-strength-secondary)
-    )};
-  --color-bg-secondary-solid: color-mix(
-    in srgb,
-    var(--color-bg-primary),
-    var(--color-bg-secondary-base) var(--overlay-strength-secondary)
-  );
-  --color-bg-tertiary: color-mix(
-    in oklab,
-    var(--color-bg-primary),
-    var(--color-bg-secondary-base) calc(2 * var(--overlay-strength-secondary))
-  );
+  --color-bg-secondary: var(--color-grey-900);
+  --color-bg-tertiary: var(--color-grey-800); // legacy

  // Utility
-  --color-bg-ambient: var(--color-bg-primary);
  --color-bg-inverted: var(--color-grey-50);
-  --color-bg-media-base: var(--color-black);
-  --color-bg-media-strength: 65%;
-  --color-bg-media: #{utils.css-alpha(
-      var(--color-bg-media-base),
-      var(--color-bg-media-strength)
-    )};
-  --color-bg-overlay: var(--color-black);
-  --color-bg-disabled: var(--color-grey-700);
+  --color-bg-overlay-base: #{utils.css-alpha(var(--color-grey-950), 60%)};
+  --color-bg-overlay-highlight: #{utils.css-alpha(var(--color-white), 5%)};
+  --color-bg-overlay: var(--color-black); // legacy
+  --color-bg-media-base: var(--color-black); // legacy
+  --color-bg-media: #{utils.css-alpha(var(--color-bg-media-base), 65%)}; // legacy
+  --color-bg-disabled: var(--color-grey-700); // legacy

  // Brand
-  --overlay-strength-brand: 22%;
  --color-bg-brand-base: var(--color-indigo-700);
-  --color-bg-brand-base-hover: color-mix(
-    in oklab,
-    var(--color-bg-brand-base),
-    var(--color-bg-primary) var(--overlay-strength-brand)
-  );
-  --color-bg-brand-soft: #{utils.css-alpha(
-      #6f4df5,
-      calc(var(--overlay-strength-brand) * 2)
-    )};
-  --color-bg-brand-softer: #{utils.css-alpha(
-      var(--color-bg-brand-base),
-      var(--overlay-strength-brand)
-    )};
-  --color-bg-brand-softer-solid: color-mix(
-    in srgb,
-    var(--color-bg-primary),
-    var(--color-bg-brand-base) var(--overlay-strength-brand)
-  );
+  --color-bg-brand-base-hover: var(--color-indigo-800); // legacy
+  --color-bg-brand-soft: var(--color-indigo-900);
+  --color-bg-brand-softest: var(--color-indigo-950);

  // Error
-  --overlay-strength-error: 10%;
-  --color-bg-error-base: var(--color-red-800);
-  --color-bg-error-base-hover: color-mix(
-    in oklab,
-    var(--color-bg-error-base),
-    var(--color-bg-primary) var(--overlay-strength-error)
-  );
+  --color-bg-error-base: var(--color-red-700);
+  --color-bg-error-base-hover: var(--color-red-800); // legacy
  --color-bg-error-soft: var(--color-red-900);
-  --color-bg-error-softer: var(--color-red-950);
+  --color-bg-error-softest: var(--color-red-950);

  // Warning
-  --overlay-strength-warning: 10%;
-  --color-bg-warning-base: var(--color-yellow-700);
-  --color-bg-warning-base-hover: color-mix(
-    in oklab,
-    var(--color-bg-warning-base),
-    var(--color-bg-primary) var(--overlay-strength-warning)
-  );
+  --color-bg-warning-base: var(--color-yellow-700); // legacy
  --color-bg-warning-soft: var(--color-yellow-900);
-  --color-bg-warning-softer: var(--color-yellow-950);
+  --color-bg-warning-softest: var(--color-yellow-950);

  // Success
-  --overlay-strength-success: 15%;
-  --color-bg-success-base: var(--color-green-600);
-  --color-bg-success-base-hover: color-mix(
-    in oklab,
-    var(--color-bg-success-base),
-    var(--color-bg-primary) var(--overlay-strength-success)
-  );
+  --color-bg-success-base: var(--color-green-600); // legacy
  --color-bg-success-soft: var(--color-green-900);
-  --color-bg-success-softer: var(--color-green-950);
+  --color-bg-success-softest: var(--color-green-950);

  /* BORDER TOKENS */

-  --border-strength-primary: 18%;
-  --color-border-primary: #{utils.css-alpha(
-      var(--color-indigo-200),
-      var(--border-strength-primary)
-    )};
-  --color-border-media: rgb(252 248 255 / 15%);
-  --color-border-verified: rgb(220, 3, 240);
-  --color-border-on-bg-secondary: #{utils.css-alpha(
-      var(--color-indigo-200),
-      calc(var(--border-strength-primary) / 1.5)
-    )};
-  --color-border-on-bg-brand-softer: var(--color-border-primary);
-  --color-border-on-bg-error-softer: #{utils.css-alpha(
-      var(--color-text-error),
-      50%
-    )};
-  --color-border-on-bg-warning-softer: #{utils.css-alpha(
+  --color-border-primary: var(--color-grey-800);
+  --color-border-brand: var(--color-text-brand);
+  --color-border-brand-soft: var(--color-indigo-800);
+  --color-border-error: var(--color-red-300);
+  --color-border-media: rgb(252 248 255 / 15%); // legacy
+  --color-border-error-soft: #{utils.css-alpha(var(--color-border-error), 50%)}; // legacy
+  --color-border-warning-soft: #{utils.css-alpha(
      var(--color-text-warning),
      50%
-    )};
-  --color-border-on-bg-success-softer: #{utils.css-alpha(
+    )}; // legacy
+
+  --color-border-success-soft: #{utils.css-alpha(
      var(--color-text-success),
      50%
-    )};
-  --color-border-on-bg-inverted: var(--color-border-primary);
+    )}; // legacy

-  /* SHADOW TOKENS */
+  /* SHADOW TOKENS (LEGACY) */

  --shadow-strength-primary: 80%;
  --color-shadow-primary: #{utils.css-alpha(
@@ -160,16 +102,16 @@
    0 8px 10px -6px var(--color-shadow-primary);
  --overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary));

-  /* GRAPHS/CHARTS TOKENS */
+  /* GRAPHS/CHARTS TOKENS (LEGACY) */

  --color-graph-primary-stroke: var(--color-text-brand);
-  --color-graph-primary-fill: var(--color-bg-brand-softer);
+  --color-graph-primary-fill: var(--color-bg-brand-softest);
  --color-graph-warning-stroke: var(--color-text-warning);
-  --color-graph-warning-fill: var(--color-bg-warning-softer);
+  --color-graph-warning-fill: var(--color-bg-warning-softest);
  --color-graph-disabled-stroke: var(--color-text-disabled);
  --color-graph-disabled-fill: var(--color-bg-disabled);

-  /* LEGACY TOKENS */
+  /* RICH TEXT TOKENS (LEGACY) */

  --rich-text-container-color: rgb(87 24 60 / 100%);
  --rich-text-text-color: rgb(255 175 212 / 100%);
@@ -182,7 +124,9 @@
  --color-text-primary: var(--color-grey-50);
  --color-text-status-links: var(--color-text-brand);

-  /* BORDER TOKENS */
+  /* BACKGROUND TOKENS */
+  --color-bg-error-base: var(--color-red-800);

-  --border-strength-primary: 30%;
+  /* BORDER TOKENS */
+  --color-border-primary: var(--color-grey-600);
 }
--- a/app/javascript/styles/mastodon/theme/_light.scss
+++ b/app/javascript/styles/mastodon/theme/_light.scss
@@ -5,145 +5,88 @@

  --color-text-primary: var(--color-grey-950);
  --color-text-secondary: var(--color-grey-600);
-  --color-text-tertiary: var(--color-grey-500);
-  --color-text-on-inverted: var(--color-white);
+  --color-text-tertiary: var(--color-grey-500); // legacy
+  --color-text-inverted: var(--color-white);
  --color-text-brand: var(--color-indigo-700);
  --color-text-brand-soft: color-mix(
    in oklab,
    var(--color-text-primary),
    var(--color-text-brand)
-  );
+  ); // legacy
+
  --color-text-on-brand-base: var(--color-white);
-  --color-text-brand-on-inverted: var(--color-indigo-400);
+  --color-text-brand-on-inverted: var(--color-indigo-400); // legacy
  --color-text-error: var(--color-red-800);
  --color-text-on-error-base: var(--color-white);
-  --color-text-warning: var(--color-yellow-600);
+  --color-text-warning: var(--color-yellow-600); // legacy
  --color-text-on-warning-base: var(--color-white);
-  --color-text-success: var(--color-green-600);
+  --color-text-success: var(--color-green-600); // legacy
  --color-text-on-success-base: var(--color-white);
-  --color-text-disabled: var(--color-grey-300);
-  --color-text-on-disabled: var(--color-grey-200);
-  --color-text-bookmark-highlight: var(--color-text-error);
-  --color-text-favourite-highlight: var(--color-text-warning);
-  --color-text-on-media: var(--color-white);
-  --color-text-status-links: var(--color-text-brand);
+  --color-text-disabled: var(--color-grey-300); // legacy
+  --color-text-on-disabled: var(--color-grey-200); // legacy
+  --color-text-bookmark-highlight: var(--color-text-error); // legacy
+  --color-text-favourite-highlight: var(--color-text-warning); // legacy
+  --color-text-on-media: var(--color-white); // legacy
+  --color-text-status-links: var(--color-text-brand); // legacy

  /* BACKGROUND TOKENS */

  // Neutrals
  --color-bg-primary: var(--color-white);
  --overlay-strength-secondary: 4%;
-  --color-bg-secondary-base: #000550;
-  --color-bg-secondary: #{color-mix(
-      in oklab,
-      var(--color-bg-primary),
-      var(--color-bg-secondary-base) var(--overlay-strength-secondary)
-    )};
-  --color-bg-secondary-solid: #{color-mix(
-      in srgb,
-      var(--color-bg-primary),
-      var(--color-bg-secondary-base) var(--overlay-strength-secondary)
-    )};
-  --color-bg-tertiary: #{color-mix(
-      in oklab,
-      var(--color-bg-primary),
-      var(--color-bg-secondary-base) calc(2 * var(--overlay-strength-secondary))
-    )};
+  --color-bg-secondary: var(--color-grey-50);
+  --color-bg-tertiary: var(--color-grey-100); // legacy

  // Utility
-  --color-bg-ambient: var(--color-bg-primary);
  --color-bg-inverted: var(--color-grey-950);
-  --color-bg-media-base: var(--color-black);
-  --color-bg-media-strength: 65%;
-  --color-bg-media: #{utils.css-alpha(
-      var(--color-bg-media-base),
-      var(--color-bg-media-strength)
-    )};
-  --color-bg-overlay: var(--color-bg-primary);
-  --color-bg-disabled: var(--color-grey-400);
+  --color-bg-overlay-base: #{utils.css-alpha(var(--color-grey-950), 60%)};
+  --color-bg-overlay-highlight: #{utils.css-alpha(var(--color-grey-950), 5%)};
+  --color-bg-overlay: var(--color-bg-primary); // legacy
+  --color-bg-media-base: var(--color-black); // legacy
+  --color-bg-media: #{utils.css-alpha(var(--color-bg-media-base), 65%)}; // legacy
+  --color-bg-disabled: var(--color-grey-400); // legacy

  // Brand
-  --overlay-strength-brand: 6%;
  --color-bg-brand-base: var(--color-indigo-700);
-  --color-bg-brand-base-hover: color-mix(
-    in oklab,
-    var(--color-bg-brand-base),
-    black var(--overlay-strength-brand)
-  );
-  --color-bg-brand-soft: #{utils.css-alpha(
-      #0012d8,
-      calc(var(--overlay-strength-brand) * 2)
-    )};
-  --color-bg-brand-softer: #{utils.css-alpha(
-      #0012d8,
-      var(--overlay-strength-brand)
-    )};
-  --color-bg-brand-softer-solid: color-mix(
-    in srgb,
-    var(--color-bg-primary),
-    var(--color-bg-brand-base) var(--overlay-strength-brand)
-  );
+  --color-bg-brand-base-hover: var(--color-indigo-800); // legacy
+  --color-bg-brand-soft: var(--color-indigo-100);
+  --color-bg-brand-softest: var(--color-indigo-50);

  // Error
-  --overlay-strength-error: 5%;
-  --color-bg-error-base: var(--color-red-800);
-  --color-bg-error-base-hover: color-mix(
-    in oklab,
-    var(--color-bg-error-base),
-    black var(--overlay-strength-error)
-  );
+  --color-bg-error-base: var(--color-red-700);
+  --color-bg-error-base-hover: var(--color-red-800); // legacy
  --color-bg-error-soft: var(--color-red-100);
-  --color-bg-error-softer: var(--color-red-50);
+  --color-bg-error-softest: var(--color-red-50);

  // Warning
-  --overlay-strength-warning: 10%;
-  --color-bg-warning-base: var(--color-yellow-700);
-  --color-bg-warning-base-hover: color-mix(
-    in oklab,
-    var(--color-bg-warning-base),
-    black var(--overlay-strength-warning)
-  );
+  --color-bg-warning-base: var(--color-yellow-700); // legacy
  --color-bg-warning-soft: var(--color-yellow-100);
-  --color-bg-warning-softer: var(--color-yellow-50);
+  --color-bg-warning-softest: var(--color-yellow-50);

  // Success
-  --overlay-strength-success: 15%;
-  --color-bg-success-base: var(--color-green-600);
-  --color-bg-success-base-hover: color-mix(
-    in oklab,
-    var(--color-bg-success-base),
-    black var(--overlay-strength-success)
-  );
+  --color-bg-success-base: var(--color-green-600); // legacy
  --color-bg-success-soft: var(--color-green-100);
-  --color-bg-success-softer: var(--color-green-50);
+  --color-bg-success-softest: var(--color-green-50);

  /* BORDER TOKENS */

-  --border-strength-primary: 15%;
-  --color-border-primary: color-mix(
-    in oklab,
-    var(--color-bg-primary),
-    var(--color-grey-950) var(--border-strength-primary)
-  );
-  --color-border-media: rgb(252 248 255 / 15%);
-  --color-border-verified: rgb(220, 3, 240);
-  --color-border-on-bg-secondary: var(--color-grey-200);
-  --color-border-on-bg-brand-softer: var(--color-indigo-200);
-  --color-border-on-bg-error-softer: #{utils.css-alpha(
-      var(--color-text-error),
-      50%
-    )};
-  --color-border-on-bg-warning-softer: #{utils.css-alpha(
+  --color-border-primary: var(--color-grey-200);
+  --color-border-brand: var(--color-text-brand);
+  --color-border-brand-soft: var(--color-indigo-200);
+  --color-border-error: var(--color-red-700);
+  --color-border-media: rgb(252 248 255 / 15%); // legacy
+  --color-border-error-soft: #{utils.css-alpha(var(--color-text-error), 50%)}; // legacy
+  --color-border-warning-soft: #{utils.css-alpha(
      var(--color-text-warning),
      50%
-    )};
-  --color-border-on-bg-success-softer: #{utils.css-alpha(
+    )}; // legacy
+
+  --color-border-success-soft: #{utils.css-alpha(
      var(--color-text-success),
      50%
-    )};
-  --color-border-on-bg-inverted: var(--color-border-primary);
+    )}; // legacy

-  /* SHADOW TOKENS */
+  /* SHADOW TOKENS (LEGACY) */

  --shadow-strength-primary: 30%;
  --color-shadow-primary: #{utils.css-alpha(
@@ -155,16 +98,16 @@
    0 8px 10px -6px var(--color-shadow-primary);
  --overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary));

-  /* GRAPHS/CHARTS TOKENS */
+  /* GRAPHS/CHARTS TOKENS (LEGACY) */

  --color-graph-primary-stroke: var(--color-text-brand);
-  --color-graph-primary-fill: var(--color-bg-brand-softer);
+  --color-graph-primary-fill: var(--color-bg-brand-softest);
  --color-graph-warning-stroke: var(--color-text-warning);
-  --color-graph-warning-fill: var(--color-bg-warning-softer);
+  --color-graph-warning-fill: var(--color-bg-warning-softest);
  --color-graph-disabled-stroke: var(--color-text-disabled);
  --color-graph-disabled-fill: var(--color-bg-disabled);

-  /* LEGACY TOKENS */
+  /* RICH TEXT TOKENS (LEGACY) */

  --rich-text-container-color: rgb(255 216 231 / 100%);
  --rich-text-text-color: rgb(114 47 83 / 100%);
@@ -179,8 +122,9 @@
  --color-text-tertiary: var(--color-grey-700);
  --color-text-brand: var(--color-indigo-600);

-  /* BORDER TOKENS */
+  /* BACKGROUND TOKENS */
+  --color-bg-error-base: var(--color-red-800);

-  --border-strength-primary: 30%;
-  --color-border-on-bg-secondary: var(--color-grey-300);
+  /* BORDER TOKENS */
+  --color-border-primary: var(--color-grey-300);
 }
--- a/app/javascript/styles/mastodon/widgets.scss
+++ b/app/javascript/styles/mastodon/widgets.scss
@@ -69,7 +69,7 @@
    }

    &.active .avatar-stack .account__avatar {
-      border-color: var(--color-text-brand);
+      border-color: var(--color-border-brand);
    }

    .trends__item__current {