Keep landing deep-slate brightness and keep docs more readable.

Author: koculu

frontend/README.md

@@ -82,6 +82,11 @@ page, cards, inset surfaces, and controls, plus border strength, saturation, and
 shadow density. Dark presets range from crisp slate to a brighter warm studio.
 Documentation derives its colors from these same roles, so its code panels and
 copy controls keep their own layers instead of sharing one flat reading surface.
+`theme/studioLandingColors.ts` keeps the landing page's original light-paper and
+deep-slate brightness while applying the selected color family's hues. Its
+palette overrides stay within the studio template; documentation retains each
+preset's distinct layer contrast. The initial background style uses the same
+template-specific palette before the full stylesheets load.
 `studioColorStyles.ts` emits the changed palette variables and documentation
 color variables. A tiny inline startup script before the
 stylesheet links restores `purestack-site-color` from local storage. The picker

frontend/theme/studioColorHead.ts

@@ -1,6 +1,7 @@
 import type { PageHeadTemplate } from '@purestack/ts-common'
 import { Style } from '@purestack/ts-css'
 import { h } from '@purestack/ts-html'
+import { createStudioLandingPalette } from './studioLandingColors'
 import { createStudioDarkPalette } from './studioSkinDark'
 import { createStudioLightPalette } from './studioSkinLight'
 import {
@@ -15,17 +16,23 @@ export function buildSiteColorInitScript() {
   return `(()=>{let c=${JSON.stringify(DEFAULT_SITE_COLOR)};try{let s=localStorage.getItem(${JSON.stringify(SITE_COLOR_STORAGE_KEY)});if(${ids}.includes(s))c=s}catch{}document.documentElement.setAttribute("data-site-color",c)})();`
 }
 
-let criticalStyle: string | undefined
+const criticalStyles = new Map<boolean, string>()
 
-function buildSiteColorCriticalStyle() {
-  if (criticalStyle) return criticalStyle
+function buildSiteColorCriticalStyle(landing: boolean) {
+  const cached = criticalStyles.get(landing)
+  if (cached) return cached
   const root = new Style()
+  if (landing) registerLandingInitialColors(root)
   for (const preset of studioColorPresets) {
-    const light = createStudioLightPalette(preset, preset.layers.light)
-    const dark = createStudioDarkPalette(preset, preset.layers.dark)
+    const light = landing
+      ? createStudioLandingPalette('light', preset)
+      : createStudioLightPalette(preset, preset.layers.light)
+    const dark = landing
+      ? createStudioLandingPalette('dark', preset)
+      : createStudioDarkPalette(preset, preset.layers.dark)
     const lightCanvas = light.semanticTone.neutral.canvas
     const darkCanvas = dark.semanticTone.neutral.canvas
-    const selector = `html[data-site-color="${preset.id}"]`
+    const selector = `html:root[data-site-color="${preset.id}"]`
     root.select(selector).background(lightCanvas)
     root
       .media('prefers-color-scheme: dark')
@@ -34,19 +41,34 @@ function buildSiteColorCriticalStyle() {
     root.select(`${selector}[data-theme="light"]`).background(lightCanvas)
     root.select(`${selector}[data-theme="dark"]`).background(darkCanvas)
   }
-  criticalStyle = root.toCSS()
+  const criticalStyle = root.toCSS()
+  criticalStyles.set(landing, criticalStyle)
   return criticalStyle
 }
 
-export const renderStudioColorHead: PageHeadTemplate = ({ head }) => {
+function registerLandingInitialColors(root: Style) {
+  const light = createStudioLandingPalette('light').semanticTone.neutral
+  const dark = createStudioLandingPalette('dark').semanticTone.neutral
+  root.select('html, body').background(light.canvas).color(light.text.default)
+  root
+    .media('prefers-color-scheme: dark')
+    .select('html, body')
+    .background(dark.canvas)
+    .color(dark.text.default)
+}
+
+export const renderStudioColorHead: PageHeadTemplate = ({
+  head,
+  templateName,
+}) => {
   const startup = h('script')
     .attr({ 'data-site-color-init': '' })
     .raw(buildSiteColorInitScript())
   if (!head.insertBefore('link', startup, { rel: 'stylesheet' }))
     head.push(startup)
   const critical = h('style')
     .attr({ 'data-site-color-critical': '' })
-    .raw(buildSiteColorCriticalStyle())
+    .raw(buildSiteColorCriticalStyle(templateName === 'studio'))
   if (!head.insertBefore('link', critical, { rel: 'stylesheet' }))
     head.push(critical)
   return head

frontend/theme/studioColorStyles.ts

@@ -1,10 +1,13 @@
+import type { Style } from '@purestack/ts-css'
 import {
   listThemePaletteVarEntries,
   styleBuilder,
   themes,
+  type ThemeMode,
   type ThemePalette,
 } from '@purestack/ts-style'
 import { studioColorPresets } from './studioColorPresets'
+import { createStudioLandingPalette } from './studioLandingColors'
 import { createStudioDarkPalette } from './studioSkinDark'
 import { createStudioLightPalette } from './studioSkinLight'
 
@@ -36,9 +39,58 @@ export function registerStudioColorStyles() {
           root.set(token.name, token.value)
       }
     }
+    registerLandingColorStyles(theme, defaults)
   })
 }
 
+function registerLandingColorStyles(
+  theme: ThemeMode,
+  defaults: Map<string, string>,
+) {
+  const landingScope =
+    ':is(:root:has(> body.studio), body.studio, body.studio *)'
+  const landing = styleBuilder
+    .get(theme)
+    .select(
+      `:scope${landingScope}:not(:where([data-site-color], [data-site-color] *))`,
+    )
+  setChangedPaletteVariables(
+    landing,
+    createStudioLandingPalette(theme),
+    defaults,
+  )
+
+  for (const preset of studioColorPresets) {
+    const root = styleBuilder
+      .get(theme)
+      .select(
+        `:scope:is([data-site-color="${preset.id}"], [data-site-color="${preset.id}"] *)${landingScope}`,
+      )
+    // Compare with the active preset, since its declarations also match descendants.
+    const createPalette =
+      theme === 'dark' ? createStudioDarkPalette : createStudioLightPalette
+    const presetDefaults = paletteValues(
+      createPalette(preset, preset.layers[theme]),
+    )
+    setChangedPaletteVariables(
+      root,
+      createStudioLandingPalette(theme, preset),
+      presetDefaults,
+    )
+  }
+}
+
+function setChangedPaletteVariables(
+  root: Style,
+  palette: ThemePalette,
+  defaults: Map<string, string>,
+) {
+  for (const token of listThemePaletteVarEntries(palette)) {
+    if (token.value !== defaults.get(token.name))
+      root.set(token.name, token.value)
+  }
+}
+
 function paletteValues(palette: ThemePalette) {
   return new Map(
     listThemePaletteVarEntries(palette).map((token) => [

frontend/theme/studioLandingColors.ts

@@ -0,0 +1,44 @@
+import type { ThemeMode } from '@purestack/ts-style'
+import type { StudioHues } from './studioSkinShared'
+import { createStudioDarkPalette } from './studioSkinDark'
+import { createStudioLightPalette } from './studioSkinLight'
+import type { StudioSurfaceProfile } from './studioSurfaceProfiles'
+
+/** Keep the landing page's original light paper and deep slate brightness. */
+const landingSurfaces = {
+  light: {
+    canvas: 0.984,
+    surface: 1,
+    surfaceAlt: 0.965,
+    control: 0.955,
+    border: 0.86,
+    borderSubtle: 0.92,
+    ink: 0.24,
+    muted: 0.5,
+    chroma: 0.04,
+    tint: 0.1,
+    shadow: 1,
+  },
+  dark: {
+    canvas: 0.17,
+    surface: 0.205,
+    surfaceAlt: 0.19,
+    control: 0.26,
+    border: 0.33,
+    borderSubtle: 0.27,
+    ink: 0.93,
+    muted: 0.71,
+    chroma: 0.22,
+    tint: 0.22,
+    shadow: 1,
+  },
+} satisfies Record<ThemeMode, StudioSurfaceProfile>
+
+export function createStudioLandingPalette(
+  theme: ThemeMode,
+  hues?: StudioHues,
+) {
+  const createPalette =
+    theme === 'dark' ? createStudioDarkPalette : createStudioLightPalette
+  return createPalette(hues, landingSurfaces[theme])
+}