@patternfly/patternfly 4.194.3 → 4.196.0

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.
@@ -5,6 +5,22 @@ section: utilities
5
5
 
6
6
  ## Examples
7
7
 
8
+ ### Font family
9
+
10
+ ```html
11
+ <div class="pf-u-font-family-sans-serif">Sans serif</div>
12
+ <div class="pf-u-font-family-heading-sans-serif">Heading sans serif</div>
13
+ <div class="pf-u-font-family-monospace">Monospace</div>
14
+ <div
15
+ class="pf-u-font-family-redhatVF-sans-serif"
16
+ >Red Hat variable font sans serif</div>
17
+ <div
18
+ class="pf-u-font-family-redhatVF-heading-sans-serif"
19
+ >Red Hat variable font heading sans serif</div>
20
+ <div class="pf-u-font-family-redhatVF-monospace">Red Hat variable font monospace</div>
21
+
22
+ ```
23
+
8
24
  ### Font size
9
25
 
10
26
  ```html
@@ -153,29 +169,30 @@ Care should be taken especially when applying text colors, as this can have a ne
153
169
 
154
170
  ### Usage
155
171
 
156
- | Class | Applied to | Outcome |
157
- | ----------------------------------------------------------------------- | ---------- | ------------------------------------------------------ |
158
- | `.pf-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 |
159
- | `.pf-u-font-weight-{light, normal, bold}{-on-[breakpoint]}` | `*` | Sets font-size to light, normal, or bold |
160
- | `.pf-u-color-{100, 200, 300, 400}{-on-[breakpoint]}` | `*` | Sets font-color to color 100, 200, 300, or 400 |
161
- | `.pf-u-active-color-{100, 400}{-on-[breakpoint]}` | `*` | Sets font-color to active color 100 or 400 |
162
- | `.pf-u-primary-color-100{-on-[breakpoint]}` | `*` | Sets font-color to primary color 100 |
163
- | `.pf-u-color-light-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to light color 100 or 200 |
164
- | `.pf-u-link-color{-on-[breakpoint]}` | `*` | Sets font-color to link color |
165
- | `.pf-u-link-color-hover{-on-[breakpoint]}` | `*` | Sets font-color to hover link color |
166
- | `.pf-u-link-color-light{-on-[breakpoint]}` | `*` | Sets font-color to light link color |
167
- | `.pf-u-link-color-light-hover{-on-[breakpoint]}` | `*` | Sets font-color to light hover link color |
168
- | `.pf-u-link-color-dark{-on-[breakpoint]}` | `*` | Sets font-color to dark link color |
169
- | `.pf-u-link-color-dark-hover{-on-[breakpoint]}` | `*` | Sets font-color to dark hover link color |
170
- | `.pf-u-link-color-visited{-on-[breakpoint]}` | `*` | Sets font-color to visited link color |
171
- | `.pf-u-default-color-{100, 200, 300}{-on-[breakpoint]}` | `*` | Sets font-color to default color 100, 200, or 300 |
172
- | `.pf-u-success-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to success color 100 or 200 |
173
- | `.pf-u-info-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to info color 100 or 200 |
174
- | `.pf-u-warning-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to warning color 100 or 200 |
175
- | `.pf-u-danger-color-{100, 200, 300}{-on-[breakpoint]}` | `*` | Sets font-color to danger color 100, 200, or 300 |
176
- | `.pf-u-disabled-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to disabled color 100 or 200 |
177
- | `.pf-u-icon-color-{light, dark}{-on-[breakpoint]}` | `*` | Sets font-color to light or dark icon color |
178
- | `.pf-u-text-break-word{-on-[breakpoint]}` | `*` | Sets word-break to break-word |
179
- | `.pf-u-text-nowrap{-on-[breakpoint]}` | `*` | Sets white-space to nowrap |
180
- | `.pf-u-text-wrap{-on-[breakpoint]}` | `*` | Sets white-space to normal |
181
- | `.pf-u-text-truncate` | `*` | Truncates text field |
172
+ | Class | Applied to | Outcome |
173
+ | ------------------------------------------------------------------------------------------------------------------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------- |
174
+ | `.pf-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 |
175
+ | `.pf-u-font-family-{sans-serif, heading-sans-serif, monospace, redhatVF-sans-serif, redhatVF-heading-sans-serif, redhatVF-monospace}` | `*` | Sets font-family to sans-serif, heading-sans-serif, or monospace; or Red Hat virtual font sans-serif, heading sans-serif, or monospace |
176
+ | `.pf-u-font-weight-{light, normal, bold}{-on-[breakpoint]}` | `*` | Sets font-size to light, normal, or bold |
177
+ | `.pf-u-color-{100, 200, 300, 400}{-on-[breakpoint]}` | `*` | Sets font-color to color 100, 200, 300, or 400 |
178
+ | `.pf-u-active-color-{100, 400}{-on-[breakpoint]}` | `*` | Sets font-color to active color 100 or 400 |
179
+ | `.pf-u-primary-color-100{-on-[breakpoint]}` | `*` | Sets font-color to primary color 100 |
180
+ | `.pf-u-color-light-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to light color 100 or 200 |
181
+ | `.pf-u-link-color{-on-[breakpoint]}` | `*` | Sets font-color to link color |
182
+ | `.pf-u-link-color-hover{-on-[breakpoint]}` | `*` | Sets font-color to hover link color |
183
+ | `.pf-u-link-color-light{-on-[breakpoint]}` | `*` | Sets font-color to light link color |
184
+ | `.pf-u-link-color-light-hover{-on-[breakpoint]}` | `*` | Sets font-color to light hover link color |
185
+ | `.pf-u-link-color-dark{-on-[breakpoint]}` | `*` | Sets font-color to dark link color |
186
+ | `.pf-u-link-color-dark-hover{-on-[breakpoint]}` | `*` | Sets font-color to dark hover link color |
187
+ | `.pf-u-link-color-visited{-on-[breakpoint]}` | `*` | Sets font-color to visited link color |
188
+ | `.pf-u-default-color-{100, 200, 300}{-on-[breakpoint]}` | `*` | Sets font-color to default color 100, 200, or 300 |
189
+ | `.pf-u-success-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to success color 100 or 200 |
190
+ | `.pf-u-info-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to info color 100 or 200 |
191
+ | `.pf-u-warning-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to warning color 100 or 200 |
192
+ | `.pf-u-danger-color-{100, 200, 300}{-on-[breakpoint]}` | `*` | Sets font-color to danger color 100, 200, or 300 |
193
+ | `.pf-u-disabled-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to disabled color 100 or 200 |
194
+ | `.pf-u-icon-color-{light, dark}{-on-[breakpoint]}` | `*` | Sets font-color to light or dark icon color |
195
+ | `.pf-u-text-break-word{-on-[breakpoint]}` | `*` | Sets word-break to break-word |
196
+ | `.pf-u-text-nowrap{-on-[breakpoint]}` | `*` | Sets white-space to nowrap |
197
+ | `.pf-u-text-wrap{-on-[breakpoint]}` | `*` | Sets white-space to normal |
198
+ | `.pf-u-text-truncate` | `*` | Truncates text field |
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": "4.194.3",
4
+ "version": "4.196.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -7873,6 +7873,30 @@
7873
7873
  }
7874
7874
  }
7875
7875
 
7876
+ .pf-u-font-family-sans-serif {
7877
+ font-family: var(--pf-global--FontFamily--sans-serif) !important;
7878
+ }
7879
+
7880
+ .pf-u-font-family-heading-sans-serif {
7881
+ font-family: var(--pf-global--FontFamily--heading--sans-serif) !important;
7882
+ }
7883
+
7884
+ .pf-u-font-family-monospace {
7885
+ font-family: var(--pf-global--FontFamily--monospace) !important;
7886
+ }
7887
+
7888
+ .pf-u-font-family-redhatVF-sans-serif {
7889
+ font-family: var(--pf-global--FontFamily--redhatVF--sans-serif) !important;
7890
+ }
7891
+
7892
+ .pf-u-font-family-redhatVF-heading-sans-serif {
7893
+ font-family: var(--pf-global--FontFamily--redhatVF--heading--sans-serif) !important;
7894
+ }
7895
+
7896
+ .pf-u-font-family-redhatVF-monospace {
7897
+ font-family: var(--pf-global--FontFamily--redhatVF--monospace) !important;
7898
+ }
7899
+
7876
7900
  .pf-u-font-size-xs {
7877
7901
  font-size: var(--pf-global--FontSize--xs) !important;
7878
7902
  }
@@ -98,6 +98,7 @@
98
98
  --pf-global--palette--light-green-500: #6ca100;
99
99
  --pf-global--palette--light-green-600: #486b00;
100
100
  --pf-global--palette--light-green-700: #253600;
101
+ --pf-global--palette--orange-50: #fff6ec;
101
102
  --pf-global--palette--orange-100: #f4b678;
102
103
  --pf-global--palette--orange-200: #ef9234;
103
104
  --pf-global--palette--orange-300: #ec7a08;
@@ -98,6 +98,7 @@
98
98
  --pf-global--palette--light-green-500: #6ca100;
99
99
  --pf-global--palette--light-green-600: #486b00;
100
100
  --pf-global--palette--light-green-700: #253600;
101
+ --pf-global--palette--orange-50: #fff6ec;
101
102
  --pf-global--palette--orange-100: #f4b678;
102
103
  --pf-global--palette--orange-200: #ef9234;
103
104
  --pf-global--palette--orange-300: #ec7a08;
@@ -171,6 +171,7 @@
171
171
  --pf-global--palette--light-green-500: #6ca100;
172
172
  --pf-global--palette--light-green-600: #486b00;
173
173
  --pf-global--palette--light-green-700: #253600;
174
+ --pf-global--palette--orange-50: #fff6ec;
174
175
  --pf-global--palette--orange-100: #f4b678;
175
176
  --pf-global--palette--orange-200: #ef9234;
176
177
  --pf-global--palette--orange-300: #ec7a08;
@@ -15047,9 +15048,9 @@ label.pf-c-input-group__text {
15047
15048
  --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--BorderColor--100);
15048
15049
  --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
15049
15050
  --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
15050
- --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--gold-50);
15051
+ --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--orange-50);
15051
15052
  --pf-c-label--m-orange__icon--Color: var(--pf-global--palette--orange-300);
15052
- --pf-c-label--m-orange__content--Color: var(--pf-global--palette--gold-700);
15053
+ --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-700);
15053
15054
  --pf-c-label--m-orange__content--before--BorderColor: var(--pf-global--palette--orange-100);
15054
15055
  --pf-c-label--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--orange-300);
15055
15056
  --pf-c-label--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--orange-300);
@@ -15087,6 +15088,16 @@ label.pf-c-input-group__text {
15087
15088
  --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--BorderColor--100);
15088
15089
  --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
15089
15090
  --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
15091
+ --pf-c-label--m-gold--BackgroundColor: var(--pf-global--palette--gold-50);
15092
+ --pf-c-label--m-gold__icon--Color: var(--pf-global--palette--gold-400);
15093
+ --pf-c-label--m-gold__content--Color: var(--pf-global--palette--gold-700);
15094
+ --pf-c-label--m-gold__content--before--BorderColor: var(--pf-global--palette--gold-100);
15095
+ --pf-c-label--m-gold__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-300);
15096
+ --pf-c-label--m-gold__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-300);
15097
+ --pf-c-label--m-outline--m-gold__content--Color: var(--pf-global--palette--gold-600);
15098
+ --pf-c-label--m-outline--m-gold__content--before--BorderColor: var(--pf-global--BorderColor--100);
15099
+ --pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
15100
+ --pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
15090
15101
  --pf-c-label--m-overflow__content--Color: var(--pf-global--link--Color);
15091
15102
  --pf-c-label--m-overflow__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
15092
15103
  --pf-c-label--m-overflow__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
@@ -15243,6 +15254,21 @@ label.pf-c-input-group__text {
15243
15254
  --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
15244
15255
  --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
15245
15256
  }
15257
+ .pf-c-label.pf-m-gold {
15258
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-gold--BackgroundColor);
15259
+ --pf-c-label__icon--Color: var(--pf-c-label--m-gold__icon--Color);
15260
+ --pf-c-label__content--Color: var(--pf-c-label--m-gold__content--Color);
15261
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
15262
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-gold__content--link--hover--before--BorderColor);
15263
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-gold__content--link--focus--before--BorderColor);
15264
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-gold__content--Color);
15265
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--before--BorderColor);
15266
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor);
15267
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor);
15268
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
15269
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
15270
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
15271
+ }
15246
15272
  .pf-c-label.pf-m-outline {
15247
15273
  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color);
15248
15274
  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--before--BorderWidth);
package/patternfly.css CHANGED
@@ -171,6 +171,7 @@
171
171
  --pf-global--palette--light-green-500: #6ca100;
172
172
  --pf-global--palette--light-green-600: #486b00;
173
173
  --pf-global--palette--light-green-700: #253600;
174
+ --pf-global--palette--orange-50: #fff6ec;
174
175
  --pf-global--palette--orange-100: #f4b678;
175
176
  --pf-global--palette--orange-200: #ef9234;
176
177
  --pf-global--palette--orange-300: #ec7a08;
@@ -15174,9 +15175,9 @@ label.pf-c-input-group__text {
15174
15175
  --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--BorderColor--100);
15175
15176
  --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
15176
15177
  --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
15177
- --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--gold-50);
15178
+ --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--orange-50);
15178
15179
  --pf-c-label--m-orange__icon--Color: var(--pf-global--palette--orange-300);
15179
- --pf-c-label--m-orange__content--Color: var(--pf-global--palette--gold-700);
15180
+ --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-700);
15180
15181
  --pf-c-label--m-orange__content--before--BorderColor: var(--pf-global--palette--orange-100);
15181
15182
  --pf-c-label--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--orange-300);
15182
15183
  --pf-c-label--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--orange-300);
@@ -15214,6 +15215,16 @@ label.pf-c-input-group__text {
15214
15215
  --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--BorderColor--100);
15215
15216
  --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
15216
15217
  --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
15218
+ --pf-c-label--m-gold--BackgroundColor: var(--pf-global--palette--gold-50);
15219
+ --pf-c-label--m-gold__icon--Color: var(--pf-global--palette--gold-400);
15220
+ --pf-c-label--m-gold__content--Color: var(--pf-global--palette--gold-700);
15221
+ --pf-c-label--m-gold__content--before--BorderColor: var(--pf-global--palette--gold-100);
15222
+ --pf-c-label--m-gold__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-300);
15223
+ --pf-c-label--m-gold__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-300);
15224
+ --pf-c-label--m-outline--m-gold__content--Color: var(--pf-global--palette--gold-600);
15225
+ --pf-c-label--m-outline--m-gold__content--before--BorderColor: var(--pf-global--BorderColor--100);
15226
+ --pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
15227
+ --pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
15217
15228
  --pf-c-label--m-overflow__content--Color: var(--pf-global--link--Color);
15218
15229
  --pf-c-label--m-overflow__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
15219
15230
  --pf-c-label--m-overflow__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
@@ -15370,6 +15381,21 @@ label.pf-c-input-group__text {
15370
15381
  --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
15371
15382
  --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
15372
15383
  }
15384
+ .pf-c-label.pf-m-gold {
15385
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-gold--BackgroundColor);
15386
+ --pf-c-label__icon--Color: var(--pf-c-label--m-gold__icon--Color);
15387
+ --pf-c-label__content--Color: var(--pf-c-label--m-gold__content--Color);
15388
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
15389
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-gold__content--link--hover--before--BorderColor);
15390
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-gold__content--link--focus--before--BorderColor);
15391
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-gold__content--Color);
15392
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--before--BorderColor);
15393
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor);
15394
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor);
15395
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
15396
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
15397
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
15398
+ }
15373
15399
  .pf-c-label.pf-m-outline {
15374
15400
  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color);
15375
15401
  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--before--BorderWidth);