Merge pull request #1107 from Arnei/remove-alcohol

Remove bourbon
opencast · Feb 26, 2025 · 0c3cb20 · 0c3cb20
2 parents ad9401c + 4f0545a
commit 0c3cb20
Show file tree

Hide file tree

Showing 24 changed files with 82 additions and 72 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,7 +13,6 @@
     "@reduxjs/toolkit": "^2.5.1",
     "array-move": "^4.0.0",
     "axios": "^1.7.9",
-    "bourbon": "^7.3.0",
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
     "dompurify": "^3.2.4",

diff --git a/src/styles/base/_variables.scss b/src/styles/base/_variables.scss
@@ -1,5 +1,4 @@
 @use "sass:color";
-@use "../../../node_modules/bourbon/core/bourbon/library/shade";
 
 /**
  * Licensed to The Apereo Foundation under one or more contributor license
@@ -211,22 +210,22 @@ $img-path:                      "/src/img/";
 // Success (Green)
 $state-success-text:             #3c763d;
 $state-success-bg:               #dff0d8;
-$state-success-border:           color.adjust(shade.shade($state-success-bg, 1%), $lightness: -3%);
+$state-success-border:           rgb(211.8267110656, 233.0538934426, 203.0861065574); //Old bourbon code that calculated these values: color.adjust(shade.shade($state-success-bg, 1%), $lightness: -3%);
 
 // Info (Blue)
 $state-info-text:                color.adjust(#31708f, $lightness: 5%);
 $state-info-bg:                  #d9edf7;
-$state-info-border:              color.adjust(shade.shade($state-info-bg, 1%), $lightness: -5%);
+$state-info-border:              rgb(194.6022156398, 224.3725947867, 239.2577843602); //Old bourbon code that calculated these values: color.adjust(shade.shade($state-info-bg, 1%), $lightness: -5%);
 
 // Warning (Yellow)
 $state-warning-text:             #8a6d3b;
 $state-warning-bg:               #fcf8e3;
-$state-warning-border:           color.adjust(shade.shade($state-warning-bg, 1%), $lightness: -5%);
+$state-warning-border:           rgb(245.5470578374, 238.7655993294, 203.1629421626); //Old bourbon code that calculated these values: color.adjust(shade.shade($state-warning-bg, 1%), $lightness: -5%);
 
 // Danger (Red)
 $state-danger-text:              #a94442;
 $state-danger-bg:                #f2dede;
-$state-danger-border:            color.adjust(shade.shade($state-danger-bg, 1%), $lightness: -3%);
+$state-danger-border:            rgb(234.9211137441, 209.1388862559, 209.1388862559); //Old bourbon code that calculated these values: color.adjust(shade.shade($state-danger-bg, 1%), $lightness: -3%);
 
 // Transition
 $alert-transition: color 300ms ease-in;

diff --git a/src/styles/components/_dropdowns.scss b/src/styles/components/_dropdowns.scss
@@ -1,5 +1,4 @@
 @use "sass:color";
-@use "../../../node_modules/bourbon/core/bourbon/library/border-radius";
 @use "../base/variables";
 @use "../base/fontawesome/fa-mixins";
 
@@ -89,7 +88,8 @@
         transition: all 200ms;
         background: variables.$off-white;
         list-style: none;
-        @include border-radius.border-bottom-radius(variables.$main-border-radius);
+        border-bottom-left-radius: variables.$main-border-radius;
+        border-bottom-right-radius: variables.$main-border-radius;
         border: variables.$thin-border-stroke variables.$main-border-color;
         opacity: 1;
         pointer-events: auto;
@@ -125,7 +125,8 @@
             }
 
             &:last-child a {
-                @include border-radius.border-bottom-radius(variables.$main-border-radius);
+                border-bottom-left-radius: variables.$main-border-radius;
+                border-bottom-right-radius: variables.$main-border-radius;
             }
         }
 
@@ -168,7 +169,8 @@
             transition: all 200ms;
             background: variables.$off-white;
             list-style: none;
-            @include border-radius.border-bottom-radius(variables.$main-border-radius);
+            border-bottom-left-radius: variables.$main-border-radius;
+            border-bottom-right-radius: variables.$main-border-radius;
             border: variables.$thin-border-stroke variables.$main-border-color;
             opacity: 1;
             pointer-events: auto;
@@ -214,7 +216,8 @@
                 }
 
                 &:last-child a {
-                    @include border-radius.border-bottom-radius(variables.$main-border-radius);
+                    border-bottom-left-radius: variables.$main-border-radius;
+                    border-bottom-right-radius: variables.$main-border-radius;
                 }
             }
         }
@@ -224,21 +227,26 @@
     &.flipped {
 
         &.active {
-            @include border-radius.border-top-radius(0);
-            @include border-radius.border-bottom-radius(variables.$main-border-radius);
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+            border-bottom-left-radius: variables.$main-border-radius;
+            border-bottom-right-radius: variables.$main-border-radius;
         }
 
         > ul {
             top: auto;
             bottom: 100%;
-            @include border-radius.border-top-radius(variables.$main-border-radius);
-            @include border-radius.border-bottom-radius(0);
+            border-top-left-radius: variables.$main-border-radius;
+            border-top-right-radius: variables.$main-border-radius;
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
         }
     }
 
     // Active State
     &.active {
-        @include border-radius.border-bottom-radius(0);
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
 
         &:after {
             transform: rotate(180deg);

diff --git a/src/styles/components/_footer.scss b/src/styles/components/_footer.scss
@@ -1,5 +1,5 @@
 @use "sass:color";
-@use "../../../node_modules/bourbon/core/bourbon/library/clearfix";
+@use "../mixins/mixins-bourbon";
 @use "../base/variables";
 
 /**
@@ -48,7 +48,7 @@ $footer-background-color: color.adjust(variables.$body-background, $lightness: -
     border-top: 1px solid $footer-border-color;
 
     .feedback-btn {
-        @include clearfix.clearfix();
+        @include mixins-bourbon.clearfix;
         width: 90px;
         position: absolute;
         right: 0;

diff --git a/src/styles/components/_form.scss b/src/styles/components/_form.scss
@@ -1,4 +1,4 @@
-@use "../../../node_modules/bourbon/core/bourbon/library/clearfix";
+@use "../mixins/mixins-bourbon";
 @use "../base/variables";
 
 /**
@@ -24,7 +24,7 @@
 
 
 .form-container {
-    @include clearfix.clearfix();
+    @include mixins-bourbon.clearfix;
     max-width: 100%;
     padding: 0;
     margin: 15px 0;
@@ -60,7 +60,7 @@
     }
 
     .row {
-        @include clearfix.clearfix();
+        @include mixins-bourbon.clearfix;
         display: block;
         width: 100%;
         margin: 15px 0;

diff --git a/src/styles/components/_header.scss b/src/styles/components/_header.scss
@@ -1,6 +1,5 @@
 @use "sass:color";
-@use "../../../node_modules/bourbon/core/bourbon/library/border-radius";
-@use "../../../node_modules/bourbon/core/bourbon/library/clearfix";
+@use "../mixins/mixins-bourbon";
 @use "../base/fontawesome/fa-mixins";
 @use "../base/fontawesome/variables" as variables2;
 @use "../base/variables";
@@ -266,7 +265,8 @@
         width: 80px;
         height: 42px;
         background: #243e55;
-        @include border-radius.border-top-radius(4px);
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
         border: variables.$thin-border-stroke color.adjust(#1e364b, $lightness: -3%);
         border-bottom: none;
         margin: 0 variables.$side-margin;
@@ -438,7 +438,7 @@
 // Example: https://gist.github.com/mattmischuk/b4dcb1e245f00b21c6a6
 
 .page-nav-container {
-    @include clearfix.clearfix();
+    @include mixins-bourbon.clearfix;
     width: 100%;
 
     .page-nav-bar {

diff --git a/src/styles/components/_menu.scss b/src/styles/components/_menu.scss
@@ -1,4 +1,3 @@
-@use "../../../node_modules/bourbon/core/bourbon/library/border-radius";
 @use "../base/fontawesome/fa-mixins";
 @use "../base/fontawesome/variables" as variables2;
 @use "../base/variables";
@@ -33,7 +32,8 @@
     background: #fff;
     border: variables.$thin-border-stroke #c3cbd0;
     border-top: none;
-    @include border-radius.border-bottom-radius(4px);
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
     position: absolute;
     top: 1px;
     left: -1px;

diff --git a/src/styles/components/_multi-select.scss b/src/styles/components/_multi-select.scss
@@ -1,4 +1,4 @@
-@use "../../../node_modules/bourbon/core/bourbon/library/clearfix";
+@use "../mixins/mixins-bourbon";
 @use "../base/fontawesome/fa-mixins";
 @use "../base/fontawesome/variables" as variables2;
 @use "../base/variables";
@@ -27,7 +27,7 @@
 
 
 .multi-select-container {
-    @include clearfix.clearfix();
+    @include mixins-bourbon.clearfix;
 
     select[multiple] {
         margin-top: 10px;

diff --git a/src/styles/components/_simple-box.scss b/src/styles/components/_simple-box.scss
@@ -1,5 +1,4 @@
 @use "sass:color";
-@use "../../../node_modules/bourbon/core/bourbon/library/border-radius";
 @use "../base/variables";
 
 /**
@@ -40,7 +39,8 @@
         display: inline-block;
         background: color.adjust(variables.$body-background, $lightness: -1%);
         border: variables.$thin-border-stroke variables.$main-border-color;
-        @include border-radius.border-top-radius(variables.$main-border-radius);
+        border-top-left-radius: variables.$main-border-radius;
+        border-top-right-radius: variables.$main-border-radius;
         font-size: 13px;
 
         &.active {

diff --git a/src/styles/components/_tables.scss b/src/styles/components/_tables.scss
@@ -1,5 +1,4 @@
 @use "sass:color";
-@use "../../../node_modules/bourbon/core/bourbon/library/border-radius";
 @use "../base/fontawesome/fa-mixins";
 @use "../base/fontawesome/variables" as variables2;
 @use "../base/variables";
@@ -529,7 +528,8 @@
 
             .sub-tbl tr:last-child > td {
                 border-bottom: 1px solid variables.$main-border-color;
-                @include border-radius.border-bottom-radius(0);
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
             }
         }
 

diff --git a/src/styles/components/data-filter/_base.scss b/src/styles/components/data-filter/_base.scss
@@ -1,4 +1,4 @@
-@use "../../../../node_modules/bourbon/core/bourbon/library/clearfix";
+@use "../../mixins/mixins-bourbon";
 
 /**
  * Licensed to The Apereo Foundation under one or more contributor license
@@ -35,5 +35,5 @@ $df-height: 42px;
 // ----------------------------------------
 
 .df-container {
-    @include clearfix.clearfix;
+    @include mixins-bourbon.clearfix;
 }
diff --git a/src/styles/components/data-filter/_filter-profiles.scss b/src/styles/components/data-filter/_filter-profiles.scss
@@ -1,5 +1,4 @@
 @use "sass:color";
-@use "../../../../node_modules/bourbon/core/bourbon/library/border-radius";
 @use "../../base/fontawesome/fa-mixins";
 @use "../../base/fontawesome/variables" as variables2;
 @use "../../base/variables";
@@ -219,7 +218,8 @@
             width: 100%;
             float: right;
             padding: 5px;
-            @include border-radius.border-bottom-radius(variables.$main-border-radius);
+            border-bottom-left-radius: variables.$main-border-radius;
+            border-bottom-right-radius: variables.$main-border-radius;
             background: color.adjust(variables.$body-background, $lightness: -3%);
             border-top: 1px solid variables.$main-border-color;
         }

diff --git a/src/styles/components/modals/_footer.scss b/src/styles/components/modals/_footer.scss
@@ -1,5 +1,4 @@
 @use "sass:color";
-@use "../../../../node_modules/bourbon/core/bourbon/library/border-radius";
 @use "../../base/variables";
 @use "../../mixins/button";
 
@@ -28,7 +27,8 @@
 .modal footer {
     width: 100%;
     height: 60px;
-    @include border-radius.border-bottom-radius(variables.$main-border-radius);
+    border-bottom-left-radius: variables.$main-border-radius;
+    border-bottom-right-radius: variables.$main-border-radius;
     background: color.adjust(variables.$body-background, $lightness: -3%);
     border-top: 1px solid variables.$main-border-color;
 

diff --git a/src/styles/components/modals/_header.scss b/src/styles/components/modals/_header.scss
@@ -1,4 +1,3 @@
-@use "../../../../node_modules/bourbon/core/bourbon/library/border-radius";
 @use "../../base/variables";
 
 /**
@@ -32,7 +31,8 @@
     line-height: 40px;
     background: linear-gradient(to bottom, #fbfbfb, #e8e8e8);
     border-bottom: 1px solid variables.$main-border-color;
-    @include border-radius.border-top-radius(variables.$main-border-radius);
+    border-bottom-left-radius: variables.$main-border-radius;
+    border-bottom-right-radius: variables.$main-border-radius;
     padding: 0 20px;
 
     > h2 {

diff --git a/src/styles/components/modals/_modal-alerts.scss b/src/styles/components/modals/_modal-alerts.scss
@@ -1,4 +1,4 @@
-@use "../../../../node_modules/bourbon/core/bourbon/library/clearfix";
+@use "../../mixins/mixins-bourbon";
 @use "../../base/fontawesome/fa-variables";
 @use "../../base/variables";
 @use "../alerts";
@@ -39,7 +39,7 @@
 }
 
 .modal-alert {
-    @include clearfix.clearfix();
+    @include mixins-bourbon.clearfix;
     display: block;
     padding: 15px 25px;