@patternfly/patternfly 4.185.2 → 4.187.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.
Files changed (25) hide show
  1. package/base/_globals.scss +5 -0
  2. package/base/patternfly-globals.css +5 -0
  3. package/components/Card/card.css +2 -0
  4. package/components/Card/card.scss +2 -0
  5. package/components/Form/form.css +1 -1
  6. package/components/Form/form.scss +1 -1
  7. package/components/FormControl/form-control.css +7 -0
  8. package/components/FormControl/form-control.scss +11 -0
  9. package/components/Page/themes/dark/page.scss +1 -0
  10. package/components/Switch/switch.css +3 -3
  11. package/components/Switch/switch.scss +3 -3
  12. package/components/Tabs/tabs.css +4 -0
  13. package/components/Tabs/tabs.scss +5 -0
  14. package/docs/components/FormControl/examples/FormControl.md +16 -0
  15. package/docs/components/Switch/examples/Switch.md +60 -11
  16. package/docs/components/TabContent/examples/TabContent.md +8 -13
  17. package/docs/components/Tabs/examples/Tabs.md +1 -0
  18. package/docs/demos/Tabs/examples/Tabs.md +183 -191
  19. package/package.json +1 -1
  20. package/patternfly-base.css +5 -0
  21. package/patternfly-no-reset.css +17 -4
  22. package/patternfly-theme-dark.css +1 -0
  23. package/patternfly.css +22 -4
  24. package/patternfly.min.css +1 -1
  25. package/patternfly.min.css.map +1 -1
package/docs/demos/Tabs/examples/Tabs.md CHANGED
@@ -2110,222 +2110,214 @@ section: components
2110
2110
  </div>
2111
2111
  </div>
2112
2112
  </section>
2113
- <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
2113
+ <section
2114
+ class="pf-c-page__main-section pf-m-limit-width pf-m-light pf-m-no-padding"
2115
+ >
2114
2116
  <div class="pf-c-page__main-body">
2115
- <div class="pf-l-flex pf-m-column">
2116
- <div class="pf-l-flex__item">
2117
- <div
2118
- class="pf-c-tabs pf-m-inset pf-m-secondary"
2119
- id="tabs-tables-and-tabs-example-tabs-secondary"
2120
- >
2121
- <ul class="pf-c-tabs__list">
2122
- <li class="pf-c-tabs__item pf-m-current">
2123
- <button
2124
- class="pf-c-tabs__link"
2125
- aria-controls="tabs-tables-and-tabs-example-tabs-secondary-pod-info-panel"
2126
- id="tabs-tables-and-tabs-example-tabs-secondary-pod-info-link"
2127
- >
2128
- <span class="pf-c-tabs__item-text">Pod information</span>
2129
- </button>
2130
- </li>
2131
- <li class="pf-c-tabs__item">
2132
- <button
2133
- class="pf-c-tabs__link"
2134
- aria-controls="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-panel"
2135
- id="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-link"
2136
- >
2137
- <span class="pf-c-tabs__item-text">Editable Aspects</span>
2138
- </button>
2139
- </li>
2140
- </ul>
2141
- </div>
2142
- </div>
2143
- <div class="pf-l-flex__item">
2117
+ <div
2118
+ class="pf-c-tabs pf-m-secondary pf-m-page-insets pf-m-border-bottom"
2119
+ id="tabs-tables-and-tabs-example-tabs-secondary"
2120
+ >
2121
+ <ul class="pf-c-tabs__list">
2122
+ <li class="pf-c-tabs__item pf-m-current">
2123
+ <button
2124
+ class="pf-c-tabs__link"
2125
+ aria-controls="tabs-tables-and-tabs-example-tabs-secondary-pod-info-panel"
2126
+ id="tabs-tables-and-tabs-example-tabs-secondary-pod-info-link"
2127
+ >
2128
+ <span class="pf-c-tabs__item-text">Pod information</span>
2129
+ </button>
2130
+ </li>
2131
+ <li class="pf-c-tabs__item">
2132
+ <button
2133
+ class="pf-c-tabs__link"
2134
+ aria-controls="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-panel"
2135
+ id="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-link"
2136
+ >
2137
+ <span class="pf-c-tabs__item-text">Editable Aspects</span>
2138
+ </button>
2139
+ </li>
2140
+ </ul>
2141
+ </div>
2142
+ <section
2143
+ class="pf-c-tab-content"
2144
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-details-link"
2145
+ id="tabs-tables-and-tabs-example-tabs-details-panel"
2146
+ role="tabpanel"
2147
+ tabindex="0"
2148
+ >
2149
+ <div class="pf-c-tab-content__body pf-m-padding">
2144
2150
  <section
2145
2151
  class="pf-c-tab-content"
2146
- aria-labelledby="tabs-tables-and-tabs-example-tabs-details-link"
2147
- id="tabs-tables-and-tabs-example-tabs-details-panel"
2152
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-secondary-pod-info-link"
2153
+ id="tabs-tables-and-tabs-example-tabs-secondary-pod-info-panel"
2148
2154
  role="tabpanel"
2149
2155
  tabindex="0"
2150
2156
  >
2151
2157
  <div class="pf-c-tab-content__body">
2152
- <section
2153
- class="pf-c-tab-content"
2154
- aria-labelledby="tabs-tables-and-tabs-example-tabs-secondary-pod-info-link"
2155
- id="tabs-tables-and-tabs-example-tabs-secondary-pod-info-panel"
2156
- role="tabpanel"
2157
- tabindex="0"
2158
- >
2159
- <div class="pf-c-tab-content__body">
2160
- <div class="pf-l-flex pf-m-column">
2161
- <div class="pf-l-flex__item">
2162
- <dl
2163
- class="pf-c-description-list pf-m-2-col-on-lg"
2164
- aria-label="Pod information list"
2165
- >
2166
- <div class="pf-c-description-list__group">
2167
- <dt class="pf-c-description-list__term">Name</dt>
2168
- <dd class="pf-c-description-list__description">
2169
- <div
2170
- class="pf-c-description-list__text"
2171
- >3scale-control-fccb6ddb9-phyqv9</div>
2172
- </dd>
2173
- </div>
2174
- <div class="pf-c-description-list__group">
2175
- <dt class="pf-c-description-list__term">Status</dt>
2176
- <dd class="pf-c-description-list__description">
2177
- <div class="pf-c-description-list__text">
2178
- <div class="pf-l-flex pf-m-space-items-sm">
2179
- <div class="pf-l-flex__item">
2180
- <i
2181
- class="fas fa-fw fa-check-circle"
2182
- aria-hidden="true"
2183
- ></i>
2184
- </div>
2185
- <div class="pf-l-flex__item">Running</div>
2186
- </div>
2158
+ <div class="pf-l-flex pf-m-column">
2159
+ <div class="pf-l-flex__item">
2160
+ <dl
2161
+ class="pf-c-description-list pf-m-2-col-on-lg"
2162
+ aria-label="Pod information list"
2163
+ >
2164
+ <div class="pf-c-description-list__group">
2165
+ <dt class="pf-c-description-list__term">Name</dt>
2166
+ <dd class="pf-c-description-list__description">
2167
+ <div
2168
+ class="pf-c-description-list__text"
2169
+ >3scale-control-fccb6ddb9-phyqv9</div>
2170
+ </dd>
2171
+ </div>
2172
+ <div class="pf-c-description-list__group">
2173
+ <dt class="pf-c-description-list__term">Status</dt>
2174
+ <dd class="pf-c-description-list__description">
2175
+ <div class="pf-c-description-list__text">
2176
+ <div class="pf-l-flex pf-m-space-items-sm">
2177
+ <div class="pf-l-flex__item">
2178
+ <i
2179
+ class="fas fa-fw fa-check-circle"
2180
+ aria-hidden="true"
2181
+ ></i>
2187
2182
  </div>
2188
- </dd>
2189
- </div>
2190
- <div class="pf-c-description-list__group">
2191
- <dt class="pf-c-description-list__term">Namespace</dt>
2192
- <dd class="pf-c-description-list__description">
2193
- <div class="pf-c-description-list__text">
2194
- <div class="pf-l-flex pf-m-space-items-sm">
2195
- <div class="pf-l-flex__item">
2196
- <span class="pf-c-label pf-m-cyan">
2197
- <span class="pf-c-label__content">NS</span>
2198
- </span>
2199
- </div>
2200
- <div class="pf-l-flex__item">
2201
- <a href="#">knative-serving-ingress</a>
2202
- </div>
2203
- </div>
2183
+ <div class="pf-l-flex__item">Running</div>
2184
+ </div>
2185
+ </div>
2186
+ </dd>
2187
+ </div>
2188
+ <div class="pf-c-description-list__group">
2189
+ <dt class="pf-c-description-list__term">Namespace</dt>
2190
+ <dd class="pf-c-description-list__description">
2191
+ <div class="pf-c-description-list__text">
2192
+ <div class="pf-l-flex pf-m-space-items-sm">
2193
+ <div class="pf-l-flex__item">
2194
+ <span class="pf-c-label pf-m-cyan">
2195
+ <span class="pf-c-label__content">NS</span>
2196
+ </span>
2197
+ </div>
2198
+ <div class="pf-l-flex__item">
2199
+ <a href="#">knative-serving-ingress</a>
2204
2200
  </div>
2205
- </dd>
2201
+ </div>
2206
2202
  </div>
2207
- <div class="pf-c-description-list__group">
2208
- <dt
2209
- class="pf-c-description-list__term"
2210
- >Restart policy</dt>
2211
- <dd class="pf-c-description-list__description">
2212
- <div
2213
- class="pf-c-description-list__text"
2214
- >Always restart</div>
2215
- </dd>
2203
+ </dd>
2204
+ </div>
2205
+ <div class="pf-c-description-list__group">
2206
+ <dt class="pf-c-description-list__term">Restart policy</dt>
2207
+ <dd class="pf-c-description-list__description">
2208
+ <div
2209
+ class="pf-c-description-list__text"
2210
+ >Always restart</div>
2211
+ </dd>
2212
+ </div>
2213
+ <div class="pf-c-description-list__group">
2214
+ <dt class="pf-c-description-list__term">Pod IP</dt>
2215
+ <dd class="pf-c-description-list__description">
2216
+ <div class="pf-c-description-list__text">10..345.2.197</div>
2217
+ </dd>
2218
+ </div>
2219
+ <div class="pf-c-description-list__group">
2220
+ <dt
2221
+ class="pf-c-description-list__term"
2222
+ >Active deadline seconds</dt>
2223
+ <dd class="pf-c-description-list__description">
2224
+ <div
2225
+ class="pf-c-description-list__text"
2226
+ >Not configured</div>
2227
+ </dd>
2228
+ </div>
2229
+ <div class="pf-c-description-list__group">
2230
+ <dt class="pf-c-description-list__term">Created at</dt>
2231
+ <dd class="pf-c-description-list__description">
2232
+ <div class="pf-c-description-list__text">
2233
+ <time>Oct 15, 1:51 pm</time>
2216
2234
  </div>
2217
- <div class="pf-c-description-list__group">
2218
- <dt class="pf-c-description-list__term">Pod IP</dt>
2219
- <dd class="pf-c-description-list__description">
2220
- <div
2221
- class="pf-c-description-list__text"
2222
- >10..345.2.197</div>
2223
- </dd>
2224
- </div>
2225
- <div class="pf-c-description-list__group">
2226
- <dt
2227
- class="pf-c-description-list__term"
2228
- >Active deadline seconds</dt>
2229
- <dd class="pf-c-description-list__description">
2230
- <div
2231
- class="pf-c-description-list__text"
2232
- >Not configured</div>
2233
- </dd>
2234
- </div>
2235
- <div class="pf-c-description-list__group">
2236
- <dt class="pf-c-description-list__term">Created at</dt>
2237
- <dd class="pf-c-description-list__description">
2238
- <div class="pf-c-description-list__text">
2239
- <time>Oct 15, 1:51 pm</time>
2240
- </div>
2241
- </dd>
2242
- </div>
2243
- <div class="pf-c-description-list__group">
2244
- <dt class="pf-c-description-list__term">Node</dt>
2245
- <dd class="pf-c-description-list__description">
2246
- <div class="pf-c-description-list__text">
2247
- <div class="pf-l-flex pf-m-space-items-sm">
2248
- <div class="pf-l-flex__item">
2249
- <span class="pf-c-label pf-m-purple">
2250
- <span class="pf-c-label__content">N</span>
2251
- </span>
2252
- </div>
2253
- <div
2254
- class="pf-l-flex__item"
2255
- >ip-10-0-233-118.us-east-2.computer.external</div>
2256
- </div>
2235
+ </dd>
2236
+ </div>
2237
+ <div class="pf-c-description-list__group">
2238
+ <dt class="pf-c-description-list__term">Node</dt>
2239
+ <dd class="pf-c-description-list__description">
2240
+ <div class="pf-c-description-list__text">
2241
+ <div class="pf-l-flex pf-m-space-items-sm">
2242
+ <div class="pf-l-flex__item">
2243
+ <span class="pf-c-label pf-m-purple">
2244
+ <span class="pf-c-label__content">N</span>
2245
+ </span>
2257
2246
  </div>
2258
- </dd>
2247
+ <div
2248
+ class="pf-l-flex__item"
2249
+ >ip-10-0-233-118.us-east-2.computer.external</div>
2250
+ </div>
2259
2251
  </div>
2260
- </dl>
2252
+ </dd>
2261
2253
  </div>
2262
- </div>
2254
+ </dl>
2263
2255
  </div>
2264
- </section>
2265
- <section
2266
- class="pf-c-tab-content"
2267
- aria-labelledby="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-link"
2268
- id="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-panel"
2269
- role="tabpanel"
2270
- tabindex="0"
2271
- hidden
2272
- >
2273
- <div class="pf-c-tab-content__body">Editable aspects panel</div>
2274
- </section>
2256
+ </div>
2275
2257
  </div>
2276
2258
  </section>
2277
2259
  <section
2278
2260
  class="pf-c-tab-content"
2279
- aria-labelledby="tabs-tables-and-tabs-example-tabs-yaml-link"
2280
- id="tabs-tables-and-tabs-example-tabs-yaml-panel"
2281
- role="tabpanel"
2282
- tabindex="0"
2283
- hidden
2284
- >
2285
- <div class="pf-c-tab-content__body">YAML panel</div>
2286
- </section>
2287
- <section
2288
- class="pf-c-tab-content"
2289
- aria-labelledby="tabs-tables-and-tabs-example-tabs-environment-link"
2290
- id="tabs-tables-and-tabs-example-tabs-environment-panel"
2291
- role="tabpanel"
2292
- tabindex="0"
2293
- hidden
2294
- >
2295
- <div class="pf-c-tab-content__body">Environment panel</div>
2296
- </section>
2297
- <section
2298
- class="pf-c-tab-content"
2299
- aria-labelledby="tabs-tables-and-tabs-example-tabs-logs-link"
2300
- id="tabs-tables-and-tabs-example-tabs-logs-panel"
2301
- role="tabpanel"
2302
- tabindex="0"
2303
- hidden
2304
- >
2305
- <div class="pf-c-tab-content__body">Logs panel</div>
2306
- </section>
2307
- <section
2308
- class="pf-c-tab-content"
2309
- aria-labelledby="tabs-tables-and-tabs-example-tabs-events-link"
2310
- id="tabs-tables-and-tabs-example-tabs-events-panel"
2261
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-link"
2262
+ id="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-panel"
2311
2263
  role="tabpanel"
2312
2264
  tabindex="0"
2313
2265
  hidden
2314
2266
  >
2315
- <div class="pf-c-tab-content__body">Events panel</div>
2316
- </section>
2317
- <section
2318
- class="pf-c-tab-content"
2319
- aria-labelledby="tabs-tables-and-tabs-example-tabs-terminal-link"
2320
- id="tabs-tables-and-tabs-example-tabs-terminal-panel"
2321
- role="tabpanel"
2322
- tabindex="0"
2323
- hidden
2324
- >
2325
- <div class="pf-c-tab-content__body">Terminal panel</div>
2267
+ <div class="pf-c-tab-content__body">Editable aspects panel</div>
2326
2268
  </section>
2327
2269
  </div>
2328
- </div>
2270
+ </section>
2271
+ <section
2272
+ class="pf-c-tab-content"
2273
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-yaml-link"
2274
+ id="tabs-tables-and-tabs-example-tabs-yaml-panel"
2275
+ role="tabpanel"
2276
+ tabindex="0"
2277
+ hidden
2278
+ >
2279
+ <div class="pf-c-tab-content__body pf-m-padding">YAML panel</div>
2280
+ </section>
2281
+ <section
2282
+ class="pf-c-tab-content"
2283
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-environment-link"
2284
+ id="tabs-tables-and-tabs-example-tabs-environment-panel"
2285
+ role="tabpanel"
2286
+ tabindex="0"
2287
+ hidden
2288
+ >
2289
+ <div class="pf-c-tab-content__body pf-m-padding">Environment panel</div>
2290
+ </section>
2291
+ <section
2292
+ class="pf-c-tab-content"
2293
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-logs-link"
2294
+ id="tabs-tables-and-tabs-example-tabs-logs-panel"
2295
+ role="tabpanel"
2296
+ tabindex="0"
2297
+ hidden
2298
+ >
2299
+ <div class="pf-c-tab-content__body pf-m-padding">Logs panel</div>
2300
+ </section>
2301
+ <section
2302
+ class="pf-c-tab-content"
2303
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-events-link"
2304
+ id="tabs-tables-and-tabs-example-tabs-events-panel"
2305
+ role="tabpanel"
2306
+ tabindex="0"
2307
+ hidden
2308
+ >
2309
+ <div class="pf-c-tab-content__body pf-m-padding">Events panel</div>
2310
+ </section>
2311
+ <section
2312
+ class="pf-c-tab-content"
2313
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-terminal-link"
2314
+ id="tabs-tables-and-tabs-example-tabs-terminal-panel"
2315
+ role="tabpanel"
2316
+ tabindex="0"
2317
+ hidden
2318
+ >
2319
+ <div class="pf-c-tab-content__body pf-m-padding">Terminal panel</div>
2320
+ </section>
2329
2321
  </div>
2330
2322
  </section>
2331
2323
  </main>
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.185.2",
4
+ "version": "4.187.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base.css CHANGED
@@ -642,6 +642,11 @@ th {
642
642
  text-align: left;
643
643
  }
644
644
 
645
+ code,
646
+ pre {
647
+ font-family: var(--pf-global--FontFamily--monospace);
648
+ }
649
+
645
650
  *,
646
651
  *::before,
647
652
  *::after {
package/patternfly-no-reset.css CHANGED
@@ -7639,6 +7639,7 @@ button.pf-c-breadcrumb__link {
7639
7639
  --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);
7640
7640
  --pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));
7641
7641
  --pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));
7642
+ --pf-c-card--m-selectable-raised--m-selected-raised--ZIndex: var(--pf-global--ZIndex--xs);
7642
7643
  --pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
7643
7644
  --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
7644
7645
  --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
@@ -7743,6 +7744,7 @@ button.pf-c-breadcrumb__link {
7743
7744
  --pf-c-card--m-selectable-raised--before--Transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition);
7744
7745
  --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY);
7745
7746
  --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY);
7747
+ z-index: var(--pf-c-card--m-selectable-raised--m-selected-raised--ZIndex);
7746
7748
  box-shadow: var(--pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow);
7747
7749
  transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
7748
7750
  transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY));
@@ -13453,7 +13455,7 @@ label.pf-c-check, .pf-c-check__label,
13453
13455
  --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 9.375rem;
13454
13456
  --pf-c-form--m-horizontal__group-label--md--GridColumnGap: var(--pf-global--spacer--md);
13455
13457
  --pf-c-form--m-horizontal__group-control--md--GridColumnWidth: 1fr;
13456
- --pf-c-form--m-limit-width--MaxWidth: 31.25rem;
13458
+ --pf-c-form--m-limit-width--MaxWidth: 55rem;
13457
13459
  --pf-c-form--m-horizontal__group-label--md--PaddingTop: calc((((((var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md)) + (2 * var(--pf-global--BorderWidth--sm))) - var(--pf-global--FontSize--md)) / 2) + var(--pf-global--FontSize--md)) - ((((var(--pf-global--FontSize--sm) * var(--pf-global--LineHeight--sm)) - var(--pf-global--FontSize--sm)) / 2) + var(--pf-global--FontSize--sm)) + var(--pf-global--BorderWidth--sm));
13458
13460
  --pf-c-form__group-label--PaddingBottom: var(--pf-global--spacer--sm);
13459
13461
  --pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop: 0;
@@ -13976,6 +13978,7 @@ label.pf-c-check, .pf-c-check__label,
13976
13978
  --pf-c-form-control--m-expanded--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--focus--BorderBottomWidth));
13977
13979
  --pf-c-form-control--m-expanded--BorderBottomColor: var(--pf-global--primary-color--100);
13978
13980
  --pf-c-form-control--placeholder--Color: var(--pf-global--Color--dark-200);
13981
+ --pf-c-form-control--placeholder--child--Color: var(--pf-global--Color--100);
13979
13982
  --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--100);
13980
13983
  --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
13981
13984
  --pf-c-form-control--disabled--BorderColor: transparent;
@@ -14236,6 +14239,12 @@ select.pf-c-form-control.pf-m-warning {
14236
14239
  select.pf-c-form-control.pf-m-placeholder {
14237
14240
  color: var(--pf-c-form-control--placeholder--Color);
14238
14241
  }
14242
+ select.pf-c-form-control.pf-m-placeholder * {
14243
+ color: var(--pf-c-form-control--placeholder--child--Color);
14244
+ }
14245
+ select.pf-c-form-control.pf-m-placeholder *:disabled {
14246
+ color: revert;
14247
+ }
14239
14248
 
14240
14249
  textarea.pf-c-form-control {
14241
14250
  --pf-c-form-control--success--BackgroundPositionY: var(--pf-c-form-control--textarea--success--BackgroundPositionY);
@@ -22844,13 +22853,13 @@ svg.pf-c-spinner.pf-m-xl {
22844
22853
  --pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
22845
22854
  --pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
22846
22855
  --pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
22847
- --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--Color--dark-200);
22848
- --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--200);
22856
+ --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
22857
+ --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
22849
22858
  --pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
22850
22859
  --pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
22851
22860
  --pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
22852
22861
  --pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
22853
- --pf-c-switch__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
22862
+ --pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
22854
22863
  --pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
22855
22864
  --pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
22856
22865
  --pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);
@@ -26652,6 +26661,10 @@ svg.pf-c-spinner.pf-m-xl {
26652
26661
  --pf-c-tabs--before--BorderBottomWidth: 0;
26653
26662
  --pf-c-tabs__link--disabled--before--BorderBottomWidth: 0;
26654
26663
  }
26664
+ .pf-c-tabs.pf-m-border-bottom {
26665
+ --pf-c-tabs--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
26666
+ --pf-c-tabs__link--disabled--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
26667
+ }
26655
26668
  .pf-c-tabs.pf-m-box .pf-c-tabs__link, .pf-c-tabs.pf-m-vertical .pf-c-tabs__link {
26656
26669
  --pf-c-tabs__link--after--BorderBottomWidth: 0;
26657
26670
  }
package/patternfly-theme-dark.css CHANGED
@@ -493,6 +493,7 @@
493
493
  background: transparent;
494
494
  }
495
495
  :where(.pf-theme-dark) .pf-c-page {
496
+ --pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--200);
496
497
  --pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-global--BackgroundColor--300);
497
498
  --pf-c-page__sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
498
499
  --pf-c-page__header--BackgroundColor: var(--pf-global--palette--black-1000);
package/patternfly.css CHANGED
@@ -715,6 +715,11 @@ th {
715
715
  text-align: left;
716
716
  }
717
717
 
718
+ code,
719
+ pre {
720
+ font-family: var(--pf-global--FontFamily--monospace);
721
+ }
722
+
718
723
  *,
719
724
  *::before,
720
725
  *::after {
@@ -7761,6 +7766,7 @@ button.pf-c-breadcrumb__link {
7761
7766
  --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);
7762
7767
  --pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));
7763
7768
  --pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));
7769
+ --pf-c-card--m-selectable-raised--m-selected-raised--ZIndex: var(--pf-global--ZIndex--xs);
7764
7770
  --pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
7765
7771
  --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
7766
7772
  --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
@@ -7865,6 +7871,7 @@ button.pf-c-breadcrumb__link {
7865
7871
  --pf-c-card--m-selectable-raised--before--Transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition);
7866
7872
  --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY);
7867
7873
  --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY);
7874
+ z-index: var(--pf-c-card--m-selectable-raised--m-selected-raised--ZIndex);
7868
7875
  box-shadow: var(--pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow);
7869
7876
  transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
7870
7877
  transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY));
@@ -13575,7 +13582,7 @@ label.pf-c-check, .pf-c-check__label,
13575
13582
  --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 9.375rem;
13576
13583
  --pf-c-form--m-horizontal__group-label--md--GridColumnGap: var(--pf-global--spacer--md);
13577
13584
  --pf-c-form--m-horizontal__group-control--md--GridColumnWidth: 1fr;
13578
- --pf-c-form--m-limit-width--MaxWidth: 31.25rem;
13585
+ --pf-c-form--m-limit-width--MaxWidth: 55rem;
13579
13586
  --pf-c-form--m-horizontal__group-label--md--PaddingTop: calc((((((var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md)) + (2 * var(--pf-global--BorderWidth--sm))) - var(--pf-global--FontSize--md)) / 2) + var(--pf-global--FontSize--md)) - ((((var(--pf-global--FontSize--sm) * var(--pf-global--LineHeight--sm)) - var(--pf-global--FontSize--sm)) / 2) + var(--pf-global--FontSize--sm)) + var(--pf-global--BorderWidth--sm));
13580
13587
  --pf-c-form__group-label--PaddingBottom: var(--pf-global--spacer--sm);
13581
13588
  --pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop: 0;
@@ -14098,6 +14105,7 @@ label.pf-c-check, .pf-c-check__label,
14098
14105
  --pf-c-form-control--m-expanded--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--focus--BorderBottomWidth));
14099
14106
  --pf-c-form-control--m-expanded--BorderBottomColor: var(--pf-global--primary-color--100);
14100
14107
  --pf-c-form-control--placeholder--Color: var(--pf-global--Color--dark-200);
14108
+ --pf-c-form-control--placeholder--child--Color: var(--pf-global--Color--100);
14101
14109
  --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--100);
14102
14110
  --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
14103
14111
  --pf-c-form-control--disabled--BorderColor: transparent;
@@ -14358,6 +14366,12 @@ select.pf-c-form-control.pf-m-warning {
14358
14366
  select.pf-c-form-control.pf-m-placeholder {
14359
14367
  color: var(--pf-c-form-control--placeholder--Color);
14360
14368
  }
14369
+ select.pf-c-form-control.pf-m-placeholder * {
14370
+ color: var(--pf-c-form-control--placeholder--child--Color);
14371
+ }
14372
+ select.pf-c-form-control.pf-m-placeholder *:disabled {
14373
+ color: revert;
14374
+ }
14361
14375
 
14362
14376
  textarea.pf-c-form-control {
14363
14377
  --pf-c-form-control--success--BackgroundPositionY: var(--pf-c-form-control--textarea--success--BackgroundPositionY);
@@ -22966,13 +22980,13 @@ svg.pf-c-spinner.pf-m-xl {
22966
22980
  --pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
22967
22981
  --pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
22968
22982
  --pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
22969
- --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--Color--dark-200);
22970
- --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--200);
22983
+ --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
22984
+ --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
22971
22985
  --pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
22972
22986
  --pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
22973
22987
  --pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
22974
22988
  --pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
22975
- --pf-c-switch__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
22989
+ --pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
22976
22990
  --pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
22977
22991
  --pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
22978
22992
  --pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);
@@ -26774,6 +26788,10 @@ svg.pf-c-spinner.pf-m-xl {
26774
26788
  --pf-c-tabs--before--BorderBottomWidth: 0;
26775
26789
  --pf-c-tabs__link--disabled--before--BorderBottomWidth: 0;
26776
26790
  }
26791
+ .pf-c-tabs.pf-m-border-bottom {
26792
+ --pf-c-tabs--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
26793
+ --pf-c-tabs__link--disabled--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
26794
+ }
26777
26795
  .pf-c-tabs.pf-m-box .pf-c-tabs__link, .pf-c-tabs.pf-m-vertical .pf-c-tabs__link {
26778
26796
  --pf-c-tabs__link--after--BorderBottomWidth: 0;
26779
26797
  }