@konce-pt/theme 0.9.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.
- package/LICENSE +21 -0
- package/README.md +65 -0
- package/dist/audit.d.ts +59 -0
- package/dist/audit.js +102 -0
- package/dist/dtcg.d.ts +80 -0
- package/dist/dtcg.js +624 -0
- package/dist/emit.d.ts +76 -0
- package/dist/emit.js +276 -0
- package/dist/generated/tokens.d.ts +24 -0
- package/dist/generated/tokens.js +348 -0
- package/dist/index.d.ts +16 -0
- package/dist/index.js +9 -0
- package/dist/ramp.d.ts +41 -0
- package/dist/ramp.js +66 -0
- package/dist/resolve.d.ts +56 -0
- package/dist/resolve.js +192 -0
- package/dist/roles.d.ts +28 -0
- package/dist/roles.js +77 -0
- package/dist/runtime.d.ts +32 -0
- package/dist/runtime.js +41 -0
- package/dist/schema.d.ts +128 -0
- package/dist/schema.js +129 -0
- package/package.json +52 -0
|
@@ -0,0 +1,348 @@
|
|
|
1
|
+
// Do not edit directly — generated by scripts/gen-tokens.mjs
|
|
2
|
+
// from @konce-pt/tokens (tokens/{primitives,semantic,component}/*.json).
|
|
3
|
+
//
|
|
4
|
+
// Wartości stockowe oraz krzywe, z których liczona jest rampa z ziarna. Patrz komentarz
|
|
5
|
+
// w generatorze: wszystko poniżej jest odczytane z palety, nic nie jest tu wpisane ręcznie.
|
|
6
|
+
/** Stopnie pełnej skali, tak jak rozkłada je rampa neutralna biblioteki. */
|
|
7
|
+
export const KPT_RAMP_STEPS = [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 1000];
|
|
8
|
+
/** Jasność OKLCH na każdym stopniu — krzywa wzięta z rampy neutralnej. */
|
|
9
|
+
export const KPT_RAMP_LIGHTNESS = {
|
|
10
|
+
"0": 1,
|
|
11
|
+
"50": 0.985,
|
|
12
|
+
"100": 0.967,
|
|
13
|
+
"200": 0.92,
|
|
14
|
+
"300": 0.871,
|
|
15
|
+
"400": 0.705,
|
|
16
|
+
"500": 0.552,
|
|
17
|
+
"600": 0.442,
|
|
18
|
+
"700": 0.37,
|
|
19
|
+
"800": 0.274,
|
|
20
|
+
"900": 0.21,
|
|
21
|
+
"950": 0.141,
|
|
22
|
+
"1000": 0,
|
|
23
|
+
};
|
|
24
|
+
/** Kształt nasycenia na każdym stopniu, 0–1: uśredniony z czterech ramp akcentowych. */
|
|
25
|
+
export const KPT_RAMP_CHROMA = {
|
|
26
|
+
"0": 0,
|
|
27
|
+
"50": 0.120055,
|
|
28
|
+
"100": 0.199181,
|
|
29
|
+
"200": 0.357435,
|
|
30
|
+
"300": 0.560255,
|
|
31
|
+
"400": 0.763074,
|
|
32
|
+
"500": 0.965894,
|
|
33
|
+
"600": 1,
|
|
34
|
+
"700": 0.859482,
|
|
35
|
+
"800": 0.6794,
|
|
36
|
+
"900": 0.499318,
|
|
37
|
+
"950": 0.409277,
|
|
38
|
+
"1000": 0,
|
|
39
|
+
};
|
|
40
|
+
/** Największe nasycenie w rampach akcentowych — skala, do której odnosi się krzywa. */
|
|
41
|
+
export const KPT_RAMP_PEAK_CHROMA = 0.18325;
|
|
42
|
+
/** Stopnie rodziny akcentowej per motyw, odczytane z danger/success/warning/info. */
|
|
43
|
+
export const KPT_ACCENT_PATTERN = {
|
|
44
|
+
"base": { "light": 600, "dark": 500 },
|
|
45
|
+
"hover": { "light": 700, "dark": 600 },
|
|
46
|
+
"subtle": { "light": 50, "dark": 950 },
|
|
47
|
+
"border": { "light": 200, "dark": 700 },
|
|
48
|
+
"active": { "light": 800, "dark": 700 },
|
|
49
|
+
};
|
|
50
|
+
/** Nazwy tokenów warstwy semantycznej (te i tylko te zmienia motyw). */
|
|
51
|
+
export const KPT_SEMANTIC_TOKENS = [
|
|
52
|
+
"--kpt-color-surface",
|
|
53
|
+
"--kpt-color-surface-variant",
|
|
54
|
+
"--kpt-color-surface-raised",
|
|
55
|
+
"--kpt-color-surface-sunken",
|
|
56
|
+
"--kpt-color-surface-hover",
|
|
57
|
+
"--kpt-color-surface-selected",
|
|
58
|
+
"--kpt-color-on-surface",
|
|
59
|
+
"--kpt-color-on-surface-muted",
|
|
60
|
+
"--kpt-color-text",
|
|
61
|
+
"--kpt-color-text-muted",
|
|
62
|
+
"--kpt-color-text-subtle",
|
|
63
|
+
"--kpt-color-text-inverse",
|
|
64
|
+
"--kpt-color-border",
|
|
65
|
+
"--kpt-color-border-strong",
|
|
66
|
+
"--kpt-color-primary",
|
|
67
|
+
"--kpt-color-primary-hover",
|
|
68
|
+
"--kpt-color-primary-active",
|
|
69
|
+
"--kpt-color-primary-contrast",
|
|
70
|
+
"--kpt-color-primary-subtle",
|
|
71
|
+
"--kpt-color-primary-border",
|
|
72
|
+
"--kpt-color-on-primary",
|
|
73
|
+
"--kpt-color-muted",
|
|
74
|
+
"--kpt-color-muted-hover",
|
|
75
|
+
"--kpt-color-on-muted",
|
|
76
|
+
"--kpt-color-danger",
|
|
77
|
+
"--kpt-color-danger-hover",
|
|
78
|
+
"--kpt-color-danger-contrast",
|
|
79
|
+
"--kpt-color-danger-subtle",
|
|
80
|
+
"--kpt-color-danger-border",
|
|
81
|
+
"--kpt-color-on-danger",
|
|
82
|
+
"--kpt-color-success",
|
|
83
|
+
"--kpt-color-success-hover",
|
|
84
|
+
"--kpt-color-success-contrast",
|
|
85
|
+
"--kpt-color-success-subtle",
|
|
86
|
+
"--kpt-color-success-border",
|
|
87
|
+
"--kpt-color-warning",
|
|
88
|
+
"--kpt-color-warning-hover",
|
|
89
|
+
"--kpt-color-warning-contrast",
|
|
90
|
+
"--kpt-color-warning-subtle",
|
|
91
|
+
"--kpt-color-warning-border",
|
|
92
|
+
"--kpt-color-info",
|
|
93
|
+
"--kpt-color-info-hover",
|
|
94
|
+
"--kpt-color-info-contrast",
|
|
95
|
+
"--kpt-color-info-subtle",
|
|
96
|
+
"--kpt-color-info-border",
|
|
97
|
+
"--kpt-color-focus-ring",
|
|
98
|
+
"--kpt-color-overlay-scrim",
|
|
99
|
+
"--kpt-color-overlay",
|
|
100
|
+
"--kpt-elevation-1",
|
|
101
|
+
"--kpt-elevation-2",
|
|
102
|
+
"--kpt-elevation-3",
|
|
103
|
+
"--kpt-elevation-4",
|
|
104
|
+
"--kpt-shadow-sm",
|
|
105
|
+
"--kpt-shadow-md",
|
|
106
|
+
"--kpt-shadow-lg",
|
|
107
|
+
];
|
|
108
|
+
/**
|
|
109
|
+
* Wartości stockowe wszystkich tokenów w obu motywach, w postaci SUROWEJ: `{--kpt-nazwa}` to
|
|
110
|
+
* referencja do innego tokenu. Rozwiązuje je `resolveTheme` — dzięki temu nadpisanie prymitywu
|
|
111
|
+
* przestawia wszystko, co się na niego powołuje, tak samo jak zrobiłaby to kaskada CSS.
|
|
112
|
+
*/
|
|
113
|
+
export const KPT_RAW = {
|
|
114
|
+
"--kpt-border-width-medium": { "light": "2px", "dark": "2px" },
|
|
115
|
+
"--kpt-border-width-thin": { "light": "1px", "dark": "1px" },
|
|
116
|
+
"--kpt-breakpoint-2xl": { "light": "1536px", "dark": "1536px" },
|
|
117
|
+
"--kpt-breakpoint-lg": { "light": "1024px", "dark": "1024px" },
|
|
118
|
+
"--kpt-breakpoint-md": { "light": "768px", "dark": "768px" },
|
|
119
|
+
"--kpt-breakpoint-sm": { "light": "640px", "dark": "640px" },
|
|
120
|
+
"--kpt-breakpoint-xl": { "light": "1280px", "dark": "1280px" },
|
|
121
|
+
"--kpt-button-danger-bg": { "light": "{--kpt-color-danger}", "dark": "{--kpt-color-danger}" },
|
|
122
|
+
"--kpt-button-danger-bg-hover": { "light": "{--kpt-color-danger-hover}", "dark": "{--kpt-color-danger-hover}" },
|
|
123
|
+
"--kpt-button-danger-fg": { "light": "{--kpt-color-danger-contrast}", "dark": "{--kpt-color-danger-contrast}" },
|
|
124
|
+
"--kpt-button-elevated-bg": { "light": "{--kpt-color-surface-raised}", "dark": "{--kpt-color-surface-raised}" },
|
|
125
|
+
"--kpt-button-elevated-bg-hover": { "light": "{--kpt-color-muted}", "dark": "{--kpt-color-muted}" },
|
|
126
|
+
"--kpt-button-elevated-fg": { "light": "{--kpt-color-on-surface}", "dark": "{--kpt-color-on-surface}" },
|
|
127
|
+
"--kpt-button-filled-bg": { "light": "{--kpt-color-primary}", "dark": "{--kpt-color-primary}" },
|
|
128
|
+
"--kpt-button-filled-bg-active": { "light": "{--kpt-color-primary-active}", "dark": "{--kpt-color-primary-active}" },
|
|
129
|
+
"--kpt-button-filled-bg-hover": { "light": "{--kpt-color-primary-hover}", "dark": "{--kpt-color-primary-hover}" },
|
|
130
|
+
"--kpt-button-filled-fg": { "light": "{--kpt-color-on-primary}", "dark": "{--kpt-color-on-primary}" },
|
|
131
|
+
"--kpt-button-font-weight": { "light": "{--kpt-font-weight-medium}", "dark": "{--kpt-font-weight-medium}" },
|
|
132
|
+
"--kpt-button-gap": { "light": "{--kpt-space-2}", "dark": "{--kpt-space-2}" },
|
|
133
|
+
"--kpt-button-info-bg": { "light": "{--kpt-color-info}", "dark": "{--kpt-color-info}" },
|
|
134
|
+
"--kpt-button-info-bg-hover": { "light": "{--kpt-color-info-hover}", "dark": "{--kpt-color-info-hover}" },
|
|
135
|
+
"--kpt-button-info-fg": { "light": "{--kpt-color-info-contrast}", "dark": "{--kpt-color-info-contrast}" },
|
|
136
|
+
"--kpt-button-link-fg": { "light": "{--kpt-color-primary}", "dark": "{--kpt-color-primary}" },
|
|
137
|
+
"--kpt-button-link-fg-hover": { "light": "{--kpt-color-primary-hover}", "dark": "{--kpt-color-primary-hover}" },
|
|
138
|
+
"--kpt-button-outline-bg-hover": { "light": "{--kpt-color-muted}", "dark": "{--kpt-color-muted}" },
|
|
139
|
+
"--kpt-button-outline-border": { "light": "{--kpt-color-border-strong}", "dark": "{--kpt-color-border-strong}" },
|
|
140
|
+
"--kpt-button-outline-fg": { "light": "{--kpt-color-on-surface}", "dark": "{--kpt-color-on-surface}" },
|
|
141
|
+
"--kpt-button-radius": { "light": "{--kpt-radius-md}", "dark": "{--kpt-radius-md}" },
|
|
142
|
+
"--kpt-button-success-bg": { "light": "{--kpt-color-success}", "dark": "{--kpt-color-success}" },
|
|
143
|
+
"--kpt-button-success-bg-hover": { "light": "{--kpt-color-success-hover}", "dark": "{--kpt-color-success-hover}" },
|
|
144
|
+
"--kpt-button-success-fg": { "light": "{--kpt-color-success-contrast}", "dark": "{--kpt-color-success-contrast}" },
|
|
145
|
+
"--kpt-button-text-bg-hover": { "light": "{--kpt-color-muted}", "dark": "{--kpt-color-muted}" },
|
|
146
|
+
"--kpt-button-text-fg": { "light": "{--kpt-color-on-surface}", "dark": "{--kpt-color-on-surface}" },
|
|
147
|
+
"--kpt-button-tonal-bg": { "light": "{--kpt-color-muted}", "dark": "{--kpt-color-muted}" },
|
|
148
|
+
"--kpt-button-tonal-bg-hover": { "light": "{--kpt-color-muted-hover}", "dark": "{--kpt-color-muted-hover}" },
|
|
149
|
+
"--kpt-button-tonal-fg": { "light": "{--kpt-color-on-muted}", "dark": "{--kpt-color-on-muted}" },
|
|
150
|
+
"--kpt-button-warning-bg": { "light": "{--kpt-color-warning}", "dark": "{--kpt-color-warning}" },
|
|
151
|
+
"--kpt-button-warning-bg-hover": { "light": "{--kpt-color-warning-hover}", "dark": "{--kpt-color-warning-hover}" },
|
|
152
|
+
"--kpt-button-warning-fg": { "light": "{--kpt-color-warning-contrast}", "dark": "{--kpt-color-warning-contrast}" },
|
|
153
|
+
"--kpt-card-bg": { "light": "{--kpt-color-surface-raised}", "dark": "{--kpt-color-surface-raised}" },
|
|
154
|
+
"--kpt-card-border": { "light": "{--kpt-color-border}", "dark": "{--kpt-color-border}" },
|
|
155
|
+
"--kpt-card-fg": { "light": "{--kpt-color-on-surface}", "dark": "{--kpt-color-on-surface}" },
|
|
156
|
+
"--kpt-card-padding": { "light": "{--kpt-space-6}", "dark": "{--kpt-space-6}" },
|
|
157
|
+
"--kpt-card-radius": { "light": "{--kpt-radius-lg}", "dark": "{--kpt-radius-lg}" },
|
|
158
|
+
"--kpt-card-shadow": { "light": "{--kpt-elevation-2}", "dark": "{--kpt-elevation-2}" },
|
|
159
|
+
"--kpt-color-amber-200": { "light": "oklch(0.920 0.080 75)", "dark": "oklch(0.920 0.080 75)" },
|
|
160
|
+
"--kpt-color-amber-50": { "light": "oklch(0.980 0.030 80)", "dark": "oklch(0.980 0.030 80)" },
|
|
161
|
+
"--kpt-color-amber-500": { "light": "oklch(0.769 0.160 70)", "dark": "oklch(0.769 0.160 70)" },
|
|
162
|
+
"--kpt-color-amber-600": { "light": "oklch(0.666 0.160 60)", "dark": "oklch(0.666 0.160 60)" },
|
|
163
|
+
"--kpt-color-amber-700": { "light": "oklch(0.550 0.130 55)", "dark": "oklch(0.550 0.130 55)" },
|
|
164
|
+
"--kpt-color-amber-950": { "light": "oklch(0.280 0.060 60)", "dark": "oklch(0.280 0.060 60)" },
|
|
165
|
+
"--kpt-color-blue-200": { "light": "oklch(0.880 0.050 255)", "dark": "oklch(0.880 0.050 255)" },
|
|
166
|
+
"--kpt-color-blue-50": { "light": "oklch(0.970 0.015 255)", "dark": "oklch(0.970 0.015 255)" },
|
|
167
|
+
"--kpt-color-blue-500": { "light": "oklch(0.623 0.170 250)", "dark": "oklch(0.623 0.170 250)" },
|
|
168
|
+
"--kpt-color-blue-600": { "light": "oklch(0.546 0.190 255)", "dark": "oklch(0.546 0.190 255)" },
|
|
169
|
+
"--kpt-color-blue-700": { "light": "oklch(0.470 0.160 255)", "dark": "oklch(0.470 0.160 255)" },
|
|
170
|
+
"--kpt-color-blue-950": { "light": "oklch(0.280 0.090 265)", "dark": "oklch(0.280 0.090 265)" },
|
|
171
|
+
"--kpt-color-border": { "light": "{--kpt-color-neutral-200}", "dark": "{--kpt-color-neutral-800}" },
|
|
172
|
+
"--kpt-color-border-strong": { "light": "{--kpt-color-neutral-300}", "dark": "{--kpt-color-neutral-700}" },
|
|
173
|
+
"--kpt-color-danger": { "light": "{--kpt-color-red-600}", "dark": "{--kpt-color-red-500}" },
|
|
174
|
+
"--kpt-color-danger-border": { "light": "{--kpt-color-red-200}", "dark": "{--kpt-color-red-700}" },
|
|
175
|
+
"--kpt-color-danger-contrast": { "light": "{--kpt-color-neutral-0}", "dark": "{--kpt-color-neutral-950}" },
|
|
176
|
+
"--kpt-color-danger-hover": { "light": "{--kpt-color-red-700}", "dark": "{--kpt-color-red-600}" },
|
|
177
|
+
"--kpt-color-danger-subtle": { "light": "{--kpt-color-red-50}", "dark": "{--kpt-color-red-950}" },
|
|
178
|
+
"--kpt-color-focus-ring": { "light": "{--kpt-color-neutral-900}", "dark": "{--kpt-color-neutral-100}" },
|
|
179
|
+
"--kpt-color-green-200": { "light": "oklch(0.900 0.070 150)", "dark": "oklch(0.900 0.070 150)" },
|
|
180
|
+
"--kpt-color-green-50": { "light": "oklch(0.975 0.030 150)", "dark": "oklch(0.975 0.030 150)" },
|
|
181
|
+
"--kpt-color-green-500": { "light": "oklch(0.723 0.170 150)", "dark": "oklch(0.723 0.170 150)" },
|
|
182
|
+
"--kpt-color-green-600": { "light": "oklch(0.627 0.170 150)", "dark": "oklch(0.627 0.170 150)" },
|
|
183
|
+
"--kpt-color-green-700": { "light": "oklch(0.530 0.150 150)", "dark": "oklch(0.530 0.150 150)" },
|
|
184
|
+
"--kpt-color-green-950": { "light": "oklch(0.270 0.060 150)", "dark": "oklch(0.270 0.060 150)" },
|
|
185
|
+
"--kpt-color-info": { "light": "{--kpt-color-blue-600}", "dark": "{--kpt-color-blue-500}" },
|
|
186
|
+
"--kpt-color-info-border": { "light": "{--kpt-color-blue-200}", "dark": "{--kpt-color-blue-700}" },
|
|
187
|
+
"--kpt-color-info-contrast": { "light": "{--kpt-color-neutral-0}", "dark": "{--kpt-color-neutral-950}" },
|
|
188
|
+
"--kpt-color-info-hover": { "light": "{--kpt-color-blue-700}", "dark": "{--kpt-color-blue-600}" },
|
|
189
|
+
"--kpt-color-info-subtle": { "light": "{--kpt-color-blue-50}", "dark": "{--kpt-color-blue-950}" },
|
|
190
|
+
"--kpt-color-muted": { "light": "{--kpt-color-neutral-100}", "dark": "{--kpt-color-neutral-800}" },
|
|
191
|
+
"--kpt-color-muted-hover": { "light": "{--kpt-color-neutral-200}", "dark": "{--kpt-color-neutral-700}" },
|
|
192
|
+
"--kpt-color-neutral-0": { "light": "oklch(1 0 0)", "dark": "oklch(1 0 0)" },
|
|
193
|
+
"--kpt-color-neutral-100": { "light": "oklch(0.967 0.001 286)", "dark": "oklch(0.967 0.001 286)" },
|
|
194
|
+
"--kpt-color-neutral-1000": { "light": "oklch(0 0 0)", "dark": "oklch(0 0 0)" },
|
|
195
|
+
"--kpt-color-neutral-200": { "light": "oklch(0.920 0.004 286)", "dark": "oklch(0.920 0.004 286)" },
|
|
196
|
+
"--kpt-color-neutral-300": { "light": "oklch(0.871 0.006 286)", "dark": "oklch(0.871 0.006 286)" },
|
|
197
|
+
"--kpt-color-neutral-400": { "light": "oklch(0.705 0.015 286)", "dark": "oklch(0.705 0.015 286)" },
|
|
198
|
+
"--kpt-color-neutral-50": { "light": "oklch(0.985 0 0)", "dark": "oklch(0.985 0 0)" },
|
|
199
|
+
"--kpt-color-neutral-500": { "light": "oklch(0.552 0.016 286)", "dark": "oklch(0.552 0.016 286)" },
|
|
200
|
+
"--kpt-color-neutral-600": { "light": "oklch(0.442 0.017 286)", "dark": "oklch(0.442 0.017 286)" },
|
|
201
|
+
"--kpt-color-neutral-700": { "light": "oklch(0.370 0.013 286)", "dark": "oklch(0.370 0.013 286)" },
|
|
202
|
+
"--kpt-color-neutral-800": { "light": "oklch(0.274 0.006 286)", "dark": "oklch(0.274 0.006 286)" },
|
|
203
|
+
"--kpt-color-neutral-900": { "light": "oklch(0.210 0.006 286)", "dark": "oklch(0.210 0.006 286)" },
|
|
204
|
+
"--kpt-color-neutral-950": { "light": "oklch(0.141 0.005 286)", "dark": "oklch(0.141 0.005 286)" },
|
|
205
|
+
"--kpt-color-on-danger": { "light": "{--kpt-color-neutral-0}", "dark": "{--kpt-color-neutral-950}" },
|
|
206
|
+
"--kpt-color-on-muted": { "light": "{--kpt-color-neutral-800}", "dark": "{--kpt-color-neutral-100}" },
|
|
207
|
+
"--kpt-color-on-primary": { "light": "{--kpt-color-neutral-0}", "dark": "{--kpt-color-neutral-900}" },
|
|
208
|
+
"--kpt-color-on-surface": { "light": "{--kpt-color-neutral-900}", "dark": "{--kpt-color-neutral-50}" },
|
|
209
|
+
"--kpt-color-on-surface-muted": { "light": "{--kpt-color-neutral-500}", "dark": "{--kpt-color-neutral-400}" },
|
|
210
|
+
"--kpt-color-overlay": { "light": "{--kpt-color-overlay-scrim}", "dark": "{--kpt-color-overlay-scrim}" },
|
|
211
|
+
"--kpt-color-overlay-scrim": { "light": "oklch(0.141 0.005 286 / 0.5)", "dark": "oklch(0 0 0 / 0.6)" },
|
|
212
|
+
"--kpt-color-primary": { "light": "{--kpt-color-neutral-900}", "dark": "{--kpt-color-neutral-100}" },
|
|
213
|
+
"--kpt-color-primary-active": { "light": "{--kpt-color-neutral-700}", "dark": "{--kpt-color-neutral-300}" },
|
|
214
|
+
"--kpt-color-primary-border": { "light": "{--kpt-color-neutral-300}", "dark": "{--kpt-color-neutral-700}" },
|
|
215
|
+
"--kpt-color-primary-contrast": { "light": "{--kpt-color-on-primary}", "dark": "{--kpt-color-on-primary}" },
|
|
216
|
+
"--kpt-color-primary-hover": { "light": "{--kpt-color-neutral-800}", "dark": "{--kpt-color-neutral-200}" },
|
|
217
|
+
"--kpt-color-primary-subtle": { "light": "{--kpt-color-neutral-100}", "dark": "{--kpt-color-neutral-800}" },
|
|
218
|
+
"--kpt-color-red-200": { "light": "oklch(0.885 0.062 25)", "dark": "oklch(0.885 0.062 25)" },
|
|
219
|
+
"--kpt-color-red-50": { "light": "oklch(0.971 0.013 25)", "dark": "oklch(0.971 0.013 25)" },
|
|
220
|
+
"--kpt-color-red-500": { "light": "oklch(0.637 0.208 25)", "dark": "oklch(0.637 0.208 25)" },
|
|
221
|
+
"--kpt-color-red-600": { "light": "oklch(0.577 0.213 27)", "dark": "oklch(0.577 0.213 27)" },
|
|
222
|
+
"--kpt-color-red-700": { "light": "oklch(0.505 0.190 27)", "dark": "oklch(0.505 0.190 27)" },
|
|
223
|
+
"--kpt-color-red-950": { "light": "oklch(0.260 0.090 27)", "dark": "oklch(0.260 0.090 27)" },
|
|
224
|
+
"--kpt-color-success": { "light": "{--kpt-color-green-600}", "dark": "{--kpt-color-green-500}" },
|
|
225
|
+
"--kpt-color-success-border": { "light": "{--kpt-color-green-200}", "dark": "{--kpt-color-green-700}" },
|
|
226
|
+
"--kpt-color-success-contrast": { "light": "{--kpt-color-neutral-0}", "dark": "{--kpt-color-neutral-950}" },
|
|
227
|
+
"--kpt-color-success-hover": { "light": "{--kpt-color-green-700}", "dark": "{--kpt-color-green-600}" },
|
|
228
|
+
"--kpt-color-success-subtle": { "light": "{--kpt-color-green-50}", "dark": "{--kpt-color-green-950}" },
|
|
229
|
+
"--kpt-color-surface": { "light": "{--kpt-color-neutral-0}", "dark": "{--kpt-color-neutral-950}" },
|
|
230
|
+
"--kpt-color-surface-hover": { "light": "{--kpt-color-neutral-50}", "dark": "{--kpt-color-neutral-900}" },
|
|
231
|
+
"--kpt-color-surface-raised": { "light": "{--kpt-color-neutral-0}", "dark": "{--kpt-color-neutral-900}" },
|
|
232
|
+
"--kpt-color-surface-selected": { "light": "{--kpt-color-neutral-100}", "dark": "{--kpt-color-neutral-800}" },
|
|
233
|
+
"--kpt-color-surface-sunken": { "light": "{--kpt-color-neutral-100}", "dark": "{--kpt-color-neutral-1000}" },
|
|
234
|
+
"--kpt-color-surface-variant": { "light": "{--kpt-color-neutral-50}", "dark": "{--kpt-color-neutral-900}" },
|
|
235
|
+
"--kpt-color-text": { "light": "{--kpt-color-on-surface}", "dark": "{--kpt-color-on-surface}" },
|
|
236
|
+
"--kpt-color-text-inverse": { "light": "{--kpt-color-on-primary}", "dark": "{--kpt-color-on-primary}" },
|
|
237
|
+
"--kpt-color-text-muted": { "light": "{--kpt-color-on-surface-muted}", "dark": "{--kpt-color-on-surface-muted}" },
|
|
238
|
+
"--kpt-color-text-subtle": { "light": "{--kpt-color-neutral-400}", "dark": "{--kpt-color-neutral-500}" },
|
|
239
|
+
"--kpt-color-warning": { "light": "{--kpt-color-amber-600}", "dark": "{--kpt-color-amber-500}" },
|
|
240
|
+
"--kpt-color-warning-border": { "light": "{--kpt-color-amber-200}", "dark": "{--kpt-color-amber-700}" },
|
|
241
|
+
"--kpt-color-warning-contrast": { "light": "{--kpt-color-neutral-0}", "dark": "{--kpt-color-neutral-950}" },
|
|
242
|
+
"--kpt-color-warning-hover": { "light": "{--kpt-color-amber-700}", "dark": "{--kpt-color-amber-600}" },
|
|
243
|
+
"--kpt-color-warning-subtle": { "light": "{--kpt-color-amber-50}", "dark": "{--kpt-color-amber-950}" },
|
|
244
|
+
"--kpt-elevation-1": { "light": "0 1px 2px 0 oklch(0.141 0.005 286 / 0.08)", "dark": "0 1px 2px 0 oklch(0 0 0 / 0.5)" },
|
|
245
|
+
"--kpt-elevation-2": { "light": "0 2px 6px -1px oklch(0.141 0.005 286 / 0.10), 0 1px 2px 0 oklch(0.141 0.005 286 / 0.06)", "dark": "0 2px 6px -1px oklch(0 0 0 / 0.55), 0 1px 2px 0 oklch(0 0 0 / 0.4)" },
|
|
246
|
+
"--kpt-elevation-3": { "light": "0 8px 16px -4px oklch(0.141 0.005 286 / 0.12), 0 2px 4px 0 oklch(0.141 0.005 286 / 0.06)", "dark": "0 8px 16px -4px oklch(0 0 0 / 0.6), 0 2px 4px 0 oklch(0 0 0 / 0.4)" },
|
|
247
|
+
"--kpt-elevation-4": { "light": "0 16px 28px -8px oklch(0.141 0.005 286 / 0.16), 0 4px 8px 0 oklch(0.141 0.005 286 / 0.08)", "dark": "0 16px 28px -8px oklch(0 0 0 / 0.65), 0 4px 8px 0 oklch(0 0 0 / 0.45)" },
|
|
248
|
+
"--kpt-font-family-mono": { "light": "ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace", "dark": "ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace" },
|
|
249
|
+
"--kpt-font-family-sans": { "light": "system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif", "dark": "system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" },
|
|
250
|
+
"--kpt-font-line-height-normal": { "light": "1.5", "dark": "1.5" },
|
|
251
|
+
"--kpt-font-line-height-relaxed": { "light": "1.7", "dark": "1.7" },
|
|
252
|
+
"--kpt-font-line-height-tight": { "light": "1.25", "dark": "1.25" },
|
|
253
|
+
"--kpt-font-size-2xl": { "light": "1.5rem", "dark": "1.5rem" },
|
|
254
|
+
"--kpt-font-size-3xl": { "light": "1.875rem", "dark": "1.875rem" },
|
|
255
|
+
"--kpt-font-size-lg": { "light": "1.125rem", "dark": "1.125rem" },
|
|
256
|
+
"--kpt-font-size-md": { "light": "1rem", "dark": "1rem" },
|
|
257
|
+
"--kpt-font-size-sm": { "light": "0.875rem", "dark": "0.875rem" },
|
|
258
|
+
"--kpt-font-size-xl": { "light": "1.25rem", "dark": "1.25rem" },
|
|
259
|
+
"--kpt-font-size-xs": { "light": "0.75rem", "dark": "0.75rem" },
|
|
260
|
+
"--kpt-font-weight-bold": { "light": "700", "dark": "700" },
|
|
261
|
+
"--kpt-font-weight-medium": { "light": "500", "dark": "500" },
|
|
262
|
+
"--kpt-font-weight-regular": { "light": "400", "dark": "400" },
|
|
263
|
+
"--kpt-font-weight-semibold": { "light": "600", "dark": "600" },
|
|
264
|
+
"--kpt-form-field-bg": { "light": "{--kpt-color-surface}", "dark": "{--kpt-color-surface}" },
|
|
265
|
+
"--kpt-form-field-border": { "light": "{--kpt-color-border-strong}", "dark": "{--kpt-color-border-strong}" },
|
|
266
|
+
"--kpt-form-field-border-error": { "light": "{--kpt-color-danger}", "dark": "{--kpt-color-danger}" },
|
|
267
|
+
"--kpt-form-field-border-focus": { "light": "{--kpt-color-focus-ring}", "dark": "{--kpt-color-focus-ring}" },
|
|
268
|
+
"--kpt-form-field-border-hover": { "light": "{--kpt-color-on-surface-muted}", "dark": "{--kpt-color-on-surface-muted}" },
|
|
269
|
+
"--kpt-form-field-error": { "light": "{--kpt-color-danger}", "dark": "{--kpt-color-danger}" },
|
|
270
|
+
"--kpt-form-field-hint": { "light": "{--kpt-color-on-surface-muted}", "dark": "{--kpt-color-on-surface-muted}" },
|
|
271
|
+
"--kpt-form-field-label": { "light": "{--kpt-color-on-surface}", "dark": "{--kpt-color-on-surface}" },
|
|
272
|
+
"--kpt-form-field-placeholder": { "light": "{--kpt-color-on-surface-muted}", "dark": "{--kpt-color-on-surface-muted}" },
|
|
273
|
+
"--kpt-form-field-radius": { "light": "{--kpt-radius-md}", "dark": "{--kpt-radius-md}" },
|
|
274
|
+
"--kpt-form-field-text": { "light": "{--kpt-color-on-surface}", "dark": "{--kpt-color-on-surface}" },
|
|
275
|
+
"--kpt-map-bg": { "light": "{--kpt-color-surface-sunken}", "dark": "{--kpt-color-surface-sunken}" },
|
|
276
|
+
"--kpt-map-border": { "light": "{--kpt-color-border}", "dark": "{--kpt-color-border}" },
|
|
277
|
+
"--kpt-map-cluster-bg": { "light": "{--kpt-color-primary}", "dark": "{--kpt-color-primary}" },
|
|
278
|
+
"--kpt-map-cluster-fg": { "light": "{--kpt-color-primary-contrast}", "dark": "{--kpt-color-primary-contrast}" },
|
|
279
|
+
"--kpt-map-marker-size": { "light": "2rem", "dark": "2rem" },
|
|
280
|
+
"--kpt-map-poi-media-radius": { "light": "{--kpt-radius-md}", "dark": "{--kpt-radius-md}" },
|
|
281
|
+
"--kpt-map-poi-row-hover": { "light": "{--kpt-color-surface-hover}", "dark": "{--kpt-color-surface-hover}" },
|
|
282
|
+
"--kpt-map-popup-bg": { "light": "{--kpt-color-surface-raised}", "dark": "{--kpt-color-surface-raised}" },
|
|
283
|
+
"--kpt-map-popup-max-height": { "light": "32rem", "dark": "32rem" },
|
|
284
|
+
"--kpt-map-popup-shadow": { "light": "{--kpt-elevation-3}", "dark": "{--kpt-elevation-3}" },
|
|
285
|
+
"--kpt-map-popup-width": { "light": "20rem", "dark": "20rem" },
|
|
286
|
+
"--kpt-map-popup-width-card": { "light": "26rem", "dark": "26rem" },
|
|
287
|
+
"--kpt-map-radius": { "light": "{--kpt-radius-lg}", "dark": "{--kpt-radius-lg}" },
|
|
288
|
+
"--kpt-map-search-panel-max-height": { "light": "18rem", "dark": "18rem" },
|
|
289
|
+
"--kpt-map-search-width": { "light": "20rem", "dark": "20rem" },
|
|
290
|
+
"--kpt-motion-duration-base": { "light": "200ms", "dark": "200ms" },
|
|
291
|
+
"--kpt-motion-duration-fast": { "light": "120ms", "dark": "120ms" },
|
|
292
|
+
"--kpt-motion-duration-slow": { "light": "320ms", "dark": "320ms" },
|
|
293
|
+
"--kpt-motion-easing-emphasized": { "light": "cubic-bezier(0.3, 0, 0, 1)", "dark": "cubic-bezier(0.3, 0, 0, 1)" },
|
|
294
|
+
"--kpt-motion-easing-standard": { "light": "cubic-bezier(0.2, 0, 0, 1)", "dark": "cubic-bezier(0.2, 0, 0, 1)" },
|
|
295
|
+
"--kpt-progress-buffer-opacity": { "light": "0.32", "dark": "0.32" },
|
|
296
|
+
"--kpt-progress-gap": { "light": "{--kpt-space-2}", "dark": "{--kpt-space-2}" },
|
|
297
|
+
"--kpt-progress-label-fg": { "light": "{--kpt-color-on-surface-muted}", "dark": "{--kpt-color-on-surface-muted}" },
|
|
298
|
+
"--kpt-progress-thickness-lg": { "light": "{--kpt-space-3}", "dark": "{--kpt-space-3}" },
|
|
299
|
+
"--kpt-progress-thickness-md": { "light": "{--kpt-space-2}", "dark": "{--kpt-space-2}" },
|
|
300
|
+
"--kpt-progress-thickness-sm": { "light": "{--kpt-space-1}", "dark": "{--kpt-space-1}" },
|
|
301
|
+
"--kpt-progress-track-bg": { "light": "{--kpt-color-surface-variant}", "dark": "{--kpt-color-surface-variant}" },
|
|
302
|
+
"--kpt-progress-value-fg": { "light": "{--kpt-color-on-surface}", "dark": "{--kpt-color-on-surface}" },
|
|
303
|
+
"--kpt-radius-full": { "light": "9999px", "dark": "9999px" },
|
|
304
|
+
"--kpt-radius-lg": { "light": "0.75rem", "dark": "0.75rem" },
|
|
305
|
+
"--kpt-radius-md": { "light": "0.5rem", "dark": "0.5rem" },
|
|
306
|
+
"--kpt-radius-none": { "light": "0", "dark": "0" },
|
|
307
|
+
"--kpt-radius-sm": { "light": "0.25rem", "dark": "0.25rem" },
|
|
308
|
+
"--kpt-radius-xl": { "light": "1rem", "dark": "1rem" },
|
|
309
|
+
"--kpt-shadow-lg": { "light": "{--kpt-elevation-3}", "dark": "{--kpt-elevation-3}" },
|
|
310
|
+
"--kpt-shadow-md": { "light": "{--kpt-elevation-2}", "dark": "{--kpt-elevation-2}" },
|
|
311
|
+
"--kpt-shadow-sm": { "light": "{--kpt-elevation-1}", "dark": "{--kpt-elevation-1}" },
|
|
312
|
+
"--kpt-sidenav-bg": { "light": "{--kpt-color-surface-variant}", "dark": "{--kpt-color-surface-variant}" },
|
|
313
|
+
"--kpt-sidenav-border": { "light": "{--kpt-color-border}", "dark": "{--kpt-color-border}" },
|
|
314
|
+
"--kpt-sidenav-fg": { "light": "{--kpt-color-on-surface}", "dark": "{--kpt-color-on-surface}" },
|
|
315
|
+
"--kpt-sidenav-rail-width": { "light": "4rem", "dark": "4rem" },
|
|
316
|
+
"--kpt-sidenav-width": { "light": "16rem", "dark": "16rem" },
|
|
317
|
+
"--kpt-space-0": { "light": "0", "dark": "0" },
|
|
318
|
+
"--kpt-space-1": { "light": "0.25rem", "dark": "0.25rem" },
|
|
319
|
+
"--kpt-space-10": { "light": "2.5rem", "dark": "2.5rem" },
|
|
320
|
+
"--kpt-space-12": { "light": "3rem", "dark": "3rem" },
|
|
321
|
+
"--kpt-space-16": { "light": "4rem", "dark": "4rem" },
|
|
322
|
+
"--kpt-space-2": { "light": "0.5rem", "dark": "0.5rem" },
|
|
323
|
+
"--kpt-space-3": { "light": "0.75rem", "dark": "0.75rem" },
|
|
324
|
+
"--kpt-space-4": { "light": "1rem", "dark": "1rem" },
|
|
325
|
+
"--kpt-space-5": { "light": "1.25rem", "dark": "1.25rem" },
|
|
326
|
+
"--kpt-space-6": { "light": "1.5rem", "dark": "1.5rem" },
|
|
327
|
+
"--kpt-space-8": { "light": "2rem", "dark": "2rem" },
|
|
328
|
+
"--kpt-table-bg": { "light": "{--kpt-color-surface-raised}", "dark": "{--kpt-color-surface-raised}" },
|
|
329
|
+
"--kpt-table-border": { "light": "{--kpt-color-border}", "dark": "{--kpt-color-border}" },
|
|
330
|
+
"--kpt-table-cell-padding": { "light": "{--kpt-space-3}", "dark": "{--kpt-space-3}" },
|
|
331
|
+
"--kpt-table-fg": { "light": "{--kpt-color-on-surface}", "dark": "{--kpt-color-on-surface}" },
|
|
332
|
+
"--kpt-table-header-bg": { "light": "{--kpt-color-surface-variant}", "dark": "{--kpt-color-surface-variant}" },
|
|
333
|
+
"--kpt-table-header-fg": { "light": "{--kpt-color-on-surface-muted}", "dark": "{--kpt-color-on-surface-muted}" },
|
|
334
|
+
"--kpt-table-radius": { "light": "{--kpt-radius-lg}", "dark": "{--kpt-radius-lg}" },
|
|
335
|
+
"--kpt-table-row-hover": { "light": "{--kpt-color-surface-variant}", "dark": "{--kpt-color-surface-variant}" },
|
|
336
|
+
"--kpt-table-row-selected": { "light": "{--kpt-color-muted}", "dark": "{--kpt-color-muted}" },
|
|
337
|
+
"--kpt-toolbar-bg": { "light": "{--kpt-color-surface-raised}", "dark": "{--kpt-color-surface-raised}" },
|
|
338
|
+
"--kpt-toolbar-border": { "light": "{--kpt-color-border}", "dark": "{--kpt-color-border}" },
|
|
339
|
+
"--kpt-toolbar-fg": { "light": "{--kpt-color-on-surface}", "dark": "{--kpt-color-on-surface}" },
|
|
340
|
+
"--kpt-toolbar-height": { "light": "3.5rem", "dark": "3.5rem" },
|
|
341
|
+
"--kpt-toolbar-height-compact": { "light": "3rem", "dark": "3rem" },
|
|
342
|
+
"--kpt-z-base": { "light": "0", "dark": "0" },
|
|
343
|
+
"--kpt-z-dropdown": { "light": "1000", "dark": "1000" },
|
|
344
|
+
"--kpt-z-modal": { "light": "1200", "dark": "1200" },
|
|
345
|
+
"--kpt-z-overlay": { "light": "1100", "dark": "1100" },
|
|
346
|
+
"--kpt-z-raised": { "light": "10", "dark": "10" },
|
|
347
|
+
"--kpt-z-toast": { "light": "1300", "dark": "1300" },
|
|
348
|
+
};
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export type { KptCustomToken, KptThemeDoc, KptThemeExport, KptThemeMeta, KptThemeMode, KptThemeOverrides, KptThemeRecipe, } from './schema.ts';
|
|
2
|
+
export { emptyTheme, migrateTheme, parseTheme, serializeTheme, KPT_THEME_VERSION } from './schema.ts';
|
|
3
|
+
export type { KptRamp, KptRampOptions } from './ramp.ts';
|
|
4
|
+
export { anchorStep, buildRamp, rampToCss, readSeed } from './ramp.ts';
|
|
5
|
+
export { contentOn, derivePrimary, KPT_PRIMARY_ROLES } from './roles.ts';
|
|
6
|
+
export type { KptResolvedTheme, KptTokenMap } from './resolve.ts';
|
|
7
|
+
export { isKnownToken, isPrimitiveToken, isSemanticToken, KPT_ALL_TOKENS, recipeLayer, resolveTheme, scaleLength, stockTheme, themeDiff, themeLayer, unknownTokens, } from './resolve.ts';
|
|
8
|
+
export type { KptDtcgConfidence, KptDtcgOptions, KptDtcgReason, KptDtcgReport, KptDtcgSource, KptDtcgWarning, } from './dtcg.ts';
|
|
9
|
+
export { fromDtcg, normalizeDtcgPath } from './dtcg.ts';
|
|
10
|
+
export type { KptEmitOptions } from './emit.ts';
|
|
11
|
+
export { emitCss, emitDtcg, emitPlan, emitScss, emitTs, rawValue, stockValue, themeSize } from './emit.ts';
|
|
12
|
+
export type { KptAuditOptions, KptContrastFinding, KptContrastLevel, KptContrastPair } from './audit.ts';
|
|
13
|
+
export { auditTheme, KPT_CONTRAST_PAIRS } from './audit.ts';
|
|
14
|
+
export type { KptApplyOptions } from './runtime.ts';
|
|
15
|
+
export { applyKptTheme, clearKptTheme, KPT_THEME_STYLE_ID } from './runtime.ts';
|
|
16
|
+
export { KPT_ACCENT_PATTERN, KPT_RAMP_CHROMA, KPT_RAMP_LIGHTNESS, KPT_RAMP_PEAK_CHROMA, KPT_RAMP_STEPS, KPT_RAW, KPT_SEMANTIC_TOKENS, } from './generated/tokens.ts';
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export { emptyTheme, migrateTheme, parseTheme, serializeTheme, KPT_THEME_VERSION } from "./schema.js";
|
|
2
|
+
export { anchorStep, buildRamp, rampToCss, readSeed } from "./ramp.js";
|
|
3
|
+
export { contentOn, derivePrimary, KPT_PRIMARY_ROLES } from "./roles.js";
|
|
4
|
+
export { isKnownToken, isPrimitiveToken, isSemanticToken, KPT_ALL_TOKENS, recipeLayer, resolveTheme, scaleLength, stockTheme, themeDiff, themeLayer, unknownTokens, } from "./resolve.js";
|
|
5
|
+
export { fromDtcg, normalizeDtcgPath } from "./dtcg.js";
|
|
6
|
+
export { emitCss, emitDtcg, emitPlan, emitScss, emitTs, rawValue, stockValue, themeSize } from "./emit.js";
|
|
7
|
+
export { auditTheme, KPT_CONTRAST_PAIRS } from "./audit.js";
|
|
8
|
+
export { applyKptTheme, clearKptTheme, KPT_THEME_STYLE_ID } from "./runtime.js";
|
|
9
|
+
export { KPT_ACCENT_PATTERN, KPT_RAMP_CHROMA, KPT_RAMP_LIGHTNESS, KPT_RAMP_PEAK_CHROMA, KPT_RAMP_STEPS, KPT_RAW, KPT_SEMANTIC_TOKENS, } from "./generated/tokens.js";
|
package/dist/ramp.d.ts
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Rampa z jednego ziarna.
|
|
3
|
+
*
|
|
4
|
+
* Krzywe nie są tu wymyślone: jasność na każdym stopniu bierze się z rampy neutralnej biblioteki,
|
|
5
|
+
* a kształt nasycenia z uśrednionych czterech ramp akcentowych (red/green/amber/blue). Generator
|
|
6
|
+
* odczytuje jedno i drugie z `@konce-pt/tokens`, więc rampa z ziarna rozkłada się dokładnie tak
|
|
7
|
+
* samo jak palety, które biblioteka już ma — a nie „podobnie".
|
|
8
|
+
*
|
|
9
|
+
* Ziarno wnosi dwie rzeczy: odcień i to, jak mocna ma być rampa. Jasność ziarna decyduje tylko
|
|
10
|
+
* o tym, na którym stopniu je zakotwiczyć.
|
|
11
|
+
*/
|
|
12
|
+
import type { KptOklch } from '@konce-pt/color';
|
|
13
|
+
/** Rampa: stopień → barwa. Stopnie są te same, co w rampie neutralnej biblioteki. */
|
|
14
|
+
export type KptRamp = Readonly<Record<number, KptOklch>>;
|
|
15
|
+
/**
|
|
16
|
+
* Ziarno na OKLCH. Przyjmuje `#rgb`, `#rrggbb` i zapis `oklch()` — czyli to, co realnie przychodzi
|
|
17
|
+
* z próbnika koloru i z pola tekstowego. Zwraca `null` na wszystkim innym; wywołujący ma wtedy
|
|
18
|
+
* pokazać błąd, a nie dostać po cichu czerń.
|
|
19
|
+
*/
|
|
20
|
+
export declare function readSeed(seed: string): KptOklch | null;
|
|
21
|
+
/** Stopień, którego jasność jest najbliższa jasności ziarna — tam ziarno „siedzi" w rampie. */
|
|
22
|
+
export declare function anchorStep(seed: KptOklch): number;
|
|
23
|
+
export interface KptRampOptions {
|
|
24
|
+
/** Sprowadzać stopnie do gamutu sRGB. Domyślnie tak — patrz komentarz niżej. */
|
|
25
|
+
gamut?: 'srgb' | 'none';
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Pełna rampa 0–1000 z ziarna.
|
|
29
|
+
*
|
|
30
|
+
* Nasycenie skalujemy tak, żeby na stopniu kotwiczącym wyszło nasycenie ziarna. Dzięki temu
|
|
31
|
+
* barwa stonowana daje rampę stonowaną, a jaskrawa — jaskrawą, i nikt nie dostaje palety
|
|
32
|
+
* mocniejszej niż kolor, który podał.
|
|
33
|
+
*
|
|
34
|
+
* Domyślne sprowadzanie do gamutu jest świadome, mimo że osiem prymitywów koloru samej biblioteki
|
|
35
|
+
* leży odrobinę poza sRGB. Tam wartości są wpisane ręcznie i przeglądarka przycina je raz;
|
|
36
|
+
* tutaj barwy są liczone, a barwa poza gamutem wraca z przycięcia z przesuniętym odcieniem —
|
|
37
|
+
* czyli rampa przestałaby trzymać jeden odcień, co widać gołym okiem na sąsiednich stopniach.
|
|
38
|
+
*/
|
|
39
|
+
export declare function buildRamp(seed: KptOklch, options?: KptRampOptions): KptRamp;
|
|
40
|
+
/** Rampa jako wartości gotowe do wpisania w CSS. */
|
|
41
|
+
export declare const rampToCss: (ramp: KptRamp) => Record<number, string>;
|
package/dist/ramp.js
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Rampa z jednego ziarna.
|
|
3
|
+
*
|
|
4
|
+
* Krzywe nie są tu wymyślone: jasność na każdym stopniu bierze się z rampy neutralnej biblioteki,
|
|
5
|
+
* a kształt nasycenia z uśrednionych czterech ramp akcentowych (red/green/amber/blue). Generator
|
|
6
|
+
* odczytuje jedno i drugie z `@konce-pt/tokens`, więc rampa z ziarna rozkłada się dokładnie tak
|
|
7
|
+
* samo jak palety, które biblioteka już ma — a nie „podobnie".
|
|
8
|
+
*
|
|
9
|
+
* Ziarno wnosi dwie rzeczy: odcień i to, jak mocna ma być rampa. Jasność ziarna decyduje tylko
|
|
10
|
+
* o tym, na którym stopniu je zakotwiczyć.
|
|
11
|
+
*/
|
|
12
|
+
import { clampToGamut, formatOklch, parseHexColor, parseOklch, srgbToOklch } from '@konce-pt/color';
|
|
13
|
+
import { KPT_RAMP_CHROMA, KPT_RAMP_LIGHTNESS, KPT_RAMP_STEPS } from "./generated/tokens.js";
|
|
14
|
+
/**
|
|
15
|
+
* Ziarno na OKLCH. Przyjmuje `#rgb`, `#rrggbb` i zapis `oklch()` — czyli to, co realnie przychodzi
|
|
16
|
+
* z próbnika koloru i z pola tekstowego. Zwraca `null` na wszystkim innym; wywołujący ma wtedy
|
|
17
|
+
* pokazać błąd, a nie dostać po cichu czerń.
|
|
18
|
+
*/
|
|
19
|
+
export function readSeed(seed) {
|
|
20
|
+
const oklch = parseOklch(seed);
|
|
21
|
+
if (oklch)
|
|
22
|
+
return oklch;
|
|
23
|
+
const rgb = parseHexColor(seed);
|
|
24
|
+
return rgb ? srgbToOklch(rgb) : null;
|
|
25
|
+
}
|
|
26
|
+
/** Stopień, którego jasność jest najbliższa jasności ziarna — tam ziarno „siedzi" w rampie. */
|
|
27
|
+
export function anchorStep(seed) {
|
|
28
|
+
let best = KPT_RAMP_STEPS[0];
|
|
29
|
+
let distance = Infinity;
|
|
30
|
+
for (const step of KPT_RAMP_STEPS) {
|
|
31
|
+
const d = Math.abs(KPT_RAMP_LIGHTNESS[step] - seed.l);
|
|
32
|
+
if (d < distance) {
|
|
33
|
+
distance = d;
|
|
34
|
+
best = step;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
return best;
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* Pełna rampa 0–1000 z ziarna.
|
|
41
|
+
*
|
|
42
|
+
* Nasycenie skalujemy tak, żeby na stopniu kotwiczącym wyszło nasycenie ziarna. Dzięki temu
|
|
43
|
+
* barwa stonowana daje rampę stonowaną, a jaskrawa — jaskrawą, i nikt nie dostaje palety
|
|
44
|
+
* mocniejszej niż kolor, który podał.
|
|
45
|
+
*
|
|
46
|
+
* Domyślne sprowadzanie do gamutu jest świadome, mimo że osiem prymitywów koloru samej biblioteki
|
|
47
|
+
* leży odrobinę poza sRGB. Tam wartości są wpisane ręcznie i przeglądarka przycina je raz;
|
|
48
|
+
* tutaj barwy są liczone, a barwa poza gamutem wraca z przycięcia z przesuniętym odcieniem —
|
|
49
|
+
* czyli rampa przestałaby trzymać jeden odcień, co widać gołym okiem na sąsiednich stopniach.
|
|
50
|
+
*/
|
|
51
|
+
export function buildRamp(seed, options = {}) {
|
|
52
|
+
const anchor = anchorStep(seed);
|
|
53
|
+
const anchorChroma = KPT_RAMP_CHROMA[anchor];
|
|
54
|
+
// Kotwica na skraju skali ma nasycenie zerowe (biel i czerń go nie mają), więc skalowanie
|
|
55
|
+
// przez nią byłoby dzieleniem przez zero. Rampa bez nasycenia to poprawna odpowiedź na ziarno,
|
|
56
|
+
// które samo jest bielą albo czernią.
|
|
57
|
+
const scale = anchorChroma > 0 ? seed.c / anchorChroma : 0;
|
|
58
|
+
const ramp = {};
|
|
59
|
+
for (const step of KPT_RAMP_STEPS) {
|
|
60
|
+
const color = { l: KPT_RAMP_LIGHTNESS[step], c: KPT_RAMP_CHROMA[step] * scale, h: seed.h };
|
|
61
|
+
ramp[step] = options.gamut === 'none' ? color : clampToGamut(color);
|
|
62
|
+
}
|
|
63
|
+
return ramp;
|
|
64
|
+
}
|
|
65
|
+
/** Rampa jako wartości gotowe do wpisania w CSS. */
|
|
66
|
+
export const rampToCss = (ramp) => Object.fromEntries(Object.entries(ramp).map(([step, color]) => [step, formatOklch(color)]));
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Rozwiązywanie motywu: stock → recipe → overrides → custom.
|
|
3
|
+
*
|
|
4
|
+
* Wartości stockowe są trzymane surowo, z referencjami `{--kpt-nazwa}`, i to jest tu cała sztuczka.
|
|
5
|
+
* Gdyby stock był spłaszczony do liczb, nadpisanie prymitywu `--kpt-radius-md` nie ruszyłoby
|
|
6
|
+
* `--kpt-button-radius`, który się na niego powołuje — a w przeglądarce ruszyłoby, bo tam robi to
|
|
7
|
+
* kaskada przez `var()`. Podgląd rozjeżdżałby się z eksportem dokładnie w tym miejscu, w którym
|
|
8
|
+
* użytkownik akurat kręci suwakiem promienia.
|
|
9
|
+
*
|
|
10
|
+
* Wartości z przepisu wchodzą tą samą drogą co ręczne nadpisania, ale **przed** nimi: ręczna
|
|
11
|
+
* zmiana roli zawsze wygrywa z generatorem i przeliczenie palety od nowa jej nie kasuje.
|
|
12
|
+
*/
|
|
13
|
+
import type { KptThemeDoc, KptThemeMode } from './schema.ts';
|
|
14
|
+
export type KptTokenMap = Record<string, string>;
|
|
15
|
+
/** Motyw po rozwiązaniu: każdy token biblioteki plus tokeny własne, w obu wariantach. */
|
|
16
|
+
export interface KptResolvedTheme {
|
|
17
|
+
light: KptTokenMap;
|
|
18
|
+
dark: KptTokenMap;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Mnoży wartość długości przez współczynnik, zachowując jednostkę. Wartość, która nie jest
|
|
22
|
+
* pojedynczą liczbą z jednostką (np. `clamp()` albo lista), wraca bez zmiany — skalowanie czegoś,
|
|
23
|
+
* czego nie rozumiemy, dawałoby wynik gorszy niż zostawienie tego w spokoju.
|
|
24
|
+
*/
|
|
25
|
+
export declare function scaleLength(value: string, factor: number): string;
|
|
26
|
+
/**
|
|
27
|
+
* Wartości wynikające z przepisu, osobno dla każdego motywu. To jest jedyne miejsce, w którym
|
|
28
|
+
* `recipe` zamienia się w tokeny — dalej wszystko jest już zwykłym nadpisaniem.
|
|
29
|
+
*/
|
|
30
|
+
export declare function recipeLayer(doc: KptThemeDoc, mode: KptThemeMode): KptTokenMap;
|
|
31
|
+
/**
|
|
32
|
+
* Warstwa nadpisań dla jednego motywu: przepis, potem nadpisania ręczne, potem tokeny własne.
|
|
33
|
+
* Zwraca wartości **surowe** — referencje `{--kpt-...}` są tu nadal dozwolone, bo nadpisanie
|
|
34
|
+
* w rodzaju „primary ma być tym, czym info" jest sensowne i ma przeżyć do eksportu.
|
|
35
|
+
*/
|
|
36
|
+
export declare function themeLayer(doc: KptThemeDoc, mode: KptThemeMode): KptTokenMap;
|
|
37
|
+
/** Motyw rozwiązany do wartości dosłownych — to, co widać w podglądzie i mierzy audyt. */
|
|
38
|
+
export declare function resolveTheme(doc?: KptThemeDoc): KptResolvedTheme;
|
|
39
|
+
export declare const stockTheme: () => KptResolvedTheme;
|
|
40
|
+
/**
|
|
41
|
+
* Tokeny, których wartość różni się od stockowej — czyli to, co realnie trzeba wyemitować.
|
|
42
|
+
* Liczone po **rozwiązaniu**, więc nadpisanie prymitywu pokazuje się tu jako komplet ról, które
|
|
43
|
+
* za nim poszły, a nie jako jeden wpis, którego skutków nie widać.
|
|
44
|
+
*/
|
|
45
|
+
export declare function themeDiff(doc: KptThemeDoc, mode: KptThemeMode): KptTokenMap;
|
|
46
|
+
export declare const isSemanticToken: (name: string) => boolean;
|
|
47
|
+
export declare const isKnownToken: (name: string) => boolean;
|
|
48
|
+
export declare const isPrimitiveToken: (name: string) => boolean;
|
|
49
|
+
/** Wszystkie nazwy tokenów biblioteki — importer dopasowuje do nich dokładnie, bez synonimów. */
|
|
50
|
+
export declare const KPT_ALL_TOKENS: readonly string[];
|
|
51
|
+
/**
|
|
52
|
+
* Nazwy z dokumentu, których biblioteka nie zna. Motyw zapisany pod starszą wersją ma prawo się
|
|
53
|
+
* otworzyć i dopiero wtedy powiedzieć, co zniknęło — dlatego to jest osobne pytanie, a nie błąd
|
|
54
|
+
* parsowania.
|
|
55
|
+
*/
|
|
56
|
+
export declare function unknownTokens(doc: KptThemeDoc): string[];
|