diff --git a/docs-app/app/components/header.gts b/docs-app/app/components/header.gts index 10a71080d..a62b1c690 100644 --- a/docs-app/app/components/header.gts +++ b/docs-app/app/components/header.gts @@ -9,18 +9,25 @@ export const TestsLink = ; @@ -36,18 +43,25 @@ export const GitHubLink = ; diff --git a/docs-app/app/components/setup.gts b/docs-app/app/components/setup.gts index 81372b196..8d642a158 100644 --- a/docs-app/app/components/setup.gts +++ b/docs-app/app/components/setup.gts @@ -4,6 +4,7 @@ import { Link } from '@universal-ember/docs-support'; import type { TOC } from '@ember/component/template-only'; +/** Install / copy-code instructions with package-manager tabs. */ function dropExtension(name: string | undefined) { if (!name) return; @@ -41,79 +42,183 @@ export const SetupInstructions: TOC<{ since?: string; }; }> = ; diff --git a/docs-app/app/components/tabs.gts b/docs-app/app/components/tabs.gts index 8d056a170..40e00d2db 100644 --- a/docs-app/app/components/tabs.gts +++ b/docs-app/app/components/tabs.gts @@ -1,6 +1,6 @@ /** -Styled tabs for documentation -*/ + * Styled tabs for documentation demos + */ import { type ButtonType, @@ -27,24 +27,41 @@ const StyledButton: TOC<{ ; @@ -60,20 +77,16 @@ const StyledContent: TOC<{ ; @@ -145,12 +158,31 @@ export const Tabs: TOC<{ ; diff --git a/docs-app/app/routes/application.ts b/docs-app/app/routes/application.ts index 90677cacf..279656834 100644 --- a/docs-app/app/routes/application.ts +++ b/docs-app/app/routes/application.ts @@ -187,3 +187,4 @@ export default class Application extends Route { ]); } } + diff --git a/docs-app/app/styles/app.css b/docs-app/app/styles/app.css index d73e42132..3fd858f63 100644 --- a/docs-app/app/styles/app.css +++ b/docs-app/app/styles/app.css @@ -54,9 +54,9 @@ ul { */ :root { --font-sans: - "InterVariable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", - "Segoe UI Symbol", "Noto Color Emoji"; - --font-display: "Helvetica", "Arial", sans-serif; + "Inter", "InterVariable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --font-display: var(--font-sans); --max-width-8xl: 88rem; } @@ -87,10 +87,6 @@ body { padding-bottom: 0; } -.prose .featured-demo input { - color: black; -} - /* * TypeDoc overrides */ @@ -109,11 +105,153 @@ body { * Theme variables */ .theme-light { - --color-page-background: white; - --color-foreground: black; + --color-page-background: var(--doc-bg, white); + --color-foreground: var(--doc-text-1, black); } .theme-dark { - --color-page-background: #252525; - --color-foreground: white; + --color-page-background: var(--doc-bg, #1b1b1f); + --color-foreground: var(--doc-text-1, #dfdfd6); +} + +/* + * SetupInstructions spacing also lives in setup.gts so live previews + * always get it. Keep a matching copy here as a fallback. + */ +[data-setup] { + display: flex; + flex-direction: column; + gap: 1.25rem; + margin: 1.25rem 0 1.75rem; +} + +[data-setup-group].ember-primitives__tabs, +.ember-primitives__tabs[data-setup-group] { + display: flex; + flex-direction: column; + margin: 0; + border: 1px solid var(--doc-border); + border-radius: var(--doc-radius-md); + background: var(--doc-bg-alt); + overflow: hidden; +} + +[data-setup-group] > .ember-primitives__tabs__label { + margin: 0; + padding: 0.85rem 1.15rem 0.35rem; + font-family: var(--font-sans); + font-size: 0.75rem; + font-weight: 600; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--doc-text-3); +} + +[data-setup-group] > [role="tablist"], +[data-setup-group] > .ember-primitives__tabs__tablist { + display: flex; + flex-wrap: wrap; + gap: 0.15rem; + width: 100%; + min-width: 0; + margin: 0; + padding: 0.15rem 0.85rem 0; + border: 0; + border-bottom: 1px solid var(--doc-border); + background: transparent; + border-radius: 0; +} + +[data-setup-group] [role="tab"] { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + margin: 0; + padding: 0.55rem 0.9rem 0.75rem; + border: 0; + border-radius: 0; + background: transparent !important; + color: var(--doc-text-3); + font-family: var(--font-sans); + font-size: 0.8125rem; + font-weight: 500; + line-height: 1.2; + cursor: pointer; + box-shadow: none !important; + transition: color 0.12s ease; +} + +[data-setup-group] [role="tab"]:hover { + color: var(--doc-text-1); + background: transparent !important; +} + +[data-setup-group] [role="tab"][aria-selected="true"] { + color: var(--doc-brand-1); + background: transparent !important; + font-weight: 600; + box-shadow: none !important; +} + +[data-setup-group] [role="tab"][aria-selected="true"]::after { + content: ""; + position: absolute; + left: 0.55rem; + right: 0.55rem; + bottom: -1px; + height: 2px; + border-radius: 2px 2px 0 0; + background: var(--doc-brand-1); +} + +[data-setup-group] > .ember-primitives__tabs__tabpanel { + min-width: 0; + padding: 0; +} + +[data-setup-group] [role="tabpanel"] { + display: block; + margin: 0; + padding: 1.1rem 1.15rem !important; + border: 0 !important; + border-radius: 0 !important; + background: transparent !important; + color: var(--doc-text-1); + font-family: var(--font-mono); + font-size: 0.875rem; + line-height: 1.6; + letter-spacing: -0.01em; + overflow-x: auto; +} + +[data-setup-group] [role="tabpanel"] code { + font: inherit; + color: inherit; + background: transparent; + padding: 0; + border-radius: 0; +} + +[data-setup-group] [role="tabpanel"] a { + color: var(--doc-brand-1); + font-family: var(--font-sans); + font-weight: 500; + text-decoration: none; +} + +[data-setup-group] [role="tabpanel"] a:hover { + text-decoration: underline; + text-underline-offset: 0.18em; +} + +[data-setup-since] { + margin: 0; + padding: 0 0.15rem; + font-size: 0.875rem; + color: var(--doc-text-2); +} + +.prose .featured-demo input { + color: var(--doc-text-1); } diff --git a/docs-app/app/templates/3-ui/accordion.gjs.md b/docs-app/app/templates/3-ui/accordion.gjs.md index d4d759013..a0026b285 100644 --- a/docs-app/app/templates/3-ui/accordion.gjs.md +++ b/docs-app/app/templates/3-ui/accordion.gjs.md @@ -17,73 +17,68 @@ Like with the component, `
` and `` can be styled with CSS. // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#name @@ -93,6 +88,88 @@ Like with the component, `
` and `` can be styled with CSS. +
+ +```gjs live preview +import { Accordion } from 'ember-primitives'; + + +``` + +
+ ## Examples
diff --git a/docs-app/app/templates/3-ui/avatar.gjs.md b/docs-app/app/templates/3-ui/avatar.gjs.md index 7442672d7..b3c186b34 100644 --- a/docs-app/app/templates/3-ui/avatar.gjs.md +++ b/docs-app/app/templates/3-ui/avatar.gjs.md @@ -10,52 +10,48 @@ import { Avatar } from 'ember-primitives'; diff --git a/docs-app/app/templates/3-ui/breadcrumb.gjs.md b/docs-app/app/templates/3-ui/breadcrumb.gjs.md index 8aa9ceb50..efe0a5a07 100644 --- a/docs-app/app/templates/3-ui/breadcrumb.gjs.md +++ b/docs-app/app/templates/3-ui/breadcrumb.gjs.md @@ -40,16 +40,15 @@ import { Breadcrumb, Menu, PortalTargets } from 'ember-primitives'; diff --git a/docs-app/app/templates/3-ui/heading.gjs.md b/docs-app/app/templates/3-ui/heading.gjs.md index ebdb62c91..d1232a51f 100644 --- a/docs-app/app/templates/3-ui/heading.gjs.md +++ b/docs-app/app/templates/3-ui/heading.gjs.md @@ -49,9 +49,11 @@ import { InViewport } from 'ember-primitives/viewport'; ``` diff --git a/docs-app/app/templates/3-ui/one-time-password/otp.gjs.md b/docs-app/app/templates/3-ui/one-time-password/otp.gjs.md index 04746d384..ae52894ff 100644 --- a/docs-app/app/templates/3-ui/one-time-password/otp.gjs.md +++ b/docs-app/app/templates/3-ui/one-time-password/otp.gjs.md @@ -18,35 +18,91 @@ import { OTP } from 'ember-primitives'; import { cell } from 'ember-resources'; const submittedCode = cell(); -const handleSubmit = ({ code }) => submittedCode.current = code; +const handleSubmit = ({ code }) => (submittedCode.current = code); diff --git a/docs-app/app/templates/3-ui/progress.gjs.md b/docs-app/app/templates/3-ui/progress.gjs.md index 810348115..7a57ef4ec 100644 --- a/docs-app/app/templates/3-ui/progress.gjs.md +++ b/docs-app/app/templates/3-ui/progress.gjs.md @@ -13,55 +13,54 @@ Before reaching for this component, consider if the [native ``](https:
```gjs live preview -import { Progress, Shadowed } from 'ember-primitives'; +import { Progress } from 'ember-primitives'; import { cell, resource } from 'ember-resources'; -const randomValue = resource(({on}) => { - let value = cell(randomPercent()); - let interval = setInterval(() => value.current = randomPercent(), 3000); +const progress = resource(({ on }) => { + let value = cell(12); + let interval = setInterval(() => { + value.current = value.current >= 100 ? 8 : value.current + 14; + }, 900); on.cleanup(() => clearInterval(interval)); - return value; -}); - -const randomPercent = () => Math.random() * 100; -const translate = (v) => -(100 - v); +}); ``` @@ -70,68 +69,74 @@ const translate = (v) => -(100 - v);
```gjs live preview -import { Progress, Shadowed } from 'ember-primitives'; +import { Progress } from 'ember-primitives'; import { cell, resource } from 'ember-resources'; -const randomValue = resource(({on}) => { - let value = cell(randomPercent()); - let interval = setInterval(() => value.current = randomPercent(), 3000); +const progress = resource(({ on }) => { + let value = cell(35); + let interval = setInterval(() => { + value.current = value.current >= 100 ? 10 : value.current + 12; + }, 1100); on.cleanup(() => clearInterval(interval)); - return value; -}); +}); -const randomPercent = () => Math.random() * 100; -const r = 60; +const r = 54; const size = Math.PI * 2 * r; -const toOffset = (x) => ((100 - x) / 100) * size; - -const RandomProgress = -; +const toOffset = (percent) => ((100 - percent) / 100) * size; ``` @@ -171,7 +176,7 @@ import { Progress } from 'ember-primitives'; text can go out here, too - + ``` diff --git a/docs-app/app/templates/3-ui/rating.gjs.md b/docs-app/app/templates/3-ui/rating.gjs.md index 941c401b8..5b9533dc2 100644 --- a/docs-app/app/templates/3-ui/rating.gjs.md +++ b/docs-app/app/templates/3-ui/rating.gjs.md @@ -14,21 +14,34 @@ import { cell } from 'ember-resources'; const capturedValue = cell(2); diff --git a/docs-app/app/templates/3-ui/switch.gjs.md b/docs-app/app/templates/3-ui/switch.gjs.md index d9c34c324..d53d82b89 100644 --- a/docs-app/app/templates/3-ui/switch.gjs.md +++ b/docs-app/app/templates/3-ui/switch.gjs.md @@ -4,6 +4,73 @@ The Switch component is a user interface element used for toggling between two s `` can be used in any design system. +
+ +```gjs live preview +import { Switch } from 'ember-primitives/components/switch'; + + +``` + +
+ ## Examples

Draggable

 diff --git a/docs-app/app/templates/3-ui/tabs.gjs.md b/docs-app/app/templates/3-ui/tabs.gjs.md index 0cf50c618..56b58395e 100644 --- a/docs-app/app/templates/3-ui/tabs.gjs.md +++ b/docs-app/app/templates/3-ui/tabs.gjs.md @@ -21,57 +21,79 @@ A set of layered sections of content, known as tab panels, that are displayed on import { Tabs } from 'ember-primitives/components/tabs'; diff --git a/docs-app/app/templates/3-ui/tabs/bottom-tabs.gjs b/docs-app/app/templates/3-ui/tabs/bottom-tabs.gjs index 916919e4a..40592565a 100644 --- a/docs-app/app/templates/3-ui/tabs/bottom-tabs.gjs +++ b/docs-app/app/templates/3-ui/tabs/bottom-tabs.gjs @@ -1,71 +1,84 @@ import { Tabs } from 'ember-primitives/components/tabs'; export const BottomTabs = ; diff --git a/packages/docs-support/src/page-layout.gts b/packages/docs-support/src/page-layout.gts index 34de34e02..876beb730 100644 --- a/packages/docs-support/src/page-layout.gts +++ b/packages/docs-support/src/page-layout.gts @@ -44,38 +44,54 @@ export const PageLoader: TOC<{
@@ -175,42 +191,39 @@ export const PageLayout: TOC<{ position: sticky; top: 0; z-index: 50; - transition: all 0.5s; - box-shadow: 0 4px 6px -1px rgb(15 23 42 / 0.05); - background-color: rgb(255 255 255 / 0.95); - } - - :is(html[style*="color-scheme: dark"]) .page-header { + min-height: var(--doc-nav-height); + transition: + background-color 0.2s ease, + border-color 0.2s ease; box-shadow: none; - background-color: rgb(2 2 14 / 0.95); + background-color: color-mix(in srgb, var(--doc-bg) 88%, transparent); + border-bottom: 1px solid var(--doc-divider); + backdrop-filter: blur(10px); } - :is(html[style*="color-scheme: dark"]) .page-header.is-scrolled { - backdrop-filter: blur(12px); - } - - @supports (backdrop-filter: blur(0)) { - :is(html[style*="color-scheme: dark"]) .page-header.is-scrolled { - background-color: rgb(2 2 14 / 0.75); - } + .page-header.is-scrolled { + background-color: color-mix(in srgb, var(--doc-bg-elv) 86%, transparent); } .page-header__inner { display: flex; flex: none; - flex-wrap: wrap; + flex-wrap: nowrap; align-items: center; justify-content: space-between; - padding-top: 1rem; - padding-bottom: 1rem; + min-height: var(--doc-nav-height); + padding-top: 0.5rem; + padding-bottom: 0.5rem; + gap: 1rem; } .page-header__toggle { display: flex; - margin-right: 1.5rem; + margin-right: 0.25rem; + flex-shrink: 0; } - @media (min-width: 1024px) { + @media (min-width: 960px) { .page-header__toggle { display: none; } @@ -222,32 +235,45 @@ export const PageLayout: TOC<{ align-items: center; flex-grow: 1; flex-basis: 0; + min-width: 0; + } + + .page-header__logo a { + display: inline-flex; + align-items: center; + text-decoration: none; } .page-content { flex: 1 1 auto; - max-width: 42rem; + width: 100%; + max-width: var(--doc-content-max); min-width: 0; - padding-top: 1rem; - padding-bottom: 1rem; - } - - @media (min-width: 1024px) { - .page-content { - max-width: none; - } + padding: var(--doc-content-pad-y) var(--doc-content-pad-x) 6rem; } .edit-link-container { display: flex; justify-content: flex-end; - padding-top: 1.5rem; - margin-top: 3rem; - border-top: 1px solid #e2e8f0; + align-items: center; + padding-top: 1.35rem; + margin-top: 3.25rem; + border-top: 1px solid var(--doc-divider); } - :is(html[style*="color-scheme: dark"]) .edit-link-container { - border-color: #1e293b; + .edit-link-container .styled-link, + .edit-link-container a { + font-size: 0.8125rem; + font-weight: 500; + color: var(--doc-text-3); + text-decoration: none; + box-shadow: none; + transition: color 0.12s ease; + } + + .edit-link-container .styled-link:hover, + .edit-link-container a:hover { + color: var(--doc-brand-1); } ; @@ -268,20 +294,15 @@ export const TopRight: TOC<{ Blocks: { default: [] } }> = diff --git a/packages/docs-support/src/site-css/components.css b/packages/docs-support/src/site-css/components.css index 7f721d07b..7d2830213 100644 --- a/packages/docs-support/src/site-css/components.css +++ b/packages/docs-support/src/site-css/components.css @@ -1,7 +1,7 @@ /* Lightbulb icon (callout) */ .lightbulb-icon { - --icon-foreground: #0f172a; - --icon-background: white; + --icon-foreground: var(--doc-text-1); + --icon-background: var(--doc-bg); } .icon-bg-fill { @@ -34,29 +34,44 @@ } .prose details { - padding-left: 1.5rem; - padding-right: 1.5rem; - padding-top: 0.75rem; - padding-bottom: 0.75rem; + padding: 0.95rem 1.15rem; margin-bottom: 1.5rem; margin-top: 0; - border: 1px solid #e2e8f0; - border-radius: 0.75rem; + border: 1px solid var(--doc-border); + border-radius: var(--doc-radius-sm); + background-color: var(--doc-bg-soft); +} - :is(html[style*="color-scheme: dark"]) & { - border-color: #1e293b; - } +.prose details[open] { + background-color: color-mix(in srgb, var(--doc-bg-soft) 80%, var(--doc-bg)); } .prose summary { font-weight: 500; - cursor: default; + cursor: pointer; user-select: none; - color: #0f172a; + color: var(--doc-text-1); + list-style: none; +} + +.prose summary::-webkit-details-marker { + display: none; +} + +.prose summary::before { + content: ""; + display: inline-block; + width: 0.4rem; + height: 0.4rem; + margin-right: 0.55rem; + border-right: 1.5px solid var(--doc-text-3); + border-bottom: 1.5px solid var(--doc-text-3); + transform: rotate(-45deg) translateY(-1px); + transition: transform 0.15s ease; +} - :is(html[style*="color-scheme: dark"]) & { - color: #e2e8f0; - } +.prose details[open] > summary::before { + transform: rotate(45deg) translateY(-1px); } .prose summary h1, @@ -64,6 +79,9 @@ .prose summary h3 { display: inline; margin: 0; + border: 0; + padding: 0; + font-size: inherit; } .prose pre { @@ -72,32 +90,20 @@ /* Styled links used in Links component */ .styled-link { - --link-prose-background: #fff; - --link-prose-underline: #7dd3fc; - --link-prose-underline-size: 4px; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 600; - text-decoration: none; - box-shadow: - inset 0 -2px 0 0 var(--link-prose-background), - inset 0 calc(-1 * (var(--link-prose-underline-size) + 2px)) 0 0 var(--link-prose-underline); + line-height: 1.4; + font-weight: 500; + color: var(--doc-brand-1); + text-decoration: underline; + text-decoration-color: color-mix(in srgb, var(--doc-brand-1) 35%, transparent); + text-decoration-thickness: 1px; + text-underline-offset: 0.18em; + transition: + color 0.12s ease, + text-decoration-color 0.12s ease; } .styled-link:hover { - --link-prose-underline-size: 6px; -} - -:is(html[style*="color-scheme: dark"]) .styled-link { - --link-prose-background: #0f172a; - --link-prose-underline: #075985; - - color: #38bdf8; - box-shadow: inset 0 calc(-1 * var(--link-prose-underline-size, 2px)) 0 0 - var(--link-prose-underline); -} - -:is(html[style*="color-scheme: dark"]) .styled-link:hover { - --link-prose-underline-size: 6px; + color: var(--doc-brand-2); + text-decoration-color: var(--doc-brand-1); } diff --git a/packages/docs-support/src/site-css/featured-demo.css b/packages/docs-support/src/site-css/featured-demo.css index 6aa1a7a68..b3ecdd309 100644 --- a/packages/docs-support/src/site-css/featured-demo.css +++ b/packages/docs-support/src/site-css/featured-demo.css @@ -2,14 +2,30 @@ .featured-demo .repl-sdk__demo { width: 100%; max-width: 100%; - padding: 5rem; - background: linear-gradient(to right, #7c3aed, #4f46e5); - border-radius: 0.75rem; - max-height: 20rem; - color: #f8fafc; + min-height: 7.5rem; + padding: 1.5rem 1.5rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: stretch; + background: var(--doc-bg-soft); + border: 1px solid var(--doc-border); + border-radius: var(--doc-radius-md); + max-height: 22rem; + overflow: auto; + color: var(--doc-text-1); } .featured-demo.auto-height .glimdown-render, .featured-demo.auto-height .repl-sdk__demo { max-height: none; } + +/* Shared demo chrome used inside live previews */ +.featured-demo .demo, +.prose .demo { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.85rem; +} diff --git a/packages/docs-support/src/site-css/prose.css b/packages/docs-support/src/site-css/prose.css index d5ea0a382..2ea3b49d6 100644 --- a/packages/docs-support/src/site-css/prose.css +++ b/packages/docs-support/src/site-css/prose.css @@ -1,143 +1,124 @@ /** - * Prose typography styles - * Replaces @tailwindcss/typography plugin + * Prose typography styles — docs-support tokens */ .prose { - --prose-body: #334155; - --prose-headings: #0f172a; - --prose-lead: #64748b; - --prose-links: #0f172a; - --prose-bold: #0f172a; - --prose-counters: #64748b; - --prose-bullets: #94a3b8; - --prose-hr: #e2e8f0; - --prose-quotes: #0f172a; - --prose-quote-borders: #e2e8f0; - --prose-captions: #64748b; - --prose-kbd: #0f172a; - --prose-kbd-shadows: 17 24 39; - --prose-code: #0f172a; - --prose-pre-code: #e2e8f0; - --prose-pre-bg: #02020e; - --prose-th-borders: #cbd5e1; - --prose-td-borders: #e2e8f0; - --prose-background: #fff; - --prose-underline: #7dd3fc; - --prose-underline-size: 2px; + --prose-body: var(--doc-text-1); + --prose-headings: var(--doc-text-1); + --prose-lead: var(--doc-text-2); + --prose-links: var(--doc-brand-1); + --prose-bold: var(--doc-text-1); + --prose-counters: var(--doc-text-3); + --prose-bullets: var(--doc-text-3); + --prose-hr: var(--doc-divider); + --prose-quotes: var(--doc-text-2); + --prose-quote-borders: var(--doc-brand-1); + --prose-captions: var(--doc-text-3); + --prose-kbd: var(--doc-text-1); + --prose-code: var(--doc-brand-1); + --prose-pre-code: var(--doc-text-2); + --prose-pre-bg: var(--doc-bg-alt); + --prose-th-borders: var(--doc-divider); + --prose-td-borders: var(--doc-divider); + --prose-background: var(--doc-bg); color: var(--prose-body); max-width: none; font-size: 1rem; line-height: 1.75; -} - -:is(html[style*="color-scheme: dark"]) .prose { - --prose-body: #94a3b8; - --prose-headings: #f8fafc; - --prose-lead: #94a3b8; - --prose-links: #f8fafc; - --prose-bold: #f8fafc; - --prose-counters: #94a3b8; - --prose-bullets: #475569; - --prose-hr: #1e293b; - --prose-quotes: #f1f5f9; - --prose-quote-borders: #1e293b; - --prose-captions: #94a3b8; - --prose-kbd: #f8fafc; - --prose-code: #f8fafc; - --prose-pre-code: #e2e8f0; - --prose-pre-bg: rgb(30 41 59 / 0.6); - --prose-th-borders: #475569; - --prose-td-borders: #1e293b; - --prose-background: #0f172a; - --prose-underline: #075985; - --prose-underline-size: 2px; - - color: #94a3b8; + letter-spacing: -0.011em; } /* Headings */ .prose :where(h1, h2, h3, h4, h5, h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--prose-headings); - font-weight: 400; - font-family: var(--font-display, "Helvetica", "Arial", sans-serif); - display: inline-block; - scroll-margin-top: 7rem; + font-weight: 600; + font-family: var(--font-sans); + display: block; + scroll-margin-top: calc(var(--doc-nav-height) + 1.5rem); + letter-spacing: -0.02em; + text-wrap: balance; } -@media (min-width: 1024px) { - .prose :where(h1, h2, h3, h4, h5, h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - scroll-margin-top: 8.5rem; - } +.prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + font-size: 2.125rem; + line-height: 1.2; + font-weight: 700; + letter-spacing: -0.03em; + margin-top: 0; + margin-bottom: 1.15rem; } -.prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - font-size: 1.875rem; - line-height: 2.25rem; +.prose :where(h1 + p):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + color: var(--doc-text-2); + font-size: 1.0625rem; + line-height: 1.7; margin-top: 0; - margin-bottom: 0.875em; + margin-bottom: 1.75rem; } .prose :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - font-size: 1.5em; - margin-top: 2em; - margin-bottom: 1em; - line-height: 1.333; + font-size: 1.3125rem; + margin-top: 2.75rem; + margin-bottom: 0.9rem; + line-height: 1.35; + padding-top: 1.5rem; + border-top: 1px solid var(--doc-divider); +} + +.prose :where(h1 + * + h2):not(:where([class~="not-prose"], [class~="not-prose"] *)), +.prose :where(h1 + h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + margin-top: 2rem; + padding-top: 0; + border-top: none; } .prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - font-size: 1.25em; - margin-top: 1.6em; - margin-bottom: 0.6em; - line-height: 1.6; + font-size: 1.0625rem; + margin-top: 2rem; + margin-bottom: 0.65rem; + line-height: 1.45; + letter-spacing: -0.015em; } .prose :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + font-size: 0.9375rem; margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.5; + color: var(--doc-text-2); } /* Paragraphs */ .prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - margin-top: 1.25em; - margin-bottom: 1.25em; + margin-top: 1.1em; + margin-bottom: 1.1em; } -/* Lead text */ .prose :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--prose-lead); - font-size: 1.25em; - line-height: 1.6; - margin-top: 1.2em; - margin-bottom: 1.2em; + font-size: 1.1875em; + line-height: 1.65; + margin-top: 1.1em; + margin-bottom: 1.35em; } -/* Links */ +/* Links — quiet by default, clear on hover */ .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--prose-links); - font-weight: 600; - text-decoration: none; - box-shadow: - inset 0 -2px 0 0 var(--prose-background), - inset 0 calc(-1 * (var(--prose-underline-size) + 2px)) 0 0 var(--prose-underline); + font-weight: 500; + text-decoration: underline; + text-decoration-color: color-mix(in srgb, var(--doc-brand-1) 35%, transparent); + text-decoration-thickness: 1px; + text-underline-offset: 0.18em; + transition: + color 0.12s ease, + text-decoration-color 0.12s ease; } .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)):hover { - --prose-underline-size: 3px; -} - -:is(html[style*="color-scheme: dark"]) - .prose - :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - color: #38bdf8; -} - -:is(html[style*="color-scheme: dark"]) - .prose - :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)):hover { - --prose-underline-size: 6px; + color: var(--doc-brand-2); + text-decoration-color: var(--doc-brand-1); } /* Bold */ @@ -149,21 +130,27 @@ /* Lists */ .prose :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: decimal; - margin-top: 1.25em; - margin-bottom: 1.25em; - padding-left: 1.625em; + margin-top: 1.15em; + margin-bottom: 1.35em; + padding-left: 1.35em; } .prose :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: disc; - margin-top: 1.25em; - margin-bottom: 1.25em; - padding-left: 1.625em; + margin-top: 1.15em; + margin-bottom: 1.35em; + padding-left: 1.35em; } .prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - margin-top: 0.5em; - margin-bottom: 0.5em; + margin-top: 0.4em; + margin-bottom: 0.4em; + padding-left: 0.2em; +} + +.prose :where(li > ul, li > ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + margin-top: 0.4em; + margin-bottom: 0.4em; } .prose :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker { @@ -176,63 +163,49 @@ /* Blockquotes */ .prose :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - font-weight: 500; - font-style: italic; + font-weight: 400; + font-style: normal; color: var(--prose-quotes); - border-left: 0.25rem solid var(--prose-quote-borders); - margin-top: 1.6em; - margin-bottom: 1.6em; - padding-left: 1em; + border-left: 2px solid var(--doc-brand-1); + margin-top: 1.75em; + margin-bottom: 1.75em; + padding: 0.15em 0 0.15em 1.1em; quotes: "\201C" "\201D" "\2018" "\2019"; } /* Horizontal rules */ .prose :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - border-color: var(--prose-hr); - border-top-width: 1px; - margin-top: 3em; - margin-bottom: 3em; + border: 0; + border-top: 1px solid var(--prose-hr); + margin-top: 2.75em; + margin-bottom: 2.75em; } -/* Code */ +/* Inline code */ .prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--prose-code); - font-weight: 600; + font-weight: 500; font-size: 0.875em; - font-family: - ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", - monospace; -} - -:is(html[style*="color-scheme: dark"]) - .prose - :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - color: #f8fafc; + font-family: var(--font-mono); + background-color: var(--doc-brand-soft); + padding: 0.16em 0.38em; + border-radius: var(--doc-radius-xs); } -/* Pre (code blocks) */ +/* Pre (code blocks) — beat highlighter theme backgrounds */ .prose :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--prose-pre-code); - background-color: var(--prose-pre-bg); + background-color: var(--prose-pre-bg) !important; overflow-x: auto; font-weight: 400; font-size: 0.875em; - line-height: 1.714; - margin-top: 1.714em; - margin-bottom: 1.714em; - border-radius: 0.75rem; - padding: 0.857em 1.143em; - box-shadow: - 0 10px 15px -3px rgb(0 0 0 / 0.1), - 0 4px 6px -4px rgb(0 0 0 / 0.1); -} - -:is(html[style*="color-scheme: dark"]) - .prose - :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - background-color: rgb(30 41 59 / 0.6); + line-height: 1.7; + margin-top: 1.35em; + margin-bottom: 1.75em; + border-radius: var(--doc-radius-md); + padding: 1.05rem 1.2rem; + border: 1px solid var(--doc-border); box-shadow: none; - outline: 1px solid rgb(203 213 225 / 0.1); } .prose :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { @@ -247,35 +220,52 @@ line-height: inherit; } +/* Keyboard */ +.prose :where(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + font-family: var(--font-sans); + font-size: 0.8125em; + font-weight: 500; + color: var(--doc-text-1); + background: var(--doc-bg-soft); + border: 1px solid var(--doc-border); + border-radius: var(--doc-radius-xs); + padding: 0.15em 0.4em; + box-shadow: 0 1px 0 var(--doc-border); +} + /* Tables */ .prose :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) { width: 100%; table-layout: auto; text-align: left; - margin-top: 2em; + margin-top: 1.75em; margin-bottom: 2em; - font-size: 0.875em; - line-height: 1.714; + font-size: 0.9375em; + line-height: 1.6; + border-collapse: collapse; + overflow: hidden; + border: 1px solid var(--doc-border); + border-radius: var(--doc-radius-sm); } .prose :where(thead):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - border-bottom-width: 1px; - border-bottom-color: var(--prose-th-borders); + border-bottom: 1px solid var(--prose-th-borders); + background: var(--doc-bg-soft); } .prose :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - color: var(--prose-headings); + color: var(--doc-text-2); font-weight: 600; + font-size: 0.75rem; + letter-spacing: 0.04em; + text-transform: uppercase; vertical-align: bottom; - padding-right: 0.571em; - padding-bottom: 0.571em; - padding-left: 0.571em; + padding: 0.8em 1em; display: table-cell; } .prose :where(tbody tr):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - border-bottom-width: 1px; - border-bottom-color: var(--prose-td-borders); + border-bottom: 1px solid var(--prose-td-borders); } .prose :where(tbody tr:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { @@ -283,12 +273,11 @@ } .prose :where(tbody td):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - vertical-align: baseline; + vertical-align: top; } .prose :where(tfoot):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - border-top-width: 1px; - border-top-color: var(--prose-th-borders); + border-top: 1px solid var(--prose-th-borders); } .prose :where(tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) { @@ -297,7 +286,7 @@ .prose :where(th, td):not(:where([class~="not-prose"], [class~="not-prose"] *)) { text-align: left; - padding: 0.571em; + padding: 0.8em 1em; } /* Figures and captions */ @@ -309,12 +298,13 @@ .prose :where(figcaption):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--prose-captions); font-size: 0.875em; - line-height: 1.428; - margin-top: 0.857em; + line-height: 1.45; + margin-top: 0.75em; } /* Images and media */ .prose :where(img, video):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; + border-radius: var(--doc-radius-sm); } diff --git a/packages/docs-support/src/site-css/shell.css b/packages/docs-support/src/site-css/shell.css index 2c821c4c1..ee7a264c8 100644 --- a/packages/docs-support/src/site-css/shell.css +++ b/packages/docs-support/src/site-css/shell.css @@ -2,9 +2,6 @@ height: 100dvh; overflow: auto !important; - /** - * Set our theme-based background colors - */ .mobile-menu__tray, .mobile-menu-wrapper__content { background: transparent; @@ -12,31 +9,20 @@ aside, aside nav { - background: white; - - :is(html[style*="color-scheme: dark"]) & { - background: #02020e; - } + background: transparent; } - /** - * Layout - */ .outer-content { - max-width: 80rem; - padding-left: 0.5rem; - padding-right: 0.5rem; + width: 100%; + max-width: none; + padding-left: 1.25rem; + padding-right: 1.5rem; display: grid; - gap: 0.5rem; - - @media (min-width: 1024px) { - padding-left: 2rem; - padding-right: 2rem; - } + gap: 0; @media (min-width: 1280px) { - padding-left: 3rem; - padding-right: 3rem; + padding-left: 1.75rem; + padding-right: 2.25rem; } } @@ -44,42 +30,47 @@ .outer-content { display: grid; grid-auto-flow: column; - grid-template-columns: 300px 1fr; - margin: 0 auto; + grid-template-columns: var(--doc-sidebar-width) minmax(0, 1fr); + margin: 0; + align-items: start; + column-gap: 0; aside { - margin-top: 1.5rem; + margin-top: 0; overflow: auto; - max-height: calc(100dvh - 80px); - padding-bottom: 80px; + max-height: calc(100dvh - var(--doc-nav-height)); + padding: var(--doc-sidebar-pad-y) var(--doc-sidebar-pad-x) 5rem 0.1rem; position: sticky; - top: 92px; + top: var(--doc-nav-height); + border-right: 1px solid var(--doc-divider); + background: var(--doc-sidebar-bg); + scrollbar-gutter: stable; } } header .outer-content { display: flex; + max-width: none; + gap: 1rem; + align-items: center; } } - /** - * Mobile-only visible - */ .mobile-menu__tray aside { height: 100dvh; + padding: 1.25rem 1.35rem; + background: var(--doc-bg); + border-right: none; } - /** - * Spacing - */ .mobile-menu__tray { overflow-x: hidden; nav { - padding: 1rem; + padding: 0; ul { - padding-left: 0.5rem; + padding-left: 0; list-style: none; line-height: 1.75rem; } @@ -89,26 +80,33 @@ header button.mobile-menu__toggle { padding: 0.25rem 0.5rem; - width: 48px; + width: 44px; height: 44px; display: inline-flex; align-self: center; align-items: center; justify-content: center; margin: 0; + color: var(--doc-text-2); + border-radius: var(--doc-radius-sm); +} + +header button.mobile-menu__toggle:hover { + color: var(--doc-text-1); + background: var(--doc-brand-soft); } -@media (min-width: 800px) { +@media (min-width: 960px) { header button.mobile-menu__toggle { display: none; } } -@media (max-width: 800px) { +@media (max-width: 959px) { .mobile-menu-wrapper .mobile-menu-wrapper__content { .outer-content { grid-template-columns: 1fr; - + gap: 0; padding-left: 1rem; padding-right: 1rem; } diff --git a/packages/docs-support/src/site-css/shiki.css b/packages/docs-support/src/site-css/shiki.css index 5a3506e76..1f51cf5b3 100644 --- a/packages/docs-support/src/site-css/shiki.css +++ b/packages/docs-support/src/site-css/shiki.css @@ -1,20 +1,13 @@ /** -* Technique discovered here: -* https://github.com/shikijs/shiki/discussions/669 -* -* Documentation here: https://shiki.matsu.io/guide/dual-themes#class-based-dark-mode -* -* Themes setup variables after a color, -* example: color:#fff;--shiki-dark:#000;--shikiwhite:#fff; -* and setting defaultColor to `false` means there are _only_ variables, -* which is how the following code works. -*/ + * Dual-theme Shiki — colors via CSS variables; surfaces via docs tokens. + * https://shiki.matsu.io/guide/dual-themes#class-based-dark-mode + */ html[style*="color-scheme: dark"] { .shiki, .shiki span { color: var(--shiki-dark) !important; - background-color: var(--shiki-dark-bg) !important; + background-color: transparent !important; } } @@ -22,6 +15,13 @@ html[style*="color-scheme: light"] { .shiki, .shiki span { color: var(--shiki-light) !important; - background-color: var(--shiki-light-bg) !important; + background-color: transparent !important; } } + +.prose pre.shiki, +.prose .shiki, +.prose pre:has(.shiki), +.prose pre:has(code.shiki) { + background-color: var(--doc-bg-alt) !important; +} diff --git a/packages/docs-support/src/site-css/site.css b/packages/docs-support/src/site-css/site.css index de5520ea6..0308ecff8 100644 --- a/packages/docs-support/src/site-css/site.css +++ b/packages/docs-support/src/site-css/site.css @@ -1,3 +1,13 @@ +html { + scroll-behavior: smooth; +} + +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } +} + html, body { /*overflow: hidden;*/ @@ -7,13 +17,15 @@ body { @layer base { body { font-family: var(--font-sans); - color: #111827; - background-color: white; + color: var(--doc-text-1); + background-color: var(--doc-bg); + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; } - :is(html[style*="color-scheme: dark"]) body { - color: #f1f5f9; - background-color: #02020e; + ::selection { + background: var(--doc-brand-soft); + color: var(--doc-text-1); } [inert] ::-webkit-scrollbar { @@ -21,6 +33,30 @@ body { } } +/* Quiet scrollbars */ +* { + scrollbar-width: thin; + scrollbar-color: var(--doc-divider) transparent; +} + +*::-webkit-scrollbar { + width: 10px; + height: 10px; +} + +*::-webkit-scrollbar-thumb { + background: color-mix(in srgb, var(--doc-text-3) 45%, transparent); + border-radius: 999px; + border: 2px solid transparent; + background-clip: content-box; +} + +*::-webkit-scrollbar-thumb:hover { + background: color-mix(in srgb, var(--doc-text-2) 55%, transparent); + background-clip: content-box; + border: 2px solid transparent; +} + a, button, input, @@ -38,17 +74,17 @@ textarea, &:focus-visible { box-shadow: - 0 0 0 2px black, - 0 0 0 4px #e04e39; - border-radius: 0.25rem; + 0 0 0 2px var(--doc-bg), + 0 0 0 4px var(--doc-brand-1); + border-radius: var(--doc-radius-xs); } } [role="switch"][name="color-scheme"]:focus-visible + label .ball { box-shadow: - 0 0 0 2px black, - 0 0 0 4px #e04e39; - border-radius: 0.25rem; + 0 0 0 2px var(--doc-bg), + 0 0 0 4px var(--doc-brand-1); + border-radius: var(--doc-radius-xs); } .facade-header { @@ -57,56 +93,126 @@ textarea, top: 0; left: 0; right: 0; - height: 5rem; + height: var(--doc-nav-height); } nav[aria-label="Main Navigation"] { - font-size: 1rem; - line-height: 1.5rem; + font-size: 0.875rem; + line-height: 1.45; + padding: 0.15rem 0.35rem 0 0; > ul { display: flex; flex-direction: column; - gap: 2.25rem; + gap: 1.9rem; h2 { - font-weight: 500; - color: #0f172a; - font-family: var(--font-display); - - :is(html[style*="color-scheme: dark"]) & { - color: white; - } + font-weight: 600; + color: var(--doc-text-3); + font-family: var(--font-sans); + font-size: 0.6875rem; + letter-spacing: 0.07em; + text-transform: uppercase; + margin: 0 0 0.5rem; + padding: 0 0.75rem; } ul { - margin-top: 0.5rem; + margin-top: 0.1rem; display: flex; flex-direction: column; - gap: 0.5rem; - border-left: 2px solid #f1f5f9; - - :is(html[style*="color-scheme: dark"]) & { - border-color: #1e293b; - } - - @media (min-width: 1024px) { - margin-top: 1rem; - gap: 1rem; - border-color: #e2e8f0; - } + gap: 0.12rem; + border-left: 1px solid var(--doc-divider); + margin-left: 0.75rem; + padding-left: 0; } li { - padding-left: 1rem; + padding-left: 0.75rem; position: relative; } > li { > a { font-weight: 500; - font-family: var(--font-display); + font-family: var(--font-sans); } } } } + +/* Primary / secondary CTAs */ +.doc-button { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.4rem; + padding: 0.65rem 1.35rem; + font-family: var(--font-sans); + font-size: 0.9375rem; + font-weight: 500; + line-height: 1.4; + letter-spacing: -0.01em; + text-decoration: none; + border-radius: var(--doc-radius-pill); + border: 1px solid transparent; + transition: + background-color 0.15s ease, + border-color 0.15s ease, + color 0.15s ease, + transform 0.15s ease; +} + +.doc-button--primary { + background-color: var(--doc-brand-3); + color: #ffffff; + box-shadow: none; + text-shadow: none; +} + +.doc-button--primary:hover { + background-color: var(--doc-brand-2); + color: #ffffff; +} + +:is(html[style*="color-scheme: dark"]) .doc-button--primary { + background-color: var(--doc-brand-2); +} + +:is(html[style*="color-scheme: dark"]) .doc-button--primary:hover { + background-color: var(--doc-brand-3); +} + +.doc-button--secondary { + background-color: var(--doc-bg-soft); + color: var(--doc-text-1); + border-color: var(--doc-border); +} + +.doc-button--secondary:hover { + border-color: var(--doc-brand-1); + color: var(--doc-brand-1); +} + +/* When InternalLink merges `styled-link` + `doc-button`, kill prose underline */ +a.doc-button.styled-link, +.doc-button.styled-link { + box-shadow: none; + text-decoration: none; +} + +a.doc-button.styled-link:hover, +.doc-button.styled-link:hover { + box-shadow: none; + text-decoration: none; +} + +a.doc-button--primary.styled-link, +.doc-button--primary.styled-link { + color: #ffffff; +} + +a.doc-button--primary.styled-link:hover, +.doc-button--primary.styled-link:hover { + color: #ffffff; +} diff --git a/packages/docs-support/src/site-css/tokens.css b/packages/docs-support/src/site-css/tokens.css new file mode 100644 index 000000000..639db8c36 --- /dev/null +++ b/packages/docs-support/src/site-css/tokens.css @@ -0,0 +1,90 @@ +/** + * docs-support tokens — source: DESIGN.md + * Light defaults on :root; dark overrides when color-scheme is dark. + */ + +:root { + /* Surfaces */ + --doc-bg: #ffffff; + --doc-bg-alt: #f6f6f7; + --doc-bg-elv: #ffffff; + --doc-bg-soft: #f6f6f7; + + /* Text */ + --doc-text-1: #3c3c43; + --doc-text-2: #67676c; + --doc-text-3: #929295; + + /* Brand indigo */ + --doc-brand-1: #3451b2; + --doc-brand-2: #3a5ccc; + --doc-brand-3: #5672cd; + --doc-brand-soft: rgba(100, 108, 255, 0.14); + + /* Structure */ + --doc-divider: #e2e2e3; + --doc-border: rgba(60, 60, 67, 0.12); + + /* Accents */ + --doc-mark: #f5c518; + --doc-ember: #e04e39; + --doc-success: #30a46c; + --doc-warning: #9f6a00; + --doc-danger: #e0575b; + + /* Shape */ + --doc-radius-xs: 4px; + --doc-radius-sm: 8px; + --doc-radius-md: 12px; + --doc-radius-lg: 16px; + --doc-radius-xl: 20px; + --doc-radius-pill: 9999px; + + /* Layout */ + --doc-nav-height: 64px; + --doc-sidebar-width: 268px; + --doc-sidebar-bg: transparent; + --doc-content-max: 46rem; + --doc-page-max: none; + --doc-gutter: 0px; + --doc-content-pad-x: 3.25rem; + --doc-content-pad-y: 2.75rem; + --doc-sidebar-pad-x: 0.85rem; + --doc-sidebar-pad-y: 1.15rem; + + /* Typography aliases used by host apps */ + --font-sans: + "Inter", "InterVariable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --font-display: var(--font-sans); + --font-mono: + ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +} + +:is(html[style*="color-scheme: dark"]) { + --doc-bg: #1b1b1f; + --doc-bg-alt: #161618; + --doc-bg-elv: #202127; + --doc-bg-soft: #202127; + --doc-sidebar-bg: color-mix(in srgb, var(--doc-bg-alt) 72%, transparent); + + --doc-text-1: #dfdfd6; + --doc-text-2: #98989f; + --doc-text-3: #6a6a71; + + --doc-brand-1: #a8b1ff; + --doc-brand-2: #5c73e7; + --doc-brand-3: #3e63dd; + --doc-brand-soft: rgba(100, 108, 255, 0.16); + + --doc-divider: #2e2e32; + --doc-border: rgba(255, 255, 255, 0.1); +} + +@media (max-width: 1023px) { + :root { + --doc-content-pad-x: 1.15rem; + --doc-content-pad-y: 1.65rem; + --doc-gutter: 0px; + } +} diff --git a/packages/docs-support/src/text.gts b/packages/docs-support/src/text.gts index 9f2a064c2..e8ba60417 100644 --- a/packages/docs-support/src/text.gts +++ b/packages/docs-support/src/text.gts @@ -5,10 +5,7 @@ export const Text: TOC<{ Blocks: { default: [] } }> = ; diff --git a/packages/docs-support/src/theme-toggle.css b/packages/docs-support/src/theme-toggle.css index 844edec2a..b76a3a97c 100644 --- a/packages/docs-support/src/theme-toggle.css +++ b/packages/docs-support/src/theme-toggle.css @@ -25,10 +25,10 @@ } label { - background-color: #111; - width: 50px; + background-color: var(--doc-bg-soft); + width: 46px; height: 26px; - border-radius: 50px; + border-radius: var(--doc-radius-pill); position: relative; padding: 5px; cursor: pointer; @@ -36,21 +36,29 @@ justify-content: space-between; align-items: center; gap: 0.5rem; - box-shadow: inset 1px 0px 1px gray; + border: 1px solid var(--doc-border); + box-shadow: none; + transition: + background-color 0.15s ease, + border-color 0.15s ease; + } + + label:hover { + border-color: color-mix(in srgb, var(--doc-brand-1) 35%, var(--doc-border)); } label .ball { - background-color: #fff; - width: 22px; - height: 22px; + background-color: var(--doc-text-1); + width: 20px; + height: 20px; position: absolute; left: 2px; top: 2px; border-radius: 50%; - transition: transform 0.2s linear; + transition: transform 0.18s ease; } input[type="checkbox"][role="switch"]:checked + label .ball { - transform: translateX(24px); + transform: translateX(22px); } }