commit 5abea83034c794ecddfa25b523d67457303a1ad7 Author: Mathias Gläser Date: Mon May 18 16:00:56 2026 +0200 Initial commit: add styleguide project diff --git a/.codex/skills/styleguide-erstellung/SKILL.md b/.codex/skills/styleguide-erstellung/SKILL.md new file mode 100644 index 0000000..df234e6 --- /dev/null +++ b/.codex/skills/styleguide-erstellung/SKILL.md @@ -0,0 +1,235 @@ +--- +name: styleguide erstellung +description: Verwenden für jede Weiterentwicklung des Styleguides. Erzwingt eine sauber kaskadierende, skalierbare Design-System-Architektur mit klarer Trennung von Foundations, semantischen Tokens, Components, Patterns, Layouts, Templates und Usage Guidelines. Nutze diesen Skill immer, wenn CSS, HTML, Tokens, Components, Patterns, Layouts, Templates, Dokumentation oder Styleguide-Strukturen geändert, erweitert oder geprüft werden. +--- + +# Styleguide-Erstellung + +## Ziel + +Pflege und erweitere den Styleguide als skalierbares Design-System für große Webportale. + +Jede Änderung muss: + +- sauber kaskadieren, +- der richtigen Styleguide-Ebene zugeordnet sein, +- bestehende Bausteine respektieren, +- langfristig wartbar und wiederverwendbar sein, +- zentral über Foundation Tokens und semantische Tokens in `styleguide.css` steuerbar bleiben, +- ohne lokale Sonderlösungen, visuelle Nachbauten oder Workarounds auskommen. + +## Verbindliche Struktur und Kaskade + +Der Styleguide wird nach dieser Kaskade entwickelt: + +```text +Foundations / Grundlagen +→ Semantische Tokens / Design Tokens +→ Components / Komponenten +→ Patterns / Muster +→ Layouts +→ Templates / Seitentemplates +→ Usage Guidelines / Anwendungsrichtlinien +``` + +Jede neue oder geänderte Lösung muss der passenden Ebene zugeordnet werden; Component- und Pattern-Kapitel dokumentieren dabei die semantischen Tokens, die dort verwendet werden. + +## Ebenenregeln + +### Foundations + +Foundations sind die einzige Quelle für konkrete visuelle Werte, z. B. Farben, Typografie, Spacing, Grid, Icons, Shadows, Border-Radius, Motion, Breakpoints, Z-Index und Containergrößen. + +Neue oder geänderte Foundation-Werte nur nach Rückfrage und expliziter Freigabe einführen. + +### Semantische Tokens / Design Tokens + +Semantische Tokens abstrahieren Foundation Tokens nach Bedeutung, Zweck oder Verwendung im Interface und werden zentral in `styleguide.css` gepflegt. + +Sie benennen nicht den konkreten visuellen Wert, sondern die Rolle im System, z. B. `surface-button-active`, `text-button-process` oder `layout-input-label-width`. + +Regeln: + +- Keine hardcoded Design Values außerhalb der Foundations. +- Semantische Tokens sind Aliase oder Kaskaden auf Foundation Tokens. +- Neue oder geänderte semantische Tokens an der fachlich passenden Stelle in `styleguide.css` ergänzen. +- Struktur, Reihenfolge, Gruppierung, Kommentarlogik und Benennungssystematik von `styleguide.css` einhalten. +- HTML-Dateien dürfen keine lokalen Token-Blöcke, keine eigenen `:root`-Definitionen und keine abweichenden Token-Definitionen enthalten. +- HTML-Dateien dürfen semantische Tokens nur aus `styleguide.css` referenzieren. + +Ergänzungen semantischer Tokens dokumentieren mit: + +- Token-Name +- Token-Typ: Foundation oder semantischer Token für Component, Pattern, Layout oder Template +- Wert oder Alias-Ziel +- kurzer Zweck + +Wenn Foundation Tokens ergänzt oder geändert werden, `foundations.html` nachführen. +Wenn semantische Tokens für Components, Patterns, Layouts oder Templates ergänzt oder geändert werden, die passende Token-Dokumentation nachführen, insbesondere `semantic-tokens-components.html`, sofern dort die bestehende Struktur dafür vorgesehen ist. + +### Components + +Components sind kanonische, wiederverwendbare UI-Bausteine. + +Component-Kapitel dokumentieren die semantischen Tokens, die eine Komponente verwendet, jeweils mit zugeordnetem Foundation Token und Verwendungszweck innerhalb der Komponente. + +Ohne explizite Freigabe nicht erlaubt: + +- Component-HTML verändern +- Component-Klassen verändern, ergänzen oder entfernen +- Component-Nesting verändern +- Component-Semantik verändern +- Component-Varianten erfinden +- Components visuell nachbauen +- Component-Internals von außen überschreiben + +### Patterns + +Patterns kombinieren bestehende Components für konkrete Anwendungsfälle. + +Pattern-Kapitel dokumentieren die semantischen Tokens, die ein Pattern verwendet, jeweils mit zugeordnetem Foundation Token und Verwendungszweck innerhalb des Patterns. + +Erlaubt: + +- eigene Pattern-Klassen +- eigene Layout-/Wrapper-Strukturen +- Pattern-spezifische Responsiveness +- Pattern-spezifische Komposition + +Nur erlaubt, wenn bestehende Components unverändert eingebettet werden. + +Verboten ohne Freigabe: + +```css +.pattern .component-internal-class { ... } +.pattern .sg-card-segment { ... } +.pattern .sg-button__label { ... } +``` + +Wenn ein Pattern Component-Internals stylen müsste, nicht umsetzen. Rückfrage stellen und begründen, ob ein Component-Token, eine Component-Variante oder eine andere architektonische Lösung nötig ist. + +### Layouts + +Layouts regeln Struktur, Container, Raster und Anordnung. + +Layouts dürfen Flächen strukturieren, Spalten und Container definieren, Abstände zwischen größeren Bereichen steuern und responsive Seitenanordnung regeln. + +Layouts dürfen keine Component-Optik ersetzen, keine Pattern-Logik nachbauen, keine Component-Internals überschreiben und keine lokalen Designwerte einführen. + +### Templates + +Templates beschreiben wiederkehrende Seitentypen. + +Templates verwenden bestehende Layouts, Patterns und Components. Sie dürfen keine neuen visuellen Grundlagen, Component-Varianten oder Pattern-Logiken erfinden. + +### Usage Guidelines + +Usage Guidelines dokumentieren die korrekte Verwendung des Systems. + +Sie klären insbesondere: + +- wann welches Pattern verwendet wird, +- responsive Verhalten, +- Accessibility, +- Dos & Don’ts, +- Abgrenzung ähnlicher Components, Patterns, Layouts oder Templates. + +Guidelines müssen präzise, praxisnah und konsistent mit der bestehenden Styleguide-Struktur formuliert werden. + +## Arbeitsablauf + +Vor jeder Umsetzung: + +1. Task-Scope bestimmen. +2. Bestehenden Code und relevante Dokumentation im Scope analysieren. +3. Styleguide-Ebene der Änderung bestimmen. +4. Prüfen, ob bestehende Foundation Tokens, semantische Tokens, Components, Patterns, Layouts oder Templates verwendet werden können. +5. Offene oder nicht belegte Punkte klären. + +Nicht umsetzen, solange eine notwendige Grundlage fehlt. +Wenn etwas nicht eindeutig im Code, in der Dokumentation oder in der Aufgabe belegt ist, Rückfrage stellen. + +## Scope und Grenzen + +Keine Änderungen außerhalb des expliziten Task-Scopes. + +Nicht erlaubt ohne Freigabe: + +- bestehende Components umbauen +- Foundation Tokens oder semantische Tokens umbenennen +- Kaskade von Foundation Tokens zu semantischen Tokens verändern +- CSS-Struktur aufräumen +- HTML-Struktur verbessern, wenn nicht beauftragt +- neue Foundation-Werte einführen +- neue Component-Varianten erfinden +- bestehende Dokumentationsstruktur neu sortieren + +Neue HTML-Seiten nur dann in `index.html` ergänzen, wenn tatsächlich neue Seiten angelegt werden. Bei reinen Änderungen bestehender Seiten ist keine `index.html`-Anpassung erforderlich. + +## Anti-Insellösung + +Jede Lösung muss systemfähig sein. + +Verboten: + +- lokale Styles zur Umgehung der Architektur +- seitenlokale Sonderregeln statt zentraler Foundation Tokens oder semantischer Tokens +- visuelle Nachbauten bestehender Components +- Workarounds, die Architekturdefizite verdecken +- Legacy-Fehlmuster kopieren +- direkte Designwerte in Components, Patterns, Layouts, Templates oder HTML-Dateien + +Technische CSS-Werte sind erlaubt, wenn sie keine Designentscheidung darstellen, z. B.: + +```css +display: flex; +position: relative; +overflow: hidden; +min-width: 0; +width: 100%; +height: auto; +flex: 1 1 auto; +``` + +Wenn unklar ist, ob ein Wert eine Designentscheidung ist: Rückfrage stellen. + +## Unsicherheiten + +Bewerte relevante Aussagen als: + +- **belegt**: direkt im Code oder in der Dokumentation nachweisbar +- **plausibel**: ableitbar, aber nicht eindeutig belegt +- **nicht belegt**: benötigt Rückfrage oder Freigabe + +Nicht belegte Punkte dürfen nicht umgesetzt werden. + +## Abschlusscheck + +Vor Abschluss prüfen: + +- richtige Styleguide-Ebene gewählt +- Kaskade Foundations → semantische Tokens → Components → Patterns → Layouts → Templates → Usage Guidelines eingehalten +- keine hardcoded Design Values außerhalb der Foundations +- neue oder geänderte semantische Tokens in `styleguide.css` gepflegt +- bestehende Struktur von `styleguide.css` eingehalten +- betroffene Dokumentation nachgeführt +- Components unverändert verwendet +- keine Component-Internals überschrieben +- Pattern-CSS steuert nur Komposition, Layout und Responsiveness +- Layout-CSS steuert nur Struktur und Anordnung +- Templates verwenden bestehende Layouts, Patterns und Components +- keine lokalen Token-Blöcke oder `:root`-Definitionen in HTML-Dateien +- keine Refactorings außerhalb Scope +- keine Insellösungen oder Workarounds eingeführt + +## Ergebnisbericht + +Nach Umsetzung kurz berichten: + +- geänderte Dateien +- relevante geprüfte Dateien +- gewählte Styleguide-Ebene +- verwendete oder ergänzte Foundation Tokens und semantische Tokens +- verwendete Components, Patterns, Layouts oder Templates +- nachgeführte Dokumentation +- offene Punkte oder benötigte Freigaben \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e43b0f9 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..902a061 --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,45 @@ +# AGENTS.md + +## Verbindliche Arbeitsweise + +- Der Skill `styleguide erstellung` ist in diesem Projekt **immer** zu nutzen. +- Dieses Repository wird ausschließlich lokal geführt und hat **kein Git-Repository**. +- Alle Arbeiten erfolgen ausschließlich innerhalb dieser Codebase: + - `/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide` + +## Rolle des Agents + +Du bist ein professioneller Interface Designer und Design-System-Architekt für große, skalierbare Webportale. + +Du bist dafür verantwortlich, den Styleguide fachlich sauber, kaskadierend, konsistent und langfristig skalierbar zu führen und zu erweitern. + +Deine Aufgabe ist nicht nur die visuelle Umsetzung einzelner Anforderungen, sondern die Weiterentwicklung eines belastbaren Design-Systems für große Webportale. + +## Projektziel + +In diesem Projekt wird ausschließlich ein Styleguide entwickelt und gepflegt, der skalierbare Designs und CSS für Webportale bereitstellt. + +Alle Änderungen müssen darauf einzahlen, dass der Styleguide: + +- sauber kaskadiert, +- langfristig wartbar bleibt, +- wiederverwendbare UI-Bausteine bereitstellt, +- konsistente Portal-Interfaces ermöglicht, +- keine lokalen Sonderlösungen erzeugt. + +## Verhältnis zum Skill `styleguide erstellung` + +Diese `AGENTS.md` definiert Rolle, Projektziel und Projektgrenze. + +Die detaillierten Regeln zur Styleguide-Struktur, Architekturhaltung, Tokens, Components, Patterns, Dokumentation, Scope, Konsistenzcheck und Eskalation stehen im Skill `styleguide erstellung` und sind verbindlich. + +Bei Konflikten gilt: + +1. Projektgrenze in dieser `AGENTS.md` +2. Skill `styleguide erstellung` +3. konkrete Nutzeraufgabe + +## Projektgrenze + +- Keine Dateien außerhalb dieser Codebase lesen oder ändern. +- Bei unklaren Pfaden, gemischten Fundstellen oder Aufgaben außerhalb des Styleguides: stoppen und Rückfrage stellen. \ No newline at end of file diff --git a/components/cards.html b/components/cards.html new file mode 100644 index 0000000..bf1f8fb --- /dev/null +++ b/components/cards.html @@ -0,0 +1,115 @@ + + + + + + Styleguide – Cards + + + + +

Components – Cards

+ + + + + + + + + + +
+

Component: Card

+ +
+ +
+
+
Card Header
+
+ +
+

+ Standard Card mit Header und hellem Body-Segment. +

+
+
+ +
+
+
Alternative Header
+
+ +
+

+ Alternative Farbvariante des Header-Segments. +

+
+
+ +
+
+
Darkbrown Header
+
+ +
+

+ Kein weißer Trenner zwischen darkbrown und hellem Segment. +

+
+
+ +
+
+ + +
+

Component: Group Card

+ +
+ +
+
+
Card in Group
+
+ +
+

+ Group Cards bündeln mehrere zusammengehörige Cards. +

+
+
+ +
+
+
Weitere Card
+
+ +
+

+ Die Group Card ist eine eigenständige Component. +

+
+
+ +
+
+ + +
+

Component: Transparent Card

+ +
+ +
+

+ Transparente Card ohne Padding. +

+
+ +
+
+ + + \ No newline at end of file diff --git a/components/charts.html b/components/charts.html new file mode 100644 index 0000000..b7807d9 --- /dev/null +++ b/components/charts.html @@ -0,0 +1,46 @@ + + + + + + Styleguide – Charts + + + + +

Components – Charts

+ +
+

Component: Score-Balken / Median-Marker

+ +
+
+

Label

+
+
+
+
+
+ +
+

Label

+
+
+
+
+
+ +
+

Label

+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/components/data-display.html b/components/data-display.html new file mode 100644 index 0000000..4b463cd --- /dev/null +++ b/components/data-display.html @@ -0,0 +1,52 @@ + + + + + + Styleguide – Data Display + + + + +

Components – Data Display

+ + + + + + +
+ +

Component: Data Table

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
KennzahlWertPeer-Median
PE ?7.711.7
PE Forward ?8.69.7
PEG Forward ?1.231.43
+ +
+ + + \ No newline at end of file diff --git a/components/interactive-elements.html b/components/interactive-elements.html new file mode 100644 index 0000000..a3e27d4 --- /dev/null +++ b/components/interactive-elements.html @@ -0,0 +1,964 @@ + + + + + + Styleguide – Interactive Elements + + + + +

Components – Interactive Elements

+ + + + + + +
+

Component: Prozessbutton

+ +
+ + + +
+
+ + +
+

Component: Tasten-Navigation-gross

+ +
+ + + + + +
+
+ + +
+

Component: Tasten-Navigation-schmal

+ +
+ + + + +
+
+ + +
+

Component: Pulldown

+ + +
+
+

form-inactive-selectable

+ +
+ + + +
+
    + + + + + + + + +
  • + Menüpunkt 5 +
    • +
+
+
+
+ +
+

form-active / selected

+ +
+ + + +
+ + + +
+

Gesamtscore

+ + + + +
+ +
+

Aktienbewertung

+ + + + +
+ +
+ + + + + +
+
+
+
+ +
+

form-disabled

+ +
+
+ +
+ + + +
+

Component: Suchfeld

+ + +
+
+

form-inactive-selectable

+ + + + + + 0 Treffer + +
+ +
+

form-active / selected

+ + + + + + 12 Treffer + +
+ +
+

form-disabled

+ + + +
+
+
+ + +
+

Component: Eingabefeld einzeilig

+ +
+
+

form-inactive-selectable

+ +
+ +
+

form-active / selected

+ +
+ +
+

form-disabled

+ +
+
+
+ + +
+

Component: Eingabefeld mehrzeilig

+ +
+
+

form-inactive-selectable

+ +
+ +
+

form-active / selected

+ +
+ +
+

form-disabled

+ +
+
+
+ + +
+

Component: Kreuzchenfeld / Multiple Choice

+ + +
+ + + + + +
+
+ + +
+

Component: Radio Button / Single Choice

+ + +
+ + + + + +
+
+ + +
+

Component: Modus Schieber global

+ + +
+ + +
+

Component: Modus Schieber lokal

+ + +
+ + +
+

Component: Slider

+ +
+
+

form-active / selected

+ +
+
+
+ + +
+

Component: Sandwich-Menü-Button Portal (groß)

+ +
+
+ + +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+ +

Component: Sandwich-Menü-Button Objekt (klein)

+ +
+
+ + +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+ + +
+

Component: Fragezeichen-Icon

+ + + + + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. + + +
+ + + + + + + + + diff --git a/components/typography.html b/components/typography.html new file mode 100644 index 0000000..5e6b8b0 --- /dev/null +++ b/components/typography.html @@ -0,0 +1,30 @@ + + + + + + Styleguide – Typography + + + + +

Components – Typography

+ +
+

Component: Typography

+ +
+

Portal Titel

+

H1 Überschrift

+

H2 Überschrift

+

Body / Fließtext

+

Strong / hervorgehobener Text

+

Section Title

+

Bar Label

+

Table Label

+

Table Value

+
+
+ + + diff --git a/foundations.html b/foundations.html new file mode 100644 index 0000000..c265123 --- /dev/null +++ b/foundations.html @@ -0,0 +1,183 @@ + + + + + + Styleguide – Foundations + + + + +

Foundations

+ +
+

Colors

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameWertVerwendung
darkblue#4661A9Primäre Card-Kopfsegmente, Portalheader, Toggle-Handle sowie primäre Chart-Werte ohne Positiv-Negativ-Darstellung.
darkgreen#4D646EAlternative Card-Kopfsegmente.
darkbrown#665F57Gedämpfte alternative Card-Kopfsegmente.
light-grey#E2E5E9Card-Flächen, Card-Bodies, Formularflächen, Optionszeilen, inaktive Buttons, Sandwich-Menü-Flächen und Chart-/Score-Hintergründe.
medium-grey#D4D6DBAktive Standardbuttons, geöffnete Pulldown-Flächen, Hilfetext-Flächen, Fragezeichen-Icons, Referenzwerte in Charts sowie Entfernen-Button in Eingabefeldern.
dark-grey#7B879DAusgewählte Tab-Buttons als Fläche sowie Schriftfarbe für deaktivierte oder zurückgenommene Interaktionselemente.
white#FFFFFFStandardfläche von Buttons, Eingabefeldern, Pulldown-Triggern, Checkboxen, Radios, Toggle-Tracks und Card-Trennern.
signal-green#009101Positive Score-Balken und positive Chart-Werte.
signal-yellow#9C7A00Neutrale Score-Balken, neutrale Chart-Werte und Warnwerte in Tabellen.
signal-red#9B3B2FNegative Score-Balken und negative Chart-Werte.
font-dark#414959Standard-Schrift auf hellen Flächen, Achsen/Marker in Charts, Sandwich-Linien und Radio-Markierung.
font-light#FFFFFFSchrift auf dunklen Flächen, Portalheader, Card-Headern, Prozessbuttons und ausgewählten Tab-Buttons.
font-hyperlink#FF6900Links in Texten, Prozessbuttons und Page-Navigations-Cards.
process-inactive#FFAE79Inaktive Hintergrundfläche des Prozessbuttons.
background-purple#373C4AGlobaler Portalhintergrund.
background-purple-light#656C7DGroup Cards und gruppierende Card-Flächen.
transparenttransparentTransparenter Foundation-Wert für semantische Overlay-/Box-Varianten ohne Eigenfläche.
+
+ +
+

States

+ + + + + + + + + + + + + + + + +
NameWertVerwendung
form-areabackground: light-greyHintergrund von Formularbereichen, Optionszeilen und Formular-Preview-Flächen. Die Fläche gehört nicht zum einzelnen Formularelement.
form-activebackground: white; color: font-darkAktive oder ausgewählte Eingabefelder, Checkboxen, Radios, Pulldown-Trigger und Pulldown-Optionen. Bei Pulldowns zeigt die Zahl in Klammern die Anzahl gewählter Optionen.
form-inactive-selectablebackground: white; color: font-darkNicht aktive, aber auswählbare Formularfelder, Checkboxen, Radios und Pulldown-Trigger. Dieser Zustand nutzt keine Transparenz.
form-disabledbackground: white; color: dark-grey; opacity: disabled-opacityFachlich nicht verfügbare oder technisch deaktivierte Formularoptionen. Dieser Zustand ist nicht bedienbar.
pulldown-panel-openbackground: medium-greyGeö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.
overlay-panel-openbackground: medium-grey oder light-grey je nach KomponenteAusklappbare Overlays wie Pulldown-Panels, Hilfetexte und Sandwich-Menüs. Es ist immer nur das jeweils relevante Overlay geöffnet.
+
+ +
+

Typography

+ + + + + + + + + + + + + + + + + + + +
NameWertVerwendung
bodyOpen Sans, 1rem, RegularStandardtext im Portal.
brandOpen Sans, 1.6rem, RegularPortal-Brand im Portal Header.
h1Open Sans, 1.5rem, RegularHauptüberschriften; kleiner als Portal-Brand und 50% größer als Fließtext.
h2Open Sans, 1.25rem, RegularZwischenüberschriften; kleiner als H1 und 25% größer als Fließtext.
strongOpen Sans, 1rem, SemiboldHervorgehobener Text, Labels und Button-Text.
section-titleOpen Sans, 1rem, RegularSection-Titel; aktuell identisch mit body, aber separat benannt.
bar-labelOpen Sans, 1rem, SemiboldLabels bei Score-Balken.
table-labelOpen Sans, 0.8rem, RegularTabellen- und Grafikbeschriftungen sowie kurze Hilfetexte und Tooltip-Inhalte.
table-valueOpen Sans, 0.8rem, SemiboldHervorgehobene Tabellen- und Grafikwerte.
+
+ +
+

Spacing

+ + + + + + + + + + + + + + +
NameWertVerwendung
spacing-small0.3remKleine Abstände zwischen Interaktionselementen, Card-Segmenten, Pulldown-Optionen, Overlay-Triggern und eng zusammengehörigen Cards.
spacing-large1remGroße Abstände zwischen Cards und Gruppen.
card-segment-padding0.75rem vertikal / 1rem horizontal (Desktop), 0.5rem horizontal (Mobile)Innenabstand von Card-Segmenten; auf Mobile wird das horizontale Padding reduziert.
interaction-padding0.25rem vertikal / 1rem horizontalInnenabstand von Interaktionselementen.
+
+ +
+

Dimensions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameWertVerwendung
interaction-height2remEinheitliche Höhe für Buttons, Tabs, Pulldowns, Eingabefelder und Sandwich-Menü-Buttons.
compact-interaction-height1.5remEinheitliche Höhe für schmale Interaktionselemente wie Tasten-Navigation-schmal.
compact-interaction-padding0.15rem vertikal / 0.75rem horizontalInnenabstand schmaler Interaktionselemente.
small-interaction-element-size1.25remEigene Höhe und Breite kleiner Interaktionselemente wie Fragezeichen-Icon, Checkboxen und Radio Buttons.
disabled-opacity0.45Deckkraft für fachlich nicht verfügbare oder technisch deaktivierte Interaktionselemente.
sandwich-line-width1.25remLänge der Striche im Sandwich-Menü-Button.
sandwich-line-height4pxDicke der Striche im Sandwich-Menü-Button.
sandwich-line-gap3pxAbstand zwischen den Strichen im Sandwich-Menü-Button.
score-bar-height1remHöhe horizontaler Score-Balken.
score-marker-width6pxBreite des Median-Markers.
score-marker-heightscore-bar-height + 2pxMedian-Marker ragt oben und unten je 1px über den Score-Balken hinaus.
chart-height-bar24remBasis-Höhe für Bar Charts; in der Component wird sie proportional reduziert, die Chart-Höhe skaliert nicht mit der Breite.
chart-height-line18remBasis-Höhe für Line Charts; in der Component wird sie proportional reduziert, die Chart-Höhe skaliert nicht mit der Breite.
chart-axis-label-column-width4remBreite der Y-Achsenbeschriftungsspalte bei Charts.
chart-axis-label-gap5pxHorizontaler Abstand zwischen Y-Achsenbeschriftung und Y-Achse.
chart-bar-width2remBasisbreite von Balken in Bar Charts.
chart-grid-line-width1pxLinienstärke von Gridlines und Achsen in Charts.
chart-line-width2pxLinienstärke der Datenlinie im Line Chart.
input-label-width9remDesktop-Breite der Label-Spalte bei ein- und mehrzeiligen Eingabefeldern.
input-field-desktop-width400pxFixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview.
input-field-max-width600pxMaximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld).
search-field-width15.3remFixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich.
+
+ +
+

Radius

+ + + + + + + + + + + + + +
NameWertVerwendung
radius-card8pxCards, Group Cards, Formularflächen, Optionszeilen und geöffnete Overlay-Flächen.
radius-interaction4pxButtons, Eingabefelder, Pulldown-Trigger, Checkboxen und Modus-Schieber.
radius-graph-bar2pxScore-Balken und Graphik-Balken.
+
+ +
+

Shadows / Borders

+ + + + + + + + + + + + + +
NameWertVerwendung
shadow-nonenoneKein Schatten für nicht-overlay Flächen.
shadow-overlay0 10px 24px rgba(0, 0, 0, 0.22)Standard-Schatten für aufklappbare Flächen wie Pulldown-, Menü- und Help-Panels.
border-nonenoneEs werden keine Borders verwendet.
+
+ + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..18c86d7 --- /dev/null +++ b/index.html @@ -0,0 +1,61 @@ + + + + + + Portal Styleguide + + + + +
+ +

Portal Styleguide

+ +
+

Foundations

+ + +
+ +
+

Components

+ + +
+ +
+

Patterns

+ + +
+ +
+

Layouts

+ + +
+ +
+ + + diff --git a/patterns/card-gruppe-mit-tastennavigation.html b/patterns/card-gruppe-mit-tastennavigation.html new file mode 100644 index 0000000..9af65ca --- /dev/null +++ b/patterns/card-gruppe-mit-tastennavigation.html @@ -0,0 +1,98 @@ + + + + + + Styleguide – Pattern Card Gruppe mit Tastennavigation + + + + +

Pattern – Card Gruppe mit Tastennavigation

+
+

Pattern: Card Gruppe mit Tastennavigation

+ +
+
+ + + +
+ +
+
+
+
+
Card 1
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nunc sed velit dignissim sodales ut eu sem integer. Vitae congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar.

+
+
+
+ + + + +
+
+
+ + + + + diff --git a/patterns/card-listen-seite.html b/patterns/card-listen-seite.html new file mode 100644 index 0000000..23dee15 --- /dev/null +++ b/patterns/card-listen-seite.html @@ -0,0 +1,948 @@ + + + + + + Styleguide – Layout Card Listen Seite + + + + +

Layout – Card Listen Seite

+ +
+
+
+

ValueStockFinder

+ + +
+ +
+ + +
+ Admin + Logout +
+
+
+ +
+
+
+ + +
+
    + + + + +
  • Menüpunkt 5
    • +
+
+
+ +
+ + +
+
    + + + + +
  • Menüpunkt 5
    • +
+
+
+ +
+ + + + + 0 Treffer +
+
+ +
+ + + + + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. + + +
+
+ +
+

Listenübersicht

+ + + + Hilfe zur Listenansicht und zu den Filteroptionen. + + +
+ +
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis purus sed urna ultricies, id aliquet justo malesuada. Morbi luctus, augue in cursus ultrices, justo lorem posuere mi, at suscipit est turpis vitae ipsum. Praesent posuere nisl a nisl fermentum, nec feugiat odio volutpat. Nam id dictum justo, eget dapibus arcu. Fusce varius justo nec nibh gravida, sed dignissim est tempor.

+
+
+ +
+
+
+
Objekt 1
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+ + +
+
+
+
+
+
Objekt 2
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+ + +
+
+
+
+
+
Objekt 3
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+ + +
+
+
+
+
+
Objekt 4
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+ + +
+
+
+
+
+
Objekt 5
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+ + +
+
+
+
+
+
Objekt 6
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+ + +
+
+
+
+
+
Objekt 7
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+ + +
+
+
+
+
+
Objekt 8
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+ + +
+
+
+
+
+
Objekt 9
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+ + +
+
+
+
+
+
Objekt 10
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+ + +
+
+
+
+
+
Objekt 11
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+ + +
+
+
+
+
+
Objekt 12
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+ + +
+
+
+
+
+
Objekt 13
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+ + +
+
+
+
+
+
Objekt 14
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+ + +
+
+
+
+
+
Objekt 15
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+ + +
+
+
+
+
+
Objekt 16
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+ + +
+
+
+
+
+
Objekt 17
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+ + +
+
+
+
+
+
Objekt 18
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+ + +
+
+
+
+
+
Objekt 19
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+ + +
+
+
+
+
+
Objekt 20
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

+
+ + +
+
+
+
+ +
+
+ +
+
+
+ + + + + diff --git a/patterns/formular-mit-abschnitten.html b/patterns/formular-mit-abschnitten.html new file mode 100644 index 0000000..ac6e0dd --- /dev/null +++ b/patterns/formular-mit-abschnitten.html @@ -0,0 +1,177 @@ + + + + + + Styleguide – Pattern Formular mit Abschnitten + + + + +

Pattern – Formular mit Abschnitten

+
+

Pattern: Formular mit Abschnitten

+ +
+
+
+

Formular

+ +
+

Persoenliche Auswahl

+ +

Bitte waehlen Sie Ihre bevorzugte Kontaktart fuer die Rueckmeldung.

+ +
+ + + +
+
+ +
+

Optionale Angaben

+ +

Bitte markieren Sie die zusaetzlichen Informationen, die wir beruecksichtigen sollen.

+ +
+ + + +
+
+ +
+

Freitext und Details

+ +

Bitte erfassen Sie einen kurzen Betreff und eine genauere Beschreibung Ihres Anliegens.

+ +
+ + + +
+
+
+ +
+
+ + +
+
+
+
+
+ + + + + diff --git a/patterns/navigation-card.html b/patterns/navigation-card.html new file mode 100644 index 0000000..15024d4 --- /dev/null +++ b/patterns/navigation-card.html @@ -0,0 +1,29 @@ + + + + + + Styleguide – Pattern Navigation Card + + + + +

Pattern – Navigation Card

+
+

Pattern: Navigation Card

+ +
+
+ +
+
+
+ + + diff --git a/patterns/object-card.html b/patterns/object-card.html new file mode 100644 index 0000000..9b98d20 --- /dev/null +++ b/patterns/object-card.html @@ -0,0 +1,157 @@ + + + + + + Styleguide – Pattern Object Card + + + + +

Pattern – Object Card

+
+

Pattern: Object Card

+

Hinweis: Die hier gezeigten sechs Karten sind nur eine illustrative Demo zur Prüfung des responsiven Verhaltens. Für das Pattern selbst ist die Anzahl der Karten nicht vorgegeben und hängt vom konkreten Use Case ab.

+ +
+
+
+
Alcon Inc.
+
+ +
+ Menüpunkt + Menüpunkt + Menüpunkt +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.

+
+ + +
+
+
+ +
+
Alcon Inc.
MenüpunktMenüpunktMenüpunkt
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.

+
+ +
+
Alcon Inc.
MenüpunktMenüpunktMenüpunkt
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.

+
+ +
+
Alcon Inc.
MenüpunktMenüpunktMenüpunkt
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.

+
+ +
+
Alcon Inc.
MenüpunktMenüpunktMenüpunkt
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.

+
+ +
+
Alcon Inc.
MenüpunktMenüpunktMenüpunkt
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.

+
+
+
+ + + + + diff --git a/patterns/object-group-card.html b/patterns/object-group-card.html new file mode 100644 index 0000000..d889f7b --- /dev/null +++ b/patterns/object-group-card.html @@ -0,0 +1,93 @@ + + + + + + Styleguide – Pattern Object Group Card + + + + +

Pattern – Object Group Card

+
+

Pattern: Object Group Card

+

Hinweis: Die hier gezeigten sechs Karten sind nur eine illustrative Demo zur Prüfung des responsiven Verhaltens. Für das Pattern selbst ist die Anzahl der Karten nicht vorgegeben und hängt vom konkreten Use Case ab.

+ +
+
+
+
Alcon Inc.
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.

+
+ +
+
+
+ +
+
Alcon Inc.
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.

+
+ +
+
Alcon Inc.
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.

+
+ +
+
Alcon Inc.
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.

+
+ +
+
Alcon Inc.
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.

+
+ +
+
Alcon Inc.
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.

+
+
+
+ + + + + diff --git a/patterns/options-row.html b/patterns/options-row.html new file mode 100644 index 0000000..5cc2de7 --- /dev/null +++ b/patterns/options-row.html @@ -0,0 +1,377 @@ + + + + + + Styleguide – Pattern Options Row + + + + +

Pattern – Options Row

+
+

Pattern: Options Row

+ +

+ Desktop/Tablet: gleiche Breite wie das zugehörige Element; linke Optionen linksbündig, rechte Optionen rechtsbündig. +

+ +

+ Mobile: rechte Optionen werden zum oberen Segment, linke Optionen zum unteren Segment; linke Optionen brechen innerhalb der verfügbaren Breite um. +

+ +
+ +
+
+ + +
+
    + + + + + + + + +
  • + Menüpunkt 5 +
    • +
+
+
+ +
+ + +
+
    + + + + + + + + +
  • + Menüpunkt 5 +
    • +
+
+
+ +
+ + + + + 0 Treffer +
+
+ +
+ + + + + + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. + + +
+ +
+
+ + + + + diff --git a/patterns/portal-header.html b/patterns/portal-header.html new file mode 100644 index 0000000..fe88a4f --- /dev/null +++ b/patterns/portal-header.html @@ -0,0 +1,492 @@ + + + + + + Styleguide – Pattern Portal Header + + + + +

Pattern – Portal Header

+ +
+

Pattern: Portal Header

+ +

+ Desktop/Tablet: Header skaliert über die verfügbare Breite. +

+ +

+ Mobile: gleiche Struktur, ebenfalls volle verfügbare Breite; kein eigener visueller Zustand. +

+ +
+

+ Variante: Portal Header ohne Options Row +

+ +
+
+

ValueStockFinder

+ + +
+ +
+ + +
+ Admin + Logout +
+
+
+ +

+ Nächstes Element (Abstand nach unten: spacing-large) +

+
+ +
+

+ Variante: Portal Header mit Options Row +

+ +
+
+

ValueStockFinder

+ + +
+ +
+ + +
+ Admin + Logout +
+
+
+ +
+
+
+ + +
+
    + + + + + + + + +
  • + Menüpunkt 5 +
    • +
+
+
+ +
+ + +
+
    + + + + + + + + +
  • + Menüpunkt 5 +
    • +
+
+
+ +
+ + + + + 0 Treffer +
+
+ +
+ + + + + + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. + + +
+
+ +

+ Nächstes Element (Abstand nach unten: spacing-large) +

+
+
+ + + + + diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html new file mode 100644 index 0000000..ede777b --- /dev/null +++ b/semantic-tokens-components.html @@ -0,0 +1,252 @@ + + + + + + Styleguide – Semantic Tokens Components + + + + +

Semantic Tokens Components

+ +
+

Cards

+ +

Cards

+ + + + + + + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-cardcolor-light-greyGrundfläche der Card.
surface-card-bodycolor-light-greyFläche im Body-Segment der Card.
surface-card-header-primarycolor-darkbluePrimärer Header-Hintergrund.
surface-card-header-alternativecolor-darkgreenAlternativer Header-Hintergrund.
surface-card-header-alternative2color-darkbrownZweite alternative Header-Fläche (im CSS derzeit als surface-card-header-muted geführt).
divider-card-segmentcolor-whiteTrenner zwischen Segmenten.
text-card-headercolor-font-lightHeader-Textfarbe.
text-card-bodycolor-font-darkStandard-Textfarbe im Body.
+ +

Group Card

+ + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-card-groupcolor-background-purple-lightFläche der eigentlichen Group Card (heller Container, der mehrere Cards gruppiert).
+ +

Text Group Box

+ + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-card-transparentcolor-transparentTransparente Fläche der Text-Group-Box ohne Card-Segmente.
text-group-boxcolor-font-lightTextfarbe der Text-Group-Box (im CSS derzeit als text-card-transparent geführt).
+
+ +
+

Interactive Elements

+ +

Button

+ + + + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-button-activecolor-medium-greyFläche aktiver Standard-Buttons.
surface-button-inactivecolor-light-greyFläche inaktiver Standard-Buttons.
surface-button-processcolor-font-hyperlinkFläche von Prozess-/CTA-Buttons.
surface-button-process-inactivecolor-process-inactiveFläche inaktiver Prozess-/CTA-Buttons.
text-button-processcolor-font-lightTextfarbe auf Prozess-/CTA-Buttons.
+ +

Tabs

+ + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-tab-selectedcolor-dark-greyFläche des ausgewählten Tabs.
surface-tab-unselectedcolor-whiteFläche nicht ausgewählter Tabs.
text-tab-selectedcolor-font-lightTextfarbe des ausgewählten Tabs.
text-tab-unselectedcolor-dark-greyTextfarbe nicht ausgewählter Tabs.
+ +

Form Controls

+ + + + + + + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-control-defaultcolor-whiteStandardfläche für Input-/Auswahl-Controls.
surface-control-activecolor-whiteFläche aktiver Controls.
surface-control-inactivecolor-whiteFläche inaktiver, aber wählbarer Controls.
surface-control-disabledcolor-whiteFläche deaktivierter Controls.
text-control-defaultcolor-font-darkStandard-Textfarbe in Controls.
text-control-disabledcolor-dark-greyTextfarbe deaktivierter Controls.
surface-input-clearcolor-medium-greyFläche des Clear-Buttons in Inputs.
layout-input-label-widthdimension-input-label-widthDesktop-Breite der Label-Spalte für ein- und mehrzeilige Eingabefelder.
layout-input-field-desktop-widthdimension-input-field-desktop-widthFixe Desktop-Breite für ein- und mehrzeilige Eingabefelder.
layout-input-field-max-widthdimension-input-field-max-widthMaximale Breite für ein- und mehrzeilige Eingabefelder (ohne Suchfeld).
layout-search-field-widthdimension-search-field-widthFixe Breite des Suchfeld-Inputs.
+ +

Pulldown and Menu

+ + + + + + + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-pulldown-panelcolor-light-greyFläche geöffneter Pulldown-Panels.
icon-pulldown-chevroncurrentColor-basierte VerlaufsgrafikChevron-Icon für Pulldown-Trigger und Select-Felder; folgt der aktuellen Textfarbe.
layout-pulldown-panel-padding-inlinecompact-interaction-padding-horizontalHorizontaler Innenabstand des geöffneten Pulldown-Panels.
layout-pulldown-option-padding-inlinecompact-interaction-padding-horizontalHorizontaler Innenabstand der einzelnen Pulldown-Optionen.
layout-pulldown-padding-inlinecompact-interaction-padding-horizontalInnenabstand links für Pulldown-Trigger und Select-Felder.
layout-pulldown-chevron-offsetcompact-interaction-padding-horizontalRechter Innenabstand des Chevron-Icons im Pulldown.
layout-pulldown-chevron-reserved-spacespacing-largeReservierte Breite zwischen Pulldown-Text und rechtem Chevron-Bereich.
surface-menu-panel-portalcolor-light-greyFläche des Portal-Sandwich-Menü-Panels (groß).
surface-menu-panel-objectcolor-light-greyFläche des Objekt-Sandwich-Menü-Panels (klein).
text-menu-link-portalcolor-font-darkLinktextfarbe im Portal-Sandwich-Menü.
text-menu-link-objectcolor-font-darkLinktextfarbe im Objekt-Sandwich-Menü.
+ +

Toggle / Checkbox / Radio / Help

+ + + + + + + + + + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-toggle-trackcolor-medium-greyToggle-Track-Fläche.
surface-toggle-handlecolor-darkblueToggle-Handle-Fläche.
layout-mode-toggle-local-heightcompact-interaction-heightHöhe des Modus Schieber lokal; entspricht dem kompakten Interaktionsmaß (wie Tasten-Navigation-schmal).
layout-mode-toggle-local-width-factor3Breitenfaktor des Modus Schieber lokal relativ zur lokalen Höhe für eine proportionale Kompaktvariante.
surface-checkbox-defaultcolor-light-greyStandardfläche der Checkbox.
surface-checkbox-on-contextcolor-whiteCheckbox-Fläche auf Kontextflächen.
surface-radio-defaultcolor-whiteStandardfläche des Radio-Buttons.
icon-radio-markcolor-font-darkMarkierungsfarbe im Radio-Button.
surface-help-iconcolor-medium-greyFläche des Help-Icons.
surface-help-panelcolor-light-greyFläche des Help-Panels.
text-help-iconcolor-font-darkTextfarbe im Help-Icon.
text-help-panelcolor-font-darkTextfarbe im Help-Panel.
icon-sandwich-line-portalcolor-font-darkLinienfarbe des Portal-Sandwich-Icons (groß).
icon-sandwich-line-objectcolor-font-darkLinienfarbe des Objekt-Sandwich-Icons (klein).
+ +

Slider

+ + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-slider-trackcolor-medium-greyGrundfläche des Slider-Strichs.
surface-slider-progresscolor-dark-greyAusgewählter Bereich links vom Slider-Knopf.
surface-slider-thumbcolor-dark-greyGefüllte Fläche des Slider-Knopfs (ohne Linie).
+ +

Preview Area

+ + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-form-previewcolor-light-greyFläche von Formular-/Control-Preview-Bereichen.
text-hyperlinkcolor-font-hyperlinkLinkfarbe in interaktiven Texten.
+
+ +
+

Charts

+ +

Score Bar

+ + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-score-bar-trackcolor-light-greyHintergrund der Score-Bar.
chart-value-positivecolor-signal-greenFüllfarbe positiver Werte.
chart-value-neutralcolor-signal-yellowFüllfarbe neutraler Werte.
chart-value-negativecolor-signal-redFüllfarbe negativer Werte.
chart-median-linecolor-font-darkFarbe der Median-Markierung.
+ +

Bar / Line Chart

+ + + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-chart-areacolor-light-greyGrundfläche des Charts.
chart-value-primarycolor-darkbluePrimäre Datenreihe.
chart-value-referencecolor-medium-greyReferenz-/Vergleichsreihe.
chart-grid-linecolor-medium-greyGridline-Farbe.
chart-axis-linecolor-font-darkAchsenfarbe.
chart-marker-linecolor-font-darkMarker-/Hilfslinienfarbe.
text-chart-defaultcolor-font-darkTextfarbe in Achsen/Labels.
+
+ +
+

Data Display

+ +

Data Table Small

+ + + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-data-tablecolor-light-greyGesamtfläche der Tabelle.
surface-data-table-headercolor-light-greyFläche der Tabellenkopfzeile.
surface-data-table-cellcolor-light-greyFläche von Tabellenzellen.
surface-data-table-help-iconcolor-medium-greyFläche des Help-Icons im Tabellenkontext.
text-data-table-defaultcolor-font-darkStandard-Textfarbe in Tabellenzellen.
text-data-table-warningcolor-signal-yellowWarnwertfarbe in Tabellenzellen.
text-data-table-help-iconcolor-font-darkTextfarbe im Tabellen-Help-Icon.
+
+ +
+

Typography

+ +

Typography Preview

+ + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
text-typography-previewcolor-font-lightTextfarbe in der Typografie-Preview.
+
+ +
+

Patterns

+ +

Portal Header

+ + + + + + + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-portal-headercolor-darkblueHeader-Grundfläche.
surface-portal-header-tabcolor-darkblueFläche nicht aktiver Header-Tabs.
surface-portal-header-tab-activecolor-light-greyFläche aktiver Header-Tabs.
surface-portal-header-menu-panelsurface-menu-panel-portalAlias auf Portal-Menü-Panel-Fläche aus Interactive Elements.
surface-portal-header-menu-triggersurface-control-defaultAlias auf Standard-Control-Fläche aus Interactive Elements.
text-portal-header-brandcolor-font-lightTextfarbe der Brand.
font-size-portal-header-brandcalc(font-size-brand * 1.1)Schriftgröße der Brand im Portal Header (10% größer als Standard-Brand).
text-portal-header-tabcolor-font-lightTextfarbe nicht aktiver Header-Tabs.
text-portal-header-tab-activecolor-font-darkTextfarbe aktiver Header-Tabs.
text-portal-header-menu-linktext-menu-link-portalAlias auf Portal-Menü-Link-Textfarbe.
icon-portal-header-menu-lineicon-sandwich-line-portalAlias auf Portal-Sandwich-Linienfarbe.
+ +

Options Row

+ + + + + + + + + + + + + + + + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-options-rowcolor-light-greyGrundfläche der Options Row.
surface-options-row-controlsurface-control-defaultAlias auf Standard-Control-Fläche innerhalb der Options Row.
surface-options-row-control-selectedsurface-control-activeAlias auf aktive Control-Fläche innerhalb der Options Row.
surface-options-row-input-clearsurface-input-clearAlias auf Clear-Button-Fläche im Input der Options Row.
surface-options-row-toggle-tracksurface-toggle-trackAlias auf Toggle-Track-Fläche innerhalb der Options Row.
surface-options-row-toggle-handlesurface-toggle-handleAlias auf Toggle-Handle-Fläche innerhalb der Options Row.
surface-options-row-slider-tracksurface-slider-trackAlias auf Slider-Track-Fläche innerhalb der Options Row.
surface-options-row-slider-progresssurface-slider-progressAlias auf den ausgewählten Slider-Bereich innerhalb der Options Row.
surface-options-row-slider-thumbsurface-slider-thumbAlias auf die Slider-Knopf-Fläche innerhalb der Options Row.
surface-options-row-help-iconsurface-help-iconAlias auf Help-Icon-Fläche innerhalb der Options Row.
surface-options-row-help-panelsurface-help-panelAlias auf Help-Panel-Fläche innerhalb der Options Row.
divider-options-row-mobilecolor-whiteTrennerfarbe zwischen Segmenten im mobilen Layout der Options Row.
text-options-row-defaulttext-control-defaultAlias auf Standard-Textfarbe für Controls in der Options Row.
text-options-row-placeholdertext-control-disabledAlias auf Placeholder-/Disabled-Textfarbe in der Options Row.
text-options-row-help-iconcolor-font-lightTextfarbe im Help-Icon der Options Row.
text-options-row-help-paneltext-help-panelAlias auf Help-Panel-Textfarbe der Options Row.
text-options-row-descriptioncolor-font-lightTextfarbe der beschreibenden Hinweistexte oberhalb der Options Row.
layout-options-row-margin-topspacing-smallAbstand oberhalb der Options Row.
layout-options-row-main-gapspacing-largeHorizontaler Abstand zwischen linker und rechter Aktionsgruppe.
layout-options-row-group-gapspacing-smallAbstand zwischen Controls innerhalb der linken und rechten Gruppe.
+ +

Object Card

+ + + + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
layout-object-card-min-widthdimension-object-card-min-widthMindestbreite der Object Card im horizontalen Desktop-Layout.
layout-object-card-max-widthdimension-object-card-max-widthMaximalbreite der Object Card im horizontalen Desktop-Layout.
layout-object-card-heightdimension-object-card-heightFixe Höhe der Object Card im Desktop-Layout.
layout-object-card-mobile-widthdimension-object-card-mobile-widthVolle verfügbare Breite der Object Card auf Mobile.
layout-object-card-mobile-heightdimension-object-card-mobile-heightInhaltsabhängige Höhe der Object Card auf Mobile.
layout-object-card-desktop-breakpointdimension-object-card-desktop-breakpointBreakpoint, ab dem die Desktop-Maße der Object Card aktiv sind.
layout-object-card-content-growdimension-object-card-content-growFlex-Grow-Wert für das vorletzte Segment, damit das Action-Segment unten in der Card bleibt.
surface-object-card-lower-segmentcolor-whiteHintergrundfläche der unteren zwei Segmente der Object Card.
+ +

Navigation Card

+ + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-navigation-cardcolor-whiteGrundfläche der Navigation Card.
surface-navigation-card-bodycolor-whiteFläche im Body-Segment der Navigation Card.
+ +

Card Gruppe mit Tastennavigation

+ + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-content-block-card-titlecolor-light-greyHintergrundfläche des oberen Titel-Segments der Inhaltsblock-Karte.
surface-content-block-card-contentcolor-whiteHintergrundfläche des unteren Inhalts-Segments der Inhaltsblock-Karte.
text-content-block-card-titlecolor-font-darkTextfarbe im Titel-Segment der Inhaltsblock-Karte.
text-content-block-card-contentcolor-font-darkTextfarbe im Inhalts-Segment der Inhaltsblock-Karte.
+
+ + + diff --git a/styleguide.css b/styleguide.css new file mode 100644 index 0000000..f5ab647 --- /dev/null +++ b/styleguide.css @@ -0,0 +1,2182 @@ +/* ========================================================= */ +/* Foundations */ +/* ========================================================= */ + +:root { + /* Colors */ + --color-darkblue: #4661A9; + --color-midblue: #657FBA; + --color-darkgreen: #4D646E; + --color-darkbrown: #665F57; + --color-light-grey: #E2E5E9; + --color-medium-grey: #CDCFD4; + --color-dark-grey: #7B879D; + --color-white: #FFFFFF; + --color-process-inactive: #FFAE79; + --color-signal-green: #009101; + --color-signal-yellow: #9C7A00; + --color-signal-red: #9B3B2F; + --color-font-dark: #414959; + --color-font-light: #FFFFFF; + --color-font-hyperlink: #FF6900; + --color-background-purple: #373C4A; + --color-background-purple-light: #656C7D; + --color-transparent: transparent; + + /* Semantic component tokens: Cards */ + --surface-card: var(--color-light-grey); + --surface-card-body: var(--color-light-grey); + --surface-card-group: var(--color-background-purple-light); + --surface-card-transparent: var(--color-transparent); + --surface-card-header-primary: var(--color-darkblue); + --surface-card-header-alternative: var(--color-darkgreen); + --surface-card-header-muted: var(--color-darkbrown); + --divider-card-segment: var(--color-white); + --text-card-header: var(--color-font-light); + --text-card-body: var(--color-font-dark); + --text-card-transparent: var(--color-font-light); + --layout-card-body-content-justify: flex-start; + --layout-card-segment-content-gap: var(--spacing-small); + + /* Semantic component tokens: Interactive elements */ + --surface-form-preview: var(--color-light-grey); + --surface-control-default: var(--color-white); + --surface-control-active: var(--color-white); + --surface-control-inactive: var(--color-white); + --surface-control-disabled: var(--color-white); + --surface-button-active: var(--color-medium-grey); + --surface-button-process: var(--color-font-hyperlink); + --surface-button-process-inactive: var(--color-process-inactive); + --surface-button-inactive: var(--color-light-grey); + --surface-tab-selected: var(--color-dark-grey); + --surface-tab-unselected: var(--color-white); + --surface-tab-compact-background: var(--surface-form-preview); + --surface-tab-compact-unselected: var(--color-medium-grey); + --surface-input-clear: var(--color-medium-grey); + --surface-toggle-track: var(--color-medium-grey); + --surface-toggle-handle: var(--color-darkblue); + --surface-menu-panel-portal: var(--color-light-grey); + --surface-menu-panel-object: var(--color-light-grey); + --surface-help-icon: var(--color-medium-grey); + --surface-help-panel: var(--color-light-grey); + --surface-pulldown-panel: var(--color-light-grey); + --surface-slider-track: var(--color-medium-grey); + --surface-slider-progress: var(--color-dark-grey); + --surface-slider-thumb: var(--color-dark-grey); + --surface-checkbox-default: var(--color-light-grey); + --surface-checkbox-on-context: var(--color-white); + --surface-radio-default: var(--color-white); + --layout-pulldown-panel-padding-inline: var(--compact-interaction-padding-horizontal); + --layout-pulldown-option-padding-inline: var(--compact-interaction-padding-horizontal); + --layout-pulldown-padding-inline: var(--compact-interaction-padding-horizontal); + --layout-pulldown-chevron-offset: var(--compact-interaction-padding-horizontal); + --layout-pulldown-chevron-reserved-space: var(--spacing-large); + --layout-input-label-width: var(--dimension-input-label-width); + --layout-input-field-desktop-width: var(--dimension-input-field-desktop-width); + --layout-input-field-max-width: var(--dimension-input-field-max-width); + --layout-search-field-width: var(--dimension-search-field-width); + --layout-mode-toggle-local-height: var(--compact-interaction-height); + --layout-mode-toggle-local-width-factor: 3; + --layout-mode-toggle-width: calc(var(--interaction-height) * 3.5); + --layout-help-panel-width: calc(var(--interaction-height) * 8); + --text-control-default: var(--color-font-dark); + --text-control-disabled: var(--color-dark-grey); + --text-button-process: var(--color-font-light); + --text-tab-selected: var(--color-font-light); + --text-tab-unselected: var(--color-dark-grey); + --text-menu-link-portal: var(--color-font-dark); + --text-menu-link-object: var(--color-font-dark); + --text-help-icon: var(--color-font-dark); + --text-help-panel: var(--color-font-dark); + --text-hyperlink: var(--color-font-hyperlink); + --icon-pulldown-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M2 2l4 4 4-4' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E"); + --icon-sandwich-line-portal: var(--color-font-dark); + --icon-sandwich-line-object: var(--color-font-dark); + --icon-radio-mark: var(--color-font-dark); + + /* Semantic component tokens: Charts */ + --surface-score-bar-track: var(--color-light-grey); + --surface-chart-area: var(--color-light-grey); + --chart-value-positive: var(--color-signal-green); + --chart-value-neutral: var(--color-signal-yellow); + --chart-value-negative: var(--color-signal-red); + --chart-value-primary: var(--color-darkblue); + --chart-value-reference: var(--color-medium-grey); + --chart-grid-line: var(--color-medium-grey); + --chart-axis-line: var(--color-font-dark); + --chart-marker-line: var(--color-font-dark); + --chart-median-line: var(--color-font-dark); + --text-chart-default: var(--color-font-dark); + + /* Semantic component tokens: Data display */ + --surface-data-table: var(--color-light-grey); + --surface-data-table-header: var(--color-light-grey); + --surface-data-table-cell: var(--color-light-grey); + --surface-data-table-help-icon: var(--color-medium-grey); + + --text-data-table-default: var(--color-font-dark); + --text-data-table-warning: var(--color-signal-yellow); + --text-data-table-help-icon: var(--color-font-dark); + + /* Semantic component tokens: Typography */ + --text-typography-preview: var(--color-font-light); + --layout-preview-align-items: flex-start; + + /* Semantic pattern tokens: Portal header */ + --surface-portal-header: var(--color-darkblue); + --surface-portal-header-tab: var(--color-midblue); + --surface-portal-header-tab-active: var(--color-light-grey); + --surface-portal-header-menu-panel: var(--surface-menu-panel-portal); + --surface-portal-header-menu-trigger: var(--surface-control-default); + --text-portal-header-brand: var(--color-font-light); + --font-size-portal-header-brand: calc(var(--font-size-brand) * 1.1); + --text-portal-header-tab: var(--color-font-light); + --text-portal-header-tab-active: var(--color-font-dark); + --text-portal-header-menu-link: var(--text-menu-link-portal); + --icon-portal-header-menu-line: var(--icon-sandwich-line-portal); + --surface-options-row: var(--color-light-grey); + --surface-options-row-control: var(--surface-control-default); + --surface-options-row-control-selected: var(--surface-control-active); + --surface-options-row-input-clear: var(--surface-input-clear); + --surface-options-row-toggle-track: var(--surface-toggle-track); + --surface-options-row-toggle-handle: var(--surface-toggle-handle); + --surface-options-row-slider-track: var(--surface-slider-track); + --surface-options-row-slider-progress: var(--surface-slider-progress); + --surface-options-row-slider-thumb: var(--surface-slider-thumb); + --surface-options-row-help-icon: var(--surface-help-icon); + --surface-options-row-help-panel: var(--surface-help-panel); + --divider-options-row-mobile: var(--color-white); + --text-options-row-default: var(--text-control-default); + --text-options-row-placeholder: var(--text-control-disabled); + --text-options-row-help-icon: var(--color-font-light); + --text-options-row-help-panel: var(--text-help-panel); + --text-options-row-description: var(--color-font-light); + --layout-options-row-margin-top: var(--spacing-small); + --layout-options-row-main-gap: var(--spacing-large); + --layout-options-row-group-gap: var(--spacing-small); + --layout-options-row-mode-toggle-width: 7rem; + --layout-options-row-help-panel-width: 16rem; + --layout-object-card-min-width: var(--dimension-object-card-min-width); + --layout-object-card-max-width: var(--dimension-object-card-max-width); + --layout-object-card-height: var(--dimension-object-card-height); + --layout-object-card-content-grow: var(--dimension-object-card-content-grow); + --layout-object-card-mobile-width: var(--dimension-object-card-mobile-width); + --layout-object-card-mobile-height: var(--dimension-object-card-mobile-height); + --layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint); + --layout-object-card-actions-margin-top: var(--spacing-small); + --surface-object-card-lower-segment: var(--color-white); + --surface-navigation-card: var(--color-white); + --surface-navigation-card-body: var(--color-white); + --surface-content-block-card-title: var(--color-light-grey); + --surface-content-block-card-content: var(--color-white); + --text-content-block-card-title: var(--color-font-dark); + --text-content-block-card-content: var(--color-font-dark); + + /* Typography */ + --font-family-base: "Open Sans", sans-serif; + --font-size-base: 1rem; + --font-size-small: 0.8rem; + --font-size-brand: 1.6rem; + --font-size-h1: 1.5rem; + --font-size-h2: 1.25rem; + --font-weight-regular: 400; + --font-weight-semibold: 600; + --line-height-base: 1.5; + + /* Spacing */ + --spacing-small: 0.3rem; + --spacing-large: 1rem; + --card-segment-padding-vertical: 0.75rem; + --card-segment-padding-horizontal: 1rem; + --card-segment-padding-horizontal-mobile: 0.5rem; + --interaction-padding-vertical: 0.25rem; + --interaction-padding-horizontal: 1rem; + + /* Dimensions */ + --interaction-height: 2rem; + --compact-interaction-height: 1.5rem; + --compact-interaction-padding-vertical: 0.15rem; + --compact-interaction-padding-horizontal: 0.75rem; + --small-interaction-element-size: 1.25rem; + --disabled-opacity: 0.7; + --sandwich-line-width: 1.25rem; + --sandwich-line-height: 4px; + --sandwich-line-gap: 3px; + --score-bar-height: 1rem; + --score-marker-width: 6px; + --score-marker-height: calc(var(--score-bar-height) + 2px); + --chart-height-bar: 24rem; + --chart-height-line: 18rem; + --chart-axis-label-column-width: 4rem; + --chart-axis-label-gap: 5px; + --chart-bar-width: 2rem; + --chart-grid-line-width: 1px; + --chart-line-width: 2px; + --chart-label-position-default: 50%; + --dimension-object-card-min-width: 395px; + --dimension-object-card-max-width: 550px; + --dimension-object-card-height: 600px; + --dimension-object-card-content-grow: 1; + --dimension-object-card-mobile-width: 100%; + --dimension-object-card-mobile-height: auto; + --dimension-object-card-desktop-breakpoint: 768px; + --dimension-input-label-width: 9rem; + --dimension-input-field-desktop-width: 400px; + --dimension-input-field-max-width: 600px; + --dimension-search-field-width: 15.3rem; + --dimension-slider-track-height: 6px; + --dimension-slider-thumb-size: 22px; + --dimension-slider-thumb-offset-top: -8px; + --radius-slider-track: 999px; + + /* Radius */ + --radius-card: 8px; + --radius-graph-bar: 2px; + --radius-interaction: 4px; + + /* Shadows */ + --shadow-none: none; + --shadow-overlay: 0 10px 24px rgba(0, 0, 0, 0.22); + --shadow-interaction-inset: none; + + /* Borders */ + --border-none: none; + --border-control: none; + + /* Runtime defaults */ + --layout-object-card-shared-width: auto; + --sg-slider-progress: 0%; + --chart-label-position: var(--chart-label-position-default); +} + +/* ========================================================= */ +/* Base */ +/* ========================================================= */ + +body { + font-family: var(--font-family-base); + font-size: var(--font-size-base); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-base); + color: var(--color-font-dark); + background: var(--color-background-purple); + margin: 0; + padding: var(--spacing-small); +} + +@media (max-width: 48rem) { + body { + padding: var(--spacing-small); + } +} + +section { + margin-bottom: var(--spacing-large); +} + +section + section { + margin-top: var(--spacing-large); +} + +.sg-main-heading { + margin: 0 0 var(--spacing-large) 0; + font-family: var(--font-family-base); + font-size: var(--font-size-brand); + font-weight: var(--font-weight-semibold); + line-height: var(--line-height-base); + color: var(--color-font-light); +} + +.sg-sub-heading { + margin: 0 0 var(--spacing-large) 0; + font-family: var(--font-family-base); + font-size: var(--font-size-base); + font-weight: var(--font-weight-semibold); + line-height: var(--line-height-base); +} + +.sg-text-on-dark { + color: var(--color-font-light); +} + +.sg-brand-title { + margin: 0 0 var(--spacing-large) 0; + font-family: var(--font-family-base); + font-size: var(--font-size-brand); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-base); +} + +.sg-heading-h1 { + margin: 0 0 calc(var(--spacing-large) - 0.5rem) 0; + font-family: var(--font-family-base); + font-size: var(--font-size-h1); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-base); +} + +.sg-heading-h2 { + margin: 0 0 var(--spacing-large) 0; + font-family: var(--font-family-base); + font-size: var(--font-size-h2); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-base); +} + +.sg-preview-label { + margin: 0 0 var(--spacing-small) 0; + font-family: var(--font-family-base); + font-size: var(--font-size-small); + font-weight: var(--font-weight-semibold); + line-height: var(--line-height-base); + color: var(--color-font-light); +} + +.sg-preview-area { + display: inline-flex; + flex-wrap: wrap; + gap: var(--spacing-small); + align-items: var(--layout-preview-align-items); + padding: 0; + border-radius: 0; + background: transparent; +} + +/* ========================================================= */ +/* Typography helpers */ +/* ========================================================= */ + +.sg-body, +.sg-strong, +.sg-section-title, +.sg-bar-label, +.sg-table-label, +.sg-table-value { + font-family: var(--font-family-base); + line-height: var(--line-height-base); +} + +.sg-body, +.sg-section-title { + font-size: var(--font-size-base); + font-weight: var(--font-weight-regular); +} + +.sg-strong, +.sg-bar-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-semibold); +} + +.sg-table-label { + font-size: var(--font-size-small); + font-weight: var(--font-weight-regular); +} + +.sg-table-value { + font-size: var(--font-size-small); + font-weight: var(--font-weight-semibold); +} + +.sg-index a { + color: var(--color-font-hyperlink); +} + +.sg-index .sg-sub-heading { + color: var(--color-font-light); +} + +.sg-foundation-table { + width: 100%; + margin-bottom: var(--spacing-large); + color: var(--color-font-light); + border: 1px solid var(--color-white); +} + +.sg-foundation-table th, +.sg-foundation-table td { + color: var(--color-font-light); + border: 1px solid var(--color-white); + vertical-align: top; +} + +.sg-section-h2, +.sg-section-h3 { + margin: 0 0 var(--spacing-small) 0; + color: var(--color-font-light); +} +/* ========================================================= */ +/* Components: Interactive Elements */ +/* ========================================================= */ + + + + .sg-component-row { + display: flex; + flex-wrap: wrap; + gap: var(--spacing-small); + align-items: center; + } + + .sg-component-column { + display: flex; + flex-direction: column; + gap: var(--spacing-small); + width: fit-content; + } + + /* + Form preview surface only: + All form elements in this component are intentionally shown on the form-area background. + This wrapper provides only that evaluation background and must not be implemented as part of the form control itself. + The current preview background uses light-grey according to the style foundations. + */ + .sg-form-preview-area { + display: inline-flex; + flex-direction: column; + gap: var(--spacing-small); + width: fit-content; + padding: var(--spacing-large); + border-radius: var(--radius-card); + background: var(--surface-form-preview); + } + + .sg-pulldown-demo { + position: relative; + display: inline-flex; + flex-direction: column; + gap: var(--spacing-small); + width: fit-content; + } + + + .sg-state-example { + display: grid; + grid-template-columns: calc(var(--interaction-height) * 6) auto; + gap: var(--spacing-small); + align-items: center; + } + + .sg-state-example__label { + margin: 0; + color: var(--text-control-default); + } + + .sg-interaction-element { + box-sizing: border-box; + height: var(--interaction-height); + padding: + var(--interaction-padding-vertical) + var(--interaction-padding-horizontal); + border: var(--border-none); + border-radius: var(--radius-interaction); + box-shadow: var(--shadow-none); + font-family: var(--font-family-base); + font-size: var(--font-size-base); + line-height: var(--line-height-base); + color: var(--text-control-default); + background: var(--surface-control-default); + } + + .sg-form-active { + background: var(--surface-control-active); + color: var(--text-control-default); + } + + .sg-form-inactive-selectable { + background: var(--surface-control-inactive); + color: var(--text-control-default); + } + + .sg-form-disabled { + background: var(--surface-control-disabled); + color: var(--text-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-interaction-element:focus, + .sg-interaction-element:focus-visible { + outline: none; + } + + .sg-button { + display: inline-flex; + align-items: center; + justify-content: center; + font-weight: var(--font-weight-semibold); + cursor: pointer; + } + + .sg-button--active { + background: var(--surface-button-active); + color: var(--text-control-default); + } + + .sg-button--process { + background: var(--surface-button-process); + color: var(--text-button-process); + } + + .sg-button--process-inactive { + background: var(--surface-button-process-inactive); + color: var(--text-button-process); + } + + .sg-button--inactive { + background: var(--surface-button-inactive); + color: var(--text-control-disabled); + } + + .sg-button:disabled, + .sg-button--disabled { + cursor: not-allowed; + color: var(--text-control-disabled); + } + + .sg-button--process-inactive:disabled { + color: var(--text-button-process); + } + + .sg-tab-button-group { + display: flex; + flex-wrap: wrap; + gap: var(--spacing-small); + align-items: center; + } + + .sg-tab-button-group[data-component-size="compact"] { + background: var(--surface-tab-compact-background); + } + + .sg-tab-button[aria-selected="true"] { + background: var(--surface-tab-selected); + color: var(--text-tab-selected); + } + + .sg-tab-button[aria-selected="false"] { + background: var(--surface-tab-unselected); + color: var(--text-tab-unselected); + } + + .sg-tab-button-group[data-component-size="compact"] .sg-tab-button[aria-selected="false"] { + background: var(--surface-tab-compact-unselected); + color: var(--text-control-default); + } + + .sg-tab-button--compact { + height: var(--compact-interaction-height); + padding: + var(--compact-interaction-padding-vertical) + var(--compact-interaction-padding-horizontal); + font-size: var(--font-size-small); + } + + .sg-pulldown { + font-weight: var(--font-weight-regular); + appearance: none; + padding-left: var(--layout-pulldown-padding-inline); + padding-right: calc( + var(--layout-pulldown-chevron-offset) + + var(--layout-pulldown-chevron-reserved-space) + ); + background-image: var(--icon-pulldown-chevron); + background-position: right var(--layout-pulldown-chevron-offset) center; + background-size: calc(var(--interaction-height) * 0.375) calc(var(--interaction-height) * 0.25); + background-repeat: no-repeat; + } + + .sg-pulldown-demo__trigger { + text-align: left; + } + + .sg-pulldown--selected { + background-color: var(--surface-control-active); + color: var(--text-control-default); + } + + .sg-pulldown--inactive-selectable { + background-color: var(--surface-control-inactive); + color: var(--text-control-default); + } + + .sg-pulldown--disabled { + background-color: var(--surface-control-disabled); + color: var(--text-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-input-single-line { + font-weight: var(--font-weight-regular); + color: var(--text-control-default); + appearance: none; + } + + .sg-input-single-line::placeholder { + color: var(--text-control-disabled); + opacity: 1; + } + + .sg-input-single-line--inactive-selectable { + color: var(--text-control-default); + } + + .sg-input-single-line--disabled { + color: var(--text-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-input-single-line-wrap { + position: relative; + display: inline-flex; + align-items: center; + } + + .sg-input-single-line-wrap .sg-input-single-line { + padding-right: calc(var(--interaction-padding-horizontal) + var(--interaction-height)); + } + + .sg-input-clear-button { + position: absolute; + top: 0; + right: 0; + display: none; + align-items: center; + justify-content: center; + width: var(--interaction-height); + height: var(--interaction-height); + padding: 0; + border: var(--border-none); + border-radius: 0 var(--radius-interaction) var(--radius-interaction) 0; + box-shadow: var(--shadow-none); + font-family: var(--font-family-base); + font-size: var(--font-size-base); + line-height: 1; + color: var(--text-control-default); + background: var(--surface-input-clear); + cursor: pointer; + } + + .sg-input-single-line-wrap[data-has-value="true"] .sg-input-clear-button { + display: inline-flex; + } + + .sg-search-field-row { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + white-space: nowrap; + flex-wrap: nowrap; + } + + .sg-search-field-input { + width: var(--layout-search-field-width); + } + + .sg-search-result-count { + color: var(--color-dark-grey); + font-family: var(--font-family-base); + font-size: var(--font-size-base); + line-height: var(--line-height-base); + } + + .sg-labeled-input-row { + display: flex; + align-items: center; + gap: var(--spacing-small); + width: auto; + max-width: none; + } + + .sg-labeled-input-row .sg-label { + min-width: var(--layout-input-label-width); + flex: 0 0 var(--layout-input-label-width); + } + + .sg-labeled-input-row .sg-input-single-line, + .sg-labeled-input-row .sg-input-multi-line { + width: 100%; + min-width: 0; + max-width: var(--layout-input-field-max-width); + } + + .sg-labeled-input-row:has(.sg-input-multi-line) { + align-items: flex-start; + } + + .sg-input-multi-line { + box-sizing: border-box; + min-height: calc(var(--interaction-height) * 2.75); + padding: var(--interaction-padding-vertical) var(--interaction-padding-horizontal); + border: var(--border-control); + border-radius: var(--radius-interaction); + box-shadow: var(--shadow-interaction-inset); + font-family: var(--font-family-base); + font-size: var(--font-size-base); + line-height: var(--line-height-base); + color: var(--text-control-default); + background: var(--surface-control-inactive); + resize: vertical; + } + + .sg-input-component .sg-form-preview-area { + width: 100%; + box-sizing: border-box; + } + + .sg-input-component .sg-state-example { + grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr); + } + + @media (max-width: 48rem) { + .sg-input-component .sg-form-preview-area { + width: 100%; + max-width: 100%; + box-sizing: border-box; + } + + .sg-input-component .sg-state-example { + grid-template-columns: 1fr; + align-items: start; + width: 100%; + } + + .sg-input-component .sg-state-example > :last-child { + width: 100%; + min-width: 0; + } + + .sg-labeled-input-row { + flex-direction: column; + align-items: flex-start; + width: 100%; + max-width: 100%; + } + + .sg-labeled-input-row .sg-label { + min-width: 0; + flex: 0 0 auto; + } + + .sg-labeled-input-row .sg-input-single-line, + .sg-labeled-input-row .sg-input-multi-line { + min-width: 0; + max-width: 100%; + width: 100%; + } + } + + .sg-mode-toggle { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + height: auto; + padding: 0; + border: var(--border-none); + border-radius: 0; + box-shadow: var(--shadow-none); + appearance: none; + -webkit-tap-highlight-color: transparent; + background: transparent; + cursor: pointer; + } + + .sg-mode-toggle:focus, + .sg-mode-toggle:focus-visible { + outline: none; + } + + .sg-mode-toggle__label { + font-family: var(--font-family-base); + font-size: var(--font-size-base); + font-weight: var(--font-weight-semibold); + line-height: var(--line-height-base); + color: var(--text-control-default); + } + + .sg-mode-toggle__switch { + position: relative; + width: var(--layout-mode-toggle-width); + height: var(--interaction-height); + border-radius: var(--radius-interaction); + background: var(--surface-toggle-track); + } + + .sg-mode-toggle__handle { + position: absolute; + top: 0; + right: 0; + width: calc(100% / 2); + height: 100%; + border-radius: var(--radius-interaction); + background: var(--surface-toggle-handle); + } + + .sg-mode-toggle[data-active="absolute"] .sg-mode-toggle__handle { + left: 0; + right: auto; + } + + .sg-mode-toggle[data-active="relative"] .sg-mode-toggle__handle { + left: auto; + right: 0; + } + + .sg-mode-toggle--local .sg-mode-toggle__label { + font-weight: var(--font-weight-regular); + } + + .sg-mode-toggle--local .sg-mode-toggle__switch { + width: calc(var(--layout-mode-toggle-local-height) * var(--layout-mode-toggle-local-width-factor)); + height: var(--layout-mode-toggle-local-height); + } + + .sg-slider-row { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + } + + .sg-slider-row .sg-label { + min-width: var(--layout-input-label-width); + flex: 0 0 var(--layout-input-label-width); + color: var(--text-control-default); + } + + .sg-slider { + width: var(--layout-input-field-desktop-width); + min-width: var(--layout-input-field-desktop-width); + max-width: var(--layout-input-field-desktop-width); + height: var(--interaction-height); + margin: 0; + padding: 0; + border: 0; + appearance: none; + background: transparent; + cursor: pointer; + } + + .sg-slider::-webkit-slider-runnable-track { + height: var(--dimension-slider-track-height); + border-radius: var(--radius-slider-track); + background: + linear-gradient( + to right, + var(--surface-slider-progress) 0%, + var(--surface-slider-progress) var(--sg-slider-progress, 0%), + var(--surface-slider-track) var(--sg-slider-progress, 0%), + var(--surface-slider-track) 100% + ); + } + + .sg-slider::-webkit-slider-thumb { + width: var(--dimension-slider-thumb-size); + height: var(--dimension-slider-thumb-size); + margin-top: var(--dimension-slider-thumb-offset-top); + border: 0; + border-radius: 50%; + appearance: none; + background: var(--surface-slider-thumb); + } + + .sg-slider::-moz-range-track { + height: var(--dimension-slider-track-height); + border: 0; + border-radius: var(--radius-slider-track); + background: var(--surface-slider-track); + } + + .sg-slider::-moz-range-progress { + height: var(--dimension-slider-track-height); + border-radius: var(--radius-slider-track); + background: var(--surface-slider-progress); + } + + .sg-slider::-moz-range-thumb { + width: var(--dimension-slider-thumb-size); + height: var(--dimension-slider-thumb-size); + border: 0; + border-radius: 50%; + background: var(--surface-slider-thumb); + } + + .sg-slider-value { + min-width: calc(var(--interaction-height) * 1.25); + text-align: right; + color: var(--text-control-default); + } + + @media (max-width: 48rem) { + .sg-slider-row { + flex-direction: column; + align-items: flex-start; + width: 100%; + max-width: 100%; + } + + .sg-slider-row .sg-label { + min-width: 0; + flex: 0 0 auto; + } + + .sg-slider { + min-width: 0; + max-width: 100%; + width: 100%; + } + + .sg-slider-value { + align-self: flex-end; + } + } + + .sg-sandwich-button { + display: inline-flex; + align-items: center; + justify-content: center; + width: calc(var(--interaction-height) + var(--spacing-small)); + height: calc(var(--interaction-height) + var(--spacing-small)); + padding: 0; + cursor: pointer; + } + + .sg-sandwich-button--small { + width: calc(var(--interaction-height) * 0.9); + height: calc(var(--interaction-height) * 0.9); + } + + .sg-sandwich-button__icon { + width: var(--sandwich-line-width); + height: auto; + display: flex; + flex-direction: column; + gap: var(--sandwich-line-gap); + justify-content: center; + } + + .sg-sandwich-button__line { + display: block; + width: 100%; + height: var(--sandwich-line-height); + border-radius: var(--radius-interaction); + } + + .sg-sandwich-menu-wrap[data-component-size="default"] .sg-sandwich-button__line { + background: var(--icon-sandwich-line-portal); + } + + .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__line { + height: calc(var(--sandwich-line-height) - 1px); + background: var(--icon-sandwich-line-object); + } + + .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__icon { + width: calc(var(--sandwich-line-width) - 3px); + } + + .sg-sandwich-menu-wrap { + position: relative; + display: inline-flex; + } + + .sg-sandwich-menu-panel { + position: absolute; + top: calc(100% + var(--spacing-small)); + right: 0; + display: none; + flex-direction: column; + gap: var(--spacing-small); + width: max-content; + padding: var(--spacing-large); + border: var(--border-none); + border-radius: var(--radius-card); + box-shadow: var(--shadow-overlay); + z-index: 1; + } + + .sg-sandwich-menu-wrap[data-component-size="default"] .sg-sandwich-menu-panel { + background: var(--surface-menu-panel-portal); + } + + .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-menu-panel { + background: var(--surface-menu-panel-object); + } + + .sg-sandwich-menu-wrap[data-open="true"] .sg-sandwich-menu-panel { + display: flex; + } + + .sg-sandwich-menu-link { + text-decoration: none; + white-space: nowrap; + } + + .sg-sandwich-menu-wrap[data-component-size="default"] .sg-sandwich-menu-link { + color: var(--text-menu-link-portal); + } + + .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-menu-link { + color: var(--text-menu-link-object); + } + + .sg-sandwich-menu-wrap[data-align="left"] .sg-sandwich-menu-panel { + right: auto; + left: 0; + } + + .sg-sandwich-menu-wrap[data-align="right"] .sg-sandwich-menu-panel { + right: 0; + left: auto; + } + + .sg-help-icon-wrap { + position: relative; + display: inline-flex; + } + + .sg-help-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--small-interaction-element-size); + height: var(--small-interaction-element-size); + padding: 0; + border: var(--border-none); + border-radius: 50%; + box-shadow: var(--shadow-none); + font-family: var(--font-family-base); + font-size: var(--font-size-small); + font-weight: var(--font-weight-semibold); + line-height: 1; + color: var(--text-help-icon); + background: var(--surface-help-icon); + cursor: pointer; + } + + .sg-help-icon-panel { + position: absolute; + top: calc(100% + var(--spacing-small)); + left: 0; + z-index: 2; + display: none; + width: var(--layout-help-panel-width); + padding: var(--spacing-large); + border-radius: var(--radius-card); + color: var(--text-help-panel); + background: var(--surface-help-panel); + box-shadow: var(--shadow-overlay); + } + + .sg-help-icon-wrap[data-open="true"] .sg-help-icon-panel { + display: block; + } + + .sg-help-icon-wrap[data-align="left"] .sg-help-icon-panel { + left: 0; + right: auto; + } + + .sg-help-icon-wrap[data-align="right"] .sg-help-icon-panel { + left: auto; + right: 0; + } + + .sg-pulldown-panel { + position: absolute; + top: calc(100% + var(--spacing-small)); + left: 0; + z-index: 2; + display: none; + flex-direction: column; + gap: var(--spacing-small); + min-width: 100%; + width: max-content; + max-width: calc(100vw - (2 * var(--spacing-large))); + padding-block: var(--spacing-large); + padding-inline: var(--layout-pulldown-panel-padding-inline); + border-radius: var(--radius-card); + background: var(--surface-pulldown-panel); + box-shadow: var(--shadow-overlay); + } + + .sg-pulldown-demo[data-open="true"] .sg-pulldown-panel { + display: inline-flex; + } + + .sg-pulldown-demo[data-align="left"] .sg-pulldown-panel { + left: 0; + right: auto; + } + + .sg-pulldown-demo[data-align="right"] .sg-pulldown-panel { + left: auto; + right: 0; + } + + .sg-pulldown-panel__row { + display: grid; + grid-template-columns: calc(var(--interaction-height) * 5) calc(var(--interaction-height) * 7) var(--interaction-height); + gap: var(--spacing-small); + align-items: center; + } + + .sg-pulldown-panel__label { + margin: 0; + color: var(--text-control-default); + } + + .sg-pulldown-panel__remove { + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--interaction-height); + height: var(--interaction-height); + padding: 0; + border: var(--border-none); + border-radius: var(--radius-interaction); + background: var(--surface-control-default); + color: var(--text-control-default); + font-family: var(--font-family-base); + font-size: var(--font-size-base); + line-height: 1; + cursor: pointer; + } + + .sg-pulldown-panel__remove[hidden] { + display: none; + } + + .sg-pulldown-panel__row--disabled { + color: var(--text-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-pulldown-panel__row--disabled .sg-pulldown, + .sg-pulldown-panel__row--disabled .sg-pulldown-panel__label { + color: var(--text-control-disabled); + } + + .sg-pulldown-panel__checkbox-list { + margin-top: var(--spacing-large); + } + + .sg-pulldown-option-list { + display: flex; + flex-direction: column; + gap: var(--spacing-small); + margin: 0; + padding: 0; + list-style: none; + } + + .sg-pulldown-option { + display: flex; + gap: var(--spacing-small); + align-items: center; + padding-block: var(--interaction-padding-vertical); + padding-inline: var(--layout-pulldown-option-padding-inline); + border-radius: var(--radius-interaction); + white-space: nowrap; + color: var(--text-control-default); + cursor: pointer; + } + + .sg-pulldown-option--selected { + background: var(--surface-control-active); + } + + .sg-pulldown-option--disabled { + color: var(--text-control-disabled); + } + + .sg-pulldown-option__checkbox { + width: var(--font-size-base); + height: var(--font-size-base); + margin: 0; + } + + .sg-checkbox-field { + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--small-interaction-element-size); + height: var(--small-interaction-element-size); + padding: 0; + border: var(--border-none); + border-radius: var(--radius-interaction); + box-shadow: var(--shadow-none); + color: var(--text-control-default); + background: var(--surface-checkbox-default); + cursor: pointer; + } + + .sg-checkbox-field--on-grey, + .sg-checkbox-field--on-color { + background: var(--surface-checkbox-on-context); + } + + .sg-checkbox-field__mark { + display: none; + font-family: var(--font-family-base); + font-size: var(--font-size-base); + font-weight: var(--font-weight-semibold); + line-height: 1; + } + + .sg-checkbox-field[aria-checked="true"] .sg-checkbox-field__mark { + display: inline; + } + + .sg-checkbox-field.sg-form-active { + background: var(--surface-control-active); + color: var(--text-control-default); + } + + .sg-checkbox-field--inactive-selectable { + color: var(--text-control-default); + background: var(--surface-control-inactive); + } + + .sg-checkbox-field--disabled { + color: var(--text-control-disabled); + background: var(--surface-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-checkbox-field-list { + display: flex; + flex-direction: column; + gap: var(--spacing-small); + } + + .sg-checkbox-field-option { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + color: var(--text-control-default); + } + + .sg-checkbox-field-option--inactive-selectable { + color: var(--text-control-default); + } + + .sg-checkbox-field-option--disabled { + color: var(--text-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-radio-field { + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--small-interaction-element-size); + height: var(--small-interaction-element-size); + padding: 0; + border: var(--border-none); + border-radius: 50%; + box-shadow: var(--shadow-none); + color: var(--text-control-default); + background: var(--surface-radio-default); + cursor: pointer; + } + + .sg-radio-field__mark { + display: none; + width: calc(var(--small-interaction-element-size) * 0.44); + height: calc(var(--small-interaction-element-size) * 0.44); + border-radius: 50%; + background: var(--icon-radio-mark); + } + + .sg-radio-field[aria-checked="true"] .sg-radio-field__mark { + display: block; + } + + .sg-radio-field--inactive-selectable { + color: var(--text-control-default); + background: var(--surface-radio-default); + } + + .sg-radio-field--disabled { + color: var(--text-control-disabled); + background: var(--surface-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-hyperlink { + color: var(--text-hyperlink); + text-decoration: none; + } + +/* ========================================================= */ +/* Patterns: Portal Header */ +/* ========================================================= */ + +.sg-portal-header { + --surface-tab-selected: var(--surface-portal-header-tab-active); + --surface-tab-unselected: var(--surface-portal-header-tab); + --text-tab-selected: var(--text-portal-header-tab-active); + --text-tab-unselected: var(--text-portal-header-tab); + --surface-control-default: var(--surface-portal-header-menu-trigger); + --surface-menu-panel-portal: var(--surface-portal-header-menu-panel); + --text-menu-link-portal: var(--text-portal-header-menu-link); + --icon-sandwich-line-portal: var(--icon-portal-header-menu-line); + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--spacing-large); + padding: + var(--card-segment-padding-vertical) + var(--card-segment-padding-horizontal); + border: var(--border-none); + border-radius: var(--radius-card); + box-shadow: var(--shadow-none); + background: var(--surface-portal-header); +} + +.sg-portal-header__main { + display: flex; + flex: 1 1 auto; + flex-direction: column; + gap: var(--spacing-large); + min-width: 0; +} + +.sg-portal-header__brand { + margin: 0; + padding-left: 0; + font-size: var(--font-size-portal-header-brand); + color: var(--text-portal-header-brand); +} + +.sg-portal-header__tabs { + width: 100%; +} + +.sg-portal-header__menu-wrap { + flex: 0 0 auto; +} + +.sg-portal-header-pattern-variant { + margin-bottom: var(--spacing-large); +} + +.sg-portal-header-pattern-variant__label { + margin: 0 0 var(--spacing-small) 0; +} + +.sg-portal-header-pattern-variant__next-element { + margin-top: var(--spacing-large); +} + +@media (max-width: calc(var(--layout-object-card-desktop-breakpoint) - 1px)) { + .sg-portal-header { + align-items: flex-start; + } + + .sg-portal-header__main { + gap: var(--spacing-small); + } +} + +/* ========================================================= */ +/* Patterns: Options Row */ +/* ========================================================= */ + +.sg-options-row { + --surface-control-default: var(--surface-options-row-control); + --surface-control-active: var(--surface-options-row-control-selected); + --surface-input-clear: var(--surface-options-row-input-clear); + --surface-toggle-track: var(--surface-options-row-toggle-track); + --surface-toggle-handle: var(--surface-options-row-toggle-handle); + --surface-help-icon: var(--surface-options-row-help-icon); + --surface-help-panel: var(--surface-options-row-help-panel); + --text-control-default: var(--text-options-row-default); + --text-control-disabled: var(--text-options-row-placeholder); + --text-help-icon: var(--text-options-row-help-icon); + --text-help-panel: var(--text-options-row-help-panel); + --layout-mode-toggle-width: var(--layout-options-row-mode-toggle-width); + --layout-help-panel-width: var(--layout-options-row-help-panel-width); + margin-top: var(--layout-options-row-margin-top); + display: flex; + justify-content: space-between; + gap: var(--layout-options-row-main-gap); + padding: + var(--card-segment-padding-vertical) + var(--card-segment-padding-horizontal); + border: var(--border-none); + border-radius: var(--radius-card); + box-shadow: var(--shadow-none); + background: var(--surface-options-row); +} + +.sg-options-row__left, +.sg-options-row__right { + display: flex; + flex-wrap: wrap; + gap: var(--layout-options-row-group-gap); + align-items: center; +} + +.sg-options-row__left { + justify-content: flex-start; +} + +.sg-options-row__right { + justify-content: flex-end; + flex-wrap: nowrap; + margin-left: auto; +} + +@media (max-width: 48rem) { + .sg-options-row { + flex-direction: column; + gap: 0; + padding: 0; + } + + .sg-options-row__right, + .sg-options-row__left { + padding: + var(--card-segment-padding-vertical) + var(--card-segment-padding-horizontal); + } + + .sg-options-row__right { + order: 1; + justify-content: flex-end; + flex-wrap: nowrap; + margin-left: 0; + } + + .sg-options-row__left { + order: 2; + box-shadow: inset 0 1px 0 var(--divider-options-row-mobile); + } + + .sg-options-row__left > .sg-pulldown-demo, + .sg-options-row__left > .sg-input-single-line-wrap, + .sg-options-row__left > .sg-search-field-row { + flex: 1 1 calc(50% - var(--layout-options-row-group-gap)); + min-width: 0; + } + +.sg-options-row__left > .sg-input-single-line-wrap, +.sg-options-row__left > .sg-search-field-row { + flex-basis: 100%; + } + + .sg-options-row__left > .sg-input-single-line-wrap .sg-input-single-line, + .sg-options-row__left > .sg-pulldown-demo .sg-pulldown { + width: 100%; + } + +} + +/* ========================================================= */ +/* Patterns: Object Card */ +/* ========================================================= */ + +.sg-object-card-grid { + display: flex; + flex-wrap: wrap; + gap: var(--spacing-small); + align-items: flex-start; + width: 100%; +} + +.sg-object-card { + display: flex; + flex-direction: column; + flex: 1 1 var(--layout-object-card-min-width); + min-width: var(--layout-object-card-min-width); + max-width: var(--layout-object-card-max-width); + height: var(--layout-object-card-height); +} + +.sg-object-card-grid.sg-object-card-grid--multi-row .sg-object-card { + flex: 0 0 var(--layout-object-card-shared-width); + width: var(--layout-object-card-shared-width); +} + +@media (max-width: 767px) { + .sg-object-card { + width: var(--layout-object-card-mobile-width); + min-width: 0; + max-width: none; + height: var(--layout-object-card-mobile-height); + } +} + +.sg-object-card__content { + flex: var(--layout-object-card-content-grow) 1 auto; + display: flex; + flex-direction: column; + background: var(--color-white); +} + +.sg-object-card__header { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + +.sg-object-card__actions { + display: flex; + gap: var(--spacing-small); + width: 100%; + margin-top: auto; +} + +.sg-object-card__action { + flex: 1 1 0; + min-width: 0; +} + +/* ========================================================= */ +/* Patterns: Object Group Card */ +/* ========================================================= */ + +.sg-object-group-card__actions { + margin-top: auto; +} + +.sg-object-group-card__hint { + color: var(--color-font-light); +} + +/* ========================================================= */ +/* Patterns: Navigation Card */ +/* ========================================================= */ + +/* ========================================================= */ +/* Patterns: Formular mit Abschnitten */ +/* ========================================================= */ + +.sg-form-sections-card { + display: flex; + flex-direction: column; + width: clamp( + var(--layout-object-card-max-width), + 65vw, + calc(var(--layout-object-card-max-width) * 1.3) + ); + max-width: 100%; +} + +.sg-form-sections-card-wrapper { + display: flex; + justify-content: center; + width: 100%; + height: auto; +} + +.sg-form-sections-card__body { + background: var(--surface-form-preview); + padding: var(--card-segment-padding-vertical) var(--card-segment-padding-horizontal); +} + +.sg-form-sections-card__title { + margin: 0 0 var(--spacing-large) 0; +} + +.sg-form-sections-card__actions-segment { + background: var(--surface-form-preview); + padding: 0 var(--card-segment-padding-horizontal) var(--card-segment-padding-vertical); +} + +.sg-form-sections-card__chapter + .sg-form-sections-card__chapter { + margin-top: var(--spacing-large); +} + +.sg-form-sections-card__chapter-title, +.sg-form-sections-card__sentence { + margin: 0; +} + +.sg-form-sections-card__sentence { + margin-top: var(--spacing-small); +} + +.sg-form-sections-card__option-group, +.sg-form-sections-card__field-group { + display: flex; + flex-direction: column; + gap: var(--spacing-small); + margin-top: var(--spacing-large); +} + +.sg-form-sections-card__actions { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--spacing-small); + width: 100%; + margin-top: 0; +} + +.sg-form-sections-card__action { + width: 100%; +} + +.sg-navigation-card-layout { + width: 100%; +} + +.sg-navigation-card-block { + --surface-card: var(--surface-navigation-card); + --surface-card-body: var(--surface-navigation-card-body); + display: block; + flex: none; + min-width: 0; + max-width: none; + width: 100%; +} + +.sg-navigation-card-center { + display: flex; + align-items: center; + justify-content: center; + text-align: center; +} + +/* ========================================================= */ +/* Layouts: Card Listen Seite */ +/* ========================================================= */ + +.sg-card-list-page { + display: flex; + flex-direction: column; +} + +.sg-card-list-page > * + * { + margin-top: var(--spacing-large); +} + +.sg-card-list-page__title-row { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + padding-right: var(--card-segment-padding-horizontal); + padding-left: var(--card-segment-padding-horizontal); + width: fit-content; + max-width: 100%; +} + +.sg-card-list-page > .sg-options-row { + margin-top: var(--spacing-small); +} + +.sg-card-list-page > .sg-card-list-page__intro-card { + margin-top: calc(var(--spacing-large) - 0.5rem); +} + +.sg-card-list-page__intro-card.sg-card { + --layout-card-body-padding-top: 0; + --layout-card-body-padding-bottom: 0; + --surface-card-body: var(--surface-card-transparent); + align-self: flex-start; + width: min(60vw, 100%); + max-width: 100%; +} + +@media (max-width: 767px) { + .sg-card-list-page__intro-card.sg-card { + align-self: stretch; + width: 100%; + } +} + +.sg-card-list-page__object-grid, +.sg-card-list-page__navigation { + width: 100%; +} + +/* ========================================================= */ +/* Patterns: Card Gruppe mit Tastennavigation */ +/* ========================================================= */ + +.sg-content-block-card-group { + display: flex; + flex-direction: column; + gap: var(--spacing-small); + width: 100%; +} + +.sg-content-block-card-group__tabs, +.sg-content-block-card-group__panels, +.sg-content-block-card-group__panel, +.sg-content-block-card-group__card { + width: 100%; +} + +.sg-content-block-card-group__panel[hidden] { + display: none; +} + +.sg-content-block-card-group__title { + color: var(--text-content-block-card-title); + background: var(--surface-content-block-card-title); +} + +.sg-content-block-card-group__content { + color: var(--text-content-block-card-content); + background: var(--surface-content-block-card-content); +} + +.sg-content-block-card-group__content .sg-body { + margin: 0; +} + +/* ========================================================= */ +/* Components: Cards */ +/* ========================================================= */ + +.sg-card { + --layout-card-segment-padding-top: var(--card-segment-padding-vertical); + --layout-card-segment-padding-right: var(--card-segment-padding-horizontal); + --layout-card-segment-padding-bottom: var(--card-segment-padding-vertical); + --layout-card-segment-padding-left: var(--card-segment-padding-horizontal); + --layout-card-body-padding-top: var(--layout-card-segment-padding-top); + --layout-card-body-padding-right: var(--layout-card-segment-padding-right); + --layout-card-body-padding-bottom: var(--layout-card-segment-padding-bottom); + --layout-card-body-padding-left: var(--layout-card-segment-padding-left); + --layout-card-body-text-margin: 0; + display: flex; + flex-direction: column; + overflow: hidden; + width: 100%; + box-sizing: border-box; + border: var(--border-none); + border-radius: var(--radius-card); + box-shadow: var(--shadow-none); + background: var(--surface-card); +} + +@media (max-width: 48rem) { + :root { + --card-segment-padding-horizontal: var(--card-segment-padding-horizontal-mobile); + } +} + +.sg-card-segment { + display: flex; + flex-direction: column; + justify-content: flex-start; + padding: + var(--layout-card-segment-padding-top) + var(--layout-card-segment-padding-right) + var(--layout-card-segment-padding-bottom) + var(--layout-card-segment-padding-left); + gap: var(--layout-card-segment-content-gap); +} + +.sg-card-segment--header { + color: var(--text-card-header); +} + +.sg-card-segment--body { + justify-content: var(--layout-card-body-content-justify); + padding: + var(--layout-card-body-padding-top) + var(--layout-card-body-padding-right) + var(--layout-card-body-padding-bottom) + var(--layout-card-body-padding-left); + color: var(--text-card-body); + background: var(--surface-card-body); +} + +.sg-card-segment--body > .sg-body { + margin: var(--layout-card-body-text-margin, 0); +} + +.sg-card-segment--darkblue { + background: var(--surface-card-header-primary); +} + +.sg-card-segment--darkgreen { + background: var(--surface-card-header-alternative); +} + +.sg-card-segment--darkbrown { + background: var(--surface-card-header-muted); +} + +.sg-card-segment + .sg-card-segment { + box-shadow: inset 0 1px 0 var(--divider-card-segment); +} + +.sg-card-segment--darkbrown + .sg-card-segment--body { + box-shadow: none; +} + +.sg-card-segment.sg-object-card__header { + flex-direction: row; + align-items: center; + justify-content: space-between; +} + +.sg-card-segment--body.sg-object-card__content { + background: var(--surface-object-card-lower-segment); +} + +.sg-group-card { + display: flex; + flex-wrap: wrap; + gap: var(--spacing-small); + align-items: flex-start; + width: 100%; + box-sizing: border-box; + padding: var(--spacing-small); + border-radius: var(--radius-card); + background: var(--surface-card-group); +} + +.sg-group-card > .sg-card { + flex: 1 1 calc(50% - var(--spacing-small)); + width: calc(50% - var(--spacing-small)); +} + +.sg-transparent-card { + color: var(--text-card-transparent); + background: var(--surface-card-transparent); + padding: 0; +} + +.sg-transparent-card p { + margin: 0; + color: var(--text-card-transparent); +} + +/* ========================================================= */ +/* Components: Charts */ +/* ========================================================= */ + +.sg-score-bar-list { + display: flex; + flex-direction: column; + gap: var(--spacing-small); + width: 100%; +} + +.sg-score-bar-item { + display: grid; + grid-template-columns: var(--chart-axis-label-column-width) 1fr; + gap: var(--spacing-small); + align-items: center; +} + +.sg-score-bar-label { + margin: 0; + color: var(--text-chart-default); +} + +.sg-score-bar { + position: relative; + height: var(--score-bar-height); + overflow: visible; + border-radius: var(--radius-graph-bar); + background: var(--surface-score-bar-track); +} + +.sg-score-bar--marker-mid { + --score-marker-position: 50%; +} + +.sg-score-bar__value { + height: 100%; + border-radius: var(--radius-graph-bar); +} + +.sg-score-bar__value--w96 { width: 96%; } +.sg-score-bar__value--w64 { width: 64%; } +.sg-score-bar__value--w35 { width: 35%; } + +.sg-score-bar__value--positive { background: var(--chart-value-positive); } +.sg-score-bar__value--neutral { background: var(--chart-value-neutral); } +.sg-score-bar__value--negative { background: var(--chart-value-negative); } + +.sg-score-bar__median-marker { + position: absolute; + top: 50%; + left: var(--score-marker-position); + width: var(--score-marker-width); + height: var(--score-marker-height); + border-radius: 0; + background: var(--chart-marker-line); + transform: translate(-50%, -50%); +} + +.sg-score-bar__median-marker--outline { + border: var(--chart-grid-line-width) solid var(--chart-marker-line); + background: transparent; +} + +.sg-bar-chart { + display: block; + width: 100%; + box-sizing: border-box; + padding: 0; + background: var(--surface-chart-area); + color: var(--text-chart-default); +} + +.sg-chart-frame { + display: grid; + grid-template-columns: min-content 1fr; + column-gap: var(--chart-axis-label-gap); + height: calc(var(--chart-height-bar) * 0.7); +} + +.sg-chart-y-labels { + position: relative; + width: min-content; + margin: 0; + padding: 0; + list-style: none; + color: var(--text-chart-default); + text-align: right; + pointer-events: none; +} + +.sg-chart-y-labels li { + position: absolute; + white-space: nowrap; + right: 0; + top: var(--chart-label-position); + transform: translateY(-50%); +} + +.sg-chart-x-labels { + display: grid; + grid-template-columns: repeat(10, 1fr); + margin: var(--spacing-small) 0 var(--spacing-large) 0; + padding: 0 0 0 calc(var(--interaction-height) + var(--chart-axis-label-gap)); + list-style: none; + color: var(--text-chart-default); + text-align: center; +} + +.sg-chart-x-labels--line { + position: relative; + display: block; + height: var(--spacing-large); + grid-template-columns: none; +} + +.sg-chart-x-labels--line li { + position: absolute; + left: var(--chart-label-position); + transform: translateX(-50%); +} + +.sg-chart-y-labels li, +.sg-chart-x-labels li { + font-family: var(--font-family-base); + font-size: var(--font-size-small); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-base); +} + +.sg-bar-chart__svg, +.sg-line-chart__svg { + display: block; + width: 100%; + height: 100%; + overflow: hidden; +} + +.sg-bar-chart__grid-line, +.sg-line-chart__grid-line { + stroke: var(--chart-grid-line); + stroke-width: var(--chart-grid-line-width); +} + +.sg-bar-chart__axis-line, +.sg-line-chart__axis-line { + stroke: var(--chart-axis-line); + stroke-width: var(--chart-grid-line-width); +} + +.sg-bar-chart__bar { + rx: var(--radius-graph-bar); + ry: var(--radius-graph-bar); +} + +.sg-bar-chart__bar--value { fill: var(--chart-value-primary); } +.sg-bar-chart__bar--median { fill: var(--chart-value-reference); } +.sg-bar-chart__label, +.sg-line-chart__label { display: none; } + +.sg-bar-chart__legend, +.sg-line-chart__legend { + display: flex; + gap: var(--spacing-large); + padding-left: 0; + margin-left: 0; +} + +.sg-bar-chart__legend { + flex-wrap: wrap; + margin-top: 0; + color: var(--text-chart-default); +} + +.sg-line-chart__legend { + margin-top: var(--spacing-large); +} + +.sg-bar-chart__legend-item, +.sg-line-chart__legend-item { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + color: var(--text-chart-default); + font-family: var(--font-family-base); + font-size: var(--font-size-small); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-base); +} + +.sg-bar-chart__legend-swatch { + display: inline-block; + width: var(--interaction-height); + height: var(--interaction-height); + border-radius: var(--radius-interaction); +} + +.sg-bar-chart__legend-swatch--value { background: var(--chart-value-primary); } +.sg-bar-chart__legend-swatch--median { background: var(--chart-value-reference); } + +.sg-line-chart { + width: 100%; + box-sizing: border-box; + padding: 0; + background: var(--surface-chart-area); + color: var(--text-chart-default); +} + +.sg-chart-frame--line { + height: calc(var(--chart-height-line) * 0.7); +} + +.sg-line-chart__line { + fill: none; + stroke: var(--chart-value-primary); + stroke-width: var(--chart-line-width); + stroke-linecap: round; + stroke-linejoin: round; +} + +.sg-line-chart__median-line { + fill: none; + stroke: var(--chart-median-line); + stroke-width: var(--chart-grid-line-width); + stroke-dasharray: var(--sandwich-line-height) var(--sandwich-line-height); +} + +.sg-line-chart__legend-line { + display: inline-block; + width: var(--spacing-large); + height: var(--chart-line-width); + background: var(--chart-value-primary); +} + +.sg-line-chart__legend-line--median { + height: var(--chart-grid-line-width); + background: repeating-linear-gradient( + to right, + var(--chart-median-line) 0, + var(--chart-median-line) var(--sandwich-line-height), + transparent var(--sandwich-line-height), + transparent calc(var(--sandwich-line-height) * 2) + ); +} + +/* ========================================================= */ +/* Components: Data Display */ +/* ========================================================= */ + +.sg-data-table { + width: 100%; + border-collapse: collapse; + background: var(--surface-data-table); + table-layout: fixed; +} + +.sg-data-table th, +.sg-data-table td { + width: 33.333%; + padding: 0 0 var(--spacing-small) 0; + border: var(--border-none); + text-align: left; + vertical-align: top; +} + +.sg-data-table th { + font-family: var(--font-family-base); + font-size: var(--font-size-small); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-base); + color: var(--text-data-table-default); + background: var(--surface-data-table-header); +} + +.sg-data-table td { + font-family: var(--font-family-base); + font-size: var(--font-size-base); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-base); + color: var(--text-data-table-default); + background: var(--surface-data-table-cell); +} + +.sg-data-table__label, +.sg-data-table__value { + font-weight: var(--font-weight-semibold); +} + +.sg-data-table__value--warning { + color: var(--text-data-table-warning); +} + +.sg-data-table__help-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--small-interaction-element-size); + height: var(--small-interaction-element-size); + border: var(--border-none); + border-radius: 50%; + box-shadow: var(--shadow-none); + font-family: var(--font-family-base); + font-size: var(--font-size-small); + font-weight: var(--font-weight-semibold); + line-height: 1; + color: var(--text-data-table-help-icon); + background: var(--surface-data-table-help-icon); +} + +/* ========================================================= */ +/* Components: Typography */ +/* ========================================================= */ + +.sg-typography-preview { + display: flex; + flex-direction: column; + gap: var(--spacing-small); + color: var(--text-typography-preview); +} + +.sg-typography-preview h1, +.sg-typography-preview h2, +.sg-typography-preview p { + color: var(--text-typography-preview); + margin-top: 0; +}