tweak frontend site theme color.

Author: koculu

frontend/README.md

@@ -54,15 +54,18 @@ framework's `Tabs` and `TabPane`, including its existing bundled runtime and
 native radio fallback. FAQ items use `ExpandablePanel`.
 
 Colors, component states, fonts, and radii come from the registered `studio` skin.
-Light mode uses warm white and sage surfaces with deep green accents; dark mode
-keeps the charcoal and mint identity. The standard theme switcher respects the
+The identity is a cobalt accent over blue-slate neutrals, with indigo and
+violet companions. Each role is one OKLCH hue in `theme/studioSkinShared.ts`;
+light mode paints it as paper tints with saturated fills, dark mode as deep ink
+fields with luminous fills. The standard theme switcher respects the
 saved choice or system preference. Buttons, panels, badges, and icon
 frames use standard semantic tones and variants; chart colors reference the same
 palette variables. Page-specific layout and decorative styles use `styleBuilder`
 and `themes.forEach`, with framework breakpoint tokens. They are emitted into
 `site.css` and `site.dark.css`; there is no separate handwritten CSS asset.
 
-To change the identity, edit `theme/studioSkin.ts`. To add a reusable section,
+To change the identity, edit the hues in `theme/studioSkinShared.ts`. To add a
+reusable section,
 compose existing primitives in its own file under `components/`, register its
 definition in `studioComponents.ts`, and register only the extra layout styles
 it needs. `demoStyle.ts` intentionally remains a small,

frontend/components/studioActivityChart.ts

@@ -36,7 +36,7 @@ function createStudioActivityChart(): StudioActivityChart {
           index === 11
             ? 'semanticTone.accent.text.default'
             : index % 2 === 0
-              ? 'semanticTone.success.surface.rest.border'
+              ? 'semanticTone.accent.surface.rest.border'
               : 'semanticTone.accent.surface.hover.border',
         ),
       }),

frontend/demoStyle.ts

@@ -4,5 +4,5 @@ import { Style } from '@purestack/ts-css'
 export const card = new Style('.your-card')
   .padding('24px')
   .borderRadius('12px')
-  .backgroundColor('#151b18')
-  .color('#a3e6bd')
+  .backgroundColor('#101828')
+  .color('#9cc2ff')

frontend/purestack.studio/index.mdx

@@ -178,8 +178,8 @@ Write the story. Build the product.
 <span class="syntax-purple">const</span> card = <span class="syntax-purple">new</span> <span class="syntax-blue">Style</span>(<span class="syntax-amber">'.your-card'</span>)
   .<span class="syntax-blue">padding</span>(<span class="syntax-amber">'24px'</span>)
   .<span class="syntax-blue">borderRadius</span>(<span class="syntax-amber">'12px'</span>)
-  .<span class="syntax-blue">backgroundColor</span>(<span class="syntax-amber">'#151b18'</span>)
-  .<span class="syntax-blue">color</span>(<span class="syntax-amber">'#a3e6bd'</span>)
+  .<span class="syntax-blue">backgroundColor</span>(<span class="syntax-amber">'#101828'</span>)
+  .<span class="syntax-blue">color</span>(<span class="syntax-amber">'#9cc2ff'</span>)
 
 <span class="syntax-muted">// Typed source. Standard CSS output.</span>
 card.<span class="syntax-blue">toCSS</span>()</code></pre>

frontend/purestack.studio/siteConfig.json

@@ -27,7 +27,9 @@
     "maxDepth": 20,
     "includeIndex": true,
     "sortBy": "order",
-    "roots": ["guides", "components"]
+    "roots": ["guides", "components"],
+    "variant": "spotlight",
+    "class": "spotlight-from-bottom-right"
   },
   "sitemap": {
     "enabled": true,

frontend/theme/architectureStyles.ts

@@ -58,15 +58,15 @@ export function registerArchitectureStyles(root: Style, palette: ThemePalette) {
   })
   root.select('.studio .diagram-lines i').css({
     height: '25px',
-    borderBottom: `1px solid ${tone.success.surface.rest.border}`,
-    borderLeft: `1px solid ${tone.success.surface.rest.border}`,
+    borderBottom: `1px solid ${tone.accent.surface.rest.border}`,
+    borderLeft: `1px solid ${tone.accent.surface.rest.border}`,
   })
   root.select('.studio .diagram-lines i:first-child').css({
     borderBottomLeftRadius: '10px',
   })
   root.select('.studio .diagram-lines i:last-child').css({
     borderLeft: '0',
-    borderRight: `1px solid ${tone.success.surface.rest.border}`,
+    borderRight: `1px solid ${tone.accent.surface.rest.border}`,
     borderBottomRightRadius: '10px',
   })
   root.select('.studio .diagram-lines::after').css({
@@ -85,7 +85,7 @@ export function registerArchitectureStyles(root: Style, palette: ThemePalette) {
     background: tone.accent.surfaceAlt.rest.bgcolor,
     border: `1px solid ${tone.accent.surface.hover.border}`,
     borderRadius: '9px',
-    boxShadow: `0 0 38px color-mix(in srgb, ${tone.success.text.default} 4%, transparent)`,
+    boxShadow: `0 0 38px color-mix(in srgb, ${tone.accent.text.default} 4%, transparent)`,
   })
   root.select('.studio .diagram-core::before').css({
     content: '""',
@@ -94,7 +94,7 @@ export function registerArchitectureStyles(root: Style, palette: ThemePalette) {
     left: '50%',
     height: '24px',
     width: '1px',
-    background: tone.success.surface.rest.border,
+    background: tone.accent.surface.rest.border,
   })
   root.select('.studio .diagram-core > .icon').css({
     width: '30px',
@@ -116,7 +116,7 @@ export function registerArchitectureStyles(root: Style, palette: ThemePalette) {
     width: '1px',
     height: '33px',
     marginInline: 'auto',
-    background: tone.success.surface.rest.border,
+    background: tone.accent.surface.rest.border,
   })
   root.select('.studio .diagram-output').css({
     display: 'flex',

frontend/theme/closingStyles.ts

@@ -12,7 +12,7 @@ export function registerClosingStyles(root: Style, palette: ThemePalette) {
   })
   root.select('.studio .faq-intro').css({
     marginTop: '17px !important',
-    color: tone.success.text.subtle,
+    color: tone.neutral.text.subtle,
     fontSize: '13px',
     lineHeight: '1.8',
   })
@@ -39,7 +39,7 @@ export function registerClosingStyles(root: Style, palette: ThemePalette) {
   root.select('.studio .faq-list summary > span:last-child').css({
     fontSize: palette.font.size.h4,
     lineHeight: '1',
-    color: tone.success.text.subtle,
+    color: tone.neutral.text.subtle,
     transition: 'transform 180ms',
   })
   root.select('.studio .faq-list details[open] summary').css({
@@ -51,7 +51,7 @@ export function registerClosingStyles(root: Style, palette: ThemePalette) {
   root.select('.studio .faq-list .expandable-panel__body > p').css({
     padding: '0 25px 22px 0',
     fontSize: palette.font.size.sm,
-    color: tone.success.text.subtle,
+    color: tone.neutral.text.subtle,
     lineHeight: '1.9',
   })
   root.select('.studio .closing-section').css({

frontend/theme/ecosystemStyles.ts

@@ -40,7 +40,7 @@ export function registerEcosystemStyles(root: Style, palette: ThemePalette) {
   })
   root.select('.studio .package-card > span:last-child').css({
     marginLeft: 'auto',
-    color: tone.success.text.subtle,
+    color: tone.neutral.text.subtle,
     fontSize: '18px',
   })
   root.select('.studio .package-card h3').css({
@@ -51,7 +51,7 @@ export function registerEcosystemStyles(root: Style, palette: ThemePalette) {
     maxWidth: '365px',
     marginTop: '10px',
     fontSize: palette.font.size.sm,
-    color: tone.success.text.subtle,
+    color: tone.neutral.text.subtle,
     lineHeight: '1.8',
   })
   root.select('.studio .package-card code').css({

frontend/theme/featuresStyles.ts

@@ -44,7 +44,7 @@ export function registerFeaturesStyles(root: Style, palette: ThemePalette) {
   root
     .select('.studio .section h2 > span, .studio .start-section h2 > span')
     .css({
-      color: tone.success.text.subtle,
+      color: tone.accent.text.subtle,
     })
   root.select('.studio .section-heading').css({
     marginBottom: '37px',
@@ -244,7 +244,7 @@ export function registerFeaturesStyles(root: Style, palette: ThemePalette) {
   root.select('.studio .tone-sample > span').css({
     marginLeft: '12px',
     font: `9px / 1.5 ${studioTypography.mono}`,
-    color: tone.success.text.subtle,
+    color: tone.neutral.text.subtle,
   })
   root.select('.studio .output-sample').css({
     display: 'flex',
@@ -294,7 +294,7 @@ export function registerFeaturesStyles(root: Style, palette: ThemePalette) {
     top: '-15px',
     font: `8px ${studioTypography.mono}`,
     padding: '4px 6px',
-    color: tone.success.text.default,
+    color: tone.accent.text.default,
     background: tone.accent.surface.hover.bgcolor,
     border: `1px solid ${tone.neutral.surface.hover.border}`,
     borderRadius: '3px',
@@ -307,6 +307,6 @@ export function registerFeaturesStyles(root: Style, palette: ThemePalette) {
     display: 'block',
     height: '13px',
     width: '1px',
-    background: tone.success.text.default,
+    background: tone.accent.text.default,
   })
 }

frontend/theme/footerStyles.ts

@@ -31,7 +31,7 @@ export function registerFooterStyles(root: Style, palette: ThemePalette) {
   })
   root.select('.studio .footer-label').css({
     marginBottom: '6px',
-    color: tone.success.text.subtle,
+    color: tone.neutral.text.subtle,
     font: `8px ${studioTypography.mono}`,
     letterSpacing: '1.5px',
   })