@openedx/paragon 22.0.0-alpha.16 → 22.0.0-alpha.17

package/README.md

@@ -15,6 +15,14 @@ Documentation lives at https://paragon-openedx.netlify.app/.
 
 ## Getting Started
 
+### Getting Help
+
+Please reach out to the Paragon Working Group (PWG):
+
+* Open edX Slack ([request an invite](https://openedx.org/slack)): [#wg-paragon](https://openedx.slack.com/archives/C02NR285KV4)
+* [Github Issues](https://github.com/openedx/paragon/issues/new?template=blank-issue.md)
+* [Weekly PWG Meeting](https://calendar.google.com/calendar/embed?src=c_v86shrnegshsqgp4fj2k94u7bc%40group.calendar.google.com&ctz=America%2FNew_York)
+
 ### React Components
 
 Paragon components require React 16 or higher. To install Paragon into your project:
@@ -68,14 +76,6 @@ The Paragon CLI (Command Line Interface) is a tool that provides various utility
 
 Use `paragon help` to see more information.
 
-## Getting Help
-
-Please reach out to the Paragon Working Group (PWG):
-
-* Open edX Slack ([request an invite](https://openedx.org/slack)): [#wg-paragon](https://openedx.slack.com/archives/C02NR285KV4)
-* [Github Issues](https://github.com/openedx/paragon/issues/new?template=blank-issue.md)
-* [Weekly PWG Meeting](https://calendar.google.com/calendar/embed?src=c_v86shrnegshsqgp4fj2k94u7bc%40group.calendar.google.com&ctz=America%2FNew_York)
-
 ## Internationalization
 
 Paragon supports internationalization for its components out of the box with the support of [react-intl](https://formatjs.io/docs/react-intl/). You may view translated strings for each component on the documentation website by switching languages in the settings.

package/dist/Nav/index.scss

@@ -55,7 +55,7 @@
     .nav-item.show .nav-link {
       color: var(--pgn-color-nav-pills-base-link-active-text);
       background-color: var(--pgn-color-nav-pills-base-link-active-bg);
-      border-color: var(--pgn-color-primary-base);
+      border-color: var(--pgn-color-nav-pills-base-link-active-border);
 
       &:focus {
         // stylelint-disable-next-line max-line-length
@@ -104,9 +104,9 @@
         background-color: var(--pgn-color-white);
 
         &:hover {
-          // background-color: var(--pgn-color-nav-pills-inverse-link-bg-active-hover);
+          background-color: var(--pgn-color-nav-pills-inverse-link-bg-active-focus-hover);
           color: var(--pgn-color-nav-pills-inverse-link-text-active-focus);
-          // border-color: $nav-inverse-pills-link-active-focus-hover-border-color;
+          border-color: var(--pgn-color-nav-pills-inverse-link-border-focus-hover);
         }
       }
     }
@@ -122,7 +122,7 @@
       border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-inverse-link-border-bottom);
 
       .dropdown .dropdown-toggle {
-        border-bottom: var(--pgn-size-nav-tabs-border-width) solid transparent;
+        border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-inverse-dropdown-border);
 
         &:hover {
           border-bottom: none;
@@ -156,14 +156,14 @@
 }
 
 .nav-tabs {
-  border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-base-border);
+  border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-base-border-base);
 
   button.nav-link {
     border: none;
     border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-link-border);
 
     &.disabled {
-      border-color: transparent;
+      border-color: var(--pgn-color-nav-tabs-base-link-disabled-border);
     }
   }
 
@@ -181,14 +181,14 @@
     }
 
     &:focus {
-      border-bottom: var(--pgn-size-nav-tabs-border-width) solid transparent;
+      border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-base-border-focus);
 
       @include nav-tabs-link-focus(var(--pgn-border-color-nav-tabs-link-border-focus));
     }
 
     &.disabled {
       color: var(--pgn-color-nav-link-text-disabled);
-      background-color: transparent;
+      background-color: var(--pgn-color-nav-tabs-base-text-disabled);
     }
   }
 
@@ -238,7 +238,7 @@
 
 .nav-button-group {
   .nav-link {
-    border: solid 1px var(--pgn-color-nav-tabs-base-border);
+    border: solid 1px var(--pgn-color-nav-tabs-base-border-base);
 
     &:first-child {
       @include border-left-radius(var(--pgn-size-nav-pills-border-radius));

package/dist/Tabs/index.scss

@@ -79,6 +79,14 @@
         color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active-hover);
         background-color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-active-hover);
       }
+
+      &:focus {
+        @include nav-tabs-link-focus(
+          var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-border-focus),
+          var(--pgn-size-nav-tabs-border-radius),
+          var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance)
+        );
+      }
     }
   }
 

package/dist/core.css

@@ -56,7 +56,6 @@
   --pgn-elevation-tooltip-zindex: 1070;
   --pgn-elevation-sheet-zindex-main: 1032;
   --pgn-elevation-sheet-zindex-backdrop: 1031;
-  --pgn-elevation-progress-bar-box-shadow: none;
   --pgn-elevation-product-tour-checkpoint-zindex: 1060;
   --pgn-elevation-popover-zindex: 1060;
   --pgn-elevation-modal-zindex: 1050;
@@ -159,6 +158,7 @@
   --pgn-spacing-toast-container-gutter-lg: 1.25rem;
   --pgn-spacing-toast-padding-y: .25rem;
   --pgn-spacing-toast-padding-x: .75rem;
+  --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance: 5px;
   --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x: .625rem;
   --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x: .625rem;
   --pgn-spacing-tab-more-link-dropdown-toggle-padding-x: .7rem;
@@ -187,7 +187,7 @@
   --pgn-spacing-navbar-toggler-padding-x: .75rem;
   --pgn-spacing-navbar-toggler-padding-y: .25rem;
   --pgn-spacing-navbar-padding-x-nav-link: .5rem;
-  --pgn-spacing-nav-link-distance-to-border: .313rem;
+  --pgn-spacing-nav-link-distance-to-border: 4px;
   --pgn-spacing-nav-link-padding-x: 1rem;
   --pgn-spacing-nav-link-padding-y: .5rem;
   --pgn-spacing-modal-dialog-margin: 1.5rem;
@@ -238,7 +238,7 @@
   --pgn-spacing-dropdown-padding-x-base: 0;
   --pgn-spacing-dropdown-spacer: .125rem;
   --pgn-spacing-data-table-footer-position: center;
-  --pgn-spacing-data-table-padding-cell: .75rem;
+  --pgn-spacing-data-table-padding-cell: .5rem .75rem;
   --pgn-spacing-data-table-padding-small: .5rem;
   --pgn-spacing-data-table-padding-y: .75rem;
   --pgn-spacing-data-table-padding-x: .75rem;
@@ -401,14 +401,13 @@
   --pgn-size-chip-icon: 1.25rem;
   --pgn-size-chip-border-radius: .25rem;
   --pgn-size-carousel-caption-width: 70%;
-  --pgn-size-carousel-indicator-height-area-hit: 3px;
+  --pgn-size-carousel-indicator-height-area-hit: 10px;
   --pgn-size-carousel-indicator-height-base: 3px;
   --pgn-size-carousel-indicator-width: 30px;
   --pgn-size-carousel-control-width-icon: 20px;
   --pgn-size-carousel-control-width-base: 15%;
   --pgn-size-card-logo-height: 4.125rem;
   --pgn-size-card-logo-width: 7.25rem;
-  --pgn-size-card-image-border-radius: .3125rem;
   --pgn-size-card-image-vertical-max-height: 140px;
   --pgn-size-card-image-horizontal-width-max: 240px;
   --pgn-size-card-focus-border-width: 2px;
@@ -618,6 +617,7 @@
   --pgn-size-form-input-height-sm: calc(var(--pgn-typography-form-input-line-height-sm) * 1em + var(--pgn-spacing-input-btn-padding-sm-y) * 2 + var(--pgn-size-form-input-height-border));
   --pgn-size-form-input-height-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2 + var(--pgn-size-form-input-height-border));
   --pgn-size-dropdown-border-radius-inner: calc(var(--pgn-size-dropdown-border-radius-base) - var(--pgn-size-dropdown-border-width));
+  --pgn-size-card-image-border-radius: var(--pgn-size-card-border-radius-base);
   --pgn-size-btn-focus-border-radius: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap));
   --pgn-size-btn-border-width: var(--pgn-size-input-btn-border-width);
   --pgn-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight);
@@ -8453,7 +8453,7 @@ p > a.brand-link[href]:not(.btn):hover, a.brand-link.inline-link:hover {
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Fri, 22 Sep 2023 08:20:17 GMT
+ * Generated on Thu, 16 Nov 2023 10:44:11 GMT
  */
 /**
  * IMPORTANT: This file is the result of assembling design tokens
@@ -13521,7 +13521,7 @@ select.form-control {
 .pgn__tabs.nav-pills .nav-link .nav-item.show .nav-link {
   color: var(--pgn-color-nav-pills-base-link-active-text);
   background-color: var(--pgn-color-nav-pills-base-link-active-bg);
-  border-color: var(--pgn-color-primary-base);
+  border-color: var(--pgn-color-nav-pills-base-link-active-border);
 }
 .pgn__tabs.nav-pills .nav-link.active:focus,
 .pgn__tabs.nav-pills .nav-link .nav-item.show .nav-link:focus {
@@ -13587,7 +13587,9 @@ select.form-control {
 }
 .pgn__tabs.nav-inverse-pills .nav-link.active:focus:hover,
 .pgn__tabs.nav-inverse-pills .nav-item.show .nav-link:focus:hover {
+  background-color: var(--pgn-color-nav-pills-inverse-link-bg-active-focus-hover);
   color: var(--pgn-color-nav-pills-inverse-link-text-active-focus);
+  border-color: var(--pgn-color-nav-pills-inverse-link-border-focus-hover);
 }
 .pgn__tabs.nav-inverse-tabs + .tab-content {
   color: var(--pgn-color-nav-tabs-inverse-link-tab-content-color);
@@ -13597,7 +13599,7 @@ select.form-control {
   border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-inverse-link-border-bottom);
 }
 .pgn__tabs.nav-inverse-tabs .nav-link .dropdown .dropdown-toggle {
-  border-bottom: var(--pgn-size-nav-tabs-border-width) solid transparent;
+  border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-inverse-dropdown-border);
 }
 .pgn__tabs.nav-inverse-tabs .nav-link .dropdown .dropdown-toggle:hover {
   border-bottom: none;
@@ -13633,14 +13635,14 @@ select.form-control {
   background-color: var(--pgn-color-nav-tabs-inverse-link-bg-active-hover);
 }
 .nav-tabs {
-  border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-base-border);
+  border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-base-border-base);
 }
 .nav-tabs button.nav-link {
   border: none;
   border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-link-border);
 }
 .nav-tabs button.nav-link.disabled {
-  border-color: transparent;
+  border-color: var(--pgn-color-nav-tabs-base-link-disabled-border);
 }
 .nav-tabs .nav-link {
   margin-bottom: calc(var(--pgn-size-nav-tabs-border-width) * -1);
@@ -13654,7 +13656,7 @@ select.form-control {
   padding-bottom: 0.125rem;
 }
 .nav-tabs .nav-link:focus {
-  border-bottom: var(--pgn-size-nav-tabs-border-width) solid transparent;
+  border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-base-border-focus);
   position: relative;
   outline: 0;
   z-index: 200;
@@ -13671,7 +13673,7 @@ select.form-control {
 }
 .nav-tabs .nav-link.disabled {
   color: var(--pgn-color-nav-link-text-disabled);
-  background-color: transparent;
+  background-color: var(--pgn-color-nav-tabs-base-text-disabled);
 }
 .nav-tabs .nav-link.active,
 .nav-tabs .nav-item.show .nav-link {
@@ -13714,7 +13716,7 @@ select.form-control {
   background-color: var(--pgn-color-nav-pills-base-link-active-bg);
 }
 .nav-button-group .nav-link {
-  border: solid 1px var(--pgn-color-nav-tabs-base-border);
+  border: solid 1px var(--pgn-color-nav-tabs-base-border-base);
 }
 .nav-button-group .nav-link:first-child {
   border-top-left-radius: var(--pgn-size-nav-pills-border-radius);
@@ -16588,6 +16590,21 @@ select.form-control {
   color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active-hover);
   background-color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-active-hover);
 }
+.pgn__tabs.nav-inverse-pills .pgn__tab_more.nav-link.active .dropdown .dropdown-toggle:focus {
+  position: relative;
+  outline: 0;
+  z-index: 200;
+}
+.pgn__tabs.nav-inverse-pills .pgn__tab_more.nav-link.active .dropdown .dropdown-toggle:focus::before {
+  content: "";
+  position: absolute;
+  top: calc(var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance) * -1);
+  right: calc(var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance) * -1);
+  bottom: calc(var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance) * -1);
+  left: calc(var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance) * -1);
+  border: solid var(--pgn-size-nav-tabs-border-width) var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-border-focus);
+  border-radius: var(--pgn-size-nav-tabs-border-radius);
+}
 .pgn__tabs.nav-tabs .pgn__tab_more.nav-link .dropdown .dropdown-toggle {
   padding: 0.563rem var(--pgn-spacing-tab-more-link-dropdown-toggle-padding-y);
 }