From 65a1b4fd1fad6d4aafb5f60f22e132caed1b3b70 Mon Sep 17 00:00:00 2001 From: Wolfgang Date: Sun, 1 Dec 2024 16:19:16 +0000 Subject: [PATCH] remove deprecated --- app/javascript/styles/contrast/variables.scss | 22 ++- .../styles/mastodon-light/diff.scss | 40 ++--- .../styles/mastodon-light/variables.scss | 21 +-- app/javascript/styles/mastodon/accounts.scss | 26 ++-- app/javascript/styles/mastodon/admin.scss | 29 ++-- app/javascript/styles/mastodon/basics.scss | 4 +- .../styles/mastodon/components.scss | 137 +++++++++--------- app/javascript/styles/mastodon/dashboard.scss | 4 +- .../styles/mastodon/emoji_picker.scss | 4 +- app/javascript/styles/mastodon/forms.scss | 18 +-- app/javascript/styles/mastodon/modal.scss | 4 +- app/javascript/styles/mastodon/polls.scss | 2 +- app/javascript/styles/mastodon/rtl.scss | 2 +- app/javascript/styles/mastodon/tables.scss | 2 +- app/javascript/styles/mastodon/variables.scss | 52 +++++-- app/javascript/styles/mastodon/widgets.scss | 4 +- 16 files changed, 199 insertions(+), 172 deletions(-) diff --git a/app/javascript/styles/contrast/variables.scss b/app/javascript/styles/contrast/variables.scss index 766591ba40..1d721c9d2b 100644 --- a/app/javascript/styles/contrast/variables.scss +++ b/app/javascript/styles/contrast/variables.scss @@ -1,3 +1,5 @@ +@use 'sass:color'; + // Dependent colors $black: #000000; @@ -11,12 +13,18 @@ $ui-primary-color: $classic-primary-color !default; $ui-secondary-color: $classic-secondary-color !default; $ui-highlight-color: $classic-highlight-color !default; -$darker-text-color: lighten($ui-primary-color, 20%) !default; -$dark-text-color: lighten($ui-primary-color, 12%) !default; -$secondary-text-color: lighten($ui-secondary-color, 6%) !default; -$highlight-text-color: lighten($ui-highlight-color, 10%) !default; -$action-button-color: lighten($ui-base-color, 50%); +$darker-text-color: color.adjust($ui-primary-color, $lightness: 20%) !default; +$dark-text-color: color.adjust($ui-primary-color, $lightness: 12%) !default; +$secondary-text-color: color.adjust( + $ui-secondary-color, + $lightness: 6% +) !default; +$highlight-text-color: color.adjust( + $ui-highlight-color, + $lightness: 10% +) !default; +$action-button-color: color.adjust($ui-base-color, $lightness: 50%); $inverted-text-color: $black !default; -$lighter-text-color: darken($ui-base-color, 6%) !default; -$light-text-color: darken($ui-primary-color, 40%) !default; +$lighter-text-color: color.adjust($ui-base-color, $lightness: -6%) !default; +$light-text-color: color.adjust($ui-primary-color, $lightness: -40%) !default; diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss index b19075139a..8d04b63eb3 100644 --- a/app/javascript/styles/mastodon-light/diff.scss +++ b/app/javascript/styles/mastodon-light/diff.scss @@ -27,7 +27,7 @@ } .directory__card__img { - background: lighten($ui-base-color, 12%); + background: color.adjust($ui-base-color, 12%); } .account__header { @@ -57,7 +57,7 @@ .confirmation-modal__cancel-button, .mute-modal__cancel-button, .block-modal__cancel-button { - color: lighten($ui-base-color, 26%); + color: color.adjust($ui-base-color, 26%); &:hover, &:focus, @@ -105,7 +105,7 @@ // Change the background colors of statuses .focusable:focus { - background: lighten($white, 4%); + background: color.adjust($white, 4%); } .account-gallery__item a { @@ -129,11 +129,11 @@ .compare-history-modal .report-modal__target, .report-dialog-modal .poll__option.dialog-option { - border-bottom-color: lighten($ui-base-color, 4%); + border-bottom-color: color.adjust($ui-base-color, 4%); } .report-dialog-modal__container { - border-top-color: lighten($ui-base-color, 4%); + border-top-color: color.adjust($ui-base-color, 4%); } .reactions-bar__item:hover, @@ -144,7 +144,7 @@ .reactions-bar__item.active { background-color: mix($white, $ui-highlight-color, 80%); - border-color: mix(lighten($ui-base-color, 8%), $ui-highlight-color, 80%); + border-color: mix(color.adjust($ui-base-color, 8%), $ui-highlight-color, 80%); } .media-modal__overlay .picture-in-picture__footer { @@ -176,7 +176,7 @@ } .flash-message.warning { - color: lighten($gold-star, 16%); + color: color.adjust($gold-star, 16%); } .boost-modal__action-bar, @@ -206,7 +206,7 @@ border: 1px solid var(--background-border-color); &:focus { - border-color: lighten($ui-base-color, 12%); + border-color: color.adjust($ui-base-color, 12%); background: $white; } } @@ -216,12 +216,12 @@ } .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { - background: lighten($ui-primary-color, 10%); + background: color.adjust($ui-primary-color, $lightness: 10%); } .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { - background: lighten($ui-highlight-color, 10%); + background: color.adjust($ui-highlight-color, $lightness: 10%); } // Change the default color used for the text in an empty column or on the error column @@ -234,7 +234,7 @@ // Change the default colors used on some parts of the profile pages .activity-stream-tabs { background: $account-background-color; - border-bottom-color: lighten($ui-base-color, 8%); + border-bottom-color: color.adjust($ui-base-color, $lightness: 8%); } .nothing-here, @@ -247,8 +247,8 @@ .picture-in-picture-placeholder { background: $white; - border-color: lighten($ui-base-color, 8%); - color: lighten($ui-base-color, 8%); + border-color: color.adjust($ui-base-color, $lightness: 8%); + color: color.adjust($ui-base-color, $lightness: 8%); } .directory__tag > a { @@ -263,7 +263,7 @@ &__toolbar, &__row, .nothing-here { - border-color: lighten($ui-base-color, 8%); + border-color: color.adjust($ui-base-color, $lightness: 8%); } } @@ -280,7 +280,7 @@ .detailed-status.light, .more.light, .status.light { - border-bottom-color: lighten($ui-base-color, 8%); + border-bottom-color: color.adjust($ui-base-color, $lightness: 8%); } } @@ -341,12 +341,12 @@ input[type='url'], input[type='datetime-local'], textarea { - background: darken($ui-base-color, 10%); + background: color.adjust($ui-base-color, $lightness: -10%); } select { - background: darken($ui-base-color, 10%) - url("data:image/svg+xml;utf8,") + background: color.adjust($ui-base-color, $lightness: -10%) + url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 14px; } } @@ -403,7 +403,7 @@ .mute-modal select { border: 1px solid var(--background-border-color); background: $simple-background-color - url("data:image/svg+xml;utf8,") + url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; } @@ -433,7 +433,7 @@ } .compose-form .spoiler-input__input { - color: lighten($ui-highlight-color, 8%); + color: color.adjust($ui-highlight-color, 8%); } .emoji-mart-search input, diff --git a/app/javascript/styles/mastodon-light/variables.scss b/app/javascript/styles/mastodon-light/variables.scss index 23d846ae80..b0f35f9b6f 100644 --- a/app/javascript/styles/mastodon-light/variables.scss +++ b/app/javascript/styles/mastodon-light/variables.scss @@ -16,7 +16,7 @@ $grey-600: hsl(240deg, 8%, 33%); // Trout $grey-100: hsl(240deg, 51%, 90%); // Topaz // Differences -$success-green: lighten(hsl(138deg, 32%, 35%), 8%); +$success-green: color.adjust(hsl(138deg, 32%, 35%), 8%); $base-overlay-background: $white !default; $valid-value-color: $success-green !default; @@ -47,23 +47,6 @@ $light-text-color: hsl(240deg, 16%, 32%); // Newly added colors $account-background-color: $white !default; -// Invert darkened and lightened colors -@function darken($color, $amount) { - @return hsl( - hue($color), - color.channel($color, 'saturation', $space: hsl), - color.channel($color, 'lightness', $space: hsl) + $amount - ); -} - -@function lighten($color, $amount) { - @return hsl( - hue($color), - color.channel($color, 'saturation', $space: hsl), - color.channel($color, 'lightness', $space: hsl) - $amount - ); -} - $emojis-requiring-inversion: 'chains'; body { @@ -80,5 +63,5 @@ body { --rich-text-text-color: rgba(114, 47, 83, 100%); --rich-text-decorations-color: rgba(255, 175, 212, 100%); --input-placeholder-color: #{transparentize($dark-text-color, 0.5)}; - --input-background-color: #{darken($ui-base-color, 10%)}; + --input-background-color: #{color.adjust($ui-base-color, 10%)}; } diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss index c769c88f75..9c7939c179 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.scss @@ -1,3 +1,5 @@ +@use 'sass:color'; + .card { & > a { display: block; @@ -57,7 +59,7 @@ display: block; margin: 0; border-radius: 4px; - background: darken($ui-base-color, 8%); + background: color.adjust($ui-base-color, -8%); object-fit: cover; } } @@ -139,7 +141,7 @@ .disabled { cursor: default; - color: lighten($inverted-text-color, 10%); + color: color.adjust($inverted-text-color, 10%); } @media screen and (width <= 700px) { @@ -243,9 +245,9 @@ } .simple_form .not_recommended { - color: lighten($error-red, 12%); - background-color: rgba(lighten($error-red, 12%), 0.1); - border-color: rgba(lighten($error-red, 12%), 0.5); + color: color.adjust($error-red, 12%); + background-color: rgba(color.adjust($error-red, 12%), 0.1); + border-color: rgba(color.adjust($error-red, 12%), 0.5); } .account__header__fields { @@ -253,14 +255,14 @@ padding: 0; margin: 15px -15px -15px; border: 0 none; - border-top: 1px solid lighten($ui-base-color, 12%); - border-bottom: 1px solid lighten($ui-base-color, 12%); + border-top: 1px solid color.adjust($ui-base-color, 12%); + border-bottom: 1px solid color.adjust($ui-base-color, 12%); font-size: 14px; line-height: 20px; dl { display: flex; - border-bottom: 1px solid lighten($ui-base-color, 12%); + border-bottom: 1px solid color.adjust($ui-base-color, 12%); } dt, @@ -279,7 +281,7 @@ width: 120px; flex: 0 0 auto; color: $secondary-text-color; - background: rgba(darken($ui-base-color, 8%), 0.5); + background: rgba(color.adjust($ui-base-color, -8%), 0.5); } dd { @@ -352,7 +354,7 @@ } .batch-table__row--muted { - color: lighten($ui-base-color, 26%); + color: color.adjust($ui-base-color, 26%); } .batch-table__row--muted .pending-account__header, @@ -361,7 +363,7 @@ &, a, strong { - color: lighten($ui-base-color, 26%); + color: color.adjust($ui-base-color, 26%); } } @@ -373,7 +375,7 @@ tbody td.accounts-table__extra, &__count, &__count small { - color: lighten($ui-base-color, 26%); + color: color.adjust($ui-base-color, 26%); } } diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index b5f8570ae2..9e567727b2 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -1,3 +1,4 @@ +@use 'sass:color'; @use 'sass:math'; $no-columns-breakpoint: 890px; @@ -39,7 +40,7 @@ $content-width: 840px; &__toggle { display: none; background: var(--background-color); - border-bottom: 1px solid lighten($ui-base-color, 4%); + border-bottom: 1px solid color.adjust($ui-base-color, 4%); align-items: center; &__logo { @@ -233,7 +234,7 @@ $content-width: 840px; &:hover, &:focus, &:active { - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, 4%); } &.selected { @@ -533,7 +534,7 @@ body, &:hover { color: $primary-text-color; - border-bottom: 2px solid lighten($ui-base-color, 5%); + border-bottom: 2px solid color.adjust($ui-base-color, 5%); } &.selected { @@ -778,7 +779,7 @@ a.inline-name-tag, &.suspended { .username { text-decoration: line-through; - color: lighten($error-red, 12%); + color: color.adjust($error-red, 12%); } .avatar { @@ -818,7 +819,7 @@ a.name-tag, } &.negative { - border-left-color: lighten($error-red, 12%); + border-left-color: color.adjust($error-red, 12%); } &.warning { @@ -1113,7 +1114,7 @@ a.name-tag, &.expired { .expiration { - color: lighten($error-red, 12%); + color: color.adjust($error-red, 12%); } .permissions-list__item__icon { @@ -1253,7 +1254,7 @@ a.name-tag, } path:last-child { - stroke: lighten($highlight-text-color, 6%) !important; + stroke: color.adjust($highlight-text-color, 6%) !important; fill: none !important; } } @@ -1271,9 +1272,9 @@ a.sparkline { background-color: var(--background-color); background-image: linear-gradient( 90deg, - lighten($ui-base-color, 8%), - lighten($ui-base-color, 12%), - lighten($ui-base-color, 8%) + color.adjust($ui-base-color, 8%), + color.adjust($ui-base-color, 12%), + color.adjust($ui-base-color, 8%) ); background-size: 200px 100%; background-repeat: no-repeat; @@ -1300,7 +1301,7 @@ a.sparkline { } &__item { - border-bottom: 1px solid lighten($ui-base-color, 4%); + border-bottom: 1px solid color.adjust($ui-base-color, 4%); &__key { font-weight: 500; @@ -1834,7 +1835,7 @@ a.sparkline { flex: 0 0 auto; width: 4px; height: 21px; - background: lighten($ui-base-color, 8%); + background: color.adjust($ui-base-color, 8%); margin: 0 2px; border-radius: 2px; @@ -1906,7 +1907,7 @@ a.sparkline { } .status { - border: 1px solid lighten($ui-base-color, 4%); + border: 1px solid color.adjust($ui-base-color, 4%); background: $ui-base-color; border-radius: 4px; } @@ -1921,7 +1922,7 @@ a.sparkline { line-height: 20px; word-wrap: break-word; font-weight: 400; - border: 1px solid lighten($ui-base-color, 4%); + border: 1px solid color.adjust($ui-base-color, 4%); color: $primary-text-color; box-sizing: border-box; min-height: 100%; diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss index 1a74d8d52d..b76b1be5a0 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/basics.scss @@ -1,3 +1,5 @@ +@use 'sass:color'; + @function hex-color($color) { @if type-of($color) == 'color' { $color: str-slice(ie-hex-str($color), 4); @@ -210,7 +212,7 @@ button { font-size: 16px; font-weight: 400; line-height: 1.7; - color: lighten($error-red, 4%); + color: color.adjust($error-red, $lightness: 4%); text-align: center; & > div { diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index a80bf59713..b8fe2c586b 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -130,8 +130,8 @@ &:active, &:focus, &:hover { - border-color: lighten($highlight-text-color, 4%); - color: lighten($highlight-text-color, 4%); + border-color: color.adjust($highlight-text-color, 4%); + color: color.adjust($highlight-text-color, 4%); background-color: transparent; text-decoration: none; } @@ -254,7 +254,7 @@ &:hover, &:active, &:focus { - color: lighten($action-button-color, 7%); + color: color.adjust($action-button-color, 7%); background-color: rgba($action-button-color, 0.15); } @@ -263,7 +263,7 @@ } &.disabled { - color: darken($action-button-color, 13%); + color: color.adjust($action-button-color, -13%); background-color: transparent; cursor: default; } @@ -274,7 +274,7 @@ &:hover, &:active, &:focus { - color: darken($lighter-text-color, 7%); + color: color.adjust($lighter-text-color, -7%); background-color: rgba($lighter-text-color, 0.15); } @@ -283,7 +283,7 @@ } &.disabled { - color: lighten($lighter-text-color, 7%); + color: color.adjust($lighter-text-color, 7%); background-color: transparent; } } @@ -299,7 +299,7 @@ } &.disabled { - color: lighten($highlight-text-color, 13%); + color: color.adjust($highlight-text-color, 13%); } } @@ -354,7 +354,7 @@ &:hover, &:active, &:focus { - color: darken($lighter-text-color, 7%); + color: color.adjust($lighter-text-color, -7%); background-color: rgba($lighter-text-color, 0.15); } @@ -363,7 +363,7 @@ } &.disabled { - color: lighten($lighter-text-color, 20%); + color: color.adjust($lighter-text-color, 20%); background-color: transparent; cursor: default; } @@ -855,7 +855,7 @@ body > [data-popper-placement] { &__sep { width: 1px; height: 22px; - background: lighten($ui-base-color, 8%); + background: color.adjust($ui-base-color, 8%); flex: 0 0 auto; } } @@ -1130,7 +1130,7 @@ body > [data-popper-placement] { inset-inline-start: 50%; top: 4px; transform: translateX(-50%); - background: lighten($ui-base-color, 8%); + background: color.adjust($ui-base-color, 8%); width: 2px; height: calc(100% + 32px - 8px); // Account for gap to next element } @@ -1167,11 +1167,11 @@ body > [data-popper-placement] { .edit-indicator { border-radius: 4px 4px 0 0; - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, 4%); padding: 12px; overflow-y: auto; flex: 0 0 auto; - border-bottom: 0.5px solid lighten($ui-base-color, 8%); + border-bottom: 0.5px solid color.adjust($ui-base-color, 8%); display: flex; flex-direction: column; gap: 4px; @@ -1349,7 +1349,7 @@ body > [data-popper-placement] { &__button { display: inline; - color: lighten($ui-highlight-color, 8%); + color: color.adjust($ui-highlight-color, 8%); border: 0; background: transparent; padding: 0; @@ -1434,7 +1434,7 @@ body > [data-popper-placement] { &:hover, &:focus { - background: lighten($ui-primary-color, 8%); + background: color.adjust($ui-primary-color, 8%); } } } @@ -1485,7 +1485,7 @@ body > [data-popper-placement] { &__line { height: 16px - 4px; - border-inline-start: 2px solid lighten($ui-base-color, 8%); + border-inline-start: 2px solid color.adjust($ui-base-color, 8%); width: 0; position: absolute; top: 0; @@ -1590,7 +1590,7 @@ body > [data-popper-placement] { padding: 0 10px; .detailed-status__display-name { - color: lighten($inverted-text-color, 16%); + color: color.adjust($inverted-text-color, 16%); span { display: inline; @@ -1801,13 +1801,17 @@ body > [data-popper-placement] { &:focus { .detailed-status, .detailed-status__action-bar { - background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%); + background: mix( + color.adjust($ui-base-color, 4%), + $ui-highlight-color, + 95% + ); } } .detailed-status__action-bar { border-top-color: mix( - lighten($ui-base-color, 8%), + color.adjust($ui-base-color, 8%), $ui-highlight-color, 95% ); @@ -3201,7 +3205,7 @@ $ui-header-logo-wordmark-width: 99px; } .copy-paste-text { - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, 4%); border-radius: 8px; border: 1px solid var(--background-border-color); padding: 16px; @@ -3578,7 +3582,7 @@ $ui-header-logo-wordmark-width: 99px; .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { - background: lighten($ui-highlight-color, 5%); + background: color.adjust($ui-highlight-color, 5%); } .switch-to-advanced { @@ -3723,7 +3727,7 @@ $ui-header-logo-wordmark-width: 99px; kbd { display: inline-block; padding: 3px 5px; - background-color: lighten($ui-base-color, 8%); + background-color: color.adjust($ui-base-color, 8%); border: 1px solid darken($ui-base-color, 4%); } } @@ -3958,7 +3962,7 @@ a.status-card { flex: 0 0 auto; width: 120px; aspect-ratio: 1; - background: lighten($ui-base-color, 8%); + background: color.adjust($ui-base-color, 8%); position: relative; & > .icon { @@ -4082,7 +4086,7 @@ a.status-card { &:focus, &:active { text-decoration: underline; - color: lighten($highlight-text-color, 4%); + color: color.adjust($highlight-text-color, 4%); } } @@ -4194,7 +4198,7 @@ a.status-card { font-size: 14px; &:hover { - color: lighten($highlight-text-color, 6%); + color: color.adjust($highlight-text-color, 6%); } } } @@ -4300,7 +4304,7 @@ a.status-card { } &:hover { - color: lighten($darker-text-color, 4%); + color: color.adjust($darker-text-color, 4%); } &:focus-visible { @@ -4451,7 +4455,7 @@ a.status-card { } .circular-progress { - color: lighten($ui-base-color, 26%); + color: color.adjust($ui-base-color, 26%); animation: 1.4s linear 0s infinite normal none running simple-rotate; circle { @@ -4606,7 +4610,7 @@ a.status-card { } .modal-container--preloader { - background: lighten($ui-base-color, 8%); + background: color.adjust($ui-base-color, 8%); } .account--panel { @@ -4682,7 +4686,7 @@ a.status-card { @include search-input; &::placeholder { - color: lighten($darker-text-color, 4%); + color: color.adjust($darker-text-color, 4%); } &::-moz-focus-inner { @@ -4696,7 +4700,7 @@ a.status-card { } &:focus { - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, 4%); } @media screen and (width <= 600px) { @@ -4715,7 +4719,7 @@ a.status-card { } &__multi-value { - background: lighten($ui-base-color, 8%); + background: color.adjust($ui-base-color, 8%); &__remove { cursor: pointer; @@ -4723,8 +4727,8 @@ a.status-card { &:hover, &:active, &:focus { - background: lighten($ui-base-color, 12%); - color: lighten($darker-text-color, 4%); + background: color.adjust($ui-base-color, 12%); + color: color.adjust($darker-text-color, 4%); } } } @@ -4744,12 +4748,12 @@ a.status-card { &:hover, &:active, &:focus { - color: lighten($dark-text-color, 4%); + color: color.adjust($dark-text-color, 4%); } } &__indicator-separator { - background-color: lighten($ui-base-color, 8%); + background-color: color.adjust($ui-base-color, 8%); } &__menu { @@ -7135,7 +7139,7 @@ a.status-card { &:hover, &:active, &:focus { - color: lighten($darker-text-color, 7%); + color: color.adjust($darker-text-color, 7%); } } @@ -7257,7 +7261,7 @@ a.status-card { inset-inline-start: 0; top: 50%; transform: translate(0, -50%); - background: lighten($ui-highlight-color, 8%); + background: color.adjust($ui-highlight-color, 8%); } &__handle { @@ -7270,7 +7274,7 @@ a.status-card { inset-inline-start: 0; margin-inline-start: -6px; transform: translate(0, -50%); - background: lighten($ui-highlight-color, 8%); + background: color.adjust($ui-highlight-color, 8%); box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); opacity: 0; @@ -7324,7 +7328,7 @@ a.status-card { height: 4px; border-radius: 4px; top: 14px; - background: lighten($ui-highlight-color, 8%); + background: color.adjust($ui-highlight-color, 8%); } &__buffer { @@ -7340,7 +7344,7 @@ a.status-card { height: 12px; top: 10px; margin-inline-start: -6px; - background: lighten($ui-highlight-color, 8%); + background: color.adjust($ui-highlight-color, 8%); box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); .no-reduce-motion & { @@ -7975,7 +7979,7 @@ noscript { } a { - color: lighten($ui-highlight-color, 8%); + color: color.adjust($ui-highlight-color, 8%); } .icon { @@ -8185,7 +8189,7 @@ noscript { } path:last-child { - stroke: lighten($highlight-text-color, 6%) !important; + stroke: color.adjust($highlight-text-color, 6%) !important; fill: none !important; } } @@ -8209,31 +8213,34 @@ noscript { } path:last-child { - stroke: lighten($gold-star, 6%) !important; + stroke: color.adjust($gold-star, 6%) !important; } } } &--disabled { .trends__item__name { - color: lighten($ui-base-color, 12%); + color: color.adjust($ui-base-color, 12%); a { - color: lighten($ui-base-color, 12%); + color: color.adjust($ui-base-color, 12%); } } .trends__item__current { - color: lighten($ui-base-color, 12%); + color: color.adjust($ui-base-color, 12%); } .trends__item__sparkline { path:first-child { - fill: rgba(lighten($ui-base-color, 12%), 0.25) !important; + fill: rgba(color.adjust($ui-base-color, 12%), 0.25) !important; } path:last-child { - stroke: lighten(lighten($ui-base-color, 12%), 6%) !important; + stroke: color.adjust( + color.adjust($ui-base-color, 12%), + 6% + ) !important; } } } @@ -8251,7 +8258,7 @@ noscript { padding-bottom: 0; &:focus { - background: lighten($ui-base-color, 2%); + background: color.adjust($ui-base-color, 2%); outline: 0; } @@ -8320,7 +8327,7 @@ noscript { } .announcements { - background: lighten($ui-base-color, 8%); + background: color.adjust($ui-base-color, 8%); font-size: 13px; display: flex; align-items: flex-end; @@ -8404,7 +8411,7 @@ noscript { &__item { flex-shrink: 0; - background: lighten($ui-base-color, 12%); + background: color.adjust($ui-base-color, 12%); color: $darker-text-color; border: 0; border-radius: 3px; @@ -8447,21 +8454,21 @@ noscript { &:hover, &:focus, &:active { - background: lighten($ui-base-color, 16%); + background: color.adjust($ui-base-color, 16%); transition: all 200ms ease-out; transition-property: background-color, color; - color: lighten($darker-text-color, 4%); + color: color.adjust($darker-text-color, 4%); } &.active { transition: all 100ms ease-in; transition-property: background-color, color; background-color: mix( - lighten($ui-base-color, 12%), + color.adjust($ui-base-color, 12%), $ui-highlight-color, 80% ); - color: lighten($highlight-text-color, 8%); + color: color.adjust($highlight-text-color, 8%); } } @@ -8491,7 +8498,7 @@ noscript { &:active, &:focus { opacity: 1; - color: lighten($darker-text-color, 4%); + color: color.adjust($darker-text-color, 4%); transition: all 200ms ease-out; transition-property: background-color, color; } @@ -8531,7 +8538,7 @@ noscript { &__footer { border-radius: 0 0 4px 4px; - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, 4%); padding: 10px; padding-top: 12px; display: flex; @@ -8540,7 +8547,7 @@ noscript { &__header { border-radius: 4px 4px 0 0; - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, 4%); padding: 10px; display: flex; justify-content: space-between; @@ -8602,7 +8609,7 @@ noscript { &:hover, &:focus, &:active { - border-color: lighten($ui-base-color, 12%); + border-color: color.adjust($ui-base-color, 12%); } } @@ -9000,7 +9007,7 @@ noscript { min-width: 0; &::placeholder { - color: lighten($darker-text-color, 4%); + color: color.adjust($darker-text-color, 4%); } &:focus { @@ -9022,7 +9029,7 @@ noscript { &.focused &__input { border-color: $highlight-text-color; - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, 4%); } &.invalid &__input { @@ -9302,7 +9309,7 @@ noscript { hr { border: 0; - border-top: 1px solid lighten($ui-base-color, 4%); + border-top: 1px solid color.adjust($ui-base-color, 4%); margin-top: 3em; margin-bottom: 3em; } @@ -9515,7 +9522,7 @@ noscript { width: 100%; height: auto; aspect-ratio: 1.9; - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, 4%); border-radius: 8px; margin-bottom: 30px; } @@ -9747,7 +9754,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(color.adjust($classic-base-color, 4%), 0.85); border-radius: 8px; box-shadow: 0 10px 15px -3px rgba($base-shadow-color, 0.25), @@ -9952,7 +9959,7 @@ noscript { opacity: 1; .inline-follow-suggestions__body__scroll-button__icon { - background: lighten($ui-highlight-color, 4%); + background: color.adjust($ui-highlight-color, 4%); } } } diff --git a/app/javascript/styles/mastodon/dashboard.scss b/app/javascript/styles/mastodon/dashboard.scss index d049b2456c..19a68a8d56 100644 --- a/app/javascript/styles/mastodon/dashboard.scss +++ b/app/javascript/styles/mastodon/dashboard.scss @@ -98,12 +98,12 @@ } &.positive { - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, 4%); color: $valid-value-color; } &.negative { - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, 4%); color: $error-value-color; } diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss index 3189000588..29fc384ddf 100644 --- a/app/javascript/styles/mastodon/emoji_picker.scss +++ b/app/javascript/styles/mastodon/emoji_picker.scss @@ -39,7 +39,7 @@ color: $darker-text-color; &:hover { - color: lighten($darker-text-color, 4%); + color: color.adjust($darker-text-color, 4%); } } @@ -47,7 +47,7 @@ color: $highlight-text-color; &:hover { - color: lighten($highlight-text-color, 4%); + color: color.adjust($highlight-text-color, 4%); } .emoji-mart-anchor-bar { diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index 0d7992aba2..bf90929206 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -337,7 +337,7 @@ code { .required abbr { text-decoration: none; - color: lighten($error-value-color, 12%); + color: color.adjust($error-value-color, 12%); } .fields-group { @@ -506,13 +506,13 @@ code { input[type='datetime-local'] { &:focus:invalid:not(:placeholder-shown), &:required:invalid:not(:placeholder-shown) { - border-color: lighten($error-red, 12%); + border-color: color.adjust($error-red, 12%); } } .input.field_with_errors { label { - color: lighten($error-red, 12%); + color: color.adjust($error-red, 12%); } input[type='text'], @@ -522,13 +522,13 @@ code { input[type='datetime-local'], textarea, select { - border-color: lighten($error-red, 12%); + border-color: color.adjust($error-red, 12%); } .error { display: block; font-weight: 500; - color: lighten($error-red, 12%); + color: color.adjust($error-red, 12%); margin-top: 4px; } } @@ -620,7 +620,7 @@ code { font-family: inherit; resize: vertical; background: $ui-base-color - url("data:image/svg+xml;utf8,") + url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 14px; border: 1px solid var(--background-border-color); border-radius: 4px; @@ -760,7 +760,7 @@ code { } &:focus { - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, 4%); } } @@ -844,7 +844,7 @@ code { &:hover, &:focus, &:active { - color: lighten($highlight-text-color, 8%); + color: color.adjust($highlight-text-color, 8%); } } } @@ -1097,7 +1097,7 @@ code { &__item { padding: 15px; color: $ui-secondary-color; - border-bottom: 1px solid lighten($ui-base-color, 4%); + border-bottom: 1px solid color.adjust($ui-base-color, 4%); display: flex; align-items: center; diff --git a/app/javascript/styles/mastodon/modal.scss b/app/javascript/styles/mastodon/modal.scss index 60e7d62245..23864b6182 100644 --- a/app/javascript/styles/mastodon/modal.scss +++ b/app/javascript/styles/mastodon/modal.scss @@ -1,5 +1,7 @@ +@use 'sass:color'; + .modal-layout { - background: darken($ui-base-color, 4%) + background: color.adjust($ui-base-color, -4%) url('data:image/svg+xml;utf8,') repeat-x bottom fixed; display: flex; diff --git a/app/javascript/styles/mastodon/polls.scss b/app/javascript/styles/mastodon/polls.scss index ced4c60c44..33ccc39f4b 100644 --- a/app/javascript/styles/mastodon/polls.scss +++ b/app/javascript/styles/mastodon/polls.scss @@ -121,7 +121,7 @@ &:active, &:focus, &:hover { - border-color: lighten($valid-value-color, 15%); + border-color: color.adjust($valid-value-color, 15%); border-width: 4px; } diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index 0a05ce7c62..610f2ecd99 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -41,7 +41,7 @@ body.rtl { .simple_form select { background: $ui-base-color - url("data:image/svg+xml;utf8,") + url("data:image/svg+xml;utf8,") no-repeat left 8px center / auto 16px; } diff --git a/app/javascript/styles/mastodon/tables.scss b/app/javascript/styles/mastodon/tables.scss index 07d1ce12fd..6dfbc5d089 100644 --- a/app/javascript/styles/mastodon/tables.scss +++ b/app/javascript/styles/mastodon/tables.scss @@ -241,7 +241,7 @@ a.table-action-link { &:hover, &:focus, &:active { - background: lighten($ui-base-color, 8%); + background: color.adjust($ui-base-color, 8%); } } } diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss index 2095eb310c..2999ecb7ea 100644 --- a/app/javascript/styles/mastodon/variables.scss +++ b/app/javascript/styles/mastodon/variables.scss @@ -1,3 +1,5 @@ +@use 'sass:color'; + // Commonly used web colors $black: #000000; // Black $white: #ffffff; // White @@ -33,9 +35,9 @@ $error-value-color: $error-red !default; // Tell UI to use selected colors $ui-base-color: $classic-base-color !default; // Darkest -$ui-base-lighter-color: lighten( +$ui-base-lighter-color: color.adjust( $ui-base-color, - 26% + $lightness: 26% ) !default; // Lighter darkest $ui-primary-color: $classic-primary-color !default; // Lighter $ui-secondary-color: $classic-secondary-color !default; // Lightest @@ -67,9 +69,15 @@ $primary-text-color: $white !default; $darker-text-color: $ui-primary-color !default; $dark-text-color: $ui-base-lighter-color !default; $secondary-text-color: $ui-secondary-color !default; -$highlight-text-color: lighten($ui-highlight-color, 8%) !default; +$highlight-text-color: color.adjust( + $ui-highlight-color, + $lightness: 8% +) !default; $action-button-color: $ui-base-lighter-color !default; -$action-button-focus-color: lighten($ui-base-lighter-color, 4%) !default; +$action-button-focus-color: color.adjust( + $ui-base-lighter-color, + $lightness: 4% +) !default; $passive-text-color: $gold-star !default; $active-passive-text-color: $success-green !default; @@ -95,26 +103,38 @@ $font-display: 'mastodon-font-display' !default; $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-border-color: #{color.adjust($ui-base-color, $lightness: 4%)}; + --dropdown-background-color: #{rgba( + color.adjust($ui-base-color, $lightness: -8%), + 0.9 + )}; --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( + color.adjust($ui-base-color, $lightness: -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%)}; + --modal-border-color: #{color.adjust($ui-base-color, $lightness: 4%)}; + --background-border-color: #{color.adjust($ui-base-color, $lightness: 4%)}; --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)}; - --surface-background-color: #{darken($ui-base-color, 4%)}; + --background-color: #{color.adjust($ui-base-color, $lightness: -8%)}; + --background-color-tint: #{rgba( + color.adjust($ui-base-color, $lightness: -8%), + 0.9 + )}; + --surface-background-color: #{color.adjust($ui-base-color, $lightness: -4%)}; --surface-variant-background-color: #{$ui-base-color}; - --surface-variant-active-background-color: #{lighten($ui-base-color, 4%)}; - --on-surface-color: #{transparentize($ui-base-color, 0.5)}; + --surface-variant-active-background-color: #{color.adjust( + $ui-base-color, + $lightness: 4% + )}; + --on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.5)}; --avatar-border-radius: 8px; --media-outline-color: #{rgba(#fcf8ff, 0.15)}; --overlay-icon-shadow: drop-shadow(0 0 8px #{rgba($base-shadow-color, 0.25)}); - --error-background-color: #{darken($error-red, 16%)}; - --error-active-background-color: #{darken($error-red, 12%)}; + --error-background-color: #{color.adjust($error-red, $lightness: -16%)}; + --error-active-background-color: #{color.adjust($error-red, $lightness: -12%)}; --on-error-color: #fff; --rich-text-container-color: rgba(87, 24, 60, 100%); --rich-text-text-color: rgba(255, 175, 212, 100%); diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss index f467069052..56bb8b85e5 100644 --- a/app/javascript/styles/mastodon/widgets.scss +++ b/app/javascript/styles/mastodon/widgets.scss @@ -1,3 +1,5 @@ +@use 'sass:color'; + .directory { &__tag { box-sizing: border-box; @@ -108,7 +110,7 @@ tbody td { padding: 15px 0; vertical-align: middle; - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid color.adjust($ui-base-color, 8%); } tbody tr:last-child td {