@tokenami/ds 0.0.74 → 0.0.75

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 (6) hide show
  1. package/README.md +19 -5
  2. package/dist/index.cjs +163 -63
  3. package/dist/index.d.cts +157 -63
  4. package/dist/index.d.ts +157 -63
  5. package/dist/index.js +163 -63
  6. package/package.json +3 -3
package/dist/index.d.ts CHANGED
@@ -144,7 +144,7 @@ declare const _default: {
144
144
  '::-webkit-inner-spin-button, ::-webkit-outer-spin-button': {
145
145
  height: "auto";
146
146
  };
147
- '::webkit-search-decoration': {
147
+ '::-webkit-search-decoration': {
148
148
  WebkitAppearance: "none";
149
149
  };
150
150
  summary: {
@@ -2501,29 +2501,6 @@ declare const _default: {
2501
2501
  };
2502
2502
  };
2503
2503
  root: {
2504
- alpha: {
2505
- '0': number;
2506
- '5': number;
2507
- '10': number;
2508
- '15': number;
2509
- '20': number;
2510
- '25': number;
2511
- '30': number;
2512
- '35': number;
2513
- '40': number;
2514
- '45': number;
2515
- '50': number;
2516
- '55': number;
2517
- '60': number;
2518
- '65': number;
2519
- '70': number;
2520
- '75': number;
2521
- '80': number;
2522
- '85': number;
2523
- '90': number;
2524
- '95': number;
2525
- '100': number;
2526
- };
2527
2504
  anim: {
2528
2505
  none: string;
2529
2506
  spin: string;
@@ -2548,6 +2525,11 @@ declare const _default: {
2548
2525
  '6xl': `${number}rem`;
2549
2526
  '7xl': `${number}rem`;
2550
2527
  };
2528
+ 'color-space': {
2529
+ srgb: string;
2530
+ oklch: string;
2531
+ oklab: string;
2532
+ };
2551
2533
  'drop-shadow': {
2552
2534
  xs: string;
2553
2535
  sm: string;
@@ -3190,22 +3172,14 @@ declare const _default: {
3190
3172
  mono: string;
3191
3173
  };
3192
3174
  gradient: {
3193
- 'to-t': "linear-gradient(to top in srgb, var(--gradient-from) var(--gradient-from-stop,/**/), var(---via, var(--gradient-to) var(--gradient-to-stop,/**/)));\n ---via: var(--gradient-via) var(--gradient-via-stop,/**/), var(--gradient-to)";
3194
- 'to-tr': "linear-gradient(to top right in srgb, var(--gradient-from) var(--gradient-from-stop,/**/), var(---via, var(--gradient-to) var(--gradient-to-stop,/**/)));\n ---via: var(--gradient-via) var(--gradient-via-stop,/**/), var(--gradient-to)";
3195
- 'to-r': "linear-gradient(to right in srgb, var(--gradient-from) var(--gradient-from-stop,/**/), var(---via, var(--gradient-to) var(--gradient-to-stop,/**/)));\n ---via: var(--gradient-via) var(--gradient-via-stop,/**/), var(--gradient-to)";
3196
- 'to-br': "linear-gradient(to bottom right in srgb, var(--gradient-from) var(--gradient-from-stop,/**/), var(---via, var(--gradient-to) var(--gradient-to-stop,/**/)));\n ---via: var(--gradient-via) var(--gradient-via-stop,/**/), var(--gradient-to)";
3197
- 'to-b': "linear-gradient(to bottom in srgb, var(--gradient-from) var(--gradient-from-stop,/**/), var(---via, var(--gradient-to) var(--gradient-to-stop,/**/)));\n ---via: var(--gradient-via) var(--gradient-via-stop,/**/), var(--gradient-to)";
3198
- 'to-bl': "linear-gradient(to bottom left in srgb, var(--gradient-from) var(--gradient-from-stop,/**/), var(---via, var(--gradient-to) var(--gradient-to-stop,/**/)));\n ---via: var(--gradient-via) var(--gradient-via-stop,/**/), var(--gradient-to)";
3199
- 'to-l': "linear-gradient(to left in srgb, var(--gradient-from) var(--gradient-from-stop,/**/), var(---via, var(--gradient-to) var(--gradient-to-stop,/**/)));\n ---via: var(--gradient-via) var(--gradient-via-stop,/**/), var(--gradient-to)";
3200
- 'to-tl': "linear-gradient(to top left in srgb, var(--gradient-from) var(--gradient-from-stop,/**/), var(---via, var(--gradient-to) var(--gradient-to-stop,/**/)));\n ---via: var(--gradient-via) var(--gradient-via-stop,/**/), var(--gradient-to)";
3201
- 'hd-to-t': "linear-gradient(to top in oklch, var(--gradient-from) var(--gradient-from-stop,/**/), var(---via, var(--gradient-to) var(--gradient-to-stop,/**/)));\n ---via: var(--gradient-via) var(--gradient-via-stop,/**/), var(--gradient-to)";
3202
- 'hd-to-tr': "linear-gradient(to top right in oklch, var(--gradient-from) var(--gradient-from-stop,/**/), var(---via, var(--gradient-to) var(--gradient-to-stop,/**/)));\n ---via: var(--gradient-via) var(--gradient-via-stop,/**/), var(--gradient-to)";
3203
- 'hd-to-r': "linear-gradient(to right in oklch, var(--gradient-from) var(--gradient-from-stop,/**/), var(---via, var(--gradient-to) var(--gradient-to-stop,/**/)));\n ---via: var(--gradient-via) var(--gradient-via-stop,/**/), var(--gradient-to)";
3204
- 'hd-to-br': "linear-gradient(to bottom right in oklch, var(--gradient-from) var(--gradient-from-stop,/**/), var(---via, var(--gradient-to) var(--gradient-to-stop,/**/)));\n ---via: var(--gradient-via) var(--gradient-via-stop,/**/), var(--gradient-to)";
3205
- 'hd-to-b': "linear-gradient(to bottom in oklch, var(--gradient-from) var(--gradient-from-stop,/**/), var(---via, var(--gradient-to) var(--gradient-to-stop,/**/)));\n ---via: var(--gradient-via) var(--gradient-via-stop,/**/), var(--gradient-to)";
3206
- 'hd-to-bl': "linear-gradient(to bottom left in oklch, var(--gradient-from) var(--gradient-from-stop,/**/), var(---via, var(--gradient-to) var(--gradient-to-stop,/**/)));\n ---via: var(--gradient-via) var(--gradient-via-stop,/**/), var(--gradient-to)";
3207
- 'hd-to-l': "linear-gradient(to left in oklch, var(--gradient-from) var(--gradient-from-stop,/**/), var(---via, var(--gradient-to) var(--gradient-to-stop,/**/)));\n ---via: var(--gradient-via) var(--gradient-via-stop,/**/), var(--gradient-to)";
3208
- 'hd-to-tl': "linear-gradient(to top left in oklch, var(--gradient-from) var(--gradient-from-stop,/**/), var(---via, var(--gradient-to) var(--gradient-to-stop,/**/)));\n ---via: var(--gradient-via) var(--gradient-via-stop,/**/), var(--gradient-to)";
3175
+ 'to-t': "linear-gradient(to top in var(--color-space, srgb), var(--gradient-from) var(--gradient-from-stop,/**/), var(---via, var(--gradient-to) var(--gradient-to-stop,/**/)));\n ---via: var(--gradient-via) var(--gradient-via-stop,/**/), var(--gradient-to)";
3176
+ 'to-tr': "linear-gradient(to top right in var(--color-space, srgb), var(--gradient-from) var(--gradient-from-stop,/**/), var(---via, var(--gradient-to) var(--gradient-to-stop,/**/)));\n ---via: var(--gradient-via) var(--gradient-via-stop,/**/), var(--gradient-to)";
3177
+ 'to-r': "linear-gradient(to right in var(--color-space, srgb), var(--gradient-from) var(--gradient-from-stop,/**/), var(---via, var(--gradient-to) var(--gradient-to-stop,/**/)));\n ---via: var(--gradient-via) var(--gradient-via-stop,/**/), var(--gradient-to)";
3178
+ 'to-br': "linear-gradient(to bottom right in var(--color-space, srgb), var(--gradient-from) var(--gradient-from-stop,/**/), var(---via, var(--gradient-to) var(--gradient-to-stop,/**/)));\n ---via: var(--gradient-via) var(--gradient-via-stop,/**/), var(--gradient-to)";
3179
+ 'to-b': "linear-gradient(to bottom in var(--color-space, srgb), var(--gradient-from) var(--gradient-from-stop,/**/), var(---via, var(--gradient-to) var(--gradient-to-stop,/**/)));\n ---via: var(--gradient-via) var(--gradient-via-stop,/**/), var(--gradient-to)";
3180
+ 'to-bl': "linear-gradient(to bottom left in var(--color-space, srgb), var(--gradient-from) var(--gradient-from-stop,/**/), var(---via, var(--gradient-to) var(--gradient-to-stop,/**/)));\n ---via: var(--gradient-via) var(--gradient-via-stop,/**/), var(--gradient-to)";
3181
+ 'to-l': "linear-gradient(to left in var(--color-space, srgb), var(--gradient-from) var(--gradient-from-stop,/**/), var(---via, var(--gradient-to) var(--gradient-to-stop,/**/)));\n ---via: var(--gradient-via) var(--gradient-via-stop,/**/), var(--gradient-to)";
3182
+ 'to-tl': "linear-gradient(to top left in var(--color-space, srgb), var(--gradient-from) var(--gradient-from-stop,/**/), var(---via, var(--gradient-to) var(--gradient-to-stop,/**/)));\n ---via: var(--gradient-via) var(--gradient-via-stop,/**/), var(--gradient-to)";
3209
3183
  };
3210
3184
  space: {
3211
3185
  '0': number;
@@ -3264,6 +3238,91 @@ declare const _default: {
3264
3238
  relaxed: number;
3265
3239
  loose: number;
3266
3240
  };
3241
+ mix: {
3242
+ opacity: "color-mix(in var(--color-space, srgb), var(--mix-color) calc(var(--mix-percent) * 1%), transparent)";
3243
+ tint: "color-mix(in var(--color-space, srgb), var(--mix-color), #fff calc(var(--mix-percent) * 1%))";
3244
+ shade: "color-mix(in var(--color-space, srgb), var(--mix-color), #000 calc(var(--mix-percent) * 1%))";
3245
+ };
3246
+ 'mix-accent': {
3247
+ opacity: "color-mix(in var(--color-space, srgb), var(--mix-accent-color) calc(var(--mix-accent-percent) * 1%), transparent)";
3248
+ tint: "color-mix(in var(--color-space, srgb), var(--mix-accent-color), #fff calc(var(--mix-accent-percent) * 1%))";
3249
+ shade: "color-mix(in var(--color-space, srgb), var(--mix-accent-color), #000 calc(var(--mix-accent-percent) * 1%))";
3250
+ };
3251
+ 'mix-bg': {
3252
+ opacity: "color-mix(in var(--color-space, srgb), var(--mix-bg-color) calc(var(--mix-bg-percent) * 1%), transparent)";
3253
+ tint: "color-mix(in var(--color-space, srgb), var(--mix-bg-color), #fff calc(var(--mix-bg-percent) * 1%))";
3254
+ shade: "color-mix(in var(--color-space, srgb), var(--mix-bg-color), #000 calc(var(--mix-bg-percent) * 1%))";
3255
+ };
3256
+ 'mix-border': {
3257
+ opacity: "color-mix(in var(--color-space, srgb), var(--mix-border-color) calc(var(--mix-border-percent) * 1%), transparent)";
3258
+ tint: "color-mix(in var(--color-space, srgb), var(--mix-border-color), #fff calc(var(--mix-border-percent) * 1%))";
3259
+ shade: "color-mix(in var(--color-space, srgb), var(--mix-border-color), #000 calc(var(--mix-border-percent) * 1%))";
3260
+ };
3261
+ 'mix-border-top': {
3262
+ opacity: "color-mix(in var(--color-space, srgb), var(--mix-border-top-color) calc(var(--mix-border-top-percent) * 1%), transparent)";
3263
+ tint: "color-mix(in var(--color-space, srgb), var(--mix-border-top-color), #fff calc(var(--mix-border-top-percent) * 1%))";
3264
+ shade: "color-mix(in var(--color-space, srgb), var(--mix-border-top-color), #000 calc(var(--mix-border-top-percent) * 1%))";
3265
+ };
3266
+ 'mix-border-right': {
3267
+ opacity: "color-mix(in var(--color-space, srgb), var(--mix-border-right-color) calc(var(--mix-border-right-percent) * 1%), transparent)";
3268
+ tint: "color-mix(in var(--color-space, srgb), var(--mix-border-right-color), #fff calc(var(--mix-border-right-percent) * 1%))";
3269
+ shade: "color-mix(in var(--color-space, srgb), var(--mix-border-right-color), #000 calc(var(--mix-border-right-percent) * 1%))";
3270
+ };
3271
+ 'mix-border-bottom': {
3272
+ opacity: "color-mix(in var(--color-space, srgb), var(--mix-border-bottom-color) calc(var(--mix-border-bottom-percent) * 1%), transparent)";
3273
+ tint: "color-mix(in var(--color-space, srgb), var(--mix-border-bottom-color), #fff calc(var(--mix-border-bottom-percent) * 1%))";
3274
+ shade: "color-mix(in var(--color-space, srgb), var(--mix-border-bottom-color), #000 calc(var(--mix-border-bottom-percent) * 1%))";
3275
+ };
3276
+ 'mix-border-left': {
3277
+ opacity: "color-mix(in var(--color-space, srgb), var(--mix-border-left-color) calc(var(--mix-border-left-percent) * 1%), transparent)";
3278
+ tint: "color-mix(in var(--color-space, srgb), var(--mix-border-left-color), #fff calc(var(--mix-border-left-percent) * 1%))";
3279
+ shade: "color-mix(in var(--color-space, srgb), var(--mix-border-left-color), #000 calc(var(--mix-border-left-percent) * 1%))";
3280
+ };
3281
+ 'mix-border-x': {
3282
+ opacity: "color-mix(in var(--color-space, srgb), var(--mix-border-x-color) calc(var(--mix-border-x-percent) * 1%), transparent)";
3283
+ tint: "color-mix(in var(--color-space, srgb), var(--mix-border-x-color), #fff calc(var(--mix-border-x-percent) * 1%))";
3284
+ shade: "color-mix(in var(--color-space, srgb), var(--mix-border-x-color), #000 calc(var(--mix-border-x-percent) * 1%))";
3285
+ };
3286
+ 'mix-border-y': {
3287
+ opacity: "color-mix(in var(--color-space, srgb), var(--mix-border-y-color) calc(var(--mix-border-y-percent) * 1%), transparent)";
3288
+ tint: "color-mix(in var(--color-space, srgb), var(--mix-border-y-color), #fff calc(var(--mix-border-y-percent) * 1%))";
3289
+ shade: "color-mix(in var(--color-space, srgb), var(--mix-border-y-color), #000 calc(var(--mix-border-y-percent) * 1%))";
3290
+ };
3291
+ 'mix-caret': {
3292
+ opacity: "color-mix(in var(--color-space, srgb), var(--mix-caret-color) calc(var(--mix-caret-percent) * 1%), transparent)";
3293
+ tint: "color-mix(in var(--color-space, srgb), var(--mix-caret-color), #fff calc(var(--mix-caret-percent) * 1%))";
3294
+ shade: "color-mix(in var(--color-space, srgb), var(--mix-caret-color), #000 calc(var(--mix-caret-percent) * 1%))";
3295
+ };
3296
+ 'mix-column-rule': {
3297
+ opacity: "color-mix(in var(--color-space, srgb), var(--mix-column-rule-color) calc(var(--mix-column-rule-percent) * 1%), transparent)";
3298
+ tint: "color-mix(in var(--color-space, srgb), var(--mix-column-rule-color), #fff calc(var(--mix-column-rule-percent) * 1%))";
3299
+ shade: "color-mix(in var(--color-space, srgb), var(--mix-column-rule-color), #000 calc(var(--mix-column-rule-percent) * 1%))";
3300
+ };
3301
+ 'mix-fill': {
3302
+ opacity: "color-mix(in var(--color-space, srgb), var(--mix-fill-color) calc(var(--mix-fill-percent) * 1%), transparent)";
3303
+ tint: "color-mix(in var(--color-space, srgb), var(--mix-fill-color), #fff calc(var(--mix-fill-percent) * 1%))";
3304
+ shade: "color-mix(in var(--color-space, srgb), var(--mix-fill-color), #000 calc(var(--mix-fill-percent) * 1%))";
3305
+ };
3306
+ 'mix-outline': {
3307
+ opacity: "color-mix(in var(--color-space, srgb), var(--mix-outline-color) calc(var(--mix-outline-percent) * 1%), transparent)";
3308
+ tint: "color-mix(in var(--color-space, srgb), var(--mix-outline-color), #fff calc(var(--mix-outline-percent) * 1%))";
3309
+ shade: "color-mix(in var(--color-space, srgb), var(--mix-outline-color), #000 calc(var(--mix-outline-percent) * 1%))";
3310
+ };
3311
+ 'mix-stroke': {
3312
+ opacity: "color-mix(in var(--color-space, srgb), var(--mix-stroke-color) calc(var(--mix-stroke-percent) * 1%), transparent)";
3313
+ tint: "color-mix(in var(--color-space, srgb), var(--mix-stroke-color), #fff calc(var(--mix-stroke-percent) * 1%))";
3314
+ shade: "color-mix(in var(--color-space, srgb), var(--mix-stroke-color), #000 calc(var(--mix-stroke-percent) * 1%))";
3315
+ };
3316
+ 'mix-text-decoration': {
3317
+ opacity: "color-mix(in var(--color-space, srgb), var(--mix-text-decoration-color) calc(var(--mix-text-decoration-percent) * 1%), transparent)";
3318
+ tint: "color-mix(in var(--color-space, srgb), var(--mix-text-decoration-color), #fff calc(var(--mix-text-decoration-percent) * 1%))";
3319
+ shade: "color-mix(in var(--color-space, srgb), var(--mix-text-decoration-color), #000 calc(var(--mix-text-decoration-percent) * 1%))";
3320
+ };
3321
+ 'mix-shadow': {
3322
+ opacity: "color-mix(in var(--color-space, srgb), var(--mix-shadow-color) calc(var(--mix-shadow-percent) * 1%), transparent)";
3323
+ tint: "color-mix(in var(--color-space, srgb), var(--mix-shadow-color), #fff calc(var(--mix-shadow-percent) * 1%))";
3324
+ shade: "color-mix(in var(--color-space, srgb), var(--mix-shadow-color), #000 calc(var(--mix-shadow-percent) * 1%))";
3325
+ };
3267
3326
  morph: {
3268
3327
  none: string;
3269
3328
  all: string;
@@ -3613,13 +3672,13 @@ declare const _default: {
3613
3672
  w: "inline-size"[];
3614
3673
  };
3615
3674
  properties: {
3616
- 'accent-color': "color"[];
3675
+ 'accent-color': ("color" | "mix-accent")[];
3617
3676
  animation: "anim"[];
3618
3677
  'animation-timing-function': "ease"[];
3619
3678
  'aspect-ratio': "ratio"[];
3620
3679
  'backdrop-filter': "effect"[];
3621
- background: ("color" | "gradient")[];
3622
- 'background-color': "color"[];
3680
+ background: ("color" | "gradient" | "mix-bg")[];
3681
+ 'background-color': ("color" | "mix-bg")[];
3623
3682
  'background-image': "gradient"[];
3624
3683
  'background-position-x': ("grid" | "space")[];
3625
3684
  'background-position-y': ("grid" | "space")[];
@@ -3644,17 +3703,17 @@ declare const _default: {
3644
3703
  'border-inline-start-width': "line-size"[];
3645
3704
  'border-inline-end': "line"[];
3646
3705
  'border-inline-end-width': "line-size"[];
3647
- 'border-color': "color"[];
3648
- 'border-top-color': "color"[];
3649
- 'border-right-color': "color"[];
3650
- 'border-bottom-color': "color"[];
3651
- 'border-left-color': "color"[];
3652
- 'border-block-color': "color"[];
3653
- 'border-block-start-color': "color"[];
3654
- 'border-block-end-color': "color"[];
3655
- 'border-inline-color': "color"[];
3656
- 'border-inline-start-color': "color"[];
3657
- 'border-inline-end-color': "color"[];
3706
+ 'border-color': ("color" | "mix-border")[];
3707
+ 'border-top-color': ("color" | "mix-border-top")[];
3708
+ 'border-right-color': ("color" | "mix-border-right")[];
3709
+ 'border-bottom-color': ("color" | "mix-border-bottom")[];
3710
+ 'border-left-color': ("color" | "mix-border-left")[];
3711
+ 'border-block-color': ("color" | "mix-border-y")[];
3712
+ 'border-block-start-color': ("color" | "mix-border-top")[];
3713
+ 'border-block-end-color': ("color" | "mix-border-bottom")[];
3714
+ 'border-inline-color': ("color" | "mix-border-x")[];
3715
+ 'border-inline-start-color': ("color" | "mix-border-left")[];
3716
+ 'border-inline-end-color': ("color" | "mix-border-right")[];
3658
3717
  'border-radius': "radii"[];
3659
3718
  'border-top-left-radius': "radii"[];
3660
3719
  'border-top-right-radius': "radii"[];
@@ -3667,16 +3726,16 @@ declare const _default: {
3667
3726
  'border-spacing': ("grid" | "fluid-border-spacing-clamp")[];
3668
3727
  bottom: ("grid" | "space" | "fluid-bottom-clamp")[];
3669
3728
  'box-shadow': "shadow"[];
3670
- 'caret-color': "color"[];
3671
- color: "color"[];
3729
+ 'caret-color': ("color" | "mix-caret")[];
3730
+ color: ("color" | "mix")[];
3672
3731
  'column-gap': ("grid" | "fluid-column-gap-clamp")[];
3673
3732
  'column-rule': "line"[];
3674
- 'column-rule-color': "color"[];
3733
+ 'column-rule-color': ("color" | "mix-column-rule")[];
3675
3734
  'column-rule-width': "line-size"[];
3676
3735
  columns: "col"[];
3677
3736
  'column-width': ("grid" | "fluid-column-width-clamp" | "size")[];
3678
3737
  filter: ("drop-shadow" | "effect")[];
3679
- fill: "color"[];
3738
+ fill: ("color" | "mix-fill")[];
3680
3739
  flex: "flex"[];
3681
3740
  'flex-basis': ("grid" | "space" | "fluid-flex-basis-clamp")[];
3682
3741
  font: "text"[];
@@ -3719,9 +3778,9 @@ declare const _default: {
3719
3778
  'min-height': ("grid" | "fluid-min-width-clamp" | "size")[];
3720
3779
  'min-inline-size': ("grid" | "fluid-min-width-clamp" | "size")[];
3721
3780
  'min-width': ("grid" | "fluid-min-height-clamp" | "size")[];
3722
- opacity: "alpha"[];
3781
+ opacity: "number"[];
3723
3782
  outline: "line"[];
3724
- 'outline-color': "color"[];
3783
+ 'outline-color': ("color" | "mix-outline")[];
3725
3784
  'outline-width': "line-size"[];
3726
3785
  'outline-offset': "offset"[];
3727
3786
  padding: ("grid" | "fluid-p-clamp")[];
@@ -3759,9 +3818,9 @@ declare const _default: {
3759
3818
  'scroll-padding-right': ("grid" | "fluid-scroll-pr-clamp")[];
3760
3819
  'scroll-padding-bottom': ("grid" | "fluid-scroll-pb-clamp")[];
3761
3820
  'scroll-padding-left': ("grid" | "fluid-scroll-pl-clamp")[];
3762
- stroke: "color"[];
3821
+ stroke: ("color" | "mix-stroke")[];
3763
3822
  'stroke-width': ("grid" | "fluid-stroke-width-clamp")[];
3764
- 'text-decoration-color': "color"[];
3823
+ 'text-decoration-color': ("color" | "mix-text-decoration")[];
3765
3824
  'text-indent': ("grid" | "fluid-text-indent-clamp")[];
3766
3825
  'text-shadow': "shadow"[];
3767
3826
  top: ("grid" | "space" | "fluid-top-clamp")[];
@@ -3772,6 +3831,7 @@ declare const _default: {
3772
3831
  width: ("grid" | "fluid-width-clamp" | "size")[];
3773
3832
  };
3774
3833
  customProperties: {
3834
+ 'color-space': "color-space"[];
3775
3835
  'fluid-height-min': "number"[];
3776
3836
  'fluid-height-max': "number"[];
3777
3837
  'fluid-border-spacing-min': "number"[];
@@ -3878,7 +3938,41 @@ declare const _default: {
3878
3938
  'gradient-to-stop': "stop"[];
3879
3939
  'gradient-via': "color"[];
3880
3940
  'gradient-via-stop': "stop"[];
3881
- 'shadow-color': "color"[];
3941
+ 'mix-color': "color"[];
3942
+ 'mix-percent': "number"[];
3943
+ 'mix-accent-color': "color"[];
3944
+ 'mix-accent-percent': "number"[];
3945
+ 'mix-bg-color': "color"[];
3946
+ 'mix-bg-percent': "number"[];
3947
+ 'mix-border-color': "color"[];
3948
+ 'mix-border-percent': "number"[];
3949
+ 'mix-border-top-color': "color"[];
3950
+ 'mix-border-top-percent': "number"[];
3951
+ 'mix-border-right-color': "color"[];
3952
+ 'mix-border-right-percent': "number"[];
3953
+ 'mix-border-bottom-color': "color"[];
3954
+ 'mix-border-bottom-percent': "number"[];
3955
+ 'mix-border-left-color': "color"[];
3956
+ 'mix-border-left-percent': "number"[];
3957
+ 'mix-border-x-color': "color"[];
3958
+ 'mix-border-x-percent': "number"[];
3959
+ 'mix-border-y-color': "color"[];
3960
+ 'mix-border-y-percent': "number"[];
3961
+ 'mix-caret-color': "color"[];
3962
+ 'mix-caret-percent': "number"[];
3963
+ 'mix-column-rule-color': "color"[];
3964
+ 'mix-column-rule-percent': "number"[];
3965
+ 'mix-fill-color': "color"[];
3966
+ 'mix-fill-percent': "number"[];
3967
+ 'mix-outline-color': "color"[];
3968
+ 'mix-outline-percent': "number"[];
3969
+ 'mix-stroke-color': "color"[];
3970
+ 'mix-stroke-percent': "number"[];
3971
+ 'mix-text-decoration-color': "color"[];
3972
+ 'mix-text-decoration-percent': "number"[];
3973
+ 'mix-shadow-color': "color"[];
3974
+ 'mix-shadow-percent': "number"[];
3975
+ 'shadow-color': ("color" | "mix-shadow")[];
3882
3976
  };
3883
3977
  };
3884
3978
 
package/dist/index.js CHANGED
@@ -163,6 +163,12 @@ var fluid = (params) => {
163
163
  ---${params.property}-intercept: calc(var(---${params.property}-min) - (var(---${params.property}-scope) * ${breakpointMin}));
164
164
  `;
165
165
  };
166
+ var colorMixOpacity = (property) => {
167
+ return `color-mix(in var(--color-space, srgb), var(--${property}-color) calc(var(--${property}-percent) * 1%), transparent)`;
168
+ };
169
+ var colorMix = (property, color) => {
170
+ return `color-mix(in var(--color-space, srgb), var(--${property}-color), ${color} calc(var(--${property}-percent) * 1%))`;
171
+ };
166
172
  var src_default = createConfig({
167
173
  include: [],
168
174
  grid: rem(BASE_GRID_SIZE),
@@ -311,7 +317,7 @@ var src_default = createConfig({
311
317
  "::-webkit-inner-spin-button, ::-webkit-outer-spin-button": {
312
318
  height: "auto"
313
319
  },
314
- "::webkit-search-decoration": {
320
+ "::-webkit-search-decoration": {
315
321
  WebkitAppearance: "none"
316
322
  },
317
323
  summary: {
@@ -364,29 +370,6 @@ var src_default = createConfig({
364
370
  }
365
371
  },
366
372
  root: {
367
- alpha: {
368
- "0": 0,
369
- "5": 0.05,
370
- "10": 0.1,
371
- "15": 0.15,
372
- "20": 0.2,
373
- "25": 0.25,
374
- "30": 0.3,
375
- "35": 0.35,
376
- "40": 0.4,
377
- "45": 0.45,
378
- "50": 0.5,
379
- "55": 0.55,
380
- "60": 0.6,
381
- "65": 0.65,
382
- "70": 0.7,
383
- "75": 0.75,
384
- "80": 0.8,
385
- "85": 0.85,
386
- "90": 0.9,
387
- "95": 0.95,
388
- "100": 1
389
- },
390
373
  anim: {
391
374
  none: "none",
392
375
  spin: "spin 1s linear infinite",
@@ -411,6 +394,11 @@ var src_default = createConfig({
411
394
  "6xl": rem(1152),
412
395
  "7xl": rem(1280)
413
396
  },
397
+ "color-space": {
398
+ srgb: "",
399
+ oklch: "oklch",
400
+ oklab: "oklab"
401
+ },
414
402
  "drop-shadow": {
415
403
  xs: "drop-shadow(0 1px 1px rgb(0 0 0 / 0.05))",
416
404
  sm: "drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06))",
@@ -1053,22 +1041,14 @@ var src_default = createConfig({
1053
1041
  mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`
1054
1042
  },
1055
1043
  gradient: {
1056
- "to-t": optionalViaGradient("to top in srgb"),
1057
- "to-tr": optionalViaGradient("to top right in srgb"),
1058
- "to-r": optionalViaGradient("to right in srgb"),
1059
- "to-br": optionalViaGradient("to bottom right in srgb"),
1060
- "to-b": optionalViaGradient("to bottom in srgb"),
1061
- "to-bl": optionalViaGradient("to bottom left in srgb"),
1062
- "to-l": optionalViaGradient("to left in srgb"),
1063
- "to-tl": optionalViaGradient("to top left in srgb"),
1064
- "hd-to-t": optionalViaGradient("to top in oklch"),
1065
- "hd-to-tr": optionalViaGradient("to top right in oklch"),
1066
- "hd-to-r": optionalViaGradient("to right in oklch"),
1067
- "hd-to-br": optionalViaGradient("to bottom right in oklch"),
1068
- "hd-to-b": optionalViaGradient("to bottom in oklch"),
1069
- "hd-to-bl": optionalViaGradient("to bottom left in oklch"),
1070
- "hd-to-l": optionalViaGradient("to left in oklch"),
1071
- "hd-to-tl": optionalViaGradient("to top left in oklch")
1044
+ "to-t": optionalViaGradient("to top in var(--color-space, srgb)"),
1045
+ "to-tr": optionalViaGradient("to top right in var(--color-space, srgb)"),
1046
+ "to-r": optionalViaGradient("to right in var(--color-space, srgb)"),
1047
+ "to-br": optionalViaGradient("to bottom right in var(--color-space, srgb)"),
1048
+ "to-b": optionalViaGradient("to bottom in var(--color-space, srgb)"),
1049
+ "to-bl": optionalViaGradient("to bottom left in var(--color-space, srgb)"),
1050
+ "to-l": optionalViaGradient("to left in var(--color-space, srgb)"),
1051
+ "to-tl": optionalViaGradient("to top left in var(--color-space, srgb)")
1072
1052
  },
1073
1053
  space: {
1074
1054
  "0": 0,
@@ -1127,6 +1107,91 @@ var src_default = createConfig({
1127
1107
  relaxed: 1.625,
1128
1108
  loose: 2
1129
1109
  },
1110
+ mix: {
1111
+ opacity: colorMixOpacity("mix"),
1112
+ tint: colorMix("mix", "#fff"),
1113
+ shade: colorMix("mix", "#000")
1114
+ },
1115
+ "mix-accent": {
1116
+ opacity: colorMixOpacity("mix-accent"),
1117
+ tint: colorMix("mix-accent", "#fff"),
1118
+ shade: colorMix("mix-accent", "#000")
1119
+ },
1120
+ "mix-bg": {
1121
+ opacity: colorMixOpacity("mix-bg"),
1122
+ tint: colorMix("mix-bg", "#fff"),
1123
+ shade: colorMix("mix-bg", "#000")
1124
+ },
1125
+ "mix-border": {
1126
+ opacity: colorMixOpacity("mix-border"),
1127
+ tint: colorMix("mix-border", "#fff"),
1128
+ shade: colorMix("mix-border", "#000")
1129
+ },
1130
+ "mix-border-top": {
1131
+ opacity: colorMixOpacity("mix-border-top"),
1132
+ tint: colorMix("mix-border-top", "#fff"),
1133
+ shade: colorMix("mix-border-top", "#000")
1134
+ },
1135
+ "mix-border-right": {
1136
+ opacity: colorMixOpacity("mix-border-right"),
1137
+ tint: colorMix("mix-border-right", "#fff"),
1138
+ shade: colorMix("mix-border-right", "#000")
1139
+ },
1140
+ "mix-border-bottom": {
1141
+ opacity: colorMixOpacity("mix-border-bottom"),
1142
+ tint: colorMix("mix-border-bottom", "#fff"),
1143
+ shade: colorMix("mix-border-bottom", "#000")
1144
+ },
1145
+ "mix-border-left": {
1146
+ opacity: colorMixOpacity("mix-border-left"),
1147
+ tint: colorMix("mix-border-left", "#fff"),
1148
+ shade: colorMix("mix-border-left", "#000")
1149
+ },
1150
+ "mix-border-x": {
1151
+ opacity: colorMixOpacity("mix-border-x"),
1152
+ tint: colorMix("mix-border-x", "#fff"),
1153
+ shade: colorMix("mix-border-x", "#000")
1154
+ },
1155
+ "mix-border-y": {
1156
+ opacity: colorMixOpacity("mix-border-y"),
1157
+ tint: colorMix("mix-border-y", "#fff"),
1158
+ shade: colorMix("mix-border-y", "#000")
1159
+ },
1160
+ "mix-caret": {
1161
+ opacity: colorMixOpacity("mix-caret"),
1162
+ tint: colorMix("mix-caret", "#fff"),
1163
+ shade: colorMix("mix-caret", "#000")
1164
+ },
1165
+ "mix-column-rule": {
1166
+ opacity: colorMixOpacity("mix-column-rule"),
1167
+ tint: colorMix("mix-column-rule", "#fff"),
1168
+ shade: colorMix("mix-column-rule", "#000")
1169
+ },
1170
+ "mix-fill": {
1171
+ opacity: colorMixOpacity("mix-fill"),
1172
+ tint: colorMix("mix-fill", "#fff"),
1173
+ shade: colorMix("mix-fill", "#000")
1174
+ },
1175
+ "mix-outline": {
1176
+ opacity: colorMixOpacity("mix-outline"),
1177
+ tint: colorMix("mix-outline", "#fff"),
1178
+ shade: colorMix("mix-outline", "#000")
1179
+ },
1180
+ "mix-stroke": {
1181
+ opacity: colorMixOpacity("mix-stroke"),
1182
+ tint: colorMix("mix-stroke", "#fff"),
1183
+ shade: colorMix("mix-stroke", "#000")
1184
+ },
1185
+ "mix-text-decoration": {
1186
+ opacity: colorMixOpacity("mix-text-decoration"),
1187
+ tint: colorMix("mix-text-decoration", "#fff"),
1188
+ shade: colorMix("mix-text-decoration", "#000")
1189
+ },
1190
+ "mix-shadow": {
1191
+ opacity: colorMixOpacity("mix-shadow"),
1192
+ tint: colorMix("mix-shadow", "#fff"),
1193
+ shade: colorMix("mix-shadow", "#000")
1194
+ },
1130
1195
  morph: {
1131
1196
  none: "none",
1132
1197
  all: "all cubic-bezier(0.4, 0, 0.2, 1) 150ms",
@@ -1476,13 +1541,13 @@ var src_default = createConfig({
1476
1541
  w: ["inline-size"]
1477
1542
  },
1478
1543
  properties: {
1479
- "accent-color": ["color"],
1544
+ "accent-color": ["color", "mix-accent"],
1480
1545
  animation: ["anim"],
1481
1546
  "animation-timing-function": ["ease"],
1482
1547
  "aspect-ratio": ["ratio"],
1483
1548
  "backdrop-filter": ["effect"],
1484
- background: ["color", "gradient"],
1485
- "background-color": ["color"],
1549
+ background: ["color", "gradient", "mix-bg"],
1550
+ "background-color": ["color", "mix-bg"],
1486
1551
  "background-image": ["gradient"],
1487
1552
  "background-position-x": ["grid", "space"],
1488
1553
  "background-position-y": ["grid", "space"],
@@ -1507,17 +1572,17 @@ var src_default = createConfig({
1507
1572
  "border-inline-start-width": ["line-size"],
1508
1573
  "border-inline-end": ["line"],
1509
1574
  "border-inline-end-width": ["line-size"],
1510
- "border-color": ["color"],
1511
- "border-top-color": ["color"],
1512
- "border-right-color": ["color"],
1513
- "border-bottom-color": ["color"],
1514
- "border-left-color": ["color"],
1515
- "border-block-color": ["color"],
1516
- "border-block-start-color": ["color"],
1517
- "border-block-end-color": ["color"],
1518
- "border-inline-color": ["color"],
1519
- "border-inline-start-color": ["color"],
1520
- "border-inline-end-color": ["color"],
1575
+ "border-color": ["color", "mix-border"],
1576
+ "border-top-color": ["color", "mix-border-top"],
1577
+ "border-right-color": ["color", "mix-border-right"],
1578
+ "border-bottom-color": ["color", "mix-border-bottom"],
1579
+ "border-left-color": ["color", "mix-border-left"],
1580
+ "border-block-color": ["color", "mix-border-y"],
1581
+ "border-block-start-color": ["color", "mix-border-top"],
1582
+ "border-block-end-color": ["color", "mix-border-bottom"],
1583
+ "border-inline-color": ["color", "mix-border-x"],
1584
+ "border-inline-start-color": ["color", "mix-border-left"],
1585
+ "border-inline-end-color": ["color", "mix-border-right"],
1521
1586
  "border-radius": ["radii"],
1522
1587
  "border-top-left-radius": ["radii"],
1523
1588
  "border-top-right-radius": ["radii"],
@@ -1530,16 +1595,16 @@ var src_default = createConfig({
1530
1595
  "border-spacing": ["grid", "fluid-border-spacing-clamp"],
1531
1596
  bottom: ["grid", "space", "fluid-bottom-clamp"],
1532
1597
  "box-shadow": ["shadow"],
1533
- "caret-color": ["color"],
1534
- color: ["color"],
1598
+ "caret-color": ["color", "mix-caret"],
1599
+ color: ["color", "mix"],
1535
1600
  "column-gap": ["grid", "fluid-column-gap-clamp"],
1536
1601
  "column-rule": ["line"],
1537
- "column-rule-color": ["color"],
1602
+ "column-rule-color": ["color", "mix-column-rule"],
1538
1603
  "column-rule-width": ["line-size"],
1539
1604
  columns: ["col"],
1540
1605
  "column-width": ["size", "grid", "fluid-column-width-clamp"],
1541
1606
  filter: ["effect", "drop-shadow"],
1542
- fill: ["color"],
1607
+ fill: ["color", "mix-fill"],
1543
1608
  flex: ["flex"],
1544
1609
  "flex-basis": ["grid", "space", "fluid-flex-basis-clamp"],
1545
1610
  font: ["text"],
@@ -1582,9 +1647,9 @@ var src_default = createConfig({
1582
1647
  "min-height": ["size", "grid", "fluid-min-width-clamp"],
1583
1648
  "min-inline-size": ["size", "grid", "fluid-min-width-clamp"],
1584
1649
  "min-width": ["size", "grid", "fluid-min-height-clamp"],
1585
- opacity: ["alpha"],
1650
+ opacity: ["number"],
1586
1651
  outline: ["line"],
1587
- "outline-color": ["color"],
1652
+ "outline-color": ["color", "mix-outline"],
1588
1653
  "outline-width": ["line-size"],
1589
1654
  "outline-offset": ["offset"],
1590
1655
  padding: ["grid", "fluid-p-clamp"],
@@ -1622,9 +1687,9 @@ var src_default = createConfig({
1622
1687
  "scroll-padding-right": ["grid", "fluid-scroll-pr-clamp"],
1623
1688
  "scroll-padding-bottom": ["grid", "fluid-scroll-pb-clamp"],
1624
1689
  "scroll-padding-left": ["grid", "fluid-scroll-pl-clamp"],
1625
- stroke: ["color"],
1690
+ stroke: ["color", "mix-stroke"],
1626
1691
  "stroke-width": ["grid", "fluid-stroke-width-clamp"],
1627
- "text-decoration-color": ["color"],
1692
+ "text-decoration-color": ["color", "mix-text-decoration"],
1628
1693
  "text-indent": ["grid", "fluid-text-indent-clamp"],
1629
1694
  "text-shadow": ["shadow"],
1630
1695
  top: ["grid", "space", "fluid-top-clamp"],
@@ -1635,6 +1700,7 @@ var src_default = createConfig({
1635
1700
  width: ["size", "grid", "fluid-width-clamp"]
1636
1701
  },
1637
1702
  customProperties: {
1703
+ "color-space": ["color-space"],
1638
1704
  "fluid-height-min": ["number"],
1639
1705
  "fluid-height-max": ["number"],
1640
1706
  "fluid-border-spacing-min": ["number"],
@@ -1741,7 +1807,41 @@ var src_default = createConfig({
1741
1807
  "gradient-to-stop": ["stop"],
1742
1808
  "gradient-via": ["color"],
1743
1809
  "gradient-via-stop": ["stop"],
1744
- "shadow-color": ["color"]
1810
+ "mix-color": ["color"],
1811
+ "mix-percent": ["number"],
1812
+ "mix-accent-color": ["color"],
1813
+ "mix-accent-percent": ["number"],
1814
+ "mix-bg-color": ["color"],
1815
+ "mix-bg-percent": ["number"],
1816
+ "mix-border-color": ["color"],
1817
+ "mix-border-percent": ["number"],
1818
+ "mix-border-top-color": ["color"],
1819
+ "mix-border-top-percent": ["number"],
1820
+ "mix-border-right-color": ["color"],
1821
+ "mix-border-right-percent": ["number"],
1822
+ "mix-border-bottom-color": ["color"],
1823
+ "mix-border-bottom-percent": ["number"],
1824
+ "mix-border-left-color": ["color"],
1825
+ "mix-border-left-percent": ["number"],
1826
+ "mix-border-x-color": ["color"],
1827
+ "mix-border-x-percent": ["number"],
1828
+ "mix-border-y-color": ["color"],
1829
+ "mix-border-y-percent": ["number"],
1830
+ "mix-caret-color": ["color"],
1831
+ "mix-caret-percent": ["number"],
1832
+ "mix-column-rule-color": ["color"],
1833
+ "mix-column-rule-percent": ["number"],
1834
+ "mix-fill-color": ["color"],
1835
+ "mix-fill-percent": ["number"],
1836
+ "mix-outline-color": ["color"],
1837
+ "mix-outline-percent": ["number"],
1838
+ "mix-stroke-color": ["color"],
1839
+ "mix-stroke-percent": ["number"],
1840
+ "mix-text-decoration-color": ["color"],
1841
+ "mix-text-decoration-percent": ["number"],
1842
+ "mix-shadow-color": ["color"],
1843
+ "mix-shadow-percent": ["number"],
1844
+ "shadow-color": ["color", "mix-shadow"]
1745
1845
  }
1746
1846
  });
1747
1847