213 lines
15 KiB
HTML
213 lines
15 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Styleguide – Foundations</title>
|
||
<link rel="stylesheet" href="./styleguide.css">
|
||
</head>
|
||
<body>
|
||
|
||
<h1 class="sg-main-heading">Foundations</h1>
|
||
|
||
<section id="foundations-colors">
|
||
<h2 class="sg-sub-heading sg-text-on-dark">Colors</h2>
|
||
<table class="sg-foundation-table sg-table-label">
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Wert</th>
|
||
<th>Verwendung</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>darkblue</td><td>#4661A9</td><td>Primäre Card-Kopfsegmente, Portalheader, Toggle-Handle sowie primäre Chart-Werte ohne Positiv-Negativ-Darstellung.</td></tr>
|
||
<tr><td>darkgreen</td><td>#4D646E</td><td>Alternative Card-Kopfsegmente.</td></tr>
|
||
<tr><td>darkbrown</td><td>#665F57</td><td>Gedämpfte alternative Card-Kopfsegmente.</td></tr>
|
||
<tr><td>light-grey</td><td>#E2E5E9</td><td>Card-Flächen, Card-Bodies, Formularflächen, Optionszeilen, inaktive Buttons, Sandwich-Menü-Flächen und Chart-/Score-Hintergründe.</td></tr>
|
||
<tr><td>medium-grey</td><td>#D4D6DB</td><td>Aktive Standardbuttons, geöffnete Pulldown-Flächen, Hilfetext-Flächen, Fragezeichen-Icons, Referenzwerte in Charts sowie Entfernen-Button in Eingabefeldern.</td></tr>
|
||
<tr><td>dark-grey</td><td>#7B879D</td><td>Ausgewählte Tab-Buttons als Fläche sowie Schriftfarbe für deaktivierte oder zurückgenommene Interaktionselemente.</td></tr>
|
||
<tr><td>black</td><td>#000000</td><td>Neutrale Vollton-Overlay-Farbe für starke visuelle Deaktivierung von Hintergrundobjekten.</td></tr>
|
||
<tr><td>white</td><td>#FFFFFF</td><td>Standardfläche von Buttons, Eingabefeldern, Pulldown-Triggern, Checkboxen, Radios, Toggle-Tracks und Card-Trennern.</td></tr>
|
||
<tr><td>signal-green</td><td>#009101</td><td>Positive Score-Balken und positive Chart-Werte.</td></tr>
|
||
<tr><td>signal-yellow</td><td>#9C7A00</td><td>Neutrale Score-Balken, neutrale Chart-Werte und Warnwerte in Tabellen.</td></tr>
|
||
<tr><td>signal-red</td><td>#9B3B2F</td><td>Negative Score-Balken und negative Chart-Werte.</td></tr>
|
||
<tr><td>font-dark</td><td>#414959</td><td>Standard-Schrift auf hellen Flächen, Achsen/Marker in Charts, Sandwich-Linien und Radio-Markierung.</td></tr>
|
||
<tr><td>font-light</td><td>#FFFFFF</td><td>Schrift auf dunklen Flächen, Portalheader, Card-Headern, Prozessbuttons und ausgewählten Tab-Buttons.</td></tr>
|
||
<tr><td>font-hyperlink</td><td>#FF6900</td><td>Links in Texten, Prozessbuttons und Page-Navigations-Cards.</td></tr>
|
||
<tr><td>process-inactive</td><td>#FFAE79</td><td>Inaktive Hintergrundfläche des Prozessbuttons.</td></tr>
|
||
<tr><td>background-purple</td><td>#373C4A</td><td>Globaler Portalhintergrund.</td></tr>
|
||
<tr><td>background-purple-light</td><td>#656C7D</td><td>Group Cards und gruppierende Card-Flächen.</td></tr>
|
||
<tr><td>transparent</td><td>transparent</td><td>Transparenter Foundation-Wert für semantische Overlay-/Box-Varianten ohne Eigenfläche.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<section id="foundations-states">
|
||
<h2 class="sg-sub-heading sg-text-on-dark">States</h2>
|
||
<table class="sg-foundation-table sg-table-label">
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Wert</th>
|
||
<th>Verwendung</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>form-area</td><td>background: light-grey</td><td>Hintergrund von Formularbereichen, Optionszeilen und Formular-Preview-Flächen. Die Fläche gehört nicht zum einzelnen Formularelement.</td></tr>
|
||
<tr><td>form-active</td><td>background: white; color: font-dark</td><td>Aktive oder ausgewählte Eingabefelder, Checkboxen, Radios, Pulldown-Trigger und Pulldown-Optionen. Bei Pulldowns zeigt die Zahl in Klammern die Anzahl gewählter Optionen.</td></tr>
|
||
<tr><td>form-inactive-selectable</td><td>background: white; color: font-dark</td><td>Nicht aktive, aber auswählbare Formularfelder, Checkboxen, Radios und Pulldown-Trigger. Dieser Zustand nutzt keine Transparenz.</td></tr>
|
||
<tr><td>form-disabled</td><td>background: white; color: dark-grey; opacity: disabled-opacity</td><td>Fachlich nicht verfügbare oder technisch deaktivierte Formularoptionen. Dieser Zustand ist nicht bedienbar.</td></tr>
|
||
<tr><td>pulldown-panel-open</td><td>background: medium-grey</td><td>Geöffnete Pulldown-Fläche. Das Panel öffnet unter dem Trigger, schließt bei Klick außerhalb und richtet sich bei Bildschirmrand automatisch links oder rechts aus.</td></tr>
|
||
<tr><td>overlay-panel-open</td><td>background: medium-grey oder light-grey je nach Komponente</td><td>Ausklappbare Overlays wie Pulldown-Panels, Hilfetexte und Sandwich-Menüs. Es ist immer nur das jeweils relevante Overlay geöffnet.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<section id="foundations-typography">
|
||
<h2 class="sg-sub-heading sg-text-on-dark">Typography</h2>
|
||
<table class="sg-foundation-table sg-table-label">
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Wert</th>
|
||
<th>Verwendung</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>body</td><td>Open Sans, 1rem, Regular</td><td>Standardtext im Portal.</td></tr>
|
||
<tr><td>brand</td><td>Open Sans, 1.6rem, Regular</td><td>Portal-Brand im Portal Header.</td></tr>
|
||
<tr><td>h1</td><td>Open Sans, 1.5rem, Regular</td><td>Hauptüberschriften; kleiner als Portal-Brand und 50% größer als Fließtext.</td></tr>
|
||
<tr><td>h2</td><td>Open Sans, 1.25rem, Regular</td><td>Zwischenüberschriften; kleiner als H1 und 25% größer als Fließtext.</td></tr>
|
||
<tr><td>strong</td><td>Open Sans, 1rem, Semibold</td><td>Hervorgehobener Text, Labels und Button-Text.</td></tr>
|
||
<tr><td>section-title</td><td>Open Sans, 1rem, Regular</td><td>Section-Titel; aktuell identisch mit body, aber separat benannt.</td></tr>
|
||
<tr><td>bar-label</td><td>Open Sans, 1rem, Semibold</td><td>Labels bei Score-Balken.</td></tr>
|
||
<tr><td>table-label</td><td>Open Sans, 0.8rem, Regular</td><td>Tabellen- und Grafikbeschriftungen sowie kurze Hilfetexte und Tooltip-Inhalte.</td></tr>
|
||
<tr><td>table-value</td><td>Open Sans, 0.8rem, Semibold</td><td>Hervorgehobene Tabellen- und Grafikwerte.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<section id="foundations-portal-overrides">
|
||
<h2 class="sg-sub-heading sg-text-on-dark">Naurua Overrides</h2>
|
||
<table class="sg-foundation-table sg-table-label">
|
||
<thead>
|
||
<tr>
|
||
<th>Portal</th>
|
||
<th>Abweichung</th>
|
||
<th>Verwendung</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>NAURUA</td><td>darkblue → #354A52; body → Avenir, sans-serif</td><td>Portalgebundene Foundation-Overrides für das zweite Portal. Die Überschreibung greift nur, wenn das Root-Element `data-portal="naurua"` setzt.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<section id="foundations-spacing">
|
||
<h2 class="sg-sub-heading sg-text-on-dark">Spacing</h2>
|
||
<table class="sg-foundation-table sg-table-label">
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Wert</th>
|
||
<th>Verwendung</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>spacing-small</td><td>0.3rem</td><td>Kleine Abstände zwischen Interaktionselementen, Card-Segmenten, Pulldown-Optionen, Overlay-Triggern und eng zusammengehörigen Cards.</td></tr>
|
||
<tr><td>spacing-large</td><td>1rem</td><td>Große Abstände zwischen Cards und Gruppen.</td></tr>
|
||
<tr><td>card-segment-padding</td><td>0.75rem vertikal / 1rem horizontal (Desktop), 0.5rem horizontal (Mobile)</td><td>Innenabstand von Card-Segmenten; auf Mobile wird das horizontale Padding reduziert.</td></tr>
|
||
<tr><td>interaction-padding</td><td>0.25rem vertikal / 1rem horizontal</td><td>Innenabstand von Interaktionselementen.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<section id="foundations-dimensions">
|
||
<h2 class="sg-sub-heading sg-text-on-dark">Dimensions</h2>
|
||
<table class="sg-foundation-table sg-table-label">
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Wert</th>
|
||
<th>Verwendung</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>interaction-height</td><td>2rem</td><td>Einheitliche Höhe für Buttons, Tabs, Pulldowns, Eingabefelder und Sandwich-Menü-Buttons.</td></tr>
|
||
<tr><td>compact-interaction-height</td><td>1.5rem</td><td>Einheitliche Höhe für schmale Interaktionselemente wie Tasten-Navigation-schmal.</td></tr>
|
||
<tr><td>compact-interaction-padding</td><td>0.15rem vertikal / 0.75rem horizontal</td><td>Innenabstand schmaler Interaktionselemente.</td></tr>
|
||
<tr><td>small-interaction-element-size</td><td>1.25rem</td><td>Eigene Höhe und Breite kleiner Interaktionselemente wie Fragezeichen-Icon, Checkboxen und Radio Buttons.</td></tr>
|
||
<tr><td>disabled-opacity</td><td>0.45</td><td>Deckkraft für fachlich nicht verfügbare oder technisch deaktivierte Interaktionselemente.</td></tr>
|
||
<tr><td>sandwich-line-width</td><td>1.25rem</td><td>Länge der Striche im Sandwich-Menü-Button.</td></tr>
|
||
<tr><td>sandwich-line-height</td><td>4px</td><td>Dicke der Striche im Sandwich-Menü-Button.</td></tr>
|
||
<tr><td>sandwich-line-gap</td><td>3px</td><td>Abstand zwischen den Strichen im Sandwich-Menü-Button.</td></tr>
|
||
<tr><td>score-bar-height</td><td>1rem</td><td>Höhe horizontaler Score-Balken.</td></tr>
|
||
<tr><td>score-marker-width</td><td>6px</td><td>Breite des Median-Markers.</td></tr>
|
||
<tr><td>score-marker-height</td><td>score-bar-height + 2px</td><td>Median-Marker ragt oben und unten je 1px über den Score-Balken hinaus.</td></tr>
|
||
<tr><td>chart-height-bar</td><td>24rem</td><td>Basis-Höhe für Bar Charts; in der Component wird sie proportional reduziert, die Chart-Höhe skaliert nicht mit der Breite.</td></tr>
|
||
<tr><td>chart-height-line</td><td>18rem</td><td>Basis-Höhe für Line Charts; in der Component wird sie proportional reduziert, die Chart-Höhe skaliert nicht mit der Breite.</td></tr>
|
||
<tr><td>chart-axis-label-column-width</td><td>4rem</td><td>Breite der Y-Achsenbeschriftungsspalte bei Charts.</td></tr>
|
||
<tr><td>chart-axis-label-gap</td><td>5px</td><td>Horizontaler Abstand zwischen Y-Achsenbeschriftung und Y-Achse.</td></tr>
|
||
<tr><td>chart-grid-line-width</td><td>1px</td><td>Linienstärke von Gridlines und Achsen in Charts.</td></tr>
|
||
<tr><td>chart-line-width</td><td>2px</td><td>Linienstärke der Datenlinie im Line Chart.</td></tr>
|
||
<tr><td>input-label-width</td><td>9rem</td><td>Desktop-Breite der Label-Spalte für gruppierte Formularzeilen mit Pulldowns, Slidern, Radio-Feldern, Checkbox-Feldern sowie ein- und mehrzeiligen Eingabefeldern.</td></tr>
|
||
<tr><td>input-field-desktop-width</td><td>400px</td><td>Fixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview.</td></tr>
|
||
<tr><td>input-field-max-width</td><td>600px</td><td>Maximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld).</td></tr>
|
||
<tr><td>object-card-height</td><td>600px</td><td>Fixe Höhe der Object Card im Desktop-Layout (u. a. für Company Card).</td></tr>
|
||
<tr><td>object-group-card-min-width</td><td>450px</td><td>Mindestbreite der Group Card im Pattern Object Group Card.</td></tr>
|
||
<tr><td>object-group-card-max-width</td><td>650px</td><td>Maximale Breite der Group Card im Pattern Object Group Card.</td></tr>
|
||
<tr><td>object-group-card-height</td><td>700px</td><td>Fixe Desktop-Höhe der Group Card im Pattern Object Group Card.</td></tr>
|
||
<tr><td>notifications-card-min-width</td><td>445px</td><td>Mindestbreite der Notification Card im Pattern Notifications; 50px größer als die Object Card und Grundlage für Flex-Basis und Mindestbreite des Patterns.</td></tr>
|
||
<tr><td>search-field-width</td><td>15.3rem</td><td>Fixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich.</td></tr>
|
||
<tr><td>layer-pulldown-panel</td><td>40</td><td>Layer-Stufe für geöffnete Pulldown-Ausklappfelder, damit sie über anderen Inhalten liegen.</td></tr>
|
||
<tr><td>multiselect-pulldown-panel-desktop-width</td><td>500px</td><td>Reservierte Foundation-Breite für Multiselektions-Pulldown-Panels; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert.</td></tr>
|
||
<tr><td>multiselect-pulldown-panel-mobile-width</td><td>80vw</td><td>Reservierte mobile Foundation-Breite für Multiselektions-Pulldown-Panels; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert.</td></tr>
|
||
<tr><td>options-row-mode-toggle-width</td><td>7rem</td><td>Breite des Modus-Schiebers in der Options Row.</td></tr>
|
||
<tr><td>options-row-help-panel-width</td><td>16rem</td><td>Breite des Help-Panels in der Options Row.</td></tr>
|
||
<tr><td>card-list-drawer-width</td><td>40%</td><td>Relative Breite des ausziehbaren Card-Listenbereichs.</td></tr>
|
||
<tr><td>notifications-text-segment-fixed-height</td><td>150px</td><td>Desktop-Höhe des ersten Text-Segments im Standard-Pattern Notifications.</td></tr>
|
||
<tr><td>notifications-text-segment-fixed-height-small</td><td>80px</td><td>Desktop-Höhe des ersten Text-Segments in der Variante Pattern Notifications small.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<section id="foundations-radius">
|
||
<h2 class="sg-sub-heading sg-text-on-dark">Radius</h2>
|
||
<table class="sg-foundation-table sg-table-label">
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Wert</th>
|
||
<th>Verwendung</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>radius-card</td><td>8px</td><td>Cards, Group Cards, Formularflächen, Optionszeilen und geöffnete Overlay-Flächen.</td></tr>
|
||
<tr><td>radius-interaction</td><td>4px</td><td>Buttons, Eingabefelder, Pulldown-Trigger, Checkboxen und Modus-Schieber.</td></tr>
|
||
<tr><td>radius-graph-bar</td><td>2px</td><td>Score-Balken und Graphik-Balken.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<section id="foundations-shadows-borders">
|
||
<h2 class="sg-sub-heading sg-text-on-dark">Shadows / Borders</h2>
|
||
<table class="sg-foundation-table sg-table-label">
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Wert</th>
|
||
<th>Verwendung</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>shadow-none</td><td>none</td><td>Kein Schatten für nicht-overlay Flächen.</td></tr>
|
||
<tr><td>shadow-overlay</td><td>0 10px 24px rgba(0, 0, 0, 0.22)</td><td>Standard-Schatten für aufklappbare Flächen wie Pulldown-, Menü- und Help-Panels.</td></tr>
|
||
<tr><td>border-none</td><td>none</td><td>Es werden keine Borders verwendet.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
</body>
|
||
</html>
|