@bloom-housing/ui-components 7.3.2 → 8.0.0

package/src/blocks/Card.docs.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Story, ArgsTable } from "@storybook/addon-docs";
-import { Swatch } from "../prototypes/Swatch";
-import { Card } from "./Card";
+import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { Swatch } from "../prototypes/Swatch"
+import { Card } from "./Card"
 
 # Card
 

package/src/blocks/DashBlocks.scss

@@ -27,7 +27,7 @@
   @apply p-4;
   @apply pt-8;
   @apply pb-8;
-  @apply text-tiny;
+  @apply text-sm;
 
   @screen md {
     @apply rounded-lg;

package/src/blocks/FormCard.scss

@@ -32,7 +32,7 @@
   @apply border-t-4;
   @apply border-primary;
   @apply leading-tight;
-  @apply text-3xl;
+  @apply text-2xl;
 
   @screen md {
     @apply mx-auto;
@@ -115,7 +115,7 @@
 }
 
 .form-card__header_title {
-  @apply text-lg;
+  @apply text-xl;
   @apply font-alt-sans;
   @apply font-bold;
   @apply uppercase;
@@ -193,7 +193,7 @@
   @apply tracking-widest;
   @apply font-semibold;
   @apply font-sans;
-  @apply text-tiny;
+  @apply text-sm;
   @apply mb-2;
   @apply inline-block;
 }

package/src/blocks/HousingCounselor.tsx

@@ -27,8 +27,8 @@ const LanguageLabel = (language: string) => {
 const HousingCounselor = (props: HousingCounselorProps) => {
   return (
     <div className="resource-item text-base">
-      <h3 className="font-sans text-lg">{props.name}</h3>
-      <p className="text-sm text-gray-800 pb-2">
+      <h3 className="font-sans text-xl">{props.name}</h3>
+      <p className="text-xs text-gray-800 pb-2">
         {props.strings?.languageServices ?? t("housingCounselors.languageServices")}
         {props.languages.map((language) => LanguageLabel(language))}
       </p>

package/src/blocks/ImageCard.scss

@@ -100,7 +100,7 @@
       justify-content: center;
 
       @media (max-width: $screen-sm) {
-        font-size: var(--bloom-font-size-sm);
+        font-size: var(--bloom-font-size-xs);
         line-height: var(--bloom-line-height-none);
       }
     }

package/src/blocks/InfoCard.scss

@@ -5,7 +5,7 @@
   --background-color: var(--bloom-color-white);
   --background-color-lighter: var(--bloom-color-primary-lighter);
   --title-color: var(--bloom-color-gray-800);
-  --title-font-size: var(--bloom-font-size-sm);
+  --title-font-size: var(--bloom-font-size-xs);
   --title-font-size-lighter: var(--bloom-font-size-base);
   --title-font-family: var(--bloom-font-sans);
   --title-text-transform: uppercase;

package/src/blocks/InfoCard.tsx

@@ -28,7 +28,7 @@ const InfoCard = (props: InfoCardProps) => {
         ) : (
           <h3 className="info-card__title">{props.title}</h3>
         )}
-        {props.subtitle && <span className={"text-sm text-gray-700"}>{props.subtitle}</span>}
+        {props.subtitle && <span className={"text-xs text-gray-700"}>{props.subtitle}</span>}
       </div>
       {typeof props.children == "string" ? (
         <div className="markdown">

package/src/blocks/MediaCard.docs.mdx

@@ -30,7 +30,7 @@ You can apply CSS variables to the `.media-card` selector to customize the appea
 | `--title-font-size`     | Size  | The font size of media title                             | `--bloom-font-size-base`                        |
 | `--title-font-family`   | Size  | The font family of the media title                       | `--bloom-font-sans`                             |
 | `--title-font-spacing`  | Size  | The letter spacing of media title                        | `--bloom-letter-spacing-wide`                   |
-| `--subtitle-font-size`  | Size  | The font size of the media subtitle                      | `--bloom-font-size-tiny`                        |
+| `--subtitle-font-size`  | Size  | The font size of the media subtitle                      | `--bloom-font-size-sm`                          |
 | `--content-bg-color`    | Color | The background color of card body                        | `--bloom-color-gray-200`                        |
 | `--card-border`         | Size  | The card border settings (thickness, border type, color) | `--bloom-border-1 solid --bloom-color-gray-450` |
 | `--card-border-rounded` | Size  | The card corner radius                                   | `--bloom-rounded`                               |

package/src/blocks/MediaCard.scss

@@ -4,7 +4,7 @@
   --title-font-size: var(--bloom-font-size-base);
   --title-font-family: var(--bloom-font-sans);
   --title-font-spacing: var(--bloom-letter-spacing-wide);
-  --subtitle-font-size: var(--bloom-font-size-tiny);
+  --subtitle-font-size: var(--bloom-font-size-sm);
   --content-bg-color: var(--bloom-color-gray-200);
   --card-border: var(--bloom-border-1) solid var(--bloom-color-gray-450);
   --card-border-rounded: var(--bloom-rounded);

package/src/blocks/StandardCard.docs.mdx

@@ -9,7 +9,6 @@ The standard card component displays a title with a child element (e.g table) an
   <Story id="blocks-standard-card" />
 </Canvas>
 
-
 ## Component Properties
 
 <ArgsTable of={StandardCard} />
@@ -22,13 +21,13 @@ The standard card component displays a title with a child element (e.g table) an
 
 You can apply CSS variables to the `.standard-card` selector to customize the appearance of the component.
 
-| Name                         | Type  | Description                                               | Default                         |
-| ---------------------------- | ----- | --------------------------------------------------------- | ------------------------------- |
-| `--font-family`              | Font  | Title font family                                         | `--bloom-font-alt-sans`         |
-| `--border-radius`            | Size  | Card border radius                                        | `--bloom-rounded-lg`            |
-| `--border-width`             | Size  | Card border width                                         | `--bloom-border-1`              |
-| `--border-color`             | Size  | Card border color                                         | `--bloom-color-gray-500`        |
-| `--title-color`              | Color | Card title color                                          | `--bloom-color-gray-900`        |
-| `--background-color`         | Size  | Card background color                                     | `--bloom-color-white`           |
-| `--blank-color`              | Color | Empty state text color                                    | `--bloom-color-gray-750`        |
-| `--blank-background`         | Color | Empty state background color                              | `--bloom-color-gray-200`        |
+| Name                 | Type  | Description                  | Default                  |
+| -------------------- | ----- | ---------------------------- | ------------------------ |
+| `--font-family`      | Font  | Title font family            | `--bloom-font-alt-sans`  |
+| `--border-radius`    | Size  | Card border radius           | `--bloom-rounded-lg`     |
+| `--border-width`     | Size  | Card border width            | `--bloom-border-1`       |
+| `--border-color`     | Size  | Card border color            | `--bloom-color-gray-500` |
+| `--title-color`      | Color | Card title color             | `--bloom-color-gray-950` |
+| `--background-color` | Size  | Card background color        | `--bloom-color-white`    |
+| `--blank-color`      | Color | Empty state text color       | `--bloom-color-gray-750` |
+| `--blank-background` | Color | Empty state background color | `--bloom-color-gray-200` |

package/src/blocks/StandardCard.scss

@@ -3,7 +3,7 @@
   --border-radius: var(--bloom-rounded-lg);
   --border-width: var(--bloom-border-1);
   --border-color: var(--bloom-color-gray-500);
-  --title-color: var(--bloom-color-gray-900);
+  --title-color: var(--bloom-color-gray-950);
   --background-color: var(--bloom-color-white);
   --blank-color: var(--bloom-text-color);
   --blank-background: var(--bloom-color-gray-200);

package/src/blocks/StandardCard.stories.tsx

@@ -47,9 +47,9 @@ export const styleOverrides = () => {
       --font-family: var(--bloom-font-sans);
       --border-radius: var(--bloom-rounded-md);
       --border-width: var(--bloom-border-4);
-      --border-color: var(--bloom-color-blue-600);
-      --title-color: var(--bloom-color-blue-600);
-      --background-color: var(--bloom-color-blue-200);
+      --border-color: var(--bloom-color-blue-500);
+      --title-color: var(--bloom-color-blue-500);
+      --background-color: var(--bloom-color-blue-100);
       --blank-color: var(--bloom-color-black);
       --blank-background: var(--bloom-color-gray-400);
     }

package/src/blocks/StatusItem.scss

@@ -117,7 +117,7 @@
 }
 
 .status-item__date {
-  @apply text-sm;
+  @apply text-xs;
 }
 
 .status-item__address {
@@ -125,12 +125,12 @@
 }
 
 .status-item__confirm-text {
-  @apply text-tiny;
+  @apply text-sm;
   @apply mb-4;
 }
 
 .status-item__confirm-number {
-  @apply text-lg;
+  @apply text-xl;
 }
 
 .status-item__address {

package/src/blocks/ViewItem.scss

@@ -28,7 +28,7 @@
 .view-item__label {
   @apply text-gray-800;
   @apply font-sans;
-  @apply text-tiny;
+  @apply text-sm;
   @apply block;
 }
 
@@ -54,6 +54,6 @@
 .view-item__helper {
   @apply text-gray-750;
   @apply font-sans;
-  @apply text-tiny;
+  @apply text-sm;
   @apply block;
 }

package/src/blocks/ViewItem.tsx

@@ -25,7 +25,7 @@ const ViewItem = (props: ViewItemProps) => {
   return (
     <div id={props.id} className={viewItemClasses.join(" ")} data-test-id={props.dataTestId}>
       {props.label && (
-        <span className={`view-item__label ${props.error ? "text-alert text-tiny" : ""}`}>
+        <span className={`view-item__label ${props.error ? "text-alert text-sm" : ""}`}>
           {props.label}
         </span>
       )}

package/src/documentation/Utilities.scss

@@ -3,7 +3,7 @@
   table-layout: auto;
   white-space: nowrap;
   margin-top: var(--bloom-s8);
-  font-size: var(--bloom-font-size-tiny);
+  font-size: var(--bloom-font-size-sm);
 
   tr {
     padding: var(--bloom-s4);

package/src/footers/ExygyFooter.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 
 const ExygyFooter = () => (
-  <span className="text-sm tracking-wider">
+  <span className="text-xs tracking-wider">
     made with ❤️ by{" "}
     <a href="http://exygy.com" target="_blank" aria-label="Opens in new window">
       exygy

package/src/forms/Dropzone.scss

@@ -20,5 +20,5 @@
   margin-block: var(--bloom-s2) var(--bloom-s4);
   color: var(--bloom-color-gray-700);
   font-family: var(--bloom-font-alt-sans);
-  font-size: var(--bloom-font-size-sm);
+  font-size: var(--bloom-font-size-xs);
 }

package/src/forms/MultiSelectField.scss

@@ -73,7 +73,7 @@
   background: var(--list-background-color);
   border: 1px solid var(--bloom-color-gray-700);
   border-radius: var(--bloom-rounded-sm);
-  font-size: var(--bloom-font-size-tiny);
+  font-size: var(--bloom-font-size-sm);
 }
 
 .multi-select-field__list--has-results[aria-label]:before {
@@ -81,7 +81,7 @@
   display: block;
   width: 100%;
   padding: var(--bloom-s1) var(--bloom-s2);
-  font-size: var(--bloom-font-size-sm);
+  font-size: var(--bloom-font-size-xs);
   color: var(--bloom-text-color);
   text-align: right;
 }
@@ -108,7 +108,7 @@
 }
 
 .multi-select-field__option:hover {
-  background: var(--bloom-color-blue-200);
+  background: var(--bloom-color-blue-100);
   color: var(--bloom-color-primary);
   margin: 0;
   cursor: pointer;
@@ -144,7 +144,7 @@
   padding-block: var(--bloom-s3);
   padding-inline: var(--bloom-s5) var(--bloom-s10);
   margin: 2px 4px 2px 0;
-  font-size: var(--bloom-font-size-tiny);
+  font-size: var(--bloom-font-size-sm);
   border-radius: var(--bloom-rounded-full);
   word-break: break-word;
   cursor: pointer;

package/src/forms/Textarea.scss

@@ -4,7 +4,7 @@
   @apply border;
   @apply border-gray-500;
   @apply p-2;
-  @apply text-gray-900;
+  @apply text-gray-950;
   @apply bg-gray-200;
   @apply align-top;
   font-size: 1rem;
@@ -24,7 +24,7 @@
 }
 
 .textarea-error-message {
-  @apply text-xs;
+  @apply text-2xs;
   @apply text-alert;
   @apply block;
   @apply leading-5;
@@ -34,7 +34,7 @@
 .textarea-label {
   @apply block;
   @apply pb-2;
-  @apply text-tiny;
+  @apply text-sm;
   @apply text-gray-800;
 }
 

package/src/global/app-css.scss

@@ -12,7 +12,7 @@ html {
 body {
   @apply font-sans;
   @apply bg-white;
-  @apply text-gray-900;
+  @apply text-gray-950;
 }
 
 .-top {

package/src/global/blocks.scss

@@ -1,7 +1,7 @@
 // Box
 .box,
 .block {
-  @apply text-sm;
+  @apply text-xs;
   @apply text-gray-700;
   @apply rounded;
 }

package/src/global/custom_counter.scss

@@ -37,7 +37,7 @@
 }
 
 .custom-counter__title {
-  @apply text-lg;
+  @apply text-xl;
 
   @screen md {
     @apply text-xl;
@@ -46,5 +46,5 @@
 
 .custom-counter__subtitle {
   @apply text-gray-750;
-  @apply text-tiny;
+  @apply text-sm;
 }

package/src/global/forms.scss

@@ -14,7 +14,7 @@
   label,
   .label {
     @apply pb-2;
-    @apply text-tiny;
+    @apply text-sm;
     @apply text-gray-800;
   }
 
@@ -73,7 +73,7 @@
       @apply rounded;
       @apply w-full;
       @apply py-3;
-      @apply text-gray-900;
+      @apply text-gray-950;
       font-family: inherit;
       font-size: 1rem;
       line-height: normal;
@@ -93,7 +93,7 @@
       @apply px-3;
       @apply py-2;
       @apply items-center;
-      @apply text-lg;
+      @apply text-xl;
       background: transparent;
     }
 
@@ -187,12 +187,12 @@
   }
 
   select {
-    @apply text-gray-900;
+    @apply text-gray-950;
     @apply rounded;
     @apply border;
     @apply border-gray-500;
     @apply bg-gray-200;
-    @apply text-gray-900;
+    @apply text-gray-950;
     @apply leading-tight;
     @apply py-2;
     @apply px-3;
@@ -237,7 +237,7 @@
       .input,
       .prepend,
       select {
-        @apply border-red-700;
+        @apply border-red-500;
         @apply border-2;
       }
 
@@ -293,7 +293,7 @@ input[type="number"] {
 
 .field-label {
   @apply pb-2;
-  @apply text-tiny;
+  @apply text-sm;
   @apply text-gray-800;
 }
 
@@ -341,14 +341,14 @@ input[type="number"] {
 }
 
 .field-note {
-  @apply text-tiny;
+  @apply text-sm;
   @apply text-gray-700;
   white-space: pre-line;
 }
 
 .error-message {
   display: inline-block;
-  @apply text-sm;
+  @apply text-xs;
   @apply text-alert;
   @apply tracking-wide;
   @apply leading-5;
@@ -358,7 +358,7 @@ input[type="number"] {
 .field-sub-note {
   @apply mt-2;
   @apply text-gray-750;
-  @apply text-sm;
+  @apply text-xs;
   @apply tracking-wide;
   @apply font-sans;
   font-weight: normal;
@@ -367,7 +367,7 @@ input[type="number"] {
 .form-section__title {
   @apply font-alt-sans;
   @apply text-xl;
-  @apply text-gray-900;
+  @apply text-gray-950;
   @apply font-medium;
   @apply block;
   @apply mb-1;

package/src/global/headers.scss

@@ -12,7 +12,7 @@
   @screen md {
     @apply pt-0;
     @apply pb-8;
-    @apply text-sm;
+    @apply text-xs;
     @apply border-none;
     @apply text-gray-800;
   }
@@ -56,22 +56,22 @@
 .detail-header__title {
   @apply font-alt-sans;
   @apply uppercase;
-  @apply text-tiny;
+  @apply text-sm;
   @apply tracking-widest;
   @apply text-primary-darker;
 
   @screen md {
     @apply text-black;
     @apply font-serif;
-    @apply text-3xl;
+    @apply text-2xl;
     @apply normal-case;
     @apply tracking-normal;
-    @apply text-gray-900;
+    @apply text-gray-950;
   }
 }
 
 .detail-header__subtitle {
-  @apply text-tiny;
+  @apply text-sm;
 
   @screen md {
     @apply text-gray-750;
@@ -88,6 +88,6 @@
 }
 .toggle-header-content {
   @apply font-sans;
-  @apply text-tiny;
+  @apply text-sm;
   @apply text-gray-800;
 }

package/src/global/homepage.scss

@@ -15,7 +15,7 @@
     @apply items-center;
 
     @screen md {
-      @apply text-lg;
+      @apply text-xl;
       @apply flex-row;
       @apply justify-around;
       > :nth-child(2) {

package/src/global/markdown.scss

@@ -3,7 +3,7 @@
 
   h2 {
     margin-block: var(--bloom-s8) var(--bloom-s5);
-    font-size: var(--bloom-font-size-3xl);
+    font-size: var(--bloom-font-size-2xl);
 
     @media (min-width: $screen-md) {
       font-size: var(--bloom-font-size-xl);
@@ -32,7 +32,7 @@
   /* Certain text blocks in the application form flow use this extra styling: */
 
   &.markdown-informational {
-    font-size: var(--bloom-font-size-tiny);
+    font-size: var(--bloom-font-size-sm);
     color: var(--bloom-color-gray-750);
 
     h3 {

package/src/global/mixins.scss

@@ -37,7 +37,7 @@
     display: inline-block;
     margin-left: var(--bloom-s2);
     margin-right: var(--bloom-s2);
-    font-size: var(--bloom-font-size-sm);
+    font-size: var(--bloom-font-size-xs);
     content: "⌃";
     transform: rotate(180deg) translateY(2px);
   }

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