fix(web): линия тональной кривой была не видна
Цвета каналов задавались CSS-переменными темы прямо в SVG-атрибутах stroke и fill, но presentation-атрибуты не понимают var(), а переменные темы хранят компоненты HSL, а не готовый цвет. В итоге обводка была пустой, и на тёмном фоне графика кривую не было видно. Теперь цвет канала идёт через style в формате hsl(var(--text)), а заливка точек — hsl(var(--bg)).
This commit is contained in:
@@ -351,16 +351,20 @@
|
|||||||
<line x1={step} y1="0" x2={step} y2="100" class="stroke-border" stroke-width="0.4" />
|
<line x1={step} y1="0" x2={step} y2="100" class="stroke-border" stroke-width="0.4" />
|
||||||
<line x1="0" y1={step} x2="100" y2={step} class="stroke-border" stroke-width="0.4" />
|
<line x1="0" y1={step} x2="100" y2={step} class="stroke-border" stroke-width="0.4" />
|
||||||
{/each}
|
{/each}
|
||||||
<path d={curvePath(channel)} fill="none" stroke={CHANNEL_COLORS[channel]} stroke-width="1.2" />
|
<path
|
||||||
|
d={curvePath(channel)}
|
||||||
|
fill="none"
|
||||||
|
stroke-width="1.4"
|
||||||
|
style="stroke: {CHANNEL_COLORS[channel]}"
|
||||||
|
/>
|
||||||
{#each channelPoints(channel) as point, index (index)}
|
{#each channelPoints(channel) as point, index (index)}
|
||||||
<circle
|
<circle
|
||||||
cx={point.x * 100}
|
cx={point.x * 100}
|
||||||
cy={(1 - point.y) * 100}
|
cy={(1 - point.y) * 100}
|
||||||
r="2.4"
|
r="2.4"
|
||||||
class="cursor-grab"
|
class="cursor-grab"
|
||||||
fill="var(--bg)"
|
stroke-width="1.2"
|
||||||
stroke={CHANNEL_COLORS[channel]}
|
style="fill: hsl(var(--bg)); stroke: {CHANNEL_COLORS[channel]}"
|
||||||
stroke-width="1"
|
|
||||||
role="slider"
|
role="slider"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
aria-label="Точка кривой {index + 1}"
|
aria-label="Точка кривой {index + 1}"
|
||||||
|
|||||||
@@ -45,7 +45,8 @@ export const CHANNEL_LABELS: Record<CurveChannel, string> = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const CHANNEL_COLORS: Record<CurveChannel, string> = {
|
export const CHANNEL_COLORS: Record<CurveChannel, string> = {
|
||||||
rgb: 'var(--text)',
|
// --text в теме хранит компоненты HSL, поэтому цвет собирается через hsl().
|
||||||
|
rgb: 'hsl(var(--text))',
|
||||||
red: '#ef4444',
|
red: '#ef4444',
|
||||||
green: '#22c55e',
|
green: '#22c55e',
|
||||||
blue: '#3b82f6'
|
blue: '#3b82f6'
|
||||||
|
|||||||
Reference in New Issue
Block a user