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.

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.

Licencja: MIT © konce.pt