style: fix style linting issues

src/scss/base.scss

@@ -1,12 +1,12 @@
 //    Introduction
 //    Welcome to the CSS file! This is subjectively the most exciting code
 //    of the website. Here we bring together the visual style of the website.
-//
+
 //    Our CSS is organized using Harry Roberts' (csswizardry.com) Inverted
 //    Triangle CSS (ITCSS) organizational approach. This method is mixed with
 //    Block Element Modifier (BEM) naming convention for class names throughout
 //    the stylesheet.
-//
+
 //    Table of Contents:
 // 1. Settings
 // 2. Tools
@@ -28,77 +28,70 @@
 //    to write comments describing the colors and font stacks as a guide.
 //    If using features such as custom properties, those that are global
 //    custom properties should be described in this section.
-@import "settings/variables";
-@import "settings/colors";
-@import "settings/fonts";
-@import "settings/z-index";
-
+@import 'settings/variables';
+@import 'settings/colors';
+@import 'settings/fonts';
+@import 'settings/z-index';
 
 // =====================================================================
 // 2. Tools
 //    This section is specifically for preprocessor global mixins and
 //    functions. No CSS should be generated by the preprocessor from
 //    partials in this section.
-@import "tools/functions";
-@import "tools/mixins";
-@import "tools/svg";
-@import "tools/typography";
-
+@import 'tools/functions';
+@import 'tools/mixins';
+@import 'tools/svg';
+@import 'tools/typography';
 
 // =====================================================================
 // 3. Generic
 //    Here we define any generic styles that are not specific to the styles of
 //    the site. This section should include any Reset or Normalize libraries
 //    and any preferential base styles for elements. There shouldn’t be any
 //    classes or ids used in this section.
-@import "generic/normalize";
-@import "generic/safe-focus";
-
+@import 'generic/normalize';
+@import 'generic/safe-focus';
 
 // =====================================================================
 // 4. Elements
 //    Styling for bare HTML elements (like H1, A, etc.). These come with
 //    default styling from the browser so we can redefine them here.
-@import "elements/root";
-@import "elements/asterisk";
-@import "elements/html-body";
-@import "elements/a";
-@import "elements/h1-6";
-@import "elements/img";
-@import "elements/ol-ul";
-@import "elements/p";
-
+@import 'elements/root';
+@import 'elements/asterisk';
+@import 'elements/html-body';
+@import 'elements/a';
+@import 'elements/h1-6';
+@import 'elements/img';
+@import 'elements/ol-ul';
+@import 'elements/p';
 
 // =====================================================================
 // 5. Objects
 //    Class-based selectors which define undecorated design patterns,
 //    for example media object known from OOCSS.
-@import "object/grid";
-@import "object/width-limiter";
-
+@import 'object/grid';
+@import 'object/width-limiter';
 
 // =====================================================================
 // 6. Components
 //    Specific UI components. This is where majority of our work takes place
 //    and our UI components are often composed of Objects and Components
 
-
 // =====================================================================
 // 7. Vendors
 //    Whenever third party styles are needed add them to this section,
 //    below the Components, but above the Utilities. This allows them
 //    to live alongside our styles but still be overridden if needed by
 //    a utility class.
 
-
 // =====================================================================
 // 8. Utilities
 //    Utilities and helper classes with ability to override anything
 //    which goes before in the triangle, eg. hide helper class
-@import "utilities/display";
-@import "utilities/text";
-@import "utilities/colors";
-@import "utilities/fonts";
-@import "utilities/order";
-@import "utilities/spacing";
-@import "utilities/shadow";
+@import 'utilities/display';
+@import 'utilities/text';
+@import 'utilities/colors';
+@import 'utilities/fonts';
+@import 'utilities/order';
+@import 'utilities/spacing';
+@import 'utilities/shadow';

src/scss/generic/_normalize.scss

@@ -10,7 +10,7 @@
 
 html {
   line-height: 1.15; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
+  text-size-adjust: 100%; /* 2 */
 }
 
 /* Sections
@@ -196,7 +196,7 @@ button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
-  -webkit-appearance: button;
+  appearance: button;
 }
 
 /**
@@ -288,7 +288,7 @@ textarea {
  */
 
 [type="search"] {
-  -webkit-appearance: textfield; /* 1 */
+  appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
 }
 
@@ -297,7 +297,7 @@ textarea {
  */
 
 [type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
+  appearance: none;
 }
 
 /**
@@ -306,7 +306,7 @@ textarea {
  */
 
 ::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
+  appearance: button; /* 1 */
   font: inherit; /* 2 */
 }
 

src/scss/object/_grid.scss

@@ -56,6 +56,7 @@ $grid-count: 12;
 
 .obj-grid {
   @include clearfix;
+
   display: flex;
   flex-wrap: wrap;
 
@@ -77,8 +78,7 @@ $grid-count: 12;
       @media (min-width: #{$val}) {
         @include grid-maker(\@#{$key});
       }
-    }
-    @else {
+    } @else {
       @media print {
         @include grid-maker(\@#{$key});
       }

src/scss/settings/_colors.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Named Colors
 $color-blue-dianne: #1C4C55;
 $color-lochinvar: #2D818F;
@@ -14,10 +16,10 @@ $color-tertiary: $color-alabaster;
 $color-web-accent: $color-powder-blue;
 
 // Base Darkened
-$color-primary-dark: darken($color-primary, 15%);
-$color-secondary-dark: darken($color-secondary, 15%);
-$color-tertiary-dark: darken($color-tertiary, 15%);
-$color-web-accent-dark: darken($color-web-accent, 15%);
+$color-primary-dark: color.adjust($color-primary, $lightness: -15%);
+$color-secondary-dark: color.adjust($color-secondary, $lightness: -15%);
+$color-tertiary-dark: color.adjust($color-tertiary, $lightness: -15%);
+$color-web-accent-dark: color.adjust($color-web-accent, $lightness: -15%);
 
 // Status
 $color-positive: $color-emerald;
@@ -34,7 +36,7 @@ $color-default-text: $color-black;
 $color-safe-focus: $color-primary;
 
 // Shadows
-$color-box-shadow: rgba(lighten($color-black, 10%), 0.4);
+$color-box-shadow: rgba(color.adjust($color-black, $lightness: 10%), 0.4);
 
 // Map for ease of use
 $colors: (

src/scss/settings/_fonts.scss

@@ -1,24 +1,22 @@
+@use "sass:map";
+
 $font-franklin: franklin-gothic-urw, sans-serif;
 $font-neuzeit: neuzeit-grotesk, sans-serif;
-
 $font-primary: $font-franklin;
 $font-secondary: $font-neuzeit;
-
 $fonts: (
   'primary': $font-primary,
   'secondary': $font-secondary
 );
-
 $weights: (
   'book': 400,
   'demi': 700,
   'bold': 800,
   'heavy': 900
 );
-
 $font-size: 1rem;
 $font-sizes: () !default;
-$font-sizes: map-merge(
+$font-sizes: map.merge(
   (
     xs: $font-size * 0.875,   // 14px
     sm: $font-size,           // 16px
@@ -31,8 +29,6 @@ $font-sizes: map-merge(
     $font-sizes
   );
 
-//
 // LINE HEIGHTS
-//
 $line-height-normal: 1.5;
 $line-height-tight: 1.25;

src/scss/settings/_shadows.scss

@@ -0,0 +1 @@
+// add shadow declarations here

src/scss/settings/_variables.scss

@@ -1,64 +1,62 @@
-//
+@use "sass:map";
+
 // FONTS
-//
-$font-stack-primary: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-stack-primary: 'Helvetica Neue', helvetica, arial, sans-serif;
 
-//
 // BREAKPOINTS
-//
 $bp-sm: 30rem;
 $bp-md: 50rem;
 $bp-lg: 60rem;
 $bp-xl: 80rem;
-
 $grid-breakpoints: (
   sm: $bp-sm,
   md: $bp-md,
   lg: $bp-lg,
-  xl: $bp-xl
+  xl: $bp-xl,
 );
 
-//
 // LENGTHS
-//
 $default-page-width: 90%;
 $default-page-margin: auto;
 $max-page-width: 87.5rem; // 1400px
 $max-content-width: 52rem; // 832px
 
 // BORDERS
-$default-border: 0.125rem; //2px
+$default-border: 0.125rem; // 2px
 
-//
 // SPACING
-//
 $spacer: 1rem;
 $spacers: () !default;
-$spacers: map-merge(
+$spacers: map.merge(
   (
     none: 0,
-    xxxs: $spacer * 0.25, // 4px
-    xxs:  $spacer * 0.5,  // 8px
-    xs:   $spacer,        // 16px
-    sm:   $spacer * 1.5,  // 24px
-    md:   $spacer * 2,    // 32px
-    lg:   $spacer * 2.5,  // 40px
-    xl:   $spacer * 4,    // 64px
-    xxl:  $spacer * 6,    // 96px
-    xxxl: $spacer * 8,    // 128px
+    xxxs: $spacer * 0.25,
+    // 4px
+    xxs: $spacer * 0.5,
+    // 8px
+    xs: $spacer,
+    // 16px
+    sm: $spacer * 1.5,
+    // 24px
+    md: $spacer * 2,
+    // 32px
+    lg: $spacer * 2.5,
+    // 40px
+    xl: $spacer * 4,
+    // 64px
+    xxl: $spacer * 6,
+    // 96px
+    xxxl: $spacer * 8,
+    // 128px
   ),
-    $spacers
-  );
+  $spacers
+);
 
-//
 // TRANSITIONS
-//
 $default-duration: 500ms;
-$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
+$ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
 $default-transition: $default-duration $ease-out-expo;
 
-//
 // TRANSFORM SKEW VALUES
-//
 $skew-value-right: skewX(20deg);
 $skew-value-left: skewX(-20deg);

src/scss/settings/_z-index.scss

@@ -1,12 +1,12 @@
-$z-index-1:  100;
-$z-index-2:  200;
-$z-index-3:  300;
-$z-index-4:  400;
-$z-index-5:  500;
-$z-index-6:  600;
-$z-index-7:  700;
-$z-index-8:  800;
-$z-index-9:  900;
+$z-index-1: 100;
+$z-index-2: 200;
+$z-index-3: 300;
+$z-index-4: 400;
+$z-index-5: 500;
+$z-index-6: 600;
+$z-index-7: 700;
+$z-index-8: 800;
+$z-index-9: 900;
 $z-index-10: 1000;
 $z-index-11: 1100;
 $z-index-12: 1200;

src/scss/tools/_functions.scss

@@ -35,5 +35,6 @@
 
 @function remify($value) {
   $value: strip-units($value);
+
   @return math.div($value, 16) * 1rem;
 }