Untersuchen Sie in einer vollständigen responsiven Vergleichsstudie die tatsächlichen semantischen Tokens, Theme-Pakete und das native Offcanvas-Verhalten von Orange OUDS 1.4.
Die ersten Deklarationen der Voreinstellung Orange 1.4 für die helle Darstellung. Die dunkle Darstellung ermittelt ihre eigenen Werte über data-bs-theme, statt diese Tabelle als wörtliche Farbangaben zu übernehmen.
--bs-color-action-selected
#f15e00
Die ersten Deklarationen der Voreinstellung Orange 1.4 für die helle Darstellung. Die dunkle Darstellung ermittelt ihre eigenen Werte über data-bs-theme, statt diese Tabelle als wörtliche Farbangaben zu übernehmen.
--bs-color-action-hover
rgba(0, 0, 0, 0.68)
Die ersten Deklarationen der Voreinstellung Orange 1.4 für die helle Darstellung. Die dunkle Darstellung ermittelt ihre eigenen Werte über data-bs-theme, statt diese Tabelle als wörtliche Farbangaben zu übernehmen.
--bs-color-action-pressed
#f15e00
Die ersten Deklarationen der Voreinstellung Orange 1.4 für die helle Darstellung. Die dunkle Darstellung ermittelt ihre eigenen Werte über data-bs-theme, statt diese Tabelle als wörtliche Farbangaben zu übernehmen.
--bs-color-bg-primary
#fff
Die ersten Deklarationen der Voreinstellung Orange 1.4 für die helle Darstellung. Die dunkle Darstellung ermittelt ihre eigenen Werte über data-bs-theme, statt diese Tabelle als wörtliche Farbangaben zu übernehmen.
--bs-color-bg-secondary
#f4f4f4
Die ersten Deklarationen der Voreinstellung Orange 1.4 für die helle Darstellung. Die dunkle Darstellung ermittelt ihre eigenen Werte über data-bs-theme, statt diese Tabelle als wörtliche Farbangaben zu übernehmen.
--bs-color-border-default
rgba(0, 0, 0, 0.2)
Die ersten Deklarationen der Voreinstellung Orange 1.4 für die helle Darstellung. Die dunkle Darstellung ermittelt ihre eigenen Werte über data-bs-theme, statt diese Tabelle als wörtliche Farbangaben zu übernehmen.
--bs-color-always-black
#000
Die ersten Deklarationen der Voreinstellung Orange 1.4 für die helle Darstellung. Die dunkle Darstellung ermittelt ihre eigenen Werte über data-bs-theme, statt diese Tabelle als wörtliche Farbangaben zu übernehmen.
--bs-color-always-white
#fff
Die ersten Deklarationen der Voreinstellung Orange 1.4 für die helle Darstellung. Die dunkle Darstellung ermittelt ihre eigenen Werte über data-bs-theme, statt diese Tabelle als wörtliche Farbangaben zu übernehmen.
Veröffentlichte Deklarationen für Schriftarten und Typografie. Die eingebettete Studie verwendet ausdrücklich den Arial-Fallback, nicht die markengeschützten HelvNeueOrange-Schriftdateien.
--bs-font-size-display-large
2.5rem
Veröffentlichte Deklarationen für Schriftarten und Typografie. Die eingebettete Studie verwendet ausdrücklich den Arial-Fallback, nicht die markengeschützten HelvNeueOrange-Schriftdateien.
--bs-font-size-heading-large
1.5rem
Veröffentlichte Deklarationen für Schriftarten und Typografie. Die eingebettete Studie verwendet ausdrücklich den Arial-Fallback, nicht die markengeschützten HelvNeueOrange-Schriftdateien.
--bs-font-size-body-large
1rem
Veröffentlichte Deklarationen für Schriftarten und Typografie. Die eingebettete Studie verwendet ausdrücklich den Arial-Fallback, nicht die markengeschützten HelvNeueOrange-Schriftdateien.
--bs-font-size-body-medium
0.875rem
Veröffentlichte Deklarationen für Schriftarten und Typografie. Die eingebettete Studie verwendet ausdrücklich den Arial-Fallback, nicht die markengeschützten HelvNeueOrange-Schriftdateien.
--bs-font-size-body-small
0.75rem
Veröffentlichte Deklarationen für Schriftarten und Typografie. Die eingebettete Studie verwendet ausdrücklich den Arial-Fallback, nicht die markengeschützten HelvNeueOrange-Schriftdateien.
--bs-font-line-height-body-large
1.5
Veröffentlichte Deklarationen für Schriftarten und Typografie. Die eingebettete Studie verwendet ausdrücklich den Arial-Fallback, nicht die markengeschützten HelvNeueOrange-Schriftdateien.
--bs-font-line-height-body-medium
1.4285714286
Veröffentlichte Deklarationen für Schriftarten und Typografie. Die eingebettete Studie verwendet ausdrücklich den Arial-Fallback, nicht die markengeschützten HelvNeueOrange-Schriftdateien.
Native Komponentenstandardwerte. Das eigene Drawer-Menü überschreibt die Breite mit 440px, während die native Regel für die maximale Breite das Menü innerhalb des Ansichtsfensters hält.
--bs-offcanvas-width
400px
Native Komponentenstandardwerte. Das eigene Drawer-Menü überschreibt die Breite mit 440px, während die native Regel für die maximale Breite das Menü innerhalb des Ansichtsfensters hält.
--bs-offcanvas-height
30vh
Native Komponentenstandardwerte. Das eigene Drawer-Menü überschreibt die Breite mit 440px, während die native Regel für die maximale Breite das Menü innerhalb des Ansichtsfensters hält.
--bs-offcanvas-transition
transform 0.3s ease-in-out
Native Komponentenstandardwerte. Das eigene Drawer-Menü überschreibt die Breite mit 440px, während die native Regel für die maximale Breite das Menü innerhalb des Ansichtsfensters hält.
Verträge für native Drawer-Menüs und Schaltflächen
Orange OUDS Web-Designsystem: Orange OUDS-Paket- und Theme-Struktur
Die Common- und Orange-Pakete gemeinsam installieren
OUDS Web 1.4.0 trennt gemeinsames Verhalten vom markenspezifischen Theme. Im Beispiel werden @ouds/web-common und @ouds/web-orange in derselben Version installiert. Das Orange-Paket stellt kompiliertes CSS bereit, das Common-Paket das gebündelte Browser-JavaScript. Das Root-Dokument bindet beide expliziten Pfade ein, sodass der Leitfaden nicht mit einem Paketbefehl und einer ungestalteten statischen Seite endet.
@ouds/web-orange stellt das Orange-Theme-CSS bereit.
@ouds/web-common stellt gemeinsames JavaScript bereit.
In diesem Beispiel sind beide Pakete auf 1.4.0 festgelegt.
OUDS als eigenständigen Komponentenvertrag behandeln
OUDS basiert auf Bootstrap, doch daraus folgt nicht, dass jede Upstream-Klasse unverändert passt. Diese Version verwendet btn-brand, btn-default und weitere benannte Varianten. Der Vergleich nutzt diese tatsächlichen Klassen und die nativen Offcanvas-Datenattribute. Bei einer Migration sollten sowohl das Markup als auch die Theme-Werte verglichen werden, statt lediglich eine Stylesheet-URL zu ändern.
Orange OUDS Web-Designsystem: Semantische Farb- und Typografierollen in Orange OUDS
Die installierten semantischen Variablen verwenden
Die eigenen Karten verwenden color-bg-primary und color-border-default. Der schmale Akzent in der Kopfzeile folgt color-action-selected, das in den Deklarationen für die helle Darstellung zu #f15e00 aufgelöst wird. Das dunkle Theme ändert diese Rollen über data-bs-theme am Root-Element. Der Leitfaden hält daher die hellen Werte mitsamt ihrem Geltungsbereich fest und überlässt dem Laufzeitsystem die Auswahl der passenden Darstellung, statt einen einzelnen orangefarbenen Hex-Code als ganzes Designsystem darzustellen.
Typografie klar ausweisen
Das Paket nennt HelvNeueOrange an erster Stelle in seinem Schriftstapel. In dieser lokal eingebetteten Studie werden nicht verwendete font-face-Deklarationen entfernt und Arial wird ausdrücklich als Fallback verwendet. Die Tabelle erläutert weiterhin die tatsächlich veröffentlichte Schriftfamilie und die Textrollen. Das Laden von Komponenten-CSS belegt nicht, dass die markengeschützte Schriftart geladen wurde. Ein Projekt, das diese Schriftart übernimmt, muss ihre Schriftdateien gezielt einbinden.
Orange OUDS Web-Designsystem: Vergleichskarten und Inhalte in Orange OUDS
Dem Vergleich eine klare Entscheidungsstruktur geben
Die drei Karten zeigen fiktive Datenvolumen, eine kurze Nutzungsbeschreibung und eine Aktion zum Prüfen. Jede Karte enthält vollständigen Text und keine Abbildung mit Platzhalterzeilen. Es handelt sich um eigene Studieninhalte, nicht um aktuelle Orange-Produkte, Preise oder Verträge. Preise bleiben bei dieser Designübung außerdem außen vor, damit weder ein kaufbares Angebot noch ein Bezahlvorgang suggeriert wird.
Die Grundlinie der wiederholten Karten einheitlich halten
Das Desktop-Layout verwendet drei gleich breite Grid-Spalten und Karten mit Flexbox-Spaltenlayout, sodass die Prüfschaltflächen unten bündig abschließen. Bei 720 px wechselt es zu einer einzelnen Spalte mit natürlicher Höhe. Die nativen Schaltflächenklassen stellen die tatsächlichen Aktionszustände bereit; das umgebende Grid, das Padding von 24 px und die Reihenfolge der Inhalte sind ursprüngliche Anwendungsentscheidungen, die im bereitgestellten CSS sichtbar sind.
Orange OUDS Web Orange-Designsystem: native OUDS-Offcanvas-Komposition
Drawer über den Auslöser befüllen
Jede Prüfschaltfläche verweist auf dasselbe #details-Offcanvas und enthält einen kleinen data-Planindex. Das Ereignis show.bs.offcanvas stellt relatedTarget bereit. Damit werden der passende ursprüngliche Titel, die Beschreibung und die Featureliste ausgewählt, bevor der Drawer angezeigt wird. Die Liste wird mit textContent und echten Listenelementen erstellt, sodass die Daten vom Markup getrennt bleiben. Der Drawer-Titel ist über aria-labelledby verknüpft.
Öffnen und Schließen der nativen Laufzeit überlassen
Orange OUDS Web Orange-Designsystem: lokale Auswahl und Wiederherstellung in OUDS
Die tatsächlich ausgeführte Aktion beschreiben
„Diese lokale Auswahl speichern“ speichert nur, welcher fiktive Tarif ausgewählt wurde, und zeigt die Auswahl unter den Karten an. Die Meldung stellt ausdrücklich klar, dass keine Bestellung aufgegeben wurde. Eine neue Auswahl ersetzt die vorherige; beim Löschen wird die Meldung ausgeblendet und der Fokus auf die erste Prüfschaltfläche zurückgesetzt. Es werden keine Daten an ein Konto, einen Warenkorb oder einen Zahlungsdienst übermittelt.
Darstellung und Auswahl getrennt halten
Die Aktion für helles/dunkles Erscheinungsbild ändert das Theme-Attribut am Root-Element und die Beschriftung der Aktion selbst. Die aktuelle lokale Auswahl und die Inhalte der drei Karten bleiben erhalten. Bei der Prüfung eines Themes ist diese Unterscheidung wichtig: Eine visuelle Änderung sollte die aktuelle Auswahl des Nutzers nicht unbemerkt zurücksetzen. Die Studie verwendet native CSS in beiden Darstellungsvarianten; nur die äußere Komposition stammt von der Anwendung.
Orange OUDS Web Orange-Designsystem: Tastatur- und Verhalten auf schmalen Bildschirmen in OUDS
Schließen und Prüfen klar benennen
Jede Kartenaktion enthält den Namen des Tarifs. Die native Schließen-Schaltfläche mit Symbol hat die explizite barrierefreie Beschriftung „Details schließen“. Der Drawer verfügt über tabindex und einen beschrifteten Titel, damit die native Implementierung den Fokus verwalten kann. In den Tests wird der Drawer „Explore“ geöffnet, mit Escape geschlossen und geprüft, ob der Fokus zum Auslöser zurückkehrt, bevor zu einer anderen Karte gewechselt wird.
Den Drawer im tatsächlichen Ansichtsfenster halten
Die Anwendung legt die Breite des Drawers auf 440 px fest; die native max-width-Regel für Offcanvas hält ihn jedoch innerhalb eines schmalen Ansichtsfensters. Auf kleinen Bildschirmen werden die Karten untereinander angeordnet und das äußere Padding wird reduziert. Das Beispiel wurde nach der Auswahl eines Tarifs und dem Wechsel des Erscheinungsbilds bei 280 px, 390 px sowie Tablet- und Desktopbreiten geprüft – nicht nur im Ausgangszustand.
Orange OUDS Web Orange-Designsystem: vollständige statische OUDS-Integration
Das vollständige Beispiel mit drei Dateien verwenden
orange-index.html als index.html speichern und orange.css sowie orange-app.js daneben ablegen. Die beiden festgelegten Pakete installieren und das Verzeichnis bereitstellen. Das HTML enthält beide Pfade zu den nativen Assets, alle Karteninhalte, die Drawer-Struktur und das Anwendungsskript. Für diese Browser-Komposition sind weder ein React-Wrapper noch ein fehlendes Grundgerüst oder ein erfundenes SDK erforderlich.
Alle drei bereitgestellten Dateien zusammen ablegen.
Beide passenden OUDS-Pakete installieren.
Den Ordner bereitstellen und jede Karte prüfen.
Escape, Fokus-Rückgabe, lokales Löschen und beide Darstellungsvarianten testen.
Code und Assets auf derselben Version halten
Wenn Sie Versionen ändern, prüfen Sie gemeinsam die Schaltflächenvarianten, den Daten-API-Namensraum, die Ereignisnamen und die Theme-Variablen. CSS aus einer Version und Skripte aus einer anderen können zunächst korrekt wirken, bis eine Interaktion die Abweichung sichtbar macht. Die bereitgestellte Version ist eine konkrete, getestete Referenz – keine Garantie dafür, dass jede künftige Paketkombination identisch funktioniert.
Orange OUDS Web Designsystem-Komponentenbeispiele
orange-index.html
Vollständiges Markup und native CSS-/JavaScript-Imports.
html
<!doctype html><html lang="en" data-bs-theme="light"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Bundle comparison study</title><link rel="stylesheet" href="./node_modules/@ouds/web-orange/dist/css/ouds-web.min.css"><link rel="stylesheet" href="./orange.css"></head><body><main><header><div><p>OUDS WEB / ORIGINAL COMPARISON STUDY</p><h1>Choose room for your day</h1><p class="scope">Three fictional mobile-data bundles for inspecting Orange-themed cards, buttons and a native detail drawer. These are not commercial offers.</p></div><button id="theme" class="btn btn-default" type="button">Use dark appearance</button></header><div class="plans"><article class="plan"><h2>Everyday</h2><p class="amount">8 GB</p><p>For messages, maps and occasional listening.</p><button class="btn btn-brand" data-plan="0" data-bs-toggle="offcanvas" data-bs-target="#details" aria-controls="details">Inspect Everyday</button></article><article class="plan"><h2>Explore</h2><p class="amount">25 GB</p><p>More room for podcasts and a longer journey.</p><button class="btn btn-brand" data-plan="1" data-bs-toggle="offcanvas" data-bs-target="#details" aria-controls="details">Inspect Explore</button></article><article class="plan"><h2>Create</h2><p class="amount">60 GB</p><p>A larger sample allowance for sharing on the move.</p><button class="btn btn-brand" data-plan="2" data-bs-toggle="offcanvas" data-bs-target="#details" aria-controls="details">Inspect Create</button></article></div><section id="selected" hidden><p role="status" id="selection-message"></p><button id="clear" class="btn btn-default">Clear local choice</button></section><p class="fine">OUDS Web 1.4.0 native CSS and Offcanvas runtime; original sample content and local selection. Arial fallback is used instead of Orange’s branded typeface.</p></main><aside class="offcanvas offcanvas-end" tabindex="-1" id="details" aria-labelledby="drawer-title"><div class="offcanvas-header"><h2 class="offcanvas-title" id="drawer-title">Bundle details</h2><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close details"></button></div><div class="offcanvas-body"><p id="drawer-description"></p><ul id="features"></ul><p>No account is connected. Keeping a choice changes this preview only.</p><button id="choose" class="btn btn-brand">Keep this local choice</button></div></aside><script src="./node_modules/@ouds/web-common/dist/js/ouds-web.bundle.min.js"></script><script src="./orange-app.js"></script></body></html>
orange-index.html als index.html speichern; die Namen der beiden anderen Dateien unverändert lassen.
orange-app.js
Native Drawer-Ereignisbehandlung sowie lokaler Auswahl- und Theme-Zustand.
javascript
const plans=[["Everyday", "8 GB", "For messages, maps and occasional listening.", ["8 GB of fictional monthly data", "One original study profile", "No contract, order or payment"]], ["Explore", "25 GB", "More room for podcasts and a longer journey.", ["25 GB of fictional monthly data", "One original study profile", "No contract, order or payment"]], ["Create", "60 GB", "A larger sample allowance for sharing on the move.", ["60 GB of fictional monthly data", "One original study profile", "No contract, order or payment"]]];let current=0;const drawer=document.querySelector('#details');drawer.addEventListener('show.bs.offcanvas',event=>{current=Number(event.relatedTarget.dataset.plan);const[name,amount,description,features]=plans[current];document.querySelector('#drawer-title').textContent=name+' · '+amount;document.querySelector('#drawer-description').textContent=description;document.querySelector('#features').replaceChildren(...features.map(text=>{const li=document.createElement('li');li.textContent=text;return li}));});document.querySelector('#choose').addEventListener('click',()=>{document.querySelector('#selected').hidden=false;document.querySelector('#selection-message').textContent=plans[current][0]+' is your local preview choice. No order was placed.';oudsWeb.Offcanvas.getInstance(drawer).hide();});document.querySelector('#clear').addEventListener('click',()=>{document.querySelector('#selected').hidden=true;document.querySelector('[data-plan]').focus()});document.querySelector('#theme').addEventListener('click',e=>{let dark=document.documentElement.dataset.bsTheme!=='dark';document.documentElement.dataset.bsTheme=dark?'dark':'light';e.currentTarget.textContent=dark?'Use light appearance':'Use dark appearance'});
orange-index.html als index.html speichern; die Namen der beiden anderen Dateien unverändert lassen.
04
Orange OUDS Web Einrichtung des Designsystem-Agenten
Ausgangspunkt für die Implementierung
http://localhost:8000/ öffnen. Hier kommen kompilierte native Assets zum Einsatz; ein Sass-Build ist nicht erforderlich.
sh
npm init -y
npm install @ouds/[email protected] @ouds/[email protected]
# Save index.html, orange.css and orange-app.js from the supplied examples.
python3 -m http.server 8000
Ein Prompt für dein Projekt
Agenten-Prompt
Die vollständige OUDS-Web-1.4-Vergleichsstudie mit passenden Common-/Orange-Paketen, den echten Varianten btn-brand und btn-default, nativen Offcanvas-Ereignissen und API, der Auflösung heller und dunkler Design-Token sowie einem expliziten Arial-Fallback umsetzen. Alle Paketinhalte fiktiv halten und die Auswahl ausschließlich lokal speichern.
05
Orange OUDS Web Quellen und Geltungsbereich des Designsystems
Tatsächliche OUDS-Web-CSS- und Offcanvas-Laufzeit mit ursprünglichen fiktiven OpenDesign-Paketen und lokaler Auswahl. Arial-Fallback ist explizit festgelegt; es wird weder ein kommerzielles Angebot noch eine Bestellung dargestellt.
