@xenide-io/the-old-ui-theme 0.5.2 → 0.5.3

package/dist/ui.mjs

@@ -108,7 +108,7 @@ import {
   ToggleButton,
   ToggleGroup,
   Widget
-} from "./chunk-RZXHZWUB.mjs";
+} from "./chunk-VFTZXPXM.mjs";
 import {
   ButtonChrome,
   DropdownButton,

package/package.json

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

package/src/app/globals.css

@@ -1,5 +1,6 @@
 @import "../styles/themes.css";
 @import "../styles/typography.css";
+@import "../styles/suite-skin.css";
 
 @tailwind base;
 @tailwind components;

package/src/components/ui/ThemeSwitcher.tsx

@@ -1,7 +1,14 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { persistTheme, readStoredTheme, THEME_GROUPS, THEMES, type ThemeId } from "@/themes";
+import {
+  DEFAULT_THEME_ID,
+  persistTheme,
+  readStoredTheme,
+  THEME_GROUPS,
+  THEMES,
+  type ThemeId,
+} from "@/themes";
 import { cn } from "@/lib/cn";
 
 export interface ThemeSwitcherProps {
@@ -10,7 +17,7 @@ export interface ThemeSwitcherProps {
 
 /** Colour-only theme picker — persists to localStorage and sets html[data-theme]. */
 export function ThemeSwitcher({ className }: ThemeSwitcherProps) {
-  const [themeId, setThemeId] = useState<ThemeId>("hedgehog-light");
+  const [themeId, setThemeId] = useState<ThemeId>(DEFAULT_THEME_ID);
 
   useEffect(() => {
     const id = readStoredTheme() as ThemeId;
@@ -20,7 +27,9 @@ export function ThemeSwitcher({ className }: ThemeSwitcherProps) {
 
   return (
     <label className={cn("flex min-w-0 items-center gap-2", className)}>
-      <span className="shrink-0 text-xs font-medium text-ph-mutedtext sm:text-sm">Theme</span>
+      <span className="shrink-0 text-xs font-medium text-ph-mutedtext sm:text-sm">
+        Theme
+      </span>
       <select
         className="ph-select max-w-[11rem] !min-h-[2rem] py-1 pl-2.5 pr-8 text-xs sm:max-w-[14rem] sm:text-sm"
         value={themeId}

package/src/styles/suite-skin.css

@@ -51,6 +51,76 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
+/* Shared app canvas. Dense workspaces do not paint a decorative background. */
+.suite-app-layout {
+  background: var(--ph-canvas);
+}
+
+.suite-app-layout > aside {
+  display: none;
+}
+
+@media (min-width: 64rem) {
+  .suite-app-layout > aside {
+    display: flex;
+  }
+}
+
+.suite-app-layout > aside {
+  position: relative;
+  z-index: 2;
+}
+
+.suite-app-layout > div {
+  position: relative;
+  z-index: 1;
+}
+
+.suite-app-layout__main {
+  background: color-mix(in oklab, var(--ph-canvas) 94%, transparent);
+}
+
+/* The demo intentionally renders a large component catalogue. Let the
+   browser skip layout and paint for sections outside the viewport while
+   preserving their anchors for sidebar navigation. */
+.suite-app-layout__main > div > div > * {
+  content-visibility: auto;
+  contain-intrinsic-size: 0 560px;
+}
+
+@media print {
+  .suite-app-layout__main > div > div > * {
+    content-visibility: visible;
+  }
+}
+
+.suite-app-layout aside [data-test="nav-link"] {
+  position: relative;
+  transition:
+    color 160ms ease,
+    background-color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.suite-app-layout aside [data-test="nav-link"][aria-current="page"] {
+  background: linear-gradient(
+    90deg,
+    color-mix(in oklab, var(--ph-accent) 14%, var(--ph-muted)),
+    color-mix(in oklab, var(--ph-muted) 60%, transparent)
+  );
+  box-shadow: inset 2px 0 0 var(--ph-accent);
+}
+
+.suite-app-layout aside [data-test="nav-link"][aria-current="page"] svg {
+  color: var(--ph-accent);
+}
+
+@supports not (background: color-mix(in oklab, white, transparent)) {
+  .suite-app-layout__main {
+    background: var(--ph-canvas);
+  }
+}
+
 /* Shared page inset — SuitePage + TodayPageFrame (one source of truth). */
 .suite-page-inset {
   padding-left: var(--suite-page-pad-x);
@@ -95,7 +165,7 @@ body {
   }
 }
 
-/* Today atmosphere — shared geometry, colours supplied by each app theme. */
+/* Today visual treatment — shared geometry, colours supplied by each app theme. */
 .today-page-frame {
   background-color: var(--ph-canvas);
 }