Merge pull request #131 from oddbird/dependabot/npm_and_yarn/npm-mino…

…r-upgrades-c287d5e417

Update Sass and address deprecation warnings

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Accoutrement Changelog
 
+## 4.0.5 - 11/07/24
+
+- 🐛 BUGFIX: Address Sass deprecation warnings
+- 🏠 INTERNAL: Upgrade dev dependencies
+
 ## 4.0.4 - 12/14/22
 
 - 🏠 INTERNAL: Remove documentation from npm package

package.json

@@ -45,15 +45,15 @@
   },
   "devDependencies": {
     "chokidar-cli": "^3.0.0",
-    "mocha": "^10.7.3",
+    "mocha": "^10.8.2",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.45",
+    "postcss": "^8.4.47",
     "prettier": "^3.3.3",
-    "sass-embedded": "^1.78.0",
-    "sass-true": "^8.0.0",
+    "sass-embedded": "^1.80.6",
+    "sass-true": "^8.1.0",
     "sassdoc": "^2.7.4",
     "sassdoc-theme-herman": "^6.0.1",
-    "stylelint": "^16.9.0",
+    "stylelint": "^16.10.0",
     "stylelint-config-standard-scss": "^13.1.0"
   },
   "eyeglass": {
@@ -62,5 +62,5 @@
     "name": "accoutrement",
     "needs": "^1.0.0"
   },
-  "packageManager": "yarn@4.4.1"
+  "packageManager": "yarn@4.5.1"
 }

sass/color/_contrast.scss

@@ -223,9 +223,9 @@ $_wcag-contrast: (
   $check: type.check($color, 'color', true, 'color.luminance', '$color');
   $luminance: 0;
   $rgb: (
-    'r': math.div(color.red($color), 255),
-    'g': math.div(color.green($color), 255),
-    'b': math.div(color.blue($color), 255),
+    'r': math.div(color.channel($color, 'red', $space: rgb), 255),
+    'g': math.div(color.channel($color, 'green', $space: rgb), 255),
+    'b': math.div(color.channel($color, 'blue', $space: rgb), 255),
   );
 
   @each $channel, $value in $rgb {

sass/color/_index.scss

@@ -52,7 +52,7 @@
 ///
 /// ```scss
 /// .example {
-///   border-color: color('border');
+///   border-color: accoutrement.color('border');
 /// }
 /// ```
 /// @see $colors

sass/color/_themes.scss

@@ -32,7 +32,7 @@
 ///   @include tools.add-colors($theme-colors);
 ///
 ///   @each $name, $value in $theme-colors {
-///   /* #{$name}: #{inspect($value)} */
+///   /* #{$name}: #{meta.inspect($value)} */
 ///   }
 ///
 /// @param {map} $origin -
@@ -50,7 +50,7 @@
 
   @each $name, $color in $origin {
     $color: tokens.color($name);
-    $light: color.lightness($color);
+    $light: color.channel($color, 'lightness', $space: hsl);
     $light: if($light == 0, 0.00000001%, $light);
     $lum: contrast.luminance($color);
     $avg: math.div((math.div($light, 100%) + $lum), 2);

sass/color/_tokens.scss

@@ -57,7 +57,7 @@
 ///   );
 /// @example scss - adjust referenced colors with any color function
 ///   $colors: (
-///     'focus': '#link' ('darken': 15%, 'desaturate': 15%),
+///     'focus': '#link' ('color.scale': ('lightness': -15%, 'saturation': -15%)),
 ///   );
 ///
 /// @type map
@@ -114,7 +114,7 @@ $colors: () !default;
 ///   );
 ///
 ///   @include tools.with-colors(('background-dark': #2c05bc));
-///   .component { background: color('background-dark'); }
+///   .component { background: tools.color('background-dark'); }
 ///
 /// @param {map} $source -
 ///   The new color palette to use for contents
@@ -155,8 +155,8 @@ $colors: () !default;
 ///   );
 ///
 ///   html {
-///     background: color('background');
-///     color: color('text');
+///     background: tools.color('background');
+///     color: tools.color('text');
 ///   }
 ///
 /// @param {string | list} $color -

sass/tokens/_compile.scss

@@ -24,7 +24,7 @@
 ///     'text-size': '#root',
 ///   );
 ///
-///   /*! #{inspect(tools.map-compile($sizes))} */
+///   /*! #{meta.inspect(tools.map-compile($sizes))} */
 ///
 /// @example scss - Compile a map based on an additional source
 ///   $sizes: (
@@ -37,7 +37,7 @@
 ///     'spacer': 2rem,
 ///   );
 ///
-///   /*! #{inspect(tools.map-compile($sizes, $spacing-sizes))} */
+///   /*! #{meta.inspect(tools.map-compile($sizes, $spacing-sizes))} */
 ///
 /// @access public
 /// @name map-compile
@@ -84,7 +84,7 @@
 ///   );
 ///
 ///   $fn: meta.get-function('color', $module: 'color');
-///   /*! #{inspect(tools.map-compile-with(tools.$colors, $fn))} */
+///   /*! #{meta.inspect(tools.map-compile-with(tools.$colors, $fn))} */
 ///
 /// @access public
 /// @name map-compile-with

sass/utils/_list.scss

@@ -28,7 +28,7 @@
 ///     'main-start': ['nav-end' 'main-start' 'footer-start'],
 ///     'small-start': '#main-start' ('remove-nth': 1),
 ///   );
-///   /*! #{inspect(tools.get($map, 'small-start'))} */
+///   /*! #{meta.inspect(tools.get($map, 'small-start'))} */
 ///
 /// @param {list} $list -
 ///   The original list to be edited

test/scale/_test-data.scss

@@ -50,4 +50,4 @@ $test-sizes: (
   'calc-ref': '#calc',
 );
 
-@include f.internal(meta.get-function('round'), 'round');
+@include f.internal(meta.get-function('round', $module: 'math'), 'round');

test/tokens/_compile.scss

@@ -85,10 +85,10 @@
     );
 
     $colors-compiled: (
-      'brand-blue': #0d7fa5,
+      'brand-blue': hsl(195deg, 85%, 35%),
       'contrast-dark': maroon,
-      'dark-blue': c.mix(maroon, #0d7fa5, 25%),
-      'light-blue': c.mix(white, #0d7fa5, 25%),
+      'dark-blue': rgb(42.040625, 95.3859375, 123.834375),
+      'light-blue': rgb(73.790625, 159.1359375, 187.584375),
     );
     $fn: meta.get-function('color', $module: 'color');
 
@@ -111,10 +111,10 @@
           )
         ),
         (
-          'brand-blue': #a5330d,
+          'brand-blue': hsl(15, 85%, 35%),
           'contrast-dark': teal,
-          'dark-blue': #7c472a,
-          'light-blue': #bc674a,
+          'dark-blue': rgb(123.834375, 70.4890625, 42.040625),
+          'light-blue': rgb(187.584375, 102.2390625, 73.790625),
         )
       );
     }

test/tokens/_parse.scss

@@ -274,8 +274,8 @@ $scale: function.get('color.scale');
 
     @include it('Removes null arguments') {
       @include assert-equal(
-        parse.do('color.alpha', black, null),
-        color.alpha(black)
+        parse.do('color.channel', black, 'alpha', null),
+        color.channel(black, 'alpha')
       );
     }
   }

test/type/_font-vars.scss

@@ -9,6 +9,7 @@
 @use '../../sass/type/fonts';
 @use '../../../sass/type/config';
 @use 'test-data' as data;
+@use 'sass:list';
 @use 'sass:meta';
 
 $_global: config.$fonts;
@@ -220,7 +221,7 @@ config.$fonts: data.$fonts;
         ),
         'my-adjustment': '#my-base'
           (
-            meta.get-function('append'): 'monospace',
+            meta.get-function('append', $module: 'list'): 'monospace',
           ),
       );