/* --------------------------------------------------------------------------- Leaf Lohas — 老葉的児子 One stylesheet, no build step, no framework. Token names and values come from design/leaflohas.css and the UI kit, so a future design revision can be read against this file line for line. Deep green is every action, amber is money and scarcity, red is destructive or blocked, and the seal red belongs to the brand mark alone. The palette is complete in both themes. What each surface does with that is a decision, not an accident: the customer app and the back office both pin dark with data-theme="dark" on , which is what Gan asked for; the customer's own copy of a receipt, ticket or order confirmation pins light, because that is the thing they forward, screenshot and print, and a printer will not lay down a black page. Type is the design folder's, with one deliberate departure. Traditional Chinese leads every stack: a Simplified-first face renders 異體字 wrongly and the brand is written 児 on purpose. IBM Plex Mono carries every number, time and reference, because columns that do not line up look broken on a bill. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- 1 — Tokens These are the design folder's names and values (design/leaflohas.css and the UI kit's token table), so a future design revision can be read against this file line for line. Three palette blocks, on purpose and not to be collapsed: :root the light palette prefers-color-scheme + :not([data-theme="light"]) follows the OS [data-theme="dark"] an explicit choice wins The public app and the back office both stamp data-theme="dark"; the customer-facing receipt layout stamps data-theme="light". The three blocks are still all needed: the light one is what the receipt resolves against, and the media query is what a future "follow the system" setting would use without touching a single component rule. Three tokens the reference stylesheet uses but never declares are defined here, because a missing custom property does not fall back — it makes the whole declaration invalid: --on-accent declared only inside the dark media block upstream, so in light and under the manual dark toggle every .btn lost its foreground colour and inherited one instead. The UI kit names this exact bug in its own token table. --line-strong used by the calendar day capacity bar. --ground used by the kit's page background. --------------------------------------------------------------------------- */ :root { --ground: #F6F8F4; --app: #FBFCFA; --card: #FFFFFF; --soft: #F0F4EE; --ink: #17201B; --ink-2: #41504A; /* 4.46:1 against --card before this, which is a fail — and the light theme is the receipt, the ticket and the order confirmation: the documents a customer forwards, screenshots and prints. 5.69:1 now. */ --muted: #5C6A62; /* Edges you can see. ------------------------------------------------------------------------ These measured 1.28:1 (--line on --card) and 1.57:1 (--line-2). An older eye reads the words inside a box perfectly well and cannot find the box. Thirteen boundary pairs were under 3:1 and the worst of them was the × that deletes a line off a bill. Two targets, not one, because the standard has two jobs in mind. Anything that tells you where a *control* is or what state it is in — an input border, a stepper, a checkbox, that × — is WCAG 1.4.11 and owes 3:1; `--line-2` and `--line-strong` clear it against card, app and soft with a little room to spare: 3.22:1 at the worst pairing — against `--soft` — and 3.58:1 against a card. The first pass landed one of the six at 3.01:1, which is a pass that the next colour tweak turns into a fail. A card edge or a row divider is a container, not a control, and 3:1 there turns the interface into a wireframe of hard boxes. `--line` goes to a measured 2.15:1 at its worst pairing — against `--soft` — and 2.4:1 against a card: plainly visible, still a hairline, and with enough room that the next colour adjustment does not land it on the line. */ --line: #9BAD90; --line-2: #768E6F; --line-strong: #768E6F; --accent: #2E6B57; --accent-2: #E2EFE7; --accent-hi: #24563F; /* hover: darker on light, brighter on dark */ --on-accent: #FFFFFF; --celadon: #6BAE87; /* decorative fills only */ /* Money on a printed receipt. 4.01:1 on --amber-2 before, 4.97:1 now. */ --amber: #8A5D18; --amber-2: #F6EEDE; --red: #9B3D33; --red-2: #F8E9E6; /* The seal. Brand mark only — never a button, never a border. */ --seal: #E1272E; --radius: 16px; --radius-sm: 12px; --tabh: 62px; --sh: 0 1px 2px rgba(23,32,27,.06), 0 10px 30px -18px rgba(23,32,27,.35); /* Two faces doing two jobs, in this order on purpose: the Latin face is first so it carries the English and the numerals, and the Chinese falls through to the face behind it. One typeface trying to do both scripts does one of them badly. `LL Round` is 阿里妈妈方圆体, subsetted and self-hosted — see the @font-face block below. `Yuanti SC` and `PingFang SC` sit behind it so an Apple device still looks right while the webfont loads, or if it never does. These asked for Traditional faces — Noto Sans TC, PingFang TC, Microsoft JhengHei — for months after the interface became Simplified, so 简体 text was being drawn with 繁體 shapes on every Mac. */ --sans: "Google Sans Flex", "LL Round", "Yuanti SC", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* The brand, and nothing else. 老葉的児子 is written with 葉 and the variant 児, neither of which exists in the rounded face — so if the name were set in the body face those two characters would drop to a fallback and the shop's own name would render half in one typeface and half in another. */ /* **One face for every word, front of house and back.** Gan circled a heading and a line of body text on the same card and asked for one of them: 「i want standardize all front end backend to be the font in blue」. He was looking at two typefaces doing the same job on one screen — a serif for titles and the rounded sans for everything else — and a shop with two voices reads as two shops. So the title face is now the body face. The token is kept rather than replaced at all eighteen call sites, because that is one line to change if a display face is ever wanted again, and eighteen to hunt down if it is not. What is deliberately *not* folded in is `--mono`. Figures, times, money and references stay monospaced: RM 5.00 and RM 158.00 have to line up under each other in a column, and R-202608-003 has to be readable aloud down a phone. That is a different job, not a different taste. */ --serif: "Google Sans Flex", "LL Round", "Yuanti SC", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* **The shop's name, and nothing else.** 老葉的児子 is written with 葉 and the variant 児, and neither exists in the rounded face. Set in the interface stack, those two characters drop to a system fallback and the name renders three characters in one typeface and two in another — which is worse than any inconsistency Gan was asking me to remove, because it happens inside the name itself. So the old stack survives here, for five characters. Unifying the interface was the request; breaking the shop's own name was not. */ --brand: "Noto Serif SC", "Songti SC", "Source Han Serif SC", Georgia, serif; --mono: "Google Sans Code", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* Latin and Chinese want different amounts of air. CJK glyphs fill their box edge to edge and need loosening; Latin loosened by the same amount starts to fall apart. These are the two values, applied separately. */ --track: .015em; --track-cjk: .04em; --track-head: .05em; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #0C110E; --app: #141A17; --card: #1B231E; --soft: #212B25; --ink: #E7EEE8; --ink-2: #C4D0C7; --muted: #8DA096; /* 2.17:1 at worst for container hairlines, 3.22:1 at worst for anything that marks a control. See the note on the light tokens above. */ --line: #4D6054; --line-2: #667B6F; --line-strong: #667B6F; --accent: #6FC0A0; --accent-2: #1D2E27; --accent-hi: #8FD4B8; --on-accent: #0C110E; --celadon: #3E8A63; --amber: #DCAE5F; --amber-2: #2B2419; --red: #E08A7C; --red-2: #31201D; --seal: #F2585E; --sh: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px -18px rgba(0,0,0,.9); color-scheme: dark; } } :root[data-theme="dark"] { --ground: #0C110E; --app: #141A17; --card: #1B231E; --soft: #212B25; --ink: #E7EEE8; --ink-2: #C4D0C7; --muted: #8DA096; /* Same two targets as the light theme, and measured: 2.17:1 at worst for a container hairline, 3.22:1 at worst for the edge of anything you press. */ --line: #4D6054; --line-2: #667B6F; --line-strong: #667B6F; --accent: #6FC0A0; --accent-2: #1D2E27; --accent-hi: #8FD4B8; --on-accent: #0C110E; --celadon: #3E8A63; --amber: #DCAE5F; --amber-2: #2B2419; --red: #E08A7C; --red-2: #31201D; --seal: #F2585E; --sh: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px -18px rgba(0,0,0,.9); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } /* `hidden` must actually hide. The browser's own rule for it is `display: none`, and *any* author `display` beats a browser default — so `.btn { display: inline-flex }` quietly made `