Skip to content

neumorphic buttons #229

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 18 commits into from
Oct 7, 2024
Merged

neumorphic buttons #229

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
badf5bf
neumorphic buttons
Rich-Harris Oct 3, 2024
50db0ce
Merge branch 'main' into button-styles
Rich-Harris Oct 3, 2024
7cfbd77
Merge branch 'main' into button-styles
Rich-Harris Oct 4, 2024
7489c7c
prettier
Rich-Harris Oct 4, 2024
e667603
Merge branch 'main' into button-styles
Rich-Harris Oct 4, 2024
56fd791
round
Rich-Harris Oct 4, 2024
57b7869
tweaks
Rich-Harris Oct 4, 2024
21182f5
Merge branch 'main' into button-styles
Rich-Harris Oct 4, 2024
f4bb2f4
Merge branch 'main' into button-styles
Rich-Harris Oct 4, 2024
9e2fbff
Merge branch 'main' into button-styles
Rich-Harris Oct 7, 2024
b6d7828
tweak filename styles
Rich-Harris Oct 7, 2024
1f2daab
apply to on-this-page dropdown
Rich-Harris Oct 7, 2024
dbeb58b
Merge branch 'main' into button-styles
Rich-Harris Oct 7, 2024
e730a84
add to legacy details
Rich-Harris Oct 7, 2024
70daa76
active styles
Rich-Harris Oct 7, 2024
d079159
fix alignment
Rich-Harris Oct 7, 2024
311b40a
prettier
Rich-Harris Oct 7, 2024
7921c9e
use borders instead of box-shadow (#270)
Rich-Harris Oct 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@
flex-direction: column;

@media (min-width: 800px) {
--app-controls-h: 4rem;
--app-controls-h: 4.4rem;
}
}

Expand Down
13 changes: 6 additions & 7 deletions apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,27 +215,27 @@ export default app;`
/>

<div class="buttons">
<button class="icon" onclick={() => (zen_mode = !zen_mode)} title="fullscreen editor">
<button class="raised icon" onclick={() => (zen_mode = !zen_mode)} title="fullscreen editor">
{#if zen_mode}
<Icon name="close" />
{:else}
<Icon name="maximize" />
{/if}
</button>

<button class="icon" disabled={downloading} onclick={download} title="download zip file">
<button class="raised icon" disabled={downloading} onclick={download} title="download zip file">
<Icon name="download" />
</button>

<button class="icon" disabled={saving || !user} onclick={() => fork(false)} title="fork">
<button class="raised icon" disabled={saving || !user} onclick={() => fork(false)} title="fork">
{#if justForked}
<Icon name="check" />
{:else}
<Icon name="git-branch" />
{/if}
</button>

<button class="icon" disabled={saving || !user} onclick={save} title="save">
<button class="raised icon" disabled={saving || !user} onclick={save} title="save">
{#if justSaved}
<Icon name="check" />
{:else}
Expand All @@ -249,7 +249,7 @@ export default app;`
{#if user}
<UserMenu {user} />
{:else}
<button class="icon" onclick={(e) => (e.preventDefault(), login())}>
<button class="raised icon" onclick={(e) => (e.preventDefault(), login())}>
<Icon name="log-in" />
<span>&nbsp;Log in to save</span>
</button>
Expand Down Expand Up @@ -293,7 +293,6 @@ export default app;`

.buttons {
text-align: right;
margin-right: 0.4rem;
display: flex;
align-items: center;
gap: 0.2em;
Expand All @@ -302,7 +301,7 @@ export default app;`
.icon {
transform: translateY(0.1rem);
display: inline-block;
padding: 0.2em;
padding: 0.4em;
opacity: 0.7;
transition: opacity 0.3s;
font-family: var(--sk-font-ui);
Expand Down
42 changes: 35 additions & 7 deletions apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,17 +101,45 @@
color: var(--sk-text-3);
}

&::before {
&::before,
&::after {
content: '';
position: absolute;
right: 0;
top: calc(50% - 0.5em);
width: 2rem;
height: 2rem;
background: url($lib/icons/chevron.svg);
background-size: contain;
top: 0.3rem;
width: 2.4rem;
height: 2.4rem;
}

&::before {
border-radius: var(--sk-border-radius);
border-style: solid;
border-color: var(--sk-raised-color);
border-width: var(--sk-raised-width);
}

&:hover::before {
border-color: var(--sk-raised-hover-color);
}

&:active::before {
border-color: var(--sk-raised-active-color);
border-width: var(--sk-raised-active-width);
}

&::after {
background: url($lib/icons/chevron.svg) 50% 50% no-repeat;
background-size: 2rem;
top: 0.4rem;
right: 0.2rem;
rotate: -90deg;
transition: rotate 0.2s;
transition: rotate 0.2s;
}

&:active::after {
top: 0.5rem;
right: 0.1rem;
}

h3 {
Expand All @@ -124,7 +152,7 @@
}

label:has(:checked) {
&::before {
&::after {
rotate: 90deg;
}

Expand Down
70 changes: 52 additions & 18 deletions packages/site-kit/src/lib/components/Text.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,10 +90,12 @@

.code-block {
position: relative;
box-shadow: 1px 2px 1rem hsla(0 0 0 / 0.08);
background: var(--sk-back-2);
border: 1px solid var(--sk-back-5);
border-radius: var(--sk-border-radius);
overflow: hidden;
margin: 2rem 0;
/* background: var(--sk-back-3); */

.controls {
--height: 3.6rem;
Expand All @@ -102,25 +104,29 @@
position: absolute;
top: 0;
height: var(--height);
padding: 0.3rem;
padding: 0.3rem 0.5rem 0.3rem 1rem;
gap: 0.5rem;
width: 100%;
z-index: 2;
justify-content: end;
box-sizing: border-box;

&:has(.filename) {
position: relative;
background: var(--sk-back-4);
}

.filename {
content: attr(data-file);
display: block;
position: relative;
top: 0.1rem;
flex: 1;
font-family: var(--sk-font-mono);
font-size: var(--sk-font-size-code);
padding: 0 1rem;
color: var(--sk-text-2);
font-family: var(--sk-font-ui);
font-size: var(--sk-font-size-ui-small);
color: var(--sk-text-4);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

&::after {
content: attr(data-ext);
Expand All @@ -137,9 +143,9 @@
appearance: none;
display: flex;
align-items: center;
height: calc(var(--height) - 0.6rem);
height: calc(var(--height) - 1rem);
outline-offset: 0;
padding: 0 0.4rem;
padding: 0 0.6rem;

&::before,
&::after {
Expand Down Expand Up @@ -175,7 +181,7 @@

.copy-to-clipboard {
position: relative;
height: calc(var(--height) - 0.6rem);
height: calc(var(--height) - 1rem);
aspect-ratio: 1;
border-radius: var(--sk-border-radius);

Expand Down Expand Up @@ -420,18 +426,46 @@
}

details.legacy {
&::before,
&::after {
content: '';
background: url(../icons/chevron.svg);
background-size: contain;
position: absolute;
right: 0.5rem;
top: 0.5rem;
width: 2rem;
height: 2rem;
right: 0.6rem;
top: 0.1rem;
width: 2.4rem;
height: 2.4rem;
pointer-events: none;
}

&::before {
border-radius: var(--sk-border-radius);
border-style: solid;
border-color: var(--sk-raised-color);
border-width: var(--sk-raised-width);
}

&:hover::before {
border-color: var(--sk-raised-hover-color);
}

&:has(summary:active)::before {
border-color: var(--sk-raised-active-color);
border-width: var(--sk-raised-active-width);
}

&::after {
background: url($lib/icons/chevron.svg) 50% 50% no-repeat;
background-size: 2rem;
rotate: -90deg;
transition: rotate 0.2s;
pointer-events: none;
transition: rotate 0.2s;
top: 0.2rem;
right: 0.8rem;
}

&:has(summary:active)::after {
top: 0.3rem;
right: 0.7rem;
}

& > summary {
Expand All @@ -453,7 +487,7 @@
position: absolute;
display: flex;
align-items: center;
right: 3rem;
right: 4rem;
top: 0;
height: 100%;
content: 'show all';
Expand Down
51 changes: 41 additions & 10 deletions packages/site-kit/src/lib/components/ThemeToggle.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,24 +38,55 @@
onDestroy(() => query?.removeEventListener('change', cb));
</script>

<button
onclick={toggle}
type="button"
aria-pressed={$theme.current === 'dark' ? 'true' : 'false'}
aria-label={label}
></button>
<div class="appearance">
<span class="caption">Theme</span>
<button
onclick={toggle}
class="raised"
type="button"
aria-pressed={$theme.current === 'dark' ? 'true' : 'false'}
aria-label={label}
></button>
</div>

<style>
button {
width: 2.3rem;
height: 2.3rem;
width: 3.2rem;
aspect-ratio: 1;
background: red;
background: url($lib/icons/theme-light.svg) no-repeat 50% 50% / contain;
background: url($lib/icons/theme-light.svg) no-repeat 50% 50% / 2.3rem 2.3rem;
opacity: 0.6;

:global(.dark) & {
background: url($lib/icons/theme-dark.svg);
background-image: url($lib/icons/theme-dark.svg);
opacity: 0.8;
}
}

.appearance {
display: flex;
align-items: center;

.caption {
display: none;
font-size: var(--sk-text-xs);
line-height: 1;
margin-right: 0rem;
}
}

@media (max-width: 799px) {
.appearance {
position: relative;
display: flex;
padding: 1.5rem 0;
justify-content: space-between;
}

.appearance .caption {
display: block;

font-size: var(--sk-text-s);
}
}
</style>
6 changes: 3 additions & 3 deletions packages/site-kit/src/lib/markdown/renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,11 +171,11 @@ export async function render_content_markdown(
}

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

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

html += '</div>';
Expand Down Expand Up @@ -298,7 +298,7 @@ async function parse({
blockquote(token) {
let content = this.parser?.parse(token.tokens) ?? '';
if (content.includes('[!LEGACY]')) {
content = `<details class="legacy"><summary>Legacy mode</summary>${content.replace('[!LEGACY]', '')}</details>`;
content = `<details class="legacy"><summary><label>Legacy mode <button class="raised"></button></label></summary>${content.replace('[!LEGACY]', '')}</details>`;
}
return `<blockquote>${content}</blockquote>`;
}
Expand Down
24 changes: 21 additions & 3 deletions packages/site-kit/src/lib/styles/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,6 @@ body {
scrollbar-width: thin;
scrollbar-color: var(--sk-scrollbar) transparent;
-webkit-tap-highlight-color: hsla(var(--sk-theme-1-hsl), 0.1);

transition: 0.5s var(--quint-out);
transition-property: background, background-color, background-image, border;
}

*:focus-visible {
Expand Down Expand Up @@ -167,6 +164,27 @@ button > svg {
stroke: currentColor !important;
}

.raised {
border-radius: var(--sk-border-radius);
border-style: solid;
border-color: var(--sk-raised-color);
border-width: var(--sk-raised-width);

&:hover {
border-color: var(--sk-raised-hover-color);
}

&:active {
border-color: var(--sk-raised-active-color);
border-width: var(--sk-raised-active-width);
}

&:disabled {
border-color: transparent;
border-width: 1px;
}
}

/* links ------------------------------------- */
a {
color: var(--sk-theme-1);
Expand Down
Loading
Loading