@discourser/design-system 0.22.0 → 0.22.2

package/src/stories/foundations/Motion.stories.tsx

@@ -0,0 +1,306 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { css } from 'styled-system/css';
+
+const meta = {
+  title: 'Foundations/Motion',
+  parameters: { layout: 'padded' },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ── Pre-declared css() calls — Panda CSS statically extracts these ─────────────
+// (dynamic template literals cannot be extracted; explicit literals are required)
+
+const durationBox: Record<string, string> = {
+  instant: css({
+    transitionDuration: 'instant',
+    transitionProperty: 'background',
+    transitionTimingFunction: 'standard',
+    bg: 'neutral.3',
+  }),
+  fast: css({
+    transitionDuration: 'fast',
+    transitionProperty: 'background',
+    transitionTimingFunction: 'standard',
+    bg: 'neutral.3',
+  }),
+  normal: css({
+    transitionDuration: 'normal',
+    transitionProperty: 'background',
+    transitionTimingFunction: 'standard',
+    bg: 'neutral.3',
+  }),
+  slow: css({
+    transitionDuration: 'slow',
+    transitionProperty: 'background',
+    transitionTimingFunction: 'standard',
+    bg: 'neutral.3',
+  }),
+  slower: css({
+    transitionDuration: 'slower',
+    transitionProperty: 'background',
+    transitionTimingFunction: 'standard',
+    bg: 'neutral.3',
+  }),
+};
+
+const durationBoxHover: Record<string, string> = {
+  instant: css({ _hover: { bg: 'primary.9' } }),
+  fast: css({ _hover: { bg: 'primary.9' } }),
+  normal: css({ _hover: { bg: 'primary.9' } }),
+  slow: css({ _hover: { bg: 'primary.9' } }),
+  slower: css({ _hover: { bg: 'primary.9' } }),
+};
+
+const easingBox: Record<string, string> = {
+  standard: css({
+    transitionTimingFunction: 'standard',
+    transitionDuration: 'normal',
+    transitionProperty: 'transform',
+    bg: 'primary.subtle.bg',
+    borderColor: 'primary.outline.border',
+  }),
+  standardDecelerate: css({
+    transitionTimingFunction: 'standardDecelerate',
+    transitionDuration: 'normal',
+    transitionProperty: 'transform',
+    bg: 'primary.subtle.bg',
+    borderColor: 'primary.outline.border',
+  }),
+  standardAccelerate: css({
+    transitionTimingFunction: 'standardAccelerate',
+    transitionDuration: 'normal',
+    transitionProperty: 'transform',
+    bg: 'primary.subtle.bg',
+    borderColor: 'primary.outline.border',
+  }),
+  emphasized: css({
+    transitionTimingFunction: 'emphasized',
+    transitionDuration: 'normal',
+    transitionProperty: 'transform',
+    bg: 'primary.subtle.bg',
+    borderColor: 'primary.outline.border',
+  }),
+  emphasizedDecelerate: css({
+    transitionTimingFunction: 'emphasizedDecelerate',
+    transitionDuration: 'normal',
+    transitionProperty: 'transform',
+    bg: 'primary.subtle.bg',
+    borderColor: 'primary.outline.border',
+  }),
+  emphasizedAccelerate: css({
+    transitionTimingFunction: 'emphasizedAccelerate',
+    transitionDuration: 'normal',
+    transitionProperty: 'transform',
+    bg: 'primary.subtle.bg',
+    borderColor: 'primary.outline.border',
+  }),
+};
+
+const easingBoxHover: Record<string, string> = {
+  standard: css({ _hover: { transform: 'translateX(40px)' } }),
+  standardDecelerate: css({ _hover: { transform: 'translateX(40px)' } }),
+  standardAccelerate: css({ _hover: { transform: 'translateX(40px)' } }),
+  emphasized: css({ _hover: { transform: 'translateX(40px)' } }),
+  emphasizedDecelerate: css({ _hover: { transform: 'translateX(40px)' } }),
+  emphasizedAccelerate: css({ _hover: { transform: 'translateX(40px)' } }),
+};
+
+// ── Data ────────────────────────────────────────────────────────────────────────
+
+const DURATIONS: { token: string; value: string }[] = [
+  { token: 'instant', value: '0ms' },
+  { token: 'fast', value: '100ms' },
+  { token: 'normal', value: '200ms' },
+  { token: 'slow', value: '300ms' },
+  { token: 'slower', value: '500ms' },
+];
+
+const EASINGS: { token: string }[] = [
+  { token: 'standard' },
+  { token: 'standardDecelerate' },
+  { token: 'standardAccelerate' },
+  { token: 'emphasized' },
+  { token: 'emphasizedDecelerate' },
+  { token: 'emphasizedAccelerate' },
+];
+
+// ── Shared helpers ──────────────────────────────────────────────────────────────
+
+function SectionHeading({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) {
+  return (
+    <div style={{ marginBottom: '24px' }}>
+      <h2
+        style={{
+          fontSize: '18px',
+          fontWeight: '600',
+          margin: '0 0 8px',
+          fontFamily: 'Inter, system-ui, sans-serif',
+        }}
+      >
+        {title}
+      </h2>
+      <p
+        style={{ fontSize: '14px', color: '#666', margin: 0, lineHeight: 1.5 }}
+      >
+        {description}
+      </p>
+    </div>
+  );
+}
+
+// ── Story 1: Duration Tokens ───────────────────────────────────────────────────
+
+export const DurationTokens: Story = {
+  name: '1 · Duration Tokens',
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+      <SectionHeading
+        title="Duration Tokens"
+        description="Controls how long a transition takes. Hover each box to see the background transition from neutral to primary. All boxes use the same standard easing — only the duration changes."
+      />
+      <div
+        style={{
+          display: 'flex',
+          gap: '16px',
+          flexWrap: 'wrap',
+          alignItems: 'flex-start',
+        }}
+      >
+        {DURATIONS.map(({ token, value }) => (
+          <div
+            key={token}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '8px',
+            }}
+          >
+            <div
+              className={`${durationBox[token]} ${durationBoxHover[token]}`}
+              style={{
+                width: '80px',
+                height: '80px',
+                borderRadius: '8px',
+                border: '1px solid rgba(0,0,0,0.08)',
+                flexShrink: 0,
+              }}
+              title={`transitionDuration: ${token}`}
+            />
+            <span
+              style={{
+                fontSize: '11px',
+                fontFamily: 'monospace',
+                color: '#444',
+                textAlign: 'center',
+                lineHeight: 1.3,
+              }}
+            >
+              {token}
+            </span>
+            <span
+              style={{
+                fontSize: '10px',
+                fontFamily: 'monospace',
+                color: '#888',
+                textAlign: 'center',
+              }}
+            >
+              {value}
+            </span>
+          </div>
+        ))}
+      </div>
+      <p
+        style={{
+          fontSize: '12px',
+          color: '#999',
+          fontFamily: 'Inter, system-ui, sans-serif',
+          margin: 0,
+        }}
+      >
+        Note: <code style={{ fontFamily: 'monospace' }}>instant (0ms)</code>{' '}
+        produces no visible transition.
+      </p>
+    </div>
+  ),
+};
+
+// ── Story 2: Easing Tokens ─────────────────────────────────────────────────────
+
+export const EasingTokens: Story = {
+  name: '2 · Easing Tokens',
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+      <SectionHeading
+        title="Easing Tokens"
+        description="Controls the acceleration curve of a transition. All demos use normal (200ms) duration. Hover each box to see it translate — the same distance in the same time, but with a different feel."
+      />
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(2, 200px)',
+          gap: '20px 32px',
+        }}
+      >
+        {EASINGS.map(({ token }) => (
+          <div
+            key={token}
+            style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
+          >
+            <div
+              style={{
+                overflow: 'hidden',
+                borderRadius: '8px',
+                padding: '8px',
+                background: 'rgba(0,0,0,0.03)',
+              }}
+            >
+              <div
+                className={`${easingBox[token]} ${easingBoxHover[token]}`}
+                style={{
+                  width: '72px',
+                  height: '52px',
+                  borderRadius: '6px',
+                  border: '1px solid',
+                  flexShrink: 0,
+                }}
+                title={`transitionTimingFunction: ${token}`}
+              />
+            </div>
+            <span
+              style={{
+                fontSize: '11px',
+                fontFamily: 'monospace',
+                color: '#444',
+                lineHeight: 1.3,
+              }}
+            >
+              {token}
+            </span>
+          </div>
+        ))}
+      </div>
+      <p
+        style={{
+          fontSize: '12px',
+          color: '#888',
+          fontFamily: 'Inter, system-ui, sans-serif',
+          margin: 0,
+        }}
+      >
+        All demos use{' '}
+        <code style={{ fontFamily: 'monospace' }}>normal (200ms)</code>. Hover
+        each box to compare easing curves.
+      </p>
+    </div>
+  ),
+};

package/src/stories/foundations/Shape.stories.tsx

@@ -0,0 +1,159 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { css } from 'styled-system/css';
+
+const meta = {
+  title: 'Foundations/Shape',
+  parameters: { layout: 'padded' },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ── Pre-declared css() calls — Panda CSS statically extracts these ─────────────
+// (dynamic template literals cannot be extracted; explicit literals are required)
+
+const radiusBox: Record<string, string> = {
+  none: css({
+    borderRadius: 'none',
+    bg: 'primary.subtle.bg',
+    borderColor: 'primary.outline.border',
+  }),
+  extraSmall: css({
+    borderRadius: 'extraSmall',
+    bg: 'primary.subtle.bg',
+    borderColor: 'primary.outline.border',
+  }),
+  small: css({
+    borderRadius: 'small',
+    bg: 'primary.subtle.bg',
+    borderColor: 'primary.outline.border',
+  }),
+  medium: css({
+    borderRadius: 'medium',
+    bg: 'primary.subtle.bg',
+    borderColor: 'primary.outline.border',
+  }),
+  large: css({
+    borderRadius: 'large',
+    bg: 'primary.subtle.bg',
+    borderColor: 'primary.outline.border',
+  }),
+  extraLarge: css({
+    borderRadius: 'extraLarge',
+    bg: 'primary.subtle.bg',
+    borderColor: 'primary.outline.border',
+  }),
+  full: css({
+    borderRadius: 'full',
+    bg: 'primary.subtle.bg',
+    borderColor: 'primary.outline.border',
+  }),
+};
+
+// ── Data ────────────────────────────────────────────────────────────────────────
+
+const RADII: { token: string; value: string; wide?: boolean }[] = [
+  { token: 'none', value: '0px' },
+  { token: 'extraSmall', value: '4px' },
+  { token: 'small', value: '8px' },
+  { token: 'medium', value: '12px' },
+  { token: 'large', value: '16px' },
+  { token: 'extraLarge', value: '28px' },
+  { token: 'full', value: '9999px', wide: true },
+];
+
+// ── Shared helpers ──────────────────────────────────────────────────────────────
+
+function SectionHeading({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) {
+  return (
+    <div style={{ marginBottom: '24px' }}>
+      <h2
+        style={{
+          fontSize: '18px',
+          fontWeight: '600',
+          margin: '0 0 8px',
+          fontFamily: 'Inter, system-ui, sans-serif',
+        }}
+      >
+        {title}
+      </h2>
+      <p
+        style={{ fontSize: '14px', color: '#666', margin: 0, lineHeight: 1.5 }}
+      >
+        {description}
+      </p>
+    </div>
+  );
+}
+
+// ── Story 1: Radii Tokens ──────────────────────────────────────────────────────
+
+export const RadiiTokens: Story = {
+  name: '1 · Border Radius Tokens',
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+      <SectionHeading
+        title="Border Radius Tokens"
+        description="Seven radii tokens from sharp corners to fully circular. Use these in recipes via borderRadius token names — never raw pixel values."
+      />
+      <div
+        style={{
+          display: 'flex',
+          gap: '16px',
+          flexWrap: 'wrap',
+          alignItems: 'flex-start',
+        }}
+      >
+        {RADII.map(({ token, value, wide }) => (
+          <div
+            key={token}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '8px',
+            }}
+          >
+            <div
+              className={radiusBox[token]}
+              style={{
+                width: wide ? '120px' : '72px',
+                height: wide ? '52px' : '72px',
+                border: '1px solid',
+                flexShrink: 0,
+              }}
+              title={`borderRadius: ${token}`}
+            />
+            <span
+              style={{
+                fontSize: '11px',
+                fontFamily: 'monospace',
+                color: '#444',
+                textAlign: 'center',
+                lineHeight: 1.3,
+              }}
+            >
+              {token}
+            </span>
+            <span
+              style={{
+                fontSize: '10px',
+                fontFamily: 'monospace',
+                color: '#888',
+                textAlign: 'center',
+              }}
+            >
+              {value}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+};

package/src/stories/foundations/Spacing.mdx

@@ -1,6 +1,5 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import { SpacingBox } from './components/SpacingBox';
-import { material3Language } from '../../languages/material3.language';
 
 <Meta title="Foundations/Spacing" />
 
@@ -13,15 +12,15 @@ The Discourser Design System uses a consistent spacing scale based on an 8-point
 Our spacing scale ranges from `none` (0px) to `xxxl` (64px), with incremental steps that follow a logical progression.
 
 <div style={{ marginTop: '32px', marginBottom: '48px' }}>
-  <SpacingBox name="none" value={material3Language.spacing.none} />
-  <SpacingBox name="xxs" value={material3Language.spacing.xxs} />
-  <SpacingBox name="xs" value={material3Language.spacing.xs} />
-  <SpacingBox name="sm" value={material3Language.spacing.sm} />
-  <SpacingBox name="md" value={material3Language.spacing.md} />
-  <SpacingBox name="lg" value={material3Language.spacing.lg} />
-  <SpacingBox name="xl" value={material3Language.spacing.xl} />
-  <SpacingBox name="xxl" value={material3Language.spacing.xxl} />
-  <SpacingBox name="xxxl" value={material3Language.spacing.xxxl} />
+  <SpacingBox name="none" value="0px" />
+  <SpacingBox name="xxs"  value="2px" />
+  <SpacingBox name="xs"   value="4px" />
+  <SpacingBox name="sm"   value="8px" />
+  <SpacingBox name="md"   value="16px" />
+  <SpacingBox name="lg"   value="24px" />
+  <SpacingBox name="xl"   value="32px" />
+  <SpacingBox name="xxl"  value="48px" />
+  <SpacingBox name="xxxl" value="64px" />
 </div>
 
 ---
@@ -30,15 +29,15 @@ Our spacing scale ranges from `none` (0px) to `xxxl` (64px), with incremental st
 
 | Token | Value | Pixels | Use Case |
 |-------|-------|--------|----------|
-| `none` | {material3Language.spacing.none} | 0px | Reset spacing, remove gaps |
-| `xxs` | {material3Language.spacing.xxs} | 2px | Minimal gaps, fine-tuning |
-| `xs` | {material3Language.spacing.xs} | 4px | Tight spacing within components |
-| `sm` | {material3Language.spacing.sm} | 8px | Component internal spacing |
-| `md` | {material3Language.spacing.md} | 16px | Default spacing, component gaps |
-| `lg` | {material3Language.spacing.lg} | 24px | Section spacing, card padding |
-| `xl` | {material3Language.spacing.xl} | 32px | Large section breaks |
-| `xxl` | {material3Language.spacing.xxl} | 48px | Major section dividers |
-| `xxxl` | {material3Language.spacing.xxxl} | 64px | Page-level spacing |
+| `none` | 0px | 0px | Reset spacing, remove gaps |
+| `xxs` | 2px | 2px | Minimal gaps, fine-tuning |
+| `xs` | 4px | 4px | Tight spacing within components |
+| `sm` | 8px | 8px | Component internal spacing |
+| `md` | 16px | 16px | Default spacing, component gaps |
+| `lg` | 24px | 24px | Section spacing, card padding |
+| `xl` | 32px | 32px | Large section breaks |
+| `xxl` | 48px | 48px | Major section dividers |
+| `xxxl` | 64px | 64px | Page-level spacing |
 
 ---
 
@@ -162,8 +161,8 @@ const flexStyle = css({
 <div style={{
   display: 'flex',
   flexDirection: 'column',
-  gap: material3Language.spacing.sm,
-  padding: material3Language.spacing.md,
+  gap: '8px',
+  padding: '16px',
   backgroundColor: '#f5f5f5',
   borderRadius: '8px',
   marginBottom: '24px'
@@ -184,8 +183,8 @@ const flexStyle = css({
 <div style={{
   display: 'flex',
   flexDirection: 'column',
-  gap: material3Language.spacing.md,
-  padding: material3Language.spacing.lg,
+  gap: '16px',
+  padding: '24px',
   backgroundColor: '#f5f5f5',
   borderRadius: '8px',
   marginBottom: '24px'
@@ -206,8 +205,8 @@ const flexStyle = css({
 <div style={{
   display: 'flex',
   flexDirection: 'column',
-  gap: material3Language.spacing.lg,
-  padding: material3Language.spacing.xl,
+  gap: '24px',
+  padding: '32px',
   backgroundColor: '#f5f5f5',
   borderRadius: '8px'
 }}>