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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/README.md +8 -8
  2. package/dist/Form/_index.scss +14 -0
  3. package/dist/Nav/index.scss +9 -9
  4. package/dist/Tabs/index.scss +8 -0
  5. package/dist/core.css +39 -13
  6. package/dist/core.css.map +1 -1
  7. package/dist/core.min.css +1 -1
  8. package/dist/light.css +20 -13
  9. package/dist/light.css.map +1 -1
  10. package/dist/light.min.css +1 -1
  11. package/package.json +1 -1
  12. package/src/Avatar/README.md +0 -1
  13. package/src/Form/_index.scss +14 -0
  14. package/src/Image/README.md +0 -1
  15. package/src/Nav/index.scss +9 -9
  16. package/src/SearchField/README.md +0 -1
  17. package/src/SelectableBox/README.md +0 -1
  18. package/src/Spinner/README.md +0 -1
  19. package/src/Stepper/README.md +0 -1
  20. package/src/Tabs/index.scss +8 -0
  21. package/src/Truncate/README.md +2 -0
  22. package/src/hooks/useIndexOfLastVisibleChild.mdx +0 -1
  23. package/src/hooks/useIsVisible.mdx +0 -1
  24. package/src/hooks/useWindowSize.mdx +0 -1
  25. package/styles/css/core/variables.css +6 -6
  26. package/styles/css/themes/light/variables.css +20 -13
  27. package/tokens/src/core/components/Card.json +1 -1
  28. package/tokens/src/core/components/Carousel.json +2 -2
  29. package/tokens/src/core/components/DataTable.json +1 -1
  30. package/tokens/src/core/components/Nav.json +1 -1
  31. package/tokens/src/core/components/ProgressBar.json +0 -5
  32. package/tokens/src/core/components/Tab.json +2 -1
  33. package/tokens/src/themes/light/components/Breadcrumb.json +0 -1
  34. package/tokens/src/themes/light/components/Dropdown.json +6 -1
  35. package/tokens/src/themes/light/components/Form/color.json +2 -2
  36. package/tokens/src/themes/light/components/Nav.json +26 -5
  37. package/tokens/src/themes/light/components/Popover.json +1 -1
  38. package/tokens/src/themes/light/components/ProductTour.json +2 -2
  39. package/tokens/src/themes/light/components/Tab.json +8 -1
package/dist/light.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * IMPORTANT: This file is the result of assembling design tokens
3
3
  * Do not edit directly
4
- * Generated on Mon, 30 Oct 2023 14:36:05 GMT
4
+ * Generated on Wed, 15 Nov 2023 20:38:34 GMT
5
5
  */
6
6
 
7
7
  :root {
@@ -37,6 +37,7 @@
37
37
  --pgn-color-overflow-scroll-opacity-mask-transparent: #00000066;
38
38
  --pgn-color-nav-tabs-inverse-link-bg-active-hover: #00000000;
39
39
  --pgn-color-nav-tabs-base-link-active-bg: #00000000;
40
+ --pgn-color-nav-tabs-base-bg-hover: #00000000;
40
41
  --pgn-color-nav-link-border: #00000000;
41
42
  --pgn-color-menu-item-bg: #00000000;
42
43
  --pgn-color-icon-button-text-primary-inverse-active-hover: #000000FF;
@@ -225,6 +226,7 @@
225
226
  --pgn-elevation-toast-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15);
226
227
  --pgn-elevation-sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15);
227
228
  --pgn-elevation-sticky-shadow-top: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15);
229
+ --pgn-elevation-progress-bar-box-shadow: none;
228
230
  --pgn-elevation-image-thumbnail-box-shadow: none;
229
231
  --pgn-elevation-icon-button-box-shadow-black-inverse-active: none;
230
232
  --pgn-elevation-icon-button-box-shadow-black-active: none;
@@ -259,7 +261,6 @@
259
261
  --pgn-elevation-annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
260
262
  --pgn-elevation-alert-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15);
261
263
  --pgn-elevation-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
262
- --pgn-elevation-progress-bar-box-shadow: none;
263
264
  --pgn-elevation-popover-box-shadow: none;
264
265
  --pgn-elevation-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15);
265
266
  --pgn-elevation-dropdown-box-shadow: none;
@@ -343,6 +344,8 @@
343
344
  --pgn-color-progress-bar-bar-bg-base: var(--pgn-color-accent-a);
344
345
  --pgn-color-progress-bar-bar-base: var(--pgn-color-white);
345
346
  --pgn-color-product-tour-checkpoint-box-shadow: #0000004D;
347
+ --pgn-color-product-tour-checkpoint-breadcrumb: var(--pgn-color-primary-base);
348
+ --pgn-color-product-tour-checkpoint-border: var(--pgn-color-brand-base);
346
349
  --pgn-color-product-tour-checkpoint-body: var(--pgn-color-gray-700);
347
350
  --pgn-color-popover-arrow-outer: #0000000D;
348
351
  --pgn-color-popover-header-border-bottom-dark: #F2F2F2FF;
@@ -374,8 +377,14 @@
374
377
  --pgn-color-nav-light: #00000080;
375
378
  --pgn-color-nav-dark: #FFFFFF80;
376
379
  --pgn-color-nav-divider: var(--pgn-color-gray-100);
380
+ --pgn-color-nav-pills-inverse-link-border-active-focus: var(--pgn-color-primary-base);
377
381
  --pgn-color-nav-pills-inverse-link-text-base: var(--pgn-color-white);
382
+ --pgn-color-nav-pills-base-link-active-border: var(--pgn-color-white);
383
+ --pgn-color-nav-tabs-inverse-dropdown-border: var(--pgn-color-nav-tabs-inverse-link-bg-active-hover);
378
384
  --pgn-color-nav-tabs-inverse-link-text-base: var(--pgn-color-white);
385
+ --pgn-color-nav-tabs-base-link-disabled-border: var(--pgn-color-nav-link-border);
386
+ --pgn-color-nav-tabs-base-border-focus: var(--pgn-color-nav-tabs-base-bg-hover);
387
+ --pgn-color-nav-tabs-base-text-disabled: var(--pgn-color-nav-tabs-base-bg-hover);
379
388
  --pgn-color-nav-link-text-disabled: var(--pgn-color-gray-300);
380
389
  --pgn-color-nav-link-text-base: var(--pgn-color-gray-700);
381
390
  --pgn-color-modal-backdrop-bg: var(--pgn-color-black);
@@ -453,11 +462,12 @@
453
462
  --pgn-color-body-base: var(--pgn-color-gray-700);
454
463
  --pgn-color-form-control-range-track-bg: var(--pgn-color-gray-300);
455
464
  --pgn-color-form-control-select-bg-disabled: var(--pgn-color-gray-100);
465
+ --pgn-color-form-control-indicator-checked-bg-disabled: #0A305580;
456
466
  --pgn-color-form-control-indicator-border: var(--pgn-color-gray-700);
457
467
  --pgn-color-form-input-group-addon-bg: var(--pgn-color-gray-100);
458
468
  --pgn-color-form-input-bg-disabled: var(--pgn-color-gray-100);
459
469
  --pgn-color-form-input-base: var(--pgn-color-gray-700);
460
- --pgn-color-dropdown-link-hover-base: var(--pgn-color-gray-900);
470
+ --pgn-color-dropdown-link-hover-base: #000000FF;
461
471
  --pgn-color-dropdown-link-base: var(--pgn-color-gray-900);
462
472
  --pgn-color-dropdown-divider-bg: var(--pgn-color-gray-100);
463
473
  --pgn-color-dropdown-border: #00000026;
@@ -552,7 +562,6 @@
552
562
  --pgn-color-bubble-text-warning: var(--pgn-color-white);
553
563
  --pgn-color-bubble-text-success: var(--pgn-color-white);
554
564
  --pgn-color-breadcrumb-inverse-base: var(--pgn-color-white);
555
- --pgn-color-breadcrumb-divider: var(--pgn-color-gray-600);
556
565
  --pgn-color-breadcrumb-bg: var(--pgn-color-gray-200);
557
566
  --pgn-color-badge-bg-dark: var(--pgn-color-dark-base);
558
567
  --pgn-color-badge-bg-light: var(--pgn-color-light-base);
@@ -698,6 +707,7 @@
698
707
  --pgn-color-secondary-200: #D1D1D1FF;
699
708
  --pgn-color-secondary-100: #F4F4F4FF;
700
709
  --pgn-color-tooltip-arrow-base: var(--pgn-color-tooltip-bg-base);
710
+ --pgn-color-tab-inverse-pills-link-dropdown-toggle-border-focus: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus);
701
711
  --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-active-hover: var(--pgn-color-primary-300);
702
712
  --pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active-hover: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus);
703
713
  --pgn-color-tab-inverse-pills-link-dropdown-toggle-text-focus: var(--pgn-color-primary-500);
@@ -711,8 +721,6 @@
711
721
  --pgn-color-search-field-border-base: var(--pgn-color-gray-500);
712
722
  --pgn-color-progress-bar-bar-bg-annotated: var(--pgn-color-dark-500);
713
723
  --pgn-color-progress-bar-border: var(--pgn-color-gray-500);
714
- --pgn-color-product-tour-checkpoint-breadcrumb: var(--pgn-color-primary-500);
715
- --pgn-color-product-tour-checkpoint-border: var(--pgn-color-brand-500);
716
724
  --pgn-color-product-tour-checkpoint-bg: var(--pgn-color-light-300);
717
725
  --pgn-color-popover-body: var(--pgn-color-body-base);
718
726
  --pgn-color-popover-header-text: var(--pgn-color-headings-base);
@@ -728,7 +736,7 @@
728
736
  --pgn-color-nav-pills-inverse-tab-content-color: var(--pgn-color-nav-pills-inverse-link-text-base);
729
737
  --pgn-color-nav-pills-inverse-link-bg-active-focus-hover: var(--pgn-color-nav-pills-inverse-link-text-base);
730
738
  --pgn-color-nav-pills-inverse-link-bg-active: var(--pgn-color-nav-pills-inverse-link-text-base);
731
- --pgn-color-nav-pills-inverse-link-border-active-focus: var(--pgn-color-nav-pills-inverse-link-text-base);
739
+ --pgn-color-nav-pills-inverse-link-border-focus-hover: var(--pgn-color-nav-pills-inverse-link-border-active-focus);
732
740
  --pgn-color-nav-pills-inverse-link-border-active: var(--pgn-color-nav-pills-inverse-link-text-base);
733
741
  --pgn-color-nav-pills-inverse-link-border-base: var(--pgn-color-dark-300);
734
742
  --pgn-color-nav-pills-inverse-link-text-active-hover: var(--pgn-color-nav-pills-inverse-link-text-base);
@@ -742,7 +750,7 @@
742
750
  --pgn-color-nav-tabs-inverse-link-border-bottom: var(--pgn-color-dark-300);
743
751
  --pgn-color-nav-tabs-base-link-active-text: var(--pgn-color-primary-500);
744
752
  --pgn-color-nav-tabs-base-link-hover-bg: var(--pgn-color-light-400);
745
- --pgn-color-nav-tabs-base-border: var(--pgn-color-light-400);
753
+ --pgn-color-nav-tabs-base-border-base: var(--pgn-color-light-400);
746
754
  --pgn-color-modal-content-bg: var(--pgn-color-bg-base);
747
755
  --pgn-color-menu-select-btn-link-color: var(--pgn-color-primary-500);
748
756
  --pgn-color-menu-item-hover-color: var(--pgn-color-btn-text-tertiary);
@@ -905,8 +913,6 @@
905
913
  --pgn-color-form-control-select-base: var(--pgn-color-form-input-base);
906
914
  --pgn-color-form-control-switch-indicator-checked-bg: var(--pgn-color-success-base);
907
915
  --pgn-color-form-control-indicator-active-base: var(--pgn-color-active);
908
- --pgn-color-form-control-indicator-checked-border-base: var(--pgn-color-primary-500);
909
- --pgn-color-form-control-indicator-checked-bg-disabled: #0A305580;
910
916
  --pgn-color-form-control-indicator-checked-invalid: var(--pgn-color-danger-base);
911
917
  --pgn-color-form-control-indicator-checked-valid: var(--pgn-color-success-base);
912
918
  --pgn-color-form-control-indicator-bg-disabled: var(--pgn-color-form-input-bg-disabled);
@@ -1126,7 +1132,7 @@
1126
1132
  --pgn-elevation-pagination-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow);
1127
1133
  --pgn-elevation-form-control-select-border-focus: var(--pgn-elevation-input-btn-focus-box-shadow);
1128
1134
  --pgn-border-color-nav-tabs-link-border-focus: var(--pgn-color-nav-tabs-base-link-active-text);
1129
- --pgn-border-color-nav-tabs-link-border-hover: transparent transparent var(--pgn-color-nav-tabs-base-border);
1135
+ --pgn-border-color-nav-tabs-link-border-hover: transparent transparent var(--pgn-color-nav-tabs-base-border-base);
1130
1136
  --pgn-color-action-default-danger-900: #60161DFF;
1131
1137
  --pgn-color-action-default-danger-800: #691820FF;
1132
1138
  --pgn-color-action-default-danger-700: #731A22FF;
@@ -1178,7 +1184,7 @@
1178
1184
  --pgn-color-tab-more-link-dropdown-toggle-btn-border-focus: var(--pgn-color-tab-more-link-dropdown-toggle-bg-focus);
1179
1185
  --pgn-color-stepper-header-step-description-error: var(--pgn-color-stepper-header-step-bubble-error);
1180
1186
  --pgn-color-product-tour-checkpoint-arrow-border-top: var(--pgn-color-product-tour-checkpoint-bg);
1181
- --pgn-color-popover-danger-icon: var(--pgn-color-warning-500);
1187
+ --pgn-color-popover-danger-icon: var(--pgn-color-danger-500);
1182
1188
  --pgn-color-popover-danger-bg: var(--pgn-color-danger-100);
1183
1189
  --pgn-color-popover-warning-icon: var(--pgn-color-warning-500);
1184
1190
  --pgn-color-popover-warning-bg: var(--pgn-color-warning-100);
@@ -1194,7 +1200,7 @@
1194
1200
  --pgn-color-nav-pills-inverse-link-bg-hover: var(--pgn-color-nav-pills-inverse-link-border-base);
1195
1201
  --pgn-color-nav-pills-inverse-link-border-active-hover: var(--pgn-color-nav-pills-inverse-link-border-base);
1196
1202
  --pgn-color-nav-pills-inverse-link-text-active-focus: var(--pgn-color-nav-pills-inverse-link-text-active);
1197
- --pgn-color-nav-pills-base-link-border: var(--pgn-color-nav-tabs-base-border);
1203
+ --pgn-color-nav-pills-base-link-border: var(--pgn-color-nav-tabs-base-border-base);
1198
1204
  --pgn-color-nav-pills-base-link-active-bg: var(--pgn-color-bg-active);
1199
1205
  --pgn-color-nav-tabs-inverse-link-bg-hover: var(--pgn-color-nav-tabs-inverse-link-border-bottom);
1200
1206
  --pgn-color-menu-item-focus-bg: var(--pgn-color-btn-active-bg-tertiary);
@@ -1480,6 +1486,7 @@
1480
1486
  --pgn-color-form-control-checkbox-indicator-indeterminate-base: var(--pgn-color-form-control-indicator-checked-base);
1481
1487
  --pgn-color-form-control-indicator-active-border: var(--pgn-color-form-control-indicator-active-bg);
1482
1488
  --pgn-color-form-control-indicator-checked-border-focus: var(--pgn-color-form-input-focus-border);
1489
+ --pgn-color-form-control-indicator-checked-border-base: var(--pgn-color-form-control-indicator-checked-base);
1483
1490
  --pgn-color-btn-disabled-border-warning: var(--pgn-color-btn-border-warning);
1484
1491
  --pgn-color-btn-disabled-border-success: var(--pgn-color-btn-border-success);
1485
1492
  --pgn-color-btn-disabled-border-outline-primary: var(--pgn-color-btn-hover-text-outline-primary);