/* TOMORIS.Design 3.0.0 · tomoris-components.css · FREIWILLIG Setzt tomoris-tokens.css voraus. Wer eigene Bausteine hat, bindet diese Datei nicht ein. */ @layer tomoris.components { /* DIE KANTE TRAEGT DIE ABGRENZUNG, nicht die Fuellung. Dieselbe Bauform wie bei der Buehne (MINT-3213), eine Ebene daneben. Gemessen ueber alle neun Welten und beide Modi: 35 der 36 Flaechen erreichen gegen --tm-bg KEINE 1,4 zu 1. Der Bestwert liegt bei 1,41, der schlechteste bei 1,00 - zwei Flaechen, die als eine erscheinen. Eine Karte hebt sich also nirgends durch ihre Fuellung vom Seitengrund ab; sie besteht ausschliesslich ueber ihre Kante. --tm-border TRAEGT DAS NICHT, und zwar gemessen: hoechstens 1,37 gegen die Fuellung und 1,24 gegen den Grund, ueber alle 36 Kombinationen. Das ist kein Mangel dieser Rolle - die README sagt es ausdruecklich: vier der fuenf Randrollen "deuten an" und tragen bewusst keine Zusage. Eine Trennlinie mit 3:1 waere keine Trennlinie mehr, sondern ein Rahmen. --tm-border-elevated IST die Rolle mit der Zusage ("Wer WCAG 1.4.11 braucht, nimmt --tm-border-elevated"). Gemessen liegt sie bei 3,06 bis 4,51 gegen die Fuellung und bei 3,04 bis 5,34 gegen den Grund - in JEDER Welt und beiden Modi. Sie ist genau fuer diesen Fall da, und ein Rahmen um eine Karte IST ein Rahmen. WAS SICH SICHTBAR AENDERT: die Kartenkante wird deutlicher. Das Kastenmass bleibt gleich (1px bleibt 1px), es verschiebt sich also nichts - anders als bei der Buehne ist hier kein Innenring noetig, weil schon eine Kante steht. Getauscht wird nur ihre Rolle. NICHT GETAUSCHT werden .tm-rule und die Tabellenlinien: das sind Trennlinien innerhalb einer Flaeche, keine Abgrenzung gegen den Grund. Fuer sie gilt der Satz aus der README unveraendert. */ .tm-card{ background:var(--tm-surface); border:1px solid var(--tm-border-elevated); border-radius:var(--tm-radius-card); transition:transform var(--tm-dur-fast) var(--tm-ease), box-shadow var(--tm-dur-fast) var(--tm-ease) } .tm-card--lift:hover{ transform:translateY(-2px); box-shadow:var(--tm-shadow) } .tm-glass{ background:var(--tm-glass); border:1px solid var(--tm-glass-border); border-radius:var(--tm-radius-card); box-shadow:var(--tm-shadow); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3) } /* Dieselbe Rechnung wie bei .tm-card: surface-2 liegt zwischen 1,00 und 1,41 gegen den Grund. Auch dieser Kasten besteht nur ueber seine Kante. */ .tm-box{ background:var(--tm-surface-2); border:1px solid var(--tm-border-elevated); border-radius:var(--tm-radius-box) } /* Buehne: die dunkle Flaeche im hellen Produkt. NIE --tm-text-1 dafuer verwenden - das ist eine Textfarbe und kippt im Dunkelmodus ins Helle. Dreimal unabhaengig gemeldet: WorkAssist, pia., CCR. */ /* DIE KANTE WIRD GEZEICHNET, und das ist die Aenderung aus MINT-3213. Neun der 18 Buehnenflaechen erreichen die 1,4 zu 1 gegen den Grund NICHT. Sie bestehen ueber die Kante - WCAG 1.4.11 laesst das zu. Bis 3.1.0 hat das Paket die Kante aber nur BEREITGESTELLT und nicht angebracht: die Zusicherung lag bei der Anwendung, und ob die acht Dienste sie zeichnen, hat niemand gemessen. Ein gruenes Urteil, das auf einer ungeprueften Fremdzusicherung ruht, ist eine Behauptung ueber die Welt. ALS INNENRING, nicht als border: 'border' vergroessert das Kastenmass um 2px und verschoebe damit jedes bestehende Bild. 'box-shadow: inset' liegt innerhalb der Flaeche, aendert keine Groesse und keinen Fluss. GEFAHRLOS FUER DIE NEUN, DIE OHNEHIN BESTEHEN: --tm-stage-border ist ueber alle 18 Kombinationen gegen Flaeche UND Grund bei mindestens 3,21 gemessen. Die Kante kann deshalb nirgends falsch aussehen - sie ist dort nur nicht noetig. NUR --tm-stage. Fuer stage-2 und stage-3 gibt es rechnerisch keine Kante (siehe test/buehne-gegen-grund.mjs); ein Innenring mit einem nicht existierenden Wert waere durchsichtig und damit eine stille Luege. */ .tm-stage{ background:var(--tm-stage); color:var(--tm-stage-text-2); box-shadow:inset 0 0 0 1px var(--tm-stage-border) } .tm-stage-2{ background:var(--tm-stage-2); color:var(--tm-stage-text-2) } .tm-stage-3{ background:var(--tm-stage-3); color:var(--tm-stage-text-2) } .tm-stage :where(.tm-mono){ color:var(--tm-stage-text-3) } .tm-stage :where(.tm-eyebrow){ color:var(--tm-stage-accent) } .tm-stage :where(h1,h2,h3,h4){ color:var(--tm-stage-ink) } .tm-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:var(--tm-size-eyebrow); font-weight:700; letter-spacing:var(--tm-track-eyebrow); text-transform:uppercase; color:var(--tm-accent-text) } .tm-eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor } .tm-tile{ display:grid; place-items:center; flex:0 0 auto; width:32px; height:32px; border-radius:var(--tm-radius-tile); background:var(--tm-accent-soft); color:var(--tm-accent-text) } .tm-rule{ height:1px; border:0; background:var(--tm-border) } /* FARBUMSCHALTER. Gehoert zu wwwroot/tomoris-theme.js - die Datei setzt data-theme, dieser Baustein zeigt den Zustand an. Beides ist freiwillig; wer den Umschalter nicht einbindet, sieht nichts davon. Der Zustand steht in aria-pressed und NICHT in einer Klasse: eine Klasse muesste JavaScript zusaetzlich pflegen, und ein Umschalter, dessen Anzeige und dessen Wirkung auseinanderlaufen koennen, ist schlimmer als keiner. */ .tm-theme-switch{ display:inline-flex; align-items:center; gap:6px; padding:4px; border:1px solid var(--tm-border); border-radius:var(--tm-radius-pill); background:var(--tm-surface-2) } .tm-theme-switch > button{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:0; border-radius:var(--tm-radius-pill); background:transparent; color:var(--tm-text-3); font:inherit; cursor:pointer; transition:background var(--tm-dur-fast) var(--tm-ease), color var(--tm-dur-fast) var(--tm-ease) } .tm-theme-switch > button[aria-pressed="true"]{ background:var(--tm-accent-soft); color:var(--tm-accent-text) } .tm-theme-switch > button:hover:not([aria-pressed="true"]){ color:var(--tm-text-1) } .tm-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; /* DIE KNOPFKANTE TRAEGT DIE 3:1, und das ist die Aenderung aus dem Knopf-Befund. Ein Knopf ist eine Bedienelement im Sinne von WCAG 1.4.11; seine sichtbare Begrenzung braucht 3,0 gegen die Nachbarfarbe. Die Fuellung leistet das nicht: sie steht auf --tm-surface-2 und liegt damit praktisch auf der Umgebung. Es traegt allein die Kante. --tm-border-strong TRUG SIE NICHT. Gemessen ueber neun Welten und beide Modi, jeweils der schlechtere der beiden Werte (gegen die Fuellung und gegen die Umgebung): 0 von 18 erreichen 3,0, die Spanne liegt bei 1,36 bis 1,95. Das ist kein Mangel dieser Rolle - sie ist die "betonte Linie" und traegt laut README ausdruecklich KEINE Zusage. --tm-border-elevated erreicht 18 von 18, Spanne 3,06 bis 3,79. Das Kastenmass bleibt gleich, 1px bleibt 1px; getauscht wird nur die Rolle. Dieselbe Bauform wie bei .tm-card und .tm-box. .tm-btn--primary BLEIBT UNBERUEHRT: dort ist die Kante durchsichtig und die Fuellung selbst traegt die Abgrenzung. Zwei Welten schaffen das gemessen nicht - das ist ein Farbwert-Befund und keine Frage der Bausteinschicht, siehe test/flaeche-gegen-grund.mjs. */ padding:13px 24px; overflow:hidden; border:1px solid var(--tm-border-elevated); border-radius:var(--tm-radius-button); background:var(--tm-surface-2); color:var(--tm-text-1); font:inherit; font-weight:700; cursor:pointer; transition:transform var(--tm-dur-fast) var(--tm-ease), background var(--tm-dur-fast) var(--tm-ease) } .tm-btn:hover{ transform:translateY(-1px) } .tm-btn:disabled, .tm-btn[aria-disabled="true"]{ cursor:not-allowed; opacity:.55; transform:none } /* KEIN 'border-color:transparent' MEHR. Der gefuellte Knopf behaelt damit die Kante aus .tm-btn - und die traegt seine Abgrenzung. DER ZUSTAND VORHER, gemessen ueber neun Welten und beide Modi: die Fuellung allein erreichte 16 von 18 mal die 3,0 gegen die Umgebung. Zwei rissen - whisper/dunkel mit 2,67 und darkwatch/dunkel mit 2,82 -, und weil die Kante durchsichtig war, gab es dort keinen zweiten Weg. WARUM DIE KANTE UND NICHT ZWEI NEUE FARBWERTE: darkwatch fuehrt als accent denselben Wert wie --tm-brand-2, also Pulse Blue aus der Markenvorgabe, und der steht in drei Welten. (Der Zahlenwert selbst faende hier keinen Platz: keine-hexwerte.mjs liest Kommentare mit und wuerde ihn melden.) Ihn in einer Welt und einem Modus zu verschieben, hiesse: die Marke gilt dort nicht mehr - und wer das in einem Jahr sieht, haelt es fuer einen Fehler. Die Kante loest 18 von 18 statt 2 von 2 und aendert keinen Farbwert. WAS DIE KANTE HIER LEISTET UND WAS NICHT, und das steht hier, weil es woanders anders gehandhabt wird: gegen die UMGEBUNG 18 von 18, 3,08 bis 4,51 gegen die FUELLUNG 0 von 18, 1,12 bis 2,35 Bei .tm-card und .tm-box wird BEIDES verlangt. Dort ist die Fuellung dem Grund fast gleich (1,00 bis 1,41): eine Kante, die auch noch in der Fuellung verschwaende, liesse die Karte voellig unsichtbar. Hier ist die Lage eine andere - die Fuellung ist ein saturiertes Blau und hebt sich deutlich ab. Die Aufgabe der Kante ist nicht, die Fuellung sichtbar zu machen, sondern den RAND des Bedienelements gegen sein Umfeld zu bezeichnen. Dafuer zaehlt die Aussenseite. Dass der graue Ring innen im Blau kaum auftraegt, heisst nur, dass er als Teil des Knopfes gelesen wird und nicht als eigene Linie. DER SICHTBARE RING IST EIN GESTALTUNGSPREIS, kein Fehler - so entschieden am 07.08.2026. */ .tm-btn--primary{ background:var(--tm-accent); color:var(--tm-accent-ink) } .tm-btn--primary:hover{ background:var(--tm-accent-hover) } .tm-btn--primary:disabled:hover, .tm-btn--primary[aria-disabled="true"]:hover{ background:var(--tm-accent) } .tm-btn--ghost:hover{ background:var(--tm-accent-soft) } .tm-btn--ghost:disabled:hover, .tm-btn--ghost[aria-disabled="true"]:hover{ background:transparent } .tm-btn--small{ padding:8px 16px; font-size:var(--tm-size-label) } .tm-chip{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border:1px solid var(--tm-border); border-radius:var(--tm-radius-pill); background:var(--tm-surface-2); color:var(--tm-text-2); font-size:var(--tm-size-label); font-weight:600 } .tm-mono{ font-family:var(--tm-font-mono); font-size:var(--tm-size-mono); color:var(--tm-text-4) } .tm-num{ font-variant-numeric:tabular-nums } /* start/end statt left/right: in einer RTL-Oberflaeche (pia. fuehrt Arabisch) stuende die Spaltenueberschrift sonst links und der Betrag rechts, also beide auf der falschen Seite. In LTR ist es Zeichen fuer Zeichen dasselbe Ergebnis - diese beiden Zeilen waren die einzigen physischen Richtungsangaben im ganzen Paket. */ .tm-table{ width:100%; border-collapse:collapse } .tm-table th{ text-align:start; border-bottom:1px solid var(--tm-border); color:var(--tm-text-3); font-size:var(--tm-size-eyebrow); font-weight:800; letter-spacing:.1em; text-transform:uppercase } .tm-table td{ border-bottom:1px solid var(--tm-border-weak); color:var(--tm-text-2) } .tm-table tbody tr:hover td{ background:var(--tm-hover) } .tm-table td.tm-amount{ text-align:end; font-family:var(--tm-font-mono); font-variant-numeric:tabular-nums; color:var(--tm-text-1) } /* Sieben Zustaende. Jede Anwendung baut alle sieben. --tm-c ist der Punkt und der Rand, also eine FLAECHE und eine LINIE. 'loading' faerbte beides mit --tm-text-3, einer Schriftfarbe. Das war die einzige Ausnahme in tomoris.rollen.json und ist jetzt aufgeloest: --tm-unknown ist die Rolle fuer 'Zustand nicht bekannt' und traegt die Kontrastzusage gegen den Grund, die eine Textstufe nicht hat. Die Tinte --tm-i bleibt --tm-text-3: als Schrift war sie immer richtig. */ .tm-state-loading { --tm-c:var(--tm-unknown); --tm-i:var(--tm-text-3); --tm-f:var(--tm-surface-2) } /* Die Tinte kommt aus --tm-accent-soft-ink, nicht aus --tm-accent-text: gemeldet von pia., wo dieses Paar hell auf 4,31 stand. In sieben von neun Farbwelten sind beide Werte gleich, das Bild aendert sich dort nicht. */ .tm-state-empty { --tm-c:var(--tm-accent); --tm-i:var(--tm-accent-soft-ink); --tm-f:var(--tm-accent-soft) } .tm-state-ok { --tm-c:var(--tm-ok); --tm-i:var(--tm-ok-ink); --tm-f:var(--tm-ok-fill) } .tm-state-warn { --tm-c:var(--tm-warn); --tm-i:var(--tm-warn-ink); --tm-f:var(--tm-warn-fill) } .tm-state-crit { --tm-c:var(--tm-crit); --tm-i:var(--tm-crit-ink); --tm-f:var(--tm-crit-fill) } .tm-state-denied { --tm-c:var(--tm-crit); --tm-i:var(--tm-crit-ink); --tm-f:var(--tm-crit-fill) } .tm-state-unlinked { --tm-c:var(--tm-unknown); --tm-i:var(--tm-unknown-ink); --tm-f:var(--tm-unknown-fill) } /* Die Rueckfallwerte sind --tm-unknown, nicht --tm-ok und nicht --tm-text-3. Wer .tm-dot ohne Zustandsklasse setzt, hat keinen Zustand - und ein Punkt, der ohne Zustand GRUEN zeigt, meldet Betrieb, wo nichts gemessen wurde. Der Default macht zu. */ .tm-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--tm-c, var(--tm-unknown)) } .tm-badge{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--tm-radius-marker); font-size:var(--tm-size-eyebrow); font-weight:800; color:var(--tm-i, var(--tm-text-2)); background:var(--tm-f, var(--tm-surface-2)); border:1px solid color-mix(in srgb, var(--tm-c, var(--tm-unknown)) 34%, transparent) } }