@patternfly/patternfly 6.0.0-alpha.112 → 6.0.0-alpha.113

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 (9) hide show
  1. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
  2. package/docs/utilities/Text/examples/Text.md +63 -61
  3. package/package.json +1 -1
  4. package/patternfly-addons.css +429 -764
  5. package/utilities/BackgroundColor/BackgroundColor.css +36 -283
  6. package/utilities/BackgroundColor/BackgroundColor.scss +6 -45
  7. package/utilities/Text/text.css +393 -481
  8. package/utilities/Text/text.scss +69 -90
  9. package/docs/utilities/Text/examples/Text.css +0 -0
package/utilities/Text/text.scss CHANGED
@@ -3,22 +3,13 @@
3
3
  // Font family options
4
4
  $pf-v6-u-font-family-options: (
5
5
  font-family-text: (
6
- font-family var(--#{$pf-global}--FontFamily--text)
6
+ font-family var(--pf-t--global--font--family--body)
7
7
  ),
8
8
  font-family-heading: (
9
- font-family var(--#{$pf-global}--FontFamily--heading)
9
+ font-family var(--pf-t--global--font--family--heading)
10
10
  ),
11
11
  font-family-monospace: (
12
- font-family var(--#{$pf-global}--FontFamily--monospace)
13
- ),
14
- font-family-text-vf: (
15
- font-family var(--#{$pf-global}--FontFamily--text--vf)
16
- ),
17
- font-family-heading-vf: (
18
- font-family var(--#{$pf-global}--FontFamily--heading--vf)
19
- ),
20
- font-family-monospace-vf: (
21
- font-family var(--#{$pf-global}--FontFamily--monospace--vf)
12
+ font-family var(--pf-t--global--font--family--mono)
22
13
  )
23
14
  );
24
15
 
@@ -27,28 +18,28 @@ $pf-v6-u-font-family-options: (
27
18
  // Font size options
28
19
  $pf-v6-u-font-size-options: (
29
20
  font-size-xs: (
30
- font-size var(--#{$pf-global}--FontSize--xs)
21
+ font-size var(--pf-t--global--font--size--xs)
31
22
  ),
32
23
  font-size-sm: (
33
- font-size var(--#{$pf-global}--FontSize--sm)
24
+ font-size var(--pf-t--global--font--size--sm)
34
25
  ),
35
26
  font-size-md: (
36
- font-size var(--#{$pf-global}--FontSize--md)
27
+ font-size var(--pf-t--global--font--size--md)
37
28
  ),
38
29
  font-size-lg: (
39
- font-size var(--#{$pf-global}--FontSize--lg)
30
+ font-size var(--pf-t--global--font--size--lg)
40
31
  ),
41
32
  font-size-xl: (
42
- font-size var(--#{$pf-global}--FontSize--xl)
33
+ font-size var(--pf-t--global--font--size--xl)
43
34
  ),
44
35
  font-size-2xl: (
45
- font-size var(--#{$pf-global}--FontSize--2xl)
36
+ font-size var(--pf-v6-global--FontSize--2xl)
46
37
  ),
47
38
  font-size-3xl: (
48
- font-size var(--#{$pf-global}--FontSize--3xl)
39
+ font-size var(--pf-t--global--font--size--3xl)
49
40
  ),
50
41
  font-size-4xl: (
51
- font-size var(--#{$pf-global}--FontSize--4xl)
42
+ font-size var(--pf-t--global--font--size--4xl)
52
43
  )
53
44
  );
54
45
 
@@ -57,10 +48,10 @@ $pf-v6-u-font-size-options: (
57
48
  // Font weight options
58
49
  $pf-v6-u-font-weight-options: (
59
50
  font-weight-normal: (
60
- font-weight var(--#{$pf-global}--FontWeight--normal)
51
+ font-weight var(--pf-t--global--font--weight--body)
61
52
  ),
62
53
  font-weight-bold: (
63
- font-weight var(--#{$pf-global}--FontWeight--bold)
54
+ font-weight var(--pf-t--global--font--weight--body--bold)
64
55
  )
65
56
  );
66
57
 
@@ -68,102 +59,90 @@ $pf-v6-u-font-weight-options: (
68
59
 
69
60
  // Font color options
70
61
  $pf-v6-u-font-color-options: (
71
- color-100: (
72
- color var(--#{$pf-global}--Color--100)
73
- ),
74
- color-200: (
75
- color var(--#{$pf-global}--Color--200)
62
+ text-color-brand: (
63
+ color var(--pf-t--global--text--color--brand--default)
76
64
  ),
77
- color-300: (
78
- color var(--#{$pf-global}--Color--300)
65
+ text-color-disabled: (
66
+ color var(--pf-t--global--text--color--disabled)
79
67
  ),
80
- color-400: (
81
- color var(--#{$pf-global}--Color--400)
68
+ text-color-on-disabled: (
69
+ color var(--pf-t--global--text--color--on-disabled)
82
70
  ),
83
- active-color-100: (
84
- color var(--#{$pf-global}--active-color--100)
71
+ text-color-link: (
72
+ color var(--pf-t--global--text--color--link--default)
85
73
  ),
86
- active-color-400: (
87
- color var(--#{$pf-global}--active-color--400)
74
+ text-color-link-hover: (
75
+ color var(--pf-t--global--text--color--link--hover)
88
76
  ),
89
- primary-color-100: (
90
- color var(--#{$pf-global}--primary-color--100)
77
+ text-color-link-visited: (
78
+ color var(--pf-t--global--text--color--link--visited)
91
79
  ),
92
- color-light-100: (
93
- color var(--#{$pf-global}--Color--light-100)
80
+ text-color-placeholder: (
81
+ color var(--pf-t--global--text--color--placeholder)
94
82
  ),
95
- color-light-200: (
96
- color var(--#{$pf-global}--Color--light-200)
83
+ text-color-regular: (
84
+ color var(--pf-t--global--text--color--regular)
97
85
  ),
98
- link-color: (
99
- color var(--#{$pf-global}--link--Color)
86
+ text-color-required: (
87
+ color var(--pf-t--global--text--color--required)
100
88
  ),
101
- link-color-hover: (
102
- color var(--#{$pf-global}--link--Color--hover)
89
+ text-color-subtle: (
90
+ color var(--pf-t--global--text--color--subtle)
103
91
  ),
104
- link-color-light: (
105
- color var(--#{$pf-global}--link--Color--light)
92
+ text-color-inverse: (
93
+ color var(--pf-t--global--text--color--inverse)
106
94
  ),
107
- link-color-light-hover: (
108
- color var(--#{$pf-global}--link--Color--light--hover)
95
+ text-color-status-success: (
96
+ color var(--pf-t--global--color--status--success--default)
109
97
  ),
110
- link-color-dark: (
111
- color var(--#{$pf-global}--link--Color--dark)
98
+ text-color-status-warning: (
99
+ color var(--pf-t--global--text--color--status--warning--default)
112
100
  ),
113
- link-color-dark-hover: (
114
- color var(--#{$pf-global}--link--Color--dark--hover)
101
+ text-color-status-danger: (
102
+ color var(--pf-t--global--text--color--status--danger--default)
115
103
  ),
116
- link-color-visited: (
117
- color var(--#{$pf-global}--link--Color--visited)
104
+ text-color-status-default: (
105
+ color var(--pf-t--global--text--color--status--info--default)
118
106
  ),
119
- custom-color-100: (
120
- color var(--#{$pf-global}--custom-color--100)
107
+ text-color-status-custom: (
108
+ color var(--pf-t--global--text--color--status--custom--default)
121
109
  ),
122
- custom-color-200: (
123
- color var(--#{$pf-global}--custom-color--200)
110
+ icon-color-regular: (
111
+ color var(--pf-t--global--icon--color--regular)
124
112
  ),
125
- custom-color-300: (
126
- color var(--#{$pf-global}--custom-color--300)
113
+ icon-color-disabled: (
114
+ color var(--pf-t--global--icon--color--disabled)
127
115
  ),
128
- success-color-100: (
129
- color var(--#{$pf-global}--success-color--100)
116
+ icon-color-on-disabled: (
117
+ color var(--pf-t--global--icon--color--on-disabled)
130
118
  ),
131
- success-color-200: (
132
- color var(--#{$pf-global}--success-color--200)
119
+ icon-color-subtle: (
120
+ color var(--pf-t--global--icon--color--subtle)
133
121
  ),
134
- info-color-100: (
135
- color var(--#{$pf-global}--info-color--100)
122
+ icon-color-inverse: (
123
+ color var(--pf-t--global--icon--color--inverse)
136
124
  ),
137
- info-color-200: (
138
- color var(--#{$pf-global}--info-color--200)
125
+ icon-color-brand: (
126
+ color var(--pf-t--global--icon--color--brand--default)
139
127
  ),
140
- warning-color-100: (
141
- color var(--#{$pf-global}--warning-color--100)
128
+ icon-color-favorite: (
129
+ color var(--pf-t--global--icon--color--favorite--default)
142
130
  ),
143
- warning-color-200: (
144
- color var(--#{$pf-global}--warning-color--200)
131
+ icon-color-status-success: (
132
+ color var(--pf-t--global--icon--color--status--success--default)
145
133
  ),
146
- danger-color-100: (
147
- color var(--#{$pf-global}--danger-color--100)
134
+ icon-color-status-warning: (
135
+ color var(--pf-t--global--icon--color--status--warning--default)
148
136
  ),
149
- danger-color-200: (
150
- color var(--#{$pf-global}--danger-color--200)
137
+ icon-color-status-danger: (
138
+ color var(--pf-t--global--icon--color--status--danger--default)
151
139
  ),
152
- danger-color-300: (
153
- color var(--#{$pf-global}--danger-color--300)
140
+ icon-color-status-info: (
141
+ color var(--pf-t--global--icon--color--status--info--default)
154
142
  ),
155
- disabled-color-100: (
156
- color var(--#{$pf-global}--disabled-color--100)
143
+ icon-color-status-custom: (
144
+ color var(--pf-t--global--icon--color--status--custom--default)
157
145
  ),
158
- disabled-color-200: (
159
- color var(--#{$pf-global}--disabled-color--200)
160
- ),
161
- icon-color-light: (
162
- color var(--#{$pf-global}--icon--Color--light)
163
- ),
164
- icon-color-dark: (
165
- color var(--#{$pf-global}--icon--Color--dark)
166
- )
167
146
  );
168
147
 
169
148
  @include pf-v6-utility-builder($pf-v6-u-font-color-options, $pf-v6-global--breakpoint-list);
package/docs/utilities/Text/examples/Text.css DELETED
File without changes