@bloom-housing/ui-components 7.3.1 → 8.0.0

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

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