refactor(scss): replace deprecated @import with @use (#2)

* refactor(scss): replace deprecated @import with @use * fix: bootstrap to-rgb function
Yizack · Nov 1, 2024 · 2be3470 · 2be3470
1 parent 119a1c5
commit 2be3470
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 93 deletions.
diff --git a/app/assets/scss/_backgrounds.scss b/app/assets/scss/_backgrounds.scss
@@ -1,17 +1,19 @@
+@use "bootstrap" as bs;
+
 .banner {
   background-size: cover;
   background-position-x: center;
   background-position-y: top;
   background-repeat: no-repeat;
 }
 
-@include color-mode(light) {
+@include bs.color-mode(light) {
   .banner-home {
     background-image: url("/images/illustrations/heart.jpg");
   }
 }
 
-@include color-mode(dark) {
+@include bs.color-mode(dark) {
   .banner-home {
     background-image: url("/images/illustrations/heart.jpg");
     background-blend-mode: difference;

diff --git a/app/assets/scss/_bootstrap.scss b/app/assets/scss/_bootstrap.scss
diff --git a/app/assets/scss/_buttons.scss b/app/assets/scss/_buttons.scss
@@ -1,3 +1,5 @@
+@use "bootstrap" as bs;
+
 .btn {
   text-decoration: none!important;
   font-weight: bold;
@@ -50,7 +52,7 @@
   --bs-gradient: none;
 }
 
-@include color-mode(dark) {
+@include bs.color-mode(dark) {
   .accordion-button::after {
     --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffafa9'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
     --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffafa9'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");

diff --git a/app/assets/scss/_datepicker.scss b/app/assets/scss/_datepicker.scss
@@ -1,4 +1,5 @@
 /* stylelint-disable selector-class-pattern */
+@use "@vuepic/vue-datepicker/dist/main.css";
 
 .dp__theme_dark {
   --dp-primary-color: var(--bs-primary);

diff --git a/app/assets/scss/_form.scss b/app/assets/scss/_form.scss
@@ -1,3 +1,5 @@
+@use "bootstrap" as bs;
+
 .form-floating>.form-control~label::after, .form-floating>.form-select~label::after {
   background-color: transparent!important;
 }
@@ -58,7 +60,7 @@ input:read-only:not([type="checkbox"]):hover, input:read-only:not([type="checkbo
   outline: 0;
 }
 
-@include color-mode(dark) {
+@include bs.color-mode(dark) {
   .form-floating>:disabled~label, .form-floating>.form-control:disabled~label {
     /* stylelint-disable -- This problem is ignorable. */
     color: rgba(var(--bs-body-color-rgb), 0.75);
@@ -69,13 +71,11 @@ input:read-only:not([type="checkbox"]):hover, input:read-only:not([type="checkbo
   display: none;
 }
 
-
 .image-upload label .overlay {
   opacity: 0;
   transition: opacity 0.3s ease-in-out;
 }
 
-
 .image-upload label:hover .overlay {
   opacity: .85;
 }
@@ -84,7 +84,6 @@ input:read-only:not([type="checkbox"]):hover, input:read-only:not([type="checkbo
   cursor: pointer;
 }
 
-
 .form-check-input:checked {
   background-color: var(--bs-primary);
   border-color: var(--bs-primary);

diff --git a/app/assets/scss/_leaflet.scss b/app/assets/scss/_leaflet.scss
@@ -1,3 +1,6 @@
+@use "bootstrap" as bs;
+@use "leaflet/dist/leaflet.css";
+
 .leaflet-control-container a {
   text-decoration: none;
 }
@@ -72,7 +75,7 @@
   background: var(--bs-body-bg);
 }
 
-@include color-mode(light) {
+@include bs.color-mode(light) {
   .leaflet-control-layers-selector:checked[type="checkbox"] {
     --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
   }
@@ -83,7 +86,7 @@
 
 }
 
-@include color-mode(dark) {
+@include bs.color-mode(dark) {
   .leaflet-control-layers-selector:checked[type="checkbox"] {
     --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230a0808' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
   }

diff --git a/app/assets/scss/_theme-dark.scss b/app/assets/scss/_theme-dark.scss
@@ -1,3 +1,5 @@
+@use "bootstrap" as bs;
+
 $body-color: #e9ecef;
 $primary: #ffafa9;
 $primary-hover: #ff9f98;
@@ -13,32 +15,32 @@ $body-bg: #232222;
 $tertiary-bg: #535252;
 $success: #a9ffaf;
 
-@include color-mode(dark) {
+@include bs.color-mode(dark) {
   --bs-body-color: #{$body-color};
-  --bs-body-color-rgb: #{to-rgb($body-color)};
+  --bs-body-color-rgb: #{bs.to-rgb($body-color)};
   --bs-primary: #{$primary};
-  --bs-primary-rgb: #{to-rgb($primary)};
+  --bs-primary-rgb: #{bs.to-rgb($primary)};
   --bs-primary-hover: #{$primary-hover};
   --bs-link-color: #{$link-color};
-  --bs-link-color-rgb: #{to-rgb($link-color)};
+  --bs-link-color-rgb: #{bs.to-rgb($link-color)};
   --bs-link-hover-color: #{$link-hover-color};
-  --bs-link-hover-color-rgb: #{to-rgb($link-hover-color)};
+  --bs-link-hover-color-rgb: #{bs.to-rgb($link-hover-color)};
   --bs-secondary: #{$accent};
-  --bs-secondary-rgb: #{to-rgb($accent)};
+  --bs-secondary-rgb: #{bs.to-rgb($accent)};
   --bs-danger-hover : #{$danger-hover};
-  --bs-danger-hover-rgb: #{to-rgb($danger-hover)};
+  --bs-danger-hover-rgb: #{bs.to-rgb($danger-hover)};
   --placeholder-color: #{$placeholder-color};
   --btn-color: #{$btn-color};
   --bs-danger: #{$danger};
-  --bs-danger-rgb: #{to-rgb($danger)};
+  --bs-danger-rgb: #{bs.to-rgb($danger)};
   --bs-dark: #{$dark};
-  --bs-dark-rgb: #{to-rgb($dark)};
+  --bs-dark-rgb: #{bs.to-rgb($dark)};
   --bs-body-bg: #{$body-bg};
-  --bs-body-bg-rgb: #{to-rgb($body-bg)};
+  --bs-body-bg-rgb: #{bs.to-rgb($body-bg)};
   --bs-tertiary-bg: #{$tertiary-bg};
-  --bs-tertiary-bg-rgb: #{to-rgb($tertiary-bg)};
+  --bs-tertiary-bg-rgb: #{bs.to-rgb($tertiary-bg)};
   --bs-success: #{$success};
-  --bs-success-rgb: #{to-rgb($success)};
+  --bs-success-rgb: #{bs.to-rgb($success)};
   --switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{encode-hash($primary)}'/%3e%3c/svg%3e");
 
   a {

diff --git a/app/assets/scss/_theme-light.scss b/app/assets/scss/_theme-light.scss
@@ -1,3 +1,5 @@
+@use "bootstrap" as bs;
+
 $body-color: #443c47;
 $primary: #c25050;
 $primary-hover: #a54444;
@@ -10,27 +12,27 @@ $placeholder-color: #a8a8a8;
 $btn-color: #fff;
 $success: #409b6e;
 
-@include color-mode(light) {
+@include bs.color-mode(light) {
   --bs-body-color: #{$body-color};
-  --bs-body-color-rgb: #{to-rgb($body-color)};
+  --bs-body-color-rgb: #{bs.to-rgb($body-color)};
   --bs-primary: #{$primary};
-  --bs-primary-rgb: #{to-rgb($primary)};
+  --bs-primary-rgb: #{bs.to-rgb($primary)};
   --bs-primary-hover: #{$primary-hover};
   --bs-link-color: #{$link-color};
-  --bs-link-color-rgb: #{to-rgb($link-color)};
+  --bs-link-color-rgb: #{bs.to-rgb($link-color)};
   --bs-link-hover-color: #{$link-hover-color};
-  --bs-link-hover-color-rgb: #{to-rgb($link-hover-color)};
+  --bs-link-hover-color-rgb: #{bs.to-rgb($link-hover-color)};
   --bs-secondary: #{$accent};
-  --bs-secondary-rgb: #{to-rgb($accent)};
+  --bs-secondary-rgb: #{bs.to-rgb($accent)};
   --bs-danger: #{$danger};
-  --bs-danger-rgb: #{to-rgb($danger)};
+  --bs-danger-rgb: #{bs.to-rgb($danger)};
   --bs-danger-hover : #{$danger-hover};
-  --bs-danger-hover-rgb: #{to-rgb($danger-hover)};
+  --bs-danger-hover-rgb: #{bs.to-rgb($danger-hover)};
   --placeholder-color: #{$placeholder-color};
   --btn-color: #{$btn-color};
   --bs-dark: var(--bs-body-color);
   --bs-dark-rgb: var(--bs-body-color-rgb);
   --bs-success: #{$success};
-  --bs-success-rgb: #{to-rgb($success)};
+  --bs-success-rgb: #{bs.to-rgb($success)};
   --switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{encode-hash($primary)}'/%3e%3c/svg%3e");
 }
diff --git a/app/assets/scss/app.scss b/app/assets/scss/app.scss
@@ -1,15 +1,12 @@
-@import "bootstrap";
-@import "main";
-@import "theme-light";
-@import "theme-dark";
-@import "transitions";
-@import "backgrounds";
-@import "buttons";
-@import "navbar";
-@import "form";
-@import "markers";
-@import "leaflet/dist/leaflet.css";
-@import "leaflet";
-@import "map";
-@import "@vuepic/vue-datepicker/dist/main.css";
-@import "datepicker";
+@use "theme-light";
+@use "theme-dark";
+@use "main";
+@use "transitions";
+@use "backgrounds";
+@use "buttons";
+@use "navbar";
+@use "form";
+@use "markers";
+@use "leaflet";
+@use "map";
+@use "datepicker";