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

package/README.md

@@ -117,22 +117,22 @@ the component family it demonstrates:
 | ------------------- | -------------------------------------------------------------------------------- | ----------------- |
 | **CSS tokens**      | `src/styles/themes.css` — `[data-theme]` variables (`--ph-*`)                    | None              |
 | **Typography**      | `src/styles/typography.css` — font stacks and the fluid marketing scale           | None              |
-| **Tailwind preset** | `tailwind-preset.ts` — `ph.*` colours, `font-sans`/`font-serif`, radii, shadows   | `tailwindcss`     |
+| **Tailwind preset** | `tailwind-preset.ts` — `ph.*` colours, font stacks, radii, shadows                | `tailwindcss`     |
 | **App shell**       | `src/app/globals.css` — `@font-face`, primitives, layouts                         | Tokens + Tailwind |
 
 ## Typography
 
-Two voices, deliberately different shapes rather than two weights of one face:
+One face, two scales. Hierarchy comes from size, weight, and tracking — not
+from a second typeface competing with Open Runde.
 
-| Role                    | Face                | Where                                                          |
-| ----------------------- | ------------------- | -------------------------------------------------------------- |
-| Product UI and body     | Open Runde (`font-sans`)  | Every in-app surface, `H1`–`H5`, `P`, controls           |
-| Display                 | Instrument Serif (`font-serif`) | `Display`, `SectionTitle`, `.ph-hero-title`, doc titles |
-| Functional              | System monospace    | `Mono`, code, IDs, keyboard shortcuts                          |
+| Role                | Face                     | Where                                              |
+| ------------------- | ------------------------ | -------------------------------------------------- |
+| Everything you read | Open Runde (`font-sans`) | Marketing and product, `Display` down to `Caption` |
+| Functional          | System monospace         | `Mono`, code, IDs, keyboard shortcuts              |
 
 Marketing sizes are fluid (`clamp()`), so a hero is one class instead of three
 breakpoint variants: `.ph-hero-title`, `.ph-section-title`, `.ph-feature-title`,
-`.ph-lead`, `.ph-eyebrow`. Self-host `InstrumentSerif-{Regular,Italic}.woff2` and
+`.ph-lead`, `.ph-eyebrow`. Product UI keeps the Tailwind step scale. Self-host
 the Open Runde weights under `public/fonts/`.
 
 ## Themes

package/dist/{Chip-DzC5xtK9.d.mts → Chip-Cq3AiAji.d.mts}

@@ -772,11 +772,11 @@ interface TextBaseProps {
     truncate?: boolean;
 }
 /**
- * Display — the marketing hero voice: Instrument Serif, fluid size, one per page.
- * Product page titles use H1/`SuitePageHeader` (sans) instead.
+ * Display — the marketing hero: fluid size, tight tracking, one per page.
+ * Product page titles use H1/`SuitePageHeader` instead.
  */
 declare function Display({ children, tone, weight, truncate, className, }: TextBaseProps): react.JSX.Element;
-/** Section title — serif, fluid; pairs with Display on public pages. */
+/** Section title — fluid; pairs with Display on public pages. */
 declare function SectionTitle({ children, tone, weight, truncate, className }: TextBaseProps): react.JSX.Element;
 /** H1 — page title */
 declare function H1({ children, tone, weight, truncate, className }: TextBaseProps): react.JSX.Element;

package/dist/{Chip-DzC5xtK9.d.ts → Chip-Cq3AiAji.d.ts}

@@ -772,11 +772,11 @@ interface TextBaseProps {
     truncate?: boolean;
 }
 /**
- * Display — the marketing hero voice: Instrument Serif, fluid size, one per page.
- * Product page titles use H1/`SuitePageHeader` (sans) instead.
+ * Display — the marketing hero: fluid size, tight tracking, one per page.
+ * Product page titles use H1/`SuitePageHeader` instead.
  */
 declare function Display({ children, tone, weight, truncate, className, }: TextBaseProps): react.JSX.Element;
-/** Section title — serif, fluid; pairs with Display on public pages. */
+/** Section title — fluid; pairs with Display on public pages. */
 declare function SectionTitle({ children, tone, weight, truncate, className }: TextBaseProps): react.JSX.Element;
 /** H1 — page title */
 declare function H1({ children, tone, weight, truncate, className }: TextBaseProps): react.JSX.Element;

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { b9 as IconProps } from './Chip-DzC5xtK9.mjs';
-export { A as Accordion, a as Alert, b as AlertProps, c as AlertStatus, d as AuthCard, e as AuthCardProps, f as AuthDivider, g as AuthDividerProps, h as AuthLayout, i as AuthLayoutProps, j as Avatar, k as AvatarGroup, l as AvatarGroupProps, m as AvatarProps, n as AvatarSize, o as AvatarStatus, B as Badge, p as BadgeProps, q as BadgeSize, r as BadgeVariant, s as Button, t as ButtonChrome, u as ButtonChromeProps, v as ButtonProps, w as ButtonShape, x as ButtonSize, y as ButtonVariant, C as CANONICAL_ICONS, z as Calendar, D as CanonicalIconName, E as Caption, F as Card, G as CardProps, H as CardVariant, I as Checkbox, J as CheckboxProps, K as Chip, L as ChipProps, M as CommandPalette, N as Display, O as Dot, P as DotProps, Q as DropdownAlign, R as DropdownButton, S as DropdownButtonProps, T as DropdownItem, U as DropdownItemProps, V as DropdownMenu, W as DropdownMenuProps, X as DropdownRadioGroup, Y as DropdownRadioGroupProps, Z as DropdownRadioItem, _ as DropdownRadioItemProps, $ as DropdownSide, a0 as EmptyState, a1 as FileUpload, a2 as FileUploadProps, a3 as FilterBar, a4 as FilterBarProps, a5 as FilterChip, a6 as FilterChips, a7 as FilterChipsProps, a8 as FilterMenu, a9 as FilterMenuOption, aa as FilterMenuProps, ab as FormField, ac as FormFieldControlProps, ad as FormFieldProps, ae as H1, af as H2, ag as H3, ah as H4, ai as H5, ao as Icon, aj as IconActivity, ak as IconAliasName, al as IconAreaChart, am as IconArrowDown, an as IconArrowUp, ao as IconBase, ap as IconBell, aq as IconBellOff, ar as IconBolt, as as IconBox, at as IconByName, au as IconCancel, av as IconCheck, aw as IconCheckCircle, ax as IconChevronDown, ay as IconChevronLeft, az as IconChevronRight, aA as IconClipboardEdit, aB as IconClose, aC as IconCodePreview, aD as IconCohort, aE as IconCommandCursor, aF as IconCopy, aG as IconCumulativeChart, aH as IconDataReel, aI as IconDatabase, aJ as IconDownload, aK as IconEdit, aL as IconErrorOutline, aM as IconEventStream, aN as IconExclamation, aO as IconExperimentSplit, aP as IconFeatureGate, aQ as IconFlag, aR as IconFlare, aS as IconFlask, aT as IconGift, aU as IconGridView, aV as IconHandClick, aW as IconHome, aX as IconInfo, aY as IconInsightBoard, aZ as IconLayers, a_ as IconListView, a$ as IconLogout, b0 as IconMail, b1 as IconMoon, b2 as IconName, b3 as IconOldWindow, b4 as IconPanelRight, b5 as IconPerson, b6 as IconPlayCircle, b7 as IconPlus, b8 as IconPremium, ba as IconQueryEditor, bb as IconQueryStack, bc as IconRadar, bd as IconRecording, be as IconReplayFrame, bf as IconRobot, bg as IconRocket, bh as IconSave, bi as IconSearch, bj as IconSelectEvents, bk as IconShoppingCart, bl as IconSpinner, bm as IconStar, bn as IconSubArrowRight, bo as IconSun, bp as IconSurveyCard, bq as IconSurveys, br as IconSync, bs as IconTableChart, bt as IconTerminal, bu as IconToggle, bv as IconTrash, bw as IconTuning, bx as IconUpload, by as IconVolume, bz as IconVolumeOff, bA as Input, bB as InputProps, bC as InputSize, bD as InputVariant, bE as Label, bF as Lead, bG as Link, bH as LinkProps, bI as Loader, bJ as LoaderProps, bK as LoaderSize, bL as LoaderVariant, bM as LoadingState, bN as LoadingStateProps, bO as Modal, bP as ModalProps, bQ as ModalSize, bR as Mono, bS as OLD_UI_ICONS, bT as Overline, bU as P, bV as PH_ICONS, bW as PH_ICON_ALIASES, bX as Panel, bY as PanelProps, bZ as Progress, b_ as ProgressProps, b$ as Radio, c0 as RadioProps, c5 as SearchInput, c6 as SearchInputProps, c7 as SectionTitle, c8 as SegmentedControl, c9 as Select, ca as SelectProps, cb as SettingsLayout, cc as SettingsLayoutProps, cd as SettingsNav, ce as SettingsNavGroup, cf as SettingsNavItem, cg as SettingsNavProps, ch as Skeleton, ci as SkeletonProps, cj as SkeletonShape, ck as Small, cl as SortMenu, cm as SortMenuProps, cn as Spinner, co as SpinnerProps, cp as Stat, cq as StatProps, cr as StatTone, cs as Table, ct as TableColumn, cu as TableProps, cv as Textarea, cw as TextareaProps, cx as Toggle, cy as ToggleProps, cz as Tooltip, cA as TooltipAlign, cB as TooltipProps, cC as TooltipProvider, cD as TooltipProviderProps, cE as TooltipSide } from './Chip-DzC5xtK9.mjs';
+import { b9 as IconProps } from './Chip-Cq3AiAji.mjs';
+export { A as Accordion, a as Alert, b as AlertProps, c as AlertStatus, d as AuthCard, e as AuthCardProps, f as AuthDivider, g as AuthDividerProps, h as AuthLayout, i as AuthLayoutProps, j as Avatar, k as AvatarGroup, l as AvatarGroupProps, m as AvatarProps, n as AvatarSize, o as AvatarStatus, B as Badge, p as BadgeProps, q as BadgeSize, r as BadgeVariant, s as Button, t as ButtonChrome, u as ButtonChromeProps, v as ButtonProps, w as ButtonShape, x as ButtonSize, y as ButtonVariant, C as CANONICAL_ICONS, z as Calendar, D as CanonicalIconName, E as Caption, F as Card, G as CardProps, H as CardVariant, I as Checkbox, J as CheckboxProps, K as Chip, L as ChipProps, M as CommandPalette, N as Display, O as Dot, P as DotProps, Q as DropdownAlign, R as DropdownButton, S as DropdownButtonProps, T as DropdownItem, U as DropdownItemProps, V as DropdownMenu, W as DropdownMenuProps, X as DropdownRadioGroup, Y as DropdownRadioGroupProps, Z as DropdownRadioItem, _ as DropdownRadioItemProps, $ as DropdownSide, a0 as EmptyState, a1 as FileUpload, a2 as FileUploadProps, a3 as FilterBar, a4 as FilterBarProps, a5 as FilterChip, a6 as FilterChips, a7 as FilterChipsProps, a8 as FilterMenu, a9 as FilterMenuOption, aa as FilterMenuProps, ab as FormField, ac as FormFieldControlProps, ad as FormFieldProps, ae as H1, af as H2, ag as H3, ah as H4, ai as H5, ao as Icon, aj as IconActivity, ak as IconAliasName, al as IconAreaChart, am as IconArrowDown, an as IconArrowUp, ao as IconBase, ap as IconBell, aq as IconBellOff, ar as IconBolt, as as IconBox, at as IconByName, au as IconCancel, av as IconCheck, aw as IconCheckCircle, ax as IconChevronDown, ay as IconChevronLeft, az as IconChevronRight, aA as IconClipboardEdit, aB as IconClose, aC as IconCodePreview, aD as IconCohort, aE as IconCommandCursor, aF as IconCopy, aG as IconCumulativeChart, aH as IconDataReel, aI as IconDatabase, aJ as IconDownload, aK as IconEdit, aL as IconErrorOutline, aM as IconEventStream, aN as IconExclamation, aO as IconExperimentSplit, aP as IconFeatureGate, aQ as IconFlag, aR as IconFlare, aS as IconFlask, aT as IconGift, aU as IconGridView, aV as IconHandClick, aW as IconHome, aX as IconInfo, aY as IconInsightBoard, aZ as IconLayers, a_ as IconListView, a$ as IconLogout, b0 as IconMail, b1 as IconMoon, b2 as IconName, b3 as IconOldWindow, b4 as IconPanelRight, b5 as IconPerson, b6 as IconPlayCircle, b7 as IconPlus, b8 as IconPremium, ba as IconQueryEditor, bb as IconQueryStack, bc as IconRadar, bd as IconRecording, be as IconReplayFrame, bf as IconRobot, bg as IconRocket, bh as IconSave, bi as IconSearch, bj as IconSelectEvents, bk as IconShoppingCart, bl as IconSpinner, bm as IconStar, bn as IconSubArrowRight, bo as IconSun, bp as IconSurveyCard, bq as IconSurveys, br as IconSync, bs as IconTableChart, bt as IconTerminal, bu as IconToggle, bv as IconTrash, bw as IconTuning, bx as IconUpload, by as IconVolume, bz as IconVolumeOff, bA as Input, bB as InputProps, bC as InputSize, bD as InputVariant, bE as Label, bF as Lead, bG as Link, bH as LinkProps, bI as Loader, bJ as LoaderProps, bK as LoaderSize, bL as LoaderVariant, bM as LoadingState, bN as LoadingStateProps, bO as Modal, bP as ModalProps, bQ as ModalSize, bR as Mono, bS as OLD_UI_ICONS, bT as Overline, bU as P, bV as PH_ICONS, bW as PH_ICON_ALIASES, bX as Panel, bY as PanelProps, bZ as Progress, b_ as ProgressProps, b$ as Radio, c0 as RadioProps, c5 as SearchInput, c6 as SearchInputProps, c7 as SectionTitle, c8 as SegmentedControl, c9 as Select, ca as SelectProps, cb as SettingsLayout, cc as SettingsLayoutProps, cd as SettingsNav, ce as SettingsNavGroup, cf as SettingsNavItem, cg as SettingsNavProps, ch as Skeleton, ci as SkeletonProps, cj as SkeletonShape, ck as Small, cl as SortMenu, cm as SortMenuProps, cn as Spinner, co as SpinnerProps, cp as Stat, cq as StatProps, cr as StatTone, cs as Table, ct as TableColumn, cu as TableProps, cv as Textarea, cw as TextareaProps, cx as Toggle, cy as ToggleProps, cz as Tooltip, cA as TooltipAlign, cB as TooltipProps, cC as TooltipProvider, cD as TooltipProviderProps, cE as TooltipSide } from './Chip-Cq3AiAji.mjs';
 import * as react from 'react';
 import { ReactNode } from 'react';
 import '@radix-ui/react-dropdown-menu';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { b9 as IconProps } from './Chip-DzC5xtK9.js';
-export { A as Accordion, a as Alert, b as AlertProps, c as AlertStatus, d as AuthCard, e as AuthCardProps, f as AuthDivider, g as AuthDividerProps, h as AuthLayout, i as AuthLayoutProps, j as Avatar, k as AvatarGroup, l as AvatarGroupProps, m as AvatarProps, n as AvatarSize, o as AvatarStatus, B as Badge, p as BadgeProps, q as BadgeSize, r as BadgeVariant, s as Button, t as ButtonChrome, u as ButtonChromeProps, v as ButtonProps, w as ButtonShape, x as ButtonSize, y as ButtonVariant, C as CANONICAL_ICONS, z as Calendar, D as CanonicalIconName, E as Caption, F as Card, G as CardProps, H as CardVariant, I as Checkbox, J as CheckboxProps, K as Chip, L as ChipProps, M as CommandPalette, N as Display, O as Dot, P as DotProps, Q as DropdownAlign, R as DropdownButton, S as DropdownButtonProps, T as DropdownItem, U as DropdownItemProps, V as DropdownMenu, W as DropdownMenuProps, X as DropdownRadioGroup, Y as DropdownRadioGroupProps, Z as DropdownRadioItem, _ as DropdownRadioItemProps, $ as DropdownSide, a0 as EmptyState, a1 as FileUpload, a2 as FileUploadProps, a3 as FilterBar, a4 as FilterBarProps, a5 as FilterChip, a6 as FilterChips, a7 as FilterChipsProps, a8 as FilterMenu, a9 as FilterMenuOption, aa as FilterMenuProps, ab as FormField, ac as FormFieldControlProps, ad as FormFieldProps, ae as H1, af as H2, ag as H3, ah as H4, ai as H5, ao as Icon, aj as IconActivity, ak as IconAliasName, al as IconAreaChart, am as IconArrowDown, an as IconArrowUp, ao as IconBase, ap as IconBell, aq as IconBellOff, ar as IconBolt, as as IconBox, at as IconByName, au as IconCancel, av as IconCheck, aw as IconCheckCircle, ax as IconChevronDown, ay as IconChevronLeft, az as IconChevronRight, aA as IconClipboardEdit, aB as IconClose, aC as IconCodePreview, aD as IconCohort, aE as IconCommandCursor, aF as IconCopy, aG as IconCumulativeChart, aH as IconDataReel, aI as IconDatabase, aJ as IconDownload, aK as IconEdit, aL as IconErrorOutline, aM as IconEventStream, aN as IconExclamation, aO as IconExperimentSplit, aP as IconFeatureGate, aQ as IconFlag, aR as IconFlare, aS as IconFlask, aT as IconGift, aU as IconGridView, aV as IconHandClick, aW as IconHome, aX as IconInfo, aY as IconInsightBoard, aZ as IconLayers, a_ as IconListView, a$ as IconLogout, b0 as IconMail, b1 as IconMoon, b2 as IconName, b3 as IconOldWindow, b4 as IconPanelRight, b5 as IconPerson, b6 as IconPlayCircle, b7 as IconPlus, b8 as IconPremium, ba as IconQueryEditor, bb as IconQueryStack, bc as IconRadar, bd as IconRecording, be as IconReplayFrame, bf as IconRobot, bg as IconRocket, bh as IconSave, bi as IconSearch, bj as IconSelectEvents, bk as IconShoppingCart, bl as IconSpinner, bm as IconStar, bn as IconSubArrowRight, bo as IconSun, bp as IconSurveyCard, bq as IconSurveys, br as IconSync, bs as IconTableChart, bt as IconTerminal, bu as IconToggle, bv as IconTrash, bw as IconTuning, bx as IconUpload, by as IconVolume, bz as IconVolumeOff, bA as Input, bB as InputProps, bC as InputSize, bD as InputVariant, bE as Label, bF as Lead, bG as Link, bH as LinkProps, bI as Loader, bJ as LoaderProps, bK as LoaderSize, bL as LoaderVariant, bM as LoadingState, bN as LoadingStateProps, bO as Modal, bP as ModalProps, bQ as ModalSize, bR as Mono, bS as OLD_UI_ICONS, bT as Overline, bU as P, bV as PH_ICONS, bW as PH_ICON_ALIASES, bX as Panel, bY as PanelProps, bZ as Progress, b_ as ProgressProps, b$ as Radio, c0 as RadioProps, c5 as SearchInput, c6 as SearchInputProps, c7 as SectionTitle, c8 as SegmentedControl, c9 as Select, ca as SelectProps, cb as SettingsLayout, cc as SettingsLayoutProps, cd as SettingsNav, ce as SettingsNavGroup, cf as SettingsNavItem, cg as SettingsNavProps, ch as Skeleton, ci as SkeletonProps, cj as SkeletonShape, ck as Small, cl as SortMenu, cm as SortMenuProps, cn as Spinner, co as SpinnerProps, cp as Stat, cq as StatProps, cr as StatTone, cs as Table, ct as TableColumn, cu as TableProps, cv as Textarea, cw as TextareaProps, cx as Toggle, cy as ToggleProps, cz as Tooltip, cA as TooltipAlign, cB as TooltipProps, cC as TooltipProvider, cD as TooltipProviderProps, cE as TooltipSide } from './Chip-DzC5xtK9.js';
+import { b9 as IconProps } from './Chip-Cq3AiAji.js';
+export { A as Accordion, a as Alert, b as AlertProps, c as AlertStatus, d as AuthCard, e as AuthCardProps, f as AuthDivider, g as AuthDividerProps, h as AuthLayout, i as AuthLayoutProps, j as Avatar, k as AvatarGroup, l as AvatarGroupProps, m as AvatarProps, n as AvatarSize, o as AvatarStatus, B as Badge, p as BadgeProps, q as BadgeSize, r as BadgeVariant, s as Button, t as ButtonChrome, u as ButtonChromeProps, v as ButtonProps, w as ButtonShape, x as ButtonSize, y as ButtonVariant, C as CANONICAL_ICONS, z as Calendar, D as CanonicalIconName, E as Caption, F as Card, G as CardProps, H as CardVariant, I as Checkbox, J as CheckboxProps, K as Chip, L as ChipProps, M as CommandPalette, N as Display, O as Dot, P as DotProps, Q as DropdownAlign, R as DropdownButton, S as DropdownButtonProps, T as DropdownItem, U as DropdownItemProps, V as DropdownMenu, W as DropdownMenuProps, X as DropdownRadioGroup, Y as DropdownRadioGroupProps, Z as DropdownRadioItem, _ as DropdownRadioItemProps, $ as DropdownSide, a0 as EmptyState, a1 as FileUpload, a2 as FileUploadProps, a3 as FilterBar, a4 as FilterBarProps, a5 as FilterChip, a6 as FilterChips, a7 as FilterChipsProps, a8 as FilterMenu, a9 as FilterMenuOption, aa as FilterMenuProps, ab as FormField, ac as FormFieldControlProps, ad as FormFieldProps, ae as H1, af as H2, ag as H3, ah as H4, ai as H5, ao as Icon, aj as IconActivity, ak as IconAliasName, al as IconAreaChart, am as IconArrowDown, an as IconArrowUp, ao as IconBase, ap as IconBell, aq as IconBellOff, ar as IconBolt, as as IconBox, at as IconByName, au as IconCancel, av as IconCheck, aw as IconCheckCircle, ax as IconChevronDown, ay as IconChevronLeft, az as IconChevronRight, aA as IconClipboardEdit, aB as IconClose, aC as IconCodePreview, aD as IconCohort, aE as IconCommandCursor, aF as IconCopy, aG as IconCumulativeChart, aH as IconDataReel, aI as IconDatabase, aJ as IconDownload, aK as IconEdit, aL as IconErrorOutline, aM as IconEventStream, aN as IconExclamation, aO as IconExperimentSplit, aP as IconFeatureGate, aQ as IconFlag, aR as IconFlare, aS as IconFlask, aT as IconGift, aU as IconGridView, aV as IconHandClick, aW as IconHome, aX as IconInfo, aY as IconInsightBoard, aZ as IconLayers, a_ as IconListView, a$ as IconLogout, b0 as IconMail, b1 as IconMoon, b2 as IconName, b3 as IconOldWindow, b4 as IconPanelRight, b5 as IconPerson, b6 as IconPlayCircle, b7 as IconPlus, b8 as IconPremium, ba as IconQueryEditor, bb as IconQueryStack, bc as IconRadar, bd as IconRecording, be as IconReplayFrame, bf as IconRobot, bg as IconRocket, bh as IconSave, bi as IconSearch, bj as IconSelectEvents, bk as IconShoppingCart, bl as IconSpinner, bm as IconStar, bn as IconSubArrowRight, bo as IconSun, bp as IconSurveyCard, bq as IconSurveys, br as IconSync, bs as IconTableChart, bt as IconTerminal, bu as IconToggle, bv as IconTrash, bw as IconTuning, bx as IconUpload, by as IconVolume, bz as IconVolumeOff, bA as Input, bB as InputProps, bC as InputSize, bD as InputVariant, bE as Label, bF as Lead, bG as Link, bH as LinkProps, bI as Loader, bJ as LoaderProps, bK as LoaderSize, bL as LoaderVariant, bM as LoadingState, bN as LoadingStateProps, bO as Modal, bP as ModalProps, bQ as ModalSize, bR as Mono, bS as OLD_UI_ICONS, bT as Overline, bU as P, bV as PH_ICONS, bW as PH_ICON_ALIASES, bX as Panel, bY as PanelProps, bZ as Progress, b_ as ProgressProps, b$ as Radio, c0 as RadioProps, c5 as SearchInput, c6 as SearchInputProps, c7 as SectionTitle, c8 as SegmentedControl, c9 as Select, ca as SelectProps, cb as SettingsLayout, cc as SettingsLayoutProps, cd as SettingsNav, ce as SettingsNavGroup, cf as SettingsNavItem, cg as SettingsNavProps, ch as Skeleton, ci as SkeletonProps, cj as SkeletonShape, ck as Small, cl as SortMenu, cm as SortMenuProps, cn as Spinner, co as SpinnerProps, cp as Stat, cq as StatProps, cr as StatTone, cs as Table, ct as TableColumn, cu as TableProps, cv as Textarea, cw as TextareaProps, cx as Toggle, cy as ToggleProps, cz as Tooltip, cA as TooltipAlign, cB as TooltipProps, cC as TooltipProvider, cD as TooltipProviderProps, cE as TooltipSide } from './Chip-Cq3AiAji.js';
 import * as react from 'react';
 import { ReactNode } from 'react';
 import '@radix-ui/react-dropdown-menu';

package/dist/tailwind-preset.js

@@ -39,7 +39,6 @@ var posthogThemePreset = {
           "Arial",
           "sans-serif"
         ],
-        serif: ["var(--ph-font-serif-stack)"],
         mono: ["var(--ph-font-monospace-stack)"],
         shortcut: ["var(--ph-font-shortcut-stack)"]
       },

package/dist/tailwind-preset.mjs

@@ -17,7 +17,6 @@ var posthogThemePreset = {
           "Arial",
           "sans-serif"
         ],
-        serif: ["var(--ph-font-serif-stack)"],
         mono: ["var(--ph-font-monospace-stack)"],
         shortcut: ["var(--ph-font-shortcut-stack)"]
       },

package/dist/ui.d.mts

@@ -1,5 +1,5 @@
-import { a4 as FilterBarProps, a7 as FilterChipsProps } from './Chip-DzC5xtK9.mjs';
-export { A as Accordion, a as Alert, b as AlertProps, c as AlertStatus, d as AuthCard, e as AuthCardProps, f as AuthDivider, g as AuthDividerProps, h as AuthLayout, i as AuthLayoutProps, j as Avatar, k as AvatarGroup, l as AvatarGroupProps, m as AvatarProps, n as AvatarSize, o as AvatarStatus, B as Badge, p as BadgeProps, q as BadgeSize, r as BadgeVariant, s as Button, t as ButtonChrome, u as ButtonChromeProps, v as ButtonProps, w as ButtonShape, x as ButtonSize, y as ButtonVariant, z as Calendar, D as CanonicalIconName, E as Caption, F as Card, G as CardProps, H as CardVariant, I as Checkbox, J as CheckboxProps, K as Chip, L as ChipProps, M as CommandPalette, N as Display, O as Dot, P as DotProps, Q as DropdownAlign, R as DropdownButton, S as DropdownButtonProps, T as DropdownItem, U as DropdownItemProps, V as DropdownMenu, W as DropdownMenuProps, X as DropdownRadioGroup, Y as DropdownRadioGroupProps, Z as DropdownRadioItem, _ as DropdownRadioItemProps, $ as DropdownSide, a0 as EmptyState, a1 as FileUpload, a2 as FileUploadProps, a3 as FilterBar, a5 as FilterChip, a6 as FilterChips, a8 as FilterMenu, a9 as FilterMenuOption, aa as FilterMenuProps, ab as FormField, ac as FormFieldControlProps, ad as FormFieldProps, ae as H1, af as H2, ag as H3, ah as H4, ai as H5, ao as Icon, ak as IconAliasName, at as IconByName, b2 as IconName, b9 as IconProps, bA as Input, bB as InputProps, bC as InputSize, bD as InputVariant, bE as Label, bF as Lead, bG as Link, bH as LinkProps, bI as Loader, bJ as LoaderProps, bK as LoaderSize, bL as LoaderVariant, bM as LoadingState, bN as LoadingStateProps, bO as Modal, bP as ModalProps, bQ as ModalSize, bR as Mono, bT as Overline, bU as P, bX as Panel, bY as PanelProps, bZ as Progress, b_ as ProgressProps, b$ as Radio, c0 as RadioProps, c1 as Range, c2 as RangeProps, c3 as SearchGroup, c4 as SearchGroupProps, c5 as SearchInput, c6 as SearchInputProps, c7 as SectionTitle, c8 as SegmentedControl, c9 as Select, ca as SelectProps, cb as SettingsLayout, cc as SettingsLayoutProps, cd as SettingsNav, ce as SettingsNavGroup, cf as SettingsNavItem, cg as SettingsNavProps, ch as Skeleton, ci as SkeletonProps, cj as SkeletonShape, ck as Small, cl as SortMenu, cm as SortMenuProps, cn as Spinner, co as SpinnerProps, cp as Stat, cq as StatProps, cr as StatTone, cs as Table, ct as TableColumn, cu as TableProps, cv as Textarea, cw as TextareaProps, cx as Toggle, cy as ToggleProps, cz as Tooltip, cA as TooltipAlign, cB as TooltipProps, cC as TooltipProvider, cD as TooltipProviderProps, cE as TooltipSide } from './Chip-DzC5xtK9.mjs';
+import { a4 as FilterBarProps, a7 as FilterChipsProps } from './Chip-Cq3AiAji.mjs';
+export { A as Accordion, a as Alert, b as AlertProps, c as AlertStatus, d as AuthCard, e as AuthCardProps, f as AuthDivider, g as AuthDividerProps, h as AuthLayout, i as AuthLayoutProps, j as Avatar, k as AvatarGroup, l as AvatarGroupProps, m as AvatarProps, n as AvatarSize, o as AvatarStatus, B as Badge, p as BadgeProps, q as BadgeSize, r as BadgeVariant, s as Button, t as ButtonChrome, u as ButtonChromeProps, v as ButtonProps, w as ButtonShape, x as ButtonSize, y as ButtonVariant, z as Calendar, D as CanonicalIconName, E as Caption, F as Card, G as CardProps, H as CardVariant, I as Checkbox, J as CheckboxProps, K as Chip, L as ChipProps, M as CommandPalette, N as Display, O as Dot, P as DotProps, Q as DropdownAlign, R as DropdownButton, S as DropdownButtonProps, T as DropdownItem, U as DropdownItemProps, V as DropdownMenu, W as DropdownMenuProps, X as DropdownRadioGroup, Y as DropdownRadioGroupProps, Z as DropdownRadioItem, _ as DropdownRadioItemProps, $ as DropdownSide, a0 as EmptyState, a1 as FileUpload, a2 as FileUploadProps, a3 as FilterBar, a5 as FilterChip, a6 as FilterChips, a8 as FilterMenu, a9 as FilterMenuOption, aa as FilterMenuProps, ab as FormField, ac as FormFieldControlProps, ad as FormFieldProps, ae as H1, af as H2, ag as H3, ah as H4, ai as H5, ao as Icon, ak as IconAliasName, at as IconByName, b2 as IconName, b9 as IconProps, bA as Input, bB as InputProps, bC as InputSize, bD as InputVariant, bE as Label, bF as Lead, bG as Link, bH as LinkProps, bI as Loader, bJ as LoaderProps, bK as LoaderSize, bL as LoaderVariant, bM as LoadingState, bN as LoadingStateProps, bO as Modal, bP as ModalProps, bQ as ModalSize, bR as Mono, bT as Overline, bU as P, bX as Panel, bY as PanelProps, bZ as Progress, b_ as ProgressProps, b$ as Radio, c0 as RadioProps, c1 as Range, c2 as RangeProps, c3 as SearchGroup, c4 as SearchGroupProps, c5 as SearchInput, c6 as SearchInputProps, c7 as SectionTitle, c8 as SegmentedControl, c9 as Select, ca as SelectProps, cb as SettingsLayout, cc as SettingsLayoutProps, cd as SettingsNav, ce as SettingsNavGroup, cf as SettingsNavItem, cg as SettingsNavProps, ch as Skeleton, ci as SkeletonProps, cj as SkeletonShape, ck as Small, cl as SortMenu, cm as SortMenuProps, cn as Spinner, co as SpinnerProps, cp as Stat, cq as StatProps, cr as StatTone, cs as Table, ct as TableColumn, cu as TableProps, cv as Textarea, cw as TextareaProps, cx as Toggle, cy as ToggleProps, cz as Tooltip, cA as TooltipAlign, cB as TooltipProps, cC as TooltipProvider, cD as TooltipProviderProps, cE as TooltipSide } from './Chip-Cq3AiAji.mjs';
 import * as react from 'react';
 import { HTMLAttributes, ReactNode, ComponentPropsWithoutRef } from 'react';
 import '@radix-ui/react-dropdown-menu';

package/dist/ui.d.ts

@@ -1,5 +1,5 @@
-import { a4 as FilterBarProps, a7 as FilterChipsProps } from './Chip-DzC5xtK9.js';
-export { A as Accordion, a as Alert, b as AlertProps, c as AlertStatus, d as AuthCard, e as AuthCardProps, f as AuthDivider, g as AuthDividerProps, h as AuthLayout, i as AuthLayoutProps, j as Avatar, k as AvatarGroup, l as AvatarGroupProps, m as AvatarProps, n as AvatarSize, o as AvatarStatus, B as Badge, p as BadgeProps, q as BadgeSize, r as BadgeVariant, s as Button, t as ButtonChrome, u as ButtonChromeProps, v as ButtonProps, w as ButtonShape, x as ButtonSize, y as ButtonVariant, z as Calendar, D as CanonicalIconName, E as Caption, F as Card, G as CardProps, H as CardVariant, I as Checkbox, J as CheckboxProps, K as Chip, L as ChipProps, M as CommandPalette, N as Display, O as Dot, P as DotProps, Q as DropdownAlign, R as DropdownButton, S as DropdownButtonProps, T as DropdownItem, U as DropdownItemProps, V as DropdownMenu, W as DropdownMenuProps, X as DropdownRadioGroup, Y as DropdownRadioGroupProps, Z as DropdownRadioItem, _ as DropdownRadioItemProps, $ as DropdownSide, a0 as EmptyState, a1 as FileUpload, a2 as FileUploadProps, a3 as FilterBar, a5 as FilterChip, a6 as FilterChips, a8 as FilterMenu, a9 as FilterMenuOption, aa as FilterMenuProps, ab as FormField, ac as FormFieldControlProps, ad as FormFieldProps, ae as H1, af as H2, ag as H3, ah as H4, ai as H5, ao as Icon, ak as IconAliasName, at as IconByName, b2 as IconName, b9 as IconProps, bA as Input, bB as InputProps, bC as InputSize, bD as InputVariant, bE as Label, bF as Lead, bG as Link, bH as LinkProps, bI as Loader, bJ as LoaderProps, bK as LoaderSize, bL as LoaderVariant, bM as LoadingState, bN as LoadingStateProps, bO as Modal, bP as ModalProps, bQ as ModalSize, bR as Mono, bT as Overline, bU as P, bX as Panel, bY as PanelProps, bZ as Progress, b_ as ProgressProps, b$ as Radio, c0 as RadioProps, c1 as Range, c2 as RangeProps, c3 as SearchGroup, c4 as SearchGroupProps, c5 as SearchInput, c6 as SearchInputProps, c7 as SectionTitle, c8 as SegmentedControl, c9 as Select, ca as SelectProps, cb as SettingsLayout, cc as SettingsLayoutProps, cd as SettingsNav, ce as SettingsNavGroup, cf as SettingsNavItem, cg as SettingsNavProps, ch as Skeleton, ci as SkeletonProps, cj as SkeletonShape, ck as Small, cl as SortMenu, cm as SortMenuProps, cn as Spinner, co as SpinnerProps, cp as Stat, cq as StatProps, cr as StatTone, cs as Table, ct as TableColumn, cu as TableProps, cv as Textarea, cw as TextareaProps, cx as Toggle, cy as ToggleProps, cz as Tooltip, cA as TooltipAlign, cB as TooltipProps, cC as TooltipProvider, cD as TooltipProviderProps, cE as TooltipSide } from './Chip-DzC5xtK9.js';
+import { a4 as FilterBarProps, a7 as FilterChipsProps } from './Chip-Cq3AiAji.js';
+export { A as Accordion, a as Alert, b as AlertProps, c as AlertStatus, d as AuthCard, e as AuthCardProps, f as AuthDivider, g as AuthDividerProps, h as AuthLayout, i as AuthLayoutProps, j as Avatar, k as AvatarGroup, l as AvatarGroupProps, m as AvatarProps, n as AvatarSize, o as AvatarStatus, B as Badge, p as BadgeProps, q as BadgeSize, r as BadgeVariant, s as Button, t as ButtonChrome, u as ButtonChromeProps, v as ButtonProps, w as ButtonShape, x as ButtonSize, y as ButtonVariant, z as Calendar, D as CanonicalIconName, E as Caption, F as Card, G as CardProps, H as CardVariant, I as Checkbox, J as CheckboxProps, K as Chip, L as ChipProps, M as CommandPalette, N as Display, O as Dot, P as DotProps, Q as DropdownAlign, R as DropdownButton, S as DropdownButtonProps, T as DropdownItem, U as DropdownItemProps, V as DropdownMenu, W as DropdownMenuProps, X as DropdownRadioGroup, Y as DropdownRadioGroupProps, Z as DropdownRadioItem, _ as DropdownRadioItemProps, $ as DropdownSide, a0 as EmptyState, a1 as FileUpload, a2 as FileUploadProps, a3 as FilterBar, a5 as FilterChip, a6 as FilterChips, a8 as FilterMenu, a9 as FilterMenuOption, aa as FilterMenuProps, ab as FormField, ac as FormFieldControlProps, ad as FormFieldProps, ae as H1, af as H2, ag as H3, ah as H4, ai as H5, ao as Icon, ak as IconAliasName, at as IconByName, b2 as IconName, b9 as IconProps, bA as Input, bB as InputProps, bC as InputSize, bD as InputVariant, bE as Label, bF as Lead, bG as Link, bH as LinkProps, bI as Loader, bJ as LoaderProps, bK as LoaderSize, bL as LoaderVariant, bM as LoadingState, bN as LoadingStateProps, bO as Modal, bP as ModalProps, bQ as ModalSize, bR as Mono, bT as Overline, bU as P, bX as Panel, bY as PanelProps, bZ as Progress, b_ as ProgressProps, b$ as Radio, c0 as RadioProps, c1 as Range, c2 as RangeProps, c3 as SearchGroup, c4 as SearchGroupProps, c5 as SearchInput, c6 as SearchInputProps, c7 as SectionTitle, c8 as SegmentedControl, c9 as Select, ca as SelectProps, cb as SettingsLayout, cc as SettingsLayoutProps, cd as SettingsNav, ce as SettingsNavGroup, cf as SettingsNavItem, cg as SettingsNavProps, ch as Skeleton, ci as SkeletonProps, cj as SkeletonShape, ck as Small, cl as SortMenu, cm as SortMenuProps, cn as Spinner, co as SpinnerProps, cp as Stat, cq as StatProps, cr as StatTone, cs as Table, ct as TableColumn, cu as TableProps, cv as Textarea, cw as TextareaProps, cx as Toggle, cy as ToggleProps, cz as Tooltip, cA as TooltipAlign, cB as TooltipProps, cC as TooltipProvider, cD as TooltipProviderProps, cE as TooltipSide } from './Chip-Cq3AiAji.js';
 import * as react from 'react';
 import { HTMLAttributes, ReactNode, ComponentPropsWithoutRef } from 'react';
 import '@radix-ui/react-dropdown-menu';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenide-io/the-old-ui-theme",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "description": "Props-driven React components and theme tokens inspired by classic interface design \u2014 optimized for Next.js apps and internal tools.",
   "author": "Xenide",
   "license": "MIT",

package/src/app/globals.css

@@ -36,24 +36,6 @@
   font-display: swap;
 }
 
-/* Instrument Serif — the one display voice, for marketing and document titles.
-   Single weight on purpose: contrast comes from the serif shapes and scale,
-   not from more weights competing with Open Runde. */
-@font-face {
-  font-family: "Instrument Serif";
-  src: url("/fonts/InstrumentSerif-Regular.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Instrument Serif";
-  src: url("/fonts/InstrumentSerif-Italic.woff2") format("woff2");
-  font-weight: 400;
-  font-style: italic;
-  font-display: swap;
-}
-
 /* Structural tokens — shared across colour themes */
 :where(:root) {
   --ph-shadow-elevation-3000: 0 3px 0 var(--ph-border-3000);

package/src/components/ui/Typography.tsx

@@ -58,8 +58,8 @@ function textClass(
 }
 
 /**
- * Display — the marketing hero voice: Instrument Serif, fluid size, one per page.
- * Product page titles use H1/`SuitePageHeader` (sans) instead.
+ * Display — the marketing hero: fluid size, tight tracking, one per page.
+ * Product page titles use H1/`SuitePageHeader` instead.
  */
 export function Display({
   children,
@@ -71,7 +71,7 @@ export function Display({
   return <h1 className={textClass("ph-hero-title", tone, weight, truncate, className)}>{children}</h1>;
 }
 
-/** Section title — serif, fluid; pairs with Display on public pages. */
+/** Section title — fluid; pairs with Display on public pages. */
 export function SectionTitle({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
   return <h2 className={textClass("ph-section-title", tone, weight, truncate, className)}>{children}</h2>;
 }

package/src/components/ui/typography.test.tsx

@@ -2,8 +2,8 @@ import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 import { Display, Lead, H1, SectionTitle } from "@/components/ui/Typography";
 
-describe("typography voices", () => {
-  it("gives marketing display the serif hero class and keeps product H1 sans", () => {
+describe("typography scale", () => {
+  it("puts marketing headings on the fluid classes", () => {
     render(
       <>
         <Display>Track time without ceremony</Display>

package/src/styles/suite-skin.css

@@ -34,6 +34,10 @@ html {
   /* Today needs a calmer opening rhythm than dense workspace screens. */
   --suite-today-pad-y-top: var(--suite-space-4);
   --suite-today-pad-y-top-sm: var(--suite-space-5);
+  /* Slack-style scroll edge: the page background the title sits on, and how
+     far content dissolves into it before it reaches the title. */
+  --suite-scroll-scrim: var(--ph-canvas);
+  --suite-scroll-fade: var(--suite-space-6);
   --suite-section-gap: var(--suite-space-5);
   --suite-header-gap: var(--suite-space-4);
   --suite-content-max: 96rem; /* used only by content/narrow caps, not default pages */
@@ -251,7 +255,10 @@ html.dark .today-page-frame__cloud--2 {
   color: var(--ph-canvas);
 }
 
-/* Desktop sticky page title chrome (SuitePageHeader sticky). */
+/* Sticky page title (SuitePageHeader sticky) — Slack behaviour: the title
+   holds its position on the page background and never becomes its own bar.
+   No surface tint, border or blur; content scrolls underneath and dissolves
+   into the same background through the scrim below. */
 .suite-page-header-sticky {
   position: sticky;
   top: 0;
@@ -260,11 +267,22 @@ html.dark .today-page-frame__cloud--2 {
   margin-right: calc(-1 * var(--suite-page-pad-x));
   padding-left: var(--suite-page-pad-x);
   padding-right: var(--suite-page-pad-x);
-  background: color-mix(in oklab, var(--ph-canvas) 88%, transparent);
-  -webkit-backdrop-filter: blur(12px) saturate(1.4);
-  backdrop-filter: blur(12px) saturate(1.4);
-  border-bottom: 1px solid transparent;
-  transition: border-color 160ms ease;
+  background: var(--suite-scroll-scrim);
+}
+
+/* The fade content scrolls into, pinned to the title's bottom edge. */
+.suite-page-header-sticky::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  top: 100%;
+  height: var(--suite-scroll-fade);
+  background: linear-gradient(
+    to bottom,
+    var(--suite-scroll-scrim),
+    transparent
+  );
+  pointer-events: none;
 }
 @media (min-width: 640px) {
   .suite-page-header-sticky {
@@ -283,15 +301,9 @@ html.dark .today-page-frame__cloud--2 {
   }
 }
 .suite-page-header-sticky[data-stuck="true"] {
-  border-bottom-color: var(--ph-border-subtle);
   /* Only when pinned under the scroll edge — keeps resting titles aligned. */
   padding-top: var(--suite-space-2);
 }
-@supports not (backdrop-filter: blur(1px)) {
-  .suite-page-header-sticky {
-    background: var(--ph-canvas);
-  }
-}
 
 /* Sticky title chrome is for Today only — workspace pages scroll normally. */
 .suite-app-layout__main:not(:has([data-test="today-page"])) .suite-page-header-sticky {
@@ -303,9 +315,10 @@ html.dark .today-page-frame__cloud--2 {
   padding-left: 0;
   padding-right: 0;
   background: none;
-  border-bottom: none;
-  -webkit-backdrop-filter: none;
-  backdrop-filter: none;
+}
+.suite-app-layout__main:not(:has([data-test="today-page"]))
+  .suite-page-header-sticky::after {
+  content: none;
 }
 .suite-app-layout__main:not(:has([data-test="today-page"]))
   .suite-page-header-sticky[data-stuck="true"] {

package/src/styles/typography.css

@@ -1,19 +1,15 @@
 /**
- * Type system — two voices, one scale.
+ * Type system — one voice, one scale.
  *
- * 1. Open Runde (`font-sans`) — every product surface: UI, body copy, controls.
- *    Also `font-display` in app configs, i.e. tight-tracked in-app page titles.
- * 2. Instrument Serif (`font-serif`) — the single display voice: marketing
- *    heroes, section titles, and document titles. One weight only.
- * 3. Monospace stack — code, CSV, token chips. Functional, never decorative.
+ * 1. Open Runde (`font-sans`) — every surface: marketing, product UI, body.
+ *    Hierarchy comes from size, weight, and tracking, not from a second face.
+ * 2. Monospace stack — code, CSV, token chips, shortcuts. Functional only.
  *
  * Marketing type uses `clamp()` so a hero has ONE definition instead of three
  * breakpoint variants per app. Product UI keeps Tailwind's step scale.
  */
 
 :root {
-  /* Display / editorial — pairs with Open Runde by contrast, not similarity */
-  --ph-font-serif-stack: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
   /* Code / CSV / token chips — monospace with clear ASCII */
   --ph-font-monospace-stack:
     ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
@@ -36,33 +32,32 @@
 
 /* ── Marketing / landing type ─────────────────────────────────────────────
    Use these on public pages so all five apps share one hero rhythm.
-   In-app chrome keeps `font-sans`; do not use hero classes inside the shell. */
+   In-app chrome keeps the Tailwind step scale; do not use hero classes
+   inside the shell. */
 
 .ph-hero-title {
-  font-family: var(--ph-font-serif-stack);
-  font-weight: 400;
   font-size: var(--ph-type-hero);
-  /* Serif heroes wrap to 2–3 lines; 1.02 collides ascenders with descenders. */
-  line-height: 1.06;
-  letter-spacing: -0.02em;
+  font-weight: 700;
+  /* Open Runde is rounded and wide; display sizes need noticeably tighter
+     tracking than the 1:1 default to stop looking loose. */
+  letter-spacing: -0.032em;
+  line-height: 1.05;
   text-wrap: balance;
 }
 
 .ph-section-title {
-  font-family: var(--ph-font-serif-stack);
-  font-weight: 400;
   font-size: var(--ph-type-section);
-  line-height: 1.08;
-  letter-spacing: -0.015em;
+  font-weight: 700;
+  letter-spacing: -0.022em;
+  line-height: 1.15;
   text-wrap: balance;
 }
 
-/* Feature/card headings stay sans — they sit next to body copy and need weight. */
 .ph-feature-title {
   font-size: var(--ph-type-feature);
   font-weight: 600;
-  line-height: 1.25;
   letter-spacing: -0.01em;
+  line-height: 1.25;
 }
 
 .ph-lead {
@@ -83,9 +78,3 @@
   letter-spacing: 0.14em;
   text-transform: uppercase;
 }
-
-/* Emphasis inside a serif hero: italic, not a third font. */
-.ph-hero-title em,
-.ph-section-title em {
-  font-style: italic;
-}

package/tailwind-preset.ts

@@ -21,7 +21,6 @@ const posthogThemePreset: Partial<Config> = {
           "Arial",
           "sans-serif",
         ],
-        serif: ["var(--ph-font-serif-stack)"],
         mono: ["var(--ph-font-monospace-stack)"],
         shortcut: ["var(--ph-font-shortcut-stack)"],
       },