/* ========================================================================== retro-desktop-theme / tokens -------------------------------------------------------------------------- This file is the single source of truth. Every literal value in the theme lives here exactly once. The Tailwind adapters next to it (theme.css for v4, preset.js for v3) hold no values of their own; they point at these custom properties with var(). Each group is annotated with the creative-direction axis the choice serves. The four axes are tone register, aesthetic philosophy, audience relationship, and sensory ambition. Read them at https://rampstack.co/framework/creative-direction This theme is a shell: the tokens describe both a visual register (the mid-90s desktop) and the geometry of an operating-system chrome that shell/shell.css draws with them. The SHELL GEOMETRY and BEVEL groups are the part a register theme would not have. THE PALETTE IS THE NAMED-COLOR PALETTE. Seven of the values below are the HTML 4.01 named colors, unchanged: teal #008080, silver #c0c0c0, gray #808080, navy #000080, maroon #800000, white and black. That set is the generic vocabulary of the era, standardized in the HTML specification and owned by nobody. No value here is sampled from any company's product, and no company's iconography, logo or typeface appears anywhere in this repo. Where a value is NOT a named color it is because a measurement forced it, and the comment says which measurement. Contrast ratios in the comments are WCAG 2.1 relative-luminance figures, measured against the surface named. This theme has two very different grounds a reader finds text on: the silver window face and the teal desktop. Text on the desktop is white and text on the face is black, and both directions are measured. Every text pairing here clears AA. ========================================================================== */ :root { /* ---------------------------------------------------------------------- THE DESKTOP GROUND Aesthetic philosophy axis. Flat teal, the era's default field, and it is flat on purpose: the era's desktop was a solid color behind windows that were themselves busy with chrome, and a photograph behind beveled gray chrome reads as a mistake in both directions. The two darker teals exist for the slats wallpaper only. They are DARKER than the ground, never lighter, which is this theme's version of the class's contrast-by-construction rule: desktop text is white, so the wallpaper may only ever paint downward. Measured with white: ground 4.77:1, slat 5.75:1, groove 7.18:1 Black on the ground measures 4.40:1 and fails AA, which is why nothing on the desktop is ever inked black. Window content is a different surface and has its own pairings below. ---------------------------------------------------------------------- */ --rd-ground: #008080; /* teal, the desktop */ --rd-ground-slat: #007272; /* slats wallpaper: the slat face */ --rd-ground-groove: #006262; /* slats wallpaper: the groove between slats */ --rd-desk-ink: #ffffff; /* the only ink allowed on the desktop */ /* ---------------------------------------------------------------------- SURFACES Aesthetic philosophy axis. Three, and they mean three different things in this era's grammar. The face is the material every piece of chrome is cut from: title bars, buttons, the taskbar, the window frame. The surface is paper, the white client area a document lives in. The muted surface is the light half-step used for recessed panels inside a window, where a full white would claim to be a document. ink on surface 21.00:1, on face 11.54:1, on surface-muted 15.76:1 ink-muted on surface 8.86:1, on face 4.87:1, on surface-muted 6.65:1 ---------------------------------------------------------------------- */ --rd-face: #c0c0c0; /* silver, the material of all chrome */ --rd-surface: #ffffff; /* the client area, paper */ --rd-surface-muted: #dfdfdf; /* recessed panels inside a window */ /* ---------------------------------------------------------------------- INK Audience relationship axis. Pure black, not a softened near-black. The era rendered UI text with no antialiasing at all, so a warmed ink is a later idea wearing an earlier costume. Muted ink is quoted against its worst surface, the face, because secondary text appears on all three. ---------------------------------------------------------------------- */ --rd-ink: #000000; --rd-ink-muted: #4a4a4a; /* not a named color: #808080 measures 2.17:1 on the face and fails */ /* ---------------------------------------------------------------------- THE BEVEL TONES Aesthetic philosophy axis, and the center of this whole theme. A raised or sunken edge in this era is not a border style; it is four one-pixel lines drawn in a fixed order, two light on the top and left, two dark on the bottom and right, swapped to invert the direction. The tones below are those four lines, and shell.css composes them into the --rd-raise and --rd-sink shadow tokens further down. Bevels are CONSTRUCTED, never declared. CSS has border-style: outset and inset, and they draw a single flat edge that looks nothing like this; Tailwind's --border-style-* namespace is not processed at all (verified, see theme.css). Composing the edge out of inset shadows is what makes it correct AND what makes it a token, so the CUSTOMIZE move can flatten the whole theme by rewriting two values. WHAT THE BEVEL DOES AND DOES NOT BUY, measured against the face: bevel-dark 11.54:1 the outer bottom-right edge bevel-shadow 2.17:1 the inner bottom-right edge bevel-light 1.82:1 the inner top-left edge bevel-hi 1.82:1 the outer top-left edge Only the dark outer edge clears the 3:1 non-text floor. The light edges are shading and carry no information; they are not what makes a control findable. That job belongs to the dark edge, and to the control's own label, which is full ink at 11.54:1. ---------------------------------------------------------------------- */ --rd-bevel-hi: #ffffff; /* outer light line, top and left */ --rd-bevel-light: #dfdfdf; /* inner light line, top and left */ --rd-bevel-shadow: #808080; /* gray. inner dark line, bottom and right */ --rd-bevel-dark: #000000; /* outer dark line, bottom and right */ /* ---------------------------------------------------------------------- THE ACCENT Sensory ambition axis. Exactly one accent, navy, and the era spent it in exactly one place: the title bar of the window you are working in. This theme spends it there, on links, and on the selected icon label. Nowhere else. A second accent is a later decade. white on accent 16.01:1. accent on surface 16.01:1, on face 8.80:1 accent on the teal ground 3.35:1, which clears the 3:1 UI floor ---------------------------------------------------------------------- */ --rd-accent: #000080; /* navy */ --rd-accent-ink: #ffffff; /* The inactive window's title bar. The era used gray here, and white on gray measures 3.95:1, which fails AA for the title text. So this one value leaves the named palette: a desaturated navy-gray dark enough to carry white type. It is the single place in this theme where the era loses an argument to legibility, and it is worth losing. white on title-idle 7.42:1 */ --rd-title-idle: #545464; /* ---------------------------------------------------------------------- DESTRUCTIVE Tone register axis. One red, maroon, and it is an INK rather than a fill. This era had no colored button, so a destructive action is the same gray button wearing maroon type and an invalid field is the same sunken field with a maroon ring. There is no destructive-ink token because nothing here ever puts text on the red. destructive on surface 10.95:1, on face 6.02:1 The window's close control does not use this color at all: closing a window is the most common thing a reader will do here, and a red close button teaches them to fear it. ---------------------------------------------------------------------- */ --rd-destructive: #800000; /* maroon */ /* ---------------------------------------------------------------------- FLAT SEMANTIC FILLS Aesthetic philosophy axis. Badge fills pale enough to take full- strength black, so meaning lives in the hue and legibility never depends on it. Ink on every fill clears AA with room: success 15.65:1, info 14.54:1, warning 20.31:1, danger 13.80:1 The warning fill doubles as the desktop note's paper. ---------------------------------------------------------------------- */ --rd-fill-success: #c6e7c6; --rd-fill-info: #c8d8f0; --rd-fill-warning: #ffffbf; --rd-fill-danger: #f0c8c8; /* ---------------------------------------------------------------------- HAIRLINE Aesthetic philosophy axis. This era has almost no use for a border: a bevel does the work a border does elsewhere. The hairline survives for the two jobs a bevel cannot do, the engraved rule between list rows and the outline of a flat swatch, and it is drawn in the bevel tones rather than in a color of its own. ---------------------------------------------------------------------- */ --rd-hairline: 1px; /* ---------------------------------------------------------------------- BEVELS, COMPOSED Aesthetic philosophy axis. The four tones above, assembled in the order the era assembled them. Two-pixel bevels for windows, buttons and fields; one-pixel bevels for the small chrome that cannot afford four lines. Swapping the light and dark halves is the entire difference between a thing that sticks out and a thing that goes in, which is why a pressed button in this theme is not a color change or a transform: it is --rd-sink instead of --rd-raise. The drop shadow is the one hard shadow the era had, cast by menus. Zero blur, offset only, drawn in the dark tone. Nothing anywhere in this theme has a blur radius, which is the claim that matters: a soft shadow here would be a different decade. Two other rules do use a non-inset box-shadow, and both are drawing a border rather than a shadow, because a spread ring costs no layout: the default button's black ring in components.css, and the invalid field's maroon ring. Neither is offset and neither is blurred. ---------------------------------------------------------------------- */ --rd-raise: inset 1px 1px 0 0 var(--rd-bevel-hi), inset -1px -1px 0 0 var(--rd-bevel-dark), inset 2px 2px 0 0 var(--rd-bevel-light), inset -2px -2px 0 0 var(--rd-bevel-shadow); --rd-sink: inset 1px 1px 0 0 var(--rd-bevel-dark), inset -1px -1px 0 0 var(--rd-bevel-hi), inset 2px 2px 0 0 var(--rd-bevel-shadow), inset -2px -2px 0 0 var(--rd-bevel-light); --rd-raise-thin: inset 1px 1px 0 0 var(--rd-bevel-hi), inset -1px -1px 0 0 var(--rd-bevel-shadow); --rd-sink-thin: inset 1px 1px 0 0 var(--rd-bevel-shadow), inset -1px -1px 0 0 var(--rd-bevel-hi); --rd-drop: 2px 2px 0 0 var(--rd-bevel-dark); /* ---------------------------------------------------------------------- RADIUS Audience relationship axis. Zero, twice. The era had no rounded corner anywhere in its chrome, and the two tokens exist rather than being deleted because they are the dial: CUSTOMIZE.md's first move raises both, and the same shell reads thirty years newer. ---------------------------------------------------------------------- */ --rd-radius: 0px; /* buttons, fields, controls, icons */ --rd-radius-window: 0px; /* windows and the programs menu */ /* ---------------------------------------------------------------------- TYPE Tone register axis. System fonts, no webfont, no network request, and specifically no era typeface: the fonts that shipped with the operating systems of this era are licensed software, and a theme that embedded one would be redistributing it. The stack below is the ordinary system UI stack, which is the honest way to get an era-plausible grotesque on every platform. The scale stops at 32px. A 44px headline is a later decade's idea of a landing page; inside a 720px window with a 30px title bar it shouts at the furniture. Two weights, regular and bold, because the era's UI had two. Chrome text (title bars, taskbar, menu) is the 14px step, which is two points larger than the era drew it and is where era fidelity yields to a readable floor. ---------------------------------------------------------------------- */ --rd-font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --rd-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --rd-weight-body: 400; --rd-weight-bold: 700; --rd-text-display: 2rem; /* 32px */ --rd-text-h1: 1.5rem; /* 24px */ --rd-text-h2: 1.25rem; /* 20px */ --rd-text-h3: 1.0625rem; /* 17px */ --rd-text-body: 1rem; /* 16px, the floor for form inputs on iOS */ --rd-text-sm: 0.875rem; /* 14px, chrome voice and the floor for body content */ --rd-text-xs: 0.75rem; /* 12px, icon labels and badges */ --rd-leading-tight: 1.15; --rd-leading-snug: 1.3; --rd-leading-body: 1.55; /* One tracking value, spent on the uppercase badge. The era did not track its UI type and neither does this. */ --rd-tracking-wide: 0.05em; /* ---------------------------------------------------------------------- SPACE Aesthetic philosophy axis. A fixed scale. The steps are tighter than a modern theme's because era chrome was drawn to a pixel budget, and window padding comes off the same scale as everything else. ---------------------------------------------------------------------- */ --rd-space-1: 4px; --rd-space-2: 8px; --rd-space-3: 12px; --rd-space-4: 16px; --rd-space-6: 24px; --rd-space-8: 32px; --rd-space-12: 48px; --rd-space-16: 64px; --rd-measure: 64ch; /* ---------------------------------------------------------------------- MOTION Sensory ambition axis. One animation, and it is stepped rather than eased. The era animated an opening window as a few expanding wireframe rectangles, not as a smooth rise, so this theme's single motion is a three-step expansion over 90ms. It reads as chunky on purpose; replacing the steps with a cubic-bezier is how this theme stops being of its era. Under prefers-reduced-motion the block at the bottom of this file collapses the duration and zeroes the scale, so windows appear in place, complete. ---------------------------------------------------------------------- */ --rd-duration: 90ms; --rd-ease: steps(3, end); --rd-open-scale: 0.94; /* how much smaller a window starts */ /* ---------------------------------------------------------------------- FOCUS Audience relationship axis. The era drew focus as a dotted rectangle inside the control, and that is generic vocabulary worth keeping: it is unmistakable and it costs no color. Two ring colors, because this theme has a dark chrome ground (the navy title bar, the teal desktop) as well as a light one, and one ring cannot serve both. ink ring on face 11.54:1, on surface 21.00:1 white ring on the teal ground 4.77:1, on the navy title bar 16.01:1 Two pixels rather than the era's one, because a one-pixel dotted ring is a hairline on a high-density screen. ---------------------------------------------------------------------- */ --rd-ring: var(--rd-ink); --rd-ring-invert: var(--rd-desk-ink); --rd-ring-width: 2px; --rd-ring-style: dotted; --rd-ring-inset: 3px; /* the ring is drawn inside the control, as the era drew it */ /* ---------------------------------------------------------------------- SHELL GEOMETRY The group a register theme would not have: the measurements of the operating system itself. shell/shell.css draws the chrome entirely from these, so re-skinning the shell is still a one-file edit. The control size is 24px, which is exactly the WCAG 2.5.8 target minimum and not a pixel more. That is a deliberate trade: the era's title-bar buttons were 16px square, a title bar sized to hold a 32px control stops reading as this era at all, and 24px is the smallest size that is both era-plausible and compliant. Every other target here is larger: taskbar entries are 26px tall by at least 60px wide, desktop icons are 84px cells, and in-content buttons hold the 44px floor in components.css. The cascade offset is what makes a second window read as a second window rather than a re-render of the first. ---------------------------------------------------------------------- */ --rd-titlebar-height: 30px; --rd-control-size: 24px; /* close and minimize buttons */ --rd-taskbar-height: 40px; --rd-icon-size: 40px; /* the glyph on a desktop icon */ --rd-icon-cell: 84px; /* full icon including its caption */ --rd-window-width: 720px; --rd-cascade: 24px; /* per-window stagger of the pile */ --rd-bevel-width: 2px; /* the frame thickness the bevels above draw into */ /* Layering. Windows are raised by shell.js within the open range; chrome sits above every window, and the skip link above everything. */ --rd-z-window: 10; /* base of the window stack */ --rd-z-chrome: 30; /* taskbar */ --rd-z-launcher: 40; /* the open programs menu */ --rd-z-skip: 50; /* ---------------------------------------------------------------------- PLAY: THE DESKTOP NOTE Tone register axis. One paper note pinned to the desktop, on the warning fill, with a raised bevel like everything else. It does not tilt. A tilted note is a later decade's sticker; this era pinned things square, and the restraint is what keeps the note reading as part of the desktop instead of as a decal on top of it. ---------------------------------------------------------------------- */ --rd-note-size: 176px; } /* Anyone who has asked the operating system to stop animating gets windows that appear in place, complete, instantly. The shell still works; it just stops performing. */ @media (prefers-reduced-motion: reduce) { :root { --rd-duration: 1ms; --rd-open-scale: 1; } }