From 3d2b6ddc620c85e9054d6f63a5136f3aad1941b4 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 7 Oct 2024 13:36:50 -0400 Subject: [PATCH] use borders instead of box-shadow --- .../(authed)/playground/[id]/+page.svelte | 2 +- .../routes/docs/[...path]/OnThisPage.svelte | 17 ++++++++++--- .../site-kit/src/lib/components/Text.svelte | 19 +++++++++++---- .../site-kit/src/lib/markdown/renderer.ts | 2 +- packages/site-kit/src/lib/styles/base.css | 15 ++++++------ packages/site-kit/src/lib/styles/tokens.css | 24 ++++++++----------- 6 files changed, 49 insertions(+), 30 deletions(-) diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte index 0089a201cd..eb250a9963 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte +++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte @@ -117,7 +117,7 @@ flex-direction: column; @media (min-width: 800px) { - --app-controls-h: 4rem; + --app-controls-h: 4.4rem; } } diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte index d80fd95a60..a9f81ed7a5 100644 --- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte +++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte @@ -112,25 +112,36 @@ } &::before { - box-shadow: var(--sk-raised); + border-radius: var(--sk-border-radius); + border-style: solid; + border-color: var(--sk-raised-color); + border-width: var(--sk-raised-width); } &:hover::before { - box-shadow: var(--sk-raised-hover); + border-color: var(--sk-raised-hover-color); } &:active::before { - box-shadow: var(--sk-raised-active); + 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 { font-family: var(--sk-font-ui); font-size: var(--sk-font-size-ui-small); diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte index ce83034ced..2076c83573 100644 --- a/packages/site-kit/src/lib/components/Text.svelte +++ b/packages/site-kit/src/lib/components/Text.svelte @@ -431,22 +431,26 @@ content: ''; position: absolute; right: 0.6rem; - top: 0.2rem; + top: 0.1rem; width: 2.4rem; height: 2.4rem; pointer-events: none; } &::before { - box-shadow: var(--sk-raised); + border-radius: var(--sk-border-radius); + border-style: solid; + border-color: var(--sk-raised-color); + border-width: var(--sk-raised-width); } &:hover::before { - box-shadow: var(--sk-raised-hover); + border-color: var(--sk-raised-hover-color); } &:has(summary:active)::before { - box-shadow: var(--sk-raised-active); + border-color: var(--sk-raised-active-color); + border-width: var(--sk-raised-active-width); } &::after { @@ -455,6 +459,13 @@ rotate: -90deg; transition: rotate 0.2s; transition: rotate 0.2s; + top: 0.2rem; + right: 0.8rem; + } + + &:has(summary:active)::after { + top: 0.3rem; + right: 0.7rem; } & > summary { diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts index a1512b7ecb..8b993c8005 100644 --- a/packages/site-kit/src/lib/markdown/renderer.ts +++ b/packages/site-kit/src/lib/markdown/renderer.ts @@ -298,7 +298,7 @@ async function parse({ blockquote(token) { let content = this.parser?.parse(token.tokens) ?? ''; if (content.includes('[!LEGACY]')) { - content = `
Legacy mode${content.replace('[!LEGACY]', '')}
`; + content = `
${content.replace('[!LEGACY]', '')}
`; } return `
${content}
`; } diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css index a34a80f022..16f1380ad1 100644 --- a/packages/site-kit/src/lib/styles/base.css +++ b/packages/site-kit/src/lib/styles/base.css @@ -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 { @@ -169,18 +166,22 @@ button > svg { .raised { border-radius: var(--sk-border-radius); - box-shadow: var(--sk-raised); + border-style: solid; + border-color: var(--sk-raised-color); + border-width: var(--sk-raised-width); &:hover { - box-shadow: var(--sk-raised-hover); + border-color: var(--sk-raised-hover-color); } &:active { - box-shadow: var(--sk-raised-active); + border-color: var(--sk-raised-active-color); + border-width: var(--sk-raised-active-width); } &:disabled { - box-shadow: none; + border-color: transparent; + border-width: 1px; } } diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css index 6833250023..8abaf52436 100644 --- a/packages/site-kit/src/lib/styles/tokens.css +++ b/packages/site-kit/src/lib/styles/tokens.css @@ -49,6 +49,7 @@ --sk-back-3: hsla(0, 0%, 99%, 1); --sk-back-4: hsl(0, 0%, 95%); --sk-back-5: hsl(0, 0%, 92%); + --sk-back-6: hsl(0, 0%, 86%); --sk-text-1: hsla(0, 0%, 0%, 0.95); --sk-text-2: hsla(0, 0%, 0%, 0.88); @@ -86,16 +87,11 @@ --shiki-color-background: var(--sk-back-2); /* raised buttons */ - --sk-raised-highlight: hsl(0 0 100 / 0.8); - --sk-raised-highlight-active: hsl(0 0 100 / 1); - --sk-raised-shadow: hsl(0 0 0 / 0.1); - --sk-raised-shadow-active: hsl(0 0 0 / 0.15); - - --sk-raised: 1px 1px 3px var(--sk-raised-shadow), -1px -1px 3px var(--sk-raised-highlight); - --sk-raised-hover: 1px 1px 3px var(--sk-raised-shadow-active), - -1px -1px 3px var(--sk-raised-highlight-active); - --sk-raised-active: inset -1px -1px 2px var(--sk-raised-highlight-active), - inset 1px 1px 2px var(--sk-raised-shadow-active); + --sk-raised-color: var(--sk-back-4) var(--sk-back-5) var(--sk-back-5) var(--sk-back-4); + --sk-raised-width: 1px 2px 2px 1px; + --sk-raised-hover-color: var(--sk-back-5) var(--sk-back-6) var(--sk-back-6) var(--sk-back-5); + --sk-raised-active-color: var(--sk-back-6) var(--sk-back-5) var(--sk-back-5) var(--sk-back-6); + --sk-raised-active-width: 2px 1px 1px 2px; &.dark { color-scheme: dark; @@ -105,6 +101,7 @@ --sk-back-3: hsl(0 0 12); --sk-back-4: hsl(0 0 22); --sk-back-5: hsl(0 0 25); + --sk-back-6: hsl(0 0 32); --sk-back-translucent: hsla(0, 0%, 100%, 0.1); --sk-theme-1-hsl: 12, 94%, 62%; --sk-theme-2-hsl: 240, 8%, 44%; @@ -139,10 +136,9 @@ --shiki-color-background: var(--sk-back-3); /* raised buttons */ - --sk-raised-highlight: hsl(0 0 100 / 0.1); - --sk-raised-highlight-active: hsl(0 0 100 / 0.15); - --sk-raised-shadow: hsl(0 0 0 / 0.3); - --sk-raised-shadow-active: hsl(0 0 0 / 0.22); + --sk-raised-color: var(--sk-back-5) var(--sk-back-3) var(--sk-back-3) var(--sk-back-5); + --sk-raised-hover-color: var(--sk-back-6) var(--sk-back-3) var(--sk-back-3) var(--sk-back-6); + --sk-raised-active-color: var(--sk-back-3) var(--sk-back-6) var(--sk-back-6) var(--sk-back-3); } }