macaron: initial fixing work

app/javascript/styles/macaron.scss

@@ -1,3 +1,4 @@
 @use 'macaron/variables';
+@use 'macaron/css_variables';
 @use 'application';
 @use 'macaron/diff';

app/javascript/styles/macaron/css_variables.scss

@@ -0,0 +1,22 @@
+@use 'sass:color';
+@use '../mastodon/variables' as *;
+@use '../mastodon/functions' as *;
+
+body {
+  --dropdown-border-color: hsl(240deg, 25%, 88%);
+  --dropdown-background-color: #fff;
+  --modal-border-color: hsl(240deg, 25%, 88%);
+  --modal-background-color: var(--background-color);
+  --background-border-color: hsl(240deg, 25%, 88%);
+  --background-color: #fff;
+  --background-color-tint: rgba(255, 255, 255, 80%);
+  --background-filter: blur(10px);
+  --surface-variant-background-color: #f1ebfb;
+  --surface-border-color: #cac4d0;
+  --on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.65)};
+  --rich-text-container-color: rgba(255, 216, 231, 100%);
+  --rich-text-text-color: rgba(114, 47, 83, 100%);
+  --rich-text-decorations-color: rgba(255, 175, 212, 100%);
+  --input-placeholder-color: #{color.adjust($dark-text-color, $alpha: -0.5)};
+  --input-background-color: #{darken($ui-base-color, 10%)};
+}

app/javascript/styles/macaron/diff.scss

@@ -12,6 +12,17 @@ html {
   background-color: $green;
 }
 
+.autosuggest-textarea__textarea,
+.spoiler-input__input {
+  background: $white !important;
+  color: $black !important;
+}
+
+.compose-form__modifiers {
+  background: $white !important;
+  color: $black !important;
+}
+
 .status__content a,
 .reply-indicator__content a {
   &:hover,
@@ -67,6 +78,23 @@ html {
   border: 1px solid lighten($green, 8%);
 }
 
+.status__relative-time {
+  color: $dark-text-color;
+}
+
+.compose-form .compose-form__highlightable {
+  background: $ui-base-color;
+}
+
+.compose-form__poll__select__value {
+  color: $classic-base-color;
+  background: darken($ui-base-color, 6%);
+}
+
+.compose-form__poll__select__label {
+  color: $dark-text-color;
+}
+
 .column-back-button,
 .column-header {
   background: #c8c4dd;
@@ -126,6 +154,11 @@ html {
   }
 }
 
+.column-link,
+.column-header {
+  color: $classic-base-color !important;
+}
+
 .getting-started .navigation-bar {
   border-top: 1px solid lighten($ui-base-color, 8%);
   border-bottom: 1px solid lighten($ui-base-color, 8%);
@@ -165,7 +198,7 @@ html {
   background: rgba($pink, 0.8);
 }
 
-.status {
+.status:not(.status--is-quote) {
   border-bottom: 1px solid lighten(#eee, 4%);
 }
 
@@ -218,7 +251,7 @@ html {
   background: $green;
 }
 
-.compose-form .compose-form__buttons-wrapper {
+.compose-form .compose-form__highlightable {
   background: $ui-base-color;
   border: 1px solid lighten($ui-base-color, 8%);
   border-top: 0;
@@ -268,7 +301,7 @@ html {
     }
   }
 
-  .compose-form__buttons-wrapper {
+  .compose-form__highlightable {
     background: darken($ui-base-color, 6%);
   }
 
@@ -290,6 +323,10 @@ html {
   border-color: lighten($purple, 8%);
 }
 
+.poll__option input[type='text'] {
+  background: $white;
+}
+
 .emoji-mart-bar {
   border-color: lighten($ui-base-color, 4%);
 
@@ -299,7 +336,7 @@ html {
 }
 
 .emoji-mart-search input {
-  background: rgba($ui-base-color, 0.3);
+  background: rgba($ui-base-color, 0.3) !important;
   border-color: $ui-base-color;
 }
 
@@ -340,6 +377,10 @@ html {
   }
 }
 
+.navigation-panel__menu {
+  background: $cream;
+}
+
 // Change the background colors of media and video spoilers
 .media-spoiler,
 .video-player__spoiler {
@@ -395,6 +436,29 @@ body.admin {
   background: $cream;
 }
 
+.character-counter {
+  color: $classic-base-color;
+  font-weight: bold;
+}
+
+.dropdown-button {
+  color: $classic-base-color !important;
+  border: 1px solid $classic-base-color;
+
+  &.active {
+    color: $white !important;
+    background-color: $blueberry;
+  }
+}
+
+.icon-button {
+  color: $darker-text-color !important;
+}
+
+.compose-form__footer .icon-button {
+  color: $lighter-text-color !important;
+}
+
 .card > a:hover {
   .card__bar {
     background: $blue;
@@ -806,6 +870,11 @@ body.admin {
   }
 }
 
+.status__display-name .display-name strong,
+.account__display-name .display-name strong {
+  color: $primary-text-color;
+}
+
 .accounts-grid {
   .account-grid-card {
     .controls {
@@ -1169,6 +1238,76 @@ a.status-card.compact:hover {
   }
 }
 
+.privacy-dropdown__option,
+.visibility-dropdown__option {
+  &:focus,
+  &.active {
+    background: $blueberry;
+  }
+
+  background: $white;
+  color: $black;
+
+  .privacy-dropdown__option__content,
+  .privacy-dropdown__option__content strong,
+  .privacy-dropdown__option__additional,
+  .visibility-dropdown__option__content,
+  .visibility-dropdown__option__content strong,
+  .visibility-dropdown__option__additional {
+    color: $black;
+  }
+
+  &:hover,
+  &:active {
+    background: $blueberry;
+    color: var(--dropdown-text-color);
+
+    .privacy-dropdown__option__content,
+    .privacy-dropdown__option__content strong,
+    .privacy-dropdown__option__additional,
+    .visibility-dropdown__option__content,
+    .visibility-dropdown__option__content strong,
+    .visibility-dropdown__option__additional {
+      color: var(--dropdown-text-color);
+    }
+  }
+
+  // Make sure adjacent hover/active states don't have a meeting radius.
+  &:hover + &:is(:focus, .active),
+  &:is(:focus, .active) + &:hover,
+  &:is(:focus, .active) + &:is(:focus, .active) {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}
+
+.dialog-modal__header,
+.dialog-modal__content__description {
+  color: darken($lighter-text-color, 10%);
+}
+
+.visibility-dropdown > label {
+  color: darken($lighter-text-color, 10%);
+}
+
+.visibility-dropdown__button {
+  color: darken($lighter-text-color, 10%);
+  background-color: $white;
+}
+
+.language-dropdown__dropdown__results__item {
+  color: $lighter-text-color;
+}
+
+.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 {
+  background-color: $blueberry;
+}
+
 // Tablet layout
 @media screen and (max-width: mastodon.$no-gap-breakpoint - 1px) {
   .tabs-bar__wrapper {