refactor: refactoring buttons variants

edx · Dec 27, 2023 · 1488f36 · 1488f36
1 parent 5fd2361
commit 1488f36
Show file tree

Hide file tree

Showing 15 changed files with 130 additions and 348 deletions.
diff --git a/paragon/_overrides.scss b/paragon/_overrides.scss
@@ -1,3 +1,4 @@
+@import 'variables';
 // This file is included after all of Bootstrap. Any customization that can't
 // be made using variable definitions should be done here.
 
@@ -7,7 +8,7 @@
   color: theme-color("gray");
   opacity: 1;
 
-  @include hover {
+  &:hover {
     color: theme-color("gray");
   }
 }
@@ -16,11 +17,11 @@
 // Badges
 
 .badge {
-  font-family: $font-family-sans-serif;
+  font-family: var(--pgn-typography-font-family-sans-serif);
   line-height: 1.25rem;
 
   .badge-info {
-    --pgn-badge-bg-color: #{$badge-info-bg};
+    --pgn-badge-bg-color: var(--pgn-color-badge-bg-info);
   }
 }
 
@@ -46,186 +47,9 @@
   }
 }
 
-@each $color, $value in $theme-colors {
-  .btn-outline-#{$color} {
-    background: $white;
-    border-color: $light-300;
-
-    &:not(:disabled):not(.disabled) {
-      &:hover, &:active, &.hover, &.active {
-        background: $value;
-        border-color: $value;
-        color: $white;
-      }
-
-      &:focus, &.focus {
-        background: $white;
-        color: $value;
-        border-color: $light-300;
-
-        &:before {
-          border-color: $value;
-        }
-      }
-    }
-
-    &:disabled, &.disabled {
-      border-color: $light-300;
-      background-color: $white;
-    }
-  }
-
-  .btn-#{$color} {
-    &:hover {
-      border-color: transparent;
-    }
-
-    &.focus, &:focus {
-      background: $value;
-
-      &::before {
-        border-color: $value;
-      }
-    }
-  }
-}
-
-.btn-tertiary:not(:disabled):not(.disabled) {
-  &:focus, &.focus {
-    background: $btn-tertiary-bg;
-  }
-}
-
-.btn-primary:not(:disabled):not(.disabled) {
-  &:hover, &:active, &.hover, &.active {
-    background: $primary-300;
-    border-color: transparent;
-    color: $white;
-  }
-
-  &:focus, &.focus {
-    background: $primary-500;
-  }
-}
-
-.btn-inverse-outline-primary {
-  background: transparent;
-  color: $white;
-  border-color: $gray-500;
-
-  &:not(:disabled):not(.disabled) {
-    &:hover, &:active, &.hover, &.active {
-      background: $white;
-      border-color: transparent;
-      color: $primary;
-    }
-
-    &:focus, &.focus {
-      background: transparent;
-      border-color: $gray-500;
-      color: $white;
-
-      &:before {
-        border-color: $white;
-      }
-    }
-  }
-}
-
-.btn-inverse-outline-brand {
-  background: transparent;
-  color: $white;
-  border-color: $white;
-
-  &:not(:disabled):not(.disabled) {
-    &:hover, &:active, &.hover, &.active {
-      background: $brand;
-      border-color: transparent;
-      color: $white;
-    }
-  }
-
-  &:not(:disabled):not(.disabled) {
-    &:focus, &.focus {
-      background: transparent;
-      border-color: $white;
-
-      &:before {
-        border-color: $white;
-      }
-    }
-  }
-}
-
-.btn-inverse-brand {
-  background: $brand;
-  color: $white;
-  border-color: transparent;
-
-  &:not(:disabled):not(.disabled) {
-    &:hover, &:active, &.hover, &.active {
-      background: $brand-700;
-      border-color: transparent;
-      color: white;
-    }
-
-    &:focus, &.focus {
-      background-color: $brand-500;
-
-      &:before {
-        border-color: $brand-500;
-      }
-    }
-  }
-
-  &:disabled, &.disabled {
-    background-color: $brand-500;
-    border-color: $brand-500;
-    color: $white;
-  }
-}
-
-.btn-inverse-tertiary:not(:disabled):not(.disabled) {
-  &:focus, &.focus {
-    background: transparent;
-
-    &:before {
-      border-color: $white;
-    }
-  }
-}
-
-.btn-inverse-primary {
-  background: $white;
-  color: $primary;
-  border-color: transparent;
-
-  &:not(:disabled):not(.disabled) {
-    &:hover, &:active, &.hover, &.active {
-      background: $primary-300;
-      border-color: transparent;
-      color: $white;
-    }
-
-    &:focus, &.focus {
-      background: $white;
-      color: $primary-500;
-
-      &:before {
-        border-color: $white;
-      }
-    }
-  }
-
-  &:disabled, &.disabled {
-    background-color: $white;
-    border-color: $white;
-  }
-}
-
 // Avatar buttons in tertiary style (the default) are darker than regular tertiary buttons
 .btn-avatar.btn-tertiary {
-  color: $primary-500;
+  color: var(--pgn-color-primary-500);
 }
 
 // Forms
@@ -261,7 +85,7 @@
     &.is-#{$state} {
       &:focus {
         border-color: $color;
-        box-shadow: 0 0 0 $input-focus-width $color;
+        box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) $color;
       }
     }
   }
@@ -271,7 +95,7 @@
     &.is-#{$state} {
       &:focus {
         border-color: $color;
-        box-shadow: 0 0 0 $input-focus-width $color;
+        box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) $color;
       }
     }
   }
@@ -280,26 +104,25 @@
 select.form-control {
   background-repeat: no-repeat;
   background-position: right 1rem center;
-  background-image: str-replace($custom-select-indicator, "#", "%23");
   appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
 }
 
 .popover-header {
-  border-bottom: solid 1px $gray-100;
+  border-bottom: solid 1px var(--pgn-color-gray-100);
 }
 
 // Grid
 
 .container {
-  padding-left: $grid-gutter-width;
-  padding-right: $grid-gutter-width;
+  padding-left: var(--pgn-spacing-grid-gutter-width);
+  padding-right: var(--pgn-spacing-grid-gutter-width);
 }
 
 .container-fluid {
-  padding-left: $grid-gutter-width;
-  padding-right: $grid-gutter-width;
+  padding-left: var(--pgn-spacing-grid-gutter-width);
+  padding-right: var(--pgn-spacing-grid-gutter-width);
 }
 
 
@@ -314,9 +137,10 @@ h1, .h1 {
   line-height: calc((44 / 16) * 1rem);
   letter-spacing: -2%;
 
-  @media (max-width: map-get($grid-breakpoints, "sm")) {
+  @media (--max-pgn-size-breakpoint-xs) {
     line-height: calc((40 / 16) * 1rem);
   }
+
   .mobile-type & {
     line-height: calc((40 / 16) * 1rem);
   }
@@ -357,32 +181,37 @@ h6, .h6 {
 p > a[href]:not(.btn),
 a.inline-link {
   text-decoration-line: underline;
-  text-decoration-color: rgba($link-color, .3);
+  text-decoration-color: rgba(var(--pgn-color-link-base), .3);
+
   &:hover {
-    text-decoration-color: rgba($link-color, 1);
+    text-decoration-color: rgba(var(--pgn-color-link-base), 1);
   }
 }
 
 // Temporary fix for search fields. See https://github.com/edx/brand-edx.org/pull/9#issuecomment-723208124
 
 .pgn__searchfield {
   border-radius: 0 !important;
+
   .btn {
-    background: $input-bg;
+    background: var(--pgn-color-form-input-bg-base);
     display: flex;
   }
+
   &.has-focus {
+    border-color: var(--pgn-color-form-input-focus-border) !important;
+
     .btn {
-      background: $input-focus-bg;
+      background: var(--pgn-color-form-input-focus-bg);
     }
-    border-color: $input-focus-border-color !important;
   }
 }
 
 // Progress Bar
 .progress {
-  border: $progress-bar-border-width solid $progress-bar-border-color;
+  border: var(--pgn-size-progress-bar-border-width) solid var(--pgn-color-progress-bar-border);
 }
+
 .progress-bar {
-  background-color: $progress-bar-bg;
+  background-color: var(--pgn-color-progress-bar-bar-bg-base);
 }
diff --git a/paragon/css/core/custom-media-breakpoints.css b/paragon/css/core/custom-media-breakpoints.css
@@ -1,6 +1,6 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Sun, 23 Jul 2023 16:09:04 GMT
+ * Generated on Thu, 27 Jul 2023 08:38:40 GMT
  */
 
diff --git a/paragon/css/core/variables.css b/paragon/css/core/variables.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Sun, 23 Jul 2023 16:09:04 GMT
+ * Generated on Thu, 27 Jul 2023 08:38:40 GMT
  */
 
 :root {
@@ -25,7 +25,7 @@
   --pgn-spacing-card-spacer-y: 1rem;
   --pgn-spacing-card-spacer-x: 1.5rem;
   --pgn-spacing-btn-focus-gap: 2px;
-  --pgn-size-popover-border-width: 0;
+  --pgn-size-popover-border-width: 0px;
   --pgn-size-nav-pills-border-radius: 0;
   --pgn-size-image-thumbnail-border-radius: 0;
   --pgn-size-input-btn-border-width: 1px;