Toggle

1<AppToggle label="Cloud cover" defaultChecked />2<AppToggle label="Now" tone="sodium-airglow" size="sm" />

1/**2 * A switch for a setting that is on or off. It is a real checkbox with the switch role, so it works with the3 * keyboard and screen readers; the track and thumb are drawn in CSS. Pass `checked` and `onChange` to control it, or4 * `defaultChecked` to let it keep its own state.5 */6export function AppToggle({7  label,8  hideLabel,9  tone = "deep-space",10  size,11  checked,12  defaultChecked,13  onChange,14  disabled,15}: {16  label: string;17  /** Keep the label for assistive technology but do not draw it. */18  hideLabel?: boolean;19  tone?: Tone;20  size?: "sm";21  checked?: boolean;22  defaultChecked?: boolean;23  onChange?: (checked: boolean) => void;24  disabled?: boolean;25}) {26  const state = checked === undefined ? { defaultChecked } : { checked };27  return (28    <label className={`app-ui app-toggle${size ? ` is-${size}` : ""}`} style={{ ["--tone" as string]: `var(--color-${TONE_STOP[tone]})` }}>29      <input type="checkbox" role="switch" aria-label={hideLabel ? label : undefined} disabled={disabled} onChange={onChange ? (e) => onChange(e.target.checked) : undefined} {...state} />30      <span className="app-toggle-track" aria-hidden="true">31        <span className="app-toggle-thumb" />32      </span>33      {!hideLabel && <span className="app-label-md">{label}</span>}34    </label>35  );36}

1.app-toggle {2  --tone: var(--color-deep-space-200);3  --track-w: var(--spacing-f55);4  --track-h: var(--spacing-f34);5  --thumb: var(--spacing-f21);6  position: relative;7  display: inline-flex;8  align-items: center;9  gap: var(--spacing-f13);10  cursor: pointer;11}1213.app-toggle.is-sm { --track-w: var(--spacing-f34); --track-h: var(--spacing-f21); --thumb: var(--spacing-f13); }1415.app-toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }1617.app-toggle-track {18  position: relative;19  flex: none;20  width: var(--track-w);21  height: var(--track-h);22  border-radius: var(--radius-full);23  border: var(--spacing-f1) solid var(--hair-strong);24  background: var(--sheen), var(--fill);25  box-shadow: var(--highlight);26  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;27  box-sizing: border-box;28}2930.app-toggle-thumb {31  position: absolute;32  top: 50%;33  left: calc((var(--track-h) - var(--thumb)) / 2 - var(--spacing-f1));34  width: var(--thumb);35  height: var(--thumb);36  border-radius: var(--radius-full);37  background: var(--c-muted);38  transform: translateY(-50%);39  transition: left 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), background 0.3s;40}4142.app-toggle input:checked + .app-toggle-track {43  background: linear-gradient(180deg, color-mix(in srgb, var(--c-text) var(--mag-3), var(--tone)), var(--tone));44  border-color: color-mix(in srgb, var(--c-text) var(--mag-3), var(--tone));45  box-shadow: var(--highlight), 0 var(--spacing-f8) var(--spacing-f21) calc(var(--spacing-f8) * -1) var(--tone);46}4748.app-toggle input:checked + .app-toggle-track .app-toggle-thumb {49  left: calc(var(--track-w) - var(--thumb) - (var(--track-h) - var(--thumb)) / 2 - var(--spacing-f1));50  background: var(--c-ink);51}

1AstrGlassToggle(2value: showClouds,3onChanged: (bool on) => setState(() => showClouds = on),4label: 'Cloud cover',5tone: AstrTone.deepSpace,6)

1/// A switch. The track is a golden rectangle, 55 by 34, with a 21 thumb; when2/// [compact] it steps down the Fibonacci ladder to 34 by 21 and a 13 thumb.3/// On, the track fills with the tone and the thumb turns dark.4class AstrGlassToggle extends StatefulWidget {5  const AstrGlassToggle({6    super.key,7    required this.value,8    required this.onChanged,9    required this.label,10    this.tone = AstrTone.deepSpace,11    this.compact = false,12  });1314  final bool value;1516  /// Null disables the switch.17  final ValueChanged<bool>? onChanged;1819  /// Accessible name, read by screen readers.20  final String label;21  final AstrTone tone;22  final bool compact;2324  @override25  State<AstrGlassToggle> createState() => _AstrGlassToggleState();26}