Skip to content

Commit 4f5ad43

Browse files
benthecoderbenthecoder
authored
Merge pull request #7 from benthecoder/japanese-colors
Japanese colors
2 parents e8e543d + a6b079f commit 4f5ad43

File tree

16 files changed

+8471
-166
lines changed

16 files changed

+8471
-166
lines changed

‎app/api/rss/feed.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎app/globals.css‎

Lines changed: 35 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,21 @@
22
@tailwind components;
33
@tailwind utilities;
44

5+
@layer utilities {
6+
.bg-japanese-kinairo { background-color: #FBFAF5; }
7+
.bg-japanese-shironeri { background-color: #F3F3F2; }
8+
.bg-japanese-hakuji { background-color: #F8FBFB; }
9+
.bg-japanese-soshoku { background-color: #EAE5E3; }
10+
.bg-japanese-shiraumenezu { background-color: #E5E4E6; }
11+
.text-japanese-shironezu { color: #DCDDDD; }
12+
}
13+
514
body {
615
background: linear-gradient(
716
135deg,
8-
#fff8f3 0%,
9-
/* Warm cream */ #fffcf7 50%,
10-
/* Paper white */ #fff8f3 100% /* Warm cream */
17+
#F3F3F2 0%,
18+
/* Silk white - shironeri */ #FBFAF5 50%,
19+
/* Natural dough - kinairo */ #F8FBFB 100% /* White porcelain - hakuji */
1120
);
1221
min-height: 100vh;
1322
background-attachment: fixed;
@@ -16,16 +25,16 @@ body {
1625
.dark body {
1726
background: linear-gradient(
1827
135deg,
19-
#0a1f15 0%,
20-
/* Darker phthalo green */ #0d2419 50%,
21-
/* Deep phthalo green */ #0a1f15 100% /* Darker phthalo green */
28+
#1a1b26 0%,
29+
/* Dark base */ #2a2b36 50%,
30+
/* Slightly lighter */ #1a1b26 100% /* Dark base */
2231
);
2332
min-height: 100vh;
2433
background-attachment: fixed;
2534
}
2635

2736
.prose {
28-
color: #334155;
37+
color: #595857; /* sumiiro - ink color */
2938
width: 100%;
3039
min-width: 100%;
3140
padding: 0 0.5rem;
@@ -46,15 +55,15 @@ body {
4655
}
4756

4857
.dark .prose {
49-
color: #e2e8f0;
58+
color: #F3F3F3; /* nyuhakushoku - milky white */
5059
}
5160

5261
.prose strong {
5362
font-weight: bolder;
5463
}
5564

5665
.dark .prose strong {
57-
color: #93d2fd;
66+
color: #E7E7EB; /* murasakisuishiyou */
5867
font-weight: bold;
5968
}
6069

@@ -63,8 +72,8 @@ body {
6372
}
6473

6574
.prose code {
66-
background-color: #b3b3b3;
67-
color: #050505;
75+
background-color: #F7FCFE; /* unoharairo */
76+
color: #595857; /* sumiiro */
6877
padding: 0.2em 0.2em;
6978
border-radius: 0.3em;
7079
font-size: 0.85em;
@@ -106,15 +115,15 @@ body {
106115

107116
.dark .prose a {
108117
background-image: url('../public/underline-dark.png');
109-
color: #fff;
118+
color: theme('colors.dark.text');
110119
}
111120

112121
.prose a:hover {
113-
color: #d70a1b;
122+
color: #595857; /* sumiiro */
114123
}
115124

116125
.dark .prose a:hover {
117-
color: #ff959e;
126+
color: #91989C; /* ginnezu */
118127
}
119128

120129
.prose h1 {
@@ -133,31 +142,31 @@ body {
133142
.dark .prose h1,
134143
.dark .prose h2,
135144
.dark .prose h3 {
136-
color: #fff; /* set your preferred color for dark mode */
145+
color: #FFFFFC; /* gofuniro - chalk white */
137146
}
138147

139148
.prose blockquote {
140149
margin: 0 0.1em 0 0.1em;
141150
padding: 0 0em 0 1em;
142-
border-left: 3px solid #b0afaf;
151+
border-left: 3px solid #E5E4E6; /* shiraumenezu */
143152
border-left-width: 3px;
144-
border-color: #000000;
153+
border-color: #E5E4E6;
145154
quotes: none;
146155
font-style: normal;
147156
font-weight: normal;
148-
color: #595959;
157+
color: #949495; /* nezumiiro */
149158
}
150159

151160
.prose hr {
152161
margin-top: 2em;
153162
margin-bottom: 2em;
154163
border-width: 0.1px;
155-
border-color: #b0afaf;
164+
border-color: theme('colors.japanese.shiraumenezu');
156165
}
157166

158167
.dark .prose blockquote {
159-
border-color: #fff;
160-
color: #b4b4b4;
168+
border-color: #91989C; /* ginnezu */
169+
color: #E7E7EB; /* murasakisuishiyou */
161170
}
162171

163172
.prose img {
@@ -172,18 +181,18 @@ body {
172181
}
173182

174183
::selection {
175-
background: rgba(147, 197, 253, 0.3);
176-
color: #1a1a2e;
184+
background: theme('colors.japanese.murasakisuishiyou / 30%');
185+
color: theme('colors.light.text');
177186
}
178187

179188
mark {
180-
background-color: #faec9b;
189+
background-color: theme('colors.japanese.unoharairo');
181190
color: black;
182191
}
183192

184193
.dark ::selection {
185-
background: rgba(147, 197, 253, 0.2);
186-
color: #fff;
194+
background: theme('colors.japanese.nyuhakushoku / 20%');
195+
color: theme('colors.dark.text');
187196
}
188197

189198
.hover-container {

‎app/layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,10 @@ export default function RootLayout({
5454
lang="en"
5555
className={`${averia.variable} font-serif`}
5656
>
57-
<body className="flex flex-col mb-40 mx-2 md:mx-10 md:flex-row md:items-start md:mt-10 dark:bg-black bg-gradient-to-br from-transparent via-light-phthalo-200 to-transparent dark:from-transparent dark:via-dark-phthalo-200 dark:to-transparent">
57+
<body className="flex flex-col mb-40 mx-2 md:mx-10 md:flex-row md:items-start md:mt-10">
5858
<Providers>
5959
<Sidebar />
60-
<main className="flex-auto text-md md:mt-0 px-2 md:px-10 max-w-xl lg:max-w-3xl mx-auto w-full selection:bg-light-phthalo-100/10 dark:selection:bg-dark-phthalo-100/20">
60+
<main className="flex-auto text-md md:mt-0 px-2 md:px-10 max-w-xl lg:max-w-3xl mx-auto w-full selection:bg-japanese-murasakisuishiyou/20 dark:selection:bg-japanese-nyuhakushoku/20">
6161
{children}
6262
</main>
6363
</Providers>

‎app/posts/page.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const ArchivePage = () => {
1414
});
1515
return (
1616
<div>
17-
<h1 className="font-bold text-left mb-6 text-2xl hover:text-[#123524] dark:hover:text-[#1c4f36] transition-colors">
17+
<h1 className="font-bold text-left mb-6 text-2xl hover:text-light-accent dark:hover:text-dark-accent transition-colors">
1818
{' '}
1919
Archive
2020
</h1>
@@ -25,7 +25,7 @@ const ArchivePage = () => {
2525
Filter by{' '}
2626
<Link
2727
href="/tags"
28-
className="underline hover:text-[#123524] dark:hover:text-[#1c4f36] transition-colors"
28+
className="underline hover:text-light-accent dark:hover:text-dark-accent transition-colors"
2929
>
3030
tags
3131
</Link>
@@ -34,7 +34,7 @@ const ArchivePage = () => {
3434
<div>
3535
<Link
3636
href="/random"
37-
className="underline hover:text-[#123524] dark:hover:text-[#1c4f36] transition-colors"
37+
className="underline hover:text-light-accent dark:hover:text-dark-accent transition-colors"
3838
>
3939
random
4040
</Link>{' '}
@@ -44,15 +44,15 @@ const ArchivePage = () => {
4444
<div>
4545
<Link
4646
href="/search"
47-
className="underline hover:text-[#123524] dark:hover:text-[#1c4f36] transition-colors"
47+
className="underline hover:text-light-accent dark:hover:text-dark-accent transition-colors"
4848
>
4949
search
5050
</Link>{' '}
5151
🔍
5252
</div>
5353
</div>
5454

55-
<p className="text-[#123524] dark:text-[#2f8259]/90 text-sm mb-10">
55+
<p className="text-japanese-sumiiro dark:text-japanese-murasakisuishiyou text-sm mb-10 font-medium">
5656
Total: {totalBlogs} ({new Intl.NumberFormat().format(totalWordCount)}{' '}
5757
words)
5858
</p>

‎app/search/page.tsx‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,10 @@ interface SearchResult {
2525
const LoadingComponent = () => {
2626
return (
2727
<div className="flex flex-col items-center space-y-4 py-8">
28-
<div className="w-48 h-1 bg-[#e6c9a8]/20 dark:bg-[#1e2030] rounded-full overflow-hidden">
29-
<div className="w-full h-full bg-[#927456] dark:bg-[#7aa2f7] animate-loading-bar" />
28+
<div className="w-48 h-1 bg-light-border/20 dark:bg-dark-tag rounded-full overflow-hidden">
29+
<div className="w-full h-full bg-light-accent dark:bg-dark-accent animate-loading-bar" />
3030
</div>
31-
<span className="text-sm text-[#927456]/70 dark:text-[#7aa2f7]/70">
31+
<span className="text-sm text-light-accent/70 dark:text-dark-accent/70">
3232
Searching posts...
3333
</span>
3434
</div>
@@ -46,27 +46,27 @@ const SearchResult = ({ result }: { result: SearchResult }) => {
4646
const truncatedContent = truncateText(content);
4747
if (result.chunk_type === 'code') {
4848
return (
49-
<pre className="bg-[#faf4eb] dark:bg-[#1e2030] p-2 rounded text-sm overflow-x-auto mt-2">
49+
<pre className="bg-light-tag dark:bg-dark-tag p-2 rounded text-sm overflow-x-auto mt-2">
5050
<code>{truncatedContent}</code>
5151
</pre>
5252
);
5353
}
5454
return (
55-
<p className="text-[#2c353d]/70 dark:text-[#c7cce1]/70 mt-2 text-sm">
55+
<p className="text-light-text/70 dark:text-dark-text/70 mt-2 text-sm">
5656
{truncatedContent}
5757
</p>
5858
);
5959
};
6060

6161
return (
62-
<div className="group border-l-2 border-[#e6c9a8] dark:border-[#1e2030] pl-4 py-3 mb-4 hover:border-[#927456] dark:hover:border-[#7aa2f7] transition-colors hover:bg-[#faf4eb]/50 dark:hover:bg-[#1e2030]/50 rounded-r">
62+
<div className="group border-l-2 border-light-border dark:border-dark-tag pl-4 py-3 mb-4 hover:border-light-accent dark:hover:border-dark-accent transition-colors hover:bg-light-tag/50 dark:hover:bg-dark-tag/50 rounded-r">
6363
<Link href={`/posts/${result.post_slug}`} className="block space-y-2">
6464
<div className="flex items-center justify-between">
65-
<h3 className="font-medium text-[#2c353d] dark:text-[#a9b1d6] group-hover:text-[#927456] dark:group-hover:text-[#7aa2f7] transition-colors">
65+
<h3 className="font-medium text-light-text dark:text-dark-text group-hover:text-light-accent dark:group-hover:text-dark-accent transition-colors">
6666
{result.post_title}
6767
</h3>
6868
<div className="flex items-center gap-2">
69-
<span className="text-xs px-2 py-1 rounded-full bg-[#927456]/10 dark:bg-[#7aa2f7]/10 text-[#927456] dark:text-[#7aa2f7] font-medium">
69+
<span className="text-xs px-2 py-1 rounded-full bg-light-accent/10 dark:bg-dark-accent/10 text-light-accent dark:text-dark-accent font-medium">
7070
{Math.round(
7171
(result.hybrid_score ??
7272
result.keyword_score ??
@@ -80,7 +80,7 @@ const SearchResult = ({ result }: { result: SearchResult }) => {
8080
<div className="prose prose-sm max-w-none">
8181
{formatContent(result.content)}
8282
</div>
83-
<div className="text-xs text-[#927456]/70 dark:text-[#7aa2f7]/70 font-medium">
83+
<div className="text-xs text-light-accent/70 dark:text-dark-accent/70 font-medium">
8484
<span className="capitalize">{result.chunk_type}</span>
8585
{result.metadata.section && (
8686
<>
@@ -237,7 +237,7 @@ function SearchContent() {
237237
value={query}
238238
onChange={(e) => setQuery(e.target.value)}
239239
placeholder="Search posts..."
240-
className="w-full p-2 bg-[#fffcf7] dark:bg-[#1a1b26] border border-[#e6c9a8] dark:border-[#1e2030] rounded-lg focus:ring-2 focus:ring-[#927456] dark:focus:ring-[#7aa2f7] focus:border-transparent text-[#2c353d] dark:text-[#c7cce1] placeholder-gray-400 dark:placeholder-gray-500"
240+
className="w-full p-2 bg-light-bg dark:bg-dark-bg border border-light-border dark:border-dark-tag rounded-lg focus:ring-2 focus:ring-light-accent dark:focus:ring-dark-accent focus:border-transparent text-light-text dark:text-dark-text placeholder-gray-400 dark:placeholder-gray-500"
241241
/>
242242

243243
{/* Search Type Toggle */}
@@ -247,8 +247,8 @@ function SearchContent() {
247247
onClick={() => handleSearchTypeChange('hybrid')}
248248
className={`px-3 py-1.5 text-sm rounded-lg transition-colors ${
249249
searchType === 'hybrid'
250-
? 'bg-[#927456] dark:bg-[#7aa2f7] text-white'
251-
: 'bg-[#e6c9a8]/20 dark:bg-[#1e2030] text-[#2c353d] dark:text-[#c7cce1] hover:bg-[#e6c9a8]/40 dark:hover:bg-[#1e2030]/70'
250+
? 'bg-light-accent dark:bg-dark-accent text-white'
251+
: 'bg-light-border/20 dark:bg-dark-tag text-light-text dark:text-dark-text hover:bg-light-border/40 dark:hover:bg-dark-tag/70'
252252
}`}
253253
>
254254
Hybrid
@@ -258,8 +258,8 @@ function SearchContent() {
258258
onClick={() => handleSearchTypeChange('semantic')}
259259
className={`px-3 py-1.5 text-sm rounded-lg transition-colors ${
260260
searchType === 'semantic'
261-
? 'bg-[#927456] dark:bg-[#7aa2f7] text-white'
262-
: 'bg-[#e6c9a8]/20 dark:bg-[#1e2030] text-[#2c353d] dark:text-[#c7cce1] hover:bg-[#e6c9a8]/40 dark:hover:bg-[#1e2030]/70'
261+
? 'bg-light-accent dark:bg-dark-accent text-white'
262+
: 'bg-light-border/20 dark:bg-dark-tag text-light-text dark:text-dark-text hover:bg-light-border/40 dark:hover:bg-dark-tag/70'
263263
}`}
264264
>
265265
Semantic
@@ -269,16 +269,16 @@ function SearchContent() {
269269
onClick={() => handleSearchTypeChange('keyword')}
270270
className={`px-3 py-1.5 text-sm rounded-lg transition-colors ${
271271
searchType === 'keyword'
272-
? 'bg-[#927456] dark:bg-[#7aa2f7] text-white'
273-
: 'bg-[#e6c9a8]/20 dark:bg-[#1e2030] text-[#2c353d] dark:text-[#c7cce1] hover:bg-[#e6c9a8]/40 dark:hover:bg-[#1e2030]/70'
272+
? 'bg-light-accent dark:bg-dark-accent text-white'
273+
: 'bg-light-border/20 dark:bg-dark-tag text-light-text dark:text-dark-text hover:bg-light-border/40 dark:hover:bg-dark-tag/70'
274274
}`}
275275
>
276276
Keyword
277277
</button>
278278
</div>
279279

280280
{/* Search Type Explanation */}
281-
<div className="text-xs text-center text-[#2c353d]/60 dark:text-[#c7cce1]/60 italic mt-1">
281+
<div className="text-xs text-center text-light-text/60 dark:text-dark-text/60 italic mt-1">
282282
{searchType === 'hybrid' &&
283283
'Combines meaning and exact matches for balanced results'}
284284
{searchType === 'semantic' &&
@@ -302,7 +302,7 @@ function SearchContent() {
302302
) : (
303303
// Only show "no results" message if a search has been performed
304304
!isLoading && hasSearched && query && (
305-
<div className="text-center py-6 text-[#2c353d]/70 dark:text-[#c7cce1]/70">
305+
<div className="text-center py-6 text-light-text/70 dark:text-dark-text/70">
306306
<p>No results found for "{query}"</p>
307307
<p className="text-sm mt-2">
308308
Try a different search type or modify your query
@@ -320,10 +320,10 @@ export default function SearchPage() {
320320
fallback={
321321
<div className="max-w-3xl mx-auto px-4 py-8">
322322
<div className="flex flex-col items-center space-y-4 py-8">
323-
<div className="w-48 h-1 bg-[#e6c9a8]/20 dark:bg-[#1e2030] rounded-full overflow-hidden">
324-
<div className="w-full h-full bg-[#927456] dark:bg-[#7aa2f7] animate-loading-bar" />
323+
<div className="w-48 h-1 bg-light-border/20 dark:bg-dark-tag rounded-full overflow-hidden">
324+
<div className="w-full h-full bg-light-accent dark:bg-dark-accent animate-loading-bar" />
325325
</div>
326-
<span className="text-sm text-[#927456]/70 dark:text-[#7aa2f7]/70">
326+
<span className="text-sm text-light-accent/70 dark:text-dark-accent/70">
327327
Loading search...
328328
</span>
329329
</div>

‎app/tags/[slug]/page.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,9 @@ export const generateStaticParams = async () => {
1515
}));
1616
};
1717

18-
const TagPage = (props: any) => {
19-
const tag = decodeURIComponent(props.params.slug);
18+
const TagPage = async (props: any) => {
19+
const params = await props.params;
20+
const tag = decodeURIComponent(params.slug);
2021
const postMetadata = getPostMetadata();
2122

2223
const filteredPosts = postMetadata.filter((post) =>

‎components/ChatInterface.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -178,8 +178,8 @@ export default function ChatInterface({
178178
<div
179179
className={`max-w-[80%] rounded-lg px-3 py-2 ${
180180
message.role === 'user'
181-
? 'bg-[#0b93f6] text-white ml-auto'
182-
: 'bg-[#e5e5ea] dark:bg-[#303030] text-black dark:text-white'
181+
? 'bg-japanese-soshoku text-japanese-sumiiro ml-auto'
182+
: 'bg-japanese-hakuji dark:bg-japanese-nezumiiro/30 text-japanese-sumiiro dark:text-japanese-nyuhakushoku'
183183
}`}
184184
>
185185
<div className="text-sm leading-relaxed break-words">
@@ -208,7 +208,7 @@ export default function ChatInterface({
208208
messages.length > 0 &&
209209
messages[messages.length - 1].role === 'user' && (
210210
<div className="flex justify-start">
211-
<div className="bg-[#e5e5ea] dark:bg-[#303030] rounded-lg px-4 py-2.5 user-select-none">
211+
<div className="bg-japanese-shiraumenezu dark:bg-dark-tag rounded-lg px-4 py-2.5 user-select-none">
212212
<div className="flex space-x-1.5">
213213
<div className="w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-500 animate-typing"></div>
214214
<div className="w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-500 animate-typing-middle"></div>
@@ -237,7 +237,7 @@ export default function ChatInterface({
237237
type="submit"
238238
disabled={isLoading || !input.trim()}
239239
className={`${
240-
input.trim() ? 'bg-[#0b93f6]' : 'bg-gray-200 dark:bg-gray-700'
240+
input.trim() ? 'bg-light-accent' : 'bg-japanese-shiraumenezu dark:bg-dark-tag'
241241
} rounded-full p-2 disabled:opacity-50 transition-colors user-select-none`}
242242
aria-label="Send message"
243243
>

0 commit comments

Comments
 (0)