noecosystem-design 0.2.2 → 0.2.3

package/apps/storybook/stories/catalog/app-frame.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { AppFrame } from '../../../../packages/ui/src/app-frame';
+import { ChartSquare, ReceiptSearch, WalletMoney } from '../../../../packages/icons/src';
 import { SidebarNavigation } from '../../../../packages/ui/src/sidebar-navigation';
 
 const navigation = (
@@ -36,6 +37,44 @@ function AppFrameDemo() {
   );
 }
 
+function FinanceAppFrameDemo() {
+  return (
+    <div style={{ height: '28rem' }}>
+      <AppFrame
+        header={
+          <div className="flex min-h-14 items-center bg-surface-raised px-4 text-sm font-medium">
+            NOCFO
+          </div>
+        }
+        navigation={
+          <SidebarNavigation
+            label="NOCFO navigation"
+            sections={[
+              {
+                id: 'finance',
+                label: 'Finance',
+                items: [
+                  { href: '#dashboard', icon: <ChartSquare />, label: 'Dashboard', current: true },
+                  { href: '#contracts', icon: <ReceiptSearch />, label: 'Contracts' },
+                  { href: '#cashflow', icon: <WalletMoney />, label: 'Cash flow', badge: '12' },
+                ],
+              },
+            ]}
+          />
+        }
+        variant="finance"
+      >
+        <section className="rounded-lg bg-surface p-5">
+          <h2 className="m-0 text-lg font-semibold">Financial overview</h2>
+          <p className="mb-0 mt-2 text-sm text-muted-foreground">
+            Flat surfaces are separated by semantic color and spacing, not shadows or card strokes.
+          </p>
+        </section>
+      </AppFrame>
+    </div>
+  );
+}
+
 const meta = {
   title: 'Catalog/Patterns/Pages/App Frame',
   component: AppFrameDemo,
@@ -45,3 +84,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
+
+export const Finance: Story = {
+  render: () => <FinanceAppFrameDemo />,
+};

package/apps/storybook/stories/catalog/button.stories.tsx

@@ -22,6 +22,7 @@ export const Default: Story = {
 };
 
 export const Outline: Story = { args: { variant: 'outline', children: 'Outline' } };
+export const Secondary: Story = { args: { variant: 'secondary', children: 'Secondary' } };
 export const Ghost: Story = { args: { variant: 'ghost', children: 'Ghost' } };
 export const Destructive: Story = { args: { variant: 'destructive', children: 'Delete' } };
 export const Loading: Story = { args: { loading: true, children: 'Saving' } };

package/apps/storybook/stories/catalog/sidebar-navigation.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { SidebarNavigation } from '../../../../packages/ui/src/sidebar-navigation';
+import { ChartSquare, ReceiptSearch, WalletMoney } from '../../../../packages/icons/src';
 
 const sections = [
   {
@@ -38,3 +39,24 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
+
+export const PersianRtl: Story = {
+  render: () => (
+    <div dir="rtl" lang="fa" style={{ maxWidth: '17.5rem' }}>
+      <SidebarNavigation
+        label="ناوبری نوکفو"
+        sections={[
+          {
+            id: 'finance',
+            label: 'مدیریت مالی',
+            items: [
+              { href: '#dashboard', icon: <ChartSquare />, label: 'داشبورد', current: true },
+              { href: '#contracts', icon: <ReceiptSearch />, label: 'قراردادها' },
+              { href: '#cashflow', icon: <WalletMoney />, label: 'جریان نقدی', badge: '۱۲' },
+            ],
+          },
+        ]}
+      />
+    </div>
+  ),
+};

package/docs/design-system/brand-theme.md

@@ -18,8 +18,9 @@ interfaces use the same language rather than a related palette.
 Use large, confident headings; quiet metadata with tracked uppercase only for
 Latin labels; generous spacing; and low-contrast graphite/paper layers. Interactive
 boundaries use the semantic border token and the shared rounded geometry. Floating
-chat and modal surfaces use `shadow.raised` or `shadow.overlay` plus the quiet mint
-ambient gradient from the official reference. Do not create a separate app palette.
+chat and modal surfaces remain flat, using a quiet mint ambient layer or overlay
+scrim when separation is needed; `shadow.raised` and `shadow.overlay` stay `none`.
+Do not create a separate app palette.
 
 ## Product mapping
 

package/docs/design-system/components.md

@@ -47,6 +47,19 @@ For application pages, compose `app-frame`, `page-header`, `sidebar-navigation`,
 Use the [flat surface and navigation policy](surface-policy.md) to decide surface
 tone, CTA hierarchy, adaptive navigation, icon coloring, and review evidence.
 
+### Finance application shell
+
+For NOCFO-class workspaces use `AppFrame variant="finance"` with
+`HeaderNavigation` and `SidebarNavigation`. It uses a 280px desktop navigation
+column, a compact 56px header, and semantic background/surface/sunken layers for
+separation. It never solves Persian or English layout with `row-reverse`: icons
+render at the logical start and end adornments use `margin-inline-start`.
+
+The shell is deliberately flat. Sections and cards are differentiated by the
+surface tokens and spacing; their outer stroke and every shadow are absent. Use
+the standard `Button variant="secondary"` for transparent, currentColor outline
+actions. It is white on dark/colored surfaces and graphite on paper.
+
 Mapping to the Untitled UI reference taxonomy (honest as of 2026-08-27 — foundation stabilization):
 
 | Untitled UI category      | NOE coverage                                                        |

package/docs/design-system/surface-policy.md

@@ -14,16 +14,18 @@ passes caused by arbitrary shadows, card borders, or ambiguous mobile navigation
    `appearance="outlined"` is reserved for a selection, data-entry, or comparison
    boundary where a stroke conveys real meaning.
 
-Use the shared shadow tokens only for floating chat, drawer, popover and modal
-layers. Sections and ordinary cards do not receive ad-hoc elevation. A focus state
-is an outline/ring, not elevation.
+NOE surfaces are fully flat: `shadow.raised` and `shadow.overlay` are `none` in
+every theme, including dialogs, drawers, menus and popovers. Separation comes from
+semantic surface color, radius, spacing and an overlay scrim—not shadow. Sections
+and ordinary cards do not receive ad-hoc elevation. A focus state is an
+outline/ring, not elevation.
 
 ## Actions
 
 - One screen has one contained primary CTA.
-- Secondary actions are outline or ghost actions. On a dark or colored surface,
-  a white outline action remains transparent with a white label and stroke; never
-  give it an opaque white fill that removes its hierarchy.
+- Secondary actions are transparent outline actions. Their label and stroke use
+  `currentColor`; therefore the standard foreground is white in dark/colored
+  contexts and graphite on paper. Never give a secondary action an opaque fill.
 - Destructive actions retain an explicit label and confirmation/recovery path;
   color alone is never the signal.
 - Every focusable action keeps a visible `focus-visible` outline.
@@ -52,8 +54,9 @@ is an outline/ring, not elevation.
 
 - Test every route in Persian/RTL and English/LTR, in light and dark themes.
 - Verify no page-level horizontal overflow at the mobile breakpoint.
-- Verify sections/cards have no visible outer stroke or ad-hoc shadow unless they
-  are an explicitly outlined control or a floating overlay using `shadow.overlay`.
+- Verify sections/cards have no visible outer stroke or shadow unless they are an
+  explicitly outlined control (for example a secondary action, input or table
+  affordance).
 - Verify interactive targets are at least 44 px on touch devices and have
   accessible names.
 - Test desktop sidebar and mobile drawer independently, including keyboard focus

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noecosystem-design",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "private": false,
   "description": "Agent-readable NOE design-system source, registry metadata, and verification contracts.",
   "keywords": [

package/packages/design-tokens/src/tokens.css

@@ -159,8 +159,8 @@
   --noe-color-info-foreground: var(--noe-primitive-color-paper-0);
   --noe-color-focus-ring: var(--noe-primitive-color-alpha-focus-light);
   --noe-color-overlay: var(--noe-primitive-color-alpha-overlay-light);
-  --noe-shadow-raised: 0 8px 20px rgba(23, 25, 24, 0.055);
-  --noe-shadow-overlay: 0 36px 100px rgba(23, 25, 24, 0.28);
+  --noe-shadow-raised: none;
+  --noe-shadow-overlay: none;
 }
 
 /* Semantic tokens: explicit dark theme. */
@@ -189,8 +189,8 @@
   --noe-color-info-foreground: var(--noe-primitive-color-ink-950);
   --noe-color-focus-ring: var(--noe-primitive-color-alpha-focus-dark);
   --noe-color-overlay: var(--noe-primitive-color-alpha-overlay-dark);
-  --noe-shadow-raised: 0 8px 20px rgba(0, 0, 0, 0.14);
-  --noe-shadow-overlay: 0 36px 100px rgba(0, 0, 0, 0.42);
+  --noe-shadow-raised: none;
+  --noe-shadow-overlay: none;
 }
 
 /* Semantic tokens: follow the OS only when no explicit theme is set. */
@@ -220,8 +220,8 @@
     --noe-color-info-foreground: var(--noe-primitive-color-ink-950);
     --noe-color-focus-ring: var(--noe-primitive-color-alpha-focus-dark);
     --noe-color-overlay: var(--noe-primitive-color-alpha-overlay-dark);
-    --noe-shadow-raised: 0 8px 20px rgba(0, 0, 0, 0.14);
-    --noe-shadow-overlay: 0 36px 100px rgba(0, 0, 0, 0.42);
+    --noe-shadow-raised: none;
+    --noe-shadow-overlay: none;
   }
 }
 

package/packages/design-tokens/src/tokens.json

@@ -154,12 +154,12 @@
   },
   "shadow": {
     "light": {
-      "raised": "0 8px 20px rgba(23, 25, 24, 0.055)",
-      "overlay": "0 36px 100px rgba(23, 25, 24, 0.28)"
+      "raised": "none",
+      "overlay": "none"
     },
     "dark": {
-      "raised": "0 8px 20px rgba(0, 0, 0, 0.14)",
-      "overlay": "0 36px 100px rgba(0, 0, 0, 0.42)"
+      "raised": "none",
+      "overlay": "none"
     }
   },
   "font": {

package/packages/design-tokens/src/tokens.mjs

@@ -155,12 +155,12 @@ export const tokens = {
   },
   "shadow": {
     "light": {
-      "raised": "0 8px 20px rgba(23, 25, 24, 0.055)",
-      "overlay": "0 36px 100px rgba(23, 25, 24, 0.28)"
+      "raised": "none",
+      "overlay": "none"
     },
     "dark": {
-      "raised": "0 8px 20px rgba(0, 0, 0, 0.14)",
-      "overlay": "0 36px 100px rgba(0, 0, 0, 0.42)"
+      "raised": "none",
+      "overlay": "none"
     }
   },
   "font": {

package/packages/registry/r/app-frame.json

@@ -3,7 +3,7 @@
   "name": "app-frame",
   "type": "registry:block",
   "title": "App Frame",
-  "description": "App Frame — Patterns / Pages component. app-frame provides patterns / pages behavior with RTL, i18n and accessibility built-in.",
+  "description": "App Frame — Patterns / Pages component. Includes a flat finance variant with a 280px logical sidebar, compact header and color-separated surfaces; RTL, i18n and accessibility are built in.",
   "files": [
     {
       "path": "packages/ui/src/app-frame.tsx",
@@ -37,8 +37,16 @@
     "announcements": [],
     "focusBehavior": ["visible ring 2px"]
   },
-  "tokenContracts": ["color.foreground", "color.border"],
-  "capabilityAliases": ["app frame", "app-frame"],
-  "useWhen": ["using app frame in Patterns / Pages"],
+  "tokenContracts": [
+    "color.background",
+    "color.surface",
+    "color.surfaceRaised",
+    "color.surfaceSunken"
+  ],
+  "capabilityAliases": ["app frame", "app-frame", "finance application shell", "admin shell"],
+  "useWhen": [
+    "using app frame in Patterns / Pages",
+    "building a flat finance or admin application shell"
+  ],
   "doNotUseWhen": ["when app frame semantics do not match"]
 }

package/packages/registry/r/button.json

@@ -3,7 +3,7 @@
   "name": "button",
   "type": "registry:ui",
   "title": "Button",
-  "description": "Primary action primitive with semantic variants, focus visibility, loading state and bidirectional layout. Use for all interactive actions.",
+  "description": "Primary action primitive with semantic variants, focus visibility, loading state and bidirectional layout. Secondary is transparent with a currentColor stroke and label.",
   "files": [
     {
       "path": "packages/ui/src/button.tsx",

package/packages/registry/r/header-navigation.json

@@ -3,7 +3,7 @@
   "name": "header-navigation",
   "type": "registry:block",
   "title": "Header Navigation",
-  "description": "Header Navigation — Patterns / Application component. header-navigation provides patterns / application behavior with RTL, i18n and accessibility built-in.",
+  "description": "Header Navigation — Patterns / Application component. Provides a compact 56px application header with RTL, i18n and accessibility built in.",
   "files": [
     {
       "path": "packages/ui/src/header-navigation.tsx",
@@ -37,8 +37,8 @@
     "announcements": [],
     "focusBehavior": ["visible ring 2px"]
   },
-  "tokenContracts": ["color.foreground", "color.border"],
-  "capabilityAliases": ["header navigation", "header-navigation"],
+  "tokenContracts": ["color.foreground", "color.surfaceRaised", "control.height.md"],
+  "capabilityAliases": ["header navigation", "header-navigation", "compact app header"],
   "useWhen": ["using header navigation in Patterns / Application"],
   "doNotUseWhen": ["when header navigation semantics do not match"]
 }

package/packages/registry/r/sidebar-navigation.json

@@ -3,7 +3,7 @@
   "name": "sidebar-navigation",
   "type": "registry:block",
   "title": "Sidebar Navigation",
-  "description": "Sidebar Navigation — Patterns / Application component. sidebar-navigation provides patterns / application behavior with RTL, i18n and accessibility built-in.",
+  "description": "Sidebar Navigation — Patterns / Application component. Uses logical icon, label and end-adornment order without row reversal; RTL, i18n and accessibility are built in.",
   "files": [
     {
       "path": "packages/ui/src/lib/cn.ts",
@@ -37,8 +37,13 @@
     "announcements": [],
     "focusBehavior": ["visible ring 2px"]
   },
-  "tokenContracts": ["color.foreground", "color.border"],
-  "capabilityAliases": ["sidebar navigation", "sidebar-navigation"],
+  "tokenContracts": [
+    "color.foreground",
+    "color.surface",
+    "color.surfaceRaised",
+    "color.mutedForeground"
+  ],
+  "capabilityAliases": ["sidebar navigation", "sidebar-navigation", "finance sidebar"],
   "useWhen": ["using sidebar navigation in Patterns / Application"],
   "doNotUseWhen": ["when sidebar navigation semantics do not match"]
 }

package/packages/ui/src/app-frame.browser.test.tsx

@@ -0,0 +1,47 @@
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-react';
+
+import { DirectionProvider } from './direction';
+import { AppFrame } from './app-frame';
+import { SidebarNavigation } from './sidebar-navigation';
+
+test('finance app frame keeps a flat, logical RTL sidebar structure', async () => {
+  const screen = await render(
+    <DirectionProvider direction="rtl">
+      <AppFrame
+        contentId="finance-main"
+        data-testid="finance-app-frame"
+        navigation={
+          <SidebarNavigation
+            label="ناوبری"
+            sections={[
+              {
+                id: 'finance',
+                items: [
+                  {
+                    href: '#dashboard',
+                    icon: <svg data-testid="dashboard-icon" />,
+                    label: 'داشبورد',
+                    current: true,
+                  },
+                ],
+              },
+            ]}
+          />
+        }
+        variant="finance"
+      >
+        <p>محتوا</p>
+      </AppFrame>
+    </DirectionProvider>,
+  );
+
+  const frame = screen.getByTestId('finance-app-frame');
+  await expect.element(frame).toHaveAttribute('data-variant', 'finance');
+  await expect.element(screen.getByRole('navigation', { name: 'ناوبری' })).toBeVisible();
+  await expect
+    .element(screen.getByRole('link', { name: 'داشبورد' }))
+    .toHaveAttribute('aria-current', 'page');
+  await expect.element(screen.getByTestId('dashboard-icon')).toBeVisible();
+  await expect.element(screen.getByRole('main')).toHaveAttribute('id', 'finance-main');
+});

package/packages/ui/src/app-frame.tsx

@@ -1,36 +1,55 @@
+import { useId } from 'react';
 import type * as React from 'react';
 
 import { cn } from './lib/cn';
 
 export interface AppFrameProps extends React.ComponentProps<'div'> {
+  /** `finance` is the compact, flat shell for dense business applications. */
+  variant?: 'default' | 'finance';
   header?: React.ReactNode;
   navigation?: React.ReactNode;
   mobileNavigation?: React.ReactNode;
   inspector?: React.ReactNode;
+  contentId?: string;
   children: React.ReactNode;
 }
 
 export function AppFrame({
+  variant = 'default',
   header,
   navigation,
   mobileNavigation,
   inspector,
+  contentId,
   children,
   className,
   ...props
 }: AppFrameProps) {
+  const isFinanceShell = variant === 'finance';
+  const generatedContentId = useId();
   return (
     <div
-      className={cn('grid min-h-dvh w-full grid-rows-[auto_1fr]', className)}
+      className={cn(
+        'grid min-h-dvh w-full grid-rows-[auto_1fr] bg-background font-sans text-foreground',
+        className,
+      )}
       data-slot="app-frame"
+      data-variant={variant}
       {...props}
     >
       {header ? <div data-slot="app-frame-header">{header}</div> : null}
-      <div className="grid lg:grid-cols-[15rem_minmax(0,1fr)] xl:grid-cols-[15rem_minmax(0,1fr)_18rem]">
+      <div
+        className={cn(
+          'grid',
+          isFinanceShell
+            ? 'lg:grid-cols-[17.5rem_minmax(0,1fr)] xl:grid-cols-[17.5rem_minmax(0,1fr)_18rem]'
+            : 'lg:grid-cols-[15rem_minmax(0,1fr)] xl:grid-cols-[15rem_minmax(0,1fr)_18rem]',
+        )}
+      >
         {mobileNavigation ? (
           <nav
             aria-label="Primary"
-            className="border-b border-border bg-surface-raised p-4 lg:hidden"
+            className="bg-surface p-4 lg:hidden"
             data-slot="app-frame-mobile-navigation"
           >
             {mobileNavigation}
@@ -39,19 +58,27 @@ export function AppFrame({
         {navigation ? (
           <aside
             aria-label="Primary"
-            className="hidden border-e border-border bg-surface-raised p-4 lg:block"
+            className={cn(
+              'hidden p-4 lg:block',
+              isFinanceShell ? 'bg-surface-sunken px-3 py-4' : 'bg-surface-raised',
+            )}
             data-slot="app-frame-navigation"
           >
             {navigation}
           </aside>
         ) : null}
-        <main className="min-w-0 p-4 sm:p-6" data-slot="app-frame-content">
+        <main
+          className={cn('min-w-0 bg-background p-4 sm:p-6', isFinanceShell && 'sm:p-5')}
+          data-slot="app-frame-content"
+          id={contentId ?? generatedContentId}
+          tabIndex={-1}
+        >
           {children}
         </main>
         {inspector ? (
           <aside
             aria-label="Inspector"
-            className="hidden border-s border-border bg-surface-raised p-5 xl:block"
+            className="hidden bg-surface p-5 xl:block"
             data-slot="app-frame-inspector"
           >
             {inspector}

package/packages/ui/src/button.browser.test.tsx

@@ -36,3 +36,11 @@ test('a disabled polymorphic Button cannot navigate or receive focus', async ()
   expect(onClick).not.toHaveBeenCalled();
   expect(window.location.hash).not.toBe('#danger');
 });
+
+test('secondary Button remains a transparent currentColor outline', async () => {
+  const screen = await render(<Button variant="secondary">Reject</Button>);
+  const button = screen.getByRole('button', { name: 'Reject' });
+  await expect.element(button).toHaveClass('border-current');
+  await expect.element(button).toHaveClass('bg-transparent');
+  await expect.element(button).toHaveClass('text-foreground');
+});

package/packages/ui/src/button.tsx

@@ -12,7 +12,7 @@ export const buttonVariants = cva(
     variants: {
       variant: {
         primary: 'border-accent bg-accent text-accent-foreground hover:bg-accent-hover',
-        secondary: 'border-border bg-surface-raised text-foreground hover:bg-muted',
+        secondary: 'border-current bg-transparent text-foreground hover:bg-muted/70',
         outline: 'border-border bg-transparent text-foreground hover:bg-muted',
         ghost: 'border-transparent bg-transparent text-foreground hover:bg-muted',
         quiet: 'border-transparent bg-transparent text-foreground hover:bg-muted',

package/packages/ui/src/header-navigation.tsx

@@ -29,7 +29,7 @@ export function HeaderNavigation({
   return (
     <header
       className={cn(
-        'flex w-full items-center gap-x-6 gap-y-2 bg-surface-raised px-4 py-3',
+        'flex min-h-14 w-full items-center gap-x-4 gap-y-2 bg-surface-raised px-4 py-2',
         className,
       )}
       data-slot="header-navigation"

package/packages/ui/src/sidebar-navigation.tsx

@@ -6,8 +6,11 @@ export interface SidebarNavigationItem {
   id?: string;
   href: string;
   label: React.ReactNode;
+  /** Rendered at the logical start; follows document direction without row reversal. */
+  icon?: React.ReactNode;
   current?: boolean;
   badge?: React.ReactNode;
+  endAdornment?: React.ReactNode;
 }
 
 export interface SidebarNavigationSection {
@@ -53,16 +56,24 @@ export function SidebarNavigation({
                 <a
                   aria-current={item.current ? 'page' : undefined}
                   className={cn(
-                    'flex items-center gap-2 rounded-md px-3 py-2 text-sm leading-normal no-underline hover:bg-surface-sunken/60',
+                    'flex min-h-11 items-center gap-2 rounded-md px-3 py-2 text-sm leading-normal no-underline hover:bg-surface/80',
                     item.current
-                      ? 'bg-surface-sunken font-medium text-foreground'
+                      ? 'bg-surface-raised font-medium text-foreground'
                       : 'text-muted-foreground',
                   )}
                   data-current={item.current || undefined}
                   data-slot="sidebar-navigation-item"
                   href={item.href}
                 >
+                  {item.icon ? (
+                    <span aria-hidden="true" className="shrink-0 text-current [&_svg]:size-5">
+                      {item.icon}
+                    </span>
+                  ) : null}
                   <span className="min-w-0 flex-1 truncate">{item.label}</span>
+                  {item.endAdornment ? (
+                    <span className="ms-auto shrink-0 text-current">{item.endAdornment}</span>
+                  ) : null}
                   {item.badge ? (
                     <span className="ms-auto shrink-0 text-xs tabular-nums">{item.badge}</span>
                   ) : null}

package/tests/tokens.test.mjs

@@ -23,22 +23,16 @@ test('token CSS includes theme and reduced-motion contracts', async () => {
   assert.match(css, /--noe-primitive-color-mint-100:\s*#[0-9a-f]{6}/i);
 });
 
-test('surface elevation follows the official NOE soft-depth contract', async () => {
-  assert.match(tokens.shadow.light.raised, /rgba\(23, 25, 24, 0\.055\)/);
-  assert.match(tokens.shadow.light.overlay, /rgba\(23, 25, 24, 0\.28\)/);
-  assert.match(tokens.shadow.dark.raised, /rgba\(0, 0, 0, 0\.14\)/);
-  assert.match(tokens.shadow.dark.overlay, /rgba\(0, 0, 0, 0\.42\)/);
+test('surfaces remain flat in every NOE theme', async () => {
+  assert.equal(tokens.shadow.light.raised, 'none');
+  assert.equal(tokens.shadow.light.overlay, 'none');
+  assert.equal(tokens.shadow.dark.raised, 'none');
+  assert.equal(tokens.shadow.dark.overlay, 'none');
 
   const css = await readFile(
     new URL('../packages/design-tokens/src/tokens.css', import.meta.url),
     'utf8',
   );
-  assert.match(
-    css,
-    /\[data-theme="light"\][\s\S]*?--noe-shadow-raised:\s*0 8px 20px rgba\(23, 25, 24, 0\.055\)/,
-  );
-  assert.match(
-    css,
-    /\[data-theme="dark"\][\s\S]*?--noe-shadow-overlay:\s*0 36px 100px rgba\(0, 0, 0, 0\.42\)/,
-  );
+  assert.match(css, /\[data-theme="light"\][\s\S]*?--noe-shadow-raised:\s*none/);
+  assert.match(css, /\[data-theme="dark"\][\s\S]*?--noe-shadow-overlay:\s*none/);
 });