@okshaun/components 0.1.8 → 0.3.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 (8) hide show
  1. package/README.md +82 -0
  2. package/dist/index.d.ts +7 -9
  3. package/dist/index.js +462 -644
  4. package/dist/index.js.map +1 -1
  5. package/dist/panda.buildinfo.json +139 -172
  6. package/dist/preset.js +1723 -1062
  7. package/dist/preset.js.map +1 -1
  8. package/package.json +18 -4
package/dist/preset.js CHANGED
@@ -1,4 +1,4 @@
1
- import { defineStyles, defineTextStyles, defineGlobalStyles, defineRecipe, defineSlotRecipe, defineSemanticTokens, defineTokens, definePreset as definePreset$1 } from "@pandacss/dev";
1
+ import { defineTokens, defineSemanticTokens, defineStyles, defineTextStyles, defineGlobalStyles, defineRecipe, defineSlotRecipe, definePreset as definePreset$1 } from "@pandacss/dev";
2
2
  var conditions$1 = {
3
3
  hover: "&:is(:hover, [data-hover])",
4
4
  focus: "&:is(:focus, [data-focus])",
@@ -3242,32 +3242,210 @@ var preset = definePreset({
3242
3242
  globalCss: globalCss$1
3243
3243
  });
3244
3244
  var index_default = preset;
3245
- const colors$1 = {
3245
+ const colors$1 = defineTokens.colors({
3246
3246
  transparent: { value: "transparent" },
3247
- black: { value: "#000000" },
3248
- white: { value: "#FFFFFF" },
3249
3247
  current: { value: "currentColor" },
3250
- gray: {
3248
+ neutral: {
3251
3249
  "0": { value: "#FFFFFF" },
3252
- "1": { value: "#FBFCFD" },
3253
- "2": { value: "#F7F9FA" },
3254
- "3": { value: "#F5F6F7" },
3255
- "4": { value: "#F1F3F6" },
3256
- "5": { value: "#EDEFF0" },
3257
- "10": { value: "#DFE1E2" },
3258
- "20": { value: "#C6CACE" },
3259
- "30": { value: "#A9AEB1" },
3260
- "40": { value: "#8D9297" },
3261
- "50": { value: "#71767A" },
3262
- "60": { value: "#565C65" },
3263
- "70": { value: "#3D4551" },
3264
- "80": { value: "#2D2E2F" },
3265
- "90": { value: "#1C1D1F" },
3266
- "92": { value: "#161719" },
3267
- "94": { value: "#111113" },
3268
- "96": { value: "#0b0c0c" },
3269
- "98": { value: "#060606" },
3270
- "100": { value: "#000000" }
3250
+ "10": { value: "#F8F8F8" },
3251
+ "20": { value: "#F0F1F2" },
3252
+ "30": { value: "#DDDEE1" },
3253
+ "40": { value: "#B7B9BE" },
3254
+ "50": { value: "#8C8F97" },
3255
+ "60": { value: "#7D818A" },
3256
+ "70": { value: "#6B6E76" },
3257
+ "80": { value: "#505258" },
3258
+ "90": { value: "#3B3D42" },
3259
+ "100": { value: "#292A2E" },
3260
+ "110": { value: "#1E1F21" }
3261
+ },
3262
+ neutralA: {
3263
+ "10": { value: "#17171708" },
3264
+ "20": { value: "#1717170F" },
3265
+ "30": { value: "#17171724" },
3266
+ "40": { value: "#1717174A" },
3267
+ "50": { value: "#17171775" }
3268
+ },
3269
+ darkNeutral: {
3270
+ "0": { value: "#18191A" },
3271
+ "10": { value: "#1F1F21" },
3272
+ "20": { value: "#242528" },
3273
+ "25": { value: "#2B2C2F" },
3274
+ "30": { value: "#303134" },
3275
+ "35": { value: "#3D3F43" },
3276
+ "40": { value: "#4B4D51" },
3277
+ "50": { value: "#63666B" },
3278
+ "60": { value: "#7E8188" },
3279
+ "70": { value: "#96999E" },
3280
+ "80": { value: "#A9ABAF" },
3281
+ "90": { value: "#BFC1C4" },
3282
+ "100": { value: "#CECFD2" },
3283
+ "110": { value: "#E2E3E4" }
3284
+ },
3285
+ darkNeutralA: {
3286
+ "-10": { value: "#01040475" },
3287
+ "10": { value: "#BDBDBD0A" },
3288
+ "20": { value: "#CECED912" },
3289
+ "25": { value: "#D9DAE71A" },
3290
+ "30": { value: "#E3E4F21F" },
3291
+ "35": { value: "#E8EDFD2E" },
3292
+ "40": { value: "#E5E9F640" },
3293
+ "50": { value: "#E9F0FB5C" }
3294
+ },
3295
+ gray: {
3296
+ "10": { value: "#fbfcfd" },
3297
+ "20": { value: "#e0e1e2" },
3298
+ "30": { value: "#c5c5c6" },
3299
+ "40": { value: "#a9aaab" },
3300
+ "50": { value: "#8e8f8f" },
3301
+ "60": { value: "#737374" },
3302
+ "70": { value: "#585858" },
3303
+ "80": { value: "#3c3d3d" },
3304
+ "90": { value: "#212121" },
3305
+ "100": { value: "#060606" }
3306
+ },
3307
+ red: {
3308
+ DEFAULT: { value: "#e2483d" },
3309
+ "10": { value: "#ffeceb" },
3310
+ "20": { value: "#ffd5d2" },
3311
+ "30": { value: "#fd9891" },
3312
+ "40": { value: "#f87168" },
3313
+ "50": { value: "#f15b50" },
3314
+ "60": { value: "#e2483d" },
3315
+ "70": { value: "#c9372c" },
3316
+ "80": { value: "#ae2e24" },
3317
+ "90": { value: "#5d1f1a" },
3318
+ "100": { value: "#42221f" }
3319
+ },
3320
+ orange: {
3321
+ DEFAULT: { value: "#e06c00" },
3322
+ "10": { value: "#fff5db" },
3323
+ "20": { value: "#fce4a6" },
3324
+ "30": { value: "#fbc828" },
3325
+ "40": { value: "#fca700" },
3326
+ "50": { value: "#f68909" },
3327
+ "60": { value: "#e06c00" },
3328
+ "70": { value: "#bd5b00" },
3329
+ "80": { value: "#9e4c00" },
3330
+ "90": { value: "#693200" },
3331
+ "100": { value: "#3a2c1f" }
3332
+ },
3333
+ yellow: {
3334
+ DEFAULT: { value: "#e5b00a" },
3335
+ "10": { value: "#fefbf3" },
3336
+ "20": { value: "#f9ecc4" },
3337
+ "30": { value: "#f4dd96" },
3338
+ "40": { value: "#efce67" },
3339
+ "50": { value: "#eabf39" },
3340
+ "60": { value: "#e5b00a" },
3341
+ "70": { value: "#b68e0f" },
3342
+ "80": { value: "#886c14" },
3343
+ "90": { value: "#594918" },
3344
+ "100": { value: "#2a271d" }
3345
+ },
3346
+ lime: {
3347
+ DEFAULT: { value: "#6a9a23" },
3348
+ "10": { value: "#efffd6" },
3349
+ "20": { value: "#d3f1a7" },
3350
+ "30": { value: "#b3df72" },
3351
+ "40": { value: "#94c748" },
3352
+ "50": { value: "#82b536" },
3353
+ "60": { value: "#6a9a23" },
3354
+ "70": { value: "#5b7f24" },
3355
+ "80": { value: "#4c6b1f" },
3356
+ "90": { value: "#37471f" },
3357
+ "100": { value: "#28311b" }
3358
+ },
3359
+ green: {
3360
+ DEFAULT: { value: "#22a06b" },
3361
+ "10": { value: "#dcfff1" },
3362
+ "20": { value: "#baf3db" },
3363
+ "30": { value: "#7ee2b8" },
3364
+ "40": { value: "#4bce97" },
3365
+ "50": { value: "#2abb7f" },
3366
+ "60": { value: "#22a06b" },
3367
+ "70": { value: "#1f845a" },
3368
+ "80": { value: "#216e4e" },
3369
+ "90": { value: "#164b35" },
3370
+ "100": { value: "#1c3329" }
3371
+ },
3372
+ teal: {
3373
+ DEFAULT: { value: "#2898bd" },
3374
+ "10": { value: "#e7f9ff" },
3375
+ "20": { value: "#c6edfb" },
3376
+ "30": { value: "#9dd9ee" },
3377
+ "40": { value: "#6cc3e0" },
3378
+ "50": { value: "#42b2d7" },
3379
+ "60": { value: "#2898bd" },
3380
+ "70": { value: "#227d9b" },
3381
+ "80": { value: "#206a83" },
3382
+ "90": { value: "#164555" },
3383
+ "100": { value: "#1e3137" }
3384
+ },
3385
+ blue: {
3386
+ DEFAULT: { value: "#357de8" },
3387
+ "10": { value: "#e9f2fe" },
3388
+ "20": { value: "#cfe1fd" },
3389
+ "30": { value: "#8fb8f6" },
3390
+ "40": { value: "#669df1" },
3391
+ "50": { value: "#4688ec" },
3392
+ "60": { value: "#357de8" },
3393
+ "70": { value: "#1868db" },
3394
+ "80": { value: "#1558bc" },
3395
+ "90": { value: "#123263" },
3396
+ "100": { value: "#1c2b42" }
3397
+ },
3398
+ indigo: {
3399
+ DEFAULT: { value: "#7665d1" },
3400
+ "10": { value: "#f1eff7" },
3401
+ "20": { value: "#e7e3fa" },
3402
+ "30": { value: "#cbc4f2" },
3403
+ "40": { value: "#afa5e8" },
3404
+ "50": { value: "#9287d8" },
3405
+ "60": { value: "#7665d1" },
3406
+ "70": { value: "#5e519e" },
3407
+ "80": { value: "#453c7b" },
3408
+ "90": { value: "#2e2c40" },
3409
+ "100": { value: "#18161d" }
3410
+ },
3411
+ purple: {
3412
+ DEFAULT: { value: "#af59e1" },
3413
+ "10": { value: "#f8eefe" },
3414
+ "20": { value: "#eed7fc" },
3415
+ "30": { value: "#d8a0f7" },
3416
+ "40": { value: "#c97cf4" },
3417
+ "50": { value: "#bf63f3" },
3418
+ "60": { value: "#af59e1" },
3419
+ "70": { value: "#964ac0" },
3420
+ "80": { value: "#803fa5" },
3421
+ "90": { value: "#48245d" },
3422
+ "100": { value: "#35243f" }
3423
+ },
3424
+ magenta: {
3425
+ DEFAULT: { value: "#cd519d" },
3426
+ "10": { value: "#ffecf8" },
3427
+ "20": { value: "#fdd0ec" },
3428
+ "30": { value: "#f797d2" },
3429
+ "40": { value: "#e774bb" },
3430
+ "50": { value: "#da62ac" },
3431
+ "60": { value: "#cd519d" },
3432
+ "70": { value: "#ae4787" },
3433
+ "80": { value: "#943d73" },
3434
+ "90": { value: "#50253f" },
3435
+ "100": { value: "#3d2232" }
3436
+ },
3437
+ tan: {
3438
+ DEFAULT: { value: "#8e704f" },
3439
+ "10": { value: "#f5f0e6" },
3440
+ "20": { value: "#f1e5cd" },
3441
+ "30": { value: "#dec69a" },
3442
+ "40": { value: "#c7a97b" },
3443
+ "50": { value: "#ad8b65" },
3444
+ "60": { value: "#8e704f" },
3445
+ "70": { value: "#6b5947" },
3446
+ "80": { value: "#4d4438" },
3447
+ "90": { value: "#322d26" },
3448
+ "100": { value: "#191714" }
3271
3449
  },
3272
3450
  slate: {
3273
3451
  "0": { value: "#FFFFFF" },
@@ -3286,171 +3464,8 @@ const colors$1 = {
3286
3464
  "80": { value: "#2E2E2E" },
3287
3465
  "90": { value: "#1E1E1E" },
3288
3466
  "100": { value: "#000000" }
3289
- },
3290
- blue: {
3291
- "1": { value: "#fafdff" },
3292
- "2": { value: "#f6fbff" },
3293
- "3": { value: "#f1f9ff" },
3294
- "4": { value: "#edf7ff" },
3295
- "5": { value: "#E8F5FF" },
3296
- "10": { value: "#CFE8FF" },
3297
- "20": { value: "#A1D3FF" },
3298
- "30": { value: "#58B4FF" },
3299
- "40": { value: "#2491FF" },
3300
- "50": { value: "#0076DA" },
3301
- "60": { value: "#005EA2" },
3302
- "70": { value: "#0B4778" },
3303
- "80": { value: "#112F4E" },
3304
- "90": { value: "#11181D" }
3305
- },
3306
- mint: {
3307
- 5: { value: "#D5FBF3" },
3308
- 10: { value: "#7EFBE1" },
3309
- 20: { value: "#29E1CB" },
3310
- 30: { value: "#1DC2AE" },
3311
- 40: { value: "#00A398" },
3312
- 50: { value: "#008480" },
3313
- 60: { value: "#0F6460" },
3314
- 70: { value: "#0B4B3F" },
3315
- 80: { value: "#123131" }
3316
- },
3317
- cyan: {
3318
- "5": { value: "#E7F6F8" },
3319
- "10": { value: "#CCECF2" },
3320
- "20": { value: "#99DEEA" },
3321
- "30": { value: "#5DC0D1" },
3322
- "40": { value: "#449DAC" },
3323
- "50": { value: "#168092" },
3324
- "60": { value: "#2A646D" },
3325
- "70": { value: "#2C4A4E" },
3326
- "80": { value: "#203133" },
3327
- "90": { value: "#111819" }
3328
- },
3329
- red: {
3330
- "1": { value: "#FFF9FA" },
3331
- "2": { value: "#FFF3F5" },
3332
- "3": { value: "#FFEEF0" },
3333
- "4": { value: "#FFE8EB" },
3334
- "5": { value: "#FFE2E6" },
3335
- "10": { value: "#FFB1B8" },
3336
- "20": { value: "#FF7F8A" },
3337
- "30": { value: "#FF4D5B" },
3338
- "40": { value: "#FE1D2D" },
3339
- "50": { value: "#E50513" },
3340
- "60": { value: "#B3000E" },
3341
- "70": { value: "#810009" },
3342
- "80": { value: "#4F0004" },
3343
- "90": { value: "#200000" }
3344
- },
3345
- redOrange: {
3346
- "5": { value: "#FFF3F2" },
3347
- "10": { value: "#FDE0DB" },
3348
- "20": { value: "#FDB8AE" },
3349
- "30": { value: "#FF8D7B" },
3350
- "40": { value: "#FB5A47" },
3351
- "50": { value: "#E52207" },
3352
- "60": { value: "#B50909" },
3353
- "70": { value: "#8B0A03" },
3354
- "80": { value: "#5C1111" },
3355
- "90": { value: "#200100" }
3356
- },
3357
- orange: {
3358
- "5": { value: "#fef2e4" },
3359
- "10": { value: "#fce2c5" },
3360
- "20": { value: "#ffbc78" },
3361
- "30": { value: "#fa9441" },
3362
- "40": { value: "#e66f0e" },
3363
- "50": { value: "#c05600" },
3364
- "60": { value: "#8c471c" },
3365
- "70": { value: "#5f3617" },
3366
- "80": { value: "#352313" }
3367
- },
3368
- gold: {
3369
- "1": { value: "#FFFCF4" },
3370
- "2": { value: "#FFF9E9" },
3371
- "3": { value: "#FEF6DE" },
3372
- "4": { value: "#FEF3D3" },
3373
- "5": { value: "#FEF0C8" },
3374
- "10": { value: "#FFE396" },
3375
- "20": { value: "#FFBE2E" },
3376
- "30": { value: "#E5A000" },
3377
- "40": { value: "#C2850C" },
3378
- "50": { value: "#936F38" },
3379
- "60": { value: "#7A591A" },
3380
- "70": { value: "#5C410A" },
3381
- "80": { value: "#3B2B15" },
3382
- "90": { value: "#1E1100" }
3383
- },
3384
- yellow: {
3385
- "1": { value: "#FFFDF3" },
3386
- "2": { value: "#FFFBE7" },
3387
- "3": { value: "#FFF9DA" },
3388
- "4": { value: "#FFF7CE" },
3389
- "5": { value: "#FFF5C2" },
3390
- "10": { value: "#FEE685" },
3391
- "20": { value: "#FACE00" },
3392
- "30": { value: "#DDAA01" },
3393
- "40": { value: "#B38C00" },
3394
- "50": { value: "#947100" },
3395
- "60": { value: "#776017" },
3396
- "70": { value: "#5C4809" },
3397
- "80": { value: "#422D19" },
3398
- "90": { value: "#1C0B00" }
3399
- },
3400
- green: {
3401
- "1": { value: "#F8FEF4" },
3402
- "2": { value: "#F1FDE9" },
3403
- "3": { value: "#EBFBDD" },
3404
- "4": { value: "#E4FAD2" },
3405
- "5": { value: "#DDF9C7" },
3406
- "10": { value: "#C5EE93" },
3407
- "20": { value: "#98D035" },
3408
- "30": { value: "#7FB135" },
3409
- "40": { value: "#719F2A" },
3410
- "50": { value: "#538200" },
3411
- "60": { value: "#466C04" },
3412
- "70": { value: "#2F4A0B" },
3413
- "80": { value: "#243413" },
3414
- "90": { value: "#0D1400" }
3415
- },
3416
- indigo: {
3417
- "5": { value: "#f0f0ff" },
3418
- "10": { value: "#e0e0ff" },
3419
- "20": { value: "#ccceff" },
3420
- "30": { value: "#a3a7fa" },
3421
- "40": { value: "#8289ff" },
3422
- "50": { value: "#656bd7" },
3423
- "60": { value: "#4a50c4" },
3424
- "70": { value: "#3333a3" },
3425
- "80": { value: "#212463" }
3426
- },
3427
- tan: {
3428
- "5": { value: "#F5F0E6" },
3429
- "10": { value: "#F1E5CD" },
3430
- "20": { value: "#DEC69A" },
3431
- "30": { value: "#C7A97B" },
3432
- "40": { value: "#AD8B65" },
3433
- "50": { value: "#8E704F" },
3434
- "60": { value: "#6B5947" },
3435
- "70": { value: "#4D4438" },
3436
- "80": { value: "#322D26" },
3437
- "90": { value: "#191714" }
3438
3467
  }
3439
- };
3440
- const fonts = {
3441
- sans: { value: "'IBM Plex Sans', Geneva, Tahoma, Verdana, sans-serif" },
3442
- serif: { value: "'Piazzolla', Georgia, 'Times New Roman', Times, serif" },
3443
- mono: {
3444
- value: "'IBM Plex Mono', Andale Mono, monaco, Consolas, Lucida Console, monospace"
3445
- }
3446
- };
3447
- const fontWeights = {
3448
- light: { value: "300" },
3449
- normal: { value: "400" },
3450
- medium: { value: "500" },
3451
- bold: { value: "700" },
3452
- black: { value: "900" }
3453
- };
3468
+ });
3454
3469
  const numericSizes = {
3455
3470
  "0": { value: "0" },
3456
3471
  "1": { value: "0.0625rem" },
@@ -3552,19 +3567,41 @@ const breakpoints$1 = {
3552
3567
  xl: "1280px",
3553
3568
  "2xl": "1536px"
3554
3569
  };
3570
+ const fonts = {
3571
+ heading: { value: "'IBM Plex Sans', Geneva, Tahoma, Verdana, sans-serif" },
3572
+ sans: { value: "'IBM Plex Sans', Geneva, Tahoma, Verdana, sans-serif" },
3573
+ body: {
3574
+ value: "'Piazzolla Variable', 'Piazzolla', Georgia, 'Times New Roman', Times, serif"
3575
+ },
3576
+ serif: {
3577
+ value: "'Piazzolla Variable', 'Piazzolla', Georgia, 'Times New Roman', Times, serif"
3578
+ },
3579
+ mono: {
3580
+ value: "'IBM Plex Mono', Andale Mono, monaco, Consolas, Lucida Console, monospace"
3581
+ }
3582
+ };
3555
3583
  const fontSizes = {
3556
- "12": { value: "{sizes.12}" },
3557
- "14": { value: "{sizes.14}" },
3558
- "16": { value: "{sizes.16}" },
3559
- "20": { value: "{sizes.20}" },
3560
- "24": { value: "{sizes.24}" },
3561
- "32": { value: "{sizes.32}" },
3562
- "40": { value: "{sizes.40}" },
3563
- "48": { value: "{sizes.48}" },
3564
- "64": { value: "{sizes.64}" },
3565
- "72": { value: "{sizes.72}" },
3566
- "80": { value: "{sizes.80}" },
3567
- "96": { value: "{sizes.96}" }
3584
+ "12": { value: "0.75rem" },
3585
+ "14": { value: "0.875rem" },
3586
+ "16": { value: "1rem" },
3587
+ "20": { value: "1.25rem" },
3588
+ "24": { value: "1.5rem" },
3589
+ "32": { value: "2rem" },
3590
+ "40": { value: "2.5rem" },
3591
+ "48": { value: "3rem" },
3592
+ "56": { value: "3.5rem" },
3593
+ "64": { value: "4rem" },
3594
+ "72": { value: "4.5rem" },
3595
+ "80": { value: "5rem" },
3596
+ "88": { value: "5.5rem" },
3597
+ "96": { value: "6rem" }
3598
+ };
3599
+ const fontWeights = {
3600
+ light: { value: "300" },
3601
+ normal: { value: "400" },
3602
+ medium: { value: "500" },
3603
+ bold: { value: "700" },
3604
+ black: { value: "900" }
3568
3605
  };
3569
3606
  const lineHeights = {
3570
3607
  none: {
@@ -3586,60 +3623,66 @@ const lineHeights = {
3586
3623
  value: "1em + 0.875rem"
3587
3624
  }
3588
3625
  };
3589
- const radii = {
3590
- "0": { value: "{sizes.0}" },
3591
- "1": { value: "{sizes.1}" },
3592
- "2": { value: "{sizes.2}" },
3593
- "4": { value: "{sizes.4}" },
3594
- "8": { value: "{sizes.8}" },
3595
- "16": { value: "{sizes.16}" },
3596
- "100": { value: "100%" }
3597
- };
3598
- const shadows = {
3599
- low: {
3600
- value: "0px 1px 1px {colors.utility.shadowColor}, 0px 2px 2px {colors.utility.shadowColor}"
3626
+ const letterSpacings = {
3627
+ tighter: {
3628
+ value: "-0.05em"
3601
3629
  },
3602
- medium: {
3603
- value: "0px 2px 2px {colors.utility.shadowColor}, 0px 4px 4px {colors.utility.shadowColor}, 0px 8px 8px {colors.utility.shadowColor}"
3630
+ tight: {
3631
+ value: "-0.025em"
3604
3632
  },
3605
- high: {
3606
- value: "0px 2px 2px {colors.utility.shadowColor}, 0px 4px 4px {colors.utility.shadowColor}, 0px 8px 8px {colors.utility.shadowColor}, 0px 16px 16px {colors.utility.shadowColor}"
3633
+ normal: {
3634
+ value: "0em"
3607
3635
  },
3608
- inset: {
3609
- value: "inset 0px 2px 1px {colors.utility.shadowColor}, inset 0px 3px 2px {colors.utility.shadowColor}"
3610
- }
3611
- };
3612
- const borderWidths = {
3613
- "0": { value: "{sizes.0}" },
3614
- "1": { value: "{sizes.1}" },
3615
- "2": { value: "{sizes.2}" },
3616
- "4": { value: "{sizes.4}" },
3617
- "8": { value: "{sizes.8}" },
3618
- "16": { value: "{sizes.16}" }
3619
- };
3620
- const borders = {
3621
- none: {
3622
- value: "none"
3636
+ wide: {
3637
+ value: "0.025em"
3638
+ },
3639
+ wider: {
3640
+ value: "0.05em"
3641
+ },
3642
+ widest: {
3643
+ value: "0.1em"
3623
3644
  }
3624
3645
  };
3625
- const aspectRatios = {
3626
- square: {
3627
- value: "1 / 1"
3646
+ const animations = {
3647
+ spin: {
3648
+ value: "spin 1s linear infinite"
3628
3649
  },
3629
- landscape: {
3630
- value: "4 / 3"
3650
+ ping: {
3651
+ value: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite"
3631
3652
  },
3632
- portrait: {
3633
- value: "3 / 4"
3653
+ pulse: {
3654
+ value: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
3634
3655
  },
3635
- wide: {
3636
- value: "16 / 9"
3656
+ bounce: {
3657
+ value: "bounce 1s infinite"
3658
+ }
3659
+ };
3660
+ const keyframes$1 = {
3661
+ spin: {
3662
+ to: {
3663
+ transform: "rotate(360deg)"
3664
+ }
3637
3665
  },
3638
- ultrawide: {
3639
- value: "18 / 5"
3666
+ ping: {
3667
+ "75%, 100%": {
3668
+ transform: "scale(2)",
3669
+ opacity: "0"
3670
+ }
3640
3671
  },
3641
- golden: {
3642
- value: "1.618 / 1"
3672
+ pulse: {
3673
+ "50%": {
3674
+ opacity: ".5"
3675
+ }
3676
+ },
3677
+ bounce: {
3678
+ "0%, 100%": {
3679
+ transform: "translateY(-25%)",
3680
+ animationTimingFunction: "cubic-bezier(0.8,0,1,1)"
3681
+ },
3682
+ "50%": {
3683
+ transform: "none",
3684
+ animationTimingFunction: "cubic-bezier(0,0,0.2,1)"
3685
+ }
3643
3686
  }
3644
3687
  };
3645
3688
  const easings = {
@@ -3682,24 +3725,55 @@ const durations = {
3682
3725
  value: "500ms"
3683
3726
  }
3684
3727
  };
3685
- const letterSpacings = {
3686
- tighter: {
3687
- value: "-0.05em"
3728
+ const radii = {
3729
+ "0": { value: "{sizes.0}" },
3730
+ "1": { value: "{sizes.1}" },
3731
+ "2": { value: "{sizes.2}" },
3732
+ "4": { value: "{sizes.4}" },
3733
+ "8": { value: "{sizes.8}" },
3734
+ "16": { value: "{sizes.16}" },
3735
+ "100": { value: "100%" }
3736
+ };
3737
+ const borderWidths = {
3738
+ "0": { value: "{sizes.0}" },
3739
+ "1": { value: "{sizes.1}" },
3740
+ "2": { value: "{sizes.2}" },
3741
+ "4": { value: "{sizes.4}" },
3742
+ "8": { value: "{sizes.8}" },
3743
+ "16": { value: "{sizes.16}" }
3744
+ };
3745
+ const shadows = {
3746
+ low: {
3747
+ value: "0px 1px 1px {colors.utility.shadowColor}, 0px 2px 2px {colors.utility.shadowColor}"
3688
3748
  },
3689
- tight: {
3690
- value: "-0.025em"
3749
+ medium: {
3750
+ value: "0px 2px 2px {colors.utility.shadowColor}, 0px 4px 4px {colors.utility.shadowColor}, 0px 8px 8px {colors.utility.shadowColor}"
3691
3751
  },
3692
- normal: {
3693
- value: "0em"
3752
+ high: {
3753
+ value: "0px 2px 2px {colors.utility.shadowColor}, 0px 4px 4px {colors.utility.shadowColor}, 0px 8px 8px {colors.utility.shadowColor}, 0px 16px 16px {colors.utility.shadowColor}"
3754
+ },
3755
+ inset: {
3756
+ value: "inset 0px 2px 1px {colors.utility.shadowColor}, inset 0px 3px 2px {colors.utility.shadowColor}"
3757
+ }
3758
+ };
3759
+ const aspectRatios = {
3760
+ square: {
3761
+ value: "1 / 1"
3762
+ },
3763
+ landscape: {
3764
+ value: "4 / 3"
3765
+ },
3766
+ portrait: {
3767
+ value: "3 / 4"
3694
3768
  },
3695
3769
  wide: {
3696
- value: "0.025em"
3770
+ value: "16 / 9"
3697
3771
  },
3698
- wider: {
3699
- value: "0.05em"
3772
+ ultrawide: {
3773
+ value: "18 / 5"
3700
3774
  },
3701
- widest: {
3702
- value: "0.1em"
3775
+ golden: {
3776
+ value: "1.618 / 1"
3703
3777
  }
3704
3778
  };
3705
3779
  const blurs = {
@@ -3725,53 +3799,791 @@ const blurs = {
3725
3799
  value: "64px"
3726
3800
  }
3727
3801
  };
3728
- const animations = {
3729
- spin: {
3730
- value: "spin 1s linear infinite"
3731
- },
3732
- ping: {
3733
- value: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite"
3734
- },
3735
- pulse: {
3736
- value: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
3737
- },
3738
- bounce: {
3739
- value: "bounce 1s infinite"
3740
- }
3741
- };
3742
- const keyframes$1 = {
3743
- spin: {
3744
- to: {
3745
- transform: "rotate(360deg)"
3746
- }
3747
- },
3748
- ping: {
3749
- "75%, 100%": {
3750
- transform: "scale(2)",
3751
- opacity: "0"
3752
- }
3753
- },
3754
- pulse: {
3755
- "50%": {
3756
- opacity: ".5"
3757
- }
3758
- },
3759
- bounce: {
3760
- "0%, 100%": {
3761
- transform: "translateY(-25%)",
3762
- animationTimingFunction: "cubic-bezier(0.8,0,1,1)"
3802
+ const tokens = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
3803
+ __proto__: null,
3804
+ animations,
3805
+ aspectRatios,
3806
+ blurs,
3807
+ borderWidths,
3808
+ breakpoints: breakpoints$1,
3809
+ colors: colors$1,
3810
+ containerSizes,
3811
+ durations,
3812
+ easings,
3813
+ fontSizes,
3814
+ fontWeights,
3815
+ fonts,
3816
+ keyframes: keyframes$1,
3817
+ letterSpacings,
3818
+ lineHeights,
3819
+ numericSizes,
3820
+ radii,
3821
+ shadows,
3822
+ sizes,
3823
+ utilitySizes
3824
+ }, Symbol.toStringTag, { value: "Module" }));
3825
+ const BRAND_PALETTE = "gray";
3826
+ const brandPalette = (shade) => `{colors.${BRAND_PALETTE}.${shade}}`;
3827
+ const colors = defineSemanticTokens.colors({
3828
+ // Brand color palette - automatically uses the palette defined above
3829
+ brand: {
3830
+ "10": { value: brandPalette("10") },
3831
+ "20": { value: brandPalette("20") },
3832
+ "30": { value: brandPalette("30") },
3833
+ "40": { value: brandPalette("40") },
3834
+ "50": { value: brandPalette("50") },
3835
+ "60": { value: brandPalette("60") },
3836
+ "70": { value: brandPalette("70") },
3837
+ "80": { value: brandPalette("80") },
3838
+ "90": { value: brandPalette("90") },
3839
+ "100": { value: brandPalette("100") }
3840
+ },
3841
+ bg: {
3842
+ disabled: {
3843
+ value: { base: "{colors.neutral.10}", _dark: "{colors.darkNeutral.10}" }
3763
3844
  },
3764
- "50%": {
3765
- transform: "none",
3766
- animationTimingFunction: "cubic-bezier(0,0,0.2,1)"
3845
+ neutral: {
3846
+ DEFAULT: {
3847
+ value: {
3848
+ base: "{colors.neutralA.20}",
3849
+ _dark: "{colors.darkNeutralA.20}"
3850
+ }
3851
+ },
3852
+ hovered: {
3853
+ value: {
3854
+ base: "{colors.neutralA.30}",
3855
+ _dark: "{colors.darkNeutralA.30}"
3856
+ }
3857
+ },
3858
+ pressed: {
3859
+ value: {
3860
+ base: "{colors.neutralA.40}",
3861
+ _dark: "{colors.darkNeutralA.40}"
3862
+ }
3863
+ },
3864
+ bold: {
3865
+ DEFAULT: {
3866
+ value: {
3867
+ base: "{colors.neutral.80}",
3868
+ _dark: "{colors.darkNeutral.80}"
3869
+ }
3870
+ },
3871
+ hovered: {
3872
+ value: {
3873
+ base: "{colors.neutral.90}",
3874
+ _dark: "{colors.darkNeutral.90}"
3875
+ }
3876
+ },
3877
+ pressed: {
3878
+ value: {
3879
+ base: "{colors.neutral.100}",
3880
+ _dark: "{colors.darkNeutral.100}"
3881
+ }
3882
+ }
3883
+ },
3884
+ boldest: {
3885
+ DEFAULT: {
3886
+ value: {
3887
+ base: "{colors.neutral.100}",
3888
+ _dark: "{colors.darkNeutral.110}"
3889
+ }
3890
+ }
3891
+ },
3892
+ subtle: {
3893
+ DEFAULT: { value: { base: "#ffffff02", _dark: "#ffffff02" } },
3894
+ hovered: {
3895
+ value: {
3896
+ base: "{colors.neutralA.20}",
3897
+ _dark: "{colors.darkNeutralA.20}"
3898
+ }
3899
+ },
3900
+ pressed: {
3901
+ value: {
3902
+ base: "{colors.neutralA.30}",
3903
+ _dark: "{colors.darkNeutralA.30}"
3904
+ }
3905
+ }
3906
+ },
3907
+ inverse: {
3908
+ subtle: {
3909
+ DEFAULT: { value: { base: "#00000029", _dark: "#ffffff29" } },
3910
+ hovered: { value: { base: "#0000003d", _dark: "#ffffff3d" } }
3911
+ // hovered.2: { value: { base: "#00000052", _dark: "#ffffff52" } },
3912
+ // pressed: {},
3913
+ }
3914
+ }
3915
+ },
3916
+ selected: {
3917
+ DEFAULT: {
3918
+ value: { base: "{colors.blue.10}", _dark: "{colors.blue.100}" }
3919
+ },
3920
+ hovered: {
3921
+ value: { base: "{colors.blue.20}", _dark: "{colors.blue.90}" }
3922
+ },
3923
+ pressed: {
3924
+ value: { base: "{colors.blue.30}", _dark: "{colors.blue.80}" }
3925
+ },
3926
+ bold: {
3927
+ DEFAULT: {
3928
+ value: { base: "{colors.blue.70}", _dark: "{colors.blue.40}" }
3929
+ },
3930
+ hovered: {
3931
+ value: { base: "{colors.blue.80}", _dark: "{colors.blue.30}" }
3932
+ },
3933
+ pressed: {
3934
+ value: { base: "{colors.blue.90}", _dark: "{colors.blue.20}" }
3935
+ }
3936
+ }
3937
+ },
3938
+ brand: {
3939
+ bold: {
3940
+ DEFAULT: {
3941
+ value: { base: "{colors.brand.70}", _dark: "{colors.brand.40}" }
3942
+ },
3943
+ hovered: {
3944
+ value: { base: "{colors.brand.80}", _dark: "{colors.brand.30}" }
3945
+ },
3946
+ pressed: {
3947
+ value: { base: "{colors.brand.90}", _dark: "{colors.brand.20}" }
3948
+ }
3949
+ },
3950
+ boldest: {
3951
+ DEFAULT: {
3952
+ value: { base: "{colors.brand.100}", _dark: "{colors.brand.20}" }
3953
+ },
3954
+ hovered: {
3955
+ value: { base: "{colors.brand.90}", _dark: "{colors.brand.30}" }
3956
+ },
3957
+ pressed: {
3958
+ value: { base: "{colors.brand.80}", _dark: "{colors.brand.40}" }
3959
+ }
3960
+ },
3961
+ subtle: {
3962
+ DEFAULT: {
3963
+ value: { base: "{colors.brand.10}", _dark: "{colors.brand.100}" }
3964
+ },
3965
+ hovered: {
3966
+ value: { base: "{colors.brand.20}", _dark: "{colors.brand.90}" }
3967
+ },
3968
+ pressed: {
3969
+ value: { base: "{colors.brand.30}", _dark: "{colors.brand.80}" }
3970
+ }
3971
+ }
3972
+ },
3973
+ success: {
3974
+ DEFAULT: {
3975
+ value: { base: "{colors.lime.10}", _dark: "{colors.lime.100}" }
3976
+ },
3977
+ hovered: {
3978
+ value: { base: "{colors.lime.20}", _dark: "{colors.lime.90}" }
3979
+ },
3980
+ pressed: {
3981
+ value: { base: "{colors.lime.30}", _dark: "{colors.lime.80}" }
3982
+ },
3983
+ bold: {
3984
+ DEFAULT: {
3985
+ value: { base: "{colors.lime.70}", _dark: "{colors.lime.40}" }
3986
+ },
3987
+ hovered: {
3988
+ value: { base: "{colors.lime.80}", _dark: "{colors.lime.30}" }
3989
+ },
3990
+ pressed: {
3991
+ value: { base: "{colors.lime.90}", _dark: "{colors.lime.20}" }
3992
+ }
3993
+ }
3994
+ },
3995
+ warning: {
3996
+ DEFAULT: {
3997
+ value: { base: "{colors.orange.10}", _dark: "{colors.orange.100}" }
3998
+ },
3999
+ hovered: {
4000
+ value: { base: "{colors.orange.20}", _dark: "{colors.orange.90}" }
4001
+ },
4002
+ pressed: {
4003
+ value: { base: "{colors.orange.30}", _dark: "{colors.orange.80}" }
4004
+ },
4005
+ bold: {
4006
+ DEFAULT: {
4007
+ value: { base: "{colors.orange.30}", _dark: "{colors.orange.30}" }
4008
+ },
4009
+ hovered: {
4010
+ value: { base: "{colors.orange.40}", _dark: "{colors.orange.40}" }
4011
+ },
4012
+ pressed: {
4013
+ value: { base: "{colors.orange.50}", _dark: "{colors.orange.50}" }
4014
+ }
4015
+ }
4016
+ },
4017
+ danger: {
4018
+ DEFAULT: {
4019
+ value: { base: "{colors.red.10}", _dark: "{colors.red.100}" }
4020
+ },
4021
+ hovered: { value: { base: "{colors.red.20}", _dark: "{colors.red.90}" } },
4022
+ pressed: { value: { base: "{colors.red.30}", _dark: "{colors.red.80}" } },
4023
+ bold: {
4024
+ DEFAULT: {
4025
+ value: { base: "{colors.red.70}", _dark: "{colors.red.40}" }
4026
+ },
4027
+ hovered: {
4028
+ value: { base: "{colors.red.80}", _dark: "{colors.red.30}" }
4029
+ },
4030
+ pressed: {
4031
+ value: { base: "{colors.red.90}", _dark: "{colors.red.20}" }
4032
+ }
4033
+ }
4034
+ },
4035
+ info: {
4036
+ DEFAULT: {
4037
+ value: { base: "{colors.blue.10}", _dark: "{colors.blue.100}" }
4038
+ },
4039
+ hovered: {
4040
+ value: { base: "{colors.blue.20}", _dark: "{colors.blue.90}" }
4041
+ },
4042
+ pressed: {
4043
+ value: { base: "{colors.blue.30}", _dark: "{colors.blue.80}" }
4044
+ },
4045
+ bold: {
4046
+ DEFAULT: {
4047
+ value: { base: "{colors.blue.70}", _dark: "{colors.blue.40}" }
4048
+ },
4049
+ hovered: {
4050
+ value: { base: "{colors.blue.80}", _dark: "{colors.blue.30}" }
4051
+ },
4052
+ pressed: {
4053
+ value: { base: "{colors.blue.90}", _dark: "{colors.blue.20}" }
4054
+ }
4055
+ }
4056
+ },
4057
+ input: {
4058
+ DEFAULT: {
4059
+ value: { base: "{colors.neutral.0}", _dark: "{colors.darkNeutral.20}" }
4060
+ },
4061
+ hovered: {
4062
+ value: {
4063
+ base: "{colors.neutral.10}",
4064
+ _dark: "{colors.darkNeutral.25}"
4065
+ }
4066
+ },
4067
+ pressed: {
4068
+ value: { base: "{colors.neutral.0}", _dark: "{colors.darkNeutral.20}" }
4069
+ }
4070
+ },
4071
+ accent: {
4072
+ // hue: {
4073
+ // subtle: { DEFAULT: {}, hovered: {}, pressed: {}, },
4074
+ // subtler: { DEFAULT: {}, hovered: {}, pressed: {}, },
4075
+ // subtlest: { DEFAULT: {}, hovered: {}, pressed: {}, },
4076
+ // bold: { DEFAULT: {}, hovered: {}, pressed: {}, }
4077
+ // },
4078
+ gray: {
4079
+ subtle: {
4080
+ value: {
4081
+ base: "{colors.neutral.50}",
4082
+ _dark: "{colors.darkNeutral.50}"
4083
+ }
4084
+ },
4085
+ subtler: {
4086
+ value: {
4087
+ base: "{colors.neutral.30}",
4088
+ _dark: "{colors.darkNeutral.40}"
4089
+ }
4090
+ },
4091
+ subtlest: {
4092
+ value: {
4093
+ base: "{colors.neutral.20}",
4094
+ _dark: "{colors.darkNeutral.30}"
4095
+ }
4096
+ },
4097
+ bold: {
4098
+ value: {
4099
+ base: "{colors.neutral.70}",
4100
+ _dark: "{colors.darkNeutral.70}"
4101
+ }
4102
+ }
4103
+ },
4104
+ blue: {
4105
+ subtle: {
4106
+ value: { base: "{colors.blue.40}", _dark: "{colors.blue.80}" }
4107
+ },
4108
+ subtler: {
4109
+ value: { base: "{colors.blue.20}", _dark: "{colors.blue.90}" }
4110
+ },
4111
+ subtlest: {
4112
+ value: { base: "{colors.blue.10}", _dark: "{colors.blue.100}" }
4113
+ },
4114
+ bold: {
4115
+ value: { base: "{colors.blue.70}", _dark: "{colors.blue.40}" }
4116
+ }
4117
+ },
4118
+ green: {
4119
+ subtle: {
4120
+ value: { base: "{colors.green.40}", _dark: "{colors.green.80}" }
4121
+ },
4122
+ subtler: {
4123
+ value: { base: "{colors.green.20}", _dark: "{colors.green.90}" }
4124
+ },
4125
+ subtlest: {
4126
+ value: { base: "{colors.green.10}", _dark: "{colors.green.90}" }
4127
+ },
4128
+ bold: {
4129
+ value: { base: "{colors.green.70}", _dark: "{colors.green.40}" }
4130
+ }
4131
+ },
4132
+ indigo: {
4133
+ subtle: {
4134
+ value: { base: "{colors.indigo.40}", _dark: "{colors.indigo.80}" }
4135
+ },
4136
+ subtler: {
4137
+ value: { base: "{colors.indigo.20}", _dark: "{colors.indigo.90}" }
4138
+ },
4139
+ subtlest: {
4140
+ value: { base: "{colors.indigo.10}", _dark: "{colors.indigo.90}" }
4141
+ },
4142
+ bold: {
4143
+ value: { base: "{colors.indigo.70}", _dark: "{colors.indigo.40}" }
4144
+ }
4145
+ },
4146
+ lime: {
4147
+ subtle: {
4148
+ value: { base: "{colors.lime.40}", _dark: "{colors.lime.80}" }
4149
+ },
4150
+ subtler: {
4151
+ value: { base: "{colors.lime.20}", _dark: "{colors.lime.90}" }
4152
+ },
4153
+ subtlest: {
4154
+ value: { base: "{colors.lime.10}", _dark: "{colors.lime.90}" }
4155
+ },
4156
+ bold: {
4157
+ value: { base: "{colors.lime.70}", _dark: "{colors.lime.40}" }
4158
+ }
4159
+ },
4160
+ magenta: {
4161
+ subtle: {
4162
+ value: { base: "{colors.magenta.40}", _dark: "{colors.magenta.80}" }
4163
+ },
4164
+ subtler: {
4165
+ value: { base: "{colors.magenta.20}", _dark: "{colors.magenta.90}" }
4166
+ },
4167
+ subtlest: {
4168
+ value: { base: "{colors.magenta.10}", _dark: "{colors.magenta.90}" }
4169
+ },
4170
+ bold: {
4171
+ value: { base: "{colors.magenta.70}", _dark: "{colors.magenta.40}" }
4172
+ }
4173
+ },
4174
+ orange: {
4175
+ subtle: {
4176
+ value: { base: "{colors.orange.40}", _dark: "{colors.orange.80}" }
4177
+ },
4178
+ subtler: {
4179
+ value: { base: "{colors.orange.20}", _dark: "{colors.orange.90}" }
4180
+ },
4181
+ subtlest: {
4182
+ value: { base: "{colors.orange.10}", _dark: "{colors.orange.90}" }
4183
+ },
4184
+ bold: {
4185
+ value: { base: "{colors.orange.70}", _dark: "{colors.orange.40}" }
4186
+ }
4187
+ },
4188
+ purple: {
4189
+ subtle: {
4190
+ value: { base: "{colors.purple.40}", _dark: "{colors.purple.80}" }
4191
+ },
4192
+ subtler: {
4193
+ value: { base: "{colors.purple.20}", _dark: "{colors.purple.90}" }
4194
+ },
4195
+ subtlest: {
4196
+ value: { base: "{colors.purple.10}", _dark: "{colors.purple.90}" }
4197
+ },
4198
+ bold: {
4199
+ value: { base: "{colors.purple.70}", _dark: "{colors.purple.40}" }
4200
+ }
4201
+ },
4202
+ red: {
4203
+ subtle: {
4204
+ value: { base: "{colors.red.40}", _dark: "{colors.red.80}" }
4205
+ },
4206
+ subtler: {
4207
+ value: { base: "{colors.red.20}", _dark: "{colors.red.90}" }
4208
+ },
4209
+ subtlest: {
4210
+ value: { base: "{colors.red.10}", _dark: "{colors.red.100}" }
4211
+ },
4212
+ bold: {
4213
+ value: { base: "{colors.red.70}", _dark: "{colors.red.40}" }
4214
+ }
4215
+ },
4216
+ tan: {
4217
+ subtle: {
4218
+ value: { base: "{colors.tan.40}", _dark: "{colors.tan.80}" }
4219
+ },
4220
+ subtler: {
4221
+ value: { base: "{colors.tan.20}", _dark: "{colors.tan.90}" }
4222
+ },
4223
+ subtlest: {
4224
+ value: { base: "{colors.tan.10}", _dark: "{colors.tan.90}" }
4225
+ },
4226
+ bold: {
4227
+ value: { base: "{colors.tan.70}", _dark: "{colors.tan.40}" }
4228
+ }
4229
+ },
4230
+ teal: {
4231
+ subtle: {
4232
+ value: { base: "{colors.teal.40}", _dark: "{colors.teal.80}" }
4233
+ },
4234
+ subtler: {
4235
+ value: { base: "{colors.teal.20}", _dark: "{colors.teal.90}" }
4236
+ },
4237
+ subtlest: {
4238
+ value: { base: "{colors.teal.10}", _dark: "{colors.teal.90}" }
4239
+ },
4240
+ bold: {
4241
+ value: { base: "{colors.teal.70}", _dark: "{colors.teal.40}" }
4242
+ }
4243
+ },
4244
+ yellow: {
4245
+ subtle: {
4246
+ value: { base: "{colors.yellow.30}", _dark: "{colors.yellow.80}" }
4247
+ },
4248
+ subtler: {
4249
+ value: { base: "{colors.yellow.20}", _dark: "{colors.yellow.90}" }
4250
+ },
4251
+ subtlest: {
4252
+ value: { base: "{colors.yellow.10}", _dark: "{colors.yellow.90}" }
4253
+ },
4254
+ bold: {
4255
+ value: { base: "{colors.yellow.70}", _dark: "{colors.yellow.40}" }
4256
+ }
4257
+ }
4258
+ }
4259
+ },
4260
+ blanket: {
4261
+ DEFAULT: { value: { base: "#ef5c4814", _dark: "#e3493514" } },
4262
+ danger: { value: { base: "#17171775", _dark: "#10121499" } },
4263
+ selected: { value: { base: "#388bff14", _dark: "#1d7afc14" } }
4264
+ },
4265
+ border: {
4266
+ DEFAULT: {
4267
+ value: {
4268
+ base: "{colors.neutralA.30}",
4269
+ _dark: "{colors.darkNeutralA.30}"
4270
+ }
4271
+ },
4272
+ bold: {
4273
+ value: { base: "{colors.neutral.60}", _dark: "{colors.darkNeutral.60}" }
4274
+ },
4275
+ inverse: {
4276
+ value: { base: "{colors.neutral.0}", _dark: "{colors.darkNeutral.0}" }
4277
+ },
4278
+ disabled: {
4279
+ value: {
4280
+ base: "{colors.neutralA.20}",
4281
+ _dark: "{colors.darkNeutralA.20}"
4282
+ }
4283
+ },
4284
+ focused: {
4285
+ DEFAULT: {
4286
+ value: { base: "{colors.blue.50}", _dark: "{colors.blue.30}" }
4287
+ },
4288
+ inverse: {
4289
+ value: { base: "{colors.blue.100}", _dark: "{colors.blue.10}" }
4290
+ }
4291
+ },
4292
+ selected: {
4293
+ value: { base: "{colors.blue.70}", _dark: "{colors.blue.40}" }
4294
+ },
4295
+ input: {
4296
+ value: { base: "{colors.neutral.50}", _dark: "{colors.darkNeutral.60}" }
4297
+ },
4298
+ success: { value: { base: "{colors.lime.60}", _dark: "{colors.lime.50}" } },
4299
+ warning: {
4300
+ value: { base: "{colors.orange.60}", _dark: "{colors.orange.50}" }
4301
+ },
4302
+ danger: { value: { base: "{colors.red.60}", _dark: "{colors.red.50}" } },
4303
+ info: { value: { base: "{colors.blue.60}", _dark: "{colors.blue.50}" } }
4304
+ },
4305
+ icon: {
4306
+ DEFAULT: {
4307
+ value: {
4308
+ base: "{colors.neutral.100}",
4309
+ _dark: "{colors.darkNeutral.110}"
4310
+ }
4311
+ },
4312
+ subtle: {
4313
+ value: { base: "{colors.neutral.80}", _dark: "{colors.darkNeutral.80}" }
4314
+ },
4315
+ subtlest: {
4316
+ value: { base: "{colors.neutral.70}", _dark: "{colors.darkNeutral.70}" }
4317
+ },
4318
+ inverse: {
4319
+ value: { base: "{colors.neutral.0}", _dark: "{colors.darkNeutral.10}" }
4320
+ },
4321
+ selected: {
4322
+ value: { base: "{colors.blue.70}", _dark: "{colors.blue.40}" }
4323
+ },
4324
+ disabled: {
4325
+ value: {
4326
+ base: "{colors.neutralA.40}",
4327
+ _dark: "{colors.darkNeutralA.40}"
4328
+ }
4329
+ },
4330
+ decorative: {
4331
+ DEFAULT: {
4332
+ value: {
4333
+ base: "{colors.neutral.50}",
4334
+ _dark: "{colors.darkNeutral.60}"
4335
+ }
4336
+ },
4337
+ hovered: {
4338
+ value: { base: "{colors.neutral.100}", _dark: "{colors.neutral.0}" }
4339
+ },
4340
+ inverse: {
4341
+ DEFAULT: {
4342
+ value: {
4343
+ base: "{colors.neutral.30}",
4344
+ _dark: "{colors.darkNeutral.30}"
4345
+ }
4346
+ },
4347
+ hovered: {
4348
+ value: {
4349
+ base: "{colors.neutral.0}",
4350
+ _dark: "{colors.darkNeutral.10}"
4351
+ }
4352
+ }
4353
+ }
4354
+ },
4355
+ success: { value: { base: "{colors.lime.60}", _dark: "{colors.lime.50}" } },
4356
+ warning: {
4357
+ DEFAULT: {
4358
+ value: { base: "{colors.orange.60}", _dark: "{colors.orange.30}" }
4359
+ },
4360
+ inverse: {
4361
+ value: {
4362
+ base: "{colors.neutral.100}",
4363
+ _dark: "{colors.darkNeutral.10}"
4364
+ }
4365
+ }
4366
+ },
4367
+ danger: { value: { base: "{colors.red.70}", _dark: "{colors.red.50}" } },
4368
+ info: { value: { base: "{colors.blue.60}", _dark: "{colors.blue.50}" } }
4369
+ },
4370
+ link: {
4371
+ DEFAULT: { value: { base: "{colors.blue.70}", _dark: "{colors.blue.40}" } },
4372
+ pressed: { value: { base: "{colors.blue.80}", _dark: "{colors.blue.30}" } }
4373
+ },
4374
+ surface: {
4375
+ DEFAULT: {
4376
+ value: { base: "{colors.neutral.0}", _dark: "{colors.darkNeutral.10}" }
4377
+ },
4378
+ hovered: {
4379
+ value: { base: "{colors.neutral.20}", _dark: "{colors.darkNeutral.20}" }
4380
+ },
4381
+ pressed: {
4382
+ value: { base: "{colors.neutral.30}", _dark: "{colors.darkNeutral.30}" }
4383
+ },
4384
+ sunken: {
4385
+ value: { base: "{colors.neutral.10}", _dark: "{colors.darkNeutral.0}" }
4386
+ },
4387
+ overlay: {
4388
+ DEFAULT: {
4389
+ value: { base: "{colors.neutral.0}", _dark: "{colors.darkNeutral.25}" }
4390
+ },
4391
+ hovered: {
4392
+ value: {
4393
+ base: "{colors.neutral.20}",
4394
+ _dark: "{colors.darkNeutral.30}"
4395
+ }
4396
+ },
4397
+ pressed: {
4398
+ value: {
4399
+ base: "{colors.neutral.30}",
4400
+ _dark: "{colors.darkNeutral.35}"
4401
+ }
4402
+ }
4403
+ },
4404
+ raised: {
4405
+ DEFAULT: {
4406
+ value: { base: "{colors.neutral.0}", _dark: "{colors.darkNeutral.0}" }
4407
+ },
4408
+ hovered: {
4409
+ value: {
4410
+ base: "{colors.neutral.20}",
4411
+ _dark: "{colors.darkNeutral.25}"
4412
+ }
4413
+ },
4414
+ pressed: {
4415
+ value: {
4416
+ base: "{colors.neutral.30}",
4417
+ _dark: "{colors.darkNeutral.30}"
4418
+ }
4419
+ }
4420
+ }
4421
+ },
4422
+ text: {
4423
+ DEFAULT: {
4424
+ value: {
4425
+ base: "{colors.neutral.100}",
4426
+ _dark: "{colors.darkNeutral.100}"
4427
+ }
4428
+ },
4429
+ subtle: {
4430
+ value: { base: "{colors.neutral.80}", _dark: "{colors.darkNeutral.80}" }
4431
+ },
4432
+ subtlest: {
4433
+ value: { base: "{colors.neutral.70}", _dark: "{colors.darkNeutral.70}" }
4434
+ },
4435
+ bold: {
4436
+ value: {
4437
+ base: "{colors.neutral.100}",
4438
+ _dark: "{colors.darkNeutral.110}"
4439
+ }
4440
+ },
4441
+ inverse: {
4442
+ value: { base: "{colors.neutral.0}", _dark: "{colors.darkNeutral.10}" }
4443
+ },
4444
+ selected: {
4445
+ value: { base: "{colors.blue.70}", _dark: "{colors.blue.40}" }
4446
+ },
4447
+ disabled: {
4448
+ value: {
4449
+ base: "{colors.neutralA.40}",
4450
+ _dark: "{colors.darkNeutralA.40}"
4451
+ }
4452
+ },
4453
+ success: { value: { base: "{colors.lime.80}", _dark: "{colors.lime.30}" } },
4454
+ warning: {
4455
+ DEFAULT: {
4456
+ value: { base: "{colors.orange.80}", _dark: "{colors.orange.30}" }
4457
+ },
4458
+ inverse: {
4459
+ value: {
4460
+ base: "{colors.neutral.100}",
4461
+ _dark: "{colors.darkNeutral.10}"
4462
+ }
4463
+ }
4464
+ },
4465
+ danger: { value: { base: "{colors.red.80}", _dark: "{colors.red.30}" } },
4466
+ info: { value: { base: "{colors.blue.80}", _dark: "{colors.blue.30}" } },
4467
+ accent: {
4468
+ gray: {
4469
+ DEFAULT: {
4470
+ value: {
4471
+ base: "{colors.neutral.80}",
4472
+ _dark: "{colors.darkNeutral.80}"
4473
+ }
4474
+ },
4475
+ bold: {
4476
+ value: {
4477
+ base: "{colors.neutral.100}",
4478
+ _dark: "{colors.darkNeutral.100}"
4479
+ }
4480
+ }
4481
+ },
4482
+ red: {
4483
+ DEFAULT: {
4484
+ value: { base: "{colors.red.80}", _dark: "{colors.red.30}" }
4485
+ },
4486
+ bold: {
4487
+ value: { base: "{colors.red.90}", _dark: "{colors.red.20}" }
4488
+ }
4489
+ },
4490
+ orange: {
4491
+ DEFAULT: {
4492
+ value: { base: "{colors.orange.80}", _dark: "{colors.orange.30}" }
4493
+ },
4494
+ bold: {
4495
+ value: { base: "{colors.orange.90}", _dark: "{colors.orange.20}" }
4496
+ }
4497
+ },
4498
+ yellow: {
4499
+ DEFAULT: {
4500
+ value: { base: "{colors.yellow.80}", _dark: "{colors.yellow.30}" }
4501
+ },
4502
+ bold: {
4503
+ value: { base: "{colors.yellow.90}", _dark: "{colors.yellow.20}" }
4504
+ }
4505
+ },
4506
+ lime: {
4507
+ DEFAULT: {
4508
+ value: { base: "{colors.lime.80}", _dark: "{colors.lime.30}" }
4509
+ },
4510
+ bold: {
4511
+ value: { base: "{colors.lime.90}", _dark: "{colors.lime.20}" }
4512
+ }
4513
+ },
4514
+ green: {
4515
+ DEFAULT: {
4516
+ value: { base: "{colors.green.80}", _dark: "{colors.green.30}" }
4517
+ },
4518
+ bold: {
4519
+ value: { base: "{colors.green.90}", _dark: "{colors.green.20}" }
4520
+ }
4521
+ },
4522
+ teal: {
4523
+ DEFAULT: {
4524
+ value: { base: "{colors.teal.80}", _dark: "{colors.teal.30}" }
4525
+ },
4526
+ bold: {
4527
+ value: { base: "{colors.teal.90}", _dark: "{colors.teal.20}" }
4528
+ }
4529
+ },
4530
+ blue: {
4531
+ DEFAULT: {
4532
+ value: { base: "{colors.blue.80}", _dark: "{colors.blue.30}" }
4533
+ },
4534
+ bold: {
4535
+ value: { base: "{colors.blue.90}", _dark: "{colors.blue.20}" }
4536
+ }
4537
+ },
4538
+ indigo: {
4539
+ DEFAULT: {
4540
+ value: { base: "{colors.indigo.80}", _dark: "{colors.indigo.30}" }
4541
+ },
4542
+ bold: {
4543
+ value: { base: "{colors.indigo.90}", _dark: "{colors.indigo.20}" }
4544
+ }
4545
+ },
4546
+ purple: {
4547
+ DEFAULT: {
4548
+ value: { base: "{colors.purple.80}", _dark: "{colors.purple.30}" }
4549
+ },
4550
+ bold: {
4551
+ value: { base: "{colors.purple.90}", _dark: "{colors.purple.20}" }
4552
+ }
4553
+ },
4554
+ magenta: {
4555
+ DEFAULT: {
4556
+ value: { base: "{colors.magenta.80}", _dark: "{colors.magenta.30}" }
4557
+ },
4558
+ bold: {
4559
+ value: { base: "{colors.magenta.90}", _dark: "{colors.magenta.20}" }
4560
+ }
4561
+ },
4562
+ tan: {
4563
+ DEFAULT: {
4564
+ value: { base: "{colors.tan.80}", _dark: "{colors.tan.30}" }
4565
+ },
4566
+ bold: {
4567
+ value: { base: "{colors.tan.90}", _dark: "{colors.tan.20}" }
4568
+ }
4569
+ }
4570
+ }
4571
+ },
4572
+ utility: {
4573
+ shadowColor: {
4574
+ value: { base: "{colors.slate.90/20}", _dark: "{colors.slate.100/40}" }
3767
4575
  }
3768
4576
  }
3769
- };
4577
+ });
4578
+ const semantics = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
4579
+ __proto__: null,
4580
+ colors
4581
+ }, Symbol.toStringTag, { value: "Module" }));
3770
4582
  const baseHeadingStyles = defineStyles({
3771
4583
  value: {
3772
4584
  fontFamily: "sans",
3773
4585
  fontWeight: "bold",
3774
- color: { base: "gray.90", _dark: "gray.5" },
4586
+ color: { base: "gray.90", _dark: "gray.10" },
3775
4587
  lineHeight: "default"
3776
4588
  }
3777
4589
  });
@@ -3791,7 +4603,7 @@ const baseMonoStyles = defineStyles({
3791
4603
  lineHeight: "default"
3792
4604
  }
3793
4605
  });
3794
- const textStyles$1 = defineTextStyles({
4606
+ const textStyles = defineTextStyles({
3795
4607
  display: {
3796
4608
  lg: {
3797
4609
  value: {
@@ -3897,191 +4709,6 @@ const textStyles$1 = defineTextStyles({
3897
4709
  }
3898
4710
  }
3899
4711
  });
3900
- const tokens = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
3901
- __proto__: null,
3902
- animations,
3903
- aspectRatios,
3904
- blurs,
3905
- borderWidths,
3906
- borders,
3907
- breakpoints: breakpoints$1,
3908
- colors: colors$1,
3909
- containerSizes,
3910
- durations,
3911
- easings,
3912
- fontSizes,
3913
- fontWeights,
3914
- fonts,
3915
- keyframes: keyframes$1,
3916
- letterSpacings,
3917
- lineHeights,
3918
- numericSizes,
3919
- radii,
3920
- shadows,
3921
- sizes,
3922
- textStyles: textStyles$1,
3923
- utilitySizes
3924
- }, Symbol.toStringTag, { value: "Module" }));
3925
- const colors = {
3926
- success: {
3927
- lighter: {
3928
- value: {
3929
- base: "{colors.green.2}",
3930
- _dark: "{colors.green.5}"
3931
- }
3932
- },
3933
- light: {
3934
- value: {
3935
- base: "{colors.green.10}",
3936
- _dark: "{colors.green.20}"
3937
- }
3938
- },
3939
- default: {
3940
- value: {
3941
- base: "{colors.green.40}",
3942
- _dark: "{colors.green.30}"
3943
- }
3944
- },
3945
- dark: {
3946
- value: {
3947
- base: "{colors.green.60}",
3948
- _dark: "{colors.green.60}"
3949
- }
3950
- },
3951
- darker: {
3952
- value: {
3953
- base: "{colors.green.70}",
3954
- _dark: "{colors.green.70}"
3955
- }
3956
- }
3957
- },
3958
- warning: {
3959
- lighter: {
3960
- value: {
3961
- base: "{colors.yellow.2}",
3962
- _dark: "{colors.yellow.2}"
3963
- }
3964
- },
3965
- light: {
3966
- value: {
3967
- base: "{colors.yellow.10}",
3968
- _dark: "{colors.yellow.10}"
3969
- }
3970
- },
3971
- default: {
3972
- value: {
3973
- base: "{colors.yellow.30}",
3974
- _dark: "{colors.yellow.20}"
3975
- }
3976
- },
3977
- dark: {
3978
- value: {
3979
- base: "{colors.yellow.60}",
3980
- _dark: "{colors.yellow.60}"
3981
- }
3982
- },
3983
- darker: {
3984
- value: {
3985
- base: "{colors.yellow.70}",
3986
- _dark: "{colors.yellow.70}"
3987
- }
3988
- }
3989
- },
3990
- error: {
3991
- lighter: {
3992
- value: {
3993
- base: "{colors.red.2}",
3994
- _dark: "{colors.red.5}"
3995
- }
3996
- },
3997
- light: {
3998
- value: {
3999
- base: "{colors.red.10}",
4000
- _dark: "{colors.red.20}"
4001
- }
4002
- },
4003
- default: {
4004
- value: {
4005
- base: "{colors.red.50}",
4006
- _dark: "{colors.red.40}"
4007
- }
4008
- },
4009
- dark: {
4010
- value: {
4011
- base: "{colors.red.60}",
4012
- _dark: "{colors.red.60}"
4013
- }
4014
- },
4015
- darker: {
4016
- value: {
4017
- base: "{colors.red.70}",
4018
- _dark: "{colors.red.70}"
4019
- }
4020
- }
4021
- },
4022
- info: {
4023
- lighter: {
4024
- value: {
4025
- base: "{colors.blue.2}",
4026
- _dark: "{colors.blue.5}"
4027
- }
4028
- },
4029
- light: {
4030
- value: {
4031
- base: "{colors.blue.10}",
4032
- _dark: "{colors.blue.20}"
4033
- }
4034
- },
4035
- default: {
4036
- value: {
4037
- base: "{colors.blue.50}",
4038
- _dark: "{colors.blue.40}"
4039
- }
4040
- },
4041
- dark: {
4042
- value: {
4043
- base: "{colors.blue.60}",
4044
- _dark: "{colors.blue.60}"
4045
- }
4046
- },
4047
- darker: {
4048
- value: {
4049
- base: "{colors.blue.70}",
4050
- _dark: "{colors.blue.70}"
4051
- }
4052
- }
4053
- },
4054
- utility: {
4055
- shadowColor: {
4056
- value: {
4057
- base: "{colors.gray.90/20}",
4058
- _dark: "{colors.gray.100/40}"
4059
- }
4060
- },
4061
- headingColor: {
4062
- value: {
4063
- base: "{colors.gray.90}",
4064
- _dark: "{colors.gray.5}"
4065
- }
4066
- },
4067
- textColor: {
4068
- value: {
4069
- base: "{colors.gray.60}",
4070
- _dark: "{colors.gray.30}"
4071
- }
4072
- },
4073
- borderColor: {
4074
- value: {
4075
- base: "{colors.gray.10}",
4076
- _dark: "{colors.gray.60}"
4077
- }
4078
- }
4079
- }
4080
- };
4081
- const semanticTokens = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
4082
- __proto__: null,
4083
- colors
4084
- }, Symbol.toStringTag, { value: "Module" }));
4085
4712
  const conditions = {
4086
4713
  hover: "&:is(:hover, [data-hover])",
4087
4714
  focus: "&:is(:focus, [data-focus])",
@@ -4140,6 +4767,7 @@ const conditions = {
4140
4767
  required: "&:is(:required, [data-required], [aria-required=true])",
4141
4768
  valid: "&:is(:valid, [data-valid])",
4142
4769
  invalid: "&:is(:invalid, [data-invalid], [aria-invalid=true])",
4770
+ error: "&:is([data-error], [data-error=true])",
4143
4771
  autofill: "&:autofill",
4144
4772
  inRange: "&:is(:in-range, [data-in-range])",
4145
4773
  outOfRange: "&:is(:out-of-range, [data-outside-range])",
@@ -4172,8 +4800,8 @@ const conditions = {
4172
4800
  print: "@media print",
4173
4801
  landscape: "@media (orientation: landscape)",
4174
4802
  portrait: "@media (orientation: portrait)",
4175
- dark: ".dark &, &:is([data-color-mode=dark] *, [data-color-mode=dark])",
4176
- light: ".light &, &:is([data-color-mode=light] *, [data-color-mode=light])",
4803
+ dark: ".dark &, &:is([data-color-mode=dark] *), [data-color-mode=dark] &",
4804
+ light: ".light &, &:is([data-color-mode=light] *), [data-color-mode=light] &",
4177
4805
  osDark: "@media (prefers-color-scheme: dark)",
4178
4806
  osLight: "@media (prefers-color-scheme: light)",
4179
4807
  highContrast: "@media (forced-colors: active)",
@@ -4197,7 +4825,7 @@ const globalCss = defineGlobalStyles({
4197
4825
  margin: 0,
4198
4826
  padding: 0,
4199
4827
  _focusVisible: {
4200
- outlineColor: { base: "gray.80", _dark: "gray.5" }
4828
+ borderColor: "border.focused"
4201
4829
  },
4202
4830
  _disabled: {
4203
4831
  opacity: 0.4,
@@ -4213,13 +4841,13 @@ const globalCss = defineGlobalStyles({
4213
4841
  },
4214
4842
  body: {
4215
4843
  fontFamily: "body",
4216
- bg: { base: "gray.0", _dark: "gray.90" },
4217
- color: { base: "gray.60", _dark: "gray.20" },
4844
+ bg: "surface",
4845
+ color: "text.subtlest",
4218
4846
  fontWeight: "normal"
4219
4847
  },
4220
4848
  "h1, h2, h3, h4, h5, h6": {
4221
- color: { base: "gray.90", _dark: "gray.5" },
4222
- fontWeight: "black",
4849
+ color: "text",
4850
+ fontWeight: "bold",
4223
4851
  lineHeight: "calc(1em + 0.5rem)"
4224
4852
  },
4225
4853
  p: {
@@ -4239,7 +4867,7 @@ const globalCss = defineGlobalStyles({
4239
4867
  fontSize: "1em"
4240
4868
  },
4241
4869
  table: {
4242
- borderColor: "currentcolor"
4870
+ borderColor: "border.subtle"
4243
4871
  },
4244
4872
  "button, input, optgroup, select, textarea": {
4245
4873
  fontFamily: "inherit",
@@ -4274,221 +4902,6 @@ const globalCss = defineGlobalStyles({
4274
4902
  display: "list-item"
4275
4903
  }
4276
4904
  });
4277
- const baseButtonStyles = {
4278
- position: "relative",
4279
- appearance: "none",
4280
- minWidth: 0,
4281
- transitionDuration: "fast",
4282
- transitionProperty: "background, border-color, color, box-shadow",
4283
- transitionTimingFunction: "default",
4284
- userSelect: "none",
4285
- verticalAlign: "middle",
4286
- display: "flex",
4287
- alignItems: "center",
4288
- gap: 4,
4289
- fontFamily: "sans",
4290
- fontSize: 16,
4291
- fontWeight: "medium",
4292
- lineHeight: "default",
4293
- borderWidth: 1,
4294
- borderStyle: "solid",
4295
- borderColor: "transparent",
4296
- borderRadius: 4,
4297
- outlineWidth: 2,
4298
- outlineStyle: "solid",
4299
- outlineColor: "transparent",
4300
- outlineOffset: 1,
4301
- textDecoration: "none",
4302
- whiteSpace: "nowrap",
4303
- cursor: "pointer",
4304
- _disabled: {
4305
- opacity: 0.4,
4306
- cursor: "not-allowed"
4307
- },
4308
- _focusVisible: {
4309
- outlineColor: { base: "gray.80", _dark: "gray.5" }
4310
- },
4311
- "& svg": {
4312
- fill: "current"
4313
- }
4314
- };
4315
- const buttonVariants = {
4316
- variant: {
4317
- primary: {
4318
- bg: { base: "gray.90", _dark: "gray.5" },
4319
- color: { base: "gray.5", _dark: "gray.90" },
4320
- _hover: {
4321
- bg: { base: "gray.70", _dark: "gray.20" }
4322
- },
4323
- _active: {
4324
- bg: { base: "gray.100", _dark: "gray.30" },
4325
- borderColor: "transparent"
4326
- },
4327
- _disabled: {
4328
- _hover: {
4329
- bg: { base: "gray.90", _dark: "gray.5" }
4330
- }
4331
- },
4332
- _selected: {
4333
- bg: { base: "gray.5", _dark: "gray.90" },
4334
- color: { base: "gray.90", _dark: "gray.5" },
4335
- borderColor: "transparent"
4336
- }
4337
- },
4338
- standard: {
4339
- bg: { base: "gray.5", _dark: "gray.70" },
4340
- color: { base: "gray.90", _dark: "gray.5" },
4341
- _hover: {
4342
- bg: { base: "gray.10", _dark: "gray.60" }
4343
- },
4344
- _active: {
4345
- bg: { base: "gray.20", _dark: "gray.80" },
4346
- borderColor: "transparent"
4347
- },
4348
- _disabled: {
4349
- _hover: {
4350
- bg: { base: "gray.5", _dark: "gray.70" }
4351
- }
4352
- },
4353
- _selected: {
4354
- bg: { base: "gray.90", _dark: "gray.5" },
4355
- color: { base: "gray.5", _dark: "gray.90" },
4356
- borderColor: "transparent"
4357
- }
4358
- },
4359
- hollow: {
4360
- bg: "transparent",
4361
- borderColor: { base: "gray.30", _dark: "gray.60" },
4362
- color: { base: "gray.90", _dark: "gray.5" },
4363
- _hover: {
4364
- bg: { base: "gray.10", _dark: "gray.60" },
4365
- borderColor: { base: "gray.10", _dark: "gray.60" }
4366
- },
4367
- _active: {
4368
- bg: { base: "gray.20", _dark: "gray.70" },
4369
- borderColor: { base: "gray.20", _dark: "gray.70" }
4370
- },
4371
- _disabled: {
4372
- _hover: {
4373
- bg: "transparent"
4374
- }
4375
- },
4376
- _selected: {
4377
- bg: { base: "gray.90", _dark: "gray.5" },
4378
- color: { base: "gray.5", _dark: "gray.90" },
4379
- borderColor: "transparent"
4380
- }
4381
- },
4382
- ghost: {
4383
- bg: "transparent",
4384
- color: { base: "gray.90", _dark: "gray.5" },
4385
- _hover: {
4386
- bg: { base: "gray.10", _dark: "gray.60" }
4387
- },
4388
- _active: {
4389
- bg: { base: "gray.20", _dark: "gray.70" },
4390
- borderColor: "transparent"
4391
- },
4392
- _disabled: {
4393
- _hover: {
4394
- bg: "transparent"
4395
- }
4396
- },
4397
- _selected: {
4398
- bg: { base: "gray.90", _dark: "gray.5" },
4399
- color: { base: "gray.5", _dark: "gray.90" },
4400
- borderColor: "transparent"
4401
- }
4402
- },
4403
- cta: {
4404
- bg: { base: "blue.50", _dark: "blue.50" },
4405
- color: { base: "gray.5", _dark: "gray.5" },
4406
- _hover: {
4407
- bg: { base: "blue.40", _dark: "blue.40" }
4408
- },
4409
- _active: {
4410
- bg: { base: "blue.60", _dark: "blue.60" },
4411
- borderColor: "transparent"
4412
- },
4413
- _disabled: {
4414
- _hover: {
4415
- bg: { base: "blue.50", _dark: "blue.50" }
4416
- }
4417
- }
4418
- },
4419
- danger: {
4420
- bg: { base: "red.50", _dark: "red.50" },
4421
- color: { base: "gray.0", _dark: "gray.0" },
4422
- _hover: {
4423
- bg: { base: "red.40", _dark: "red.40" }
4424
- },
4425
- _active: {
4426
- bg: { base: "red.60", _dark: "red.60" },
4427
- borderColor: "transparent"
4428
- },
4429
- _disabled: {
4430
- _hover: {
4431
- bg: { base: "red.50", _dark: "red.50" }
4432
- }
4433
- }
4434
- }
4435
- }
4436
- };
4437
- const buttonRecipe = defineRecipe({
4438
- className: "button",
4439
- jsx: ["Button"],
4440
- base: baseButtonStyles,
4441
- variants: {
4442
- ...buttonVariants,
4443
- size: {
4444
- standard: {
4445
- fontSize: "16",
4446
- py: "3",
4447
- px: "12"
4448
- },
4449
- large: {
4450
- fontSize: "16",
4451
- py: "7",
4452
- px: "14"
4453
- },
4454
- small: {
4455
- fontSize: "14",
4456
- py: "1",
4457
- px: "8"
4458
- }
4459
- }
4460
- },
4461
- defaultVariants: {
4462
- variant: "standard",
4463
- size: "standard"
4464
- }
4465
- });
4466
- const iconButtonRecipe = defineRecipe({
4467
- className: "icon-button",
4468
- jsx: ["IconButton"],
4469
- base: baseButtonStyles,
4470
- variants: {
4471
- ...buttonVariants,
4472
- size: {
4473
- standard: {
4474
- fontSize: "16",
4475
- p: "3"
4476
- },
4477
- large: {
4478
- fontSize: "16",
4479
- p: "7"
4480
- },
4481
- small: {
4482
- fontSize: "14",
4483
- p: "1"
4484
- }
4485
- }
4486
- },
4487
- defaultVariants: {
4488
- variant: "standard",
4489
- size: "standard"
4490
- }
4491
- });
4492
4905
  const badgeRecipe = defineRecipe({
4493
4906
  className: "badge",
4494
4907
  jsx: ["Badge"],
@@ -4561,138 +4974,160 @@ const badgeRecipe = defineRecipe({
4561
4974
  }
4562
4975
  }
4563
4976
  });
4564
- const textareaRecipe = defineRecipe({
4565
- className: "textarea",
4566
- jsx: ["Textarea"],
4567
- base: {
4568
- position: "relative",
4569
- display: "inline-grid",
4570
- verticalAlign: "top",
4571
- alignItems: "center",
4572
- padding: "0",
4573
- fontFamily: "sans",
4574
- fontSize: "16",
4575
- fontWeight: "normal",
4576
- lineHeight: "normal",
4577
- color: { base: "gray.90", _osDark: "gray.5" },
4578
- borderRadius: "8",
4579
- // transitionDuration: 'fast',
4580
- // transitionProperty: 'background, border-color, color, box-shadow',
4581
- // transitionTimingFunction: 'default',
4582
- "&::after, & textarea": {
4583
- width: "auto",
4584
- minWidth: "16",
4585
- maxWidth: "full",
4586
- font: "inherit",
4587
- py: "4",
4977
+ const textareaVariants = {
4978
+ size: {
4979
+ medium: {
4980
+ py: "3",
4981
+ px: "10",
4982
+ fontSize: "16",
4983
+ minHeight: "64"
4984
+ },
4985
+ small: {
4986
+ py: "0",
4588
4987
  px: "8",
4589
- m: "0",
4590
- resize: "none",
4591
- appearance: "none",
4592
- borderWidth: "1",
4593
- borderStyle: "solid",
4594
- borderRadius: "4",
4595
- borderColor: "transparent"
4988
+ minHeight: "48",
4989
+ fontSize: "14"
4596
4990
  },
4597
- _after: {
4598
- content: 'attr(data-value) " "',
4599
- // visibility: 'hidden',
4600
- outline: "1px solid olive",
4601
- whiteSpace: "pre-wrap",
4602
- transform: "translate(4px, 4px)",
4603
- opacity: "0.3"
4604
- },
4605
- "& textarea": {
4606
- // _disabled: {
4607
- // opacity: 0.4,
4608
- // cursor: 'not-allowed',
4609
- // },
4610
- // _invalid: {
4611
- // borderColor: 'red.50',
4612
- // _focus: {
4613
- // borderColor: 'red.50',
4614
- // },
4615
- // },
4616
- // _placeholder: {
4617
- // color: { base: 'gray.50', _osDark: 'gray.60' },
4618
- // opacity: 'full',
4619
- // },
4991
+ large: {
4992
+ py: "7",
4993
+ px: "12",
4994
+ fontSize: "16",
4995
+ minHeight: "80"
4620
4996
  }
4997
+ }
4998
+ // autoGrow: {
4999
+ // false: {
5000
+ // width: 'full',
5001
+ // },
5002
+ // true: {
5003
+ // width: 'fit-content',
5004
+ // },
5005
+ // },
5006
+ // stacked: {
5007
+ // true: {
5008
+ // gridTemplateRows: 'auto 1fr',
5009
+ // alignItems: 'stretch',
5010
+ // '&::after, & textarea': {
5011
+ // gridArea: '2 / 1',
5012
+ // },
5013
+ // '& textarea': {
5014
+ // background: { base: 'gray.10', _dark: 'gray.90' },
5015
+ // borderColor: { base: 'gray.40', _dark: 'gray.100' },
5016
+ // // _hover: {
5017
+ // // borderColor: { base: 'gray.20', _dark: 'gray.30' },
5018
+ // // },
5019
+ // // _focus: {
5020
+ // // borderColor: { base: 'gray.90', _dark: 'gray.10' },
5021
+ // // },
5022
+ // },
5023
+ // },
5024
+ // false: {
5025
+ // gridTemplateColumns: 'auto 1fr',
5026
+ // alignItems: 'center',
5027
+ // '& textarea': {
5028
+ // background: { base: 'gray.10', _dark: 'gray.90' },
5029
+ // borderColor: { base: 'green.40', _dark: 'green.50' },
5030
+ // // _hover: {
5031
+ // // borderColor: { base: 'gray.20', _dark: 'gray.30' },
5032
+ // // },
5033
+ // // _focus: {
5034
+ // // borderColor: { base: 'gray.90', _dark: 'gray.10' },
5035
+ // // },
5036
+ // },
5037
+ // },
5038
+ // },
5039
+ // internalLabel: {
5040
+ // false: {},
5041
+ // true: {
5042
+ // // _focusWithin: {
5043
+ // // outlineWidth: 1,
5044
+ // // outlineStyle: 'solid',
5045
+ // // outlineColor: { base: 'gray.90', _dark: 'gray.10' },
5046
+ // // // outlineOffset: 2,
5047
+ // // ml: '-4',
5048
+ // // },
5049
+ // },
5050
+ // },
5051
+ };
5052
+ const textareaBase = {
5053
+ display: "inline-grid",
5054
+ position: "relative",
5055
+ width: "full",
5056
+ verticalAlign: "top",
5057
+ borderWidth: "1",
5058
+ borderStyle: "solid",
5059
+ borderColor: "border.input",
5060
+ borderRadius: "4",
5061
+ outlineWidth: "2",
5062
+ outlineOffset: "-1",
5063
+ outlineStyle: "solid",
5064
+ outlineColor: "transparent",
5065
+ lineHeight: "default",
5066
+ fontFamily: "body",
5067
+ bg: "bg.input",
5068
+ color: "text",
5069
+ transitionDuration: "fast",
5070
+ transitionProperty: "background, border-color, color, outline-color",
5071
+ transitionTimingFunction: "default",
5072
+ _placeholder: {
5073
+ color: "text.subtlest"
4621
5074
  },
4622
- defaultVariants: {
4623
- stacked: true,
4624
- internalLabel: false,
4625
- autoGrow: false
5075
+ _hover: {
5076
+ bg: "bg.input.hovered"
4626
5077
  },
4627
- compoundVariants: [],
4628
- variants: {
4629
- autoGrow: {
4630
- false: {
4631
- width: "full"
4632
- },
4633
- true: {
4634
- width: "fit-content"
4635
- }
4636
- },
4637
- stacked: {
4638
- true: {
4639
- gridTemplateRows: "auto 1fr",
4640
- alignItems: "stretch",
4641
- "&::after, & textarea": {
4642
- gridArea: "2 / 1"
4643
- },
4644
- "& textarea": {
4645
- background: { base: "gray.0", _osDark: "gray.90" },
4646
- borderColor: { base: "gray.40", _osDark: "gray.50" }
4647
- // _hover: {
4648
- // borderColor: { base: 'gray.20', _osDark: 'gray.30' },
4649
- // },
4650
- // _focus: {
4651
- // borderColor: { base: 'gray.90', _osDark: 'gray.5' },
4652
- // },
4653
- }
4654
- },
4655
- false: {
4656
- gridTemplateColumns: "auto 1fr",
4657
- alignItems: "center",
4658
- "& textarea": {
4659
- background: { base: "gray.0", _osDark: "gray.90" },
4660
- borderColor: { base: "green.40", _osDark: "green.50" }
4661
- // _hover: {
4662
- // borderColor: { base: 'gray.20', _osDark: 'gray.30' },
4663
- // },
4664
- // _focus: {
4665
- // borderColor: { base: 'gray.90', _osDark: 'gray.5' },
4666
- // },
4667
- }
4668
- }
5078
+ _focus: {
5079
+ bg: "bg.input.pressed",
5080
+ borderColor: "border.focused",
5081
+ outlineColor: "border.focused"
5082
+ },
5083
+ _disabled: {
5084
+ bg: "bg.disabled",
5085
+ borderColor: "border.disabled",
5086
+ color: "text.disabled"
5087
+ },
5088
+ _error: {
5089
+ display: "inline-grid",
5090
+ bg: "bg.danger",
5091
+ borderColor: "border.danger",
5092
+ color: "text.danger",
5093
+ _hover: {
5094
+ bg: "bg.danger.hovered",
5095
+ borderColor: "border.danger"
4669
5096
  },
4670
- internalLabel: {
4671
- false: {},
4672
- true: {
4673
- // _focusWithin: {
4674
- // outlineWidth: 1,
4675
- // outlineStyle: 'solid',
4676
- // outlineColor: { base: 'gray.90', _osDark: 'gray.5' },
4677
- // // outlineOffset: 2,
4678
- // ml: '-4',
4679
- // },
4680
- }
5097
+ _focus: {
5098
+ bg: "bg.danger",
5099
+ borderColor: "border.danger",
5100
+ outlineColor: "border.danger"
4681
5101
  }
4682
5102
  }
5103
+ };
5104
+ const textareaRecipe = defineRecipe({
5105
+ className: "textarea",
5106
+ jsx: ["Textarea"],
5107
+ base: textareaBase,
5108
+ variants: textareaVariants,
5109
+ defaultVariants: {
5110
+ size: "medium"
5111
+ // stacked: true,
5112
+ // internalLabel: false,
5113
+ // autoGrow: false,
5114
+ }
4683
5115
  });
4684
5116
  const textBase = {
4685
5117
  margin: "0",
4686
5118
  lineHeight: "default",
4687
5119
  fontWeight: "normal",
4688
5120
  fontSize: "16",
4689
- color: { base: "gray.70", _dark: "gray.20" }
5121
+ color: "text"
4690
5122
  };
4691
5123
  const textVariants = {
4692
5124
  family: {
5125
+ heading: { fontFamily: "heading" },
5126
+ body: { fontFamily: "body" },
4693
5127
  sans: { fontFamily: "sans" },
4694
5128
  serif: { fontFamily: "serif" },
4695
- mono: { fontFamily: "mono" }
5129
+ mono: { fontFamily: "mono" },
5130
+ inherit: { fontFamily: "inherit" }
4696
5131
  },
4697
5132
  bold: {
4698
5133
  true: {
@@ -4713,7 +5148,7 @@ const textVariants = {
4713
5148
  const headingBase = {
4714
5149
  fontFamily: "heading",
4715
5150
  fontWeight: "black",
4716
- color: { base: "gray.90", _dark: "gray.5" },
5151
+ color: "text.bold",
4717
5152
  lineHeight: "default"
4718
5153
  };
4719
5154
  const headingVariants = {
@@ -4729,16 +5164,20 @@ const linkBase = {
4729
5164
  alignItems: "center",
4730
5165
  fontWeight: "medium",
4731
5166
  gap: "1",
4732
- color: { base: "blue.50", _dark: "blue.40" },
4733
- textDecoration: "none",
5167
+ color: { base: "blue.70", _dark: "blue.40" },
4734
5168
  backgroundImage: "linear-gradient(90deg, transparent 0% 100%)",
4735
5169
  backgroundSize: "100% 1px",
4736
5170
  backgroundRepeat: "no-repeat",
4737
5171
  backgroundPositionY: "100%",
4738
5172
  width: "fit-content",
4739
5173
  cursor: "pointer",
5174
+ textDecoration: "none",
4740
5175
  _hover: {
4741
- color: { base: "blue.40", _dark: "blue.30" },
5176
+ color: { base: "blue.60", _dark: "blue.40" },
5177
+ backgroundColor: { base: "blue.10", _dark: "blue.100" },
5178
+ backgroundImage: "linear-gradient(90deg, currentColor 0% 100%)"
5179
+ },
5180
+ "p &": {
4742
5181
  backgroundImage: "linear-gradient(90deg, currentColor 0% 100%)"
4743
5182
  }
4744
5183
  };
@@ -4774,7 +5213,7 @@ const textRecipe = defineRecipe({
4774
5213
  base: textBase,
4775
5214
  variants: textVariants,
4776
5215
  defaultVariants: {
4777
- family: "sans"
5216
+ family: "inherit"
4778
5217
  }
4779
5218
  });
4780
5219
  const headingRecipe = defineRecipe({
@@ -4792,7 +5231,7 @@ const linkRecipe = defineRecipe({
4792
5231
  base: linkBase,
4793
5232
  variants: linkVariants,
4794
5233
  defaultVariants: {
4795
- family: "sans"
5234
+ family: "inherit"
4796
5235
  }
4797
5236
  });
4798
5237
  const labelRecipe = defineRecipe({
@@ -4801,12 +5240,15 @@ const labelRecipe = defineRecipe({
4801
5240
  base: labelBase,
4802
5241
  variants: labelVariants,
4803
5242
  defaultVariants: {
4804
- family: "sans"
5243
+ family: "inherit"
4805
5244
  }
4806
5245
  });
4807
5246
  const checkboxInputBase = {
4808
5247
  display: "flex",
4809
- alignItems: "start"
5248
+ alignItems: "start",
5249
+ '&[class*="-label"]': {
5250
+ fontSize: "16"
5251
+ }
4810
5252
  };
4811
5253
  const checkboxInputRecipe = defineRecipe({
4812
5254
  className: "checkbox-input",
@@ -4840,7 +5282,7 @@ const toggleBase = {
4840
5282
  w: "40",
4841
5283
  h: "24",
4842
5284
  rounded: "24",
4843
- bg: { base: "gray.0", _dark: "gray.90" },
5285
+ bg: { base: "gray.10", _dark: "gray.90" },
4844
5286
  transitionProperty: "border-color, background-color",
4845
5287
  transitionDuration: "200ms",
4846
5288
  transitionTimingFunction: "ease-in-out",
@@ -4888,8 +5330,8 @@ const toggleBase = {
4888
5330
  transform: "translateX(16px)"
4889
5331
  },
4890
5332
  "& ~ [name='toggle-bg']": {
4891
- bg: { base: "gray.90", _dark: "gray.0" },
4892
- borderColor: { base: "gray.90", _dark: "gray.0" }
5333
+ bg: { base: "gray.90", _dark: "gray.10" },
5334
+ borderColor: { base: "gray.90", _dark: "gray.10" }
4893
5335
  }
4894
5336
  },
4895
5337
  _error: {
@@ -4900,7 +5342,7 @@ const toggleBase = {
4900
5342
  _focusVisible: {
4901
5343
  appearance: "none",
4902
5344
  opacity: 1,
4903
- outlineColor: { base: "gray.80", _dark: "gray.5" },
5345
+ outlineColor: { base: "gray.80", _dark: "gray.10" },
4904
5346
  outlineOffset: 1,
4905
5347
  outlineWidth: 2,
4906
5348
  outlineStyle: "solid",
@@ -5027,7 +5469,7 @@ const preBase = {
5027
5469
  borderWidth: "0",
5028
5470
  borderColor: "gray.60",
5029
5471
  bg: "gray.80",
5030
- color: "gray.5",
5472
+ color: "gray.10",
5031
5473
  px: "16",
5032
5474
  py: "8",
5033
5475
  my: "8",
@@ -5069,48 +5511,61 @@ const textInputVariants = {
5069
5511
  px: 12,
5070
5512
  fontSize: "16"
5071
5513
  }
5072
- },
5073
- autoSize: {
5074
- true: {
5075
- fieldSizing: "content"
5076
- }
5077
5514
  }
5515
+ // autoSize: {
5516
+ // true: {
5517
+ // fieldSizing: 'content',
5518
+ // },
5519
+ // },
5078
5520
  };
5079
5521
  const textInputBase = {
5522
+ display: "inline-grid",
5080
5523
  position: "relative",
5081
5524
  width: "full",
5082
5525
  borderWidth: "1",
5083
- borderColor: "gray.30",
5084
5526
  borderStyle: "solid",
5527
+ borderColor: "border.input",
5085
5528
  borderRadius: "4",
5086
- lineHeight: "default",
5087
- fontFamily: "body",
5088
- outlineWidth: "1",
5529
+ outlineWidth: "2",
5530
+ outlineOffset: "-1",
5089
5531
  outlineStyle: "solid",
5090
5532
  outlineColor: "transparent",
5091
- color: {
5092
- base: "gray.90",
5093
- _dark: "gray.0"
5094
- },
5533
+ lineHeight: "default",
5534
+ fontFamily: "body",
5535
+ bg: "bg.input",
5536
+ color: "text",
5537
+ transitionDuration: "fast",
5538
+ transitionProperty: "background, border-color, color, outline-color",
5539
+ transitionTimingFunction: "default",
5095
5540
  _placeholder: {
5096
- color: {
5097
- base: "gray.50",
5098
- _dark: "gray.40"
5099
- }
5541
+ color: "text.subtlest"
5100
5542
  },
5101
- _disabled: {
5102
- opacity: 0.4
5543
+ _hover: {
5544
+ bg: "bg.input.hovered"
5103
5545
  },
5104
5546
  _focus: {
5105
- outlineColor: { base: "gray.90", _dark: "gray.0" },
5106
- borderColor: { base: "gray.90", _dark: "gray.0" }
5547
+ bg: "bg.input.pressed",
5548
+ borderColor: "border.focused",
5549
+ outlineColor: "border.focused"
5550
+ },
5551
+ _disabled: {
5552
+ bg: "bg.disabled",
5553
+ borderColor: "border.disabled",
5554
+ color: "text.disabled"
5107
5555
  },
5108
5556
  _error: {
5109
5557
  display: "inline-grid",
5110
- borderColor: "error.default",
5558
+ bg: "bg.danger",
5559
+ borderColor: "border.danger",
5560
+ color: "text.danger",
5561
+ _hover: {
5562
+ bg: "bg.danger.hovered",
5563
+ borderColor: "border.danger"
5564
+ },
5111
5565
  _focus: {
5112
- borderColor: { base: "error.default", _dark: "error.default" },
5113
- outlineColor: { base: "error.default", _dark: "error.default" }
5566
+ bg: "bg.danger",
5567
+ borderColor: "border.danger",
5568
+ outlineColor: "border.danger"
5114
5569
  }
5115
5570
  }
5116
5571
  };
@@ -5124,7 +5579,7 @@ const textinputRecipe = defineRecipe({
5124
5579
  }
5125
5580
  });
5126
5581
  const cardBase = {
5127
- bg: { base: "gray.0", _dark: "gray.80" },
5582
+ bg: { base: "gray.10", _dark: "gray.80" },
5128
5583
  borderRadius: "4",
5129
5584
  outlineWidth: "1",
5130
5585
  outlineStyle: "solid",
@@ -5150,8 +5605,8 @@ const cardVariant = {
5150
5605
  _focusVisible: {
5151
5606
  boxShadow: "none",
5152
5607
  borderWidth: "1",
5153
- outlineColor: { base: "gray.90", _dark: "gray.0" },
5154
- borderColor: { base: "gray.90", _dark: "gray.0" }
5608
+ outlineColor: { base: "gray.90", _dark: "gray.10" },
5609
+ borderColor: { base: "gray.90", _dark: "gray.10" }
5155
5610
  },
5156
5611
  _disabled: {
5157
5612
  opacity: "0.4",
@@ -5168,10 +5623,10 @@ const cardVariant = {
5168
5623
  borderStyle: "solid",
5169
5624
  borderColor: { base: "gray.10", _dark: "gray.70" },
5170
5625
  _hover: {
5171
- borderColor: { base: "gray.30", _dark: "gray.50" }
5626
+ borderColor: { base: "gray.30", _dark: "gray.100" }
5172
5627
  },
5173
5628
  _active: {
5174
- borderColor: { base: "gray.50", _dark: "gray.30" },
5629
+ borderColor: { base: "gray.100", _dark: "gray.30" },
5175
5630
  _grabbed: {
5176
5631
  boxShadow: "high",
5177
5632
  cursor: "grabbing"
@@ -5179,8 +5634,8 @@ const cardVariant = {
5179
5634
  },
5180
5635
  _focusVisible: {
5181
5636
  boxShadow: "none",
5182
- outlineColor: { base: "gray.90", _dark: "gray.0" },
5183
- borderColor: { base: "gray.90", _dark: "gray.0" }
5637
+ outlineColor: { base: "gray.90", _dark: "gray.10" },
5638
+ borderColor: { base: "gray.90", _dark: "gray.10" }
5184
5639
  },
5185
5640
  _disabled: {
5186
5641
  opacity: "0.4",
@@ -5217,7 +5672,7 @@ const BreadcrumbsBase = {
5217
5672
  }
5218
5673
  },
5219
5674
  "& p": {
5220
- color: { base: "gray.90", _dark: "gray.0" }
5675
+ color: { base: "gray.90", _dark: "gray.10" }
5221
5676
  },
5222
5677
  "& span": {
5223
5678
  mx: "6",
@@ -5234,35 +5689,33 @@ const tagBase = {
5234
5689
  py: "0",
5235
5690
  borderRadius: "2",
5236
5691
  gap: "1",
5237
- // h: '20',
5692
+ h: "20",
5238
5693
  px: "4",
5694
+ fontFamily: "sans",
5239
5695
  fontSize: "14",
5240
- fontWeight: "500"
5696
+ fontWeight: "500",
5697
+ whiteSpace: "nowrap",
5698
+ width: "fit-content"
5241
5699
  // lineHeight: 'none',
5242
5700
  };
5243
5701
  const tagVariant = {
5244
- variant: {
5702
+ appearance: {
5245
5703
  default: {},
5246
5704
  bold: {}
5247
5705
  },
5248
5706
  hue: {
5249
- slate: {},
5250
- tan: {},
5707
+ gray: {},
5251
5708
  red: {},
5252
- tomato: {},
5253
5709
  orange: {},
5254
5710
  yellow: {},
5711
+ lime: {},
5255
5712
  green: {},
5256
- grass: {},
5257
- mint: {},
5258
- cyan: {},
5713
+ teal: {},
5259
5714
  blue: {},
5260
5715
  indigo: {},
5261
5716
  purple: {},
5262
- violet: {},
5263
- pink: {},
5264
- rose: {},
5265
- magenta: {}
5717
+ magenta: {},
5718
+ tan: {}
5266
5719
  },
5267
5720
  iconPosition: {
5268
5721
  left: {
@@ -5289,285 +5742,484 @@ const tagRecipe = defineRecipe({
5289
5742
  base: tagBase,
5290
5743
  variants: tagVariant,
5291
5744
  defaultVariants: {
5292
- variant: "default",
5293
- hue: "slate",
5745
+ appearance: "default",
5746
+ hue: "gray",
5294
5747
  iconPosition: "left",
5295
5748
  hasIcon: false
5296
5749
  },
5297
5750
  compoundVariants: [
5298
5751
  {
5299
- hue: "slate",
5300
- variant: "default",
5301
- css: {
5302
- color: { base: "gray.70", _dark: "gray.20" },
5303
- bg: { base: "gray.10", _dark: "gray.70" }
5304
- }
5305
- },
5306
- {
5307
- hue: "slate",
5308
- variant: "bold",
5309
- css: {
5310
- color: { base: "gray.0", _dark: "gray.80" },
5311
- bg: { base: "gray.50", _dark: "gray.20" }
5312
- }
5313
- },
5314
- {
5315
- hue: "tan",
5316
- variant: "default",
5752
+ hue: "gray",
5753
+ appearance: "default",
5317
5754
  css: {
5318
- color: { base: "tan.70", _dark: "tan.20" },
5319
- bg: { base: "tan.10", _dark: "tan.70" }
5755
+ color: "text.subtle",
5756
+ bg: "bg.neutral"
5320
5757
  }
5321
5758
  },
5322
5759
  {
5323
- hue: "tan",
5324
- variant: "bold",
5760
+ hue: "gray",
5761
+ appearance: "bold",
5325
5762
  css: {
5326
- color: { base: "gray.0", _dark: "tan.80" },
5327
- bg: { base: "tan.50", _dark: "tan.20" }
5763
+ color: "text.inverse",
5764
+ bg: "bg.neutral.boldest"
5328
5765
  }
5329
5766
  },
5330
5767
  {
5331
5768
  hue: "red",
5332
- variant: "default",
5769
+ appearance: "default",
5333
5770
  css: {
5334
- color: { base: "red.70", _dark: "red.10" },
5335
- bg: { base: "red.10", _dark: "red.70" }
5771
+ color: { base: "red.70", _dark: "red.20" },
5772
+ bg: { base: "red.20", _dark: "red.100" }
5336
5773
  }
5337
5774
  },
5338
5775
  {
5339
5776
  hue: "red",
5340
- variant: "bold",
5777
+ appearance: "bold",
5341
5778
  css: {
5342
- color: { base: "gray.0", _dark: "red.80" },
5343
- bg: { base: "red.50", _dark: "red.20" }
5779
+ color: { base: "red.10", _dark: "red.100" },
5780
+ bg: { base: "red.60", _dark: "red.40" }
5344
5781
  }
5345
5782
  },
5346
5783
  {
5347
- hue: "tomato",
5348
- variant: "default",
5784
+ hue: "orange",
5785
+ appearance: "default",
5349
5786
  css: {
5350
- color: { base: "tomato.70", _dark: "tomato.20" },
5351
- bg: { base: "tomato.10", _dark: "tomato.70" }
5787
+ color: { base: "orange.70", _dark: "orange.20" },
5788
+ bg: { base: "orange.20", _dark: "orange.100" }
5352
5789
  }
5353
5790
  },
5354
5791
  {
5355
- hue: "tomato",
5356
- variant: "bold",
5792
+ hue: "orange",
5793
+ appearance: "bold",
5357
5794
  css: {
5358
- color: { base: "gray.0", _dark: "tomato.80" },
5359
- bg: { base: "tomato.50", _dark: "tomato.20" }
5795
+ color: { base: "orange.10", _dark: "orange.100" },
5796
+ bg: { base: "orange.60", _dark: "orange.50" }
5360
5797
  }
5361
5798
  },
5362
5799
  {
5363
- hue: "orange",
5364
- variant: "default",
5800
+ hue: "yellow",
5801
+ appearance: "default",
5365
5802
  css: {
5366
- color: { base: "orange.70", _dark: "orange.20" },
5367
- bg: { base: "orange.10", _dark: "orange.70" }
5803
+ color: { base: "yellow.80", _dark: "yellow.50" },
5804
+ bg: { base: "yellow.20", _dark: "yellow.90" }
5368
5805
  }
5369
5806
  },
5370
5807
  {
5371
- hue: "orange",
5372
- variant: "bold",
5808
+ hue: "yellow",
5809
+ appearance: "bold",
5373
5810
  css: {
5374
- color: { base: "orange.5", _dark: "orange.80" },
5375
- bg: { base: "orange.60", _dark: "orange.20" }
5811
+ color: { base: "yellow.100", _dark: "yellow.100" },
5812
+ bg: { base: "yellow.40", _dark: "yellow.60" }
5376
5813
  }
5377
5814
  },
5378
5815
  {
5379
- hue: "yellow",
5380
- variant: "default",
5816
+ hue: "lime",
5817
+ appearance: "default",
5381
5818
  css: {
5382
- color: { base: "yellow.60", _dark: "yellow.10" },
5383
- bg: { base: "yellow.10", _dark: "yellow.60" }
5819
+ color: { base: "lime.70", _dark: "lime.20" },
5820
+ bg: { base: "lime.20", _dark: "lime.90" }
5384
5821
  }
5385
5822
  },
5386
5823
  {
5387
- hue: "yellow",
5388
- variant: "bold",
5824
+ hue: "lime",
5825
+ appearance: "bold",
5389
5826
  css: {
5390
- color: { base: "yellow.70", _dark: "yellow.90" },
5391
- bg: { base: "yellow.20", _dark: "yellow.20" }
5827
+ color: { base: "lime.10", _dark: "lime.100" },
5828
+ bg: { base: "lime.60", _dark: "lime.40" }
5392
5829
  }
5393
5830
  },
5394
5831
  {
5395
5832
  hue: "green",
5396
- variant: "default",
5833
+ appearance: "default",
5397
5834
  css: {
5398
5835
  color: { base: "green.70", _dark: "green.20" },
5399
- bg: { base: "green.10", _dark: "green.70" }
5836
+ bg: { base: "green.20", _dark: "green.90" }
5400
5837
  }
5401
5838
  },
5402
5839
  {
5403
5840
  hue: "green",
5404
- variant: "bold",
5841
+ appearance: "bold",
5405
5842
  css: {
5406
- color: { base: "gray.0", _dark: "green.80" },
5407
- bg: { base: "green.50", _dark: "green.20" }
5843
+ color: { base: "gray.10", _dark: "green.100" },
5844
+ bg: { base: "green.70", _dark: "green.40" }
5408
5845
  }
5409
5846
  },
5410
5847
  {
5411
- hue: "grass",
5412
- variant: "default",
5848
+ hue: "teal",
5849
+ appearance: "default",
5413
5850
  css: {
5414
- color: { base: "grass.70", _dark: "grass.10" },
5415
- bg: { base: "grass.10", _dark: "grass.70" }
5851
+ color: { base: "teal.80", _dark: "teal.20" },
5852
+ bg: { base: "teal.20", _dark: "teal.90" }
5416
5853
  }
5417
5854
  },
5418
5855
  {
5419
- hue: "grass",
5420
- variant: "bold",
5856
+ hue: "teal",
5857
+ appearance: "bold",
5421
5858
  css: {
5422
- color: { base: "gray.0", _dark: "grass.80" },
5423
- bg: { base: "grass.60", _dark: "grass.20" }
5859
+ color: { base: "teal.10", _dark: "teal.100" },
5860
+ bg: { base: "teal.60", _dark: "teal.50" }
5424
5861
  }
5425
5862
  },
5426
5863
  {
5427
- hue: "mint",
5428
- variant: "default",
5864
+ hue: "blue",
5865
+ appearance: "default",
5429
5866
  css: {
5430
- color: { base: "mint.80", _dark: "mint.30" },
5431
- bg: { base: "mint.10", _dark: "mint.80" }
5867
+ color: { base: "blue.70", _dark: "blue.20" },
5868
+ bg: { base: "blue.20", _dark: "blue.90" }
5432
5869
  }
5433
5870
  },
5434
5871
  {
5435
- hue: "mint",
5436
- variant: "bold",
5872
+ hue: "blue",
5873
+ appearance: "bold",
5437
5874
  css: {
5438
- color: { base: "gray.0", _dark: "mint.80" },
5439
- bg: { base: "mint.70", _dark: "mint.20" }
5875
+ color: { base: "blue.10", _dark: "blue.10" },
5876
+ bg: { base: "blue.50", _dark: "blue.70" }
5440
5877
  }
5441
5878
  },
5442
5879
  {
5443
- hue: "cyan",
5444
- variant: "default",
5880
+ hue: "indigo",
5881
+ appearance: "default",
5445
5882
  css: {
5446
- color: { base: "cyan.70", _dark: "cyan.20" },
5447
- bg: { base: "cyan.10", _dark: "cyan.70" }
5883
+ color: { base: "indigo.70", _dark: "indigo.20" },
5884
+ bg: { base: "indigo.20", _dark: "indigo.90" }
5448
5885
  }
5449
5886
  },
5450
5887
  {
5451
- hue: "cyan",
5452
- variant: "bold",
5888
+ hue: "indigo",
5889
+ appearance: "bold",
5453
5890
  css: {
5454
- color: { base: "cyan.5", _dark: "cyan.80" },
5455
- bg: { base: "cyan.60", _dark: "cyan.30" }
5891
+ color: { base: "indigo.10", _dark: "indigo.10" },
5892
+ bg: { base: "indigo.60", _dark: "indigo.70" }
5456
5893
  }
5457
5894
  },
5458
5895
  {
5459
- hue: "blue",
5460
- variant: "default",
5896
+ hue: "purple",
5897
+ appearance: "default",
5461
5898
  css: {
5462
- color: { base: "blue.70", _dark: "blue.20" },
5463
- bg: { base: "blue.10", _dark: "blue.70" }
5899
+ color: { base: "purple.70", _dark: "purple.20" },
5900
+ bg: { base: "purple.20", _dark: "purple.90" }
5464
5901
  }
5465
5902
  },
5466
5903
  {
5467
- hue: "blue",
5468
- variant: "bold",
5904
+ hue: "purple",
5905
+ appearance: "bold",
5469
5906
  css: {
5470
- color: { base: "gray.0", _dark: "blue.90" },
5471
- bg: { base: "blue.50", _dark: "blue.40" }
5907
+ color: { base: "purple.10", _dark: "purple.10" },
5908
+ bg: { base: "purple.60", _dark: "purple.80" }
5472
5909
  }
5473
5910
  },
5474
5911
  {
5475
- hue: "indigo",
5476
- variant: "default",
5912
+ hue: "magenta",
5913
+ appearance: "default",
5477
5914
  css: {
5478
- color: { base: "indigo.70", _dark: "indigo.10" },
5479
- bg: { base: "indigo.10", _dark: "indigo.70" }
5915
+ color: { base: "magenta.80", _dark: "magenta.20" },
5916
+ bg: { base: "magenta.20", _dark: "magenta.90" }
5480
5917
  }
5481
5918
  },
5482
5919
  {
5483
- hue: "indigo",
5484
- variant: "bold",
5920
+ hue: "magenta",
5921
+ appearance: "bold",
5485
5922
  css: {
5486
- color: { base: "indigo.5", _dark: "indigo.80" },
5487
- bg: { base: "indigo.50", _dark: "indigo.20" }
5923
+ color: { base: "magenta.10", _dark: "magenta.10" },
5924
+ bg: { base: "magenta.70", _dark: "magenta.70" }
5488
5925
  }
5489
5926
  },
5490
5927
  {
5491
- hue: "purple",
5492
- variant: "default",
5928
+ hue: "tan",
5929
+ appearance: "default",
5493
5930
  css: {
5494
- color: { base: "purple.70", _dark: "purple.20" },
5495
- bg: { base: "purple.10", _dark: "purple.70" }
5931
+ color: { base: "tan.70", _dark: "tan.20" },
5932
+ bg: { base: "tan.20", _dark: "tan.80" }
5496
5933
  }
5497
5934
  },
5498
5935
  {
5499
- hue: "purple",
5500
- variant: "bold",
5936
+ hue: "tan",
5937
+ appearance: "bold",
5501
5938
  css: {
5502
- color: { base: "gray.0", _dark: "purple.80" },
5503
- bg: { base: "purple.50", _dark: "purple.20" }
5939
+ color: { base: "gray.10", _dark: "tan.90" },
5940
+ bg: { base: "tan.60", _dark: "tan.40" }
5504
5941
  }
5942
+ }
5943
+ ]
5944
+ });
5945
+ const baseButtonStyles = {
5946
+ container: {
5947
+ position: "relative",
5948
+ appearance: "none",
5949
+ display: "flex",
5950
+ alignItems: "center",
5951
+ gap: 4,
5952
+ minWidth: 0,
5953
+ transitionDuration: "fast",
5954
+ transitionProperty: "background, border-color, color, box-shadow",
5955
+ transitionTimingFunction: "default",
5956
+ userSelect: "none",
5957
+ verticalAlign: "middle",
5958
+ fontFamily: "sans",
5959
+ fontWeight: "medium",
5960
+ fontSize: 16,
5961
+ lineHeight: "default",
5962
+ borderWidth: 1,
5963
+ borderStyle: "solid",
5964
+ borderColor: "transparent",
5965
+ borderRadius: 4,
5966
+ outlineWidth: 2,
5967
+ outlineStyle: "solid",
5968
+ outlineColor: "transparent",
5969
+ // outlineOffset: 1,
5970
+ textDecoration: "none",
5971
+ whiteSpace: "nowrap",
5972
+ cursor: "pointer",
5973
+ _focusVisible: {
5974
+ // borderColor: 'border.focused',
5975
+ outlineColor: "border.focused"
5505
5976
  },
5506
- {
5507
- hue: "violet",
5508
- variant: "default",
5509
- css: {
5510
- color: { base: "violet.70", _dark: "violet.10" },
5511
- bg: { base: "violet.10", _dark: "violet.70" }
5977
+ _disabled: {
5978
+ cursor: "not-allowed",
5979
+ bg: "bg.disabled",
5980
+ color: "text.disabled",
5981
+ borderColor: "border.disabled",
5982
+ icon: { fill: "icon.disabled" },
5983
+ _hover: {
5984
+ bg: "bg.disabled",
5985
+ color: "text.disabled",
5986
+ borderColor: "border.disabled",
5987
+ icon: { fill: "icon.disabled" }
5512
5988
  }
5513
5989
  },
5514
- {
5515
- hue: "violet",
5516
- variant: "bold",
5517
- css: {
5518
- color: { base: "violet.5", _dark: "violet.80" },
5519
- bg: { base: "violet.60", _dark: "violet.20" }
5990
+ _selected: {
5991
+ bg: "bg.selected",
5992
+ color: "text.selected",
5993
+ borderColor: "transparent",
5994
+ icon: { fill: "icon.selected" }
5995
+ }
5996
+ },
5997
+ icon: {
5998
+ aspectRatio: "square",
5999
+ transitionDuration: "fast",
6000
+ transitionProperty: "fill",
6001
+ transitionTimingFunction: "default"
6002
+ }
6003
+ };
6004
+ const buttonVariants = {
6005
+ appearance: {
6006
+ default: {
6007
+ container: {
6008
+ bg: "bg.neutral",
6009
+ color: "text",
6010
+ icon: { fill: "icon.decorative" },
6011
+ _hover: {
6012
+ bg: "bg.neutral.hovered",
6013
+ icon: { fill: "icon.decorative.hovered" }
6014
+ },
6015
+ _active: {
6016
+ bg: "bg.neutral.pressed",
6017
+ icon: { fill: "icon.decorative.hovered" }
6018
+ }
6019
+ }
6020
+ },
6021
+ primary: {
6022
+ container: {
6023
+ bg: "bg.brand.boldest",
6024
+ color: "text.inverse",
6025
+ icon: { fill: "icon.decorative.inverse" },
6026
+ _hover: {
6027
+ bg: "bg.brand.boldest.hovered",
6028
+ icon: { fill: "icon.inverse" }
6029
+ },
6030
+ _active: {
6031
+ bg: "bg.brand.boldest.pressed",
6032
+ icon: { fill: "icon.inverse" }
6033
+ }
6034
+ }
6035
+ },
6036
+ subtle: {
6037
+ container: {
6038
+ bg: "bg.neutral.subtle",
6039
+ color: "text.subtle",
6040
+ icon: { fill: "icon.decorative" },
6041
+ _hover: {
6042
+ bg: "bg.neutral.subtle.hovered",
6043
+ color: "text",
6044
+ icon: { fill: "icon.decorative.hovered" }
6045
+ },
6046
+ _active: {
6047
+ bg: "bg.neutral.subtle.pressed",
6048
+ color: "text",
6049
+ icon: { fill: "icon.decorative.hovered" }
6050
+ }
6051
+ }
6052
+ },
6053
+ hollow: {
6054
+ container: {
6055
+ bg: "bg.neutral.subtle",
6056
+ color: "text.subtle",
6057
+ borderColor: "border",
6058
+ icon: { fill: "icon.decorative" },
6059
+ _hover: {
6060
+ bg: "bg.neutral.subtle.hovered",
6061
+ color: "text",
6062
+ borderColor: "border",
6063
+ icon: { fill: "icon.decorative.hovered" }
6064
+ },
6065
+ _active: {
6066
+ bg: "bg.neutral.subtle.pressed",
6067
+ color: "text",
6068
+ borderColor: "border",
6069
+ icon: { fill: "icon.decorative.hovered" }
6070
+ },
6071
+ _disabled: {
6072
+ borderColor: "border.disabled",
6073
+ _hover: {
6074
+ borderColor: "border.disabled"
6075
+ }
6076
+ }
6077
+ }
6078
+ }
6079
+ }
6080
+ };
6081
+ const buttonRecipe$1 = defineSlotRecipe({
6082
+ className: "button",
6083
+ jsx: ["Button"],
6084
+ slots: ["container", "icon"],
6085
+ base: baseButtonStyles,
6086
+ variants: {
6087
+ ...buttonVariants,
6088
+ size: {
6089
+ default: {
6090
+ container: {
6091
+ fontSize: "16",
6092
+ py: "3",
6093
+ px: "12"
6094
+ },
6095
+ icon: {
6096
+ w: "24",
6097
+ h: "24"
6098
+ }
6099
+ },
6100
+ large: {
6101
+ container: {
6102
+ fontSize: "16",
6103
+ py: "7",
6104
+ px: "14"
6105
+ },
6106
+ icon: {
6107
+ w: "24",
6108
+ h: "24"
6109
+ }
6110
+ },
6111
+ small: {
6112
+ container: {
6113
+ fontSize: "14",
6114
+ py: "1",
6115
+ px: "8"
6116
+ },
6117
+ icon: {
6118
+ w: "22",
6119
+ h: "22"
6120
+ }
5520
6121
  }
5521
6122
  },
6123
+ iconBefore: {
6124
+ true: { container: {} }
6125
+ },
6126
+ iconAfter: {
6127
+ true: { container: {} }
6128
+ }
6129
+ },
6130
+ compoundVariants: [
5522
6131
  {
5523
- hue: "pink",
5524
- variant: "default",
6132
+ size: "default",
6133
+ iconBefore: true,
5525
6134
  css: {
5526
- color: { base: "pink.70", _dark: "pink.10" },
5527
- bg: { base: "pink.10", _dark: "pink.70" }
6135
+ container: { ps: "3" }
5528
6136
  }
5529
6137
  },
5530
6138
  {
5531
- hue: "pink",
5532
- variant: "bold",
6139
+ size: "default",
6140
+ iconAfter: true,
5533
6141
  css: {
5534
- color: { base: "pink.5", _dark: "pink.80" },
5535
- bg: { base: "pink.70", _dark: "pink.20" }
6142
+ container: { pe: "3" }
5536
6143
  }
5537
6144
  },
5538
6145
  {
5539
- hue: "rose",
5540
- variant: "default",
6146
+ size: "small",
6147
+ iconBefore: true,
5541
6148
  css: {
5542
- color: { base: "rose.70", _dark: "rose.10" },
5543
- bg: { base: "rose.10", _dark: "rose.70" }
6149
+ container: { ps: "2" }
5544
6150
  }
5545
6151
  },
5546
6152
  {
5547
- hue: "rose",
5548
- variant: "bold",
6153
+ size: "small",
6154
+ iconAfter: true,
5549
6155
  css: {
5550
- color: { base: "rose.5", _dark: "rose.80" },
5551
- bg: { base: "rose.60", _dark: "rose.20" }
6156
+ container: { pe: "2" }
5552
6157
  }
5553
6158
  },
5554
6159
  {
5555
- hue: "magenta",
5556
- variant: "default",
6160
+ size: "large",
6161
+ iconBefore: true,
5557
6162
  css: {
5558
- color: { base: "magenta.70", _dark: "magenta.10" },
5559
- bg: { base: "magenta.10", _dark: "magenta.70" }
6163
+ container: { ps: "5" }
5560
6164
  }
5561
6165
  },
5562
6166
  {
5563
- hue: "magenta",
5564
- variant: "bold",
6167
+ size: "large",
6168
+ iconAfter: true,
5565
6169
  css: {
5566
- color: { base: "magenta.5", _dark: "magenta.80" },
5567
- bg: { base: "magenta.60", _dark: "magenta.20" }
6170
+ container: { pe: "5" }
5568
6171
  }
5569
6172
  }
5570
- ]
6173
+ ],
6174
+ defaultVariants: {
6175
+ appearance: "default",
6176
+ size: "default"
6177
+ }
6178
+ });
6179
+ const iconButtonRecipe$1 = defineSlotRecipe({
6180
+ className: "iconButton",
6181
+ jsx: ["IconButton"],
6182
+ slots: ["container", "icon"],
6183
+ base: baseButtonStyles,
6184
+ variants: {
6185
+ ...buttonVariants,
6186
+ size: {
6187
+ default: {
6188
+ container: {
6189
+ fontSize: "16",
6190
+ p: "3"
6191
+ },
6192
+ icon: {
6193
+ w: "24",
6194
+ h: "24"
6195
+ }
6196
+ },
6197
+ large: {
6198
+ container: {
6199
+ fontSize: "16",
6200
+ p: "7"
6201
+ },
6202
+ icon: {
6203
+ w: "24",
6204
+ h: "24"
6205
+ }
6206
+ },
6207
+ small: {
6208
+ container: {
6209
+ fontSize: "14",
6210
+ p: "1"
6211
+ },
6212
+ icon: {
6213
+ w: "22",
6214
+ h: "22"
6215
+ }
6216
+ }
6217
+ }
6218
+ },
6219
+ defaultVariants: {
6220
+ appearance: "default",
6221
+ size: "default"
6222
+ }
5571
6223
  });
5572
6224
  const checkboxRecipe$1 = defineSlotRecipe({
5573
6225
  className: "checkbox",
@@ -5581,7 +6233,11 @@ const checkboxRecipe$1 = defineSlotRecipe({
5581
6233
  gap: 4,
5582
6234
  alignItems: "start",
5583
6235
  cursor: "pointer",
5584
- userSelect: "none"
6236
+ userSelect: "none",
6237
+ color: "text",
6238
+ _error: {
6239
+ color: "text.danger"
6240
+ }
5585
6241
  },
5586
6242
  input: {
5587
6243
  position: "absolute",
@@ -5598,7 +6254,7 @@ const checkboxRecipe$1 = defineSlotRecipe({
5598
6254
  _checked: {
5599
6255
  "& ~ [name='checkbox-checked']": {
5600
6256
  display: "inline-grid",
5601
- fill: { base: "slate.90", _dark: "slate.0" }
6257
+ fill: "icon"
5602
6258
  },
5603
6259
  "& ~ [name='checkbox']": {
5604
6260
  display: "none"
@@ -5607,7 +6263,7 @@ const checkboxRecipe$1 = defineSlotRecipe({
5607
6263
  _indeterminate: {
5608
6264
  "& ~ [name='checkbox-indeterminate']": {
5609
6265
  display: "inline-grid",
5610
- fill: { base: "slate.90", _dark: "slate.0" },
6266
+ fill: "icon",
5611
6267
  _disabled: {}
5612
6268
  },
5613
6269
  "& ~ [name='checkbox']": {
@@ -5616,23 +6272,25 @@ const checkboxRecipe$1 = defineSlotRecipe({
5616
6272
  },
5617
6273
  _disabled: {
5618
6274
  "& ~ svg": {
5619
- opacity: 0.4,
5620
- pointerEvents: "none",
5621
- cursor: "none"
6275
+ // fill: 'icon.disabled',
6276
+ pointerEvents: "none"
5622
6277
  },
5623
- display: "inline-grid"
6278
+ display: "inline-grid",
6279
+ _hover: {
6280
+ cursor: "not-allowed"
6281
+ }
5624
6282
  },
5625
6283
  _error: {
5626
6284
  display: "inline-grid",
5627
6285
  "& ~ svg": {
5628
- fill: { base: "error.default", _dark: "error.default" }
6286
+ fill: "icon.danger"
5629
6287
  }
5630
6288
  },
5631
6289
  _focusVisible: {
5632
6290
  "& ~ [name='checkbox-focus']": {
5633
6291
  display: "inline-grid",
5634
6292
  position: "absolute",
5635
- fill: { base: "slate.90", _dark: "slate.1" }
6293
+ fill: "border.focused"
5636
6294
  }
5637
6295
  }
5638
6296
  },
@@ -5643,7 +6301,7 @@ const checkboxRecipe$1 = defineSlotRecipe({
5643
6301
  height: 24,
5644
6302
  "&:is([name='checkbox'])": {
5645
6303
  display: "inline-grid",
5646
- fill: { base: "slate.30", _dark: "slate.20" }
6304
+ fill: "icon.subtlest"
5647
6305
  }
5648
6306
  }
5649
6307
  }
@@ -5677,7 +6335,7 @@ const radioRecipe$1 = defineSlotRecipe({
5677
6335
  _checked: {
5678
6336
  "& ~ [name='radio-checked']": {
5679
6337
  display: "inline-grid",
5680
- fill: { base: "gray.90", _dark: "gray.0" }
6338
+ fill: { base: "gray.90", _dark: "gray.10" }
5681
6339
  },
5682
6340
  "& ~ [name='radio']": {
5683
6341
  display: "none"
@@ -5729,8 +6387,8 @@ const tooltipBase = {
5729
6387
  display: "flex",
5730
6388
  flexDirection: "column",
5731
6389
  gap: "4",
5732
- bg: { base: "gray.90", _dark: "gray.0" },
5733
- color: { base: "gray.0", _dark: "gray.90" },
6390
+ bg: { base: "gray.90", _dark: "gray.10" },
6391
+ color: { base: "gray.10", _dark: "gray.90" },
5734
6392
  py: "8",
5735
6393
  px: "12",
5736
6394
  fontFamily: "body",
@@ -5766,7 +6424,7 @@ const tooltipVariants = {
5766
6424
  top: "100%",
5767
6425
  left: "50%",
5768
6426
  transform: "translate(-50%, -2%)",
5769
- borderTopColor: { base: "gray.90", _dark: "gray.0" }
6427
+ borderTopColor: { base: "gray.90", _dark: "gray.10" }
5770
6428
  }
5771
6429
  }
5772
6430
  },
@@ -5779,7 +6437,7 @@ const tooltipVariants = {
5779
6437
  bottom: "100%",
5780
6438
  left: "50%",
5781
6439
  transform: "translate(-50%, 2%)",
5782
- borderBottomColor: { base: "gray.90", _dark: "gray.0" }
6440
+ borderBottomColor: { base: "gray.90", _dark: "gray.10" }
5783
6441
  }
5784
6442
  }
5785
6443
  },
@@ -5792,7 +6450,7 @@ const tooltipVariants = {
5792
6450
  top: "50%",
5793
6451
  right: "-6%",
5794
6452
  transform: "translate(48%, -50%)",
5795
- borderLeftColor: { base: "gray.90", _dark: "gray.0" }
6453
+ borderLeftColor: { base: "gray.90", _dark: "gray.10" }
5796
6454
  }
5797
6455
  }
5798
6456
  },
@@ -5805,7 +6463,7 @@ const tooltipVariants = {
5805
6463
  top: "50%",
5806
6464
  left: "-6%",
5807
6465
  transform: "translate(-48%, -50%)",
5808
- borderRightColor: { base: "gray.90", _dark: "gray.0" }
6466
+ borderRightColor: { base: "gray.90", _dark: "gray.10" }
5809
6467
  }
5810
6468
  }
5811
6469
  },
@@ -5817,7 +6475,7 @@ const tooltipVariants = {
5817
6475
  top: "100%",
5818
6476
  left: "8",
5819
6477
  transform: "translate(0, -2%)",
5820
- borderTopColor: { base: "gray.90", _dark: "gray.0" }
6478
+ borderTopColor: { base: "gray.90", _dark: "gray.10" }
5821
6479
  }
5822
6480
  }
5823
6481
  },
@@ -5830,7 +6488,7 @@ const tooltipVariants = {
5830
6488
  bottom: "100%",
5831
6489
  left: "8",
5832
6490
  transform: "translate(0%, 2%)",
5833
- borderBottomColor: { base: "gray.90", _dark: "gray.0" }
6491
+ borderBottomColor: { base: "gray.90", _dark: "gray.10" }
5834
6492
  }
5835
6493
  }
5836
6494
  },
@@ -5843,7 +6501,7 @@ const tooltipVariants = {
5843
6501
  top: "8",
5844
6502
  right: "-6%",
5845
6503
  transform: "translate(48%, 0)",
5846
- borderLeftColor: { base: "gray.90", _dark: "gray.0" }
6504
+ borderLeftColor: { base: "gray.90", _dark: "gray.10" }
5847
6505
  }
5848
6506
  }
5849
6507
  },
@@ -5856,7 +6514,7 @@ const tooltipVariants = {
5856
6514
  top: "8",
5857
6515
  left: "-6%",
5858
6516
  transform: "translate(-48%, 0)",
5859
- borderRightColor: { base: "gray.90", _dark: "gray.0" }
6517
+ borderRightColor: { base: "gray.90", _dark: "gray.10" }
5860
6518
  }
5861
6519
  }
5862
6520
  },
@@ -5868,7 +6526,7 @@ const tooltipVariants = {
5868
6526
  top: "100%",
5869
6527
  right: "8",
5870
6528
  transform: "translate(0, -2%)",
5871
- borderTopColor: { base: "gray.90", _dark: "gray.0" }
6529
+ borderTopColor: { base: "gray.90", _dark: "gray.10" }
5872
6530
  }
5873
6531
  }
5874
6532
  },
@@ -5881,7 +6539,7 @@ const tooltipVariants = {
5881
6539
  bottom: "100%",
5882
6540
  right: "8",
5883
6541
  transform: "translate(0%, 2%)",
5884
- borderBottomColor: { base: "gray.90", _dark: "gray.0" }
6542
+ borderBottomColor: { base: "gray.90", _dark: "gray.10" }
5885
6543
  }
5886
6544
  }
5887
6545
  },
@@ -5894,7 +6552,7 @@ const tooltipVariants = {
5894
6552
  bottom: "8",
5895
6553
  right: "-6%",
5896
6554
  transform: "translate(48%, 0)",
5897
- borderLeftColor: { base: "gray.90", _dark: "gray.0" }
6555
+ borderLeftColor: { base: "gray.90", _dark: "gray.10" }
5898
6556
  }
5899
6557
  }
5900
6558
  },
@@ -5907,7 +6565,7 @@ const tooltipVariants = {
5907
6565
  bottom: "8",
5908
6566
  left: "-6%",
5909
6567
  transform: "translate(-48%, 0)",
5910
- borderRightColor: { base: "gray.90", _dark: "gray.0" }
6568
+ borderRightColor: { base: "gray.90", _dark: "gray.10" }
5911
6569
  }
5912
6570
  }
5913
6571
  }
@@ -6035,7 +6693,7 @@ const menuBase = {
6035
6693
  left: "0",
6036
6694
  bottom: "0",
6037
6695
  width: { base: "full", md: "260" },
6038
- bg: { base: "gray.0", _dark: "gray.80" },
6696
+ bg: { base: "gray.10", _dark: "gray.80" },
6039
6697
  py: { base: "12", md: "4" },
6040
6698
  boxShadow: "medium",
6041
6699
  borderRadius: {
@@ -6045,7 +6703,7 @@ const menuBase = {
6045
6703
  borderBottomLeftRadius: { base: "0", md: "4" },
6046
6704
  borderBottomRightRadius: { base: "0", md: "4" },
6047
6705
  "& ~ svg": {
6048
- fill: { base: "gray.90", _dark: "gray.0" },
6706
+ fill: { base: "gray.90", _dark: "gray.10" },
6049
6707
  mr: "auto"
6050
6708
  },
6051
6709
  overflow: "hidden",
@@ -6069,14 +6727,14 @@ const menuBase = {
6069
6727
  w: "full"
6070
6728
  },
6071
6729
  _hover: {
6072
- bg: { base: "gray.2", _dark: "gray.50" },
6730
+ bg: { base: "gray.2", _dark: "gray.100" },
6073
6731
  cursor: "pointer"
6074
6732
  },
6075
6733
  _active: {
6076
6734
  bg: { base: "gray.10", _dark: "gray.100" }
6077
6735
  },
6078
6736
  _focusVisible: {
6079
- outlineColor: { base: "gray.90", _dark: "gray.0" },
6737
+ outlineColor: { base: "gray.90", _dark: "gray.10" },
6080
6738
  outlineOffset: "-2"
6081
6739
  },
6082
6740
  _disabled: {
@@ -6104,7 +6762,7 @@ const menuBase = {
6104
6762
  py: "4",
6105
6763
  pr: "12",
6106
6764
  pl: "4",
6107
- bg: { base: "gray.5", _dark: "gray.60" },
6765
+ bg: { base: "gray.10", _dark: "gray.60" },
6108
6766
  cursor: "pointer"
6109
6767
  },
6110
6768
  multiLevelIcon: { ml: "auto" },
@@ -6166,14 +6824,14 @@ const componentRecipes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.de
6166
6824
  badgeRecipe,
6167
6825
  boxRecipe,
6168
6826
  breadcrumbsRecipe,
6169
- buttonRecipe,
6827
+ buttonRecipe: buttonRecipe$1,
6170
6828
  cardRecipe,
6171
6829
  checkboxInputRecipe,
6172
6830
  checkboxRecipe: checkboxRecipe$1,
6173
6831
  codeRecipe,
6174
6832
  dividerRecipe,
6175
6833
  headingRecipe,
6176
- iconButtonRecipe,
6834
+ iconButtonRecipe: iconButtonRecipe$1,
6177
6835
  labelRecipe,
6178
6836
  linkRecipe,
6179
6837
  menuRecipe: menuRecipe$1,
@@ -6190,6 +6848,8 @@ const componentRecipes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.de
6190
6848
  tooltipRecipe: tooltipRecipe$1
6191
6849
  }, Symbol.toStringTag, { value: "Module" }));
6192
6850
  const {
6851
+ buttonRecipe,
6852
+ iconButtonRecipe,
6193
6853
  checkboxRecipe,
6194
6854
  radioRecipe,
6195
6855
  tooltipRecipe,
@@ -6198,17 +6858,14 @@ const {
6198
6858
  ...regularComponents
6199
6859
  } = componentRecipes;
6200
6860
  const transformedRecipes = Object.fromEntries(
6201
- Object.entries(regularComponents).map(([key, value]) => [
6202
- key.replace(/Recipe$/, ""),
6203
- value
6204
- ])
6861
+ Object.entries(regularComponents).map(([key, value]) => [key.replace(/Recipe$/, ""), value])
6205
6862
  );
6206
6863
  const { box: _box, divider: _divider, ...pandaBasePresetPatterns } = index_default.patterns;
6207
6864
  const pandaBasePresetConditions = index_default.conditions;
6208
6865
  const pandaBasePresetUtilities = index_default.utilities;
6209
6866
  const pandaBasePresetGlobalCss = index_default.globalCss;
6210
6867
  const sizeKeys = Object.keys(sizes);
6211
- const { textStyles, breakpoints, keyframes, ...rawTokens } = tokens;
6868
+ const { breakpoints, keyframes, ...rawTokens } = tokens;
6212
6869
  const theme = {
6213
6870
  tokens: defineTokens({
6214
6871
  ...rawTokens,
@@ -6216,7 +6873,7 @@ const theme = {
6216
6873
  // Map spacing to our size scale for consistent sizing
6217
6874
  }),
6218
6875
  semanticTokens: defineSemanticTokens({
6219
- ...semanticTokens
6876
+ ...semantics
6220
6877
  })
6221
6878
  };
6222
6879
  const okshaunPreset = definePreset$1({
@@ -6236,6 +6893,8 @@ const okshaunPreset = definePreset$1({
6236
6893
  ...transformedRecipes
6237
6894
  },
6238
6895
  slotRecipes: {
6896
+ button: buttonRecipe,
6897
+ iconButton: iconButtonRecipe,
6239
6898
  checkbox: checkboxRecipe,
6240
6899
  radio: radioRecipe,
6241
6900
  tooltip: tooltipRecipe,
@@ -6287,8 +6946,10 @@ const okshaunPreset = definePreset$1({
6287
6946
  ...pandaBasePresetGlobalCss,
6288
6947
  ...globalCss,
6289
6948
  html: {
6290
- "--global-font-heading": "fonts.sans",
6291
- "--global-font-body": "fonts.serif",
6949
+ "--global-font-heading": "fonts.heading",
6950
+ "--global-font-body": "fonts.body",
6951
+ "--global-font-sans": "fonts.sans",
6952
+ "--global-font-serif": "fonts.serif",
6292
6953
  "--global-font-mono": "fonts.mono"
6293
6954
  }
6294
6955
  },