@xsynaptic/sonic-ui 0.22.0 → 0.23.0
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.
- package/CHANGELOG.md +7 -0
- package/README.md +1 -0
- package/dist/default/elements/wave-element.js +1 -0
- package/dist/default/elements/waveform.js +48 -4
- package/dist/default/elements/wavestrip.js +1 -0
- package/dist/default/lib/waveform-bands.js +85 -0
- package/dist/default/lib/waveform-scene.js +52 -16
- package/dist/dev/elements/wave-element.d.ts +3 -2
- package/dist/dev/elements/wave-element.js +1 -0
- package/dist/dev/elements/wave-element.js.map +1 -1
- package/dist/dev/elements/waveform.d.ts +13 -4
- package/dist/dev/elements/waveform.js +48 -4
- package/dist/dev/elements/waveform.js.map +1 -1
- package/dist/dev/elements/wavestrip.d.ts +1 -0
- package/dist/dev/elements/wavestrip.js +1 -0
- package/dist/dev/elements/wavestrip.js.map +1 -1
- package/dist/dev/index.d.ts +2 -1
- package/dist/dev/lib/waveform-bands.d.ts +13 -0
- package/dist/dev/lib/waveform-bands.js +86 -0
- package/dist/dev/lib/waveform-bands.js.map +1 -0
- package/dist/dev/lib/waveform-scene.d.ts +6 -1
- package/dist/dev/lib/waveform-scene.js +52 -16
- package/dist/dev/lib/waveform-scene.js.map +1 -1
- package/dist/skins/amber.css +1 -0
- package/dist/skins/flat.css +0 -1
- package/dist/skins/ivory.css +1 -0
- package/dist/skins/lime.css +1 -0
- package/dist/skins/slate.css +1 -0
- package/dist/styles/waveform.css +29 -11
- package/package.json +1 -1
package/dist/styles/waveform.css
CHANGED
|
@@ -30,10 +30,28 @@
|
|
|
30
30
|
initial-value: rgb(245 158 10);
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
@property --_sonic-waveform-
|
|
33
|
+
@property --_sonic-waveform-shade {
|
|
34
34
|
syntax: '<color>';
|
|
35
35
|
inherits: true;
|
|
36
|
-
initial-value: rgb(
|
|
36
|
+
initial-value: rgb(0 0 0);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
@property --_sonic-waveform-shade-clear {
|
|
40
|
+
syntax: '<color>';
|
|
41
|
+
inherits: true;
|
|
42
|
+
initial-value: rgb(0 0 0 / 0%);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@property --_sonic-waveform-edge-shade {
|
|
46
|
+
syntax: '<number>';
|
|
47
|
+
inherits: true;
|
|
48
|
+
initial-value: 0;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@property --_sonic-waveform-band-opacity {
|
|
52
|
+
syntax: '<number>';
|
|
53
|
+
inherits: true;
|
|
54
|
+
initial-value: 1;
|
|
37
55
|
}
|
|
38
56
|
|
|
39
57
|
@property --_sonic-waveform-grid {
|
|
@@ -98,13 +116,11 @@
|
|
|
98
116
|
);
|
|
99
117
|
--_sonic-waveform-lit: var(--_sonic-lit);
|
|
100
118
|
--_sonic-waveform-wave: var(--_sonic-waveform-lit);
|
|
101
|
-
--_sonic-waveform-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
var(--_sonic-shade)
|
|
107
|
-
)
|
|
119
|
+
--_sonic-waveform-shade: var(--_sonic-shade);
|
|
120
|
+
--_sonic-waveform-shade-clear: rgb(from var(--_sonic-shade) r g b / 0%);
|
|
121
|
+
--_sonic-waveform-edge-shade: var(--sonic-waveform-edge-shade, 0);
|
|
122
|
+
--_sonic-waveform-band-opacity: calc(
|
|
123
|
+
var(--sonic-waveform-band-opacity, 1) * var(--_sonic-waveform-band-dim, 1)
|
|
108
124
|
);
|
|
109
125
|
--_sonic-waveform-grid: var(--sonic-waveform-grid, var(--_sonic-etch));
|
|
110
126
|
--_sonic-waveform-ends: var(--sonic-waveform-ends, var(--_sonic-etch));
|
|
@@ -153,10 +169,12 @@
|
|
|
153
169
|
|
|
154
170
|
[dimmed] > .sonic-waveform {
|
|
155
171
|
--_sonic-waveform-lit: var(--_sonic-lit-off);
|
|
172
|
+
--_sonic-waveform-band-dim: 0.75;
|
|
156
173
|
}
|
|
157
174
|
|
|
158
175
|
:disabled > .sonic-waveform {
|
|
159
176
|
--_sonic-waveform-lit: var(--_sonic-lit-disabled);
|
|
177
|
+
--_sonic-waveform-band-dim: 0.25;
|
|
160
178
|
|
|
161
179
|
cursor: default;
|
|
162
180
|
}
|
|
@@ -219,7 +237,8 @@
|
|
|
219
237
|
@media (forced-colors: active) {
|
|
220
238
|
.sonic-waveform {
|
|
221
239
|
--_sonic-waveform-wave: rgb(from CanvasText r g b / 100%);
|
|
222
|
-
--_sonic-waveform-
|
|
240
|
+
--_sonic-waveform-edge-shade: 0;
|
|
241
|
+
--_sonic-waveform-band-opacity: 0;
|
|
223
242
|
--_sonic-waveform-grid: rgb(from GrayText r g b / 100%);
|
|
224
243
|
--_sonic-waveform-ends: rgb(from GrayText r g b / 100%);
|
|
225
244
|
--_sonic-waveform-placeholder: rgb(from GrayText r g b / 100%);
|
|
@@ -228,7 +247,6 @@
|
|
|
228
247
|
|
|
229
248
|
:disabled > .sonic-waveform {
|
|
230
249
|
--_sonic-waveform-wave: rgb(from GrayText r g b / 100%);
|
|
231
|
-
--_sonic-waveform-wave-edge: rgb(from GrayText r g b / 100%);
|
|
232
250
|
}
|
|
233
251
|
|
|
234
252
|
:is(.sonic-waveform-playhead, .sonic-waveform-ghost) {
|