shrike theming

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

@@ -1432,9 +1432,10 @@ body > [data-popper-placement] {
 .status {
   padding: 10px 14px; // glitch: reduced padding
   min-height: 54px;
-  border-bottom: 1px solid var(--background-border-color);
+  border: 0 solid var(--background-border-color);
   cursor: auto;
   opacity: 1;
+  border-radius: inherit;
   animation: fade 150ms linear;
 
   @keyframes fade {
@@ -3120,6 +3121,7 @@ $ui-header-logo-wordmark-width: 99px;
 
   .columns-area__panels__pane--navigational {
     min-width: $sidebar-width;
+    display: none;
 
     .columns-area__panels__pane__inner {
       width: $sidebar-width;
@@ -3180,6 +3182,7 @@ $ui-header-logo-wordmark-width: 99px;
 
   .columns-area__panels__pane--navigational {
     min-width: $sidebar-width;
+    display: none;
 
     .columns-area__panels__pane__inner {
       width: $sidebar-width;
@@ -7491,6 +7494,14 @@ img.modal-warning {
   }
 }
 
+.media-gallery__preview--hidden {
+  display: block;
+}
+
+.media-gallery__item-thumbnail .media-gallery__preview--hidden {
+  display: none;
+}
+
 .media-gallery__gifv {
   height: 100%;
   overflow: hidden;
@@ -9267,6 +9278,9 @@ noscript {
 .notification,
 .status__wrapper {
   position: relative;
+  background-color: $ui-base-over-color;
+  margin-bottom: 5px;
+  border-radius: 8pt;
 
   &.unread {
     &::before {
@@ -10512,7 +10526,7 @@ noscript {
   color: $white;
   background: rgba($black, 0.85);
   backdrop-filter: blur(8px);
-  border: 1px solid rgba(lighten($classic-base-color, 4%), 0.85);
+  border: 1px solid rgba(lighten($shrike-base-color, 4%), 0.85);
   border-radius: 8px;
   box-shadow:
     0 10px 15px -3px rgba($base-shadow-color, 0.25),
@@ -10544,7 +10558,7 @@ noscript {
   text-transform: uppercase;
   margin-inline-start: 10px;
   cursor: pointer;
-  color: $blurple-300;
+  color: $cardinal-300;
   border-radius: 4px;
   padding: 0 4px;
 

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

@@ -1,15 +1,22 @@
 // Dependent colors
 $black: #000000;
 
-$classic-base-color: hsl(240deg, 16%, 19%);
+$cardinal-700: hsla(359deg, 23%, 35%, 100%);
-$classic-primary-color: hsl(240deg, 29%, 70%);
+$cardinal-600: hsla(5deg, 67%, 32%, 100%);
-$classic-secondary-color: hsl(255deg, 25%, 88%);
+$cardinal-500: hsla(5deg, 72%, 38%, 100%);
-$classic-highlight-color: hsl(240deg, 100%, 69%);
+$cardinal-400: hsla(9deg, 60%, 44%, 100%);
+$cardinal-300: hsla(6deg, 85%, 44%, 100%);
 
-$ui-base-color: $classic-base-color !default;
+$shrike-base-color: hsla(20deg, 7%, 19%, 100%);
-$ui-primary-color: $classic-primary-color !default;
+$shrike-primary-color: hsla(36deg, 17%, 57%, 100%);
-$ui-secondary-color: $classic-secondary-color !default;
+$shrike-secondary-color: hsla(37deg, 35%, 79%, 100%);
-$ui-highlight-color: $classic-highlight-color !default;
+$shrike-highlight-color: $cardinal-500;
+
+$ui-base-color: $shrike-base-color !default;
+$ui-base-over-color: lighten($ui-base-color, 8%) !default; // Lighter darkest
+$ui-primary-color: $shrike-primary-color !default;
+$ui-secondary-color: $shrike-secondary-color !default;
+$ui-highlight-color: $shrike-highlight-color !default;
 
 $darker-text-color: lighten($ui-primary-color, 20%) !default;
 $dark-text-color: lighten($ui-primary-color, 12%) !default;

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

@@ -2,14 +2,17 @@
 $black: #000000;
 $white: #ffffff;
 
-$classic-base-color: hsl(240deg, 16%, 19%);
+$cardinal-700: hsla(359deg, 23%, 35%, 100%);
-$classic-primary-color: hsl(240deg, 29%, 70%);
+$cardinal-600: hsla(5deg, 67%, 32%, 100%);
-$classic-secondary-color: hsl(255deg, 25%, 88%);
+$cardinal-500: hsla(5deg, 72%, 38%, 100%);
-$classic-highlight-color: hsl(240deg, 100%, 69%);
+$cardinal-400: hsla(9deg, 60%, 44%, 100%);
+$cardinal-300: hsla(6deg, 85%, 44%, 100%);
+
+$shrike-base-color: hsla(20deg, 7%, 19%, 100%);
+$shrike-primary-color: hsla(36deg, 17%, 57%, 100%);
+$shrike-secondary-color: hsla(37deg, 35%, 79%, 100%);
+$shrike-highlight-color: $cardinal-500;
 
-$blurple-600: hsl(252deg, 59%, 51%); // Iris
-$blurple-500: hsl(240deg, 100%, 69%); // Brand purple
-$blurple-300: hsl(237deg, 92%, 75%); // Faded Blue
 $grey-600: hsl(240deg, 8%, 33%); // Trout
 $grey-100: hsl(240deg, 51%, 90%); // Topaz
 
@@ -19,27 +22,28 @@ $success-green: lighten(hsl(138deg, 32%, 35%), 8%);
 $base-overlay-background: $white !default;
 $valid-value-color: $success-green !default;
 
-$ui-base-color: $classic-secondary-color !default;
+$ui-base-color: $shrike-secondary-color !default;
+$ui-base-over-color: lighten($ui-base-color, 8%) !default; // Lighter darkest
 $ui-base-lighter-color: hsl(250deg, 24%, 75%);
-$ui-primary-color: $classic-primary-color !default;
+$ui-primary-color: $shrike-primary-color !default;
-$ui-secondary-color: $classic-base-color !default;
+$ui-secondary-color: $shrike-base-color !default;
-$ui-highlight-color: $classic-highlight-color !default;
+$ui-highlight-color: $shrike-highlight-color !default;
 
 $ui-button-secondary-color: $grey-600 !default;
 $ui-button-secondary-border-color: $grey-600 !default;
 $ui-button-secondary-focus-color: $white !default;
 
-$ui-button-tertiary-color: $blurple-500 !default;
+$ui-button-tertiary-color: $cardinal-500 !default;
-$ui-button-tertiary-border-color: $blurple-500 !default;
+$ui-button-tertiary-border-color: $cardinal-500 !default;
 
 $primary-text-color: $black !default;
-$darker-text-color: $classic-base-color !default;
+$darker-text-color: $shrike-base-color !default;
 $highlight-text-color: $ui-highlight-color !default;
 $dark-text-color: hsl(240deg, 16%, 32%);
 $action-button-color: hsl(240deg, 16%, 45%);
 
 $inverted-text-color: $black !default;
-$lighter-text-color: $classic-base-color !default;
+$lighter-text-color: $shrike-base-color !default;
 $light-text-color: hsl(240deg, 16%, 32%);
 
 // Newly added colors

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

@@ -3,13 +3,15 @@ $black: #000000; // Black
 $white: #ffffff; // 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
 
+$cardinal-700: hsla(359deg, 23%, 35%, 100%);
+$cardinal-600: hsla(5deg, 67%, 32%, 100%);
+$cardinal-500: hsla(5deg, 72%, 38%, 100%);
+$cardinal-400: hsla(9deg, 60%, 44%, 100%);
+$cardinal-300: hsla(6deg, 85%, 44%, 100%);
+
 $success-green: #79bd9a !default; // Padua
 $error-red: $red-500 !default; // Cerise
 $warning-red: #ff5050 !default; // Sunset Orange
@@ -17,43 +19,43 @@ $gold-star: #ca8f04 !default; // Dark Goldenrod
 
 $red-bookmark: $warning-red;
 
-// Values from the classic Mastodon UI
+$shrike-base-color: hsla(20deg, 7%, 19%, 100%);
-$classic-base-color: hsl(240deg, 16%, 19%);
+$shrike-primary-color: hsla(36deg, 17%, 57%, 100%);
-$classic-primary-color: hsl(240deg, 29%, 70%);
+$shrike-secondary-color: hsla(37deg, 35%, 79%, 100%);
-$classic-secondary-color: hsl(255deg, 25%, 88%);
+$shrike-highlight-color: $cardinal-500;
-$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;
+$base-border-color: #00000000 !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-color: $shrike-base-color !default; // Darkest
+$ui-base-over-color: lighten($ui-base-color, 3%) !default; // Lighter darkest
 $ui-base-lighter-color: lighten(
   $ui-base-color,
   26%
 ) !default; // Lighter darkest
-$ui-primary-color: $classic-primary-color !default; // Lighter
+$ui-primary-color: $shrike-primary-color !default; // Lighter
-$ui-secondary-color: $classic-secondary-color !default; // Lightest
+$ui-secondary-color: $shrike-secondary-color !default; // Lightest
-$ui-highlight-color: $classic-highlight-color !default;
+$ui-highlight-color: $shrike-highlight-color !default;
 $ui-button-color: $white !default;
-$ui-button-background-color: $blurple-500 !default;
+$ui-button-background-color: $cardinal-500 !default;
-$ui-button-focus-background-color: $blurple-600 !default;
+$ui-button-focus-background-color: $cardinal-600 !default;
-$ui-button-focus-outline-color: $blurple-400 !default;
+$ui-button-focus-outline-color: $cardinal-400 !default;
 $ui-button-focus-outline: solid 2px $ui-button-focus-outline-color !default;
 
-$ui-button-secondary-color: $blurple-500 !default;
+$ui-button-secondary-color: $cardinal-500 !default;
-$ui-button-secondary-border-color: $blurple-500 !default;
+$ui-button-secondary-border-color: $cardinal-500 !default;
-$ui-button-secondary-focus-border-color: $blurple-300 !default;
+$ui-button-secondary-focus-border-color: $cardinal-300 !default;
-$ui-button-secondary-focus-color: $blurple-300 !default;
+$ui-button-secondary-focus-color: $cardinal-300 !default;
 
-$ui-button-tertiary-color: $blurple-300 !default;
+$ui-button-tertiary-color: $cardinal-300 !default;
-$ui-button-tertiary-border-color: $blurple-300 !default;
+$ui-button-tertiary-border-color: $cardinal-300 !default;
-$ui-button-tertiary-focus-background-color: $blurple-600 !default;
+$ui-button-tertiary-focus-background-color: $cardinal-600 !default;
 $ui-button-tertiary-focus-color: $white !default;
 
 $ui-button-destructive-background-color: $red-500 !default;
@@ -108,7 +110,7 @@ $dismiss-overlay-width: 4rem;
   --modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)};
   --modal-background-variant-color: #{rgba($ui-base-color, 0.7)};
   --modal-border-color: #{lighten($ui-base-color, 4%)};
-  --background-border-color: #{lighten($ui-base-color, 4%)};
+  --background-border-color: #00000000;
   --background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
   --background-color: #{darken($ui-base-color, 8%)};
   --background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)};

app/javascript/flavours/vanilla/names.yml

@@ -1,41 +0,0 @@
-en:
-  flavours:
-    vanilla:
-      description: The theme used by vanilla Mastodon instances. This theme might not support all of the features of GlitchSoc.
-      name: Vanilla Mastodon
-  skins:
-    vanilla:
-      default: Default
-cs:
-  flavours:
-    vanilla:
-      description: Standardní rozhraní Mastodonu. Některé funkce GlitchSoc v něm nejsou podporované.
-      name: Standardní Mastodon
-  skins:
-    vanilla:
-      default: Výchozí
-pl:
-  flavours:
-    vanilla:
-      description: Motyw używany przez instancje czystego Mastodona. Może nie obsługiwać wszystkich funkcji GlitchSoc.
-      name: Mastodon Vanilla
-  skins:
-    vanilla:
-      default: Domyślny
-es:
-  flavours:
-    vanilla:
-      description: El diseño predeterminado en las instancias de Mastodon. Puede que no soporte todas las características de GlitchSoc.
-      name: Mastodon Original
-  skins:
-    vanilla:
-      default: Predeterminado
-
-ja:
-  flavours:
-    vanilla:
-      description: バニラのMastodonインスタンスで使われるテーマです。このテーマはGlitchSocのすべての機能をサポートしない可能性があります。
-      name: Vanilla Mastodon
-  skins:
-    vanilla:
-      default: デフォルト

app/javascript/flavours/vanilla/theme.yml

@@ -1,17 +0,0 @@
-#  (REQUIRED) The directory which contains the pack files.
-pack_directory: app/javascript/entrypoints
-
-#  (OPTIONAL) Define files to be preloaded when a logged-in user is
-#  visiting the main web app.
-signed_in_preload:
-  - features/compose.js
-  - features/home_timeline.js
-  - features/notifications.js
-
-#  (OPTIONAL) The directory which contains localization files for
-#  the flavour, relative to this directory.
-locales: ../../mastodon/locales
-
-#  (OPTIONAL) A file to use as the preview screenshot for the flavour,
-#  or an array thereof. These are the full path from `app/javascript/`.
-screenshot: images/screenshot.png