{
  "version": "0.2.0-preview.1",
  "content_digest": "70ac710f4d22dce040e7ac593379ba8aca9dcb59a0b9c0f839819cae0e2bb721",
  "status": "preview",
  "authority": {
    "repository": "cloakedinc/design",
    "path": "packages/design-system",
    "catalog": "packages/design-system/catalog.json",
    "status": "preview"
  },
  "provenance": {
    "repo": "cloakedinc/automation",
    "commit": "f96f416e1c3bfbfaffcd155a88b87b18b8bb25f1",
    "path": "packages/design-system",
    "imported_spec_status": "approved"
  },
  "adaptations": [
    {
      "id": "button-content-gap",
      "status": "preview",
      "description": "Use the specification's 4px content gap instead of the inherited 8px implementation gap."
    },
    {
      "id": "keyboard-focus",
      "status": "preview",
      "description": "Add visible Button and Input keyboard focus and an overridable inset focus default for shared button resets, including FAQ cards and ListItem rows."
    },
    {
      "id": "supporting-text-contrast",
      "status": "preview",
      "description": "Map light secondary text to the existing grey-04-strong primitive for readable helper text on white and cream."
    },
    {
      "id": "danger-text-contrast",
      "status": "preview",
      "description": "Separate readable danger text/borders from destructive fills; preserve the primary danger-button fill and label pair."
    },
    {
      "id": "preview-status",
      "status": "preview",
      "description": "Local components, specs and token adaptations await human sign-off; upstream approved status is provenance only."
    },
    {
      "id": "motion-comparison-accessibility",
      "status": "preview",
      "description": "Preserve the original MotionShowcase comparisons while requiring explicit replay, responding to live reduced-motion changes, and keeping duration tracks usable on small screens."
    },
    {
      "id": "list-item-ownership",
      "status": "preview",
      "description": "List owns listitem wrappers for its content rows, while section labels stay outside the row count and standalone rows retain their existing semantics."
    },
    {
      "id": "card-delta-text-contrast",
      "status": "preview",
      "description": "Mix Card.Delta foregrounds from 60% existing tone solid and 40% primary text for readable contrast in both themes; preserve the four original tone fills."
    },
    {
      "id": "carousel-keyboard-access",
      "status": "preview",
      "description": "Keep all native-scrolling carousel slide controls exposed to assistive technology and keyboard navigation; pause autoplay while focus is inside the carousel."
    }
  ],
  "id": "spacing",
  "name": "Spacing",
  "summary": "Use space to explain what belongs together. Compare the scale and adjust real padding and gaps in a small composition.",
  "demo": "foundation-spacing",
  "guidance": [
    {
      "title": "Make relationships visible",
      "body": "Keep closely related content together and give separate groups more space. Choose from the scale based on the actual content and layout; the example is not a new component spacing contract."
    },
    {
      "title": "Distinguish inset from gap",
      "body": "Padding separates content from its container. Gap separates siblings. Adjust them independently to see how both affect density and hierarchy."
    },
    {
      "title": "Keep runtime insets separate",
      "body": "Safe-area and host-chrome tokens depend on the device and consuming application. Their env() and max() expressions remain in the reference; they are not fixed steps in the spacing scale. Disabled opacity is also a separate behavior token."
    }
  ],
  "source": "packages/design-system/foundations.json",
  "tokens": [
    {
      "name": "--cds-space-4",
      "value": "4px",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/spacing.css"
    },
    {
      "name": "--cds-space-8",
      "value": "8px",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/spacing.css"
    },
    {
      "name": "--cds-space-12",
      "value": "12px",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/spacing.css"
    },
    {
      "name": "--cds-space-16",
      "value": "16px",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/spacing.css"
    },
    {
      "name": "--cds-space-20",
      "value": "20px",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/spacing.css"
    },
    {
      "name": "--cds-space-24",
      "value": "24px",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/spacing.css"
    },
    {
      "name": "--cds-space-32",
      "value": "32px",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/spacing.css"
    },
    {
      "name": "--cds-space-40",
      "value": "40px",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/spacing.css"
    },
    {
      "name": "--cds-space-48",
      "value": "48px",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/spacing.css"
    },
    {
      "name": "--cds-space-56",
      "value": "56px",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/spacing.css"
    },
    {
      "name": "--cds-space-64",
      "value": "64px",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/spacing.css"
    },
    {
      "name": "--cds-space-72",
      "value": "72px",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/spacing.css"
    },
    {
      "name": "--cds-space-80",
      "value": "80px",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/spacing.css"
    },
    {
      "name": "--cds-space-96",
      "value": "96px",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/spacing.css"
    },
    {
      "name": "--cds-space-120",
      "value": "120px",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/spacing.css"
    },
    {
      "name": "--cds-space-240",
      "value": "240px",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/spacing.css"
    },
    {
      "name": "--cds-page-padding-x",
      "value": "var(--cds-space-20)",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/spacing.css"
    },
    {
      "name": "--cds-safe-area-top",
      "value": "env(safe-area-inset-top, 0px)",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/spacing.css"
    },
    {
      "name": "--cds-safe-area-bottom",
      "value": "env(safe-area-inset-bottom, 0px)",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/spacing.css"
    },
    {
      "name": "--cds-safe-area-top-chrome",
      "value": "0px",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/spacing.css"
    },
    {
      "name": "--cds-top-chrome-frost",
      "value": "0",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/spacing.css"
    },
    {
      "name": "--cds-safe-area-top-overlay",
      "value": "max(var(--cds-safe-area-top-chrome), var(--cds-safe-area-top))",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/spacing.css"
    },
    {
      "name": "--cds-opacity-disabled",
      "value": "0.3",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/spacing.css"
    }
  ],
  "example": {
    "id": "foundation-spacing",
    "title": "Spacing",
    "source": "packages/design-system/examples/foundations/FoundationSpacing.tsx",
    "export": "FoundationSpacing",
    "components": [],
    "description": "All sixteen physical spacing steps and an editable inset and content-gap demonstration.",
    "synthetic_data": true,
    "storybook_id": "foundations-spacing--explore",
    "code": "import { useState } from 'react';\nimport { ContextCard, FoundationDetails, FoundationFrame, FoundationSelect } from './FoundationShared';\nimport { spacingSteps } from './foundation-data';\n\nexport function FoundationSpacing() {\n  const [inset, setInset] = useState('--cds-space-24');\n  const [gap, setGap] = useState('--cds-space-16');\n  const practicalSteps = spacingSteps.filter(token => Number.parseFloat(token.value) <= 48);\n  return <FoundationFrame controls={<>\n    <FoundationSelect label=\"Card inset\" value={inset} options={practicalSteps} onChange={setInset} />\n    <FoundationSelect label=\"Content gap\" value={gap} options={practicalSteps} onChange={setGap} />\n  </>} code={`const cardStyle = {\\n  display: 'grid',\\n  padding: 'var(${inset})',\\n  gap: 'var(${gap})',\\n};`}>\n    <div className=\"foundation-spacing-stage\">\n      <span className=\"demo-eyebrow\">Space creates relationships</span>\n      <ContextCard testId=\"spacing-card\" style={{ padding: `var(${inset})`, gap: `var(${gap})` }} />\n      <p className=\"foundation-caption\">The tinted inset belongs to the container. The gaps separate the content inside it.</p>\n    </div>\n    <FoundationDetails label=\"See the complete 16-step spacing scale\">\n      <div className=\"foundation-space-scale\" tabIndex={0} role=\"region\" aria-label=\"Complete spacing scale\">{spacingSteps.map(token => <div key={token.name} className=\"foundation-space-step\" data-testid=\"spacing-step\">\n        <div><code>{token.name.replace('--cds-', '')}</code><span>{token.value}</span></div>\n        <div className=\"foundation-space-track\"><span style={{ width: `var(${token.name})` }} /></div>\n      </div>)}</div>\n    </FoundationDetails>\n    <p className=\"foundation-caption\">Safe areas come from the device and host chrome. They reserve protected screen edges; they are separate from this physical spacing scale.</p>\n  </FoundationFrame>;\n}\n"
  },
  "visual_reference": {
    "stories": [
      {
        "id": "cloaked-design-system-foundations-overview--spacing",
        "name": "Spacing",
        "title": "Cloaked Design System/Foundations/Overview",
        "exportName": "Spacing",
        "source_path": "packages/design-system/src/foundations/Foundations.stories.tsx",
        "source_digest": "02b89302834e3cdcee9f8e4762838a3baade84a5ffb336904f0df924bb29506e",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-foundations-overview--spacing&viewMode=story"
      },
      {
        "id": "cloaked-design-system-foundations-overview--sizing",
        "name": "Sizing",
        "title": "Cloaked Design System/Foundations/Overview",
        "exportName": "Sizing",
        "source_path": "packages/design-system/src/foundations/Foundations.stories.tsx",
        "source_digest": "02b89302834e3cdcee9f8e4762838a3baade84a5ffb336904f0df924bb29506e",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-foundations-overview--sizing&viewMode=story"
      }
    ]
  },
  "links": {
    "human": "/spacing",
    "json": "/data/foundations/spacing.json"
  }
}