Remove deprecated duckduckgo-colors dependency; fix sass warnings (#2881

) * Remove deprecated duckduckgo-colors dependency * Migrate sass @import to @use
duckduckgo · Jan 7, 2025 · 398eaab · 398eaab
1 parent 023b9ff
commit 398eaab
Show file tree

Hide file tree

Showing 10 changed files with 121 additions and 106 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -43,7 +43,6 @@
         "@types/node": "^22.1.0",
         "@types/webextension-polyfill": "^0.10.7",
         "asana": "github:Asana/node-asana",
-        "duckduckgo-colors": "0.0.1",
         "esbuild": "^0.24.2",
         "eslint": "^9.13.0",
         "fake-indexeddb": "^6.0.0",

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/_vars.scss b/shared/scss/_vars.scss
@@ -10,7 +10,27 @@ $status--bad: 'status--bad.svg';
 $status--info: 'status--info.svg';
 
 /* Colors */
-@import '../../node_modules/duckduckgo-colors/colors';
+$white: #ffffff;
+$silver-light: #f7f7f7;
+$silver: #f2f2f2;
+$silver-dark: #ededed;
+$platinum-light: #e5e5e5;
+$platinum: #e0e0e0;
+$platinum-dark: #d0d0d0;
+$platinum-darker: #c3c3c3;
+$grey-light: #aaaaaa;
+$grey: #999999;
+$grey-dark: #888888;
+$slate-light: #666666;
+$slate-light-blue: #434a50;
+$slate: #333333;
+$slate-blue: #34383b;
+
+$blue: #4495d4;
+$blue-dark: #00278e;
+$blue-light: #66abff;
+
+$red: #de5833;
 $color--green: #3fa248;
 $color--dark-green: #29521f;
 $color--orange: #f89f22;

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;
     }