@nocobase/app-template-default 1.0.0-beta.67 → 1.0.0-beta.68

package/client/pages/auth/shared.tsx

@@ -5,6 +5,8 @@ import type { ReactElement, ReactNode } from 'react';
 
 import { AuthSplitLayout } from '#extensions/nocobase-auth-split-layout/auth-split-layout';
 
+import './auth-page.css';
+
 export interface AuthPageProps {
   readonly title: ReactNode;
   readonly description: ReactNode;
@@ -26,6 +28,7 @@ export function AuthPage({
     <AuthSplitLayout
       aside={<BrandPanel />}
       asideLabel={t('auth.about')}
+      className='auth-page'
       description={description}
       logo={
         <>
@@ -68,42 +71,39 @@ function BrandPanel(): ReactElement {
   ];
 
   return (
-    <div className='relative grid h-full place-items-center overflow-hidden bg-(--auth-brand-background) p-12 text-white'>
-      <div className='pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,color-mix(in_srgb,var(--primary)_22%,transparent),transparent_65%)]' />
-      <div className='relative w-full max-w-xl'>
+    <div className='auth-brand-panel relative grid h-full place-items-center overflow-hidden p-12 text-white'>
+      <div className='relative w-full max-w-md'>
         <p className='text-xs font-semibold tracking-[0.16em] text-(--auth-brand-highlight) uppercase'>
           {t('auth.platform')}
         </p>
-        <h2 className='mt-4 text-5xl leading-[1.05] font-semibold tracking-[-0.045em]'>
+        <h2 className='mt-6 text-4xl leading-tight font-semibold tracking-tight'>
           {t('auth.marketingTitleFirst')}
           <br />
           {t('auth.marketingTitleSecond')}
           <br />
           {t('auth.marketingTitleThird')}
         </h2>
-        <p className='mt-5 text-sm leading-6 text-(--auth-brand-muted)'>
+        <p className='mt-6 text-sm leading-7 text-(--auth-brand-muted)'>
           {t('auth.marketingDescription')}
         </p>
-        <div className='mt-8 overflow-hidden rounded-2xl border border-white/10 bg-white/5 text-white shadow-lg backdrop-blur-sm'>
-          <div className='space-y-5 p-6'>
-            {features.map(({ description, icon: Icon, id, title }) => (
-              <div className='flex gap-4' key={id}>
-                <span className='grid size-11 shrink-0 place-items-center rounded-xl bg-(--auth-brand-highlight)/10 text-(--auth-brand-highlight)'>
-                  <Icon aria-hidden='true' className='size-5' />
-                </span>
-                <div>
-                  <p className='font-semibold'>{title}</p>
-                  <p className='mt-1 text-sm leading-6 text-(--auth-brand-muted)'>
-                    {description}
-                  </p>
-                </div>
+        <div className='mt-12 space-y-8'>
+          {features.map(({ description, icon: Icon, id, title }) => (
+            <div className='flex gap-4' key={id}>
+              <span className='grid size-10 shrink-0 place-items-center rounded-xl bg-(--auth-brand-highlight)/8 text-(--auth-brand-highlight)'>
+                <Icon aria-hidden='true' className='size-5' />
+              </span>
+              <div>
+                <p className='text-sm font-medium'>{title}</p>
+                <p className='mt-1.5 text-sm leading-6 text-(--auth-brand-muted)'>
+                  {description}
+                </p>
               </div>
-            ))}
-          </div>
-          <div className='flex items-center gap-3 border-t border-white/10 bg-white/3 px-6 py-4 text-sm font-medium text-(--auth-brand-muted)'>
-            <Blocks aria-hidden='true' className='size-4' />
-            <span>{t('auth.marketingFooter')}</span>
-          </div>
+            </div>
+          ))}
+        </div>
+        <div className='mt-12 flex items-center gap-2.5 border-t border-white/8 pt-6 text-xs text-(--auth-brand-muted)'>
+          <Blocks aria-hidden='true' className='size-4' />
+          <span>{t('auth.marketingFooter')}</span>
         </div>
       </div>
     </div>

package/client/pages/home/index.tsx

@@ -160,11 +160,11 @@ function CapabilityCard({
       onClick={onOpen}
       className='group flex w-full cursor-pointer rounded-xl text-left outline-none focus-visible:ring-3 focus-visible:ring-ring/50'
     >
-      <Card className='w-full transition-[translate,box-shadow] duration-200 ease-out group-hover:-translate-y-0.5 group-hover:shadow-md group-hover:ring-foreground/20 motion-reduce:transition-none motion-reduce:group-hover:translate-y-0'>
+      <Card className='w-full transition-[translate,box-shadow,background-color] duration-200 ease-out group-hover:-translate-y-0.5 group-hover:bg-hover group-hover:shadow-md motion-reduce:transition-none motion-reduce:group-hover:translate-y-0'>
         <CardHeader className='gap-3'>
           {/* The chip only deepens its tint on hover rather than inverting: swapping a light background and a dark icon
               passes both through the same color halfway, where the icon vanishes for a moment and reads as a flicker. */}
-          <span className='flex size-9 items-center justify-center rounded-lg bg-primary/5 text-primary ring-1 ring-transparent transition-[background-color,box-shadow] duration-200 ease-out group-hover:bg-primary/10 group-hover:ring-primary/20 motion-reduce:transition-none'>
+          <span className='flex size-9 items-center justify-center rounded-lg bg-primary/5 text-primary ring-1 ring-transparent transition-[background-color,box-shadow] duration-200 ease-out group-hover:bg-primary/10 group-hover:ring-border motion-reduce:transition-none'>
             <Icon
               className='size-4 transition-transform duration-200 ease-out group-hover:scale-110 motion-reduce:transition-none'
               aria-hidden

package/client/routing/route-navigation.ts

@@ -8,8 +8,10 @@ import { useEffect, useMemo, useState } from 'react';
 import { matchPath, matchRoutes, type RouteObject } from 'react-router';
 
 import { EMPTY_ARRAY } from '#lib/constants';
+import { transformNavigation } from '#lib/navigation-transform';
 
 export interface RouteNavigationItem {
+  readonly section?: boolean;
   readonly route: AppClientRegisteredRoute;
   readonly children: readonly RouteNavigationItem[];
 }
@@ -17,10 +19,17 @@ export interface RouteNavigationItem {
 export function buildRouteNavigation(
   routes: readonly AppClientRegisteredRoute[],
   denied: ReadonlySet<string>,
+): RouteNavigationItem[] {
+  return transformNavigation(visibleRouteNavigation(routes, denied));
+}
+
+function visibleRouteNavigation(
+  routes: readonly AppClientRegisteredRoute[],
+  denied: ReadonlySet<string>,
 ): RouteNavigationItem[] {
   return routes.flatMap((route) => {
     if (denied.has(routeKey(route))) return [];
-    const children = buildRouteNavigation(
+    const children = visibleRouteNavigation(
       route.children ?? EMPTY_ARRAY,
       denied,
     );

package/client/styles.css

@@ -50,6 +50,7 @@
   --color-muted-foreground: var(--muted-foreground);
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
+  --color-hover: var(--hover);
   --color-destructive: var(--destructive);
   --color-border: var(--border);
   --color-input: var(--input);
@@ -138,16 +139,28 @@
 
 /* Application-wide interaction and badge treatment, outside generated primitives. */
 @layer base {
+  /* Whatever may be clicked shows the pointer, the plugins' pages included.
+     Tailwind 4 leaves buttons with the arrow; a control disabled (natively,
+     or as Base UI and ARIA mark it) keeps it, and a utility on an element
+     (`cursor-default`, `cursor-not-allowed`) still wins over this layer. */
   :is(
       button,
       [role='button'],
       [role='menuitem'],
+      [role='menuitemcheckbox'],
+      [role='menuitemradio'],
       [role='option'],
       [role='tab'],
       [role='checkbox'],
       [role='radio'],
       [role='switch'],
       [role='combobox'],
+      summary,
+      select,
+      label[for],
+      input[type='checkbox'],
+      input[type='radio'],
+      input[type='file'],
       a[href]
     ):not(:disabled):not([aria-disabled='true']):not([data-disabled]) {
     cursor: pointer;
@@ -161,14 +174,64 @@
   padding-inline: calc(var(--spacing) * 2.5);
   line-height: 1.4;
 }
+/* The small badge, `data-size='sm'`: beside a title or a name, on a card or
+   a board's card, wherever several sit in a dense row. The default one is a
+   status standing on its own, as in a table's column or a record's
+   particulars. */
+[data-slot='badge'][data-size='sm'] {
+  min-height: calc(var(--spacing) * 5.5);
+  padding-block: 0;
+  padding-inline: calc(var(--spacing) * 1.5);
+  font-size: var(--text-xs);
+  line-height: 1.3;
+}
 
-/* Shared overlay treatment lives outside generated shadcn primitives. */
+/* One focus for every control, across the application and the plugins'
+   pages: a half-strength border and a 2px halo at a fifth of the ring colour,
+   in place of the 3px ring at half of it that the primitives and pages draw,
+   which reads heavy. Unlayered, so it wins over their utilities without
+   editing them. A label wrapping a visually hidden control, such as an
+   option card, and a rich text editor's frame show their control's focus.
+   An invalid field keeps its red, and a destructive button its own colour. */
+:is(
+    [data-slot='input'],
+    [data-slot='textarea'],
+    [data-slot='select-trigger'],
+    button,
+    [role='button'],
+    [role='tab'],
+    [role='menuitem'],
+    [role='checkbox'],
+    [role='switch'],
+    [role='radio'],
+    input[type='checkbox'],
+    input[type='radio'],
+    a[href]
+  ):focus-visible:not([aria-invalid='true']),
+label:has(> .sr-only:focus-visible),
+[data-slot='rich-text-editor']:focus-within,
+[data-slot='input-group']:has(
+    [data-slot='input-group-control']:focus-visible
+  ):not(:has([aria-invalid='true'])) {
+  border-color: color-mix(in oklch, var(--ring) 50%, transparent);
+  box-shadow: 0 0 0 2px color-mix(in oklch, var(--ring) 20%, transparent);
+}
+[data-slot='button'].text-destructive:focus-visible:not([aria-invalid='true']) {
+  border-color: color-mix(in oklch, var(--destructive) 40%, transparent);
+  box-shadow: 0 0 0 2px color-mix(in oklch, var(--destructive) 20%, transparent);
+}
+
+/* Overlays in a light frame: a faint, blurred backdrop, and the content
+   framed by the general border alone, as a card is, without the primitive's
+   ring or a heavy shadow. The plugins' copies of these primitives take it
+   too; unlayered, so it wins over their utilities. */
 :is(
   [data-slot='dialog-overlay'],
   [data-slot='alert-dialog-overlay'],
   [data-slot='sheet-overlay']
 ) {
-  background: var(--overlay-backdrop);
+  background: rgb(0 0 0 / 0.1);
+  backdrop-filter: blur(4px);
 }
 :is(
   [data-slot='dialog-content'],
@@ -176,7 +239,7 @@
   [data-slot='route-overlay-content']
 ) {
   border: 1px solid var(--border);
-  box-shadow: var(--overlay-shadow);
+  box-shadow: none;
 }
 [data-slot='route-overlay-content'][data-presentation='dialog'] {
   border-radius: var(--radius-xl);
@@ -308,14 +371,65 @@
   padding-right: calc(var(--spacing) * 24);
 }
 
-/* Compact content can stay dense while the primary navigation remains comfortable.
-   The primitive's important icon-mode sizes still control the collapsed rail. */
-:root[data-theme='compact'] .app-navigation [data-slot='sidebar-menu-button'] {
-  height: calc(var(--spacing) * 12);
-  padding-inline: calc(var(--spacing) * 4);
+/* The navigation's rows are roomier than the sidebar primitive's: 10 units
+   high with half a unit between them, nested rows 8.5 high, in a sidebar 64
+   units wide (layouts/components/app-sidebar.tsx). The primitive's important
+   icon-mode sizes still control the collapsed rail. */
+.app-navigation [data-slot='sidebar-menu'] {
+  gap: calc(var(--spacing) * 0.5);
+}
+/* Top-level groups only: a section nested in a menu sits flush. */
+.app-navigation > nav > [data-slot='sidebar-group'] {
+  padding: calc(var(--spacing) * 2);
+}
+/* A section's heading reads as a heading over its entries, not as one of
+   them: half the menu's foreground, mixed toward its ground, so both colour
+   schemes follow. */
+.app-navigation [data-sidebar='group-label'] {
+  height: calc(var(--spacing) * 8);
+  padding-inline: calc(var(--spacing) * 3.5);
+  color: color-mix(in oklch, var(--sidebar-foreground) 50%, var(--sidebar));
+}
+.app-navigation [data-slot='sidebar-menu-button'] {
+  height: calc(var(--spacing) * 10);
+  gap: calc(var(--spacing) * 2);
+  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3.5);
+}
+/* The primitive places a row's count and its expand button for 8-unit rows;
+   both are 5 units high, so this centres them on the taller rows. */
+.app-navigation
+  [data-slot='sidebar-menu-item']
+  > :is([data-slot='sidebar-menu-badge'], [data-slot='sidebar-menu-action']) {
+  top: calc(var(--spacing) * 2.5);
+}
+.app-navigation
+  [data-slot='sidebar-menu-sub-item']
+  > [data-slot='sidebar-menu-action'] {
+  top: calc(var(--spacing) * 1.75);
+}
+.app-navigation [data-slot='sidebar-menu-button'] > svg {
+  width: calc(var(--spacing) * 4);
+  height: calc(var(--spacing) * 4);
+}
+/* An entry with a count (navigation-menu.tsx) leaves room for it at the
+   row's end, so a long label truncates before reaching it. */
+.app-navigation
+  [data-slot='sidebar-menu-item']:has(> [data-slot='sidebar-menu-badge'])
+  > [data-slot='sidebar-menu-button'] {
+  padding-right: calc(var(--spacing) * 10);
+}
+.app-navigation [data-slot='sidebar-menu-sub'] {
+  gap: calc(var(--spacing) * 0.5);
+  padding-block: calc(var(--spacing) * 1);
+}
+.app-navigation [data-slot='sidebar-menu-sub-button'] {
+  height: calc(var(--spacing) * 8.5);
+  gap: calc(var(--spacing) * 2);
+  padding-inline: calc(var(--spacing) * 2.5);
 }
-:root[data-theme='compact'] .app-navigation [data-slot='sidebar-menu'] {
-  gap: calc(var(--spacing) * 1.5);
+.app-navigation [data-slot='sidebar-menu-sub-button'] > svg {
+  width: calc(var(--spacing) * 4);
+  height: calc(var(--spacing) * 4);
 }
 
 /* Brand tint belongs to the application shell, independent of each page's content. */
@@ -331,11 +445,20 @@
 
 /* Shared table hierarchy stays neutral so semantic status colors remain distinct. */
 [data-slot='table-header'] {
-  background: color-mix(in srgb, var(--muted) 70%, var(--card));
+  background: var(--hover);
 }
 [data-slot='table-header'] [data-slot='table-row']:hover {
   background: transparent;
 }
+/* A row under the pointer takes the --hover grey, as every hovered row and
+   list item does, rather than the primitive's half of --muted. Matched by
+   that class, so a row given another hover keeps it, and a selected row
+   keeps its own ground. */
+[data-slot='table-row'][class~='hover:bg-muted/50']:hover:not(
+    [data-state='selected']
+  ) {
+  background: var(--hover);
+}
 [data-slot='table-head'] {
   height: calc(var(--spacing) * 12);
   padding-inline: calc(var(--spacing) * 3);
@@ -355,12 +478,125 @@
   color: var(--primary);
 }
 
-/* Nested items keep a comfortable rhythm independently of compact content. */
-.app-navigation [data-slot='sidebar-menu-sub-button'] {
+/* A card's frame in the general border, as every other line: the card
+   primitive and the plugins' copies draw their ring at a tenth of the
+   foreground. Matched by that class, so a card given another ring colour
+   keeps it; unlayered, so it wins over the utility. */
+[data-slot='card'][class~='ring-foreground/10'] {
+  --tw-ring-color: var(--border);
+}
+
+/* Line tabs as a record page's tabs: from the left, the open one in the
+   foreground over a 2px line that sits on a thin rule under the row, the
+   others muted until hovered. Unlayered, so it wins over the primitive's
+   utilities. A row whose tabs keep off its edges sets --tabs-inset; its rule
+   still runs edge to edge. */
+[data-slot='tabs-list'][data-variant='line'][data-orientation='horizontal'] {
+  width: 100%;
+  height: auto;
+  justify-content: flex-start;
+  gap: calc(var(--spacing) * 5);
+  padding: 0 var(--tabs-inset, 0px);
+  border-bottom: 1px solid var(--border);
+}
+[data-slot='tabs-list'][data-variant='line'][data-orientation='horizontal']
+  > [data-slot='tabs-trigger'] {
+  flex: none;
   height: calc(var(--spacing) * 10);
-  padding-inline: calc(var(--spacing) * 3);
+  padding-inline: 0;
+  border-inline-width: 0;
+  color: var(--muted-foreground);
 }
-.app-navigation [data-slot='sidebar-menu-sub'] {
-  gap: calc(var(--spacing) * 1.5);
-  padding-block: calc(var(--spacing) * 1.5);
+[data-slot='tabs-list'][data-variant='line'][data-orientation='horizontal']
+  > [data-slot='tabs-trigger']:is(:hover, [data-active]) {
+  color: var(--foreground);
+}
+[data-slot='tabs-list'][data-variant='line'][data-orientation='horizontal']
+  > [data-slot='tabs-trigger']::after {
+  bottom: -1px;
+  height: 2px;
+}
+
+/* Every scrollbar, across and down: a thin rounded bar in a faint grey on no
+   track, drawn only while its element scrolls or the mouse is near the edge
+   it runs along (revealScrollbarsWhileScrolling
+   in client/lib/scrollbar.ts marks it `data-scrolling` until it has been
+   still for a moment) and transparent otherwise, so showing it moves nothing;
+   a little firmer under the pointer. Chromium and Safari draw it through the
+   -webkit- pseudo-elements, which allow a thinner bar than
+   `scrollbar-width: thin`; they ignore those wherever the standard properties
+   are set (scrollbar-color is inherited), so the standard ones are given only
+   to a browser without them (Firefox). */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 9999px;
+  background-color: transparent;
+}
+[data-scrolling]::-webkit-scrollbar-thumb {
+  background-color: color-mix(
+    in oklab,
+    var(--muted-foreground) 20%,
+    transparent
+  );
+}
+[data-scrolling]::-webkit-scrollbar-thumb:hover {
+  background-color: color-mix(
+    in oklab,
+    var(--muted-foreground) 30%,
+    transparent
+  );
+}
+@supports not selector(::-webkit-scrollbar) {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+  }
+  [data-scrolling] {
+    scrollbar-color: color-mix(
+        in oklab,
+        var(--muted-foreground) 20%,
+        transparent
+      )
+      transparent;
+  }
+}
+
+/* A scroller whose bar always shows, thicker, to be dragged: one wider than
+   the page, such as a board, which a mouse without a sideways wheel moves
+   only by its bar. Plain rules beside the ones above rather than a utility,
+   which their unlayered rules would outrank. */
+.scroll-shown::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.scroll-shown::-webkit-scrollbar-thumb {
+  background-color: color-mix(
+    in oklab,
+    var(--muted-foreground) 25%,
+    transparent
+  );
+}
+.scroll-shown::-webkit-scrollbar-thumb:hover {
+  background-color: color-mix(
+    in oklab,
+    var(--muted-foreground) 40%,
+    transparent
+  );
+}
+@supports not selector(::-webkit-scrollbar) {
+  .scroll-shown {
+    scrollbar-color: color-mix(
+        in oklab,
+        var(--muted-foreground) 25%,
+        transparent
+      )
+      transparent;
+  }
 }

package/client/theme/theme-settings.tsx

@@ -36,7 +36,7 @@ export function ThemeSettings(): ReactElement {
             aria-label={title}
             size='icon'
             variant='outline'
-            className='size-10 rounded-xl border-border/70 bg-background/60 hover:bg-accent/50'
+            className='size-10 rounded-xl border-border bg-background/60 hover:bg-accent/50'
           />
         }
       >
@@ -70,13 +70,15 @@ export function ThemeSettings(): ReactElement {
                 <label
                   key={mode}
                   className={cn(
-                    'relative flex min-w-0 cursor-pointer items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium transition-colors select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-ring',
+                    'relative flex min-w-0 cursor-pointer items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium transition-colors select-none',
                     isSelected
                       ? 'bg-background text-foreground shadow-xs'
                       : 'text-muted-foreground hover:bg-background/40 hover:text-foreground',
                   )}
                 >
-                  <RadioGroupItem value={mode} className='sr-only' />
+                  {/* `absolute` over the primitive's `relative`, which would keep
+                      the hidden radio in the row and push the words aside. */}
+                  <RadioGroupItem value={mode} className='absolute sr-only' />
                   <ModeIcon aria-hidden='true' className='size-3.5 shrink-0' />
                   <span className='whitespace-nowrap'>
                     {t('appearance.' + mode, {
@@ -109,18 +111,21 @@ export function ThemeSettings(): ReactElement {
                 <label
                   key={item.id}
                   className={cn(
-                    'group relative flex cursor-pointer flex-col rounded-xl border p-2 text-left transition-all select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-ring',
+                    'group relative flex cursor-pointer flex-col rounded-xl border p-2 text-left transition-all select-none',
                     isSelected
                       ? 'border-primary ring-2 ring-primary/20 bg-primary/5 shadow-xs'
-                      : 'border-border/70 hover:border-border hover:bg-muted/30',
+                      : 'border-border hover:bg-muted/30',
                   )}
                 >
-                  <RadioGroupItem value={item.id} className='sr-only' />
+                  <RadioGroupItem
+                    value={item.id}
+                    className='absolute sr-only'
+                  />
                   <div className='mb-2 h-16 w-full'>
                     <div
                       aria-hidden='true'
                       data-theme={item.id}
-                      className='theme-preview relative flex h-full overflow-hidden rounded-lg border border-border/80 bg-background shadow-2xs'
+                      className='theme-preview relative flex h-full overflow-hidden rounded-lg border border-border bg-background shadow-2xs'
                     >
                       {/* Mini Sidebar */}
                       <div className='flex w-6 flex-col gap-1 border-r border-sidebar-border/50 bg-sidebar p-1'>

package/client/theme/themes/compact.css

@@ -9,7 +9,7 @@
     ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
     'Courier New', monospace;
   --font-heading: var(--font-sans);
-  --spacing: 0.2rem;
+  --spacing: 0.225rem;
   --text-xs: 0.75rem;
   --text-xs--line-height: calc(1 / 0.75);
   --text-sm: 0.875rem;
@@ -45,15 +45,11 @@
   --shadow-xl:
     0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-  --radius: 0.375rem;
+  --radius: 0.5rem;
   --background: oklch(0.985 0 0);
   --foreground: oklch(0.16 0 0);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.16 0 0);
-  --overlay-backdrop: rgb(15 23 42 / 0.28);
-  --overlay-shadow:
-    0 24px 64px -16px rgb(15 23 42 / 0.22),
-    0 8px 24px -12px rgb(15 23 42 / 0.16);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.16 0 0);
   --primary: #002ad1;
@@ -71,8 +67,9 @@
   --muted-foreground: oklch(0.52 0 0);
   --accent: rgb(237 242 255);
   --accent-foreground: rgb(0 42 209);
+  --hover: color-mix(in srgb, var(--muted) 70%, var(--card));
   --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.9 0 0);
+  --border: oklch(0.9 0 0 / 60%);
   --input: oklch(0.9 0 0);
   --ring: var(--primary);
   --chart-1: oklch(0.646 0.222 41.116);
@@ -84,8 +81,8 @@
   --sidebar-foreground: var(--card-foreground);
   --sidebar-primary: color-mix(in srgb, var(--primary) 8%, var(--sidebar));
   --sidebar-primary-foreground: var(--primary);
-  --sidebar-accent: var(--accent);
-  --sidebar-accent-foreground: var(--accent-foreground);
+  --sidebar-accent: var(--hover);
+  --sidebar-accent-foreground: var(--sidebar-foreground);
   --sidebar-border: var(--border);
   --sidebar-ring: var(--ring);
 }
@@ -96,9 +93,6 @@
   --foreground: oklch(0.96 0 0);
   --card: oklch(0.18 0 0);
   --card-foreground: oklch(0.985 0 0);
-  --overlay-backdrop: rgb(0 0 0 / 0.58);
-  --overlay-shadow:
-    0 24px 64px -16px rgb(0 0 0 / 0.6), 0 8px 24px -12px rgb(0 0 0 / 0.4);
   --popover: oklch(0.18 0 0);
   --popover-foreground: oklch(0.985 0 0);
   --primary: #8ca9ff;
@@ -113,6 +107,7 @@
   --muted-foreground: oklch(0.7 0 0);
   --accent: rgb(30 42 72);
   --accent-foreground: rgb(174 194 255);
+  --hover: color-mix(in srgb, var(--muted) 70%, var(--card));
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
@@ -126,8 +121,8 @@
   --sidebar-foreground: var(--card-foreground);
   --sidebar-primary: color-mix(in srgb, var(--primary) 8%, var(--sidebar));
   --sidebar-primary-foreground: var(--primary);
-  --sidebar-accent: var(--accent);
-  --sidebar-accent-foreground: var(--accent-foreground);
+  --sidebar-accent: var(--hover);
+  --sidebar-accent-foreground: var(--sidebar-foreground);
   --sidebar-border: var(--border);
   --sidebar-ring: var(--ring);
 }

package/client/theme/themes/default.css

@@ -51,10 +51,6 @@
   --foreground: oklch(0.16 0 0);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.16 0 0);
-  --overlay-backdrop: rgb(15 23 42 / 0.28);
-  --overlay-shadow:
-    0 24px 64px -16px rgb(15 23 42 / 0.22),
-    0 8px 24px -12px rgb(15 23 42 / 0.16);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.16 0 0);
   --primary: #002ad1;
@@ -72,8 +68,9 @@
   --muted-foreground: oklch(0.52 0 0);
   --accent: rgb(237 242 255);
   --accent-foreground: rgb(0 42 209);
+  --hover: color-mix(in srgb, var(--muted) 70%, var(--card));
   --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.9 0 0);
+  --border: oklch(0.9 0 0 / 60%);
   --input: oklch(0.9 0 0);
   --ring: var(--primary);
   --chart-1: oklch(0.646 0.222 41.116);
@@ -85,8 +82,8 @@
   --sidebar-foreground: var(--card-foreground);
   --sidebar-primary: color-mix(in srgb, var(--primary) 8%, var(--sidebar));
   --sidebar-primary-foreground: var(--primary);
-  --sidebar-accent: var(--accent);
-  --sidebar-accent-foreground: var(--accent-foreground);
+  --sidebar-accent: var(--hover);
+  --sidebar-accent-foreground: var(--sidebar-foreground);
   --sidebar-border: var(--border);
   --sidebar-ring: var(--ring);
 }
@@ -98,9 +95,6 @@
   --foreground: oklch(0.96 0 0);
   --card: oklch(0.18 0 0);
   --card-foreground: oklch(0.985 0 0);
-  --overlay-backdrop: rgb(0 0 0 / 0.58);
-  --overlay-shadow:
-    0 24px 64px -16px rgb(0 0 0 / 0.6), 0 8px 24px -12px rgb(0 0 0 / 0.4);
   --popover: oklch(0.18 0 0);
   --popover-foreground: oklch(0.985 0 0);
   --primary: #8ca9ff;
@@ -115,6 +109,7 @@
   --muted-foreground: oklch(0.7 0 0);
   --accent: rgb(30 42 72);
   --accent-foreground: rgb(174 194 255);
+  --hover: color-mix(in srgb, var(--muted) 70%, var(--card));
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
@@ -128,8 +123,8 @@
   --sidebar-foreground: var(--card-foreground);
   --sidebar-primary: color-mix(in srgb, var(--primary) 8%, var(--sidebar));
   --sidebar-primary-foreground: var(--primary);
-  --sidebar-accent: var(--accent);
-  --sidebar-accent-foreground: var(--accent-foreground);
+  --sidebar-accent: var(--hover);
+  --sidebar-accent-foreground: var(--sidebar-foreground);
   --sidebar-border: var(--border);
   --sidebar-ring: var(--ring);
 }