@chassis-ui/css v0.10.0

Minor Changes

• 36ad9f7: Breaking: Chassis CSS is built with @chassis-ui/tokens 0.10, which names the font families by their job and gives every text role its own size and line height. The HTML font tokens, the size scale of the display family and five unused roles are gone.

  • The family for components is ui, the name of text until now: $font-family-ui, the "ui" key of $font-families, --cx-font-family-ui and .font-ui (font-ui in the Tailwind entry). Its scale is renamed with it: $font-size-ui-large and the other sizes, weights and line heights, the maps $ui-font-sizes, $ui-font-weights and $ui-line-heights, the custom properties --cx-font-size-ui-lg, --cx-font-weight-ui-strong, --cx-line-height-ui-lg and the others, and the font maps $font-ui-large-normal and the others. $font-size-lg, --cx-font-size-lg, .font-lg and the other names without a family keep their names and point at the ui scale.
  • .font-text and --cx-font-family-text (var(--cx-font-family-ui)) stay in this minor as deprecated names of .font-ui and --cx-font-family-ui, and are removed in the next breaking minor. The Sass variable $font-family-text is removed.
  • New family for reading content: prose, with $font-family-prose, --cx-font-family-prose and .font-prose, a scale of ten sizes and line heights and four weights ($prose-font-sizes, $prose-font-weights, $prose-line-heights, --cx-font-size-prose-lg and the others), and the compound utilities .font-prose.font-lg and .font-prose.font-strong beside the ones of code. In the default tokens prose is the typeface of ui, with the same sizes.
  • The display family has no scale of its own. Removed: $font-size-display-*, $line-height-display-*, $display-font-sizes, $display-line-heights, --cx-font-size-display-*, --cx-line-height-display-* and the compound utilities .font-display.font-lg and the other sizes, with no replacement: use a text role, or .font-prose with a size. .font-display, .font-display.font-strong and the other weights stay.
  • The HTML font tokens are removed: $font-size-html-*, $line-height-html-*, $font-weight-html-*, $font-family-html-heading, $html-font-sizes, $html-font-weights, $html-line-heights, the font maps $font-html-* and the 32 --cx-*-html-* custom properties. The headings, .blockquote and .attribution take their sizes from the text roles, with the values they had.
  • $context-fonts holds 20 text roles: jumbo, hero, h1 to h6, lead, blockquote, cite, and three sizes each of title, body and label. Their font maps are $font-h1, $font-lead, $font-title-large and the others ($font-context-* until now, and $font-blockquote and $font-cite for $font-html-blockquote and $font-html-cite). The heading, highlight, link, expired and code roles are removed, and .font-heading with them: use .font-h1 to .font-h6.
  • :root declares the size and line height of each role, --cx-font-size-h1, --cx-line-height-title-lg and the others (jumbo and hero keep their sizes in their classes), and the family and weight of each role group: --cx-font-family-heading, --cx-font-weight-title and the others of jumbo, hero, heading, lead, body, title, label, blockquote and cite. The Sass variables are $font-size-h1, $line-height-h1, $font-family-heading, $font-weight-heading and the others, in the maps $context-font-sizes, $context-line-heights, $context-font-families, $context-font-weights and $context-font-groups.
  • New classes .font-h1 to .font-h6, .font-blockquote and .font-cite. The headings style h1, .font-h1 and .h1 together; .h1 to .h6 are deprecated and removed in the next breaking minor.
  • A role class reads the family and weight of its role group, so --cx-font-family-title changes every title class and --cx-font-family-heading every heading. It sets font-style, text-transform, text-decoration and letter-spacing only where the role gives them a value: the italic of .font-blockquote, the letter spacing of .font-jumbo and .font-hero. A role class inside <em> or an underlined link now keeps the italic or the underline it inherits.
  • $heading-font-family is var(--font-family-heading), $heading-font-weight is var(--font-weight-heading), $h1-font-size is var(--font-size-h1) and $h1-line-height is var(--line-height-h1), and the same for the other levels. The custom properties --cx-h1-font-size, --cx-h1-line-height and the other levels, --cx-heading-font-family and --cx-heading-font-weight are no longer read: set --cx-font-size-h1 or --cx-font-family-heading instead. $bold-font-weight is var(--font-weight-mass), 700 as before.
  • With tokens 0.10, the title classes of the chassis brand use the display family, Montserrat, instead of Inter, with the weight they had.
  • A project with its own token source builds it with @chassis-ui/tokens 0.10. scss/tokens/ reads $cx-typography-font-family-ui, the prose scale and the context roles, which 0.9 does not have.