@patternfly/patternfly 6.0.0-alpha.214 → 6.0.0-alpha.216

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 (19) hide show
  1. package/base/patternfly-variables.css +13 -13
  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 +14 -14
  5. package/base/tokens/tokens-default.scss +1 -1
  6. package/base/tokens/tokens-palette.scss +1 -1
  7. package/components/Nav/nav.css +13 -0
  8. package/components/Nav/nav.scss +17 -0
  9. package/components/Slider/slider.css +5 -5
  10. package/components/Slider/slider.scss +5 -5
  11. package/components/_index.css +18 -5
  12. package/docs/components/Slider/examples/Slider.md +2 -2
  13. package/package.json +1 -1
  14. package/patternfly-base-no-globals.css +13 -13
  15. package/patternfly-base.css +13 -13
  16. package/patternfly-no-globals.css +31 -18
  17. package/patternfly.css +31 -18
  18. package/patternfly.min.css +1 -1
  19. package/patternfly.min.css.map +1 -1
package/patternfly.css CHANGED
@@ -5839,9 +5839,9 @@ button) {
5839
5839
  --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30);
5840
5840
  --pf-t--global--dark--color--nonstatus--blue--200: var(--pf-t--color--blue--20);
5841
5841
  --pf-t--global--dark--color--nonstatus--blue--300: var(--pf-t--color--blue--10);
5842
- --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--30);
5843
- --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--20);
5844
- --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--10);
5842
+ --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60);
5843
+ --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50);
5844
+ --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
5845
5845
  --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30);
5846
5846
  --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20);
5847
5847
  --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10);
@@ -5884,7 +5884,7 @@ button) {
5884
5884
  --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
5885
5885
  --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
5886
5886
  --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
5887
- --pf-t--global--dark--text--color--100: var(--pf-t--color--gray--10);
5887
+ --pf-t--global--dark--text--color--100: var(--pf-t--color--white);
5888
5888
  --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30);
5889
5889
  --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90);
5890
5890
  --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30);
@@ -5914,9 +5914,9 @@ button) {
5914
5914
  --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
5915
5915
  --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
5916
5916
  --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
5917
- --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--200);
5918
- --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--100);
5919
- --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--200);
5917
+ --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--300);
5918
+ --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--200);
5919
+ --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--300);
5920
5920
  --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
5921
5921
  --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
5922
5922
  --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
@@ -6050,9 +6050,9 @@ button) {
6050
6050
  --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--inverse);
6051
6051
  --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--inverse);
6052
6052
  --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--inverse);
6053
- --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--inverse);
6054
- --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--inverse);
6055
- --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--inverse);
6053
+ --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
6054
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
6055
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
6056
6056
  --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--inverse);
6057
6057
  --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--inverse);
6058
6058
  --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--inverse);
@@ -6116,9 +6116,9 @@ button) {
6116
6116
  --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--inverse);
6117
6117
  --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--inverse);
6118
6118
  --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--inverse);
6119
- --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--inverse);
6120
- --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--inverse);
6121
- --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--inverse);
6119
+ --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
6120
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
6121
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
6122
6122
  --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--inverse);
6123
6123
  --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--inverse);
6124
6124
  --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--inverse);
@@ -17065,6 +17065,19 @@ ul.pf-v6-c-list {
17065
17065
  .pf-v6-c-nav .pf-v6-c-menu {
17066
17066
  --pf-v6-c-menu--MinWidth: 100%;
17067
17067
  }
17068
+ .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown, .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu {
17069
+ --pf-v6-c-menu--PaddingBlockStart: 0;
17070
+ --pf-v6-c-menu--PaddingBlockEnd: 0;
17071
+ --pf-v6-c-menu--BackgroundColor: var(--pf-v6-c-nav--BackgroundColor);
17072
+ --pf-v6-c-menu--BoxShadow: none;
17073
+ --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-v6-c-nav__link--hover--BackgroundColor);
17074
+ }
17075
+ .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list, .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu .pf-v6-c-menu__list {
17076
+ row-gap: var(--pf-v6-c-nav__subnav--RowGap);
17077
+ }
17078
+ .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item::before, .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu .pf-v6-c-menu__list-item::before {
17079
+ border-radius: var(--pf-v6-c-nav__link--BorderRadius);
17080
+ }
17068
17081
 
17069
17082
  [class^=pf-v6-c-nav][hidden] {
17070
17083
  display: none;
@@ -20269,19 +20282,19 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
20269
20282
  --pf-v6-c-slider__rail--PaddingBlockStart: var(--pf-t--global--spacer--md);
20270
20283
  --pf-v6-c-slider__rail--PaddingBlockEnd: var(--pf-t--global--spacer--md);
20271
20284
  --pf-v6-c-slider__rail-track--Height: 0.25rem;
20272
- --pf-v6-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--border--color--default);
20285
+ --pf-v6-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
20273
20286
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
20274
20287
  --pf-v6-c-slider__rail-track--before--BorderRadius: var(--pf-t--global--border--radius--tiny);
20275
20288
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-v6-c-slider--value);
20276
20289
  --pf-v6-c-slider__steps--FontSize: var(--pf-t--global--font--size--sm);
20277
20290
  --pf-v6-c-slider__steps--Height: var(--pf-v6-c-slider__steps--FontSize);
20278
20291
  --pf-v6-c-slider__step-tick--InsetBlockStart: var(--pf-t--global--spacer--md);
20279
- --pf-v6-c-slider__step-tick--Width: 0.25rem;
20292
+ --pf-v6-c-slider__step-tick--Width: 0.15rem;
20280
20293
  --pf-v6-c-slider__step-tick--Height: 0.25rem;
20281
- --pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--subtle);
20294
+ --pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
20282
20295
  --pf-v6-c-slider__step-tick--TranslateX: -50%;
20283
- --pf-v6-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--large);
20284
- --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--brand--clicked);
20296
+ --pf-v6-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--sharp);
20297
+ --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--on-brand--default);
20285
20298
  --pf-v6-c-slider__step--first-child__step-tick--TranslateX: 0;
20286
20299
  --pf-v6-c-slider__step--last-child__step-tick--TranslateX: -100%;
20287
20300
  --pf-v6-c-slider__step-label--TranslateX: -50%;