Skip to content

Commit eff9dd9

Browse files
SaxonFSaxonF
committed
themer
1 parent d47fd24 commit eff9dd9

44 files changed

Lines changed: 1735 additions & 881 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/design-system/app/fonts/index.ts‎

Lines changed: 1 addition & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1 @@
1-
import { Source_Code_Pro } from 'next/font/google'
2-
import localFont from 'next/font/local'
3-
4-
export const customFont = localFont({
5-
variable: '--font-custom',
6-
display: 'swap',
7-
fallback: ['Circular', 'custom-font', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
8-
src: [
9-
{
10-
path: './CustomFont-Book.woff2',
11-
weight: '400',
12-
style: 'normal',
13-
},
14-
{
15-
path: './CustomFont-BookItalic.woff2',
16-
weight: '400',
17-
style: 'italic',
18-
},
19-
{
20-
path: './CustomFont-Medium.woff2',
21-
weight: '500',
22-
style: 'normal',
23-
},
24-
{
25-
path: './CustomFont-Bold.woff2',
26-
weight: '700',
27-
style: 'normal',
28-
},
29-
{
30-
path: './CustomFont-BoldItalic.woff2',
31-
weight: '700',
32-
style: 'italic',
33-
},
34-
{
35-
path: './CustomFont-Black.woff2',
36-
weight: '800',
37-
style: 'normal',
38-
},
39-
{
40-
path: './CustomFont-BlackItalic.woff2',
41-
weight: '800',
42-
style: 'italic',
43-
},
44-
],
45-
})
46-
47-
export const sourceCodePro = Source_Code_Pro({
48-
subsets: ['latin'],
49-
fallback: ['Source Code Pro', 'Office Code Pro', 'Menlo', 'monospace'],
50-
variable: '--font-source-code-pro',
51-
display: 'swap',
52-
weight: ['400', '500', '600', '700'],
53-
})
1+
export { customFont, fontVariableClassName, rootFontVariablesStyle, sourceCodePro } from 'common/fonts'

‎apps/design-system/app/layout.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
import '@/styles/globals.css'
2-
import '../../studio/styles/typography.scss'
32

43
import type { Metadata, Viewport } from 'next'
54

6-
import { customFont, sourceCodePro } from './fonts'
5+
import { fontVariableClassName, rootFontVariablesStyle } from './fonts'
76
import { ThemeProvider } from './Providers'
87
import { SonnerToaster } from './SonnerToast'
98

10-
const className = `${customFont.variable} ${sourceCodePro.variable}`
11-
129
const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH || '/design-system'
1310

1411
const genFaviconData = (basePath: string): Metadata['icons'] => ({
@@ -121,12 +118,12 @@ interface RootLayoutProps {
121118

122119
export default async function Layout({ children }: RootLayoutProps) {
123120
return (
124-
<html lang="en" suppressHydrationWarning className={className}>
121+
<html lang="en" suppressHydrationWarning className={fontVariableClassName}>
125122
<head>
126123
{/* [Danny]: This has to be an inline style tag here and not a separate component due to next/font */}
127124
<style
128125
dangerouslySetInnerHTML={{
129-
__html: `:root{--font-custom:${customFont.style.fontFamily};--font-source-code-pro:${sourceCodePro.style.fontFamily};}`,
126+
__html: rootFontVariablesStyle,
130127
}}
131128
/>
132129
</head>

‎apps/design-system/components/code-fragment.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,10 +94,10 @@ export function CodeFragment({
9494
)}
9595
>
9696
{showGrid && (
97-
<div className="pointer-events-none absolute h-full w-full bg-[linear-gradient(to_right,hsla(var(--foreground-default)/0.02)_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
97+
<div className="pointer-events-none absolute h-full w-full bg-[linear-gradient(to_right,hsl(var(--foreground-default)/0.02)_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
9898
)}
9999
{showDottedGrid && (
100-
<div className="z-0 pointer-events-none absolute h-full w-full bg-[radial-gradient(hsla(var(--foreground-default)/0.02)_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
100+
<div className="z-0 pointer-events-none absolute h-full w-full bg-[radial-gradient(hsl(var(--foreground-default)/0.02)_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
101101
)}
102102
<div className="z-10 relative">{ComponentPreview}</div>
103103
</div>

‎apps/design-system/components/component-preview.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -99,10 +99,10 @@ export function ComponentPreview({
9999
)}
100100
>
101101
{showGrid && (
102-
<div className="pointer-events-none absolute h-full w-full bg-[linear-gradient(to_right,hsla(var(--foreground-default)/0.02)_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
102+
<div className="pointer-events-none absolute h-full w-full bg-[linear-gradient(to_right,hsl(var(--foreground-default)/0.02)_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
103103
)}
104104
{showDottedGrid && (
105-
<div className="z-0 pointer-events-none absolute h-full w-full bg-[radial-gradient(hsla(var(--foreground-default)/0.02)_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
105+
<div className="z-0 pointer-events-none absolute h-full w-full bg-[radial-gradient(hsl(var(--foreground-default)/0.02)_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
106106
)}
107107
<div className="z-10 relative">{ComponentPreview}</div>
108108
{/* <div className="preview-grid-background"></div> */}
@@ -144,10 +144,10 @@ export function ComponentPreview({
144144
})}
145145
>
146146
{showGrid && (
147-
<div className="pointer-events-none absolute h-full w-full bg-[linear-gradient(to_right,hsla(var(--foreground-default)/0.02)_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
147+
<div className="pointer-events-none absolute h-full w-full bg-[linear-gradient(to_right,hsl(var(--foreground-default)/0.02)_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
148148
)}
149149
{showDottedGrid && (
150-
<div className="z-0 pointer-events-none absolute h-full w-full bg-[radial-gradient(hsla(var(--foreground-default)/0.02)_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
150+
<div className="z-0 pointer-events-none absolute h-full w-full bg-[radial-gradient(hsl(var(--foreground-default)/0.02)_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
151151
)}
152152
<div className="z-10 relative">{ComponentPreview}</div>
153153
</div>

‎apps/design-system/content/docs/components/chart.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -371,7 +371,7 @@ We're wrapping the value in `hsl()` here because we define the colors without co
371371
This is not required. You can use full color values, such as hex, hsl or oklch.
372372

373373
```css
374-
--chart-1: oklch(70% 0.227 154.59);
374+
--chart-1: hsl(155 60% 53%);
375375
```
376376

377377
```tsx

‎apps/design-system/content/docs/typography.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: An overview of all available typography CSS variables.
55

66
Some reusable patterns work better as CSS variables, or “shorthands”, than as components. Typography is one of these cases, since its usage and context vary widely.
77

8-
The shorthands below are composed of core [Tailwind utility classes](../docs/tailwind-classes). You can view the full list of shorthands in [`typography.scss`](https://github.com/supabase/supabase/blob/master/apps/studio/styles/typography.scss).
8+
The shared typography tokens and shorthands live in [`packages/ui/styles/typography.css`](https://github.com/supabase/supabase/blob/master/packages/ui/styles/typography.css), and are included by the shared [`packages/ui/styles/tokens.css`](https://github.com/supabase/supabase/blob/master/packages/ui/styles/tokens.css) entrypoint.
99

1010
## Shorthands
1111

‎apps/design-system/styles/globals.css‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
@import './../../../packages/ui/build/css/source/global.css';
2-
@import './../../../packages/ui/build/css/themes/dark.css';
3-
@import './../../../packages/ui/build/css/themes/classic-dark.css';
4-
@import './../../../packages/ui/build/css/themes/light.css';
1+
@import './../../../packages/ui/styles/tokens.css';
52

63
@tailwind base;
74
@tailwind components;

‎apps/docs/app/layout.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import '../styles/new-docs.scss'
66
import '../styles/prism-okaidia.scss'
77

88
import { TelemetryTagManager } from 'common'
9+
import { fontVariableClassName, rootFontVariablesStyle } from 'common/fonts'
910

1011
import { genFaviconData } from 'common/MetaFavicons/app-router'
1112
import type { Metadata, Viewport } from 'next'
@@ -52,7 +53,14 @@ const viewport: Viewport = {
5253

5354
const RootLayout = ({ children }: { children: React.ReactNode }) => {
5455
return (
55-
<html lang="en" suppressHydrationWarning>
56+
<html lang="en" suppressHydrationWarning className={fontVariableClassName}>
57+
<head>
58+
<style
59+
dangerouslySetInnerHTML={{
60+
__html: rootFontVariablesStyle,
61+
}}
62+
/>
63+
</head>
5664
<body>
5765
<TelemetryTagManager />
5866
<GlobalProviders>

‎apps/docs/styles/main.scss‎

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,7 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
@import './../../../packages/ui/build/css/source/global.css';
6-
@import './../../../packages/ui/build/css/themes/dark-combined.css';
7-
@import './../../../packages/ui/build/css/themes/light.css';
8-
9-
@font-face {
10-
font-family: 'custom-font';
11-
src:
12-
url(../../../packages/common/assets/fonts/CustomFont-Book.woff2) format('woff2'),
13-
url(../../../packages/common/assets/fonts/CustomFont-Book.woff) format('woff');
14-
font-weight: 400;
15-
font-style: normal;
16-
font-display: swap;
17-
}
18-
19-
@font-face {
20-
font-family: 'custom-font';
21-
src:
22-
url(../../../packages/common/assets/fonts/CustomFont-Medium.woff2) format('woff2'),
23-
url(../../../packages/common/assets/fonts/CustomFont-Medium.woff) format('woff');
24-
font-weight: 500;
25-
font-style: normal;
26-
font-display: swap;
27-
}
5+
@import './../../../packages/ui/styles/tokens.css';
286

297
:root {
308
--sidebar-width: 300px;

‎apps/learn/app/layout.tsx‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@ import type { Metadata } from 'next'
22

33
import '@/styles/globals.css'
44
import { API_URL } from '@/lib/constants'
5-
import { FeatureFlagProvider, TelemetryTagManager } from 'common'
5+
import {
6+
FeatureFlagProvider,
7+
TelemetryTagManager,
8+
} from 'common'
9+
import { fontVariableClassName, rootFontVariablesStyle } from 'common/fonts'
610
import { genFaviconData } from 'common/MetaFavicons/app-router'
7-
import { Inter } from 'next/font/google'
811
import { ThemeProvider } from './Providers'
912
import { SonnerToaster } from './SonnerToast'
1013

11-
const inter = Inter({ subsets: ['latin'] })
12-
1314
const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH ?? ''
1415

1516
export const metadata: Metadata = {
@@ -40,9 +41,15 @@ interface RootLayoutProps {
4041

4142
export default async function Layout({ children }: RootLayoutProps) {
4243
return (
43-
<html lang="en" suppressHydrationWarning>
44-
<head />
45-
<body className={`${inter.className} antialiased`}>
44+
<html lang="en" suppressHydrationWarning className={fontVariableClassName}>
45+
<head>
46+
<style
47+
dangerouslySetInnerHTML={{
48+
__html: rootFontVariablesStyle,
49+
}}
50+
/>
51+
</head>
52+
<body className="antialiased">
4653
<TelemetryTagManager />
4754
<FeatureFlagProvider API_URL={API_URL}>
4855
<ThemeProvider

0 commit comments

Comments
 (0)