{% load wise_icons i18n %} {% comment %} Live design-token settings drawer, two tabs: - Settings: four controls - theme (light / dark), accent color, rounding and card shadow. Each calls one of the wiseSet*() helpers in common.js, which writes one `data-*` attribute on and persists it to localStorage - see the axis list at the top of tokens.css. The page background, density and type are deliberately not settings. The button for the current choice is marked aria-pressed (common.js keeps that in sync via the data-wise-pref / data-wise-value attributes). - Copy tokens: read-only. wiseRefreshTokenExport() (common.js) reads back the resolved value of a curated set of custom properties plus whichever `data-*` attributes are currently set, so the *exact* combination chosen on the Settings tab can be copied out - as the attribute line to reproduce it at runtime, or the resolved values to bake it in permanently. Nothing here talks to the server: the whole panel works with zero backend support, which is what makes it safe to ship in every project that pulls in wise_core (open it with wiseOpenDrawer('wise-settings-drawer'), normally via _settings_toggle.html). The tab switch itself is plain JS rather than the one-URL-per-tab pattern the Tab Group doc page recommends for real pages - this is a floating, ephemeral panel, not page content, so there's no URL to give it. Include this once per page - wise_core/base.html's default `modal` block already does, so most pages get it for free. Override that block (or this one) to opt out. {% endcomment %}