upgrading packages

_build/assets/sass/_body.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 .fred--open {
   position: fixed;
   z-index: 10010;
@@ -251,7 +252,7 @@
     .fred--element-settings {
       display: block;
       height: 32px;
-      margin-bottom: $baseGutter/2;
+      margin-bottom: math.div($baseGutter, 2);
 
       &:before {                            // override _buttons.scss … move here?
         background-color: transparent;

_build/assets/sass/_buttons.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 button.fred--btn, .fred--btn, .fred button.fred--btn, .fred .fred--btn{
   @include btn();
   padding: $btn-padding;
@@ -109,8 +110,8 @@ button.fred--btn, .fred--btn, .fred button.fred--btn, .fred .fred--btn{
     text-align: center;
     background: transparent;
     border-radius: $radius;
-    padding: $baseGutter/2 $baseGutter;
-    margin: $baseGutter/2 $baseGutter;
+    padding: math.div($baseGutter, 2) $baseGutter;
+    margin: math.div($baseGutter, 2) $baseGutter;
     float: right;
     //&:hover, &:focus {
     //  background-color: darken($border-light, 15%);

_build/assets/sass/_choices.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 /*===============================
 =            Choices            =
 ===============================*/
@@ -101,7 +102,7 @@ $choices-button-offset: 8px !default;
     position: relative;
     display: inline-block;
     margin-top: 0;
-    margin-right: -$choices-button-offset/2;
+    margin-right:  math.div(-$choices-button-offset, 2);
     margin-bottom: 0;
     margin-left: $choices-button-offset;
     padding-left: $choices-button-offset*2;
@@ -290,4 +291,4 @@ $choices-button-offset: 8px !default;
 
 .#{$choices-selector}__placeholder { opacity: .5; }
 
-/*=====  End of Choices  ======*/
+/*=====  End of Choices  ======*/

_build/assets/sass/_grids.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 ////
 /// @group Grid
 ////
@@ -191,7 +192,7 @@ $mpGutter: 1.2%;
       position: absolute;
       z-index: 99;
       bottom: 0;
-      padding: $gridGutter/2;
+      padding: math.div($baseGutter, 2);
     }
     &:not(.fred--fill-tile) figcaption {
       padding: $gridGutter*1.25;

_build/assets/sass/_panels.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .fred--panel{
   font-family: $font-family;
   background-color: $white;
@@ -59,7 +61,7 @@
   //}
   //
   dl {
-    margin-top: $baseGutter/2;
+    margin-top: math.div($baseGutter, 2);
     dt {
       background-color: $offwhite;
       padding: $sidebar-actions-padding;
@@ -77,7 +79,7 @@
       }
       &:hover, &.active {
         color: $white;
-        background-color: $dark-gray;    
+        background-color: $dark-gray;
       }
       &.active {
         + dd {
@@ -138,4 +140,4 @@
       transition: 0s;
     }
   }
-}}
+}}

_build/assets/sass/_sidebar.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 .fred--sidebar_close {
   position: absolute;
   right: 8px;
@@ -196,7 +197,7 @@
     font-weight: bold;
     letter-spacing: .5px;
     text-transform: uppercase;
-    margin: 0 28px $baseGutter/2 18px;
+    margin: 0 28px math.div($baseGutter, 2) 18px;
     padding: 16px 2px 8px 2px;
     color: $dark-gray;
     border-bottom: 1px solid $border;

_build/assets/sass/_vars.scss

@@ -1,4 +1,4 @@
-
+@use "sass:math";
 // COLORS
 
 $blue: #2a4365; //$was: #031723 and #123764
@@ -10,7 +10,7 @@ $offwhite: #f1f1f1;
 $light-gray: #e4e4e4;
 $gray: #b1b1b1;
 $dark-gray: darken($gray, 20%);
-$black: #272727; 
+$black: #272727;
 
 $border-light: $light-gray;
 $border: $gray;
@@ -40,23 +40,16 @@ $timing: .3s;
 $box-shad-subtle: 0px 3px 15px rgba(0,0,0,0.2);
 $ui-shad: 0 1px 2px rgba($black, 0.4);
 
-$btn-padding: $baseGutter/2 $baseGutter;
+$btn-padding: math.div($baseGutter, 2) $baseGutter;
 $btn-padding-small: 3px 11px;
 $sidebar-actions-padding: 12px 30px 12px 20px;
 
 $font-family: "Open Sans", Arial, sans-serif;
 //Mixins
 @mixin draggable{
-  cursor: move; /* fallback: no `url()` support or images disabled */
-  cursor: url(images/grab.cur); /* fallback: Internet Explorer */
-  cursor: -webkit-grab; /* Chrome 1-21, Safari 4+ */
-  cursor:    -moz-grab; /* Firefox 1.5-26 */
-  cursor:         grab; /* W3C standards syntax, should come least */
+  cursor: grab;
   &:active {
-    cursor: url(images/grabbing.cur);
-    cursor: -webkit-grabbing;
-    cursor:    -moz-grabbing;
-    cursor:         grabbing;
+    cursor: grabbing;
   }
 }
 
@@ -76,7 +69,7 @@ $font-family: "Open Sans", Arial, sans-serif;
   height: auto;
 }
 
-@mixin btn-disabled{  
+@mixin btn-disabled{
   &:disabled, &[disabled]{
     background-color: $dark-gray !important;
     opacity: .8;
@@ -92,20 +85,20 @@ mixin that calculates if text needs to be light or dark
 depending on the background color passed.
 
 From this W3C document: http://www.webmasterworld.com/r.cgi?f=88&d=9769&url=http://www.w3.org/TR/AERT#color-contrast
-			
-Color brightness is determined by the following formula: 
+
+Color brightness is determined by the following formula:
 ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
 ------------------------*/
 
 @mixin text-contrast($n) {
   $color-brightness: round((red($n) * 299) + (green($n) * 587) + (blue($n) * 114) / 1000);
   $light-color: round((red(#ffffff) * 299) + (green(#ffffff) * 587) + (blue(#ffffff) * 114) / 1000);
-  
+
   @if abs($color-brightness) < ($light-color/2){
     color: white;
   }
 
   @else {
     color: black;
   }
-}
+}

core/components/fred/composer.json

@@ -22,5 +22,8 @@
     "psr-4": {
       "Fred\\": "src/"
     }
+  },
+  "require-dev": {
+    "modx/revolution": "^3.0"
   }
 }