Nightcity UI Controls — checkbox, toggle and slider
===================================================

Eight neon night interface controls: checkbox, radio, toggle and slider, each
with on and off states drawn as different shapes. SVG plus transparent PNG.

Controls at 26px with square geometry throughout — there is no curve anywhere
in this style, so the round helper draws a chamfered square. The checked state
fills with the accent rather than brightening the trace, because a brighter
trace reads as focus, not as on.

The set covers the four controls a settings screen actually needs: a checkbox,
a radio button, a toggle switch and a slider with a separate knob. Each
stateful control ships both states as its own file, at a 26×26 base — the
toggle is 52×26 and the slider track is 208 px wide so it can be nine-sliced
to any length.

On and off are drawn as different shapes, not different colours. An unchecked
box is an empty recess; a checked one is a filled surface with a tick cut into
it. That matters because a settings screen is exactly where a player is most
likely to be running a colourblind mode, a greyscale shader, or a heavily
tinted post-process — and a state you can only read by hue disappears under
all three.

The slider ships as a track and a knob rather than a single sprite. Animating
a one-piece slider means redrawing it per value; with two pieces you stretch
the fill and move the knob, which is what every UI toolkit already expects.
The knob carries a centre notch so its rotation and position stay readable at
small sizes.

Everything is included as editable SVG and as flat transparent PNG at 1x, 2x
and 4x, drawn from the same six midnight blue tones as the rest of the
Nightcity family.

HOW TO USE

  - Swap the whole texture between the on and off files rather than tinting
    one sprite; the two states differ in shape, so a tint alone will not
    reproduce them.
  - The slider track is nine-sliceable with a 9 px cap on each end — stretch
    the middle and the rounded ends stay intact at any width.
  - In Unity, wire the two files to the Toggle component's Background and
    Checkmark graphics, or swap the sprite in an onValueChanged handler for a
    single-image setup.
  - Keep the knob centred on the fill edge: its width is 22 px, so offset it
    by half that from the fill's right edge to make the handle sit on the
    value rather than after it.

License: CC-BY-4.0 — see LICENSE.txt
Page: https://www.colorosse.com/assets/2d/ui/nightcity-ui-controls
More free assets: https://www.colorosse.com
