node-K
Repositories
8
 Projects Packages
5

@node-k/styles (0.2.1)

Published 2026-09-23 21:08:36 +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.1
"@node-k/styles": "0.2.1"

About this package

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

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, 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-Buttons gefast, Status als Rand + ruhige Fläche, Formulare, 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 behalten Radien. Es gibt kein .nk-clip-btn in der Bootstrap-Brücke mehr; in nodek.css tragen die .nk-clip-* border: 0.
  • 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).
  • Status ist kein Markenton. .btn-success/.btn-danger = ruhige Fläche + Rand + Signalfarbe als Text — in beiden Modi ≥ 4,5:1, ohne modusabhängige Regel.

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.1

Peer dependencies

ID Version
bootstrap ^5.3.8
Details
npm
node-K/Design-System
2026-09-23 21:08:36 +02:00
14
2026-11-04 19:49:01 +01:00
MIT
8.6 KiB
Assets (1)
styles-0.2.1.tgz 8.6 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