Skip to content

Commit 51c08b2

Browse files
Rel1cxRel1cx
authored
refactor(website): reorganize CSS and improve theme (#1034)
1 parent 084563c commit 51c08b2

File tree

2 files changed

+129
-120
lines changed

2 files changed

+129
-120
lines changed

‎apps/website/app/overrides.css‎

Lines changed: 0 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,3 @@
1-
:root {
2-
--font-family-body:
3-
"SF Pro Text",
4-
"SF Pro Icons",
5-
system-ui,
6-
-apple-system,
7-
BlinkMacSystemFont,
8-
"Segoe UI",
9-
Roboto,
10-
"Noto Sans",
11-
Ubuntu,
12-
Cantarell,
13-
"Helvetica Neue",
14-
Arial,
15-
sans-serif,
16-
"Apple Color Emoji",
17-
"Segoe UI Emoji",
18-
"Segoe UI Symbol",
19-
"Noto Color Emoji";
20-
21-
--font-family-ui:
22-
system-ui,
23-
-apple-system,
24-
BlinkMacSystemFont,
25-
"Segoe UI",
26-
Roboto,
27-
"Noto Sans",
28-
Ubuntu,
29-
Cantarell,
30-
"Helvetica Neue",
31-
Arial,
32-
sans-serif,
33-
"Apple Color Emoji",
34-
"Segoe UI Emoji",
35-
"Segoe UI Symbol",
36-
"Noto Color Emoji";
37-
38-
--font-family-mono:
39-
var(--font-ibm_plex_mono),
40-
ui-monospace,
41-
Menlo,
42-
Monaco,
43-
Consolas,
44-
monospace;
45-
}
46-
47-
body {
48-
font-family: var(--font-family-body);
49-
}
50-
51-
button {
52-
cursor: pointer;
53-
}
54-
55-
#nd-docs-layout #nd-sidebar a[data-active] {
56-
font-weight: 400;
57-
}
58-
59-
.prose {
60-
font-family: var(--font-family-body);
61-
}
62-
63-
.prose table thead tr th code,
64-
.prose table tbody tr td code {
65-
white-space: nowrap;
66-
}
67-
68-
.prose .fd-codeblock code {
69-
font-family: var(--font-family-mono);
70-
font-size: 14px;
71-
}
72-
73-
.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
74-
padding: .125rem .25em;
75-
font-size: 14px;
76-
}
77-
78-
.prose :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
79-
font-size: 1em;
80-
}
81-
82-
figure.fd-codeblock.shiki {
83-
/* improve code block readability */
84-
background-color: color-mix(in oklab, var(--color-fd-secondary) 25%, transparent);
85-
}
86-
871
.bsky-post [class^="embed-module_externalThumbnail"] {
882
display: none;
893
}

‎apps/website/app/theme.css‎

Lines changed: 129 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,155 @@
1+
/************************
2+
CSS variable definition
3+
************************/
4+
5+
/* base theme variables */
16
@theme {
2-
--color-fd-accent-foreground: hsl(240, 6%, 25%);
3-
--color-fd-accent: hsl(0, 0%, 94.1%);
7+
/* background and foreground color */
48
--color-fd-background: hsl(0, 0%, 100%);
5-
--color-fd-border: hsl(0, 0%, 89.8%);
6-
--color-fd-card-foreground: hsl(0, 0%, 3.9%);
7-
--color-fd-card: hsl(0, 0%, 100%);
89
--color-fd-foreground: hsl(240, 6%, 25%);
9-
--color-fd-muted-foreground: hsl(240, 6%, 50%);
10-
--color-fd-muted: hsl(0, 0%, 96%);
11-
--color-fd-popover-foreground: hsl(0, 0%, 15.1%);
10+
11+
/* card and popover */
12+
--color-fd-card: hsl(0, 0%, 100%);
13+
--color-fd-card-foreground: hsl(0, 0%, 3.9%);
1214
--color-fd-popover: hsl(0, 0%, 100%);
13-
--color-fd-primary-foreground: hsl(0, 0%, 98%);
15+
--color-fd-popover-foreground: hsl(0, 0%, 15.1%);
16+
17+
/* primary and secondary color */
1418
--color-fd-primary: hsl(210, 100%, 44%);
15-
--color-fd-ring: hsl(0, 0%, 63.9%);
16-
--color-fd-secondary-foreground: hsl(0, 0%, 9%);
19+
--color-fd-primary-foreground: hsl(0, 0%, 98%);
1720
--color-fd-secondary: hsl(240, 6%, 97%);
21+
--color-fd-secondary-foreground: hsl(0, 0%, 9%);
22+
23+
/* border and ring color */
24+
--color-fd-border: hsl(0, 0%, 89.8%);
25+
--color-fd-ring: hsl(0, 0%, 63.9%);
26+
27+
/* muted text color */
28+
--color-fd-muted: hsl(0, 0%, 96%);
29+
--color-fd-muted-foreground: hsl(240, 6%, 50%);
30+
31+
/* accent color */
32+
--color-fd-accent: hsl(0, 0%, 94.1%);
33+
--color-fd-accent-foreground: hsl(240, 6%, 25%);
1834
}
1935

36+
/* dark theme variables override */
2037
.dark {
21-
--color-fd-accent-foreground: hsl(0, 0%, 90%);
22-
--color-fd-accent: hsl(0, 0%, 16.9%);
2338
--color-fd-background: hsl(0, 0%, 7.04%);
24-
--color-fd-border: hsl(0, 0%, 14%);
25-
--color-fd-card-foreground: hsl(0, 0%, 98%);
26-
--color-fd-card: hsl(0, 0%, 9.8%);
2739
--color-fd-foreground: hsl(0, 0%, 92%);
28-
--color-fd-muted-foreground: hsl(0, 0%, 60.9%);
29-
--color-fd-muted: hsl(0, 0%, 12.9%);
30-
--color-fd-popover-foreground: hsl(0, 0%, 88%);
40+
41+
--color-fd-card: hsl(0, 0%, 9.8%);
42+
--color-fd-card-foreground: hsl(0, 0%, 98%);
3143
--color-fd-popover: hsl(0, 0%, 9.8%);
32-
--color-fd-primary-foreground: hsl(0, 0%, 9%);
44+
--color-fd-popover-foreground: hsl(0, 0%, 88%);
45+
3346
--color-fd-primary: hsl(0, 0%, 98%);
34-
--color-fd-ring: hsl(0, 0%, 54.9%);
35-
--color-fd-secondary-foreground: hsl(0, 0%, 98%);
47+
--color-fd-primary-foreground: hsl(0, 0%, 9%);
3648
--color-fd-secondary: hsl(0, 0%, 12.9%);
49+
--color-fd-secondary-foreground: hsl(0, 0%, 98%);
50+
51+
--color-fd-border: hsl(0, 0%, 14%);
52+
--color-fd-ring: hsl(0, 0%, 54.9%);
53+
54+
--color-fd-muted: hsl(0, 0%, 12.9%);
55+
--color-fd-muted-foreground: hsl(0, 0%, 60.9%);
56+
57+
--color-fd-accent: hsl(0, 0%, 16.9%);
58+
--color-fd-accent-foreground: hsl(0, 0%, 90%);
3759
}
3860

39-
.prose {
40-
--tw-prose-links: var(--color-fd-primary);
61+
/* font definition */
62+
:root {
63+
--font-family-body: "SF Pro Text", "SF Pro Icons", system-ui, ...;
64+
--font-family-ui: system-ui, ...;
65+
--font-family-mono: var(--font-ibm_plex_mono), ui-monospace, ...;
4166
}
4267

43-
.prose :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
44-
border: none;
68+
/******************
69+
global base style
70+
******************/
71+
:focus-visible {
72+
outline: 2px solid var(--color-fd-primary);
73+
outline-offset: -2px;
74+
box-shadow: inset 0 0 0 3px color-mix(in oklab, var(--color-fd-primary) 20%, transparent);
4575
}
4676

47-
.dark .prose {
48-
--tw-prose-body:
49-
color-mix(in oklab, var(--color-fd-foreground) 80%, transparent);
77+
body {
78+
font-family: var(--font-family-body);
5079
}
5180

52-
.dark .prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
53-
color: #ffffff;
81+
button {
82+
cursor: pointer;
83+
}
84+
85+
/***********************
86+
sidebar specific style
87+
***********************/
88+
#nd-docs-layout #nd-sidebar {
89+
/* link active state */
90+
a[data-active] {
91+
font-weight: 400;
92+
}
93+
94+
/* margin adjustment */
95+
p.mt-8.mb-2[style^="padding-inline-start:"] {
96+
margin-top: 28px;
97+
margin-bottom: 16px;
98+
}
99+
100+
/* interaction state */
101+
div[data-state],
102+
a[data-active] {
103+
margin-top: 4px;
104+
margin-bottom: 4px;
105+
border-radius: 6px;
106+
}
54107
}
55108

109+
/* dark mode sidebar adjustment */
56110
.dark #nd-sidebar {
57-
--color-fd-muted: hsl(0, 0%, 16%);
58-
--color-fd-secondary: hsl(0, 0%, 18%);
59-
--color-fd-muted-foreground: hsl(0, 0%, 72%);
111+
--color-fd-muted: hsl(0, 0%, 16%);
112+
--color-fd-secondary: hsl(0, 0%, 18%);
113+
--color-fd-muted-foreground: hsl(0, 0%, 72%);
114+
}
115+
116+
/*************************
117+
content typography style
118+
*************************/
119+
.prose {
120+
font-family: var(--font-family-body);
121+
122+
/* link color */
123+
--tw-prose-links: var(--color-fd-primary);
124+
125+
/* code block style */
126+
.fd-codeblock.shiki {
127+
background-color: color-mix(in oklab, var(--color-fd-secondary) 25%, transparent);
128+
}
129+
130+
/* inline code style */
131+
:where(code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
132+
border: none;
133+
padding: .125rem .25em;
134+
font-size: 14px;
135+
}
136+
137+
/* table style */
138+
table {
139+
font-size: 1em;
140+
141+
thead tr th code,
142+
tbody tr td code {
143+
white-space: nowrap;
144+
}
145+
}
146+
}
147+
148+
/* dark mode content adjustment */
149+
.dark .prose {
150+
--tw-prose-body: color-mix(in oklab, var(--color-fd-foreground) 80%, transparent);
151+
152+
:where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
153+
color: #ffffff;
154+
}
60155
}

0 commit comments

Comments
 (0)