@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/docs/utilities/BackgroundColor/examples/BackgroundColor.md CHANGED
@@ -6,66 +6,15 @@ section: utility-classes
6
6
  ### Standard background colors
7
7
 
8
8
  ```html
9
- <div class="pf-v6-u-background-color-100">Background color 100</div>
10
- <br />
11
- <div class="pf-v6-u-background-color-200">Background color 200</div>
12
- <br />
13
- <div class="pf-v6-u-background-color-active-color-100">
14
- <div class="pf-v6-u-color-light-200">Active color 100</div>
15
- </div>
16
- <br />
17
- <div class="pf-v6-u-background-color-active-color-300">
18
- <div class="pf-v6-u-color-light-200">Active color 300</div>
19
- </div>
20
- <br />
21
- <div class="pf-v6-u-background-color-primary-color-200">
22
- <div class="pf-v6-u-color-light-200">Primary color 200</div>
23
- </div>
24
-
25
- ```
26
-
27
- ### Inverse background colors
28
-
29
- ```html
30
- <div class="pf-v6-u-background-color-dark-100">
31
- <div class="pf-v6-u-color-light-200">Background color dark 100</div>
32
- </div>
33
- <br />
34
- <div class="pf-v6-u-background-color-dark-200">
35
- <div class="pf-v6-u-color-light-200">Background color dark 200</div>
36
- </div>
37
- <br />
38
- <div class="pf-v6-u-background-color-dark-300">
39
- <div class="pf-v6-u-color-light-200">Background color dark 300</div>
9
+ <div class="pf-v6-u-background-color-disabled">
10
+ <div class="pf-v6-u-text-color-on-disabled">Disabled background color</div>
40
11
  </div>
41
12
  <br />
42
- <div class="pf-v6-u-background-color-dark-400">
43
- <div class="pf-v6-u-color-light-200">Background color dark 400</div>
13
+ <div class="pf-v6-u-background-color-inverse">
14
+ <div class="pf-v6-u-text-color-inverse">Inverse background color</div>
44
15
  </div>
45
-
46
- ```
47
-
48
- ### Disabled background colors
49
-
50
- ```html
51
- <div class="pf-v6-u-background-color-disabled-color-200">Disabled color 200</div>
52
- <br />
53
- <div class="pf-v6-u-background-color-disabled-color-300">Disabled color 300</div>
54
-
55
- ```
56
-
57
- ### Status and state background colors
58
-
59
- ```html
60
- <div class="pf-v6-u-background-color-default">Default</div>
61
- <br />
62
- <div class="pf-v6-u-background-color-success">Success</div>
63
- <br />
64
- <div class="pf-v6-u-background-color-info">Info</div>
65
- <br />
66
- <div class="pf-v6-u-background-color-warning">Warning</div>
67
16
  <br />
68
- <div class="pf-v6-u-background-color-danger">Danger</div>
17
+ <div class="pf-v6-u-background-color-highlight">Highlight background color</div>
69
18
 
70
19
  ```
71
20
 
@@ -79,19 +28,10 @@ Care should be taken especially when applying background colors, as this can hav
79
28
 
80
29
  Note that "inverse" background colors are labeled as such to indicate that they are best used with the ["inverse" text colors](/utility-classes/text#inverse-colors).
81
30
 
82
- [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-background-color-200-on-lg**
31
+ [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-background-color-disabled-on-lg**
83
32
 
84
33
  ### Usage
85
34
 
86
35
  | Class | Applied to | Outcome |
87
36
  | --------------------------------- | ---------- | ---------------------------------- |
88
- | `.pf-v6-u-background-color-{100, 200}{-on-[breakpoint]}` | `*` | Applies background color 100 or 200. |
89
- | `.pf-v6-u-background-color-active-color-{100, 300}{-on-[breakpoint]}` | `*` | Applies background color active 100 or 300. |
90
- | `.pf-v6-u-background-color-primary-color-200{-on-[breakpoint]}` | `*` | Applies background color primary 200. |
91
- | `.pf-v6-u-background-color-dark-{100, 200, 300, 400}{-on-[breakpoint]}` | `*` | Applies background color dark 100, 200, 300, or 400. |
92
- | `.pf-v6-u-background-color-disabled-color-{200, 300}{-on-[breakpoint]}` | `*` | Applies background color disabled 200 or 300. |
93
- | `.pf-v6-u-background-color-default{-on-[breakpoint]}` | `*` | Applies the background color for the default state. |
94
- | `.pf-v6-u-background-color-success{-on-[breakpoint]}` | `*` | Applies the background color for the success state. |
95
- | `.pf-v6-u-background-color-info{-on-[breakpoint]}` | `*` | Applies the background color for the info state. |
96
- | `.pf-v6-u-background-color-warning{-on-[breakpoint]}` | `*` | Applies the background color for the warning state. |
97
- | `.pf-v6-u-background-color-danger{-on-[breakpoint]}` | `*` | Applies the background color for the danger state. |
37
+ | `.pf-v6-u-background-color-{disabled, inverse, highlight}{-on-[breakpoint]}` | `*` | Applies background color |
package/docs/utilities/Text/examples/Text.md CHANGED
@@ -1,9 +1,7 @@
1
1
  ---
2
2
  id: Text
3
3
  section: utility-classes
4
- ---import './Text.css'
5
-
6
- ## Examples
4
+ ---## Examples
7
5
 
8
6
  ### Font family
9
7
 
@@ -11,9 +9,6 @@ section: utility-classes
11
9
  <div class="pf-v6-u-font-family-text">Text</div>
12
10
  <div class="pf-v6-u-font-family-heading">Heading</div>
13
11
  <div class="pf-v6-u-font-family-monospace">Monospace</div>
14
- <div class="pf-v6-u-font-family-text-vf">Variable font text</div>
15
- <div class="pf-v6-u-font-family-heading-vf">Variable font heading</div>
16
- <div class="pf-v6-u-font-family-monospace-vf">Variable font monospace</div>
17
12
 
18
13
  ```
19
14
 
@@ -40,16 +35,14 @@ section: utility-classes
40
35
 
41
36
  ```
42
37
 
43
- ### Standard colors
38
+ ### Standard text colors
44
39
 
45
40
  ```html
46
- <div class="pf-v6-u-color-100">Font color 100</div>
47
- <div class="pf-v6-u-color-200">Font color 200</div>
48
- <div class="pf-v6-u-color-300">Font color 300</div>
49
- <div class="pf-v6-u-color-400">Font color 400</div>
50
- <div class="pf-v6-u-active-color-100">Active color 100</div>
51
- <div class="pf-v6-u-active-color-400">Active color 400</div>
52
- <div class="pf-v6-u-primary-color-100">Primary color 100</div>
41
+ <div class="pf-v6-u-text-color-regular">Regular text color</div>
42
+ <div class="pf-v6-u-text-color-brand">Brand font color</div>
43
+ <div class="pf-v6-u-text-color-placeholder">Placeholder text color</div>
44
+ <div class="pf-v6-u-text-color-required">Required text color</div>
45
+ <div class="pf-v6-u-text-color-subtle">Subtle text color</div>
53
46
 
54
47
  ```
55
48
 
@@ -58,9 +51,11 @@ section: utility-classes
58
51
  These colors are best used with the ["inverse" background colors](/utility-classes/background-color#inverse-background-colors).
59
52
 
60
53
  ```html
61
- <div class="pf-v6-u-background-color-dark-400">
62
- <div class="pf-v6-u-color-light-100">Font color light 100</div>
63
- <div class="pf-v6-u-color-light-200">Font color light 200</div>
54
+ <div class="pf-v6-u-background-color-inverse">
55
+ <div class="pf-v6-u-text-color-inverse">Inverse text color</div>
56
+ <div class="pf-v6-u-icon-color-inverse">
57
+ <i class="fas fa-thumbtack" aria-hidden="true"></i>
58
+ </div>
64
59
  </div>
65
60
 
66
61
  ```
@@ -68,51 +63,67 @@ These colors are best used with the ["inverse" background colors](/utility-class
68
63
  ### Link colors
69
64
 
70
65
  ```html
71
- <div class="pf-v6-u-link-color">Link color</div>
72
- <div class="pf-v6-u-link-color-hover">Hover link color</div>
73
- <div class="pf-v6-u-background-color-dark-400">
74
- <div class="pf-v6-u-link-color-light">Light link color</div>
75
- <div class="pf-v6-u-link-color-light-hover">Light hover link color</div>
76
- </div>
77
- <div class="pf-v6-u-link-color-dark">Dark link color</div>
78
- <div class="pf-v6-u-link-color-dark-hover">Dark hover link color</div>
79
- <div class="pf-v6-u-link-color-visited">Visited link color</div>
66
+ <div class="pf-v6-u-text-color-link">Link text color</div>
67
+ <div class="pf-v6-u-text-color-link-hover">Hover link text color</div>
68
+ <div class="pf-v6-u-text-color-link-visited">Visited link text color</div>
80
69
 
81
70
  ```
82
71
 
83
72
  ### Status and state text colors
84
73
 
85
74
  ```html
86
- <div class="pf-v6-u-custom-color-100">Font color custom 100</div>
87
- <div class="pf-v6-u-custom-color-200">Font color custom 200</div>
88
- <div class="pf-v6-u-custom-color-300">Font color custom 300</div>
89
- <div class="pf-v6-u-success-color-100">Font color success 100</div>
90
- <div class="pf-v6-u-success-color-200">Font color success 200</div>
91
- <div class="pf-v6-u-info-color-100">Font color info 100</div>
92
- <div class="pf-v6-u-info-color-200">Font color info 200</div>
93
- <div class="pf-v6-u-warning-color-100">Font color warning 100</div>
94
- <div class="pf-v6-u-warning-color-200">Font color warning 200</div>
95
- <div class="pf-v6-u-danger-color-100">Font color danger 100</div>
96
- <div class="pf-v6-u-danger-color-200">Font color danger 200</div>
97
- <div class="pf-v6-u-danger-color-300">Font color danger 300</div>
75
+ <div class="pf-v6-u-text-color-status-success">Success status text color</div>
76
+ <div class="pf-v6-u-text-color-status-warning">Warning status text color</div>
77
+ <div class="pf-v6-u-text-color-status-danger">Danger status text color</div>
78
+ <div class="pf-v6-u-text-color-status-info">Info status text color</div>
79
+ <div class="pf-v6-u-text-color-status-custom">Custom status text color</div>
98
80
 
99
81
  ```
100
82
 
101
83
  ### Disabled text colors
102
84
 
103
85
  ```html
104
- <div class="pf-v6-u-disabled-color-100">Font color disabled 100</div>
105
- <div class="pf-v6-u-disabled-color-200">Font color disabled 200</div>
86
+ <div class="pf-v6-u-text-color-disabled">Disabled text color</div>
87
+ <div class="pf-v6-u-background-color-disabled">
88
+ <div
89
+ class="pf-v6-u-text-color-on-disabled"
90
+ >Disabled text color on disabled background</div>
91
+ </div>
106
92
 
107
93
  ```
108
94
 
109
95
  ### Icon colors
110
96
 
111
97
  ```html
112
- <div class="pf-v6-u-icon-color-dark">
98
+ <div class="pf-v6-u-icon-color-regular">
99
+ <i class="fas fa-thumbtack" aria-hidden="true"></i>
100
+ </div>
101
+ <div class="pf-v6-u-icon-color-disabled">
102
+ <i class="fas fa-thumbtack" aria-hidden="true"></i>
103
+ </div>
104
+ <div class="pf-v6-u-icon-color-subtle">
105
+ <i class="fas fa-thumbtack" aria-hidden="true"></i>
106
+ </div>
107
+ <div class="pf-v6-u-icon-color-brand">
108
+ <i class="fas fa-thumbtack" aria-hidden="true"></i>
109
+ </div>
110
+ <div class="pf-v6-u-icon-color-favorite">
111
+ <i class="fas fa-thumbtack" aria-hidden="true"></i>
112
+ </div>
113
+ <br />
114
+ <div class="pf-v6-u-icon-color-status-success">
115
+ <i class="fas fa-thumbtack" aria-hidden="true"></i>
116
+ </div>
117
+ <div class="pf-v6-u-icon-color-status-warning">
118
+ <i class="fas fa-thumbtack" aria-hidden="true"></i>
119
+ </div>
120
+ <div class="pf-v6-u-icon-color-status-danger">
121
+ <i class="fas fa-thumbtack" aria-hidden="true"></i>
122
+ </div>
123
+ <div class="pf-v6-u-icon-color-status-info">
113
124
  <i class="fas fa-thumbtack" aria-hidden="true"></i>
114
125
  </div>
115
- <div class="pf-v6-u-icon-color-light">
126
+ <div class="pf-v6-u-icon-color-status-custom">
116
127
  <i class="fas fa-thumbtack" aria-hidden="true"></i>
117
128
  </div>
118
129
 
@@ -168,26 +179,17 @@ Care should be taken especially when applying text colors, as this can have a ne
168
179
  | Class | Applied to | Outcome |
169
180
  | - | - | - |
170
181
  | `.pf-v6-u-font-size-{xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}`| `*` | Sets font-size to xs, sm, md, lg, xl, 2xl, 3xl, or 4xl |
171
- | `.pf-v6-u-font-family-{text, heading, monospace, text-vf, heading-vf, monospace-vf}` | `*` | Sets font-family to text, heading, or monospace, or the variable font variation of that font family |
182
+ | `.pf-v6-u-font-family-{text, heading, monospace}` | `*` | Sets font-family to text, heading, or monospace |
172
183
  | `.pf-v6-u-font-weight-{normal, bold}{-on-[breakpoint]}` | `*` | Sets font-weight to light, normal, or bold |
173
- | `.pf-v6-u-color-{100, 200, 300, 400}{-on-[breakpoint]}` | `*` | Sets font-color to color 100, 200, 300, or 400 |
174
- | `.pf-v6-u-active-color-{100, 400}{-on-[breakpoint]}` | `*` | Sets font-color to active color 100 or 400 |
175
- | `.pf-v6-u-primary-color-100{-on-[breakpoint]}` | `*` | Sets font-color to primary color 100 |
176
- | `.pf-v6-u-color-light-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to light color 100 or 200 |
177
- | `.pf-v6-u-link-color{-on-[breakpoint]}` | `*` | Sets font-color to link color |
178
- | `.pf-v6-u-link-color-hover{-on-[breakpoint]}` | `*` | Sets font-color to hover link color |
179
- | `.pf-v6-u-link-color-light{-on-[breakpoint]}` | `*` | Sets font-color to light link color |
180
- | `.pf-v6-u-link-color-light-hover{-on-[breakpoint]}` | `*` | Sets font-color to light hover link color |
181
- | `.pf-v6-u-link-color-dark{-on-[breakpoint]}` | `*` | Sets font-color to dark link color |
182
- | `.pf-v6-u-link-color-dark-hover{-on-[breakpoint]}` | `*` | Sets font-color to dark hover link color |
183
- | `.pf-v6-u-link-color-visited{-on-[breakpoint]}` | `*` | Sets font-color to visited link color |
184
- | `.pf-v6-u-custom-color-{100, 200, 300}{-on-[breakpoint]}` | `*` | Sets font-color to custom color 100, 200, or 300 |
185
- | `.pf-v6-u-success-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to success color 100 or 200 |
186
- | `.pf-v6-u-info-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to info color 100 or 200 |
187
- | `.pf-v6-u-warning-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to warning color 100 or 200 |
188
- | `.pf-v6-u-danger-color-{100, 200, 300}{-on-[breakpoint]}` | `*` | Sets font-color to danger color 100, 200, or 300 |
189
- | `.pf-v6-u-disabled-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to disabled color 100 or 200 |
190
- | `.pf-v6-u-icon-color-{light, dark}{-on-[breakpoint]}` | `*` | Sets font-color to light or dark icon color |
184
+ | `.pf-v6-u-text-color-{regular, brand, placeholder, requried, subtle}{-on-[breakpoint]}` | `*` | Sets font-color |
185
+ | `.pf-v6-u-text-color-link{-on-[breakpoint]}` | `*` | Sets font-color to link color |
186
+ | `.pf-v6-u-text-color-link-hover{-on-[breakpoint]}` | `*` | Sets font-color to hover link color |
187
+ | `.pf-v6-u-text-color-link-visited{-on-[breakpoint]}` | `*` | Sets font-color to visited link color |
188
+ | `.pf-v6-u-text-color-status-{success, warning, danger, info, custom}{-on-[breakpoint]}` | `*` | Sets font-color to status color |
189
+ | `.pf-v6-u-text-color-disabled{-on-[breakpoint]}` | `*` | Sets font-color to disabled text color |
190
+ | `.pf-v6-u-text-color-on-disabled{-on-[breakpoint]}` | `*` | Sets font-color to text color on disabled background |
191
+ | `.pf-v6-u-icon-color-{regular, brand, placeholder, requried, subtle}{-on-[breakpoint]}` | `*` | Sets font-color for icons |
192
+ | `.pf-v6-u-icon-color-status-{success, warning, danger, info, custom}{-on-[breakpoint]}` | `*` | Sets font-color to icon status color |
191
193
  | `.pf-v6-u-text-break-word{-on-[breakpoint]}` | `*` | Sets word-break to break-word |
192
194
  | `.pf-v6-u-text-nowrap{-on-[breakpoint]}` | `*` | Sets white-space to nowrap |
193
195
  | `.pf-v6-u-text-wrap{-on-[breakpoint]}` | `*` | Sets white-space to normal |
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.112",
4
+ "version": "6.0.0-alpha.113",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {