{
"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": "icontile",
"name": "IconTile",
"category": "Primitives / Iconography",
"summary": "A design-system glyph centered in a circular semantic tone for status, brand, or product-feature identity.",
"documentation": {
"summary": "A design-system glyph centered in a circular semantic tone for status, brand, or product-feature identity.",
"guidance": [
{
"heading": "Overview",
"body": "A glyph inside a semantic tone circle — the single way to show \"an icon in a colored circle.\"\n`tone` carries the meaning. Reach for `Avatar` instead when the mark represents a person or account\nidentity."
},
{
"heading": "Use when",
"body": "`tone` spans three axes; pick the one whose meaning matches the category the icon stands for.\n\n`size` sets both the circle and the glyph (`sm` 32 · `md` 40 · `lg` 48). Omit `label` for decorative\ntiles — the tile is then `aria-hidden`."
},
{
"heading": "Tones",
"body": "Every `tone` across all three axes."
}
],
"usage": [
{
"variant": "neutral",
"use": "A non-semantic mark on the bold surface — the default when no status or category applies.",
"avoid": "Anything with an outcome or feature meaning — use a status or feature tone.",
"axis": "Tone"
},
{
"variant": "info · success · warning · danger",
"use": "Outcome markers — a verified check (`success`), a risk (`danger`), a caution (`warning`), a note (`info`).",
"avoid": "Feature branding — those map to the feature tones below.",
"axis": "Tone"
},
{
"variant": "brand",
"use": "The Cloaked accent, for a primary brand affordance. At most one prominent brand mark per screen.",
"avoid": "Routine list icons, which would dilute the accent — use neutral or a feature tone.",
"axis": "Tone"
},
{
"variant": "monitoring · guard · identity",
"use": "Product-feature identity — the only tones used directly in app code today (FeedCTACard category tiles).",
"avoid": "A generic mark with no feature association — use `neutral`.",
"axis": "Tone"
}
],
"examples": [],
"source": "packages/design-system/src/components/primitives/IconTile/IconTile.mdx",
"status": "local-preview",
"note": "Guidance is read from local documentation, originally imported from the frozen source. Platform assertions in guidance are not parity verification."
},
"source": {
"path": "packages/design-system/src/components/primitives/IconTile/IconTile.tsx",
"code": "import React from 'react';\nimport { cn } from '../../../utilities';\nimport { Glyph, type GlyphName } from '../Glyph/Glyph';\nimport type iconTileSpec from './IconTile.spec.json';\nimport styles from './IconTile.module.scss';\n\nexport type IconTileSize = 'sm' | 'md' | 'lg';\n\n/** Semantic tone for the tile's circle. Status + brand + product-feature axes. */\nexport type IconTileTone = keyof typeof iconTileSpec.allowedDesignChoices.tones;\n\n/**\n * Props for the tone circle. Without `label` the tile is `aria-hidden`, so a tile that carries\n * meaning on its own must set one.\n */\nexport interface IconTileProps {\n /** Registered glyph name; an unregistered name leaves the circle empty. */\n glyph: GlyphName;\n /** Semantic tone driving the circle background + glyph color. */\n tone?: IconTileTone;\n /** Named size tier; sets both the circle and the glyph. */\n size?: IconTileSize;\n /** Accessible label for meaningful tiles. */\n label?: string;\n className?: string;\n /** Selector on the tile ``; the glyph inside carries none. */\n testId?: string;\n}\n\n/**\n * Renders a glyph inside a semantic tone circle. The single way to show\n * \"an icon in a colored circle\" (distinct from `Avatar`, which is identity).\n */\nexport function IconTile({ glyph, tone = 'neutral', size = 'md', label, className, testId }: IconTileProps) {\n return (\n \n \n \n );\n}\n"
},
"spec": {
"$schema": "../../../specs/component-spec.schema.json",
"identity": {
"name": "IconTile",
"status": "preview",
"version": "1.0.0",
"summary": "A design-system glyph centered in a circular semantic tone for status, brand, or product-feature identity."
},
"parts": [
{
"id": "tile",
"label": "Tile",
"description": "Owns circular geometry and the selected semantic tone."
},
{
"id": "icon",
"label": "Icon",
"description": "Centers one design-system glyph at the size paired with the tile."
}
],
"allowedDesignChoices": {
"variants": {
"neutral": {
"label": "Neutral"
},
"info": {
"label": "Information"
},
"success": {
"label": "Success"
},
"warning": {
"label": "Warning"
},
"danger": {
"label": "Danger"
},
"brand": {
"label": "Brand"
},
"monitoring": {
"label": "Monitoring"
},
"guard": {
"label": "Guard"
},
"identity": {
"label": "Identity"
}
},
"sizes": {
"sm": {
"label": "Small"
},
"md": {
"label": "Medium"
},
"lg": {
"label": "Large"
}
},
"tones": {
"neutral": {
"label": "Neutral",
"description": "General-purpose bold tile without status or product-area meaning."
},
"info": {
"label": "Information",
"description": "Communicates an informational outcome."
},
"success": {
"label": "Success",
"description": "Communicates a successful outcome."
},
"warning": {
"label": "Warning",
"description": "Communicates an outcome that needs attention."
},
"danger": {
"label": "Danger",
"description": "Communicates an error or destructive outcome."
},
"brand": {
"label": "Brand",
"description": "Uses the Cloaked accent without assigning a status."
},
"monitoring": {
"label": "Monitoring",
"description": "Identifies the monitoring product area."
},
"guard": {
"label": "Guard",
"description": "Identifies the guard product area."
},
"identity": {
"label": "Identity",
"description": "Identifies the identity product area."
}
}
},
"variants": [
{
"id": "neutral",
"label": "Neutral",
"description": "General-purpose bold tile without status or product-area meaning.",
"platforms": [
"ios",
"android",
"web"
]
},
{
"id": "info",
"label": "Information",
"description": "Communicates an informational outcome.",
"platforms": [
"ios",
"android",
"web"
]
},
{
"id": "success",
"label": "Success",
"description": "Communicates a successful outcome.",
"platforms": [
"ios",
"android",
"web"
]
},
{
"id": "warning",
"label": "Warning",
"description": "Communicates an outcome that needs attention.",
"platforms": [
"ios",
"android",
"web"
]
},
{
"id": "danger",
"label": "Danger",
"description": "Communicates an error or destructive outcome.",
"platforms": [
"ios",
"android",
"web"
]
},
{
"id": "brand",
"label": "Brand",
"description": "Uses the Cloaked accent without assigning a status.",
"platforms": [
"ios",
"android",
"web"
]
},
{
"id": "monitoring",
"label": "Monitoring",
"description": "Identifies the monitoring product area.",
"platforms": [
"ios",
"android",
"web"
]
},
{
"id": "guard",
"label": "Guard",
"description": "Identifies the guard product area.",
"platforms": [
"ios",
"android",
"web"
]
},
{
"id": "identity",
"label": "Identity",
"description": "Identifies the identity product area.",
"platforms": [
"ios",
"android",
"web"
]
}
],
"sizes": [
{
"id": "sm",
"label": "Small",
"description": "32-unit tile with a 16-unit glyph."
},
{
"id": "md",
"label": "Medium",
"description": "40-unit tile with a 20-unit glyph."
},
{
"id": "lg",
"label": "Large",
"description": "48-unit tile with a 24-unit glyph."
}
],
"measurements": [
{
"id": "small-tile-size",
"label": "Small tile size",
"kind": "exact",
"token": "--cds-size-32",
"value": 32,
"unit": "px",
"appliesTo": [
"tile",
"sm"
]
},
{
"id": "medium-tile-size",
"label": "Medium tile size",
"kind": "exact",
"token": "--cds-size-40",
"value": 40,
"unit": "px",
"appliesTo": [
"tile",
"md"
]
},
{
"id": "large-tile-size",
"label": "Large tile size",
"kind": "exact",
"token": "--cds-size-48",
"value": 48,
"unit": "px",
"appliesTo": [
"tile",
"lg"
]
}
],
"layout": {
"alignment": "The glyph is centered in a circular tile.",
"flow": "The tile is an inline, non-shrinking visual.",
"notes": [
"Use Avatar instead when the circle represents a person, account, or brand identity."
]
},
"typographyAndColor": {
"typography": [
{
"label": "Adjacent label",
"description": "Compact labels composed beside or below a tile use the body-small ramp.",
"token": "--cds-type-body-small-size"
}
],
"colors": [
{
"label": "Neutral fill",
"description": "Uses the theme-aware bold surface.",
"token": "--cds-bg-bold"
},
{
"label": "Brand fill",
"description": "Uses the Cloaked brand accent.",
"token": "--cds-brand"
},
{
"label": "Information fill",
"description": "Uses the solid information status role.",
"token": "--cds-status-info-solid"
},
{
"label": "Success fill",
"description": "Uses the solid success status role.",
"token": "--cds-status-success-solid"
},
{
"label": "Warning fill",
"description": "Uses the solid warning status role.",
"token": "--cds-status-warning-solid"
},
{
"label": "Danger fill",
"description": "Uses the solid danger status role.",
"token": "--cds-status-danger-solid"
},
{
"label": "Monitoring fill",
"description": "Uses the monitoring product-area accent.",
"token": "--cds-feature-monitoring"
},
{
"label": "Guard fill",
"description": "Uses the guard product-area accent.",
"token": "--cds-feature-guard"
},
{
"label": "Identity fill",
"description": "Uses the identity product-area accent.",
"token": "--cds-feature-identity"
},
{
"label": "Tone foreground",
"description": "Uses an inverse foreground on saturated tone fills.",
"token": "--cds-text-inverse"
}
]
},
"states": [
{
"id": "decorative",
"label": "Decorative",
"description": "Has no label and is hidden from assistive technology."
},
{
"id": "meaningful",
"label": "Meaningful",
"description": "Exposes image role and a label describing the icon and tone meaning."
}
],
"behavior": [
{
"label": "Tone axes",
"description": "Choose from status outcomes, brand, or one product-feature identity; do not use feature tones as status."
},
{
"label": "Paired scale",
"description": "Change tile and glyph dimensions together through the named size."
}
],
"accessibility": [
{
"label": "Meaningful tiles",
"description": "Provide a label when the tile conveys information not repeated by adjacent copy."
},
{
"label": "Decorative tiles",
"description": "Omit the label when visible text already communicates the same meaning."
}
],
"contentAdaptation": [
{
"label": "Icon choice",
"description": "Pair each semantic tone with a glyph whose established meaning supports it."
}
],
"motionHaptics": {
"motion": [
{
"label": "No intrinsic motion",
"description": "IconTile has no animated state."
}
],
"haptics": [
{
"label": "No feedback",
"description": "IconTile is not interactive and does not request haptic feedback."
}
]
},
"platformDifferences": []
},
"spec_source": "packages/design-system/src/components/primitives/IconTile/IconTile.spec.json",
"guidance_source": {
"path": "packages/design-system/src/components/primitives/IconTile/IconTile.mdx",
"code": "import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';\nimport { ComponentSpec, UsageTable, Do, Dont, Compare } from '../../../../.storybook/blocks';\nimport * as Stories from './IconTile.stories';\nimport iconTileSpec from './IconTile.spec.json';\n\n\n\n# IconTile\n\nA glyph inside a semantic tone circle — the single way to show \"an icon in a colored circle.\"\n`tone` carries the meaning. Reach for `Avatar` instead when the mark represents a person or account\nidentity.\n\n\n\n## Use when\n\n`tone` spans three axes; pick the one whose meaning matches the category the icon stands for.\n\n\n\n`size` sets both the circle and the glyph (`sm` 32 · `md` 40 · `lg` 48). Omit `label` for decorative\ntiles — the tile is then `aria-hidden`.\n\n## Sizes\n\n\n\n## Tones\n\nEvery `tone` across all three axes.\n\n\n\n## Dark theme\n\n\n\n## Design Guidelines\n\n\n\n## Props\n\n\n"
},
"props": [
{
"name": "glyph",
"type": "\"number\" | \"info\" | \"guard\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrow-down\" | \"chevron-down\" | \"chevron-up\" | \"chevron-left\" | \"chevron-right\" | \"caret-down\" | \"caret-up\" | \"trend-up\" | \"trend-down\" | \"collapse\" | \"expand\" | \"dropdown-collapse\" | \"dropdown-expand\" | \"close\" | \"clear\" | \"menu\" | \"copy\" | \"search\" | \"add\" | \"share\" | \"phone\" | \"sim\" | \"account\" | \"family\" | \"home\" | \"wifi\" | \"cart\" | \"vpn\" | \"lock\" | \"block\" | \"timer\" | \"check\" | \"send\" | \"filter\" | \"scan\" | \"log\" | \"trash\" | \"missed\" | \"call\" | \"voicemail\" | \"sms\" | \"email\" | \"data-removal\" | \"dark-web-monitoring\" | \"cloaked-pay\" | \"cloaked-ai\" | \"sms-guard\" | \"email-guard\" | \"call-guard\" | \"card\" | \"password\" | \"bell\" | \"circle-outline\" | \"dot\" | \"settings\" | \"clock\" | \"mail\" | \"message\" | \"user\" | \"upload\"",
"declared_type": "GlyphName",
"required": true,
"description": "Registered glyph name; an unregistered name leaves the circle empty.",
"source": {
"path": "packages/design-system/src/components/primitives/IconTile/IconTile.tsx",
"line": 18
},
"values": [
"account",
"add",
"arrow-down",
"arrow-left",
"arrow-right",
"arrow-up",
"bell",
"block",
"call-guard",
"call",
"card",
"caret-down",
"caret-up",
"cart",
"check",
"chevron-down",
"chevron-left",
"chevron-right",
"chevron-up",
"circle-outline",
"clear",
"cloaked-ai",
"cloaked-pay",
"clock",
"close",
"collapse",
"copy",
"dark-web-monitoring",
"data-removal",
"dot",
"dropdown-collapse",
"dropdown-expand",
"email-guard",
"email",
"expand",
"family",
"filter",
"guard",
"home",
"info",
"lock",
"log",
"mail",
"menu",
"message",
"missed",
"number",
"password",
"phone",
"scan",
"search",
"send",
"settings",
"share",
"sim",
"sms-guard",
"sms",
"timer",
"trash",
"trend-down",
"trend-up",
"upload",
"user",
"voicemail",
"vpn",
"wifi"
],
"values_complete": true
},
{
"name": "tone",
"type": "\"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\" | \"brand\" | \"monitoring\" | \"guard\" | \"identity\" | undefined",
"declared_type": "IconTileTone",
"required": false,
"description": "Semantic tone driving the circle background + glyph color.",
"source": {
"path": "packages/design-system/src/components/primitives/IconTile/IconTile.tsx",
"line": 20
},
"values": [
"brand",
"danger",
"guard",
"identity",
"info",
"monitoring",
"neutral",
"success",
"warning"
],
"values_complete": true,
"default": "'neutral'",
"default_kind": "source-expression"
},
{
"name": "size",
"type": "IconTileSize | undefined",
"declared_type": "IconTileSize",
"required": false,
"description": "Named size tier; sets both the circle and the glyph.",
"source": {
"path": "packages/design-system/src/components/primitives/IconTile/IconTile.tsx",
"line": 22
},
"values": [
"lg",
"md",
"sm"
],
"values_complete": true,
"default": "'md'",
"default_kind": "source-expression"
},
{
"name": "label",
"type": "string | undefined",
"declared_type": "string",
"required": false,
"description": "Accessible label for meaningful tiles.",
"source": {
"path": "packages/design-system/src/components/primitives/IconTile/IconTile.tsx",
"line": 24
}
},
{
"name": "className",
"type": "string | undefined",
"declared_type": "string",
"required": false,
"description": "",
"source": {
"path": "packages/design-system/src/components/primitives/IconTile/IconTile.tsx",
"line": 25
}
},
{
"name": "testId",
"type": "string | undefined",
"declared_type": "string",
"required": false,
"description": "Selector on the tile ``; the glyph inside carries none.",
"source": {
"path": "packages/design-system/src/components/primitives/IconTile/IconTile.tsx",
"line": 27
}
}
],
"prop_shapes": {},
"examples": [],
"tokens": [
{
"name": "--cds-size-32",
"light": "32px",
"dark": "32px"
},
{
"name": "--cds-size-40",
"light": "40px",
"dark": "40px"
},
{
"name": "--cds-size-48",
"light": "48px",
"dark": "48px"
},
{
"name": "--cds-type-body-small-size",
"light": "0.875rem",
"dark": "0.875rem"
},
{
"name": "--cds-bg-bold",
"light": "#0b0b0a",
"dark": "#ffffff"
},
{
"name": "--cds-brand",
"light": "#ff550c",
"dark": "#ff550c"
},
{
"name": "--cds-status-info-solid",
"light": "#3498db",
"dark": "#3498db"
},
{
"name": "--cds-status-success-solid",
"light": "#008924",
"dark": "#008924"
},
{
"name": "--cds-status-warning-solid",
"light": "#d07d00",
"dark": "#d07d00"
},
{
"name": "--cds-status-danger-solid",
"light": "#b83100",
"dark": "#b83100"
},
{
"name": "--cds-feature-monitoring",
"light": "#62c081",
"dark": "#62c081"
},
{
"name": "--cds-feature-guard",
"light": "#2a9ae8",
"dark": "#2a9ae8"
},
{
"name": "--cds-feature-identity",
"light": "#a474ff",
"dark": "#a474ff"
},
{
"name": "--cds-text-inverse",
"light": "#ffffff",
"dark": "#ffffff"
}
],
"visual_reference": {
"stories": [
{
"id": "cloaked-design-system-primitives-iconography-icontile--playground",
"name": "Playground",
"title": "Cloaked Design System/Primitives/Iconography/IconTile",
"exportName": "Playground",
"source_path": "packages/design-system/src/components/primitives/IconTile/IconTile.stories.tsx",
"source_digest": "5659ac71d5c61e6412123df03f8b8b022d12ff4419a7af690983b81b6a8ac7af",
"status": "preview",
"local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-iconography-icontile--playground&viewMode=story"
},
{
"id": "cloaked-design-system-primitives-iconography-icontile--tone-matrix",
"name": "Tone Matrix",
"title": "Cloaked Design System/Primitives/Iconography/IconTile",
"exportName": "ToneMatrix",
"source_path": "packages/design-system/src/components/primitives/IconTile/IconTile.stories.tsx",
"source_digest": "5659ac71d5c61e6412123df03f8b8b022d12ff4419a7af690983b81b6a8ac7af",
"status": "preview",
"local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-iconography-icontile--tone-matrix&viewMode=story"
},
{
"id": "cloaked-design-system-primitives-iconography-icontile--sizes",
"name": "Sizes",
"title": "Cloaked Design System/Primitives/Iconography/IconTile",
"exportName": "Sizes",
"source_path": "packages/design-system/src/components/primitives/IconTile/IconTile.stories.tsx",
"source_digest": "5659ac71d5c61e6412123df03f8b8b022d12ff4419a7af690983b81b6a8ac7af",
"status": "preview",
"local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-iconography-icontile--sizes&viewMode=story"
},
{
"id": "cloaked-design-system-primitives-iconography-icontile--dark-theme",
"name": "Dark Theme",
"title": "Cloaked Design System/Primitives/Iconography/IconTile",
"exportName": "DarkTheme",
"source_path": "packages/design-system/src/components/primitives/IconTile/IconTile.stories.tsx",
"source_digest": "5659ac71d5c61e6412123df03f8b8b022d12ff4419a7af690983b81b6a8ac7af",
"status": "preview",
"local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-iconography-icontile--dark-theme&viewMode=story"
}
],
"name": "IconTile",
"id": "icontile",
"category": "Primitives / Iconography"
},
"stories": [
{
"id": "cloaked-design-system-primitives-iconography-icontile--playground",
"name": "Playground",
"title": "Cloaked Design System/Primitives/Iconography/IconTile",
"exportName": "Playground",
"source_path": "packages/design-system/src/components/primitives/IconTile/IconTile.stories.tsx",
"source_digest": "5659ac71d5c61e6412123df03f8b8b022d12ff4419a7af690983b81b6a8ac7af",
"status": "preview",
"local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-iconography-icontile--playground&viewMode=story"
},
{
"id": "cloaked-design-system-primitives-iconography-icontile--tone-matrix",
"name": "Tone Matrix",
"title": "Cloaked Design System/Primitives/Iconography/IconTile",
"exportName": "ToneMatrix",
"source_path": "packages/design-system/src/components/primitives/IconTile/IconTile.stories.tsx",
"source_digest": "5659ac71d5c61e6412123df03f8b8b022d12ff4419a7af690983b81b6a8ac7af",
"status": "preview",
"local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-iconography-icontile--tone-matrix&viewMode=story"
},
{
"id": "cloaked-design-system-primitives-iconography-icontile--sizes",
"name": "Sizes",
"title": "Cloaked Design System/Primitives/Iconography/IconTile",
"exportName": "Sizes",
"source_path": "packages/design-system/src/components/primitives/IconTile/IconTile.stories.tsx",
"source_digest": "5659ac71d5c61e6412123df03f8b8b022d12ff4419a7af690983b81b6a8ac7af",
"status": "preview",
"local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-iconography-icontile--sizes&viewMode=story"
},
{
"id": "cloaked-design-system-primitives-iconography-icontile--dark-theme",
"name": "Dark Theme",
"title": "Cloaked Design System/Primitives/Iconography/IconTile",
"exportName": "DarkTheme",
"source_path": "packages/design-system/src/components/primitives/IconTile/IconTile.stories.tsx",
"source_digest": "5659ac71d5c61e6412123df03f8b8b022d12ff4419a7af690983b81b6a8ac7af",
"status": "preview",
"local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-iconography-icontile--dark-theme&viewMode=story"
}
],
"stories_source": {
"path": "packages/design-system/src/components/primitives/IconTile/IconTile.stories.tsx",
"code": "import React from 'react';\nimport type { Meta, StoryObj } from '@storybook/react-vite';\nimport { HStack } from '../../layout/HStack/HStack';\nimport { VStack } from '../../layout/VStack/VStack';\nimport { Text } from '../Text/Text';\nimport { STATUS_TONES } from '../../../styles/statusTone';\nimport { FEATURE_TONES } from '../../../styles/featureTone';\nimport { selectArgType } from '../../../storybook/controlOptions';\nimport { IconTile, type IconTileSize, type IconTileTone } from './IconTile';\n\nconst ICON_TILE_TONES = [...STATUS_TONES, 'brand', ...FEATURE_TONES] as const satisfies readonly IconTileTone[];\nconst ICON_TILE_SIZES = ['sm', 'md', 'lg'] as const satisfies readonly IconTileSize[];\n\nconst meta: Meta = {\n title: 'Cloaked Design System/Primitives/Iconography/IconTile',\n component: IconTile,\n parameters: {\n a11y: { test: 'error' },\n docs: {\n description: {\n component:\n 'A glyph inside a semantic tone circle — the single way to show \"an icon in a colored ' +\n 'circle.\" Use it for category affordances (list leading icons, feature headers) where the ' +\n 'color carries meaning. Reach for `Avatar` instead when the mark represents a person or ' +\n 'account identity. The `tone` spans three axes: status outcomes, the `brand` accent, and ' +\n 'product-feature identity (monitoring / guard / identity).',\n },\n },\n },\n args: {\n glyph: 'check',\n tone: 'neutral',\n size: 'md',\n label: 'Completed',\n },\n argTypes: {\n glyph: {\n control: 'text',\n description: 'Registered glyph rendered inside the circle (a `GlyphName`).',\n },\n tone: {\n ...selectArgType(ICON_TILE_TONES),\n description: 'Semantic tone driving the circle background + glyph color (status | brand | feature).',\n },\n size: {\n ...selectArgType(ICON_TILE_SIZES),\n description: 'Named size tier; sets both the circle and the glyph (sm 32 · md 40 · lg 48).',\n },\n label: {\n control: 'text',\n description: 'Accessible label. Omit for decorative tiles — the tile is then `aria-hidden`.',\n },\n },\n};\nexport default meta;\ntype Story = StoryObj;\n\nexport const Playground: Story = {};\n\nexport const ToneMatrix: Story = {\n parameters: {\n docs: { description: { story: 'Every `tone` across all three axes: status, brand, and product-feature.' } },\n },\n render: () => (\n \n {ICON_TILE_TONES.map(tone => (\n \n \n \n {tone}\n \n \n ))}\n \n ),\n};\n\nexport const Sizes: Story = {\n parameters: {\n docs: { description: { story: 'The three size tiers at a fixed brand tone.' } },\n },\n render: () => (\n \n {ICON_TILE_SIZES.map(size => (\n \n ))}\n \n ),\n};\n\nexport const DarkTheme: Story = {\n globals: { theme: 'dark' },\n render: () => (\n \n {ICON_TILE_TONES.map(tone => (\n \n ))}\n \n ),\n};\n"
},
"links": {
"human": "/component-icontile",
"json": "/data/components/icontile.json",
"markdown": "/data/components/icontile.md",
"storybook": "/storybook/?path=/story/cloaked-design-system-primitives-iconography-icontile--playground"
},
"contract_status": "preview",
"contract_kind": "source-derived",
"approval": "required",
"api": {
"method": "typescript-type-checker",
"typescript_version": "5.9.3",
"public_export": "IconTile",
"public_path": "IconTile",
"import_path": "@cloakedinc/design-system",
"root_kind": "component",
"entrypoints": [
{
"name": "IconTile",
"signature": 1,
"visibility": "public",
"source": {
"path": "packages/design-system/src/components/primitives/IconTile/IconTile.tsx",
"line": 34
},
"props_type": "IconTileProps",
"props": [
{
"name": "glyph",
"type": "\"number\" | \"info\" | \"guard\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrow-down\" | \"chevron-down\" | \"chevron-up\" | \"chevron-left\" | \"chevron-right\" | \"caret-down\" | \"caret-up\" | \"trend-up\" | \"trend-down\" | \"collapse\" | \"expand\" | \"dropdown-collapse\" | \"dropdown-expand\" | \"close\" | \"clear\" | \"menu\" | \"copy\" | \"search\" | \"add\" | \"share\" | \"phone\" | \"sim\" | \"account\" | \"family\" | \"home\" | \"wifi\" | \"cart\" | \"vpn\" | \"lock\" | \"block\" | \"timer\" | \"check\" | \"send\" | \"filter\" | \"scan\" | \"log\" | \"trash\" | \"missed\" | \"call\" | \"voicemail\" | \"sms\" | \"email\" | \"data-removal\" | \"dark-web-monitoring\" | \"cloaked-pay\" | \"cloaked-ai\" | \"sms-guard\" | \"email-guard\" | \"call-guard\" | \"card\" | \"password\" | \"bell\" | \"circle-outline\" | \"dot\" | \"settings\" | \"clock\" | \"mail\" | \"message\" | \"user\" | \"upload\"",
"declared_type": "GlyphName",
"required": true,
"description": "Registered glyph name; an unregistered name leaves the circle empty.",
"source": {
"path": "packages/design-system/src/components/primitives/IconTile/IconTile.tsx",
"line": 18
},
"values": [
"account",
"add",
"arrow-down",
"arrow-left",
"arrow-right",
"arrow-up",
"bell",
"block",
"call-guard",
"call",
"card",
"caret-down",
"caret-up",
"cart",
"check",
"chevron-down",
"chevron-left",
"chevron-right",
"chevron-up",
"circle-outline",
"clear",
"cloaked-ai",
"cloaked-pay",
"clock",
"close",
"collapse",
"copy",
"dark-web-monitoring",
"data-removal",
"dot",
"dropdown-collapse",
"dropdown-expand",
"email-guard",
"email",
"expand",
"family",
"filter",
"guard",
"home",
"info",
"lock",
"log",
"mail",
"menu",
"message",
"missed",
"number",
"password",
"phone",
"scan",
"search",
"send",
"settings",
"share",
"sim",
"sms-guard",
"sms",
"timer",
"trash",
"trend-down",
"trend-up",
"upload",
"user",
"voicemail",
"vpn",
"wifi"
],
"values_complete": true
},
{
"name": "tone",
"type": "\"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\" | \"brand\" | \"monitoring\" | \"guard\" | \"identity\" | undefined",
"declared_type": "IconTileTone",
"required": false,
"description": "Semantic tone driving the circle background + glyph color.",
"source": {
"path": "packages/design-system/src/components/primitives/IconTile/IconTile.tsx",
"line": 20
},
"values": [
"brand",
"danger",
"guard",
"identity",
"info",
"monitoring",
"neutral",
"success",
"warning"
],
"values_complete": true,
"default": "'neutral'",
"default_kind": "source-expression"
},
{
"name": "size",
"type": "IconTileSize | undefined",
"declared_type": "IconTileSize",
"required": false,
"description": "Named size tier; sets both the circle and the glyph.",
"source": {
"path": "packages/design-system/src/components/primitives/IconTile/IconTile.tsx",
"line": 22
},
"values": [
"lg",
"md",
"sm"
],
"values_complete": true,
"default": "'md'",
"default_kind": "source-expression"
},
{
"name": "label",
"type": "string | undefined",
"declared_type": "string",
"required": false,
"description": "Accessible label for meaningful tiles.",
"source": {
"path": "packages/design-system/src/components/primitives/IconTile/IconTile.tsx",
"line": 24
}
},
{
"name": "className",
"type": "string | undefined",
"declared_type": "string",
"required": false,
"description": "",
"source": {
"path": "packages/design-system/src/components/primitives/IconTile/IconTile.tsx",
"line": 25
}
},
{
"name": "testId",
"type": "string | undefined",
"declared_type": "string",
"required": false,
"description": "Selector on the tile ``; the glyph inside carries none.",
"source": {
"path": "packages/design-system/src/components/primitives/IconTile/IconTile.tsx",
"line": 27
}
}
],
"branches": [],
"constraints": [],
"extraction_status": "extracted"
}
],
"type_sources": [
{
"path": "packages/design-system/src/components/primitives/IconTile/IconTile.tsx",
"line": 7,
"name": "IconTileSize",
"code": "export type IconTileSize = 'sm' | 'md' | 'lg';"
},
{
"path": "packages/design-system/src/components/primitives/IconTile/IconTile.tsx",
"line": 10,
"name": "IconTileTone",
"code": "export type IconTileTone = keyof typeof iconTileSpec.allowedDesignChoices.tones;"
},
{
"path": "packages/design-system/src/components/primitives/IconTile/IconTile.tsx",
"line": 16,
"name": "IconTileProps",
"code": "export interface IconTileProps {\n /** Registered glyph name; an unregistered name leaves the circle empty. */\n glyph: GlyphName;\n /** Semantic tone driving the circle background + glyph color. */\n tone?: IconTileTone;\n /** Named size tier; sets both the circle and the glyph. */\n size?: IconTileSize;\n /** Accessible label for meaningful tiles. */\n label?: string;\n className?: string;\n /** Selector on the tile ``; the glyph inside carries none. */\n testId?: string;\n}"
},
{
"path": "packages/design-system/src/types/GlyphName.ts",
"line": 10,
"name": "GLYPH_NAMES",
"code": "GLYPH_NAMES = [\n // Action\n 'arrow-left',\n 'arrow-right',\n 'arrow-up',\n 'arrow-down',\n 'chevron-down',\n 'chevron-up',\n 'chevron-left',\n 'chevron-right',\n 'caret-down',\n 'caret-up',\n // Trend lines, for a change in a figure over time. Distinct from the arrows and carets above,\n // which point at a direction without implying a measurement moved.\n 'trend-up',\n 'trend-down',\n 'collapse',\n 'expand',\n 'dropdown-collapse',\n 'dropdown-expand',\n 'close',\n 'clear',\n 'menu',\n 'copy',\n 'search',\n 'add',\n // Renders the `send` drawing; a separate name for share-sheet actions.\n 'share',\n // System\n 'phone',\n 'sim',\n 'account',\n 'family',\n 'home',\n 'wifi',\n 'cart',\n 'vpn',\n 'lock',\n 'block',\n 'timer',\n 'check',\n 'send',\n 'info',\n 'number',\n 'filter',\n 'scan',\n 'log',\n 'trash',\n // Inbox\n 'missed',\n 'call',\n 'voicemail',\n 'sms',\n 'email',\n // Feature\n 'data-removal',\n 'dark-web-monitoring',\n 'cloaked-pay',\n 'cloaked-ai',\n 'sms-guard',\n 'email-guard',\n 'call-guard',\n 'card',\n 'password',\n 'guard',\n // Legacy aliases (kept for back-compat; render the Figma glyph)\n 'bell',\n 'circle-outline',\n 'dot',\n 'settings',\n 'clock',\n 'mail',\n 'message',\n 'user',\n 'upload',\n] as const"
},
{
"path": "packages/design-system/src/types/GlyphName.ts",
"line": 87,
"name": "GlyphName",
"code": "export type GlyphName = (typeof GLYPH_NAMES)[number];"
}
],
"defaults_policy": "Only explicit destructured parameter initializers are extracted. Other runtime defaults remain in implementation source."
},
"platforms": {
"implemented": [
"web"
],
"native": "Imported design guidance only; no native implementation or parity verification in this preview.",
"react": {
"implementation": "local",
"status": "preview",
"parity": "web-reference"
},
"vue": {
"implementation": "absent",
"parity": "not-verified",
"status": "reference-only"
},
"swift": {
"implementation": "absent",
"parity": "not-verified",
"status": "reference-only"
},
"kotlin": {
"implementation": "absent",
"parity": "not-verified",
"status": "reference-only"
}
},
"missing_facts": [
{
"code": "human-review-pending",
"detail": "This local preview has no recorded human design or engineering sign-off."
},
{
"code": "platform-parity-unverified",
"detail": "Vue, Swift and Kotlin implementations are absent from this package; platform parity has not been verified."
},
{
"code": "figma-mapping-unverified",
"detail": "No current component-level Figma node and immutable revision have been verified for this contract."
}
],
"review": {
"local_status": "not-reviewed",
"source_approval": null,
"imported_spec_status": "approved",
"spec_origin": "imported-adapted",
"local_spec_source_status": "approved",
"imported_source_revision": "f96f416e1c3bfbfaffcd155a88b87b18b8bb25f1",
"note": "Inherited specification status is provenance, not approval of the current local implementation or extracted contract."
}
}