/* * Commerce Studio — Foundation layer. * * Visual language: Apple platform native (iOS / macOS first-party productivity * app), adapted for a desktop web product. * * The single most important rule here: **the brand green is a tint, not a * surface.** It appears on interactive and selected things — primary buttons, * checkmarks, links, switches, status dots — and nowhere else. Large areas are * system neutrals. This is what separates a native-feeling app from an admin * template that happens to be painted green. * * Layer order is declared once here so later files can opt into a layer and * stop fighting over selector specificity. Rules that are NOT wrapped in a * layer keep their normal (highest) precedence — deliberate, so the existing * page stylesheets stay in control until each component is migrated. */ @layer foundation, primitives, layout, product, page; @layer foundation { :root { color-scheme: light; /* ================================================== system neutrals == * Mirrors UIColor.systemGroupedBackground and friends. Grouped content * sits on a light grey field; each group is a white card. That inversion * (grey page, white content) is the core of the Apple grouped look. */ --commerce-canvas: #f4f5f7; /* ============================================================ grain == * A 140px tile of fractal noise at 5% opacity. * * This is the single cheapest fix for "flat and cheap-looking". A pure hex * fill is mathematically perfect and therefore reads as nothing — no * physical surface is uniform. Five percent of monochrome noise gives the * canvas a tooth you cannot consciously see but can definitely feel, and it * kills the banding that large soft gradients produce on 8-bit displays. * * Inline SVG so it costs no request. It tiles, so it never seams. */ --commerce-canvas-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"); /* * Canvas = grain over a gentle top-lit gradient. * * The gradient spans the full document height so it can never seam, and the * range is a handful of luminance steps with a half-percent green cast at * the very top — enough to read as "light comes from above and the room has * a colour", not enough to read as decoration. The sidebar and toolbar are * materials, so they blur this field; a flat canvas gives them nothing to * work with and the frosting has no visible effect at all. An earlier pass used a * tinted radial glow here; it flooded long pages with green and terminated * in a visible horizontal edge. Lesson: on a page of unknown height, the * only safe gradient is a full-height linear one. */ --commerce-canvas-field: var(--commerce-canvas-grain) repeat, linear-gradient(180deg, #f5f9f7 0%, #eef1f6 44%, #e6eaf1 100%); /* * Flat. Deliberately. * * Earlier passes put a tinted gradient here and made the content cards * translucent on top of it. That is backwards: on Apple platforms the * *chrome* is translucent and the *content* is opaque. When every layer is * frosted, nothing reads as being in front of anything — which is exactly * why those passes felt like a web page wearing a blur filter. Depth now * comes from §1 Materials (sidebar, toolbar, sheets only) and §5 Elevation. * * See docs/UI_DESIGN_LANGUAGE_APPLE_20260727.md §1. */ --commerce-canvas-wash: #f4f5f7; --commerce-surface: #ffffff; --commerce-surface-strong: #ffffff; --commerce-surface-muted: rgba(255, 255, 255, 0.62); --commerce-surface-sunken: rgba(120, 128, 145, 0.07); /* Fills are used for selection and inert controls, never for emphasis. */ --commerce-fill: rgba(120, 128, 145, 0.11); --commerce-fill-hover: rgba(120, 128, 145, 0.16); --commerce-fill-strong: rgba(120, 128, 145, 0.2); /* Disabled controls keep their shape but drop below the inert fill so * they never compete with an enabled control beside them. */ --commerce-fill-disabled: rgba(120, 128, 145, 0.08); /* ======================================================== materials == * The only four things allowed to use these: sidebar, toolbar, sheet * scrim, popover. Test: does content scroll underneath it? If no, it is a * surface, not a material. * * `saturate()` is not optional — blur alone makes what shows through look * grey and dirty. That single function is most of what separates an Apple * material from ordinary opacity. */ --commerce-material-thin: rgba(255, 255, 255, 0.42); --commerce-material-thin-blur: saturate(180%) blur(20px); --commerce-material-regular: rgba(255, 255, 255, 0.68); --commerce-material-regular-blur: saturate(180%) blur(30px); --commerce-material-thick: rgba(255, 255, 255, 0.86); --commerce-material-thick-blur: saturate(150%) blur(40px); --commerce-scrim: rgba(12, 16, 24, 0.3); /* Desaturated, not saturated. Blur preserves large areas of flat colour, so * a saturating scrim leaves a grid of product thumbnails as the second * brightest thing in the frame, still competing with the dialog on top of * it. Pulling saturation and a little brightness is what actually sends the * page behind. */ --commerce-scrim-blur: saturate(58%) brightness(0.95) blur(14px); /* ========================================================== labels == * iOS secondaryLabel (#8A8A8E) is only 3.44:1 on white, below WCAG AA for * normal text. These are darkened to clear 4.5:1 while keeping the same * role separation. */ /* Three tiers, not nine. A fourth tier of grey is always someone avoiding * a layout decision. §2.2 */ --commerce-label: #0b0e13; /* 18.6:1 — titles, body, values */ --commerce-label-2: #59616e; /* 6.4:1 — subtitles, help text */ --commerce-label-3: #8c94a2; /* 3.4:1 — units, timestamps */ /* Below tier three on purpose: a disabled control is not content, so it * is not held to body-text contrast. */ --commerce-label-disabled: #a9b0bd; /* Legacy ramp, folded onto the three tiers above. */ --commerce-ink-950: var(--commerce-label); --commerce-ink-900: var(--commerce-label); --commerce-ink-800: #232833; --commerce-ink-700: #39414f; --commerce-ink-650: #4a5261; --commerce-ink-600: var(--commerce-label-2); --commerce-ink-500: var(--commerce-label-2); --commerce-ink-400: var(--commerce-label-3); --commerce-ink-300: #c3c9d3; /* disabled glyphs only */ /* ========================================================= hairlines == * A separator is a hairline, not a border. It never encloses anything. */ --commerce-line: rgba(16, 22, 33, 0.07); --commerce-line-soft: rgba(16, 22, 33, 0.05); --commerce-line-strong: rgba(16, 22, 33, 0.12); /* The bright edge that separates one pane of glass from the next. */ --commerce-hairline-light: rgba(255, 255, 255, 0.76); /* ============================================================= tint == * The product's deep green, kept as the accent colour. 7.39:1 on white. */ --commerce-tint: #176149; /* The same accent on the dark sidebar. #176149 is a *dark* green; on a * near-black-green column it is invisible, so chrome uses this lifted * version instead. 8.9:1 on the sidebar ground. */ --commerce-tint-on-dark: #6fd4a6; --commerce-tint-pressed: #14513e; --commerce-tint-subtle: rgba(23, 97, 73, 0.1); --commerce-tint-fill: rgba(23, 97, 73, 0.16); /* Legacy brand ramp. Still referenced by unmigrated pages; every value * now resolves into the tint family so nothing paints a green slab. */ --commerce-brand-800: var(--commerce-tint-pressed); --commerce-brand-700: var(--commerce-tint-pressed); --commerce-brand-600: var(--commerce-tint); --commerce-brand-500: #2b7659; --commerce-brand-400: #4c9074; --commerce-brand-200: rgba(23, 97, 73, 0.24); --commerce-brand-100: var(--commerce-tint-fill); --commerce-brand-050: var(--commerce-tint-subtle); --commerce-accent-700: #8f5b42; --commerce-accent-600: #a15c00; --commerce-accent-500: #b77958; --commerce-accent-100: rgba(161, 92, 0, 0.12); --commerce-accent: var(--commerce-accent-600); /* ========================================================= semantic == * System colours darkened where needed to clear AA on white. */ /* Status is a dot with a soft halo, never a coloured slab — a slab would * compete with the accent for attention. §2.5 */ --commerce-status-wait: #c4801e; /* Running used to be system blue (#2a6dd0). On a page whose every other * pixel of colour is brand green, that made the progress bar the only blue * object on screen and it read as borrowed from another product. Running is * "the brand is working", so it takes the brand hue, one step brighter than * the tint so it still separates from the done state. */ --commerce-status-run: #1d7a58; --commerce-status-done: #3e8a62; --commerce-status-fail: #c4453a; /* Badge red. Notification counts are the one place iOS is unambiguous about * hue, and it is never the brand colour. */ --commerce-status-badge: #e0483f; --commerce-positive-700: #1c7a4b; --commerce-positive-100: rgba(28, 122, 75, 0.12); --commerce-warning-700: #a15c00; --commerce-warning-100: rgba(161, 92, 0, 0.12); --commerce-danger-700: #c0392b; --commerce-danger-500: #d70015; --commerce-danger-100: rgba(192, 57, 43, 0.1); --commerce-info-700: #0a6ba8; --commerce-info-100: rgba(10, 107, 168, 0.1); --commerce-negative-700: var(--commerce-danger-700); --commerce-negative-500: var(--commerce-danger-500); --commerce-negative-050: rgba(192, 57, 43, 0.06); /* ============================================================= type == * Apple text styles, tuned one step down from iOS because this is a * desktop-density app (macOS uses 13px body where iOS uses 17px). * `-apple-system` resolves to SF Pro / PingFang SC on Apple platforms. */ --commerce-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", system-ui, "Segoe UI", "Microsoft YaHei", Inter, sans-serif; --commerce-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --commerce-text-display: 32px; /* one per screen, never two */ --commerce-text-headline: 26px; /* board headline over an eyebrow */ --commerce-text-page: 22px; /* sheet title, big section heading */ /* The metric step. Without it the scale runs 26 → 15 → 14 → 12 and every * *number* in the product — the thing a console exists to show — lands in * the same 3px band as its own caption. The admin console sets 36px * numerals over 12px labels and that contrast is most of why it reads as * the more expensive screen. */ --commerce-text-metric: 21px; /* 概览类页面的数字。看板的行内数字是 21px；运营后台的 KPI 卡一屏只有 8 个 * 数字、每个都是一句独立的结论，值得再高一档。不要在列表行里用它。 */ --commerce-text-metric-lg: 30px; --commerce-text-section: 13.5px; /* small section heading (需要你处理) */ --commerce-text-card: 14.5px; /* list row title */ --commerce-text-body: 14px; /* body, controls */ --commerce-text-meta: 12.5px; /* subtitles, help text */ --commerce-text-caption: 11.5px; /* units, timestamps, keycaps */ --commerce-text-eyebrow: 11.5px; /* tinted kicker above a headline */ /* Apple's tracking tightens as size grows; these are the practical steps. */ --commerce-tracking-display: -0.035em; --commerce-tracking-title: -0.03em; --commerce-tracking-row: -0.018em; --commerce-tracking-body: -0.01em; --commerce-tracking-numeric: -0.03em; --commerce-leading-tight: 1.15; --commerce-leading-snug: 1.4; --commerce-leading-body: 1.62; /* SF weights: regular / medium / semibold. Bold is reserved for titles. */ /* Fractional steps. SF is a variable face and 450 vs 480 is visible — * that fineness is a large part of what "precise" looks like. §3.1 */ --commerce-weight-regular: 450; --commerce-weight-quiet: 480; --commerce-weight-medium: 545; --commerce-weight-strong: 620; --commerce-weight-heading: 660; --commerce-weight-display: 700; /* ============================================================ space == * 4pt grid. 16px is the standard content margin, matching the readable * inset of a grouped list. */ --commerce-space-1: 4px; --commerce-space-2: 8px; --commerce-space-3: 12px; --commerce-space-4: 16px; --commerce-space-5: 20px; --commerce-space-6: 24px; --commerce-space-8: 32px; --commerce-space-10: 40px; --commerce-space-12: 48px; /* Distance between two grouped sections. Apple's grouped tables use ~35pt; * this is the single value that decides whether a page feels composed or * merely stacked. */ /* The single value that decides whether a page reads as composed or * merely stacked. §6 */ --commerce-section-gap: 30px; /* Standing height of a two-line list row. */ --commerce-row-height: 62px; /* =========================================================== radius == * Apple's curves are modest: controls 6–8, grouped containers 10, * sheets 12–14. Nothing is a capsule unless it is a tag or a status. */ --commerce-radius-xs: 5px; /* keycaps, micro tags */ --commerce-radius-sm: 8px; /* sidebar rows, small controls */ --commerce-radius-md: 11px; /* fields, thumbnails, primary button */ --commerce-radius-lg: 14px; /* content cards, grouped lists */ --commerce-radius-xl: 18px; /* sheets */ --commerce-radius-pill: 999px; /* ======================================================== elevation == * Grouped content is flat. Only genuinely floating chrome casts a shadow. */ --commerce-shadow-sm: 0 1px 2px rgba(16, 22, 33, 0.04), 0 0 0 1px var(--commerce-line); --commerce-shadow-md: 0 12px 32px rgba(16, 22, 33, 0.1), 0 2px 6px rgba(16, 22, 33, 0.05), 0 0 0 1px var(--commerce-line); /* The `inset 0 1px 0` is light arriving from above. Without it a sheet * looks printed onto the page; with it, it looks like a slab with * thickness. Cheapest high-value line in the whole file. §5 */ --commerce-shadow-lg: 0 40px 90px rgba(10, 15, 25, 0.26), 0 8px 24px rgba(10, 15, 25, 0.12), 0 0 0 1px rgba(16, 22, 33, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9); /* ============================================================ focus == * The platform focus ring: tint at 50%, 3px, offset 1px. */ --commerce-focus-color: rgba(23, 97, 73, 0.5); --commerce-focus-ring: 0 0 0 3px rgba(23, 97, 73, 0.25); /* A quieter halo for focus inside already-tinted surfaces (checked cards, * selected rows) where the full ring would double the accent. */ --commerce-focus-ring-soft: 0 0 0 3px rgba(23, 97, 73, 0.14); --commerce-focus-width: 3px; --commerce-focus-offset: 1px; /* =========================================================== motion == * Apple's default curve is a gentle ease-out, not a bounce. */ --commerce-motion-fast: 130ms; --commerce-motion-standard: 220ms; --commerce-motion-sheet: 260ms; /* Apple's deceleration curve. Not a bounce — a bounce reads as a toy. §7 */ --commerce-easing-standard: cubic-bezier(0.32, 0.72, 0, 1); /* ========================================================= stacking == */ --commerce-z-content: 1; --commerce-z-sticky: 20; --commerce-z-drawer: 60; --commerce-z-popover: 80; --commerce-z-modal: 120; --commerce-z-toast: 160; /* ======================================================== app shell == * Sidebar is a macOS source list: narrow, light, translucent. */ --commerce-shell-sidebar-width: 232px; /* Wide enough for a four-character Chinese nav label at the body size. * At 68px the labels ellipsised to "开始…", which is worse than no label. */ --commerce-shell-sidebar-rail: 84px; --commerce-shell-topbar-height: 56px; --commerce-shell-bottom-nav-height: 56px; --commerce-shell-inline: clamp(16px, 2vw, 28px); --commerce-shell-content-max: 1180px; --commerce-shell-visible-top: var(--commerce-shell-topbar-height); --commerce-shell-visible-height: calc(100vh - var(--commerce-shell-topbar-height)); /* Materials, used sparingly and only on floating chrome. */ --commerce-material-thin: rgba(246, 246, 248, 0.72); --commerce-material-blur: saturate(180%) blur(20px); --commerce-touch-target: 44px; } @media (max-width: 760px) { :root { --commerce-shell-inline: 16px; --commerce-shell-visible-top: 0px; --commerce-shell-visible-height: 100vh; /* Touch density: iOS proper, one step up from the desktop scale. */ --commerce-text-body: 17px; --commerce-text-card: 17px; --commerce-text-meta: 14px; --commerce-section-gap: 28px; } } } @media (prefers-reduced-motion: reduce) { :root { --commerce-motion-fast: 0ms; --commerce-motion-standard: 0ms; } }