{
  "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": "surfaces",
  "name": "Surfaces",
  "summary": "Build a clear sense of place. Explore page, content, input, and inverse surfaces in one readable composition.",
  "demo": "foundation-surfaces",
  "guidance": [
    {
      "title": "Give the container a purpose",
      "body": "Use the page as the foundation and a surface to group related content. Add another container only when it communicates a separate responsibility."
    },
    {
      "title": "Choose the foreground as well",
      "body": "Text suited to the page can disappear on an inverse or status surface. Use the appropriate semantic foreground and verify labels, helper text, and controls together."
    },
    {
      "title": "Let the theme resolve the value",
      "body": "Keep the role name when changing themes. The reference preserves each light and dark definition so the same layout can adapt without replacing tokens with raw colors."
    }
  ],
  "source": "packages/design-system/foundations.json",
  "tokens": [
    {
      "name": "--cds-bg-page",
      "value": "var(--cds-color-grey-01)",
      "selector": "[data-theme='light']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    },
    {
      "name": "--cds-bg-dashboard",
      "value": "var(--cds-color-grey-01)",
      "selector": "[data-theme='light']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    },
    {
      "name": "--cds-bg-surface",
      "value": "var(--cds-color-white)",
      "selector": "[data-theme='light']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    },
    {
      "name": "--cds-bg-ai-input",
      "value": "var(--cds-color-black)",
      "selector": "[data-theme='light']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    },
    {
      "name": "--cds-bg-bold",
      "value": "var(--cds-color-black)",
      "selector": "[data-theme='light']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    },
    {
      "name": "--cds-bg-status-success",
      "value": "var(--cds-status-success-subtle)",
      "selector": "[data-theme='light']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    },
    {
      "name": "--cds-bg-status-warning",
      "value": "var(--cds-status-warning-subtle)",
      "selector": "[data-theme='light']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    },
    {
      "name": "--cds-bg-status-danger",
      "value": "var(--cds-status-danger-subtle)",
      "selector": "[data-theme='light']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    },
    {
      "name": "--cds-bg-status-info",
      "value": "var(--cds-status-info-subtle)",
      "selector": "[data-theme='light']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    },
    {
      "name": "--cds-bg-status-neutral",
      "value": "var(--cds-color-grey-01)",
      "selector": "[data-theme='light']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    },
    {
      "name": "--cds-bg-inverse",
      "value": "var(--cds-color-black)",
      "selector": "[data-theme='light']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    },
    {
      "name": "--cds-bg-inverse-elevated",
      "value": "var(--cds-color-grey-06)",
      "selector": "[data-theme='light']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    },
    {
      "name": "--cds-bg-subtle",
      "value": "var(--cds-color-grey-01)",
      "selector": "[data-theme='light']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    },
    {
      "name": "--cds-bg-subtle-inverse",
      "value": "var(--cds-color-white-15)",
      "selector": "[data-theme='light']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    },
    {
      "name": "--cds-bg-page",
      "value": "var(--cds-color-grey-07)",
      "selector": "[data-theme='dark']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    },
    {
      "name": "--cds-bg-dashboard",
      "value": "var(--cds-color-black)",
      "selector": "[data-theme='dark']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    },
    {
      "name": "--cds-bg-surface",
      "value": "var(--cds-color-grey-06)",
      "selector": "[data-theme='dark']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    },
    {
      "name": "--cds-bg-ai-input",
      "value": "var(--cds-color-black)",
      "selector": "[data-theme='dark']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    },
    {
      "name": "--cds-bg-bold",
      "value": "var(--cds-color-white)",
      "selector": "[data-theme='dark']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    },
    {
      "name": "--cds-bg-status-success",
      "value": "var(--cds-status-success-solid)",
      "selector": "[data-theme='dark']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    },
    {
      "name": "--cds-bg-status-warning",
      "value": "var(--cds-status-warning-solid)",
      "selector": "[data-theme='dark']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    },
    {
      "name": "--cds-bg-status-danger",
      "value": "var(--cds-status-danger-solid)",
      "selector": "[data-theme='dark']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    },
    {
      "name": "--cds-bg-status-info",
      "value": "var(--cds-status-info-solid)",
      "selector": "[data-theme='dark']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    },
    {
      "name": "--cds-bg-status-neutral",
      "value": "var(--cds-color-grey-05)",
      "selector": "[data-theme='dark']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    },
    {
      "name": "--cds-bg-inverse",
      "value": "var(--cds-color-black)",
      "selector": "[data-theme='dark']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    },
    {
      "name": "--cds-bg-inverse-elevated",
      "value": "var(--cds-color-grey-06)",
      "selector": "[data-theme='dark']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    },
    {
      "name": "--cds-bg-subtle",
      "value": "var(--cds-color-white-05)",
      "selector": "[data-theme='dark']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    },
    {
      "name": "--cds-bg-subtle-inverse",
      "value": "var(--cds-color-white-15)",
      "selector": "[data-theme='dark']",
      "source_path": "packages/design-system/src/tokens/themes.css"
    }
  ],
  "example": {
    "id": "foundation-surfaces",
    "title": "Surfaces",
    "source": "packages/design-system/examples/foundations/FoundationSurfaces.tsx",
    "export": "FoundationSurfaces",
    "components": [
      "field",
      "input"
    ],
    "description": "Theme-aware page, card, and real Input layers plus an appropriately paired inverse surface.",
    "synthetic_data": true,
    "storybook_id": "foundations-surfaces--explore",
    "code": "import { useState } from 'react';\nimport { Field, Input, Text } from '../../src';\nimport { FoundationFrame } from './FoundationShared';\n\nexport function FoundationSurfaces() {\n  const [name, setName] = useState('Shopping');\n  return <FoundationFrame code={`const page = { background: 'var(--cds-bg-page)', color: 'var(--cds-text-primary)' };\\nconst card = { background: 'var(--cds-bg-surface)' };\\nconst inverse = { background: 'var(--cds-bg-inverse)', color: 'var(--cds-text-inverse)' };`}>\n    <div className=\"foundation-surface-page\">\n      <code>--cds-bg-page</code>\n      <div className=\"foundation-surface-card\">\n        <code>--cds-bg-surface</code>\n        <Text as=\"h2\" variant=\"h3-serif\">Give your address a home.</Text>\n        <Field label=\"Address name\" helperText=\"A useful label makes it easier to find later.\">\n          <Input value={name} onChange={setName} placeholder=\"Shopping\" autoComplete=\"off\" />\n        </Field>\n        <code>Input → --cds-input-container</code>\n      </div>\n    </div>\n    <div className=\"foundation-surface-inverse\" data-testid=\"surface-inverse\" style={{ background: 'var(--cds-bg-inverse)', color: 'var(--cds-text-inverse)' }}>\n      <div><span className=\"demo-eyebrow\">A deliberate change of context</span><Text as=\"h2\" variant=\"h3-serif\">Private feels different.</Text></div>\n      <code>--cds-bg-inverse + --cds-text-inverse</code>\n    </div>\n    <p className=\"foundation-caption\">Page, card, and input surfaces adapt to the selected theme. An inverse surface stays dark and keeps its own light foreground in both themes.</p>\n  </FoundationFrame>;\n}\n"
  },
  "visual_reference": {
    "stories": [
      {
        "id": "cloaked-design-system-foundations-overview--theme-surfaces",
        "name": "Theme Surfaces",
        "title": "Cloaked Design System/Foundations/Overview",
        "exportName": "ThemeSurfaces",
        "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--theme-surfaces&viewMode=story"
      },
      {
        "id": "cloaked-design-system-foundations-overview--effects",
        "name": "Effects",
        "title": "Cloaked Design System/Foundations/Overview",
        "exportName": "Effects",
        "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--effects&viewMode=story"
      }
    ]
  },
  "links": {
    "human": "/surfaces",
    "json": "/data/foundations/surfaces.json"
  }
}