@opencode-ai/theme 0.0.0-next-16413

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.
@@ -0,0 +1,8 @@
1
+ type OklchColor = {
2
+ l: number;
3
+ c: number;
4
+ h: number;
5
+ };
6
+ export declare function rgbToOklch(red: number, green: number, blue: number): OklchColor;
7
+ export declare function oklchToHex(color: OklchColor): string;
8
+ export {};
@@ -0,0 +1,67 @@
1
+ function clamp(value, min, max) {
2
+ return Math.max(min, Math.min(max, value));
3
+ }
4
+ function hue(value) {
5
+ return ((value % 360) + 360) % 360;
6
+ }
7
+ function linearToSrgb(value) {
8
+ if (value <= 0.0031308)
9
+ return value * 12.92;
10
+ return 1.055 * Math.pow(value, 1 / 2.4) - 0.055;
11
+ }
12
+ function srgbToLinear(value) {
13
+ if (value <= 0.04045)
14
+ return value / 12.92;
15
+ return Math.pow((value + 0.055) / 1.055, 2.4);
16
+ }
17
+ export function rgbToOklch(red, green, blue) {
18
+ const linearRed = srgbToLinear(red);
19
+ const linearGreen = srgbToLinear(green);
20
+ const linearBlue = srgbToLinear(blue);
21
+ const lRoot = Math.cbrt(0.4122214708 * linearRed + 0.5363325363 * linearGreen + 0.0514459929 * linearBlue);
22
+ const mRoot = Math.cbrt(0.2119034982 * linearRed + 0.6806995451 * linearGreen + 0.1073969566 * linearBlue);
23
+ const sRoot = Math.cbrt(0.0883024619 * linearRed + 0.2817188376 * linearGreen + 0.6299787005 * linearBlue);
24
+ const lightness = 0.2104542553 * lRoot + 0.793617785 * mRoot - 0.0040720468 * sRoot;
25
+ const a = 1.9779984951 * lRoot - 2.428592205 * mRoot + 0.4505937099 * sRoot;
26
+ const b = 0.0259040371 * lRoot + 0.7827717662 * mRoot - 0.808675766 * sRoot;
27
+ const chroma = Math.sqrt(a * a + b * b);
28
+ const angle = Math.atan2(b, a) * (180 / Math.PI);
29
+ return { l: lightness, c: chroma, h: angle < 0 ? angle + 360 : angle };
30
+ }
31
+ function oklchToRgb(color) {
32
+ const a = color.c * Math.cos((color.h * Math.PI) / 180);
33
+ const b = color.c * Math.sin((color.h * Math.PI) / 180);
34
+ const lRoot = color.l + 0.3963377774 * a + 0.2158037573 * b;
35
+ const mRoot = color.l - 0.1055613458 * a - 0.0638541728 * b;
36
+ const sRoot = color.l - 0.0894841775 * a - 1.291485548 * b;
37
+ const l = lRoot * lRoot * lRoot;
38
+ const m = mRoot * mRoot * mRoot;
39
+ const s = sRoot * sRoot * sRoot;
40
+ return {
41
+ r: linearToSrgb(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),
42
+ g: linearToSrgb(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),
43
+ b: linearToSrgb(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s),
44
+ };
45
+ }
46
+ function fitOklch(color) {
47
+ const base = { l: clamp(color.l, 0, 1), c: Math.max(0, color.c), h: hue(color.h) };
48
+ const rgb = oklchToRgb(base);
49
+ if (rgb.r >= 0 && rgb.r <= 1 && rgb.g >= 0 && rgb.g <= 1 && rgb.b >= 0 && rgb.b <= 1)
50
+ return base;
51
+ const fitted = Array.from({ length: 24 }).reduce((result, _, index) => {
52
+ if (result)
53
+ return result;
54
+ const next = { ...base, c: base.c * Math.pow(0.9, index + 1) };
55
+ const output = oklchToRgb(next);
56
+ if (output.r >= 0 && output.r <= 1 && output.g >= 0 && output.g <= 1 && output.b >= 0 && output.b <= 1)
57
+ return next;
58
+ }, undefined);
59
+ return fitted ?? { ...base, c: 0 };
60
+ }
61
+ export function oklchToHex(color) {
62
+ const rgb = oklchToRgb(fitOklch(color));
63
+ const toHex = (value) => Math.round(clamp(value, 0, 1) * 255)
64
+ .toString(16)
65
+ .padStart(2, "0");
66
+ return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`;
67
+ }
@@ -0,0 +1,552 @@
1
+ export declare const DEFAULT_CATEGORICAL: readonly ["blue", "purple", "green", "orange", "red", "cyan"];
2
+ export declare const DEFAULT_THEME: {
3
+ version: 2;
4
+ light: {
5
+ hue: {
6
+ gray: {
7
+ 100: string;
8
+ 200: string;
9
+ 300: string;
10
+ 400: string;
11
+ 500: string;
12
+ 600: string;
13
+ 700: string;
14
+ 800: string;
15
+ 900: string;
16
+ };
17
+ red: {
18
+ 100: string;
19
+ 200: string;
20
+ 300: string;
21
+ 400: string;
22
+ 500: string;
23
+ 600: string;
24
+ 700: string;
25
+ 800: string;
26
+ 900: string;
27
+ };
28
+ orange: {
29
+ 100: string;
30
+ 200: string;
31
+ 300: string;
32
+ 400: string;
33
+ 500: string;
34
+ 600: string;
35
+ 700: string;
36
+ 800: string;
37
+ 900: string;
38
+ };
39
+ yellow: {
40
+ 100: string;
41
+ 200: string;
42
+ 300: string;
43
+ 400: string;
44
+ 500: string;
45
+ 600: string;
46
+ 700: string;
47
+ 800: string;
48
+ 900: string;
49
+ };
50
+ green: {
51
+ 100: string;
52
+ 200: string;
53
+ 300: string;
54
+ 400: string;
55
+ 500: string;
56
+ 600: string;
57
+ 700: string;
58
+ 800: string;
59
+ 900: string;
60
+ };
61
+ cyan: {
62
+ 100: string;
63
+ 200: string;
64
+ 300: string;
65
+ 400: string;
66
+ 500: string;
67
+ 600: string;
68
+ 700: string;
69
+ 800: string;
70
+ 900: string;
71
+ };
72
+ blue: {
73
+ 100: string;
74
+ 200: string;
75
+ 300: string;
76
+ 400: string;
77
+ 500: string;
78
+ 600: string;
79
+ 700: string;
80
+ 800: string;
81
+ 900: string;
82
+ };
83
+ purple: {
84
+ 100: string;
85
+ 200: string;
86
+ 300: string;
87
+ 400: string;
88
+ 500: string;
89
+ 600: string;
90
+ 700: string;
91
+ 800: string;
92
+ 900: string;
93
+ };
94
+ accent: "$hue.blue";
95
+ interactive: "$hue.blue";
96
+ neutral: "$hue.gray";
97
+ };
98
+ categorical: readonly ["blue", "purple", "green", "orange", "red", "cyan"];
99
+ text: {
100
+ default: string;
101
+ subdued: string;
102
+ action: {
103
+ primary: {
104
+ default: string;
105
+ $disabled: string;
106
+ };
107
+ destructive: {
108
+ default: string;
109
+ $disabled: string;
110
+ };
111
+ };
112
+ formfield: {
113
+ default: string;
114
+ $focused: string;
115
+ $pressed: string;
116
+ $disabled: string;
117
+ $selected: string;
118
+ };
119
+ feedback: {
120
+ error: {
121
+ default: string;
122
+ subdued: string;
123
+ };
124
+ warning: {
125
+ default: string;
126
+ subdued: string;
127
+ };
128
+ success: {
129
+ default: string;
130
+ subdued: string;
131
+ };
132
+ info: {
133
+ default: string;
134
+ subdued: string;
135
+ };
136
+ };
137
+ };
138
+ background: {
139
+ default: string;
140
+ surface: {
141
+ offset: string;
142
+ overlay: string;
143
+ };
144
+ action: {
145
+ primary: {
146
+ default: string;
147
+ $hovered: string;
148
+ $focused: string;
149
+ $pressed: string;
150
+ $selected: string;
151
+ $disabled: string;
152
+ };
153
+ destructive: {
154
+ default: string;
155
+ $hovered: string;
156
+ $focused: string;
157
+ $pressed: string;
158
+ $selected: string;
159
+ $disabled: string;
160
+ };
161
+ };
162
+ formfield: {
163
+ default: string;
164
+ $hovered: string;
165
+ $focused: string;
166
+ $pressed: string;
167
+ $disabled: string;
168
+ $selected: string;
169
+ };
170
+ feedback: {
171
+ error: {
172
+ default: string;
173
+ };
174
+ warning: {
175
+ default: string;
176
+ };
177
+ success: {
178
+ default: string;
179
+ };
180
+ info: {
181
+ default: string;
182
+ };
183
+ };
184
+ };
185
+ border: {
186
+ default: string;
187
+ };
188
+ scrollbar: {
189
+ default: string;
190
+ };
191
+ diff: {
192
+ text: {
193
+ added: string;
194
+ removed: string;
195
+ context: string;
196
+ hunkHeader: string;
197
+ };
198
+ background: {
199
+ added: string;
200
+ removed: string;
201
+ context: string;
202
+ };
203
+ highlight: {
204
+ added: string;
205
+ removed: string;
206
+ };
207
+ lineNumber: {
208
+ text: string;
209
+ background: {
210
+ added: string;
211
+ removed: string;
212
+ };
213
+ };
214
+ };
215
+ syntax: {
216
+ comment: string;
217
+ keyword: string;
218
+ function: string;
219
+ variable: string;
220
+ string: string;
221
+ number: string;
222
+ type: string;
223
+ operator: string;
224
+ punctuation: string;
225
+ };
226
+ markdown: {
227
+ text: string;
228
+ heading: string;
229
+ link: string;
230
+ linkText: string;
231
+ code: string;
232
+ blockQuote: string;
233
+ emphasis: string;
234
+ strong: string;
235
+ horizontalRule: string;
236
+ listItem: string;
237
+ listEnumeration: string;
238
+ image: string;
239
+ imageText: string;
240
+ codeBlock: string;
241
+ };
242
+ "@context:elevated": {
243
+ text: {
244
+ action: {
245
+ primary: {
246
+ default: string;
247
+ };
248
+ };
249
+ };
250
+ background: {
251
+ default: string;
252
+ action: {
253
+ primary: {
254
+ default: string;
255
+ $hovered: string;
256
+ };
257
+ };
258
+ };
259
+ };
260
+ "@context:overlay": {
261
+ text: {
262
+ action: {
263
+ primary: {
264
+ default: string;
265
+ };
266
+ };
267
+ };
268
+ background: {
269
+ default: string;
270
+ action: {
271
+ primary: {
272
+ default: string;
273
+ };
274
+ };
275
+ };
276
+ };
277
+ };
278
+ dark: {
279
+ hue: {
280
+ gray: {
281
+ 100: string;
282
+ 200: string;
283
+ 300: string;
284
+ 400: string;
285
+ 500: string;
286
+ 600: string;
287
+ 700: string;
288
+ 800: string;
289
+ 900: string;
290
+ };
291
+ red: {
292
+ 100: string;
293
+ 200: string;
294
+ 300: string;
295
+ 400: string;
296
+ 500: string;
297
+ 600: string;
298
+ 700: string;
299
+ 800: string;
300
+ 900: string;
301
+ };
302
+ orange: {
303
+ 100: string;
304
+ 200: string;
305
+ 300: string;
306
+ 400: string;
307
+ 500: string;
308
+ 600: string;
309
+ 700: string;
310
+ 800: string;
311
+ 900: string;
312
+ };
313
+ yellow: {
314
+ 100: string;
315
+ 200: string;
316
+ 300: string;
317
+ 400: string;
318
+ 500: string;
319
+ 600: string;
320
+ 700: string;
321
+ 800: string;
322
+ 900: string;
323
+ };
324
+ green: {
325
+ 100: string;
326
+ 200: string;
327
+ 300: string;
328
+ 400: string;
329
+ 500: string;
330
+ 600: string;
331
+ 700: string;
332
+ 800: string;
333
+ 900: string;
334
+ };
335
+ cyan: {
336
+ 100: string;
337
+ 200: string;
338
+ 300: string;
339
+ 400: string;
340
+ 500: string;
341
+ 600: string;
342
+ 700: string;
343
+ 800: string;
344
+ 900: string;
345
+ };
346
+ blue: {
347
+ 100: string;
348
+ 200: string;
349
+ 300: string;
350
+ 400: string;
351
+ 500: string;
352
+ 600: string;
353
+ 700: string;
354
+ 800: string;
355
+ 900: string;
356
+ };
357
+ purple: {
358
+ 100: string;
359
+ 200: string;
360
+ 300: string;
361
+ 400: string;
362
+ 500: string;
363
+ 600: string;
364
+ 700: string;
365
+ 800: string;
366
+ 900: string;
367
+ };
368
+ accent: "$hue.blue";
369
+ interactive: "$hue.blue";
370
+ neutral: "$hue.gray";
371
+ };
372
+ categorical: readonly ["blue", "purple", "green", "orange", "red", "cyan"];
373
+ text: {
374
+ default: string;
375
+ subdued: string;
376
+ action: {
377
+ primary: {
378
+ default: string;
379
+ $disabled: string;
380
+ };
381
+ destructive: {
382
+ default: string;
383
+ $disabled: string;
384
+ };
385
+ };
386
+ formfield: {
387
+ default: string;
388
+ $focused: string;
389
+ $pressed: string;
390
+ $disabled: string;
391
+ $selected: string;
392
+ };
393
+ feedback: {
394
+ error: {
395
+ default: string;
396
+ subdued: string;
397
+ };
398
+ warning: {
399
+ default: string;
400
+ subdued: string;
401
+ };
402
+ success: {
403
+ default: string;
404
+ subdued: string;
405
+ };
406
+ info: {
407
+ default: string;
408
+ subdued: string;
409
+ };
410
+ };
411
+ };
412
+ background: {
413
+ default: string;
414
+ surface: {
415
+ offset: string;
416
+ overlay: string;
417
+ };
418
+ action: {
419
+ primary: {
420
+ default: string;
421
+ $hovered: string;
422
+ $focused: string;
423
+ $pressed: string;
424
+ $selected: string;
425
+ $disabled: string;
426
+ };
427
+ destructive: {
428
+ default: string;
429
+ $hovered: string;
430
+ $focused: string;
431
+ $pressed: string;
432
+ $selected: string;
433
+ $disabled: string;
434
+ };
435
+ };
436
+ formfield: {
437
+ default: string;
438
+ $hovered: string;
439
+ $focused: string;
440
+ $pressed: string;
441
+ $disabled: string;
442
+ $selected: string;
443
+ };
444
+ feedback: {
445
+ error: {
446
+ default: string;
447
+ };
448
+ warning: {
449
+ default: string;
450
+ };
451
+ success: {
452
+ default: string;
453
+ };
454
+ info: {
455
+ default: string;
456
+ };
457
+ };
458
+ };
459
+ border: {
460
+ default: string;
461
+ };
462
+ scrollbar: {
463
+ default: string;
464
+ };
465
+ diff: {
466
+ text: {
467
+ added: string;
468
+ removed: string;
469
+ context: string;
470
+ hunkHeader: string;
471
+ };
472
+ background: {
473
+ added: string;
474
+ removed: string;
475
+ context: string;
476
+ };
477
+ highlight: {
478
+ added: string;
479
+ removed: string;
480
+ };
481
+ lineNumber: {
482
+ text: string;
483
+ background: {
484
+ added: string;
485
+ removed: string;
486
+ };
487
+ };
488
+ };
489
+ syntax: {
490
+ comment: string;
491
+ keyword: string;
492
+ function: string;
493
+ variable: string;
494
+ string: string;
495
+ number: string;
496
+ type: string;
497
+ operator: string;
498
+ punctuation: string;
499
+ };
500
+ markdown: {
501
+ text: string;
502
+ heading: string;
503
+ link: string;
504
+ linkText: string;
505
+ code: string;
506
+ blockQuote: string;
507
+ emphasis: string;
508
+ strong: string;
509
+ horizontalRule: string;
510
+ listItem: string;
511
+ listEnumeration: string;
512
+ image: string;
513
+ imageText: string;
514
+ codeBlock: string;
515
+ };
516
+ "@context:elevated": {
517
+ text: {
518
+ action: {
519
+ primary: {
520
+ default: string;
521
+ };
522
+ };
523
+ };
524
+ background: {
525
+ default: string;
526
+ action: {
527
+ primary: {
528
+ default: string;
529
+ $hovered: string;
530
+ };
531
+ };
532
+ };
533
+ };
534
+ "@context:overlay": {
535
+ text: {
536
+ action: {
537
+ primary: {
538
+ default: string;
539
+ };
540
+ };
541
+ };
542
+ background: {
543
+ default: string;
544
+ action: {
545
+ primary: {
546
+ default: string;
547
+ };
548
+ };
549
+ };
550
+ };
551
+ };
552
+ };