diff --git a/src/lib/components/AccessibilityPanel.svelte b/src/lib/components/AccessibilityPanel.svelte
index f9d8a57..b0f8870 100644
--- a/src/lib/components/AccessibilityPanel.svelte
+++ b/src/lib/components/AccessibilityPanel.svelte
@@ -81,7 +81,7 @@
.contrast-table th,
.contrast-table td {
- border: var(--dr-border-subtle);
+ border-bottom: var(--dr-border-subtle);
padding: var(--dr-space-sm);
text-align: left;
}
@@ -90,6 +90,19 @@
background: var(--dr-surface-elevated);
font-family: var(--dr-font-heading);
font-weight: 700;
+ font-size: var(--dr-text-xs);
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ color: var(--fatal-error);
+ border-bottom: var(--dr-border);
+ }
+
+ .contrast-table tbody tr:last-child td {
+ border-bottom: none;
+ }
+
+ .contrast-table tbody tr:hover {
+ background: var(--dr-surface-highlight);
}
.cue-list {
diff --git a/src/lib/components/PaletteSection.svelte b/src/lib/components/PaletteSection.svelte
index 61d144c..7bb8e4d 100644
--- a/src/lib/components/PaletteSection.svelte
+++ b/src/lib/components/PaletteSection.svelte
@@ -144,6 +144,11 @@
box-shadow: var(--dr-shadow-hover-md);
}
+ .ansi-chip:active {
+ transform: translate(2px, 2px);
+ box-shadow: var(--dr-shadow-active);
+ }
+
.ansi-label {
color: var(--chip-fg, var(--copper-trace));
font-size: var(--dr-text-xs);
diff --git a/src/lib/components/PreviewGallery.svelte b/src/lib/components/PreviewGallery.svelte
index 07827e9..b44633c 100644
--- a/src/lib/components/PreviewGallery.svelte
+++ b/src/lib/components/PreviewGallery.svelte
@@ -214,7 +214,7 @@
}
.lightbox-prev:active {
- transform: translate(0, -50%);
+ transform: translate(2px, calc(-50% + 2px));
}
.lightbox-next {
@@ -226,11 +226,11 @@
}
.lightbox-next:hover {
- transform: translate(2px, calc(-50% - 2px));
+ transform: translate(-2px, calc(-50% - 2px));
}
.lightbox-next:active {
- transform: translate(4px, -50%);
+ transform: translate(2px, calc(-50% + 2px));
}
@media (max-width: 768px) {
diff --git a/src/lib/components/SpecGuarantees.svelte b/src/lib/components/SpecGuarantees.svelte
index da51797..d1fb951 100644
--- a/src/lib/components/SpecGuarantees.svelte
+++ b/src/lib/components/SpecGuarantees.svelte
@@ -69,6 +69,11 @@
box-shadow: var(--dr-shadow-hover-md);
}
+ .spec-card:active {
+ transform: translate(2px, 2px);
+ box-shadow: var(--dr-shadow-active);
+ }
+
.spec-card h3 {
color: var(--fatal-error);
margin-bottom: var(--dr-space-sm);
diff --git a/src/lib/components/TokenMap.svelte b/src/lib/components/TokenMap.svelte
index dc86f8a..44da11e 100644
--- a/src/lib/components/TokenMap.svelte
+++ b/src/lib/components/TokenMap.svelte
@@ -190,6 +190,11 @@
box-shadow: var(--dr-shadow-hover-md);
}
+ .token-card:active {
+ transform: translate(2px, 2px);
+ box-shadow: var(--dr-shadow-active);
+ }
+
.token-card header {
display: flex;
justify-content: space-between;
diff --git a/src/lib/components/UiLab.svelte b/src/lib/components/UiLab.svelte
index a15bdda..f3b57db 100644
--- a/src/lib/components/UiLab.svelte
+++ b/src/lib/components/UiLab.svelte
@@ -103,7 +103,7 @@
display: flex;
justify-content: space-between;
align-items: center;
- border-bottom: var(--dr-border-subtle);
+ border-bottom: var(--dr-border);
padding-bottom: var(--dr-space-xs);
}
@@ -114,7 +114,7 @@
.tab {
padding: var(--dr-space-xs) var(--dr-space-sm);
- border-radius: 0;
+ border-radius: var(--dr-radius-sm) var(--dr-radius-sm) 0 0;
background: var(--dr-surface-base);
color: var(--dr-text-secondary);
font-size: var(--dr-text-xs);
@@ -171,8 +171,9 @@
.status-bar {
display: flex;
gap: var(--dr-space-sm);
+ font-family: var(--dr-font-mono);
font-size: var(--dr-text-xs);
- background: var(--dr-surface-secondary);
+ background: var(--bricked-board);
padding: var(--dr-space-xs) var(--dr-space-sm);
border-radius: var(--dr-radius-sm);
}
@@ -199,8 +200,8 @@
.panel h3 {
margin-top: 0;
- color: var(--stack-overglow);
- letter-spacing: 0.08em;
+ color: var(--fatal-error);
+ letter-spacing: 0.05em;
text-transform: uppercase;
font-size: var(--dr-text-sm);
font-family: var(--dr-font-heading);
@@ -231,7 +232,7 @@
}
.diff-line.mod {
- background: var(--dead-thread-15);
+ background: var(--dead-thread-10);
color: var(--dr-text-primary);
}
@@ -272,8 +273,8 @@
.hint {
font-size: var(--dr-text-xs);
- color: var(--phosphor-smoke-70);
- background: var(--dr-surface-highlight);
+ color: var(--dr-text-muted);
+ background: var(--bad-sector-20);
padding: var(--dr-space-xs) var(--dr-space-sm);
border-radius: var(--dr-radius-sm);
font-style: italic;
diff --git a/src/lib/palette.ts b/src/lib/palette.ts
index 60a75a8..eb319cc 100644
--- a/src/lib/palette.ts
+++ b/src/lib/palette.ts
@@ -341,6 +341,7 @@ ${emitNamedColors()}
--core-meltdown-40: ${tint('core-meltdown', 0.4)}; /* translucent panel tint (blockquotes, scrims) */
--event-horizon-95: ${tint('event-horizon', 0.95)}; /* near-opaque warm backdrop (lightboxes) */
--phosphor-smoke-70: ${tint('phosphor-smoke', 0.7)}; /* de-emphasised body copy (hints) */
+ --bad-sector-20: ${tint('bad-sector', 0.2)}; /* inlay-hint fill */
--dr-text-muted: ${tint('phosphor-smoke', 0.5)};
/* Font stacks. Illustrative only, NOT a constraint. Any families of
diff --git a/src/lib/styles/app.css b/src/lib/styles/app.css
index 513b602..41268b3 100644
--- a/src/lib/styles/app.css
+++ b/src/lib/styles/app.css
@@ -61,7 +61,6 @@ body::after {
max-width: 1400px;
margin: 0 auto;
position: relative;
- z-index: var(--dr-z-content);
}
/* ────────────────────────────────────────────
@@ -208,7 +207,7 @@ h6 {
.btn[disabled] {
background: var(--dr-surface-highlight);
border-color: var(--dr-surface-highlight);
- color: var(--dr-text-muted, var(--dr-text-muted));
+ color: var(--dr-text-muted);
cursor: not-allowed;
transform: none;
box-shadow: none;
@@ -512,6 +511,8 @@ footer {
border: 2px solid var(--dr-surface-highlight);
border-radius: var(--dr-radius);
padding: var(--dr-space-sm) 0.75rem;
+ position: relative;
+ z-index: calc(var(--dr-z-noise) + 1); /* text surfaces are exempt from the texture overlays */
color: var(--dr-text-primary);
font-family: var(--dr-font-body);
font-size: var(--dr-text-base);
@@ -582,6 +583,7 @@ footer {
display: inline-flex;
align-items: center;
gap: var(--dr-space-sm);
+ min-height: 24px; /* minimum touch target */
cursor: pointer;
font-size: var(--dr-text-sm);
color: var(--dr-text-secondary);
@@ -591,9 +593,9 @@ footer {
.dr-checkbox input {
appearance: none;
-webkit-appearance: none;
- width: 18px;
- height: 18px;
- flex: 0 0 18px;
+ width: 16px;
+ height: 16px;
+ flex: 0 0 16px;
border: 2px solid var(--dark-packet);
border-radius: var(--dr-radius-sm);
background: var(--dr-surface-base);
@@ -642,6 +644,7 @@ footer {
}
.dr-checkbox input:disabled {
+ background: var(--dr-surface-highlight);
border-color: var(--dr-surface-highlight);
cursor: not-allowed;
transform: none;
@@ -653,6 +656,7 @@ footer {
display: inline-flex;
align-items: center;
gap: var(--dr-space-sm);
+ min-height: 24px; /* minimum touch target */
cursor: pointer;
font-size: var(--dr-text-sm);
color: var(--dr-text-secondary);
@@ -717,12 +721,27 @@ footer {
-webkit-appearance: none;
width: 100%;
height: 4px;
- background: var(--dr-surface-base);
+ /* The used portion is a Digital Rust fill. A gradient carries it in every engine,
+ because WebKit has no range-progress pseudo-element. The page sets --dr-slider-fill. */
+ background: linear-gradient(
+ to right,
+ var(--digital-rust) var(--dr-slider-fill, 50%),
+ var(--dr-surface-base) var(--dr-slider-fill, 50%)
+ );
border: 1px solid var(--dr-surface-highlight);
border-radius: var(--dr-radius-sm);
cursor: pointer;
}
+.dr-slider::-webkit-slider-runnable-track {
+ background: transparent;
+}
+
+.dr-slider::-moz-range-track {
+ background: transparent;
+ height: 4px;
+}
+
.dr-slider::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
@@ -749,8 +768,8 @@ footer {
}
.dr-slider::-moz-range-thumb {
- width: 12px;
- height: 12px;
+ width: 16px;
+ height: 16px;
background: var(--ghost-pixel);
border: 2px solid var(--dark-packet);
border-radius: var(--dr-radius-sm);
@@ -761,14 +780,23 @@ footer {
box-shadow var(--dr-transition-fast);
}
+.dr-slider::-moz-range-thumb:hover {
+ transform: var(--dr-press-hover);
+ box-shadow: var(--dr-shadow-hover-md), var(--dr-shadow-inner-lowlight);
+}
+
+.dr-slider::-moz-range-thumb:active {
+ transform: var(--dr-press-active);
+ box-shadow: var(--dr-shadow-active);
+}
+
.dr-slider::-moz-range-progress {
- background: var(--digital-rust);
- height: 4px;
+ background: transparent;
}
.dr-slider:focus-visible {
outline: var(--dr-focus-ring);
- outline-offset: 4px;
+ outline-offset: var(--dr-focus-ring-offset);
}
/* ── Tabs ── */
@@ -788,6 +816,7 @@ footer {
.dr-tab {
padding: var(--dr-space-sm) var(--dr-space-md);
+ border-radius: var(--dr-radius-sm) var(--dr-radius-sm) 0 0;
font-family: var(--dr-font-heading);
font-size: var(--dr-text-xs);
font-weight: 600;
@@ -936,7 +965,7 @@ footer {
border: var(--dr-border);
border-radius: var(--dr-radius);
box-shadow: var(--dr-shadow-offset-md), var(--dr-shadow-inner-highlight);
- padding: var(--dr-space-md);
+ padding: var(--dr-space-lg);
margin-bottom: var(--dr-space-md);
}
@@ -1019,16 +1048,18 @@ footer {
/* ── Status bar demo ── */
.dr-statusbar {
display: flex;
- gap: var(--dr-space-md);
background: var(--bricked-board);
border-top: var(--dr-border);
- padding: var(--dr-space-xs) var(--dr-space-sm);
font-family: var(--dr-font-mono);
font-size: var(--dr-text-xs);
color: var(--dr-text-primary);
border-radius: 0 0 var(--dr-radius) var(--dr-radius);
}
+.dr-statusbar span {
+ padding: var(--dr-space-xs) var(--dr-space-sm);
+}
+
.dr-statusbar .status-success {
color: var(--memory-leek);
}
@@ -1039,6 +1070,10 @@ footer {
color: var(--amber-alert-text);
}
+.dr-statusbar span:hover {
+ color: var(--phantom-current);
+}
+
/* ────────────────────────────────────────────
Selection & Focus (design system)
──────────────────────────────────────────── */
@@ -1068,12 +1103,15 @@ footer {
::-webkit-scrollbar-thumb {
background: var(--dark-packet);
- border-radius: 4px;
- border: 2px solid var(--dr-surface-secondary);
+ border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
- background: var(--digital-rust);
+ background: var(--daemon-blood);
+}
+
+::-webkit-scrollbar-thumb:active {
+ background: var(--dr-surface-active);
}
* {
diff --git a/src/lib/styles/spec.css b/src/lib/styles/spec.css
index 4c867ce..7f9ceaa 100644
--- a/src/lib/styles/spec.css
+++ b/src/lib/styles/spec.css
@@ -297,15 +297,20 @@ body:has(.site-shell) {
font-variation-settings: 'slnt' 0;
font-weight: 700;
font-size: var(--dr-text-xs);
- color: var(--copper-trace);
+ color: var(--fatal-error);
text-transform: uppercase;
letter-spacing: 0.2em;
+ border-bottom: var(--dr-border);
}
.spec-document tbody tr:last-child td {
border-bottom: none;
}
+.spec-document tbody tr:hover {
+ background: var(--dr-surface-highlight);
+}
+
.spec-document pre {
margin: var(--dr-space-md) 0;
padding: var(--dr-space-lg);
diff --git a/src/routes/playground/+page.svelte b/src/routes/playground/+page.svelte
index 4d6f9ba..dc8a1ea 100644
--- a/src/routes/playground/+page.svelte
+++ b/src/routes/playground/+page.svelte
@@ -123,7 +123,7 @@
Digital Rust / Playground
@@ -221,7 +221,6 @@
margin: 0 auto;
padding: var(--dr-space-lg);
position: relative;
- z-index: var(--dr-z-content);
}
header {
@@ -417,6 +416,10 @@
resize: none;
tab-size: 4;
hyphens: none;
+ position: relative;
+ z-index: calc(
+ var(--dr-z-noise) + 1
+ ); /* text surfaces are exempt from the texture overlays */
}
textarea::placeholder {
@@ -437,6 +440,10 @@
font-family: var(--dr-font-mono);
font-size: var(--dr-text-sm);
line-height: 1.6;
+ position: relative;
+ z-index: calc(
+ var(--dr-z-noise) + 1
+ ); /* editor surfaces are exempt from the texture overlays */
}
.code-output :global(pre) {
@@ -462,7 +469,7 @@
padding: var(--dr-space-sm) var(--dr-space-md);
background: var(--bricked-board);
color: var(--dr-text-primary);
- border: none;
+ border-top: var(--dr-border);
border-radius: 0;
box-shadow: none;
font-family: var(--dr-font-mono);
diff --git a/src/routes/ui/+page.svelte b/src/routes/ui/+page.svelte
index 74e69d8..e24d146 100644
--- a/src/routes/ui/+page.svelte
+++ b/src/routes/ui/+page.svelte
@@ -1,6 +1,10 @@
@@ -232,7 +236,8 @@
type="range"
min="0"
max="100"
- value="42"
+ bind:value={voltage}
+ style:--dr-slider-fill="{voltage}%"
/>