go
/
svelte-kit-vice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '0353170982'
${ noResults }
svelte-kit-vice/src/uix/eidos/components/text/text.css

94 lines
3.5 KiB
Raw Normal View History Unescape

feat(typography): Text — POC consuming new --style-* foundation tokens First typography primitive consuming the named-style tokens added in `015bd761`. Sets the canon for the remaining typography ports (Heading, Display, Code, CodeBlock, Kbd, Mark, Highlight, Link). API: - `style: 'body' | 'prose' | 'label' | 'caption'` (default `body`). Selects which `--style-{name}-*` token set the recipe consumes. - Per-axis overrides via `size`, `family`, `weight`, `color`, `align`. Each writes a local `--_text-{axis}` CSS variable that wins over the named style's default via the cascade. - `italic`, `underline` shorthand booleans. - `truncate` (single-line ellipsis) + `clamp={N}` (multi-line via CSS `-webkit-line-clamp`). - `as` prop switches the tag (default `'span'` — inline composable). - `tagStyle` escape hatch for one-off inline CSS that the prop surface doesn't cover (separate from the `style` named-style prop). Architectural choices documented in README: - Sizes map to eidos `xxs..xxxl` (not air's `1..12`). - Families use the eidos slot names (`primary/secondary/mono/display`) not air's domain aliases (`ui/prose/code`) — coherence with the foundation contract. - Colors are restricted to the content-role slots (`--color-content-*`) to preserve contrast guarantees. Free colors via `tagStyle`. - Canvas line-count measurement (air's `text` + bindable `lineCount`) deferred; CSS line-clamp covers the visual-truncate use case. Sidebar nav gains a `Typography` group with Text as its first entry. `npm run component:audit`: 82 / 82 PASS, 0 NEEDS-WORK. svelte-check 0 errors. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
/*
* 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;
}

Powered by TurnKey Linux.