diff --git a/app/javascript/flavours/glitch/styles/_mixins.scss b/app/javascript/flavours/glitch/styles/_mixins.scss index 4dc4a4877..0f1d4ef85 100644 --- a/app/javascript/flavours/glitch/styles/_mixins.scss +++ b/app/javascript/flavours/glitch/styles/_mixins.scss @@ -1,3 +1,5 @@ +@use "variables" as *; + @mixin avatar-radius() { border-radius: $ui-avatar-border-size; background-position: 50%; diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss index 836a58e89..f4f5c36a8 100644 --- a/app/javascript/flavours/glitch/styles/about.scss +++ b/app/javascript/flavours/glitch/styles/about.scss @@ -1,4 +1,6 @@ @use "sass:color"; +@use "mixins" as *; +@use "variables" as *; $maximum-width: 1235px; $fluid-breakpoint: $maximum-width + 20px; diff --git a/app/javascript/flavours/glitch/styles/accessibility.scss b/app/javascript/flavours/glitch/styles/accessibility.scss index 390c609c1..0ade8598c 100644 --- a/app/javascript/flavours/glitch/styles/accessibility.scss +++ b/app/javascript/flavours/glitch/styles/accessibility.scss @@ -1,3 +1,6 @@ +@use "mixins" as *; +@use "variables" as *; + $emojis-requiring-inversion: "back" "copyright" "curly_loop" "currency_exchange" "end" "heavy_check_mark" "heavy_division_sign" "heavy_dollar_sign" "heavy_minus_sign" "heavy_multiplication_x" "heavy_plus_sign" "on" diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.scss index fb354b487..84ab7beb9 100644 --- a/app/javascript/flavours/glitch/styles/accounts.scss +++ b/app/javascript/flavours/glitch/styles/accounts.scss @@ -1,4 +1,6 @@ @use "sass:color"; +@use "mixins" as *; +@use "variables" as *; .card { & > a { diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index d1b60ddc7..26cc86105 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/admin.scss @@ -1,5 +1,7 @@ @use "sass:color"; @use "sass:math"; +@use "mixins" as *; +@use "variables" as *; $no-columns-breakpoint: 600px; $sidebar-width: 240px; diff --git a/app/javascript/flavours/glitch/styles/basics.scss b/app/javascript/flavours/glitch/styles/basics.scss index daf225810..b094e9002 100644 --- a/app/javascript/flavours/glitch/styles/basics.scss +++ b/app/javascript/flavours/glitch/styles/basics.scss @@ -1,13 +1,15 @@ @use "sass:meta"; @use "sass:string"; @use "sass:color"; +@use "mixins" as *; +@use "variables" as *; @function hex-color($color) { - @if type-of($color) == "color" { - $color: str-slice(ie-hex-str($color), 4); + @if meta.type-of($color) == "color" { + $color: string.slice(color.ie-hex-str($color), 4); } - @return "%23" + unquote($color); + @return "%23" + string.unquote($color); } body { diff --git a/app/javascript/flavours/glitch/styles/branding.scss b/app/javascript/flavours/glitch/styles/branding.scss index d1bddc68b..ef45778b6 100644 --- a/app/javascript/flavours/glitch/styles/branding.scss +++ b/app/javascript/flavours/glitch/styles/branding.scss @@ -1,3 +1,5 @@ +@use "variables" as *; + .logo { color: $primary-text-color; } diff --git a/app/javascript/flavours/glitch/styles/components/about.scss b/app/javascript/flavours/glitch/styles/components/about.scss index 98ff91ad1..2ed1cf089 100644 --- a/app/javascript/flavours/glitch/styles/components/about.scss +++ b/app/javascript/flavours/glitch/styles/components/about.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../mixins" as *; +@use "../variables" as *; + .image { position: relative; overflow: hidden; @@ -84,7 +88,7 @@ width: 100%; height: auto; aspect-ratio: 1.9; - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: 4%); border-radius: 8px; margin-bottom: 30px; } @@ -110,7 +114,7 @@ } &__meta { - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: 4%); border-radius: 4px; display: flex; margin-bottom: 30px; @@ -126,7 +130,7 @@ width: 0; border: 0; border-style: solid; - border-color: lighten($ui-base-color, 8%); + border-color: color.adjust($ui-base-color, $lightness: 8%); border-left-width: 1px; min-height: calc(100% - 60px); flex: 0 0 auto; @@ -231,7 +235,7 @@ line-height: 22px; padding: 20px; border-radius: 4px; - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: 4%); color: $highlight-text-color; cursor: pointer; } @@ -241,7 +245,7 @@ } &__body { - border: 1px solid lighten($ui-base-color, 4%); + border: 1px solid color.adjust($ui-base-color, $lightness: 4%); border-top: 0; padding: 20px; font-size: 15px; @@ -251,18 +255,18 @@ &__domain-blocks { margin-top: 30px; - background: darken($ui-base-color, 4%); - border: 1px solid lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: -4%); + border: 1px solid color.adjust($ui-base-color, $lightness: 4%); border-radius: 4px; &__domain { - border-bottom: 1px solid lighten($ui-base-color, 4%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%); padding: 10px; font-size: 15px; color: $darker-text-color; &:nth-child(2n) { - background: darken($ui-base-color, 2%); + background: color.adjust($ui-base-color, $lightness: -2%); } &:last-child { diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 89a46a612..087c10338 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -1,6 +1,10 @@ +@use "sass:color"; +@use "../mixins" as *; +@use "../variables" as *; + .account { padding: 10px; - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%); color: inherit; text-decoration: none; @@ -165,7 +169,7 @@ .account__header__wrapper { flex: 0 0 auto; - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: 4%); } .account__disclaimer { @@ -203,8 +207,8 @@ } .account__action-bar { - border-top: 1px solid lighten($ui-base-color, 8%); - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%); line-height: 36px; overflow: hidden; flex: 0 0 auto; @@ -222,7 +226,7 @@ text-decoration: none; overflow: hidden; flex: 0 1 100%; - border-inline-start: 1px solid lighten($ui-base-color, 8%); + border-inline-start: 1px solid color.adjust($ui-base-color, $lightness: 8%); padding: 10px 0; border-bottom: 4px solid transparent; @@ -278,7 +282,7 @@ padding: 8px 10px; padding-inline-start: 68px; position: relative; - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%); min-height: 54px; &__details { @@ -324,9 +328,9 @@ .account--panel { display: flex; gap: 5px; - background: lighten($ui-base-color, 4%); - border-top: 1px solid lighten($ui-base-color, 8%); - border-bottom: 1px solid lighten($ui-base-color, 8%); + background: color.adjust($ui-base-color, $lightness: 4%); + border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%); flex-direction: row; padding: 5px; } @@ -481,9 +485,9 @@ .account__moved-note { padding: 14px 10px; padding-bottom: 16px; - background: lighten($ui-base-color, 4%); - border-top: 1px solid lighten($ui-base-color, 8%); - border-bottom: 1px solid lighten($ui-base-color, 8%); + background: color.adjust($ui-base-color, $lightness: 4%); + border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%); &__message { position: relative; @@ -563,7 +567,7 @@ overflow: hidden; height: 145px; position: relative; - background: darken($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: -4%); img { object-fit: cover; @@ -576,9 +580,9 @@ &__bar { position: relative; - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: 4%); padding: 5px; - border-bottom: 1px solid lighten($ui-base-color, 12%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 12%); .avatar { display: block; @@ -586,8 +590,8 @@ width: 94px; .account__avatar { - background: darken($ui-base-color, 8%); - border: 2px solid lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: -8%); + border: 2px solid color.adjust($ui-base-color, $lightness: 4%); } } } @@ -707,10 +711,10 @@ .account__header__fields { margin: 0; - border-top: 1px solid lighten($ui-base-color, 12%); + border-top: 1px solid color.adjust($ui-base-color, $lightness: 12%); a { - color: lighten($ui-highlight-color, 8%); + color: color.adjust($ui-highlight-color, $lightness: 8%); } dl:first-child .verified { @@ -753,8 +757,8 @@ flex-direction: column; font-size: 14px; font-weight: 400; - 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, $lightness: 12%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 12%); &__header { display: flex; @@ -783,7 +787,7 @@ &:hover, &:active, &:focus { - color: lighten($darker-text-color, 7%); + color: color.adjust($darker-text-color, $lightness: 7%); background-color: rgba($darker-text-color, 0.15); } @@ -792,7 +796,7 @@ } &[disabled] { - color: darken($darker-text-color, 13%); + color: color.adjust($darker-text-color, $lightness: -13%); background-color: transparent; cursor: default; } @@ -837,7 +841,7 @@ .follow-request-banner, .account-memorial-banner { padding: 20px; - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: 4%); display: flex; align-items: center; flex-direction: column; diff --git a/app/javascript/flavours/glitch/styles/components/announcements.scss b/app/javascript/flavours/glitch/styles/components/announcements.scss index be27120a7..dfea2bdd2 100644 --- a/app/javascript/flavours/glitch/styles/components/announcements.scss +++ b/app/javascript/flavours/glitch/styles/components/announcements.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../mixins" as *; +@use "../variables" as *; + .announcements__item__content { word-wrap: break-word; overflow-y: auto; @@ -42,7 +46,7 @@ } .announcements { - background: lighten($ui-base-color, 8%); + background: color.adjust($ui-base-color, $lightness: 8%); font-size: 13px; display: flex; align-items: flex-end; @@ -126,7 +130,7 @@ &__item { flex-shrink: 0; - background: lighten($ui-base-color, 12%); + background: color.adjust($ui-base-color, $lightness: 12%); border: 0; border-radius: 3px; margin: 2px; @@ -169,26 +173,26 @@ &:hover, &:focus, &:active { - background: lighten($ui-base-color, 16%); + background: color.adjust($ui-base-color, $lightness: 16%); transition: all 200ms ease-out; transition-property: background-color, color; &__count { - color: lighten($darker-text-color, 4%); + color: color.adjust($darker-text-color, $lightness: 4%); } } &.active { transition: all 100ms ease-in; transition-property: background-color, color; - background-color: mix( - lighten($ui-base-color, 12%), + background-color: color.mix( + color.adjust($ui-base-color, $lightness: 12%), $ui-highlight-color, 80% ); .reactions-bar__item__count { - color: lighten($highlight-text-color, 8%); + color: color.adjust($highlight-text-color, $lightness: 8%); } } } @@ -219,7 +223,7 @@ &:active, &:focus { opacity: 1; - color: lighten($darker-text-color, 4%); + color: color.adjust($darker-text-color, $lightness: 4%); transition: all 200ms ease-out; transition-property: background-color, color; } diff --git a/app/javascript/flavours/glitch/styles/components/boost.scss b/app/javascript/flavours/glitch/styles/components/boost.scss index 2969958e2..1090ccd24 100644 --- a/app/javascript/flavours/glitch/styles/components/boost.scss +++ b/app/javascript/flavours/glitch/styles/components/boost.scss @@ -1,10 +1,14 @@ +@use "sass:color"; +@use "../mixins" as *; +@use "../variables" as *; + button.icon-button { i.fa-retweet { background-image: url("data:image/svg+xml;utf8,"); } &:hover i.fa-retweet { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); } &.reblogPrivate { @@ -13,14 +17,14 @@ button.icon-button { } &:hover i.fa-retweet { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); } } &.disabled { i.fa-retweet, &:hover i.fa-retweet { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); } } diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 841dd6f2e..2eefa1ef9 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../mixins" as *; +@use "../variables" as *; + .column__wrapper { display: flex; flex: 1 1 auto; @@ -108,7 +112,7 @@ $ui-header-height: 55px; } .tabs-bar__wrapper { - background: darken($ui-base-color, 8%); + background: color.adjust($ui-base-color, $lightness: -8%); position: sticky; top: $ui-header-height; z-index: 2; @@ -170,7 +174,7 @@ $ui-header-height: 55px; .column-back-button { box-sizing: border-box; width: 100%; - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: 4%); border-radius: 4px 4px 0 0; color: $highlight-text-color; cursor: pointer; @@ -223,7 +227,7 @@ $ui-header-height: 55px; } .column-link { - background: lighten($ui-base-color, 8%); + background: color.adjust($ui-base-color, $lightness: 8%); color: $primary-text-color; display: block; font-size: 16px; @@ -235,7 +239,7 @@ $ui-header-height: 55px; &:hover, &:focus, &:active { - background: lighten($ui-base-color, 11%); + background: color.adjust($ui-base-color, $lightness: 11%); } &:focus { @@ -327,7 +331,7 @@ $ui-header-height: 55px; color: $darker-text-color; font-size: 16px; font-weight: 700; - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: 4%); } .column-header > button, @@ -374,7 +378,7 @@ $ui-header-height: 55px; &:focus-visible, &:hover, &.active { - background: darken($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: -4%); } &:active { @@ -418,7 +422,7 @@ $ui-header-height: 55px; &:hover, &.active { color: inherit; - background: darken($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: -4%); } &:active { @@ -516,7 +520,7 @@ $ui-header-height: 55px; height: 0; background: transparent; border: 0; - border-top: 1px solid lighten($ui-base-color, 12%); + border-top: 1px solid color.adjust($ui-base-color, $lightness: 12%); margin: 10px 0; } @@ -532,7 +536,7 @@ $ui-header-height: 55px; } .column-header__collapsible-inner { - background: lighten($ui-base-color, 8%); + background: color.adjust($ui-base-color, $lightness: 8%); padding: 15px; } @@ -628,11 +632,11 @@ $ui-header-height: 55px; &:not([disabled]) { &:hover, &:focus { - background-color: darken($ui-base-color, 10%); + background-color: color.adjust($ui-base-color, $lightness: -10%); } &.active { - background-color: darken($ui-highlight-color, 2%); + background-color: color.adjust($ui-highlight-color, $lightness: -2%); &:hover, &:focus { @@ -684,7 +688,7 @@ $ui-header-height: 55px; } .follow_requests-unlocked_explanation { - background: darken($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: -4%); contain: initial; flex-grow: 0; } @@ -740,7 +744,7 @@ $ui-header-height: 55px; display: flex; justify-content: flex-start; align-items: center; - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: 4%); label { flex: 1 1 auto; @@ -767,7 +771,7 @@ $ui-header-height: 55px; } .column-settings__outer { - background: lighten($ui-base-color, 8%); + background: color.adjust($ui-base-color, $lightness: 8%); padding: 15px; } @@ -793,7 +797,7 @@ $ui-header-height: 55px; @include search-input; &::placeholder { - color: lighten($darker-text-color, 4%); + color: color.adjust($darker-text-color, $lightness: 4%); } &::-moz-focus-inner { @@ -807,7 +811,7 @@ $ui-header-height: 55px; } &:focus { - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: 4%); } @media screen and (width <= 600px) { @@ -826,7 +830,7 @@ $ui-header-height: 55px; } &__multi-value { - background: lighten($ui-base-color, 8%); + background: color.adjust($ui-base-color, $lightness: 8%); &__remove { cursor: pointer; @@ -834,8 +838,8 @@ $ui-header-height: 55px; &:hover, &:active, &:focus { - background: lighten($ui-base-color, 12%); - color: lighten($darker-text-color, 4%); + background: color.adjust($ui-base-color, $lightness: 12%); + color: color.adjust($darker-text-color, $lightness: 4%); } } } @@ -855,12 +859,12 @@ $ui-header-height: 55px; &:hover, &:active, &:focus { - color: lighten($dark-text-color, 4%); + color: color.adjust($dark-text-color, $lightness: 4%); } } &__indicator-separator { - background-color: lighten($ui-base-color, 8%); + background-color: color.adjust($ui-base-color, $lightness: 8%); } &__menu { @@ -881,7 +885,7 @@ $ui-header-height: 55px; &--is-focused, &--is-selected { - background: darken($ui-secondary-color, 10%); + background: color.adjust($ui-secondary-color, $lightness: -10%); } } } @@ -895,7 +899,7 @@ $ui-header-height: 55px; .notifications-permission-banner { padding: 30px; - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%); display: flex; flex-direction: column; align-items: center; @@ -973,8 +977,8 @@ $ui-header-height: 55px; .column-list { margin: 0 20px; - border: 1px solid lighten($ui-base-color, 8%); - background: darken($ui-base-color, 2%); + border: 1px solid color.adjust($ui-base-color, $lightness: 8%); + background: color.adjust($ui-base-color, $lightness: -2%); border-radius: 4px; &__empty-message { @@ -1089,7 +1093,7 @@ $ui-header-height: 55px; } .hashtag-header { - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%); padding: 15px; font-size: 17px; line-height: 22px; diff --git a/app/javascript/flavours/glitch/styles/components/compose_form.scss b/app/javascript/flavours/glitch/styles/components/compose_form.scss index 8e1c8fb9a..7ac5786f5 100644 --- a/app/javascript/flavours/glitch/styles/components/compose_form.scss +++ b/app/javascript/flavours/glitch/styles/components/compose_form.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../mixins" as *; +@use "../variables" as *; + .compose-form { padding: 10px; @@ -307,7 +311,7 @@ &:focus, &:active, &.selected { - background: darken($ui-secondary-color, 10%); + background: color.adjust($ui-secondary-color, $lightness: -10%); } > .account, @@ -398,7 +402,7 @@ &:hover, &:focus, &:active { - color: lighten($secondary-text-color, 7%); + color: color.adjust($secondary-text-color, $lightness: 7%); } } @@ -469,7 +473,7 @@ border-radius: 6px; width: 100%; height: 6px; - background: darken($simple-background-color, 8%); + background: color.adjust($simple-background-color, $lightness: -8%); } .upload-progress__tracker { @@ -495,7 +499,7 @@ padding: 10px; border-radius: 0 0 4px 4px; color: $action-button-color; - background: darken($simple-background-color, 8%); + background: color.adjust($simple-background-color, $lightness: -8%); } .compose-form__buttons { @@ -605,7 +609,7 @@ } &.active:hover { - background: lighten($ui-highlight-color, 4%); + background: color.adjust($ui-highlight-color, $lightness: 4%); } } @@ -687,7 +691,7 @@ } &:hover { - background: lighten($ui-highlight-color, 4%); + background: color.adjust($ui-highlight-color, $lightness: 4%); } } } diff --git a/app/javascript/flavours/glitch/styles/components/directory.scss b/app/javascript/flavours/glitch/styles/components/directory.scss index 4004ef758..63073ab3d 100644 --- a/app/javascript/flavours/glitch/styles/components/directory.scss +++ b/app/javascript/flavours/glitch/styles/components/directory.scss @@ -1,19 +1,23 @@ +@use "sass:color"; +@use "../mixins" as *; +@use "../variables" as *; + .scrollable .account-card { margin: 10px; - background: lighten($ui-base-color, 8%); + background: color.adjust($ui-base-color, $lightness: 8%); } .scrollable .account-card__title__avatar { img, .account__avatar { - border-color: lighten($ui-base-color, 8%); + border-color: color.adjust($ui-base-color, $lightness: 8%); } } .scrollable .account-card__bio::after { background: linear-gradient( to left, - lighten($ui-base-color, 8%), + color.adjust($ui-base-color, $lightness: 8%), transparent ); } @@ -61,8 +65,8 @@ vertical-align: middle; &.checked { - border-color: lighten($ui-highlight-color, 4%); - background: lighten($ui-highlight-color, 4%); + border-color: color.adjust($ui-highlight-color, $lightness: 4%); + background: color.adjust($ui-highlight-color, $lightness: 4%); } } } diff --git a/app/javascript/flavours/glitch/styles/components/domains.scss b/app/javascript/flavours/glitch/styles/components/domains.scss index a99ccd02b..358170272 100644 --- a/app/javascript/flavours/glitch/styles/components/domains.scss +++ b/app/javascript/flavours/glitch/styles/components/domains.scss @@ -1,6 +1,9 @@ +@use "sass:color"; +@use "../variables" as *; + .domain { padding: 10px; - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%); .domain__domain-name { flex: 1 1 auto; diff --git a/app/javascript/flavours/glitch/styles/components/doodle.scss b/app/javascript/flavours/glitch/styles/components/doodle.scss index 7d15627d9..d36edb812 100644 --- a/app/javascript/flavours/glitch/styles/components/doodle.scss +++ b/app/javascript/flavours/glitch/styles/components/doodle.scss @@ -1,3 +1,6 @@ +@use "../mixins" as *; +@use "../variables" as *; + $doodle-background: #d9e1e8; .doodle-modal { diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index 16b7a469c..8cd144f9c 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/app/javascript/flavours/glitch/styles/components/drawer.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../mixins" as *; +@use "../variables" as *; + .drawer { display: flex; gap: var(--size-layout-gap); @@ -96,7 +100,7 @@ &:focus-visible, &:hover, &.active { - background: darken($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: -4%); } } @@ -163,15 +167,15 @@ } .search-results__section { - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%); &:last-child { border-bottom: 0; } &__header { - background: darken($ui-base-color, 4%); - border-bottom: 1px solid lighten($ui-base-color, 8%); + background: color.adjust($ui-base-color, $lightness: -4%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%); padding: 15px; font-weight: 500; font-size: 14px; @@ -212,7 +216,7 @@ &:hover, &:active, &:focus { - color: lighten($secondary-text-color, 4%); + color: color.adjust($secondary-text-color, $lightness: 4%); text-decoration: underline; } } @@ -249,7 +253,7 @@ } .drawer__inner__mastodon { - background: lighten($ui-base-color, 4%) + background: color.adjust($ui-base-color, $lightness: 4%) url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto; flex: 1; @@ -280,7 +284,7 @@ } .pseudo-drawer { - background: lighten($ui-base-color, 13%); + background: color.adjust($ui-base-color, $lightness: 13%); font-size: 13px; text-align: start; } @@ -304,7 +308,7 @@ bottom / 100% auto, - lighten($ui-base-color, 4%); + color.adjust($ui-base-color, $lightness: 4%); } @else { background: url("~flavours/glitch/images/wave-drawer-glitched.png") @@ -312,7 +316,7 @@ bottom / 100% auto, - lighten($ui-base-color, 4%); + color.adjust($ui-base-color, $lightness: 4%); } & > .mastodon { diff --git a/app/javascript/flavours/glitch/styles/components/emoji.scss b/app/javascript/flavours/glitch/styles/components/emoji.scss index 30daca4de..f1456c292 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji.scss @@ -1,3 +1,6 @@ +@use "../mixins" as *; +@use "../variables" as *; + .emojione { font-size: inherit; vertical-align: middle; diff --git a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss index 2297573f2..d766f2b1d 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../mixins" as *; +@use "../variables" as *; + .emoji-mart { &, * { @@ -15,7 +19,7 @@ } .emoji-mart-bar { - border: 0 solid darken($ui-secondary-color, 8%); + border: 0 solid color.adjust($ui-secondary-color, $lightness: -8%); &:first-child { border-bottom-width: 1px; @@ -52,7 +56,7 @@ border: 0; &:hover { - color: darken($lighter-text-color, 4%); + color: color.adjust($lighter-text-color, $lightness: -4%); } } @@ -60,7 +64,7 @@ color: $highlight-text-color; &:hover { - color: darken($highlight-text-color, 4%); + color: color.adjust($highlight-text-color, $lightness: -4%); } .emoji-mart-anchor-bar { @@ -74,7 +78,7 @@ inset-inline-start: 0; width: 100%; height: 3px; - background-color: darken($ui-highlight-color, 3%); + background-color: color.adjust($ui-highlight-color, $lightness: -3%); } .emoji-mart-anchors { diff --git a/app/javascript/flavours/glitch/styles/components/explore.scss b/app/javascript/flavours/glitch/styles/components/explore.scss index 78826e633..9cf125aea 100644 --- a/app/javascript/flavours/glitch/styles/components/explore.scss +++ b/app/javascript/flavours/glitch/styles/components/explore.scss @@ -1,9 +1,13 @@ +@use "sass:color"; +@use "../mixins" as *; +@use "../variables" as *; + .account-card__header { position: relative; } .explore__search-header { - background: darken($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: -4%); justify-content: center; align-items: center; padding: 15px; @@ -14,12 +18,12 @@ } .search__input { - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid color.adjust($ui-base-color, $lightness: 8%); padding: 10px; } .search__popout { - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid color.adjust($ui-base-color, $lightness: 8%); } .search .fa { @@ -45,7 +49,7 @@ color: $primary-text-color; text-decoration: none; padding: 15px; - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%); gap: 15px; &:last-child { diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 1f1332500..0411f44c1 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -1,26 +1,26 @@ -@import "misc"; -@import "boost"; -@import "accounts"; -@import "domains"; -@import "status"; -@import "modal"; -@import "compose_form"; -@import "columns"; -@import "regeneration_indicator"; -@import "directory"; -@import "search"; -@import "emoji"; -@import "doodle"; -@import "drawer"; -@import "media"; -@import "sensitive"; -@import "lists"; -@import "emoji_picker"; -@import "local_settings"; -@import "single_column"; -@import "announcements"; -@import "explore"; -@import "scrollbars"; -@import "signed_out"; -@import "privacy_policy"; -@import "about"; +@use "misc"; +@use "boost"; +@use "accounts"; +@use "domains"; +@use "status"; +@use "modal"; +@use "compose_form"; +@use "columns"; +@use "regeneration_indicator"; +@use "directory"; +@use "search"; +@use "emoji"; +@use "doodle"; +@use "drawer"; +@use "media"; +@use "sensitive"; +@use "lists"; +@use "emoji_picker"; +@use "local_settings"; +@use "single_column"; +@use "announcements"; +@use "explore"; +@use "scrollbars"; +@use "signed_out"; +@use "privacy_policy"; +@use "about"; diff --git a/app/javascript/flavours/glitch/styles/components/lists.scss b/app/javascript/flavours/glitch/styles/components/lists.scss index e173016b6..e1df37229 100644 --- a/app/javascript/flavours/glitch/styles/components/lists.scss +++ b/app/javascript/flavours/glitch/styles/components/lists.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../mixins" as *; +@use "../variables" as *; + .list-editor { background: $ui-base-color; flex-direction: column; @@ -12,7 +16,7 @@ h4 { padding: 15px 0; - background: lighten($ui-base-color, 13%); + background: color.adjust($ui-base-color, $lightness: 13%); font-weight: 500; font-size: 16px; text-align: center; @@ -65,11 +69,11 @@ } &__account { - background: lighten($ui-base-color, 13%); + background: color.adjust($ui-base-color, $lightness: 13%); } &__lists { - background: lighten($ui-base-color, 13%); + background: color.adjust($ui-base-color, $lightness: 13%); height: 50vh; border-radius: 0 0 8px 8px; overflow-y: auto; @@ -77,7 +81,7 @@ .list { padding: 10px; - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%); } .list__wrapper { diff --git a/app/javascript/flavours/glitch/styles/components/local_settings.scss b/app/javascript/flavours/glitch/styles/components/local_settings.scss index 375ed1077..02c558916 100644 --- a/app/javascript/flavours/glitch/styles/components/local_settings.scss +++ b/app/javascript/flavours/glitch/styles/components/local_settings.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../mixins" as *; +@use "../variables" as *; + .glitch.local-settings { position: relative; display: flex; @@ -64,7 +68,7 @@ font-size: inherit; text-align: start; text-decoration: none; - background: lighten($ui-secondary-color, 8%); + background: color.adjust($ui-secondary-color, $lightness: 8%); cursor: pointer; transition: background 0.3s; @@ -91,7 +95,7 @@ } .glitch.local-settings__navigation { - background: lighten($ui-secondary-color, 8%); + background: color.adjust($ui-secondary-color, $lightness: 8%); width: 212px; font-size: 15px; line-height: 20px; diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index 49340e427..c98416912 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../mixins" as *; +@use "../variables" as *; + .video-error-cover { align-items: center; background: $base-overlay-background; @@ -23,7 +27,7 @@ &:hover, &:active, &:focus { - color: lighten($darker-text-color, 8%); + color: color.adjust($darker-text-color, $lightness: 8%); } .status__content > & { @@ -385,7 +389,7 @@ overflow: hidden; box-sizing: border-box; position: relative; - background: darken($ui-base-color, 8%); + background: color.adjust($ui-base-color, $lightness: -8%); border-radius: 4px; padding-bottom: 44px; width: 100%; @@ -554,7 +558,7 @@ &:hover, &:active, &:focus { - color: lighten($darker-text-color, 7%); + color: color.adjust($darker-text-color, $lightness: 7%); } } @@ -690,7 +694,7 @@ inset-inline-start: 0; top: 50%; transform: translate(0, -50%); - background: lighten($ui-highlight-color, 8%); + background: color.adjust($ui-highlight-color, $lightness: 8%); } &__handle { @@ -703,7 +707,7 @@ inset-inline-start: 0; margin-inline-start: -6px; transform: translate(0, -50%); - background: lighten($ui-highlight-color, 8%); + background: color.adjust($ui-highlight-color, $lightness: 8%); box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); opacity: 0; @@ -757,7 +761,7 @@ height: 4px; border-radius: 4px; top: 14px; - background: lighten($ui-highlight-color, 8%); + background: color.adjust($ui-highlight-color, $lightness: 8%); } &__buffer { @@ -773,7 +777,7 @@ height: 12px; top: 10px; margin-inline-start: -6px; - background: lighten($ui-highlight-color, 8%); + background: color.adjust($ui-highlight-color, $lightness: 8%); box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); .no-reduce-motion & { diff --git a/app/javascript/flavours/glitch/styles/components/misc.scss b/app/javascript/flavours/glitch/styles/components/misc.scss index 38dc98d4d..bd7c6923c 100644 --- a/app/javascript/flavours/glitch/styles/components/misc.scss +++ b/app/javascript/flavours/glitch/styles/components/misc.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../mixins" as *; +@use "../variables" as *; + .app-body { -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; @@ -169,7 +173,7 @@ &:hover, &:active, &:focus-visible { - color: lighten($action-button-color, 7%); + color: color.adjust($action-button-color, $lightness: 7%); background-color: rgba($action-button-color, 0.15); transition: all 200ms ease-out; transition-property: background-color, color; @@ -214,7 +218,7 @@ &:hover, &:active, &:focus-visible { - color: darken($lighter-text-color, 7%); + color: color.adjust($lighter-text-color, $lightness: -7%); background-color: rgba($lighter-text-color, 0.15); } @@ -230,7 +234,7 @@ color: $highlight-text-color; &.disabled { - color: lighten($highlight-text-color, 13%); + color: color.adjust($highlight-text-color, $lightness: 13%); } } } @@ -288,7 +292,7 @@ &:hover, &:active, &:focus-visible { - color: darken($lighter-text-color, 7%); + color: color.adjust($lighter-text-color, $lightness: -7%); background-color: rgba($lighter-text-color, 0.15); transition: all 200ms ease-out; transition-property: background-color, color; @@ -299,7 +303,7 @@ } &.disabled { - color: lighten($lighter-text-color, 20%); + color: color.adjust($lighter-text-color, $lightness: 20%); background-color: transparent; cursor: default; } @@ -701,7 +705,7 @@ body > [data-popper-placement] { .tabs-bar { box-sizing: border-box; display: flex; - background: lighten($ui-base-color, 8%); + background: color.adjust($ui-base-color, $lightness: 8%); flex: 0 0 auto; overflow-y: auto; } @@ -716,7 +720,7 @@ body > [data-popper-placement] { text-align: center; font-size: 14px; font-weight: 500; - border-bottom: 2px solid lighten($ui-base-color, 8%); + border-bottom: 2px solid color.adjust($ui-base-color, $lightness: 8%); transition: all 50ms linear; transition-property: border-bottom, background, color; @@ -729,8 +733,8 @@ body > [data-popper-placement] { &:focus, &:active { @include multi-columns("screen and (min-width: 631px)") { - background: lighten($ui-base-color, 14%); - border-bottom-color: lighten($ui-base-color, 14%); + background: color.adjust($ui-base-color, $lightness: 14%); + border-bottom-color: color.adjust($ui-base-color, $lightness: 14%); } } @@ -758,7 +762,7 @@ body > [data-popper-placement] { inset-inline-start: 9px; top: -13px; background: $ui-highlight-color; - border: 2px solid lighten($ui-base-color, 8%); + border: 2px solid color.adjust($ui-base-color, $lightness: 8%); padding: 1px 6px; border-radius: 6px; font-size: 10px; @@ -780,7 +784,7 @@ body > [data-popper-placement] { } .column-link--transparent .icon-with-badge__badge { - border-color: darken($ui-base-color, 8%); + border-color: color.adjust($ui-base-color, $lightness: -8%); } .scrollable { @@ -861,11 +865,11 @@ body > [data-popper-placement] { .react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track { - background-color: darken($ui-base-color, 10%); + background-color: color.adjust($ui-base-color, $lightness: -10%); } .react-toggle--checked .react-toggle-track { - background-color: darken($ui-highlight-color, 2%); + background-color: color.adjust($ui-highlight-color, $lightness: -2%); } .react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) @@ -918,7 +922,7 @@ body > [data-popper-placement] { height: 22px; border: 1px solid $ui-base-color; border-radius: 50%; - background-color: darken($simple-background-color, 2%); + background-color: color.adjust($simple-background-color, $lightness: -2%); box-sizing: border-box; transition: all 0.25s ease; transition-property: border-color, left; @@ -963,7 +967,7 @@ body > [data-popper-placement] { margin-top: 10px; h4 { - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%); padding: 10px; font-size: 12px; text-transform: uppercase; @@ -1029,8 +1033,8 @@ body > [data-popper-placement] { kbd { display: inline-block; padding: 3px 5px; - background-color: lighten($ui-base-color, 8%); - border: 1px solid darken($ui-base-color, 4%); + background-color: color.adjust($ui-base-color, $lightness: 8%); + border: 1px solid color.adjust($ui-base-color, $lightness: -4%); } } @@ -1059,7 +1063,7 @@ body > [data-popper-placement] { &.light { color: $inverted-text-color; - border-bottom: 2px solid lighten($ui-base-color, 27%); + border-bottom: 2px solid color.adjust($ui-base-color, $lightness: 27%); &:focus, &:active { @@ -1093,7 +1097,7 @@ button.icon-button.active i.fa-retweet { } .reduce-motion button.icon-button.disabled i.fa-retweet { - color: darken($action-button-color, 13%); + color: color.adjust($action-button-color, $lightness: -13%); } .load-more { @@ -1112,12 +1116,12 @@ button.icon-button.active i.fa-retweet { text-decoration: none; &:hover { - background: lighten($ui-base-color, 2%); + background: color.adjust($ui-base-color, $lightness: 2%); } } .load-gap { - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%); } .timeline-hint { @@ -1140,7 +1144,7 @@ button.icon-button.active i.fa-retweet { &:focus, &:active { text-decoration: underline; - color: lighten($highlight-text-color, 4%); + color: color.adjust($highlight-text-color, $lightness: 4%); } } } @@ -1177,8 +1181,8 @@ button.icon-button.active i.fa-retweet { flex-direction: column; align-items: center; justify-content: center; - background: lighten($ui-base-color, 8%); - border-inline-start: 1px solid lighten($ui-base-color, 20%); + background: color.adjust($ui-base-color, $lightness: 8%); + border-inline-start: 1px solid color.adjust($ui-base-color, $lightness: 20%); box-shadow: 0 0 5px black; border-bottom: 1px solid $ui-base-color; } @@ -1232,7 +1236,7 @@ button.icon-button.active i.fa-retweet { } .circular-progress { - color: lighten($ui-base-color, 26%); + color: color.adjust($ui-base-color, $lightness: 26%); animation: 1.4s linear 0s infinite normal none running simple-rotate; circle { @@ -1524,12 +1528,12 @@ button.icon-button.active i.fa-retweet { .conversation { display: flex; - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%); padding: 5px; padding-bottom: 0; &:focus { - background: lighten($ui-base-color, 2%); + background: color.adjust($ui-base-color, $lightness: 2%); outline: 0; } @@ -1597,10 +1601,10 @@ button.icon-button.active i.fa-retweet { } &--unread { - background: lighten($ui-base-color, 2%); + background: color.adjust($ui-base-color, $lightness: 2%); &:focus { - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: 4%); } .conversation__content__info { diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index 27e706a3f..e052c383e 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -1,5 +1,9 @@ +@use "sass:color"; +@use "../mixins" as *; +@use "../variables" as *; + .modal-container--preloader { - background: lighten($ui-base-color, 8%); + background: color.adjust($ui-base-color, $lightness: 8%); } .modal-root { @@ -134,7 +138,7 @@ .onboarding-modal__paginator, .error-modal__footer { flex: 0 0 auto; - background: darken($ui-secondary-color, 8%); + background: color.adjust($ui-secondary-color, $lightness: -8%); display: flex; padding: 25px; @@ -158,8 +162,8 @@ &:hover, &:focus, &:active { - color: darken($lighter-text-color, 4%); - background-color: darken($ui-secondary-color, 16%); + color: color.adjust($lighter-text-color, $lightness: -4%); + background-color: color.adjust($ui-secondary-color, $lightness: -16%); } &.onboarding-modal__done, @@ -169,7 +173,7 @@ &:hover, &:focus, &:active { - color: lighten($inverted-text-color, 4%); + color: color.adjust($inverted-text-color, $lightness: 4%); } } } @@ -190,17 +194,17 @@ width: 14px; height: 14px; border-radius: 14px; - background: darken($ui-secondary-color, 16%); + background: color.adjust($ui-secondary-color, $lightness: -16%); margin: 0 3px; cursor: pointer; &:hover { - background: darken($ui-secondary-color, 18%); + background: color.adjust($ui-secondary-color, $lightness: -18%); } &.active { cursor: default; - background: darken($ui-secondary-color, 24%); + background: color.adjust($ui-secondary-color, $lightness: -24%); } } @@ -231,7 +235,7 @@ &:hover, &:focus, &:active { - color: lighten($highlight-text-color, 4%); + color: color.adjust($highlight-text-color, $lightness: 4%); } } @@ -329,7 +333,7 @@ } .figure { - background: darken($ui-base-color, 8%); + background: color.adjust($ui-base-color, $lightness: -8%); color: $secondary-text-color; margin-bottom: 20px; border-radius: 4px; @@ -421,7 +425,7 @@ .mute-modal, .block-modal, .compare-history-modal { - background: lighten($ui-secondary-color, 8%); + background: color.adjust($ui-secondary-color, $lightness: 8%); color: $inverted-text-color; border-radius: 8px; overflow: hidden; @@ -455,7 +459,7 @@ } .status__content__spoiler-link { - color: lighten($secondary-text-color, 8%); + color: color.adjust($secondary-text-color, $lightness: 8%); } } @@ -537,7 +541,7 @@ max-width: 90vw; width: 480px; height: 80vh; - background: lighten($ui-secondary-color, 8%); + background: color.adjust($ui-secondary-color, $lightness: 8%); color: $inverted-text-color; border-radius: 8px; overflow: hidden; @@ -577,7 +581,7 @@ &__lead { font-size: 17px; line-height: 22px; - color: lighten($inverted-text-color, 16%); + color: color.adjust($inverted-text-color, $lightness: 16%); margin-bottom: 30px; a { @@ -620,7 +624,7 @@ background: $ui-primary-color; &:hover { - background: lighten($ui-primary-color, 8%); + background: color.adjust($ui-primary-color, $lightness: 8%); } } @@ -639,7 +643,7 @@ &:active, &:focus, &:hover { - border-color: lighten($inverted-text-color, 15%); + border-color: color.adjust($inverted-text-color, $lightness: 15%); border-width: 4px; } @@ -660,7 +664,7 @@ & > .poll__option__text { font-size: 13px; - color: lighten($inverted-text-color, 16%); + color: color.adjust($inverted-text-color, $lightness: 16%); strong { font-size: 17px; @@ -829,7 +833,7 @@ margin-bottom: 10px; &:focus { - border: 1px solid darken($ui-secondary-color, 8%); + border: 1px solid color.adjust($ui-secondary-color, $lightness: -8%); } &__wrapper { @@ -978,7 +982,7 @@ &:hover, &:focus, &:active { - color: darken($lighter-text-color, 4%); + color: color.adjust($lighter-text-color, $lightness: -4%); background-color: transparent; } } @@ -1022,9 +1026,9 @@ outline: 0; font-family: inherit; background: $simple-background-color - url("data:image/svg+xml;utf8,") + url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; - border: 1px solid darken($simple-background-color, 14%); + border: 1px solid color.adjust($simple-background-color, $lightness: -14%); border-radius: 4px; padding: 6px 10px; padding-inline-end: 30px; @@ -1159,7 +1163,7 @@ } &:focus { - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: 4%); } @media screen and (width <= 600px) { @@ -1364,7 +1368,7 @@ img.modal-warning { &__input { @include search-input; - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid color.adjust($ui-base-color, $lightness: 8%); padding: 4px 6px; color: $primary-text-color; font-size: 16px; @@ -1381,7 +1385,7 @@ img.modal-warning { flex: 1 1 auto; &::placeholder { - color: lighten($darker-text-color, 4%); + color: color.adjust($darker-text-color, $lightness: 4%); } &:focus { @@ -1398,12 +1402,12 @@ img.modal-warning { margin-top: -1px; padding-top: 5px; padding-bottom: 5px; - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid color.adjust($ui-base-color, $lightness: 8%); } &.focused &__input { border-color: $highlight-text-color; - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: 4%); } &.invalid &__input { @@ -1471,7 +1475,7 @@ img.modal-warning { input { display: block; font-family: inherit; - background: darken($ui-base-color, 8%); + background: color.adjust($ui-base-color, $lightness: -8%); border: 1px solid $highlight-text-color; color: $darker-text-color; border-radius: 4px; @@ -1484,7 +1488,7 @@ img.modal-warning { &:focus { outline: 0; - background: darken($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: -4%); } } diff --git a/app/javascript/flavours/glitch/styles/components/privacy_policy.scss b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss index f00c49c65..d5c5302be 100644 --- a/app/javascript/flavours/glitch/styles/components/privacy_policy.scss +++ b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../mixins" as *; +@use "../variables" as *; + .privacy-policy { background: $ui-base-color; padding: 20px; @@ -169,14 +173,14 @@ code { font-size: 0.875em; - background: darken($ui-base-color, 8%); + background: color.adjust($ui-base-color, $lightness: -8%); border-radius: 4px; padding: 0.2em 0.3em; } hr { border: 0; - border-top: 1px solid lighten($ui-base-color, 4%); + border-top: 1px solid color.adjust($ui-base-color, $lightness: 4%); margin-top: 3em; margin-bottom: 3em; } diff --git a/app/javascript/flavours/glitch/styles/components/regeneration_indicator.scss b/app/javascript/flavours/glitch/styles/components/regeneration_indicator.scss index c65e6a9af..4a52900bd 100644 --- a/app/javascript/flavours/glitch/styles/components/regeneration_indicator.scss +++ b/app/javascript/flavours/glitch/styles/components/regeneration_indicator.scss @@ -1,3 +1,6 @@ +@use "../mixins" as *; +@use "../variables" as *; + .regeneration-indicator { text-align: center; font-size: 16px; diff --git a/app/javascript/flavours/glitch/styles/components/scrollbars.scss b/app/javascript/flavours/glitch/styles/components/scrollbars.scss index 1661e04ab..79e12a6df 100644 --- a/app/javascript/flavours/glitch/styles/components/scrollbars.scss +++ b/app/javascript/flavours/glitch/styles/components/scrollbars.scss @@ -1,6 +1,10 @@ +@use "sass:color"; +@use "../mixins" as *; +@use "../variables" as *; + /* Scrollbars */ html { - scrollbar-color: lighten($ui-base-color, 4%) + scrollbar-color: color.adjust($ui-base-color, $lightness: 4%) rgba($base-overlay-background, 0.1); } @@ -10,17 +14,17 @@ html { } ::-webkit-scrollbar-thumb { - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: 4%); border: 0 none $base-border-color; border-radius: 50px; } ::-webkit-scrollbar-thumb:hover { - background: lighten($ui-base-color, 6%); + background: color.adjust($ui-base-color, $lightness: 6%); } ::-webkit-scrollbar-thumb:active { - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: 4%); } ::-webkit-scrollbar-track { diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss index 39e202a78..8e30ec976 100644 --- a/app/javascript/flavours/glitch/styles/components/search.scss +++ b/app/javascript/flavours/glitch/styles/components/search.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../mixins" as *; +@use "../variables" as *; + .search { position: relative; } @@ -55,7 +59,7 @@ &:focus-visible, &:hover { - background: darken($ui-base-color, 10%); + background: color.adjust($ui-base-color, $lightness: -10%); } } @@ -168,7 +172,7 @@ color: $dark-text-color; font-weight: 500; font-size: 16px; - background: lighten($ui-base-color, 2%); + background: color.adjust($ui-base-color, $lightness: 2%); cursor: default; } @@ -181,8 +185,8 @@ .trends { &__header { color: $dark-text-color; - background: lighten($ui-base-color, 2%); - border-bottom: 1px solid darken($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: 2%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -4%); font-weight: 500; padding: 15px; font-size: 16px; @@ -198,7 +202,7 @@ display: flex; align-items: center; padding: 15px; - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%); gap: 15px; &:last-child { @@ -255,7 +259,7 @@ } path:last-child { - stroke: lighten($highlight-text-color, 6%) !important; + stroke: color.adjust($highlight-text-color, $lightness: 6%) !important; fill: none !important; } } @@ -279,31 +283,37 @@ } path:last-child { - stroke: lighten($gold-star, 6%) !important; + stroke: color.adjust($gold-star, $lightness: 6%) !important; } } } &--disabled { .trends__item__name { - color: lighten($ui-base-color, 12%); + color: color.adjust($ui-base-color, $lightness: 12%); a { - color: lighten($ui-base-color, 12%); + color: color.adjust($ui-base-color, $lightness: 12%); } } .trends__item__current { - color: lighten($ui-base-color, 12%); + color: color.adjust($ui-base-color, $lightness: 12%); } .trends__item__sparkline { path:first-child { - fill: rgba(lighten($ui-base-color, 12%), 0.25) !important; + fill: rgba( + color.adjust($ui-base-color, $lightness: 12%), + 0.25 + ) !important; } path:last-child { - stroke: lighten(lighten($ui-base-color, 12%), 6%) !important; + stroke: color.adjust( + color.adjust($ui-base-color, $lightness: 12%), + $lightness: 6% + ) !important; } } } diff --git a/app/javascript/flavours/glitch/styles/components/sensitive.scss b/app/javascript/flavours/glitch/styles/components/sensitive.scss index c77515eb7..a6305dc01 100644 --- a/app/javascript/flavours/glitch/styles/components/sensitive.scss +++ b/app/javascript/flavours/glitch/styles/components/sensitive.scss @@ -1,3 +1,5 @@ +@use "../variables" as *; + .sensitive-info { display: flex; flex-direction: row; diff --git a/app/javascript/flavours/glitch/styles/components/signed_out.scss b/app/javascript/flavours/glitch/styles/components/signed_out.scss index 18492983e..121366cd5 100644 --- a/app/javascript/flavours/glitch/styles/components/signed_out.scss +++ b/app/javascript/flavours/glitch/styles/components/signed_out.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../mixins" as *; +@use "../variables" as *; + .sign-in-banner { padding: 10px; @@ -14,7 +18,7 @@ text-decoration: underline; .fa { - color: lighten($dark-text-color, 7%); + color: color.adjust($dark-text-color, $lightness: 7%); } } } diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss index a5012f56c..8a8c63e2a 100644 --- a/app/javascript/flavours/glitch/styles/components/single_column.scss +++ b/app/javascript/flavours/glitch/styles/components/single_column.scss @@ -1,3 +1,8 @@ +@use "sass:color"; +@use "columns" as *; +@use "../mixins" as *; +@use "../variables" as *; + .compose-panel { width: 285px; margin-top: 10px; @@ -78,7 +83,7 @@ flex: 0 0 auto; border: 0; background: transparent; - border-top: 1px solid lighten($ui-base-color, 4%); + border-top: 1px solid color.adjust($ui-base-color, $lightness: 4%); margin: 10px 0; } @@ -260,7 +265,8 @@ .navigation-panel { margin: 0; background: $ui-base-color; - border-inline-start: 1px solid lighten($ui-base-color, 8%); + border-inline-start: 1px solid + color.adjust($ui-base-color, $lightness: 8%); height: 100vh; } @@ -278,7 +284,7 @@ .layout-single-column .ui__header { display: flex; background: $ui-base-color; - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%); } .layout-single-column { diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 1d2d130e2..08de2071a 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../mixins" as *; +@use "../variables" as *; + @keyframes spring-flip-in { 0% { transform: rotate(0deg); @@ -85,7 +89,7 @@ text-decoration: underline; .fa { - color: lighten($dark-text-color, 7%); + color: color.adjust($dark-text-color, $lightness: 7%); } } @@ -149,7 +153,7 @@ box-sizing: border-box; width: 100%; clear: both; - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%); } .notification-follow, @@ -157,7 +161,7 @@ position: relative; // same like Status - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%); .account { border-bottom: 0 none; @@ -167,7 +171,7 @@ .focusable { &:focus { outline: 0; - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: 4%); &.status.status-direct.muted { background: transparent; @@ -175,7 +179,7 @@ .detailed-status, .detailed-status__action-bar { - background: lighten($ui-base-color, 8%); + background: color.adjust($ui-base-color, $lightness: 8%); } } } @@ -187,7 +191,7 @@ padding: 15px; position: relative; height: auto; - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%); cursor: auto; @supports (-ms-overflow-style: -ms-autohiding-scrollbar) { @@ -215,9 +219,9 @@ } &.status-direct { - --color-status-bg: #{mix($ui-base-color, $ui-highlight-color, 95%)}; + --color-status-bg: #{color.mix($ui-base-color, $ui-highlight-color, 95%)}; - border-bottom-color: lighten($ui-base-color, 12%); + border-bottom-color: color.adjust($ui-base-color, $lightness: 12%); } &.light { @@ -249,7 +253,7 @@ background: $ui-primary-color; &:hover { - background: lighten($ui-primary-color, 8%); + background: color.adjust($ui-primary-color, $lightness: 8%); } } } @@ -308,15 +312,15 @@ &:focus > .status__content::after { background: linear-gradient( - rgba(lighten($ui-base-color, 4%), 0), - rgba(lighten($ui-base-color, 4%), 1) + rgba(color.adjust($ui-base-color, $lightness: 4%), 0), + rgba(color.adjust($ui-base-color, $lightness: 4%), 1) ); } &.status-direct > .status__content::after { background: linear-gradient( - rgba(mix($ui-base-color, $ui-highlight-color, 95%), 0), - rgba(mix($ui-base-color, $ui-highlight-color, 95%), 1) + rgba(color.mix($ui-base-color, $ui-highlight-color, 95%), 0), + rgba(color.mix($ui-base-color, $ui-highlight-color, 95%), 1) ); } @@ -339,7 +343,7 @@ background: transparent; .icon-button.disabled { - color: lighten($action-button-color, 13%); + color: color.adjust($action-button-color, $lightness: 13%); } } } @@ -380,7 +384,7 @@ padding: 0 10px; .detailed-status__display-name { - color: lighten($inverted-text-color, 16%); + color: color.adjust($inverted-text-color, $lightness: 16%); span { display: inline; @@ -446,9 +450,9 @@ } .detailed-status { - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: 4%); padding: 14px 10px; - border-top: 1px solid lighten($ui-base-color, 8%); + border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%); &--flex { display: flex; @@ -487,9 +491,9 @@ } .detailed-status__action-bar { - background: lighten($ui-base-color, 4%); - border-top: 1px solid lighten($ui-base-color, 8%); - border-bottom: 1px solid lighten($ui-base-color, 8%); + background: color.adjust($ui-base-color, $lightness: 4%); + border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%); display: flex; flex-direction: row; padding: 10px 0; @@ -606,7 +610,7 @@ a.status__display-name, &:hover, &:focus { - background: lighten($ui-base-color, 29%); + background: color.adjust($ui-base-color, $lightness: 29%); text-decoration: none; } } @@ -623,7 +627,7 @@ a.status__display-name, position: relative; display: flex; font-size: 14px; - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid color.adjust($ui-base-color, $lightness: 8%); border-radius: 4px; color: $dark-text-color; margin-top: 14px; @@ -685,7 +689,7 @@ a.status-card { cursor: pointer; &:hover { - background: lighten($ui-base-color, 8%); + background: color.adjust($ui-base-color, $lightness: 8%); } } @@ -746,7 +750,7 @@ a.status-card { .status-card__image { flex: 0 0 100px; - background: lighten($ui-base-color, 8%); + background: color.adjust($ui-base-color, $lightness: 8%); position: relative; & > .fa { @@ -777,7 +781,7 @@ a.status-card { } .status-card.compact { - border-color: lighten($ui-base-color, 4%); + border-color: color.adjust($ui-base-color, $lightness: 4%); &.interactive { border: 0; @@ -798,7 +802,7 @@ a.status-card { } a.status-card.compact:hover { - background-color: lighten($ui-base-color, 4%); + background-color: color.adjust($ui-base-color, $lightness: 4%); } .status-card__image-image { @@ -833,7 +837,7 @@ a.status-card.compact:hover { .attachment-list { display: flex; font-size: 14px; - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid color.adjust($ui-base-color, $lightness: 8%); border-radius: 4px; margin-top: 14px; overflow: hidden; @@ -843,7 +847,7 @@ a.status-card.compact:hover { color: $dark-text-color; padding: 8px 18px; cursor: default; - border-inline-end: 1px solid lighten($ui-base-color, 8%); + border-inline-end: 1px solid color.adjust($ui-base-color, $lightness: 8%); display: flex; flex-direction: column; align-items: center; @@ -896,7 +900,7 @@ a.status-card.compact:hover { .status__wrapper--filtered__button { display: inline; - color: lighten($ui-highlight-color, 8%); + color: color.adjust($ui-highlight-color, $lightness: 8%); border: 0; background: transparent; padding: 0; @@ -937,12 +941,12 @@ a.status-card.compact:hover { } &--first-in-thread { - border-top: 1px solid lighten($ui-base-color, 8%); + border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%); } &__line { height: 10px - 4px; - border-inline-start: 2px solid lighten($ui-base-color, 8%); + border-inline-start: 2px solid color.adjust($ui-base-color, $lightness: 8%); width: 0; position: absolute; top: 0; @@ -988,7 +992,7 @@ a.status-card.compact:hover { &__footer { border-radius: 0 0 4px 4px; - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: 4%); padding: 10px; padding-top: 12px; display: flex; @@ -997,7 +1001,7 @@ a.status-card.compact:hover { &__header { border-radius: 4px 4px 0 0; - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: 4%); padding: 10px; display: flex; justify-content: space-between; @@ -1037,7 +1041,7 @@ a.status-card.compact:hover { .picture-in-picture-placeholder { box-sizing: border-box; - border: 2px dashed lighten($ui-base-color, 8%); + border: 2px dashed color.adjust($ui-base-color, $lightness: 8%); background: $base-shadow-color; display: flex; flex-direction: column; @@ -1060,6 +1064,6 @@ a.status-card.compact:hover { &:hover, &:focus, &:active { - border-color: lighten($ui-base-color, 12%); + border-color: color.adjust($ui-base-color, $lightness: 12%); } } diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss index 4d3d4c546..32b286e17 100644 --- a/app/javascript/flavours/glitch/styles/containers.scss +++ b/app/javascript/flavours/glitch/styles/containers.scss @@ -1,3 +1,6 @@ +@use "mixins" as *; +@use "variables" as *; + .container-alt { width: 700px; margin: 0 auto; diff --git a/app/javascript/flavours/glitch/styles/contrast.scss b/app/javascript/flavours/glitch/styles/contrast.scss index 4fbc359bf..b4d66926a 100644 --- a/app/javascript/flavours/glitch/styles/contrast.scss +++ b/app/javascript/flavours/glitch/styles/contrast.scss @@ -1,3 +1,3 @@ -@import "contrast/variables"; -@import "index"; -@import "contrast/diff"; +@use "contrast/variables"; +@use "index"; +@use "contrast/diff"; diff --git a/app/javascript/flavours/glitch/styles/contrast/variables.scss b/app/javascript/flavours/glitch/styles/contrast/variables.scss index e38d24b27..db8663a81 100644 --- a/app/javascript/flavours/glitch/styles/contrast/variables.scss +++ b/app/javascript/flavours/glitch/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/flavours/glitch/styles/dashboard.scss b/app/javascript/flavours/glitch/styles/dashboard.scss index 552760b11..7eecc227b 100644 --- a/app/javascript/flavours/glitch/styles/dashboard.scss +++ b/app/javascript/flavours/glitch/styles/dashboard.scss @@ -1,4 +1,6 @@ @use "sass:color"; +@use "mixins" as *; +@use "variables" as *; .dashboard__counters { display: flex; diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index 109f9c1d1..933e7d572 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -1,4 +1,7 @@ @use "sass:color"; +@use "mixins" as *; +@use "variables" as *; + $no-columns-breakpoint: 600px; code { diff --git a/app/javascript/flavours/glitch/styles/gts.scss b/app/javascript/flavours/glitch/styles/gts.scss index de3ca59fc..c4329cc49 100644 --- a/app/javascript/flavours/glitch/styles/gts.scss +++ b/app/javascript/flavours/glitch/styles/gts.scss @@ -1,3 +1,5 @@ +@use "variables" as *; + /* 🦥 GoToSocial */ /* Variables */ diff --git a/app/javascript/flavours/glitch/styles/gts/_config.scss b/app/javascript/flavours/glitch/styles/gts/_config.scss index 0bb95ca80..eeeedb547 100644 --- a/app/javascript/flavours/glitch/styles/gts/_config.scss +++ b/app/javascript/flavours/glitch/styles/gts/_config.scss @@ -6,8 +6,8 @@ */ /* 🛠️ Config */ -@import "colors"; -@import "sizes"; +@use "colors"; +@use "sizes"; /* 🧩 Components */ -@import "status"; +@use "status"; diff --git a/app/javascript/flavours/glitch/styles/gts/status.scss b/app/javascript/flavours/glitch/styles/gts/status.scss index e0d92a7f6..cf2e08eaf 100644 --- a/app/javascript/flavours/glitch/styles/gts/status.scss +++ b/app/javascript/flavours/glitch/styles/gts/status.scss @@ -1,10 +1,10 @@ /* 🚥 Status */ -@import "status/status-account"; -@import "status/status-display-name"; -@import "status/status-icons"; -@import "status/status-info"; -@import "status/status-prepend"; -@import "status/status-spoiler"; +@use "status/status-account"; +@use "status/status-display-name"; +@use "status/status-icons"; +@use "status/status-info"; +@use "status/status-prepend"; +@use "status/status-spoiler"; .status { background-color: var(--color-status-bg); diff --git a/app/javascript/flavours/glitch/styles/index.scss b/app/javascript/flavours/glitch/styles/index.scss index f06ffdb14..0ee811c30 100644 --- a/app/javascript/flavours/glitch/styles/index.scss +++ b/app/javascript/flavours/glitch/styles/index.scss @@ -1,28 +1,28 @@ -@import "mixins"; -@import "variables"; -@import "styles/fonts/roboto"; -@import "styles/fonts/roboto-mono"; +@use "mixins"; +@use "variables"; +@use "styles/fonts/roboto"; +@use "styles/fonts/roboto-mono"; -@import "reset"; -@import "basics"; -@import "branding"; -@import "containers"; -@import "lists"; -@import "modal"; -@import "widgets"; -@import "forms"; -@import "accounts"; -@import "statuses"; -@import "components/index"; -@import "polls"; -@import "about"; -@import "tables"; -@import "admin"; -@import "accessibility"; -@import "rtl"; -@import "dashboard"; -@import "rich_text"; +@use "reset"; +@use "basics"; +@use "branding"; +@use "containers"; +@use "lists"; +@use "modal"; +@use "widgets"; +@use "forms"; +@use "accounts"; +@use "statuses"; +@use "components/index"; +@use "polls"; +@use "about"; +@use "tables"; +@use "admin"; +@use "accessibility"; +@use "rtl"; +@use "dashboard"; +@use "rich_text"; -@import "gts"; -@import "gts/config"; -@import "tangerine/config"; +@use "gts"; +@use "gts/config"; +@use "tangerine/config" as tangerine; diff --git a/app/javascript/flavours/glitch/styles/mastodon-light.scss b/app/javascript/flavours/glitch/styles/mastodon-light.scss index dff29d4a4..457e29dcb 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light.scss @@ -1,4 +1,4 @@ -@import "mastodon-light/variables"; -@import "index"; -@import "mastodon-light/diff"; -@import "mastodon-light/colors"; +@use "mastodon-light/variables"; +@use "index"; +@use "mastodon-light/diff"; +@use "mastodon-light/colors"; diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss index 0dc34bf4c..0ba93b6f9 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss @@ -1,3 +1,5 @@ +@use "sass:color"; + // Notes! // Sass color functions, "darken" and "lighten" are automatically replaced. @@ -26,23 +28,23 @@ html { .column-inline-form, .regeneration-indicator { background: $white; - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid color.adjust($ui-base-color, $lightness: 8%); border-top: 0; } .error-column { - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid color.adjust($ui-base-color, $lightness: 8%); } .column > .scrollable.about { - border-top: 1px solid lighten($ui-base-color, 8%); + border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%); } .about__meta, .about__section__title, .interaction-modal { background: $white; - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid color.adjust($ui-base-color, $lightness: 8%); } .rules-list li::before { @@ -50,12 +52,12 @@ html { } .directory__card__img { - background: lighten($ui-base-color, 12%); + background: color.adjust($ui-base-color, $lightness: 12%); } .filter-form { background: $white; - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%); } .column-back-button, @@ -103,7 +105,7 @@ html { .confirmation-modal__cancel-button, .mute-modal__cancel-button, .block-modal__cancel-button { - color: lighten($ui-base-color, 26%); + color: color.adjust($ui-base-color, $lightness: 26%); &:hover, &:focus, @@ -113,15 +115,15 @@ html { } .column-subheading { - background: darken($ui-base-color, 4%); - border-bottom: 1px solid lighten($ui-base-color, 8%); + background: color.adjust($ui-base-color, $lightness: -4%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%); } .getting-started, .scrollable { .column-link { background: $white; - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%); &:hover, &:active, @@ -132,8 +134,8 @@ html { } .getting-started .navigation-bar { - border-top: 1px solid lighten($ui-base-color, 8%); - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%); + border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%); @media screen and (max-width: $no-gap-breakpoint) { border-top: 0; @@ -148,7 +150,7 @@ html { .setting-text, .report-dialog-modal__textarea, .audio-player { - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid color.adjust($ui-base-color, $lightness: 8%); } .report-dialog-modal .dialog-option .poll__input { @@ -169,18 +171,18 @@ html { .compose-form__poll-wrapper select { background: $simple-background-color - url("data:image/svg+xml;utf8,") + url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; } .compose-form__poll-wrapper, .compose-form__poll-wrapper .poll__footer { - border-top-color: lighten($ui-base-color, 8%); + border-top-color: color.adjust($ui-base-color, $lightness: 8%); } .compose-form .compose-form__buttons-wrapper { background: $ui-base-color; - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid color.adjust($ui-base-color, $lightness: 8%); border-top: 0; } @@ -195,7 +197,7 @@ html { .compose-form__modifiers { .compose-form__upload__actions .icon-button, .compose-form__upload__warning .icon-button { - color: lighten($white, 7%); + color: color.adjust($white, $lightness: 7%); &:active, &:focus, @@ -206,11 +208,11 @@ html { } .compose-form__buttons-wrapper { - background: darken($ui-base-color, 6%); + background: color.adjust($ui-base-color, $lightness: -6%); } .autosuggest-textarea__suggestions { - background: darken($ui-base-color, 6%); + background: color.adjust($ui-base-color, $lightness: -6%); } .autosuggest-textarea__suggestions__item { @@ -218,16 +220,16 @@ html { &:focus, &:active, &.selected { - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: 4%); } } } .emoji-mart-bar { - border-color: lighten($ui-base-color, 4%); + border-color: color.adjust($ui-base-color, $lightness: 4%); &:first-child { - background: darken($ui-base-color, 6%); + background: color.adjust($ui-base-color, $lightness: -6%); } } @@ -242,7 +244,7 @@ html { // Change the background colors of statuses .focusable:focus { - background: lighten($white, 4%); + background: color.adjust($white, $lightness: 4%); } .detailed-status, @@ -257,7 +259,7 @@ html { &:hover, &:focus { - background: lighten($ui-base-color, 4%); + background: color.adjust($ui-base-color, $lightness: 4%); } } @@ -320,12 +322,12 @@ html { .language-dropdown__dropdown__results__item .language-dropdown__dropdown__results__item__common-name { - color: lighten($ui-base-color, 8%); + color: color.adjust($ui-base-color, $lightness: 8%); } .language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__common-name { - color: darken($ui-base-color, 12%); + color: color.adjust($ui-base-color, $lightness: -12%); } .dropdown-menu__separator, @@ -333,11 +335,11 @@ html { .dropdown-menu__container__header, .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, $lightness: 4%); } .report-dialog-modal__container { - border-top-color: lighten($ui-base-color, 4%); + border-top-color: color.adjust($ui-base-color, $lightness: 4%); } // Change the background colors of modals @@ -359,7 +361,7 @@ html { .picture-in-picture__footer, .reactions-bar__item { background: $white; - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid color.adjust($ui-base-color, $lightness: 8%); } .reactions-bar__item:hover, @@ -372,8 +374,12 @@ html { } .reactions-bar__item.active { - background-color: mix($white, $ui-highlight-color, 80%); - border-color: mix(lighten($ui-base-color, 8%), $ui-highlight-color, 80%); + background-color: color.mix($white, $ui-highlight-color, 80%); + border-color: color.mix( + color.adjust($ui-base-color, $lightness: 8%), + $ui-highlight-color, + 80% + ); } .media-modal__overlay .picture-in-picture__footer { @@ -395,16 +401,16 @@ html { } .report-modal__comment { - border-right-color: lighten($ui-base-color, 8%); + border-right-color: color.adjust($ui-base-color, $lightness: 8%); } .report-modal__container { - border-top-color: lighten($ui-base-color, 8%); + border-top-color: color.adjust($ui-base-color, $lightness: 8%); } .column-header__collapsible-inner { - background: darken($ui-base-color, 4%); - border: 1px solid lighten($ui-base-color, 8%); + background: color.adjust($ui-base-color, $lightness: -4%); + border: 1px solid color.adjust($ui-base-color, $lightness: 8%); border-top: 0; } @@ -419,7 +425,7 @@ html { } .flash-message.warning { - color: lighten($gold-star, 16%); + color: color.adjust($gold-star, $lightness: 16%); } .boost-modal__action-bar, @@ -428,14 +434,14 @@ html { .block-modal__action-bar, .onboarding-modal__paginator, .error-modal__footer { - background: darken($ui-base-color, 6%); + background: color.adjust($ui-base-color, $lightness: -6%); .onboarding-modal__nav, .error-modal__nav { &:hover, &:focus, &:active { - background-color: darken($ui-base-color, 12%); + background-color: color.adjust($ui-base-color, $lightness: -12%); } } } @@ -446,10 +452,10 @@ html { .embed-modal .embed-modal__container .embed-modal__html { background: $white; - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid color.adjust($ui-base-color, $lightness: 8%); &:focus { - border-color: lighten($ui-base-color, 12%); + border-color: color.adjust($ui-base-color, $lightness: 12%); background: $white; } } @@ -459,12 +465,12 @@ html { } .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { - background: darken($ui-secondary-color, 10%); + background: color.adjust($ui-secondary-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 @@ -477,7 +483,7 @@ html { // 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, @@ -485,7 +491,7 @@ html { .directory__tag > a, .directory__tag > div { background: $white; - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid color.adjust($ui-base-color, $lightness: 8%); @media screen and (max-width: $no-gap-breakpoint) { border-left: 0; @@ -501,15 +507,15 @@ html { input[type="password"], textarea { &:hover { - border-color: lighten($ui-base-color, 12%); + border-color: color.adjust($ui-base-color, $lightness: 12%); } } } .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 { @@ -528,12 +534,12 @@ html { &__toolbar, &__row, .nothing-here { - border-color: lighten($ui-base-color, 8%); + border-color: color.adjust($ui-base-color, $lightness: 8%); } } .activity-stream { - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid color.adjust($ui-base-color, $lightness: 8%); &--under-tabs { border-top: 0; @@ -545,7 +551,7 @@ html { .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%); } } @@ -612,7 +618,7 @@ html { .reply-indicator { background: transparent; - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid color.adjust($ui-base-color, $lightness: 8%); } .status__content, @@ -636,9 +642,9 @@ html { } .mute-modal select { - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid color.adjust($ui-base-color, $lightness: 8%); background: $simple-background-color - url("data:image/svg+xml;utf8,") + url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; } @@ -650,15 +656,15 @@ html { &:not([disabled]) { &:hover, &:focus { - background: darken($ui-secondary-color, 10%); + background: color.adjust($ui-secondary-color, $lightness: -10%); } &.active { - background-color: darken($ui-highlight-color, 2%); + background-color: color.adjust($ui-highlight-color, $lightness: -2%); &:hover, &:focus { - background: lighten($ui-highlight-color, 10%); + background: color.adjust($ui-highlight-color, $lightness: 10%); } } } @@ -666,16 +672,16 @@ html { .glitch.local-settings { background: $ui-base-color; - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid color.adjust($ui-base-color, $lightness: 8%); } .glitch.local-settings__navigation { - background: darken($ui-base-color, 8%); + background: color.adjust($ui-base-color, $lightness: -8%); } .glitch.local-settings__navigation__item { - background: darken($ui-base-color, 8%); - border-bottom: 1px lighten($ui-base-color, 8%) solid; + background: color.adjust($ui-base-color, $lightness: -8%); + border-bottom: 1px color.adjust($ui-base-color, $lightness: 8%) solid; &:hover { background: $ui-base-color; @@ -705,8 +711,8 @@ html { .status.collapsed .status__content::after { background: linear-gradient( - rgba(darken($ui-base-color, 13%), 0), - rgba(darken($ui-base-color, 13%), 1) + rgba(color.adjust($ui-base-color, $lightness: -13%), 0), + rgba(color.adjust($ui-base-color, $lightness: -13%), 1) ); } diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss index bed4e20c2..ad33d2e8f 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss @@ -1,3 +1,5 @@ +@use "sass:color"; + // Dependent colors $black: #000000; $white: #ffffff; @@ -14,7 +16,7 @@ $grey-600: #4e4c5a; // Trout $grey-100: #dadaf3; // Topaz // Differences -$success-green: lighten(#3c754d, 8%); +$success-green: color.adjust(#3c754d, $lightness: 8%); $base-overlay-background: $white !default; $valid-value-color: $success-green !default; @@ -34,7 +36,10 @@ $ui-button-tertiary-border-color: $blurple-500 !default; $primary-text-color: $black !default; $darker-text-color: $classic-base-color !default; -$highlight-text-color: darken($ui-highlight-color, 8%) !default; +$highlight-text-color: color.adjust( + $ui-highlight-color, + $lightness: -8% +) !default; $dark-text-color: #444b5d; $action-button-color: #606984; @@ -47,11 +52,19 @@ $account-background-color: $white !default; // Invert darkened and lightened colors @function darken($color, $amount) { - @return hsl(hue($color), saturation($color), lightness($color) + $amount); + @return hsl( + color.hue($color), + color.saturation($color), + color.lightness($color) + $amount + ); } @function lighten($color, $amount) { - @return hsl(hue($color), saturation($color), lightness($color) - $amount); + @return hsl( + color.hue($color), + color.saturation($color), + color.lightness($color) - $amount + ); } $emojis-requiring-inversion: "chains"; diff --git a/app/javascript/flavours/glitch/styles/modal.scss b/app/javascript/flavours/glitch/styles/modal.scss index 0b7220b21..a803c1ae7 100644 --- a/app/javascript/flavours/glitch/styles/modal.scss +++ b/app/javascript/flavours/glitch/styles/modal.scss @@ -1,3 +1,6 @@ +@use "mixins" as *; +@use "variables" as *; + .modal-layout { background: $ui-base-color url('data:image/svg+xml;utf8,') diff --git a/app/javascript/flavours/glitch/styles/polls.scss b/app/javascript/flavours/glitch/styles/polls.scss index 37dc357a0..889b6801b 100644 --- a/app/javascript/flavours/glitch/styles/polls.scss +++ b/app/javascript/flavours/glitch/styles/polls.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "mixins" as *; +@use "variables" as *; + .poll { margin-top: 16px; font-size: 14px; @@ -16,7 +20,7 @@ &__chart { border-radius: 4px; display: block; - background: darken($ui-primary-color, 5%); + background: color.adjust($ui-primary-color, $lightness: -5%); height: 5px; min-width: 1%; @@ -47,17 +51,17 @@ // duplication &::-moz-progress-bar { border-radius: 4px; - background: darken($ui-primary-color, 5%); + background: color.adjust($ui-primary-color, $lightness: -5%); } &::-ms-fill { border-radius: 4px; - background: darken($ui-primary-color, 5%); + background: color.adjust($ui-primary-color, $lightness: -5%); } &::-webkit-progress-value { border-radius: 4px; - background: darken($ui-primary-color, 5%); + background: color.adjust($ui-primary-color, $lightness: -5%); } } @@ -94,7 +98,7 @@ outline: 0; font-family: inherit; background: $simple-background-color; - border: 1px solid darken($simple-background-color, 14%); + border: 1px solid color.adjust($simple-background-color, $lightness: -14%); border-radius: 4px; padding: 6px 10px; @@ -136,7 +140,7 @@ &:active, &:focus, &:hover { - border-color: lighten($valid-value-color, 15%); + border-color: color.adjust($valid-value-color, $lightness: 15%); border-width: 4px; } @@ -224,7 +228,7 @@ } .compose-form__poll-wrapper { - border-top: 1px solid darken($simple-background-color, 8%); + border-top: 1px solid color.adjust($simple-background-color, $lightness: -8%); overflow-x: hidden; ul { @@ -240,7 +244,8 @@ } .poll__footer { - border-top: 1px solid darken($simple-background-color, 8%); + border-top: 1px solid + color.adjust($simple-background-color, $lightness: -8%); padding: 10px; display: flex; align-items: center; @@ -296,9 +301,9 @@ outline: 0; font-family: inherit; background: $simple-background-color - url("data:image/svg+xml;utf8,") + url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; - border: 1px solid darken($simple-background-color, 14%); + border: 1px solid color.adjust($simple-background-color, $lightness: -14%); border-radius: 4px; padding: 6px 10px; padding-inline-end: 30px; @@ -309,7 +314,7 @@ color: $dark-text-color; &__chart { - background: rgba(darken($ui-primary-color, 14%), 0.7); + background: rgba(color.adjust($ui-primary-color, $lightness: -14%), 0.7); &.leading { background: rgba($ui-highlight-color, 0.5); diff --git a/app/javascript/flavours/glitch/styles/rich_text.scss b/app/javascript/flavours/glitch/styles/rich_text.scss index 6224302ee..c3f9e2523 100644 --- a/app/javascript/flavours/glitch/styles/rich_text.scss +++ b/app/javascript/flavours/glitch/styles/rich_text.scss @@ -1,3 +1,6 @@ +@use "mixins" as *; +@use "variables" as *; + .status__content__text, .e-content, .reply-indicator__content { diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss index a9044fdbf..a0ddcb24d 100644 --- a/app/javascript/flavours/glitch/styles/rtl.scss +++ b/app/javascript/flavours/glitch/styles/rtl.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "mixins" as *; +@use "variables" as *; + body.rtl { direction: rtl; @@ -94,15 +98,15 @@ body.rtl { &::after { background-image: linear-gradient( to left, - rgba(darken($ui-base-color, 10%), 0), - darken($ui-base-color, 10%) + rgba(color.adjust($ui-base-color, $lightness: -10%), 0), + color.adjust($ui-base-color, $lightness: -10%) ); } } .simple_form 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 left 8px center / auto 16px; } diff --git a/app/javascript/flavours/glitch/styles/statuses.scss b/app/javascript/flavours/glitch/styles/statuses.scss index 76606e7e7..7a789d2a4 100644 --- a/app/javascript/flavours/glitch/styles/statuses.scss +++ b/app/javascript/flavours/glitch/styles/statuses.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "mixins" as *; +@use "variables" as *; + .activity-stream { box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); border-radius: 4px; @@ -69,7 +73,7 @@ } &--highlighted .entry { - background: lighten($ui-base-color, 8%); + background: color.adjust($ui-base-color, $lightness: 8%); } } diff --git a/app/javascript/flavours/glitch/styles/tables.scss b/app/javascript/flavours/glitch/styles/tables.scss index bb3021265..adb03393f 100644 --- a/app/javascript/flavours/glitch/styles/tables.scss +++ b/app/javascript/flavours/glitch/styles/tables.scss @@ -1,4 +1,6 @@ @use "sass:color"; +@use "mixins" as *; +@use "variables" as *; .table { width: 100%; diff --git a/app/javascript/flavours/glitch/styles/tangerine/_config.scss b/app/javascript/flavours/glitch/styles/tangerine/_config.scss index 16ba9d8ad..34d02013a 100644 --- a/app/javascript/flavours/glitch/styles/tangerine/_config.scss +++ b/app/javascript/flavours/glitch/styles/tangerine/_config.scss @@ -4,7 +4,7 @@ */ /* 🛠️ Config */ -@import "keyframes"; +@use "keyframes"; /* 🧩 Components */ -@import "status-bar"; +@use "status-bar"; diff --git a/app/javascript/flavours/glitch/styles/widgets.scss b/app/javascript/flavours/glitch/styles/widgets.scss index 1f2e3d17c..347b38004 100644 --- a/app/javascript/flavours/glitch/styles/widgets.scss +++ b/app/javascript/flavours/glitch/styles/widgets.scss @@ -1,5 +1,7 @@ @use "sass:color"; @use "sass:math"; +@use "mixins" as *; +@use "variables" as *; .hero-widget { margin-bottom: 10px; diff --git a/app/javascript/skins/glitch/contrast/common.scss b/app/javascript/skins/glitch/contrast/common.scss index f5a34165f..106a05158 100644 --- a/app/javascript/skins/glitch/contrast/common.scss +++ b/app/javascript/skins/glitch/contrast/common.scss @@ -1 +1 @@ -@import "flavours/glitch/styles/contrast"; +// @import "flavours/glitch/styles/contrast"; diff --git a/app/javascript/skins/glitch/mastodon-light/common.scss b/app/javascript/skins/glitch/mastodon-light/common.scss index 7d7c68318..8e2b40d31 100644 --- a/app/javascript/skins/glitch/mastodon-light/common.scss +++ b/app/javascript/skins/glitch/mastodon-light/common.scss @@ -1 +1 @@ -@import "flavours/glitch/styles/mastodon-light"; +// @import "flavours/glitch/styles/mastodon-light";