@patternfly/patternfly 6.0.0-alpha.13 → 6.0.0-alpha.15

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 (13) hide show
  1. package/components/Badge/badge.css +23 -15
  2. package/components/Badge/badge.scss +25 -17
  3. package/components/Hint/hint.css +28 -21
  4. package/components/Hint/hint.scss +28 -24
  5. package/docs/components/Badge/examples/Badge.md +21 -0
  6. package/package.json +1 -1
  7. package/patternfly-no-globals.css +51 -46
  8. package/patternfly-theme-dark-unversioned.css +51 -46
  9. package/patternfly.css +51 -46
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
  12. package/components/Badge/themes/dark/badge.scss +0 -9
  13. package/components/Hint/themes/dark/hint.scss +0 -8
package/patternfly.css CHANGED
@@ -7631,18 +7631,25 @@ button) {
7631
7631
  box-shadow: var(--pf-v5-c-back-to-top--c-button--BoxShadow);
7632
7632
  }
7633
7633
 
7634
+ :root {
7635
+ --pf-v5-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
7636
+ --pf-v5-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
7637
+ --pf-v5-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
7638
+ --pf-v5-c-badge--PaddingRight: var(--pf-t--global--spacer--sm);
7639
+ --pf-v5-c-badge--PaddingLeft: var(--pf-t--global--spacer--sm);
7640
+ --pf-v5-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
7641
+ --pf-v5-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
7642
+ --pf-v5-c-badge__toggle-icon--MarginLeft: var(--pf-t--global--spacer--xs);
7643
+ --pf-v5-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
7644
+ --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
7645
+ --pf-v5-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
7646
+ --pf-v5-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
7647
+ --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
7648
+ --pf-v5-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
7649
+ --pf-v5-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
7650
+ }
7651
+
7634
7652
  .pf-v5-c-badge {
7635
- --pf-v5-c-badge--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
7636
- --pf-v5-c-badge--FontSize: var(--pf-v5-global--FontSize--xs);
7637
- --pf-v5-c-badge--FontWeight: var(--pf-v5-global--FontWeight--bold);
7638
- --pf-v5-c-badge--PaddingRight: var(--pf-v5-global--spacer--sm);
7639
- --pf-v5-c-badge--PaddingLeft: var(--pf-v5-global--spacer--sm);
7640
- --pf-v5-c-badge--Color: var(--pf-v5-global--Color--dark-100);
7641
- --pf-v5-c-badge--MinWidth: var(--pf-v5-global--spacer--xl);
7642
- --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
7643
- --pf-v5-c-badge--m-read--Color: var(--pf-v5-global--Color--dark-100);
7644
- --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--100);
7645
- --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--Color--light-100);
7646
7653
  display: inline-block;
7647
7654
  min-width: var(--pf-v5-c-badge--MinWidth);
7648
7655
  padding-inline-start: var(--pf-v5-c-badge--PaddingLeft);
@@ -7658,21 +7665,17 @@ button) {
7658
7665
  .pf-v5-c-badge.pf-m-read {
7659
7666
  --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-read--Color);
7660
7667
  --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
7668
+ --pf-v5-c-badge__toggle-icon--Color: var(--pf-v5-c-badge--m-read__toggle-icon--Color);
7661
7669
  }
7662
7670
  .pf-v5-c-badge.pf-m-unread {
7663
7671
  --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-unread--Color);
7664
7672
  --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-unread--BackgroundColor);
7673
+ --pf-v5-c-badge__toggle-icon--Color: var(--pf-v5-c-badge--m-unread__toggle-icon--Color);
7665
7674
  }
7666
7675
 
7667
- :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-login__header .pf-v5-c-button,
7668
- :where(.pf-v5-theme-dark) .pf-v5-c-login__footer .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, :where(.pf-v5-theme-dark) .pf-v5-c-banner .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box .pf-v5-c-button {
7669
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
7670
- }
7671
-
7672
- :where(.pf-v5-theme-dark) .pf-v5-c-badge {
7673
- --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--palette--black-500);
7674
- --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--primary-color--400);
7675
- --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--300);
7676
+ .pf-v5-c-badge__toggle-icon {
7677
+ margin-inline-start: var(--pf-v5-c-badge__toggle-icon--MarginLeft);
7678
+ color: var(--pf-v5-c-badge__toggle-icon--Color);
7676
7679
  }
7677
7680
 
7678
7681
  .pf-v5-c-banner {
@@ -16083,22 +16086,29 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
16083
16086
  filter: invert(1);
16084
16087
  }
16085
16088
 
16086
- .pf-v5-c-hint {
16087
- --pf-v5-c-hint--GridRowGap: var(--pf-v5-global--spacer--md);
16088
- --pf-v5-c-hint--PaddingTop: var(--pf-v5-global--spacer--lg);
16089
- --pf-v5-c-hint--PaddingRight: var(--pf-v5-global--spacer--lg);
16090
- --pf-v5-c-hint--PaddingBottom: var(--pf-v5-global--spacer--lg);
16091
- --pf-v5-c-hint--PaddingLeft: var(--pf-v5-global--spacer--lg);
16092
- --pf-v5-c-hint--BackgroundColor: var(--pf-v5-global--palette--blue-50);
16093
- --pf-v5-c-hint--BorderColor: var(--pf-v5-global--palette--blue-100);
16094
- --pf-v5-c-hint--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
16095
- --pf-v5-c-hint--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
16096
- --pf-v5-c-hint--Color: var(--pf-v5-global--Color--100);
16097
- --pf-v5-c-hint__title--FontSize: var(--pf-v5-global--FontSize--lg);
16098
- --pf-v5-c-hint__body--FontSize: var(--pf-v5-global--FontSize--md);
16099
- --pf-v5-c-hint__footer--child--MarginRight: var(--pf-v5-global--spacer--md);
16100
- --pf-v5-c-hint__actions--MarginLeft: var(--pf-v5-global--spacer--2xl);
16089
+ :root {
16090
+ --pf-v5-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
16091
+ --pf-v5-c-hint--PaddingTop: var(--pf-t--global--spacer--lg);
16092
+ --pf-v5-c-hint--PaddingRight: var(--pf-t--global--spacer--lg);
16093
+ --pf-v5-c-hint--PaddingBottom: var(--pf-t--global--spacer--lg);
16094
+ --pf-v5-c-hint--PaddingLeft: var(--pf-t--global--spacer--lg);
16095
+ --pf-v5-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
16096
+ --pf-v5-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
16097
+ --pf-v5-c-hint--BorderWidth: var(--pf-t--global--border--width--200);
16098
+ --pf-v5-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
16099
+ --pf-v5-c-hint--Color: var(--pf-t--global--text--color--regular);
16100
+ --pf-v5-c-hint__title--FontFamily: var(--pf-t--global--font--family--heading);
16101
+ --pf-v5-c-hint__title--FontSize: var(--pf-t--global--font--size--heading--xs);
16102
+ --pf-v5-c-hint__title--FontWeight: var(--pf-t--global--font--weight--heading);
16103
+ --pf-v5-c-hint__title--LineHeight: var(--pf-t--global--font--line-height--heading);
16104
+ --pf-v5-c-hint__body--FontSize: var(--pf-t--global--font--size--body--md);
16105
+ --pf-v5-c-hint__footer--MarginTop: var(--pf-t--global--spacer--sm);
16106
+ --pf-v5-c-hint__footer--child--MarginRight: var(--pf-t--global--spacer--md);
16107
+ --pf-v5-c-hint__actions--MarginLeft: var(--pf-t--global--spacer--2xl);
16101
16108
  --pf-v5-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
16109
+ }
16110
+
16111
+ .pf-v5-c-hint {
16102
16112
  display: grid;
16103
16113
  grid-template-columns: 1fr auto;
16104
16114
  grid-row-gap: var(--pf-v5-c-hint--GridRowGap);
@@ -16109,7 +16119,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
16109
16119
  color: var(--pf-v5-c-hint--Color);
16110
16120
  background-color: var(--pf-v5-c-hint--BackgroundColor);
16111
16121
  border: var(--pf-v5-c-hint--BorderWidth) solid var(--pf-v5-c-hint--BorderColor);
16112
- box-shadow: var(--pf-v5-c-hint--BoxShadow);
16122
+ border-radius: var(--pf-v5-c-hint--BorderRadius);
16113
16123
  }
16114
16124
  .pf-v5-c-hint .pf-v5-c-button.pf-m-link.pf-m-inline {
16115
16125
  text-align: start;
@@ -16132,7 +16142,11 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
16132
16142
  }
16133
16143
 
16134
16144
  .pf-v5-c-hint__title {
16145
+ align-self: center;
16146
+ font-family: var(--pf-v5-c-hint__title--FontFamily);
16135
16147
  font-size: var(--pf-v5-c-hint__title--FontSize);
16148
+ font-weight: var(--pf-v5-c-hint__title--FontWeight);
16149
+ line-height: var(--pf-v5-c-hint__title--LineHeight);
16136
16150
  }
16137
16151
 
16138
16152
  .pf-v5-c-hint__body {
@@ -16142,21 +16156,12 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
16142
16156
 
16143
16157
  .pf-v5-c-hint__footer {
16144
16158
  grid-column: 1/-1;
16159
+ margin-block-start: var(--pf-v5-c-hint__footer--MarginTop);
16145
16160
  }
16146
16161
  .pf-v5-c-hint__footer > :not(:last-child) {
16147
16162
  margin-inline-end: var(--pf-v5-c-hint__footer--child--MarginRight);
16148
16163
  }
16149
16164
 
16150
- :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-login__header .pf-v5-c-button,
16151
- :where(.pf-v5-theme-dark) .pf-v5-c-login__footer .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, :where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-banner .pf-v5-c-button {
16152
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
16153
- }
16154
-
16155
- :where(.pf-v5-theme-dark) .pf-v5-c-hint {
16156
- --pf-v5-c-hint--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
16157
- --pf-v5-c-hint--BorderColor: var(--pf-v5-global--BorderColor--300);
16158
- }
16159
-
16160
16165
  .pf-v5-c-helper-text {
16161
16166
  --pf-v5-c-helper-text--Gap: var(--pf-v5-global--spacer--xs);
16162
16167
  --pf-v5-c-helper-text--FontSize: var(--pf-v5-global--FontSize--sm);