comunes/todos-contra-el-fuego-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

scss: migrate @import -> @use, lighten/darken -> color.adjust (dart-sass)

Browse source 
Silences the dart-sass deprecation warnings that flooded every build:
- All @import of local partials (colors, mixins, and the CSS-emitting
  partials) -> @use '...' as * (partials are pure defs, so 'as *' keeps the
  global names and the ~25 call sites unchanged). Added explicit @use './colors'
  to bootstrap-overrides.scss and cookies-eu.scss, which used -palette*
  transitively (broke under @use's scoping).
- lighten(c, x%) -> color.adjust(c, $lightness: x%) and darken -> negative,
  with @use 'sass:color' in the 6 affected files.
Compiles clean (byte-for-byte CSS behavior preserved).
This commit is contained in:
vjrj 2026-07-17 18:18:04 +02:00
parent 62ac2fbd9c
commit c6c22643c1
26 changed files with 60 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

2
imports/ui/components/AccountPageFooter/AccountPageFooter.scss
View file

@ -1,4 +1,4 @@
@import '../../stylesheets/colors'; @use '../../stylesheets/colors' as *;
.AccountPageFooter { .AccountPageFooter {
margin: 25px 0 0; margin: 25px 0 0;

2
imports/ui/components/Content/Content.scss
View file

@ -1,4 +1,4 @@
@import '../../stylesheets/mixins'; @use '../../stylesheets/mixins' as *;
.Content { .Content {
max-width: 700px; max-width: 700px;

2
imports/ui/components/DistanceSlider/DistanceSlider.scss
View file

@ -1,4 +1,4 @@
@import '../../stylesheets/mixins'; @use '../../stylesheets/mixins' as *;
.dist-slider { .dist-slider {
width: 400px; width: 400px;

2
imports/ui/components/Feedback/Feedback.scss
View file

@ -1,5 +1,5 @@
/* From: https://github.com/spektom/bootstrap-feedback-form */ /* From: https://github.com/spektom/bootstrap-feedback-form */
@import '../../stylesheets/mixins'; @use '../../stylesheets/mixins' as *;
#feedback { #feedback {
position: fixed; position: fixed;

4
imports/ui/components/Footer/Footer.scss
View file

@ -1,5 +1,5 @@
@import '../../stylesheets/mixins'; @use '../../stylesheets/mixins' as *;
@import '../../stylesheets/colors'; @use '../../stylesheets/colors' as *;
html { html {
position: relative; position: relative;

2
imports/ui/components/InputHint/InputHint.scss
View file

@ -1,4 +1,4 @@
@import '../../stylesheets/colors'; @use '../../stylesheets/colors' as *;
.InputHint { .InputHint {
display: block; display: block;

2
imports/ui/components/Navigation/Navigation.scss
View file

@ -1,4 +1,4 @@
@import '../../stylesheets/mixins'; @use '../../stylesheets/mixins' as *;
.navbar { .navbar {
border-radius: 0; border-radius: 0;

9
imports/ui/components/OAuthLoginButton/OAuthLoginButton.scss
View file

@ -1,4 +1,5 @@
@import '../../stylesheets/colors'; @use 'sass:color';
@use '../../stylesheets/colors' as *;
.OAuthLoginButton { .OAuthLoginButton {
/* display: block; /* display: block;
@ -19,21 +20,21 @@
background: $facebook; background: $facebook;
color: #fff; color: #fff;
&:hover { background: darken($facebook, 5%); } &:hover { background: color.adjust($facebook, $lightness: -5%); }
} }
&.OAuthLoginButton-google { &.OAuthLoginButton-google {
background: $google; background: $google;
color: #fff; color: #fff;
&:hover { background: darken($google, 5%); } &:hover { background: color.adjust($google, $lightness: -5%); }
} }
&.OAuthLoginButton-github { &.OAuthLoginButton-github {
background: $github; background: $github;
color: #fff; color: #fff;
&:hover { background: darken($github, 5%); } &:hover { background: color.adjust($github, $lightness: -5%); }
} }
&:active { &:active {

5
imports/ui/components/OAuthLoginButtons/OAuthLoginButtons.scss
View file

@ -1,4 +1,5 @@
@import '../../stylesheets/colors'; @use 'sass:color';
@use '../../stylesheets/colors' as *;
.OAuthLoginButtons { .OAuthLoginButtons {
margin-bottom: 25px; margin-bottom: 25px;
@ -11,7 +12,7 @@
.EmailMessage { .EmailMessage {
display: inline-block; display: inline-block;
background: #fff; /* default */ background: #fff; /* default */
background: lighten($todos-palette5, 70%); background: color.adjust($todos-palette5, $lightness: 70%);
padding: 0 10px; padding: 0 10px;
position: absolute; position: absolute;
bottom: -27px; bottom: -27px;

4
imports/ui/components/PageHeader/PageHeader.scss
View file

@ -1,5 +1,5 @@
@import '../../stylesheets/mixins'; @use '../../stylesheets/mixins' as *;
@import '../../stylesheets/colors'; @use '../../stylesheets/colors' as *;
.PageHeader { .PageHeader {
border-bottom: 1px solid $gray-lighter; border-bottom: 1px solid $gray-lighter;

2
imports/ui/components/SelectionMap/SelectionMap.scss
View file

@ -1,4 +1,4 @@
@import '../../stylesheets/mixins'; @use '../../stylesheets/mixins' as *;
.selectionmap-leaflet-container { .selectionmap-leaflet-container {
height: 100%; height: 100%;

2
imports/ui/layouts/App/App.scss
View file

@ -1,4 +1,4 @@
@import '../../stylesheets/colors'; @use '../../stylesheets/colors' as *;
.App > .container { .App > .container {
margin-bottom: 20px; margin-bottom: 20px;

4
imports/ui/pages/Fires/Fires.scss
View file

@ -1,5 +1,5 @@
@import '../../stylesheets/colors'; @use '../../stylesheets/colors' as *;
@import '../../stylesheets/mixins'; @use '../../stylesheets/mixins' as *;
.fire-leaflet-container { .fire-leaflet-container {
min-height: 40vh; min-height: 40vh;

4
imports/ui/pages/FiresMap/FiresMap.scss
View file

@ -1,5 +1,5 @@
@import '../../stylesheets/mixins'; @use '../../stylesheets/mixins' as *;
@import '../../stylesheets/colors'; @use '../../stylesheets/colors' as *;
/* https://github.com/PaulLeCam/react-leaflet/issues/108 */ /* https://github.com/PaulLeCam/react-leaflet/issues/108 */

4
imports/ui/pages/Index/Index-custom.scss
View file

@ -1,5 +1,5 @@
@import '../../stylesheets/mixins'; @use '../../stylesheets/mixins' as *;
@import '../../stylesheets/colors'; @use '../../stylesheets/colors' as *;
.full-width { .full-width {
position: relative; position: relative;

15
imports/ui/pages/Index/Index.scss
View file

@ -1,9 +1,10 @@
@import '../../stylesheets/mixins'; @use 'sass:color';
@import '../../stylesheets/colors'; @use '../../stylesheets/mixins' as *;
@use '../../stylesheets/colors' as *;
.Index { .Index {
padding: 20px; padding: 20px;
background: lighten($todos-back1, 75%); background: color.adjust($todos-back1, $lightness: 75%);
text-align: center; text-align: center;
border-radius: 3px; border-radius: 3px;
color: $todos-font1; color: $todos-font1;
@ -23,7 +24,7 @@
p { p {
font-size: 18px; font-size: 18px;
color: lighten($cb-blue, 25%); color: color.adjust($cb-blue, $lightness: 25%);
} }
> div { > div {
@ -41,18 +42,18 @@
footer { footer {
margin: 20px -20px -20px; margin: 20px -20px -20px;
border-top: 1px solid darken($cb-blue, 10%); border-top: 1px solid color.adjust($cb-blue, $lightness: -10%);
padding: 20px; padding: 20px;
p { p {
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
color: lighten($cb-blue, 35%); color: color.adjust($cb-blue, $lightness: 35%);
margin: 0; margin: 0;
} }
p a { p a {
color: lighten($cb-blue, 35%); color: color.adjust($cb-blue, $lightness: 35%);
text-decoration: underline; text-decoration: underline;
} }
} }

7
imports/ui/pages/Logout/Logout.scss
View file

@ -1,5 +1,6 @@
@import '../../stylesheets/mixins'; @use 'sass:color';
@import '../../stylesheets/colors'; @use '../../stylesheets/mixins' as *;
@use '../../stylesheets/colors' as *;
.Logout { .Logout {
margin: 20px; margin: 20px;
@ -19,7 +20,7 @@
p { p {
font-size: 18px; font-size: 18px;
color: lighten($todos-palette3, 25%); color: color.adjust($todos-palette3, $lightness: 25%);
} }
ul { ul {

2
imports/ui/pages/Page/Page.scss
View file

@ -1,4 +1,4 @@
@import '../../stylesheets/mixins'; @use '../../stylesheets/mixins' as *;
.Page { .Page {
margin-bottom: 0px; margin-bottom: 0px;

2
imports/ui/pages/Profile/Profile.scss
View file

@ -1,4 +1,4 @@
@import '../../stylesheets/colors'; @use '../../stylesheets/colors' as *;
.OAuthProfile { .OAuthProfile {
.LoggedInWith { .LoggedInWith {

4
imports/ui/pages/Subscriptions/SubscriptionsMap.scss
View file

@ -1,5 +1,5 @@
@import '../../stylesheets/mixins'; @use '../../stylesheets/mixins' as *;
@import '../../stylesheets/colors'; @use '../../stylesheets/colors' as *;
.subscriptionsmap-leaflet-container { .subscriptionsmap-leaflet-container {
height: 100%; height: 100%;

12
imports/ui/stylesheets/app.scss
View file

@ -1,6 +1,6 @@
@import './colors'; @use './colors' as *;
@import './forms'; @use './forms' as *;
@import './bootstrap-overrides'; @use './bootstrap-overrides' as *;
@import './custom'; @use './custom' as *;
@import './cookies-eu'; @use './cookies-eu' as *;
@import './new-age'; @use './new-age' as *;

6
imports/ui/stylesheets/bootstrap-overrides.scss vendored
View file

@ -1,7 +1,9 @@
@import './mixins'; @use 'sass:color';
@use './mixins' as *;
@use './colors' as *;
body { body {
background-color: lighten($todos-palette5, 70%); background-color: color.adjust($todos-palette5, $lightness: 70%);
/* for fixed header */ /* for fixed header */
/* padding-top: 50px; */ /* padding-top: 50px; */
overflow-x: hidden; overflow-x: hidden;

4
imports/ui/stylesheets/cookies-eu.scss
View file

@ -1,5 +1,7 @@
@use 'sass:color';
@use './colors' as *;
#js-cookie-policy-default { #js-cookie-policy-default {
background-color: lighten($todos-palette3, 10%); background-color: color.adjust($todos-palette3, $lightness: 10%);
} }
.cookie-policy { .cookie-policy {

4
imports/ui/stylesheets/custom.scss
View file

@ -1,5 +1,5 @@
@import './mixins'; @use './mixins' as *;
@import './colors'; @use './colors' as *;
a, a:hover { a, a:hover {
color: $todos-palette1a; color: $todos-palette1a;

4
imports/ui/stylesheets/forms.scss
View file

@ -1,5 +1,5 @@
@import './mixins'; @use './mixins' as *;
@import './colors'; @use './colors' as *;
form { form {
label, label,

2
imports/ui/stylesheets/new-age.scss
View file

@ -1,4 +1,4 @@
@import './mixins'; @use './mixins' as *;
/*! /*!
* Start Bootstrap - New Age v4.0.0-beta.2 (https://startbootstrap.com/template-overviews/new-age) * Start Bootstrap - New Age v4.0.0-beta.2 (https://startbootstrap.com/template-overviews/new-age)