Skip to content

Commit 79bc7d6

Browse files
maxelkinsmaxelkins
authored
Merge pull request #14 from maxelkins/light-mode
Light mode / Full catppuccin theme
2 parents 6ed258a + f55f14b commit 79bc7d6

10 files changed

Lines changed: 128 additions & 59 deletions

File tree

demo/demo.tape renamed to demo/demo-content.tape

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,12 @@
1-
# VHS demo tape for hdi
2-
# Run: vhs demo.tape
3-
# Requires: brew install vhs
4-
# Uses the `../hdi` build through $PWD below (ie. not `hdi` installed via Homebrew) so that the demo always shows the latest version of hdi
5-
6-
Output ./demo/demo.gif
1+
# Shared demo steps for hdi
2+
# This file is sourced by theme-specific tapes.
73

84
Set Shell "bash"
95
Set FontSize 36
106
Set Width 1600
117
Set Height 1000
128
Set Padding 40
139
Set TypingSpeed 60ms
14-
Set Theme "Catppuccin Mocha"
1510

1611
# ── Setup (hidden) ──────────────────────────────────────────────────────────
1712

@@ -37,7 +32,6 @@ Down
3732
Sleep 500ms
3833
Down
3934
Sleep 500ms
40-
4135
# Navigate back up
4236
Up
4337
Sleep 500ms
@@ -77,7 +71,6 @@ Type "hdi r"
7771
Sleep 200ms
7872
Enter
7973
Sleep 2s
80-
8174
Type "q"
8275
Sleep 1.5s
8376

@@ -87,7 +80,6 @@ Type "hdi t"
8780
Sleep 200ms
8881
Enter
8982
Sleep 2s
90-
9183
Type "q"
9284
Sleep 1.5s
9385

@@ -97,6 +89,5 @@ Type "hdi c"
9789
Sleep 200ms
9890
Enter
9991
Sleep 3s
100-
10192
Type "q"
10293
Sleep 1.5s

‎demo/demo-latte.gif‎

453 KB
Loading

‎demo/demo-latte.tape‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# VHS demo tape for hdi in Catppuccin Latte theme
2+
# Run: vhs demo-latte.tape
3+
# Requires: brew install vhs
4+
# Uses the `../hdi` build through $PWD below (ie. not `hdi` installed via Homebrew) so that the demo always shows the latest version of hdi
5+
6+
Output demo/demo-latte.gif
7+
Set Theme "Catppuccin Latte"
8+
Source demo/demo-content.tape

‎demo/demo-mocha.gif‎

468 KB
Loading

‎demo/demo-mocha.tape‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# VHS demo tape for hdi in Catppuccin Mocha theme
2+
# Run: vhs demo-latte.tape
3+
# Requires: brew install vhs
4+
# Uses the `../hdi` build through $PWD below (ie. not `hdi` installed via Homebrew) so that the demo always shows the latest version of hdi
5+
6+
Output demo/demo-mocha.gif
7+
Set Theme "Catppuccin Mocha"
8+
Source demo/demo-content.tape

‎demo/demo.gif‎

-507 KB
Binary file not shown.

‎site/demo.css‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ body:has(.demo-view) {
3232
.sidebar-heading {
3333
padding: 0.5rem 1rem 1rem;
3434
font-weight: 600;
35-
color: var(--overlay0);
35+
color: var(--subtext0);
3636
}
3737

3838
.sidebar-item {
@@ -51,8 +51,8 @@ body:has(.demo-view) {
5151
}
5252

5353
.sidebar-item.active {
54-
background: var(--surface0);
55-
border-inline-start-color: var(--cyan);
54+
background: color-mix(in oklch, var(--overlay2), transparent 80%);
55+
border-inline-start-color: var(--lavender);
5656
}
5757

5858
.sidebar-badge {
@@ -77,7 +77,7 @@ body:has(.demo-view) {
7777
background: var(--red);
7878
}
7979
.sidebar-badge.lang-TS {
80-
background: var(--cyan);
80+
background: var(--sapphire);
8181
}
8282
.sidebar-badge.lang-GO {
8383
background: var(--green);
@@ -97,7 +97,7 @@ body:has(.demo-view) {
9797

9898
.sidebar-desc {
9999
font-size: 0.75rem;
100-
color: var(--overlay0);
100+
color: var(--text);
101101
}
102102

103103
/* Terminal */
@@ -176,12 +176,12 @@ body:has(.demo-view) {
176176
}
177177

178178
.t-header {
179-
color: var(--cyan);
179+
color: var(--sapphire);
180180
font-weight: 700;
181181
}
182182

183183
.t-subheader {
184-
color: var(--magenta);
184+
color: var(--mauve);
185185
font-weight: 700;
186186
}
187187

@@ -194,7 +194,7 @@ body:has(.demo-view) {
194194
}
195195

196196
.t-dim {
197-
color: var(--overlay0);
197+
color: var(--subtext0);
198198
}
199199

200200
.t-yellow {
@@ -231,7 +231,7 @@ body:has(.demo-view) {
231231
}
232232

233233
.picker-footer {
234-
color: var(--overlay0);
234+
color: var(--subtext0);
235235
min-height: 1.6em;
236236
white-space: pre;
237237
}
@@ -256,7 +256,7 @@ body:has(.demo-view) {
256256
padding: 0.75rem 1.25rem;
257257
background: var(--mantle);
258258
border-block-start: 0.0625rem solid var(--surface0);
259-
color: var(--overlay0);
259+
color: var(--subtext0);
260260
flex-shrink: 0;
261261
line-height: 2;
262262
}
@@ -293,7 +293,7 @@ body:has(.demo-view) {
293293
}
294294
.sidebar-item.active {
295295
border-inline-start-color: transparent;
296-
border-block-end-color: var(--cyan);
296+
border-block-end-color: var(--sapphire);
297297
}
298298

299299
.sidebar-name {

‎site/global.css‎

Lines changed: 64 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,69 @@
33
/* ── Reset ─────────────────────────────────────────────────────────── */
44

55
:root {
6-
/* Catppuccin Mocha palette */
7-
--base: #1e1e2e;
8-
--mantle: #181825;
9-
--surface0: #313244;
10-
--surface1: #45475a;
11-
--overlay0: #6c7086;
12-
--text: #cdd6f4;
13-
--subtext0: #a6adc8;
14-
--green: #a6e3a1;
15-
--cyan: #89dceb;
16-
--yellow: #f9e2af;
17-
--magenta: #cba6f7;
18-
--red: #f38ba8;
19-
--blue: #89b4fa;
206
--font-mono:
217
"JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas, monospace;
8+
9+
/* Catppuccin Latte palette (Light)*/
10+
11+
--rosewater: #dc8a78;
12+
--flamingo: #dd7878;
13+
--pink: #ea76cb;
14+
--mauve: #8839ef;
15+
--red: #d20f39;
16+
--maroon: #e64553;
17+
--peach: #fe640b;
18+
--yellow: #df8e1d;
19+
--green: #40a02b;
20+
--teal: #179299;
21+
--sky: #04a5e5;
22+
--sapphire: #209fb5;
23+
--blue: #1e66f5;
24+
--lavender: #7287fd;
25+
--text: #4c4f69;
26+
--subtext1: #5c5f77;
27+
--subtext0: #6c6f85;
28+
--overlay2: #7c7f93;
29+
--overlay1: #8c8fa1;
30+
--overlay0: #9ca0b0;
31+
--surface2: #acb0be;
32+
--surface1: #bcc0cc;
33+
--surface0: #ccd0da;
34+
--base: #eff1f5;
35+
--mantle: #e6e9ef;
36+
--crust: #dce0e8;
37+
}
38+
39+
@media (prefers-color-scheme: dark) {
40+
:root {
41+
/* Catppuccin Mocha (Dark) */
42+
--rosewater: #f5e0dc;
43+
--flamingo: #f2cdcd;
44+
--pink: #f5c2e7;
45+
--mauve: #cba6f7;
46+
--red: #f38ba8;
47+
--maroon: #eba0ac;
48+
--peach: #fab387;
49+
--yellow: #f9e2af;
50+
--green: #a6e3a1;
51+
--teal: #94e2d5;
52+
--sky: #89dceb;
53+
--sapphire: #74c7ec;
54+
--blue: #89b4fa;
55+
--lavender: #b4befe;
56+
--text: #cdd6f4;
57+
--subtext1: #bac2de;
58+
--subtext0: #a6adc8;
59+
--overlay2: #9399b2;
60+
--overlay1: #7f849c;
61+
--overlay0: #6c7086;
62+
--surface2: #585b70;
63+
--surface1: #45475a;
64+
--surface0: #313244;
65+
--base: #1e1e2e;
66+
--mantle: #181825;
67+
--crust: #11111b;
68+
}
2269
}
2370

2471
*,
@@ -106,7 +153,7 @@ button,
106153
border: none;
107154
font: inherit;
108155
text-decoration: none;
109-
background-color: var(--text);
156+
background-color: var(--blue);
110157
color: var(--base);
111158

112159
display: flex;
@@ -121,12 +168,12 @@ button,
121168

122169
&:hover {
123170
color: var(--base);
124-
background-color: var(--subtext0);
171+
background-color: color-mix(in srgb, var(--blue), var(--text) 20%);
125172
}
126173

127174
&:focus-visible {
128175
outline-offset: 3px;
129-
outline: 2px solid var(--text);
176+
outline: 2px solid var(--blue);
130177
}
131178
}
132179

‎site/index.html‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -106,13 +106,23 @@ <h3>Manual</h3>
106106

107107
<section class="demo-gif">
108108
<h2>Demo</h2>
109-
<img
110-
src="https://raw.githubusercontent.com/grega/hdi/main/demo/demo.gif"
111-
alt="Animated demo showing hdi in action"
112-
width="800"
113-
loading="lazy"
114-
/>
115-
109+
<picture>
110+
<source
111+
srcset="
112+
https://raw.githubusercontent.com/grega/hdi/main/demo/demo-latte.gif
113+
"
114+
media="(prefers-color-scheme: light)"
115+
alt="Animated demo showing hdi in action"
116+
width="800"
117+
loading="lazy"
118+
/>
119+
<img
120+
src="https://raw.githubusercontent.com/grega/hdi/main/demo/demo-mocha.gif"
121+
alt="Animated demo showing hdi in action"
122+
width="800"
123+
loading="lazy"
124+
/>
125+
</picture>
116126
<p class="demo-link">Try out the <a href="/demo">demo</a>.</p>
117127
</section>
118128

@@ -134,11 +144,11 @@ <h2>Usage</h2>
134144
$ hdi
135145
<span class="u-yellow">[hdi]</span> some-project
136146

137-
<span class="u-yellow">▸</span> <span class="u-cyan">Installation</span>
147+
<span class="u-yellow">▸</span> <span class="u-sapphire">Installation</span>
138148
<span class="u-green">▶ npm install</span>
139149
<span class="u-green">cp .env.example .env</span>
140150

141-
<span class="u-yellow">▸</span> <span class="u-cyan">Run</span>
151+
<span class="u-yellow">▸</span> <span class="u-sapphire">Run</span>
142152
<span class="u-green">npm run dev</span>
143153

144154
↑↓ navigate ⇥ sections ⏎ execute c copy q quit</code></pre>

0 commit comments

Comments
 (0)
⚡