Theming reference and integration guide. Every value below is read straight out of the library source at build time, so it describes the components you actually have installed.
125 style tokens are documented here. Fill in the third column of any table below. Values you enter build the stylesheet in the panel at the bottom of this page, and apply live to every component preview.
Declared in src/styles/tcc.css and resolved on every component
root, plus any element you give .tcc-root.
| Variable | Default | Your value |
|---|---|---|
--tcc-foreground Body text inside every component. | #000 | |
--tcc-background Component surfaces — cards, dialogs, inputs, buttons. | #fff | |
--tcc-foreground-alt Secondary text: captions, counts, supporting copy. | #333 | |
--tcc-border-color Emphasis rules and section dividers. | #777 | |
--tcc-border-alt-color Hairlines around cards, style grids and inputs. | #aaa | |
--tcc-action-color The one token most themes need to set — links, buttons, focus rings and slider tracks all derive from it. | red | |
--tcc-action-foreground Darker action tone: link text, outlined button text, primary hover fill. | color-mix(in hwb, var(--_tcc-action-color) 67%, #000 33%) | |
--tcc-action-background Pale action tint behind hovered outlined buttons. | color-mix(in hwb, var(--_tcc-action-color) 5%, #fff 95%) | |
--tcc-negative-color Destructive actions, such as removing a license. | #c00 | |
--tcc-warning-color Cart warnings — a style already covered by a package. | #a60 | |
--tcc-warning-background Fill behind a cart warning. The shipped default is missing its color-mix() wrapper, so it resolves to nothing — set this explicitly. | var(--_tcc-warning-color) 5%, var(--_tcc-background) 95% | |
--tcc-warning-border-color Border around a cart warning. Same malformed default as the fill above; set it explicitly. | var(--_tcc-warning-color) 50%, var(--_tcc-background) 50% |
| Variable | Default | Your value |
|---|---|---|
--tcc-text-font-family Prose inside components. inherit picks up your page font. | inherit | |
--tcc-text-font-weight Weight for that prose. | 400 | |
--tcc-line-height Base line height for prose. | 1.4 | |
--tcc-ui-font-family Every control: buttons, inputs, labels, prices, style names. | inherit | |
--tcc-ui-font-weight Weight for UI text. | 400 | |
--tcc-ui-line-height Line height for UI text and controls. | 1.2 | |
--tcc-ui-font-size Buttons, inputs and .tcc-ui. | 1rem | |
--tcc-ui-small-font-size Captions and subtotals — .tcc-ui-small. | 0.8rem | |
--tcc-ui-heading-l-font-size Package titles — .tcc-ui-heading-l. | 1.2rem | |
--tcc-heading-font-family Headings inside components. | inherit | |
--tcc-heading-font-weight Heading weight, also used by .tcc-ui-heading. | 700 | |
--tcc-heading-line-height Line height for headings. | 1.1 | |
--tcc-heading-font-size .tcc-heading — “Cart (2)”, order confirmation. | 1.8rem | |
--tcc-heading-l-font-size .tcc-heading-l — the “Buy Family” title. | 2.4rem |
| Variable | Default | Your value |
|---|---|---|
--tcc-radius Corner radius for buttons, inputs and dropdowns. | 0.2rem | |
--tcc-radius-l Larger radius, for cards and dialogs. | 0.5rem | |
--tcc-border-width Section rules inside Buy and Cart. | 1px | |
--tcc-max-width Width a component grows to before it stops. | 60rem | |
--tcc-duration Transition duration for hovers and expanding rows. | 0.2s |
| Variable | Default | Your value |
|---|---|---|
--tcc-focus-outline-color Focus ring colour. | var(--_tcc-action-color) | |
--tcc-focus-outline-width Focus ring thickness. | 2px | |
--tcc-focus-outline-offset Gap between the ring and the control. | 1px |
| Variable | Default | Your value |
|---|---|---|
--tcc-link-color Resting colour of .tcc-link. | var(--_tcc-action-foreground) | |
--tcc-link-hover-color Hover and focus colour. | var(--_tcc-action-color) | |
--tcc-link-text-decoration Declared rather than inherited, so a host a { } rule cannot bleed through. | underline |
| Variable | Default | Your value |
|---|---|---|
--tcc-button-background Fill of the outlined variant. | var(--_tcc-background) | |
--tcc-button-foreground Label colour of the outlined variant. | var(--_tcc-action-foreground) | |
--tcc-button-border-color Border of the outlined variant. | var(--_tcc-action-foreground) | |
--tcc-button-border-width Border width, both variants. | 1px | |
--tcc-button-radius Button corner radius. | var(--_tcc-radius) | |
--tcc-button-padding-block Vertical padding. | 0.5rem | |
--tcc-button-padding-inline Horizontal padding. | 1rem | |
--tcc-button-font-family Button label font. | var(--_tcc-ui-font-family) | |
--tcc-button-font-size Button label size. | var(--_tcc-ui-font-size) | |
--tcc-button-line-height Button label line height. | var(--_tcc-ui-line-height) | |
--tcc-button-hover-background Outlined variant on hover and focus. | var(--_tcc-action-background) | |
--tcc-button-hover-foreground Outlined label on hover and focus. | var(--_tcc-button-foreground) | |
--tcc-button-primary-background Fill of the primary variant. | var(--_tcc-action-color) | |
--tcc-button-primary-foreground Label colour of the primary variant. | var(--_tcc-background) | |
--tcc-button-primary-border-color Border of the primary variant. | var(--_tcc-action-foreground) | |
--tcc-button-primary-hover-background Primary fill on hover and focus. | var(--_tcc-action-foreground) | |
--tcc-button-primary-hover-foreground Primary label on hover and focus. | var(--_tcc-background) | |
--tcc-button-disabled-background Disabled outlined fill. The color-mix() default fades toward transparent; override it rather than fighting it with !important. | color-mix(in srgb, var(--_tcc-action-background) 60%, transparent) | |
--tcc-button-disabled-foreground Disabled outlined label. | color-mix(in srgb, var(--_tcc-action-foreground) 50%, transparent) | |
--tcc-button-disabled-border-color Disabled outlined border colour. | var(--_tcc-button-border-color) | |
--tcc-button-primary-disabled-background Disabled primary fill. | color-mix(in srgb, var(--_tcc-action-foreground) 60%, transparent) | |
--tcc-button-primary-disabled-foreground Disabled primary label. | color-mix(in srgb, var(--_tcc-action-background) 50%, transparent) | |
--tcc-button-primary-disabled-border-color Disabled primary border colour. | var(--_tcc-button-primary-border-color) | |
--tcc-button-group-gap Gap between buttons in a .tcc-button-group. | 4px | |
--tcc-button-group-margin-block Space above and below a button group. | 0.67rem |
| Variable | Default | Your value |
|---|---|---|
--tcc-input-background Field fill. | var(--_tcc-background) | |
--tcc-input-foreground Typed text. | var(--_tcc-foreground) | |
--tcc-input-border-color Resting border. | var(--_tcc-border-alt-color) | |
--tcc-input-focus-border-color Border once focused. | var(--_tcc-border-color) | |
--tcc-input-radius Field corner radius. | var(--_tcc-radius) | |
--tcc-input-padding Field padding. | 0.4rem 0.6rem |
| Variable | Default | Your value |
|---|---|---|
--tcc-range-width Width of the type-tester size slider. | 10rem | |
--tcc-range-track-color Track at rest. | var(--_tcc-border-alt-color) | |
--tcc-range-track-active-color Track while the slider has focus. | var(--_tcc-action-color) | |
--tcc-range-track-height Track thickness. | 2px | |
--tcc-range-thumb-size Thumb diameter. | 1rem | |
--tcc-range-thumb-color Thumb fill. | var(--_tcc-background) | |
--tcc-range-thumb-border-color Thumb ring. | var(--_tcc-action-color) |
Public in the same way, but declared inside one component’s scoped styles, so they only affect that component. Most inherit from a global token — override the global first, and reach for these only when one component needs to differ.
| Variable | Default | Your value |
|---|---|---|
--tcc-sticky-offset Push the sticky style bar down past a fixed site header. | 0px |
| Variable | Default | Your value |
|---|---|---|
--tcc-style-button-font-size Compact per-style action buttons. | 0.75rem | |
--tcc-style-button-padding-block Vertical padding on those buttons. | 0.33em | |
--tcc-style-button-padding-inline Horizontal padding on those buttons. | 0.67em | |
--tcc-style-tester-font-size Starting size of the type tester, before the slider moves it. | 72px |
| Variable | Default | Your value |
|---|---|---|
--tcc-style-list-label-font-size Captions under the style grid. | 0.6rem |
| Variable | Default | Your value |
|---|---|---|
--tcc-cart-max-width Cart width cap, independent of other components. | var(--_tcc-max-width) | |
--tcc-cart-sidebar-width Width of the subtotal column. | 12rem | |
--tcc-cart-sidebar-gap Gap between items and the subtotal column. | 1rem | |
--tcc-cart-margin Margin around the whole cart. | 1rem auto |
| Variable | Default | Your value |
|---|---|---|
--tcc-cart-count-before-content Text before the count. Set to "" for a bare number. | '(' | |
--tcc-cart-count-after-content Text after the count. | ')' |
| Variable | Default | Your value |
|---|---|---|
--tcc-checkbox-size Diameter of the visual checkbox square. | 1.125em |
| Variable | Default | Your value |
|---|---|---|
--tcc-dropdown-width | 100% | |
--tcc-dropdown-height | auto | |
--tcc-dropdown-color | var(--_tcc-foreground) | |
--tcc-dropdown-bg | var(--_tcc-background) | |
--tcc-dropdown-selected-color | var(--_tcc-action-background) | |
--tcc-dropdown-selected-bg | var(--_tcc-action-foreground) | |
--tcc-dropdown-label-padding | 0.5rem 1rem | |
--tcc-dropdown-label-radius | var(--_tcc-radius) | |
--tcc-dropdown-border-size | 1px | |
--tcc-dropdown-border-color | var(--_tcc-border-color) | |
--tcc-dropdown-icon-gap | 0.5em | |
--tcc-dropdown-options-maxheight | 80vh | |
--tcc-dropdown-options-padding | 0 | |
--tcc-dropdown-options-radius | var(--_tcc-radius) | |
--tcc-dropdown-option-padding | 0.5rem 1rem |
| Variable | Default | Your value |
|---|---|---|
--tcc-spinner-color Spinner arc colour. | var(--_tcc-action-color, #333) | |
--tcc-spinner-thickness Spinner stroke width. | 5px | |
--tcc-spinner-size Spinner diameter — em, so it tracks its context. | 2em |
| Variable | Default | Your value |
|---|---|---|
--tcc-hdyhau-form-font-family | var(--_tcc-ui-font-family, system-ui) | |
--tcc-hdyhau-form-font-size | 1rem | |
--tcc-hdyhau-form-color | var(--_tcc-foreground, #000) | |
--tcc-hdyhau-button-border-radius | var(--_tcc-radius, 0.25rem) | |
--tcc-hdyhau-button-color | var(--_tcc-background, #000) | |
--tcc-hdyhau-button-background-color | var(--_tcc-action-color, #fff) | |
--tcc-hdyhau-button-border | 1px solid transparent | |
--tcc-hdyhau-button-font-family | var(--_tcc-ui-font-family, system-ui) | |
--tcc-hdyhau-button-font-size | 1rem | |
--tcc-hdyhau-button-font-weight | 400 | |
--tcc-hdyhau-button-line-height | inherit | |
--tcc-hdyhau-button-padding | 0.5rem 1rem | |
--tcc-hdyhau-button-color-hover | var(--tcc-hdyhau-button-color, var(--_tcc-background, #000)) | |
--tcc-hdyhau-button-hover-background-color | var(--_tcc-action-foreground, #333) | |
--tcc-hdyhau-button-border-hover | var(--tcc-hdyhau-button-border, 1px solid transparent) | |
--tcc-hdyhau-button-color-disabled | var(--tcc-hdyhau-button-color, var(--_tcc-background, #000)) | |
--tcc-hdyhau-button-background-color-disabled | var(--tcc-hdyhau-button-background-color, var(--_tcc-action-color, #fff)) | |
--tcc-hdyhau-button-border-disabled | var(--tcc-hdyhau-button-border, 1px solid transparent) | |
--tcc-hdyhau-muted-text-color | var(--_tcc-foreground-alt, #555) |
Drop this into your site’s stylesheet. Swap html for any wrapper
to theme a subtree instead of the whole page.
/* No overrides yet — fill in any field above. */
Five components, one per page of the purchase flow. Each imports the stylesheet itself and reads the cart from local storage, so the only state you pass is configuration and catalogue data.
| Component | Lives on | In this demo | Root class |
|---|---|---|---|
CartCount | Site chrome — put it in your layout so it appears on every page. | src/layouts/Layout.astro | .tcc-cart-count |
Buy | Family page — one per family, usually a dynamic route. | src/pages/families/[family].astro | .tcc-buy |
Cart | Cart page — whatever siteConfig.cartUrl points at. | src/pages/cart.astro | .tcc-cart |
Checkout | Checkout page — whatever siteConfig.checkoutUrl points at. | src/pages/checkout.astro | .tcc-checkout |
CheckoutSuccess | Order confirmation page — whatever siteConfig.successUrl points at, and the page successLink targets. | src/pages/order-confirmation.astro | .tcc-checkout-success |
Every component is an island: it needs a client:* directive to
hydrate. Import paths below are the package exports — inside this repo they
resolve through the @components/* alias instead.
CartCount The number of items in the cart, for your nav. Renders nothing while the cart is empty.
Lives on Site chrome — put it in your layout so it appears on every page.
| Prop | Type | Notes |
|---|---|---|
class | string | Appended to tcc-cart-count, for positioning it in your nav. |
--- import CartCount from '@the-type-founders/type-commerce-components/CartCount'; --- <a href="/cart/">View Cart <CartCount client:load /></a>
Buy The whole purchase surface for one family: license picker, packages, per-style type testers, add-to-cart.
Lives on Family page — one per family, usually a dynamic route.
| Prop | Type | Notes |
|---|---|---|
siteConfig required | SiteConfig | Your site object — URLs, foundry ids, contact email. Import the type from @the-type-founders/type-commerce-components/siteConfig. |
licenses required | License[] | From client.getActiveLicenses(). Sorted for you. |
familyProductData required | string | familyProduct.serialize(). Serialized because an island can only receive plain values across the server/client boundary. |
ribbiProductData | string | family.getEssentialsProduct()?.serialize() — adds the essentials package when the family has one. |
showTypeTesters | boolean | Defaults to true. Setting it false only hides testers on package-only families; use it when the page already has its own testers. |
pageItemSlug | string | Required for style-name links when siteConfig.stylePages is set. Pass the page’s [item] route param. |
---
import Buy from '@the-type-founders/type-commerce-components/Buy';
import { FamilyProduct } from '@the-type-founders/typographer-client/model.js';
import { client } from '../../util';
import { site } from '../../config';
const { family } = Astro.props;
const licenses = await client.getActiveLicenses();
const familyProduct = family.getProduct() as FamilyProduct;
const essentials = family.getEssentialsProduct();
---
<Buy
siteConfig={site}
{licenses}
familyProductData={familyProduct.serialize()}
ribbiProductData={essentials?.serialize()}
pageItemSlug={family.slug}
client:load
/> Cart Line items, license editing, subtotal and the link on to checkout. Reads the cart from local storage, so it needs no props about its contents.
Lives on Cart page — whatever siteConfig.cartUrl points at.
| Prop | Type | Notes |
|---|---|---|
siteConfig required | SiteConfig | Your site object — URLs, foundry ids, contact email. Import the type from @the-type-founders/type-commerce-components/siteConfig. |
licenses | License[] | Omit it and rows render read-only — the cart needs the active licenses to offer license changes. |
---
import Cart from '@the-type-founders/type-commerce-components/Cart';
import { client } from '../util';
import { site } from '../config';
const licenses = await client.getActiveLicenses();
---
<Cart siteConfig={site} {licenses} client:load /> Checkout Stripe embedded checkout, with its own loading, empty-cart, Stripe-error and backend-error states.
Lives on Checkout page — whatever siteConfig.checkoutUrl points at.
| Prop | Type | Notes |
|---|---|---|
siteConfig required | SiteConfig | Your site object — URLs, foundry ids, contact email. Import the type from @the-type-founders/type-commerce-components/siteConfig. |
successLink required | string | Absolute URL Stripe returns to after payment. It must be the page that renders CheckoutSuccess. |
priceMap | Record<string, string> | Build-time Stripe fallback. Leave it empty: prices come from the static /price-maps/<foundry>.json files. |
---
import Checkout from '@the-type-founders/type-commerce-components/Checkout';
import { site } from '../config';
const successLink = `${Astro.url.protocol}//${Astro.url.host}/${site.successUrl}/`;
---
<Checkout siteConfig={site} {successLink} client:load /> CheckoutSuccess Order confirmation, font download button and the optional HubSpot survey. Reads session_id from the URL and empties the cart on mount.
Lives on Order confirmation page — whatever siteConfig.successUrl points at, and the page successLink targets.
| Prop | Type | Notes |
|---|---|---|
siteConfig required | SiteConfig | Your site object — URLs, foundry ids, contact email. Import the type from @the-type-founders/type-commerce-components/siteConfig. |
---
import CheckoutSuccess from '@the-type-founders/type-commerce-components/CheckoutSuccess';
import { site } from '../config';
---
<CheckoutSuccess siteConfig={site} client:load /> Previews below are the real components, hydrated only when you open one, and themed by whatever you entered above.
CartCount
Shows your actual cart count, and hides itself at zero — add
something in the Buy preview to see it appear.
Cart
Buy
Live and wired to the catalogue (
ivy:ivyora). Adding to the cart really
adds to your cart.
Like any software, fonts are licensed for specific uses. All of our licenses allow commercial use — the right one simply depends on how you plan to use the fonts.
Host fonts on your website and display live text using HTML and @font-face CSS. Pricing is based on your monthly pageviews.
Web License TermsEmbed fonts directly in a mobile app. Licensing is based on the number of app titles and covers distribution across platforms like iOS and Android, for apps with up to 25,000 monthly active users.
App License TermsInstall fonts on your computer to create static assets like logos, social media images, presentations, and print materials. Each person who installs the font needs a license. Embedding in apps, automated systems, or hosting on a website requires a different license.
Desktop License TermsSelect individual styles starting at $29.99 per style
CartYour real cart — the empty state until you add something.
CheckoutWith an empty cart this settles on the “no items” state without contacting Stripe. With items in the cart, opening this does create a real Stripe checkout session.
CheckoutSuccess empties your cart
The component clears the cart on mount, so opening this preview
clears yours. There is no session_id in this page’s URL,
so it also shows the session-error state — which is what that state
looks like.
You may download your fonts here:
If your purchase includes a subscription, please note that you have signed up for auto-renewal. This means you will be billed now and again when the license renews in one year. You can edit or cancel your subscription at any time using the link in the order confirmation or by emailing us at info@gregthompson.com.