css-tags 0.1.0

package/core/text.css

@@ -0,0 +1,171 @@
+/**
+ * text.css
+ *
+ * A declarative typography primitive.
+ * Supports <text>, [data-text], and .text hosts.
+ * ------------------------------------------------------------------------------
+ * Uses the Lea Verou auto-contrast trick: oklch relative color syntax reads
+ * the inherited --bg lightness and flips text between light/dark automatically.
+ *
+ * The color="" attribute accepts:
+ *   - Keywords: "muted", "subtle", "default", "overt" (auto-contrast levels)
+ *   - Semantic: "success", "warning", "error", "info", "link", "accent"
+ *   - Raw CSS values: "var(--text-muted)", "oklch(50% 0.2 250)", etc.
+ *
+ * @feature {attr()} - Used for direct property control.
+ * @feature {Lea Verou Auto-Contrast} - oklch(from var(--bg) ...) for automatic
+ *   readable text color against any background.
+ * @feature {Line-Clamp} - Supports both single-line and multi-line truncation.
+ */
+
+:is(text, [data-text], .text) {
+  /* --- Base Styles & Defaults --- */
+  --_text-align: attr(align type(*), start);
+  --_text-transform: attr(transform type(*), none);
+  /* `style` is a native global attribute; use `font-style` for this API. */
+  --_font-style: attr(font-style type(*), normal);
+  --_text-wrap: attr(wrap type(*), pretty);
+  --_tracking: attr(tracking type(*), normal);
+
+  /* --- Inherited Background for Auto-Contrast --- */
+  /* --bg inherits from the nearest ancestor that sets it (box, body, etc.).
+     Falls back to --base when no ancestor has set --bg. */
+  --_bg: var(--bg, var(--base));
+
+  display: inline-block;
+  margin: 0;
+
+  /* --- Apply variables to actual CSS properties --- */
+  font-size: var(--_fs, var(--font-size-base));
+  font-weight: var(--_fw, var(--font-weight-normal));
+  line-height: var(--_lh, var(--line-height-normal));
+  letter-spacing: var(--_tracking);
+  text-align: var(--_text-align);
+  text-transform: var(--_text-transform);
+  font-style: var(--_font-style);
+  text-wrap: var(--_text-wrap);
+
+  /* Default color: auto-contrast "default" level against --bg.
+     clamp flips lightness: dark bg → high l (light text), light bg → low l (dark text).
+     The clamp range [0.15, 0.85] controls how extreme the contrast is. */
+  color: var(--_color, oklch(from var(--_bg) clamp(0.15, (0.65 / l - 1) * 999, 0.85) min(c, 0.03) h));
+}
+
+/* Preserve the expected box behavior of semantic block content. */
+:is(p, h1, h2, h3, h4, h5, h6, blockquote):is([data-text], .text) {
+  display: block;
+}
+
+/* --- Size Variants (Maps to --font-size tokens) --- */
+:is(text, [data-text], .text)[size="xs"]  { --_fs: var(--font-size-xs); }
+:is(text, [data-text], .text)[size="sm"]  { --_fs: var(--font-size-sm); }
+:is(text, [data-text], .text)[size="base"] { --_fs: var(--font-size-base); }
+:is(text, [data-text], .text)[size="lg"]  { --_fs: var(--font-size-lg); }
+:is(text, [data-text], .text)[size="xl"]  { --_fs: var(--font-size-xl); }
+:is(text, [data-text], .text)[size="2xl"] { --_fs: var(--font-size-2xl); }
+:is(text, [data-text], .text)[size="3xl"] { --_fs: var(--font-size-3xl); }
+:is(text, [data-text], .text)[size="4xl"] { --_fs: var(--font-size-4xl); }
+:is(text, [data-text], .text)[size="5xl"] { --_fs: var(--font-size-5xl); }
+:is(text, [data-text], .text)[size="6xl"] { --_fs: var(--font-size-6xl); }
+
+/* --- Weight Variants (Maps to --font-weight tokens) --- */
+:is(text, [data-text], .text)[weight="thin"]     { --_fw: var(--font-weight-thin); }
+:is(text, [data-text], .text)[weight="light"]    { --_fw: var(--font-weight-light); }
+:is(text, [data-text], .text)[weight="normal"]   { --_fw: var(--font-weight-normal); }
+:is(text, [data-text], .text)[weight="medium"]   { --_fw: var(--font-weight-medium); }
+:is(text, [data-text], .text)[weight="semibold"] { --_fw: var(--font-weight-semibold); }
+:is(text, [data-text], .text)[weight="bold"]     { --_fw: var(--font-weight-bold); }
+:is(text, [data-text], .text)[weight="black"]    { --_fw: var(--font-weight-black); }
+
+/* --- Letter Spacing (tracking) Variants --- */
+:is(text, [data-text], .text)[tracking="tighter"] { --_tracking: var(--letter-spacing-tighter); }
+:is(text, [data-text], .text)[tracking="tight"]   { --_tracking: var(--letter-spacing-tight); }
+:is(text, [data-text], .text)[tracking="normal"]  { --_tracking: var(--letter-spacing-normal); }
+:is(text, [data-text], .text)[tracking="wide"]    { --_tracking: var(--letter-spacing-wide); }
+:is(text, [data-text], .text)[tracking="wider"]   { --_tracking: var(--letter-spacing-wider); }
+:is(text, [data-text], .text)[tracking="widest"]  { --_tracking: var(--letter-spacing-widest); }
+
+/* ======================================================= */
+/* ==               COLOR SYSTEM                        == */
+/* ======================================================= */
+
+/* --- Raw CSS value pass-through ---
+   Any color="" value that doesn't match a keyword below flows through
+   attr() directly, e.g. color="var(--text-muted)" or color="red". */
+:is(text, [data-text], .text)[color] {
+  --_color: attr(color type(*));
+}
+
+/* --- Auto-Contrast Keyword Levels ---
+   Each level adjusts the clamp range to control contrast intensity.
+   On light bg (l>0.6): text gets the LOW end of the range (dark text).
+   On dark bg  (l<0.6): text gets the HIGH end of the range (light text). */
+:is(text, [data-text], .text)[color="muted"] {
+  --_color: oklch(from var(--_bg) clamp(0.35, (0.65 / l - 1) * 999, 0.65) min(c, 0.02) h);
+}
+
+:is(text, [data-text], .text)[color="subtle"] {
+  --_color: oklch(from var(--_bg) clamp(0.25, (0.65 / l - 1) * 999, 0.75) min(c, 0.03) h);
+}
+
+:is(text, [data-text], .text)[color="default"] {
+  --_color: oklch(from var(--_bg) clamp(0.15, (0.65 / l - 1) * 999, 0.85) min(c, 0.03) h);
+}
+
+:is(text, [data-text], .text)[color="overt"] {
+  --_color: oklch(from var(--_bg) clamp(0.05, (0.65 / l - 1) * 999, 0.95) min(c, 0.04) h);
+}
+
+/* --- Semantic & Brand Colors --- */
+:is(text, [data-text], .text)[color="link"]      { --_color: var(--text-link); }
+:is(text, [data-text], .text)[color="accent"]    { --_color: var(--accent); }
+:is(text, [data-text], .text)[color="secondary"] { --_color: var(--secondary); }
+:is(text, [data-text], .text)[color="tertiary"]  { --_color: var(--tertiary); }
+
+/* --- Feedback Colors --- */
+:is(text, [data-text], .text)[color="success"] { --_color: var(--text-success); }
+:is(text, [data-text], .text)[color="warning"] { --_color: var(--text-warning); }
+:is(text, [data-text], .text)[color="error"]   { --_color: var(--text-error); }
+:is(text, [data-text], .text)[color="info"]    { --_color: var(--text-info); }
+
+/* --- Line Height (leading) Variants --- */
+:is(text, [data-text], .text)[leading="none"]    { --_lh: var(--line-height-none); }
+:is(text, [data-text], .text)[leading="tight"]   { --_lh: var(--line-height-tight); }
+:is(text, [data-text], .text)[leading="snug"]    { --_lh: var(--line-height-snug); }
+:is(text, [data-text], .text)[leading="normal"]  { --_lh: var(--line-height-normal); }
+:is(text, [data-text], .text)[leading="relaxed"] { --_lh: var(--line-height-relaxed); }
+:is(text, [data-text], .text)[leading="loose"]   { --_lh: var(--line-height-loose); }
+
+/* --- Display Override --- */
+:is(text, [data-text], .text)[display="inline"] { display: inline; }
+:is(text, [data-text], .text)[display="block"]  { display: block; }
+
+/* --- Readable line-length constraints --- */
+:is(text, [data-text], .text)[measure="body"] { max-inline-size: var(--measure-body); }
+:is(text, [data-text], .text)[measure="heading"] { max-inline-size: var(--measure-heading); }
+:is(text, [data-text], .text)[measure="wide"] { max-inline-size: var(--measure-wide, var(--measure-code)); }
+
+/* ======================================================= */
+/* ==               TRUNCATION LOGIC                    == */
+/* ======================================================= */
+
+/* --- Common styles for all line-clamping --- */
+:is(text, [data-text], .text):is([truncate], [lines]) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* text-wrap: balance or pretty breaks line-clamp, so it MUST be disabled. */
+  text-wrap: initial !important;
+}
+
+/* --- Single-line truncation (shorthand for lines="1") --- */
+:is(text, [data-text], .text)[truncate] {
+  -webkit-line-clamp: 1;
+}
+
+/* --- Multi-line truncation --- */
+:is(text, [data-text], .text)[lines="2"] { -webkit-line-clamp: 2; }
+:is(text, [data-text], .text)[lines="3"] { -webkit-line-clamp: 3; }
+:is(text, [data-text], .text)[lines="4"] { -webkit-line-clamp: 4; }
+:is(text, [data-text], .text)[lines="5"] { -webkit-line-clamp: 5; }