@okshaun/components 0.2.0 → 0.3.1

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 +484 -645
  3. package/dist/index.js.map +1 -1
  4. package/dist/panda.buildinfo.json +141 -172
  5. package/dist/preset.js +1800 -1105
  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,363 +3799,916 @@ 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"
3759
- }
3760
- },
3761
- bounce: {
3762
- "0%, 100%": {
3763
- transform: "translateY(-25%)",
3764
- animationTimingFunction: "cubic-bezier(0.8,0,1,1)"
3802
+ const tokens = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
3803
+ __proto__: null,
3804
+ animations,
3805
+ aspectRatios,
3806
+ blurs,
3807
+ borderWidths,
3808
+ breakpoints: breakpoints$1,
3809
+ colors: colors$1,
3810
+ containerSizes,
3811
+ durations,
3812
+ easings,
3813
+ fontSizes,
3814
+ fontWeights,
3815
+ fonts,
3816
+ keyframes: keyframes$1,
3817
+ letterSpacings,
3818
+ lineHeights,
3819
+ numericSizes,
3820
+ radii,
3821
+ shadows,
3822
+ sizes,
3823
+ utilitySizes
3824
+ }, Symbol.toStringTag, { value: "Module" }));
3825
+ const BRAND_PALETTE = "gray";
3826
+ const brandPalette = (shade) => `{colors.${BRAND_PALETTE}.${shade}}`;
3827
+ const colors = defineSemanticTokens.colors({
3828
+ // Brand color palette - automatically uses the palette defined above
3829
+ brand: {
3830
+ "10": { value: brandPalette("10") },
3831
+ "20": { value: brandPalette("20") },
3832
+ "30": { value: brandPalette("30") },
3833
+ "40": { value: brandPalette("40") },
3834
+ "50": { value: brandPalette("50") },
3835
+ "60": { value: brandPalette("60") },
3836
+ "70": { value: brandPalette("70") },
3837
+ "80": { value: brandPalette("80") },
3838
+ "90": { value: brandPalette("90") },
3839
+ "100": { value: brandPalette("100") }
3840
+ },
3841
+ bg: {
3842
+ disabled: {
3843
+ value: { base: "{colors.neutral.10}", _dark: "{colors.darkNeutral.10}" }
3765
3844
  },
3766
- "50%": {
3767
- transform: "none",
3768
- animationTimingFunction: "cubic-bezier(0,0,0.2,1)"
3769
- }
3770
- }
3771
- };
3772
- const baseHeadingStyles = defineStyles({
3773
- value: {
3774
- fontFamily: "sans",
3775
- fontWeight: "bold",
3776
- color: { base: "gray.90", _dark: "gray.5" },
3777
- lineHeight: "default"
3778
- }
3779
- });
3780
- const baseBodyTextStyles = defineStyles({
3781
- value: {
3782
- fontFamily: "serif",
3783
- fontWeight: "normal",
3784
- color: { base: "gray.60", _dark: "gray.20" },
3785
- lineHeight: "default"
3786
- }
3787
- });
3788
- const baseMonoStyles = defineStyles({
3789
- value: {
3790
- fontFamily: "mono",
3791
- fontWeight: "normal",
3792
- color: { base: "gray.60", _dark: "gray.20" },
3793
- lineHeight: "default"
3794
- }
3795
- });
3796
- const textStyles$1 = defineTextStyles({
3797
- display: {
3798
- lg: {
3799
- value: {
3800
- ...baseHeadingStyles,
3801
- fontSize: "72"
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
+ }
3802
3914
  }
3803
3915
  },
3804
- md: {
3805
- value: {
3806
- ...baseHeadingStyles,
3807
- fontSize: "64"
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
+ }
3808
3936
  }
3809
3937
  },
3810
- sm: {
3811
- value: {
3812
- ...baseHeadingStyles,
3813
- fontSize: "56"
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
+ }
3814
3971
  }
3815
3972
  },
3816
- xs: {
3817
- value: {
3818
- ...baseHeadingStyles,
3819
- fontSize: "48"
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
+ }
3820
3993
  }
3821
- }
3822
- },
3823
- heading: {
3824
- lg: {
3825
- value: {
3826
- ...baseHeadingStyles,
3827
- fontSize: "40"
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
+ }
3828
4015
  }
3829
4016
  },
3830
- md: {
3831
- value: {
3832
- ...baseHeadingStyles,
3833
- fontSize: "32"
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
+ }
3834
4033
  }
3835
4034
  },
3836
- sm: {
3837
- value: {
3838
- ...baseHeadingStyles,
3839
- fontSize: "24"
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
+ }
3840
4055
  }
3841
4056
  },
3842
- xs: {
3843
- value: {
3844
- ...baseHeadingStyles,
3845
- fontSize: "20"
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
+ }
3846
4257
  }
3847
4258
  }
3848
4259
  },
3849
- body: {
3850
- lg: {
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: {
3851
4267
  value: {
3852
- ...baseBodyTextStyles,
3853
- fontSize: "20"
4268
+ base: "{colors.neutralA.30}",
4269
+ _dark: "{colors.darkNeutralA.30}"
3854
4270
  }
3855
4271
  },
3856
- md: {
3857
- value: {
3858
- ...baseBodyTextStyles,
3859
- fontSize: "16"
3860
- }
4272
+ bold: {
4273
+ value: { base: "{colors.neutral.60}", _dark: "{colors.darkNeutral.60}" }
3861
4274
  },
3862
- sm: {
4275
+ inverse: {
4276
+ value: { base: "{colors.neutral.0}", _dark: "{colors.darkNeutral.0}" }
4277
+ },
4278
+ disabled: {
3863
4279
  value: {
3864
- ...baseBodyTextStyles,
3865
- fontSize: "14"
4280
+ base: "{colors.neutralA.20}",
4281
+ _dark: "{colors.darkNeutralA.20}"
3866
4282
  }
3867
4283
  },
3868
- xs: {
3869
- value: {
3870
- ...baseBodyTextStyles,
3871
- fontSize: "12"
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}" }
3872
4290
  }
3873
- }
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}" } }
3874
4304
  },
3875
- mono: {
3876
- lg: {
4305
+ icon: {
4306
+ DEFAULT: {
3877
4307
  value: {
3878
- ...baseMonoStyles,
3879
- fontSize: "20"
4308
+ base: "{colors.neutral.100}",
4309
+ _dark: "{colors.darkNeutral.110}"
3880
4310
  }
3881
4311
  },
3882
- md: {
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: {
3883
4325
  value: {
3884
- ...baseMonoStyles,
3885
- fontSize: "16"
4326
+ base: "{colors.neutralA.40}",
4327
+ _dark: "{colors.darkNeutralA.40}"
3886
4328
  }
3887
4329
  },
3888
- sm: {
3889
- value: {
3890
- ...baseMonoStyles,
3891
- fontSize: "14"
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
+ }
3892
4353
  }
3893
4354
  },
3894
- xs: {
3895
- value: {
3896
- ...baseMonoStyles,
3897
- fontSize: "12"
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
+ }
3898
4419
  }
3899
4420
  }
3900
- }
3901
- });
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: {
4421
+ },
4422
+ text: {
4423
+ DEFAULT: {
3930
4424
  value: {
3931
- base: "{colors.green.2}",
3932
- _dark: "{colors.green.5}"
4425
+ base: "{colors.neutral.100}",
4426
+ _dark: "{colors.darkNeutral.100}"
3933
4427
  }
3934
4428
  },
3935
- light: {
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: {
3936
4436
  value: {
3937
- base: "{colors.green.10}",
3938
- _dark: "{colors.green.20}"
4437
+ base: "{colors.neutral.100}",
4438
+ _dark: "{colors.darkNeutral.110}"
3939
4439
  }
3940
4440
  },
3941
- default: {
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: {
3942
4448
  value: {
3943
- base: "{colors.green.40}",
3944
- _dark: "{colors.green.30}"
4449
+ base: "{colors.neutralA.40}",
4450
+ _dark: "{colors.darkNeutralA.40}"
3945
4451
  }
3946
4452
  },
3947
- dark: {
3948
- value: {
3949
- base: "{colors.green.60}",
3950
- _dark: "{colors.green.60}"
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
+ }
3951
4463
  }
3952
4464
  },
3953
- darker: {
3954
- value: {
3955
- base: "{colors.green.70}",
3956
- _dark: "{colors.green.70}"
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
+ }
3957
4569
  }
3958
4570
  }
3959
4571
  },
3960
- warning: {
3961
- lighter: {
3962
- value: {
3963
- base: "{colors.yellow.2}",
3964
- _dark: "{colors.yellow.2}"
3965
- }
3966
- },
3967
- light: {
4572
+ utility: {
4573
+ shadowColor: {
4574
+ value: { base: "{colors.slate.90/20}", _dark: "{colors.slate.100/40}" }
4575
+ }
4576
+ }
4577
+ });
4578
+ const semantics = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
4579
+ __proto__: null,
4580
+ colors
4581
+ }, Symbol.toStringTag, { value: "Module" }));
4582
+ const baseHeadingStyles = defineStyles({
4583
+ value: {
4584
+ fontFamily: "sans",
4585
+ fontWeight: "bold",
4586
+ color: "text",
4587
+ lineHeight: "default"
4588
+ }
4589
+ });
4590
+ const baseBodyTextStyles = defineStyles({
4591
+ value: {
4592
+ fontFamily: "serif",
4593
+ fontWeight: "normal",
4594
+ color: "text.subtlest",
4595
+ lineHeight: "default"
4596
+ }
4597
+ });
4598
+ const baseMonoStyles = defineStyles({
4599
+ value: {
4600
+ fontFamily: "mono",
4601
+ fontWeight: "normal",
4602
+ color: "text.subtlest",
4603
+ lineHeight: "default"
4604
+ }
4605
+ });
4606
+ const textStyles = defineTextStyles({
4607
+ display: {
4608
+ lg: {
3968
4609
  value: {
3969
- base: "{colors.yellow.10}",
3970
- _dark: "{colors.yellow.10}"
4610
+ ...baseHeadingStyles,
4611
+ fontSize: "72"
3971
4612
  }
3972
4613
  },
3973
- default: {
4614
+ md: {
3974
4615
  value: {
3975
- base: "{colors.yellow.30}",
3976
- _dark: "{colors.yellow.20}"
4616
+ ...baseHeadingStyles,
4617
+ fontSize: "64"
3977
4618
  }
3978
4619
  },
3979
- dark: {
4620
+ sm: {
3980
4621
  value: {
3981
- base: "{colors.yellow.60}",
3982
- _dark: "{colors.yellow.60}"
4622
+ ...baseHeadingStyles,
4623
+ fontSize: "56"
3983
4624
  }
3984
4625
  },
3985
- darker: {
4626
+ xs: {
3986
4627
  value: {
3987
- base: "{colors.yellow.70}",
3988
- _dark: "{colors.yellow.70}"
4628
+ ...baseHeadingStyles,
4629
+ fontSize: "48"
3989
4630
  }
3990
4631
  }
3991
4632
  },
3992
- error: {
3993
- lighter: {
3994
- value: {
3995
- base: "{colors.red.2}",
3996
- _dark: "{colors.red.5}"
3997
- }
3998
- },
3999
- light: {
4633
+ heading: {
4634
+ lg: {
4000
4635
  value: {
4001
- base: "{colors.red.10}",
4002
- _dark: "{colors.red.20}"
4636
+ ...baseHeadingStyles,
4637
+ fontSize: "40"
4003
4638
  }
4004
4639
  },
4005
- default: {
4640
+ md: {
4006
4641
  value: {
4007
- base: "{colors.red.50}",
4008
- _dark: "{colors.red.40}"
4642
+ ...baseHeadingStyles,
4643
+ fontSize: "32"
4009
4644
  }
4010
4645
  },
4011
- dark: {
4646
+ sm: {
4012
4647
  value: {
4013
- base: "{colors.red.60}",
4014
- _dark: "{colors.red.60}"
4648
+ ...baseHeadingStyles,
4649
+ fontSize: "24"
4015
4650
  }
4016
4651
  },
4017
- darker: {
4652
+ xs: {
4018
4653
  value: {
4019
- base: "{colors.red.70}",
4020
- _dark: "{colors.red.70}"
4654
+ ...baseHeadingStyles,
4655
+ fontSize: "20"
4021
4656
  }
4022
4657
  }
4023
4658
  },
4024
- info: {
4025
- lighter: {
4026
- value: {
4027
- base: "{colors.blue.2}",
4028
- _dark: "{colors.blue.5}"
4029
- }
4030
- },
4031
- light: {
4659
+ body: {
4660
+ lg: {
4032
4661
  value: {
4033
- base: "{colors.blue.10}",
4034
- _dark: "{colors.blue.20}"
4662
+ ...baseBodyTextStyles,
4663
+ fontSize: "20"
4035
4664
  }
4036
4665
  },
4037
- default: {
4666
+ md: {
4038
4667
  value: {
4039
- base: "{colors.blue.50}",
4040
- _dark: "{colors.blue.40}"
4668
+ ...baseBodyTextStyles,
4669
+ fontSize: "16"
4041
4670
  }
4042
4671
  },
4043
- dark: {
4672
+ sm: {
4044
4673
  value: {
4045
- base: "{colors.blue.60}",
4046
- _dark: "{colors.blue.60}"
4674
+ ...baseBodyTextStyles,
4675
+ fontSize: "14"
4047
4676
  }
4048
4677
  },
4049
- darker: {
4678
+ xs: {
4050
4679
  value: {
4051
- base: "{colors.blue.70}",
4052
- _dark: "{colors.blue.70}"
4680
+ ...baseBodyTextStyles,
4681
+ fontSize: "12"
4053
4682
  }
4054
4683
  }
4055
4684
  },
4056
- utility: {
4057
- shadowColor: {
4685
+ mono: {
4686
+ lg: {
4058
4687
  value: {
4059
- base: "{colors.gray.90/20}",
4060
- _dark: "{colors.gray.100/40}"
4688
+ ...baseMonoStyles,
4689
+ fontSize: "20"
4061
4690
  }
4062
4691
  },
4063
- headingColor: {
4692
+ md: {
4064
4693
  value: {
4065
- base: "{colors.gray.90}",
4066
- _dark: "{colors.gray.5}"
4694
+ ...baseMonoStyles,
4695
+ fontSize: "16"
4067
4696
  }
4068
4697
  },
4069
- textColor: {
4698
+ sm: {
4070
4699
  value: {
4071
- base: "{colors.gray.60}",
4072
- _dark: "{colors.gray.30}"
4700
+ ...baseMonoStyles,
4701
+ fontSize: "14"
4073
4702
  }
4074
4703
  },
4075
- borderColor: {
4704
+ xs: {
4076
4705
  value: {
4077
- base: "{colors.gray.10}",
4078
- _dark: "{colors.gray.60}"
4706
+ ...baseMonoStyles,
4707
+ fontSize: "12"
4079
4708
  }
4080
4709
  }
4081
4710
  }
4082
- };
4083
- const semanticTokens = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
4084
- __proto__: null,
4085
- colors
4086
- }, Symbol.toStringTag, { value: "Module" }));
4711
+ });
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"],
@@ -4550,151 +4961,179 @@ const badgeRecipe = defineRecipe({
4550
4961
  height: "4"
4551
4962
  }
4552
4963
  },
4553
- lg: {
4554
- textStyle: "sm",
4555
- px: "3",
4556
- h: "7",
4557
- gap: "1.5",
4558
- "& svg": {
4559
- width: "4",
4560
- height: "4"
4561
- }
4562
- }
4563
- }
4564
- }
4565
- });
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",
4590
- px: "8",
4591
- m: "0",
4592
- resize: "none",
4593
- appearance: "none",
4594
- borderWidth: "1",
4595
- borderStyle: "solid",
4596
- borderRadius: "4",
4597
- borderColor: "transparent"
4598
- },
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
- // },
4622
- }
4623
- },
4624
- defaultVariants: {
4625
- stacked: true,
4626
- internalLabel: false,
4627
- autoGrow: false
4628
- },
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
- // },
4964
+ lg: {
4965
+ textStyle: "sm",
4966
+ px: "3",
4967
+ h: "7",
4968
+ gap: "1.5",
4969
+ "& svg": {
4970
+ width: "4",
4971
+ height: "4"
4669
4972
  }
4670
4973
  }
4974
+ }
4975
+ }
4976
+ });
4977
+ const textareaVariants = {
4978
+ size: {
4979
+ medium: {
4980
+ py: "3",
4981
+ px: "10",
4982
+ fontSize: "16",
4983
+ minHeight: "64"
4671
4984
  },
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
- }
4985
+ small: {
4986
+ py: "0",
4987
+ px: "8",
4988
+ minHeight: "48",
4989
+ fontSize: "14"
4990
+ },
4991
+ large: {
4992
+ py: "7",
4993
+ px: "12",
4994
+ fontSize: "16",
4995
+ minHeight: "80"
4996
+ },
4997
+ xlarge: {
4998
+ py: "9",
4999
+ px: "16",
5000
+ fontSize: "20",
5001
+ minHeight: "96"
5002
+ }
5003
+ }
5004
+ // autoGrow: {
5005
+ // false: {
5006
+ // width: 'full',
5007
+ // },
5008
+ // true: {
5009
+ // width: 'fit-content',
5010
+ // },
5011
+ // },
5012
+ // stacked: {
5013
+ // true: {
5014
+ // gridTemplateRows: 'auto 1fr',
5015
+ // alignItems: 'stretch',
5016
+ // '&::after, & textarea': {
5017
+ // gridArea: '2 / 1',
5018
+ // },
5019
+ // '& textarea': {
5020
+ // background: { base: 'gray.10', _dark: 'gray.90' },
5021
+ // borderColor: { base: 'gray.40', _dark: 'gray.100' },
5022
+ // // _hover: {
5023
+ // // borderColor: { base: 'gray.20', _dark: 'gray.30' },
5024
+ // // },
5025
+ // // _focus: {
5026
+ // // borderColor: { base: 'gray.90', _dark: 'gray.10' },
5027
+ // // },
5028
+ // },
5029
+ // },
5030
+ // false: {
5031
+ // gridTemplateColumns: 'auto 1fr',
5032
+ // alignItems: 'center',
5033
+ // '& textarea': {
5034
+ // background: { base: 'gray.10', _dark: 'gray.90' },
5035
+ // borderColor: { base: 'green.40', _dark: 'green.50' },
5036
+ // // _hover: {
5037
+ // // borderColor: { base: 'gray.20', _dark: 'gray.30' },
5038
+ // // },
5039
+ // // _focus: {
5040
+ // // borderColor: { base: 'gray.90', _dark: 'gray.10' },
5041
+ // // },
5042
+ // },
5043
+ // },
5044
+ // },
5045
+ // internalLabel: {
5046
+ // false: {},
5047
+ // true: {
5048
+ // // _focusWithin: {
5049
+ // // outlineWidth: 1,
5050
+ // // outlineStyle: 'solid',
5051
+ // // outlineColor: { base: 'gray.90', _dark: 'gray.10' },
5052
+ // // // outlineOffset: 2,
5053
+ // // ml: '-4',
5054
+ // // },
5055
+ // },
5056
+ // },
5057
+ };
5058
+ const textareaBase = {
5059
+ display: "inline-grid",
5060
+ position: "relative",
5061
+ width: "full",
5062
+ verticalAlign: "top",
5063
+ borderWidth: "1",
5064
+ borderStyle: "solid",
5065
+ borderColor: "border.input",
5066
+ borderRadius: "4",
5067
+ outlineWidth: "2",
5068
+ outlineOffset: "-1",
5069
+ outlineStyle: "solid",
5070
+ outlineColor: "transparent",
5071
+ lineHeight: "default",
5072
+ fontFamily: "body",
5073
+ bg: "bg.input",
5074
+ color: "text",
5075
+ transitionDuration: "fast",
5076
+ transitionProperty: "background, border-color, color, outline-color",
5077
+ transitionTimingFunction: "default",
5078
+ _placeholder: {
5079
+ color: "text.subtlest"
5080
+ },
5081
+ _hover: {
5082
+ bg: "bg.input.hovered"
5083
+ },
5084
+ _focus: {
5085
+ bg: "bg.input.pressed",
5086
+ borderColor: "border.focused",
5087
+ outlineColor: "border.focused"
5088
+ },
5089
+ _disabled: {
5090
+ bg: "bg.disabled",
5091
+ borderColor: "border.disabled",
5092
+ color: "text.disabled"
5093
+ },
5094
+ _error: {
5095
+ display: "inline-grid",
5096
+ bg: "bg.danger",
5097
+ borderColor: "border.danger",
5098
+ color: "text.danger",
5099
+ _hover: {
5100
+ bg: "bg.danger.hovered",
5101
+ borderColor: "border.danger"
5102
+ },
5103
+ _focus: {
5104
+ bg: "bg.danger",
5105
+ borderColor: "border.danger",
5106
+ outlineColor: "border.danger"
4683
5107
  }
4684
5108
  }
5109
+ };
5110
+ const textareaRecipe = defineRecipe({
5111
+ className: "textarea",
5112
+ jsx: ["Textarea"],
5113
+ base: textareaBase,
5114
+ variants: textareaVariants,
5115
+ defaultVariants: {
5116
+ size: "medium"
5117
+ // stacked: true,
5118
+ // internalLabel: false,
5119
+ // autoGrow: false,
5120
+ }
4685
5121
  });
4686
5122
  const textBase = {
4687
5123
  margin: "0",
4688
5124
  lineHeight: "default",
4689
5125
  fontWeight: "normal",
4690
5126
  fontSize: "16",
4691
- color: { base: "gray.70", _dark: "gray.20" }
5127
+ color: "text"
4692
5128
  };
4693
5129
  const textVariants = {
4694
5130
  family: {
5131
+ heading: { fontFamily: "heading" },
5132
+ body: { fontFamily: "body" },
4695
5133
  sans: { fontFamily: "sans" },
4696
5134
  serif: { fontFamily: "serif" },
4697
- mono: { fontFamily: "mono" }
5135
+ mono: { fontFamily: "mono" },
5136
+ inherit: { fontFamily: "inherit" }
4698
5137
  },
4699
5138
  bold: {
4700
5139
  true: {
@@ -4715,7 +5154,7 @@ const textVariants = {
4715
5154
  const headingBase = {
4716
5155
  fontFamily: "heading",
4717
5156
  fontWeight: "black",
4718
- color: { base: "gray.90", _dark: "gray.5" },
5157
+ color: "text.bold",
4719
5158
  lineHeight: "default"
4720
5159
  };
4721
5160
  const headingVariants = {
@@ -4731,16 +5170,20 @@ const linkBase = {
4731
5170
  alignItems: "center",
4732
5171
  fontWeight: "medium",
4733
5172
  gap: "1",
4734
- color: { base: "blue.50", _dark: "blue.40" },
4735
- textDecoration: "none",
5173
+ color: { base: "blue.70", _dark: "blue.40" },
4736
5174
  backgroundImage: "linear-gradient(90deg, transparent 0% 100%)",
4737
5175
  backgroundSize: "100% 1px",
4738
5176
  backgroundRepeat: "no-repeat",
4739
5177
  backgroundPositionY: "100%",
4740
5178
  width: "fit-content",
4741
5179
  cursor: "pointer",
5180
+ textDecoration: "none",
4742
5181
  _hover: {
4743
- color: { base: "blue.40", _dark: "blue.30" },
5182
+ color: { base: "blue.60", _dark: "blue.40" },
5183
+ backgroundColor: { base: "blue.10", _dark: "blue.100" },
5184
+ backgroundImage: "linear-gradient(90deg, currentColor 0% 100%)"
5185
+ },
5186
+ "p &": {
4744
5187
  backgroundImage: "linear-gradient(90deg, currentColor 0% 100%)"
4745
5188
  }
4746
5189
  };
@@ -4776,7 +5219,7 @@ const textRecipe = defineRecipe({
4776
5219
  base: textBase,
4777
5220
  variants: textVariants,
4778
5221
  defaultVariants: {
4779
- family: "sans"
5222
+ family: "inherit"
4780
5223
  }
4781
5224
  });
4782
5225
  const headingRecipe = defineRecipe({
@@ -4794,7 +5237,7 @@ const linkRecipe = defineRecipe({
4794
5237
  base: linkBase,
4795
5238
  variants: linkVariants,
4796
5239
  defaultVariants: {
4797
- family: "sans"
5240
+ family: "inherit"
4798
5241
  }
4799
5242
  });
4800
5243
  const labelRecipe = defineRecipe({
@@ -4803,12 +5246,15 @@ const labelRecipe = defineRecipe({
4803
5246
  base: labelBase,
4804
5247
  variants: labelVariants,
4805
5248
  defaultVariants: {
4806
- family: "sans"
5249
+ family: "inherit"
4807
5250
  }
4808
5251
  });
4809
5252
  const checkboxInputBase = {
4810
5253
  display: "flex",
4811
- alignItems: "start"
5254
+ alignItems: "start",
5255
+ '&[class*="-label"]': {
5256
+ fontSize: "16"
5257
+ }
4812
5258
  };
4813
5259
  const checkboxInputRecipe = defineRecipe({
4814
5260
  className: "checkbox-input",
@@ -4842,7 +5288,7 @@ const toggleBase = {
4842
5288
  w: "40",
4843
5289
  h: "24",
4844
5290
  rounded: "24",
4845
- bg: { base: "gray.0", _dark: "gray.90" },
5291
+ bg: { base: "gray.10", _dark: "gray.90" },
4846
5292
  transitionProperty: "border-color, background-color",
4847
5293
  transitionDuration: "200ms",
4848
5294
  transitionTimingFunction: "ease-in-out",
@@ -4890,8 +5336,8 @@ const toggleBase = {
4890
5336
  transform: "translateX(16px)"
4891
5337
  },
4892
5338
  "& ~ [name='toggle-bg']": {
4893
- bg: { base: "gray.90", _dark: "gray.0" },
4894
- borderColor: { base: "gray.90", _dark: "gray.0" }
5339
+ bg: { base: "gray.90", _dark: "gray.10" },
5340
+ borderColor: { base: "gray.90", _dark: "gray.10" }
4895
5341
  }
4896
5342
  },
4897
5343
  _error: {
@@ -4902,7 +5348,7 @@ const toggleBase = {
4902
5348
  _focusVisible: {
4903
5349
  appearance: "none",
4904
5350
  opacity: 1,
4905
- outlineColor: { base: "gray.80", _dark: "gray.5" },
5351
+ outlineColor: { base: "gray.80", _dark: "gray.10" },
4906
5352
  outlineOffset: 1,
4907
5353
  outlineWidth: 2,
4908
5354
  outlineStyle: "solid",
@@ -5029,7 +5475,7 @@ const preBase = {
5029
5475
  borderWidth: "0",
5030
5476
  borderColor: "gray.60",
5031
5477
  bg: "gray.80",
5032
- color: "gray.5",
5478
+ color: "gray.10",
5033
5479
  px: "16",
5034
5480
  py: "8",
5035
5481
  my: "8",
@@ -5070,49 +5516,67 @@ const textInputVariants = {
5070
5516
  py: 7,
5071
5517
  px: 12,
5072
5518
  fontSize: "16"
5073
- }
5074
- },
5075
- autoSize: {
5076
- true: {
5077
- fieldSizing: "content"
5519
+ },
5520
+ xlarge: {
5521
+ fontSize: "20",
5522
+ py: "9",
5523
+ px: "16"
5078
5524
  }
5079
5525
  }
5526
+ // autoSize: {
5527
+ // true: {
5528
+ // fieldSizing: 'content',
5529
+ // },
5530
+ // },
5080
5531
  };
5081
5532
  const textInputBase = {
5533
+ display: "inline-grid",
5082
5534
  position: "relative",
5083
5535
  width: "full",
5084
5536
  borderWidth: "1",
5085
- borderColor: "gray.30",
5086
5537
  borderStyle: "solid",
5538
+ borderColor: "border.input",
5087
5539
  borderRadius: "4",
5088
- lineHeight: "default",
5089
- fontFamily: "body",
5090
- outlineWidth: "1",
5540
+ outlineWidth: "2",
5541
+ outlineOffset: "-1",
5091
5542
  outlineStyle: "solid",
5092
5543
  outlineColor: "transparent",
5093
- color: {
5094
- base: "gray.90",
5095
- _dark: "gray.0"
5096
- },
5544
+ lineHeight: "default",
5545
+ fontFamily: "body",
5546
+ bg: "bg.input",
5547
+ color: "text",
5548
+ transitionDuration: "fast",
5549
+ transitionProperty: "background, border-color, color, outline-color",
5550
+ transitionTimingFunction: "default",
5097
5551
  _placeholder: {
5098
- color: {
5099
- base: "gray.50",
5100
- _dark: "gray.40"
5101
- }
5552
+ color: "text.subtlest"
5102
5553
  },
5103
- _disabled: {
5104
- opacity: 0.4
5554
+ _hover: {
5555
+ bg: "bg.input.hovered"
5105
5556
  },
5106
5557
  _focus: {
5107
- outlineColor: { base: "gray.90", _dark: "gray.0" },
5108
- borderColor: { base: "gray.90", _dark: "gray.0" }
5558
+ bg: "bg.input.pressed",
5559
+ borderColor: "border.focused",
5560
+ outlineColor: "border.focused"
5561
+ },
5562
+ _disabled: {
5563
+ bg: "bg.disabled",
5564
+ borderColor: "border.disabled",
5565
+ color: "text.disabled"
5109
5566
  },
5110
5567
  _error: {
5111
5568
  display: "inline-grid",
5112
- borderColor: "error.default",
5569
+ bg: "bg.danger",
5570
+ borderColor: "border.danger",
5571
+ color: "text.danger",
5572
+ _hover: {
5573
+ bg: "bg.danger.hovered",
5574
+ borderColor: "border.danger"
5575
+ },
5113
5576
  _focus: {
5114
- borderColor: { base: "error.default", _dark: "error.default" },
5115
- outlineColor: { base: "error.default", _dark: "error.default" }
5577
+ bg: "bg.danger",
5578
+ borderColor: "border.danger",
5579
+ outlineColor: "border.danger"
5116
5580
  }
5117
5581
  }
5118
5582
  };
@@ -5126,7 +5590,7 @@ const textinputRecipe = defineRecipe({
5126
5590
  }
5127
5591
  });
5128
5592
  const cardBase = {
5129
- bg: { base: "gray.0", _dark: "gray.80" },
5593
+ bg: { base: "gray.10", _dark: "gray.80" },
5130
5594
  borderRadius: "4",
5131
5595
  outlineWidth: "1",
5132
5596
  outlineStyle: "solid",
@@ -5152,8 +5616,8 @@ const cardVariant = {
5152
5616
  _focusVisible: {
5153
5617
  boxShadow: "none",
5154
5618
  borderWidth: "1",
5155
- outlineColor: { base: "gray.90", _dark: "gray.0" },
5156
- borderColor: { base: "gray.90", _dark: "gray.0" }
5619
+ outlineColor: { base: "gray.90", _dark: "gray.10" },
5620
+ borderColor: { base: "gray.90", _dark: "gray.10" }
5157
5621
  },
5158
5622
  _disabled: {
5159
5623
  opacity: "0.4",
@@ -5170,10 +5634,10 @@ const cardVariant = {
5170
5634
  borderStyle: "solid",
5171
5635
  borderColor: { base: "gray.10", _dark: "gray.70" },
5172
5636
  _hover: {
5173
- borderColor: { base: "gray.30", _dark: "gray.50" }
5637
+ borderColor: { base: "gray.30", _dark: "gray.100" }
5174
5638
  },
5175
5639
  _active: {
5176
- borderColor: { base: "gray.50", _dark: "gray.30" },
5640
+ borderColor: { base: "gray.100", _dark: "gray.30" },
5177
5641
  _grabbed: {
5178
5642
  boxShadow: "high",
5179
5643
  cursor: "grabbing"
@@ -5181,8 +5645,8 @@ const cardVariant = {
5181
5645
  },
5182
5646
  _focusVisible: {
5183
5647
  boxShadow: "none",
5184
- outlineColor: { base: "gray.90", _dark: "gray.0" },
5185
- borderColor: { base: "gray.90", _dark: "gray.0" }
5648
+ outlineColor: { base: "gray.90", _dark: "gray.10" },
5649
+ borderColor: { base: "gray.90", _dark: "gray.10" }
5186
5650
  },
5187
5651
  _disabled: {
5188
5652
  opacity: "0.4",
@@ -5219,7 +5683,7 @@ const BreadcrumbsBase = {
5219
5683
  }
5220
5684
  },
5221
5685
  "& p": {
5222
- color: { base: "gray.90", _dark: "gray.0" }
5686
+ color: { base: "gray.90", _dark: "gray.10" }
5223
5687
  },
5224
5688
  "& span": {
5225
5689
  mx: "6",
@@ -5236,35 +5700,33 @@ const tagBase = {
5236
5700
  py: "0",
5237
5701
  borderRadius: "2",
5238
5702
  gap: "1",
5239
- // h: '20',
5703
+ h: "20",
5240
5704
  px: "4",
5705
+ fontFamily: "sans",
5241
5706
  fontSize: "14",
5242
- fontWeight: "500"
5707
+ fontWeight: "500",
5708
+ whiteSpace: "nowrap",
5709
+ width: "fit-content"
5243
5710
  // lineHeight: 'none',
5244
5711
  };
5245
5712
  const tagVariant = {
5246
- variant: {
5713
+ appearance: {
5247
5714
  default: {},
5248
5715
  bold: {}
5249
5716
  },
5250
5717
  hue: {
5251
- slate: {},
5252
- tan: {},
5718
+ gray: {},
5253
5719
  red: {},
5254
- tomato: {},
5255
5720
  orange: {},
5256
5721
  yellow: {},
5722
+ lime: {},
5257
5723
  green: {},
5258
- grass: {},
5259
- mint: {},
5260
- cyan: {},
5724
+ teal: {},
5261
5725
  blue: {},
5262
5726
  indigo: {},
5263
5727
  purple: {},
5264
- violet: {},
5265
- pink: {},
5266
- rose: {},
5267
- magenta: {}
5728
+ magenta: {},
5729
+ tan: {}
5268
5730
  },
5269
5731
  iconPosition: {
5270
5732
  left: {
@@ -5291,285 +5753,509 @@ const tagRecipe = defineRecipe({
5291
5753
  base: tagBase,
5292
5754
  variants: tagVariant,
5293
5755
  defaultVariants: {
5294
- variant: "default",
5295
- hue: "slate",
5756
+ appearance: "default",
5757
+ hue: "gray",
5296
5758
  iconPosition: "left",
5297
5759
  hasIcon: false
5298
5760
  },
5299
5761
  compoundVariants: [
5300
5762
  {
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",
5763
+ hue: "gray",
5764
+ appearance: "default",
5319
5765
  css: {
5320
- color: { base: "tan.70", _dark: "tan.20" },
5321
- bg: { base: "tan.10", _dark: "tan.70" }
5766
+ color: "text.subtle",
5767
+ bg: "bg.neutral"
5322
5768
  }
5323
5769
  },
5324
5770
  {
5325
- hue: "tan",
5326
- variant: "bold",
5771
+ hue: "gray",
5772
+ appearance: "bold",
5327
5773
  css: {
5328
- color: { base: "gray.0", _dark: "tan.80" },
5329
- bg: { base: "tan.50", _dark: "tan.20" }
5774
+ color: "text.inverse",
5775
+ bg: "bg.neutral.boldest"
5330
5776
  }
5331
5777
  },
5332
5778
  {
5333
5779
  hue: "red",
5334
- variant: "default",
5780
+ appearance: "default",
5335
5781
  css: {
5336
- color: { base: "red.70", _dark: "red.10" },
5337
- bg: { base: "red.10", _dark: "red.70" }
5782
+ color: { base: "red.70", _dark: "red.20" },
5783
+ bg: { base: "red.20", _dark: "red.100" }
5338
5784
  }
5339
5785
  },
5340
5786
  {
5341
5787
  hue: "red",
5342
- variant: "bold",
5788
+ appearance: "bold",
5343
5789
  css: {
5344
- color: { base: "gray.0", _dark: "red.80" },
5345
- bg: { base: "red.50", _dark: "red.20" }
5790
+ color: { base: "red.10", _dark: "red.100" },
5791
+ bg: { base: "red.60", _dark: "red.40" }
5346
5792
  }
5347
5793
  },
5348
5794
  {
5349
- hue: "tomato",
5350
- variant: "default",
5795
+ hue: "orange",
5796
+ appearance: "default",
5351
5797
  css: {
5352
- color: { base: "tomato.70", _dark: "tomato.20" },
5353
- bg: { base: "tomato.10", _dark: "tomato.70" }
5798
+ color: { base: "orange.70", _dark: "orange.20" },
5799
+ bg: { base: "orange.20", _dark: "orange.100" }
5354
5800
  }
5355
5801
  },
5356
5802
  {
5357
- hue: "tomato",
5358
- variant: "bold",
5803
+ hue: "orange",
5804
+ appearance: "bold",
5359
5805
  css: {
5360
- color: { base: "gray.0", _dark: "tomato.80" },
5361
- bg: { base: "tomato.50", _dark: "tomato.20" }
5806
+ color: { base: "orange.10", _dark: "orange.100" },
5807
+ bg: { base: "orange.60", _dark: "orange.50" }
5362
5808
  }
5363
5809
  },
5364
5810
  {
5365
- hue: "orange",
5366
- variant: "default",
5811
+ hue: "yellow",
5812
+ appearance: "default",
5367
5813
  css: {
5368
- color: { base: "orange.70", _dark: "orange.20" },
5369
- bg: { base: "orange.10", _dark: "orange.70" }
5814
+ color: { base: "yellow.80", _dark: "yellow.50" },
5815
+ bg: { base: "yellow.20", _dark: "yellow.90" }
5370
5816
  }
5371
5817
  },
5372
5818
  {
5373
- hue: "orange",
5374
- variant: "bold",
5819
+ hue: "yellow",
5820
+ appearance: "bold",
5375
5821
  css: {
5376
- color: { base: "orange.5", _dark: "orange.80" },
5377
- bg: { base: "orange.60", _dark: "orange.20" }
5822
+ color: { base: "yellow.100", _dark: "yellow.100" },
5823
+ bg: { base: "yellow.40", _dark: "yellow.60" }
5378
5824
  }
5379
5825
  },
5380
5826
  {
5381
- hue: "yellow",
5382
- variant: "default",
5827
+ hue: "lime",
5828
+ appearance: "default",
5383
5829
  css: {
5384
- color: { base: "yellow.60", _dark: "yellow.10" },
5385
- bg: { base: "yellow.10", _dark: "yellow.60" }
5830
+ color: { base: "lime.70", _dark: "lime.20" },
5831
+ bg: { base: "lime.20", _dark: "lime.90" }
5386
5832
  }
5387
5833
  },
5388
5834
  {
5389
- hue: "yellow",
5390
- variant: "bold",
5835
+ hue: "lime",
5836
+ appearance: "bold",
5391
5837
  css: {
5392
- color: { base: "yellow.70", _dark: "yellow.90" },
5393
- bg: { base: "yellow.20", _dark: "yellow.20" }
5838
+ color: { base: "lime.10", _dark: "lime.100" },
5839
+ bg: { base: "lime.60", _dark: "lime.40" }
5394
5840
  }
5395
5841
  },
5396
5842
  {
5397
5843
  hue: "green",
5398
- variant: "default",
5844
+ appearance: "default",
5399
5845
  css: {
5400
5846
  color: { base: "green.70", _dark: "green.20" },
5401
- bg: { base: "green.10", _dark: "green.70" }
5847
+ bg: { base: "green.20", _dark: "green.90" }
5402
5848
  }
5403
5849
  },
5404
5850
  {
5405
5851
  hue: "green",
5406
- variant: "bold",
5852
+ appearance: "bold",
5407
5853
  css: {
5408
- color: { base: "gray.0", _dark: "green.80" },
5409
- bg: { base: "green.50", _dark: "green.20" }
5854
+ color: { base: "gray.10", _dark: "green.100" },
5855
+ bg: { base: "green.70", _dark: "green.40" }
5410
5856
  }
5411
5857
  },
5412
5858
  {
5413
- hue: "grass",
5414
- variant: "default",
5859
+ hue: "teal",
5860
+ appearance: "default",
5415
5861
  css: {
5416
- color: { base: "grass.70", _dark: "grass.10" },
5417
- bg: { base: "grass.10", _dark: "grass.70" }
5862
+ color: { base: "teal.80", _dark: "teal.20" },
5863
+ bg: { base: "teal.20", _dark: "teal.90" }
5418
5864
  }
5419
5865
  },
5420
5866
  {
5421
- hue: "grass",
5422
- variant: "bold",
5867
+ hue: "teal",
5868
+ appearance: "bold",
5423
5869
  css: {
5424
- color: { base: "gray.0", _dark: "grass.80" },
5425
- bg: { base: "grass.60", _dark: "grass.20" }
5870
+ color: { base: "teal.10", _dark: "teal.100" },
5871
+ bg: { base: "teal.60", _dark: "teal.50" }
5426
5872
  }
5427
5873
  },
5428
5874
  {
5429
- hue: "mint",
5430
- variant: "default",
5875
+ hue: "blue",
5876
+ appearance: "default",
5431
5877
  css: {
5432
- color: { base: "mint.80", _dark: "mint.30" },
5433
- bg: { base: "mint.10", _dark: "mint.80" }
5878
+ color: { base: "blue.70", _dark: "blue.20" },
5879
+ bg: { base: "blue.20", _dark: "blue.90" }
5434
5880
  }
5435
5881
  },
5436
5882
  {
5437
- hue: "mint",
5438
- variant: "bold",
5883
+ hue: "blue",
5884
+ appearance: "bold",
5439
5885
  css: {
5440
- color: { base: "gray.0", _dark: "mint.80" },
5441
- bg: { base: "mint.70", _dark: "mint.20" }
5886
+ color: { base: "blue.10", _dark: "blue.10" },
5887
+ bg: { base: "blue.50", _dark: "blue.70" }
5442
5888
  }
5443
5889
  },
5444
5890
  {
5445
- hue: "cyan",
5446
- variant: "default",
5891
+ hue: "indigo",
5892
+ appearance: "default",
5447
5893
  css: {
5448
- color: { base: "cyan.70", _dark: "cyan.20" },
5449
- bg: { base: "cyan.10", _dark: "cyan.70" }
5894
+ color: { base: "indigo.70", _dark: "indigo.20" },
5895
+ bg: { base: "indigo.20", _dark: "indigo.90" }
5450
5896
  }
5451
5897
  },
5452
5898
  {
5453
- hue: "cyan",
5454
- variant: "bold",
5899
+ hue: "indigo",
5900
+ appearance: "bold",
5455
5901
  css: {
5456
- color: { base: "cyan.5", _dark: "cyan.80" },
5457
- bg: { base: "cyan.60", _dark: "cyan.30" }
5902
+ color: { base: "indigo.10", _dark: "indigo.10" },
5903
+ bg: { base: "indigo.60", _dark: "indigo.70" }
5458
5904
  }
5459
5905
  },
5460
5906
  {
5461
- hue: "blue",
5462
- variant: "default",
5907
+ hue: "purple",
5908
+ appearance: "default",
5463
5909
  css: {
5464
- color: { base: "blue.70", _dark: "blue.20" },
5465
- bg: { base: "blue.10", _dark: "blue.70" }
5910
+ color: { base: "purple.70", _dark: "purple.20" },
5911
+ bg: { base: "purple.20", _dark: "purple.90" }
5466
5912
  }
5467
5913
  },
5468
5914
  {
5469
- hue: "blue",
5470
- variant: "bold",
5915
+ hue: "purple",
5916
+ appearance: "bold",
5471
5917
  css: {
5472
- color: { base: "gray.0", _dark: "blue.90" },
5473
- bg: { base: "blue.50", _dark: "blue.40" }
5918
+ color: { base: "purple.10", _dark: "purple.10" },
5919
+ bg: { base: "purple.60", _dark: "purple.80" }
5474
5920
  }
5475
5921
  },
5476
5922
  {
5477
- hue: "indigo",
5478
- variant: "default",
5923
+ hue: "magenta",
5924
+ appearance: "default",
5479
5925
  css: {
5480
- color: { base: "indigo.70", _dark: "indigo.10" },
5481
- bg: { base: "indigo.10", _dark: "indigo.70" }
5926
+ color: { base: "magenta.80", _dark: "magenta.20" },
5927
+ bg: { base: "magenta.20", _dark: "magenta.90" }
5482
5928
  }
5483
5929
  },
5484
5930
  {
5485
- hue: "indigo",
5486
- variant: "bold",
5931
+ hue: "magenta",
5932
+ appearance: "bold",
5487
5933
  css: {
5488
- color: { base: "indigo.5", _dark: "indigo.80" },
5489
- bg: { base: "indigo.50", _dark: "indigo.20" }
5934
+ color: { base: "magenta.10", _dark: "magenta.10" },
5935
+ bg: { base: "magenta.70", _dark: "magenta.70" }
5490
5936
  }
5491
5937
  },
5492
5938
  {
5493
- hue: "purple",
5494
- variant: "default",
5939
+ hue: "tan",
5940
+ appearance: "default",
5495
5941
  css: {
5496
- color: { base: "purple.70", _dark: "purple.20" },
5497
- bg: { base: "purple.10", _dark: "purple.70" }
5942
+ color: { base: "tan.70", _dark: "tan.20" },
5943
+ bg: { base: "tan.20", _dark: "tan.80" }
5498
5944
  }
5499
5945
  },
5500
5946
  {
5501
- hue: "purple",
5502
- variant: "bold",
5947
+ hue: "tan",
5948
+ appearance: "bold",
5503
5949
  css: {
5504
- color: { base: "gray.0", _dark: "purple.80" },
5505
- bg: { base: "purple.50", _dark: "purple.20" }
5950
+ color: { base: "gray.10", _dark: "tan.90" },
5951
+ bg: { base: "tan.60", _dark: "tan.40" }
5506
5952
  }
5953
+ }
5954
+ ]
5955
+ });
5956
+ const baseButtonStyles = {
5957
+ container: {
5958
+ position: "relative",
5959
+ appearance: "none",
5960
+ display: "flex",
5961
+ alignItems: "center",
5962
+ gap: 4,
5963
+ minWidth: 0,
5964
+ transitionDuration: "fast",
5965
+ transitionProperty: "background, border-color, color, box-shadow",
5966
+ transitionTimingFunction: "default",
5967
+ userSelect: "none",
5968
+ verticalAlign: "middle",
5969
+ fontFamily: "sans",
5970
+ fontWeight: "medium",
5971
+ fontSize: 16,
5972
+ lineHeight: "default",
5973
+ borderWidth: 1,
5974
+ borderStyle: "solid",
5975
+ borderColor: "transparent",
5976
+ borderRadius: 4,
5977
+ outlineWidth: 2,
5978
+ outlineStyle: "solid",
5979
+ outlineColor: "transparent",
5980
+ // outlineOffset: 1,
5981
+ textDecoration: "none",
5982
+ whiteSpace: "nowrap",
5983
+ cursor: "pointer",
5984
+ _focusVisible: {
5985
+ // borderColor: 'border.focused',
5986
+ outlineColor: "border.focused"
5987
+ },
5988
+ _disabled: {
5989
+ cursor: "not-allowed",
5990
+ bg: "bg.disabled",
5991
+ color: "text.disabled",
5992
+ borderColor: "border.disabled",
5993
+ icon: { fill: "icon.disabled" },
5994
+ _hover: {
5995
+ bg: "bg.disabled",
5996
+ color: "text.disabled",
5997
+ borderColor: "border.disabled",
5998
+ icon: { fill: "icon.disabled" }
5999
+ }
6000
+ },
6001
+ _selected: {
6002
+ bg: "bg.selected",
6003
+ color: "text.selected",
6004
+ borderColor: "transparent",
6005
+ icon: { fill: "icon.selected" }
6006
+ }
6007
+ },
6008
+ icon: {
6009
+ aspectRatio: "square",
6010
+ transitionDuration: "fast",
6011
+ transitionProperty: "fill",
6012
+ transitionTimingFunction: "default"
6013
+ }
6014
+ };
6015
+ const buttonVariants = {
6016
+ appearance: {
6017
+ default: {
6018
+ container: {
6019
+ bg: "bg.neutral",
6020
+ color: "text",
6021
+ icon: { fill: "icon.decorative" },
6022
+ _hover: {
6023
+ bg: "bg.neutral.hovered",
6024
+ icon: { fill: "icon.decorative.hovered" }
6025
+ },
6026
+ _active: {
6027
+ bg: "bg.neutral.pressed",
6028
+ icon: { fill: "icon.decorative.hovered" }
6029
+ }
6030
+ }
6031
+ },
6032
+ primary: {
6033
+ container: {
6034
+ bg: "bg.brand.boldest",
6035
+ color: "text.inverse",
6036
+ icon: { fill: "icon.decorative.inverse" },
6037
+ _hover: {
6038
+ bg: "bg.brand.boldest.hovered",
6039
+ icon: { fill: "icon.inverse" }
6040
+ },
6041
+ _active: {
6042
+ bg: "bg.brand.boldest.pressed",
6043
+ icon: { fill: "icon.inverse" }
6044
+ }
6045
+ }
6046
+ },
6047
+ subtle: {
6048
+ container: {
6049
+ bg: "bg.neutral.subtle",
6050
+ color: "text.subtle",
6051
+ icon: { fill: "icon.decorative" },
6052
+ _hover: {
6053
+ bg: "bg.neutral.subtle.hovered",
6054
+ color: "text",
6055
+ icon: { fill: "icon.decorative.hovered" }
6056
+ },
6057
+ _active: {
6058
+ bg: "bg.neutral.subtle.pressed",
6059
+ color: "text",
6060
+ icon: { fill: "icon.decorative.hovered" }
6061
+ }
6062
+ }
6063
+ },
6064
+ hollow: {
6065
+ container: {
6066
+ bg: "bg.neutral.subtle",
6067
+ color: "text.subtle",
6068
+ borderColor: "border",
6069
+ icon: { fill: "icon.decorative" },
6070
+ _hover: {
6071
+ bg: "bg.neutral.subtle.hovered",
6072
+ color: "text",
6073
+ borderColor: "border",
6074
+ icon: { fill: "icon.decorative.hovered" }
6075
+ },
6076
+ _active: {
6077
+ bg: "bg.neutral.subtle.pressed",
6078
+ color: "text",
6079
+ borderColor: "border",
6080
+ icon: { fill: "icon.decorative.hovered" }
6081
+ },
6082
+ _disabled: {
6083
+ borderColor: "border.disabled",
6084
+ _hover: {
6085
+ borderColor: "border.disabled"
6086
+ }
6087
+ }
6088
+ }
6089
+ }
6090
+ }
6091
+ };
6092
+ const buttonRecipe$1 = defineSlotRecipe({
6093
+ className: "button",
6094
+ jsx: ["Button"],
6095
+ slots: ["container", "icon"],
6096
+ base: baseButtonStyles,
6097
+ variants: {
6098
+ ...buttonVariants,
6099
+ size: {
6100
+ default: {
6101
+ container: {
6102
+ fontSize: "16",
6103
+ py: "3",
6104
+ px: "12"
6105
+ },
6106
+ icon: {
6107
+ w: "24",
6108
+ h: "24"
6109
+ }
6110
+ },
6111
+ xlarge: {
6112
+ container: {
6113
+ fontSize: "20",
6114
+ py: "9",
6115
+ px: "16"
6116
+ },
6117
+ icon: {
6118
+ w: "28",
6119
+ h: "28"
6120
+ }
6121
+ },
6122
+ large: {
6123
+ container: {
6124
+ fontSize: "16",
6125
+ py: "7",
6126
+ px: "14"
6127
+ },
6128
+ icon: {
6129
+ w: "24",
6130
+ h: "24"
6131
+ }
6132
+ },
6133
+ small: {
6134
+ container: {
6135
+ fontSize: "14",
6136
+ py: "1",
6137
+ px: "8"
6138
+ },
6139
+ icon: {
6140
+ w: "22",
6141
+ h: "22"
6142
+ }
6143
+ }
6144
+ },
6145
+ iconBefore: {
6146
+ true: { container: {} }
5507
6147
  },
6148
+ iconAfter: {
6149
+ true: { container: {} }
6150
+ }
6151
+ },
6152
+ compoundVariants: [
5508
6153
  {
5509
- hue: "violet",
5510
- variant: "default",
6154
+ size: "default",
6155
+ iconBefore: true,
5511
6156
  css: {
5512
- color: { base: "violet.70", _dark: "violet.10" },
5513
- bg: { base: "violet.10", _dark: "violet.70" }
6157
+ container: { ps: "3" }
5514
6158
  }
5515
6159
  },
5516
6160
  {
5517
- hue: "violet",
5518
- variant: "bold",
6161
+ size: "default",
6162
+ iconAfter: true,
5519
6163
  css: {
5520
- color: { base: "violet.5", _dark: "violet.80" },
5521
- bg: { base: "violet.60", _dark: "violet.20" }
6164
+ container: { pe: "3" }
5522
6165
  }
5523
6166
  },
5524
6167
  {
5525
- hue: "pink",
5526
- variant: "default",
6168
+ size: "small",
6169
+ iconBefore: true,
5527
6170
  css: {
5528
- color: { base: "pink.70", _dark: "pink.10" },
5529
- bg: { base: "pink.10", _dark: "pink.70" }
6171
+ container: { ps: "2" }
5530
6172
  }
5531
6173
  },
5532
6174
  {
5533
- hue: "pink",
5534
- variant: "bold",
6175
+ size: "small",
6176
+ iconAfter: true,
5535
6177
  css: {
5536
- color: { base: "pink.5", _dark: "pink.80" },
5537
- bg: { base: "pink.70", _dark: "pink.20" }
6178
+ container: { pe: "2" }
5538
6179
  }
5539
6180
  },
5540
6181
  {
5541
- hue: "rose",
5542
- variant: "default",
6182
+ size: "large",
6183
+ iconBefore: true,
5543
6184
  css: {
5544
- color: { base: "rose.70", _dark: "rose.10" },
5545
- bg: { base: "rose.10", _dark: "rose.70" }
6185
+ container: { ps: "5" }
5546
6186
  }
5547
6187
  },
5548
6188
  {
5549
- hue: "rose",
5550
- variant: "bold",
6189
+ size: "large",
6190
+ iconAfter: true,
5551
6191
  css: {
5552
- color: { base: "rose.5", _dark: "rose.80" },
5553
- bg: { base: "rose.60", _dark: "rose.20" }
6192
+ container: { pe: "5" }
5554
6193
  }
5555
6194
  },
5556
6195
  {
5557
- hue: "magenta",
5558
- variant: "default",
6196
+ size: "xlarge",
6197
+ iconBefore: true,
5559
6198
  css: {
5560
- color: { base: "magenta.70", _dark: "magenta.10" },
5561
- bg: { base: "magenta.10", _dark: "magenta.70" }
6199
+ container: { ps: "7" }
5562
6200
  }
5563
6201
  },
5564
6202
  {
5565
- hue: "magenta",
5566
- variant: "bold",
6203
+ size: "xlarge",
6204
+ iconAfter: true,
5567
6205
  css: {
5568
- color: { base: "magenta.5", _dark: "magenta.80" },
5569
- bg: { base: "magenta.60", _dark: "magenta.20" }
6206
+ container: { pe: "7" }
5570
6207
  }
5571
6208
  }
5572
- ]
6209
+ ],
6210
+ defaultVariants: {
6211
+ appearance: "default",
6212
+ size: "default"
6213
+ }
6214
+ });
6215
+ const iconButtonRecipe$1 = defineSlotRecipe({
6216
+ className: "iconButton",
6217
+ jsx: ["IconButton"],
6218
+ slots: ["container", "icon"],
6219
+ base: baseButtonStyles,
6220
+ variants: {
6221
+ ...buttonVariants,
6222
+ size: {
6223
+ default: {
6224
+ container: {
6225
+ fontSize: "16",
6226
+ p: "3"
6227
+ },
6228
+ icon: {
6229
+ w: "24",
6230
+ h: "24"
6231
+ }
6232
+ },
6233
+ large: {
6234
+ container: {
6235
+ fontSize: "16",
6236
+ p: "7"
6237
+ },
6238
+ icon: {
6239
+ w: "24",
6240
+ h: "24"
6241
+ }
6242
+ },
6243
+ small: {
6244
+ container: {
6245
+ fontSize: "14",
6246
+ p: "1"
6247
+ },
6248
+ icon: {
6249
+ w: "22",
6250
+ h: "22"
6251
+ }
6252
+ }
6253
+ }
6254
+ },
6255
+ defaultVariants: {
6256
+ appearance: "default",
6257
+ size: "default"
6258
+ }
5573
6259
  });
5574
6260
  const checkboxRecipe$1 = defineSlotRecipe({
5575
6261
  className: "checkbox",
@@ -5583,7 +6269,11 @@ const checkboxRecipe$1 = defineSlotRecipe({
5583
6269
  gap: 4,
5584
6270
  alignItems: "start",
5585
6271
  cursor: "pointer",
5586
- userSelect: "none"
6272
+ userSelect: "none",
6273
+ color: "text",
6274
+ _error: {
6275
+ color: "text.danger"
6276
+ }
5587
6277
  },
5588
6278
  input: {
5589
6279
  position: "absolute",
@@ -5600,7 +6290,7 @@ const checkboxRecipe$1 = defineSlotRecipe({
5600
6290
  _checked: {
5601
6291
  "& ~ [name='checkbox-checked']": {
5602
6292
  display: "inline-grid",
5603
- fill: { base: "slate.90", _dark: "slate.0" }
6293
+ fill: "icon"
5604
6294
  },
5605
6295
  "& ~ [name='checkbox']": {
5606
6296
  display: "none"
@@ -5609,7 +6299,7 @@ const checkboxRecipe$1 = defineSlotRecipe({
5609
6299
  _indeterminate: {
5610
6300
  "& ~ [name='checkbox-indeterminate']": {
5611
6301
  display: "inline-grid",
5612
- fill: { base: "slate.90", _dark: "slate.0" },
6302
+ fill: "icon",
5613
6303
  _disabled: {}
5614
6304
  },
5615
6305
  "& ~ [name='checkbox']": {
@@ -5618,23 +6308,25 @@ const checkboxRecipe$1 = defineSlotRecipe({
5618
6308
  },
5619
6309
  _disabled: {
5620
6310
  "& ~ svg": {
5621
- opacity: 0.4,
5622
- pointerEvents: "none",
5623
- cursor: "none"
6311
+ // fill: 'icon.disabled',
6312
+ pointerEvents: "none"
5624
6313
  },
5625
- display: "inline-grid"
6314
+ display: "inline-grid",
6315
+ _hover: {
6316
+ cursor: "not-allowed"
6317
+ }
5626
6318
  },
5627
6319
  _error: {
5628
6320
  display: "inline-grid",
5629
6321
  "& ~ svg": {
5630
- fill: { base: "error.default", _dark: "error.default" }
6322
+ fill: "icon.danger"
5631
6323
  }
5632
6324
  },
5633
6325
  _focusVisible: {
5634
6326
  "& ~ [name='checkbox-focus']": {
5635
6327
  display: "inline-grid",
5636
6328
  position: "absolute",
5637
- fill: { base: "slate.90", _dark: "slate.1" }
6329
+ fill: "border.focused"
5638
6330
  }
5639
6331
  }
5640
6332
  },
@@ -5645,7 +6337,7 @@ const checkboxRecipe$1 = defineSlotRecipe({
5645
6337
  height: 24,
5646
6338
  "&:is([name='checkbox'])": {
5647
6339
  display: "inline-grid",
5648
- fill: { base: "slate.30", _dark: "slate.20" }
6340
+ fill: "icon.subtlest"
5649
6341
  }
5650
6342
  }
5651
6343
  }
@@ -5679,7 +6371,7 @@ const radioRecipe$1 = defineSlotRecipe({
5679
6371
  _checked: {
5680
6372
  "& ~ [name='radio-checked']": {
5681
6373
  display: "inline-grid",
5682
- fill: { base: "gray.90", _dark: "gray.0" }
6374
+ fill: { base: "gray.90", _dark: "gray.10" }
5683
6375
  },
5684
6376
  "& ~ [name='radio']": {
5685
6377
  display: "none"
@@ -5731,8 +6423,8 @@ const tooltipBase = {
5731
6423
  display: "flex",
5732
6424
  flexDirection: "column",
5733
6425
  gap: "4",
5734
- bg: { base: "gray.90", _dark: "gray.0" },
5735
- color: { base: "gray.0", _dark: "gray.90" },
6426
+ bg: { base: "gray.90", _dark: "gray.10" },
6427
+ color: { base: "gray.10", _dark: "gray.90" },
5736
6428
  py: "8",
5737
6429
  px: "12",
5738
6430
  fontFamily: "body",
@@ -5768,7 +6460,7 @@ const tooltipVariants = {
5768
6460
  top: "100%",
5769
6461
  left: "50%",
5770
6462
  transform: "translate(-50%, -2%)",
5771
- borderTopColor: { base: "gray.90", _dark: "gray.0" }
6463
+ borderTopColor: { base: "gray.90", _dark: "gray.10" }
5772
6464
  }
5773
6465
  }
5774
6466
  },
@@ -5781,7 +6473,7 @@ const tooltipVariants = {
5781
6473
  bottom: "100%",
5782
6474
  left: "50%",
5783
6475
  transform: "translate(-50%, 2%)",
5784
- borderBottomColor: { base: "gray.90", _dark: "gray.0" }
6476
+ borderBottomColor: { base: "gray.90", _dark: "gray.10" }
5785
6477
  }
5786
6478
  }
5787
6479
  },
@@ -5794,7 +6486,7 @@ const tooltipVariants = {
5794
6486
  top: "50%",
5795
6487
  right: "-6%",
5796
6488
  transform: "translate(48%, -50%)",
5797
- borderLeftColor: { base: "gray.90", _dark: "gray.0" }
6489
+ borderLeftColor: { base: "gray.90", _dark: "gray.10" }
5798
6490
  }
5799
6491
  }
5800
6492
  },
@@ -5807,7 +6499,7 @@ const tooltipVariants = {
5807
6499
  top: "50%",
5808
6500
  left: "-6%",
5809
6501
  transform: "translate(-48%, -50%)",
5810
- borderRightColor: { base: "gray.90", _dark: "gray.0" }
6502
+ borderRightColor: { base: "gray.90", _dark: "gray.10" }
5811
6503
  }
5812
6504
  }
5813
6505
  },
@@ -5819,7 +6511,7 @@ const tooltipVariants = {
5819
6511
  top: "100%",
5820
6512
  left: "8",
5821
6513
  transform: "translate(0, -2%)",
5822
- borderTopColor: { base: "gray.90", _dark: "gray.0" }
6514
+ borderTopColor: { base: "gray.90", _dark: "gray.10" }
5823
6515
  }
5824
6516
  }
5825
6517
  },
@@ -5832,7 +6524,7 @@ const tooltipVariants = {
5832
6524
  bottom: "100%",
5833
6525
  left: "8",
5834
6526
  transform: "translate(0%, 2%)",
5835
- borderBottomColor: { base: "gray.90", _dark: "gray.0" }
6527
+ borderBottomColor: { base: "gray.90", _dark: "gray.10" }
5836
6528
  }
5837
6529
  }
5838
6530
  },
@@ -5845,7 +6537,7 @@ const tooltipVariants = {
5845
6537
  top: "8",
5846
6538
  right: "-6%",
5847
6539
  transform: "translate(48%, 0)",
5848
- borderLeftColor: { base: "gray.90", _dark: "gray.0" }
6540
+ borderLeftColor: { base: "gray.90", _dark: "gray.10" }
5849
6541
  }
5850
6542
  }
5851
6543
  },
@@ -5858,7 +6550,7 @@ const tooltipVariants = {
5858
6550
  top: "8",
5859
6551
  left: "-6%",
5860
6552
  transform: "translate(-48%, 0)",
5861
- borderRightColor: { base: "gray.90", _dark: "gray.0" }
6553
+ borderRightColor: { base: "gray.90", _dark: "gray.10" }
5862
6554
  }
5863
6555
  }
5864
6556
  },
@@ -5870,7 +6562,7 @@ const tooltipVariants = {
5870
6562
  top: "100%",
5871
6563
  right: "8",
5872
6564
  transform: "translate(0, -2%)",
5873
- borderTopColor: { base: "gray.90", _dark: "gray.0" }
6565
+ borderTopColor: { base: "gray.90", _dark: "gray.10" }
5874
6566
  }
5875
6567
  }
5876
6568
  },
@@ -5883,7 +6575,7 @@ const tooltipVariants = {
5883
6575
  bottom: "100%",
5884
6576
  right: "8",
5885
6577
  transform: "translate(0%, 2%)",
5886
- borderBottomColor: { base: "gray.90", _dark: "gray.0" }
6578
+ borderBottomColor: { base: "gray.90", _dark: "gray.10" }
5887
6579
  }
5888
6580
  }
5889
6581
  },
@@ -5896,7 +6588,7 @@ const tooltipVariants = {
5896
6588
  bottom: "8",
5897
6589
  right: "-6%",
5898
6590
  transform: "translate(48%, 0)",
5899
- borderLeftColor: { base: "gray.90", _dark: "gray.0" }
6591
+ borderLeftColor: { base: "gray.90", _dark: "gray.10" }
5900
6592
  }
5901
6593
  }
5902
6594
  },
@@ -5909,7 +6601,7 @@ const tooltipVariants = {
5909
6601
  bottom: "8",
5910
6602
  left: "-6%",
5911
6603
  transform: "translate(-48%, 0)",
5912
- borderRightColor: { base: "gray.90", _dark: "gray.0" }
6604
+ borderRightColor: { base: "gray.90", _dark: "gray.10" }
5913
6605
  }
5914
6606
  }
5915
6607
  }
@@ -6037,7 +6729,7 @@ const menuBase = {
6037
6729
  left: "0",
6038
6730
  bottom: "0",
6039
6731
  width: { base: "full", md: "260" },
6040
- bg: { base: "gray.0", _dark: "gray.80" },
6732
+ bg: { base: "gray.10", _dark: "gray.80" },
6041
6733
  py: { base: "12", md: "4" },
6042
6734
  boxShadow: "medium",
6043
6735
  borderRadius: {
@@ -6047,7 +6739,7 @@ const menuBase = {
6047
6739
  borderBottomLeftRadius: { base: "0", md: "4" },
6048
6740
  borderBottomRightRadius: { base: "0", md: "4" },
6049
6741
  "& ~ svg": {
6050
- fill: { base: "gray.90", _dark: "gray.0" },
6742
+ fill: { base: "gray.90", _dark: "gray.10" },
6051
6743
  mr: "auto"
6052
6744
  },
6053
6745
  overflow: "hidden",
@@ -6071,14 +6763,14 @@ const menuBase = {
6071
6763
  w: "full"
6072
6764
  },
6073
6765
  _hover: {
6074
- bg: { base: "gray.2", _dark: "gray.50" },
6766
+ bg: { base: "gray.2", _dark: "gray.100" },
6075
6767
  cursor: "pointer"
6076
6768
  },
6077
6769
  _active: {
6078
6770
  bg: { base: "gray.10", _dark: "gray.100" }
6079
6771
  },
6080
6772
  _focusVisible: {
6081
- outlineColor: { base: "gray.90", _dark: "gray.0" },
6773
+ outlineColor: { base: "gray.90", _dark: "gray.10" },
6082
6774
  outlineOffset: "-2"
6083
6775
  },
6084
6776
  _disabled: {
@@ -6106,7 +6798,7 @@ const menuBase = {
6106
6798
  py: "4",
6107
6799
  pr: "12",
6108
6800
  pl: "4",
6109
- bg: { base: "gray.5", _dark: "gray.60" },
6801
+ bg: { base: "gray.10", _dark: "gray.60" },
6110
6802
  cursor: "pointer"
6111
6803
  },
6112
6804
  multiLevelIcon: { ml: "auto" },
@@ -6168,14 +6860,14 @@ const componentRecipes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.de
6168
6860
  badgeRecipe,
6169
6861
  boxRecipe,
6170
6862
  breadcrumbsRecipe,
6171
- buttonRecipe,
6863
+ buttonRecipe: buttonRecipe$1,
6172
6864
  cardRecipe,
6173
6865
  checkboxInputRecipe,
6174
6866
  checkboxRecipe: checkboxRecipe$1,
6175
6867
  codeRecipe,
6176
6868
  dividerRecipe,
6177
6869
  headingRecipe,
6178
- iconButtonRecipe,
6870
+ iconButtonRecipe: iconButtonRecipe$1,
6179
6871
  labelRecipe,
6180
6872
  linkRecipe,
6181
6873
  menuRecipe: menuRecipe$1,
@@ -6192,6 +6884,8 @@ const componentRecipes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.de
6192
6884
  tooltipRecipe: tooltipRecipe$1
6193
6885
  }, Symbol.toStringTag, { value: "Module" }));
6194
6886
  const {
6887
+ buttonRecipe,
6888
+ iconButtonRecipe,
6195
6889
  checkboxRecipe,
6196
6890
  radioRecipe,
6197
6891
  tooltipRecipe,
@@ -6200,17 +6894,14 @@ const {
6200
6894
  ...regularComponents
6201
6895
  } = componentRecipes;
6202
6896
  const transformedRecipes = Object.fromEntries(
6203
- Object.entries(regularComponents).map(([key, value]) => [
6204
- key.replace(/Recipe$/, ""),
6205
- value
6206
- ])
6897
+ Object.entries(regularComponents).map(([key, value]) => [key.replace(/Recipe$/, ""), value])
6207
6898
  );
6208
6899
  const { box: _box, divider: _divider, ...pandaBasePresetPatterns } = index_default.patterns;
6209
6900
  const pandaBasePresetConditions = index_default.conditions;
6210
6901
  const pandaBasePresetUtilities = index_default.utilities;
6211
6902
  const pandaBasePresetGlobalCss = index_default.globalCss;
6212
6903
  const sizeKeys = Object.keys(sizes);
6213
- const { textStyles, breakpoints, keyframes, ...rawTokens } = tokens;
6904
+ const { breakpoints, keyframes, ...rawTokens } = tokens;
6214
6905
  const theme = {
6215
6906
  tokens: defineTokens({
6216
6907
  ...rawTokens,
@@ -6218,7 +6909,7 @@ const theme = {
6218
6909
  // Map spacing to our size scale for consistent sizing
6219
6910
  }),
6220
6911
  semanticTokens: defineSemanticTokens({
6221
- ...semanticTokens
6912
+ ...semantics
6222
6913
  })
6223
6914
  };
6224
6915
  const okshaunPreset = definePreset$1({
@@ -6238,6 +6929,8 @@ const okshaunPreset = definePreset$1({
6238
6929
  ...transformedRecipes
6239
6930
  },
6240
6931
  slotRecipes: {
6932
+ button: buttonRecipe,
6933
+ iconButton: iconButtonRecipe,
6241
6934
  checkbox: checkboxRecipe,
6242
6935
  radio: radioRecipe,
6243
6936
  tooltip: tooltipRecipe,
@@ -6289,8 +6982,10 @@ const okshaunPreset = definePreset$1({
6289
6982
  ...pandaBasePresetGlobalCss,
6290
6983
  ...globalCss,
6291
6984
  html: {
6292
- "--global-font-heading": "fonts.sans",
6293
- "--global-font-body": "fonts.serif",
6985
+ "--global-font-heading": "fonts.heading",
6986
+ "--global-font-body": "fonts.body",
6987
+ "--global-font-sans": "fonts.sans",
6988
+ "--global-font-serif": "fonts.serif",
6294
6989
  "--global-font-mono": "fonts.mono"
6295
6990
  }
6296
6991
  },