From 8148415ff7a71d150aa8b14f5f3da36e5b6f0c33 Mon Sep 17 00:00:00 2001
From: kedamaDQ <kedama@foresdon.jp>
Date: Sun, 20 Oct 2024 12:40:27 +0900
Subject: [PATCH] Apply transparent themes

---
 app/javascript/styles/application.scss        |   2 -
 app/javascript/styles/foresdon/diff.scss      | 462 ++++--------------
 app/javascript/styles/foresdon/variables.scss |  44 +-
 app/javascript/styles/mastodon/variables.scss |  14 +-
 app/javascript/styles/override.scss           |   8 -
 5 files changed, 118 insertions(+), 412 deletions(-)
 delete mode 100644 app/javascript/styles/override.scss

diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss
index c4d8e10c33d424..465b748078f2e6 100644
--- a/app/javascript/styles/application.scss
+++ b/app/javascript/styles/application.scss
@@ -3,8 +3,6 @@
 @import 'fonts/roboto';
 @import 'fonts/roboto-mono';
 
-@import 'override';
-
 @import 'mastodon/reset';
 @import 'mastodon/basics';
 @import 'mastodon/branding';
diff --git a/app/javascript/styles/foresdon/diff.scss b/app/javascript/styles/foresdon/diff.scss
index 5627129e65221b..16135d4313e4a1 100644
--- a/app/javascript/styles/foresdon/diff.scss
+++ b/app/javascript/styles/foresdon/diff.scss
@@ -1,9 +1,8 @@
 html {
-  scrollbar-color: $ui-base-color transparent;
+  scrollbar-color: $foresdon-background-color transparent;
 }
 
-body,
-body.admin {
+body {
   background: url($foresdon-background-image) no-repeat fixed bottom center;
   background-size: cover;
 
@@ -14,440 +13,163 @@ body.admin {
   @media screen and (width <= calc($no-gap-breakpoint - 285px - 1px)) {
     background-position: 38% 80%;
   }
-}
-
-.layout-single-column .ui__header {
-  background-color: $ui-column-header-color;
-  border: none;
-}
-
-/* advanced web interface */
-.drawer {
-  &__header {
-    background-color: transparent;
-
-    a {
-      background-color: $ui-column-header-color;
-      transition: background 100ms ease-in;
-
-      &:hover {
-        background: lighten($ui-base-color, 3%);
-        transition: background 200ms ease-out;
-      }
-    }
-  }
 
-  &__inner {
-    border-radius: 4px 4px 0 0;
+  .admin {
+    background: var(--background-color);
   }
-
-  &__tab {
-    &:first-child {
-      border-radius: 4px 0 0 4px;
-    }
-
-    &:last-child {
-      border-radius: 0 4px 4px 0;
-    }
-  }
-
-  &__inner {
-    background-color: $ui-base-color;
-
-    &__mastodon {
-      background-color: transparent;
-    }
-  }
-}
-
-.compose-form {
-  .compose-form__warning {
-    color: $classic-base-color;
-  }
-
-  .reply-indicator {
-    color: $classic-base-color;
-
-    &__display-name,
-    &__content {
-      color: $classic-base-color;
-    }
-  }
-
-  .spoiler-input__input,
-  .autosuggest-textarea__textarea,
-  .fixed-input__input {
-    color: $classic-base-color;
-  }
-
-  &__poll-wrapper {
-    .button.button-secondary,
-    input[type='text'],
-    select {
-      color: $classic-base-color;
-    }
-  }
-
-  .autosuggest-textarea__suggestions {
-    color: $classic-base-color;
-  }
-}
-
-.emoji-mart {
-  color: $classic-base-color;
 }
 
-.emoji-mart-search input {
-  color: $classic-base-color;
-}
-
-.language-dropdown__dropdown__results__item {
-  color: $classic-base-color;
-}
-
-.search-results {
-  background-color: $ui-base-color;
-
-  &__section h5 {
-    background-color: $ui-base-color-overwrap;
-  }
-}
-
-.column-header {
-  background-color: $ui-column-header-color;
-
-  &__button,
-  &__back-button {
-    background-color: transparent;
-  }
+.admin-wrapper {
+  background: var(--background-color);
 }
 
-.moved-account-banner,
-.follow-request-banner {
-  background-color: transparent;
+.column > .scrollable {
+  background: $foresdon-background-color;
+  border: none;
+  border-radius: $foresdon-border-radius-bottom;
 }
 
-.notification__filter-bar,
-.account__section-headline {
-  background-color: transparent;
+.error-column {
+  background: $foresdon-background-color;
   border: none;
-
-  & a,
-  & button {
-    flex: 2 1 auto;
-    padding: 15px 5px 0;
-    background-color: $ui-base-color-overwrap;
-
-    &.active {
-      background-color: $ui-base-color;
-
-      &::before {
-        display: none;
-      }
-
-      &::after {
-        display: block;
-        margin: 0;
-        padding: 0;
-        text-align: center;
-        font-size: 8px;
-        height: auto;
-        transform: none;
-        color: $classic-highlight-color;
-        content: '●';
-        border: none;
-      }
-
-      &::after {
-        bottom: 0;
-        border: none;
-      }
-    }
-  }
+  border-radius: $foresdon-border-radius;
 }
 
-.notification__filter-bar {
-  & a,
-  & button {
-    &.active {
-      background-color: $ui-base-color;
-    }
-  }
+.drawer__header,
+.column-header__wrapper,
+.column-back-button {
+  background: $foresdon-background-dark-color;
+  border-radius: $foresdon-border-radius-top;
+  border: none;
 }
 
-.account__section-headline {
-  & a,
-  & button {
-    &.active {
-      background-color: transparent;
-    }
-  }
+.column-subheading {
+  background: $foresdon-background-light-color;
 }
 
-.account--panel {
-  background-color: transparent;
+.search__input,
+.drawer__inner {
+  background: $foresdon-background-color;
 }
 
-div[aria-label='Explore'] > .scrollable {
-  background-color: transparent;
-
-  .empty-column-indicator {
-    background-color: $ui-base-color;
-  }
-
-  .explore__suggestions {
-    background-color: $ui-base-color;
-
-    .empty-column-indicator {
-      background-color: transparent;
-    }
-  }
-
-  .account__section-headline {
-    & a,
-    & button {
-      background-color: $ui-base-color-overwrap;
-
-      &.active {
-        background-color: $ui-base-color;
-      }
-    }
-  }
+.drawer__inner__mastodon {
+  background: transparent
+    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(darken($ui-base-color, 4%))}"/></svg>')
+    no-repeat bottom / 100% auto;
+  border-radius: $foresdon-border-radius-bottom;
 }
 
-.getting-started {
-  background-color: transparent;
-
-  &__wrapper {
-    background-color: transparent;
-  }
-
-  .column-subheading {
-    background-color: $ui-base-color-overwrap;
-  }
-
-  .column-link {
-    background-color: transparent;
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: $ui-base-color-overwrap;
-    }
+.compose-form {
+  &__highlightable {
+    background: $foresdon-background-light-color;
   }
 }
 
-.column-back-button {
-  background-color: $ui-column-header-color;
-}
-
-.account-timeline__header {
-  .account__header {
-    background-color: transparent;
+.autosuggest-textarea {
+  &__suggestions {
+    background: $foresdon-background-light-color;
+    backdrop-filter: var(--background-filter);
   }
 
-  .account__header__fields {
-    background-color: $ui-base-color-overwrap;
-  }
-}
+  &__item {
+    background: none;
 
-.column-inline-form {
-  & label {
-    & input {
-      color: $classic-base-color;
+    &:last-child {
+      border-radius: $foresdon-border-radius-bottom;
     }
   }
 }
 
-.empty-column-indicator,
-.follow_requests-unlocked_explanation {
-  background-color: transparent;
+.poll__option input[type='text'] {
+  background: none;
 }
 
-.dropdown-menu {
-  background-color: $ui-base-color-darken;
-
-  &__item {
-    color: $classic-primary-color;
-
-    a,
-    button {
-      background-color: transparent;
-
-      &:focus,
-      &:hover,
-      &:active {
-        color: $classic-secondary-color;
-        background-color: $ui-base-color-overwrap;
-      }
-    }
-  }
-}
-
-.scrollable .account-card {
-  background-color: $ui-base-color-overwrap;
-
-  &__permalink {
-    background-color: transparent;
-  }
-
-  &__header {
-    background-color: transparent;
-  }
-
-  &__bio::after {
-    background: none;
-  }
+.notification__filter-bar,
+.account__section-headline {
+  background: $foresdon-background-light-color;
+  border: none;
 }
 
-/* single column web interface */
-.columns-area__panels__pane__inner {
-  background-color: $ui-base-color;
-
-  @media screen and (width <= calc($no-gap-breakpoint - 1px)) {
-    background-color: transparent;
+.account {
+  &__domain-pill {
+    background: $foresdon-background-lighter-color;
   }
 }
 
-.tabs-bar__wrapper {
-  padding-top: 0;
+.column-inline-form {
+  background: $foresdon-background-color;
+  border: 0 0 1px 0;
 }
 
-.compose-panel,
-.navigation-panel {
-  margin-top: 0;
+.setting-text {
+  background: $foresdon-background-lighter-color;
 }
 
-.columns-area__panels__pane--navigational {
-  .navigation-panel {
-    @media screen and (width <= calc($no-gap-breakpoint - 1px)) {
-      background-color: $ui-header-color;
-      border-left: 0;
-    }
-  }
+.search__popout {
+  background: $foresdon-background-light-color;
+  backdrop-filter: var(--background-filter);
+  border-radius: $foresdon-border-radius-bottom;
 }
 
-.explore__search-results {
-  background-color: $ui-base-color;
-}
+.search-results {
+  background: $foresdon-background-lighter-color;
+  backdrop-filter: var(--background-filter);
 
-div[aria-label='Explore'] {
-  .explore__search-results {
-    .empty-column-indicator {
-      background-color: transparent;
-    }
+  &__section__header {
+    background: $foresdon-background-light-color;
   }
 }
 
-/* modals */
-.modal-root__modal {
-  background-color: $ui-base-color;
+.hashtag-bar > a {
+  background: $foresdon-background-light-color;
 }
 
-.boost-modal,
-.confirmation-modal,
-.report-modal,
-.actions-modal,
-.mute-modal,
-.block-modal,
-.compare-history-modal {
-  background: $ui-base-color-darken;
+.list-editor {
+  background: $foresdon-background-color;
 }
 
-.boost-modal,
-.confirmation-modal,
-.mute-modal,
-.block-modal {
-  &__action-bar {
-    background-color: $ui-base-color-overwrap;
-  }
+.follow_requests-unlocked_explanation {
+  background: $foresdon-background-lighter-color;
 }
 
-.embed-modal {
-  .embed-modal__container {
-    .embed-modal__html {
-      border: solid 1px $inverted-text-color;
-    }
-  }
+// single column
+.layout-single-column .ui__header {
+  background: none;
+  border: none;
 }
 
-.list-editor {
-  background-color: transparent;
-
-  &__search {
-    background-color: $ui-base-color-overwrap;
-
-    .search_input {
-      color: $classic-base-color;
-    }
-  }
-
-  .drawer__backdrop {
-    background-color: transparent;
-  }
-
-  .backdrop {
-    background-color: $ui-base-color;
-  }
-}
+.columns-area__panels {
+  gap: 8px;
 
-.report-dialog-modal {
-  .emoji-mart-search {
-    border-radius: 4px 4px 0 0;
+  &__pane__inner {
+    background: $foresdon-background-color;
 
-    input {
-      background-color: $white;
+    & .navigation-panel {
+      border: none;
     }
   }
-
-  .emoji-mart-scroll {
-    padding: 0 10px 10px;
-    border-radius: 0 0 4px 4px;
-  }
 }
 
-.setting-text {
-  color: $classic-base-color;
+.compose-panel {
+  width: auto;
+  padding: 10px;
 }
 
-/* preferences */
-.admin-wrapper {
-  .sidebar {
-    ul a {
-      background-color: $ui-base-color-overwrap;
-
-      & .selected .simple-navigation-active-leaf {
-        background-color: $ui-highlight-color-transparent;
-      }
-    }
-  }
+.tabs-bar__wrapper {
+  background: none;
+  backdrop-filter: none;
 }
 
-.batch-table {
-  &__toolbar {
-    background-color: $ui-base-color-darken;
+.explore {
+  &__search-header {
+    background: $foresdon-background-color;
   }
 
-  &__row {
-    background-color: $ui-base-color;
+  &__search-results {
+    background: $foresdon-background-color;
   }
-}
 
-.table {
-  &.inline-table {
-    & > thead > tr {
-      & > td,
-      & > th {
-        background-color: $ui-base-color-darken;
-      }
-    }
-
-    & > tbody > tr {
-      background-color: $ui-base-color-overwrap;
-
-      &:nth-child(odd) {
-        background-color: $ui-base-color;
-      }
-    }
+  & .search__input {
+    background: $foresdon-background-light-color;
   }
 }
diff --git a/app/javascript/styles/foresdon/variables.scss b/app/javascript/styles/foresdon/variables.scss
index 5515970c739e4b..c9c11edbb5dd24 100644
--- a/app/javascript/styles/foresdon/variables.scss
+++ b/app/javascript/styles/foresdon/variables.scss
@@ -2,31 +2,25 @@
 $black: #000000;
 $white: #ffffff;
 
-$classic-base-color: #282c37;
-$classic-primary-color: #9baec8;
-$classic-secondary-color: #d9e1e8;
-$classic-highlight-color: #6364ff;
+$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: rgba($classic-base-color, 0.8);
-$ui-base-color-overwrap: rgba($classic-base-color, 0.6);
-$ui-base-color-darken: rgba($classic-base-color, 0.9);
-$ui-highlight-color-transparent: rgba($classic-highlight-color, 0.6);
+$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
 
-$ui-column-header-color: $classic-base-color;
+$ui-base-color: $classic-base-color;
 
-/*
- * transmittance of $ui-base-color = 0.2 (opacity = 0.8)
- * the column-header has two overwrapping $ui-base-colors.
- * transmittance of two overwrapping $ui-base-colors is 0.2 * 0.2 = 0.04
- * as the opacity, 0.96(96%)
- */
-$ui-header-color: darken(rgba($classic-base-color, 0.96), 6%);
-
-$inverted-text-color: $classic-primary-color;
-
-$foresdon-primary-border-radius: 8px;
-$foresdon-primary-ui-alpha: 0.75;
-$foresdon-margin-right: 2px;
-$foresdon-margin-bottom: 3px;
-$foresdon-ui-accent-overlay: rgba(16, 0, 8, 20%);
-$foresdon-ui-marker-color: #ca8f04;
+// basis
+$foresdon-background-color: rgba(darken($ui-base-color, 4%), 0.82);
+$foresdon-background-dark-color: rgba($ui-base-color, 0.9);
+$foresdon-background-light-color: rgba($ui-base-color, 0.7);
+$foresdon-background-lighter-color: rgba($ui-base-color, 0.3);
+$foresdon-border-radius: 6px;
+$foresdon-border-radius-top: $foresdon-border-radius $foresdon-border-radius 0 0;
+$foresdon-border-radius-bottom: 0 0 $foresdon-border-radius
+  $foresdon-border-radius;
diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss
index baaec5f58f5942..40b95fa1cf6447 100644
--- a/app/javascript/styles/mastodon/variables.scss
+++ b/app/javascript/styles/mastodon/variables.scss
@@ -63,11 +63,11 @@ $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;
+$primary-text-color: darken($white, 8%) !default;
+$darker-text-color: lighten($ui-primary-color, 8%) !default;
+$dark-text-color: lighten($ui-base-lighter-color, 12%) !default;
 $secondary-text-color: $ui-secondary-color !default;
-$highlight-text-color: lighten($ui-highlight-color, 8%) !default;
+$highlight-text-color: lighten($ui-highlight-color, 12%) !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;
@@ -96,15 +96,15 @@ $font-monospace: 'mastodon-font-monospace' !default;
 
 :root {
   --dropdown-border-color: #{lighten($ui-base-color, 4%)};
-  --dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)};
+  --dropdown-background-color: #{rgba(darken($ui-base-color, 4%), 0.6)};
   --dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
     0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
-  --modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)};
+  --modal-background-color: #{rgba(darken($ui-base-color, 4%), 0.6)};
   --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-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
-  --background-color: #{darken($ui-base-color, 8%)};
+  --background-color: #{darken($ui-base-color, 4%)};
   --background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)};
   --surface-background-color: #{darken($ui-base-color, 4%)};
   --surface-variant-background-color: #{$ui-base-color};
diff --git a/app/javascript/styles/override.scss b/app/javascript/styles/override.scss
deleted file mode 100644
index 9bf483321a5a42..00000000000000
--- a/app/javascript/styles/override.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-$primary-text-color: darken($white, 8%) !default;
-$darker-text-color: lighten($ui-primary-color, 8%) !default;
-$dark-text-color: lighten($ui-base-lighter-color, 12%) !default;
-$highlight-text-color: lighten($ui-highlight-color, 12%) !default;
-
-:root {
-  --background-color: #{darken($ui-base-color, 4%)};
-}