gd-design-library 1.8.2 → 1.8.3

package/ai/figma-maps/figma-shadow-map.json.d.cts

@@ -0,0 +1,170 @@
+declare const _default: {
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$comment": "Figma style name → GridKit token. Source: libs/ui/src/tokens/shadow.ts + Figma file bCDJhVLlAFSIZtPFbEwDRO node 36:2. Usage: tokenPath → useTheme() dot-path, cssVar → --gds-* reference only (never emit in TSX). Note: Figma shadows are published styles (not variable-bound). Dark-mode variants have no GridKit token equivalent — dark theme handles them via the theme override system.",
+  "$usage": {
+    "keyQuestion": "What GridKit shadow token corresponds to this Figma shadow style or UI element elevation?",
+    "lookupSteps": [
+      "1. Figma style name (e.g. 'Shadow/Light Mode/shadow 1'): find in light group by key → tokenPath.",
+      "2. Shadow CSS value: query valueIndex[value] → tokenPath string.",
+      "3. By UI element role: consult elevationDecisionGuide — e.g. 'dropdown/popover'→shadows.box.2, 'modal'→shadows.modal.default, 'snackbar'→shadows.snackbar.default.",
+      "4. No match: record 'unmatched:<value>' in tokenBindings."
+    ],
+    "criticalRules": [
+      "Design drift: Figma shadow values for levels 1-3 differ from GridKit token values. See designDrift. Token value is ALWAYS canonical — never use Figma raw values in code.",
+      "Dark mode: no separate GridKit shadow tokens; dark ThemeProvider override resolves automatically.",
+      "themeAccess for numeric box levels uses bracket notation: theme.shadows?.box?.['1'].",
+      "Semantic aliases (modal, snackbar, inlineNotification) should be preferred over box.* for those components."
+    ]
+  },
+  "light": {
+    "$comment": "Light mode shadows. Figma naming: 'Shadow/Light Mode/shadow <N>'. Maps to shadows.box.<N> in GridKit. Values for levels 1-3 have minor design drift from the Figma baseline — see designDrift section.",
+    "Shadow/Light Mode/shadow 1": {
+      "tokenPath": "shadows.box.1",
+      "cssVar": "--gds-shadow-box-1",
+      "themeAccess": "theme.shadows?.box?.['1']",
+      "figmaValue": "0px 2px 3px -1px rgba(0,0,0,0.20)",
+      "tokenValue": "0px 2px 1px -1px rgba(0, 0, 0, 0.20), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)",
+      "elevation": "1 — xs / very subtle",
+      "drift": "Figma is single-layer; token is multi-layer Material-style. Use token value."
+    },
+    "Shadow/Light Mode/shadow 2": {
+      "tokenPath": "shadows.box.2",
+      "cssVar": "--gds-shadow-box-2",
+      "themeAccess": "theme.shadows?.box?.['2']",
+      "figmaValue": "0px 4px 14px -1px rgba(0,0,0,0.20)",
+      "tokenValue": "0px 4px 5px -1px rgba(0, 0, 0, 0.20)",
+      "elevation": "2 — sm / subtle",
+      "drift": "Blur differs: Figma 14px vs token 5px. Use token value."
+    },
+    "Shadow/Light Mode/shadow 3": {
+      "tokenPath": "shadows.box.3",
+      "cssVar": "--gds-shadow-box-3",
+      "themeAccess": "theme.shadows?.box?.['3']",
+      "figmaValue": "0px 8px 18px 3px rgba(0,0,0,0.20)",
+      "tokenValue": "0px 8px 15px 1px rgba(0, 0, 0, 0.20)",
+      "elevation": "3 — md / medium",
+      "drift": "Blur 18→15px, spread 3→1px. Use token value."
+    },
+    "Shadow/Light Mode/shadow 4": {
+      "tokenPath": "shadows.box.4",
+      "cssVar": "--gds-shadow-box-4",
+      "themeAccess": "theme.shadows?.box?.['4']",
+      "figmaValue": "0px 12px 28px 5px rgba(0,0,0,0.25)",
+      "tokenValue": "0px 12px 28px 5px rgba(0, 0, 0, 0.25)",
+      "elevation": "4 — lg / prominent",
+      "drift": "none — exact match"
+    },
+    "Shadow/Light Mode/shadow 5": {
+      "tokenPath": "shadows.box.5",
+      "cssVar": "--gds-shadow-box-5",
+      "themeAccess": "theme.shadows?.box?.['5']",
+      "figmaValue": "0px 16px 38px 7px rgba(0,0,0,0.25)",
+      "tokenValue": "0px 16px 38px 7px rgba(0, 0, 0, 0.25)",
+      "elevation": "5 — xl / most prominent",
+      "drift": "none — exact match"
+    }
+  },
+  "dark": {
+    "$comment": "Dark mode shadows use off-white rgba(250,249,249,...) instead of black. No corresponding GridKit token exists — dark theme handles elevation via the theme override system. Provided here for reference only; never hardcode dark shadow values in TSX.",
+    "Shadow/Dark Mode/shadow 1": {
+      "tokenPath": null,
+      "figmaValue": "0px 2px 3px -1px rgba(250,249,249,0.05)",
+      "elevation": "1 — xs",
+      "note": "No GridKit token. Resolved by dark theme override of shadows.box.1."
+    },
+    "Shadow/Dark Mode/shadow 2": {
+      "tokenPath": null,
+      "figmaValue": "0px 4px 14px -1px rgba(250,249,249,0.10)",
+      "elevation": "2 — sm",
+      "note": "No GridKit token. Resolved by dark theme override of shadows.box.2."
+    },
+    "Shadow/Dark Mode/shadow 3": {
+      "tokenPath": null,
+      "figmaValue": "0px 8px 18px 3px rgba(250,249,249,0.10)",
+      "elevation": "3 — md",
+      "note": "No GridKit token. Resolved by dark theme override of shadows.box.3."
+    },
+    "Shadow/Dark Mode/shadow 4": {
+      "tokenPath": null,
+      "figmaValue": "0px 12px 28px 5px rgba(250,249,249,0.15)",
+      "elevation": "4 — lg",
+      "note": "No GridKit token. Resolved by dark theme override of shadows.box.4."
+    },
+    "Shadow/Dark Mode/shadow 5": {
+      "tokenPath": null,
+      "figmaValue": "0px 16px 38px 7px rgba(250,249,249,0.15)",
+      "elevation": "5 — xl",
+      "note": "No GridKit token. Resolved by dark theme override of shadows.box.5."
+    }
+  },
+  "semantic": {
+    "$comment": "Component-level semantic shadow tokens. All resolve to DEFAULT_SHADOW = '0 4px 12px rgba(0,0,0,0.10)'. This value sits between Figma shadow 2 and 3 and is not explicitly represented in the Figma shadow scale — it is a GridKit-only semantic alias.",
+    "modal": {
+      "tokenPath": "shadows.modal.default",
+      "cssVar": "--gds-shadow-modal-default",
+      "themeAccess": "theme.shadows?.modal?.default",
+      "value": "0 4px 12px rgba(0, 0, 0, 0.10)",
+      "usedBy": ["Modal", "Dialog"]
+    },
+    "modal.content": {
+      "tokenPath": "shadows.modal.content",
+      "cssVar": "--gds-shadow-modal-content",
+      "themeAccess": "theme.shadows?.modal?.content",
+      "value": "0 4px 12px rgba(0, 0, 0, 0.10)",
+      "usedBy": ["Modal content area"]
+    },
+    "snackbar": {
+      "tokenPath": "shadows.snackbar.default",
+      "cssVar": "--gds-shadow-snackbar-default",
+      "themeAccess": "theme.shadows?.snackbar?.default",
+      "value": "0 4px 12px rgba(0, 0, 0, 0.10)",
+      "usedBy": ["Snackbar", "Toast"]
+    },
+    "inlineNotification": {
+      "tokenPath": "shadows.inlineNotification.default",
+      "cssVar": "--gds-shadow-inline-notification-default",
+      "themeAccess": "theme.shadows?.inlineNotification?.default",
+      "value": "0 4px 12px rgba(0, 0, 0, 0.10)",
+      "usedBy": ["InlineNotification"]
+    }
+  },
+  "valueIndex": {
+    "$comment": "Reverse-lookup: CSS box-shadow string → tokenPath. Match the token value (not the Figma value) for levels 1-3. For DEFAULT_SHADOW use any of the semantic aliases — prefer the component-appropriate one.",
+    "0px 2px 1px -1px rgba(0, 0, 0, 0.20), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)": "shadows.box.1",
+    "0px 4px 5px -1px rgba(0, 0, 0, 0.20)": "shadows.box.2",
+    "0px 8px 15px 1px rgba(0, 0, 0, 0.20)": "shadows.box.3",
+    "0px 12px 28px 5px rgba(0, 0, 0, 0.25)": "shadows.box.4",
+    "0px 16px 38px 7px rgba(0, 0, 0, 0.25)": "shadows.box.5",
+    "0 4px 12px rgba(0, 0, 0, 0.10)": "shadows.modal.default"
+  },
+  "elevationDecisionGuide": {
+    "$comment": "Which shadow level to use by component context.",
+    "card / tile / resting surface": "shadows.box.1 — theme.shadows?.box?.['1']",
+    "dropdown / popover / tooltip": "shadows.box.2 — theme.shadows?.box?.['2']",
+    "drawer / panel / side sheet": "shadows.box.3 — theme.shadows?.box?.['3']",
+    "dialog / modal overlay": "shadows.modal.default — theme.shadows?.modal?.default",
+    "floating action button / prominent card": "shadows.box.4 — theme.shadows?.box?.['4']",
+    "fullscreen overlay / maximum elevation": "shadows.box.5 — theme.shadows?.box?.['5']",
+    "snackbar / toast": "shadows.snackbar.default — theme.shadows?.snackbar?.default",
+    "inline notification banner": "shadows.inlineNotification.default — theme.shadows?.inlineNotification?.default",
+    "dark mode — any level": "Use same tokenPath; dark theme override resolves to off-white shadow automatically"
+  },
+  "designDrift": {
+    "$comment": "Values where Figma baseline and GridKit token differ. Token value is canonical for implementation — never use Figma raw values in code.",
+    "level 1": {
+      "figma": "0px 2px 3px -1px rgba(0,0,0,0.20) — single layer",
+      "token": "0px 2px 1px -1px rgba(0, 0, 0, 0.20), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) — multi-layer"
+    },
+    "level 2": {
+      "figma": "0px 4px 14px -1px rgba(0,0,0,0.20)",
+      "token": "0px 4px 5px -1px rgba(0, 0, 0, 0.20)"
+    },
+    "level 3": {
+      "figma": "0px 8px 18px 3px rgba(0,0,0,0.20)",
+      "token": "0px 8px 15px 1px rgba(0, 0, 0, 0.20)"
+    }
+  }
+}
+;
+
+export default _default;

package/ai/figma-maps/figma-shadow-map.json.d.ts

@@ -0,0 +1,170 @@
+declare const _default: {
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$comment": "Figma style name → GridKit token. Source: libs/ui/src/tokens/shadow.ts + Figma file bCDJhVLlAFSIZtPFbEwDRO node 36:2. Usage: tokenPath → useTheme() dot-path, cssVar → --gds-* reference only (never emit in TSX). Note: Figma shadows are published styles (not variable-bound). Dark-mode variants have no GridKit token equivalent — dark theme handles them via the theme override system.",
+  "$usage": {
+    "keyQuestion": "What GridKit shadow token corresponds to this Figma shadow style or UI element elevation?",
+    "lookupSteps": [
+      "1. Figma style name (e.g. 'Shadow/Light Mode/shadow 1'): find in light group by key → tokenPath.",
+      "2. Shadow CSS value: query valueIndex[value] → tokenPath string.",
+      "3. By UI element role: consult elevationDecisionGuide — e.g. 'dropdown/popover'→shadows.box.2, 'modal'→shadows.modal.default, 'snackbar'→shadows.snackbar.default.",
+      "4. No match: record 'unmatched:<value>' in tokenBindings."
+    ],
+    "criticalRules": [
+      "Design drift: Figma shadow values for levels 1-3 differ from GridKit token values. See designDrift. Token value is ALWAYS canonical — never use Figma raw values in code.",
+      "Dark mode: no separate GridKit shadow tokens; dark ThemeProvider override resolves automatically.",
+      "themeAccess for numeric box levels uses bracket notation: theme.shadows?.box?.['1'].",
+      "Semantic aliases (modal, snackbar, inlineNotification) should be preferred over box.* for those components."
+    ]
+  },
+  "light": {
+    "$comment": "Light mode shadows. Figma naming: 'Shadow/Light Mode/shadow <N>'. Maps to shadows.box.<N> in GridKit. Values for levels 1-3 have minor design drift from the Figma baseline — see designDrift section.",
+    "Shadow/Light Mode/shadow 1": {
+      "tokenPath": "shadows.box.1",
+      "cssVar": "--gds-shadow-box-1",
+      "themeAccess": "theme.shadows?.box?.['1']",
+      "figmaValue": "0px 2px 3px -1px rgba(0,0,0,0.20)",
+      "tokenValue": "0px 2px 1px -1px rgba(0, 0, 0, 0.20), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)",
+      "elevation": "1 — xs / very subtle",
+      "drift": "Figma is single-layer; token is multi-layer Material-style. Use token value."
+    },
+    "Shadow/Light Mode/shadow 2": {
+      "tokenPath": "shadows.box.2",
+      "cssVar": "--gds-shadow-box-2",
+      "themeAccess": "theme.shadows?.box?.['2']",
+      "figmaValue": "0px 4px 14px -1px rgba(0,0,0,0.20)",
+      "tokenValue": "0px 4px 5px -1px rgba(0, 0, 0, 0.20)",
+      "elevation": "2 — sm / subtle",
+      "drift": "Blur differs: Figma 14px vs token 5px. Use token value."
+    },
+    "Shadow/Light Mode/shadow 3": {
+      "tokenPath": "shadows.box.3",
+      "cssVar": "--gds-shadow-box-3",
+      "themeAccess": "theme.shadows?.box?.['3']",
+      "figmaValue": "0px 8px 18px 3px rgba(0,0,0,0.20)",
+      "tokenValue": "0px 8px 15px 1px rgba(0, 0, 0, 0.20)",
+      "elevation": "3 — md / medium",
+      "drift": "Blur 18→15px, spread 3→1px. Use token value."
+    },
+    "Shadow/Light Mode/shadow 4": {
+      "tokenPath": "shadows.box.4",
+      "cssVar": "--gds-shadow-box-4",
+      "themeAccess": "theme.shadows?.box?.['4']",
+      "figmaValue": "0px 12px 28px 5px rgba(0,0,0,0.25)",
+      "tokenValue": "0px 12px 28px 5px rgba(0, 0, 0, 0.25)",
+      "elevation": "4 — lg / prominent",
+      "drift": "none — exact match"
+    },
+    "Shadow/Light Mode/shadow 5": {
+      "tokenPath": "shadows.box.5",
+      "cssVar": "--gds-shadow-box-5",
+      "themeAccess": "theme.shadows?.box?.['5']",
+      "figmaValue": "0px 16px 38px 7px rgba(0,0,0,0.25)",
+      "tokenValue": "0px 16px 38px 7px rgba(0, 0, 0, 0.25)",
+      "elevation": "5 — xl / most prominent",
+      "drift": "none — exact match"
+    }
+  },
+  "dark": {
+    "$comment": "Dark mode shadows use off-white rgba(250,249,249,...) instead of black. No corresponding GridKit token exists — dark theme handles elevation via the theme override system. Provided here for reference only; never hardcode dark shadow values in TSX.",
+    "Shadow/Dark Mode/shadow 1": {
+      "tokenPath": null,
+      "figmaValue": "0px 2px 3px -1px rgba(250,249,249,0.05)",
+      "elevation": "1 — xs",
+      "note": "No GridKit token. Resolved by dark theme override of shadows.box.1."
+    },
+    "Shadow/Dark Mode/shadow 2": {
+      "tokenPath": null,
+      "figmaValue": "0px 4px 14px -1px rgba(250,249,249,0.10)",
+      "elevation": "2 — sm",
+      "note": "No GridKit token. Resolved by dark theme override of shadows.box.2."
+    },
+    "Shadow/Dark Mode/shadow 3": {
+      "tokenPath": null,
+      "figmaValue": "0px 8px 18px 3px rgba(250,249,249,0.10)",
+      "elevation": "3 — md",
+      "note": "No GridKit token. Resolved by dark theme override of shadows.box.3."
+    },
+    "Shadow/Dark Mode/shadow 4": {
+      "tokenPath": null,
+      "figmaValue": "0px 12px 28px 5px rgba(250,249,249,0.15)",
+      "elevation": "4 — lg",
+      "note": "No GridKit token. Resolved by dark theme override of shadows.box.4."
+    },
+    "Shadow/Dark Mode/shadow 5": {
+      "tokenPath": null,
+      "figmaValue": "0px 16px 38px 7px rgba(250,249,249,0.15)",
+      "elevation": "5 — xl",
+      "note": "No GridKit token. Resolved by dark theme override of shadows.box.5."
+    }
+  },
+  "semantic": {
+    "$comment": "Component-level semantic shadow tokens. All resolve to DEFAULT_SHADOW = '0 4px 12px rgba(0,0,0,0.10)'. This value sits between Figma shadow 2 and 3 and is not explicitly represented in the Figma shadow scale — it is a GridKit-only semantic alias.",
+    "modal": {
+      "tokenPath": "shadows.modal.default",
+      "cssVar": "--gds-shadow-modal-default",
+      "themeAccess": "theme.shadows?.modal?.default",
+      "value": "0 4px 12px rgba(0, 0, 0, 0.10)",
+      "usedBy": ["Modal", "Dialog"]
+    },
+    "modal.content": {
+      "tokenPath": "shadows.modal.content",
+      "cssVar": "--gds-shadow-modal-content",
+      "themeAccess": "theme.shadows?.modal?.content",
+      "value": "0 4px 12px rgba(0, 0, 0, 0.10)",
+      "usedBy": ["Modal content area"]
+    },
+    "snackbar": {
+      "tokenPath": "shadows.snackbar.default",
+      "cssVar": "--gds-shadow-snackbar-default",
+      "themeAccess": "theme.shadows?.snackbar?.default",
+      "value": "0 4px 12px rgba(0, 0, 0, 0.10)",
+      "usedBy": ["Snackbar", "Toast"]
+    },
+    "inlineNotification": {
+      "tokenPath": "shadows.inlineNotification.default",
+      "cssVar": "--gds-shadow-inline-notification-default",
+      "themeAccess": "theme.shadows?.inlineNotification?.default",
+      "value": "0 4px 12px rgba(0, 0, 0, 0.10)",
+      "usedBy": ["InlineNotification"]
+    }
+  },
+  "valueIndex": {
+    "$comment": "Reverse-lookup: CSS box-shadow string → tokenPath. Match the token value (not the Figma value) for levels 1-3. For DEFAULT_SHADOW use any of the semantic aliases — prefer the component-appropriate one.",
+    "0px 2px 1px -1px rgba(0, 0, 0, 0.20), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)": "shadows.box.1",
+    "0px 4px 5px -1px rgba(0, 0, 0, 0.20)": "shadows.box.2",
+    "0px 8px 15px 1px rgba(0, 0, 0, 0.20)": "shadows.box.3",
+    "0px 12px 28px 5px rgba(0, 0, 0, 0.25)": "shadows.box.4",
+    "0px 16px 38px 7px rgba(0, 0, 0, 0.25)": "shadows.box.5",
+    "0 4px 12px rgba(0, 0, 0, 0.10)": "shadows.modal.default"
+  },
+  "elevationDecisionGuide": {
+    "$comment": "Which shadow level to use by component context.",
+    "card / tile / resting surface": "shadows.box.1 — theme.shadows?.box?.['1']",
+    "dropdown / popover / tooltip": "shadows.box.2 — theme.shadows?.box?.['2']",
+    "drawer / panel / side sheet": "shadows.box.3 — theme.shadows?.box?.['3']",
+    "dialog / modal overlay": "shadows.modal.default — theme.shadows?.modal?.default",
+    "floating action button / prominent card": "shadows.box.4 — theme.shadows?.box?.['4']",
+    "fullscreen overlay / maximum elevation": "shadows.box.5 — theme.shadows?.box?.['5']",
+    "snackbar / toast": "shadows.snackbar.default — theme.shadows?.snackbar?.default",
+    "inline notification banner": "shadows.inlineNotification.default — theme.shadows?.inlineNotification?.default",
+    "dark mode — any level": "Use same tokenPath; dark theme override resolves to off-white shadow automatically"
+  },
+  "designDrift": {
+    "$comment": "Values where Figma baseline and GridKit token differ. Token value is canonical for implementation — never use Figma raw values in code.",
+    "level 1": {
+      "figma": "0px 2px 3px -1px rgba(0,0,0,0.20) — single layer",
+      "token": "0px 2px 1px -1px rgba(0, 0, 0, 0.20), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) — multi-layer"
+    },
+    "level 2": {
+      "figma": "0px 4px 14px -1px rgba(0,0,0,0.20)",
+      "token": "0px 4px 5px -1px rgba(0, 0, 0, 0.20)"
+    },
+    "level 3": {
+      "figma": "0px 8px 18px 3px rgba(0,0,0,0.20)",
+      "token": "0px 8px 15px 1px rgba(0, 0, 0, 0.20)"
+    }
+  }
+}
+;
+
+export default _default;

package/ai/figma-maps/figma-spacing-map.cjs

@@ -0,0 +1 @@
+var e={$schema:`https://json-schema.org/draft/2020-12/schema`,$comment:"Figma spacing variable name → GridKit token. Source: libs/ui/src/tokens/spacing.ts + Figma file bCDJhVLlAFSIZtPFbEwDRO node 141:793. Usage: tokenPath → useTheme() dot-path, cssVar → --gds-* reference only (never emit in TSX). Three parallel scales: `spacing` (semantic), `space` (full numeric), `scale` (component-level subset).",$usage:{keyQuestion:`What GridKit spacing token corresponds to this Figma spacing variable or px value?`,lookupSteps:[`1. Figma variable name known (e.g. gds.spacing.md): find entry in spacing/space/scale groups by key.`,`2. px value only: query pxIndex['16px'] → { preferred, aliases }. Use preferred as starting point.`,`3. Refine using scaleDecisionGuide: layout padding/margin/gap → spacing.*, large (>40px) layout → space.*, component-internal → scale.*.`,`4. Special case: 12px has no spacing.* alias — use space.150 (theme.space?.['150']).`,`5. No match: record 'unmatched:<value>px' in tokenBindings. Never hardcode the literal.`],criticalRules:[`spacing.* = semantic T-shirt scale for layout. space.* = full numeric scale for large/precise layout. scale.* = component-internal padding/gap.`,`Never hardcode raw px literals in TSX — always resolve to themeAccess.`,`pxIndex preferred entry is the best starting guess; scaleDecisionGuide gives context-aware refinement.`]},spacing:{$comment:"Semantic T-shirt scale. Prefer this over `space` or `scale` for layout/component spacing. Figma variables: gds.spacing.*","gds.spacing.none":{tokenPath:`spacing.none`,cssVar:`--gds-spacing-none`,themeAccess:`theme.spacing?.none`,value:`0`},"gds.spacing.xs":{tokenPath:`spacing.xs`,cssVar:`--gds-spacing-xs`,themeAccess:`theme.spacing?.xs`,value:`4px`},"gds.spacing.sm":{tokenPath:`spacing.sm`,cssVar:`--gds-spacing-sm`,themeAccess:`theme.spacing?.sm`,value:`8px`},"gds.spacing.md":{tokenPath:`spacing.md`,cssVar:`--gds-spacing-md`,themeAccess:`theme.spacing?.md`,value:`16px`},"gds.spacing.lg":{tokenPath:`spacing.lg`,cssVar:`--gds-spacing-lg`,themeAccess:`theme.spacing?.lg`,value:`24px`},"gds.spacing.xl":{tokenPath:`spacing.xl`,cssVar:`--gds-spacing-xl`,themeAccess:`theme.spacing?.xl`,value:`32px`},"gds.spacing.xxl":{tokenPath:`spacing.xxl`,cssVar:`--gds-spacing-xxl`,themeAccess:`theme.spacing?.xxl`,value:`40px`}},space:{$comment:`Full numeric scale covering 0–80px in 13 steps. Use when the design references a step beyond xxl (48–80px) or when a numeric alias is more readable in context. Figma extended scale maps here.`,"gds.space.0":{tokenPath:`space.0`,cssVar:`--gds-space-0`,themeAccess:`theme.space?.['0']`,value:`0px`},"gds.space.050":{tokenPath:`space.050`,cssVar:`--gds-space-050`,themeAccess:`theme.space?.['050']`,value:`4px`},"gds.space.100":{tokenPath:`space.100`,cssVar:`--gds-space-100`,themeAccess:`theme.space?.['100']`,value:`8px`},"gds.space.150":{tokenPath:`space.150`,cssVar:`--gds-space-150`,themeAccess:`theme.space?.['150']`,value:`12px`},"gds.space.200":{tokenPath:`space.200`,cssVar:`--gds-space-200`,themeAccess:`theme.space?.['200']`,value:`16px`},"gds.space.300":{tokenPath:`space.300`,cssVar:`--gds-space-300`,themeAccess:`theme.space?.['300']`,value:`24px`},"gds.space.400":{tokenPath:`space.400`,cssVar:`--gds-space-400`,themeAccess:`theme.space?.['400']`,value:`32px`},"gds.space.500":{tokenPath:`space.500`,cssVar:`--gds-space-500`,themeAccess:`theme.space?.['500']`,value:`40px`},"gds.space.600":{tokenPath:`space.600`,cssVar:`--gds-space-600`,themeAccess:`theme.space?.['600']`,value:`48px`},"gds.space.700":{tokenPath:`space.700`,cssVar:`--gds-space-700`,themeAccess:`theme.space?.['700']`,value:`56px`},"gds.space.800":{tokenPath:`space.800`,cssVar:`--gds-space-800`,themeAccess:`theme.space?.['800']`,value:`64px`},"gds.space.900":{tokenPath:`space.900`,cssVar:`--gds-space-900`,themeAccess:`theme.space?.['900']`,value:`72px`},"gds.space.1000":{tokenPath:`space.1000`,cssVar:`--gds-space-1000`,themeAccess:`theme.space?.['1000']`,value:`80px`}},scale:{$comment:"Component-level subset of `space` (4–40px, 6 steps). Used for internal component padding and gap tokens. Same values as spacing.xs–xxl but accessed via theme.scale.","gds.scale.050":{tokenPath:`scale.050`,cssVar:`--gds-scale-050`,themeAccess:`theme.scale?.['050']`,value:`4px`},"gds.scale.100":{tokenPath:`scale.100`,cssVar:`--gds-scale-100`,themeAccess:`theme.scale?.['100']`,value:`8px`},"gds.scale.200":{tokenPath:`scale.200`,cssVar:`--gds-scale-200`,themeAccess:`theme.scale?.['200']`,value:`16px`},"gds.scale.300":{tokenPath:`scale.300`,cssVar:`--gds-scale-300`,themeAccess:`theme.scale?.['300']`,value:`24px`},"gds.scale.400":{tokenPath:`scale.400`,cssVar:`--gds-scale-400`,themeAccess:`theme.scale?.['400']`,value:`32px`},"gds.scale.500":{tokenPath:`scale.500`,cssVar:`--gds-scale-500`,themeAccess:`theme.scale?.['500']`,value:`40px`}},pxIndex:{$comment:"Reverse-lookup: px value → preferred token (most semantic wins). When Figma emits a raw pixel value with no variable name, look here first. Values ≤40px have both a `spacing.*` alias (semantic) and a `space.*` alias (numeric) — prefer spacing.* for layout, scale.* for component internals.",0:{preferred:`spacing.none`,aliases:[`space.0`]},"4px":{preferred:`spacing.xs`,aliases:[`space.050`,`scale.050`]},"8px":{preferred:`spacing.sm`,aliases:[`space.100`,`scale.100`]},"12px":{preferred:`space.150`,aliases:[]},"16px":{preferred:`spacing.md`,aliases:[`space.200`,`scale.200`]},"24px":{preferred:`spacing.lg`,aliases:[`space.300`,`scale.300`]},"32px":{preferred:`spacing.xl`,aliases:[`space.400`,`scale.400`]},"40px":{preferred:`spacing.xxl`,aliases:[`space.500`,`scale.500`]},"48px":{preferred:`space.600`,aliases:[]},"56px":{preferred:`space.700`,aliases:[]},"64px":{preferred:`space.800`,aliases:[]},"72px":{preferred:`space.900`,aliases:[]},"80px":{preferred:`space.1000`,aliases:[]}},scaleDecisionGuide:{$comment:`Which scale to use for a given Figma context.`,"layout padding/margin/gap (page/section level)":`spacing.*  — theme.spacing?.md etc.`,"layout >40px gap or padding":`space.*    — theme.space?.['600'] etc.`,"component internal padding/gap":`scale.*   — theme.scale?.['100'] etc.`,"12px (no semantic alias)":`space.150  — theme.space?.['150']`,"unmatched px value":`record as unmatched:<value>px in tokenBindings; do NOT hardcode the literal`}};exports.default=e;

package/ai/figma-maps/figma-spacing-map.js

@@ -0,0 +1,249 @@
+var e = {
+	$schema: "https://json-schema.org/draft/2020-12/schema",
+	$comment: "Figma spacing variable name → GridKit token. Source: libs/ui/src/tokens/spacing.ts + Figma file bCDJhVLlAFSIZtPFbEwDRO node 141:793. Usage: tokenPath → useTheme() dot-path, cssVar → --gds-* reference only (never emit in TSX). Three parallel scales: `spacing` (semantic), `space` (full numeric), `scale` (component-level subset).",
+	$usage: {
+		keyQuestion: "What GridKit spacing token corresponds to this Figma spacing variable or px value?",
+		lookupSteps: [
+			"1. Figma variable name known (e.g. gds.spacing.md): find entry in spacing/space/scale groups by key.",
+			"2. px value only: query pxIndex['16px'] → { preferred, aliases }. Use preferred as starting point.",
+			"3. Refine using scaleDecisionGuide: layout padding/margin/gap → spacing.*, large (>40px) layout → space.*, component-internal → scale.*.",
+			"4. Special case: 12px has no spacing.* alias — use space.150 (theme.space?.['150']).",
+			"5. No match: record 'unmatched:<value>px' in tokenBindings. Never hardcode the literal."
+		],
+		criticalRules: [
+			"spacing.* = semantic T-shirt scale for layout. space.* = full numeric scale for large/precise layout. scale.* = component-internal padding/gap.",
+			"Never hardcode raw px literals in TSX — always resolve to themeAccess.",
+			"pxIndex preferred entry is the best starting guess; scaleDecisionGuide gives context-aware refinement."
+		]
+	},
+	spacing: {
+		$comment: "Semantic T-shirt scale. Prefer this over `space` or `scale` for layout/component spacing. Figma variables: gds.spacing.*",
+		"gds.spacing.none": {
+			tokenPath: "spacing.none",
+			cssVar: "--gds-spacing-none",
+			themeAccess: "theme.spacing?.none",
+			value: "0"
+		},
+		"gds.spacing.xs": {
+			tokenPath: "spacing.xs",
+			cssVar: "--gds-spacing-xs",
+			themeAccess: "theme.spacing?.xs",
+			value: "4px"
+		},
+		"gds.spacing.sm": {
+			tokenPath: "spacing.sm",
+			cssVar: "--gds-spacing-sm",
+			themeAccess: "theme.spacing?.sm",
+			value: "8px"
+		},
+		"gds.spacing.md": {
+			tokenPath: "spacing.md",
+			cssVar: "--gds-spacing-md",
+			themeAccess: "theme.spacing?.md",
+			value: "16px"
+		},
+		"gds.spacing.lg": {
+			tokenPath: "spacing.lg",
+			cssVar: "--gds-spacing-lg",
+			themeAccess: "theme.spacing?.lg",
+			value: "24px"
+		},
+		"gds.spacing.xl": {
+			tokenPath: "spacing.xl",
+			cssVar: "--gds-spacing-xl",
+			themeAccess: "theme.spacing?.xl",
+			value: "32px"
+		},
+		"gds.spacing.xxl": {
+			tokenPath: "spacing.xxl",
+			cssVar: "--gds-spacing-xxl",
+			themeAccess: "theme.spacing?.xxl",
+			value: "40px"
+		}
+	},
+	space: {
+		$comment: "Full numeric scale covering 0–80px in 13 steps. Use when the design references a step beyond xxl (48–80px) or when a numeric alias is more readable in context. Figma extended scale maps here.",
+		"gds.space.0": {
+			tokenPath: "space.0",
+			cssVar: "--gds-space-0",
+			themeAccess: "theme.space?.['0']",
+			value: "0px"
+		},
+		"gds.space.050": {
+			tokenPath: "space.050",
+			cssVar: "--gds-space-050",
+			themeAccess: "theme.space?.['050']",
+			value: "4px"
+		},
+		"gds.space.100": {
+			tokenPath: "space.100",
+			cssVar: "--gds-space-100",
+			themeAccess: "theme.space?.['100']",
+			value: "8px"
+		},
+		"gds.space.150": {
+			tokenPath: "space.150",
+			cssVar: "--gds-space-150",
+			themeAccess: "theme.space?.['150']",
+			value: "12px"
+		},
+		"gds.space.200": {
+			tokenPath: "space.200",
+			cssVar: "--gds-space-200",
+			themeAccess: "theme.space?.['200']",
+			value: "16px"
+		},
+		"gds.space.300": {
+			tokenPath: "space.300",
+			cssVar: "--gds-space-300",
+			themeAccess: "theme.space?.['300']",
+			value: "24px"
+		},
+		"gds.space.400": {
+			tokenPath: "space.400",
+			cssVar: "--gds-space-400",
+			themeAccess: "theme.space?.['400']",
+			value: "32px"
+		},
+		"gds.space.500": {
+			tokenPath: "space.500",
+			cssVar: "--gds-space-500",
+			themeAccess: "theme.space?.['500']",
+			value: "40px"
+		},
+		"gds.space.600": {
+			tokenPath: "space.600",
+			cssVar: "--gds-space-600",
+			themeAccess: "theme.space?.['600']",
+			value: "48px"
+		},
+		"gds.space.700": {
+			tokenPath: "space.700",
+			cssVar: "--gds-space-700",
+			themeAccess: "theme.space?.['700']",
+			value: "56px"
+		},
+		"gds.space.800": {
+			tokenPath: "space.800",
+			cssVar: "--gds-space-800",
+			themeAccess: "theme.space?.['800']",
+			value: "64px"
+		},
+		"gds.space.900": {
+			tokenPath: "space.900",
+			cssVar: "--gds-space-900",
+			themeAccess: "theme.space?.['900']",
+			value: "72px"
+		},
+		"gds.space.1000": {
+			tokenPath: "space.1000",
+			cssVar: "--gds-space-1000",
+			themeAccess: "theme.space?.['1000']",
+			value: "80px"
+		}
+	},
+	scale: {
+		$comment: "Component-level subset of `space` (4–40px, 6 steps). Used for internal component padding and gap tokens. Same values as spacing.xs–xxl but accessed via theme.scale.",
+		"gds.scale.050": {
+			tokenPath: "scale.050",
+			cssVar: "--gds-scale-050",
+			themeAccess: "theme.scale?.['050']",
+			value: "4px"
+		},
+		"gds.scale.100": {
+			tokenPath: "scale.100",
+			cssVar: "--gds-scale-100",
+			themeAccess: "theme.scale?.['100']",
+			value: "8px"
+		},
+		"gds.scale.200": {
+			tokenPath: "scale.200",
+			cssVar: "--gds-scale-200",
+			themeAccess: "theme.scale?.['200']",
+			value: "16px"
+		},
+		"gds.scale.300": {
+			tokenPath: "scale.300",
+			cssVar: "--gds-scale-300",
+			themeAccess: "theme.scale?.['300']",
+			value: "24px"
+		},
+		"gds.scale.400": {
+			tokenPath: "scale.400",
+			cssVar: "--gds-scale-400",
+			themeAccess: "theme.scale?.['400']",
+			value: "32px"
+		},
+		"gds.scale.500": {
+			tokenPath: "scale.500",
+			cssVar: "--gds-scale-500",
+			themeAccess: "theme.scale?.['500']",
+			value: "40px"
+		}
+	},
+	pxIndex: {
+		$comment: "Reverse-lookup: px value → preferred token (most semantic wins). When Figma emits a raw pixel value with no variable name, look here first. Values ≤40px have both a `spacing.*` alias (semantic) and a `space.*` alias (numeric) — prefer spacing.* for layout, scale.* for component internals.",
+		0: {
+			preferred: "spacing.none",
+			aliases: ["space.0"]
+		},
+		"4px": {
+			preferred: "spacing.xs",
+			aliases: ["space.050", "scale.050"]
+		},
+		"8px": {
+			preferred: "spacing.sm",
+			aliases: ["space.100", "scale.100"]
+		},
+		"12px": {
+			preferred: "space.150",
+			aliases: []
+		},
+		"16px": {
+			preferred: "spacing.md",
+			aliases: ["space.200", "scale.200"]
+		},
+		"24px": {
+			preferred: "spacing.lg",
+			aliases: ["space.300", "scale.300"]
+		},
+		"32px": {
+			preferred: "spacing.xl",
+			aliases: ["space.400", "scale.400"]
+		},
+		"40px": {
+			preferred: "spacing.xxl",
+			aliases: ["space.500", "scale.500"]
+		},
+		"48px": {
+			preferred: "space.600",
+			aliases: []
+		},
+		"56px": {
+			preferred: "space.700",
+			aliases: []
+		},
+		"64px": {
+			preferred: "space.800",
+			aliases: []
+		},
+		"72px": {
+			preferred: "space.900",
+			aliases: []
+		},
+		"80px": {
+			preferred: "space.1000",
+			aliases: []
+		}
+	},
+	scaleDecisionGuide: {
+		$comment: "Which scale to use for a given Figma context.",
+		"layout padding/margin/gap (page/section level)": "spacing.*  — theme.spacing?.md etc.",
+		"layout >40px gap or padding": "space.*    — theme.space?.['600'] etc.",
+		"component internal padding/gap": "scale.*   — theme.scale?.['100'] etc.",
+		"12px (no semantic alias)": "space.150  — theme.space?.['150']",
+		"unmatched px value": "record as unmatched:<value>px in tokenBindings; do NOT hardcode the literal"
+	}
+};
+//#endregion
+export { e as default };