@bloom-housing/ui-components 6.0.1-alpha.2 → 6.0.1-alpha.3

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.0.1-alpha.3](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@6.0.1-alpha.2...@bloom-housing/ui-components@6.0.1-alpha.3) (2022-10-03)
+
+
+### Code Refactoring
+
+* organize design system text styles ([#3055](https://github.com/bloom-housing/bloom/issues/3055)) ([f5bcb62](https://github.com/bloom-housing/bloom/commit/f5bcb629885fd9ce6c17e3e817bd0ee500373990))
+
+
+### BREAKING CHANGES
+
+* the different style types you can pass to the heading component have individually been renamed to fit the design system, as well as the prop to pass them in
+
+
+
+
+
 ## [6.0.1-alpha.2](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@6.0.1-alpha.1...@bloom-housing/ui-components@6.0.1-alpha.2) (2022-09-29)
 
 

package/index.ts

@@ -55,7 +55,6 @@ export * from "./src/headers/Hero"
 export * from "./src/headers/PageHeader"
 export * from "./src/headers/SiteHeader"
 export * from "./src/headers/StepHeader"
-export * from "./src/headers/Heading"
 export * from "./src/headers/HeadingGroup"
 
 /* Helpers */
@@ -164,5 +163,6 @@ export * from "./src/tables/AgPagination"
 
 /* Text */
 export * from "./src/text/Description"
+export * from "./src/text/Heading"
 export * from "./src/text/Message"
 export * from "./src/text/Tag"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "6.0.1-alpha.2",
+  "version": "6.0.1-alpha.3",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/bloom/tree/master/shared/ui-components",
@@ -43,6 +43,7 @@
     "@types/dompurify": "^2.3.3",
     "@types/jest": "^26.0.14",
     "@types/jwt-decode": "^2.2.1",
+    "@types/pretty": "2.0.1",
     "@types/react-map-gl": "^5.2.10",
     "@types/react-tabs": "^2.3.2",
     "@types/react-test-renderer": "^16.9.3",
@@ -57,7 +58,9 @@
     "postcss": "^8.3.6",
     "postcss-loader": "^4.3",
     "preact": "^10.5.14",
+    "pretty": "2.0.0",
     "puppeteer": "^10.1.0",
+    "react-dom-server": "0.0.5",
     "react-is": "^17.0.2",
     "react-test-renderer": "^17.0.2",
     "regenerator-runtime": "^0.13.7",
@@ -110,5 +113,5 @@
     "ts-jest": "^26.4.1",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "2a2bd0fb61d7643c31d4a200b96a78d401bd0590"
+  "gitHead": "4e7935694f2d0551656828a64d487d2419c29ef4"
 }

package/src/actions/Button.scss

@@ -54,7 +54,7 @@
 
   &.is-secondary {
     border-color: var(--bloom-color-gray-700);
-    color: var(--bloom-color-gray-700);
+    color: var(--bloom-text-color-light);
 
     &:hover {
       background-color: var(--bloom-color-gray-700);

package/src/blocks/ImageCard.scss

@@ -150,7 +150,7 @@
 }
 
 .modal.image-card__gallery-modal {
-  --title-color: var(--bloom-color-gray-750);
+  --title-color: var(--bloom-text-color);
   --background-color: transparent;
   --content-padding-block: var(--bloom-s2) var(--bloom-s4);
   --footer-background-color: transparent;

package/src/blocks/StandardCard.scss

@@ -5,7 +5,7 @@
   --border-color: var(--bloom-color-gray-500);
   --title-color: var(--bloom-color-gray-900);
   --background-color: var(--bloom-color-white);
-  --blank-color: var(--bloom-color-gray-750);
+  --blank-color: var(--bloom-text-color);
   --blank-background: var(--bloom-color-gray-200);
 }
 

package/src/blocks/StandardCard.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Heading } from "../headers/Heading"
+import { Heading } from "../text/Heading"
 import "./StandardCard.scss"
 
 export interface StandardCardProps {

package/src/documentation/Utilities.scss

@@ -0,0 +1,30 @@
+.mdx-table {
+  width: 100%;
+  table-layout: auto;
+  white-space: nowrap;
+  margin-top: var(--bloom-s8);
+  font-size: var(--bloom-font-size-tiny);
+
+  tr {
+    padding: var(--bloom-s4);
+    background-color: var(--bloom-color-white) !important;
+  }
+
+  th {
+    background-color: var(--bloom-color-primary-lighter);
+    text-transform: uppercase;
+    font-weight: 700;
+    color: var(--bloom-text-color-darker);
+    letter-spacing: var(--bloom-letter-spacing-wide);
+  }
+
+  td:not(:first-child) {
+    width: 100%;
+  }
+
+  td,
+  th {
+    padding: var(--bloom-s2) var(--bloom-s4) var(--bloom-s2) var(--bloom-s4);
+    border: 1px solid var(--bloom-color-gray-450);
+  }
+}

package/src/documentation/Utilities.stories.mdx

@@ -0,0 +1,25 @@
+import { Canvas, Story, Meta, DocsContainer, Source } from "@storybook/addon-docs"
+import { LargeHeader, LargeHeaderSource, Typography } from "./Utilities"
+
+<Meta
+  title="Documentation/Utilities"
+  parameters={{
+    docs: {
+      container: ({ children, context }) => (
+        <DocsContainer context={context}>
+          <div>{children}</div>
+        </DocsContainer>
+      ),
+    },
+  }}
+/>
+
+# Utilities
+
+These styles are component agnostic and can be used to ensure UI consistency across the application.
+
+## Typography
+
+These classes can be added to any text element in order to give it visual identity and hierarchy.
+
+<Typography />

package/src/documentation/Utilities.tsx

@@ -0,0 +1,67 @@
+import * as React from "react"
+import "./Utilities.scss"
+
+interface CustomMdxTableProps {
+  data: (string | React.ReactNode)[][]
+  headers: (string | React.ReactNode)[]
+}
+
+const CustomMdxTable = (props: CustomMdxTableProps) => {
+  return (
+    <table className={"mdx-table"}>
+      {props.headers.length > 0 && (
+        <tr>
+          {props.headers.map((header) => {
+            return <th align="left">{header}</th>
+          })}
+        </tr>
+      )}
+
+      {props.data.map((row) => {
+        return (
+          <tr>
+            {row.map((cell) => {
+              return <td>{cell}</td>
+            })}
+          </tr>
+        )
+      })}
+    </table>
+  )
+}
+
+export const Typography = () => {
+  return (
+    <CustomMdxTable
+      headers={["Class", "Example"]}
+      data={[
+        [
+          "text__large-primary",
+          <div className={"text__large-primary"}>Large Primary Text Style</div>,
+        ],
+        [
+          "text__medium-normal",
+          <div className={"text__medium-normal"}>Medium Normal Text Style</div>,
+        ],
+        [
+          "text__small-weighted",
+          <div className={"text__small-weighted"}>Small Weighted Text Style</div>,
+        ],
+        ["text__small-normal", <div className={"text__small-normal"}>Small Normal Text Style</div>],
+        [
+          "text__underline-weighted",
+          <div className={"text__underline-weighted"}>Underline Weighted Text Style</div>,
+        ],
+        [
+          "text__light-weighted",
+          <div className={"text__light-weighted"}>Light Weighted Text Style</div>,
+        ],
+        [
+          "text__caps-weighted",
+          <div className={"text__caps-weighted"}>Caps Weighted Text Style</div>,
+        ],
+        ["text_caps-spaced", <div className={"text_caps-spaced"}>Caps Spaced Text Style</div>],
+      ]}
+    />
+  )
+}

package/src/forms/DOBField.tsx

@@ -56,7 +56,7 @@ const DOBField = (props: DOBFieldProps) => {
     )
   }
 
-  const labelClasses = ["field-label--caps"]
+  const labelClasses = ["text_caps-spaced"]
   if (props.readerOnly) labelClasses.push("sr-only")
   if (hasError) labelClasses.push("text-alert")
 

package/src/forms/Field.tsx

@@ -75,7 +75,7 @@ const Field = (props: FieldProps) => {
 
   const label = useMemo(() => {
     const labelClasses = ["label"]
-    if (props.caps) labelClasses.push("field-label--caps")
+    if (props.caps) labelClasses.push("text_caps-spaced")
     if (props.primary) labelClasses.push("text-primary")
     if (props.readerOnly) labelClasses.push("sr-only")
     if (props.type === "radio") {

package/src/forms/FieldGroup.tsx

@@ -165,7 +165,7 @@ const FieldGroup = ({
   }
   return (
     <div>
-      {groupLabel && <label className="field-label--caps">{groupLabel}</label>}
+      {groupLabel && <label className="text_caps-spaced">{groupLabel}</label>}
       {groupNote && <p className="field-note mb-4">{groupNote}</p>}
 
       <div className={`field ${error && "error"} ${fieldGroupClassName || ""} mb-0`}>

package/src/forms/MultiSelectField.scss

@@ -82,7 +82,7 @@
   width: 100%;
   padding: var(--bloom-s1) var(--bloom-s2);
   font-size: var(--bloom-font-size-sm);
-  color: var(--bloom-color-gray-750);
+  color: var(--bloom-text-color);
   text-align: right;
 }
 
@@ -126,7 +126,7 @@
 
 .multi-select-field__option--no-results,
 .multi-select-field__option[aria-disabled="true"] {
-  color: var(--bloom-color-gray-750) !important;
+  color: var(--bloom-text-color) !important;
   cursor: not-allowed !important;
   text-decoration: none !important;
 }

package/src/forms/PhoneField.tsx

@@ -22,7 +22,7 @@ export const PhoneField = (props: {
   dataTestId?: string
 }) => {
   const labelClasses = ["label"]
-  if (props.caps) labelClasses.push("field-label--caps")
+  if (props.caps) labelClasses.push("text_caps-spaced")
   if (props.readerOnly) labelClasses.push("sr-only")
   /**
    * we need to handle two different use cases,

package/src/global/forms.scss

@@ -23,7 +23,7 @@
   }
 
   label.sr-only + .control,
-  label.field-label--caps + .control {
+  label.text_caps-spaced + .control {
     @apply mt-0;
   }
 
@@ -31,7 +31,7 @@
     @apply mt-2;
   }
 
-  .field-label--caps.label + .field-note {
+  .text_caps-spaced.label + .field-note {
     @apply mt-0;
   }
 
@@ -256,10 +256,9 @@
   }
 }
 
-/* Restore previous Tailwind v1 color */
 input::placeholder,
 textarea::placeholder {
-  color: #a0aec0;
+  color: var(--bloom-color-gray-650);
 }
 
 input[type],
@@ -298,17 +297,6 @@ input[type="number"] {
   @apply text-gray-800;
 }
 
-.field-label--caps {
-  @apply font-sans;
-  @apply uppercase;
-  @apply text-gray-750;
-  @apply tracking-widest;
-  @apply font-semibold;
-  @apply text-tiny;
-  @apply mb-3;
-  @apply inline-block;
-}
-
 .field--inline {
   display: inline-block;
 }

package/src/global/mixins.scss

@@ -116,7 +116,7 @@
   &.is-warning {
     background-color: var(--warning-appearance-background-color, var(--bloom-color-warn));
     border-color: var(--warning-appearance-border-color, var(--bloom-color-warn));
-    color: var(--warning-appearance-label-color, var(--bloom-color-gray-800));
+    color: var(--warning-appearance-label-color, var(--bloom-text-color-dark));
 
     &:hover {
       background-color: var(
@@ -176,7 +176,7 @@
     }
 
     &.is-warning {
-      color: var(--bloom-color-gray-800);
+      color: var(--bloom-text-color-dark);
 
       &:hover {
         color: var(--bloom-color-white);

package/src/global/text.scss

@@ -72,31 +72,6 @@ h1.title {
   @apply text-4xl;
 }
 
-.text-caps-underline {
-  @apply font-alt-sans;
-  @apply uppercase;
-  @apply text-tiny;
-  @apply mb-5;
-  @apply pb-2;
-  @apply border-0;
-  @apply border-b-4;
-  @apply border-primary;
-  @apply font-semibold;
-  @apply text-gray-800;
-  @apply tracking-widest;
-  @apply inline-block;
-}
-
-.text-caps-tiny {
-  @apply mb-3;
-  @apply text-gray-750;
-  @apply uppercase;
-  @apply font-sans;
-  @apply font-bold;
-  @apply text-tiny;
-  @apply tracking-wide;
-}
-
 .text-serif-lg {
   @apply font-serif;
   @apply text-lg;
@@ -140,42 +115,85 @@ h1.title {
   @apply block;
 }
 
-.card-header {
-  font-family: var(--card-header-font-family, var(--bloom-font-alt-sans));
-  font-weight: var(--card-header-font-weight, 600);
-  color: var(--card-header-color, var(--bloom-color-blue-700));
-  font-size: var(--card-header-font-size, var(--bloom-font-size-3xl));
-  margin-block: var(--card-header-margin-block, 0 var(--bloom-s3));
-  line-height: var(--card-header-line-height, var(--bloom-line-height-tight));
-}
-
-.card-subheader {
-  font-family: var(--card-subheader-font-family, var(--bloom-font-alt-sans));
-  font-weight: var(--card-subheader-font-weight, normal);
-  color: var(--card-subheader-color, var(--bloom-color-black));
-  font-size: var(--card-subheader-font-size, var(--bloom-font-size-base));
-  margin-block: var(--card-subheader-margin-block, 0 var(--bloom-s3));
-}
-
-.table-header {
-  font-family: var(--table-header-font-family, var(--bloom-font-alt-sans));
-  font-weight: var(--table-header-font-weight, 600);
-  color: var(--table-header-color, var(--bloom-color-gray-800));
-  font-size: var(--table-header-font-size, var(--bloom-font-size-sm));
-  margin-block: var(--table-header-margin-block, 0 var(--bloom-s1));
-}
-
-.table-subheader {
-  font-family: var(--table-subheader-font-family, var(--bloom-font-alt-sans));
-  font-weight: var(--table-subheader-font-weight, normal);
-  color: var(--table-subheader-color, var(--bloom-color-gray-750));
-  font-size: var(--table-subheader-font-size, var(--bloom-font-size-sm));
-  margin-block: var(--table-header-margin-block, 0 var(--bloom-s3));
-}
-
-.category-header {
-  font-family: var(--category-header-font-family, var(--bloom-font-alt-sans));
-  font-weight: var(--category-header-font-weight, 600);
-  color: var(--category-header-color, var(--bloom-color-gray-700));
-  font-size: var(--category-header-font-size, var(--bloom-font-size-sm));
+: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));
+  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));
+}
+
+.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));
+  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));
+}
+
+.text__small-weighted {
+  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));
+  margin-block: var(--text-small-weighted-margin-block, 0 var(--bloom-s1));
+}
+
+.text__small-normal {
+  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));
+  margin-block: var(--text-small-normal-margin-block, 0 var(--bloom-s3));
+}
+
+.text__light-weighted {
+  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));
+}
+
+.text_caps-spaced {
+  font-family: var(--text-caps-spaced-font-family, var(--bloom-font-sans));
+  text-transform: uppercase;
+  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));
+  margin-bottom: var(--text-caps-spaced-margin-bottom, var(--bloom-s3));
+  display: inline-block;
+}
+
+.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));
+  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);
+  border-bottom: var(--text-underline-weighted-border, 4px solid var(--bloom-color-primary));
+  font-weight: var(--text-underline-weighted-font-weight, 600);
+  color: var(--text-underline-weighted-color, var(--bloom-text-color-dark));
+  letter-spacing: var(--text-underline-weighted-letter-spacing, var(--bloom-letter-spacing-widest));
+  display: inline-block;
+}
+
+.text__caps-weighted {
+  margin-bottom: var(--text-caps-weighted-bottom-margin, var(--bloom-s3));
+  color: var(--text-caps-weighted-color, var(--bloom-text-color));
+  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));
+  letter-spacing: var(--text-caps-weighted-letter-spacing, var(--bloom-letter-spacing-wide));
 }

package/src/global/tokens/colors.scss

@@ -26,6 +26,7 @@
   --bloom-color-gray-800: #30383a;
   --bloom-color-gray-750: #555555;
   --bloom-color-gray-700: #767676;
+  --bloom-color-gray-650: #888888;
   --bloom-color-gray-600: #999999;
   --bloom-color-gray-550: #aaaaaa;
   --bloom-color-gray-500: #cccccc;

package/src/headers/HeadingGroup.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Heading } from "./Heading"
+import { Heading } from "../text/Heading"
 import "./HeadingGroup.scss"
 
 export interface HeadingGroupProps {

package/src/navigation/ProgressNav.scss

@@ -4,7 +4,7 @@
   --active-step-color: var(--bloom-color-primary);
   --active-step-font-color: var(--bloom-color-gray-900);
   --future-step-color: var(--bloom-color-gray-450);
-  --future-step-font-color: var(--bloom-color-gray-750);
+  --future-step-font-color: var(--bloom-text-color);
 
   --dot-size: var(--bloom-s3);
   --dot-padding-left-mobile: var(--bloom-s2);

package/src/page_components/listing/ListingCard.tsx

@@ -3,7 +3,7 @@ import { ImageCard, ImageCardProps, ImageTag } from "../../blocks/ImageCard"
 import { LinkButton } from "../../actions/LinkButton"
 import { StackedTable, StackedTableProps } from "../../tables/StackedTable"
 import { StandardTable, StandardTableProps } from "../../tables/StandardTable"
-import { Heading, HeaderType } from "../../headers/Heading"
+import { Heading, HeaderType } from "../../text/Heading"
 import { Tag } from "../../text/Tag"
 import { AppearanceShadeType, AppearanceStyleType } from "../../global/AppearanceTypes"
 import { Icon, IconFillColors } from "../../icons/Icon"
@@ -94,7 +94,7 @@ const ListingCard = (props: ListingCardProps) => {
         )
       }
       return (
-        <Heading priority={priority} style={styleType} className={customClass}>
+        <Heading priority={priority} styleType={styleType} className={customClass}>
           {header.href ? (
             <LinkComponent className="is-card-link" href={header.href}>
               {header.content}
@@ -112,8 +112,8 @@ const ListingCard = (props: ListingCardProps) => {
   const getContentHeader = () => {
     return (
       <div className="listings-row_headers">
-        {getHeader(contentProps?.contentHeader, 2, "cardHeader", "order-1")}
-        {getHeader(contentProps?.contentSubheader, 3, "cardSubheader", "order-2")}
+        {getHeader(contentProps?.contentHeader, 2, "largePrimary", "order-1")}
+        {getHeader(contentProps?.contentSubheader, 3, "mediumNormal", "order-2")}
         {cardTags && cardTags?.length > 0 && (
           <div className="listings-row_tags">
             {cardTags?.map((cardTag, index) => {
@@ -145,8 +145,8 @@ const ListingCard = (props: ListingCardProps) => {
               <hr className={"mb-2"} />
             )}
           <div className={"listings-row_headers"}>
-            {getHeader(contentProps?.tableHeader, 4, "tableHeader")}
-            {getHeader(contentProps?.tableSubheader, 5, "tableSubheader")}
+            {getHeader(contentProps?.tableHeader, 4, "smallWeighted")}
+            {getHeader(contentProps?.tableSubheader, 5, "smallNormal")}
           </div>
           {children && children}
           {tableProps && (tableProps.data || tableProps.stackedData) && (

package/src/page_components/listing/ListingMap.tsx

@@ -5,7 +5,7 @@ import MapGL, { Marker } from "react-map-gl"
 import "./ListingMap.scss"
 import { MultiLineAddress, Address } from "../../helpers/MultiLineAddress"
 import { useIntersect } from "../../.."
-import { Heading } from "../../headers/Heading"
+import { Heading } from "../../text/Heading"
 
 export interface ListingMapProps {
   address?: Address
@@ -109,7 +109,7 @@ const ListingMap = (props: ListingMapProps) => {
     <div className="listing-map" ref={setIntersectingElement}>
       <div className="addressPopup">
         {props.listingName && (
-          <Heading priority={3} style={"sidebarSubHeader"}>
+          <Heading priority={3} styleType={"capsWeighted"}>
             {props.listingName}
           </Heading>
         )}

package/src/page_components/listing/listing_sidebar/Contact.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import { ContactAddress } from "./ContactAddress"
 import { Icon, IconFillColors } from "../../../icons/Icon"
 import { Address } from "../../../helpers/MultiLineAddress"
-import { Heading } from "../../../headers/Heading"
+import { Heading } from "../../../text/Heading"
 
 export interface ContactProps {
   /** Any number of text sections rendered after the contact information */
@@ -49,7 +49,7 @@ const Contact = ({
 
   return (
     <section className="aside-block">
-      <Heading priority={4} style={"sidebarHeader"}>
+      <Heading priority={4} styleType={"underlineWeighted"}>
         {sectionTitle}
       </Heading>
 
@@ -96,7 +96,7 @@ const Contact = ({
       {additionalInformation?.map((info) => {
         return (
           <div key={info.title} className={"my-3"}>
-            <Heading priority={3} style={"sidebarSubHeader"}>
+            <Heading priority={3} styleType={"capsWeighted"}>
               {info.title}
             </Heading>
             <div className="text-gray-800 text-tiny markdown">{info.content}</div>

package/src/page_components/listing/listing_sidebar/ExpandableSection.tsx

@@ -1,6 +1,7 @@
 import * as React from "react"
 import Markdown from "markdown-to-jsx"
 import { ExpandableContent } from "../../../actions/ExpandableContent"
+import { Heading } from "../../../text/Heading"
 
 export interface ExpandableSectionProps {
   content: string | React.ReactNode
@@ -28,7 +29,9 @@ const ExpandableSection = ({ content, expandableContent, strings }: ExpandableSe
   }
   return (
     <section className="aside-block">
-      <h4 className="text-caps-underline">{strings.title}</h4>
+      <Heading priority={4} styleType={"underlineWeighted"}>
+        {strings.title}
+      </Heading>
       <div className="text-tiny text-gray-750">
         {getTextContent(content)}
         {expandableContent && (

package/src/page_components/listing/listing_sidebar/GetApplication.tsx

@@ -4,7 +4,7 @@ import { Button } from "../../../actions/Button"
 import { LinkButton } from "../../../actions/LinkButton"
 import { AppearanceStyleType } from "../../../global/AppearanceTypes"
 import { Address } from "../../../helpers/MultiLineAddress"
-import { Heading } from "../../../headers/Heading"
+import { Heading } from "../../../text/Heading"
 import { t } from "../../../helpers/translator"
 import { OrDivider } from "./OrDivider"
 import { ContactAddress } from "./ContactAddress"
@@ -56,9 +56,10 @@ const GetApplication = (props: ApplicationsProps) => {
 
   return (
     <section className="aside-block" data-test-id="get-application-section">
-      <h2 className="text-caps-underline">
+      <Heading priority={2} styleType={"underlineWeighted"}>
         {props.strings?.howToApply ?? t("listings.apply.howToApply")}
-      </h2>
+      </Heading>
+
       {!props.applicationsOpen && (
         <p className="mb-5 text-gray-700">
           {props.strings?.applicationsOpenInFuture ??
@@ -121,7 +122,7 @@ const GetApplication = (props: ApplicationsProps) => {
           {props.applicationsOpen && (props.onlineApplicationURL || props.paperMethod) && (
             <OrDivider bgColor="white" />
           )}
-          <Heading priority={3} style={"sidebarSubHeader"}>
+          <Heading priority={3} styleType={"capsWeighted"}>
             {props.strings?.pickUpApplication ?? t("listings.apply.pickUpAnApplication")}
           </Heading>
           <ContactAddress
@@ -130,7 +131,7 @@ const GetApplication = (props: ApplicationsProps) => {
           />
           {props.applicationPickUpAddressOfficeHours && (
             <>
-              <Heading priority={3} style={"sidebarSubHeader"}>
+              <Heading priority={3} styleType={"capsWeighted"}>
                 {props.strings?.officeHoursHeading ?? t("leasingAgent.officeHours")}
               </Heading>
               <p className="text-gray-800 text-tiny markdown">

package/src/page_components/listing/listing_sidebar/QuantityRowSection.tsx

@@ -1,4 +1,5 @@
 import * as React from "react"
+import { Heading } from "../../../text/Heading"
 
 export interface QuantityRow {
   amount: number | null
@@ -33,7 +34,9 @@ const QuantityRowSection = ({ quantityRows, strings }: QuantityRowSectionProps)
 
   return (
     <section className="aside-block is-tinted">
-      <h4 className="text-caps-tiny">{strings.sectionTitle}</h4>
+      <Heading priority={4} styleType={"capsWeighted"}>
+        {strings.sectionTitle}
+      </Heading>
       <div>
         {strings.description && (
           <p className="text-tiny text-gray-800 pb-3">{strings.description}</p>

package/src/page_components/listing/listing_sidebar/ReferralApplication.tsx

@@ -1,4 +1,5 @@
 import * as React from "react"
+import { Heading } from "../../../text/Heading"
 import { t } from "../../../helpers/translator"
 import { Icon, IconFillColors } from "../../../icons/Icon"
 
@@ -16,7 +17,9 @@ const ReferralApplication = (props: ReferralApplicationProps) => {
 
   return (
     <section className="aside-block">
-      <h2 className="text-caps-underline">{props.strings.title}</h2>
+      <Heading priority={2} styleType={"underlineWeighted"}>
+        {props.strings.title}
+      </Heading>
       <p>
         <a href={linkedPhoneNumber}>
           <Icon symbol="phone" size="medium" fill={IconFillColors.primary} />{" "}

package/src/page_components/listing/listing_sidebar/SidebarBlock.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { Heading, HeadingProps } from "../../../headers/Heading"
+import { Heading, HeadingProps } from "../../../text/Heading"
 
 export interface SidebarBlockProps extends Omit<HeadingProps, "children" | "className"> {
   children: React.ReactNode
@@ -7,11 +7,11 @@ export interface SidebarBlockProps extends Omit<HeadingProps, "children" | "clas
   title?: string
 }
 
-const SidebarBlock = ({ children, className, title, priority, style }: SidebarBlockProps) => {
+const SidebarBlock = ({ children, className, title, priority, styleType }: SidebarBlockProps) => {
   return (
     <section className={`aside-block ${className ? className : ""}`}>
       {title && (
-        <Heading priority={priority ?? 4} style={style ?? "sidebarHeader"}>
+        <Heading priority={priority ?? 4} styleType={styleType ?? "underlineWeighted"}>
           {title}
         </Heading>
       )}

package/src/page_components/listing/listing_sidebar/SubmitApplication.tsx

@@ -3,7 +3,7 @@ import Markdown from "markdown-to-jsx"
 import { Address } from "../../../helpers/MultiLineAddress"
 import { ContactAddress } from "./ContactAddress"
 import { OrDivider } from "./OrDivider"
-import { Heading } from "../../../headers/Heading"
+import { Heading } from "../../../text/Heading"
 
 export interface ApplicationAddressesProps {
   /** The dropoff address for paper applications */
@@ -38,7 +38,7 @@ const SubmitApplication = ({
         <div className="text-serif-lg">{strings.sectionHeader}</div>
         {applicationMailingAddress && (
           <>
-            <Heading priority={3} style={"sidebarSubHeader"}>
+            <Heading priority={3} styleType={"capsWeighted"}>
               {strings.mailHeader}
             </Heading>
             <>
@@ -51,13 +51,13 @@ const SubmitApplication = ({
         {applicationDropOffAddress && (
           <>
             {applicationMailingAddress && <OrDivider bgColor="gray-100" />}
-            <Heading priority={3} style={"sidebarSubHeader"}>
+            <Heading priority={3} styleType={"capsWeighted"}>
               {strings.dropOffHeader}
             </Heading>
             <ContactAddress address={applicationDropOffAddress} mapString={strings.mapString} />
             {applicationDropOffAddressOfficeHours && (
               <>
-                <Heading priority={3} style={"sidebarSubHeader"}>
+                <Heading priority={3} styleType={"capsWeighted"}>
                   {strings.officeHoursHeader}
                 </Heading>
                 <p className="mt-4 text-tiny text-gray-750">

package/src/page_components/listing/listing_sidebar/events/EventSection.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { Heading } from "../../../../headers/Heading"
+import { Heading } from "../../../../text/Heading"
 
 export type EventType = {
   timeString?: string
@@ -28,7 +28,10 @@ const EventSection = (props: EventSectionProps) => {
   return (
     <section className="aside-block">
       {props.headerText && (
-        <Heading priority={4} style={props.sectionHeader ? "sidebarHeader" : "sidebarSubHeader"}>
+        <Heading
+          priority={4}
+          styleType={props.sectionHeader ? "underlineWeighted" : "capsWeighted"}
+        >
           {props.headerText}
         </Heading>
       )}

package/src/sections/InfoCardGrid.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { Heading } from "../headers/Heading"
+import { Heading } from "../text/Heading"
 import "./InfoCardGrid.scss"
 
 export interface InfoCardGridProps {
@@ -11,7 +11,7 @@ export interface InfoCardGridProps {
 const InfoCardGrid = (props: InfoCardGridProps) => (
   <section className="info-cards">
     <header className="info-cards__header">
-      <Heading style={"sidebarHeader"} priority={2} className={"text-tiny"}>
+      <Heading styleType={"underlineWeighted"} priority={2} className={"text-tiny"}>
         {props.title}
       </Heading>
       {props.subtitle && <p className="info-cards__subtitle">{props.subtitle}</p>}

package/src/tables/CategoryTable.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { StackedTable, StackedTableProps } from "./StackedTable"
-import { Heading } from "../headers/Heading"
+import { Heading } from "../text/Heading"
 
 export interface CategoryTableSection {
   /** The header text for a category */
@@ -18,7 +18,7 @@ const CategoryTable = (props: CategoryTableProps) => {
   const tables = props.categoryData.map((category, index) => {
     return (
       <div key={index}>
-        <Heading priority={3} style={"categoryHeader"}>
+        <Heading priority={3} styleType={"lightWeighted"}>
           {category.header}
         </Heading>
         <hr className={"my-2"} />

package/src/text/Heading.docs.mdx

@@ -0,0 +1,18 @@
+import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { Swatch } from "../prototypes/Swatch"
+import { Heading } from "./Heading"
+
+# Heading
+
+The heading component renders an HTML heading with a flexible priority and style. Each style available maps to a [Typography](?path=/story/theming-typography--page) variant.
+
+<Canvas>
+  <Story id="text-heading--large-header" />
+</Canvas>
+
+<br />
+<br />
+
+## Component Properties
+
+<ArgsTable of={Heading} />

package/src/{headers → text}/Heading.tsx

@@ -4,26 +4,26 @@ export interface HeadingProps {
   children?: React.ReactNode
   className?: string
   priority?: number
-  style?: HeaderType
+  styleType?: HeaderType
 }
 
 export type HeaderType = keyof typeof HeaderStyleMap
 
 const HeaderStyleMap = {
-  cardHeader: "card-header",
-  cardSubheader: "card-subheader",
-  tableHeader: "table-header",
-  tableSubheader: "table-subheader",
-  sidebarHeader: "text-caps-underline",
-  categoryHeader: "category-header",
-  sidebarSubHeader: "text-caps-tiny",
+  largePrimary: "text__large-primary",
+  mediumNormal: "text__medium-normal",
+  smallWeighted: "text__small-weighted",
+  smallNormal: "text__small-normal",
+  underlineWeighted: "text__underline-weighted",
+  lightWeighted: "text__light-weighted",
+  capsWeighted: "text__caps-weighted",
 }
 
 const Heading = (props: HeadingProps) => {
   const priority = props.priority && props.priority >= 1 && props.priority <= 6 ? props.priority : 1
   const Tag = `h${priority}` as keyof JSX.IntrinsicElements
   const classNames = []
-  if (props.style) classNames.push(HeaderStyleMap[props.style])
+  if (props.styleType) classNames.push(HeaderStyleMap[props.styleType])
   if (props.className) classNames.push(props.className)
 
   return <Tag className={classNames.join(" ")}>{props.children}</Tag>

package/src/text/Tag.scss

@@ -122,7 +122,7 @@
   }
 
   &.is-info {
-    color: var(--info-appearance-label-color, var(--bloom-color-gray-800));
+    color: var(--info-appearance-label-color, var(--bloom-text-color-dark));
     background-color: var(--info-appearance-background-color, var(--bloom-color-warn-light));
   }
 

package/tailwind.config.js

@@ -89,6 +89,7 @@ module.exports = {
         800: "var(--bloom-color-gray-800)",
         750: "var(--bloom-color-gray-750)",
         700: "var(--bloom-color-gray-700)",
+        650: "var(--bloom-color-gray-650)",
         600: "var(--bloom-color-gray-600)",
         550: "var(--bloom-color-gray-550)",
         500: "var(--bloom-color-gray-500)",