diff --git a/.impeccable/config.json b/.impeccable/config.json index afa9284..af8998d 100644 --- a/.impeccable/config.json +++ b/.impeccable/config.json @@ -1,154 +1,122 @@ { - "detector": { - "ignoreRules": [], - "ignoreFiles": [], - "ignoreValues": [ - { - "rule": "cramped-padding", - "value": "*", - "files": [ - "index.html" - ], - "createdAt": "2026-08-17T03:39:35.263Z", - "reason": "Agent: color-chip palette swatches are intentional edge-to-edge color demos, not content containers" - }, - { - "rule": "undersized-ui-text", - "value": "*", - "files": [ - "index.html" - ], - "createdAt": "2026-08-17T03:39:35.352Z", - "reason": "Agent: color-chip hex labels are decorative swatch captions in a palette showcase, sized by design spec" - }, - { - "rule": "side-tab", - "value": "*", - "files": [ - "ui.html" - ], - "createdAt": "2026-08-17T03:39:45.534Z", - "reason": "Agent: left-accent callout/toast pattern is a spec'd Digital Rust component (Digital Rust UI Specification), demonstrated on ui.html" - }, - { - "rule": "design-system-color", - "value": "*", - "files": [ - "spec.html" - ], - "createdAt": "2026-08-17T03:39:45.630Z", - "reason": "Agent: spec.html renders palette demonstration diagrams; white/black swatch surfaces are the subject of the spec, not page chrome" - }, - { - "rule": "design-system-radius", - "value": "2px0", - "createdAt": "2026-08-17T03:39:45.704Z", - "reason": "Agent: detector parse artifact concatenating 2px radius with 0; no such value exists in source" - }, - { - "rule": "design-system-font-size", - "value": "0.7rem", - "createdAt": "2026-08-17T03:42:49.330Z", - "reason": "Agent: token-swatch inline chip label, intentionally below the 0.75rem label step for compact inline code chips" - }, - { - "rule": "design-system-font-size", - "value": "0.65rem", - "createdAt": "2026-08-17T03:42:49.407Z", - "reason": "Agent: color-hex caption under palette swatch chips, decorative metadata below the label step by design" - }, - { - "rule": "design-system-font-size", - "value": "0.6rem", - "createdAt": "2026-08-17T03:42:49.500Z", - "reason": "Agent: mobile (<480px) shrink of the color-hex swatch caption; pairs with the 0.65rem desktop value" - }, - { - "rule": "design-system-font-size", - "value": "2.5rem", - "createdAt": "2026-08-17T03:42:49.587Z", - "reason": "Agent: mobile h1 clamp ceiling (1.75rem-2.5rem) mirrors the desktop display clamp; intentional responsive step" - }, - { - "rule": "gray-on-color", - "value": "*", - "files": [ - "index.html", - "spec.html", - "ui.html" - ], - "createdAt": "2026-08-17T03:47:39.568Z", - "reason": "Agent: Ghost Pixel #f7eae8 is the spec'd near-white text of the Digital Rust palette (rust ramp IS the neutral scale, no grays exist); detector misclassifies it as gray-on-color" - }, - { - "rule": "dark-glow", - "value": "*", - "files": [ - "index.html", - "spec.html", - "ui.html" - ], - "createdAt": "2026-08-17T03:47:39.684Z", - "reason": "Agent: zero-offset brand glow and CRT glitch text-shadow are intentional, spec'd Digital Rust aesthetics (DESIGN.md typography + shadow tokens)" - }, - { - "rule": "broken-image", - "value": "*", - "files": [ - "index.html" - ], - "createdAt": "2026-08-17T03:47:39.818Z", - "reason": "Agent: lightbox dialog img src is populated by JS at runtime; the empty src is a deliberate placeholder" - }, - { - "rule": "repeating-stripes-gradient", - "value": "*", - "files": [ - "index.html", - "spec.html", - "ui.html" - ], - "createdAt": "2026-08-17T03:47:39.902Z", - "reason": "Agent: scanline overlay is the intentional CRT aesthetic of the Digital Rust design system" - }, - { - "rule": "image-hover-transform", - "value": "*", - "files": [ - "index.html", - "ui.html" - ], - "createdAt": "2026-08-17T03:47:40.009Z", - "reason": "Agent: lightbox preview zoom is the intended interaction on the showcase pages" - }, - { - "rule": "low-contrast", - "value": "*", - "files": [ - "spec.html" - ], - "createdAt": "2026-08-17T03:47:40.115Z", - "reason": "Agent: spec.html renders palette swatch diagrams; ramp-on-white and black-on-ramp pairings are the demonstration subject, not readable page copy" - }, - { - "rule": "nested-cards", - "value": "*", - "files": [ - "index.html", - "ui.html" - ], - "createdAt": "2026-08-17T03:51:36.176Z", - "reason": "Agent: intentional component demos — palette/ANSI swatch chips in a panelled showcase, and UI-spec demos (tabs/modal/menu inside demo panels) on the design-system documentation pages" - }, - { - "rule": "side-tab", - "value": "*", - "files": [ - "style.css" - ], - "createdAt": "2026-08-17T03:51:55.660Z", - "reason": "Agent: 3px left accent on toasts/callouts is a deliberate spec'd exception in the Digital Rust UI Specification (semantic blocks identifiable at scroll speed)" - } - ] - } + "detector": { + "ignoreRules": [], + "ignoreFiles": [], + "ignoreValues": [ + { + "rule": "cramped-padding", + "value": "*", + "files": ["index.html"], + "createdAt": "2026-08-17T03:39:35.263Z", + "reason": "Agent: color-chip palette swatches are intentional edge-to-edge color demos, not content containers" + }, + { + "rule": "undersized-ui-text", + "value": "*", + "files": ["index.html"], + "createdAt": "2026-08-17T03:39:35.352Z", + "reason": "Agent: color-chip hex labels are decorative swatch captions in a palette showcase, sized by design spec" + }, + { + "rule": "side-tab", + "value": "*", + "files": ["ui.html"], + "createdAt": "2026-08-17T03:39:45.534Z", + "reason": "Agent: left-accent callout/toast pattern is a spec'd Digital Rust component (Digital Rust UI Specification), demonstrated on ui.html" + }, + { + "rule": "design-system-color", + "value": "*", + "files": ["spec.html"], + "createdAt": "2026-08-17T03:39:45.630Z", + "reason": "Agent: spec.html renders palette demonstration diagrams; white/black swatch surfaces are the subject of the spec, not page chrome" + }, + { + "rule": "design-system-radius", + "value": "2px0", + "createdAt": "2026-08-17T03:39:45.704Z", + "reason": "Agent: detector parse artifact concatenating 2px radius with 0; no such value exists in source" + }, + { + "rule": "design-system-font-size", + "value": "0.7rem", + "createdAt": "2026-08-17T03:42:49.330Z", + "reason": "Agent: token-swatch inline chip label, intentionally below the 0.75rem label step for compact inline code chips" + }, + { + "rule": "design-system-font-size", + "value": "0.65rem", + "createdAt": "2026-08-17T03:42:49.407Z", + "reason": "Agent: color-hex caption under palette swatch chips, decorative metadata below the label step by design" + }, + { + "rule": "design-system-font-size", + "value": "0.6rem", + "createdAt": "2026-08-17T03:42:49.500Z", + "reason": "Agent: mobile (<480px) shrink of the color-hex swatch caption; pairs with the 0.65rem desktop value" + }, + { + "rule": "design-system-font-size", + "value": "2.5rem", + "createdAt": "2026-08-17T03:42:49.587Z", + "reason": "Agent: mobile h1 clamp ceiling (1.75rem-2.5rem) mirrors the desktop display clamp; intentional responsive step" + }, + { + "rule": "gray-on-color", + "value": "*", + "files": ["index.html", "spec.html", "ui.html"], + "createdAt": "2026-08-17T03:47:39.568Z", + "reason": "Agent: Ghost Pixel #f7eae8 is the spec'd near-white text of the Digital Rust palette (rust ramp IS the neutral scale, no grays exist); detector misclassifies it as gray-on-color" + }, + { + "rule": "dark-glow", + "value": "*", + "files": ["index.html", "spec.html", "ui.html"], + "createdAt": "2026-08-17T03:47:39.684Z", + "reason": "Agent: zero-offset brand glow and CRT glitch text-shadow are intentional, spec'd Digital Rust aesthetics (DESIGN.md typography + shadow tokens)" + }, + { + "rule": "broken-image", + "value": "*", + "files": ["index.html"], + "createdAt": "2026-08-17T03:47:39.818Z", + "reason": "Agent: lightbox dialog img src is populated by JS at runtime; the empty src is a deliberate placeholder" + }, + { + "rule": "repeating-stripes-gradient", + "value": "*", + "files": ["index.html", "spec.html", "ui.html"], + "createdAt": "2026-08-17T03:47:39.902Z", + "reason": "Agent: scanline overlay is the intentional CRT aesthetic of the Digital Rust design system" + }, + { + "rule": "image-hover-transform", + "value": "*", + "files": ["index.html", "ui.html"], + "createdAt": "2026-08-17T03:47:40.009Z", + "reason": "Agent: lightbox preview zoom is the intended interaction on the showcase pages" + }, + { + "rule": "low-contrast", + "value": "*", + "files": ["spec.html"], + "createdAt": "2026-08-17T03:47:40.115Z", + "reason": "Agent: spec.html renders palette swatch diagrams; ramp-on-white and black-on-ramp pairings are the demonstration subject, not readable page copy" + }, + { + "rule": "nested-cards", + "value": "*", + "files": ["index.html", "ui.html"], + "createdAt": "2026-08-17T03:51:36.176Z", + "reason": "Agent: intentional component demos — palette/ANSI swatch chips in a panelled showcase, and UI-spec demos (tabs/modal/menu inside demo panels) on the design-system documentation pages" + }, + { + "rule": "side-tab", + "value": "*", + "files": ["style.css"], + "createdAt": "2026-08-17T03:51:55.660Z", + "reason": "Agent: 3px left accent on toasts/callouts is a deliberate spec'd exception in the Digital Rust UI Specification (semantic blocks identifiable at scroll speed)" + } + ] + } } diff --git a/.impeccable/design.json b/.impeccable/design.json index 60470f3..878ced7 100644 --- a/.impeccable/design.json +++ b/.impeccable/design.json @@ -1,867 +1,867 @@ { - "schemaVersion": 2, - "generatedAt": "2026-08-17T04:02:00.494Z", - "title": "Design System: Digital Rust", - "extensions": { - "colorMeta": { - "ghost-pixel": { - "role": "primary", - "displayName": "Ghost Pixel", - "canonical": "#f7eae8", - "tonalRamp": [ - "#0e0a0a", - "#2a2322", - "#493f3e", - "#695e5d", - "#8b7f7e", - "#aca2a1", - "#cfc7c6", - "#f1eeed" - ] - }, - "phosphor-smoke": { - "role": "primary", - "displayName": "Phosphor Smoke", - "canonical": "#efd5d1", - "tonalRamp": [ - "#100908", - "#2f211f", - "#4f3d3a", - "#715b58", - "#937c79", - "#b4a09c", - "#d4c5c3", - "#f3edec" - ] - }, - "phantom-current": { - "role": "primary", - "displayName": "Phantom Current", - "canonical": "#e7c0ba", - "tonalRamp": [ - "#120807", - "#331f1c", - "#563a36", - "#795853", - "#9b7973", - "#bc9d98", - "#dac3bf", - "#f6ecea" - ] - }, - "corrupted-cache": { - "role": "neutral", - "displayName": "Corrupted Cache", - "canonical": "#dfaba3", - "tonalRamp": [ - "#140706", - "#381c18", - "#5d3631", - "#81544d", - "#a4756e", - "#c49993", - "#e0c1bc", - "#f8ebe9" - ] - }, - "copper-trace": { - "role": "neutral", - "displayName": "Copper Trace", - "canonical": "#d7968c", - "tonalRamp": [ - "#170604", - "#3c1914", - "#63322b", - "#894f47", - "#ac7067", - "#cc968d", - "#e7beb8", - "#fbeae7" - ] - }, - "fatal-error": { - "role": "primary", - "displayName": "Fatal Error", - "canonical": "#cf8175", - "tonalRamp": [ - "#190403", - "#41150f", - "#6a2c24", - "#91493f", - "#b56b60", - "#d49287", - "#edbcb3", - "#fee9e5" - ] - }, - "rouge-signal": { - "role": "neutral", - "displayName": "Rouge Signal", - "canonical": "#c76c5e", - "tonalRamp": [ - "#1b0302", - "#450f09", - "#70261d", - "#994337", - "#bd6658", - "#dc8d80", - "#f3b9af", - "#ffe8e4" - ] - }, - "amber-alert": { - "role": "primary", - "displayName": "Amber Alert", - "canonical": "#bf5747", - "tonalRamp": [ - "#1d0100", - "#4a0803", - "#761e13", - "#a03c2d", - "#c56050", - "#e48979", - "#f9b6aa", - "#ffe7e2" - ] - }, - "amber-alert-text": { - "role": "neutral", - "displayName": "Amber Alert Text", - "canonical": "#cb6353", - "tonalRamp": [ - "#1d0101", - "#490803", - "#761e14", - "#9f3c2f", - "#c56051", - "#e3897a", - "#f9b6aa", - "#ffe7e2" - ] - }, - "firewall-breach": { - "role": "neutral", - "displayName": "Firewall Breach", - "canonical": "#b74230", - "tonalRamp": [ - "#1f0000", - "#4e0000", - "#7c1305", - "#a73322", - "#cd5946", - "#eb8472", - "#ffb3a5", - "#ffe6e0" - ] - }, - "digital-rust": { - "role": "primary", - "displayName": "Digital Rust", - "canonical": "#af2e1a", - "tonalRamp": [ - "#210000", - "#500000", - "#800500", - "#ac2c18", - "#d2543f", - "#f0816c", - "#ffb1a1", - "#ffe5de" - ] - }, - "kernel-panic": { - "role": "neutral", - "displayName": "Kernel Panic", - "canonical": "#9d2917", - "tonalRamp": [ - "#1f0000", - "#4e0000", - "#7c1303", - "#a73421", - "#cc5946", - "#ea8471", - "#ffb3a4", - "#ffe6e0" - ] - }, - "data-rot": { - "role": "neutral", - "displayName": "Data Rot", - "canonical": "#8c2414", - "tonalRamp": [ - "#1e0100", - "#4b0600", - "#781c0d", - "#a23a29", - "#c75e4c", - "#e58876", - "#fbb5a7", - "#ffe7e1" - ] - }, - "bricked-board": { - "role": "neutral", - "displayName": "Bricked Board", - "canonical": "#7a2012", - "tonalRamp": [ - "#1c0201", - "#470d05", - "#732316", - "#9c4031", - "#c16352", - "#df8c7b", - "#f6b8ab", - "#ffe8e2" - ] - }, - "dark-packet": { - "role": "primary", - "displayName": "Dark Packet", - "canonical": "#691b0f", - "tonalRamp": [ - "#1b0302", - "#441109", - "#6e281d", - "#964537", - "#bb6858", - "#d98f80", - "#f1baaf", - "#ffe8e4" - ] - }, - "daemon-blood": { - "role": "neutral", - "displayName": "Daemon Blood", - "canonical": "#57170d", - "tonalRamp": [ - "#190503", - "#40160e", - "#692e23", - "#904b3e", - "#b36d5f", - "#d29386", - "#ecbcb3", - "#fde9e5" - ] - }, - "bad-sector": { - "role": "neutral", - "displayName": "Bad Sector", - "canonical": "#46120a", - "tonalRamp": [ - "#170604", - "#3d1913", - "#633229", - "#894f44", - "#ad7065", - "#cc968b", - "#e7beb6", - "#fbeae7" - ] - }, - "core-meltdown": { - "role": "neutral", - "displayName": "Core Meltdown", - "canonical": "#340d07", - "tonalRamp": [ - "#150705", - "#381c17", - "#5d362e", - "#82534a", - "#a4756b", - "#c49990", - "#e1c1ba", - "#f9ebe8" - ] - }, - "null-pointer": { - "role": "neutral", - "displayName": "Null Pointer", - "canonical": "#230905", - "tonalRamp": [ - "#120806", - "#331f1b", - "#563a34", - "#795851", - "#9b7971", - "#bc9d96", - "#dac3be", - "#f6ecea" - ] - }, - "event-horizon": { - "role": "primary", - "displayName": "Event Horizon", - "canonical": "#110402", - "tonalRamp": [ - "#100908", - "#2e221e", - "#4f3d38", - "#705c56", - "#927d77", - "#b3a09b", - "#d4c6c1", - "#f3edeb" - ] - }, - "memory-leek": { - "role": "secondary", - "displayName": "Memory Leek", - "canonical": "#8fa667", - "tonalRamp": [ - "#080e00", - "#1e2a02", - "#384911", - "#556a2d", - "#768c50", - "#9aae7a", - "#c1d0aa", - "#ebf1e2" - ] - }, - "dim-memory-leek": { - "role": "secondary", - "displayName": "Dim Memory Leek", - "canonical": "#627247", - "tonalRamp": [ - "#090d03", - "#20290e", - "#3a4823", - "#58683e", - "#79895f", - "#9dac86", - "#c3ceb3", - "#ecf0e5" - ] - }, - "bright-memory-leek": { - "role": "secondary", - "displayName": "Bright Memory Leek", - "canonical": "#94a577", - "tonalRamp": [ - "#090d02", - "#20290d", - "#3b4822", - "#59683d", - "#7a895e", - "#9dac85", - "#c3ceb2", - "#ecf0e5" - ] - }, - "stack-overglow": { - "role": "secondary", - "displayName": "Stack Overglow", - "canonical": "#d4a759", - "tonalRamp": [ - "#150800", - "#381f00", - "#5d3a00", - "#825800", - "#a47a2c", - "#c49f60", - "#e0c59a", - "#f8eddc" - ] - }, - "dim-stack-overglow": { - "role": "secondary", - "displayName": "Dim Stack Overglow", - "canonical": "#a07e43", - "tonalRamp": [ - "#130900", - "#352100", - "#583c00", - "#7b5b1e", - "#9d7c44", - "#bea070", - "#dbc6a4", - "#f6eddf" - ] - }, - "bright-stack-overglow": { - "role": "secondary", - "displayName": "Bright Stack Overglow", - "canonical": "#d3ae6e", - "tonalRamp": [ - "#130900", - "#352000", - "#593c00", - "#7c5b16", - "#9e7c3f", - "#bea06d", - "#dcc6a1", - "#f6edde" - ] - }, - "blue-screen": { - "role": "tertiary", - "displayName": "Blue Screen", - "canonical": "#8791b0", - "tonalRamp": [ - "#080b13", - "#1f2436", - "#394159", - "#57607d", - "#78819f", - "#9ca4bf", - "#c2c9dc", - "#ebeef6" - ] - }, - "dim-blue-screen": { - "role": "tertiary", - "displayName": "Dim Blue Screen", - "canonical": "#60677c", - "tonalRamp": [ - "#090b11", - "#202531", - "#3c4153", - "#5a6175", - "#7b8297", - "#9ea5b8", - "#c4c9d7", - "#eceef4" - ] - }, - "bright-blue-screen": { - "role": "tertiary", - "displayName": "Bright Blue Screen", - "canonical": "#999eaf", - "tonalRamp": [ - "#0a0b10", - "#22252e", - "#3e414f", - "#5c6170", - "#7d8292", - "#a0a4b3", - "#c6c9d3", - "#edeef3" - ] - }, - "fractured-shell": { - "role": "tertiary", - "displayName": "Fractured Shell", - "canonical": "#ba5a7d", - "tonalRamp": [ - "#1b020b", - "#450a24", - "#701f41", - "#983c60", - "#bd5f81", - "#dc88a4", - "#f3b5c8", - "#ffe7ee" - ] - }, - "dim-fractured-shell": { - "role": "tertiary", - "displayName": "Dim Fractured Shell", - "canonical": "#87405a", - "tonalRamp": [ - "#18040b", - "#3f1324", - "#672a41", - "#8e4760", - "#b26881", - "#d18fa4", - "#ebbac8", - "#fde8ee" - ] - }, - "bright-fractured-shell": { - "role": "tertiary", - "displayName": "Bright Fractured Shell", - "canonical": "#ba6b88", - "tonalRamp": [ - "#18030b", - "#401225", - "#682842", - "#8f4562", - "#b36783", - "#d28ea6", - "#ecb9c9", - "#fee8ef" - ] - }, - "dead-thread": { - "role": "secondary", - "displayName": "Dead Thread", - "canonical": "#6fa5a0", - "tonalRamp": [ - "#010e0d", - "#062b29", - "#1b4b47", - "#376c68", - "#5a8d89", - "#83afab", - "#b1d1cd", - "#e5f2f0" - ] - }, - "dim-dead-thread": { - "role": "secondary", - "displayName": "Dim Dead Thread", - "canonical": "#4c726e", - "tonalRamp": [ - "#030e0c", - "#122a28", - "#284946", - "#446966", - "#658b87", - "#8cada9", - "#b7cfcc", - "#e7f1f0" - ] - }, - "bright-dead-thread": { - "role": "secondary", - "displayName": "Bright Dead Thread", - "canonical": "#7fa5a1", - "tonalRamp": [ - "#040d0c", - "#122a28", - "#294946", - "#456966", - "#678b87", - "#8daca9", - "#b8cfcc", - "#e8f1f0" - ] - }, - "thermal-throttle": { - "role": "tertiary", - "displayName": "Thermal Throttle", - "canonical": "#d78556", - "tonalRamp": [ - "#1a0400", - "#431400", - "#6d2c00", - "#954916", - "#b96c3e", - "#d7926c", - "#f0bda1", - "#ffeade" - ] - }, - "dim-thermal-throttle": { - "role": "tertiary", - "displayName": "Dim Thermal Throttle", - "canonical": "#ac6d4a", - "tonalRamp": [ - "#170600", - "#3e1902", - "#653212", - "#8b502d", - "#af714f", - "#ce9779", - "#e8bfaa", - "#fcebe2" - ] - }, - "bright-thermal-throttle": { - "role": "tertiary", - "displayName": "Bright Thermal Throttle", - "canonical": "#d6926b", - "tonalRamp": [ - "#180600", - "#3f1900", - "#66310d", - "#8d4f29", - "#b0714c", - "#cf9676", - "#e9bfa8", - "#fceae1" - ] - } - }, - "typographyMeta": { - "display": { - "displayName": "Display", - "purpose": "The h1. Used once per page for the logo/title. Tracked wide to read like embossed lettering on a server panel." - }, - "headline": { - "displayName": "Headline", - "purpose": "Section titles (h2). Same family as Display, smaller and less tracked." - }, - "title": { - "displayName": "Title", - "purpose": "Card headers, code-block titles, panel labels. Small, dense, tracked. The workhorse label voice." - }, - "body": { - "displayName": "Body", - "purpose": "Running text, descriptions, documentation. Warm slab serif at 500 weight, comfortable over long sessions." - }, - "label": { - "displayName": "Label", - "purpose": "Tags, badges, version indicators. The smallest tracked voice." - }, - "mono": { - "displayName": "Mono", - "purpose": "Code blocks, terminal output, hex values. Tabular numerals, no hyphenation." - } - }, - "shadows": [ - { - "name": "offset-sm", - "value": "2px 2px 0 0 #46120a", - "purpose": "Default elevation for cards and code blocks at rest." - }, - { - "name": "offset-md", - "value": "3px 3px 0 0 #46120a", - "purpose": "Elevated surfaces, terminals, and palette sections." - }, - { - "name": "offset-lg", - "value": "4px 4px 0 0 #46120a", - "purpose": "Lightbox images and primary call-to-action emphasis." - }, - { - "name": "hover-md", - "value": "4px 4px 0 0 #46120a", - "purpose": "Hover state. Offset grows by 2px on both axes." - }, - { - "name": "active", - "value": "0 0 0 0 #46120a", - "purpose": "Pressed state. Offset collapses to zero; the element sits flush against the surface." - }, - { - "name": "glow-sm", - "value": "0 0 10px rgba(175, 46, 26, 0.4)", - "purpose": "Subtle brand-colour glow on hovered primary buttons and focused accent elements." - }, - { - "name": "glow-md", - "value": "0 0 20px rgba(175, 46, 26, 0.4)", - "purpose": "Stronger glow for lightbox images and hero-level emphasis." - }, - { - "name": "inner-highlight", - "value": "inset 0 1px 0 rgba(255, 255, 255, 0.1)", - "purpose": "Faint light-line at the top edge of raised surfaces; stacked under the offset shadow, the two travel together." - }, - { - "name": "inner-lowlight", - "value": "inset 0 -1px 0 rgba(17, 4, 2, 0.6)", - "purpose": "Inverse shade at the bottom edge of wells, toggle thumbs, and slider thumbs. Paired with the inner highlight on machined parts." - }, - { - "name": "accent", - "value": "5px 5px 0 0 #af2e1a", - "purpose": "Offset in the brand colour for primary buttons and brand-level emphasis." - } - ], - "motion": [ - { - "name": "ease-default", - "value": "cubic-bezier(0.4, 0, 0.2, 1)", - "purpose": "Default easing for state transitions." - }, - { - "name": "ease-out-expo", - "value": "cubic-bezier(0.22, 1, 0.36, 1)", - "purpose": "Entrance animations (typeIn)." - }, - { - "name": "duration-fast", - "value": "150ms", - "purpose": "Hover, focus, and micro-feedback transitions. The press cycle runs at this speed." - }, - { - "name": "duration-normal", - "value": "250ms", - "purpose": "Standard state transitions." - }, - { - "name": "duration-slow", - "value": "400ms", - "purpose": "Entrance and reveal animations." - }, - { - "name": "transition-fast", - "value": "150ms cubic-bezier(0.4, 0, 0.2, 1)", - "purpose": "Composed fast transition used by the press cycle on interactive elements." - }, - { - "name": "transition-normal", - "value": "250ms cubic-bezier(0.4, 0, 0.2, 1)", - "purpose": "Composed standard transition." - } - ], - "breakpoints": [ - { - "name": "sm", - "value": "480px", - "purpose": "Small mobile / narrow viewport." - }, - { - "name": "md", - "value": "768px", - "purpose": "Tablet / compact layout; code blocks drop to 0.75rem below this." - } - ] - }, - "components": [ - { - "name": "Primary Button", - "kind": "button", - "refersTo": "btn-primary", - "description": "The brand identity button. Digital Rust background, thick border, offset shadow with inner-highlight bevel, physical press response. One per view.", - "html": "", - "css": ".ds-btn-primary { background: #af2e1a; color: #f7eae8; padding: 0.5rem 1.5rem; border: 2px solid #af2e1a; border-radius: 4px; font-family: \"Rajdhani\", \"Saira SemiCondensed\", \"Trebuchet MS\", sans-serif; font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; box-shadow: 3px 3px 0 0 #46120a, inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1); } .ds-btn-primary:hover { background: #b74230; border-color: #b74230; transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 #46120a, 0 0 10px rgba(175, 46, 26, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .ds-btn-primary:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 #46120a; } .ds-btn-primary:focus-visible { outline: 2px solid #d4a759; outline-offset: 2px; }" - }, - { - "name": "Ghost Button", - "kind": "button", - "refersTo": "btn", - "description": "The default/secondary button. Transparent background, Dark Packet border, offset shadow with inner highlight; hover fills Core Meltdown with a Digital Rust edge.", - "html": "", - "css": ".ds-btn-ghost { background: transparent; color: #efd5d1; padding: 0.5rem 1.5rem; border: 2px solid #691b0f; border-radius: 4px; font-family: \"Rajdhani\", \"Saira SemiCondensed\", \"Trebuchet MS\", sans-serif; font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; box-shadow: 2px 2px 0 0 #46120a, inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1); } .ds-btn-ghost:hover { background: #340d07; border-color: #af2e1a; color: #f7eae8; transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 #46120a, inset 0 1px 0 rgba(255, 255, 255, 0.1); } .ds-btn-ghost:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 #46120a; } .ds-btn-ghost:focus-visible { outline: 2px solid #d4a759; outline-offset: 2px; }" - }, - { - "name": "Card", - "kind": "card", - "refersTo": "spec-card", - "description": "Workhorse container with thick borders, offset shadow, and inner highlight. Presses in on active like a bolted rack module.", - "html": "

PRIORITY STACK

Error scopes override everything with Amber Alert

", - "css": ".ds-card { background: #340d07; border: 2px solid #691b0f; border-radius: 4px; padding: 1.5rem; box-shadow: 2px 2px 0 0 #46120a, inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1); } .ds-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 #46120a; } .ds-card:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 #46120a; } .ds-card-title { color: #cf8175; margin-bottom: 0.5rem; font-size: 0.875rem; letter-spacing: 0.05em; text-transform: uppercase; font-family: \"Rajdhani\", \"Saira SemiCondensed\", \"Trebuchet MS\", sans-serif; font-weight: 700; } .ds-card-body { color: #f7eae8; font-size: 1rem; line-height: 1.6; font-family: \"Zilla Slab\", \"Bitter\", \"Source Serif 4\", Georgia, serif; }" - }, - { - "name": "Badge - Success", - "kind": "chip", - "refersTo": "badge", - "description": "Semantic success indicator with Memory Leek tint. Static: no press cycle, no shadow.", - "html": "GIT ADDED", - "css": ".ds-badge-success { border-radius: 4px; padding: 0.2rem 0.6rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-family: \"Rajdhani\", \"Saira SemiCondensed\", \"Trebuchet MS\", sans-serif; border: 1px solid rgba(143, 166, 103, 0.3); background: rgba(143, 166, 103, 0.15); color: #8fa667; }" - }, - { - "name": "Badge - Info", - "kind": "chip", - "refersTo": "badge", - "description": "Semantic informational indicator with Dead Thread tint. Static: no press cycle, no shadow.", - "html": "MODIFIED", - "css": ".ds-badge-info { border-radius: 4px; padding: 0.2rem 0.6rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-family: \"Rajdhani\", \"Saira SemiCondensed\", \"Trebuchet MS\", sans-serif; border: 1px solid rgba(111, 165, 160, 0.3); background: rgba(111, 165, 160, 0.15); color: #6fa5a0; }" - }, - { - "name": "Badge - Warning", - "kind": "chip", - "refersTo": "badge", - "description": "Semantic warning indicator with Stack Overglow tint. Static: no press cycle, no shadow.", - "html": "DEPRECATED", - "css": ".ds-badge-warning { border-radius: 4px; padding: 0.2rem 0.6rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-family: \"Rajdhani\", \"Saira SemiCondensed\", \"Trebuchet MS\", sans-serif; border: 1px solid rgba(212, 167, 89, 0.3); background: rgba(212, 167, 89, 0.15); color: #d4a759; }" - }, - { - "name": "Badge - Error", - "kind": "chip", - "refersTo": "badge", - "description": "Semantic error indicator. Amber Alert Text on a 10% Amber Alert tint — the AA-compliant text variant, never the raw colour.", - "html": "GIT DELETED", - "css": ".ds-badge-error { border-radius: 4px; padding: 0.2rem 0.6rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-family: \"Rajdhani\", \"Saira SemiCondensed\", \"Trebuchet MS\", sans-serif; border: 1px solid rgba(191, 87, 71, 0.25); background: rgba(191, 87, 71, 0.1); color: #cb6353; }" - }, - { - "name": "Text Input (Well)", - "kind": "input", - "refersTo": null, - "description": "Recessed well: the darkest surface on the page, no offset shadow, no lift. Responds through border colour only (Bad Sector rest, Dark Packet hover, Digital Rust focus).", - "html": "", - "css": ".ds-input { background: #110402; border: 2px solid #46120a; border-radius: 4px; padding: 0.5rem 0.75rem; color: #f7eae8; font-family: \"Zilla Slab\", \"Bitter\", \"Source Serif 4\", Georgia, serif; font-size: 1rem; transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1); } .ds-input:hover:not(:focus) { border-color: #691b0f; } .ds-input:focus { outline: 2px solid #d4a759; outline-offset: 2px; border-color: #af2e1a; } .ds-input::placeholder { color: rgba(239, 213, 209, 0.5); font-style: italic; }" - }, - { - "name": "Navigation Link", - "kind": "nav", - "refersTo": null, - "description": "Phantom Current with a 1px underline at 3px offset. Hover shifts to Fatal Error with a 2px underline; visited is Corrupted Cache.", - "html": "Read the specification", - "css": ".ds-link { color: #e7c0ba; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; font-family: \"Zilla Slab\", \"Bitter\", \"Source Serif 4\", Georgia, serif; transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1); } .ds-link:hover { color: #cf8175; text-decoration-thickness: 2px; } .ds-link:visited { color: #dfaba3; } .ds-link:focus-visible { outline: 2px solid #d4a759; outline-offset: 2px; }" - }, - { - "name": "Terminal", - "kind": "custom", - "refersTo": "terminal", - "description": "The brand's signature interactive metaphor. Fake terminal running spec validation commands, with a Stack Overglow block cursor.", - "html": "
● ● ●
digitalrust@entropy:~$ theme audit --strict
Syntax Coverage ........ PASS
digitalrust@entropy:~$
", - "css": ".ds-terminal { background: #110402; border: 2px solid #691b0f; border-radius: 6px; padding: 1.5rem; position: relative; overflow: hidden; box-shadow: 3px 3px 0 0 #46120a, inset 0 1px 0 rgba(255, 255, 255, 0.1); } .ds-terminal-dots { position: absolute; top: 0; left: 0; right: 0; padding: 0.5rem 1rem; background: #340d07; color: #af2e1a; border-bottom: 1px solid #46120a; font-size: 0.75rem; letter-spacing: 0.5rem; } .ds-terminal-body { margin-top: 2rem; font-family: \"IBM Plex Mono\", \"Space Mono\", ui-monospace, \"Fira Code\", monospace; font-size: 0.875rem; line-height: 1.6; } .ds-terminal-prompt { color: #e7c0ba; } .ds-terminal-cmd { color: #f7eae8; } .ds-terminal-output { color: #efd5d1; margin-left: 2rem; opacity: 0.95; } .ds-terminal-pass { color: #8fa667; font-weight: 700; } .ds-terminal-cursor { display: inline-block; width: 0.6em; height: 1.2em; background: #d4a759; vertical-align: text-bottom; }" - } - ], - "narrative": { - "northStar": "The Corroded Mainframe", - "overview": "A server room where every surface has oxidized, but the machines still hum. The walls are rust; the screens still glow. Failure is the texture, not the state.\n\nDigital Rust is a dark-mode-only system built around a single rust-to-void gradient: warm copper tones that bleed from near-white to near-black through 19 named stops, each one a hardware failure metaphor. The accent colours (Memory Leek, Stack Overglow, Dead Thread, Blue Screen, Fractured Shell, Thermal Throttle) are named after system crashes and injected surgically, never as a rainbow. Surfaces carry structural noise and scanline overlays; flat, noiseless backgrounds are a design failure. Borders are thick and heavy (2-4px Dark Packet), shadows are offset solids with no blur, corners never exceed 6px radius. Every component feels like a physical panel in a failing server rack: brutalist, tactile, press-and-release.\n\nThe system explicitly rejects the cold blue-purple dark theme family (Dracula, Nord, Tokyo Night, One Dark) and any sterile \"pro\" aesthetic with gray surfaces and blue accents. Pure black (`#000`) is forbidden in shadows and backgrounds, replaced by the warm near-blacks of the rust ramp. The hostility is in the atmosphere, not the readability: Ghost Pixel on Event Horizon hits 17.17:1 contrast ratio.", - "keyCharacteristics": [ - "Single-hue warm ramp (copper/rust/bone) as the structural spine, not a multi-hue palette", - "Offset solid shadows (no blur) that serve both interaction feedback and the corroded machine aesthetic", - "Structural noise and scanline overlays on every surface; silence them only for `prefers-reduced-motion`", - "Borders as heavy structural elements (2-4px Dark Packet), never decorative hairlines", - "Accent colours named after system failures, used surgically for syntax and diagnostics", - "Radius ceiling of 6px; nothing rounds past \"gently chamfered\"" - ], - "rules": [ - { - "name": "The One Hue Rule", - "body": "The 19-stop main ramp occupies a single warm hue family. Accents are admitted in six named failure families, but the surface itself never leaves the rust-to-void gradient. If a background or border colour is not one of the 19 ramp stops or one of the 6 accent families, it does not belong in the system.", - "section": "colors" - }, - { - "name": "The Black Is Forbidden Rule", - "body": "`#000000` is prohibited in shadows, borders, and backgrounds. The nearest near-black is Event Horizon (`#110402`). Shadows, overlays, and vignettes use warm-tinted transparencies of the brand colour: `rgba(175, 46, 26, ...)`. Pure black reads as a different material; this system has no cold materials.", - "section": "colors" - }, - { - "name": "The Flat Surface Failure Rule", - "body": "A flat, noiseless dark surface with no texture overlay is a design defect. Every ambient surface carries the SVG noise texture (opacity 0.02) and scanline overlay. These are structural, not decorative. The sole exemptions are interactive text surfaces (inputs, text areas, editable code regions), which stay clean for legibility, and `prefers-reduced-motion: reduce`, which silences all overlays.", - "section": "colors" - }, - { - "name": "The One Heading Colour Rule", - "body": "Fatal Error (`#cf8175`) is the only colour used for headings of any level. Not white, not Ghost Pixel, not the accent colours. Every heading speaks in the same warm-copper voice. If a heading is not Fatal Error, it is not a heading.", - "section": "typography" - }, - { - "name": "The All-Caps Ceiling Rule", - "body": "Rajdhani headings and labels are set in all-caps with wide tracking. This is an intentional, restricted choice for short strings (titles, labels, badges). Body copy is never all-caps. A sentence in all-caps at body size is unreadable and prohibited.", - "section": "typography" - }, - { - "name": "The No Blur Rule", - "body": "`box-shadow` blur radius is zero for all structural shadows. The only blur in the system is the glow shadow (which simulates light, not material depth). If a shadow has a non-zero blur and is not a glow, it does not belong.", - "section": "elevation" - }, - { - "name": "The Press-And-Release Rule", - "body": "Interactive elements with offset shadows must implement the full hover-then-press cycle: rest has offset, hover grows offset by 2px on both axes and lifts the element `translate(-2px, -2px)`, active collapses offset to zero and drives the element `translate(2px, 2px)` into the surface. The state transition must use `--dr-transition-fast` (150ms).", - "section": "elevation" - }, - { - "name": "The Recessed Well Rule", - "body": "Inputs, text areas, and editable code regions sit *below* the panel, not above it: Event Horizon background, 2px Bad Sector border, no offset shadow, no lift on hover. Wells respond through border colour (Bad Sector rest, Dark Packet hover, Digital Rust focus). They are exempt from noise and scanline texture; legibility outranks atmosphere inside a text field.", - "section": "elevation" - } - ], - "dos": [ - "Do use the 19-stop rust ramp as the only neutral scale. There is no separate gray ramp; the warm stops from Ghost Pixel to Event Horizon are the neutrals.", - "Do enforce WCAG 2.1 AA contrast on all text. Ghost Pixel on Event Horizon (17.17:1) is the baseline; Dim Thermal Throttle on Event Horizon (4.84:1) is the darkest acceptable body text.", - "Do use noise and scanline overlays on every surface. They are structural, not decorative. A flat noiseless dark background is a defect.", - "Do use offset solid shadows (no blur) in Bad Sector for material depth. Grow offset on hover, collapse on active to simulate a physical press.", - "Do use thick borders (2-4px Dark Particle) as structural elements. Borders are walls, not decoration.", - "Do keep radius at 2-6px. Nothing rounds past \"gently chamfered\". A 16px+ radius on a card or panel is a different design system.", - "Do name accent colours after system failures (Memory Leek, Stack Overglow, Dead Thread, Blue Screen, Fractured Shell, Thermal Throttle). New accents get parallel naming.", - "Do use wavy underlines for diagnostics (Amber Alert wavy for errors, Stack Overglow wavy for warnings) and solid underlines for links. The underline style carries semantic information.", - "Do implement the full hover-then-press cycle on all interactive elements: rest offset, hover offset grows, active offset collapses.", - "Do suppress noise, scanlines, and all animations for `prefers-reduced-motion: reduce`. The content must be fully visible without the animation.", - "Do keep surface-background tints for badges/diagnostics at 10-15% opacity of the named colour. This is enough to carry the semantic tint without competing with the ramp." - ], - "donts": [ - "Don't use pure black (`#000000`) in shadows, borders, or backgrounds. The system has no cold materials. Use Event Horizon (`#110402`) or warm-tinted transparencies of the brand colour.", - "Don't use blurred drop shadows. The only blur in the system is the glow effect (`0 0 Npx rgba(175, 46, 26, 0.4)`), which simulates radiated heat, not material depth.", - "Don't use Dracula, Nord, Tokyo Night, One Dark, or any cold/blue/purple dark theme aesthetic. Those are the explicit anti-references. Cool tones are the opposite of the corroded mainframe.", - "Don't use flat, noiseless dark surfaces without the SVG noise and scanline overlays. Remove only for `prefers-reduced-motion`.", - "Don't use colours outside the 19 ramp stops and 6 accent families. If a colour is not in the palette, it does not belong. Extend the palette deliberately, not by accident.", - "Don't use Fatal Error (`#cf8175`) for body text or link text. It is reserved for headings and keyword tokens. Body text uses Ghost Pixel or Phosphor Smoke; links use Phantom Current.", - "Don't set body copy in all-caps. Rajdhani all-caps with wide tracking is for headings and labels only (4 words or fewer for labels).", - "Don't use `border-left` or `border-right` greater than 1px as a coloured accent stripe on cards, list items, or callouts. The section-title left border is a rare deliberate exception.", - "Don't use border-radius above 6px on any card, panel, or container. Full-pill radius is acceptable for small inline elements (badges, tags) only.", - "Don't place a 1px border and a wide soft shadow on the same element. Pick one: a solid thick border at the brand colour, or a defined offset shadow at no more than 8px offset. Never both as decoration." - ] - } + "schemaVersion": 2, + "generatedAt": "2026-08-17T04:02:00.494Z", + "title": "Design System: Digital Rust", + "extensions": { + "colorMeta": { + "ghost-pixel": { + "role": "primary", + "displayName": "Ghost Pixel", + "canonical": "#f7eae8", + "tonalRamp": [ + "#0e0a0a", + "#2a2322", + "#493f3e", + "#695e5d", + "#8b7f7e", + "#aca2a1", + "#cfc7c6", + "#f1eeed" + ] + }, + "phosphor-smoke": { + "role": "primary", + "displayName": "Phosphor Smoke", + "canonical": "#efd5d1", + "tonalRamp": [ + "#100908", + "#2f211f", + "#4f3d3a", + "#715b58", + "#937c79", + "#b4a09c", + "#d4c5c3", + "#f3edec" + ] + }, + "phantom-current": { + "role": "primary", + "displayName": "Phantom Current", + "canonical": "#e7c0ba", + "tonalRamp": [ + "#120807", + "#331f1c", + "#563a36", + "#795853", + "#9b7973", + "#bc9d98", + "#dac3bf", + "#f6ecea" + ] + }, + "corrupted-cache": { + "role": "neutral", + "displayName": "Corrupted Cache", + "canonical": "#dfaba3", + "tonalRamp": [ + "#140706", + "#381c18", + "#5d3631", + "#81544d", + "#a4756e", + "#c49993", + "#e0c1bc", + "#f8ebe9" + ] + }, + "copper-trace": { + "role": "neutral", + "displayName": "Copper Trace", + "canonical": "#d7968c", + "tonalRamp": [ + "#170604", + "#3c1914", + "#63322b", + "#894f47", + "#ac7067", + "#cc968d", + "#e7beb8", + "#fbeae7" + ] + }, + "fatal-error": { + "role": "primary", + "displayName": "Fatal Error", + "canonical": "#cf8175", + "tonalRamp": [ + "#190403", + "#41150f", + "#6a2c24", + "#91493f", + "#b56b60", + "#d49287", + "#edbcb3", + "#fee9e5" + ] + }, + "rouge-signal": { + "role": "neutral", + "displayName": "Rouge Signal", + "canonical": "#c76c5e", + "tonalRamp": [ + "#1b0302", + "#450f09", + "#70261d", + "#994337", + "#bd6658", + "#dc8d80", + "#f3b9af", + "#ffe8e4" + ] + }, + "amber-alert": { + "role": "primary", + "displayName": "Amber Alert", + "canonical": "#bf5747", + "tonalRamp": [ + "#1d0100", + "#4a0803", + "#761e13", + "#a03c2d", + "#c56050", + "#e48979", + "#f9b6aa", + "#ffe7e2" + ] + }, + "amber-alert-text": { + "role": "neutral", + "displayName": "Amber Alert Text", + "canonical": "#cb6353", + "tonalRamp": [ + "#1d0101", + "#490803", + "#761e14", + "#9f3c2f", + "#c56051", + "#e3897a", + "#f9b6aa", + "#ffe7e2" + ] + }, + "firewall-breach": { + "role": "neutral", + "displayName": "Firewall Breach", + "canonical": "#b74230", + "tonalRamp": [ + "#1f0000", + "#4e0000", + "#7c1305", + "#a73322", + "#cd5946", + "#eb8472", + "#ffb3a5", + "#ffe6e0" + ] + }, + "digital-rust": { + "role": "primary", + "displayName": "Digital Rust", + "canonical": "#af2e1a", + "tonalRamp": [ + "#210000", + "#500000", + "#800500", + "#ac2c18", + "#d2543f", + "#f0816c", + "#ffb1a1", + "#ffe5de" + ] + }, + "kernel-panic": { + "role": "neutral", + "displayName": "Kernel Panic", + "canonical": "#9d2917", + "tonalRamp": [ + "#1f0000", + "#4e0000", + "#7c1303", + "#a73421", + "#cc5946", + "#ea8471", + "#ffb3a4", + "#ffe6e0" + ] + }, + "data-rot": { + "role": "neutral", + "displayName": "Data Rot", + "canonical": "#8c2414", + "tonalRamp": [ + "#1e0100", + "#4b0600", + "#781c0d", + "#a23a29", + "#c75e4c", + "#e58876", + "#fbb5a7", + "#ffe7e1" + ] + }, + "bricked-board": { + "role": "neutral", + "displayName": "Bricked Board", + "canonical": "#7a2012", + "tonalRamp": [ + "#1c0201", + "#470d05", + "#732316", + "#9c4031", + "#c16352", + "#df8c7b", + "#f6b8ab", + "#ffe8e2" + ] + }, + "dark-packet": { + "role": "primary", + "displayName": "Dark Packet", + "canonical": "#691b0f", + "tonalRamp": [ + "#1b0302", + "#441109", + "#6e281d", + "#964537", + "#bb6858", + "#d98f80", + "#f1baaf", + "#ffe8e4" + ] + }, + "daemon-blood": { + "role": "neutral", + "displayName": "Daemon Blood", + "canonical": "#57170d", + "tonalRamp": [ + "#190503", + "#40160e", + "#692e23", + "#904b3e", + "#b36d5f", + "#d29386", + "#ecbcb3", + "#fde9e5" + ] + }, + "bad-sector": { + "role": "neutral", + "displayName": "Bad Sector", + "canonical": "#46120a", + "tonalRamp": [ + "#170604", + "#3d1913", + "#633229", + "#894f44", + "#ad7065", + "#cc968b", + "#e7beb6", + "#fbeae7" + ] + }, + "core-meltdown": { + "role": "neutral", + "displayName": "Core Meltdown", + "canonical": "#340d07", + "tonalRamp": [ + "#150705", + "#381c17", + "#5d362e", + "#82534a", + "#a4756b", + "#c49990", + "#e1c1ba", + "#f9ebe8" + ] + }, + "null-pointer": { + "role": "neutral", + "displayName": "Null Pointer", + "canonical": "#230905", + "tonalRamp": [ + "#120806", + "#331f1b", + "#563a34", + "#795851", + "#9b7971", + "#bc9d96", + "#dac3be", + "#f6ecea" + ] + }, + "event-horizon": { + "role": "primary", + "displayName": "Event Horizon", + "canonical": "#110402", + "tonalRamp": [ + "#100908", + "#2e221e", + "#4f3d38", + "#705c56", + "#927d77", + "#b3a09b", + "#d4c6c1", + "#f3edeb" + ] + }, + "memory-leek": { + "role": "secondary", + "displayName": "Memory Leek", + "canonical": "#8fa667", + "tonalRamp": [ + "#080e00", + "#1e2a02", + "#384911", + "#556a2d", + "#768c50", + "#9aae7a", + "#c1d0aa", + "#ebf1e2" + ] + }, + "dim-memory-leek": { + "role": "secondary", + "displayName": "Dim Memory Leek", + "canonical": "#627247", + "tonalRamp": [ + "#090d03", + "#20290e", + "#3a4823", + "#58683e", + "#79895f", + "#9dac86", + "#c3ceb3", + "#ecf0e5" + ] + }, + "bright-memory-leek": { + "role": "secondary", + "displayName": "Bright Memory Leek", + "canonical": "#94a577", + "tonalRamp": [ + "#090d02", + "#20290d", + "#3b4822", + "#59683d", + "#7a895e", + "#9dac85", + "#c3ceb2", + "#ecf0e5" + ] + }, + "stack-overglow": { + "role": "secondary", + "displayName": "Stack Overglow", + "canonical": "#d4a759", + "tonalRamp": [ + "#150800", + "#381f00", + "#5d3a00", + "#825800", + "#a47a2c", + "#c49f60", + "#e0c59a", + "#f8eddc" + ] + }, + "dim-stack-overglow": { + "role": "secondary", + "displayName": "Dim Stack Overglow", + "canonical": "#a07e43", + "tonalRamp": [ + "#130900", + "#352100", + "#583c00", + "#7b5b1e", + "#9d7c44", + "#bea070", + "#dbc6a4", + "#f6eddf" + ] + }, + "bright-stack-overglow": { + "role": "secondary", + "displayName": "Bright Stack Overglow", + "canonical": "#d3ae6e", + "tonalRamp": [ + "#130900", + "#352000", + "#593c00", + "#7c5b16", + "#9e7c3f", + "#bea06d", + "#dcc6a1", + "#f6edde" + ] + }, + "blue-screen": { + "role": "tertiary", + "displayName": "Blue Screen", + "canonical": "#8791b0", + "tonalRamp": [ + "#080b13", + "#1f2436", + "#394159", + "#57607d", + "#78819f", + "#9ca4bf", + "#c2c9dc", + "#ebeef6" + ] + }, + "dim-blue-screen": { + "role": "tertiary", + "displayName": "Dim Blue Screen", + "canonical": "#60677c", + "tonalRamp": [ + "#090b11", + "#202531", + "#3c4153", + "#5a6175", + "#7b8297", + "#9ea5b8", + "#c4c9d7", + "#eceef4" + ] + }, + "bright-blue-screen": { + "role": "tertiary", + "displayName": "Bright Blue Screen", + "canonical": "#999eaf", + "tonalRamp": [ + "#0a0b10", + "#22252e", + "#3e414f", + "#5c6170", + "#7d8292", + "#a0a4b3", + "#c6c9d3", + "#edeef3" + ] + }, + "fractured-shell": { + "role": "tertiary", + "displayName": "Fractured Shell", + "canonical": "#ba5a7d", + "tonalRamp": [ + "#1b020b", + "#450a24", + "#701f41", + "#983c60", + "#bd5f81", + "#dc88a4", + "#f3b5c8", + "#ffe7ee" + ] + }, + "dim-fractured-shell": { + "role": "tertiary", + "displayName": "Dim Fractured Shell", + "canonical": "#87405a", + "tonalRamp": [ + "#18040b", + "#3f1324", + "#672a41", + "#8e4760", + "#b26881", + "#d18fa4", + "#ebbac8", + "#fde8ee" + ] + }, + "bright-fractured-shell": { + "role": "tertiary", + "displayName": "Bright Fractured Shell", + "canonical": "#ba6b88", + "tonalRamp": [ + "#18030b", + "#401225", + "#682842", + "#8f4562", + "#b36783", + "#d28ea6", + "#ecb9c9", + "#fee8ef" + ] + }, + "dead-thread": { + "role": "secondary", + "displayName": "Dead Thread", + "canonical": "#6fa5a0", + "tonalRamp": [ + "#010e0d", + "#062b29", + "#1b4b47", + "#376c68", + "#5a8d89", + "#83afab", + "#b1d1cd", + "#e5f2f0" + ] + }, + "dim-dead-thread": { + "role": "secondary", + "displayName": "Dim Dead Thread", + "canonical": "#4c726e", + "tonalRamp": [ + "#030e0c", + "#122a28", + "#284946", + "#446966", + "#658b87", + "#8cada9", + "#b7cfcc", + "#e7f1f0" + ] + }, + "bright-dead-thread": { + "role": "secondary", + "displayName": "Bright Dead Thread", + "canonical": "#7fa5a1", + "tonalRamp": [ + "#040d0c", + "#122a28", + "#294946", + "#456966", + "#678b87", + "#8daca9", + "#b8cfcc", + "#e8f1f0" + ] + }, + "thermal-throttle": { + "role": "tertiary", + "displayName": "Thermal Throttle", + "canonical": "#d78556", + "tonalRamp": [ + "#1a0400", + "#431400", + "#6d2c00", + "#954916", + "#b96c3e", + "#d7926c", + "#f0bda1", + "#ffeade" + ] + }, + "dim-thermal-throttle": { + "role": "tertiary", + "displayName": "Dim Thermal Throttle", + "canonical": "#ac6d4a", + "tonalRamp": [ + "#170600", + "#3e1902", + "#653212", + "#8b502d", + "#af714f", + "#ce9779", + "#e8bfaa", + "#fcebe2" + ] + }, + "bright-thermal-throttle": { + "role": "tertiary", + "displayName": "Bright Thermal Throttle", + "canonical": "#d6926b", + "tonalRamp": [ + "#180600", + "#3f1900", + "#66310d", + "#8d4f29", + "#b0714c", + "#cf9676", + "#e9bfa8", + "#fceae1" + ] + } + }, + "typographyMeta": { + "display": { + "displayName": "Display", + "purpose": "The h1. Used once per page for the logo/title. Tracked wide to read like embossed lettering on a server panel." + }, + "headline": { + "displayName": "Headline", + "purpose": "Section titles (h2). Same family as Display, smaller and less tracked." + }, + "title": { + "displayName": "Title", + "purpose": "Card headers, code-block titles, panel labels. Small, dense, tracked. The workhorse label voice." + }, + "body": { + "displayName": "Body", + "purpose": "Running text, descriptions, documentation. Warm slab serif at 500 weight, comfortable over long sessions." + }, + "label": { + "displayName": "Label", + "purpose": "Tags, badges, version indicators. The smallest tracked voice." + }, + "mono": { + "displayName": "Mono", + "purpose": "Code blocks, terminal output, hex values. Tabular numerals, no hyphenation." + } + }, + "shadows": [ + { + "name": "offset-sm", + "value": "2px 2px 0 0 #46120a", + "purpose": "Default elevation for cards and code blocks at rest." + }, + { + "name": "offset-md", + "value": "3px 3px 0 0 #46120a", + "purpose": "Elevated surfaces, terminals, and palette sections." + }, + { + "name": "offset-lg", + "value": "4px 4px 0 0 #46120a", + "purpose": "Lightbox images and primary call-to-action emphasis." + }, + { + "name": "hover-md", + "value": "4px 4px 0 0 #46120a", + "purpose": "Hover state. Offset grows by 2px on both axes." + }, + { + "name": "active", + "value": "0 0 0 0 #46120a", + "purpose": "Pressed state. Offset collapses to zero; the element sits flush against the surface." + }, + { + "name": "glow-sm", + "value": "0 0 10px rgba(175, 46, 26, 0.4)", + "purpose": "Subtle brand-colour glow on hovered primary buttons and focused accent elements." + }, + { + "name": "glow-md", + "value": "0 0 20px rgba(175, 46, 26, 0.4)", + "purpose": "Stronger glow for lightbox images and hero-level emphasis." + }, + { + "name": "inner-highlight", + "value": "inset 0 1px 0 rgba(255, 255, 255, 0.1)", + "purpose": "Faint light-line at the top edge of raised surfaces; stacked under the offset shadow, the two travel together." + }, + { + "name": "inner-lowlight", + "value": "inset 0 -1px 0 rgba(17, 4, 2, 0.6)", + "purpose": "Inverse shade at the bottom edge of wells, toggle thumbs, and slider thumbs. Paired with the inner highlight on machined parts." + }, + { + "name": "accent", + "value": "5px 5px 0 0 #af2e1a", + "purpose": "Offset in the brand colour for primary buttons and brand-level emphasis." + } + ], + "motion": [ + { + "name": "ease-default", + "value": "cubic-bezier(0.4, 0, 0.2, 1)", + "purpose": "Default easing for state transitions." + }, + { + "name": "ease-out-expo", + "value": "cubic-bezier(0.22, 1, 0.36, 1)", + "purpose": "Entrance animations (typeIn)." + }, + { + "name": "duration-fast", + "value": "150ms", + "purpose": "Hover, focus, and micro-feedback transitions. The press cycle runs at this speed." + }, + { + "name": "duration-normal", + "value": "250ms", + "purpose": "Standard state transitions." + }, + { + "name": "duration-slow", + "value": "400ms", + "purpose": "Entrance and reveal animations." + }, + { + "name": "transition-fast", + "value": "150ms cubic-bezier(0.4, 0, 0.2, 1)", + "purpose": "Composed fast transition used by the press cycle on interactive elements." + }, + { + "name": "transition-normal", + "value": "250ms cubic-bezier(0.4, 0, 0.2, 1)", + "purpose": "Composed standard transition." + } + ], + "breakpoints": [ + { + "name": "sm", + "value": "480px", + "purpose": "Small mobile / narrow viewport." + }, + { + "name": "md", + "value": "768px", + "purpose": "Tablet / compact layout; code blocks drop to 0.75rem below this." + } + ] + }, + "components": [ + { + "name": "Primary Button", + "kind": "button", + "refersTo": "btn-primary", + "description": "The brand identity button. Digital Rust background, thick border, offset shadow with inner-highlight bevel, physical press response. One per view.", + "html": "", + "css": ".ds-btn-primary { background: #af2e1a; color: #f7eae8; padding: 0.5rem 1.5rem; border: 2px solid #af2e1a; border-radius: 4px; font-family: \"Rajdhani\", \"Saira SemiCondensed\", \"Trebuchet MS\", sans-serif; font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; box-shadow: 3px 3px 0 0 #46120a, inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1); } .ds-btn-primary:hover { background: #b74230; border-color: #b74230; transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 #46120a, 0 0 10px rgba(175, 46, 26, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .ds-btn-primary:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 #46120a; } .ds-btn-primary:focus-visible { outline: 2px solid #d4a759; outline-offset: 2px; }" + }, + { + "name": "Ghost Button", + "kind": "button", + "refersTo": "btn", + "description": "The default/secondary button. Transparent background, Dark Packet border, offset shadow with inner highlight; hover fills Core Meltdown with a Digital Rust edge.", + "html": "", + "css": ".ds-btn-ghost { background: transparent; color: #efd5d1; padding: 0.5rem 1.5rem; border: 2px solid #691b0f; border-radius: 4px; font-family: \"Rajdhani\", \"Saira SemiCondensed\", \"Trebuchet MS\", sans-serif; font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; box-shadow: 2px 2px 0 0 #46120a, inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1); } .ds-btn-ghost:hover { background: #340d07; border-color: #af2e1a; color: #f7eae8; transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 #46120a, inset 0 1px 0 rgba(255, 255, 255, 0.1); } .ds-btn-ghost:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 #46120a; } .ds-btn-ghost:focus-visible { outline: 2px solid #d4a759; outline-offset: 2px; }" + }, + { + "name": "Card", + "kind": "card", + "refersTo": "spec-card", + "description": "Workhorse container with thick borders, offset shadow, and inner highlight. Presses in on active like a bolted rack module.", + "html": "

PRIORITY STACK

Error scopes override everything with Amber Alert

", + "css": ".ds-card { background: #340d07; border: 2px solid #691b0f; border-radius: 4px; padding: 1.5rem; box-shadow: 2px 2px 0 0 #46120a, inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1); } .ds-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 #46120a; } .ds-card:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 #46120a; } .ds-card-title { color: #cf8175; margin-bottom: 0.5rem; font-size: 0.875rem; letter-spacing: 0.05em; text-transform: uppercase; font-family: \"Rajdhani\", \"Saira SemiCondensed\", \"Trebuchet MS\", sans-serif; font-weight: 700; } .ds-card-body { color: #f7eae8; font-size: 1rem; line-height: 1.6; font-family: \"Zilla Slab\", \"Bitter\", \"Source Serif 4\", Georgia, serif; }" + }, + { + "name": "Badge - Success", + "kind": "chip", + "refersTo": "badge", + "description": "Semantic success indicator with Memory Leek tint. Static: no press cycle, no shadow.", + "html": "GIT ADDED", + "css": ".ds-badge-success { border-radius: 4px; padding: 0.2rem 0.6rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-family: \"Rajdhani\", \"Saira SemiCondensed\", \"Trebuchet MS\", sans-serif; border: 1px solid rgba(143, 166, 103, 0.3); background: rgba(143, 166, 103, 0.15); color: #8fa667; }" + }, + { + "name": "Badge - Info", + "kind": "chip", + "refersTo": "badge", + "description": "Semantic informational indicator with Dead Thread tint. Static: no press cycle, no shadow.", + "html": "MODIFIED", + "css": ".ds-badge-info { border-radius: 4px; padding: 0.2rem 0.6rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-family: \"Rajdhani\", \"Saira SemiCondensed\", \"Trebuchet MS\", sans-serif; border: 1px solid rgba(111, 165, 160, 0.3); background: rgba(111, 165, 160, 0.15); color: #6fa5a0; }" + }, + { + "name": "Badge - Warning", + "kind": "chip", + "refersTo": "badge", + "description": "Semantic warning indicator with Stack Overglow tint. Static: no press cycle, no shadow.", + "html": "DEPRECATED", + "css": ".ds-badge-warning { border-radius: 4px; padding: 0.2rem 0.6rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-family: \"Rajdhani\", \"Saira SemiCondensed\", \"Trebuchet MS\", sans-serif; border: 1px solid rgba(212, 167, 89, 0.3); background: rgba(212, 167, 89, 0.15); color: #d4a759; }" + }, + { + "name": "Badge - Error", + "kind": "chip", + "refersTo": "badge", + "description": "Semantic error indicator. Amber Alert Text on a 10% Amber Alert tint — the AA-compliant text variant, never the raw colour.", + "html": "GIT DELETED", + "css": ".ds-badge-error { border-radius: 4px; padding: 0.2rem 0.6rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-family: \"Rajdhani\", \"Saira SemiCondensed\", \"Trebuchet MS\", sans-serif; border: 1px solid rgba(191, 87, 71, 0.25); background: rgba(191, 87, 71, 0.1); color: #cb6353; }" + }, + { + "name": "Text Input (Well)", + "kind": "input", + "refersTo": null, + "description": "Recessed well: the darkest surface on the page, no offset shadow, no lift. Responds through border colour only (Bad Sector rest, Dark Packet hover, Digital Rust focus).", + "html": "", + "css": ".ds-input { background: #110402; border: 2px solid #46120a; border-radius: 4px; padding: 0.5rem 0.75rem; color: #f7eae8; font-family: \"Zilla Slab\", \"Bitter\", \"Source Serif 4\", Georgia, serif; font-size: 1rem; transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1); } .ds-input:hover:not(:focus) { border-color: #691b0f; } .ds-input:focus { outline: 2px solid #d4a759; outline-offset: 2px; border-color: #af2e1a; } .ds-input::placeholder { color: rgba(239, 213, 209, 0.5); font-style: italic; }" + }, + { + "name": "Navigation Link", + "kind": "nav", + "refersTo": null, + "description": "Phantom Current with a 1px underline at 3px offset. Hover shifts to Fatal Error with a 2px underline; visited is Corrupted Cache.", + "html": "Read the specification", + "css": ".ds-link { color: #e7c0ba; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; font-family: \"Zilla Slab\", \"Bitter\", \"Source Serif 4\", Georgia, serif; transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1); } .ds-link:hover { color: #cf8175; text-decoration-thickness: 2px; } .ds-link:visited { color: #dfaba3; } .ds-link:focus-visible { outline: 2px solid #d4a759; outline-offset: 2px; }" + }, + { + "name": "Terminal", + "kind": "custom", + "refersTo": "terminal", + "description": "The brand's signature interactive metaphor. Fake terminal running spec validation commands, with a Stack Overglow block cursor.", + "html": "
● ● ●
digitalrust@entropy:~$ theme audit --strict
Syntax Coverage ........ PASS
digitalrust@entropy:~$
", + "css": ".ds-terminal { background: #110402; border: 2px solid #691b0f; border-radius: 6px; padding: 1.5rem; position: relative; overflow: hidden; box-shadow: 3px 3px 0 0 #46120a, inset 0 1px 0 rgba(255, 255, 255, 0.1); } .ds-terminal-dots { position: absolute; top: 0; left: 0; right: 0; padding: 0.5rem 1rem; background: #340d07; color: #af2e1a; border-bottom: 1px solid #46120a; font-size: 0.75rem; letter-spacing: 0.5rem; } .ds-terminal-body { margin-top: 2rem; font-family: \"IBM Plex Mono\", \"Space Mono\", ui-monospace, \"Fira Code\", monospace; font-size: 0.875rem; line-height: 1.6; } .ds-terminal-prompt { color: #e7c0ba; } .ds-terminal-cmd { color: #f7eae8; } .ds-terminal-output { color: #efd5d1; margin-left: 2rem; opacity: 0.95; } .ds-terminal-pass { color: #8fa667; font-weight: 700; } .ds-terminal-cursor { display: inline-block; width: 0.6em; height: 1.2em; background: #d4a759; vertical-align: text-bottom; }" + } + ], + "narrative": { + "northStar": "The Corroded Mainframe", + "overview": "A server room where every surface has oxidized, but the machines still hum. The walls are rust; the screens still glow. Failure is the texture, not the state.\n\nDigital Rust is a dark-mode-only system built around a single rust-to-void gradient: warm copper tones that bleed from near-white to near-black through 19 named stops, each one a hardware failure metaphor. The accent colours (Memory Leek, Stack Overglow, Dead Thread, Blue Screen, Fractured Shell, Thermal Throttle) are named after system crashes and injected surgically, never as a rainbow. Surfaces carry structural noise and scanline overlays; flat, noiseless backgrounds are a design failure. Borders are thick and heavy (2-4px Dark Packet), shadows are offset solids with no blur, corners never exceed 6px radius. Every component feels like a physical panel in a failing server rack: brutalist, tactile, press-and-release.\n\nThe system explicitly rejects the cold blue-purple dark theme family (Dracula, Nord, Tokyo Night, One Dark) and any sterile \"pro\" aesthetic with gray surfaces and blue accents. Pure black (`#000`) is forbidden in shadows and backgrounds, replaced by the warm near-blacks of the rust ramp. The hostility is in the atmosphere, not the readability: Ghost Pixel on Event Horizon hits 17.17:1 contrast ratio.", + "keyCharacteristics": [ + "Single-hue warm ramp (copper/rust/bone) as the structural spine, not a multi-hue palette", + "Offset solid shadows (no blur) that serve both interaction feedback and the corroded machine aesthetic", + "Structural noise and scanline overlays on every surface; silence them only for `prefers-reduced-motion`", + "Borders as heavy structural elements (2-4px Dark Packet), never decorative hairlines", + "Accent colours named after system failures, used surgically for syntax and diagnostics", + "Radius ceiling of 6px; nothing rounds past \"gently chamfered\"" + ], + "rules": [ + { + "name": "The One Hue Rule", + "body": "The 19-stop main ramp occupies a single warm hue family. Accents are admitted in six named failure families, but the surface itself never leaves the rust-to-void gradient. If a background or border colour is not one of the 19 ramp stops or one of the 6 accent families, it does not belong in the system.", + "section": "colors" + }, + { + "name": "The Black Is Forbidden Rule", + "body": "`#000000` is prohibited in shadows, borders, and backgrounds. The nearest near-black is Event Horizon (`#110402`). Shadows, overlays, and vignettes use warm-tinted transparencies of the brand colour: `rgba(175, 46, 26, ...)`. Pure black reads as a different material; this system has no cold materials.", + "section": "colors" + }, + { + "name": "The Flat Surface Failure Rule", + "body": "A flat, noiseless dark surface with no texture overlay is a design defect. Every ambient surface carries the SVG noise texture (opacity 0.02) and scanline overlay. These are structural, not decorative. The sole exemptions are interactive text surfaces (inputs, text areas, editable code regions), which stay clean for legibility, and `prefers-reduced-motion: reduce`, which silences all overlays.", + "section": "colors" + }, + { + "name": "The One Heading Colour Rule", + "body": "Fatal Error (`#cf8175`) is the only colour used for headings of any level. Not white, not Ghost Pixel, not the accent colours. Every heading speaks in the same warm-copper voice. If a heading is not Fatal Error, it is not a heading.", + "section": "typography" + }, + { + "name": "The All-Caps Ceiling Rule", + "body": "Rajdhani headings and labels are set in all-caps with wide tracking. This is an intentional, restricted choice for short strings (titles, labels, badges). Body copy is never all-caps. A sentence in all-caps at body size is unreadable and prohibited.", + "section": "typography" + }, + { + "name": "The No Blur Rule", + "body": "`box-shadow` blur radius is zero for all structural shadows. The only blur in the system is the glow shadow (which simulates light, not material depth). If a shadow has a non-zero blur and is not a glow, it does not belong.", + "section": "elevation" + }, + { + "name": "The Press-And-Release Rule", + "body": "Interactive elements with offset shadows must implement the full hover-then-press cycle: rest has offset, hover grows offset by 2px on both axes and lifts the element `translate(-2px, -2px)`, active collapses offset to zero and drives the element `translate(2px, 2px)` into the surface. The state transition must use `--dr-transition-fast` (150ms).", + "section": "elevation" + }, + { + "name": "The Recessed Well Rule", + "body": "Inputs, text areas, and editable code regions sit *below* the panel, not above it: Event Horizon background, 2px Bad Sector border, no offset shadow, no lift on hover. Wells respond through border colour (Bad Sector rest, Dark Packet hover, Digital Rust focus). They are exempt from noise and scanline texture; legibility outranks atmosphere inside a text field.", + "section": "elevation" + } + ], + "dos": [ + "Do use the 19-stop rust ramp as the only neutral scale. There is no separate gray ramp; the warm stops from Ghost Pixel to Event Horizon are the neutrals.", + "Do enforce WCAG 2.1 AA contrast on all text. Ghost Pixel on Event Horizon (17.17:1) is the baseline; Dim Thermal Throttle on Event Horizon (4.84:1) is the darkest acceptable body text.", + "Do use noise and scanline overlays on every surface. They are structural, not decorative. A flat noiseless dark background is a defect.", + "Do use offset solid shadows (no blur) in Bad Sector for material depth. Grow offset on hover, collapse on active to simulate a physical press.", + "Do use thick borders (2-4px Dark Particle) as structural elements. Borders are walls, not decoration.", + "Do keep radius at 2-6px. Nothing rounds past \"gently chamfered\". A 16px+ radius on a card or panel is a different design system.", + "Do name accent colours after system failures (Memory Leek, Stack Overglow, Dead Thread, Blue Screen, Fractured Shell, Thermal Throttle). New accents get parallel naming.", + "Do use wavy underlines for diagnostics (Amber Alert wavy for errors, Stack Overglow wavy for warnings) and solid underlines for links. The underline style carries semantic information.", + "Do implement the full hover-then-press cycle on all interactive elements: rest offset, hover offset grows, active offset collapses.", + "Do suppress noise, scanlines, and all animations for `prefers-reduced-motion: reduce`. The content must be fully visible without the animation.", + "Do keep surface-background tints for badges/diagnostics at 10-15% opacity of the named colour. This is enough to carry the semantic tint without competing with the ramp." + ], + "donts": [ + "Don't use pure black (`#000000`) in shadows, borders, or backgrounds. The system has no cold materials. Use Event Horizon (`#110402`) or warm-tinted transparencies of the brand colour.", + "Don't use blurred drop shadows. The only blur in the system is the glow effect (`0 0 Npx rgba(175, 46, 26, 0.4)`), which simulates radiated heat, not material depth.", + "Don't use Dracula, Nord, Tokyo Night, One Dark, or any cold/blue/purple dark theme aesthetic. Those are the explicit anti-references. Cool tones are the opposite of the corroded mainframe.", + "Don't use flat, noiseless dark surfaces without the SVG noise and scanline overlays. Remove only for `prefers-reduced-motion`.", + "Don't use colours outside the 19 ramp stops and 6 accent families. If a colour is not in the palette, it does not belong. Extend the palette deliberately, not by accident.", + "Don't use Fatal Error (`#cf8175`) for body text or link text. It is reserved for headings and keyword tokens. Body text uses Ghost Pixel or Phosphor Smoke; links use Phantom Current.", + "Don't set body copy in all-caps. Rajdhani all-caps with wide tracking is for headings and labels only (4 words or fewer for labels).", + "Don't use `border-left` or `border-right` greater than 1px as a coloured accent stripe on cards, list items, or callouts. The section-title left border is a rare deliberate exception.", + "Don't use border-radius above 6px on any card, panel, or container. Full-pill radius is acceptable for small inline elements (badges, tags) only.", + "Don't place a 1px border and a wide soft shadow on the same element. Pick one: a solid thick border at the brand colour, or a defined offset shadow at no more than 8px offset. Never both as decoration." + ] + } } diff --git a/.impeccable/live/config.json b/.impeccable/live/config.json index bd9a444..4419c78 100644 --- a/.impeccable/live/config.json +++ b/.impeccable/live/config.json @@ -1,6 +1,6 @@ { - "files": ["*.html"], - "insertBefore": "", - "commentSyntax": "html", - "cspChecked": true + "files": ["*.html"], + "insertBefore": "", + "commentSyntax": "html", + "cspChecked": true } diff --git a/.prettierignore b/.prettierignore index ab8a9a5..3dfe78c 100644 --- a/.prettierignore +++ b/.prettierignore @@ -7,4 +7,12 @@ bun.lockb # Miscellaneous /static/ -src/lib/generated/ +/src/lib/generated/ + +# Canonical hand-maintained documents; Prettier does not touch them +/Digital Rust Syntax Highlighting Specification.md +/Digital Rust UI Specification.md +/DESIGN.md +/PRODUCT.md +/AGENTS.md +/README.md diff --git a/AGENTS.md b/AGENTS.md index 509ad9c..4bda027 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -1,26 +1,35 @@ # AGENTS.md -Digital Rust is a colour scheme, not an app. The deliverables are the palette itself: static HTML/CSS showcase pages at the repo root, terminal/editor port files in `ports/`, and a Svelte playground in `playground/` for previewing syntax highlighting. There is no test suite and no CI; verification is visual plus the commands below. +Digital Rust is a colour scheme, not an app. The deliverables are the palette itself: this SvelteKit static site (prerendered to `build/`), terminal/editor port files in `static/ports/`, and the two canonical spec documents at the repo root. There is no test suite and no CI; verification is visual plus the commands below. ## Commands -- `cd playground && pnpm install` — package manager is **pnpm** (switched from npm in 3a364ab; `package-lock.json` is gitignored, never commit one). -- `pnpm dev` / `pnpm build` / `pnpm check` (run inside `playground/`) — `check` is `svelte-check` + `tsc`; use it as the typecheck/lint step. -- Root site (`index.html`, `spec.html`) is plain static files. Serve with any static server (e.g. `python -m http.server`) — no build step exists. +- `pnpm install` — package manager is **pnpm**; never commit a `package-lock.json`. +- `pnpm dev` / `pnpm build` / `pnpm preview` — output is fully static in `build/`. +- `pnpm check` — svelte-check + tsc. `pnpm lint` — prettier + eslint. Run both before committing. ## Palette changes (the critical workflow) -The palette is duplicated by hand across ~8 files. When adding or changing a colour/token, update **all** of these or they silently drift apart: +`src/lib/palette.ts` is the site's single source of truth for hex values. It generates `src/lib/generated/tokens.css` (a vite plugin regenerates it on dev/build; the file is gitignored — never edit it directly) and feeds the Shiki theme in `src/lib/theme/digital-rust-theme.ts` and every palette-driven component. -- `Digital Rust Syntax Highlighting Specification.md` — canonical syntax/palette spec (hex tables, scope→colour mappings) -- `Digital Rust UI Specification.md` — canonical UI spec (surfaces, elevation, interaction physics, component definitions); demonstrated live on `ui.html` -- `tokens.css` — CSS custom properties; semantic tokens (`--dr-*`) reference named ramp vars, so edit the named var, not the alias -- `DESIGN.md` — YAML front matter holds the design-token copy of the palette -- `playground/src/lib/digital-rust-theme.ts` — Shiki/TextMate theme object -- `ports/` — each port file (Konsole, KDE, Kate, fish, Ptyxis, `digitalrustpi/digital-rust.json`) hardcodes hex values in its own format -- `.impeccable/design.json` — generated design-system metadata with tonal ramps +Outside the site, hexes are still duplicated by hand. When you add or change a colour/token, also update: -Hex values are the single source of truth across all formats; names (Ghost Pixel, Event Horizon, ...) are stable identifiers — never rename one without updating the spec, site copy, and all ports. +- `Digital Rust Syntax Highlighting Specification.md` — canonical syntax/palette spec +- `Digital Rust UI Specification.md` — canonical UI spec +- `DESIGN.md` — YAML front matter holds the design-token copy +- `static/ports/` — each port file hardcodes hexes in its own format +- `.impeccable/design.json` — generated design-system metadata (local tooling; see below) + +Names (Ghost Pixel, Event Horizon, ...) are stable identifiers — never rename one without updating the spec, site copy, and all ports. + +## Spec pages render from markdown + +`/spec` renders `Digital Rust Syntax Highlighting Specification.md` at build time (`src/lib/spec/render-spec.ts`). The markdown is canonical; edit the .md, not the page. Gotchas: + +- The build throws if the marker sections vanish: the spec must keep an H1 followed by a lede paragraph and an `## Overview` section, because the meta bar and live-demo component are spliced in after them. +- Palette tables are recognised by a `Hex Code` first header cell and get card grids generated above them. Keep that column first. +- Both spec .md files are served as downloads via prerendered `+server.ts` routes under `/spec/`. +- The two spec .md files, DESIGN.md, PRODUCT.md, AGENTS.md and README.md are in `.prettierignore` on purpose. `pnpm format` must not reflow them. ## Hard constraints (from DESIGN.md/PRODUCT.md — enforced by review, not tooling) @@ -33,8 +42,9 @@ Hex values are the single source of truth across all formats; names (Ghost Pixel ## Gotchas -- `pnpm-workspace.yaml` in `playground/` only sets `minimumReleaseAgeExclude` for an exact pinned svelte version — if you bump svelte, update that entry too or pnpm may refuse to install it. -- Playground `vite.config.ts` uses `base: './'` deliberately — the build is served from a subpath; don't change to `/`. -- `.impeccable/` and `.crush/` are local tooling state, not project source — don't edit or commit changes there. -- The repo's public mirror is Tangled (`tangled.org/katsuricata.com/DigitalRust`); `index.html` links to ports by relative path, so new ports need both a file in `ports/` and a link in `index.html` (and the downloads section of `spec.html` if applicable). -- EditorConfig: tabs, size 4 — match it in CSS/HTML/MD even where existing files mix styles. +- Kit 3 uses `#lib/*` (package.json imports), not `$lib`. Import TS modules with a `.js` suffix: `import { color } from '#lib/palette.js'`. +- `trailingSlash = 'always'` gives every route a directory URL (`/spec/`, `/ui/`, `/playground/`) that works on any static server. `static/spec.html` and `static/ui.html` are meta-refresh stubs for old bookmarks — keep them. +- Component styles in `.svelte` files are scoped; styles for `{@html}` content (the spec body) must live in `src/lib/styles/spec.css`, which loads only on `/spec`. +- `.impeccable/` and `.crush/` are local tooling state — don't edit or commit changes there. +- The repo's public mirror is Tangled (`tangled.org/katsuricata.com/DigitalRust`). New ports need a file in `static/ports/` and a link in the port list in `src/routes/+page.svelte`. +- EditorConfig: tabs, size 4. Prettier enforces it for everything outside `.prettierignore`. diff --git a/index.html b/index.html deleted file mode 100644 index 83a9215..0000000 --- a/index.html +++ /dev/null @@ -1,878 +0,0 @@ - - - - - - - Digital Rust / Demonstration - - - - - - - - - - - - - - - - -
-
-

DIGITAL RUST

- Spec v1.2.2 -
Syntax · UI · Terminal
-
A warm, tech-dystopian color scheme inspired by corrupted hardware and failing systems. -
- -
- -
-
-
- digitalrust@entropy:~$ - cat DIGITAL_RUST_SPEC.md | verify --strict -
-
- fingerprint: 0xDR-1.2.2
- updated: 2025-11-29
- priority-order: errors > warnings > semantic > textmate -
- -
- digitalrust@entropy:~$ - theme audit --sections syntax ui terminal accessibility -
-
- Syntax Coverage ........ PASS
- UI Surfaces ............ PASS
- ANSI Map ............... PASS
- Non-color cues ......... PASS -
- -
- digitalrust@entropy:~$ - tail -n4 /var/log/digital-rust -
-
- [OK] WCAG contrast ≥ 4.5:1 enforced
- [OK] Markdown + JSON + Diff snapshots loaded
- [OK] Terminal ANSI pairs bound to palette
- [!] Remember: errors outrank keywords -
- -
- digitalrust@entropy:~$ - -
-
-
- -
-

Spec Guarantees

-
-
-

Priority Stack

-
    -
  • Error scopes override everything with Amber Alert
  • -
  • Warnings inherit Stack Overglow with wavy underline
  • -
  • Semantic tokens fall back to TextMate colors when absent
  • -
-
-
-

Language Coverage

-
    -
  • TypeScript · Python · Rust · Markdown · JSON/TOML
  • -
  • HTML/CSS · SQL · Shell · Diff/SCM views
  • -
  • Template + decorator scopes, regex, interpolation
  • -
-
-
-

Editor & UI

-
    -
  • Tabs, gutter, minimap, status bar, panels
  • -
  • Diagnostics + git markers reuse ANSI cues
  • -
  • Focus rings + disabled states meet contrast rules
  • -
-
-
-

Accessibility

-
    -
  • Solid vs. wavy underline separates links/errors
  • -
  • Color-blind safe via redundant icons + patterns
  • -
  • Documented contrast pairs for auditing
  • -
-
-
-
- -
-

Theme Preview

-
- VS Code window using Digital Rust theme with Rust sample code open - Linux desktop with Digital Rust wallpaper and terminal window running theme audit - KDE color scheme editor window displaying the Digital Rust theme palette with preview swatches for UI elements - Linux desktop terminal using the Digital Rust, showing a fastfetch system overview with hardware specs and ASCII logo -
-
- - - - - - - - -
-

Token Classification Map

-

- Each card renders the canonical color, name, and example scopes. Sigils inherit their parent token color - per - spec. -

-
-
-
- Keywords & Storage - Fatal Error · #cf8175 -
-

Control flow, modifiers, `try/catch`, storage types.

-
- class - return - await -
-
-
-
- Functions & Macros - Stack Overglow · - #d4a759 -
-

User functions, built macros, shell commands.

-
- renderTheme() - println! - COUNT -
-
-
-
- Classes & Types - Dead Thread · #6fa5a0 -
-

Types, interfaces, trait names, lifetimes.

-
- SystemState - bool - 'static -
-
-
-
- Strings & Regex - Memory Leek · #8fa667 -
-

Literal text, heredocs, regex bodies & groups.

-
- "corrupted" - /kernel.+panic/ -
-
-
-
- Numbers & Units - Thermal Throttle · - #d78556 -
-

Integers, floats, hex, CSS units, rgb values.

-
- 0xDEADBEEF - 42 - 85.5°C -
-
-
-
- Constants & Specials - Bright Stack Overglow - · - #d3ae6e -
-

Booleans, null-like, enum values, magic names.

-
- true - None - Status::OK -
-
-
-
- Comments & Docs - Dim Thermal · - #ac6d4a -
-

Inline comments, docstrings, shebangs (italic).

-
- // note - #!/bin/bash -
-
-
-
- Decorators & Attributes - Dead Thread · #6fa5a0 -
-

Python decorators, Rust attributes, JSX props.

-
- @dataclass - #[cfg(test)] -
-
-
-
- Support & Built-ins - Dim Stack Overglow · - #a07e43 -
-

Standard library functions, DOM globals, HTML attributes.

-
- console - print - class -
-
-
-
- Variables & Identifiers - Ghost Pixel · #f7eae8 -
-

Parameters, locals, properties, fallback text.

-
- entropyLevel - error - $PATH -
-
-
-
- Operators & Punctuation - Copper Trace · #d7968c -
-

Brackets, sigils, punctuation, interpolation braces.

-
- === - { } - :: -
-
-
-
- Diagnostics & Errors - Amber Alert · #bf5747 -
-

Wavy underline + icon ensures non-color cues.

-
- panic() - deprecated() -
-
-
-
- -
-

Language Snapshots

-

Nine grammars render simultaneously, satisfying the spec requirement for multi-language verification.

-
-
-
- TypeScript - ES2024 -
-
// Scoped diagnostic enforcing semantic priority
-export class KernelProbe {
-    readonly threshold: number = 85.5
-    async ping(bus: SystemBus): Promise<void> {
-        const reading = await bus.read("temp")
-        if (reading > this.threshold) {
-            throw new Error(`🔥 kernel panic: ${reading}°C`)
-        }
-    }
-}
-
- -
-
- Python - 3.12 -
-
#!/usr/bin/env python3
-"""Digital Rust semantic sample"""
-
-@dataclass
-class Snapshot:
-    name: str
-    ok: bool = True
-
-    def emit(self, metric: float) -> None:
-        print(f"{self.name}: {metric:.2f}")
-
-RUN = Snapshot("ansi-map", True)
-if __name__ == "__main__":
-    RUN.emit(4.50)
-
- -
-
- Rust - 1.76 -
-
// Attributes + lifetimes share Dead Thread
-#[derive(Debug, Clone)]
-pub struct Telemetry<'a> {
-    buffer: &'a [u8],
-    heat: f32,
-}
-
-impl Telemetry<'_> {
-    pub fn check_integrity(&self) -> Result<bool, Error> {
-        if self.heat > 95.0 {
-            return Err(Error::new(ErrorKind::Other, "KERNEL PANIC"))
-        }
-        Ok(true)
-    }
-}
-
- -
-
- Markdown - Spec prose -
-
## Digital Rust Guarantees
-- Tokens inherit `Ghost Pixel` when undefined
-- Links stay underlined [even offline](spec.md)
-> Errors outrank keywords every time.
-
- -
-
- JSON / TOML - Config -
-
{
-  "editor": {
-    "background": "#110402",
-    "cursor": "#D4A759",
-    "useRainbowBrackets": true
-  },
-  "diagnostics": ["error:wavy", "warning:stack"]
-}
-
- -
-
- HTML + CSS - Markup -
-
<section class="panel">
-  <h3>@keyframes glitch</h3>
-</section>
-
-.panel {
-  border: 1px solid var(--dark-packet);
-  color: var(--ghost-pixel);
-}
-
- -
-
- Diff / Git - Unified -
-
@@ -12,6 +12,7 @@
-- panic!("kernel meltdown")
-+ log::warn!("stack overglow engaged")
-  return Ok(())
-
- -
-
- Shell / CLI - Bash -
-
rust@host$ digitalrust --apply --profile="dark"
-rust@host$ export THEME="digital-rust"
-rust@host$ printf "%s\n" $THEME
-
- -
-
- SQL - ANSI -
-
SELECT
-    COUNT(*) AS total_panics
-FROM errors
-WHERE palette = 'digital-rust'
-  AND severity IN ('fatal', 'critical');
-
-
-
- -
-

Main Color Palette

-

Warm rust-to-void gradient used across editor, UI, and docs.

-
-
- Ghost Pixel - #F7EAE8 -
-
- Phosphor Smoke - #EFD5D1 -
-
- Phantom Current - #E7C0BA -
-
- Corrupted Cache - #DFABA3 -
-
- Copper Trace - #D7968C -
-
- Fatal Error - #CF8175 -
-
- Rouge Signal - #C76C5E -
-
- Amber Alert - #BF5747 -
-
- Firewall Breach - #B74230 -
-
- Digital Rust - #AF2E1A -
-
- Kernel Panic - #9D2917 -
-
- Data Rot - #8C2414 -
-
- Bricked Board - #7A2012 -
-
- Dark Packet - #691B0F -
-
- Daemon Blood - #57170D -
-
- Bad Sector - #46120A -
-
- Core Meltdown - #340D07 -
-
- Null Pointer - #230905 -
-
- Event Horizon - #110402 -
-
-
- -
-

ANSI 16-Color Map

-
-
- Black - Event Horizon - #110402 -
-
- Red - Digital Rust - #AF2E1A -
-
- Green - Memory Leek - #8FA667 -
-
- Yellow - Stack Overglow - #D4A759 -
-
- Blue - Blue Screen - #8791B0 -
-
- Magenta - Fractured Shell - #BA5A7D -
-
- Cyan - Dead Thread - #6FA5A0 -
-
- White - Phosphor Smoke - #EFD5D1 -
-
- Bright Black - Bad Sector - #46120A -
-
- Bright Red - Fatal Error - #CF8175 -
-
- Bright Green - Bright Memory Leek - #94A577 -
-
- Bright Yellow - Bright Stack Overglow - #D3AE6E -
-
- Bright Blue - Bright Blue Screen - #999EAF -
-
- Bright Magenta - Bright Fractured Shell - #BA6B88 -
-
- Bright Cyan - Bright Dead Thread - #7FA5A1 -
-
- Bright White - Ghost Pixel - #F7EAE8 -
-
-
- -
-

Editor & UI Surfaces

-
-
-
-
- main.rs - diagnostics.ts - README.md -
- ● MOD -
-
-
- 42 - 43 - 44 - 45 -
-
-
#[cfg(test)]
-
fn assert_entropy() {
-
··assert_eq(true, true);
-
}
-
-
-
- Rust Analyzer - CPU 42% - Git✓ -
-
- -
-

Diff Indicators

-
- Git Added - Git Modified - Git Deleted -
-
-
+ Memory Leek · bg 15%
-
~ Dead Thread · bg 10%
-
- Amber Alert · bg 15%
-
-
- -
-

Diagnostics

-
    -
  • ✗ Kernel panic detected: wavy Amber Alert underline
  • -
  • ⚠ Deprecated API: Stack Overglow underline
  • -
  • ℹ Hint bubbles use Dead Thread
  • -
-
- Inlay hint - parameter: rust -
-
-
-
- -
-

UI Components

-

- The Digital Rust UI Specification: chunky hardware panel switches, recessed input wells, - and the press-and-release cycle. Rest carries an offset shadow and inner-highlight bevel; - hover lifts toward the light; active drives the element into the rack. - Full component gallery → -

-
-
-

Buttons

-
- - -
-
- - - -
-
- -
-

rest: offset-sm + bevel · hover: lift(-2px,-2px) + offset grows · active: press(2px,2px) + collapse

-
- -
-

Inputs — Recessed Wells

-
- - -
-
- - -

✗ Connection refused on port 22

-
-

Event Horizon well · no offset shadow · hover: Dark Packet border · focus: Digital Rust border + Stack Overglow ring

-
- -
-

Checkbox & Toggle

-
- -
-
- -
-
- -
-
- -
-

checkbox runs the full press cycle · toggle thumb slides on a railed track

-
- -
-

Tabs

-
-
- - - -
-
active tab: Null Pointer bg + Digital Rust power rail · hover: Bad Sector fill
-
-
- digitalrust@entropy - CPU 42% - Git✓ -
-
-
-
- -
-

Accessibility & Testing

-
-
-

Contrast Benchmarks

- - - - - - - - - - - - - - - - - - - - - - - - - -
PairRatioStatus
Ghost Pixel on Event Horizon17.17:1Pass
Dim Thermal Throttle on Event Horizon4.84:1Pass
Bad Sector on Core MeltdownDecorative only⚠
-
-
-

Non-Color Cues

-
    -
  • Links Solid underline + Phantom Current
  • -
  • Errors Amber Alert + wavy underline + icon
  • -
  • Warnings Stack Overglow wavy underline
  • -
  • Spelling Amber Alert dotted underline variant
  • -
-
-
-

Test Checklist

-
    -
  • ☑ Five programming languages rendered
  • -
  • ☑ Markdown, JSON, diff, terminal verified
  • -
  • ☑ ANSI 16 + UI chrome demonstrated
  • -
  • ☑ Motion honors user prefers-reduced-motion
  • -
-
-
-
- - -
- - - - diff --git a/normalize.css b/normalize.css deleted file mode 100644 index 52a3fa9..0000000 --- a/normalize.css +++ /dev/null @@ -1,290 +0,0 @@ -/* Document - * ========================================================================== */ - -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in iOS. - */ - -:where(html) { - line-height: 1.15; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - text-size-adjust: 100%; - /* 2 */ -} - -/* Sections - * ========================================================================== */ - -/** - * Remove the margin in all browsers. (opinionated) - */ - -:where(body) { - margin: 0; -} - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Edge, Firefox, and Safari. - */ - -:where(h1) { - font-size: 2em; - margin-block-end: 0.67em; - margin-block-start: 0.67em; -} - -/* Grouping content - * ========================================================================== */ - -/** - * Remove the margin on nested lists in Chrome, Edge, and Safari. - */ - -:where(dl, ol, ul) :where(dl, ol, ul) { - margin-block-end: 0; - margin-block-start: 0; -} - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Correct the inheritance of border color in Firefox. - */ - -:where(hr) { - box-sizing: content-box; - /* 1 */ - color: inherit; - /* 2 */ - height: 0; - /* 1 */ -} - -/* Text-level semantics - * ========================================================================== */ - -/** - * Add the correct text decoration in Safari. - */ - -:where(abbr[title]) { - text-decoration: underline; - text-decoration: underline dotted; -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -:where(b, strong) { - font-weight: bolder; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -:where(code, kbd, pre, samp) { - font-family: monospace, monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/** - * Add the correct font size in all browsers. - */ - -:where(small) { - font-size: 80%; -} - -/* Tabular data - * ========================================================================== */ - -/** - * 1. Correct table border color in Chrome, Edge, and Safari. - * 2. Remove text indentation from table contents in Chrome, Edge, and Safari. - */ - -:where(table) { - border-color: currentColor; - /* 1 */ - text-indent: 0; - /* 2 */ -} - -/* Forms - * ========================================================================== */ - -/** - * Remove the margin on controls in Safari. - */ - -:where(button, input, select) { - margin: 0; -} - -/** - * Remove the inheritance of text transform in Firefox. - */ - -:where(button) { - text-transform: none; -} - -/** - * Correct the inability to style buttons in iOS and Safari. - */ - -:where(button, - input:is([type="button" i], [type="reset" i], [type="submit" i])) { - -webkit-appearance: button; - appearance: button; -} - -/** - * Add the correct vertical alignment in Chrome, Edge, and Firefox. - */ - -:where(progress) { - vertical-align: baseline; -} - -/** - * Remove the inheritance of text transform in Firefox. - */ - -:where(select) { - text-transform: none; -} - -/** - * Remove the margin in Firefox and Safari. - */ - -:where(textarea) { - margin: 0; -} - -/** - * 1. Correct the odd appearance in Chrome, Edge, and Safari. - * 2. Correct the outline style in Safari. - */ - -:where(input[type="search" i]) { - -webkit-appearance: textfield; - appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Safari. - */ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/** - * Correct the text style of placeholders in Chrome, Edge, and Safari. - */ - -::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; -} - -/** - * Remove the inner padding in Chrome, Edge, and Safari on macOS. - */ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * 1. Correct the inability to style upload buttons in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/** - * Remove the inner border and padding of focus outlines in Firefox. - */ - -:where(button, - input:is([type="button" i], - [type="color" i], - [type="reset" i], - [type="submit" i]))::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus outline styles unset by the previous rule in Firefox. - */ - -:where(button, - input:is([type="button" i], - [type="color" i], - [type="reset" i], - [type="submit" i]))::-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Remove the additional :invalid styles in Firefox. - */ - -:where(:-moz-ui-invalid) { - box-shadow: none; -} - -/* Interactive - * ========================================================================== */ - -/* - * Add the correct styles in Safari. - */ - -:where(dialog) { - background-color: white; - border: solid; - color: black; - height: -moz-fit-content; - height: fit-content; - left: 0; - margin: auto; - padding: 1em; - position: absolute; - right: 0; - width: -moz-fit-content; - width: fit-content; -} - -:where(dialog:not([open])) { - display: none; -} - -/* - * Add the correct display in all browsers. - */ - -:where(summary) { - display: list-item; -} diff --git a/playground/.gitignore b/playground/.gitignore deleted file mode 100644 index b398d22..0000000 --- a/playground/.gitignore +++ /dev/null @@ -1,26 +0,0 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -pnpm-debug.log* -lerna-debug.log* - -node_modules -dist -dist-ssr -*.local - -# Editor directories and files -.vscode/* -!.vscode/extensions.json -.idea -.DS_Store -*.suo -*.ntvs* -*.njsproj -*.sln -*.sw? - -package-lock.json diff --git a/playground/.vscode/extensions.json b/playground/.vscode/extensions.json deleted file mode 100644 index bdef820..0000000 --- a/playground/.vscode/extensions.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "recommendations": ["svelte.svelte-vscode"] -} diff --git a/playground/index.html b/playground/index.html deleted file mode 100644 index 2e75820..0000000 --- a/playground/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - Digital Rust / Playground - - -
- - - diff --git a/playground/package.json b/playground/package.json deleted file mode 100644 index e958389..0000000 --- a/playground/package.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "name": "playground2", - "private": true, - "version": "0.0.0", - "type": "module", - "scripts": { - "dev": "vite", - "build": "vite build", - "preview": "vite preview", - "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json" - }, - "devDependencies": { - "@sveltejs/vite-plugin-svelte": "^7.2.0", - "@tsconfig/svelte": "^5.0.8", - "@types/node": "^26.1.2", - "svelte": "^5.56.8", - "svelte-check": "^4.7.4", - "typescript": "~6.0.3", - "vite": "^8.2.0" - }, - "dependencies": { - "shiki": "^4.4.2" - } -} diff --git a/playground/pnpm-lock.yaml b/playground/pnpm-lock.yaml deleted file mode 100644 index 53f5d72..0000000 --- a/playground/pnpm-lock.yaml +++ /dev/null @@ -1,1056 +0,0 @@ -lockfileVersion: '9.0' - -settings: - autoInstallPeers: true - excludeLinksFromLockfile: false - -importers: - - .: - dependencies: - shiki: - specifier: ^4.4.2 - version: 4.4.2 - devDependencies: - '@sveltejs/vite-plugin-svelte': - specifier: ^7.2.0 - version: 7.2.0(svelte@5.56.8)(vite@8.2.0(@types/node@26.1.2)) - '@tsconfig/svelte': - specifier: ^5.0.8 - version: 5.0.8 - '@types/node': - specifier: ^26.1.2 - version: 26.1.2 - svelte: - specifier: ^5.56.8 - version: 5.56.8 - svelte-check: - specifier: ^4.7.4 - version: 4.7.4(picomatch@4.0.5)(svelte@5.56.8)(typescript@6.0.3) - typescript: - specifier: ~6.0.3 - version: 6.0.3 - vite: - specifier: ^8.2.0 - version: 8.2.0(@types/node@26.1.2) - -packages: - - '@jridgewell/gen-mapping@0.3.13': - resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==} - - '@jridgewell/remapping@2.3.5': - resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==} - - '@jridgewell/resolve-uri@3.1.2': - resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==} - engines: {node: '>=6.0.0'} - - '@jridgewell/sourcemap-codec@1.5.5': - resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==} - - '@jridgewell/trace-mapping@0.3.31': - resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==} - - '@oxc-project/types@0.143.0': - resolution: {integrity: sha512-u6JZdLBTLotrNC9Vd6vPssINdzcCzleKAH6EJKImQb7GtYvX5keN2dxkoK44stCc4tffE6QQRtZTXVSzsLUlWA==} - - '@rolldown/binding-android-arm64@1.2.3': - resolution: {integrity: sha512-zrJtHDcaZJ1Fp7xf4hNl+7seH9Cn/N5TwLYkhgXREtBwAd/jaqW3uqeHxpDugJLVICWg4eW44kOQEGJ1r6jCGw==} - engines: {node: ^20.19.0 || >=22.12.0} - cpu: [arm64] - os: [android] - - '@rolldown/binding-darwin-arm64@1.2.3': - resolution: {integrity: sha512-ieIiibVCp0tX7TLu2cafoNPv8wJyYi01ekXpbf8q2j7F4rGAhhXb/eQh7ge9DRBY78GwmRQtvjZDux7EDbA8kA==} - engines: {node: ^20.19.0 || >=22.12.0} - cpu: [arm64] - os: [darwin] - - '@rolldown/binding-darwin-x64@1.2.3': - resolution: {integrity: sha512-Zh9tCon19eDXJoihx0rqKhMUlMYqzwj3aPsSuHmI4RWZh62dWUL+DJN4C5YQya5TcQBJU/Fe8+rY0jhXTQITqA==} - engines: {node: ^20.19.0 || >=22.12.0} - cpu: [x64] - os: [darwin] - - '@rolldown/binding-freebsd-x64@1.2.3': - resolution: {integrity: sha512-nGbJWewA1wrXXZiQhjAT5rhibGfns5ZNkDVqxsO6zJ3f3YvpoDNNmGMSbbhLuXKjNScaBJVOAboztAWVespQMg==} - engines: {node: ^20.19.0 || >=22.12.0} - cpu: [x64] - os: [freebsd] - - '@rolldown/binding-linux-arm-gnueabihf@1.2.3': - resolution: {integrity: sha512-QNniJr5Kml0kDEB98jiDOJjXNroxIIi0IXIbdYzY26Xt1pVbeP62+KnoIZLwirOymX/0jDk/2gI/bNUv7A7OIw==} - engines: {node: ^20.19.0 || >=22.12.0} - cpu: [arm] - os: [linux] - - '@rolldown/binding-linux-arm64-gnu@1.2.3': - resolution: {integrity: sha512-TkqEAcmmvH3I/q4114NB4RVt6241Dao48pF45uLcFGrwAaIn0iITgTAKP/dLjbN0R4buJjGb91+UHSoFmpgIWw==} - engines: {node: ^20.19.0 || >=22.12.0} - cpu: [arm64] - os: [linux] - libc: [glibc] - - '@rolldown/binding-linux-arm64-musl@1.2.3': - resolution: {integrity: sha512-NHqjnxpsndf4MPymxteFAWHHfkTL8HjWh1KB7z23ofZ6QO2euONuxDXjat69dKZRALnGypg8k8SsK8vZJoXv1Q==} - engines: {node: ^20.19.0 || >=22.12.0} - cpu: [arm64] - os: [linux] - libc: [musl] - - '@rolldown/binding-linux-ppc64-gnu@1.2.3': - resolution: {integrity: sha512-6tbrbwfz5GB9DQ4Jwo6hy9v+vR31xZlvzZ6n5Xut6Hhx5PvrA9q/HsK8KMaYQp063iqZGXwNvZtYNLD7EM/x0w==} - engines: {node: ^20.19.0 || >=22.12.0} - cpu: [ppc64] - os: [linux] - libc: [glibc] - - '@rolldown/binding-linux-s390x-gnu@1.2.3': - resolution: {integrity: sha512-oyuXxXmoZHjXC917IAPFAAv4wWAa0cM9afk8nx1+9/jNNOX1uPf8yDA6p7G0RypOfw/X0PQt5IfoquY1um+zSg==} - engines: {node: ^20.19.0 || >=22.12.0} - cpu: [s390x] - os: [linux] - libc: [glibc] - - '@rolldown/binding-linux-x64-gnu@1.2.3': - resolution: {integrity: sha512-TytMwF2KVGqP2tgd0I1OY0PAv78dZRAYcF5ssDzjM34SUXCED3uXvSd5+lHoC0bTD6eEdFz7LdQNCO1y0oVk9w==} - engines: {node: ^20.19.0 || >=22.12.0} - cpu: [x64] - os: [linux] - libc: [glibc] - - '@rolldown/binding-linux-x64-musl@1.2.3': - resolution: {integrity: sha512-/E9m3qstrJFVPoULV25mVQblSNExY2+kBsYe4sy0Tn0yOOgJ8wZbZt3KnRbF/XeU2Gl1STKUQnDNTqhIE5MD4A==} - engines: {node: ^20.19.0 || >=22.12.0} - cpu: [x64] - os: [linux] - libc: [musl] - - '@rolldown/binding-openharmony-arm64@1.2.3': - resolution: {integrity: sha512-Kr0OcsoQI816i6HOl3vFHpd1K0eZyh76zgfj4c1nTyaTsd5r2Mj1lwM4R90y/qaCfmTn9eHy0SKwi98eitRxug==} - engines: {node: ^20.19.0 || >=22.12.0} - cpu: [arm64] - os: [openharmony] - - '@rolldown/binding-win32-arm64-msvc@1.2.3': - resolution: {integrity: sha512-hOtMwTqnME+/gJcH/PCZ0wn0zPUjiWOgkHpxbSJpfGKMezHltx1S7/k1SitzVa7Ww2cqrDDaFbZEhcJZO8o+Jw==} - engines: {node: ^20.19.0 || >=22.12.0} - cpu: [arm64] - os: [win32] - - '@rolldown/binding-win32-x64-msvc@1.2.3': - resolution: {integrity: sha512-ekcqMMkI2PlhYnfzQnB/cEdYUVVJViWvoUyLrbzgDoi3Snfc1mVBwdnc306ufA5ejy8JSPjT2RlW1nQSjW7efg==} - engines: {node: ^20.19.0 || >=22.12.0} - cpu: [x64] - os: [win32] - - '@rolldown/pluginutils@1.0.1': - resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==} - - '@shikijs/core@4.4.2': - resolution: {integrity: sha512-StyzbAyxg2/tBGf78gwbBkGyeQ73lf8UiJArFaQhTQIDqQOCKPCQFanvrs4/Yv3Yfyc+ONInJM6K+FMIf+P+kA==} - engines: {node: '>=20'} - - '@shikijs/engine-javascript@4.4.2': - resolution: {integrity: sha512-MnIkeqWdVPUWsxlx8gKLVCJFTsqrQJgpTPBPpQwaFeJ56lOnJxj5aN2LUFnfxUEcvOQuNocmbaMnVrCEln6rkw==} - engines: {node: '>=20'} - - '@shikijs/engine-oniguruma@4.4.2': - resolution: {integrity: sha512-GLhowz1+jixjz+wiZ3wMnOn1jTxiFCGl2PkXufivbnwPHKuyw1AYqu5/hbWhZZ2oAb0NP05WUJhYeigY14drnw==} - engines: {node: '>=20'} - - '@shikijs/langs@4.4.2': - resolution: {integrity: sha512-8DfeusD+Zdv/eYIDdXyJTUnSMHt+aAWjAOCXV20HNGAHRlInXpG8wh421v6B91WOm9TFwRLN+b/LG5F2NAIojg==} - engines: {node: '>=20'} - - '@shikijs/primitive@4.4.2': - resolution: {integrity: sha512-l6fQQKsOMlz72n38fztmSgZ76MO6KSWuw8o+GJ+FhmqrpC9pIOJNQNXGgbb5yX2AwpzlEHwsaLPnk/8o4Fm+rA==} - engines: {node: '>=20'} - - '@shikijs/themes@4.4.2': - resolution: {integrity: sha512-H0CFoL07ddDC2Dd6EdrPYNkRhUR6YCkJlnuYFceYYUJJA5TIm2b5B33qqiDYryBExgbKMndFJPb2u1gTuqO37g==} - engines: {node: '>=20'} - - '@shikijs/types@4.4.2': - resolution: {integrity: sha512-PFYitV4vpDr/iPCIhnHp+Q4ftic5N5VeNJ3KQ1O8gn3h2ar8qgwMAXF7tq4m1CWaMS60fV4VqF6vfnWH4F7vqQ==} - engines: {node: '>=20'} - - '@shikijs/vscode-textmate@10.0.2': - resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==} - - '@sveltejs/acorn-typescript@1.0.12': - resolution: {integrity: sha512-J1jNYG23QWd67UfrQSFHtjhV37r9mVi0gdc12A3MWPldOjRK35Xk+um+qACPVjgw3AleiqoyEAhok8Wm3q46NA==} - peerDependencies: - acorn: ^8.9.0 - - '@sveltejs/load-config@0.2.1': - resolution: {integrity: sha512-5m3B2cbqQ4TbwW6Xkh66Ntw6dD7gNc77cCxABTTesWcq9jxIzMgTk97pZx5vEtvQx8iokgi7GIphqZe+PGwcZA==} - engines: {node: '>= 18.0.0'} - - '@sveltejs/vite-plugin-svelte@7.2.0': - resolution: {integrity: sha512-1SpkuMSRLfugrVX+IrKfE1RUegzo8AQzKQ6qQPfVzbcWi5IhuTPaKb5ZrLpucleFznkc4/RTeSPoRnGWFxX+EQ==} - engines: {node: ^20.19 || ^22.12 || >=24} - peerDependencies: - svelte: ^5.46.4 - vite: ^8.0.0-beta.7 || ^8.0.0 - - '@tsconfig/svelte@5.0.8': - resolution: {integrity: sha512-UkNnw1/oFEfecR8ypyHIQuWYdkPvHiwcQ78sh+ymIiYoF+uc5H1UBetbjyqT+vgGJ3qQN6nhucJviX6HesWtKQ==} - - '@types/estree@1.0.9': - resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==} - - '@types/hast@3.0.5': - resolution: {integrity: sha512-rp/ezSWaD1m44dPKICGhiskI13nVr7qTloFwDa/IYkhhf5nzwP+zIQcIJh3WIFSBOy/H1PzB40jPjMDksN4F+g==} - - '@types/mdast@4.0.4': - resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==} - - '@types/node@26.1.2': - resolution: {integrity: sha512-Vu4a5UFA9rIIFJ7rB/Vaafh9lrCQszopTCx6KjFboXTGQbPNasehVR5TEiithSDGyd1DEiUByggTZsg8jukeIg==} - - '@types/trusted-types@2.0.7': - resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==} - - '@types/unist@3.0.3': - resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==} - - '@ungap/structured-clone@1.3.3': - resolution: {integrity: sha512-60YRaenCQcVjYEKOcG824+DRGGIQ3VKErcBoAEDJZz5bKIs2ZG+X/H9Nk+Q6EVkwJk5QNApxbrc5QtBSwtrXAg==} - - acorn@8.18.0: - resolution: {integrity: sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==} - engines: {node: '>=0.4.0'} - hasBin: true - - aria-query@5.3.1: - resolution: {integrity: sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g==} - engines: {node: '>= 0.4'} - - axobject-query@4.1.0: - resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==} - engines: {node: '>= 0.4'} - - ccount@2.0.1: - resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==} - - character-entities-html4@2.1.0: - resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==} - - character-entities-legacy@3.0.0: - resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==} - - chokidar@4.0.3: - resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==} - engines: {node: '>= 14.16.0'} - - clsx@2.1.1: - resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} - engines: {node: '>=6'} - - comma-separated-tokens@2.0.3: - resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==} - - deepmerge@4.3.1: - resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==} - engines: {node: '>=0.10.0'} - - dequal@2.0.3: - resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==} - engines: {node: '>=6'} - - detect-libc@2.1.2: - resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==} - engines: {node: '>=8'} - - devalue@5.9.0: - resolution: {integrity: sha512-RWrqdArjvPbsATEhOPUo6Wndc/iWnkWKlhIrdlF3zMMYo/c3CVtoaVAyLtWxz5h8nSlkHzxnzV2uLydPXmtF+A==} - - devlop@1.1.0: - resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==} - - esm-env@1.2.2: - resolution: {integrity: sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==} - - esrap@2.3.1: - resolution: {integrity: sha512-MXjVkrBAjuwIZ8xq9+a1MOOnLIwANZOx/4gtdWHfSJtXOrUh2QQK2I5mMC3urLli559jTlq2j+kSqht80uRgog==} - peerDependencies: - '@typescript-eslint/types': ^8.2.0 - peerDependenciesMeta: - '@typescript-eslint/types': - optional: true - - fdir@6.5.0: - resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==} - engines: {node: '>=12.0.0'} - peerDependencies: - picomatch: ^3 || ^4 - peerDependenciesMeta: - picomatch: - optional: true - - fsevents@2.3.3: - resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} - engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} - os: [darwin] - - hast-util-to-html@9.0.5: - resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==} - - hast-util-whitespace@3.0.0: - resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==} - - html-void-elements@3.0.0: - resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==} - - is-reference@3.0.3: - resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==} - - lightningcss-android-arm64@1.33.0: - resolution: {integrity: sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==} - engines: {node: '>= 12.0.0'} - cpu: [arm64] - os: [android] - - lightningcss-darwin-arm64@1.33.0: - resolution: {integrity: sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==} - engines: {node: '>= 12.0.0'} - cpu: [arm64] - os: [darwin] - - lightningcss-darwin-x64@1.33.0: - resolution: {integrity: sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==} - engines: {node: '>= 12.0.0'} - cpu: [x64] - os: [darwin] - - lightningcss-freebsd-x64@1.33.0: - resolution: {integrity: sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==} - engines: {node: '>= 12.0.0'} - cpu: [x64] - os: [freebsd] - - lightningcss-linux-arm-gnueabihf@1.33.0: - resolution: {integrity: sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==} - engines: {node: '>= 12.0.0'} - cpu: [arm] - os: [linux] - - lightningcss-linux-arm64-gnu@1.33.0: - resolution: {integrity: sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==} - engines: {node: '>= 12.0.0'} - cpu: [arm64] - os: [linux] - libc: [glibc] - - lightningcss-linux-arm64-musl@1.33.0: - resolution: {integrity: sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==} - engines: {node: '>= 12.0.0'} - cpu: [arm64] - os: [linux] - libc: [musl] - - lightningcss-linux-x64-gnu@1.33.0: - resolution: {integrity: sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==} - engines: {node: '>= 12.0.0'} - cpu: [x64] - os: [linux] - libc: [glibc] - - lightningcss-linux-x64-musl@1.33.0: - resolution: {integrity: sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==} - engines: {node: '>= 12.0.0'} - cpu: [x64] - os: [linux] - libc: [musl] - - lightningcss-win32-arm64-msvc@1.33.0: - resolution: {integrity: sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==} - engines: {node: '>= 12.0.0'} - cpu: [arm64] - os: [win32] - - lightningcss-win32-x64-msvc@1.33.0: - resolution: {integrity: sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==} - engines: {node: '>= 12.0.0'} - cpu: [x64] - os: [win32] - - lightningcss@1.33.0: - resolution: {integrity: sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==} - engines: {node: '>= 12.0.0'} - - locate-character@3.0.0: - resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==} - - magic-string@0.30.21: - resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==} - - mdast-util-to-hast@13.2.1: - resolution: {integrity: sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==} - - micromark-util-character@2.1.1: - resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==} - - micromark-util-encode@2.0.1: - resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==} - - micromark-util-sanitize-uri@2.0.1: - resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==} - - micromark-util-symbol@2.0.1: - resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==} - - micromark-util-types@2.0.2: - resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==} - - mri@1.2.0: - resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==} - engines: {node: '>=4'} - - nanoid@3.3.17: - resolution: {integrity: sha512-xQLf0A3HOMlgHq0n247/LRuAOYmB7dXJ/DvAxGvsSBij45XtBSmQycu+F8ODbHwns/XyFZagyL1+J0Offw1E0g==} - engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} - hasBin: true - - obug@2.1.4: - resolution: {integrity: sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA==} - engines: {node: '>=12.20.0'} - - oniguruma-parser@0.12.2: - resolution: {integrity: sha512-6HVa5oIrgMC6aA6WF6XyyqbhRPJrKR02L20+2+zpDtO5QAzGHAUGw5TKQvwi5vctNnRHkJYmjAhRVQF2EKdTQw==} - - oniguruma-to-es@4.3.6: - resolution: {integrity: sha512-csuQ9x3Yr0cEIs/Zgx/OEt9iBw9vqIunAPQkx19R/fiMq2oGVTgcMqO/V3Ybqefr1TBvosI6jU539ksaBULJyA==} - - picocolors@1.1.1: - resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==} - - picomatch@4.0.5: - resolution: {integrity: sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==} - engines: {node: '>=12'} - - postcss@8.5.25: - resolution: {integrity: sha512-DTPx3RWSSnWyzLxQnlH0rJP+EW5ekl16ZU4/psbIhA0e53kJfdgaN5vKM+xP7yJtXVu+nfdVFmlgFDEKAe4Pyw==} - engines: {node: ^10 || ^12 || >=14} - - property-information@7.2.0: - resolution: {integrity: sha512-IAtzIB6sUiWaJYrX9smp3V46pBGbBeLFRGdh25kg1334VcBlD8HzhPeNIWQH9zhGmo2itIe25EHt9dQP7G5hmg==} - - readdirp@4.1.2: - resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==} - engines: {node: '>= 14.18.0'} - - regex-recursion@6.0.2: - resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==} - - regex-utilities@2.3.0: - resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==} - - regex@6.1.0: - resolution: {integrity: sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==} - - rolldown@1.2.3: - resolution: {integrity: sha512-rn9wpmxplLf7NLNyCk9FyWh3FM43DbY8jOzCdEPzH7uflhTftRbCEpqi6Ly2osgoU8OwObtmavMbWLaWy4LX7A==} - engines: {node: ^20.19.0 || >=22.12.0} - hasBin: true - - sade@1.8.1: - resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==} - engines: {node: '>=6'} - - shiki@4.4.2: - resolution: {integrity: sha512-P8F/dFhRevaw2uSdeIYlq/5SXZNY85DPtmXQ947gD1Zj2JqO5AkNvVVBar0Me9JkFx3uzVud/qOtP5ek9NEQGA==} - engines: {node: '>=20'} - - source-map-js@1.2.1: - resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} - engines: {node: '>=0.10.0'} - - space-separated-tokens@2.0.2: - resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==} - - stringify-entities@4.0.4: - resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==} - - svelte-check@4.7.4: - resolution: {integrity: sha512-IW9ot9YqAoyv8FvyN+eb4ZTe8zgcKZrJLNYU6dzSKkGwEBsSPc4K7lmQ8bKn8W2YMXM6WDfZSSVOaGtekyUfOQ==} - engines: {node: '>= 18.0.0'} - hasBin: true - peerDependencies: - svelte: ^4.0.0 || ^5.0.0-next.0 - typescript: ^5.0.0 || ^6.0.0 - - svelte@5.56.8: - resolution: {integrity: sha512-PY8LOw7xP6c8IOiVqdo0sbbZVYhXRSfklOQLAUyGBKqjTX0wx/z4l/9J+PmBpmlLnxzEb1NqltxQ5/wZme/Cmg==} - engines: {node: '>=18'} - - tinyglobby@0.2.17: - resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==} - engines: {node: '>=12.0.0'} - - trim-lines@3.0.1: - resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==} - - typescript@6.0.3: - resolution: {integrity: sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==} - engines: {node: '>=14.17'} - hasBin: true - - undici-types@8.3.0: - resolution: {integrity: sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ==} - - unist-util-is@6.0.1: - resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==} - - unist-util-position@5.0.0: - resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==} - - unist-util-stringify-position@4.0.0: - resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==} - - unist-util-visit-parents@6.0.2: - resolution: {integrity: sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==} - - unist-util-visit@5.1.0: - resolution: {integrity: sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==} - - vfile-message@4.0.3: - resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==} - - vfile@6.0.3: - resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==} - - vite@8.2.0: - resolution: {integrity: sha512-pn+CFpM0lwDeKwmOq1ZaBK/9sjorZcgqxki6MbY/jPEVd9vichIlmlD4HmQ5wdP5EgqQCFRaACBxMC7uEGc6lQ==} - engines: {node: ^20.19.0 || >=22.12.0} - hasBin: true - peerDependencies: - '@types/node': ^20.19.0 || >=22.12.0 - '@vitejs/devtools': ^0.4.0 - esbuild: ^0.27.0 || ^0.28.0 - jiti: '>=1.21.0' - less: ^4.0.0 - sass: ^1.70.0 - sass-embedded: ^1.70.0 - stylus: '>=0.54.8' - sugarss: ^5.0.0 - terser: ^5.16.0 - tsx: ^4.8.1 - yaml: ^2.4.2 - peerDependenciesMeta: - '@types/node': - optional: true - '@vitejs/devtools': - optional: true - esbuild: - optional: true - jiti: - optional: true - less: - optional: true - sass: - optional: true - sass-embedded: - optional: true - stylus: - optional: true - sugarss: - optional: true - terser: - optional: true - tsx: - optional: true - yaml: - optional: true - - vitefu@1.1.3: - resolution: {integrity: sha512-ub4okH7Z5KLjb6hDyjqrGXqWtWvoYdU3IGm/NorpgHncKoLTCfRIbvlhBm7r0YstIaQRYlp4yEbFqDcKSzXSSg==} - peerDependencies: - vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 - peerDependenciesMeta: - vite: - optional: true - - zimmerframe@1.1.4: - resolution: {integrity: sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==} - - zwitch@2.0.4: - resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==} - -snapshots: - - '@jridgewell/gen-mapping@0.3.13': - dependencies: - '@jridgewell/sourcemap-codec': 1.5.5 - '@jridgewell/trace-mapping': 0.3.31 - - '@jridgewell/remapping@2.3.5': - dependencies: - '@jridgewell/gen-mapping': 0.3.13 - '@jridgewell/trace-mapping': 0.3.31 - - '@jridgewell/resolve-uri@3.1.2': {} - - '@jridgewell/sourcemap-codec@1.5.5': {} - - '@jridgewell/trace-mapping@0.3.31': - dependencies: - '@jridgewell/resolve-uri': 3.1.2 - '@jridgewell/sourcemap-codec': 1.5.5 - - '@oxc-project/types@0.143.0': {} - - '@rolldown/binding-android-arm64@1.2.3': - optional: true - - '@rolldown/binding-darwin-arm64@1.2.3': - optional: true - - '@rolldown/binding-darwin-x64@1.2.3': - optional: true - - '@rolldown/binding-freebsd-x64@1.2.3': - optional: true - - '@rolldown/binding-linux-arm-gnueabihf@1.2.3': - optional: true - - '@rolldown/binding-linux-arm64-gnu@1.2.3': - optional: true - - '@rolldown/binding-linux-arm64-musl@1.2.3': - optional: true - - '@rolldown/binding-linux-ppc64-gnu@1.2.3': - optional: true - - '@rolldown/binding-linux-s390x-gnu@1.2.3': - optional: true - - '@rolldown/binding-linux-x64-gnu@1.2.3': - optional: true - - '@rolldown/binding-linux-x64-musl@1.2.3': - optional: true - - '@rolldown/binding-openharmony-arm64@1.2.3': - optional: true - - '@rolldown/binding-win32-arm64-msvc@1.2.3': - optional: true - - '@rolldown/binding-win32-x64-msvc@1.2.3': - optional: true - - '@rolldown/pluginutils@1.0.1': {} - - '@shikijs/core@4.4.2': - dependencies: - '@shikijs/primitive': 4.4.2 - '@shikijs/types': 4.4.2 - '@shikijs/vscode-textmate': 10.0.2 - '@types/hast': 3.0.5 - hast-util-to-html: 9.0.5 - - '@shikijs/engine-javascript@4.4.2': - dependencies: - '@shikijs/types': 4.4.2 - '@shikijs/vscode-textmate': 10.0.2 - oniguruma-to-es: 4.3.6 - - '@shikijs/engine-oniguruma@4.4.2': - dependencies: - '@shikijs/types': 4.4.2 - '@shikijs/vscode-textmate': 10.0.2 - - '@shikijs/langs@4.4.2': - dependencies: - '@shikijs/types': 4.4.2 - - '@shikijs/primitive@4.4.2': - dependencies: - '@shikijs/types': 4.4.2 - '@shikijs/vscode-textmate': 10.0.2 - '@types/hast': 3.0.5 - - '@shikijs/themes@4.4.2': - dependencies: - '@shikijs/types': 4.4.2 - - '@shikijs/types@4.4.2': - dependencies: - '@shikijs/vscode-textmate': 10.0.2 - '@types/hast': 3.0.5 - - '@shikijs/vscode-textmate@10.0.2': {} - - '@sveltejs/acorn-typescript@1.0.12(acorn@8.18.0)': - dependencies: - acorn: 8.18.0 - - '@sveltejs/load-config@0.2.1': {} - - '@sveltejs/vite-plugin-svelte@7.2.0(svelte@5.56.8)(vite@8.2.0(@types/node@26.1.2))': - dependencies: - deepmerge: 4.3.1 - magic-string: 0.30.21 - obug: 2.1.4 - svelte: 5.56.8 - vite: 8.2.0(@types/node@26.1.2) - vitefu: 1.1.3(vite@8.2.0(@types/node@26.1.2)) - - '@tsconfig/svelte@5.0.8': {} - - '@types/estree@1.0.9': {} - - '@types/hast@3.0.5': - dependencies: - '@types/unist': 3.0.3 - - '@types/mdast@4.0.4': - dependencies: - '@types/unist': 3.0.3 - - '@types/node@26.1.2': - dependencies: - undici-types: 8.3.0 - - '@types/trusted-types@2.0.7': {} - - '@types/unist@3.0.3': {} - - '@ungap/structured-clone@1.3.3': {} - - acorn@8.18.0: {} - - aria-query@5.3.1: {} - - axobject-query@4.1.0: {} - - ccount@2.0.1: {} - - character-entities-html4@2.1.0: {} - - character-entities-legacy@3.0.0: {} - - chokidar@4.0.3: - dependencies: - readdirp: 4.1.2 - - clsx@2.1.1: {} - - comma-separated-tokens@2.0.3: {} - - deepmerge@4.3.1: {} - - dequal@2.0.3: {} - - detect-libc@2.1.2: {} - - devalue@5.9.0: {} - - devlop@1.1.0: - dependencies: - dequal: 2.0.3 - - esm-env@1.2.2: {} - - esrap@2.3.1: - dependencies: - '@jridgewell/sourcemap-codec': 1.5.5 - - fdir@6.5.0(picomatch@4.0.5): - optionalDependencies: - picomatch: 4.0.5 - - fsevents@2.3.3: - optional: true - - hast-util-to-html@9.0.5: - dependencies: - '@types/hast': 3.0.5 - '@types/unist': 3.0.3 - ccount: 2.0.1 - comma-separated-tokens: 2.0.3 - hast-util-whitespace: 3.0.0 - html-void-elements: 3.0.0 - mdast-util-to-hast: 13.2.1 - property-information: 7.2.0 - space-separated-tokens: 2.0.2 - stringify-entities: 4.0.4 - zwitch: 2.0.4 - - hast-util-whitespace@3.0.0: - dependencies: - '@types/hast': 3.0.5 - - html-void-elements@3.0.0: {} - - is-reference@3.0.3: - dependencies: - '@types/estree': 1.0.9 - - lightningcss-android-arm64@1.33.0: - optional: true - - lightningcss-darwin-arm64@1.33.0: - optional: true - - lightningcss-darwin-x64@1.33.0: - optional: true - - lightningcss-freebsd-x64@1.33.0: - optional: true - - lightningcss-linux-arm-gnueabihf@1.33.0: - optional: true - - lightningcss-linux-arm64-gnu@1.33.0: - optional: true - - lightningcss-linux-arm64-musl@1.33.0: - optional: true - - lightningcss-linux-x64-gnu@1.33.0: - optional: true - - lightningcss-linux-x64-musl@1.33.0: - optional: true - - lightningcss-win32-arm64-msvc@1.33.0: - optional: true - - lightningcss-win32-x64-msvc@1.33.0: - optional: true - - lightningcss@1.33.0: - dependencies: - detect-libc: 2.1.2 - optionalDependencies: - lightningcss-android-arm64: 1.33.0 - lightningcss-darwin-arm64: 1.33.0 - lightningcss-darwin-x64: 1.33.0 - lightningcss-freebsd-x64: 1.33.0 - lightningcss-linux-arm-gnueabihf: 1.33.0 - lightningcss-linux-arm64-gnu: 1.33.0 - lightningcss-linux-arm64-musl: 1.33.0 - lightningcss-linux-x64-gnu: 1.33.0 - lightningcss-linux-x64-musl: 1.33.0 - lightningcss-win32-arm64-msvc: 1.33.0 - lightningcss-win32-x64-msvc: 1.33.0 - - locate-character@3.0.0: {} - - magic-string@0.30.21: - dependencies: - '@jridgewell/sourcemap-codec': 1.5.5 - - mdast-util-to-hast@13.2.1: - dependencies: - '@types/hast': 3.0.5 - '@types/mdast': 4.0.4 - '@ungap/structured-clone': 1.3.3 - devlop: 1.1.0 - micromark-util-sanitize-uri: 2.0.1 - trim-lines: 3.0.1 - unist-util-position: 5.0.0 - unist-util-visit: 5.1.0 - vfile: 6.0.3 - - micromark-util-character@2.1.1: - dependencies: - micromark-util-symbol: 2.0.1 - micromark-util-types: 2.0.2 - - micromark-util-encode@2.0.1: {} - - micromark-util-sanitize-uri@2.0.1: - dependencies: - micromark-util-character: 2.1.1 - micromark-util-encode: 2.0.1 - micromark-util-symbol: 2.0.1 - - micromark-util-symbol@2.0.1: {} - - micromark-util-types@2.0.2: {} - - mri@1.2.0: {} - - nanoid@3.3.17: {} - - obug@2.1.4: {} - - oniguruma-parser@0.12.2: {} - - oniguruma-to-es@4.3.6: - dependencies: - oniguruma-parser: 0.12.2 - regex: 6.1.0 - regex-recursion: 6.0.2 - - picocolors@1.1.1: {} - - picomatch@4.0.5: {} - - postcss@8.5.25: - dependencies: - nanoid: 3.3.17 - picocolors: 1.1.1 - source-map-js: 1.2.1 - - property-information@7.2.0: {} - - readdirp@4.1.2: {} - - regex-recursion@6.0.2: - dependencies: - regex-utilities: 2.3.0 - - regex-utilities@2.3.0: {} - - regex@6.1.0: - dependencies: - regex-utilities: 2.3.0 - - rolldown@1.2.3: - dependencies: - '@oxc-project/types': 0.143.0 - '@rolldown/pluginutils': 1.0.1 - optionalDependencies: - '@rolldown/binding-android-arm64': 1.2.3 - '@rolldown/binding-darwin-arm64': 1.2.3 - '@rolldown/binding-darwin-x64': 1.2.3 - '@rolldown/binding-freebsd-x64': 1.2.3 - '@rolldown/binding-linux-arm-gnueabihf': 1.2.3 - '@rolldown/binding-linux-arm64-gnu': 1.2.3 - '@rolldown/binding-linux-arm64-musl': 1.2.3 - '@rolldown/binding-linux-ppc64-gnu': 1.2.3 - '@rolldown/binding-linux-s390x-gnu': 1.2.3 - '@rolldown/binding-linux-x64-gnu': 1.2.3 - '@rolldown/binding-linux-x64-musl': 1.2.3 - '@rolldown/binding-openharmony-arm64': 1.2.3 - '@rolldown/binding-win32-arm64-msvc': 1.2.3 - '@rolldown/binding-win32-x64-msvc': 1.2.3 - - sade@1.8.1: - dependencies: - mri: 1.2.0 - - shiki@4.4.2: - dependencies: - '@shikijs/core': 4.4.2 - '@shikijs/engine-javascript': 4.4.2 - '@shikijs/engine-oniguruma': 4.4.2 - '@shikijs/langs': 4.4.2 - '@shikijs/themes': 4.4.2 - '@shikijs/types': 4.4.2 - '@shikijs/vscode-textmate': 10.0.2 - '@types/hast': 3.0.5 - - source-map-js@1.2.1: {} - - space-separated-tokens@2.0.2: {} - - stringify-entities@4.0.4: - dependencies: - character-entities-html4: 2.1.0 - character-entities-legacy: 3.0.0 - - svelte-check@4.7.4(picomatch@4.0.5)(svelte@5.56.8)(typescript@6.0.3): - dependencies: - '@jridgewell/trace-mapping': 0.3.31 - '@sveltejs/load-config': 0.2.1 - chokidar: 4.0.3 - fdir: 6.5.0(picomatch@4.0.5) - picocolors: 1.1.1 - sade: 1.8.1 - svelte: 5.56.8 - typescript: 6.0.3 - transitivePeerDependencies: - - picomatch - - svelte@5.56.8: - dependencies: - '@jridgewell/remapping': 2.3.5 - '@jridgewell/sourcemap-codec': 1.5.5 - '@sveltejs/acorn-typescript': 1.0.12(acorn@8.18.0) - '@types/estree': 1.0.9 - '@types/trusted-types': 2.0.7 - acorn: 8.18.0 - aria-query: 5.3.1 - axobject-query: 4.1.0 - clsx: 2.1.1 - devalue: 5.9.0 - esm-env: 1.2.2 - esrap: 2.3.1 - is-reference: 3.0.3 - locate-character: 3.0.0 - magic-string: 0.30.21 - zimmerframe: 1.1.4 - transitivePeerDependencies: - - '@typescript-eslint/types' - - tinyglobby@0.2.17: - dependencies: - fdir: 6.5.0(picomatch@4.0.5) - picomatch: 4.0.5 - - trim-lines@3.0.1: {} - - typescript@6.0.3: {} - - undici-types@8.3.0: {} - - unist-util-is@6.0.1: - dependencies: - '@types/unist': 3.0.3 - - unist-util-position@5.0.0: - dependencies: - '@types/unist': 3.0.3 - - unist-util-stringify-position@4.0.0: - dependencies: - '@types/unist': 3.0.3 - - unist-util-visit-parents@6.0.2: - dependencies: - '@types/unist': 3.0.3 - unist-util-is: 6.0.1 - - unist-util-visit@5.1.0: - dependencies: - '@types/unist': 3.0.3 - unist-util-is: 6.0.1 - unist-util-visit-parents: 6.0.2 - - vfile-message@4.0.3: - dependencies: - '@types/unist': 3.0.3 - unist-util-stringify-position: 4.0.0 - - vfile@6.0.3: - dependencies: - '@types/unist': 3.0.3 - vfile-message: 4.0.3 - - vite@8.2.0(@types/node@26.1.2): - dependencies: - lightningcss: 1.33.0 - picomatch: 4.0.5 - postcss: 8.5.25 - rolldown: 1.2.3 - tinyglobby: 0.2.17 - optionalDependencies: - '@types/node': 26.1.2 - fsevents: 2.3.3 - - vitefu@1.1.3(vite@8.2.0(@types/node@26.1.2)): - optionalDependencies: - vite: 8.2.0(@types/node@26.1.2) - - zimmerframe@1.1.4: {} - - zwitch@2.0.4: {} diff --git a/playground/pnpm-workspace.yaml b/playground/pnpm-workspace.yaml deleted file mode 100644 index cc27a4f..0000000 --- a/playground/pnpm-workspace.yaml +++ /dev/null @@ -1,2 +0,0 @@ -minimumReleaseAgeExclude: - - svelte@5.56.0 diff --git a/playground/src/App.svelte b/playground/src/App.svelte deleted file mode 100644 index ad9d3ed..0000000 --- a/playground/src/App.svelte +++ /dev/null @@ -1,418 +0,0 @@ - - - - -
-
-

Digital Rust Playground

-

Note: this demo is 90+% accurate, but full spec accuracy is only possible in a dedicated code editor.

-
- -
-
- - -
- ← Back to Homepage -
- -
-
-

[ Input ]

- -
- -
-

[ Output ]

-
- {#if isLoading && !htmlOutput} -
Loading syntax engine…
- {:else} - {@html htmlOutput} - {/if} -
-
-
- -
- - {isLoading ? 'Loading…' : 'Ready'} - - │ - Chaos reigns. -
-
diff --git a/playground/src/app.css b/playground/src/app.css deleted file mode 100644 index 9ada355..0000000 --- a/playground/src/app.css +++ /dev/null @@ -1,750 +0,0 @@ -/* ────────────────────────────────────────────── - Digital Rust — Playground Styles - Synced with: ../style.css, ./lib/digital-rust-theme.ts - ────────────────────────────────────────────── */ - -/* ── Reset ── */ -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; - font-variant-ligatures: common-ligatures discretionary-ligatures no-historical-ligatures contextual; - font-variant-numeric: oldstyle-nums tabular-nums; - font-kerning: normal; - font-optical-sizing: auto; - text-rendering: optimizeLegibility; -} - -/* ── Design Tokens ── */ -:root { - /* Main palette (light → dark) */ - --ghost-pixel: #f7eae8; - --phosphor-smoke: #efd5d1; - --phantom-current: #e7c0ba; - --corrupted-cache: #dfaba3; - --copper-trace: #d7968c; - --fatal-error: #cf8175; - --rouge-signal: #c76c5e; - --amber-alert: #bf5747; - --amber-alert-text: #cb6353; /* WCAG AA compliant text variant on base & elevated */ - --firewall-breach: #b74230; - --digital-rust: #af2e1a; - --kernel-panic: #9d2917; - --data-rot: #8c2414; - --bricked-board: #7a2012; - --dark-packet: #691b0f; - --daemon-blood: #57170d; - --bad-sector: #46120a; - --core-meltdown: #340d07; - --null-pointer: #230905; - --event-horizon: #110402; - - /* Accent colours */ - --memory-leek: #8fa667; - --dim-memory-leek: #627247; - --bright-memory-leek: #94a577; - --stack-overglow: #d4a759; - --dim-stack-overglow: #a07e43; - --bright-stack-overglow: #d3ae6e; - --blue-screen: #8791b0; - --dim-blue-screen: #60677c; - --bright-blue-screen: #999eaf; - --fractured-shell: #ba5a7d; - --dim-fractured-shell: #87405a; - --bright-fractured-shell: #ba6b88; - --dead-thread: #6fa5a0; - --dim-dead-thread: #4c726e; - --bright-dead-thread: #7fa5a1; - --thermal-throttle: #d78556; - --dim-thermal-throttle: #ac6d4a; - --bright-thermal-throttle: #d6926b; - - /* Semantic surfaces */ - --dr-surface-base: var(--event-horizon); - --dr-surface-secondary: var(--null-pointer); - --dr-surface-elevated: var(--core-meltdown); - --dr-surface-highlight: var(--bad-sector); - --dr-surface-active: #5a1810; - - /* Semantic text */ - --dr-text-primary: var(--ghost-pixel); - --dr-text-secondary: var(--phosphor-smoke); - --dr-text-muted: rgba(239, 213, 209, 0.5); - --dr-text-link: var(--phantom-current); - --dr-text-link-hover: var(--fatal-error); - --dr-text-link-visited: var(--corrupted-cache); - --dr-text-on-accent: var(--ghost-pixel); - - /* Semantic action tokens */ - --dr-accent: var(--digital-rust); - --dr-accent-hover: var(--firewall-breach); /* AA-compliant primary hover fill (4.66:1) */ - - /* Semantic feedback tokens */ - --dr-success: var(--memory-leek); - --dr-warning: var(--stack-overglow); - --dr-danger: var(--amber-alert); - --dr-danger-text: var(--amber-alert-text); - --dr-info: var(--dead-thread); - - /* Semantic border colour tokens (widths live in the border tokens) */ - --dr-border-color: var(--dark-packet); - --dr-border-color-well: var(--bad-sector); - --dr-border-color-hover: var(--digital-rust); - --dr-border-color-invalid: var(--amber-alert); - - /* Borders */ - --dr-border: 2px solid var(--dr-border-color); - --dr-border-thick: 4px solid var(--dr-border-color); /* page/site chrome only */ - --dr-border-subtle: 1px solid var(--dr-border-color-well); - --dr-border-focus: 2px solid var(--dr-warning); - - /* Shadows — warm, never pure black */ - --dr-shadow-offset-sm: 2px 2px 0 0 var(--dr-surface-highlight); - --dr-shadow-offset-md: 3px 3px 0 0 var(--dr-surface-highlight); - --dr-shadow-offset-lg: 4px 4px 0 0 var(--dr-surface-highlight); - --dr-shadow-hover-md: 4px 4px 0 0 var(--dr-surface-highlight); - --dr-shadow-active: 0 0 0 0 var(--dr-surface-highlight); - --dr-shadow-glow-sm: 0 0 10px rgba(175, 46, 26, 0.4); - --dr-shadow-glow-md: 0 0 20px rgba(175, 46, 26, 0.4); - --dr-shadow-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.1); - --dr-shadow-inner-lowlight: inset 0 -1px 0 rgba(17, 4, 2, 0.6); - - /* Press cycle */ - --dr-press-rest: translate(0, 0); - --dr-press-hover: translate(-2px, -2px); - --dr-press-active: translate(2px, 2px); - - /* Focus ring */ - --dr-focus-ring: 2px solid var(--dr-warning); - --dr-focus-ring-offset: 2px; - - /* Radius */ - --dr-radius-sm: 2px; - --dr-radius: 4px; - --dr-radius-lg: 6px; - - /* Spacing */ - --dr-space-xs: 0.25rem; - --dr-space-sm: 0.5rem; - --dr-space-md: 1rem; - --dr-space-lg: 1.5rem; - --dr-space-xl: 2.5rem; - --dr-space-2xl: 4rem; - --dr-space-3xl: 6rem; - - /* Typography scale */ - --dr-text-xs: 0.75rem; - --dr-text-sm: 0.875rem; - --dr-text-base: 1rem; - --dr-text-lg: 1.25rem; - --dr-text-xl: 1.75rem; - --dr-text-2xl: 2.5rem; - --dr-text-3xl: 4rem; - - /* Animation */ - --dr-duration-fast: 150ms; - --dr-duration-normal: 250ms; - --dr-duration-slow: 400ms; - --dr-ease-default: cubic-bezier(0.4, 0, 0.2, 1); - --dr-ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1); - --dr-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); - --dr-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1); - - /* Z-index layers */ - --dr-z-content: 10; - --dr-z-noise: 1000; - - /* Scanline colour */ - --dr-scanline: rgba(175, 46, 26, 0.03); - - /* Font stacks — illustrative only, NOT a constraint; any families of - equivalent character (condensed uppercase heading, slab/humanist - serif body, tabular monospace readouts) satisfy the role. */ - --dr-font-heading: "Rajdhani", "Saira SemiCondensed", "Trebuchet MS", sans-serif; - --dr-font-body: "Zilla Slab", "Bitter", "Source Serif 4", Georgia, serif; - --dr-font-mono: "IBM Plex Mono", "Space Mono", ui-monospace, "Fira Code", - "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", - monospace; -} - -/* ── Body & Atmosphere ── */ -body { - background: var(--dr-surface-base); - color: var(--dr-text-primary); - font-family: var(--dr-font-body); - font-weight: 500; - min-height: 100vh; - display: flex; - flex-direction: column; - position: relative; - z-index: var(--dr-z-content); - overflow-x: hidden; - line-height: 1.6; -} - -/* Noise texture — non-negotiable */ -body::before { - content: ""; - position: fixed; - inset: 0; - background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); - opacity: 0.02; - pointer-events: none; - z-index: var(--dr-z-noise); -} - -/* Scanlines — non-negotiable */ -body::after { - content: ""; - position: fixed; - inset: 0; - background: repeating-linear-gradient( - 0deg, - transparent, - transparent 2px, - var(--dr-scanline) 2px, - var(--dr-scanline) 4px - ); - pointer-events: none; - z-index: calc(var(--dr-z-noise) - 1); -} - -/* ── Layout ── */ -.container { - display: flex; - flex-direction: column; - height: 100vh; - max-width: 1600px; - margin: 0 auto; - padding: var(--dr-space-lg); - position: relative; - z-index: var(--dr-z-content); -} - -/* ── Skip Link ── */ -.skip-link { - position: absolute; - top: -100%; - left: 0; - z-index: calc(var(--dr-z-noise) + 1); - padding: var(--dr-space-sm) var(--dr-space-lg); - background: var(--dr-accent); - color: var(--dr-text-on-accent); - font-family: var(--dr-font-heading); - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.05em; - text-decoration: none; - border: var(--dr-border); - border-radius: 0 0 var(--dr-radius) 0; - box-shadow: var(--dr-shadow-offset-sm), - var(--dr-shadow-inner-highlight); -} - -.skip-link:focus { - top: 0; -} - -/* ── Header ── */ -header { - margin-bottom: var(--dr-space-lg); - border-bottom: var(--dr-border-thick); - padding-bottom: var(--dr-space-md); - position: relative; -} - -header::after { - content: ""; - position: absolute; - inset: 0; - background: radial-gradient( - ellipse at center, - transparent 60%, - rgba(17, 4, 2, 0.4) 100% - ); - pointer-events: none; - z-index: 0; -} - -h1 { - margin: 0; - color: var(--fatal-error); /* the One Heading Colour Rule */ - font-family: var(--dr-font-heading); - font-size: var(--dr-text-xl); - font-weight: 700; - letter-spacing: 0.15em; - text-transform: uppercase; - position: relative; - z-index: 2; -} - -@media (prefers-reduced-motion: no-preference) { - h1:hover { - animation: glitch 0.9s steps(2, end) infinite alternate; - } - - h1 { - will-change: transform, filter, text-shadow, clip-path; - } -} - -.disclaimer { - margin: var(--dr-space-xs) 0 0; - color: var(--dr-text-secondary); - font-size: var(--dr-text-sm); - font-style: italic; - position: relative; - z-index: 2; -} - -/* ── Controls Bar ── */ -.controls { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: var(--dr-space-md); - background: var(--dr-surface-secondary); - padding: var(--dr-space-sm) var(--dr-space-md); - border: var(--dr-border); - border-radius: var(--dr-radius); - box-shadow: var(--dr-shadow-offset-sm), - var(--dr-shadow-inner-highlight); - position: relative; - z-index: var(--dr-z-content); -} - -.controls-left { - display: flex; - align-items: center; - gap: var(--dr-space-sm); -} - -.controls label { - color: var(--dr-text-secondary); - font-family: var(--dr-font-heading); - font-size: var(--dr-text-sm); - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.05em; -} - -/* ── Select — a switch: full press cycle ── */ -select { - background-color: var(--dr-surface-elevated); - color: var(--dr-text-primary); - border: var(--dr-border); - border-color: var(--dr-border-color); - padding: var(--dr-space-xs) var(--dr-space-sm); - border-radius: var(--dr-radius); - font-family: var(--dr-font-mono); - font-size: var(--dr-text-sm); - cursor: pointer; - box-shadow: var(--dr-shadow-offset-sm), - var(--dr-shadow-inner-highlight); - transition: border-color var(--dr-transition-fast), - box-shadow var(--dr-transition-fast), - transform var(--dr-transition-fast); -} - -select:hover:not(:focus-visible) { - border-color: var(--dr-border-color-hover); -} - -select:focus-visible { - outline: var(--dr-focus-ring); - outline-offset: var(--dr-focus-ring-offset); -} - -select:active { - transform: var(--dr-press-active); - box-shadow: var(--dr-shadow-active); -} - -/* ── Links ── */ -a { - color: var(--dr-text-link); - text-decoration: underline; - text-underline-offset: 3px; - text-decoration-thickness: 1px; - transition: color var(--dr-transition-fast), - text-decoration-thickness var(--dr-transition-fast); -} - -a:hover { - color: var(--dr-text-link-hover); - text-decoration-thickness: 2px; -} - -a:visited { - color: var(--dr-text-link-visited); -} - -a:active { - color: var(--dr-accent); -} - -.back-button { - font-family: var(--dr-font-heading); - font-size: var(--dr-text-sm); - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; - padding: var(--dr-space-xs) var(--dr-space-md); - border: var(--dr-border); - border-radius: var(--dr-radius); - background: transparent; - box-shadow: var(--dr-shadow-offset-sm), - var(--dr-shadow-inner-highlight); - transition: transform var(--dr-transition-fast), - box-shadow var(--dr-transition-fast), - background var(--dr-transition-fast), - color var(--dr-transition-fast); - text-decoration: none; - color: var(--dr-text-secondary); -} - -.back-button:hover { - background: var(--dr-surface-elevated); - border-color: var(--dr-border-color-hover); - color: var(--dr-text-primary); - transform: var(--dr-press-hover); - box-shadow: var(--dr-shadow-hover-md), - var(--dr-shadow-inner-highlight); - text-decoration: none; -} - -.back-button:active { - transform: var(--dr-press-active); - box-shadow: var(--dr-shadow-active); -} - -/* ── Editor Container ── */ -.editor-container { - display: flex; - flex: 1; - gap: var(--dr-space-md); - min-height: 0; -} - -/* ── Panels ── */ -.input-panel, -.output-panel { - flex: 1; - display: flex; - flex-direction: column; - background: var(--dr-surface-elevated); - border: var(--dr-border); - border-radius: var(--dr-radius); - overflow: hidden; - box-shadow: var(--dr-shadow-offset-md), - var(--dr-shadow-inner-highlight); - transition: border-color var(--dr-transition-normal), - box-shadow var(--dr-transition-normal); -} - -.input-panel:hover, -.output-panel:hover { - border-color: var(--daemon-blood); -} - -/* ── Panel Headers — Bracket Notation (Bad Sector title bar) ── */ -h2 { - margin: 0; - padding: var(--dr-space-sm) var(--dr-space-md); - background: var(--dr-surface-highlight); /* panel headers: Bad Sector */ - color: var(--dr-text-secondary); - font-size: var(--dr-text-sm); - font-family: var(--dr-font-heading); - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.08em; - border-bottom: var(--dr-border); -} - -.title-bracket { - color: var(--dr-border-color); - opacity: 0.5; - font-weight: 400; -} - -/* ── Textarea (Input) — Recessed Well ── */ -textarea { - flex: 1; - background-color: var(--dr-surface-base); - color: var(--dr-text-primary); - border: none; - padding: var(--dr-space-md); - font-family: var(--dr-font-mono); - font-size: var(--dr-text-sm); - line-height: 1.6; - resize: none; - tab-size: 4; - hyphens: none; -} - -textarea::placeholder { - color: var(--dr-text-muted); - font-style: italic; -} - -textarea:focus-visible { - outline: var(--dr-focus-ring); - outline-offset: var(--dr-focus-ring-offset); -} - -/* ── Code Output ── */ -.code-output { - flex: 1; - background-color: var(--dr-surface-base); - padding: var(--dr-space-md); - overflow: auto; - font-family: var(--dr-font-mono); - font-size: var(--dr-text-sm); - line-height: 1.6; - scrollbar-width: thin; - scrollbar-color: var(--dr-border-color) transparent; -} - -.code-output:hover { - scrollbar-color: var(--dr-border-color) transparent; -} - -.code-output pre { - margin: 0; -} - -.code-output .shiki { - background-color: transparent !important; -} - -/* ── Loading State — readout, not pressable ── */ -.loading { - color: var(--dr-warning); - font-style: italic; -} - -/* ── Status Bar ── - Bricked Board bg (hotter, more urgent panel than Core Meltdown) */ -.status { - margin-top: var(--dr-space-md); - padding: var(--dr-space-sm) var(--dr-space-md); - background: var(--bricked-board); - color: var(--dr-text-primary); - border-top: var(--dr-border); - border-left: none; - border-right: none; - border-bottom: none; - border-radius: 0; - box-shadow: none; - font-family: var(--dr-font-mono); - font-size: var(--dr-text-xs); - display: flex; - align-items: center; - gap: var(--dr-space-sm); -} - -#status-indicator { - color: var(--dr-warning); - font-weight: 700; -} - -#status-indicator.ready { - color: var(--dr-success); -} - -.status-separator { - color: var(--dr-border-color); - user-select: none; -} - -.status-tagline { - color: var(--dr-text-secondary); - font-style: italic; - font-family: var(--dr-font-body); -} - -/* ── Focus Visible — 2px Stack Overglow, 2px offset, in addition to resting shadow ── */ -:focus-visible { - outline: var(--dr-focus-ring); - outline-offset: var(--dr-focus-ring-offset); -} - -/* ── Selection — warm, never pure black, never cold blue ── */ -::selection { - background: var(--dr-accent); - color: var(--dr-text-on-accent); -} - -/* ── Scrollbars — machine rails: Dark Packet rest, Daemon Blood hover, surface-active drag ── */ -::-webkit-scrollbar { - width: 8px; - height: 8px; -} - -::-webkit-scrollbar-track { - background: transparent; -} - -::-webkit-scrollbar-thumb { - background: var(--dr-border-color); /* Dark Packet at rest */ - border-radius: var(--dr-radius-sm); - border: 2px solid var(--dr-surface-secondary); -} - -::-webkit-scrollbar-thumb:hover { - background: var(--daemon-blood); /* Daemon Blood on hover */ -} - -::-webkit-scrollbar-thumb:active { - background: var(--dr-surface-active); -} - -* { - scrollbar-width: thin; - scrollbar-color: var(--dr-border-color) transparent; -} - -*:hover { - scrollbar-color: var(--daemon-blood) transparent; -} - -/* ── Glitch Animation ── - Page chrome signature; tied to user motion preference below. */ -@keyframes glitch { - 0% { - text-shadow: 0 0 24px rgba(175, 46, 26, 0.7), -1px -1px var(--digital-rust), - 1px 1px var(--dead-thread); - transform: translate3d(0, 0, 0); - filter: hue-rotate(0deg) saturate(130%); - clip-path: inset(0 0 0 0); - } - - 4% { - text-shadow: 4px -2px var(--fractured-shell), -4px 2px var(--dead-thread), - 0 0 32px rgba(175, 46, 26, 0.8); - transform: translate3d(-2px, 1px, 0) skewX(1deg); - filter: hue-rotate(-6deg) saturate(160%); - clip-path: inset(12% 0 28% 0); - } - - 9% { - text-shadow: -6px 0 var(--memory-leek), 6px 0 var(--thermal-throttle), - 0 0 18px rgba(175, 46, 26, 0.6); - transform: translate3d(2px, -3px, 0) skewY(-1.5deg); - filter: hue-rotate(12deg) saturate(140%); - clip-path: inset(0 0 8% 0); - } - - 15% { - text-shadow: -2px 2px var(--digital-rust), 3px -3px var(--dead-thread), - -1px -1px var(--fractured-shell); - transform: translate3d(-1px, 2px, 0) scale(1.01); - filter: hue-rotate(-18deg) saturate(180%); - clip-path: inset(32% 0 6% 0); - } - - 24% { - text-shadow: 8px 2px var(--amber-alert), -8px -2px var(--dead-thread); - transform: translate3d(3px, -2px, 0) skewX(-1.2deg); - filter: hue-rotate(25deg) saturate(150%); - clip-path: inset(6% 0 40% 0); - } - - 38% { - text-shadow: -3px 0 var(--fractured-shell), 3px 0 rgba(143, 166, 103, 0.6), - 0 0 26px rgba(175, 46, 26, 0.9); - transform: translate3d(-4px, 1px, 0) skewY(2deg); - filter: hue-rotate(-32deg) saturate(170%); - clip-path: inset(18% 0 20% 0); - } - - 52% { - text-shadow: 10px -3px var(--dead-thread), -10px 3px var(--thermal-throttle), - 0 0 16px rgba(175, 46, 26, 0.4); - transform: translate3d(5px, -4px, 0) skewX(2deg) skewY(-1deg); - filter: hue-rotate(38deg) saturate(150%); - clip-path: inset(0 0 0 0); - } - - 67% { - text-shadow: -5px -1px rgba(207, 129, 117, 0.9), - 5px 1px rgba(111, 165, 160, 0.9); - transform: translate3d(-3px, 4px, 0) scale(1.015); - filter: hue-rotate(-48deg) saturate(175%) contrast(115%); - clip-path: inset(14% 0 14% 0); - } - - 82% { - text-shadow: 12px 0 rgba(175, 46, 26, 0.9), -12px 0 rgba(143, 166, 103, 0.7), - 0 0 40px rgba(175, 46, 26, 0.9); - transform: translate3d(6px, -2px, 0) skewX(-2deg) skewY(2deg); - filter: hue-rotate(54deg) saturate(210%); - clip-path: inset(48% 0 4% 0); - } - - 100% { - text-shadow: 0 0 24px rgba(175, 46, 26, 0.75), -1px 1px var(--digital-rust), - 1px -1px var(--dead-thread); - transform: translate3d(0, 0, 0); - filter: hue-rotate(0deg) saturate(130%); - clip-path: inset(0 0 0 0); - } -} - -/* ── Responsive ── */ -@media (max-width: 768px) { - .container { - padding: var(--dr-space-sm); - } - - h1 { - font-size: var(--dr-text-lg); - letter-spacing: 0.08em; - } - - .editor-container { - flex-direction: column; - } - - .controls { - flex-direction: column; - gap: var(--dr-space-sm); - } - - .back-button { - align-self: flex-start; - } - - textarea, - .code-output { - font-size: var(--dr-text-xs); - } -} - -/* ── Reduced Motion — all transforms/transitions/animation suppressed, - texture overlays removed, glitch disabled (spec: state colours remain) ── */ -@media (prefers-reduced-motion: reduce) { - h1 { - animation: none !important; - transform: none !important; - filter: none !important; - } - - *, - *::before, - *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - transition-delay: 0ms !important; - scroll-behavior: auto !important; - } - - /* Kill the ambient overlays entirely (spec: no texture under reduced motion) */ - body::before, - body::after { - content: none; - } -} diff --git a/playground/src/lib/digital-rust-theme.ts b/playground/src/lib/digital-rust-theme.ts deleted file mode 100644 index 9787773..0000000 --- a/playground/src/lib/digital-rust-theme.ts +++ /dev/null @@ -1,624 +0,0 @@ -export const digitalRustTheme = { - name: 'digital-rust', - type: 'dark', - colors: { - 'editor.background': '#110402', - 'editor.foreground': '#f7eae8', - 'editorLineNumber.foreground': '#46120a', - 'editorLineNumber.activeForeground': '#e7c0ba', - 'editor.selectionBackground': '#691b0fB3', - 'editor.inactiveSelectionBackground': '#691b0f66', - 'editorIndentGuide.background': '#46120a', - 'editorIndentGuide.activeBackground': '#691b0f', - 'editorWhitespace.foreground': '#46120a80', - 'editorCursor.foreground': '#d4a759', - 'editor.lineHighlightBackground': '#340d0780', - 'editor.findMatchBackground': '#d4a75980', - 'editor.findMatchBorder': '#af2e1a', - 'editor.findMatchHighlightBackground': '#d4a7594D', - 'editorBracketMatch.background': '#46120a', - 'editorBracketMatch.unexpectedBracketForeground': '#bf5747', - }, - tokenColors: [ - // ─── Comments ─── - { - name: 'Comments', - scope: ['comment', 'punctuation.definition.comment', 'comment.line.shebang'], - settings: { - foreground: '#ac6d4a', - fontStyle: 'italic', - }, - }, - - // ─── Keywords & Storage ─── - { - name: 'Keywords, Storage', - scope: [ - 'keyword', - 'keyword.control', - 'keyword.control.import', - 'keyword.control.conditional', - 'keyword.control.loop', - 'storage.type', - 'storage.modifier', - ], - settings: { - foreground: '#cf8175', - }, - }, - - // ─── Functions & Methods ─── - { - name: 'Functions', - scope: ['entity.name.function', 'meta.function-call', 'support.function'], - settings: { - foreground: '#d4a759', - }, - }, - - // ─── Classes & Types ─── - { - name: 'Classes, Types', - scope: [ - 'entity.name.type', - 'entity.name.class', - 'support.type', - 'support.class', - 'meta.type.annotation', - 'entity.other.inherited-class', - ], - settings: { - foreground: '#6fa5a0', - }, - }, - - // ─── Strings & Text ─── - { - name: 'Strings', - scope: [ - 'string', - 'punctuation.definition.string', - 'string.quoted', - 'string.regexp', - 'constant.other.character-class.regexp', - 'constant.character.escape', - ], - settings: { - foreground: '#8fa667', - }, - }, - - // ─── Numbers ─── - { - name: 'Numbers', - scope: ['constant.numeric'], - settings: { - foreground: '#d78556', - }, - }, - - // ─── Constants & Special Values ─── - // Booleans, null-like, this/self/super, named constants, enum values - { - name: 'Constants, Booleans, Null, Special Values', - scope: [ - 'constant.language.boolean', - 'constant.language.null', - 'constant.language', - 'constant.language.nan', - 'constant.language.infinity', - 'variable.language.this', - 'variable.language.super', - 'variable.language.self', - 'variable.other.constant', - 'constant.other.constant', - 'variable.other.enummember', - 'entity.name.constant', - ], - settings: { - foreground: '#d3ae6e', - }, - }, - - // ─── Attributes & Decorators ─── - { - name: 'Attributes, Decorators', - scope: [ - 'meta.decorator', - 'entity.name.function.decorator', - 'meta.attribute', - 'punctuation.definition.annotation', - 'punctuation.decorator', - ], - settings: { - foreground: '#6fa5a0', - fontStyle: 'italic', - }, - }, - - // ─── Built-ins & Standard Library ─── - { - name: 'Built-ins', - scope: [ - 'support.function', - 'support.class', - 'support.type', - 'support.constant', - 'support.variable', - ], - settings: { - foreground: '#a07e43', - }, - }, - - // ─── Variables & Identifiers ─── - { - name: 'Variables', - scope: ['variable', 'variable.parameter', 'variable.other', 'variable.other.readwrite'], - settings: { - foreground: '#f7eae8', - }, - }, - - // ─── Operators & Punctuation ─── - { - name: 'Operators, Punctuation', - scope: [ - 'keyword.operator', - 'punctuation.separator', - 'punctuation.terminator', - 'punctuation.accessor', - 'punctuation.definition.parameters', - 'punctuation.definition.array', - 'punctuation.definition.dictionary', - 'punctuation.section.block', - 'punctuation.definition.generic', - 'punctuation.definition.typeparameters', - 'keyword.operator.regex', - 'meta.brace', - ], - settings: { - foreground: '#d7968c', - }, - }, - - // ─── Markup Tags (HTML/XML) ─── - { - name: 'Markup Tags', - scope: ['entity.name.tag', 'meta.tag', 'meta.tag.sgml'], - settings: { - foreground: '#6fa5a0', - }, - }, - - // ─── Markup Attributes ─── - { - name: 'Markup Attributes', - scope: ['entity.other.attribute-name'], - settings: { - foreground: '#a07e43', - }, - }, - - // ─── Errors ─── - // Uses WCAG-AA variant #cb6353 for guaranteed contrast on dark backgrounds - { - name: 'Errors', - scope: ['invalid', 'invalid.illegal', 'invalid.deprecated'], - settings: { - foreground: '#cb6353', - }, - }, - - // ─── Configuration Languages (JSON/YAML/TOML) ─── - { - name: 'JSON/YAML/TOML Keys', - scope: [ - 'support.type.property-name.json', - 'entity.name.tag.yaml', - 'support.type.property-name.toml', - 'keyword.other.definition', - ], - settings: { - foreground: '#6fa5a0', - }, - }, - - // ─── CSS ─── - { - name: 'CSS Properties', - scope: ['support.type.property-name.css', 'support.type.vendored.property-name.css'], - settings: { - foreground: '#a07e43', - }, - }, - { - name: 'CSS Classes/IDs', - scope: [ - 'entity.other.attribute-name.class.css', - 'entity.other.attribute-name.id.css', - ], - settings: { - foreground: '#6fa5a0', - }, - }, - { - name: 'CSS Pseudo-classes/Elements', - scope: [ - 'entity.other.attribute-name.pseudo-class.css', - 'entity.other.attribute-name.pseudo-element.css', - ], - settings: { - foreground: '#a07e43', - }, - }, - { - name: 'CSS At-rules', - scope: [ - 'keyword.control.at-rule.css', - 'keyword.control.at-rule.import.css', - 'keyword.control.at-rule.media.css', - 'keyword.control.at-rule.keyframes.css', - 'meta.at-rule', - ], - settings: { - foreground: '#cf8175', - }, - }, - { - name: 'CSS Keywords (auto, inherit, etc.)', - scope: ['support.constant.property-value.css'], - settings: { - foreground: '#d3ae6e', - }, - }, - - // ─── Markdown ─── - { - name: 'Markdown Headings', - scope: [ - 'markup.heading', - 'entity.name.section.markdown', - 'punctuation.definition.heading.markdown', - ], - settings: { - foreground: '#cf8175', - fontStyle: 'bold', - }, - }, - { - name: 'Markdown Emphasis (bold)', - scope: ['markup.bold.markdown'], - settings: { - foreground: '#f7eae8', - fontStyle: 'bold', - }, - }, - { - name: 'Markdown Emphasis (italic)', - scope: ['markup.italic.markdown'], - settings: { - foreground: '#f7eae8', - fontStyle: 'italic', - }, - }, - { - name: 'Markdown Code', - scope: [ - 'markup.inline.raw', - 'markup.raw.inline', - 'markup.fenced_code', - 'punctuation.definition.raw.markdown', - ], - settings: { - foreground: '#8fa667', - background: '#46120a33', - }, - }, - { - name: 'Markdown Blockquotes', - scope: ['markup.quote'], - settings: { - foreground: '#efd5d1', - fontStyle: 'italic', - }, - }, - { - name: 'Markdown Links', - scope: [ - 'markup.underline.link', - 'string.other.link.title.markdown', - 'constant.other.reference.link.markdown', - ], - settings: { - foreground: '#e7c0ba', - fontStyle: 'underline', - }, - }, - { - name: 'Markdown Link URLs', - scope: ['markup.underline.link.markdown', 'meta.link.reference.markdown', 'meta.link.inline.markdown'], - settings: { - foreground: '#a07e43', - }, - }, - { - name: 'Markdown List Markers', - scope: ['punctuation.definition.list.begin.markdown', 'punctuation.definition.list_item.markdown'], - settings: { - foreground: '#d7968c', - }, - }, - { - name: 'Markdown Horizontal Rule', - scope: ['meta.separator.markdown'], - settings: { - foreground: '#691b0f', - }, - }, - - // ─── Diff / Git ─── - // Diff additions: Ghost Pixel text, Memory Leek 15% bg, + marker Memory Leek - { - name: 'Diff Header (hunk)', - scope: ['meta.diff.header', 'meta.diff.range.unified'], - settings: { - foreground: '#8791b0', - }, - }, - { - name: 'Diff Commit Hashes', - scope: ['constant.other.hash.diff'], - settings: { - foreground: '#a07e43', - }, - }, - { - name: 'Diff File Paths / Metadata', - scope: [ - 'meta.diff.header.from-file', - 'meta.diff.header.to-file', - 'entity.name.file.diff', - 'meta.diff.index', - ], - settings: { - foreground: '#d4a759', - }, - }, - { - name: 'Diff Inserted (+ marker)', - scope: [ - 'punctuation.definition.inserted.diff', - 'punctuation.definition.plus.diff', - ], - settings: { - foreground: '#8fa667', - }, - }, - { - name: 'Diff Deleted (- marker)', - scope: [ - 'punctuation.definition.deleted.diff', - 'punctuation.definition.minus.diff', - ], - settings: { - foreground: '#bf5747', - }, - }, - { - name: 'Diff Modified (~ marker)', - scope: ['punctuation.definition.changed.diff', 'punctuation.definition.tilde.diff'], - settings: { - foreground: '#6fa5a0', - }, - }, - { - name: 'Diff Added Lines', - scope: ['markup.inserted', 'meta.diff.line.inserted', 'diff.inserted'], - settings: { - foreground: '#f7eae8', - background: '#8fa66726', - }, - }, - { - name: 'Diff Deleted Lines', - scope: ['markup.deleted', 'meta.diff.line.deleted', 'diff.deleted'], - settings: { - foreground: '#e7c0ba', - background: '#bf574726', - }, - }, - { - name: 'Diff Modified Lines', - scope: ['markup.changed', 'meta.diff.line.changed', 'diff.changed'], - settings: { - foreground: '#f7eae8', - background: '#6fa5a01a', - }, - }, - - // ─── Shell / CLI ─── - { - name: 'Shell Shebang & Comments', - scope: [ - 'comment.line.number-sign.shell', - 'comment.line.fish', - 'comment.line.double-slash', - ], - settings: { - foreground: '#ac6d4a', - fontStyle: 'italic', - }, - }, - { - name: 'Shell Commands', - scope: [ - 'entity.name.command.shell', - 'support.function.builtin.shell', - ], - settings: { - foreground: '#d4a759', - }, - }, - { - name: 'Shell Flags & Options', - scope: [ - 'keyword.operator.option.shell', - 'entity.other.option.shell', - 'string.unquoted.argument.shell', - ], - settings: { - foreground: '#cf8175', - }, - }, - - // ─── SQL ─── - // SQL keywords inherit from Keywords above; these are SQL-specific additions - { - name: 'SQL Functions', - scope: ['support.function.aggregate.sql', 'support.function.sql'], - settings: { - foreground: '#d4a759', - }, - }, - { - name: 'SQL Types', - scope: ['support.type.sql', 'storage.type.sql'], - settings: { - foreground: '#6fa5a0', - }, - }, - - // ─── Rust-Specific ─── - { - name: 'Rust Lifetimes', - scope: [ - 'entity.name.lifetime.rust', - 'punctuation.definition.lifetime.rust', - ], - settings: { - foreground: '#6fa5a0', - fontStyle: 'italic', - }, - }, - { - name: 'Rust Macros', - scope: ['entity.name.function.macro.rust', 'meta.macro.rust'], - settings: { - foreground: '#d4a759', - }, - }, - { - name: 'Rust Attributes', - scope: [ - 'meta.attribute.rust', - 'punctuation.definition.attribute.rust', - ], - settings: { - foreground: '#6fa5a0', - fontStyle: 'italic', - }, - }, - - // ─── C/C++ Preprocessor ─── - { - name: 'Preprocessor Directives', - scope: [ - 'keyword.control.import.include', - 'keyword.control.preprocessor', - 'meta.preprocessor', - 'keyword.control.preprocessor.define', - 'keyword.control.preprocessor.if', - 'keyword.control.preprocessor.elif', - 'keyword.control.preprocessor.else', - 'keyword.control.preprocessor.endif', - 'keyword.control.preprocessor.include', - 'keyword.control.preprocessor.import', - 'keyword.control.preprocessor.undef', - 'keyword.control.preprocessor.error', - 'keyword.control.preprocessor.warning', - 'keyword.control.preprocessor.pragma', - ], - settings: { - foreground: '#cf8175', - }, - }, - { - name: 'Preprocessor Macro Names', - scope: [ - 'entity.name.function.preprocessor', - 'entity.name.constant.preprocessor', - ], - settings: { - foreground: '#d3ae6e', - }, - }, - { - name: 'Preprocessor Include Paths', - scope: [ - 'string.quoted.double.include.c', - 'string.quoted.other.lt-gt.include.c', - 'string.include', - ], - settings: { - foreground: '#8fa667', - }, - }, - - // ─── String Interpolation Delimiters ─── - { - name: 'Interpolation Delimiters', - scope: [ - 'punctuation.definition.template-expression', - 'punctuation.section.embedded', - 'meta.template.expression', - ], - settings: { - foreground: '#d7968c', - }, - }, - - // ─── Haskell / ML / Functional ─── - { - name: 'Type Constructors (Haskell/ML)', - scope: [ - 'constant.other.capitalized-type.haskell', - 'entity.name.type.data.haskell', - ], - settings: { - foreground: '#6fa5a0', - }, - }, - { - name: 'Data Constructors (Haskell/ML)', - scope: [ - 'constant.other.capitalized-constructor.haskell', - 'entity.name.function.constructor.haskell', - ], - settings: { - foreground: '#d3ae6e', - }, - }, - { - name: 'Type Variables (Haskell/ML)', - scope: ['variable.other.generic-type.haskell', 'variable.other.type.haskell'], - settings: { - foreground: '#6fa5a0', - fontStyle: 'italic', - }, - }, - { - name: 'Functional Arrows (::, =>, ->)', - scope: [ - 'keyword.other.double-colon.haskell', - 'keyword.other.fat-arrow.haskell', - 'keyword.other.arrow.haskell', - 'keyword.operator.type-annotation', - 'keyword.operator.arrow', - ], - settings: { - foreground: '#d7968c', - }, - }, - ], -}; diff --git a/playground/src/main.ts b/playground/src/main.ts deleted file mode 100644 index 664a057..0000000 --- a/playground/src/main.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { mount } from 'svelte' -import './app.css' -import App from './App.svelte' - -const app = mount(App, { - target: document.getElementById('app')!, -}) - -export default app diff --git a/playground/svelte.config.js b/playground/svelte.config.js deleted file mode 100644 index 0cf7db3..0000000 --- a/playground/svelte.config.js +++ /dev/null @@ -1,2 +0,0 @@ -/** @type {import("@sveltejs/vite-plugin-svelte").SvelteConfig} */ -export default {} diff --git a/playground/tsconfig.app.json b/playground/tsconfig.app.json deleted file mode 100644 index acfd2e5..0000000 --- a/playground/tsconfig.app.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "extends": "@tsconfig/svelte/tsconfig.json", - "compilerOptions": { - "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", - "target": "ES2023", - "useDefineForClassFields": true, - "module": "ESNext", - "types": ["svelte", "vite/client"], - "noEmit": true, - /** - * Typecheck JS in `.svelte` and `.js` files by default. - * Disable checkJs if you'd like to use dynamic types in JS. - * Note that setting allowJs false does not prevent the use - * of JS in `.svelte` files. - */ - "allowJs": true, - "checkJs": true, - "moduleDetection": "force" - }, - "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"] -} diff --git a/playground/tsconfig.json b/playground/tsconfig.json deleted file mode 100644 index 1ffef60..0000000 --- a/playground/tsconfig.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "files": [], - "references": [ - { "path": "./tsconfig.app.json" }, - { "path": "./tsconfig.node.json" } - ] -} diff --git a/playground/tsconfig.node.json b/playground/tsconfig.node.json deleted file mode 100644 index 8a67f62..0000000 --- a/playground/tsconfig.node.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "compilerOptions": { - "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", - "target": "ES2023", - "lib": ["ES2023"], - "module": "ESNext", - "types": ["node"], - "skipLibCheck": true, - - /* Bundler mode */ - "moduleResolution": "bundler", - "allowImportingTsExtensions": true, - "verbatimModuleSyntax": true, - "moduleDetection": "force", - "noEmit": true, - - /* Linting */ - "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "erasableSyntaxOnly": true, - "noFallthroughCasesInSwitch": true, - "noUncheckedSideEffectImports": true - }, - "include": ["vite.config.ts"] -} diff --git a/playground/vite.config.ts b/playground/vite.config.ts deleted file mode 100644 index 2f557a4..0000000 --- a/playground/vite.config.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { defineConfig } from 'vite' -import { svelte } from '@sveltejs/vite-plugin-svelte' - -// https://vite.dev/config/ -export default defineConfig({ - plugins: [svelte()], - base: './', -}) diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 5ed0b5a..daf11c4 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -1,2 +1,2 @@ allowBuilds: - esbuild: true + esbuild: true diff --git a/spec.html b/spec.html deleted file mode 100644 index 373083e..0000000 --- a/spec.html +++ /dev/null @@ -1,2731 +0,0 @@ - - - - - - - - - - - - - - - - - - - - Digital Rust Specification - - - - - - -
- -
-
-

- Digital Rust Syntax Highlighting Specification -

-

- Official syntax highlighting and design specification for the Digital Rust - theme. -

-
-
- Status - Living Specification -
-
- Last Updated - -- -
-
- Format - HTML · Markdown -
- -
-

Overview

-

- Digital Rust is a warm, tech-dystopian color scheme inspired by corrupted - hardware and failing systems. Built around deep rust-copper tones with - strategic pops of color named after system failures, the theme delivers a - unique visual experience that embraces the beauty of digital decay while - maintaining excellent readability and productivity. -

-
-
-
- Live Snippet - Spec OK -
-
// signal: digital rust boot sequence
-fn boot_sequence() -> Result<SystemState, KernelPanic> {
-    let checksum = hash("ghost-pixel")?;
-    if checksum < 0xAF2E1A {
-        return Err(KernelPanic::CorruptedCache);
-    }
-    Ok(SystemState::Operational)
-}
-
-
-
- Keywords & control - -
-
- Functions - -
-
- Types - -
-
- Strings - -
-
- Signals & numbers - -
-
-
-

Color Palette

-

Main Colours

-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Hex CodeNameDescription
#f7eae8Ghost PixelLightest / White Point (text)
#efd5d1Phosphor Smoke
#e7c0baPhantom CurrentLink Colour/Footer Text
#dfaba3Corrupted Cache
#d7968cCopper Trace
#cf8175Fatal Error
#c76c5eRouge Signal
#bf5747Amber Alert
#b74230Firewall Breach
#af2e1aDigital Rust - Primary Colour/Primary Accent -
#9d2917Kernel Panic
#8c2414Data Rot
#7a2012Bricked Board
#691b0fDark Packet
#57170dDaemon Blood
#46120aBad Sector
#340d07Core MeltdownSecondary Background Colour
#230905Null Pointer
#110402Event HorizonDarkest/Black Point (background)
-
-
-

ANSI Colours

-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Hex CodeANSI ColourName
#8fa667GreenMemory Leek
#627247DimGreenDim 〃
#94a577BrightGreenBright 〃
#d4a759YellowStack Overglow
#a07e43DimYellowDim 〃
#d3ae6eBrightYellowBright 〃
#8791b0BlueBlue Screen
#60677cDimBlueDim 〃
#999eafBrightBlueBright 〃
#ba5a7dMagentaFractured Shell
#87405aDimMagentaDim 〃
#ba6b88BrightMagentaBright 〃
#6fa5a0CyanDead Thread
#4c726eDimCyanDim 〃
#7fa5a1BrightCyanBright 〃
#d78556OrangeThermal Throttle
#ac6d4aDimOrangeDim 〃
#d6926bBrightOrangeBright 〃
-
-
-

Syntax Highlighting Rules

-

Token Classification

-

- Following TextMate scoping conventions for consistent - highlighting across editors. -

-

Primary Tokens

-

- Keywords & Storage → - Fatal Error (#cf8175) -

-
    -
  • - Language Keywords: if, else, - return, function, class -
  • -
  • - Storage Modifiers: static, public, - private, const, let, - var -
  • -
  • - Control Flow: try, catch, throw, - break, continue -
  • -
-

- Functions & Methods → - Stack Overglow (#d4a759) -

-
    -
  • Function Declarations and Calls
  • -
  • Method Invocations
  • -
  • User-defined Functions
  • -
-

- Classes & Types → Dead Thread (#6fa5a0) -

-
    -
  • Class Names and Constructors
  • -
  • - Type Annotations: int, string, - boolean -
  • -
  • Interfaces and Enums
  • -
  • Generic Type Parameters
  • -
-

- Strings & Text → Memory Leek (#8fa667) -

-
    -
  • - String Literals: "corrupted", - 'failed', `template` -
  • -
  • Escape Sequences (e.g., \n, \t)
  • -
-

Numbers → Thermal Throttle (#d78556)

-
    -
  • - Numeric Literals: 42, 3.14, 0xFF, - 1e5 -
  • -
-

- Constants & Special Values → - Bright Stack Overglow (#d3ae6e) -

-
    -
  • Boolean Values: true, false
  • -
  • - Null-like Constants: null, undefined, - nil, None -
  • -
  • - Special Language Values: NaN, Infinity, - this, self, super -
  • -
  • - Named Constants: SOME_CONST, MAX_SIZE, - DEFAULT_TIMEOUT -
  • -
  • - Enum Values: Status.OK, Color.RED, - HttpStatus.NOT_FOUND -
  • -
  • - Language-level Constants: __name__, __FILE__, - M_PI, E -
  • -
-
-

- Design Note: Booleans and null-like values use a - distinct color from numbers. The distinct color marks their semantic role - as special language constants, not numeric data. -

-
-

- Comments → Dim Thermal Throttle (#ac6d4a) - italic -

-
    -
  • Single-Line: //, #, --
  • -
  • Multi-Line: /* */, <!-- -->
  • -
  • Documentation Blocks (JSDoc, Javadoc, docstrings)
  • -
-

- Attributes & Decorators → - Dead Thread (#6fa5a0) italic -

-
    -
  • - Java/Kotlin Annotations: @Override, - @Component, @Deprecated -
  • -
  • - Python Decorators: @dataclass, @property, - @staticmethod -
  • -
  • - Rust Attributes: #[derive(Debug)], - #[cfg(test)] -
  • -
  • - C# Attributes: [Serializable], [HttpGet] -
  • -
  • - TypeScript Decorators: @Injectable, @Component -
  • -
-
-

- Sigil Handling: The @ or - # sigil inherits the decorator color. Style the sigil as part - of the attribute token. -

-
-

Support & Built-ins

-

- Built-ins & Standard Library → - Dim Stack Overglow (#a07e43) -

-
    -
  • - Built-in Functions: print, len, - typeof, console.log -
  • -
  • - Standard Library Classes: Array, String, - Object, Map -
  • -
  • - TextMate scopes: support.function, - support.class, support.type -
  • -
-

- Markup Tags (HTML/XML) → - Dead Thread (#6fa5a0) -

-
    -
  • - Tag Names: <div>, <span>, - <svg> -
  • -
  • - Self-closing Tags: <br/>, <img/> -
  • -
  • TextMate scope: entity.name.tag
  • -
-

- Markup Attributes → - Dim Stack Overglow (#a07e43) -

-
    -
  • - Attribute Names: class, id, href, - src -
  • -
  • TextMate scope: entity.other.attribute-name
  • -
-

- Markup Attribute Values → - Memory Leek (#8fa667) -

-
    -
  • - Quoted Values: "container", - 'primary' -
  • -
  • TextMate scope: string.quoted within markup
  • -
-

Regular Expressions

-
    -
  • - Regex Literals & Character Classes → - Memory Leek (#8fa667) -
  • -
  • - Regex Operators & Metacharacters (+, *, - ?, |, ^, $) → - Copper Trace (#d7968c) -
  • -
  • Regex Groups & Brackets → Copper Trace (#d7968c)
  • -
-

- Variables & Identifiers → - Ghost Pixel (#f7eae8) -

-
    -
  • Variable Names and Parameters
  • -
  • Object Properties
  • -
  • Default Text Content
  • -
  • - TextMate scope: variable, variable.parameter -
  • -
-

- Errors & Warnings → - Amber Alert (#bf5747) (note: rendered text on dark backgrounds uses --amber-alert-text (#cb6353) for guaranteed WCAG AA compliance) -

-
    -
  • Syntax Errors
  • -
  • Deprecated Code (with strikethrough where supported)
  • -
  • Invalid Tokens
  • -
-

Operators & Punctuation

-

Operators → Copper Trace (#d7968c)

-
    -
  • - Arithmetic: +, -, *, - /, %, ** -
  • -
  • - Comparison: ==, !=, <, - >, <=, >=, - ===, !== -
  • -
  • - Logical: &&, ||, !, - and, or, not -
  • -
  • - Assignment: =, +=, -=, - *=, /= -
  • -
  • - Bitwise: &, |, ^, - ~, <<, >> -
  • -
-

- Punctuation & Delimiters → - Copper Trace (#d7968c) -

-
    -
  • Separators: ,, ;, :
  • -
  • Accessors: ., ::
  • -
  • - Brackets: (, ), [, - ], {, } -
  • -
  • Angle Brackets (generics): <, >
  • -
-

Sigils & Prefix Symbols

-
    -
  • - Sigils inherit the color of the token they modify: -
      -
    • - $variable → Variable color (Ghost Pixel) -
    • -
    • - @decorator → Decorator color (Dead Thread) -
    • -
    • - &reference → Context-dependent (variable or type) -
    • -
    • *pointer → Context-dependent
    • -
    -
  • -
-

Styling Modifiers

-

Bold

-
    -
  • Markdown headings (H1–H6)
  • -
  • Strong emphasis in Markdown (**text**)
  • -
  • Active tab labels in UI
  • -
  • Critical warnings or alerts
  • -
-

Italic

-
    -
  • Comments and documentation blocks
  • -
  • Type parameters and generics
  • -
  • Decorators and attributes
  • -
  • Markdown emphasis (*text*)
  • -
  • Quoted text in documentation
  • -
-

Underline

-
    -
  • - Links: Solid underline using Phantom Current (#e7c0ba) -
  • -
  • - Spelling errors: Dotted underline using Amber Alert (#bf5747) -
  • -
  • - Potential errors/warnings: Wavy underline using - Stack Overglow (#d4a759) -
  • -
-
-

- Accessibility Note: Distinguish links and spelling errors - by underline style (solid vs. dotted), not by color alone. -

-
-

Strikethrough

-
    -
  • Deprecated code or APIs
  • -
  • Completed tasks in TODO comments
  • -
-

Special Rules

-

Scope Prioritization

-

- If multiple scopes apply to one token, apply styles in this precedence - order: -

-
    -
  1. - Error scopes (highest priority): always override other - styles -
  2. -
  3. Warning scopes: override non-error styles
  4. -
  5. - Language-specific overrides: per-language - customizations -
  6. -
  7. - Semantic token colors: LSP/semantic highlighting -
  8. -
  9. - Base syntax colors (lowest priority): TextMate grammar - defaults -
  10. -
-
-

- Rule: If a token is both an error and another role - (e.g., a misspelled keyword), the error style takes full precedence. The - token shows the error styling, not a blend. -

-
-

Bracket Matching

-
    -
  • - Matching Brackets: Subtle highlight with - Bad Sector (#46120a) background -
  • -
  • - Unmatched Brackets: Amber Alert (#bf5747) with wavy - underline -
  • -
  • - Rainbow Brackets: Optional. If enabled, cycle through: Dead Thread, - Stack Overglow, Fractured Shell, - Blue Screen, Thermal Throttle, - Memory Leek -
  • -
-
-

Language-Specific Rules

-

- Configuration Languages (JSON/YAML/TOML) -

-

Configuration files use a distinct key/value visual hierarchy:

-

Keys → Dead Thread (#6fa5a0)

-
    -
  • Object keys and property names
  • -
  • YAML mapping keys
  • -
  • TOML table headers and keys
  • -
-

Values → Standard token rules apply:

-
    -
  • Strings → Memory Leek (#8fa667)
  • -
  • Numbers → Thermal Throttle (#d78556)
  • -
  • Booleans/null → Bright Stack Overglow (#d3ae6e)
  • -
-

- Structural Elements → Copper Trace (#d7968c) -

-
    -
  • Colons, commas, brackets
  • -
  • YAML dashes for list items
  • -
-
-

- Design Note: Keys and values use intentionally different - colors. The difference makes the hierarchical structure immediately visible. -

-
-

Markdown & Rich Text

-

- Headings (H1–H6) → Fatal Error (#cf8175) - bold -

-
    -
  • - Heading markers (#, ##, etc.) → - Copper Trace (#d7968c) -
  • -
-

Emphasis

-
    -
  • - Bold (**text**) → Ghost Pixel (#f7eae8) - bold -
  • -
  • - Italic (*text*) → Ghost Pixel (#f7eae8) - italic -
  • -
  • - Bold Italic (***text***) → - Ghost Pixel (#f7eae8) bold italic -
  • -
-

Code

-
    -
  • - Inline code (`code`) → - Memory Leek (#8fa667) on - Bad Sector (#46120a) background -
  • -
  • Fenced code blocks → Normal syntax highlighting inside
  • -
  • - Code fence markers (```) → - Copper Trace (#d7968c) -
  • -
-

- Blockquotes → Phosphor Smoke (#efd5d1) - italic -

-
    -
  • - Quote markers (>) → Copper Trace (#d7968c) -
  • -
-

Links

-
    -
  • Link text → Phantom Current (#e7c0ba) underlined
  • -
  • Link URL → Dim Stack Overglow (#a07e43)
  • -
-

Lists

-
    -
  • - List markers (-, *, 1.) → - Copper Trace (#d7968c) -
  • -
  • List content → Ghost Pixel (#f7eae8)
  • -
-

- Horizontal Rules → Dark Packet (#691b0f) -

-

HTML / XML / Templates

-

Core Markup

-
    -
  • Tag Names → Dead Thread (#6fa5a0)
  • -
  • Attribute Names → Dim Stack Overglow (#a07e43)
  • -
  • Attribute Values → Memory Leek (#8fa667)
  • -
  • Text Nodes → Ghost Pixel (#f7eae8)
  • -
  • - Comments → Dim Thermal Throttle (#ac6d4a) italic -
  • -
-

- Angle Brackets & Delimiters → - Copper Trace (#d7968c) -

-
    -
  • - <, >, </, - /> -
  • -
-

Template Languages (JSX, Vue, Handlebars, EJS)

-
    -
  • - Template Delimiters ({}, {{}}, - <%, %>) → - Copper Trace (#d7968c) -
  • -
  • Embedded Expressions → Follow host language syntax rules
  • -
  • - Component Names (PascalCase) → Dead Thread (#6fa5a0) (treat - as custom tags) -
  • -
-

CSS & Stylesheets

-

Selectors

-
    -
  • Element Selectors → Ghost Pixel (#f7eae8)
  • -
  • - Class Selectors (.class) → - Dead Thread (#6fa5a0) -
  • -
  • - ID Selectors (#id) → Dead Thread (#6fa5a0) -
  • -
  • - Pseudo-classes/elements (:hover, ::before) → - Dim Stack Overglow (#a07e43) -
  • -
  • Attribute Selectors → Dim Stack Overglow (#a07e43)
  • -
-

Properties & Values

-
    -
  • Property Names → Dim Stack Overglow (#a07e43)
  • -
  • String Values → Memory Leek (#8fa667)
  • -
  • Numeric Values → Thermal Throttle (#d78556)
  • -
  • - Units (px, em, %, - rem) → Dim Stack Overglow (#a07e43) -
  • -
  • - Color Values (hex, rgb, hsl) → Thermal Throttle (#d78556) -
  • -
  • - Keywords (auto, inherit, flex) → - Bright Stack Overglow (#d3ae6e) -
  • -
-

At-Rules

-
    -
  • - @media, @import, @keyframes → - Fatal Error (#cf8175) -
  • -
-

Utility-First (Tailwind and similar frameworks)

-
    -
  • - Class Names in HTML → Dead Thread (#6fa5a0) (treat as - structural labels) -
  • -
-

String Interpolation

-

- String Containers → Memory Leek (#8fa667) -

-
    -
  • Quote characters and literal text portions
  • -
-

Interpolated Expressions → Full syntax highlighting

-
    -
  • - JavaScript: ${expression}: expression follows JS rules -
  • -
  • - Python f-strings: {expression}: expression follows Python - rules -
  • -
  • Ruby: #{expression}: expression follows Ruby rules
  • -
  • - Shell: ${variable} or $(command): follows - shell rules -
  • -
-

- Interpolation Delimiters → - Copper Trace (#d7968c) -

-
    -
  • - ${, }, #{, {, - } -
  • -
-
-

- Implementation Note: Tokenize interpolated segments as full - expressions. Do not render them as plain string content. -

-
-

Git & Diff Views

-

Diff Additions

-
    -
  • Text Color: Ghost Pixel (#f7eae8)
  • -
  • Background: Memory Leek (#8fa667) at 15% opacity
  • -
  • Line Marker (+): Memory Leek (#8fa667)
  • -
-

Diff Deletions

-
    -
  • Text Color: Phantom Current (#e7c0ba)
  • -
  • Background: Amber Alert (#bf5747) at 15% opacity
  • -
  • Line Marker (-): Amber Alert (#bf5747)
  • -
-

Diff Modifications

-
    -
  • Background: Dead Thread (#6fa5a0) at 10% opacity
  • -
  • Line Marker (~): Dead Thread (#6fa5a0)
  • -
-

Diff Headers & Metadata

-
    -
  • File paths: Stack Overglow (#d4a759)
  • -
  • - Hunk headers (@@): Blue Screen (#8791b0) -
  • -
  • Commit hashes: Dim Stack Overglow (#a07e43)
  • -
-

Inline Diff (word-level)

-
    -
  • Added words: Memory Leek (#8fa667) background at 25%
  • -
  • - Removed words: Amber Alert (#bf5747) background at 25% -
  • -
-

- Shell & CLI Scripts (Bash, Zsh, Fish, PowerShell) -

-

- Commands & Executables → - Stack Overglow (#d4a759) -

-
    -
  • First word on a line (command name)
  • -
  • - Built-in commands: echo, cd, - export -
  • -
  • - External commands: grep, awk, - curl -
  • -
-

- Flags & Options → Fatal Error (#cf8175) -

-
    -
  • Short flags: -a, -v, -rf
  • -
  • - Long flags: --help, --verbose, - --output -
  • -
-

Variables → Ghost Pixel (#f7eae8)

-
    -
  • - Environment variables: $PATH, $HOME, - ${VAR} -
  • -
  • - Positional parameters: $1, $@, $# -
  • -
  • Sigil ($) inherits variable color per sigil rules
  • -
-

Here-Documents → Memory Leek (#8fa667)

-
    -
  • Here-doc body content follows string rules
  • -
  • - Delimiter tokens (<<EOF, EOF) → - Copper Trace (#d7968c) -
  • -
-

- Shebang Line → - Dim Thermal Throttle (#ac6d4a) italic -

-
    -
  • #!/bin/bash, #!/usr/bin/env python
  • -
  • Treat as a special comment
  • -
-

SQL

-

Keywords → Fatal Error (#cf8175)

-
    -
  • - DML: SELECT, INSERT, UPDATE, - DELETE -
  • -
  • - DDL: CREATE, ALTER, DROP, - TRUNCATE -
  • -
  • - Clauses: FROM, WHERE, JOIN, - ON, GROUP BY, ORDER BY, - HAVING -
  • -
  • - Operators: AND, OR, NOT, - IN, BETWEEN, LIKE, - IS NULL -
  • -
-

Functions → Stack Overglow (#d4a759)

-
    -
  • - Aggregate: COUNT, SUM, AVG, - MIN, MAX -
  • -
  • - Scalar: COALESCE, NULLIF, CAST, - CONVERT -
  • -
  • - Date/Time: NOW, DATEADD, DATEDIFF -
  • -
-

Types → Dead Thread (#6fa5a0)

-
    -
  • - VARCHAR, INT, BIGINT, - BOOLEAN, TIMESTAMP, TEXT, - DECIMAL -
  • -
-

Identifiers → Ghost Pixel (#f7eae8)

-
    -
  • Table names, column names
  • -
  • Aliases (AS name): treat as variables
  • -
-

Strings & Numbers → Standard token rules

-
    -
  • String & char literals → Memory Leek (#8fa667)
  • -
  • Numeric literals → Thermal Throttle (#d78556)
  • -
-

C/C++ Preprocessor Directives

-

- Preprocessor Keywords → - Fatal Error (#cf8175) -

-
    -
  • #include, #define, #undef
  • -
  • - #if, #ifdef, #ifndef, - #else, #elif, #endif -
  • -
  • #pragma, #error, #warning
  • -
-

- Macro Names → - Bright Stack Overglow (#d3ae6e) -

-
    -
  • Defined constants: MAX_SIZE, DEBUG_MODE
  • -
  • Treat as named constants
  • -
-

- Macro Parameters → Ghost Pixel (#f7eae8) -

-
    -
  • - Parameters in macro definitions follow - variable.parameter rules -
  • -
-

Include Paths → Memory Leek (#8fa667)

-
    -
  • - <stdio.h>, "myheader.h": - treat as strings -
  • -
-
-

- Note: The # sigil is part of the directive - keyword, not a separate punctuation token. -

-
-

Rust-Specific

-

- Lifetimes → Dead Thread (#6fa5a0) - italic -

-
    -
  • - 'a, 'static, '_ -
  • -
  • The tick (') is part of the lifetime token
  • -
-

Traits → Dead Thread (#6fa5a0)

-
    -
  • - Trait names: Clone, Debug, - Iterator, Send, Sync -
  • -
  • Trait bounds follow type coloring
  • -
-

Macros → Stack Overglow (#d4a759)

-
    -
  • - Macro invocations: println!, vec!, - format! -
  • -
  • The ! is part of the macro name
  • -
-
-

- Note: Rust attributes (#[derive], - #[cfg]) are covered under Attributes & - Decorators. -

-
-

- Haskell / ML / Functional Languages -

-

- Type Constructors → Dead Thread (#6fa5a0) -

-
    -
  • - Maybe, Either, List, - IO -
  • -
  • Type-level names starting with uppercase
  • -
-

- Data Constructors → - Bright Stack Overglow (#d3ae6e) -

-
    -
  • - Just, Nothing, Left, - Right, True, False -
  • -
  • Treat as constants (they are value-level names for types)
  • -
-

- Type Signatures → Standard rules with explicit operators -

-
    -
  • - :: (type annotation) → Copper Trace (#d7968c) -
  • -
  • - => (constraint arrow) → - Copper Trace (#d7968c) -
  • -
  • - -> (function arrow) → - Copper Trace (#d7968c) -
  • -
-

- Type Variables → Dead Thread (#6fa5a0) - italic -

-
    -
  • - Lowercase type parameters: a, b, - m -
  • -
  • Distinguish them from term-level variables with italic
  • -
-
-

Editor UI Definitions

-

Editor Core

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementColorNotes
Editor BackgroundEvent Horizon (#110402)Primary editing surface
Gutter BackgroundNull Pointer (#230905)Line number area
Default TextGhost Pixel (#f7eae8)Unrecognized tokens fallback
Line Numbers (inactive)Bad Sector (#46120a)Non-current lines
Line Numbers (active)Phantom Current (#e7c0ba)Current line
CursorStack Overglow (#d4a759)Block or line cursor
Current Line HighlightCore Meltdown (#340d07) at 50%Subtle emphasis
-

Selection & Guides

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementColorNotes
Selection BackgroundDark Packet (#691b0f) at 70%Active selection
Inactive SelectionDark Packet (#691b0f) at 40%Unfocused window
Indent GuidesBad Sector (#46120a)Scope visualization
Active Indent GuideDark Packet (#691b0f)Current scope
Whitespace CharactersBad Sector (#46120a) at 50%Spaces, tabs when visible
Matching Bracket BGBad Sector (#46120a)Bracket pair highlight
-

Search & Navigation

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementColorNotes
Search Match BGStack Overglow (#d4a759) at 30%All matches
Active Search Match - Digital Rust (#af2e1a) border + - Stack Overglow (#d4a759) at 50% fill - Currently selected match
Find/Replace ErrorAmber Alert (#bf5747) underlineInvalid regex/pattern
Highlight on ScrollStack Overglow (#d4a759) at 20%Scrollbar match indicators
-

Disabled & Placeholder States

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementColorNotes
Disabled TextBad Sector (#46120a)On dark backgrounds
Disabled Text (alt)Null Pointer (#230905)On lighter backgrounds
Placeholder TextPhosphor Smoke (#efd5d1) at 50%Input hints
-
-

- Accessibility Note: Disabled UI elements must meet minimum - contrast where practical. If full contrast is not possible, add other visual - cues (for example, reduced opacity or a different font weight). -

-
-

Tabs

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementColor
Active Tab BackgroundCore Meltdown (#340d07)
Inactive Tab BackgroundEvent Horizon (#110402)
Active Tab TextGhost Pixel (#f7eae8)
Inactive Tab TextPhosphor Smoke (#efd5d1)
Tab BorderDark Packet (#691b0f)
Modified IndicatorStack Overglow (#d4a759)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementColor
BackgroundNull Pointer (#230905)
Active Item TextGhost Pixel (#f7eae8)
Inactive Item TextPhosphor Smoke (#efd5d1)
Selected Item BGBad Sector (#46120a)
Hover State BGDark Packet (#691b0f) at 50%
Section HeadersPhantom Current (#e7c0ba)
-

Status Bar

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
StateBackgroundText
NormalBricked Board (#7a2012)Ghost Pixel (#f7eae8)
ErrorDigital Rust (#af2e1a)Ghost Pixel (#f7eae8)
WarningAmber Alert (#bf5747)Ghost Pixel (#f7eae8)
Debug ModeBlue Screen (#8791b0)Event Horizon (#110402)
-

Gutter Indicators

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
IndicatorColorShape / Style
Breakpoint - Amber Alert (#bf5747) fill, - Event Horizon border - Circle
Breakpoint (disabled)Amber Alert (#bf5747) at 40%Circle outline
Current Execution LineStack Overglow (#d4a759) outlineArrow or ring
Error MarkerAmber Alert (#bf5747)Circle
Warning MarkerStack Overglow (#d4a759)Diamond
Info MarkerDead Thread (#6fa5a0)Square
Hint MarkerPhosphor Smoke (#efd5d1) at 50%Dot
Git AddedMemory Leek (#8fa667)Vertical bar
Git ModifiedDead Thread (#6fa5a0)Vertical bar
Git DeletedAmber Alert (#bf5747)Triangle pointing right
-
-

- Note: Gutter markers reuse the diagnostic and diff - palettes for semantic consistency. -

-
-

Inlay Hints & Code Lens

-

Inlay Hints (parameter names, inferred types)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementColorStyle
Hint TextPhosphor Smoke (#efd5d1) at 50%italic recommended
Hint BackgroundTransparent or Bad Sector at 20%Subtle only
Hint Border/PaddingNone or minimal
-

Code Lens (references, test runners, action links)

- - - - - - - - - - - - - - - - - - - - -
ElementColorNotes
Code Lens TextPhosphor Smoke (#efd5d1) at 70%Above function/class
Code Lens HoverPhantom Current (#e7c0ba)On mouse hover
-
-

- Note: Inlay hints and code lens must never have higher - contrast than primary code tokens. They are supplementary information. They - must fade into the background when not focused. -

-
-

Minimap & Overview Ruler

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementColorNotes
Minimap BackgroundEvent Horizon (#110402)Match editor background
Minimap CodeBad Sector (#46120a)Low-contrast code silhouette
Minimap SelectionDark Packet (#691b0f) at 50%Visible but subtle
Minimap Search MatchStack Overglow (#d4a759) at 40%Highlight find results
Minimap ErrorAmber Alert (#bf5747) at 60%Error locations
Minimap WarningStack Overglow (#d4a759) at 40%Warning locations
Overview Ruler BGCore Meltdown (#340d07)Scrollbar track area
Overview Ruler SelectionDark Packet (#691b0f)Current view indicator
-

Panels & Popups

-

Panel Backgrounds

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PanelBackgroundNotes
TerminalEvent Horizon (#110402)Match editor for seamless feel
Problems PanelCore Meltdown (#340d07)Subtle separation from editor
Output PanelCopper Trace (#d7968c)
Debug ConsoleCopper Trace (#d7968c)
Search PanelCopper Trace (#d7968c)
Panel HeadersBad Sector (#46120a)Title bar of panels
Panel Header TextPhosphor Smoke (#efd5d1)
-

Tooltips & Hover Cards

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementColorNotes
BackgroundCore Meltdown (#340d07)
TextGhost Pixel (#f7eae8)
BorderDark Packet (#691b0f)1px solid
Code in TooltipMemory Leek (#8fa667)Inline code snippets
Link in TooltipPhantom Current (#e7c0ba)Underlined
-

Autocomplete & IntelliSense

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementColorNotes
Popup BackgroundCore Meltdown (#340d07)
Popup BorderDark Packet (#691b0f)1px solid
Item TextGhost Pixel (#f7eae8)
Item Text (dimmed)Phosphor Smoke (#efd5d1)Type signatures, paths
Selected Item BGBad Sector (#46120a)
Selected Item BorderDark Packet (#691b0f)Optional left accent
Match HighlightStack Overglow (#d4a759)Matched characters in fuzzy find
Icon: FunctionStack Overglow (#d4a759)
Icon: VariableGhost Pixel (#f7eae8)
Icon: Class/TypeDead Thread (#6fa5a0)
Icon: KeywordFatal Error (#cf8175)
Icon: ConstantBright Stack Overglow (#d3ae6e)
Icon: StringMemory Leek (#8fa667)
-

Parameter Hints (signature help popups)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementColorNotes
BackgroundCore Meltdown (#340d07)
Active ParameterStack Overglow (#d4a759)Currently typed parameter
Inactive ParametersPhosphor Smoke (#efd5d1)
SeparatorCopper Trace (#d7968c)Commas between params
-
-

Terminal Configuration

-

ANSI Color Mapping

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ANSI SlotColor NameHex Code
BlackEvent Horizon#110402
RedDigital Rust#af2e1a
GreenMemory Leek#8fa667
YellowStack Overglow#d4a759
BlueBlue Screen#8791b0
MagentaFractured Shell#ba5a7d
CyanDead Thread#6fa5a0
WhitePhosphor Smoke#efd5d1
Bright BlackBad Sector#46120a
Bright RedFatal Error#cf8175
Bright GreenBright Memory Leek#94a577
Bright YellowBright Stack Overglow#d3ae6e
Bright BlueBright Blue Screen#999eaf
Bright MagentaBright Fractured Shell#ba6b88
Bright CyanBright Dead Thread#7fa5a1
Bright WhiteGhost Pixel#f7eae8
-

Terminal Defaults

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementColor
Default ForegroundGhost Pixel (#f7eae8)
Default BackgroundEvent Horizon (#110402)
CursorStack Overglow (#d4a759)
Cursor TextEvent Horizon (#110402)
Selection BackgroundDark Packet (#691b0f) at 70%
Bold TextUse Bright variant of current color
-

256-Color & Truecolor Guidance

-
    -
  • - The 16 ANSI colors above are the canonical core for 256-color terminals -
  • -
  • - Interpolate colors 16–255 between palette colors where possible -
  • -
  • - Truecolor-capable terminals (24-bit) use the exact hex values from - the palette -
  • -
  • - If truecolor is available, prefer it over approximated 256-color - values -
  • -
-
-

Implementation Guidelines

-

Accessibility Standards

-

Minimum Contrast Requirements

-

- Maintain 4.5:1 minimum contrast ratio (WCAG 2.1 Level AA) - for all text. These canonical pairs are verified: -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ForegroundBackgroundContrast RatioStatus
Ghost Pixel (#f7eae8)Event Horizon (#110402)~17.17:1✓ Pass
Dim Thermal Throttle (#ac6d4a)Event Horizon (#110402)~4.84:1✓ Pass
Amber Alert (#bf5747)Event Horizon (#110402)~4.5:1⚠ Borderline: use --amber-alert-text (#cb6353, ~5.23:1) for guaranteed AA
Phosphor Smoke (#efd5d1)Core Meltdown (#340d07)~12.5:1✓ Pass
Ghost Pixel (#f7eae8)Bricked Board (#7a2012)~8.76:1✓ Pass
Bad Sector (#46120a)Core Meltdown (#340d07)~1.12:1⚠ Decorative only
-
-

- Note: Low-contrast pairs like disabled text on - backgrounds are permitted only for decorative or non-essential - elements. Critical information must always meet 4.5:1. -

-
-

Non-Color Cues

-

- Errors, warnings, and critical states must not rely on color alone. - Use these secondary cues: -

-
    -
  • - Errors: Red color + wavy underline + error icon (⚠ or - ✗) -
  • -
  • - Warnings: Yellow color + wavy underline + warning icon -
  • -
  • - Info/Hints: Blue color + dotted underline or icon -
  • -
  • Success: Green color + checkmark icon
  • -
  • - Links: Color + solid underline (hover reveals - additional state) -
  • -
  • - Spelling Errors: Dotted underline (distinct style from - error underlines) -
  • -
-

- Color Vision Deficiency Considerations -

-
    -
  • Test with protanopia, deuteranopia, and tritanopia simulations
  • -
  • - Give red/green distinctions (diff views, success/error) non-color - differentiators -
  • -
  • Document an alternative high-contrast mode
  • -
-

Consistency Requirements

-
    -
  1. - Priority Order: Follow token classification hierarchy - strictly -
  2. -
  3. - Fallback Handling: Use Ghost Pixel for - unrecognized tokens -
  4. -
  5. - Semantic Consistency: Same meaning = same color across - all languages -
  6. -
  7. - Warmth Balance: Maintain the warm rust-copper tone - throughout -
  8. -
-

UI Design Guidelines

-

- User-interface theming (surfaces, elevation, interaction physics, and - component-level definitions for buttons, inputs, menus, modals, and the - rest) is specified separately in the Digital Rust UI - Specification, demonstrated live on the UI - Guidelines page and canonical in - Digital Rust UI Specification.md (download). This document owns the - palette, syntax token classification, editor chrome, and terminal - configuration; the UI Specification owns everything a full application - theme needs beyond the editor. The summaries below cover the colour-usage - rules that ports most commonly need when extending Digital Rust past the - editor. -

-

Visual Hierarchy

-

- Apply colors based on functional importance and user interaction patterns: -

-
    -
  • - High Priority: Interactive elements, CTAs, error states - → Digital Rust (#af2e1a), - Amber Alert (#bf5747) -
  • -
  • - Medium Priority: Headers, navigation, secondary actions - → Fatal Error (#cf8175), - Stack Overglow (#d4a759) -
  • -
  • - Low Priority: Body text, supporting information → - Ghost Pixel (#f7eae8), - Phosphor Smoke (#efd5d1) -
  • -
-

Component Colour Guidelines

-

Borders and Separators

-
    -
  • - Primary Borders: Dark Packet (#691b0f) at 2-4px width -
  • -
  • Subtle Dividers: Bad Sector (#46120a) at 1px width
  • -
  • Focus Rings: Stack Overglow (#d4a759) at 2px width
  • -
  • - Container Edges: Core Meltdown (#340d07) for nested depth -
  • -
-

Shadows and Depth

-
    -
  • NEVER use pure black (#000) shadows. They are cold and dead; always use warm shadow tones
  • -
  • - Use Bad Sector (#46120a) / --dr-surface-highlight for offset shadows -
  • -
  • - Use Event Horizon (#110402) only for legacy blunt shadows that need maximum depth -
  • -
  • - No gradients, no blur, no transparency: solid colors only (atmospheric noise/scanline overlays excepted) -
  • -
  • - Interactive and elevated elements add the inner highlight, - inset 0 1px 0 rgba(255, 255, 255, 0.1), stacked under the - offset shadow — the bevel of the panel -
  • -
-

State Indicators

-
    -
  • Success: Memory Leek (#8fa667)
  • -
  • Warning: Stack Overglow (#d4a759)
  • -
  • - Error: Amber Alert (#bf5747) or - Digital Rust (#af2e1a) for critical -
  • -
  • Info: Dead Thread (#6fa5a0)
  • -
  • Processing: Stack Overglow (#d4a759) with animation
  • -
-

Link Styling

-
    -
  • - Default: Phantom Current (#e7c0ba) as specified in palette -
  • -
  • Hover: Fatal Error (#cf8175) with optional underline
  • -
  • Visited: Corrupted Cache (#dfaba3)
  • -
  • Active: Digital Rust (#af2e1a)
  • -
-

Theme Philosophy

-

- Digital Rust embraces the aesthetic of system degradation and hardware - failure while maintaining professional usability. The theme should evoke: -

-
    -
  • - Warmth: Through rust and copper tones rather than cold - blues -
  • -
  • - Nostalgia: Terminal aesthetics meet modern requirements -
  • -
  • - Clarity: Despite the "corrupted" naming, readability is - paramount -
  • -
  • - Character: Each color name tells a story of digital - decay -
  • -
  • - Semantic Consistency: Identical semantic roles are - rendered consistently across languages, even when their surface syntax - differs -
  • -
  • - Tactility: Interactive elements behave like chunky old - hardware — pressable, beveled, and physically responsive (defined in - the UI Specification) -
  • -
-

Testing Requirements

-

Required Testing Scenarios

-
    -
  1. - Language Coverage: Test with at least 5 different - programming languages -
  2. -
  3. - File Types: Verify Markdown, JSON, XML, and - configuration files -
  4. -
  5. - Diff Views: Make sure that additions and deletions are clearly - distinguishable -
  6. -
  7. - Terminal Emulation: Validate the ANSI color representation -
  8. -
  9. - Light Sensitivity: Provide documentation for users - sensitive to warm tones -
  10. -
-

Performance Considerations

-
    -
  • Colors must render consistently across sRGB and P3 color spaces
  • -
  • Test on both high-contrast and standard displays
  • -
  • Verify legibility at zoom levels from 50% to 200%
  • -
-

Implementation Notes

-

Canonical Source

-

- This specification is the canonical source of truth for - Digital Rust. All editor-specific theme implementations (VS Code, - JetBrains, Neovim, Sublime Text, terminals, web applications, and others) are - projections of this specification. -

-

- If a conflict arises between an implementation and this spec, this - document takes precedence. Document any intentional deviations in the - implementation. -

-

Handling Coarse Tokenization

-

- Some editors or language grammars provide limited token granularity. If - fine-grained semantic distinctions are not possible: -

-
    -
  1. -

    - Built-ins vs. User Definitions: If built-in - functions cannot be distinguished from user-defined functions, use - Stack Overglow (#d4a759) for all functions. -

    -
  2. -
  3. -

    - Types vs. Variables: If types cannot be - distinguished from variables, prefer - Ghost Pixel (#f7eae8) as the neutral fallback. -

    -
  4. -
  5. -

    - Ambiguous Tokens: Favor readability and contrast over - a semantic color that does not map cleanly. -

    -
  6. -
  7. -

    - Missing Scopes: For tokens not covered by the - grammar, fall back to Ghost Pixel (#f7eae8). -

    -
  8. -
-
-

- Guiding Principle: If in doubt, prioritize - readability and visual comfort over strict semantic accuracy. -

-
-
-

Version History

-
    -
  • - v1.2.2: Technical prose rewritten in Simplified Technical English -
      -
    • Rules, notes, guidelines, and implementation text rewritten for short sentences, condition-first instructions, and consistent verbs
    • -
    • No palette, token, or hex value changes
    • -
    • Brand-voice passages (overview, theme philosophy, design principles) unchanged
    • -
    -
  • -
  • - v1.2.1: UI specification accessibility and token fixes -
      -
    • Primary button hover fill changed to Firewall Breach: Ghost Pixel on raw Amber Alert failed WCAG AA (3.83:1); Firewall Breach passes at 4.66:1
    • -
    • Semantic action/feedback/border-colour token layer added to tokens.css; component code now references semantic tokens, not raw palette values
    • -
    • Ambient texture (scanline/noise overlay) implementation documented; overlays now suppress under prefers-reduced-motion
    • -
    • Loading/skeleton state specified; unused decorative tokens removed
    • -
    -
  • -
  • - v1.2.0: UI specification added -
      -
    • New sibling document: the Digital Rust UI Specification, covering surfaces, elevation, interaction physics, and component definitions
    • -
    • This document retains the palette, syntax tokens, editor chrome, terminal configuration, and colour-usage summaries
    • -
    • Component colour guidance updated to include the inner-highlight bevel rule
    • -
    -
  • -
  • - v1.1.1: Showcase and spec alignment fixes -
      -
    • Fixed this token color: keyword → constant (Bright Stack Overglow)
    • -
    • Fixed ErrorKind::Other enum variant: variable → constant (Bright Stack Overglow)
    • -
    • Fixed HTML tag names in code sample: selector → Dead Thread
    • -
    • Fixed diff modification line text color to Ghost Pixel (spec default)
    • -
    • Clarified Amber Alert text rendering: spec token uses #bf5747 but text rendering on dark backgrounds uses WCAG-AA --amber-alert-text (#cb6353)
    • -
    • Aligned copyright year across all spec documents
    • -
    -
  • -
  • - v1.1.0: Spec corrections and normalizations -
      -
    • Corrected contrast ratios to measured WCAG 2.1 values
    • -
    • Spelling errors changed to dotted underline for distinguishability from error wavy underlines
    • -
    • Primary borders clarified as 2–4px per design system
    • -
    • Shadow guidance: use Bad Sector / --dr-surface-highlight, not Event Horizon
    • -
    • Gradients/blur/transparency explicitly prohibited (noise/scanline overlays excepted)
    • -
    -
  • -
  • - v1.0.0: Initial specification release -
      -
    • - Theme inspired by system failures, kernel panics, and the beauty of - digital entropy -
    • -
    • Color names honor the poetry of corrupted systems
    • -
    -
  • -
-
-

Digital Rust © 2025–2026 by Kat - Suricata is licensed under CC - BY - 4.0.

-

Chaos reigns.

-
-
-
- - - - \ No newline at end of file diff --git a/specstyle.css b/specstyle.css deleted file mode 100644 index 3d0be27..0000000 --- a/specstyle.css +++ /dev/null @@ -1,847 +0,0 @@ -/* ============================================================ - Digital Rust Spec Page — Normalized to Design System - Uses the canonical token system from style.css - ============================================================ */ - - -/* ---- Reset & Base ---- */ - -*, -*::before, -*::after { - box-sizing: border-box; - font-variant-ligatures: common-ligatures discretionary-ligatures no-historical-ligatures contextual; - font-variant-numeric: oldstyle-nums tabular-nums; - hyphens: auto; - font-kerning: normal; - font-optical-sizing: auto; - text-rendering: optimizeLegibility; -} - -body { - margin: 0; - min-height: 100vh; - font-family: var(--dr-font-body); - font-weight: 500; - color: var(--dr-text-primary); - background-color: var(--dr-surface-base); - line-height: 1.6; -} - -/* ---- Non-Negotiable Atmospheric Overlays ---- */ - -.noise-overlay { - content: ""; - position: fixed; - inset: 0; - background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); - opacity: 0.02; - pointer-events: none; - z-index: var(--dr-z-noise); -} - -.scanline-overlay { - content: ""; - position: fixed; - inset: 0; - background: repeating-linear-gradient( - 0deg, - transparent, - transparent 2px, - var(--dr-scanline) 2px, - var(--dr-scanline) 4px - ); - pointer-events: none; - z-index: calc(var(--dr-z-noise) - 1); -} - -/* ---- Links — Design System Token Compliant ---- */ - -a { - color: var(--dr-text-link); - text-decoration: underline; - text-underline-offset: 3px; - text-decoration-thickness: 1px; - transition: color var(--dr-transition-fast), - text-decoration-thickness var(--dr-transition-fast); -} - -a:hover, -a:focus-visible { - color: var(--dr-text-link-hover); - text-decoration-thickness: 2px; -} - -a:visited { - color: var(--dr-text-link-visited); -} - -a:active { - color: var(--digital-rust); -} - -::selection { - background: var(--digital-rust); - color: var(--dr-text-on-accent); -} - -:focus-visible { - outline: 2px solid var(--stack-overglow); - outline-offset: 2px; -} - -/* ---- Layout Shell ---- */ - -.site-shell { - position: relative; - z-index: var(--dr-z-content); - display: grid; - grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); - gap: clamp(1.25rem, 3vw, 3rem); - padding: clamp(1.25rem, 3vw, 3.5rem); - max-width: 1600px; - margin: 0 auto; -} - -/* ---- TOC Toggle (Mobile) ---- */ - -.toc-toggle { - display: none; - position: sticky; - top: 0; - z-index: 3; - width: 100%; - border: var(--dr-border); - background: var(--dr-surface-elevated); - color: var(--dr-text-primary); - font-family: var(--dr-font-heading); - font-variation-settings: "slnt" 0; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - padding: var(--dr-space-md) var(--dr-space-lg); - box-shadow: var(--dr-shadow-offset-md), - var(--dr-shadow-inner-highlight); - cursor: pointer; - transition: transform var(--dr-transition-fast), - box-shadow var(--dr-transition-fast); -} - -.toc-toggle:hover { - transform: translate(-2px, -2px); - box-shadow: var(--dr-shadow-hover-md), - var(--dr-shadow-glow-sm); -} - -.toc-toggle:active { - transform: translate(2px, 2px); - box-shadow: var(--dr-shadow-active); -} - -/* ---- TOC Panel ---- */ - -.toc-panel { - position: sticky; - top: clamp(1rem, 3vw, 2rem); - align-self: start; - height: fit-content; -} - -.toc-panel__inner { - background: var(--dr-surface-elevated); - border: var(--dr-border); - border-radius: var(--dr-radius-lg); - padding: var(--dr-space-lg); - box-shadow: var(--dr-shadow-offset-md), - var(--dr-shadow-inner-highlight); -} - -.toc-eyebrow { - font-family: var(--dr-font-heading); - font-variation-settings: "slnt" 0; - font-size: var(--dr-text-xs); - text-transform: uppercase; - letter-spacing: 0.18em; - color: var(--corrupted-cache); - margin: 0 0 var(--dr-space-xs); -} - -.toc-panel__hint { - font-size: var(--dr-text-sm); - color: var(--corrupted-cache); - margin-bottom: var(--dr-space-md); -} - -#TOC { - font-size: var(--dr-text-sm); - max-height: calc(100vh - 6rem); - overflow: auto; - padding-right: var(--dr-space-sm); -} - -#TOC ul { - list-style: none; - margin: 0; - padding-left: 0.95rem; -} - -#TOC>ul { - padding-left: 0; -} - -#TOC li { - margin: 0.2rem 0; -} - -#TOC a { - display: inline-flex; - width: 100%; - gap: var(--dr-space-sm); - align-items: center; - padding: 0.2rem 0.25rem; - border-left: 2px solid transparent; - color: var(--dr-text-secondary); - text-decoration: none; - transition: color var(--dr-transition-fast), - border-color var(--dr-transition-fast); -} - -#TOC a:hover { - color: var(--dr-text-primary); - border-color: var(--dr-surface-highlight); -} - -#TOC a.is-active { - color: var(--dr-text-primary); - border-color: var(--digital-rust); -} - -/* ---- Main Spec Document ---- */ - -.spec-main { - min-width: 0; -} - -.spec-document { - background: var(--dr-surface-base); - border-radius: var(--dr-radius-lg); - padding: clamp(var(--dr-space-lg), 3vw, var(--dr-space-xl)); - border: var(--dr-border); - box-shadow: var(--dr-shadow-offset-lg), - var(--dr-shadow-inner-highlight); -} - -/* ---- Headings — Rajdhani, Design System Tokenized ---- */ - -.spec-document h1, -.spec-document h2, -.spec-document h3, -.spec-document h4, -.spec-document h5, -.spec-document h6 { - font-family: var(--dr-font-heading); - font-variation-settings: "slnt" 0; - font-weight: 700; - letter-spacing: -0.02em; - line-height: 1.3; -} - -.spec-document h1 { - color: var(--fatal-error); - font-size: clamp(var(--dr-text-2xl), 5vw, var(--dr-text-3xl)); - margin-top: 0; - margin-bottom: var(--dr-space-sm); -} - -.spec-document h2 { - color: var(--fatal-error); - font-size: var(--dr-text-xl); - margin-top: var(--dr-space-xl); - margin-bottom: var(--dr-space-md); - text-transform: uppercase; - letter-spacing: 0.1em; - border-left: var(--dr-border-thick); - border-left-color: var(--digital-rust); - padding-left: var(--dr-space-md); -} - -.spec-document h3 { - color: var(--copper-trace); - font-size: var(--dr-text-lg); - margin-top: var(--dr-space-xl); - margin-bottom: var(--dr-space-sm); -} - -.spec-document h4 { - color: var(--copper-trace); - font-size: var(--dr-text-lg); - font-weight: 600; - margin-top: var(--dr-space-lg); - margin-bottom: var(--dr-space-sm); -} - -.spec-document h5 { - color: var(--dr-text-primary); - font-size: var(--dr-text-lg); - font-weight: 600; - margin-top: var(--dr-space-lg); - margin-bottom: var(--dr-space-sm); -} - -.spec-document h6 { - color: var(--dr-text-secondary); - font-size: var(--dr-text-base); - font-weight: 600; - margin-top: var(--dr-space-md); - margin-bottom: var(--dr-space-sm); -} - -/* ---- Spec Lede ---- */ - -.spec-lede { - font-size: var(--dr-text-lg); - color: var(--copper-trace); - max-width: 60ch; - line-height: 1.45; -} - -/* ---- Meta Bar ---- */ - -.spec-meta { - display: flex; - flex-wrap: wrap; - gap: var(--dr-space-md); - margin: var(--dr-space-lg) 0 var(--dr-space-xl); - padding: var(--dr-space-md) var(--dr-space-lg); - background: var(--dr-surface-elevated); - border: var(--dr-border); - box-shadow: var(--dr-shadow-offset-sm), - var(--dr-shadow-inner-highlight); -} - -.spec-meta__item { - flex: 1 1 200px; -} - -.spec-meta__label { - display: block; - font-family: var(--dr-font-heading); - font-variation-settings: "slnt" 0; - font-size: var(--dr-text-xs); - text-transform: uppercase; - letter-spacing: 0.2em; - color: var(--dr-text-primary); - margin-bottom: var(--dr-space-xs); -} - -.spec-meta__value { - font-size: var(--dr-text-base); - font-weight: 600; -} - -.status-chip { - display: inline-flex; - align-items: center; - gap: var(--dr-space-sm); - padding: var(--dr-space-xs) var(--dr-space-md); - border-radius: var(--dr-radius); - background: var(--dr-surface-secondary); - border: var(--dr-border-subtle); -} - -.status-chip::before { - content: ""; - width: 0.45rem; - height: 0.45rem; - border-radius: 50%; - background: var(--digital-rust); - box-shadow: 0 0 12px var(--digital-rust); -} - -/* ---- Buttons — Offset Shadow Pattern ---- */ - -.hero-actions { - display: flex; - flex-wrap: wrap; - gap: var(--dr-space-sm); - margin-left: auto; -} - -.btn { - border: 2px solid var(--dark-packet); - border-radius: var(--dr-radius); - padding: var(--dr-space-sm) var(--dr-space-lg); - font-family: var(--dr-font-heading); - font-variation-settings: "slnt" 0; - font-weight: 600; - font-size: var(--dr-text-sm); - cursor: pointer; - transition: transform var(--dr-transition-fast), - box-shadow var(--dr-transition-fast), - background-color var(--dr-transition-fast), - border-color var(--dr-transition-fast), - color var(--dr-transition-fast); - text-transform: uppercase; - letter-spacing: 0.05em; - text-decoration: none; - display: inline-flex; - align-items: center; - gap: var(--dr-space-sm); - box-shadow: var(--dr-shadow-offset-sm), - var(--dr-shadow-inner-highlight); -} - -.btn-primary { - background: var(--digital-rust); - border-color: var(--digital-rust); - color: var(--dr-text-on-accent); - box-shadow: var(--dr-shadow-offset-md), - var(--dr-shadow-inner-highlight); -} - -.btn-primary:hover { - background: var(--amber-alert); - border-color: var(--amber-alert); - transform: translate(-2px, -2px); - box-shadow: var(--dr-shadow-hover-md), - var(--dr-shadow-glow-sm), - var(--dr-shadow-inner-highlight); -} - -.btn-primary:active { - transform: translate(2px, 2px); - box-shadow: var(--dr-shadow-active); -} - -.btn-secondary { - border-color: var(--dark-packet); - color: var(--dr-text-secondary); - background: transparent; -} - -.btn-secondary:hover { - border-color: var(--digital-rust); - color: var(--dr-text-primary); - background: var(--dr-surface-elevated); - transform: translate(-2px, -2px); - box-shadow: var(--dr-shadow-hover-md), - var(--dr-shadow-inner-highlight); -} - -.btn-secondary:active { - transform: translate(2px, 2px); - box-shadow: var(--dr-shadow-active); -} - -/* ---- Live Demo ---- */ - -.live-demo { - display: grid; - grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); - gap: var(--dr-space-lg); - margin: var(--dr-space-xl) 0 var(--dr-space-2xl); - padding: var(--dr-space-lg); - background: var(--dr-surface-elevated); - border: var(--dr-border); - border-radius: var(--dr-radius-lg); - box-shadow: var(--dr-shadow-offset-md), - var(--dr-shadow-inner-highlight); -} - -.live-demo>div { - min-width: 0; -} - -.demo-heading { - display: flex; - align-items: center; - justify-content: space-between; - font-size: var(--dr-text-xs); - text-transform: uppercase; - letter-spacing: 0.2em; - color: var(--dr-text-secondary); - margin-bottom: var(--dr-space-sm); -} - -.demo-status { - display: inline-flex; - align-items: center; - gap: var(--dr-space-sm); -} - -.demo-status::before { - content: ""; - width: 0.4rem; - height: 0.4rem; - border-radius: 50%; - background: var(--memory-leek); - box-shadow: 0 0 12px var(--memory-leek); -} - -pre { - margin: 0; - padding: var(--dr-space-lg); - background: var(--dr-surface-base); - color: var(--memory-leek); - border-radius: var(--dr-radius); - overflow: auto; - font-family: var(--dr-font-mono); - font-size: var(--dr-text-sm); - line-height: 1.5; - border: var(--dr-border); - border-left: var(--dr-border-thick); - border-left-color: var(--stack-overglow); - hyphens: none; -} - -code { - font-family: inherit; - white-space: pre; -} - -.demo-legend { - display: flex; - flex-direction: column; - gap: var(--dr-space-sm); -} - -.legend-item { - display: flex; - justify-content: space-between; - align-items: center; - padding: var(--dr-space-sm) var(--dr-space-md); - font-size: var(--dr-text-sm); - border: var(--dr-border-subtle); - background: var(--dr-surface-secondary); - border-radius: var(--dr-radius); -} - -.legend-chip { - width: 0.85rem; - height: 0.85rem; - border-radius: var(--dr-radius-sm); -} - -/* ---- Token Colors — Same as Main Site ---- */ - -.token-keyword { - color: var(--fatal-error); - font-weight: bold; -} - -.token-function { - color: var(--stack-overglow); -} - -.token-type { - color: var(--dead-thread); -} - -.token-string { - color: var(--memory-leek); -} - -.token-constant { - color: var(--bright-stack-overglow); -} - -.token-number { - color: var(--thermal-throttle); -} - -.token-comment { - color: var(--dim-thermal-throttle); - font-style: italic; -} - -.token-operator { - color: var(--copper-trace); -} - -/* ---- Tables — Design System Tokenized ---- */ - -table { - width: 100%; - border-collapse: collapse; - font-variant-numeric: tabular-nums; - background: var(--dr-surface-elevated); - border: var(--dr-border); -} - -th, -td { - padding: var(--dr-space-sm) var(--dr-space-md); - text-align: center; - border-bottom: var(--dr-border-subtle); -} - -th { - background: var(--dr-surface-elevated); - font-family: var(--dr-font-heading); - font-variation-settings: "slnt" 0; - font-weight: 700; - font-size: var(--dr-text-xs); - color: var(--copper-trace); - text-transform: uppercase; - letter-spacing: 0.2em; -} - -tbody tr:last-child td { - border-bottom: none; -} - -/* ---- Color Lab (Palette Grids) ---- */ - -.table-scroll { - overflow-x: auto; - margin-top: var(--dr-space-md); -} - -.color-lab { - margin-bottom: var(--dr-space-xl); -} - -.color-grid, -.ansi-grid { - display: grid; - gap: var(--dr-space-sm); - margin: var(--dr-space-lg) 0 var(--dr-space-sm); -} - -.color-grid { - grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); -} - -.color-card { - padding: var(--dr-space-sm); - border: var(--dr-border); - border-radius: var(--dr-radius); - background: var(--dr-surface-secondary); - display: flex; - flex-direction: column; - gap: var(--dr-space-sm); - box-shadow: var(--dr-shadow-offset-sm), - var(--dr-shadow-inner-highlight); - transition: transform var(--dr-transition-fast), - box-shadow var(--dr-transition-fast); - cursor: pointer; -} - -.color-card:hover { - transform: translate(-2px, -2px); - box-shadow: var(--dr-shadow-hover-md), - var(--dr-shadow-glow-sm); -} - -.color-card:active { - transform: translate(2px, 2px); - box-shadow: var(--dr-shadow-active); -} - -.color-card__swatch { - border-radius: var(--dr-radius); - height: 80px; - border: var(--dr-border-subtle); -} - -.color-card__code { - font-family: var(--dr-font-mono); - font-size: var(--dr-text-xs); - letter-spacing: 0.05em; -} - -.ansi-grid { - grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); -} - -.ansi-chip { - display: flex; - align-items: center; - gap: var(--dr-space-sm); - padding: var(--dr-space-sm) var(--dr-space-md); - background: var(--dr-surface-secondary); - border: var(--dr-border); - border-radius: var(--dr-radius); - box-shadow: var(--dr-shadow-offset-sm), - var(--dr-shadow-inner-highlight); - transition: transform var(--dr-transition-fast), - box-shadow var(--dr-transition-fast); - cursor: pointer; -} - -.ansi-chip:hover { - transform: translate(-2px, -2px); - box-shadow: var(--dr-shadow-hover-md), - var(--dr-shadow-glow-sm); -} - -.ansi-chip:active { - transform: translate(2px, 2px); - box-shadow: var(--dr-shadow-active); -} - -.ansi-chip span { - font-size: var(--dr-text-sm); -} - -.ansi-chip .legend-chip { - width: 1.25rem; - height: 1.25rem; - border-radius: var(--dr-radius-sm); -} - -/* ---- Blockquotes — Left Border Accent ---- */ - -blockquote { - margin: var(--dr-space-lg) 0; - padding: var(--dr-space-sm) var(--dr-space-md); - background: var(--core-meltdown-40); - color: var(--dr-text-secondary); - font-style: italic; -} - -/* ---- Horizontal Rules — Dark Packet Lines ---- */ - -hr { - border: none; - border-top: var(--dr-border); - margin: var(--dr-space-xl) auto; - width: 50%; -} - -/* ---- Lists ---- */ - -ul, -ol { - padding-left: 1.5rem; -} - -li { - margin: 0.35rem 0; -} - -/* ---- Scrollbar — Matches Main Site ---- */ - -::-webkit-scrollbar { - width: 8px; - height: 8px; -} - -::-webkit-scrollbar-track { - background: transparent; -} - -::-webkit-scrollbar-thumb { - background: var(--dark-packet); - border-radius: 4px; - border: 2px solid var(--dr-surface-secondary); -} - -::-webkit-scrollbar-thumb:hover { - background: var(--digital-rust); -} - -* { - scrollbar-width: thin; - scrollbar-color: var(--dark-packet) transparent; -} - -/* ---- Responsive ---- */ - -@media (max-width: 1100px) { - .site-shell { - grid-template-columns: 1fr; - } - - .toc-toggle { - display: block; - } - - .toc-panel { - position: fixed; - top: 0; - bottom: 0; - left: 0; - width: 320px; - transform: translateX(-100%); - transition: transform var(--dr-duration-normal) var(--dr-ease-out-expo); - z-index: 4; - } - - .toc-panel.is-open { - transform: translateX(0); - } - - .toc-panel__inner { - height: 100%; - border-radius: 0; - } - - .live-demo { - grid-template-columns: 1fr; - } -} - -@media (max-width: 640px) { - .spec-meta { - flex-direction: column; - } - - .hero-actions { - width: 100%; - justify-content: flex-start; - } - - pre { - font-size: var(--dr-text-xs); - } -} - -/* ---- Reduced Motion ---- */ - -@media (prefers-reduced-motion: reduce) { - *, - *::before, - *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - scroll-behavior: auto !important; - } - - .btn:hover, - .btn:active, - .color-card:hover, - .color-card:active, - .ansi-chip:hover, - .ansi-chip:active { - transform: none; - } -} - -/* ---- Print ---- */ - -@media print { - body { - background: white; - color: black; - } - - .site-shell, - .spec-document { - padding: 0; - background: none; - box-shadow: none; - border: none; - } - - .toc-panel, - .toc-toggle, - .live-demo, - .color-grid, - .ansi-grid, - .noise-overlay, - .scanline-overlay { - display: none; - } -} diff --git a/src/lib/components/AccessibilityPanel.svelte b/src/lib/components/AccessibilityPanel.svelte index 790117a..f9d8a57 100644 --- a/src/lib/components/AccessibilityPanel.svelte +++ b/src/lib/components/AccessibilityPanel.svelte @@ -36,7 +36,9 @@
  • Links Solid underline + Phantom Current
  • Errors Amber Alert + wavy underline + icon
  • Warnings Stack Overglow wavy underline
  • -
  • Spelling Amber Alert dotted underline variant
  • +
  • + Spelling Amber Alert dotted underline variant +
  • @@ -58,9 +60,7 @@ border: var(--dr-border); border-radius: var(--dr-radius); background: var(--dr-surface-elevated); - box-shadow: - var(--dr-shadow-offset-md), - var(--dr-shadow-inner-highlight); + box-shadow: var(--dr-shadow-offset-md), var(--dr-shadow-inner-highlight); } .accessibility-panel .section-title { diff --git a/src/lib/components/LanguageShowcase.svelte b/src/lib/components/LanguageShowcase.svelte index 49e40fd..f38cf99 100644 --- a/src/lib/components/LanguageShowcase.svelte +++ b/src/lib/components/LanguageShowcase.svelte @@ -10,13 +10,48 @@ TypeScript ES2024
    -
    // Scoped diagnostic enforcing semantic priority
    -export class KernelProbe {
    -    readonly threshold: number = 85.5
    -    async ping(bus: SystemBus): Promise<void> {
    -        const reading = await bus.read("temp")
    -        if (reading > this.threshold) {
    -            throw new Error(`🔥 kernel panic: ${reading}°C`)
    +			
    // Scoped diagnostic enforcing semantic priority
    +export class KernelProbe {
    +    readonly threshold: number = 85.5
    +    async ping(bus: SystemBus): Promise<void> {
    +        const reading = await bus.read("temp")
    +        if (reading > this.threshold) {
    +            throw new Error(`🔥 kernel panic: ${reading}°C`)
             }
         }
     }
    @@ -33,14 +68,33 @@ @dataclass class Snapshot: name: str - ok: bool = True + ok: bool = True - def emit(self, metric: float) -> None: - print(f"{self.name}: {metric:.2f}") + def emit(self, metric: float) -> None: + print(f"{self.name}: {metric:.2f}") -RUN = Snapshot("ansi-map", True) -if __name__ == "__main__": - RUN.emit(4.50)
    +RUN = Snapshot("ansi-map", True) +if __name__ == "__main__": + RUN.emit(4.50)
    @@ -48,19 +102,42 @@ Rust 1.76
    -
    // Attributes + lifetimes share Dead Thread
    +			
    // Attributes + lifetimes share Dead Thread
     #[derive(Debug, Clone)]
    -pub struct Telemetry<'a> {
    -    buffer: &'a [u8],
    +pub struct Telemetry<'a> {
    +    buffer: &'a [u8],
         heat: f32,
     }
     
     impl Telemetry<'_> {
    -    pub fn check_integrity(&self) -> Result<bool, Error> {
    -        if self.heat > 95.0 {
    -            return Err(Error::new(ErrorKind::Other, "KERNEL PANIC"))
    +    pub fn check_integrity(&self) -> Result<bool, Error> {
    +        if self.heat > 95.0 {
    +            return Err(Error::new(ErrorKind::Other, "KERNEL PANIC"))
             }
    -        Ok(true)
    +        Ok(true)
         }
     }
    @@ -70,10 +147,16 @@ Markdown Spec prose -
    ## Digital Rust Guarantees
    -- Tokens inherit `Ghost Pixel` when undefined
    -- Links stay underlined [even offline](spec.md)
    -> Errors outrank keywords every time.
    +
    ## Digital Rust Guarantees
    +- Tokens inherit `Ghost Pixel` when undefined
    +- Links stay underlined [even offline](spec.md)
    +> Errors outrank keywords every time.
    @@ -82,12 +165,24 @@ Config
    {
    -  "editor": {
    -    "background": "#110402",
    -    "cursor": "#D4A759",
    -    "useRainbowBrackets": true
    +  "editor": {
    +    "background": "#110402",
    +    "cursor": "#D4A759",
    +    "useRainbowBrackets": true
       },
    -  "diagnostics": ["error:wavy", "warning:stack"]
    +  "diagnostics": ["error:wavy", "warning:stack"]
     }
    @@ -96,13 +191,26 @@ HTML + CSS Markup -
    <section class="panel">
    -  <h3>@keyframes glitch</h3>
    -</section>
    +			
    <section class="panel">
    +  <h3>@keyframes glitch</h3>
    +</section>
     
     .panel {
    -  border: 1px solid var(--dark-packet);
    -  color: var(--ghost-pixel);
    +  border: 1px solid var(--dark-packet);
    +  color: var(--ghost-pixel);
     }
    @@ -122,9 +230,22 @@ Shell / CLI Bash -
    rust@host$ digitalrust --apply --profile="dark"
    -rust@host$ export THEME="digital-rust"
    -rust@host$ printf "%s\n" $THEME
    +
    rust@host$ digitalrust --apply --profile="dark"
    +rust@host$ export THEME="digital-rust"
    +rust@host$ printf "%s\n" $THEME
    @@ -133,10 +254,20 @@ ANSI
    SELECT
    -    COUNT(*) AS total_panics
    +    COUNT(*) AS total_panics
     FROM errors
    -WHERE palette = 'digital-rust'
    -  AND severity IN ('fatal', 'critical');
    +WHERE palette = 'digital-rust' + AND severity IN ('fatal', 'critical');
    diff --git a/src/lib/components/PaletteSection.svelte b/src/lib/components/PaletteSection.svelte index e5ab30e..61d144c 100644 --- a/src/lib/components/PaletteSection.svelte +++ b/src/lib/components/PaletteSection.svelte @@ -14,7 +14,8 @@ class:brand={entry.id === 'digital-rust'} > - {#if entry.id === 'digital-rust'}{entry.name}{:else}{entry.name}{/if} + {#if entry.id === 'digital-rust'}{entry.name}{:else}{entry.name}{/if} {entry.hex.toUpperCase()} @@ -47,9 +48,7 @@ border-radius: var(--dr-radius); padding: var(--dr-space-lg); margin: var(--dr-space-xl) 0; - box-shadow: - var(--dr-shadow-offset-md), - var(--dr-shadow-inner-highlight); + box-shadow: var(--dr-shadow-offset-md), var(--dr-shadow-inner-highlight); font-family: var(--dr-font-mono); } @@ -134,9 +133,7 @@ background: var(--chip-bg, var(--dr-surface-base)); color: var(--chip-fg, var(--dr-text-primary)); position: relative; - box-shadow: - var(--dr-shadow-offset-sm), - var(--dr-shadow-inner-highlight); + box-shadow: var(--dr-shadow-offset-sm), var(--dr-shadow-inner-highlight); transition: transform var(--dr-transition-fast), box-shadow var(--dr-transition-fast); diff --git a/src/lib/components/PreviewGallery.svelte b/src/lib/components/PreviewGallery.svelte index d11a8d9..07827e9 100644 --- a/src/lib/components/PreviewGallery.svelte +++ b/src/lib/components/PreviewGallery.svelte @@ -40,7 +40,13 @@
    {#each images as image, i (image.full)} {/each}
    @@ -64,8 +70,10 @@ aria-label="Previous image" onclick={() => show(current - 1)}>PREV - show(current + 1)}>NEXT {images[current].alt} @@ -97,9 +105,7 @@ object-fit: cover; border-radius: var(--dr-radius); border: var(--dr-border); - box-shadow: - var(--dr-shadow-offset-md), - var(--dr-shadow-inner-highlight); + box-shadow: var(--dr-shadow-offset-md), var(--dr-shadow-inner-highlight); transition: transform var(--dr-transition-fast), box-shadow var(--dr-transition-fast), @@ -111,9 +117,7 @@ .preview-img:hover { transform: translate(-2px, -2px); border-color: var(--digital-rust); - box-shadow: - var(--dr-shadow-hover-md), - var(--dr-shadow-glow-sm); + box-shadow: var(--dr-shadow-hover-md), var(--dr-shadow-glow-sm); } .preview-img:active { @@ -148,9 +152,7 @@ object-fit: contain; background-color: var(--dr-surface-base); border: var(--dr-border); - box-shadow: - var(--dr-shadow-offset-lg), - var(--dr-shadow-glow-md); + box-shadow: var(--dr-shadow-offset-lg), var(--dr-shadow-glow-md); } .lightbox-close, diff --git a/src/lib/components/SpecGuarantees.svelte b/src/lib/components/SpecGuarantees.svelte index bae47fd..da51797 100644 --- a/src/lib/components/SpecGuarantees.svelte +++ b/src/lib/components/SpecGuarantees.svelte @@ -4,7 +4,11 @@

    Priority Stack

    {#each legend as item (item.colorId)} @@ -54,9 +55,7 @@ background: var(--dr-surface-elevated); border: var(--dr-border); border-radius: var(--dr-radius-lg); - box-shadow: - var(--dr-shadow-offset-md), - var(--dr-shadow-inner-highlight); + box-shadow: var(--dr-shadow-offset-md), var(--dr-shadow-inner-highlight); } .spec-live-demo > div { diff --git a/src/lib/components/TerminalSection.svelte b/src/lib/components/TerminalSection.svelte index cc0e85a..54eee74 100644 --- a/src/lib/components/TerminalSection.svelte +++ b/src/lib/components/TerminalSection.svelte @@ -7,7 +7,8 @@
    fingerprint: 0xDR-1.2.2
    updated: 2025-11-29
    - priority-order: errors > warnings > semantic > textmate + priority-order: + errors > warnings > semantic > textmate
    @@ -46,9 +47,7 @@ border-radius: var(--dr-radius-lg); padding: var(--dr-space-lg); margin-bottom: var(--dr-space-xl); - box-shadow: - var(--dr-shadow-offset-md), - var(--dr-shadow-inner-highlight); + box-shadow: var(--dr-shadow-offset-md), var(--dr-shadow-inner-highlight); position: relative; overflow: hidden; } diff --git a/src/lib/components/TokenMap.svelte b/src/lib/components/TokenMap.svelte index 6e85e56..dc86f8a 100644 --- a/src/lib/components/TokenMap.svelte +++ b/src/lib/components/TokenMap.svelte @@ -179,9 +179,7 @@ display: flex; flex-direction: column; gap: var(--dr-space-sm); - box-shadow: - var(--dr-shadow-offset-sm), - var(--dr-shadow-inner-highlight); + box-shadow: var(--dr-shadow-offset-sm), var(--dr-shadow-inner-highlight); transition: transform var(--dr-transition-fast), box-shadow var(--dr-transition-fast); diff --git a/src/lib/components/UiComponents.svelte b/src/lib/components/UiComponents.svelte index cb326d9..da29fb2 100644 --- a/src/lib/components/UiComponents.svelte +++ b/src/lib/components/UiComponents.svelte @@ -22,8 +22,8 @@

    - rest: offset-sm + bevel · hover: lift(-2px,-2px) + offset grows · active: press(2px,2px) - + collapse + rest: offset-sm + bevel · hover: lift(-2px,-2px) + offset grows · active: + press(2px,2px) + collapse

    @@ -31,7 +31,12 @@

    Inputs — Recessed Wells

    - +
    @@ -39,8 +44,8 @@

    ✗ Connection refused on port 22

    - Event Horizon well · no offset shadow · hover: Dark Packet border · focus: Digital Rust - border + Stack Overglow ring + Event Horizon well · no offset shadow · hover: Dark Packet border · focus: Digital + Rust border + Stack Overglow ring

    @@ -72,8 +77,11 @@ - - spec.toml +
    diff --git a/src/lib/components/UiLab.svelte b/src/lib/components/UiLab.svelte index 03b2c3a..a15bdda 100644 --- a/src/lib/components/UiLab.svelte +++ b/src/lib/components/UiLab.svelte @@ -20,8 +20,9 @@
    #[cfg(test)]
    - fn assert_entropy()fn + assert_entropy() {
    @@ -57,7 +58,9 @@

    Diagnostics

      -
    • ✗ Kernel panic detected: wavy Amber Alert underline
    • +
    • + ✗ Kernel panic detected: wavy Amber Alert underline +
    • ⚠ Deprecated API: Stack Overglow underline
    • ℹ Hint bubbles use Dead Thread
    @@ -89,9 +92,7 @@ background: var(--dr-surface-secondary); border: var(--dr-border); border-radius: var(--dr-radius); - box-shadow: - var(--dr-shadow-offset-md), - var(--dr-shadow-inner-highlight); + box-shadow: var(--dr-shadow-offset-md), var(--dr-shadow-inner-highlight); display: flex; flex-direction: column; gap: var(--dr-space-sm); @@ -193,9 +194,7 @@ border: var(--dr-border); border-radius: var(--dr-radius); padding: var(--dr-space-md); - box-shadow: - var(--dr-shadow-offset-sm), - var(--dr-shadow-inner-highlight); + box-shadow: var(--dr-shadow-offset-sm), var(--dr-shadow-inner-highlight); } .panel h3 { diff --git a/src/lib/palette.ts b/src/lib/palette.ts index deceec4..89738e6 100644 --- a/src/lib/palette.ts +++ b/src/lib/palette.ts @@ -9,25 +9,50 @@ export interface DrColor { } export const rustRamp: DrColor[] = [ - { id: 'ghost-pixel', name: 'Ghost Pixel', hex: '#f7eae8', description: 'Lightest / White Point (text)' }, + { + id: 'ghost-pixel', + name: 'Ghost Pixel', + hex: '#f7eae8', + description: 'Lightest / White Point (text)' + }, { id: 'phosphor-smoke', name: 'Phosphor Smoke', hex: '#efd5d1' }, - { id: 'phantom-current', name: 'Phantom Current', hex: '#e7c0ba', description: 'Link Colour/Footer Text' }, + { + id: 'phantom-current', + name: 'Phantom Current', + hex: '#e7c0ba', + description: 'Link Colour/Footer Text' + }, { id: 'corrupted-cache', name: 'Corrupted Cache', hex: '#dfaba3' }, { id: 'copper-trace', name: 'Copper Trace', hex: '#d7968c' }, { id: 'fatal-error', name: 'Fatal Error', hex: '#cf8175' }, { id: 'rouge-signal', name: 'Rouge Signal', hex: '#c76c5e' }, { id: 'amber-alert', name: 'Amber Alert', hex: '#bf5747' }, { id: 'firewall-breach', name: 'Firewall Breach', hex: '#b74230' }, - { id: 'digital-rust', name: 'Digital Rust', hex: '#af2e1a', description: 'Primary Colour/Primary Accent' }, + { + id: 'digital-rust', + name: 'Digital Rust', + hex: '#af2e1a', + description: 'Primary Colour/Primary Accent' + }, { id: 'kernel-panic', name: 'Kernel Panic', hex: '#9d2917' }, { id: 'data-rot', name: 'Data Rot', hex: '#8c2414' }, { id: 'bricked-board', name: 'Bricked Board', hex: '#7a2012' }, { id: 'dark-packet', name: 'Dark Packet', hex: '#691b0f' }, { id: 'daemon-blood', name: 'Daemon Blood', hex: '#57170d' }, { id: 'bad-sector', name: 'Bad Sector', hex: '#46120a' }, - { id: 'core-meltdown', name: 'Core Meltdown', hex: '#340d07', description: 'Secondary Background Colour' }, + { + id: 'core-meltdown', + name: 'Core Meltdown', + hex: '#340d07', + description: 'Secondary Background Colour' + }, { id: 'null-pointer', name: 'Null Pointer', hex: '#230905' }, - { id: 'event-horizon', name: 'Event Horizon', hex: '#110402', description: 'Darkest/Black Point (background)' } + { + id: 'event-horizon', + name: 'Event Horizon', + hex: '#110402', + description: 'Darkest/Black Point (background)' + } ]; // One-off hexes that have no display name because they are not part of the public palette. @@ -183,9 +208,7 @@ function tint(id: string, alpha: number): string { } function emitNamedColors(): string { - const ramp = rustRamp - .map((c) => `\t--${c.id}: ${c.hex};`) - .join('\n'); + const ramp = rustRamp.map((c) => `\t--${c.id}: ${c.hex};`).join('\n'); const accents = accentFamilies .flatMap((f) => [f.base, f.dim, f.bright]) .map((c) => `\t--${c.id}: ${c.hex};`) diff --git a/src/lib/spec/render-spec.ts b/src/lib/spec/render-spec.ts index 3a7d65d..944ea75 100644 --- a/src/lib/spec/render-spec.ts +++ b/src/lib/spec/render-spec.ts @@ -45,13 +45,19 @@ function rehypeMarkers() { if (isHeading(node, 1)) { const next = nextElement(children, i); if (next?.type === 'element' && next.tagName === 'p') { - children.splice(children.indexOf(next) + 1, 0, { type: 'raw', value: SPEC_META_MARKER }); + children.splice(children.indexOf(next) + 1, 0, { + type: 'raw', + value: SPEC_META_MARKER + }); } } if (isHeading(node, 2) && node.properties?.id === 'overview') { const next = nextElement(children, i); if (next?.type === 'element' && next.tagName === 'p') { - children.splice(children.indexOf(next) + 1, 0, { type: 'raw', value: LIVE_DEMO_MARKER }); + children.splice(children.indexOf(next) + 1, 0, { + type: 'raw', + value: LIVE_DEMO_MARKER + }); } } } @@ -95,8 +101,9 @@ function rehypePaletteTables() { (c): c is Element => c.type === 'element' && c.tagName === 'tbody' ); const rows = - tbody?.children.filter((c): c is Element => c.type === 'element' && c.tagName === 'tr') ?? - []; + tbody?.children.filter( + (c): c is Element => c.type === 'element' && c.tagName === 'tr' + ) ?? []; let cards: Element | undefined; if (isPalette) { @@ -106,7 +113,9 @@ function rehypePaletteTables() { ); const hex = hastToString(cells[0]).trim(); const name = hastToString(cells[isAnsi ? 2 : 1]).trim(); - const note = isAnsi ? hastToString(cells[1]).trim() : hastToString(cells[2]).trim(); + const note = isAnsi + ? hastToString(cells[1]).trim() + : hastToString(cells[2]).trim(); if (isAnsi) { return { @@ -120,9 +129,24 @@ function rehypePaletteTables() { tagName: 'span', properties: {}, children: [ - { type: 'element', tagName: 'strong', properties: {}, children: [textNode(name)] }, - { type: 'element', tagName: 'br', properties: {}, children: [] }, - { type: 'element', tagName: 'small', properties: {}, children: [textNode(note)] } + { + type: 'element', + tagName: 'strong', + properties: {}, + children: [textNode(name)] + }, + { + type: 'element', + tagName: 'br', + properties: {}, + children: [] + }, + { + type: 'element', + tagName: 'small', + properties: {}, + children: [textNode(note)] + } ] } ] @@ -133,10 +157,18 @@ function rehypePaletteTables() { { type: 'element', tagName: 'div', - properties: { className: ['color-card__swatch'], style: `background: ${hex};` }, + properties: { + className: ['color-card__swatch'], + style: `background: ${hex};` + }, children: [] }, - { type: 'element', tagName: 'strong', properties: {}, children: [textNode(name)] }, + { + type: 'element', + tagName: 'strong', + properties: {}, + children: [textNode(name)] + }, { type: 'element', tagName: 'span', diff --git a/src/lib/styles/app.css b/src/lib/styles/app.css index 09ddf73..cf23c1d 100644 --- a/src/lib/styles/app.css +++ b/src/lib/styles/app.css @@ -1,11 +1,12 @@ -@import "/src/lib/styles/normalize.css"; -@import "/src/lib/generated/tokens.css"; +@import '/src/lib/styles/normalize.css'; +@import '/src/lib/generated/tokens.css'; * { margin: 0; padding: 0; box-sizing: border-box; - font-variant-ligatures: common-ligatures discretionary-ligatures no-historical-ligatures contextual; + font-variant-ligatures: common-ligatures discretionary-ligatures no-historical-ligatures + contextual; font-variant-numeric: oldstyle-nums tabular-nums; hyphens: auto; font-kerning: normal; @@ -13,7 +14,6 @@ text-rendering: optimizeLegibility; } - /* ──────────────────────────────────────────── Base ──────────────────────────────────────────── */ @@ -32,7 +32,7 @@ body { /* ── Atmospheric noise texture (non-negotiable) ── */ body::before { - content: ""; + content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); @@ -43,14 +43,16 @@ body::before { /* ── Scanline overlay (non-negotiable) ── */ body::after { - content: ""; + content: ''; position: fixed; inset: 0; - background: repeating-linear-gradient(0deg, - transparent, - transparent 2px, - var(--dr-scanline) 2px, - var(--dr-scanline) 4px); + background: repeating-linear-gradient( + 0deg, + transparent, + transparent 2px, + var(--dr-scanline) 2px, + var(--dr-scanline) 4px + ); pointer-events: none; z-index: calc(var(--dr-z-noise) - 1); } @@ -66,9 +68,14 @@ body::after { Typography ──────────────────────────────────────────── */ -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { font-family: var(--dr-font-heading); - font-variation-settings: "slnt" 0; + font-variation-settings: 'slnt' 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; @@ -112,7 +119,8 @@ h1, h2, h3, h4, h5, h6 { font-size: var(--dr-text-sm); border-radius: var(--dr-radius); cursor: pointer; - transition: transform var(--dr-transition-fast), + transition: + transform var(--dr-transition-fast), box-shadow var(--dr-transition-fast), background-color var(--dr-transition-fast), border-color var(--dr-transition-fast), @@ -120,8 +128,7 @@ h1, h2, h3, h4, h5, h6 { text-transform: uppercase; letter-spacing: 0.05em; margin: 0.25rem; - box-shadow: var(--dr-shadow-offset-sm), - var(--dr-shadow-inner-highlight); + box-shadow: var(--dr-shadow-offset-sm), var(--dr-shadow-inner-highlight); text-decoration: none; } @@ -130,8 +137,7 @@ h1, h2, h3, h4, h5, h6 { border-color: var(--digital-rust); color: var(--dr-text-primary); transform: var(--dr-press-hover); - box-shadow: var(--dr-shadow-hover-md), - var(--dr-shadow-inner-highlight); + box-shadow: var(--dr-shadow-hover-md), var(--dr-shadow-inner-highlight); } .btn:active { @@ -148,8 +154,7 @@ h1, h2, h3, h4, h5, h6 { background: var(--digital-rust); border-color: var(--digital-rust); color: var(--dr-text-on-accent); - box-shadow: var(--dr-shadow-offset-md), - var(--dr-shadow-inner-highlight); + box-shadow: var(--dr-shadow-offset-md), var(--dr-shadow-inner-highlight); } .btn-primary:hover { @@ -157,9 +162,8 @@ h1, h2, h3, h4, h5, h6 { border-color: var(--firewall-breach); color: var(--dr-text-on-accent); transform: var(--dr-press-hover); - box-shadow: var(--dr-shadow-hover-md), - var(--dr-shadow-glow-sm), - var(--dr-shadow-inner-highlight); + box-shadow: + var(--dr-shadow-hover-md), var(--dr-shadow-glow-sm), var(--dr-shadow-inner-highlight); } .btn-primary:active { @@ -220,7 +224,8 @@ a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; - transition: color var(--dr-transition-fast), + transition: + color var(--dr-transition-fast), text-decoration-thickness var(--dr-transition-fast); } @@ -296,7 +301,6 @@ a:active { } @keyframes blink { - 0%, 50% { opacity: 1; @@ -321,7 +325,9 @@ code { @keyframes glitch { 0% { - text-shadow: 0 0 24px color-mix(in srgb, var(--digital-rust) 70%, transparent), -1px -1px var(--digital-rust), + text-shadow: + 0 0 24px color-mix(in srgb, var(--digital-rust) 70%, transparent), + -1px -1px var(--digital-rust), 1px 1px var(--dead-thread); transform: translate3d(0, 0, 0); filter: hue-rotate(0deg) saturate(130%); @@ -329,7 +335,9 @@ code { } 4% { - text-shadow: 4px -2px var(--fractured-shell), -4px 2px var(--dead-thread), + text-shadow: + 4px -2px var(--fractured-shell), + -4px 2px var(--dead-thread), 0 0 32px color-mix(in srgb, var(--digital-rust) 80%, transparent); transform: translate3d(-2px, 1px, 0) skewX(1deg); filter: hue-rotate(-6deg) saturate(160%); @@ -337,7 +345,9 @@ code { } 9% { - text-shadow: -6px 0 var(--memory-leek), 6px 0 var(--thermal-throttle), + text-shadow: + -6px 0 var(--memory-leek), + 6px 0 var(--thermal-throttle), 0 0 18px color-mix(in srgb, var(--digital-rust) 60%, transparent); transform: translate3d(2px, -3px, 0) skewY(-1.5deg); filter: hue-rotate(12deg) saturate(140%); @@ -345,7 +355,9 @@ code { } 15% { - text-shadow: -2px 2px var(--digital-rust), 3px -3px var(--dead-thread), + text-shadow: + -2px 2px var(--digital-rust), + 3px -3px var(--dead-thread), -1px -1px var(--fractured-shell); transform: translate3d(-1px, 2px, 0) scale(1.01); filter: hue-rotate(-18deg) saturate(180%); @@ -353,14 +365,18 @@ code { } 24% { - text-shadow: 8px 2px var(--amber-alert), -8px -2px var(--dead-thread); + text-shadow: + 8px 2px var(--amber-alert), + -8px -2px var(--dead-thread); transform: translate3d(3px, -2px, 0) skewX(-1.2deg); filter: hue-rotate(25deg) saturate(150%); clip-path: inset(6% 0 40% 0); } 38% { - text-shadow: -3px 0 var(--fractured-shell), 3px 0 color-mix(in srgb, var(--memory-leek) 60%, transparent), + text-shadow: + -3px 0 var(--fractured-shell), + 3px 0 color-mix(in srgb, var(--memory-leek) 60%, transparent), 0 0 26px color-mix(in srgb, var(--digital-rust) 90%, transparent); transform: translate3d(-4px, 1px, 0) skewY(2deg); filter: hue-rotate(-32deg) saturate(170%); @@ -368,7 +384,9 @@ code { } 52% { - text-shadow: 10px -3px var(--dead-thread), -10px 3px var(--thermal-throttle), + text-shadow: + 10px -3px var(--dead-thread), + -10px 3px var(--thermal-throttle), 0 0 16px color-mix(in srgb, var(--digital-rust) 40%, transparent); transform: translate3d(5px, -4px, 0) skewX(2deg) skewY(-1deg); filter: hue-rotate(38deg) saturate(150%); @@ -376,7 +394,8 @@ code { } 67% { - text-shadow: -5px -1px color-mix(in srgb, var(--fatal-error) 90%, transparent), + text-shadow: + -5px -1px color-mix(in srgb, var(--fatal-error) 90%, transparent), 5px 1px color-mix(in srgb, var(--dead-thread) 90%, transparent); transform: translate3d(-3px, 4px, 0) scale(1.015); filter: hue-rotate(-48deg) saturate(175%) contrast(115%); @@ -384,7 +403,9 @@ code { } 82% { - text-shadow: 12px 0 color-mix(in srgb, var(--digital-rust) 90%, transparent), -12px 0 color-mix(in srgb, var(--memory-leek) 70%, transparent), + text-shadow: + 12px 0 color-mix(in srgb, var(--digital-rust) 90%, transparent), + -12px 0 color-mix(in srgb, var(--memory-leek) 70%, transparent), 0 0 40px color-mix(in srgb, var(--digital-rust) 90%, transparent); transform: translate3d(6px, -2px, 0) skewX(-2deg) skewY(2deg); filter: hue-rotate(54deg) saturate(210%); @@ -392,7 +413,9 @@ code { } 100% { - text-shadow: 0 0 24px color-mix(in srgb, var(--digital-rust) 75%, transparent), -1px 1px var(--digital-rust), + text-shadow: + 0 0 24px color-mix(in srgb, var(--digital-rust) 75%, transparent), + -1px 1px var(--digital-rust), 1px -1px var(--dead-thread); transform: translate3d(0, 0, 0); filter: hue-rotate(0deg) saturate(130%); @@ -449,8 +472,7 @@ footer { background: var(--dr-surface-elevated); border: var(--dr-border); border-radius: var(--dr-radius); - box-shadow: var(--dr-shadow-offset-md), - var(--dr-shadow-inner-highlight); + box-shadow: var(--dr-shadow-offset-md), var(--dr-shadow-inner-highlight); padding: var(--dr-space-lg); } @@ -495,7 +517,8 @@ footer { font-size: var(--dr-text-base); font-weight: 500; width: 100%; - transition: border-color var(--dr-transition-fast), + transition: + border-color var(--dr-transition-fast), box-shadow var(--dr-transition-fast); } @@ -524,7 +547,7 @@ footer { cursor: not-allowed; } -.dr-input[aria-invalid="true"] { +.dr-input[aria-invalid='true'] { border-color: var(--amber-alert); } @@ -578,7 +601,8 @@ footer { cursor: pointer; position: relative; margin: 0; - transition: transform var(--dr-transition-fast), + transition: + transform var(--dr-transition-fast), box-shadow var(--dr-transition-fast), background-color var(--dr-transition-fast), border-color var(--dr-transition-fast); @@ -606,7 +630,7 @@ footer { } .dr-checkbox input:checked::after { - content: "✓"; + content: '✓'; position: absolute; top: 50%; left: 50%; @@ -648,13 +672,14 @@ footer { cursor: pointer; position: relative; margin: 0; - transition: background-color var(--dr-transition-fast), + transition: + background-color var(--dr-transition-fast), border-color var(--dr-transition-fast), box-shadow var(--dr-transition-fast); } .dr-toggle input::after { - content: ""; + content: ''; position: absolute; top: 1px; left: 1px; @@ -662,7 +687,8 @@ footer { height: 14px; background: var(--ghost-pixel); border-radius: var(--dr-radius-sm); - box-shadow: 1px 1px 0 0 var(--dr-surface-highlight), + box-shadow: + 1px 1px 0 0 var(--dr-surface-highlight), var(--dr-shadow-inner-lowlight); transition: transform var(--dr-transition-fast); } @@ -705,17 +731,16 @@ footer { background: var(--ghost-pixel); border: 2px solid var(--dark-packet); border-radius: var(--dr-radius-sm); - box-shadow: var(--dr-shadow-offset-sm), - var(--dr-shadow-inner-lowlight); + box-shadow: var(--dr-shadow-offset-sm), var(--dr-shadow-inner-lowlight); cursor: pointer; - transition: transform var(--dr-transition-fast), + transition: + transform var(--dr-transition-fast), box-shadow var(--dr-transition-fast); } .dr-slider::-webkit-slider-thumb:hover { transform: var(--dr-press-hover); - box-shadow: var(--dr-shadow-hover-md), - var(--dr-shadow-inner-lowlight); + box-shadow: var(--dr-shadow-hover-md), var(--dr-shadow-inner-lowlight); } .dr-slider::-webkit-slider-thumb:active { @@ -729,10 +754,10 @@ footer { background: var(--ghost-pixel); border: 2px solid var(--dark-packet); border-radius: var(--dr-radius-sm); - box-shadow: var(--dr-shadow-offset-sm), - var(--dr-shadow-inner-lowlight); + box-shadow: var(--dr-shadow-offset-sm), var(--dr-shadow-inner-lowlight); cursor: pointer; - transition: transform var(--dr-transition-fast), + transition: + transform var(--dr-transition-fast), box-shadow var(--dr-transition-fast); } @@ -751,8 +776,7 @@ footer { border: var(--dr-border); border-radius: var(--dr-radius); background: var(--dr-surface-secondary); - box-shadow: var(--dr-shadow-offset-sm), - var(--dr-shadow-inner-highlight); + box-shadow: var(--dr-shadow-offset-sm), var(--dr-shadow-inner-highlight); overflow: hidden; } @@ -773,7 +797,8 @@ footer { border: none; border-bottom: 2px solid transparent; cursor: pointer; - transition: color var(--dr-transition-fast), + transition: + color var(--dr-transition-fast), background-color var(--dr-transition-fast); } @@ -782,7 +807,7 @@ footer { background: var(--dr-surface-highlight); } -.dr-tab[aria-selected="true"], +.dr-tab[aria-selected='true'], .dr-tab.active { background: var(--dr-surface-secondary); color: var(--dr-text-primary); @@ -801,8 +826,7 @@ footer { background: var(--dr-surface-elevated); border: var(--dr-border); border-radius: var(--dr-radius); - box-shadow: var(--dr-shadow-offset-md), - var(--dr-shadow-inner-highlight); + box-shadow: var(--dr-shadow-offset-md), var(--dr-shadow-inner-highlight); padding: var(--dr-space-xs); list-style: none; max-width: 260px; @@ -814,7 +838,8 @@ footer { color: var(--dr-text-secondary); font-size: var(--dr-text-sm); cursor: pointer; - transition: background-color var(--dr-transition-fast), + transition: + background-color var(--dr-transition-fast), color var(--dr-transition-fast); } @@ -840,8 +865,7 @@ footer { background: var(--dr-surface-elevated); border: var(--dr-border); border-radius: var(--dr-radius); - box-shadow: var(--dr-shadow-offset-lg), - var(--dr-shadow-inner-highlight); + box-shadow: var(--dr-shadow-offset-lg), var(--dr-shadow-inner-highlight); padding: var(--dr-space-lg); max-width: 380px; } @@ -873,17 +897,24 @@ footer { color: var(--dr-text-primary); border: var(--dr-border); border-radius: var(--dr-radius); - box-shadow: var(--dr-shadow-offset-md), - var(--dr-shadow-inner-highlight); + box-shadow: var(--dr-shadow-offset-md), var(--dr-shadow-inner-highlight); padding: var(--dr-space-sm) var(--dr-space-md); font-size: var(--dr-text-sm); margin-bottom: var(--dr-space-sm); } -.dr-toast.success { border-left: 3px solid var(--memory-leek); } -.dr-toast.warning { border-left: 3px solid var(--stack-overglow); } -.dr-toast.error { border-left: 3px solid var(--amber-alert); } -.dr-toast.info { border-left: 3px solid var(--dead-thread); } +.dr-toast.success { + border-left: 3px solid var(--memory-leek); +} +.dr-toast.warning { + border-left: 3px solid var(--stack-overglow); +} +.dr-toast.error { + border-left: 3px solid var(--amber-alert); +} +.dr-toast.info { + border-left: 3px solid var(--dead-thread); +} /* ── Tooltip ── */ .dr-tooltip-demo { @@ -892,8 +923,7 @@ footer { background: var(--dr-surface-elevated); border: var(--dr-border); border-radius: var(--dr-radius); - box-shadow: var(--dr-shadow-offset-md), - var(--dr-shadow-inner-highlight); + box-shadow: var(--dr-shadow-offset-md), var(--dr-shadow-inner-highlight); padding: var(--dr-space-xs) var(--dr-space-sm); font-size: var(--dr-text-sm); color: var(--dr-text-secondary); @@ -905,8 +935,7 @@ footer { background: var(--dr-surface-elevated); border: var(--dr-border); border-radius: var(--dr-radius); - box-shadow: var(--dr-shadow-offset-md), - var(--dr-shadow-inner-highlight); + box-shadow: var(--dr-shadow-offset-md), var(--dr-shadow-inner-highlight); padding: var(--dr-space-md); margin-bottom: var(--dr-space-md); } @@ -926,12 +955,24 @@ footer { color: var(--dr-text-secondary); } -.dr-callout.note { border-left: 3px solid var(--dead-thread); } -.dr-callout.note .callout-title { color: var(--dead-thread); } -.dr-callout.warning { border-left: 3px solid var(--stack-overglow); } -.dr-callout.warning .callout-title { color: var(--stack-overglow); } -.dr-callout.error { border-left: 3px solid var(--amber-alert); } -.dr-callout.error .callout-title { color: var(--amber-alert-text); } +.dr-callout.note { + border-left: 3px solid var(--dead-thread); +} +.dr-callout.note .callout-title { + color: var(--dead-thread); +} +.dr-callout.warning { + border-left: 3px solid var(--stack-overglow); +} +.dr-callout.warning .callout-title { + color: var(--stack-overglow); +} +.dr-callout.error { + border-left: 3px solid var(--amber-alert); +} +.dr-callout.error .callout-title { + color: var(--amber-alert-text); +} /* ── Badges ── */ .badge { @@ -988,9 +1029,15 @@ footer { border-radius: 0 0 var(--dr-radius) var(--dr-radius); } -.dr-statusbar .status-success { color: var(--memory-leek); } -.dr-statusbar .status-warning { color: var(--stack-overglow); } -.dr-statusbar .status-error { color: var(--amber-alert-text); } +.dr-statusbar .status-success { + color: var(--memory-leek); +} +.dr-statusbar .status-warning { + color: var(--stack-overglow); +} +.dr-statusbar .status-error { + color: var(--amber-alert-text); +} /* ──────────────────────────────────────────── Selection & Focus (design system) @@ -1053,11 +1100,14 @@ footer { ──────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { - body::before, body::after { + body::before, + body::after { content: none; } - *, *::before, *::after { + *, + *::before, + *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; @@ -1164,8 +1214,7 @@ footer { border-radius: var(--dr-radius); overflow: hidden; position: relative; - box-shadow: var(--dr-shadow-offset-md), - var(--dr-shadow-inner-highlight); + box-shadow: var(--dr-shadow-offset-md), var(--dr-shadow-inner-highlight); transition: border-color var(--dr-transition-normal); } @@ -1303,4 +1352,3 @@ footer { color: var(--amber-alert-text); text-decoration: wavy underline; } - diff --git a/src/lib/styles/normalize.css b/src/lib/styles/normalize.css index 52a3fa9..5aaa111 100644 --- a/src/lib/styles/normalize.css +++ b/src/lib/styles/normalize.css @@ -141,8 +141,7 @@ * Correct the inability to style buttons in iOS and Safari. */ -:where(button, - input:is([type="button" i], [type="reset" i], [type="submit" i])) { +:where(button, input:is([type='button' i], [type='reset' i], [type='submit' i])) { -webkit-appearance: button; appearance: button; } @@ -176,7 +175,7 @@ * 2. Correct the outline style in Safari. */ -:where(input[type="search" i]) { +:where(input[type='search' i]) { -webkit-appearance: textfield; appearance: textfield; /* 1 */ @@ -226,11 +225,10 @@ * Remove the inner border and padding of focus outlines in Firefox. */ -:where(button, - input:is([type="button" i], - [type="color" i], - [type="reset" i], - [type="submit" i]))::-moz-focus-inner { +:where( + button, + input:is([type='button' i], [type='color' i], [type='reset' i], [type='submit' i]) +)::-moz-focus-inner { border-style: none; padding: 0; } @@ -239,11 +237,10 @@ * Restore the focus outline styles unset by the previous rule in Firefox. */ -:where(button, - input:is([type="button" i], - [type="color" i], - [type="reset" i], - [type="submit" i]))::-moz-focusring { +:where( + button, + input:is([type='button' i], [type='color' i], [type='reset' i], [type='submit' i]) +)::-moz-focusring { outline: 1px dotted ButtonText; } diff --git a/src/lib/styles/spec.css b/src/lib/styles/spec.css index eeb02ca..522e463 100644 --- a/src/lib/styles/spec.css +++ b/src/lib/styles/spec.css @@ -35,9 +35,7 @@ body:has(.site-shell) { letter-spacing: 0.08em; text-transform: uppercase; padding: var(--dr-space-md) var(--dr-space-lg); - box-shadow: - var(--dr-shadow-offset-md), - var(--dr-shadow-inner-highlight); + box-shadow: var(--dr-shadow-offset-md), var(--dr-shadow-inner-highlight); cursor: pointer; transition: transform var(--dr-transition-fast), @@ -46,9 +44,7 @@ body:has(.site-shell) { .toc-toggle:hover { transform: translate(-2px, -2px); - box-shadow: - var(--dr-shadow-hover-md), - var(--dr-shadow-glow-sm); + box-shadow: var(--dr-shadow-hover-md), var(--dr-shadow-glow-sm); } .toc-toggle:active { @@ -70,9 +66,7 @@ body:has(.site-shell) { border: var(--dr-border); border-radius: var(--dr-radius-lg); padding: var(--dr-space-lg); - box-shadow: - var(--dr-shadow-offset-md), - var(--dr-shadow-inner-highlight); + box-shadow: var(--dr-shadow-offset-md), var(--dr-shadow-inner-highlight); } .toc-eyebrow { @@ -147,9 +141,7 @@ body:has(.site-shell) { border-radius: var(--dr-radius-lg); padding: clamp(var(--dr-space-lg), 3vw, var(--dr-space-xl)); border: var(--dr-border); - box-shadow: - var(--dr-shadow-offset-lg), - var(--dr-shadow-inner-highlight); + box-shadow: var(--dr-shadow-offset-lg), var(--dr-shadow-inner-highlight); } .spec-document h1, @@ -232,9 +224,7 @@ body:has(.site-shell) { padding: var(--dr-space-md) var(--dr-space-lg); background: var(--dr-surface-elevated); border: var(--dr-border); - box-shadow: - var(--dr-shadow-offset-sm), - var(--dr-shadow-inner-highlight); + box-shadow: var(--dr-shadow-offset-sm), var(--dr-shadow-inner-highlight); } .spec-meta__item { @@ -390,9 +380,7 @@ body:has(.site-shell) { display: flex; flex-direction: column; gap: var(--dr-space-sm); - box-shadow: - var(--dr-shadow-offset-sm), - var(--dr-shadow-inner-highlight); + box-shadow: var(--dr-shadow-offset-sm), var(--dr-shadow-inner-highlight); transition: transform var(--dr-transition-fast), box-shadow var(--dr-transition-fast); @@ -400,9 +388,7 @@ body:has(.site-shell) { .color-card:hover { transform: translate(-2px, -2px); - box-shadow: - var(--dr-shadow-hover-md), - var(--dr-shadow-glow-sm); + box-shadow: var(--dr-shadow-hover-md), var(--dr-shadow-glow-sm); } .color-card:active { @@ -439,9 +425,7 @@ body:has(.site-shell) { background: var(--dr-surface-secondary); border: var(--dr-border); border-radius: var(--dr-radius); - box-shadow: - var(--dr-shadow-offset-sm), - var(--dr-shadow-inner-highlight); + box-shadow: var(--dr-shadow-offset-sm), var(--dr-shadow-inner-highlight); transition: transform var(--dr-transition-fast), box-shadow var(--dr-transition-fast); @@ -449,9 +433,7 @@ body:has(.site-shell) { .color-lab .ansi-chip:hover { transform: translate(-2px, -2px); - box-shadow: - var(--dr-shadow-hover-md), - var(--dr-shadow-glow-sm); + box-shadow: var(--dr-shadow-hover-md), var(--dr-shadow-glow-sm); } .color-lab .ansi-chip:active { @@ -514,6 +496,11 @@ body:has(.site-shell) { flex-direction: column; } + /* Basis applies to height in column direction; items size to content. */ + .spec-meta__item { + flex: none; + } + .hero-actions { width: 100%; justify-content: flex-start; diff --git a/src/lib/theme/digital-rust-theme.ts b/src/lib/theme/digital-rust-theme.ts index cb02ed6..de12af5 100644 --- a/src/lib/theme/digital-rust-theme.ts +++ b/src/lib/theme/digital-rust-theme.ts @@ -240,10 +240,7 @@ export const digitalRustTheme: ThemeRegistration = { }, { name: 'CSS Classes/IDs', - scope: [ - 'entity.other.attribute-name.class.css', - 'entity.other.attribute-name.id.css' - ], + scope: ['entity.other.attribute-name.class.css', 'entity.other.attribute-name.id.css'], settings: { foreground: c('dead-thread') } diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 9815ee0..c298939 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -46,10 +46,16 @@ href: 'https://marketplace.visualstudio.com/items?itemName=KatSuricata.digital-rust', label: 'VSCode' }, - { href: 'https://addons.mozilla.org/firefox/addon/digital-rust-theme/', label: 'Firefox' }, + { + href: 'https://addons.mozilla.org/firefox/addon/digital-rust-theme/', + label: 'Firefox' + }, { href: '/ports/DigitalRustKDE.colors', label: 'KDE Plasma' }, { href: '/ports/DigitalRustKate.theme', label: 'Kate' }, - { href: 'https://community.obsidian.md/themes/digital-rust', label: 'Obsidian' }, + { + href: 'https://community.obsidian.md/themes/digital-rust', + label: 'Obsidian' + }, { href: '/ports/DigitalRustfish.theme', label: 'fish' }, { href: '/ports/digital-rust-ghostty', label: 'Ghostty' }, { href: '/ports/DigitalRustKonsole.colorscheme', label: 'Konsole' }, diff --git a/src/routes/playground/+page.svelte b/src/routes/playground/+page.svelte index a2ff690..a0deb39 100644 --- a/src/routes/playground/+page.svelte +++ b/src/routes/playground/+page.svelte @@ -1,5 +1,6 @@ - - - - - - - - - - - - - - - -
    -
    -

    UI GUIDELINES

    - Spec v1.2.2 -
    Tactile · Heavy · Pressable
    -
    Chunky hardware panels for failing systems. The Digital Rust UI Specification, - demonstrated live.
    - -
    - -
    -

    Design Principles

    -

    Digital Rust interfaces are tactile panels in a failing server rack. Every - interactive element is a physical piece of chunky old hardware: a switch you can press, a bezel that - catches light, a surface with weight. Five rules carry the system.

    -
    -
    -

    1 · Everything physical has an edge

    -

    Interactive elements carry 2px Dark Packet borders. Borders are walls, not decoration.

    -
    -
    -

    2 · Everything raised casts a hard shadow

    -

    Offset solid shadows, zero blur, drawn in Bad Sector. Light in this system is directional and - warm.

    -
    -
    -

    3 · Everything raised catches light

    -

    The inner highlight (inset 0 1px 0 rgba(255,255,255,0.1)) rides under every offset - shadow. It is the bevel of the panel.

    -
    -
    -

    4 · Everything pressable presses

    -

    Rest has offset; hover lifts and grows it; active collapses it and drives the element into the - rack. No static hovers.

    -
    -
    -

    5 · Nothing is flat

    -

    Surfaces carry structural noise and scanlines. Interactive text surfaces (inputs, editors) are - exempt: legibility outranks atmosphere inside a text field.

    -
    -
    -
    - -
    -

    Interaction Physics

    -

    The press cycle is the system's signature motion. The element translates - with the shadow: hover lifts toward the light (up-left), active presses away from it - (down-right), always at 150ms.

    -
    -
    - The Press Cycle - CSS -
    -
    /* Rest: offset shadow + inner-highlight bevel */
    -.dr-btn {
    -	box-shadow: var(--dr-shadow-offset-sm), var(--dr-shadow-inner-highlight);
    -}
    -/* Hover: lift toward the light, offset grows 2px per axis */
    -.dr-btn:hover {
    -	transform: var(--dr-press-hover);  /* translate(-2px, -2px) */
    -	box-shadow: var(--dr-shadow-hover-md), var(--dr-shadow-inner-highlight);
    -}
    -/* Active: drive into the rack, offset collapses */
    -.dr-btn:active {
    -	transform: var(--dr-press-active); /* translate(2px, 2px) */
    -	box-shadow: var(--dr-shadow-active);
    -}
    -
    -

    Try it on every button, checkbox, and chip - on this page. Focus is a 2px Stack Overglow outline at 2px offset, in addition to the resting - shadow; keyboard focus never removes the shadow. Under prefers-reduced-motion, transforms - and transitions are removed but all state colours remain.

    -
    - -
    -

    Buttons

    -

    The signature component. A hardware panel switch: thick edge, hard shadow, - light-catching bevel, physical travel. One primary per view; labels are verbs ("Save changes", not - "OK").

    -
    -

    Variants

    -
    - - - -
    -
    - - - -
    -

    primary: Digital Rust → Firewall Breach + glow on hover · ghost: transparent → - Core Meltdown fill + Digital Rust border · disabled: dead switch, no click

    -
    -
    - -
    -

    Inputs & Wells

    -

    Inputs sit below the panel, not above it: the Recessed Well Rule. The - darkest surface on the page, a 2px Bad Sector border, no offset shadow. Depth through darkness, not - elevation.

    -
    -
    -

    Text Input

    -
    - - -
    -
    - - -
    -
    - - -

    ✗ Connection refused on port 22

    -
    -
    - - -
    -
    -
    -

    Text Area & Slider

    -
    - - -
    -
    - - -
    -

    hover: Dark Packet border · focus: Digital Rust border + Stack Overglow - ring · invalid: Amber Alert

    -
    -
    -
    - -
    -

    Switches

    -

    Checkboxes run the full press cycle; toggles slide a machined thumb on a railed - track. Both are square-edged: machined parts, not pills.

    -
    -
    -

    Checkboxes

    -
    - -
    -
    - -
    -
    - -
    -
    -
    -

    Toggles

    -
    - -
    -
    - -
    -
    -
    -
    - -
    -

    Containers

    -

    Tabs, menus, modals, toasts, tooltips, callouts, and status bars: solid panels - bolted over the page, never blurred glass.

    -
    -
    -

    Tabs

    -
    -
    - - - -
    -
    $ gcc -o entropy kernel.c && ./entropy
    segmentation fault - (core dumped)
    -
    -
    - ln 42, col 7 - ✗ 3 - ⚠ 1 - Git✓ -
    -
    -
    -

    Menu

    -
      -
    • Recompile kernel
    • -
    • Inspect core dump
    • - -
    • Flash firmware
    • -
    • RMA the board
    • -
    -

    hover: Bad Sector fill · separators full-bleed · no backdrop blur

    -
    -
    -

    Modal

    -
    -

    Format /dev/rust?

    -

    This will irrecoverably corrode all sectors on the device. Backups will not save you.

    - -
    -

    offset-lg, highest layer · one primary per view · backdrop: - rgba(17,4,2,0.7), never black, never blurred

    -
    -
    -

    Toasts

    -
    ✓ Firmware flashed. 4,096 blocks verified.
    -
    ⚠ Bus temperature 85.5°C and rising.
    -
    ✗ Kernel panic in module entropy.ko
    -
    ℹ 3 updates staged for next reboot
    -

    Bricked Board panel — notices radiate residual heat

    -
    -
    -

    Callouts

    -
    -
    Note
    -

    The 3px left accent is a deliberate exception to the no-accent-stripe rule, so semantic - blocks are identifiable at scroll speed.

    -
    -
    -
    Warning
    -

    Offset shadows communicate elevation. Colour communicates semantics. Never both at full - strength.

    -
    -
    -
    -

    Badges & Tooltip

    -
    - Git Added - Git Modified - Git Deleted - Deprecated - Hint -
    -
    -
    Tooltip: Core Meltdown panel, offset-md + bevel, Phosphor Smoke - text. No arrow stem; the shadow says what it floats above.
    -
    -

    badges are static rivets: no press cycle, no shadow

    -
    -
    -
    - -
    -

    Named Rules

    -
    -
    -

    The No Blur Rule

    -

    Blur radius is zero everywhere except glow shadows, which simulate radiated heat, not material - depth.

    -
    -
    -

    The Bevel Rule

    -

    An element with an offset shadow and no inner highlight is unfinished. The two are stacked and - travel together.

    -
    -
    -

    The Recessed Well Rule

    -

    Wells stay in the rack: no offset shadow, no hover lift, no texture. Depth through darkness, - not elevation.

    -
    -
    -

    The Black Is Forbidden Rule

    -

    No #000 anywhere, including scrims and backdrops. Warm near-blacks only.

    -
    -
    -

    The Radius Ceiling Rule

    -

    Nothing rounds past 6px. 4px for panels, 2px for machined parts (checkboxes, thumbs, menu - items). Pills for badges only.

    -
    -
    -

    The Dead Switch Rule

    -

    Disabled elements have no shadow and no transform. A dead switch does not click.

    -
    -
    -
    - - -
    - - -