@synergy-design-system/tokens
Version:
Design tokens for Synergy, the SICK Design System
2,268 lines • 49.1 kB
JSON
{
"alert": {
"error": {
"color-background": {
"type": "color",
"value": "{namur.error.color-background}"
},
"color-border": {
"type": "color",
"value": "{namur.error.color-background}"
},
"color-icon": {
"type": "color",
"value": "{typography.color.text}"
},
"color-indicator": {
"type": "color",
"value": "{namur.error.color}"
}
},
"informative": {
"color-background": {
"type": "color",
"value": "{namur.info.color-background}"
},
"color-border": {
"type": "color",
"value": "{namur.info.color-background}"
},
"color-icon": {
"type": "color",
"value": "{typography.color.text}"
},
"color-indicator": {
"type": "color",
"value": "{namur.info.color}"
}
},
"neutral": {
"color-background": {
"type": "color",
"value": "{namur.neutral.color-background}"
},
"color-border": {
"type": "color",
"value": "{namur.neutral.color-background}"
},
"color-icon": {
"type": "color",
"value": "{typography.color.text}"
},
"color-indicator": {
"type": "color",
"value": "{namur.neutral.color}"
}
},
"success": {
"color-background": {
"type": "color",
"value": "{namur.success.color-background}"
},
"color-border": {
"type": "color",
"value": "{namur.success.color-background}"
},
"color-icon": {
"type": "color",
"value": "{typography.color.text}"
},
"color-indicator": {
"type": "color",
"value": "{namur.success.color}"
}
},
"warning": {
"color-background": {
"type": "color",
"value": "{namur.warning.color-background}"
},
"color-border": {
"type": "color",
"value": "{namur.warning.color-background}"
},
"color-icon": {
"type": "color",
"value": "{typography.color.text}"
},
"color-indicator": {
"type": "color",
"value": "{namur.warning.color}"
}
}
},
"background": {
"color-1": {
"type": "color",
"value": "{color.muted.200}"
},
"color-2": {
"type": "color",
"value": "{color.accent.100}"
}
},
"badge": {
"error": {
"color-background": {
"type": "color",
"value": "{namur.error.color}"
},
"color-text": {
"type": "color",
"value": "{typography.color.text}"
}
},
"informative": {
"color-background": {
"type": "color",
"value": "{namur.info.color}"
},
"color-text": {
"type": "color",
"value": "{typography.color.text}"
}
},
"neutral": {
"color-background": {
"type": "color",
"value": "{namur.neutral.color}"
},
"color-text": {
"type": "color",
"value": "{typography.color.text}"
}
},
"success": {
"color-background": {
"type": "color",
"value": "{namur.success.color}"
},
"color-text": {
"type": "color",
"value": "{typography.color.text}"
}
},
"warning": {
"color-background": {
"type": "color",
"value": "{namur.warning.color}"
},
"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": "{typography.color.text}"
}
},
"button": {
"border": {
"radius-large": {
"type": "sizing",
"value": "{border-radius.pill}"
},
"radius-medium": {
"type": "sizing",
"value": "{border-radius.pill}"
},
"radius-small": {
"type": "sizing",
"value": "{border-radius.pill}"
}
},
"color": {
"type": "color",
"value": "{interactive.emphasis.color}"
},
"color-active": {
"type": "color",
"value": "{interactive.emphasis.color-active}"
},
"color-disabled": {
"type": "color",
"value": "{color.neutral.500}"
},
"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": "{interactive.emphasis.color-active}"
},
"color-hover": {
"type": "color",
"value": "{interactive.emphasis.color-hover}"
},
"color-text": {
"type": "color",
"value": "{typography.color.text}"
},
"color-text-active": {
"type": "color",
"value": "{typography.color.text-inverted}"
},
"color-text-hover": {
"type": "color",
"value": "{typography.color.text-inverted}"
}
},
"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.small}"
}
}
},
"color": {
"accent": {
"50": {
"type": "color",
"value": "#e9f8ed"
},
"100": {
"type": "color",
"value": "#d2f0dc"
},
"200": {
"type": "color",
"value": "#bbe8c8"
},
"300": {
"type": "color",
"value": "#a5e1b9"
},
"400": {
"type": "color",
"value": "#83d2a3"
},
"500": {
"type": "color",
"value": "#4fb87c"
},
"600": {
"type": "color",
"value": "#2d9c60"
},
"700": {
"type": "color",
"value": "#1e7d4c"
},
"800": {
"type": "color",
"value": "#18643e"
},
"900": {
"type": "color",
"value": "#155033"
},
"950": {
"type": "color",
"value": "#092518"
}
},
"critical": {
"50": {
"type": "color",
"value": "#fffbec"
},
"100": {
"type": "color",
"value": "#fff7d3"
},
"200": {
"type": "color",
"value": "#ffeba5"
},
"300": {
"type": "color",
"value": "#ffdb6d"
},
"400": {
"type": "color",
"value": "#ffbf32"
},
"500": {
"type": "color",
"value": "#ffa80a"
},
"600": {
"type": "color",
"value": "#ff9100"
},
"700": {
"type": "color",
"value": "#cc6b02"
},
"800": {
"type": "color",
"value": "#a1520b"
},
"900": {
"type": "color",
"value": "#82450c"
},
"950": {
"type": "color",
"value": "#462104"
}
},
"data": {
"magenta": {
"50": {
"type": "color",
"value": "#fdf2f9"
},
"100": {
"type": "color",
"value": "#fce7f5"
},
"200": {
"type": "color",
"value": "#fcceed"
},
"300": {
"type": "color",
"value": "#fba6dd"
},
"400": {
"type": "color",
"value": "#f76fc5"
},
"500": {
"type": "color",
"value": "#ef45ab"
},
"600": {
"type": "color",
"value": "#e13393"
},
"700": {
"type": "color",
"value": "#c1156e"
},
"800": {
"type": "color",
"value": "#a0145b"
},
"900": {
"type": "color",
"value": "#85164f"
},
"950": {
"type": "color",
"value": "#51062c"
}
},
"purple": {
"50": {
"type": "color",
"value": "#faf3ff"
},
"100": {
"type": "color",
"value": "#f6e7ff"
},
"200": {
"type": "color",
"value": "#ebceff"
},
"300": {
"type": "color",
"value": "#e0a7ff"
},
"400": {
"type": "color",
"value": "#c457ff"
},
"500": {
"type": "color",
"value": "#b73ef7"
},
"600": {
"type": "color",
"value": "#9d1edb"
},
"700": {
"type": "color",
"value": "#8515b6"
},
"800": {
"type": "color",
"value": "#6f1395"
},
"900": {
"type": "color",
"value": "#5e1679"
},
"950": {
"type": "color",
"value": "#3c0151"
}
},
"teal": {
"50": {
"type": "color",
"value": "#effefc"
},
"100": {
"type": "color",
"value": "#c7fff9"
},
"200": {
"type": "color",
"value": "#90fff3"
},
"300": {
"type": "color",
"value": "#51f7ec"
},
"400": {
"type": "color",
"value": "#1de4dd"
},
"500": {
"type": "color",
"value": "#04c8c3"
},
"600": {
"type": "color",
"value": "#009797"
},
"700": {
"type": "color",
"value": "#057f80"
},
"800": {
"type": "color",
"value": "#0a6365"
},
"900": {
"type": "color",
"value": "#0d5354"
},
"950": {
"type": "color",
"value": "#002f33"
}
}
},
"error": {
"50": {
"type": "color",
"value": "#fff1f1"
},
"100": {
"type": "color",
"value": "#ffe3e4"
},
"200": {
"type": "color",
"value": "#ffcfd1"
},
"300": {
"type": "color",
"value": "#ffa0a2"
},
"400": {
"type": "color",
"value": "#ff696d"
},
"500": {
"type": "color",
"value": "#f93a3f"
},
"600": {
"type": "color",
"value": "#e6191e"
},
"700": {
"type": "color",
"value": "#bc1519"
},
"800": {
"type": "color",
"value": "#941013"
},
"900": {
"type": "color",
"value": "#6c0c0e"
},
"950": {
"type": "color",
"value": "#450709"
}
},
"info": {
"50": {
"type": "color",
"value": "#effaff"
},
"100": {
"type": "color",
"value": "#dff4ff"
},
"200": {
"type": "color",
"value": "#a6e9ff"
},
"300": {
"type": "color",
"value": "#78ddff"
},
"400": {
"type": "color",
"value": "#26c9ff"
},
"500": {
"type": "color",
"value": "#06b6f1"
},
"600": {
"type": "color",
"value": "#0092ce"
},
"700": {
"type": "color",
"value": "#0075a7"
},
"800": {
"type": "color",
"value": "#02628a"
},
"900": {
"type": "color",
"value": "#085172"
},
"950": {
"type": "color",
"value": "#06334b"
}
},
"muted": {
"50": {
"type": "color",
"value": "#f8f7f6"
},
"100": {
"type": "color",
"value": "#f2f0ed"
},
"200": {
"type": "color",
"value": "#ece8e5"
},
"300": {
"type": "color",
"value": "#e6e1dc"
},
"400": {
"type": "color",
"value": "#d5ccc5"
},
"500": {
"type": "color",
"value": "#ab988c"
},
"600": {
"type": "color",
"value": "#8d7269"
},
"700": {
"type": "color",
"value": "#765f58"
},
"800": {
"type": "color",
"value": "#614e4b"
},
"900": {
"type": "color",
"value": "#50423e"
},
"950": {
"type": "color",
"value": "#2a2120"
}
},
"neutral": {
"0": {
"type": "color",
"value": "#ffffff"
},
"50": {
"type": "color",
"value": "#f2f2f2"
},
"100": {
"type": "color",
"value": "#e7e7e7"
},
"200": {
"type": "color",
"value": "#cccccc"
},
"300": {
"type": "color",
"value": "#b2b2b2"
},
"400": {
"type": "color",
"value": "#999999"
},
"500": {
"type": "color",
"value": "#868686"
},
"600": {
"type": "color",
"value": "#666666"
},
"700": {
"type": "color",
"value": "#565656"
},
"800": {
"type": "color",
"value": "#333333"
},
"900": {
"type": "color",
"value": "#1a1a1a"
},
"950": {
"type": "color",
"value": "#0d0d0d"
},
"1000": {
"type": "color",
"value": "#000000"
}
},
"primary": {
"50": {
"type": "color",
"value": "#eff5ff"
},
"100": {
"type": "color",
"value": "#dae7ff"
},
"200": {
"type": "color",
"value": "#ccdeff"
},
"300": {
"type": "color",
"value": "#91bbff"
},
"400": {
"type": "color",
"value": "#5e97fc"
},
"500": {
"type": "color",
"value": "#3183fe"
},
"600": {
"type": "color",
"value": "#066fff"
},
"700": {
"type": "color",
"value": "#005aff"
},
"800": {
"type": "color",
"value": "#0845c5"
},
"900": {
"type": "color",
"value": "#0d3f9b"
},
"950": {
"type": "color",
"value": "#0e275d"
},
"1000": {
"type": "color",
"value": "#000a37"
}
},
"shadow": {
"sticky-down": {
"color": {
"type": "color",
"value": "rgba(13, 13, 13, 0.16)"
}
}
},
"success": {
"50": {
"type": "color",
"value": "#f0fdf4"
},
"100": {
"type": "color",
"value": "#ddfbe6"
},
"200": {
"type": "color",
"value": "#bcf6cf"
},
"300": {
"type": "color",
"value": "#84eca7"
},
"400": {
"type": "color",
"value": "#6ad88f"
},
"500": {
"type": "color",
"value": "#4fc275"
},
"600": {
"type": "color",
"value": "#34ad5c"
},
"700": {
"type": "color",
"value": "#1a9945"
},
"800": {
"type": "color",
"value": "#00852c"
},
"900": {
"type": "color",
"value": "#026524"
},
"950": {
"type": "color",
"value": "#003911"
}
},
"warning": {
"50": {
"type": "color",
"value": "#fffbeb"
},
"100": {
"type": "color",
"value": "#fff5c6"
},
"200": {
"type": "color",
"value": "#ffe67c"
},
"300": {
"type": "color",
"value": "#fbdb52"
},
"400": {
"type": "color",
"value": "#f6d029"
},
"500": {
"type": "color",
"value": "#f2c500"
},
"600": {
"type": "color",
"value": "#d19800"
},
"700": {
"type": "color",
"value": "#a66c02"
},
"800": {
"type": "color",
"value": "#89540a"
},
"900": {
"type": "color",
"value": "#74450f"
},
"950": {
"type": "color",
"value": "#442404"
}
}
},
"details": {
"open-rotation": {
"type": "string",
"value": "0deg"
}
},
"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.small}"
},
"color": {
"type": "color",
"value": "{color.primary.500}"
},
"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": "SICK Intl"
},
"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": "600"
},
"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.muted.300}"
}
}
},
"icon-button": {
"focus-ring": {
"border-radius": {
"type": "sizing",
"value": "{border-radius.pill}"
}
}
},
"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.950}"
},
"color-active": {
"type": "color",
"value": "{color.primary.800}"
},
"color-disabled": {
"type": "color",
"value": "{color.neutral.950}"
},
"color-focus": {
"type": "color",
"value": "{color.primary.700}"
},
"color-focus-error": {
"type": "color",
"value": "{color.error.600}"
},
"color-hover": {
"type": "color",
"value": "{color.primary.700}"
},
"color-offset": {
"type": "color",
"value": "{panel.background.color}"
},
"radius-large": {
"type": "sizing",
"value": "{border-radius.medium}"
},
"radius-medium": {
"type": "sizing",
"value": "{border-radius.medium}"
},
"radius-small": {
"type": "sizing",
"value": "{border-radius.medium}"
},
"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.500}"
},
"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.700}"
},
"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.950}"
},
"color-hover": {
"type": "color",
"value": "{color.neutral.950}"
},
"icon-clearable": {
"color": {
"type": "color",
"value": "{color.neutral.500}"
},
"color-active": {
"type": "color",
"value": "{color.neutral.800}"
},
"color-hover": {
"type": "color",
"value": "{color.neutral.700}"
}
}
},
"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": "0px"
},
"placeholder": {
"color": {
"type": "color",
"value": "{color.neutral.700}"
},
"color-disabled": {
"type": "color",
"value": "{color.neutral.700}"
}
},
"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.muted.300}"
},
"color-hover": {
"type": "color",
"value": "{color.muted.100}"
}
},
"emphasis": {
"color": {
"type": "color",
"value": "{color.primary.700}"
},
"color-active": {
"type": "color",
"value": "{color.primary.1000}"
},
"color-hover": {
"type": "color",
"value": "{color.primary.950}"
}
},
"quiet": {
"color": {
"type": "color",
"value": "{color.neutral.950}"
},
"color-active": {
"type": "color",
"value": "{color.primary.800}"
},
"color-hover": {
"type": "color",
"value": "{color.primary.700}"
}
}
},
"letter-spacing": {
"dense": {
"description": "Shoelace compatibility DO NOT USE",
"type": "letterSpacing",
"value": "0px"
},
"denser": {
"description": "Shoelace compatibility DO NOT USE",
"type": "letterSpacing",
"value": "0px"
},
"loose": {
"description": "Shoelace compatibility DO NOT USE",
"type": "letterSpacing",
"value": "0px"
},
"looser": {
"description": "Shoelace compatibility DO NOT USE",
"type": "letterSpacing",
"value": "2px"
},
"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": "25%"
}
},
"logo": {
"color": {
"type": "color",
"value": "{color.primary.700}"
}
},
"namur": {
"color-border": {
"type": "color",
"value": "{color.neutral.950}"
},
"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.950}"
}
},
"info": {
"color": {
"type": "color",
"value": "{color.info.400}"
},
"color-background": {
"type": "color",
"value": "{color.info.100}"
}
},
"neutral": {
"color": {
"type": "color",
"value": "{color.muted.400}"
},
"color-background": {
"type": "color",
"value": "{color.muted.300}"
}
},
"success": {
"color": {
"type": "color",
"value": "{color.success.500}"
},
"color-background": {
"type": "color",
"value": "{color.success.100}"
}
},
"warning": {
"color": {
"type": "color",
"value": "{color.warning.500}"
},
"color-background": {
"type": "color",
"value": "{color.warning.100}"
}
}
},
"opacity": {
"50": {
"description": "50%",
"type": "opacity",
"value": "50%"
}
},
"option": {
"background": {
"color-active": {
"type": "color",
"value": "{interactive.emphasis.color-active}"
},
"color-hover": {
"type": "color",
"value": "{interactive.emphasis.color-hover}"
}
},
"check": {
"color": {
"type": "color",
"value": "{interactive.quiet.color}"
},
"color-active": {
"type": "color",
"value": "{color.neutral.0}"
},
"color-hover": {
"type": "color",
"value": "{color.neutral.0}"
}
},
"color": {
"type": "color",
"value": "{typography.color.text}"
},
"color-active": {
"type": "color",
"value": "{typography.color.text-inverted}"
},
"color-hover": {
"type": "color",
"value": "{typography.color.text-inverted}"
},
"icon": {
"color": {
"type": "color",
"value": "{interactive.quiet.color}"
},
"color-active": {
"type": "color",
"value": "{color.neutral.0}"
},
"color-hover": {
"type": "color",
"value": "{color.neutral.0}"
}
}
},
"overlay": {
"background": {
"blur": {
"type": "sizing",
"value": "16px"
},
"color": {
"type": "color",
"value": "rgba(0, 5, 26, 0.30)"
}
}
},
"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.muted.50}"
}
},
"panel": {
"background": {
"color": {
"type": "color",
"value": "{color.neutral.0}"
}
},
"border": {
"color": {
"type": "color",
"value": "{color.muted.300}"
},
"radius": {
"type": "sizing",
"value": "{border-radius.medium}"
},
"width": {
"type": "sizing",
"value": "{border-width.small}"
}
}
},
"progress": {
"indicator": {
"color": {
"type": "color",
"value": "{color.primary.700}"
}
},
"track": {
"color": {
"type": "color",
"value": "{color.neutral.100}"
}
}
},
"range": {
"color-inactive": {
"type": "color",
"value": "{color.neutral.100}"
},
"error": {
"color": {
"type": "color",
"value": "{color.error.600}"
}
},
"tick": {
"color": {
"type": "color",
"value": "{color.neutral.500}"
}
},
"track": {
"color-active": {
"type": "color",
"value": "{interactive.emphasis.color}"
}
}
},
"readonly": {
"background": {
"color": {
"type": "color",
"value": "{color.muted.300}"
}
},
"border": {
"color": {
"type": "color",
"value": "{typography.color.text}"
}
},
"color-text": {
"type": "color",
"value": "{color.neutral.400}"
},
"icon": {
"color": {
"type": "color",
"value": "{color.neutral.400}"
},
"color-clearable": {
"type": "color",
"value": "{color.neutral.300}"
},
"color-expand": {
"type": "color",
"value": "{color.neutral.400}"
}
},
"indicator": {
"color": {
"type": "color",
"value": "{typography.color.text}"
}
},
"opacity": {
"color": {
"type": "color",
"value": "rgba(230, 225, 220, 0.70)"
}
}
},
"shadow": {
"medium": {
"type": "shadow",
"value": "0px 1px 2px 0px rgba(13, 13, 13, 0.08), 0px 1px 4px 0px rgba(13, 13, 13, 0.08), 0px 2px 8px 0px rgba(13, 13, 13, 0.08)"
},
"large": {
"type": "shadow",
"value": "0px 0px 3px 0px rgba(13, 13, 13, 0.12), 0px 2px 6px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.16)"
},
"x-large": {
"type": "shadow",
"value": "0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 8px 24px 0px rgba(13, 13, 13, 0.12), 0px 16px 48px 0px rgba(13, 13, 13, 0.16)"
},
"overflow-down": {
"type": "shadow",
"value": "0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.12), 0px 4px 12px 0px rgba(13, 13, 13, 0.16)"
},
"overflow-up": {
"type": "shadow",
"value": "0px -1px 4px 0px rgba(13, 13, 13, 0.12), 0px -3px 8px 0px rgba(13, 13, 13, 0.12), 0px -4px 12px 0px rgba(13, 13, 13, 0.16)"
},
"overflow-left": {
"type": "shadow",
"value": "-1px 0px 4px 0px rgba(13, 13, 13, 0.12), -3px 0px 8px 0px rgba(13, 13, 13, 0.12), -4px 0px 12px 0px rgba(13, 13, 13, 0.16)"
},
"overflow-right": {
"type": "shadow",
"value": "1px 0px 4px 0px rgba(13, 13, 13, 0.12), 3px 0px 8px 0px rgba(13, 13, 13, 0.12), 4px 0px 12px 0px rgba(13, 13, 13, 0.16)"
},
"x-small": {
"type": "shadow",
"value": "0px 1px 2px 0px rgba(13, 13, 13, 0.04), 0px 1px 4px 0px rgba(13, 13, 13, 0.04), 0px 2px 8px 0px rgba(13, 13, 13, 0.04)"
},
"small": {
"type": "shadow",
"value": "0px 1px 2px 0px rgba(13, 13, 13, 0.06), 0px 1px 4px 0px rgba(13, 13, 13, 0.06), 0px 2px 8px 0px rgba(13, 13, 13, 0.06)"
},
"sticky-down": {
"type": "shadow",
"value": "0px 3px 8px 0px rgba(13, 13, 13, 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.muted.50}"
},
"color-header": {
"type": "color",
"value": "{color.muted.100}"
}
},
"border": {
"color": {
"type": "color",
"value": "{color.muted.300}"
}
},
"shadow": {
"end": {
"type": "color",
"value": "rgba(13, 13, 13, 0.00)"
},
"start": {
"type": "color",
"value": "rgba(13, 13, 13, 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.medium}"
},
"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.700}"
},
"text-quiet-inverted": {
"type": "color",
"value": "{color.neutral.300}"
}
},
"heading": {
"2x-large": {
"font-size": {
"type": "sizing",
"value": "{font-size.2_5x-large}"
},
"font-weight": {
"type": "fontWeights",
"value": "{font-weight.normal}"
},
"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.normal}"
},
"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.normal}"
},
"letter-spacing": {
"type": "letterSpacing",
"value": "0px"
},
"line-height": {
"type": "lineHeights",
"value": "120%"
}
},
"large": {
"font-size": {
"type": "sizing",
"value": "{font-size.0x-large}"
},
"font-weight": {
"type": "fontWeights",
"value": "{font-weight.normal}"
},
"letter-spacing": {
"type": "letterSpacing",
"value": "0px"
},
"line-height": {
"type": "lineHeights",
"value": "130%"
}
},
"medium": {
"font-size": {
"type": "sizing",
"value": "{font-size.medium-large}"
},
"font-weight": {
"type": "fontWeights",
"value": "{font-weight.semibold}"
},
"letter-spacing": {
"type": "letterSpacing",
"value": "2px"
},
"line-height": {
"type": "lineHeights",
"value": "150%"
}
},
"x-large": {
"font-size": {
"type": "sizing",
"value": "{font-size.1x-large}"
},
"font-weight": {
"type": "fontWeights",
"value": "{font-weight.normal}"
},
"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}"
}
}
}