@cbpds/web-components/dist/collection/components/cbp-typography/cbp-typography.css

Web components for the CBP Design System.

/* 
 * Caution: "global styles" get injected into every component and can cause file size bloat.
 * These should only include SASS variables and mixins that are not written out to CSS directly
 */
/**
* @prop --cbp-typography-color: inherit;
* @prop --cbp-typography-color-dark: inherit;
* @prop --cbp-typography-color-small-text: var(--cbp-color-text-darkest);
* @prop --cbp-typography-color-small-text-dark: var(--cbp-color-text-lightest);
* @prop --cbp-typography-color-large-text: var(--cbp-color-text-darker);
* @prop --cbp-typography-color-large-text-dark: var(--cbp-color-text-lighter);
* @prop --cbp-typography-color-divider-fill: var(--cbp-color-gray-cool-10);
* @prop --cbp-typography-color-divider-fill-dark: var(--cbp-color-gray-cool-70);
* @prop --cbp-typography-color-divider-underline: var(--cbp-color-gray-cool-30);
* @prop --cbp-typography-color-divider-underline-dark: var(--cbp-color-gray-cool-50);
*/
:root {
  --cbp-typography-color: inherit;
  --cbp-typography-color-dark: inherit;
  --cbp-typography-color-small-text: var(--cbp-color-text-darkest);
  --cbp-typography-color-small-text-dark: var(--cbp-color-text-lightest);
  --cbp-typography-color-large-text: var(--cbp-color-text-darker);
  --cbp-typography-color-large-text-dark: var(--cbp-color-text-lighter);
  --cbp-typography-color-divider-fill: var(--cbp-color-gray-cool-10);
  --cbp-typography-color-divider-fill-dark: var(--cbp-color-gray-cool-70);
  --cbp-typography-color-divider-underline: var(--cbp-color-gray-cool-30);
  --cbp-typography-color-divider-underline-dark: var(--cbp-color-gray-cool-50);
}

[data-cbp-theme=light] cbp-typography[context*=dark],
[data-cbp-theme=dark] cbp-typography:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-typography-color-small-text: var(--cbp-typography-color-small-text-dark);
  --cbp-typography-color-large-text: var(--cbp-typography-color-large-text-dark);
  --cbp-typography-color-divider-fill: var(--cbp-typography-color-divider-fill-dark);
  --cbp-typography-color-divider-underline: var(--cbp-typography-color-divider-underline-dark);
}

/* Inherits body text:
    var(--cbp-color-text-lightest)
    var(--cbp-color-text-darkest)

    h6 is same as body text, all others are lighter/darker
*/
cbp-typography {
  color: var(--cbp-typography-color);
}
cbp-typography > * {
  color: var(--cbp-typography-color);
}
cbp-typography[variant=masthead-1] > *, cbp-typography[variant=masthead-2] > *, cbp-typography[variant=heading-xxl] > *, cbp-typography h1, cbp-typography[variant=heading-xl] > *, cbp-typography h2, cbp-typography[variant=heading-lg] > *, cbp-typography h3, cbp-typography[variant=heading-md] > *, cbp-typography h4, cbp-typography[variant=heading-sm] > *, cbp-typography h5 {
  --cbp-typography-color: var(--cbp-typography-color-large-text);
}
cbp-typography[divider=underline] > * {
  border-block-end: var(--cbp-typography-color-divider-underline) solid var(--cbp-border-size-md);
  padding-block: var(--cbp-space-3x);
}
cbp-typography[divider=underline][variant*=masthead] > *, cbp-typography[divider=underline][variant=heading-xxl] > * {
  padding-block-end: var(--cbp-space-4x);
  border-block-end-width: var(--cbp-border-size-xl);
}
cbp-typography[divider=underline][variant=heading-sm] > *, cbp-typography[divider=underline] h5 {
  border-block-end-width: var(--cbp-border-size-sm);
}
cbp-typography[divider=underline][variant=heading-xs] > *, cbp-typography[divider=underline] h6 {
  border-block-end-width: var(--cbp-border-size-sm);
  padding-block: var(--cbp-space-1x);
  padding-inline-end: var(--cbp-space-2x);
}
cbp-typography[divider=fill] > * {
  background-color: var(--cbp-typography-color-divider-fill);
  border-radius: var(--cbp-border-radius-soft);
  padding: var(--cbp-space-3x);
}
cbp-typography[divider=fill][variant=heading-xs] > *, cbp-typography[divider=fill] h6 {
  padding-block: var(--cbp-space-1x);
  padding-inline: var(--cbp-space-2x);
}
cbp-typography[divider][variant=heading-md] > *, cbp-typography[divider] h4 {
  padding-block: var(--cbp-space-2x);
}
cbp-typography[divider][variant=heading-sm] > *, cbp-typography[divider] h5 {
  padding-block: var(--cbp-space-1x);
}
cbp-typography[variant=masthead-1] > * {
  font-size: var(--cbp-font-size-masthead-1);
  font-weight: var(--cbp-font-weight-thin);
  line-height: var(--cbp-space-11x);
}
cbp-typography[variant=masthead-2] > * {
  font-size: var(--cbp-font-size-masthead-2);
  font-weight: var(--cbp-font-weight-thin);
  line-height: var(--cbp-space-10x);
}
cbp-typography[variant=heading-xxl] > *, cbp-typography h1 {
  font-size: var(--cbp-font-size-heading-xxl);
  font-weight: var(--cbp-font-weight-light);
  line-height: var(--cbp-space-9x);
}
cbp-typography[variant=heading-xl] > *, cbp-typography h2 {
  font-size: var(--cbp-font-size-heading-xl);
  font-weight: var(--cbp-font-weight-regular);
  line-height: var(--cbp-space-8x);
}
cbp-typography[variant=heading-lg] > *, cbp-typography h3 {
  font-size: var(--cbp-font-size-heading-lg);
  font-weight: var(--cbp-font-weight-regular);
  line-height: var(--cbp-space-7x);
}
cbp-typography[variant=heading-md] > *, cbp-typography h4 {
  font-size: var(--cbp-font-size-heading-md);
  font-weight: var(--cbp-font-weight-medium);
  line-height: var(--cbp-space-6x);
}
cbp-typography[variant=heading-sm] > *, cbp-typography h5 {
  font-size: var(--cbp-font-size-heading-sm);
  font-weight: var(--cbp-font-weight-medium);
  line-height: var(--cbp-space-6x);
}
cbp-typography[variant=heading-xs] > *, cbp-typography h6 {
  color: var(--cbp-typography-color-small-text);
  font-size: var(--cbp-font-size-heading-xs);
  font-weight: var(--cbp-font-weight-bold);
  line-height: var(--cbp-space-5x);
}
cbp-typography[variant=body-text] > *, cbp-typography p {
  font-size: var(--cbp-font-size-body);
  font-weight: var(--cbp-font-weight-regular);
  line-height: var(--cbp-space-5x);
  max-width: var(--cbp-line-length-longer);
  text-wrap: pretty;
}
cbp-typography[variant=subhead] > * {
  font-size: var(--cbp-font-size-subhead);
  font-weight: var(--cbp-font-weight-medium);
  line-height: var(--cbp-space-5x);
}
cbp-typography[variant=heading-dialog] > * {
  display: block;
  font-size: var(--cbp-font-size-heading-lg);
  font-weight: var(--cbp-font-weight-bold);
  line-height: var(--cbp-line-height-md);
  padding: 0;
  padding-block-end: var(--cbp-space-2x);
  margin-block-end: var(--cbp-space-2x);
}