fix(global): remove woff, use where with globals, cleanup (patternfly…

…#5435)

scripts/gulp/icons.mjs

@@ -82,7 +82,7 @@ export function pfIconFont() {
     .pipe(
       iconfont({
         fontName: pficonFontName,
-        formats: ['woff', 'woff2'],
+        formats: ['woff2'],
         timestamp: Math.round(Date.now() / 1000)
       })
         // Trigger off emitted 'glyphs' event to generate pficon/unicode matches, combine w/FA & write to JSON file

scripts/gulp/icons_template.scss

@@ -1,7 +1,6 @@
 @font-face {
 	font-family: '<%= fontName %>';
-	src: url('#{$pf-global--fonticon-path}/<%= fontName %>.woff2<%= cacheBusterQueryString %>') format('woff2'),
-		url('#{$pf-global--fonticon-path}/<%= fontName %>.woff<%= cacheBusterQueryString %>') format('woff');
+	src: url('#{$pf-global--fonticon-path}/<%= fontName %>.woff2<%= cacheBusterQueryString %>') format('woff2');
 }
 
 @mixin <%= cssClass%>-styles {

src/patternfly/assets/pficon/pficon.scss

@@ -1,7 +1,6 @@
 @font-face {
 	font-family: 'pficon';
-	src: url('#{$pf-global--fonticon-path}/pficon.woff2') format('woff2'),
-		url('#{$pf-global--fonticon-path}/pficon.woff') format('woff');
+	src: url('#{$pf-global--fonticon-path}/pficon.woff2') format('woff2');
 }
 
 @mixin pf-icon-styles {

src/patternfly/base/_fa-icons.scss

@@ -15,8 +15,7 @@
       font-style: normal;
       font-weight: 900;
       src:
-        url("#{$fa-font-path}/fa-solid-900.woff2") format("woff2"),
-        url("#{$fa-font-path}/fa-solid-900.woff") format("woff");
+        url("#{$fa-font-path}/fa-solid-900.woff2") format("woff2");
     }
 
     // stylelint-disable

src/patternfly/base/_fonts.scss

@@ -9,8 +9,7 @@
   font-style: normal;
   font-weight: 300;
   src:
-    url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Regular.woff2") format("woff2"),
-    url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Regular.woff") format("woff");
+    url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Regular.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 
@@ -19,8 +18,7 @@
   font-style: normal;
   font-weight: 400;
   src:
-    url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Medium.woff2") format("woff2"),
-    url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Medium.woff") format("woff");
+    url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Medium.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 
@@ -29,8 +27,7 @@
   font-style: normal;
   font-weight: 700;
   src:
-    url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Bold.woff2") format("woff2"),
-    url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Bold.woff") format("woff");
+    url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Bold.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 
@@ -39,8 +36,7 @@
   font-style: normal;
   font-weight: 400;
   src:
-    url("#{$pf-global--font-path}/RedHatText/RedHatText-Regular.woff2") format("woff2"),
-    url("#{$pf-global--font-path}/RedHatText/RedHatText-Regular.woff") format("woff");
+    url("#{$pf-global--font-path}/RedHatText/RedHatText-Regular.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 
@@ -49,8 +45,7 @@
   font-style: normal;
   font-weight: 700;
   src:
-    url("#{$pf-global--font-path}/RedHatText/RedHatText-Medium.woff2") format("woff2"),
-    url("#{$pf-global--font-path}/RedHatText/RedHatText-Medium.woff") format("woff");
+    url("#{$pf-global--font-path}/RedHatText/RedHatText-Medium.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 

src/patternfly/base/_globals.scss

@@ -1,134 +1,140 @@
-// Reset
-// Based on minireset.css v0.0.3 | MIT License github.com/jgthms/minireset.css
-
+// Reset - based on minireset.css v0.0.3 | MIT License github.com/jgthms/minireset.css
 @if $pf-global--enable-reset {
-  // stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
-
-  html,
-  body,
-  p,
-  ol,
-  ul,
-  li,
-  dl,
-  dt,
-  dd,
-  blockquote,
-  figure,
-  fieldset,
-  legend,
-  textarea,
-  pre,
-  iframe,
-  hr,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  :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;
   }
+}
 
-  html,
-  body {
+// Normalize
+@if $pf-global--enable-normalize {
+  *,
+  :where(
+    *::before,
+    *::after
+  ) {
+    box-sizing: border-box;
+  }
+
+  :where(
+    html,
+    body
+   ) {
     height: 100%;
   }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  :where(body) {
+    font-family: var(--pf-global--FontFamily--sans-serif);
+    font-size: var(--pf-global--FontSize--md);
+    font-weight: var(--pf-global--FontWeight--normal);
+    line-height: var(--pf-global--LineHeight--md);
+  }
+
+  :where(
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6
+   ) {
     font-size: 100%;
     font-weight: var(--pf-global--FontWeight--normal);
   }
 
-  ul {
+  :where(ul) {
     list-style: none;
   }
 
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
+  :where(
+    button,
+    input,
+    optgroup,
+    select,
+    textarea
+   ) {
     margin: 0;
     font-family: inherit;
     font-size: 100%;
     line-height: var(--pf-global--LineHeight--md);
     color: var(--pf-global--Color--100);
   }
 
-  img,
-  embed,
-  iframe,
-  object,
-  audio,
-  video {
+  :where(
+    img,
+    embed,
+    iframe,
+    object,
+    audio,
+    video
+   ) {
     max-width: 100%;
     height: auto;
   }
 
-  iframe {
+  :where(iframe) {
     border: 0;
   }
 
-  table {
+  :where(table) {
     border-spacing: 0;
     border-collapse: collapse;
   }
 
-  td,
-  th {
+  :where(
+    td,
+    th
+  ) {
     padding: 0;
     text-align: left;
   }
 
-  code,
-  pre {
+  :where(
+    code,
+    pre
+  ) {
     font-family: var(--pf-global--FontFamily--monospace);
   }
 
-  // Patternfly base styles
-
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  html {
-    font-family: sans-serif;
-    line-height: 1.15;
-  }
-
-  body {
-    font-family: var(--pf-global--FontFamily--sans-serif);
-    font-size: var(--pf-global--FontSize--md);
-    font-weight: var(--pf-global--FontWeight--normal);
-    line-height: var(--pf-global--LineHeight--md);
-    text-align: left;
-    background-color: var(--pf-global--BackgroundColor--100);
-  }
-
-  // Links styles
-
-  a {
+  :where(a) {
     font-weight: var(--pf-global--link--FontWeight);
     color: var(--pf-global--link--Color);
     text-decoration: var(--pf-global--link--TextDecoration);
+  }
 
-    &:hover {
-      --pf-global--link--Color: var(--pf-global--link--Color--hover);
-      --pf-global--link--TextDecoration: var(--pf-global--link--TextDecoration--hover);
-    }
+  :where(a:hover) {
+    --pf-global--link--Color: var(--pf-global--link--Color--hover);
+    --pf-global--link--TextDecoration: var(--pf-global--link--TextDecoration--hover);
   }
 
-  button,
-  a {
+  :where(
+    a,
+    button
+  ) {
     cursor: pointer;
   }
 }

src/patternfly/patternfly-base-no-reset.scss → src/patternfly/patternfly-base-no-globals.scss

@@ -1,3 +1,4 @@
 $pf-global--enable-reset: false;
+$pf-global--enable-normalize: false;
 
 @import "./patternfly-base";

src/patternfly/patternfly-no-reset.scss → src/patternfly/patternfly-no-globals.scss

@@ -1,3 +1,4 @@
 $pf-global--enable-reset: false;
+$pf-global--enable-normalize: false;
 
 @import "./patternfly";