@patternfly/patternfly 5.0.0-alpha.25 → 5.0.0-alpha.27

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/Banner/banner.css +13 -13
  2. package/components/Banner/banner.scss +8 -12
  3. package/components/FormControl/form-control.css +2 -5
  4. package/components/FormControl/themes/dark/form-control.scss +2 -6
  5. package/package.json +1 -1
  6. package/patternfly-no-reset.css +15 -18
  7. package/patternfly.css +15 -18
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
  10. package/sass-utilities/themes/dark/scss-variables.scss +1 -1
package/components/Banner/banner.css CHANGED
@@ -1,4 +1,4 @@
1
- .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-gold, .pf-c-banner.pf-m-info, .pf-c-banner.pf-m-blue {
1
+ .pf-c-banner.pf-m-gold, .pf-c-banner.pf-m-blue {
2
2
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
3
3
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
4
4
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -55,10 +55,10 @@
55
55
  --pf-c-banner--link--hover--FontWeight: var(--pf-global--FontWeight--bold);
56
56
  --pf-c-banner--link--disabled--Color: var(--pf-c-banner--Color);
57
57
  --pf-c-banner--link--disabled--TextDecoration: none;
58
- --pf-c-banner--m-info--BackgroundColor: var(--pf-global--palette--blue-200);
59
- --pf-c-banner--m-danger--BackgroundColor: var(--pf-global--danger-color--100);
60
- --pf-c-banner--m-success--BackgroundColor: var(--pf-global--success-color--100);
61
- --pf-c-banner--m-warning--BackgroundColor: var(--pf-global--warning-color--100);
58
+ --pf-c-banner--m-blue--BackgroundColor: var(--pf-global--palette--blue-200);
59
+ --pf-c-banner--m-red--BackgroundColor: var(--pf-global--palette--red-100);
60
+ --pf-c-banner--m-green--BackgroundColor: var(--pf-global--palette--green-500);
61
+ --pf-c-banner--m-gold--BackgroundColor: var(--pf-global--palette--gold-400);
62
62
  --pf-c-banner--m-sticky--ZIndex: var(--pf-global--ZIndex--md);
63
63
  --pf-c-banner--m-sticky--BoxShadow: var(--pf-global--BoxShadow--md-bottom);
64
64
  color: var(--pf-global--Color--100);
@@ -78,19 +78,19 @@
78
78
  --pf-c-banner--PaddingLeft: var(--pf-c-banner--md--PaddingLeft);
79
79
  }
80
80
  }
81
- .pf-c-banner.pf-m-info, .pf-c-banner.pf-m-blue {
81
+ .pf-c-banner.pf-m-blue {
82
82
  color: var(--pf-global--Color--100);
83
- --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-info--BackgroundColor);
83
+ --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-blue--BackgroundColor);
84
84
  }
85
- .pf-c-banner.pf-m-danger, .pf-c-banner.pf-m-red {
86
- --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-danger--BackgroundColor);
85
+ .pf-c-banner.pf-m-red {
86
+ --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-red--BackgroundColor);
87
87
  }
88
- .pf-c-banner.pf-m-success, .pf-c-banner.pf-m-green {
89
- --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-success--BackgroundColor);
88
+ .pf-c-banner.pf-m-green {
89
+ --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-green--BackgroundColor);
90
90
  }
91
- .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-gold {
91
+ .pf-c-banner.pf-m-gold {
92
92
  color: var(--pf-global--Color--100);
93
- --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-warning--BackgroundColor);
93
+ --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-gold--BackgroundColor);
94
94
  }
95
95
  .pf-c-banner.pf-m-sticky {
96
96
  position: sticky;
package/components/Banner/banner.scss CHANGED
@@ -23,10 +23,10 @@
23
23
  --pf-c-banner--link--disabled--TextDecoration: none;
24
24
 
25
25
  // modifier variables
26
- --pf-c-banner--m-info--BackgroundColor: var(--pf-global--palette--blue-200);
27
- --pf-c-banner--m-danger--BackgroundColor: var(--pf-global--danger-color--100);
28
- --pf-c-banner--m-success--BackgroundColor: var(--pf-global--success-color--100);
29
- --pf-c-banner--m-warning--BackgroundColor: var(--pf-global--warning-color--100);
26
+ --pf-c-banner--m-blue--BackgroundColor: var(--pf-global--palette--blue-200);
27
+ --pf-c-banner--m-red--BackgroundColor: var(--pf-global--palette--red-100);
28
+ --pf-c-banner--m-green--BackgroundColor: var(--pf-global--palette--green-500);
29
+ --pf-c-banner--m-gold--BackgroundColor: var(--pf-global--palette--gold-400);
30
30
  --pf-c-banner--m-sticky--ZIndex: var(--pf-global--ZIndex--md);
31
31
  --pf-c-banner--m-sticky--BoxShadow: var(--pf-global--BoxShadow--md-bottom);
32
32
 
@@ -40,28 +40,24 @@
40
40
  white-space: nowrap;
41
41
  background-color: var(--pf-c-banner--BackgroundColor);
42
42
 
43
- &.pf-m-info,
44
43
  &.pf-m-blue {
45
44
  @include pf-t-light;
46
45
 
47
- --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-info--BackgroundColor);
46
+ --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-blue--BackgroundColor);
48
47
  }
49
48
 
50
- &.pf-m-danger,
51
49
  &.pf-m-red {
52
- --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-danger--BackgroundColor);
50
+ --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-red--BackgroundColor);
53
51
  }
54
52
 
55
- &.pf-m-success,
56
53
  &.pf-m-green {
57
- --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-success--BackgroundColor);
54
+ --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-green--BackgroundColor);
58
55
  }
59
56
 
60
- &.pf-m-warning,
61
57
  &.pf-m-gold {
62
58
  @include pf-t-light;
63
59
 
64
- --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-warning--BackgroundColor);
60
+ --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-gold--BackgroundColor);
65
61
  }
66
62
 
67
63
  &.pf-m-sticky {
package/components/FormControl/form-control.css CHANGED
@@ -332,9 +332,9 @@ textarea.pf-c-form-control {
332
332
  --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--400);
333
333
  --pf-c-form-control--BorderLeftColor: transparent;
334
334
  --pf-c-form-control--BackgroundColor: var(--pf-global--BackgroundColor--400);
335
- --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--300);
335
+ --pf-c-form-control--disabled--Color: var(--pf-global--palette--black-300);
336
336
  --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
337
- --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--BackgroundColor--400);
337
+ --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--disabled-color--200);
338
338
  color: var(--pf-global--Color--100);
339
339
  }
340
340
  :where(.pf-theme-dark) .pf-c-form-control::-webkit-calendar-picker-indicator {
@@ -342,7 +342,4 @@ textarea.pf-c-form-control {
342
342
  }
343
343
  :where(.pf-theme-dark) .pf-c-form-control[readonly] {
344
344
  border-bottom-color: var(--pf-global--palette--black-700);
345
- }
346
- :where(.pf-theme-dark) .pf-c-form-control:disabled {
347
- color: var(--pf-global--palette--black-100);
348
345
  }
package/components/FormControl/themes/dark/form-control.scss CHANGED
@@ -8,9 +8,9 @@
8
8
  --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--400);
9
9
  --pf-c-form-control--BorderLeftColor: transparent;
10
10
  --pf-c-form-control--BackgroundColor: var(--pf-global--BackgroundColor--400);
11
- --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--300);
11
+ --pf-c-form-control--disabled--Color: var(--pf-global--palette--black-300);
12
12
  --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
13
- --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--BackgroundColor--400);
13
+ --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--disabled-color--200);
14
14
 
15
15
  color: var(--pf-global--Color--100);
16
16
 
@@ -22,9 +22,5 @@
22
22
  &[readonly] {
23
23
  border-bottom-color: var(--pf-global--palette--black-700); // should be a var?
24
24
  }
25
-
26
- &:disabled {
27
- color: var(--pf-global--palette--black-100); // global var
28
- }
29
25
  }
30
26
  }
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": "5.0.0-alpha.25",
4
+ "version": "5.0.0-alpha.27",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -1,5 +1,5 @@
1
1
  @charset "UTF-8";
2
- .pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-input-group, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-gold, .pf-c-banner.pf-m-info, .pf-c-banner.pf-m-blue, .pf-c-alert, .pf-c-accordion, .pf-t-light {
2
+ .pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-input-group, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-gold, .pf-c-banner.pf-m-blue, .pf-c-alert, .pf-c-accordion, .pf-t-light {
3
3
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
4
4
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
5
5
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -6893,10 +6893,10 @@
6893
6893
  --pf-c-banner--link--hover--FontWeight: var(--pf-global--FontWeight--bold);
6894
6894
  --pf-c-banner--link--disabled--Color: var(--pf-c-banner--Color);
6895
6895
  --pf-c-banner--link--disabled--TextDecoration: none;
6896
- --pf-c-banner--m-info--BackgroundColor: var(--pf-global--palette--blue-200);
6897
- --pf-c-banner--m-danger--BackgroundColor: var(--pf-global--danger-color--100);
6898
- --pf-c-banner--m-success--BackgroundColor: var(--pf-global--success-color--100);
6899
- --pf-c-banner--m-warning--BackgroundColor: var(--pf-global--warning-color--100);
6896
+ --pf-c-banner--m-blue--BackgroundColor: var(--pf-global--palette--blue-200);
6897
+ --pf-c-banner--m-red--BackgroundColor: var(--pf-global--palette--red-100);
6898
+ --pf-c-banner--m-green--BackgroundColor: var(--pf-global--palette--green-500);
6899
+ --pf-c-banner--m-gold--BackgroundColor: var(--pf-global--palette--gold-400);
6900
6900
  --pf-c-banner--m-sticky--ZIndex: var(--pf-global--ZIndex--md);
6901
6901
  --pf-c-banner--m-sticky--BoxShadow: var(--pf-global--BoxShadow--md-bottom);
6902
6902
  color: var(--pf-global--Color--100);
@@ -6916,19 +6916,19 @@
6916
6916
  --pf-c-banner--PaddingLeft: var(--pf-c-banner--md--PaddingLeft);
6917
6917
  }
6918
6918
  }
6919
- .pf-c-banner.pf-m-info, .pf-c-banner.pf-m-blue {
6919
+ .pf-c-banner.pf-m-blue {
6920
6920
  color: var(--pf-global--Color--100);
6921
- --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-info--BackgroundColor);
6921
+ --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-blue--BackgroundColor);
6922
6922
  }
6923
- .pf-c-banner.pf-m-danger, .pf-c-banner.pf-m-red {
6924
- --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-danger--BackgroundColor);
6923
+ .pf-c-banner.pf-m-red {
6924
+ --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-red--BackgroundColor);
6925
6925
  }
6926
- .pf-c-banner.pf-m-success, .pf-c-banner.pf-m-green {
6927
- --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-success--BackgroundColor);
6926
+ .pf-c-banner.pf-m-green {
6927
+ --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-green--BackgroundColor);
6928
6928
  }
6929
- .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-gold {
6929
+ .pf-c-banner.pf-m-gold {
6930
6930
  color: var(--pf-global--Color--100);
6931
- --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-warning--BackgroundColor);
6931
+ --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-gold--BackgroundColor);
6932
6932
  }
6933
6933
  .pf-c-banner.pf-m-sticky {
6934
6934
  position: sticky;
@@ -15510,9 +15510,9 @@ textarea.pf-c-form-control {
15510
15510
  --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--400);
15511
15511
  --pf-c-form-control--BorderLeftColor: transparent;
15512
15512
  --pf-c-form-control--BackgroundColor: var(--pf-global--BackgroundColor--400);
15513
- --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--300);
15513
+ --pf-c-form-control--disabled--Color: var(--pf-global--palette--black-300);
15514
15514
  --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
15515
- --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--BackgroundColor--400);
15515
+ --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--disabled-color--200);
15516
15516
  color: var(--pf-global--Color--100);
15517
15517
  }
15518
15518
  :where(.pf-theme-dark) .pf-c-form-control::-webkit-calendar-picker-indicator {
@@ -15521,9 +15521,6 @@ textarea.pf-c-form-control {
15521
15521
  :where(.pf-theme-dark) .pf-c-form-control[readonly] {
15522
15522
  border-bottom-color: var(--pf-global--palette--black-700);
15523
15523
  }
15524
- :where(.pf-theme-dark) .pf-c-form-control:disabled {
15525
- color: var(--pf-global--palette--black-100);
15526
- }
15527
15524
 
15528
15525
  .pf-c-hint {
15529
15526
  --pf-c-hint--GridRowGap: var(--pf-global--spacer--md);
package/patternfly.css CHANGED
@@ -1,5 +1,5 @@
1
1
  @charset "UTF-8";
2
- .pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-input-group, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-gold, .pf-c-banner.pf-m-info, .pf-c-banner.pf-m-blue, .pf-c-alert, .pf-c-accordion, .pf-t-light {
2
+ .pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-input-group, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-gold, .pf-c-banner.pf-m-blue, .pf-c-alert, .pf-c-accordion, .pf-t-light {
3
3
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
4
4
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
5
5
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -7016,10 +7016,10 @@ a {
7016
7016
  --pf-c-banner--link--hover--FontWeight: var(--pf-global--FontWeight--bold);
7017
7017
  --pf-c-banner--link--disabled--Color: var(--pf-c-banner--Color);
7018
7018
  --pf-c-banner--link--disabled--TextDecoration: none;
7019
- --pf-c-banner--m-info--BackgroundColor: var(--pf-global--palette--blue-200);
7020
- --pf-c-banner--m-danger--BackgroundColor: var(--pf-global--danger-color--100);
7021
- --pf-c-banner--m-success--BackgroundColor: var(--pf-global--success-color--100);
7022
- --pf-c-banner--m-warning--BackgroundColor: var(--pf-global--warning-color--100);
7019
+ --pf-c-banner--m-blue--BackgroundColor: var(--pf-global--palette--blue-200);
7020
+ --pf-c-banner--m-red--BackgroundColor: var(--pf-global--palette--red-100);
7021
+ --pf-c-banner--m-green--BackgroundColor: var(--pf-global--palette--green-500);
7022
+ --pf-c-banner--m-gold--BackgroundColor: var(--pf-global--palette--gold-400);
7023
7023
  --pf-c-banner--m-sticky--ZIndex: var(--pf-global--ZIndex--md);
7024
7024
  --pf-c-banner--m-sticky--BoxShadow: var(--pf-global--BoxShadow--md-bottom);
7025
7025
  color: var(--pf-global--Color--100);
@@ -7039,19 +7039,19 @@ a {
7039
7039
  --pf-c-banner--PaddingLeft: var(--pf-c-banner--md--PaddingLeft);
7040
7040
  }
7041
7041
  }
7042
- .pf-c-banner.pf-m-info, .pf-c-banner.pf-m-blue {
7042
+ .pf-c-banner.pf-m-blue {
7043
7043
  color: var(--pf-global--Color--100);
7044
- --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-info--BackgroundColor);
7044
+ --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-blue--BackgroundColor);
7045
7045
  }
7046
- .pf-c-banner.pf-m-danger, .pf-c-banner.pf-m-red {
7047
- --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-danger--BackgroundColor);
7046
+ .pf-c-banner.pf-m-red {
7047
+ --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-red--BackgroundColor);
7048
7048
  }
7049
- .pf-c-banner.pf-m-success, .pf-c-banner.pf-m-green {
7050
- --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-success--BackgroundColor);
7049
+ .pf-c-banner.pf-m-green {
7050
+ --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-green--BackgroundColor);
7051
7051
  }
7052
- .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-gold {
7052
+ .pf-c-banner.pf-m-gold {
7053
7053
  color: var(--pf-global--Color--100);
7054
- --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-warning--BackgroundColor);
7054
+ --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-gold--BackgroundColor);
7055
7055
  }
7056
7056
  .pf-c-banner.pf-m-sticky {
7057
7057
  position: sticky;
@@ -15633,9 +15633,9 @@ textarea.pf-c-form-control {
15633
15633
  --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--400);
15634
15634
  --pf-c-form-control--BorderLeftColor: transparent;
15635
15635
  --pf-c-form-control--BackgroundColor: var(--pf-global--BackgroundColor--400);
15636
- --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--300);
15636
+ --pf-c-form-control--disabled--Color: var(--pf-global--palette--black-300);
15637
15637
  --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
15638
- --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--BackgroundColor--400);
15638
+ --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--disabled-color--200);
15639
15639
  color: var(--pf-global--Color--100);
15640
15640
  }
15641
15641
  :where(.pf-theme-dark) .pf-c-form-control::-webkit-calendar-picker-indicator {
@@ -15644,9 +15644,6 @@ textarea.pf-c-form-control {
15644
15644
  :where(.pf-theme-dark) .pf-c-form-control[readonly] {
15645
15645
  border-bottom-color: var(--pf-global--palette--black-700);
15646
15646
  }
15647
- :where(.pf-theme-dark) .pf-c-form-control:disabled {
15648
- color: var(--pf-global--palette--black-100);
15649
- }
15650
15647
 
15651
15648
  .pf-c-hint {
15652
15649
  --pf-c-hint--GridRowGap: var(--pf-global--spacer--md);