@wallarm-org/design-system 1.1.0-rc-feature-AS-1060.1 → 1.1.0

package/dist/components/Heading/Heading.js

@@ -2,19 +2,19 @@ import { jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
-const headingVariants = cva('font-sans-display text-text-primary tracking-[-0.02em]', {
+const headingVariants = cva('font-sans-display text-text-primary', {
     variants: {
         size: {
-            sm: 'text-sm',
-            md: 'text-base',
-            lg: 'text-lg',
-            xl: 'text-xl',
-            '2xl': 'text-2xl',
-            '3xl': 'text-3xl',
-            '4xl': 'text-4xl',
-            '5xl': 'text-5xl',
-            '6xl': 'text-6xl',
-            '7xl': 'text-7xl'
+            sm: 'text-sm tracking-normal',
+            md: 'text-base tracking-normal',
+            lg: 'text-lg tracking-normal',
+            xl: 'text-xl tracking-xl',
+            '2xl': 'text-2xl tracking-2xl',
+            '3xl': 'text-3xl tracking-3xl',
+            '4xl': 'text-4xl tracking-4xl',
+            '5xl': 'text-5xl tracking-5xl',
+            '6xl': 'text-6xl tracking-6xl',
+            '7xl': 'text-7xl tracking-7xl'
         },
         weight: {
             light: 'font-light',

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
   "version": "1.0.0",
-  "generatedAt": "2026-08-20T14:13:55.149Z",
+  "generatedAt": "2026-08-20T14:43:33.279Z",
   "components": [
     {
       "name": "Accordion",
@@ -17761,7 +17761,7 @@
         },
         {
           "name": "Sizes",
-          "code": "({ ...args }) => (\n  <VStack align='start'>\n    <Code {...args} size='xs'>\n      console.log('Extra small code text');\n    </Code>\n    <Code {...args} size='s'>\n      console.log('Small code text');\n    </Code>\n    <Code {...args} size='m'>\n      console.log('Medium code text');\n    </Code>\n    <Code {...args} size='l'>\n      console.log('Large code text');\n    </Code>\n  </VStack>\n)"
+          "code": "({ ...args }) => (\n  <VStack gap={24} align='start'>\n    {SIZES.map(({ size, metrics }) => (\n      <VStack key={size} gap={4} align='start'>\n        <Text size='xs' color='secondary'>\n          size=&apos;{size}&apos; · {metrics}\n        </Text>\n        <Code {...args} size={size}>\n          console.log('hello world');\n        </Code>\n      </VStack>\n    ))}\n  </VStack>\n)"
         },
         {
           "name": "Weights",
@@ -31625,7 +31625,7 @@
         },
         {
           "name": "Sizes",
-          "code": "({ ...args }) => (\n  <VStack align='start'>\n    <Heading {...args} size='sm'>\n      Small Heading\n    </Heading>\n    <Heading {...args} size='md'>\n      Medium Heading\n    </Heading>\n    <Heading {...args} size='lg'>\n      Large Heading\n    </Heading>\n    <Heading {...args} size='xl'>\n      Extra Large Heading\n    </Heading>\n    <Heading {...args} size='2xl'>\n      2XL Heading\n    </Heading>\n    <Heading {...args} size='3xl'>\n      3XL Heading\n    </Heading>\n    <Heading {...args} size='4xl'>\n      4XL Heading\n    </Heading>\n    <Heading {...args} size='5xl'>\n      5XL Heading\n    </Heading>\n    <Heading {...args} size='6xl'>\n      6XL Heading\n    </Heading>\n    <Heading {...args} size='7xl'>\n      7XL Heading\n    </Heading>\n  </VStack>\n)"
+          "code": "({ ...args }) => (\n  <VStack gap={24} align='start'>\n    {SIZES.map(({ size, metrics }) => (\n      <VStack key={size} gap={4} align='start'>\n        <Text size='xs' color='secondary'>\n          size=&apos;{size}&apos; · {metrics}\n        </Text>\n        <Heading {...args} size={size}>\n          The quick brown fox\n        </Heading>\n      </VStack>\n    ))}\n  </VStack>\n)"
         },
         {
           "name": "Weights",
@@ -79107,7 +79107,7 @@
         },
         {
           "name": "Sizes",
-          "code": "({ ...args }) => (\n  <VStack align='start'>\n    <Text {...args} size='xs'>\n      Extra Small Body Text\n    </Text>\n    <Text {...args} size='sm'>\n      Small Body Text\n    </Text>\n    <Text {...args} size='md'>\n      Medium Body Text\n    </Text>\n    <Text {...args} size='lg'>\n      Large Body Text\n    </Text>\n    <Text {...args} size='xl'>\n      Extra Large Body Text\n    </Text>\n  </VStack>\n)"
+          "code": "({ ...args }) => (\n  <VStack gap={24} align='start'>\n    {SIZES.map(({ size, metrics }) => (\n      <VStack key={size} gap={4} align='start'>\n        <Text size='xs' color='secondary'>\n          size=&apos;{size}&apos; · {metrics}\n        </Text>\n        <Text {...args} size={size}>\n          The quick brown fox jumps over the lazy dog\n        </Text>\n      </VStack>\n    ))}\n  </VStack>\n)"
         },
         {
           "name": "Weights",
@@ -89989,6 +89989,34 @@
         {
           "name": "--leading-9xl",
           "value": "128px"
+        },
+        {
+          "name": "--tracking-xl",
+          "value": "-0.005em"
+        },
+        {
+          "name": "--tracking-2xl",
+          "value": "-0.01em"
+        },
+        {
+          "name": "--tracking-3xl",
+          "value": "-0.01em"
+        },
+        {
+          "name": "--tracking-4xl",
+          "value": "-0.015em"
+        },
+        {
+          "name": "--tracking-5xl",
+          "value": "-0.015em"
+        },
+        {
+          "name": "--tracking-6xl",
+          "value": "-0.02em"
+        },
+        {
+          "name": "--tracking-7xl",
+          "value": "-0.02em"
         }
       ]
     },

package/dist/theme/Pixel.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { HStack, VStack } from '../components/Stack';
+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.',
+  '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');
+
+const meta = {
+  title: 'Typography/Pixel',
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+
+type PixelStep = {
+  /** Name of the matching text style in Figma. */
+  token: string;
+  /** Utilities that reproduce it — note lg is 16px, so it maps to text-base. */
+  utilities: string;
+  /** Size / leading in px. */
+  metrics: string;
+};
+
+const STEPS: PixelStep[] = [
+  { token: 'pixel-3xl', utilities: 'font-pixel text-3xl', metrics: '30 / 36' },
+  { token: 'pixel-2xl', utilities: 'font-pixel text-2xl', metrics: '24 / 32' },
+  { token: 'pixel-xl', utilities: 'font-pixel text-xl', metrics: '20 / 28' },
+  { token: 'pixel-lg', utilities: 'font-pixel text-base', metrics: '16 / 24' },
+];
+
+export const Scale: StoryFn<typeof meta> = () => (
+  <VStack gap={32} align='start'>
+    {STEPS.map(({ token, utilities, metrics }) => (
+      <VStack key={token} gap={8} align='start'>
+        <HStack gap={12} align='baseline'>
+          <Text size='sm' weight='medium'>
+            {token}
+          </Text>
+          <Text size='xs' color='secondary'>
+            {metrics} · {utilities}
+          </Text>
+        </HStack>
+        <span className={`${utilities} text-text-primary`}>The quick brown fox</span>
+      </VStack>
+    ))}
+  </VStack>
+);
+
+export const Decorative: StoryFn<typeof meta> = () => (
+  <VStack gap={40} align='start'>
+    <VStack gap={12} align='start'>
+      <Text size='xs' color='secondary'>
+        What it is for — a short, decorative line carrying the personality
+      </Text>
+      <span className='font-pixel text-base text-text-primary'>No attacks detected</span>
+    </VStack>
+
+    <VStack gap={12} align='start'>
+      <Text size='xs' color='secondary'>
+        What it is not for — running copy belongs to the text ramp
+      </Text>
+      <Text size='sm' color='secondary' className='max-w-100'>
+        Wallarm did not find any attacks in the selected period. Try widening the time range, or
+        check that the filters above are not excluding traffic you expect to see.
+      </Text>
+    </VStack>
+  </VStack>
+);

package/dist/theme/typography.css

@@ -79,4 +79,17 @@
     --leading-7xl: 72px;
     --leading-8xl: 96px;
     --leading-9xl: 128px;
+
+    /* Optical tracking for the heading ramp. Tightens as the size grows, because
+       large type sets too loose at the spacing Geist is drawn for.
+       Zero below 20px system-wide: at UI sizes the font's own spacing is already
+       right, and negative tracking there costs legibility. Steps sm/md/lg get no
+       token on purpose — they use tracking-normal. */
+    --tracking-xl: -0.005em;
+    --tracking-2xl: -0.01em;
+    --tracking-3xl: -0.01em;
+    --tracking-4xl: -0.015em;
+    --tracking-5xl: -0.015em;
+    --tracking-6xl: -0.02em;
+    --tracking-7xl: -0.02em;
 }

package/package.json

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