Skip to content

Commit 71ea7c5

Browse files
Rich-HarrisRich-Harris
authored
neumorphic buttons (#229)
* neumorphic buttons * prettier * round * tweaks * tweak filename styles * apply to on-this-page dropdown * add to legacy details * active styles * fix alignment * prettier * use borders instead of box-shadow (#270)
1 parent a8e5a97 commit 71ea7c5

File tree

8 files changed

+174
-50
lines changed

8 files changed

+174
-50
lines changed

‎apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@
117117
flex-direction: column;
118118
119119
@media (min-width: 800px) {
120-
--app-controls-h: 4rem;
120+
--app-controls-h: 4.4rem;
121121
}
122122
}
123123

‎apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -215,27 +215,27 @@ export default app;`
215215
/>
216216

217217
<div class="buttons">
218-
<button class="icon" onclick={() => (zen_mode = !zen_mode)} title="fullscreen editor">
218+
<button class="raised icon" onclick={() => (zen_mode = !zen_mode)} title="fullscreen editor">
219219
{#if zen_mode}
220220
<Icon name="close" />
221221
{:else}
222222
<Icon name="maximize" />
223223
{/if}
224224
</button>
225225

226-
<button class="icon" disabled={downloading} onclick={download} title="download zip file">
226+
<button class="raised icon" disabled={downloading} onclick={download} title="download zip file">
227227
<Icon name="download" />
228228
</button>
229229

230-
<button class="icon" disabled={saving || !user} onclick={() => fork(false)} title="fork">
230+
<button class="raised icon" disabled={saving || !user} onclick={() => fork(false)} title="fork">
231231
{#if justForked}
232232
<Icon name="check" />
233233
{:else}
234234
<Icon name="git-branch" />
235235
{/if}
236236
</button>
237237

238-
<button class="icon" disabled={saving || !user} onclick={save} title="save">
238+
<button class="raised icon" disabled={saving || !user} onclick={save} title="save">
239239
{#if justSaved}
240240
<Icon name="check" />
241241
{:else}
@@ -249,7 +249,7 @@ export default app;`
249249
{#if user}
250250
<UserMenu {user} />
251251
{:else}
252-
<button class="icon" onclick={(e) => (e.preventDefault(), login())}>
252+
<button class="raised icon" onclick={(e) => (e.preventDefault(), login())}>
253253
<Icon name="log-in" />
254254
<span>&nbsp;Log in to save</span>
255255
</button>
@@ -293,7 +293,6 @@ export default app;`
293293
294294
.buttons {
295295
text-align: right;
296-
margin-right: 0.4rem;
297296
display: flex;
298297
align-items: center;
299298
gap: 0.2em;
@@ -302,7 +301,7 @@ export default app;`
302301
.icon {
303302
transform: translateY(0.1rem);
304303
display: inline-block;
305-
padding: 0.2em;
304+
padding: 0.4em;
306305
opacity: 0.7;
307306
transition: opacity 0.3s;
308307
font-family: var(--sk-font-ui);

‎apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte‎

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -101,17 +101,45 @@
101101
color: var(--sk-text-3);
102102
}
103103
104-
&::before {
104+
&::before,
105+
&::after {
105106
content: '';
106107
position: absolute;
107108
right: 0;
108-
top: calc(50% - 0.5em);
109-
width: 2rem;
110-
height: 2rem;
111-
background: url($lib/icons/chevron.svg);
112-
background-size: contain;
109+
top: 0.3rem;
110+
width: 2.4rem;
111+
height: 2.4rem;
112+
}
113+
114+
&::before {
115+
border-radius: var(--sk-border-radius);
116+
border-style: solid;
117+
border-color: var(--sk-raised-color);
118+
border-width: var(--sk-raised-width);
119+
}
120+
121+
&:hover::before {
122+
border-color: var(--sk-raised-hover-color);
123+
}
124+
125+
&:active::before {
126+
border-color: var(--sk-raised-active-color);
127+
border-width: var(--sk-raised-active-width);
128+
}
129+
130+
&::after {
131+
background: url($lib/icons/chevron.svg) 50% 50% no-repeat;
132+
background-size: 2rem;
133+
top: 0.4rem;
134+
right: 0.2rem;
113135
rotate: -90deg;
114136
transition: rotate 0.2s;
137+
transition: rotate 0.2s;
138+
}
139+
140+
&:active::after {
141+
top: 0.5rem;
142+
right: 0.1rem;
115143
}
116144
117145
h3 {
@@ -124,7 +152,7 @@
124152
}
125153
126154
label:has(:checked) {
127-
&::before {
155+
&::after {
128156
rotate: 90deg;
129157
}
130158

‎packages/site-kit/src/lib/components/Text.svelte‎

Lines changed: 52 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -90,10 +90,12 @@
9090
9191
.code-block {
9292
position: relative;
93-
box-shadow: 1px 2px 1rem hsla(0 0 0 / 0.08);
93+
background: var(--sk-back-2);
94+
border: 1px solid var(--sk-back-5);
9495
border-radius: var(--sk-border-radius);
9596
overflow: hidden;
9697
margin: 2rem 0;
98+
/* background: var(--sk-back-3); */
9799
98100
.controls {
99101
--height: 3.6rem;
@@ -102,25 +104,29 @@
102104
position: absolute;
103105
top: 0;
104106
height: var(--height);
105-
padding: 0.3rem;
107+
padding: 0.3rem 0.5rem 0.3rem 1rem;
108+
gap: 0.5rem;
106109
width: 100%;
107110
z-index: 2;
108111
justify-content: end;
109112
box-sizing: border-box;
110113
111114
&:has(.filename) {
112115
position: relative;
113-
background: var(--sk-back-4);
114116
}
115117
116118
.filename {
117119
content: attr(data-file);
118120
display: block;
121+
position: relative;
122+
top: 0.1rem;
119123
flex: 1;
120-
font-family: var(--sk-font-mono);
121-
font-size: var(--sk-font-size-code);
122-
padding: 0 1rem;
123-
color: var(--sk-text-2);
124+
font-family: var(--sk-font-ui);
125+
font-size: var(--sk-font-size-ui-small);
126+
color: var(--sk-text-4);
127+
text-overflow: ellipsis;
128+
overflow: hidden;
129+
white-space: nowrap;
124130
125131
&::after {
126132
content: attr(data-ext);
@@ -137,9 +143,9 @@
137143
appearance: none;
138144
display: flex;
139145
align-items: center;
140-
height: calc(var(--height) - 0.6rem);
146+
height: calc(var(--height) - 1rem);
141147
outline-offset: 0;
142-
padding: 0 0.4rem;
148+
padding: 0 0.6rem;
143149
144150
&::before,
145151
&::after {
@@ -175,7 +181,7 @@
175181
176182
.copy-to-clipboard {
177183
position: relative;
178-
height: calc(var(--height) - 0.6rem);
184+
height: calc(var(--height) - 1rem);
179185
aspect-ratio: 1;
180186
border-radius: var(--sk-border-radius);
181187
@@ -420,18 +426,46 @@
420426
}
421427
422428
details.legacy {
429+
&::before,
423430
&::after {
424431
content: '';
425-
background: url(../icons/chevron.svg);
426-
background-size: contain;
427432
position: absolute;
428-
right: 0.5rem;
429-
top: 0.5rem;
430-
width: 2rem;
431-
height: 2rem;
433+
right: 0.6rem;
434+
top: 0.1rem;
435+
width: 2.4rem;
436+
height: 2.4rem;
437+
pointer-events: none;
438+
}
439+
440+
&::before {
441+
border-radius: var(--sk-border-radius);
442+
border-style: solid;
443+
border-color: var(--sk-raised-color);
444+
border-width: var(--sk-raised-width);
445+
}
446+
447+
&:hover::before {
448+
border-color: var(--sk-raised-hover-color);
449+
}
450+
451+
&:has(summary:active)::before {
452+
border-color: var(--sk-raised-active-color);
453+
border-width: var(--sk-raised-active-width);
454+
}
455+
456+
&::after {
457+
background: url($lib/icons/chevron.svg) 50% 50% no-repeat;
458+
background-size: 2rem;
432459
rotate: -90deg;
433460
transition: rotate 0.2s;
434-
pointer-events: none;
461+
transition: rotate 0.2s;
462+
top: 0.2rem;
463+
right: 0.8rem;
464+
}
465+
466+
&:has(summary:active)::after {
467+
top: 0.3rem;
468+
right: 0.7rem;
435469
}
436470
437471
& > summary {
@@ -453,7 +487,7 @@
453487
position: absolute;
454488
display: flex;
455489
align-items: center;
456-
right: 3rem;
490+
right: 4rem;
457491
top: 0;
458492
height: 100%;
459493
content: 'show all';

‎packages/site-kit/src/lib/components/ThemeToggle.svelte‎

Lines changed: 41 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -38,24 +38,55 @@
3838
onDestroy(() => query?.removeEventListener('change', cb));
3939
</script>
4040

41-
<button
42-
onclick={toggle}
43-
type="button"
44-
aria-pressed={$theme.current === 'dark' ? 'true' : 'false'}
45-
aria-label={label}
46-
></button>
41+
<div class="appearance">
42+
<span class="caption">Theme</span>
43+
<button
44+
onclick={toggle}
45+
class="raised"
46+
type="button"
47+
aria-pressed={$theme.current === 'dark' ? 'true' : 'false'}
48+
aria-label={label}
49+
></button>
50+
</div>
4751

4852
<style>
4953
button {
50-
width: 2.3rem;
51-
height: 2.3rem;
54+
width: 3.2rem;
55+
aspect-ratio: 1;
5256
background: red;
53-
background: url($lib/icons/theme-light.svg) no-repeat 50% 50% / contain;
57+
background: url($lib/icons/theme-light.svg) no-repeat 50% 50% / 2.3rem 2.3rem;
5458
opacity: 0.6;
5559
5660
:global(.dark) & {
57-
background: url($lib/icons/theme-dark.svg);
61+
background-image: url($lib/icons/theme-dark.svg);
5862
opacity: 0.8;
5963
}
6064
}
65+
66+
.appearance {
67+
display: flex;
68+
align-items: center;
69+
70+
.caption {
71+
display: none;
72+
font-size: var(--sk-text-xs);
73+
line-height: 1;
74+
margin-right: 0rem;
75+
}
76+
}
77+
78+
@media (max-width: 799px) {
79+
.appearance {
80+
position: relative;
81+
display: flex;
82+
padding: 1.5rem 0;
83+
justify-content: space-between;
84+
}
85+
86+
.appearance .caption {
87+
display: block;
88+
89+
font-size: var(--sk-text-s);
90+
}
91+
}
6192
</style>

‎packages/site-kit/src/lib/markdown/renderer.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -171,11 +171,11 @@ export async function render_content_markdown(
171171
}
172172

173173
if (converted) {
174-
html += `<input class="ts-toggle" checked title="Toggle language" type="checkbox" aria-label="Toggle JS/TS">`;
174+
html += `<input class="ts-toggle raised" checked title="Toggle language" type="checkbox" aria-label="Toggle JS/TS">`;
175175
}
176176

177177
if (options.copy) {
178-
html += `<button class="copy-to-clipboard" title="Copy to clipboard" aria-label="Copy to clipboard"></button>`;
178+
html += `<button class="copy-to-clipboard raised" title="Copy to clipboard" aria-label="Copy to clipboard"></button>`;
179179
}
180180

181181
html += '</div>';
@@ -298,7 +298,7 @@ async function parse({
298298
blockquote(token) {
299299
let content = this.parser?.parse(token.tokens) ?? '';
300300
if (content.includes('[!LEGACY]')) {
301-
content = `<details class="legacy"><summary>Legacy mode</summary>${content.replace('[!LEGACY]', '')}</details>`;
301+
content = `<details class="legacy"><summary><label>Legacy mode <button class="raised"></button></label></summary>${content.replace('[!LEGACY]', '')}</details>`;
302302
}
303303
return `<blockquote>${content}</blockquote>`;
304304
}

‎packages/site-kit/src/lib/styles/base.css‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,6 @@ body {
3434
scrollbar-width: thin;
3535
scrollbar-color: var(--sk-scrollbar) transparent;
3636
-webkit-tap-highlight-color: hsla(var(--sk-theme-1-hsl), 0.1);
37-
38-
transition: 0.5s var(--quint-out);
39-
transition-property: background, background-color, background-image, border;
4037
}
4138

4239
*:focus-visible {
@@ -167,6 +164,27 @@ button > svg {
167164
stroke: currentColor !important;
168165
}
169166

167+
.raised {
168+
border-radius: var(--sk-border-radius);
169+
border-style: solid;
170+
border-color: var(--sk-raised-color);
171+
border-width: var(--sk-raised-width);
172+
173+
&:hover {
174+
border-color: var(--sk-raised-hover-color);
175+
}
176+
177+
&:active {
178+
border-color: var(--sk-raised-active-color);
179+
border-width: var(--sk-raised-active-width);
180+
}
181+
182+
&:disabled {
183+
border-color: transparent;
184+
border-width: 1px;
185+
}
186+
}
187+
170188
/* links ------------------------------------- */
171189
a {
172190
color: var(--sk-theme-1);

0 commit comments

Comments
 (0)