pub const WINDOWS: &str = "/*\n * lumen-skin-windows - Windows 11 / WinUI 3 (Fluent 2) skin.\n *\n * Activated via `<root skin=\"windows\">` (or `[skin] name = \"windows\"` /\n * `\"auto\"` on Windows in lumen.toml). Light-first with a full dark\n * override. Color values come from the MIT WinUI theme XAML\n * (#AARRGGBB -> Lumen #RRGGBBAA); metrics from the WinUI control\n * templates.\n *\n * Signatures reproduced: universal 4px radii (8px overlays), the\n * elevation border (1px stroke whose BOTTOM edge is darker - real\n * per-side border-bottom-color, no inset-shadow hack), accent-filled\n * primary buttons stepping 100 -> 90 -> 80 % opacity, the TextBox strong\n * bottom hairline at rest and the 2px accent UNDERLINE on focus\n * (state-routed inset box-shadow), pressed text dropping to secondary,\n * keyboard-only double focus ring (:focus-visible outer ring +\n * contrast inner ring via box-shadow spread), 40x20 pill switch shared\n * by both `<toggle>` and the dedicated `<switch>` element, and\n * non-accent selected tabs with top-only 4px rounding.\n *\n * Known approximations: Mica/acrylic materials use their documented\n * solid fallbacks; the switch knob is a single color (WinUI\'s off-knob\n * hover-grow animation is runtime geometry Lumen doesn\'t expose); the\n * slider thumb is a flat accent dot (spec: white ring + accent core);\n * control-state motion uses the 83ms \"fast\" ramp for fills.\n */\n\n:root {\n --lumen-accent: #0067c0;\n --lumen-accent-hover: #0067c0e6;\n --lumen-accent-active: #0067c0cc;\n --lumen-on-accent: #ffffff;\n\n --lumen-window-bg: #f3f3f3;\n --lumen-surface: #ffffffb3;\n --lumen-surface-hover: #f9f9f980;\n --lumen-surface-active: #f9f9f94d;\n --lumen-input-bg: #ffffffb3;\n --lumen-input-bg-focus: #ffffff;\n\n --lumen-panel: #f9f9f9;\n --lumen-panel-hover: #00000009;\n\n --lumen-border: #0000000f;\n --lumen-border-subtle: #0000000f;\n --lumen-border-strong: #00000072;\n --lumen-elevation-edge: #00000029;\n --lumen-accent-elevation-edge: #00000066;\n\n --lumen-text: #000000e4;\n --lumen-text-muted: #0000009e;\n --lumen-text-disabled: #0000005c;\n --lumen-disabled-bg: #f9f9f94d;\n\n --lumen-track: #00000072;\n --lumen-track-hover: #00000072;\n --lumen-track-active: #00000072;\n --lumen-track-off: #00000006;\n --lumen-knob: #5d5d5d;\n --lumen-tab-selected: #f9f9f9;\n\n --lumen-focus-ring: #000000e4;\n --lumen-focus-ring-inner: #ffffffb3;\n --lumen-focus-ring-width: 2;\n\n --lumen-radius-sm: 3;\n --lumen-radius: 4;\n --lumen-radius-lg: 8;\n --lumen-shadow-panel: 0 8 16 #00000024;\n --lumen-shadow-dialog: 0 32 64 #00000030;\n --lumen-backdrop: #0000004d;\n --lumen-scrollbar-thumb: #00000072;\n /* Tooltip dwell (ms) / cursor gap (px) - Windows hover time. */\n --lumen-tooltip-delay: 400;\n --lumen-tooltip-offset: 14;\n\n /* Indeterminate <progress> sweep period (ms) and moving-chunk width\n as a fraction of the track. */\n --lumen-progress-period: 1200;\n --lumen-progress-chunk: 0.3;\n\n /* ToggleSwitch / <switch> knob inset (px) and the slider thumb\n diameter (px) - the shared cross-platform values. */\n --lumen-knob-inset: 4;\n --lumen-thumb-size: 16;\n\n /* Gap (px) between a ComboBox / MenuFlyout trigger and its panel. */\n --lumen-popup-gap: 4;\n\n /* Opacity for a disabled control with no `:disabled { bg }` of its\n own (ComboBox items, menu items, TabView headers, form controls). */\n --lumen-disabled-opacity: 0.5;\n\n /* Text-input caret. */\n --lumen-caret-width: 2;\n --lumen-caret-blink: 530ms;\n\n /* Line-height multiplier. */\n --lumen-line-height: 1.2;\n\n /* Overlay scrollbar geometry / hover feedback / fade timing. */\n --lumen-scrollbar-thickness: 8;\n --lumen-scrollbar-thickness-thin: 4;\n --lumen-scrollbar-margin: 2;\n --lumen-scrollbar-min-thumb: 24;\n --lumen-scrollbar-track-hover: #80808029;\n --lumen-scrollbar-hover-boost: 1.6;\n --lumen-scrollbar-fade-delay: 1000ms;\n --lumen-scrollbar-fade-duration: 250ms;\n\n}\n\n@media (prefers-color-scheme: dark) {\n :root {\n --lumen-accent: #4cc2ff;\n --lumen-accent-hover: #4cc2ffe6;\n --lumen-accent-active: #4cc2ffcc;\n --lumen-on-accent: #000000;\n\n --lumen-window-bg: #202020;\n --lumen-surface: #ffffff0f;\n --lumen-surface-hover: #ffffff15;\n --lumen-surface-active: #ffffff08;\n --lumen-input-bg: #ffffff0f;\n --lumen-input-bg-focus: #1e1e1eb3;\n\n --lumen-panel: #2c2c2c;\n --lumen-panel-hover: #ffffff0f;\n\n --lumen-border: #00000033;\n --lumen-border-subtle: #ffffff12;\n --lumen-border-strong: #ffffff8b;\n --lumen-elevation-edge: #ffffff12;\n --lumen-accent-elevation-edge: #00000038;\n\n --lumen-text: #ffffff;\n --lumen-text-muted: #ffffffc5;\n --lumen-text-disabled: #ffffff5d;\n --lumen-disabled-bg: #ffffff0b;\n\n --lumen-track: #ffffff8b;\n --lumen-track-hover: #ffffff8b;\n --lumen-track-active: #ffffff8b;\n --lumen-track-off: #00000019;\n --lumen-knob: #cccccc;\n --lumen-tab-selected: #282828;\n\n --lumen-focus-ring: #ffffff;\n --lumen-focus-ring-inner: #000000b3;\n\n --lumen-shadow-panel: 0 8 16 #00000059;\n --lumen-shadow-dialog: 0 32 64 #00000061;\n --lumen-backdrop: #0000004d;\n --lumen-scrollbar-thumb: #ffffff8b;\n }\n}\n\n/* === Base ===\n * Segoe UI Variable Text 14px is the Fluent body/control ramp entry.\n */\nroot {\n bg: var(--lumen-window-bg);\n text-color: var(--lumen-text);\n font-family: \"Segoe UI Variable Text\", \"Segoe UI\", sans-serif;\n font-size: 14;\n line-height: var(--lumen-line-height);\n}\n\n/* === Buttons ===\n * 32px, 4px radius, elevation border (darker bottom edge). Neutral\n * fills step Default -> Secondary -> Tertiary; pressed also drops the\n * text to secondary. 83ms fast fill ramp [MS motion].\n */\nbutton {\n bg: var(--lumen-surface);\n radius: var(--lumen-radius);\n padding: 6 11;\n min-height: 32;\n text-color: var(--lumen-text);\n border: 1px solid var(--lumen-border-subtle);\n border-bottom-color: var(--lumen-elevation-edge);\n transition: bg 83ms linear;\n}\nbutton:hover { bg: var(--lumen-surface-hover); }\nbutton:active { bg: var(--lumen-surface-active); text-color: var(--lumen-text-muted); }\nbutton:focus-visible {\n outline: 2 var(--lumen-focus-ring);\n outline-offset: 1;\n box-shadow: 0 0 0 1 var(--lumen-focus-ring-inner);\n}\nbutton:disabled { bg: var(--lumen-disabled-bg); text-color: var(--lumen-text-disabled); }\n\n/* Accent (primary) button: fill steps 100 -> 90 -> 80 % opacity. */\nbutton.primary {\n bg: var(--lumen-accent);\n text-color: var(--lumen-on-accent);\n border: 1px solid var(--lumen-accent);\n border-bottom-color: var(--lumen-accent-elevation-edge);\n}\nbutton.primary:hover { bg: var(--lumen-accent-hover); }\nbutton.primary:active { bg: var(--lumen-accent-active); }\nbutton.primary:disabled { bg: var(--lumen-disabled-bg); text-color: var(--lumen-text-disabled); }\n\n/* === Text fields ===\n * Strong bottom hairline at rest; on focus the field brightens and a\n * 2px accent underline paints inside the bottom edge (state-routed\n * inset box-shadow - the WinUI TextBox signature).\n */\ninput,\ntextarea {\n bg: var(--lumen-input-bg);\n radius: var(--lumen-radius);\n padding: 6 10;\n min-height: 32;\n min-width: 64;\n text-color: var(--lumen-text);\n border: 1px solid var(--lumen-border-subtle);\n border-bottom-color: var(--lumen-border-strong);\n transition: bg 83ms linear;\n caret-width: var(--lumen-caret-width);\n caret-blink: var(--lumen-caret-blink);\n}\ninput:hover, textarea:hover { bg: var(--lumen-surface-hover); }\ninput:focus, textarea:focus {\n bg: var(--lumen-input-bg-focus);\n box-shadow: inset 0 -2 0 var(--lumen-accent);\n}\ninput:disabled, textarea:disabled { bg: var(--lumen-disabled-bg); text-color: var(--lumen-text-disabled); }\n\n/* === ToggleSwitch ===\n * 40x20 pill; off = transparent-ish fill + strong stroke, on = accent.\n */\ntoggle {\n width: 40;\n height: 20;\n min-width: 40;\n radius: 10;\n bg: var(--lumen-track-off);\n border: 1px solid var(--lumen-border-strong);\n knob-color: var(--lumen-knob);\n knob-inset: var(--lumen-knob-inset);\n}\ntoggle:hover { bg: var(--lumen-track-off); }\ntoggle:checked { bg: var(--lumen-accent); }\ntoggle:focus-visible {\n outline: 2 var(--lumen-focus-ring);\n outline-offset: 1;\n box-shadow: 0 0 0 1 var(--lumen-focus-ring-inner);\n}\ntoggle:disabled { bg: var(--lumen-disabled-bg); }\n\n/* === Switch ===\n * `<switch>` is a distinct element from `<toggle>`, but WinUI has one\n * ToggleSwitch look, so it shares the same 40x20 pill, stroke and\n * colors. `transition` sets the duration/easing the thumb-slide\n * animation reuses (same TransitionSpecs lookup the 83ms fill ramps\n * elsewhere read); WinUI\'s own switch doesn\'t tween its track fill,\n * so this declaration exists for the slide, not a visible bg tween.\n */\nswitch {\n width: 40;\n height: 20;\n min-width: 40;\n radius: 10;\n bg: var(--lumen-track-off);\n border: 1px solid var(--lumen-border-strong);\n knob-color: var(--lumen-knob);\n knob-inset: var(--lumen-knob-inset);\n transition: bg 140ms ease-out;\n}\nswitch:hover { bg: var(--lumen-track-off); }\nswitch:checked { bg: var(--lumen-accent); }\nswitch:focus-visible {\n outline: 2 var(--lumen-focus-ring);\n outline-offset: 1;\n box-shadow: 0 0 0 1 var(--lumen-focus-ring-inner);\n}\nswitch:disabled { bg: var(--lumen-disabled-bg); }\n\n/* === Slider ===\n * 4px rail; accent thumb (approximation of the ringed thumb).\n */\nslider {\n height: 4;\n min-width: 160;\n radius: 2;\n bg: var(--lumen-track);\n knob-color: var(--lumen-accent);\n thumb-size: var(--lumen-thumb-size);\n}\nslider:hover { bg: var(--lumen-track-hover); }\nslider:focus-visible {\n outline: 2 var(--lumen-focus-ring);\n outline-offset: 1;\n box-shadow: 0 0 0 1 var(--lumen-focus-ring-inner);\n}\nslider:disabled { bg: var(--lumen-disabled-bg); }\n\n/* === Generic tiles === */\ntile:hover { bg: var(--lumen-panel-hover); }\ntile:focus-visible { outline: 2 var(--lumen-focus-ring); outline-offset: 1; }\ntile:disabled { bg: var(--lumen-disabled-bg); }\n\n/* === ComboBox (dropdown) === */\n.dropdown-button {\n bg: var(--lumen-surface);\n radius: var(--lumen-radius);\n padding: 6 12;\n min-height: 32;\n min-width: 64;\n text-color: var(--lumen-text);\n border: 1px solid var(--lumen-border-subtle);\n border-bottom-color: var(--lumen-elevation-edge);\n transition: bg 83ms linear;\n text-overflow: ellipsis;\n}\n.dropdown-button:hover { bg: var(--lumen-surface-hover); }\n.dropdown-button:active { bg: var(--lumen-surface-active); }\n.dropdown-button:focus-visible { outline: 2 var(--lumen-focus-ring); outline-offset: 1; }\n\n.dropdown-panel {\n transition: opacity 167ms ease;\n bg: var(--lumen-panel);\n radius: var(--lumen-radius-lg);\n shadow: var(--lumen-shadow-panel);\n border: 1px solid var(--lumen-border);\n padding: 4 2;\n popup-gap: var(--lumen-popup-gap);\n}\n.dropdown-option { bg: var(--lumen-panel); text-color: var(--lumen-text); text-align: start; radius: var(--lumen-radius-sm); padding: 6 11; transition: bg 83ms linear; text-overflow: ellipsis; disabled-opacity: var(--lumen-disabled-opacity); }\n.dropdown-option:hover { bg: var(--lumen-panel-hover); }\n.dropdown-option:focus { outline: 2 var(--lumen-focus-ring); }\n\n/* === MenuFlyout === */\n.menu-panel {\n transition: opacity 167ms ease;\n bg: var(--lumen-panel);\n radius: var(--lumen-radius-lg);\n shadow: var(--lumen-shadow-panel);\n border: 1px solid var(--lumen-border);\n padding: 4 2;\n popup-gap: var(--lumen-popup-gap);\n}\n.menu-item { bg: var(--lumen-panel); text-color: var(--lumen-text); text-align: start; radius: var(--lumen-radius); min-height: 32; padding: 6 11; transition: bg 83ms linear; disabled-opacity: var(--lumen-disabled-opacity); }\n.menu-item:hover { bg: var(--lumen-panel-hover); }\n.menu-item:focus { outline: 2 var(--lumen-focus-ring); }\n.menu-separator { bg: var(--lumen-border-subtle); height: 1; margin: 4 0; }\n\n/* === ContentDialog ===\n * Smoke scrim #0000004D; 8px surface with the documented dialog stroke.\n */\ndialog { bg: var(--lumen-backdrop); transition: opacity 167ms ease; }\n.dialog-surface {\n bg: var(--lumen-panel);\n radius: var(--lumen-radius-lg);\n shadow: var(--lumen-shadow-dialog);\n border: 1px solid #75757566;\n padding: 24;\n min-width: 320;\n}\n\n/* === Cards === */\n.card {\n bg: var(--lumen-surface);\n radius: var(--lumen-radius);\n border: 1px solid var(--lumen-border-subtle);\n padding: 16;\n}\n\n/* === TabView ===\n * Selected tab = solid content-layer fill (NOT accent) with top-only\n * 4px rounding; headers use the 12px caption size on secondary text.\n */\n.tab-strip { bg: #00000000; padding: 0; gap: 0; }\n.tab-btn {\n bg: #00000000;\n radius: 4 4 0 0;\n padding: 8 12;\n min-height: 32;\n text-color: var(--lumen-text-muted);\n font-size: 12;\n transition: bg 83ms linear;\n text-overflow: ellipsis;\n disabled-opacity: var(--lumen-disabled-opacity);\n}\n.tab-btn:hover { bg: var(--lumen-panel-hover); }\n.tab-btn:selected { bg: var(--lumen-tab-selected); }\n.tab-btn:focus-visible { outline: 2 var(--lumen-focus-ring); }\n\n/* === Tooltip === */\n.tooltip {\n bg: var(--lumen-panel);\n text-color: var(--lumen-text);\n radius: var(--lumen-radius);\n shadow: var(--lumen-shadow-panel);\n border: 1px solid var(--lumen-border);\n padding: 6 10;\n font-size: 12;\n}\n\n/* === Scroll regions === */\nscroll {\n scrollbar-color: var(--lumen-scrollbar-thumb);\n scrollbar-width: thin;\n scrollbar-thickness: var(--lumen-scrollbar-thickness);\n scrollbar-thickness-thin: var(--lumen-scrollbar-thickness-thin);\n scrollbar-margin: var(--lumen-scrollbar-margin);\n scrollbar-min-thumb: var(--lumen-scrollbar-min-thumb);\n scrollbar-track-hover: var(--lumen-scrollbar-track-hover);\n scrollbar-hover-boost: var(--lumen-scrollbar-hover-boost);\n scrollbar-fade-delay: var(--lumen-scrollbar-fade-delay);\n scrollbar-fade-duration: var(--lumen-scrollbar-fade-duration);\n}\nscroll:focus { outline: 2 var(--lumen-focus-ring); }\n\n/* === Checkbox / Radio / Progress (W5 form controls) === */\ncheckbox { disabled-opacity: var(--lumen-disabled-opacity); }\ncheckbox:checked { bg: var(--lumen-accent); }\ncheckbox:focus-visible { outline: 2 var(--lumen-focus-ring); }\n.checkbox-box { width: 18; height: 18; radius: 4; bg: var(--lumen-track-off); border: 1px solid var(--lumen-track); text-color: #ffffff; font-size: 14; text-align: center; }\n.checkbox-label { text-color: var(--lumen-text); }\nradio { disabled-opacity: var(--lumen-disabled-opacity); }\nradio:selected { bg: var(--lumen-accent); }\nradio:focus-visible { outline: 2 var(--lumen-focus-ring); }\n.radio-dot { width: 18; height: 18; radius: 9; bg: var(--lumen-track-off); border: 1px solid var(--lumen-track); }\n.radio-label { text-color: var(--lumen-text); }\nprogress { bg: var(--lumen-track-off); radius: 3; height: 4; progress-duration: var(--lumen-progress-period); progress-chunk: var(--lumen-progress-chunk); }\n.progress-fill { bg: var(--lumen-accent); radius: 3; }\n\n/* Dialog default button (Enter-anywhere target): accent ring. */\nbutton.default { border: 2px solid var(--lumen-accent); }\n";Expand description
Windows 11 / WinUI 3 (Fluent 2) skin: 4px radii, accent primary buttons, elevation bottom edge, keyboard-only focus ring.