@bloom-housing/ui-components 7.3.1 → 8.0.0

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;
   }
 }
 

package/src/notifications/AlertBox.docs.mdx

@@ -34,8 +34,8 @@ You can apply CSS variables to the `.alert-box` selector to customize the appear
 | `--success-invert-background-color` | Color       | Success invert theme background color | `--bloom-color-success`       |
 | `--warn-background-color`           | Color       | Warn theme background color           | `--bloom-color-warn-light`    |
 | `--warn-invert-background-color`    | Color       | Warn invert theme background color    | `--bloom-color-warn`          |
-| `--text-color`                      | Color       | Content text color                    | `--bloom-color-gray-900`      |
-| `--close-icon-color`                | Color       | Close icon color                      | `--bloom-color-gray-900`      |
+| `--text-color`                      | Color       | Content text color                    | `--bloom-color-gray-950`      |
+| `--close-icon-color`                | Color       | Close icon color                      | `--bloom-color-gray-950`      |
 | `--font-weight`                     | Font weight | Content text font weight              | `600`                         |
 | `--max-width`                       | Size        | Max width                             | `--bloom-width-5xl`           |
 | `--line-height`                     | Line height | Content text line height              | `1.375`                       |

package/src/notifications/AlertBox.scss

@@ -10,8 +10,8 @@
   --success-invert-background-color: var(--bloom-color-success);
   --warn-background-color: var(--bloom-color-warn-light);
   --warn-invert-background-color: var(--bloom-color-warn);
-  --text-color: var(--bloom-color-gray-900);
-  --close-icon-color: var(--bloom-color-gray-900);
+  --text-color: var(--bloom-color-gray-950);
+  --close-icon-color: var(--bloom-color-gray-950);
   --font-weight: 500;
   --max-width: var(--bloom-width-5xl);
   --line-height: 1.375;
@@ -91,11 +91,11 @@
 
 .alert-box__body {
   font-weight: var(--font-weight);
-  font-size: var(--bloom-font-size-tiny);
+  font-size: var(--bloom-font-size-sm);
 }
 
 .alert-box__close {
-  font-size: var(--bloom-font-size-3xl);
+  font-size: var(--bloom-font-size-2xl);
   right: var(--horizontal-padding);
   margin-left: var(--bloom-s3);
   padding: 0;

package/src/notifications/AlertNotice.scss

@@ -1,6 +1,6 @@
 // secondary alert messaging
 .alert-notice {
-  @apply text-sm;
+  @apply text-xs;
   @apply py-4;
   @apply px-8;
   @apply bg-gray-200;
@@ -33,12 +33,12 @@
   }
 
   p {
-    @apply text-sm;
+    @apply text-xs;
   }
 }
 
 .alert-notice__title {
-  @apply text-sm;
+  @apply text-xs;
   @apply mb-3;
   @apply font-semibold;
 
@@ -54,5 +54,5 @@
 }
 
 .alert-notice__body {
-  @apply text-sm;
+  @apply text-xs;
 }

package/src/notifications/ApplicationStatus.stories.tsx

@@ -1,37 +1,33 @@
-import * as React from "react";
-import dayjs from "dayjs";
-import advancedFormat from "dayjs/plugin/advancedFormat";
-import { ApplicationStatus } from "./ApplicationStatus";
-import { ApplicationStatusType } from "../global/ApplicationStatusType";
-import { t } from "../helpers/translator";
-import Archer from "../../__tests__/fixtures/archer.json";
-import { text, withKnobs } from "@storybook/addon-knobs";
-import formatDateTime from "../helpers/DateFormat";
-
-dayjs.extend(advancedFormat);
+import * as React from "react"
+import dayjs from "dayjs"
+import advancedFormat from "dayjs/plugin/advancedFormat"
+import { ApplicationStatus } from "./ApplicationStatus"
+import { ApplicationStatusType } from "../global/ApplicationStatusType"
+import { t } from "../helpers/translator"
+import Archer from "../../__tests__/fixtures/archer.json"
+import { text, withKnobs } from "@storybook/addon-knobs"
+import formatDateTime from "../helpers/DateFormat"
+
+dayjs.extend(advancedFormat)
 
 export default {
   component: ApplicationStatus,
   title: "Notifications/Application Status",
   decorators: [(storyFn: any) => <div>{storyFn()}</div>, withKnobs],
-};
+}
 
-const listing = Object.assign({}, Archer) as any;
-listing.applicationOpenDate = "";
-let days = 10;
-listing.applicationDueDate = dayjs().add(days, "days").format();
+const listing = Object.assign({}, Archer) as any
+listing.applicationOpenDate = ""
+let days = 10
+listing.applicationDueDate = dayjs().add(days, "days").format()
 
 export const dueSoonAndVivid = () => (
   <ApplicationStatus
-    content={
-      t("listings.applicationDeadline") +
-      ": " +
-      formatDateTime(listing.applicationDueDate)
-    }
+    content={t("listings.applicationDeadline") + ": " + formatDateTime(listing.applicationDueDate)}
     status={ApplicationStatusType.Open}
     vivid
   />
-);
+)
 
 export const withSubContent = () => (
   <ApplicationStatus
@@ -40,115 +36,93 @@ export const withSubContent = () => (
     status={ApplicationStatusType.Open}
     vivid
   />
-);
+)
 
 export const dueSoonWithTime = () => (
   <ApplicationStatus
     content={
-      t("listings.applicationDeadline") +
-      ": " +
-      formatDateTime(listing.applicationDueDate, true)
+      t("listings.applicationDeadline") + ": " + formatDateTime(listing.applicationDueDate, true)
     }
     status={ApplicationStatusType.Open}
   />
-);
+)
 
-const listingPast = Object.assign({}, Archer) as any;
-listingPast.applicationOpenDate = "";
-days = 10;
+const listingPast = Object.assign({}, Archer) as any
+listingPast.applicationOpenDate = ""
+days = 10
 
 export const pastDue = () => (
   <ApplicationStatus
     content={
-      t("listings.applicationsClosed") +
-      ": " +
-      formatDateTime(listingPast.applicationDueDate)
+      t("listings.applicationsClosed") + ": " + formatDateTime(listingPast.applicationDueDate)
     }
     status={ApplicationStatusType.Closed}
   />
-);
+)
 
-listingPast.applicationDueDate = dayjs().subtract(days, "days").format();
+listingPast.applicationDueDate = dayjs().subtract(days, "days").format()
 
 export const pastDueAndVivid = () => (
   <ApplicationStatus
     content={
-      t("listings.applicationsClosed") +
-      ": " +
-      formatDateTime(listingPast.applicationDueDate)
+      t("listings.applicationsClosed") + ": " + formatDateTime(listingPast.applicationDueDate)
     }
     status={ApplicationStatusType.Closed}
     vivid={true}
   />
-);
+)
 
 export const pastDueWithStyles = () => (
   <ApplicationStatus
     className={text("className", "place-content-center")}
     content={
-      t("listings.applicationsClosed") +
-      ": " +
-      formatDateTime(listingPast.applicationDueDate)
+      t("listings.applicationsClosed") + ": " + formatDateTime(listingPast.applicationDueDate)
     }
     status={ApplicationStatusType.Closed}
   />
-);
+)
 
 export const pastDueWithIconColor = () => (
   <ApplicationStatus
     content={
-      t("listings.applicationsClosed") +
-      ": " +
-      formatDateTime(listingPast.applicationDueDate)
+      t("listings.applicationsClosed") + ": " + formatDateTime(listingPast.applicationDueDate)
     }
     iconColor={text("Icon Color", "#ff0000")}
     status={ApplicationStatusType.Closed}
   />
-);
+)
 
-const listing2 = Object.assign({}, Archer) as any;
-days = 10;
-listing2.applicationDueDate = dayjs().add(days, "days").format();
+const listing2 = Object.assign({}, Archer) as any
+days = 10
+listing2.applicationDueDate = dayjs().add(days, "days").format()
 
 export const openSoon = () => (
   <ApplicationStatus
     content={
-      t("listings.applicationOpenPeriod") +
-      ": " +
-      formatDateTime(listing2.applicationDueDate)
+      t("listings.applicationOpenPeriod") + ": " + formatDateTime(listing2.applicationDueDate)
     }
     status={ApplicationStatusType.Open}
   />
-);
+)
 
-const listing3 = Object.assign({}, Archer) as any;
-days = 10;
-listing3.applicationDueDate = dayjs().add(days, "days").format();
+const listing3 = Object.assign({}, Archer) as any
+days = 10
+listing3.applicationDueDate = dayjs().add(days, "days").format()
 
 export const openedAlready = () => (
   <ApplicationStatus
-    content={
-      t("listings.applicationDeadline") +
-      ": " +
-      formatDateTime(listing3.applicationDueDate)
-    }
+    content={t("listings.applicationDeadline") + ": " + formatDateTime(listing3.applicationDueDate)}
     status={ApplicationStatusType.Open}
   />
-);
+)
 
 export const openedWithNoDue = () => (
-  <ApplicationStatus
-    content={t("listings.applicationFCFS")}
-    status={ApplicationStatusType.Open}
-  />
-);
+  <ApplicationStatus content={t("listings.applicationFCFS")} status={ApplicationStatusType.Open} />
+)
 
 export const openedWithFCFS = () => (
-  <ApplicationStatus
-    content={t("listings.applicationFCFS")}
-    status={ApplicationStatusType.Open}
-  />
-);
+  <ApplicationStatus content={t("listings.applicationFCFS")} status={ApplicationStatusType.Open} />
+)
 
 export const openedWithFCFSVivid = () => (
   <ApplicationStatus
@@ -156,7 +130,7 @@ export const openedWithFCFSVivid = () => (
     status={ApplicationStatusType.Open}
     vivid
   />
-);
+)
 
 export const postLottery = () => (
   <ApplicationStatus
@@ -164,7 +138,7 @@ export const postLottery = () => (
     status={ApplicationStatusType.PostLottery}
     withIcon={false}
   />
-);
+)
 
 export const matched = () => (
   <ApplicationStatus
@@ -173,4 +147,4 @@ export const matched = () => (
     withIcon={true}
     iconType={"check"}
   />
-);
+)

package/src/notifications/ApplicationStatus.tsx

@@ -29,7 +29,7 @@ const ApplicationStatus = (props: ApplicationStatusProps) => {
 
   // determine styling
   let textColor = vivid ? "text-white" : "text-gray-800"
-  const textSize = vivid ? "text-xs" : "text-sm"
+  const textSize = vivid ? "text-2xs" : "text-xs"
 
   const icon = withIcon && (
     <Icon
@@ -51,7 +51,7 @@ const ApplicationStatus = (props: ApplicationStatusProps) => {
       textColor = "text-white"
       break
     case ApplicationStatusType.Matched:
-      bgColor = "bg-green-700"
+      bgColor = "bg-green-500"
       textColor = "text-white"
       break
     default:

package/src/notifications/StatusAside.scss

@@ -6,6 +6,6 @@
 
 .status-aside__title {
   @apply font-alt-sans;
-  @apply text-lg;
+  @apply text-xl;
   @apply pt-4;
 }

package/src/notifications/StatusMessage.scss

@@ -2,7 +2,7 @@
   @apply flex;
   @apply flex-col;
   @apply py-4;
-  @apply text-sm;
+  @apply text-xs;
   @apply text-gray-800;
   @apply border-b;
 
@@ -21,5 +21,5 @@
 }
 
 .status-message__note {
-  @apply text-sm;
+  @apply text-xs;
 }

package/src/overlays/Modal.docs.mdx

@@ -23,12 +23,12 @@ You can apply CSS variables to the `.modal` selector to customize the appearance
 
 | Name                        | Type               | Description                     | Default                                                   |
 | --------------------------- | ------------------ | ------------------------------- | --------------------------------------------------------- |
-| `--title-color`             | Color              | Title text color                | <Swatch colorVar="--bloom-color-gray-900" />              |
-| `--title-font-size`         | Size               | Title text size                 | `--bloom-font-size-base-alt`                              |
+| `--title-color`             | Color              | Title text color                | <Swatch colorVar="--bloom-color-gray-950" />              |
+| `--title-font-size`         | Size               | Title text size                 | `--bloom-font-size-lg`                                    |
 | `--title-font-family`       | Font               | Title font family               | `--bloom-font-sans`                                       |
 | `--content-font-color`      | Color              | Title text color                | <Swatch colorVar="--bloom-color-gray-700" />              |
 | `--max-width`               | Size               | Modal max width                 | `--bloom-width-5xl`                                       |
-| `--desktop-min-width`       | Size               | Modal min width on desktop      | `--bloom-width-lg`                                        |
+| `--desktop-min-width`       | Size               | Modal min width on desktop      | `--bloom-width-xl`                                        |
 | `--footer-background-color` | Color              | Footer background color         | <Swatch colorVar="--bloom-color-primary-lighter" />       |
 | `--border-radius`           | Size               | Border radius of modal, content | `--bloom-rounded`                                         |
 | `--background-color`        | Color              | Background color of modal       | <Swatch colorVar="--bloom-color-white" />                 |

package/src/overlays/Modal.scss

@@ -1,12 +1,12 @@
 .modal {
   /* Component Variables */
-  --title-color: var(--bloom-color-gray-900);
-  --title-font-size: var(--bloom-font-size-base-alt);
+  --title-color: var(--bloom-color-gray-950);
+  --title-font-size: var(--bloom-font-size-lg);
   --title-font-family: var(--bloom-font-sans);
   --content-font-color: var(--bloom-color-gray-700);
   --content-padding: var(--bloom-s6);
   --max-width: var(--bloom-width-5xl);
-  --desktop-min-width: var(--bloom-width-lg);
+  --desktop-min-width: var(--bloom-width-xl);
   --footer-background-color: var(--bloom-color-primary-lighter);
   --border-radius: var(--bloom-rounded);
   --mobile-border-radius: 0;

package/src/overlays/Overlay.scss

@@ -1,7 +1,7 @@
 @import "../global/mixins.scss";
 
 .fixed-overlay {
-  --overlay-background-color: var(--bloom-color-gray-900);
+  --overlay-background-color: var(--bloom-color-gray-950);
   --overlay-opacity: 0.5;
 
   position: fixed;

package/src/page_components/ApplicationTimeline.scss

@@ -27,7 +27,7 @@
   }
 
   .progress-nav__dot-item.is-active::before {
-    @apply bg-green-700;
+    @apply bg-green-500;
   }
 
   .progress-nav__dot-item::after {