|
|
|
@ -50,11 +50,8 @@ import { computed } from 'vue'
|
|
|
|
* The track is a recessed channel and the knob sits proud of it, lit from the top left; state is
|
|
|
|
* The track is a recessed channel and the knob sits proud of it, lit from the top left; state is
|
|
|
|
* read from where the knob sits plus the status tone -- a tick when on, a cross when off.
|
|
|
|
* read from where the knob sits plus the status tone -- a tick when on, a cross when off.
|
|
|
|
*
|
|
|
|
*
|
|
|
|
* WHICH part wears that tone depends on the theme, and it is the one thing about this control that
|
|
|
|
* The pin itself wears that tone, with a white mark on it, in both themes -- which is what gives the
|
|
|
|
* is not just a change of value between the two. On a dark surface the pin itself is the coloured
|
|
|
|
* switch something bright to read at a glance.
|
|
|
|
* element, with a white mark on it, which is what gives the switch something bright to read at a
|
|
|
|
|
|
|
|
* glance. On a light one the pin stays near-white and the MARK carries the colour, because a
|
|
|
|
|
|
|
|
* saturated pin on a pale page shouts far louder than the same pin does against a dark one.
|
|
|
|
|
|
|
|
*
|
|
|
|
*
|
|
|
|
* A disabled switch drops both its relief and its status colour: no glow, a neutral pin, a grey
|
|
|
|
* A disabled switch drops both its relief and its status colour: no glow, a neutral pin, a grey
|
|
|
|
* mark, and a flat track. Dimming alone read as "slightly faded" rather than "not available", and a
|
|
|
|
* mark, and a flat track. Dimming alone read as "slightly faded" rather than "not available", and a
|
|
|
|
@ -154,29 +151,32 @@ function toggle() {
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
.w-toggle {
|
|
|
|
.w-toggle {
|
|
|
|
/*
|
|
|
|
/*
|
|
|
|
The status tone, in one place: the glow always takes it, and each theme points either the pin or
|
|
|
|
The status tone, in one place: the glow and the pin both take it. It lives on the button rather
|
|
|
|
the mark at it further down. It lives on the button rather than on the three elements that draw
|
|
|
|
than on the elements that draw it, so they cannot disagree about which state they are showing.
|
|
|
|
it, so they cannot disagree about which state they are showing.
|
|
|
|
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
--w-toggle-status: var(--color-negative);
|
|
|
|
--w-toggle-status: var(--color-negative);
|
|
|
|
--w-toggle-track: #dfe3ea;
|
|
|
|
--w-toggle-track: #dfe3ea;
|
|
|
|
--w-toggle-rim: #ffffff;
|
|
|
|
--w-toggle-rim: #ffffff;
|
|
|
|
--w-toggle-knob: #fdfdfe;
|
|
|
|
--w-toggle-knob: var(--w-toggle-status);
|
|
|
|
--w-toggle-knob-rim: rgb(0 0 0 / 0.06);
|
|
|
|
--w-toggle-knob-rim: rgb(0 0 0 / 0.06);
|
|
|
|
|
|
|
|
/* A white ring inside the pin's edge, setting the saturated tone off from the track */
|
|
|
|
|
|
|
|
--w-toggle-knob-border: rgb(255 255 255 / 0.5);
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
|
|
The pin's up-left shadow is dark here too: a white one sits against the track's white rim and
|
|
|
|
|
|
|
|
gives the pin no edge on that side. Lighter than the down-right one, so the light still reads as
|
|
|
|
|
|
|
|
coming from the top left.
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
--w-toggle-knob-highlight: rgb(0 0 0 / 0.06);
|
|
|
|
--w-toggle-shadow: rgb(0 0 0 / 0.18);
|
|
|
|
--w-toggle-shadow: rgb(0 0 0 / 0.18);
|
|
|
|
--w-toggle-highlight: rgb(255 255 255 / 0.95);
|
|
|
|
--w-toggle-highlight: rgb(255 255 255 / 0.95);
|
|
|
|
--w-toggle-cast: rgb(0 0 0 / 0.12);
|
|
|
|
--w-toggle-cast: rgb(0 0 0 / 0.12);
|
|
|
|
--w-toggle-glow: 0.62;
|
|
|
|
--w-toggle-glow: 0.62;
|
|
|
|
--w-toggle-mark: var(--w-toggle-status);
|
|
|
|
--w-toggle-mark: #ffffff;
|
|
|
|
--w-toggle-mark-disabled: #8a8f98;
|
|
|
|
--w-toggle-mark-disabled: #8a8f98;
|
|
|
|
/*
|
|
|
|
/* White on the positive tone is a weak pairing, so the mark gets an edge to read against */
|
|
|
|
A pale pin needs no relief under the mark, so the copy is the pin's own tone and draws nothing.
|
|
|
|
--w-toggle-mark-shadow: rgb(0 0 0 / 0.3);
|
|
|
|
Keeping it painted rather than hidden is what makes the dark theme a change of colour and not a
|
|
|
|
/* Shed the status colour when the control cannot be moved */
|
|
|
|
change of markup.
|
|
|
|
--w-toggle-knob-disabled: #fdfdfe;
|
|
|
|
*/
|
|
|
|
|
|
|
|
--w-toggle-mark-shadow: #ffffff;
|
|
|
|
|
|
|
|
/* The pin is neutral here either way, so disabled changes only the mark */
|
|
|
|
|
|
|
|
--w-toggle-knob-disabled: var(--w-toggle-knob);
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.w-toggle[aria-checked='true'] {
|
|
|
|
.w-toggle[aria-checked='true'] {
|
|
|
|
@ -186,18 +186,16 @@ function toggle() {
|
|
|
|
:global(body.body--dark .w-toggle) {
|
|
|
|
:global(body.body--dark .w-toggle) {
|
|
|
|
--w-toggle-track: #262c38;
|
|
|
|
--w-toggle-track: #262c38;
|
|
|
|
--w-toggle-rim: #39414f;
|
|
|
|
--w-toggle-rim: #39414f;
|
|
|
|
--w-toggle-knob: var(--w-toggle-status);
|
|
|
|
|
|
|
|
--w-toggle-knob-rim: rgb(255 255 255 / 0.1);
|
|
|
|
--w-toggle-knob-rim: rgb(255 255 255 / 0.1);
|
|
|
|
|
|
|
|
/* Softer than the light theme's, which stands out more against the dark track */
|
|
|
|
|
|
|
|
--w-toggle-knob-border: rgb(255 255 255 / 0.25);
|
|
|
|
|
|
|
|
--w-toggle-knob-highlight: var(--w-toggle-highlight);
|
|
|
|
--w-toggle-shadow: rgb(0 0 0 / 0.6);
|
|
|
|
--w-toggle-shadow: rgb(0 0 0 / 0.6);
|
|
|
|
--w-toggle-highlight: rgb(255 255 255 / 0.07);
|
|
|
|
--w-toggle-highlight: rgb(255 255 255 / 0.07);
|
|
|
|
--w-toggle-cast: rgb(0 0 0 / 0.45);
|
|
|
|
--w-toggle-cast: rgb(0 0 0 / 0.45);
|
|
|
|
/* Held up a little: the same tone has less to carry against a dark channel than a pale one */
|
|
|
|
/* Held up a little: the same tone has less to carry against a dark channel than a pale one */
|
|
|
|
--w-toggle-glow: 0.72;
|
|
|
|
--w-toggle-glow: 0.72;
|
|
|
|
--w-toggle-mark: #ffffff;
|
|
|
|
|
|
|
|
--w-toggle-mark-disabled: #aeb4bf;
|
|
|
|
--w-toggle-mark-disabled: #aeb4bf;
|
|
|
|
/* White on the positive tone is a weak pairing, so the mark gets an edge to read against */
|
|
|
|
|
|
|
|
--w-toggle-mark-shadow: rgb(0 0 0 / 0.3);
|
|
|
|
|
|
|
|
/* Shed the status colour when the control cannot be moved; this is the pin's old neutral */
|
|
|
|
|
|
|
|
--w-toggle-knob-disabled: #6b7382;
|
|
|
|
--w-toggle-knob-disabled: #6b7382;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@ -238,16 +236,17 @@ function toggle() {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
/*
|
|
|
|
The transition is declared here rather than with Tailwind's `transition-transform`, because in the
|
|
|
|
The transition is declared here rather than with Tailwind's `transition-transform`, because the
|
|
|
|
dark theme the pin's colour has to travel with its movement. Same duration and easing as the glow,
|
|
|
|
pin's colour has to travel with its movement. Same duration and easing as the glow,
|
|
|
|
which shares the knob's offset class and so must move in step with it.
|
|
|
|
which shares the knob's offset class and so must move in step with it.
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
.w-toggle__knob {
|
|
|
|
.w-toggle__knob {
|
|
|
|
background-color: var(--w-toggle-knob);
|
|
|
|
background-color: var(--w-toggle-knob);
|
|
|
|
box-shadow:
|
|
|
|
box-shadow:
|
|
|
|
|
|
|
|
inset 0 0 0 2px var(--w-toggle-knob-border),
|
|
|
|
0 0 0 1px var(--w-toggle-knob-rim),
|
|
|
|
0 0 0 1px var(--w-toggle-knob-rim),
|
|
|
|
2px 2px 4px var(--w-toggle-shadow),
|
|
|
|
2px 2px 4px var(--w-toggle-shadow),
|
|
|
|
-2px -2px 4px var(--w-toggle-highlight);
|
|
|
|
-2px -2px 4px var(--w-toggle-knob-highlight);
|
|
|
|
transition:
|
|
|
|
transition:
|
|
|
|
translate 0.2s var(--ease-standard),
|
|
|
|
translate 0.2s var(--ease-standard),
|
|
|
|
background-color 0.2s var(--ease-standard);
|
|
|
|
background-color 0.2s var(--ease-standard);
|
|
|
|
@ -272,8 +271,7 @@ function toggle() {
|
|
|
|
The mark's drop shadow. Both copies are positioned, so painting order is document order and the
|
|
|
|
The mark's drop shadow. Both copies are positioned, so painting order is document order and the
|
|
|
|
real mark covers this one -- `z-index: -1` would put it behind the knob's own background instead.
|
|
|
|
real mark covers this one -- `z-index: -1` would put it behind the knob's own background instead.
|
|
|
|
|
|
|
|
|
|
|
|
What it draws is the theme's business, and both answers are in the variable blocks above: a pixel
|
|
|
|
A pixel of dark under the white mark, so it keeps an edge against the coloured pin.
|
|
|
|
of dark under a white mark on a coloured pin, or nothing at all on a pale one.
|
|
|
|
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
.w-toggle__mark-shadow {
|
|
|
|
.w-toggle__mark-shadow {
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
@ -295,7 +293,9 @@ function toggle() {
|
|
|
|
|
|
|
|
|
|
|
|
.w-toggle--disabled .w-toggle__knob {
|
|
|
|
.w-toggle--disabled .w-toggle__knob {
|
|
|
|
background-color: var(--w-toggle-knob-disabled);
|
|
|
|
background-color: var(--w-toggle-knob-disabled);
|
|
|
|
box-shadow: 0 0 0 1px var(--w-toggle-knob-rim);
|
|
|
|
box-shadow:
|
|
|
|
|
|
|
|
inset 0 0 0 2px var(--w-toggle-knob-border),
|
|
|
|
|
|
|
|
0 0 0 1px var(--w-toggle-knob-rim);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.w-toggle--disabled .w-toggle__track {
|
|
|
|
.w-toggle--disabled .w-toggle__track {
|
|
|
|
|
NGPixel
4 days ago