@humanforest/tokens 0.1.0

package/type/type.css

@@ -0,0 +1,232 @@
+/* Forest typography core — generated by scripts/type.ts (size ramp = Tailwind's default scale). Do not edit.
+   Parallels packages/tokens/scales/scales.css: a systematic ramp + named roles. Families resolve via the shared
+   @theme vars in packages/ui/src/styles/forest.css (--font-display / --font-sans / --font-mono). */
+:root {
+  /* size ramp = Tailwind's default font-size scale, named xs…7xl (md = 16px base). Namespaced so it
+     never collides with Tailwind's own --text-* scale. Use as var(--type-text-lg) etc. For real
+     text-<name> Tailwind utilities, import the opt-in packages/tokens/type/type.theme.css. */
+  --type-text-xs: 0.75rem;
+  --type-text-sm: 0.875rem;
+  --type-text-md: 1rem; /* md · base */
+  --type-text-lg: 1.125rem;
+  --type-text-xl: 1.25rem;
+  --type-text-2xl: 1.5rem;
+  --type-text-3xl: 1.875rem;
+  --type-text-4xl: 2.25rem;
+  --type-text-5xl: 3rem;
+  --type-text-6xl: 3.75rem;
+  --type-text-7xl: 4.5rem;
+  --type-text-8xl: 6rem;
+  --type-text-9xl: 8rem;
+
+  /* role bundles — size · leading · weight · tracking · family */
+  --type-display-size: 3rem;
+  --type-display-line-height: 1;
+  --type-display-weight: 900;
+  --type-display-tracking: 0.01em;
+  --type-display-family: var(--font-display);
+  --type-display-transform: uppercase;
+  --type-display-size-fluid: clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
+  --type-headline-size: 1.875rem;
+  --type-headline-line-height: 1.1;
+  --type-headline-weight: 900;
+  --type-headline-tracking: 0.01em;
+  --type-headline-family: var(--font-display);
+  --type-headline-transform: uppercase;
+  --type-title-size: 1.5rem;
+  --type-title-line-height: 1.18;
+  --type-title-weight: 700;
+  --type-title-tracking: 0em;
+  --type-title-family: var(--font-sans);
+  --type-title-transform: none;
+  --type-heading-sm-size: 1.125rem;
+  --type-heading-sm-line-height: 1.3;
+  --type-heading-sm-weight: 700;
+  --type-heading-sm-tracking: 0em;
+  --type-heading-sm-family: var(--font-sans);
+  --type-heading-sm-transform: none;
+  --type-heading-xs-size: 1rem;
+  --type-heading-xs-line-height: 1.3;
+  --type-heading-xs-weight: 700;
+  --type-heading-xs-tracking: 0em;
+  --type-heading-xs-family: var(--font-sans);
+  --type-heading-xs-transform: none;
+  --type-subtitle-size: 1.125rem;
+  --type-subtitle-line-height: 1.5;
+  --type-subtitle-weight: 400;
+  --type-subtitle-tracking: 0em;
+  --type-subtitle-family: var(--font-sans);
+  --type-subtitle-transform: none;
+  --type-body-size: 1rem;
+  --type-body-line-height: 1.6;
+  --type-body-weight: 400;
+  --type-body-tracking: 0em;
+  --type-body-family: var(--font-sans);
+  --type-body-transform: none;
+  --type-body-sm-size: 0.875rem;
+  --type-body-sm-line-height: 1.5;
+  --type-body-sm-weight: 400;
+  --type-body-sm-tracking: 0em;
+  --type-body-sm-family: var(--font-sans);
+  --type-body-sm-transform: none;
+  --type-label-size: 0.875rem;
+  --type-label-line-height: 1.2;
+  --type-label-weight: 700;
+  --type-label-tracking: 0.01em;
+  --type-label-family: var(--font-sans);
+  --type-label-transform: none;
+  --type-caption-size: 0.75rem;
+  --type-caption-line-height: 1.4;
+  --type-caption-weight: 400;
+  --type-caption-tracking: 0em;
+  --type-caption-family: var(--font-sans);
+  --type-caption-transform: none;
+  --type-overline-size: 0.75rem;
+  --type-overline-line-height: 1.1;
+  --type-overline-weight: 700;
+  --type-overline-tracking: 0.08em;
+  --type-overline-family: var(--font-sans);
+  --type-overline-transform: uppercase;
+}
+
+/* role utility classes — set the whole bundle in one class (text-transform baked in for Mohr/overline) */
+.type-display {
+  font-family: var(--type-display-family);
+  font-size: var(--type-display-size);
+  line-height: var(--type-display-line-height);
+  font-weight: var(--type-display-weight);
+  letter-spacing: var(--type-display-tracking);
+  text-transform: var(--type-display-transform);
+}
+.type-headline {
+  font-family: var(--type-headline-family);
+  font-size: var(--type-headline-size);
+  line-height: var(--type-headline-line-height);
+  font-weight: var(--type-headline-weight);
+  letter-spacing: var(--type-headline-tracking);
+  text-transform: var(--type-headline-transform);
+}
+.type-title {
+  font-family: var(--type-title-family);
+  font-size: var(--type-title-size);
+  line-height: var(--type-title-line-height);
+  font-weight: var(--type-title-weight);
+  letter-spacing: var(--type-title-tracking);
+  text-transform: var(--type-title-transform);
+}
+.type-heading-sm {
+  font-family: var(--type-heading-sm-family);
+  font-size: var(--type-heading-sm-size);
+  line-height: var(--type-heading-sm-line-height);
+  font-weight: var(--type-heading-sm-weight);
+  letter-spacing: var(--type-heading-sm-tracking);
+  text-transform: var(--type-heading-sm-transform);
+}
+.type-heading-xs {
+  font-family: var(--type-heading-xs-family);
+  font-size: var(--type-heading-xs-size);
+  line-height: var(--type-heading-xs-line-height);
+  font-weight: var(--type-heading-xs-weight);
+  letter-spacing: var(--type-heading-xs-tracking);
+  text-transform: var(--type-heading-xs-transform);
+}
+.type-subtitle {
+  font-family: var(--type-subtitle-family);
+  font-size: var(--type-subtitle-size);
+  line-height: var(--type-subtitle-line-height);
+  font-weight: var(--type-subtitle-weight);
+  letter-spacing: var(--type-subtitle-tracking);
+  text-transform: var(--type-subtitle-transform);
+}
+.type-body {
+  font-family: var(--type-body-family);
+  font-size: var(--type-body-size);
+  line-height: var(--type-body-line-height);
+  font-weight: var(--type-body-weight);
+  letter-spacing: var(--type-body-tracking);
+  text-transform: var(--type-body-transform);
+}
+.type-body-sm {
+  font-family: var(--type-body-sm-family);
+  font-size: var(--type-body-sm-size);
+  line-height: var(--type-body-sm-line-height);
+  font-weight: var(--type-body-sm-weight);
+  letter-spacing: var(--type-body-sm-tracking);
+  text-transform: var(--type-body-sm-transform);
+}
+.type-label {
+  font-family: var(--type-label-family);
+  font-size: var(--type-label-size);
+  line-height: var(--type-label-line-height);
+  font-weight: var(--type-label-weight);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
+}
+.type-caption {
+  font-family: var(--type-caption-family);
+  font-size: var(--type-caption-size);
+  line-height: var(--type-caption-line-height);
+  font-weight: var(--type-caption-weight);
+  letter-spacing: var(--type-caption-tracking);
+  text-transform: var(--type-caption-transform);
+}
+.type-overline {
+  font-family: var(--type-overline-family);
+  font-size: var(--type-overline-size);
+  line-height: var(--type-overline-line-height);
+  font-weight: var(--type-overline-weight);
+  letter-spacing: var(--type-overline-tracking);
+  text-transform: var(--type-overline-transform);
+}
+
+/* fluid display — marketing/hero: scales with the viewport up to the top of the ramp */
+.type-display--fluid {
+  font-size: var(--type-display-size-fluid);
+}
+
+/* treatments — orthogonal to size, compose onto any role. Family/figures, never a size. */
+.type-tabular {
+  /* Mohr ships no tnum feature — measured, its "1" is 13.01px against "0" at 23.66px (30px/700), and
+     font-variant-numeric moves neither. So aligned digits need the family too, not just the figure set:
+     --font-sans goes flat at 0 spread. Composing this onto a display role therefore swaps the family.
+     That is the trade — a metric that must align cannot be set in the display face. Note --font-sans
+     caps at 700, so a display role's 900 renders as bold here, lighter than an adjacent Mohr heading. */
+  font-family: var(--font-sans);
+  font-variant-numeric: tabular-nums; /* aligned digits: tables, metrics */
+  /* Display roles uppercase, which is correct for a heading and wrong for a measured value: unit
+     letters are case-significant, so "4m 12s" must not render as "4M 12S" (mega, siemens). */
+  text-transform: none;
+}
+.type-mono {
+  font-family: var(--font-mono); /* code, token names, hex, IDs at whatever size the role sets */
+  font-size: 0.875em; /* mono runs optically large; the shrink matches sans x-height at the same step */
+}
+
+/* bare <code>/<kbd>/<samp> default: Tailwind Preflight already sets font-family: var(--font-mono) at
+   1em, so this only adds the optical shrink — making a bare tag identical to .type-mono. <pre> keeps
+   its own size so Shiki code blocks are untouched. */
+@layer base {
+  code,
+  kbd,
+  samp {
+    font-size: 0.875em;
+  }
+  /* Inline <code> renders as a boxed chip — the system's inline-code treatment, distinct from the bare
+     .type-mono treatment (which is for data: hex, token names, numbers, never boxed). Use <code> for
+     actual code/syntax in prose. Shiki blocks (pre code) opt out below. box-decoration-break keeps the
+     box intact when inline code wraps across lines. */
+  :not(pre) > code {
+    background: var(--ui-bg-elevated);
+    border: 1px solid var(--ui-border-muted);
+    border-radius: 0.25rem;
+    padding: 0.05em 0.35em;
+    box-decoration-break: clone;
+    -webkit-box-decoration-break: clone;
+  }
+  pre code {
+    font-size: inherit;
+    background: none;
+    border: 0;
+    padding: 0;
+  }
+}

package/type/type.deck.css

@@ -0,0 +1,74 @@
+/* Forest deck type — generated by scripts/type.ts. Do not edit.
+   The deck context: canonical roles remapped to the top of the ramp for the 1920×1080 slide canvas
+   (display 8xl · headline 7xl · title 6xl · body 5xl …). Plain vars because Slidev runs UnoCSS —
+   consumed by packages/slidev-theme/styles/base.css so a deck cannot express an off-system size. */
+:root {
+  --type-deck-text-xs: 0.75rem;
+  --type-deck-text-sm: 0.875rem;
+  --type-deck-text-md: 1rem;
+  --type-deck-text-lg: 1.125rem;
+  --type-deck-text-xl: 1.25rem;
+  --type-deck-text-2xl: 1.5rem;
+  --type-deck-text-3xl: 1.875rem;
+  --type-deck-text-4xl: 2.25rem;
+  --type-deck-text-5xl: 3rem;
+  --type-deck-text-6xl: 3.75rem;
+  --type-deck-text-7xl: 4.5rem;
+  --type-deck-text-8xl: 6rem;
+  --type-deck-text-9xl: 8rem;
+  --type-deck-display-size: 6rem;
+  --type-deck-display-line-height: 1;
+  --type-deck-display-weight: 900;
+  --type-deck-display-tracking: 0.01em;
+  --type-deck-display-family: var(--font-display);
+  --type-deck-headline-size: 4.5rem;
+  --type-deck-headline-line-height: 1.1;
+  --type-deck-headline-weight: 700;
+  --type-deck-headline-tracking: 0.01em;
+  --type-deck-headline-family: var(--font-sans);
+  --type-deck-title-size: 3.75rem;
+  --type-deck-title-line-height: 1.18;
+  --type-deck-title-weight: 700;
+  --type-deck-title-tracking: 0em;
+  --type-deck-title-family: var(--font-sans);
+  --type-deck-heading-sm-size: 3rem;
+  --type-deck-heading-sm-line-height: 1.3;
+  --type-deck-heading-sm-weight: 700;
+  --type-deck-heading-sm-tracking: 0em;
+  --type-deck-heading-sm-family: var(--font-sans);
+  --type-deck-heading-xs-size: 2.25rem;
+  --type-deck-heading-xs-line-height: 1.3;
+  --type-deck-heading-xs-weight: 700;
+  --type-deck-heading-xs-tracking: 0em;
+  --type-deck-heading-xs-family: var(--font-sans);
+  --type-deck-subtitle-size: 3.75rem;
+  --type-deck-subtitle-line-height: 1.35;
+  --type-deck-subtitle-weight: 400;
+  --type-deck-subtitle-tracking: 0em;
+  --type-deck-subtitle-family: var(--font-sans);
+  --type-deck-body-size: 3rem;
+  --type-deck-body-line-height: 1.45;
+  --type-deck-body-weight: 400;
+  --type-deck-body-tracking: 0em;
+  --type-deck-body-family: var(--font-sans);
+  --type-deck-body-sm-size: 2.25rem;
+  --type-deck-body-sm-line-height: 1.5;
+  --type-deck-body-sm-weight: 400;
+  --type-deck-body-sm-tracking: 0em;
+  --type-deck-body-sm-family: var(--font-sans);
+  --type-deck-label-size: 2.25rem;
+  --type-deck-label-line-height: 1.2;
+  --type-deck-label-weight: 700;
+  --type-deck-label-tracking: 0.01em;
+  --type-deck-label-family: var(--font-sans);
+  --type-deck-caption-size: 2.25rem;
+  --type-deck-caption-line-height: 1.4;
+  --type-deck-caption-weight: 400;
+  --type-deck-caption-tracking: 0em;
+  --type-deck-caption-family: var(--font-sans);
+  --type-deck-overline-size: 1.875rem;
+  --type-deck-overline-line-height: 1.1;
+  --type-deck-overline-weight: 700;
+  --type-deck-overline-tracking: 0.08em;
+  --type-deck-overline-family: var(--font-sans);
+}