Koncept UI — Design Tokens

Design tokens for Koncept UI — OKLCH palette, light/dark theme, built with Style Dictionary.

The framework-agnostic foundation of Koncept UI. A three-tier token system (primitives → semantic → component) exported as CSS custom properties, SCSS and TypeScript. Neutral OKLCH palette with light and dark themes.

Installation

npm i @konce-pt/tokens

Usage

Angular CLI — add the CSS to angular.json → styles[]:

"styles": [
  "node_modules/@konce-pt/tokens/dist/css/tokens.css",
  "node_modules/@konce-pt/tokens/dist/css/tokens.dark.css",
  "src/styles.scss"
]

Vite / webpack — import the CSS directly:

import '@konce-pt/tokens/css';
import '@konce-pt/tokens/css/dark';

SCSS — the ./scss entry gives both compile-time $ values and mixins that emit the runtime custom properties:

@use '@konce-pt/tokens/scss' as t;

@include t.kpt-root-tokens;   // :root { --kpt-* }         (light + component tokens)
@include t.kpt-dark-tokens;   // [data-theme="dark"] { … } (dark overrides)

.brand { color: t.$kpt-color-primary; } // compile-time value

TypeScript constants:

import { tokens } from '@konce-pt/tokens';

Every token is a --kpt-* custom property, e.g. var(--kpt-color-primary), var(--kpt-space-4), var(--kpt-radius-md). Dark theme activates under [data-theme="dark"] or prefers-color-scheme: dark.

Breakpoints

Responsive breakpoints are primitives, so the whole library shares one contract:

| Token | Value | | --- | --- | | --kpt-breakpoint-sm | 640px | | --kpt-breakpoint-md | 768px | | --kpt-breakpoint-lg | 1024px | | --kpt-breakpoint-xl | 1280px | | --kpt-breakpoint-2xl | 1536px |

@media cannot read var(), so use the SCSS variant in queries and keep the custom properties for documentation and reads from JavaScript:

@use '@konce-pt/tokens/scss' as t;

@media (min-width: t.$kpt-breakpoint-md) { /* … */ }

@konce-pt/grid builds its whole layout system on these tokens.

Semantic layer & block allowlist

The semantic tier covers surfaces (surface, -raised|-sunken|-hover|-selected), text (on-surface, -muted; aliases text, text-muted, text-subtle, text-inverse), borders, and every accent role in full — primary/danger/success/warning/info each with -hover/-contrast/-subtle/-border — plus shadows --kpt-elevation-1..4 (aliases --kpt-shadow-{sm,md,lg}).

The build also emits dist/registry/tokens.json — an allowlist (name, value, layer, blockUsable, description) that powers token validation for Koncept UI blocks.

License

MIT © konce.pt

🇵🇱 Wersja polska

Framework-agnostyczny fundament Koncept UI: trójpoziomowy system tokenów (prymitywy → semantyczne → komponentowe) eksportowany do CSS custom properties, SCSS i TypeScript. Neutralna paleta OKLCH, motyw jasny i ciemny.

Angular CLI — CSS w angular.json → styles[]:

"styles": [
  "node_modules/@konce-pt/tokens/dist/css/tokens.css",
  "node_modules/@konce-pt/tokens/dist/css/tokens.dark.css",
  "src/styles.scss"
]

Vite/webpack — import '@konce-pt/tokens/css'; import '@konce-pt/tokens/css/dark';

SCSS — wejście ./scss daje zmienne $ (compile-time) oraz mixiny emitujące custom properties w runtime:

@use '@konce-pt/tokens/scss' as t;
@include t.kpt-root-tokens;   // :root { --kpt-* }
@include t.kpt-dark-tokens;   // [data-theme="dark"] { … }

Breakpointy — prymitywy wspólne dla całej biblioteki: sm 640px, md 768px, lg 1024px, xl 1280px, 2xl 1536px. W @media używaj wariantu SCSS (t.$kpt-breakpoint-md), bo @media nie potrafi czytać var(); custom properties --kpt-breakpoint-* służą dokumentacji i odczytowi z JavaScriptu. Na tych tokenach stoi cały @konce-pt/grid.

Każdy token to własność --kpt-*, np. var(--kpt-color-primary). Motyw ciemny pod [data-theme="dark"].

Licencja: MIT © konce.pt