/*============================================================================== Auth theme - the ONE place the sign-in and registration pages get their colour ------------------------------------------------------------------------------ login.css and signup.css contain no colour values of their own. Every colour on both pages resolves back to the short list in "THE PALETTE" below, so changing the primary colour here changes it on both screens, in every state - buttons, their hover and focus rings, links, tints, borders and shadows all follow, because they are derived from it rather than written out again. To re-skin the pages, edit the values between the two ==== rules and nothing else. Everything after them is arithmetic. How the derivation works ------------------------ Derived tokens use CSS color-mix(), which blends two colours at a stated percentage. "color-mix(in srgb, var(--auth-primary) 12%, var(--auth-surface))" means "12% of the primary, 88% white" - a tint that re-computes itself the moment --auth-primary changes. Nothing is hard-coded downstream, which is why one edit is enough. There are deliberately no fallback values. A fallback would be a second, stale copy of each colour that silently ignored your edit on older browsers - exactly the problem this file exists to remove. color-mix() needs Chrome 111, Edge 111, Firefox 113 or Safari 16.2 (all 2023 or earlier). One thing to check if you change --auth-accent ---------------------------------------------- Gold and yellow sit in a narrow luminance band, so they need to be darkened a long way before they are readable as text. --auth-accent-display is darkened for exactly that reason and clears the 4.5:1 contrast minimum for the gold used here. If you swap the accent for something much lighter or much darker, check the headings still contrast against --auth-canvas; the mix percentage is a good default, not a guarantee for every possible input. ==============================================================================*/ :root { /*======================================================================== THE PALETTE - edit these, and only these ==========================================================================*/ /* Actions. Buttons, links, anything the user is meant to act on. */ --auth-primary: #a8394a; /* Warmth. The logo mark, feature icons, the focus ring, panel tint. Decorative rather than instructive - see the note above before choosing something much lighter. */ --auth-accent: #d6a12c; /* Body text. Deliberately a warm near-black rather than pure black. */ --auth-ink: #2e2327; /* The page behind everything. */ --auth-canvas: #fdfaf4; /* Cards, inputs, and the white end of every tint. */ --auth-surface: #ffffff; /* Text sitting on top of --auth-primary (the submit button). */ --auth-on-primary: #ffffff; /* Validation errors only. Never used for anything a user did right. A deep red, not the orange #c2410c this used to be. Orange is a third hue: the product is the rose and the gold, and an error rendered in orange read as a fourth brand colour on screens that already carried both. This is darker than --auth-primary on purpose, so an error still outranks a warning when the two appear together. */ --auth-danger: #9b2533; /* What every colour is darkened *towards*. A deep warm brown rather than black, so hovers and shadows stay in the same family as the palette instead of going grey. */ --auth-shade: #2a1016; /*======================================================================== DERIVED - nothing below is edited by hand ==========================================================================*/ /*-------------------------------------------------------------- primary */ /* Button hover: the same colour, pressed a little deeper. */ --auth-primary-strong: color-mix(in srgb, var(--auth-primary) 82%, var(--auth-shade)); /* Tint for filled areas that must not compete with the button. */ --auth-primary-soft: color-mix(in srgb, var(--auth-primary) 11%, var(--auth-surface)); /* The primary as a shadow, at the two depths the pages use. */ --auth-primary-shadow: color-mix(in srgb, var(--auth-primary) 18%, transparent); --auth-primary-shadow-lift: color-mix(in srgb, var(--auth-primary) 26%, transparent); /* An icon or glyph sitting on an accent-coloured chip. */ --auth-primary-deep: color-mix(in srgb, var(--auth-primary) 74%, var(--auth-shade)); /*--------------------------------------------------------------- accent */ /* Accent dark enough to read at small sizes (labels, note headings). Darker than it looks like it needs to be: the note label is 10px uppercase, which needs the full 4.5:1. */ --auth-accent-ink: color-mix(in srgb, var(--auth-accent) 60%, var(--auth-shade)); /* Accent dark enough to read as a heading. The lightest step that clears 4.5:1 on both --auth-canvas and the panel. */ --auth-accent-display: color-mix(in srgb, var(--auth-accent) 58%, var(--auth-shade)); /* Tints and washes. */ --auth-accent-soft: color-mix(in srgb, var(--auth-accent) 13%, var(--auth-surface)); --auth-accent-line: color-mix(in srgb, var(--auth-accent) 42%, var(--auth-surface)); --auth-accent-shadow: color-mix(in srgb, var(--auth-accent) 28%, transparent); /* The focus ring, and the faint decorative ring on the brand panel. */ --auth-ring: color-mix(in srgb, var(--auth-accent) 22%, transparent); --auth-ring-faint: color-mix(in srgb, var(--auth-accent) 22%, transparent); --auth-ring-fainter: color-mix(in srgb, var(--auth-accent) 6%, transparent); /*------------------------------------------------------------------ ink */ /* Secondary text - supporting prose, footers, hints. Still has to be read, so it stays above 4.5:1. */ --auth-ink-soft: color-mix(in srgb, var(--auth-ink) 68%, var(--auth-canvas)); /* Placeholders only. Deliberately below the text contrast minimum: a placeholder that reads as strongly as a real value makes an empty field look filled in. Never use this for text the user has to read - that is what --auth-ink-soft is for. */ --auth-ink-faint: color-mix(in srgb, var(--auth-ink) 42%, var(--auth-canvas)); /*-------------------------------------------------------------- surfaces */ /* Hairlines. Warm, because they are mostly accent over white. */ --auth-line: color-mix(in srgb, var(--auth-accent) 24%, var(--auth-surface)); --auth-line-soft: color-mix(in srgb, var(--auth-accent) 13%, var(--auth-surface)); /* Border of an input the pointer is over but has not focused. */ --auth-line-hover: color-mix(in srgb, var(--auth-accent) 34%, var(--auth-surface)); /* Cards on the brand panel: white, let through at partial strength so the gradient behind still reads. */ --auth-card: color-mix(in srgb, var(--auth-surface) 72%, transparent); --auth-card-quiet: color-mix(in srgb, var(--auth-surface) 66%, transparent); /*----------------------------------------------------------- brand panel */ /* Near-white, warming through the accent, finishing on a whisper of the primary - the one place the two colours are allowed to touch. Held as a whole gradient so the pages never restate the stops. */ --auth-panel: linear-gradient( 158deg, color-mix(in srgb, var(--auth-accent) 3%, var(--auth-surface)) 0%, color-mix(in srgb, var(--auth-accent) 18%, var(--auth-surface)) 58%, color-mix(in srgb, var(--auth-primary) 9%, var(--auth-surface)) 100% ); /*---------------------------------------------------------------- danger */ --auth-danger-line: color-mix(in srgb, var(--auth-danger) 55%, var(--auth-surface)); --auth-danger-ring: color-mix(in srgb, var(--auth-danger) 12%, transparent); /*--------------------------------------------------------------- on-dark */ /* The spinner sitting on the primary button. */ --auth-on-primary-faint: color-mix(in srgb, var(--auth-on-primary) 38%, transparent); }