@patternfly/patternfly 6.0.0-alpha.180 → 6.0.0-alpha.182

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 (18) hide show
  1. package/base/patternfly-variables.css +54 -34
  2. package/base/tokens/tokens-charts-dark.scss +1 -1
  3. package/base/tokens/tokens-charts.scss +1 -1
  4. package/base/tokens/tokens-dark.scss +1 -1
  5. package/base/tokens/tokens-default.scss +55 -35
  6. package/base/tokens/tokens-palette.scss +1 -1
  7. package/components/NotificationDrawer/notification-drawer.css +5 -0
  8. package/components/NotificationDrawer/notification-drawer.scss +8 -0
  9. package/components/_index.css +5 -0
  10. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +129 -0
  11. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +268 -0
  12. package/package.json +1 -1
  13. package/patternfly-base-no-globals.css +54 -34
  14. package/patternfly-base.css +54 -34
  15. package/patternfly-no-globals.css +59 -34
  16. package/patternfly.css +59 -34
  17. package/patternfly.min.css +1 -1
  18. package/patternfly.min.css.map +1 -1
package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md CHANGED
@@ -602,6 +602,36 @@ section: components
602
602
  class="pf-v6-c-notification-drawer__list-item-timestamp"
603
603
  >50 minutes ago</div>
604
604
  </li>
605
+ <li
606
+ class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success"
607
+ >
608
+ <div class="pf-v6-c-notification-drawer__list-item-header">
609
+ <span
610
+ class="pf-v6-c-notification-drawer__list-item-header-icon"
611
+ >
612
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
613
+ </span>
614
+ <h2
615
+ class="pf-v6-c-notification-drawer__list-item-header-title"
616
+ >
617
+ <span class="pf-v6-screen-reader">Success notification:</span>
618
+ Notification drawer item title
619
+ </h2>
620
+ </div>
621
+ <div
622
+ class="pf-v6-c-notification-drawer__list-item-action pf-m-no-offset"
623
+ >
624
+ <button class="pf-v6-c-button pf-m-primary" type="button">
625
+ <span class="pf-v6-c-button__text">Action</span>
626
+ </button>
627
+ </div>
628
+ <div
629
+ class="pf-v6-c-notification-drawer__list-item-description"
630
+ >This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.</div>
631
+ <div
632
+ class="pf-v6-c-notification-drawer__list-item-timestamp"
633
+ >55 minutes ago</div>
634
+ </li>
605
635
  </ul>
606
636
  </div>
607
637
  </div>
@@ -1216,6 +1246,36 @@ section: components
1216
1246
  class="pf-v6-c-notification-drawer__list-item-timestamp"
1217
1247
  >50 minutes ago</div>
1218
1248
  </li>
1249
+ <li
1250
+ class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success"
1251
+ >
1252
+ <div class="pf-v6-c-notification-drawer__list-item-header">
1253
+ <span
1254
+ class="pf-v6-c-notification-drawer__list-item-header-icon"
1255
+ >
1256
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
1257
+ </span>
1258
+ <h2
1259
+ class="pf-v6-c-notification-drawer__list-item-header-title"
1260
+ >
1261
+ <span class="pf-v6-screen-reader">Success notification:</span>
1262
+ Notification drawer item title
1263
+ </h2>
1264
+ </div>
1265
+ <div
1266
+ class="pf-v6-c-notification-drawer__list-item-action pf-m-no-offset"
1267
+ >
1268
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1269
+ <span class="pf-v6-c-button__text">Action</span>
1270
+ </button>
1271
+ </div>
1272
+ <div
1273
+ class="pf-v6-c-notification-drawer__list-item-description"
1274
+ >This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.</div>
1275
+ <div
1276
+ class="pf-v6-c-notification-drawer__list-item-timestamp"
1277
+ >55 minutes ago</div>
1278
+ </li>
1219
1279
  </ul>
1220
1280
  </div>
1221
1281
  </div>
@@ -1833,6 +1893,36 @@ section: components
1833
1893
  class="pf-v6-c-notification-drawer__list-item-timestamp"
1834
1894
  >50 minutes ago</div>
1835
1895
  </li>
1896
+ <li
1897
+ class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success"
1898
+ >
1899
+ <div class="pf-v6-c-notification-drawer__list-item-header">
1900
+ <span
1901
+ class="pf-v6-c-notification-drawer__list-item-header-icon"
1902
+ >
1903
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
1904
+ </span>
1905
+ <h2
1906
+ class="pf-v6-c-notification-drawer__list-item-header-title"
1907
+ >
1908
+ <span class="pf-v6-screen-reader">Success notification:</span>
1909
+ Notification drawer item title
1910
+ </h2>
1911
+ </div>
1912
+ <div
1913
+ class="pf-v6-c-notification-drawer__list-item-action pf-m-no-offset"
1914
+ >
1915
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1916
+ <span class="pf-v6-c-button__text">Action</span>
1917
+ </button>
1918
+ </div>
1919
+ <div
1920
+ class="pf-v6-c-notification-drawer__list-item-description"
1921
+ >This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.</div>
1922
+ <div
1923
+ class="pf-v6-c-notification-drawer__list-item-timestamp"
1924
+ >55 minutes ago</div>
1925
+ </li>
1836
1926
  </ul>
1837
1927
  </div>
1838
1928
  </div>
@@ -2445,6 +2535,36 @@ section: components
2445
2535
  class="pf-v6-c-notification-drawer__list-item-timestamp"
2446
2536
  >50 minutes ago</div>
2447
2537
  </li>
2538
+ <li
2539
+ class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success"
2540
+ >
2541
+ <div class="pf-v6-c-notification-drawer__list-item-header">
2542
+ <span
2543
+ class="pf-v6-c-notification-drawer__list-item-header-icon"
2544
+ >
2545
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
2546
+ </span>
2547
+ <h2
2548
+ class="pf-v6-c-notification-drawer__list-item-header-title"
2549
+ >
2550
+ <span class="pf-v6-screen-reader">Success notification:</span>
2551
+ Notification drawer item title
2552
+ </h2>
2553
+ </div>
2554
+ <div
2555
+ class="pf-v6-c-notification-drawer__list-item-action pf-m-no-offset"
2556
+ >
2557
+ <button class="pf-v6-c-button pf-m-primary" type="button">
2558
+ <span class="pf-v6-c-button__text">Action</span>
2559
+ </button>
2560
+ </div>
2561
+ <div
2562
+ class="pf-v6-c-notification-drawer__list-item-description"
2563
+ >This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.</div>
2564
+ <div
2565
+ class="pf-v6-c-notification-drawer__list-item-timestamp"
2566
+ >55 minutes ago</div>
2567
+ </li>
2448
2568
  </ul>
2449
2569
  </div>
2450
2570
  </div>
@@ -3134,6 +3254,43 @@ section: components
3134
3254
  class="pf-v6-c-notification-drawer__list-item-timestamp"
3135
3255
  >50 minutes ago</div>
3136
3256
  </li>
3257
+ <li
3258
+ class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success"
3259
+ >
3260
+ <div
3261
+ class="pf-v6-c-notification-drawer__list-item-header"
3262
+ >
3263
+ <span
3264
+ class="pf-v6-c-notification-drawer__list-item-header-icon"
3265
+ >
3266
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
3267
+ </span>
3268
+ <h2
3269
+ class="pf-v6-c-notification-drawer__list-item-header-title"
3270
+ >
3271
+ <span
3272
+ class="pf-v6-screen-reader"
3273
+ >Success notification:</span>
3274
+ Notification drawer item title
3275
+ </h2>
3276
+ </div>
3277
+ <div
3278
+ class="pf-v6-c-notification-drawer__list-item-action pf-m-no-offset"
3279
+ >
3280
+ <button
3281
+ class="pf-v6-c-button pf-m-primary"
3282
+ type="button"
3283
+ >
3284
+ <span class="pf-v6-c-button__text">Action</span>
3285
+ </button>
3286
+ </div>
3287
+ <div
3288
+ class="pf-v6-c-notification-drawer__list-item-description"
3289
+ >This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.</div>
3290
+ <div
3291
+ class="pf-v6-c-notification-drawer__list-item-timestamp"
3292
+ >55 minutes ago</div>
3293
+ </li>
3137
3294
  </ul>
3138
3295
  </section>
3139
3296
  <section
@@ -3470,6 +3627,43 @@ section: components
3470
3627
  class="pf-v6-c-notification-drawer__list-item-timestamp"
3471
3628
  >50 minutes ago</div>
3472
3629
  </li>
3630
+ <li
3631
+ class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success"
3632
+ >
3633
+ <div
3634
+ class="pf-v6-c-notification-drawer__list-item-header"
3635
+ >
3636
+ <span
3637
+ class="pf-v6-c-notification-drawer__list-item-header-icon"
3638
+ >
3639
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
3640
+ </span>
3641
+ <h2
3642
+ class="pf-v6-c-notification-drawer__list-item-header-title"
3643
+ >
3644
+ <span
3645
+ class="pf-v6-screen-reader"
3646
+ >Success notification:</span>
3647
+ Notification drawer item title
3648
+ </h2>
3649
+ </div>
3650
+ <div
3651
+ class="pf-v6-c-notification-drawer__list-item-action pf-m-no-offset"
3652
+ >
3653
+ <button
3654
+ class="pf-v6-c-button pf-m-primary"
3655
+ type="button"
3656
+ >
3657
+ <span class="pf-v6-c-button__text">Action</span>
3658
+ </button>
3659
+ </div>
3660
+ <div
3661
+ class="pf-v6-c-notification-drawer__list-item-description"
3662
+ >This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.</div>
3663
+ <div
3664
+ class="pf-v6-c-notification-drawer__list-item-timestamp"
3665
+ >55 minutes ago</div>
3666
+ </li>
3473
3667
  </ul>
3474
3668
  </section>
3475
3669
  <section class="pf-v6-c-notification-drawer__group">
@@ -3808,6 +4002,43 @@ section: components
3808
4002
  class="pf-v6-c-notification-drawer__list-item-timestamp"
3809
4003
  >50 minutes ago</div>
3810
4004
  </li>
4005
+ <li
4006
+ class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success"
4007
+ >
4008
+ <div
4009
+ class="pf-v6-c-notification-drawer__list-item-header"
4010
+ >
4011
+ <span
4012
+ class="pf-v6-c-notification-drawer__list-item-header-icon"
4013
+ >
4014
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
4015
+ </span>
4016
+ <h2
4017
+ class="pf-v6-c-notification-drawer__list-item-header-title"
4018
+ >
4019
+ <span
4020
+ class="pf-v6-screen-reader"
4021
+ >Success notification:</span>
4022
+ Notification drawer item title
4023
+ </h2>
4024
+ </div>
4025
+ <div
4026
+ class="pf-v6-c-notification-drawer__list-item-action pf-m-no-offset"
4027
+ >
4028
+ <button
4029
+ class="pf-v6-c-button pf-m-primary"
4030
+ type="button"
4031
+ >
4032
+ <span class="pf-v6-c-button__text">Action</span>
4033
+ </button>
4034
+ </div>
4035
+ <div
4036
+ class="pf-v6-c-notification-drawer__list-item-description"
4037
+ >This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.</div>
4038
+ <div
4039
+ class="pf-v6-c-notification-drawer__list-item-timestamp"
4040
+ >55 minutes ago</div>
4041
+ </li>
3811
4042
  </ul>
3812
4043
  </section>
3813
4044
  <section class="pf-v6-c-notification-drawer__group">
@@ -4146,6 +4377,43 @@ section: components
4146
4377
  class="pf-v6-c-notification-drawer__list-item-timestamp"
4147
4378
  >50 minutes ago</div>
4148
4379
  </li>
4380
+ <li
4381
+ class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success"
4382
+ >
4383
+ <div
4384
+ class="pf-v6-c-notification-drawer__list-item-header"
4385
+ >
4386
+ <span
4387
+ class="pf-v6-c-notification-drawer__list-item-header-icon"
4388
+ >
4389
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
4390
+ </span>
4391
+ <h2
4392
+ class="pf-v6-c-notification-drawer__list-item-header-title"
4393
+ >
4394
+ <span
4395
+ class="pf-v6-screen-reader"
4396
+ >Success notification:</span>
4397
+ Notification drawer item title
4398
+ </h2>
4399
+ </div>
4400
+ <div
4401
+ class="pf-v6-c-notification-drawer__list-item-action pf-m-no-offset"
4402
+ >
4403
+ <button
4404
+ class="pf-v6-c-button pf-m-primary"
4405
+ type="button"
4406
+ >
4407
+ <span class="pf-v6-c-button__text">Action</span>
4408
+ </button>
4409
+ </div>
4410
+ <div
4411
+ class="pf-v6-c-notification-drawer__list-item-description"
4412
+ >This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.</div>
4413
+ <div
4414
+ class="pf-v6-c-notification-drawer__list-item-timestamp"
4415
+ >55 minutes ago</div>
4416
+ </li>
4149
4417
  </ul>
4150
4418
  </section>
4151
4419
  </div>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.180",
4
+ "version": "6.0.0-alpha.182",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base-no-globals.css CHANGED
@@ -4954,15 +4954,15 @@
4954
4954
  --pf-t--global--box-shadow--color--100: rgba(0, 0, 0, 0.1600);
4955
4955
  --pf-t--global--box-shadow--color--200: rgba(0, 0, 0, 0.1200);
4956
4956
  --pf-t--global--box-shadow--spread--100: 0px;
4957
- --pf-t--global--breakpoint--100: 0px;
4958
- --pf-t--global--breakpoint--200: 576px;
4959
- --pf-t--global--breakpoint--250: 640px;
4960
- --pf-t--global--breakpoint--300: 768px;
4961
- --pf-t--global--breakpoint--350: 960px;
4962
- --pf-t--global--breakpoint--400: 992px;
4963
- --pf-t--global--breakpoint--500: 1200px;
4964
- --pf-t--global--breakpoint--550: 1280px;
4965
- --pf-t--global--breakpoint--600: 1450px;
4957
+ --pf-t--global--breakpoint--100: 0rem;
4958
+ --pf-t--global--breakpoint--200: 36rem;
4959
+ --pf-t--global--breakpoint--250: 40rem;
4960
+ --pf-t--global--breakpoint--300: 48rem;
4961
+ --pf-t--global--breakpoint--350: 60rem;
4962
+ --pf-t--global--breakpoint--400: 62rem;
4963
+ --pf-t--global--breakpoint--500: 75rem;
4964
+ --pf-t--global--breakpoint--550: 80rem;
4965
+ --pf-t--global--breakpoint--600: 90.625rem;
4966
4966
  --pf-t--global--delay--100: 0ms;
4967
4967
  --pf-t--global--delay--200: 50ms;
4968
4968
  --pf-t--global--delay--300: 100ms;
@@ -4974,37 +4974,41 @@
4974
4974
  --pf-t--global--duration--50: 50ms;
4975
4975
  --pf-t--global--duration--500: 500ms;
4976
4976
  --pf-t--global--duration--600: 600ms;
4977
- --pf-t--global--font--family--100: "Red Hat Text VF";
4978
- --pf-t--global--font--family--200: "Red Hat Display VF";
4979
- --pf-t--global--font--family--300: "Red Hat Mono VF";
4977
+ --pf-t--global--font--family--100: "Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", helvetica, arial, sans-serif;
4978
+ --pf-t--global--font--family--200: "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", helvetica, arial, sans-serif;
4979
+ --pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", courier, monospace;
4980
4980
  --pf-t--global--font--line-height--100: 1.3;
4981
4981
  --pf-t--global--font--line-height--200: 1.5;
4982
- --pf-t--global--font--size--100: 12px;
4983
- --pf-t--global--font--size--200: 14px;
4984
- --pf-t--global--font--size--300: 16px;
4985
- --pf-t--global--font--size--400: 18px;
4986
- --pf-t--global--font--size--500: 20px;
4987
- --pf-t--global--font--size--600: 22px;
4988
- --pf-t--global--font--size--700: 28px;
4989
- --pf-t--global--font--size--800: 36px;
4982
+ --pf-t--global--font--size--100: 0.75rem;
4983
+ --pf-t--global--font--size--200: 0.875rem;
4984
+ --pf-t--global--font--size--300: 1rem;
4985
+ --pf-t--global--font--size--400: 1.125rem;
4986
+ --pf-t--global--font--size--500: 1.25rem;
4987
+ --pf-t--global--font--size--600: 1.375rem;
4988
+ --pf-t--global--font--size--700: 1.75rem;
4989
+ --pf-t--global--font--size--800: 2.25rem;
4990
4990
  --pf-t--global--font--weight--100: 400;
4991
4991
  --pf-t--global--font--weight--200: 500;
4992
4992
  --pf-t--global--font--weight--300: 700;
4993
4993
  --pf-t--global--font--weight--400: 700;
4994
- --pf-t--global--icon--size--100: 12px;
4995
- --pf-t--global--icon--size--200: 14px;
4996
- --pf-t--global--icon--size--250: 16px;
4997
- --pf-t--global--icon--size--300: 22px;
4998
- --pf-t--global--icon--size--400: 56px;
4999
- --pf-t--global--icon--size--500: 96px;
5000
- --pf-t--global--spacer--100: 4px;
5001
- --pf-t--global--spacer--200: 8px;
5002
- --pf-t--global--spacer--300: 16px;
5003
- --pf-t--global--spacer--400: 24px;
5004
- --pf-t--global--spacer--500: 32px;
5005
- --pf-t--global--spacer--600: 48px;
5006
- --pf-t--global--spacer--700: 64px;
5007
- --pf-t--global--spacer--800: 80px;
4994
+ --pf-t--global--icon--size--100: 0.75rem;
4995
+ --pf-t--global--icon--size--200: 0.875rem;
4996
+ --pf-t--global--icon--size--250: 1rem;
4997
+ --pf-t--global--icon--size--300: 1.375rem;
4998
+ --pf-t--global--icon--size--400: 3.5rem;
4999
+ --pf-t--global--icon--size--500: 6rem;
5000
+ --pf-t--global--spacer--100: 0.25rem;
5001
+ --pf-t--global--spacer--200: 0.5rem;
5002
+ --pf-t--global--spacer--300: 1rem;
5003
+ --pf-t--global--spacer--400: 1.5rem;
5004
+ --pf-t--global--spacer--500: 2rem;
5005
+ --pf-t--global--spacer--600: 3rem;
5006
+ --pf-t--global--spacer--700: 4rem;
5007
+ --pf-t--global--spacer--800: 5rem;
5008
+ --pf-t--global--text-decoration--line--100: none;
5009
+ --pf-t--global--text-decoration--line--200: underline;
5010
+ --pf-t--global--text-decoration--style--100: solid;
5011
+ --pf-t--global--text-decoration--style--200: dashed;
5008
5012
  --pf-t--global--timing-function--100: cubic-bezier(.4, 0, .7, .2);
5009
5013
  --pf-t--global--timing-function--200: cubic-bezier(.4, 0, .2, 1);
5010
5014
  --pf-t--global--timing-function--300: cubic-bezier(0, 0, .2, 1);
@@ -5205,6 +5209,18 @@
5205
5209
  --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
5206
5210
  --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
5207
5211
  --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
5212
+ --pf-t--global--text-decoration--editable-text--line--default: var(--pf-t--global--text-decoration--line--200);
5213
+ --pf-t--global--text-decoration--editable-text--line--hover: var(--pf-t--global--text-decoration--line--200);
5214
+ --pf-t--global--text-decoration--editable-text--style--default: var(--pf-t--global--text-decoration--style--200);
5215
+ --pf-t--global--text-decoration--editable-text--style--hover: var(--pf-t--global--text-decoration--style--200);
5216
+ --pf-t--global--text-decoration--help-text--line--default: var(--pf-t--global--text-decoration--line--200);
5217
+ --pf-t--global--text-decoration--help-text--line--hover: var(--pf-t--global--text-decoration--line--200);
5218
+ --pf-t--global--text-decoration--help-text--style--default: var(--pf-t--global--text-decoration--style--200);
5219
+ --pf-t--global--text-decoration--help-text--style--hover: var(--pf-t--global--text-decoration--style--200);
5220
+ --pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--style--200);
5221
+ --pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--style--200);
5222
+ --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--100);
5223
+ --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--100);
5208
5224
  --pf-t--global--z-index--2xl: var(--pf-t--global--z-index--600);
5209
5225
  --pf-t--global--z-index--lg: var(--pf-t--global--z-index--400);
5210
5226
  --pf-t--global--z-index--md: var(--pf-t--global--z-index--300);
@@ -5373,6 +5389,8 @@
5373
5389
  --pf-t--global--spacer--gap--group-to-group--horizontal: var(--pf-t--global--spacer--2xl);
5374
5390
  --pf-t--global--spacer--gap--group-to-group--vertical: var(--pf-t--global--spacer--lg);
5375
5391
  --pf-t--global--spacer--gap--text-to-element--default: var(--pf-t--global--spacer--sm);
5392
+ --pf-t--global--spacer--gutter--default: var(--pf-t--global--spacer--md);
5393
+ --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--lg);
5376
5394
  --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
5377
5395
  --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300);
5378
5396
  --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--100);
@@ -5386,6 +5404,8 @@
5386
5404
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
5387
5405
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
5388
5406
  --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200);
5407
+ --pf-t--global--text-decoration--offset--default: var(--pf-t--global--spacer--xs);
5408
+ --pf-t--global--text-decoration--width--default: var(--pf-t--global--border--width--regular);
5389
5409
  --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
5390
5410
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
5391
5411
  --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
package/patternfly-base.css CHANGED
@@ -5075,15 +5075,15 @@ button) {
5075
5075
  --pf-t--global--box-shadow--color--100: rgba(0, 0, 0, 0.1600);
5076
5076
  --pf-t--global--box-shadow--color--200: rgba(0, 0, 0, 0.1200);
5077
5077
  --pf-t--global--box-shadow--spread--100: 0px;
5078
- --pf-t--global--breakpoint--100: 0px;
5079
- --pf-t--global--breakpoint--200: 576px;
5080
- --pf-t--global--breakpoint--250: 640px;
5081
- --pf-t--global--breakpoint--300: 768px;
5082
- --pf-t--global--breakpoint--350: 960px;
5083
- --pf-t--global--breakpoint--400: 992px;
5084
- --pf-t--global--breakpoint--500: 1200px;
5085
- --pf-t--global--breakpoint--550: 1280px;
5086
- --pf-t--global--breakpoint--600: 1450px;
5078
+ --pf-t--global--breakpoint--100: 0rem;
5079
+ --pf-t--global--breakpoint--200: 36rem;
5080
+ --pf-t--global--breakpoint--250: 40rem;
5081
+ --pf-t--global--breakpoint--300: 48rem;
5082
+ --pf-t--global--breakpoint--350: 60rem;
5083
+ --pf-t--global--breakpoint--400: 62rem;
5084
+ --pf-t--global--breakpoint--500: 75rem;
5085
+ --pf-t--global--breakpoint--550: 80rem;
5086
+ --pf-t--global--breakpoint--600: 90.625rem;
5087
5087
  --pf-t--global--delay--100: 0ms;
5088
5088
  --pf-t--global--delay--200: 50ms;
5089
5089
  --pf-t--global--delay--300: 100ms;
@@ -5095,37 +5095,41 @@ button) {
5095
5095
  --pf-t--global--duration--50: 50ms;
5096
5096
  --pf-t--global--duration--500: 500ms;
5097
5097
  --pf-t--global--duration--600: 600ms;
5098
- --pf-t--global--font--family--100: "Red Hat Text VF";
5099
- --pf-t--global--font--family--200: "Red Hat Display VF";
5100
- --pf-t--global--font--family--300: "Red Hat Mono VF";
5098
+ --pf-t--global--font--family--100: "Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", helvetica, arial, sans-serif;
5099
+ --pf-t--global--font--family--200: "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", helvetica, arial, sans-serif;
5100
+ --pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", courier, monospace;
5101
5101
  --pf-t--global--font--line-height--100: 1.3;
5102
5102
  --pf-t--global--font--line-height--200: 1.5;
5103
- --pf-t--global--font--size--100: 12px;
5104
- --pf-t--global--font--size--200: 14px;
5105
- --pf-t--global--font--size--300: 16px;
5106
- --pf-t--global--font--size--400: 18px;
5107
- --pf-t--global--font--size--500: 20px;
5108
- --pf-t--global--font--size--600: 22px;
5109
- --pf-t--global--font--size--700: 28px;
5110
- --pf-t--global--font--size--800: 36px;
5103
+ --pf-t--global--font--size--100: 0.75rem;
5104
+ --pf-t--global--font--size--200: 0.875rem;
5105
+ --pf-t--global--font--size--300: 1rem;
5106
+ --pf-t--global--font--size--400: 1.125rem;
5107
+ --pf-t--global--font--size--500: 1.25rem;
5108
+ --pf-t--global--font--size--600: 1.375rem;
5109
+ --pf-t--global--font--size--700: 1.75rem;
5110
+ --pf-t--global--font--size--800: 2.25rem;
5111
5111
  --pf-t--global--font--weight--100: 400;
5112
5112
  --pf-t--global--font--weight--200: 500;
5113
5113
  --pf-t--global--font--weight--300: 700;
5114
5114
  --pf-t--global--font--weight--400: 700;
5115
- --pf-t--global--icon--size--100: 12px;
5116
- --pf-t--global--icon--size--200: 14px;
5117
- --pf-t--global--icon--size--250: 16px;
5118
- --pf-t--global--icon--size--300: 22px;
5119
- --pf-t--global--icon--size--400: 56px;
5120
- --pf-t--global--icon--size--500: 96px;
5121
- --pf-t--global--spacer--100: 4px;
5122
- --pf-t--global--spacer--200: 8px;
5123
- --pf-t--global--spacer--300: 16px;
5124
- --pf-t--global--spacer--400: 24px;
5125
- --pf-t--global--spacer--500: 32px;
5126
- --pf-t--global--spacer--600: 48px;
5127
- --pf-t--global--spacer--700: 64px;
5128
- --pf-t--global--spacer--800: 80px;
5115
+ --pf-t--global--icon--size--100: 0.75rem;
5116
+ --pf-t--global--icon--size--200: 0.875rem;
5117
+ --pf-t--global--icon--size--250: 1rem;
5118
+ --pf-t--global--icon--size--300: 1.375rem;
5119
+ --pf-t--global--icon--size--400: 3.5rem;
5120
+ --pf-t--global--icon--size--500: 6rem;
5121
+ --pf-t--global--spacer--100: 0.25rem;
5122
+ --pf-t--global--spacer--200: 0.5rem;
5123
+ --pf-t--global--spacer--300: 1rem;
5124
+ --pf-t--global--spacer--400: 1.5rem;
5125
+ --pf-t--global--spacer--500: 2rem;
5126
+ --pf-t--global--spacer--600: 3rem;
5127
+ --pf-t--global--spacer--700: 4rem;
5128
+ --pf-t--global--spacer--800: 5rem;
5129
+ --pf-t--global--text-decoration--line--100: none;
5130
+ --pf-t--global--text-decoration--line--200: underline;
5131
+ --pf-t--global--text-decoration--style--100: solid;
5132
+ --pf-t--global--text-decoration--style--200: dashed;
5129
5133
  --pf-t--global--timing-function--100: cubic-bezier(.4, 0, .7, .2);
5130
5134
  --pf-t--global--timing-function--200: cubic-bezier(.4, 0, .2, 1);
5131
5135
  --pf-t--global--timing-function--300: cubic-bezier(0, 0, .2, 1);
@@ -5326,6 +5330,18 @@ button) {
5326
5330
  --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
5327
5331
  --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
5328
5332
  --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
5333
+ --pf-t--global--text-decoration--editable-text--line--default: var(--pf-t--global--text-decoration--line--200);
5334
+ --pf-t--global--text-decoration--editable-text--line--hover: var(--pf-t--global--text-decoration--line--200);
5335
+ --pf-t--global--text-decoration--editable-text--style--default: var(--pf-t--global--text-decoration--style--200);
5336
+ --pf-t--global--text-decoration--editable-text--style--hover: var(--pf-t--global--text-decoration--style--200);
5337
+ --pf-t--global--text-decoration--help-text--line--default: var(--pf-t--global--text-decoration--line--200);
5338
+ --pf-t--global--text-decoration--help-text--line--hover: var(--pf-t--global--text-decoration--line--200);
5339
+ --pf-t--global--text-decoration--help-text--style--default: var(--pf-t--global--text-decoration--style--200);
5340
+ --pf-t--global--text-decoration--help-text--style--hover: var(--pf-t--global--text-decoration--style--200);
5341
+ --pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--style--200);
5342
+ --pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--style--200);
5343
+ --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--100);
5344
+ --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--100);
5329
5345
  --pf-t--global--z-index--2xl: var(--pf-t--global--z-index--600);
5330
5346
  --pf-t--global--z-index--lg: var(--pf-t--global--z-index--400);
5331
5347
  --pf-t--global--z-index--md: var(--pf-t--global--z-index--300);
@@ -5494,6 +5510,8 @@ button) {
5494
5510
  --pf-t--global--spacer--gap--group-to-group--horizontal: var(--pf-t--global--spacer--2xl);
5495
5511
  --pf-t--global--spacer--gap--group-to-group--vertical: var(--pf-t--global--spacer--lg);
5496
5512
  --pf-t--global--spacer--gap--text-to-element--default: var(--pf-t--global--spacer--sm);
5513
+ --pf-t--global--spacer--gutter--default: var(--pf-t--global--spacer--md);
5514
+ --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--lg);
5497
5515
  --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
5498
5516
  --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300);
5499
5517
  --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--100);
@@ -5507,6 +5525,8 @@ button) {
5507
5525
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
5508
5526
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
5509
5527
  --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200);
5528
+ --pf-t--global--text-decoration--offset--default: var(--pf-t--global--spacer--xs);
5529
+ --pf-t--global--text-decoration--width--default: var(--pf-t--global--border--width--regular);
5510
5530
  --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
5511
5531
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
5512
5532
  --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);