mirror of
https://github.com/supabase/supabase.git
synced 2026-09-06 18:11:51 +08:00
3a1b1e391d
## What kind of change does this PR introduce? Chore ## What is the current behavior? Design system still uses the old CustomFont family, so documented components no longer match Studio, www, and docs after the Inter / Manrope rollout. ## What is the new behavior? Design system uses the same font stack as the other apps: - Inter for body (`--font-sans`) - Manrope for headings (`--font-heading`) - Source Code Pro for mono Also adopts the Inter-optimised type scale and base weight (`450`) used in Studio. ## Additional context Based on Francesco's unshipped `chore/update-fonts` draft (design-system slice only). Related shipped work: #47306, #47227. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Updated the design system with refreshed typography using Inter and Manrope, with Source Code Pro for code. * Refined theme typography and spacing tokens, including a more complete text scale, updated font weights, and container sizing. * Improved heading styling and ensured `code`/`pre`/`kbd`/`samp` use consistent monospace treatment. * Adjusted default border styling and improved font loading/fallback behavior for more consistent rendering. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
138 lines
3.0 KiB
CSS
138 lines
3.0 KiB
CSS
@import 'config/tailwind.config.css';
|
|
@import './../../../packages/ui/build/css/themes/classic-dark.css';
|
|
@import 'config/typography.css';
|
|
|
|
@source '../app/**/*.{js,ts,jsx,tsx}';
|
|
@source '../components/**/*.{js,ts,jsx,tsx}';
|
|
@source '../registry/**/*.{js,ts,jsx,tsx}';
|
|
@source '../content/**/*.mdx';
|
|
@source './../../../packages/ui/src/**/*.{tsx,ts,js}';
|
|
@source './../../../packages/ui-patterns/src/**/*.{tsx,ts,js}';
|
|
|
|
@theme inline {
|
|
--font-sans:
|
|
var(--font-inter), Inter, Helvetica Neue, Helvetica, ui-sans-serif, system-ui, sans-serif;
|
|
--font-heading: var(--font-manrope, var(--font-sans));
|
|
--font-mono: var(--font-source-code-pro), 'Source Code Pro', ui-monospace, Menlo, monospace;
|
|
}
|
|
|
|
@theme {
|
|
/* added to get max-w-site */
|
|
--container-site: 128rem;
|
|
/* font sizing and weights optimized for Inter */
|
|
--text-sm: 0.8125rem;
|
|
--text-base: 0.9375rem;
|
|
--text-lg: 1rem;
|
|
--text-xl: 1.125rem;
|
|
--text-2xl: 1.375rem;
|
|
--text-3xl: 1.75rem;
|
|
--text-4xl: 2.125rem;
|
|
--text-5xl: 2.875rem;
|
|
--text-6xl: 3.625rem;
|
|
--text-7xl: 4.375rem;
|
|
--text-8xl: 5.875rem;
|
|
--text-9xl: 7.875rem;
|
|
--font-weight-normal: 450;
|
|
}
|
|
|
|
@layer base {
|
|
:root {
|
|
--chart-1: 12 76% 61%;
|
|
--chart-2: 173 58% 39%;
|
|
--chart-3: 197 37% 24%;
|
|
--chart-4: 43 74% 66%;
|
|
--chart-5: 27 87% 67%;
|
|
}
|
|
|
|
.dark {
|
|
--chart-1: 220 70% 50%;
|
|
--chart-2: 160 60% 45%;
|
|
--chart-3: 30 80% 55%;
|
|
--chart-4: 280 65% 60%;
|
|
--chart-5: 340 75% 55%;
|
|
}
|
|
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
html {
|
|
@apply scroll-smooth;
|
|
}
|
|
body {
|
|
@apply bg-default text-foreground font-normal;
|
|
/* font-feature-settings: "rlig" 1, "calt" 1; */
|
|
font-synthesis-weight: none;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
code,
|
|
.code-content,
|
|
pre,
|
|
kbd,
|
|
samp,
|
|
.font-mono {
|
|
--text-xs: 0.75rem;
|
|
--text-sm: 0.875rem;
|
|
--text-base: 1rem;
|
|
--text-lg: 1.125rem;
|
|
--text-xl: 1.25rem;
|
|
--text-2xl: 1.5rem;
|
|
--text-3xl: 1.875rem;
|
|
--text-4xl: 2.25rem;
|
|
--text-5xl: 3rem;
|
|
--text-6xl: 3.75rem;
|
|
--text-7xl: 4.5rem;
|
|
--text-8xl: 6rem;
|
|
--text-9xl: 8rem;
|
|
--font-weight-normal: 400;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.step {
|
|
counter-increment: step;
|
|
}
|
|
|
|
.step:before {
|
|
@apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
|
|
@apply ml-[-50px] mt-[-4px];
|
|
content: counter(step);
|
|
}
|
|
|
|
.chunk-container {
|
|
@apply shadow-none;
|
|
}
|
|
|
|
.chunk-container::after {
|
|
content: '';
|
|
@apply absolute -inset-4 shadow-xl rounded-xl border;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.container {
|
|
@apply px-4;
|
|
}
|
|
}
|
|
|
|
h1:not(.font-mono),
|
|
h2:not(.font-mono),
|
|
h3:not(.font-mono),
|
|
h4:not(.font-mono),
|
|
h5:not(.font-mono),
|
|
h6:not(.font-mono),
|
|
.h1:not(.font-mono),
|
|
.h2:not(.font-mono),
|
|
.h3:not(.font-mono),
|
|
.h4:not(.font-mono),
|
|
.h5:not(.font-mono),
|
|
.h6:not(.font-mono) {
|
|
@apply font-heading font-semibold;
|
|
}
|
|
|
|
.rdg-cell {
|
|
padding-inline: 0.5rem;
|
|
}
|