Bring back old theme to run alongside the new

.prettierignore

@@ -68,6 +68,7 @@ docker-compose.override.yml
 
 # Ignore vendored CSS reset
 app/javascript/styles/mastodon/reset.scss
+app/javascript/styles_new/mastodon/reset.scss
 
 # Ignore Javascript pending https://github.com/mastodon/mastodon/pull/23631
 *.js

app/javascript/styles/application.scss

@@ -1,7 +1,27 @@
-@use 'mastodon/css_variables';
+@use 'mastodon/functions';
+@use 'mastodon/mixins';
 @use 'mastodon/variables';
-@use 'common';
+@use 'mastodon/css_variables';
+@use 'fonts/roboto';
+@use 'fonts/roboto-mono';
 
-html {
+@use 'mastodon/reset';
-  color-scheme: dark;
+@use 'mastodon/basics';
-}
+@use 'mastodon/branding';
+@use 'mastodon/containers';
+@use 'mastodon/lists';
+@use 'mastodon/widgets';
+@use 'mastodon/forms';
+@use 'mastodon/accounts';
+@use 'mastodon/components';
+@use 'mastodon/polls';
+@use 'mastodon/modal';
+@use 'mastodon/emoji_picker';
+@use 'mastodon/annual_reports';
+@use 'mastodon/about';
+@use 'mastodon/tables';
+@use 'mastodon/admin';
+@use 'mastodon/dashboard';
+@use 'mastodon/rtl';
+@use 'mastodon/accessibility';
+@use 'mastodon/rich_text';

app/javascript/styles/contrast.scss

@@ -1,8 +1,3 @@
-@use 'mastodon/css_variables';
+@use 'contrast/variables';
-@use 'mastodon/variables';
+@use 'application';
-@use 'common';
 @use 'contrast/diff';
-
-html {
-  color-scheme: dark;
-}

app/javascript/styles/contrast/diff.scss

@@ -1,16 +1,4 @@
-:root {
+@use '../mastodon/variables' as *;
-  /* TEXT TOKENS */
-
-  --clr-text-primary: var(--clr-grey-50);
-  --clr-text-secondary: var(--clr-grey-300);
-  --clr-text-tertiary: var(--clr-grey-400);
-  --clr-text-accent: var(--clr-indigo-300);
-  --clr-text-status-links: var(--clr-text-accent);
-
-  /* BORDER TOKENS */
-
-  --clr-border-primary-strength: 18%;
-}
 
 .status__content a,
 .reply-indicator__content a,
@@ -43,6 +31,16 @@
   }
 }
 
+.status__content a,
+.reply-indicator__content a,
+.edit-indicator__content a {
+  color: $highlight-text-color;
+}
+
+.report-dialog-modal__textarea::placeholder {
+  color: $inverted-text-color;
+}
+
 .link-button:disabled {
   cursor: not-allowed;
 

app/javascript/styles/contrast/variables.scss

@@ -0,0 +1,25 @@
+@use '../mastodon/functions' as *;
+
+// Dependent colors
+$black: #000;
+
+$classic-base-color: hsl(240deg, 16%, 19%);
+$classic-primary-color: hsl(240deg, 29%, 70%);
+$classic-secondary-color: hsl(255deg, 25%, 88%);
+$classic-highlight-color: hsl(240deg, 100%, 69%);
+
+$ui-base-color: $classic-base-color !default;
+$ui-primary-color: $classic-primary-color !default;
+$ui-secondary-color: $classic-secondary-color !default;
+$ui-highlight-color: $classic-highlight-color !default;
+
+@use '../mastodon/variables' with (
+  $darker-text-color: lighten($ui-primary-color, 20%),
+  $dark-text-color: lighten($ui-primary-color, 12%),
+  $secondary-text-color: lighten($ui-secondary-color, 6%),
+  $highlight-text-color: lighten($ui-highlight-color, 10%),
+  $action-button-color: lighten($ui-base-color, 50%),
+  $inverted-text-color: $black,
+  $lighter-text-color: darken($ui-base-color, 6%),
+  $light-text-color: $classic-primary-color
+);

app/javascript/styles/mastodon-light.scss

@@ -1,9 +1,4 @@
+@use 'mastodon-light/variables';
 @use 'mastodon-light/css_variables';
-@use 'mastodon/variables' with (
+@use 'application';
-  $emojis-requiring-inversion: 'chains'
+@use 'mastodon-light/diff';
-);
-@use 'common';
-
-html {
-  color-scheme: light;
-}

app/javascript/styles/mastodon-light/css_variables.scss

@@ -1,196 +1,23 @@
-@use '../mastodon/theme_utils' as utils;
+@use 'sass:color';
+@use '../mastodon/variables' as *;
+@use 'variables' as *;
+@use '../mastodon/functions' as *;
 
-:root {
+body {
-  --clr-black: #000;
+  --dropdown-border-color: hsl(240deg, 25%, 88%);
-  --clr-grey-950: #181821;
+  --dropdown-background-color: #fff;
-  --clr-grey-800: #292938;
+  --modal-border-color: hsl(240deg, 25%, 88%);
-  --clr-grey-700: #444664;
+  --modal-background-color: var(--background-color);
-  --clr-grey-600: #545778;
+  --background-border-color: hsl(240deg, 25%, 88%);
-  --clr-grey-500: #696d91;
+  --background-color: #fff;
-  --clr-grey-400: #8b8dac;
+  --background-color-tint: rgba(255, 255, 255, 80%);
-  --clr-grey-300: #b4b6cb;
+  --background-filter: blur(10px);
-  --clr-grey-200: #d8d9e3;
+  --surface-variant-background-color: #f1ebfb;
-  --clr-grey-100: #f0f0f5;
+  --surface-border-color: #cac4d0;
-  --clr-grey-50: #f0f1ff;
+  --on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.65)};
-  --clr-white: #fff;
+  --rich-text-container-color: rgba(255, 216, 231, 100%);
-  --clr-indigo-600: #6147e6;
+  --rich-text-text-color: rgba(114, 47, 83, 100%);
-  --clr-indigo-400: #8886ff;
+  --rich-text-decorations-color: rgba(255, 175, 212, 100%);
-  --clr-indigo-300: #a5abfd;
+  --input-placeholder-color: #{color.adjust($dark-text-color, $alpha: -0.5)};
-  --clr-indigo-200: #c8cdfe;
+  --input-background-color: #{darken($ui-base-color, 10%)};
-  --clr-indigo-100: #e0e3ff;
-  --clr-indigo-50: #f0f1ff;
-  --clr-red-500: #ff637e;
-  --clr-red-600: #ec003f;
-  --clr-yellow-400: #ffb900;
-  --clr-yellow-600: #e17100;
-  --clr-green-400: #05df72;
-  --clr-green-600: #00a63e;
-
-  /* TEXT TOKENS */
-
-  --clr-text-primary: var(--clr-grey-950);
-  --clr-text-secondary: var(--clr-grey-600);
-  --clr-text-tertiary: var(--clr-grey-500);
-  --clr-text-on-inverted: var(--clr-white);
-  --clr-text-accent: var(--clr-indigo-600);
-  --clr-text-accent-subtle: color-mix(
-    in oklab,
-    var(--clr-text-primary),
-    var(--clr-text-accent)
-  );
-  --clr-text-on-accent-strong: var(--clr-white);
-  --clr-text-error: var(--clr-red-600);
-  --clr-text-on-error-strong: var(--clr-white);
-  --clr-text-warning: var(--clr-yellow-600);
-  --clr-text-on-warning-strong: var(--clr-white);
-  --clr-text-success: var(--clr-green-600);
-  --clr-text-on-success-strong: var(--clr-white);
-  --clr-text-disabled: var(--clr-grey-300);
-  --clr-text-on-disabled: var(--clr-grey-200);
-  --clr-text-bookmark-highlight: var(--clr-text-error);
-  --clr-text-favourite-highlight: var(--clr-text-warning);
-  --clr-text-on-media: var(--clr-white);
-  --clr-text-status-links: var(--clr-text-accent);
-
-  /* BACKGROUND TOKENS */
-
-  --clr-bg-primary: var(--clr-white);
-  --clr-bg-secondary-base: var(--clr-grey-600);
-  --clr-bg-secondary-strength: 5%;
-  --clr-bg-secondary: #{color-mix(
-      in oklab,
-      var(--clr-bg-primary),
-      var(--clr-bg-secondary-base) var(--clr-bg-secondary-strength)
-    )};
-  --clr-bg-secondary-solid: #{color-mix(
-      in srgb,
-      var(--clr-bg-primary),
-      var(--clr-bg-secondary-base) var(--clr-bg-secondary-strength)
-    )};
-  --clr-bg-tertiary: #{color-mix(
-      in oklab,
-      var(--clr-bg-primary),
-      var(--clr-bg-secondary-base) calc(2 * var(--clr-bg-secondary-strength))
-    )};
-  --clr-bg-ambient: var(--clr-bg-primary);
-  --clr-bg-elevated: var(--clr-bg-primary);
-  --clr-bg-inverted: var(--clr-grey-950);
-  --clr-bg-media-base: var(--clr-black);
-  --clr-bg-media-strength: 65%;
-  --clr-bg-media: #{utils.css-alpha(
-      var(--clr-bg-media-base),
-      var(--clr-bg-media-strength)
-    )};
-  --clr-bg-overlay: var(--clr-bg-primary);
-  --clr-bg-disabled: var(--clr-grey-400);
-  --clr-bg-accent-subtle-base: var(--clr-indigo-600);
-  --clr-bg-accent-subtle-strength: 8%;
-  --clr-bg-accent-subtle: #{utils.css-alpha(
-      var(--clr-bg-accent-subtle-base),
-      var(--clr-bg-accent-subtle-strength)
-    )};
-  --clr-bg-accent-subtle-highlighted: #{utils.css-alpha(
-      var(--clr-bg-accent-subtle-base),
-      calc(var(--clr-bg-accent-subtle-strength) * 1.5)
-    )};
-  --clr-bg-accent-strong: var(--clr-indigo-600);
-  --clr-bg-accent-strong-highlighted: color-mix(
-    in oklab,
-    var(--clr-bg-accent-strong),
-    black var(--clr-bg-accent-subtle-strength)
-  );
-  --clr-bg-error-subtle-base: #f41b3b;
-  --clr-bg-error-subtle-strength: 12%;
-  --clr-bg-error-subtle: #{utils.css-alpha(
-      var(--clr-bg-error-subtle-base),
-      var(--clr-bg-error-subtle-strength)
-    )};
-  --clr-bg-error-strong: var(--clr-red-600);
-  --clr-bg-error-strong-highlighted: color-mix(
-    in oklab,
-    var(--clr-bg-error-strong),
-    black var(--clr-bg-error-subtle-strength)
-  );
-  --clr-bg-warning-subtle-base: #ffca1b;
-  --clr-bg-warning-subtle-strength: 10%;
-  --clr-bg-warning-subtle: #{utils.css-alpha(
-      var(--clr-bg-warning-subtle-base),
-      var(--clr-bg-warning-subtle-strength)
-    )};
-  --clr-bg-warning-strong: var(--clr-yellow-600);
-  --clr-bg-warning-strong-highlighted: color-mix(
-    in oklab,
-    var(--clr-bg-warning-strong),
-    black var(--clr-bg-warning-subtle-strength)
-  );
-  --clr-bg-success-subtle-base: #17e865;
-  --clr-bg-success-subtle-strength: 15%;
-  --clr-bg-success-subtle: #{utils.css-alpha(
-      var(--clr-bg-success-subtle-base),
-      var(--clr-bg-success-subtle-strength)
-    )};
-  --clr-bg-success-strong: var(--clr-green-600);
-  --clr-bg-success-strong-highlighted: color-mix(
-    in oklab,
-    var(--clr-bg-success-strong),
-    black var(--clr-bg-success-subtle-strength)
-  );
-
-  /* BORDER TOKENS */
-
-  --clr-border-primary-base: #000856;
-  --clr-border-primary-strength: 15%;
-  --clr-border-primary: color-mix(
-    in oklab,
-    var(--clr-bg-primary),
-    var(--clr-border-primary-base) var(--clr-border-primary-strength)
-  );
-  --clr-border-media: rgb(252 248 255 / 15%);
-  --clr-border-on-bg-secondary: var(--clr-grey-200);
-  --clr-border-on-bg-accent-subtle: var(--clr-indigo-200);
-  --clr-border-on-bg-error-subtle: #{utils.css-alpha(
-      var(--clr-text-error),
-      50%
-    )};
-  --clr-border-on-bg-warning-subtle: #{utils.css-alpha(
-      var(--clr-text-warning),
-      50%
-    )};
-  --clr-border-on-bg-success-subtle: #{utils.css-alpha(
-      var(--clr-text-success),
-      50%
-    )};
-
-  /* SHADOW TOKENS */
-
-  --clr-shadow-primary-base: var(--clr-black);
-  --clr-shadow-primary-strength: 30%;
-  --clr-shadow-primary: #{utils.css-alpha(
-      var(--clr-shadow-primary-base),
-      var(--clr-shadow-primary-strength)
-    )};
-  --dropdown-shadow:
-    0 20px 25px -5px var(--clr-shadow-primary),
-    0 8px 10px -6px var(--clr-shadow-primary);
-  --overlay-icon-shadow: drop-shadow(0 0 8px var(--clr-shadow-primary));
-
-  /* GRAPHS/CHARTS TOKENS */
-
-  --clr-graph-primary-stroke: var(--clr-text-accent);
-  --clr-graph-primary-fill: var(--clr-bg-accent-subtle);
-  --clr-graph-warning-stroke: var(--clr-text-warning);
-  --clr-graph-warning-fill: var(--clr-bg-warning-subtle);
-  --clr-graph-disabled-stroke: var(--clr-text-disabled);
-  --clr-graph-disabled-fill: var(--clr-bg-disabled);
-
-  /* LEGACY TOKENS */
-
-  --rich-text-container-color: rgb(255 216 231 / 100%);
-  --rich-text-text-color: rgb(114 47 83 / 100%);
-  --rich-text-decorations-color: rgb(255 175 212 / 100%);
-
-  /* MISCELLANEOUS */
-
-  --outline-focus-default: 2px solid var(--clr-text-accent);
-  --avatar-border-radius: 8px;
 }

app/javascript/styles/mastodon-light/diff.scss

@@ -0,0 +1,530 @@
+// Notes!
+// Sass color functions, "darken" and "lighten" are automatically replaced.
+@use 'sass:color';
+@use '../mastodon/functions' as *;
+@use '../mastodon/variables' as *;
+
+.simple_form .button.button-tertiary {
+  color: $highlight-text-color;
+
+  &:hover,
+  &:focus,
+  &:active {
+    color: $white;
+  }
+}
+
+.status-card__actions button,
+.status-card__actions a {
+  color: color.change($white, $alpha: 0.8);
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: $white;
+  }
+}
+
+// Change default background colors of columns
+.interaction-modal {
+  background: $white;
+  border: 1px solid var(--background-border-color);
+}
+
+.rules-list li::before {
+  background: $ui-highlight-color;
+}
+
+.directory__card__img {
+  background: lighten($ui-base-color, 12%);
+}
+
+.account__header {
+  background: $white;
+}
+
+.column-header__button.active {
+  color: $ui-highlight-color;
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: $ui-highlight-color;
+  }
+}
+
+.icon-button:disabled {
+  color: darken($action-button-color, 25%);
+}
+
+.getting-started__footer a {
+  color: $ui-secondary-color;
+  text-decoration: underline;
+}
+
+.confirmation-modal__secondary-button,
+.confirmation-modal__cancel-button,
+.mute-modal__cancel-button,
+.block-modal__cancel-button {
+  color: lighten($ui-base-color, 26%);
+
+  &:hover,
+  &:focus,
+  &:active {
+    color: $primary-text-color;
+  }
+}
+
+.getting-started .navigation-bar {
+  border-top: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--background-border-color);
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border-top: 0;
+  }
+}
+
+.search__input,
+.search__popout,
+.setting-text,
+.report-dialog-modal__textarea,
+.audio-player {
+  border: 1px solid var(--background-border-color);
+}
+
+.report-dialog-modal .dialog-option .poll__input {
+  color: $white;
+}
+
+.upload-progress__backdrop {
+  background: $ui-base-color;
+}
+
+// Change the background colors of statuses
+.focusable:focus-visible {
+  background: lighten($white, 4%);
+}
+
+.account-gallery__item a {
+  background-color: $ui-base-color;
+}
+
+// Change the text colors on inverted background
+.actions-modal ul li:not(:empty) a.active,
+.actions-modal ul li:not(:empty) a.active button,
+.actions-modal ul li:not(:empty) a:active,
+.actions-modal ul li:not(:empty) a:active button,
+.actions-modal ul li:not(:empty) a:focus,
+.actions-modal ul li:not(:empty) a:focus button,
+.actions-modal ul li:not(:empty) a:hover,
+.actions-modal ul li:not(:empty) a:hover button,
+.simple_form button:not(.button, .link-button) {
+  color: $white;
+}
+
+.compare-history-modal .report-modal__target,
+.report-dialog-modal .poll__option.dialog-option {
+  border-bottom-color: lighten($ui-base-color, 4%);
+}
+
+.report-dialog-modal__container {
+  border-top-color: lighten($ui-base-color, 4%);
+}
+
+.dialog-modal__content__preview {
+  background: #fff;
+  border-bottom: 1px solid var(--modal-border-color);
+}
+
+.reactions-bar__item:hover,
+.reactions-bar__item:focus,
+.reactions-bar__item:active {
+  background-color: $ui-base-color;
+}
+
+.reactions-bar__item.active {
+  background-color: color.mix($white, $ui-highlight-color, 80%);
+  border-color: color.mix(
+    lighten($ui-base-color, 8%),
+    $ui-highlight-color,
+    80%
+  );
+}
+
+.media-modal__overlay .picture-in-picture__footer {
+  border: 0;
+}
+
+.picture-in-picture__header {
+  border-bottom: 0;
+}
+
+.announcements,
+.picture-in-picture__footer {
+  border-top: 0;
+}
+
+.icon-with-badge__badge {
+  border-color: $white;
+  color: $white;
+}
+
+.column-settings__hashtags .column-select__option {
+  color: $white;
+}
+
+.dashboard__quick-access,
+.focal-point__preview strong,
+.admin-wrapper .content__heading__tabs a.selected {
+  color: $white;
+}
+
+.flash-message.warning {
+  color: lighten($gold-star, 16%);
+}
+
+.boost-modal__action-bar,
+.confirmation-modal__action-bar,
+.mute-modal__action-bar,
+.block-modal__action-bar,
+.onboarding-modal__paginator,
+.error-modal__footer {
+  background: darken($ui-base-color, 6%);
+
+  .onboarding-modal__nav,
+  .error-modal__nav {
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: darken($ui-base-color, 12%);
+    }
+  }
+}
+
+.display-case__case {
+  background: $white;
+}
+
+.embed-modal .embed-modal__container .embed-modal__html {
+  background: $white;
+  border: 1px solid var(--background-border-color);
+
+  &:focus {
+    border-color: lighten($ui-base-color, 12%);
+    background: $white;
+  }
+}
+
+.react-toggle-track {
+  background: $ui-primary-color;
+}
+
+.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
+  background: lighten($ui-primary-color, 10%);
+}
+
+.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled)
+  .react-toggle-track {
+  background: lighten($ui-highlight-color, 10%);
+}
+
+// Change the default color used for the text in an empty column or on the error column
+.empty-column-indicator,
+.error-column {
+  color: $primary-text-color;
+  background: $white;
+}
+
+// Change the default colors used on some parts of the profile pages
+.activity-stream-tabs {
+  background: $white;
+  border-bottom-color: lighten($ui-base-color, 8%);
+}
+
+.nothing-here,
+.page-header,
+.directory__tag > a,
+.directory__tag > div {
+  background: $white;
+  border: 1px solid var(--background-border-color);
+}
+
+.picture-in-picture-placeholder {
+  background: $white;
+  border-color: lighten($ui-base-color, 8%);
+  color: lighten($ui-base-color, 8%);
+}
+
+.directory__tag > a {
+  &:hover,
+  &:active,
+  &:focus {
+    background: $ui-base-color;
+  }
+}
+
+.batch-table {
+  &__toolbar,
+  &__row,
+  .nothing-here {
+    border-color: lighten($ui-base-color, 8%);
+  }
+}
+
+.accounts-grid {
+  .account-grid-card {
+    .controls {
+      .icon-button {
+        color: $darker-text-color;
+      }
+    }
+
+    .name {
+      a {
+        color: $primary-text-color;
+      }
+    }
+
+    .username {
+      color: $darker-text-color;
+    }
+
+    .account__header__content {
+      color: $primary-text-color;
+    }
+  }
+}
+
+.simple_form {
+  .warning {
+    box-shadow: none;
+    background: color.change($error-red, $alpha: 0.5);
+    text-shadow: none;
+  }
+
+  .recommended {
+    border-color: $ui-highlight-color;
+    color: $ui-highlight-color;
+    background-color: color.change($ui-highlight-color, $alpha: 0.1);
+  }
+
+  input[type='text'],
+  input[type='number'],
+  input[type='email'],
+  input[type='password'],
+  input[type='url'],
+  input[type='datetime-local'],
+  textarea {
+    background: darken($ui-base-color, 10%);
+  }
+
+  select {
+    background: darken($ui-base-color, 10%)
+      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
+      no-repeat right 8px center / auto 14px;
+  }
+}
+
+.compose-form .compose-form__warning {
+  border-color: $ui-highlight-color;
+  background-color: color.change($ui-highlight-color, $alpha: 0.1);
+
+  &,
+  a {
+    color: $ui-highlight-color;
+  }
+}
+
+.status__content,
+.reply-indicator__content {
+  a {
+    color: $highlight-text-color;
+  }
+}
+
+.notification__filter-bar button.active::after,
+.account__section-headline a.active::after {
+  border-color: transparent transparent $white;
+}
+
+.activity-stream,
+.nothing-here,
+.directory__tag > a,
+.directory__tag > div,
+.card > a,
+.page-header,
+.compose-form,
+.compose-form__warning {
+  box-shadow: none;
+}
+
+.card {
+  &__img {
+    background: darken($ui-base-color, 10%);
+  }
+
+  & > a {
+    &:hover,
+    &:active,
+    &:focus {
+      .card__bar {
+        background: darken($ui-base-color, 10%);
+      }
+    }
+  }
+}
+
+.status__wrapper-direct {
+  background-color: color.change($ui-highlight-color, $alpha: 0.1);
+
+  &:focus {
+    background-color: color.change($ui-highlight-color, $alpha: 0.15);
+  }
+}
+
+.compose-form__actions .icon-button.active,
+.dropdown-button.active,
+.language-dropdown__dropdown__results__item:focus,
+.language-dropdown__dropdown__results__item.active,
+.language-dropdown__dropdown__results__item:focus
+  .language-dropdown__dropdown__results__item__common-name,
+.language-dropdown__dropdown__results__item.active
+  .language-dropdown__dropdown__results__item__common-name {
+  color: $white;
+}
+
+.privacy-dropdown__option,
+.visibility-dropdown__option {
+  &:focus,
+  &.active {
+    --dropdown-text-color: #{$white};
+  }
+}
+
+.compose-form .spoiler-input__input {
+  color: lighten($ui-highlight-color, 8%);
+}
+
+.emoji-mart-search input,
+.language-dropdown__dropdown .emoji-mart-search input,
+.poll__option input[type='text'] {
+  background: darken($ui-base-color, 10%);
+}
+
+.dropdown-button.warning {
+  border-color: #b3261e;
+  color: #b3261e;
+
+  &.active {
+    background-color: #f9dedc;
+  }
+}
+
+.search__popout__menu__item {
+  &:hover,
+  &:active,
+  &:focus,
+  &.active {
+    color: $white;
+
+    mark,
+    .icon-button {
+      color: $white;
+    }
+  }
+}
+
+.inline-follow-suggestions {
+  background-color: color.change($ui-highlight-color, $alpha: 0.1);
+  border-bottom-color: color.change($ui-highlight-color, $alpha: 0.3);
+
+  &.focusable:focus-visible {
+    background: color.change($ui-highlight-color, $alpha: 0.1);
+  }
+}
+
+.inline-follow-suggestions__body__scrollable__card {
+  background: $white;
+}
+
+.inline-follow-suggestions__body__scroll-button__icon {
+  color: $white;
+}
+
+a.sparkline {
+  &:hover,
+  &:focus,
+  &:active {
+    background: darken($ui-base-color, 10%);
+  }
+}
+
+.dashboard__counters {
+  & > div {
+    & > a {
+      &:hover,
+      &:focus,
+      &:active {
+        background: darken($ui-base-color, 10%);
+      }
+    }
+  }
+}
+
+.directory {
+  &__tag {
+    & > a {
+      &:hover,
+      &:focus,
+      &:active {
+        background: darken($ui-base-color, 10%);
+      }
+    }
+  }
+}
+
+.strike-entry {
+  &:hover,
+  &:focus,
+  &:active {
+    background: darken($ui-base-color, 10%);
+  }
+}
+
+.setting-text {
+  background: darken($ui-base-color, 10%);
+}
+
+.report-dialog-modal__textarea {
+  background: darken($ui-base-color, 10%);
+}
+
+.autosuggest-account {
+  .display-name__account {
+    color: $dark-text-color;
+  }
+}
+
+.notification-group--annual-report {
+  .notification-group__icon,
+  .notification-group__main .link-button {
+    color: var(--indigo-3);
+  }
+}
+
+@supports not selector(::-webkit-scrollbar) {
+  html {
+    scrollbar-color: color.change($action-button-color, $alpha: 0.25)
+      var(--background-border-color);
+  }
+}
+
+.custom-scrollbars {
+  ::-webkit-scrollbar-thumb {
+    opacity: 0.25;
+  }
+}
+
+kbd {
+  background-color: color.change($ui-highlight-color, $alpha: 0.1);
+}

app/javascript/styles/mastodon-light/variables.scss

@@ -0,0 +1,46 @@
+@use 'sass:color';
+
+@use '../mastodon/functions' with (
+  $darken-multiplier: 1,
+  $lighten-multiplier: -1
+);
+
+$black: #000; // Black
+$white: #fff; // White
+$blurple-500: #6364ff; // Brand purple
+$grey-600: hsl(240deg, 8%, 33%); // Trout
+$grey-100: hsl(240deg, 51%, 90%); // Topaz
+
+$classic-base-color: hsl(240deg, 16%, 19%);
+$classic-secondary-color: hsl(255deg, 25%, 88%);
+$classic-highlight-color: $blurple-500;
+
+@use '../mastodon/variables' with (
+  $success-green: color.adjust(
+      hsl(138deg, 32%, 35%),
+      $lightness: 8%,
+      $space: hsl
+    ),
+  $base-overlay-background: $white,
+
+  $ui-base-color: $classic-secondary-color,
+  $ui-base-lighter-color: hsl(250deg, 24%, 75%),
+  $ui-secondary-color: $classic-base-color,
+
+  $ui-button-secondary-color: $grey-600,
+  $ui-button-secondary-border-color: $grey-600,
+  $ui-button-secondary-focus-color: $white,
+  $ui-button-tertiary-color: $blurple-500,
+  $ui-button-tertiary-border-color: $blurple-500,
+
+  $primary-text-color: $black,
+  $darker-text-color: $classic-base-color,
+  $lighter-text-color: $classic-base-color,
+  $highlight-text-color: $classic-highlight-color,
+  $dark-text-color: hsl(240deg, 16%, 32%),
+  $light-text-color: hsl(240deg, 16%, 32%),
+  $inverted-text-color: $black,
+
+  $action-button-color: hsl(240deg, 16%, 45%),
+  $emojis-requiring-inversion: 'chains'
+);

app/javascript/styles/mastodon/_functions.scss

@@ -0,0 +1,31 @@
+@use 'sass:color';
+@use 'sass:string';
+@use 'sass:meta';
+
+$darken-multiplier: -1 !default;
+$lighten-multiplier: 1 !default;
+
+// Invert darkened and lightened colors
+@function darken($color, $amount) {
+  @return color.adjust(
+    $color,
+    $lightness: $amount * $darken-multiplier,
+    $space: hsl
+  );
+}
+
+@function lighten($color, $amount) {
+  @return color.adjust(
+    $color,
+    $lightness: $amount * $lighten-multiplier,
+    $space: hsl
+  );
+}
+
+@function hex-color($color) {
+  @if meta.type-of($color) == 'color' {
+    $color: string.slice(color.ie-hex-str($color), 4);
+  }
+
+  @return '%23' + string.unquote($color);
+}

app/javascript/styles/mastodon/_mixins.scss

@@ -1,30 +1,33 @@
+@use 'sass:color';
+@use 'variables' as *;
+
 @mixin search-input {
   outline: 0;
   box-sizing: border-box;
   width: 100%;
   box-shadow: none;
   font-family: inherit;
-  background: var(--clr-bg-secondary);
+  background: var(--input-background-color);
-  color: var(--clr-text-primary);
+  color: $darker-text-color;
   border-radius: 4px;
-  border: 1px solid var(--clr-border-on-bg-secondary);
+  border: 1px solid var(--background-border-color);
   font-size: 17px;
   line-height: normal;
   margin: 0;
 }
 
 @mixin search-popout {
-  background: var(--clr-bg-elevated);
+  background: $simple-background-color;
   border-radius: 4px;
   padding: 10px 14px;
   padding-bottom: 14px;
   margin-top: 10px;
-  color: var(--clr-text-secondary);
+  color: $light-text-color;
-  box-shadow: 2px 4px 15px var(--clr-shadow-primary);
+  box-shadow: 2px 4px 15px color.change($base-shadow-color, $alpha: 0.4);
 
   h4 {
     text-transform: uppercase;
-    color: var(--clr-text-secondary);
+    color: $light-text-color;
     font-size: 13px;
     font-weight: 500;
     margin-bottom: 10px;
@@ -40,6 +43,6 @@
 
   em {
     font-weight: 500;
-    color: var(--clr-text-primary);
+    color: $inverted-text-color;
   }
 }

app/javascript/styles/mastodon/_variables.scss

@@ -1,3 +1,91 @@
+@use 'sass:color';
+@use 'functions' as *;
+
+// Commonly used web colors
+$black: #000; // Black
+$white: #fff; // White
+$red-600: #b7253d !default; // Deep Carmine
+$red-500: #df405a !default; // Cerise
+$blurple-600: #563acc; // Iris
+$blurple-500: #6364ff; // Brand purple
+$blurple-400: #7477fd; // Medium slate blue
+$blurple-300: #858afa; // Faded Blue
+$grey-600: hsl(240deg, 8%, 33%); // Trout
+$grey-100: hsl(240deg, 51%, 90%); // Topaz
+
+$success-green: #79bd9a !default; // Padua
+$error-red: $red-500 !default; // Cerise
+$warning-red: #ff5050 !default; // Sunset Orange
+$gold-star: #ca8f04 !default; // Dark Goldenrod
+
+$red-bookmark: $warning-red;
+
+// Values from the classic Mastodon UI
+$classic-base-color: hsl(240deg, 16%, 19%);
+$classic-primary-color: hsl(240deg, 29%, 70%);
+$classic-secondary-color: hsl(255deg, 25%, 88%);
+$classic-highlight-color: $blurple-500;
+
+// Variables for defaults in UI
+$base-shadow-color: $black !default;
+$base-overlay-background: $black !default;
+$base-border-color: $white !default;
+$simple-background-color: $white !default;
+$valid-value-color: $success-green !default;
+$error-value-color: $error-red !default;
+
+// Tell UI to use selected colors
+$ui-base-color: $classic-base-color !default; // Darkest
+$ui-base-lighter-color: lighten(
+  $ui-base-color,
+  26%
+) !default; // Lighter darkest
+$ui-primary-color: $classic-primary-color !default; // Lighter
+$ui-secondary-color: $classic-secondary-color !default; // Lightest
+$ui-highlight-color: $classic-highlight-color !default;
+$ui-button-color: $white !default;
+$ui-button-background-color: $blurple-500 !default;
+$ui-button-focus-background-color: $blurple-600 !default;
+$ui-button-focus-outline-color: $blurple-400 !default;
+$ui-button-focus-outline: solid 2px $ui-button-focus-outline-color !default;
+
+$ui-button-disabled-color: color.adjust(
+  $ui-button-background-color,
+  $alpha: -0.3
+) !default;
+
+$ui-button-secondary-color: $blurple-500 !default;
+$ui-button-secondary-border-color: $blurple-500 !default;
+$ui-button-secondary-focus-border-color: $blurple-300 !default;
+$ui-button-secondary-focus-color: $blurple-300 !default;
+
+$ui-button-tertiary-color: $blurple-300 !default;
+$ui-button-tertiary-border-color: $blurple-300 !default;
+$ui-button-tertiary-focus-background-color: $blurple-600 !default;
+$ui-button-tertiary-focus-color: $white !default;
+
+$ui-button-destructive-background-color: $red-500 !default;
+$ui-button-destructive-focus-background-color: $red-600 !default;
+
+$ui-button-icon-focus-outline: $ui-button-focus-outline !default;
+$ui-button-icon-hover-background-color: rgba(140, 141, 255, 40%) !default;
+
+// Variables for texts
+$primary-text-color: $white !default;
+$darker-text-color: $ui-primary-color !default;
+$dark-text-color: $ui-base-lighter-color !default;
+$secondary-text-color: $ui-secondary-color !default;
+$highlight-text-color: lighten($ui-highlight-color, 8%) !default;
+$action-button-color: $ui-base-lighter-color !default;
+$action-button-focus-color: lighten($ui-base-lighter-color, 4%) !default;
+$passive-text-color: $gold-star !default;
+$active-passive-text-color: $success-green !default;
+
+// For texts on inverted backgrounds
+$inverted-text-color: $ui-base-color !default;
+$lighter-text-color: $ui-base-lighter-color !default;
+$light-text-color: $ui-primary-color !default;
+
 // Keep this filter a SCSS variable rather than
 // a CSS Custom Property due to this Safari bug:
 // https://github.com/mdn/browser-compat-data/issues/25914#issuecomment-2676190245

app/javascript/styles/mastodon/about.scss

@@ -1,4 +1,5 @@
 @use 'variables' as *;
+@use 'functions' as *;
 
 $maximum-width: 1235px;
 $fluid-breakpoint: $maximum-width + 20px;
@@ -27,7 +28,7 @@ $fluid-breakpoint: $maximum-width + 20px;
 
   li {
     position: relative;
-    border-bottom: 1px solid var(--clr-border-primary);
+    border-bottom: 1px solid var(--background-border-color);
     padding: 1em 1.75em;
     padding-inline-start: 3em;
     font-weight: 500;
@@ -67,8 +68,8 @@ $fluid-breakpoint: $maximum-width + 20px;
       position: absolute;
       inset-inline-start: 0;
       top: 1em;
-      background: var(--clr-bg-accent-strong);
+      background: $highlight-text-color;
-      color: var(--clr-text-on-accent-strong);
+      color: $ui-base-color;
       border-radius: 50%;
       width: 4ch;
       height: 4ch;
@@ -84,13 +85,13 @@ $fluid-breakpoint: $maximum-width + 20px;
   }
 
   &__text {
-    color: var(--clr-text-primary);
+    color: $primary-text-color;
   }
 
   &__hint {
     font-size: 14px;
     font-weight: 400;
-    color: var(--clr-text-secondary);
+    color: $darker-text-color;
   }
 }
 
@@ -103,21 +104,21 @@ $fluid-breakpoint: $maximum-width + 20px;
   > label {
     font-size: 14px;
     font-weight: 600;
-    color: var(--clr-text-primary);
+    color: $primary-text-color;
   }
 
-  select {
+  > select {
     appearance: none;
     box-sizing: border-box;
     font-size: 14px;
-    color: var(--clr-text-primary);
+    color: $primary-text-color;
     display: block;
     width: 100%;
     outline: 0;
     font-family: inherit;
     resize: vertical;
-    background: var(--clr-bg-secondary);
+    background: $ui-base-color;
-    border: 1px solid var(--clr-border-primary);
+    border: 1px solid var(--background-border-color);
     border-radius: 4px;
     padding-inline-start: 10px;
     padding-inline-end: 30px;
@@ -127,4 +128,18 @@ $fluid-breakpoint: $maximum-width + 20px;
       font-size: 16px;
     }
   }
+
+  &::after {
+    display: block;
+    position: absolute;
+    width: 15px;
+    height: 15px;
+    content: '';
+    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14.933' height='18.467' viewBox='0 0 14.933 18.467'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='currentColor' /></svg>")
+      no-repeat 50% 50%;
+    mask-size: contain;
+    right: 8px;
+    background-color: lighten($ui-base-color, 12%);
+    pointer-events: none;
+  }
 }

app/javascript/styles/mastodon/accounts.scss

@@ -1,5 +1,6 @@
 @use 'sass:color';
 @use 'variables' as *;
+@use 'functions' as *;
 
 .card {
   & > a {
@@ -13,7 +14,7 @@
     &:active,
     &:focus {
       .card__bar {
-        background: var(--clr-bg-accent-subtle);
+        background: $ui-base-color;
       }
     }
   }
@@ -21,8 +22,8 @@
   &__img {
     height: 130px;
     position: relative;
-    background: var(--clr-bg-secondary);
+    background: $ui-base-color;
-    border: 1px solid var(--clr-border-primary);
+    border: 1px solid var(--background-border-color);
     border-bottom: none;
 
     img {
@@ -44,8 +45,8 @@
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    background: var(--clr-bg-primary);
+    background: var(--background-color);
-    border: 1px solid var(--clr-border-primary);
+    border: 1px solid var(--background-border-color);
     border-top: none;
 
     .avatar {
@@ -60,7 +61,7 @@
         display: block;
         margin: 0;
         border-radius: 4px;
-        background: var(--clr-bg-secondary);
+        background: darken($ui-base-color, 8%);
         object-fit: cover;
       }
     }
@@ -75,7 +76,7 @@
 
       strong {
         font-size: 15px;
-        color: var(--clr-text-primary);
+        color: $primary-text-color;
         font-weight: 500;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -84,7 +85,7 @@
       span {
         display: block;
         font-size: 14px;
-        color: var(--clr-text-secondary);
+        color: $darker-text-color;
         font-weight: 400;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -105,7 +106,7 @@
   .page,
   .gap {
     font-size: 14px;
-    color: var(--clr-text-primary);
+    color: $primary-text-color;
     font-weight: 500;
     display: inline-block;
     padding: 6px 10px;
@@ -113,9 +114,9 @@
   }
 
   .current {
-    color: var(--clr-bg-inverted);
+    background: $simple-background-color;
-    background: var(--clr-text-on-inverted);
     border-radius: 100px;
+    color: $inverted-text-color;
     cursor: default;
     margin: 0 10px;
   }
@@ -127,7 +128,7 @@
   .older,
   .newer {
     text-transform: uppercase;
-    color: var(--clr-text-primary);
+    color: $secondary-text-color;
   }
 
   .older {
@@ -142,7 +143,7 @@
 
   .disabled {
     cursor: default;
-    color: var(--clr-text-disabled);
+    color: lighten($inverted-text-color, 10%);
   }
 
   @media screen and (width <= 700px) {
@@ -160,8 +161,9 @@
 }
 
 .nothing-here {
-  color: var(--clr-text-secondary);
+  background: $ui-base-color;
-  background: var(--clr-bg-primary);
+  box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
+  color: $darker-text-color;
   font-size: 14px;
   font-weight: 500;
   text-align: center;
@@ -172,15 +174,6 @@
   border-radius: 4px;
   padding: 20px;
   min-height: 30vh;
-  border: 1px solid var(--clr-border-primary);
-
-  @media screen and (min-width: ($no-gap-breakpoint - 1)) {
-    border-top: 0;
-  }
-
-  &--no-toolbar {
-    border-top: 1px solid var(--clr-border-primary);
-  }
 
   &--under-tabs {
     border-radius: 0 0 4px 4px;
@@ -203,7 +196,7 @@
   font-size: 12px;
   line-height: 12px;
   font-weight: 500;
-  color: var(--clr-text-primary);
+  color: $ui-secondary-color;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -213,24 +206,16 @@
 .simple_form .overridden,
 .simple_form .recommended,
 .simple_form .not_recommended {
-  background-color: var(--clr-bg-secondary);
+  background-color: color.change($ui-secondary-color, $alpha: 0.1);
-  border: 1px solid var(--clr-border-primary);
+  border: 1px solid color.change($ui-secondary-color, $alpha: 0.5);
-}
-
-.information-badge {
-  &.superapp {
-    color: var(--clr-text-success);
-    background-color: var(--clr-bg-success-subtle);
-    border-color: var(--clr-border-on-bg-success-subtle);
-  }
 }
 
 .account-role {
   display: inline-flex;
   padding: 4px;
   padding-inline-end: 8px;
-  border: 1px solid var(--clr-text-accent);
+  border: 1px solid $highlight-text-color;
-  color: var(--clr-text-accent);
+  color: $highlight-text-color;
   font-weight: 500;
   font-size: 12px;
   letter-spacing: 0.5px;
@@ -253,10 +238,18 @@
   }
 }
 
+.information-badge {
+  &.superapp {
+    color: $success-green;
+    background-color: color.change($success-green, $alpha: 0.1);
+    border-color: color.change($success-green, $alpha: 0.5);
+  }
+}
+
 .simple_form .not_recommended {
-  color: var(--clr-text-error);
+  color: lighten($error-red, 12%);
-  background-color: var(--clr-bg-error-subtle);
+  background-color: rgba(lighten($error-red, 12%), 0.1);
-  border-color: var(--clr-border-on-bg-error-subtle);
+  border-color: rgba(lighten($error-red, 12%), 0.5);
 }
 
 .account__header__fields {
@@ -264,14 +257,14 @@
   padding: 0;
   margin: 15px -15px -15px;
   border: 0 none;
-  border-top: 1px solid var(--clr-border-primary);
+  border-top: 1px solid lighten($ui-base-color, 12%);
-  border-bottom: 1px solid var(--clr-border-primary);
+  border-bottom: 1px solid lighten($ui-base-color, 12%);
   font-size: 14px;
   line-height: 20px;
 
   dl {
     display: flex;
-    border-bottom: 1px solid var(--clr-border-primary);
+    border-bottom: 1px solid lighten($ui-base-color, 12%);
   }
 
   dt,
@@ -289,17 +282,17 @@
     font-weight: 500;
     width: 120px;
     flex: 0 0 auto;
-    color: var(--clr-text-primary);
+    color: $secondary-text-color;
-    background: var(--clr-bg-secondary);
+    background: rgba(darken($ui-base-color, 8%), 0.5);
   }
 
   dd {
     flex: 1 1 auto;
-    color: var(--clr-text-secondary);
+    color: $darker-text-color;
   }
 
   a {
-    color: var(--clr-text-accent);
+    color: $highlight-text-color;
     text-decoration: none;
 
     &:hover,
@@ -310,16 +303,16 @@
   }
 
   .verified {
-    border: 1px solid var(--clr-border-on-bg-success-subtle);
+    border: 1px solid color.change($valid-value-color, $alpha: 0.5);
-    background: var(--clr-bg-success-subtle);
+    background: color.change($valid-value-color, $alpha: 0.25);
 
     a {
-      color: var(--clr-text-success);
+      color: $valid-value-color;
       font-weight: 500;
     }
 
     &__mark {
-      color: var(--clr-text-success);
+      color: $valid-value-color;
     }
   }
 
@@ -334,10 +327,10 @@
 
 .pending-account {
   &__header {
-    color: var(--clr-text-secondary);
+    color: $darker-text-color;
 
     a {
-      color: var(--clr-text-primary);
+      color: $ui-secondary-color;
       text-decoration: none;
 
       &:hover,
@@ -348,7 +341,7 @@
     }
 
     strong {
-      color: var(--clr-text-primary);
+      color: $primary-text-color;
       font-weight: 700;
     }
 
@@ -363,7 +356,7 @@
 }
 
 .batch-table__row--muted {
-  color: var(--clr-text-tertiary);
+  color: lighten($ui-base-color, 26%);
 }
 
 .batch-table__row--muted .pending-account__header,
@@ -372,7 +365,7 @@
   &,
   a,
   strong {
-    color: var(--clr-text-tertiary);
+    color: lighten($ui-base-color, 26%);
   }
 }
 
@@ -384,12 +377,12 @@
   tbody td.accounts-table__extra,
   &__count,
   &__count small {
-    color: var(--clr-text-tertiary);
+    color: lighten($ui-base-color, 26%);
   }
 }
 
 .batch-table__row--attention {
-  color: var(--clr-text-warning);
+  color: $gold-star;
 }
 
 .batch-table__row--attention .pending-account__header,
@@ -398,7 +391,7 @@
   &,
   a,
   strong {
-    color: var(--clr-text-warning);
+    color: $gold-star;
   }
 }
 
@@ -406,6 +399,6 @@
   tbody td.accounts-table__extra,
   &__count,
   &__count small {
-    color: var(--clr-text-warning);
+    color: $gold-star;
   }
 }

app/javascript/styles/mastodon/annual_reports.scss

@@ -170,7 +170,7 @@
         }
 
         path:last-child {
-          stroke: var(--clr-graph-primary-stroke) !important;
+          stroke: var(--indigo-3) !important;
           fill: none !important;
         }
       }

app/javascript/styles/mastodon/basics.scss

@@ -1,4 +1,5 @@
 @use 'variables' as *;
+@use 'functions' as *;
 
 html.has-modal {
   &,
@@ -16,11 +17,11 @@ html.has-modal {
 
 body {
   font-family: $font-sans-serif, sans-serif;
-  background: var(--clr-bg-ambient);
+  background: var(--background-color);
   font-size: 13px;
   line-height: 18px;
   font-weight: 400;
-  color: var(--clr-text-primary);
+  color: $primary-text-color;
   text-rendering: optimizelegibility;
 
   // Disable kerning for Japanese text to preserve monospaced alignment for readability
@@ -117,7 +118,6 @@ body {
 
   &.admin {
     padding: 0;
-    background: var(--clr-bg-primary);
   }
 
   &.error {
@@ -157,7 +157,7 @@ body {
 a {
   &:focus {
     border-radius: 4px;
-    outline: var(--outline-focus-default);
+    outline: $ui-button-focus-outline;
   }
 
   &:focus:not(:focus-visible) {
@@ -212,7 +212,7 @@ button {
   font-size: 16px;
   font-weight: 400;
   line-height: 1.7;
-  color: var(--clr-text-error);
+  color: lighten($error-red, 4%);
   text-align: center;
 
   & > div {
@@ -228,7 +228,7 @@ button {
   }
 
   a {
-    color: var(--clr-text-accent);
+    color: $highlight-text-color;
 
     &:hover,
     &:focus,
@@ -238,11 +238,11 @@ button {
   }
 
   &__footer {
-    color: var(--clr-text-secondary);
+    color: $dark-text-color;
     font-size: 13px;
 
     a {
-      color: var(--clr-text-secondary);
+      color: $dark-text-color;
     }
   }
 
@@ -250,7 +250,7 @@ button {
     display: inline;
     border: 0;
     background: transparent;
-    color: var(--clr-text-secondary);
+    color: $dark-text-color;
     font: inherit;
     padding: 0;
     margin: 0;
@@ -267,7 +267,7 @@ button {
     }
 
     &.copied {
-      color: var(--mas-status-success-color);
+      color: $valid-value-color;
       transition: none;
     }
   }

app/javascript/styles/mastodon/branding.scss

@@ -1,5 +1,5 @@
 @use 'variables' as *;
 
 .logo {
-  color: var(--clr-text-primary);
+  color: $primary-text-color;
 }

app/javascript/styles/mastodon/containers.scss

@@ -27,7 +27,7 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      color: var(--clr-text-primary);
+      color: $primary-text-color;
       text-decoration: none;
       outline: 0;
       padding: 12px 16px;
@@ -65,7 +65,7 @@
   padding: 20px 0;
   margin-top: 40px;
   margin-bottom: 10px;
-  border-bottom: 1px solid var(--clr-border-primary);
+  border-bottom: 1px solid var(--background-border-color);
 
   @media screen and (width <= 440px) {
     width: 100%;
@@ -89,7 +89,7 @@
 
   .name {
     flex: 1 1 auto;
-    color: var(--clr-text-primary);
+    color: $secondary-text-color;
 
     .username {
       display: block;
@@ -97,7 +97,7 @@
       line-height: 24px;
       text-overflow: ellipsis;
       overflow: hidden;
-      color: var(--clr-text-primary);
+      color: $primary-text-color;
     }
   }
 
@@ -148,7 +148,7 @@
     }
 
     a {
-      color: var(--clr-text-accent);
+      color: $highlight-text-color;
       font-weight: 500;
       text-decoration: none;
 

app/javascript/styles/mastodon/css_variables.scss

@@ -1,206 +1,42 @@
-@use 'theme_utils' as utils;
+@use 'sass:color';
+@use 'functions' as *;
+@use 'variables' as *;
 
 :root {
-  --clr-black: #000;
+  --dropdown-border-color: #{lighten($ui-base-color, 4%)};
-  --clr-grey-950: #181821;
+  --dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)};
-  --clr-grey-800: #292938;
-  --clr-grey-700: #444664;
-  --clr-grey-600: #545778;
-  --clr-grey-500: #696d91;
-  --clr-grey-400: #8b8dac;
-  --clr-grey-300: #b4b6cb;
-  --clr-grey-200: #d8d9e3;
-  --clr-grey-100: #f0f0f5;
-  --clr-grey-50: #f0f1ff;
-  --clr-white: #fff;
-  --clr-indigo-600: #6147e6;
-  --clr-indigo-400: #8886ff;
-  --clr-indigo-300: #a5abfd;
-  --clr-indigo-200: #c8cdfe;
-  --clr-indigo-100: #e0e3ff;
-  --clr-indigo-50: #f0f1ff;
-  --clr-red-500: #ff637e;
-  --clr-red-600: #ec003f;
-  --clr-yellow-400: #ffb900;
-  --clr-yellow-600: #e17100;
-  --clr-green-400: #05df72;
-  --clr-green-600: #00a63e;
-
-  /* TEXT TOKENS */
-
-  --clr-text-primary: var(--clr-grey-50);
-  --clr-text-secondary: var(--clr-grey-400);
-  --clr-text-tertiary: var(--clr-grey-500);
-  --clr-text-on-inverted: var(--clr-grey-950);
-  --clr-text-accent: var(--clr-indigo-400);
-  --clr-text-accent-subtle: color-mix(
-    in oklab,
-    var(--clr-text-primary),
-    var(--clr-text-accent)
-  );
-  --clr-text-on-accent-strong: var(--clr-white);
-  --clr-text-error: var(--clr-red-500);
-  --clr-text-on-error-strong: var(--clr-white);
-  --clr-text-warning: var(--clr-yellow-400);
-  --clr-text-on-warning-strong: var(--clr-white);
-  --clr-text-success: var(--clr-green-400);
-  --clr-text-on-success-strong: var(--clr-white);
-  --clr-text-disabled: var(--clr-grey-600);
-  --clr-text-on-disabled: var(--clr-grey-400);
-  --clr-text-bookmark-highlight: var(--clr-text-error);
-  --clr-text-favourite-highlight: var(--clr-text-warning);
-  --clr-text-on-media: var(--clr-white);
-  --clr-text-status-links: color-mix(
-    in oklab,
-    var(--clr-text-primary),
-    var(--clr-text-secondary)
-  );
-
-  /* BACKGROUND TOKENS */
-
-  --clr-bg-primary: var(--clr-grey-950);
-  --clr-bg-secondary-base: var(--clr-indigo-200);
-  --clr-bg-secondary-strength: 10%;
-  --clr-bg-secondary: #{utils.css-alpha(
-      var(--clr-bg-secondary-base),
-      var(--clr-bg-secondary-strength)
-    )};
-  --clr-bg-secondary-solid: color-mix(
-    in srgb,
-    var(--clr-bg-primary),
-    var(--clr-bg-secondary-base) var(--clr-bg-secondary-strength)
-  );
-
-  /* Secondary with doubled mix amount */
-  --clr-bg-tertiary: color-mix(
-    in oklab,
-    var(--clr-bg-primary),
-    var(--clr-bg-secondary-base) calc(2 * var(--clr-bg-secondary-strength))
-  );
-  --clr-bg-ambient: var(--clr-bg-primary);
-  --clr-bg-elevated: var(--clr-grey-800);
-  --clr-bg-inverted: var(--clr-grey-50);
-  --clr-bg-media-base: var(--clr-black);
-  --clr-bg-media-strength: 65%;
-  --clr-bg-media: #{utils.css-alpha(
-      var(--clr-bg-media-base),
-      var(--clr-bg-media-strength)
-    )};
-  --clr-bg-overlay: var(--clr-bg-primary);
-  --clr-bg-disabled: var(--clr-grey-700);
-  --clr-bg-accent-subtle-base: var(--clr-indigo-400);
-  --clr-bg-accent-subtle-strength: 10%;
-  --clr-bg-accent-subtle: #{utils.css-alpha(
-      var(--clr-bg-accent-subtle-base),
-      var(--clr-bg-accent-subtle-strength)
-    )};
-  --clr-bg-accent-subtle-highlighted: #{utils.css-alpha(
-      var(--clr-bg-accent-subtle-base),
-      calc(var(--clr-bg-accent-subtle-strength) * 1.5)
-    )};
-  --clr-bg-accent-strong: var(--clr-indigo-600);
-  --clr-bg-accent-strong-highlighted: color-mix(
-    in oklab,
-    var(--clr-bg-accent-strong),
-    black var(--clr-bg-accent-subtle-strength)
-  );
-  --clr-bg-error-subtle-base: #f41b3b;
-  --clr-bg-error-subtle-strength: 12%;
-  --clr-bg-error-subtle: #{utils.css-alpha(
-      var(--clr-bg-error-subtle-base),
-      var(--clr-bg-error-subtle-strength)
-    )};
-  --clr-bg-error-strong: var(--clr-red-600);
-  --clr-bg-error-strong-highlighted: color-mix(
-    in oklab,
-    var(--clr-bg-error-strong),
-    black var(--clr-bg-error-subtle-strength)
-  );
-  --clr-bg-warning-subtle-base: #ffca1b;
-  --clr-bg-warning-subtle-strength: 10%;
-  --clr-bg-warning-subtle: #{utils.css-alpha(
-      var(--clr-bg-warning-subtle-base),
-      var(--clr-bg-warning-subtle-strength)
-    )};
-  --clr-bg-warning-strong: var(--clr-yellow-600);
-  --clr-bg-warning-strong-highlighted: color-mix(
-    in oklab,
-    var(--clr-bg-warning-strong),
-    black var(--clr-bg-warning-subtle-strength)
-  );
-  --clr-bg-success-subtle-base: #17e865;
-  --clr-bg-success-subtle-strength: 15%;
-  --clr-bg-success-subtle: #{utils.css-alpha(
-      var(--clr-bg-success-subtle-base),
-      var(--clr-bg-success-subtle-strength)
-    )};
-  --clr-bg-success-strong: var(--clr-green-600);
-  --clr-bg-success-strong-highlighted: color-mix(
-    in oklab,
-    var(--clr-bg-success-strong),
-    black var(--clr-bg-success-subtle-strength)
-  );
-
-  /* BORDER TOKENS */
-
-  --clr-border-primary-base: var(--clr-indigo-200);
-  --clr-border-primary-strength: 18%;
-  --clr-border-primary: #{utils.css-alpha(
-      var(--clr-border-primary-base),
-      var(--clr-border-primary-strength)
-    )};
-  --clr-border-media: rgb(252 248 255 / 15%);
-  --clr-border-on-bg-secondary: #{utils.css-alpha(
-      var(--clr-border-primary-base),
-      calc(var(--clr-border-primary-strength) / 1.5)
-    )};
-  --clr-border-on-bg-accent-subtle: var(--clr-border-primary);
-  --clr-border-on-bg-error-subtle: #{utils.css-alpha(
-      var(--clr-text-error),
-      50%
-    )};
-  --clr-border-on-bg-warning-subtle: #{utils.css-alpha(
-      var(--clr-text-warning),
-      50%
-    )};
-  --clr-border-on-bg-success-subtle: #{utils.css-alpha(
-      var(--clr-text-success),
-      50%
-    )};
-  --clr-border-on-bg-inverted: var(--clr-border-primary);
-
-  /* SHADOW TOKENS */
-
-  --clr-shadow-primary-base: var(--clr-black);
-  --clr-shadow-primary-strength: 80%;
-  --clr-shadow-primary: #{utils.css-alpha(
-      var(--clr-shadow-primary-base),
-      var(--clr-shadow-primary-strength)
-    )};
   --dropdown-shadow:
-    0 20px 25px -5px var(--clr-shadow-primary),
+    0 20px 25px -5px #{color.change($base-shadow-color, $alpha: 0.25)},
-    0 8px 10px -6px var(--clr-shadow-primary);
+    0 8px 10px -6px #{color.change($base-shadow-color, $alpha: 0.25)};
-  --overlay-icon-shadow: drop-shadow(0 0 8px var(--clr-shadow-primary));
+  --modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)};
-
+  --modal-background-variant-color: #{color.change($ui-base-color, $alpha: 0.7)};
-  /* GRAPHS/CHARTS TOKENS */
+  --modal-border-color: #{lighten($ui-base-color, 4%)};
-
+  --background-border-color: #{lighten($ui-base-color, 4%)};
-  --clr-graph-primary-stroke: var(--clr-text-accent);
+  --background-color: #{darken($ui-base-color, 8%)};
-  --clr-graph-primary-fill: var(--clr-bg-accent-subtle);
+  --background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)};
-  --clr-graph-warning-stroke: var(--clr-text-warning);
+  --surface-background-color: #{darken($ui-base-color, 4%)};
-  --clr-graph-warning-fill: var(--clr-bg-warning-subtle);
+  --surface-variant-background-color: #{$ui-base-color};
-  --clr-graph-disabled-stroke: var(--clr-text-disabled);
+  --surface-variant-active-background-color: #{lighten($ui-base-color, 4%)};
-  --clr-graph-disabled-fill: var(--clr-bg-disabled);
+  --surface-border-color: #{lighten($ui-base-color, 8%)};
-
+  --on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.5)};
-  /* LEGACY TOKENS */
-
-  --rich-text-container-color: rgb(87 24 60 / 100%);
-  --rich-text-text-color: rgb(255 175 212 / 100%);
-  --rich-text-decorations-color: rgb(128 58 95 / 100%);
-
-  /* MISCELLANEOUS */
-
-  --outline-focus-default: 2px solid var(--clr-text-accent);
   --avatar-border-radius: 8px;
+  --media-outline-color: #{rgba(#fcf8ff, 0.15)};
+  --overlay-icon-shadow: drop-shadow(
+    0 0 8px #{color.change($base-shadow-color, $alpha: 0.35)}
+  );
+  --error-background-color: #{darken($error-red, 16%)};
+  --error-active-background-color: #{darken($error-red, 12%)};
+  --on-error-color: #fff;
+  --rich-text-container-color: rgba(87, 24, 60, 100%);
+  --rich-text-text-color: rgba(255, 175, 212, 100%);
+  --rich-text-decorations-color: rgba(128, 58, 95, 100%);
+  --nested-card-background: color(from #{$ui-highlight-color} srgb r g b / 5%);
+  --nested-card-text: #{$secondary-text-color};
+  --nested-card-border: 1px solid
+    color(from #{$ui-highlight-color} srgb r g b / 15%);
+  --input-placeholder-color: #{$dark-text-color};
+  --input-background-color: var(--surface-variant-background-color);
+  --on-input-color: #{$secondary-text-color};
 }
 
 body {

app/javascript/styles/mastodon/dashboard.scss

@@ -1,3 +1,4 @@
+@use 'functions' as *;
 @use 'variables' as *;
 
 .dashboard__counters {
@@ -15,9 +16,9 @@
     & > div,
     & > a {
       padding: 20px;
-      background: var(--clr-bg-primary);
+      background: var(--background-color);
       border-radius: 4px;
-      border: 1px solid var(--clr-border-primary);
+      border: 1px solid var(--background-border-color);
       box-sizing: border-box;
       height: 100%;
     }
@@ -30,7 +31,7 @@
       &:hover,
       &:focus,
       &:active {
-        background: var(--clr-bg-accent-subtle);
+        background: $ui-base-color;
       }
     }
   }
@@ -40,7 +41,7 @@
     text-align: center;
     font-weight: 500;
     font-size: 24px;
-    color: var(--clr-text-primary);
+    color: $primary-text-color;
     margin-bottom: 20px;
     line-height: 30px;
   }
@@ -51,7 +52,7 @@
 
   &__label {
     font-size: 14px;
-    color: var(--clr-text-secondary);
+    color: $darker-text-color;
     text-align: center;
     font-weight: 500;
   }
@@ -84,8 +85,8 @@
     display: flex;
     align-items: baseline;
     border-radius: 4px;
-    background: var(--clr-bg-accent-strong);
+    background: $ui-button-background-color;
-    color: var(--clr-text-on-accent-strong);
+    color: $primary-text-color;
     transition: all 100ms ease-in;
     font-size: 14px;
     padding: 8px 16px;
@@ -95,18 +96,18 @@
     &:active,
     &:focus,
     &:hover {
-      background-color: var(--clr-bg-accent-strong-highlighted);
+      background-color: $ui-button-focus-background-color;
       transition: all 200ms ease-out;
     }
 
     &.positive {
-      background: var(--clr-bg-success-subtle);
+      background: lighten($ui-base-color, 4%);
-      color: var(--clr-text-success);
+      color: $valid-value-color;
     }
 
     &.negative {
-      background: var(--clr-bg-error-subtle);
+      background: lighten($ui-base-color, 4%);
-      color: var(--clr-text-error);
+      color: $error-value-color;
     }
 
     span {

app/javascript/styles/mastodon/emoji_picker.scss

@@ -1,4 +1,5 @@
 @use 'variables' as *;
+@use 'functions' as *;
 
 .emoji-mart {
   font-size: 13px;
@@ -17,8 +18,7 @@
 
 .emoji-mart-bar {
   &:first-child {
-    background: var(--clr-bg-tertiary);
+    background: var(--dropdown-border-color);
-    border-bottom: 1px solid var(--clr-border-primary);
   }
 }
 
@@ -39,22 +39,18 @@
   cursor: pointer;
   background: transparent;
   border: 0;
-  color: var(--clr-text-secondary);
+  color: $darker-text-color;
 
   &:hover {
-    color: color-mix(
+    color: lighten($darker-text-color, 4%);
-      in oklab,
-      var(--clr-text-primary),
-      var(--clr-text-secondary)
-    );
   }
 }
 
 .emoji-mart-anchor-selected {
-  color: var(--clr-text-accent);
+  color: $highlight-text-color;
 
   &:hover {
-    color: var(--clr-text-accent-subtle);
+    color: lighten($highlight-text-color, 4%);
   }
 
   .emoji-mart-anchor-bar {
@@ -68,7 +64,7 @@
   inset-inline-start: 0;
   width: 100%;
   height: 4px;
-  background-color: var(--clr-text-accent);
+  background-color: $highlight-text-color;
 }
 
 .emoji-mart-anchors {
@@ -105,9 +101,9 @@
     font-family: inherit;
     display: block;
     width: 100%;
-    background: var(--clr-bg-secondary);
+    background: $ui-base-color;
-    color: var(--clr-text-secondary);
+    color: $darker-text-color;
-    border: 1px solid var(--clr-border-primary);
+    border: 1px solid var(--background-border-color);
     border-radius: 4px;
 
     &::-moz-focus-inner {
@@ -137,6 +133,7 @@
   transition: all 100ms linear;
   transition-property: opacity;
   pointer-events: auto;
+  opacity: 0.7;
 
   &:disabled {
     cursor: default;
@@ -144,7 +141,7 @@
   }
 
   svg {
-    fill: currentColor;
+    fill: $darker-text-color;
   }
 }
 
@@ -168,7 +165,7 @@
     inset-inline-start: 0;
     width: 100%;
     height: 100%;
-    background-color: var(--clr-bg-accent-subtle);
+    background-color: var(--dropdown-border-color);
     border-radius: 100%;
   }
 }
@@ -228,7 +225,7 @@
 
 .emoji-mart-no-results {
   font-size: 14px;
-  color: var(--clr-text-tertiary);
+  color: $dark-text-color;
   text-align: center;
   padding: 5px 6px;
   padding-top: 70px;

app/javascript/styles/mastodon/forms.scss

@@ -1,5 +1,6 @@
 @use 'sass:color';
 @use 'variables' as *;
+@use 'functions' as *;
 
 code {
   font-family: $font-monospace, monospace;
@@ -15,7 +16,7 @@ code {
 
 .form-section {
   border-radius: 8px;
-  background: var(--clr-bg-secondary);
+  background: var(--surface-background-color);
   padding: 24px;
   margin-bottom: 24px;
 }
@@ -32,7 +33,7 @@ code {
     display: block;
     background: linear-gradient(
       to bottom,
-      var(--clr-bg-secondary-solid),
+      var(--surface-background-color),
       transparent
     );
     position: absolute;
@@ -57,16 +58,14 @@ code {
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  color: var(--clr-text-primary);
+  color: $primary-text-color;
 
   &.success {
-    color: var(--clr-text-on-success-strong);
+    background: $success-green;
-    background: var(--clr-bg-success-strong);
   }
 
   &.failure {
-    color: var(--clr-text-on-error-strong);
+    background: $error-red;
-    background: var(--clr-bg-error-strong);
   }
 }
 
@@ -127,7 +126,7 @@ code {
         font-family: inherit;
         font-size: 14px;
         padding-top: 5px;
-        color: var(--clr-text-primary);
+        color: $primary-text-color;
         display: block;
         width: auto;
       }
@@ -148,7 +147,7 @@ code {
       }
 
       label a {
-        color: var(--clr-text-accent);
+        color: $highlight-text-color;
         text-decoration: underline;
 
         &:hover,
@@ -190,7 +189,7 @@ code {
   .lead {
     font-size: 17px;
     line-height: 22px;
-    color: var(--clr-text-primary);
+    color: $secondary-text-color;
     margin-bottom: 30px;
 
     &.invited-by {
@@ -198,7 +197,7 @@ code {
     }
 
     a {
-      color: var(--clr-text-accent);
+      color: $highlight-text-color;
     }
   }
 
@@ -209,16 +208,16 @@ code {
   }
 
   .hint {
-    color: var(--clr-text-secondary);
+    color: $darker-text-color;
 
     a {
-      color: var(--clr-text-accent);
+      color: $highlight-text-color;
     }
 
     code {
       border-radius: 3px;
       padding: 0.2em 0.4em;
-      background: var(--clr-bg-secondary);
+      background: darken($ui-base-color, 12%);
     }
 
     li {
@@ -243,7 +242,7 @@ code {
 
   p.hint {
     margin-bottom: 15px;
-    color: var(--clr-text-secondary);
+    color: $darker-text-color;
 
     &.subtle-hint {
       text-align: center;
@@ -279,7 +278,7 @@ code {
       & > label {
         font-family: inherit;
         font-size: 14px;
-        color: var(--clr-text-primary);
+        color: $primary-text-color;
         font-weight: 500;
         min-width: 150px;
         flex: 0 0 auto;
@@ -301,7 +300,7 @@ code {
     .label_input > label {
       font-family: inherit;
       font-size: 14px;
-      color: var(--clr-text-primary);
+      color: $primary-text-color;
       display: block;
       margin-bottom: 8px;
       overflow-wrap: break-word;
@@ -323,7 +322,7 @@ code {
     & > label {
       font-family: inherit;
       font-size: 14px;
-      color: var(--clr-text-primary);
+      color: $primary-text-color;
       display: block;
       font-weight: 600;
       line-height: 20px;
@@ -382,7 +381,7 @@ code {
 
   .required abbr {
     text-decoration: none;
-    color: var(--clr-text-error);
+    color: lighten($error-value-color, 12%);
   }
 
   .fields-group {
@@ -475,7 +474,7 @@ code {
     margin-bottom: 5px;
     font-family: inherit;
     font-size: 14px;
-    color: var(--clr-text-primary);
+    color: $primary-text-color;
     display: block;
     width: auto;
   }
@@ -485,7 +484,7 @@ code {
       label {
         font-family: inherit;
         font-size: 14px;
-        color: var(--clr-text-primary);
+        color: $primary-text-color;
         display: inline-block;
         width: auto;
         position: relative;
@@ -506,7 +505,7 @@ code {
   .input.static .label_input__wrapper {
     font-size: 14px;
     padding: 10px;
-    border: 1px solid var(--clr-border-primary);
+    border: 1px solid $dark-text-color;
     border-radius: 4px;
   }
 
@@ -520,14 +519,14 @@ code {
     box-sizing: border-box;
     font-size: 14px;
     line-height: 20px;
-    color: var(--clr-text-primary);
+    color: $primary-text-color;
     display: block;
     width: 100%;
     outline: 0;
     font-family: inherit;
     resize: vertical;
-    background: var(--clr-bg-secondary);
+    background: $ui-base-color;
-    border: 1px solid var(--clr-border-primary);
+    border: 1px solid var(--background-border-color);
     border-radius: 4px;
     padding: 10px 16px;
 
@@ -536,7 +535,7 @@ code {
     }
 
     &:required:valid {
-      border-color: var(--clr-text-success);
+      border-color: $valid-value-color;
     }
 
     @media screen and (width <= 600px) {
@@ -551,13 +550,13 @@ code {
   input[type='datetime-local'] {
     &:focus:invalid:not(:placeholder-shown),
     &:required:invalid:not(:placeholder-shown) {
-      border-color: var(--clr-text-error);
+      border-color: lighten($error-red, 12%);
     }
   }
 
   .input.field_with_errors {
     label {
-      color: var(--clr-text-error);
+      color: lighten($error-red, 12%);
     }
 
     input[type='text'],
@@ -567,13 +566,13 @@ code {
     input[type='datetime-local'],
     textarea,
     select {
-      border-color: var(--clr-text-error);
+      border-color: lighten($error-red, 12%);
     }
 
     .error {
       display: block;
       font-weight: 500;
-      color: var(--clr-text-error);
+      color: lighten($error-red, 12%);
       margin-top: 4px;
     }
   }
@@ -606,8 +605,8 @@ code {
     width: 100%;
     border: 0;
     border-radius: 4px;
-    background: var(--clr-bg-accent-strong);
+    background: $ui-button-background-color;
-    color: var(--clr-text-on-accent-strong);
+    color: $ui-button-color;
     font-size: 15px;
     line-height: 22px;
     height: auto;
@@ -626,22 +625,21 @@ code {
     &:active,
     &:focus,
     &:hover {
-      background: var(--clr-bg-accent-strong-highlighted);
+      background-color: $ui-button-focus-background-color;
     }
 
     &:disabled,
     &:disabled:hover {
-      color: var(--clr-text-on-disabled);
+      background-color: $ui-button-disabled-color;
-      background: var(--clr-bg-disabled);
     }
 
     &.negative {
-      background: var(--clr-bg-error-strong);
+      background: $ui-button-destructive-background-color;
 
       &:hover,
       &:active,
       &:focus {
-        background: var(--clr-bg-error-strong-highlighted);
+        background-color: $ui-button-destructive-focus-background-color;
       }
     }
   }
@@ -650,14 +648,16 @@ code {
     appearance: none;
     box-sizing: border-box;
     font-size: 14px;
-    color: var(--clr-text-primary);
+    color: $primary-text-color;
     display: block;
     width: 100%;
     outline: 0;
     font-family: inherit;
     resize: vertical;
-    background: var(--clr-bg-secondary);
+    background: $ui-base-color
-    border: 1px solid var(--clr-border-primary);
+      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
+      no-repeat right 8px center / auto 14px;
+    border: 1px solid var(--background-border-color);
     border-radius: 4px;
     padding-inline-start: 10px;
     padding-inline-end: 30px;
@@ -695,7 +695,7 @@ code {
       top: 1px;
       padding: 10px;
       font-size: 14px;
-      color: var(--clr-text-tertiary);
+      color: $dark-text-color;
       font-family: inherit;
       pointer-events: none;
       cursor: default;
@@ -721,29 +721,6 @@ code {
   }
 }
 
-/* Double-chevron icon for custom select components */
-.select-wrapper,
-.select .label_input__wrapper {
-  width: 100%;
-
-  &::after {
-    --icon-size: 11px;
-
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    inset-inline-end: 9px;
-    width: var(--icon-size);
-    background-color: var(--clr-text-tertiary);
-    pointer-events: none;
-    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='black'/></svg>");
-    mask-position: right center;
-    mask-size: var(--icon-size);
-    mask-repeat: no-repeat;
-  }
-}
-
 .block-icon {
   display: block;
   margin: 0 auto;
@@ -752,30 +729,30 @@ code {
 }
 
 .flash-message {
-  color: var(--clr-text-accent);
+  background: var(--background-color);
-  background: transparent;
+  color: $highlight-text-color;
-  border: 1px solid var(--clr-text-accent);
+  border: 1px solid $highlight-text-color;
   border-radius: 4px;
   padding: 15px 10px;
   margin-bottom: 30px;
   text-align: center;
 
   &.notice {
-    border: 1px solid var(--clr-border-on-bg-success-subtle);
+    border: 1px solid color.change($valid-value-color, $alpha: 0.5);
-    background: var(--clr-bg-success-subtle);
+    background: color.change($valid-value-color, $alpha: 0.25);
-    color: var(--clr-text-success);
+    color: $valid-value-color;
   }
 
   &.warning {
-    border: 1px solid var(--clr-border-on-bg-warning-subtle);
+    border: 1px solid color.change($gold-star, $alpha: 0.5);
-    background: var(--clr-bg-warning-subtle);
+    background: color.change($gold-star, $alpha: 0.25);
-    color: var(--clr-text-warning);
+    color: $gold-star;
   }
 
   &.alert {
-    border: 1px solid var(--clr-border-on-bg-error-subtle);
+    border: 1px solid color.change($error-value-color, $alpha: 0.5);
-    background: var(--clr-bg-error-subtle);
+    background: color.change($error-value-color, $alpha: 0.1);
-    color: var(--clr-text-error);
+    color: $error-value-color;
   }
 
   &.hidden {
@@ -790,11 +767,11 @@ code {
 
   a {
     display: inline-block;
-    color: var(--clr-text-secondary);
+    color: $darker-text-color;
     text-decoration: none;
 
     &:hover {
-      color: var(--clr-text-primary);
+      color: $primary-text-color;
       text-decoration: underline;
     }
   }
@@ -824,8 +801,8 @@ code {
     border: 0;
     padding: 10px;
     font-family: $font-monospace, monospace;
-    background: var(--clr-bg-secondary);
+    background: $ui-base-color;
-    color: var(--clr-text-primary);
+    color: $primary-text-color;
     font-size: 14px;
     margin: 0;
 
@@ -840,7 +817,7 @@ code {
     }
 
     &:focus {
-      background: var(--clr-bg-accent-subtle);
+      background: lighten($ui-base-color, 4%);
     }
   }
 
@@ -896,7 +873,7 @@ code {
   text-align: center;
 
   a {
-    color: var(--clr-text-secondary);
+    color: $darker-text-color;
     text-decoration: none;
 
     &:hover {
@@ -916,7 +893,7 @@ code {
   }
 
   a {
-    color: var(--clr-text-accent);
+    color: $highlight-text-color;
     text-transform: uppercase;
     text-decoration: none;
     font-weight: 700;
@@ -924,7 +901,7 @@ code {
     &:hover,
     &:focus,
     &:active {
-      color: var(--clr-text-accent-subtle);
+      color: lighten($highlight-text-color, 8%);
     }
   }
 }
@@ -932,7 +909,7 @@ code {
 .oauth-prompt,
 .follow-prompt {
   margin-bottom: 30px;
-  color: var(--clr-text-secondary);
+  color: $darker-text-color;
 
   h2 {
     font-size: 16px;
@@ -941,7 +918,7 @@ code {
   }
 
   strong {
-    color: var(--clr-text-primary);
+    color: $secondary-text-color;
     font-weight: 500;
 
     @each $lang in $cjk-langs {
@@ -954,7 +931,7 @@ code {
 
 .oauth-prompt {
   h3 {
-    color: var(--clr-text-primary);
+    color: $ui-secondary-color;
     font-size: 17px;
     line-height: 22px;
     font-weight: 500;
@@ -968,9 +945,9 @@ code {
   }
 
   .permissions-list {
-    border: 1px solid var(--clr-border-primary);
+    border: 1px solid $ui-base-color;
     border-radius: 4px;
-    background: var(--clr-bg-secondary);
+    background: darken($ui-base-color, 4%);
     margin-bottom: 30px;
   }
 
@@ -996,10 +973,10 @@ code {
 
 .qr-code {
   flex: 0 0 auto;
-  background: white;
+  background: $simple-background-color;
   padding: 4px;
   margin: 0 10px 20px 0;
-  box-shadow: 0 0 15px var(--clr-shadow-primary);
+  box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
   display: inline-block;
 
   svg {
@@ -1010,7 +987,7 @@ code {
 
 .qr-alternative {
   margin-bottom: 20px;
-  color: var(--clr-text-primary);
+  color: $secondary-text-color;
   flex: 150px;
 
   samp {
@@ -1019,6 +996,42 @@ code {
   }
 }
 
+.simple_form {
+  .warning {
+    box-sizing: border-box;
+    background: color.change($error-value-color, $alpha: 0.5);
+    color: $primary-text-color;
+    text-shadow: 1px 1px 0 color.change($base-shadow-color, $alpha: 0.3);
+    box-shadow: 0 2px 6px color.change($base-shadow-color, $alpha: 0.4);
+    border-radius: 4px;
+    padding: 10px;
+    margin-bottom: 15px;
+
+    a {
+      color: $primary-text-color;
+      text-decoration: underline;
+
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: none;
+      }
+    }
+
+    strong {
+      font-weight: 600;
+      display: block;
+      margin-bottom: 5px;
+
+      @each $lang in $cjk-langs {
+        &:lang(#{$lang}) {
+          font-weight: 700;
+        }
+      }
+    }
+  }
+}
+
 .action-pagination {
   display: flex;
   flex-wrap: wrap;
@@ -1038,7 +1051,7 @@ code {
 
 .post-follow-actions {
   text-align: center;
-  color: var(--clr-text-secondary);
+  color: $darker-text-color;
 
   div {
     margin-bottom: 4px;
@@ -1051,7 +1064,7 @@ code {
 
   h4 {
     font-size: 16px;
-    color: var(--clr-text-primary);
+    color: $primary-text-color;
     text-align: center;
     margin-bottom: 20px;
     border: 0;
@@ -1064,7 +1077,7 @@ code {
 }
 
 .scope-danger {
-  color: var(--clr-text-error);
+  color: $warning-red;
 }
 
 .form_admin_settings_site_short_description,
@@ -1079,9 +1092,8 @@ code {
 }
 
 .input-copy {
-  color: var(--clr-text-primary);
+  background: darken($ui-base-color, 10%);
-  background: var(--clr-bg-secondary);
+  border: 1px solid darken($ui-base-color, 14%);
-  border: 1px solid var(--clr-border-primary);
   border-radius: 4px;
   display: flex;
   align-items: center;
@@ -1115,11 +1127,11 @@ code {
   }
 
   &.copied {
-    border-color: var(--clr-text-success);
+    border-color: $valid-value-color;
     transition: none;
 
     button {
-      background: var(--clr-bg-success-strong);
+      background: $valid-value-color;
       transition: none;
     }
   }
@@ -1141,8 +1153,8 @@ code {
 .permissions-list {
   &__item {
     padding: 15px;
-    color: var(--clr-text-primary);
+    color: $ui-secondary-color;
-    border-bottom: 1px solid var(--clr-border-primary);
+    border-bottom: 1px solid lighten($ui-base-color, 4%);
     display: flex;
     align-items: center;
 
@@ -1154,7 +1166,7 @@ code {
       }
 
       &__type {
-        color: var(--clr-text-secondary);
+        color: $darker-text-color;
         overflow-wrap: anywhere;
       }
     }
@@ -1163,7 +1175,7 @@ code {
       flex: 0 0 auto;
       font-size: 18px;
       width: 30px;
-      color: var(--clr-text-success);
+      color: $valid-value-color;
       display: flex;
       align-items: center;
     }
@@ -1218,6 +1230,7 @@ code {
   align-items: center;
   padding-bottom: 30px;
   margin-bottom: 30px;
+  color: $white;
 
   li {
     flex: 0 0 auto;
@@ -1226,11 +1239,11 @@ code {
 
   .separator {
     height: 2px;
-    background: var(--clr-border-primary);
+    background: $ui-base-lighter-color;
     flex: 1 1 auto;
 
     &.completed {
-      background: var(--clr-text-accent);
+      background: $highlight-text-color;
     }
   }
 
@@ -1240,7 +1253,7 @@ code {
     width: 30px;
     height: 30px;
     border-radius: 50%;
-    border: 2px solid var(--clr-border-primary);
+    border: 2px solid $ui-base-lighter-color;
     flex: 0 0 auto;
     display: flex;
     align-items: center;
@@ -1255,7 +1268,7 @@ code {
     position: absolute;
     font-size: 14px;
     font-weight: 500;
-    color: var(--clr-text-primary);
+    color: $secondary-text-color;
     padding-top: 10px;
     text-align: center;
     width: 100px;
@@ -1278,14 +1291,14 @@ code {
   }
 
   .active .circle {
-    border-color: var(--clr-text-accent);
+    border-color: $highlight-text-color;
 
     &::before {
       content: '';
       width: 10px;
       height: 10px;
       border-radius: 50%;
-      background: var(--clr-text-accent);
+      background: $highlight-text-color;
       position: absolute;
       left: 50%;
       top: 50%;
@@ -1294,8 +1307,8 @@ code {
   }
 
   .completed .circle {
-    border-color: var(--clr-text-accent);
+    border-color: $highlight-text-color;
-    background: var(--clr-text-accent);
+    background: $highlight-text-color;
   }
 }
 
@@ -1306,14 +1319,10 @@ code {
   &__header-input {
     display: block;
     border-radius: 8px;
-    background: var(--clr-bg-secondary);
+    background: var(--surface-variant-background-color);
     position: relative;
     cursor: pointer;
 
-    &:hover {
-      background-color: var(--clr-bg-accent-subtle);
-    }
-
     img {
       position: absolute;
       width: 100%;
@@ -1328,12 +1337,12 @@ code {
       inset-inline-start: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
-      color: var(--clr-text-secondary);
+      color: $darker-text-color;
       z-index: 3;
     }
 
     &.selected .icon {
-      color: var(--clr-text-primary);
+      color: $primary-text-color;
       transform: none;
       inset-inline-start: auto;
       inset-inline-end: 8px;
@@ -1342,7 +1351,7 @@ code {
     }
 
     &.invalid img {
-      outline: 1px solid var(--clr-text-error);
+      outline: 1px solid $error-value-color;
       outline-offset: -1px;
     }
 
@@ -1352,10 +1361,14 @@ code {
       width: 100%;
       height: 100%;
       position: absolute;
-      background: var(--clr-bg-error-subtle);
+      background: color.change($error-value-color, $alpha: 0.25);
       z-index: 2;
       border-radius: 8px;
     }
+
+    &:hover {
+      background-color: var(--surface-variant-active-background-color);
+    }
   }
 
   &__avatar-input {
@@ -1371,7 +1384,7 @@ code {
     display: flex;
     align-items: center;
     gap: 16px;
-    color: var(--clr-text-secondary);
+    color: $darker-text-color;
     font-size: 14px;
     line-height: 20px;
 
@@ -1388,14 +1401,14 @@ code {
       flex: 1 1 auto;
 
       strong {
-        color: var(--clr-text-primary);
+        color: $primary-text-color;
         font-weight: 600;
       }
 
       .hint {
         display: block;
         font-size: 14px;
-        color: var(--clr-text-secondary);
+        color: $darker-text-color;
       }
 
       .recommended {
@@ -1413,7 +1426,7 @@ code {
 
     &__toggle > div {
       display: flex;
-      border-inline-start: 1px solid var(--clr-border-primary);
+      border-inline-start: 1px solid var(--background-border-color);
       padding-inline-start: 16px;
     }
   }
@@ -1424,19 +1437,19 @@ code {
     padding: 8px 0;
     align-items: center;
     text-decoration: none;
-    color: var(--clr-text-primary);
+    color: $primary-text-color;
     margin-bottom: 16px;
 
     &__text {
       flex: 1 1 auto;
       font-size: 14px;
       line-height: 20px;
-      color: var(--clr-text-secondary);
+      color: $darker-text-color;
 
       strong {
         font-weight: 600;
         display: block;
-        color: var(--clr-text-primary);
+        color: $primary-text-color;
       }
 
       .icon {

app/javascript/styles/mastodon/modal.scss

@@ -1,7 +1,10 @@
 @use 'variables' as *;
+@use 'functions' as *;
 
 .modal-layout {
-  background: var(--clr-bg-accent-subtle);
+  background: darken($ui-base-color, 4%)
+    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="#{hex-color($ui-base-lighter-color)}33"/></svg>')
+    repeat-x bottom fixed;
   display: flex;
   flex-direction: column;
   height: 100vh;
@@ -35,19 +38,3 @@
     margin-top: 0;
   }
 }
-
-.with-zig-zag-decoration {
-  &::after {
-    content: '';
-    position: absolute;
-    inset: auto 0 0;
-    height: 32px;
-    background-color: var(--clr-bg-accent-subtle);
-
-    /* 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>');
-    mask-position: bottom;
-    mask-repeat: repeat-x;
-    z-index: -1;
-  }
-}

app/javascript/styles/mastodon/polls.scss

@@ -1,5 +1,6 @@
 @use 'sass:color';
 @use 'variables' as *;
+@use 'functions' as *;
 
 .poll {
   margin-top: 16px;
@@ -13,12 +14,12 @@
   &__chart {
     border-radius: 4px;
     display: block;
-    background: rgb(from var(--clr-text-accent) r g b / 60%);
+    background: darken($ui-primary-color, 5%);
     height: 5px;
     min-width: 1%;
 
     &.leading {
-      background: var(--clr-text-accent);
+      background: $ui-highlight-color;
     }
   }
 
@@ -38,12 +39,12 @@
     // duplication
     &::-moz-progress-bar {
       border-radius: 4px;
-      background: rgb(from var(--clr-text-accent) r g b / 60%);
+      background: darken($ui-primary-color, 5%);
     }
 
     &::-webkit-progress-value {
       border-radius: 4px;
-      background: rgb(from var(--clr-text-accent) r g b / 60%);
+      background: darken($ui-primary-color, 5%);
     }
   }
 
@@ -77,16 +78,16 @@
       box-sizing: border-box;
       width: 100%;
       font-size: 14px;
-      color: var(--clr-text-primary);
+      color: $secondary-text-color;
       outline: 0;
       font-family: inherit;
-      background: var(--clr-bg-primary);
+      background: $ui-base-color;
-      border: 1px solid var(--clr-text-secondary);
+      border: 1px solid $darker-text-color;
       border-radius: 4px;
       padding: 8px 12px;
 
       &:focus {
-        border-color: var(--clr-text-accent);
+        border-color: $ui-highlight-color;
       }
 
       @media screen and (width <= 600px) {
@@ -110,7 +111,7 @@
   &__input {
     display: block;
     position: relative;
-    border: 1px solid var(--clr-text-secondary);
+    border: 1px solid $ui-primary-color;
     box-sizing: border-box;
     width: 17px;
     height: 17px;
@@ -124,13 +125,13 @@
     &:active,
     &:focus,
     &:hover {
-      border-color: var(--clr-text-success);
+      border-color: lighten($valid-value-color, 15%);
       border-width: 4px;
     }
 
     &.active {
-      background-color: var(--clr-bg-success-strong);
+      background-color: $valid-value-color;
-      border-color: var(--clr-text-success);
+      border-color: $valid-value-color;
     }
 
     &::-moz-focus-inner {
@@ -144,16 +145,16 @@
     }
 
     &.disabled {
-      border-color: var(--clr-text-disabled);
+      border-color: $dark-text-color;
 
       &.active {
-        background: var(--clr-text-disabled);
+        background: $dark-text-color;
       }
 
       &:active,
       &:focus,
       &:hover {
-        border-color: var(--clr-text-disabled);
+        border-color: $dark-text-color;
         border-width: 1px;
       }
     }
@@ -164,7 +165,7 @@
     &:active,
     &:focus,
     &:hover {
-      border-color: var(--clr-text-primary);
+      border-color: $ui-primary-color;
       border-width: 1px;
     }
   }
@@ -188,7 +189,7 @@
   &__footer {
     padding-top: 6px;
     padding-bottom: 5px;
-    color: var(--clr-text-tertiary);
+    color: $dark-text-color;
   }
 
   &__link {
@@ -197,7 +198,7 @@
     padding: 0;
     margin: 0;
     border: 0;
-    color: var(--clr-text-tertiary);
+    color: $dark-text-color;
     text-decoration: underline;
     font-size: inherit;
 
@@ -207,7 +208,7 @@
 
     &:active,
     &:focus {
-      background-color: var(--clr-bg-secondary);
+      background-color: color.change($dark-text-color, $alpha: 0.1);
     }
   }
 
@@ -220,13 +221,13 @@
 }
 
 .muted .poll {
-  color: var(--clr-text-tertiary);
+  color: $dark-text-color;
 
   &__chart {
-    background: rgb(from var(--clr-text-accent) r g b / 40%);
+    background: rgba(darken($ui-primary-color, 14%), 0.7);
 
     &.leading {
-      background: rgb(from var(--clr-text-accent) r g b / 60%);
+      background: color.change($ui-highlight-color, $alpha: 0.5);
     }
   }
 }

app/javascript/styles/mastodon/reset.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 /* http://meyerweb.com/eric/tools/css/reset/
    v2.0 | 20110126
    License: none (public domain)
@@ -53,6 +55,32 @@ table {
   border-spacing: 0;
 }
 
-html:has(body.custom-scrollbars) {
+@supports not selector(::-webkit-scrollbar) {
-  scrollbar-color: var(--clr-text-secondary) var(--clr-bg-secondary);
+  html {
+    scrollbar-color: $action-button-color var(--background-border-color);
+  }
+}
+
+.custom-scrollbars {
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: $action-button-color;
+    border: 2px var(--background-border-color);
+    border-radius: 12px;
+    width: 6px;
+    box-shadow: inset 0 0 0 2px var(--background-border-color);
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: var(--background-border-color);
+    border-radius: 0px;
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
 }

app/javascript/styles/mastodon/rtl.scss

@@ -1,3 +1,4 @@
+@use 'functions' as *;
 @use 'variables' as *;
 
 body.rtl {
@@ -41,6 +42,12 @@ body.rtl {
     transform: scale(-1, 1);
   }
 
+  .simple_form select {
+    background: $ui-base-color
+      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
+      no-repeat left 8px center / auto 16px;
+  }
+
   .dismissable-banner,
   .warning-banner {
     &__action {

app/javascript/styles/mastodon/tables.scss

@@ -1,4 +1,5 @@
 @use 'variables' as *;
+@use 'functions' as *;
 
 .table {
   width: 100%;
@@ -11,13 +12,13 @@
     padding: 8px;
     line-height: 18px;
     vertical-align: top;
-    border-bottom: 1px solid var(--clr-border-primary);
+    border-bottom: 1px solid var(--background-border-color);
     text-align: start;
-    background: var(--clr-bg-primary);
+    background: var(--background-color);
 
     &.critical {
       font-weight: 700;
-      color: var(--clr-text-warning);
+      color: $gold-star;
     }
   }
 
@@ -32,7 +33,7 @@
 
   & > tbody > tr:nth-child(odd) > td,
   & > tbody > tr:nth-child(odd) > th {
-    background: var(--clr-bg-primary);
+    background: var(--background-color);
   }
 
   & > tbody > tr:last-child > td,
@@ -41,11 +42,11 @@
   }
 
   a {
-    color: var(--clr-text-secondary);
+    color: $darker-text-color;
     text-decoration: none;
 
     &:hover {
-      color: var(--clr-text-accent);
+      color: $highlight-text-color;
     }
   }
 
@@ -83,30 +84,30 @@
     & > tbody > tr > td {
       padding: 11px 10px;
       background: transparent;
-      border: 1px solid var(--clr-border-primary);
+      border: 1px solid var(--background-border-color);
-      color: var(--clr-text-primary);
+      color: $secondary-text-color;
     }
 
     & > tbody > tr > th {
-      color: var(--clr-text-secondary);
+      color: $darker-text-color;
       font-weight: 600;
     }
   }
 
   &.batch-table {
     & > thead > tr > th {
-      background: var(--clr-bg-primary);
+      background: var(--background-color);
-      border-top: 1px solid var(--clr-border-primary);
+      border-top: 1px solid var(--background-border-color);
-      border-bottom: 1px solid var(--clr-border-primary);
+      border-bottom: 1px solid var(--background-border-color);
 
       &:first-child {
         border-radius: 4px 0 0;
-        border-inline-start: 1px solid var(--clr-border-primary);
+        border-inline-start: 1px solid var(--background-border-color);
       }
 
       &:last-child {
         border-radius: 0 4px 0 0;
-        border-inline-end: 1px solid var(--clr-border-primary);
+        border-inline-end: 1px solid var(--background-border-color);
       }
     }
   }
@@ -137,12 +138,12 @@ a.table-action-link {
   display: inline-block;
   margin-inline-end: 5px;
   padding: 0 10px;
-  color: var(--clr-text-secondary);
+  color: $darker-text-color;
   font-weight: 500;
   white-space: nowrap;
 
   &:hover {
-    color: var(--clr-text-accent);
+    color: $highlight-text-color;
   }
 
   &:first-child {
@@ -195,8 +196,8 @@ a.table-action-link {
     position: sticky;
     top: 0;
     z-index: 200;
-    border: 1px solid var(--clr-border-primary);
+    border: 1px solid var(--background-border-color);
-    background: var(--clr-bg-primary);
+    background: var(--background-color);
     border-radius: 4px 4px 0 0;
     height: 47px;
     align-items: center;
@@ -212,13 +213,13 @@ a.table-action-link {
   }
 
   &__select-all {
-    background: var(--clr-bg-primary);
+    background: var(--background-color);
     height: 47px;
     align-items: center;
     justify-content: center;
-    border: 1px solid var(--clr-border-primary);
+    border: 1px solid var(--background-border-color);
     border-top: 0;
-    color: var(--clr-text-primary);
+    color: $secondary-text-color;
     display: none;
 
     &.active {
@@ -247,7 +248,7 @@ a.table-action-link {
       background: transparent;
       border: 0;
       font: inherit;
-      color: var(--clr-text-accent);
+      color: $highlight-text-color;
       border-radius: 4px;
       font-weight: 700;
       padding: 8px;
@@ -255,16 +256,16 @@ a.table-action-link {
       &:hover,
       &:focus,
       &:active {
-        background: var(--clr-bg-secondary);
+        background: lighten($ui-base-color, 8%);
       }
     }
   }
 
   &__form {
     padding: 16px;
-    border: 1px solid var(--clr-border-primary);
+    border: 1px solid var(--background-border-color);
     border-top: 0;
-    background: var(--clr-bg-primary);
+    background: var(--background-color);
 
     .fields-row {
       padding-top: 0;
@@ -273,13 +274,13 @@ a.table-action-link {
   }
 
   &__row {
-    border: 1px solid var(--clr-border-primary);
+    border: 1px solid var(--background-border-color);
     border-top: 0;
-    background: var(--clr-bg-primary);
+    background: var(--background-color);
 
     @media screen and (max-width: $no-gap-breakpoint) {
       .optional &:first-child {
-        border-top: 1px solid var(--clr-border-primary);
+        border-top: 1px solid var(--background-border-color);
       }
     }
 
@@ -330,7 +331,7 @@ a.table-action-link {
       &__extra {
         flex: 0 0 auto;
         text-align: end;
-        color: var(--clr-text-secondary);
+        color: $darker-text-color;
         font-weight: 500;
       }
     }
@@ -361,6 +362,21 @@ a.table-action-link {
     padding: 0;
   }
 
+  .nothing-here {
+    border: 1px solid var(--background-border-color);
+    border-top: 0;
+    box-shadow: none;
+    background: var(--background-color);
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      border-top: 1px solid var(--background-border-color);
+    }
+
+    &--no-toolbar {
+      border-top: 1px solid var(--background-border-color);
+    }
+  }
+
   @media screen and (width <= 870px) {
     .accounts-table tbody td.optional {
       display: none;

app/javascript/styles/mastodon/widgets.scss

@@ -1,5 +1,6 @@
 @use 'sass:color';
 @use 'variables' as *;
+@use 'functions' as *;
 
 .directory {
   &__tag {
@@ -11,24 +12,24 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      border: 1px solid var(--clr-border-primary);
+      border: 1px solid var(--background-border-color);
       border-radius: 4px;
       padding: 15px;
       text-decoration: none;
       color: inherit;
-      box-shadow: 0 0 15px var(--clr-shadow-primary);
+      box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
     }
 
     & > a {
       &:hover,
       &:active,
       &:focus {
-        background: var(--clr-bg-primary);
+        background: $ui-base-color;
       }
     }
 
     &.active > a {
-      background: var(--clr-bg-accent-strong);
+      background: $ui-highlight-color;
       cursor: default;
     }
 
@@ -41,13 +42,13 @@
       flex: 1 1 auto;
       font-size: 18px;
       font-weight: 700;
-      color: var(--clr-text-primary);
+      color: $primary-text-color;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
 
       .fa {
-        color: var(--clr-text-secondary);
+        color: $darker-text-color;
       }
 
       small {
@@ -55,7 +56,7 @@
         font-weight: 400;
         font-size: 15px;
         margin-top: 8px;
-        color: var(--clr-text-secondary);
+        color: $darker-text-color;
       }
     }
 
@@ -64,7 +65,7 @@
       .fa,
       small,
       .trends__item__current {
-        color: var(--clr-text-primary);
+        color: $primary-text-color;
       }
     }
 
@@ -74,7 +75,7 @@
     }
 
     &.active .avatar-stack .account__avatar {
-      border-color: var(--clr-text-accent);
+      border-color: $ui-highlight-color;
     }
 
     .trends__item__current {
@@ -99,7 +100,7 @@
   thead th {
     text-align: center;
     text-transform: uppercase;
-    color: var(--clr-text-secondary);
+    color: $darker-text-color;
     font-weight: 700;
     padding: 10px;
 
@@ -111,7 +112,7 @@
   tbody td {
     padding: 15px 0;
     vertical-align: middle;
-    border-bottom: 1px solid var(--clr-border-primary);
+    border-bottom: 1px solid lighten($ui-base-color, 8%);
   }
 
   tbody tr:last-child td {
@@ -123,11 +124,11 @@
     text-align: center;
     font-size: 15px;
     font-weight: 500;
-    color: var(--clr-text-primary);
+    color: $primary-text-color;
 
     small {
       display: block;
-      color: var(--clr-text-secondary);
+      color: $darker-text-color;
       font-weight: 400;
       font-size: 14px;
     }
@@ -136,7 +137,7 @@
   tbody td.accounts-table__extra {
     width: 120px;
     text-align: end;
-    color: var(--clr-text-secondary);
+    color: $darker-text-color;
     padding-inline-end: 16px;
 
     a {
@@ -146,7 +147,7 @@
       &:focus,
       &:hover,
       &:active {
-        color: var(--clr-text-accent);
+        color: $highlight-text-color;
       }
     }
   }
@@ -163,15 +164,15 @@
 
   .icon {
     &.active {
-      color: var(--clr-text-accent);
+      color: $highlight-text-color;
     }
 
     &.passive {
-      color: var(--clr-text-warning);
+      color: $passive-text-color;
     }
 
     &.active.passive {
-      color: var(--clr-text-success);
+      color: $active-passive-text-color;
     }
   }
 

app/javascript/styles_new/application.scss

@@ -0,0 +1,7 @@
+@use 'mastodon/css_variables';
+@use 'mastodon/variables';
+@use 'common';
+
+html {
+  color-scheme: dark;
+}

app/javascript/styles_new/contrast.scss

@@ -0,0 +1,8 @@
+@use 'mastodon/css_variables';
+@use 'mastodon/variables';
+@use 'common';
+@use 'contrast/diff';
+
+html {
+  color-scheme: dark;
+}

app/javascript/styles_new/contrast/diff.scss

@@ -0,0 +1,54 @@
+:root {
+  /* TEXT TOKENS */
+
+  --clr-text-primary: var(--clr-grey-50);
+  --clr-text-secondary: var(--clr-grey-300);
+  --clr-text-tertiary: var(--clr-grey-400);
+  --clr-text-accent: var(--clr-indigo-300);
+  --clr-text-status-links: var(--clr-text-accent);
+
+  /* BORDER TOKENS */
+
+  --clr-border-primary-strength: 18%;
+}
+
+.status__content a,
+.reply-indicator__content a,
+.edit-indicator__content a,
+.link-footer a,
+.status__content__read-more-button,
+.status__content__translate-button {
+  text-decoration: underline;
+
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: none;
+  }
+
+  &.mention {
+    text-decoration: none;
+
+    span {
+      text-decoration: underline;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      span {
+        text-decoration: none;
+      }
+    }
+  }
+}
+
+.link-button:disabled {
+  cursor: not-allowed;
+
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: none !important;
+  }
+}

app/javascript/styles_new/entrypoints/inert.scss

@@ -0,0 +1,14 @@
+/* This is needed for the wicg-inert polyfill */
+
+[inert] {
+  pointer-events: none;
+  cursor: default;
+}
+
+[inert],
+[inert] * {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}

app/javascript/styles_new/fonts/inter.scss

@@ -0,0 +1,8 @@
+@font-face {
+  font-family: Inter;
+  src: url('../../fonts/inter/inter-variable-font-slnt-wght.woff2')
+    format('woff2-variations');
+  font-weight: 100 900;
+  font-style: normal;
+  mso-generic-font-family: swiss;
+}

app/javascript/styles_new/fonts/roboto-mono.scss

@@ -0,0 +1,13 @@
+@font-face {
+  font-family: mastodon-font-monospace;
+  src:
+    local('Roboto Mono'),
+    url('@/fonts/roboto-mono/robotomono-regular-webfont.woff2') format('woff2'),
+    url('@/fonts/roboto-mono/robotomono-regular-webfont.woff') format('woff'),
+    url('@/fonts/roboto-mono/robotomono-regular-webfont.ttf') format('truetype'),
+    url('@/fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular')
+      format('svg');
+  font-weight: 400;
+  font-display: swap;
+  font-style: normal;
+}

app/javascript/styles_new/fonts/roboto.scss

@@ -0,0 +1,55 @@
+@font-face {
+  font-family: mastodon-font-sans-serif;
+  src:
+    local('Roboto Italic'),
+    url('@/fonts/roboto/roboto-italic-webfont.woff2') format('woff2'),
+    url('@/fonts/roboto/roboto-italic-webfont.woff') format('woff'),
+    url('@/fonts/roboto/roboto-italic-webfont.ttf') format('truetype'),
+    url('@/fonts/roboto/roboto-italic-webfont.svg#roboto-italic-webfont')
+      format('svg');
+  font-weight: normal;
+  font-display: swap;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: mastodon-font-sans-serif;
+  src:
+    local('Roboto Bold'),
+    url('@/fonts/roboto/roboto-bold-webfont.woff2') format('woff2'),
+    url('@/fonts/roboto/roboto-bold-webfont.woff') format('woff'),
+    url('@/fonts/roboto/roboto-bold-webfont.ttf') format('truetype'),
+    url('@/fonts/roboto/roboto-bold-webfont.svg#roboto-bold-webfont')
+      format('svg');
+  font-weight: bold;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: mastodon-font-sans-serif;
+  src:
+    local('Roboto Medium'),
+    url('@/fonts/roboto/roboto-medium-webfont.woff2') format('woff2'),
+    url('@/fonts/roboto/roboto-medium-webfont.woff') format('woff'),
+    url('@/fonts/roboto/roboto-medium-webfont.ttf') format('truetype'),
+    url('@/fonts/roboto/roboto-medium-webfont.svg#roboto-medium-webfont')
+      format('svg');
+  font-weight: 500;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: mastodon-font-sans-serif;
+  src:
+    local('Roboto'),
+    url('@/fonts/roboto/roboto-regular-webfont.woff2') format('woff2'),
+    url('@/fonts/roboto/roboto-regular-webfont.woff') format('woff'),
+    url('@/fonts/roboto/roboto-regular-webfont.ttf') format('truetype'),
+    url('@/fonts/roboto/roboto-regular-webfont.svg#roboto-regular-webfont')
+      format('svg');
+  font-weight: normal;
+  font-display: swap;
+  font-style: normal;
+}

app/javascript/styles_new/mastodon-light.scss

@@ -0,0 +1,9 @@
+@use 'mastodon-light/css_variables';
+@use 'mastodon/variables' with (
+  $emojis-requiring-inversion: 'chains'
+);
+@use 'common';
+
+html {
+  color-scheme: light;
+}

app/javascript/styles_new/mastodon-light/css_variables.scss

@@ -0,0 +1,196 @@
+@use '../mastodon/theme_utils' as utils;
+
+:root {
+  --clr-black: #000;
+  --clr-grey-950: #181821;
+  --clr-grey-800: #292938;
+  --clr-grey-700: #444664;
+  --clr-grey-600: #545778;
+  --clr-grey-500: #696d91;
+  --clr-grey-400: #8b8dac;
+  --clr-grey-300: #b4b6cb;
+  --clr-grey-200: #d8d9e3;
+  --clr-grey-100: #f0f0f5;
+  --clr-grey-50: #f0f1ff;
+  --clr-white: #fff;
+  --clr-indigo-600: #6147e6;
+  --clr-indigo-400: #8886ff;
+  --clr-indigo-300: #a5abfd;
+  --clr-indigo-200: #c8cdfe;
+  --clr-indigo-100: #e0e3ff;
+  --clr-indigo-50: #f0f1ff;
+  --clr-red-500: #ff637e;
+  --clr-red-600: #ec003f;
+  --clr-yellow-400: #ffb900;
+  --clr-yellow-600: #e17100;
+  --clr-green-400: #05df72;
+  --clr-green-600: #00a63e;
+
+  /* TEXT TOKENS */
+
+  --clr-text-primary: var(--clr-grey-950);
+  --clr-text-secondary: var(--clr-grey-600);
+  --clr-text-tertiary: var(--clr-grey-500);
+  --clr-text-on-inverted: var(--clr-white);
+  --clr-text-accent: var(--clr-indigo-600);
+  --clr-text-accent-subtle: color-mix(
+    in oklab,
+    var(--clr-text-primary),
+    var(--clr-text-accent)
+  );
+  --clr-text-on-accent-strong: var(--clr-white);
+  --clr-text-error: var(--clr-red-600);
+  --clr-text-on-error-strong: var(--clr-white);
+  --clr-text-warning: var(--clr-yellow-600);
+  --clr-text-on-warning-strong: var(--clr-white);
+  --clr-text-success: var(--clr-green-600);
+  --clr-text-on-success-strong: var(--clr-white);
+  --clr-text-disabled: var(--clr-grey-300);
+  --clr-text-on-disabled: var(--clr-grey-200);
+  --clr-text-bookmark-highlight: var(--clr-text-error);
+  --clr-text-favourite-highlight: var(--clr-text-warning);
+  --clr-text-on-media: var(--clr-white);
+  --clr-text-status-links: var(--clr-text-accent);
+
+  /* BACKGROUND TOKENS */
+
+  --clr-bg-primary: var(--clr-white);
+  --clr-bg-secondary-base: var(--clr-grey-600);
+  --clr-bg-secondary-strength: 5%;
+  --clr-bg-secondary: #{color-mix(
+      in oklab,
+      var(--clr-bg-primary),
+      var(--clr-bg-secondary-base) var(--clr-bg-secondary-strength)
+    )};
+  --clr-bg-secondary-solid: #{color-mix(
+      in srgb,
+      var(--clr-bg-primary),
+      var(--clr-bg-secondary-base) var(--clr-bg-secondary-strength)
+    )};
+  --clr-bg-tertiary: #{color-mix(
+      in oklab,
+      var(--clr-bg-primary),
+      var(--clr-bg-secondary-base) calc(2 * var(--clr-bg-secondary-strength))
+    )};
+  --clr-bg-ambient: var(--clr-bg-primary);
+  --clr-bg-elevated: var(--clr-bg-primary);
+  --clr-bg-inverted: var(--clr-grey-950);
+  --clr-bg-media-base: var(--clr-black);
+  --clr-bg-media-strength: 65%;
+  --clr-bg-media: #{utils.css-alpha(
+      var(--clr-bg-media-base),
+      var(--clr-bg-media-strength)
+    )};
+  --clr-bg-overlay: var(--clr-bg-primary);
+  --clr-bg-disabled: var(--clr-grey-400);
+  --clr-bg-accent-subtle-base: var(--clr-indigo-600);
+  --clr-bg-accent-subtle-strength: 8%;
+  --clr-bg-accent-subtle: #{utils.css-alpha(
+      var(--clr-bg-accent-subtle-base),
+      var(--clr-bg-accent-subtle-strength)
+    )};
+  --clr-bg-accent-subtle-highlighted: #{utils.css-alpha(
+      var(--clr-bg-accent-subtle-base),
+      calc(var(--clr-bg-accent-subtle-strength) * 1.5)
+    )};
+  --clr-bg-accent-strong: var(--clr-indigo-600);
+  --clr-bg-accent-strong-highlighted: color-mix(
+    in oklab,
+    var(--clr-bg-accent-strong),
+    black var(--clr-bg-accent-subtle-strength)
+  );
+  --clr-bg-error-subtle-base: #f41b3b;
+  --clr-bg-error-subtle-strength: 12%;
+  --clr-bg-error-subtle: #{utils.css-alpha(
+      var(--clr-bg-error-subtle-base),
+      var(--clr-bg-error-subtle-strength)
+    )};
+  --clr-bg-error-strong: var(--clr-red-600);
+  --clr-bg-error-strong-highlighted: color-mix(
+    in oklab,
+    var(--clr-bg-error-strong),
+    black var(--clr-bg-error-subtle-strength)
+  );
+  --clr-bg-warning-subtle-base: #ffca1b;
+  --clr-bg-warning-subtle-strength: 10%;
+  --clr-bg-warning-subtle: #{utils.css-alpha(
+      var(--clr-bg-warning-subtle-base),
+      var(--clr-bg-warning-subtle-strength)
+    )};
+  --clr-bg-warning-strong: var(--clr-yellow-600);
+  --clr-bg-warning-strong-highlighted: color-mix(
+    in oklab,
+    var(--clr-bg-warning-strong),
+    black var(--clr-bg-warning-subtle-strength)
+  );
+  --clr-bg-success-subtle-base: #17e865;
+  --clr-bg-success-subtle-strength: 15%;
+  --clr-bg-success-subtle: #{utils.css-alpha(
+      var(--clr-bg-success-subtle-base),
+      var(--clr-bg-success-subtle-strength)
+    )};
+  --clr-bg-success-strong: var(--clr-green-600);
+  --clr-bg-success-strong-highlighted: color-mix(
+    in oklab,
+    var(--clr-bg-success-strong),
+    black var(--clr-bg-success-subtle-strength)
+  );
+
+  /* BORDER TOKENS */
+
+  --clr-border-primary-base: #000856;
+  --clr-border-primary-strength: 15%;
+  --clr-border-primary: color-mix(
+    in oklab,
+    var(--clr-bg-primary),
+    var(--clr-border-primary-base) var(--clr-border-primary-strength)
+  );
+  --clr-border-media: rgb(252 248 255 / 15%);
+  --clr-border-on-bg-secondary: var(--clr-grey-200);
+  --clr-border-on-bg-accent-subtle: var(--clr-indigo-200);
+  --clr-border-on-bg-error-subtle: #{utils.css-alpha(
+      var(--clr-text-error),
+      50%
+    )};
+  --clr-border-on-bg-warning-subtle: #{utils.css-alpha(
+      var(--clr-text-warning),
+      50%
+    )};
+  --clr-border-on-bg-success-subtle: #{utils.css-alpha(
+      var(--clr-text-success),
+      50%
+    )};
+
+  /* SHADOW TOKENS */
+
+  --clr-shadow-primary-base: var(--clr-black);
+  --clr-shadow-primary-strength: 30%;
+  --clr-shadow-primary: #{utils.css-alpha(
+      var(--clr-shadow-primary-base),
+      var(--clr-shadow-primary-strength)
+    )};
+  --dropdown-shadow:
+    0 20px 25px -5px var(--clr-shadow-primary),
+    0 8px 10px -6px var(--clr-shadow-primary);
+  --overlay-icon-shadow: drop-shadow(0 0 8px var(--clr-shadow-primary));
+
+  /* GRAPHS/CHARTS TOKENS */
+
+  --clr-graph-primary-stroke: var(--clr-text-accent);
+  --clr-graph-primary-fill: var(--clr-bg-accent-subtle);
+  --clr-graph-warning-stroke: var(--clr-text-warning);
+  --clr-graph-warning-fill: var(--clr-bg-warning-subtle);
+  --clr-graph-disabled-stroke: var(--clr-text-disabled);
+  --clr-graph-disabled-fill: var(--clr-bg-disabled);
+
+  /* LEGACY TOKENS */
+
+  --rich-text-container-color: rgb(255 216 231 / 100%);
+  --rich-text-text-color: rgb(114 47 83 / 100%);
+  --rich-text-decorations-color: rgb(255 175 212 / 100%);
+
+  /* MISCELLANEOUS */
+
+  --outline-focus-default: 2px solid var(--clr-text-accent);
+  --avatar-border-radius: 8px;
+}

app/javascript/styles_new/mastodon/_mixins.scss

@@ -0,0 +1,45 @@
+@mixin search-input {
+  outline: 0;
+  box-sizing: border-box;
+  width: 100%;
+  box-shadow: none;
+  font-family: inherit;
+  background: var(--clr-bg-secondary);
+  color: var(--clr-text-primary);
+  border-radius: 4px;
+  border: 1px solid var(--clr-border-on-bg-secondary);
+  font-size: 17px;
+  line-height: normal;
+  margin: 0;
+}
+
+@mixin search-popout {
+  background: var(--clr-bg-elevated);
+  border-radius: 4px;
+  padding: 10px 14px;
+  padding-bottom: 14px;
+  margin-top: 10px;
+  color: var(--clr-text-secondary);
+  box-shadow: 2px 4px 15px var(--clr-shadow-primary);
+
+  h4 {
+    text-transform: uppercase;
+    color: var(--clr-text-secondary);
+    font-size: 13px;
+    font-weight: 500;
+    margin-bottom: 10px;
+  }
+
+  li {
+    padding: 4px 0;
+  }
+
+  ul {
+    margin-bottom: 10px;
+  }
+
+  em {
+    font-weight: 500;
+    color: var(--clr-text-primary);
+  }
+}

app/javascript/styles_new/mastodon/_variables.scss

@@ -0,0 +1,27 @@
+// Keep this filter a SCSS variable rather than
+// a CSS Custom Property due to this Safari bug:
+// https://github.com/mdn/browser-compat-data/issues/25914#issuecomment-2676190245
+$backdrop-blur-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
+
+// Language codes that uses CJK fonts
+$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
+
+// Variables for components
+$media-modal-media-max-width: 100%;
+
+// put margins on top and bottom of image to avoid the screen covered by image.
+$media-modal-media-max-height: 80%;
+
+$no-gap-breakpoint: 1175px;
+$mobile-menu-breakpoint: 760px;
+$mobile-breakpoint: 630px;
+$no-columns-breakpoint: 600px;
+
+$font-sans-serif: 'mastodon-font-sans-serif' !default;
+$font-display: 'mastodon-font-display' !default;
+$font-monospace: 'mastodon-font-monospace' !default;
+
+$emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange'
+  'end' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign'
+  'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'on'
+  'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default;

app/javascript/styles_new/mastodon/about.scss

@@ -0,0 +1,130 @@
+@use 'variables' as *;
+
+$maximum-width: 1235px;
+$fluid-breakpoint: $maximum-width + 20px;
+
+.container {
+  box-sizing: border-box;
+  max-width: $maximum-width;
+  margin: 0 auto;
+  position: relative;
+
+  @media screen and (max-width: $fluid-breakpoint) {
+    width: 100%;
+    padding: 0 10px;
+  }
+}
+
+.brand {
+  position: relative;
+  text-decoration: none;
+}
+
+.rules-list {
+  font-size: 15px;
+  line-height: 22px;
+  counter-reset: list-counter;
+
+  li {
+    position: relative;
+    border-bottom: 1px solid var(--clr-border-primary);
+    padding: 1em 1.75em;
+    padding-inline-start: 3em;
+    font-weight: 500;
+    counter-increment: list-counter;
+    min-height: 4ch;
+
+    button {
+      background: transparent;
+      border: 0;
+      padding: 0;
+      margin: 0;
+      text-align: start;
+      font: inherit;
+
+      &:hover,
+      &:focus,
+      &:active {
+        background: transparent;
+      }
+
+      &[aria-expanded='false'] .rules-list__hint {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        @supports (-webkit-line-clamp: 2) {
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          white-space: normal;
+        }
+      }
+    }
+
+    &::before {
+      content: counter(list-counter);
+      position: absolute;
+      inset-inline-start: 0;
+      top: 1em;
+      background: var(--clr-bg-accent-strong);
+      color: var(--clr-text-on-accent-strong);
+      border-radius: 50%;
+      width: 4ch;
+      height: 4ch;
+      font-weight: 500;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+
+  &__text {
+    color: var(--clr-text-primary);
+  }
+
+  &__hint {
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--clr-text-secondary);
+  }
+}
+
+.rules-languages {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  position: relative;
+
+  > label {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--clr-text-primary);
+  }
+
+  select {
+    appearance: none;
+    box-sizing: border-box;
+    font-size: 14px;
+    color: var(--clr-text-primary);
+    display: block;
+    width: 100%;
+    outline: 0;
+    font-family: inherit;
+    resize: vertical;
+    background: var(--clr-bg-secondary);
+    border: 1px solid var(--clr-border-primary);
+    border-radius: 4px;
+    padding-inline-start: 10px;
+    padding-inline-end: 30px;
+    height: 41px;
+
+    @media screen and (width <= 600px) {
+      font-size: 16px;
+    }
+  }
+}

app/javascript/styles_new/mastodon/accessibility.scss

@@ -0,0 +1,13 @@
+@use 'variables' as *;
+
+%emoji-color-inversion {
+  filter: invert(1);
+}
+
+.emojione {
+  @each $emoji in $emojis-requiring-inversion {
+    &[title=':#{$emoji}:'] {
+      @extend %emoji-color-inversion;
+    }
+  }
+}

app/javascript/styles_new/mastodon/accounts.scss

@@ -0,0 +1,411 @@
+@use 'sass:color';
+@use 'variables' as *;
+
+.card {
+  & > a {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+    overflow: hidden;
+    border-radius: 4px;
+
+    &:hover,
+    &:active,
+    &:focus {
+      .card__bar {
+        background: var(--clr-bg-accent-subtle);
+      }
+    }
+  }
+
+  &__img {
+    height: 130px;
+    position: relative;
+    background: var(--clr-bg-secondary);
+    border: 1px solid var(--clr-border-primary);
+    border-bottom: none;
+
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      object-fit: cover;
+    }
+
+    @media screen and (width <= 600px) {
+      height: 200px;
+    }
+  }
+
+  &__bar {
+    position: relative;
+    padding: 15px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    background: var(--clr-bg-primary);
+    border: 1px solid var(--clr-border-primary);
+    border-top: none;
+
+    .avatar {
+      flex: 0 0 auto;
+      width: 48px;
+      height: 48px;
+      padding-top: 2px;
+
+      img {
+        width: 100%;
+        height: 100%;
+        display: block;
+        margin: 0;
+        border-radius: 4px;
+        background: var(--clr-bg-secondary);
+        object-fit: cover;
+      }
+    }
+
+    .display-name {
+      margin-inline-start: 15px;
+      text-align: start;
+
+      svg[data-hidden] {
+        display: none;
+      }
+
+      strong {
+        font-size: 15px;
+        color: var(--clr-text-primary);
+        font-weight: 500;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      span {
+        display: block;
+        font-size: 14px;
+        color: var(--clr-text-secondary);
+        font-weight: 400;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+
+.pagination {
+  padding: 30px 0;
+  text-align: center;
+  overflow: hidden;
+
+  a,
+  .current,
+  .newer,
+  .older,
+  .page,
+  .gap {
+    font-size: 14px;
+    color: var(--clr-text-primary);
+    font-weight: 500;
+    display: inline-block;
+    padding: 6px 10px;
+    text-decoration: none;
+  }
+
+  .current {
+    color: var(--clr-bg-inverted);
+    background: var(--clr-text-on-inverted);
+    border-radius: 100px;
+    cursor: default;
+    margin: 0 10px;
+  }
+
+  .gap {
+    cursor: default;
+  }
+
+  .older,
+  .newer {
+    text-transform: uppercase;
+    color: var(--clr-text-primary);
+  }
+
+  .older {
+    float: left;
+    padding-inline-start: 0;
+  }
+
+  .newer {
+    float: right;
+    padding-inline-end: 0;
+  }
+
+  .disabled {
+    cursor: default;
+    color: var(--clr-text-disabled);
+  }
+
+  @media screen and (width <= 700px) {
+    padding: 30px 20px;
+
+    .page {
+      display: none;
+    }
+
+    .newer,
+    .older {
+      display: inline-block;
+    }
+  }
+}
+
+.nothing-here {
+  color: var(--clr-text-secondary);
+  background: var(--clr-bg-primary);
+  font-size: 14px;
+  font-weight: 500;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: default;
+  border-radius: 4px;
+  padding: 20px;
+  min-height: 30vh;
+  border: 1px solid var(--clr-border-primary);
+
+  @media screen and (min-width: ($no-gap-breakpoint - 1)) {
+    border-top: 0;
+  }
+
+  &--no-toolbar {
+    border-top: 1px solid var(--clr-border-primary);
+  }
+
+  &--under-tabs {
+    border-radius: 0 0 4px 4px;
+  }
+
+  &--flexible {
+    box-sizing: border-box;
+    min-height: 100%;
+  }
+}
+
+.information-badge,
+.simple_form .overridden,
+.simple_form .recommended,
+.simple_form .not_recommended {
+  display: inline-block;
+  padding: 4px 6px;
+  cursor: default;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 12px;
+  font-weight: 500;
+  color: var(--clr-text-primary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.information-badge,
+.simple_form .overridden,
+.simple_form .recommended,
+.simple_form .not_recommended {
+  background-color: var(--clr-bg-secondary);
+  border: 1px solid var(--clr-border-primary);
+}
+
+.information-badge {
+  &.superapp {
+    color: var(--clr-text-success);
+    background-color: var(--clr-bg-success-subtle);
+    border-color: var(--clr-border-on-bg-success-subtle);
+  }
+}
+
+.account-role {
+  display: inline-flex;
+  padding: 4px;
+  padding-inline-end: 8px;
+  border: 1px solid var(--clr-text-accent);
+  color: var(--clr-text-accent);
+  font-weight: 500;
+  font-size: 12px;
+  letter-spacing: 0.5px;
+  line-height: 16px;
+  gap: 4px;
+  border-radius: 6px;
+  align-items: center;
+
+  svg {
+    width: auto;
+    height: 15px;
+    opacity: 0.85;
+    fill: currentColor;
+  }
+
+  &__domain {
+    font-weight: 400;
+    opacity: 0.75;
+    letter-spacing: 0;
+  }
+}
+
+.simple_form .not_recommended {
+  color: var(--clr-text-error);
+  background-color: var(--clr-bg-error-subtle);
+  border-color: var(--clr-border-on-bg-error-subtle);
+}
+
+.account__header__fields {
+  max-width: 100vw;
+  padding: 0;
+  margin: 15px -15px -15px;
+  border: 0 none;
+  border-top: 1px solid var(--clr-border-primary);
+  border-bottom: 1px solid var(--clr-border-primary);
+  font-size: 14px;
+  line-height: 20px;
+
+  dl {
+    display: flex;
+    border-bottom: 1px solid var(--clr-border-primary);
+  }
+
+  dt,
+  dd {
+    box-sizing: border-box;
+    padding: 14px;
+    text-align: center;
+    max-height: 48px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  dt {
+    font-weight: 500;
+    width: 120px;
+    flex: 0 0 auto;
+    color: var(--clr-text-primary);
+    background: var(--clr-bg-secondary);
+  }
+
+  dd {
+    flex: 1 1 auto;
+    color: var(--clr-text-secondary);
+  }
+
+  a {
+    color: var(--clr-text-accent);
+    text-decoration: none;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: underline;
+    }
+  }
+
+  .verified {
+    border: 1px solid var(--clr-border-on-bg-success-subtle);
+    background: var(--clr-bg-success-subtle);
+
+    a {
+      color: var(--clr-text-success);
+      font-weight: 500;
+    }
+
+    &__mark {
+      color: var(--clr-text-success);
+    }
+  }
+
+  dl:last-child {
+    border-bottom: 0;
+  }
+}
+
+.directory__tag .trends__item__current {
+  width: auto;
+}
+
+.pending-account {
+  &__header {
+    color: var(--clr-text-secondary);
+
+    a {
+      color: var(--clr-text-primary);
+      text-decoration: none;
+
+      &:hover,
+      &:active,
+      &:focus {
+        text-decoration: underline;
+      }
+    }
+
+    strong {
+      color: var(--clr-text-primary);
+      font-weight: 700;
+    }
+
+    .warning-hint {
+      font-weight: normal !important;
+    }
+  }
+
+  &__body {
+    margin-top: 10px;
+  }
+}
+
+.batch-table__row--muted {
+  color: var(--clr-text-tertiary);
+}
+
+.batch-table__row--muted .pending-account__header,
+.batch-table__row--muted .accounts-table,
+.batch-table__row--muted .name-tag {
+  &,
+  a,
+  strong {
+    color: var(--clr-text-tertiary);
+  }
+}
+
+.batch-table__row--muted .name-tag .avatar {
+  opacity: 0.5;
+}
+
+.batch-table__row--muted .accounts-table {
+  tbody td.accounts-table__extra,
+  &__count,
+  &__count small {
+    color: var(--clr-text-tertiary);
+  }
+}
+
+.batch-table__row--attention {
+  color: var(--clr-text-warning);
+}
+
+.batch-table__row--attention .pending-account__header,
+.batch-table__row--attention .accounts-table,
+.batch-table__row--attention .name-tag {
+  &,
+  a,
+  strong {
+    color: var(--clr-text-warning);
+  }
+}
+
+.batch-table__row--attention .accounts-table {
+  tbody td.accounts-table__extra,
+  &__count,
+  &__count small {
+    color: var(--clr-text-warning);
+  }
+}

app/javascript/styles_new/mastodon/annual_reports.scss

@@ -0,0 +1,342 @@
+@use 'variables' as *;
+
+:root {
+  --indigo-1: #17063b;
+  --indigo-2: #2f0c7a;
+  --indigo-3: #562cfc;
+  --indigo-5: #858afa;
+  --indigo-6: #cccfff;
+  --lime: #baff3b;
+  --goldenrod-2: #ffc954;
+}
+
+.annual-report {
+  flex: 0 0 auto;
+  background: var(--indigo-1);
+  padding: 24px;
+
+  &__header {
+    margin-bottom: 16px;
+
+    h1 {
+      font-size: 25px;
+      font-weight: 600;
+      line-height: 30px;
+      color: var(--lime);
+      margin-bottom: 8px;
+    }
+
+    p {
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 20px;
+      color: var(--indigo-6);
+    }
+  }
+
+  &__bento {
+    display: grid;
+    gap: 8px;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
+    grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto) minmax(
+        0,
+        auto
+      );
+
+    &__box {
+      padding: 16px;
+      border-radius: 8px;
+      background: var(--indigo-2);
+      color: var(--indigo-5);
+    }
+  }
+
+  &__summary {
+    &__most-boosted-post {
+      grid-column: span 2;
+      grid-row: span 2;
+      padding: 0;
+
+      .status__content,
+      .content-warning {
+        color: var(--indigo-6);
+      }
+
+      .detailed-status {
+        border: 0;
+      }
+
+      .content-warning {
+        border: 0;
+        background: var(--indigo-1);
+
+        .link-button {
+          color: var(--indigo-5);
+        }
+      }
+
+      .detailed-status__meta__line {
+        border-bottom-color: var(--indigo-3);
+      }
+
+      .detailed-status__meta {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      .detailed-status__meta,
+      .poll__footer,
+      .poll__link,
+      .detailed-status .logo,
+      .detailed-status__display-name {
+        color: var(--indigo-5);
+      }
+
+      .detailed-status__meta .animated-number,
+      .detailed-status__display-name strong {
+        color: var(--indigo-6);
+      }
+
+      .poll__chart {
+        background-color: var(--indigo-3);
+
+        &.leading {
+          background-color: var(--goldenrod-2);
+        }
+      }
+
+      .status-card,
+      .hashtag-bar {
+        display: none;
+      }
+    }
+
+    &__followers {
+      grid-column: span 1;
+      text-align: center;
+      position: relative;
+      overflow: hidden;
+      padding-block-start: 24px;
+      padding-block-end: 24px;
+
+      --sparkline-gradient-top: rgba(86, 44, 252, 50%);
+      --sparkline-gradient-bottom: rgba(86, 44, 252, 0%);
+
+      &__foreground {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        position: relative;
+        z-index: 1;
+      }
+
+      &__number {
+        font-size: 31px;
+        font-weight: 600;
+        line-height: 37px;
+        color: var(--lime);
+      }
+
+      &__label {
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 17px;
+        color: var(--indigo-6);
+      }
+
+      &__footnote {
+        display: block;
+        font-weight: 400;
+        opacity: 0.5;
+      }
+
+      svg {
+        position: absolute;
+        bottom: 0;
+        inset-inline-end: 0;
+        pointer-events: none;
+        z-index: 0;
+        height: 70%;
+        width: auto;
+
+        path:first-child {
+          fill: url('#gradient') !important;
+          fill-opacity: 1 !important;
+        }
+
+        path:last-child {
+          stroke: var(--clr-graph-primary-stroke) !important;
+          fill: none !important;
+        }
+      }
+    }
+
+    &__archetype {
+      grid-column: span 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      gap: 8px;
+      padding: 0;
+
+      img {
+        display: block;
+        width: 100%;
+        height: auto;
+        border-radius: 8px;
+      }
+
+      &__label {
+        padding: 16px;
+        padding-bottom: 8px;
+        font-size: 14px;
+        line-height: 17px;
+        font-weight: 600;
+        color: var(--lime);
+      }
+    }
+
+    &__most-used-app {
+      grid-column: span 1;
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      box-sizing: border-box;
+
+      &__label {
+        font-size: 14px;
+        line-height: 17px;
+        font-weight: 600;
+        color: var(--indigo-6);
+      }
+
+      &__icon {
+        font-size: 14px;
+        line-height: 17px;
+        font-weight: 600;
+        color: var(--goldenrod-2);
+      }
+    }
+
+    &__percentile {
+      grid-row: span 2;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      text-align: center;
+      text-wrap: balance;
+      padding: 16px 8px;
+
+      &__label {
+        font-size: 14px;
+        line-height: 17px;
+      }
+
+      &__number {
+        font-size: 54px;
+        font-weight: 600;
+        line-height: 73px;
+        color: var(--goldenrod-2);
+      }
+
+      &__footnote {
+        font-size: 11px;
+        line-height: 14px;
+        opacity: 0.5;
+      }
+    }
+
+    &__new-posts {
+      grid-column: span 2;
+      text-align: center;
+      position: relative;
+      overflow: hidden;
+
+      &__label {
+        font-size: 20px;
+        font-weight: 600;
+        line-height: 24px;
+        color: var(--indigo-6);
+        z-index: 1;
+        position: relative;
+      }
+
+      &__number {
+        font-size: 76px;
+        font-weight: 600;
+        line-height: 91px;
+        color: var(--goldenrod-2);
+        z-index: 1;
+        position: relative;
+      }
+
+      svg {
+        position: absolute;
+        inset-inline-start: -7px;
+        top: -4px;
+        z-index: 0;
+      }
+    }
+
+    &__most-used-hashtag {
+      grid-column: span 2;
+      text-align: center;
+      overflow: hidden;
+
+      &__hashtag {
+        font-size: 42px;
+        font-weight: 600;
+        line-height: 58px;
+        color: var(--indigo-6);
+        margin-inline-start: -100%;
+        margin-inline-end: -100%;
+      }
+
+      &__label {
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 17px;
+      }
+    }
+  }
+}
+
+.annual-report-modal {
+  max-width: 600px;
+  background: var(--indigo-1);
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+
+  .loading-indicator .circular-progress {
+    color: var(--lime);
+  }
+
+  @media screen and (max-width: $no-columns-breakpoint) {
+    border-bottom: 0;
+    border-radius: 16px 16px 0 0;
+  }
+}
+
+.notification-group--annual-report {
+  .notification-group__icon {
+    color: var(--lime);
+  }
+
+  .notification-group__main .link-button {
+    font-weight: 500;
+    color: var(--lime);
+  }
+}

app/javascript/styles_new/mastodon/basics.scss

@@ -0,0 +1,300 @@
+@use 'variables' as *;
+
+html.has-modal {
+  &,
+  body {
+    touch-action: none;
+    overscroll-behavior: none;
+    -webkit-overflow-scrolling: auto;
+    scrollbar-gutter: stable;
+  }
+
+  body {
+    overflow: hidden !important;
+  }
+}
+
+body {
+  font-family: $font-sans-serif, sans-serif;
+  background: var(--clr-bg-ambient);
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: 400;
+  color: var(--clr-text-primary);
+  text-rendering: optimizelegibility;
+
+  // Disable kerning for Japanese text to preserve monospaced alignment for readability
+  &:not(:lang(ja)) {
+    font-feature-settings: 'kern';
+  }
+
+  text-size-adjust: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
+  -webkit-tap-highlight-color: transparent;
+
+  &.system-font {
+    // system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+)
+    // -apple-system => Safari <11 specific
+    // BlinkMacSystemFont => Chrome <56 on macOS specific
+    // Segoe UI => Windows 7/8/10
+    // Oxygen => KDE
+    // Ubuntu => Unity/Ubuntu
+    // Cantarell => GNOME
+    // Fira Sans => Firefox OS
+    // Droid Sans => Older Androids (<4.0)
+    // Helvetica Neue => Older macOS <10.11
+    // $font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0)
+    font-family:
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Oxygen,
+      Ubuntu,
+      Cantarell,
+      'Fira Sans',
+      'Droid Sans',
+      'Helvetica Neue',
+      $font-sans-serif,
+      sans-serif;
+  }
+
+  &.app-body {
+    padding: 0;
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+    box-sizing: border-box;
+
+    &.layout-single-column {
+      height: auto;
+      min-height: 100vh;
+      min-height: 100dvh;
+      overflow-y: scroll;
+    }
+
+    &.layout-multiple-columns {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      padding-bottom: env(safe-area-inset-bottom);
+    }
+  }
+
+  &.player {
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    & > div {
+      height: 100%;
+    }
+
+    .video-player video {
+      width: 100%;
+      height: 100%;
+      max-height: 100vh;
+    }
+
+    .media-gallery {
+      margin-top: 0;
+      height: 100% !important;
+      border-radius: 0;
+    }
+
+    .media-gallery__item {
+      border-radius: 0;
+    }
+  }
+
+  &.embed {
+    margin: 0;
+    padding-bottom: 0;
+    overflow: hidden;
+  }
+
+  &.admin {
+    padding: 0;
+    background: var(--clr-bg-primary);
+  }
+
+  &.error {
+    position: absolute;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .dialog {
+      vertical-align: middle;
+      margin: 20px;
+
+      &__illustration {
+        img {
+          display: block;
+          max-width: 470px;
+          width: 100%;
+          height: auto;
+          margin-top: -120px;
+          margin-bottom: -45px;
+        }
+      }
+
+      h1 {
+        font-size: 20px;
+        line-height: 28px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+
+a {
+  &:focus {
+    border-radius: 4px;
+    outline: var(--outline-focus-default);
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+}
+
+.app-holder {
+  &,
+  & > div,
+  & > noscript {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    outline: 0 !important;
+  }
+
+  & > noscript {
+    min-height: 100vh;
+    min-height: 100dvh;
+  }
+}
+
+.layout-single-column .app-holder {
+  &,
+  & > div {
+    min-height: 100vh;
+    min-height: 100dvh;
+  }
+}
+
+.layout-multiple-columns .app-holder {
+  &,
+  & > div {
+    height: 100%;
+  }
+}
+
+.error-boundary,
+.app-holder noscript {
+  flex-direction: column;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.7;
+  color: var(--clr-text-error);
+  text-align: center;
+
+  & > div {
+    max-width: 500px;
+  }
+
+  p {
+    margin-bottom: 0.85em;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  a {
+    color: var(--clr-text-accent);
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: none;
+    }
+  }
+
+  &__footer {
+    color: var(--clr-text-secondary);
+    font-size: 13px;
+
+    a {
+      color: var(--clr-text-secondary);
+    }
+  }
+
+  button {
+    display: inline;
+    border: 0;
+    background: transparent;
+    color: var(--clr-text-secondary);
+    font: inherit;
+    padding: 0;
+    margin: 0;
+    line-height: inherit;
+    cursor: pointer;
+    outline: 0;
+    transition: color 300ms linear;
+    text-decoration: underline;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: none;
+    }
+
+    &.copied {
+      color: var(--mas-status-success-color);
+      transition: none;
+    }
+  }
+}
+
+.logo-resources {
+  // Not using display: none because of https://bugs.chromium.org/p/chromium/issues/detail?id=258029
+  visibility: hidden;
+  user-select: none;
+  pointer-events: none;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  z-index: -1000;
+}
+
+// NoScript adds a __ns__pop2top class to the full ancestry of blocked elements,
+// to set the z-index to a high value, which messes with modals and dropdowns.
+// Blocked elements can in theory only be media and frames/embeds, so they
+// should only appear in statuses, under divs and articles.
+body,
+div,
+article {
+  .__ns__pop2top {
+    z-index: unset !important;
+  }
+}

app/javascript/styles_new/mastodon/branding.scss

@@ -0,0 +1,5 @@
+@use 'variables' as *;
+
+.logo {
+  color: var(--clr-text-primary);
+}

app/javascript/styles_new/mastodon/containers.scss

@@ -0,0 +1,166 @@
+@use 'variables' as *;
+
+.container-alt {
+  width: 700px;
+  margin: 0 auto;
+
+  @media screen and (width <= 740px) {
+    width: 100%;
+    margin: 0;
+  }
+}
+
+.logo-container {
+  margin: 50px auto;
+
+  h1 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .logo {
+      height: 42px;
+      margin-inline-end: 10px;
+    }
+
+    a {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: var(--clr-text-primary);
+      text-decoration: none;
+      outline: 0;
+      padding: 12px 16px;
+      line-height: 32px;
+      font-weight: 500;
+      font-size: 14px;
+    }
+  }
+}
+
+.compose-standalone {
+  .compose-form {
+    width: 400px;
+    margin: 0 auto;
+    padding: 10px 0;
+    padding-bottom: 20px;
+    box-sizing: border-box;
+
+    @media screen and (width <= 400px) {
+      width: 100%;
+      padding: 20px;
+    }
+  }
+}
+
+.account-header {
+  width: 400px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  line-height: 20px;
+  box-sizing: border-box;
+  padding: 20px 0;
+  margin-top: 40px;
+  margin-bottom: 10px;
+  border-bottom: 1px solid var(--clr-border-primary);
+
+  @media screen and (width <= 440px) {
+    width: 100%;
+    margin: 0;
+    padding: 20px;
+  }
+
+  .avatar {
+    width: 48px;
+    height: 48px;
+    flex: 0 0 auto;
+
+    img {
+      width: 100%;
+      height: 100%;
+      display: block;
+      margin: 0;
+      border-radius: var(--avatar-border-radius);
+    }
+  }
+
+  .name {
+    flex: 1 1 auto;
+    color: var(--clr-text-primary);
+
+    .username {
+      display: block;
+      font-size: 16px;
+      line-height: 24px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      color: var(--clr-text-primary);
+    }
+  }
+
+  .logout-link {
+    display: block;
+    font-size: 32px;
+    line-height: 40px;
+    flex: 0 0 auto;
+  }
+}
+
+.redirect {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  font-size: 14px;
+  line-height: 18px;
+
+  &__logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 30px;
+
+    img {
+      height: 48px;
+    }
+  }
+
+  &__message {
+    text-align: center;
+
+    h1 {
+      font-size: 17px;
+      line-height: 22px;
+      font-weight: 700;
+      margin-bottom: 30px;
+    }
+
+    p {
+      margin-bottom: 30px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    a {
+      color: var(--clr-text-accent);
+      font-weight: 500;
+      text-decoration: none;
+
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__link {
+    margin-top: 15px;
+  }
+}

app/javascript/styles_new/mastodon/css_variables.scss

@@ -0,0 +1,213 @@
+@use 'theme_utils' as utils;
+
+:root {
+  --clr-black: #000;
+  --clr-grey-950: #181821;
+  --clr-grey-800: #292938;
+  --clr-grey-700: #444664;
+  --clr-grey-600: #545778;
+  --clr-grey-500: #696d91;
+  --clr-grey-400: #8b8dac;
+  --clr-grey-300: #b4b6cb;
+  --clr-grey-200: #d8d9e3;
+  --clr-grey-100: #f0f0f5;
+  --clr-grey-50: #f0f1ff;
+  --clr-white: #fff;
+  --clr-indigo-600: #6147e6;
+  --clr-indigo-400: #8886ff;
+  --clr-indigo-300: #a5abfd;
+  --clr-indigo-200: #c8cdfe;
+  --clr-indigo-100: #e0e3ff;
+  --clr-indigo-50: #f0f1ff;
+  --clr-red-500: #ff637e;
+  --clr-red-600: #ec003f;
+  --clr-yellow-400: #ffb900;
+  --clr-yellow-600: #e17100;
+  --clr-green-400: #05df72;
+  --clr-green-600: #00a63e;
+
+  /* TEXT TOKENS */
+
+  --clr-text-primary: var(--clr-grey-50);
+  --clr-text-secondary: var(--clr-grey-400);
+  --clr-text-tertiary: var(--clr-grey-500);
+  --clr-text-on-inverted: var(--clr-grey-950);
+  --clr-text-accent: var(--clr-indigo-400);
+  --clr-text-accent-subtle: color-mix(
+    in oklab,
+    var(--clr-text-primary),
+    var(--clr-text-accent)
+  );
+  --clr-text-on-accent-strong: var(--clr-white);
+  --clr-text-error: var(--clr-red-500);
+  --clr-text-on-error-strong: var(--clr-white);
+  --clr-text-warning: var(--clr-yellow-400);
+  --clr-text-on-warning-strong: var(--clr-white);
+  --clr-text-success: var(--clr-green-400);
+  --clr-text-on-success-strong: var(--clr-white);
+  --clr-text-disabled: var(--clr-grey-600);
+  --clr-text-on-disabled: var(--clr-grey-400);
+  --clr-text-bookmark-highlight: var(--clr-text-error);
+  --clr-text-favourite-highlight: var(--clr-text-warning);
+  --clr-text-on-media: var(--clr-white);
+  --clr-text-status-links: color-mix(
+    in oklab,
+    var(--clr-text-primary),
+    var(--clr-text-secondary)
+  );
+
+  /* BACKGROUND TOKENS */
+
+  --clr-bg-primary: var(--clr-grey-950);
+  --clr-bg-secondary-base: var(--clr-indigo-200);
+  --clr-bg-secondary-strength: 10%;
+  --clr-bg-secondary: #{utils.css-alpha(
+      var(--clr-bg-secondary-base),
+      var(--clr-bg-secondary-strength)
+    )};
+  --clr-bg-secondary-solid: color-mix(
+    in srgb,
+    var(--clr-bg-primary),
+    var(--clr-bg-secondary-base) var(--clr-bg-secondary-strength)
+  );
+
+  /* Secondary with doubled mix amount */
+  --clr-bg-tertiary: color-mix(
+    in oklab,
+    var(--clr-bg-primary),
+    var(--clr-bg-secondary-base) calc(2 * var(--clr-bg-secondary-strength))
+  );
+  --clr-bg-ambient: var(--clr-bg-primary);
+  --clr-bg-elevated: var(--clr-grey-800);
+  --clr-bg-inverted: var(--clr-grey-50);
+  --clr-bg-media-base: var(--clr-black);
+  --clr-bg-media-strength: 65%;
+  --clr-bg-media: #{utils.css-alpha(
+      var(--clr-bg-media-base),
+      var(--clr-bg-media-strength)
+    )};
+  --clr-bg-overlay: var(--clr-bg-primary);
+  --clr-bg-disabled: var(--clr-grey-700);
+  --clr-bg-accent-subtle-base: var(--clr-indigo-400);
+  --clr-bg-accent-subtle-strength: 10%;
+  --clr-bg-accent-subtle: #{utils.css-alpha(
+      var(--clr-bg-accent-subtle-base),
+      var(--clr-bg-accent-subtle-strength)
+    )};
+  --clr-bg-accent-subtle-highlighted: #{utils.css-alpha(
+      var(--clr-bg-accent-subtle-base),
+      calc(var(--clr-bg-accent-subtle-strength) * 1.5)
+    )};
+  --clr-bg-accent-strong: var(--clr-indigo-600);
+  --clr-bg-accent-strong-highlighted: color-mix(
+    in oklab,
+    var(--clr-bg-accent-strong),
+    black var(--clr-bg-accent-subtle-strength)
+  );
+  --clr-bg-error-subtle-base: #f41b3b;
+  --clr-bg-error-subtle-strength: 12%;
+  --clr-bg-error-subtle: #{utils.css-alpha(
+      var(--clr-bg-error-subtle-base),
+      var(--clr-bg-error-subtle-strength)
+    )};
+  --clr-bg-error-strong: var(--clr-red-600);
+  --clr-bg-error-strong-highlighted: color-mix(
+    in oklab,
+    var(--clr-bg-error-strong),
+    black var(--clr-bg-error-subtle-strength)
+  );
+  --clr-bg-warning-subtle-base: #ffca1b;
+  --clr-bg-warning-subtle-strength: 10%;
+  --clr-bg-warning-subtle: #{utils.css-alpha(
+      var(--clr-bg-warning-subtle-base),
+      var(--clr-bg-warning-subtle-strength)
+    )};
+  --clr-bg-warning-strong: var(--clr-yellow-600);
+  --clr-bg-warning-strong-highlighted: color-mix(
+    in oklab,
+    var(--clr-bg-warning-strong),
+    black var(--clr-bg-warning-subtle-strength)
+  );
+  --clr-bg-success-subtle-base: #17e865;
+  --clr-bg-success-subtle-strength: 15%;
+  --clr-bg-success-subtle: #{utils.css-alpha(
+      var(--clr-bg-success-subtle-base),
+      var(--clr-bg-success-subtle-strength)
+    )};
+  --clr-bg-success-strong: var(--clr-green-600);
+  --clr-bg-success-strong-highlighted: color-mix(
+    in oklab,
+    var(--clr-bg-success-strong),
+    black var(--clr-bg-success-subtle-strength)
+  );
+
+  /* BORDER TOKENS */
+
+  --clr-border-primary-base: var(--clr-indigo-200);
+  --clr-border-primary-strength: 18%;
+  --clr-border-primary: #{utils.css-alpha(
+      var(--clr-border-primary-base),
+      var(--clr-border-primary-strength)
+    )};
+  --clr-border-media: rgb(252 248 255 / 15%);
+  --clr-border-on-bg-secondary: #{utils.css-alpha(
+      var(--clr-border-primary-base),
+      calc(var(--clr-border-primary-strength) / 1.5)
+    )};
+  --clr-border-on-bg-accent-subtle: var(--clr-border-primary);
+  --clr-border-on-bg-error-subtle: #{utils.css-alpha(
+      var(--clr-text-error),
+      50%
+    )};
+  --clr-border-on-bg-warning-subtle: #{utils.css-alpha(
+      var(--clr-text-warning),
+      50%
+    )};
+  --clr-border-on-bg-success-subtle: #{utils.css-alpha(
+      var(--clr-text-success),
+      50%
+    )};
+  --clr-border-on-bg-inverted: var(--clr-border-primary);
+
+  /* SHADOW TOKENS */
+
+  --clr-shadow-primary-base: var(--clr-black);
+  --clr-shadow-primary-strength: 80%;
+  --clr-shadow-primary: #{utils.css-alpha(
+      var(--clr-shadow-primary-base),
+      var(--clr-shadow-primary-strength)
+    )};
+  --dropdown-shadow:
+    0 20px 25px -5px var(--clr-shadow-primary),
+    0 8px 10px -6px var(--clr-shadow-primary);
+  --overlay-icon-shadow: drop-shadow(0 0 8px var(--clr-shadow-primary));
+
+  /* GRAPHS/CHARTS TOKENS */
+
+  --clr-graph-primary-stroke: var(--clr-text-accent);
+  --clr-graph-primary-fill: var(--clr-bg-accent-subtle);
+  --clr-graph-warning-stroke: var(--clr-text-warning);
+  --clr-graph-warning-fill: var(--clr-bg-warning-subtle);
+  --clr-graph-disabled-stroke: var(--clr-text-disabled);
+  --clr-graph-disabled-fill: var(--clr-bg-disabled);
+
+  /* LEGACY TOKENS */
+
+  --rich-text-container-color: rgb(87 24 60 / 100%);
+  --rich-text-text-color: rgb(255 175 212 / 100%);
+  --rich-text-decorations-color: rgb(128 58 95 / 100%);
+
+  /* MISCELLANEOUS */
+
+  --outline-focus-default: 2px solid var(--clr-text-accent);
+  --avatar-border-radius: 8px;
+}
+
+body {
+  // Variable for easily inverting directional UI elements,
+  --text-x-direction: 1;
+
+  &.rtl {
+    --text-x-direction: -1;
+  }
+}

app/javascript/styles_new/mastodon/dashboard.scss

@@ -0,0 +1,120 @@
+@use 'variables' as *;
+
+.dashboard__counters {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -5px;
+  margin-bottom: 20px;
+
+  & > div {
+    box-sizing: border-box;
+    flex: 0 0 33.333%;
+    padding: 0 5px;
+    margin-bottom: 10px;
+
+    & > div,
+    & > a {
+      padding: 20px;
+      background: var(--clr-bg-primary);
+      border-radius: 4px;
+      border: 1px solid var(--clr-border-primary);
+      box-sizing: border-box;
+      height: 100%;
+    }
+
+    & > a {
+      text-decoration: none;
+      color: inherit;
+      display: block;
+
+      &:hover,
+      &:focus,
+      &:active {
+        background: var(--clr-bg-accent-subtle);
+      }
+    }
+  }
+
+  &__num,
+  &__text {
+    text-align: center;
+    font-weight: 500;
+    font-size: 24px;
+    color: var(--clr-text-primary);
+    margin-bottom: 20px;
+    line-height: 30px;
+  }
+
+  &__text {
+    font-size: 18px;
+  }
+
+  &__label {
+    font-size: 14px;
+    color: var(--clr-text-secondary);
+    text-align: center;
+    font-weight: 500;
+  }
+}
+
+.dashboard {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
+  gap: 10px;
+
+  @media screen and (width <= 1350px) {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  }
+
+  &__item {
+    &--span-double-column {
+      grid-column: span 2;
+    }
+
+    &--span-double-row {
+      grid-row: span 2;
+    }
+
+    h4 {
+      padding-top: 20px;
+    }
+  }
+
+  &__quick-access {
+    display: flex;
+    align-items: baseline;
+    border-radius: 4px;
+    background: var(--clr-bg-accent-strong);
+    color: var(--clr-text-on-accent-strong);
+    transition: all 100ms ease-in;
+    font-size: 14px;
+    padding: 8px 16px;
+    text-decoration: none;
+    margin-bottom: 4px;
+
+    &:active,
+    &:focus,
+    &:hover {
+      background-color: var(--clr-bg-accent-strong-highlighted);
+      transition: all 200ms ease-out;
+    }
+
+    &.positive {
+      background: var(--clr-bg-success-subtle);
+      color: var(--clr-text-success);
+    }
+
+    &.negative {
+      background: var(--clr-bg-error-subtle);
+      color: var(--clr-text-error);
+    }
+
+    span {
+      flex: 1 1 auto;
+    }
+
+    strong {
+      font-weight: 700;
+    }
+  }
+}

app/javascript/styles_new/mastodon/emoji_picker.scss

@@ -0,0 +1,248 @@
+@use 'variables' as *;
+
+.emoji-mart {
+  font-size: 13px;
+  display: inline-block;
+
+  &,
+  * {
+    box-sizing: border-box;
+    line-height: 1.15;
+  }
+
+  .emoji-mart-emoji {
+    padding: 6px;
+  }
+}
+
+.emoji-mart-bar {
+  &:first-child {
+    background: var(--clr-bg-tertiary);
+    border-bottom: 1px solid var(--clr-border-primary);
+  }
+}
+
+.emoji-mart-anchors {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 6px;
+  line-height: 0;
+}
+
+.emoji-mart-anchor {
+  position: relative;
+  flex: 1;
+  text-align: center;
+  padding: 12px 4px;
+  overflow: hidden;
+  transition: color 0.1s ease-out;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  color: var(--clr-text-secondary);
+
+  &:hover {
+    color: color-mix(
+      in oklab,
+      var(--clr-text-primary),
+      var(--clr-text-secondary)
+    );
+  }
+}
+
+.emoji-mart-anchor-selected {
+  color: var(--clr-text-accent);
+
+  &:hover {
+    color: var(--clr-text-accent-subtle);
+  }
+
+  .emoji-mart-anchor-bar {
+    bottom: -1px;
+  }
+}
+
+.emoji-mart-anchor-bar {
+  position: absolute;
+  bottom: -5px;
+  inset-inline-start: 0;
+  width: 100%;
+  height: 4px;
+  background-color: var(--clr-text-accent);
+}
+
+.emoji-mart-anchors {
+  i {
+    display: inline-block;
+    width: 100%;
+    max-width: 22px;
+  }
+
+  svg {
+    fill: currentColor;
+    max-height: 18px;
+  }
+}
+
+.emoji-mart-scroll {
+  overflow-y: scroll;
+  height: 270px;
+  max-height: 35vh;
+  padding: 0 6px 6px;
+  will-change: transform;
+}
+
+.emoji-mart-search {
+  padding: 10px;
+  padding-inline-end: 45px;
+  position: relative;
+
+  input {
+    font-size: 16px;
+    font-weight: 400;
+    padding: 7px 9px;
+    padding-inline-end: 25px;
+    font-family: inherit;
+    display: block;
+    width: 100%;
+    background: var(--clr-bg-secondary);
+    color: var(--clr-text-secondary);
+    border: 1px solid var(--clr-border-primary);
+    border-radius: 4px;
+
+    &::-moz-focus-inner {
+      border: 0;
+    }
+
+    &:active,
+    &:focus {
+      outline: none !important;
+      border-width: 1px !important;
+    }
+
+    &::-webkit-search-cancel-button {
+      display: none;
+    }
+  }
+}
+
+.emoji-mart-search-icon {
+  position: absolute;
+  top: 18px;
+  inset-inline-end: 45px + 5px;
+  z-index: 2;
+  padding: 2px 5px 1px;
+  border: 0;
+  background: none;
+  transition: all 100ms linear;
+  transition-property: opacity;
+  pointer-events: auto;
+
+  &:disabled {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  svg {
+    fill: currentColor;
+  }
+}
+
+.emoji-mart-category .emoji-mart-emoji {
+  cursor: pointer;
+
+  span {
+    z-index: 1;
+    position: relative;
+    text-align: center;
+    display: inline-flex !important;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &:hover::before {
+    z-index: -1;
+    content: '';
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--clr-bg-accent-subtle);
+    border-radius: 100%;
+  }
+}
+
+.emoji-mart-category-label {
+  z-index: 2;
+  position: relative;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+
+  span {
+    display: block;
+    width: 100%;
+    font-weight: 500;
+    padding: 5px 6px;
+  }
+}
+
+/* For screenreaders only, via https://stackoverflow.com/a/19758620 */
+.emoji-mart-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  border: 0;
+}
+
+.emoji-mart-category-list {
+  margin: 0;
+  padding: 0;
+}
+
+.emoji-mart-category-list li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: inline-block;
+}
+
+.emoji-mart-emoji {
+  position: relative;
+  display: inline-block;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  font-size: 0;
+
+  span {
+    width: 22px;
+    height: 22px;
+  }
+}
+
+.emoji-mart-no-results {
+  font-size: 14px;
+  color: var(--clr-text-tertiary);
+  text-align: center;
+  padding: 5px 6px;
+  padding-top: 70px;
+
+  .emoji-mart-no-results-label {
+    margin-top: 0.2em;
+  }
+
+  .emoji-mart-emoji:hover::before {
+    cursor: default;
+    content: none;
+  }
+}
+
+.emoji-mart-preview {
+  display: none;
+}

app/javascript/styles_new/mastodon/lists.scss

@@ -0,0 +1,19 @@
+.no-list {
+  list-style: none;
+
+  li {
+    display: inline-block;
+    margin: 0 5px;
+  }
+}
+
+.recovery-codes {
+  list-style: none;
+  margin: 0 auto;
+
+  li {
+    font-size: 125%;
+    line-height: 1.5;
+    letter-spacing: 1px;
+  }
+}

app/javascript/styles_new/mastodon/modal.scss

@@ -0,0 +1,53 @@
+@use 'variables' as *;
+
+.modal-layout {
+  background: var(--clr-bg-accent-subtle);
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  padding: 0;
+}
+
+.modal-layout__mastodon {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: flex-end;
+
+  > div {
+    flex: 1;
+    max-height: 235px;
+    position: relative;
+
+    img {
+      max-height: 100%;
+      max-width: 100%;
+      height: 100%;
+      position: absolute;
+      bottom: 0;
+      inset-inline-start: 0;
+    }
+  }
+}
+
+@media screen and (width <= 600px) {
+  .account-header {
+    margin-top: 0;
+  }
+}
+
+.with-zig-zag-decoration {
+  &::after {
+    content: '';
+    position: absolute;
+    inset: auto 0 0;
+    height: 32px;
+    background-color: var(--clr-bg-accent-subtle);
+
+    /* 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>');
+    mask-position: bottom;
+    mask-repeat: repeat-x;
+    z-index: -1;
+  }
+}

app/javascript/styles_new/mastodon/polls.scss

@@ -0,0 +1,232 @@
+@use 'sass:color';
+@use 'variables' as *;
+
+.poll {
+  margin-top: 16px;
+  font-size: 14px;
+
+  li {
+    margin-bottom: 10px;
+    position: relative;
+  }
+
+  &__chart {
+    border-radius: 4px;
+    display: block;
+    background: rgb(from var(--clr-text-accent) r g b / 60%);
+    height: 5px;
+    min-width: 1%;
+
+    &.leading {
+      background: var(--clr-text-accent);
+    }
+  }
+
+  progress {
+    border: 0;
+    display: block;
+    width: 100%;
+    height: 5px;
+    appearance: none;
+    background: transparent;
+
+    &::-webkit-progress-bar {
+      background: transparent;
+    }
+
+    // Those rules need to be entirely separate or they won't work, hence the
+    // duplication
+    &::-moz-progress-bar {
+      border-radius: 4px;
+      background: rgb(from var(--clr-text-accent) r g b / 60%);
+    }
+
+    &::-webkit-progress-value {
+      border-radius: 4px;
+      background: rgb(from var(--clr-text-accent) r g b / 60%);
+    }
+  }
+
+  &__option {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 6px 0;
+    line-height: 18px;
+    cursor: default;
+    overflow: hidden;
+
+    &__text {
+      display: inline-block;
+      overflow-wrap: break-word;
+      max-width: calc(100% - 45px - 25px);
+    }
+
+    input[type='radio'],
+    input[type='checkbox'] {
+      display: none;
+    }
+
+    .autosuggest-input {
+      flex: 1 1 auto;
+    }
+
+    input[type='text'] {
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      font-size: 14px;
+      color: var(--clr-text-primary);
+      outline: 0;
+      font-family: inherit;
+      background: var(--clr-bg-primary);
+      border: 1px solid var(--clr-text-secondary);
+      border-radius: 4px;
+      padding: 8px 12px;
+
+      &:focus {
+        border-color: var(--clr-text-accent);
+      }
+
+      @media screen and (width <= 600px) {
+        font-size: 16px;
+        line-height: 24px;
+        letter-spacing: 0.5px;
+      }
+    }
+
+    &.selectable {
+      cursor: pointer;
+    }
+
+    &.editable,
+    &.disabled {
+      align-items: center;
+      overflow: visible;
+    }
+  }
+
+  &__input {
+    display: block;
+    position: relative;
+    border: 1px solid var(--clr-text-secondary);
+    box-sizing: border-box;
+    width: 17px;
+    height: 17px;
+    border-radius: 50%;
+    flex: 0 0 auto;
+
+    &.checkbox {
+      border-radius: 4px;
+    }
+
+    &:active,
+    &:focus,
+    &:hover {
+      border-color: var(--clr-text-success);
+      border-width: 4px;
+    }
+
+    &.active {
+      background-color: var(--clr-bg-success-strong);
+      border-color: var(--clr-text-success);
+    }
+
+    &::-moz-focus-inner {
+      outline: 0 !important;
+      border: 0;
+    }
+
+    &:focus,
+    &:active {
+      outline: 0 !important;
+    }
+
+    &.disabled {
+      border-color: var(--clr-text-disabled);
+
+      &.active {
+        background: var(--clr-text-disabled);
+      }
+
+      &:active,
+      &:focus,
+      &:hover {
+        border-color: var(--clr-text-disabled);
+        border-width: 1px;
+      }
+    }
+  }
+
+  &__option.editable &__input,
+  &__option.disabled &__input {
+    &:active,
+    &:focus,
+    &:hover {
+      border-color: var(--clr-text-primary);
+      border-width: 1px;
+    }
+  }
+
+  &__number {
+    display: inline-block;
+    width: 45px;
+    font-weight: 700;
+    flex: 0 0 45px;
+  }
+
+  &__voted {
+    padding: 0 5px;
+    display: inline-block;
+
+    &__mark {
+      font-size: 18px;
+    }
+  }
+
+  &__footer {
+    padding-top: 6px;
+    padding-bottom: 5px;
+    color: var(--clr-text-tertiary);
+  }
+
+  &__link {
+    display: inline;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    color: var(--clr-text-tertiary);
+    text-decoration: underline;
+    font-size: inherit;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    &:active,
+    &:focus {
+      background-color: var(--clr-bg-secondary);
+    }
+  }
+
+  .button {
+    height: 36px;
+    padding: 0 16px;
+    margin-inline-end: 10px;
+    font-size: 14px;
+  }
+}
+
+.muted .poll {
+  color: var(--clr-text-tertiary);
+
+  &__chart {
+    background: rgb(from var(--clr-text-accent) r g b / 40%);
+
+    &.leading {
+      background: rgb(from var(--clr-text-accent) r g b / 60%);
+    }
+  }
+}

app/javascript/styles_new/mastodon/reset.scss

@@ -0,0 +1,58 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+html:has(body.custom-scrollbars) {
+  scrollbar-color: var(--clr-text-secondary) var(--clr-bg-secondary);
+}

app/javascript/styles_new/mastodon/rich_text.scss

@@ -0,0 +1,116 @@
+.status__content__text,
+.e-content,
+.edit-indicator__content,
+.reply-indicator__content {
+  code {
+    background: var(--rich-text-container-color);
+    padding: 4px;
+    border-radius: 4px;
+    color: var(--rich-text-text-color);
+    font-size: 0.85em;
+  }
+
+  pre {
+    background: var(--rich-text-container-color);
+    padding: 8px;
+    border-radius: 4px;
+    color: var(--rich-text-text-color);
+
+    code {
+      padding: 0;
+      background: transparent;
+    }
+  }
+
+  pre,
+  blockquote {
+    margin-bottom: 22px;
+    white-space: pre-wrap;
+    unicode-bidi: plaintext;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  blockquote {
+    padding-inline-start: 32px;
+    color: var(--rich-text-text-color);
+    white-space: normal;
+    position: relative;
+
+    &::before {
+      display: block;
+      content: '';
+      width: 24px;
+      height: 20px;
+      mask-image: url('@/images/quote.svg');
+      background-color: var(--rich-text-decorations-color);
+      position: absolute;
+      inset-inline-start: 0;
+      top: 0;
+    }
+
+    blockquote {
+      margin-top: 4px;
+      border-inline-start: 3px solid var(--rich-text-decorations-color);
+      padding-inline-start: 16px;
+
+      &::before {
+        display: none;
+      }
+    }
+
+    p:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+
+  & > ul,
+  & > ol {
+    margin-bottom: 22px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  b,
+  strong {
+    font-weight: 700;
+  }
+
+  em,
+  i {
+    font-style: italic;
+  }
+
+  ul,
+  ol {
+    padding-inline-start: 24px;
+
+    li {
+      padding-inline-start: 8px;
+
+      &::marker {
+        text-align: end;
+      }
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+
+  ul {
+    list-style-type: '•';
+
+    li::marker {
+      text-align: start;
+    }
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+}

app/javascript/styles_new/mastodon/rtl.scss

@@ -0,0 +1,50 @@
+@use 'variables' as *;
+
+body.rtl {
+  direction: rtl;
+
+  .reactions-bar {
+    direction: rtl;
+  }
+
+  .announcements__mastodon,
+  .drawer__inner__mastodon > img {
+    transform: scaleX(-1);
+  }
+
+  .compose-form .autosuggest-textarea__textarea {
+    padding-right: 10px;
+    padding-left: 10px + 22px;
+  }
+
+  .columns-area {
+    direction: rtl;
+  }
+
+  .account__avatar-wrapper {
+    float: right;
+  }
+
+  .column-header__setting-arrows {
+    float: left;
+  }
+
+  .admin-wrapper {
+    direction: rtl;
+  }
+
+  .react-swipeable-view-container > * {
+    direction: rtl;
+  }
+
+  .column-back-button__icon {
+    transform: scale(-1, 1);
+  }
+
+  .dismissable-banner,
+  .warning-banner {
+    &__action {
+      float: left;
+    }
+  }
+}

app/javascript/styles_new/mastodon/tables.scss

@@ -0,0 +1,375 @@
+@use 'variables' as *;
+
+.table {
+  width: 100%;
+  max-width: 100%;
+  border-spacing: 0;
+  border-collapse: collapse;
+
+  th,
+  td {
+    padding: 8px;
+    line-height: 18px;
+    vertical-align: top;
+    border-bottom: 1px solid var(--clr-border-primary);
+    text-align: start;
+    background: var(--clr-bg-primary);
+
+    &.critical {
+      font-weight: 700;
+      color: var(--clr-text-warning);
+    }
+  }
+
+  & > thead > tr > th {
+    vertical-align: bottom;
+    font-weight: 500;
+  }
+
+  & > tbody > tr > th {
+    font-weight: 500;
+  }
+
+  & > tbody > tr:nth-child(odd) > td,
+  & > tbody > tr:nth-child(odd) > th {
+    background: var(--clr-bg-primary);
+  }
+
+  & > tbody > tr:last-child > td,
+  & > tbody > tr:last-child > th {
+    border-bottom: 0;
+  }
+
+  a {
+    color: var(--clr-text-secondary);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--clr-text-accent);
+    }
+  }
+
+  strong {
+    font-weight: 500;
+
+    @each $lang in $cjk-langs {
+      &:lang(#{$lang}) {
+        font-weight: 700;
+      }
+    }
+  }
+
+  &.inline-table {
+    & > tbody > tr:nth-child(odd) {
+      & > td,
+      & > th {
+        background: transparent;
+      }
+    }
+
+    & > tbody > tr:first-child {
+      & > td,
+      & > th {
+        border-top: 0;
+      }
+    }
+  }
+
+  &.horizontal-table {
+    border-collapse: collapse;
+    border-style: hidden;
+
+    & > tbody > tr > th,
+    & > tbody > tr > td {
+      padding: 11px 10px;
+      background: transparent;
+      border: 1px solid var(--clr-border-primary);
+      color: var(--clr-text-primary);
+    }
+
+    & > tbody > tr > th {
+      color: var(--clr-text-secondary);
+      font-weight: 600;
+    }
+  }
+
+  &.batch-table {
+    & > thead > tr > th {
+      background: var(--clr-bg-primary);
+      border-top: 1px solid var(--clr-border-primary);
+      border-bottom: 1px solid var(--clr-border-primary);
+
+      &:first-child {
+        border-radius: 4px 0 0;
+        border-inline-start: 1px solid var(--clr-border-primary);
+      }
+
+      &:last-child {
+        border-radius: 0 4px 0 0;
+        border-inline-end: 1px solid var(--clr-border-primary);
+      }
+    }
+  }
+
+  &--invites tbody td {
+    vertical-align: middle;
+  }
+}
+
+.table-wrapper {
+  overflow: auto;
+  margin-bottom: 20px;
+}
+
+samp {
+  font-family: $font-monospace, monospace;
+}
+
+button.table-action-link {
+  background: transparent;
+  border: 0;
+  font: inherit;
+}
+
+button.table-action-link,
+a.table-action-link {
+  text-decoration: none;
+  display: inline-block;
+  margin-inline-end: 5px;
+  padding: 0 10px;
+  color: var(--clr-text-secondary);
+  font-weight: 500;
+  white-space: nowrap;
+
+  &:hover {
+    color: var(--clr-text-accent);
+  }
+
+  &:first-child {
+    padding-inline-start: 0;
+  }
+}
+
+.batch-table {
+  &--no-toolbar {
+    .batch-table__toolbar {
+      position: static;
+      height: 4px;
+      border-bottom: none;
+    }
+  }
+
+  &__toolbar,
+  &__row {
+    display: flex;
+
+    &__select {
+      box-sizing: border-box;
+      padding: 8px 16px;
+      cursor: pointer;
+      min-height: 100%;
+
+      input {
+        margin-top: 8px;
+      }
+
+      &--aligned {
+        display: flex;
+        align-items: center;
+
+        input {
+          margin-top: 0;
+        }
+      }
+    }
+
+    &__actions,
+    &__content {
+      padding: 8px 0;
+      padding-inline-end: 16px;
+      flex: 1 1 auto;
+    }
+  }
+
+  &__toolbar {
+    position: sticky;
+    top: 0;
+    z-index: 200;
+    border: 1px solid var(--clr-border-primary);
+    background: var(--clr-bg-primary);
+    border-radius: 4px 4px 0 0;
+    height: 47px;
+    align-items: center;
+
+    &__actions {
+      text-align: end;
+      padding-inline-end: 16px - 5px;
+
+      .table-action-link {
+        padding: 0;
+      }
+    }
+  }
+
+  &__select-all {
+    background: var(--clr-bg-primary);
+    height: 47px;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--clr-border-primary);
+    border-top: 0;
+    color: var(--clr-text-primary);
+    display: none;
+
+    &.active {
+      display: flex;
+    }
+
+    .selected,
+    .not-selected {
+      display: none;
+
+      &.active {
+        display: block;
+      }
+    }
+
+    strong {
+      font-weight: 700;
+    }
+
+    span {
+      padding: 8px;
+      display: inline-block;
+    }
+
+    button {
+      background: transparent;
+      border: 0;
+      font: inherit;
+      color: var(--clr-text-accent);
+      border-radius: 4px;
+      font-weight: 700;
+      padding: 8px;
+
+      &:hover,
+      &:focus,
+      &:active {
+        background: var(--clr-bg-secondary);
+      }
+    }
+  }
+
+  &__form {
+    padding: 16px;
+    border: 1px solid var(--clr-border-primary);
+    border-top: 0;
+    background: var(--clr-bg-primary);
+
+    .fields-row {
+      padding-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &__row {
+    border: 1px solid var(--clr-border-primary);
+    border-top: 0;
+    background: var(--clr-bg-primary);
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      .optional &:first-child {
+        border-top: 1px solid var(--clr-border-primary);
+      }
+    }
+
+    &:last-child {
+      border-radius: 0 0 4px 4px;
+    }
+
+    &__content {
+      padding-top: 12px;
+      padding-bottom: 16px;
+      overflow: hidden;
+
+      &--unpadded {
+        padding: 0;
+      }
+
+      &--padded {
+        padding: 12px 16px 16px;
+      }
+
+      &--with-image {
+        display: flex;
+        align-items: center;
+      }
+
+      &__image {
+        flex: 0 0 auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-inline-end: 10px;
+
+        .emojione {
+          width: 32px;
+          height: 32px;
+        }
+      }
+
+      &__text {
+        flex: 1 1 auto;
+      }
+
+      &__quote {
+        padding: 12px;
+        padding-top: 0;
+      }
+
+      &__extra {
+        flex: 0 0 auto;
+        text-align: end;
+        color: var(--clr-text-secondary);
+        font-weight: 500;
+      }
+    }
+
+    .directory__tag {
+      margin: 0;
+      width: 100%;
+
+      a {
+        background: transparent;
+        border-radius: 0;
+      }
+    }
+  }
+
+  &.optional .batch-table__toolbar,
+  &.optional .batch-table__row__select {
+    @media screen and (max-width: $no-gap-breakpoint) {
+      display: none;
+    }
+  }
+
+  // Reset the status card to not have borders, background or padding when
+  // inline in the table of statuses
+  .batch-table__row__content > .status__card {
+    border: none;
+    background: none;
+    padding: 0;
+  }
+
+  @media screen and (width <= 870px) {
+    .accounts-table tbody td.optional {
+      display: none;
+    }
+  }
+}
+
+.one-liner {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

app/javascript/styles_new/mastodon/widgets.scss

@@ -0,0 +1,183 @@
+@use 'sass:color';
+@use 'variables' as *;
+
+.directory {
+  &__tag {
+    box-sizing: border-box;
+    margin-bottom: 10px;
+
+    & > a,
+    & > div {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border: 1px solid var(--clr-border-primary);
+      border-radius: 4px;
+      padding: 15px;
+      text-decoration: none;
+      color: inherit;
+      box-shadow: 0 0 15px var(--clr-shadow-primary);
+    }
+
+    & > a {
+      &:hover,
+      &:active,
+      &:focus {
+        background: var(--clr-bg-primary);
+      }
+    }
+
+    &.active > a {
+      background: var(--clr-bg-accent-strong);
+      cursor: default;
+    }
+
+    &.disabled > div {
+      opacity: 0.5;
+      cursor: default;
+    }
+
+    h4 {
+      flex: 1 1 auto;
+      font-size: 18px;
+      font-weight: 700;
+      color: var(--clr-text-primary);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      .fa {
+        color: var(--clr-text-secondary);
+      }
+
+      small {
+        display: block;
+        font-weight: 400;
+        font-size: 15px;
+        margin-top: 8px;
+        color: var(--clr-text-secondary);
+      }
+    }
+
+    &.active h4 {
+      &,
+      .fa,
+      small,
+      .trends__item__current {
+        color: var(--clr-text-primary);
+      }
+    }
+
+    .avatar-stack {
+      flex: 0 0 auto;
+      width: (36px + 4px) * 3;
+    }
+
+    &.active .avatar-stack .account__avatar {
+      border-color: var(--clr-text-accent);
+    }
+
+    .trends__item__current {
+      padding-inline-end: 0;
+    }
+  }
+}
+
+.accounts-table {
+  width: 100%;
+
+  .account {
+    max-width: calc(56px + 30ch);
+    padding: 0;
+    border: 0;
+  }
+
+  strong {
+    font-weight: 700;
+  }
+
+  thead th {
+    text-align: center;
+    text-transform: uppercase;
+    color: var(--clr-text-secondary);
+    font-weight: 700;
+    padding: 10px;
+
+    &:first-child {
+      text-align: start;
+    }
+  }
+
+  tbody td {
+    padding: 15px 0;
+    vertical-align: middle;
+    border-bottom: 1px solid var(--clr-border-primary);
+  }
+
+  tbody tr:last-child td {
+    border-bottom: 0;
+  }
+
+  &__count {
+    width: 120px;
+    text-align: center;
+    font-size: 15px;
+    font-weight: 500;
+    color: var(--clr-text-primary);
+
+    small {
+      display: block;
+      color: var(--clr-text-secondary);
+      font-weight: 400;
+      font-size: 14px;
+    }
+  }
+
+  tbody td.accounts-table__extra {
+    width: 120px;
+    text-align: end;
+    color: var(--clr-text-secondary);
+    padding-inline-end: 16px;
+
+    a {
+      text-decoration: none;
+      color: inherit;
+
+      &:focus,
+      &:hover,
+      &:active {
+        color: var(--clr-text-accent);
+      }
+    }
+  }
+
+  &__comment {
+    width: 50%;
+    vertical-align: initial !important;
+  }
+
+  tbody td.accounts-table__interrelationships {
+    width: 21px;
+    padding-inline-end: 16px;
+  }
+
+  .icon {
+    &.active {
+      color: var(--clr-text-accent);
+    }
+
+    &.passive {
+      color: var(--clr-text-warning);
+    }
+
+    &.active.passive {
+      color: var(--clr-text-success);
+    }
+  }
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    tbody td.optional {
+      display: none;
+    }
+  }
+}

config/locales/en.yml

@@ -2004,7 +2004,10 @@ en:
     title: The terms of service of %{domain} are changing
   themes:
     contrast: Mastodon (High contrast)
+    contrast-tokens: Mastodon Design Tokens (High contrast)
+    dark-tokens: Mastodon Design Tokens (Dark)
     default: Mastodon (Dark)
+    light-tokens: Mastodon Design Tokens (Light)
     mastodon-light: Mastodon (Light)
     system: Automatic (use system theme)
   time:

config/themes.yml

@@ -1,3 +1,6 @@
 default: styles/application.scss
 contrast: styles/contrast.scss
 mastodon-light: styles/mastodon-light.scss
+dark-tokens: styles_new/application.scss
+light-tokens: styles_new/mastodon-light.scss
+contrast-tokens: styles_new/contrast.scss

stylelint.config.js

@@ -2,6 +2,7 @@ module.exports = {
   extends: ['stylelint-config-standard-scss', 'stylelint-config-prettier-scss'],
   ignoreFiles: [
     'app/javascript/styles/mastodon/reset.scss',
+    'app/javascript/styles_new/mastodon/reset.scss',
     'coverage/**/*',
     'node_modules/**/*',
     'public/assets/**/*',
@@ -31,7 +32,7 @@ module.exports = {
   },
   overrides: [
     {
-      'files': ['app/javascript/styles/entrypoints/mailer.scss'],
+      'files': ['app/javascript/styles/entrypoints/mailer.scss', 'app/javascript/styles_new/entrypoints/mailer.scss'],
       rules: {
         'property-no-unknown': [
           true,