@synergy-design-system/tokens
Version:
Design tokens for Synergy, the SICK Design System
1,183 lines • 25.5 kB
JSON
{
"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"
}
},
"button": {
"font-size": {
"large": {
"type": "sizing",
"value": "{font-size.large}"
},
"medium": {
"type": "sizing",
"value": "{font-size.medium}"
},
"small": {
"type": "sizing",
"value": "{font-size.small}"
}
}
},
"color": {
"accent": {
"50": {
"type": "color",
"value": "#ffffff"
},
"100": {
"type": "color",
"value": "#ffffff"
},
"200": {
"type": "color",
"value": "#ffffff"
},
"300": {
"type": "color",
"value": "#ffffff"
},
"400": {
"type": "color",
"value": "#ffffff"
},
"500": {
"type": "color",
"value": "#ffffff"
},
"600": {
"type": "color",
"value": "#ffffff"
},
"700": {
"type": "color",
"value": "#ffffff"
},
"800": {
"type": "color",
"value": "#ffffff"
},
"900": {
"type": "color",
"value": "#ffffff"
},
"950": {
"type": "color",
"value": "#ffffff"
}
},
"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"
}
},
"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"
}
},
"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"
}
}
},
"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": {
"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": "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": {
"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"
},
"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"
}
},
"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-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}"
},
"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.400}"
},
"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.700}"
},
"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-focus": {
"type": "color",
"value": "{color.neutral.800}"
},
"color-hover": {
"type": "color",
"value": "{color.neutral.800}"
},
"icon-clearable": {
"color": {
"type": "color",
"value": "{color.neutral.500}"
},
"color-focus": {
"type": "color",
"value": "{color.neutral.500}"
},
"color-hover": {
"type": "color",
"value": "{color.neutral.500}"
}
}
},
"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.500}"
},
"color-disabled": {
"type": "color",
"value": "{color.neutral.500}"
}
},
"readonly": {
"color": {
"type": "color",
"value": "{color.neutral.800}"
},
"color-disabled": {
"type": "color",
"value": "{color.neutral.800}"
},
"color-focus": {
"type": "color",
"value": "{color.neutral.950}"
},
"color-hover": {
"type": "color",
"value": "{color.neutral.950}"
}
},
"readonly-background": {
"color": {
"type": "color",
"value": "{color.neutral.50}"
},
"color-disabled": {
"type": "color",
"value": "{color.neutral.50}"
},
"color-focus": {
"type": "color",
"value": "{color.neutral.50}"
},
"color-hover": {
"type": "color",
"value": "{color.neutral.50}"
}
},
"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}"
}
},
"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": "{color.primary.600}"
},
"color-active": {
"type": "color",
"value": "{color.primary.950}"
},
"color-hover": {
"type": "color",
"value": "{color.primary.900}"
},
"quiet": {
"color": {
"type": "color",
"value": "{typography.color.text}"
},
"color-active": {
"type": "color",
"value": "{color.primary.950}"
},
"color-hover": {
"type": "color",
"value": "{color.primary.900}"
}
}
},
"opacity": {
"50": {
"description": "50%",
"type": "opacity",
"value": "50%"
}
},
"overlay": {
"background": {
"color": {
"type": "color",
"value": "rgba(0, 0, 0, 0.50)"
}
}
},
"panel": {
"background": {
"color": {
"type": "color",
"value": "{color.neutral.0}"
}
},
"border": {
"color": {
"type": "color",
"value": "{color.neutral.300}"
},
"width": {
"type": "sizing",
"value": "{border-width.small}"
}
}
},
"spacing": {
"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"
}
},
"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}"
},
"small": {
"type": "sizing",
"value": "14px"
}
}
},
"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}"
}
}
},
"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"
}
},
"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)"
}
},
"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}"
}
}
},
"heading": {
"large": {
"type": "typography",
"value": "{font-weight.bold} {font-size.large}/1.4 {font.sans}"
},
"x-large": {
"type": "typography",
"value": "{font-weight.bold} {font-size.x-large}/1.2 {font.sans}"
},
"2x-large": {
"type": "typography",
"value": "{font-weight.bold} {font-size.2x-large}/1.2 {font.sans}"
},
"3x-large": {
"type": "typography",
"value": "{font-weight.bold} {font-size.3x-large}/1.2 {font.sans}"
}
}
}