From 861754b6febee35b9e6567f25d30447f0476f598 Mon Sep 17 00:00:00 2001 From: ukimsanov Date: Sun, 25 Oct 2026 23:04:28 -0400 Subject: [PATCH 1/3] docs: the docs in hyperframes.dev's and the Studio app's colours Light mode takes hyperframes.dev's look: a still of its beige light ground, a frosted header, its ink, black pill buttons, heavy TT Norms headlines and a light-weight description. Every other colour comes from the Studio app: Mintlify's gray scale on the app's warm hue, article text and catalog greys on the same tokens, and code in the browser editor's own syntax colours. Dark mode is the app's Night palette. --- docs/catalog-gallery.css | 2 +- docs/custom.css | 323 ++++++++++++++++++++++++++++++----- docs/docs.json | 13 +- docs/snippets/docs-video.jsx | 2 +- 4 files changed, 295 insertions(+), 45 deletions(-) diff --git a/docs/catalog-gallery.css b/docs/catalog-gallery.css index 88caaa424b7..92613a0d9ad 100644 --- a/docs/catalog-gallery.css +++ b/docs/catalog-gallery.css @@ -27,7 +27,7 @@ .hfc-gallery .hfc-card-body { padding:12px 2px 0; } .hfc-gallery .hfc-card-title { display:flex; align-items:start; justify-content:space-between; gap:10px; } .hfc-gallery .hfc-card-title h3 { font-size:15px; font-weight:500; line-height:1.4; margin:0; color:var(--hf-heading); } -.hfc-gallery .hfc-status { flex-shrink:0; padding:2px 7px; border-radius:20px; background:#38bdf812; color:#60a5da; font-size:11px; } +.hfc-gallery .hfc-status { flex-shrink:0; padding:2px 7px; border-radius:20px; background:var(--hf-brand-soft); color:var(--hf-brand); font-size:11px; } .hfc-gallery .hfc-meta { font-size:12px; line-height:1.5; margin:4px 0 0; color:var(--hf-text-secondary); } .hfc-gallery .hfc-empty { padding:44px 20px; text-align:center; } .hfc-gallery .hfc-empty h3 { font-size:18px; } diff --git a/docs/custom.css b/docs/custom.css index 92e7f7904ce..aa99d6d57ac 100644 --- a/docs/custom.css +++ b/docs/custom.css @@ -2,6 +2,15 @@ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"); +@font-face { + font-family: "TT Norms Pro"; + src: url("https://www-static-assets.heygen.com/fonts/tt-norms/TT_Norms_Pro_Light.woff2") + format("woff2"); + font-weight: 300; + font-style: normal; + font-display: swap; +} + @font-face { font-family: "TT Norms Pro"; src: url("https://www-static-assets.heygen.com/fonts/tt-norms/TT_Norms_Pro_Normal.woff2") @@ -48,25 +57,30 @@ * the "Copy page" dropdown panel in light mode). */ +/* Light mode is hyperframes.dev's Studio ground: ink #131109 at hyperframes.dev's own + * opacities over the beige light (studioRedesign.css `--sr-*` in hyperframes-internal). */ :root { - --hf-background: #f6f5f1; - --hf-background-light: #ffffff; - --hf-surface2: #eeedea; - --hf-border-color: #e0dfdb; - --hf-border-color-light: #d0cfcb; - --hf-text: #1a1a1a; - --hf-text-secondary: #6b6b6b; - --hf-text-tertiary: #999999; - --hf-heading: #0a0a0a; - --hf-code-bg: #ffffff; - --hf-ui-border: #eeeeee; - --hf-sidebar-rail: #eeeeee; - --hf-sidebar-text: #707070; - --hf-floating-input-shadow: 0 8px 28px rgba(10, 10, 10, 0.08), 0 1px 4px rgba(10, 10, 10, 0.08); + --hf-background: #cfc7b4; + --hf-background-light: rgb(255 250 242 / 0.72); + --hf-surface2: rgb(255 250 242 / 0.5); + --hf-border-color: rgb(19 17 9 / 0.14); + --hf-border-color-light: rgb(19 17 9 / 0.2); + --hf-text: rgb(19 17 9 / 0.86); + --hf-text-secondary: rgb(19 17 9 / 0.68); + --hf-text-tertiary: rgb(19 17 9 / 0.66); + --hf-heading: #131109; + --hf-code-bg: rgb(255 250 242 / 0.72); + --hf-ui-border: rgb(19 17 9 / 0.12); + --hf-sidebar-rail: rgb(19 17 9 / 0.14); + --hf-sidebar-text: rgb(19 17 9 / 0.68); + --hf-floating-input-shadow: 0 8px 28px rgba(19, 17, 9, 0.12), 0 1px 4px rgba(19, 17, 9, 0.1); --mintlify-slot-header-height: 3rem; - --hf-brand: #16785b; - --hf-brand-soft: rgba(22, 120, 91, 0.1); + /* The mint accent is for dark grounds; on the beige it takes hyperframes.dev's deep green. */ + --hf-brand: #05563f; + --hf-brand-soft: rgba(5, 86, 63, 0.1); --hf-video-accent: #3ce6ac; + --hf-glass: rgb(247 236 211 / 0.65); + --hf-chip: rgb(255 255 255 / 0.45); --hf-accent-green: #1a7a0a; --hf-accent-green-light: rgba(26, 122, 10, 0.07); @@ -83,24 +97,28 @@ /* ── Dark mode ── */ +/* Dark mode is the Studio app's Night palette (packages/desktop/src/index.css, + * :root[data-chrome="night"]): warm paper, cards and ink on hue 70. */ .dark, [data-theme="dark"] { - --hf-background: #0a0a0a; - --hf-background-light: #141414; - --hf-surface2: #1a1a1a; - --hf-border-color: #2a2a2a; - --hf-border-color-light: #3a3a3a; - --hf-text: #e5e5e5; - --hf-text-secondary: #a0a0a0; - --hf-text-tertiary: #666666; - --hf-heading: #f5f5f5; - --hf-code-bg: #141414; - --hf-ui-border: #2a2a2a; - --hf-sidebar-rail: #2a2a2a; - --hf-sidebar-text: #a0a0a0; + --hf-background: #201e1c; + --hf-background-light: #272522; + --hf-surface2: #2f2c29; + --hf-border-color: rgb(245 243 241 / 0.1); + --hf-border-color-light: rgb(245 243 241 / 0.16); + --hf-text: #e2e0de; + --hf-text-secondary: #b8b6b4; + --hf-text-tertiary: #979593; + --hf-heading: #f5f3f1; + --hf-code-bg: #24211e; + --hf-ui-border: rgb(245 243 241 / 0.075); + --hf-sidebar-rail: rgb(245 243 241 / 0.1); + --hf-sidebar-text: #b8b6b4; --hf-floating-input-shadow: 0 8px 28px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.4); --hf-brand: #3ce6ac; --hf-brand-soft: rgba(60, 230, 172, 0.12); + --hf-glass: rgb(32 30 28 / 0.72); + --hf-chip: rgb(255 255 255 / 0.08); --hf-accent-green: #22c55e; --hf-accent-green-light: rgba(34, 197, 94, 0.1); @@ -327,6 +345,8 @@ samp { .hf-install-command code { background: none; border-radius: 0; + border-color: var(--hf-ui-border) !important; + color: var(--hf-heading) !important; } /* @@ -570,12 +590,17 @@ samp { } } -/* Use main's quieter structural border color across Aspen surfaces. */ -#body-content [class*="border-gray-200"], -#body-content [class*="border-gray-100"] { +/* Every structural hairline (header bottom, content rules, footer) is the palette's line, + * never a light gray that would draw a pale stripe on the beige ground. */ +[class*="border-gray-200"], +[class*="border-gray-100"] { border-color: var(--hf-ui-border) !important; } +div.h-px.bg-gray-100 { + background-color: var(--hf-ui-border) !important; +} + /* Keep the floating agent input noticeable against the page background. */ #body-content .chat-assistant-floating-input > div > div { border-color: var(--hf-border-color-light) !important; @@ -630,7 +655,10 @@ samp { #navigation-items .sidebar-group > li[data-active-nav-item="true"] > a, #navigation-items .sidebar-group > li > a[aria-current="page"] { border-left-color: currentColor; + background: var(--hf-chip) !important; + border-radius: 0 999px 999px 0; color: var(--hf-heading); + font-weight: 500; } /* Aspen inserts horizontal separators; main uses the same space without a rule. */ @@ -1306,17 +1334,16 @@ samp { margin-left: 16px; } - /* Paint the Playground pill with the HyperFrames mark's own cyan→green gradient - (#06E3FA → #4FDB5E) instead of the muted primary-dark, with dark text for contrast. */ + /* The Download pill is hyperframes.dev's: ink with cream text (`.sr-pill`). */ #navbar a.group > span.bg-primary-dark { - background: linear-gradient(100deg, #06e3fa 0%, #4fdb5e 100%) !important; - } - #navbar a.group:has(> span.bg-primary-dark) { - color: #0a2a20 !important; + background: var(--hf-heading) !important; + border-radius: 999px; } + #navbar a.group:has(> span.bg-primary-dark), #navbar a.group:has(> span.bg-primary-dark) span:not(.bg-primary-dark), #navbar a.group:has(> span.bg-primary-dark) svg { - color: #0a2a20 !important; + color: var(--hf-background) !important; + font-weight: 700; } } @@ -1371,3 +1398,221 @@ header.is-frame ~ #body-content #content-area { h2 { clear: both; } .hf-spot.hf-spot-inline { width: 100%; margin: 0; } + +/* ── Studio ground: hyperframes.dev's look (light mode) ── + * The page sits on the same beige light as hyperframes.dev: a still of its ground + * (StudioGround + its 80% veil), fixed so the light stays put while text scrolls. + * Dark mode keeps its plain ground. */ +html:not(.dark) { + background: #cfc7b4 + url("https://static.heygen.ai/hyperframes-oss/docs/images/look/studio-ground-v1.jpg") center + top / cover fixed no-repeat !important; +} + +/* The header is frosted glass over the ground, as hyperframes.dev's `.sr-nav`. */ +#navbar > div.bg-background-light { + background: var(--hf-glass) !important; + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); +} + +@media (min-width: 1024px) { + #navbar .nav-tabs-item.text-primary { + background: var(--hf-chip); + } +} + +/* Headlines: hyperframes.dev's heavy, tight TT Norms. */ +#page-title { + font-size: clamp(2.25rem, 4vw, 3.5rem); + font-weight: 700; + line-height: 1.02; + letter-spacing: -0.045em; + color: var(--hf-heading); +} + +#content-area :is(h2, h3) { + color: var(--hf-heading); +} + +#content-area h2 { + font-weight: 700; + letter-spacing: -0.035em; +} + +/* The page's one-line description reads like hyperframes.dev's subtitle: light and larger. */ +div:has(> div > #page-title) + .prose > p { + font-size: 1.375rem; + font-weight: 300; + line-height: 1.35; + letter-spacing: -0.02em; + color: var(--hf-heading); +} + +/* Cards and films float on the ground: frosted cream, hairline, soft shadow. */ +html:not(.dark) #content-area .card { + background: var(--hf-background-light) !important; + border-color: var(--hf-ui-border) !important; + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); +} + +/* Calm callouts are frosted cream on the ground (a Night card in dark mode); their icon keeps its colour. + * Warnings and danger keep Mintlify's tint so they still stand out. */ +.callout:is([data-callout-type="note"], [data-callout-type="info"], [data-callout-type="tip"], [data-callout-type="check"]) { + background: var(--hf-background-light) !important; + border-color: var(--hf-ui-border) !important; + color: var(--hf-text) !important; +} + +.callout:is([data-callout-type="note"], [data-callout-type="info"], [data-callout-type="tip"], [data-callout-type="check"]) :where(p, div, code) { + color: inherit !important; +} + +/* Catalog pages draw with their own --ve-* greys; on the ground they take the ink values. */ +html:not(.dark) .hf-ve { + --ve-fg: #131109; + --ve-muted: rgb(19 17 9 / 0.68); + --ve-line: rgb(19 17 9 / 0.14); + --ve-surface: #fffaf2; + --ve-sunken: rgb(255 250 242 / 0.6); + --ve-hover: rgb(255 255 255 / 0.45); + --ve-on-bg: #131109; + --ve-on-fg: #f4f1ea; + --ve-ring: rgb(19 17 9 / 0.14); +} + +/* ── One palette for every colour on the page ── + * Mintlify draws text, borders, fills and step markers from its gray scale; these are the + * same lightness steps on the Studio app's warm hue (oklch chroma 0.006, hue 70), so + * gray-900 is the app's --ink. Shared by light and dark mode. */ +:root { + --gray-50: 246 242 239; + --gray-100: 241 237 234; + --gray-200: 226 222 219; + --gray-300: 209 205 202; + --gray-400: 162 159 155; + --gray-500: 114 112 108; + --gray-600: 82 80 77; + --gray-700: 65 63 60; + --gray-800: 39 37 34; + --gray-900: 25 23 20; + --gray-950: 12 10 8; + /* Read by snippets that fall back to neutral greys. */ + --border-color: var(--hf-border-color); + --code-block-background: var(--hf-code-bg); + /* Code colours are the browser editor's (packages/studio theme.css --color-code-*). */ + --mint-foreground: var(--hf-heading); + --mint-background: var(--hf-code-bg); + --mint-token-keyword: oklch(0.509 0.211 329); + --mint-token-parameter: oklch(0.504 0.179 28); + --mint-token-function: oklch(0.492 0.193 263); + --mint-token-constant: oklch(0.495 0.13 50); + --mint-token-link: oklch(0.471 0.127 237); + --mint-token-comment: oklch(0.48 0.009 279); + --mint-token-string: oklch(0.468 0.142 143); + --mint-token-string-expression: oklch(0.468 0.142 143); + --mint-token-punctuation: var(--hf-text-secondary); +} + +.dark, +[data-theme="dark"] { + --mint-token-keyword: oklch(0.829 0.164 318); + --mint-token-parameter: oklch(0.856 0.145 17); + --mint-token-function: oklch(0.805 0.121 245); + --mint-token-constant: oklch(0.815 0.11 50); + --mint-token-link: oklch(0.793 0.092 206); + --mint-token-comment: oklch(0.806 0.03 262); + --mint-token-string: oklch(0.793 0.11 133); + --mint-token-string-expression: oklch(0.793 0.11 133); +} + +/* The beige ground is darker than the page these steps were made for: in light mode + * the mid grays go darker so small text passes 4.5:1 (icons 3:1) on the darkest beige. */ +html:not(.dark) { + --gray-400: 108 105 102; + --gray-500: 80 77 74; + --gray-600: 67 65 62; +} + +/* Article text: the typography plugin's cool grays become the same tokens. */ +.prose { + --tw-prose-body: var(--hf-text); + --tw-prose-headings: var(--hf-heading); + --tw-prose-lead: var(--hf-text-secondary); + --tw-prose-links: var(--hf-heading); + --tw-prose-bold: var(--hf-heading); + --tw-prose-counters: var(--hf-text-secondary); + --tw-prose-bullets: var(--hf-text-tertiary); + --tw-prose-hr: var(--hf-border-color); + --tw-prose-quotes: var(--hf-heading); + --tw-prose-quote-borders: var(--hf-border-color); + --tw-prose-captions: var(--hf-text-secondary); + --tw-prose-code: var(--hf-heading); + --tw-prose-th-borders: var(--hf-border-color-light); + --tw-prose-td-borders: var(--hf-border-color); + --tw-prose-invert-body: var(--hf-text); + --tw-prose-invert-headings: var(--hf-heading); + --tw-prose-invert-lead: var(--hf-text-secondary); + --tw-prose-invert-links: var(--hf-heading); + --tw-prose-invert-bold: var(--hf-heading); + --tw-prose-invert-counters: var(--hf-text-secondary); + --tw-prose-invert-bullets: var(--hf-text-tertiary); + --tw-prose-invert-hr: var(--hf-border-color); + --tw-prose-invert-quotes: var(--hf-heading); + --tw-prose-invert-quote-borders: var(--hf-border-color); + --tw-prose-invert-captions: var(--hf-text-secondary); + --tw-prose-invert-code: var(--hf-heading); + --tw-prose-invert-th-borders: var(--hf-border-color-light); + --tw-prose-invert-td-borders: var(--hf-border-color); +} + +html.dark .hf-ve { + --ve-fg: #f5f3f1; + --ve-muted: #b8b6b4; + --ve-line: rgb(245 243 241 / 0.1); + --ve-surface: #272522; + --ve-sunken: #24211e; + --ve-hover: #2f2c29; + --ve-on-bg: #f5f3f1; + --ve-on-fg: #201e1c; + --ve-ring: rgb(245 243 241 / 0.16); +} + +/* Scrollbars, the install box and other small chrome take the same tokens. */ +[data-component-part="scroll-area-scrollbar"] { + background: var(--hf-chip) !important; +} + +[data-component-part="scroll-area-scrollbar"] > div { + background: color-mix(in srgb, var(--hf-heading) 28%, transparent) !important; +} + +.hf-install-command { + border-color: var(--hf-ui-border) !important; + background: var(--hf-code-bg) !important; +} + +/* Body copy in dark mode is the app's second ink, not Mintlify's dim gray-400. */ +.dark .mdx-content { + color: var(--hf-text); +} + +/* Footer links and "Powered by" read at the secondary ink (Mintlify's 50% ink fails on the beige). */ +#footer a, +#footer :where(p, span, div) { + color: var(--hf-text-secondary); +} + +#footer a:hover { + color: var(--hf-heading); +} + +/* Table rules use the same lines: the header rule a touch stronger than the rows. */ +#content-area thead { + border-bottom-color: var(--hf-border-color-light) !important; +} + +#content-area tbody tr { + border-bottom-color: var(--hf-ui-border) !important; +} diff --git a/docs/docs.json b/docs/docs.json index d43cf8d8e0d..599f811fed9 100644 --- a/docs/docs.json +++ b/docs/docs.json @@ -3,14 +3,14 @@ "name": "HyperFrames", "theme": "aspen", "colors": { - "primary": "#16785B", + "primary": "#131109", "light": "#3CE6AC", - "dark": "#16785B" + "dark": "#131109" }, "background": { "color": { - "light": "#f6f5f1", - "dark": "#0a0a0a" + "light": "#cfc7b4", + "dark": "#201e1c" } }, "fonts": { @@ -1320,5 +1320,10 @@ "apiKey": "phc_zjjbX0PnWxERXrMHhkEJWj9A9BhGVLRReICgsfTMmpx", "sessionRecording": false } + }, + "styling": { + "codeblocks": { + "theme": "css-variables" + } } } diff --git a/docs/snippets/docs-video.jsx b/docs/snippets/docs-video.jsx index 456a9d12495..ce87454b886 100644 --- a/docs/snippets/docs-video.jsx +++ b/docs/snippets/docs-video.jsx @@ -527,7 +527,7 @@ export const ShowcaseWall = () => { display: "block", width: "100%", padding: 0, - border: "1px solid rgba(128,128,128,0.28)", + border: "1px solid var(--hf-border-color)", borderRadius: "11px", overflow: "hidden", background: "transparent", From 72d761951043d8be281a5bb2adef2e9edd301acd Mon Sep 17 00:00:00 2001 From: ukimsanov Date: Mon, 26 Oct 2026 01:10:03 -0400 Subject: [PATCH 2/3] docs: code in the browser editor's colours on the hosted build too Mintlify's hosted build ignores a custom code theme (the preview kept GitHub's colours), so the code-theme setting goes and each colour of the default themes (GitHub light, VS Code dark) is mapped by role to the browser editor's colour for that role. Code blocks and the fade under the copy button use the code token in both modes. --- docs/custom.css | 101 ++++++++++++++++++++++++++++++++++++------------ docs/docs.json | 5 --- 2 files changed, 77 insertions(+), 29 deletions(-) diff --git a/docs/custom.css b/docs/custom.css index aa99d6d57ac..760368b229b 100644 --- a/docs/custom.css +++ b/docs/custom.css @@ -1501,30 +1501,6 @@ html:not(.dark) .hf-ve { /* Read by snippets that fall back to neutral greys. */ --border-color: var(--hf-border-color); --code-block-background: var(--hf-code-bg); - /* Code colours are the browser editor's (packages/studio theme.css --color-code-*). */ - --mint-foreground: var(--hf-heading); - --mint-background: var(--hf-code-bg); - --mint-token-keyword: oklch(0.509 0.211 329); - --mint-token-parameter: oklch(0.504 0.179 28); - --mint-token-function: oklch(0.492 0.193 263); - --mint-token-constant: oklch(0.495 0.13 50); - --mint-token-link: oklch(0.471 0.127 237); - --mint-token-comment: oklch(0.48 0.009 279); - --mint-token-string: oklch(0.468 0.142 143); - --mint-token-string-expression: oklch(0.468 0.142 143); - --mint-token-punctuation: var(--hf-text-secondary); -} - -.dark, -[data-theme="dark"] { - --mint-token-keyword: oklch(0.829 0.164 318); - --mint-token-parameter: oklch(0.856 0.145 17); - --mint-token-function: oklch(0.805 0.121 245); - --mint-token-constant: oklch(0.815 0.11 50); - --mint-token-link: oklch(0.793 0.092 206); - --mint-token-comment: oklch(0.806 0.03 262); - --mint-token-string: oklch(0.793 0.11 133); - --mint-token-string-expression: oklch(0.793 0.11 133); } /* The beige ground is darker than the page these steps were made for: in light mode @@ -1616,3 +1592,80 @@ html.dark .hf-ve { #content-area tbody tr { border-bottom-color: var(--hf-ui-border) !important; } + +/* ── Code colours: the browser editor's (packages/studio theme.css --color-code-*) ── + * Mintlify highlights code with fixed themes (GitHub light, VS Code dark) and its hosted build ignores a custom + * code theme, so each of those themes' colours is mapped by role to the editor's colour for the same role. */ +html:not(.dark) pre span[style*="color: rgb(10, 48, 105)"] { + color: oklch(0.468 0.142 143) !important; +} + +html:not(.dark) pre span[style*="color: rgb(207, 34, 46)"] { + color: oklch(0.509 0.211 329) !important; +} + +html:not(.dark) pre span[style*="color: rgb(110, 119, 129)"] { + color: oklch(0.48 0.009 279) !important; +} + +html:not(.dark) pre span[style*="color: rgb(130, 80, 223)"], +html:not(.dark) pre span[style*="color: rgb(149, 56, 0)"] { + color: oklch(0.492 0.193 263) !important; +} + +html:not(.dark) pre span[style*="color: rgb(5, 80, 174)"] { + color: oklch(0.495 0.13 50) !important; +} + +html:not(.dark) pre span[style*="color: rgb(17, 99, 41)"] { + color: oklch(0.48 0.12 92) !important; +} + +.dark pre span[style*="--shiki-dark: #CE9178"] { + color: oklch(0.793 0.11 133) !important; +} + +.dark pre span[style*="--shiki-dark: #569CD6"] { + color: oklch(0.829 0.164 318) !important; +} + +.dark pre span[style*="--shiki-dark: #DCDCAA"] { + color: oklch(0.805 0.121 245) !important; +} + +.dark pre span[style*="--shiki-dark: #9CDCFE"] { + color: oklch(0.856 0.145 17) !important; +} + +.dark pre span[style*="--shiki-dark: #6A9955"] { + color: oklch(0.806 0.03 262) !important; +} + +.dark pre span[style*="--shiki-dark: #B5CEA8"], +.dark pre span[style*="--shiki-dark: #4FC1FF"] { + color: oklch(0.815 0.11 50) !important; +} + +.dark pre span[style*="--shiki-dark: #D7BA7D"] { + color: oklch(0.805 0.1 92) !important; +} + +.dark pre span[style*="--shiki-dark: #808080"] { + color: var(--hf-text-tertiary) !important; +} + +/* Code blocks sit on the code token (frosted cream in light mode, the Night field in dark), not the theme's own. */ +[class*="dark:bg-codeblock"], +html.dark body .code-block-background, +.code-block { + background-color: var(--hf-code-bg) !important; +} + +pre.shiki { + background-color: transparent !important; +} + +/* The fade that hides long lines under the copy button fades into the same code token. */ +.code-block-fade-overlay { + background-image: linear-gradient(to right, transparent, var(--hf-code-bg) 24px) !important; +} diff --git a/docs/docs.json b/docs/docs.json index 599f811fed9..359bdb85dee 100644 --- a/docs/docs.json +++ b/docs/docs.json @@ -1320,10 +1320,5 @@ "apiKey": "phc_zjjbX0PnWxERXrMHhkEJWj9A9BhGVLRReICgsfTMmpx", "sessionRecording": false } - }, - "styling": { - "codeblocks": { - "theme": "css-variables" - } } } From 4c285f33643cd221d014843de1350530b42257e9 Mon Sep 17 00:00:00 2001 From: ukimsanov Date: Mon, 26 Oct 2026 01:34:00 -0400 Subject: [PATCH 3/3] docs: map the dark control keywords to the editor keyword colour --- docs/custom.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/custom.css b/docs/custom.css index 760368b229b..a5480fe1948 100644 --- a/docs/custom.css +++ b/docs/custom.css @@ -1625,7 +1625,8 @@ html:not(.dark) pre span[style*="color: rgb(17, 99, 41)"] { color: oklch(0.793 0.11 133) !important; } -.dark pre span[style*="--shiki-dark: #569CD6"] { +.dark pre span[style*="--shiki-dark: #569CD6"], +.dark pre span[style*="--shiki-dark: #C586C0"] { color: oklch(0.829 0.164 318) !important; }