@patternfly/patternfly 6.3.0-prerelease.69 → 6.3.0-prerelease.71

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 (10) hide show
  1. package/components/Button/button.css +2 -2
  2. package/components/Button/button.scss +2 -2
  3. package/components/Page/page.css +5 -0
  4. package/components/Page/page.scss +13 -4
  5. package/components/_index.css +7 -2
  6. package/package.json +1 -1
  7. package/patternfly-no-globals.css +7 -2
  8. package/patternfly.css +7 -2
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/components/Button/button.css CHANGED
@@ -22,7 +22,7 @@
22
22
  --pf-v6-c-button--TransitionDelay: 0s;
23
23
  --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
24
24
  --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
25
- --pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
25
+ --pf-v6-c-button--TransitionProperty: color, background, border-color;
26
26
  --pf-v6-c-button--ScaleX: 1;
27
27
  --pf-v6-c-button--ScaleY: 1;
28
28
  --pf-v6-c-button--border--offset: 0;
@@ -148,7 +148,7 @@
148
148
  --pf-v6-c-button--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
149
149
  --pf-v6-c-button--m-plain--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
150
150
  --pf-v6-c-button--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
151
- --pf-v6-c-button--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
151
+ --pf-v6-c-button--m-plain--BorderColor: transparent;
152
152
  --pf-v6-c-button--m-plain--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast);
153
153
  --pf-v6-c-button--m-plain--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
154
154
  --pf-v6-c-button--m-plain--m-no-padding--MinWidth: auto;
package/components/Button/button.scss CHANGED
@@ -24,7 +24,7 @@
24
24
  --#{$button}--TransitionDelay: 0s;
25
25
  --#{$button}--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
26
26
  --#{$button}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
27
- --#{$button}--TransitionProperty: color, background, border-width, border-color;
27
+ --#{$button}--TransitionProperty: color, background, border-color;
28
28
  --#{$button}--ScaleX: 1;
29
29
  --#{$button}--ScaleY: 1;
30
30
  --#{$button}--border--offset: 0;
@@ -168,7 +168,7 @@
168
168
  --#{$button}--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
169
169
  --#{$button}--m-plain--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
170
170
  --#{$button}--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
171
- --#{$button}--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
171
+ --#{$button}--m-plain--BorderColor: transparent;
172
172
  --#{$button}--m-plain--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast);
173
173
  --#{$button}--m-plain--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
174
174
 
package/components/Page/page.css CHANGED
@@ -107,6 +107,8 @@
107
107
  --pf-v6-c-page__main-wizard--BackgroundColor: var(--pf-t--global--background--color--primary--default);
108
108
  --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
109
109
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
110
+ --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
111
+ --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
110
112
  }
111
113
  @media screen and (prefers-reduced-motion: no-preference) {
112
114
  .pf-v6-c-page {
@@ -729,6 +731,9 @@
729
731
  flex-shrink: 0;
730
732
  }
731
733
 
734
+ .pf-v6-c-page__drawer > .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
735
+ border-block-start: var(--pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth) solid var(--pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor);
736
+ }
732
737
  .pf-v6-c-page__drawer .pf-v6-c-page__main-container {
733
738
  align-self: revert;
734
739
  }
package/components/Page/page.scss CHANGED
@@ -154,6 +154,10 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
154
154
  --#{$page}__main-wizard--BackgroundColor: var(--pf-t--global--background--color--primary--default);
155
155
  --#{$page}__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
156
156
  --#{$page}__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
157
+
158
+ // Drawer section
159
+ --#{$page}__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
160
+ --#{$page}__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
157
161
  }
158
162
 
159
163
  .#{$page} {
@@ -568,10 +572,15 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
568
572
  flex-shrink: 0;
569
573
  }
570
574
 
571
- .#{$page}__drawer .#{$page}__main-container {
572
- align-self: revert;
575
+ .#{$page}__drawer {
576
+ > .#{$drawer} > .#{$drawer}__main > .#{$drawer}__panel {
577
+ border-block-start: var(--#{$page}__drawer--c-drawer--BorderBlockStartWidth) solid var(--#{$page}__drawer--c-drawer--BorderBlockStartColor);
578
+ }
579
+ .#{$page}__main-container {
580
+ align-self: revert;
573
581
 
574
- &.pf-m-fill {
575
- flex-grow: 1;
582
+ &.pf-m-fill {
583
+ flex-grow: 1;
584
+ }
576
585
  }
577
586
  }
package/components/_index.css CHANGED
@@ -1585,7 +1585,7 @@ button.pf-v6-c-breadcrumb__link {
1585
1585
  --pf-v6-c-button--TransitionDelay: 0s;
1586
1586
  --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
1587
1587
  --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
1588
- --pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
1588
+ --pf-v6-c-button--TransitionProperty: color, background, border-color;
1589
1589
  --pf-v6-c-button--ScaleX: 1;
1590
1590
  --pf-v6-c-button--ScaleY: 1;
1591
1591
  --pf-v6-c-button--border--offset: 0;
@@ -1711,7 +1711,7 @@ button.pf-v6-c-breadcrumb__link {
1711
1711
  --pf-v6-c-button--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
1712
1712
  --pf-v6-c-button--m-plain--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
1713
1713
  --pf-v6-c-button--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
1714
- --pf-v6-c-button--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
1714
+ --pf-v6-c-button--m-plain--BorderColor: transparent;
1715
1715
  --pf-v6-c-button--m-plain--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast);
1716
1716
  --pf-v6-c-button--m-plain--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
1717
1717
  --pf-v6-c-button--m-plain--m-no-padding--MinWidth: auto;
@@ -12583,6 +12583,8 @@ ul.pf-v6-c-list {
12583
12583
  --pf-v6-c-page__main-wizard--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12584
12584
  --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
12585
12585
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
12586
+ --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
12587
+ --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
12586
12588
  }
12587
12589
  @media screen and (prefers-reduced-motion: no-preference) {
12588
12590
  .pf-v6-c-page {
@@ -13205,6 +13207,9 @@ ul.pf-v6-c-list {
13205
13207
  flex-shrink: 0;
13206
13208
  }
13207
13209
 
13210
+ .pf-v6-c-page__drawer > .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
13211
+ border-block-start: var(--pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth) solid var(--pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor);
13212
+ }
13208
13213
  .pf-v6-c-page__drawer .pf-v6-c-page__main-container {
13209
13214
  align-self: revert;
13210
13215
  }
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.3.0-prerelease.69",
4
+ "version": "6.3.0-prerelease.71",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "engines": {
package/patternfly-no-globals.css CHANGED
@@ -10252,7 +10252,7 @@ button.pf-v6-c-breadcrumb__link {
10252
10252
  --pf-v6-c-button--TransitionDelay: 0s;
10253
10253
  --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
10254
10254
  --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
10255
- --pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
10255
+ --pf-v6-c-button--TransitionProperty: color, background, border-color;
10256
10256
  --pf-v6-c-button--ScaleX: 1;
10257
10257
  --pf-v6-c-button--ScaleY: 1;
10258
10258
  --pf-v6-c-button--border--offset: 0;
@@ -10378,7 +10378,7 @@ button.pf-v6-c-breadcrumb__link {
10378
10378
  --pf-v6-c-button--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
10379
10379
  --pf-v6-c-button--m-plain--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
10380
10380
  --pf-v6-c-button--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
10381
- --pf-v6-c-button--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
10381
+ --pf-v6-c-button--m-plain--BorderColor: transparent;
10382
10382
  --pf-v6-c-button--m-plain--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast);
10383
10383
  --pf-v6-c-button--m-plain--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
10384
10384
  --pf-v6-c-button--m-plain--m-no-padding--MinWidth: auto;
@@ -21250,6 +21250,8 @@ ul.pf-v6-c-list {
21250
21250
  --pf-v6-c-page__main-wizard--BackgroundColor: var(--pf-t--global--background--color--primary--default);
21251
21251
  --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
21252
21252
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
21253
+ --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
21254
+ --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
21253
21255
  }
21254
21256
  @media screen and (prefers-reduced-motion: no-preference) {
21255
21257
  .pf-v6-c-page {
@@ -21872,6 +21874,9 @@ ul.pf-v6-c-list {
21872
21874
  flex-shrink: 0;
21873
21875
  }
21874
21876
 
21877
+ .pf-v6-c-page__drawer > .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
21878
+ border-block-start: var(--pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth) solid var(--pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor);
21879
+ }
21875
21880
  .pf-v6-c-page__drawer .pf-v6-c-page__main-container {
21876
21881
  align-self: revert;
21877
21882
  }
package/patternfly.css CHANGED
@@ -10392,7 +10392,7 @@ button.pf-v6-c-breadcrumb__link {
10392
10392
  --pf-v6-c-button--TransitionDelay: 0s;
10393
10393
  --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
10394
10394
  --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
10395
- --pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
10395
+ --pf-v6-c-button--TransitionProperty: color, background, border-color;
10396
10396
  --pf-v6-c-button--ScaleX: 1;
10397
10397
  --pf-v6-c-button--ScaleY: 1;
10398
10398
  --pf-v6-c-button--border--offset: 0;
@@ -10518,7 +10518,7 @@ button.pf-v6-c-breadcrumb__link {
10518
10518
  --pf-v6-c-button--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
10519
10519
  --pf-v6-c-button--m-plain--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
10520
10520
  --pf-v6-c-button--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
10521
- --pf-v6-c-button--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
10521
+ --pf-v6-c-button--m-plain--BorderColor: transparent;
10522
10522
  --pf-v6-c-button--m-plain--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast);
10523
10523
  --pf-v6-c-button--m-plain--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
10524
10524
  --pf-v6-c-button--m-plain--m-no-padding--MinWidth: auto;
@@ -21390,6 +21390,8 @@ ul.pf-v6-c-list {
21390
21390
  --pf-v6-c-page__main-wizard--BackgroundColor: var(--pf-t--global--background--color--primary--default);
21391
21391
  --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
21392
21392
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
21393
+ --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
21394
+ --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
21393
21395
  }
21394
21396
  @media screen and (prefers-reduced-motion: no-preference) {
21395
21397
  .pf-v6-c-page {
@@ -22012,6 +22014,9 @@ ul.pf-v6-c-list {
22012
22014
  flex-shrink: 0;
22013
22015
  }
22014
22016
 
22017
+ .pf-v6-c-page__drawer > .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
22018
+ border-block-start: var(--pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth) solid var(--pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor);
22019
+ }
22015
22020
  .pf-v6-c-page__drawer .pf-v6-c-page__main-container {
22016
22021
  align-self: revert;
22017
22022
  }