Assets integration: Remove Bourbon requirement from assets package. (#…

…1051)

* DP-18263: Removes the dependency on bourbon.

* Updates README, version bump.

assets/README.md

@@ -1,5 +1,5 @@
 # Mayflower Assets
-The styles provided by this package require compiling with a tool that supports the [npm sass package](https://www.npmjs.com/package/sass). [Bourbon](https://www.npmjs.com/package/bourbon) 4.x is required to use the .scss files in this package and must be installed by the user of it.
+The styles provided by this package require compiling with a tool that supports the [npm sass package](https://www.npmjs.com/package/sass). 
 
 ## License
 Please note that the fonts and the svg-icons are licensed only for the usage on websites that are **owned by the Commonwealth of Massachusetts**. Mayflower is currently using a licensed web font Texta and purchased [Smashing Icons](https://smashicons.com/) for some icons.
@@ -36,7 +36,7 @@ These include paths allow you to include files with paths like `00-base/name-of-
 You can also set up your include paths by using an `.env` file at the root of your project. Sass can use the node environment variable `SASS_PATH` for setting your include paths:
 ```
 // .env file
-SASS_PATH=./node_modules/@massds/mayflower-assets/scss:./node_modules/@massds/mayflower-assets/scss/00-base:./node_modules/@massds/mayflower-assets/scss/00-base/mixins:./node_modules/@massds/mayflower-assets/scss/01-atoms:./node_modules/@massds/mayflower-assets/scss/02-molecules:./node_modules/@massds/mayflower-assets/scss/03-organisms:./node_modules/@massds/mayflower-assets/scss/04-templates/./node_modules/@massds/mayflower-assets/scss/05-dataviz:./node_modules/@massds/mayflower-assets/scss/08-print:./node_modules/bourbon/app/assets/stylesheets
+SASS_PATH=./node_modules/@massds/mayflower-assets/scss:./node_modules/@massds/mayflower-assets/scss/00-base:./node_modules/@massds/mayflower-assets/scss/00-base/mixins:./node_modules/@massds/mayflower-assets/scss/01-atoms:./node_modules/@massds/mayflower-assets/scss/02-molecules:./node_modules/@massds/mayflower-assets/scss/03-organisms:./node_modules/@massds/mayflower-assets/scss/04-templates/./node_modules/@massds/mayflower-assets/scss/05-dataviz:./node_modules/@massds/mayflower-assets/scss/08-print
 ```
 
 Many of the components require the file `00-base/_layout.scss` to be included at least once before their use. It's recommended for your project to create a single .scss file that includes all the shared files for your needs. This file should use `@forward` to forward sass modules that your other files need:
@@ -145,7 +145,7 @@ const compileSass = () => {
         path.join(__dirname, 'src/scss/05-dataviz'),
         path.join(__dirname, 'src/scss/08-print'),
         'node_modules',
-      ].concat(bourbon.includePaths),
+      ],
     }).on('error', sass.logError))
     .on('error', (err) => console.log(err))
   }))

assets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massds/mayflower-assets",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Mayflower Assets",
   "main": "index.js",
   "files": [
@@ -26,8 +26,7 @@
   "author": "Massachusetts Digital Services (MDS)",
   "license": "MIT",
   "peerDependencies": {
-    "sass": "^1.26.3",
-    "bourbon": "^4.3.4"
+    "sass": "^1.26.3"
   },
   "devDependencies": {
     "stylelint": "^13.3.3",

assets/scss/00-base/_global.scss

@@ -15,6 +15,4 @@
 
 @forward "color-tokens";
 
-@forward "bourbon" show tint, clearfix;
-
 

assets/scss/00-base/_mixins.scss

@@ -1,23 +1,25 @@
+@forward "mixins/bourbon/clearfix";
+
 @forward "mixins/bourbon-neat/private";
 
 @forward "mixins/bourbon-neat/span-columns";
 
 @forward "mixins/bourbon-neat/shift";
 
-@forward "mixins/bourbon-neat/omega";
-
 @forward "mixins/bourbon-neat/neat-warn";
 
+@forward "mixins/bourbon-neat/omega";
+
 @forward "mixins/ma-aspect-ratio";
 
 @forward "mixins/ma-auto-size";
 
 @forward "mixins/ma-border-decorative";
 
-@forward "mixins/ma-button";
-
 @forward "mixins/ma-button-base";
 
+@forward "mixins/ma-button";
+
 @forward "mixins/ma-button-reset";
 
 @forward "mixins/ma-chevron";
@@ -36,12 +38,12 @@
 
 @forward "mixins/ma-link-arrow";
 
+@forward "mixins/ma-link-underline";
+
 @forward "mixins/ma-link-decorative";
 
 @forward "mixins/ma-link-transition";
 
-@forward "mixins/ma-link-underline";
-
 @forward "mixins/ma-reset-list";
 
 @forward "mixins/ma-reset-rich-text";

assets/scss/00-base/_pikaday.scss

@@ -4,9 +4,7 @@
 
 @use "colors" as *;
 
-// From Bourbon
-
-@use "functions/tint" as *;
+@use "sass:color" as *;
 
 .pika-single {
   font-family: $fonts;
@@ -51,7 +49,7 @@
   }
 
   &:hover {
-    background-color: tint($c-primary, 50%);
+    background-color: mix(#fff, $c-primary, 50%);
     border-radius: 0;
   }
 

assets/scss/00-base/_variables.scss

@@ -1,51 +1,50 @@
-// Change the Neat grid settings.
-$column:                        85px !default;
-$gutter:                        20px !default;
-$column-with-gutter:            $column + $gutter !default;
+$column: 85px;
+$gutter: 20px;
+/// Sets the total number of columns in the grid. Its value can be overridden inside a media query using the `media()` mixin.
+$grid-columns: 12;
+$max-width: 1320px;
+$column-with-gutter:            $column + $gutter;
 // Use @include outer-container() which sets this and centers.
-$layout-sidebar-width:          ($column * 3) + ($gutter * 2) !default;
-$layout-sidebar-width-reversed: 370px !default;
+$layout-sidebar-width:          ($column * 3) + ($gutter * 2);
+$layout-sidebar-width-reversed: 370px;
 
-$l-max-content-width:           820px !default;
-$l-max-content-wrapper:         1240px !default;
-$max-width:                     1320px !default;
+$l-max-content-width:           820px;
+$l-max-content-wrapper:         1240px;
 
-$header-mobile-controls-height: 40px !default;
+$header-mobile-controls-height: 40px;
 
 // These variables control the vertical spacing in MF.
 // No vertical spacing should exceed 70px.
-$standard-spacing--large:    70px !default;
-$standard-spacing--medium:   55px !default;
-$standard-spacing--small:    45px !default;
-$standard-spacing--xsmall:   24px !default;
-$standard-spacing--xxsmall:  12px !default;
-$standard-spacing--xxxsmall: 6px !default;
+$standard-spacing--large:    70px;
+$standard-spacing--medium:   55px;
+$standard-spacing--small:    45px;
+$standard-spacing--xsmall:   24px;
+$standard-spacing--xxsmall:  12px;
+$standard-spacing--xxxsmall: 6px;
 
 //letter-spacing for Texta
-$letter-spacing-large:   .1em !default;
-$letter-spacing-medium:  .05em !default;
-$letter-spacing-small:   .02em !default;
-$letter-spacing-default: 0 !default;
+$letter-spacing-large:   .1em;
+$letter-spacing-medium:  .05em;
+$letter-spacing-small:   .02em;
+$letter-spacing-default: 0;
 
 // Close icon
 // The close icon is not an actual icon. It is the multiplication
 // symbol displayed in a pseudo element. To display properly,
 // the following string should be used in the CSS `content` setting.
-$close-icon: '\00d7' !default;
+$close-icon: '\00d7';
 
 
 // font families
-$fonts:      "Texta", "Helvetica", "Arial", sans-serif !default;
-$fonts-mono: "Source Code Pro", "Monaco", monospace !default;
-$fonts-khmer: "Hanuman" !default;
+$fonts:      "Texta", "Helvetica", "Arial", sans-serif;
+$fonts-mono: "Source Code Pro", "Monaco", monospace;
+$fonts-khmer: "Hanuman";
 
 // Legacy Bourbon Neat Variables
 ///Sets the default layout direction of the grid. Can be `LTR` or `RTL`.
 $default-layout-direction: LTR !default;
 $layout-direction: LTR !default;
 $container-display-table: false !default;
-/// Sets the total number of columns in the grid. Its value can be overridden inside a media query using the `media()` mixin.
-$grid-columns: 12 !default;
 /// When set to true, it sets the box-sizing property of all elements to `border-box`.
 /// @example css - CSS Output
 ///   html {

assets/scss/00-base/mixins/_ma-aspect-ratio.scss

@@ -12,8 +12,6 @@
 
 @use "00-base/variables" as *;
 
-@use "00-base/colors" as *;
-
 @mixin ma-aspect-ratio($width, $height) {
   position: relative;
 

assets/scss/00-base/mixins/_ma-auto-size.scss

@@ -1,7 +1,5 @@
 @use "00-base/variables" as *;
 
-@use "00-base/colors" as *;
-
 @mixin ma-auto-size($min, $max) {
 
   @for $i from $min through $max {

assets/scss/00-base/mixins/_ma-emergency-alert.scss

@@ -2,14 +2,14 @@
 
 @use "00-base/colors" as *;
 
-@use "functions/tint" as *;
+@use "sass:color" as *;
 
 @mixin ma-emergency-alert ($color) {
   color: $c-font-base;
-  background-color: tint($color, 90%);
+  background-color: mix(#fff, $color, 90%);
 
     & + & {
-    border-top-color: tint($color, 50%);
+    border-top-color: mix(#fff, $color, 50%);
   }
 
   .ma__emergency-alert__link {
@@ -31,7 +31,7 @@
       }
 
       svg {
-        fill: tint($c-font-base, 50%);
+        fill: mix(#fff, $c-font-base, 50%);
       }
 
       &:hover {

assets/scss/00-base/mixins/bourbon-neat/_span-columns.scss

@@ -52,13 +52,10 @@
 
 @use "00-base/variables" as *;
 
-@use "00-base/colors" as *;
-
 @use "private" as *;
 
-@use "shift" as *;
-
 @mixin span-columns($span: $columns of $container-columns, $display: block) {
+
   $columns: nth($span, 1);
   $container-columns: container-span($span);
 

assets/scss/00-base/mixins/bourbon/_clearfix.scss

@@ -0,0 +1,26 @@
+@charset "UTF-8";
+
+/// Provides an easy way to include a clearfix for containing floats.
+///
+/// @link https://goo.gl/yP5hiZ
+///
+/// @example scss
+///   .element {
+///     @include clearfix;
+///   }
+///
+///   // CSS Output
+///   .element::after {
+///     clear: both;
+///     content: "";
+///     display: block;
+///   }
+
+@mixin clearfix {
+
+  &::after {
+    clear: both;
+    content: "";
+    display: block;
+  }
+}

assets/scss/01-atoms/_button-tag.scss

@@ -1,5 +1,7 @@
 @use "00-base/global" as *;
 
+@use "sass:color" as *;
+
 .ma__button-tag {
 
   @include ma-button-reset;
@@ -9,7 +11,7 @@
   margin-right: .25em;
   padding: 8px 11px;
   white-space: nowrap;
-  background-color: tint($c-font-link,90%);
+  background-color: mix(#fff, $c-font-link,90%);
   color: $c-font-link;
   font-weight: 700;
 

assets/scss/02-molecules/_callout-link.scss

@@ -1,14 +1,16 @@
 @use "00-base/global" as *;
 
+@use "sass:color" as *;
+
 .ma__callout-link {
   border: 3px solid;
   display:flex;
   width: 100%;
   flex-flow: column wrap;
   justify-content: center;
   padding: 15px 20px;
-  background-color: tint($c-font-link,90%);
-  border-color: tint($c-font-link,50%);
+  background-color: mix(#fff, $c-font-link,90%);
+  border-color: mix(#fff, $c-font-link,50%);
   box-shadow: 0 0.25rem 0.5rem rgba(#000, 0.25);
 
   @media ($bp-small-min) {
@@ -101,7 +103,7 @@
 
   &--white {
     background-color: $c-white;
-    border-color: tint($c-font-detail,70%);
+    border-color: mix(#fff, $c-font-detail,70%);
     box-shadow: 0 0.25rem 0.5rem rgba(#000, 0.25);
   }
 

assets/scss/02-molecules/_emergency-alert.scss

@@ -1,14 +1,16 @@
 @use "00-base/global" as *;
 
+@use "sass:color" as *;
+
 .ma__emergency-alert {
-  background-color: tint($c-warning,90%);
+  background-color: mix(#fff, $c-warning,90%);
   font-size: 1.25rem;
   padding-top: 10px;
   padding-bottom: 10px;
   margin-bottom: 0;
 
   & + & {
-    border-top: 1px solid tint($c-warning, 50%);
+    border-top: 1px solid mix(#fff, $c-warning, 50%);
   }
 
   &__time-stamp {

assets/scss/02-molecules/_error-list.scss

@@ -1,5 +1,7 @@
 @use "00-base/global" as *;
 
+@use "sass:color" as *;
+
 .ma__error-list {
 
   form & {
@@ -68,7 +70,7 @@
 .ma__error-list {
 
   &__container {
-    background-color: tint($c-error, 95%);
+    background-color: mix(#fff, $c-error, 95%);
     border-color: $c-bd-error;
     color: $c-font-error;
   }

assets/scss/02-molecules/_event-teaser.scss

@@ -1,5 +1,7 @@
 @use "00-base/global" as *;
 
+@use "sass:color" as *;
+
 .ma__event-teaser {
   display: flex;
   align-items: flex-start;
@@ -134,7 +136,7 @@
   }
 
   &__graphic {
-    background-color: tint($c-primary-alt, 80%);
+    background-color: mix(#fff, $c-primary-alt, 80%);
   }
 
   &__spacer {