Something went wrong. Try again.
A warm, tech-dystopian color scheme inspired by corrupted hardware and failing systems. digitalrust.katsuricata.com
theme color-scheme color-theme warm color
Something went wrong. Try again.
4.4 kB · 187 lines
Svelte
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188<script lang="ts"> import { ansiSlots, bestTextColor, color, rustRamp } from '#lib/palette.js';</script>
<section class="palette-section"> <h3 class="palette-header">Main Color Palette</h3> <p class="section-copy">Warm rust-to-void gradient used across editor, UI, and docs.</p> <div class="color-grid"> {#each rustRamp as entry (entry.id)} <div class="color-chip" style:--chip-bg="var(--{entry.id})" style:--chip-fg="var(--{bestTextColor(entry.hex).id})" class:brand={entry.id === 'digital-rust'} > <span class="color-name"> {#if entry.id === 'digital-rust'}<strong>{entry.name}</strong >{:else}{entry.name}{/if} </span> <span class="color-hex">{entry.hex.toUpperCase()}</span> </div> {/each} </div></section>
<section class="palette-section ansi"> <h3 class="palette-header">ANSI 16-Color Map</h3> <div class="ansi-grid"> {#each ansiSlots as slot (slot.slot)} {@const entry = color(slot.colorId)} <div class="ansi-chip" style:--chip-bg="var(--{entry.id})" style:--chip-fg="var(--{bestTextColor(entry.hex).id})" > <span class="ansi-label">{slot.slot}</span> <span class="ansi-name">{entry.name}</span> <span class="ansi-hex">{entry.hex}</span> </div> {/each} </div></section>
<style> .palette-section { background: var(--dr-surface-elevated); border: var(--dr-border); 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); font-family: var(--dr-font-mono); }
.palette-header { color: var(--dr-heading); margin-bottom: var(--dr-space-lg); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--dr-font-heading); font-weight: 700; }
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--dr-space-sm); }
.color-chip { height: 80px; border-radius: var(--dr-radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: var(--dr-text-xs); font-weight: 700; background: var(--chip-bg, var(--dr-surface-base)); color: var(--chip-fg, var(--dr-text-primary)); transition: transform var(--dr-transition-fast), box-shadow var(--dr-transition-fast), border-color var(--dr-transition-fast); position: relative; overflow: hidden; border: 2px solid transparent; cursor: default; }
.color-chip.brand { border-color: var(--dr-accent); }
.color-chip:hover { transform: translate(-2px, -2px); box-shadow: var(--dr-shadow-hover-md); border-color: var(--dr-surface-highlight); }
.color-chip.brand:hover { border-color: var(--dr-accent); }
.color-chip:active { transform: translate(2px, 2px); box-shadow: var(--dr-shadow-active); }
.color-name { padding: 2px 6px; border-radius: var(--dr-radius-sm); text-align: center; }
.color-hex { font-size: 0.65rem; opacity: 0.8; margin-top: 2px; font-family: var(--dr-font-mono); }
.ansi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--dr-space-md); }
.ansi-chip { border: var(--dr-border); border-radius: var(--dr-radius); padding: var(--dr-space-sm); 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); transition: transform var(--dr-transition-fast), box-shadow var(--dr-transition-fast); }
.ansi-chip:hover { transform: translate(-2px, -2px); 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(--dr-text-quiet)); font-size: var(--dr-text-xs); text-transform: uppercase; letter-spacing: 0.08em; }
.ansi-name { display: block; font-weight: 700; }
.ansi-hex { color: var(--chip-fg, var(--dr-text-secondary)); font-size: var(--dr-text-xs); font-family: var(--dr-font-mono); }
@media (max-width: 480px) { .color-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
.color-chip { height: 72px; }
.color-hex { font-size: 0.6rem; }
.ansi-grid { grid-template-columns: 1fr 1fr; } }</style>