@xenide-io/the-old-ui-theme 0.3.1 → 0.3.2

package/package.json

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

package/src/app/globals.css

@@ -184,7 +184,7 @@ body {
   ) {
     --ph-btn-depth: 0px;
     --ph-btn-chrome-depth: var(--ph-chrome-depth);
-    --ph-btn-border-width: 1.5px;
+    --ph-btn-border-width: 1px;
     --ph-btn-face: var(--ph-secondary-button-bg);
     --ph-btn-border: var(--ph-secondary-button-border);
     --ph-btn-border-hover: var(--ph-secondary-button-border-hover);
@@ -514,6 +514,71 @@ body {
     animation: ph-spin 0.65s linear infinite;
   }
 
+  /* A real face over a real frame stays connected at every interaction state. */
+  .ph-btn.ph-btn-raised {
+    --ph-btn-face-offset: -2px;
+    position: relative;
+    min-height: var(--ph-btn-control-size);
+    border: var(--ph-btn-border-width) solid var(--ph-btn-border);
+    border-radius: var(--ph-radius-control);
+    background: var(--ph-btn-frame);
+    transition:
+      border-color var(--ph-motion-fast) ease,
+      color var(--ph-motion-fast) ease,
+      opacity var(--ph-motion-fast) ease;
+  }
+
+  .ph-btn.ph-btn-raised .ph-btn-chrome {
+    z-index: 1;
+    box-sizing: border-box;
+    flex: 1;
+    width: auto;
+    min-height: calc(var(--ph-btn-control-size) - 2 * var(--ph-btn-border-width));
+    margin-inline: calc(-1 * var(--ph-btn-border-width));
+    background: var(--ph-btn-face);
+    border: var(--ph-btn-border-width) solid var(--ph-btn-border);
+    border-radius: var(--ph-radius-control);
+    transform: translateY(var(--ph-btn-face-offset));
+    transition:
+      border-color var(--ph-motion-fast) ease,
+      color var(--ph-motion-fast) ease,
+      transform 50ms ease-out;
+  }
+
+  .ph-btn.ph-btn-raised .ph-btn-chrome::before,
+  .ph-btn.ph-btn-raised .ph-btn-chrome::after {
+    content: none;
+  }
+
+  .ph-btn.ph-btn-raised:hover:not(:disabled) {
+    --ph-btn-face-offset: -3px;
+    border-color: var(--ph-btn-border-hover);
+  }
+
+  .ph-btn.ph-btn-raised:hover:not(:disabled) .ph-btn-chrome {
+    color: var(--ph-btn-ink);
+    border-color: var(--ph-btn-border-hover);
+    transform: translateY(var(--ph-btn-face-offset));
+  }
+
+  .ph-btn.ph-btn-raised:active:not(:disabled) {
+    --ph-btn-face-offset: -1px;
+  }
+
+  .ph-btn.ph-btn-raised:active:not(:disabled) .ph-btn-chrome {
+    transform: translateY(var(--ph-btn-face-offset));
+    transition-duration: 0ms;
+  }
+
+  .ph-btn.ph-btn-circle.ph-btn-raised,
+  .ph-btn-circle.ph-btn-raised .ph-btn-chrome {
+    border-radius: 9999px;
+  }
+
+  .ph-btn-outline.ph-btn-raised .ph-btn-chrome {
+    background: var(--ph-surface-raised);
+  }
+
   /* Surfaces — crisp edge + faint top lip beside elevation */
   .ph-panel {
     @apply border bg-ph-muted p-6;

package/src/components/sections/SidebarShowcase.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { AppLayout, Sidebar, ShowcaseWrapper, Badge } from "@/components/ui";
+import { AppLayout, Sidebar, ShowcaseWrapper, Badge, Button } from "@/components/ui";
 import { Home, Bell, Flag, User, Search, Zap } from "lucide-react";
 
 const sampleGroups = [
@@ -54,12 +54,13 @@ export default function SidebarShowcase() {
 </AppLayout>`}
       >
         <div className="space-y-4">
-          <button
+          <Button
+            variant="secondary"
+            size="sm"
             onClick={() => setCollapsed(!collapsed)}
-            className="ph-btn ph-btn-secondary ph-btn-sm"
           >
             {collapsed ? "Expand sidebar" : "Collapse sidebar"}
-          </button>
+          </Button>
           <div className="overflow-hidden rounded-lg border border-ph-border" style={{ height: 360 }}>
             <AppLayout
               sidebarWidth={collapsed ? 56 : 220}
@@ -74,7 +75,7 @@ export default function SidebarShowcase() {
                     </div>
                   }
                   footer={
-                    !collapsed ? <span className="text-xs text-ph-mutedtext px-2">v0.4.0</span> : null
+                    !collapsed ? <span className="text-xs text-ph-mutedtext px-2">v0.3.2</span> : null
                   }
                 />
               }