@bloom-housing/ui-components 7.3.2 → 8.0.1

package/dist/src/tables/AgPagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"AgPagination.js","sourceRoot":"","sources":["../../../src/tables/AgPagination.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AgPagination.js","sourceRoot":"","sources":["../../../src/tables/AgPagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,OAAO,CAAA;AAcjC,IAAM,mBAAmB,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAA;AAE5C,IAAM,YAAY,GAAG,UAAC,EAUF;QATlB,UAAU,gBAAA,EACV,UAAU,gBAAA,EACV,WAAW,iBAAA,EACX,YAAY,kBAAA,EACZ,aAAa,mBAAA,EACb,cAAc,oBAAA,EACd,eAAe,qBAAA,EACf,YAAY,kBAAA,EACZ,eAAe,qBAAA;IAEf,IAAM,WAAW,GAAG;QAClB,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC,CAAA;QAC/B,YAAY,IAAI,YAAY,CAAC,WAAW,CAAC,CAAA;IAC3C,CAAC,CAAA;IAED,IAAM,WAAW,GAAG;QAClB,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC,CAAA;QAC/B,YAAY,IAAI,YAAY,CAAC,WAAW,CAAC,CAAA;IAC3C,CAAC,CAAA;IAED,IAAM,gBAAgB,GAAG,UAAC,IAAY;QACpC,eAAe,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAA;QAC/B,eAAe,IAAI,eAAe,CAAC,YAAY,CAAC,CAAA;IAClD,CAAC,CAAA;IAED,OAAO,CACL,6BAAK,SAAS,EAAC,sCAAsC;QACnD,6BAAK,SAAS,EAAC,iBAAiB;YAC9B,oBAAC,MAAM,IACL,SAAS,EAAC,0CAA0C,EACpD,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,WAAW,KAAK,CAAC,IAE1B,CAAC,CAAC,YAAY,CAAC,CACT,CACL;QAEN,6BAAK,SAAS,EAAC,oFAAoF;YACjG,6BAAK,SAAS,EAAC,qBAAqB;gBAClC,8BAAM,SAAS,EAAC,aAAa,EAAC,EAAE,EAAC,cAAc,IAC5C,UAAU,CACN;gBACN,aAAa,IAAI,8BAAM,SAAS,EAAC,aAAa,IAAE,aAAa,CAAQ,CAClE;YAEN,6BAAK,SAAS,EAAC,mCAAmC;gBAChD,6BAAK,SAAS,EAAC,mCAAmC;oBAChD,+BAAO,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAC,WAAW,IACzD,CAAC,CAAC,QAAQ,CAAC,CACN;oBACR,gDACe,cAAc,EAC3B,IAAI,EAAC,WAAW,EAChB,EAAE,EAAC,WAAW,EACd,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,UAAC,EAAU;gCAAR,MAAM,YAAA;4BAAO,OAAA,gBAAgB,CAAC,MAAM,CAAC,KAAK,CAAC;wBAA9B,CAA8B,IAEvD,mBAAmB,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,CACjC,gCAAQ,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,IAC3B,IAAI,CACE,CACV,EAJkC,CAIlC,CAAC,CACK,CACL;gBAEN,6BAAK,SAAS,EAAC,2BAA2B;oBACxC,+BAAO,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAC,WAAW,IACzD,CAAC,CAAC,UAAU,CAAC,CACR;oBACR,gDACe,gBAAgB,EAC7B,IAAI,EAAC,WAAW,EAChB,EAAE,EAAC,WAAW,EACd,QAAQ,EAAE,UAAC,CAAuC;4BAChD,OAAA,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;wBAAxC,CAAwC,EAE1C,KAAK,EAAE,WAAW,IAEjB,KAAK,CAAC,UAAU,CAAC;yBACf,IAAI,CAAC,UAAU,CAAC;yBAChB,GAAG,CAAC,UAAC,CAAC,EAAE,CAAC;wBACR,IAAM,KAAK,GAAG,CAAC,GAAG,CAAC,CAAA;wBACnB,OAAO,CACL,gCAAQ,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,IAC7B,KAAK,CACC,CACV,CAAA;oBACH,CAAC,CAAC,CACG,CACL,CACF,CACF;QAEN,6BAAK,SAAS,EAAC,qDAAqD;YAClE,6BAAK,SAAS,EAAC,WAAW;gBACxB,oBAAC,MAAM,oBACQ,aAAa,EAC1B,SAAS,EAAC,0CAA0C,EACpD,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,WAAW,KAAK,CAAC,IAE1B,CAAC,CAAC,YAAY,CAAC,CACT,CACL;YAEN,oBAAC,MAAM,oBACQ,aAAa,EAC1B,SAAS,EAAC,sCAAsC,EAChD,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,UAAU,KAAK,WAAW,IAAI,UAAU,KAAK,CAAC,IAEvD,CAAC,CAAC,QAAQ,CAAC,CACL,CACL,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,YAAY,IAAI,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/src/tables/GroupedTable.js

@@ -33,7 +33,7 @@ export var GroupedTable = function (props) {
             body.push(React.createElement("tr", { id: rowKey, key: rowKey, className: "group-".concat(groupClassName) }, cols));
         });
     });
-    var tableClasses = ["w-full", "text-sm"];
+    var tableClasses = ["w-full", "text-xs"];
     if (props.responsiveCollapse) {
         tableClasses.push("responsive-collapse");
     }

package/dist/src/tables/StandardTable.js

@@ -86,7 +86,7 @@ export var StandardTable = function (props) {
             // eslint-disable-next-line @typescript-eslint/unbound-method
             ref: provided.innerRef, className: snapshot.isDragging ? "table__is-dragging" : "" }), cols)); })) : (React.createElement("tr", { id: rowKey, key: rowKey, className: rowClass ? rowClass : "" }, cols))));
     });
-    var tableClasses = ["w-full", "text-sm"];
+    var tableClasses = ["w-full", "text-xs"];
     if (props.responsiveCollapse) {
         tableClasses.push("responsive-collapse");
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "7.3.2",
+  "version": "8.0.1",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/ui-components",
@@ -30,7 +30,7 @@
   ],
   "scripts": {
     "build-storybook": "build-storybook -c .storybook -s ./public",
-    "start": "start-storybook -s ./public",
+    "start": "start-storybook -s ./public -p 40791",
     "build": "tsc",
     "test": "jest -w 1",
     "test:coverage": "jest -w 1 --coverage --watchAll=false",

package/src/actions/Button.docs.mdx

@@ -67,10 +67,10 @@ You can apply CSS variables to the `.button` selector to customize the appearanc
 | `--label-weight`         | Font Weight | Typographic weight of the button label              | `bold`                                              |
 | `--normal-rounded`       | Size        | Border radius of a normal-size button               | `--bloom-rounded`                                   |
 | `--normal-padding`       | Size        | Padding of the normal-size button interior          | `--bloom-s4` (top/bottom) `--bloom-s6` (left/right) |
-| `--normal-font-size`     | Size        | Font size of the normal-size button                 | `--bloom-font-size-sm`                              |
+| `--normal-font-size`     | Size        | Font size of the normal-size button                 | `--bloom-font-size-xs`                              |
 | `--small-rounded`        | Size        | Border radius of a small-size button                | `--bloom-rounded`                                   |
 | `--small-padding`        | Size        | Padding of the small-size button interior           | `--bloom-s3` (top/bottom) `--bloom-s6` (left/right) |
-| `--small-font-size`      | Size        | Font size of the small-size button                  | `--bloom-font-size-xs`                              |
+| `--small-font-size`      | Size        | Font size of the small-size button                  | `--bloom-font-size-2xs`                             |
 | `--big-rounded`          | Size        | Border radius of a large-size button                | `--bloom-rounded`                                   |
 | `--big-padding`          | Size        | Padding of the large-size button interior           | `--bloom-s6`                                        |
-| `--big-font-size`        | Size        | Font size of the large-size button                  | `--bloom-font-size-sm`                              |
+| `--big-font-size`        | Size        | Font size of the large-size button                  | `--bloom-font-size-xs`                              |

package/src/actions/Button.scss

@@ -7,14 +7,14 @@
   --label-transform: uppercase;
   --label-font: var(--bloom-font-alt-sans);
   --label-letter-spacing: var(--bloom-letter-spacing-widest);
-  --normal-font-size: var(--bloom-font-size-sm);
+  --normal-font-size: var(--bloom-font-size-xs);
   --label-weight: bold;
   --small-rounded: var(--bloom-rounded);
   --small-padding: var(--bloom-s3) var(--bloom-s6);
-  --small-font-size: var(--bloom-font-size-xs);
+  --small-font-size: var(--bloom-font-size-2xs);
   --big-rounded: var(--bloom-rounded);
   --big-padding: var(--bloom-s6);
-  --big-font-size: var(--bloom-font-size-sm);
+  --big-font-size: var(--bloom-font-size-xs);
 
   /* Base Styles */
   position: relative;
@@ -93,7 +93,7 @@
     font-weight: 400;
     text-decoration: underline;
     margin: var(--bloom-s4);
-    font-size: var(--bloom-font-size-tiny);
+    font-size: var(--bloom-font-size-sm);
 
     &:hover {
       color: var(--bloom-color-primary);
@@ -104,7 +104,7 @@
   &.is-inline {
     color: var(--bloom-color-primary);
     font-weight: 600;
-    font-size: var(--bloom-font-size-tiny);
+    font-size: var(--bloom-font-size-sm);
     margin: 0;
     text-decoration: none;
 
@@ -140,7 +140,7 @@
     text-decoration: underline;
     margin: var(--bloom-s4);
     text-transform: uppercase;
-    font-size: var(--bloom-font-size-tiny);
+    font-size: var(--bloom-font-size-sm);
     display: block;
 
     &:hover {

package/src/actions/Button.stories.tsx

@@ -34,11 +34,7 @@ export const standard = () => {
   const borderSelect = select("Appearance Border", BorderTypeStory, undefined)
   const iconSelect = select(
     "Icon",
-    {
-      arrowBack: "arrowBack",
-      arrowForward: "arrowForward",
-      default: undefined,
-    },
+    { arrowBack: "arrowBack", arrowForward: "arrowForward", default: undefined },
     undefined
   )
   const iconPlacementSelect = select(

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