[Glitch] Handle dark/light/contrast theme modes in common CSS

Port 65b216353e to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/styles/application.scss

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

app/javascript/flavours/glitch/styles/common.scss

@@ -3,6 +3,7 @@
 @use '@/styles/fonts/roboto-mono';
 
 @use 'mastodon/reset';
+@use 'mastodon/theme';
 @use 'mastodon/basics';
 @use 'mastodon/branding';
 @use 'mastodon/containers';

app/javascript/flavours/glitch/styles/contrast.scss

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

app/javascript/flavours/glitch/styles/mastodon-light.scss

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

app/javascript/flavours/glitch/styles/mastodon/basics.scss

@@ -3,6 +3,20 @@
 html {
   color: var(--color-text-primary);
   background: var(--color-bg-ambient);
+
+  &.custom-scrollbars {
+    scrollbar-color: var(--color-text-secondary) var(--color-bg-secondary);
+  }
+
+  --outline-focus-default: 2px solid var(--color-text-brand);
+  --avatar-border-radius: 8px;
+
+  // Variable for easily inverting directional UI elements,
+  --text-x-direction: 1;
+
+  &.rtl {
+    --text-x-direction: -1;
+  }
 }
 
 html.has-modal {
@@ -37,7 +51,7 @@ body {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
   -webkit-tap-highlight-color: transparent;
 
-  &.system-font {
+  .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

app/javascript/flavours/glitch/styles/mastodon/high-contrast.scss

@@ -1,17 +1,3 @@
-:root {
-  /* TEXT TOKENS */
-
-  --color-text-primary: var(--color-grey-50);
-  --color-text-secondary: var(--color-grey-300);
-  --color-text-tertiary: var(--color-grey-400);
-  --color-text-brand: var(--color-indigo-300);
-  --color-text-status-links: var(--color-text-brand);
-
-  /* BORDER TOKENS */
-
-  --border-strength-primary: 18%;
-}
-
 .status__content a,
 .reply-indicator__content a,
 .edit-indicator__content a,

app/javascript/flavours/glitch/styles/mastodon/reset.scss

@@ -133,7 +133,3 @@ table {
   border-collapse: collapse;
   border-spacing: 0;
 }
-
-html:has(body.custom-scrollbars) {
-  scrollbar-color: var(--color-text-secondary) var(--color-bg-secondary);
-}

app/javascript/flavours/glitch/styles/mastodon/rtl.scss

@@ -1,6 +1,6 @@
 @use 'variables' as *;
 
-body.rtl {
+html.rtl {
   direction: rtl;
 
   .reactions-bar {

app/javascript/flavours/glitch/styles/mastodon/theme/_base.scss

@@ -0,0 +1,27 @@
+@mixin palette {
+  --color-black: #000;
+  --color-grey-950: #181821;
+  --color-grey-800: #292938;
+  --color-grey-700: #444664;
+  --color-grey-600: #545778;
+  --color-grey-500: #696d91;
+  --color-grey-400: #8b8dac;
+  --color-grey-300: #b4b6cb;
+  --color-grey-200: #d8d9e3;
+  --color-grey-100: #f0f0f5;
+  --color-grey-50: #f0f1ff;
+  --color-white: #fff;
+  --color-indigo-600: #6147e6;
+  --color-indigo-400: #8886ff;
+  --color-indigo-300: #a5abfd;
+  --color-indigo-200: #c8cdfe;
+  --color-indigo-100: #e0e3ff;
+  --color-indigo-50: #f0f1ff;
+  --color-red-500: #ff637e;
+  --color-red-600: #ec003f;
+  --color-yellow-400: #ffb900;
+  --color-yellow-600: #e17100;
+  --color-yellow-700: #bb4d00;
+  --color-green-400: #05df72;
+  --color-green-600: #00a63e;
+}

app/javascript/flavours/glitch/styles/mastodon/theme/_dark.scss

@@ -1,31 +1,6 @@
-@use 'theme_utils' as utils;
+@use 'utils';
-
-:root {
-  --color-black: #000;
-  --color-grey-950: #181821;
-  --color-grey-800: #292938;
-  --color-grey-700: #444664;
-  --color-grey-600: #545778;
-  --color-grey-500: #696d91;
-  --color-grey-400: #8b8dac;
-  --color-grey-300: #b4b6cb;
-  --color-grey-200: #d8d9e3;
-  --color-grey-100: #f0f0f5;
-  --color-grey-50: #f0f1ff;
-  --color-white: #fff;
-  --color-indigo-600: #6147e6;
-  --color-indigo-400: #8886ff;
-  --color-indigo-300: #a5abfd;
-  --color-indigo-200: #c8cdfe;
-  --color-indigo-100: #e0e3ff;
-  --color-indigo-50: #f0f1ff;
-  --color-red-500: #ff637e;
-  --color-red-600: #ec003f;
-  --color-yellow-400: #ffb900;
-  --color-yellow-600: #e17100;
-  --color-green-400: #05df72;
-  --color-green-600: #00a63e;
 
+@mixin tokens {
   /* TEXT TOKENS */
 
   --color-text-primary: var(--color-grey-50);
@@ -127,7 +102,7 @@
 
   // Warning
   --overlay-strength-warning: 10%;
-  --color-bg-warning-base: var(--color-yellow-600);
+  --color-bg-warning-base: var(--color-yellow-700);
   --color-bg-warning-base-hover: color-mix(
     in oklab,
     var(--color-bg-warning-base),
@@ -212,18 +187,18 @@
   --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(--color-text-brand);
-  --avatar-border-radius: 8px;
 }
 
-body {
+@mixin contrast-overrides {
-  // Variable for easily inverting directional UI elements,
+  /* TEXT TOKENS */
-  --text-x-direction: 1;
 
-  &.rtl {
+  --color-text-primary: var(--color-grey-50);
-    --text-x-direction: -1;
+  --color-text-secondary: var(--color-grey-300);
-  }
+  --color-text-tertiary: var(--color-grey-400);
+  --color-text-brand: var(--color-indigo-300);
+  --color-text-status-links: var(--color-text-brand);
+
+  /* BORDER TOKENS */
+
+  --border-strength-primary: 18%;
 }

app/javascript/flavours/glitch/styles/mastodon/theme/_light.scss

@@ -1,31 +1,6 @@
-@use '../mastodon/theme_utils' as utils;
+@use 'utils';
-
-:root {
-  --color-black: #000;
-  --color-grey-950: #181821;
-  --color-grey-800: #292938;
-  --color-grey-700: #444664;
-  --color-grey-600: #545778;
-  --color-grey-500: #696d91;
-  --color-grey-400: #8b8dac;
-  --color-grey-300: #b4b6cb;
-  --color-grey-200: #d8d9e3;
-  --color-grey-100: #f0f0f5;
-  --color-grey-50: #f0f1ff;
-  --color-white: #fff;
-  --color-indigo-600: #6147e6;
-  --color-indigo-400: #8886ff;
-  --color-indigo-300: #a5abfd;
-  --color-indigo-200: #c8cdfe;
-  --color-indigo-100: #e0e3ff;
-  --color-indigo-50: #f0f1ff;
-  --color-red-500: #ff637e;
-  --color-red-600: #ec003f;
-  --color-yellow-400: #ffb900;
-  --color-yellow-600: #e17100;
-  --color-green-400: #05df72;
-  --color-green-600: #00a63e;
 
+@mixin tokens {
   /* TEXT TOKENS */
 
   --color-text-primary: var(--color-grey-950);
@@ -124,7 +99,7 @@
 
   // Warning
   --overlay-strength-warning: 10%;
-  --color-bg-warning-base: var(--color-yellow-600);
+  --color-bg-warning-base: var(--color-yellow-700);
   --color-bg-warning-base-hover: color-mix(
     in oklab,
     var(--color-bg-warning-base),
@@ -207,9 +182,18 @@
   --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 */
+
-
+@mixin contrast-overrides {
-  --outline-focus-default: 2px solid var(--color-text-brand);
+  /* TEXT TOKENS */
-  --avatar-border-radius: 8px;
+
+  --color-text-primary: var(--color-black);
+  --color-text-secondary: var(--color-grey-800);
+  --color-text-tertiary: var(--color-grey-700);
+  --color-text-brand: var(--color-indigo-600);
+
+  /* BORDER TOKENS */
+
+  --border-strength-primary: 30%;
+  --color-border-on-bg-secondary: var(--color-grey-300);
 }

app/javascript/flavours/glitch/styles/mastodon/theme/index.scss

@@ -0,0 +1,48 @@
+@use 'base';
+@use 'dark';
+@use 'light';
+
+html {
+  @include base.palette;
+
+  &[data-user-theme='system'] {
+    color-scheme: dark light;
+
+    @media (prefers-color-scheme: dark) {
+      @include dark.tokens;
+
+      @media (prefers-contrast: more) {
+        @include dark.contrast-overrides;
+      }
+    }
+
+    @media (prefers-color-scheme: light) {
+      @include light.tokens;
+
+      @media (prefers-contrast: more) {
+        @include light.contrast-overrides;
+      }
+    }
+  }
+}
+
+.theme-dark,
+html:where(
+  :not([data-user-theme='mastodon-light'], [data-user-theme='system'])
+) {
+  color-scheme: dark;
+
+  @include dark.tokens;
+}
+
+html[data-user-theme='contrast'],
+html[data-user-theme='contrast'] .theme-dark {
+  @include dark.contrast-overrides;
+}
+
+.theme-light,
+html:where([data-user-theme='mastodon-light']) {
+  color-scheme: light;
+
+  @include light.tokens;
+}