@rdna/radiants 0.1.3 → 0.1.5

package/patterns/pretext-type-scale.ts

@@ -0,0 +1,115 @@
+/**
+ * Pretext Type Scale — JS-native fluid typography for canvas-based layouts.
+ *
+ * Single source of truth for text sizing in pretext consumers (GoodNews,
+ * editorial layouts, future content apps). Mirrors the design intent of the
+ * CSS fluid tokens in tokens.css but lives entirely in JS — no DOM, no
+ * reflow, no CSS dependency.
+ *
+ * Each tier defines a clamp(min, base + coeff × containerWidth/100, max)
+ * curve. The formula is identical to the CSS `clamp(min, base + Ncqi, max)`
+ * pattern, where 1cqi = 1% of container inline size.
+ *
+ * Usage:
+ *   import { resolveFluid, fluidType } from '@rdna/radiants/patterns/pretext-type-scale'
+ *   const fontSize = resolveFluid('xl', containerWidth) // → px number
+ */
+
+// ---------------------------------------------------------------------------
+// Scale definitions (px values — pretext operates in px)
+// ---------------------------------------------------------------------------
+
+export interface FluidTier {
+  /** Minimum size in px (floor) */
+  min: number;
+  /** Base offset in px (intercept when containerWidth = 0) */
+  base: number;
+  /** Scaling coefficient (multiplied by containerWidth / 100) */
+  coeff: number;
+  /** Maximum size in px (ceiling) */
+  max: number;
+}
+
+/**
+ * Fluid type tiers — each maps to the equivalent CSS fluid token.
+ *
+ * The preferred value is: base + coeff × (containerWidth / 100)
+ * This mirrors CSS: base_rem + coeff_cqi where 1cqi = 1% of container.
+ *
+ * Values derived from the CSS tokens (rem × 16 = px):
+ *   --font-size-fluid-sm:   clamp(0.75rem,  0.7rem  + 0.25cqi, 0.875rem)
+ *   --font-size-fluid-base: clamp(0.875rem, 0.8rem  + 0.5cqi,  1.125rem)
+ *   --font-size-fluid-lg:   clamp(1rem,     0.9rem  + 0.75cqi, 1.5rem)
+ *   --font-size-fluid-xl:   clamp(1.25rem,  1rem    + 1.25cqi, 2rem)
+ *   --font-size-fluid-2xl:  clamp(1.5rem,   1.2rem  + 1.75cqi, 2.5rem)
+ *   --font-size-fluid-3xl:  clamp(1.75rem,  1.4rem  + 2.5cqi,  3.5rem)
+ *   --font-size-fluid-4xl:  clamp(2rem,     1.5rem  + 3.5cqi,  4.5rem)
+ */
+export const fluidType = {
+  sm:   { min: 12,   base: 11.2, coeff: 0.04,  max: 14   },
+  base: { min: 14,   base: 12.8, coeff: 0.08,  max: 18   },
+  lg:   { min: 16,   base: 14.4, coeff: 0.12,  max: 24   },
+  xl:   { min: 20,   base: 16,   coeff: 0.20,  max: 32   },
+  '2xl': { min: 24,  base: 19.2, coeff: 0.28,  max: 40   },
+  '3xl': { min: 28,  base: 22.4, coeff: 0.40,  max: 56   },
+  '4xl': { min: 32,  base: 24,   coeff: 0.56,  max: 72   },
+} as const satisfies Record<string, FluidTier>;
+
+export type FluidTierName = keyof typeof fluidType;
+
+// ---------------------------------------------------------------------------
+// Resolver
+// ---------------------------------------------------------------------------
+
+/**
+ * Compute fluid font size for a given tier and container width.
+ *
+ * Returns a smooth px value — no Math.round stepping. The caller decides
+ * whether to round (canvas measureText handles fractional px fine).
+ *
+ * @param tier    - Named tier from the scale (e.g. 'xl', '3xl')
+ * @param containerWidth - Width of the layout container in px
+ */
+export function resolveFluid(tier: FluidTierName, containerWidth: number): number {
+  const { min, base, coeff, max } = fluidType[tier];
+  return Math.min(max, Math.max(min, base + coeff * containerWidth / 100));
+}
+
+/**
+ * Resolve fluid size from raw tier parameters (for one-off overrides).
+ */
+export function resolveFluidRaw(tier: FluidTier, containerWidth: number): number {
+  const { min, base, coeff, max } = tier;
+  return Math.min(max, Math.max(min, base + coeff * containerWidth / 100));
+}
+
+// ---------------------------------------------------------------------------
+// Spacing scale — all values are multipliers of bodyLh
+// ---------------------------------------------------------------------------
+
+/**
+ * Named spacing roles for editorial layouts.
+ *
+ * Every spacing value is a multiplier of `bodyLh` (body line-height) so
+ * spacing scales proportionally with type size. No magic pixel values.
+ *
+ * Usage:
+ *   const gap = bodyLh * spacing.paragraph;
+ *   const sectionBreak = bodyLh * spacing.section;
+ */
+export const spacing = {
+  /** Between paragraphs in the same section */
+  paragraph: 0.75,
+  /** Before a heading (establishes new section) */
+  headingBefore: 1.5,
+  /** After a heading (ties heading to its content) */
+  headingAfter: 0.5,
+  /** Around horizontal rules */
+  rule: 0.5,
+  /** Between major sections (rule + gap) */
+  section: 2,
+  /** Column gutter (between column rules) */
+  column: 0.5,
+} as const;
+
+export type SpacingRole = keyof typeof spacing;

package/pixel-corners.generated.css

@@ -17,6 +17,7 @@
 .pixel-rounded-xl::after,
 .pixel-rounded-xl--wrapper::after,
 .pixel-rounded-t-sm-b-md::after,
+.pixel-rounded-t-sm::after,
 .pixel-rounded-l-sm::after,
 .pixel-rounded-sm-notl::after {
   content: "";
@@ -46,6 +47,7 @@
 .pixel-rounded-xl,
 .pixel-rounded-xl--wrapper,
 .pixel-rounded-t-sm-b-md,
+.pixel-rounded-t-sm,
 .pixel-rounded-l-sm,
 .pixel-rounded-sm-notl {
   position: relative;
@@ -58,6 +60,7 @@
 .pixel-corners,
 .pixel-rounded-xl,
 .pixel-rounded-t-sm-b-md,
+.pixel-rounded-t-sm,
 .pixel-rounded-l-sm,
 .pixel-rounded-sm-notl {
   border: 1px solid transparent;
@@ -88,6 +91,10 @@
   border-radius: 0;
 }
 
+.pixel-rounded-t-sm {
+  border-radius: 0;
+}
+
 .pixel-rounded-l-sm {
   border-radius: 0;
 }
@@ -198,6 +205,14 @@
   clip-path: polygon(0px calc(100% - 9px), 1px calc(100% - 9px), 1px calc(100% - 8px), 1px calc(100% - 6px), 2px calc(100% - 6px), 2px calc(100% - 5px), 3px calc(100% - 5px), 3px calc(100% - 4px), 4px calc(100% - 3px), 5px calc(100% - 3px), 5px calc(100% - 2px), 6px calc(100% - 2px), 6px calc(100% - 1px), 8px calc(100% - 1px), 9px calc(100% - 1px), 9px 100%, calc(100% - 9px) 100%, calc(100% - 9px) calc(100% - 1px), calc(100% - 8px) calc(100% - 1px), calc(100% - 6px) calc(100% - 1px), calc(100% - 6px) calc(100% - 2px), calc(100% - 5px) calc(100% - 2px), calc(100% - 5px) calc(100% - 3px), calc(100% - 4px) calc(100% - 3px), calc(100% - 3px) calc(100% - 4px), calc(100% - 3px) calc(100% - 5px), calc(100% - 2px) calc(100% - 5px), calc(100% - 2px) calc(100% - 6px), calc(100% - 1px) calc(100% - 6px), calc(100% - 1px) calc(100% - 8px), calc(100% - 1px) calc(100% - 9px), 100% calc(100% - 9px), 100% 5px, calc(100% - 1px) 5px, calc(100% - 1px) 3px, calc(100% - 2px) 3px, calc(100% - 2px) 2px, calc(100% - 3px) 2px, calc(100% - 3px) 1px, calc(100% - 5px) 1px, calc(100% - 5px) 0px, 5px 0px, 5px 1px, 3px 1px, 3px 2px, 2px 2px, 2px 3px, 1px 3px, 1px 5px, 0px 5px, 0px 50%, 1px 50%, 1px 5px, 2px 5px, 2px 3px, 3px 3px, 3px 2px, 5px 2px, 5px 1px, calc(100% - 5px) 1px, calc(100% - 5px) 2px, calc(100% - 3px) 2px, calc(100% - 3px) 3px, calc(100% - 2px) 3px, calc(100% - 2px) 5px, calc(100% - 1px) 5px, calc(100% - 1px) calc(100% - 9px), calc(100% - 2px) calc(100% - 9px), calc(100% - 2px) calc(100% - 8px), calc(100% - 2px) calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 5px), calc(100% - 4px) calc(100% - 5px), calc(100% - 4px) calc(100% - 4px), calc(100% - 5px) calc(100% - 4px), calc(100% - 5px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) calc(100% - 2px), calc(100% - 8px) calc(100% - 2px), calc(100% - 9px) calc(100% - 2px), calc(100% - 9px) calc(100% - 1px), 9px calc(100% - 1px), 9px calc(100% - 2px), 8px calc(100% - 2px), 6px calc(100% - 2px), 6px calc(100% - 3px), 5px calc(100% - 3px), 5px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 5px), 3px calc(100% - 5px), 3px calc(100% - 6px), 2px calc(100% - 6px), 2px calc(100% - 8px), 2px calc(100% - 9px), 1px calc(100% - 9px), 1px 50%, 0px 50%);
 }
 
+.pixel-rounded-t-sm {
+  clip-path: polygon(0px 100%, 100% 100%, 100% 5px, calc(100% - 1px) 5px, calc(100% - 1px) 3px, calc(100% - 2px) 3px, calc(100% - 2px) 2px, calc(100% - 3px) 2px, calc(100% - 3px) 1px, calc(100% - 5px) 1px, calc(100% - 5px) 0px, 5px 0px, 5px 1px, 3px 1px, 3px 2px, 2px 2px, 2px 3px, 1px 3px, 1px 5px, 0px 5px);
+}
+
+.pixel-rounded-t-sm::after {
+  clip-path: polygon(0px 100%, 100% 100%, 100% 5px, calc(100% - 1px) 5px, calc(100% - 1px) 3px, calc(100% - 2px) 3px, calc(100% - 2px) 2px, calc(100% - 3px) 2px, calc(100% - 3px) 1px, calc(100% - 5px) 1px, calc(100% - 5px) 0px, 5px 0px, 5px 1px, 3px 1px, 3px 2px, 2px 2px, 2px 3px, 1px 3px, 1px 5px, 0px 5px, 0px 50%, 1px 50%, 1px 5px, 2px 5px, 2px 3px, 3px 3px, 3px 2px, 5px 2px, 5px 1px, calc(100% - 5px) 1px, calc(100% - 5px) 2px, calc(100% - 3px) 2px, calc(100% - 3px) 3px, calc(100% - 2px) 3px, calc(100% - 2px) 5px, calc(100% - 1px) 5px, calc(100% - 1px) 100%, 1px 100%, 1px 50%, 0px 50%);
+}
+
 .pixel-rounded-l-sm {
   clip-path: polygon(0px calc(100% - 5px), 1px calc(100% - 5px), 1px calc(100% - 3px), 2px calc(100% - 3px), 2px calc(100% - 2px), 3px calc(100% - 2px), 3px calc(100% - 1px), 5px calc(100% - 1px), 5px 100%, 100% 100%, 100% 0px, 5px 0px, 5px 1px, 3px 1px, 3px 2px, 2px 2px, 2px 3px, 1px 3px, 1px 5px, 0px 5px);
 }

package/schemas/index.ts

@@ -3,6 +3,7 @@
 
 import AlertSchema from "../components/core/Alert/Alert.schema.json";
 import AlertDialogSchema from "../components/core/AlertDialog/AlertDialog.schema.json";
+import AppWindowSchema from "../components/core/AppWindow/AppWindow.schema.json";
 import AvatarSchema from "../components/core/Avatar/Avatar.schema.json";
 import BadgeSchema from "../components/core/Badge/Badge.schema.json";
 import BreadcrumbsSchema from "../components/core/Breadcrumbs/Breadcrumbs.schema.json";
@@ -45,6 +46,7 @@ import TooltipSchema from "../components/core/Tooltip/Tooltip.schema.json";
 export const componentData = {
   Alert: { schema: AlertSchema },
   AlertDialog: { schema: AlertDialogSchema },
+  AppWindow: { schema: AppWindowSchema },
   Avatar: { schema: AvatarSchema },
   Badge: { schema: BadgeSchema },
   Breadcrumbs: { schema: BreadcrumbsSchema },

package/tokens.css

@@ -14,6 +14,7 @@
   --color-pure-black: oklch(0.0000 0.0000 0);           /* was #000000 */
   --color-sun-yellow: oklch(0.9126 0.1170 93.68);       /* was #FCE184 */
   --color-sky-blue: oklch(0.7701 0.0527 236.81);        /* was #95BAD2 */
+  --color-sky-blue-dark: oklch(0.47 0.08 237);           /* WCAG AA compliant on cream bg (~6:1 contrast) */
   --color-sunset-fuzz: oklch(0.8546 0.1039 68.93);      /* was #FCC383 */
   --color-sun-red: oklch(0.7429 0.1568 21.43);          /* was #FF7F7F */
   --color-mint: oklch(0.9312 0.0702 142.51);             /* was #CEF5CA */
@@ -46,7 +47,7 @@
   --color-sub: oklch(0.1641 0.0044 84.59 / 0.85);
   --color-mute: oklch(0.1641 0.0044 84.59 / 0.6);
   --color-flip: var(--color-cream);
-  --color-link: var(--color-sky-blue);
+  --color-link: var(--color-sky-blue-dark);
 
   /* Borders */
   --color-line: var(--color-ink);
@@ -64,7 +65,7 @@
   --color-content-secondary: oklch(0.1641 0.0044 84.59 / 0.85);  /* was rgba(15, 14, 12, 0.85) */
   --color-content-inverted: var(--color-cream);
   --color-content-muted: oklch(0.1641 0.0044 84.59 / 0.6);    /* was rgba(15, 14, 12, 0.6) */
-  --color-content-link: var(--color-sky-blue);
+  --color-content-link: var(--color-sky-blue-dark);
 
   /* ============================================
      SEMANTIC TOKENS - Edge
@@ -181,16 +182,21 @@
 
   /* ============================================
      TYPOGRAPHY SCALE
-     Font sizes for the pixel-art aesthetic
+     Perfect fourth (1.333) from 16px base.
+     xs/sm are fixed for UI legibility.
+     base -> 5xl follow the ratio.
      ============================================ */
 
-  --font-size-xs: 0.625rem;    /* 10px - small labels */
-  --font-size-sm: 0.75rem;     /* 12px - buttons, small UI */
-  --font-size-base: 1rem;      /* 16px - body text (at max root) */
-  --font-size-lg: 1.25rem;     /* 20px - large body */
-  --font-size-xl: 1.5rem;      /* 24px - headings */
-  --font-size-2xl: 1.75rem;    /* 28px - headings */
-  --font-size-3xl: 2rem;       /* 32px - display */
+  --font-size-xs: 0.625rem;     /*  10px - fixed: small labels */
+  --font-size-sm: 0.75rem;      /*  12px - fixed: buttons, small UI */
+  --font-size-base: 1rem;       /*  16px - base */
+  --font-size-lg: 1.333rem;     /* ~21px - base x 1.333 */
+  --font-size-xl: 1.777rem;     /* ~28px - base x 1.333^2 */
+  --font-size-2xl: 2.369rem;    /* ~38px - base x 1.333^3 */
+  --font-size-3xl: 3.157rem;    /* ~50px - base x 1.333^4 */
+  --font-size-4xl: 4.209rem;    /* ~67px - base x 1.333^5 */
+  --font-size-5xl: 5.61rem;     /* ~90px - base x 1.333^6 */
+  --font-size-display: 5.61rem; /* alias: same as 5xl, named for hero/display use */
 
 /* ============================================
      MOTION - Duration
@@ -237,17 +243,6 @@
 
   --touch-target-min: 44px;   /* WCAG AA minimum */
   --touch-target-comfortable: 48px;
-  --touch-target-default: var(--touch-target-comfortable);
-
-  /* ============================================
-     DENSITY
-     Attribute-driven spacing/touch affordances
-     ============================================ */
-
-  --density-compact: 0.5;
-  --density-default: 1;
-  --density-comfortable: 1.5;
-  --density-scale: var(--density-comfortable);
 
   /* ============================================
      Z-INDEX SCALE
@@ -267,6 +262,37 @@
   --z-index-system: 900;       /* Invert overlay, system effects */
 }
 
+/* =============================================================================
+   FLUID TYPOGRAPHY
+   Container-query-based fluid scaling.
+   Uses cqi (container query inline) units so text scales with
+   AppWindow width, not viewport.
+
+   Formula: clamp(min, preferred, max)
+   Preferred uses cqi to create smooth scaling.
+   Min/max lock to slightly below/above the static scale values.
+
+   Outside a container context cqi resolves to 0, so the clamp()
+   min value takes over — safe for Taskbar, StartMenu, etc.
+
+   Placed in @layer base (not @theme) because cqi is a runtime-
+   relative unit that Tailwind v4 cannot resolve at build time.
+   Use via: text-[length:var(--font-size-fluid-base)] syntax,
+   or apply directly in CSS: font-size: var(--font-size-fluid-lg).
+   ============================================================================= */
+
+@layer base {
+  :root {
+    --font-size-fluid-sm: clamp(0.75rem, 0.7rem + 0.25cqi, 0.875rem);
+    --font-size-fluid-base: clamp(0.875rem, 0.8rem + 0.5cqi, 1.125rem);
+    --font-size-fluid-lg: clamp(1rem, 0.9rem + 0.75cqi, 1.5rem);
+    --font-size-fluid-xl: clamp(1.25rem, 1rem + 1.25cqi, 2rem);
+    --font-size-fluid-2xl: clamp(1.5rem, 1.2rem + 1.75cqi, 2.5rem);
+    --font-size-fluid-3xl: clamp(1.75rem, 1.4rem + 2.5cqi, 3.5rem);
+    --font-size-fluid-4xl: clamp(2rem, 1.5rem + 3.5cqi, 4.5rem);
+  }
+}
+
 /* =============================================================================
    REDUCED MOTION SUPPORT
    Respects user preference for reduced motion

package/typography.css

@@ -11,23 +11,28 @@
      ============================================ */
 
   h1 {
-    @apply text-4xl font-heading font-bold leading-none tracking-tight text-main;
+    @apply font-heading font-bold leading-none tracking-tight text-main;
+    font-size: var(--font-size-fluid-4xl);
   }
 
   h2 {
-    @apply text-3xl font-heading font-normal leading-none tracking-tight text-main;
+    @apply font-heading font-normal leading-none tracking-tight text-main;
+    font-size: var(--font-size-fluid-3xl);
   }
 
   h3 {
-    @apply text-2xl font-heading font-semibold leading-none tracking-tight text-main;
+    @apply font-heading font-semibold leading-none tracking-tight text-main;
+    font-size: var(--font-size-fluid-2xl);
   }
 
   h4 {
-    @apply text-xl font-heading font-medium leading-none tracking-tight text-main;
+    @apply font-heading font-medium leading-none tracking-tight text-main;
+    font-size: var(--font-size-fluid-xl);
   }
 
   h5 {
-    @apply text-lg font-heading font-medium leading-none tracking-tight text-main;
+    @apply font-heading font-medium leading-none tracking-tight text-main;
+    font-size: var(--font-size-fluid-lg);
   }
 
   h6 {