Use standard skin generator with custom colors.

Author: koculu

frontend/purestack.studio/guides/themes.mdx

@@ -36,15 +36,22 @@ The generator writes `assets/site.css` for light and `assets/site.dark.css` for
 
 ## Create a skin
 
-Start from a standard color preset and override the values your design needs:
+Pass a color object to the standard skin to generate matching light and dark
+palettes. You can provide any subset of its semantic colors; omitted colors use
+the standard defaults:
 
 ```ts
 import { registerSkin, themeSkins } from '@purestack/ts-style'
 import { merge } from '@purestack/ts-util'
 
 registerSkin('my-site', {
   create: () => {
-    const standard = themeSkins.standard.create(['green'])
+    const standard = themeSkins.standard.create({
+      accent: '#4b64c8',
+      neutral: '#293047',
+      secondary: '#168a75',
+      feature: '#b04783',
+    })
     return {
       light: merge(standard.light, {
         font: { size: { body: '1rem' } },
@@ -57,7 +64,7 @@ registerSkin('my-site', {
 })
 ```
 
-Import the file that registers your skin before the site build begins, then set `"theme": { "skin": "my-site" }` in the style config. A skin is a full light/dark pair; the preset gives related semantic colors a coherent starting point, and `merge` preserves values you do not override.
+Import the file that registers your skin before the site build begins, then set `"theme": { "skin": "my-site" }` in the style config. A skin is a full light/dark pair, and `merge` preserves palette values you do not override. You can also pass a list of built-in preset names, such as `['green']`, to `themeSkins.standard.create()`.
 
 ## Extend styles with palette roles
 

packages/ts-style/src/skins/index.ts

@@ -1,7 +1,9 @@
 import type { ThemePalette } from '../themePalette'
-import { createStandardDark } from './standard/dark'
+import { createStandardDark, type StandardColorPreset } from './standard/dark'
 import { createStandardLight } from './standard/light'
 
+export type { StandardColorPreset } from './standard/dark'
+
 export type ThemeSkinName = string
 export type SkinPresetList = readonly string[]
 
@@ -10,11 +12,13 @@ export interface ThemeSkinPair {
   dark: ThemePalette
 }
 
-export interface ThemeSkin {
-  create: (presets?: SkinPresetList) => ThemeSkinPair
+export interface ThemeSkin<TPresets = SkinPresetList> {
+  create: (presets?: TPresets) => ThemeSkinPair
 }
 
-export type ThemeSkinRegistry = Record<ThemeSkinName, ThemeSkin>
+export type ThemeSkinRegistry = Record<ThemeSkinName, ThemeSkin> & {
+  standard: ThemeSkin<SkinPresetList | StandardColorPreset>
+}
 
 export const themeSkins: ThemeSkinRegistry = {
   standard: {

packages/ts-style/src/skins/standard/dark.ts

@@ -88,13 +88,7 @@ const bestColors = {
   },
 }
 export type StandardColors = (typeof bestColors)['standardBlue']
-
-export const feature = '#cb166e'
-export const custom = '#e35508'
-export const info = '#15a9c0'
-export const success = '#259740'
-export const warning = '#c49a1c'
-export const danger = '#a92a37'
+export type StandardColorPreset = Partial<StandardColors>
 
 export interface DeltaToneColors {
   canvas: number
@@ -143,16 +137,22 @@ export function createToneColors(
   }
 }
 
-export function getStandardColors(presets?: readonly string[]): StandardColors {
-  let colors: StandardColors | undefined
+export function getStandardColors(
+  presets?: readonly string[] | StandardColorPreset,
+): StandardColors {
   const defaultColors = bestColors.standardBlue
-  for (const preset of presets ?? []) {
+  if (!presets) return defaultColors
+  if (!Array.isArray(presets)) {
+    return merge(defaultColors, presets)
+  }
+  let colors: StandardColors = defaultColors
+  for (const preset of presets) {
     colors = merge(
       defaultColors,
       bestColors[preset as keyof typeof bestColors] ?? defaultColors,
     )
   }
-  return colors ?? defaultColors
+  return colors
 }
 
 function applyDeltaPresets(
@@ -172,13 +172,13 @@ function createStandardDarkCore(
   applyDeltaPresets(presets, delta)
   const accentScale = createColorScale(colors.accent, mode)
   const neutralScale = createColorScale(colors.neutral, mode)
-  const featureScale = createColorScale(feature, mode)
+  const featureScale = createColorScale(colors.feature, mode)
   const secondaryScale = createColorScale(colors.secondary, mode)
-  const customScale = createColorScale(custom, mode)
-  const infoScale = createColorScale(info, mode)
-  const successScale = createColorScale(success, mode)
-  const warningScale = createColorScale(warning, mode)
-  const dangerScale = createColorScale(danger, mode)
+  const customScale = createColorScale(colors.custom, mode)
+  const infoScale = createColorScale(colors.info, mode)
+  const successScale = createColorScale(colors.success, mode)
+  const warningScale = createColorScale(colors.warning, mode)
+  const dangerScale = createColorScale(colors.danger, mode)
 
   return {
     neutral: createToneColors(neutralScale[toneIndex], neutralScale, delta),
@@ -198,11 +198,16 @@ function createStandardDarkCore(
   }
 }
 
-export function createStandardDark(presets?: readonly string[]) {
+export function createStandardDark(
+  presets?: readonly string[] | StandardColorPreset,
+) {
   const colors = getStandardColors(presets)
   return createStandardPalette({
     mode: 'dark',
-    core: createStandardDarkCore(colors, presets),
+    core: createStandardDarkCore(
+      colors,
+      Array.isArray(presets) ? presets : undefined,
+    ),
     accent: colors.accent,
     chromeLighting: 0.33,
     borderAlpha: 0.66,

packages/ts-style/src/skins/standard/light.ts

@@ -3,15 +3,10 @@ import { createStandardPalette, type StandardCore } from './base'
 import {
   createColorScale,
   createToneColors,
-  custom,
   type DeltaToneColors,
-  danger,
-  feature,
   getStandardColors,
-  info,
+  type StandardColorPreset,
   type StandardColors,
-  success,
-  warning,
 } from './dark'
 
 const mode: ThemeMode = 'dark'
@@ -53,13 +48,13 @@ function createStandardLightCore(
   applyDeltaPresets(presets, delta, delta1)
   const accentScale = createColorScale(colors.accent, mode)
   const neutralScale = createColorScale(colors.neutral, 'light')
-  const featureScale = createColorScale(feature, mode)
+  const featureScale = createColorScale(colors.feature, mode)
   const secondaryScale = createColorScale(colors.secondary, mode)
-  const customScale = createColorScale(custom, mode)
-  const infoScale = createColorScale(info, mode)
-  const successScale = createColorScale(success, mode)
-  const warningScale = createColorScale(warning, mode)
-  const dangerScale = createColorScale(danger, mode)
+  const customScale = createColorScale(colors.custom, mode)
+  const infoScale = createColorScale(colors.info, mode)
+  const successScale = createColorScale(colors.success, mode)
+  const warningScale = createColorScale(colors.warning, mode)
+  const dangerScale = createColorScale(colors.danger, mode)
 
   return {
     neutral: createToneColors(neutralScale[70], neutralScale, delta),
@@ -79,11 +74,16 @@ function createStandardLightCore(
   }
 }
 
-export function createStandardLight(presets?: readonly string[]) {
+export function createStandardLight(
+  presets?: readonly string[] | StandardColorPreset,
+) {
   const colors = getStandardColors(presets)
   return createStandardPalette({
     mode: 'light',
-    core: createStandardLightCore(colors, presets),
+    core: createStandardLightCore(
+      colors,
+      Array.isArray(presets) ? presets : undefined,
+    ),
     accent: colors.accent,
     chromeLighting: 0.33,
     borderAlpha: 1,

packages/ts-style/src/skins/standard/standard.test.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest'
+
+import { themeSkins } from '..'
+import type { StandardColorPreset } from './dark'
+
+describe('standard skin color presets', () => {
+  it('accepts a color object for both light and dark palettes', () => {
+    const preset = {
+      accent: '#4b64c8',
+      feature: '#b04783',
+      info: '#168a75',
+    } satisfies StandardColorPreset
+    const standard = themeSkins.standard.create()
+    const custom = themeSkins.standard.create(preset)
+
+    for (const mode of ['light', 'dark'] as const) {
+      expect(custom[mode].accent).toBe(preset.accent)
+      expect(custom[mode].semanticTone.feature.tone).not.toBe(
+        standard[mode].semanticTone.feature.tone,
+      )
+      expect(custom[mode].semanticTone.info.tone).not.toBe(
+        standard[mode].semanticTone.info.tone,
+      )
+      expect(custom[mode].semanticTone.success).toEqual(
+        standard[mode].semanticTone.success,
+      )
+    }
+  })
+
+  it('uses the extra color roles from named presets', () => {
+    const standard = themeSkins.standard.create()
+    const mint = themeSkins.standard.create(['mint'])
+
+    expect(mint.light.semanticTone.feature.tone).not.toBe(
+      standard.light.semanticTone.feature.tone,
+    )
+    expect(mint.dark.semanticTone.success.tone).not.toBe(
+      standard.dark.semanticTone.success.tone,
+    )
+  })
+})