@bloom-housing/ui-components 7.3.2 → 8.0.1

package/src/global/tables.scss

@@ -173,7 +173,7 @@ table {
       }
 
       .stacked-table-subtext {
-        @apply text-sm;
+        @apply text-xs;
         @apply text-gray-700;
         @apply pl-1;
         @apply font-normal;
@@ -227,7 +227,7 @@ table {
       @apply normal-case;
       @apply px-0;
       @apply pb-0;
-      @apply text-sm;
+      @apply text-xs;
       @screen md {
         @apply py-3;
       }
@@ -241,7 +241,7 @@ table {
       @apply normal-case;
       @apply px-0;
       @apply pb-0;
-      @apply text-sm;
+      @apply text-xs;
       @apply pl-2;
       @apply font-normal;
     }
@@ -287,7 +287,7 @@ table {
         @screen md {
           @apply text-base;
         }
-        @apply text-sm;
+        @apply text-xs;
         @apply text-black;
         @apply font-normal;
       }
@@ -334,7 +334,7 @@ td.reserved {
   @apply font-sans;
   @apply font-bold;
   @apply uppercase;
-  @apply text-2xs;
+  @apply text-3xs;
   @apply leading-tight;
   @apply py-2;
   @apply text-gray-750;
@@ -349,7 +349,7 @@ td.reserved {
 
   .reserved-icon {
     @apply text-accent-warm;
-    @apply text-sm;
+    @apply text-xs;
   }
 }
 

package/src/global/text.scss

@@ -8,10 +8,10 @@ h6 {
 }
 
 h1 {
-  @apply text-3xl;
+  @apply text-2xl;
 
   @screen md {
-    @apply text-4xl;
+    @apply text-3xl;
   }
 }
 
@@ -19,7 +19,7 @@ h2 {
   @apply text-2xl;
 
   @screen md {
-    @apply text-3xl;
+    @apply text-2xl;
   }
 }
 
@@ -36,7 +36,7 @@ h4 {
 }
 
 h5 {
-  @apply text-lg;
+  @apply text-xl;
 }
 
 h6 {
@@ -69,12 +69,12 @@ a {
 }
 
 h1.title {
-  @apply text-4xl;
+  @apply text-3xl;
 }
 
-.text-serif-lg {
+.text-serif-xl {
   @apply font-serif;
-  @apply text-lg;
+  @apply text-xl;
   @apply mb-4;
 }
 
@@ -92,7 +92,7 @@ h1.title {
 .edit-link {
   @apply underline;
   @apply font-alt-sans;
-  @apply text-tiny;
+  @apply text-sm;
   @apply uppercase;
   @apply block;
   @apply text-primary;
@@ -105,7 +105,7 @@ h1.title {
   @apply rounded-full;
   @apply px-2;
   @apply py-1;
-  @apply text-sm;
+  @apply text-xs;
   @apply font-semibold;
   @apply text-gray-700;
   @apply mr-2;
@@ -115,19 +115,11 @@ h1.title {
   @apply block;
 }
 
-:root {
-  --bloom-text-color-light: var(--bloom-color-gray-700);
-  --bloom-text-color: var(--bloom-color-gray-750);
-  --bloom-text-color-dark: var(--bloom-color-gray-800);
-  --bloom-text-color-darker: var(--bloom-color-gray-850);
-  --bloom-text-color-darkest: var(--bloom-color-black);
-}
-
 .text__large-primary {
   font-family: var(--text-large-primary-font-family, var(--bloom-font-alt-sans));
   font-weight: var(--text-large-primary-font-weight, 600);
   color: var(--text-large-primary--color, var(--bloom-color-primary-dark));
-  font-size: var(--text-large-primary-font-size, var(--bloom-font-size-3xl));
+  font-size: var(--text-large-primary-font-size, var(--bloom-font-size-2xl));
   margin-block: var(--text-large-primary-margin-block, 0 var(--bloom-s3));
   line-height: var(--text-large-primary-line-height, var(--bloom-line-height-tight));
 }
@@ -135,7 +127,7 @@ h1.title {
 .text__medium-normal {
   font-family: var(--text-medium-normal-font-family, var(--bloom-font-alt-sans));
   font-weight: var(--text-medium-normal-font-weight, normal);
-  color: var(--text-medium-normal-color, var(--bloom-text-color-darkest));
+  color: var(--text-medium-normal-color, var(--bloom-color-black));
   font-size: var(--text-medium-normal-font-size, var(--bloom-font-size-base));
   margin-block: var(--text-medium-normal-margin-block, 0 var(--bloom-s3));
 }
@@ -144,7 +136,7 @@ h1.title {
   font-family: var(--text-small-weighted-font-family, var(--bloom-font-alt-sans));
   font-weight: var(--text-small-weighted-font-weight, 600);
   color: var(--text-small-weighted-color, var(--bloom-text-color-dark));
-  font-size: var(--text-small-weighted-font-size, var(--bloom-font-size-sm));
+  font-size: var(--text-small-weighted-font-size, var(--bloom-font-size-xs));
   margin-block: var(--text-small-weighted-margin-block, 0 var(--bloom-s1));
 }
 
@@ -152,7 +144,7 @@ h1.title {
   font-family: var(--text-small-normal-font-family, var(--bloom-font-alt-sans));
   font-weight: var(--text-small-normal-font-weight, normal);
   color: var(--text-small-normal-color, var(--bloom-text-color));
-  font-size: var(--text-small-normal-font-size, var(--bloom-font-size-sm));
+  font-size: var(--text-small-normal-font-size, var(--bloom-font-size-xs));
   margin-block: var(--text-small-normal-margin-block, 0 var(--bloom-s3));
 }
 
@@ -160,7 +152,7 @@ h1.title {
   font-family: var(--text-light-weighted-font-family, var(--bloom-font-alt-sans));
   font-weight: var(--text-light-weighted-font-weight, 600);
   color: var(--text-light-weighted-color, var(--bloom-text-color-light));
-  font-size: var(--text-light-weighted-font-size, var(--bloom-font-size-sm));
+  font-size: var(--text-light-weighted-font-size, var(--bloom-font-size-xs));
 }
 
 .text__caps-spaced {
@@ -169,7 +161,7 @@ h1.title {
   color: var(--text-caps-spaced-color, var(--bloom-text-color));
   letter-spacing: var(--text-caps-spaced-letter-spacing, var(--bloom-letter-spacing-widest));
   font-weight: var(--text-caps-spaced-font-weight, 600);
-  font-size: var(--text-caps-spaced-font-size, var(--bloom-font-size-tiny));
+  font-size: var(--text-caps-spaced-font-size, var(--bloom-font-size-sm));
   margin-bottom: var(--text-caps-spaced-margin-bottom, var(--bloom-s3));
   display: inline-block;
 }
@@ -177,7 +169,7 @@ h1.title {
 .text__underline-weighted {
   font-family: var(--text-underline-weighted-font-family, var(--bloom-font-alt-sans));
   text-transform: var(--text-underline-weighted-transform, uppercase);
-  font-size: var(--text-underline-weighted-font-size, var(--bloom-font-size-tiny));
+  font-size: var(--text-underline-weighted-font-size, var(--bloom-font-size-sm));
   margin-bottom: var(--text-underline-weighted-bottom-margin, var(--bloom-s5));
   padding-bottom: var(--text-underline-weighted-bottom-padding, var(--bloom-s2));
   border: var(--text-underline-weighted-border, 0);
@@ -194,6 +186,6 @@ h1.title {
   text-transform: var(--text-caps-weighted-text-transform, uppercase);
   font-family: var(--text-caps-weighted-font-family, var(--bloom-font-sans));
   font-weight: var(--text-caps-weighted-font-weight, 700);
-  font-size: var(--text-caps-weighted-font-size, var(--bloom-font-size-tiny));
+  font-size: var(--text-caps-weighted-font-size, var(--bloom-font-size-sm));
   letter-spacing: var(--text-caps-weighted-letter-spacing, var(--bloom-letter-spacing-wide));
 }

package/src/global/tokens/colors.scss

@@ -1,29 +1,37 @@
 :root {
+  /* Base Colors */
+
   --bloom-color-white: #ffffff;
   --bloom-color-black: #000000;
 
-  --bloom-color-red-800: #b21d38;
-  --bloom-color-red-700: #e41d3d;
+  --bloom-color-red-900: #6a0c1b;
+  --bloom-color-red-700: #b21d38;
+  --bloom-color-red-500: #e41d3d;
   --bloom-color-red-300: #f9d2d8;
+  --bloom-color-red-100: #fdebee;
 
-  --bloom-color-green-800: #216e1f;
-  --bloom-color-green-700: #2e8540;
+  --bloom-color-green-900: #1a4c25;
+  --bloom-color-green-700: #216e1f;
+  --bloom-color-green-500: #2e8540;
   --bloom-color-green-300: #b4e5be;
+  --bloom-color-green-100: #e7f7ea;
 
-  --bloom-color-blue-800: #205493;
+  --bloom-color-blue-900: #205493;
   --bloom-color-blue-700: #0067be;
-  --bloom-color-blue-600: #0077da;
+  --bloom-color-blue-500: #0077da;
   --bloom-color-blue-300: #daeeff;
-  --bloom-color-blue-200: #f5f8f9;
+  --bloom-color-blue-100: #f5f8f9;
 
-  --bloom-color-yellow-800: #e5a000;
-  --bloom-color-yellow-700: #fdb81e;
+  --bloom-color-yellow-900: #825a01;
+  --bloom-color-yellow-700: #e5a000;
+  --bloom-color-yellow-500: #fdb81e;
   --bloom-color-yellow-300: #fee8b6;
+  --bloom-color-yellow-100: #fff2d5;
 
-  --bloom-color-gray-950: #242c2e;
-  --bloom-color-gray-900: #222222;
+  --bloom-color-gray-950: #222222;
+  --bloom-color-gray-900: #292929;
   --bloom-color-gray-850: #333333;
-  --bloom-color-gray-800: #30383a;
+  --bloom-color-gray-800: #373737;
   --bloom-color-gray-750: #555555;
   --bloom-color-gray-700: #767676;
   --bloom-color-gray-650: #888888;
@@ -36,30 +44,47 @@
   --bloom-color-gray-200: #f7f7f7;
   --bloom-color-gray-100: #f9f9f9;
 
-  --bloom-color-primary: var(--bloom-color-blue-600);
+  /* Semantic Colors */
+
+  --bloom-color-primary: var(--bloom-color-blue-500);
   --bloom-color-primary-dark: var(--bloom-color-blue-700);
-  --bloom-color-primary-darker: var(--bloom-color-blue-800);
+  --bloom-color-primary-darker: var(--bloom-color-blue-900);
   --bloom-color-primary-light: var(--bloom-color-blue-300);
-  --bloom-color-primary-lighter: var(--bloom-color-blue-200);
-
-  --bloom-color-secondary: var(--bloom-color-blue-700);
-  --bloom-color-alert: var(--bloom-color-red-700);
+  --bloom-color-primary-lighter: var(--bloom-color-blue-100);
+  
+  --bloom-color-alert: var(--bloom-color-red-500);
   --bloom-color-alert-light: var(--bloom-color-red-300);
-  --bloom-color-alert-dark: var(--bloom-color-red-800);
-  --bloom-color-success: var(--bloom-color-green-700);
+  --bloom-color-alert-lighter: var(--bloom-color-red-100);
+  --bloom-color-alert-dark: var(--bloom-color-red-700);
+  --bloom-color-alert-darker: var(--bloom-color-red-900);
+  
+  --bloom-color-success: var(--bloom-color-green-500);
   --bloom-color-success-light: var(--bloom-color-green-300);
-  --bloom-color-success-dark: var(--bloom-color-green-800);
-  --bloom-color-warn: var(--bloom-color-yellow-700);
+  --bloom-color-success-lighter: var(--bloom-color-green-100);
+  --bloom-color-success-dark: var(--bloom-color-green-700);
+  --bloom-color-success-darker: var(--bloom-color-green-900);
+
+  --bloom-color-warn: var(--bloom-color-yellow-500);
   --bloom-color-warn-light: var(--bloom-color-yellow-300);
-  --bloom-color-warn-dark: var(--bloom-color-yellow-800);
+  --bloom-color-warn-lighter: var(--bloom-color-yellow-100);
+  --bloom-color-warn-dark: var(--bloom-color-yellow-700);
+  --bloom-color-warn-darker: var(--bloom-color-yellow-900);
 
   --bloom-color-accent-cool: #00bed5;
   --bloom-color-accent-cool-light: #c8f1ff;
+  --bloom-color-accent-cool-lighter: #eafdff;
   --bloom-color-accent-cool-dark: #009db0;
+  --bloom-color-accent-cool-darker: #005863;
+
   --bloom-color-accent-warm: #ff6627;
   --bloom-color-accent-warm-dark: #d54309;
+  --bloom-color-accent-warm-darker: #8d2900;
   --bloom-color-accent-warm-light: #ffd2c0;
   --bloom-color-accent-warm-lighter: #fff7f3;
 
-  --bloom-color-lush: #99cd00;
+  --bloom-text-color: var(--bloom-color-gray-750);
+  --bloom-text-color-light: var(--bloom-color-gray-700);
+  --bloom-text-color-disabled: var(--bloom-color-gray-450);
+  --bloom-text-color-dark: var(--bloom-color-gray-800);
+  --bloom-text-color-darker: var(--bloom-color-gray-950);
 }

package/src/global/tokens/fonts.scss

@@ -5,20 +5,18 @@
   --bloom-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
     "Courier New", monospace;
 
-  --bloom-font-size-2xs: 0.6875rem;
-  --bloom-font-size-xs: 0.75rem;
-  --bloom-font-size-sm: 0.8125rem;
-  --bloom-font-size-tiny: 0.875rem;
+  --bloom-font-size-3xs: 0.6875rem;
+  --bloom-font-size-2xs: 0.75rem;
+  --bloom-font-size-xs: 0.8125rem;
+  --bloom-font-size-sm: 0.875rem;
   --bloom-font-size-base: 1rem;
-  --bloom-font-size-base-alt: 1.125rem;
-  --bloom-font-size-lg: 1.25rem;
-  --bloom-font-size-xl: 1.375rem;
-  --bloom-font-size-2xl: 1.5rem;
-  --bloom-font-size-3xl: 1.625rem;
-  --bloom-font-size-4xl: 2rem;
-  --bloom-font-size-5xl: 2.5rem;
-  --bloom-font-size-6xl: 3rem;
-  --bloom-font-size-6_5xl: 4rem;
+  --bloom-font-size-lg: 1.125rem;
+  --bloom-font-size-xl: 1.25rem;
+  --bloom-font-size-2xl: 1.625rem;
+  --bloom-font-size-3xl: 2rem;
+  --bloom-font-size-4xl: 2.5rem;
+  --bloom-font-size-5xl: 3rem;
+  --bloom-font-size-6xl: 4rem;
   --bloom-font-size-7xl: 4.5rem;
 
   --bloom-letter-spacing-tightest: -0.075em;

package/src/headers/Hero.scss

@@ -28,14 +28,14 @@
   @apply m-auto;
 }
 .hero__title {
-  @apply text-4xl;
+  @apply text-3xl;
   @apply mb-5;
   @apply mx-auto;
   letter-spacing: -0.04em;
   max-width: 41rem;
 
   @screen md {
-    @apply text-6xl;
+    @apply text-5xl;
     @apply mb-8;
   }
 
@@ -58,6 +58,6 @@ h2.hero__subtitle {
   text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
 
   @screen md {
-    @apply text-lg;
+    @apply text-xl;
   }
 }

package/src/headers/PageHeader.docs.mdx

@@ -42,4 +42,4 @@ You can apply CSS variables to the `.page-header` selector to customize the appe
 | `--inverse-background-color` | Color | The `inverse` variant background                          | `--bloom-color-primary-darker`  |
 | `--inverse-border-color`     | Color | The `inverse` variant color of the top border             | `--bloom-color-primary`         |
 | `--inverse-text-color`       | Color | The `inverse` variant color of text                       | `--bloom-color-white`           |
-| `--title-font-size`          | Size  | The font size of the title (only on medium+ size screens) | `--bloom-font-size-5xl`         |
+| `--title-font-size`          | Size  | The font size of the title (only on medium+ size screens) | `--bloom-font-size-4xl`         |

package/src/headers/PageHeader.scss

@@ -7,7 +7,7 @@
   --inverse-background-color: var(--bloom-color-primary-darker);
   --inverse-border-color: var(--bloom-color-primary);
   --inverse-text-color: var(--bloom-color-white);
-  --title-font-size: var(--bloom-font-size-5xl);
+  --title-font-size: var(--bloom-font-size-4xl);
 
   /* Base Styles */
   padding: var(--bloom-s8) 0;

package/src/headers/SiteHeader.scss

@@ -188,13 +188,13 @@
           .logo__title {
             @apply uppercase;
             @apply font-bold;
-            @apply text-gray-900;
+            @apply text-gray-950;
             @apply font-alt-sans;
             @apply tracking-wider;
-            @apply text-sm;
+            @apply text-xs;
 
             @screen md {
-              @apply text-tiny;
+              @apply text-sm;
             }
           }
         }
@@ -222,13 +222,13 @@
           @apply relative;
           @apply rounded;
           @apply px-2;
-          @apply text-lg;
+          @apply text-xl;
           @apply text-center;
           @apply uppercase;
           @apply font-alt-sans;
           @apply inline-block;
           @apply tracking-widest;
-          @apply text-sm;
+          @apply text-xs;
           @apply font-bold;
           @apply leading-snug;
           @apply border-primary;
@@ -243,7 +243,7 @@
 
         .navbar-link {
           text-transform: uppercase;
-          @apply text-sm;
+          @apply text-xs;
           @apply pr-3;
           @apply pl-3;
           @apply text-gray-750;
@@ -340,7 +340,7 @@
 
   .navbar-notice__text {
     @apply max-w-5xl;
-    @apply text-sm;
+    @apply text-xs;
     @apply py-2;
     @apply px-3;
     margin: auto;
@@ -393,3 +393,17 @@
     width: 350px;
   }
 }
+
+.skip-link {
+  @apply sr-only;
+  &:focus {
+    @apply not-sr-only;
+    position: absolute;
+    z-index: 20;
+    padding: var(--bloom-s2) var(--bloom-s4);
+    text-decoration: underline;
+    font-size: var(--bloom-font-size-base);
+    color: var(--bloom-color-primary);
+    background-color: var(--bloom-color-white);
+  }
+}

package/src/headers/SiteHeader.stories.tsx

@@ -32,6 +32,22 @@ export const withLanguage = () => (
   />
 )
 
+export const withLanguageAndSkipLink = () => (
+  <SiteHeader
+    homeURL={"/"}
+    languages={[
+      { label: "English", onClick: () => console.log("Clicked English"), active: true },
+      { label: "Español", onClick: () => console.log("Clicked Español"), active: false },
+      { label: "中文", onClick: () => console.log("Clicked 中文"), active: false },
+    ]}
+    logoSrc="/images/logo_glyph.svg"
+    title="Alameda County Housing Portal"
+    menuLinks={[]}
+    mainContentId={"main-content"}
+    strings={{ skipToMainContent: "Skip to main content" }}
+  />
+)
+
 export const withLanguageAndMobileNotice = () => (
   <SiteHeader
     homeURL={"/"}
@@ -280,7 +296,7 @@ export const withDropdownIcons = () => (
     notice="We're just getting started. We'd love to get your feedback."
     logoSrc="/images/logo_glyph.svg"
     title="Alameda County Housing Portal"
-    dropdownItemClassName={"text-xs"}
+    dropdownItemClassName={"text-2xs"}
     menuLinks={[
       {
         title: "My Account",
@@ -346,7 +362,7 @@ export const DAHLIAToggleSet = () => (
     mobileText={true}
     logoWidth={"medium"}
     logoSrc="https://bit.ly/3me4iUC"
-    dropdownItemClassName={"text-xs"}
+    dropdownItemClassName={"text-2xs"}
     menuLinks={[
       {
         title: "Some longer links",

package/src/headers/SiteHeader.tsx

@@ -29,6 +29,7 @@ export interface SiteHeaderProps {
   logoClass?: string
   logoSrc: string
   logoWidth?: LogoWidth
+  mainContentId?: string
   menuItemClassName?: string
   menuLinks: MenuLink[]
   mobileDrawer?: boolean
@@ -42,6 +43,7 @@ export interface SiteHeaderProps {
     close?: string
     logoAriaLable?: string
     menu?: string
+    skipToMainContent?: string
   }
 }
 
@@ -303,7 +305,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
             if (menuLink.href) {
               return (
                 <LinkComponent
-                  className={`navbar-link ${props.menuItemClassName && props.menuItemClassName}`}
+                  className={`navbar-link ${props.menuItemClassName ?? ""}`}
                   href={menuLink.href}
                   key={`${menuLink.title}-${index}`}
                   data-test-id={`${menuLink.title}`}
@@ -314,9 +316,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
             } else {
               return (
                 <button
-                  className={`navbar-link ${
-                    props.menuItemClassName && props.menuItemClassName
-                  } desktop-header-button`}
+                  className={`navbar-link ${props.menuItemClassName ?? ""} desktop-header-button`}
                   tabIndex={0}
                   onClick={() => {
                     menuAction(menuLink.onClick)
@@ -382,7 +382,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
               }
             }}
           >
-            <div className={"pr-2 text-tiny text-primary uppercase"}>
+            <div className={"pr-2 text-sm text-primary uppercase"}>
               {props.strings?.menu ?? t("t.menu")}
             </div>
             <Icon
@@ -418,15 +418,15 @@ const SiteHeader = (props: SiteHeaderProps) => {
     return (
       <div className={`navbar-logo ${getLogoWidthClass()}`}>
         <LinkComponent
-          className={`logo ${props.logoClass && props.logoClass} ${
-            props.logoWidth && "navbar-custom-width"
+          className={`logo ${props.logoClass ?? ""} ${
+            (props.logoWidth && "navbar-custom-width") ?? ""
           }`}
           href={props.homeURL}
           aria-label={props.strings?.logoAriaLable ?? t("t.homePage")}
         >
-          <div className={`logo-content ${props.imageOnly && "navbar-image-only-container"}`}>
+          <div className={`logo-content ${props.imageOnly ? "navbar-image-only-container" : ""}`}>
             <img
-              className={`logo__image ${props.imageOnly && "navbar-image-only"}`}
+              className={`logo__image ${props.imageOnly ? "navbar-image-only" : ""}`}
               src={props.logoSrc}
               alt={"Site logo"}
             />
@@ -439,11 +439,16 @@ const SiteHeader = (props: SiteHeaderProps) => {
 
   return (
     <header className={"site-header"}>
+      {props.mainContentId && (
+        <a className="skip-link" href={`#${props.mainContentId}`}>
+          {props.strings?.skipToMainContent}
+        </a>
+      )}
       {props.languages && (
         <LanguageNav ariaLabel={props.languageNavLabel} languages={props.languages} />
       )}
 
-      <div className={`navbar-notice ${!props.noticeMobile && `navbar-notice-hide`}`}>
+      <div className={`navbar-notice ${!props.noticeMobile ? `navbar-notice-hide` : ""}`}>
         <div className="navbar-notice__text">{props.notice ?? ""}</div>
       </div>
 

package/src/headers/StepHeader.docs.mdx

@@ -25,14 +25,14 @@ The step header component is used to quickly describe progress in a multi-step p
 
 You can apply CSS variables to the `.step-header` selector to customize the appearance of the component.
 
-| Name                    | Type  | Description                                                        | Default                      |
-| ----------------------- | ----- | ------------------------------------------------------------------ | ---------------------------- |
-| `--number-color`        | Color | The color of the current step number                               | `--bloom-color-white`        |
-| `--circle-color`        | Color | The background color of the number circle                          | `--bloom-color-primary`      |
-| `--circle-desktop-size` | Size  | The diameter of the number circle on desktop                       | `--bloom-s8`                 |
-| `--circle-mobile-size`  | Size  | The diameter of the number circle on mobile                        | `--bloom-s6`                 |
-| `-font-desktop-size`    | Size  | The font size of the numbers and text on desktop                   | `--bloom-font-size-base-alt` |
-| `--font-mobile-size`    | Size  | The font size of the numbers and text on mobile                    | `--bloom-font-size-base`     |
-| `-circle-x-padding`     | Size  | The horizontal padding between current step number and circle edge | `--bloom-s0_5`               |
-| `--title-spacing`       | Size  | The padding between elements of the header                         | `--bloom-s1_5`               |
-| `--label-font-weight`   | Size  | The font weight of the current step label                          | `600`                        |
+| Name                    | Type  | Description                                                        | Default                  |
+| ----------------------- | ----- | ------------------------------------------------------------------ | ------------------------ |
+| `--number-color`        | Color | The color of the current step number                               | `--bloom-color-white`    |
+| `--circle-color`        | Color | The background color of the number circle                          | `--bloom-color-primary`  |
+| `--circle-desktop-size` | Size  | The diameter of the number circle on desktop                       | `--bloom-s8`             |
+| `--circle-mobile-size`  | Size  | The diameter of the number circle on mobile                        | `--bloom-s6`             |
+| `-font-desktop-size`    | Size  | The font size of the numbers and text on desktop                   | `--bloom-font-size-lg`   |
+| `--font-mobile-size`    | Size  | The font size of the numbers and text on mobile                    | `--bloom-font-size-base` |
+| `-circle-x-padding`     | Size  | The horizontal padding between current step number and circle edge | `--bloom-s0_5`           |
+| `--title-spacing`       | Size  | The padding between elements of the header                         | `--bloom-s1_5`           |
+| `--label-font-weight`   | Size  | The font weight of the current step label                          | `600`                    |

package/src/headers/StepHeader.scss

@@ -3,7 +3,7 @@
   --circle-color: var(--bloom-color-primary);
   --circle-desktop-size: var(--bloom-s8);
   --circle-mobile-size: var(--bloom-s6);
-  --font-desktop-size: var(--bloom-font-size-base-alt);
+  --font-desktop-size: var(--bloom-font-size-lg);
   --font-mobile-size: var(--bloom-font-size-base);
   --circle-x-padding: var(--bloom-s0_5);
   --title-spacing: var(--bloom-s1_5);

package/src/helpers/preferences.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { UseFormMethods } from "react-hook-form";
+import React from "react"
+import { UseFormMethods } from "react-hook-form"
 import {
   t,
   GridSection,
@@ -8,17 +8,17 @@ import {
   Field,
   Select,
   resolveObject,
-} from "../..";
+} from "../../"
 
 type FormAddressProps = {
-  subtitle: string;
-  dataKey: string;
-  enableMailCheckbox?: boolean;
-  register: UseFormMethods["register"];
-  errors?: UseFormMethods["errors"];
-  required?: boolean;
-  stateKeys: string[];
-};
+  subtitle: string
+  dataKey: string
+  enableMailCheckbox?: boolean
+  register: UseFormMethods["register"]
+  errors?: UseFormMethods["errors"]
+  required?: boolean
+  stateKeys: string[]
+}
 
 export const FormAddress = ({
   subtitle,
@@ -121,5 +121,5 @@ export const FormAddress = ({
         )}
       </GridSection>
     </>
-  );
-};
+  )
+}