@openedx/paragon 23.8.0 → 23.10.0

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 (15) hide show
  1. package/bin/paragon-scripts.js +5 -0
  2. package/dist/Button/_mixins.scss +25 -3
  3. package/dist/Button/index.scss +38 -630
  4. package/dist/core.css +8 -17
  5. package/dist/core.css.map +1 -1
  6. package/dist/core.min.css +1 -1
  7. package/lib/__tests__/build-scss.test.js +14 -0
  8. package/lib/build-scss.js +10 -6
  9. package/lib/build-tokens.js +8 -0
  10. package/package.json +1 -1
  11. package/src/Button/_mixins.scss +25 -3
  12. package/src/Button/index.scss +38 -630
  13. package/tokens/src/themes/light/components/Alert.json +14 -0
  14. package/tokens/style-dictionary.js +64 -1
  15. package/tokens/utils.js +63 -16
package/dist/core.css CHANGED
@@ -10071,7 +10071,6 @@ input[type=button].btn-block {
10071
10071
  --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-primary);
10072
10072
  --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-primary);
10073
10073
  --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-primary);
10074
- box-shadow: var(--pgn-elevation-btn-box-shadow-base);
10075
10074
  }
10076
10075
  .btn-outline-primary {
10077
10076
  --pgn-btn-color: var(--pgn-color-btn-text-outline-primary);
@@ -10144,7 +10143,6 @@ input[type=button].btn-block {
10144
10143
  --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-secondary);
10145
10144
  --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-secondary);
10146
10145
  --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-secondary);
10147
- box-shadow: var(--pgn-elevation-btn-box-shadow-base);
10148
10146
  }
10149
10147
  .btn-outline-secondary {
10150
10148
  --pgn-btn-color: var(--pgn-color-btn-text-outline-secondary);
@@ -10171,9 +10169,9 @@ input[type=button].btn-block {
10171
10169
  --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-secondary);
10172
10170
  --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-secondary);
10173
10171
  --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-secondary);
10172
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-secondary);
10174
10173
  --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-secondary);
10175
10174
  --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-secondary);
10176
- --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-secondary);
10177
10175
  --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-secondary);
10178
10176
  --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-secondary);
10179
10177
  --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-secondary);
@@ -10217,7 +10215,6 @@ input[type=button].btn-block {
10217
10215
  --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-brand);
10218
10216
  --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-brand);
10219
10217
  --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-brand);
10220
- box-shadow: var(--pgn-elevation-btn-box-shadow-base);
10221
10218
  }
10222
10219
  .btn-outline-brand {
10223
10220
  --pgn-btn-color: var(--pgn-color-btn-text-outline-brand);
@@ -10290,7 +10287,6 @@ input[type=button].btn-block {
10290
10287
  --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-danger);
10291
10288
  --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-danger);
10292
10289
  --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-danger);
10293
- box-shadow: var(--pgn-elevation-btn-box-shadow-base);
10294
10290
  }
10295
10291
  .btn-outline-danger {
10296
10292
  --pgn-btn-color: var(--pgn-color-btn-text-outline-danger);
@@ -10363,7 +10359,6 @@ input[type=button].btn-block {
10363
10359
  --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-dark);
10364
10360
  --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-dark);
10365
10361
  --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-dark);
10366
- box-shadow: var(--pgn-elevation-btn-box-shadow-base);
10367
10362
  }
10368
10363
  .btn-outline-dark {
10369
10364
  --pgn-btn-color: var(--pgn-color-btn-text-outline-dark);
@@ -10390,9 +10385,9 @@ input[type=button].btn-block {
10390
10385
  --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-dark);
10391
10386
  --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-dark);
10392
10387
  --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-dark);
10388
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-dark);
10393
10389
  --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-dark);
10394
10390
  --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-dark);
10395
- --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-dark);
10396
10391
  --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-dark);
10397
10392
  --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-dark);
10398
10393
  --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-dark);
@@ -10414,9 +10409,9 @@ input[type=button].btn-block {
10414
10409
  --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-dark);
10415
10410
  --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-dark);
10416
10411
  --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-dark);
10417
- --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-border-inverse-outline-dark);
10412
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-dark);
10418
10413
  --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-dark);
10419
- --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-outline-inverse-outline-dark);
10414
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-dark);
10420
10415
  --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-dark);
10421
10416
  }
10422
10417
  .btn-info {
@@ -10436,7 +10431,6 @@ input[type=button].btn-block {
10436
10431
  --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-info);
10437
10432
  --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-info);
10438
10433
  --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-info);
10439
- box-shadow: var(--pgn-elevation-btn-box-shadow-base);
10440
10434
  }
10441
10435
  .btn-outline-info {
10442
10436
  --pgn-btn-color: var(--pgn-color-btn-text-outline-info);
@@ -10509,7 +10503,6 @@ input[type=button].btn-block {
10509
10503
  --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-light);
10510
10504
  --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-light);
10511
10505
  --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-light);
10512
- box-shadow: var(--pgn-elevation-btn-box-shadow-base);
10513
10506
  }
10514
10507
  .btn-outline-light {
10515
10508
  --pgn-btn-color: var(--pgn-color-btn-text-outline-light);
@@ -10536,9 +10529,9 @@ input[type=button].btn-block {
10536
10529
  --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-light);
10537
10530
  --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-light);
10538
10531
  --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-light);
10532
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-light);
10539
10533
  --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-light);
10540
10534
  --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-light);
10541
- --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-light);
10542
10535
  --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-light);
10543
10536
  --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-light);
10544
10537
  --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-light);
@@ -10582,7 +10575,6 @@ input[type=button].btn-block {
10582
10575
  --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-success);
10583
10576
  --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-success);
10584
10577
  --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-success);
10585
- box-shadow: var(--pgn-elevation-btn-box-shadow-base);
10586
10578
  }
10587
10579
  .btn-outline-success {
10588
10580
  --pgn-btn-color: var(--pgn-color-btn-text-outline-success);
@@ -10655,7 +10647,6 @@ input[type=button].btn-block {
10655
10647
  --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-warning);
10656
10648
  --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-warning);
10657
10649
  --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-warning);
10658
- box-shadow: var(--pgn-elevation-btn-box-shadow-base);
10659
10650
  }
10660
10651
  .btn-outline-warning {
10661
10652
  --pgn-btn-color: var(--pgn-color-btn-text-outline-warning);
@@ -10682,9 +10673,9 @@ input[type=button].btn-block {
10682
10673
  --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-warning);
10683
10674
  --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-warning);
10684
10675
  --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-warning);
10676
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-warning);
10685
10677
  --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-warning);
10686
10678
  --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-warning);
10687
- --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-warning);
10688
10679
  --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-warning);
10689
10680
  --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-warning);
10690
10681
  --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-warning);
@@ -10706,10 +10697,10 @@ input[type=button].btn-block {
10706
10697
  --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-warning);
10707
10698
  --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-warning);
10708
10699
  --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-warning);
10709
- --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-border-inverse-outline-warning);
10700
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-warning);
10710
10701
  --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-warning);
10711
10702
  --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-warning);
10712
- --pgn-btn-focus-bg: var(--pgn-color-btn-focus-outline-inverse-outline-warning);
10703
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-warning);
10713
10704
  }
10714
10705
  .btn-tertiary {
10715
10706
  --pgn-btn-color: var(--pgn-color-btn-text-tertiary);