Migrate sass @import to @use

duckduckgo · Jan 2, 2025 · 8553b10 · 8553b10
1 parent 1c0a7f7
commit 8553b10
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 90 deletions.
diff --git a/shared/scss/_mixins.scss b/shared/scss/_mixins.scss
@@ -1,4 +1,4 @@
-@import 'vars';
+@use 'vars';
 
 /* Logo */
 @mixin ddg_logo() {
@@ -29,7 +29,7 @@
 /* Font groupings */
 @mixin uppercase_label() {
     font-size: 12px;
-    color: $color--grey;
+    color: vars.$color--grey;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     font-weight: bold;
@@ -96,7 +96,7 @@
             }
 
             .toggle-button__bg {
-                background-color: $color--medium-dark-platinum;
+                background-color: vars.$color--medium-dark-platinum;
             }
         }
 
@@ -106,7 +106,7 @@
             }
 
             .toggle-button__bg {
-                background-color: $color--green;
+                background-color: vars.$color--green;
             }
         }
     }
@@ -138,8 +138,8 @@
     .sliding-subview {
         position: absolute;
         top: 0;
-        left: $popup__width;
-        width: $popup__width;
+        left: vars.$popup__width;
+        width: vars.$popup__width;
         height: 100%;
         box-sizing: border-box;
 
@@ -150,7 +150,7 @@
             transition: left 0.35s ease-in-out;
 
             &.sliding-subview--open {
-                left: -$popup__width;
+                left: -(vars.$popup__width);
             }
         }
 
@@ -174,7 +174,7 @@
             .sliding-subview__header__title {
                 height: 26px;
                 width: 14px;
-                color: $slate;
+                color: vars.$slate;
                 font-size: 14px;
                 font-weight: bold;
                 padding: 14px 0 0 14px;
@@ -194,7 +194,7 @@
                 width: auto;
                 text-align: center;
                 font-weight: bold;
-                color: $slate;
+                color: vars.$slate;
                 padding: 14px 0 10px 0;
                 text-decoration: none;
             }
@@ -230,9 +230,9 @@
     border-radius: 28px;
     font-weight: bold;
     cursor: pointer;
-    border: 1px solid $color--medium-dark-slate;
-    color: $color--medium-dark-slate;
-    background: $white;
+    border: 1px solid vars.$color--medium-dark-slate;
+    color: vars.$color--medium-dark-slate;
+    background: vars.$white;
     padding: 0.4em 1.2em;
     text-decoration: none;
     text-align: center;

diff --git a/shared/scss/base/_forms.scss b/shared/scss/base/_forms.scss
@@ -1,3 +1,5 @@
+@use '../vars';
+
 // General form styles, mostly ripped from
 // https://github.com/duckduckgo/duckduckgo-styles
 // and
@@ -8,7 +10,7 @@
 }
 
 .frm__label {
-    color: $slate;
+    color: vars.$slate;
     margin-bottom: 10px;
     display: block;
 }
@@ -24,9 +26,9 @@
 .frm__input {
     box-sizing: border-box;
     margin: 0;
-    background-color: $silver-light;
+    background-color: vars.$silver-light;
     border: 1px solid #e6e6e6;
-    color: $slate;
+    color: vars.$slate;
     outline: none;
     margin-bottom: 10px;
 }
@@ -68,31 +70,31 @@
     user-select: none;
 
     outline: none !important;
-    background-color: $blue-light;
-    border: 1px solid $blue-light;
+    background-color: vars.$blue-light;
+    border: 1px solid vars.$blue-light;
     line-height: 2;
     font-weight: normal;
     font-size: 1em;
     padding-top: 2px;
     padding-bottom: 2px;
-    color: $white;
+    color: vars.$white;
     -webkit-appearance: none !important;
 
     &:hover,
     &:focus {
         text-decoration: none !important;
-        color: $white;
-        background-color: $blue;
-        border-color: $blue;
+        color: vars.$white;
+        background-color: vars.$blue;
+        border-color: vars.$blue;
     }
     &:active {
-        color: $white;
-        background-color: $blue-dark;
-        border-color: $blue-dark;
+        color: vars.$white;
+        background-color: vars.$blue-dark;
+        border-color: vars.$blue-dark;
     }
     &.is-disabled {
-        border-color: $platinum-darker;
-        background-color: $platinum-darker;
+        border-color: vars.$platinum-darker;
+        background-color: vars.$platinum-darker;
         cursor: default;
         color: #eee;
     }