@patternfly/patternfly 5.0.0-alpha.56 → 5.0.0-alpha.58

package/sass-utilities/mixins.scss

@@ -168,7 +168,9 @@
 }
 
 @mixin pf-v5-t-light($color: "--#{$pf-global}--Color--100") {
-  color: var(#{$color});
+  @if $color {
+    color: var(#{$color});
+  }
 
   @extend %pf-v5-t-light;
 }

package/sass-utilities/scss-variables.scss

@@ -193,15 +193,12 @@ $pf-v5-global--icon--FontSize--xl: pf-font-prem(54px) !default;
 // Fonts
 // Font family
 // stylelint-disable value-keyword-case
-$pf-v5-global--FontFamily--sans-serif: '"RedHatText", helvetica, arial, sans-serif';
-$pf-v5-global--FontFamily--heading--sans-serif: '"RedHatDisplay", helvetica, arial, sans-serif';
-$pf-v5-global--FontFamily--monospace: '"Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace';
-$pf-v5-global--FontFamily--redhat-updated--sans-serif: '"RedHatTextUpdated", helvetica, arial, sans-serif';
-$pf-v5-global--FontFamily--redhat-updated--heading--sans-serif: '"RedHatDisplayUpdated", helvetica, arial, sans-serif';
-$pf-v5-global--FontFamily--redhat--monospace: '"RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace';
-$pf-v5-global--FontFamily--redhatVF--sans-serif: '"RedHatTextVF", "RedHatText", helvetica, arial, sans-serif';
-$pf-v5-global--FontFamily--redhatVF--heading--sans-serif: '"RedHatDisplayVF", "RedHatDisplay", helvetica, arial, sans-serif';
-$pf-v5-global--FontFamily--redhatVF--monospace: '"RedHatMonoVF", "RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace';
+$pf-v5-global--FontFamily--text: '"RedHatText", helvetica, arial, sans-serif';
+$pf-v5-global--FontFamily--heading: '"RedHatDisplay", helvetica, arial, sans-serif';
+$pf-v5-global--FontFamily--monospace: '"RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace';
+$pf-v5-global--FontFamily--text--vf: '"RedHatTextVF", "RedHatText", helvetica, arial, sans-serif';
+$pf-v5-global--FontFamily--heading--vf: '"RedHatDisplayVF", "RedHatDisplay", helvetica, arial, sans-serif';
+$pf-v5-global--FontFamily--monospace--vf: '"RedHatMonoVF", "RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace';
 // stylelint-enable value-keyword-case
 
 // Font size
@@ -215,7 +212,6 @@ $pf-v5-global--FontSize--sm: pf-font-prem(14px) !default;
 $pf-v5-global--FontSize--xs: pf-font-prem(12px) !default;
 
 // Font weight
-$pf-v5-global--FontWeight--light: 300 !default;
 $pf-v5-global--FontWeight--normal: 400 !default;
 $pf-v5-global--FontWeight--bold: 700 !default;
 

package/sass-utilities/themes/dark/scss-variables.scss

@@ -15,6 +15,8 @@ $pf-v5-global--Color--200: $pf-v5-color-black-200; // secondary text color
 $pf-v5-global--active-color--100: $pf-v5-color-blue-300;
 $pf-v5-global--primary-color--100: $pf-v5-color-blue-300; // primary blue against dark background - background, text, etc
 $pf-v5-global--primary-color--300: $pf-v5-color-blue-400; // primary blue with white text on top for contrast
+$pf-v5-global--primary-color--400: $pf-v5-color-white; // text color on top of primary--300
+$pf-v5-global--custom-color--200: $pf-v5-color-cyan-200;
 $pf-v5-global--success-color--100: $pf-v5-color-green-400;
 $pf-v5-global--warning-color--100: $pf-v5-color-gold-400;
 $pf-v5-global--warning-color--200: $pf-v5-color-gold-300;
@@ -23,9 +25,12 @@ $pf-v5-global--danger-color--200: $pf-v5-color-red-8888;
 $pf-v5-global--link--Color: $pf-v5-color-blue-300;
 $pf-v5-global--link--Color--hover: $pf-v5-color-blue-200;
 $pf-v5-global--link--Color--visited: $pf-v5-color-purple-300;
-$pf-v5-global--disabled-color--100: $pf-v5-color-black-400; // disabled text on regular background color
+$pf-v5-global--disabled-color--100: $pf-v5-color-black-300; // disabled text on regular background color
 $pf-v5-global--disabled-color--200: $pf-v5-color-black-500; // disabled background color
-$pf-v5-global--disabled-color--300: $pf-v5-color-black-200; // disabled text on disabled background color - except form elements
+$pf-v5-global--disabled-color--300: $pf-v5-color-black-200; // disabled text on disabled or floating background color - except form elements
+
+// icons
+$pf-v5-global--icon--Color--light: $pf-v5-color-black-300;
 
 // theme color resets
 $pf-v5-global--Color--dark-100: $pf-v5-global--Color--100;

package/utilities/Text/text.css

@@ -1,25 +1,25 @@
-.pf-v5-u-font-family-sans-serif {
-  font-family: var(--pf-v5-global--FontFamily--sans-serif) !important;
+.pf-v5-u-font-family-text {
+  font-family: var(--pf-v5-global--FontFamily--text) !important;
 }
 
-.pf-v5-u-font-family-heading-sans-serif {
-  font-family: var(--pf-v5-global--FontFamily--heading--sans-serif) !important;
+.pf-v5-u-font-family-heading {
+  font-family: var(--pf-v5-global--FontFamily--heading) !important;
 }
 
 .pf-v5-u-font-family-monospace {
   font-family: var(--pf-v5-global--FontFamily--monospace) !important;
 }
 
-.pf-v5-u-font-family-redhatVF-sans-serif {
-  font-family: var(--pf-v5-global--FontFamily--redhatVF--sans-serif) !important;
+.pf-v5-u-font-family-text-vf {
+  font-family: var(--pf-v5-global--FontFamily--text--vf) !important;
 }
 
-.pf-v5-u-font-family-redhatVF-heading-sans-serif {
-  font-family: var(--pf-v5-global--FontFamily--redhatVF--heading--sans-serif) !important;
+.pf-v5-u-font-family-heading-vf {
+  font-family: var(--pf-v5-global--FontFamily--heading--vf) !important;
 }
 
-.pf-v5-u-font-family-redhatVF-monospace {
-  font-family: var(--pf-v5-global--FontFamily--redhatVF--monospace) !important;
+.pf-v5-u-font-family-monospace-vf {
+  font-family: var(--pf-v5-global--FontFamily--monospace--vf) !important;
 }
 
 .pf-v5-u-font-size-xs {
@@ -184,10 +184,6 @@
     font-size: var(--pf-v5-global--FontSize--4xl) !important;
   }
 }
-.pf-v5-u-font-weight-light {
-  font-weight: var(--pf-v5-global--FontWeight--light) !important;
-}
-
 .pf-v5-u-font-weight-normal {
   font-weight: var(--pf-v5-global--FontWeight--normal) !important;
 }
@@ -197,9 +193,6 @@
 }
 
 @media screen and (min-width: 576px) {
-  .pf-v5-u-font-weight-light-on-sm {
-    font-weight: var(--pf-v5-global--FontWeight--light) !important;
-  }
   .pf-v5-u-font-weight-normal-on-sm {
     font-weight: var(--pf-v5-global--FontWeight--normal) !important;
   }
@@ -208,9 +201,6 @@
   }
 }
 @media screen and (min-width: 768px) {
-  .pf-v5-u-font-weight-light-on-md {
-    font-weight: var(--pf-v5-global--FontWeight--light) !important;
-  }
   .pf-v5-u-font-weight-normal-on-md {
     font-weight: var(--pf-v5-global--FontWeight--normal) !important;
   }
@@ -219,9 +209,6 @@
   }
 }
 @media screen and (min-width: 992px) {
-  .pf-v5-u-font-weight-light-on-lg {
-    font-weight: var(--pf-v5-global--FontWeight--light) !important;
-  }
   .pf-v5-u-font-weight-normal-on-lg {
     font-weight: var(--pf-v5-global--FontWeight--normal) !important;
   }
@@ -230,9 +217,6 @@
   }
 }
 @media screen and (min-width: 1200px) {
-  .pf-v5-u-font-weight-light-on-xl {
-    font-weight: var(--pf-v5-global--FontWeight--light) !important;
-  }
   .pf-v5-u-font-weight-normal-on-xl {
     font-weight: var(--pf-v5-global--FontWeight--normal) !important;
   }
@@ -241,9 +225,6 @@
   }
 }
 @media screen and (min-width: 1450px) {
-  .pf-v5-u-font-weight-light-on-2xl {
-    font-weight: var(--pf-v5-global--FontWeight--light) !important;
-  }
   .pf-v5-u-font-weight-normal-on-2xl {
     font-weight: var(--pf-v5-global--FontWeight--normal) !important;
   }

package/utilities/Text/text.scss

@@ -2,23 +2,23 @@
 
 // Font family options
 $pf-v5-u-font-family-options: (
-  font-family-sans-serif: (
-    font-family var(--#{$pf-global}--FontFamily--sans-serif)
+  font-family-text: (
+    font-family var(--#{$pf-global}--FontFamily--text)
   ),
-  font-family-heading-sans-serif: (
-    font-family var(--#{$pf-global}--FontFamily--heading--sans-serif)
+  font-family-heading: (
+    font-family var(--#{$pf-global}--FontFamily--heading)
   ),
   font-family-monospace: (
     font-family var(--#{$pf-global}--FontFamily--monospace)
   ),
-  font-family-redhatVF-sans-serif: (
-    font-family var(--#{$pf-global}--FontFamily--redhatVF--sans-serif)
+  font-family-text-vf: (
+    font-family var(--#{$pf-global}--FontFamily--text--vf)
   ),
-  font-family-redhatVF-heading-sans-serif: (
-    font-family var(--#{$pf-global}--FontFamily--redhatVF--heading--sans-serif)
+  font-family-heading-vf: (
+    font-family var(--#{$pf-global}--FontFamily--heading--vf)
   ),
-  font-family-redhatVF-monospace: (
-    font-family var(--#{$pf-global}--FontFamily--redhatVF--monospace)
+  font-family-monospace-vf: (
+    font-family var(--#{$pf-global}--FontFamily--monospace--vf)
   )
 );
 
@@ -56,9 +56,6 @@ $pf-v5-u-font-size-options: (
 
 // Font weight options
 $pf-v5-u-font-weight-options: (
-  font-weight-light: (
-    font-weight var(--#{$pf-global}--FontWeight--light)
-  ),
   font-weight-normal: (
     font-weight var(--#{$pf-global}--FontWeight--normal)
   ),