@wallarm-org/design-system 1.6.2 → 1.7.0

package/dist/components/EmptyState/EmptyState.js

@@ -2,18 +2,22 @@ import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { TestIdProvider } from "../../utils/testId.js";
 import { emptyStateVariants } from "./classes.js";
+import { EmptyStateProvider } from "./EmptyStateContext.js";
 const EmptyState = ({ ref, type = 'collection-empty', className, children, 'data-testid': testId, ...props })=>/*#__PURE__*/ jsx(TestIdProvider, {
         value: testId,
-        children: /*#__PURE__*/ jsx("div", {
-            ...props,
-            ref: ref,
-            role: "status",
-            "data-slot": "empty-state",
-            "data-testid": testId,
-            className: cn(emptyStateVariants({
-                type
-            }), className),
-            children: children
+        children: /*#__PURE__*/ jsx(EmptyStateProvider, {
+            value: type,
+            children: /*#__PURE__*/ jsx("div", {
+                ...props,
+                ref: ref,
+                role: "status",
+                "data-slot": "empty-state",
+                "data-testid": testId,
+                className: cn(emptyStateVariants({
+                    type
+                }), className),
+                children: children
+            })
         })
     });
 EmptyState.displayName = 'EmptyState';

package/dist/components/EmptyState/EmptyStateContext.d.ts

@@ -0,0 +1,3 @@
+import type { EmptyStateType } from './classes';
+export declare const EmptyStateProvider: import("react").Provider<EmptyStateType>;
+export declare const useEmptyStateType: () => EmptyStateType;

package/dist/components/EmptyState/EmptyStateContext.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from "react";
+const EmptyStateContext = /*#__PURE__*/ createContext('collection-empty');
+const EmptyStateProvider = EmptyStateContext.Provider;
+const useEmptyStateType = ()=>useContext(EmptyStateContext);
+export { EmptyStateProvider, useEmptyStateType };

package/dist/components/EmptyState/EmptyStateIllustration.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
+import { emptyStateIllustrationVariants } from "./classes.js";
 const EmptyStateIllustration = ({ ref, className, children, ...props })=>{
     const testId = useTestId('illustration');
     return /*#__PURE__*/ jsx("div", {
@@ -8,7 +9,7 @@ const EmptyStateIllustration = ({ ref, className, children, ...props })=>{
         ref: ref,
         "data-slot": "empty-state-illustration",
         "data-testid": testId,
-        className: cn('text-text-secondary p-8 border border-border-primary bg-bg-light-primary rounded-full w-36 h-36 flex items-center justify-center', className),
+        className: cn(emptyStateIllustrationVariants(), className),
         children: children
     });
 };

package/dist/components/EmptyState/EmptyStateMessage.js

@@ -1,14 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
+import { emptyStateMessageVariants } from "./classes.js";
+import { useEmptyStateType } from "./EmptyStateContext.js";
 const EmptyStateMessage = ({ ref, className, children, ...props })=>{
     const testId = useTestId('message');
+    const type = useEmptyStateType();
     return /*#__PURE__*/ jsx("div", {
         ...props,
         ref: ref,
         "data-slot": "empty-state-message",
         "data-testid": testId,
-        className: cn('flex flex-col items-center gap-8', className),
+        className: cn(emptyStateMessageVariants({
+            type
+        }), className),
         children: children
     });
 };

package/dist/components/EmptyState/EmptyStateTitle.js

@@ -1,14 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
+import { emptyStateTitleVariants } from "./classes.js";
+import { useEmptyStateType } from "./EmptyStateContext.js";
 const EmptyStateTitle = ({ ref, className, children, ...props })=>{
     const testId = useTestId('title');
+    const type = useEmptyStateType();
     return /*#__PURE__*/ jsx("p", {
         ...props,
         ref: ref,
         "data-testid": testId,
         "data-slot": "empty-state-title",
-        className: cn('font-pixel text-base leading-base text-text-primary text-center break-words', className),
+        className: cn(emptyStateTitleVariants({
+            type
+        }), className),
         children: children
     });
 };

package/dist/components/EmptyState/classes.d.ts

@@ -2,3 +2,30 @@ export type EmptyStateType = 'collection-empty' | 'no-results';
 export declare const emptyStateVariants: (props?: ({
     type?: "collection-empty" | "no-results" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * The medallion: a 36px raised tile holding a 20px glyph, which with `p-8` fills
+ * the content box exactly — the hairline is an inset ring in the shadow list,
+ * not a real border, so it doesn't eat into the padding. `text-xl` sets the
+ * 20px em box, so an icon left at its default `size='inherit'` lands on spec
+ * without every call site restating a size.
+ *
+ * The Figma master's placeholder is 16px at 10px padding, but every applied
+ * instance and the medallion spec sheet itself use 20px at 8px — the file is
+ * inconsistent here, and the 20/8 pairing is the one that fills the tile.
+ *
+ * There is deliberately no unframed variant — the spec never shows a bare glyph,
+ * at either scale, so an illustration always carries the tile.
+ *
+ * `rounded-[15px]` is off the radius scale on purpose: it's the value Figma
+ * reports for this node, and fitting a superellipse to the rendered outline
+ * agrees — a plain circular corner at r=14.5 matches to 0.29px, and r=15 to
+ * 0.35px, while the nearest token (16) is off by 0.73px. There is no corner
+ * smoothing on this shape, so no `corner-shape` is needed.
+ */
+export declare const emptyStateIllustrationVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const emptyStateMessageVariants: (props?: ({
+    type?: "collection-empty" | "no-results" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const emptyStateTitleVariants: (props?: ({
+    type?: "collection-empty" | "no-results" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/EmptyState/classes.js

@@ -1,13 +1,36 @@
 import { cva } from "class-variance-authority";
-const emptyStateVariants = cva('flex flex-col items-center text-center gap-16 m-[0_auto]', {
+const emptyStateVariants = cva('flex flex-col items-center text-center m-[0_auto]', {
     variants: {
         type: {
-            'collection-empty': 'max-w-[560px] min-w-[256px]',
-            'no-results': 'w-[240px] py-16'
+            'collection-empty': 'gap-16 py-24 max-w-[560px] min-w-[256px]',
+            'no-results': 'gap-8 py-8 w-[240px]'
         }
     },
     defaultVariants: {
         type: 'collection-empty'
     }
 });
-export { emptyStateVariants };
+const emptyStateIllustrationVariants = cva('empty-state-medallion flex items-center justify-center shrink-0 size-36 rounded-[15px] p-8 text-xl text-icon-secondary');
+const emptyStateMessageVariants = cva('flex flex-col items-center', {
+    variants: {
+        type: {
+            'collection-empty': 'gap-8',
+            'no-results': 'gap-4'
+        }
+    },
+    defaultVariants: {
+        type: 'collection-empty'
+    }
+});
+const emptyStateTitleVariants = cva('text-center break-words', {
+    variants: {
+        type: {
+            'collection-empty': 'font-pixel text-base leading-base text-text-primary',
+            'no-results': 'font-sans-display text-sm font-medium text-text-secondary'
+        }
+    },
+    defaultVariants: {
+        type: 'collection-empty'
+    }
+});
+export { emptyStateIllustrationVariants, emptyStateMessageVariants, emptyStateTitleVariants, emptyStateVariants };

package/dist/icons/Shapes.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import { type SvgIconProps } from './SvgIcon';
+export declare const Shapes: FC<SvgIconProps>;

package/dist/icons/Shapes.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { SvgIcon } from "./SvgIcon.js";
+const Shapes = (props)=>/*#__PURE__*/ jsx(SvgIcon, {
+        ...props,
+        viewBox: "0 0 24 24",
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M9 13C10.105 13 11 13.895 11 15V20C11 21.105 10.105 22 9 22H4C2.895 22 2 21.105 2 20V15C2 13.895 2.895 13 4 13H9ZM17.5 13C19.985 13 22 15.015 22 17.5C22 19.985 19.985 22 17.5 22C15.015 22 13 19.985 13 17.5C13 15.015 15.015 13 17.5 13ZM4 20H9V15H4V20ZM17.5 15C16.119 15 15 16.119 15 17.5C15 18.881 16.119 20 17.5 20C18.881 20 20 18.881 20 17.5C20 16.119 18.881 15 17.5 15ZM12.169 1.647C12.314 1.661 12.457 1.692 12.594 1.742L12.794 1.83L12.981 1.943C13.161 2.068 13.315 2.226 13.435 2.41C13.438 2.416 13.443 2.422 13.446 2.428L17.148 8.371C17.287 8.584 17.377 8.824 17.41 9.075L17.422 9.19L17.425 9.307C17.424 9.577 17.358 9.843 17.233 10.084C17.09 10.359 16.875 10.59 16.61 10.751C16.346 10.912 16.041 10.999 15.731 11H8.3V10.999C8.005 11.006 7.713 10.937 7.453 10.797C7.178 10.648 6.948 10.425 6.791 10.154C6.634 9.883 6.555 9.573 6.562 9.26C6.57 8.946 6.664 8.641 6.834 8.378L10.554 2.467L10.555 2.469C10.695 2.233 10.889 2.034 11.123 1.891C11.373 1.738 11.658 1.651 11.95 1.641L12.169 1.647ZM8.806 9H15.184L12.011 3.905L8.806 9Z",
+            fill: "currentColor"
+        })
+    });
+Shapes.displayName = 'ShapesIcon';
+export { Shapes };

package/dist/icons/index.d.ts

@@ -438,6 +438,7 @@ export { Ses } from './Ses';
 export { SesNeutral } from './SesNeutral';
 export { Settings } from './Settings';
 export { Settings2 } from './Settings2';
+export { Shapes } from './Shapes';
 export { Share } from './Share';
 export { Sheet } from './Sheet';
 export { Shield } from './Shield';

package/dist/icons/index.js

@@ -438,6 +438,7 @@ export { Ses } from "./Ses.js";
 export { SesNeutral } from "./SesNeutral.js";
 export { Settings } from "./Settings.js";
 export { Settings2 } from "./Settings2.js";
+export { Shapes } from "./Shapes.js";
 export { Share } from "./Share.js";
 export { Sheet } from "./Sheet.js";
 export { Shield } from "./Shield.js";

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.6.1",
-  "generatedAt": "2026-08-25T09:31:57.422Z",
+  "version": "1.6.2",
+  "generatedAt": "2026-08-25T16:40:44.467Z",
   "components": [
     {
       "name": "Accordion",
@@ -29733,19 +29733,26 @@
       "examples": [
         {
           "name": "CollectionEmpty",
-          "code": "args => (\n  <EmptyState {...args}>\n    <EmptyStateIllustration>\n      <Circle size='lg' />\n    </EmptyStateIllustration>\n    <EmptyStateMessage>\n      <EmptyStateTitle>Title text goes here</EmptyStateTitle>\n      <EmptyStateDescription>\n        Description text explains what happened and what the user can do next.\n        <br />\n        One to two sentences maximum.\n      </EmptyStateDescription>\n    </EmptyStateMessage>\n    <EmptyStateActions>\n      <Button size='medium'>Reset filters</Button>\n      <Button size='medium' variant='outline' color='neutral'>\n        Refresh\n      </Button>\n    </EmptyStateActions>\n    <EmptyStateLink href='#'>Link</EmptyStateLink>\n  </EmptyState>\n)"
+          "code": "args => (\n  <EmptyState {...args}>\n    <EmptyStateIllustration>\n      <Shapes />\n    </EmptyStateIllustration>\n    <EmptyStateMessage>\n      <EmptyStateTitle>Title text goes here</EmptyStateTitle>\n      <EmptyStateDescription>\n        Description text explains what happened and what the user can do next.\n        <br />\n        One to two sentences maximum.\n      </EmptyStateDescription>\n    </EmptyStateMessage>\n    <EmptyStateActions>\n      <Button size='medium'>Reset filters</Button>\n      <Button size='medium' variant='outline' color='neutral'>\n        Refresh\n      </Button>\n    </EmptyStateActions>\n    <EmptyStateLink href='#'>Link</EmptyStateLink>\n  </EmptyState>\n)"
         },
         {
-          "name": "NoResults",
-          "code": "args => (\n  <EmptyState {...args}>\n    <EmptyStateIllustration>\n      <Zap size='lg' />\n    </EmptyStateIllustration>\n    <EmptyStateMessage>\n      <EmptyStateTitle>No attacks found</EmptyStateTitle>\n      <EmptyStateDescription>Try to apply different filter or reset it.</EmptyStateDescription>\n    </EmptyStateMessage>\n    <EmptyStateActions>\n      <Button size='medium' variant='outline' color='neutral'>\n        Reset filters\n      </Button>\n    </EmptyStateActions>\n  </EmptyState>\n)"
+          "name": "NoFilterResults",
+          "code": "args => (\n  <EmptyState {...args}>\n    <EmptyStateIllustration>\n      <Zap />\n    </EmptyStateIllustration>\n    <EmptyStateMessage>\n      <EmptyStateTitle>No attacks found</EmptyStateTitle>\n      <EmptyStateDescription>Try to apply different filter or reset it.</EmptyStateDescription>\n    </EmptyStateMessage>\n    <EmptyStateActions>\n      <Button size='medium' variant='outline' color='neutral'>\n        Refresh\n      </Button>\n    </EmptyStateActions>\n  </EmptyState>\n)",
+          "description": "The page-level state for a search or filter that matched nothing. Same\n`collection-empty` scale as an untouched collection — the difference is the\nCTA: a neutral \"get back to something\" action, never a create action, because\nthe data exists and the query is what needs changing."
         },
         {
           "name": "Minimal",
-          "code": "args => (\n  <EmptyState {...args}>\n    <EmptyStateMessage>\n      <EmptyStateTitle>Nothing here</EmptyStateTitle>\n      <EmptyStateDescription>This collection is empty.</EmptyStateDescription>\n    </EmptyStateMessage>\n  </EmptyState>\n)"
+          "code": "args => (\n  <EmptyState {...args}>\n    <EmptyStateMessage>\n      <EmptyStateTitle>No results</EmptyStateTitle>\n      <EmptyStateDescription>Short description</EmptyStateDescription>\n    </EmptyStateMessage>\n  </EmptyState>\n)",
+          "description": "The compact state at its spec default: no icon, no actions — just the title\nand subtitle. This is the shape most in-app empty states take."
         },
         {
           "name": "NoResultsExamples",
           "code": "() => (\n  <HStack gap={32} align='start'>\n    {/* In a chart card */}\n    <Card className='w-[340px]'>\n      <CardHeader>\n        <CardTitle>Bar chart</CardTitle>\n      </CardHeader>\n      <CardContent className='flex items-center justify-center py-48'>\n        <EmptyState type='no-results'>\n          <EmptyStateMessage>\n            <EmptyStateDescription>No data found for selected period</EmptyStateDescription>\n          </EmptyStateMessage>\n        </EmptyState>\n      </CardContent>\n    </Card>\n\n    {/* In a select dropdown */}\n    <VStack gap={4} className='w-[260px]'>\n      <Field>\n        <FieldLabel>Label</FieldLabel>\n        <Select collection={emptyCollection}>\n          <SelectButton placeholder='Select' />\n          <SelectPositioner className='w-[260px]'>\n            <SelectContent />\n          </SelectPositioner>\n        </Select>\n      </Field>\n    </VStack>\n  </HStack>\n)"
+        },
+        {
+          "name": "Medallion",
+          "code": "() => (\n  <HStack gap={0} className='w-[330px] overflow-hidden rounded-16 border border-border-primary'>\n    {(['bg-bg-surface-1', 'bg-bg-light-primary'] as const).map(surface => (\n      <div key={surface} className={cn('flex flex-1 justify-center py-28', surface)}>\n        <EmptyStateIllustration>\n          <ScanLine />\n        </EmptyStateIllustration>\n      </div>\n    ))}\n  </HStack>\n)",
+          "description": "The medallion reads as a lit surface: a top-down gradient, a hairline border,\na soft drop shadow and an inner top highlight. Every layer resolves through\n`--color-component-empty-state-medallion-*` and\n`--shadow-empty-state-medallion`, so it holds up on both the card surface and\nthe slightly darker page surface it sits on — shown here side by side. Use the\ntoolbar theme switcher to check it in dark."
         }
       ]
     },
@@ -82645,13 +82652,13 @@
         },
         {
           "name": "EmptyCollection",
-          "code": "() => (\n  <Table data={[]} columns={securityColumns} getRowId={row => row.id}>\n    <TableEmptyState>\n      <EmptyState type='collection-empty'>\n        <EmptyStateIllustration>\n          <Database size='lg' />\n        </EmptyStateIllustration>\n        <EmptyStateMessage>\n          <EmptyStateTitle>No events yet</EmptyStateTitle>\n          <EmptyStateDescription>\n            Security events will appear here as soon as Wallarm detects traffic.\n          </EmptyStateDescription>\n        </EmptyStateMessage>\n        <EmptyStateActions>\n          <Button size='medium'>Configure source</Button>\n        </EmptyStateActions>\n      </EmptyState>\n    </TableEmptyState>\n  </Table>\n)",
+          "code": "() => (\n  <Table data={[]} columns={securityColumns} getRowId={row => row.id}>\n    <TableEmptyState>\n      <EmptyState type='collection-empty'>\n        <EmptyStateIllustration>\n          <Database />\n        </EmptyStateIllustration>\n        <EmptyStateMessage>\n          <EmptyStateTitle>No events yet</EmptyStateTitle>\n          <EmptyStateDescription>\n            Security events will appear here as soon as Wallarm detects traffic.\n          </EmptyStateDescription>\n        </EmptyStateMessage>\n        <EmptyStateActions>\n          <Button size='medium'>Configure source</Button>\n        </EmptyStateActions>\n      </EmptyState>\n    </TableEmptyState>\n  </Table>\n)",
           "description": "When `data` is empty and the table is not loading, the `TableEmptyState` slot\nrenders its children. Compose the `EmptyState` component inside it to get the\nstandard illustration / message / actions layout.\n\nUse `type='collection-empty'` when there is genuinely no data yet (nothing has\nbeen created), and offer a primary action that creates the first item."
         },
         {
           "name": "NoResults",
-          "code": "() => (\n  <Table data={[]} columns={securityColumns} getRowId={row => row.id}>\n    <TableEmptyState>\n      <EmptyState type='no-results'>\n        <EmptyStateIllustration>\n          <SearchX size='lg' />\n        </EmptyStateIllustration>\n        <EmptyStateMessage>\n          <EmptyStateTitle>No results found</EmptyStateTitle>\n          <EmptyStateDescription>\n            No events match your current filters. Try adjusting or resetting them.\n          </EmptyStateDescription>\n        </EmptyStateMessage>\n        <EmptyStateActions>\n          <Button size='medium' variant='outline' color='neutral'>\n            <FilterX />\n            Reset filters\n          </Button>\n        </EmptyStateActions>\n      </EmptyState>\n    </TableEmptyState>\n  </Table>\n)",
-          "description": "Use `type='no-results'` when data exists but the current filters or search\nmatched nothing. Offer a neutral action that clears the filters rather than\na primary \"create\" action."
+          "code": "() => (\n  <Table data={[]} columns={securityColumns} getRowId={row => row.id}>\n    <TableEmptyState>\n      <EmptyState type='collection-empty'>\n        <EmptyStateIllustration>\n          <SearchX />\n        </EmptyStateIllustration>\n        <EmptyStateMessage>\n          <EmptyStateTitle>No results found</EmptyStateTitle>\n          <EmptyStateDescription>\n            No events match your current filters. Try adjusting or resetting them.\n          </EmptyStateDescription>\n        </EmptyStateMessage>\n        <EmptyStateActions>\n          <Button size='medium' variant='outline' color='neutral'>\n            <FilterX />\n            Reset filters\n          </Button>\n        </EmptyStateActions>\n      </EmptyState>\n    </TableEmptyState>\n  </Table>\n)",
+          "description": "When data exists but the current filters or search matched nothing, stay at\nthe `collection-empty` scale — a table body is a page-level surface, and\n`no-results` is the compact treatment for a card or menu. What changes is the\naction: a neutral one that clears the filters, never a primary \"create\"."
         },
         {
           "name": "ColumnResizing",
@@ -95889,6 +95896,18 @@
           "name": "--color-component-app-shell-bg",
           "value": "var(--color-slate-100)"
         },
+        {
+          "name": "--color-component-empty-state-medallion-bg-from",
+          "value": "var(--color-white)"
+        },
+        {
+          "name": "--color-component-empty-state-medallion-bg-to",
+          "value": "--alpha(var(--color-slate-100) / 80%)"
+        },
+        {
+          "name": "--color-component-empty-state-medallion-border",
+          "value": "--alpha(var(--color-slate-300) / 70%)"
+        },
         {
           "name": "--color-syntax-no-syntax",
           "value": "var(--color-slate-900)"
@@ -96951,6 +96970,18 @@
           "name": "--color-component-app-shell-bg",
           "value": "var(--color-slate-975)"
         },
+        {
+          "name": "--color-component-empty-state-medallion-bg-from",
+          "value": "--alpha(var(--color-white) / 7%)"
+        },
+        {
+          "name": "--color-component-empty-state-medallion-bg-to",
+          "value": "--alpha(var(--color-white) / 2%)"
+        },
+        {
+          "name": "--color-component-empty-state-medallion-border",
+          "value": "--alpha(var(--color-white) / 13%)"
+        },
         {
           "name": "--color-syntax-no-syntax",
           "value": "var(--color-slate-200)"

package/dist/theme/Pixel.stories.tsx

@@ -4,7 +4,7 @@ import { Text } from '../components/Text';
 
 const DESCRIPTION = [
   'Geist Pixel is the decorative typeface. Use it for empty states, and for moments that want personality rather than information.',
-  'There is no `Pixel` component. Pixel type is composed from the `font-pixel` utility plus the shared `text-*` size utilities, so the steps below are conventions rather than a component API. The only place it ships today is `EmptyStateTitle`, at 16/24.',
+  'There is no `Pixel` component. Pixel type is composed from the `font-pixel` utility plus the shared `text-*` size utilities, so the steps below are conventions rather than a component API. The only place it ships today is `EmptyStateTitle` at the `collection-empty` scale, at 16/24 — the compact `no-results` title is sans, not pixel.',
   'One cut only: Square at regular weight. There is no light or bold, so `font-bold` on pixel type renders as a browser-synthesized fake — emphasis has to come from size or colour, never from weight.',
   'Not for UI copy, labels, or anything read at length; that is the text ramp. Keep it to short strings, where the blocky letterforms stay legible.',
 ].join('\n\n');

package/dist/theme/index.css

@@ -17,6 +17,7 @@
 @import './icon.css';
 @import './utilities/hover-overlay.css';
 @import './utilities/code-snippet-bg.css';
+@import './utilities/empty-state-medallion.css';
 @import './components/drawer.css';
 @import './components/dialog.css';
 @import './components/tooltip.css';

package/dist/theme/semantic.css

@@ -216,6 +216,24 @@
     --color-component-toast-ic-info: var(--color-blue-400);
     --color-component-app-shell-bg: var(--color-slate-100);
 
+    /* EmptyState medallion — the small raised tile behind the empty-state icon.
+     * Reads as a lit surface: a top-down gradient, a hairline border, a soft
+     * drop shadow and an inner top highlight. Kept as tokens (not utilities)
+     * because every layer flips between light and dark. */
+    --color-component-empty-state-medallion-bg-from: var(--color-white);
+    --color-component-empty-state-medallion-bg-to: --alpha(var(--color-slate-100) / 80%);
+    --color-component-empty-state-medallion-border: --alpha(var(--color-slate-300) / 70%);
+    /* The hairline rides in the shadow list as an inset ring rather than a real
+     * border: Figma composites the top highlight *over* the stroke, and a CSS
+     * inset shadow is clipped to the padding box, so it can never reach a real
+     * border. Ordering matters — earlier shadows paint on top, so the highlight
+     * and the inner shade both land over the ring, as in Figma. It also keeps
+     * the glyph at 8px from the edge instead of 9px. */
+    --shadow-empty-state-medallion:
+        inset 0 1px 0 0 rgba(255, 255, 255, 0.45), inset 0 -1px 1px 0 rgba(15, 23, 43, 0.04),
+        inset 0 0 0 1px var(--color-component-empty-state-medallion-border),
+        0 2px 2.5px 0 rgba(15, 23, 43, 0.03), 0 1px 1px 0 rgba(15, 23, 43, 0.05);
+
     /* ========================================
    * SYNTAX COLORS
    * ⚠️  CODE-MANAGED — DO NOT SYNC FROM FIGMA
@@ -612,6 +630,16 @@
     --color-component-toast-ic-info: var(--color-blue-600);
     --color-component-app-shell-bg: var(--color-slate-975);
 
+    /* EmptyState medallion (dark) — same recipe inverted: the gradient and the
+     * top highlight become low-alpha white, the shadows deepen to near-black. */
+    --color-component-empty-state-medallion-bg-from: --alpha(var(--color-white) / 7%);
+    --color-component-empty-state-medallion-bg-to: --alpha(var(--color-white) / 2%);
+    --color-component-empty-state-medallion-border: --alpha(var(--color-white) / 13%);
+    --shadow-empty-state-medallion:
+        inset 0 1px 0 0 rgba(255, 255, 255, 0.05), inset 0 -1px 2px 0 rgba(0, 0, 0, 0.16),
+        inset 0 0 0 1px var(--color-component-empty-state-medallion-border),
+        0 2px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
+
     /* ========================================
      * SYNTAX COLORS
      * ⚠️  CODE-MANAGED — DO NOT SYNC FROM FIGMA

package/dist/theme/utilities/empty-state-medallion.css

@@ -0,0 +1,18 @@
+/**
+ * The raised tile behind an EmptyState icon.
+ *
+ * Composed here rather than in the component so the three layers Figma draws
+ * as stacked overlays (gradient fill, outer drop shadow, inner top highlight)
+ * collapse into one element: the gradient is a background-image, and the drop
+ * shadow, the inset highlight and the hairline ring all ride in a single
+ * box-shadow list. All of it resolves through tokens that flip in
+ * `[data-theme='dark']`.
+ */
+@utility empty-state-medallion {
+    background-image: linear-gradient(
+        to bottom,
+        var(--color-component-empty-state-medallion-bg-from),
+        var(--color-component-empty-state-medallion-bg-to)
+    );
+    box-shadow: var(--shadow-empty-state-medallion);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "1.6.2",
+  "version": "1.7.0",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",