@patternfly/patternfly 6.0.0-alpha.119 → 6.0.0-alpha.120

package/assets/fontawesome/_animated.scss

@@ -1,5 +1,6 @@
 // Animated icons
 // --------------------------
+@use './variables.scss' as *;
 
 .#{$fa-css-prefix}-spin {
   animation: fa-spin 2s infinite linear;

package/assets/fontawesome/_bordered-pulled.scss

@@ -1,5 +1,6 @@
 // Bordered & pulled
 // -------------------------
+@use './variables.scss' as *;
 
 .#{$fa-css-prefix}-border {
   border: solid .08em $fa-border-color;

package/assets/fontawesome/_core.scss

@@ -1,5 +1,7 @@
 // Base class definition
 // -------------------------
+@use './variables.scss' as *;
+@use './mixins.scss' as *;
 
 .#{$fa-css-prefix},
 .fas,

package/assets/fontawesome/_fixed-width.scss

@@ -1,5 +1,7 @@
 // Fixed width icons
 // -------------------------
+@use './variables.scss' as *;
+
 .#{$fa-css-prefix}-fw {
   text-align: center;
   width: $fa-fw-width;

package/assets/fontawesome/_icons.scss

@@ -1,5 +1,6 @@
 // Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
 // readers do not read off random characters that represent icons
+@use './variables.scss' as *;
 
 .#{$fa-css-prefix}-500px:before { content: fa-content($fa-var-500px); }
 .#{$fa-css-prefix}-accessible-icon:before { content: fa-content($fa-var-accessible-icon); }

package/assets/fontawesome/_index.scss

@@ -0,0 +1,12 @@
+@forward 'variables';
+@forward 'mixins';
+@forward 'core';
+@forward 'larger';
+@forward 'fixed-width';
+@forward 'list';
+@forward 'bordered-pulled';
+@forward 'animated';
+@forward 'rotated-flipped';
+@forward 'stacked';
+@forward 'icons';
+@forward 'screen-reader';

package/assets/fontawesome/_larger.scss

@@ -1,10 +1,12 @@
 // Icon sizes
 // -------------------------
+@use './variables.scss' as *;
+@use 'sass:math';
 
 // makes the font 33% larger relative to the icon container
 .#{$fa-css-prefix}-lg {
-  font-size: div(4em, 3);
-  line-height: div(3em, 4);
+  font-size: math.div(4em, 3);
+  line-height: math.div(3em, 4);
   vertical-align: -.0667em;
 }
 

package/assets/fontawesome/_list.scss

@@ -1,16 +1,18 @@
 // List icons
 // -------------------------
+@use './variables.scss' as *;
+@use 'sass:math';
 
 .#{$fa-css-prefix}-ul {
   list-style-type: none;
-  margin-left: div($fa-li-width * 5, 4);
+  margin-left: math.div($fa-li-width * 5, 4);
   padding-left: 0;
 
   > li { position: relative; }
 }
 
 .#{$fa-css-prefix}-li {
-  left: -$fa-li-width;
+  left: -#{$fa-li-width};
   position: absolute;
   text-align: center;
   width: $fa-li-width;

package/assets/fontawesome/_rotated-flipped.scss

@@ -1,5 +1,7 @@
 // Rotated & flipped icons
 // -------------------------
+@use './variables.scss' as *;
+@use './mixins.scss' as *;
 
 .#{$fa-css-prefix}-rotate-90  { @include fa-icon-rotate(90deg, 1);  }
 .#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }

package/assets/fontawesome/_screen-reader.scss

@@ -1,5 +1,6 @@
 // Screen readers
 // -------------------------
+@use './mixins.scss' as *;
 
 .sr-only { @include sr-only; }
 .sr-only-focusable { @include sr-only-focusable; }

package/assets/fontawesome/_stacked.scss

@@ -1,5 +1,7 @@
 // Stacked icons
 // -------------------------
+@use './variables.scss' as *;
+@use 'sass:math';
 
 .#{$fa-css-prefix}-stack {
   display: inline-block;
@@ -7,7 +9,7 @@
   line-height: 2em;
   position: relative;
   vertical-align: middle;
-  width: ($fa-fw-width*2);
+  width: math.div($fa-fw-width, 2);
 }
 
 .#{$fa-css-prefix}-stack-1x,

package/assets/fontawesome/_variables.scss

@@ -1,14 +1,15 @@
 // Variables
 // --------------------------
+@use 'sass:math';
 
 $fa-font-path:                "../webfonts" !default;
 $fa-font-size-base:           16px !default;
-$fa-css-prefix:               fa !default;
+$fa-css-prefix:               'fa' !default;
 $fa-version:                  "5.6.3" !default;
 $fa-border-color:             #eee !default;
 $fa-inverse:                  #fff !default;
 $fa-li-width:                 2em !default;
-$fa-fw-width:                 div(20em, 16);
+$fa-fw-width:                 math.div(20em, 16);
 
 // Convenience function used to set content property
 @function fa-content($fa-var) {

package/assets/fontawesome/fontawesome.scss

@@ -1,12 +1,12 @@
-@import 'variables';
-@import 'mixins';
-@import 'core';
-@import 'larger';
-@import 'fixed-width';
-@import 'list';
-@import 'bordered-pulled';
-@import 'animated';
-@import 'rotated-flipped';
-@import 'stacked';
-@import 'icons';
-@import 'screen-reader';
+@forward 'variables';
+@forward 'mixins';
+@forward 'core';
+@forward 'larger';
+@forward 'fixed-width';
+@forward 'list';
+@forward 'bordered-pulled';
+@forward 'animated';
+@forward 'rotated-flipped';
+@forward 'stacked';
+@forward 'icons';
+@forward 'screen-reader';

package/assets/pficon/pficon.scss

@@ -1,3 +1,6 @@
+@use '../../sass-utilities/scss-variables.scss' as *;
+@use '../../sass-utilities/init.scss' as *;
+
 @font-face {
 	font-family: 'pf-v6-pficon';
 	src: url('#{$pf-v6-global--fonticon-path}/pf-v6-pficon.woff2') format('woff2');

package/base/_index.scss

@@ -0,0 +1,10 @@
+// @use '../sass-utilities' as *;
+
+@forward './normalize';
+@forward './reset';
+@forward './patternfly-common';
+@forward './patternfly-fonts';
+@forward './patternfly-fa-icons';
+@forward './patternfly-pf-icons';
+@forward './patternfly-svg-icons';
+@forward './patternfly-variables';

package/base/{_globals.scss → normalize.scss}

@@ -1,34 +1,4 @@
-// Reset - based on minireset.css v0.0.3 | MIT License github.com/jgthms/minireset.css
-@if $pf-v6-global--enable-reset {
-  :where(
-    html,
-    body,
-    p,
-    ol,
-    ul,
-    li,
-    dl,
-    dt,
-    dd,
-    blockquote,
-    figure,
-    fieldset,
-    legend,
-    textarea,
-    pre,
-    iframe,
-    hr,
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6
-   ) {
-    padding: 0;
-    margin: 0;
-  }
-}
+@use '../sass-utilities' as *;
 
 // Normalize
 @if $pf-v6-global--enable-normalize {
@@ -41,7 +11,7 @@
   :where(
     html,
     body
-   ) {
+  ) {
     height: 100%;
   }
 
@@ -60,7 +30,7 @@
     h4,
     h5,
     h6
-   ) {
+  ) {
     font-size: 100%;
     font-weight: var(--pf-t--global--font--weight--body);
   }
@@ -75,7 +45,7 @@
     optgroup,
     select,
     textarea
-   ) {
+  ) {
     margin: 0;
     font-family: inherit;
     font-size: 100%;
@@ -90,7 +60,7 @@
     object,
     audio,
     video
-   ) {
+  ) {
     max-width: 100%;
     height: auto;
   }

package/base/patternfly-common.scss

@@ -1,2 +1,50 @@
-@import "../sass-utilities/all";
-@import "common";
+@use '../sass-utilities' as *;
+
+.#{$pf-prefix}screen-reader {
+  @include pf-v6-u-screen-reader; // for use with assistive technologies
+
+  &.pf-m-full-size {
+    width: 100%;
+    height: 100%;
+  }
+
+  &.pf-m-absolute {
+    position: absolute;
+  }
+}
+
+.#{$pf-prefix}m-tabular-nums {
+  font-variant-numeric: tabular-nums;
+}
+
+// Variable font opt-in
+.#{$pf-prefix}m-legacy-font {
+  --pf-t--global--font--family--body: var(--pf-t--global--font--family--body--legacy);
+  --pf-t--global--font--family--heading: var(--pf-t--global--font--family--heading--legacy);
+  --pf-t--global--font--family--mono: var(--pf-t--global--font--family--mono--legacy);
+  --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--legacy);
+  --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--bold--legacy);
+  --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--legacy);
+  --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--bold--legacy);
+}
+
+// RTL helpers
+
+// Sets a block to RTL
+.#{$pf-prefix}m-dir-rtl {
+  @include pf-v6-set-inverse;
+
+  direction: rtl;
+}
+
+// Sets a block to LTR
+.#{$pf-prefix}m-dir-ltr {
+  @include pf-v6-set-inverse(false);
+
+  direction: ltr;
+}
+
+// Mirrors/flips something horizontally/inline in RTL
+.#{$pf-prefix}m-mirror-inline-rtl {
+  @include pf-v6-mirror-inline-on-rtl;
+}

package/base/patternfly-fa-icons.css

@@ -147,7 +147,7 @@
   line-height: 2em;
   position: relative;
   vertical-align: middle;
-  width: 2.5em;
+  width: 0.625em;
 }
 * .fa-stack-1x,
 * .fa-stack-2x {

package/base/patternfly-fa-icons.scss

@@ -1,2 +1,35 @@
-@import "../sass-utilities/all";
-@import "fa-icons";
+// Font Awesome 5 icons https://fontawesome.com
+@use '../sass-utilities' as *;
+
+%pf-fa-local {
+  @import "../assets/fontawesome/fontawesome";
+}
+
+@if not($pf-v6-global--disable-fontawesome) {
+  @if $pf-v6-global--enable-fontawesome-cdn {
+    // stylelint-disable no-invalid-position-at-import-rule
+    @import "https://use.fontawesome.com/releases/v5.7.2/css/solid.css";
+    @import "https://use.fontawesome.com/releases/v5.7.2/css/fontawesome.css";
+    // stylelint-enable no-invalid-position-at-import-rule
+  } @else {
+    @font-face {
+      font-family: "Font Awesome 5 Free";
+      font-style: normal;
+      font-weight: 900;
+      src:
+        url("#{$fa-font-path}/fa-solid-900.woff2") format("woff2");
+    }
+
+    // stylelint-disable
+    .fa,
+    .fas {
+      font-family: "Font Awesome 5 Free";
+      font-weight: 900;
+    }
+    // stylelint-enable
+
+    * {
+      @extend %pf-fa-local;
+    }
+  }
+}

package/base/patternfly-fonts.scss

@@ -1,2 +1,49 @@
-@import "../sass-utilities/all";
-@import "fonts";
+@use '../sass-utilities' as *;
+
+@font-face {
+  font-family: RedHatTextVF;
+  font-style: normal;
+  font-weight: 400 500;
+  src: url("#{$pf-v6-global--font-path}/RedHatText/RedHatTextVF.woff2") format("woff2-variations");
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: RedHatTextVF;
+  font-style: italic;
+  font-weight: 400 500;
+  src: url("#{$pf-v6-global--font-path}/RedHatText/RedHatTextVF-Italic.woff2") format("woff2-variations");
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: RedHatDisplayVF;
+  font-style: normal;
+  font-weight: 400 700;
+  src: url("#{$pf-v6-global--font-path}/RedHatDisplay/RedHatDisplayVF.woff2") format("woff2-variations");
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: RedHatDisplayVF;
+  font-style: italic;
+  font-weight: 400 700;
+  src: url("#{$pf-v6-global--font-path}/RedHatDisplay/RedHatDisplayVF-Italic.woff2") format("woff2-variations");
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: RedHatMonoVF;
+  font-style: normal;
+  font-weight: 400;
+  src: url("#{$pf-v6-global--font-path}/RedHatMono/RedHatMonoVF.woff2") format("woff2-variations");
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: RedHatMonoVF;
+  font-style: italic;
+  font-weight: 400;
+  src: url("#{$pf-v6-global--font-path}/RedHatMono/RedHatMonoVF-Italic.woff2") format("woff2-variations");
+  font-display: fallback;
+}

package/base/patternfly-pf-icons.scss

@@ -1,2 +1 @@
-@import "../sass-utilities/all";
-@import "pficons";
+@forward '../assets/pficon/pficon.scss';

package/base/patternfly-svg-icons.css

@@ -0,0 +1,5 @@
+.pf-v6-svg {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.125em;
+}

package/base/{_svg-icons.scss → patternfly-svg-icons.scss}

@@ -1,3 +1,5 @@
+@use '../sass-utilities' as *;
+
 .#{$pf-prefix}svg {
   // Default icon size
   width: 1em;

package/base/patternfly-variables.scss

@@ -1,2 +1,14 @@
-@import "../sass-utilities/all";
-@import "variables";
+@use '../sass-utilities' as *;
+@use "./tokens/workspace-overrides" as *;
+@use "./tokens/tokens-font" as *;
+@use "./tokens/tokens-palette" as *;
+@use "./tokens/tokens-default" as *;
+@use "./tokens/tokens-dark" as *;
+
+:where(:root) {
+  @include pf-v6-set-inverse(false);
+}
+
+@include pf-v6-rtl {
+  @include pf-v6-set-inverse;
+}

package/base/reset.scss

@@ -0,0 +1,33 @@
+@use '../sass-utilities/scss-variables.scss' as *;
+
+// Reset - based on minireset.css v0.0.3 | MIT License github.com/jgthms/minireset.css
+@if $pf-v6-global--enable-reset {
+  :where(
+    html,
+    body,
+    p,
+    ol,
+    ul,
+    li,
+    dl,
+    dt,
+    dd,
+    blockquote,
+    figure,
+    fieldset,
+    legend,
+    textarea,
+    pre,
+    iframe,
+    hr,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6
+    ) {
+    padding: 0;
+    margin: 0;
+  }
+}

package/base/tokens/_index.scss

@@ -0,0 +1,6 @@
+@forward './workspace-overrides';
+@forward './tokens-font';
+@forward './tokens-palette';
+@forward './tokens-default';
+@forward './tokens-dark';
+@forward './tokens-charts';

package/components/AboutModalBox/about-modal-box.css

@@ -1,4 +1,4 @@
-:root {
+:where(:root, .pf-v6-c-about-modal-box) {
   --pf-v6-c-about-modal-box--BackgroundImage: none;
   --pf-v6-c-about-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-about-modal-box--BackgroundPosition: bottom right;
@@ -45,40 +45,40 @@
   --pf-v6-c-about-modal-box__content--sm--MarginBottom: var(--pf-t--global--spacer--2xl);
   --pf-v6-c-about-modal-box__content--sm--MarginLeft: var(--pf-t--global--spacer--3xl);
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) :root {
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) :where(:root, .pf-v6-c-about-modal-box) {
   --pf-v6-c-about-modal-box--BackgroundPosition: bottom left;
 }
 
 @media screen and (min-width: 576px) {
-  :root {
+  :where(:root, .pf-v6-c-about-modal-box) {
     --pf-v6-c-about-modal-box__brand--PaddingRight: var(--pf-v6-c-about-modal-box__brand--sm--PaddingRight);
     --pf-v6-c-about-modal-box__brand--PaddingLeft: var(--pf-v6-c-about-modal-box__brand--sm--PaddingLeft);
     --pf-v6-c-about-modal-box__brand--PaddingBottom: var(--pf-v6-c-about-modal-box__brand--sm--PaddingBottom);
   }
 }
 @media only screen and (min-width: 576px) {
-  :root {
+  :where(:root, .pf-v6-c-about-modal-box) {
     --pf-v6-c-about-modal-box__close--PaddingBottom: var(--pf-v6-c-about-modal-box__close--sm--PaddingBottom);
   }
 }
 @media only screen and (min-width: 992px) {
-  :root {
+  :where(:root, .pf-v6-c-about-modal-box) {
     --pf-v6-c-about-modal-box__close--PaddingRight: var(--pf-v6-c-about-modal-box__close--lg--PaddingRight);
   }
 }
 @media only screen and (min-width: 576px) {
-  :root {
+  :where(:root, .pf-v6-c-about-modal-box) {
     --pf-v6-c-about-modal-box__header--PaddingRight: var(--pf-v6-c-about-modal-box__header--sm--PaddingRight);
     --pf-v6-c-about-modal-box__header--PaddingLeft: var(--pf-v6-c-about-modal-box__header--sm--PaddingLeft);
   }
 }
 @media only screen and (min-width: 576px) {
-  :root {
+  :where(:root, .pf-v6-c-about-modal-box) {
     --pf-v6-c-about-modal-box__strapline--PaddingTop: var(--pf-v6-c-about-modal-box__strapline--sm--PaddingTop);
   }
 }
 @media only screen and (min-width: 576px) {
-  :root {
+  :where(:root, .pf-v6-c-about-modal-box) {
     --pf-v6-c-about-modal-box__content--MarginTop: var(--pf-v6-c-about-modal-box__content--sm--MarginTop);
     --pf-v6-c-about-modal-box__content--MarginRight: var(--pf-v6-c-about-modal-box__content--sm--MarginRight);
     --pf-v6-c-about-modal-box__content--MarginBottom: var(--pf-v6-c-about-modal-box__content--sm--MarginBottom);

package/components/AboutModalBox/about-modal-box.scss

@@ -1,7 +1,7 @@
-// @debug $about-modal-box; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root {
-  // Component variables
+:where(:root, .#{$about-modal-box}) {
+    // Component variables
   --#{$about-modal-box}--BackgroundImage: none;
   --#{$about-modal-box}--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --#{$about-modal-box}--BackgroundPosition: bottom right;
@@ -21,7 +21,6 @@
     $rtl-val: bottom left
   );
 
-
   // Brand
   --#{$about-modal-box}__brand--PaddingTop: var(--pf-t--global--spacer--2xl);
   --#{$about-modal-box}__brand--PaddingRight: var(--pf-t--global--spacer--xl);

package/components/Accordion/accordion.css

@@ -1,4 +1,4 @@
-:root {
+:where(:root, .pf-v6-c-accordion) {
   --pf-v6-c-accordion--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-accordion--RowGap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-accordion__item--BorderRadius: var(--pf-t--global--border--radius--200);

package/components/Accordion/accordion.scss

@@ -1,6 +1,6 @@
-// @debug $accordion; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root {
+:where(:root, .#{$accordion}) {
   // accordion
   --#{$accordion}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$accordion}--RowGap: var(--pf-t--global--spacer--xs);
@@ -27,11 +27,11 @@
   --#{$accordion}__toggle-text--Color: var(--pf-t--global--text--color--regular);
   --#{$accordion}__toggle-text--FontWeight: var(--pf-t--global--font--weight--body);
   --#{$accordion}__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
-  
+
   // accordion toggle icon
   --#{$accordion}__toggle-icon--Transition: .2s ease-in 0s;
   --#{$accordion}__toggle--m-expanded__toggle-icon--Rotate: 90deg;
-  
+
   // accordion expandable content
   --#{$accordion}__expandable-content--MarginRight: var(--pf-t--global--spacer--md);
   --#{$accordion}__expandable-content--MarginBottom: var(--pf-t--global--spacer--md);
@@ -48,7 +48,7 @@
   --#{$accordion}__expandable-content-body--PaddingBottom: var(--pf-t--global--spacer--sm);
   --#{$accordion}__expandable-content-body--PaddingLeft: var(--pf-t--global--spacer--sm);
   --#{$accordion}__expandable-content-body--expandable-content-body--PaddingTop: 0;
-  
+
   // large
   --#{$accordion}--m-display-lg__toggle--PaddingTop: var(--pf-t--global--spacer--md);
   --#{$accordion}--m-display-lg__toggle--PaddingRight: var(--pf-t--global--spacer--md);
@@ -61,7 +61,7 @@
   --#{$accordion}--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading--bold);
   --#{$accordion}--m-display-lg__expandable-content--FontSize: var(--pf-t--global--font--size--body--lg);
   --#{$accordion}--m-display-lg__expandable-content--Color: var(--pf-t--global--text--color--regular);
-  
+
   // bordered
   --#{$accordion}--m-bordered--RowGap: 0;
   --#{$accordion}__item--m-bordered--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
@@ -105,11 +105,11 @@
 
 .#{$accordion}__item {
   border-radius: var(--#{$accordion}__item--BorderRadius);
-  
+
   &.pf-m-expanded {
     --#{$accordion}__toggle--PaddingBottom: var(--#{$accordion}__toggle--m-expanded--PaddingBottom);
     --#{$accordion}__toggle-text--FontWeight: var(--#{$accordion}__toggle--m-expanded__toggle-text--FontWeight);
-    
+
     background-color: var(--#{$accordion}__item--m-expanded--BackgroundColor);
 
     .#{$accordion}__toggle-icon {

package/components/ActionList/action-list.css

@@ -1,4 +1,4 @@
-:where(:root) {
+:where(:root, .pf-v6-c-action-list) {
   --pf-v6-c-action-list--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-action-list--ColumnGap: var(--pf-t--global--spacer--2xl);
   --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--md);

package/components/ActionList/action-list.scss

@@ -1,4 +1,6 @@
-:where(:root) {
+@use '../../sass-utilities' as *;
+
+:where(:root, .#{$action-list}) {
   --#{$action-list}--RowGap: var(--pf-t--global--spacer--sm);
   --#{$action-list}--ColumnGap: var(--pf-t--global--spacer--2xl);
 

package/components/Alert/alert-group.scss

@@ -1,4 +1,4 @@
-// @debug $alert-group; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
 // Tabs
 .#{$alert-group} {

package/components/Alert/alert.css

@@ -1,4 +1,4 @@
-:root {
+:where(:root, .pf-v6-c-alert) {
   --pf-v6-c-alert--BoxShadow: var(--pf-t--global--box-shadow--lg);
   --pf-v6-c-alert--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-alert--GridTemplateColumns: max-content 1fr max-content;