@blueprintjs/core

{ "surface": { "border-color": { "$type": "color", "default": { "$value": "{intent.default.rest}", "$extensions": { "com.blueprint.derive": { "alpha": 0.12 } } }, "strong": { "$value": "{intent.default.rest}", "$extensions": { "com.blueprint.derive": { "alpha": 0.25 } } } }, "border-width": { "$type": "dimension", "$value": { "value": 1, "unit": "px" } }, "border-radius": { "$type": "dimension", "$value": { "value": 4, "unit": "px" } }, "shadow": { "$type": "shadow", "$description": "BP6 light mode elevation shadows (0-4)", "0": { "$description": "Level 0 - border only, 0 0 0 1px rgba(black, 15%), 0 0 5px 0 rgba(0,0,0, 2%)", "$value": [ { "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 0, "unit": "px" }, "blur": { "value": 0, "unit": "px" }, "spread": { "value": 1, "unit": "px" }, "color": { "colorSpace": "srgb", "components": [0, 0, 0], "alpha": 0.15 } }, { "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 0, "unit": "px" }, "blur": { "value": 5, "unit": "px" }, "spread": { "value": 0, "unit": "px" }, "color": { "colorSpace": "srgb", "components": [0, 0, 0], "alpha": 0.02 } } ] }, "1": { "$description": "Level 1 - subtle elevation", "$value": [ { "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 0, "unit": "px" }, "blur": { "value": 0, "unit": "px" }, "spread": { "value": 1, "unit": "px" }, "color": { "colorSpace": "srgb", "components": [0, 0, 0], "alpha": 0.1 } }, { "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 1, "unit": "px" }, "blur": { "value": 3, "unit": "px" }, "spread": { "value": 0, "unit": "px" }, "color": { "colorSpace": "srgb", "components": [0, 0, 0], "alpha": 0.1 } }, { "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 1, "unit": "px" }, "blur": { "value": 2, "unit": "px" }, "spread": { "value": -1, "unit": "px" }, "color": { "colorSpace": "srgb", "components": [0, 0, 0], "alpha": 0.1 } } ] }, "2": { "$description": "Level 2 - standard elevation", "$value": [ { "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 0, "unit": "px" }, "blur": { "value": 0, "unit": "px" }, "spread": { "value": 1, "unit": "px" }, "color": { "colorSpace": "srgb", "components": [0, 0, 0], "alpha": 0.1 } }, { "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 4, "unit": "px" }, "blur": { "value": 6, "unit": "px" }, "spread": { "value": -4, "unit": "px" }, "color": { "colorSpace": "srgb", "components": [0, 0, 0], "alpha": 0.1 } }, { "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 10, "unit": "px" }, "blur": { "value": 15, "unit": "px" }, "spread": { "value": -3, "unit": "px" }, "color": { "colorSpace": "srgb", "components": [0, 0, 0], "alpha": 0.1 } } ] }, "3": { "$description": "Level 3 - popover/dialog elevation", "$value": [ { "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 0, "unit": "px" }, "blur": { "value": 0, "unit": "px" }, "spread": { "value": 1, "unit": "px" }, "color": { "colorSpace": "srgb", "components": [0, 0, 0], "alpha": 0.1 } }, { "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 20, "unit": "px" }, "blur": { "value": 25, "unit": "px" }, "spread": { "value": -5, "unit": "px" }, "color": { "colorSpace": "srgb", "components": [0, 0, 0], "alpha": 0.1 } }, { "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 10, "unit": "px" }, "blur": { "value": 15, "unit": "px" }, "spread": { "value": -3, "unit": "px" }, "color": { "colorSpace": "srgb", "components": [0, 0, 0], "alpha": 0.1 } } ] }, "4": { "$description": "Level 4 - maximum elevation", "$value": [ { "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 0, "unit": "px" }, "blur": { "value": 0, "unit": "px" }, "spread": { "value": 1, "unit": "px" }, "color": { "colorSpace": "srgb", "components": [0, 0, 0], "alpha": 0.1 } }, { "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 25, "unit": "px" }, "blur": { "value": 50, "unit": "px" }, "spread": { "value": -12, "unit": "px" }, "color": { "colorSpace": "srgb", "components": [0, 0, 0], "alpha": 0.3 } } ] } }, "spacing": { "$type": "dimension", "$value": { "value": 4, "unit": "px" }, "$description": "Base spacing unit — components multiply this" }, "z-index": { "$type": "number", "0": { "$value": 0 }, "1": { "$value": 10 }, "2": { "$value": 20 }, "3": { "$value": 30 }, "4": { "$value": 40 } }, "color-code": { "$type": "color", "$value": "{palette.white}", "$extensions": { "com.blueprint.derive": { "alpha": 0.7 } } }, "layer-opacity": { "$type": "number", "$value": 0.05, "$description": "Shared opacity for surface layers" }, "layer-color": { "$type": "color", "$description": "Composed color with opacity applied, usable as color anywhere", "default": { "$value": "{intent.default.rest}", "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity}" } } }, "primary": { "$value": "{intent.primary.rest}", "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity}" } } }, "success": { "$value": "{intent.success.rest}", "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity}" } } }, "warning": { "$value": "{intent.warning.rest}", "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity}" } } }, "danger": { "$value": "{intent.danger.rest}", "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity}" } } } }, "layer": { "$type": "color", "$description": "Wraps layer-color in linear-gradient() for background stacking", "default": { "$value": "{surface.layer-color.default}", "$extensions": { "com.blueprint.role": "stackable-layer" } }, "primary": { "$value": "{surface.layer-color.primary}", "$extensions": { "com.blueprint.role": "stackable-layer" } }, "success": { "$value": "{surface.layer-color.success}", "$extensions": { "com.blueprint.role": "stackable-layer" } }, "warning": { "$value": "{surface.layer-color.warning}", "$extensions": { "com.blueprint.role": "stackable-layer" } }, "danger": { "$value": "{surface.layer-color.danger}", "$extensions": { "com.blueprint.role": "stackable-layer" } } }, "background-color": { "$type": "color", "$description": "Light mode app backgrounds: white → light-gray on interaction", "default": { "rest": { "$value": "{intent.default.rest}", "$extensions": { "com.blueprint.derive": { "lightnessScale": 1.909, "chromaScale": 0 } } }, "hover": { "$value": "{intent.default.hover}", "$extensions": { "com.blueprint.derive": { "lightnessOffset": 0.577, "chromaOffset": -0.02, "hueOffset": 6.2 } } }, "active": { "$value": "{intent.default.active}", "$extensions": { "com.blueprint.derive": { "lightnessOffset": 0.59, "chromaOffset": -0.013, "hueOffset": 0 } } }, "disabled": { "$value": "{intent.default.disabled}", "$extensions": { "com.blueprint.derive": { "lightnessScale": 1.471, "chromaScale": 0 } } } }, "primary": { "rest": { "$value": "{intent.primary.rest}" }, "hover": { "$value": "{intent.primary.hover}" }, "active": { "$value": "{intent.primary.active}" }, "disabled": { "$value": "{intent.primary.disabled}" } }, "success": { "rest": { "$value": "{intent.success.rest}" }, "hover": { "$value": "{intent.success.hover}" }, "active": { "$value": "{intent.success.active}" }, "disabled": { "$value": "{intent.success.disabled}" } }, "warning": { "rest": { "$value": "{intent.warning.rest}" }, "hover": { "$value": "{intent.warning.hover}" }, "active": { "$value": "{intent.warning.active}" }, "disabled": { "$value": "{intent.warning.disabled}" } }, "danger": { "rest": { "$value": "{intent.danger.rest}" }, "hover": { "$value": "{intent.danger.hover}" }, "active": { "$value": "{intent.danger.active}" }, "disabled": { "$value": "{intent.danger.disabled}" } } } } }