@bloom-housing/ui-components 4.2.2-alpha.3 → 4.2.2-alpha.30

package/CHANGELOG.md

@@ -3,6 +3,279 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.2.2-alpha.30](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.29...@bloom-housing/ui-components@4.2.2-alpha.30) (2022-05-13)
+
+
+### Features
+
+* missing translations, script to merge new translations ([#2728](https://github.com/bloom-housing/bloom/issues/2728)) ([1abc50d](https://github.com/bloom-housing/bloom/commit/1abc50de6b3311e92d47292b6f5ec69bf4c5094a))
+
+
+
+
+
+## [4.2.2-alpha.29](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.28...@bloom-housing/ui-components@4.2.2-alpha.29) (2022-05-11)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.28](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.27...@bloom-housing/ui-components@4.2.2-alpha.28) (2022-05-11)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.27](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.26...@bloom-housing/ui-components@4.2.2-alpha.27) (2022-05-10)
+
+
+### Bug Fixes
+
+* site footer overflowing ([#2719](https://github.com/bloom-housing/bloom/issues/2719)) ([b36b9f3](https://github.com/bloom-housing/bloom/commit/b36b9f3b1acad7a3f030662ac396a2375f0b7db3))
+
+
+
+
+
+## [4.2.2-alpha.26](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.25...@bloom-housing/ui-components@4.2.2-alpha.26) (2022-05-05)
+
+
+### Bug Fixes
+
+* use appropriate copy for FCFS vs Lottery in Application Confirmation screen ([#2702](https://github.com/bloom-housing/bloom/issues/2702)) ([5289504](https://github.com/bloom-housing/bloom/commit/52895044cba64eeb7789c68f0a5eb957785055b5))
+
+
+
+
+
+## [4.2.2-alpha.25](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.24...@bloom-housing/ui-components@4.2.2-alpha.25) (2022-05-04)
+
+
+### Bug Fixes
+
+* footer alignment issue with overflowing links ([#2713](https://github.com/bloom-housing/bloom/issues/2713)) ([b87be1d](https://github.com/bloom-housing/bloom/commit/b87be1da10d59df2616f5df51629a8201baa6f86))
+
+
+
+
+
+## [4.2.2-alpha.24](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.23...@bloom-housing/ui-components@4.2.2-alpha.24) (2022-05-04)
+
+
+### Code Refactoring
+
+* remove backend dependencies from sidebar application components ([#2675](https://github.com/bloom-housing/bloom/issues/2675)) ([d2ebf87](https://github.com/bloom-housing/bloom/commit/d2ebf87c34af3f5b6168fa4e08663fea0a4a872c))
+
+
+### BREAKING CHANGES
+
+* the LeasingAgent component has been renamed to Contact with a new generalized prop set, the SidebarAddress component has been renamed to ContactAddress with a new generalized prop set
+
+
+
+
+
+## [4.2.2-alpha.23](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.22...@bloom-housing/ui-components@4.2.2-alpha.23) (2022-05-04)
+
+
+### Code Refactoring
+
+* remove business logic, strings from waitlist component ([#2689](https://github.com/bloom-housing/bloom/issues/2689)) ([a5721db](https://github.com/bloom-housing/bloom/commit/a5721db518453ddbd777e50ca92fdeac19997aa9))
+
+
+### BREAKING CHANGES
+
+* the Waitlist component was renamed to QuantityRowSection which also has a new prop set to account for a flexible number of rows and strings
+
+
+
+
+
+## [4.2.2-alpha.22](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.21...@bloom-housing/ui-components@4.2.2-alpha.22) (2022-05-03)
+
+
+### Features
+
+* **backend:** improve ami chart dto definitions ([#2677](https://github.com/bloom-housing/bloom/issues/2677)) ([ca3890e](https://github.com/bloom-housing/bloom/commit/ca3890e2759f230824e31e6bd985300f40b0a0ed))
+
+
+
+
+
+## [4.2.2-alpha.21](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.20...@bloom-housing/ui-components@4.2.2-alpha.21) (2022-04-29)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.20](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.19...@bloom-housing/ui-components@4.2.2-alpha.20) (2022-04-29)
+
+
+### Bug Fixes
+
+* ux updates for new listing card design ([#2687](https://github.com/bloom-housing/bloom/issues/2687)) ([c8814ae](https://github.com/bloom-housing/bloom/commit/c8814ae57b62fa6f932017bb70d47663b09fca1a))
+
+
+
+
+
+## [4.2.2-alpha.19](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.18...@bloom-housing/ui-components@4.2.2-alpha.19) (2022-04-28)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.18](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.17...@bloom-housing/ui-components@4.2.2-alpha.18) (2022-04-28)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.17](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.16...@bloom-housing/ui-components@4.2.2-alpha.17) (2022-04-28)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.16](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.15...@bloom-housing/ui-components@4.2.2-alpha.16) (2022-04-27)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.15](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.14...@bloom-housing/ui-components@4.2.2-alpha.15) (2022-04-26)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.14](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.13...@bloom-housing/ui-components@4.2.2-alpha.14) (2022-04-22)
+
+
+### Features
+
+* swap anchor tags with LinkComponent for language routes ([#2686](https://github.com/bloom-housing/bloom/issues/2686)) ([a397930](https://github.com/bloom-housing/bloom/commit/a3979306fe39acd7b424a9e7364d791ad77fa2d0))
+
+
+
+
+
+## [4.2.2-alpha.13](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.12...@bloom-housing/ui-components@4.2.2-alpha.13) (2022-04-22)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.12](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.11...@bloom-housing/ui-components@4.2.2-alpha.12) (2022-04-22)
+
+
+### Bug Fixes
+
+* forgot password empty warning and two minor style changes ([#2680](https://github.com/bloom-housing/bloom/issues/2680)) ([01f1519](https://github.com/bloom-housing/bloom/commit/01f15194e2de8595a772c8c87f455d882e47f164))
+
+
+
+
+
+## [4.2.2-alpha.11](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.10...@bloom-housing/ui-components@4.2.2-alpha.11) (2022-04-21)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.10](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.9...@bloom-housing/ui-components@4.2.2-alpha.10) (2022-04-21)
+
+
+### Features
+
+* new category table component ([#2648](https://github.com/bloom-housing/bloom/issues/2648)) ([3b3fe46](https://github.com/bloom-housing/bloom/commit/3b3fe46dda3d0e553664c10cea46849551ce064c))
+
+
+### BREAKING CHANGES
+
+* There is a new prop interface for the StandardTable component and all components that use it, which includes passing cell content within a new object, allowing us to support new cell options - all tables will need to pass data with the new format.
+
+
+
+
+
+## [4.2.2-alpha.9](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.8...@bloom-housing/ui-components@4.2.2-alpha.9) (2022-04-20)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.8](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.7...@bloom-housing/ui-components@4.2.2-alpha.8) (2022-04-20)
+
+
+### Features
+
+* application timeout screen reader accessible ([#2625](https://github.com/bloom-housing/bloom/issues/2625)) ([0771ef3](https://github.com/bloom-housing/bloom/commit/0771ef3f7e4001efb4dae8cca06743801daace05))
+
+
+
+
+
+## [4.2.2-alpha.7](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.6...@bloom-housing/ui-components@4.2.2-alpha.7) (2022-04-20)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.6](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.5...@bloom-housing/ui-components@4.2.2-alpha.6) (2022-04-20)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.5](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.4...@bloom-housing/ui-components@4.2.2-alpha.5) (2022-04-19)
+
+
+### Bug Fixes
+
+* footer nav widths ([42aef6f](https://github.com/bloom-housing/bloom/commit/42aef6f74a8a7e27c6bdb870cb6c69c7569f41c0))
+
+
+
+
+
+## [4.2.2-alpha.4](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.3...@bloom-housing/ui-components@4.2.2-alpha.4) (2022-04-18)
+
+
+### Bug Fixes
+
+* add optional prop for Language Nav aria label ([#2672](https://github.com/bloom-housing/bloom/issues/2672)) ([5f1b3f6](https://github.com/bloom-housing/bloom/commit/5f1b3f66f5269cfd9285b958f608cdb41e779c70))
+
+
+
+
+
 ## [4.2.2-alpha.3](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.2...@bloom-housing/ui-components@4.2.2-alpha.3) (2022-04-18)
 
 

package/README.md

@@ -46,16 +46,22 @@ yarn test:a11y
 
 ## Tailwind
 
-- We are using the [Tailwind](https://v1.tailwindcss.com) framework to make use of their low-level utility library that styles components based on custom settings. We configure the settings in `tailwind.config`. Some styles live in a global folder, but for the most part our components are styled with isolated SCSS files.
+- We are using the [Tailwind](https://v2.tailwindcss.com) framework to make use of their low-level utility classes in page-level markup and sometimes in components. We configure the settings in `tailwind.config.js`.
 
-- Use Tailwind where possible before creating custom style sheets or custom classes for consistency.
-
-Vendor Plugins
+## Vendor Plugins
 
 - [AG Grid](https://www.ag-grid.com)
 
 ## Style Conventions
 
+- Some styles live in a global folder, but for the most part our components are styled with isolated SCSS files located alongside React component TS files.
+
+- We are currently in the process of migrating components to a second-generation styling convention which relies on CSS variables for design tokens and generally removes `@apply` Tailwind statements.
+
+- Bloom design tokens include colors, typography settings, sizes, borders, and so forth. They're located in the `src/global/tokens` folder.
+
+- More information on this process can be found in [Styling2ndGen.md](https://github.com/bloom-housing/bloom/blob/dev/docs/Styling2ndGen.md).
+
 ### Naming Conventions
 
 - Our recommendation for class naming methodology is a modified version of BEM. It still uses blocks, sections within blocks and modifiers, but with a subclass syntax for modifiers.

package/index.ts

@@ -52,23 +52,24 @@ export * from "./src/headers/SiteHeader"
 export * from "./src/headers/Heading"
 
 /* Helpers */
-export * from "./src/helpers/address"
 export * from "./src/helpers/capitalize"
 export * from "./src/helpers/dateToString"
+export * from "./src/helpers/debounce"
 export * from "./src/helpers/formOptions"
+export * from "./src/helpers/formatYesNoLabel"
+export * from "./src/helpers/getTranslationWithArguments"
 export * from "./src/helpers/links"
 export * from "./src/helpers/mergeDeep"
+export * from "./src/helpers/MultiLineAddress"
 export * from "./src/helpers/numberOrdinal"
-export * from "./src/helpers/translator"
-export * from "./src/helpers/debounce"
-export * from "./src/helpers/validators"
-export * from "./src/helpers/formatYesNoLabel"
-export * from "./src/helpers/getTranslationWithArguments"
+export * from "./src/helpers/OneLineAddress"
 export * from "./src/helpers/preferences"
 export * from "./src/helpers/resolveObject"
+export * from "./src/helpers/tableSummaries"
+export * from "./src/helpers/translator"
 export * from "./src/helpers/useIntersect"
 export * from "./src/helpers/useMutate"
-export * from "./src/helpers/tableSummaries"
+export * from "./src/helpers/validators"
 
 /* Icons */
 export * from "./src/icons/HeaderBadge"
@@ -98,6 +99,7 @@ export * from "./src/overlays/Drawer"
 export * from "./src/overlays/LoadingOverlay"
 
 /* Page Components */
+export * from "./src/page_components/ApplicationTimeline"
 export * from "./src/page_components/listing/AdditionalFees"
 export * from "./src/page_components/listing/ContentAccordion"
 export * from "./src/page_components/listing/ListingCard"
@@ -107,18 +109,19 @@ export * from "./src/page_components/listing/ListingMap"
 export * from "./src/page_components/listing/ListingsGroup"
 export * from "./src/page_components/listing/UnitTables"
 export * from "./src/page_components/listing/listing_sidebar/GetApplication"
-export * from "./src/page_components/listing/listing_sidebar/LeasingAgent"
+export * from "./src/page_components/listing/listing_sidebar/Contact"
 export * from "./src/page_components/listing/listing_sidebar/ListingUpdated"
 export * from "./src/page_components/listing/listing_sidebar/NumberedHeader"
 export * from "./src/page_components/listing/listing_sidebar/OrDivider"
 export * from "./src/page_components/listing/listing_sidebar/ReferralApplication"
-export * from "./src/page_components/listing/listing_sidebar/SidebarAddress"
+export * from "./src/page_components/listing/listing_sidebar/ContactAddress"
 export * from "./src/page_components/listing/listing_sidebar/SubmitApplication"
-export * from "./src/page_components/listing/listing_sidebar/Waitlist"
+export * from "./src/page_components/listing/listing_sidebar/QuantityRowSection"
 export * from "./src/page_components/listing/listing_sidebar/WhatToExpect"
 export * from "./src/page_components/listing/listing_sidebar/events/DownloadLotteryResults"
 export * from "./src/page_components/listing/listing_sidebar/events/EventSection"
 export * from "./src/page_components/sign-in/FormTerms"
+export * from "./src/page_components/sign-in/ResendConfirmationModal"
 export * from "./src/page_components/sign-in/FormSignIn"
 export * from "./src/page_components/sign-in/FormSignInMFAType"
 export * from "./src/page_components/sign-in/FormSignInMFACode"
@@ -143,6 +146,7 @@ export * from "./src/tables/StandardTable"
 export * from "./src/tables/GroupedTable"
 export * from "./src/tables/MinimalTable"
 export * from "./src/tables/StackedTable"
+export * from "./src/tables/CategoryTable"
 
 /* Text */
 export * from "./src/text/Description"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "4.2.2-alpha.3",
+  "version": "4.2.2-alpha.30",
   "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",
@@ -24,6 +24,7 @@
     "@babel/preset-env": "^7.15.4",
     "@emotion/core": "^10.0.35",
     "@emotion/styled": "^10.0.27",
+    "@geometricpanda/storybook-addon-badges": "^0.2.1",
     "@storybook/addon-a11y": "^6.3.8",
     "@storybook/addon-actions": "^6.3.8",
     "@storybook/addon-docs": "^6.3.8",
@@ -65,15 +66,16 @@
     "style-loader": "^1.1.3",
     "ts-jest": "^26.4.1",
     "ts-loader": "^8.0.4",
-    "typescript": "^3.9.7",
+    "typescript": "^4.5.5",
     "webpack": "^4.44.2"
   },
   "dependencies": {
-    "@bloom-housing/backend-core": "^4.2.2-alpha.1",
+    "@bloom-housing/backend-core": "^4.2.2-alpha.9",
     "@mapbox/mapbox-sdk": "^0.13.0",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/jwt-decode": "^2.2.1",
     "@types/markdown-to-jsx": "^6.11.2",
+    "@types/mdx": "^2.0.1",
     "@types/node": "^12.12.67",
     "@types/node-polyglot": "^2.4.1",
     "@types/react-beautiful-dnd": "^13.1.1",
@@ -100,5 +102,5 @@
     "tailwindcss": "2.2.10",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "b6c84fb42e0ac23c78b8886db058957a7feb03a1"
+  "gitHead": "45e070c511b6c92e239780f025a8e546a797faf5"
 }

package/scripts/generate-translations.ts

@@ -0,0 +1,60 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+// Prints out a combination of an inputted csv file and existing translations file
+// The CSV of the new translations must be in the format "key,value"
+// Temporarily update the ui-components tsconfig to include `"module": "commonjs"`
+// example: `ts-node generate-translations es new-spanish.csv > merged-spanish-translations.json`
+const fs = require("fs")
+const general = require("../src/locales/general.json")
+const es = require("../src/locales/es.json")
+const zh = require("../src/locales/zh.json")
+const vi = require("../src/locales/vi.json")
+const tl = require("../src/locales/tl.json")
+
+function main() {
+  if (process.argv.length < 4) {
+    console.log(
+      "usage: ts-node generate-translations es new-spanish.csv > merged-spanish-translations.json"
+    )
+    process.exit(1)
+  }
+
+  const languageMap = {
+    general: general,
+    es: es,
+    zh: zh,
+    vi: vi,
+    tl: tl,
+  }
+
+  const [language, filePath] = process.argv.slice(2)
+
+  // Process existing keys
+  const mergedTranslations: string[] = []
+  Object.keys(languageMap[language]).forEach((key) => {
+    const formattedTranslation = `"${key}": "${languageMap[language][key]}",`
+    mergedTranslations.push(JSON.stringify(formattedTranslation))
+  })
+
+  // Add new keys if not present
+  const newTranslationsFile: any = fs.readFileSync(filePath, "utf-8")
+  const newTranslations = newTranslationsFile.split("\n")
+  newTranslations.forEach((translation: string) => {
+    const [key, ...values] = translation.split(",")
+    const value = values.join("_")
+    if (!mergedTranslations[key]) {
+      const formattedTranslation = `"${key}": "${value}",`
+      mergedTranslations.push(JSON.stringify(formattedTranslation))
+    }
+  })
+
+  mergedTranslations.sort()
+  console.log("{")
+  mergedTranslations.forEach((translation) => {
+    console.log(JSON.parse(translation))
+  })
+  console.log("}")
+}
+
+void main()
+
+export {}

package/src/actions/Button.docs.mdx

@@ -0,0 +1,76 @@
+import { Canvas, Story, Source, ArgsTable } from "@storybook/addon-docs"
+import { Swatch } from "../prototypes/Swatch"
+import { Button } from "./Button"
+
+# Button
+
+The button component offers flexible usage with a variety of different appearance options. Size, color, and shape can be controlled via standardized props.
+
+<Canvas>
+  <Button>This is a Button</Button>
+</Canvas>
+
+## Variants
+
+There are several props which accept enums to adjust style type, border, and size. For example, to choose the "primary" style and a "small" size, you would pass the `AppearanceStyleType.primary` enum to `styleType` prop and `AppearanceSizeType.small` enum to `size` prop.
+
+<Canvas>
+  <Story id="actions-button--small-and-primary" />
+</Canvas>
+
+Other variants include appearances which aren't button-like such as `unstyled` and `inline`.
+
+## Component Properties
+
+<ArgsTable of={Button} />
+
+## Theming Variables
+
+You can apply CSS variables to the `.button` selector to customize the appearance of the component.
+
+### Color Variables
+
+| Name                                          | Color                                            | Description                          |
+| --------------------------------------------- | ------------------------------------------------ | ------------------------------------ |
+| `--primary-appearance-background-color`       | <Swatch colorVar="--bloom-color-primary" />      | Primary background color             |
+| `--primary-appearance-border-color`           | <Swatch colorVar="--bloom-color-primary" />      | Primary border color                 |
+| `--primary-appearance-label-color`            | <Swatch colorVar="--bloom-color-white" />        | Primary label color                  |
+| `--primary-appearance-hover-background-color` | <Swatch colorVar="--bloom-color-primary-dark" /> | Hover state primary background color |
+| `--primary-appearance-hover-border-color`     | <Swatch colorVar="--bloom-color-primary-dark" /> | Hover state primary border color     |
+| `--primary-appearance-hover-label-color`      | <Swatch colorVar="--bloom-color-white" />        | Hover state primary label color      |
+| `--success-appearance-background-color`       | <Swatch colorVar="--bloom-color-success" />      | Success background color             |
+| `--success-appearance-border-color`           | <Swatch colorVar="--bloom-color-success" />      | Success border color                 |
+| `--success-appearance-label-color`            | <Swatch colorVar="--bloom-color-white" />        | Success label color                  |
+| `--success-appearance-hover-background-color` | <Swatch colorVar="--bloom-color-success-dark" /> | Hover state success background color |
+| `--success-appearance-hover-border-color`     | <Swatch colorVar="--bloom-color-success" />      | Hover state success border color     |
+| `--success-appearance-hover-label-color`      | <Swatch colorVar="--bloom-color-white" />        | Hover state success label color      |
+| `--alert-appearance-background-color`         | <Swatch colorVar="--bloom-color-alert" />        | Alert background color               |
+| `--alert-appearance-border-color`             | <Swatch colorVar="--bloom-color-alert" />        | Alert border color                   |
+| `--alert-appearance-label-color`              | <Swatch colorVar="--bloom-color-white" />        | Alert label color                    |
+| `--alert-appearance-hover-background-color`   | <Swatch colorVar="--bloom-color-alert-dark" />   | Hover state alert background color   |
+| `--alert-appearance-hover-border-color`       | <Swatch colorVar="--bloom-color-alert" />        | Hover state alert border color       |
+| `--alert-appearance-hover-label-color`        | <Swatch colorVar="--bloom-color-white" />        | Hover state alert label color        |
+| `--warn-appearance-background-color`          | <Swatch colorVar="--bloom-color-warn" />         | Warning background color             |
+| `--warn-appearance-border-color`              | <Swatch colorVar="--bloom-color-warn" />         | Warning border color                 |
+| `--warn-appearance-label-color`               | <Swatch colorVar="--bloom-color-white" />        | Warning label color                  |
+| `--warn-appearance-hover-background-color`    | <Swatch colorVar="--bloom-color-warn-dark" />    | Hover state warning background color |
+| `--warn-appearance-hover-border-color`        | <Swatch colorVar="--bloom-color-warn" />         | Hover state warning border color     |
+| `--warn-appearance-hover-label-color`         | <Swatch colorVar="--bloom-color-white" />        | Hover state warning label color      |
+
+### Typographic & Spacing Variables
+
+| Name                     | Type        | Description                                         | Default                                             |
+| ------------------------ | ----------- | --------------------------------------------------- | --------------------------------------------------- |
+| `--label-font`           | Font        | Font family of the button label                     | `--bloom-font-alt-sans`                             |
+| `--label-transform`      | Case        | Text case of the button label                       | `uppercase`                                         |
+| `--label-letter-spacing` | Size        | The average gap between letters of the button label | `--bloom-letter-spacing-widest`                     |
+| `--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`                              |
+| `--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`                              |
+| `--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`                              |