@konce-pt/tokens 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +60 -0
- package/package.json +21 -2
package/README.md
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
|
|
3
|
+
# Koncept UI — Design Tokens
|
|
4
|
+
|
|
5
|
+
**Design tokens for Koncept UI — OKLCH palette, light/dark theme, built with Style Dictionary.**
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/@konce-pt/tokens)
|
|
8
|
+
[](https://bundlephobia.com/package/@konce-pt/tokens)
|
|
9
|
+
[](https://gitlab.com/konce-pt/koncept-ui/-/blob/main/LICENSE)
|
|
10
|
+
|
|
11
|
+
</div>
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
The framework-agnostic foundation of [Koncept UI](https://www.npmjs.com/package/@konce-pt/angular). A three-tier token system (primitives → semantic → component) exported as **CSS custom properties**, **SCSS** and **TypeScript**. Neutral **OKLCH** palette with light and dark themes.
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm i @konce-pt/tokens
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Usage
|
|
24
|
+
|
|
25
|
+
```ts
|
|
26
|
+
// CSS custom properties (light + dark)
|
|
27
|
+
import '@konce-pt/tokens/css';
|
|
28
|
+
import '@konce-pt/tokens/css/dark';
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
```scss
|
|
32
|
+
// SCSS variables
|
|
33
|
+
@use '@konce-pt/tokens/scss' as tokens;
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
```ts
|
|
37
|
+
// TypeScript constants
|
|
38
|
+
import { tokens } from '@konce-pt/tokens';
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
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`.
|
|
42
|
+
|
|
43
|
+
## License
|
|
44
|
+
|
|
45
|
+
[MIT](./LICENSE) © konce.pt
|
|
46
|
+
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
## 🇵🇱 Wersja polska
|
|
50
|
+
|
|
51
|
+
Framework-agnostyczny fundament [Koncept UI](https://www.npmjs.com/package/@konce-pt/angular): trójpoziomowy system tokenów (prymitywy → semantyczne → komponentowe) eksportowany do **CSS custom properties**, **SCSS** i **TypeScript**. Neutralna paleta **OKLCH**, motyw jasny i ciemny.
|
|
52
|
+
|
|
53
|
+
```ts
|
|
54
|
+
import '@konce-pt/tokens/css';
|
|
55
|
+
import '@konce-pt/tokens/css/dark';
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
Każdy token to własność `--kpt-*`, np. `var(--kpt-color-primary)`. Motyw ciemny pod `[data-theme="dark"]`.
|
|
59
|
+
|
|
60
|
+
Licencja: [MIT](./LICENSE) © konce.pt
|
package/package.json
CHANGED
|
@@ -1,9 +1,28 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@konce-pt/tokens",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "Design
|
|
3
|
+
"version": "0.1.1",
|
|
4
|
+
"description": "Design tokens for Koncept UI — OKLCH palette, light/dark theme, built with Style Dictionary (CSS vars, SCSS, TS).",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "konce.pt",
|
|
7
|
+
"homepage": "https://gitlab.com/konce-pt/koncept-ui#readme",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "git+https://gitlab.com/konce-pt/koncept-ui.git",
|
|
11
|
+
"directory": "packages/tokens"
|
|
12
|
+
},
|
|
13
|
+
"bugs": {
|
|
14
|
+
"url": "https://gitlab.com/konce-pt/koncept-ui/-/issues"
|
|
15
|
+
},
|
|
16
|
+
"keywords": [
|
|
17
|
+
"design-tokens",
|
|
18
|
+
"css-variables",
|
|
19
|
+
"oklch",
|
|
20
|
+
"style-dictionary",
|
|
21
|
+
"theming",
|
|
22
|
+
"dark-mode",
|
|
23
|
+
"design-system",
|
|
24
|
+
"koncept-ui"
|
|
25
|
+
],
|
|
7
26
|
"sideEffects": [
|
|
8
27
|
"*.css"
|
|
9
28
|
],
|