refactor: replace bourbon with native CSS equivalents

Remove bourbon dependency entirely. Replace its features:
- rem() -> native CSS rem units (all target platforms support them)
- triangle() mixin -> CSS border-based triangle in select.scss
- placeholder() mixin -> native ::placeholder pseudo-element
- $golden variable -> inline golden ratio constant (1.618)

Remove bourbon from gulpfile.js include paths. Update autoprefixer
option from deprecated 'browsers' to 'overrideBrowserslist'.

Author: Mearman

gulpfile.js

@@ -17,13 +17,10 @@ var insert = require('gulp-insert');
 var tsify = require('tsify');
 var clayPackage = require('./package.json');
 
-var sassIncludePaths = [].concat(
-  require('bourbon').includePaths,
-  'src/styles'
-);
+var sassIncludePaths = ['src/styles'];
 
 var autoprefixerOptions = {
-  browsers: ['Android 4', 'iOS 8'],
+  overrideBrowserslist: ['Android 4', 'iOS 8'],
   cascade: false
 };
 

package-lock.json

@@ -57,7 +57,6 @@
     "@types/mocha": "10.0.10",
     "@types/sinon": "21.0.1",
     "autoprefixer": "^10.4.23",
-    "bourbon": "^4.2.6",
     "browserify": "^13.0.0",
     "browserify-istanbul": "^3.0.1",
     "chai": "^3.4.1",

package.json

@@ -1,4 +1,3 @@
-@import "bourbon";
 @import "clay";
 
 html, body {
@@ -198,4 +197,3 @@ label {
   width:100%;
   border-collapse: collapse;
 }
-

src/styles/clay/_base.scss

@@ -1,14 +1,13 @@
-@import "bourbon";
-
-// Bourbon settings
+// Base settings
 $em-base: 17px;
 
 // custom vars
 $base-line-height: 1.4;
-$base-height: rem($base-line-height * $em-base);
+$base-height: $base-line-height * $em-base;
 $border-radius: 0.25rem;
 $item-spacing-v: $base-height / 2;
 $item-spacing-h: 0.75rem;
+$golden: 1.618;
 $small-component-width: $base-height * $golden;
 
 // ---- Colors ------
@@ -36,4 +35,4 @@ $button-padding: 0.6rem;
 $button-padding-ios: 0.5rem;
 
 $box-shadow-small-components: 0 0.1rem 0.1rem $color-gray-1;
-$box-shadow-large-components: 0 rem(3px) rem(15px) rgba(0,0,0,0.4);
+$box-shadow-large-components: 0 3px 15px rgba(0,0,0,0.4);

src/styles/clay/_vars.scss

@@ -1,4 +1,3 @@
-@import "bourbon";
 @import "clay";
 
 .component-checkbox {
@@ -37,7 +36,7 @@
       border-radius: $border-radius;
       width: $base-height;
       height: $base-height;
-      border: rem(2px) solid $color-gray-7;
+      border: 2px solid $color-gray-7;
       flex-shrink: 0;
     }
 
@@ -56,8 +55,8 @@
         width: 0.5rem;
         height: 1rem;
         border: 0 solid $color-white;
-        border-right-width: rem(2px);
-        border-bottom-width: rem(2px);
+        border-right-width: 2px;
+        border-bottom-width: 2px;
 
       }
     }

src/styles/clay/components/checkboxgroup.scss

@@ -32,14 +32,14 @@
     color: $color-white;
     font-size: inherit;
     appearance: none;
-    min-height: $item-spacing-v + ($base-height + 0rem) ;
+    min-height: $item-spacing-v + $base-height ;
 
-    @include placeholder {
+    &::placeholder {
       color: $color-gray-8;
     }
 
     &:focus {
-      @include placeholder {
+      &::placeholder {
         color: $color-gray-6;
       }
       border: none;

src/styles/clay/components/input.scss

@@ -1,4 +1,3 @@
-@import "bourbon";
 @import "clay";
 
 .component-radio {

src/styles/clay/components/radiogroup.scss

@@ -1,4 +1,3 @@
-@import "bourbon";
 @import "clay";
 
 .component-select {
@@ -23,7 +22,11 @@
       right: 0;
       top: 50%;
       margin-top: -0.1rem;
-      @include triangle($triangle-size, $color-orange, down);
+      width: 0;
+      height: 0;
+      border-left: $triangle-size / 2 solid transparent;
+      border-right: $triangle-size / 2 solid transparent;
+      border-top: $triangle-size solid $color-orange;
     }
   }
 

src/styles/clay/components/select.scss

@@ -64,7 +64,7 @@
   }
 
   .input {
-    $track-height: rem(3px);
+    $track-height: 3px;
 
     display: block;
     position: relative;