tuix-text
Typografie und jeder Textstil des Design Systems.
tuix-text legt einen der Textstile des Design Systems auf seinen Slot-Inhalt.
Das Element rendert inline und umschliesst ein einzelnes Wort genauso gern wie
einen ganzen Absatz.
Die Typo-Skala
Überschriften reichen von xxl bis xs, alle mit Schriftschnitt 600.
Body- und Feldstile sind leichter, für alles, was keine Überschrift ist.
xxl (6rem) ist der Hero-Stil, und bullet_list, link sowie button gibt es,
damit Listen, Links und Button-Beschriftungen auf derselben Skala bleiben; die
Komponenten verwenden sie bereits.
Semantische Farben
API
Properties
| Property | Attribut | Typ | Standard | Beschreibung |
|---|---|---|---|---|
size | size | TextSize | body1 | Der Textstil: Grösse, Gewicht und Zeilenhöhe |
color | color | TextVariant | primary | Eine semantische Farbe, aufgelöst über die helle oder dunkle Palette |
dark | dark | boolean | false | color über die dunkle Palette auflösen |
Grössen
Die Werte von TextSize mit ihren Desktop-Massen. Alle verkleinern sich an den
Breakpoints für Tablet und Mobile, ausser
field_title und field_description: diese zwei behalten die Werte unten in
jeder Breite.
| Wert | Attribut | Grösse / Zeilenhöhe | Gewicht | Einsatz |
|---|---|---|---|---|
TextSize.XXL | xxl | 6rem / 6.25rem | 600 | Hero |
TextSize.XL | xl | 3.375rem / 3.688rem | 600 | Seitentitel |
TextSize.L | l | 2.813rem / 3.375rem | 600 | Abschnittstitel |
TextSize.M | m | 2.313rem / 2.75rem | 600 | Unterabschnitt |
TextSize.S | s | 1.938rem / 2.313rem | 600 | Kartentitel |
TextSize.XS | xs | 1.313rem / 1.563rem | 600 | Kleine Überschrift |
TextSize.Body1 | body1 | 1.125rem / 1.688rem | 300 | Fliesstext |
TextSize.Body2 | body2 | 0.938rem / 1.313rem | 300 | Nebentext |
TextSize.BulletList | bullet_list | 1.125rem / 1.375rem | 300 | Listeneinträge |
TextSize.Link | link | 1rem / 1.25rem | 400 | Link-Beschriftung |
TextSize.Button | button | 1rem / 1.25rem | 400 | Button-Beschriftung |
TextSize.FieldPlaceholder | field_placeholder | 1rem / 1.25rem | 300 | Feldwert und Platzhalter |
TextSize.FieldTitle | field_title | 0.75rem / 0.875rem | 300 | Feldlabel |
TextSize.FieldDescription | field_description | 0.75rem / 0.875rem | 300 | Hilfetext eines Feldes |
Farben
TextVariant ist semantisch: derselbe Wert löst im Dark Mode zu einem anderen
Hex-Wert auf. Siehe Enums für die vollständige
Zuordnung.
| Wert | Attribut | Hell | Dunkel |
|---|---|---|---|
PRIMARY | primary | BLACK | PRIMARY_50 |
SECONDARY | secondary | WHITE | BLACK |
MAIN | main | MAIN | dunkles MAIN |
DARK_MAIN | dark_main | DARK_MAIN | dunkles NEUTRAL_600 |
GREY | grey | NEUTRAL_600 | dunkles NEUTRAL_600 |
LIGHT_GREY | light_grey | NEUTRAL_200 | NEUTRAL_200 |
DISABLED | disabled | PRIMARY_100 | PRIMARY_200 |
VALIDATION | validation | VALIDATION | dunkles VALIDATION |
ERROR | error | ERROR | dunkles ERROR |
SUCCESS | success | SUCCESS | dunkles SUCCESS |
LIGHT | light | WHITE | PRIMARY_50 |
DARK | dark | BLACK | BLACK |
DARK_BLUE | dark_blue | DARK_MAIN | PRIMARY_800 |
TITLE_BLUE | title_blue | DARK_MAIN | PRIMARY_300 |
SECTION | section | PRIMARY_700 | PRIMARY_300 |
STROKE | stroke | PRIMARY_400 | PRIMARY_400 |
Slots
| Slot | Inhalt |
|---|---|
| default | Der Text. Slot-Elemente erben Grösse und Gewicht, ein <b> oder <span> darin behält den Stil |
Hinweise
- Innerhalb von
tuix-linküberschreibt der Link die Farbe: er setzt die Custom Property--t-link-text-color, die der Text zuerst liest. - Die übrigen Komponenten nutzen
tuix-textintern für ihre Beschriftungen, ihre Typografie folgt dieser Skala also automatisch.