[BD-46] resolve bootstrap conflicts with design tokens (#1800)

* feat: resolve some Bootstrap conflicts with design tokens Co-authored-by: Peter Kulko <[email protected]>
openedx · Feb 17, 2023 · 15bcfc5 · 15bcfc5
1 parent 3ee0dd1
commit 15bcfc5
Show file tree

Hide file tree

Showing 93 changed files with 4,129 additions and 1,874 deletions.
diff --git a/scss/core/bootstrap-override/mixins/_background-variant.scss b/scss/core/bootstrap-override/mixins/_background-variant.scss
@@ -0,0 +1,27 @@
+// stylelint-disable declaration-no-important
+
+// Contextual backgrounds
+
+@mixin bg-variant($parent, $color, $ignore-warning: false) {
+  #{$parent} {
+    background-color: $color !important;
+  }
+
+  a#{$parent},
+  button#{$parent} {
+    @include hover-focus() {
+      background-color: $color !important;
+      filter: brightness(10%);
+    }
+  }
+
+  @include deprecate("The `bg-variant` mixin", "v4.4.0", "v5", $ignore-warning);
+}
+
+@mixin bg-gradient-variant($parent, $color, $ignore-warning: false) {
+  #{$parent} {
+    background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
+  }
+
+  @include deprecate("The `bg-gradient-variant` mixin", "v4.5.0", "v5", $ignore-warning);
+}
diff --git a/scss/core/bootstrap-override/mixins/_text-emphasis.scss b/scss/core/bootstrap-override/mixins/_text-emphasis.scss
@@ -0,0 +1,20 @@
+// stylelint-disable declaration-no-important
+
+// Typography
+
+@mixin text-emphasis-variant($parent, $color, $ignore-warning: false) {
+  #{$parent} {
+    color: $color !important;
+  }
+
+  @if $emphasized-link-hover-darken-percentage != 0 {
+    a#{$parent} {
+      @include hover-focus() {
+        color: $color !important;
+        filter: brightness($emphasized-link-hover-darken-percentage);
+      }
+    }
+  }
+
+  @include deprecate("`text-emphasis-variant()`", "v4.4.0", "v5", $ignore-warning);
+}
diff --git a/scss/core/tokens.css b/scss/core/tokens.css
diff --git a/src/Annotation/_variables.scss b/src/Annotation/_variables.scss
@@ -20,6 +20,21 @@ $annotation-light-bg: var(--pgn-color-annotation-bg-light) !default;
 $annotation-dark-color: var(--pgn-color-annotation-text-dark) !default;
 $annotation-dark-bg: var(--pgn-color-annotation-bg-dark) !default;
 
+$annotation-success-color: var(--pgn-annotation-color-text-success) !default;
+$annotation-success-bg: var(--pgn-annotation-color-bg-success) !default;
+
+$annotation-warning-color: var(--pgn-annotation-color-text-warning) !default;
+$annotation-warning-bg: var(--pgn-annotation-color-bg-warning) !default;
+
+$annotation-error-color: var(--pgn-annotation-color-text-error) !default;
+$annotation-error-bg: var(--pgn-annotation-color-bg-error) !default;
+
+$annotation-light-color: var(--pgn-annotation-color-text-light) !default;
+$annotation-light-bg: var(--pgn-annotation-color-bg-light) !default;
+
+$annotation-dark-color: var(--pgn-annotation-color-text-dark) !default;
+$annotation-dark-bg: var(--pgn-annotation-color-bg-dark) !default;
+
 $annotation-variants: (
   "success": ( "background-color": $annotation-success-bg, "color": $annotation-success-color ),
   "warning": ( "background-color": $annotation-warning-bg, "color": $annotation-warning-color ),

diff --git a/src/Badge/badge-bootstrap.scss b/src/Badge/badge-bootstrap.scss
diff --git a/src/Button/Button.scss b/src/Button/Button.scss
@@ -86,6 +86,14 @@
     opacity: $btn-disabled-opacity;
   }
 
+  &:not(:disabled):not(.disabled):not(.btn-link):active,
+  &:not(:disabled):not(.disabled):not(.btn-link).active,
+  .show > &.dropdown-toggle {
+    color: var(--pgn-btn-active-color, inherit);
+    background-color: var(--pgn-btn-active-bg, inherit);
+    border-color: var(--pgn-btn-active-border-color, transparent);
+  }
+
   // Button Icon Sizes
 
   .btn-icon-before {

diff --git a/src/Button/button-bootstrap.scss b/src/Button/button-bootstrap.scss
diff --git a/src/CloseButton/CloseButton.scss b/src/CloseButton/CloseButton.scss
@@ -1,2 +1,2 @@
 @import "variables";
-@import "close-button-bootstrap";
+@import "~bootstrap/scss/close";
diff --git a/src/CloseButton/close-button-bootstrap.scss b/src/CloseButton/close-button-bootstrap.scss
diff --git a/src/Code/Code.scss b/src/Code/Code.scss
@@ -1,2 +1,2 @@
 @import "variables";
-@import "code-bootstrap";
+@import "~bootstrap/scss/code";
diff --git a/src/Code/code-bootstrap.scss b/src/Code/code-bootstrap.scss
diff --git a/src/DataTable/DataTable.scss b/src/DataTable/DataTable.scss
@@ -88,7 +88,6 @@
   display: flex;
   align-items: flex-start;
 
-  // TODO CSS variables cannot be used as media breakpoints
   @media (max-width: $max-width-xl) {
     overflow-x: scroll;
   }

diff --git a/src/Fieldset/Fieldset.scss b/src/Fieldset/Fieldset.scss
@@ -1,5 +1,5 @@
 .paragon-fieldset {
-  margin-bottom: calc($spacer * 1.5);
+  margin-bottom: calc(#{$spacer} * 1.5);
 
   .form-control {
     height: auto;

diff --git a/src/Modal/_ModalDialog.scss b/src/Modal/_ModalDialog.scss
@@ -138,7 +138,6 @@
   &::before {
     content: "";
     background-color: transparent;
-    // TODO needs a decision
     background-image: linear-gradient(#605C5C, #B8BEBE, transparent 50%);
     display: block;
     height: 20px;
@@ -154,7 +153,6 @@
   &::after {
     content: "";
     background-color: transparent;
-    // TODO needs a decision
     background-image:
       linear-gradient(
         360deg,