@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 +8 -8
- package/dist/{Chip-DzC5xtK9.d.mts → Chip-Cq3AiAji.d.mts} +3 -3
- package/dist/{Chip-DzC5xtK9.d.ts → Chip-Cq3AiAji.d.ts} +3 -3
- package/dist/index.d.mts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/tailwind-preset.js +0 -1
- package/dist/tailwind-preset.mjs +0 -1
- package/dist/ui.d.mts +2 -2
- package/dist/ui.d.ts +2 -2
- package/package.json +1 -1
- package/src/app/globals.css +0 -18
- package/src/components/ui/Typography.tsx +3 -3
- package/src/components/ui/typography.test.tsx +2 -2
- package/src/styles/typography.css +15 -26
- package/tailwind-preset.ts +0 -1
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,
|
|
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
|
-
|
|
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
|
|
128
|
-
|
|
|
129
|
-
|
|
|
130
|
-
|
|
|
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
|
|
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
|
|
776
|
-
* Product page titles use H1/`SuitePageHeader`
|
|
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 —
|
|
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
|
|
776
|
-
* Product page titles use H1/`SuitePageHeader`
|
|
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 —
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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';
|
package/dist/tailwind-preset.js
CHANGED
package/dist/tailwind-preset.mjs
CHANGED
package/dist/ui.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { a4 as FilterBarProps, a7 as FilterChipsProps } from './Chip-
|
|
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-
|
|
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-
|
|
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-
|
|
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.
|
|
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",
|
package/src/app/globals.css
CHANGED
|
@@ -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
|
|
62
|
-
* Product page titles use H1/`SuitePageHeader`
|
|
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 —
|
|
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
|
|
6
|
-
it("
|
|
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 —
|
|
2
|
+
* Type system — one voice, one scale.
|
|
3
3
|
*
|
|
4
|
-
* 1. Open Runde (`font-sans`) — every
|
|
5
|
-
*
|
|
6
|
-
* 2.
|
|
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 stack — code, 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
|
|
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
|
-
|
|
46
|
-
|
|
47
|
-
|
|
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
|
-
|
|
56
|
-
letter-spacing: -0.
|
|
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
|
-
}
|