node-K
Repositories
8
 Projects Packages
5

@node-k/styles (0.2.8)

Published 2026-10-11 20:58:28 +02:00 by registry-user in node-K/Design-System

Installation

@node-k:registry=
npm config set @node-k:registry=
npm install @node-k/styles@0.2.8
"@node-k/styles": "0.2.8"

About this package

@node-k/styles — die Brücke zu Bootstrap und Nuxt

Was sich zwischen den Versionen geändert hat — und was davon ein Bruch war — steht im Changelog aller vier Pakete: CHANGELOG.md.

Das Paket, nach dem eine App nach node-K aussieht, ohne dass eine Komponente portiert ist. Spezifikation: korrekturen/styles-paket.md. Stufe 2 von P6; private: true bis P6 fertig ist.

scss/_bridge.scss       Bootstrap-SCSS-Variablen (Bauzeit: Typo, Raster, Radien = 0, Kontrastwahl)
scss/bootstrap.scss     _bridge → bootstrap → bs-vars.css → bs-components.css
css/bs-vars.css         --bs-* → --nk-*  (die 28 modusabhängigen + Themenfarben), NACH bootstrap laden
css/bs-components.css   Übergang §6: Flächen- und Status-Buttons gefast, Formulare rechtwinklig, Fokus
css/nodek.css           framework-frei, für Nuxt — Fonts, Tokens, Grundtypografie, Fokusring, .nk-clip-*
theme-init.js           Anfangswert des Modus fürs <head>: Dunkel, überschreibbar über localStorage.nk-theme

Einbinden

Angular (Bootstrap aus SCSS, stylePreprocessorOptions.includePaths: ['node_modules']):

@import '@node-k/styles/scss/bootstrap';

Angular oder jede Seite mit vorkompiliertem bootstrap.css — die Brücke ist dann drei Dateien hinter Bootstrap:

<link rel="stylesheet" href="…/bootstrap.min.css">
<link rel="stylesheet" href="…/@node-k/tokens/dist/css/nodek-fonts.css">
<link rel="stylesheet" href="…/@node-k/tokens/dist/css/nodek-tokens.css">
<link rel="stylesheet" href="…/@node-k/styles/css/bs-vars.css">
<link rel="stylesheet" href="…/@node-k/styles/css/bs-components.css">

Nuxt:

css: ['@node-k/styles/css/nodek.css']

In allen Fällen ins <head>, vor dem ersten Stylesheet, der Inhalt von theme-init.js:

<script>(function(d){var t=null;try{t=localStorage.getItem('nk-theme')}catch(e){}t=t==='light'?'light':'dark';d.setAttribute('data-bs-theme',t);d.setAttribute('data-theme',t)})(document.documentElement)</script>

Ein Schalter in der App schreibt localStorage.nk-theme und setzt dieselben zwei Attribute. Ein heller Block im dunklen Dokument ist <div data-bs-theme="light"> — kein Sonderfall.

theme-init.js (732 B) wird inline ins <head> kopiert, vor dem ersten Stylesheet — kein Build-Schritt, kein externes Skript: beides bringt den Modusblitzer zurück. Preis: bei einem Upgrade muss neu kopiert werden. Deshalb bekommt jede Änderung an dieser Datei eine Zeile in ## Änderungen — das ist das Signal, an dem der Konsument merkt, dass er kopieren muss.

Regeln, die die Dateien tragen

  • Kein --bs-* auf einem festen Hexwert, kein Hex-Literal in der Brücke — npm run check (build/check.mjs) bricht sonst ab. Einzige Ausnahme: Häkchen/Punkt der Formularelemente als url("data:…"), weil var() in url() nicht möglich ist.
  • Ink auf Marke. .btn-primary trägt --nk-ink, nie Weiß. $color-contrast-dark ist Ink, nicht #000.
  • Fase gegen Rahmen. Flächen-Buttons: --bs-btn-border-width: 0 + aktive Fase; Outline-Buttons sind rechtwinklig — ein Rahmen und eine Fase schließen sich aus (Formregel c), der gefaste Umrissknopf zeichnet seine Linie seit 28.9. als Ring im ::before (--nk-frame-ring-*), nicht mehr als Doppelebene. Es gibt kein .nk-clip-btn in der Bootstrap-Brücke mehr; in nodek.css tragen die .nk-clip-* border: 0.
  • Zustände, eine Regel (28.9.). Jeder Knopf steht im Ruhezustand ohne Füllung — nur Linie und Schrift in seiner Farbe. Beim Überfahren kommt die Füllung in Vollfarbe dazu und die Schrift wird ausgeblendet — sie nimmt --nk-black, also die Farbe des Grundes, und ist damit ein echter Ausschnitt in beiden Modi. Hell trägt der Ausschnitt auf Orange 1,73:1 und auf Türkis 2,15:1, also weniger als die 4,5:1 der WCAG; bewusste Entscheidung vom 28.9. gegen einen gerenderten Vergleich beider Fassungen. Gedrückt = dieselben Farben, Lift weg. Kein Weiß an Linien oder Flächen. Der Ring sitzt auf .btn::before (--nk-frame-ring-btn-aktiv, evenodd), die Farbe in --nk-bs-btn-line. Überfahren nur unter @media (hover: hover) and (pointer: fine).
  • .btn-outline-* sind nur noch Schreibweisen derselben Variante: seit 28.9. steht jeder Knopf ohne Füllung. .btn-dark und .btn-light waren die letzten Knöpfe mit einem Pol als Fläche und nehmen jetzt den neutralen Ton (--nk-text-dim, mit --nk-black 6,9:1 in beiden Modi).
  • Felder bleiben rechtwinklig. <input> und <select> können kein Pseudoelement tragen, also auch keinen gefasten Ring; mit border wäre eine Fase ein Formverstoß. Das gefaste Feld ist <nk-input> — in der Brücke ist die rechtwinklige Form der Preis dafür, fremdes Markup zu bedienen.
  • Keine runden Elemente (28.9.). Alle fünf --bs-border-radius* und alle $border-radius* stehen auf 0. Was Bootstrap fest verdrahtet, zieht die Brücke nach: Kästchen (.25em), Radio (50%) und Schalterspur (2em) sind rechtwinklig, Knopf und Punkt gefaste Quadrate statt Kreise. --nk-r-pill hat im ganzen System keine Fundstelle mehr.
  • Fokus auf gefasten Flächen ist ein Doppelband innen (Ink + Fokusfarbe), weil clip-path einen äußeren Ring wegschneidet.
  • .text-secondary ist nicht „gedämpfter Text". Sie zieht die Themenfarbe (--nk-turq, auf Papier 2,15:1); gedämpfter Text ist .text-body-secondary (--nk-text-muted).
  • Nur Vollfarben (28.9.). Eine Fläche ist Kartenfarbe (--nk-surface) oder Vollton, dazwischen gibt es nichts; eine Linie ist immer Vollton. .btn-success/.btn-danger sind damit Flächen wie die Markenknöpfe — Vollton mit --nk-black als Schrift (9,28/5,48 bzw. 6,42/5,67). Die *-bg-subtle der Brücke zeigen auf --nk-surface, die *-border-subtle auf den Vollton; hell gewinnt der Text dadurch Kontrast. Die acht --nk-<ton>-bg/-border sind ausgelaufen und werden von build/check.mjs gemeldet.

Abnahme (styles-paket.md §9)

korrekturen/browsertest/p6-styles-bootstrap.html — dieselbe Seite, data-bs-theme umschaltbar, Brücke abschaltbar.

Änderungen

  • theme-init.js unverändert seit Anlage des Pakets.

Lücken, mit Nachweis

  • link.text-hover fehlt als Token. Geschlossen in P9.12c: der Rollen-Alias color.role.link-hover → --nk-link-hover ist gebaut (dunkel link.text, hell --nk-turq-deep #003c3c, 10,98:1). --bs-link-hover-color zeigt jetzt darauf. --nk-turq-deep bleibt als Markenfarbe bestehen — es ist ein fester Wert in beiden Modi, der Rollenname ist modusabhängig; darum ein zusätzlicher Name (174 → 175) statt einer Umbenennung.
  • -rgb-Begleiter kommen aus dem Token-Build (formats.mjs, Stufe 2). Bis tokens/dist neu gebaut ist, sind --bs-*-rgb unaufgelöst; betroffen sind nur rgba(var(--bs-…-rgb), α)-Utilities (.text-body, Tabellen-Streifen).

Dependencies

Dependencies

ID Version
@node-k/tokens 0.2.8

Peer dependencies

ID Version
bootstrap ^5.3.8
Details
npm
node-K/Design-System
2026-10-11 20:58:28 +02:00
34
2026-11-08 09:22:49 +01:00
MIT
latest
11 KiB
Assets (1)
styles-0.2.8.tgz 11 KiB
Versions (9) View all
0.2.8 2026-10-11
0.2.7 2026-10-04
0.2.6 2026-10-04
0.2.5 2026-09-30
0.2.4 2026-09-29
Issues