@synergy-design-system/tokens
Version:
Design tokens for Synergy, the SICK Design System
2,268 lines • 49 kB
JSON
{
"alert": {
"error": {
"color-background": {
"type": "color",
"value": "{panel.background.color}"
},
"color-border": {
"type": "color",
"value": "{panel.border.color}"
},
"color-icon": {
"type": "color",
"value": "{color.error.600}"
},
"color-indicator": {
"type": "color",
"value": "{color.error.600}"
}
},
"informative": {
"color-background": {
"type": "color",
"value": "{panel.background.color}"
},
"color-border": {
"type": "color",
"value": "{panel.border.color}"
},
"color-icon": {
"type": "color",
"value": "{color.info.600}"
},
"color-indicator": {
"type": "color",
"value": "{color.info.600}"
}
},
"neutral": {
"color-background": {
"type": "color",
"value": "{panel.background.color}"
},
"color-border": {
"type": "color",
"value": "{panel.border.color}"
},
"color-icon": {
"type": "color",
"value": "{color.neutral.800}"
},
"color-indicator": {
"type": "color",
"value": "{color.neutral.800}"
}
},
"success": {
"color-background": {
"type": "color",
"value": "{panel.background.color}"
},
"color-border": {
"type": "color",
"value": "{panel.border.color}"
},
"color-icon": {
"type": "color",
"value": "{color.success.500}"
},
"color-indicator": {
"type": "color",
"value": "{color.success.500}"
}
},
"warning": {
"color-background": {
"type": "color",
"value": "{panel.background.color}"
},
"color-border": {
"type": "color",
"value": "{panel.border.color}"
},
"color-icon": {
"type": "color",
"value": "{color.warning.400}"
},
"color-indicator": {
"type": "color",
"value": "{color.warning.400}"
}
}
},
"background": {
"color-1": {
"type": "color",
"value": "{color.neutral.200}"
},
"color-2": {
"type": "color",
"value": "{color.accent.100}"
}
},
"badge": {
"error": {
"color-background": {
"type": "color",
"value": "{color.error.600}"
},
"color-text": {
"type": "color",
"value": "{typography.color.text-inverted}"
}
},
"informative": {
"color-background": {
"type": "color",
"value": "{color.info.600}"
},
"color-text": {
"type": "color",
"value": "{typography.color.text-inverted}"
}
},
"neutral": {
"color-background": {
"type": "color",
"value": "{color.neutral.800}"
},
"color-text": {
"type": "color",
"value": "{typography.color.text-inverted}"
}
},
"success": {
"color-background": {
"type": "color",
"value": "{color.success.500}"
},
"color-text": {
"type": "color",
"value": "{typography.color.text}"
}
},
"warning": {
"color-background": {
"type": "color",
"value": "{color.warning.400}"
},
"color-text": {
"type": "color",
"value": "{typography.color.text}"
}
}
},
"border-radius": {
"circle": {
"type": "sizing",
"value": "9999px"
},
"large": {
"type": "sizing",
"value": "8px"
},
"medium": {
"type": "sizing",
"value": "8px"
},
"none": {
"type": "sizing",
"value": "0px"
},
"pill": {
"type": "sizing",
"value": "9999px"
},
"small": {
"type": "sizing",
"value": "4px"
},
"x-large": {
"type": "sizing",
"value": "16px"
}
},
"border-width": {
"large": {
"description": "Large",
"type": "sizing",
"value": "3px"
},
"medium": {
"description": "Medium",
"type": "sizing",
"value": "2px"
},
"none": {
"description": "None",
"type": "sizing",
"value": "0px"
},
"small": {
"description": "Small",
"type": "sizing",
"value": "1px"
},
"x-large": {
"description": "X Large",
"type": "sizing",
"value": "4px"
}
},
"breadcrumb": {
"color": {
"type": "color",
"value": "{color.neutral.500}"
}
},
"button": {
"border": {
"radius-large": {
"type": "sizing",
"value": "{input.border.radius-large}"
},
"radius-medium": {
"type": "sizing",
"value": "{input.border.radius-medium}"
},
"radius-small": {
"type": "sizing",
"value": "{input.border.radius-small}"
}
},
"color": {
"type": "color",
"value": "{interactive.emphasis.color}"
},
"color-active": {
"type": "color",
"value": "{interactive.emphasis.color-active}"
},
"color-disabled": {
"type": "color",
"value": "{color.neutral.600}"
},
"color-hover": {
"type": "color",
"value": "{interactive.emphasis.color-hover}"
},
"filled": {
"color-text": {
"type": "color",
"value": "rgba(255, 255, 255, 0.00)"
},
"color-text-active": {
"type": "color",
"value": "rgba(255, 255, 255, 0.00)"
},
"color-text-hover": {
"type": "color",
"value": "rgba(255, 255, 255, 0.00)"
}
},
"font-size": {
"large": {
"type": "sizing",
"value": "{font-size.large}"
},
"medium": {
"type": "sizing",
"value": "{font-size.medium}"
},
"small": {
"type": "sizing",
"value": "{font-size.small}"
}
},
"outline": {
"color": {
"type": "color",
"value": "rgba(255, 255, 255, 0.00)"
},
"color-active": {
"type": "color",
"value": "rgba(255, 255, 255, 0.00)"
},
"color-hover": {
"type": "color",
"value": "rgba(255, 255, 255, 0.00)"
},
"color-text": {
"type": "color",
"value": "rgba(255, 255, 255, 0.00)"
},
"color-text-active": {
"type": "color",
"value": "rgba(255, 255, 255, 0.00)"
},
"color-text-hover": {
"type": "color",
"value": "rgba(255, 255, 255, 0.00)"
}
},
"text": {
"color-text": {
"type": "color",
"value": "rgba(255, 255, 255, 0.00)"
},
"color-text-active": {
"type": "color",
"value": "rgba(255, 255, 255, 0.00)"
},
"color-text-hover": {
"type": "color",
"value": "rgba(255, 255, 255, 0.00)"
}
}
},
"checkbox": {
"border": {
"radius": {
"type": "sizing",
"value": "{border-radius.none}"
}
}
},
"color": {
"accent": {
"50": {
"type": "color",
"value": "#481700"
},
"100": {
"type": "color",
"value": "#7c310b"
},
"200": {
"type": "color",
"value": "#983b08"
},
"300": {
"type": "color",
"value": "#bb4d02"
},
"400": {
"type": "color",
"value": "#e27200"
},
"500": {
"type": "color",
"value": "#f39200"
},
"600": {
"type": "color",
"value": "#ffbd1b"
},
"700": {
"type": "color",
"value": "#ffd246"
},
"800": {
"type": "color",
"value": "#ffe685"
},
"900": {
"type": "color",
"value": "#fff2c5"
},
"950": {
"type": "color",
"value": "#fffbea"
}
},
"critical": {
"50": {
"type": "color",
"value": "#481700"
},
"100": {
"type": "color",
"value": "#7c310b"
},
"200": {
"type": "color",
"value": "#983b08"
},
"300": {
"type": "color",
"value": "#bb4d02"
},
"400": {
"type": "color",
"value": "#e27200"
},
"500": {
"type": "color",
"value": "#f39200"
},
"600": {
"type": "color",
"value": "#ffbd1b"
},
"700": {
"type": "color",
"value": "#ffd246"
},
"800": {
"type": "color",
"value": "#ffe685"
},
"900": {
"type": "color",
"value": "#fff2c5"
},
"950": {
"type": "color",
"value": "#fffbea"
}
},
"data": {
"magenta": {
"50": {
"type": "color",
"value": "#51062c"
},
"100": {
"type": "color",
"value": "#85164f"
},
"200": {
"type": "color",
"value": "#a0145b"
},
"300": {
"type": "color",
"value": "#c1156e"
},
"400": {
"type": "color",
"value": "#e13393"
},
"500": {
"type": "color",
"value": "#ef45ab"
},
"600": {
"type": "color",
"value": "#f76fc5"
},
"700": {
"type": "color",
"value": "#fba6dd"
},
"800": {
"type": "color",
"value": "#fcceed"
},
"900": {
"type": "color",
"value": "#fce7f5"
},
"950": {
"type": "color",
"value": "#fdf2f9"
}
},
"purple": {
"50": {
"type": "color",
"value": "#3c0151"
},
"100": {
"type": "color",
"value": "#5e1679"
},
"200": {
"type": "color",
"value": "#6f1395"
},
"300": {
"type": "color",
"value": "#8515b6"
},
"400": {
"type": "color",
"value": "#9d1edb"
},
"500": {
"type": "color",
"value": "#b73ef7"
},
"600": {
"type": "color",
"value": "#c457ff"
},
"700": {
"type": "color",
"value": "#e0a7ff"
},
"800": {
"type": "color",
"value": "#ebceff"
},
"900": {
"type": "color",
"value": "#f6e7ff"
},
"950": {
"type": "color",
"value": "#faf3ff"
}
},
"teal": {
"50": {
"type": "color",
"value": "#002f33"
},
"100": {
"type": "color",
"value": "#0d5354"
},
"200": {
"type": "color",
"value": "#0a6365"
},
"300": {
"type": "color",
"value": "#057f80"
},
"400": {
"type": "color",
"value": "#009797"
},
"500": {
"type": "color",
"value": "#04c8c3"
},
"600": {
"type": "color",
"value": "#1de4dd"
},
"700": {
"type": "color",
"value": "#51f7ec"
},
"800": {
"type": "color",
"value": "#90fff3"
},
"900": {
"type": "color",
"value": "#c7fff9"
},
"950": {
"type": "color",
"value": "#effefc"
}
}
},
"error": {
"50": {
"type": "color",
"value": "#4e010a"
},
"100": {
"type": "color",
"value": "#8d0f1e"
},
"200": {
"type": "color",
"value": "#ab091c"
},
"300": {
"type": "color",
"value": "#d0051d"
},
"400": {
"type": "color",
"value": "#ea0823"
},
"500": {
"type": "color",
"value": "#ff2b44"
},
"600": {
"type": "color",
"value": "#ff5d70"
},
"700": {
"type": "color",
"value": "#ff98a4"
},
"800": {
"type": "color",
"value": "#ffc3c9"
},
"900": {
"type": "color",
"value": "#ffdee2"
},
"950": {
"type": "color",
"value": "#fff0f2"
}
},
"info": {
"50": {
"type": "color",
"value": "#072e4a"
},
"100": {
"type": "color",
"value": "#0b486f"
},
"200": {
"type": "color",
"value": "#065786"
},
"300": {
"type": "color",
"value": "#0166a3"
},
"400": {
"type": "color",
"value": "#007cc1"
},
"500": {
"type": "color",
"value": "#0ca2eb"
},
"600": {
"type": "color",
"value": "#36bbfa"
},
"700": {
"type": "color",
"value": "#7cd1fd"
},
"800": {
"type": "color",
"value": "#b9e5fe"
},
"900": {
"type": "color",
"value": "#e0f1fe"
},
"950": {
"type": "color",
"value": "#f0f9ff"
}
},
"muted": {
"50": {
"type": "color",
"value": "#31373a"
},
"100": {
"type": "color",
"value": "#4c5357"
},
"200": {
"type": "color",
"value": "#5e676b"
},
"300": {
"type": "color",
"value": "#859298"
},
"400": {
"type": "color",
"value": "#859298"
},
"500": {
"type": "color",
"value": "#9ea9ae"
},
"600": {
"type": "color",
"value": "#bac2c6"
},
"700": {
"type": "color",
"value": "#d5dbdd"
},
"800": {
"type": "color",
"value": "#e8ebec"
},
"900": {
"type": "color",
"value": "#f2f3f6"
},
"950": {
"type": "color",
"value": "#f9fafb"
}
},
"neutral": {
"0": {
"type": "color",
"value": "#000000"
},
"50": {
"type": "color",
"value": "#31373a"
},
"100": {
"type": "color",
"value": "#4c5357"
},
"200": {
"type": "color",
"value": "#5e676b"
},
"300": {
"type": "color",
"value": "#737f85"
},
"400": {
"type": "color",
"value": "#859298"
},
"500": {
"type": "color",
"value": "#9ea9ae"
},
"600": {
"type": "color",
"value": "#bac2c6"
},
"700": {
"type": "color",
"value": "#d5dbdd"
},
"800": {
"type": "color",
"value": "#e8ebec"
},
"900": {
"type": "color",
"value": "#f2f3f6"
},
"950": {
"type": "color",
"value": "#f9fafb"
},
"1000": {
"type": "color",
"value": "#ffffff"
}
},
"primary": {
"50": {
"type": "color",
"value": "#072e4a"
},
"100": {
"type": "color",
"value": "#0b486f"
},
"200": {
"type": "color",
"value": "#065786"
},
"300": {
"type": "color",
"value": "#0166a3"
},
"400": {
"type": "color",
"value": "#007cc1"
},
"500": {
"type": "color",
"value": "#0ca2eb"
},
"600": {
"type": "color",
"value": "#36bbfa"
},
"700": {
"type": "color",
"value": "#7cd1fd"
},
"800": {
"type": "color",
"value": "#b9e5fe"
},
"900": {
"type": "color",
"value": "#e0f1fe"
},
"950": {
"type": "color",
"value": "#f0f9ff"
},
"1000": {
"type": "color",
"value": "#f0f9ff"
}
},
"shadow": {
"sticky-down": {
"color": {
"type": "color",
"value": "rgba(49, 55, 58, 0.16)"
}
}
},
"success": {
"50": {
"type": "color",
"value": "#172c07"
},
"100": {
"type": "color",
"value": "#315017"
},
"200": {
"type": "color",
"value": "#395e16"
},
"300": {
"type": "color",
"value": "#437714"
},
"400": {
"type": "color",
"value": "#63b017"
},
"500": {
"type": "color",
"value": "#73c31f"
},
"600": {
"type": "color",
"value": "#93dd3e"
},
"700": {
"type": "color",
"value": "#b0eb6b"
},
"800": {
"type": "color",
"value": "#d1f4a2"
},
"900": {
"type": "color",
"value": "#e7facd"
},
"950": {
"type": "color",
"value": "#f5fde8"
}
},
"warning": {
"50": {
"type": "color",
"value": "#411f07"
},
"100": {
"type": "color",
"value": "#6f3e14"
},
"200": {
"type": "color",
"value": "#834b10"
},
"300": {
"type": "color",
"value": "#9e5f0a"
},
"400": {
"type": "color",
"value": "#c68608"
},
"500": {
"type": "color",
"value": "#e5ae0d"
},
"600": {
"type": "color",
"value": "#f5c413"
},
"700": {
"type": "color",
"value": "#f9da4b"
},
"800": {
"type": "color",
"value": "#fcec8c"
},
"900": {
"type": "color",
"value": "#fdf7c4"
},
"950": {
"type": "color",
"value": "#fefce8"
}
}
},
"details": {
"open-rotation": {
"type": "string",
"value": "360deg"
}
},
"dimension": {
"base": {
"description": "to be deprecated",
"type": "sizing",
"value": "4px"
}
},
"duration": {
"extra-fast": {
"type": "string",
"value": "50ms"
},
"extra-slow": {
"type": "string",
"value": "1000ms"
},
"fast": {
"type": "string",
"value": "150ms"
},
"normal": {
"type": "string",
"value": "250ms"
},
"slow": {
"type": "string",
"value": "500ms"
}
},
"focus-ring": {
"border-radius": {
"type": "sizing",
"value": "{border-radius.none}"
},
"color": {
"type": "color",
"value": "{color.primary.400}"
},
"offset": {
"type": "sizing",
"value": "{spacing.3x-small}"
},
"style": {
"type": "string",
"value": "solid"
},
"width": {
"type": "sizing",
"value": "{border-width.medium}"
}
},
"font": {
"mono": {
"description": "Coding font",
"type": "fontFamilies",
"value": "Roboto Mono"
},
"sans": {
"description": "Main font",
"type": "fontFamilies",
"value": "Open Sans"
},
"sans-fallback": {
"description": "System font",
"type": "fontFamilies",
"value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif, 'apple color emoji', 'segoe ui emoji', 'segoe ui symbol'"
},
"serif": {
"description": "Shoelace compatibility DO NOT USE",
"type": "fontFamilies",
"value": "Georgia, 'Times New Roman', serif"
}
},
"font-size": {
"0x-large": {
"type": "sizing",
"value": "22px"
},
"1_5x-large": {
"type": "sizing",
"value": "30px"
},
"1x-large": {
"type": "sizing",
"value": "28px"
},
"2_5x-large": {
"type": "sizing",
"value": "34px"
},
"2x-large": {
"type": "sizing",
"value": "32px"
},
"2x-small": {
"type": "sizing",
"value": "11px"
},
"3x-large": {
"type": "sizing",
"value": "40px"
},
"4x-large": {
"type": "sizing",
"value": "52px"
},
"large": {
"type": "sizing",
"value": "20px"
},
"medium": {
"type": "sizing",
"value": "16px"
},
"medium-large": {
"type": "sizing",
"value": "18px"
},
"small": {
"type": "sizing",
"value": "14px"
},
"x-large": {
"type": "sizing",
"value": "24px"
},
"x-small": {
"type": "sizing",
"value": "12px"
}
},
"font-weight": {
"bold": {
"type": "fontWeights",
"value": "700"
},
"light": {
"description": "Shoelace compatibility DO NOT USE",
"type": "fontWeights",
"value": "400"
},
"normal": {
"type": "fontWeights",
"value": "400"
},
"semibold": {
"type": "fontWeights",
"value": "600"
}
},
"header": {
"border": {
"color": {
"type": "color",
"value": "{color.neutral.400}"
}
}
},
"icon-button": {
"focus-ring": {
"border-radius": {
"type": "sizing",
"value": "{border-radius.none}"
}
}
},
"input": {
"background": {
"color": {
"type": "color",
"value": "{color.neutral.0}"
},
"color-disabled": {
"type": "color",
"value": "{input.background.color}"
},
"color-focus": {
"type": "color",
"value": "{input.background.color}"
},
"color-hover": {
"type": "color",
"value": "{input.background.color}"
}
},
"border": {
"color": {
"type": "color",
"value": "{color.neutral.700}"
},
"color-active": {
"type": "color",
"value": "{color.neutral.1000}"
},
"color-disabled": {
"type": "color",
"value": "{color.neutral.700}"
},
"color-focus": {
"type": "color",
"value": "{color.neutral.950}"
},
"color-focus-error": {
"type": "color",
"value": "{color.error.700}"
},
"color-hover": {
"type": "color",
"value": "{color.neutral.950}"
},
"color-offset": {
"type": "color",
"value": "{panel.background.color}"
},
"radius-large": {
"type": "sizing",
"value": "{border-radius.none}"
},
"radius-medium": {
"type": "sizing",
"value": "{border-radius.none}"
},
"radius-small": {
"type": "sizing",
"value": "{border-radius.none}"
},
"width": {
"type": "sizing",
"value": "{border-width.small}"
}
},
"color": {
"type": "color",
"value": "{color.neutral.950}"
},
"color-disabled": {
"type": "color",
"value": "{color.neutral.950}"
},
"color-focus": {
"type": "color",
"value": "{color.neutral.950}"
},
"color-hover": {
"type": "color",
"value": "{color.neutral.950}"
},
"disabled-opacity": {
"type": "opacity",
"value": "{opacity.50}"
},
"focus-ring": {
"color": {
"type": "color",
"value": "{color.primary.400}"
},
"error": {
"type": "color",
"value": "{color.error.600}"
},
"offset": {
"type": "sizing",
"value": "0px"
}
},
"font-family": {
"type": "string",
"value": "{font.sans}"
},
"font-size": {
"large": {
"type": "sizing",
"value": "{font-size.large}"
},
"medium": {
"type": "sizing",
"value": "{font-size.medium}"
},
"small": {
"type": "sizing",
"value": "{font-size.small}"
}
},
"font-weight": {
"type": "fontWeights",
"value": "{font-weight.normal}"
},
"height": {
"large": {
"type": "sizing",
"value": "{spacing.3x-large}"
},
"medium": {
"type": "sizing",
"value": "{spacing.2x-large}"
},
"small": {
"type": "sizing",
"value": "36px"
}
},
"help-text": {
"color": {
"type": "color",
"value": "{color.neutral.800}"
},
"color-error": {
"type": "color",
"value": "{color.error.600}"
},
"font-size": {
"large": {
"type": "sizing",
"value": "{font-size.medium}"
},
"medium": {
"type": "sizing",
"value": "{font-size.small}"
},
"small": {
"type": "sizing",
"value": "{font-size.x-small}"
}
}
},
"icon": {
"color": {
"type": "color",
"value": "{color.neutral.800}"
},
"color-hover": {
"type": "color",
"value": "{color.neutral.800}"
},
"icon-clearable": {
"color": {
"type": "color",
"value": "{color.neutral.600}"
},
"color-active": {
"type": "color",
"value": "{color.neutral.900}"
},
"color-hover": {
"type": "color",
"value": "{color.neutral.800}"
}
}
},
"label": {
"color": {
"type": "color",
"value": "{color.neutral.950}"
},
"font-size": {
"large": {
"type": "sizing",
"value": "{font-size.large}"
},
"medium": {
"type": "sizing",
"value": "{font-size.medium}"
},
"small": {
"type": "sizing",
"value": "{font-size.small}"
}
}
},
"letter-spacing": {
"type": "letterSpacing",
"value": "{letter-spacing.normal}"
},
"placeholder": {
"color": {
"type": "color",
"value": "{color.neutral.500}"
},
"color-disabled": {
"type": "color",
"value": "{color.neutral.500}"
}
},
"readonly": {
"color-hover": {
"type": "color",
"value": "{color.neutral.950}"
}
},
"readonly-background": {
"color": {
"type": "color",
"value": "{readonly.background.color}"
},
"color-disabled": {
"type": "color",
"value": "{readonly.background.color}"
},
"color-focus": {
"type": "color",
"value": "{readonly.background.color}"
},
"color-hover": {
"type": "color",
"value": "{readonly.background.color}"
}
},
"required": {
"content": {
"type": "content",
"value": "*"
},
"content-color": {
"type": "color",
"value": "{input.label.color}"
},
"content-offset": {
"type": "sizing",
"value": "-2px"
}
},
"spacing": {
"large": {
"type": "sizing",
"value": "{spacing.large}"
},
"medium": {
"type": "sizing",
"value": "{spacing.medium}"
},
"small": {
"type": "sizing",
"value": "{spacing.small}"
}
},
"width": {
"type": "sizing",
"value": "{border-width.small}"
}
},
"interactive": {
"background": {
"color-active": {
"type": "color",
"value": "{color.neutral.300}"
},
"color-hover": {
"type": "color",
"value": "{color.neutral.100}"
}
},
"emphasis": {
"color": {
"type": "color",
"value": "{color.primary.600}"
},
"color-active": {
"type": "color",
"value": "{color.primary.950}"
},
"color-hover": {
"type": "color",
"value": "{color.primary.900}"
}
},
"quiet": {
"color": {
"type": "color",
"value": "{color.neutral.950}"
},
"color-active": {
"type": "color",
"value": "{color.primary.700}"
},
"color-hover": {
"type": "color",
"value": "{color.primary.600}"
}
}
},
"letter-spacing": {
"dense": {
"description": "Shoelace compatibility DO NOT USE",
"type": "letterSpacing",
"value": "-0.24px"
},
"denser": {
"description": "Shoelace compatibility DO NOT USE",
"type": "letterSpacing",
"value": "-0.48px"
},
"loose": {
"description": "Shoelace compatibility DO NOT USE",
"type": "letterSpacing",
"value": "1.2px"
},
"looser": {
"description": "Shoelace compatibility DO NOT USE",
"type": "letterSpacing",
"value": "2.4px"
},
"normal": {
"type": "letterSpacing",
"value": "0px"
}
},
"line-height": {
"dense": {
"description": "Shoelace compatibility DO NOT USE",
"type": "lineHeights",
"value": "120%"
},
"denser": {
"description": "Shoelace compatibility DO NOT USE",
"type": "lineHeights",
"value": "100%"
},
"loose": {
"description": "Shoelace compatibility DO NOT USE",
"type": "lineHeights",
"value": "180%"
},
"looser": {
"description": "Shoelace compatibility DO NOT USE",
"type": "lineHeights",
"value": "220%"
},
"normal": {
"description": "Shoelace compatibility DO NOT USE",
"type": "lineHeights",
"value": "140%"
}
},
"link": {
"color": {
"type": "color",
"value": "{interactive.emphasis.color}"
},
"color-active": {
"type": "color",
"value": "{interactive.emphasis.color-active}"
},
"color-hover": {
"type": "color",
"value": "{interactive.emphasis.color-hover}"
},
"quiet": {
"color": {
"type": "color",
"value": "{interactive.quiet.color}"
},
"color-active": {
"type": "color",
"value": "{interactive.quiet.color-active}"
},
"color-hover": {
"type": "color",
"value": "{interactive.quiet.color-hover}"
}
},
"underline-outline": {
"type": "string",
"value": "7%"
}
},
"logo": {
"color": {
"type": "color",
"value": "{color.primary.400}"
}
},
"namur": {
"color-border": {
"type": "color",
"value": "{color.neutral.50}"
},
"critical": {
"color": {
"type": "color",
"value": "{color.critical.600}"
},
"color-background": {
"type": "color",
"value": "{color.critical.100}"
}
},
"error": {
"color": {
"type": "color",
"value": "{color.error.500}"
},
"color-background": {
"type": "color",
"value": "{color.error.100}"
}
},
"icon": {
"color": {
"type": "color",
"value": "{color.neutral.50}"
}
},
"info": {
"color": {
"type": "color",
"value": "{color.info.500}"
},
"color-background": {
"type": "color",
"value": "{color.info.50}"
}
},
"neutral": {
"color": {
"type": "color",
"value": "{color.neutral.600}"
},
"color-background": {
"type": "color",
"value": "{color.neutral.800}"
}
},
"success": {
"color": {
"type": "color",
"value": "{color.success.500}"
},
"color-background": {
"type": "color",
"value": "{color.success.100}"
}
},
"warning": {
"color": {
"type": "color",
"value": "{color.warning.600}"
},
"color-background": {
"type": "color",
"value": "{color.warning.100}"
}
}
},
"opacity": {
"50": {
"description": "50%",
"type": "opacity",
"value": "50%"
}
},
"option": {
"background": {
"color-active": {
"type": "color",
"value": "{color.primary.400}"
},
"color-hover": {
"type": "color",
"value": "{color.neutral.100}"
}
},
"check": {
"color": {
"type": "color",
"value": "{color.primary.600}"
},
"color-active": {
"type": "color",
"value": "{color.neutral.0}"
},
"color-hover": {
"type": "color",
"value": "{color.primary.600}"
}
},
"color": {
"type": "color",
"value": "{typography.color.text}"
},
"color-active": {
"type": "color",
"value": "{typography.color.text-inverted}"
},
"color-hover": {
"type": "color",
"value": "{typography.color.text}"
},
"icon": {
"color": {
"type": "color",
"value": "{typography.color.text}"
},
"color-active": {
"type": "color",
"value": "{typography.color.text-inverted}"
},
"color-hover": {
"type": "color",
"value": "{typography.color.text}"
}
}
},
"overlay": {
"background": {
"blur": {
"type": "sizing",
"value": "0px"
},
"color": {
"type": "color",
"value": "rgba(49, 55, 58, 0.50)"
}
}
},
"page": {
"background": {
"description": "Will be DEPRECATED",
"type": "color",
"value": "{page.background-color}"
},
"background-color": {
"type": "color",
"value": "{color.neutral.0}"
},
"background-color-muted": {
"type": "color",
"value": "{color.neutral.50}"
}
},
"panel": {
"background": {
"color": {
"type": "color",
"value": "{color.neutral.0}"
}
},
"border": {
"color": {
"type": "color",
"value": "{color.neutral.300}"
},
"radius": {
"type": "sizing",
"value": "{border-radius.medium}"
},
"width": {
"type": "sizing",
"value": "{border-width.small}"
}
}
},
"progress": {
"indicator": {
"color": {
"type": "color",
"value": "{color.primary.600}"
}
},
"track": {
"color": {
"type": "color",
"value": "{color.neutral.200}"
}
}
},
"range": {
"color-inactive": {
"type": "color",
"value": "{color.neutral.200}"
},
"error": {
"color": {
"type": "color",
"value": "{color.error.700}"
}
},
"tick": {
"color": {
"type": "color",
"value": "{color.neutral.400}"
}
},
"track": {
"color-active": {
"type": "color",
"value": "{interactive.emphasis.color}"
}
}
},
"readonly": {
"background": {
"color": {
"type": "color",
"value": "{color.neutral.300}"
}
},
"border": {
"color": {
"type": "color",
"value": "{typography.color.text}"
}
},
"color-text": {
"type": "color",
"value": "{color.neutral.500}"
},
"icon": {
"color": {
"type": "color",
"value": "{color.neutral.500}"
},
"color-clearable": {
"type": "color",
"value": "{color.neutral.400}"
},
"color-expand": {
"type": "color",
"value": "{color.neutral.500}"
}
},
"indicator": {
"color": {
"type": "color",
"value": "{typography.color.text}"
}
},
"opacity": {
"color": {
"type": "color",
"value": "rgba(115, 127, 133, 0.40)"
}
}
},
"shadow": {
"medium": {
"type": "shadow",
"value": "0px 1px 2px 0px rgba(49, 55, 58, 0.08), 0px 1px 4px 0px rgba(49, 55, 58, 0.08), 0px 2px 8px 0px rgba(49, 55, 58, 0.08)"
},
"large": {
"type": "shadow",
"value": "0px 0px 3px 0px rgba(49, 55, 58, 0.12), 0px 2px 6px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.16)"
},
"x-large": {
"type": "shadow",
"value": "0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 8px 24px 0px rgba(49, 55, 58, 0.12), 0px 16px 48px 0px rgba(49, 55, 58, 0.16)"
},
"overflow-down": {
"type": "shadow",
"value": "0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.12), 0px 4px 12px 0px rgba(49, 55, 58, 0.16)"
},
"overflow-up": {
"type": "shadow",
"value": "0px -1px 4px 0px rgba(49, 55, 58, 0.12), 0px -3px 8px 0px rgba(49, 55, 58, 0.12), 0px -4px 12px 0px rgba(49, 55, 58, 0.16)"
},
"overflow-left": {
"type": "shadow",
"value": "-1px 0px 4px 0px rgba(49, 55, 58, 0.12), -3px 0px 8px 0px rgba(49, 55, 58, 0.12), -4px 0px 12px 0px rgba(49, 55, 58, 0.16)"
},
"overflow-right": {
"type": "shadow",
"value": "1px 0px 4px 0px rgba(49, 55, 58, 0.12), 3px 0px 8px 0px rgba(49, 55, 58, 0.12), 4px 0px 12px 0px rgba(49, 55, 58, 0.16)"
},
"x-small": {
"type": "shadow",
"value": "0px 1px 2px 0px rgba(49, 55, 58, 0.04), 0px 1px 4px 0px rgba(49, 55, 58, 0.04), 0px 2px 8px 0px rgba(49, 55, 58, 0.04)"
},
"small": {
"type": "shadow",
"value": "0px 1px 2px 0px rgba(49, 55, 58, 0.06), 0px 1px 4px 0px rgba(49, 55, 58, 0.06), 0px 2px 8px 0px rgba(49, 55, 58, 0.06)"
},
"sticky-down": {
"type": "shadow",
"value": "0px 3px 8px 0px rgba(49, 55, 58, 0.16)"
}
},
"spacing": {
"1_5x-large": {
"type": "sizing",
"value": "40px"
},
"2x-large": {
"type": "sizing",
"value": "48px"
},
"2x-small": {
"type": "sizing",
"value": "4px"
},
"3x-large": {
"type": "sizing",
"value": "64px"
},
"3x-small": {
"type": "sizing",
"value": "2px"
},
"4x-large": {
"type": "sizing",
"value": "96px"
},
"4x-small": {
"type": "sizing",
"value": "1px"
},
"5x-large": {
"type": "sizing",
"value": "128px"
},
"large": {
"type": "sizing",
"value": "24px"
},
"medium": {
"type": "sizing",
"value": "16px"
},
"medium-large": {
"type": "sizing",
"value": "20px"
},
"small": {
"type": "sizing",
"value": "12px"
},
"x-large": {
"type": "sizing",
"value": "32px"
},
"x-small": {
"type": "sizing",
"value": "8px"
}
},
"spinner": {
"opacity": {
"type": "opacity",
"value": "16%"
}
},
"switch": {
"height": {
"large": {
"type": "sizing",
"value": "28px"
},
"medium": {
"type": "sizing",
"value": "{spacing.large}"
},
"small": {
"type": "sizing",
"value": "{spacing.medium-large}"
}
},
"width": {
"large": {
"type": "sizing",
"value": "{spacing.2x-large}"
},
"medium": {
"type": "sizing",
"value": "{spacing.1_5x-large}"
},
"small": {
"type": "sizing",
"value": "{spacing.x-large}"
}
}
},
"table": {
"background": {
"color": {
"type": "color",
"value": "{panel.background.color}"
},
"color-alternating": {
"type": "color",
"value": "{color.neutral.50}"
},
"color-header": {
"type": "color",
"value": "{color.neutral.200}"
}
},
"border": {
"color": {
"type": "color",
"value": "{color.neutral.300}"
}
},
"shadow": {
"end": {
"type": "color",
"value": "rgba(49, 55, 58, 0.00)"
},
"start": {
"type": "color",
"value": "rgba(49, 55, 58, 0.16)"
}
}
},
"text-decoration": {
"default": {
"type": "string",
"value": "none"
},
"underline": {
"type": "string",
"value": "underline"
}
},
"toggle": {
"size": {
"large": {
"type": "sizing",
"value": "{spacing.large}"
},
"medium": {
"type": "sizing",
"value": "{spacing.medium-large}"
},
"small": {
"type": "sizing",
"value": "{spacing.medium}"
}
}
},
"toggle-button": {
"border-radius": {
"type": "sizing",
"value": "{border-radius.none}"
},
"color": {
"type": "color",
"value": "{panel.border.color}"
}
},
"tooltip": {
"arrow-size": {
"type": "sizing",
"value": "9px"
},
"background-color": {
"type": "color",
"value": "{color.neutral.950}"
},
"border": {
"radius": {
"type": "sizing",
"value": "{border-radius.small}"
}
},
"color": {
"type": "color",
"value": "{typography.color.text-inverted}"
},
"font-family": {
"type": "string",
"value": "{font.sans}"
},
"font-size": {
"type": "sizing",
"value": "{font-size.small}"
},
"font-weight": {
"type": "fontWeights",
"value": "{font-weight.normal}"
},
"line-height": {
"type": "lineHeights",
"value": "140%"
},
"padding": {
"type": "sizing",
"value": "{spacing.small}"
}
},
"transition": {
"fast": {
"description": "Shoelace compatibility DO NOT USE",
"type": "string",
"value": "{duration.fast}"
},
"medium": {
"description": "Shoelace compatibility DO NOT USE",
"type": "string",
"value": "{duration.normal}"
},
"slow": {
"description": "Shoelace compatibility DO NOT USE",
"type": "string",
"value": "{duration.slow}"
},
"x-fast": {
"description": "Shoelace compatibility DO NOT USE",
"type": "string",
"value": "{duration.extra-fast}"
},
"x-slow": {
"description": "Shoelace compatibility DO NOT USE",
"type": "string",
"value": "{duration.extra-slow}"
}
},
"typography": {
"color": {
"text": {
"type": "color",
"value": "{color.neutral.950}"
},
"text-inverted": {
"type": "color",
"value": "{color.neutral.0}"
},
"text-quiet": {
"type": "color",
"value": "{color.neutral.800}"
},
"text-quiet-inverted": {
"type": "color",
"value": "{color.neutral.200}"
}
},
"heading": {
"2x-large": {
"font-size": {
"type": "sizing",
"value": "{font-size.2x-large}"
},
"font-weight": {
"type": "fontWeights",
"value": "{font-weight.bold}"
},
"letter-spacing": {
"type": "letterSpacing",
"value": "0px"
},
"line-height": {
"type": "lineHeights",
"value": "120%"
}
},
"3x-large": {
"font-size": {
"type": "sizing",
"value": "{font-size.3x-large}"
},
"font-weight": {
"type": "fontWeights",
"value": "{font-weight.bold}"
},
"letter-spacing": {
"type": "letterSpacing",
"value": "0px"
},
"line-height": {
"type": "lineHeights",
"value": "120%"
}
},
"4x-large": {
"font-size": {
"type": "sizing",
"value": "{font-size.4x-large}"
},
"font-weight": {
"type": "fontWeights",
"value": "{font-weight.bold}"
},
"letter-spacing": {
"type": "letterSpacing",
"value": "0px"
},
"line-height": {
"type": "lineHeights",
"value": "120%"
}
},
"large": {
"font-size": {
"type": "sizing",
"value": "{font-size.large}"
},
"font-weight": {
"type": "fontWeights",
"value": "{font-weight.bold}"
},
"letter-spacing": {
"type": "letterSpacing",
"value": "0px"
},
"line-height": {
"type": "lineHeights",
"value": "140%"
}
},
"medium": {
"font-size": {
"type": "sizing",
"value": "{font-size.medium}"
},
"font-weight": {
"type": "fontWeights",
"value": "{font-weight.bold}"
},
"letter-spacing": {
"type": "letterSpacing",
"value": "0px"
},
"line-height": {
"type": "lineHeights",
"value": "140%"
}
},
"x-large": {
"font-size": {
"type": "sizing",
"value": "{font-size.x-large}"
},
"font-weight": {
"type": "fontWeights",
"value": "{font-weight.bold}"
},
"letter-spacing": {
"type": "letterSpacing",
"value": "0px"
},
"line-height": {
"type": "lineHeights",
"value": "120%"
}
}
}
},
"z-index": {
"dialog": {
"description": "Shoelace compatibility DO NOT USE",
"type": "number",
"value": "800"
},
"drawer": {
"description": "Shoelace compatibility DO NOT USE",
"type": "number",
"value": "700"
},
"dropdown": {
"description": "Shoelace compatibility DO NOT USE",
"type": "number",
"value": "900"
},
"toast": {
"description": "Shoelace compatibility DO NOT USE",
"type": "number",
"value": "950"
},
"tooltip": {
"description": "Shoelace compatibility DO NOT USE",
"type": "number",
"value": "1000"
}
},
"body": {
"x-small": {
"regular": {
"type": "typography",
"value": "{font-weight.normal} {font-size.x-small}/1.4 {font.sans}"
},
"semibold": {
"type": "typography",
"value": "{font-weight.semibold} {font-size.x-small}/1.4 {font.sans}"
},
"bold": {
"type": "typography",
"value": "{font-weight.bold} {font-size.x-small}/1.4 {font.sans}"
}
},
"small": {
"regular": {
"type": "typography",
"value": "{font-weight.normal} {font-size.small}/1.4 {font.sans}"
},
"semibold": {
"type": "typography",
"value": "{font-weight.semibold} {font-size.small}/1.4 {font.sans}"
},
"bold": {
"type": "typography",
"value": "{font-weight.bold} {font-size.small}/1.4 {font.sans}"
}
},
"medium": {
"regular": {
"type": "typography",
"value": "{font-weight.normal} {font-size.medium}/1.4 {font.sans}"
},
"semibold": {
"type": "typography",
"value": "{font-weight.semibold} {font-size.medium}/1.4 {font.sans}"
},
"bold": {
"type": "typography",
"value": "{font-weight.bold} {font-size.medium}/1.4 {font.sans}"
}
},
"large": {
"regular": {
"type": "typography",
"value": "{font-weight.normal} {font-size.large}/1.4 {font.sans}"
},
"semibold": {
"type": "typography",
"value": "{font-weight.semibold} {font-size.large}/1.4 {font.sans}"
},
"bold": {
"type": "typography",
"value": "{font-weight.bold} {font-size.large}/1.4 {font.sans}"
}
},
"2x-small": {
"regular": {
"type": "typography",
"value": "{font-weight.normal} {font-size.2x-small}/1.4 {font.sans}"
},
"semibold": {
"type": "typography",
"value": "{font-weight.semibold} {font-size.2x-small}/1.4 {font.sans}"
},
"bold": {
"type": "typography",
"value": "{font-weight.bold} {font-size.2x-small}/1.4 {font.sans}"
}
}
},
"heading": {
"large": {
"type": "typography",
"value": "{typography.heading.large.font-weight} {typography.heading.large.font-size}/1.4 {font.sans}"
},
"x-large": {
"type": "typography",
"value": "{typography.heading.x-large.font-weight} {typography.heading.x-large.font-size}/1.2 {font.sans}"
},
"2x-large": {
"type": "typography",
"value": "{typography.heading.2x-large.font-weight} {typography.heading.2x-large.font-size}/1.2 {font.sans}"
},
"3x-large": {
"type": "typography",
"value": "{typography.heading.3x-large.font-weight} {typography.heading.3x-large.font-size}/1.2 {font.sans}"
},
"medium": {
"type": "typography",
"value": "{typography.heading.medium.font-weight} {typography.heading.medium.font-size}/1.4 {font.sans}"
},
"4x-large": {
"type": "typography",
"value": "{typography.heading.4x-large.font-weight} {typography.heading.4x-large.font-size}/1.2 {font.sans}"
}
}
}