chore: Remove bourbon dependancy (#5215)

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-4: rgba(0, 0, 0, .05);
+$shadow-color-3: rgba(50, 50, 93, 0.08);
+$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-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
+$swift-ease-out-duration: 0.4s !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',
--apple-system,
-system-ui,
-BlinkMacSystemFont,
-"Segoe UI",
-Roboto,
-"Helvetica Neue",
-Tahoma,
-Arial,
-sans-serif;
+$font-family: 'Inter', -apple-system, 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;