chore: Remove bourbon dependancy (#5215)

app/javascript/dashboard/assets/scss/_animations.scss

@@ -1,11 +1,9 @@
-/* Enter and leave animations can use different */
-/* durations and timing functions.              */
 .slide-fade-enter-active {
-  transition: all .3s $ease-in-cubic;
+  transition: all 0.3s var(--ease-in-cubic);
 }
 
 .slide-fade-leave-active {
-  transition: all .3s $ease-out-cubic;
+  transition: all 0.3s var(--ease-out-cubic);
 }
 
 .slide-fade-enter,
@@ -24,7 +22,7 @@
 
 .conversations-list-enter-active,
 .conversations-list-leave-active {
-  transition: all .25s $ease-out-cubic;
+  transition: all 0.25s var(--ease-out-cubic);
 }
 
 .conversations-list-enter,
@@ -35,11 +33,10 @@
 
 .menu-list-enter-active,
 .menu-list-leave-active {
-  transition: opacity .3s $ease-out-cubic,
+  transition: opacity 0.3s var(--ease-out-cubic),
-    transform .2s $ease-out-cubic;
+    transform 0.2s var(--ease-out-cubic);
 }
 
-
 .menu-list-leave-to {
   opacity: 0;
   position: absolute;
@@ -52,23 +49,24 @@
 }
 
 .slide-up-enter-active {
-  transition: all .3s $ease-in-cubic;
+  transition: all 0.3s var(--ease-in-cubic);
 }
 
 .slide-up-leave-active {
-  transition: all .3s $ease-out-cubic;
+  transition: all 0.3s var(--ease-out-cubic);
 }
 
 .slide-up-enter,
 .slide-up-leave-to {
-  transform: translateY(-$space-medium);
   opacity: 0;
+  transform: translateY(-$space-medium);
 }
 
 .menu-slide-enter-active,
 .menu-slide-leave-active {
   transform: translateY(0);
-  transition: transform 0.25s $ease-in-cubic, opacity 0.15s $ease-in-cubic;
+  transition: transform 0.25s var(--ease-in-cubic),
+    opacity 0.15s var(--ease-in-cubic);
 }
 
 .menu-slide-enter,
@@ -77,13 +75,12 @@
   transform: translateY($space-small);
 }
 
-
 .toast-fade-enter-active {
-  transition: all .3s $ease-in-sine;
+  transition: all 0.3s var(--ease-in-sine);
 }
 
 .toast-fade-leave-active {
-  transition: all .1s $ease-out-sine;
+  transition: all 0.1s var(--ease-out-sine);
 }
 
 .toast-fade-enter,
@@ -93,11 +90,11 @@
 }
 
 .modal-fade-enter-active {
-  transition: all .3s $ease-in-sine;
+  transition: all 0.3s var(--ease-in-sine);
 }
 
 .modal-fade-leave-active {
-  transition: all .1s $ease-out-sine;
+  transition: all 0.1s var(--ease-out-sine);
 }
 
 .modal-fade-enter,
@@ -106,15 +103,15 @@
 }
 
 .network-notification-fade-enter-active {
-  transition: all .1s $ease-in-sine;
+  transition: all 0.1s var(--ease-in-sine);
 }
 
 .network-notification-fade-leave-active {
-  transition: all .1s $ease-out-sine;
+  transition: all 0.1s var(--ease-out-sine);
 }
 
 .network-notification-fade-enter,
 .network-notification-fade-leave-to {
-  transform: translateY(-$space-small);
   opacity: 0;
+  transform: translateY(-$space-small);
 }

app/javascript/dashboard/assets/scss/_layout.scss

@@ -41,24 +41,22 @@ is-closed .app-root {
 
 .view-box {
   @include full-height;
-  @include margin(0);
   @include space-between-column;
 
   height: 100vh;
+  margin: 0;
 }
 
 .view-panel {
-  @include margin($zero);
-  @include padding($space-normal);
-
   flex-direction: column;
+  margin: 0;
   overflow-y: auto;
+  padding: $space-normal;
 }
 
 .content-box {
-  @include padding($space-normal);
-
   overflow: auto;
+  padding: $space-normal;
 }
 
 .back-button {
@@ -91,8 +89,7 @@ is-closed .app-root {
   justify-content: center;
 
   img {
-    @include padding($space-one);
-
     max-width: $space-mega;
+    padding: $space-one;
   }
 }

app/javascript/dashboard/assets/scss/_woot.scss

@@ -1,4 +1,5 @@
 @import 'shared/assets/fonts/inter';
+@import 'shared/assets/stylesheets/animations';
 @import 'shared/assets/stylesheets/colors';
 @import 'shared/assets/stylesheets/spacing';
 @import 'shared/assets/stylesheets/font-size';
@@ -16,7 +17,6 @@
 @import 'date-picker';
 
 @import 'foundation-sites/scss/foundation';
-@import '~bourbon/core/bourbon';
 
 @include foundation-everything($flex: true);
 

app/javascript/dashboard/assets/scss/plugins/_multiselect.scss

@@ -16,11 +16,11 @@
   margin-bottom: var(--space-normal);
 
   &.multiselect--disabled {
-    opacity: .8;
+    opacity: 0.8;
   }
 
   .multiselect--active {
-    >.multiselect__tags {
+    > .multiselect__tags {
       border-color: $color-woot;
     }
   }
@@ -96,9 +96,9 @@
   }
 
   .multiselect__tags {
-    @include margin(0);
     border: 1px solid $color-border;
     border-color: $color-border;
+    margin: 0;
     min-height: 4.4rem;
     padding-top: $zero;
   }
@@ -130,10 +130,10 @@
 
   .multiselect__input {
     @include ghost-input;
-    @include padding($zero);
     font-size: $font-size-small;
     height: 4.4rem;
     margin-bottom: $zero;
+    padding: 0;
   }
 
   .multiselect__single {
@@ -145,7 +145,6 @@
 }
 
 .sidebar-labels-wrap {
-
   &.has-edited,
   &:hover {
     .multiselect {
@@ -154,15 +153,15 @@
   }
 
   .multiselect {
-    >.multiselect__select {
+    > .multiselect__select {
       visibility: hidden;
     }
 
-    >.multiselect__tags {
+    > .multiselect__tags {
       border-color: transparent;
     }
 
-    &.multiselect--active>.multiselect__tags {
+    &.multiselect--active > .multiselect__tags {
       border-color: $color-woot;
     }
   }

app/javascript/dashboard/assets/scss/storybook.scss

@@ -1,4 +1,5 @@
 @import 'shared/assets/fonts/inter';
+@import 'shared/assets/stylesheets/animations';
 @import 'shared/assets/stylesheets/colors';
 @import 'shared/assets/stylesheets/spacing';
 @import 'shared/assets/stylesheets/font-size';
@@ -17,8 +18,6 @@
 @import 'foundation-sites/scss/foundation';
 
 @include foundation-prototype-spacing;
-@import '~bourbon/core/bourbon';
-
 @include foundation-everything($flex: true);
 
 @import 'typography';

app/javascript/dashboard/assets/scss/views/settings/channel.scss

@@ -1,3 +1,5 @@
+$channel-hover-color: rgba(0, 0, 0, 0.1);
+
 .channels {
   margin-top: $space-medium;
 
@@ -7,14 +9,14 @@
 
   .channel {
     @include flex;
-    @include padding($space-normal $zero);
     @include background-white;
     @include border-light;
 
     cursor: pointer;
     flex-direction: column;
     margin: -1px;
-    transition: all 0.200s ease-in;
+    padding: $space-normal $zero;
+    transition: all 0.2s ease-in;
 
     &:last-child {
       @include border-light;
@@ -22,16 +24,16 @@
 
     &:hover {
       border: 1px solid $primary-color;
-      box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
+      box-shadow: 0 2px 8px $channel-hover-color;
       z-index: 999;
     }
 
     &.disabled {
-      opacity: .6;
+      opacity: 0.6;
     }
 
     img {
-      @include margin($space-normal auto);
+      margin: $space-normal auto;
       width: 50%;
     }
 
@@ -43,8 +45,8 @@
     }
 
     p {
-      width: 100%;
       color: $medium-gray;
+      width: 100%;
     }
   }
 }

app/javascript/dashboard/assets/scss/views/settings/inbox.scss

@@ -4,33 +4,33 @@
 
 // Conversation header - Light BG
 .settings-header {
-  @include padding($space-small $space-normal);
   @include background-white;
   @include flex;
   @include flex-align($x: justify, $y: middle);
   border-bottom: 1px solid var(--s-50);
   height: $header-height;
   min-height: $header-height;
+  padding: $space-small $space-normal;
 
   // Resolve Button
   .button {
-    @include margin(0);
+    margin: 0;
   }
 
   // User thumbnail and text
   .page-title {
     @include flex;
     @include flex-align($x: center, $y: middle);
-    @include margin($zero);
+    margin: 0;
   }
 }
 
 .wizard-box {
   .item {
-    @include padding($space-normal $space-normal $space-normal $space-medium);
     @include background-light;
 
     cursor: pointer;
+    padding: $space-normal $space-normal $space-normal $space-medium;
     position: relative;
 
     &::before,
@@ -128,89 +128,27 @@
 
 .wizard-body {
   @include background-white;
-  @include padding($space-medium);
   @include border-light;
   @include full-height();
+  padding: $space-medium;
 
   &.height-auto {
     height: auto;
   }
 }
 
-.inoboxes-list {
-  .inbox-item {
-    @include margin($space-normal);
-    @include flex;
-    @include flex-shrink;
-    @include padding($space-normal $space-normal);
-    @include border-light-bottom();
-
-    background: $color-white;
-    cursor: pointer;
-    flex-direction: column;
-    float: left;
-    min-height: 10rem;
-    width: 20%;
-
-    &:last-child {
-      @include border-nil;
-
-      margin-bottom: $zero;
-    }
-
-    &:hover {
-      @include background-gray;
-
-      .arrow {
-        opacity: 1;
-        transform: translateX($space-small);
-      }
-    }
-
-    .switch {
-      align-self: center;
-      margin-bottom: $zero;
-      margin-right: $space-normal;
-    }
-
-    .item--details {
-      @include padding($space-normal $zero);
-
-      .item--name {
-        font-size: $font-size-large;
-        line-height: 1;
-      }
-
-      .item--sub {
-        font-size: $font-size-small;
-        margin-bottom: 0;
-      }
-    }
-
-    .arrow {
-      align-self: center;
-      color: $medium-gray;
-      font-size: $font-size-small;
-      opacity: 0.7;
-      transform: translateX(0);
-      transition: opacity 0.1s ease-in 0s, transform 0.2s ease-in 0.03s;
-    }
-  }
-}
-
 .settings--content {
-  @include margin($space-small $space-large);
+  margin: $space-small $space-large;
 
   .title {
     font-weight: $font-weight-medium;
   }
 
   .code {
-    @include padding($space-one);
-
     background: $color-background;
     max-height: $space-mega;
     overflow: auto;
+    padding: $space-one;
     white-space: nowrap;
 
     code {
@@ -225,7 +163,7 @@
   text-align: center;
 
   p {
-    @include padding($space-medium);
+    padding: $space-medium;
   }
 
   > a > img {

app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss

@@ -1,5 +1,4 @@
 @keyframes left-shift-animation {
-
   0%,
   100% {
     transform: translateX(0);
@@ -13,15 +12,15 @@
 .conversation {
   @include flex;
   @include flex-shrink;
-  @include padding(0 0 0 $space-normal);
   border-bottom: 1px solid transparent;
   border-left: $space-micro solid transparent;
   border-top: 1px solid transparent;
   cursor: pointer;
+  padding: 0 0 0 $space-normal;
   position: relative;
 
   &.active {
-    animation: left-shift-animation .25s $swift-ease-out-function;
+    animation: left-shift-animation 0.25s $swift-ease-out-function;
     background: $color-background;
     border-bottom-color: $color-border-light;
     border-left-color: $color-woot;
@@ -31,7 +30,7 @@
       border-top-color: transparent;
     }
 
-    +.conversation .conversation--details {
+    + .conversation .conversation--details {
       border-top-color: transparent;
     }
   }
@@ -48,13 +47,12 @@
     }
   }
 
-
   .conversation--details {
-    @include margin(0 0 0 $space-one);
     @include border-light-bottom;
     @include border-light-top;
-    @include padding($space-slab 0);
     border-bottom-color: transparent;
+    margin: 0 0 0 $space-one;
+    padding: $space-slab 0;
   }
 
   .conversation--user {

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -1,6 +1,8 @@
+// scss-lint:disable MergeableSelector
+
 @mixin bubble-with-types {
-  @include padding($space-small $space-normal);
+  padding: $space-small $space-normal;
-  @include margin($zero);
+  margin: 0;
   background: $color-woot;
   border-radius: $space-one;
   color: var(--white);
@@ -37,7 +39,11 @@
     }
 
     &::before {
-      background-image: linear-gradient(-180deg, transparent 3%, $color-heading 130%);
+      background-image: linear-gradient(
+        -180deg,
+        transparent 3%,
+        $color-heading 130%
+      );
       bottom: 0;
       content: '';
       height: 20%;
@@ -75,16 +81,15 @@
   }
 
   .conversations-list {
-    @include flex-weight(1);
     @include scroll-on-hover;
+    flex: 1 1;
   }
 
   .chat-list__top {
     @include flex;
-    @include padding($zero $zero $space-micro $zero);
-
     align-items: center;
     justify-content: space-between;
+    padding: $zero $zero $space-micro;
 
     .page-title {
       margin-bottom: $zero;
@@ -92,13 +97,13 @@
     }
 
     .status--filter {
-      @include padding($zero null $zero $space-normal);
-      @include margin($zero);
       background-color: $color-background-light;
       border: 1px solid $color-border;
       float: right;
       font-size: $font-size-mini;
       height: $space-medium;
+      margin: 0;
+      padding: $zero null $zero $space-normal;
       width: auto;
     }
   }
@@ -110,19 +115,19 @@
 
 .conversation-panel {
   @include flex;
-  @include flex-weight(1 1 1px);
+  flex: 1 1 1px;
-  @include margin($zero);
   flex-direction: column;
   height: 100%;
+  margin: 0;
   overflow-y: auto;
   padding-bottom: var(--space-normal);
   position: relative;
 }
 
-.conversation-panel>li {
+.conversation-panel > li {
   @include flex;
   @include flex-shrink;
-  @include margin($zero $zero $space-micro);
+  margin: $zero $zero $space-micro;
   position: relative;
 
   &:first-child {
@@ -134,11 +139,11 @@
   }
 
   &.unread--toast {
-    +.right {
+    + .right {
       margin-bottom: var(--space-micro);
     }
 
-    +.left {
+    + .left {
       margin-bottom: 0;
     }
 
@@ -165,9 +170,7 @@
     }
   }
 
-
   &.left {
-
     .bubble {
       @include border-normal;
       background: $white;
@@ -198,10 +201,9 @@
           color: $color-primary-dark;
         }
       }
-
     }
 
-    +.right {
+    + .right {
       margin-top: $space-one;
 
       .bubble {
@@ -209,8 +211,8 @@
       }
     }
 
-    +.unread--toast {
+    + .unread--toast {
-      +.right {
+      + .right {
         margin-top: $space-one;
 
         .bubble {
@@ -218,7 +220,7 @@
         }
       }
 
-      +.left {
+      + .left {
         margin-top: 0;
       }
     }
@@ -264,7 +266,7 @@
       }
     }
 
-    +.left {
+    + .left {
       margin-top: $space-one;
 
       .bubble {
@@ -272,8 +274,8 @@
       }
     }
 
-    +.unread--toast {
+    + .unread--toast {
-      +.left {
+      + .left {
         margin-top: $space-one;
 
         .bubble {
@@ -281,11 +283,10 @@
         }
       }
 
-      +.right {
+      + .right {
         margin-top: 0;
       }
     }
-
   }
 
   &.center {
@@ -293,9 +294,8 @@
   }
 
   .wrap {
-    @include margin($zero $space-normal);
-
     --bubble-max-width: 49.6rem;
+    margin: $zero $space-normal;
     max-width: Min(var(--bubble-max-width), 84%);
 
     .sender--name {
@@ -320,7 +320,8 @@
     font-size: var(--font-size-small);
     justify-content: center;
     margin: var(--space-smaller) 0;
-    padding: var(--space-smaller) var(--space-micro) var(--space-smaller) var(--space-one);
+    padding: var(--space-smaller) var(--space-micro) var(--space-smaller)
+      var(--space-one);
 
     .is-text {
       display: inline-flex;
@@ -371,7 +372,6 @@
 }
 
 .left .bubble .text-content {
-
   h1,
   h2,
   h3,
@@ -400,7 +400,6 @@
 }
 
 .right .bubble .text-content {
-
   h1,
   h2,
   h3,

app/javascript/dashboard/assets/scss/widgets/_forms.scss

@@ -1,5 +1,22 @@
+// scss-lint:disable QualifyingElement
+
 .error {
-  #{$all-text-inputs},
+  input[type='color'],
+  input[type='date'],
+  input[type='datetime'],
+  input[type='datetime-local'],
+  input[type='email'],
+  input[type='month'],
+  input[type='number'],
+  input[type='password'],
+  input[type='search'],
+  input[type='tel'],
+  input[type='text'],
+  input[type='time'],
+  input[type='url'],
+  input[type='week'],
+  input:not([type]),
+  textarea,
   select,
   .multiselect > .multiselect__tags {
     @include thin-border(var(--r-400));

app/javascript/dashboard/assets/scss/widgets/_login.scss

@@ -30,11 +30,9 @@
   .login-box {
     @include background-white;
     @include border-normal;
-    @include border-top-radius($space-smaller);
-    @include border-right-radius($space-smaller);
-    @include border-bottom-radius($space-smaller);
-    @include border-left-radius($space-smaller);
     @include elegant-card;
+
+    border-radius: $space-smaller;
     padding: $space-large;
 
     label {
@@ -61,7 +59,7 @@
     font-size: $font-size-default;
     padding: $space-medium;
 
-    >a {
+    > a {
       font-weight: $font-weight-bold;
     }
   }

app/javascript/dashboard/assets/scss/widgets/_modal.scss

@@ -30,7 +30,7 @@
 }
 
 .page-top-bar {
-  @include padding($space-large $space-large $zero);
+  padding: $space-large $space-large $zero;
 
   img {
     max-height: 6rem;
@@ -53,8 +53,8 @@
   }
 
   .content-box {
-    @include padding($zero);
     height: auto;
+    padding: 0;
   }
 
   h2 {
@@ -64,29 +64,29 @@
   }
 
   p {
-    @include margin($zero);
-    @include padding($zero);
     font-size: $font-size-small;
+    margin: 0;
+    padding: 0;
   }
 
   .content {
-    @include padding($space-large);
+    padding: $space-large;
   }
 
   form,
   .modal-content {
-    @include padding($space-large);
     align-self: center;
+    padding: $space-large;
 
     a {
-      @include padding($space-normal);
+      padding: $space-normal;
     }
   }
 
   .modal-footer {
     @include flex;
     @include flex-align($x: flex-start, $y: middle);
-    @include padding($space-small $zero);
+    padding: $space-small $zero;
 
     button {
       font-size: $font-size-small;
@@ -98,10 +98,10 @@
   }
 
   .delete-item {
-    @include padding($space-large);
+    padding: $space-large;
 
     button {
-      @include margin($zero);
+      margin: 0;
     }
   }
 }

app/javascript/dashboard/assets/scss/widgets/_reply-box.scss

@@ -1,14 +1,12 @@
 .reply-box {
-  transition: box-shadow .35s $swift-ease-out-function,
+  transition: box-shadow 0.35s $swift-ease-out-function,
     height 2s $swift-ease-out-function;
 
-
   &.is-focused {
     box-shadow: var(--shadow);
   }
 
   .reply-box__top {
-
     .icon {
       color: $medium-gray;
       cursor: pointer;
@@ -20,7 +18,6 @@
       }
     }
 
-
     .attachment {
       cursor: pointer;
       margin-right: $space-one;
@@ -37,13 +34,12 @@
       resize: none;
     }
 
-    >textarea {
+    > textarea {
       @include ghost-input();
-      @include margin(0);
       background: transparent;
-      // Override min-height : 50px in foundation
+      margin: 0;
-      //
       max-height: $space-mega * 2.4;
+      // Override min-height : 50px in foundation
       min-height: 4.8rem;
       padding: var(--space-normal) 0 0;
       resize: none;
@@ -56,10 +52,9 @@
     .reply-box__top {
       background: var(--y-50);
 
-      >input {
+      > input {
         background: var(--y-50);
       }
     }
   }
-
 }

app/javascript/dashboard/assets/scss/widgets/_report.scss

@@ -1,9 +1,10 @@
 .report-card {
-  @include padding($space-normal $space-small $space-normal $space-two);
-  @include margin($zero);
-  cursor: pointer;
   @include custom-border-top(3px, transparent);
 
+  cursor: pointer;
+  margin: 0;
+  padding: $space-normal $space-small $space-normal $space-two;
+
   &.active {
     @include custom-border-top(3px, $color-woot);
     @include background-white;
@@ -14,12 +15,12 @@
   }
 
   .heading {
-    @include margin($zero);
+    align-items: center;
-    font-size: $font-size-small;
-    font-weight: $font-weight-bold;
     color: $color-heading;
     display: flex;
-    align-items: center;
+    font-size: $font-size-small;
+    font-weight: $font-weight-bold;
+    margin: 0;
   }
 
   .info-icon {
@@ -52,31 +53,31 @@
   }
 
   .desc {
-    @include margin($zero);
     font-size: $font-size-small;
+    margin: 0;
     text-transform: capitalize;
   }
 }
 
 .report-bar {
-  @include margin(-1px $zero);
   @include background-white;
   @include border-light;
-  @include padding($space-small $space-medium);
+  margin: -1px $zero;
+  padding: $space-small $space-medium;
 
   .chart-container {
     @include flex;
-    flex-direction: column;
     @include flex-align(center, middle);
+    flex-direction: column;
 
     div {
       width: 100%;
     }
 
     .empty-state {
-      @include margin($space-jumbo);
-      font-size: $font-size-default;
       color: $color-gray;
+      font-size: $font-size-default;
+      margin: $space-jumbo;
     }
 
     .business-hours {

app/javascript/dashboard/assets/scss/widgets/_search-box.scss

@@ -1,17 +1,18 @@
 .search {
   @include flex;
   @include flex-align($x: left, $y: middle);
-  @include padding($space-one $space-normal);
   @include flex-shrink;
-  transition: all .3s $ease-in-out-quad;
+
+  padding: $space-one $space-normal;
+  transition: all 0.3s var(--ease-in-out-quad);
 
   > .icon {
-    font-size: $font-size-medium;
     color: $medium-gray;
+    font-size: $font-size-medium;
   }
 
   > input {
     @include ghost-input();
-    @include margin(0);
+    margin: 0;
   }
 }

app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss

@@ -11,8 +11,8 @@
   //logo
   .logo {
     img {
-      @include padding($woot-logo-padding);
       max-height: 108px;
+      padding: $woot-logo-padding;
     }
   }
 
@@ -36,9 +36,9 @@
 .bottom-nav {
   @include flex;
   @include space-between-column;
-  @include padding($space-one $space-normal $space-one $space-one);
   @include border-normal-top;
   flex-direction: column;
+  padding: $space-one $space-normal $space-one $space-one;
   position: relative;
 
   &:hover {

app/javascript/dashboard/assets/scss/widgets/_snackbar.scss

@@ -11,7 +11,6 @@
 }
 
 .ui-snackbar {
-  @include padding($space-slab $space-medium);
   @include shadow;
   background-color: $woot-snackbar-bg;
   border-radius: $space-smaller;
@@ -20,6 +19,7 @@
   max-width: 40rem;
   min-height: 3rem;
   min-width: 24rem;
+  padding: $space-slab $space-medium;
   text-align: left;
 }
 
@@ -34,12 +34,12 @@
   padding-left: 3rem;
 
   button {
-    @include margin(0);
-    @include padding(0);
     background: none;
     border: 0;
     color: $woot-snackbar-button;
     font-size: $font-size-small;
+    margin: 0;
+    padding: 0;
     text-transform: uppercase;
   }
 }

app/javascript/dashboard/assets/scss/widgets/_status-bar.scss

@@ -1,11 +1,10 @@
 .status-bar {
   @include flex;
-  flex-direction: column;
   @include flex-align($x: center, $y: middle);
   background: lighten($warning-color, 36%);
-  // @include elegant-card();
+  flex-direction: column;
-  @include margin($zero);
+  margin: 0;
-  @include padding($space-normal $space-smaller);
+  padding: $space-normal $space-smaller;
 
   .message {
     font-weight: $font-weight-medium;
@@ -13,7 +12,7 @@
   }
 
   .button {
-    @include margin($space-smaller $zero $zero);
+    margin: $space-smaller $zero $zero;
     padding: $space-small $space-normal;
   }
 
@@ -23,14 +22,18 @@
     .button {
       // Default and disabled states
       &,
-      &.disabled, &[disabled],
+      &.disabled,
-      &.disabled:hover, &[disabled]:hover,
+      &[disabled],
-      &.disabled:focus, &[disabled]:focus {
+      &.disabled:hover,
+      &[disabled]:hover,
+      &.disabled:focus,
+      &[disabled]:focus {
         background-color: $alert-color;
         color: $color-white;
       }
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         background-color: darken($alert-color, 7%);
         color: $color-white;
       }

app/javascript/dashboard/assets/scss/widgets/_tabs.scss

@@ -7,12 +7,12 @@
 }
 
 .tabs {
-  @include padding($zero $space-normal);
   border-left-width: 0;
   border-right-width: 0;
   border-top-width: 0;
   display: flex;
   min-width: var(--space-mega);
+  padding: $zero $space-normal;
 }
 
 .tabs--with-scroll {
@@ -46,8 +46,8 @@
 }
 
 .tabs-title {
-  @include margin($zero $space-slab);
   flex-shrink: 0;
+  margin: $zero $space-slab;
 
   .badge {
     background: $color-background;
@@ -75,14 +75,15 @@
   }
 
   a {
-    @include position(relative, 1px null null null);
     align-items: center;
     border-bottom: 2px solid transparent;
     color: $medium-gray;
     display: flex;
     flex-direction: row;
     font-size: $font-size-small;
-    transition: border-color .15s $swift-ease-out-function;
+    position: relative;
+    top: 1px;
+    transition: border-color 0.15s $swift-ease-out-function;
   }
 
   &.is-active {

app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss

@@ -15,7 +15,7 @@ table {
     }
 
     td {
-      @include padding($space-one $space-small);
+      padding: $space-one $space-small;
     }
   }
 }
@@ -54,6 +54,6 @@ table {
   }
 
   .button {
-    @include margin($zero);
+    margin: 0;
   }
 }

app/javascript/shared/assets/stylesheets/animations.scss

@@ -0,0 +1,11 @@
+// Taken from thoughtbot/bourbon library timing functions
+
+:root {
+  --ease-in-cubic: cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
+
+  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
+
+  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+}

app/javascript/widget/assets/scss/_mixins.scss

@@ -1,8 +1,8 @@
 // scss-lint:disable PseudoElement SpaceBeforeBrace VendorPrefix
 $shadow-color-1: rgba(50, 50, 93, 0.08);
 $shadow-color-2: rgba(0, 0, 0, 0.07);
-$shadow-color-3: rgba(50, 50, 93, .08);
+$shadow-color-3: rgba(50, 50, 93, 0.08);
-$shadow-color-4: rgba(0, 0, 0, .05);
+$shadow-color-4: rgba(0, 0, 0, 0.05);
 
 $color-shadow-medium: rgba(50, 50, 93, 0.08);
 $color-shadow-light: rgba(50, 50, 93, 0.04);
@@ -10,7 +10,8 @@ $color-shadow-large: rgba(50, 50, 93, 0.25);
 $color-shadow-outline: rgba(66, 153, 225, 0.5);
 
 @mixin normal-shadow {
-  box-shadow: 0 $space-small $space-normal $shadow-color-1, 0 $space-smaller $space-slab $shadow-color-2;
+  box-shadow: 0 $space-small $space-normal $shadow-color-1,
+    0 $space-smaller $space-slab $shadow-color-2;
 }
 
 @mixin light-shadow {
@@ -19,19 +20,19 @@ $color-shadow-outline: rgba(66, 153, 225, 0.5);
 
 @mixin placeholder {
   &::-webkit-input-placeholder {
-    @content
+    @content;
   }
 
   &:-moz-placeholder {
-    @content
+    @content;
   }
 
   &::-moz-placeholder {
-    @content
+    @content;
   }
 
   &:-ms-input-placeholder {
-    @content
+    @content;
   }
 }
 
@@ -40,25 +41,21 @@ $color-shadow-outline: rgba(66, 153, 225, 0.5);
     0 1px 5px 1px $color-shadow-light;
 }
 
-
 @mixin shadow-medium {
   box-shadow: 0 4px 24px 4px $color-shadow-medium,
     0 2px 16px 2px $color-shadow-light;
 }
 
-
 @mixin shadow-large {
   box-shadow: 0 10px 15px -16px $color-shadow-medium,
     0 4px 6px -8px $color-shadow-light;
 }
 
-
 @mixin shadow-big {
   box-shadow: 0 20px 25px -20px $color-shadow-medium,
     0 10px 10px -10px $color-shadow-light;
 }
 
-
 @mixin shadow-mega {
   box-shadow: 0 25px 50px -12px $color-shadow-big;
 }

app/javascript/widget/assets/scss/_variables.scss

@@ -65,8 +65,8 @@ $spinkit-size: 1.6rem !default;
 $woot-snackbar-bg: #323232;
 $woot-snackbar-button: #ffeb3b;
 
-$swift-ease-out-duration: .4s !default;
+$swift-ease-out-duration: 0.4s !default;
-$swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
+$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
 $swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
 
 $border-radius: 0.1875px;
@@ -74,20 +74,8 @@ $line-height: 1;
 $footer-height: 11.2rem;
 $header-expanded-height: $space-medium * 10;
 
-$font-family: 'Inter',
+$font-family: 'Inter', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI',
--apple-system,
+  Roboto, 'Helvetica Neue', Tahoma, Arial, sans-serif;
-system-ui,
-BlinkMacSystemFont,
-"Segoe UI",
-Roboto,
-"Helvetica Neue",
-Tahoma,
-Arial,
-sans-serif;
 
 // Break points
 $break-point-medium: 667px;
-
-// Timing functions
-
-$ease-in-cubic: cubic-bezier(.17, .67, .83, .67);

app/javascript/widget/assets/scss/woot.scss

@@ -1,3 +1,5 @@
+@import 'shared/assets/stylesheets/animations';
+
 @import 'reset';
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
@@ -45,7 +47,6 @@ body {
   cursor: pointer;
 }
 
-
 .message-content {
   ul {
     list-style: disc;

app/javascript/widget/components/UnreadMessageList.vue

@@ -111,7 +111,7 @@ export default {
     border: 0;
     font-weight: $font-weight-bold;
     font-size: $font-size-medium;
-    transition: all 0.3s $ease-in-cubic;
+    transition: all 0.3s var(--ease-in-cubic);
     margin-left: $space-smaller;
     padding-right: $space-one;
 
@@ -127,7 +127,7 @@ export default {
     border: 0;
     font-weight: $font-weight-medium;
     font-size: $font-size-mini;
-    transition: all 0.3s $ease-in-cubic;
+    transition: all 0.3s var(--ease-in-cubic);
     margin-bottom: $space-slab;
     border-radius: $space-normal;
 

package.json

@@ -30,7 +30,6 @@
     "axios": "^0.21.2",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-vue-jsx": "^3.7.0",
-    "bourbon": "^6.0.0",
     "chart.js": "~2.9.4",
     "core-js": "3.11.0",
     "date-fns": "2.21.1",

yarn.lock

@@ -4546,11 +4546,6 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-bourbon@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/bourbon/-/bourbon-6.0.0.tgz#41ad318371128888261a390bebe0e9e89daaa01e"
-  integrity sha512-Skds0R1+GY3c1oBddh9BggYVq39Uo4ySvW33zttPk+4+nfGYpbZqwaDwENkbtV7PYhCk0ctTFkzfTNFv5365ag==
-
 boxen@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/boxen/-/boxen-5.1.2.tgz#788cb686fc83c1f486dfa8a40c68fc2b831d2b50"