fix: add missed border utilities

openedx · Feb 16, 2023 · e292ff1 · e292ff1
1 parent c226353
commit e292ff1
Show file tree

Hide file tree

Showing 6 changed files with 145 additions and 3 deletions.
diff --git a/scss/core/_utilities.scss b/scss/core/_utilities.scss
@@ -1,7 +1,6 @@
 // explicitly import bootstrap's utility module to exclude some modules which do not work
 // with CSS variables, they are instead overriden by Paragon
 @import "~bootstrap/scss/utilities/align";
-@import "~bootstrap/scss/utilities/borders";
 @import "~bootstrap/scss/utilities/clearfix";
 @import "~bootstrap/scss/utilities/display";
 @import "~bootstrap/scss/utilities/embed";

diff --git a/scss/core/bootstrap-override/_utilities.scss b/scss/core/bootstrap-override/_utilities.scss
@@ -1,3 +1,4 @@
 @import "utilities/spacing";
 @import "utilities/text";
 @import "utilities/background";
+@import "utilities/borders";
diff --git a/scss/core/bootstrap-override/utilities/_borders.scss b/scss/core/bootstrap-override/utilities/_borders.scss
@@ -0,0 +1,46 @@
+//
+// Border
+//
+
+.border { border: $border-width solid $border-color !important; }
+.border-top { border-top: $border-width solid $border-color !important; }
+.border-right { border-right: $border-width solid $border-color !important; }
+.border-bottom { border-bottom: $border-width solid $border-color !important; }
+.border-left { border-left: $border-width solid $border-color !important; }
+
+.border-0 { border: 0 !important; }
+.border-top-0 { border-top: 0 !important; }
+.border-right-0 { border-right: 0 !important; }
+.border-bottom-0 { border-bottom: 0 !important; }
+.border-left-0 { border-left: 0 !important; }
+
+.border-white {
+  border-color: $white !important;
+}
+
+//
+// Border-radius
+//
+
+.rounded-sm {
+  border-radius: $border-radius-sm !important;
+}
+
+.rounded {
+  border-radius: $border-radius !important;
+}
+
+.rounded-top {
+  border-top-left-radius: $border-radius !important;
+  border-top-right-radius: $border-radius !important;
+}
+
+.rounded-right {
+  border-top-right-radius: $border-radius !important;
+  border-bottom-right-radius: $border-radius !important;
+}
+
+.rounded-bottom {
+  border-bottom-right-radius: $border-radius !important;
+  border-bottom-left-radius: $border-radius !important;
+}
diff --git a/scss/core/css/utility-classes.css b/scss/core/css/utility-classes.css
@@ -1,3 +1,51 @@
+.bg-accent-a {
+  background-color: #00BBF9FF !important;
+}
+
+a.bg-accent-a:hover,
+a.bg-accent-a:focus,
+button.bg-accent-a:hover,
+button.bg-accent-a:focus {
+  background-color: #0095C6FF !important;
+}
+
+.text-accent-a {
+  color: #00BBF9FF !important;
+}
+
+a.text-accent-a:hover,
+a.text-accent-a:focus {
+  color: #0082ADFF !important;
+}
+
+.border-accent-a {
+  border-color: #00BBF9FF !important;
+}
+
+.bg-accent-b {
+  background-color: #FFEE88FF !important;
+}
+
+a.bg-accent-b:hover,
+a.bg-accent-b:focus,
+button.bg-accent-b:hover,
+button.bg-accent-b:focus {
+  background-color: #FFE755FF !important;
+}
+
+.text-accent-b {
+  color: #FFEE88FF !important;
+}
+
+a.text-accent-b:hover,
+a.text-accent-b:focus {
+  color: #FFE33BFF !important;
+}
+
+.border-accent-b {
+  border-color: #FFEE88FF !important;
+}
+
 .bg-gray-100 {
   background-color: #EBEBEBFF !important;
 }

diff --git a/tokens/build/utility-classes.css b/tokens/build/utility-classes.css
@@ -1,3 +1,51 @@
+.bg-accent-a {
+  background-color: #00BBF9FF !important;
+}
+
+a.bg-accent-a:hover,
+a.bg-accent-a:focus,
+button.bg-accent-a:hover,
+button.bg-accent-a:focus {
+  background-color: #0095C6FF !important;
+}
+
+.text-accent-a {
+  color: #00BBF9FF !important;
+}
+
+a.text-accent-a:hover,
+a.text-accent-a:focus {
+  color: #0082ADFF !important;
+}
+
+.border-accent-a {
+  border-color: #00BBF9FF !important;
+}
+
+.bg-accent-b {
+  background-color: #FFEE88FF !important;
+}
+
+a.bg-accent-b:hover,
+a.bg-accent-b:focus,
+button.bg-accent-b:hover,
+button.bg-accent-b:focus {
+  background-color: #FFE755FF !important;
+}
+
+.text-accent-b {
+  color: #FFEE88FF !important;
+}
+
+a.text-accent-b:hover,
+a.text-accent-b:focus {
+  color: #FFE33BFF !important;
+}
+
+.border-accent-b {
+  border-color: #FFEE88FF !important;
+}
+
 .bg-gray-100 {
   background-color: #EBEBEBFF !important;
 }

diff --git a/tokens/src/utilities/color.json b/tokens/src/utilities/color.json
@@ -2,8 +2,8 @@
   "utilities": [
     {
       "filters": {
-        "type": ["gray", "primary", "secondary", "brand", "success", "info", "warning", "danger", "light", "dark"],
-        "item": ["base","100", "200", "300", "400", "500", "600", "700", "800", "900"]
+        "type": ["gray", "primary", "secondary", "brand", "success", "info", "warning", "danger", "light", "dark", "accent"],
+        "item": ["base","100", "200", "300", "400", "500", "600", "700", "800", "900", "a", "b"]
       },
       "utilityFunctionsToApply": ["bgVariant", "textEmphasisVariant", "borderColor"]
     }