Skip to content

Commit 937e798

Browse files
bedapudi6788bedapudi6788
committed
less dark and less bright
Signed-off-by: Praneeth Bedapudi <praneeth@bpraneeth.com>
1 parent 6148ee8 commit 937e798

7 files changed

Lines changed: 223 additions & 172 deletions

File tree

‎src/components/ArchitectureDiagram/styles.module.css‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
/* ─── Wrapper ────────────────────────────────────────────────────────── */
22
.wrapper {
3-
border: 1px solid #e5e7eb;
3+
border: 1px solid var(--docs-light-border);
44
border-radius: 0.75rem;
55
padding: 1.5rem 1.125rem 0.75rem;
6-
background: #ffffff;
6+
background: var(--docs-light-surface);
77
margin: 1.5rem 0;
88
position: relative;
99
overflow: hidden;
@@ -18,8 +18,8 @@
1818
}
1919

2020
:global([data-theme="dark"]) .wrapper {
21-
background: #0f0f0f;
22-
border-color: #262626;
21+
background: var(--docs-dark-surface);
22+
border-color: var(--docs-dark-border);
2323
}
2424

2525
:global([data-theme="dark"]) .wrapper::before {
@@ -28,27 +28,29 @@
2828

2929
/* ─── External boxes (source / destination) ──────────────────────────── */
3030
.externalBox {
31-
border: 1px solid #e5e7eb;
31+
border: 1px solid var(--docs-light-border);
3232
border-radius: 0.5rem;
3333
overflow: hidden;
34+
background: var(--docs-light-surface-raised);
3435
}
3536

3637
:global([data-theme="dark"]) .externalBox {
37-
border-color: #333;
38+
background: var(--docs-dark-surface-raised);
39+
border-color: var(--docs-dark-border);
3840
}
3941

4042
.externalHeader {
4143
padding: 0.45rem 0.75rem;
4244
font-weight: 600;
4345
font-size: 0.8125rem;
4446
letter-spacing: 0.01em;
45-
border-bottom: 1px solid #e5e7eb;
46-
background: #f8fafc;
47-
color: #475569;
47+
border-bottom: 1px solid var(--docs-light-border);
48+
background: #e2d5bf;
49+
color: var(--docs-light-text-muted);
4850
}
4951

5052
:global([data-theme="dark"]) .externalHeader {
51-
border-bottom-color: #333;
53+
border-bottom-color: var(--docs-dark-border);
5254
background: rgba(148, 163, 184, 0.08);
5355
color: #94a3b8;
5456
}
@@ -139,36 +141,36 @@
139141
.stage {
140142
flex: 1;
141143
min-width: 0;
142-
border: 1px solid #e5e7eb;
144+
border: 1px solid var(--docs-light-border);
143145
border-radius: 0.375rem;
144146
overflow: hidden;
145-
background: white;
147+
background: var(--docs-light-surface-raised);
146148
display: flex;
147149
flex-direction: column;
148150
}
149151

150152
:global([data-theme="dark"]) .stage {
151-
border-color: #333;
152-
background: #0f0f0f;
153+
border-color: var(--docs-dark-border);
154+
background: var(--docs-dark-surface-raised);
153155
}
154156

155157
.stageName {
156158
padding: 0.3rem 0.625rem;
157159
font-weight: 600;
158160
font-size: 0.75rem;
159161
letter-spacing: 0.01em;
160-
border-bottom: 1px solid #e5e7eb;
162+
border-bottom: 1px solid var(--docs-light-border);
161163
}
162164

163165
:global([data-theme="dark"]) .stageName {
164-
border-bottom-color: #333;
166+
border-bottom-color: var(--docs-dark-border);
165167
}
166168

167169
/* Phase color progression - light mode */
168-
.stage[data-phase="0"] .stageName { background: #f0fdf4; color: #166534; }
169-
.stage[data-phase="1"] .stageName { background: #dcfce7; color: #15803d; }
170-
.stage[data-phase="2"] .stageName { background: #d1fae5; color: #059669; }
171-
.stage[data-phase="3"] .stageName { background: #a7f3d0; color: #047857; }
170+
.stage[data-phase="0"] .stageName { background: #dfead7; color: #166534; }
171+
.stage[data-phase="1"] .stageName { background: #d3e4cf; color: #15803d; }
172+
.stage[data-phase="2"] .stageName { background: #c7dec8; color: #059669; }
173+
.stage[data-phase="3"] .stageName { background: #bad7c0; color: #047857; }
172174

173175
/* Phase color progression - dark mode */
174176
:global([data-theme="dark"]) .stage[data-phase="0"] .stageName {
@@ -207,7 +209,7 @@
207209
.gatewayFooter {
208210
margin-top: 0.75rem;
209211
padding: 0.45rem 0.75rem;
210-
border: 1px dashed #d1d5db;
212+
border: 1px dashed var(--docs-light-border-strong);
211213
border-radius: 0.375rem;
212214
font-size: 0.75rem;
213215
font-weight: 500;
@@ -217,7 +219,7 @@
217219
}
218220

219221
:global([data-theme="dark"]) .gatewayFooter {
220-
border-color: #333;
222+
border-color: var(--docs-dark-border);
221223
}
222224

223225
/* ─── Destination grid ───────────────────────────────────────────────── */
@@ -233,8 +235,8 @@
233235
font-size: 0.6875rem;
234236
padding: 0.2rem 0.5rem;
235237
border-radius: 0.25rem;
236-
background: #f0fdf4;
237-
border: 1px solid #d1fae5;
238+
background: #dfead7;
239+
border: 1px solid #b7d0bc;
238240
color: #059669;
239241
font-weight: 500;
240242
}

‎src/components/AskAiBanner/index.js‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export default function AskAiBanner({ productName }) {
4949

5050
return (
5151
<aside
52-
className="relative not-prose font-sans my-8 overflow-hidden rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-950"
52+
className="relative not-prose font-sans my-8 overflow-hidden rounded-2xl border border-[#c7b99f] dark:border-[#30343b] bg-[#f3ead9] dark:bg-[#171a1f]"
5353
aria-label={`Talk to your AI about ${productName}`}
5454
>
5555
{/* Soft gradient wash */}
@@ -80,13 +80,13 @@ export default function AskAiBanner({ productName }) {
8080
</div>
8181

8282
{/* Heading */}
83-
<h3 className="mt-3.5 m-0 text-2xl sm:text-[28px] leading-[1.15] font-semibold tracking-tight text-neutral-950 dark:text-neutral-50">
83+
<h3 className="mt-3.5 m-0 text-2xl sm:text-[28px] leading-[1.15] font-semibold tracking-tight text-[#252018] dark:text-neutral-50">
8484
Talk to your AI about{" "}
8585
<span className="text-emerald-600 dark:text-emerald-400">
8686
{productName}
8787
</span>
8888
</h3>
89-
<p className="mt-2 m-0 text-sm sm:text-[15px] leading-relaxed text-neutral-600 dark:text-neutral-400 max-w-xl">
89+
<p className="mt-2 m-0 text-sm sm:text-[15px] leading-relaxed text-[#554c3f] dark:text-neutral-400 max-w-xl">
9090
Open the {productName} docs in your favorite assistant and get instant
9191
answers, code samples, and integration help grounded in the latest
9292
guides.
@@ -100,10 +100,10 @@ export default function AskAiBanner({ productName }) {
100100
href={buildUrl(aiMessage)}
101101
target="_blank"
102102
rel="noopener noreferrer"
103-
className="group relative flex items-center justify-between gap-2 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-950 px-3.5 py-3 no-underline! text-neutral-900 dark:text-neutral-50 hover:border-emerald-500/60 hover:shadow-[0_1px_0_rgba(16,185,129,0.06),0_8px_24px_-12px_rgba(16,185,129,0.25)] dark:hover:shadow-[0_1px_0_rgba(16,185,129,0.08),0_8px_24px_-12px_rgba(16,185,129,0.4)] hover:-translate-y-px transition-all"
103+
className="group relative flex items-center justify-between gap-2 rounded-xl border border-[#c7b99f] dark:border-[#30343b] bg-[#ebe1cf] dark:bg-[#1f232a] px-3.5 py-3 no-underline! text-[#252018] dark:text-neutral-50 hover:border-emerald-500/60 hover:shadow-[0_1px_0_rgba(16,185,129,0.06),0_8px_24px_-12px_rgba(16,185,129,0.25)] dark:hover:shadow-[0_1px_0_rgba(16,185,129,0.08),0_8px_24px_-12px_rgba(16,185,129,0.4)] hover:-translate-y-px transition-all"
104104
>
105105
<span className="flex items-center gap-2.5 min-w-0">
106-
<span className="inline-flex shrink-0 items-center justify-center size-9 rounded-lg bg-neutral-100 dark:bg-neutral-900 text-neutral-700 dark:text-neutral-200 group-hover:text-emerald-700 dark:group-hover:text-emerald-300 group-hover:bg-emerald-500/10 ring-1 ring-transparent group-hover:ring-emerald-500/20 transition-colors">
106+
<span className="inline-flex shrink-0 items-center justify-center size-9 rounded-lg bg-[#f3ead9] dark:bg-[#171a1f] text-[#554c3f] dark:text-neutral-200 group-hover:text-emerald-700 dark:group-hover:text-emerald-300 group-hover:bg-emerald-500/10 ring-1 ring-transparent group-hover:ring-emerald-500/20 transition-colors">
107107
<BrandIcon />
108108
</span>
109109
<span className="flex flex-col min-w-0">
@@ -125,18 +125,18 @@ export default function AskAiBanner({ productName }) {
125125
</div>
126126

127127
{/* Enterprise / internal-LLM secondary action */}
128-
<div className="mt-5 flex items-center justify-between gap-4 flex-wrap rounded-xl border border-dashed border-neutral-300/80 dark:border-neutral-700/80 bg-neutral-50/60 dark:bg-neutral-900/40 px-4 py-3">
128+
<div className="mt-5 flex items-center justify-between gap-4 flex-wrap rounded-xl border border-dashed border-[#b7a68b]/80 dark:border-[#3a3f48] bg-[#ebe1cf]/80 dark:bg-[#1f232a]/70 px-4 py-3">
129129
<div className="flex items-start gap-3 min-w-0">
130-
<span className="inline-flex shrink-0 items-center justify-center size-7 rounded-md bg-white dark:bg-neutral-950 border border-neutral-200 dark:border-neutral-800 text-neutral-600 dark:text-neutral-400">
130+
<span className="inline-flex shrink-0 items-center justify-center size-7 rounded-md bg-[#f3ead9] dark:bg-[#171a1f] border border-[#c7b99f] dark:border-[#30343b] text-[#554c3f] dark:text-neutral-400">
131131
<Server size={14} aria-hidden />
132132
</span>
133133
<div className="min-w-0">
134-
<p className="m-0 text-[13px] font-medium text-neutral-800 dark:text-neutral-200">
134+
<p className="m-0 text-[13px] font-medium text-[#252018] dark:text-neutral-200">
135135
Using an internal or self-hosted LLM?
136136
</p>
137-
<p className="m-0 mt-0.5 text-[12.5px] text-neutral-500 dark:text-neutral-500 leading-snug">
137+
<p className="m-0 mt-0.5 text-[12.5px] text-[#706653] dark:text-neutral-500 leading-snug">
138138
Copy our{" "}
139-
<code className="font-mono text-[11.5px] px-1 py-px rounded bg-white dark:bg-neutral-950 text-neutral-700 dark:text-neutral-300 border border-neutral-200 dark:border-neutral-800">
139+
<code className="font-mono text-[11.5px] px-1 py-px rounded bg-[#f3ead9] dark:bg-[#171a1f] text-[#554c3f] dark:text-neutral-300 border border-[#c7b99f] dark:border-[#30343b]">
140140
llms.txt
141141
</code>{" "}
142142
and paste it into any private chat.
@@ -148,7 +148,7 @@ export default function AskAiBanner({ productName }) {
148148
type="button"
149149
onClick={copyLlmsTxt}
150150
disabled={!hasMarkdown}
151-
className="shrink-0 inline-flex items-center gap-1.5 rounded-md border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-950 px-3 py-1.5 text-[12.5px] font-medium text-neutral-800 dark:text-neutral-200 hover:border-emerald-500/60 hover:text-emerald-700 dark:hover:text-emerald-300 active:scale-[0.98] transition-all disabled:opacity-45 disabled:cursor-not-allowed disabled:hover:border-neutral-300 dark:disabled:hover:border-neutral-700 disabled:hover:text-neutral-800 dark:disabled:hover:text-neutral-200 cursor-pointer"
151+
className="shrink-0 inline-flex items-center gap-1.5 rounded-md border border-[#b7a68b] dark:border-[#30343b] bg-[#f3ead9] dark:bg-[#171a1f] px-3 py-1.5 text-[12.5px] font-medium text-[#252018] dark:text-neutral-200 hover:border-emerald-500/60 hover:text-emerald-700 dark:hover:text-emerald-300 active:scale-[0.98] transition-all disabled:opacity-45 disabled:cursor-not-allowed disabled:hover:border-[#b7a68b] dark:disabled:hover:border-[#30343b] disabled:hover:text-[#252018] dark:disabled:hover:text-neutral-200 cursor-pointer"
152152
title={
153153
hasMarkdown
154154
? "Copy llms.txt to clipboard"

‎src/components/DocPageCopyDropdown/index.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { AI_PROVIDERS, buildDocPageAiPrompt } from "@site/src/data/aiProviders";
66
import { Copy, Check, ChevronDown } from "lucide-react";
77

88
const menuItemCls =
9-
"flex w-full items-center group gap-3 rounded-md px-2.5 py-2 text-left no-underline! cursor-pointer border-none bg-transparent text-inherit font-inherit hover:bg-neutral-100 dark:hover:bg-neutral-900 disabled:opacity-45 disabled:cursor-not-allowed";
9+
"flex w-full items-center group gap-3 rounded-md px-2.5 py-2 text-left no-underline! cursor-pointer border-none bg-transparent text-inherit font-inherit hover:bg-[#ebe1cf] dark:hover:bg-[#1f232a] disabled:opacity-45 disabled:cursor-not-allowed";
1010

1111
const ListItem = ({ icon, title, description, asLink = false, ...props }) => {
1212
const Component = asLink ? "a" : "button";
@@ -20,10 +20,10 @@ const ListItem = ({ icon, title, description, asLink = false, ...props }) => {
2020
>
2121
<div className="group-hover:text-emerald-500">{icon}</div>
2222
<div>
23-
<p className="font-medium! font-sans text-sm m-0 text-neutral-950 dark:text-neutral-50">
23+
<p className="font-medium! font-sans text-sm m-0 text-[#252018] dark:text-neutral-50">
2424
{title}
2525
</p>
26-
<p className="text-xs m-0 font-sans text-neutral-500 leading-snug">
26+
<p className="text-xs m-0 font-sans text-[#706653] dark:text-neutral-500 leading-snug">
2727
{description}
2828
</p>
2929
</div>
@@ -96,10 +96,10 @@ export default function DocPageCopyDropdown() {
9696
data-doc-copy-dropdown
9797
>
9898
{/* Split button */}
99-
<div className="inline-flex items-stretch rounded-lg border border-neutral-200 dark:border-neutral-800 overflow-hidden bg-white dark:bg-neutral-950">
99+
<div className="inline-flex items-stretch rounded-lg border border-[#c7b99f] dark:border-[#30343b] overflow-hidden bg-[#f3ead9] dark:bg-[#171a1f]">
100100
<button
101101
type="button"
102-
className="inline-flex font-sans items-center gap-1.5 px-2.5 py-1.5 text-[0.8125rem] font-medium leading-tight text-neutral-800 dark:text-neutral-100 bg-transparent border-none cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-900 disabled:opacity-45 disabled:cursor-not-allowed"
102+
className="inline-flex font-sans items-center gap-1.5 px-2.5 py-1.5 text-[0.8125rem] font-medium leading-tight text-[#252018] dark:text-neutral-100 bg-transparent border-none cursor-pointer hover:bg-[#ebe1cf] dark:hover:bg-[#1f232a] disabled:opacity-45 disabled:cursor-not-allowed"
103103
onClick={copyMarkdown}
104104
disabled={!hasMarkdown}
105105
title={
@@ -112,12 +112,12 @@ export default function DocPageCopyDropdown() {
112112
<span>{copiedMd ? "Copied!" : "Copy page"}</span>
113113
</button>
114114
<span
115-
className="w-px self-stretch bg-neutral-200 dark:bg-neutral-800"
115+
className="w-px self-stretch bg-[#c7b99f] dark:bg-[#30343b]"
116116
aria-hidden
117117
/>
118118
<button
119119
type="button"
120-
className="inline-flex font-sans items-center gap-1 px-2.5 py-1.5 text-[0.8125rem] font-medium leading-tight text-neutral-800 dark:text-neutral-100 border-none bg-transparent cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-900"
120+
className="inline-flex font-sans items-center gap-1 px-2.5 py-1.5 text-[0.8125rem] font-medium leading-tight text-[#252018] dark:text-neutral-100 border-none bg-transparent cursor-pointer hover:bg-[#ebe1cf] dark:hover:bg-[#1f232a]"
121121
aria-expanded={menuOpen}
122122
aria-haspopup="true"
123123
aria-controls={menuId}
@@ -140,7 +140,7 @@ export default function DocPageCopyDropdown() {
140140
{menuOpen && (
141141
<ul
142142
id={menuId}
143-
className="absolute z-20 pl-1! right-0 top-[calc(100%+0.35rem)] min-w-[16rem] p-1 m-0 list-none rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-950 shadow-[0_4px_6px_-1px_rgb(0_0_0/0.08),0_2px_4px_-2px_rgb(0_0_0/0.06)] dark:shadow-[0_4px_6px_-1px_rgb(0_0_0/0.4),0_2px_4px_-2px_rgb(0_0_0/0.3)]"
143+
className="absolute z-20 pl-1! right-0 top-[calc(100%+0.35rem)] min-w-[16rem] p-1 m-0 list-none rounded-lg border border-[#c7b99f] dark:border-[#30343b] bg-[#f3ead9] dark:bg-[#171a1f] shadow-[0_4px_6px_-1px_rgb(0_0_0/0.08),0_2px_4px_-2px_rgb(0_0_0/0.06)] dark:shadow-[0_4px_6px_-1px_rgb(0_0_0/0.4),0_2px_4px_-2px_rgb(0_0_0/0.3)]"
144144
role="menu"
145145
>
146146
{dropdownItems.map(

‎src/components/StepFlow/styles.module.css‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
/* ─── Wrapper ────────────────────────────────────────────────────────── */
22
.wrapper {
3-
border: 1px solid #e5e7eb;
3+
border: 1px solid var(--docs-light-border);
44
border-radius: 0.75rem;
55
padding: 1.5rem 1.125rem 0.75rem;
6-
background: #ffffff;
6+
background: var(--docs-light-surface);
77
margin: 1.5rem 0;
88
position: relative;
99
overflow: hidden;
@@ -18,8 +18,8 @@
1818
}
1919

2020
:global([data-theme="dark"]) .wrapper {
21-
background: #0f0f0f;
22-
border-color: #262626;
21+
background: var(--docs-dark-surface);
22+
border-color: var(--docs-dark-border);
2323
}
2424

2525
:global([data-theme="dark"]) .wrapper::before {
@@ -35,16 +35,18 @@
3535
/* ─── Card ───────────────────────────────────────────────────────────── */
3636
.card {
3737
flex: 1;
38-
border: 1px solid #e5e7eb;
38+
border: 1px solid var(--docs-light-border);
3939
border-radius: 0.5rem;
4040
overflow: hidden;
4141
min-width: 0;
42+
background: var(--docs-light-surface-raised);
4243
display: flex;
4344
flex-direction: column;
4445
}
4546

4647
:global([data-theme="dark"]) .card {
47-
border-color: #333;
48+
background: var(--docs-dark-surface-raised);
49+
border-color: var(--docs-dark-border);
4850
}
4951

5052
/* ─── Card header - green progression ────────────────────────────────── */
@@ -53,36 +55,36 @@
5355
font-weight: 600;
5456
font-size: 0.8125rem;
5557
letter-spacing: 0.01em;
56-
border-bottom: 1px solid #e5e7eb;
58+
border-bottom: 1px solid var(--docs-light-border);
5759
}
5860

5961
:global([data-theme="dark"]) .cardHeader {
60-
border-bottom-color: #333;
62+
border-bottom-color: var(--docs-dark-border);
6163
}
6264

6365
/* Light mode */
6466
.cardHeader[data-step="0"] {
65-
background: #f0fdf4;
67+
background: #dfead7;
6668
color: #166534;
6769
}
6870
.cardHeader[data-step="1"] {
69-
background: #dcfce7;
71+
background: #d3e4cf;
7072
color: #15803d;
7173
}
7274
.cardHeader[data-step="2"] {
73-
background: #d1fae5;
75+
background: #c7dec8;
7476
color: #059669;
7577
}
7678
.cardHeader[data-step="3"] {
77-
background: #a7f3d0;
79+
background: #bad7c0;
7880
color: #047857;
7981
}
8082
.cardHeader[data-step="4"] {
81-
background: #6ee7b7;
83+
background: #abcdb3;
8284
color: #065f46;
8385
}
8486
.cardHeader[data-step="5"] {
85-
background: #34d399;
87+
background: #94bea3;
8688
color: #064e3b;
8789
}
8890

0 commit comments

Comments
 (0)