You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
3.5 KiB
94 lines
3.5 KiB
/*
|
|
* Text recipe — applies one of the foundation's `--style-{name}-*`
|
|
* named typography styles, with per-axis overrides via local `--_text-*`
|
|
* variables. Default style is `body`.
|
|
*
|
|
* Order of resolution (per CSS variable cascade):
|
|
* 1. Per-instance override (`--_text-{axis}`) set inline by the wrapper
|
|
* when the consumer passes a prop like `size="lg"`.
|
|
* 2. Named style token (`--style-{textStyle}-{axis}`) selected by the
|
|
* active `data-style` attribute.
|
|
*
|
|
* `revert-layer` is not used here — typography has authoritative defaults
|
|
* (it's never "unset" — there is always a body/prose/label/caption fallback).
|
|
*/
|
|
|
|
[data-text] {
|
|
font-family: var(--_text-font-family, var(--style-body-font-family));
|
|
font-size: var(--_text-font-size, var(--style-body-font-size));
|
|
font-weight: var(--_text-font-weight, var(--style-body-font-weight));
|
|
line-height: var(--_text-line-height, var(--style-body-line-height));
|
|
letter-spacing: var(--_text-letter-spacing, var(--style-body-letter-spacing));
|
|
color: var(--_text-color, var(--style-body-color));
|
|
text-align: var(--_text-align, inherit);
|
|
font-style: normal;
|
|
text-decoration: none;
|
|
margin: 0;
|
|
}
|
|
|
|
[data-text][data-style='prose'] {
|
|
font-family: var(--_text-font-family, var(--style-prose-font-family));
|
|
font-size: var(--_text-font-size, var(--style-prose-font-size));
|
|
font-weight: var(--_text-font-weight, var(--style-prose-font-weight));
|
|
line-height: var(--_text-line-height, var(--style-prose-line-height));
|
|
letter-spacing: var(--_text-letter-spacing, var(--style-prose-letter-spacing));
|
|
color: var(--_text-color, var(--style-prose-color));
|
|
}
|
|
|
|
[data-text][data-style='label'] {
|
|
font-family: var(--_text-font-family, var(--style-label-font-family));
|
|
font-size: var(--_text-font-size, var(--style-label-font-size));
|
|
font-weight: var(--_text-font-weight, var(--style-label-font-weight));
|
|
line-height: var(--_text-line-height, var(--style-label-line-height));
|
|
letter-spacing: var(--_text-letter-spacing, var(--style-label-letter-spacing));
|
|
color: var(--_text-color, var(--style-label-color));
|
|
}
|
|
|
|
[data-text][data-style='caption'] {
|
|
font-family: var(--_text-font-family, var(--style-caption-font-family));
|
|
font-size: var(--_text-font-size, var(--style-caption-font-size));
|
|
font-weight: var(--_text-font-weight, var(--style-caption-font-weight));
|
|
line-height: var(--_text-line-height, var(--style-caption-line-height));
|
|
letter-spacing: var(--_text-letter-spacing, var(--style-caption-letter-spacing));
|
|
color: var(--_text-color, var(--style-caption-color));
|
|
}
|
|
|
|
[data-text][data-italic] {
|
|
font-style: italic;
|
|
}
|
|
|
|
[data-text][data-underline] {
|
|
text-decoration: underline;
|
|
text-underline-offset: 0.15em;
|
|
}
|
|
|
|
/* Single-line truncation with ellipsis. Requires a constrained
|
|
* inline-size on the container; this rule sets the necessary primitives
|
|
* (white-space + overflow + text-overflow) so the consumer only needs
|
|
* to provide the width. */
|
|
[data-text][data-truncate] {
|
|
display: inline-block;
|
|
max-inline-size: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
/* Multi-line clamp via -webkit-line-clamp. Read the line count from
|
|
* the per-instance `--_text-clamp` (set inline by the wrapper). */
|
|
[data-text][data-clamp] {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: var(--_text-clamp, 1);
|
|
line-clamp: var(--_text-clamp, 1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* When clamp + truncate collide, clamp wins (multi-line). */
|
|
[data-text][data-clamp][data-truncate] {
|
|
display: -webkit-box;
|
|
white-space: normal;
|
|
text-overflow: clip;
|
|
}
|