@xsynaptic/sonic-ui 0.22.0 → 0.24.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.
Files changed (30) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/README.md +1 -0
  3. package/dist/default/elements/wave-element.js +1 -0
  4. package/dist/default/elements/waveform.js +48 -4
  5. package/dist/default/elements/wavestrip.js +1 -0
  6. package/dist/default/lib/waveform-bands.js +98 -0
  7. package/dist/default/lib/waveform-scene.js +63 -16
  8. package/dist/dev/elements/wave-element.d.ts +3 -2
  9. package/dist/dev/elements/wave-element.js +1 -0
  10. package/dist/dev/elements/wave-element.js.map +1 -1
  11. package/dist/dev/elements/waveform.d.ts +16 -4
  12. package/dist/dev/elements/waveform.js +48 -4
  13. package/dist/dev/elements/waveform.js.map +1 -1
  14. package/dist/dev/elements/wavestrip.d.ts +1 -0
  15. package/dist/dev/elements/wavestrip.js +1 -0
  16. package/dist/dev/elements/wavestrip.js.map +1 -1
  17. package/dist/dev/index.d.ts +2 -1
  18. package/dist/dev/lib/waveform-bands.d.ts +13 -0
  19. package/dist/dev/lib/waveform-bands.js +99 -0
  20. package/dist/dev/lib/waveform-bands.js.map +1 -0
  21. package/dist/dev/lib/waveform-scene.d.ts +9 -1
  22. package/dist/dev/lib/waveform-scene.js +63 -16
  23. package/dist/dev/lib/waveform-scene.js.map +1 -1
  24. package/dist/skins/amber.css +1 -0
  25. package/dist/skins/flat.css +0 -1
  26. package/dist/skins/ivory.css +1 -0
  27. package/dist/skins/lime.css +1 -0
  28. package/dist/skins/slate.css +1 -0
  29. package/dist/styles/waveform.css +50 -11
  30. package/package.json +1 -1
package/dist/styles/waveform.css CHANGED
@@ -30,10 +30,46 @@
30
30
  initial-value: rgb(245 158 10);
31
31
  }
32
32
 
33
- @property --_sonic-waveform-wave-edge {
33
+ @property --_sonic-waveform-shade {
34
34
  syntax: '<color>';
35
35
  inherits: true;
36
- initial-value: rgb(110 70 5);
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;
55
+ }
56
+
57
+ @property --_sonic-waveform-band-normalize {
58
+ syntax: '<number>';
59
+ inherits: true;
60
+ initial-value: 1;
61
+ }
62
+
63
+ @property --_sonic-waveform-band-contrast {
64
+ syntax: '<number>';
65
+ inherits: true;
66
+ initial-value: 1;
67
+ }
68
+
69
+ @property --_sonic-waveform-band-tilt {
70
+ syntax: '<number>';
71
+ inherits: true;
72
+ initial-value: 0;
37
73
  }
38
74
 
39
75
  @property --_sonic-waveform-grid {
@@ -98,14 +134,15 @@
98
134
  );
99
135
  --_sonic-waveform-lit: var(--_sonic-lit);
100
136
  --_sonic-waveform-wave: var(--_sonic-waveform-lit);
101
- --_sonic-waveform-wave-edge: var(
102
- --sonic-waveform-edge,
103
- color-mix(
104
- in oklab,
105
- var(--_sonic-waveform-lit) calc(100% - 55% * var(--_sonic-relief)),
106
- var(--_sonic-shade)
107
- )
137
+ --_sonic-waveform-shade: var(--_sonic-shade);
138
+ --_sonic-waveform-shade-clear: rgb(from var(--_sonic-shade) r g b / 0%);
139
+ --_sonic-waveform-edge-shade: var(--sonic-waveform-edge-shade, 0);
140
+ --_sonic-waveform-band-opacity: calc(
141
+ var(--sonic-waveform-band-opacity, 1) * var(--_sonic-waveform-band-dim, 1)
108
142
  );
143
+ --_sonic-waveform-band-normalize: var(--sonic-waveform-band-normalize, 1);
144
+ --_sonic-waveform-band-contrast: var(--sonic-waveform-band-contrast, 1);
145
+ --_sonic-waveform-band-tilt: var(--sonic-waveform-band-tilt, 0);
109
146
  --_sonic-waveform-grid: var(--sonic-waveform-grid, var(--_sonic-etch));
110
147
  --_sonic-waveform-ends: var(--sonic-waveform-ends, var(--_sonic-etch));
111
148
  --_sonic-waveform-placeholder: var(--sonic-waveform-placeholder, var(--_sonic-etch));
@@ -153,10 +190,12 @@
153
190
 
154
191
  [dimmed] > .sonic-waveform {
155
192
  --_sonic-waveform-lit: var(--_sonic-lit-off);
193
+ --_sonic-waveform-band-dim: 0.75;
156
194
  }
157
195
 
158
196
  :disabled > .sonic-waveform {
159
197
  --_sonic-waveform-lit: var(--_sonic-lit-disabled);
198
+ --_sonic-waveform-band-dim: 0.25;
160
199
 
161
200
  cursor: default;
162
201
  }
@@ -219,7 +258,8 @@
219
258
  @media (forced-colors: active) {
220
259
  .sonic-waveform {
221
260
  --_sonic-waveform-wave: rgb(from CanvasText r g b / 100%);
222
- --_sonic-waveform-wave-edge: rgb(from CanvasText r g b / 100%);
261
+ --_sonic-waveform-edge-shade: 0;
262
+ --_sonic-waveform-band-opacity: 0;
223
263
  --_sonic-waveform-grid: rgb(from GrayText r g b / 100%);
224
264
  --_sonic-waveform-ends: rgb(from GrayText r g b / 100%);
225
265
  --_sonic-waveform-placeholder: rgb(from GrayText r g b / 100%);
@@ -228,7 +268,6 @@
228
268
 
229
269
  :disabled > .sonic-waveform {
230
270
  --_sonic-waveform-wave: rgb(from GrayText r g b / 100%);
231
- --_sonic-waveform-wave-edge: rgb(from GrayText r g b / 100%);
232
271
  }
233
272
 
234
273
  :is(.sonic-waveform-playhead, .sonic-waveform-ghost) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsynaptic/sonic-ui",
3
- "version": "0.22.0",
3
+ "version": "0.24.0",
4
4
  "description": "Native custom elements for audio interfaces, skinned with CSS custom properties",
5
5
  "keywords": [
6
6
  "custom-elements",