style: update Tangerine UI

app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss

@@ -8,7 +8,7 @@
 
 /* 📄 Meta */
 :root {
-  --version: "v2.0";
+  --version: "v2.2";
 
   --variant-name: "Cherry";
   --variant-emoji: "\1F352\00A0";
@@ -948,7 +948,7 @@ path {
 }
 .app-body button.icon-button.active .icon-retweet,
 .app-body .detailed-status__button button.icon-button.active:hover .icon-retweet {
-  background-image: var(--icon-boost-active);
+  background-image: var(--icon-boost-accent-active);
 }
 .app-body .status__prepend__icon .icon-retweet,
 .app-body .notification-group--reblog .icon-repeat {
@@ -2754,7 +2754,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer)
 .active
 .icon-retweet + .icon-button__counter > .animated-number {
-  color: #FF4014;
+  color: var(--color-accent);
 }
 .app-body
 :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer)
@@ -2819,12 +2819,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .status__action-bar {
   justify-content: left;
   margin-top: 8px;
-  gap: 22px;
+  gap: 9px;
-}
-@media screen and (max-width:550px) {
-  .app-body .status__action-bar {
-    gap: 10px;
-  }
 }
 .app-body .status__action-bar .status__action-bar__button-wrapper {
   flex-grow: 0;
@@ -2913,6 +2908,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
   align-items: center;
   background-color: var(--color-content-secondary-bg);
   color: var(--color-content-fg);
+  outline: 1px solid color-mix(in srgb, var(--color-fg), transparent 95%);
+  outline-offset: -1px;
   font-size: 13px;
 }
 .app-body .status__prepend:has(.status__prepend__icon .icon-retweet) {
@@ -3083,8 +3080,10 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
   font-size: 12px;
 }
 .app-body .status-card:has(+ .more-from-author) {
+  box-sizing: border-box;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
+  border-bottom: 0;
 }
 .app-body .status-card + .more-from-author {
   background-color: var(--color-content-secondary-bg);
@@ -3093,10 +3092,19 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 }
 .app-body .more-from-author {
   color: var(--color-content-fg);
+  overflow: hidden;
 }
 .app-body .more-from-author .logo {
   color: var(--color-content-fg);
-  width: 16px;
+  min-width: 16px;
+  height: 16px;
+}
+.app-body .more-from-author > span {
+  flex-grow: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  mask-image: linear-gradient(90deg, black 80%, transparent 96%);
 }
 .app-body .notification-ungrouped  .more-from-author :is(.account__avatar) {
   width: 16px !important;
@@ -3493,11 +3501,25 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
   box-shadow: inset 0 10px var(--color-bg);
 }
 .app-body .column-header__wrapper.active:before {
-  background: none;
+  top: -17px;
-  opacity: 40%;
+  bottom: unset;
+  opacity: 30%;
+  height: 35px;
+  width: 100%;
+  background: radial-gradient(ellipse, var(--color-accent) 0, transparent 60%);
 }
 .app-body .column-header__wrapper.active {
-  box-shadow: 0 0;
+  box-shadow: none;
+}
+@media screen and (min-width:1175px) {
+  .app-body .column-header__wrapper.active:before {
+    top: unset;
+    bottom: -15px;
+    border-top: 1px solid var(--color-lines-translucent);
+  }
+  .app-body .column-header__wrapper.active {
+    box-shadow: 0 1px 0 var(--color-lines-translucent);
+  }
 }
 .app-body .column-header {
   border-radius: 8px;
@@ -3784,13 +3806,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
       border-radius: 15px 15px 0 0;
     }
     @media (prefers-color-scheme: light) {
-      .app-body.theme-system .ui::after {
+      .app-body:is(.theme-system, .theme-mastodon-light) .ui::after {
         box-shadow: 0 -10px 0 10px #f3f5f7;
         border-radius: 15px 15px 0 0;
       }
     }
     @media (prefers-color-scheme: dark) {
-      .app-body.theme-system .ui::after {
+      .app-body:is(.theme-system, .theme-default) .ui::after {
         box-shadow: 0 -10px 0 10px #191b22;
         border-radius: 15px 15px 0 0;
       }
@@ -5656,6 +5678,7 @@ button {
   width: 100%;
   border-bottom: 2px solid var(--color-content-secondary-separator);
   background-color: var(--color-content-bg);
+  color: var(--color-content-fg);
   box-sizing: border-box;
 }
 .app-body .item-list .column-link:hover {
@@ -5686,10 +5709,25 @@ button {
 .app-body .list-adder .column-inline-form {
   border-radius: 0;
 }
-.list-adder .list {
+.app-body .list-adder .list {
   border-bottom: 2px solid var(--color-content-secondary-separator);
 }
-
+.app-body .list-editor .drawer__pager {
+  border: none;
+  border-radius: 0;
+}
+.app-body .list-editor .account__relationship .icon-button {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+.app-body .list-editor .search .search__input {
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+  border-color: var(--color-accent-lines);
+}
+.app-body .list-editor .search .search__input:focus {
+  border-color: var(--color-accent);
+}
 
 /* ➕ Follow requests */
 .app-body #Follow-requests {
@@ -6292,11 +6330,9 @@ button {
   color: var(--color-fg);
 }
 .app-body .interaction-modal__icon {
-  vertical-align: middle;
-  display: inline-block;
   transform: scale(1.4) translateX(-2px);
 }
-.app-body .interaction-modal p {
+.app-body .interaction-modal :is(p, strong) {
   color: var(--color-content-fg);
 }
 .app-body .interaction-modal p.hint {
@@ -7464,7 +7500,7 @@ a:is(.active,
   padding: 0;
 }
 
-.layout-multiple-columns .drawer__inner:not(:has(> .search-results))::after {
+.layout-multiple-columns .search + .drawer__pager .drawer__inner:has(.compose-form):not(:has(> .search-results))::after {
   content: var(--meta);
   color: var(--color-fg-muted);
   padding: 12px;
@@ -7477,6 +7513,10 @@ a:is(.active,
   display: none;
 }
 
+.layout-multiple-columns .list-editor__accounts + .drawer__inner.backdrop {
+  background-color: var(--color-content-bg);
+}
+
 @media screen and (min-width:630px) and (max-width:1174px) {
   .layout-multiple-columns
   :is(
@@ -7635,7 +7675,6 @@ a:is(.active,
 .app-body
 .trends__item:has(
     .trends__item__name a:is(
-        [href*="gift" i],
         [href*="christmas" i],
         [href*="weihnachten" i],
         [href*="noel" i]

app/javascript/styles/tangerineui-lagoon/tangerineui-lagoon.scss

@@ -8,7 +8,7 @@
 
 /* 📄 Meta */
 :root {
-  --version: "v2.0";
+  --version: "v2.2";
 
   --variant-name: "Lagoon";
   --variant-emoji: "\1F420\00A0";
@@ -948,7 +948,7 @@ path {
 }
 .app-body button.icon-button.active .icon-retweet,
 .app-body .detailed-status__button button.icon-button.active:hover .icon-retweet {
-  background-image: var(--icon-boost-active);
+  background-image: var(--icon-boost-accent-active);
 }
 .app-body .status__prepend__icon .icon-retweet,
 .app-body .notification-group--reblog .icon-repeat {
@@ -2754,7 +2754,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer)
 .active
 .icon-retweet + .icon-button__counter > .animated-number {
-  color: #FF4014;
+  color: var(--color-accent);
 }
 .app-body
 :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer)
@@ -2819,12 +2819,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .status__action-bar {
   justify-content: left;
   margin-top: 8px;
-  gap: 22px;
+  gap: 9px;
-}
-@media screen and (max-width:550px) {
-  .app-body .status__action-bar {
-    gap: 10px;
-  }
 }
 .app-body .status__action-bar .status__action-bar__button-wrapper {
   flex-grow: 0;
@@ -2913,6 +2908,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
   align-items: center;
   background-color: var(--color-content-secondary-bg);
   color: var(--color-content-fg);
+  outline: 1px solid color-mix(in srgb, var(--color-fg), transparent 95%);
+  outline-offset: -1px;
   font-size: 13px;
 }
 .app-body .status__prepend:has(.status__prepend__icon .icon-retweet) {
@@ -3083,8 +3080,10 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
   font-size: 12px;
 }
 .app-body .status-card:has(+ .more-from-author) {
+  box-sizing: border-box;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
+  border-bottom: 0;
 }
 .app-body .status-card + .more-from-author {
   background-color: var(--color-content-secondary-bg);
@@ -3093,10 +3092,19 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 }
 .app-body .more-from-author {
   color: var(--color-content-fg);
+  overflow: hidden;
 }
 .app-body .more-from-author .logo {
   color: var(--color-content-fg);
-  width: 16px;
+  min-width: 16px;
+  height: 16px;
+}
+.app-body .more-from-author > span {
+  flex-grow: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  mask-image: linear-gradient(90deg, black 80%, transparent 96%);
 }
 .app-body .notification-ungrouped  .more-from-author :is(.account__avatar) {
   width: 16px !important;
@@ -3493,11 +3501,25 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
   box-shadow: inset 0 10px var(--color-bg);
 }
 .app-body .column-header__wrapper.active:before {
-  background: none;
+  top: -17px;
-  opacity: 40%;
+  bottom: unset;
+  opacity: 30%;
+  height: 35px;
+  width: 100%;
+  background: radial-gradient(ellipse, var(--color-accent) 0, transparent 60%);
 }
 .app-body .column-header__wrapper.active {
-  box-shadow: 0 0;
+  box-shadow: none;
+}
+@media screen and (min-width:1175px) {
+  .app-body .column-header__wrapper.active:before {
+    top: unset;
+    bottom: -15px;
+    border-top: 1px solid var(--color-lines-translucent);
+  }
+  .app-body .column-header__wrapper.active {
+    box-shadow: 0 1px 0 var(--color-lines-translucent);
+  }
 }
 .app-body .column-header {
   border-radius: 8px;
@@ -3784,13 +3806,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
       border-radius: 15px 15px 0 0;
     }
     @media (prefers-color-scheme: light) {
-      .app-body.theme-system .ui::after {
+      .app-body:is(.theme-system, .theme-mastodon-light) .ui::after {
         box-shadow: 0 -10px 0 10px #f3f5f7;
         border-radius: 15px 15px 0 0;
       }
     }
     @media (prefers-color-scheme: dark) {
-      .app-body.theme-system .ui::after {
+      .app-body:is(.theme-system, .theme-default) .ui::after {
         box-shadow: 0 -10px 0 10px #191b22;
         border-radius: 15px 15px 0 0;
       }
@@ -5656,6 +5678,7 @@ button {
   width: 100%;
   border-bottom: 2px solid var(--color-content-secondary-separator);
   background-color: var(--color-content-bg);
+  color: var(--color-content-fg);
   box-sizing: border-box;
 }
 .app-body .item-list .column-link:hover {
@@ -5686,10 +5709,25 @@ button {
 .app-body .list-adder .column-inline-form {
   border-radius: 0;
 }
-.list-adder .list {
+.app-body .list-adder .list {
   border-bottom: 2px solid var(--color-content-secondary-separator);
 }
-
+.app-body .list-editor .drawer__pager {
+  border: none;
+  border-radius: 0;
+}
+.app-body .list-editor .account__relationship .icon-button {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+.app-body .list-editor .search .search__input {
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+  border-color: var(--color-accent-lines);
+}
+.app-body .list-editor .search .search__input:focus {
+  border-color: var(--color-accent);
+}
 
 /* ➕ Follow requests */
 .app-body #Follow-requests {
@@ -6292,11 +6330,9 @@ button {
   color: var(--color-fg);
 }
 .app-body .interaction-modal__icon {
-  vertical-align: middle;
-  display: inline-block;
   transform: scale(1.4) translateX(-2px);
 }
-.app-body .interaction-modal p {
+.app-body .interaction-modal :is(p, strong) {
   color: var(--color-content-fg);
 }
 .app-body .interaction-modal p.hint {
@@ -7464,7 +7500,7 @@ a:is(.active,
   padding: 0;
 }
 
-.layout-multiple-columns .drawer__inner:not(:has(> .search-results))::after {
+.layout-multiple-columns .search + .drawer__pager .drawer__inner:has(.compose-form):not(:has(> .search-results))::after {
   content: var(--meta);
   color: var(--color-fg-muted);
   padding: 12px;
@@ -7477,6 +7513,10 @@ a:is(.active,
   display: none;
 }
 
+.layout-multiple-columns .list-editor__accounts + .drawer__inner.backdrop {
+  background-color: var(--color-content-bg);
+}
+
 @media screen and (min-width:630px) and (max-width:1174px) {
   .layout-multiple-columns
   :is(
@@ -7635,7 +7675,6 @@ a:is(.active,
 .app-body
 .trends__item:has(
     .trends__item__name a:is(
-        [href*="gift" i],
         [href*="christmas" i],
         [href*="weihnachten" i],
         [href*="noel" i]