@xsynaptic/sonic-ui 0.20.0 → 0.22.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 +30 -0
- package/README.md +22 -108
- package/dist/default/elements/button.js +2 -1
- package/dist/default/elements/envelope.js +3 -6
- package/dist/default/elements/field-gesture.js +3 -0
- package/dist/default/elements/split.js +6 -7
- package/dist/default/elements/switch.js +5 -3
- package/dist/default/elements/toggle.js +10 -5
- package/dist/default/elements/value-element.js +3 -0
- package/dist/default/elements/value-entry.js +5 -18
- package/dist/default/elements/waveform.js +15 -4
- package/dist/default/elements/xy.js +33 -5
- package/dist/default/lib/double-press.js +30 -0
- package/dist/dev/elements/button.js +2 -1
- package/dist/dev/elements/button.js.map +1 -1
- package/dist/dev/elements/envelope.js +3 -6
- package/dist/dev/elements/envelope.js.map +1 -1
- package/dist/dev/elements/field-gesture.js +3 -0
- package/dist/dev/elements/field-gesture.js.map +1 -1
- package/dist/dev/elements/number.js +1 -4
- package/dist/dev/elements/number.js.map +1 -1
- package/dist/dev/elements/split.js +6 -7
- package/dist/dev/elements/split.js.map +1 -1
- package/dist/dev/elements/switch.js +5 -3
- package/dist/dev/elements/switch.js.map +1 -1
- package/dist/dev/elements/toggle.js +10 -5
- package/dist/dev/elements/toggle.js.map +1 -1
- package/dist/dev/elements/value-element.js +3 -0
- package/dist/dev/elements/value-element.js.map +1 -1
- package/dist/dev/elements/value-entry.js +5 -18
- package/dist/dev/elements/value-entry.js.map +1 -1
- package/dist/dev/elements/waveform.d.ts +2 -0
- package/dist/dev/elements/waveform.js +15 -4
- package/dist/dev/elements/waveform.js.map +1 -1
- package/dist/dev/elements/xy.d.ts +4 -0
- package/dist/dev/elements/xy.js +33 -5
- package/dist/dev/elements/xy.js.map +1 -1
- package/dist/dev/lib/double-press.js +31 -0
- package/dist/dev/lib/double-press.js.map +1 -0
- package/dist/styles/button.css +1 -0
- package/dist/styles/dial.css +1 -1
- package/dist/styles/envelope.css +2 -1
- package/dist/styles/led.css +7 -19
- package/dist/styles/material/cap.css +26 -7
- package/dist/styles/material/core.css +9 -1
- package/dist/styles/material/glass.css +1 -2
- package/dist/styles/material/lens.css +18 -1
- package/dist/styles/material/pane.css +2 -5
- package/dist/styles/material/readout.css +11 -3
- package/dist/styles/material/value.css +1 -1
- package/dist/styles/material/well.css +8 -1
- package/dist/styles/meter.css +6 -4
- package/dist/styles/number.css +8 -9
- package/dist/styles/slider.css +29 -11
- package/dist/styles/toggle.css +4 -0
- package/dist/styles/xy.css +4 -19
- package/package.json +1 -1
package/dist/styles/xy.css
CHANGED
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
--_sonic-xy-puck-ratio: var(--sonic-xy-puck-ratio, 0.2);
|
|
28
28
|
--_sonic-unit: calc(var(--_sonic-xy-size) / 96);
|
|
29
29
|
--_sonic-xy-lit: var(--_sonic-lit);
|
|
30
|
+
--_sonic-xy-puck-core: var(--_sonic-xy-lit);
|
|
30
31
|
--_sonic-xy-cursor: grab;
|
|
31
32
|
--_sonic-xy-puck: calc(var(--_sonic-xy-size) * var(--_sonic-xy-puck-ratio));
|
|
32
33
|
--_sonic-xy-travel-x: calc(100cqi - var(--_sonic-xy-puck));
|
|
@@ -47,6 +48,7 @@
|
|
|
47
48
|
|
|
48
49
|
:disabled > .sonic-xy {
|
|
49
50
|
--_sonic-xy-lit: var(--_sonic-lit-disabled);
|
|
51
|
+
--_sonic-xy-puck-core: color-mix(in oklab, var(--_sonic-ink) 25%, var(--_sonic-unlit-solid));
|
|
50
52
|
--_sonic-xy-cursor: default;
|
|
51
53
|
|
|
52
54
|
cursor: default;
|
|
@@ -58,8 +60,6 @@
|
|
|
58
60
|
--_sonic-xy-x-high: max(var(--_sonic-xy-x-origin, 0), var(--_sonic-xy-x, 0));
|
|
59
61
|
--_sonic-xy-y-low: min(var(--_sonic-xy-y-origin, 0), var(--_sonic-xy-y, 0));
|
|
60
62
|
--_sonic-xy-y-high: max(var(--_sonic-xy-y-origin, 0), var(--_sonic-xy-y, 0));
|
|
61
|
-
--_sonic-xy-cut-x: calc(var(--_sonic-xy-x, 0) * var(--_sonic-xy-travel-x));
|
|
62
|
-
--_sonic-xy-cut-y: calc(var(--_sonic-xy-y, 0) * var(--_sonic-xy-travel-y));
|
|
63
63
|
|
|
64
64
|
position: absolute;
|
|
65
65
|
inset: 0;
|
|
@@ -71,8 +71,6 @@
|
|
|
71
71
|
content: '';
|
|
72
72
|
}
|
|
73
73
|
|
|
74
|
-
/* Each line is cut under the puck, which is see-through while held; the cut ends inside its ring */
|
|
75
|
-
|
|
76
74
|
&::before {
|
|
77
75
|
inset: auto 0
|
|
78
76
|
calc(
|
|
@@ -96,12 +94,6 @@
|
|
|
96
94
|
transparent 0
|
|
97
95
|
),
|
|
98
96
|
var(--_sonic-unlit);
|
|
99
|
-
mask: linear-gradient(
|
|
100
|
-
to right,
|
|
101
|
-
#000 calc(var(--_sonic-xy-cut-x) + 0.29 * var(--_sonic-xy-puck)),
|
|
102
|
-
transparent 0 calc(var(--_sonic-xy-cut-x) + 0.71 * var(--_sonic-xy-puck)),
|
|
103
|
-
#000 0
|
|
104
|
-
);
|
|
105
97
|
}
|
|
106
98
|
|
|
107
99
|
&::after {
|
|
@@ -127,12 +119,6 @@
|
|
|
127
119
|
transparent 0
|
|
128
120
|
),
|
|
129
121
|
var(--_sonic-unlit);
|
|
130
|
-
mask: linear-gradient(
|
|
131
|
-
to top,
|
|
132
|
-
#000 calc(var(--_sonic-xy-cut-y) + 0.29 * var(--_sonic-xy-puck)),
|
|
133
|
-
transparent 0 calc(var(--_sonic-xy-cut-y) + 0.71 * var(--_sonic-xy-puck)),
|
|
134
|
-
#000 0
|
|
135
|
-
);
|
|
136
122
|
}
|
|
137
123
|
}
|
|
138
124
|
|
|
@@ -150,7 +136,7 @@
|
|
|
150
136
|
}
|
|
151
137
|
|
|
152
138
|
.sonic-xy-puck {
|
|
153
|
-
--_sonic-xy-puck-fill: var(--_sonic-xy-
|
|
139
|
+
--_sonic-xy-puck-fill: var(--_sonic-xy-puck-core);
|
|
154
140
|
--_sonic-xy-puck-edge: var(--_sonic-xy-puck-fill);
|
|
155
141
|
--_sonic-xy-puck-lift: color-mix(in oklab, var(--_sonic-xy-lit) 85%, #fff);
|
|
156
142
|
--_sonic-xy-puck-glow: transparent;
|
|
@@ -190,8 +176,6 @@
|
|
|
190
176
|
}
|
|
191
177
|
|
|
192
178
|
:state(dragging) > .sonic-xy > .sonic-xy-puck {
|
|
193
|
-
--_sonic-xy-puck-fill: transparent;
|
|
194
|
-
--_sonic-xy-puck-edge: var(--_sonic-xy-lit);
|
|
195
179
|
--_sonic-xy-puck-glow: color-mix(
|
|
196
180
|
in oklab,
|
|
197
181
|
var(--_sonic-xy-lit) calc(30% * var(--_sonic-relief)),
|
|
@@ -231,6 +215,7 @@
|
|
|
231
215
|
|
|
232
216
|
:state(dragging) > .sonic-xy > .sonic-xy-puck {
|
|
233
217
|
--_sonic-xy-puck-fill: Canvas;
|
|
218
|
+
--_sonic-xy-puck-edge: var(--_sonic-xy-lit);
|
|
234
219
|
}
|
|
235
220
|
|
|
236
221
|
.sonic-xy-axis {
|