@rokkit/themes 1.3.0 → 1.3.2

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 (87) hide show
  1. package/dist/base/chat.css +264 -0
  2. package/dist/base/message.css +28 -0
  3. package/dist/base.css +293 -0
  4. package/dist/frosted/button.css +10 -4
  5. package/dist/frosted/message.css +4 -4
  6. package/dist/frosted/status-list.css +1 -1
  7. package/dist/frosted/table.css +3 -1
  8. package/dist/frosted/tabs.css +7 -2
  9. package/dist/frosted/toggle.css +7 -2
  10. package/dist/frosted.css +32 -14
  11. package/dist/index.css +431 -75
  12. package/dist/material/button.css +3 -1
  13. package/dist/material/message.css +4 -4
  14. package/dist/material/select.css +3 -1
  15. package/dist/material/status-list.css +1 -1
  16. package/dist/material/table.css +3 -1
  17. package/dist/material/tabs.css +5 -2
  18. package/dist/material/toggle.css +5 -2
  19. package/dist/material.css +24 -12
  20. package/dist/minimal/button.css +3 -1
  21. package/dist/minimal/message.css +4 -4
  22. package/dist/minimal/status-list.css +1 -1
  23. package/dist/minimal/table.css +3 -1
  24. package/dist/minimal/tabs.css +1 -1
  25. package/dist/minimal.css +12 -8
  26. package/dist/rokkit/button.css +3 -1
  27. package/dist/rokkit/message.css +4 -4
  28. package/dist/rokkit/status-list.css +1 -1
  29. package/dist/rokkit/table.css +3 -1
  30. package/dist/rokkit.css +11 -7
  31. package/dist/zen-sumi/button.css +26 -3
  32. package/dist/zen-sumi/chart.css +1 -1
  33. package/dist/zen-sumi/command-palette.css +4 -4
  34. package/dist/zen-sumi/floating-action.css +1 -1
  35. package/dist/zen-sumi/floating-navigation.css +3 -3
  36. package/dist/zen-sumi/input.css +2 -2
  37. package/dist/zen-sumi/message.css +4 -4
  38. package/dist/zen-sumi/range.css +2 -2
  39. package/dist/zen-sumi/search-filter.css +2 -2
  40. package/dist/zen-sumi/status-list.css +3 -3
  41. package/dist/zen-sumi/step-indicator.css +2 -2
  42. package/dist/zen-sumi/tabs.css +1 -1
  43. package/dist/zen-sumi/timeline.css +2 -2
  44. package/dist/zen-sumi/toc.css +5 -3
  45. package/dist/zen-sumi/toolbar.css +1 -1
  46. package/dist/zen-sumi.css +59 -34
  47. package/package.json +3 -3
  48. package/src/base/chat.css +264 -0
  49. package/src/base/index.css +1 -0
  50. package/src/base/message.css +28 -0
  51. package/src/frosted/button.css +10 -4
  52. package/src/frosted/message.css +4 -4
  53. package/src/frosted/status-list.css +1 -1
  54. package/src/frosted/table.css +3 -1
  55. package/src/frosted/tabs.css +7 -2
  56. package/src/frosted/toggle.css +7 -2
  57. package/src/material/button.css +3 -1
  58. package/src/material/message.css +4 -4
  59. package/src/material/select.css +3 -1
  60. package/src/material/status-list.css +1 -1
  61. package/src/material/table.css +3 -1
  62. package/src/material/tabs.css +5 -2
  63. package/src/material/toggle.css +5 -2
  64. package/src/minimal/button.css +3 -1
  65. package/src/minimal/message.css +4 -4
  66. package/src/minimal/status-list.css +1 -1
  67. package/src/minimal/table.css +3 -1
  68. package/src/minimal/tabs.css +1 -1
  69. package/src/rokkit/button.css +3 -1
  70. package/src/rokkit/message.css +4 -4
  71. package/src/rokkit/status-list.css +1 -1
  72. package/src/rokkit/table.css +3 -1
  73. package/src/zen-sumi/button.css +26 -3
  74. package/src/zen-sumi/chart.css +1 -1
  75. package/src/zen-sumi/command-palette.css +4 -4
  76. package/src/zen-sumi/floating-action.css +1 -1
  77. package/src/zen-sumi/floating-navigation.css +3 -3
  78. package/src/zen-sumi/input.css +2 -2
  79. package/src/zen-sumi/message.css +4 -4
  80. package/src/zen-sumi/range.css +2 -2
  81. package/src/zen-sumi/search-filter.css +2 -2
  82. package/src/zen-sumi/status-list.css +3 -3
  83. package/src/zen-sumi/step-indicator.css +2 -2
  84. package/src/zen-sumi/tabs.css +1 -1
  85. package/src/zen-sumi/timeline.css +2 -2
  86. package/src/zen-sumi/toc.css +5 -3
  87. package/src/zen-sumi/toolbar.css +1 -1
package/dist/frosted/status-list.css CHANGED
@@ -14,7 +14,7 @@
14
14
  color:var(--warning);
15
15
  }
16
16
  [data-style='frosted'] [data-status-item][data-status='unknown'] span {
17
- color:var(--paper-edge);
17
+ color:var(--ink-soft);
18
18
  }
19
19
 
20
20
  [data-style='frosted'] [data-status-item][data-status='pass'] {
package/dist/frosted/table.css CHANGED
@@ -9,7 +9,9 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='frosted'] [data-table-header] th {
12
- border-bottom-width:1px;--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink-mute);
12
+ /* ink (not ink-mute): column headers are primary content; ink-mute on the
13
+ paper-mute header only reaches 4.07:1 in dark mode (AA fail). */
14
+ border-bottom-width:1px;--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink);
13
15
  border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
14
16
  background-color: color-mix(in oklch, var(--paper-mute) 80%, transparent);
15
17
  }
package/dist/frosted/tabs.css CHANGED
@@ -31,9 +31,14 @@
31
31
  background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
32
32
  }
33
33
 
34
- /* Selected state */
34
+ /* Selected state.
35
+ ink (not primary): the selected pill's bg is a translucent primary tint
36
+ (bg-primary/40) that composites to a light tint in light mode and a dark
37
+ tint in dark mode. Vibrant primary text on the light tint is only ~1.6:1.
38
+ ink flips with the mode and clears AA on both poles (~10:1 light, ~8.6:1
39
+ dark). The vibrant primary lives on the border + icon below. */
35
40
  [data-style='frosted'] [data-tabs-trigger][data-selected] {
36
- border-width:1px;border-color:color-mix(in srgb, var(--color-primary) calc(0.5 * 100%), transparent);background-color:color-mix(in srgb, var(--color-primary) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--primary);
41
+ border-width:1px;border-color:color-mix(in srgb, var(--color-primary) calc(0.5 * 100%), transparent);background-color:color-mix(in srgb, var(--color-primary) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink);
37
42
  }
38
43
 
39
44
  /* =============================================================================
package/dist/frosted/toggle.css CHANGED
@@ -28,9 +28,14 @@
28
28
  background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
29
29
  }
30
30
 
31
- /* Selected state */
31
+ /* Selected state.
32
+ ink (not primary): the selected bg is a translucent primary tint
33
+ (bg-primary/40) that composites to a light tint in light mode and a dark
34
+ tint in dark mode. Vibrant primary text on the light tint is only ~1.6:1.
35
+ ink flips with the mode and clears AA on both poles. Vibrant primary stays
36
+ on the border + icon. */
32
37
  [data-style='frosted'] [data-toggle-option][data-selected='true'] {
33
- border-width:1px;border-color:color-mix(in srgb, var(--color-primary) calc(0.5 * 100%), transparent);background-color:color-mix(in srgb, var(--color-primary) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--primary);
38
+ border-width:1px;border-color:color-mix(in srgb, var(--color-primary) calc(0.5 * 100%), transparent);background-color:color-mix(in srgb, var(--color-primary) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink);
34
39
  }
35
40
 
36
41
  /* =============================================================================
package/dist/frosted.css CHANGED
@@ -28,9 +28,15 @@
28
28
  0 2px 8px rgba(0, 0, 0, 0.08);
29
29
  }
30
30
 
31
+ /* Filled frosted variants use a translucent fill (bg-X/60) that composites
32
+ over the page, so the effective fill is a diluted tint that flips light/dark
33
+ with the mode. The auto on-color (computed against the full-opacity status
34
+ 500) is wrong for the diluted fill — near-black on the dark dilution only
35
+ reaches ~2.4:1. ink flips with the mode and clears AA on both poles
36
+ (~6.2:1 dark, ~7.8:1 light). */
31
37
  [data-style='frosted'] [data-button][data-style='default'][data-variant='primary'],
32
38
  [data-style='frosted'] [data-button]:not([data-style])[data-variant='primary'] {
33
- border-width:1px;background-color:color-mix(in srgb, var(--color-primary) calc(0.6 * 100%), transparent);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--on-primary);
39
+ border-width:1px;background-color:color-mix(in srgb, var(--color-primary) calc(0.6 * 100%), transparent);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink);
34
40
  border-color: rgba(255, 255, 255, 0.25);
35
41
  box-shadow:
36
42
  inset 0 1px 0 rgba(255, 255, 255, 0.25),
@@ -39,7 +45,7 @@
39
45
 
40
46
  [data-style='frosted'] [data-button][data-style='default'][data-variant='secondary'],
41
47
  [data-style='frosted'] [data-button]:not([data-style])[data-variant='secondary'] {
42
- border-width:1px;background-color:color-mix(in srgb, var(--color-accent) calc(0.6 * 100%), transparent);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--on-primary);
48
+ border-width:1px;background-color:color-mix(in srgb, var(--color-accent) calc(0.6 * 100%), transparent);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink);
43
49
  border-color: rgba(255, 255, 255, 0.25);
44
50
  box-shadow:
45
51
  inset 0 1px 0 rgba(255, 255, 255, 0.25),
@@ -48,7 +54,7 @@
48
54
 
49
55
  [data-style='frosted'] [data-button][data-style='default'][data-variant='accent'],
50
56
  [data-style='frosted'] [data-button]:not([data-style])[data-variant='accent'] {
51
- border-width:1px;background-color:color-mix(in srgb, var(--color-accent) calc(0.6 * 100%), transparent);--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
57
+ border-width:1px;background-color:color-mix(in srgb, var(--color-accent) calc(0.6 * 100%), transparent);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink);
52
58
  border-color: rgba(255, 255, 255, 0.25);
53
59
  box-shadow:
54
60
  inset 0 1px 0 rgba(255, 255, 255, 0.25),
@@ -57,7 +63,7 @@
57
63
 
58
64
  [data-style='frosted'] [data-button][data-style='default'][data-variant='danger'],
59
65
  [data-style='frosted'] [data-button]:not([data-style])[data-variant='danger'] {
60
- border-width:1px;background-color:color-mix(in srgb, var(--color-danger) calc(0.6 * 100%), transparent);--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
66
+ border-width:1px;background-color:color-mix(in srgb, var(--color-danger) calc(0.6 * 100%), transparent);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink);
61
67
  border-color: rgba(255, 255, 255, 0.25);
62
68
  box-shadow:
63
69
  inset 0 1px 0 rgba(255, 255, 255, 0.25),
@@ -496,9 +502,14 @@
496
502
  background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
497
503
  }
498
504
 
499
- /* Selected state */
505
+ /* Selected state.
506
+ ink (not primary): the selected pill's bg is a translucent primary tint
507
+ (bg-primary/40) that composites to a light tint in light mode and a dark
508
+ tint in dark mode. Vibrant primary text on the light tint is only ~1.6:1.
509
+ ink flips with the mode and clears AA on both poles (~10:1 light, ~8.6:1
510
+ dark). The vibrant primary lives on the border + icon below. */
500
511
  [data-style='frosted'] [data-tabs-trigger][data-selected] {
501
- border-width:1px;border-color:color-mix(in srgb, var(--color-primary) calc(0.5 * 100%), transparent);background-color:color-mix(in srgb, var(--color-primary) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--primary);
512
+ border-width:1px;border-color:color-mix(in srgb, var(--color-primary) calc(0.5 * 100%), transparent);background-color:color-mix(in srgb, var(--color-primary) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink);
502
513
  }
503
514
 
504
515
  /* =============================================================================
@@ -555,9 +566,14 @@
555
566
  background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
556
567
  }
557
568
 
558
- /* Selected state */
569
+ /* Selected state.
570
+ ink (not primary): the selected bg is a translucent primary tint
571
+ (bg-primary/40) that composites to a light tint in light mode and a dark
572
+ tint in dark mode. Vibrant primary text on the light tint is only ~1.6:1.
573
+ ink flips with the mode and clears AA on both poles. Vibrant primary stays
574
+ on the border + icon. */
559
575
  [data-style='frosted'] [data-toggle-option][data-selected='true'] {
560
- border-width:1px;border-color:color-mix(in srgb, var(--color-primary) calc(0.5 * 100%), transparent);background-color:color-mix(in srgb, var(--color-primary) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--primary);
576
+ border-width:1px;border-color:color-mix(in srgb, var(--color-primary) calc(0.5 * 100%), transparent);background-color:color-mix(in srgb, var(--color-primary) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink);
561
577
  }
562
578
 
563
579
  /* =============================================================================
@@ -1372,7 +1388,9 @@
1372
1388
  ============================================================================= */
1373
1389
 
1374
1390
  [data-style='frosted'] [data-table-header] th {
1375
- border-bottom-width:1px;--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink-mute);
1391
+ /* ink (not ink-mute): column headers are primary content; ink-mute on the
1392
+ paper-mute header only reaches 4.07:1 in dark mode (AA fail). */
1393
+ border-bottom-width:1px;--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink);
1376
1394
  border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
1377
1395
  background-color: color-mix(in oklch, var(--paper-mute) 80%, transparent);
1378
1396
  }
@@ -1970,7 +1988,7 @@
1970
1988
  */
1971
1989
 
1972
1990
  [data-style='frosted'] [data-message-root][data-type='error'] {
1973
- border-color:color-mix(in srgb, var(--color-error) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--error);
1991
+ border-color:color-mix(in srgb, var(--color-error) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
1974
1992
  background-color: var(--error-soft);
1975
1993
  }
1976
1994
  [data-style='frosted'] [data-message-root][data-type='error'] [data-message-icon],
@@ -1979,7 +1997,7 @@
1979
1997
  }
1980
1998
 
1981
1999
  [data-style='frosted'] [data-message-root][data-type='warning'] {
1982
- border-color:color-mix(in srgb, var(--color-warning) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--warning);
2000
+ border-color:color-mix(in srgb, var(--color-warning) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
1983
2001
  background-color: var(--warning-soft);
1984
2002
  }
1985
2003
  [data-style='frosted'] [data-message-root][data-type='warning'] [data-message-icon],
@@ -1988,7 +2006,7 @@
1988
2006
  }
1989
2007
 
1990
2008
  [data-style='frosted'] [data-message-root][data-type='info'] {
1991
- border-color:color-mix(in srgb, var(--color-info) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--info);
2009
+ border-color:color-mix(in srgb, var(--color-info) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
1992
2010
  background-color: var(--info-soft);
1993
2011
  }
1994
2012
  [data-style='frosted'] [data-message-root][data-type='info'] [data-message-icon],
@@ -1997,7 +2015,7 @@
1997
2015
  }
1998
2016
 
1999
2017
  [data-style='frosted'] [data-message-root][data-type='success'] {
2000
- border-color:color-mix(in srgb, var(--color-success) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--success);
2018
+ border-color:color-mix(in srgb, var(--color-success) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
2001
2019
  background-color: var(--success-soft);
2002
2020
  }
2003
2021
  [data-style='frosted'] [data-message-root][data-type='success'] [data-message-icon],
@@ -2021,7 +2039,7 @@
2021
2039
  color:var(--warning);
2022
2040
  }
2023
2041
  [data-style='frosted'] [data-status-item][data-status='unknown'] span {
2024
- color:var(--paper-edge);
2042
+ color:var(--ink-soft);
2025
2043
  }
2026
2044
 
2027
2045
  [data-style='frosted'] [data-status-item][data-status='pass'] {