search

mastodon / mastodon

Your self-hosted, globally interconnected microblogging community
https://joinmastodon.org
GNU Affero General Public License v3.0
47.2k stars 7k forks source link

Fix Sass Deprecation warnings #32608

Open ThisIsMissEm opened 1 month ago

ThisIsMissEm commented 1 month ago

Steps to reproduce the problem

Currently when compiling assets via webpack, we have a number of Sass Deprecation warnings. It'd be good to fix these, and they look mostly find the source of the warning and replace it with the newer syntax:

The current warnings on main @ 1fc165de02 are as follows:

Deprecation Warning: lighten() is deprecated. Suggestions:

color.scale($color, $lightness: 66.6666666667%)
color.adjust($color, $lightness: 20%)

More info: https://sass-lang.com/d/color-functions

   ╷
14 │ $darker-text-color: lighten($ui-primary-color, 20%) !default;
   │                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    app/javascript/styles/contrast/variables.scss 14:21  @import
    app/javascript/styles/contrast.scss 1:9              root stylesheet

Deprecation Warning: lighten() is deprecated. Suggestions:

color.scale($color, $lightness: 40%)
color.adjust($color, $lightness: 12%)

More info: https://sass-lang.com/d/color-functions

   ╷
15 │ $dark-text-color: lighten($ui-primary-color, 12%) !default;
   │                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    app/javascript/styles/contrast/variables.scss 15:19  @import
    app/javascript/styles/contrast.scss 1:9              root stylesheet

Deprecation Warning: lighten() is deprecated. Suggestions:

color.scale($color, $lightness: 50%)
color.adjust($color, $lightness: 6%)

More info: https://sass-lang.com/d/color-functions

   ╷
16 │ $secondary-text-color: lighten($ui-secondary-color, 6%) !default;
   │                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    app/javascript/styles/contrast/variables.scss 16:24  @import
    app/javascript/styles/contrast.scss 1:9              root stylesheet

Deprecation Warning: lighten() is deprecated. Suggestions:

color.scale($color, $lightness: 32.2580645161%)
color.adjust($color, $lightness: 10%)

More info: https://sass-lang.com/d/color-functions

   ╷
17 │ $highlight-text-color: lighten($ui-highlight-color, 10%) !default;
   │                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    app/javascript/styles/contrast/variables.scss 17:24  @import
    app/javascript/styles/contrast.scss 1:9              root stylesheet

Deprecation Warning: lighten() is deprecated. Suggestions:

color.scale($color, $lightness: 61.7283950617%)
color.adjust($color, $lightness: 50%)

More info: https://sass-lang.com/d/color-functions

   ╷
18 │ $action-button-color: lighten($ui-base-color, 50%);
   │                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    app/javascript/styles/contrast/variables.scss 18:23  @import
    app/javascript/styles/contrast.scss 1:9              root stylesheet

Deprecation Warning: lighten() is deprecated. Suggestions:

color.scale($color, $lightness: 12.3076923077%)
color.adjust($color, $lightness: 8%)

More info: https://sass-lang.com/d/color-functions

   ╷
19 │ $success-green: lighten(hsl(138deg, 32%, 35%), 8%);
   │                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    app/javascript/styles/mastodon-light/variables.scss 19:17  @import
    app/javascript/styles/mastodon-light.scss 1:9              root stylesheet

Deprecation Warning: lighten() is deprecated. Suggestions:

color.scale($color, $lightness: 32.0987654321%)
color.adjust($color, $lightness: 26%)

More info: https://sass-lang.com/d/color-functions

   ╷
36 │   $ui-base-lighter-color: lighten(
   │ ┌─────────────────────────^
37 │ │   $ui-base-color,
38 │ │   26%
39 │ │ ) !default; // Lighter darkest
   │ └─^
   ╵
    app/javascript/styles/mastodon/variables.scss 36:25  @import
    app/javascript/styles/application.scss 2:9           root stylesheet

Deprecation Warning: lighten() is deprecated. Suggestions:

color.scale($color, $lightness: 26.1538461538%)
color.adjust($color, $lightness: 8%)

More info: https://sass-lang.com/d/color-functions

   ╷
70 │ $highlight-text-color: lighten($ui-highlight-color, 8%) !default;
   │                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    app/javascript/styles/mastodon/variables.scss 70:24  @import
    app/javascript/styles/application.scss 2:9           root stylesheet

Deprecation Warning: lighten() is deprecated. Suggestions:

color.scale($color, $lightness: 7.2727272727%)
color.adjust($color, $lightness: 4%)

More info: https://sass-lang.com/d/color-functions

   ╷
72 │ $action-button-focus-color: lighten($ui-base-lighter-color, 4%) !default;
   │                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    app/javascript/styles/mastodon/variables.scss 72:29  @import
    app/javascript/styles/application.scss 2:9           root stylesheet

Deprecation Warning: transparentize() is deprecated. Suggestions:

color.scale($color, $alpha: -65%)
color.adjust($color, $alpha: -0.65)

More info: https://sass-lang.com/d/color-functions

   ╷
78 │   --on-surface-color: #{transparentize($ui-base-color, 0.65)};
   │                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    app/javascript/styles/mastodon-light/variables.scss 78:25  @import
    app/javascript/styles/mastodon-light.scss 1:9              root stylesheet

Deprecation Warning: lighten() is deprecated. Suggestions:

color.scale($color, $lightness: 4.9382716049%)
color.adjust($color, $lightness: 4%)

More info: https://sass-lang.com/d/color-functions

   ╷
98 │   --dropdown-border-color: #{lighten($ui-base-color, 4%)};
   │                              ^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    app/javascript/styles/mastodon/variables.scss 98:30  @import
    app/javascript/styles/application.scss 2:9           root stylesheet

Deprecation Warning: darken() is deprecated. Suggestions:

color.scale($color, $lightness: -42.1052631579%)
color.adjust($color, $lightness: -8%)

More info: https://sass-lang.com/d/color-functions

   ╷
99 │   --dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)};
   │                                       ^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    app/javascript/styles/mastodon/variables.scss 99:39  @import
    app/javascript/styles/application.scss 2:9           root stylesheet

Deprecation Warning: hue() is deprecated. Suggestion:

color.channel($color, "hue", $space: hsl)

More info: https://sass-lang.com/d/color-functions

   ╷
61 │     hue($color),
   │     ^^^^^^^^^^^
   ╵
    app/javascript/styles/mastodon-light/variables.scss 61:5  lighten()
    app/javascript/styles/mastodon/variables.scss 72:29       @import
    app/javascript/styles/application.scss 2:9                @import
    app/javascript/styles/mastodon-light.scss 2:9             root stylesheet

Deprecation Warning: hue() is deprecated. Suggestion:

color.channel($color, "hue", $space: hsl)

More info: https://sass-lang.com/d/color-functions

   ╷
53 │     hue($color),
   │     ^^^^^^^^^^^
   ╵
    app/javascript/styles/mastodon-light/variables.scss 53:5  darken()
    app/javascript/styles/mastodon/variables.scss 99:39       @import
    app/javascript/styles/application.scss 2:9                @import
    app/javascript/styles/mastodon-light.scss 2:9             root stylesheet

Deprecation Warning: transparentize() is deprecated. Suggestions:

color.scale($color, $alpha: -50%)
color.adjust($color, $alpha: -0.5)

More info: https://sass-lang.com/d/color-functions

    ╷
112 │   --on-surface-color: #{transparentize($ui-base-color, 0.5)};
    │                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    app/javascript/styles/mastodon/variables.scss 112:25  @import
    app/javascript/styles/application.scss 2:9            @import
    app/javascript/styles/mastodon-light.scss 2:9         root stylesheet

Warning: 158 repetitive deprecation warnings omitted.

Warning: 164 repetitive deprecation warnings omitted.

Expected behaviour

No deprecation warnings should be output, besides the legacy-js-api ones

Actual behaviour

Deprecation warnings are output

Detailed description

No response

Mastodon instance

n/a

Mastodon version

v4.3.0 / main

Browser name and version

n/a

Operating system

n/a

Technical details

No response

renchap commented 1 month ago

There are probably a lot more of those coming with the bump to the latest SASS Dart version, which we did not merge yet.

ThisIsMissEm commented 1 month ago

I've started to address them in #32611, however, as it notes, there's issues with form fields and their styling in mastodon-light, because mastodon-light overrode what lighten() and darken() actually did.