@node-k/assets (0.2.4)
Installation
@node-k:registry=npm config set @node-k:registry=npm install @node-k/assets@0.2.4"@node-k/assets": "0.2.4"About this package
@node-k/assets
Icons, Marker, Chips, Muster, Wortmarken, Wort-Bild-Marken und Sticker des node-K Design Systems. Eine Quelle, drei Ausgabeformen.
../assets/svg/** Quelle — tokenisiert, mit Rückfallwerten (im Repository)
↓ npm run build
dist/svg/** 1:1 die Quelle — für inline eingebettetes SVG und das Sprite
dist/svg-mono/** einfarbig, currentColor — für Icons in Text, Knöpfen, Links
dist/svg-flat/** Tokens aufgelöst, ohne <style>, Schutzkontur als Geometrie
dist/sprite.svg Icons, Aktionen und Marker als <symbol>
Welche Form wann
| Kontext | Form | Verhalten |
|---|---|---|
| inline im Dokument | dist/svg/** |
nimmt die Tokens an, wechselt mit dem Modus |
<use href="sprite.svg#nk-icon-…"> |
dist/sprite.svg |
dito, Custom Properties dringen in den Schattenbaum |
| Icon in Text, Knopf, Link | dist/svg-mono/** |
nimmt die Textfarbe an — auch im Hover und im Fokus |
<img>, Datei direkt geöffnet |
jede Form | Rückfallwert, also das heutige Aussehen |
| Druck, Schnittplotter, E-Mail | dist/svg-flat/** |
feste Werte, kein CSS, kein Filter |
Die Quelle behält ihre Literale als Rückfallwerte — fill:var(--nk-orange,#fbaa2b).
Eine SVG-Datei muss ohne Stylesheet stimmen (Regel 2 des Arbeitsauftrags).
Die sechs Rollen
| Klasse | Rolle | Token | dunkel | hell |
|---|---|---|---|---|
.nk-b · .nk-bs |
Hauptform | --nk-orange |
#fbaa2b |
#fbaa2b |
.nk-a · .nk-as |
Akzent | --nk-turq |
#00baba |
#00baba |
.nk-t · .nk-ts |
Zeichen auf der Bühne | --nk-text |
#f5f2ec |
#1c1c1c |
.nk-i · .nk-is |
Grund (Kachel, Kartenfläche) | --nk-black |
#171717 |
#f5f2ec |
.nk-on · .nk-ons |
Zeichen auf einer Markenfläche | --nk-ink |
#171717 |
#171717 |
.nk-ok · .nk-danger (+ s) |
Statusmarker | --nk-ok · --nk-danger |
#3ad29a · #ff6b5e |
#186f50 · #bf1400 |
.nk-if · .nk-i2f |
Schutzkontur (flood-color) |
--nk-black · --nk-black-deep |
#171717 · #0e0e0e |
#f5f2ec · #eae6dd |
Eine Klasse bedient genau eine Eigenschaft: fill, stroke (Suffix s) oder
flood-color. In 20 Dateien steht dieselbe Farbe als Fläche und als Kontur —
deshalb die Trennung.
Feste Fassungen
Acht Zeichnungen lagen zweimal im Repository, einmal hell und einmal dunkel. Gepflegt wird jetzt eine Quelle; der Build löst sie an beiden Polen auf:
| Quelle | heller Pol | dunkler Pol |
|---|---|---|
wordmark/weiss.svg |
dist/svg-flat/wordmark/weiss.svg |
…/schwarz.svg |
wordmark/nur-k-gelb-zeile2-tuerkis.svg |
dito | …-schwarz.svg |
wbm/colored-dark.svg |
…/colored-dark.svg |
…/colored-light.svg |
wbm/entwurf/mono-weiss.svg |
…/mono-weiss.svg |
…/mono-schwarz.svg |
sticker/karte-dunkel.svg |
…/karte-dunkel.svg |
…/karte-hell.svg |
wordmark/entwurf/nur-k-gelb.svg · zeile2-tuerkis.svg · gelb-blau.svg |
dito | …-schwarz.svg |
Namen und Aussehen bleiben; nur gepflegt wird noch die halbe Zahl an Dateien.
Schutzkontur
sticker/ und wbm/ tragen die Schutzkontur als feDropShadow mit
flood-color je Rolle. Affinity und die meisten Produktionswerkzeuge verwerfen
SVG-Filter beim Import (gemessen am 7.9.2026) — dist/svg-flat/** enthält
deshalb keinen einzigen <filter>: die Kontur ist dort eine Fläche, gezeichnet
als Versatzkontur hinter der Marke, Breite = 2 × stdDeviation.
Was literal bleibt
42 Farbattribute in zehn Dateien unter app/ — Fremdmarken (forgejo, nextcloud,
matrix, komodo, vaultwarden, wiki) und die vier 256 × 256-Kacheln für App-Symbole,
Favicons und Avatare. Sie stehen außerhalb jeder Seite und haben keine Bühne, mit
der sie kippen könnten. Dazu qr/node-k-at.svg: die Modulmatrix braucht echtes
Weiß, sonst liest kein Scanner mehr.
Build und Prüfung
npm run build -w assets-pkg
Der Build fährt vier Prüfungen und bricht bei jedem Verstoß mit Exit 1 ab:
- kein
fill="#…"außerhalb einer Rollenklasse in der Web-Fassung - keine Farbe, die nicht in der Rollenliste steht — eine neue Farbe ist ein Fehler
- die drei Ausgaben stammen nachweislich aus derselben Quelle (kein Drift)
- kein
<filter>indist/svg-flat/**
Dazu die Nebenbedingung aus Regel 2: jedes var(--nk-…) in der Quelle trägt einen
Rückfallwert.
Muster als Hintergrundbild
background-image: url(…) lädt die Datei isoliert — dort greifen die Tokens
nicht, es gilt der Rückfallwert. Für die zwei Punktraster gibt es die
Token-Gradienten --nk-dots-orange und --nk-dots-turq; für Parkett, Schraffur
und Plus-Gitter das Muster inline in eine absolut positionierte Ebene legen.
Dependencies
Dependencies
| ID | Version |
|---|---|
| @node-k/tokens | 0.2.3 |