Version:
Sizing
Sizing legt fest, welche Maße Elemente annehmen und mit welchen Eckenradien und Rahmenstärken sie gezeichnet werden.
Overview
Größen, Eckenradien und Rahmenstärken stammen wie die Abstände aus festen Skalen und werden nicht frei gewählt. Wer eine Höhe, eine Kantenlänge, einen Radius oder eine Linienbreite braucht, nimmt den passenden Token statt eines Pixelwerts – nur dann bleiben Bedienelemente über alle Komponenten hinweg gleich groß und wachsen auf touchbedienten Geräten dort mit, wo das vorgesehen ist. Diese Seite führt alle dafür verfügbaren Tokens auf.
Alle Skalen stehen auf zwei Ebenen bereit: als Rohskala mit festen Werten und als semantische Ebene, die Komponenten und eigenes CSS verwenden. Welche Ebene wann gilt, steht unter Verwendung im eigenen CSS.
Verhältnis zu Grid & Spacing
Sizing und Spacing sind zwei getrennte Skalen. Die Tokens --mate-spacing-* sind für Abstände zwischen und innerhalb von Elementen vorgesehen; sie sind unter Grid & Spacing dokumentiert. Die Tokens --mate-sizing-* sind für die Maße der Elemente selbst vorgesehen – Höhen, Breiten und Kantenlängen – und stehen auf dieser Seite. Hier stehen außerdem die Eckenradien --mate-corner-radius-* und die Rahmenstärken --mate-border-width-*, die beide themeunabhängig sind; siehe dazu Themes.
Die Zuordnung ist eine Absicht, keine technische Schranke: Im Theme selbst greifen einzelne Komponenten für Innenabstände, Fokusrahmen oder Radien auch auf die Sizing-Skala zu. Für eigenes CSS gilt trotzdem die Zuordnung oben, weil nur sie die Skalen unterscheidbar hält.
Guidelines
Größen
Größen legen fest, wie hoch und wie breit Bedienelemente sind. Die Skala steht auf zwei Ebenen als Design Token zur Verfügung: als Rohskala (Primitive) und als semantische Ebene. Darauf setzen die Komponentengrößen auf, die einzelne Bauteile vermessen.
Rohskala (Primitive)
Die Primitive tragen feste Werte, die sich durch kein Theme ändern. Komponenten greifen nicht direkt auf sie zu. Die px-Werte gelten bei einer Basisschriftgröße von 16 px.
| Token | rem | px |
|---|---|---|
--mate-sizing-012 | 0.125rem | 2 px |
--mate-sizing-025 | 0.25rem | 4 px |
--mate-sizing-050 | 0.5rem | 8 px |
--mate-sizing-100 | 1rem | 16 px |
--mate-sizing-150 | 1.5rem | 24 px |
--mate-sizing-200 | 2rem | 32 px |
--mate-sizing-225 | 2.25rem | 36 px |
--mate-sizing-250 | 2.5rem | 40 px |
--mate-sizing-300 | 3rem | 48 px |
--mate-sizing-350 | 3.5rem | 56 px |
--mate-sizing-400 | 4rem | 64 px |
Die Skala ist nicht deckungsgleich mit der Spacing-Skala. Die Stufen 000, 075 und 125 kennt sie nicht, es gibt zwischen 8 px und 16 px sowie zwischen 16 px und 24 px also keine Zwischenstufe. Dafür bringt sie die Stufen 225 (36 px) und 400 (64 px) mit, die es beim Spacing nicht gibt. Die Spacing-Skala ist unter Grid & Spacing beschrieben.
Semantische Ebene
Die semantische Ebene ist die Ebene, die Komponenten tatsächlich verwenden. Jede Stufe verweist auf genau eine Stufe der Rohskala.
| Token | Rohstufe | rem | px |
|---|---|---|---|
--mate-sizing-xxxxs | --mate-sizing-012 | 0.125rem | 2 px |
--mate-sizing-xxxs | --mate-sizing-025 | 0.25rem | 4 px |
--mate-sizing-xxs | --mate-sizing-050 | 0.5rem | 8 px |
--mate-sizing-xs | --mate-sizing-100 | 1rem | 16 px |
--mate-sizing-sm | --mate-sizing-150 | 1.5rem | 24 px |
--mate-sizing-md | --mate-sizing-200 | 2rem | 32 px |
--mate-sizing-md-lg | --mate-sizing-225 | 2.25rem | 36 px |
--mate-sizing-lg | --mate-sizing-250 | 2.5rem | 40 px |
--mate-sizing-xl | --mate-sizing-300 | 3rem | 48 px |
--mate-sizing-xxl | --mate-sizing-350 | 3.5rem | 56 px |
--mate-sizing-xxxl | --mate-sizing-400 | 4rem | 64 px |
Die Zuordnung ist im Desktop Theme und im Mobile Theme identisch. Jede Stufe zeigt in beiden Themes auf dieselbe Rohstufe und trägt damit denselben Wert. Deshalb hat die Tabelle keine eigene Spalte für Mobile.
Dass die Skala nicht mit dem Theme wechselt, ist beabsichtigt. Sie ist ein Maßband: Eine Stufe steht für einen festen Wert, und dieser Wert bleibt in jedem Theme derselbe. Anders als bei der Spacing-Skala findet der Wechsel auf größere Maße nicht in der Skala selbst statt, sondern eine Ebene darüber – ein Token, das mitwachsen soll, verweist im Mobile Theme auf eine andere Stufe derselben Skala.
Zehn Tokens des Themes greifen auf die semantische Ebene zu, und jedes davon wählt im Mobile Theme eine höhere Stufe als im Desktop Theme. Keines der zehn behält seine Stufe:
| Token | Stufe Desktop | Stufe Mobile |
|---|---|---|
--mate-touch-target-touch-target-height | md-lg / 36 px | xl / 48 px |
--mate-components-button-button-height | md-lg / 36 px | xl / 48 px |
--mate-components-input-input-height | md-lg / 36 px | xl / 48 px |
--mate-components-input-chips-height | sm / 24 px | md / 32 px |
--mate-components-notification-bar-close-button-container | md / 32 px | lg / 40 px |
--mate-components-global-header-global-header-height | xxl / 56 px | xxxl / 64 px |
--mate-components-stepper-stepper-height | xxl / 56 px | xxxl / 64 px |
--mate-icon-sizing-sm | xs / 16 px | sm / 24 px |
--mate-icon-sizing-md | sm / 24 px | md / 32 px |
--mate-icon-sizing-lg | md / 32 px | lg / 40 px |
Daraus folgt die Regel für eigene Elemente: Eine Stufe der Größen-Skala ist eine Maßangabe, kein umschaltendes Maß. Wer sie direkt setzt, legt eine feste Größe fest – das ist für alles richtig, was auf jedem Gerät gleich groß bleiben soll, etwa eine Trennlinie, ein Abzeichen oder eine feste Kantenlänge. Für alles, was mit dem Finger getroffen werden muss, ist sie die falsche Wahl.
Info für Dev
Setze die Höhe eines eigenen Bedienelements nicht über --mate-sizing-*. Ein Element mit --mate-sizing-md-lg bleibt auch auf einem Tablet bei 36 px, während Button und Eingabefeld daneben auf 48 px wachsen.
Verwende stattdessen --mate-touch-target-touch-target-height für die Mindesthöhe oder das Komponenten-Token des Bauteils, an dem sich das Element ausrichtet – siehe Komponentengrößen und Touch Target. Beide zeigen je Theme auf eine andere Stufe und wachsen deshalb mit.
Wird ein eigenes Maß gebraucht, das mitwachsen soll, wähle die beiden Stufen selbst und schalte sie über dieselbe Media Query um, die auch das Mobile Theme aktiviert: @media (pointer: coarse) and (hover: none). Nicht die internen Varianten --mate-desktop-sizing-* und --mate-mobile-sizing-* ansprechen – sie sind theme-unabhängig am Wurzelelement definiert und schalten nicht um.
Komponentengrößen
Einzelne Komponenten bringen eigene Größen-Tokens mit. Sie tragen die Höhe oder die Kantenlänge eines Bauteils und wechseln mit dem Theme: Auf mobilen Geräten stehen dieselben Tokennamen auf größeren Werten.
| Token | Desktop | Mobile |
|---|---|---|
--mate-components-button-button-height | 36 px | 48 px |
--mate-components-checkbox-checkbox-size | 20 px | 24 px |
--mate-components-facets-info-icon-container-sm | 20,8 px | 24 px |
--mate-components-facets-info-icon-container-md | 24 px | 27,2 px |
--mate-components-facets-info-icon-container-lg | 27,2 px | 30 px |
--mate-components-global-header-global-header-height | 56 px | 64 px |
--mate-components-input-chips-height | 24 px | 32 px |
--mate-components-input-error-icon-container | 20,8 px | 24 px |
--mate-components-input-help-icon-container | 24 px | 27,2 px |
--mate-components-input-input-height | 36 px | 48 px |
--mate-components-input-lookup-divider-height | 34 px | 46 px |
--mate-components-notification-bar-close-button-container | 32 px | 40 px |
--mate-components-radio-button-small-circle | 6 px | 9 px |
--mate-components-stepper-stepper-height | 56 px | 64 px |
Sechs dieser Tokens verweisen auf eine Stufe der semantischen Ebene, im Mobile Theme auf eine höhere: die Höhe von Button, Eingabefeld und Chips, die Höhe von Global Header und Stepper sowie der Schaltflächenbereich der Notification Bar. Die übrigen acht tragen hartkodierte Werte – die Icon-Container der Facets und der Eingabefelder, die Trennlinie des Lookup-Feldes, der kleine Kreis des Radio Buttons und die Größe der Checkbox. Ein Teil dieser Werte fällt mit einer Stufe der Skala zusammen, ein Teil liegt dazwischen. Für eigene Elemente sind deshalb nicht diese Tokens zu verwenden, sondern die semantische Ebene.
Sieben dieser Tokens sind zusammen mit den übrigen Änderungen des Mobile Themes auch unter Mobile Theme aufgeführt. Wie die Umschaltung zwischen Desktop und Mobile funktioniert, steht ebenfalls dort.
Touch Target
--mate-touch-target-touch-target-height gibt die Mindesthöhe eines Touch-Ziels vor.
| Token | Desktop | Mobile |
|---|---|---|
--mate-touch-target-touch-target-height | 36 px | 48 px |
Auf dem Desktop folgt das Token --mate-sizing-md-lg, auf mobilen Geräten --mate-sizing-xl. Es wächst beim Wechsel auf das Mobile Theme also mit, und zwar auch dann automatisch, wenn das Gerät per Touch bedient wird. Eigene Bedienelemente, die eine Mindesthöhe brauchen, setzen diese über dieses Token.
Eckenradien
Eckenradien beschreiben die Abrundung von Flächen, etwa bei Eingabefeldern, Karten oder Buttons. Wie die Größen stehen sie auf zwei Ebenen zur Verfügung.
Die Rohskala kennt drei Stufen mit festen Werten.
| Token | rem | px |
|---|---|---|
--mate-border-radius-012 | 0.125rem | 2 px |
--mate-border-radius-025 | 0.25rem | 4 px |
--mate-border-radius-050 | 0.5rem | 8 px |
Die semantische Ebene heißt nicht --mate-border-radius-*, sondern --mate-corner-radius-*. Sie ist die Ebene, die Komponenten verwenden. Jede Stufe verweist auf genau eine Stufe der Rohskala.
| Token | Rohstufe | rem | px |
|---|---|---|---|
--mate-corner-radius-sm | --mate-border-radius-012 | 0.125rem | 2 px |
--mate-corner-radius-md | --mate-border-radius-025 | 0.25rem | 4 px |
--mate-corner-radius-lg | --mate-border-radius-050 | 0.5rem | 8 px |
Desktop und Mobile verweisen bei allen drei Stufen auf dieselbe Rohstufe. Eckenradien tragen damit in jedem Theme denselben Wert und sind themeunabhängig. Siehe dazu Themes.
Rahmenstärken
Rahmenstärken beschreiben die Linienbreite von Rahmen und Trennlinien. Auch sie stehen auf zwei Ebenen zur Verfügung.
| Token | rem | px |
|---|---|---|
--mate-border-width-006 | 0.063rem | 1 px |
--mate-border-width-012 | 0.125rem | 2 px |
--mate-border-width-025 | 0.25rem | 4 px |
--mate-border-width-006 ist die dünnste Stufe und entspricht einer Haarlinie von 1 px. Der Wert 0.063rem ist der gerundete rem-Wert von 1 px bei einer Basisschriftgröße von 16 px.
Anders als bei den Eckenradien tragen beide Ebenen hier denselben Präfix --mate-border-width-. Die Endung entscheidet über die Ebene: Eine numerische Endung kennzeichnet die Rohskala, eine T-Shirt-Endung die semantische Ebene. --mate-border-width-012 und --mate-border-width-md sind also zwei verschiedene Tokens auf zwei verschiedenen Ebenen.
| Token | Rohstufe | rem | px |
|---|---|---|---|
--mate-border-width-sm | --mate-border-width-006 | 0.063rem | 1 px |
--mate-border-width-md | --mate-border-width-012 | 0.125rem | 2 px |
--mate-border-width-lg | --mate-border-width-025 | 0.25rem | 4 px |
Wie bei den Eckenradien verweisen Desktop und Mobile auf dieselbe Rohstufe. Die Rahmenstärken sind damit ebenfalls themeunabhängig.
Diese Tokens beschreiben ausschließlich die Stärke eines Rahmens, nicht seine Farbe. Die beiden Farb-Tokens für Rahmen, --mate-border-base und --mate-border-light, sind unter Colors dokumentiert.
Verwendung im eigenen CSS
In eigenem CSS ist die semantische Ebene zu verwenden, also --mate-sizing-md, --mate-corner-radius-md oder --mate-border-width-sm. Nicht zu verwenden sind die Rohskala und die internen Varianten, deren Name ein Segment light, dark, desktop oder mobile enthält, etwa --mate-mobile-sizing-md.
Der Grund liegt darin, wie das Theme wirkt: Nur die semantische Ebene wird beim Theme-Wechsel umgeschaltet. Ihre Tokens sind je Theme eigens zugewiesen – die Größen-Tokens innerhalb der Selektoren für desktop und mobile, die Farb-Tokens innerhalb der Selektoren für light und dark. Rohskala und interne Varianten sind dagegen unabhängig vom Theme am Wurzelelement definiert und tragen immer denselben Wert. Wer sie direkt anspricht, schreibt ein Theme im eigenen Code fest und verliert die automatische Umschaltung.
Info für Dev
Verwende in eigenem CSS die semantische Ebene, also --mate-sizing-md, --mate-corner-radius-md oder --mate-border-width-sm. Nicht die numerische Rohskala und nie die internen Varianten mit den Segmenten light, dark, desktop oder mobile.
Nur die semantische Ebene schaltet beim Theme-Wechsel um. Eckenradien und Rahmenstärken behalten dabei ihren Wert, Abstände wachsen im Mobile Theme mit.
Zu den Größen gehören thematisch auch die Icon-Größen --mate-icon-sizing-*. Ihr Katalog steht unter Icons, damit er nicht doppelt gepflegt wird.
Barrierefreiheit
Größen sind für die Bedienbarkeit entscheidend, nicht nur für die Gestaltung. Interaktive Elemente müssen groß genug sein, um mit dem Finger sicher getroffen zu werden; dafür steht --mate-touch-target-touch-target-height, das auf touchbedienten Geräten automatisch auf 48 px wächst. Die Automatik greift über die Media Query, die auch das Mobile Theme aktiviert – siehe Mobile Theme.
Größen dürfen Inhalte nicht auf ein festes Maß zwingen. Bei starkem Zoom oder auf schmalen Viewports müssen Inhalte umbrechen, statt horizontales Scrollen zu erzwingen; dieselbe Regel gilt für Abstände und ist unter Grid & Spacing begründet. Feste Pixelbreiten und -höhen im eigenen CSS können dieses Verhalten aushebeln und sind deshalb zu vermeiden. Wo eine Höhe nötig ist, ist eine Mindesthöhe der festen Höhe vorzuziehen, damit größere Schrift nicht abgeschnitten wird.
Die Anforderungen und die Ziel-Konformitätsstufe des Design Systems stehen unter Accessibility.