/* * Design tokens — Windows 2000 Professional, "Windows Standard" scheme, 96 dpi metric set. * The only place raw design values live (PROMPT.md §7). Provenance: SPEC.md §2 (colors §2.1, gradient §2.2, * metrics §2.3, edges §2.4, focus/disabled/dither §2.5) and §3 (typography). * Schemes (css/schemes/*.css) override --sys-* only; metric sets (css/metrics/*.css) override --metric-* / --font-*. * Themes (css/themes/*.css, — js/theme.js) override any token; win2k is this file. */ @font-face { font-family: "W2K Tahoma"; font-weight: 400; src: url("../assets/fonts/w2k-tahoma-11.woff2") format("woff2"); } @font-face { font-family: "W2K Tahoma"; font-weight: 700; src: url("../assets/fonts/w2k-tahoma-bold-11.woff2") format("woff2"); } @font-face { font-family: "W2K MS Sans Serif"; font-weight: 400; src: url("../assets/fonts/w2k-ms-sans-serif-11.woff2") format("woff2"); } /* Password masks: U+2022 drawn as the font's '*' (Windows 2000 masks with '*') — tools/build-password-font.py */ @font-face { font-family: "W2K Password Tahoma"; src: url("../assets/fonts/w2k-password-tahoma-11.woff2") format("woff2"); } @font-face { font-family: "W2K Password MSS"; src: url("../assets/fonts/w2k-password-mss-11.woff2") format("woff2"); } @font-face { font-family: "W2K Lucida Console 13"; font-weight: 400; src: url("../assets/fonts/w2k-lucida-console-13.woff2") format("woff2"); } @font-face { font-family: "W2K Tahoma Bold 17"; font-weight: 700; src: url("../assets/fonts/w2k-tahoma-bold-17.woff2") format("woff2"); } @font-face { font-family: "W2K Arial 13"; font-weight: 400; src: url("../assets/fonts/w2k-arial-13.woff2") format("woff2"); } @font-face { font-family: "W2K Verdana Bold 16"; font-weight: 700; src: url("../assets/fonts/w2k-verdana-bold-16.woff2") format("woff2"); } @font-face { font-family: "W2K Marlett 6"; src: url("../assets/fonts/w2k-marlett-6.woff2") format("woff2"); } @font-face { font-family: "W2K Marlett 10"; src: url("../assets/fonts/w2k-marlett-10.woff2") format("woff2"); } @font-face { font-family: "W2K Marlett 12"; src: url("../assets/fonts/w2k-marlett-12.woff2") format("woff2"); } @font-face { font-family: "W2K Marlett 13"; src: url("../assets/fonts/w2k-marlett-13.woff2") format("woff2"); } @font-face { font-family: "W2K Marlett 14"; src: url("../assets/fonts/w2k-marlett-14.woff2") format("woff2"); } :root { /* ── System colors (GetSysColor), Windows Standard — SPEC.md §2.1 ───────────────────────────── */ --sys-scrollbar: #D4D0C8; --sys-background: #3A6EA5; --sys-active-title: #0A246A; --sys-inactive-title: #808080; --sys-gradient-active-title: #A6CAF0; --sys-gradient-inactive-title: #C0C0C0; --sys-menu: #D4D0C8; --sys-window: #FFFFFF; --sys-window-frame: #000000; --sys-menu-text: #000000; --sys-window-text: #000000; --sys-title-text: #FFFFFF; --sys-active-border: #D4D0C8; --sys-inactive-border: #D4D0C8; --sys-app-workspace: #808080; --sys-hilight: #0A246A; --sys-hilight-text: #FFFFFF; --sys-btn-face: #D4D0C8; --sys-btn-shadow: #808080; --sys-gray-text: #808080; --sys-btn-text: #000000; --sys-inactive-title-text: #D4D0C8; --sys-btn-hilight: #FFFFFF; --sys-btn-dk-shadow: #404040; --sys-btn-light: #D4D0C8; --sys-info-text: #000000; --sys-info-window: #FFFFE1; --sys-btn-alternate-face: #B5B5B5; --sys-hot-tracking: #000080; --color-message-text: var(--sys-btn-text); /* Message Box (its font colour) */ /* ── Theme roles (TODO F-5): what a part is painted with, apart from the system colour it maps to. Windows 2000 paints both with ButtonFace (3D Objects); a theme (css/themes/*.css) may set them apart. ──────────────── */ --color-surface: var(--sys-btn-face); /* windows, dialogs, bars, tab pages, splitters — what controls sit on */ --color-control-face: var(--sys-btn-face); /* push-like parts: buttons, caption and scroll bar buttons, headers */ /* Fixed colors that are not system colors */ /* Rarely used items of an expanded personalized menu: lighter than Menu (knowledge — halfway to ButtonHilight). */ --color-menu-rarely-used: color-mix(in srgb, var(--sys-menu), var(--sys-btn-hilight)); --color-monthcal-today: #FF0000; /* the red today circle (knowledge) */ /* --color-row-hilight / --color-row-hilight-text: the active row of a menu, the Start menu, a tree, a list or a drop-down's list (user, 2026-10-11). Not set here: they follow Selected Items (--sys-hilight / -text) wherever those are (Display Properties' preview sets them on its windows); a theme sets them to part the rows from the rest. */ --color-list-selection-unfocused: var(--sys-btn-face); /* LVS_SHOWSELALWAYS without focus (knowledge) */ --color-focus-dot: #000000; /* DrawFocusRect XOR on ButtonFace/Window reads as black — SPEC.md §2.5 */ --color-disabled-text: var(--sys-btn-shadow); /* disabled text and glyphs (DrawState DSS_DISABLED): the shape — SPEC.md §2.5 */ --color-disabled-emboss: var(--sys-btn-hilight); /* … and its copy 1px right and down, under it (a theme may drop it: transparent) */ --color-tooltip-border: #000000; /* SPEC.md §2.3 tooltip */ --color-console-bg: #000000; /* SPEC.md §2.5 */ --color-console-text: #C0C0C0; --color-grid-line: #C0C0C0; --color-input-invalid: #C00000; --color-erp-approved: #000080; /* Business Manager: approved documents in a list (extension) */ --color-erp-overdue: #C00000; /* Business Manager: overdue invoices (extension) */ --color-paper: #FFFFFF; /* print preview: the sheet and its ink (document colours, not the scheme) */ --color-ink: #000000; --color-ink-muted: #505050; --color-print-shade: #E0E0E0; /* text of an entry that failed validation (extension) */ /* worksheet grid lines: Excel's automatic gridline color (knowledge) */ /* ── Typography — SPEC.md §3 ──────────────────────────────────────────────────────────────────── */ --font-size-ui: 11px; /* 8 pt at 96 dpi = 11 ppem */ --line-height-ui: 13px; /* VDMX 11 + 2 */ --font-family-ui: "W2K Tahoma"; /* MS Shell Dlg 2: menus, message boxes, newer dialogs */ --font-family-dialog: "W2K MS Sans Serif"; /* MS Shell Dlg: Control Panel property sheets, Search pane — SPEC.md §3.5 */ --font-ui: 400 var(--font-size-ui) / var(--line-height-ui) var(--font-family-ui); --font-ui-bold: 700 var(--font-size-ui) / var(--line-height-ui) var(--font-family-ui); --font-dialog: 400 var(--font-size-ui) / var(--line-height-ui) var(--font-family-dialog); --font-sample: 400 13px / 16px "W2K Arial 13"; /* the Font dialog's sample: Arial 10 pt (monochrome, as in Windows 2000) */ --font-wordpad: 400 13px / 16px "W2K Arial 13"; /* WordPad's default: Arial 10 pt, 16px lines (measured) */ --font-notepad: 400 13px / 13px "W2K Lucida Console 13"; /* Notepad's default: Lucida Console 10 pt, 13px lines (measured) */ --font-terminal: 400 13px / 13px "W2K Lucida Console 13"; /* stands in for HyperTerminal's raster font (TODO R32) */ --font-wizard-title: 700 16px / 18px "W2K Verdana Bold 16"; /* Wizard 97 exterior title: Verdana Bold 12 pt (setup wizard) */ --font-caption: var(--font-ui-bold); --font-menu: var(--font-ui); --font-status: var(--font-ui); --font-tooltip: var(--font-ui); --font-icon: var(--font-ui); --font-message: var(--font-ui); /* Message Box */ --font-small-caption: var(--font-caption); /* Palette Title: a tool window's caption */ --font-glyph-caption: 10px/10px "W2K Marlett 10"; /* caption-button glyphs at 10 ppem — SPEC.md §3.2 */ --font-glyph-scroll: 12px/12px "W2K Marlett 12"; /* scroll arrows: 12–14 ppem draw the same bitmaps; 12 places all four as measured */ --font-glyph-updown: 6px/6px "W2K Marlett 6"; /* up-down arrows (3×2): 6 and 7 ppem draw them; 6 places both as measured */ --font-glyph-grip: 14px/14px "W2K Marlett 14"; /* size grip o / p at 14 ppem (Notepad) */ --font-glyph-check: 13px/13px "W2K Marlett 13"; /* check mark "a" at 13 ppem = the reference 7×7 mark */ --font-glyph-radio: 12px/12px "W2K Marlett 12"; /* radio layers n j k l m i at 12 ppem = the reference */ --font-glyph-menu-arrow: 12px/12px "W2K Marlett 12"; /* popup submenu arrow (ps7 Edit menu) */ /* ── Metrics, 96 dpi — SPEC.md §2.3 ──────────────────────────────────────────────────────────── */ --metric-dlu-x: 6; /* dialog base units of MS Sans Serif 8 at 96 dpi: x × 6/4, y × 13/8 */ --metric-dlu-y: 13; --metric-window-edge: 2px; /* the frame's outer edge: off the screen in a framed maximized window (TODO X-9qh7) */ --metric-frame-width: 4px; --metric-dialog-frame-width: 3px; /* raised edge + 1px ButtonFace (Display Properties) */ --metric-small-caption-height: 15px; /* tool-window caption — knowledge, QUESTIONS Q5 */ --metric-caption-icon-left: 2px; /* icon 16×16 at caption (2, 1) — Notepad */ --metric-caption-icon-top: 1px; --metric-mdi-icon-left: 1px; /* maximized MDI child icon in the menu bar (knowledge) */ --metric-caption-text-left: 2px; /* title pen 2px after the icon or the caption's left edge */ --metric-caption-text-top: 2px; /* title line-box top below the caption top */ --metric-caption-glyph-left: 3px; /* Marlett 10 ppem: pen x 3, baseline 12 in the 16×14 button */ --metric-caption-glyph-top: 2px; --metric-caption-height: 18px; --metric-caption-line: 1px; --metric-menubar-height: 19px; --metric-caption-button-width: 16px; --metric-caption-button-height: 14px; --metric-caption-button-top: 2px; --metric-caption-button-gap: 2px; /* before the close button and at the right end */ --metric-button-width: 75px; --metric-button-height: 23px; --metric-button-gap: 6px; --metric-button-focus-inset: 4px; --metric-button-label-top: 4px; /* line-box top of the label in a 23px button — SPEC.md §3.6 */ --metric-button-height-field: var(--metric-combo-height); /* .w2k-button--field: level with an edit or combo beside it (extension) */ --metric-button-height-mini: 17px; /* .w2k-button--mini: where a full button does not fit (extension) */ --metric-checkbox-text-offset: 18px; /* text pen from the box's left edge (Mouse › Pointers) */ --metric-checkbox-mark-top: 0px; /* Marlett mark at the box origin: glyph top lands 3px below the box top (measured) */ --metric-radio-text-offset: 17px; /* text pen from the circle's left edge (Mouse: Files and Folders, Motion — Buttons' " Right-handed" has a leading space) */ --metric-radio-top: 1px; /* circle top below the text line-box top */ --metric-groupbox-frame-top: 6px; /* etched frame line below the caption line-box top */ --metric-groupbox-caption-left: 9px; /* caption pen from the frame's left edge */ --metric-groupbox-caption-gap: 2px; /* frame line gap on each side of the caption */ --metric-groupbox-padding: 19px 8px 8px; /* content inset (knowledge; dialogs position children explicitly) */ --metric-updown-width: 16px; /* UDS_ALIGNRIGHT buddy spinner (Date/Time year): 16 wide */ --metric-updown-glyph-left: 5px; /* Marlett 7 ppem pen in each half-button (measured) */ --metric-updown-glyph-top: 2px; /* MessageBox — SPEC.md §4.17 (win2k-pro_dialog_logon-message_error.png; client coordinates) */ --metric-msgbox-icon-left: 11px; --metric-msgbox-top: 11px; /* icon top; text top when the text is taller than the icon */ --metric-msgbox-text-left: 62px; /* text pen after the icon */ --metric-msgbox-noicon-text-left: 12px; /* without an icon (knowledge) */ --metric-msgbox-right: 11px; /* text right → client right */ --metric-msgbox-button-gap: 17px; /* content bottom → buttons */ --metric-msgbox-bottom: 11px; /* buttons → client bottom */ --metric-msgbox-button-margin: 12px; /* minimum side margin of the button row (knowledge) */ --metric-msgbox-text-max: 426px; /* wrap width: the logon text breaks between 415 and 440px (knowledge: 2/3 of 640) */ --metric-progress-height: 18px; /* Setup wizard bar (dialogs size their own) */ --metric-progress-gap: 2px; /* between blocks (knowledge) */ --metric-dtp-time-height: 20px; /* Date/Time time field (its up-down is 18 high) */ --metric-monthcal-pad: 6px; /* knowledge from here */ --metric-monthcal-title-height: 22px; --metric-monthcal-cell-width: 22px; --metric-monthcal-cell-height: 15px; --metric-combo-height: 21px; /* Display › Settings, Run; the Font dialog's Script combo is 20 */ --metric-comboex-height: 22px; /* ComboBoxEx with 16px icons (Open › Look in); also Open's File name */ --metric-comboex-item-height: 18px; /* its list rows: the field's inside (knowledge) */ --metric-combo-visible-items: 8; /* open list height in items (knowledge) */ --duration-combo: 150ms; /* combo slide-open (knowledge) */ --metric-edit-height: 21px; --metric-edit-margin: 4px; /* text pen inside the client edge: 4px for Tahoma (Date/Time, Run), 1px for MS Sans Serif (Font dialog; [data-font="mss"]) */ --metric-edit-text-top: 1px; /* line-box top below the inner edge */ --metric-ip-field-width: 22px; /* three digits, centered (knowledge) */ --metric-list-item-height: 13px; /* list box item = one line (Font dialog) */ --metric-checklist-item-height: 17px; /* a check-box list's rows (Regional Options' language groups, measured) */ --checklist-valign: 1; /* their box and text: at the row's foot (1, measured), centred (0.5) */ --layout-compact: 0; /* a theme's 1 trims the measured slack some dialogs leave (Regional Options) */ --metric-list-text-left: 1px; /* text pen inside the item (Size list; TODO A5) */ --metric-scrollbar-size: 16px; --metric-splitter-size: 2px; /* pane splitter bar: 2px, as every divider (user, 2026-10-10, TODO X-eqrc; knowledge: Explorer's 4px gap) */ --metric-scrollbar-thumb-min: 8px; /* Notepad's vertical thumb at a long document */ --metric-scrollbar-glyph-left: 2px; /* Marlett 13 ppem pen in the 16×16 arrow button (measured) */ --metric-scrollbar-glyph-top: 2px; --metric-sizegrip-glyph-left: 2px; /* Marlett 14 ppem grip in the 16×16 size box (measured) */ --metric-sizegrip-glyph-top: 2px; --metric-scroll-line: 16px; /* scroll-area line step (knowledge; text views use their line height) */ --duration-scroll-delay: 400ms; /* arrow/track auto-repeat (knowledge) */ --duration-scroll-repeat: 50ms; --duration-updown-delay: 500ms; /* up-down auto-repeat (knowledge) */ --duration-updown-repeat: 100ms; --metric-checkbox-size: 13px; --metric-radio-size: 12px; --metric-statusbar-height: 20px; --metric-statusbar-panel-height: 18px; --metric-statusbar-panel-gap: 2px; --metric-statusbar-text-left: 2px; /* text pen inside a panel (Volume Control, Task Manager) */ --metric-statusbar-text-top: 2px; --metric-statusbar-grip: 13px; /* the square the size grip clears at the corner */ --metric-taskbar-height: 28px; --metric-start-button-width: 55px; --metric-start-button-height: 22px; --metric-taskbar-padding-top: 4px; /* 2px top edge + 2px */ --metric-taskbar-padding-x: 2px; --metric-taskbar-band-gap: 3px; /* Start button → band separator */ --metric-taskbar-band-lead: 11px; /* separator left → band content (separator 2 + 2 + gripper 3 + 4) */ --metric-task-button-width: 160px; --metric-task-button-gap: 3px; --metric-tray-clock-width: 71px; /* clock area in the notification area (fits the reference) */ --metric-tab-height: 18px; --metric-tab-selected-grow: 2px; --metric-tab-padding: 6px; /* text pen 6px from the tab's left edge; width = text + 12 (TODO A6) */ --metric-tab-min-width: 42px; /* short labels (Web, Time, APM) */ --metric-tab-text-top: 3px; /* line-box top below the tab's top */ /* Property sheet — SPEC.md §4.18 (Display Properties; client coordinates) */ --metric-sheet-margin: 6px; /* tab control and button row from the client sides */ --metric-sheet-top: 7px; /* selected tab top */ --metric-sheet-button-gap: 6px; /* tab panel → buttons */ --metric-sheet-bottom: 7px; /* buttons → client bottom */ /* Wizard 97 — SPEC.md §4.19 (Windows 2000 Setup wizard, 16-colour; client coordinates) */ --metric-wizard-header-height: 58px; /* white header above the etched line (interior pages) */ --metric-wizard-title-left: 22px; /* header title pen (bold) */ --metric-wizard-title-top: 10px; --metric-wizard-subtitle-left: 44px; --metric-wizard-subtitle-top: 25px; --metric-wizard-bitmap-right: 5px; /* 49×49 header bitmap: 5px from the right and from the top */ --metric-wizard-bitmap-top: 5px; --metric-wizard-watermark-width: 164px; /* exterior pages */ --metric-wizard-exterior-left: 173px; /* exterior title and text pen */ --metric-wizard-exterior-title-top: 13px; --metric-wizard-exterior-text-gap: 16px; /* two-line title bottom → text (Completing page) */ --metric-wizard-buttons-gap: 12px; /* etched line → buttons */ --metric-wizard-bottom: 11px; /* buttons → client bottom */ --metric-wizard-cancel-gap: 11px; /* Next → Cancel (knowledge: Cancel is hidden in both references) */ --metric-wizard-right: 10px; /* Cancel → client right (knowledge: Next ends 21 + 75px from the right) */ --metric-tooltip-padding-y: 1px; --metric-tooltip-padding-x: 2px; /* text pen 3px from the outer edge (Windows Update info tip) */ --metric-tooltip-max-width: 300px; /* info-tip wrap width (knowledge: the reference breaks between 279 and 316) */ --metric-tooltip-offset-y: 20px; /* below the pointer hotspot (knowledge) */ --duration-tooltip-initial: 500ms; /* TTDT_INITIAL = double-click time (knowledge) */ --duration-tooltip-autopop: 5000ms; /* TTDT_AUTOPOP = 10 × initial */ --duration-tooltip-reshow: 100ms; /* TTDT_RESHOW = initial / 5 */ --metric-desktop-icon-spacing: 75px; /* Icon Spacing (Horizontal) */ --metric-desktop-icon-spacing-y: 75px; /* Icon Spacing (Vertical) */ --metric-desktop-icon-size: 32px; /* Icon (Size) */ --metric-desktop-icon-left: round(down, (var(--metric-desktop-icon-spacing) - var(--metric-desktop-icon-size)) / 2, 1px); /* 21 */ --metric-desktop-icon-top: 2px; --metric-desktop-label-top: calc(var(--metric-desktop-icon-top) + var(--metric-desktop-icon-size) + 4px); /* first label line top within the cell: 38 */ --metric-desktop-label-width: calc(var(--metric-desktop-icon-spacing) - 4px); /* wrap width: "My Documents" (70) fits, "3½ Floppy (A:)" (74) wraps — 71 = spacing − 4 (knowledge within that) */ --metric-startmenu-item-height: 32px; --metric-startmenu-subitem-height: 20px; --metric-menu-item-height: 17px; --metric-menu-separator-height: 9px; --metric-menu-frame: 3px; --metric-header-height: 17px; /* Task Manager list views (rows 86..102): full push-button edge */ --metric-header-height-explorer: 16px; /* Explorer's header (Search Results): no top highlight — SPEC.md §2.3 */ --metric-header-text-pad: 6px; /* header and subitem text 6px from the item's sides */ --metric-header-text-top: 2px; --metric-drop-button-grow: 0px; /* combo / date / lookup drop buttons: grown past the 2px edge's inset (a theme's role) */ --metric-client-edge: 2px; /* the client edge's width: a scroll area inside it pads by this (its bars sit right inside the edge) — a theme's role */ --metric-table-edge: var(--metric-client-edge); /* list views and grids */ --metric-list-row-height: 14px; /* report rows: one line + 1 (Processes) */ --metric-list-row-height-icon: 17px; /* with 16×16 icons (Applications) */ --metric-list-cell-top: 0px; /* report rows: the text line at the row's top — 3px over the digits, 3px under in the 14px row (user, TODO X-sg5z, #9; Windows: 2px lower, 5px over, 1px under) */ --metric-list-cell-top-icon: 2px; /* rows with 16px icons: 2px below the row top — the 13px line centred in 17px */ --metric-list-label-left: 2px; /* first column: icon (or label) 2px in */ --metric-tree-indent: 19px; /* level indent = the box column (16 + 3) */ --metric-tree-inset: 0px; /* content inset inside the client edge (win2k: none; Graphite and side panes 2px — user) */ --metric-tree-row-height: 16px; --metric-tree-label-gap: 3px; /* icon → label box (knowledge-fitted) */ --metric-tree-label-pad: 2px; --metric-tree-text-top: 1px; --metric-list-label-pad: 2px; /* label box: text 2px in … */ --metric-list-column-gap: 20px; /* LVS_LIST column = widest item + gap (knowledge) */ --metric-list-label-pad-right: 6px; /* … and 6px after the text; the selection covers the box (Applications) */ /* Menus — SPEC.md §4.4 (ps7_menu_edit_transform.png, win2k-pro_menu_start*.png) */ --metric-menu-min-width: 0px; --metric-menu-text-left: 17px; /* text pen from the item's left (20 from the popup's outer edge) */ --metric-menu-text-top: 1px; /* line top in a 17px item */ --metric-menu-text-right: 18px; /* item right padding (accelerators end here) */ --metric-menu-accel-gap: 17px; /* text → accelerator, in the width rule */ --metric-menu-accel-right: 19px; /* accelerator advance ends 19px inside the item's right edge */ --metric-menu-arrow-size: 12px; /* popup submenu arrow: Marlett "8" at 12 ppem in a 12×12 cell … */ --metric-menu-arrow-right: 2px; /* … 2px from the inner right edge (Start menu: 13 ppem, 0px) */ --metric-menu-check-left: 3px; /* knowledge */ --metric-menu-icon-left: 2px; --metric-menu16-icon-top: 2px; --metric-menu16-text-left: 27px; --metric-menu16-text-top: 4px; --metric-menu32-text-left: 43px; /* after a 32×32 icon at (2, 0) */ --metric-menu32-text-top: 10px; --metric-menu-separator-top: 3px; --metric-menu-separator-inset-left: 1px; --metric-menu-separator-inset-right: 1px; --metric-startmenu-banner-width: 21px; --metric-startmenu-width: 176px; /* fixed in both Start-menu references */ --metric-startmenu-text-max: 81px; /* longer names are cut with "..." ("Log Off Admin...") */ --metric-startmenu-separator-height: 8px; --metric-menu-chevron-height: 12px; /* personalized-menu chevron row (knowledge) */ --metric-menubar-item-height: 18px; --metric-menubar-item-top: 1px; --metric-menubar-item-padding: 6px; --metric-menubar-text-top: 2px; --metric-menu-show-delay: 400ms; /* SPI_GETMENUSHOWDELAY default (knowledge) */ --duration-menu: 100ms; /* menu fade/scroll (user's call, TODO X-gjyn; knowledge: 200ms) */ --metric-toolbar-button-height: 22px; /* Rebar and toolbars — SPEC.md §4.22 (win2k-pro_window_my-computer.png) */ --metric-rebar-band-height: 22px; --metric-pane-head-height: var(--metric-rebar-band-height); /* side panes' title bars: a rebar band (user, X-6g47) */ --metric-pane-close-right: var(--metric-client-edge); /* the close cross's cell from the band's right: over the body's scroll bar */ --metric-rebar-gripper-left: 2px; /* from the band's left (inside the rebar's etched border) */ --metric-rebar-gripper-inset: 2px; /* from the band's top and bottom */ --metric-rebar-child-left: 9px; /* band child after the gripper (menu band items, band titles) */ --metric-rebar-title-gap: 4px; /* title → child */ --metric-rebar-text-top: 4px; /* text line top in a 22px band */ --metric-toolbar-pad: 2px; /* image cell inset (knowledge-fitted: icon-only buttons 24px apart) */ --metric-toolbar-image: 20px; /* Explorer large toolbar images */ --icon-scale: 1; /* a theme's icons drawn at this share of their box (16px icons, toolbar icons) — one editable value */ --metric-toolbar-text-after: 9px; /* list style: text → button right (Search, Folders) */ --metric-toolbar-separator: 8px; /* separator width; etched line 3px in */ --metric-toolbar-dropdown: 13px; /* drop-down arrow part (knowledge) */ /* Trackbar — SPEC.md §4.6 (Mouse › Motion, Keyboard › Speed, Volume Control, volume popup) */ --metric-trackbar-thumb-width: 11px; /* along the channel */ --metric-trackbar-thumb-length: 21px; /* across the channel (pointed: 16px body + 5px point) */ --metric-trackbar-margin: 8px; /* channel inset from the control ends (knowledge: thumb length / 4 + 3) */ --metric-trackbar-channel: 4px; /* sunken edge, no interior */ --metric-trackbar-channel-sel: 10px; /* TBS_ENABLESELRANGE channel (knowledge) */ --metric-trackbar-tic-length: 3px; --metric-trackbar-tic-end: 4px; /* first and last tick */ --metric-trackbar-tic-gap: 1px; /* thumb → tick */ --metric-trackbar-default-length: 120px; /* initial size only; dialogs size the control */ --metric-trackbar-default-across: 26px; /* thumb + gap + end tick */ --metric-trackbar-default-across-both: 31px; --duration-trackbar-repeat-delay: 400ms; /* channel press auto-repeat (knowledge) */ --duration-trackbar-repeat: 100ms; /* Volume popup — SPEC.md §4.7 (win2k-pro_control_volume-popup.png) */ --metric-volume-width: 81px; --metric-volume-height: 136px; --metric-volume-title-top: 10px; --metric-volume-wedge-left: 11px; --metric-volume-wedge-top: 34px; --metric-volume-trackbar-left: 29px; --metric-volume-trackbar-top: 27px; --metric-volume-trackbar-height: 81px; --metric-volume-mute-left: 9px; --metric-volume-mute-top: 117px; /* Alt+Tab switcher — SPEC.md §4.8 (knowledge) */ --metric-switcher-padding: 13px; --metric-switcher-slot: 43px; --metric-switcher-icon-inset: 5px; --metric-switcher-frame: 2px; --metric-switcher-title-height: 22px; --metric-switcher-title-gap: 8px; --metric-switcher-title-inset: 4px; --metric-switcher-title-text-top: 4px; /* Balloon tips — SPEC.md §4.9 (knowledge) */ --metric-balloon-padding: 8px; --metric-balloon-radius: 8px; --metric-balloon-stem-height: 18px; --metric-balloon-stem-width: 18px; --metric-balloon-stem-inset: 16px; /* anchor → balloon side edge */ --metric-balloon-max-width: 250px; --metric-balloon-icon-gap: 6px; --metric-balloon-title-top: 2px; /* bold title line in the 16px icon row */ --metric-balloon-title-gap: 5px; /* title row → text */ --metric-balloon-close-space: 20px; /* room reserved for the close button */ --metric-balloon-close-shift: 3px; /* close button pushed toward the corner */ --duration-tooltip: 200ms; /* ── Caption gradient — SPEC.md §2.2 (linear per channel; the browser's interpolation is verified per column) ── */ --gradient-active-caption: linear-gradient(to right, var(--sys-active-title), var(--sys-gradient-active-title)); --gradient-inactive-caption: linear-gradient(to right, var(--sys-inactive-title), var(--sys-gradient-inactive-title)); /* ── Edge patterns (DrawEdge) — SPEC.md §2.4 ──────────────────────────────────────────────────── Inset box-shadows, topmost first. Bottom/right lines are listed before top/left lines so they own the top-right and bottom-left corners; top/left own only the top-left corner, as measured. */ --edge-raised: /* window frame, combo button: outer F/k, inner W/g */ inset -1px -1px var(--sys-btn-dk-shadow), inset 1px 1px var(--sys-btn-light), inset -2px -2px var(--sys-btn-shadow), inset 2px 2px var(--sys-btn-hilight); --edge-button: /* push and caption buttons (DrawFrameControl): outer W/k, inner F/g */ inset -1px -1px var(--sys-btn-dk-shadow), inset 1px 1px var(--sys-btn-hilight), inset -2px -2px var(--sys-btn-shadow), inset 2px 2px var(--sys-btn-light); --edge-button-default: /* default push button: 1px black frame, then the button edge inside */ inset 0 0 0 1px var(--sys-window-frame), inset -2px -2px var(--sys-btn-dk-shadow), inset 2px 2px var(--sys-btn-hilight), inset -3px -3px var(--sys-btn-shadow), inset 3px 3px var(--sys-btn-light); --edge-sunken: /* EDGE_SUNKEN / client edge: outer g/W, inner k/F */ inset -1px -1px var(--sys-btn-hilight), inset 1px 1px var(--sys-btn-shadow), inset -2px -2px var(--sys-btn-light), inset 2px 2px var(--sys-btn-dk-shadow); --edge-task-pressed: /* pressed task / Start button: outer k/W, inner g/F (taskbar, measured) */ inset -1px -1px var(--sys-btn-hilight), inset 1px 1px var(--sys-btn-dk-shadow), inset -2px -2px var(--sys-btn-light), inset 2px 2px var(--sys-btn-shadow); --edge-sunken-outer: /* BDR_SUNKENOUTER: status-bar panel, checked toolbar button */ inset -1px -1px var(--sys-btn-hilight), inset 1px 1px var(--sys-btn-shadow); --edge-raised-inner: /* BDR_RAISEDINNER: hot flat toolbar button (knowledge, to verify) */ inset -1px -1px var(--sys-btn-shadow), inset 1px 1px var(--sys-btn-hilight); --edge-etched: /* EDGE_ETCHED rectangle: outer ButtonShadow/ButtonHilight, inner ButtonHilight/ButtonShadow (rebar) */ inset -1px -1px var(--sys-btn-hilight), inset 1px 1px var(--sys-btn-shadow), inset -2px -2px var(--sys-btn-shadow), inset 2px 2px var(--sys-btn-hilight); /* Theme roles of the edges (TODO F-5): what push-like control parts draw — buttons, caption and task buttons, header items, scroll bar arrows and thumb, drop and up-down buttons. win2k: the edges above; a theme may flatten them while frames (windows, menus, tab pages, client edges) keep theirs. */ --edge-window: var(--edge-raised); /* a window's frame (sizable, dialog, tool) */ --shadow-window: 1px 1px 3px 0 rgb(0 0 0 / 0.45); /* drop shadow under a window when Effects › Show shadows under windows is on (demo; win2k had none) */ --edge-control: var(--edge-button); --edge-push: var(--edge-control); /* push buttons (and push-like check boxes) at rest */ --edge-control-default: var(--edge-button-default); --edge-control-pressed: inset 0 0 0 1px var(--sys-window-frame), inset 0 0 0 2px var(--sys-btn-shadow); /* pushed button (Q5) */ --edge-control-raised: var(--edge-raised); /* scroll bar arrows and thumb, combo / grid drop and up-down buttons */ --edge-control-sunken: var(--edge-task-pressed); /* pressed Start and task buttons */ --edge-control-task-checked: var(--edge-task-pressed), inset 0 3px var(--sys-btn-hilight); /* the active window's task button */ --inset-task-checked: 3px 2px 2px; /* its dither: under the 2px edge and the Hilight row (measured) */ --edge-control-filler: /* a header's filler after the last item: the button edge without its right-side lines */ inset 0 -1px var(--sys-btn-dk-shadow), inset 1px 1px var(--sys-btn-hilight), inset 0 -2px var(--sys-btn-shadow), inset 2px 2px var(--sys-btn-light); /* The 5-3-1 drop-down arrow (toolbar drop-down parts, colour buttons), in the element's colour. */ --glyph-drop-arrow: linear-gradient(currentColor, currentColor) 0 0 / 5px 1px no-repeat, linear-gradient(currentColor, currentColor) 1px 1px / 3px 1px no-repeat, linear-gradient(currentColor, currentColor) 2px 2px / 1px 1px no-repeat; --edge-etched-v: linear-gradient(to right, var(--sys-btn-shadow) 0 1px, var(--sys-btn-hilight) 1px 2px); --edge-etched-h: linear-gradient(to bottom, var(--sys-btn-shadow) 0 1px, var(--sys-btn-hilight) 1px 2px); /* ── Focus rectangle (DrawFocusRect) — SPEC.md §2.5: 1px dots, every other pixel, starting with a gap at the corner (the phase measured in push buttons). Used as the background of a positioned pseudo-element. */ --focus-rect-image: repeating-linear-gradient(to right, transparent 0 1px, var(--color-focus-dot) 1px 2px) 0 0 / 100% 1px no-repeat, repeating-linear-gradient(to right, transparent 0 1px, var(--color-focus-dot) 1px 2px) 0 100% / 100% 1px no-repeat, repeating-linear-gradient(to bottom, transparent 0 1px, var(--color-focus-dot) 1px 2px) 0 0 / 1px 100% no-repeat, repeating-linear-gradient(to bottom, transparent 0 1px, var(--color-focus-dot) 1px 2px) 100% 0 / 1px 100% no-repeat; /* ── Patterns — SPEC.md §2.5 ─────────────────────────────────────────────────────────────────── */ /* 2×2 checker alpha mask (pixels (1,0) and (0,1) opaque). The colors stay tokens: ButtonFace is the element's background, ButtonHilight a masked layer. Gradients are not used — Chrome blends their stops slightly. */ /* The console's own palette (not system colors): attribute 0x07, LightGray on Black (Command Prompt). */ --color-console-background: #000000; --color-console-text: #C0C0C0; /* HyperTerminal's page frame (black — measured) and its text (the terminal raster font is missing — TODO R32). */ --color-terminal-frame: #000000; /* MFC splitter bars' outer lines (black, not ButtonDkShadow — Phone Dialer, measured). */ --color-splitter-line: #000000; /* On-Screen Keyboard's background (its own colour, not a system one — measured). */ --color-osk-background: #0A246A; /* Outlook Express's unread count after a bold folder name (measured). */ --color-unread-count: #0000FF; /* Media Player's video area and info panel: white labels on black (its own colours — measured). */ --color-mplayer-video: #000000; --color-mplayer-text: #FFFFFF; /* Date/Time's analog clock (its own palette — measured): hour marks and hands. */ --color-clock-light: #00FFFF; --color-clock-face: #008080; --color-clock-dark: #000000; /* A focused list-view row's ring in Keyboard › Input Locales: XOR dots over black gaps (measured). */ --color-focus-gap: #000000; /* WordPad's ruler ink (black, not ButtonDkShadow — measured). */ --color-wordpad-ruler-ink: #000000; /* Sound Recorder's wave display and Record glyph (its own palette — measured). */ --color-sndrec-wave-bg: #000000; --color-sndrec-wave-line: #00FF00; --color-sndrec-record: #800000; /* Task Manager's performance graphs (their own palette, not system colors — measured). */ --color-perf-background: #000000; --color-perf-grid: #008040; --color-perf-meter-off: #008000; --color-perf-meter-on: #00FF00; --color-perf-cpu: #00FF00; --color-perf-mem: #FFFF00; /* Explorer's Web view (its HTML template's colors, not system colors — measured on My Computer). */ --color-link: #0000FF; --color-webview-rule: #6699CC; --color-webview-info-border: #D3D3D3; /* Calculator's key captions (the app's own colors). */ --color-calc-red: #FF0000; --color-calc-blue: #0000FF; --color-calc-purple: #800080; /* the Scientific view's function keys (knowledge) */ /* "It is now safe to turn off your computer": drawn in the 16-colour VGA mode, not the scheme (measured). */ --color-safe-desktop: #386DA6; --color-safe-face: #C3C3C3; --color-safe-hilight: #FFFFFF; --color-safe-shadow: #61715D; --color-safe-dark: #000000; --color-safe-caption: #30309A; --color-boot-block: #00289E; --color-boot-frame: #828282; /* Shut Down's screen shade is plain black, not a system color (it stays black in every scheme — knowledge). */ --color-shutdown-shade: #000000; --pattern-dither-mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAAEklEQVR42mNgYGD4z8Dwn4EBAAkBAf/EacEIAAAAAElFTkSuQmCC"); --pattern-dither-size: 2px 2px; }