fix: unified font size to 16px

elements/pfe-jump-links/pfe-jump-links-nav.scss

@@ -0,0 +1,353 @@
+@use "@patternfly/pfe-sass" as *;
+
+@include configure(
+  $name: 'jump-links',
+  $variables: (
+    horizontal-spacer: calc(#{pfe-var(container-padding)} * 2),
+    vertical-spacer: calc(#{pfe-var(container-padding)} * 2),
+    BorderColor: pfe-var(ui-accent),
+    FontSize: pfe-var(FontSize--md),
+
+    // Initialize at mobile breakpoint
+    Width: auto,
+
+    heading: (
+      FontSize: pfe-var(FontSize--md)
+    ),
+
+    link: (
+      horizontal-spacer: calc(#{pfe-var(content-spacer)} / 3),
+      vertical-spacer: calc(#{pfe-var(content-spacer)} / 6),
+    ),
+  ),
+);
+
+:host {
+  box-sizing: border-box;
+  font-family: pfe-var(font-family);
+  font-weight: pfe-var(font-weight--normal);
+  display: block;
+  position: sticky;
+  z-index: pfe-zindex(jumplinks);
+  top: 0;
+  padding: 0;
+}
+
+@each $color in (darkest, darker, lightest, lighter) {
+  :host([horizontal][color="#{$color}"]) {
+    @media(min-width: #{pfe-breakpoint(lg)}) {
+      background-color: pfe-var(surface--#{$color});
+      --context: #{pfe-var(surface--#{$color}--context)};
+      @include pfe-set-broadcast-context(pfe-fetch(surface--#{$color}--context));
+    }
+  }
+}
+
+:host([stuck][horizontal]) {
+  box-shadow: pfe-var(box-shadow--sm);
+}
+
+// Shadow DOM slot tag
+.pfe-jump-links-nav__heading {
+  margin-top: 0;
+  margin-bottom: pfe-var(content-spacer--body--sm);
+}
+
+// Typography styles for default or custom heading
+.pfe-jump-links-nav__heading h3,
+::slotted([slot="heading"]) {
+  color: pfe-broadcasted(text);
+  margin: 0;
+  font-size: pfe-local(FontSize, $region: heading);
+  font-weight: pfe-var(font-weight--normal);
+  text-transform: pfe-local(TextTransform, $region: heading, $fallback: uppercase);
+}
+
+slot[name="heading"][sr-only] {
+  @extend %sr-only;
+}
+
+slot[name="logo"] {
+  display: none;
+}
+
+slot[name="cta"] {
+  display: none;
+}
+
+nav {
+  visibility: visible;
+  margin: 0;
+  list-style: none;
+  padding: 0;
+
+  pfe-accordion-panel & {
+    width: 100%;
+  }
+
+  :host([horizontal][no-header]) & {
+    @media(min-width: #{pfe-breakpoint(lg)}) {
+      padding-top: 1px;
+      padding-bottom: 0;
+    }
+  }
+}
+
+#container {
+  padding: 32px 0;
+  pfe-accordion-panel & {
+    padding: 24px 0;
+  }
+}
+
+ul {
+  padding: 0;
+  margin: 0;
+  border-left: pfe-var(surface--border-width) pfe-var(surface--border-style) pfe-var(ui-disabled);
+}
+
+li {
+  display: block;
+  position: relative;
+
+  margin-left: calc(#{pfe-var(surface--border-width)} * -1);
+
+  .sub-nav & {
+    margin-left: 0;
+  }
+
+  &[expand] {
+    ul {
+      height: auto;
+      flex: 1;
+    }
+
+    .sub-nav {
+      display: table;
+      height: auto;
+    }
+  }
+
+  // Active state bar; uses pseudo-element, not border, to prevent angled top/bottom
+  &::before {
+    position: absolute;
+    content: "";
+    top: 0px;
+    left: 0px;
+    height: calc(100% - 0px);
+    width: calc(var(--pfe-theme--surface--border-width--heavy,4px) - 0px);
+    background-color: transparent;
+  }
+
+  &:not([active],[expand]):hover::before,
+  li:not([expand]) &:hover::before {
+    background-color: pfe-var(ui-disabled);
+  }
+
+  &[expand]::before,
+  &[active]::before {
+    background-color: pfe-local(accent, $fallback: pfe-local(BorderColor));
+    // This z-index prevents nested elements from showing the hover state
+    z-index: 2;
+  }
+}
+
+a {
+  position: relative;
+
+  color: pfe-var(ui-disabled--text);
+  font-size: pfe-local(FontSize);
+  text-decoration: none;
+  line-height: pfe-var(line-height);
+
+  padding: calc(#{pfe-local(vertical-spacer, $region: link)} * 2) calc(#{pfe-local(horizontal-spacer, $region: link)} * 2);
+
+  &,
+  a:focus + ul > li > &,
+  li:hover &,
+  li[expand] & {
+    display: table;
+  }
+
+  // Darken the text on hover or when an item is active
+  li > &:hover,
+  li[active] > & {
+    color: pfe-broadcasted(text);
+  }
+
+  // Note: there is no ui-disabled--text--on-dark to pull from
+  @each $context in (dark, saturated) {
+    :host([on="#{$context}"]) & {
+      color: pfe-var(text--muted--on-#{$context});
+    }
+  }
+
+  .has-sub-section & {
+    padding-bottom: pfe-local(vertical-spacer, $region: link);
+  }
+
+  .sub-section & {
+    margin-left: calc(#{pfe-var(container-spacer)} * 0.75);
+    font-size: pfe-local(FontSize);
+    padding: pfe-local(vertical-spacer, $region: link) calc(#{pfe-local(horizontal-spacer, $region: link)} * 2);
+
+    @media(min-width: #{pfe-breakpoint(lg)}) {
+      display: none;
+    }
+
+    &:last-child {
+      padding-bottom: pfe-local(horizontal-spacer, $region: link);
+    }
+  }
+
+  // Creating the custom focus state
+  &:focus:focus-visible {
+    @include focus-ring;
+  }
+}
+
+ul ul {
+  margin: 0;
+  padding: 0;
+
+  overflow-y: hidden;
+  // transition: flex pfe-var(animation-speed) pfe-var(animation-timing);
+  transition: flex 1s linear;
+
+  &,
+  li {
+    border-left: none !important;
+  }
+}
+
+pfe-accordion {
+  // Custom border
+  border: pfe-var(surface--border-width) pfe-var(surface--border-style) pfe-var(ui-disabled);
+
+  --context: light;
+  --pfe-accordion--BackgroundColor: #{pfe-var(surface--lightest)};
+
+  :host([color="darkest"]) & {
+    --context: dark;
+    --pfe-accordion--BackgroundColor: #{pfe-var(surface--darkest)};
+    --pfe-theme--color--ui-accent--on-dark: transparent;
+  }
+}
+
+pfe-accordion,
+pfe-accordion-panel[expanded],
+pfe-accordion-panel.animating {
+  --pfe-accordion--accent: transparent;
+  --pfe-accordion--BorderColor: transparent;
+  --pfe-accordion--accent: transparent;
+  --pfe-accordion--BorderTopWidth: 0;
+  --pfe-accordion--BorderBottomWidth: 0;
+  --pfe-accordion--panel-container--Padding: 0 0 0 calc(var(--pfe-accordion__base--Padding,var(--pfe-theme--container-spacer,1rem)) * 1.5);
+}
+
+// Variations for horizontal styling
+:host([horizontal]) {
+  @media screen and (min-width: #{pfe-breakpoint(lg)}) {
+    width: 100%;
+
+    background-color: pfe-local(BackgroundColor, $fallback: pfe-var(surface--lightest));
+    --context: #{pfe-local(context, $fallback: pfe-var(surface--lightest--context))};
+
+    z-index: calc(#{pfe-zindex(jumplinks)} + 1);
+    border: none;
+    padding: 0;
+
+    .pfe-jump-links-nav__heading {
+      flex-basis: 100%;
+      align-self: center;
+      justify-content: center;
+
+      display: block;
+
+      margin: 0;
+      padding-bottom: pfe-var(container-padding);
+      border-bottom: pfe-var(surface--border-width) pfe-var(surface--border-style) pfe-var(surface--border);
+    }
+
+    .pfe-jump-links-nav__heading h3,
+    ::slotted([slot="heading"]) {
+      text-align: pfe-local(TextAlign, $region: heading, $fallback: center);
+    }
+
+    ::slotted([slot="logo"]) {
+      position: absolute;
+      max-height: calc(#{pfe-var(container-spacer)} * 3.5);
+      max-width: calc(#{pfe-var(container-spacer)} * 14);
+      top: pfe-var(container-spacer);
+      left: calc(#{pfe-var(container-spacer)} * 4);
+    }
+
+    ::slotted([slot="cta"]) {
+      position: absolute;
+      top:   calc(#{pfe-var(container-spacer)} * 1);
+      right: calc(#{pfe-var(container-spacer)} * 4);
+    }
+  }
+
+  nav {
+    @media screen and (min-width: #{pfe-breakpoint(lg)}) {
+      display: flex;
+      flex-flow: row wrap;
+      padding-top: 32px;
+      padding-bottom: 8px;
+      max-width: pfe-local(Width, $fallback: calc(#{pfe-breakpoint(lg)} - (#{pfe-local(Padding--horizontal)} * 4) ));
+    }
+
+    @media screen and (min-width: #{pfe-breakpoint(xl)}) {
+      max-width: pfe-local(Width, $fallback: calc(#{pfe-breakpoint(xl)} - (#{pfe-local(Padding--horizontal)} * 4) ));
+    }
+  }
+
+  @media screen and (min-width: #{pfe-breakpoint(lg)}) {
+    #container {
+      padding: 0;
+      flex-grow: 1;
+      display: flex;
+      justify-items: center;
+      flex-direction: column;
+    }
+
+    ul {
+      border: none;
+      text-align: center;
+      flex-grow: 1;
+      display: flex;
+      padding: 0;
+      width: auto;
+      margin: 0 auto;
+    }
+
+    li {
+      margin-left: 0;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      margin-top: calc(#{pfe-var(surface--border-width)} * -1);
+
+      &::before {
+        height: pfe-var(surface--border-width--heavy);
+        width: 100%;
+      }
+    }
+
+    a {
+      padding: 16px;
+      text-decoration: none;
+      font-size: 16px;
+      color: pfe-broadcasted(text--muted); // was: #6a6e73
+      &[active],
+      &:hover {
+        color: pfe-broadcasted(text); // was: #151515
+      }
+    }
+  }
+}
+
+:host([hidden]) {
+  display: none !important;
+}

elements/pfe-jump-links/src/pfe-jump-links-nav.scss

@@ -13,7 +13,7 @@ $LOCAL-VARIABLES: (
   Width: auto,
 
   heading: (
-    FontSize: pfe-var(FontSize--sm)
+    FontSize: pfe-var(FontSize--md)
   ),
 
   link: (
@@ -183,7 +183,7 @@ a {
 
   .sub-section & {
     margin-left: calc(#{pfe-var(container-spacer)} * 0.75);
-    font-size: calc(#{pfe-local(FontSize)} * 0.85);
+    font-size: pfe-local(FontSize);
     padding: pfe-local(vertical-spacer, $region: link) calc(#{pfe-local(horizontal-spacer, $region: link)} * 2);
 
     @media(min-width: #{pfe-breakpoint(lg)}) {
@@ -335,7 +335,7 @@ pfe-accordion-panel.animating {
     a {
       padding: 16px;
       text-decoration: none;
-      font-size: 16px;
+      font-size: pfe-local(FontSize);
       color: pfe-broadcasted(text--muted); // was: #6a6e73
       &[active],
       &:hover {