Clean up theme structure, bring back contrast theme

app/javascript/styles/application.scss

@@ -1,4 +1,5 @@
 @use 'mastodon/css_variables';
+@use 'mastodon/variables';
 @use 'common';
 
 html {

app/javascript/styles/common.scss

@@ -1,5 +1,4 @@
 @use 'mastodon/mixins';
-@use 'mastodon/variables';
 @use 'fonts/roboto';
 @use 'fonts/roboto-mono';
 

app/javascript/styles/contrast.scss

@@ -1,5 +1,5 @@
-@use 'mastodon/variables';
 @use 'mastodon/css_variables';
+@use 'mastodon/variables';
 @use 'common';
 @use 'contrast/diff';
 

app/javascript/styles/contrast/diff.scss

@@ -1,3 +1,19 @@
+@use '../mastodon/_theme_utils' as utils;
+
+: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,

app/javascript/styles/mastodon-light.scss

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

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

@@ -145,7 +145,6 @@
     var(--clr-bg-primary),
     var(--clr-border-primary-base) var(--clr-border-primary-strength)
   );
-  --clr-border-strong: var(--clr-grey-950);
   --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);

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

@@ -1,11 +0,0 @@
-.simple_form .warning {
-  box-shadow: none;
-  text-shadow: none;
-}
-
-.nothing-here,
-.directory__tag > a,
-.directory__tag > div,
-.card > a {
-  box-shadow: none;
-}

app/javascript/styles/mastodon/css_variables.scss

@@ -15,6 +15,7 @@
   --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;
@@ -154,7 +155,6 @@
       var(--clr-border-primary-base),
       var(--clr-border-primary-strength)
     )};
-  --clr-border-strong: var(--clr-grey-200);
   --clr-border-media: rgb(252 248 255 / 15%);
   --clr-border-on-bg-secondary: #{utils.css-alpha(
       var(--clr-border-primary-base),