l_cke_text-ui (0.1.3)

Published 2026-03-10 01:36:47 +00:00 by L_cke_text

Setup this registry in your project .npmrc file:

registry=

To install the package using npm, run the following command:

npm install l_cke_text-ui@0.1.3

or add it to the package.json file:

"l_cke_text-ui": "0.1.3"

For more information on the npm registry, see the documentation.

L_cke_text UI Design System

L_cke_text UI ist ein Vue-3-Designsystem mit klarer Schichtung: Design Tokens -> Theme-Tokens -> Primitive Layout-Komponenten -> UI-Komponenten.

Ziel ist eine konsistente, wartbare UI-Sprache mit vorhersehbaren APIs und wiederverwendbaren Bausteinen.

Architekturdiagramm (Kurzueberblick)

Consumer App
	|
	v
L_cke_text UI Plugin (src/index.ts)
	|
	+--> base.css      (globale Defaults, Focus, Reduced Motion)
	+--> tokens.css    (Foundation: Color/Space/Type/Radius/...)
	+--> themes.css    (Semantik: background/surface/text/primary/...)
	|
	+--> Primitives    (UiBox, UiGrid, UiStack, UiInline, ...)
	|        |
	|        +--> layout + spacing + structure
	|
	+--> UI Components (Form, Navigation, Feedback, Data Display)
			 |
			 +--> konsistente API + states + accessibility

Theme switch:
useTheme() -> data-nt-theme="light|dark" -> Theme-Tokens aktualisieren alle Komponenten.

Komponenten-Lebenszyklus (Mini-Diagramm)

Consumer Props / v-model
	|
	v
Component State + Composables
(z. B. useControllableState, useTheme)
	|
	v
Render in Vue Template
	|
	v
Styles aus Tokens + Theme-Variablen
(tokens.css + themes.css + overrides.css)
	|
	v
UI Output + Interaction Events
	|
	v
emit(...) / v-model:update -> zurueck an Consumer

Wie das Designsystem funktioniert

1) Design Tokens (Foundation)

Basiswerte liegen in src/styles/tokens.css und als TypeScript-Tokens in src/tokens/*.

Beispiele:

Farben: --nt-color-primary-*, --nt-color-neutral-*
Spacing: --nt-space-*
Radius: --nt-radius-*
Typografie: --nt-font-size-*, --nt-font-weight-*
Motion, Z-Index, Shadow

Regel: Komponenten verwenden Tokens statt harter Pixel-/Farbwerte.

2) Theme Layer (Semantik)

Semantische Theme-Variablen liegen in src/styles/themes.css:

--nt-theme-background, --nt-theme-surface
--nt-theme-text, --nt-theme-muted
--nt-theme-primary, --nt-theme-danger

Themes werden ueber data-nt-theme geschaltet:

data-nt-theme="light"
data-nt-theme="dark"

3) Base Layer (Global Behavior)

src/styles/base.css setzt globale, systemweite Defaults:

box-sizing: border-box
globale Schriftfamilie
Focus-Visibility (:focus-visible)
Reduced-Motion-Verhalten

4) Primitive Layout-Komponenten

Die Layout-Primitives sind die Grundlage fuer Seitenaufbau und Spacing:

UiBox: Container mit kontrolliertem Padding/Margin/Dimensionen
UiGrid: responsive Raster-Layouts
UiStack: vertikaler Flow mit konsistentem Abstand
UiInline: horizontaler Flow fuer Actions/Gruppen
UiText, UiHeading, UiLink, UiPrimitiveDivider: typografische und strukturelle Basis

Regel: Erst mit Primitives layouten, dann fachliche Komponenten einsetzen.

5) UI-Komponenten (Feature Layer)

Auf den Primitives aufbauend kommen Fachkomponenten wie:

Form: UiButton, UiInput, UiSelect, UiSlider, UiStepper, UiSwitch, UiCheckbox
Navigation: UiTabs, UiPagination, UiBreadcrumbs, UiAccordion, UiPageSlider
Feedback: UiToast, UiProgress, UiSkeleton, UiSpinner, UiCallout, UiEmptyState
Data Display: UiTable, UiMetric, UiTimeline, UiDataList, UiImageSlider, UiAvatar

Jede Komponente liegt in src/components/<Name>/ und folgt dem Muster:

Ui<Name>.vue
Ui<Name>.types.ts
Ui<Name>.overrides.css
optional: Ui<Name>.stories.ts, Ui<Name>.spec.ts, README.md

Schichten im Import-Flow

Die Library exportiert in src/index.ts:

./styles/base.css
./styles/themes.css
./styles/tokens.css
alle Komponenten, Composables und TS-Tokens

Damit kommt ein konsistentes Styling-System automatisch mit.

Theme-Steuerung im Code

useTheme() aus src/composables/useTheme.ts steuert Theme-Zustaende:

light
dark
system

Beispiel:

import { useTheme } from "l_cke_text-ui";

const { theme, resolvedTheme, setTheme } = useTheme();
setTheme("dark");

Verwendung im Consumer-Projekt

import { createApp } from "vue";
import App from "./App.vue";
import LckeTextUI from "l_cke_text-ui";
import "l_cke_text-ui/style.css";

createApp(App).use(LckeTextUI).mount("#app");

Entwicklungsprinzipien

Token-first statt Hardcoded Styles
Komposition statt monolithischer Einzelkomponenten
Konsistente API-Namings (Ui*, klare Props)
Accessibility by default (sichtbarer Fokus, semantische Struktur)
Dokumentation + Tests pro Komponente

Qualitätssicherung

Empfohlener Workflow vor Merge:

npm run format
npm run type-check
npm run test:unit -- --run

Weiterführende Doku

Uebersicht: docs/README.md
Theming: docs/theming.md
Playground: docs/playground.md
Publishing: docs/publishing.md
Package-Migration: docs/package-migration.md
Komponenten-Readmes: src/components/*/README.md

Development dependencies

ID	Version
@types/node	^22.13.1
@vitejs/plugin-vue	^5.2.1
@vue/test-utils	^2.4.6
jsdom	^25.0.1
prettier	^3.5.3
typescript	^5.9.2
vite	^5.4.11
vitest	^2.1.8
vue	^3.5.13
vue-tsc	^2.1.10

Peer dependencies

ID	Version
vue	^3.5.0

Details

npm

2026-03-10 01:36:47 +00:00

Project website

39 KiB

Assets (1)

l_cke_text-ui-0.1.3.tgz 39 KiB

Versions (5) View all

0.2.2

2026-03-15

0.2.1

2026-03-14

0.2.0