Koncept UI — Base Styles

Base CSS for Koncept UI — reset, cascade layers and neutral light/dark theme.

The base stylesheet for Koncept UI: a modern reset, typography, and CSS @layer ordering (kpt.reset, kpt.base, kpt.components, kpt.utilities) so consumers can override styles without specificity wars. Built on top of @konce-pt/tokens.

Installation

npm i @konce-pt/styles @konce-pt/tokens

Usage

Load after the tokens (it consumes the --kpt-* custom properties at runtime).

Angular CLI — angular.json → styles[] (tokens first, then this, then your src/styles.scss):

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

Vite / webpack — import directly (after the tokens CSS):

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

Or compose the SCSS source into your own build:

@use '@konce-pt/styles/scss';

Layout

Layout is a separate, optional package: @konce-pt/grid — a mobile-first grid with flexbox, gap and order utilities. Load it right after this stylesheet:

import '@konce-pt/styles';
import '@konce-pt/grid';

It writes into the same kpt.utilities layer and repeats the layer-order declaration at the top of its own sheet, so it works with or without this package, and its layout classes win over component styles without touching specificity.

Full reference for LLMs: llms.txt (EN) and llms-pl.txt (PL).

License

MIT © konce.pt

🇵🇱 Wersja polska

Bazowy arkusz stylów Koncept UI: nowoczesny reset, typografia i warstwy CSS @layer (kpt.reset, kpt.base, kpt.components, kpt.utilities) — łatwe nadpisywanie bez wojen specyficzności. Bazuje na @konce-pt/tokens; ładuj po tokenach.

Angular CLI — angular.json → styles[] (najpierw tokeny, potem ten plik, na końcu Twój src/styles.scss):

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

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

Układ to osobna, opcjonalna paczka @konce-pt/grid (siatka mobile-first, flexbox, gap, order) — ładuj ją zaraz po tym arkuszu. Pisze do tej samej warstwy kpt.utilities i powtarza deklarację kolejności warstw, więc działa też bez tej paczki.

Pełny opis: llms.txt (EN) i llms-pl.txt (PL).

Licencja: MIT © konce.pt