@wallarm-org/design-system 1.6.2 → 1.8.0

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');
@@ -39,6 +39,10 @@ const STEPS: PixelStep[] = [
   { token: 'pixel-lg', utilities: 'font-pixel text-base', metrics: '16 / 24' },
 ];
 
+/**
+ * The four sanctioned steps, with the Figma token beside each. Only one ships today —
+ * `EmptyStateTitle` at 16 on 24 — so treat the rest as available rather than established.
+ */
 export const Scale: StoryFn<typeof meta> = () => (
   <VStack gap={32} align='start'>
     {STEPS.map(({ token, utilities, metrics }) => (
@@ -57,6 +61,10 @@ export const Scale: StoryFn<typeof meta> = () => (
   </VStack>
 );
 
+/**
+ * One cut only, Square at regular weight. `font-bold` on pixel type renders as a
+ * browser-synthesised fake, so emphasis has to come from size or colour and never from weight.
+ */
 export const Decorative: StoryFn<typeof meta> = () => (
   <VStack gap={40} align='start'>
     <VStack gap={12} align='start'>

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.8.0",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",