/* ========================================================================== DataSouq — design tokens Built the way the Supabase design system builds them: each theme sets a handful of scalars, and every colour is DERIVED from those in OKLCH. Nothing below the knobs is hand-picked. TWO APPS SHIP THIS SYSTEM AND THEY DISAGREE. apps/design-system is Studio — dense panels inside an application. apps/www is supabase.com — a landing page. Where they differ, this page follows apps/www, because that is what it is. That fork has been taken for the type scale (--text-sm 14px, not Studio's 13), the container ladder, the hero band, the section rhythm, card padding, the card title weight, the section header's internal gaps and the whole footer. apps/www does not import typography.css, so where an element role is in question apps/www wins there too. Traced to: packages/ui/build/css/source/semantic.css derivation chain packages/ui/build/css/source/compat.css the border/foreground aliases packages/ui/build/css/source/global.css card padding tokens packages/ui/build/css/themes/light.css light knobs + brand scale packages/ui/build/css/themes/classic-dark.css dark knobs + brand scale packages/config/css/theme.css --radius-panel: 6px, font tokens packages/config/css/utilities.css focus-ring, focus-inset packages/config/typography.css element type roles packages/ui/src/components/Button/Button.tsx variants packages/ui/src/lib/constants.ts size scale packages/ui/src/components/shadcn/ui/card.tsx Card and its sections packages/ui-patterns/src/PageSection|PageHeader|PageContainer packages/ui-patterns/src/MetricCard the metric row's pairing packages/ui-patterns/src/EmptyStatePresentational the panel packages/ui-patterns/src/SkipToContent the skip link's contract apps/design-system/styles/globals.css the Inter-tuned scale apps/design-system/content/docs/accessibility.mdx focus, tabindex, sr-only apps/design-system/content/docs/icons.mdx Lucide, tints, custom SVGs apps/www/styles/globals.css supabase.com's own scale apps/www/components/Nav, Footer, UI/SectionHeader apps/www/app/(home)/_components/Hero, OpenSourceSection apps/www/app/(home)/_components the product-card row, measured live: grid-cols-12 gap-3, col-span-6 xl:col-span-3, sm:h-[400px], rounded-xl, a p-px gradient border, 24px/16px padding, an items-center gap-2 title row with an 18px icon, Manrope 600 16/24, and a 14/20 body whose strong lifts the colour only supabase.com/features the feature-card family, measured live across all 81 cards: a p-px gradient border, an inner rounded-[11px] flex column at gap-2 p-2, then a tinted aspect-square panel 80px tall (140px from md) holding a 20px Lucide mark, and BELOW it a flex-col gap-1.5 text column with the heading at text-sm md:text-base leading-5. Not one of the 81 puts its icon on the title's line. apps/www/app/(products)/…/_components bordered card precedents Every deviation, and why. Nothing deviates without a reason that changes the outcome — and nothing here is left asserted only at the rule it governs: 1. IBM Plex Sans Arabic is appended to both font stacks, and :root[lang="ar"] drops --font-weight-normal to 400. Inter ships a real 450; Plex Arabic ships whole hundreds, and CSS font matching resolves 450 upward onto the 500 face — measured, 450 and 500 set the same string at 498.00px against 400's 485.81px. Left at 450 the Arabic ran a full step heavier than the English beside it and `strong`, being font-medium at 500, became the same face as its own paragraph. 2. CardTitle is `text-xs font-mono uppercase` upstream, and CardHeader / CardContent / CardFooter split with an internal border. Both are dense Studio idioms: uppercase carries no meaning in Arabic, Plex Arabic has no mono companion, and the three small cards hold a title and two lines, so there is nothing to divide. The dataset card does divide, once, above its metric row. 3. The section eyebrow keeps 14px sentence-case sans in --brand-text where every apps/www definition of it — SectionHeader's subtitle, the `.label` utility, typography.css's heading-meta — is 12px mono uppercase tracking-wider in --foreground-lighter. Three of those five properties cannot come along: uppercase means nothing in Arabic, there is no Arabic mono, and positive tracking breaks Arabic joins. The size and the colour are what compensate for their loss; without them nothing would mark the line as a label. Reasoned in full at .head__label. 4. Every body paragraph keeps --muted-foreground where upstream uses --foreground-lighter. On --card that token measures 4.27:1 in dark and fails AA outright. On --background it measures 5.42:1 light and 4.59:1 dark — passing, but by 0.09 at 16px/450, about 2% of headroom, on a colour that moves with any knob edit. --muted-foreground is 9.29:1 and 8.22:1. Two surfaces, one answer, for two different reasons. 5. The brand icon plate (.card__icon) has no upstream source AS A BRAND FILL. A plate as such is not unprecedented, and this said so too absolutely until the verification pass caught it: ui-patterns' GlassPanel takes an optional `showIconBg`, and its IconBackground is `bg-surface-75 border w-8 h-8 flex items-center justify-center rounded-sm` around an `img className="w-5"` — read from source, a NEUTRAL surface chip, 20px of mark in a 32px box at the default border. None of that geometry is imported here and the fill is the part that is ours: brand-default at 10% behind a --brand-500 stroke and a brand-tinted glyph, where upstream's is a surface tint behind a logo. Every other upstream icon in a card sits bare, tinted with a text class, which is what icons.mdx prescribes and all it prescribes. The plate is a landing-page accent, kept deliberately, and measured safe on the surface it actually paints: brand-default at 10% over --card gives 4.87:1 against --brand-600 in light and 8.83:1 in dark, both clear of 1.4.11's 3:1. The empty-state panel does NOT use it, because a plate is a Card affordance and that panel is not a card. 6. The hero is centred, single-column, with full-width buttons below 640px and a rule under the band. supabase.com's hero is start-aligned, splits into two columns at lg, stretches nothing and carries no border. Centring is language-neutral, so the band needs no RTL work at all; an asymmetric two-column hero needs more copy than one dataset justifies; and on a page with three sections one rule closes the band that the padding alone would leave open. Its padding IS theirs: 48/32 below md, 160/64 from it. 7. The header bar and the WHOLE footer stay put in Arabic. Asked for directly: a control that relocates itself, along with the wordmark, reads as the page jumping. Both language and theme now sit in the footer bar, which was pinned for the same reason and measures identically in both languages — the group at 1008-1169 at 1280 either way — so the rule followed them rather than being restated. The header bar keeps the wordmark and nothing else. The skip link keeps its physical `left` because it still sits inside that bar's footprint. The page body between them mirrors as usual. This said "footer" from the start and only ever covered its bottom bar. .nav__inner and .footer__bar carried direction: ltr; .footer__grid did not, so in Arabic the brand block crossed 778px to the right (left 96 to 874 at 1280), the link block came back the other way (407 to 96) and the two columns swapped (439/563 to 718/593), all above a copyright strip that had not moved. The grid is pinned now, and measured in both languages at 375, 768 and 1280 every box in the footer sits at the same x: wordmark 24/24/96, channel row and form 24-298/24-298/96-370, columns @24/@24+@385/@439+@563, the copyright at 24/24/96 and GitHub at 329/707/1147. The footer is also translated now, which is the other half of the same request, and pinning the layout is not the same as typesetting the text LTR: every text-bearing block inside it turns RTL in Arabic so punctuation lands on the correct side, inside a box that has not moved. The wordmark, the channel row and the copyright's Latin head do not turn — a name, a lockup, and a mixed run whose Arabic clause is isolated so the © and the year stay at the left. Nor does the form: it is a column flex at align-items: flex-start, and flex-start is direction-relative, so turning the form put the Subscribe button at the right edge (96-176 in English against 320-370 in Arabic). Its two text children turn instead — both 274px wide, so they fill the block and nothing moves when they do. The button also holds its width, 80px in both languages, against an intrinsic 79.63 for "Subscribe" and 46.88 for "اشترك"; the longer label sets the box and the shorter centres in it. Measured: 24-104 at 375 and 768, 96-176 at 1280, in both. 8. The metric row compresses MetricCard: 14px figure inline with its label, where upstream is an 18px tabular figure above a smaller one. Five metrics in one card is not a shape upstream has — it lays one metric per Card — so the row is ours, built from MetricCard's parts. tabular-nums, items-start and the --muted-foreground icon tint are all its. 9. The empty-state panel keeps a 16px title and a --card background where EmptyStatePresentational has neither an explicit title size nor a fill. Everything else about it is the fragment: dashed border, no shadow, px-4 py-10, a bare 24px icon at stroke 1.5, a 14px description at 640px, 12px down the stack. 10. The dataset card is their product card on a wider span. Theirs is col-span-3 at xl — 259.25px, four across; ours is span 4 at 1024 — 354.66px at the capped container, three across — because theirs holds a title, two lines and an illustration while this one holds a paragraph, five metrics and an action. h-[400px] becomes a min-height for the same reason it always does here: the Arabic body sets longer than the English and a fixed height would clip it. The 12px radius and 24/16 padding are NOT taken; every card on this page keeps the family's 8px and 24px, because the dataset card and the three service cards sit one section apart in the same scroll and a different corner would read as a mistake. The title weight is the one place the difference says something — 600 against .card h3's 500, the object against the work — so that is taken. 11. The icon-beside-title row is on ALL FOUR cards, and upstream would put it on one. Their product cards use it; their feature cards — the family the three service cards belong to — do not, on two independent readings. Measured across all 81 cards on supabase.com/features: every one centres a 20px mark in a tinted panel ABOVE the heading, none shares the heading's line. And read from source, the closest analogue there is to these three — a bordered card at p-6 holding an icon, a title and one line — is Highlights.tsx under apps/www/app/(products)/edge-functions/_components: `flex flex-col gap-3`, then a BARE 20px mark in --foreground-lighter, then `h3 text-base font-medium`, then a text-sm paragraph. It stacks. It also settles two things this file already had right: the title at font-medium, which is .card h3's 500, and the plate as ours alone — upstream's mark there has no plate at all (deviation 5). Asked for directly, and the reason holds: this page is one scroll with four cards in two sections, where upstream's two families live on different pages and never appear together. What the service cards had before was neither idiom anyway — a 32px plate stacked above a title, which upstream has nowhere — so this moves them ONTO an upstream shape rather than away from one. Two things fall out of sharing the row. The plate is 24px with an 18px mark for every card, and the 18px is the painted hairline, not a box rule: stroke-width 2 over a 24-unit viewBox at 18px paints 1.5px, which is the figure the stroke note below pins everything else to. It is NOT icons.mdx's 18-in-24 — that rule governs custom SVGs, as this header says two paragraphs down, and all four plate marks are Lucide drawings. The 32px plate was sized to be stacked, and beside a 24px line it overhung by 4px each side. And .card became the flex column their content column is — `flex flex-col gap-2 sm:gap-4`, so 8px here and 16px on the dataset card — which let `.card h3`'s margin go: inside a title row that margin belongs to the title's box, not under it. Highlights.tsx sets its card gap to 12px, and that is not taken: 8px and 16px are one component's `gap-2` and `sm:gap-4`, and importing 12px from a third component would break a pairing that comes from one. align-items is flex-start, not their center. Their product-card titles are single words that never wrap; one of ours does. Measured at 768px, each service card is 227px with a 177px text box, the plate and gap take 32px, and "Cleaning & structuring" needs 168.88px of the 145px left — so it runs to two lines below 250.88px of card width, which in this pane is a viewport of 839px against 840px. items-center would centre the plate against that 48px box and drop it 12px below the line it labels. flex-start pins it to the first line, and since the plate is 24px and the line-height is 24px the two are concentric either way for a single-line title — measured, plate centre 12 and line centre 12 in both languages at every width. 12. Arabic sets Arabic-Indic digits, with the Arabic punctuation that goes with them: U+066C for thousands, U+066B for the decimal, U+066A for percent. So ١٧٬٣٠٤ and ٩٩٫٥٪ where English has 17,304 and 99.5%. Asked for directly. Worth knowing that Saudi Arabia, which is the market this dataset covers, uses Western digits far more widely than Egypt does; if that turns out to matter, the change is transcribing five values and two labels in the Arabic block back, not a setting. All five glyphs are real in IBM Plex Sans Arabic, not fallbacks: measured at 12px, ٠ sets 3.38px, ٩ 6.10, ٪ 6.79, ٫ 3.26 and ٬ 3.38, each against the 6.31/3.83 the same characters get from the font stack with Plex removed. Different advances mean Plex is drawing them. The digits are written into the Arabic dictionary as literals rather than converted at render time, because that is what they are. The one number the page computes is the year, and that goes through a per- language digits() so the two dictionaries have the same shape and the caller never branches. Machine-readable numbers — the JSON-LD figures, the aria-labels — stay Western on purpose. Not a deviation, though it may look like one: WhatsApp green is simply absent, and the brand token is the compliant choice for the CTA. The Lucide icons vary from 75% to 83% of their box in whichever dimension leads — that is Lucide's own optical grid, and icons.mdx's 18-in-24 rule governs custom SVGs, not Lucide's drawings. Only the footer's channel marks are normalised to their box, because those come from six different designers and share no optical system. Nor is the stroke width, though the attributes disagree: Lucide's own 2 sits on the smaller icons and 1.5 on the panel's. What upstream fixes is the PAINTED hairline — 1.5 user units at a 24px box, so 1.5 device px — and a stroke scales with its box. Measured: 2 at 18px paints 1.5px on the card plates, 1.5 at 24px paints 1.5px on the panel, and the small ones come in under — 1.333px at the metric row's 16px and 1.167px at the 14px of the language and theme controls, which .ctl svg states outright. This is what pins the plate's mark at 18px: it briefly went to 14px, which painted 1.167px — thinner than anything else on the page, including the metric icons it sits above. Setting every attribute to 1.5 for the look of consistency would paint 1.125px and 1.0px instead — thinner than upstream everywhere but the panel, and less uniform than what is here. Unused but kept: --secondary and --elevation-3 complete the elevation ladder whose other two rungs are painted; --border-stronger completes the border ladder; --text-3xl, --lh-lg, --lh-2xl and --lh-3xl complete contiguous type steps. Machinery that produced a colour nothing painted has been deleted, not kept — the --accent chain went that way. Spacing follows Tailwind's 4px base, which neither globals.css overrides. Section rhythm and the container ladder come from apps/www's SectionContainer; the section-header-to-content gap is PageSection's gap-6, the gaps inside the header are SectionHeader's space-y-4 and mt-4, and action-group gaps are Button's space-x-2. Button sizes in use are tiny (the footer's Subscribe, the theme control and each language option) and medium (everything else); small has no user left since the controls stepped down to match their header's own right-hand group. ========================================================================== */ /* -------------------------------------------------------------------------- Shared scalars and derived colours — formulas verbatim from semantic.css. Declared FIRST so a theme can override any knob, and so a theme that omits --elevation-step inherits the derived default, exactly as classic-dark does. -------------------------------------------------------------------------- */ :root { --contrast: 0.5; --contrast-delta: calc((var(--contrast) - 0.5) / 0.5); --contrast-up: max(0, var(--contrast-delta)); --contrast-down: max(0, calc(var(--contrast-delta) * -1)); --contrast-text-floor: 0.9; --contrast-border-floor: 0.05; --contrast-text: calc(1 - (1 - var(--contrast-text-floor)) * var(--contrast-down)); --contrast-border-linear: calc( var(--contrast-border-floor) + (1 - var(--contrast-border-floor)) * var(--contrast) ); --contrast-border: calc(var(--contrast-border-linear) * var(--contrast-border-linear)); --elevation-1: 1; --elevation-2: 1.5; --elevation-3: 2; /* Signed span surface -> foreground: negative in light, positive in dark */ --tone-span: calc(var(--foreground-lightness) - var(--surface)); /* Default step. A theme may override it; classic-dark does not. */ --elevation-step: calc(var(--tone-span) * 0.04); --surface-hue: var(--hue); --foreground-chroma: calc(var(--chroma) * 0.55); /* --- Derived colours (no relative colour syntax needed) --------------- */ --background: oklch(var(--surface) calc(var(--chroma) * 0.5) var(--surface-hue)); --foreground: oklch( calc(var(--surface) + var(--tone-span) * var(--contrast-text)) var(--foreground-chroma) var(--surface-hue) ); --muted-foreground-mix: calc( var(--muted-foreground-level) + (1 - var(--muted-foreground-level)) * var(--contrast-up) - var(--muted-foreground-level) * 0.5 * var(--contrast-down) ); --muted-foreground: oklch( calc(var(--surface) + var(--tone-span) * var(--muted-foreground-mix)) var(--foreground-chroma) var(--surface-hue) ); --tertiary-foreground-mix: calc( var(--tertiary-foreground-level) + (1 - var(--tertiary-foreground-level)) * var(--contrast-up) - var(--tertiary-foreground-level) * 0.5 * var(--contrast-down) ); --tertiary-foreground: oklch( calc(var(--surface) + var(--tone-span) * var(--tertiary-foreground-mix)) var(--foreground-chroma) var(--surface-hue) ); /* --brand-link is tuned for brand text on the page background (4.75:1 on --card in light). On a --brand-plate fill it drops to 4.14:1, under the AA floor for normal text, so text sitting on a plate uses the next step down the same upstream scale: --brand-600 measures 4.57:1 there. */ --brand-on-plate: var(--brand-600); /* The focus ring. Upstream builds it as the accent at 55%: --ring: oklch(from var(--primary) l c h / 55%) --primary is mode-invariant at L 0.76, so in the dark theme that lands on 3.52:1 against the background — over the 3:1 that WCAG 1.4.11 asks of a focus indicator. In the light theme the same colour composites to a pale mint on a near-white page and measures 1.47:1. Not dim: invisible. And light is this page's default, so that is what most people would get. Every other brand step was measured against the light background too: --primary opaque 1.99, --brand-default 1.97, --brand-500 2.60. Only --brand-600 and --brand-link clear the bar, and --brand-600 clears it in both themes with room — 5.16:1 light, 11.36:1 dark — because that step of the scale flips light-on-dark with the theme. It stays one shared colour that no variant changes, which is the rule accessibility.mdx actually sets. Being a plain hsl() it also needs no relative colour syntax, so the ring leaves the @supports blocks entirely. */ --ring: var(--brand-600); /* --- Radius ----------------------------------------------------------- */ /* --radius-panel is 6px (theme.css) and buttons are rounded-md. Cards use rounded-lg; global.css sets --borderradius-lg: 8px. */ --radius: 6px; --radius-lg: 8px; /* Card is `py-4 px-(--card-padding-x)`. Both of these are HORIZONTAL tokens in global.css — --card-padding-x is --padding-x-sm (px-4) and --card-padding-x-md is --padding-x-md (px-6). The vertical padding is py-4 in every card, roomy or not. */ --card-padding-x: 1rem; --card-padding-x-md: 1.5rem; /* Input backgrounds. semantic.css: `--field: oklch(0 0 0 / var(--field-alpha))`, a soft always-sink through black. 0.015 is the base value; dark.css raises it to 0.12, but this page follows classic-dark, which leaves it alone — so the border carries the field and the wash only softens it. */ --field-alpha: 0.015; --field: oklch(0 0 0 / var(--field-alpha)); /* The Card carries shadow-xs — Tailwind's own value, unchanged upstream. */ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* Tailwind's shadow-lg, for the one thing on the page that floats over the rest: the language menu. A popover needs to separate from what it covers, which shadow-xs — tuned to lift a card a hair off the page — cannot do. */ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* --- Type scale ------------------------------------------------------ Two apps ship this scale and they differ in one place. Both override --text-base upward to 15px and set --font-weight-normal: 450, but apps/design-system also pulls --text-sm down to 13px for Studio density, while apps/www — supabase.com — leaves --text-sm and --text-xs at Tailwind's own 14px and 12px. This is a landing page, so it follows supabase.com. Measured there at 1280px: body and lead 16/24, card copy 14/20, medium buttons 14/20, hero 46/46, section headings 34. ---------------------------------------------------------------------- */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 0.9375rem; /* 15px */ --text-lg: 1rem; /* 16px */ --text-xl: 1.125rem; /* 18px */ --text-2xl: 1.375rem; /* 22px */ --text-3xl: 1.75rem; /* 28px */ --text-4xl: 2.125rem; /* 34px */ --text-5xl: 2.875rem; /* 46px */ /* Line heights pair to each step. This table used to hard-code Tailwind's absolute defaults — 24px against text-base, 40px against text-4xl — on the stated grounds that globals.css overrides the sizes and "leaves Tailwind's paired line-heights untouched". The second half is true and the conclusion did not follow: Tailwind v4 states each pairing as a unitless RATIO, so overriding a size rescales its line-height with it. Six of the nine were wrong by 1.5 to 4px. Measured on supabase.com to settle it, and every ratio came back exact: text-xs 12 / 16 1.3333 text-base 15 / 22.5 1.5 (this table said 24) text-xl 18 / 25.2 1.4 (said 28) text-2xl 22 / 29.333 1.3333 (said 32) text-4xl 34 / 37.778 1.1111 (said 40) So the ratios are written out here instead of their products, which also means a size change can no longer leave its line-height behind. */ --lh-xs: calc(var(--text-xs) * 1 / 0.75); /* 16px */ --lh-sm: calc(var(--text-sm) * 1.25 / 0.875); /* 20px */ --lh-base: calc(var(--text-base) * 1.5); /* 22.5px */ --lh-lg: calc(var(--text-lg) * 1.75 / 1.125); /* 24.89px */ --lh-xl: calc(var(--text-xl) * 1.75 / 1.25); /* 25.2px */ --lh-2xl: calc(var(--text-2xl) * 2 / 1.5); /* 29.33px */ --lh-3xl: calc(var(--text-3xl) * 2.25 / 1.875); /* 33.6px */ --lh-4xl: calc(var(--text-4xl) * 2.5 / 2.25); /* 37.78px */ --lh-5xl: 1; /* leading-none */ /* globals.css sets font-normal to 450 for prose, 400 inside mono/code */ --font-weight-normal: 450; /* Button heights run tiny 26 / small 34 / medium 38 / large 42 / xlarge 50. Every button here is medium, which is the size supabase.com gives its own hero calls to action; .ctl is small and carries its 34px inline. */ --btn-h-medium: 38px; /* SIZE.text in constants.ts gives the small and medium sizes `text-base md:text-sm`: text-base below the md breakpoint, text-sm from it up. Mobile-first, so the base value here is text-base and the media query below steps it down. large and xlarge are plain `text-base` at every width. */ --text-responsive-sm: var(--text-base); /* --- Fonts: --font-sans is Inter, --font-heading is Manrope ----------- */ --font: "Inter", "IBM Plex Sans Arabic", "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif; --font-heading: "Manrope", "IBM Plex Sans Arabic", "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif; /* The wordmark only. Kept off --font-sans so the logo never drifts with the body type. */ --font-brand: "Space Grotesk", "Inter", "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif; /* h-16 plus the 1px bottom border, which is what supabase.com's own bar measures. 60px was a number with nothing behind it. */ /* The channel row, described rather than hard-coded, because the subscribe field is sized from it: their field and their icon row come out within 3% of each other, and the row reads as one block only when they agree. Change the count when a channel is added or removed and the field follows. */ --social-icon: 22px; --social-gap: 20px; --social-count: 7; --social-row: calc( var(--social-count) * var(--social-icon) + (var(--social-count) - 1) * var(--social-gap) ); --nav-h: 65px; --container: 1280px; /* Tailwind ease-out, which the Button base class names. cubic-bezier(.4,0,.2,1) is ease-in-out and made every control feel a beat behind the cursor. */ --ease: cubic-bezier(0, 0, 0.2, 1); /* Anything that just says `transition` or `transition-colors` — the footer links and icons do — gets Tailwind's default curve instead, which is not ease-out. Measured on supabase.com's footer: cubic-bezier(0.4, 0, 0.2, 1) over 150ms. Only Button asks for ease-out, and only Button gets it. */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); } /* -------------------------------------------------------------------------- Light theme — knobs from light.css The selector must NOT include a bare `:root`. `:root` matches in every theme, so any knob the dark block does not itself declare would leak out of here — which is how --surface-hue and --elevation-step ended up wrong in dark. Upstream avoids this by scoping light to [data-theme='light'], .light only. `:not([data-theme="dark"])` keeps light as the default when no attribute is set. -------------------------------------------------------------------------- */ :root:not([data-theme="dark"]) { --hue: 159; --surface-hue: 34; --chroma: 0; --surface: 0.995; --elevation-step: 0.024; --contrast: 0.53; --foreground-lightness: 0.1; --muted-foreground-level: 0.65; --tertiary-foreground-level: 0.5; /* Brand scale: per-theme literals upstream, so literal here too. Exact HSL values from light.css. */ --brand-default: hsl(152.9 60% 52.9%); --brand-link: hsl(153.4 86.5% 27.8%); --brand-200: hsl(147.6 72.5% 90%); --brand-400: hsl(151.3 66.9% 66.9%); --brand-500: hsl(155.3 78.4% 40%); --brand-600: hsl(156.5 86.5% 26.1%); /* Button primary, light: bg-brand-400 / hover:bg-brand/80 / border-brand-500/75 */ --brand-fill: var(--brand-400); --brand-fill-hover: color-mix(in srgb, var(--brand-default) 80%, transparent); --brand-fill-border: color-mix(in srgb, var(--brand-500) 75%, transparent); /* hover:border-brand-600 */ --brand-fill-border-hover: var(--brand-600); /* default variant: bg-background in light, dark:bg-card in dark */ --btn-default-bg: var(--background); --brand-plate: var(--brand-200); --brand-text: var(--brand-link); color-scheme: light; } /* -------------------------------------------------------------------------- Dark theme — knobs from classic-dark.css. It sets no --elevation-step and no --contrast, so both fall back to the derived defaults above, exactly as upstream. -------------------------------------------------------------------------- */ [data-theme="dark"] .nav { background: color-mix(in srgb, var(--background) 95%, transparent); } [data-theme="dark"] { --hue: 159; --chroma: 0.014; --surface: 0.205; --foreground-lightness: 0.97; --muted-foreground-level: 0.72; --tertiary-foreground-level: 0.52; /* Exact HSL values from classic-dark.css */ --brand-default: hsl(153.1 60.2% 52.7%); --brand-link: hsl(153.1 60.2% 52.7%); --brand-200: hsl(152.5 75% 6.3%); --brand-400: hsl(153.3 65.2% 13.5%); --brand-500: hsl(153.5 61.8% 21.6%); --brand-600: hsl(153 59.5% 70%); /* Button primary, dark: bg-brand-500 / hover:bg-brand/50 / border-brand/30 */ --brand-fill: var(--brand-500); --brand-fill-hover: color-mix(in srgb, var(--brand-default) 50%, transparent); --brand-fill-border: color-mix(in srgb, var(--brand-default) 30%, transparent); /* dark:hover:border-brand */ --brand-fill-border-hover: var(--brand-default); --btn-default-bg: var(--card); --brand-plate: var(--brand-400); --brand-text: var(--brand-link); color-scheme: dark; } /* -------------------------------------------------------------------------- Derived colours that need relative colour syntax. These sit on a bare `:root`, which the theme selectors outrank: `:root:not( [data-theme="dark"])` scores (0,2,0) against this block's (0,1,0), and `@supports` adds nothing. A literal declared beside the knobs therefore BEAT its derived counterpart — which is exactly what happened: light ran entirely on hand-written literals while dark ran on the formulas, in the same browser. So the fallbacks now live in the mutually exclusive block below instead, and only one of the two can ever apply. -------------------------------------------------------------------------- */ @supports (color: oklch(from white l c h)) { :root { /* Each surface steps its lightness away from --background by --elevation-step * ratio. The step is signed, so "higher = lighter" holds in both themes. */ --card: oklch(from var(--background) calc(l + var(--elevation-step) * var(--elevation-1)) c h); --popover: oklch(from var(--background) calc(l + var(--elevation-step) * var(--elevation-2)) c h); --secondary: oklch(from var(--background) calc(l + var(--elevation-step) * var(--elevation-3)) c h); /* The same ladder again, as an alpha over whatever is behind instead of a lightness step away from --background. semantic.css, verbatim: --surface-overlay-unit: elevation-step / |tone-span| --muted-alpha: unit * --elevation-1 --accent-alpha: unit * --elevation-2 --muted: oklch(from var(--foreground) l c h / var(--muted-alpha)) --accent: oklch(from var(--foreground) l c h / var(--accent-alpha)) This chain had been deleted for producing colours nothing painted. The language toggle paints both: --accent is its checked fill and --muted its hover, which is what toggleVariants asks for. */ --surface-overlay-unit: calc( var(--elevation-step) / max(var(--tone-span), calc(var(--tone-span) * -1)) ); --muted-alpha: calc(var(--surface-overlay-unit) * var(--elevation-1)); --accent-alpha: calc(var(--surface-overlay-unit) * var(--elevation-2)); --muted: oklch(from var(--foreground) l c h / var(--muted-alpha)); --accent: oklch(from var(--foreground) l c h / var(--accent-alpha)); /* The border ladder, verbatim. Every step is the foreground at an alpha ramped by --contrast-border; none of these numbers are ours. --border semantic.css --border-strong compat.css aliases it to --input, so --input's formula --border-stronger compat.css, its own alpha --border-control-hover semantic.css, the control hover stroke --border-muted is `var(--border)` upstream, an identical legacy alias, so it is simply absent here. */ --border: oklch( from var(--foreground) l calc(c * 0.54) h / calc(2% + 20% * var(--contrast-border)) ); --border-strong: oklch( from var(--foreground) l calc(c * 0.5) h / calc(3% + 38% * var(--contrast-border)) ); --border-stronger: oklch( from var(--foreground) l calc(c * 0.5) h / calc(5% + 45% * var(--contrast-border)) ); /* Not an alias of --border-stronger, though it sits next to it: semantic.css gives it its own ramp, and the default Button hovers to this one. */ --border-control-hover: oklch( from var(--foreground) l calc(c * 0.5) h / calc(12% + 58% * var(--contrast-border)) ); } } /* -------------------------------------------------------------------------- The same colours for browsers without relative colour syntax, resolved to sRGB from the formulas above. `not` makes this block and the one above mutually exclusive, so neither can outrank the other. -------------------------------------------------------------------------- */ @supports not (color: oklch(from white l c h)) { :root:not([data-theme="dark"]) { --card: #ffffff; --popover: #ffffff; --secondary: #ffffff; --muted: rgba(3, 3, 3, 0.027); --accent: rgba(3, 3, 3, 0.040); --border: rgba(3, 3, 3, 0.081); --border-strong: rgba(3, 3, 3, 0.146); --border-stronger: rgba(3, 3, 3, 0.188); --border-control-hover: rgba(3, 3, 3, 0.298); } [data-theme="dark"] { --card: #1c1f1d; --popover: #1f2321; --secondary: #232724; --muted: rgba(243, 246, 244, 0.040); --accent: rgba(243, 246, 244, 0.060); --border: rgba(243, 246, 244, 0.075); --border-strong: rgba(243, 246, 244, 0.135); --border-stronger: rgba(243, 246, 244, 0.174); --border-control-hover: rgba(243, 246, 244, 0.280); } } /* -------------------------------------------------------------------------- Arabic runs one weight lighter, and has to. Inter ships a real 450 face, which is why the system asks for it. IBM Plex Sans Arabic ships whole hundreds only, and CSS font matching resolves a desired weight between 400 and 500 upward first — so 450 lands on the 500 face. Measured at 100px: 450 and 500 both set `سجل ومدينة` at 498.00px while 400 sets it at 485.81px. Two things followed from that. Arabic body copy rendered a full step heavier than the English beside it, and `strong`, which is font-medium at 500, became literally the same face as its own paragraph — emphasis with nothing to show for it. 400 is the Regular face, so body copy reads as body copy and strong reads as strong. Latin text inside an Arabic page drops from Inter 450 to Inter 400, a 0.7% difference in set width. That is the whole cost. -------------------------------------------------------------------------- */ :root[lang="ar"] { --font-weight-normal: 400; } /* The md half of `text-base md:text-sm`. Tailwind's md breakpoint is 768px. */ @media (min-width: 768px) { :root { --text-responsive-sm: var(--text-sm); } } /* ========================================================================== Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); } body { font-family: var(--font); background: var(--background); color: var(--foreground); font-size: var(--text-lg); font-weight: var(--font-weight-normal); /* Not --lh-base. supabase.com's body measures 16/24 — ratio 1.5, which is Tailwind preflight's `html { line-height: 1.5 }`, not text-base's pairing. Their unclassed paragraphs, the hero lead among them, all inherit it, so the 16px prose below inherits this rather than naming a token. */ line-height: 1.5; font-synthesis-weight: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.2s var(--ease), color 0.2s var(--ease); } /* globals.css: h1–h6 get font-heading and font-semibold. All of them. */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; } img, svg { display: block; max-width: 100%; } /* Preflight gives `strong` font-weight: bolder, which against a 450 body resolves to 700 — a jump the page has no use for. typography.css would make it font-medium, but apps/www does not import typography.css, and measuring their product card settles it: the in its body computes to 450, the inherited weight, with `[&_strong]:text-foreground!` lifting the colour and nothing else. So the two-tone body is a tone change, not a weight change. .metrics strong keeps its explicit 500 — that pairing is MetricCard's. */ strong { font-weight: inherit; } button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } ul { list-style: none; } /* -------------------------------------------------------------------------- Focus ring. One shared indicator, never variant-coloured, never animated. Upstream's `focus-ring` utility is a box-shadow: outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background An outline draws the same two rings with two differences that both favour it here. It survives forced-colors mode, where box-shadows are dropped and a keyboard user would be left with no focus indicator at all. And its 2px gap shows whatever is actually behind the control, so a button inside a card reads correctly; ring-offset-background paints the page background there. -------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } ::selection { background: var(--brand-plate); color: var(--foreground); } /* The skip link's target takes focus programmatically, so it must not paint the shared ring round the whole page body. This is the one place accessibility.mdx's "never use outline-none without a replacement" does not apply, and the reason is that its own skip-to-content contract asks for it: the landmark is a destination, not a control, and the ring belongs to the link that sent you. */ main:focus, main:focus-visible { outline: none; } /* The design system's own sr-only, for text that only a screen reader needs. Named in accessibility.mdx under Scaffolding. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0; } /* -------------------------------------------------------------------------- Latin-only tracking. Arabic is cursive: negative tracking damages the joins and uppercase means nothing, so both stay scoped to LTR. -------------------------------------------------------------------------- */ /* supabase.com sets no tracking on any heading, including the hero h1. */ /* ========================================================================== Skip link — first focusable element, per accessibility.mdx ========================================================================== */ .skip-link { position: fixed; top: 10px; /* Physical `left`, not inset-inline-start. This sits inside the header bar's footprint at z-index 100, and that bar is pinned — it does not mirror in Arabic (deviation 7). With the logical property the skip link crossed to the right in RTL and landed on top of the two controls it exists to let you skip past. Upstream uses `left-[10px]` for the same reason. */ left: 10px; z-index: 100; padding: 8px 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border-strong); color: var(--foreground); font-size: var(--text-sm); line-height: var(--lh-sm); transform: translateY(-250%); } .skip-link:focus-visible { transform: none; } /* ========================================================================== Layout ========================================================================== */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; } /* px-6 / lg:px-12 / xl:px-24 — measured on supabase.com at 768, 1024 and 1280: 24px, 48px, 96px. The middle step was missing, so everything between 1024 and 1279 sat half as far from the edge as the reference. */ @media (min-width: 1024px) { .container { padding-inline: 48px; } } @media (min-width: 1280px) { .container { padding-inline: 96px; } } /* PageSection is `pt-12 last:pb-12` — 48px on top, nothing underneath except on the last one. That is the Studio fragment, where sections are panels in an app. supabase.com pads its own sections `py-16 sm:py-18 md:py-24`, symmetric, and every one of the four that keeps the base measures 96/96 at desktop. This is the same fork as --text-sm, the container padding, the hero band and the footer: two apps, and a landing page follows the landing page. Measured what it costs before taking it — the page goes from 2,897px to 3,281px, 3.6 viewports to 4.0. There was room for their rhythm. Symmetric padding means no `last-of-type` rule: every section carries its own bottom, so the space between two of them is the sum of both. */ .section { padding-block: 64px; } @media (min-width: 640px) { .section { padding-block: 72px; } } @media (min-width: 768px) { .section { padding-block: 96px; } } /* ========================================================================== Buttons — Button.tsx + constants.ts Base: rounded-md, a border on every variant, font-regular, 200ms ease-out ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--btn-h-medium); padding-inline: 16px; border-radius: var(--radius); border: 1px solid transparent; font-size: var(--text-responsive-sm); font-weight: var(--font-weight-normal); white-space: nowrap; cursor: pointer; transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease); } /* primary: bg-brand-400 dark:bg-brand-500 / text-foreground / brand border */ .btn--primary { background: var(--brand-fill); color: var(--foreground); border-color: var(--brand-fill-border); } .btn--primary:hover { background: var(--brand-fill-hover); border-color: var(--brand-fill-border-hover); } /* default: bg-background dark:bg-card / border-strong / hover:bg-popover */ .btn--default { background: var(--btn-default-bg); color: var(--foreground); border-color: var(--border-strong); } /* size "tiny": h-[26px] text-xs px-2.5. The heights run tiny 26 / small 34 / medium 38 / large 42 / xlarge 50; only these two and medium are used here. */ .btn--tiny { height: 26px; padding-inline: 10px; font-size: var(--text-xs); } .btn--default:hover { background: var(--popover); /* hover:bg-popover */ border-color: var(--border-control-hover); } /* ========================================================================== Nav ========================================================================== */ .nav { position: sticky; top: 0; z-index: 40; height: var(--nav-h); border-bottom: 1px solid var(--border); /* `bg-background/90 dark:bg-background/95`, on a layer behind a transparent