{ "meta": { "primitiveCount": 126, "semanticCount": 141, "componentCount": 106, "total": 373 }, "tokens": [ { "name": "color-black", "cssVar": "--color-black", "type": "color", "category": "primitive", "description": null, "rawValue": "#0A0A0A", "resolved": { "base-light": "#0A0A0A", "base-dark": "#0A0A0A", "portfolio-light": "#0A0A0A", "portfolio-dark": "#0A0A0A" }, "axisAware": false, "usedBy": [] }, { "name": "color-white", "cssVar": "--color-white", "type": "color", "category": "primitive", "description": null, "rawValue": "#FFFFFF", "resolved": { "base-light": "#FFFFFF", "base-dark": "#FFFFFF", "portfolio-light": "#FFFFFF", "portfolio-dark": "#FFFFFF" }, "axisAware": false, "usedBy": [] }, { "name": "color-warm-50", "cssVar": "--color-warm-50", "type": "color", "category": "primitive", "description": null, "rawValue": "#FAFAF9", "resolved": { "base-light": "#FAFAF9", "base-dark": "#FAFAF9", "portfolio-light": "#FAFAF9", "portfolio-dark": "#FAFAF9" }, "axisAware": false, "usedBy": [] }, { "name": "color-warm-100", "cssVar": "--color-warm-100", "type": "color", "category": "primitive", "description": null, "rawValue": "#F4F0EB", "resolved": { "base-light": "#F4F0EB", "base-dark": "#F4F0EB", "portfolio-light": "#F4F0EB", "portfolio-dark": "#F4F0EB" }, "axisAware": false, "usedBy": [] }, { "name": "color-warm-200", "cssVar": "--color-warm-200", "type": "color", "category": "primitive", "description": null, "rawValue": "#E2DDD9", "resolved": { "base-light": "#E2DDD9", "base-dark": "#E2DDD9", "portfolio-light": "#E2DDD9", "portfolio-dark": "#E2DDD9" }, "axisAware": false, "usedBy": [] }, { "name": "color-warm-300", "cssVar": "--color-warm-300", "type": "color", "category": "primitive", "description": null, "rawValue": "#C8C3BE", "resolved": { "base-light": "#C8C3BE", "base-dark": "#C8C3BE", "portfolio-light": "#C8C3BE", "portfolio-dark": "#C8C3BE" }, "axisAware": false, "usedBy": [] }, { "name": "color-warm-400", "cssVar": "--color-warm-400", "type": "color", "category": "primitive", "description": null, "rawValue": "#A8A29E", "resolved": { "base-light": "#A8A29E", "base-dark": "#A8A29E", "portfolio-light": "#A8A29E", "portfolio-dark": "#A8A29E" }, "axisAware": false, "usedBy": [] }, { "name": "color-warm-500", "cssVar": "--color-warm-500", "type": "color", "category": "primitive", "description": null, "rawValue": "#78716C", "resolved": { "base-light": "#78716C", "base-dark": "#78716C", "portfolio-light": "#78716C", "portfolio-dark": "#78716C" }, "axisAware": false, "usedBy": [] }, { "name": "color-warm-600", "cssVar": "--color-warm-600", "type": "color", "category": "primitive", "description": null, "rawValue": "#57534E", "resolved": { "base-light": "#57534E", "base-dark": "#57534E", "portfolio-light": "#57534E", "portfolio-dark": "#57534E" }, "axisAware": false, "usedBy": [] }, { "name": "color-warm-700", "cssVar": "--color-warm-700", "type": "color", "category": "primitive", "description": null, "rawValue": "#44403C", "resolved": { "base-light": "#44403C", "base-dark": "#44403C", "portfolio-light": "#44403C", "portfolio-dark": "#44403C" }, "axisAware": false, "usedBy": [] }, { "name": "color-warm-800", "cssVar": "--color-warm-800", "type": "color", "category": "primitive", "description": null, "rawValue": "#292524", "resolved": { "base-light": "#292524", "base-dark": "#292524", "portfolio-light": "#292524", "portfolio-dark": "#292524" }, "axisAware": false, "usedBy": [] }, { "name": "color-warm-900", "cssVar": "--color-warm-900", "type": "color", "category": "primitive", "description": null, "rawValue": "#1C1917", "resolved": { "base-light": "#1C1917", "base-dark": "#1C1917", "portfolio-light": "#1C1917", "portfolio-dark": "#1C1917" }, "axisAware": false, "usedBy": [] }, { "name": "color-gray-50", "cssVar": "--color-gray-50", "type": "color", "category": "primitive", "description": null, "rawValue": "#FAFAFA", "resolved": { "base-light": "#FAFAFA", "base-dark": "#FAFAFA", "portfolio-light": "#FAFAFA", "portfolio-dark": "#FAFAFA" }, "axisAware": false, "usedBy": [] }, { "name": "color-gray-100", "cssVar": "--color-gray-100", "type": "color", "category": "primitive", "description": null, "rawValue": "#F5F5F5", "resolved": { "base-light": "#F5F5F5", "base-dark": "#F5F5F5", "portfolio-light": "#F5F5F5", "portfolio-dark": "#F5F5F5" }, "axisAware": false, "usedBy": [] }, { "name": "color-gray-200", "cssVar": "--color-gray-200", "type": "color", "category": "primitive", "description": null, "rawValue": "#E5E5E5", "resolved": { "base-light": "#E5E5E5", "base-dark": "#E5E5E5", "portfolio-light": "#E5E5E5", "portfolio-dark": "#E5E5E5" }, "axisAware": false, "usedBy": [] }, { "name": "color-gray-300", "cssVar": "--color-gray-300", "type": "color", "category": "primitive", "description": null, "rawValue": "#D4D4D4", "resolved": { "base-light": "#D4D4D4", "base-dark": "#D4D4D4", "portfolio-light": "#D4D4D4", "portfolio-dark": "#D4D4D4" }, "axisAware": false, "usedBy": [] }, { "name": "color-gray-400", "cssVar": "--color-gray-400", "type": "color", "category": "primitive", "description": null, "rawValue": "#A3A3A3", "resolved": { "base-light": "#A3A3A3", "base-dark": "#A3A3A3", "portfolio-light": "#A3A3A3", "portfolio-dark": "#A3A3A3" }, "axisAware": false, "usedBy": [] }, { "name": "color-gray-500", "cssVar": "--color-gray-500", "type": "color", "category": "primitive", "description": null, "rawValue": "#737373", "resolved": { "base-light": "#737373", "base-dark": "#737373", "portfolio-light": "#737373", "portfolio-dark": "#737373" }, "axisAware": false, "usedBy": [] }, { "name": "color-gray-600", "cssVar": "--color-gray-600", "type": "color", "category": "primitive", "description": null, "rawValue": "#525252", "resolved": { "base-light": "#525252", "base-dark": "#525252", "portfolio-light": "#525252", "portfolio-dark": "#525252" }, "axisAware": false, "usedBy": [] }, { "name": "color-gray-700", "cssVar": "--color-gray-700", "type": "color", "category": "primitive", "description": null, "rawValue": "#404040", "resolved": { "base-light": "#404040", "base-dark": "#404040", "portfolio-light": "#404040", "portfolio-dark": "#404040" }, "axisAware": false, "usedBy": [] }, { "name": "color-gray-800", "cssVar": "--color-gray-800", "type": "color", "category": "primitive", "description": null, "rawValue": "#262626", "resolved": { "base-light": "#262626", "base-dark": "#262626", "portfolio-light": "#262626", "portfolio-dark": "#262626" }, "axisAware": false, "usedBy": [] }, { "name": "color-gray-900", "cssVar": "--color-gray-900", "type": "color", "category": "primitive", "description": null, "rawValue": "#171717", "resolved": { "base-light": "#171717", "base-dark": "#171717", "portfolio-light": "#171717", "portfolio-dark": "#171717" }, "axisAware": false, "usedBy": [] }, { "name": "color-teal-50", "cssVar": "--color-teal-50", "type": "color", "category": "primitive", "description": null, "rawValue": "#EBF4F6", "resolved": { "base-light": "#EBF4F6", "base-dark": "#EBF4F6", "portfolio-light": "#EBF4F6", "portfolio-dark": "#EBF4F6" }, "axisAware": false, "usedBy": [] }, { "name": "color-teal-200", "cssVar": "--color-teal-200", "type": "color", "category": "primitive", "description": null, "rawValue": "#6FB8C3", "resolved": { "base-light": "#6FB8C3", "base-dark": "#6FB8C3", "portfolio-light": "#6FB8C3", "portfolio-dark": "#6FB8C3" }, "axisAware": false, "usedBy": [] }, { "name": "color-teal-300", "cssVar": "--color-teal-300", "type": "color", "category": "primitive", "description": null, "rawValue": "#4FA3B0", "resolved": { "base-light": "#4FA3B0", "base-dark": "#4FA3B0", "portfolio-light": "#4FA3B0", "portfolio-dark": "#4FA3B0" }, "axisAware": false, "usedBy": [] }, { "name": "color-teal-500", "cssVar": "--color-teal-500", "type": "color", "category": "primitive", "description": null, "rawValue": "#15616D", "resolved": { "base-light": "#15616D", "base-dark": "#15616D", "portfolio-light": "#15616D", "portfolio-dark": "#15616D" }, "axisAware": false, "usedBy": [] }, { "name": "color-teal-600", "cssVar": "--color-teal-600", "type": "color", "category": "primitive", "description": null, "rawValue": "#0F4750", "resolved": { "base-light": "#0F4750", "base-dark": "#0F4750", "portfolio-light": "#0F4750", "portfolio-dark": "#0F4750" }, "axisAware": false, "usedBy": [] }, { "name": "color-teal-500-glow", "cssVar": "--color-teal-500-glow", "type": "color", "category": "primitive", "description": "teal-500 at 20% alpha — the diagram source-node glow's light-mode value", "rawValue": "#15616D33", "resolved": { "base-light": "#15616D33", "base-dark": "#15616D33", "portfolio-light": "#15616D33", "portfolio-dark": "#15616D33" }, "axisAware": false, "usedBy": [] }, { "name": "space-1", "cssVar": "--space-1", "type": "dimension", "category": "primitive", "description": null, "rawValue": "4px", "resolved": { "base-light": "4px", "base-dark": "4px", "portfolio-light": "4px", "portfolio-dark": "4px" }, "axisAware": false, "usedBy": [] }, { "name": "space-2", "cssVar": "--space-2", "type": "dimension", "category": "primitive", "description": null, "rawValue": "8px", "resolved": { "base-light": "8px", "base-dark": "8px", "portfolio-light": "8px", "portfolio-dark": "8px" }, "axisAware": false, "usedBy": [] }, { "name": "space-3", "cssVar": "--space-3", "type": "dimension", "category": "primitive", "description": null, "rawValue": "12px", "resolved": { "base-light": "12px", "base-dark": "12px", "portfolio-light": "12px", "portfolio-dark": "12px" }, "axisAware": false, "usedBy": [] }, { "name": "space-4", "cssVar": "--space-4", "type": "dimension", "category": "primitive", "description": null, "rawValue": "16px", "resolved": { "base-light": "16px", "base-dark": "16px", "portfolio-light": "16px", "portfolio-dark": "16px" }, "axisAware": false, "usedBy": [] }, { "name": "space-5", "cssVar": "--space-5", "type": "dimension", "category": "primitive", "description": null, "rawValue": "20px", "resolved": { "base-light": "20px", "base-dark": "20px", "portfolio-light": "20px", "portfolio-dark": "20px" }, "axisAware": false, "usedBy": [] }, { "name": "space-6", "cssVar": "--space-6", "type": "dimension", "category": "primitive", "description": null, "rawValue": "24px", "resolved": { "base-light": "24px", "base-dark": "24px", "portfolio-light": "24px", "portfolio-dark": "24px" }, "axisAware": false, "usedBy": [] }, { "name": "space-7", "cssVar": "--space-7", "type": "dimension", "category": "primitive", "description": null, "rawValue": "28px", "resolved": { "base-light": "28px", "base-dark": "28px", "portfolio-light": "28px", "portfolio-dark": "28px" }, "axisAware": false, "usedBy": [] }, { "name": "space-8", "cssVar": "--space-8", "type": "dimension", "category": "primitive", "description": null, "rawValue": "32px", "resolved": { "base-light": "32px", "base-dark": "32px", "portfolio-light": "32px", "portfolio-dark": "32px" }, "axisAware": false, "usedBy": [] }, { "name": "space-9", "cssVar": "--space-9", "type": "dimension", "category": "primitive", "description": null, "rawValue": "40px", "resolved": { "base-light": "40px", "base-dark": "40px", "portfolio-light": "40px", "portfolio-dark": "40px" }, "axisAware": false, "usedBy": [] }, { "name": "space-10", "cssVar": "--space-10", "type": "dimension", "category": "primitive", "description": null, "rawValue": "48px", "resolved": { "base-light": "48px", "base-dark": "48px", "portfolio-light": "48px", "portfolio-dark": "48px" }, "axisAware": false, "usedBy": [] }, { "name": "space-11", "cssVar": "--space-11", "type": "dimension", "category": "primitive", "description": null, "rawValue": "64px", "resolved": { "base-light": "64px", "base-dark": "64px", "portfolio-light": "64px", "portfolio-dark": "64px" }, "axisAware": false, "usedBy": [] }, { "name": "space-12", "cssVar": "--space-12", "type": "dimension", "category": "primitive", "description": null, "rawValue": "96px", "resolved": { "base-light": "96px", "base-dark": "96px", "portfolio-light": "96px", "portfolio-dark": "96px" }, "axisAware": false, "usedBy": [] }, { "name": "space-13", "cssVar": "--space-13", "type": "dimension", "category": "primitive", "description": null, "rawValue": "128px", "resolved": { "base-light": "128px", "base-dark": "128px", "portfolio-light": "128px", "portfolio-dark": "128px" }, "axisAware": false, "usedBy": [] }, { "name": "font-size-xs", "cssVar": "--font-size-xs", "type": "dimension", "category": "primitive", "description": null, "rawValue": "12px", "resolved": { "base-light": "12px", "base-dark": "12px", "portfolio-light": "12px", "portfolio-dark": "12px" }, "axisAware": false, "usedBy": [] }, { "name": "font-size-sm", "cssVar": "--font-size-sm", "type": "dimension", "category": "primitive", "description": null, "rawValue": "14px", "resolved": { "base-light": "14px", "base-dark": "14px", "portfolio-light": "14px", "portfolio-dark": "14px" }, "axisAware": false, "usedBy": [] }, { "name": "font-size-base", "cssVar": "--font-size-base", "type": "dimension", "category": "primitive", "description": null, "rawValue": "16px", "resolved": { "base-light": "16px", "base-dark": "16px", "portfolio-light": "16px", "portfolio-dark": "16px" }, "axisAware": false, "usedBy": [] }, { "name": "font-size-md", "cssVar": "--font-size-md", "type": "dimension", "category": "primitive", "description": null, "rawValue": "18px", "resolved": { "base-light": "18px", "base-dark": "18px", "portfolio-light": "18px", "portfolio-dark": "18px" }, "axisAware": false, "usedBy": [] }, { "name": "font-size-emphasis", "cssVar": "--font-size-emphasis", "type": "dimension", "category": "primitive", "description": null, "rawValue": "20px", "resolved": { "base-light": "20px", "base-dark": "20px", "portfolio-light": "20px", "portfolio-dark": "20px" }, "axisAware": false, "usedBy": [] }, { "name": "font-size-lg", "cssVar": "--font-size-lg", "type": "dimension", "category": "primitive", "description": null, "rawValue": "24px", "resolved": { "base-light": "24px", "base-dark": "24px", "portfolio-light": "24px", "portfolio-dark": "24px" }, "axisAware": false, "usedBy": [] }, { "name": "font-size-xl", "cssVar": "--font-size-xl", "type": "dimension", "category": "primitive", "description": null, "rawValue": "32px", "resolved": { "base-light": "32px", "base-dark": "32px", "portfolio-light": "32px", "portfolio-dark": "32px" }, "axisAware": false, "usedBy": [] }, { "name": "font-size-2xl", "cssVar": "--font-size-2xl", "type": "dimension", "category": "primitive", "description": null, "rawValue": "48px", "resolved": { "base-light": "48px", "base-dark": "48px", "portfolio-light": "48px", "portfolio-dark": "48px" }, "axisAware": false, "usedBy": [] }, { "name": "font-size-3xl", "cssVar": "--font-size-3xl", "type": "dimension", "category": "primitive", "description": null, "rawValue": "64px", "resolved": { "base-light": "64px", "base-dark": "64px", "portfolio-light": "64px", "portfolio-dark": "64px" }, "axisAware": false, "usedBy": [] }, { "name": "font-weight-light", "cssVar": "--font-weight-light", "type": "fontWeight", "category": "primitive", "description": null, "rawValue": "300", "resolved": { "base-light": "300", "base-dark": "300", "portfolio-light": "300", "portfolio-dark": "300" }, "axisAware": false, "usedBy": [] }, { "name": "font-weight-regular", "cssVar": "--font-weight-regular", "type": "fontWeight", "category": "primitive", "description": null, "rawValue": "400", "resolved": { "base-light": "400", "base-dark": "400", "portfolio-light": "400", "portfolio-dark": "400" }, "axisAware": false, "usedBy": [] }, { "name": "font-weight-medium", "cssVar": "--font-weight-medium", "type": "fontWeight", "category": "primitive", "description": null, "rawValue": "500", "resolved": { "base-light": "500", "base-dark": "500", "portfolio-light": "500", "portfolio-dark": "500" }, "axisAware": false, "usedBy": [] }, { "name": "font-weight-semibold", "cssVar": "--font-weight-semibold", "type": "fontWeight", "category": "primitive", "description": null, "rawValue": "600", "resolved": { "base-light": "600", "base-dark": "600", "portfolio-light": "600", "portfolio-dark": "600" }, "axisAware": false, "usedBy": [] }, { "name": "font-weight-bold", "cssVar": "--font-weight-bold", "type": "fontWeight", "category": "primitive", "description": null, "rawValue": "700", "resolved": { "base-light": "700", "base-dark": "700", "portfolio-light": "700", "portfolio-dark": "700" }, "axisAware": false, "usedBy": [] }, { "name": "font-weight-extrabold", "cssVar": "--font-weight-extrabold", "type": "fontWeight", "category": "primitive", "description": null, "rawValue": "800", "resolved": { "base-light": "800", "base-dark": "800", "portfolio-light": "800", "portfolio-dark": "800" }, "axisAware": false, "usedBy": [] }, { "name": "line-height-tighter", "cssVar": "--line-height-tighter", "type": "number", "category": "primitive", "description": null, "rawValue": "1.125", "resolved": { "base-light": "1.125", "base-dark": "1.125", "portfolio-light": "1.125", "portfolio-dark": "1.125" }, "axisAware": false, "usedBy": [] }, { "name": "line-height-tight", "cssVar": "--line-height-tight", "type": "number", "category": "primitive", "description": null, "rawValue": "1.25", "resolved": { "base-light": "1.25", "base-dark": "1.25", "portfolio-light": "1.25", "portfolio-dark": "1.25" }, "axisAware": false, "usedBy": [] }, { "name": "line-height-fixed-16", "cssVar": "--line-height-fixed-16", "type": "dimension", "category": "primitive", "description": "Strict-4px-grid line-height for static (non-fluid) text — pairs with a fixed font-size, not a clamp() one. The fixed-* scale is the baseline grid for every static font-size (decisions/0012). Unitless tighter/tight remain the right choice for fluid, clamp()-scaled type, where a fixed px value would break proportional scaling.", "rawValue": "16px", "resolved": { "base-light": "16px", "base-dark": "16px", "portfolio-light": "16px", "portfolio-dark": "16px" }, "axisAware": false, "usedBy": [] }, { "name": "line-height-fixed-20", "cssVar": "--line-height-fixed-20", "type": "dimension", "category": "primitive", "description": null, "rawValue": "20px", "resolved": { "base-light": "20px", "base-dark": "20px", "portfolio-light": "20px", "portfolio-dark": "20px" }, "axisAware": false, "usedBy": [] }, { "name": "line-height-fixed-24", "cssVar": "--line-height-fixed-24", "type": "dimension", "category": "primitive", "description": null, "rawValue": "24px", "resolved": { "base-light": "24px", "base-dark": "24px", "portfolio-light": "24px", "portfolio-dark": "24px" }, "axisAware": false, "usedBy": [] }, { "name": "line-height-fixed-28", "cssVar": "--line-height-fixed-28", "type": "dimension", "category": "primitive", "description": null, "rawValue": "28px", "resolved": { "base-light": "28px", "base-dark": "28px", "portfolio-light": "28px", "portfolio-dark": "28px" }, "axisAware": false, "usedBy": [] }, { "name": "line-height-fixed-32", "cssVar": "--line-height-fixed-32", "type": "dimension", "category": "primitive", "description": null, "rawValue": "32px", "resolved": { "base-light": "32px", "base-dark": "32px", "portfolio-light": "32px", "portfolio-dark": "32px" }, "axisAware": false, "usedBy": [] }, { "name": "line-height-fixed-40", "cssVar": "--line-height-fixed-40", "type": "dimension", "category": "primitive", "description": null, "rawValue": "40px", "resolved": { "base-light": "40px", "base-dark": "40px", "portfolio-light": "40px", "portfolio-dark": "40px" }, "axisAware": false, "usedBy": [] }, { "name": "line-height-fixed-60", "cssVar": "--line-height-fixed-60", "type": "dimension", "category": "primitive", "description": null, "rawValue": "60px", "resolved": { "base-light": "60px", "base-dark": "60px", "portfolio-light": "60px", "portfolio-dark": "60px" }, "axisAware": false, "usedBy": [] }, { "name": "line-height-fixed-80", "cssVar": "--line-height-fixed-80", "type": "dimension", "category": "primitive", "description": null, "rawValue": "80px", "resolved": { "base-light": "80px", "base-dark": "80px", "portfolio-light": "80px", "portfolio-dark": "80px" }, "axisAware": false, "usedBy": [] }, { "name": "border-radius-none", "cssVar": "--border-radius-none", "type": "dimension", "category": "primitive", "description": null, "rawValue": "0px", "resolved": { "base-light": "0px", "base-dark": "0px", "portfolio-light": "0px", "portfolio-dark": "0px" }, "axisAware": false, "usedBy": [] }, { "name": "border-radius-sm", "cssVar": "--border-radius-sm", "type": "dimension", "category": "primitive", "description": null, "rawValue": "4px", "resolved": { "base-light": "4px", "base-dark": "4px", "portfolio-light": "4px", "portfolio-dark": "4px" }, "axisAware": false, "usedBy": [] }, { "name": "border-radius-md", "cssVar": "--border-radius-md", "type": "dimension", "category": "primitive", "description": null, "rawValue": "8px", "resolved": { "base-light": "8px", "base-dark": "8px", "portfolio-light": "8px", "portfolio-dark": "8px" }, "axisAware": false, "usedBy": [] }, { "name": "border-radius-lg", "cssVar": "--border-radius-lg", "type": "dimension", "category": "primitive", "description": null, "rawValue": "16px", "resolved": { "base-light": "16px", "base-dark": "16px", "portfolio-light": "16px", "portfolio-dark": "16px" }, "axisAware": false, "usedBy": [] }, { "name": "border-radius-xl", "cssVar": "--border-radius-xl", "type": "dimension", "category": "primitive", "description": null, "rawValue": "20px", "resolved": { "base-light": "20px", "base-dark": "20px", "portfolio-light": "20px", "portfolio-dark": "20px" }, "axisAware": false, "usedBy": [] }, { "name": "border-radius-full", "cssVar": "--border-radius-full", "type": "dimension", "category": "primitive", "description": null, "rawValue": "9999px", "resolved": { "base-light": "9999px", "base-dark": "9999px", "portfolio-light": "9999px", "portfolio-dark": "9999px" }, "axisAware": false, "usedBy": [] }, { "name": "duration-instant", "cssVar": "--duration-instant", "type": "duration", "category": "primitive", "description": null, "rawValue": "0ms", "resolved": { "base-light": "0ms", "base-dark": "0ms", "portfolio-light": "0ms", "portfolio-dark": "0ms" }, "axisAware": false, "usedBy": [] }, { "name": "duration-fast", "cssVar": "--duration-fast", "type": "duration", "category": "primitive", "description": null, "rawValue": "100ms", "resolved": { "base-light": "100ms", "base-dark": "100ms", "portfolio-light": "100ms", "portfolio-dark": "100ms" }, "axisAware": false, "usedBy": [] }, { "name": "duration-base", "cssVar": "--duration-base", "type": "duration", "category": "primitive", "description": null, "rawValue": "200ms", "resolved": { "base-light": "200ms", "base-dark": "200ms", "portfolio-light": "200ms", "portfolio-dark": "200ms" }, "axisAware": false, "usedBy": [] }, { "name": "duration-slow", "cssVar": "--duration-slow", "type": "duration", "category": "primitive", "description": null, "rawValue": "400ms", "resolved": { "base-light": "400ms", "base-dark": "400ms", "portfolio-light": "400ms", "portfolio-dark": "400ms" }, "axisAware": false, "usedBy": [] }, { "name": "duration-expand", "cssVar": "--duration-expand", "type": "duration", "category": "primitive", "description": null, "rawValue": "650ms", "resolved": { "base-light": "650ms", "base-dark": "650ms", "portfolio-light": "650ms", "portfolio-dark": "650ms" }, "axisAware": false, "usedBy": [] }, { "name": "duration-collapse", "cssVar": "--duration-collapse", "type": "duration", "category": "primitive", "description": null, "rawValue": "200ms", "resolved": { "base-light": "200ms", "base-dark": "200ms", "portfolio-light": "200ms", "portfolio-dark": "200ms" }, "axisAware": false, "usedBy": [] }, { "name": "easing-default", "cssVar": "--easing-default", "type": "cubicBezier", "category": "primitive", "description": null, "rawValue": "cubic-bezier(0.4, 0, 0.2, 1)", "resolved": { "base-light": "cubic-bezier(0.4, 0, 0.2, 1)", "base-dark": "cubic-bezier(0.4, 0, 0.2, 1)", "portfolio-light": "cubic-bezier(0.4, 0, 0.2, 1)", "portfolio-dark": "cubic-bezier(0.4, 0, 0.2, 1)" }, "axisAware": false, "usedBy": [] }, { "name": "easing-in", "cssVar": "--easing-in", "type": "cubicBezier", "category": "primitive", "description": null, "rawValue": "cubic-bezier(0.4, 0, 1, 1)", "resolved": { "base-light": "cubic-bezier(0.4, 0, 1, 1)", "base-dark": "cubic-bezier(0.4, 0, 1, 1)", "portfolio-light": "cubic-bezier(0.4, 0, 1, 1)", "portfolio-dark": "cubic-bezier(0.4, 0, 1, 1)" }, "axisAware": false, "usedBy": [] }, { "name": "easing-out", "cssVar": "--easing-out", "type": "cubicBezier", "category": "primitive", "description": null, "rawValue": "cubic-bezier(0, 0, 0.2, 1)", "resolved": { "base-light": "cubic-bezier(0, 0, 0.2, 1)", "base-dark": "cubic-bezier(0, 0, 0.2, 1)", "portfolio-light": "cubic-bezier(0, 0, 0.2, 1)", "portfolio-dark": "cubic-bezier(0, 0, 0.2, 1)" }, "axisAware": false, "usedBy": [] }, { "name": "opacity-subtle", "cssVar": "--opacity-subtle", "type": "number", "category": "primitive", "description": null, "rawValue": "0.05", "resolved": { "base-light": "0.05", "base-dark": "0.05", "portfolio-light": "0.05", "portfolio-dark": "0.05" }, "axisAware": false, "usedBy": [] }, { "name": "opacity-low", "cssVar": "--opacity-low", "type": "number", "category": "primitive", "description": null, "rawValue": "0.1", "resolved": { "base-light": "0.1", "base-dark": "0.1", "portfolio-light": "0.1", "portfolio-dark": "0.1" }, "axisAware": false, "usedBy": [] }, { "name": "opacity-medium", "cssVar": "--opacity-medium", "type": "number", "category": "primitive", "description": null, "rawValue": "0.3", "resolved": { "base-light": "0.3", "base-dark": "0.3", "portfolio-light": "0.3", "portfolio-dark": "0.3" }, "axisAware": false, "usedBy": [] }, { "name": "opacity-high", "cssVar": "--opacity-high", "type": "number", "category": "primitive", "description": null, "rawValue": "0.7", "resolved": { "base-light": "0.7", "base-dark": "0.7", "portfolio-light": "0.7", "portfolio-dark": "0.7" }, "axisAware": false, "usedBy": [] }, { "name": "feedback-error-50", "cssVar": "--feedback-error-50", "type": "color", "category": "primitive", "description": null, "rawValue": "#FEF2F2", "resolved": { "base-light": "#FEF2F2", "base-dark": "#FEF2F2", "portfolio-light": "#FEF2F2", "portfolio-dark": "#FEF2F2" }, "axisAware": false, "usedBy": [] }, { "name": "feedback-error-400", "cssVar": "--feedback-error-400", "type": "color", "category": "primitive", "description": null, "rawValue": "#e05c4b", "resolved": { "base-light": "#e05c4b", "base-dark": "#e05c4b", "portfolio-light": "#e05c4b", "portfolio-dark": "#e05c4b" }, "axisAware": false, "usedBy": [] }, { "name": "feedback-error-500", "cssVar": "--feedback-error-500", "type": "color", "category": "primitive", "description": null, "rawValue": "#c0392b", "resolved": { "base-light": "#c0392b", "base-dark": "#c0392b", "portfolio-light": "#c0392b", "portfolio-dark": "#c0392b" }, "axisAware": false, "usedBy": [] }, { "name": "feedback-error-600", "cssVar": "--feedback-error-600", "type": "color", "category": "primitive", "description": null, "rawValue": "#a93226", "resolved": { "base-light": "#a93226", "base-dark": "#a93226", "portfolio-light": "#a93226", "portfolio-dark": "#a93226" }, "axisAware": false, "usedBy": [] }, { "name": "feedback-success-50", "cssVar": "--feedback-success-50", "type": "color", "category": "primitive", "description": null, "rawValue": "#F0FDF4", "resolved": { "base-light": "#F0FDF4", "base-dark": "#F0FDF4", "portfolio-light": "#F0FDF4", "portfolio-dark": "#F0FDF4" }, "axisAware": false, "usedBy": [] }, { "name": "feedback-success-500", "cssVar": "--feedback-success-500", "type": "color", "category": "primitive", "description": null, "rawValue": "#16A34A", "resolved": { "base-light": "#16A34A", "base-dark": "#16A34A", "portfolio-light": "#16A34A", "portfolio-dark": "#16A34A" }, "axisAware": false, "usedBy": [] }, { "name": "feedback-success-600", "cssVar": "--feedback-success-600", "type": "color", "category": "primitive", "description": null, "rawValue": "#15803D", "resolved": { "base-light": "#15803D", "base-dark": "#15803D", "portfolio-light": "#15803D", "portfolio-dark": "#15803D" }, "axisAware": false, "usedBy": [] }, { "name": "feedback-warning-50", "cssVar": "--feedback-warning-50", "type": "color", "category": "primitive", "description": null, "rawValue": "#FFFBEB", "resolved": { "base-light": "#FFFBEB", "base-dark": "#FFFBEB", "portfolio-light": "#FFFBEB", "portfolio-dark": "#FFFBEB" }, "axisAware": false, "usedBy": [] }, { "name": "feedback-warning-500", "cssVar": "--feedback-warning-500", "type": "color", "category": "primitive", "description": null, "rawValue": "#D97706", "resolved": { "base-light": "#D97706", "base-dark": "#D97706", "portfolio-light": "#D97706", "portfolio-dark": "#D97706" }, "axisAware": false, "usedBy": [] }, { "name": "feedback-warning-600", "cssVar": "--feedback-warning-600", "type": "color", "category": "primitive", "description": null, "rawValue": "#B45309", "resolved": { "base-light": "#B45309", "base-dark": "#B45309", "portfolio-light": "#B45309", "portfolio-dark": "#B45309" }, "axisAware": false, "usedBy": [] }, { "name": "feedback-info-50", "cssVar": "--feedback-info-50", "type": "color", "category": "primitive", "description": null, "rawValue": "#EFF6FF", "resolved": { "base-light": "#EFF6FF", "base-dark": "#EFF6FF", "portfolio-light": "#EFF6FF", "portfolio-dark": "#EFF6FF" }, "axisAware": false, "usedBy": [] }, { "name": "feedback-info-500", "cssVar": "--feedback-info-500", "type": "color", "category": "primitive", "description": null, "rawValue": "#2563EB", "resolved": { "base-light": "#2563EB", "base-dark": "#2563EB", "portfolio-light": "#2563EB", "portfolio-dark": "#2563EB" }, "axisAware": false, "usedBy": [] }, { "name": "feedback-info-600", "cssVar": "--feedback-info-600", "type": "color", "category": "primitive", "description": null, "rawValue": "#1D4ED8", "resolved": { "base-light": "#1D4ED8", "base-dark": "#1D4ED8", "portfolio-light": "#1D4ED8", "portfolio-dark": "#1D4ED8" }, "axisAware": false, "usedBy": [] }, { "name": "shadow-none", "cssVar": "--shadow-none", "type": "shadow", "category": "primitive", "description": null, "rawValue": "none", "resolved": { "base-light": "none", "base-dark": "none", "portfolio-light": "none", "portfolio-dark": "none" }, "axisAware": false, "usedBy": [] }, { "name": "shadow-xs", "cssVar": "--shadow-xs", "type": "shadow", "category": "primitive", "description": null, "rawValue": "0 1px 2px 0 rgba(0,0,0,0.05)", "resolved": { "base-light": "0 1px 2px 0 rgba(0,0,0,0.05)", "base-dark": "0 1px 2px 0 rgba(0,0,0,0.05)", "portfolio-light": "0 1px 2px 0 rgba(0,0,0,0.05)", "portfolio-dark": "0 1px 2px 0 rgba(0,0,0,0.05)" }, "axisAware": false, "usedBy": [] }, { "name": "shadow-sm", "cssVar": "--shadow-sm", "type": "shadow", "category": "primitive", "description": null, "rawValue": "0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10)", "resolved": { "base-light": "0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10)", "base-dark": "0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10)", "portfolio-light": "0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10)", "portfolio-dark": "0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10)" }, "axisAware": false, "usedBy": [] }, { "name": "shadow-md", "cssVar": "--shadow-md", "type": "shadow", "category": "primitive", "description": null, "rawValue": "0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10)", "resolved": { "base-light": "0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10)", "base-dark": "0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10)", "portfolio-light": "0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10)", "portfolio-dark": "0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10)" }, "axisAware": false, "usedBy": [] }, { "name": "shadow-lg", "cssVar": "--shadow-lg", "type": "shadow", "category": "primitive", "description": null, "rawValue": "0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10)", "resolved": { "base-light": "0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10)", "base-dark": "0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10)", "portfolio-light": "0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10)", "portfolio-dark": "0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10)" }, "axisAware": false, "usedBy": [] }, { "name": "icon-size-xs", "cssVar": "--icon-size-xs", "type": "dimension", "category": "primitive", "description": null, "rawValue": "12px", "resolved": { "base-light": "12px", "base-dark": "12px", "portfolio-light": "12px", "portfolio-dark": "12px" }, "axisAware": false, "usedBy": [] }, { "name": "icon-size-sm", "cssVar": "--icon-size-sm", "type": "dimension", "category": "primitive", "description": null, "rawValue": "16px", "resolved": { "base-light": "16px", "base-dark": "16px", "portfolio-light": "16px", "portfolio-dark": "16px" }, "axisAware": false, "usedBy": [] }, { "name": "icon-size-md", "cssVar": "--icon-size-md", "type": "dimension", "category": "primitive", "description": null, "rawValue": "20px", "resolved": { "base-light": "20px", "base-dark": "20px", "portfolio-light": "20px", "portfolio-dark": "20px" }, "axisAware": false, "usedBy": [] }, { "name": "icon-size-lg", "cssVar": "--icon-size-lg", "type": "dimension", "category": "primitive", "description": null, "rawValue": "24px", "resolved": { "base-light": "24px", "base-dark": "24px", "portfolio-light": "24px", "portfolio-dark": "24px" }, "axisAware": false, "usedBy": [] }, { "name": "icon-size-xl", "cssVar": "--icon-size-xl", "type": "dimension", "category": "primitive", "description": null, "rawValue": "32px", "resolved": { "base-light": "32px", "base-dark": "32px", "portfolio-light": "32px", "portfolio-dark": "32px" }, "axisAware": false, "usedBy": [] }, { "name": "border-width-thin", "cssVar": "--border-width-thin", "type": "dimension", "category": "primitive", "description": null, "rawValue": "1px", "resolved": { "base-light": "1px", "base-dark": "1px", "portfolio-light": "1px", "portfolio-dark": "1px" }, "axisAware": false, "usedBy": [] }, { "name": "border-width-medium", "cssVar": "--border-width-medium", "type": "dimension", "category": "primitive", "description": null, "rawValue": "2px", "resolved": { "base-light": "2px", "base-dark": "2px", "portfolio-light": "2px", "portfolio-dark": "2px" }, "axisAware": false, "usedBy": [] }, { "name": "border-width-thick", "cssVar": "--border-width-thick", "type": "dimension", "category": "primitive", "description": null, "rawValue": "4px", "resolved": { "base-light": "4px", "base-dark": "4px", "portfolio-light": "4px", "portfolio-dark": "4px" }, "axisAware": false, "usedBy": [] }, { "name": "size-icon-interactive", "cssVar": "--size-icon-interactive", "type": "dimension", "category": "primitive", "description": null, "rawValue": "28px", "resolved": { "base-light": "28px", "base-dark": "28px", "portfolio-light": "28px", "portfolio-dark": "28px" }, "axisAware": false, "usedBy": [] }, { "name": "size-touch-target", "cssVar": "--size-touch-target", "type": "dimension", "category": "primitive", "description": null, "rawValue": "44px", "resolved": { "base-light": "44px", "base-dark": "44px", "portfolio-light": "44px", "portfolio-dark": "44px" }, "axisAware": false, "usedBy": [] }, { "name": "size-dialog-sm", "cssVar": "--size-dialog-sm", "type": "dimension", "category": "primitive", "description": null, "rawValue": "480px", "resolved": { "base-light": "480px", "base-dark": "480px", "portfolio-light": "480px", "portfolio-dark": "480px" }, "axisAware": false, "usedBy": [] }, { "name": "size-dialog-md", "cssVar": "--size-dialog-md", "type": "dimension", "category": "primitive", "description": null, "rawValue": "560px", "resolved": { "base-light": "560px", "base-dark": "560px", "portfolio-light": "560px", "portfolio-dark": "560px" }, "axisAware": false, "usedBy": [] }, { "name": "size-dialog-lg", "cssVar": "--size-dialog-lg", "type": "dimension", "category": "primitive", "description": null, "rawValue": "720px", "resolved": { "base-light": "720px", "base-dark": "720px", "portfolio-light": "720px", "portfolio-dark": "720px" }, "axisAware": false, "usedBy": [] }, { "name": "size-layout-md", "cssVar": "--size-layout-md", "type": "dimension", "category": "primitive", "description": null, "rawValue": "1024px", "resolved": { "base-light": "1024px", "base-dark": "1024px", "portfolio-light": "1024px", "portfolio-dark": "1024px" }, "axisAware": false, "usedBy": [] }, { "name": "size-layout-lg", "cssVar": "--size-layout-lg", "type": "dimension", "category": "primitive", "description": null, "rawValue": "1200px", "resolved": { "base-light": "1200px", "base-dark": "1200px", "portfolio-light": "1200px", "portfolio-dark": "1200px" }, "axisAware": false, "usedBy": [] }, { "name": "size-layout-xl", "cssVar": "--size-layout-xl", "type": "dimension", "category": "primitive", "description": null, "rawValue": "1440px", "resolved": { "base-light": "1440px", "base-dark": "1440px", "portfolio-light": "1440px", "portfolio-dark": "1440px" }, "axisAware": false, "usedBy": [] }, { "name": "size-container-45", "cssVar": "--size-container-45", "type": "dimension", "category": "primitive", "description": null, "rawValue": "45rem", "resolved": { "base-light": "45rem", "base-dark": "45rem", "portfolio-light": "45rem", "portfolio-dark": "45rem" }, "axisAware": false, "usedBy": [] }, { "name": "size-container-60", "cssVar": "--size-container-60", "type": "dimension", "category": "primitive", "description": null, "rawValue": "60rem", "resolved": { "base-light": "60rem", "base-dark": "60rem", "portfolio-light": "60rem", "portfolio-dark": "60rem" }, "axisAware": false, "usedBy": [] }, { "name": "size-container-80", "cssVar": "--size-container-80", "type": "dimension", "category": "primitive", "description": null, "rawValue": "80rem", "resolved": { "base-light": "80rem", "base-dark": "80rem", "portfolio-light": "80rem", "portfolio-dark": "80rem" }, "axisAware": false, "usedBy": [] }, { "name": "size-container-90", "cssVar": "--size-container-90", "type": "dimension", "category": "primitive", "description": null, "rawValue": "90rem", "resolved": { "base-light": "90rem", "base-dark": "90rem", "portfolio-light": "90rem", "portfolio-dark": "90rem" }, "axisAware": false, "usedBy": [] }, { "name": "size-container-viewport-90", "cssVar": "--size-container-viewport-90", "type": "dimension", "category": "primitive", "description": null, "rawValue": "90vw", "resolved": { "base-light": "90vw", "base-dark": "90vw", "portfolio-light": "90vw", "portfolio-dark": "90vw" }, "axisAware": false, "usedBy": [] }, { "name": "breakpoint-tablet", "cssVar": "--breakpoint-tablet", "type": "dimension", "category": "primitive", "description": "Viewport width where tablet layouts start. Below it is mobile. Write the literal value in @media, mobile-first min-width only: @media (min-width: 768px). Custom properties can't be read inside @media; no-unknown-breakpoint checks the literal against this token. JS: lib/breakpoints.ts. See decisions/0018.", "rawValue": "768px", "resolved": { "base-light": "768px", "base-dark": "768px", "portfolio-light": "768px", "portfolio-dark": "768px" }, "axisAware": false, "usedBy": [] }, { "name": "breakpoint-desktop", "cssVar": "--breakpoint-desktop", "type": "dimension", "category": "primitive", "description": "Viewport width where desktop layouts start: the header/side-nav switch (NavigationMenu, SideNav) and the site container tier. Write the literal value in @media, min-width only: @media (min-width: 1024px). JS: lib/breakpoints.ts. See decisions/0018.", "rawValue": "1024px", "resolved": { "base-light": "1024px", "base-dark": "1024px", "portfolio-light": "1024px", "portfolio-dark": "1024px" }, "axisAware": false, "usedBy": [] }, { "name": "color-neutral-50", "cssVar": "--color-neutral-50", "type": "color", "category": "color", "description": "Lightest step of the neutral ramp in light mode, darkest in dark mode. The page background resolves here.", "rawValue": "{color.warm-50}", "resolved": { "base-light": "#FAFAFA", "base-dark": "#171717", "portfolio-light": "#FAFAF9", "portfolio-dark": "#1c1917" }, "axisAware": true, "usedBy": [] }, { "name": "color-neutral-100", "cssVar": "--color-neutral-100", "type": "color", "category": "color", "description": "Second step of the neutral ramp. Secondary surfaces and skeleton highlights resolve here.", "rawValue": "{color.warm-100}", "resolved": { "base-light": "#F5F5F5", "base-dark": "#262626", "portfolio-light": "#F4F0EB", "portfolio-dark": "#292524" }, "axisAware": true, "usedBy": [] }, { "name": "color-neutral-200", "cssVar": "--color-neutral-200", "type": "color", "category": "color", "description": "Third step of the neutral ramp. Default borders, tertiary surfaces and the skeleton base resolve here.", "rawValue": "{color.warm-200}", "resolved": { "base-light": "#E5E5E5", "base-dark": "#404040", "portfolio-light": "#E2DDD9", "portfolio-dark": "#44403c" }, "axisAware": true, "usedBy": [] }, { "name": "color-neutral-300", "cssVar": "--color-neutral-300", "type": "color", "category": "color", "description": "Fourth step of the neutral ramp. The route-transition curtain resolves here.", "rawValue": "{color.warm-300}", "resolved": { "base-light": "#D4D4D4", "base-dark": "#525252", "portfolio-light": "#C8C3BE", "portfolio-dark": "#57534e" }, "axisAware": true, "usedBy": [] }, { "name": "color-neutral-400", "cssVar": "--color-neutral-400", "type": "color", "category": "color", "description": "Fifth step of the neutral ramp. Strong borders on form controls resolve here.", "rawValue": "{color.warm-400}", "resolved": { "base-light": "#A3A3A3", "base-dark": "#737373", "portfolio-light": "#A8A29E", "portfolio-dark": "#78716c" }, "axisAware": true, "usedBy": [] }, { "name": "color-neutral-500", "cssVar": "--color-neutral-500", "type": "color", "category": "color", "description": "Middle of the neutral ramp.", "rawValue": "{color.warm-500}", "resolved": { "base-light": "#737373", "base-dark": "#A3A3A3", "portfolio-light": "#78716C", "portfolio-dark": "#a8a29e" }, "axisAware": true, "usedBy": [] }, { "name": "color-neutral-600", "cssVar": "--color-neutral-600", "type": "color", "category": "color", "description": "Seventh step of the neutral ramp. Secondary text resolves here.", "rawValue": "{color.warm-600}", "resolved": { "base-light": "#525252", "base-dark": "#D4D4D4", "portfolio-light": "#57534E", "portfolio-dark": "#c8c3be" }, "axisAware": true, "usedBy": [] }, { "name": "color-neutral-700", "cssVar": "--color-neutral-700", "type": "color", "category": "color", "description": "Eighth step of the neutral ramp.", "rawValue": "{color.warm-700}", "resolved": { "base-light": "#404040", "base-dark": "#E5E5E5", "portfolio-light": "#44403C", "portfolio-dark": "#e2ddd9" }, "axisAware": true, "usedBy": [] }, { "name": "color-neutral-800", "cssVar": "--color-neutral-800", "type": "color", "category": "color", "description": "Ninth step of the neutral ramp. The base accent resolves here.", "rawValue": "{color.warm-800}", "resolved": { "base-light": "#262626", "base-dark": "#F5F5F5", "portfolio-light": "#292524", "portfolio-dark": "#f4f0eb" }, "axisAware": true, "usedBy": [] }, { "name": "color-neutral-900", "cssVar": "--color-neutral-900", "type": "color", "category": "color", "description": "Strongest step of the neutral ramp: near-black in light mode, near-white in dark. Inverse surfaces resolve here.", "rawValue": "{color.warm-900}", "resolved": { "base-light": "#171717", "base-dark": "#FAFAFA", "portfolio-light": "#1C1917", "portfolio-dark": "#fafaf9" }, "axisAware": true, "usedBy": [] }, { "name": "color-surface-primary", "cssVar": "--color-surface-primary", "type": "color", "category": "color", "description": "The page background, and containers that sit flat on it: cards, dialogs, drawers, menus, form fields.", "rawValue": "{color-neutral-50}", "resolved": { "base-light": "#FAFAFA", "base-dark": "#171717", "portfolio-light": "#FAFAF9", "portfolio-dark": "#1c1917" }, "axisAware": true, "usedBy": [ "Card", "Dialog", "Drawer", "Menu", "NavigationMenu", "Toast", "Hero", "Checkbox", "Input", "Radio", "Select", "Textarea" ] }, { "name": "color-surface-secondary", "cssVar": "--color-surface-secondary", "type": "color", "category": "color", "description": "A second surface layer: hover and selected fills on tabs, nav items, pagination and accordion triggers.", "rawValue": "{color-neutral-100}", "resolved": { "base-light": "#F5F5F5", "base-dark": "#262626", "portfolio-light": "#F4F0EB", "portfolio-dark": "#292524" }, "axisAware": true, "usedBy": [ "Card", "Menu", "NavigationMenu", "Accordion", "Pagination", "SideNav", "Table", "Tabs", "Avatar", "Badge", "Button", "Checkbox", "Input", "Radio", "Select", "Tag", "Textarea" ] }, { "name": "color-surface-tertiary", "cssVar": "--color-surface-tertiary", "type": "color", "category": "color", "description": "A third surface layer, for contrast against the secondary one. Switch tracks use it.", "rawValue": "{color-neutral-200}", "resolved": { "base-light": "#E5E5E5", "base-dark": "#404040", "portfolio-light": "#E2DDD9", "portfolio-dark": "#44403c" }, "axisAware": true, "usedBy": [ "Dialog", "Drawer", "Table", "Switch" ] }, { "name": "color-surface-inverse", "cssVar": "--color-surface-inverse", "type": "color", "category": "color", "description": "Background for dark-on-light moments, such as tooltips. Flips with the mode.", "rawValue": "{color-neutral-900}", "resolved": { "base-light": "#171717", "base-dark": "#FAFAFA", "portfolio-light": "#1C1917", "portfolio-dark": "#fafaf9" }, "axisAware": true, "usedBy": [ "Tooltip" ] }, { "name": "color-text-primary", "cssVar": "--color-text-primary", "type": "color", "category": "color", "description": "Body copy and headings.", "rawValue": "{color.black}", "resolved": { "base-light": "#0A0A0A", "base-dark": "#FAFAFA", "portfolio-light": "#0A0A0A", "portfolio-dark": "#fafaf9" }, "axisAware": true, "usedBy": [ "Dialog", "Drawer", "Menu", "NavigationMenu", "Toast", "Accordion", "Breadcrumb", "Hero", "Pagination", "SideNav", "Table", "Tabs", "Button", "Checkbox", "Heading", "Input", "Label", "Radio", "Select", "Switch", "Textarea" ] }, { "name": "color-text-secondary", "cssVar": "--color-text-secondary", "type": "color", "category": "color", "description": "Supporting text: hints, captions, metadata, inactive tabs.", "rawValue": "{color-neutral-600}", "resolved": { "base-light": "#525252", "base-dark": "#D4D4D4", "portfolio-light": "#57534E", "portfolio-dark": "#c8c3be" }, "axisAware": true, "usedBy": [ "Card", "Dialog", "Drawer", "Menu", "NavigationMenu", "Toast", "Accordion", "Breadcrumb", "DataTable", "EmptyState", "Hero", "Pagination", "SideNav", "Table", "Tabs", "Avatar", "Badge", "Checkbox", "Input", "Label", "Radio", "Select", "Switch", "Tag", "Textarea" ] }, { "name": "color-text-inverse", "cssVar": "--color-text-inverse", "type": "color", "category": "color", "description": "Text on color-surface-inverse.", "rawValue": "{color-neutral-50}", "resolved": { "base-light": "#FAFAFA", "base-dark": "#171717", "portfolio-light": "#FAFAF9", "portfolio-dark": "#1c1917" }, "axisAware": true, "usedBy": [ "Tooltip" ] }, { "name": "color-accent-default", "cssVar": "--color-accent-default", "type": "color", "category": "color", "description": "Primary actions and selected states: filled buttons, checked controls, the active tab. Near-black in base; a brand puts its own colour here.", "rawValue": "{color-neutral-800}", "resolved": { "base-light": "#262626", "base-dark": "#F5F5F5", "portfolio-light": "#292524", "portfolio-dark": "#f4f0eb" }, "axisAware": true, "usedBy": [ "Card", "Pagination", "Table", "Tabs", "Button", "Checkbox", "Link", "Radio", "SkipLink", "Switch", "Tag" ] }, { "name": "color-accent-hover", "cssVar": "--color-accent-hover", "type": "color", "category": "color", "description": "Hover state of color-accent-default.", "rawValue": "{color-neutral-900}", "resolved": { "base-light": "#171717", "base-dark": "#FAFAFA", "portfolio-light": "#1C1917", "portfolio-dark": "#fafaf9" }, "axisAware": true, "usedBy": [ "Button", "Link" ] }, { "name": "color-accent-foreground", "cssVar": "--color-accent-foreground", "type": "color", "category": "color", "description": "Text and icons on an accent fill.", "rawValue": "{color.white}", "resolved": { "base-light": "#FFFFFF", "base-dark": "#171717", "portfolio-light": "#FFFFFF", "portfolio-dark": "#1c1917" }, "axisAware": true, "usedBy": [ "Pagination", "Button", "Checkbox", "SkipLink", "Switch", "Tag" ] }, { "name": "color-border-default", "cssVar": "--color-border-default", "type": "color", "category": "color", "description": "Dividers and the outlines of cards, tables, menus and fields.", "rawValue": "{color-neutral-200}", "resolved": { "base-light": "#E5E5E5", "base-dark": "#404040", "portfolio-light": "#E2DDD9", "portfolio-dark": "#57534e" }, "axisAware": true, "usedBy": [ "Card", "Dialog", "Drawer", "Menu", "NavigationMenu", "Toast", "Accordion", "Pagination", "SideNav", "Table", "Tabs", "Avatar", "Badge", "Input", "Select", "Tag", "Textarea" ] }, { "name": "color-border-strong", "cssVar": "--color-border-strong", "type": "color", "category": "color", "description": "Outlines that must read as interactive: form fields, checkboxes, radios, switches.", "rawValue": "{color-neutral-400}", "resolved": { "base-light": "#A3A3A3", "base-dark": "#737373", "portfolio-light": "#A8A29E", "portfolio-dark": "#78716c" }, "axisAware": true, "usedBy": [ "Card", "Checkbox", "Input", "Radio", "Select", "Switch", "Textarea" ] }, { "name": "color-border-focus", "cssVar": "--color-border-focus", "type": "color", "category": "color", "description": "The focus ring. Pairs with focus-ring-width and focus-ring-offset.", "rawValue": "{color.black}", "resolved": { "base-light": "#0A0A0A", "base-dark": "#FAFAFA", "portfolio-light": "#0A0A0A", "portfolio-dark": "#fafaf9" }, "axisAware": true, "usedBy": [ "Alert", "Card", "Dialog", "Drawer", "NavigationMenu", "Toast", "Accordion", "Breadcrumb", "Pagination", "SideNav", "Table", "Tabs", "Avatar", "Button", "Checkbox", "Input", "Link", "Radio", "Select", "SkipLink", "Switch", "Tag", "Textarea" ] }, { "name": "color-curtain", "cssVar": "--color-curtain", "type": "color", "category": "color", "description": "Fill of the full-screen curtain shown during route transitions.", "rawValue": "{color-neutral-300}", "resolved": { "base-light": "#D4D4D4", "base-dark": "#525252", "portfolio-light": "#C8C3BE", "portfolio-dark": "#44403c" }, "axisAware": true, "usedBy": [] }, { "name": "color-feedback-error", "cssVar": "--color-feedback-error", "type": "color", "category": "color", "description": "Error text, icons and borders on the page background: invalid fields, destructive menu items.", "rawValue": "{feedback.error-500}", "resolved": { "base-light": "#c0392b", "base-dark": "#f87171", "portfolio-light": "#c0392b", "portfolio-dark": "#f87171" }, "axisAware": true, "usedBy": [ "Menu", "Input", "Label", "Textarea" ] }, { "name": "color-feedback-error-background", "cssVar": "--color-feedback-error-background", "type": "color", "category": "color", "description": "Background of an error Alert or Badge.", "rawValue": "{feedback.error-50}", "resolved": { "base-light": "#FEF2F2", "base-dark": "#262626", "portfolio-light": "#FEF2F2", "portfolio-dark": "#292524" }, "axisAware": true, "usedBy": [ "Alert", "Menu", "Badge" ] }, { "name": "color-feedback-error-foreground", "cssVar": "--color-feedback-error-foreground", "type": "color", "category": "color", "description": "Text and icons inside an error Alert, Toast or Badge.", "rawValue": "{feedback.error-600}", "resolved": { "base-light": "#a93226", "base-dark": "#f87171", "portfolio-light": "#a93226", "portfolio-dark": "#f87171" }, "axisAware": true, "usedBy": [ "Alert", "Toast", "Badge" ] }, { "name": "color-feedback-error-border", "cssVar": "--color-feedback-error-border", "type": "color", "category": "color", "description": "Border and accent stripe of an error Alert, Toast or Badge.", "rawValue": "{feedback.error-500}", "resolved": { "base-light": "#c0392b", "base-dark": "#f87171", "portfolio-light": "#c0392b", "portfolio-dark": "#f87171" }, "axisAware": true, "usedBy": [ "Alert", "Toast", "Badge" ] }, { "name": "color-feedback-success-background", "cssVar": "--color-feedback-success-background", "type": "color", "category": "color", "description": "Background of a success Alert or Badge.", "rawValue": "{feedback.success.50}", "resolved": { "base-light": "#F0FDF4", "base-dark": "#262626", "portfolio-light": "#F0FDF4", "portfolio-dark": "#292524" }, "axisAware": true, "usedBy": [ "Alert", "Badge" ] }, { "name": "color-feedback-success-foreground", "cssVar": "--color-feedback-success-foreground", "type": "color", "category": "color", "description": "Text and icons inside a success Alert, Toast or Badge.", "rawValue": "{feedback.success.600}", "resolved": { "base-light": "#15803D", "base-dark": "#f0fdf4", "portfolio-light": "#15803D", "portfolio-dark": "#f0fdf4" }, "axisAware": true, "usedBy": [ "Alert", "Toast", "Badge" ] }, { "name": "color-feedback-success-border", "cssVar": "--color-feedback-success-border", "type": "color", "category": "color", "description": "Border and accent stripe of a success Alert, Toast or Badge.", "rawValue": "{feedback.success.500}", "resolved": { "base-light": "#16A34A", "base-dark": "#4ade80", "portfolio-light": "#16A34A", "portfolio-dark": "#4ade80" }, "axisAware": true, "usedBy": [ "Alert", "Toast", "Badge" ] }, { "name": "color-feedback-warning-background", "cssVar": "--color-feedback-warning-background", "type": "color", "category": "color", "description": "Background of a warning Alert or Badge.", "rawValue": "{feedback.warning.50}", "resolved": { "base-light": "#FFFBEB", "base-dark": "#262626", "portfolio-light": "#FFFBEB", "portfolio-dark": "#292524" }, "axisAware": true, "usedBy": [ "Alert", "Badge" ] }, { "name": "color-feedback-warning-foreground", "cssVar": "--color-feedback-warning-foreground", "type": "color", "category": "color", "description": "Text and icons inside a warning Alert, Toast or Badge.", "rawValue": "{feedback.warning.600}", "resolved": { "base-light": "#B45309", "base-dark": "#fffbeb", "portfolio-light": "#B45309", "portfolio-dark": "#fffbeb" }, "axisAware": true, "usedBy": [ "Alert", "Toast", "Badge" ] }, { "name": "color-feedback-warning-border", "cssVar": "--color-feedback-warning-border", "type": "color", "category": "color", "description": "Border and accent stripe of a warning Alert, Toast or Badge.", "rawValue": "{feedback.warning.500}", "resolved": { "base-light": "#D97706", "base-dark": "#fcd34d", "portfolio-light": "#D97706", "portfolio-dark": "#fcd34d" }, "axisAware": true, "usedBy": [ "Alert", "Toast", "Badge" ] }, { "name": "color-feedback-info-background", "cssVar": "--color-feedback-info-background", "type": "color", "category": "color", "description": "Background of an info Alert or Badge.", "rawValue": "{feedback.info.50}", "resolved": { "base-light": "#EFF6FF", "base-dark": "#262626", "portfolio-light": "#EFF6FF", "portfolio-dark": "#292524" }, "axisAware": true, "usedBy": [ "Alert", "Badge" ] }, { "name": "color-feedback-info-foreground", "cssVar": "--color-feedback-info-foreground", "type": "color", "category": "color", "description": "Text and icons inside an info Alert, Toast or Badge.", "rawValue": "{feedback.info.600}", "resolved": { "base-light": "#1D4ED8", "base-dark": "#eff6ff", "portfolio-light": "#1D4ED8", "portfolio-dark": "#eff6ff" }, "axisAware": true, "usedBy": [ "Alert", "Toast", "Badge" ] }, { "name": "color-feedback-info-border", "cssVar": "--color-feedback-info-border", "type": "color", "category": "color", "description": "Border and accent stripe of an info Alert, Toast or Badge.", "rawValue": "{feedback.info.500}", "resolved": { "base-light": "#2563EB", "base-dark": "#60a5fa", "portfolio-light": "#2563EB", "portfolio-dark": "#60a5fa" }, "axisAware": true, "usedBy": [ "Alert", "Toast", "Badge" ] }, { "name": "color-skeleton-base", "cssVar": "--color-skeleton-base", "type": "color", "category": "color", "description": "Resting colour of a loading Skeleton.", "rawValue": "{color-neutral-200}", "resolved": { "base-light": "#E5E5E5", "base-dark": "#404040", "portfolio-light": "#E2DDD9", "portfolio-dark": "#44403c" }, "axisAware": true, "usedBy": [ "Skeleton" ] }, { "name": "color-skeleton-highlight", "cssVar": "--color-skeleton-highlight", "type": "color", "category": "color", "description": "The colour a loading Skeleton pulses towards.", "rawValue": "{color-neutral-100}", "resolved": { "base-light": "#F5F5F5", "base-dark": "#262626", "portfolio-light": "#F4F0EB", "portfolio-dark": "#292524" }, "axisAware": true, "usedBy": [ "Skeleton" ] }, { "name": "duration-skeleton", "cssVar": "--duration-skeleton", "type": "duration", "category": "motion", "description": "Length of one Skeleton pulse.", "rawValue": "{duration.slow}", "resolved": { "base-light": "400ms", "base-dark": "400ms", "portfolio-light": "400ms", "portfolio-dark": "400ms" }, "axisAware": false, "usedBy": [ "Skeleton" ] }, { "name": "focus-ring-width", "cssVar": "--focus-ring-width", "type": "dimension", "category": "size", "description": "Thickness of the focus ring.", "rawValue": "{border-width.medium}", "resolved": { "base-light": "2px", "base-dark": "2px", "portfolio-light": "2px", "portfolio-dark": "2px" }, "axisAware": false, "usedBy": [ "Alert", "Card", "Dialog", "Drawer", "NavigationMenu", "Toast", "Accordion", "Breadcrumb", "Pagination", "SideNav", "Table", "Tabs", "Button", "Checkbox", "Input", "Link", "Radio", "Select", "SkipLink", "Switch", "Tag", "Textarea" ] }, { "name": "focus-ring-offset", "cssVar": "--focus-ring-offset", "type": "dimension", "category": "size", "description": "Gap between an element and its focus ring.", "rawValue": "{space.1}", "resolved": { "base-light": "4px", "base-dark": "4px", "portfolio-light": "4px", "portfolio-dark": "4px" }, "axisAware": false, "usedBy": [ "Alert", "Card", "Dialog", "Drawer", "NavigationMenu", "Toast", "Accordion", "Breadcrumb", "Pagination", "SideNav", "Table", "Tabs", "Avatar", "Button", "Checkbox", "Input", "Link", "Radio", "Select", "SkipLink", "Switch", "Tag", "Textarea" ] }, { "name": "shadow-card", "cssVar": "--shadow-card", "type": "shadow", "category": "shadow", "description": null, "rawValue": "{shadow.xs}", "resolved": { "base-light": "0 1px 2px 0 rgba(0,0,0,0.05)", "base-dark": "0 1px 2px 0 rgba(0,0,0,0.05)", "portfolio-light": "0 1px 2px 0 rgba(0,0,0,0.05)", "portfolio-dark": "0 1px 2px 0 rgba(0,0,0,0.05)" }, "axisAware": false, "usedBy": [] }, { "name": "shadow-card-hover", "cssVar": "--shadow-card-hover", "type": "shadow", "category": "shadow", "description": "Shadow a clickable Card lifts to on hover.", "rawValue": "{shadow.sm}", "resolved": { "base-light": "0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10)", "base-dark": "0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10)", "portfolio-light": "0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10)", "portfolio-dark": "0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10)" }, "axisAware": false, "usedBy": [ "Card" ] }, { "name": "shadow-dropdown", "cssVar": "--shadow-dropdown", "type": "shadow", "category": "shadow", "description": "Shadow under floating lists: Menu, NavigationMenu dropdowns, Select.", "rawValue": "{shadow.md}", "resolved": { "base-light": "0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10)", "base-dark": "0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10)", "portfolio-light": "0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10)", "portfolio-dark": "0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10)" }, "axisAware": false, "usedBy": [ "Menu", "NavigationMenu", "Select" ] }, { "name": "shadow-dialog", "cssVar": "--shadow-dialog", "type": "shadow", "category": "shadow", "description": "Shadow on overlay panels. Drawer uses it.", "rawValue": "{shadow.md}", "resolved": { "base-light": "0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10)", "base-dark": "0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10)", "portfolio-light": "0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10)", "portfolio-dark": "0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10)" }, "axisAware": false, "usedBy": [ "Drawer" ] }, { "name": "shadow-toast", "cssVar": "--shadow-toast", "type": "shadow", "category": "shadow", "description": "Shadow under Toasts and Tooltips, which float above everything else.", "rawValue": "{shadow.lg}", "resolved": { "base-light": "0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10)", "base-dark": "0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10)", "portfolio-light": "0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10)", "portfolio-dark": "0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10)" }, "axisAware": false, "usedBy": [ "Toast", "Tooltip" ] }, { "name": "z-sticky", "cssVar": "--z-sticky", "type": "number", "category": "elevation", "description": null, "rawValue": "100", "resolved": { "base-light": "100", "base-dark": "100", "portfolio-light": "100", "portfolio-dark": "100" }, "axisAware": false, "usedBy": [] }, { "name": "z-dropdown", "cssVar": "--z-dropdown", "type": "number", "category": "elevation", "description": "Stacking level for NavigationMenu's dropdown, above page content.", "rawValue": "200", "resolved": { "base-light": "200", "base-dark": "200", "portfolio-light": "200", "portfolio-dark": "200" }, "axisAware": false, "usedBy": [ "NavigationMenu" ] }, { "name": "z-overlay", "cssVar": "--z-overlay", "type": "number", "category": "elevation", "description": null, "rawValue": "300", "resolved": { "base-light": "300", "base-dark": "300", "portfolio-light": "300", "portfolio-dark": "300" }, "axisAware": false, "usedBy": [] }, { "name": "z-modal", "cssVar": "--z-modal", "type": "number", "category": "elevation", "description": null, "rawValue": "400", "resolved": { "base-light": "400", "base-dark": "400", "portfolio-light": "400", "portfolio-dark": "400" }, "axisAware": false, "usedBy": [] }, { "name": "z-toast", "cssVar": "--z-toast", "type": "number", "category": "elevation", "description": "Stacking level for the Toast viewport, above dialogs.", "rawValue": "500", "resolved": { "base-light": "500", "base-dark": "500", "portfolio-light": "500", "portfolio-dark": "500" }, "axisAware": false, "usedBy": [ "Toast" ] }, { "name": "z-tooltip", "cssVar": "--z-tooltip", "type": "number", "category": "elevation", "description": "Stacking level for Tooltips, the top of the normal stack.", "rawValue": "600", "resolved": { "base-light": "600", "base-dark": "600", "portfolio-light": "600", "portfolio-dark": "600" }, "axisAware": false, "usedBy": [ "Tooltip" ] }, { "name": "z-skip-link", "cssVar": "--z-skip-link", "type": "number", "category": "elevation", "description": "SkipLink only: one step above everything else. The one justified explicit z-index after decisions/0007 — a skip link isn't portalled, so mount order can't lift it, and it must sit above every other layer the moment it's focused.", "rawValue": "700", "resolved": { "base-light": "700", "base-dark": "700", "portfolio-light": "700", "portfolio-dark": "700" }, "axisAware": false, "usedBy": [ "SkipLink" ] }, { "name": "size-icon-xs", "cssVar": "--size-icon-xs", "type": "dimension", "category": "size", "description": "12px icon, such as Link's external-link arrow.", "rawValue": "{icon-size.xs}", "resolved": { "base-light": "12px", "base-dark": "12px", "portfolio-light": "12px", "portfolio-dark": "12px" }, "axisAware": false, "usedBy": [ "Link" ] }, { "name": "size-icon-sm", "cssVar": "--size-icon-sm", "type": "dimension", "category": "size", "description": "16px icon, inline with control text: menu items, nav chevrons, the small Spinner.", "rawValue": "{icon-size.sm}", "resolved": { "base-light": "16px", "base-dark": "16px", "portfolio-light": "16px", "portfolio-dark": "16px" }, "axisAware": false, "usedBy": [ "Menu", "NavigationMenu", "SideNav", "Spinner" ] }, { "name": "size-icon-md", "cssVar": "--size-icon-md", "type": "dimension", "category": "size", "description": "20px icon: Alert and Toast status icons, the Accordion chevron, the default Spinner.", "rawValue": "{icon-size.md}", "resolved": { "base-light": "20px", "base-dark": "20px", "portfolio-light": "20px", "portfolio-dark": "20px" }, "axisAware": false, "usedBy": [ "Alert", "Toast", "Accordion", "Spinner" ] }, { "name": "size-icon-lg", "cssVar": "--size-icon-lg", "type": "dimension", "category": "size", "description": "24px icon: the large Spinner.", "rawValue": "{icon-size.lg}", "resolved": { "base-light": "24px", "base-dark": "24px", "portfolio-light": "24px", "portfolio-dark": "24px" }, "axisAware": false, "usedBy": [ "Spinner" ] }, { "name": "size-icon-xl", "cssVar": "--size-icon-xl", "type": "dimension", "category": "size", "description": "32px icon, for standalone icons such as footer links.", "rawValue": "{icon-size.xl}", "resolved": { "base-light": "32px", "base-dark": "32px", "portfolio-light": "32px", "portfolio-dark": "32px" }, "axisAware": false, "usedBy": [] }, { "name": "duration-spin", "cssVar": "--duration-spin", "type": "duration", "category": "motion", "description": "One full turn of the Spinner.", "rawValue": "700ms", "resolved": { "base-light": "700ms", "base-dark": "700ms", "portfolio-light": "700ms", "portfolio-dark": "700ms" }, "axisAware": false, "usedBy": [ "Spinner" ] }, { "name": "font-family-base", "cssVar": "--font-family-base", "type": "fontFamily", "category": "typography", "description": "Typeface for body text and controls. A system stack in base; a brand sets its own.", "rawValue": "'Schibsted Grotesk', sans-serif", "resolved": { "base-light": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", "base-dark": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", "portfolio-light": "'Schibsted Grotesk', sans-serif", "portfolio-dark": "'Schibsted Grotesk', sans-serif" }, "axisAware": true, "usedBy": [ "Alert", "Menu", "NavigationMenu", "Toast", "Tooltip", "Accordion", "Breadcrumb", "DataTable", "EmptyState", "Hero", "Pagination", "SideNav", "Table", "Tabs", "Avatar", "Badge", "Button", "Checkbox", "Input", "Label", "Radio", "Select", "SkipLink", "Switch", "Tag", "Textarea" ] }, { "name": "font-family-heading", "cssVar": "--font-family-heading", "type": "fontFamily", "category": "typography", "description": "Typeface for headings. A system stack in base; a brand sets its own.", "rawValue": "'Schibsted Grotesk', sans-serif", "resolved": { "base-light": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", "base-dark": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", "portfolio-light": "'Schibsted Grotesk', sans-serif", "portfolio-dark": "'Schibsted Grotesk', sans-serif" }, "axisAware": true, "usedBy": [ "Dialog", "Hero", "Heading" ] }, { "name": "font-family-mono", "cssVar": "--font-family-mono", "type": "fontFamily", "category": "typography", "description": "Typeface for code: JetBrains Mono. tokens/fonts.json has the Google Fonts link that loads it.", "rawValue": "'JetBrains Mono', monospace", "resolved": { "base-light": "'JetBrains Mono', monospace", "base-dark": "'JetBrains Mono', monospace", "portfolio-light": "'JetBrains Mono', monospace", "portfolio-dark": "'JetBrains Mono', monospace" }, "axisAware": false, "usedBy": [] }, { "name": "font-size-body", "cssVar": "--font-size-body", "type": "dimension", "category": "typography", "description": "Running text: 18px.", "rawValue": "{font-size.md}", "resolved": { "base-light": "18px", "base-dark": "18px", "portfolio-light": "18px", "portfolio-dark": "18px" }, "axisAware": false, "usedBy": [ "Dialog", "Drawer", "EmptyState" ] }, { "name": "font-size-control", "cssVar": "--font-size-control", "type": "dimension", "category": "typography", "description": "Default text size for form controls and interactive components (inputs, buttons, tabs). Distinct from font-size-body (prose). See decisions/0004.", "rawValue": "{font-size.base}", "resolved": { "base-light": "16px", "base-dark": "16px", "portfolio-light": "16px", "portfolio-dark": "16px" }, "axisAware": false, "usedBy": [ "Alert", "Card", "Menu", "NavigationMenu", "Accordion", "SideNav", "Table", "Tabs", "Button", "Checkbox", "Input", "Radio", "Select", "SkipLink", "Switch", "Textarea" ] }, { "name": "font-size-small", "cssVar": "--font-size-small", "type": "dimension", "category": "typography", "description": "14px text: wrapping secondary text (pairs with line-height-small) and single-line form-field labels (pair with line-height-label). font-size-label merged into this role — see decisions/0013.", "rawValue": "{font-size.sm}", "resolved": { "base-light": "14px", "base-dark": "14px", "portfolio-light": "14px", "portfolio-dark": "14px" }, "axisAware": false, "usedBy": [ "Menu", "DataTable", "EmptyState", "Tabs", "Input", "Label", "Select", "Textarea" ] }, { "name": "font-size-caption", "cssVar": "--font-size-caption", "type": "dimension", "category": "typography", "description": "12px supporting text: hints, tooltips, table headers and captions, badges, tags, and consumer-side eyebrows or metadata. Pairs with line-height-caption — see decisions/0012.", "rawValue": "{font-size.xs}", "resolved": { "base-light": "12px", "base-dark": "12px", "portfolio-light": "12px", "portfolio-dark": "12px" }, "axisAware": false, "usedBy": [ "Tooltip", "Table", "Badge", "Input", "Tag", "Textarea" ] }, { "name": "font-size-h1", "cssVar": "--font-size-h1", "type": "dimension", "category": "typography", "description": "Static H1 size: 64px. Pairs with line-height-h1.", "rawValue": "{font-size.3xl}", "resolved": { "base-light": "64px", "base-dark": "64px", "portfolio-light": "64px", "portfolio-dark": "64px" }, "axisAware": false, "usedBy": [] }, { "name": "font-size-display", "cssVar": "--font-size-display", "type": "dimension", "category": "typography", "description": null, "rawValue": "clamp(2rem, 0.75rem + 5vw, 5rem)", "resolved": { "base-light": "clamp(2rem, 0.75rem + 5vw, 5rem)", "base-dark": "clamp(2rem, 0.75rem + 5vw, 5rem)", "portfolio-light": "clamp(2rem, 0.75rem + 5vw, 5rem)", "portfolio-dark": "clamp(2rem, 0.75rem + 5vw, 5rem)" }, "axisAware": false, "usedBy": [] }, { "name": "font-size-h1-fluid", "cssVar": "--font-size-h1-fluid", "type": "dimension", "category": "typography", "description": "H1 that scales with the viewport, from 28px to 64px.", "rawValue": "clamp(1.75rem, 0.75rem + 4vw, 4rem)", "resolved": { "base-light": "clamp(1.75rem, 0.75rem + 4vw, 4rem)", "base-dark": "clamp(1.75rem, 0.75rem + 4vw, 4rem)", "portfolio-light": "clamp(1.75rem, 0.75rem + 4vw, 4rem)", "portfolio-dark": "clamp(1.75rem, 0.75rem + 4vw, 4rem)" }, "axisAware": false, "usedBy": [ "Hero", "Heading" ] }, { "name": "font-size-h2", "cssVar": "--font-size-h2", "type": "dimension", "category": "typography", "description": "Static H2 size: 48px. Pairs with line-height-h2.", "rawValue": "{font-size.2xl}", "resolved": { "base-light": "48px", "base-dark": "48px", "portfolio-light": "48px", "portfolio-dark": "48px" }, "axisAware": false, "usedBy": [] }, { "name": "font-size-h2-fluid", "cssVar": "--font-size-h2-fluid", "type": "dimension", "category": "typography", "description": "H2 that scales with the viewport, from 26px to 48px.", "rawValue": "clamp(1.625rem, 1rem + 2.5vw, 3rem)", "resolved": { "base-light": "clamp(1.625rem, 1rem + 2.5vw, 3rem)", "base-dark": "clamp(1.625rem, 1rem + 2.5vw, 3rem)", "portfolio-light": "clamp(1.625rem, 1rem + 2.5vw, 3rem)", "portfolio-dark": "clamp(1.625rem, 1rem + 2.5vw, 3rem)" }, "axisAware": false, "usedBy": [ "Heading" ] }, { "name": "font-size-h3", "cssVar": "--font-size-h3", "type": "dimension", "category": "typography", "description": "Static H3 size: 32px. Pairs with line-height-h3.", "rawValue": "{font-size.xl}", "resolved": { "base-light": "32px", "base-dark": "32px", "portfolio-light": "32px", "portfolio-dark": "32px" }, "axisAware": false, "usedBy": [] }, { "name": "font-size-h3-fluid", "cssVar": "--font-size-h3-fluid", "type": "dimension", "category": "typography", "description": "H3 that scales with the viewport, from 24px to 40px.", "rawValue": "clamp(1.5rem, 1rem + 2vw, 2.5rem)", "resolved": { "base-light": "clamp(1.5rem, 1rem + 2vw, 2.5rem)", "base-dark": "clamp(1.5rem, 1rem + 2vw, 2.5rem)", "portfolio-light": "clamp(1.5rem, 1rem + 2vw, 2.5rem)", "portfolio-dark": "clamp(1.5rem, 1rem + 2vw, 2.5rem)" }, "axisAware": false, "usedBy": [ "Heading" ] }, { "name": "font-size-h4", "cssVar": "--font-size-h4", "type": "dimension", "category": "typography", "description": "H4 size: 24px. Pairs with line-height-h4.", "rawValue": "{font-size.lg}", "resolved": { "base-light": "24px", "base-dark": "24px", "portfolio-light": "24px", "portfolio-dark": "24px" }, "axisAware": false, "usedBy": [ "Dialog", "Heading" ] }, { "name": "font-size-h5", "cssVar": "--font-size-h5", "type": "dimension", "category": "typography", "description": "Static (not fluid) by design — see decisions/0008. Pairs with its own fixed line-height role (decisions/0012) and letter-spacing-heading.", "rawValue": "{font-size.emphasis}", "resolved": { "base-light": "20px", "base-dark": "20px", "portfolio-light": "20px", "portfolio-dark": "20px" }, "axisAware": false, "usedBy": [ "EmptyState", "Heading" ] }, { "name": "font-weight-body", "cssVar": "--font-weight-body", "type": "fontWeight", "category": "typography", "description": "Weight for running text.", "rawValue": "{font-weight.regular}", "resolved": { "base-light": "400", "base-dark": "400", "portfolio-light": "400", "portfolio-dark": "400" }, "axisAware": false, "usedBy": [] }, { "name": "font-weight-heading", "cssVar": "--font-weight-heading", "type": "fontWeight", "category": "typography", "description": "Weight for headings.", "rawValue": "{font-weight.semibold}", "resolved": { "base-light": "600", "base-dark": "600", "portfolio-light": "600", "portfolio-dark": "600" }, "axisAware": false, "usedBy": [ "Heading" ] }, { "name": "font-weight-label", "cssVar": "--font-weight-label", "type": "fontWeight", "category": "typography", "description": "Weight for form-field labels (input, select, textarea, standalone Label). Corrected from semibold to medium, Sep 2026 — the role existed but was set to the wrong value and unused by any label component. See decisions/0004.", "rawValue": "{font-weight.medium}", "resolved": { "base-light": "500", "base-dark": "500", "portfolio-light": "500", "portfolio-dark": "500" }, "axisAware": false, "usedBy": [ "Menu", "NavigationMenu", "SideNav", "Input", "Label", "Select", "SkipLink", "Textarea" ] }, { "name": "font-weight-display", "cssVar": "--font-weight-display", "type": "fontWeight", "category": "typography", "description": "Weight for large display text, such as a page's opening headline.", "rawValue": "{font-weight.semibold}", "resolved": { "base-light": "600", "base-dark": "600", "portfolio-light": "600", "portfolio-dark": "600" }, "axisAware": false, "usedBy": [] }, { "name": "font-weight-title", "cssVar": "--font-weight-title", "type": "fontWeight", "category": "typography", "description": "Title weight for card/dialog/drawer-style container headers. See decisions/0004.", "rawValue": "{font-weight.bold}", "resolved": { "base-light": "700", "base-dark": "700", "portfolio-light": "700", "portfolio-dark": "700" }, "axisAware": false, "usedBy": [ "Dialog", "Heading" ] }, { "name": "font-weight-control", "cssVar": "--font-weight-control", "type": "fontWeight", "category": "typography", "description": "Default text weight for interactive controls (button, tabs trigger, accordion trigger). Pairs with font-size-control. See decisions/0004.", "rawValue": "{font-weight.medium}", "resolved": { "base-light": "500", "base-dark": "500", "portfolio-light": "500", "portfolio-dark": "500" }, "axisAware": false, "usedBy": [ "Accordion", "Tabs", "Button" ] }, { "name": "line-height-display", "cssVar": "--line-height-display", "type": "number", "category": "typography", "description": "Line height for fluid H1 and display text, where a fixed px value would break the scaling.", "rawValue": "{line-height.tighter}", "resolved": { "base-light": "1.125", "base-dark": "1.125", "portfolio-light": "1.125", "portfolio-dark": "1.125" }, "axisAware": false, "usedBy": [ "Hero", "Heading" ] }, { "name": "line-height-body", "cssVar": "--line-height-body", "type": "dimension", "category": "typography", "description": "Strict-4px-grid line-height for font-size-body (18px). Redefined from unitless 1.5 to a fixed 4px-grid value — see decisions/0012.", "rawValue": "{line-height.fixed-28}", "resolved": { "base-light": "28px", "base-dark": "28px", "portfolio-light": "28px", "portfolio-dark": "28px" }, "axisAware": false, "usedBy": [ "Dialog", "Drawer", "EmptyState", "Hero" ] }, { "name": "line-height-control", "cssVar": "--line-height-control", "type": "dimension", "category": "typography", "description": "Strict-4px-grid line-height for font-size-control (16px) — see decisions/0012.", "rawValue": "{line-height.fixed-24}", "resolved": { "base-light": "24px", "base-dark": "24px", "portfolio-light": "24px", "portfolio-dark": "24px" }, "axisAware": false, "usedBy": [ "Alert", "Card", "Menu", "NavigationMenu", "Accordion", "SideNav", "Table", "Checkbox", "Radio", "Select", "SkipLink", "Switch", "Textarea" ] }, { "name": "line-height-small", "cssVar": "--line-height-small", "type": "dimension", "category": "typography", "description": "Strict-4px-grid line-height for font-size-small (14px) — see decisions/0012.", "rawValue": "{line-height.fixed-20}", "resolved": { "base-light": "20px", "base-dark": "20px", "portfolio-light": "20px", "portfolio-dark": "20px" }, "axisAware": false, "usedBy": [ "Toast", "Breadcrumb", "DataTable", "EmptyState", "Hero" ] }, { "name": "line-height-caption", "cssVar": "--line-height-caption", "type": "dimension", "category": "typography", "description": "Strict-4px-grid line-height for font-size-caption (12px) — see decisions/0012.", "rawValue": "{line-height.fixed-16}", "resolved": { "base-light": "16px", "base-dark": "16px", "portfolio-light": "16px", "portfolio-dark": "16px" }, "axisAware": false, "usedBy": [ "Tooltip", "Table", "Input", "Textarea" ] }, { "name": "line-height-h1", "cssVar": "--line-height-h1", "type": "dimension", "category": "typography", "description": "Strict-4px-grid line-height for font-size-h1 (64px, static) — see decisions/0012. The fluid font-size-h1-fluid keeps line-height-display.", "rawValue": "{line-height.fixed-80}", "resolved": { "base-light": "80px", "base-dark": "80px", "portfolio-light": "80px", "portfolio-dark": "80px" }, "axisAware": false, "usedBy": [] }, { "name": "line-height-h2", "cssVar": "--line-height-h2", "type": "dimension", "category": "typography", "description": "Strict-4px-grid line-height for font-size-h2 (48px, static) — see decisions/0012. The fluid font-size-h2-fluid keeps line-height-heading.", "rawValue": "{line-height.fixed-60}", "resolved": { "base-light": "60px", "base-dark": "60px", "portfolio-light": "60px", "portfolio-dark": "60px" }, "axisAware": false, "usedBy": [] }, { "name": "line-height-h3", "cssVar": "--line-height-h3", "type": "dimension", "category": "typography", "description": "Strict-4px-grid line-height for font-size-h3 (32px, static) — see decisions/0012. The fluid font-size-h3-fluid keeps line-height-heading.", "rawValue": "{line-height.fixed-40}", "resolved": { "base-light": "40px", "base-dark": "40px", "portfolio-light": "40px", "portfolio-dark": "40px" }, "axisAware": false, "usedBy": [] }, { "name": "line-height-h4", "cssVar": "--line-height-h4", "type": "dimension", "category": "typography", "description": "Strict-4px-grid line-height for font-size-h4 (24px) — see decisions/0012.", "rawValue": "{line-height.fixed-32}", "resolved": { "base-light": "32px", "base-dark": "32px", "portfolio-light": "32px", "portfolio-dark": "32px" }, "axisAware": false, "usedBy": [ "Dialog", "Heading" ] }, { "name": "line-height-h5", "cssVar": "--line-height-h5", "type": "dimension", "category": "typography", "description": "Strict-4px-grid line-height for font-size-h5 (20px) — see decisions/0012.", "rawValue": "{line-height.fixed-24}", "resolved": { "base-light": "24px", "base-dark": "24px", "portfolio-light": "24px", "portfolio-dark": "24px" }, "axisAware": false, "usedBy": [ "EmptyState", "Heading" ] }, { "name": "line-height-heading", "cssVar": "--line-height-heading", "type": "number", "category": "typography", "description": "Line height for fluid H2 and H3.", "rawValue": "{line-height.tight}", "resolved": { "base-light": "1.25", "base-dark": "1.25", "portfolio-light": "1.25", "portfolio-dark": "1.25" }, "axisAware": false, "usedBy": [ "Heading" ] }, { "name": "line-height-label", "cssVar": "--line-height-label", "type": "dimension", "category": "typography", "description": "Strict-4px-grid line-height for single-line form-field labels at font-size-small (14px) — see Label.css and decisions/0013.", "rawValue": "{line-height.fixed-16}", "resolved": { "base-light": "16px", "base-dark": "16px", "portfolio-light": "16px", "portfolio-dark": "16px" }, "axisAware": false, "usedBy": [ "Menu", "Input", "Label", "Select", "Textarea" ] }, { "name": "letter-spacing-heading", "cssVar": "--letter-spacing-heading", "type": "dimension", "category": "typography", "description": "Tightened tracking for headings and titles.", "rawValue": "-0.02em", "resolved": { "base-light": "-0.02em", "base-dark": "-0.02em", "portfolio-light": "-0.02em", "portfolio-dark": "-0.02em" }, "axisAware": false, "usedBy": [ "Dialog", "Hero", "Heading" ] }, { "name": "letter-spacing-subheading", "cssVar": "--letter-spacing-subheading", "type": "dimension", "category": "typography", "description": "Lighter tightening for subheadings.", "rawValue": "-0.01em", "resolved": { "base-light": "-0.01em", "base-dark": "-0.01em", "portfolio-light": "-0.01em", "portfolio-dark": "-0.01em" }, "axisAware": false, "usedBy": [] }, { "name": "letter-spacing-body", "cssVar": "--letter-spacing-body", "type": "dimension", "category": "typography", "description": null, "rawValue": "0", "resolved": { "base-light": "0", "base-dark": "0", "portfolio-light": "0", "portfolio-dark": "0" }, "axisAware": false, "usedBy": [] }, { "name": "letter-spacing-label", "cssVar": "--letter-spacing-label", "type": "dimension", "category": "typography", "description": "Slightly open tracking for small labels and metadata.", "rawValue": "0.01em", "resolved": { "base-light": "0.01em", "base-dark": "0.01em", "portfolio-light": "0.01em", "portfolio-dark": "0.01em" }, "axisAware": false, "usedBy": [] }, { "name": "letter-spacing-wide", "cssVar": "--letter-spacing-wide", "type": "dimension", "category": "typography", "description": "Wide tracking for uppercase eyebrows and overlines.", "rawValue": "0.08em", "resolved": { "base-light": "0.08em", "base-dark": "0.08em", "portfolio-light": "0.08em", "portfolio-dark": "0.08em" }, "axisAware": false, "usedBy": [] }, { "name": "space-layout-margin", "cssVar": "--space-layout-margin", "type": "dimension", "category": "spacing", "description": "Page gutter on each side, from 20px on small screens to 32px.", "rawValue": "clamp(1.25rem, 4vw, 2rem)", "resolved": { "base-light": "clamp(1.25rem, 4vw, 2rem)", "base-dark": "clamp(1.25rem, 4vw, 2rem)", "portfolio-light": "clamp(1.25rem, 4vw, 2rem)", "portfolio-dark": "clamp(1.25rem, 4vw, 2rem)" }, "axisAware": false, "usedBy": [] }, { "name": "space-section-gap", "cssVar": "--space-section-gap", "type": "dimension", "category": "spacing", "description": "Space between page sections, from 48px to 80px with the viewport.", "rawValue": "clamp(3rem, 8vw, 5rem)", "resolved": { "base-light": "clamp(3rem, 8vw, 5rem)", "base-dark": "clamp(3rem, 8vw, 5rem)", "portfolio-light": "clamp(3rem, 8vw, 5rem)", "portfolio-dark": "clamp(3rem, 8vw, 5rem)" }, "axisAware": false, "usedBy": [] }, { "name": "space-component-gap", "cssVar": "--space-component-gap", "type": "dimension", "category": "spacing", "description": "Space between larger blocks inside a component, such as a dialog's header, body and footer.", "rawValue": "{space.6}", "resolved": { "base-light": "24px", "base-dark": "24px", "portfolio-light": "24px", "portfolio-dark": "24px" }, "axisAware": false, "usedBy": [ "Dialog", "Drawer", "Hero" ] }, { "name": "space-element-gap", "cssVar": "--space-element-gap", "type": "dimension", "category": "spacing", "description": "Space between elements inside a component, such as a card's title and body.", "rawValue": "{space.4}", "resolved": { "base-light": "16px", "base-dark": "16px", "portfolio-light": "16px", "portfolio-dark": "16px" }, "axisAware": false, "usedBy": [ "Card", "Dialog", "EmptyState", "Pagination" ] }, { "name": "space-inline-gap", "cssVar": "--space-inline-gap", "type": "dimension", "category": "spacing", "description": "Space between items in a row: an icon and its label, buttons in a group.", "rawValue": "{space.2}", "resolved": { "base-light": "8px", "base-dark": "8px", "portfolio-light": "8px", "portfolio-dark": "8px" }, "axisAware": false, "usedBy": [ "Card", "Dialog", "Drawer", "Menu", "NavigationMenu", "Breadcrumb", "EmptyState", "Hero", "Pagination", "SideNav", "Button", "Input", "Label", "Select", "Skeleton", "SkipLink", "Tag", "Textarea" ] }, { "name": "space-label-gap", "cssVar": "--space-label-gap", "type": "dimension", "category": "spacing", "description": "Space between a control and its label, or a status icon and its message.", "rawValue": "{space.3}", "resolved": { "base-light": "12px", "base-dark": "12px", "portfolio-light": "12px", "portfolio-dark": "12px" }, "axisAware": false, "usedBy": [ "Alert", "Toast", "EmptyState", "Checkbox", "Radio", "Switch" ] }, { "name": "border-radius-component", "cssVar": "--border-radius-component", "type": "dimension", "category": "radius", "description": "Corners of containers: cards, dialogs, menus, alerts, tables.", "rawValue": "{border-radius.md}", "resolved": { "base-light": "8px", "base-dark": "8px", "portfolio-light": "8px", "portfolio-dark": "8px" }, "axisAware": false, "usedBy": [ "Alert", "Card", "Dialog", "Menu", "NavigationMenu", "Toast", "Table", "Select" ] }, { "name": "border-radius-interactive", "cssVar": "--border-radius-interactive", "type": "dimension", "category": "radius", "description": "Corners of controls: inputs, menu items, tab triggers, close buttons.", "rawValue": "{border-radius.sm}", "resolved": { "base-light": "4px", "base-dark": "4px", "portfolio-light": "4px", "portfolio-dark": "4px" }, "axisAware": false, "usedBy": [ "Alert", "Dialog", "Drawer", "Menu", "NavigationMenu", "Toast", "Pagination", "SideNav", "Tabs", "Checkbox", "Input", "Link", "Select", "SkipLink", "Textarea" ] }, { "name": "border-radius-image", "cssVar": "--border-radius-image", "type": "dimension", "category": "radius", "description": "Corners of images inside a Card.", "rawValue": "0.75rem", "resolved": { "base-light": "0.75rem", "base-dark": "0.75rem", "portfolio-light": "0.75rem", "portfolio-dark": "0.75rem" }, "axisAware": false, "usedBy": [ "Card" ] }, { "name": "border-radius-pill", "cssVar": "--border-radius-pill", "type": "dimension", "category": "radius", "description": "Fully rounded ends: pill buttons, badges, tags, avatars, switch tracks.", "rawValue": "{border-radius.full}", "resolved": { "base-light": "9999px", "base-dark": "9999px", "portfolio-light": "9999px", "portfolio-dark": "9999px" }, "axisAware": false, "usedBy": [ "Avatar", "Badge", "Button", "Input", "Switch", "Tag" ] }, { "name": "duration-interaction", "cssVar": "--duration-interaction", "type": "duration", "category": "motion", "description": "Hover, press and focus changes on controls.", "rawValue": "{duration.base}", "resolved": { "base-light": "200ms", "base-dark": "200ms", "portfolio-light": "200ms", "portfolio-dark": "200ms" }, "axisAware": false, "usedBy": [ "Alert", "Card", "Dialog", "Drawer", "Menu", "NavigationMenu", "Toast", "Tooltip", "Breadcrumb", "Pagination", "SideNav", "Table", "Tabs", "Button", "Checkbox", "Input", "Link", "Radio", "Select", "Switch", "Tag", "Textarea" ] }, { "name": "duration-transition", "cssVar": "--duration-transition", "type": "duration", "category": "motion", "description": "Overlays and messages entering or leaving: dialogs, drawers, toasts, dismissing an alert.", "rawValue": "{duration.slow}", "resolved": { "base-light": "400ms", "base-dark": "400ms", "portfolio-light": "400ms", "portfolio-dark": "400ms" }, "axisAware": false, "usedBy": [ "Alert", "Dialog", "Drawer", "Toast" ] }, { "name": "duration-entrance", "cssVar": "--duration-entrance", "type": "duration", "category": "motion", "description": "Larger entrance animations on page content, slower than duration-transition.", "rawValue": "600ms", "resolved": { "base-light": "600ms", "base-dark": "600ms", "portfolio-light": "600ms", "portfolio-dark": "600ms" }, "axisAware": false, "usedBy": [] }, { "name": "duration-reveal", "cssVar": "--duration-reveal", "type": "duration", "category": "motion", "description": "Content fading and sliding into view as it scrolls in.", "rawValue": "400ms", "resolved": { "base-light": "400ms", "base-dark": "400ms", "portfolio-light": "400ms", "portfolio-dark": "400ms" }, "axisAware": false, "usedBy": [] }, { "name": "duration-reveal-delay", "cssVar": "--duration-reveal-delay", "type": "duration", "category": "motion", "description": "Stagger delay for elements that follow a reveal into view", "rawValue": "300ms", "resolved": { "base-light": "300ms", "base-dark": "300ms", "portfolio-light": "300ms", "portfolio-dark": "300ms" }, "axisAware": false, "usedBy": [] }, { "name": "opacity-overlay", "cssVar": "--opacity-overlay", "type": "number", "category": "opacity", "description": null, "rawValue": "{opacity.medium}", "resolved": { "base-light": "0.3", "base-dark": "0.3", "portfolio-light": "0.3", "portfolio-dark": "0.3" }, "axisAware": false, "usedBy": [] }, { "name": "opacity-disabled", "cssVar": "--opacity-disabled", "type": "number", "category": "opacity", "description": "Opacity of a disabled control.", "rawValue": "{opacity.low}", "resolved": { "base-light": "0.1", "base-dark": "0.1", "portfolio-light": "0.1", "portfolio-dark": "0.1" }, "axisAware": false, "usedBy": [ "Menu", "Accordion", "Pagination", "Tabs", "Button", "Checkbox", "Input", "Radio", "Select", "Switch", "Textarea" ] }, { "name": "space-tight-gap", "cssVar": "--space-tight-gap", "type": "dimension", "category": "spacing", "description": "The smallest gap, between tightly grouped items such as tab triggers or nav items.", "rawValue": "{space.1}", "resolved": { "base-light": "4px", "base-dark": "4px", "portfolio-light": "4px", "portfolio-dark": "4px" }, "axisAware": false, "usedBy": [ "Menu", "NavigationMenu", "Toast", "SideNav", "Table", "Tabs", "Badge", "Input", "Link", "Select" ] }, { "name": "space-control-padding-x", "cssVar": "--space-control-padding-x", "type": "dimension", "category": "spacing", "description": "Horizontal padding for default-size form controls and interactive components (input, select, table cell, tabs trigger, textarea). See decisions/0004.", "rawValue": "{space.4}", "resolved": { "base-light": "16px", "base-dark": "16px", "portfolio-light": "16px", "portfolio-dark": "16px" }, "axisAware": false, "usedBy": [ "Menu", "NavigationMenu", "SideNav", "Table", "Tabs", "Input", "Select", "SkipLink", "Textarea" ] }, { "name": "space-control-padding-y", "cssVar": "--space-control-padding-y", "type": "dimension", "category": "spacing", "description": "Vertical padding for default-size form controls and interactive components (input, select, table cell, tabs trigger, textarea). See decisions/0004.", "rawValue": "{space.3}", "resolved": { "base-light": "12px", "base-dark": "12px", "portfolio-light": "12px", "portfolio-dark": "12px" }, "axisAware": false, "usedBy": [ "Table", "Tabs", "Input", "Select", "SkipLink", "Textarea" ] }, { "name": "space-prominent-padding-x", "cssVar": "--space-prominent-padding-x", "type": "dimension", "category": "spacing", "description": "Horizontal padding for prominent container-style components (accordion trigger, alert, toast). See decisions/0004.", "rawValue": "{space.6}", "resolved": { "base-light": "24px", "base-dark": "24px", "portfolio-light": "24px", "portfolio-dark": "24px" }, "axisAware": false, "usedBy": [ "Alert", "Toast", "Accordion" ] }, { "name": "space-prominent-padding-y", "cssVar": "--space-prominent-padding-y", "type": "dimension", "category": "spacing", "description": "Vertical padding for prominent container-style components (accordion trigger, alert, toast). See decisions/0004.", "rawValue": "{space.4}", "resolved": { "base-light": "16px", "base-dark": "16px", "portfolio-light": "16px", "portfolio-dark": "16px" }, "axisAware": false, "usedBy": [ "Alert", "Toast", "Accordion" ] }, { "name": "space-compact-padding-x", "cssVar": "--space-compact-padding-x", "type": "dimension", "category": "spacing", "description": "Horizontal padding for compact/small-size controls (tooltip, tabs small trigger). See decisions/0004.", "rawValue": "{space.3}", "resolved": { "base-light": "12px", "base-dark": "12px", "portfolio-light": "12px", "portfolio-dark": "12px" }, "axisAware": false, "usedBy": [ "Tooltip", "Tabs" ] }, { "name": "space-compact-padding-y", "cssVar": "--space-compact-padding-y", "type": "dimension", "category": "spacing", "description": "Vertical padding for compact/small-size controls (tooltip, tabs small trigger). See decisions/0004.", "rawValue": "{space.2}", "resolved": { "base-light": "8px", "base-dark": "8px", "portfolio-light": "8px", "portfolio-dark": "8px" }, "axisAware": false, "usedBy": [ "Menu", "NavigationMenu", "Tooltip", "Tabs" ] }, { "name": "space-container-padding", "cssVar": "--space-container-padding", "type": "dimension", "category": "spacing", "description": "All-around padding for standard container-style components (card, hero, datatable empty state, empty-state compact horizontal). See decisions/0004.", "rawValue": "{space.8}", "resolved": { "base-light": "32px", "base-dark": "32px", "portfolio-light": "32px", "portfolio-dark": "32px" }, "axisAware": false, "usedBy": [ "Card", "DataTable", "EmptyState", "Hero" ] }, { "name": "space-container-padding-lg", "cssVar": "--space-container-padding-lg", "type": "dimension", "category": "spacing", "description": "All-around padding for larger overlay-style containers (drawer, empty-state compact vertical). Dialog no longer uses this directly — see space-dialog-padding-* for its responsive replacement (docs/backlog.md, space-scale-expansion item).", "rawValue": "{space.10}", "resolved": { "base-light": "48px", "base-dark": "48px", "portfolio-light": "48px", "portfolio-dark": "48px" }, "axisAware": false, "usedBy": [ "Drawer", "EmptyState" ] }, { "name": "space-dialog-padding-mobile", "cssVar": "--space-dialog-padding-mobile", "type": "dimension", "category": "spacing", "description": "Dialog content padding below the tablet breakpoint (max-width: 767px). Pairs with space-dialog-padding-tablet/-desktop, switched via @media in Dialog.css rather than resolved by the token layer — no per-breakpoint token resolution exists in the build pipeline yet.", "rawValue": "{space.4}", "resolved": { "base-light": "16px", "base-dark": "16px", "portfolio-light": "16px", "portfolio-dark": "16px" }, "axisAware": false, "usedBy": [ "Dialog" ] }, { "name": "space-dialog-padding-tablet", "cssVar": "--space-dialog-padding-tablet", "type": "dimension", "category": "spacing", "description": "Dialog content padding from the tablet breakpoint (min-width: 768px). See space-dialog-padding-mobile.", "rawValue": "{space.6}", "resolved": { "base-light": "24px", "base-dark": "24px", "portfolio-light": "24px", "portfolio-dark": "24px" }, "axisAware": false, "usedBy": [ "Dialog" ] }, { "name": "space-dialog-padding-desktop", "cssVar": "--space-dialog-padding-desktop", "type": "dimension", "category": "spacing", "description": "Dialog content padding from the desktop breakpoint (min-width: 1024px). See space-dialog-padding-mobile.", "rawValue": "{space.8}", "resolved": { "base-light": "32px", "base-dark": "32px", "portfolio-light": "32px", "portfolio-dark": "32px" }, "axisAware": false, "usedBy": [ "Dialog" ] }, { "name": "space-layout-max-width", "cssVar": "--space-layout-max-width", "type": "dimension", "category": "spacing", "description": "Deprecated: use the size-container-* scale (decisions/0014). Kept at 1200px so existing layouts don't move; to be removed in a later release.", "rawValue": "{size.layout-lg}", "resolved": { "base-light": "1200px", "base-dark": "1200px", "portfolio-light": "1200px", "portfolio-dark": "1200px" }, "axisAware": false, "usedBy": [] }, { "name": "border-width-interactive", "cssVar": "--border-width-interactive", "type": "dimension", "category": "border", "description": "Border on form controls and menus.", "rawValue": "{border-width.thin}", "resolved": { "base-light": "1px", "base-dark": "1px", "portfolio-light": "1px", "portfolio-dark": "1px" }, "axisAware": false, "usedBy": [ "Menu", "NavigationMenu", "Button", "Checkbox", "Input", "Radio", "Select", "Textarea" ] }, { "name": "border-width-default", "cssVar": "--border-width-default", "type": "dimension", "category": "border", "description": "Static, non-interactive borders (cards, dialogs, dividers, badges). See decisions/0004.", "rawValue": "{border-width.thin}", "resolved": { "base-light": "1px", "base-dark": "1px", "portfolio-light": "1px", "portfolio-dark": "1px" }, "axisAware": false, "usedBy": [ "Alert", "Card", "Dialog", "Drawer", "Menu", "Toast", "Accordion", "Pagination", "SideNav", "Table", "Tabs", "Avatar", "Badge", "Link", "Select", "Tag" ] }, { "name": "size-dialog-default", "cssVar": "--size-dialog-default", "type": "dimension", "category": "size", "description": null, "rawValue": "{size.dialog-md}", "resolved": { "base-light": "560px", "base-dark": "560px", "portfolio-light": "560px", "portfolio-dark": "560px" }, "axisAware": false, "usedBy": [] }, { "name": "size-container-text", "cssVar": "--size-container-text", "type": "dimension", "category": "size", "description": "Max width for running text (720px at a 16px root, about 65 characters of font-size-body). Use directly as max-width, or as min(var(--size-container-text), 100%) for width or grid tracks. See decisions/0014.", "rawValue": "{size.container-45}", "resolved": { "base-light": "45rem", "base-dark": "45rem", "portfolio-light": "45rem", "portfolio-dark": "45rem" }, "axisAware": false, "usedBy": [] }, { "name": "size-container-media", "cssVar": "--size-container-media", "type": "dimension", "category": "size", "description": "Max width for text with media: images, embeds, diagrams sitting in a text column (960px, 4/3 of size-container-text). See decisions/0014.", "rawValue": "{size.container-60}", "resolved": { "base-light": "60rem", "base-dark": "60rem", "portfolio-light": "60rem", "portfolio-dark": "60rem" }, "axisAware": false, "usedBy": [] }, { "name": "size-container-wide", "cssVar": "--size-container-wide", "type": "dimension", "category": "size", "description": "Max width for wide media that breaks out past size-container-media (1280px, 4/3 of it). See decisions/0014.", "rawValue": "{size.container-80}", "resolved": { "base-light": "80rem", "base-dark": "80rem", "portfolio-light": "80rem", "portfolio-dark": "80rem" }, "axisAware": false, "usedBy": [] }, { "name": "size-container-page", "cssVar": "--size-container-page", "type": "dimension", "category": "size", "description": "Max width of a page's centred content area (1440px). See decisions/0014.", "rawValue": "{size.container-90}", "resolved": { "base-light": "90rem", "base-dark": "90rem", "portfolio-light": "90rem", "portfolio-dark": "90rem" }, "axisAware": false, "usedBy": [] }, { "name": "size-container-site", "cssVar": "--size-container-site", "type": "dimension", "category": "size", "description": "Outer site frame from 1024px up (90vw). Below 1024px the site is 100% wide with space-layout-margin gutters. Custom properties can't be read in @media, so apply this inside a (min-width: 1024px) query: breakpoint.desktop, decisions/0018. See decisions/0014.", "rawValue": "{size.container-viewport-90}", "resolved": { "base-light": "90vw", "base-dark": "90vw", "portfolio-light": "90vw", "portfolio-dark": "90vw" }, "axisAware": false, "usedBy": [] }, { "name": "color-surface-spotlight", "cssVar": "--color-surface-spotlight", "type": "color", "category": "color", "description": "High-emphasis surface for diagram source nodes — inverse-dark in light mode, teal-dark in dark mode so it never inverts to a light blob", "rawValue": "{color-neutral-900}", "resolved": { "base-light": null, "base-dark": null, "portfolio-light": "#1C1917", "portfolio-dark": "#0F4750" }, "axisAware": true, "usedBy": [] }, { "name": "color-text-frozen-primary", "cssVar": "--color-text-frozen-primary", "type": "color", "category": "color", "description": "Text on fixed brand-color backgrounds (case heroes) — references the warm primitive directly so it never inverts in dark mode", "rawValue": "{color.warm-900}", "resolved": { "base-light": null, "base-dark": null, "portfolio-light": "#1C1917", "portfolio-dark": "#1C1917" }, "axisAware": false, "usedBy": [] }, { "name": "color-text-frozen-secondary", "cssVar": "--color-text-frozen-secondary", "type": "color", "category": "color", "description": "Muted text on fixed brand-color backgrounds (case heroes) — never inverts in dark mode", "rawValue": "{color.warm-600}", "resolved": { "base-light": null, "base-dark": null, "portfolio-light": "#57534E", "portfolio-dark": "#57534E" }, "axisAware": false, "usedBy": [] }, { "name": "color-accent-glow", "cssVar": "--color-accent-glow", "type": "color", "category": "color", "description": "Teal glow behind diagram source nodes — alpha strengthens in dark mode where the glow does more of the lifting", "rawValue": "{color.teal-500-glow}", "resolved": { "base-light": null, "base-dark": null, "portfolio-light": "#15616D33", "portfolio-dark": "#15616D80" }, "axisAware": true, "usedBy": [] }, { "name": "accordion-content-padding-x", "cssVar": "--accordion-content-padding-x", "type": "dimension", "category": "component", "description": "Horizontal padding of an open Accordion panel.", "rawValue": "{space.6}", "resolved": { "base-light": "24px", "base-dark": "24px", "portfolio-light": "24px", "portfolio-dark": "24px" }, "axisAware": false, "usedBy": [ "Accordion" ] }, { "name": "accordion-content-padding-bottom", "cssVar": "--accordion-content-padding-bottom", "type": "dimension", "category": "component", "description": "Bottom padding of an open Accordion panel.", "rawValue": "{space.6}", "resolved": { "base-light": "24px", "base-dark": "24px", "portfolio-light": "24px", "portfolio-dark": "24px" }, "axisAware": false, "usedBy": [ "Accordion" ] }, { "name": "accordion-duration-expand", "cssVar": "--accordion-duration-expand", "type": "duration", "category": "component", "description": "How long an Accordion panel takes to open.", "rawValue": "{duration.expand}", "resolved": { "base-light": "650ms", "base-dark": "650ms", "portfolio-light": "650ms", "portfolio-dark": "650ms" }, "axisAware": false, "usedBy": [ "Accordion" ] }, { "name": "accordion-duration-collapse", "cssVar": "--accordion-duration-collapse", "type": "duration", "category": "component", "description": "How long an Accordion panel takes to close. Shorter than opening, so closing feels immediate.", "rawValue": "{duration.collapse}", "resolved": { "base-light": "200ms", "base-dark": "200ms", "portfolio-light": "200ms", "portfolio-dark": "200ms" }, "axisAware": false, "usedBy": [ "Accordion" ] }, { "name": "alert-title-weight", "cssVar": "--alert-title-weight", "type": "fontWeight", "category": "component", "description": "Weight of an Alert's title.", "rawValue": "{font-weight.semibold}", "resolved": { "base-light": "600", "base-dark": "600", "portfolio-light": "600", "portfolio-dark": "600" }, "axisAware": false, "usedBy": [ "Alert" ] }, { "name": "alert-content-gap", "cssVar": "--alert-content-gap", "type": "dimension", "category": "component", "description": "Space between an Alert's title and its message.", "rawValue": "{space.1}", "resolved": { "base-light": "4px", "base-dark": "4px", "portfolio-light": "4px", "portfolio-dark": "4px" }, "axisAware": false, "usedBy": [ "Alert" ] }, { "name": "alert-close-offset", "cssVar": "--alert-close-offset", "type": "dimension", "category": "component", "description": "Pulls an Alert's close button up so it lines up with the title.", "rawValue": "{space.2}", "resolved": { "base-light": "8px", "base-dark": "8px", "portfolio-light": "8px", "portfolio-dark": "8px" }, "axisAware": false, "usedBy": [ "Alert" ] }, { "name": "alert-exit-distance", "cssVar": "--alert-exit-distance", "type": "dimension", "category": "component", "description": "How far a dismissed Alert slides up as it fades out.", "rawValue": "{space.1}", "resolved": { "base-light": "4px", "base-dark": "4px", "portfolio-light": "4px", "portfolio-dark": "4px" }, "axisAware": false, "usedBy": [ "Alert" ] }, { "name": "avatar-size-sm", "cssVar": "--avatar-size-sm", "type": "dimension", "category": "component", "description": "Small Avatar: 24px.", "rawValue": "{space.6}", "resolved": { "base-light": "24px", "base-dark": "24px", "portfolio-light": "24px", "portfolio-dark": "24px" }, "axisAware": false, "usedBy": [ "Avatar" ] }, { "name": "avatar-size-md", "cssVar": "--avatar-size-md", "type": "dimension", "category": "component", "description": "Default Avatar: 32px.", "rawValue": "{space.8}", "resolved": { "base-light": "32px", "base-dark": "32px", "portfolio-light": "32px", "portfolio-dark": "32px" }, "axisAware": false, "usedBy": [ "Avatar" ] }, { "name": "avatar-size-lg", "cssVar": "--avatar-size-lg", "type": "dimension", "category": "component", "description": "Large Avatar: 40px. Skeleton's circle uses it too.", "rawValue": "40px", "resolved": { "base-light": "40px", "base-dark": "40px", "portfolio-light": "40px", "portfolio-dark": "40px" }, "axisAware": false, "usedBy": [ "Avatar", "Skeleton" ] }, { "name": "avatar-size-xl", "cssVar": "--avatar-size-xl", "type": "dimension", "category": "component", "description": "Extra-large Avatar: 64px.", "rawValue": "{space.11}", "resolved": { "base-light": "64px", "base-dark": "64px", "portfolio-light": "64px", "portfolio-dark": "64px" }, "axisAware": false, "usedBy": [ "Avatar" ] }, { "name": "avatar-ring-width", "cssVar": "--avatar-ring-width", "type": "dimension", "category": "component", "description": "Width of the ring drawn around an Avatar.", "rawValue": "{border-width.medium}", "resolved": { "base-light": "2px", "base-dark": "2px", "portfolio-light": "2px", "portfolio-dark": "2px" }, "axisAware": false, "usedBy": [ "Avatar" ] }, { "name": "avatar-fallback-font-size", "cssVar": "--avatar-fallback-font-size", "type": "dimension", "category": "component", "description": "Size of the initials shown when an Avatar has no image.", "rawValue": "{font-size.sm}", "resolved": { "base-light": "14px", "base-dark": "14px", "portfolio-light": "14px", "portfolio-dark": "14px" }, "axisAware": false, "usedBy": [ "Avatar" ] }, { "name": "avatar-fallback-font-weight", "cssVar": "--avatar-fallback-font-weight", "type": "fontWeight", "category": "component", "description": "Weight of the initials shown when an Avatar has no image.", "rawValue": "{font-weight.semibold}", "resolved": { "base-light": "600", "base-dark": "600", "portfolio-light": "600", "portfolio-dark": "600" }, "axisAware": false, "usedBy": [ "Avatar" ] }, { "name": "avatar-group-overlap", "cssVar": "--avatar-group-overlap", "type": "dimension", "category": "component", "description": "How far each Avatar in a group overlaps the one before it.", "rawValue": "-8px", "resolved": { "base-light": "-8px", "base-dark": "-8px", "portfolio-light": "-8px", "portfolio-dark": "-8px" }, "axisAware": false, "usedBy": [ "Avatar" ] }, { "name": "badge-font-weight", "cssVar": "--badge-font-weight", "type": "fontWeight", "category": "component", "description": "Weight of Badge text.", "rawValue": "{font-weight.medium}", "resolved": { "base-light": "500", "base-dark": "500", "portfolio-light": "500", "portfolio-dark": "500" }, "axisAware": false, "usedBy": [ "Badge" ] }, { "name": "badge-padding-x", "cssVar": "--badge-padding-x", "type": "dimension", "category": "component", "description": "Horizontal padding of a Badge.", "rawValue": "{space.2}", "resolved": { "base-light": "8px", "base-dark": "8px", "portfolio-light": "8px", "portfolio-dark": "8px" }, "axisAware": false, "usedBy": [ "Badge" ] }, { "name": "badge-padding-y", "cssVar": "--badge-padding-y", "type": "dimension", "category": "component", "description": "Vertical padding of a Badge.", "rawValue": "{space.1}", "resolved": { "base-light": "4px", "base-dark": "4px", "portfolio-light": "4px", "portfolio-dark": "4px" }, "axisAware": false, "usedBy": [ "Badge" ] }, { "name": "badge-count-size", "cssVar": "--badge-count-size", "type": "dimension", "category": "component", "description": "Minimum width and height of a count Badge, so a single digit sits in a circle.", "rawValue": "20px", "resolved": { "base-light": "20px", "base-dark": "20px", "portfolio-light": "20px", "portfolio-dark": "20px" }, "axisAware": false, "usedBy": [ "Badge" ] }, { "name": "badge-dot-size", "cssVar": "--badge-dot-size", "type": "dimension", "category": "component", "description": "Size of a dot Badge.", "rawValue": "{space.2}", "resolved": { "base-light": "8px", "base-dark": "8px", "portfolio-light": "8px", "portfolio-dark": "8px" }, "axisAware": false, "usedBy": [ "Badge" ] }, { "name": "breadcrumb-font-size", "cssVar": "--breadcrumb-font-size", "type": "dimension", "category": "component", "description": "Text size of Breadcrumb items.", "rawValue": "{font-size.sm}", "resolved": { "base-light": "14px", "base-dark": "14px", "portfolio-light": "14px", "portfolio-dark": "14px" }, "axisAware": false, "usedBy": [ "Breadcrumb" ] }, { "name": "breadcrumb-item-max-width", "cssVar": "--breadcrumb-item-max-width", "type": "dimension", "category": "component", "description": "Width at which a Breadcrumb link is truncated.", "rawValue": "200px", "resolved": { "base-light": "200px", "base-dark": "200px", "portfolio-light": "200px", "portfolio-dark": "200px" }, "axisAware": false, "usedBy": [ "Breadcrumb" ] }, { "name": "breadcrumb-current-max-width", "cssVar": "--breadcrumb-current-max-width", "type": "dimension", "category": "component", "description": "Width at which the current page in a Breadcrumb is truncated. Wider than the links before it.", "rawValue": "240px", "resolved": { "base-light": "240px", "base-dark": "240px", "portfolio-light": "240px", "portfolio-dark": "240px" }, "axisAware": false, "usedBy": [ "Breadcrumb" ] }, { "name": "button-padding-x", "cssVar": "--button-padding-x", "type": "dimension", "category": "component", "description": "Horizontal padding of a default Button.", "rawValue": "{space.6}", "resolved": { "base-light": "24px", "base-dark": "24px", "portfolio-light": "24px", "portfolio-dark": "24px" }, "axisAware": false, "usedBy": [ "Button" ] }, { "name": "button-padding-y", "cssVar": "--button-padding-y", "type": "dimension", "category": "component", "description": "Vertical padding of a default Button.", "rawValue": "{space.3}", "resolved": { "base-light": "12px", "base-dark": "12px", "portfolio-light": "12px", "portfolio-dark": "12px" }, "axisAware": false, "usedBy": [ "Button" ] }, { "name": "button-outline-border-width", "cssVar": "--button-outline-border-width", "type": "dimension", "category": "component", "description": "Border width of the Button variants that draw a border.", "rawValue": "{border-width.medium}", "resolved": { "base-light": "2px", "base-dark": "2px", "portfolio-light": "2px", "portfolio-dark": "2px" }, "axisAware": false, "usedBy": [ "Button" ] }, { "name": "button-secondary-background", "cssVar": "--button-secondary-background", "type": "color", "category": "component", "description": "Fill of the secondary Button at rest: none.", "rawValue": "transparent", "resolved": { "base-light": "transparent", "base-dark": "transparent", "portfolio-light": "transparent", "portfolio-dark": "transparent" }, "axisAware": false, "usedBy": [ "Button" ] }, { "name": "button-secondary-foreground", "cssVar": "--button-secondary-foreground", "type": "color", "category": "component", "description": "Text colour of the secondary Button.", "rawValue": "{color-accent-default}", "resolved": { "base-light": "#262626", "base-dark": "#A3A3A3", "portfolio-light": "#292524", "portfolio-dark": "#a8a29e" }, "axisAware": true, "usedBy": [ "Button" ] }, { "name": "button-secondary-border", "cssVar": "--button-secondary-border", "type": "color", "category": "component", "description": "Border colour of the secondary Button.", "rawValue": "{color-accent-default}", "resolved": { "base-light": "#262626", "base-dark": "#A3A3A3", "portfolio-light": "#292524", "portfolio-dark": "#a8a29e" }, "axisAware": true, "usedBy": [ "Button" ] }, { "name": "button-secondary-background-hover", "cssVar": "--button-secondary-background-hover", "type": "color", "category": "component", "description": "Fill of the secondary Button on hover.", "rawValue": "{color-accent-default}", "resolved": { "base-light": "#262626", "base-dark": "#A3A3A3", "portfolio-light": "#292524", "portfolio-dark": "#a8a29e" }, "axisAware": true, "usedBy": [ "Button" ] }, { "name": "button-ghost-background", "cssVar": "--button-ghost-background", "type": "color", "category": "component", "description": "Fill of the ghost Button at rest: none.", "rawValue": "transparent", "resolved": { "base-light": "transparent", "base-dark": "transparent", "portfolio-light": "transparent", "portfolio-dark": "transparent" }, "axisAware": false, "usedBy": [ "Button" ] }, { "name": "button-ghost-border", "cssVar": "--button-ghost-border", "type": "color", "category": "component", "description": "Border colour of the ghost Button: transparent.", "rawValue": "transparent", "resolved": { "base-light": "transparent", "base-dark": "transparent", "portfolio-light": "transparent", "portfolio-dark": "transparent" }, "axisAware": false, "usedBy": [ "Button" ] }, { "name": "button-spinner-duration", "cssVar": "--button-spinner-duration", "type": "duration", "category": "component", "description": "One turn of the spinner in a loading Button.", "rawValue": "750ms", "resolved": { "base-light": "750ms", "base-dark": "750ms", "portfolio-light": "750ms", "portfolio-dark": "750ms" }, "axisAware": false, "usedBy": [ "Button" ] }, { "name": "button-wipe-duration-enter", "cssVar": "--button-wipe-duration-enter", "type": "duration", "category": "component", "description": "Expressive motion only: how long the hover wipe takes to fill the Button.", "rawValue": "550ms", "resolved": { "base-light": "550ms", "base-dark": "550ms", "portfolio-light": "550ms", "portfolio-dark": "550ms" }, "axisAware": false, "usedBy": [] }, { "name": "button-wipe-duration-curve", "cssVar": "--button-wipe-duration-curve", "type": "duration", "category": "component", "description": "Expressive motion only: each half of the wipe edge's bulge and settle as it fills the Button.", "rawValue": "220ms", "resolved": { "base-light": "220ms", "base-dark": "220ms", "portfolio-light": "220ms", "portfolio-dark": "220ms" }, "axisAware": false, "usedBy": [] }, { "name": "button-wipe-duration-exit", "cssVar": "--button-wipe-duration-exit", "type": "duration", "category": "component", "description": "Expressive motion only: how long the wipe takes to clear when the pointer leaves.", "rawValue": "400ms", "resolved": { "base-light": "400ms", "base-dark": "400ms", "portfolio-light": "400ms", "portfolio-dark": "400ms" }, "axisAware": false, "usedBy": [] }, { "name": "button-wipe-duration-curve-out", "cssVar": "--button-wipe-duration-curve-out", "type": "duration", "category": "component", "description": "Expressive motion only: each half of the wipe edge's bulge and settle as it clears.", "rawValue": "180ms", "resolved": { "base-light": "180ms", "base-dark": "180ms", "portfolio-light": "180ms", "portfolio-dark": "180ms" }, "axisAware": false, "usedBy": [] }, { "name": "button-arrow-nudge", "cssVar": "--button-arrow-nudge", "type": "dimension", "category": "component", "description": "How far a Button's trailing arrow moves on hover.", "rawValue": "2px", "resolved": { "base-light": "2px", "base-dark": "2px", "portfolio-light": "2px", "portfolio-dark": "2px" }, "axisAware": false, "usedBy": [ "Button" ] }, { "name": "button-glow-size", "cssVar": "--button-glow-size", "type": "dimension", "category": "component", "description": "Expressive motion only: diameter of the highlight on the wipe's crest.", "rawValue": "52px", "resolved": { "base-light": "52px", "base-dark": "52px", "portfolio-light": "52px", "portfolio-dark": "52px" }, "axisAware": false, "usedBy": [ "Button" ] }, { "name": "button-glow-color", "cssVar": "--button-glow-color", "type": "color", "category": "component", "description": "Highlight riding the crest of the expressive hover wipe. Translucent white rather than a semantic reference: it reads as a light source over whichever fill the wipe paints, not as one of the brand's surface colours. See decisions/0016.", "rawValue": "rgba(255, 255, 255, 0.45)", "resolved": { "base-light": "rgba(255, 255, 255, 0.45)", "base-dark": "rgba(255, 255, 255, 0.45)", "portfolio-light": "rgba(255, 255, 255, 0.45)", "portfolio-dark": "rgba(255, 255, 255, 0.45)" }, "axisAware": false, "usedBy": [ "Button" ] }, { "name": "card-horizontal-media-width", "cssVar": "--card-horizontal-media-width", "type": "dimension", "category": "component", "description": "Width of the image column in a horizontal Card.", "rawValue": "200px", "resolved": { "base-light": "200px", "base-dark": "200px", "portfolio-light": "200px", "portfolio-dark": "200px" }, "axisAware": false, "usedBy": [ "Card" ] }, { "name": "checkbox-size", "cssVar": "--checkbox-size", "type": "dimension", "category": "component", "description": "Size of the Checkbox box.", "rawValue": "{space.6}", "resolved": { "base-light": "24px", "base-dark": "24px", "portfolio-light": "24px", "portfolio-dark": "24px" }, "axisAware": false, "usedBy": [ "Checkbox" ] }, { "name": "datatable-gap", "cssVar": "--datatable-gap", "type": "dimension", "category": "component", "description": "Space between a DataTable's toolbar, table and footer.", "rawValue": "{space.4}", "resolved": { "base-light": "16px", "base-dark": "16px", "portfolio-light": "16px", "portfolio-dark": "16px" }, "axisAware": false, "usedBy": [ "DataTable" ] }, { "name": "datatable-footer-gap", "cssVar": "--datatable-footer-gap", "type": "dimension", "category": "component", "description": "Space between items in a DataTable's footer.", "rawValue": "{space.4}", "resolved": { "base-light": "16px", "base-dark": "16px", "portfolio-light": "16px", "portfolio-dark": "16px" }, "axisAware": false, "usedBy": [ "DataTable" ] }, { "name": "datatable-filter-cell-padding-y", "cssVar": "--datatable-filter-cell-padding-y", "type": "dimension", "category": "component", "description": "Vertical padding of the filter row's cells in a DataTable.", "rawValue": "{space.2}", "resolved": { "base-light": "8px", "base-dark": "8px", "portfolio-light": "8px", "portfolio-dark": "8px" }, "axisAware": false, "usedBy": [ "DataTable" ] }, { "name": "dialog-max-width", "cssVar": "--dialog-max-width", "type": "dimension", "category": "component", "description": "Width of a default (md) Dialog: 560px.", "rawValue": "{size.dialog-md}", "resolved": { "base-light": "560px", "base-dark": "560px", "portfolio-light": "560px", "portfolio-dark": "560px" }, "axisAware": false, "usedBy": [ "Dialog" ] }, { "name": "dialog-close-size", "cssVar": "--dialog-close-size", "type": "dimension", "category": "component", "description": "Hit area of a Dialog's close button.", "rawValue": "{size.icon-interactive}", "resolved": { "base-light": "28px", "base-dark": "28px", "portfolio-light": "28px", "portfolio-dark": "28px" }, "axisAware": false, "usedBy": [ "Dialog" ] }, { "name": "dialog-max-width-sm", "cssVar": "--dialog-max-width-sm", "type": "dimension", "category": "component", "description": "Width of a small Dialog: 480px.", "rawValue": "{size.dialog-sm}", "resolved": { "base-light": "480px", "base-dark": "480px", "portfolio-light": "480px", "portfolio-dark": "480px" }, "axisAware": false, "usedBy": [ "Dialog" ] }, { "name": "dialog-max-width-lg", "cssVar": "--dialog-max-width-lg", "type": "dimension", "category": "component", "description": "Width of a large Dialog: 720px.", "rawValue": "{size.dialog-lg}", "resolved": { "base-light": "720px", "base-dark": "720px", "portfolio-light": "720px", "portfolio-dark": "720px" }, "axisAware": false, "usedBy": [ "Dialog" ] }, { "name": "dialog-max-width-xl", "cssVar": "--dialog-max-width-xl", "type": "dimension", "category": "component", "description": "Width of an extra-large Dialog: 1024px.", "rawValue": "{size.layout-md}", "resolved": { "base-light": "1024px", "base-dark": "1024px", "portfolio-light": "1024px", "portfolio-dark": "1024px" }, "axisAware": false, "usedBy": [ "Dialog" ] }, { "name": "dialog-entrance-offset", "cssVar": "--dialog-entrance-offset", "type": "dimension", "category": "component", "description": "How far a Dialog rises as it fades in.", "rawValue": "8px", "resolved": { "base-light": "8px", "base-dark": "8px", "portfolio-light": "8px", "portfolio-dark": "8px" }, "axisAware": false, "usedBy": [ "Dialog" ] }, { "name": "drawer-close-size", "cssVar": "--drawer-close-size", "type": "dimension", "category": "component", "description": "Hit area of a Drawer's close button.", "rawValue": "{size.icon-interactive}", "resolved": { "base-light": "28px", "base-dark": "28px", "portfolio-light": "28px", "portfolio-dark": "28px" }, "axisAware": false, "usedBy": [ "Drawer" ] }, { "name": "drawer-max-width-sm", "cssVar": "--drawer-max-width-sm", "type": "dimension", "category": "component", "description": "Width of a small side Drawer.", "rawValue": "320px", "resolved": { "base-light": "320px", "base-dark": "320px", "portfolio-light": "320px", "portfolio-dark": "320px" }, "axisAware": false, "usedBy": [ "Drawer" ] }, { "name": "drawer-max-width-md", "cssVar": "--drawer-max-width-md", "type": "dimension", "category": "component", "description": "Width of a default side Drawer.", "rawValue": "480px", "resolved": { "base-light": "480px", "base-dark": "480px", "portfolio-light": "480px", "portfolio-dark": "480px" }, "axisAware": false, "usedBy": [ "Drawer" ] }, { "name": "drawer-max-width-lg", "cssVar": "--drawer-max-width-lg", "type": "dimension", "category": "component", "description": "Width of a large side Drawer.", "rawValue": "640px", "resolved": { "base-light": "640px", "base-dark": "640px", "portfolio-light": "640px", "portfolio-dark": "640px" }, "axisAware": false, "usedBy": [ "Drawer" ] }, { "name": "drawer-max-height-sm", "cssVar": "--drawer-max-height-sm", "type": "dimension", "category": "component", "description": "Height of a small bottom Drawer.", "rawValue": "40vh", "resolved": { "base-light": "40vh", "base-dark": "40vh", "portfolio-light": "40vh", "portfolio-dark": "40vh" }, "axisAware": false, "usedBy": [ "Drawer" ] }, { "name": "drawer-max-height-md", "cssVar": "--drawer-max-height-md", "type": "dimension", "category": "component", "description": "Height of a default bottom Drawer.", "rawValue": "90vh", "resolved": { "base-light": "90vh", "base-dark": "90vh", "portfolio-light": "90vh", "portfolio-dark": "90vh" }, "axisAware": false, "usedBy": [ "Drawer" ] }, { "name": "drawer-max-height-lg", "cssVar": "--drawer-max-height-lg", "type": "dimension", "category": "component", "description": "Height of a large bottom Drawer.", "rawValue": "75vh", "resolved": { "base-light": "75vh", "base-dark": "75vh", "portfolio-light": "75vh", "portfolio-dark": "75vh" }, "axisAware": false, "usedBy": [ "Drawer" ] }, { "name": "drawer-max-height-full", "cssVar": "--drawer-max-height-full", "type": "dimension", "category": "component", "description": "Height of a full-screen bottom Drawer.", "rawValue": "100vh", "resolved": { "base-light": "100vh", "base-dark": "100vh", "portfolio-light": "100vh", "portfolio-dark": "100vh" }, "axisAware": false, "usedBy": [ "Drawer" ] }, { "name": "drawer-close-align-offset", "cssVar": "--drawer-close-align-offset", "type": "dimension", "category": "component", "description": "Nudges a Drawer's close button up to line up with the title.", "rawValue": "2px", "resolved": { "base-light": "2px", "base-dark": "2px", "portfolio-light": "2px", "portfolio-dark": "2px" }, "axisAware": false, "usedBy": [ "Drawer" ] }, { "name": "emptystate-padding-y", "cssVar": "--emptystate-padding-y", "type": "dimension", "category": "component", "description": "Literal component geometry — no reusable semantic role exists yet for a section-level inset this large.", "rawValue": "{space.12}", "resolved": { "base-light": "96px", "base-dark": "96px", "portfolio-light": "96px", "portfolio-dark": "96px" }, "axisAware": false, "usedBy": [ "EmptyState" ] }, { "name": "emptystate-padding-x", "cssVar": "--emptystate-padding-x", "type": "dimension", "category": "component", "description": "Horizontal padding of a full-size EmptyState.", "rawValue": "{space.11}", "resolved": { "base-light": "64px", "base-dark": "64px", "portfolio-light": "64px", "portfolio-dark": "64px" }, "axisAware": false, "usedBy": [ "EmptyState" ] }, { "name": "hero-padding-y", "cssVar": "--hero-padding-y", "type": "dimension", "category": "component", "description": "Vertical padding of a Hero section.", "rawValue": "{space.12}", "resolved": { "base-light": "96px", "base-dark": "96px", "portfolio-light": "96px", "portfolio-dark": "96px" }, "axisAware": false, "usedBy": [ "Hero" ] }, { "name": "hero-eyebrow-size", "cssVar": "--hero-eyebrow-size", "type": "dimension", "category": "component", "description": "Text size of the Hero eyebrow.", "rawValue": "{font-size.sm}", "resolved": { "base-light": "14px", "base-dark": "14px", "portfolio-light": "14px", "portfolio-dark": "14px" }, "axisAware": false, "usedBy": [ "Hero" ] }, { "name": "hero-eyebrow-weight", "cssVar": "--hero-eyebrow-weight", "type": "fontWeight", "category": "component", "description": "Weight of the Hero eyebrow.", "rawValue": "{font-weight.semibold}", "resolved": { "base-light": "600", "base-dark": "600", "portfolio-light": "600", "portfolio-dark": "600" }, "axisAware": false, "usedBy": [ "Hero" ] }, { "name": "hero-eyebrow-spacing", "cssVar": "--hero-eyebrow-spacing", "type": "dimension", "category": "component", "description": "Tracking of the Hero eyebrow.", "rawValue": "0.01em", "resolved": { "base-light": "0.01em", "base-dark": "0.01em", "portfolio-light": "0.01em", "portfolio-dark": "0.01em" }, "axisAware": false, "usedBy": [ "Hero" ] }, { "name": "hero-title-weight", "cssVar": "--hero-title-weight", "type": "fontWeight", "category": "component", "description": "Weight of the Hero title.", "rawValue": "{font-weight.extrabold}", "resolved": { "base-light": "800", "base-dark": "800", "portfolio-light": "800", "portfolio-dark": "800" }, "axisAware": false, "usedBy": [ "Hero" ] }, { "name": "hero-lead-size", "cssVar": "--hero-lead-size", "type": "dimension", "category": "component", "description": "Text size of the Hero lead paragraph.", "rawValue": "{font-size.emphasis}", "resolved": { "base-light": "20px", "base-dark": "20px", "portfolio-light": "20px", "portfolio-dark": "20px" }, "axisAware": false, "usedBy": [ "Hero" ] }, { "name": "hero-max-width", "cssVar": "--hero-max-width", "type": "dimension", "category": "component", "description": "Maximum width of a Hero's content.", "rawValue": "800px", "resolved": { "base-light": "800px", "base-dark": "800px", "portfolio-light": "800px", "portfolio-dark": "800px" }, "axisAware": false, "usedBy": [ "Hero" ] }, { "name": "hero-lead-max-width", "cssVar": "--hero-lead-max-width", "type": "dimension", "category": "component", "description": "Maximum line length of the Hero lead paragraph.", "rawValue": "60ch", "resolved": { "base-light": "60ch", "base-dark": "60ch", "portfolio-light": "60ch", "portfolio-dark": "60ch" }, "axisAware": false, "usedBy": [ "Hero" ] }, { "name": "pagination-button-size", "cssVar": "--pagination-button-size", "type": "dimension", "category": "component", "description": "Width and height of each Pagination button.", "rawValue": "{space.10}", "resolved": { "base-light": "48px", "base-dark": "48px", "portfolio-light": "48px", "portfolio-dark": "48px" }, "axisAware": false, "usedBy": [ "Pagination" ] }, { "name": "pagination-button-background", "cssVar": "--pagination-button-background", "type": "color", "category": "component", "description": "Fill of a Pagination button at rest: none.", "rawValue": "transparent", "resolved": { "base-light": "transparent", "base-dark": "transparent", "portfolio-light": "transparent", "portfolio-dark": "transparent" }, "axisAware": false, "usedBy": [ "Pagination" ] }, { "name": "pagination-button-font-size", "cssVar": "--pagination-button-font-size", "type": "dimension", "category": "component", "description": "Text size of Pagination buttons.", "rawValue": "{font-size.sm}", "resolved": { "base-light": "14px", "base-dark": "14px", "portfolio-light": "14px", "portfolio-dark": "14px" }, "axisAware": false, "usedBy": [ "Pagination" ] }, { "name": "pagination-button-font-weight", "cssVar": "--pagination-button-font-weight", "type": "fontWeight", "category": "component", "description": "Weight of Pagination buttons.", "rawValue": "{font-weight.medium}", "resolved": { "base-light": "500", "base-dark": "500", "portfolio-light": "500", "portfolio-dark": "500" }, "axisAware": false, "usedBy": [ "Pagination" ] }, { "name": "radio-size", "cssVar": "--radio-size", "type": "dimension", "category": "component", "description": "Size of the Radio circle.", "rawValue": "{space.6}", "resolved": { "base-light": "24px", "base-dark": "24px", "portfolio-light": "24px", "portfolio-dark": "24px" }, "axisAware": false, "usedBy": [ "Radio" ] }, { "name": "radio-indicator-size", "cssVar": "--radio-indicator-size", "type": "dimension", "category": "component", "description": "Size of the dot inside a checked Radio.", "rawValue": "{space.3}", "resolved": { "base-light": "12px", "base-dark": "12px", "portfolio-light": "12px", "portfolio-dark": "12px" }, "axisAware": false, "usedBy": [ "Radio" ] }, { "name": "select-item-padding-x", "cssVar": "--select-item-padding-x", "type": "dimension", "category": "component", "description": "Horizontal padding of each option in a Select.", "rawValue": "{space.4}", "resolved": { "base-light": "16px", "base-dark": "16px", "portfolio-light": "16px", "portfolio-dark": "16px" }, "axisAware": false, "usedBy": [ "Select" ] }, { "name": "select-item-padding-y", "cssVar": "--select-item-padding-y", "type": "dimension", "category": "component", "description": "Vertical padding of each option in a Select.", "rawValue": "{space.2}", "resolved": { "base-light": "8px", "base-dark": "8px", "portfolio-light": "8px", "portfolio-dark": "8px" }, "axisAware": false, "usedBy": [ "Select" ] }, { "name": "side-nav-width", "cssVar": "--side-nav-width", "type": "dimension", "category": "component", "description": "Width of the expanded inline SideNav from breakpoint.desktop up. The collapsed rail sizes to its icons; the mobile drawer uses Drawer's own width.", "rawValue": "240px", "resolved": { "base-light": "240px", "base-dark": "240px", "portfolio-light": "240px", "portfolio-dark": "240px" }, "axisAware": false, "usedBy": [ "SideNav" ] }, { "name": "skeleton-border-radius", "cssVar": "--skeleton-border-radius", "type": "dimension", "category": "component", "description": "Corners of a text or rectangle Skeleton.", "rawValue": "{border-radius.sm}", "resolved": { "base-light": "4px", "base-dark": "4px", "portfolio-light": "4px", "portfolio-dark": "4px" }, "axisAware": false, "usedBy": [ "Skeleton" ] }, { "name": "skeleton-height-text", "cssVar": "--skeleton-height-text", "type": "dimension", "category": "component", "description": "Height of a text Skeleton line: 1em, the surrounding font size.", "rawValue": "1em", "resolved": { "base-light": "1em", "base-dark": "1em", "portfolio-light": "1em", "portfolio-dark": "1em" }, "axisAware": false, "usedBy": [ "Skeleton" ] }, { "name": "skeleton-height-rect", "cssVar": "--skeleton-height-rect", "type": "dimension", "category": "component", "description": "Default height of a rectangle Skeleton.", "rawValue": "{space.10}", "resolved": { "base-light": "48px", "base-dark": "48px", "portfolio-light": "48px", "portfolio-dark": "48px" }, "axisAware": false, "usedBy": [ "Skeleton" ] }, { "name": "spinner-stroke-width", "cssVar": "--spinner-stroke-width", "type": "dimension", "category": "component", "description": "Stroke width of the Spinner ring.", "rawValue": "{border-width.medium}", "resolved": { "base-light": "2px", "base-dark": "2px", "portfolio-light": "2px", "portfolio-dark": "2px" }, "axisAware": false, "usedBy": [ "Spinner" ] }, { "name": "switch-track-width", "cssVar": "--switch-track-width", "type": "dimension", "category": "component", "description": "Width of the Switch track.", "rawValue": "44px", "resolved": { "base-light": "44px", "base-dark": "44px", "portfolio-light": "44px", "portfolio-dark": "44px" }, "axisAware": false, "usedBy": [ "Switch" ] }, { "name": "switch-track-height", "cssVar": "--switch-track-height", "type": "dimension", "category": "component", "description": "Height of the Switch track.", "rawValue": "{space.6}", "resolved": { "base-light": "24px", "base-dark": "24px", "portfolio-light": "24px", "portfolio-dark": "24px" }, "axisAware": false, "usedBy": [ "Switch" ] }, { "name": "switch-thumb-size", "cssVar": "--switch-thumb-size", "type": "dimension", "category": "component", "description": "Size of the Switch thumb.", "rawValue": "{space.4}", "resolved": { "base-light": "16px", "base-dark": "16px", "portfolio-light": "16px", "portfolio-dark": "16px" }, "axisAware": false, "usedBy": [ "Switch" ] }, { "name": "table-header-font-weight", "cssVar": "--table-header-font-weight", "type": "fontWeight", "category": "component", "description": "Weight of table header cells.", "rawValue": "{font-weight.semibold}", "resolved": { "base-light": "600", "base-dark": "600", "portfolio-light": "600", "portfolio-dark": "600" }, "axisAware": false, "usedBy": [ "Table" ] }, { "name": "tabs-indicator-height", "cssVar": "--tabs-indicator-height", "type": "dimension", "category": "component", "description": "Thickness of the line under the active tab.", "rawValue": "{border-width.medium}", "resolved": { "base-light": "2px", "base-dark": "2px", "portfolio-light": "2px", "portfolio-dark": "2px" }, "axisAware": false, "usedBy": [ "Tabs" ] }, { "name": "tabs-content-padding-top", "cssVar": "--tabs-content-padding-top", "type": "dimension", "category": "component", "description": "Space between the tab list and its panel.", "rawValue": "{space.4}", "resolved": { "base-light": "16px", "base-dark": "16px", "portfolio-light": "16px", "portfolio-dark": "16px" }, "axisAware": false, "usedBy": [ "Tabs" ] }, { "name": "tag-padding-x", "cssVar": "--tag-padding-x", "type": "dimension", "category": "component", "description": "Horizontal padding of a Tag.", "rawValue": "{space.3}", "resolved": { "base-light": "12px", "base-dark": "12px", "portfolio-light": "12px", "portfolio-dark": "12px" }, "axisAware": false, "usedBy": [ "Tag" ] }, { "name": "tag-padding-y", "cssVar": "--tag-padding-y", "type": "dimension", "category": "component", "description": "Vertical padding of a Tag.", "rawValue": "{space.1}", "resolved": { "base-light": "4px", "base-dark": "4px", "portfolio-light": "4px", "portfolio-dark": "4px" }, "axisAware": false, "usedBy": [ "Tag" ] }, { "name": "tag-font-weight", "cssVar": "--tag-font-weight", "type": "fontWeight", "category": "component", "description": "Weight of Tag text.", "rawValue": "{font-weight.medium}", "resolved": { "base-light": "500", "base-dark": "500", "portfolio-light": "500", "portfolio-dark": "500" }, "axisAware": false, "usedBy": [ "Tag" ] }, { "name": "tag-muted-background", "cssVar": "--tag-muted-background", "type": "color", "category": "component", "description": "Fill of the muted Tag: none.", "rawValue": "transparent", "resolved": { "base-light": "transparent", "base-dark": "transparent", "portfolio-light": "transparent", "portfolio-dark": "transparent" }, "axisAware": false, "usedBy": [ "Tag" ] }, { "name": "toast-max-width", "cssVar": "--toast-max-width", "type": "dimension", "category": "component", "description": "Maximum width of a Toast.", "rawValue": "380px", "resolved": { "base-light": "380px", "base-dark": "380px", "portfolio-light": "380px", "portfolio-dark": "380px" }, "axisAware": false, "usedBy": [ "Toast" ] }, { "name": "toast-title-weight", "cssVar": "--toast-title-weight", "type": "fontWeight", "category": "component", "description": "Weight of a Toast's title.", "rawValue": "{font-weight.semibold}", "resolved": { "base-light": "600", "base-dark": "600", "portfolio-light": "600", "portfolio-dark": "600" }, "axisAware": false, "usedBy": [ "Toast" ] }, { "name": "toast-font-size", "cssVar": "--toast-font-size", "type": "dimension", "category": "component", "description": "Text size of a Toast.", "rawValue": "{font-size.sm}", "resolved": { "base-light": "14px", "base-dark": "14px", "portfolio-light": "14px", "portfolio-dark": "14px" }, "axisAware": false, "usedBy": [ "Toast" ] }, { "name": "toast-accent-width", "cssVar": "--toast-accent-width", "type": "dimension", "category": "component", "description": "Width of the coloured stripe on a status Toast's leading edge.", "rawValue": "4px", "resolved": { "base-light": "4px", "base-dark": "4px", "portfolio-light": "4px", "portfolio-dark": "4px" }, "axisAware": false, "usedBy": [ "Toast" ] }, { "name": "toast-viewport-inset", "cssVar": "--toast-viewport-inset", "type": "dimension", "category": "component", "description": "Distance between the Toast stack and the edge of the viewport.", "rawValue": "{space.6}", "resolved": { "base-light": "24px", "base-dark": "24px", "portfolio-light": "24px", "portfolio-dark": "24px" }, "axisAware": false, "usedBy": [ "Toast" ] }, { "name": "toast-close-offset", "cssVar": "--toast-close-offset", "type": "dimension", "category": "component", "description": "Pulls a Toast's close button up and out towards the corner.", "rawValue": "{space.2}", "resolved": { "base-light": "8px", "base-dark": "8px", "portfolio-light": "8px", "portfolio-dark": "8px" }, "axisAware": false, "usedBy": [ "Toast" ] }, { "name": "tooltip-font-weight", "cssVar": "--tooltip-font-weight", "type": "fontWeight", "category": "component", "description": "Weight of Tooltip text.", "rawValue": "{font-weight.medium}", "resolved": { "base-light": "500", "base-dark": "500", "portfolio-light": "500", "portfolio-dark": "500" }, "axisAware": false, "usedBy": [ "Tooltip" ] }, { "name": "tooltip-border-radius", "cssVar": "--tooltip-border-radius", "type": "dimension", "category": "component", "description": "Corners of a Tooltip.", "rawValue": "{border-radius.sm}", "resolved": { "base-light": "4px", "base-dark": "4px", "portfolio-light": "4px", "portfolio-dark": "4px" }, "axisAware": false, "usedBy": [ "Tooltip" ] }, { "name": "tooltip-max-width", "cssVar": "--tooltip-max-width", "type": "dimension", "category": "component", "description": "Width at which Tooltip text wraps.", "rawValue": "260px", "resolved": { "base-light": "260px", "base-dark": "260px", "portfolio-light": "260px", "portfolio-dark": "260px" }, "axisAware": false, "usedBy": [ "Tooltip" ] }, { "name": "tooltip-arrow-size", "cssVar": "--tooltip-arrow-size", "type": "dimension", "category": "component", "description": "Size of the Tooltip arrow.", "rawValue": "{space.2}", "resolved": { "base-light": "8px", "base-dark": "8px", "portfolio-light": "8px", "portfolio-dark": "8px" }, "axisAware": false, "usedBy": [ "Tooltip" ] }, { "name": "tooltip-delay-duration", "cssVar": "--tooltip-delay-duration", "type": "number", "category": "component", "description": "Milliseconds of hover before a Tooltip opens. A unitless number, read by Tooltip.tsx.", "rawValue": "400", "resolved": { "base-light": "400", "base-dark": "400", "portfolio-light": "400", "portfolio-dark": "400" }, "axisAware": false, "usedBy": [] }, { "name": "tooltip-side-offset", "cssVar": "--tooltip-side-offset", "type": "number", "category": "component", "description": "Pixels between a Tooltip and its trigger. A unitless number, read by Tooltip.tsx.", "rawValue": "6", "resolved": { "base-light": "6", "base-dark": "6", "portfolio-light": "6", "portfolio-dark": "6" }, "axisAware": false, "usedBy": [] } ] }