@patternfly/patternfly 6.0.0-alpha.117 → 6.0.0-alpha.118

package/sass-utilities/_all.scss

@@ -1,9 +1,7 @@
 // These imports must not contain any rendered output
 @import "./div";
 @import "./functions";
-@import "./colors";
 @import "./scss-variables";
 @import "./mixins";
 @import "./component-namespaces";
 @import "./layout-namespaces";
-@import "./placeholders";

package/sass-utilities/functions.scss

@@ -15,12 +15,6 @@
   @return div(pf-strip-unit($pxval), $base) * 1rem;
 }
 
-@function pf-bg-svg($svg-coordinates, $viewBox: "512", $svg-color: "currentColor") {
-  $color: str-slice(#{$svg-color}, 2);
-
-  @return url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 #{$viewBox} 512'%3E%3Cpath fill='%23#{$color}' d='#{$svg-coordinates}'/%3E%3C/svg%3E");
-}
-
 // Return (width) breakpoint value if it exists
 @function pf-breakpoint-value($breakpoint, $breakpoint-map: $pf-v6-global--breakpoint-name-map) {
   $breakpoint-value: if(map-has-key($breakpoint-map, #{$breakpoint}), map-get($breakpoint-map, #{$breakpoint}), false);

package/sass-utilities/mixins.scss

@@ -167,21 +167,6 @@
   border: inherit;
 }
 
-// Remove when deprecated components are removed
-@mixin pf-v6-t-light($color: "--#{$pf-global}--Color--100") {
-  @if $color {
-    color: var(#{$color});
-  }
-
-  @extend %pf-v6-t-light;
-}
-
-@mixin pf-v6-t-dark($color: "--#{$pf-global}--Color--100") {
-  color: var(#{$color});
-
-  @extend %pf-v6-t-dark;
-}
-
 @mixin pf-v6-text-overflow {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -210,7 +195,36 @@
   // stylelint-disable-next-line
   --pf-v6-hidden-visible--visible--Display: #{$val};
 
-  @extend %pf-v6-hidden-visible;
+  // base value for visible display property is set to 'block' by default and passed in to
+  // placeholder via `pf-v6-hidden-visible` mixin
+
+  // set hidden var values
+  // stylelint-disable custom-property-pattern
+  --pf-v6-hidden-visible--hidden--Display: none;
+
+  // set visibile var values
+  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+
+  // set default state to visible
+  display: var(--pf-v6-hidden-visible--Display);
+
+  // toggle values based on state
+  &.pf-m-hidden {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+
+  @each $size, $bp in $pf-v6-global--breakpoint-name-map {
+    @media screen and (min-width: $bp) {
+      &.pf-m-hidden-on-#{$size} {
+        --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+      }
+
+      &.pf-m-visible-on-#{$size} {
+        --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+      }
+    }
+  }
+  // stylelint-enable
 }
 
 // Apply media query if value is passed
@@ -329,6 +343,18 @@
   }
 }
 
+@mixin pf-v6-remove-num-arrows {
+  appearance: textfield;
+
+  // stylelint-disable
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+  // stylelint-enable
+    margin: 0;
+    appearance: none;
+  }
+}
+
 // RTL helpers
 
 // Used to create the RTL selector for RTL specific styles

package/sass-utilities/scss-variables.scss

@@ -18,107 +18,6 @@ $pf-v6-global--disable-fontawesome: false !default;
 $pf-v6-global--font-size-root: 16 !default; // for fonts
 $pf-v6-global--space-size-root: 16 !default; // for spaces
 
-// Colors
-// Background color
-$pf-v6-global--BackgroundColor--100: $pf-v6-color-white !default;
-$pf-v6-global--BackgroundColor--150: $pf-v6-color-black-100 !default;
-$pf-v6-global--BackgroundColor--200: $pf-v6-color-black-200 !default;
-
-// do not use - background colors for exceptions and defining theme
-// light theme
-$pf-v6-global--BackgroundColor--light-100:     $pf-v6-color-white !default;
-$pf-v6-global--BackgroundColor--light-200:     $pf-v6-color-black-100 !default;
-$pf-v6-global--BackgroundColor--light-300:     $pf-v6-color-black-200 !default;
-
-// dark theme
-$pf-v6-global--BackgroundColor--dark-100:      $pf-v6-color-black-900 !default;
-$pf-v6-global--BackgroundColor--dark-200:      $pf-v6-color-black-800 !default;
-$pf-v6-global--BackgroundColor--dark-300:      $pf-v6-color-black-850 !default;
-$pf-v6-global--BackgroundColor--dark-400:      $pf-v6-color-black-700 !default;
-$pf-v6-global--BackgroundColor--dark-transparent-100:  rgba($pf-v6-color-black-1000, .62) !default;
-$pf-v6-global--BackgroundColor--dark-transparent-200:  rgba($pf-v6-color-black-1000, .32) !default;
-
-// Text color
-$pf-v6-global--Color--100: $pf-v6-color-black-900 !default;
-$pf-v6-global--Color--200: $pf-v6-color-black-600 !default;
-$pf-v6-global--Color--300: $pf-v6-color-black-800 !default;
-$pf-v6-global--Color--400: $pf-v6-color-black-500 !default;
-
-// do not use - text colors for exceptions and defining theme
-// light theme
-$pf-v6-global--Color--light-100:      $pf-v6-color-white !default;
-$pf-v6-global--Color--light-200:      $pf-v6-color-black-200 !default;
-$pf-v6-global--Color--light-300:      $pf-v6-color-black-300 !default;
-
-// dark theme
-$pf-v6-global--Color--dark-100:      $pf-v6-color-black-900 !default;
-$pf-v6-global--Color--dark-200:      $pf-v6-color-black-600 !default;
-
-// States color
-// active
-$pf-v6-global--active-color--100:   $pf-v6-color-blue-400 !default;
-$pf-v6-global--active-color--200:   $pf-v6-color-blue-100 !default;
-$pf-v6-global--active-color--300:   $pf-v6-color-blue-300 !default;
-$pf-v6-global--active-color--400:   $pf-v6-color-blue-200 !default;
-
-// disabled
-$pf-v6-global--disabled-color--100: $pf-v6-color-black-600 !default;
-$pf-v6-global--disabled-color--200: $pf-v6-color-black-300 !default;
-$pf-v6-global--disabled-color--300: $pf-v6-color-black-200 !default;
-
-// Theme color
-$pf-v6-global--primary-color--100:         $pf-v6-color-blue-400 !default;
-$pf-v6-global--primary-color--200:         $pf-v6-color-blue-500 !default;
-$pf-v6-global--secondary-color--100:       $pf-v6-color-black-600 !default;
-$pf-v6-global--custom-color--100:         $pf-v6-color-cyan-200 !default;
-$pf-v6-global--custom-color--200:         $pf-v6-color-cyan-300 !default;
-$pf-v6-global--custom-color--300:         $pf-v6-color-cyan-500 !default;
-$pf-v6-global--success-color--100:         $pf-v6-color-green-500 !default;
-$pf-v6-global--success-color--200:         $pf-v6-color-green-600 !default;
-$pf-v6-global--info-color--100:            $pf-v6-color-blue-300 !default;
-$pf-v6-global--info-color--200:            $pf-v6-color-blue-600 !default;
-$pf-v6-global--warning-color--100:         $pf-v6-color-gold-400 !default;
-$pf-v6-global--warning-color--200:         $pf-v6-color-gold-600 !default;
-$pf-v6-global--danger-color--100:          $pf-v6-color-red-100 !default;
-$pf-v6-global--danger-color--200:          $pf-v6-color-red-200 !default;
-$pf-v6-global--danger-color--300:          $pf-v6-color-red-400 !default;
-
-// do not use - theme colors for exceptions and defining theme
-$pf-v6-global--primary-color--light-100:   $pf-v6-color-blue-200 !default;
-$pf-v6-global--primary-color--dark-100:    $pf-v6-color-blue-400 !default;
-
-// Shadows
-// small
-$pf-v6-global--BoxShadow--sm: 0 pf-size-prem(1px) pf-size-prem(2px) 0 rgba($pf-v6-color-black-1000, .12), 0 0 pf-size-prem(2px) 0 rgba($pf-v6-color-black-1000, .06) !default;
-$pf-v6-global--BoxShadow--sm-top: 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v6-color-black-1000, .16) !default;
-$pf-v6-global--BoxShadow--sm-right: pf-size-prem(2px) 0 pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v6-color-black-1000, .16) !default;
-$pf-v6-global--BoxShadow--sm-bottom: 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v6-color-black-1000, .16) !default;
-$pf-v6-global--BoxShadow--sm-left: pf-size-prem(-2px) 0 pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v6-color-black-1000, .16) !default;
-
-// medium
-$pf-v6-global--BoxShadow--md: 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-v6-color-black-1000, .12), 0 0 pf-size-prem(4px) 0 rgba($pf-v6-color-black-1000, .06) !default;
-$pf-v6-global--BoxShadow--md-top: 0 pf-size-prem(-8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-v6-color-black-1000, .18) !default;
-$pf-v6-global--BoxShadow--md-right: pf-size-prem(8px) 0 pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-v6-color-black-1000, .18) !default;
-$pf-v6-global--BoxShadow--md-bottom: 0 pf-size-prem(8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-v6-color-black-1000, .18) !default;
-$pf-v6-global--BoxShadow--md-left: pf-size-prem(-8px) 0 pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-v6-color-black-1000, .18) !default;
-
-// large
-$pf-v6-global--BoxShadow--lg: 0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba($pf-v6-color-black-1000, .16), 0 0 pf-size-prem(6px) 0 rgba($pf-v6-color-black-1000, .08) !default;
-$pf-v6-global--BoxShadow--lg-top: 0 pf-size-prem(-12px) pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-v6-color-black-1000, .18) !default;
-$pf-v6-global--BoxShadow--lg-right: pf-size-prem(12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-v6-color-black-1000, .18) !default;
-$pf-v6-global--BoxShadow--lg-bottom: 0 pf-size-prem(12px) pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-v6-color-black-1000, .18) !default;
-$pf-v6-global--BoxShadow--lg-left: pf-size-prem(-12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-v6-color-black-1000, .18) !default;
-
-// x-large
-$pf-v6-global--BoxShadow--xl: 0 pf-size-prem(16px) pf-size-prem(32px) 0 rgba($pf-v6-color-black-1000, .16), 0 0 pf-size-prem(8px) 0 rgba($pf-v6-color-black-1000, .1) !default;
-$pf-v6-global--BoxShadow--xl-top: 0 pf-size-prem(-16px) pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-v6-color-black-1000, .2) !default;
-$pf-v6-global--BoxShadow--xl-right: pf-size-prem(16px) 0 pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-v6-color-black-1000, .2) !default;
-$pf-v6-global--BoxShadow--xl-bottom: 0 pf-size-prem(16px) pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-v6-color-black-1000, .2) !default;
-$pf-v6-global--BoxShadow--xl-left: pf-size-prem(-16px) 0 pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-v6-color-black-1000, .2) !default;
-
-// inset
-$pf-v6-global--BoxShadow--inset: inset 0 0 pf-size-prem(10) 0 rgba($pf-v6-color-black-1000, .25) !default;
-
 // Fontpath
 $pf-v6-global--font-path: "./assets/fonts" !default;
 
@@ -129,31 +28,6 @@ $fa-font-path: "./assets/fonts/webfonts" !default;
 // FontIcon path
 $pf-v6-global--fonticon-path: "./assets/pficon" !default;
 
-// Spacers
-$pf-v6-global--spacer--xs: pf-size-prem(4px) !default;     // Orange
-$pf-v6-global--spacer--sm: pf-size-prem(8px) !default;     // Light green
-$pf-v6-global--spacer--md: pf-size-prem(16px) !default;    // Dark green
-$pf-v6-global--spacer--lg: pf-size-prem(24px) !default;    // Dark Blue
-$pf-v6-global--spacer--xl: pf-size-prem(32px) !default;    // Light Blue
-$pf-v6-global--spacer--2xl: pf-size-prem(48px) !default;   // Light Purple
-$pf-v6-global--spacer--3xl: pf-size-prem(64px) !default;   // Dark Purple
-$pf-v6-global--spacer--4xl: pf-size-prem(80px) !default;   // Dark magenta
-
-// Form spacer - only used in forms
-$pf-v6-global--spacer--form-element: pf-size-prem(6px) !default;
-
-// Gutter
-$pf-v6-global--gutter: $pf-v6-global--spacer--md !default;
-$pf-v6-global--gutter--md: $pf-v6-global--spacer--lg !default;
-
-// Z-Index
-$pf-v6-global--ZIndex--xs: 100;
-$pf-v6-global--ZIndex--sm: 200;
-$pf-v6-global--ZIndex--md: 300;
-$pf-v6-global--ZIndex--lg: 400;
-$pf-v6-global--ZIndex--xl: 500;
-$pf-v6-global--ZIndex--2xl: 600;
-
 // Grid breakpoints
 $pf-v6-global--breakpoint--xs: 0 !default;
 $pf-v6-global--breakpoint--sm: 576px !default;
@@ -169,91 +43,6 @@ $pf-v6-global--height-breakpoint--lg: 48rem !default; // 768px
 $pf-v6-global--height-breakpoint--xl: 60rem !default; // 960px
 $pf-v6-global--height-breakpoint--2xl: 80rem !default; // 1280px
 
-// Borders
-$pf-v6-global--BorderWidth--sm:     1px !default;
-$pf-v6-global--BorderWidth--md:     2px !default;
-$pf-v6-global--BorderWidth--lg:     3px !default;
-$pf-v6-global--BorderWidth--xl:     4px !default;
-$pf-v6-global--BorderColor--100:    $pf-v6-color-black-300 !default;
-$pf-v6-global--BorderColor--200:    $pf-v6-color-black-500 !default;
-$pf-v6-global--BorderColor--300:    $pf-v6-color-black-200 !default;
-$pf-v6-global--BorderColor--dark-100:   $pf-v6-color-black-300 !default;
-$pf-v6-global--BorderColor--light-100:  $pf-v6-color-black-400 !default;
-$pf-v6-global--BorderRadius--sm:        3px !default;
-$pf-v6-global--BorderRadius--lg:        30em !default; // This is a sufficiently large number to ensure in most cases that the ends are evenly rounded.
-
-// Icons
-$pf-v6-global--icon--Color--light: $pf-v6-color-black-600 !default; // actionable icon color - eg, plain button default color
-$pf-v6-global--icon--Color--dark: $pf-v6-color-black-900 !default; // static icon color and hover/focus color for actionable icons - eg, plain button hover color
-$pf-v6-global--icon--Color--light--light: $pf-v6-color-black-200 !default; // "lighter" icon color for actionable icons - for use in pf-[v]-t-dark
-$pf-v6-global--icon--Color--dark--light: $pf-v6-color-white !default; // "lighter" icon color for static icons - for use in pf-[v]-t-dark
-$pf-v6-global--icon--Color--light--dark: $pf-v6-color-black-600 !default; // "darker" icon color for actionable icons - for use in pf-[v]-t-light
-$pf-v6-global--icon--Color--dark--dark: $pf-v6-color-black-900 !default; // "darker" icon color for static icons - for use in pf-[v]-t-light
-$pf-v6-global--icon--FontSize--sm: pf-font-prem(12px) !default;
-$pf-v6-global--icon--FontSize--md: pf-font-prem(16px) !default;
-$pf-v6-global--icon--FontSize--lg: pf-font-prem(24px) !default;
-$pf-v6-global--icon--FontSize--xl: pf-font-prem(54px) !default;
-
-// Fonts
-// Font family
-// stylelint-disable value-keyword-case
-$pf-v6-global--FontFamily--text: '"RedHatText", helvetica, arial, sans-serif';
-$pf-v6-global--FontFamily--heading: '"RedHatDisplay", helvetica, arial, sans-serif';
-$pf-v6-global--FontFamily--monospace: '"RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace';
-$pf-v6-global--FontFamily--text--vf: '"RedHatTextVF", "RedHatText", helvetica, arial, sans-serif';
-$pf-v6-global--FontFamily--heading--vf: '"RedHatDisplayVF", "RedHatDisplay", helvetica, arial, sans-serif';
-$pf-v6-global--FontFamily--monospace--vf: '"RedHatMonoVF", "RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace';
-// stylelint-enable value-keyword-case
-
-// Font size
-$pf-v6-global--FontSize--4xl: pf-font-prem(36px) !default;
-$pf-v6-global--FontSize--3xl: pf-font-prem(28px) !default;
-$pf-v6-global--FontSize--2xl: pf-font-prem(24px) !default;
-$pf-v6-global--FontSize--xl: pf-font-prem(20px) !default;
-$pf-v6-global--FontSize--lg: pf-font-prem(18px) !default;
-$pf-v6-global--FontSize--md: pf-font-prem(16px) !default;
-$pf-v6-global--FontSize--sm: pf-font-prem(14px) !default;
-$pf-v6-global--FontSize--xs: pf-font-prem(12px) !default;
-
-// Font weight
-$pf-v6-global--FontWeight--normal: 400 !default;
-$pf-v6-global--FontWeight--bold: 700 !default;
-
-// Line height
-$pf-v6-global--LineHeight--sm: 1.3 !default;
-$pf-v6-global--LineHeight--md: 1.5 !default;
-
-// Links
-$pf-v6-global--link--Color:                  $pf-v6-global--primary-color--100 !default;
-$pf-v6-global--link--Color--hover:           $pf-v6-global--primary-color--200 !default;
-$pf-v6-global--link--Color--light:           $pf-v6-global--active-color--300 !default;
-$pf-v6-global--link--Color--light--hover:    $pf-v6-global--active-color--400 !default;
-$pf-v6-global--link--Color--dark:            $pf-v6-global--primary-color--100 !default;
-$pf-v6-global--link--Color--dark--hover:     $pf-v6-global--primary-color--200 !default;
-$pf-v6-global--link--Color--visited:         $pf-v6-color-purple-600 !default;
-$pf-v6-global--link--TextDecoration:         none !default;
-$pf-v6-global--link--TextDecoration--hover:  underline !default;
-
-// List
-$pf-v6-global--ListStyle: disc outside !default;
-
-// Transitions
-$pf-v6-global--Transition: all 250ms cubic-bezier(.42, 0, .58, 1);
-$pf-v6-global--TimingFunction: cubic-bezier(.645, .045, .355, 1);
-$pf-v6-global--TransitionDuration: 250ms;
-
-// Arrow size (used for tooltips, popovers, etc.)
-$pf-v6-global--arrow--width: pf-font-prem(15px);
-$pf-v6-global--arrow--width-lg: pf-font-prem(25px);
-
-// A11y
-$pf-v6-global--target-size--MinWidth: 44px !default;
-$pf-v6-global--target-size--MinHeight: 44px !default;
-
-// filters
-// overlay
-// animations
-
 // Global breakpoint map - used for @pf-grid-item-modifiers
 $pf-v6-global--breakpoint-map: (
   "": null,