@open-inwoner/design-tokens
Version:
Design tokens for Open Inwoner
218 lines (217 loc) • 7.29 kB
JSON
{
"oip": {
"color": {
"$extensions": {
"dte.metadata": {
"groupDescription": "Globally tweak commonly used colors."
}
},
"primary": {
"value": "hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), var(--oip-color-primary-l))",
"comment": "The primary color #0065BD makes up a large part of the theme, it is used in buttons for example.",
"$extensions": {
"dte.metadata": {
"isCurated": true,
"category": "color"
}
}
},
"primary-h": {
"value": "210",
"comment": "Primary color hue value"
},
"primary-s": {
"value": "100%",
"comment": "Primary color saturation value"
},
"primary-l": {
"value": "37%",
"comment": "Primary color lightness value"
},
"primary-lighter": {
"value": "hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), calc(var(--oip-color-primary-l) + 30%))",
"comment": "Lighter version of primary color"
},
"primary-darker": {
"value": "hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), calc(var(--oip-color-primary-l) - 10%))",
"comment": "Darker version of primary color"
},
"secondary": {
"value": "hsl(var(--oip-color-secondary-h), var(--oip-color-secondary-s), var(--oip-color-secondary-l))",
"comment": "The secondary color #006A0F compliments the primary color and serves as the default for text-links.",
"$extensions": {
"dte.metadata": {
"isCurated": true,
"category": "color"
}
}
},
"secondary-h": {
"value": "207",
"comment": "Secondary color hue value"
},
"secondary-s": {
"value": "80%",
"comment": "Secondary color saturation value"
},
"secondary-l": {
"value": "35%",
"comment": "Secondary color lightness value"
},
"secondary-darker": {
"value": "hsl(var(--oip-color-secondary-h), var(--oip-color-secondary-s), calc(var(--oip-color-secondary-l) - 10%))",
"comment": "Darker version of secondary color"
},
"accent": {
"value": "hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), var(--oip-color-accent-l))",
"comment": "The accent color #E10019 is usually the main identity color for a municipality",
"$extensions": {
"dte.metadata": {
"isCurated": true,
"category": "color"
}
}
},
"accent-h": {
"value": "50",
"comment": "Accent color hue value"
},
"accent-s": {
"value": "94%",
"comment": "Accent color saturation value"
},
"accent-l": {
"value": "57%",
"comment": "Accent color lightness value"
},
"accent-darker": {
"value": "hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), calc(var(--oip-color-accent-l) - 10%))",
"comment": "Darker version of accent color"
},
"accent-lighter": {
"value": "hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), calc(var(--oip-color-accent-l) + 10%))",
"comment": "Lighter version of accent color"
},
"info": {
"value": "#2566A7",
"comment": "The dark blue text color for informational states and/or messages.",
"$extensions": {
"dte.metadata": {
"isCurated": true,
"category": "color"
}
}
},
"info-light": {
"value": "#D5E6F6",
"comment": "The light blue background color for informational states and/or messages.",
"$extensions": {
"dte.metadata": {
"isCurated": true,
"category": "color"
}
}
},
"success": {
"value": "#4A7746",
"comment": "The dark green text color for success states and/or messages."
},
"success-light": {
"value": "#ecf4ec",
"comment": "The light green background color for success states and/or messages."
},
"warning": {
"value": "#704000",
"comment": "The dark orange text color for warning states and/or messages."
},
"warning-light": {
"value": "#ffdcad",
"comment": "The light orange background color for warning states and/or messages."
},
"danger": {
"value": "#5c000f",
"comment": "The dark red text color for error/critical states and/or messages."
},
"danger-h": {
"value": "34",
"comment": "Danger color hue value"
},
"danger-s": {
"value": "100%",
"comment": "Danger color saturation value"
},
"danger-l": {
"value": "27%",
"comment": "Danger color lightness value"
},
"danger-light": {
"value": "hsl(var(--oip-color-danger-h), var(--oip-color-danger-s), calc(var(--oip-color-danger-l) + 13%))",
"comment": "The light red background color for error/critical states and/or messages."
},
"danger-lightest": {
"value": "hsl(var(--oip-color-danger-h), var(--oip-color-danger-s), calc(var(--oip-color-danger-l) + 57%))",
"comment": "Lightest version of danger color"
},
"bg": {
"value": "#ffffff",
"comment": "Background color for the (main) user interface."
},
"fg": {
"value": "#4b4b4b",
"comment": "Blackish/gray-dark foreground color for the (main) user interface."
},
"fg-font-primary": {
"value": "#ffffff",
"comment": "White font color for texts inside primary buttons."
},
"fg-font-secondary": {
"value": "#ffffff",
"comment": "White font color for texts inside secondary buttons."
},
"fg-font-accent": {
"value": "#4b4b4b",
"comment": "Dark gray font color for texts inside areas with a very light accent color as a light background-color."
},
"fg-lighter": {
"value": "#676767",
"comment": "Blackish 90% gray foreground color for lighter text elements (eg date)."
},
"fg-muted": {
"value": "#757575",
"comment": "Font/foreground color for non-actionable or less-important content."
},
"fg-heading": {
"value": "#000000",
"comment": "Black foreground color for fully black elements, like headings."
},
"border": {
"value": "#d2d2d2",
"comment": "Default color for borders."
},
"gray": {
"value": "#d2d2d2",
"comment": "Default 80% gray for borders."
},
"gray-lighter": {
"value": "#7a7a7a",
"comment": "Default light-gray for table text."
},
"gray-lightest": {
"value": "#f3f3f3",
"comment": "Very lightest gray for hover styles."
},
"focus": {
"$extensions": {
"dte.metadata": {
"stateType": "userAction"
}
},
"border": {}
},
"red-notification": {
"value": "#e50026",
"comment": "The bright red color for notification badges and texts."
}
}
}
}