@konce-pt/tokens 0.1.1 → 0.2.0

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.
Files changed (11) hide show
  1. package/README.md +40 -7
  2. package/dist/css/tokens.css +46 -1
  3. package/dist/css/tokens.d.ts +1 -0
  4. package/dist/css/tokens.dark.css +45 -0
  5. package/dist/css/tokens.dark.d.ts +1 -0
  6. package/dist/js/tokens.d.ts +45 -0
  7. package/dist/js/tokens.js +49 -2
  8. package/dist/registry/tokens.json +1744 -0
  9. package/dist/scss/_tokens.dark.scss +144 -0
  10. package/dist/scss/_tokens.scss +242 -2
  11. package/package.json +9 -3
package/README.md CHANGED
@@ -22,19 +22,37 @@ npm i @konce-pt/tokens
22
22
 
23
23
  ## Usage
24
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
+
25
37
  ```ts
26
- // CSS custom properties (light + dark)
27
38
  import '@konce-pt/tokens/css';
28
39
  import '@konce-pt/tokens/css/dark';
29
40
  ```
30
41
 
42
+ **SCSS** — the `./scss` entry gives both compile-time `$` values **and** mixins that emit the runtime custom properties:
43
+
31
44
  ```scss
32
- // SCSS variables
33
- @use '@konce-pt/tokens/scss' as tokens;
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
34
51
  ```
35
52
 
53
+ **TypeScript constants**:
54
+
36
55
  ```ts
37
- // TypeScript constants
38
56
  import { tokens } from '@konce-pt/tokens';
39
57
  ```
40
58
 
@@ -50,9 +68,24 @@ Every token is a `--kpt-*` custom property, e.g. `var(--kpt-color-primary)`, `va
50
68
 
51
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.
52
70
 
53
- ```ts
54
- import '@konce-pt/tokens/css';
55
- import '@konce-pt/tokens/css/dark';
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"] { … }
56
89
  ```
57
90
 
58
91
  Każdy token to własność `--kpt-*`, np. `var(--kpt-color-primary)`. Motyw ciemny pod `[data-theme="dark"]`.
package/dist/css/tokens.css CHANGED
@@ -16,14 +16,30 @@
16
16
  --kpt-color-neutral-900: oklch(0.210 0.006 286);
17
17
  --kpt-color-neutral-950: oklch(0.141 0.005 286);
18
18
  --kpt-color-neutral-1000: oklch(0 0 0);
19
+ --kpt-color-red-50: oklch(0.971 0.013 25);
20
+ --kpt-color-red-200: oklch(0.885 0.062 25);
19
21
  --kpt-color-red-500: oklch(0.637 0.208 25);
20
22
  --kpt-color-red-600: oklch(0.577 0.213 27);
23
+ --kpt-color-red-700: oklch(0.505 0.190 27);
24
+ --kpt-color-red-950: oklch(0.260 0.090 27);
25
+ --kpt-color-green-50: oklch(0.975 0.030 150);
26
+ --kpt-color-green-200: oklch(0.900 0.070 150);
21
27
  --kpt-color-green-500: oklch(0.723 0.170 150);
22
28
  --kpt-color-green-600: oklch(0.627 0.170 150);
29
+ --kpt-color-green-700: oklch(0.530 0.150 150);
30
+ --kpt-color-green-950: oklch(0.270 0.060 150);
31
+ --kpt-color-amber-50: oklch(0.980 0.030 80);
32
+ --kpt-color-amber-200: oklch(0.920 0.080 75);
23
33
  --kpt-color-amber-500: oklch(0.769 0.160 70);
24
34
  --kpt-color-amber-600: oklch(0.666 0.160 60);
35
+ --kpt-color-amber-700: oklch(0.550 0.130 55);
36
+ --kpt-color-amber-950: oklch(0.280 0.060 60);
37
+ --kpt-color-blue-50: oklch(0.970 0.015 255);
38
+ --kpt-color-blue-200: oklch(0.880 0.050 255);
25
39
  --kpt-color-blue-500: oklch(0.623 0.170 250);
26
40
  --kpt-color-blue-600: oklch(0.546 0.190 255);
41
+ --kpt-color-blue-700: oklch(0.470 0.160 255);
42
+ --kpt-color-blue-950: oklch(0.280 0.090 265);
27
43
  --kpt-color-overlay-scrim: oklch(0.141 0.005 286 / 0.5);
28
44
  --kpt-space-0: 0;
29
45
  --kpt-space-1: 0.25rem;
@@ -81,23 +97,48 @@
81
97
  --kpt-color-surface-variant: var(--kpt-color-neutral-50);
82
98
  --kpt-color-surface-raised: var(--kpt-color-neutral-0);
83
99
  --kpt-color-surface-sunken: var(--kpt-color-neutral-100);
100
+ --kpt-color-surface-hover: var(--kpt-color-neutral-50);
101
+ --kpt-color-surface-selected: var(--kpt-color-neutral-100);
84
102
  --kpt-color-on-surface: var(--kpt-color-neutral-900);
85
103
  --kpt-color-on-surface-muted: var(--kpt-color-neutral-500);
104
+ --kpt-color-text-subtle: var(--kpt-color-neutral-400);
86
105
  --kpt-color-border: var(--kpt-color-neutral-200);
87
106
  --kpt-color-border-strong: var(--kpt-color-neutral-300);
88
107
  --kpt-color-primary: var(--kpt-color-neutral-900);
89
108
  --kpt-color-primary-hover: var(--kpt-color-neutral-800);
90
109
  --kpt-color-primary-active: var(--kpt-color-neutral-700);
91
- --kpt-color-on-primary: var(--kpt-color-neutral-50);
110
+ --kpt-color-primary-subtle: var(--kpt-color-neutral-100);
111
+ --kpt-color-primary-border: var(--kpt-color-neutral-300);
112
+ --kpt-color-on-primary: var(--kpt-color-neutral-0);
92
113
  --kpt-color-muted: var(--kpt-color-neutral-100);
93
114
  --kpt-color-muted-hover: var(--kpt-color-neutral-200);
94
115
  --kpt-color-on-muted: var(--kpt-color-neutral-800);
95
116
  --kpt-color-danger: var(--kpt-color-red-600);
117
+ --kpt-color-danger-hover: var(--kpt-color-red-700);
118
+ --kpt-color-danger-contrast: var(--kpt-color-neutral-0);
119
+ --kpt-color-danger-subtle: var(--kpt-color-red-50);
120
+ --kpt-color-danger-border: var(--kpt-color-red-200);
96
121
  --kpt-color-on-danger: var(--kpt-color-neutral-0);
97
122
  --kpt-color-success: var(--kpt-color-green-600);
123
+ --kpt-color-success-hover: var(--kpt-color-green-700);
124
+ --kpt-color-success-contrast: var(--kpt-color-neutral-0);
125
+ --kpt-color-success-subtle: var(--kpt-color-green-50);
126
+ --kpt-color-success-border: var(--kpt-color-green-200);
98
127
  --kpt-color-warning: var(--kpt-color-amber-600);
128
+ --kpt-color-warning-hover: var(--kpt-color-amber-700);
129
+ --kpt-color-warning-contrast: var(--kpt-color-neutral-0);
130
+ --kpt-color-warning-subtle: var(--kpt-color-amber-50);
131
+ --kpt-color-warning-border: var(--kpt-color-amber-200);
99
132
  --kpt-color-info: var(--kpt-color-blue-600);
133
+ --kpt-color-info-hover: var(--kpt-color-blue-700);
134
+ --kpt-color-info-contrast: var(--kpt-color-neutral-0);
135
+ --kpt-color-info-subtle: var(--kpt-color-blue-50);
136
+ --kpt-color-info-border: var(--kpt-color-blue-200);
100
137
  --kpt-color-focus-ring: var(--kpt-color-neutral-900);
138
+ --kpt-color-overlay: var(--kpt-color-overlay-scrim);
139
+ --kpt-shadow-sm: var(--kpt-elevation-1);
140
+ --kpt-shadow-md: var(--kpt-elevation-2);
141
+ --kpt-shadow-lg: var(--kpt-elevation-3);
101
142
  --kpt-button-radius: var(--kpt-radius-md);
102
143
  --kpt-button-font-weight: var(--kpt-font-weight-medium);
103
144
  --kpt-button-gap: var(--kpt-space-2);
@@ -107,6 +148,10 @@
107
148
  --kpt-card-shadow: var(--kpt-elevation-2);
108
149
  --kpt-table-radius: var(--kpt-radius-lg);
109
150
  --kpt-table-cell-padding: var(--kpt-space-3);
151
+ --kpt-color-text: var(--kpt-color-on-surface);
152
+ --kpt-color-text-muted: var(--kpt-color-on-surface-muted);
153
+ --kpt-color-text-inverse: var(--kpt-color-on-primary);
154
+ --kpt-color-primary-contrast: var(--kpt-color-on-primary);
110
155
  --kpt-button-filled-bg: var(--kpt-color-primary);
111
156
  --kpt-button-filled-fg: var(--kpt-color-on-primary);
112
157
  --kpt-button-filled-bg-hover: var(--kpt-color-primary-hover);
package/dist/css/tokens.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/css/tokens.dark.css CHANGED
@@ -16,14 +16,30 @@
16
16
  --kpt-color-neutral-900: oklch(0.210 0.006 286);
17
17
  --kpt-color-neutral-950: oklch(0.141 0.005 286);
18
18
  --kpt-color-neutral-1000: oklch(0 0 0);
19
+ --kpt-color-red-50: oklch(0.971 0.013 25);
20
+ --kpt-color-red-200: oklch(0.885 0.062 25);
19
21
  --kpt-color-red-500: oklch(0.637 0.208 25);
20
22
  --kpt-color-red-600: oklch(0.577 0.213 27);
23
+ --kpt-color-red-700: oklch(0.505 0.190 27);
24
+ --kpt-color-red-950: oklch(0.260 0.090 27);
25
+ --kpt-color-green-50: oklch(0.975 0.030 150);
26
+ --kpt-color-green-200: oklch(0.900 0.070 150);
21
27
  --kpt-color-green-500: oklch(0.723 0.170 150);
22
28
  --kpt-color-green-600: oklch(0.627 0.170 150);
29
+ --kpt-color-green-700: oklch(0.530 0.150 150);
30
+ --kpt-color-green-950: oklch(0.270 0.060 150);
31
+ --kpt-color-amber-50: oklch(0.980 0.030 80);
32
+ --kpt-color-amber-200: oklch(0.920 0.080 75);
23
33
  --kpt-color-amber-500: oklch(0.769 0.160 70);
24
34
  --kpt-color-amber-600: oklch(0.666 0.160 60);
35
+ --kpt-color-amber-700: oklch(0.550 0.130 55);
36
+ --kpt-color-amber-950: oklch(0.280 0.060 60);
37
+ --kpt-color-blue-50: oklch(0.970 0.015 255);
38
+ --kpt-color-blue-200: oklch(0.880 0.050 255);
25
39
  --kpt-color-blue-500: oklch(0.623 0.170 250);
26
40
  --kpt-color-blue-600: oklch(0.546 0.190 255);
41
+ --kpt-color-blue-700: oklch(0.470 0.160 255);
42
+ --kpt-color-blue-950: oklch(0.280 0.090 265);
27
43
  --kpt-color-overlay-scrim: oklch(0 0 0 / 0.6);
28
44
  --kpt-space-0: 0;
29
45
  --kpt-space-1: 0.25rem;
@@ -79,21 +95,50 @@
79
95
  --kpt-color-surface-variant: var(--kpt-color-neutral-900);
80
96
  --kpt-color-surface-raised: var(--kpt-color-neutral-900);
81
97
  --kpt-color-surface-sunken: var(--kpt-color-neutral-1000);
98
+ --kpt-color-surface-hover: var(--kpt-color-neutral-900);
99
+ --kpt-color-surface-selected: var(--kpt-color-neutral-800);
82
100
  --kpt-color-on-surface: var(--kpt-color-neutral-50);
83
101
  --kpt-color-on-surface-muted: var(--kpt-color-neutral-400);
102
+ --kpt-color-text-subtle: var(--kpt-color-neutral-500);
84
103
  --kpt-color-border: var(--kpt-color-neutral-800);
85
104
  --kpt-color-border-strong: var(--kpt-color-neutral-700);
86
105
  --kpt-color-primary: var(--kpt-color-neutral-100);
87
106
  --kpt-color-primary-hover: var(--kpt-color-neutral-200);
88
107
  --kpt-color-primary-active: var(--kpt-color-neutral-300);
108
+ --kpt-color-primary-subtle: var(--kpt-color-neutral-800);
109
+ --kpt-color-primary-border: var(--kpt-color-neutral-700);
89
110
  --kpt-color-on-primary: var(--kpt-color-neutral-900);
90
111
  --kpt-color-muted: var(--kpt-color-neutral-800);
91
112
  --kpt-color-muted-hover: var(--kpt-color-neutral-700);
92
113
  --kpt-color-on-muted: var(--kpt-color-neutral-100);
93
114
  --kpt-color-danger: var(--kpt-color-red-500);
115
+ --kpt-color-danger-hover: var(--kpt-color-red-600);
116
+ --kpt-color-danger-contrast: var(--kpt-color-neutral-950);
117
+ --kpt-color-danger-subtle: var(--kpt-color-red-950);
118
+ --kpt-color-danger-border: var(--kpt-color-red-700);
94
119
  --kpt-color-on-danger: var(--kpt-color-neutral-950);
95
120
  --kpt-color-success: var(--kpt-color-green-500);
121
+ --kpt-color-success-hover: var(--kpt-color-green-600);
122
+ --kpt-color-success-contrast: var(--kpt-color-neutral-950);
123
+ --kpt-color-success-subtle: var(--kpt-color-green-950);
124
+ --kpt-color-success-border: var(--kpt-color-green-700);
96
125
  --kpt-color-warning: var(--kpt-color-amber-500);
126
+ --kpt-color-warning-hover: var(--kpt-color-amber-600);
127
+ --kpt-color-warning-contrast: var(--kpt-color-neutral-950);
128
+ --kpt-color-warning-subtle: var(--kpt-color-amber-950);
129
+ --kpt-color-warning-border: var(--kpt-color-amber-700);
97
130
  --kpt-color-info: var(--kpt-color-blue-500);
131
+ --kpt-color-info-hover: var(--kpt-color-blue-600);
132
+ --kpt-color-info-contrast: var(--kpt-color-neutral-950);
133
+ --kpt-color-info-subtle: var(--kpt-color-blue-950);
134
+ --kpt-color-info-border: var(--kpt-color-blue-700);
98
135
  --kpt-color-focus-ring: var(--kpt-color-neutral-100);
136
+ --kpt-color-overlay: var(--kpt-color-overlay-scrim);
137
+ --kpt-shadow-sm: var(--kpt-elevation-1);
138
+ --kpt-shadow-md: var(--kpt-elevation-2);
139
+ --kpt-shadow-lg: var(--kpt-elevation-3);
140
+ --kpt-color-text: var(--kpt-color-on-surface);
141
+ --kpt-color-text-muted: var(--kpt-color-on-surface-muted);
142
+ --kpt-color-text-inverse: var(--kpt-color-on-primary);
143
+ --kpt-color-primary-contrast: var(--kpt-color-on-primary);
99
144
  }
package/dist/css/tokens.dark.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/js/tokens.d.ts CHANGED
@@ -15,36 +15,78 @@ export const KPT_COLOR_NEUTRAL_800: string;
15
15
  export const KPT_COLOR_NEUTRAL_900: string;
16
16
  export const KPT_COLOR_NEUTRAL_950: string;
17
17
  export const KPT_COLOR_NEUTRAL_1000: string;
18
+ export const KPT_COLOR_RED_50: string;
19
+ export const KPT_COLOR_RED_200: string;
18
20
  export const KPT_COLOR_RED_500: string;
19
21
  export const KPT_COLOR_RED_600: string;
22
+ export const KPT_COLOR_RED_700: string;
23
+ export const KPT_COLOR_RED_950: string;
24
+ export const KPT_COLOR_GREEN_50: string;
25
+ export const KPT_COLOR_GREEN_200: string;
20
26
  export const KPT_COLOR_GREEN_500: string;
21
27
  export const KPT_COLOR_GREEN_600: string;
28
+ export const KPT_COLOR_GREEN_700: string;
29
+ export const KPT_COLOR_GREEN_950: string;
30
+ export const KPT_COLOR_AMBER_50: string;
31
+ export const KPT_COLOR_AMBER_200: string;
22
32
  export const KPT_COLOR_AMBER_500: string;
23
33
  export const KPT_COLOR_AMBER_600: string;
34
+ export const KPT_COLOR_AMBER_700: string;
35
+ export const KPT_COLOR_AMBER_950: string;
36
+ export const KPT_COLOR_BLUE_50: string;
37
+ export const KPT_COLOR_BLUE_200: string;
24
38
  export const KPT_COLOR_BLUE_500: string;
25
39
  export const KPT_COLOR_BLUE_600: string;
40
+ export const KPT_COLOR_BLUE_700: string;
41
+ export const KPT_COLOR_BLUE_950: string;
26
42
  export const KPT_COLOR_SURFACE: string;
27
43
  export const KPT_COLOR_SURFACE_VARIANT: string;
28
44
  export const KPT_COLOR_SURFACE_RAISED: string;
29
45
  export const KPT_COLOR_SURFACE_SUNKEN: string;
46
+ export const KPT_COLOR_SURFACE_HOVER: string;
47
+ export const KPT_COLOR_SURFACE_SELECTED: string;
30
48
  export const KPT_COLOR_ON_SURFACE: string;
31
49
  export const KPT_COLOR_ON_SURFACE_MUTED: string;
50
+ export const KPT_COLOR_TEXT: string;
51
+ export const KPT_COLOR_TEXT_MUTED: string;
52
+ export const KPT_COLOR_TEXT_SUBTLE: string;
53
+ export const KPT_COLOR_TEXT_INVERSE: string;
32
54
  export const KPT_COLOR_BORDER: string;
33
55
  export const KPT_COLOR_BORDER_STRONG: string;
34
56
  export const KPT_COLOR_PRIMARY: string;
35
57
  export const KPT_COLOR_PRIMARY_HOVER: string;
36
58
  export const KPT_COLOR_PRIMARY_ACTIVE: string;
59
+ export const KPT_COLOR_PRIMARY_CONTRAST: string;
60
+ export const KPT_COLOR_PRIMARY_SUBTLE: string;
61
+ export const KPT_COLOR_PRIMARY_BORDER: string;
37
62
  export const KPT_COLOR_ON_PRIMARY: string;
38
63
  export const KPT_COLOR_MUTED: string;
39
64
  export const KPT_COLOR_MUTED_HOVER: string;
40
65
  export const KPT_COLOR_ON_MUTED: string;
41
66
  export const KPT_COLOR_DANGER: string;
67
+ export const KPT_COLOR_DANGER_HOVER: string;
68
+ export const KPT_COLOR_DANGER_CONTRAST: string;
69
+ export const KPT_COLOR_DANGER_SUBTLE: string;
70
+ export const KPT_COLOR_DANGER_BORDER: string;
42
71
  export const KPT_COLOR_ON_DANGER: string;
43
72
  export const KPT_COLOR_SUCCESS: string;
73
+ export const KPT_COLOR_SUCCESS_HOVER: string;
74
+ export const KPT_COLOR_SUCCESS_CONTRAST: string;
75
+ export const KPT_COLOR_SUCCESS_SUBTLE: string;
76
+ export const KPT_COLOR_SUCCESS_BORDER: string;
44
77
  export const KPT_COLOR_WARNING: string;
78
+ export const KPT_COLOR_WARNING_HOVER: string;
79
+ export const KPT_COLOR_WARNING_CONTRAST: string;
80
+ export const KPT_COLOR_WARNING_SUBTLE: string;
81
+ export const KPT_COLOR_WARNING_BORDER: string;
45
82
  export const KPT_COLOR_INFO: string;
83
+ export const KPT_COLOR_INFO_HOVER: string;
84
+ export const KPT_COLOR_INFO_CONTRAST: string;
85
+ export const KPT_COLOR_INFO_SUBTLE: string;
86
+ export const KPT_COLOR_INFO_BORDER: string;
46
87
  export const KPT_COLOR_FOCUS_RING: string;
47
88
  export const KPT_COLOR_OVERLAY_SCRIM: string;
89
+ export const KPT_COLOR_OVERLAY: string;
48
90
  export const KPT_SPACE_0: string;
49
91
  export const KPT_SPACE_1: string;
50
92
  export const KPT_SPACE_2: string;
@@ -95,6 +137,9 @@ export const KPT_ELEVATION_1: string;
95
137
  export const KPT_ELEVATION_2: string;
96
138
  export const KPT_ELEVATION_3: string;
97
139
  export const KPT_ELEVATION_4: string;
140
+ export const KPT_SHADOW_SM: string;
141
+ export const KPT_SHADOW_MD: string;
142
+ export const KPT_SHADOW_LG: string;
98
143
  export const KPT_BUTTON_RADIUS: string;
99
144
  export const KPT_BUTTON_FONT_WEIGHT: string;
100
145
  export const KPT_BUTTON_GAP: string;
package/dist/js/tokens.js CHANGED
@@ -15,36 +15,78 @@ export const KPT_COLOR_NEUTRAL_800 = "oklch(0.274 0.006 286)";
15
15
  export const KPT_COLOR_NEUTRAL_900 = "oklch(0.210 0.006 286)";
16
16
  export const KPT_COLOR_NEUTRAL_950 = "oklch(0.141 0.005 286)";
17
17
  export const KPT_COLOR_NEUTRAL_1000 = "oklch(0 0 0)";
18
+ export const KPT_COLOR_RED_50 = "oklch(0.971 0.013 25)";
19
+ export const KPT_COLOR_RED_200 = "oklch(0.885 0.062 25)";
18
20
  export const KPT_COLOR_RED_500 = "oklch(0.637 0.208 25)";
19
21
  export const KPT_COLOR_RED_600 = "oklch(0.577 0.213 27)";
22
+ export const KPT_COLOR_RED_700 = "oklch(0.505 0.190 27)";
23
+ export const KPT_COLOR_RED_950 = "oklch(0.260 0.090 27)";
24
+ export const KPT_COLOR_GREEN_50 = "oklch(0.975 0.030 150)";
25
+ export const KPT_COLOR_GREEN_200 = "oklch(0.900 0.070 150)";
20
26
  export const KPT_COLOR_GREEN_500 = "oklch(0.723 0.170 150)";
21
27
  export const KPT_COLOR_GREEN_600 = "oklch(0.627 0.170 150)";
28
+ export const KPT_COLOR_GREEN_700 = "oklch(0.530 0.150 150)";
29
+ export const KPT_COLOR_GREEN_950 = "oklch(0.270 0.060 150)";
30
+ export const KPT_COLOR_AMBER_50 = "oklch(0.980 0.030 80)";
31
+ export const KPT_COLOR_AMBER_200 = "oklch(0.920 0.080 75)";
22
32
  export const KPT_COLOR_AMBER_500 = "oklch(0.769 0.160 70)";
23
33
  export const KPT_COLOR_AMBER_600 = "oklch(0.666 0.160 60)";
34
+ export const KPT_COLOR_AMBER_700 = "oklch(0.550 0.130 55)";
35
+ export const KPT_COLOR_AMBER_950 = "oklch(0.280 0.060 60)";
36
+ export const KPT_COLOR_BLUE_50 = "oklch(0.970 0.015 255)";
37
+ export const KPT_COLOR_BLUE_200 = "oklch(0.880 0.050 255)";
24
38
  export const KPT_COLOR_BLUE_500 = "oklch(0.623 0.170 250)";
25
39
  export const KPT_COLOR_BLUE_600 = "oklch(0.546 0.190 255)";
40
+ export const KPT_COLOR_BLUE_700 = "oklch(0.470 0.160 255)";
41
+ export const KPT_COLOR_BLUE_950 = "oklch(0.280 0.090 265)";
26
42
  export const KPT_COLOR_SURFACE = "oklch(1 0 0)";
27
43
  export const KPT_COLOR_SURFACE_VARIANT = "oklch(0.985 0 0)";
28
44
  export const KPT_COLOR_SURFACE_RAISED = "oklch(1 0 0)";
29
45
  export const KPT_COLOR_SURFACE_SUNKEN = "oklch(0.967 0.001 286)";
46
+ export const KPT_COLOR_SURFACE_HOVER = "oklch(0.985 0 0)";
47
+ export const KPT_COLOR_SURFACE_SELECTED = "oklch(0.967 0.001 286)";
30
48
  export const KPT_COLOR_ON_SURFACE = "oklch(0.210 0.006 286)";
31
49
  export const KPT_COLOR_ON_SURFACE_MUTED = "oklch(0.552 0.016 286)";
50
+ export const KPT_COLOR_TEXT = "oklch(0.210 0.006 286)";
51
+ export const KPT_COLOR_TEXT_MUTED = "oklch(0.552 0.016 286)";
52
+ export const KPT_COLOR_TEXT_SUBTLE = "oklch(0.705 0.015 286)";
53
+ export const KPT_COLOR_TEXT_INVERSE = "oklch(1 0 0)";
32
54
  export const KPT_COLOR_BORDER = "oklch(0.920 0.004 286)";
33
55
  export const KPT_COLOR_BORDER_STRONG = "oklch(0.871 0.006 286)";
34
56
  export const KPT_COLOR_PRIMARY = "oklch(0.210 0.006 286)";
35
57
  export const KPT_COLOR_PRIMARY_HOVER = "oklch(0.274 0.006 286)";
36
58
  export const KPT_COLOR_PRIMARY_ACTIVE = "oklch(0.370 0.013 286)";
37
- export const KPT_COLOR_ON_PRIMARY = "oklch(0.985 0 0)";
59
+ export const KPT_COLOR_PRIMARY_CONTRAST = "oklch(1 0 0)";
60
+ export const KPT_COLOR_PRIMARY_SUBTLE = "oklch(0.967 0.001 286)";
61
+ export const KPT_COLOR_PRIMARY_BORDER = "oklch(0.871 0.006 286)";
62
+ export const KPT_COLOR_ON_PRIMARY = "oklch(1 0 0)";
38
63
  export const KPT_COLOR_MUTED = "oklch(0.967 0.001 286)";
39
64
  export const KPT_COLOR_MUTED_HOVER = "oklch(0.920 0.004 286)";
40
65
  export const KPT_COLOR_ON_MUTED = "oklch(0.274 0.006 286)";
41
66
  export const KPT_COLOR_DANGER = "oklch(0.577 0.213 27)";
67
+ export const KPT_COLOR_DANGER_HOVER = "oklch(0.505 0.190 27)";
68
+ export const KPT_COLOR_DANGER_CONTRAST = "oklch(1 0 0)";
69
+ export const KPT_COLOR_DANGER_SUBTLE = "oklch(0.971 0.013 25)";
70
+ export const KPT_COLOR_DANGER_BORDER = "oklch(0.885 0.062 25)";
42
71
  export const KPT_COLOR_ON_DANGER = "oklch(1 0 0)";
43
72
  export const KPT_COLOR_SUCCESS = "oklch(0.627 0.170 150)";
73
+ export const KPT_COLOR_SUCCESS_HOVER = "oklch(0.530 0.150 150)";
74
+ export const KPT_COLOR_SUCCESS_CONTRAST = "oklch(1 0 0)";
75
+ export const KPT_COLOR_SUCCESS_SUBTLE = "oklch(0.975 0.030 150)";
76
+ export const KPT_COLOR_SUCCESS_BORDER = "oklch(0.900 0.070 150)";
44
77
  export const KPT_COLOR_WARNING = "oklch(0.666 0.160 60)";
78
+ export const KPT_COLOR_WARNING_HOVER = "oklch(0.550 0.130 55)";
79
+ export const KPT_COLOR_WARNING_CONTRAST = "oklch(1 0 0)";
80
+ export const KPT_COLOR_WARNING_SUBTLE = "oklch(0.980 0.030 80)";
81
+ export const KPT_COLOR_WARNING_BORDER = "oklch(0.920 0.080 75)";
45
82
  export const KPT_COLOR_INFO = "oklch(0.546 0.190 255)";
83
+ export const KPT_COLOR_INFO_HOVER = "oklch(0.470 0.160 255)";
84
+ export const KPT_COLOR_INFO_CONTRAST = "oklch(1 0 0)";
85
+ export const KPT_COLOR_INFO_SUBTLE = "oklch(0.970 0.015 255)";
86
+ export const KPT_COLOR_INFO_BORDER = "oklch(0.880 0.050 255)";
46
87
  export const KPT_COLOR_FOCUS_RING = "oklch(0.210 0.006 286)";
47
88
  export const KPT_COLOR_OVERLAY_SCRIM = "oklch(0.141 0.005 286 / 0.5)";
89
+ export const KPT_COLOR_OVERLAY = "oklch(0.141 0.005 286 / 0.5)";
48
90
  export const KPT_SPACE_0 = "0";
49
91
  export const KPT_SPACE_1 = "0.25rem";
50
92
  export const KPT_SPACE_2 = "0.5rem";
@@ -100,11 +142,16 @@ export const KPT_ELEVATION_3 =
100
142
  "0 8px 16px -4px oklch(0.141 0.005 286 / 0.12), 0 2px 4px 0 oklch(0.141 0.005 286 / 0.06)";
101
143
  export const KPT_ELEVATION_4 =
102
144
  "0 16px 28px -8px oklch(0.141 0.005 286 / 0.16), 0 4px 8px 0 oklch(0.141 0.005 286 / 0.08)";
145
+ export const KPT_SHADOW_SM = "0 1px 2px 0 oklch(0.141 0.005 286 / 0.08)";
146
+ export const KPT_SHADOW_MD =
147
+ "0 2px 6px -1px oklch(0.141 0.005 286 / 0.10), 0 1px 2px 0 oklch(0.141 0.005 286 / 0.06)";
148
+ export const KPT_SHADOW_LG =
149
+ "0 8px 16px -4px oklch(0.141 0.005 286 / 0.12), 0 2px 4px 0 oklch(0.141 0.005 286 / 0.06)";
103
150
  export const KPT_BUTTON_RADIUS = "0.5rem";
104
151
  export const KPT_BUTTON_FONT_WEIGHT = "500";
105
152
  export const KPT_BUTTON_GAP = "0.5rem";
106
153
  export const KPT_BUTTON_FILLED_BG = "oklch(0.210 0.006 286)";
107
- export const KPT_BUTTON_FILLED_FG = "oklch(0.985 0 0)";
154
+ export const KPT_BUTTON_FILLED_FG = "oklch(1 0 0)";
108
155
  export const KPT_BUTTON_FILLED_BG_HOVER = "oklch(0.274 0.006 286)";
109
156
  export const KPT_BUTTON_FILLED_BG_ACTIVE = "oklch(0.370 0.013 286)";
110
157
  export const KPT_BUTTON_TONAL_BG = "oklch(0.967 0.001 286)";