@konce-pt/tokens 0.1.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 (7) hide show
  1. package/LICENSE +21 -0
  2. package/dist/css/tokens.css +148 -0
  3. package/dist/css/tokens.dark.css +99 -0
  4. package/dist/js/tokens.d.ts +146 -0
  5. package/dist/js/tokens.js +152 -0
  6. package/dist/scss/_tokens.scss +145 -0
  7. package/package.json +40 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 konce.pt
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/dist/css/tokens.css ADDED
@@ -0,0 +1,148 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --kpt-color-neutral-0: oklch(1 0 0);
7
+ --kpt-color-neutral-50: oklch(0.985 0 0);
8
+ --kpt-color-neutral-100: oklch(0.967 0.001 286);
9
+ --kpt-color-neutral-200: oklch(0.920 0.004 286);
10
+ --kpt-color-neutral-300: oklch(0.871 0.006 286);
11
+ --kpt-color-neutral-400: oklch(0.705 0.015 286);
12
+ --kpt-color-neutral-500: oklch(0.552 0.016 286);
13
+ --kpt-color-neutral-600: oklch(0.442 0.017 286);
14
+ --kpt-color-neutral-700: oklch(0.370 0.013 286);
15
+ --kpt-color-neutral-800: oklch(0.274 0.006 286);
16
+ --kpt-color-neutral-900: oklch(0.210 0.006 286);
17
+ --kpt-color-neutral-950: oklch(0.141 0.005 286);
18
+ --kpt-color-neutral-1000: oklch(0 0 0);
19
+ --kpt-color-red-500: oklch(0.637 0.208 25);
20
+ --kpt-color-red-600: oklch(0.577 0.213 27);
21
+ --kpt-color-green-500: oklch(0.723 0.170 150);
22
+ --kpt-color-green-600: oklch(0.627 0.170 150);
23
+ --kpt-color-amber-500: oklch(0.769 0.160 70);
24
+ --kpt-color-amber-600: oklch(0.666 0.160 60);
25
+ --kpt-color-blue-500: oklch(0.623 0.170 250);
26
+ --kpt-color-blue-600: oklch(0.546 0.190 255);
27
+ --kpt-color-overlay-scrim: oklch(0.141 0.005 286 / 0.5);
28
+ --kpt-space-0: 0;
29
+ --kpt-space-1: 0.25rem;
30
+ --kpt-space-2: 0.5rem;
31
+ --kpt-space-3: 0.75rem;
32
+ --kpt-space-4: 1rem;
33
+ --kpt-space-5: 1.25rem;
34
+ --kpt-space-6: 1.5rem;
35
+ --kpt-space-8: 2rem;
36
+ --kpt-space-10: 2.5rem;
37
+ --kpt-space-12: 3rem;
38
+ --kpt-space-16: 4rem;
39
+ --kpt-radius-none: 0;
40
+ --kpt-radius-sm: 0.25rem;
41
+ --kpt-radius-md: 0.5rem;
42
+ --kpt-radius-lg: 0.75rem;
43
+ --kpt-radius-xl: 1rem;
44
+ --kpt-radius-full: 9999px;
45
+ --kpt-border-width-thin: 1px;
46
+ --kpt-border-width-medium: 2px;
47
+ --kpt-z-base: 0;
48
+ --kpt-z-raised: 10;
49
+ --kpt-z-dropdown: 1000;
50
+ --kpt-z-overlay: 1100;
51
+ --kpt-z-modal: 1200;
52
+ --kpt-z-toast: 1300;
53
+ --kpt-motion-duration-fast: 120ms;
54
+ --kpt-motion-duration-base: 200ms;
55
+ --kpt-motion-duration-slow: 320ms;
56
+ --kpt-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
57
+ --kpt-motion-easing-emphasized: cubic-bezier(0.3, 0, 0, 1);
58
+ --kpt-font-family-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
59
+ --kpt-font-family-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
60
+ --kpt-font-weight-regular: 400;
61
+ --kpt-font-weight-medium: 500;
62
+ --kpt-font-weight-semibold: 600;
63
+ --kpt-font-weight-bold: 700;
64
+ --kpt-font-size-xs: 0.75rem;
65
+ --kpt-font-size-sm: 0.875rem;
66
+ --kpt-font-size-md: 1rem;
67
+ --kpt-font-size-lg: 1.125rem;
68
+ --kpt-font-size-xl: 1.25rem;
69
+ --kpt-font-size-2xl: 1.5rem;
70
+ --kpt-font-size-3xl: 1.875rem;
71
+ --kpt-font-line-height-tight: 1.25;
72
+ --kpt-font-line-height-normal: 1.5;
73
+ --kpt-font-line-height-relaxed: 1.7;
74
+ --kpt-elevation-1: 0 1px 2px 0 oklch(0.141 0.005 286 / 0.08);
75
+ --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);
76
+ --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);
77
+ --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);
78
+ --kpt-toolbar-height: 3.5rem;
79
+ --kpt-sidenav-width: 16rem;
80
+ --kpt-color-surface: var(--kpt-color-neutral-0);
81
+ --kpt-color-surface-variant: var(--kpt-color-neutral-50);
82
+ --kpt-color-surface-raised: var(--kpt-color-neutral-0);
83
+ --kpt-color-surface-sunken: var(--kpt-color-neutral-100);
84
+ --kpt-color-on-surface: var(--kpt-color-neutral-900);
85
+ --kpt-color-on-surface-muted: var(--kpt-color-neutral-500);
86
+ --kpt-color-border: var(--kpt-color-neutral-200);
87
+ --kpt-color-border-strong: var(--kpt-color-neutral-300);
88
+ --kpt-color-primary: var(--kpt-color-neutral-900);
89
+ --kpt-color-primary-hover: var(--kpt-color-neutral-800);
90
+ --kpt-color-primary-active: var(--kpt-color-neutral-700);
91
+ --kpt-color-on-primary: var(--kpt-color-neutral-50);
92
+ --kpt-color-muted: var(--kpt-color-neutral-100);
93
+ --kpt-color-muted-hover: var(--kpt-color-neutral-200);
94
+ --kpt-color-on-muted: var(--kpt-color-neutral-800);
95
+ --kpt-color-danger: var(--kpt-color-red-600);
96
+ --kpt-color-on-danger: var(--kpt-color-neutral-0);
97
+ --kpt-color-success: var(--kpt-color-green-600);
98
+ --kpt-color-warning: var(--kpt-color-amber-600);
99
+ --kpt-color-info: var(--kpt-color-blue-600);
100
+ --kpt-color-focus-ring: var(--kpt-color-neutral-900);
101
+ --kpt-button-radius: var(--kpt-radius-md);
102
+ --kpt-button-font-weight: var(--kpt-font-weight-medium);
103
+ --kpt-button-gap: var(--kpt-space-2);
104
+ --kpt-form-field-radius: var(--kpt-radius-md);
105
+ --kpt-card-radius: var(--kpt-radius-lg);
106
+ --kpt-card-padding: var(--kpt-space-6);
107
+ --kpt-card-shadow: var(--kpt-elevation-2);
108
+ --kpt-table-radius: var(--kpt-radius-lg);
109
+ --kpt-table-cell-padding: var(--kpt-space-3);
110
+ --kpt-button-filled-bg: var(--kpt-color-primary);
111
+ --kpt-button-filled-fg: var(--kpt-color-on-primary);
112
+ --kpt-button-filled-bg-hover: var(--kpt-color-primary-hover);
113
+ --kpt-button-filled-bg-active: var(--kpt-color-primary-active);
114
+ --kpt-button-tonal-bg: var(--kpt-color-muted);
115
+ --kpt-button-tonal-fg: var(--kpt-color-on-muted);
116
+ --kpt-button-tonal-bg-hover: var(--kpt-color-muted-hover);
117
+ --kpt-button-outline-border: var(--kpt-color-border-strong);
118
+ --kpt-button-outline-fg: var(--kpt-color-on-surface);
119
+ --kpt-button-outline-bg-hover: var(--kpt-color-muted);
120
+ --kpt-button-text-fg: var(--kpt-color-on-surface);
121
+ --kpt-button-text-bg-hover: var(--kpt-color-muted);
122
+ --kpt-form-field-bg: var(--kpt-color-surface);
123
+ --kpt-form-field-text: var(--kpt-color-on-surface);
124
+ --kpt-form-field-placeholder: var(--kpt-color-on-surface-muted);
125
+ --kpt-form-field-label: var(--kpt-color-on-surface);
126
+ --kpt-form-field-hint: var(--kpt-color-on-surface-muted);
127
+ --kpt-form-field-border: var(--kpt-color-border-strong);
128
+ --kpt-form-field-border-hover: var(--kpt-color-on-surface-muted);
129
+ --kpt-form-field-border-focus: var(--kpt-color-focus-ring);
130
+ --kpt-form-field-border-error: var(--kpt-color-danger);
131
+ --kpt-form-field-error: var(--kpt-color-danger);
132
+ --kpt-card-bg: var(--kpt-color-surface-raised);
133
+ --kpt-card-fg: var(--kpt-color-on-surface);
134
+ --kpt-card-border: var(--kpt-color-border);
135
+ --kpt-toolbar-bg: var(--kpt-color-surface-raised);
136
+ --kpt-toolbar-fg: var(--kpt-color-on-surface);
137
+ --kpt-toolbar-border: var(--kpt-color-border);
138
+ --kpt-sidenav-bg: var(--kpt-color-surface-variant);
139
+ --kpt-sidenav-fg: var(--kpt-color-on-surface);
140
+ --kpt-sidenav-border: var(--kpt-color-border);
141
+ --kpt-table-bg: var(--kpt-color-surface-raised);
142
+ --kpt-table-fg: var(--kpt-color-on-surface);
143
+ --kpt-table-border: var(--kpt-color-border);
144
+ --kpt-table-header-bg: var(--kpt-color-surface-variant);
145
+ --kpt-table-header-fg: var(--kpt-color-on-surface-muted);
146
+ --kpt-table-row-hover: var(--kpt-color-surface-variant);
147
+ --kpt-table-row-selected: var(--kpt-color-muted);
148
+ }
package/dist/css/tokens.dark.css ADDED
@@ -0,0 +1,99 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ [data-theme="dark"] {
6
+ --kpt-color-neutral-0: oklch(1 0 0);
7
+ --kpt-color-neutral-50: oklch(0.985 0 0);
8
+ --kpt-color-neutral-100: oklch(0.967 0.001 286);
9
+ --kpt-color-neutral-200: oklch(0.920 0.004 286);
10
+ --kpt-color-neutral-300: oklch(0.871 0.006 286);
11
+ --kpt-color-neutral-400: oklch(0.705 0.015 286);
12
+ --kpt-color-neutral-500: oklch(0.552 0.016 286);
13
+ --kpt-color-neutral-600: oklch(0.442 0.017 286);
14
+ --kpt-color-neutral-700: oklch(0.370 0.013 286);
15
+ --kpt-color-neutral-800: oklch(0.274 0.006 286);
16
+ --kpt-color-neutral-900: oklch(0.210 0.006 286);
17
+ --kpt-color-neutral-950: oklch(0.141 0.005 286);
18
+ --kpt-color-neutral-1000: oklch(0 0 0);
19
+ --kpt-color-red-500: oklch(0.637 0.208 25);
20
+ --kpt-color-red-600: oklch(0.577 0.213 27);
21
+ --kpt-color-green-500: oklch(0.723 0.170 150);
22
+ --kpt-color-green-600: oklch(0.627 0.170 150);
23
+ --kpt-color-amber-500: oklch(0.769 0.160 70);
24
+ --kpt-color-amber-600: oklch(0.666 0.160 60);
25
+ --kpt-color-blue-500: oklch(0.623 0.170 250);
26
+ --kpt-color-blue-600: oklch(0.546 0.190 255);
27
+ --kpt-color-overlay-scrim: oklch(0 0 0 / 0.6);
28
+ --kpt-space-0: 0;
29
+ --kpt-space-1: 0.25rem;
30
+ --kpt-space-2: 0.5rem;
31
+ --kpt-space-3: 0.75rem;
32
+ --kpt-space-4: 1rem;
33
+ --kpt-space-5: 1.25rem;
34
+ --kpt-space-6: 1.5rem;
35
+ --kpt-space-8: 2rem;
36
+ --kpt-space-10: 2.5rem;
37
+ --kpt-space-12: 3rem;
38
+ --kpt-space-16: 4rem;
39
+ --kpt-radius-none: 0;
40
+ --kpt-radius-sm: 0.25rem;
41
+ --kpt-radius-md: 0.5rem;
42
+ --kpt-radius-lg: 0.75rem;
43
+ --kpt-radius-xl: 1rem;
44
+ --kpt-radius-full: 9999px;
45
+ --kpt-border-width-thin: 1px;
46
+ --kpt-border-width-medium: 2px;
47
+ --kpt-z-base: 0;
48
+ --kpt-z-raised: 10;
49
+ --kpt-z-dropdown: 1000;
50
+ --kpt-z-overlay: 1100;
51
+ --kpt-z-modal: 1200;
52
+ --kpt-z-toast: 1300;
53
+ --kpt-motion-duration-fast: 120ms;
54
+ --kpt-motion-duration-base: 200ms;
55
+ --kpt-motion-duration-slow: 320ms;
56
+ --kpt-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
57
+ --kpt-motion-easing-emphasized: cubic-bezier(0.3, 0, 0, 1);
58
+ --kpt-font-family-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
59
+ --kpt-font-family-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
60
+ --kpt-font-weight-regular: 400;
61
+ --kpt-font-weight-medium: 500;
62
+ --kpt-font-weight-semibold: 600;
63
+ --kpt-font-weight-bold: 700;
64
+ --kpt-font-size-xs: 0.75rem;
65
+ --kpt-font-size-sm: 0.875rem;
66
+ --kpt-font-size-md: 1rem;
67
+ --kpt-font-size-lg: 1.125rem;
68
+ --kpt-font-size-xl: 1.25rem;
69
+ --kpt-font-size-2xl: 1.5rem;
70
+ --kpt-font-size-3xl: 1.875rem;
71
+ --kpt-font-line-height-tight: 1.25;
72
+ --kpt-font-line-height-normal: 1.5;
73
+ --kpt-font-line-height-relaxed: 1.7;
74
+ --kpt-elevation-1: 0 1px 2px 0 oklch(0 0 0 / 0.5);
75
+ --kpt-elevation-2: 0 2px 6px -1px oklch(0 0 0 / 0.55), 0 1px 2px 0 oklch(0 0 0 / 0.4);
76
+ --kpt-elevation-3: 0 8px 16px -4px oklch(0 0 0 / 0.6), 0 2px 4px 0 oklch(0 0 0 / 0.4);
77
+ --kpt-elevation-4: 0 16px 28px -8px oklch(0 0 0 / 0.65), 0 4px 8px 0 oklch(0 0 0 / 0.45);
78
+ --kpt-color-surface: var(--kpt-color-neutral-950);
79
+ --kpt-color-surface-variant: var(--kpt-color-neutral-900);
80
+ --kpt-color-surface-raised: var(--kpt-color-neutral-900);
81
+ --kpt-color-surface-sunken: var(--kpt-color-neutral-1000);
82
+ --kpt-color-on-surface: var(--kpt-color-neutral-50);
83
+ --kpt-color-on-surface-muted: var(--kpt-color-neutral-400);
84
+ --kpt-color-border: var(--kpt-color-neutral-800);
85
+ --kpt-color-border-strong: var(--kpt-color-neutral-700);
86
+ --kpt-color-primary: var(--kpt-color-neutral-100);
87
+ --kpt-color-primary-hover: var(--kpt-color-neutral-200);
88
+ --kpt-color-primary-active: var(--kpt-color-neutral-300);
89
+ --kpt-color-on-primary: var(--kpt-color-neutral-900);
90
+ --kpt-color-muted: var(--kpt-color-neutral-800);
91
+ --kpt-color-muted-hover: var(--kpt-color-neutral-700);
92
+ --kpt-color-on-muted: var(--kpt-color-neutral-100);
93
+ --kpt-color-danger: var(--kpt-color-red-500);
94
+ --kpt-color-on-danger: var(--kpt-color-neutral-950);
95
+ --kpt-color-success: var(--kpt-color-green-500);
96
+ --kpt-color-warning: var(--kpt-color-amber-500);
97
+ --kpt-color-info: var(--kpt-color-blue-500);
98
+ --kpt-color-focus-ring: var(--kpt-color-neutral-100);
99
+ }
package/dist/js/tokens.d.ts ADDED
@@ -0,0 +1,146 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export const KPT_COLOR_NEUTRAL_0: string;
6
+ export const KPT_COLOR_NEUTRAL_50: string;
7
+ export const KPT_COLOR_NEUTRAL_100: string;
8
+ export const KPT_COLOR_NEUTRAL_200: string;
9
+ export const KPT_COLOR_NEUTRAL_300: string;
10
+ export const KPT_COLOR_NEUTRAL_400: string;
11
+ export const KPT_COLOR_NEUTRAL_500: string;
12
+ export const KPT_COLOR_NEUTRAL_600: string;
13
+ export const KPT_COLOR_NEUTRAL_700: string;
14
+ export const KPT_COLOR_NEUTRAL_800: string;
15
+ export const KPT_COLOR_NEUTRAL_900: string;
16
+ export const KPT_COLOR_NEUTRAL_950: string;
17
+ export const KPT_COLOR_NEUTRAL_1000: string;
18
+ export const KPT_COLOR_RED_500: string;
19
+ export const KPT_COLOR_RED_600: string;
20
+ export const KPT_COLOR_GREEN_500: string;
21
+ export const KPT_COLOR_GREEN_600: string;
22
+ export const KPT_COLOR_AMBER_500: string;
23
+ export const KPT_COLOR_AMBER_600: string;
24
+ export const KPT_COLOR_BLUE_500: string;
25
+ export const KPT_COLOR_BLUE_600: string;
26
+ export const KPT_COLOR_SURFACE: string;
27
+ export const KPT_COLOR_SURFACE_VARIANT: string;
28
+ export const KPT_COLOR_SURFACE_RAISED: string;
29
+ export const KPT_COLOR_SURFACE_SUNKEN: string;
30
+ export const KPT_COLOR_ON_SURFACE: string;
31
+ export const KPT_COLOR_ON_SURFACE_MUTED: string;
32
+ export const KPT_COLOR_BORDER: string;
33
+ export const KPT_COLOR_BORDER_STRONG: string;
34
+ export const KPT_COLOR_PRIMARY: string;
35
+ export const KPT_COLOR_PRIMARY_HOVER: string;
36
+ export const KPT_COLOR_PRIMARY_ACTIVE: string;
37
+ export const KPT_COLOR_ON_PRIMARY: string;
38
+ export const KPT_COLOR_MUTED: string;
39
+ export const KPT_COLOR_MUTED_HOVER: string;
40
+ export const KPT_COLOR_ON_MUTED: string;
41
+ export const KPT_COLOR_DANGER: string;
42
+ export const KPT_COLOR_ON_DANGER: string;
43
+ export const KPT_COLOR_SUCCESS: string;
44
+ export const KPT_COLOR_WARNING: string;
45
+ export const KPT_COLOR_INFO: string;
46
+ export const KPT_COLOR_FOCUS_RING: string;
47
+ export const KPT_COLOR_OVERLAY_SCRIM: string;
48
+ export const KPT_SPACE_0: string;
49
+ export const KPT_SPACE_1: string;
50
+ export const KPT_SPACE_2: string;
51
+ export const KPT_SPACE_3: string;
52
+ export const KPT_SPACE_4: string;
53
+ export const KPT_SPACE_5: string;
54
+ export const KPT_SPACE_6: string;
55
+ export const KPT_SPACE_8: string;
56
+ export const KPT_SPACE_10: string;
57
+ export const KPT_SPACE_12: string;
58
+ export const KPT_SPACE_16: string;
59
+ export const KPT_RADIUS_NONE: string;
60
+ export const KPT_RADIUS_SM: string;
61
+ export const KPT_RADIUS_MD: string;
62
+ export const KPT_RADIUS_LG: string;
63
+ export const KPT_RADIUS_XL: string;
64
+ export const KPT_RADIUS_FULL: string;
65
+ export const KPT_BORDER_WIDTH_THIN: string;
66
+ export const KPT_BORDER_WIDTH_MEDIUM: string;
67
+ export const KPT_Z_BASE: string;
68
+ export const KPT_Z_RAISED: string;
69
+ export const KPT_Z_DROPDOWN: string;
70
+ export const KPT_Z_OVERLAY: string;
71
+ export const KPT_Z_MODAL: string;
72
+ export const KPT_Z_TOAST: string;
73
+ export const KPT_MOTION_DURATION_FAST: string;
74
+ export const KPT_MOTION_DURATION_BASE: string;
75
+ export const KPT_MOTION_DURATION_SLOW: string;
76
+ export const KPT_MOTION_EASING_STANDARD: string;
77
+ export const KPT_MOTION_EASING_EMPHASIZED: string;
78
+ export const KPT_FONT_FAMILY_SANS: string;
79
+ export const KPT_FONT_FAMILY_MONO: string;
80
+ export const KPT_FONT_WEIGHT_REGULAR: string;
81
+ export const KPT_FONT_WEIGHT_MEDIUM: string;
82
+ export const KPT_FONT_WEIGHT_SEMIBOLD: string;
83
+ export const KPT_FONT_WEIGHT_BOLD: string;
84
+ export const KPT_FONT_SIZE_XS: string;
85
+ export const KPT_FONT_SIZE_SM: string;
86
+ export const KPT_FONT_SIZE_MD: string;
87
+ export const KPT_FONT_SIZE_LG: string;
88
+ export const KPT_FONT_SIZE_XL: string;
89
+ export const KPT_FONT_SIZE_2XL: string;
90
+ export const KPT_FONT_SIZE_3XL: string;
91
+ export const KPT_FONT_LINE_HEIGHT_TIGHT: string;
92
+ export const KPT_FONT_LINE_HEIGHT_NORMAL: string;
93
+ export const KPT_FONT_LINE_HEIGHT_RELAXED: string;
94
+ export const KPT_ELEVATION_1: string;
95
+ export const KPT_ELEVATION_2: string;
96
+ export const KPT_ELEVATION_3: string;
97
+ export const KPT_ELEVATION_4: string;
98
+ export const KPT_BUTTON_RADIUS: string;
99
+ export const KPT_BUTTON_FONT_WEIGHT: string;
100
+ export const KPT_BUTTON_GAP: string;
101
+ export const KPT_BUTTON_FILLED_BG: string;
102
+ export const KPT_BUTTON_FILLED_FG: string;
103
+ export const KPT_BUTTON_FILLED_BG_HOVER: string;
104
+ export const KPT_BUTTON_FILLED_BG_ACTIVE: string;
105
+ export const KPT_BUTTON_TONAL_BG: string;
106
+ export const KPT_BUTTON_TONAL_FG: string;
107
+ export const KPT_BUTTON_TONAL_BG_HOVER: string;
108
+ export const KPT_BUTTON_OUTLINE_BORDER: string;
109
+ export const KPT_BUTTON_OUTLINE_FG: string;
110
+ export const KPT_BUTTON_OUTLINE_BG_HOVER: string;
111
+ export const KPT_BUTTON_TEXT_FG: string;
112
+ export const KPT_BUTTON_TEXT_BG_HOVER: string;
113
+ export const KPT_FORM_FIELD_RADIUS: string;
114
+ export const KPT_FORM_FIELD_BG: string;
115
+ export const KPT_FORM_FIELD_TEXT: string;
116
+ export const KPT_FORM_FIELD_PLACEHOLDER: string;
117
+ export const KPT_FORM_FIELD_LABEL: string;
118
+ export const KPT_FORM_FIELD_HINT: string;
119
+ export const KPT_FORM_FIELD_BORDER: string;
120
+ export const KPT_FORM_FIELD_BORDER_HOVER: string;
121
+ export const KPT_FORM_FIELD_BORDER_FOCUS: string;
122
+ export const KPT_FORM_FIELD_BORDER_ERROR: string;
123
+ export const KPT_FORM_FIELD_ERROR: string;
124
+ export const KPT_CARD_BG: string;
125
+ export const KPT_CARD_FG: string;
126
+ export const KPT_CARD_BORDER: string;
127
+ export const KPT_CARD_RADIUS: string;
128
+ export const KPT_CARD_PADDING: string;
129
+ export const KPT_CARD_SHADOW: string;
130
+ export const KPT_TOOLBAR_BG: string;
131
+ export const KPT_TOOLBAR_FG: string;
132
+ export const KPT_TOOLBAR_BORDER: string;
133
+ export const KPT_TOOLBAR_HEIGHT: string;
134
+ export const KPT_SIDENAV_BG: string;
135
+ export const KPT_SIDENAV_FG: string;
136
+ export const KPT_SIDENAV_BORDER: string;
137
+ export const KPT_SIDENAV_WIDTH: string;
138
+ export const KPT_TABLE_BG: string;
139
+ export const KPT_TABLE_FG: string;
140
+ export const KPT_TABLE_BORDER: string;
141
+ export const KPT_TABLE_RADIUS: string;
142
+ export const KPT_TABLE_HEADER_BG: string;
143
+ export const KPT_TABLE_HEADER_FG: string;
144
+ export const KPT_TABLE_ROW_HOVER: string;
145
+ export const KPT_TABLE_ROW_SELECTED: string;
146
+ export const KPT_TABLE_CELL_PADDING: string;
package/dist/js/tokens.js ADDED
@@ -0,0 +1,152 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export const KPT_COLOR_NEUTRAL_0 = "oklch(1 0 0)";
6
+ export const KPT_COLOR_NEUTRAL_50 = "oklch(0.985 0 0)";
7
+ export const KPT_COLOR_NEUTRAL_100 = "oklch(0.967 0.001 286)";
8
+ export const KPT_COLOR_NEUTRAL_200 = "oklch(0.920 0.004 286)";
9
+ export const KPT_COLOR_NEUTRAL_300 = "oklch(0.871 0.006 286)";
10
+ export const KPT_COLOR_NEUTRAL_400 = "oklch(0.705 0.015 286)";
11
+ export const KPT_COLOR_NEUTRAL_500 = "oklch(0.552 0.016 286)";
12
+ export const KPT_COLOR_NEUTRAL_600 = "oklch(0.442 0.017 286)";
13
+ export const KPT_COLOR_NEUTRAL_700 = "oklch(0.370 0.013 286)";
14
+ export const KPT_COLOR_NEUTRAL_800 = "oklch(0.274 0.006 286)";
15
+ export const KPT_COLOR_NEUTRAL_900 = "oklch(0.210 0.006 286)";
16
+ export const KPT_COLOR_NEUTRAL_950 = "oklch(0.141 0.005 286)";
17
+ export const KPT_COLOR_NEUTRAL_1000 = "oklch(0 0 0)";
18
+ export const KPT_COLOR_RED_500 = "oklch(0.637 0.208 25)";
19
+ export const KPT_COLOR_RED_600 = "oklch(0.577 0.213 27)";
20
+ export const KPT_COLOR_GREEN_500 = "oklch(0.723 0.170 150)";
21
+ export const KPT_COLOR_GREEN_600 = "oklch(0.627 0.170 150)";
22
+ export const KPT_COLOR_AMBER_500 = "oklch(0.769 0.160 70)";
23
+ export const KPT_COLOR_AMBER_600 = "oklch(0.666 0.160 60)";
24
+ export const KPT_COLOR_BLUE_500 = "oklch(0.623 0.170 250)";
25
+ export const KPT_COLOR_BLUE_600 = "oklch(0.546 0.190 255)";
26
+ export const KPT_COLOR_SURFACE = "oklch(1 0 0)";
27
+ export const KPT_COLOR_SURFACE_VARIANT = "oklch(0.985 0 0)";
28
+ export const KPT_COLOR_SURFACE_RAISED = "oklch(1 0 0)";
29
+ export const KPT_COLOR_SURFACE_SUNKEN = "oklch(0.967 0.001 286)";
30
+ export const KPT_COLOR_ON_SURFACE = "oklch(0.210 0.006 286)";
31
+ export const KPT_COLOR_ON_SURFACE_MUTED = "oklch(0.552 0.016 286)";
32
+ export const KPT_COLOR_BORDER = "oklch(0.920 0.004 286)";
33
+ export const KPT_COLOR_BORDER_STRONG = "oklch(0.871 0.006 286)";
34
+ export const KPT_COLOR_PRIMARY = "oklch(0.210 0.006 286)";
35
+ export const KPT_COLOR_PRIMARY_HOVER = "oklch(0.274 0.006 286)";
36
+ export const KPT_COLOR_PRIMARY_ACTIVE = "oklch(0.370 0.013 286)";
37
+ export const KPT_COLOR_ON_PRIMARY = "oklch(0.985 0 0)";
38
+ export const KPT_COLOR_MUTED = "oklch(0.967 0.001 286)";
39
+ export const KPT_COLOR_MUTED_HOVER = "oklch(0.920 0.004 286)";
40
+ export const KPT_COLOR_ON_MUTED = "oklch(0.274 0.006 286)";
41
+ export const KPT_COLOR_DANGER = "oklch(0.577 0.213 27)";
42
+ export const KPT_COLOR_ON_DANGER = "oklch(1 0 0)";
43
+ export const KPT_COLOR_SUCCESS = "oklch(0.627 0.170 150)";
44
+ export const KPT_COLOR_WARNING = "oklch(0.666 0.160 60)";
45
+ export const KPT_COLOR_INFO = "oklch(0.546 0.190 255)";
46
+ export const KPT_COLOR_FOCUS_RING = "oklch(0.210 0.006 286)";
47
+ export const KPT_COLOR_OVERLAY_SCRIM = "oklch(0.141 0.005 286 / 0.5)";
48
+ export const KPT_SPACE_0 = "0";
49
+ export const KPT_SPACE_1 = "0.25rem";
50
+ export const KPT_SPACE_2 = "0.5rem";
51
+ export const KPT_SPACE_3 = "0.75rem";
52
+ export const KPT_SPACE_4 = "1rem";
53
+ export const KPT_SPACE_5 = "1.25rem";
54
+ export const KPT_SPACE_6 = "1.5rem";
55
+ export const KPT_SPACE_8 = "2rem";
56
+ export const KPT_SPACE_10 = "2.5rem";
57
+ export const KPT_SPACE_12 = "3rem";
58
+ export const KPT_SPACE_16 = "4rem";
59
+ export const KPT_RADIUS_NONE = "0";
60
+ export const KPT_RADIUS_SM = "0.25rem";
61
+ export const KPT_RADIUS_MD = "0.5rem";
62
+ export const KPT_RADIUS_LG = "0.75rem";
63
+ export const KPT_RADIUS_XL = "1rem";
64
+ export const KPT_RADIUS_FULL = "9999px";
65
+ export const KPT_BORDER_WIDTH_THIN = "1px";
66
+ export const KPT_BORDER_WIDTH_MEDIUM = "2px";
67
+ export const KPT_Z_BASE = "0";
68
+ export const KPT_Z_RAISED = "10";
69
+ export const KPT_Z_DROPDOWN = "1000";
70
+ export const KPT_Z_OVERLAY = "1100";
71
+ export const KPT_Z_MODAL = "1200";
72
+ export const KPT_Z_TOAST = "1300";
73
+ export const KPT_MOTION_DURATION_FAST = "120ms";
74
+ export const KPT_MOTION_DURATION_BASE = "200ms";
75
+ export const KPT_MOTION_DURATION_SLOW = "320ms";
76
+ export const KPT_MOTION_EASING_STANDARD = "cubic-bezier(0.2, 0, 0, 1)";
77
+ export const KPT_MOTION_EASING_EMPHASIZED = "cubic-bezier(0.3, 0, 0, 1)";
78
+ export const KPT_FONT_FAMILY_SANS =
79
+ "system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
80
+ export const KPT_FONT_FAMILY_MONO =
81
+ "ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace";
82
+ export const KPT_FONT_WEIGHT_REGULAR = "400";
83
+ export const KPT_FONT_WEIGHT_MEDIUM = "500";
84
+ export const KPT_FONT_WEIGHT_SEMIBOLD = "600";
85
+ export const KPT_FONT_WEIGHT_BOLD = "700";
86
+ export const KPT_FONT_SIZE_XS = "0.75rem";
87
+ export const KPT_FONT_SIZE_SM = "0.875rem";
88
+ export const KPT_FONT_SIZE_MD = "1rem";
89
+ export const KPT_FONT_SIZE_LG = "1.125rem";
90
+ export const KPT_FONT_SIZE_XL = "1.25rem";
91
+ export const KPT_FONT_SIZE_2XL = "1.5rem";
92
+ export const KPT_FONT_SIZE_3XL = "1.875rem";
93
+ export const KPT_FONT_LINE_HEIGHT_TIGHT = "1.25";
94
+ export const KPT_FONT_LINE_HEIGHT_NORMAL = "1.5";
95
+ export const KPT_FONT_LINE_HEIGHT_RELAXED = "1.7";
96
+ export const KPT_ELEVATION_1 = "0 1px 2px 0 oklch(0.141 0.005 286 / 0.08)";
97
+ export const KPT_ELEVATION_2 =
98
+ "0 2px 6px -1px oklch(0.141 0.005 286 / 0.10), 0 1px 2px 0 oklch(0.141 0.005 286 / 0.06)";
99
+ export const KPT_ELEVATION_3 =
100
+ "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
+ export const KPT_ELEVATION_4 =
102
+ "0 16px 28px -8px oklch(0.141 0.005 286 / 0.16), 0 4px 8px 0 oklch(0.141 0.005 286 / 0.08)";
103
+ export const KPT_BUTTON_RADIUS = "0.5rem";
104
+ export const KPT_BUTTON_FONT_WEIGHT = "500";
105
+ export const KPT_BUTTON_GAP = "0.5rem";
106
+ export const KPT_BUTTON_FILLED_BG = "oklch(0.210 0.006 286)";
107
+ export const KPT_BUTTON_FILLED_FG = "oklch(0.985 0 0)";
108
+ export const KPT_BUTTON_FILLED_BG_HOVER = "oklch(0.274 0.006 286)";
109
+ export const KPT_BUTTON_FILLED_BG_ACTIVE = "oklch(0.370 0.013 286)";
110
+ export const KPT_BUTTON_TONAL_BG = "oklch(0.967 0.001 286)";
111
+ export const KPT_BUTTON_TONAL_FG = "oklch(0.274 0.006 286)";
112
+ export const KPT_BUTTON_TONAL_BG_HOVER = "oklch(0.920 0.004 286)";
113
+ export const KPT_BUTTON_OUTLINE_BORDER = "oklch(0.871 0.006 286)";
114
+ export const KPT_BUTTON_OUTLINE_FG = "oklch(0.210 0.006 286)";
115
+ export const KPT_BUTTON_OUTLINE_BG_HOVER = "oklch(0.967 0.001 286)";
116
+ export const KPT_BUTTON_TEXT_FG = "oklch(0.210 0.006 286)";
117
+ export const KPT_BUTTON_TEXT_BG_HOVER = "oklch(0.967 0.001 286)";
118
+ export const KPT_FORM_FIELD_RADIUS = "0.5rem";
119
+ export const KPT_FORM_FIELD_BG = "oklch(1 0 0)";
120
+ export const KPT_FORM_FIELD_TEXT = "oklch(0.210 0.006 286)";
121
+ export const KPT_FORM_FIELD_PLACEHOLDER = "oklch(0.552 0.016 286)";
122
+ export const KPT_FORM_FIELD_LABEL = "oklch(0.210 0.006 286)";
123
+ export const KPT_FORM_FIELD_HINT = "oklch(0.552 0.016 286)";
124
+ export const KPT_FORM_FIELD_BORDER = "oklch(0.871 0.006 286)";
125
+ export const KPT_FORM_FIELD_BORDER_HOVER = "oklch(0.552 0.016 286)";
126
+ export const KPT_FORM_FIELD_BORDER_FOCUS = "oklch(0.210 0.006 286)";
127
+ export const KPT_FORM_FIELD_BORDER_ERROR = "oklch(0.577 0.213 27)";
128
+ export const KPT_FORM_FIELD_ERROR = "oklch(0.577 0.213 27)";
129
+ export const KPT_CARD_BG = "oklch(1 0 0)";
130
+ export const KPT_CARD_FG = "oklch(0.210 0.006 286)";
131
+ export const KPT_CARD_BORDER = "oklch(0.920 0.004 286)";
132
+ export const KPT_CARD_RADIUS = "0.75rem";
133
+ export const KPT_CARD_PADDING = "1.5rem";
134
+ export const KPT_CARD_SHADOW =
135
+ "0 2px 6px -1px oklch(0.141 0.005 286 / 0.10), 0 1px 2px 0 oklch(0.141 0.005 286 / 0.06)";
136
+ export const KPT_TOOLBAR_BG = "oklch(1 0 0)";
137
+ export const KPT_TOOLBAR_FG = "oklch(0.210 0.006 286)";
138
+ export const KPT_TOOLBAR_BORDER = "oklch(0.920 0.004 286)";
139
+ export const KPT_TOOLBAR_HEIGHT = "3.5rem";
140
+ export const KPT_SIDENAV_BG = "oklch(0.985 0 0)";
141
+ export const KPT_SIDENAV_FG = "oklch(0.210 0.006 286)";
142
+ export const KPT_SIDENAV_BORDER = "oklch(0.920 0.004 286)";
143
+ export const KPT_SIDENAV_WIDTH = "16rem";
144
+ export const KPT_TABLE_BG = "oklch(1 0 0)";
145
+ export const KPT_TABLE_FG = "oklch(0.210 0.006 286)";
146
+ export const KPT_TABLE_BORDER = "oklch(0.920 0.004 286)";
147
+ export const KPT_TABLE_RADIUS = "0.75rem";
148
+ export const KPT_TABLE_HEADER_BG = "oklch(0.985 0 0)";
149
+ export const KPT_TABLE_HEADER_FG = "oklch(0.552 0.016 286)";
150
+ export const KPT_TABLE_ROW_HOVER = "oklch(0.985 0 0)";
151
+ export const KPT_TABLE_ROW_SELECTED = "oklch(0.967 0.001 286)";
152
+ export const KPT_TABLE_CELL_PADDING = "0.75rem";
package/dist/scss/_tokens.scss ADDED
@@ -0,0 +1,145 @@
1
+
2
+ // Do not edit directly, this file was auto-generated.
3
+
4
+ $kpt-color-neutral-0: oklch(1 0 0);
5
+ $kpt-color-neutral-50: oklch(0.985 0 0);
6
+ $kpt-color-neutral-100: oklch(0.967 0.001 286);
7
+ $kpt-color-neutral-200: oklch(0.920 0.004 286);
8
+ $kpt-color-neutral-300: oklch(0.871 0.006 286);
9
+ $kpt-color-neutral-400: oklch(0.705 0.015 286);
10
+ $kpt-color-neutral-500: oklch(0.552 0.016 286);
11
+ $kpt-color-neutral-600: oklch(0.442 0.017 286);
12
+ $kpt-color-neutral-700: oklch(0.370 0.013 286);
13
+ $kpt-color-neutral-800: oklch(0.274 0.006 286);
14
+ $kpt-color-neutral-900: oklch(0.210 0.006 286);
15
+ $kpt-color-neutral-950: oklch(0.141 0.005 286);
16
+ $kpt-color-neutral-1000: oklch(0 0 0);
17
+ $kpt-color-red-500: oklch(0.637 0.208 25);
18
+ $kpt-color-red-600: oklch(0.577 0.213 27);
19
+ $kpt-color-green-500: oklch(0.723 0.170 150);
20
+ $kpt-color-green-600: oklch(0.627 0.170 150);
21
+ $kpt-color-amber-500: oklch(0.769 0.160 70);
22
+ $kpt-color-amber-600: oklch(0.666 0.160 60);
23
+ $kpt-color-blue-500: oklch(0.623 0.170 250);
24
+ $kpt-color-blue-600: oklch(0.546 0.190 255);
25
+ $kpt-color-overlay-scrim: oklch(0.141 0.005 286 / 0.5);
26
+ $kpt-space-0: 0;
27
+ $kpt-space-1: 0.25rem;
28
+ $kpt-space-2: 0.5rem;
29
+ $kpt-space-3: 0.75rem;
30
+ $kpt-space-4: 1rem;
31
+ $kpt-space-5: 1.25rem;
32
+ $kpt-space-6: 1.5rem;
33
+ $kpt-space-8: 2rem;
34
+ $kpt-space-10: 2.5rem;
35
+ $kpt-space-12: 3rem;
36
+ $kpt-space-16: 4rem;
37
+ $kpt-radius-none: 0;
38
+ $kpt-radius-sm: 0.25rem;
39
+ $kpt-radius-md: 0.5rem;
40
+ $kpt-radius-lg: 0.75rem;
41
+ $kpt-radius-xl: 1rem;
42
+ $kpt-radius-full: 9999px;
43
+ $kpt-border-width-thin: 1px;
44
+ $kpt-border-width-medium: 2px;
45
+ $kpt-z-base: 0;
46
+ $kpt-z-raised: 10;
47
+ $kpt-z-dropdown: 1000;
48
+ $kpt-z-overlay: 1100;
49
+ $kpt-z-modal: 1200;
50
+ $kpt-z-toast: 1300;
51
+ $kpt-motion-duration-fast: 120ms;
52
+ $kpt-motion-duration-base: 200ms;
53
+ $kpt-motion-duration-slow: 320ms;
54
+ $kpt-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
55
+ $kpt-motion-easing-emphasized: cubic-bezier(0.3, 0, 0, 1);
56
+ $kpt-font-family-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
57
+ $kpt-font-family-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
58
+ $kpt-font-weight-regular: 400;
59
+ $kpt-font-weight-medium: 500;
60
+ $kpt-font-weight-semibold: 600;
61
+ $kpt-font-weight-bold: 700;
62
+ $kpt-font-size-xs: 0.75rem;
63
+ $kpt-font-size-sm: 0.875rem;
64
+ $kpt-font-size-md: 1rem;
65
+ $kpt-font-size-lg: 1.125rem;
66
+ $kpt-font-size-xl: 1.25rem;
67
+ $kpt-font-size-2xl: 1.5rem;
68
+ $kpt-font-size-3xl: 1.875rem;
69
+ $kpt-font-line-height-tight: 1.25;
70
+ $kpt-font-line-height-normal: 1.5;
71
+ $kpt-font-line-height-relaxed: 1.7;
72
+ $kpt-elevation-1: 0 1px 2px 0 oklch(0.141 0.005 286 / 0.08);
73
+ $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);
74
+ $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);
75
+ $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);
76
+ $kpt-toolbar-height: 3.5rem;
77
+ $kpt-sidenav-width: 16rem;
78
+ $kpt-color-surface: $kpt-color-neutral-0;
79
+ $kpt-color-surface-variant: $kpt-color-neutral-50;
80
+ $kpt-color-surface-raised: $kpt-color-neutral-0;
81
+ $kpt-color-surface-sunken: $kpt-color-neutral-100;
82
+ $kpt-color-on-surface: $kpt-color-neutral-900;
83
+ $kpt-color-on-surface-muted: $kpt-color-neutral-500;
84
+ $kpt-color-border: $kpt-color-neutral-200;
85
+ $kpt-color-border-strong: $kpt-color-neutral-300;
86
+ $kpt-color-primary: $kpt-color-neutral-900;
87
+ $kpt-color-primary-hover: $kpt-color-neutral-800;
88
+ $kpt-color-primary-active: $kpt-color-neutral-700;
89
+ $kpt-color-on-primary: $kpt-color-neutral-50;
90
+ $kpt-color-muted: $kpt-color-neutral-100;
91
+ $kpt-color-muted-hover: $kpt-color-neutral-200;
92
+ $kpt-color-on-muted: $kpt-color-neutral-800;
93
+ $kpt-color-danger: $kpt-color-red-600;
94
+ $kpt-color-on-danger: $kpt-color-neutral-0;
95
+ $kpt-color-success: $kpt-color-green-600;
96
+ $kpt-color-warning: $kpt-color-amber-600;
97
+ $kpt-color-info: $kpt-color-blue-600;
98
+ $kpt-color-focus-ring: $kpt-color-neutral-900;
99
+ $kpt-button-radius: $kpt-radius-md;
100
+ $kpt-button-font-weight: $kpt-font-weight-medium;
101
+ $kpt-button-gap: $kpt-space-2;
102
+ $kpt-form-field-radius: $kpt-radius-md;
103
+ $kpt-card-radius: $kpt-radius-lg;
104
+ $kpt-card-padding: $kpt-space-6;
105
+ $kpt-card-shadow: $kpt-elevation-2;
106
+ $kpt-table-radius: $kpt-radius-lg;
107
+ $kpt-table-cell-padding: $kpt-space-3;
108
+ $kpt-button-filled-bg: $kpt-color-primary;
109
+ $kpt-button-filled-fg: $kpt-color-on-primary;
110
+ $kpt-button-filled-bg-hover: $kpt-color-primary-hover;
111
+ $kpt-button-filled-bg-active: $kpt-color-primary-active;
112
+ $kpt-button-tonal-bg: $kpt-color-muted;
113
+ $kpt-button-tonal-fg: $kpt-color-on-muted;
114
+ $kpt-button-tonal-bg-hover: $kpt-color-muted-hover;
115
+ $kpt-button-outline-border: $kpt-color-border-strong;
116
+ $kpt-button-outline-fg: $kpt-color-on-surface;
117
+ $kpt-button-outline-bg-hover: $kpt-color-muted;
118
+ $kpt-button-text-fg: $kpt-color-on-surface;
119
+ $kpt-button-text-bg-hover: $kpt-color-muted;
120
+ $kpt-form-field-bg: $kpt-color-surface;
121
+ $kpt-form-field-text: $kpt-color-on-surface;
122
+ $kpt-form-field-placeholder: $kpt-color-on-surface-muted;
123
+ $kpt-form-field-label: $kpt-color-on-surface;
124
+ $kpt-form-field-hint: $kpt-color-on-surface-muted;
125
+ $kpt-form-field-border: $kpt-color-border-strong;
126
+ $kpt-form-field-border-hover: $kpt-color-on-surface-muted;
127
+ $kpt-form-field-border-focus: $kpt-color-focus-ring;
128
+ $kpt-form-field-border-error: $kpt-color-danger;
129
+ $kpt-form-field-error: $kpt-color-danger;
130
+ $kpt-card-bg: $kpt-color-surface-raised;
131
+ $kpt-card-fg: $kpt-color-on-surface;
132
+ $kpt-card-border: $kpt-color-border;
133
+ $kpt-toolbar-bg: $kpt-color-surface-raised;
134
+ $kpt-toolbar-fg: $kpt-color-on-surface;
135
+ $kpt-toolbar-border: $kpt-color-border;
136
+ $kpt-sidenav-bg: $kpt-color-surface-variant;
137
+ $kpt-sidenav-fg: $kpt-color-on-surface;
138
+ $kpt-sidenav-border: $kpt-color-border;
139
+ $kpt-table-bg: $kpt-color-surface-raised;
140
+ $kpt-table-fg: $kpt-color-on-surface;
141
+ $kpt-table-border: $kpt-color-border;
142
+ $kpt-table-header-bg: $kpt-color-surface-variant;
143
+ $kpt-table-header-fg: $kpt-color-on-surface-muted;
144
+ $kpt-table-row-hover: $kpt-color-surface-variant;
145
+ $kpt-table-row-selected: $kpt-color-muted;
package/package.json ADDED
@@ -0,0 +1,40 @@
1
+ {
2
+ "name": "@konce-pt/tokens",
3
+ "version": "0.1.0",
4
+ "description": "Design tokeny Koncept UI (Style Dictionary → CSS vars, SCSS, JS). Neutralna paleta OKLCH.",
5
+ "license": "MIT",
6
+ "author": "konce.pt",
7
+ "sideEffects": [
8
+ "*.css"
9
+ ],
10
+ "type": "module",
11
+ "exports": {
12
+ ".": {
13
+ "types": "./dist/js/tokens.d.ts",
14
+ "default": "./dist/js/tokens.js"
15
+ },
16
+ "./css": "./dist/css/tokens.css",
17
+ "./css/dark": "./dist/css/tokens.dark.css",
18
+ "./scss": "./dist/scss/_tokens.scss"
19
+ },
20
+ "files": [
21
+ "dist"
22
+ ],
23
+ "nx": {
24
+ "targets": {
25
+ "build": {
26
+ "cache": true,
27
+ "outputs": [
28
+ "{projectRoot}/dist"
29
+ ]
30
+ }
31
+ }
32
+ },
33
+ "devDependencies": {
34
+ "style-dictionary": "5.5.0"
35
+ },
36
+ "scripts": {
37
+ "build": "node build.mjs",
38
+ "clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\""
39
+ }
40
+ }