kantarciandClaude Fable 5.1
232e6fe6dc
A column may now live directly in a section, not only in a row - the way to centre or narrow a button or a short text without a one-column row. The align design token applies to buttons; because a button is inline-flex, auto margins never centred it, so site.css turns an aligned button into a fit-content block per device. The Drews seed uses the token for its centred buttons. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
337 lines
5.8 KiB
JSON
337 lines
5.8 KiB
JSON
{
|
|
"align": {
|
|
"label": "Ausrichtung",
|
|
"types": [
|
|
"section",
|
|
"row",
|
|
"column",
|
|
"heading",
|
|
"text",
|
|
"iconcard",
|
|
"stat",
|
|
"quote",
|
|
"cta",
|
|
"button"
|
|
],
|
|
"values": {
|
|
"left": [
|
|
"Links",
|
|
"text-align:left;margin-inline:0"
|
|
],
|
|
"center": [
|
|
"Mittig",
|
|
"text-align:center;margin-inline:auto"
|
|
],
|
|
"right": [
|
|
"Rechts",
|
|
"text-align:right;margin-inline:auto 0"
|
|
]
|
|
}
|
|
},
|
|
"fontSize": {
|
|
"label": "Schriftgröße",
|
|
"types": [
|
|
"heading",
|
|
"text",
|
|
"button"
|
|
],
|
|
"values": {
|
|
"small": [
|
|
"Klein · 14 px",
|
|
"font-size:14px"
|
|
],
|
|
"body": [
|
|
"Fließtext · 18 px",
|
|
"font-size:18px"
|
|
],
|
|
"large": [
|
|
"Groß · 24 px",
|
|
"font-size:24px"
|
|
],
|
|
"title": [
|
|
"Titel · 36 px",
|
|
"font-size:36px"
|
|
],
|
|
"display": [
|
|
"Display · 52 px",
|
|
"font-size:52px"
|
|
],
|
|
"hero": [
|
|
"Hero · 72 px",
|
|
"font-size:72px"
|
|
]
|
|
}
|
|
},
|
|
"fontWeight": {
|
|
"label": "Schriftstärke",
|
|
"types": [
|
|
"heading",
|
|
"text",
|
|
"button"
|
|
],
|
|
"values": {
|
|
"regular": [
|
|
"Normal",
|
|
"font-weight:400"
|
|
],
|
|
"medium": [
|
|
"Mittel",
|
|
"font-weight:500"
|
|
],
|
|
"bold": [
|
|
"Fett",
|
|
"font-weight:700"
|
|
]
|
|
}
|
|
},
|
|
"lineHeight": {
|
|
"label": "Zeilenhöhe",
|
|
"types": [
|
|
"heading",
|
|
"text",
|
|
"button"
|
|
],
|
|
"values": {
|
|
"tight": [
|
|
"Kompakt · 1,15",
|
|
"line-height:1.15"
|
|
],
|
|
"normal": [
|
|
"Normal · 1,5",
|
|
"line-height:1.5"
|
|
],
|
|
"relaxed": [
|
|
"Luftig · 1,8",
|
|
"line-height:1.8"
|
|
]
|
|
}
|
|
},
|
|
"paddingY": {
|
|
"label": "Innenabstand oben / unten",
|
|
"types": [
|
|
"section",
|
|
"column",
|
|
"accordionitem",
|
|
"tabitem"
|
|
],
|
|
"values": {
|
|
"none": [
|
|
"Keiner",
|
|
"padding-block:0"
|
|
],
|
|
"small": [
|
|
"Klein · 16 px",
|
|
"padding-block:16px"
|
|
],
|
|
"medium": [
|
|
"Mittel · 32 px",
|
|
"padding-block:32px"
|
|
],
|
|
"large": [
|
|
"Groß · 64 px",
|
|
"padding-block:64px"
|
|
],
|
|
"huge": [
|
|
"Extra groß · 96 px",
|
|
"padding-block:96px"
|
|
]
|
|
}
|
|
},
|
|
"paddingX": {
|
|
"label": "Innenabstand links / rechts",
|
|
"types": [
|
|
"column",
|
|
"accordionitem",
|
|
"tabitem"
|
|
],
|
|
"values": {
|
|
"none": [
|
|
"Keiner",
|
|
"padding-inline:0"
|
|
],
|
|
"small": [
|
|
"Klein · 16 px",
|
|
"padding-inline:16px"
|
|
],
|
|
"medium": [
|
|
"Mittel · 32 px",
|
|
"padding-inline:32px"
|
|
],
|
|
"large": [
|
|
"Groß · 64 px",
|
|
"padding-inline:64px"
|
|
]
|
|
}
|
|
},
|
|
"marginTop": {
|
|
"label": "Außenabstand oben",
|
|
"types": [
|
|
"section",
|
|
"row",
|
|
"column",
|
|
"heading",
|
|
"text",
|
|
"image",
|
|
"button",
|
|
"gallery",
|
|
"iconcard",
|
|
"stat",
|
|
"quote",
|
|
"cta",
|
|
"contact",
|
|
"divider",
|
|
"spacer",
|
|
"postlist",
|
|
"logos",
|
|
"accordion",
|
|
"accordionitem",
|
|
"tabs",
|
|
"tabitem"
|
|
],
|
|
"values": {
|
|
"none": [
|
|
"Keiner",
|
|
"margin-top:0"
|
|
],
|
|
"small": [
|
|
"Klein · 8 px",
|
|
"margin-top:8px"
|
|
],
|
|
"medium": [
|
|
"Mittel · 24 px",
|
|
"margin-top:24px"
|
|
],
|
|
"large": [
|
|
"Groß · 48 px",
|
|
"margin-top:48px"
|
|
]
|
|
}
|
|
},
|
|
"marginBottom": {
|
|
"label": "Außenabstand unten",
|
|
"types": [
|
|
"section",
|
|
"row",
|
|
"column",
|
|
"heading",
|
|
"text",
|
|
"image",
|
|
"button",
|
|
"gallery",
|
|
"iconcard",
|
|
"stat",
|
|
"quote",
|
|
"cta",
|
|
"contact",
|
|
"divider",
|
|
"spacer",
|
|
"postlist",
|
|
"logos",
|
|
"accordion",
|
|
"accordionitem",
|
|
"tabs",
|
|
"tabitem"
|
|
],
|
|
"values": {
|
|
"none": [
|
|
"Keiner",
|
|
"margin-bottom:0"
|
|
],
|
|
"small": [
|
|
"Klein · 8 px",
|
|
"margin-bottom:8px"
|
|
],
|
|
"medium": [
|
|
"Mittel · 24 px",
|
|
"margin-bottom:24px"
|
|
],
|
|
"large": [
|
|
"Groß · 48 px",
|
|
"margin-bottom:48px"
|
|
]
|
|
}
|
|
},
|
|
"gap": {
|
|
"label": "Spaltenabstand",
|
|
"types": [
|
|
"row",
|
|
"gallery",
|
|
"logos",
|
|
"accordion"
|
|
],
|
|
"values": {
|
|
"none": [
|
|
"Keiner",
|
|
"gap:0"
|
|
],
|
|
"small": [
|
|
"Klein · 12 px",
|
|
"gap:12px"
|
|
],
|
|
"medium": [
|
|
"Mittel · 24 px",
|
|
"gap:24px"
|
|
],
|
|
"large": [
|
|
"Groß · 48 px",
|
|
"gap:48px"
|
|
]
|
|
}
|
|
},
|
|
"columns": {
|
|
"label": "Spaltenaufteilung",
|
|
"types": [
|
|
"row",
|
|
"gallery",
|
|
"logos"
|
|
],
|
|
"values": {
|
|
"auto": [
|
|
"Automatisch umbrechen",
|
|
"grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))"
|
|
],
|
|
"one": [
|
|
"1 Spalte",
|
|
"grid-template-columns:minmax(0,1fr)"
|
|
],
|
|
"two": [
|
|
"2 gleiche Spalten",
|
|
"grid-template-columns:repeat(2,minmax(0,1fr))"
|
|
],
|
|
"three": [
|
|
"3 gleiche Spalten",
|
|
"grid-template-columns:repeat(3,minmax(0,1fr))"
|
|
],
|
|
"four": [
|
|
"4 gleiche Spalten",
|
|
"grid-template-columns:repeat(4,minmax(0,1fr))"
|
|
]
|
|
}
|
|
},
|
|
"radius": {
|
|
"label": "Ecken",
|
|
"types": [
|
|
"column",
|
|
"image",
|
|
"button",
|
|
"iconcard",
|
|
"quote",
|
|
"cta"
|
|
],
|
|
"values": {
|
|
"none": [
|
|
"Gerade",
|
|
"border-radius:0"
|
|
],
|
|
"small": [
|
|
"Leicht · 8 px",
|
|
"border-radius:8px"
|
|
],
|
|
"large": [
|
|
"Rund · 24 px",
|
|
"border-radius:24px"
|
|
]
|
|
}
|
|
}
|
|
}
|