@bloom-housing/ui-components 7.3.2 → 8.0.0

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;

package/src/headers/SiteHeader.stories.tsx

@@ -280,7 +280,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 +346,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

@@ -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

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>
     </>
-  );
-};
+  )
+}

package/src/lists/PreferencesList.scss

@@ -4,7 +4,7 @@
   --ordinal-border-width: var(--bloom-border-2);
   --ordinal-border-color: var(--bloom-color-primary);
   --ordinal-color: var(--bloom-color-primary);
-  --ordinal-font-size: var(--bloom-font-size-sm);
+  --ordinal-font-size: var(--bloom-font-size-xs);
   --ordinal-padding: var(--bloom-s2);
   --ordinal-margin-right: var(--bloom-s2);
   --subtitle-color: var(--bloom-color-gray-750);
@@ -13,7 +13,7 @@
 
 .preferences-list__item {
   .info-card__title {
-    --title-font-size: var(--bloom-font-size-sm);
+    --title-font-size: var(--bloom-font-size-xs);
 
     margin-bottom: 0px;
     color: var(--info-card-title-color);
@@ -71,7 +71,7 @@
 
 .preferences-list__subtitle {
   color: var(--subtitle-color);
-  font-size: var(--bloom-font-size-tiny);
+  font-size: var(--bloom-font-size-sm);
 
   @media (max-width: $screen-md) {
     margin-left: 0px;
@@ -80,12 +80,12 @@
 
 .preferences-list__description {
   color: var(--description-color);
-  font-size: var(--bloom-font-size-sm);
+  font-size: var(--bloom-font-size-xs);
   margin-top: var(--bloom-s3);
 }
 
 .preferences-list__links {
-  font-size: var(--bloom-font-size-tiny);
+  font-size: var(--bloom-font-size-sm);
   margin-top: var(--bloom-s3);
   span {
     margin-right: var(--bloom-s4);

package/src/navigation/Breadcrumbs.scss

@@ -7,14 +7,14 @@
   }
 
   li {
-    @apply text-sm;
+    @apply text-xs;
     @apply flex;
     @apply tracking-wider;
     @apply self-center;
 
     &:not(:last-child)::after {
       content: "\203A";
-      @apply text-lg;
+      @apply text-xl;
       @apply px-2;
       line-height: 1.4rem;
     }

package/src/navigation/FooterNav.scss

@@ -1,5 +1,5 @@
 .footer-sock {
-  @apply bg-gray-950;
+  @apply bg-gray-900;
   @apply py-8;
   @apply px-2;
 

package/src/navigation/ProgressNav.docs.mdx

@@ -33,7 +33,7 @@ You can apply CSS variables to the `.progrss-nav` selector to customize the appe
 | `--dot-label-padding-top`     | Size  | The padding-top of each dot step label      | `--bloom-s4`                   |
 | `--dot-label-padding-left`    | Size  | The padding-left of each dot step label     | `--bloom-s1`                   |
 | `--dot-font-size-desktop`     | Size  | The font size of dot step labels on desktop | `--bloom-font-size-base`       |
-| `--dot-font-size-mobile`      | Size  | The font size of dot step labels on mobile  | `--bloom-font-size-2xs`        |
+| `--dot-font-size-mobile`      | Size  | The font size of dot step labels on mobile  | `--bloom-font-size-3xs`        |
 | `--dot-line-color`            | Color | The color of the dot connecting line        | `--bloom-color-gray-450`       |
 | `--dot-active-font-weight`    | Size  | The font weight of active dot step label    | `600`                          |
 | `--dot-text-transform`        | Size  | The capitalization of dot step label        | `capitalize`                   |

package/src/navigation/ProgressNav.scss

@@ -2,7 +2,7 @@
   --completed-step-color: var(--bloom-color-gray-850);
   --completed-step-font-color: var(--bloom-color-gray-850);
   --active-step-color: var(--bloom-color-primary);
-  --active-step-font-color: var(--bloom-color-gray-900);
+  --active-step-font-color: var(--bloom-color-gray-950);
   --future-step-color: var(--bloom-color-gray-450);
   --future-step-font-color: var(--bloom-text-color);
 
@@ -11,7 +11,7 @@
   --dot-label-padding-top: var(--bloom-s4);
   --dot-label-padding-left: var(--bloom-s1);
   --dot-font-size-desktop: var(--bloom-font-size-base);
-  --dot-font-size-mobile: var(--bloom-font-size-2xs);
+  --dot-font-size-mobile: var(--bloom-font-size-3xs);
   --dot-line-color: var(--bloom-color-gray-450);
   --dot-active-font-weight: bold;
   --dot-text-transform: capitalize;

package/src/navigation/SideNav.docs.mdx

@@ -28,7 +28,7 @@ You can apply CSS variables to the `.side-nav` selector to customize the appeara
 | `--current-padding-inline`  | Size                                                | The space on either side of a link                                     | `--bloom-s6`                                              |
 | `--current-padding-block`   | Size                                                | The space above and below a link                                       | `--bloom-s4`                                              |
 | `--link-color`              | <Swatch colorVar="--bloom-color-gray-700" />        | Default color of links                                                 | `--bloom-color-gray-700`                                  |
-| `--current-selection-color` | <Swatch colorVar="--bloom-color-gray-900" />        | Color of the current link and parent of the current link if applicable | `--bloom-color-gray-900`                                  |
-| `--selection-parent-accent` | <Swatch colorVar="--bloom-color-gray-450" />        | Color of the current link's parent's border accent                     | `--bloom-color-gray-900`                                  |
+| `--current-selection-color` | <Swatch colorVar="--bloom-color-gray-950" />        | Color of the current link and parent of the current link if applicable | `--bloom-color-gray-950`                                  |
+| `--selection-parent-accent` | <Swatch colorVar="--bloom-color-gray-450" />        | Color of the current link's parent's border accent                     | `--bloom-color-gray-450`                                  |
 | `--hover-link-color`        | <Swatch colorVar="--bloom-color-primary" />         | Link text color when you hover over it or tab to it                    | `--bloom-color-primary`                                   |
 | `--hover-background-color`  | <Swatch colorVar="--bloom-color-primary-lighter" /> | Link background color when you hover over it or tab to it              | `--bloom-color-primary-lighter`                           |

package/src/navigation/SideNav.scss

@@ -4,7 +4,7 @@
   --current-padding-inline: var(--bloom-s6);
   --current-padding-block: var(--bloom-s4);
   --link-color: var(--bloom-color-gray-700);
-  --current-selection-color: var(--bloom-color-gray-900);
+  --current-selection-color: var(--bloom-color-gray-950);
   --selection-parent-accent: var(--bloom-color-gray-450);
   --hover-link-color: var(--bloom-color-primary);
   --hover-background-color: var(--bloom-color-primary-lighter);

package/src/navigation/TabNav.scss

@@ -3,7 +3,7 @@
   @apply items-center;
   @apply font-alt-sans;
   @apply uppercase;
-  @apply text-sm;
+  @apply text-xs;
   @apply font-semibold;
   @apply tracking-wider;
 }
@@ -23,18 +23,18 @@
     }
 
     &:hover {
-      @apply text-gray-900;
+      @apply text-gray-950;
       @apply border-gray-450;
     }
 
     &.is-active {
       @apply border-primary;
-      @apply text-gray-900;
+      @apply text-gray-950;
     }
 
     .tag {
       @apply ml-2;
-      @apply text-xs;
+      @apply text-2xs;
       line-height: 1rem;
     }
   }

package/src/navigation/Tabs.scss

@@ -6,7 +6,7 @@
     }
     @apply items-center;
     @apply font-alt-sans;
-    @apply text-sm;
+    @apply text-xs;
   }
 }