@rokkit/themes 1.1.14 → 1.1.16

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 (33) hide show
  1. package/build.mjs +45 -1
  2. package/dist/base.css +7206 -0
  3. package/dist/frosted.css +2349 -0
  4. package/dist/index.css +19191 -0
  5. package/dist/material.css +2241 -0
  6. package/dist/minimal.css +2317 -0
  7. package/dist/rokkit.css +2789 -0
  8. package/dist/zen-sumi.css +2284 -0
  9. package/package.json +33 -31
  10. package/src/frosted/button.css +3 -2
  11. package/src/frosted/card.css +5 -3
  12. package/src/frosted/command-palette.css +2 -1
  13. package/src/frosted/dropdown.css +6 -3
  14. package/src/frosted/floating-action.css +10 -5
  15. package/src/frosted/floating-navigation.css +7 -3
  16. package/src/frosted/input.css +4 -3
  17. package/src/frosted/list.css +12 -6
  18. package/src/frosted/menu.css +6 -3
  19. package/src/frosted/message.css +8 -4
  20. package/src/frosted/range.css +7 -4
  21. package/src/frosted/search-filter.css +7 -3
  22. package/src/frosted/select.css +26 -12
  23. package/src/frosted/status-list.css +2 -1
  24. package/src/frosted/step-indicator.css +6 -3
  25. package/src/frosted/switch.css +2 -1
  26. package/src/frosted/table.css +12 -6
  27. package/src/frosted/tabs.css +5 -2
  28. package/src/frosted/timeline.css +3 -2
  29. package/src/frosted/toc.css +2 -1
  30. package/src/frosted/toggle.css +5 -2
  31. package/src/frosted/toolbar.css +17 -9
  32. package/src/frosted/tree.css +10 -5
  33. package/src/palette.css +6 -1
package/src/frosted/table.css CHANGED
@@ -9,7 +9,9 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='frosted'] [data-table-header] th {
12
- @apply text-ink-soft border-ink-soft/20 border-b bg-paper-mute/80 backdrop-blur-sm;
12
+ @apply text-ink-soft border-b backdrop-blur-sm;
13
+ border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
14
+ background-color: color-mix(in oklch, var(--paper-mute) 80%, transparent);
13
15
  }
14
16
 
15
17
  [data-style='frosted'] [data-table-header-cell][data-sortable='true']:hover {
@@ -43,15 +45,17 @@
43
45
  ============================================================================= */
44
46
 
45
47
  [data-style='frosted'] [data-table-row] {
46
- @apply text-ink-mute border-ink-soft/10 border-b;
48
+ @apply text-ink-mute border-b;
49
+ border-color: color-mix(in oklch, var(--ink-soft) 10%, transparent);
47
50
  }
48
51
 
49
52
  [data-style='frosted'] [data-table-row]:hover {
50
- @apply bg-paper-mute/80;
53
+ background-color: color-mix(in oklch, var(--paper-mute) 80%, transparent);
51
54
  }
52
55
 
53
56
  [data-style='frosted'] [data-table-row]:focus {
54
- @apply bg-paper-mute/80 text-ink outline-none;
57
+ @apply text-ink outline-none;
58
+ background-color: color-mix(in oklch, var(--paper-mute) 80%, transparent);
55
59
  }
56
60
 
57
61
  [data-style='frosted'] [data-table-row][data-selected='true'] {
@@ -73,7 +77,7 @@
73
77
  ============================================================================= */
74
78
 
75
79
  [data-style='frosted'] [data-table-striped] [data-table-body] tr:nth-child(even) {
76
- @apply bg-paper-mute/30;
80
+ background-color: color-mix(in oklch, var(--paper-mute) 30%, transparent);
77
81
  }
78
82
 
79
83
  /* =============================================================================
@@ -102,7 +106,9 @@
102
106
 
103
107
  @media (max-width: 639px) {
104
108
  [data-style='frosted'] [data-table-responsive] [data-table-row] {
105
- @apply bg-paper-mute/80 border-ink-soft/20 border backdrop-blur-sm;
109
+ @apply border backdrop-blur-sm;
110
+ background-color: color-mix(in oklch, var(--paper-mute) 80%, transparent);
111
+ border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
106
112
  }
107
113
 
108
114
  [data-style='frosted'] [data-table-responsive] [data-table-cell]::before {
package/src/frosted/tabs.css CHANGED
@@ -9,7 +9,9 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='frosted'] [data-tabs-list] {
12
- @apply bg-paper-soft/70 border-ink-soft/20 rounded-t-lg border-0 border-b px-0 backdrop-blur-md;
12
+ @apply rounded-t-lg border-0 border-b px-0 backdrop-blur-md;
13
+ background-color: color-mix(in oklch, var(--paper-soft) 70%, transparent);
14
+ border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
13
15
  }
14
16
 
15
17
  [data-style='frosted'] [data-tabs][data-position='after'] [data-tabs-list] {
@@ -25,7 +27,8 @@
25
27
  }
26
28
 
27
29
  [data-style='frosted'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
28
- @apply text-ink-mute bg-paper-mute/15;
30
+ @apply text-ink-mute;
31
+ background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
29
32
  }
30
33
 
31
34
  /* Selected state */
package/src/frosted/timeline.css CHANGED
@@ -9,7 +9,8 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='frosted'] [data-timeline-circle] {
12
- @apply border-ink-soft/30 text-ink-soft;
12
+ @apply text-ink-soft;
13
+ border-color: color-mix(in oklch, var(--ink-soft) 30%, transparent);
13
14
  }
14
15
 
15
16
  [data-style='frosted'] [data-timeline-item][data-completed] [data-timeline-circle] {
@@ -25,7 +26,7 @@
25
26
  ============================================================================= */
26
27
 
27
28
  [data-style='frosted'] [data-timeline-connector] {
28
- @apply bg-ink-soft/20;
29
+ background-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
29
30
  }
30
31
 
31
32
  [data-style='frosted'] [data-timeline-item][data-completed] [data-timeline-connector] {
package/src/frosted/toc.css CHANGED
@@ -10,7 +10,8 @@
10
10
 
11
11
  [data-style='frosted'] [data-toc] [data-toc-item]:hover,
12
12
  [data-style='frosted'] [data-toc] [data-toc-item][data-toc-focused] {
13
- @apply text-ink bg-paper-mute/15 outline-none;
13
+ @apply text-ink outline-none;
14
+ background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
14
15
  }
15
16
 
16
17
  [data-style='frosted'] [data-toc] [data-toc-item][data-toc-active] {
package/src/frosted/toggle.css CHANGED
@@ -9,7 +9,9 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='frosted'] [data-toggle] {
12
- @apply bg-paper-soft/70 border-ink-soft/20 rounded-lg border backdrop-blur-md;
12
+ @apply rounded-lg border backdrop-blur-md;
13
+ background-color: color-mix(in oklch, var(--paper-soft) 70%, transparent);
14
+ border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
13
15
  }
14
16
 
15
17
  /* =============================================================================
@@ -22,7 +24,8 @@
22
24
 
23
25
  [data-style='frosted'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
24
26
  [data-style='frosted'] [data-toggle-option]:focus:not(:disabled):not([data-disabled='true']) {
25
- @apply text-ink-mute bg-paper-mute/15;
27
+ @apply text-ink-mute;
28
+ background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
26
29
  }
27
30
 
28
31
  /* Selected state */
package/src/frosted/toolbar.css CHANGED
@@ -9,25 +9,30 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='frosted'] [data-toolbar] {
12
- @apply bg-paper-soft/70 backdrop-blur-md;
12
+ @apply backdrop-blur-md;
13
+ background-color: color-mix(in oklch, var(--paper-soft) 70%, transparent);
13
14
  }
14
15
 
15
16
  /* Position-based borders */
16
17
  [data-style='frosted'] [data-toolbar][data-toolbar-position='top'],
17
18
  [data-style='frosted'] [data-toolbar]:not([data-toolbar-position]) {
18
- @apply border-ink-soft/20 border-b;
19
+ @apply border-b;
20
+ border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
19
21
  }
20
22
 
21
23
  [data-style='frosted'] [data-toolbar][data-toolbar-position='bottom'] {
22
- @apply border-ink-soft/20 border-t;
24
+ @apply border-t;
25
+ border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
23
26
  }
24
27
 
25
28
  [data-style='frosted'] [data-toolbar][data-toolbar-position='left'] {
26
- @apply border-ink-soft/20 border-r;
29
+ @apply border-r;
30
+ border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
27
31
  }
28
32
 
29
33
  [data-style='frosted'] [data-toolbar][data-toolbar-position='right'] {
30
- @apply border-ink-soft/20 border-l;
34
+ @apply border-l;
35
+ border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
31
36
  }
32
37
 
33
38
  /* =============================================================================
@@ -39,11 +44,14 @@
39
44
  }
40
45
 
41
46
  [data-style='frosted'] [data-toolbar-item]:hover:not(:disabled):not([data-disabled='true']) {
42
- @apply text-ink bg-paper-mute/15;
47
+ @apply text-ink;
48
+ background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
43
49
  }
44
50
 
45
51
  [data-style='frosted'] [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled='true']) {
46
- @apply text-ink ring-ink-soft/40 bg-paper-mute/15 ring-1 outline-none;
52
+ @apply text-ink ring-1 outline-none;
53
+ --un-ring-color: color-mix(in oklch, var(--ink-soft) 40%, transparent);
54
+ background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
47
55
  }
48
56
 
49
57
  /* Active/pressed state */
@@ -76,9 +84,9 @@
76
84
  ============================================================================= */
77
85
 
78
86
  [data-style='frosted'] [data-toolbar-separator] {
79
- @apply bg-ink-soft/20;
87
+ background-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
80
88
  }
81
89
 
82
90
  [data-style='frosted'] [data-toolbar-divider] {
83
- @apply bg-ink-soft/20;
91
+ background-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
84
92
  }
package/src/frosted/tree.css CHANGED
@@ -9,7 +9,8 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='frosted'] [data-tree]:focus-within {
12
- @apply ring-ink-soft/40 rounded ring-1;
12
+ @apply rounded ring-1;
13
+ --un-ring-color: color-mix(in oklch, var(--ink-soft) 40%, transparent);
13
14
  }
14
15
 
15
16
  /* =============================================================================
@@ -21,7 +22,8 @@
21
22
  }
22
23
 
23
24
  [data-style='frosted'] [data-tree-toggle-btn]:hover {
24
- @apply text-ink-mute bg-paper-mute/15;
25
+ @apply text-ink-mute;
26
+ background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
25
27
  }
26
28
 
27
29
  /* =============================================================================
@@ -34,12 +36,14 @@
34
36
 
35
37
  [data-style='frosted'] [data-tree-item-content]:hover:not(:disabled),
36
38
  [data-style='frosted'] [data-tree-item-content]:focus:not(:disabled) {
37
- @apply text-ink bg-paper-mute/15 outline-none;
39
+ @apply text-ink outline-none;
40
+ background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
38
41
  }
39
42
 
40
43
  /* Focus visible for keyboard navigation */
41
44
  [data-style='frosted'] [data-tree-item-content]:focus-visible {
42
- @apply ring-ink-soft/40 ring-1 outline-none;
45
+ @apply ring-1 outline-none;
46
+ --un-ring-color: color-mix(in oklch, var(--ink-soft) 40%, transparent);
43
47
  }
44
48
 
45
49
  /* Active/selected state */
@@ -76,7 +80,8 @@
76
80
  }
77
81
 
78
82
  [data-style='frosted'] [data-tree-item-content] [data-item-badge] {
79
- @apply text-ink-soft bg-paper-mute/15;
83
+ @apply text-ink-soft;
84
+ background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
80
85
  }
81
86
 
82
87
  [data-style='frosted'] [data-tree-item-content][data-active='true'] [data-item-badge] {
package/src/palette.css CHANGED
@@ -2,6 +2,11 @@
2
2
  :root {
3
3
  --scroll-width: 0.5rem;
4
4
  --tab-size: 2;
5
- @apply skin-default;
5
+ /*
6
+ * The default skin's named-token vars (--paper, --ink, --primary, …) now
7
+ * come from the preset's `:root` preflight. `themable` writes
8
+ * data-skin='default' by default, and `[data-skin='default']` resolves to
9
+ * :root (it's the active default), so :root already carries those vars.
10
+ */
6
11
  }
7
12
  }