@open-formulieren/design-tokens
Version:
Design tokens for Open Forms
79 lines (78 loc) • 2.74 kB
JSON
{
"utrecht": {
"calendar": {
"background-color": {"value": "{of.color.bg}"},
"table": {
"padding-block-start": {},
"padding-block-end": {},
"weeks-item": {
"width": {"value": "44px"},
"padding-block-start": {"value": "4px"},
"padding-block-end": {"value": "10px"},
"line-height": {"value": "24px"}
},
"days-item-day": {
"size": {"value": "44px"},
"color": {"value": "{of.color.fg}"},
"border-width": {"value": "2px"},
"border-color": {"value": "transparent"},
"hover": {
"background-color": {"value": "transparent"},
"border-color": {"value": "{of.button.hover.color-border}"},
"color": {"value": "{of.color.fg}"}
},
"focus": {
"border-color": {"value": "{of.button.focus.color-border}"}
},
"active": {
"background-color": {"value": "{of.button.active.bg}"},
"color": {"value": "{of.button.active.fg}"},
"border-color": {"value": "{of.button.active.color-border}"}
},
"out-of-the-month": {
"color": {"value": "{of.color.fg-muted}"},
"border-color": {"value": "transparent"},
"background-color": {}
},
"is-today": {
"color": {"value": "{of.color.primary}"},
"font-weight": {"value": "700"},
"border-color": {"value": "{of.color.primary}"},
"background-color": {"value": "{of.color.primary-light}"}
},
"emphasis": {
"color": {},
"font-weight": {},
"border-color": {"value": "transparent"},
"background-color": {}
},
"selected": {
"color": {"value": "{of.button.primary.fg}"},
"font-weight": {},
"border-color": {"value": "{of.button.primary.color-border}"},
"background-color": {"value": "{of.button.primary.bg}"}
},
"disabled": {
"color": {"value": "#666666"},
"border-color": {"value": "transparent"},
"background-color": {"value": "#e6e6e6"}
}
}
},
"navigation": {
"background-color": {"value": "{of.color.bg}"},
"color": {"value": "{of.color.fg}"},
"padding-block-start": {"value": "4px"},
"padding-block-end": {"value": "4px"},
"label": {
"min-inline-size": {"value": "200px"},
"color": {"value": "{of.color.fg}"},
"font-size": {"value": "{of.text.font-size}"}
}
},
"icon": {
"size": {"value": "24px"}
}
}
}
}