/* Design tokens: Material 3 role names, painted with the Stock of the Earth * design system (Figma: "Design System Library", Style Guide and Component * Library pages). * * Nothing in here is a component - only the vocabulary components are written * against. Changing the look of the app should mean editing this file and not * app.css. docs/design-system.md is the reader's guide to it. * * Light and dark are declared once each, via light-dark(). The browser picks * using the `color-scheme` in force, which is why the theme switch below only * has to set that one property rather than restate every colour. The * alternative - every token duplicated in a prefers-color-scheme block and * again in a [data-theme] block - is ~60 lines that drift apart. * * light-dark() is Baseline (Chrome 123 / Safari 17.5 / Firefox 120). If it is * ever unsupported the failure is loud, not subtle: colours drop out entirely. * * The role names stayed when the redesign arrived, on purpose. ~340 templates * and every rule in app.css reach for `on-surface-variant` or `outline-variant` * by name, and a role keeps its meaning across a repaint even when its value * moves a long way - `primary` is still "the accent text and focus ring", it is * simply teal now. What the design added that M3 has no role for (the action * button's mint, the section highlights, the hint banner, the tile shadow) got * a name of its own beside them, in the same voice. */ :root { /* No data-theme attribute = follow the operating system. The theme switch in the user menu and the sun/moon button beside the brand set [data-theme] to pin it; see base.html. */ color-scheme: light dark; /* ---- colour roles ------------------------------------------------------ M3 names roles, not colours: `primary` is a role and `on-primary` is whatever text is legible on it. Components must never reach past these to a raw hex, or dark mode breaks one component at a time. The roles that carry meaning - success, warning, error - are in the next block, built from the palette. These are the brand and the surfaces. */ /* The design's "Heading Light Mode" teal and "Label Dark Mode" blue: link text, field and column labels, the focus ring. Not headings in dark mode, which are a quieter grey - that is `heading` below. */ --md-sys-color-primary: light-dark(#00758d, #93ccd6); --md-sys-color-on-primary: light-dark(#ffffff, #00363f); --md-sys-color-primary-container: light-dark(#cdeef4, #0f4651); --md-sys-color-on-primary-container: light-dark(#002a33, #cdeef4); /* Page titles and card titles. Teal on paper, a soft grey at night - the design does not put the teal on the dark panel, where it would shout. */ --md-sys-color-heading: light-dark(#00758d, #dddddd); /* The selected one of a set - the current page in the pager, the chosen theme in the user menu, a count chip. The design's mint, softened, so it is not mistaken for the action button that shares its hue. */ --md-sys-color-secondary: light-dark(#3d6a60, #a9d8cc); --md-sys-color-secondary-container: light-dark(#c8f7ec, #1f3d35); --md-sys-color-on-secondary-container: light-dark(#333333, #ffffff); --md-sys-color-on-error: light-dark(#ffffff, #690005); /* The page panel - the rounded sheet everything sits on, over the sky. */ --md-sys-color-surface: light-dark(#f7f4f0, #17181c); --md-sys-color-on-surface: light-dark(#333333, #ffffff); --md-sys-color-surface-variant: light-dark(#eae6e0, #373737); /* Quiet text: a caption, a hint, a dash in an empty cell. Darker than the mock's #797979, which measures 3.7:1 on the filter panel - under the 4.5:1 this app holds every word to. */ --md-sys-color-on-surface-variant: light-dark(#5f5f5f, #c2c2c2); /* The design has two tile fills, not M3's five-step ramp, so the ramp is filled from them and the field colour: lowest a field - white on paper, the mock's #373737 at night low a tile (.card) - "Tile Background" (base) the secondary tile - the filter panel, the tab track, a card that holds a table - "Tile Background Secondary" high a menu or a popover, which also gets a shadow highest a pressed or hovered fill on any of the above The dark ramp is not monotonic any more: the secondary tile is black, darker than the page. That is the design's choice - a well cut into the panel rather than a step up from it - and it is why components below say which surface they want by role, never by "one step up". */ --md-sys-color-surface-container-lowest: light-dark(#ffffff, #373737); --md-sys-color-surface-container-low: light-dark(#fbfdfc, #2a2a2a); --md-sys-color-surface-container: light-dark(#f0ece7, #000000); --md-sys-color-surface-container-high: light-dark(#fffbf7, #2a2a2a); --md-sys-color-surface-container-highest: light-dark(#e9e4de, #373737); /* `outline` is a control's edge - a neutral button, the pager - and `field-outline` a field's. Darker than the mock's #d6d6d6 / #e4e4e4 (and #575757 / #484848 at night), which measure about 1.3:1: an edge is how a field or a button is told from what it sits on, so it is held to the 3:1 WCAG asks of a control (1.4.11) against every surface it can sit on, and no darker than that. test_tokens.py measures it. `outline-variant` is a divider, not a control's edge: the rule between two rows of a list. */ --md-sys-color-outline: light-dark(#868686, #828282); --md-sys-color-outline-variant: light-dark(#eaeaea, #3f3f3f); --md-sys-color-field-outline: light-dark(#868686, #828282); /* The sidebar's own furniture: the fill behind the current destination and the open group, and the rule between the two groups of links. */ --md-sys-color-nav-highlight: light-dark(#fffbf7, #000000); --md-sys-color-nav-divider: light-dark(#d0cdc9, #4b4b4b); /* The primary action. One mint for both themes, with the same dark ink on it, because the design keeps it identical in both: it is the thing on the page to press, and that does not change at night. */ --md-sys-color-action: #61efd0; --md-sys-color-action-outline: #52d8bb; --md-sys-color-on-action: #333333; /* The pale yellow instruction banner - "Tick orders to print...", "Drag to reorder...". Its own role because it is neither a status nor a surface: it tells you how the thing beside it works. */ --md-sys-color-hint-container: light-dark(#fdffd9, #3d3826); --md-sys-color-hint-outline: light-dark(#e8e8c9, #595340); --md-sys-color-on-hint-container: light-dark(#00758d, #ffffff); /* Text on a section highlight, a status chip or a gradient tile: all of them pastels in both themes, so the same dark ink serves every one. The palette tests hold each of those fills to 4.5:1 against it. */ --md-sys-color-on-highlight: #333333; --md-sys-color-inverse-surface: light-dark(#2b2b2b, #ececec); --md-sys-color-inverse-on-surface: light-dark(#f4f4f4, #2b2b2b); /* Behind a modal. M3's own role, the same in both themes. */ --md-sys-color-scrim: rgb(0 0 0 / 45%); /* White in both themes, on purpose: the backing for things that are only legible on paper - a QR code, a tenant's logo drawn for a white letterhead, the preview of a printed report. */ --md-sys-color-paper: #ffffff; /* Text on any of the three status containers. Neutral rather than tinted to each, so a colour-vision mode that moves a container never has to move its text with it - and dark, in both themes, because the design keeps the chips pastel at night as well. */ --md-sys-color-on-status-container: #333333; /* Whose figures a scripted card on the dashboard shows (#662): a report shipped with the app, or one of the reader's own. Each is a pair, the words in the first on a fill of the second, and neither means good or bad, so they stay off the palette that the status roles are built from. */ --md-sys-color-script: light-dark(#35548f, #adc6ff); --md-sys-color-script-container: light-dark(#dae2ff, #1b3463); --md-sys-color-mine: light-dark(#7a4b00, #ffb95c); --md-sys-color-mine-container: light-dark(#ffddb4, #4a2c00); /* ---- elevation --------------------------------------------------------- The design shadows its tiles, softly: 8px of blur two pixels down, at 5% in light and 20% at night, where a 5% shadow on a near-black panel would not be there at all. This overturns the "tonal, never shadowed" rule this file used to state; what survived of it is that a shadow is only ever this one soft lift, never a stack of depths. Things that float over the page - a dropdown, the search panel, a menu - keep the heavier pair, because there a shadow is what says "on top". */ --md-sys-elevation-1: 0 2px 8px light-dark(rgb(0 0 0 / 5%), rgb(0 0 0 / 20%)); --md-sys-elevation-2: 0 4px 12px rgb(0 0 0 / 20%); --md-sys-elevation-3: 0 8px 24px rgb(0 0 0 / 12%); /* ---- shape ------------------------------------------------------------- Rounded, per the design. The app used to be squared off; the tokens were kept through that so this would be a change of values, and it was. The four the style guide names, then the small steps the component library draws its controls with: panel 12px a utility panel: the filter bar, the tab track, a banner tile 24px a card page 28px the page sheet over the sky banner 45px the photographic "Got ideas?" banner on the dashboard The style guide's swatch for the utility panel says 16px but its variable and every mock using it say 12, so 12 it is. */ --md-sys-shape-corner-none: 0; --md-sys-shape-corner-xs: 4px; /* a list row, a checkbox, a nav sub-item */ --md-sys-shape-corner-sm: 6px; /* a 32px button, a tab, a thumbnail chip */ --md-sys-shape-corner-md: 8px; /* a field, a nav item, the big button */ --md-sys-shape-corner-lg: 12px; /* an image thumbnail */ --md-sys-shape-corner-full: 999px; /* a pill */ --md-sys-shape-corner-panel: 12px; --md-sys-shape-corner-tile: 24px; --md-sys-shape-corner-page: 28px; --md-sys-shape-corner-banner: 45px; /* ---- typography -------------------------------------------------------- Two families, both self-hosted from @fontsource (see STATICFILES_DIRS): Inter everything you read - body, tables, labels, figures. Asap Condensed headings only. The design names Antique Olive Compact/Condensed Bold, which is commercial and not licensed here; Asap Condensed (SIL OFL) is the free face closest to it - a humanist condensed sans with the same tall x-height and round, open bowls, at close to the same width per character. Bold only. The fallbacks are what the page shows for the moment before the fonts arrive (font-display: swap), so they are chosen to be the same shape: a system grotesque for Inter, a narrow sans for the headings. */ --md-sys-typescale-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --md-sys-typescale-display-font: "Asap Condensed", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, sans-serif; /* h1 / h2 / h3 - the design's three heading steps, 32 / 24 / 18. */ --md-sys-typescale-headline-size: 2rem; --md-sys-typescale-headline-weight: 700; --md-sys-typescale-headline-tracking: -0.25px; --md-sys-typescale-headline-small-size: 1.5rem; --md-sys-typescale-title-size: 1.125rem; --md-sys-typescale-title-weight: 700; /* p2 - the body. Inter is drawn loose for UI, and the design pulls it in by a third of a pixel; an em here so it scales with the size. */ --md-sys-typescale-body-size: 0.875rem; --md-sys-typescale-body-line: 1.5; --md-sys-typescale-body-tracking: -0.022em; /* p1 - a figure's caption on a record page, a lead paragraph. */ --md-sys-typescale-body-large-size: 1rem; /* "List Med" - a table row. */ --md-sys-typescale-body-small-size: 0.8125rem; --md-sys-typescale-label-size: 0.875rem; --md-sys-typescale-label-weight: 500; /* A column heading or a field label: 12px semibold in the accent. Not uppercased any more, so the tracking that used to open the capitals out is gone - kept as a token so a rule that still asks for it gets zero. */ --md-sys-typescale-label-small-size: 0.75rem; --md-sys-typescale-label-small-weight: 600; --md-sys-typescale-label-small-tracking: 0; /* A chip's word. */ --md-sys-typescale-caption-size: 0.6875rem; /* "Stat" and "Label" - the big figure on a stat tile and the bold line naming it. */ --md-sys-typescale-stat-size: 2rem; --md-sys-typescale-stat-weight: 700; --md-sys-typescale-stat-label-size: 1rem; /* ---- spacing ----------------------------------------------------------- 4px steps. */ --md-space-1: 0.25rem; --md-space-2: 0.5rem; --md-space-3: 0.75rem; --md-space-4: 1rem; --md-space-5: 1.25rem; --md-space-6: 1.5rem; --md-space-7: 1.75rem; --md-space-8: 2rem; /* ---- state layers ------------------------------------------------------ M3 expresses hover/focus/pressed as a translucent layer of the *content* colour over the container, not as a different background colour. Using color-mix keeps that true in both themes from one declaration. */ --md-sys-state-hover-opacity: 8%; --md-sys-state-focus-opacity: 10%; --md-sys-state-pressed-opacity: 10%; /* ---- motion ------------------------------------------------------------ Three durations and two easings, for the same reason the colours are roles: a component asking for "240ms" has an opinion about the whole app that it should not have. The emphasised curve overshoots slightly at the start and settles slowly - it is for things entering and leaving the screen, like the mobile nav drawer. Standard is for everything else. Deliberately not used by the reduced-motion block: that overrides durations directly, because a token set to zero would also silence the loading spinner, which is feedback rather than decoration. */ --md-sys-motion-duration-short: 120ms; --md-sys-motion-duration-medium: 240ms; --md-sys-motion-duration-long: 420ms; --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1); /* ---- imagery ----------------------------------------------------------- Exported from the design and self-hosted (static/stockOfTheEarth/img). AVIF first, WebP for a browser without it - image-set() takes the first type it can decode. The sky is 10 KB and the night 66 KB, and a reader only ever downloads one of them. */ --app-backdrop-light: image-set( url("../img/bg-sky.44787e326328.avif") type("image/avif"), url("../img/bg-sky.04a3e45b4dd4.webp") type("image/webp") ); --app-backdrop-dark: image-set( url("../img/bg-night.d996126df454.avif") type("image/avif"), url("../img/bg-night.8ed41c8e53e4.webp") type("image/webp") ); --app-ideas-photo: image-set( url("../img/ideas-blur.f3c6fee04210.avif") type("image/avif"), url("../img/ideas-blur.8f97f0bd76b6.webp") type("image/webp") ); /* An alpha mask, not a picture: CSS paints it in the gradient's own noise colour, which is what lets a colour-vision mode recolour it. */ --app-noise: url("../img/noise.3791d2658d90.webp"); /* ---- layout ------------------------------------------------------------ The mobile breakpoint is not here: a custom property cannot be used in a media query, so it lives as the one literal width in app.css. */ --sidebar-w: 17.5rem; --sidebar-rail-w: 4.25rem; } /* ---- palette --------------------------------------------------------------- Everything that means something is painted from here, and this is the one layer a colour-vision mode changes. carries the reader's choice (accounts.User.colour_vision), and any element may carry one too - the preview beside the setting shows each mode that way. Three families: --pal- the eight hues: the ok/warning/error roles below, the tones a tenant picks for a status or a label, and chart series. Named by how they look with typical colour vision, which is what a tenant sees when picking one. --pal--container the pastel fill behind an ok / warning / error chip. --pal-section-
the design's section highlights - the tile behind each nav icon, the pill on a dashboard card heading, and (softened) the current sub-page in the nav. Ten pastels that tell the parts of the app apart. --pal-grad--* the two gradient stat tiles, each a top and a bottom stop and the colour of its noise grain. Every value is chosen to stay apart from its neighbours under the vision its mode is for, and every word painted on one is held to 4.5:1, in both themes. stockOfTheEarth/test_tokens.py measures all of it, so edit a value and run it. The section highlights and the gradients are the same in both themes - the design keeps the pastels at night and puts the same dark ink on them - so they are plain values, not light-dark() pairs. */ :root, [data-vision="standard"] { --pal-grey: light-dark(#646b77, #9ca3af); --pal-blue: light-dark(#1950cc, #96b6fe); --pal-teal: light-dark(#1f7183, #5dd4ea); --pal-green: light-dark(#0b7b35, #63d18f); --pal-amber: light-dark(#a05829, #f6b24d); --pal-orange: light-dark(#bc3e0d, #fe9b61); --pal-red: light-dark(#be0d2c, #f69b98); --pal-purple: light-dark(#7c3cc4, #caa5ef); /* The design's Ready / In progress / Cancelled. In progress is a shade yellower than the mock's #fadfb3, which sat 0.062 from Cancelled - too close to tell apart at a glance, the one thing a status chip is for. */ --pal-green-container: #c4fab3; --pal-amber-container: #fde2a6; --pal-red-container: #ffd2d2; --pal-section-dashboard: #d5dfff; --pal-section-sales: #84fbdd; --pal-section-purchasing: #91faa0; --pal-section-inventory: #ffc3b7; --pal-section-customers: #dffca8; --pal-section-suppliers: #9bf2ff; --pal-section-production: #efcfff; --pal-section-ideas: #fff39b; --pal-section-report: #ffc8d0; /* Not in the design: Reports and Data quality, the two pages that look across every part of the app. A marigold - the one hue the nine leave free, warmer and deeper than Ideas' lemon. */ --pal-section-insight: #f5ca49; --pal-grad-finance-from: #3fdfbc; --pal-grad-finance-to: #45dc57; --pal-grad-finance-noise: #14bc5e; --pal-grad-inventory-from: #ffaf9f; --pal-grad-inventory-to: #ffb638; --pal-grad-inventory-noise: #ef8974; } /* Protanopia and deuteranopia - red and green that look alike - which are nearly all colour blindness. One palette serves both: what tells their colours apart is lightness and the blue-yellow axis, and both keep those. The greens lean blue and the reds and ambers spread out by lightness. The section pastels move the least they can: the greens split into a mint, a leaf green and a lime of different lightness, suppliers pales towards ice, and production deepens towards lilac so it no longer melts into the dashboard's periwinkle. The finance gradient turns sky blue, the one hue a red-green reader can always tell from the inventory orange. */ [data-vision="red-green"] { --pal-grey: light-dark(#4c707b, #9ca3af); --pal-blue: light-dark(#3057d6, #96b6fe); --pal-teal: light-dark(#0c5f75, #5bd5e6); --pal-green: light-dark(#16794e, #40d4a6); --pal-amber: light-dark(#a75403, #f8b14e); --pal-orange: light-dark(#934109, #f5905c); --pal-red: light-dark(#892122, #ffa78e); --pal-purple: light-dark(#7e2dae, #b991d9); --pal-green-container: #b8e4f7; --pal-amber-container: #fde08f; --pal-red-container: #f7c4b6; --pal-section-dashboard: #d5def5; --pal-section-sales: #92fecf; --pal-section-purchasing: #98f89a; --pal-section-inventory: #fabfb7; --pal-section-customers: #e8fe73; --pal-section-suppliers: #c5fefe; --pal-section-production: #ddc1fd; --pal-section-ideas: #fff39b; --pal-section-report: #ffc8d0; --pal-section-insight: #e9b53b; --pal-grad-finance-from: #5fd3f2; --pal-grad-finance-to: #48b9ee; --pal-grad-finance-noise: #3fb0e4; --pal-grad-inventory-from: #ffc48f; --pal-grad-inventory-to: #ffb638; --pal-grad-inventory-noise: #ef9a52; } /* Tritanopia - blue and yellow that look alike. Rare, and the opposite problem: red and green stay apart on their own, so it is the blues, teals and yellows that move. The gradients already part along red-green, which this reader keeps, so they are the standard ones. */ [data-vision="blue-yellow"] { --pal-grey: light-dark(#6b6978, #9ca3af); --pal-blue: light-dark(#2343c1, #8dacf4); --pal-teal: light-dark(#1d7281, #5dd4ea); --pal-green: light-dark(#44691c, #8dd59a); --pal-amber: light-dark(#9f582f, #f0c374); --pal-orange: light-dark(#c82708, #f5905c); --pal-red: light-dark(#a92227, #ffa3b1); --pal-purple: light-dark(#7f37c2, #caa5ef); --pal-green-container: #c0fbb4; --pal-amber-container: #fadfb3; --pal-red-container: #ffb9bc; --pal-section-dashboard: #cedffd; --pal-section-sales: #7dfce0; --pal-section-purchasing: #90ef94; --pal-section-inventory: #fec2b4; --pal-section-customers: #defca9; --pal-section-suppliers: #b5f5ff; --pal-section-production: #efcdfe; --pal-section-ideas: #fff39b; --pal-section-report: #ffc8d0; /* Marigold sits on top of Inventory's salmon for this reader; a yellowed olive is the nearest hue that does not. */ --pal-section-insight: #c0da4b; --pal-grad-finance-from: #3fdfbc; --pal-grad-finance-to: #45dc57; --pal-grad-finance-noise: #14bc5e; --pal-grad-inventory-from: #ffaf9f; --pal-grad-inventory-to: #ffb638; --pal-grad-inventory-noise: #ef8974; } /* ---- roles that carry meaning --------------------------------------------- Built from the palette rather than given hexes of their own, so whatever changes the palette changes these with it. Not an M3 set: M3 has error and nothing else, and the status chips have always needed "done" and "needs attention, not broken" beside it. Its own block, and on [data-vision] as well as :root, because a custom property is resolved on the element that declares it: declared once on :root, a page section that sets its own palette would still inherit roles worked out from the page's. */ :root, [data-vision] { --md-sys-color-success: var(--pal-green); --md-sys-color-success-container: var(--pal-green-container); --md-sys-color-on-success-container: var(--md-sys-color-on-status-container); --md-sys-color-warning: var(--pal-amber); --md-sys-color-warning-container: var(--pal-amber-container); --md-sys-color-on-warning-container: var(--md-sys-color-on-status-container); --md-sys-color-error: var(--pal-red); --md-sys-color-error-container: var(--pal-red-container); --md-sys-color-on-error-container: var(--md-sys-color-on-status-container); } /* ---- sections --------------------------------------------------------------- Which part of the app an element belongs to. `.section-` (or , which base.html sets from the nav) points the two working tokens at that section's highlight: --section the highlight itself - a nav icon's tile, a heading pill --section-soft the highlight let down into the surface it sits on - the current sub-page in an open nav group. Half and half with the tile in light; a quarter of it on black at night, which is the design's #1f3d35 for Sales. A component asks for `var(--section)` and never names a section itself, so one card partial serves every page. A nested [data-vision] (the colour-vision preview on Settings) inherits the page's --section already worked out in the page's palette; a swatch in there that must show its own mode names its section with a class, which re-resolves it. Dashboard is the default: it is where every reader lands. */ :root, .section-dashboard, [data-section="dashboard"] { --section: var(--pal-section-dashboard); } .section-sales, [data-section="sales"] { --section: var(--pal-section-sales); } .section-purchasing, [data-section="purchasing"] { --section: var(--pal-section-purchasing); } .section-inventory, [data-section="inventory"] { --section: var(--pal-section-inventory); } .section-customers, [data-section="customers"] { --section: var(--pal-section-customers); } .section-suppliers, [data-section="suppliers"] { --section: var(--pal-section-suppliers); } .section-production, [data-section="production"] { --section: var(--pal-section-production); } .section-ideas, [data-section="ideas"] { --section: var(--pal-section-ideas); } .section-report, [data-section="report"] { --section: var(--pal-section-report); } .section-insight, [data-section="insight"] { --section: var(--pal-section-insight); } /* Derived on every element that can set --section, for the reason the roles block gives: resolved where declared. 55% and 24% are measured off the design's two examples (Sales #bcffee / #1f3d35, Inventory #ffe3de). */ :root, [data-vision], [class^="section-"], [class*=" section-"], [data-section] { --section-soft: light-dark( color-mix(in srgb, var(--section) 55%, var(--md-sys-color-surface-container-low)), color-mix(in srgb, var(--section) 24%, var(--md-sys-color-nav-highlight)) ); --section-soft-ink: light-dark(#333333, #dddddd); } /* The theme switch pins the scheme; "System" removes the attribute entirely and falls back to `color-scheme: light dark` above. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; }