@konce-pt/tokens 0.1.0 → 0.1.2
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 +93 -0
- package/dist/css/tokens.d.ts +1 -0
- package/dist/css/tokens.dark.d.ts +1 -0
- package/dist/scss/_tokens.dark.scss +99 -0
- package/dist/scss/_tokens.scss +151 -1
- package/package.json +29 -4
package/README.md
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
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
|
+
**Angular CLI** — add the CSS to `angular.json → styles[]`:
|
|
26
|
+
|
|
27
|
+
```jsonc
|
|
28
|
+
"styles": [
|
|
29
|
+
"node_modules/@konce-pt/tokens/dist/css/tokens.css",
|
|
30
|
+
"node_modules/@konce-pt/tokens/dist/css/tokens.dark.css",
|
|
31
|
+
"src/styles.scss"
|
|
32
|
+
]
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
**Vite / webpack** — import the CSS directly:
|
|
36
|
+
|
|
37
|
+
```ts
|
|
38
|
+
import '@konce-pt/tokens/css';
|
|
39
|
+
import '@konce-pt/tokens/css/dark';
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
**SCSS** — the `./scss` entry gives both compile-time `$` values **and** mixins that emit the runtime custom properties:
|
|
43
|
+
|
|
44
|
+
```scss
|
|
45
|
+
@use '@konce-pt/tokens/scss' as t;
|
|
46
|
+
|
|
47
|
+
@include t.kpt-root-tokens; // :root { --kpt-* } (light + component tokens)
|
|
48
|
+
@include t.kpt-dark-tokens; // [data-theme="dark"] { … } (dark overrides)
|
|
49
|
+
|
|
50
|
+
.brand { color: t.$kpt-color-primary; } // compile-time value
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
**TypeScript constants**:
|
|
54
|
+
|
|
55
|
+
```ts
|
|
56
|
+
import { tokens } from '@konce-pt/tokens';
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
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`.
|
|
60
|
+
|
|
61
|
+
## License
|
|
62
|
+
|
|
63
|
+
[MIT](./LICENSE) © konce.pt
|
|
64
|
+
|
|
65
|
+
---
|
|
66
|
+
|
|
67
|
+
## 🇵🇱 Wersja polska
|
|
68
|
+
|
|
69
|
+
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.
|
|
70
|
+
|
|
71
|
+
**Angular CLI** — CSS w `angular.json → styles[]`:
|
|
72
|
+
|
|
73
|
+
```jsonc
|
|
74
|
+
"styles": [
|
|
75
|
+
"node_modules/@konce-pt/tokens/dist/css/tokens.css",
|
|
76
|
+
"node_modules/@konce-pt/tokens/dist/css/tokens.dark.css",
|
|
77
|
+
"src/styles.scss"
|
|
78
|
+
]
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
**Vite/webpack** — `import '@konce-pt/tokens/css'; import '@konce-pt/tokens/css/dark';`
|
|
82
|
+
|
|
83
|
+
**SCSS** — wejście `./scss` daje zmienne `$` (compile-time) oraz mixiny emitujące custom properties w runtime:
|
|
84
|
+
|
|
85
|
+
```scss
|
|
86
|
+
@use '@konce-pt/tokens/scss' as t;
|
|
87
|
+
@include t.kpt-root-tokens; // :root { --kpt-* }
|
|
88
|
+
@include t.kpt-dark-tokens; // [data-theme="dark"] { … }
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
Każdy token to własność `--kpt-*`, np. `var(--kpt-color-primary)`. Motyw ciemny pod `[data-theme="dark"]`.
|
|
92
|
+
|
|
93
|
+
Licencja: [MIT](./LICENSE) © konce.pt
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
// Do not edit directly, this file was auto-generated.
|
|
2
|
+
// Użycie: @use '@konce-pt/tokens/scss' as t; @include t.kpt-dark-tokens;
|
|
3
|
+
@mixin kpt-dark-tokens {
|
|
4
|
+
[data-theme="dark"] {
|
|
5
|
+
--kpt-color-neutral-0: oklch(1 0 0);
|
|
6
|
+
--kpt-color-neutral-50: oklch(0.985 0 0);
|
|
7
|
+
--kpt-color-neutral-100: oklch(0.967 0.001 286);
|
|
8
|
+
--kpt-color-neutral-200: oklch(0.920 0.004 286);
|
|
9
|
+
--kpt-color-neutral-300: oklch(0.871 0.006 286);
|
|
10
|
+
--kpt-color-neutral-400: oklch(0.705 0.015 286);
|
|
11
|
+
--kpt-color-neutral-500: oklch(0.552 0.016 286);
|
|
12
|
+
--kpt-color-neutral-600: oklch(0.442 0.017 286);
|
|
13
|
+
--kpt-color-neutral-700: oklch(0.370 0.013 286);
|
|
14
|
+
--kpt-color-neutral-800: oklch(0.274 0.006 286);
|
|
15
|
+
--kpt-color-neutral-900: oklch(0.210 0.006 286);
|
|
16
|
+
--kpt-color-neutral-950: oklch(0.141 0.005 286);
|
|
17
|
+
--kpt-color-neutral-1000: oklch(0 0 0);
|
|
18
|
+
--kpt-color-red-500: oklch(0.637 0.208 25);
|
|
19
|
+
--kpt-color-red-600: oklch(0.577 0.213 27);
|
|
20
|
+
--kpt-color-green-500: oklch(0.723 0.170 150);
|
|
21
|
+
--kpt-color-green-600: oklch(0.627 0.170 150);
|
|
22
|
+
--kpt-color-amber-500: oklch(0.769 0.160 70);
|
|
23
|
+
--kpt-color-amber-600: oklch(0.666 0.160 60);
|
|
24
|
+
--kpt-color-blue-500: oklch(0.623 0.170 250);
|
|
25
|
+
--kpt-color-blue-600: oklch(0.546 0.190 255);
|
|
26
|
+
--kpt-color-overlay-scrim: oklch(0 0 0 / 0.6);
|
|
27
|
+
--kpt-space-0: 0;
|
|
28
|
+
--kpt-space-1: 0.25rem;
|
|
29
|
+
--kpt-space-2: 0.5rem;
|
|
30
|
+
--kpt-space-3: 0.75rem;
|
|
31
|
+
--kpt-space-4: 1rem;
|
|
32
|
+
--kpt-space-5: 1.25rem;
|
|
33
|
+
--kpt-space-6: 1.5rem;
|
|
34
|
+
--kpt-space-8: 2rem;
|
|
35
|
+
--kpt-space-10: 2.5rem;
|
|
36
|
+
--kpt-space-12: 3rem;
|
|
37
|
+
--kpt-space-16: 4rem;
|
|
38
|
+
--kpt-radius-none: 0;
|
|
39
|
+
--kpt-radius-sm: 0.25rem;
|
|
40
|
+
--kpt-radius-md: 0.5rem;
|
|
41
|
+
--kpt-radius-lg: 0.75rem;
|
|
42
|
+
--kpt-radius-xl: 1rem;
|
|
43
|
+
--kpt-radius-full: 9999px;
|
|
44
|
+
--kpt-border-width-thin: 1px;
|
|
45
|
+
--kpt-border-width-medium: 2px;
|
|
46
|
+
--kpt-z-base: 0;
|
|
47
|
+
--kpt-z-raised: 10;
|
|
48
|
+
--kpt-z-dropdown: 1000;
|
|
49
|
+
--kpt-z-overlay: 1100;
|
|
50
|
+
--kpt-z-modal: 1200;
|
|
51
|
+
--kpt-z-toast: 1300;
|
|
52
|
+
--kpt-motion-duration-fast: 120ms;
|
|
53
|
+
--kpt-motion-duration-base: 200ms;
|
|
54
|
+
--kpt-motion-duration-slow: 320ms;
|
|
55
|
+
--kpt-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
56
|
+
--kpt-motion-easing-emphasized: cubic-bezier(0.3, 0, 0, 1);
|
|
57
|
+
--kpt-font-family-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
58
|
+
--kpt-font-family-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
|
|
59
|
+
--kpt-font-weight-regular: 400;
|
|
60
|
+
--kpt-font-weight-medium: 500;
|
|
61
|
+
--kpt-font-weight-semibold: 600;
|
|
62
|
+
--kpt-font-weight-bold: 700;
|
|
63
|
+
--kpt-font-size-xs: 0.75rem;
|
|
64
|
+
--kpt-font-size-sm: 0.875rem;
|
|
65
|
+
--kpt-font-size-md: 1rem;
|
|
66
|
+
--kpt-font-size-lg: 1.125rem;
|
|
67
|
+
--kpt-font-size-xl: 1.25rem;
|
|
68
|
+
--kpt-font-size-2xl: 1.5rem;
|
|
69
|
+
--kpt-font-size-3xl: 1.875rem;
|
|
70
|
+
--kpt-font-line-height-tight: 1.25;
|
|
71
|
+
--kpt-font-line-height-normal: 1.5;
|
|
72
|
+
--kpt-font-line-height-relaxed: 1.7;
|
|
73
|
+
--kpt-elevation-1: 0 1px 2px 0 oklch(0 0 0 / 0.5);
|
|
74
|
+
--kpt-elevation-2: 0 2px 6px -1px oklch(0 0 0 / 0.55), 0 1px 2px 0 oklch(0 0 0 / 0.4);
|
|
75
|
+
--kpt-elevation-3: 0 8px 16px -4px oklch(0 0 0 / 0.6), 0 2px 4px 0 oklch(0 0 0 / 0.4);
|
|
76
|
+
--kpt-elevation-4: 0 16px 28px -8px oklch(0 0 0 / 0.65), 0 4px 8px 0 oklch(0 0 0 / 0.45);
|
|
77
|
+
--kpt-color-surface: var(--kpt-color-neutral-950);
|
|
78
|
+
--kpt-color-surface-variant: var(--kpt-color-neutral-900);
|
|
79
|
+
--kpt-color-surface-raised: var(--kpt-color-neutral-900);
|
|
80
|
+
--kpt-color-surface-sunken: var(--kpt-color-neutral-1000);
|
|
81
|
+
--kpt-color-on-surface: var(--kpt-color-neutral-50);
|
|
82
|
+
--kpt-color-on-surface-muted: var(--kpt-color-neutral-400);
|
|
83
|
+
--kpt-color-border: var(--kpt-color-neutral-800);
|
|
84
|
+
--kpt-color-border-strong: var(--kpt-color-neutral-700);
|
|
85
|
+
--kpt-color-primary: var(--kpt-color-neutral-100);
|
|
86
|
+
--kpt-color-primary-hover: var(--kpt-color-neutral-200);
|
|
87
|
+
--kpt-color-primary-active: var(--kpt-color-neutral-300);
|
|
88
|
+
--kpt-color-on-primary: var(--kpt-color-neutral-900);
|
|
89
|
+
--kpt-color-muted: var(--kpt-color-neutral-800);
|
|
90
|
+
--kpt-color-muted-hover: var(--kpt-color-neutral-700);
|
|
91
|
+
--kpt-color-on-muted: var(--kpt-color-neutral-100);
|
|
92
|
+
--kpt-color-danger: var(--kpt-color-red-500);
|
|
93
|
+
--kpt-color-on-danger: var(--kpt-color-neutral-950);
|
|
94
|
+
--kpt-color-success: var(--kpt-color-green-500);
|
|
95
|
+
--kpt-color-warning: var(--kpt-color-amber-500);
|
|
96
|
+
--kpt-color-info: var(--kpt-color-blue-500);
|
|
97
|
+
--kpt-color-focus-ring: var(--kpt-color-neutral-100);
|
|
98
|
+
}
|
|
99
|
+
}
|
package/dist/scss/_tokens.scss
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
|
|
2
1
|
// Do not edit directly, this file was auto-generated.
|
|
2
|
+
@forward 'tokens.dark';
|
|
3
3
|
|
|
4
|
+
// Zmienne SCSS (wartości tokenów, compile-time).
|
|
4
5
|
$kpt-color-neutral-0: oklch(1 0 0);
|
|
5
6
|
$kpt-color-neutral-50: oklch(0.985 0 0);
|
|
6
7
|
$kpt-color-neutral-100: oklch(0.967 0.001 286);
|
|
@@ -143,3 +144,152 @@ $kpt-table-header-bg: $kpt-color-surface-variant;
|
|
|
143
144
|
$kpt-table-header-fg: $kpt-color-on-surface-muted;
|
|
144
145
|
$kpt-table-row-hover: $kpt-color-surface-variant;
|
|
145
146
|
$kpt-table-row-selected: $kpt-color-muted;
|
|
147
|
+
|
|
148
|
+
// Custom properties w runtime (light + komponenty).
|
|
149
|
+
// Użycie: @use '@konce-pt/tokens/scss' as t; @include t.kpt-root-tokens;
|
|
150
|
+
@mixin kpt-root-tokens {
|
|
151
|
+
:root {
|
|
152
|
+
--kpt-color-neutral-0: oklch(1 0 0);
|
|
153
|
+
--kpt-color-neutral-50: oklch(0.985 0 0);
|
|
154
|
+
--kpt-color-neutral-100: oklch(0.967 0.001 286);
|
|
155
|
+
--kpt-color-neutral-200: oklch(0.920 0.004 286);
|
|
156
|
+
--kpt-color-neutral-300: oklch(0.871 0.006 286);
|
|
157
|
+
--kpt-color-neutral-400: oklch(0.705 0.015 286);
|
|
158
|
+
--kpt-color-neutral-500: oklch(0.552 0.016 286);
|
|
159
|
+
--kpt-color-neutral-600: oklch(0.442 0.017 286);
|
|
160
|
+
--kpt-color-neutral-700: oklch(0.370 0.013 286);
|
|
161
|
+
--kpt-color-neutral-800: oklch(0.274 0.006 286);
|
|
162
|
+
--kpt-color-neutral-900: oklch(0.210 0.006 286);
|
|
163
|
+
--kpt-color-neutral-950: oklch(0.141 0.005 286);
|
|
164
|
+
--kpt-color-neutral-1000: oklch(0 0 0);
|
|
165
|
+
--kpt-color-red-500: oklch(0.637 0.208 25);
|
|
166
|
+
--kpt-color-red-600: oklch(0.577 0.213 27);
|
|
167
|
+
--kpt-color-green-500: oklch(0.723 0.170 150);
|
|
168
|
+
--kpt-color-green-600: oklch(0.627 0.170 150);
|
|
169
|
+
--kpt-color-amber-500: oklch(0.769 0.160 70);
|
|
170
|
+
--kpt-color-amber-600: oklch(0.666 0.160 60);
|
|
171
|
+
--kpt-color-blue-500: oklch(0.623 0.170 250);
|
|
172
|
+
--kpt-color-blue-600: oklch(0.546 0.190 255);
|
|
173
|
+
--kpt-color-overlay-scrim: oklch(0.141 0.005 286 / 0.5);
|
|
174
|
+
--kpt-space-0: 0;
|
|
175
|
+
--kpt-space-1: 0.25rem;
|
|
176
|
+
--kpt-space-2: 0.5rem;
|
|
177
|
+
--kpt-space-3: 0.75rem;
|
|
178
|
+
--kpt-space-4: 1rem;
|
|
179
|
+
--kpt-space-5: 1.25rem;
|
|
180
|
+
--kpt-space-6: 1.5rem;
|
|
181
|
+
--kpt-space-8: 2rem;
|
|
182
|
+
--kpt-space-10: 2.5rem;
|
|
183
|
+
--kpt-space-12: 3rem;
|
|
184
|
+
--kpt-space-16: 4rem;
|
|
185
|
+
--kpt-radius-none: 0;
|
|
186
|
+
--kpt-radius-sm: 0.25rem;
|
|
187
|
+
--kpt-radius-md: 0.5rem;
|
|
188
|
+
--kpt-radius-lg: 0.75rem;
|
|
189
|
+
--kpt-radius-xl: 1rem;
|
|
190
|
+
--kpt-radius-full: 9999px;
|
|
191
|
+
--kpt-border-width-thin: 1px;
|
|
192
|
+
--kpt-border-width-medium: 2px;
|
|
193
|
+
--kpt-z-base: 0;
|
|
194
|
+
--kpt-z-raised: 10;
|
|
195
|
+
--kpt-z-dropdown: 1000;
|
|
196
|
+
--kpt-z-overlay: 1100;
|
|
197
|
+
--kpt-z-modal: 1200;
|
|
198
|
+
--kpt-z-toast: 1300;
|
|
199
|
+
--kpt-motion-duration-fast: 120ms;
|
|
200
|
+
--kpt-motion-duration-base: 200ms;
|
|
201
|
+
--kpt-motion-duration-slow: 320ms;
|
|
202
|
+
--kpt-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
203
|
+
--kpt-motion-easing-emphasized: cubic-bezier(0.3, 0, 0, 1);
|
|
204
|
+
--kpt-font-family-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
205
|
+
--kpt-font-family-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
|
|
206
|
+
--kpt-font-weight-regular: 400;
|
|
207
|
+
--kpt-font-weight-medium: 500;
|
|
208
|
+
--kpt-font-weight-semibold: 600;
|
|
209
|
+
--kpt-font-weight-bold: 700;
|
|
210
|
+
--kpt-font-size-xs: 0.75rem;
|
|
211
|
+
--kpt-font-size-sm: 0.875rem;
|
|
212
|
+
--kpt-font-size-md: 1rem;
|
|
213
|
+
--kpt-font-size-lg: 1.125rem;
|
|
214
|
+
--kpt-font-size-xl: 1.25rem;
|
|
215
|
+
--kpt-font-size-2xl: 1.5rem;
|
|
216
|
+
--kpt-font-size-3xl: 1.875rem;
|
|
217
|
+
--kpt-font-line-height-tight: 1.25;
|
|
218
|
+
--kpt-font-line-height-normal: 1.5;
|
|
219
|
+
--kpt-font-line-height-relaxed: 1.7;
|
|
220
|
+
--kpt-elevation-1: 0 1px 2px 0 oklch(0.141 0.005 286 / 0.08);
|
|
221
|
+
--kpt-elevation-2: 0 2px 6px -1px oklch(0.141 0.005 286 / 0.10), 0 1px 2px 0 oklch(0.141 0.005 286 / 0.06);
|
|
222
|
+
--kpt-elevation-3: 0 8px 16px -4px oklch(0.141 0.005 286 / 0.12), 0 2px 4px 0 oklch(0.141 0.005 286 / 0.06);
|
|
223
|
+
--kpt-elevation-4: 0 16px 28px -8px oklch(0.141 0.005 286 / 0.16), 0 4px 8px 0 oklch(0.141 0.005 286 / 0.08);
|
|
224
|
+
--kpt-toolbar-height: 3.5rem;
|
|
225
|
+
--kpt-sidenav-width: 16rem;
|
|
226
|
+
--kpt-color-surface: var(--kpt-color-neutral-0);
|
|
227
|
+
--kpt-color-surface-variant: var(--kpt-color-neutral-50);
|
|
228
|
+
--kpt-color-surface-raised: var(--kpt-color-neutral-0);
|
|
229
|
+
--kpt-color-surface-sunken: var(--kpt-color-neutral-100);
|
|
230
|
+
--kpt-color-on-surface: var(--kpt-color-neutral-900);
|
|
231
|
+
--kpt-color-on-surface-muted: var(--kpt-color-neutral-500);
|
|
232
|
+
--kpt-color-border: var(--kpt-color-neutral-200);
|
|
233
|
+
--kpt-color-border-strong: var(--kpt-color-neutral-300);
|
|
234
|
+
--kpt-color-primary: var(--kpt-color-neutral-900);
|
|
235
|
+
--kpt-color-primary-hover: var(--kpt-color-neutral-800);
|
|
236
|
+
--kpt-color-primary-active: var(--kpt-color-neutral-700);
|
|
237
|
+
--kpt-color-on-primary: var(--kpt-color-neutral-50);
|
|
238
|
+
--kpt-color-muted: var(--kpt-color-neutral-100);
|
|
239
|
+
--kpt-color-muted-hover: var(--kpt-color-neutral-200);
|
|
240
|
+
--kpt-color-on-muted: var(--kpt-color-neutral-800);
|
|
241
|
+
--kpt-color-danger: var(--kpt-color-red-600);
|
|
242
|
+
--kpt-color-on-danger: var(--kpt-color-neutral-0);
|
|
243
|
+
--kpt-color-success: var(--kpt-color-green-600);
|
|
244
|
+
--kpt-color-warning: var(--kpt-color-amber-600);
|
|
245
|
+
--kpt-color-info: var(--kpt-color-blue-600);
|
|
246
|
+
--kpt-color-focus-ring: var(--kpt-color-neutral-900);
|
|
247
|
+
--kpt-button-radius: var(--kpt-radius-md);
|
|
248
|
+
--kpt-button-font-weight: var(--kpt-font-weight-medium);
|
|
249
|
+
--kpt-button-gap: var(--kpt-space-2);
|
|
250
|
+
--kpt-form-field-radius: var(--kpt-radius-md);
|
|
251
|
+
--kpt-card-radius: var(--kpt-radius-lg);
|
|
252
|
+
--kpt-card-padding: var(--kpt-space-6);
|
|
253
|
+
--kpt-card-shadow: var(--kpt-elevation-2);
|
|
254
|
+
--kpt-table-radius: var(--kpt-radius-lg);
|
|
255
|
+
--kpt-table-cell-padding: var(--kpt-space-3);
|
|
256
|
+
--kpt-button-filled-bg: var(--kpt-color-primary);
|
|
257
|
+
--kpt-button-filled-fg: var(--kpt-color-on-primary);
|
|
258
|
+
--kpt-button-filled-bg-hover: var(--kpt-color-primary-hover);
|
|
259
|
+
--kpt-button-filled-bg-active: var(--kpt-color-primary-active);
|
|
260
|
+
--kpt-button-tonal-bg: var(--kpt-color-muted);
|
|
261
|
+
--kpt-button-tonal-fg: var(--kpt-color-on-muted);
|
|
262
|
+
--kpt-button-tonal-bg-hover: var(--kpt-color-muted-hover);
|
|
263
|
+
--kpt-button-outline-border: var(--kpt-color-border-strong);
|
|
264
|
+
--kpt-button-outline-fg: var(--kpt-color-on-surface);
|
|
265
|
+
--kpt-button-outline-bg-hover: var(--kpt-color-muted);
|
|
266
|
+
--kpt-button-text-fg: var(--kpt-color-on-surface);
|
|
267
|
+
--kpt-button-text-bg-hover: var(--kpt-color-muted);
|
|
268
|
+
--kpt-form-field-bg: var(--kpt-color-surface);
|
|
269
|
+
--kpt-form-field-text: var(--kpt-color-on-surface);
|
|
270
|
+
--kpt-form-field-placeholder: var(--kpt-color-on-surface-muted);
|
|
271
|
+
--kpt-form-field-label: var(--kpt-color-on-surface);
|
|
272
|
+
--kpt-form-field-hint: var(--kpt-color-on-surface-muted);
|
|
273
|
+
--kpt-form-field-border: var(--kpt-color-border-strong);
|
|
274
|
+
--kpt-form-field-border-hover: var(--kpt-color-on-surface-muted);
|
|
275
|
+
--kpt-form-field-border-focus: var(--kpt-color-focus-ring);
|
|
276
|
+
--kpt-form-field-border-error: var(--kpt-color-danger);
|
|
277
|
+
--kpt-form-field-error: var(--kpt-color-danger);
|
|
278
|
+
--kpt-card-bg: var(--kpt-color-surface-raised);
|
|
279
|
+
--kpt-card-fg: var(--kpt-color-on-surface);
|
|
280
|
+
--kpt-card-border: var(--kpt-color-border);
|
|
281
|
+
--kpt-toolbar-bg: var(--kpt-color-surface-raised);
|
|
282
|
+
--kpt-toolbar-fg: var(--kpt-color-on-surface);
|
|
283
|
+
--kpt-toolbar-border: var(--kpt-color-border);
|
|
284
|
+
--kpt-sidenav-bg: var(--kpt-color-surface-variant);
|
|
285
|
+
--kpt-sidenav-fg: var(--kpt-color-on-surface);
|
|
286
|
+
--kpt-sidenav-border: var(--kpt-color-border);
|
|
287
|
+
--kpt-table-bg: var(--kpt-color-surface-raised);
|
|
288
|
+
--kpt-table-fg: var(--kpt-color-on-surface);
|
|
289
|
+
--kpt-table-border: var(--kpt-color-border);
|
|
290
|
+
--kpt-table-header-bg: var(--kpt-color-surface-variant);
|
|
291
|
+
--kpt-table-header-fg: var(--kpt-color-on-surface-muted);
|
|
292
|
+
--kpt-table-row-hover: var(--kpt-color-surface-variant);
|
|
293
|
+
--kpt-table-row-selected: var(--kpt-color-muted);
|
|
294
|
+
}
|
|
295
|
+
}
|
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.2",
|
|
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
|
],
|
|
@@ -13,8 +32,14 @@
|
|
|
13
32
|
"types": "./dist/js/tokens.d.ts",
|
|
14
33
|
"default": "./dist/js/tokens.js"
|
|
15
34
|
},
|
|
16
|
-
"./css":
|
|
17
|
-
|
|
35
|
+
"./css": {
|
|
36
|
+
"types": "./dist/css/tokens.d.ts",
|
|
37
|
+
"default": "./dist/css/tokens.css"
|
|
38
|
+
},
|
|
39
|
+
"./css/dark": {
|
|
40
|
+
"types": "./dist/css/tokens.dark.d.ts",
|
|
41
|
+
"default": "./dist/css/tokens.dark.css"
|
|
42
|
+
},
|
|
18
43
|
"./scss": "./dist/scss/_tokens.scss"
|
|
19
44
|
},
|
|
20
45
|
"files": [
|