outsystems-design-tokens
Version:
Store the Design Tokens used on the Ionic Framework and Widgets Library
1,390 lines (1,389 loc) • 39.4 kB
JSON
{
"semantics": {
"primary": {
"100": {
"$type": "color",
"$value": "{primitives.blue.100}"
},
"200": {
"$type": "color",
"$value": "{primitives.blue.200}"
},
"300": {
"$type": "color",
"$value": "{primitives.blue.300}"
},
"400": {
"$type": "color",
"$value": "{primitives.blue.400}"
},
"500": {
"$type": "color",
"$value": "{primitives.blue.500}"
},
"600": {
"$type": "color",
"$value": "{primitives.blue.600}"
},
"700": {
"$type": "color",
"$value": "{primitives.blue.700}"
},
"800": {
"$type": "color",
"$value": "{primitives.blue.800}"
},
"900": {
"$type": "color",
"$value": "{primitives.blue.900}"
},
"1000": {
"$type": "color",
"$value": "{primitives.blue.1000}"
},
"1100": {
"$type": "color",
"$value": "{primitives.blue.1100}"
},
"1200": {
"$type": "color",
"$value": "{primitives.blue.1200}"
},
"base": {
"$type": "color",
"$value": "{semantics.primary.700}"
}
},
"info": {
"100": {
"$type": "color",
"$value": "{primitives.blue.100}"
},
"200": {
"$type": "color",
"$value": "{primitives.blue.200}"
},
"300": {
"$type": "color",
"$value": "{primitives.blue.300}"
},
"400": {
"$type": "color",
"$value": "{primitives.blue.400}"
},
"500": {
"$type": "color",
"$value": "{primitives.blue.500}"
},
"600": {
"$type": "color",
"$value": "{primitives.blue.600}"
},
"700": {
"$type": "color",
"$value": "{primitives.blue.700}"
},
"800": {
"$type": "color",
"$value": "{primitives.blue.800}"
},
"900": {
"$type": "color",
"$value": "{primitives.blue.900}"
},
"1000": {
"$type": "color",
"$value": "{primitives.blue.1000}"
},
"1100": {
"$type": "color",
"$value": "{primitives.blue.1100}"
},
"1200": {
"$type": "color",
"$value": "{primitives.blue.1200}"
},
"base": {
"$type": "color",
"$value": "{semantics.info.700}"
}
},
"success": {
"100": {
"$type": "color",
"$value": "{primitives.green.100}"
},
"200": {
"$type": "color",
"$value": "{primitives.green.200}"
},
"300": {
"$type": "color",
"$value": "{primitives.green.300}"
},
"400": {
"$type": "color",
"$value": "{primitives.green.400}"
},
"500": {
"$type": "color",
"$value": "{primitives.green.500}"
},
"600": {
"$type": "color",
"$value": "{primitives.green.600}"
},
"700": {
"$type": "color",
"$value": "{primitives.green.700}"
},
"800": {
"$type": "color",
"$value": "{primitives.green.800}"
},
"900": {
"$type": "color",
"$value": "{primitives.green.900}"
},
"1000": {
"$type": "color",
"$value": "{primitives.green.1000}"
},
"1100": {
"$type": "color",
"$value": "{primitives.green.1100}"
},
"1200": {
"$type": "color",
"$value": "{primitives.green.1200}"
},
"base": {
"$type": "color",
"$value": "{semantics.success.700}"
}
},
"danger": {
"100": {
"$type": "color",
"$value": "{primitives.red.100}"
},
"200": {
"$type": "color",
"$value": "{primitives.red.200}"
},
"300": {
"$type": "color",
"$value": "{primitives.red.300}"
},
"400": {
"$type": "color",
"$value": "{primitives.red.400}"
},
"500": {
"$type": "color",
"$value": "{primitives.red.500}"
},
"600": {
"$type": "color",
"$value": "{primitives.red.600}"
},
"700": {
"$type": "color",
"$value": "{primitives.red.700}"
},
"800": {
"$type": "color",
"$value": "{primitives.red.800}"
},
"900": {
"$type": "color",
"$value": "{primitives.red.900}"
},
"1000": {
"$type": "color",
"$value": "{primitives.red.1000}"
},
"1100": {
"$type": "color",
"$value": "{primitives.red.1100}"
},
"1200": {
"$type": "color",
"$value": "{primitives.red.1200}"
},
"base": {
"$type": "color",
"$value": "{semantics.danger.700}"
}
},
"warning": {
"100": {
"$type": "color",
"$value": "{primitives.yellow.100}"
},
"200": {
"$type": "color",
"$value": "{primitives.yellow.200}"
},
"300": {
"$type": "color",
"$value": "{primitives.yellow.300}"
},
"400": {
"$type": "color",
"$value": "{primitives.yellow.400}"
},
"500": {
"$type": "color",
"$value": "{primitives.yellow.500}"
},
"600": {
"$type": "color",
"$value": "{primitives.yellow.600}"
},
"700": {
"$type": "color",
"$value": "{primitives.yellow.700}"
},
"800": {
"$type": "color",
"$value": "{primitives.yellow.800}"
},
"900": {
"$type": "color",
"$value": "{primitives.yellow.900}"
},
"1000": {
"$type": "color",
"$value": "{primitives.yellow.1000}"
},
"1100": {
"$type": "color",
"$value": "{primitives.yellow.1100}"
},
"1200": {
"$type": "color",
"$value": "{primitives.yellow.1200}"
},
"base": {
"$type": "color",
"$value": "{semantics.warning.500}"
}
}
},
"bg": {
"body": {
"$type": "color",
"$value": "{primitives.base.white}",
"$description": "The main background color of the app."
},
"surface": {
"default": {
"$type": "color",
"$value": "{primitives.base.white}",
"$description": "input"
},
"inverse": {
"$type": "color",
"$value": "{primitives.base.white}",
"$description": "input"
},
"blur": {
"$type": "color",
"$value": "#ffffffcc",
"$description": "Semi-transparent white for frosted/blurred surfaces. Combine with blur/blur-01. Fallback: 80% opaque white when backdrop-filter is unsupported."
}
},
"primary": {
"base": {
"default": {
"$type": "color",
"$value": "{semantics.primary.base}",
"$description": "Default background color for the primary surface."
},
"hover": {
"$type": "color",
"$value": "{semantics.primary.800}"
},
"press": {
"$type": "color",
"$value": "{semantics.primary.900}",
"$description": "Background color for pressed primary actions."
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{semantics.primary.100}",
"$description": "Default background color for the subtle primary surface."
},
"hover": {
"$type": "color",
"$value": "{semantics.primary.200}"
},
"press": {
"$type": "color",
"$value": "{semantics.primary.300}",
"$description": "Background color for pressed subtle primary elements."
}
}
},
"neutral": {
"subtlest": {
"default": {
"$type": "color",
"$value": "{primitives.base.white}",
"$description": "Default background color for very subtle neutral elements."
},
"hover": {
"$type": "color",
"$value": "{primitives.neutral.100}"
},
"press": {
"$type": "color",
"$value": "{primitives.neutral.200}",
"$description": "Background color for pressed very subtle neutral elements."
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{primitives.neutral.200}",
"$description": "Default background color for subtle neutral elements."
},
"hover": {
"$type": "color",
"$value": "{primitives.neutral.300}"
},
"press": {
"$type": "color",
"$value": "{primitives.neutral.400}",
"$description": "Background color for pressed subtle neutral elements."
}
},
"base": {
"default": {
"$type": "color",
"$value": "{primitives.neutral.400}",
"$description": "Default background color for base neutral elements."
},
"hover": {
"$type": "color",
"$value": "{primitives.neutral.500}"
},
"press": {
"$type": "color",
"$value": "{primitives.neutral.600}",
"$description": "Background color for pressed base neutral elements."
}
},
"bold": {
"default": {
"$type": "color",
"$value": "{primitives.neutral.1000}",
"$description": "Default background color for bold neutral elements."
},
"hover": {
"$type": "color",
"$value": "{primitives.neutral.1100}"
},
"press": {
"$type": "color",
"$value": "{primitives.neutral.1200}",
"$description": "Background color for pressed bold neutral elements."
}
},
"boldest": {
"default": {
"$type": "color",
"$value": "{primitives.neutral.1200}",
"$description": "input"
},
"press": {
"$type": "color",
"$value": "{primitives.base.black}",
"$description": "input"
}
}
},
"info": {
"base": {
"default": {
"$type": "color",
"$value": "{primitives.blue.800}",
"$description": "Default background color for the info surface."
},
"hover": {
"$type": "color",
"$value": "{primitives.blue.900}"
},
"press": {
"$type": "color",
"$value": "{primitives.blue.1000}",
"$description": "Background color for pressed info actions."
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{primitives.blue.100}",
"$description": "Default background color for the subtle info surface."
},
"hover": {
"$type": "color",
"$value": "{primitives.blue.200}"
},
"press": {
"$type": "color",
"$value": "{primitives.blue.300}",
"$description": "Background color for pressed subtle info elements."
}
}
},
"success": {
"base": {
"default": {
"$type": "color",
"$value": "{semantics.success.800}",
"$description": "Default background color for the success surface."
},
"hover": {
"$type": "color",
"$value": "{semantics.success.900}"
},
"press": {
"$type": "color",
"$value": "{semantics.success.1000}",
"$description": "Background color for pressed success actions."
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{semantics.success.100}",
"$description": "Default background color for the subtle success surface."
},
"hover": {
"$type": "color",
"$value": "{semantics.success.200}"
},
"press": {
"$type": "color",
"$value": "{semantics.success.300}",
"$description": "Background color for pressed subtle success elements."
}
}
},
"warning": {
"base": {
"default": {
"$type": "color",
"$value": "{primitives.yellow.500}",
"$description": "Default background color for the warning surface."
},
"hover": {
"$type": "color",
"$value": "{primitives.yellow.600}"
},
"press": {
"$type": "color",
"$value": "{primitives.yellow.700}",
"$description": "Background color for pressed warning actions."
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{primitives.yellow.100}",
"$description": "Default background color for the subtle warning surface."
},
"hover": {
"$type": "color",
"$value": "{primitives.yellow.200}"
},
"press": {
"$type": "color",
"$value": "{primitives.yellow.300}",
"$description": "Background color for pressed subtle warning elements."
}
}
},
"danger": {
"base": {
"default": {
"$type": "color",
"$value": "{semantics.danger.700}",
"$description": "Default background color for the danger surface."
},
"hover": {
"$type": "color",
"$value": "{semantics.danger.800}"
},
"press": {
"$type": "color",
"$value": "{semantics.danger.900}",
"$description": "Background color for pressed danger actions."
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{semantics.danger.100}",
"$description": "Default background color for the subtle danger surface."
},
"hover": {
"$type": "color",
"$value": "{semantics.danger.200}"
},
"press": {
"$type": "color",
"$value": "{semantics.danger.300}",
"$description": "Background color for pressed subtle danger elements."
}
}
},
"select": {
"default": {
"$type": "color",
"$value": "{semantics.primary.100}",
"$description": "Default background color for components in the selected state."
},
"hover": {
"$type": "color",
"$value": "{semantics.primary.200}"
},
"press": {
"$type": "color",
"$value": "{semantics.primary.300}",
"$description": "Background color for components that are selected and pressed."
}
},
"input": {
"default": {
"$type": "color",
"$value": "{primitives.base.white}",
"$description": "Default background color for text input fields."
},
"hover": {
"$type": "color",
"$value": "{primitives.neutral.100}"
},
"press": {
"$type": "color",
"$value": "{primitives.neutral.200}",
"$description": "Background color for pressed input fields."
},
"read-only": {
"$type": "color",
"$value": "{primitives.neutral.100}",
"$description": "Background color for read-only input fields."
},
"disabled": {
"$type": "color",
"$value": "{primitives.neutral.100}",
"$description": "Background color for disabled input fields."
},
"bold": {
"default": {
"$type": "color",
"$value": "{primitives.neutral.200}",
"$description": "Default background color for the filled input variant."
},
"hover": {
"$type": "color",
"$value": "{primitives.neutral.300}"
},
"press": {
"$type": "color",
"$value": "{primitives.neutral.400}",
"$description": "Background color for the pressed state of the filled input variant."
},
"read-only": {
"$type": "color",
"$value": "{primitives.neutral.300}",
"$description": "Background color for the read-only state of the filled input variant."
},
"disabled": {
"$type": "color",
"$value": "{primitives.neutral.300}",
"$description": "Background color for the disalbed state of the filled input variant."
}
}
},
"skeleton": {
"default": {
"$type": "color",
"$value": "{primitives.neutral.200}"
},
"pulse": {
"$type": "color",
"$value": "{primitives.neutral.400}"
}
},
"extended": {
"pumpkin": {
"base": {
"default": {
"$type": "color",
"$value": "{primitives.pumpkin.700}",
"$description": "Default background color for pumpkin-themed elements."
},
"hover": {
"$type": "color",
"$value": "{primitives.pumpkin.800}"
},
"press": {
"$type": "color",
"$value": "{primitives.pumpkin.900}",
"$description": "Background color for pressed pumpkin-themed elements."
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{primitives.pumpkin.100}",
"$description": "Default background color for subtle pumpkin elements."
},
"hover": {
"$type": "color",
"$value": "{primitives.pumpkin.200}"
},
"press": {
"$type": "color",
"$value": "{primitives.pumpkin.300}",
"$description": "Background color for pressed subtle pumpkin elements."
}
}
},
"orange": {
"base": {
"default": {
"$type": "color",
"$value": "{primitives.orange.900}",
"$description": "Default background color for orange-themed elements."
},
"hover": {
"$type": "color",
"$value": "{primitives.orange.1000}"
},
"press": {
"$type": "color",
"$value": "{primitives.orange.1100}",
"$description": "Background color for pressed orange-themed elements."
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{primitives.orange.100}",
"$description": "Default background color for subtle orange elements."
},
"hover": {
"$type": "color",
"$value": "{primitives.orange.200}"
},
"press": {
"$type": "color",
"$value": "{primitives.orange.300}",
"$description": "Background color for pressed subtle orange elements."
}
}
},
"lime": {
"base": {
"default": {
"$type": "color",
"$value": "{primitives.lime.800}",
"$description": "Default background color for lime-themed elements."
},
"hover": {
"$type": "color",
"$value": "{primitives.lime.900}"
},
"press": {
"$type": "color",
"$value": "{primitives.lime.1000}",
"$description": "Background color for pressed lime-themed elements."
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{primitives.lime.100}",
"$description": "Default background color for subtle lime elements."
},
"hover": {
"$type": "color",
"$value": "{primitives.lime.200}"
},
"press": {
"$type": "color",
"$value": "{primitives.lime.300}",
"$description": "Background color for pressed subtle lime elements."
}
}
},
"teal": {
"base": {
"default": {
"$type": "color",
"$value": "{primitives.teal.800}",
"$description": "Default background color for teal-themed elements."
},
"hover": {
"$type": "color",
"$value": "{primitives.teal.900}"
},
"press": {
"$type": "color",
"$value": "{primitives.teal.1000}",
"$description": "Background color for pressed teal-themed elements."
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{primitives.teal.100}",
"$description": "Default background color for subtle teal elements."
},
"hover": {
"$type": "color",
"$value": "{primitives.teal.200}"
},
"press": {
"$type": "color",
"$value": "{primitives.teal.300}",
"$description": "Background color for pressed subtle teal elements."
}
}
},
"aqua": {
"base": {
"default": {
"$type": "color",
"$value": "{primitives.aqua.900}",
"$description": "Default background color for aqua-themed elements."
},
"hover": {
"$type": "color",
"$value": "{primitives.aqua.1000}"
},
"press": {
"$type": "color",
"$value": "{primitives.aqua.1100}",
"$description": "Background color for pressed aqua-themed elements."
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{primitives.aqua.100}",
"$description": "Default background color for subtle aqua elements."
},
"hover": {
"$type": "color",
"$value": "{primitives.aqua.200}"
},
"press": {
"$type": "color",
"$value": "{primitives.aqua.300}",
"$description": "Background color for pressed subtle aqua elements."
}
}
},
"indigo": {
"base": {
"default": {
"$type": "color",
"$value": "{primitives.indigo.700}",
"$description": "Default background color for indigo-themed elements."
},
"hover": {
"$type": "color",
"$value": "{primitives.indigo.800}"
},
"press": {
"$type": "color",
"$value": "{primitives.indigo.900}",
"$description": "Background color for pressed indigo-themed elements."
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{primitives.indigo.100}",
"$description": "Default background color for subtle indigo elements."
},
"hover": {
"$type": "color",
"$value": "{primitives.indigo.200}"
},
"press": {
"$type": "color",
"$value": "{primitives.indigo.300}",
"$description": "Background color for pressed subtle indigo elements."
}
}
},
"violet": {
"base": {
"default": {
"$type": "color",
"$value": "{primitives.violet.700}",
"$description": "Default background color for violet-themed elements."
},
"hover": {
"$type": "color",
"$value": "{primitives.violet.800}"
},
"press": {
"$type": "color",
"$value": "{primitives.violet.900}",
"$description": "Background color for pressed violet-themed elements."
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{primitives.violet.100}",
"$description": "Default background color for subtle violet elements."
},
"hover": {
"$type": "color",
"$value": "{primitives.violet.200}"
},
"press": {
"$type": "color",
"$value": "{primitives.violet.300}",
"$description": "Background color for pressed subtle violet elements."
}
}
},
"purple": {
"base": {
"default": {
"$type": "color",
"$value": "{primitives.purple.800}",
"$description": "Default background color for purple-themed elements."
},
"hover": {
"$type": "color",
"$value": "{primitives.purple.900}"
},
"press": {
"$type": "color",
"$value": "{primitives.purple.1000}",
"$description": "Background color for pressed purple-themed elements."
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{primitives.purple.100}",
"$description": "Default background color for subtle purple elements."
},
"hover": {
"$type": "color",
"$value": "{primitives.purple.200}"
},
"press": {
"$type": "color",
"$value": "{primitives.purple.300}",
"$description": "Background color for pressed subtle purple elements."
}
}
},
"magenta": {
"base": {
"default": {
"$type": "color",
"$value": "{primitives.magenta.900}",
"$description": "Default background color for magenta-themed elements."
},
"hover": {
"$type": "color",
"$value": "{primitives.magenta.1000}"
},
"press": {
"$type": "color",
"$value": "{primitives.magenta.1100}",
"$description": "Background color for pressed magenta-themed elements."
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{primitives.magenta.100}",
"$description": "Default background color for subtle magenta elements."
},
"hover": {
"$type": "color",
"$value": "{primitives.magenta.200}"
},
"press": {
"$type": "color",
"$value": "{primitives.magenta.300}",
"$description": "Background color for pressed subtle magenta elements."
}
}
},
"pink": {
"base": {
"default": {
"$type": "color",
"$value": "{primitives.pink.800}",
"$description": "Default background color for pink-themed elements."
},
"hover": {
"$type": "color",
"$value": "{primitives.pink.900}"
},
"press": {
"$type": "color",
"$value": "{primitives.pink.1000}",
"$description": "Background color for pressed pink-themed elements."
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{primitives.pink.100}",
"$description": "Default background color for subtle pink elements."
},
"hover": {
"$type": "color",
"$value": "{primitives.pink.200}"
},
"press": {
"$type": "color",
"$value": "{primitives.pink.300}",
"$description": "Background color for pressed subtle pink elements."
}
}
}
}
},
"text": {
"default": {
"$type": "color",
"$value": "{primitives.neutral.1200}",
"$description": "Use for the default color of text, for titles, body text, and general content."
},
"subtle": {
"$type": "color",
"$value": "{primitives.neutral.1000}",
"$description": "Use for subtitles, providing a softer emphasis to complement the default text and structure the content."
},
"subtlest": {
"$type": "color",
"$value": "{primitives.neutral.900}",
"$description": "Use for helper messages and placeholder text, offering minimal emphasis while remaining legible for supplementary content."
},
"disabled": {
"$type": "color",
"$value": "{primitives.neutral.600}",
"$description": "Use for text in the disabled state, ensuring it remains legible while indicating it is not interactive."
},
"primary": {
"$type": "color",
"$value": "{semantics.primary.800}",
"$description": "Use for text that highlights primary information or actions, such as headings, titles, or key content."
},
"info": {
"$type": "color",
"$value": "{primitives.blue.800}",
"$description": "Use for text that conveys informational content, such as status updates or tips, to highlight non-critical but important information."
},
"select": {
"$type": "color",
"$value": "{semantics.primary.700}",
"$description": "Use for text in the selected state, such as in tab header or bottom bar items, to indicate the chosen option."
},
"success": {
"$type": "color",
"$value": "{semantics.success.800}",
"$description": "Use for text that indicates positive or successful states."
},
"danger": {
"$type": "color",
"$value": "{semantics.danger.800}",
"$description": "Use for text that indicates critical or error states, such as error messages, to draw attention to important issues."
},
"warning": {
"$type": "color",
"$value": "{semantics.warning.1000}",
"$description": "Use for text that indicates caution or potential issues, without being too alarming."
},
"inverse": {
"$type": "color",
"$value": "{primitives.base.white}",
"$description": "Use for text on base backgrounds, ensuring high contrast and legibility. This text is always white, perfect for buttons or prominent elements."
},
"link": {
"default": {
"$type": "color",
"$value": "{semantics.primary.900}",
"$description": "Use for links text in their default state."
},
"hover": {
"$type": "color",
"$value": "{semantics.primary.1000}"
},
"press": {
"$type": "color",
"$value": "{semantics.primary.1100}",
"$description": "Use for links text in their press state."
},
"visited": {
"$type": "color",
"$value": "{semantics.primary.1100}",
"$description": "Use for links text in their visited state."
}
},
"extended": {
"pumpkin": {
"$type": "color",
"$value": "{primitives.pumpkin.900}",
"$description": "Text color for extended pumpkin-themed elements."
},
"orange": {
"$type": "color",
"$value": "{primitives.orange.1000}",
"$description": "Text color for extended orange-themed elements."
},
"lime": {
"$type": "color",
"$value": "{primitives.lime.800}",
"$description": "Text color for extended lime-themed elements."
},
"teal": {
"$type": "color",
"$value": "{primitives.teal.900}",
"$description": "Text color for extended teal-themed elements."
},
"aqua": {
"$type": "color",
"$value": "{primitives.aqua.900}",
"$description": "Text color for extended aqua-themed elements."
},
"indigo": {
"$type": "color",
"$value": "{primitives.indigo.900}",
"$description": "Text color for extended indigo-themed elements."
},
"violet": {
"$type": "color",
"$value": "{primitives.violet.900}",
"$description": "Text color for extended violet-themed elements."
},
"purple": {
"$type": "color",
"$value": "{primitives.purple.900}",
"$description": "Text color for extended purple-themed elements."
},
"magenta": {
"$type": "color",
"$value": "{primitives.magenta.900}",
"$description": "Text color for extended magenta-themed elements."
},
"pink": {
"$type": "color",
"$value": "{primitives.pink.900}",
"$description": "Text color for extended pink-themed elements."
}
}
},
"border": {
"default": {
"$type": "color",
"$value": "{primitives.neutral.500}"
},
"subtle": {
"$type": "color",
"$value": "{primitives.neutral.100}"
},
"subtlest": {
"$type": "color",
"$value": "{primitives.base.white}"
},
"disabled": {
"$type": "color",
"$value": "{primitives.neutral.300}"
},
"boldest": {
"$type": "color",
"$value": "{primitives.neutral.1200}"
},
"primary": {
"$type": "color",
"$value": "{semantics.primary.base}"
},
"info": {
"$type": "color",
"$value": "{semantics.info.base}"
},
"success": {
"$type": "color",
"$value": "{semantics.success.800}"
},
"warning": {
"$type": "color",
"$value": "{semantics.warning.900}"
},
"focus": {
"default": {
"$type": "color",
"$value": "{primitives.blue.400}"
},
"error": {
"$type": "color",
"$value": "{primitives.red.400}"
}
},
"danger": {
"default": {
"$type": "color",
"$value": "{semantics.danger.800}"
},
"press": {
"$type": "color",
"$value": "{semantics.danger.1000}"
}
},
"input": {
"default": {
"$type": "color",
"$value": "{primitives.neutral.400}"
},
"hover": {
"$type": "color",
"$value": "{primitives.neutral.500}"
},
"press": {
"$type": "color",
"$value": "{primitives.neutral.600}"
},
"read-only": {
"$type": "color",
"$value": "{primitives.neutral.600}"
}
}
},
"icon": {
"default": {
"$type": "color",
"$value": "{primitives.neutral.1200}"
},
"subtle": {
"$type": "color",
"$value": "{primitives.neutral.1000}"
},
"subtlest": {
"$type": "color",
"$value": "{primitives.neutral.800}"
},
"disabled": {
"$type": "color",
"$value": "{primitives.neutral.600}"
},
"primary": {
"$type": "color",
"$value": "{semantics.primary.900}"
},
"info": {
"$type": "color",
"$value": "{primitives.blue.800}"
},
"select": {
"$type": "color",
"$value": "{semantics.primary.800}"
},
"success": {
"$type": "color",
"$value": "{semantics.success.800}"
},
"danger": {
"$type": "color",
"$value": "{primitives.red.800}"
},
"warning": {
"$type": "color",
"$value": "{primitives.yellow.1000}"
},
"inverse": {
"$type": "color",
"$value": "{primitives.base.white}"
},
"link": {
"default": {
"$type": "color",
"$value": "{text.link.default}"
},
"hover": {
"$type": "color",
"$value": "{text.link.hover}"
},
"press": {
"$type": "color",
"$value": "{text.link.press}"
},
"visited": {
"$type": "color",
"$value": "{text.link.visited}"
}
},
"extended": {
"pumpkin": {
"$type": "color",
"$value": "{primitives.pumpkin.900}"
},
"orange": {
"$type": "color",
"$value": "{primitives.orange.1000}"
},
"lime": {
"$type": "color",
"$value": "{primitives.lime.800}"
},
"teal": {
"$type": "color",
"$value": "{primitives.teal.900}"
},
"aqua": {
"$type": "color",
"$value": "{primitives.aqua.900}"
},
"indigo": {
"$type": "color",
"$value": "{primitives.indigo.900}"
},
"violet": {
"$type": "color",
"$value": "{primitives.violet.900}"
},
"purple": {
"$type": "color",
"$value": "{primitives.purple.900}"
},
"magenta": {
"$type": "color",
"$value": "{primitives.magenta.900}"
},
"pink": {
"$type": "color",
"$value": "{primitives.pink.900}"
}
}
},
"state": {
"press": {
"$type": "color",
"$value": "#00000012",
"$description": "A subtle, semi-transparent overlay for interactive elements like avatars or images that don't have a dedicated pressed color."
},
"hover": {
"$type": "color",
"$value": "#0000000a"
},
"disabled": {
"$type": "color",
"$value": "#ffffff99",
"$description": "A semi-transparent overlay used to show that an element, like a button or input field, is inactive and can't be interacted with."
}
},
"elevation": {
"1": {
"$type": "boxShadow",
"$value": [
{
"color": "{shadow.1}",
"type": "dropShadow",
"x": "0",
"y": "0",
"blur": "4",
"spread": "0"
},
{
"color": "{shadow.3}",
"type": "dropShadow",
"x": "0",
"y": "3",
"blur": "9",
"spread": "0"
}
],
"$description": "Softest shadow for subtle lift and minimal depth."
},
"2": {
"$type": "boxShadow",
"$value": [
{
"color": "{shadow.2}",
"type": "dropShadow",
"x": "0",
"y": "1",
"blur": "5",
"spread": "0"
},
{
"color": "{shadow.4}",
"type": "dropShadow",
"x": "0",
"y": "8",
"blur": "25",
"spread": "0"
}
],
"$description": "Moderate shadow for clear yet gentle separation. E.g. Bottom Bar."
},
"3": {
"$type": "boxShadow",
"$value": [
{
"color": "{shadow.2}",
"type": "dropShadow",
"x": "0",
"y": "2",
"blur": "7",
"spread": "0"
},
{
"color": "{shadow.6}",
"type": "dropShadow",
"x": "0",
"y": "6",
"blur": "32",
"spread": "0"
}
],
"$description": "Pronounced shadow for noticeable depth and emphasis.E.g. Bottom Sheet."
},
"4": {
"$type": "boxShadow",
"$value": [
{
"color": "{shadow.5}",
"type": "dropShadow",
"x": "0",
"y": "3",
"blur": "12",
"spread": "0"
},
{
"color": "{shadow.7}",
"type": "dropShadow",
"x": "0",
"y": "15",
"blur": "48",
"spread": "0"
}
],
"$description": "Strongest shadow for prominent depth and elevation.E.g. Modal, Notification."
}
},
"backdrop": {
"$type": "color",
"$value": "#00000040",
"$description": "It applies a semi-transparent fill and a blur to de-emphasize content underneath, perfect for modals and other overlays (e.g. Bottom Sheet)."
}
}