@openedx/paragon 22.6.0 → 23.0.0-alpha.2

package/dist/Annotation/index.scss

@@ -1,112 +1,139 @@
-@import "variables";
-
-@mixin triangle($color, $direction) {
-  height: 0;
-  width: 0;
-  position: absolute;
-  content: "";
-  border: solid transparent;
-
-  @if $direction == top {
-    border-bottom-color: $color;
-    border-width: 0 $annotation-arrow-border-width $annotation-arrow-border-width;
-    right: 0;
-    left: 0;
-    top: -$annotation-arrow-border-width;
-    margin: 0 auto;
-  }
-
-  @else if $direction == right {
-    border-left-color: $color;
-    border-width: $annotation-arrow-border-width 0 $annotation-arrow-border-width $annotation-arrow-border-width;
-    top: 0;
-    bottom: 0;
-    right: -$annotation-arrow-border-width;
-    margin: auto 0;
-  }
-
-  @else if $direction == bottom {
-    border-top-color: $color;
-    border-width: $annotation-arrow-border-width $annotation-arrow-border-width 0;
-    right: 0;
-    left: 0;
-    bottom: -$annotation-arrow-border-width;
-    margin: 0 auto;
-  }
-
-  @else if $direction == left {
-    border-right-color: $color;
-    border-width: $annotation-arrow-border-width $annotation-arrow-border-width $annotation-arrow-border-width 0;
-    top: 0;
-    bottom: 0;
-    left: -$annotation-arrow-border-width;
-    margin: auto 0;
-  }
-
-  @else {
-    @error "Unknown direction #{$direction}.";
-  }
-}
+@import "mixins";
 
 .pgn__annotation {
-  padding: $annotation-padding;
-  border-radius: $annotation-border-radius;
-  max-width: $annotation-max-width;
-  filter: $annotation-box-shadow;
+  padding: var(--pgn-spacing-annotation-padding);
+  border-radius: var(--pgn-size-annotation-border-radius);
+  max-width: var(--pgn-size-annotation-max-width);
+  filter: var(--pgn-elevation-annotation-box-shadow);
   word-wrap: break-word;
   position: relative;
   display: inline-block;
-  font-size: $annotation-font-size;
-  line-height: $annotation-line-height;
+  font-size: var(--pgn-typography-annotation-font-size);
+  line-height: var(--pgn-typography-annotation-line-height);
   text-align: center;
 }
 
-$arrow-directions: top, right, bottom, left;
-
-@each $name, $colors in $annotation-variants {
-  @each $direction in $arrow-directions {
-    .pgn__annotation-#{$name}-#{$direction} {
-      background-color: map-get($colors, "background-color");
-      color: map-get($colors, "color");
-
-      // set additional margin to arrow side of the Annotation
-      margin-#{$direction}: $annotation-arrow-border-width + $annotation-arrow-side-margin;
-
-      [dir="rtl"] & {
-        @if $direction == left {
-          margin-left: 0;
-          margin-right: $annotation-arrow-border-width + $annotation-arrow-side-margin;
-        }
-
-        @else if $direction == right {
-          margin-right: 0;
-          margin-left: $annotation-arrow-border-width + $annotation-arrow-side-margin;
-        }
-      }
-
-      &::after {
-        @include triangle(map-get($colors, "background-color"), $direction);
-
-        [dir="rtl"] & {
-          @if $direction == left {
-            left: initial;
-            right: -$annotation-arrow-border-width;
-            border-width:
-              $annotation-arrow-border-width 0 $annotation-arrow-border-width
-              $annotation-arrow-border-width;
-            border-left-color: map-get($colors, "background-color");
-          }
-
-          @else if $direction == right {
-            right: initial;
-            left: -$annotation-arrow-border-width;
-            border-width:
-              $annotation-arrow-border-width $annotation-arrow-border-width
-              $annotation-arrow-border-width 0;
-            border-right-color: map-get($colors, "background-color");
-          }
-        }
-      }
-    }
-  }
+// SUCCESS
+.pgn__annotation-success-top {
+  @include annotation-variant(
+    var(--pgn-color-annotation-bg-success),
+    var(--pgn-color-annotation-text-success), "top");
+}
+
+.pgn__annotation-success-bottom {
+  @include annotation-variant(
+    var(--pgn-color-annotation-bg-success),
+    var(--pgn-color-annotation-text-success), "bottom");
+}
+
+.pgn__annotation-success-right {
+  @include annotation-variant(
+    var(--pgn-color-annotation-bg-success),
+    var(--pgn-color-annotation-text-success), "right");
+}
+
+.pgn__annotation-success-left {
+  @include annotation-variant(
+    var(--pgn-color-annotation-bg-success),
+    var(--pgn-color-annotation-text-success), "left");
+}
+
+// WARNING
+.pgn__annotation-warning-top {
+  @include annotation-variant(
+    var(--pgn-color-annotation-bg-warning),
+    var(--pgn-color-annotation-text-warning), "top");
+}
+
+.pgn__annotation-warning-bottom {
+  @include annotation-variant(
+    var(--pgn-color-annotation-bg-warning),
+    var(--pgn-color-annotation-text-warning), "bottom");
+}
+
+.pgn__annotation-warning-right {
+  @include annotation-variant(
+    var(--pgn-color-annotation-bg-warning),
+    var(--pgn-color-annotation-text-warning), "right");
+}
+
+.pgn__annotation-warning-left {
+  @include annotation-variant(
+    var(--pgn-color-annotation-bg-warning),
+    var(--pgn-color-annotation-text-warning), "left");
+}
+
+// ERROR
+.pgn__annotation-error-top {
+  @include annotation-variant(
+    var(--pgn-color-annotation-bg-error),
+    var(--pgn-color-annotation-text-error), "top");
+}
+
+.pgn__annotation-error-bottom {
+  @include annotation-variant(
+    var(--pgn-color-annotation-bg-error),
+    var(--pgn-color-annotation-text-error), "bottom");
+}
+
+.pgn__annotation-error-right {
+  @include annotation-variant(
+    var(--pgn-color-annotation-bg-error),
+    var(--pgn-color-annotation-text-error), "right");
+}
+
+.pgn__annotation-error-left {
+  @include annotation-variant(
+    var(--pgn-color-annotation-bg-error),
+    var(--pgn-color-annotation-text-error), "left");
+}
+
+// DARK
+.pgn__annotation-dark-top {
+  @include annotation-variant(
+    var(--pgn-color-annotation-bg-dark),
+    var(--pgn-color-annotation-text-dark), "top");
+}
+
+.pgn__annotation-dark-bottom {
+  @include annotation-variant(
+    var(--pgn-color-annotation-bg-dark),
+    var(--pgn-color-annotation-text-dark), "bottom");
+}
+
+.pgn__annotation-dark-right {
+  @include annotation-variant(
+    var(--pgn-color-annotation-bg-dark),
+    var(--pgn-color-annotation-text-dark), "right");
+}
+
+.pgn__annotation-dark-left {
+  @include annotation-variant(
+    var(--pgn-color-annotation-bg-dark),
+    var(--pgn-color-annotation-text-dark), "left");
+}
+
+// LIGHT
+.pgn__annotation-light-top {
+  @include annotation-variant(
+    var(--pgn-color-annotation-bg-light),
+    var(--pgn-color-annotation-text-light), "top");
+}
+
+.pgn__annotation-light-bottom {
+  @include annotation-variant(
+    var(--pgn-color-annotation-bg-light),
+    var(--pgn-color-annotation-text-light), "bottom");
+}
+
+.pgn__annotation-light-right {
+  @include annotation-variant(
+    var(--pgn-color-annotation-bg-light),
+    var(--pgn-color-annotation-text-light), "right");
+}
+
+.pgn__annotation-light-left {
+  @include annotation-variant(
+    var(--pgn-color-annotation-bg-light),
+    var(--pgn-color-annotation-text-light), "left");
 }

package/dist/Avatar/index.scss

@@ -1,46 +1,44 @@
-@import "variables";
-
 .pgn__avatar {
-  border-radius: $avatar-border-radius;
-  border: $avatar-border;
+  border-radius: var(--pgn-size-avatar-border-radius);
+  border: solid var(--pgn-size-avatar-border-base) var(--pgn-color-avatar-border);
   display: inline-block;
-  height: $avatar-size;
+  height: var(--pgn-size-avatar-base);
   overflow: hidden;
-  width: $avatar-size;
+  width: var(--pgn-size-avatar-base);
   object-fit: cover;
 
   &.pgn__avatar-xs {
-    height: $avatar-size-xs;
-    width: $avatar-size-xs;
+    height: var(--pgn-size-avatar-xs);
+    width: var(--pgn-size-avatar-xs);
   }
 
   &.pgn__avatar-sm {
-    height: $avatar-size-sm;
-    width: $avatar-size-sm;
+    height: var(--pgn-size-avatar-sm);
+    width: var(--pgn-size-avatar-sm);
   }
 
   &.pgn__avatar-md {
-    height: $avatar-size;
-    width: $avatar-size;
+    height: var(--pgn-size-avatar-base);
+    width: var(--pgn-size-avatar-base);
   }
 
   &.pgn__avatar-lg {
-    height: $avatar-size-lg;
-    width: $avatar-size-lg;
+    height: var(--pgn-size-avatar-lg);
+    width: var(--pgn-size-avatar-lg);
   }
 
   &.pgn__avatar-xl {
-    height: $avatar-size-xl;
-    width: $avatar-size-xl;
+    height: var(--pgn-size-avatar-xl);
+    width: var(--pgn-size-avatar-xl);
   }
 
   &.pgn__avatar-xxl {
-    height: $avatar-size-xxl;
-    width: $avatar-size-xxl;
+    height: var(--pgn-size-avatar-xxl);
+    width: var(--pgn-size-avatar-xxl);
   }
 
   &.pgn__avatar-huge {
-    height: $avatar-size-huge;
-    width: $avatar-size-huge;
+    height: var(--pgn-size-avatar-huge);
+    width: var(--pgn-size-avatar-huge);
   }
 }

package/dist/AvatarButton/index.scss

@@ -1,14 +1,12 @@
-@import "variables";
-
 .btn.pgn__avatar-button-avatar {
-  padding-left: $avatar-button-padding-left;
+  padding-left: var(--pgn-spacing-avatar-button-padding-left-base);
 
   &.pgn__avatar-button-avatar-sm {
-    padding-left: $avatar-button-padding-left-sm;
+    padding-left: var(--pgn-spacing-avatar-button-padding-left-sm);
   }
 
   &.pgn__avatar-button-avatar-lg {
-    padding-left: $avatar-button-padding-left-lg;
+    padding-left: var(--pgn-spacing-avatar-button-padding-left-lg);
   }
 
   .pgn__avatar {

package/dist/Badge/index.scss

@@ -1,2 +1,112 @@
-@import "variables";
-@import "~bootstrap/scss/badge";
+.badge {
+  display: inline-block;
+  padding: var(--pgn-spacing-badge-padding-y) var(--pgn-spacing-badge-padding-x-base);
+  color: var(--pgn-badge-color, inherit);
+  background-color: var(--pgn-badge-bg, transparent);
+
+  @include font-size(var(--pgn-typography-badge-font-size));
+
+  font-weight: var(--pgn-typography-badge-font-weight);
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  transition: var(--pgn-transition-badge);
+
+  @include border-radius(var(--pgn-size-badge-border-radius-base));
+
+  @at-root a#{&} {
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      color: var(--pgn-badge-focus-color, inherit);
+      background-color: var(--pgn-badge-focus-bg, transparent);
+    }
+
+    &:focus,
+    &.focus {
+      outline: 0;
+      box-shadow: 0 0 0 var(--pgn-size-badge-focus-width) var(--pgn-badge-focus-box-shadow, rgba(0, 0, 0, .15));
+    }
+  }
+
+  &:empty {
+    display: none;
+  }
+}
+
+.btn .badge {
+  position: relative;
+  top: -1px;
+}
+
+.badge-pill {
+  padding-right: var(--pgn-spacing-badge-padding-x-pill);
+  padding-left: var(--pgn-spacing-badge-padding-x-pill);
+
+  @include border-radius(var(--pgn-size-badge-border-radius-pill));
+}
+
+.badge-primary {
+  --pgn-badge-color: var(--pgn-color-badge-text-primary);
+  --pgn-badge-bg: var(--pgn-color-badge-bg-primary);
+  --pgn-badge-focus-color: var(--pgn-color-badge-focus-primary);
+  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-primary);
+  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-primary);
+}
+
+.badge-secondary {
+  --pgn-badge-color: var(--pgn-color-badge-text-secondary);
+  --pgn-badge-bg: var(--pgn-color-badge-bg-secondary);
+  --pgn-badge-focus-color: var(--pgn-color-badge-focus-secondary);
+  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-secondary);
+  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-secondary);
+}
+
+.badge-success {
+  --pgn-badge-color: var(--pgn-color-badge-text-success);
+  --pgn-badge-bg: var(--pgn-color-badge-bg-success);
+  --pgn-badge-focus-color: var(--pgn-color-badge-focus-success);
+  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-success);
+  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-success);
+}
+
+.badge-danger {
+  --pgn-badge-color: var(--pgn-color-badge-text-danger);
+  --pgn-badge-bg: var(--pgn-color-badge-bg-danger);
+  --pgn-badge-focus-color: var(--pgn-color-badge-focus-danger);
+  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-danger);
+  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-danger);
+}
+
+.badge-warning {
+  --pgn-badge-color: var(--pgn-color-badge-text-warning);
+  --pgn-badge-bg: var(--pgn-color-badge-bg-warning);
+  --pgn-badge-focus-color: var(--pgn-color-badge-focus-warning);
+  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-warning);
+  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-warning);
+}
+
+.badge-info {
+  --pgn-badge-color: var(--pgn-color-badge-text-info);
+  --pgn-badge-bg: var(--pgn-color-badge-bg-info);
+  --pgn-badge-focus-color: var(--pgn-color-badge-focus-info);
+  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-info);
+  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-info);
+}
+
+.badge-light {
+  --pgn-badge-color: var(--pgn-color-badge-text-light);
+  --pgn-badge-bg: var(--pgn-color-badge-bg-light);
+  --pgn-badge-focus-color: var(--pgn-color-badge-focus-light);
+  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-light);
+  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-light);
+}
+
+.badge-dark {
+  --pgn-badge-color: var(--pgn-color-badge-text-dark);
+  --pgn-badge-bg: var(--pgn-color-badge-bg-dark);
+  --pgn-badge-focus-color: var(--pgn-color-badge-focus-dark);
+  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-dark);
+  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-dark);
+}

package/dist/Breadcrumb/index.scss

@@ -1,13 +1,11 @@
-@import "variables";
-
 .pgn__breadcrumb {
   .list-inline-item {
     &.active {
-      color: $breadcrumb-active-color;
+      color: var(--pgn-color-breadcrumb-active);
     }
 
     a.link-muted {
-      color: $breadcrumb-color;
+      color: var(--pgn-color-breadcrumb-base);
 
       &:focus {
         position: relative;
@@ -19,18 +17,18 @@
       &:focus::before {
         content: "";
         position: absolute;
-        top: -$breadcrumb-border-focus-axis-y;
-        right: -$breadcrumb-border-focus-axis-x;
-        bottom: -$breadcrumb-border-focus-axis-y;
-        left: -$breadcrumb-border-focus-axis-x;
-        border: $breadcrumb-border-focus-width solid $breadcrumb-color;
-        border-radius: $breadcrumb-focus-border-radius;
+        top: calc(var(--pgn-size-breadcrumb-border-axis-y-focus) * -1);
+        right: calc(var(--pgn-size-breadcrumb-border-axis-x-focus) * -1);
+        bottom: calc(var(--pgn-size-breadcrumb-border-axis-y-focus) * -1);
+        left: calc(var(--pgn-size-breadcrumb-border-axis-x-focus) * -1);
+        border: var(--pgn-size-breadcrumb-border-width-focus) solid var(--pgn-color-breadcrumb-base);
+        border-radius: var(--pgn-size-breadcrumb-border-radius-focus);
       }
     }
 
     [dir="rtl"] & {
       margin-right: 0;
-      margin-left: $breadcrumb-margin-left;
+      margin-left: var(--pgn-spacing-breadcrumb-margin-left);
     }
 
     .pgn__icon {
@@ -43,21 +41,21 @@
   &-dark {
     .list-inline-item {
       &.active {
-        color: $breadcrumb-inverse-active;
+        color: var(--pgn-color-breadcrumb-inverse-active);
       }
 
       a.link-muted {
-        color: $breadcrumb-inverse-color;
+        color: var(--pgn-color-breadcrumb-inverse-base);
 
         &:focus::before {
-          border: $breadcrumb-border-focus-width solid $breadcrumb-inverse-color;
+          border: var(--pgn-size-breadcrumb-border-width-focus) solid var(--pgn-color-breadcrumb-inverse-base);
         }
       }
     }
 
     .pgn__icon,
     .custom-spacer {
-      color: $breadcrumb-inverse-spacer;
+      color: var(--pgn-color-breadcrumb-inverse-spacer);
     }
   }
 
@@ -71,7 +69,7 @@
 
       .list-inline-item:not(:last-child) {
         margin-right: 0;
-        margin-left: $breadcrumb-margin-left;
+        margin-left: var(--pgn-spacing-breadcrumb-margin-left);
       }
 
       .pgn__icon {

package/dist/Bubble/index.scss

@@ -1,5 +1,3 @@
-@import "variables";
-
 .pgn__bubble {
   line-height: normal;
   min-height: 1.5rem;
@@ -8,21 +6,36 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: $font-size-xs;
-
-  @each $name, $colors in $bubble-variants {
-    &.pgn__bubble-#{$name} {
-      background-color: map-get($colors, "background-color");
-      color: map-get($colors, "color");
-    }
-  }
+  font-size: var(--pgn-typography-font-size-xs);
+  color: var(--pgn-bubble-color, inherit);
+  background-color: var(--pgn-bubble-bg, transparent);
 
   &:disabled,
   &.disabled {
-    background: $gray-500;
+    background: var(--pgn-color-gray-500);
   }
 
   &.expandable {
-    padding: $bubble-expandable-padding-y $bubble-expandable-padding-x;
+    padding: var(--pgn-spacing-bubble-expandable-padding-y) var(--pgn-spacing-bubble-expandable-padding-x);
   }
 }
+
+.pgn__bubble-primary {
+  --pgn-bubble-color: var(--pgn-color-bubble-text-primary);
+  --pgn-bubble-bg: var(--pgn-color-bubble-bg-primary);
+}
+
+.pgn__bubble-success {
+  --pgn-bubble-color: var(--pgn-color-bubble-text-success);
+  --pgn-bubble-bg: var(--pgn-color-bubble-bg-success);
+}
+
+.pgn__bubble-warning {
+  --pgn-bubble-color: var(--pgn-color-bubble-text-warning);
+  --pgn-bubble-bg: var(--pgn-color-bubble-bg-warning);
+}
+
+.pgn__bubble-error {
+  --pgn-bubble-color: var(--pgn-color-bubble-text-error);
+  --pgn-bubble-bg: var(--pgn-color-bubble-bg-error);
+}

package/dist/Button/_mixins.scss

@@ -0,0 +1,14 @@
+// OVERRIDE FROM BOOTSTRAP
+// No changes made. We do this to keep all button related mixins together,
+//
+// Button sizes
+@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $button-border-radius) {
+  padding: $padding-y $padding-x;
+
+  @include font-size($font-size);
+
+  line-height: $line-height;
+
+  // Manually declare to provide an override to the browser default
+  @include border-radius($button-border-radius, 0);
+}