@xenide-io/the-old-ui-theme 0.6.0 → 0.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +21 -9
  2. package/package.json +1 -1
  3. package/src/styles/typography.css +7 -4
package/README.md CHANGED
@@ -106,22 +106,34 @@ the component family it demonstrates:
106
106
  | Route | Focus |
107
107
  | ------------------- | -------------------------------- |
108
108
  | `/demo` | Route picker |
109
- | `/demo/foundations` | Tokens, themes, icons, and setup |
109
+ | `/demo/foundations` | Type scale, tokens, icons, setup |
110
110
  | `/demo/components` | Primitive components |
111
111
  | `/demo/patterns` | Composed UI flows |
112
- | `/demo/charts` | Charts and data surfaces |
113
112
  | `/demo/suite` | Shared product chrome |
114
113
 
115
114
  ## Layers (take what you need)
116
115
 
117
- | Tier | What you get | Dependencies |
118
- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
119
- | **CSS tokens** | `src/styles/themes.css` — `[data-theme]` variables (`--ph-*`) | None |
120
- | **Tailwind preset** | `tailwind-preset.ts` — `ph.*` colours, Lemon radii, shadows | `tailwindcss` |
121
- | **App shell** | `src/app/globals.css` — typography, primitives, layouts | Tokens + Tailwind |
122
- | **Charts (optional)** | Token-driven Chart.js demos (`register-chartjs` only registers controllers you use); hog-charts-**lite** canvas trend reads the same `--ph-data-*` palette | `chart.js`, `react-chartjs-2`; trend line also `d3-scale` |
116
+ | Tier | What you get | Dependencies |
117
+ | ------------------- | -------------------------------------------------------------------------------- | ----------------- |
118
+ | **CSS tokens** | `src/styles/themes.css` — `[data-theme]` variables (`--ph-*`) | None |
119
+ | **Typography** | `src/styles/typography.css` — font stacks and the fluid marketing scale | None |
120
+ | **Tailwind preset** | `tailwind-preset.ts` — `ph.*` colours, `font-sans`/`font-serif`, radii, shadows | `tailwindcss` |
121
+ | **App shell** | `src/app/globals.css` — `@font-face`, primitives, layouts | Tokens + Tailwind |
123
122
 
124
- Chart.js supports doughnut, polar area, pie, radar, bubble, etc. — this repo registers **Bar · Doughnut · Polar area** only to keep bundles small; add controllers in `src/lib/chart/register-chartjs.ts` when you need more types.
123
+ ## Typography
124
+
125
+ Two voices, deliberately different shapes rather than two weights of one face:
126
+
127
+ | Role | Face | Where |
128
+ | ----------------------- | ------------------- | -------------------------------------------------------------- |
129
+ | Product UI and body | Open Runde (`font-sans`) | Every in-app surface, `H1`–`H5`, `P`, controls |
130
+ | Display | Instrument Serif (`font-serif`) | `Display`, `SectionTitle`, `.ph-hero-title`, doc titles |
131
+ | Functional | System monospace | `Mono`, code, IDs, keyboard shortcuts |
132
+
133
+ Marketing sizes are fluid (`clamp()`), so a hero is one class instead of three
134
+ breakpoint variants: `.ph-hero-title`, `.ph-section-title`, `.ph-feature-title`,
135
+ `.ph-lead`, `.ph-eyebrow`. Self-host `InstrumentSerif-{Regular,Italic}.woff2` and
136
+ the Open Runde weights under `public/fonts/`.
125
137
 
126
138
  ## Themes
127
139
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xenide-io/the-old-ui-theme",
3
- "version": "0.6.0",
3
+ "version": "0.6.1",
4
4
  "description": "Props-driven React components and theme tokens inspired by classic interface design \u2014 optimized for Next.js apps and internal tools.",
5
5
  "author": "Xenide",
6
6
  "license": "MIT",
package/src/styles/typography.css CHANGED
@@ -25,9 +25,11 @@
25
25
  --ph-font-shortcut-stack: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
26
26
  Helvetica, Arial, sans-serif;
27
27
 
28
- /* Fluid marketing scale — min at 360px, max at ~1280px */
29
- --ph-type-hero: clamp(2.75rem, 1.6rem + 5.2vw, 5.25rem);
30
- --ph-type-section: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
28
+ /* Fluid marketing scale — min at 360px, max at ~1280px.
29
+ Ceilings assume a hero can sit in a half-width grid column, not just
30
+ full-bleed centred copy. */
31
+ --ph-type-hero: clamp(2.5rem, 1.4rem + 4.4vw, 4.5rem);
32
+ --ph-type-section: clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem);
31
33
  --ph-type-feature: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
32
34
  --ph-type-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
33
35
  }
@@ -40,7 +42,8 @@
40
42
  font-family: var(--ph-font-serif-stack);
41
43
  font-weight: 400;
42
44
  font-size: var(--ph-type-hero);
43
- line-height: 1.02;
45
+ /* Serif heroes wrap to 2–3 lines; 1.02 collides ascenders with descenders. */
46
+ line-height: 1.06;
44
47
  letter-spacing: -0.02em;
45
48
  text-wrap: balance;
46
49
  }