@okshaun/components 0.2.0 → 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 (7) hide show
  1. package/dist/index.d.ts +7 -9
  2. package/dist/index.js +462 -644
  3. package/dist/index.js.map +1 -1
  4. package/dist/panda.buildinfo.json +139 -172
  5. package/dist/preset.js +1721 -1062
  6. package/dist/preset.js.map +1 -1
  7. package/package.json +1 -1
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,173 +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: {
3443
- value: "'Piazzolla Variable', 'Piazzolla', Georgia, 'Times New Roman', Times, serif"
3444
- },
3445
- mono: {
3446
- value: "'IBM Plex Mono', Andale Mono, monaco, Consolas, Lucida Console, monospace"
3447
- }
3448
- };
3449
- const fontWeights = {
3450
- light: { value: "300" },
3451
- normal: { value: "400" },
3452
- medium: { value: "500" },
3453
- bold: { value: "700" },
3454
- black: { value: "900" }
3455
- };
3468
+ });
3456
3469
  const numericSizes = {
3457
3470
  "0": { value: "0" },
3458
3471
  "1": { value: "0.0625rem" },
@@ -3554,19 +3567,41 @@ const breakpoints$1 = {
3554
3567
  xl: "1280px",
3555
3568
  "2xl": "1536px"
3556
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
+ };
3557
3583
  const fontSizes = {
3558
- "12": { value: "{sizes.12}" },
3559
- "14": { value: "{sizes.14}" },
3560
- "16": { value: "{sizes.16}" },
3561
- "20": { value: "{sizes.20}" },
3562
- "24": { value: "{sizes.24}" },
3563
- "32": { value: "{sizes.32}" },
3564
- "40": { value: "{sizes.40}" },
3565
- "48": { value: "{sizes.48}" },
3566
- "64": { value: "{sizes.64}" },
3567
- "72": { value: "{sizes.72}" },
3568
- "80": { value: "{sizes.80}" },
3569
- "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" }
3570
3605
  };
3571
3606
  const lineHeights = {
3572
3607
  none: {
@@ -3588,60 +3623,66 @@ const lineHeights = {
3588
3623
  value: "1em + 0.875rem"
3589
3624
  }
3590
3625
  };
3591
- const radii = {
3592
- "0": { value: "{sizes.0}" },
3593
- "1": { value: "{sizes.1}" },
3594
- "2": { value: "{sizes.2}" },
3595
- "4": { value: "{sizes.4}" },
3596
- "8": { value: "{sizes.8}" },
3597
- "16": { value: "{sizes.16}" },
3598
- "100": { value: "100%" }
3599
- };
3600
- const shadows = {
3601
- low: {
3602
- value: "0px 1px 1px {colors.utility.shadowColor}, 0px 2px 2px {colors.utility.shadowColor}"
3626
+ const letterSpacings = {
3627
+ tighter: {
3628
+ value: "-0.05em"
3603
3629
  },
3604
- medium: {
3605
- 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"
3606
3632
  },
3607
- high: {
3608
- 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"
3609
3635
  },
3610
- inset: {
3611
- value: "inset 0px 2px 1px {colors.utility.shadowColor}, inset 0px 3px 2px {colors.utility.shadowColor}"
3612
- }
3613
- };
3614
- const borderWidths = {
3615
- "0": { value: "{sizes.0}" },
3616
- "1": { value: "{sizes.1}" },
3617
- "2": { value: "{sizes.2}" },
3618
- "4": { value: "{sizes.4}" },
3619
- "8": { value: "{sizes.8}" },
3620
- "16": { value: "{sizes.16}" }
3621
- };
3622
- const borders = {
3623
- none: {
3624
- value: "none"
3636
+ wide: {
3637
+ value: "0.025em"
3638
+ },
3639
+ wider: {
3640
+ value: "0.05em"
3641
+ },
3642
+ widest: {
3643
+ value: "0.1em"
3625
3644
  }
3626
3645
  };
3627
- const aspectRatios = {
3628
- square: {
3629
- value: "1 / 1"
3646
+ const animations = {
3647
+ spin: {
3648
+ value: "spin 1s linear infinite"
3630
3649
  },
3631
- landscape: {
3632
- value: "4 / 3"
3650
+ ping: {
3651
+ value: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite"
3633
3652
  },
3634
- portrait: {
3635
- value: "3 / 4"
3653
+ pulse: {
3654
+ value: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
3636
3655
  },
3637
- wide: {
3638
- 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
+ }
3639
3665
  },
3640
- ultrawide: {
3641
- value: "18 / 5"
3666
+ ping: {
3667
+ "75%, 100%": {
3668
+ transform: "scale(2)",
3669
+ opacity: "0"
3670
+ }
3642
3671
  },
3643
- golden: {
3644
- 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
+ }
3645
3686
  }
3646
3687
  };
3647
3688
  const easings = {
@@ -3684,24 +3725,55 @@ const durations = {
3684
3725
  value: "500ms"
3685
3726
  }
3686
3727
  };
3687
- const letterSpacings = {
3688
- tighter: {
3689
- 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}"
3690
3748
  },
3691
- tight: {
3692
- 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}"
3693
3751
  },
3694
- normal: {
3695
- 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"
3696
3768
  },
3697
3769
  wide: {
3698
- value: "0.025em"
3770
+ value: "16 / 9"
3699
3771
  },
3700
- wider: {
3701
- value: "0.05em"
3772
+ ultrawide: {
3773
+ value: "18 / 5"
3702
3774
  },
3703
- widest: {
3704
- value: "0.1em"
3775
+ golden: {
3776
+ value: "1.618 / 1"
3705
3777
  }
3706
3778
  };
3707
3779
  const blurs = {
@@ -3727,53 +3799,791 @@ const blurs = {
3727
3799
  value: "64px"
3728
3800
  }
3729
3801
  };
3730
- const animations = {
3731
- spin: {
3732
- value: "spin 1s linear infinite"
3733
- },
3734
- ping: {
3735
- value: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite"
3736
- },
3737
- pulse: {
3738
- value: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
3739
- },
3740
- bounce: {
3741
- value: "bounce 1s infinite"
3742
- }
3743
- };
3744
- const keyframes$1 = {
3745
- spin: {
3746
- to: {
3747
- transform: "rotate(360deg)"
3748
- }
3749
- },
3750
- ping: {
3751
- "75%, 100%": {
3752
- transform: "scale(2)",
3753
- opacity: "0"
3754
- }
3755
- },
3756
- pulse: {
3757
- "50%": {
3758
- opacity: ".5"
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}" }
3844
+ },
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
+ }
3759
4258
  }
3760
4259
  },
3761
- bounce: {
3762
- "0%, 100%": {
3763
- transform: "translateY(-25%)",
3764
- animationTimingFunction: "cubic-bezier(0.8,0,1,1)"
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
+ }
3765
4271
  },
3766
- "50%": {
3767
- transform: "none",
3768
- animationTimingFunction: "cubic-bezier(0,0,0.2,1)"
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}" }
3769
4575
  }
3770
4576
  }
3771
- };
4577
+ });
4578
+ const semantics = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
4579
+ __proto__: null,
4580
+ colors
4581
+ }, Symbol.toStringTag, { value: "Module" }));
3772
4582
  const baseHeadingStyles = defineStyles({
3773
4583
  value: {
3774
4584
  fontFamily: "sans",
3775
4585
  fontWeight: "bold",
3776
- color: { base: "gray.90", _dark: "gray.5" },
4586
+ color: { base: "gray.90", _dark: "gray.10" },
3777
4587
  lineHeight: "default"
3778
4588
  }
3779
4589
  });
@@ -3793,7 +4603,7 @@ const baseMonoStyles = defineStyles({
3793
4603
  lineHeight: "default"
3794
4604
  }
3795
4605
  });
3796
- const textStyles$1 = defineTextStyles({
4606
+ const textStyles = defineTextStyles({
3797
4607
  display: {
3798
4608
  lg: {
3799
4609
  value: {
@@ -3899,191 +4709,6 @@ const textStyles$1 = defineTextStyles({
3899
4709
  }
3900
4710
  }
3901
4711
  });
3902
- const tokens = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
3903
- __proto__: null,
3904
- animations,
3905
- aspectRatios,
3906
- blurs,
3907
- borderWidths,
3908
- borders,
3909
- breakpoints: breakpoints$1,
3910
- colors: colors$1,
3911
- containerSizes,
3912
- durations,
3913
- easings,
3914
- fontSizes,
3915
- fontWeights,
3916
- fonts,
3917
- keyframes: keyframes$1,
3918
- letterSpacings,
3919
- lineHeights,
3920
- numericSizes,
3921
- radii,
3922
- shadows,
3923
- sizes,
3924
- textStyles: textStyles$1,
3925
- utilitySizes
3926
- }, Symbol.toStringTag, { value: "Module" }));
3927
- const colors = {
3928
- success: {
3929
- lighter: {
3930
- value: {
3931
- base: "{colors.green.2}",
3932
- _dark: "{colors.green.5}"
3933
- }
3934
- },
3935
- light: {
3936
- value: {
3937
- base: "{colors.green.10}",
3938
- _dark: "{colors.green.20}"
3939
- }
3940
- },
3941
- default: {
3942
- value: {
3943
- base: "{colors.green.40}",
3944
- _dark: "{colors.green.30}"
3945
- }
3946
- },
3947
- dark: {
3948
- value: {
3949
- base: "{colors.green.60}",
3950
- _dark: "{colors.green.60}"
3951
- }
3952
- },
3953
- darker: {
3954
- value: {
3955
- base: "{colors.green.70}",
3956
- _dark: "{colors.green.70}"
3957
- }
3958
- }
3959
- },
3960
- warning: {
3961
- lighter: {
3962
- value: {
3963
- base: "{colors.yellow.2}",
3964
- _dark: "{colors.yellow.2}"
3965
- }
3966
- },
3967
- light: {
3968
- value: {
3969
- base: "{colors.yellow.10}",
3970
- _dark: "{colors.yellow.10}"
3971
- }
3972
- },
3973
- default: {
3974
- value: {
3975
- base: "{colors.yellow.30}",
3976
- _dark: "{colors.yellow.20}"
3977
- }
3978
- },
3979
- dark: {
3980
- value: {
3981
- base: "{colors.yellow.60}",
3982
- _dark: "{colors.yellow.60}"
3983
- }
3984
- },
3985
- darker: {
3986
- value: {
3987
- base: "{colors.yellow.70}",
3988
- _dark: "{colors.yellow.70}"
3989
- }
3990
- }
3991
- },
3992
- error: {
3993
- lighter: {
3994
- value: {
3995
- base: "{colors.red.2}",
3996
- _dark: "{colors.red.5}"
3997
- }
3998
- },
3999
- light: {
4000
- value: {
4001
- base: "{colors.red.10}",
4002
- _dark: "{colors.red.20}"
4003
- }
4004
- },
4005
- default: {
4006
- value: {
4007
- base: "{colors.red.50}",
4008
- _dark: "{colors.red.40}"
4009
- }
4010
- },
4011
- dark: {
4012
- value: {
4013
- base: "{colors.red.60}",
4014
- _dark: "{colors.red.60}"
4015
- }
4016
- },
4017
- darker: {
4018
- value: {
4019
- base: "{colors.red.70}",
4020
- _dark: "{colors.red.70}"
4021
- }
4022
- }
4023
- },
4024
- info: {
4025
- lighter: {
4026
- value: {
4027
- base: "{colors.blue.2}",
4028
- _dark: "{colors.blue.5}"
4029
- }
4030
- },
4031
- light: {
4032
- value: {
4033
- base: "{colors.blue.10}",
4034
- _dark: "{colors.blue.20}"
4035
- }
4036
- },
4037
- default: {
4038
- value: {
4039
- base: "{colors.blue.50}",
4040
- _dark: "{colors.blue.40}"
4041
- }
4042
- },
4043
- dark: {
4044
- value: {
4045
- base: "{colors.blue.60}",
4046
- _dark: "{colors.blue.60}"
4047
- }
4048
- },
4049
- darker: {
4050
- value: {
4051
- base: "{colors.blue.70}",
4052
- _dark: "{colors.blue.70}"
4053
- }
4054
- }
4055
- },
4056
- utility: {
4057
- shadowColor: {
4058
- value: {
4059
- base: "{colors.gray.90/20}",
4060
- _dark: "{colors.gray.100/40}"
4061
- }
4062
- },
4063
- headingColor: {
4064
- value: {
4065
- base: "{colors.gray.90}",
4066
- _dark: "{colors.gray.5}"
4067
- }
4068
- },
4069
- textColor: {
4070
- value: {
4071
- base: "{colors.gray.60}",
4072
- _dark: "{colors.gray.30}"
4073
- }
4074
- },
4075
- borderColor: {
4076
- value: {
4077
- base: "{colors.gray.10}",
4078
- _dark: "{colors.gray.60}"
4079
- }
4080
- }
4081
- }
4082
- };
4083
- const semanticTokens = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
4084
- __proto__: null,
4085
- colors
4086
- }, Symbol.toStringTag, { value: "Module" }));
4087
4712
  const conditions = {
4088
4713
  hover: "&:is(:hover, [data-hover])",
4089
4714
  focus: "&:is(:focus, [data-focus])",
@@ -4142,6 +4767,7 @@ const conditions = {
4142
4767
  required: "&:is(:required, [data-required], [aria-required=true])",
4143
4768
  valid: "&:is(:valid, [data-valid])",
4144
4769
  invalid: "&:is(:invalid, [data-invalid], [aria-invalid=true])",
4770
+ error: "&:is([data-error], [data-error=true])",
4145
4771
  autofill: "&:autofill",
4146
4772
  inRange: "&:is(:in-range, [data-in-range])",
4147
4773
  outOfRange: "&:is(:out-of-range, [data-outside-range])",
@@ -4174,8 +4800,8 @@ const conditions = {
4174
4800
  print: "@media print",
4175
4801
  landscape: "@media (orientation: landscape)",
4176
4802
  portrait: "@media (orientation: portrait)",
4177
- dark: ".dark &, &:is([data-color-mode=dark] *, [data-color-mode=dark])",
4178
- 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] &",
4179
4805
  osDark: "@media (prefers-color-scheme: dark)",
4180
4806
  osLight: "@media (prefers-color-scheme: light)",
4181
4807
  highContrast: "@media (forced-colors: active)",
@@ -4199,7 +4825,7 @@ const globalCss = defineGlobalStyles({
4199
4825
  margin: 0,
4200
4826
  padding: 0,
4201
4827
  _focusVisible: {
4202
- outlineColor: { base: "gray.80", _dark: "gray.5" }
4828
+ borderColor: "border.focused"
4203
4829
  },
4204
4830
  _disabled: {
4205
4831
  opacity: 0.4,
@@ -4215,13 +4841,13 @@ const globalCss = defineGlobalStyles({
4215
4841
  },
4216
4842
  body: {
4217
4843
  fontFamily: "body",
4218
- bg: { base: "gray.0", _dark: "gray.90" },
4219
- color: { base: "gray.60", _dark: "gray.20" },
4844
+ bg: "surface",
4845
+ color: "text.subtlest",
4220
4846
  fontWeight: "normal"
4221
4847
  },
4222
4848
  "h1, h2, h3, h4, h5, h6": {
4223
- color: { base: "gray.90", _dark: "gray.5" },
4224
- fontWeight: "black",
4849
+ color: "text",
4850
+ fontWeight: "bold",
4225
4851
  lineHeight: "calc(1em + 0.5rem)"
4226
4852
  },
4227
4853
  p: {
@@ -4241,7 +4867,7 @@ const globalCss = defineGlobalStyles({
4241
4867
  fontSize: "1em"
4242
4868
  },
4243
4869
  table: {
4244
- borderColor: "currentcolor"
4870
+ borderColor: "border.subtle"
4245
4871
  },
4246
4872
  "button, input, optgroup, select, textarea": {
4247
4873
  fontFamily: "inherit",
@@ -4276,221 +4902,6 @@ const globalCss = defineGlobalStyles({
4276
4902
  display: "list-item"
4277
4903
  }
4278
4904
  });
4279
- const baseButtonStyles = {
4280
- position: "relative",
4281
- appearance: "none",
4282
- minWidth: 0,
4283
- transitionDuration: "fast",
4284
- transitionProperty: "background, border-color, color, box-shadow",
4285
- transitionTimingFunction: "default",
4286
- userSelect: "none",
4287
- verticalAlign: "middle",
4288
- display: "flex",
4289
- alignItems: "center",
4290
- gap: 4,
4291
- fontFamily: "sans",
4292
- fontSize: 16,
4293
- fontWeight: "medium",
4294
- lineHeight: "default",
4295
- borderWidth: 1,
4296
- borderStyle: "solid",
4297
- borderColor: "transparent",
4298
- borderRadius: 4,
4299
- outlineWidth: 2,
4300
- outlineStyle: "solid",
4301
- outlineColor: "transparent",
4302
- outlineOffset: 1,
4303
- textDecoration: "none",
4304
- whiteSpace: "nowrap",
4305
- cursor: "pointer",
4306
- _disabled: {
4307
- opacity: 0.4,
4308
- cursor: "not-allowed"
4309
- },
4310
- _focusVisible: {
4311
- outlineColor: { base: "gray.80", _dark: "gray.5" }
4312
- },
4313
- "& svg": {
4314
- fill: "current"
4315
- }
4316
- };
4317
- const buttonVariants = {
4318
- variant: {
4319
- primary: {
4320
- bg: { base: "gray.90", _dark: "gray.5" },
4321
- color: { base: "gray.5", _dark: "gray.90" },
4322
- _hover: {
4323
- bg: { base: "gray.70", _dark: "gray.20" }
4324
- },
4325
- _active: {
4326
- bg: { base: "gray.100", _dark: "gray.30" },
4327
- borderColor: "transparent"
4328
- },
4329
- _disabled: {
4330
- _hover: {
4331
- bg: { base: "gray.90", _dark: "gray.5" }
4332
- }
4333
- },
4334
- _selected: {
4335
- bg: { base: "gray.5", _dark: "gray.90" },
4336
- color: { base: "gray.90", _dark: "gray.5" },
4337
- borderColor: "transparent"
4338
- }
4339
- },
4340
- standard: {
4341
- bg: { base: "gray.5", _dark: "gray.70" },
4342
- color: { base: "gray.90", _dark: "gray.5" },
4343
- _hover: {
4344
- bg: { base: "gray.10", _dark: "gray.60" }
4345
- },
4346
- _active: {
4347
- bg: { base: "gray.20", _dark: "gray.80" },
4348
- borderColor: "transparent"
4349
- },
4350
- _disabled: {
4351
- _hover: {
4352
- bg: { base: "gray.5", _dark: "gray.70" }
4353
- }
4354
- },
4355
- _selected: {
4356
- bg: { base: "gray.90", _dark: "gray.5" },
4357
- color: { base: "gray.5", _dark: "gray.90" },
4358
- borderColor: "transparent"
4359
- }
4360
- },
4361
- hollow: {
4362
- bg: "transparent",
4363
- borderColor: { base: "gray.30", _dark: "gray.60" },
4364
- color: { base: "gray.90", _dark: "gray.5" },
4365
- _hover: {
4366
- bg: { base: "gray.10", _dark: "gray.60" },
4367
- borderColor: { base: "gray.10", _dark: "gray.60" }
4368
- },
4369
- _active: {
4370
- bg: { base: "gray.20", _dark: "gray.70" },
4371
- borderColor: { base: "gray.20", _dark: "gray.70" }
4372
- },
4373
- _disabled: {
4374
- _hover: {
4375
- bg: "transparent"
4376
- }
4377
- },
4378
- _selected: {
4379
- bg: { base: "gray.90", _dark: "gray.5" },
4380
- color: { base: "gray.5", _dark: "gray.90" },
4381
- borderColor: "transparent"
4382
- }
4383
- },
4384
- ghost: {
4385
- bg: "transparent",
4386
- color: { base: "gray.90", _dark: "gray.5" },
4387
- _hover: {
4388
- bg: { base: "gray.10", _dark: "gray.60" }
4389
- },
4390
- _active: {
4391
- bg: { base: "gray.20", _dark: "gray.70" },
4392
- borderColor: "transparent"
4393
- },
4394
- _disabled: {
4395
- _hover: {
4396
- bg: "transparent"
4397
- }
4398
- },
4399
- _selected: {
4400
- bg: { base: "gray.90", _dark: "gray.5" },
4401
- color: { base: "gray.5", _dark: "gray.90" },
4402
- borderColor: "transparent"
4403
- }
4404
- },
4405
- cta: {
4406
- bg: { base: "blue.50", _dark: "blue.50" },
4407
- color: { base: "gray.5", _dark: "gray.5" },
4408
- _hover: {
4409
- bg: { base: "blue.40", _dark: "blue.40" }
4410
- },
4411
- _active: {
4412
- bg: { base: "blue.60", _dark: "blue.60" },
4413
- borderColor: "transparent"
4414
- },
4415
- _disabled: {
4416
- _hover: {
4417
- bg: { base: "blue.50", _dark: "blue.50" }
4418
- }
4419
- }
4420
- },
4421
- danger: {
4422
- bg: { base: "red.50", _dark: "red.50" },
4423
- color: { base: "gray.0", _dark: "gray.0" },
4424
- _hover: {
4425
- bg: { base: "red.40", _dark: "red.40" }
4426
- },
4427
- _active: {
4428
- bg: { base: "red.60", _dark: "red.60" },
4429
- borderColor: "transparent"
4430
- },
4431
- _disabled: {
4432
- _hover: {
4433
- bg: { base: "red.50", _dark: "red.50" }
4434
- }
4435
- }
4436
- }
4437
- }
4438
- };
4439
- const buttonRecipe = defineRecipe({
4440
- className: "button",
4441
- jsx: ["Button"],
4442
- base: baseButtonStyles,
4443
- variants: {
4444
- ...buttonVariants,
4445
- size: {
4446
- standard: {
4447
- fontSize: "16",
4448
- py: "3",
4449
- px: "12"
4450
- },
4451
- large: {
4452
- fontSize: "16",
4453
- py: "7",
4454
- px: "14"
4455
- },
4456
- small: {
4457
- fontSize: "14",
4458
- py: "1",
4459
- px: "8"
4460
- }
4461
- }
4462
- },
4463
- defaultVariants: {
4464
- variant: "standard",
4465
- size: "standard"
4466
- }
4467
- });
4468
- const iconButtonRecipe = defineRecipe({
4469
- className: "icon-button",
4470
- jsx: ["IconButton"],
4471
- base: baseButtonStyles,
4472
- variants: {
4473
- ...buttonVariants,
4474
- size: {
4475
- standard: {
4476
- fontSize: "16",
4477
- p: "3"
4478
- },
4479
- large: {
4480
- fontSize: "16",
4481
- p: "7"
4482
- },
4483
- small: {
4484
- fontSize: "14",
4485
- p: "1"
4486
- }
4487
- }
4488
- },
4489
- defaultVariants: {
4490
- variant: "standard",
4491
- size: "standard"
4492
- }
4493
- });
4494
4905
  const badgeRecipe = defineRecipe({
4495
4906
  className: "badge",
4496
4907
  jsx: ["Badge"],
@@ -4563,138 +4974,160 @@ const badgeRecipe = defineRecipe({
4563
4974
  }
4564
4975
  }
4565
4976
  });
4566
- const textareaRecipe = defineRecipe({
4567
- className: "textarea",
4568
- jsx: ["Textarea"],
4569
- base: {
4570
- position: "relative",
4571
- display: "inline-grid",
4572
- verticalAlign: "top",
4573
- alignItems: "center",
4574
- padding: "0",
4575
- fontFamily: "sans",
4576
- fontSize: "16",
4577
- fontWeight: "normal",
4578
- lineHeight: "normal",
4579
- color: { base: "gray.90", _osDark: "gray.5" },
4580
- borderRadius: "8",
4581
- // transitionDuration: 'fast',
4582
- // transitionProperty: 'background, border-color, color, box-shadow',
4583
- // transitionTimingFunction: 'default',
4584
- "&::after, & textarea": {
4585
- width: "auto",
4586
- minWidth: "16",
4587
- maxWidth: "full",
4588
- font: "inherit",
4589
- 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",
4590
4987
  px: "8",
4591
- m: "0",
4592
- resize: "none",
4593
- appearance: "none",
4594
- borderWidth: "1",
4595
- borderStyle: "solid",
4596
- borderRadius: "4",
4597
- borderColor: "transparent"
4988
+ minHeight: "48",
4989
+ fontSize: "14"
4598
4990
  },
4599
- _after: {
4600
- content: 'attr(data-value) " "',
4601
- // visibility: 'hidden',
4602
- outline: "1px solid olive",
4603
- whiteSpace: "pre-wrap",
4604
- transform: "translate(4px, 4px)",
4605
- opacity: "0.3"
4606
- },
4607
- "& textarea": {
4608
- // _disabled: {
4609
- // opacity: 0.4,
4610
- // cursor: 'not-allowed',
4611
- // },
4612
- // _invalid: {
4613
- // borderColor: 'red.50',
4614
- // _focus: {
4615
- // borderColor: 'red.50',
4616
- // },
4617
- // },
4618
- // _placeholder: {
4619
- // color: { base: 'gray.50', _osDark: 'gray.60' },
4620
- // opacity: 'full',
4621
- // },
4991
+ large: {
4992
+ py: "7",
4993
+ px: "12",
4994
+ fontSize: "16",
4995
+ minHeight: "80"
4622
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"
4623
5074
  },
4624
- defaultVariants: {
4625
- stacked: true,
4626
- internalLabel: false,
4627
- autoGrow: false
5075
+ _hover: {
5076
+ bg: "bg.input.hovered"
4628
5077
  },
4629
- compoundVariants: [],
4630
- variants: {
4631
- autoGrow: {
4632
- false: {
4633
- width: "full"
4634
- },
4635
- true: {
4636
- width: "fit-content"
4637
- }
4638
- },
4639
- stacked: {
4640
- true: {
4641
- gridTemplateRows: "auto 1fr",
4642
- alignItems: "stretch",
4643
- "&::after, & textarea": {
4644
- gridArea: "2 / 1"
4645
- },
4646
- "& textarea": {
4647
- background: { base: "gray.0", _osDark: "gray.90" },
4648
- borderColor: { base: "gray.40", _osDark: "gray.50" }
4649
- // _hover: {
4650
- // borderColor: { base: 'gray.20', _osDark: 'gray.30' },
4651
- // },
4652
- // _focus: {
4653
- // borderColor: { base: 'gray.90', _osDark: 'gray.5' },
4654
- // },
4655
- }
4656
- },
4657
- false: {
4658
- gridTemplateColumns: "auto 1fr",
4659
- alignItems: "center",
4660
- "& textarea": {
4661
- background: { base: "gray.0", _osDark: "gray.90" },
4662
- borderColor: { base: "green.40", _osDark: "green.50" }
4663
- // _hover: {
4664
- // borderColor: { base: 'gray.20', _osDark: 'gray.30' },
4665
- // },
4666
- // _focus: {
4667
- // borderColor: { base: 'gray.90', _osDark: 'gray.5' },
4668
- // },
4669
- }
4670
- }
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"
4671
5096
  },
4672
- internalLabel: {
4673
- false: {},
4674
- true: {
4675
- // _focusWithin: {
4676
- // outlineWidth: 1,
4677
- // outlineStyle: 'solid',
4678
- // outlineColor: { base: 'gray.90', _osDark: 'gray.5' },
4679
- // // outlineOffset: 2,
4680
- // ml: '-4',
4681
- // },
4682
- }
5097
+ _focus: {
5098
+ bg: "bg.danger",
5099
+ borderColor: "border.danger",
5100
+ outlineColor: "border.danger"
4683
5101
  }
4684
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
+ }
4685
5115
  });
4686
5116
  const textBase = {
4687
5117
  margin: "0",
4688
5118
  lineHeight: "default",
4689
5119
  fontWeight: "normal",
4690
5120
  fontSize: "16",
4691
- color: { base: "gray.70", _dark: "gray.20" }
5121
+ color: "text"
4692
5122
  };
4693
5123
  const textVariants = {
4694
5124
  family: {
5125
+ heading: { fontFamily: "heading" },
5126
+ body: { fontFamily: "body" },
4695
5127
  sans: { fontFamily: "sans" },
4696
5128
  serif: { fontFamily: "serif" },
4697
- mono: { fontFamily: "mono" }
5129
+ mono: { fontFamily: "mono" },
5130
+ inherit: { fontFamily: "inherit" }
4698
5131
  },
4699
5132
  bold: {
4700
5133
  true: {
@@ -4715,7 +5148,7 @@ const textVariants = {
4715
5148
  const headingBase = {
4716
5149
  fontFamily: "heading",
4717
5150
  fontWeight: "black",
4718
- color: { base: "gray.90", _dark: "gray.5" },
5151
+ color: "text.bold",
4719
5152
  lineHeight: "default"
4720
5153
  };
4721
5154
  const headingVariants = {
@@ -4731,16 +5164,20 @@ const linkBase = {
4731
5164
  alignItems: "center",
4732
5165
  fontWeight: "medium",
4733
5166
  gap: "1",
4734
- color: { base: "blue.50", _dark: "blue.40" },
4735
- textDecoration: "none",
5167
+ color: { base: "blue.70", _dark: "blue.40" },
4736
5168
  backgroundImage: "linear-gradient(90deg, transparent 0% 100%)",
4737
5169
  backgroundSize: "100% 1px",
4738
5170
  backgroundRepeat: "no-repeat",
4739
5171
  backgroundPositionY: "100%",
4740
5172
  width: "fit-content",
4741
5173
  cursor: "pointer",
5174
+ textDecoration: "none",
4742
5175
  _hover: {
4743
- 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 &": {
4744
5181
  backgroundImage: "linear-gradient(90deg, currentColor 0% 100%)"
4745
5182
  }
4746
5183
  };
@@ -4776,7 +5213,7 @@ const textRecipe = defineRecipe({
4776
5213
  base: textBase,
4777
5214
  variants: textVariants,
4778
5215
  defaultVariants: {
4779
- family: "sans"
5216
+ family: "inherit"
4780
5217
  }
4781
5218
  });
4782
5219
  const headingRecipe = defineRecipe({
@@ -4794,7 +5231,7 @@ const linkRecipe = defineRecipe({
4794
5231
  base: linkBase,
4795
5232
  variants: linkVariants,
4796
5233
  defaultVariants: {
4797
- family: "sans"
5234
+ family: "inherit"
4798
5235
  }
4799
5236
  });
4800
5237
  const labelRecipe = defineRecipe({
@@ -4803,12 +5240,15 @@ const labelRecipe = defineRecipe({
4803
5240
  base: labelBase,
4804
5241
  variants: labelVariants,
4805
5242
  defaultVariants: {
4806
- family: "sans"
5243
+ family: "inherit"
4807
5244
  }
4808
5245
  });
4809
5246
  const checkboxInputBase = {
4810
5247
  display: "flex",
4811
- alignItems: "start"
5248
+ alignItems: "start",
5249
+ '&[class*="-label"]': {
5250
+ fontSize: "16"
5251
+ }
4812
5252
  };
4813
5253
  const checkboxInputRecipe = defineRecipe({
4814
5254
  className: "checkbox-input",
@@ -4842,7 +5282,7 @@ const toggleBase = {
4842
5282
  w: "40",
4843
5283
  h: "24",
4844
5284
  rounded: "24",
4845
- bg: { base: "gray.0", _dark: "gray.90" },
5285
+ bg: { base: "gray.10", _dark: "gray.90" },
4846
5286
  transitionProperty: "border-color, background-color",
4847
5287
  transitionDuration: "200ms",
4848
5288
  transitionTimingFunction: "ease-in-out",
@@ -4890,8 +5330,8 @@ const toggleBase = {
4890
5330
  transform: "translateX(16px)"
4891
5331
  },
4892
5332
  "& ~ [name='toggle-bg']": {
4893
- bg: { base: "gray.90", _dark: "gray.0" },
4894
- borderColor: { base: "gray.90", _dark: "gray.0" }
5333
+ bg: { base: "gray.90", _dark: "gray.10" },
5334
+ borderColor: { base: "gray.90", _dark: "gray.10" }
4895
5335
  }
4896
5336
  },
4897
5337
  _error: {
@@ -4902,7 +5342,7 @@ const toggleBase = {
4902
5342
  _focusVisible: {
4903
5343
  appearance: "none",
4904
5344
  opacity: 1,
4905
- outlineColor: { base: "gray.80", _dark: "gray.5" },
5345
+ outlineColor: { base: "gray.80", _dark: "gray.10" },
4906
5346
  outlineOffset: 1,
4907
5347
  outlineWidth: 2,
4908
5348
  outlineStyle: "solid",
@@ -5029,7 +5469,7 @@ const preBase = {
5029
5469
  borderWidth: "0",
5030
5470
  borderColor: "gray.60",
5031
5471
  bg: "gray.80",
5032
- color: "gray.5",
5472
+ color: "gray.10",
5033
5473
  px: "16",
5034
5474
  py: "8",
5035
5475
  my: "8",
@@ -5071,48 +5511,61 @@ const textInputVariants = {
5071
5511
  px: 12,
5072
5512
  fontSize: "16"
5073
5513
  }
5074
- },
5075
- autoSize: {
5076
- true: {
5077
- fieldSizing: "content"
5078
- }
5079
5514
  }
5515
+ // autoSize: {
5516
+ // true: {
5517
+ // fieldSizing: 'content',
5518
+ // },
5519
+ // },
5080
5520
  };
5081
5521
  const textInputBase = {
5522
+ display: "inline-grid",
5082
5523
  position: "relative",
5083
5524
  width: "full",
5084
5525
  borderWidth: "1",
5085
- borderColor: "gray.30",
5086
5526
  borderStyle: "solid",
5527
+ borderColor: "border.input",
5087
5528
  borderRadius: "4",
5088
- lineHeight: "default",
5089
- fontFamily: "body",
5090
- outlineWidth: "1",
5529
+ outlineWidth: "2",
5530
+ outlineOffset: "-1",
5091
5531
  outlineStyle: "solid",
5092
5532
  outlineColor: "transparent",
5093
- color: {
5094
- base: "gray.90",
5095
- _dark: "gray.0"
5096
- },
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",
5097
5540
  _placeholder: {
5098
- color: {
5099
- base: "gray.50",
5100
- _dark: "gray.40"
5101
- }
5541
+ color: "text.subtlest"
5102
5542
  },
5103
- _disabled: {
5104
- opacity: 0.4
5543
+ _hover: {
5544
+ bg: "bg.input.hovered"
5105
5545
  },
5106
5546
  _focus: {
5107
- outlineColor: { base: "gray.90", _dark: "gray.0" },
5108
- 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"
5109
5555
  },
5110
5556
  _error: {
5111
5557
  display: "inline-grid",
5112
- 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
+ },
5113
5565
  _focus: {
5114
- borderColor: { base: "error.default", _dark: "error.default" },
5115
- outlineColor: { base: "error.default", _dark: "error.default" }
5566
+ bg: "bg.danger",
5567
+ borderColor: "border.danger",
5568
+ outlineColor: "border.danger"
5116
5569
  }
5117
5570
  }
5118
5571
  };
@@ -5126,7 +5579,7 @@ const textinputRecipe = defineRecipe({
5126
5579
  }
5127
5580
  });
5128
5581
  const cardBase = {
5129
- bg: { base: "gray.0", _dark: "gray.80" },
5582
+ bg: { base: "gray.10", _dark: "gray.80" },
5130
5583
  borderRadius: "4",
5131
5584
  outlineWidth: "1",
5132
5585
  outlineStyle: "solid",
@@ -5152,8 +5605,8 @@ const cardVariant = {
5152
5605
  _focusVisible: {
5153
5606
  boxShadow: "none",
5154
5607
  borderWidth: "1",
5155
- outlineColor: { base: "gray.90", _dark: "gray.0" },
5156
- borderColor: { base: "gray.90", _dark: "gray.0" }
5608
+ outlineColor: { base: "gray.90", _dark: "gray.10" },
5609
+ borderColor: { base: "gray.90", _dark: "gray.10" }
5157
5610
  },
5158
5611
  _disabled: {
5159
5612
  opacity: "0.4",
@@ -5170,10 +5623,10 @@ const cardVariant = {
5170
5623
  borderStyle: "solid",
5171
5624
  borderColor: { base: "gray.10", _dark: "gray.70" },
5172
5625
  _hover: {
5173
- borderColor: { base: "gray.30", _dark: "gray.50" }
5626
+ borderColor: { base: "gray.30", _dark: "gray.100" }
5174
5627
  },
5175
5628
  _active: {
5176
- borderColor: { base: "gray.50", _dark: "gray.30" },
5629
+ borderColor: { base: "gray.100", _dark: "gray.30" },
5177
5630
  _grabbed: {
5178
5631
  boxShadow: "high",
5179
5632
  cursor: "grabbing"
@@ -5181,8 +5634,8 @@ const cardVariant = {
5181
5634
  },
5182
5635
  _focusVisible: {
5183
5636
  boxShadow: "none",
5184
- outlineColor: { base: "gray.90", _dark: "gray.0" },
5185
- borderColor: { base: "gray.90", _dark: "gray.0" }
5637
+ outlineColor: { base: "gray.90", _dark: "gray.10" },
5638
+ borderColor: { base: "gray.90", _dark: "gray.10" }
5186
5639
  },
5187
5640
  _disabled: {
5188
5641
  opacity: "0.4",
@@ -5219,7 +5672,7 @@ const BreadcrumbsBase = {
5219
5672
  }
5220
5673
  },
5221
5674
  "& p": {
5222
- color: { base: "gray.90", _dark: "gray.0" }
5675
+ color: { base: "gray.90", _dark: "gray.10" }
5223
5676
  },
5224
5677
  "& span": {
5225
5678
  mx: "6",
@@ -5236,35 +5689,33 @@ const tagBase = {
5236
5689
  py: "0",
5237
5690
  borderRadius: "2",
5238
5691
  gap: "1",
5239
- // h: '20',
5692
+ h: "20",
5240
5693
  px: "4",
5694
+ fontFamily: "sans",
5241
5695
  fontSize: "14",
5242
- fontWeight: "500"
5696
+ fontWeight: "500",
5697
+ whiteSpace: "nowrap",
5698
+ width: "fit-content"
5243
5699
  // lineHeight: 'none',
5244
5700
  };
5245
5701
  const tagVariant = {
5246
- variant: {
5702
+ appearance: {
5247
5703
  default: {},
5248
5704
  bold: {}
5249
5705
  },
5250
5706
  hue: {
5251
- slate: {},
5252
- tan: {},
5707
+ gray: {},
5253
5708
  red: {},
5254
- tomato: {},
5255
5709
  orange: {},
5256
5710
  yellow: {},
5711
+ lime: {},
5257
5712
  green: {},
5258
- grass: {},
5259
- mint: {},
5260
- cyan: {},
5713
+ teal: {},
5261
5714
  blue: {},
5262
5715
  indigo: {},
5263
5716
  purple: {},
5264
- violet: {},
5265
- pink: {},
5266
- rose: {},
5267
- magenta: {}
5717
+ magenta: {},
5718
+ tan: {}
5268
5719
  },
5269
5720
  iconPosition: {
5270
5721
  left: {
@@ -5291,285 +5742,484 @@ const tagRecipe = defineRecipe({
5291
5742
  base: tagBase,
5292
5743
  variants: tagVariant,
5293
5744
  defaultVariants: {
5294
- variant: "default",
5295
- hue: "slate",
5745
+ appearance: "default",
5746
+ hue: "gray",
5296
5747
  iconPosition: "left",
5297
5748
  hasIcon: false
5298
5749
  },
5299
5750
  compoundVariants: [
5300
5751
  {
5301
- hue: "slate",
5302
- variant: "default",
5303
- css: {
5304
- color: { base: "gray.70", _dark: "gray.20" },
5305
- bg: { base: "gray.10", _dark: "gray.70" }
5306
- }
5307
- },
5308
- {
5309
- hue: "slate",
5310
- variant: "bold",
5311
- css: {
5312
- color: { base: "gray.0", _dark: "gray.80" },
5313
- bg: { base: "gray.50", _dark: "gray.20" }
5314
- }
5315
- },
5316
- {
5317
- hue: "tan",
5318
- variant: "default",
5752
+ hue: "gray",
5753
+ appearance: "default",
5319
5754
  css: {
5320
- color: { base: "tan.70", _dark: "tan.20" },
5321
- bg: { base: "tan.10", _dark: "tan.70" }
5755
+ color: "text.subtle",
5756
+ bg: "bg.neutral"
5322
5757
  }
5323
5758
  },
5324
5759
  {
5325
- hue: "tan",
5326
- variant: "bold",
5760
+ hue: "gray",
5761
+ appearance: "bold",
5327
5762
  css: {
5328
- color: { base: "gray.0", _dark: "tan.80" },
5329
- bg: { base: "tan.50", _dark: "tan.20" }
5763
+ color: "text.inverse",
5764
+ bg: "bg.neutral.boldest"
5330
5765
  }
5331
5766
  },
5332
5767
  {
5333
5768
  hue: "red",
5334
- variant: "default",
5769
+ appearance: "default",
5335
5770
  css: {
5336
- color: { base: "red.70", _dark: "red.10" },
5337
- bg: { base: "red.10", _dark: "red.70" }
5771
+ color: { base: "red.70", _dark: "red.20" },
5772
+ bg: { base: "red.20", _dark: "red.100" }
5338
5773
  }
5339
5774
  },
5340
5775
  {
5341
5776
  hue: "red",
5342
- variant: "bold",
5777
+ appearance: "bold",
5343
5778
  css: {
5344
- color: { base: "gray.0", _dark: "red.80" },
5345
- bg: { base: "red.50", _dark: "red.20" }
5779
+ color: { base: "red.10", _dark: "red.100" },
5780
+ bg: { base: "red.60", _dark: "red.40" }
5346
5781
  }
5347
5782
  },
5348
5783
  {
5349
- hue: "tomato",
5350
- variant: "default",
5784
+ hue: "orange",
5785
+ appearance: "default",
5351
5786
  css: {
5352
- color: { base: "tomato.70", _dark: "tomato.20" },
5353
- bg: { base: "tomato.10", _dark: "tomato.70" }
5787
+ color: { base: "orange.70", _dark: "orange.20" },
5788
+ bg: { base: "orange.20", _dark: "orange.100" }
5354
5789
  }
5355
5790
  },
5356
5791
  {
5357
- hue: "tomato",
5358
- variant: "bold",
5792
+ hue: "orange",
5793
+ appearance: "bold",
5359
5794
  css: {
5360
- color: { base: "gray.0", _dark: "tomato.80" },
5361
- bg: { base: "tomato.50", _dark: "tomato.20" }
5795
+ color: { base: "orange.10", _dark: "orange.100" },
5796
+ bg: { base: "orange.60", _dark: "orange.50" }
5362
5797
  }
5363
5798
  },
5364
5799
  {
5365
- hue: "orange",
5366
- variant: "default",
5800
+ hue: "yellow",
5801
+ appearance: "default",
5367
5802
  css: {
5368
- color: { base: "orange.70", _dark: "orange.20" },
5369
- bg: { base: "orange.10", _dark: "orange.70" }
5803
+ color: { base: "yellow.80", _dark: "yellow.50" },
5804
+ bg: { base: "yellow.20", _dark: "yellow.90" }
5370
5805
  }
5371
5806
  },
5372
5807
  {
5373
- hue: "orange",
5374
- variant: "bold",
5808
+ hue: "yellow",
5809
+ appearance: "bold",
5375
5810
  css: {
5376
- color: { base: "orange.5", _dark: "orange.80" },
5377
- bg: { base: "orange.60", _dark: "orange.20" }
5811
+ color: { base: "yellow.100", _dark: "yellow.100" },
5812
+ bg: { base: "yellow.40", _dark: "yellow.60" }
5378
5813
  }
5379
5814
  },
5380
5815
  {
5381
- hue: "yellow",
5382
- variant: "default",
5816
+ hue: "lime",
5817
+ appearance: "default",
5383
5818
  css: {
5384
- color: { base: "yellow.60", _dark: "yellow.10" },
5385
- bg: { base: "yellow.10", _dark: "yellow.60" }
5819
+ color: { base: "lime.70", _dark: "lime.20" },
5820
+ bg: { base: "lime.20", _dark: "lime.90" }
5386
5821
  }
5387
5822
  },
5388
5823
  {
5389
- hue: "yellow",
5390
- variant: "bold",
5824
+ hue: "lime",
5825
+ appearance: "bold",
5391
5826
  css: {
5392
- color: { base: "yellow.70", _dark: "yellow.90" },
5393
- bg: { base: "yellow.20", _dark: "yellow.20" }
5827
+ color: { base: "lime.10", _dark: "lime.100" },
5828
+ bg: { base: "lime.60", _dark: "lime.40" }
5394
5829
  }
5395
5830
  },
5396
5831
  {
5397
5832
  hue: "green",
5398
- variant: "default",
5833
+ appearance: "default",
5399
5834
  css: {
5400
5835
  color: { base: "green.70", _dark: "green.20" },
5401
- bg: { base: "green.10", _dark: "green.70" }
5836
+ bg: { base: "green.20", _dark: "green.90" }
5402
5837
  }
5403
5838
  },
5404
5839
  {
5405
5840
  hue: "green",
5406
- variant: "bold",
5841
+ appearance: "bold",
5407
5842
  css: {
5408
- color: { base: "gray.0", _dark: "green.80" },
5409
- bg: { base: "green.50", _dark: "green.20" }
5843
+ color: { base: "gray.10", _dark: "green.100" },
5844
+ bg: { base: "green.70", _dark: "green.40" }
5410
5845
  }
5411
5846
  },
5412
5847
  {
5413
- hue: "grass",
5414
- variant: "default",
5848
+ hue: "teal",
5849
+ appearance: "default",
5415
5850
  css: {
5416
- color: { base: "grass.70", _dark: "grass.10" },
5417
- bg: { base: "grass.10", _dark: "grass.70" }
5851
+ color: { base: "teal.80", _dark: "teal.20" },
5852
+ bg: { base: "teal.20", _dark: "teal.90" }
5418
5853
  }
5419
5854
  },
5420
5855
  {
5421
- hue: "grass",
5422
- variant: "bold",
5856
+ hue: "teal",
5857
+ appearance: "bold",
5423
5858
  css: {
5424
- color: { base: "gray.0", _dark: "grass.80" },
5425
- bg: { base: "grass.60", _dark: "grass.20" }
5859
+ color: { base: "teal.10", _dark: "teal.100" },
5860
+ bg: { base: "teal.60", _dark: "teal.50" }
5426
5861
  }
5427
5862
  },
5428
5863
  {
5429
- hue: "mint",
5430
- variant: "default",
5864
+ hue: "blue",
5865
+ appearance: "default",
5431
5866
  css: {
5432
- color: { base: "mint.80", _dark: "mint.30" },
5433
- bg: { base: "mint.10", _dark: "mint.80" }
5867
+ color: { base: "blue.70", _dark: "blue.20" },
5868
+ bg: { base: "blue.20", _dark: "blue.90" }
5434
5869
  }
5435
5870
  },
5436
5871
  {
5437
- hue: "mint",
5438
- variant: "bold",
5872
+ hue: "blue",
5873
+ appearance: "bold",
5439
5874
  css: {
5440
- color: { base: "gray.0", _dark: "mint.80" },
5441
- bg: { base: "mint.70", _dark: "mint.20" }
5875
+ color: { base: "blue.10", _dark: "blue.10" },
5876
+ bg: { base: "blue.50", _dark: "blue.70" }
5442
5877
  }
5443
5878
  },
5444
5879
  {
5445
- hue: "cyan",
5446
- variant: "default",
5880
+ hue: "indigo",
5881
+ appearance: "default",
5447
5882
  css: {
5448
- color: { base: "cyan.70", _dark: "cyan.20" },
5449
- bg: { base: "cyan.10", _dark: "cyan.70" }
5883
+ color: { base: "indigo.70", _dark: "indigo.20" },
5884
+ bg: { base: "indigo.20", _dark: "indigo.90" }
5450
5885
  }
5451
5886
  },
5452
5887
  {
5453
- hue: "cyan",
5454
- variant: "bold",
5888
+ hue: "indigo",
5889
+ appearance: "bold",
5455
5890
  css: {
5456
- color: { base: "cyan.5", _dark: "cyan.80" },
5457
- bg: { base: "cyan.60", _dark: "cyan.30" }
5891
+ color: { base: "indigo.10", _dark: "indigo.10" },
5892
+ bg: { base: "indigo.60", _dark: "indigo.70" }
5458
5893
  }
5459
5894
  },
5460
5895
  {
5461
- hue: "blue",
5462
- variant: "default",
5896
+ hue: "purple",
5897
+ appearance: "default",
5463
5898
  css: {
5464
- color: { base: "blue.70", _dark: "blue.20" },
5465
- bg: { base: "blue.10", _dark: "blue.70" }
5899
+ color: { base: "purple.70", _dark: "purple.20" },
5900
+ bg: { base: "purple.20", _dark: "purple.90" }
5466
5901
  }
5467
5902
  },
5468
5903
  {
5469
- hue: "blue",
5470
- variant: "bold",
5904
+ hue: "purple",
5905
+ appearance: "bold",
5471
5906
  css: {
5472
- color: { base: "gray.0", _dark: "blue.90" },
5473
- bg: { base: "blue.50", _dark: "blue.40" }
5907
+ color: { base: "purple.10", _dark: "purple.10" },
5908
+ bg: { base: "purple.60", _dark: "purple.80" }
5474
5909
  }
5475
5910
  },
5476
5911
  {
5477
- hue: "indigo",
5478
- variant: "default",
5912
+ hue: "magenta",
5913
+ appearance: "default",
5479
5914
  css: {
5480
- color: { base: "indigo.70", _dark: "indigo.10" },
5481
- bg: { base: "indigo.10", _dark: "indigo.70" }
5915
+ color: { base: "magenta.80", _dark: "magenta.20" },
5916
+ bg: { base: "magenta.20", _dark: "magenta.90" }
5482
5917
  }
5483
5918
  },
5484
5919
  {
5485
- hue: "indigo",
5486
- variant: "bold",
5920
+ hue: "magenta",
5921
+ appearance: "bold",
5487
5922
  css: {
5488
- color: { base: "indigo.5", _dark: "indigo.80" },
5489
- bg: { base: "indigo.50", _dark: "indigo.20" }
5923
+ color: { base: "magenta.10", _dark: "magenta.10" },
5924
+ bg: { base: "magenta.70", _dark: "magenta.70" }
5490
5925
  }
5491
5926
  },
5492
5927
  {
5493
- hue: "purple",
5494
- variant: "default",
5928
+ hue: "tan",
5929
+ appearance: "default",
5495
5930
  css: {
5496
- color: { base: "purple.70", _dark: "purple.20" },
5497
- bg: { base: "purple.10", _dark: "purple.70" }
5931
+ color: { base: "tan.70", _dark: "tan.20" },
5932
+ bg: { base: "tan.20", _dark: "tan.80" }
5498
5933
  }
5499
5934
  },
5500
5935
  {
5501
- hue: "purple",
5502
- variant: "bold",
5936
+ hue: "tan",
5937
+ appearance: "bold",
5503
5938
  css: {
5504
- color: { base: "gray.0", _dark: "purple.80" },
5505
- bg: { base: "purple.50", _dark: "purple.20" }
5939
+ color: { base: "gray.10", _dark: "tan.90" },
5940
+ bg: { base: "tan.60", _dark: "tan.40" }
5506
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"
5507
5976
  },
5508
- {
5509
- hue: "violet",
5510
- variant: "default",
5511
- css: {
5512
- color: { base: "violet.70", _dark: "violet.10" },
5513
- 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" }
5514
5988
  }
5515
5989
  },
5516
- {
5517
- hue: "violet",
5518
- variant: "bold",
5519
- css: {
5520
- color: { base: "violet.5", _dark: "violet.80" },
5521
- 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
+ }
5522
6121
  }
5523
6122
  },
6123
+ iconBefore: {
6124
+ true: { container: {} }
6125
+ },
6126
+ iconAfter: {
6127
+ true: { container: {} }
6128
+ }
6129
+ },
6130
+ compoundVariants: [
5524
6131
  {
5525
- hue: "pink",
5526
- variant: "default",
6132
+ size: "default",
6133
+ iconBefore: true,
5527
6134
  css: {
5528
- color: { base: "pink.70", _dark: "pink.10" },
5529
- bg: { base: "pink.10", _dark: "pink.70" }
6135
+ container: { ps: "3" }
5530
6136
  }
5531
6137
  },
5532
6138
  {
5533
- hue: "pink",
5534
- variant: "bold",
6139
+ size: "default",
6140
+ iconAfter: true,
5535
6141
  css: {
5536
- color: { base: "pink.5", _dark: "pink.80" },
5537
- bg: { base: "pink.70", _dark: "pink.20" }
6142
+ container: { pe: "3" }
5538
6143
  }
5539
6144
  },
5540
6145
  {
5541
- hue: "rose",
5542
- variant: "default",
6146
+ size: "small",
6147
+ iconBefore: true,
5543
6148
  css: {
5544
- color: { base: "rose.70", _dark: "rose.10" },
5545
- bg: { base: "rose.10", _dark: "rose.70" }
6149
+ container: { ps: "2" }
5546
6150
  }
5547
6151
  },
5548
6152
  {
5549
- hue: "rose",
5550
- variant: "bold",
6153
+ size: "small",
6154
+ iconAfter: true,
5551
6155
  css: {
5552
- color: { base: "rose.5", _dark: "rose.80" },
5553
- bg: { base: "rose.60", _dark: "rose.20" }
6156
+ container: { pe: "2" }
5554
6157
  }
5555
6158
  },
5556
6159
  {
5557
- hue: "magenta",
5558
- variant: "default",
6160
+ size: "large",
6161
+ iconBefore: true,
5559
6162
  css: {
5560
- color: { base: "magenta.70", _dark: "magenta.10" },
5561
- bg: { base: "magenta.10", _dark: "magenta.70" }
6163
+ container: { ps: "5" }
5562
6164
  }
5563
6165
  },
5564
6166
  {
5565
- hue: "magenta",
5566
- variant: "bold",
6167
+ size: "large",
6168
+ iconAfter: true,
5567
6169
  css: {
5568
- color: { base: "magenta.5", _dark: "magenta.80" },
5569
- bg: { base: "magenta.60", _dark: "magenta.20" }
6170
+ container: { pe: "5" }
5570
6171
  }
5571
6172
  }
5572
- ]
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
+ }
5573
6223
  });
5574
6224
  const checkboxRecipe$1 = defineSlotRecipe({
5575
6225
  className: "checkbox",
@@ -5583,7 +6233,11 @@ const checkboxRecipe$1 = defineSlotRecipe({
5583
6233
  gap: 4,
5584
6234
  alignItems: "start",
5585
6235
  cursor: "pointer",
5586
- userSelect: "none"
6236
+ userSelect: "none",
6237
+ color: "text",
6238
+ _error: {
6239
+ color: "text.danger"
6240
+ }
5587
6241
  },
5588
6242
  input: {
5589
6243
  position: "absolute",
@@ -5600,7 +6254,7 @@ const checkboxRecipe$1 = defineSlotRecipe({
5600
6254
  _checked: {
5601
6255
  "& ~ [name='checkbox-checked']": {
5602
6256
  display: "inline-grid",
5603
- fill: { base: "slate.90", _dark: "slate.0" }
6257
+ fill: "icon"
5604
6258
  },
5605
6259
  "& ~ [name='checkbox']": {
5606
6260
  display: "none"
@@ -5609,7 +6263,7 @@ const checkboxRecipe$1 = defineSlotRecipe({
5609
6263
  _indeterminate: {
5610
6264
  "& ~ [name='checkbox-indeterminate']": {
5611
6265
  display: "inline-grid",
5612
- fill: { base: "slate.90", _dark: "slate.0" },
6266
+ fill: "icon",
5613
6267
  _disabled: {}
5614
6268
  },
5615
6269
  "& ~ [name='checkbox']": {
@@ -5618,23 +6272,25 @@ const checkboxRecipe$1 = defineSlotRecipe({
5618
6272
  },
5619
6273
  _disabled: {
5620
6274
  "& ~ svg": {
5621
- opacity: 0.4,
5622
- pointerEvents: "none",
5623
- cursor: "none"
6275
+ // fill: 'icon.disabled',
6276
+ pointerEvents: "none"
5624
6277
  },
5625
- display: "inline-grid"
6278
+ display: "inline-grid",
6279
+ _hover: {
6280
+ cursor: "not-allowed"
6281
+ }
5626
6282
  },
5627
6283
  _error: {
5628
6284
  display: "inline-grid",
5629
6285
  "& ~ svg": {
5630
- fill: { base: "error.default", _dark: "error.default" }
6286
+ fill: "icon.danger"
5631
6287
  }
5632
6288
  },
5633
6289
  _focusVisible: {
5634
6290
  "& ~ [name='checkbox-focus']": {
5635
6291
  display: "inline-grid",
5636
6292
  position: "absolute",
5637
- fill: { base: "slate.90", _dark: "slate.1" }
6293
+ fill: "border.focused"
5638
6294
  }
5639
6295
  }
5640
6296
  },
@@ -5645,7 +6301,7 @@ const checkboxRecipe$1 = defineSlotRecipe({
5645
6301
  height: 24,
5646
6302
  "&:is([name='checkbox'])": {
5647
6303
  display: "inline-grid",
5648
- fill: { base: "slate.30", _dark: "slate.20" }
6304
+ fill: "icon.subtlest"
5649
6305
  }
5650
6306
  }
5651
6307
  }
@@ -5679,7 +6335,7 @@ const radioRecipe$1 = defineSlotRecipe({
5679
6335
  _checked: {
5680
6336
  "& ~ [name='radio-checked']": {
5681
6337
  display: "inline-grid",
5682
- fill: { base: "gray.90", _dark: "gray.0" }
6338
+ fill: { base: "gray.90", _dark: "gray.10" }
5683
6339
  },
5684
6340
  "& ~ [name='radio']": {
5685
6341
  display: "none"
@@ -5731,8 +6387,8 @@ const tooltipBase = {
5731
6387
  display: "flex",
5732
6388
  flexDirection: "column",
5733
6389
  gap: "4",
5734
- bg: { base: "gray.90", _dark: "gray.0" },
5735
- color: { base: "gray.0", _dark: "gray.90" },
6390
+ bg: { base: "gray.90", _dark: "gray.10" },
6391
+ color: { base: "gray.10", _dark: "gray.90" },
5736
6392
  py: "8",
5737
6393
  px: "12",
5738
6394
  fontFamily: "body",
@@ -5768,7 +6424,7 @@ const tooltipVariants = {
5768
6424
  top: "100%",
5769
6425
  left: "50%",
5770
6426
  transform: "translate(-50%, -2%)",
5771
- borderTopColor: { base: "gray.90", _dark: "gray.0" }
6427
+ borderTopColor: { base: "gray.90", _dark: "gray.10" }
5772
6428
  }
5773
6429
  }
5774
6430
  },
@@ -5781,7 +6437,7 @@ const tooltipVariants = {
5781
6437
  bottom: "100%",
5782
6438
  left: "50%",
5783
6439
  transform: "translate(-50%, 2%)",
5784
- borderBottomColor: { base: "gray.90", _dark: "gray.0" }
6440
+ borderBottomColor: { base: "gray.90", _dark: "gray.10" }
5785
6441
  }
5786
6442
  }
5787
6443
  },
@@ -5794,7 +6450,7 @@ const tooltipVariants = {
5794
6450
  top: "50%",
5795
6451
  right: "-6%",
5796
6452
  transform: "translate(48%, -50%)",
5797
- borderLeftColor: { base: "gray.90", _dark: "gray.0" }
6453
+ borderLeftColor: { base: "gray.90", _dark: "gray.10" }
5798
6454
  }
5799
6455
  }
5800
6456
  },
@@ -5807,7 +6463,7 @@ const tooltipVariants = {
5807
6463
  top: "50%",
5808
6464
  left: "-6%",
5809
6465
  transform: "translate(-48%, -50%)",
5810
- borderRightColor: { base: "gray.90", _dark: "gray.0" }
6466
+ borderRightColor: { base: "gray.90", _dark: "gray.10" }
5811
6467
  }
5812
6468
  }
5813
6469
  },
@@ -5819,7 +6475,7 @@ const tooltipVariants = {
5819
6475
  top: "100%",
5820
6476
  left: "8",
5821
6477
  transform: "translate(0, -2%)",
5822
- borderTopColor: { base: "gray.90", _dark: "gray.0" }
6478
+ borderTopColor: { base: "gray.90", _dark: "gray.10" }
5823
6479
  }
5824
6480
  }
5825
6481
  },
@@ -5832,7 +6488,7 @@ const tooltipVariants = {
5832
6488
  bottom: "100%",
5833
6489
  left: "8",
5834
6490
  transform: "translate(0%, 2%)",
5835
- borderBottomColor: { base: "gray.90", _dark: "gray.0" }
6491
+ borderBottomColor: { base: "gray.90", _dark: "gray.10" }
5836
6492
  }
5837
6493
  }
5838
6494
  },
@@ -5845,7 +6501,7 @@ const tooltipVariants = {
5845
6501
  top: "8",
5846
6502
  right: "-6%",
5847
6503
  transform: "translate(48%, 0)",
5848
- borderLeftColor: { base: "gray.90", _dark: "gray.0" }
6504
+ borderLeftColor: { base: "gray.90", _dark: "gray.10" }
5849
6505
  }
5850
6506
  }
5851
6507
  },
@@ -5858,7 +6514,7 @@ const tooltipVariants = {
5858
6514
  top: "8",
5859
6515
  left: "-6%",
5860
6516
  transform: "translate(-48%, 0)",
5861
- borderRightColor: { base: "gray.90", _dark: "gray.0" }
6517
+ borderRightColor: { base: "gray.90", _dark: "gray.10" }
5862
6518
  }
5863
6519
  }
5864
6520
  },
@@ -5870,7 +6526,7 @@ const tooltipVariants = {
5870
6526
  top: "100%",
5871
6527
  right: "8",
5872
6528
  transform: "translate(0, -2%)",
5873
- borderTopColor: { base: "gray.90", _dark: "gray.0" }
6529
+ borderTopColor: { base: "gray.90", _dark: "gray.10" }
5874
6530
  }
5875
6531
  }
5876
6532
  },
@@ -5883,7 +6539,7 @@ const tooltipVariants = {
5883
6539
  bottom: "100%",
5884
6540
  right: "8",
5885
6541
  transform: "translate(0%, 2%)",
5886
- borderBottomColor: { base: "gray.90", _dark: "gray.0" }
6542
+ borderBottomColor: { base: "gray.90", _dark: "gray.10" }
5887
6543
  }
5888
6544
  }
5889
6545
  },
@@ -5896,7 +6552,7 @@ const tooltipVariants = {
5896
6552
  bottom: "8",
5897
6553
  right: "-6%",
5898
6554
  transform: "translate(48%, 0)",
5899
- borderLeftColor: { base: "gray.90", _dark: "gray.0" }
6555
+ borderLeftColor: { base: "gray.90", _dark: "gray.10" }
5900
6556
  }
5901
6557
  }
5902
6558
  },
@@ -5909,7 +6565,7 @@ const tooltipVariants = {
5909
6565
  bottom: "8",
5910
6566
  left: "-6%",
5911
6567
  transform: "translate(-48%, 0)",
5912
- borderRightColor: { base: "gray.90", _dark: "gray.0" }
6568
+ borderRightColor: { base: "gray.90", _dark: "gray.10" }
5913
6569
  }
5914
6570
  }
5915
6571
  }
@@ -6037,7 +6693,7 @@ const menuBase = {
6037
6693
  left: "0",
6038
6694
  bottom: "0",
6039
6695
  width: { base: "full", md: "260" },
6040
- bg: { base: "gray.0", _dark: "gray.80" },
6696
+ bg: { base: "gray.10", _dark: "gray.80" },
6041
6697
  py: { base: "12", md: "4" },
6042
6698
  boxShadow: "medium",
6043
6699
  borderRadius: {
@@ -6047,7 +6703,7 @@ const menuBase = {
6047
6703
  borderBottomLeftRadius: { base: "0", md: "4" },
6048
6704
  borderBottomRightRadius: { base: "0", md: "4" },
6049
6705
  "& ~ svg": {
6050
- fill: { base: "gray.90", _dark: "gray.0" },
6706
+ fill: { base: "gray.90", _dark: "gray.10" },
6051
6707
  mr: "auto"
6052
6708
  },
6053
6709
  overflow: "hidden",
@@ -6071,14 +6727,14 @@ const menuBase = {
6071
6727
  w: "full"
6072
6728
  },
6073
6729
  _hover: {
6074
- bg: { base: "gray.2", _dark: "gray.50" },
6730
+ bg: { base: "gray.2", _dark: "gray.100" },
6075
6731
  cursor: "pointer"
6076
6732
  },
6077
6733
  _active: {
6078
6734
  bg: { base: "gray.10", _dark: "gray.100" }
6079
6735
  },
6080
6736
  _focusVisible: {
6081
- outlineColor: { base: "gray.90", _dark: "gray.0" },
6737
+ outlineColor: { base: "gray.90", _dark: "gray.10" },
6082
6738
  outlineOffset: "-2"
6083
6739
  },
6084
6740
  _disabled: {
@@ -6106,7 +6762,7 @@ const menuBase = {
6106
6762
  py: "4",
6107
6763
  pr: "12",
6108
6764
  pl: "4",
6109
- bg: { base: "gray.5", _dark: "gray.60" },
6765
+ bg: { base: "gray.10", _dark: "gray.60" },
6110
6766
  cursor: "pointer"
6111
6767
  },
6112
6768
  multiLevelIcon: { ml: "auto" },
@@ -6168,14 +6824,14 @@ const componentRecipes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.de
6168
6824
  badgeRecipe,
6169
6825
  boxRecipe,
6170
6826
  breadcrumbsRecipe,
6171
- buttonRecipe,
6827
+ buttonRecipe: buttonRecipe$1,
6172
6828
  cardRecipe,
6173
6829
  checkboxInputRecipe,
6174
6830
  checkboxRecipe: checkboxRecipe$1,
6175
6831
  codeRecipe,
6176
6832
  dividerRecipe,
6177
6833
  headingRecipe,
6178
- iconButtonRecipe,
6834
+ iconButtonRecipe: iconButtonRecipe$1,
6179
6835
  labelRecipe,
6180
6836
  linkRecipe,
6181
6837
  menuRecipe: menuRecipe$1,
@@ -6192,6 +6848,8 @@ const componentRecipes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.de
6192
6848
  tooltipRecipe: tooltipRecipe$1
6193
6849
  }, Symbol.toStringTag, { value: "Module" }));
6194
6850
  const {
6851
+ buttonRecipe,
6852
+ iconButtonRecipe,
6195
6853
  checkboxRecipe,
6196
6854
  radioRecipe,
6197
6855
  tooltipRecipe,
@@ -6200,17 +6858,14 @@ const {
6200
6858
  ...regularComponents
6201
6859
  } = componentRecipes;
6202
6860
  const transformedRecipes = Object.fromEntries(
6203
- Object.entries(regularComponents).map(([key, value]) => [
6204
- key.replace(/Recipe$/, ""),
6205
- value
6206
- ])
6861
+ Object.entries(regularComponents).map(([key, value]) => [key.replace(/Recipe$/, ""), value])
6207
6862
  );
6208
6863
  const { box: _box, divider: _divider, ...pandaBasePresetPatterns } = index_default.patterns;
6209
6864
  const pandaBasePresetConditions = index_default.conditions;
6210
6865
  const pandaBasePresetUtilities = index_default.utilities;
6211
6866
  const pandaBasePresetGlobalCss = index_default.globalCss;
6212
6867
  const sizeKeys = Object.keys(sizes);
6213
- const { textStyles, breakpoints, keyframes, ...rawTokens } = tokens;
6868
+ const { breakpoints, keyframes, ...rawTokens } = tokens;
6214
6869
  const theme = {
6215
6870
  tokens: defineTokens({
6216
6871
  ...rawTokens,
@@ -6218,7 +6873,7 @@ const theme = {
6218
6873
  // Map spacing to our size scale for consistent sizing
6219
6874
  }),
6220
6875
  semanticTokens: defineSemanticTokens({
6221
- ...semanticTokens
6876
+ ...semantics
6222
6877
  })
6223
6878
  };
6224
6879
  const okshaunPreset = definePreset$1({
@@ -6238,6 +6893,8 @@ const okshaunPreset = definePreset$1({
6238
6893
  ...transformedRecipes
6239
6894
  },
6240
6895
  slotRecipes: {
6896
+ button: buttonRecipe,
6897
+ iconButton: iconButtonRecipe,
6241
6898
  checkbox: checkboxRecipe,
6242
6899
  radio: radioRecipe,
6243
6900
  tooltip: tooltipRecipe,
@@ -6289,8 +6946,10 @@ const okshaunPreset = definePreset$1({
6289
6946
  ...pandaBasePresetGlobalCss,
6290
6947
  ...globalCss,
6291
6948
  html: {
6292
- "--global-font-heading": "fonts.sans",
6293
- "--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",
6294
6953
  "--global-font-mono": "fonts.mono"
6295
6954
  }
6296
6955
  },