@patternfly/patternfly 6.0.0-alpha.50 → 6.0.0-alpha.52

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/components/FormControl/form-control.css +3 -3
  2. package/components/FormControl/form-control.scss +3 -3
  3. package/components/InputGroup/input-group.css +22 -38
  4. package/components/InputGroup/input-group.scss +21 -29
  5. package/components/NumberInput/number-input.css +8 -8
  6. package/components/NumberInput/number-input.scss +7 -12
  7. package/components/Timestamp/timestamp.css +12 -9
  8. package/components/Timestamp/timestamp.scss +11 -10
  9. package/package.json +1 -1
  10. package/patternfly-no-globals.css +45 -62
  11. package/patternfly-theme-dark-unversioned.css +45 -62
  12. package/patternfly.css +45 -62
  13. package/patternfly.min.css +1 -1
  14. package/patternfly.min.css.map +1 -1
  15. package/components/InputGroup/themes/dark/input-group.scss +0 -22
package/components/FormControl/form-control.css CHANGED
@@ -41,13 +41,13 @@
41
41
  --pf-v5-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
42
42
  --pf-v5-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
43
43
  --pf-v5-c-form-control--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
44
- --pf-v5-c-form-control--m-success--PaddingRight: var(--pf-t--global--spacer--xl);
44
+ --pf-v5-c-form-control--m-success--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-v5-c-form-control--ColumnGap));
45
45
  --pf-v5-c-form-control--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
46
46
  --pf-v5-c-form-control--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
47
- --pf-v5-c-form-control--m-warning--PaddingRight: var(--pf-t--global--spacer--xl);
47
+ --pf-v5-c-form-control--m-warning--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-v5-c-form-control--ColumnGap));
48
48
  --pf-v5-c-form-control--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
49
49
  --pf-v5-c-form-control--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
50
- --pf-v5-c-form-control--m-error--PaddingRight: var(--pf-t--global--spacer--xl);
50
+ --pf-v5-c-form-control--m-error--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-v5-c-form-control--ColumnGap));
51
51
  --pf-v5-c-form-control--m-error--icon--width: var(--pf-v5-c-form-control--FontSize);
52
52
  --pf-v5-c-form-control--m-icon--PaddingRight: calc(var(--pf-v5-c-form-control--inset--base) + var(--pf-v5-c-form-control--m-icon--icon--width) + var(--pf-v5-c-form-control--m-icon--icon--spacer));
53
53
  --pf-v5-c-form-control--m-icon--icon--width: var(--pf-v5-c-form-control--FontSize);
package/components/FormControl/form-control.scss CHANGED
@@ -59,17 +59,17 @@
59
59
  // success
60
60
  --#{$form-control}--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
61
61
  --#{$form-control}--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
62
- --#{$form-control}--m-success--PaddingRight: var(--pf-t--global--spacer--xl);
62
+ --#{$form-control}--m-success--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--#{$form-control}--ColumnGap));
63
63
 
64
64
  // warning
65
65
  --#{$form-control}--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
66
66
  --#{$form-control}--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
67
- --#{$form-control}--m-warning--PaddingRight: var(--pf-t--global--spacer--xl);
67
+ --#{$form-control}--m-warning--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--#{$form-control}--ColumnGap));
68
68
 
69
69
  // error
70
70
  --#{$form-control}--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
71
71
  --#{$form-control}--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
72
- --#{$form-control}--m-error--PaddingRight: var(--pf-t--global--spacer--xl);
72
+ --#{$form-control}--m-error--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--#{$form-control}--ColumnGap));
73
73
  --#{$form-control}--m-error--icon--width: var(--#{$form-control}--FontSize);
74
74
 
75
75
  // custom icon
package/components/InputGroup/input-group.css CHANGED
@@ -1,32 +1,37 @@
1
+ :root,
1
2
  .pf-v5-c-input-group {
2
- --pf-v5-c-input-group--child--ZIndex: var(--pf-v5-global--ZIndex--xs);
3
- --pf-v5-c-input-group__item--offset: var(--pf-v5-global--BorderWidth--sm);
4
- --pf-v5-c-input-group__item--MarginLeft: calc(var(--pf-v5-c-input-group__item--offset) * -1);
5
- --pf-v5-c-input-group__item--BorderWidth--base: var(--pf-v5-c-input-group__item--offset);
6
- --pf-v5-c-input-group__item--BorderColor--base: var(--pf-v5-global--BorderColor--300);
7
- --pf-v5-c-input-group__item--BorderColor--accent: var(--pf-v5-global--BorderColor--200);
3
+ --pf-v5-c-input-group--Gap: var(--pf-t--global--spacer--xs);
4
+ --pf-v5-c-input-group__item--offset: var(--pf-t--global--border--width--control--default);
5
+ --pf-v5-c-input-group__item--BorderWidth--base: var(--pf-t--global--border--width--control--default);
6
+ --pf-v5-c-input-group__item--BorderColor--base: var(--pf-t--global--border--color--default);
8
7
  --pf-v5-c-input-group__item--BackgroundColor: transparent;
9
- --pf-v5-c-input-group__item--m-box--PaddingRight: var(--pf-v5-global--spacer--sm);
10
- --pf-v5-c-input-group__item--m-box--PaddingLeft: var(--pf-v5-global--spacer--sm);
11
- --pf-v5-c-input-group__item--m-box--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
12
- --pf-v5-c-input-group__item--m-box--BorderWidth: var(--pf-v5-c-input-group__item--offset);
8
+ --pf-v5-c-input-group__item--AlignItems: start;
9
+ --pf-v5-c-input-group__item--m-box--PaddingRight: var(--pf-t--global--spacer--sm);
10
+ --pf-v5-c-input-group__item--m-box--PaddingLeft: var(--pf-t--global--spacer--sm);
11
+ --pf-v5-c-input-group__item--m-box--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
12
+ --pf-v5-c-input-group__item--m-box--BorderWidth: var(--pf-v5-c-input-group__item--BorderWidth--base);
13
+ --pf-v5-c-input-group__item--m-box--BorderRadius: var(--pf-t--global--border--radius--small);
13
14
  --pf-v5-c-input-group__item--m-box--BorderTopColor: var(--pf-v5-c-input-group__item--BorderColor--base);
14
15
  --pf-v5-c-input-group__item--m-box--BorderRightColor: var(--pf-v5-c-input-group__item--BorderColor--base);
15
- --pf-v5-c-input-group__item--m-box--BorderBottomColor: var(--pf-v5-c-input-group__item--BorderColor--accent);
16
+ --pf-v5-c-input-group__item--m-box--BorderBottomColor: var(--pf-v5-c-input-group__item--BorderColor--base);
16
17
  --pf-v5-c-input-group__item--m-box--BorderLeftColor: var(--pf-v5-c-input-group__item--BorderColor--base);
17
18
  --pf-v5-c-input-group__item--m-plain--BackgroundColor: transparent;
18
- --pf-v5-c-input-group__text--FontSize: var(--pf-v5-global--FontSize--md);
19
- --pf-v5-c-input-group__text--Color: var(--pf-v5-global--Color--dark-200);
20
- --pf-v5-c-input-group__item--m-disabled__text--Color: var(--pf-v5-global--disabled-color--100);
21
- --pf-v5-c-input-group__item--m-disabled--BorderBottomColor: transparent;
22
- --pf-v5-c-input-group__item--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
19
+ --pf-v5-c-input-group__text--FontSize: var(--pf-t--global--font--size--body--default);
20
+ --pf-v5-c-input-group__text--Color: var(--pf-t--global--text--color--regular);
21
+ --pf-v5-c-input-group__item--m-disabled__text--Color: var(--pf-t--global--text--color--on-disabled);
22
+ --pf-v5-c-input-group__item--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
23
+ }
24
+
25
+ .pf-v5-c-input-group {
23
26
  display: flex;
27
+ gap: var(--pf-v5-c-input-group--Gap);
24
28
  width: 100%;
25
29
  }
26
30
 
27
31
  .pf-v5-c-input-group__item {
28
32
  position: relative;
29
33
  display: flex;
34
+ align-items: var(--pf-v5-c-input-group__item--AlignItems);
30
35
  min-width: var(--pf-v5-c-input-group__item--MinWidth, revert);
31
36
  max-width: var(--pf-v5-c-input-group__item--MaxWidth, revert);
32
37
  background-color: var(--pf-v5-c-input-group__item--BackgroundColor);
@@ -35,9 +40,6 @@
35
40
  border-inline-start-color: var(--pf-v5-c-input-group__item--m-box--BorderLeftColor);
36
41
  border-inline-end-color: var(--pf-v5-c-input-group__item--m-box--BorderRightColor);
37
42
  }
38
- .pf-v5-c-input-group__item:where(:not(:first-child)) {
39
- margin-inline-start: var(--pf-v5-c-input-group__item--MarginLeft);
40
- }
41
43
  .pf-v5-c-input-group__item.pf-m-box {
42
44
  --pf-v5-c-input-group__item--BackgroundColor: var(--pf-v5-c-input-group__item--m-box--BackgroundColor);
43
45
  padding-inline-start: var(--pf-v5-c-input-group__item--m-box--PaddingLeft);
@@ -47,15 +49,14 @@
47
49
  border-block-end-color: var(--pf-v5-c-input-group__item--m-box--BorderBottomColor);
48
50
  border-inline-start-color: var(--pf-v5-c-input-group__item--m-box--BorderLeftColor);
49
51
  border-inline-end-color: var(--pf-v5-c-input-group__item--m-box--BorderRightColor);
52
+ border-radius: var(--pf-v5-c-input-group__item--m-box--BorderRadius);
50
53
  }
51
54
  .pf-v5-c-input-group__item.pf-m-plain {
52
- --pf-v5-c-input-group__item--MarginLeft: 0;
53
55
  --pf-v5-c-input-group__item--BackgroundColor: var(--pf-v5-c-input-group__item--m-plain--BackgroundColor);
54
56
  border: none;
55
57
  }
56
58
  .pf-v5-c-input-group__item.pf-m-disabled {
57
59
  --pf-v5-c-input-group__item--BackgroundColor: var(--pf-v5-c-input-group__item--m-disabled--BackgroundColor);
58
- --pf-v5-c-input-group__item--m-box--BorderBottomColor: var(--pf-v5-c-input-group__item--m-disabled--BorderBottomColor);
59
60
  --pf-v5-c-input-group__text--Color: var(--pf-v5-c-input-group__item--m-disabled__text--Color);
60
61
  }
61
62
  .pf-v5-c-input-group__item.pf-m-fill {
@@ -69,21 +70,4 @@
69
70
  }
70
71
  label.pf-v5-c-input-group__text {
71
72
  cursor: pointer;
72
- }
73
-
74
- :where(.pf-v5-theme-dark) .pf-v5-c-input-group {
75
- --pf-v5-c-input-group__item--BorderLeftWidth: var(--pf-v5-c-input-group__item--BorderWidth--base);
76
- --pf-v5-c-input-group__item--BorderLeftColor: var(--pf-v5-global--palette--black-700);
77
- --pf-v5-c-input-group__item--m-box--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
78
- --pf-v5-c-input-group__item--m-box--BorderTopColor: transparent;
79
- --pf-v5-c-input-group__item--m-box--BorderRightColor: transparent;
80
- --pf-v5-c-input-group__item--m-box--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
81
- --pf-v5-c-input-group__item--m-box--BorderLeftColor: transparent;
82
- --pf-v5-c-input-group__item--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
83
- --pf-v5-c-input-group__item--m-disabled--BorderBottomColor: transparent;
84
- --pf-v5-c-input-group__item--m-disabled__text--Color: var(--pf-v5-global--disabled-color--300);
85
- }
86
- :where(.pf-v5-theme-dark) .pf-v5-c-input-group > * + * {
87
- --pf-v5-c-input-group__item--m-box--BorderLeftColor: var(--pf-v5-c-input-group__item--BorderLeftColor);
88
- border-inline-start: var(--pf-v5-c-input-group__item--BorderLeftWidth) solid var(--pf-v5-c-input-group__item--BorderLeftColor);
89
73
  }
package/components/InputGroup/input-group.scss CHANGED
@@ -1,46 +1,49 @@
1
1
  // @debug $input-group; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
+ :root,
3
4
  .#{$input-group} {
4
- // Input group
5
- --#{$input-group}--child--ZIndex: var(--#{$pf-global}--ZIndex--xs);
5
+ --#{$input-group}--Gap: var(--pf-t--global--spacer--xs);
6
6
 
7
7
  // Input group item
8
- --#{$input-group}__item--offset: var(--#{$pf-global}--BorderWidth--sm);
9
- --#{$input-group}__item--MarginLeft: calc(var(--#{$input-group}__item--offset) * -1);
10
- --#{$input-group}__item--BorderWidth--base: var(--#{$input-group}__item--offset);
11
- --#{$input-group}__item--BorderColor--base: var(--#{$pf-global}--BorderColor--300);
12
- --#{$input-group}__item--BorderColor--accent: var(--#{$pf-global}--BorderColor--200);
8
+ --#{$input-group}__item--offset: var(--pf-t--global--border--width--control--default);
9
+ --#{$input-group}__item--BorderWidth--base: var(--pf-t--global--border--width--control--default);
10
+ --#{$input-group}__item--BorderColor--base: var(--pf-t--global--border--color--default);
13
11
  --#{$input-group}__item--BackgroundColor: transparent;
12
+ --#{$input-group}__item--AlignItems: start;
14
13
 
15
14
  // Input group item, box variant
16
- --#{$input-group}__item--m-box--PaddingRight: var(--#{$pf-global}--spacer--sm);
17
- --#{$input-group}__item--m-box--PaddingLeft: var(--#{$pf-global}--spacer--sm);
18
- --#{$input-group}__item--m-box--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
19
- --#{$input-group}__item--m-box--BorderWidth: var(--#{$input-group}__item--offset);
15
+ --#{$input-group}__item--m-box--PaddingRight: var(--pf-t--global--spacer--sm);
16
+ --#{$input-group}__item--m-box--PaddingLeft: var(--pf-t--global--spacer--sm);
17
+ --#{$input-group}__item--m-box--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
18
+ --#{$input-group}__item--m-box--BorderWidth: var(--#{$input-group}__item--BorderWidth--base);
19
+ --#{$input-group}__item--m-box--BorderRadius: var(--pf-t--global--border--radius--small);
20
20
  --#{$input-group}__item--m-box--BorderTopColor: var(--#{$input-group}__item--BorderColor--base);
21
21
  --#{$input-group}__item--m-box--BorderRightColor: var(--#{$input-group}__item--BorderColor--base);
22
- --#{$input-group}__item--m-box--BorderBottomColor: var(--#{$input-group}__item--BorderColor--accent);
22
+ --#{$input-group}__item--m-box--BorderBottomColor: var(--#{$input-group}__item--BorderColor--base);
23
23
  --#{$input-group}__item--m-box--BorderLeftColor: var(--#{$input-group}__item--BorderColor--base);
24
24
 
25
25
  // Input group item, plain variant
26
26
  --#{$input-group}__item--m-plain--BackgroundColor: transparent;
27
27
 
28
28
  // Input group text
29
- --#{$input-group}__text--FontSize: var(--#{$pf-global}--FontSize--md);
30
- --#{$input-group}__text--Color: var(--#{$pf-global}--Color--dark-200);
29
+ --#{$input-group}__text--FontSize: var(--pf-t--global--font--size--body--default);
30
+ --#{$input-group}__text--Color: var(--pf-t--global--text--color--regular);
31
31
 
32
32
  // Input group text, disabled variant
33
- --#{$input-group}__item--m-disabled__text--Color: var(--#{$pf-global}--disabled-color--100);
34
- --#{$input-group}__item--m-disabled--BorderBottomColor: transparent;
35
- --#{$input-group}__item--m-disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--300);
33
+ --#{$input-group}__item--m-disabled__text--Color: var(--pf-t--global--text--color--on-disabled);
34
+ --#{$input-group}__item--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
35
+ }
36
36
 
37
+ .#{$input-group} {
37
38
  display: flex;
39
+ gap: var(--#{$input-group}--Gap);
38
40
  width: 100%;
39
41
  }
40
42
 
41
43
  .#{$input-group}__item {
42
44
  position: relative; // stack items without explicit z-index
43
45
  display: flex;
46
+ align-items: var(--#{$input-group}__item--AlignItems);
44
47
  min-width: var(--#{$input-group}__item--MinWidth, revert);
45
48
  max-width: var(--#{$input-group}__item--MaxWidth, revert);
46
49
  background-color: var(--#{$input-group}__item--BackgroundColor);
@@ -49,10 +52,6 @@
49
52
  border-inline-start-color: var(--#{$input-group}__item--m-box--BorderLeftColor);
50
53
  border-inline-end-color: var(--#{$input-group}__item--m-box--BorderRightColor);
51
54
 
52
- &:where(:not(:first-child)) {
53
- margin-inline-start: var(--#{$input-group}__item--MarginLeft);
54
- }
55
-
56
55
  &.pf-m-box {
57
56
  --#{$input-group}__item--BackgroundColor: var(--#{$input-group}__item--m-box--BackgroundColor);
58
57
 
@@ -63,10 +62,10 @@
63
62
  border-block-end-color: var(--#{$input-group}__item--m-box--BorderBottomColor);
64
63
  border-inline-start-color: var(--#{$input-group}__item--m-box--BorderLeftColor);
65
64
  border-inline-end-color: var(--#{$input-group}__item--m-box--BorderRightColor);
65
+ border-radius: var(--#{$input-group}__item--m-box--BorderRadius);
66
66
  }
67
67
 
68
68
  &.pf-m-plain {
69
- --#{$input-group}__item--MarginLeft: 0;
70
69
  --#{$input-group}__item--BackgroundColor: var(--#{$input-group}__item--m-plain--BackgroundColor);
71
70
 
72
71
  border: none;
@@ -74,7 +73,6 @@
74
73
 
75
74
  &.pf-m-disabled {
76
75
  --#{$input-group}__item--BackgroundColor: var(--#{$input-group}__item--m-disabled--BackgroundColor);
77
- --#{$input-group}__item--m-box--BorderBottomColor: var(--#{$input-group}__item--m-disabled--BorderBottomColor);
78
76
  --#{$input-group}__text--Color: var(--#{$input-group}__item--m-disabled__text--Color);
79
77
  }
80
78
 
@@ -93,9 +91,3 @@
93
91
  }
94
92
  }
95
93
 
96
- // stylelint-disable no-invalid-position-at-import-rule
97
- @import "themes/dark/input-group";
98
-
99
- @include pf-v5-theme-dark {
100
- @include pf-v5-theme-dark-input-group;
101
- }
package/components/NumberInput/number-input.css CHANGED
@@ -6,12 +6,12 @@
6
6
  appearance: none;
7
7
  }
8
8
 
9
+ :root,
9
10
  .pf-v5-c-number-input {
10
- --pf-v5-c-number-input__unit--c-input-group--MarginLeft: var(--pf-v5-global--spacer--sm);
11
- --pf-v5-c-number-input__icon--FontSize: var(--pf-v5-global--FontSize--xs);
12
- --pf-v5-c-number-input--c-form-control--width-base: calc(var(--pf-v5-global--spacer--sm) * 2 + var(--pf-v5-global--BorderWidth--sm) * 2);
13
- --pf-v5-c-number-input--c-form-control--width-icon: 0px;
14
- --pf-v5-c-number-input--m-status--c-form-control--width-icon: var(--pf-v5-global--spacer--xl);
11
+ --pf-v5-c-number-input__unit--c-input-group--MarginLeft: var(--pf-t--global--spacer--sm);
12
+ --pf-v5-c-number-input__icon--FontSize: var(--pf-t--global--font--size--xs);
13
+ --pf-v5-c-number-input--c-form-control--width-base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-t--global--border--width--box--default) * 2);
14
+ --pf-v5-c-number-input--c-form-control--width-icon: var(--pf-t--global--spacer--xl);
15
15
  --pf-v5-c-number-input--c-form-control--width-chars: 4;
16
16
  --pf-v5-c-number-input--c-form-control--Width:
17
17
  calc(
@@ -19,12 +19,12 @@
19
19
  var(--pf-v5-c-number-input--c-form-control--width-base) + var(--pf-v5-c-number-input--c-form-control--width-chars) * 1ch
20
20
  ) + var(--pf-v5-c-number-input--c-form-control--width-icon)
21
21
  );
22
+ }
23
+
24
+ .pf-v5-c-number-input {
22
25
  display: inline-flex;
23
26
  align-items: center;
24
27
  }
25
- .pf-v5-c-number-input.pf-m-status {
26
- --pf-v5-c-number-input--c-form-control--width-icon: var(--pf-v5-c-number-input--m-status--c-form-control--width-icon);
27
- }
28
28
  .pf-v5-c-number-input .pf-v5-c-form-control {
29
29
  width: var(--pf-v5-c-number-input--c-form-control--Width);
30
30
  }
package/components/NumberInput/number-input.scss CHANGED
@@ -1,18 +1,16 @@
1
1
  // @debug $number-input; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
+ :root,
3
4
  .#{$number-input} {
4
5
  // unit
5
- --#{$number-input}__unit--c-input-group--MarginLeft: var(--#{$pf-global}--spacer--sm);
6
+ --#{$number-input}__unit--c-input-group--MarginLeft: var(--pf-t--global--spacer--sm);
6
7
 
7
8
  // icon
8
- --#{$number-input}__icon--FontSize: var(--#{$pf-global}--FontSize--xs);
9
+ --#{$number-input}__icon--FontSize: var(--pf-t--global--font--size--xs);
9
10
 
10
11
  // form control
11
- --#{$number-input}--c-form-control--width-base: calc(var(--#{$pf-global}--spacer--sm) * 2 + var(--#{$pf-global}--BorderWidth--sm) * 2); // element's padding
12
- // stylelint-disable length-zero-no-unit
13
- --#{$number-input}--c-form-control--width-icon: 0px;
14
- // stylelint-enable length-zero-no-unit
15
- --#{$number-input}--m-status--c-form-control--width-icon: var(--#{$pf-global}--spacer--xl); // extra width to accommodate a status icon
12
+ --#{$number-input}--c-form-control--width-base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-t--global--border--width--box--default) * 2); // form controls's padding
13
+ --#{$number-input}--c-form-control--width-icon: var(--pf-t--global--spacer--xl); // extra width to accommodate a status icon
16
14
  --#{$number-input}--c-form-control--width-chars: 4;
17
15
  --#{$number-input}--c-form-control--Width:
18
16
  calc(
@@ -20,15 +18,12 @@
20
18
  var(--#{$number-input}--c-form-control--width-base) + var(--#{$number-input}--c-form-control--width-chars) * 1ch
21
19
  ) + var(--#{$number-input}--c-form-control--width-icon)
22
20
  );
21
+ }
23
22
 
23
+ .#{$number-input} {
24
24
  display: inline-flex;
25
25
  align-items: center;
26
26
 
27
- // This modifier can be removed in a breaking change and the extra space created can always be included.
28
- &.pf-m-status {
29
- --#{$number-input}--c-form-control--width-icon: var(--#{$number-input}--m-status--c-form-control--width-icon);
30
- }
31
-
32
27
  .#{$form-control} {
33
28
  width: var(--#{$number-input}--c-form-control--Width);
34
29
 
package/components/Timestamp/timestamp.css CHANGED
@@ -1,16 +1,19 @@
1
- .pf-v5-c-timestamp {
2
- --pf-v5-c-timestamp--FontSize: var(--pf-v5-global--FontSize--sm);
3
- --pf-v5-c-timestamp--Color: var(--pf-v5-global--Color--200);
1
+ :root, .pf-v5-c-timestamp {
2
+ --pf-v5-c-timestamp--FontSize: var(--pf-t--global--font--size--body--sm);
3
+ --pf-v5-c-timestamp--Color: var(--pf-t--global--text--color--subtle);
4
4
  --pf-v5-c-timestamp--OutlineOffset: 0.1875rem;
5
5
  --pf-v5-c-timestamp--m-help-text--TextDecorationLine: underline;
6
6
  --pf-v5-c-timestamp--m-help-text--TextDecorationStyle: dashed;
7
- --pf-v5-c-timestamp--m-help-text--TextDecorationThickness: var(--pf-v5-global--BorderWidth--sm);
7
+ --pf-v5-c-timestamp--m-help-text--TextDecorationThickness: var(--pf-t--global--border--width--regular);
8
8
  --pf-v5-c-timestamp--m-help-text--TextUnderlineOffset: 0.25rem;
9
- --pf-v5-c-timestamp--m-help-text--TextDecorationColor: var(--pf-v5-global--BorderColor--200);
10
- --pf-v5-c-timestamp--m-help-text--hover--Color: var(--pf-v5-global--Color--100);
11
- --pf-v5-c-timestamp--m-help-text--focus--Color: var(--pf-v5-global--Color--100);
12
- --pf-v5-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-v5-global--Color--100);
13
- --pf-v5-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-v5-global--Color--100);
9
+ --pf-v5-c-timestamp--m-help-text--TextDecorationColor: var(--pf-t--global--border--color--default);
10
+ --pf-v5-c-timestamp--m-help-text--hover--Color: var(--pf-t--global--text--color--regular);
11
+ --pf-v5-c-timestamp--m-help-text--focus--Color: var(--pf-t--global--text--color--regular);
12
+ --pf-v5-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-t--global--text--color--regular);
13
+ --pf-v5-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-t--global--text--color--regular);
14
+ }
15
+
16
+ .pf-v5-c-timestamp {
14
17
  display: inline-block;
15
18
  font-size: var(--pf-v5-c-timestamp--FontSize);
16
19
  color: var(--pf-v5-c-timestamp--Color);
package/components/Timestamp/timestamp.scss CHANGED
@@ -1,21 +1,22 @@
1
1
  // @debug $timestamp; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
-
3
- .#{$timestamp} {
4
- --#{$timestamp}--FontSize: var(--#{$pf-global}--FontSize--sm);
5
- --#{$timestamp}--Color: var(--#{$pf-global}--Color--200);
2
+ :root, .#{$timestamp} {
3
+ --#{$timestamp}--FontSize: var(--pf-t--global--font--size--body--sm);
4
+ --#{$timestamp}--Color: var(--pf-t--global--text--color--subtle);
6
5
  --#{$timestamp}--OutlineOffset: #{pf-size-prem(3px)};
7
6
 
8
7
  // Help text variables for the timestamp
9
8
  --#{$timestamp}--m-help-text--TextDecorationLine: underline;
10
9
  --#{$timestamp}--m-help-text--TextDecorationStyle: dashed;
11
- --#{$timestamp}--m-help-text--TextDecorationThickness: var(--#{$pf-global}--BorderWidth--sm);
10
+ --#{$timestamp}--m-help-text--TextDecorationThickness: var(--pf-t--global--border--width--regular);
12
11
  --#{$timestamp}--m-help-text--TextUnderlineOffset: #{pf-size-prem(4px)};
13
- --#{$timestamp}--m-help-text--TextDecorationColor: var(--#{$pf-global}--BorderColor--200);
14
- --#{$timestamp}--m-help-text--hover--Color: var(--#{$pf-global}--Color--100);
15
- --#{$timestamp}--m-help-text--focus--Color: var(--#{$pf-global}--Color--100);
16
- --#{$timestamp}--m-help-text--hover--TextDecorationColor: var(--#{$pf-global}--Color--100);
17
- --#{$timestamp}--m-help-text--focus--TextDecorationColor: var(--#{$pf-global}--Color--100);
12
+ --#{$timestamp}--m-help-text--TextDecorationColor: var(--pf-t--global--border--color--default);
13
+ --#{$timestamp}--m-help-text--hover--Color: var(--pf-t--global--text--color--regular);
14
+ --#{$timestamp}--m-help-text--focus--Color: var(--pf-t--global--text--color--regular);
15
+ --#{$timestamp}--m-help-text--hover--TextDecorationColor: var(--pf-t--global--text--color--regular);
16
+ --#{$timestamp}--m-help-text--focus--TextDecorationColor: var(--pf-t--global--text--color--regular);
17
+ }
18
18
 
19
+ .#{$timestamp} {
19
20
  display: inline-block;
20
21
  font-size: var(--#{$timestamp}--FontSize);
21
22
  color: var(--#{$timestamp}--Color);
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.50",
4
+ "version": "6.0.0-alpha.52",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -15567,13 +15567,13 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15567
15567
  --pf-v5-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
15568
15568
  --pf-v5-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
15569
15569
  --pf-v5-c-form-control--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
15570
- --pf-v5-c-form-control--m-success--PaddingRight: var(--pf-t--global--spacer--xl);
15570
+ --pf-v5-c-form-control--m-success--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-v5-c-form-control--ColumnGap));
15571
15571
  --pf-v5-c-form-control--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
15572
15572
  --pf-v5-c-form-control--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
15573
- --pf-v5-c-form-control--m-warning--PaddingRight: var(--pf-t--global--spacer--xl);
15573
+ --pf-v5-c-form-control--m-warning--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-v5-c-form-control--ColumnGap));
15574
15574
  --pf-v5-c-form-control--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
15575
15575
  --pf-v5-c-form-control--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
15576
- --pf-v5-c-form-control--m-error--PaddingRight: var(--pf-t--global--spacer--xl);
15576
+ --pf-v5-c-form-control--m-error--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-v5-c-form-control--ColumnGap));
15577
15577
  --pf-v5-c-form-control--m-error--icon--width: var(--pf-v5-c-form-control--FontSize);
15578
15578
  --pf-v5-c-form-control--m-icon--PaddingRight: calc(var(--pf-v5-c-form-control--inset--base) + var(--pf-v5-c-form-control--m-icon--icon--width) + var(--pf-v5-c-form-control--m-icon--icon--spacer));
15579
15579
  --pf-v5-c-form-control--m-icon--icon--width: var(--pf-v5-c-form-control--FontSize);
@@ -16145,35 +16145,40 @@ select ~ .pf-v5-c-form-control__utilities {
16145
16145
  display: none;
16146
16146
  }
16147
16147
 
16148
+ :root,
16148
16149
  .pf-v5-c-input-group {
16149
- --pf-v5-c-input-group--child--ZIndex: var(--pf-v5-global--ZIndex--xs);
16150
- --pf-v5-c-input-group__item--offset: var(--pf-v5-global--BorderWidth--sm);
16151
- --pf-v5-c-input-group__item--MarginLeft: calc(var(--pf-v5-c-input-group__item--offset) * -1);
16152
- --pf-v5-c-input-group__item--BorderWidth--base: var(--pf-v5-c-input-group__item--offset);
16153
- --pf-v5-c-input-group__item--BorderColor--base: var(--pf-v5-global--BorderColor--300);
16154
- --pf-v5-c-input-group__item--BorderColor--accent: var(--pf-v5-global--BorderColor--200);
16150
+ --pf-v5-c-input-group--Gap: var(--pf-t--global--spacer--xs);
16151
+ --pf-v5-c-input-group__item--offset: var(--pf-t--global--border--width--control--default);
16152
+ --pf-v5-c-input-group__item--BorderWidth--base: var(--pf-t--global--border--width--control--default);
16153
+ --pf-v5-c-input-group__item--BorderColor--base: var(--pf-t--global--border--color--default);
16155
16154
  --pf-v5-c-input-group__item--BackgroundColor: transparent;
16156
- --pf-v5-c-input-group__item--m-box--PaddingRight: var(--pf-v5-global--spacer--sm);
16157
- --pf-v5-c-input-group__item--m-box--PaddingLeft: var(--pf-v5-global--spacer--sm);
16158
- --pf-v5-c-input-group__item--m-box--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
16159
- --pf-v5-c-input-group__item--m-box--BorderWidth: var(--pf-v5-c-input-group__item--offset);
16155
+ --pf-v5-c-input-group__item--AlignItems: start;
16156
+ --pf-v5-c-input-group__item--m-box--PaddingRight: var(--pf-t--global--spacer--sm);
16157
+ --pf-v5-c-input-group__item--m-box--PaddingLeft: var(--pf-t--global--spacer--sm);
16158
+ --pf-v5-c-input-group__item--m-box--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
16159
+ --pf-v5-c-input-group__item--m-box--BorderWidth: var(--pf-v5-c-input-group__item--BorderWidth--base);
16160
+ --pf-v5-c-input-group__item--m-box--BorderRadius: var(--pf-t--global--border--radius--small);
16160
16161
  --pf-v5-c-input-group__item--m-box--BorderTopColor: var(--pf-v5-c-input-group__item--BorderColor--base);
16161
16162
  --pf-v5-c-input-group__item--m-box--BorderRightColor: var(--pf-v5-c-input-group__item--BorderColor--base);
16162
- --pf-v5-c-input-group__item--m-box--BorderBottomColor: var(--pf-v5-c-input-group__item--BorderColor--accent);
16163
+ --pf-v5-c-input-group__item--m-box--BorderBottomColor: var(--pf-v5-c-input-group__item--BorderColor--base);
16163
16164
  --pf-v5-c-input-group__item--m-box--BorderLeftColor: var(--pf-v5-c-input-group__item--BorderColor--base);
16164
16165
  --pf-v5-c-input-group__item--m-plain--BackgroundColor: transparent;
16165
- --pf-v5-c-input-group__text--FontSize: var(--pf-v5-global--FontSize--md);
16166
- --pf-v5-c-input-group__text--Color: var(--pf-v5-global--Color--dark-200);
16167
- --pf-v5-c-input-group__item--m-disabled__text--Color: var(--pf-v5-global--disabled-color--100);
16168
- --pf-v5-c-input-group__item--m-disabled--BorderBottomColor: transparent;
16169
- --pf-v5-c-input-group__item--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
16166
+ --pf-v5-c-input-group__text--FontSize: var(--pf-t--global--font--size--body--default);
16167
+ --pf-v5-c-input-group__text--Color: var(--pf-t--global--text--color--regular);
16168
+ --pf-v5-c-input-group__item--m-disabled__text--Color: var(--pf-t--global--text--color--on-disabled);
16169
+ --pf-v5-c-input-group__item--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
16170
+ }
16171
+
16172
+ .pf-v5-c-input-group {
16170
16173
  display: flex;
16174
+ gap: var(--pf-v5-c-input-group--Gap);
16171
16175
  width: 100%;
16172
16176
  }
16173
16177
 
16174
16178
  .pf-v5-c-input-group__item {
16175
16179
  position: relative;
16176
16180
  display: flex;
16181
+ align-items: var(--pf-v5-c-input-group__item--AlignItems);
16177
16182
  min-width: var(--pf-v5-c-input-group__item--MinWidth, revert);
16178
16183
  max-width: var(--pf-v5-c-input-group__item--MaxWidth, revert);
16179
16184
  background-color: var(--pf-v5-c-input-group__item--BackgroundColor);
@@ -16182,9 +16187,6 @@ select ~ .pf-v5-c-form-control__utilities {
16182
16187
  border-inline-start-color: var(--pf-v5-c-input-group__item--m-box--BorderLeftColor);
16183
16188
  border-inline-end-color: var(--pf-v5-c-input-group__item--m-box--BorderRightColor);
16184
16189
  }
16185
- .pf-v5-c-input-group__item:where(:not(:first-child)) {
16186
- margin-inline-start: var(--pf-v5-c-input-group__item--MarginLeft);
16187
- }
16188
16190
  .pf-v5-c-input-group__item.pf-m-box {
16189
16191
  --pf-v5-c-input-group__item--BackgroundColor: var(--pf-v5-c-input-group__item--m-box--BackgroundColor);
16190
16192
  padding-inline-start: var(--pf-v5-c-input-group__item--m-box--PaddingLeft);
@@ -16194,15 +16196,14 @@ select ~ .pf-v5-c-form-control__utilities {
16194
16196
  border-block-end-color: var(--pf-v5-c-input-group__item--m-box--BorderBottomColor);
16195
16197
  border-inline-start-color: var(--pf-v5-c-input-group__item--m-box--BorderLeftColor);
16196
16198
  border-inline-end-color: var(--pf-v5-c-input-group__item--m-box--BorderRightColor);
16199
+ border-radius: var(--pf-v5-c-input-group__item--m-box--BorderRadius);
16197
16200
  }
16198
16201
  .pf-v5-c-input-group__item.pf-m-plain {
16199
- --pf-v5-c-input-group__item--MarginLeft: 0;
16200
16202
  --pf-v5-c-input-group__item--BackgroundColor: var(--pf-v5-c-input-group__item--m-plain--BackgroundColor);
16201
16203
  border: none;
16202
16204
  }
16203
16205
  .pf-v5-c-input-group__item.pf-m-disabled {
16204
16206
  --pf-v5-c-input-group__item--BackgroundColor: var(--pf-v5-c-input-group__item--m-disabled--BackgroundColor);
16205
- --pf-v5-c-input-group__item--m-box--BorderBottomColor: var(--pf-v5-c-input-group__item--m-disabled--BorderBottomColor);
16206
16207
  --pf-v5-c-input-group__text--Color: var(--pf-v5-c-input-group__item--m-disabled__text--Color);
16207
16208
  }
16208
16209
  .pf-v5-c-input-group__item.pf-m-fill {
@@ -16218,27 +16219,6 @@ label.pf-v5-c-input-group__text {
16218
16219
  cursor: pointer;
16219
16220
  }
16220
16221
 
16221
- :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
16222
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
16223
- }
16224
-
16225
- :where(.pf-v5-theme-dark) .pf-v5-c-input-group {
16226
- --pf-v5-c-input-group__item--BorderLeftWidth: var(--pf-v5-c-input-group__item--BorderWidth--base);
16227
- --pf-v5-c-input-group__item--BorderLeftColor: var(--pf-v5-global--palette--black-700);
16228
- --pf-v5-c-input-group__item--m-box--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
16229
- --pf-v5-c-input-group__item--m-box--BorderTopColor: transparent;
16230
- --pf-v5-c-input-group__item--m-box--BorderRightColor: transparent;
16231
- --pf-v5-c-input-group__item--m-box--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
16232
- --pf-v5-c-input-group__item--m-box--BorderLeftColor: transparent;
16233
- --pf-v5-c-input-group__item--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
16234
- --pf-v5-c-input-group__item--m-disabled--BorderBottomColor: transparent;
16235
- --pf-v5-c-input-group__item--m-disabled__text--Color: var(--pf-v5-global--disabled-color--300);
16236
- }
16237
- :where(.pf-v5-theme-dark) .pf-v5-c-input-group > * + * {
16238
- --pf-v5-c-input-group__item--m-box--BorderLeftColor: var(--pf-v5-c-input-group__item--BorderLeftColor);
16239
- border-inline-start: var(--pf-v5-c-input-group__item--BorderLeftWidth) solid var(--pf-v5-c-input-group__item--BorderLeftColor);
16240
- }
16241
-
16242
16222
  .pf-v5-c-jump-links {
16243
16223
  --pf-v5-c-jump-links__list--Display: flex;
16244
16224
  --pf-v5-c-jump-links__list--PaddingTop: 0;
@@ -29342,19 +29322,22 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
29342
29322
  --pf-v5-c-tile--m-disabled__body--Color: var(--pf-v5-global--disabled-color--300);
29343
29323
  }
29344
29324
 
29345
- .pf-v5-c-timestamp {
29346
- --pf-v5-c-timestamp--FontSize: var(--pf-v5-global--FontSize--sm);
29347
- --pf-v5-c-timestamp--Color: var(--pf-v5-global--Color--200);
29325
+ :root, .pf-v5-c-timestamp {
29326
+ --pf-v5-c-timestamp--FontSize: var(--pf-t--global--font--size--body--sm);
29327
+ --pf-v5-c-timestamp--Color: var(--pf-t--global--text--color--subtle);
29348
29328
  --pf-v5-c-timestamp--OutlineOffset: 0.1875rem;
29349
29329
  --pf-v5-c-timestamp--m-help-text--TextDecorationLine: underline;
29350
29330
  --pf-v5-c-timestamp--m-help-text--TextDecorationStyle: dashed;
29351
- --pf-v5-c-timestamp--m-help-text--TextDecorationThickness: var(--pf-v5-global--BorderWidth--sm);
29331
+ --pf-v5-c-timestamp--m-help-text--TextDecorationThickness: var(--pf-t--global--border--width--regular);
29352
29332
  --pf-v5-c-timestamp--m-help-text--TextUnderlineOffset: 0.25rem;
29353
- --pf-v5-c-timestamp--m-help-text--TextDecorationColor: var(--pf-v5-global--BorderColor--200);
29354
- --pf-v5-c-timestamp--m-help-text--hover--Color: var(--pf-v5-global--Color--100);
29355
- --pf-v5-c-timestamp--m-help-text--focus--Color: var(--pf-v5-global--Color--100);
29356
- --pf-v5-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-v5-global--Color--100);
29357
- --pf-v5-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-v5-global--Color--100);
29333
+ --pf-v5-c-timestamp--m-help-text--TextDecorationColor: var(--pf-t--global--border--color--default);
29334
+ --pf-v5-c-timestamp--m-help-text--hover--Color: var(--pf-t--global--text--color--regular);
29335
+ --pf-v5-c-timestamp--m-help-text--focus--Color: var(--pf-t--global--text--color--regular);
29336
+ --pf-v5-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-t--global--text--color--regular);
29337
+ --pf-v5-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-t--global--text--color--regular);
29338
+ }
29339
+
29340
+ .pf-v5-c-timestamp {
29358
29341
  display: inline-block;
29359
29342
  font-size: var(--pf-v5-c-timestamp--FontSize);
29360
29343
  color: var(--pf-v5-c-timestamp--Color);
@@ -29773,12 +29756,12 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
29773
29756
  direction: rtl;
29774
29757
  }
29775
29758
  }
29759
+ :root,
29776
29760
  .pf-v5-c-number-input {
29777
- --pf-v5-c-number-input__unit--c-input-group--MarginLeft: var(--pf-v5-global--spacer--sm);
29778
- --pf-v5-c-number-input__icon--FontSize: var(--pf-v5-global--FontSize--xs);
29779
- --pf-v5-c-number-input--c-form-control--width-base: calc(var(--pf-v5-global--spacer--sm) * 2 + var(--pf-v5-global--BorderWidth--sm) * 2);
29780
- --pf-v5-c-number-input--c-form-control--width-icon: 0px;
29781
- --pf-v5-c-number-input--m-status--c-form-control--width-icon: var(--pf-v5-global--spacer--xl);
29761
+ --pf-v5-c-number-input__unit--c-input-group--MarginLeft: var(--pf-t--global--spacer--sm);
29762
+ --pf-v5-c-number-input__icon--FontSize: var(--pf-t--global--font--size--xs);
29763
+ --pf-v5-c-number-input--c-form-control--width-base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-t--global--border--width--box--default) * 2);
29764
+ --pf-v5-c-number-input--c-form-control--width-icon: var(--pf-t--global--spacer--xl);
29782
29765
  --pf-v5-c-number-input--c-form-control--width-chars: 4;
29783
29766
  --pf-v5-c-number-input--c-form-control--Width:
29784
29767
  calc(
@@ -29786,12 +29769,12 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
29786
29769
  var(--pf-v5-c-number-input--c-form-control--width-base) + var(--pf-v5-c-number-input--c-form-control--width-chars) * 1ch
29787
29770
  ) + var(--pf-v5-c-number-input--c-form-control--width-icon)
29788
29771
  );
29772
+ }
29773
+
29774
+ .pf-v5-c-number-input {
29789
29775
  display: inline-flex;
29790
29776
  align-items: center;
29791
29777
  }
29792
- .pf-v5-c-number-input.pf-m-status {
29793
- --pf-v5-c-number-input--c-form-control--width-icon: var(--pf-v5-c-number-input--m-status--c-form-control--width-icon);
29794
- }
29795
29778
  .pf-v5-c-number-input .pf-v5-c-form-control {
29796
29779
  width: var(--pf-v5-c-number-input--c-form-control--Width);
29797
29780
  }