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

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.
package/README.md CHANGED
@@ -117,22 +117,22 @@ the component family it demonstrates:
117
117
  | ------------------- | -------------------------------------------------------------------------------- | ----------------- |
118
118
  | **CSS tokens** | `src/styles/themes.css` — `[data-theme]` variables (`--ph-*`) | None |
119
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` |
120
+ | **Tailwind preset** | `tailwind-preset.ts` — `ph.*` colours, font stacks, radii, shadows | `tailwindcss` |
121
121
  | **App shell** | `src/app/globals.css` — `@font-face`, primitives, layouts | Tokens + Tailwind |
122
122
 
123
123
  ## Typography
124
124
 
125
- Two voices, deliberately different shapes rather than two weights of one face:
125
+ One face, two scales. Hierarchy comes from size, weight, and tracking — not
126
+ from a second typeface competing with Open Runde.
126
127
 
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 |
128
+ | Role | Face | Where |
129
+ | ------------------- | ------------------------ | -------------------------------------------------- |
130
+ | Everything you read | Open Runde (`font-sans`) | Marketing and product, `Display` down to `Caption` |
131
+ | Functional | System monospace | `Mono`, code, IDs, keyboard shortcuts |
132
132
 
133
133
  Marketing sizes are fluid (`clamp()`), so a hero is one class instead of three
134
134
  breakpoint variants: `.ph-hero-title`, `.ph-section-title`, `.ph-feature-title`,
135
- `.ph-lead`, `.ph-eyebrow`. Self-host `InstrumentSerif-{Regular,Italic}.woff2` and
135
+ `.ph-lead`, `.ph-eyebrow`. Product UI keeps the Tailwind step scale. Self-host
136
136
  the Open Runde weights under `public/fonts/`.
137
137
 
138
138
  ## Themes
@@ -772,11 +772,11 @@ interface TextBaseProps {
772
772
  truncate?: boolean;
773
773
  }
774
774
  /**
775
- * Display — the marketing hero voice: Instrument Serif, fluid size, one per page.
776
- * Product page titles use H1/`SuitePageHeader` (sans) instead.
775
+ * Display — the marketing hero: fluid size, tight tracking, one per page.
776
+ * Product page titles use H1/`SuitePageHeader` instead.
777
777
  */
778
778
  declare function Display({ children, tone, weight, truncate, className, }: TextBaseProps): react.JSX.Element;
779
- /** Section title — serif, fluid; pairs with Display on public pages. */
779
+ /** Section title — fluid; pairs with Display on public pages. */
780
780
  declare function SectionTitle({ children, tone, weight, truncate, className }: TextBaseProps): react.JSX.Element;
781
781
  /** H1 — page title */
782
782
  declare function H1({ children, tone, weight, truncate, className }: TextBaseProps): react.JSX.Element;
@@ -772,11 +772,11 @@ interface TextBaseProps {
772
772
  truncate?: boolean;
773
773
  }
774
774
  /**
775
- * Display — the marketing hero voice: Instrument Serif, fluid size, one per page.
776
- * Product page titles use H1/`SuitePageHeader` (sans) instead.
775
+ * Display — the marketing hero: fluid size, tight tracking, one per page.
776
+ * Product page titles use H1/`SuitePageHeader` instead.
777
777
  */
778
778
  declare function Display({ children, tone, weight, truncate, className, }: TextBaseProps): react.JSX.Element;
779
- /** Section title — serif, fluid; pairs with Display on public pages. */
779
+ /** Section title — fluid; pairs with Display on public pages. */
780
780
  declare function SectionTitle({ children, tone, weight, truncate, className }: TextBaseProps): react.JSX.Element;
781
781
  /** H1 — page title */
782
782
  declare function H1({ children, tone, weight, truncate, className }: TextBaseProps): react.JSX.Element;
package/dist/index.d.mts CHANGED
@@ -1,5 +1,5 @@
1
- import { b9 as IconProps } from './Chip-DzC5xtK9.mjs';
2
- 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';
1
+ import { b9 as IconProps } from './Chip-Cq3AiAji.mjs';
2
+ 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';
3
3
  import * as react from 'react';
4
4
  import { ReactNode } from 'react';
5
5
  import '@radix-ui/react-dropdown-menu';
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { b9 as IconProps } from './Chip-DzC5xtK9.js';
2
- 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';
1
+ import { b9 as IconProps } from './Chip-Cq3AiAji.js';
2
+ 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';
3
3
  import * as react from 'react';
4
4
  import { ReactNode } from 'react';
5
5
  import '@radix-ui/react-dropdown-menu';
@@ -39,7 +39,6 @@ var posthogThemePreset = {
39
39
  "Arial",
40
40
  "sans-serif"
41
41
  ],
42
- serif: ["var(--ph-font-serif-stack)"],
43
42
  mono: ["var(--ph-font-monospace-stack)"],
44
43
  shortcut: ["var(--ph-font-shortcut-stack)"]
45
44
  },
@@ -17,7 +17,6 @@ var posthogThemePreset = {
17
17
  "Arial",
18
18
  "sans-serif"
19
19
  ],
20
- serif: ["var(--ph-font-serif-stack)"],
21
20
  mono: ["var(--ph-font-monospace-stack)"],
22
21
  shortcut: ["var(--ph-font-shortcut-stack)"]
23
22
  },
package/dist/ui.d.mts CHANGED
@@ -1,5 +1,5 @@
1
- import { a4 as FilterBarProps, a7 as FilterChipsProps } from './Chip-DzC5xtK9.mjs';
2
- 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';
1
+ import { a4 as FilterBarProps, a7 as FilterChipsProps } from './Chip-Cq3AiAji.mjs';
2
+ 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';
3
3
  import * as react from 'react';
4
4
  import { HTMLAttributes, ReactNode, ComponentPropsWithoutRef } from 'react';
5
5
  import '@radix-ui/react-dropdown-menu';
package/dist/ui.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { a4 as FilterBarProps, a7 as FilterChipsProps } from './Chip-DzC5xtK9.js';
2
- 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';
1
+ import { a4 as FilterBarProps, a7 as FilterChipsProps } from './Chip-Cq3AiAji.js';
2
+ 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';
3
3
  import * as react from 'react';
4
4
  import { HTMLAttributes, ReactNode, ComponentPropsWithoutRef } from 'react';
5
5
  import '@radix-ui/react-dropdown-menu';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xenide-io/the-old-ui-theme",
3
- "version": "0.6.1",
3
+ "version": "0.6.2",
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",
@@ -36,24 +36,6 @@
36
36
  font-display: swap;
37
37
  }
38
38
 
39
- /* Instrument Serif — the one display voice, for marketing and document titles.
40
- Single weight on purpose: contrast comes from the serif shapes and scale,
41
- not from more weights competing with Open Runde. */
42
- @font-face {
43
- font-family: "Instrument Serif";
44
- src: url("/fonts/InstrumentSerif-Regular.woff2") format("woff2");
45
- font-weight: 400;
46
- font-style: normal;
47
- font-display: swap;
48
- }
49
- @font-face {
50
- font-family: "Instrument Serif";
51
- src: url("/fonts/InstrumentSerif-Italic.woff2") format("woff2");
52
- font-weight: 400;
53
- font-style: italic;
54
- font-display: swap;
55
- }
56
-
57
39
  /* Structural tokens — shared across colour themes */
58
40
  :where(:root) {
59
41
  --ph-shadow-elevation-3000: 0 3px 0 var(--ph-border-3000);
@@ -58,8 +58,8 @@ function textClass(
58
58
  }
59
59
 
60
60
  /**
61
- * Display — the marketing hero voice: Instrument Serif, fluid size, one per page.
62
- * Product page titles use H1/`SuitePageHeader` (sans) instead.
61
+ * Display — the marketing hero: fluid size, tight tracking, one per page.
62
+ * Product page titles use H1/`SuitePageHeader` instead.
63
63
  */
64
64
  export function Display({
65
65
  children,
@@ -71,7 +71,7 @@ export function Display({
71
71
  return <h1 className={textClass("ph-hero-title", tone, weight, truncate, className)}>{children}</h1>;
72
72
  }
73
73
 
74
- /** Section title — serif, fluid; pairs with Display on public pages. */
74
+ /** Section title — fluid; pairs with Display on public pages. */
75
75
  export function SectionTitle({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
76
76
  return <h2 className={textClass("ph-section-title", tone, weight, truncate, className)}>{children}</h2>;
77
77
  }
@@ -2,8 +2,8 @@ import { render, screen } from "@testing-library/react";
2
2
  import { describe, expect, it } from "vitest";
3
3
  import { Display, Lead, H1, SectionTitle } from "@/components/ui/Typography";
4
4
 
5
- describe("typography voices", () => {
6
- it("gives marketing display the serif hero class and keeps product H1 sans", () => {
5
+ describe("typography scale", () => {
6
+ it("puts marketing headings on the fluid classes", () => {
7
7
  render(
8
8
  <>
9
9
  <Display>Track time without ceremony</Display>
@@ -1,19 +1,15 @@
1
1
  /**
2
- * Type system — two voices, one scale.
2
+ * Type system — one voice, one scale.
3
3
  *
4
- * 1. Open Runde (`font-sans`) — every product surface: UI, body copy, controls.
5
- * Also `font-display` in app configs, i.e. tight-tracked in-app page titles.
6
- * 2. Instrument Serif (`font-serif`) the single display voice: marketing
7
- * heroes, section titles, and document titles. One weight only.
8
- * 3. Monospace stack — code, CSV, token chips. Functional, never decorative.
4
+ * 1. Open Runde (`font-sans`) — every surface: marketing, product UI, body.
5
+ * Hierarchy comes from size, weight, and tracking, not from a second face.
6
+ * 2. Monospace stackcode, CSV, token chips, shortcuts. Functional only.
9
7
  *
10
8
  * Marketing type uses `clamp()` so a hero has ONE definition instead of three
11
9
  * breakpoint variants per app. Product UI keeps Tailwind's step scale.
12
10
  */
13
11
 
14
12
  :root {
15
- /* Display / editorial — pairs with Open Runde by contrast, not similarity */
16
- --ph-font-serif-stack: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
17
13
  /* Code / CSV / token chips — monospace with clear ASCII */
18
14
  --ph-font-monospace-stack:
19
15
  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
@@ -36,33 +32,32 @@
36
32
 
37
33
  /* ── Marketing / landing type ─────────────────────────────────────────────
38
34
  Use these on public pages so all five apps share one hero rhythm.
39
- In-app chrome keeps `font-sans`; do not use hero classes inside the shell. */
35
+ In-app chrome keeps the Tailwind step scale; do not use hero classes
36
+ inside the shell. */
40
37
 
41
38
  .ph-hero-title {
42
- font-family: var(--ph-font-serif-stack);
43
- font-weight: 400;
44
39
  font-size: var(--ph-type-hero);
45
- /* Serif heroes wrap to 2–3 lines; 1.02 collides ascenders with descenders. */
46
- line-height: 1.06;
47
- letter-spacing: -0.02em;
40
+ font-weight: 700;
41
+ /* Open Runde is rounded and wide; display sizes need noticeably tighter
42
+ tracking than the 1:1 default to stop looking loose. */
43
+ letter-spacing: -0.032em;
44
+ line-height: 1.05;
48
45
  text-wrap: balance;
49
46
  }
50
47
 
51
48
  .ph-section-title {
52
- font-family: var(--ph-font-serif-stack);
53
- font-weight: 400;
54
49
  font-size: var(--ph-type-section);
55
- line-height: 1.08;
56
- letter-spacing: -0.015em;
50
+ font-weight: 700;
51
+ letter-spacing: -0.022em;
52
+ line-height: 1.15;
57
53
  text-wrap: balance;
58
54
  }
59
55
 
60
- /* Feature/card headings stay sans — they sit next to body copy and need weight. */
61
56
  .ph-feature-title {
62
57
  font-size: var(--ph-type-feature);
63
58
  font-weight: 600;
64
- line-height: 1.25;
65
59
  letter-spacing: -0.01em;
60
+ line-height: 1.25;
66
61
  }
67
62
 
68
63
  .ph-lead {
@@ -83,9 +78,3 @@
83
78
  letter-spacing: 0.14em;
84
79
  text-transform: uppercase;
85
80
  }
86
-
87
- /* Emphasis inside a serif hero: italic, not a third font. */
88
- .ph-hero-title em,
89
- .ph-section-title em {
90
- font-style: italic;
91
- }
@@ -21,7 +21,6 @@ const posthogThemePreset: Partial<Config> = {
21
21
  "Arial",
22
22
  "sans-serif",
23
23
  ],
24
- serif: ["var(--ph-font-serif-stack)"],
25
24
  mono: ["var(--ph-font-monospace-stack)"],
26
25
  shortcut: ["var(--ph-font-shortcut-stack)"],
27
26
  },