@xenide-io/the-old-ui-theme 0.9.17 → 0.10.0

package/src/suite/components/suite-skeleton.tsx

@@ -65,7 +65,7 @@ export function SuiteSkeletonCard({
   return (
     <div
       className={cn(
-        'ph-skeleton-card animate-[skeleton-stagger_0.5s_ease-out_both] rounded-2xl border border-ph-border bg-ph-surface p-6 shadow-sm',
+        'ph-skeleton-card animate-[skeleton-stagger_0.5s_ease-out_both] rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface p-6',
         className,
       )}
       aria-hidden
@@ -75,7 +75,7 @@ export function SuiteSkeletonCard({
           className="mb-5 flex items-center gap-3 animate-[skeleton-stagger_0.5s_ease-out_both]"
           style={{ animationDelay: '100ms' }}
         >
-          <div className="ph-skeleton h-10 w-10 rounded-xl" />
+          <div className="ph-skeleton h-10 w-10 rounded-[var(--ph-radius-control)]" />
           <div className="flex-1 space-y-2">
             <div className="ph-skeleton h-4 w-1/3" />
             <div className="ph-skeleton h-3 w-1/2" />
@@ -115,8 +115,8 @@ export function SuiteSkeletonList({
           className="animate-[skeleton-stagger_0.6s_ease-out_both]"
           style={{ animationDelay: `${index * 100}ms` }}
         >
-          <div className="flex items-center gap-3 rounded-xl border border-ph-border bg-ph-surface p-4">
-            <div className="ph-skeleton h-10 w-10 rounded-lg" />
+          <div className="flex items-center gap-3 rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface p-4">
+            <div className="ph-skeleton h-10 w-10 rounded-[var(--ph-radius-control)]" />
             <div className="min-w-0 flex-1 space-y-2">
               <div className="ph-skeleton h-3.5 w-3/4" />
               <div className="ph-skeleton h-3 w-1/2" />
@@ -152,7 +152,7 @@ export function SuiteEmptyState({
   return (
     <div
       className={cn(
-        'relative overflow-hidden rounded-2xl border border-ph-border bg-ph-surface text-center',
+        'relative overflow-hidden rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface text-center',
         size === 'sm' ? 'px-5 py-8' : 'px-6 py-12 sm:px-10 sm:py-16',
         className,
       )}
@@ -163,7 +163,7 @@ export function SuiteEmptyState({
       </div>
       <div className="relative">
         {icon ? (
-          <div className="mx-auto mb-4 inline-flex items-center justify-center rounded-2xl bg-ph-muted p-3 shadow-sm ring-1 ring-black/[0.06]">
+          <div className="mx-auto mb-4 inline-flex items-center justify-center rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-muted p-3 shadow-[var(--ph-shadow-control)]">
             {icon}
           </div>
         ) : null}

package/src/suite/components/suite-user-menu.tsx

@@ -148,7 +148,7 @@ export function SuiteUserMenu({
       className={cn(
         "[&_.ph-dropdown-trigger]:rounded-full",
         showDetails &&
-          "min-w-0 flex-1 [&_.ph-dropdown-trigger]:w-full [&_.ph-dropdown-trigger]:justify-start [&_.ph-dropdown-trigger]:rounded-lg",
+          "min-w-0 flex-1 [&_.ph-dropdown-trigger]:w-full [&_.ph-dropdown-trigger]:justify-start [&_.ph-dropdown-trigger]:rounded-[var(--ph-radius-control)]",
         showSignOutAction ? undefined : className,
       )}
       data-test={dataTest}
@@ -193,7 +193,7 @@ export function SuiteUserMenu({
         data-test={`${dataTest}-visible-sign-out`}
         title="Sign out"
         aria-label="Sign out"
-        className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ph-focus-ring"
+        className="ph-btn ph-btn-ghost ph-btn-square h-10 w-10 shrink-0 text-ph-mutedtext"
         onClick={onSignOut}
       >
         <LogOut className="h-4 w-4" aria-hidden />

package/src/suite/components/today-calibrating.tsx

@@ -30,7 +30,7 @@ export function TodayCalibrating({
   return (
     <div
       className={cn(
-        'suite-auth-handoff relative flex min-h-[14rem] flex-col items-center justify-center overflow-hidden rounded-2xl border border-ph-border bg-ph-surface px-5 py-8 text-center shadow-sm',
+        'suite-auth-handoff relative flex min-h-[14rem] flex-col items-center justify-center overflow-hidden rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface px-5 py-8 text-center',
         className,
       )}
       data-test="today-calibrating"
@@ -39,7 +39,7 @@ export function TodayCalibrating({
         className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_35%,rgba(251,191,36,0.1),transparent_55%)]"
         aria-hidden
       />
-      <div className="relative mb-5 flex h-14 w-14 items-center justify-center rounded-2xl border border-ph-border bg-ph-surface text-ph-ink shadow-sm">
+      <div className="relative mb-5 flex h-14 w-14 items-center justify-center rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface text-ph-ink shadow-[var(--ph-shadow-control)]">
         <Sun className="h-8 w-8" strokeWidth={2} aria-hidden />
       </div>
       <h2 className="relative text-base font-semibold tracking-tight text-ph-ink sm:text-lg md:text-xl">
@@ -56,7 +56,7 @@ export function TodayCalibrating({
           type="button"
           onClick={onRetry}
           disabled={retrying}
-          className="relative mt-6 inline-flex items-center gap-2 rounded-xl border border-ph-border bg-ph-canvas px-4 py-2 text-sm font-medium text-ph-ink transition hover:bg-ph-muted disabled:opacity-60"
+          className="ph-btn ph-btn-secondary relative mt-6"
         >
           {retrying ? (
             <Spinner size="sm" className={retrySpinnerClassName} />

package/src/suite/components/today-ui.tsx

@@ -68,7 +68,7 @@ export function SourceAppGlyph({
     <img
       src={SOURCE_APP_LOGOS[app]}
       alt=""
-      className={cn("h-7 w-7 shrink-0 rounded-lg object-contain", className)}
+      className={cn("h-7 w-7 shrink-0 rounded-[var(--ph-radius-control)] object-contain", className)}
     />
   );
 }
@@ -210,11 +210,11 @@ export function TodayTopBar({
           {icon}
         </div>
         <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
-          <h1 className="font-display text-[1.625rem] font-bold leading-tight tracking-tight text-ph-ink sm:text-[2.25rem]">
+          <h1 className="ph-page-title font-display font-semibold text-ph-ink">
             Today
           </h1>
           {appName ? (
-            <span className="rounded-md bg-ph-muted px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-ph-subtle">
+            <span className="rounded-[var(--ph-radius-control)] bg-ph-muted px-2 py-0.5 text-[length:var(--ph-type-overline)] font-semibold uppercase tracking-wide text-ph-subtle">
               {appName}
             </span>
           ) : null}
@@ -226,7 +226,7 @@ export function TodayTopBar({
           type="button"
           onClick={onRefresh}
           disabled={refreshing || loading}
-          className="press-subtle inline-flex h-10 w-10 items-center justify-center rounded-lg text-ph-subtle transition hover:bg-ph-surface hover:text-ph-ink disabled:opacity-50"
+          className="ph-btn ph-btn-ghost ph-btn-square press-subtle h-10 w-10 text-ph-subtle"
           data-test="today-refresh"
           aria-label="Refresh today"
         >
@@ -340,7 +340,7 @@ export function TodayPrimaryAction({
   dataTest?: string;
 }) {
   const classes = cn(
-    "today-primary-action group relative flex w-full max-w-md items-center gap-3 overflow-hidden rounded-xl px-3.5 py-2.5 text-left transition sm:px-4 sm:py-3",
+    "today-primary-action group relative flex w-full max-w-md items-center gap-3 overflow-hidden rounded-[var(--ph-radius-surface)] px-3.5 py-2.5 text-left transition-colors focus-visible:outline-none focus-visible:shadow-[var(--ph-focus-halo)] sm:px-4 sm:py-3",
     `today-primary-action--${accent}`,
     active && "today-primary-action--active",
     loading && "pointer-events-none opacity-70",
@@ -349,7 +349,7 @@ export function TodayPrimaryAction({
 
   const body = (
     <>
-      <span className="today-primary-action__icon inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg sm:h-10 sm:w-10">
+      <span className="today-primary-action__icon inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--ph-radius-control)] sm:h-10 sm:w-10">
         {icon}
       </span>
       <span className="min-w-0 flex-1">
@@ -363,7 +363,7 @@ export function TodayPrimaryAction({
         ) : null}
       </span>
       <span
-        className="today-primary-action__chevron shrink-0 text-base opacity-60 transition group-hover:translate-x-0.5 group-hover:opacity-100"
+        className="today-primary-action__chevron shrink-0 text-base opacity-60 transition-[transform,opacity] group-hover:translate-x-0.5 group-hover:opacity-100"
         aria-hidden
       >
         →
@@ -415,7 +415,7 @@ export function TodayEmptyAction({
 }) {
   return (
     <div
-      className="rounded-lg border border-dashed border-ph-border/80 bg-ph-muted/30 px-4 py-4 text-center"
+      className="rounded-[var(--ph-radius-surface)] border border-dashed border-ph-border/80 bg-[var(--ph-surface-inset)] px-4 py-4 text-center"
       data-test={dataTest}
     >
       <p className="text-sm font-semibold text-ph-ink">{title}</p>
@@ -496,7 +496,7 @@ export function TodayAskAiCard({
   href?: string;
 }) {
   const classes = cn(
-    "group flex w-full items-start gap-3.5 rounded-2xl border border-ph-border/70 bg-ph-surface px-4 py-3.5 text-left shadow-[0_1px_12px_-8px_rgba(15,23,42,0.1)] transition hover:border-ph-brand/35 hover:bg-[color-mix(in_oklab,var(--ph-accent)_6%,var(--ph-surface))] sm:px-5",
+    "suite-press group flex w-full items-start gap-3.5 rounded-[var(--ph-radius-surface)] border border-ph-border/70 bg-ph-surface px-4 py-3.5 text-left transition-[background-color,border-color,box-shadow] hover:border-ph-brand/35 hover:bg-[var(--ph-surface-hover)] hover:shadow-[var(--ph-shadow-raised)] focus-visible:outline-none focus-visible:shadow-[var(--ph-focus-halo)] sm:px-5",
     className,
   );
 
@@ -575,7 +575,7 @@ export function TodaySection({
         <div className="flex min-w-0 items-start gap-3.5">
           <span
             className={cn(
-              "inline-flex h-10 w-10 sm:h-11 sm:w-11 shrink-0 items-center justify-center rounded-2xl shadow-sm ring-1 ring-black/[0.06]",
+              "inline-flex h-10 w-10 sm:h-11 sm:w-11 shrink-0 items-center justify-center rounded-[var(--ph-radius-surface)] border border-ph-border/70 shadow-[var(--ph-shadow-control)]",
               iconClassName ?? "bg-ph-muted text-ph-ink",
             )}
           >
@@ -609,7 +609,7 @@ export function TodayPanel({
   return (
     <div
       className={cn(
-        "border-ph-border/70 rounded-2xl border bg-ph-surface p-5 shadow-[0_1px_16px_-8px_rgba(15,23,42,0.12)] sm:p-5",
+        "rounded-[var(--ph-radius-surface)] border border-ph-border/70 bg-ph-surface p-5 sm:p-5",
         className,
       )}
     >
@@ -626,7 +626,7 @@ export function TodayEmptyState({
   description?: string;
 }) {
   return (
-    <div className="border-ph-border/80 rounded-xl border border-dashed px-5 py-8 text-center">
+    <div className="rounded-[var(--ph-radius-surface)] border border-dashed border-ph-border/80 bg-[var(--ph-surface-inset)] px-5 py-8 text-center">
       <p className="text-sm font-semibold text-ph-ink">{title}</p>
       {description ? (
         <p className="mt-1.5 text-sm leading-relaxed text-ph-subtle">

package/src/suite/components/workspace-switcher.tsx

@@ -77,9 +77,9 @@ export function SuiteWorkspaceSwitcher({
       trigger={
         <span
           className={cn(
-            "flex min-w-0 max-w-full items-center gap-2 rounded-lg border border-ph-border bg-ph-muted text-left transition-colors hover:bg-ph-muted",
+            "flex min-w-0 max-w-full items-center gap-2 rounded-[var(--ph-radius-control)] border border-ph-border bg-[var(--ph-surface-inset)] text-left transition-colors hover:bg-[var(--ph-surface-hover)]",
             collapsed ? "h-10 w-10 justify-center p-0" : "w-full px-3 py-2",
-            open && "border-ph-brand/40",
+            open && "border-[var(--ph-selected-border)] bg-[var(--ph-selected-bg)]",
           )}
           data-test="workspace-switcher-trigger"
         >
@@ -111,7 +111,7 @@ export function SuiteWorkspaceSwitcher({
         ) : (
           sections.map((section) => (
             <div key={section.id}>
-              <p className="px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-ph-mutedtext">
+              <p className="px-3 py-2 text-[length:var(--ph-type-overline)] font-semibold uppercase tracking-[0.08em] text-ph-mutedtext">
                 {section.label}
               </p>
               {section.workspaces.map((workspace) => (

package/src/suite/index.ts

@@ -11,6 +11,12 @@ export {
   type SuiteAppSelectOptions,
 } from "./components/app-switcher";
 export { SuiteNotificationBell } from "./components/suite-notification-bell";
+export {
+  SuiteNotificationSettings,
+  type SuiteWebPushController,
+  type SuiteWebPushState,
+  type SuiteNotificationSettingsProps,
+} from "./components/suite-notification-settings";
 export {
   SuiteNotificationsProvider,
   useSuiteNotifications,

package/tailwind-preset.ts

@@ -23,6 +23,15 @@ const posthogThemePreset: Partial<Config> = {
         ],
         mono: ["var(--ph-font-monospace-stack)"],
         shortcut: ["var(--ph-font-shortcut-stack)"],
+        display: ["var(--ph-font-sans-stack)"],
+      },
+      fontSize: {
+        xs: ["var(--ph-type-meta)", { lineHeight: "var(--ph-leading-ui)" }],
+        sm: ["var(--ph-type-small)", { lineHeight: "var(--ph-leading-ui)" }],
+        base: ["var(--ph-type-body)", { lineHeight: "var(--ph-leading-body)" }],
+        lg: ["var(--ph-type-card)", { lineHeight: "1.4" }],
+        xl: ["var(--ph-type-subsection)", { lineHeight: "1.35" }],
+        "2xl": ["var(--ph-type-product-section)", { lineHeight: "1.25" }],
       },
       borderRadius: {
         lemon: "var(--ph-radius-app)",