fairy-floss: further fixing work

app/javascript/styles/fairy-floss.scss

@@ -1,3 +1,4 @@
+@use 'fairy-floss/css_variables';
 @import 'fairy-floss/variables';
 @import 'application';
 @import 'fairy-floss/diff';

app/javascript/styles/fairy-floss/css_variables.scss

@@ -0,0 +1,24 @@
+@use 'sass:color';
+@use '../mastodon/variables' as *;
+@use 'variables' as *;
+@use '../mastodon/functions' as *;
+
+body {
+  --dropdown-background-color: #fff;
+  --modal-border-color: hsl(240deg, 25%, 88%);
+  --modal-background-color: var(--background-color);
+  --background-color: #c8c4d4;
+  --background-color-tint: rgba(255, 255, 255, 80%);
+  --background-filter: blur(10px);
+  --surface-variant-background-color: #f1ebfb;
+  --on-surface-color: #{color.adjust(#2e2b3b, $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(#ada6bf, $alpha: -0.5)};
+  --input-background-color: #{darken(#2e2b3b, 10%)};
+}
+
+body.admin {
+  --background-color: #2e2b3b;
+}

app/javascript/styles/fairy-floss/diff.scss

@@ -16,6 +16,12 @@
 .autosuggest-textarea__textarea,
 .spoiler-input__input {
   background: $simple-background-color !important;
+  color: $black !important;
+}
+
+.compose-form__modifiers {
+  background: $simple-background-color !important;
+  color: $black !important;
 }
 
 .reply-indicator__content,
@@ -68,6 +74,10 @@
   }
 }
 
+.status__relative-time {
+  color: $purpleicon;
+}
+
 .getting-started__footer a {
   text-decoration: underline;
 
@@ -168,6 +178,14 @@ body.admin {
   background: lighten($purple4, 8%);
 }
 
+.compose-form__poll__select__value {
+  background: lighten($purple4, 8%);
+}
+
+.compose-form__poll__select__label {
+  color: $black;
+}
+
 .text-icon-button.active {
   color: darken($pink, 12%);
 }
@@ -274,7 +292,7 @@ body.admin {
   background: $purple2;
 }
 
-.status {
+.status:not(.status--is-quote) {
   border-bottom: 1px solid lighten($purple2, 8%);
 }
 
@@ -310,8 +328,32 @@ body.admin {
   }
 }
 
+.character-counter {
+  color: $classic-lighter-text-color;
+  font-weight: bold;
+}
+
+.dropdown-button {
+  color: $classic-lighter-text-color !important;
+  border: 1px solid $classic-lighter-text-color;
+
+  &.active {
+    color: darken($pink, 8%) !important;
+    background-color: lighten($purple4, 8%);
+  }
+}
+
+.icon-button {
+  color: $purpleicon !important;
+}
+
+.compose-form__footer .icon-button {
+  color: $classic-lighter-text-color !important;
+}
+
 .icon-button.active {
-  color: $pink;
+  color: darken($pink, 8%) !important;
+  background-color: lighten($purple4, 8%) !important;
 }
 
 .notification__favourite-icon-wrapper .star-icon,
@@ -346,6 +388,12 @@ a.mention,
   color: $coral;
 }
 
+.emoji-mart-search input,
+.language-dropdown__dropdown .emoji-mart-search input,
+.poll__option input[type='text'] {
+  background: $white;
+}
+
 .emoji-mart-bar:first-child {
   background: $purple4;
 }
@@ -650,3 +698,73 @@ a.mention,
   color: $lighter-text-color;
   font-weight: 900;
 }
+
+.privacy-dropdown__option,
+.visibility-dropdown__option {
+  &:focus,
+  &.active {
+    background: $coral;
+  }
+
+  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: $purple1;
+  }
+
+  &:hover,
+  &:active {
+    background: $coral;
+    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($classic-lighter-text-color, 10%);
+}
+
+.visibility-dropdown > label {
+  color: darken($classic-lighter-text-color, 10%);
+}
+
+.visibility-dropdown__button {
+  color: darken($classic-lighter-text-color, 10%);
+  background-color: $white;
+}
+
+.language-dropdown__dropdown__results__item {
+  color: $classic-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: $coral;
+}

app/javascript/styles/fairy-floss/variables.scss

@@ -27,6 +27,7 @@ $classic-base-color: $purple1; // Midnight Express
 $classic-primary-color: $purple4; // Echo Blue
 $classic-secondary-color: #d9e1e8; // Pattens Blue
 $classic-highlight-color: #ff857f; // Summer Sky
+$classic-lighter-text-color: #6a6388;
 
 // Variables for defaults in UI
 $base-shadow-color: $black !default;