ui-svelte 0.2.12 → 0.2.14

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 (98) hide show
  1. package/README.md +2 -2
  2. package/dist/charts/ArcChart.svelte +0 -1
  3. package/dist/control/Fab.svelte +103 -0
  4. package/dist/control/Fab.svelte.d.ts +25 -0
  5. package/dist/control/Record.svelte +0 -3
  6. package/dist/control/ToggleTheme.svelte +1 -1
  7. package/dist/control/Video.svelte +2 -0
  8. package/dist/control/css/btn.css +17 -17
  9. package/dist/control/css/fab.css +84 -0
  10. package/dist/control/css/media.css +7 -7
  11. package/dist/control/css/toggle-group.css +1 -17
  12. package/dist/css/decorations.css +348 -189
  13. package/dist/css/utilities.css +0 -4
  14. package/dist/display/Accordion.svelte +3 -3
  15. package/dist/display/Accordion.svelte.d.ts +1 -1
  16. package/dist/display/Card.svelte +3 -3
  17. package/dist/display/Card.svelte.d.ts +1 -1
  18. package/dist/display/Code.svelte +1 -1
  19. package/dist/display/Collapsible.svelte +3 -3
  20. package/dist/display/Collapsible.svelte.d.ts +1 -1
  21. package/dist/display/Countdown.svelte +169 -0
  22. package/dist/display/Countdown.svelte.d.ts +21 -0
  23. package/dist/display/Item.svelte +12 -0
  24. package/dist/display/Item.svelte.d.ts +2 -0
  25. package/dist/display/Marquee.svelte +0 -2
  26. package/dist/display/Section.svelte +3 -3
  27. package/dist/display/Section.svelte.d.ts +1 -1
  28. package/dist/display/css/accordion.css +14 -14
  29. package/dist/display/css/alert.css +42 -15
  30. package/dist/display/css/avatar.css +36 -36
  31. package/dist/display/css/card.css +108 -36
  32. package/dist/display/css/chip.css +16 -16
  33. package/dist/display/css/collapsible.css +32 -32
  34. package/dist/display/css/countdown.css +206 -0
  35. package/dist/display/css/item.css +24 -0
  36. package/dist/display/css/marquee.css +0 -3
  37. package/dist/display/css/section.css +88 -109
  38. package/dist/display/css/table.css +1 -16
  39. package/dist/form/ColorField.svelte +60 -2
  40. package/dist/form/DragDrop.svelte +317 -87
  41. package/dist/form/DragDrop.svelte.d.ts +1 -0
  42. package/dist/form/Dropzone.svelte +3 -3
  43. package/dist/form/Dropzone.svelte.d.ts +1 -1
  44. package/dist/form/ImageCropper.svelte +135 -4
  45. package/dist/form/RadioGroup.svelte +6 -2
  46. package/dist/form/RadioGroup.svelte.d.ts +1 -1
  47. package/dist/form/Slider.svelte +6 -2
  48. package/dist/form/Slider.svelte.d.ts +1 -1
  49. package/dist/form/TextField.svelte +13 -4
  50. package/dist/form/TextField.svelte.d.ts +3 -2
  51. package/dist/form/Toggle.svelte +6 -2
  52. package/dist/form/Toggle.svelte.d.ts +1 -1
  53. package/dist/form/css/control.css +14 -14
  54. package/dist/form/css/csv-field.css +8 -13
  55. package/dist/form/css/drag-drop.css +90 -127
  56. package/dist/form/css/dropzone.css +8 -8
  57. package/dist/form/css/editor.css +14 -14
  58. package/dist/form/css/image-cropper.css +28 -7
  59. package/dist/form/css/radio-group.css +25 -0
  60. package/dist/form/css/slider.css +36 -0
  61. package/dist/form/css/textarea.css +14 -14
  62. package/dist/form/css/toggle.css +12 -0
  63. package/dist/hooks/use-chat.svelte.js +1 -1
  64. package/dist/hooks/use-form.svelte.js +3 -3
  65. package/dist/hooks/use-search.svelte.js +0 -3
  66. package/dist/icons/index.d.ts +4 -0
  67. package/dist/icons/index.js +4 -0
  68. package/dist/index.css +28 -48
  69. package/dist/index.d.ts +4 -2
  70. package/dist/index.js +3 -1
  71. package/dist/layout/Provider.svelte +5 -5
  72. package/dist/layout/Sidebar.svelte +17 -8
  73. package/dist/layout/Sidebar.svelte.d.ts +2 -1
  74. package/dist/layout/css/app-bar.css +8 -7
  75. package/dist/layout/css/footer.css +7 -7
  76. package/dist/layout/css/sidebar.css +120 -59
  77. package/dist/navigation/BottomNav.svelte +23 -14
  78. package/dist/navigation/css/bottom-nav.css +74 -34
  79. package/dist/navigation/css/nav-menu.css +14 -15
  80. package/dist/navigation/css/side-nav.css +14 -15
  81. package/dist/overlay/AlertDialog.svelte +58 -0
  82. package/dist/overlay/AlertDialog.svelte.d.ts +14 -25
  83. package/dist/overlay/Command.svelte +177 -170
  84. package/dist/overlay/Command.svelte.d.ts +12 -3
  85. package/dist/overlay/Drawer.svelte +4 -4
  86. package/dist/overlay/Drawer.svelte.d.ts +1 -1
  87. package/dist/overlay/Modal.svelte +4 -4
  88. package/dist/overlay/Modal.svelte.d.ts +1 -1
  89. package/dist/overlay/Tooltip.svelte +0 -5
  90. package/dist/overlay/css/command.css +30 -42
  91. package/dist/overlay/css/drawer.css +10 -10
  92. package/dist/overlay/css/modal.css +70 -18
  93. package/dist/overlay/css/toast.css +42 -14
  94. package/dist/overlay/css/tooltip.css +49 -23
  95. package/dist/stores/theme.svelte.js +19 -12
  96. package/package.json +3 -2
  97. package/dist/utils/charts.d.ts +0 -27
  98. package/dist/utils/charts.js +0 -140
package/dist/display/css/avatar.css CHANGED
@@ -27,31 +27,31 @@
27
27
 
28
28
  .avatar {
29
29
  &.is-xs {
30
- @apply size-5;
30
+ @apply size-6;
31
31
  & .avatar-image {
32
- @apply size-5 object-cover rounded-avatar;
32
+ @apply size-6 object-cover rounded-avatar;
33
33
  }
34
34
  & .avatar-name {
35
35
  @apply text-xs;
36
36
  }
37
37
  & .avatar-icon {
38
- @apply size-3;
38
+ @apply size-4;
39
39
  }
40
40
  & .avatar-indicator {
41
- @apply size-1;
41
+ @apply size-1.5;
42
42
  }
43
43
  }
44
44
 
45
45
  &.is-sm {
46
- @apply size-6;
46
+ @apply size-8;
47
47
  & .avatar-image {
48
- @apply size-6 object-cover rounded-avatar;
48
+ @apply size-8 object-cover rounded-avatar;
49
49
  }
50
50
  & .avatar-name {
51
- @apply text-base;
51
+ @apply text-sm;
52
52
  }
53
53
  & .avatar-icon {
54
- @apply size-4;
54
+ @apply size-5;
55
55
  }
56
56
  & .avatar-indicator {
57
57
  @apply size-2;
@@ -59,31 +59,31 @@
59
59
  }
60
60
 
61
61
  &.is-md {
62
- @apply size-7;
62
+ @apply size-10;
63
63
  & .avatar-image {
64
- @apply size-7 object-cover rounded-avatar;
64
+ @apply size-10 object-cover rounded-avatar;
65
65
  }
66
66
  & .avatar-name {
67
- @apply text-lg;
67
+ @apply text-base;
68
68
  }
69
69
  & .avatar-icon {
70
- @apply size-5;
70
+ @apply size-6;
71
71
  }
72
72
  & .avatar-indicator {
73
- @apply size-2;
73
+ @apply size-2.5;
74
74
  }
75
75
  }
76
76
 
77
77
  &.is-lg {
78
- @apply size-10;
78
+ @apply size-12;
79
79
  & .avatar-image {
80
- @apply size-10 object-cover rounded-avatar;
80
+ @apply size-12 object-cover rounded-avatar;
81
81
  }
82
82
  & .avatar-name {
83
- @apply text-xl;
83
+ @apply text-lg;
84
84
  }
85
85
  & .avatar-icon {
86
- @apply size-6;
86
+ @apply size-8;
87
87
  }
88
88
  & .avatar-indicator {
89
89
  @apply size-3;
@@ -91,67 +91,67 @@
91
91
  }
92
92
 
93
93
  &.is-xl {
94
- @apply size-14;
94
+ @apply size-16;
95
95
  & .avatar-image {
96
- @apply size-14 object-cover rounded-avatar;
96
+ @apply size-16 object-cover rounded-avatar;
97
97
  }
98
98
  & .avatar-name {
99
- @apply text-3xl;
99
+ @apply text-2xl;
100
100
  }
101
101
  & .avatar-icon {
102
- @apply size-8;
102
+ @apply size-10;
103
103
  }
104
104
  & .avatar-indicator {
105
- @apply size-3;
105
+ @apply size-4;
106
106
  }
107
107
  }
108
108
  }
109
109
 
110
110
  .avatar.is-soft {
111
111
  &.is-primary {
112
- @apply bg-on-primary text-primary ring-primary hover:bg-on-primary/80;
112
+ @apply bg-soft-primary text-primary ring-primary;
113
113
  }
114
114
  &.is-secondary {
115
- @apply bg-on-secondary text-secondary ring-secondary hover:bg-on-secondary/80;
115
+ @apply bg-soft-secondary text-secondary ring-secondary;
116
116
  }
117
117
  &.is-muted {
118
- @apply bg-muted text-on-muted ring-muted hover:bg-muted/80;
118
+ @apply bg-muted text-on-muted ring-muted;
119
119
  }
120
120
  &.is-success {
121
- @apply bg-on-success text-success ring-success hover:bg-on-success/80;
121
+ @apply bg-soft-success text-success ring-success;
122
122
  }
123
123
  &.is-info {
124
- @apply bg-on-info text-info ring-info hover:bg-on-info/80;
124
+ @apply bg-soft-info text-info ring-info;
125
125
  }
126
126
  &.is-warning {
127
- @apply bg-on-warning text-warning ring-warning hover:bg-on-warning/80;
127
+ @apply bg-soft-warning text-warning ring-warning;
128
128
  }
129
129
  &.is-danger {
130
- @apply bg-on-danger text-danger ring-danger hover:bg-on-danger/80;
130
+ @apply bg-soft-danger text-danger ring-danger;
131
131
  }
132
132
  }
133
133
 
134
134
  .avatar.is-solid {
135
135
  &.is-primary {
136
- @apply bg-primary text-on-primary ring-primary hover:bg-primary/80;
136
+ @apply bg-primary text-on-primary ring-primary;
137
137
  }
138
138
  &.is-secondary {
139
- @apply bg-secondary text-on-secondary ring-secondary hover:bg-secondary/80;
139
+ @apply bg-secondary text-on-secondary ring-secondary;
140
140
  }
141
141
  &.is-muted {
142
- @apply bg-on-muted text-muted ring-muted hover:bg-on-muted/80;
142
+ @apply bg-muted text-on-muted ring-muted;
143
143
  }
144
144
  &.is-success {
145
- @apply bg-success text-on-success ring-success hover:bg-success/80;
145
+ @apply bg-success text-on-success ring-success;
146
146
  }
147
147
  &.is-info {
148
- @apply bg-info text-on-info ring-info hover:bg-info/80;
148
+ @apply bg-info text-on-info ring-info;
149
149
  }
150
150
  &.is-warning {
151
- @apply bg-warning text-on-warning ring-warning hover:bg-warning/80;
151
+ @apply bg-warning text-on-warning ring-warning;
152
152
  }
153
153
  &.is-danger {
154
- @apply bg-danger text-on-danger ring-danger hover:bg-danger/80;
154
+ @apply bg-danger text-on-danger ring-danger;
155
155
  }
156
156
  }
157
157
 
package/dist/display/css/card.css CHANGED
@@ -8,55 +8,127 @@
8
8
  }
9
9
 
10
10
  &.is-soft {
11
- &.is-primary { @apply bg-on-primary text-primary; }
12
- &.is-secondary { @apply bg-on-secondary text-secondary; }
13
- &.is-muted { @apply bg-muted text-on-muted; }
14
- &.is-success { @apply bg-on-success text-success; }
15
- &.is-info { @apply bg-on-info text-info; }
16
- &.is-warning { @apply bg-on-warning text-warning; }
17
- &.is-danger { @apply bg-on-danger text-danger; }
18
- &.is-default { @apply bg-background text-on-background; }
19
- &.is-surface { @apply bg-surface text-on-surface; }
11
+ &.is-primary {
12
+ @apply bg-soft-primary text-primary;
13
+ }
14
+ &.is-secondary {
15
+ @apply bg-soft-secondary text-secondary;
16
+ }
17
+ &.is-muted {
18
+ @apply bg-soft-muted text-on-muted;
19
+ }
20
+ &.is-background {
21
+ @apply bg-background text-on-background;
22
+ }
23
+ &.is-surface {
24
+ @apply bg-surface text-on-surface;
25
+ }
26
+ &.is-success {
27
+ @apply bg-soft-success text-success;
28
+ }
29
+ &.is-info {
30
+ @apply bg-soft-info text-info;
31
+ }
32
+ &.is-warning {
33
+ @apply bg-soft-warning text-warning;
34
+ }
35
+ &.is-danger {
36
+ @apply bg-soft-danger text-danger;
37
+ }
20
38
  }
21
39
 
22
40
  &.is-solid {
23
- &.is-primary { @apply bg-primary text-on-primary; }
24
- &.is-secondary { @apply bg-secondary text-on-secondary; }
25
- &.is-muted { @apply bg-on-muted text-muted; }
26
- &.is-success { @apply bg-success text-on-success; }
27
- &.is-info { @apply bg-info text-on-info; }
28
- &.is-warning { @apply bg-warning text-on-warning; }
29
- &.is-danger { @apply bg-danger text-on-danger; }
30
- &.is-default { @apply bg-background text-on-background; }
31
- &.is-surface { @apply bg-surface text-on-surface; }
41
+ &.is-primary {
42
+ @apply bg-primary text-on-primary;
43
+ }
44
+ &.is-secondary {
45
+ @apply bg-secondary text-on-secondary;
46
+ }
47
+ &.is-muted {
48
+ @apply bg-muted text-on-muted;
49
+ }
50
+ &.is-background {
51
+ @apply bg-background text-on-background;
52
+ }
53
+ &.is-surface {
54
+ @apply bg-surface text-on-surface;
55
+ }
56
+ &.is-success {
57
+ @apply bg-success text-on-success;
58
+ }
59
+ &.is-info {
60
+ @apply bg-info text-on-info;
61
+ }
62
+ &.is-warning {
63
+ @apply bg-warning text-on-warning;
64
+ }
65
+ &.is-danger {
66
+ @apply bg-danger text-on-danger;
67
+ }
32
68
  }
33
69
 
34
70
  &.is-outlined {
35
71
  @apply border;
36
72
 
37
- &.is-primary { @apply border-primary text-primary; }
38
- &.is-secondary { @apply border-secondary text-secondary; }
39
- &.is-muted { @apply border-on-muted text-on-muted; }
40
- &.is-success { @apply border-success text-success; }
41
- &.is-info { @apply border-info text-info; }
42
- &.is-warning { @apply border-warning text-warning; }
43
- &.is-danger { @apply border-danger text-danger; }
44
- &.is-default { @apply border-on-background text-on-background; }
45
- &.is-surface { @apply border-on-surface text-on-surface; }
73
+ &.is-primary {
74
+ @apply border-primary text-primary;
75
+ }
76
+ &.is-secondary {
77
+ @apply border-secondary text-secondary;
78
+ }
79
+ &.is-muted {
80
+ @apply border-muted text-on-muted;
81
+ }
82
+ &.is-background {
83
+ @apply border-on-background text-on-background;
84
+ }
85
+ &.is-surface {
86
+ @apply border-on-surface text-on-surface;
87
+ }
88
+ &.is-success {
89
+ @apply border-success text-success;
90
+ }
91
+ &.is-info {
92
+ @apply border-info text-info;
93
+ }
94
+ &.is-warning {
95
+ @apply border-warning text-warning;
96
+ }
97
+ &.is-danger {
98
+ @apply border-danger text-danger;
99
+ }
46
100
  }
47
101
 
48
102
  &.is-ghost {
49
103
  @apply bg-transparent;
50
104
 
51
- &.is-primary { @apply text-primary; }
52
- &.is-secondary { @apply text-secondary; }
53
- &.is-muted { @apply text-on-muted; }
54
- &.is-success { @apply text-success; }
55
- &.is-info { @apply text-info; }
56
- &.is-warning { @apply text-warning; }
57
- &.is-danger { @apply text-danger; }
58
- &.is-default { @apply text-on-background; }
59
- &.is-surface { @apply text-on-surface; }
105
+ &.is-primary {
106
+ @apply text-primary;
107
+ }
108
+ &.is-secondary {
109
+ @apply text-secondary;
110
+ }
111
+ &.is-muted {
112
+ @apply text-on-muted;
113
+ }
114
+ &.is-background {
115
+ @apply text-on-background;
116
+ }
117
+ &.is-surface {
118
+ @apply text-on-surface;
119
+ }
120
+ &.is-success {
121
+ @apply text-success;
122
+ }
123
+ &.is-info {
124
+ @apply text-info;
125
+ }
126
+ &.is-warning {
127
+ @apply text-warning;
128
+ }
129
+ &.is-danger {
130
+ @apply text-danger;
131
+ }
60
132
  }
61
133
  }
62
134
 
package/dist/display/css/chip.css CHANGED
@@ -69,25 +69,25 @@
69
69
 
70
70
  .chip.is-soft {
71
71
  &.is-primary {
72
- @apply bg-on-primary text-primary;
72
+ @apply bg-soft-primary text-primary;
73
73
  }
74
74
  &.is-secondary {
75
- @apply bg-on-secondary text-secondary;
75
+ @apply bg-soft-secondary text-secondary;
76
76
  }
77
77
  &.is-muted {
78
- @apply bg-muted text-on-muted;
78
+ @apply bg-soft-muted text-on-muted;
79
79
  }
80
80
  &.is-success {
81
- @apply bg-on-success text-success;
81
+ @apply bg-soft-success text-success;
82
82
  }
83
83
  &.is-info {
84
- @apply bg-on-info text-info;
84
+ @apply bg-soft-info text-info;
85
85
  }
86
86
  &.is-warning {
87
- @apply bg-on-warning text-warning;
87
+ @apply bg-soft-warning text-warning;
88
88
  }
89
89
  &.is-danger {
90
- @apply bg-on-danger text-danger;
90
+ @apply bg-soft-danger text-danger;
91
91
  }
92
92
  }
93
93
 
@@ -99,7 +99,7 @@
99
99
  @apply bg-secondary text-on-secondary;
100
100
  }
101
101
  &.is-muted {
102
- @apply bg-on-muted text-muted;
102
+ @apply bg-muted text-on-muted;
103
103
  }
104
104
  &.is-success {
105
105
  @apply bg-success text-on-success;
@@ -123,7 +123,7 @@
123
123
  @apply inset-ring-2 inset-ring-secondary text-secondary;
124
124
  }
125
125
  &.is-muted {
126
- @apply inset-ring-2 inset-ring-on-muted text-on-muted;
126
+ @apply inset-ring-2 inset-ring-muted text-on-muted;
127
127
  }
128
128
  &.is-success {
129
129
  @apply inset-ring-2 inset-ring-success text-success;
@@ -141,25 +141,25 @@
141
141
 
142
142
  .chip.is-overlay {
143
143
  &.is-primary {
144
- @apply bg-on-primary/60 text-primary;
144
+ @apply bg-overlay text-on-overlay;
145
145
  }
146
146
  &.is-secondary {
147
- @apply bg-on-secondary/60 text-secondary;
147
+ @apply bg-overlay text-on-overlay;
148
148
  }
149
149
  &.is-muted {
150
- @apply bg-muted/60 text-on-muted;
150
+ @apply bg-overlay text-on-overlay;
151
151
  }
152
152
  &.is-success {
153
- @apply bg-on-success/60 text-success;
153
+ @apply bg-overlay text-on-overlay;
154
154
  }
155
155
  &.is-info {
156
- @apply bg-on-info/60 text-info;
156
+ @apply bg-overlay text-on-overlay;
157
157
  }
158
158
  &.is-warning {
159
- @apply bg-on-warning/60 text-warning;
159
+ @apply bg-overlay text-on-overlay;
160
160
  }
161
161
  &.is-danger {
162
- @apply bg-on-danger/60 text-danger;
162
+ @apply bg-overlay text-on-overlay;
163
163
  }
164
164
  }
165
165
  }
package/dist/display/css/collapsible.css CHANGED
@@ -144,66 +144,66 @@
144
144
  @apply border border-transparent;
145
145
 
146
146
  &.is-primary {
147
- @apply bg-on-primary/50;
147
+ @apply bg-soft-primary/50;
148
148
  .collapsible-header:hover {
149
- @apply bg-on-primary/80;
149
+ @apply bg-soft-primary/80;
150
150
  }
151
151
  .collapsible-header.is-open {
152
- @apply bg-on-primary text-primary;
152
+ @apply bg-soft-primary text-primary;
153
153
  }
154
154
  }
155
155
  &.is-secondary {
156
- @apply bg-on-secondary/50;
156
+ @apply bg-soft-secondary/50;
157
157
  .collapsible-header:hover {
158
- @apply bg-on-secondary/80;
158
+ @apply bg-soft-secondary/80;
159
159
  }
160
160
  .collapsible-header.is-open {
161
- @apply bg-on-secondary text-secondary;
161
+ @apply bg-soft-secondary text-secondary;
162
162
  }
163
163
  }
164
164
  &.is-muted {
165
- @apply bg-muted/30;
165
+ @apply bg-soft-muted/30;
166
166
  .collapsible-header:hover {
167
- @apply bg-muted/50;
167
+ @apply bg-soft-muted/50;
168
168
  }
169
169
  .collapsible-header.is-open {
170
- @apply bg-muted text-on-muted;
170
+ @apply bg-soft-muted text-on-muted;
171
171
  }
172
172
  }
173
173
  &.is-success {
174
- @apply bg-on-success/50;
174
+ @apply bg-soft-success/50;
175
175
  .collapsible-header:hover {
176
- @apply bg-on-success/80;
176
+ @apply bg-soft-success/80;
177
177
  }
178
178
  .collapsible-header.is-open {
179
- @apply bg-on-success text-success;
179
+ @apply bg-soft-success text-success;
180
180
  }
181
181
  }
182
182
  &.is-info {
183
- @apply bg-on-info/50;
183
+ @apply bg-soft-info/50;
184
184
  .collapsible-header:hover {
185
- @apply bg-on-info/80;
185
+ @apply bg-soft-info/80;
186
186
  }
187
187
  .collapsible-header.is-open {
188
- @apply bg-on-info text-info;
188
+ @apply bg-soft-info text-info;
189
189
  }
190
190
  }
191
191
  &.is-warning {
192
- @apply bg-on-warning/50;
192
+ @apply bg-soft-warning/50;
193
193
  .collapsible-header:hover {
194
- @apply bg-on-warning/80;
194
+ @apply bg-soft-warning/80;
195
195
  }
196
196
  .collapsible-header.is-open {
197
- @apply bg-on-warning text-warning;
197
+ @apply bg-soft-warning text-warning;
198
198
  }
199
199
  }
200
200
  &.is-danger {
201
- @apply bg-on-danger/50;
201
+ @apply bg-soft-danger/50;
202
202
  .collapsible-header:hover {
203
- @apply bg-on-danger/80;
203
+ @apply bg-soft-danger/80;
204
204
  }
205
205
  .collapsible-header.is-open {
206
- @apply bg-on-danger text-danger;
206
+ @apply bg-soft-danger text-danger;
207
207
  }
208
208
  }
209
209
  &.is-surface {
@@ -215,13 +215,13 @@
215
215
  @apply bg-surface text-on-surface;
216
216
  }
217
217
  }
218
- &.is-default {
219
- @apply bg-muted/20;
218
+ &.is-background {
219
+ @apply bg-background/20;
220
220
  .collapsible-header:hover {
221
- @apply bg-muted/30;
221
+ @apply bg-background/30;
222
222
  }
223
223
  .collapsible-header.is-open {
224
- @apply bg-muted/50;
224
+ @apply bg-background/50;
225
225
  }
226
226
  }
227
227
  }
@@ -293,12 +293,12 @@
293
293
  @apply bg-surface text-on-surface;
294
294
  }
295
295
  }
296
- &.is-default {
296
+ &.is-background {
297
297
  .collapsible-header:hover {
298
- @apply bg-muted/50;
298
+ @apply bg-background/50;
299
299
  }
300
300
  .collapsible-header.is-open {
301
- @apply bg-on-background text-background;
301
+ @apply bg-background text-on-background;
302
302
  }
303
303
  }
304
304
  }
@@ -376,13 +376,13 @@
376
376
  @apply bg-surface text-on-surface;
377
377
  }
378
378
  }
379
- &.is-default {
380
- @apply border border-muted;
379
+ &.is-background {
380
+ @apply border border-background;
381
381
  .collapsible-header:hover {
382
- @apply bg-muted/30;
382
+ @apply bg-background/30;
383
383
  }
384
384
  .collapsible-header.is-open {
385
- @apply bg-muted/20;
385
+ @apply bg-background;
386
386
  }
387
387
  }
388
388
  }