@purestack/ts-components 1.1.0

package/src/standard/classicLogo/classicLogo.ts

@@ -0,0 +1,429 @@
+import {
+  type ClassicLogoConfig,
+  type TsSsgContext,
+  tryResolveTsSsgContext,
+} from '@purestack/ts-common'
+import {
+  getCurrentThemePaletteVar,
+  getThemePaletteVar,
+  normalizeThemeVariableReference,
+} from '@purestack/ts-style'
+import {
+  type ComputedRef,
+  computed,
+  defineComponent,
+  flatten,
+  html,
+  type RefOrValue,
+  unref,
+} from 'regor'
+
+const logoTemplate = html`<div class="classic-logo" :style="logo.layoutStyle">
+  <a class="classic-logo__link" :href="logo.href === null ? undefined : (logo.href ?? '/')" :aria-label="logo.ariaLabel">
+    <span class="classic-logo__glyph" :style="logo.glyphStyle" aria-hidden="true">
+      <Icon :name="logo.icon" r-if="logo.icon"/>
+      <span class="classic-logo__glyph-mark" r-else></span>
+    </span>
+    <span class="classic-logo__stack">
+      <span class="classic-logo__brand">
+        <span
+          r-for="brandLetter in logo.brandLetters"
+          class="classic-logo__brand-letter"
+          :style="brandLetter.style"
+        >
+          {{ brandLetter.value }}
+        </span>
+      </span>
+      <span class="classic-logo__subtitle" r-if="logo.subtitle">
+        <span
+          r-for="subtitleLetter in logo.subtitleLetters"
+          class="classic-logo__subtitle-letter"
+          :style="subtitleLetter.style"
+        >
+          {{ subtitleLetter.value }}
+        </span>
+      </span>
+    </span>
+  </a>
+</div>`
+
+interface LogoLetter {
+  value: string
+  isSpace?: boolean
+  style?: Record<string, string>
+}
+
+type LogoResponsiveLength = {
+  base?: string
+  sm?: string
+  md?: string
+  lg?: string
+  xl?: string
+}
+
+const DEFAULT_BRAND_FILL = getThemePaletteVar(
+  'semanticTone.accent.button.rest.background',
+)
+const DEFAULT_SUBTITLE_FILL = getCurrentThemePaletteVar('text.subtle')
+
+interface ResolvedClassicLogo {
+  brand?: string
+  letterColors?: string
+  subtitleLetterColors?: string
+  colors?: string[]
+  logoBackground?: number
+  logoForeground?: number
+  brandLetters?: LogoLetter[]
+  subtitle?: string
+  subtitleLetters?: LogoLetter[]
+  glyphStyle?: Record<string, string>
+  layoutStyle?: Record<string, string>
+  brandSize?: string
+  brandSizeSm?: string
+  brandSizeMd?: string
+  brandSizeLg?: string
+  brandSizeXl?: string
+  subtitleSize?: string
+  subtitleSizeSm?: string
+  subtitleSizeMd?: string
+  subtitleSizeLg?: string
+  subtitleSizeXl?: string
+  iconSize?: string
+  iconSizeSm?: string
+  iconSizeMd?: string
+  iconSizeLg?: string
+  iconSizeXl?: string
+  subtitleInset?: string
+  subtitleInsetSm?: string
+  subtitleInsetMd?: string
+  subtitleInsetLg?: string
+  subtitleInsetXl?: string
+  href?: string | null
+  icon?: string
+  ariaLabel?: string
+}
+
+function resolveClassicLogo(
+  props: Partial<ClassicLogoConfig>,
+  context: TsSsgContext | undefined,
+): ResolvedClassicLogo {
+  const brand = props.brand
+  const letterColors = props.letterColors
+  const subtitleLetterColors = props.subtitleLetterColors
+  const colors = normalizeLogoColors(props.colors)
+  const logoBackground = props.logoBackground
+  const logoForeground = props.logoForeground
+  const brandLetters = buildBrandLetters(brand, letterColors, colors)
+  const subtitle = props.subtitle
+  const subtitleLetters = buildLogoLetters(
+    subtitle,
+    subtitleLetterColors,
+    colors,
+    DEFAULT_SUBTITLE_FILL,
+  )
+  const glyphStyle = resolveGlyphStyle(colors, logoBackground, logoForeground)
+  const layoutStyle = resolveLogoLayoutStyle(props)
+  const href = props.href
+    ? (context?.resolvePublicHref(props.href) ?? props.href)
+    : props.href
+  const icon = props.icon
+  const ariaLabel = props.ariaLabel
+
+  return {
+    brand,
+    letterColors,
+    subtitleLetterColors,
+    colors,
+    logoBackground,
+    logoForeground,
+    brandLetters,
+    subtitle,
+    subtitleLetters,
+    glyphStyle,
+    layoutStyle,
+    brandSize: props.brandSize,
+    brandSizeSm: props.brandSizeSm,
+    brandSizeMd: props.brandSizeMd,
+    brandSizeLg: props.brandSizeLg,
+    brandSizeXl: props.brandSizeXl,
+    subtitleSize: props.subtitleSize,
+    subtitleSizeSm: props.subtitleSizeSm,
+    subtitleSizeMd: props.subtitleSizeMd,
+    subtitleSizeLg: props.subtitleSizeLg,
+    subtitleSizeXl: props.subtitleSizeXl,
+    iconSize: props.iconSize,
+    iconSizeSm: props.iconSizeSm,
+    iconSizeMd: props.iconSizeMd,
+    iconSizeLg: props.iconSizeLg,
+    iconSizeXl: props.iconSizeXl,
+    subtitleInset: props.subtitleInset,
+    subtitleInsetSm: props.subtitleInsetSm,
+    subtitleInsetMd: props.subtitleInsetMd,
+    subtitleInsetLg: props.subtitleInsetLg,
+    subtitleInsetXl: props.subtitleInsetXl,
+    href,
+    icon,
+    ariaLabel: ariaLabel || brand,
+  }
+}
+
+function normalizeLogoColors(colors: string[] | undefined) {
+  return colors?.map((color) => normalizeThemeVariableReference(color))
+}
+
+function buildBrandLetters(
+  brand: string | undefined,
+  letterColors: string | undefined,
+  colors: string[] | undefined,
+): LogoLetter[] | undefined {
+  return buildLogoLetters(brand, letterColors, colors, DEFAULT_BRAND_FILL)
+}
+
+function buildLogoLetters(
+  text: string | undefined,
+  letterColors: string | undefined,
+  colors: string[] | undefined,
+  defaultFill: string,
+): LogoLetter[] | undefined {
+  const letters: LogoLetter[] = []
+  let colorCursor = 0
+
+  if (text) {
+    for (const character of [...text]) {
+      if (character === ' ') {
+        letters.push({
+          value: '\u00A0',
+          isSpace: true,
+        })
+        continue
+      }
+      letters.push({
+        value: character,
+        style: resolveBrandLetterStyle(
+          letterColors,
+          colors,
+          colorCursor,
+          defaultFill,
+        ),
+      })
+      colorCursor += 1
+    }
+  }
+
+  return letters.length > 0 ? letters : undefined
+}
+
+function resolveBrandLetterStyle(
+  letterColors: string | undefined,
+  colors: string[] | undefined,
+  letterIndex: number,
+  defaultFill: string,
+): Record<string, string> | undefined {
+  if (!letterColors) {
+    return {
+      backgroundImage: defaultFill,
+      backgroundColor: defaultFill,
+    }
+  }
+  const colorIndexLiteral =
+    letterColors?.[letterIndex] ??
+    (letterColors && letterColors.length > 0
+      ? letterColors[letterColors.length - 1]
+      : undefined)
+  if (colorIndexLiteral === undefined) return undefined
+  const colorIndex = Number.parseInt(colorIndexLiteral, 10)
+  if (Number.isNaN(colorIndex) || colorIndex < 0) return undefined
+  const color = colors?.[colorIndex]
+  if (!color) {
+    return {
+      backgroundImage: defaultFill,
+      backgroundColor: defaultFill,
+    }
+  }
+  return {
+    backgroundImage: color,
+    backgroundColor: color,
+  }
+}
+
+function resolveGlyphStyle(
+  colors: string[] | undefined,
+  logoBackground: number | undefined,
+  logoForeground: number | undefined,
+): Record<string, string> | undefined {
+  const style: Record<string, string> = {}
+  const background = resolveIndexedLogoColor(colors, logoBackground)
+  const foreground = resolveIndexedLogoColor(colors, logoForeground)
+
+  if (background) {
+    style['--ps-classic-logo-glyph-background'] = background
+  }
+
+  if (foreground) {
+    style['--ps-classic-logo-glyph-foreground'] = foreground
+  }
+
+  return Object.keys(style).length > 0 ? style : undefined
+}
+
+function resolveIndexedLogoColor(
+  colors: string[] | undefined,
+  colorIndex: number | undefined,
+): string | undefined {
+  if (colorIndex === undefined) return undefined
+  if (!Number.isInteger(colorIndex) || colorIndex < 0) return undefined
+  return colors?.[colorIndex]
+}
+
+function resolveLogoLayoutStyle(
+  props: Partial<ClassicLogoConfig>,
+): Record<string, string> | undefined {
+  const style: Record<string, string> = {}
+
+  assignResponsiveLengthVars(
+    style,
+    '--ps-classic-logo-brand-size',
+    resolveResponsiveLogoLength({
+      base: props.brandSize,
+      sm: props.brandSizeSm,
+      md: props.brandSizeMd,
+      lg: props.brandSizeLg,
+      xl: props.brandSizeXl,
+    }),
+  )
+  assignResponsiveLengthVars(
+    style,
+    '--ps-classic-logo-subtitle-size',
+    resolveResponsiveLogoLength({
+      base: props.subtitleSize,
+      sm: props.subtitleSizeSm,
+      md: props.subtitleSizeMd,
+      lg: props.subtitleSizeLg,
+      xl: props.subtitleSizeXl,
+    }),
+  )
+  assignResponsiveLengthVars(
+    style,
+    '--ps-classic-logo-icon-size',
+    resolveResponsiveLogoLength({
+      base: props.iconSize,
+      sm: props.iconSizeSm,
+      md: props.iconSizeMd,
+      lg: props.iconSizeLg,
+      xl: props.iconSizeXl,
+    }),
+  )
+  assignResponsiveLengthVars(
+    style,
+    '--ps-classic-logo-subtitle-inset',
+    resolveResponsiveLogoLength({
+      base: props.subtitleInset,
+      sm: props.subtitleInsetSm,
+      md: props.subtitleInsetMd,
+      lg: props.subtitleInsetLg,
+      xl: props.subtitleInsetXl,
+    }),
+  )
+
+  return Object.keys(style).length > 0 ? style : undefined
+}
+
+function resolveResponsiveLogoLength(
+  value: LogoResponsiveLength,
+): LogoResponsiveLength | undefined {
+  const base = resolveOptionalCssLength(value.base)
+  const sm = resolveOptionalCssLength(value.sm) ?? base
+  const md = resolveOptionalCssLength(value.md) ?? sm
+  const lg = resolveOptionalCssLength(value.lg) ?? md
+  const xl = resolveOptionalCssLength(value.xl) ?? lg
+
+  if (!base && !sm && !md && !lg && !xl) return undefined
+
+  return { base, sm, md, lg, xl }
+}
+
+function resolveOptionalCssLength(
+  value: string | undefined,
+): string | undefined {
+  if (typeof value !== 'string') return undefined
+  const normalized = value.trim()
+  return normalized.length > 0 ? normalized : undefined
+}
+
+function assignResponsiveLengthVars(
+  style: Record<string, string>,
+  variableName: string,
+  value: LogoResponsiveLength | undefined,
+) {
+  if (!value) return
+  if (value.base) style[variableName] = value.base
+  if (value.sm) style[`${variableName}-sm`] = value.sm
+  if (value.md) style[`${variableName}-md`] = value.md
+  if (value.lg) style[`${variableName}-lg`] = value.lg
+  if (value.xl) style[`${variableName}-xl`] = value.xl
+}
+
+type ReactiveClassicLogoOptions = {
+  [K in keyof ClassicLogoConfig]?: RefOrValue<ClassicLogoConfig[K]>
+}
+
+export interface ClassicLogo extends ReactiveClassicLogoOptions {
+  config?: RefOrValue<Partial<ClassicLogoConfig>>
+  logo?: ComputedRef<ResolvedClassicLogo>
+}
+
+function defineClassicLogoComponent() {
+  return defineComponent<ClassicLogo>(logoTemplate, {
+    props: [
+      'config',
+      'brand',
+      'letterColors',
+      'subtitleLetterColors',
+      'colors',
+      'logoBackground',
+      'logoForeground',
+      'brandSize',
+      'brandSizeSm',
+      'brandSizeMd',
+      'brandSizeLg',
+      'brandSizeXl',
+      'subtitleSize',
+      'subtitleSizeSm',
+      'subtitleSizeMd',
+      'subtitleSizeLg',
+      'subtitleSizeXl',
+      'iconSize',
+      'iconSizeSm',
+      'iconSizeMd',
+      'iconSizeLg',
+      'iconSizeXl',
+      'subtitleInset',
+      'subtitleInsetSm',
+      'subtitleInsetMd',
+      'subtitleInsetLg',
+      'subtitleInsetXl',
+      'subtitle',
+      'href',
+      'icon',
+      'ariaLabel',
+    ],
+    context: (head) => ({
+      logo: computed(() => {
+        const { config, ...direct } = flatten(head.props)
+        const options = {
+          ...flatten(unref(config) ?? {}),
+          ...Object.fromEntries(
+            Object.entries(direct).filter(([, value]) => value !== undefined),
+          ),
+        }
+        return resolveClassicLogo(options, tryResolveTsSsgContext(head))
+      }),
+    }),
+  })
+}
+
+export function defineClassicLogoComponents() {
+  return {
+    classicLogo: defineClassicLogoComponent(),
+  }
+}

package/src/standard/classicLogo/classicLogoStyle.ts

@@ -0,0 +1,292 @@
+import type { ThemePalette } from '@purestack/ts-style'
+import {
+  BREAKPOINTS,
+  mediaMin,
+  styleBuilder,
+  type ThemeMode,
+  themes,
+} from '@purestack/ts-style'
+
+const LOGO_DEFAULTS = {
+  brandSize: {
+    base: '1.5rem',
+    sm: '1.5rem',
+    md: '1.75rem',
+    lg: '2rem',
+    xl: '2rem',
+  },
+  subtitleSize: {
+    base: '0.7rem',
+    sm: '0.7rem',
+    md: '0.74rem',
+    lg: '0.77rem',
+    xl: '0.77rem',
+  },
+  iconSize: {
+    base: '2rem',
+    sm: '2rem',
+    md: '2.5rem',
+    lg: '2.85rem',
+    xl: '2.85rem',
+  },
+  subtitleInset: {
+    base: '0.03125rem',
+    sm: '0.03125rem',
+    md: '0.0625rem',
+    lg: '0.0625rem',
+    xl: '0.0625rem',
+  },
+} as const
+
+type LogoResponsiveToken =
+  | 'brand-size'
+  | 'subtitle-size'
+  | 'icon-size'
+  | 'subtitle-inset'
+
+type LogoBreakpoint = 'sm' | 'md' | 'lg' | 'xl'
+
+export function registerClassicLogoStyles() {
+  themes.forEach((theme, palette) => {
+    registerClassicLogoShellStyles(theme, palette)
+    registerClassicLogoTextStyles(theme, palette)
+    registerClassicLogoResponsiveStyles(theme)
+    registerClassicLogoInteractiveStyles(theme, palette)
+  })
+}
+
+export function registerClassicLogoShellStyles(
+  theme: ThemeMode,
+  palette: ThemePalette,
+) {
+  styleBuilder
+    .select('.classic-logo', theme)
+    .display('inline-block')
+    .width('fit-content')
+
+  styleBuilder
+    .select('.classic-logo__link', theme)
+    .display('inline-flex')
+    .alignItems('center')
+    .gap('0.25rem')
+    .padding('0.25rem 0.5rem')
+    .borderRadius(palette.radii.sm)
+    .border(`1px solid ${palette.current.border.subtle}`)
+    .textDecoration('none')
+    .maxWidth('100%')
+    .background(palette.current.surface.rest.background)
+
+  styleBuilder
+    .select('.classic-logo__link:hover', theme)
+    .boxShadow(palette.effect.interactiveShadow)
+
+  styleBuilder
+    .select('.classic-logo__glyph', theme)
+    .width(resolveLogoVar('icon-size'))
+    .height(resolveLogoVar('icon-size'))
+    .minWidth(resolveLogoVar('icon-size'))
+    .minHeight(resolveLogoVar('icon-size'))
+    .borderRadius(palette.radii.md)
+    .display('grid')
+    .placeItems('center')
+    .position('relative')
+    .background(
+      `var(--ps-classic-logo-glyph-background, ${palette.current.button.rest.background})`,
+    )
+    .backgroundColor(
+      `var(--ps-classic-logo-glyph-background, ${palette.current.button.rest.background})`,
+    )
+    .border(`1px solid ${palette.current.button.rest.border}`)
+    .color(
+      `var(--ps-classic-logo-glyph-foreground, ${palette.current.button.rest.text})`,
+    )
+
+  styleBuilder
+    .select('.classic-logo__glyph > .icon', theme)
+    .width('80%')
+    .height('80%')
+
+  styleBuilder
+    .select('.classic-logo__glyph-mark', theme)
+    .position('absolute')
+    .inset('30%')
+    .borderRadius('0.25rem')
+    .backgroundColor('currentColor')
+}
+
+export function registerClassicLogoTextStyles(
+  theme: ThemeMode,
+  palette: ThemePalette,
+) {
+  styleBuilder
+    .select('.classic-logo__stack', theme)
+    .display('inline-grid')
+    .justifyItems('stretch')
+    .gap('0')
+    .minWidth('0')
+    .textTransform('uppercase')
+    .letterSpacing('0')
+    .lineHeight('1')
+    .whiteSpace('nowrap')
+
+  styleBuilder
+    .select('.classic-logo__brand', theme)
+    .display('flex')
+    .alignItems('center')
+    .justifyContent('space-between')
+    .fontSize(resolveLogoVar('brand-size'))
+    .fontWeight('800')
+
+  styleBuilder
+    .select('.classic-logo__brand-letter', theme)
+    .whiteSpace('nowrap')
+    .backgroundClip('text')
+    .webkitBackgroundClip('text')
+    .color('transparent')
+    .webkitTextFillColor('transparent')
+
+  styleBuilder
+    .select('.classic-logo__subtitle', theme)
+    .display('flex')
+    .justifyContent('space-between')
+    .fontSize(resolveLogoVar('subtitle-size'))
+    .fontWeight('700')
+    .color(palette.current.text.subtle)
+    .marginLeft(resolveLogoVar('subtitle-inset'))
+    .marginRight(resolveLogoVar('subtitle-inset'))
+
+  styleBuilder
+    .select('.classic-logo__subtitle-letter', theme)
+    .backgroundClip('text')
+    .webkitBackgroundClip('text')
+    .color('transparent')
+    .webkitTextFillColor('transparent')
+}
+
+export function registerClassicLogoResponsiveStyles(theme: ThemeMode) {
+  styleBuilder
+    .select('.classic-logo__glyph', theme)
+    .media(mediaMin(BREAKPOINTS.sm))
+    .width(resolveLogoVar('icon-size', 'sm'))
+    .height(resolveLogoVar('icon-size', 'sm'))
+    .minWidth(resolveLogoVar('icon-size', 'sm'))
+    .minHeight(resolveLogoVar('icon-size', 'sm'))
+
+  styleBuilder
+    .select('.classic-logo__glyph', theme)
+    .media(mediaMin(BREAKPOINTS.md))
+    .width(resolveLogoVar('icon-size', 'md'))
+    .height(resolveLogoVar('icon-size', 'md'))
+    .minWidth(resolveLogoVar('icon-size', 'md'))
+    .minHeight(resolveLogoVar('icon-size', 'md'))
+
+  styleBuilder
+    .select('.classic-logo__glyph', theme)
+    .media(mediaMin(BREAKPOINTS.lg))
+    .width(resolveLogoVar('icon-size', 'lg'))
+    .height(resolveLogoVar('icon-size', 'lg'))
+    .minWidth(resolveLogoVar('icon-size', 'lg'))
+    .minHeight(resolveLogoVar('icon-size', 'lg'))
+
+  styleBuilder
+    .select('.classic-logo__glyph', theme)
+    .media(mediaMin(BREAKPOINTS.xl))
+    .width(resolveLogoVar('icon-size', 'xl'))
+    .height(resolveLogoVar('icon-size', 'xl'))
+    .minWidth(resolveLogoVar('icon-size', 'xl'))
+    .minHeight(resolveLogoVar('icon-size', 'xl'))
+
+  styleBuilder
+    .select('.classic-logo__brand', theme)
+    .media(mediaMin(BREAKPOINTS.sm))
+    .fontSize(resolveLogoVar('brand-size', 'sm'))
+
+  styleBuilder
+    .select('.classic-logo__brand', theme)
+    .media(mediaMin(BREAKPOINTS.md))
+    .fontSize(resolveLogoVar('brand-size', 'md'))
+
+  styleBuilder
+    .select('.classic-logo__brand', theme)
+    .media(mediaMin(BREAKPOINTS.lg))
+    .fontSize(resolveLogoVar('brand-size', 'lg'))
+
+  styleBuilder
+    .select('.classic-logo__brand', theme)
+    .media(mediaMin(BREAKPOINTS.xl))
+    .fontSize(resolveLogoVar('brand-size', 'xl'))
+
+  styleBuilder
+    .select('.classic-logo__subtitle', theme)
+    .media(mediaMin(BREAKPOINTS.sm))
+    .fontSize(resolveLogoVar('subtitle-size', 'sm'))
+    .marginLeft(resolveLogoVar('subtitle-inset', 'sm'))
+    .marginRight(resolveLogoVar('subtitle-inset', 'sm'))
+
+  styleBuilder
+    .select('.classic-logo__subtitle', theme)
+    .media(mediaMin(BREAKPOINTS.md))
+    .fontSize(resolveLogoVar('subtitle-size', 'md'))
+    .marginLeft(resolveLogoVar('subtitle-inset', 'md'))
+    .marginRight(resolveLogoVar('subtitle-inset', 'md'))
+
+  styleBuilder
+    .select('.classic-logo__subtitle', theme)
+    .media(mediaMin(BREAKPOINTS.lg))
+    .fontSize(resolveLogoVar('subtitle-size', 'lg'))
+    .marginLeft(resolveLogoVar('subtitle-inset', 'lg'))
+    .marginRight(resolveLogoVar('subtitle-inset', 'lg'))
+
+  styleBuilder
+    .select('.classic-logo__subtitle', theme)
+    .media(mediaMin(BREAKPOINTS.xl))
+    .fontSize(resolveLogoVar('subtitle-size', 'xl'))
+    .marginLeft(resolveLogoVar('subtitle-inset', 'xl'))
+    .marginRight(resolveLogoVar('subtitle-inset', 'xl'))
+}
+
+function resolveLogoVar(
+  token: LogoResponsiveToken,
+  breakpoint?: LogoBreakpoint,
+): string {
+  if (!breakpoint) {
+    return `var(--ps-classic-logo-${token}, ${getLogoDefaultValue(token, 'base')})`
+  }
+
+  return `var(--ps-classic-logo-${token}-${breakpoint}, ${getLogoDefaultValue(token, breakpoint)})`
+}
+
+function getLogoDefaultValue(
+  token: LogoResponsiveToken,
+  breakpoint: 'base' | LogoBreakpoint,
+): string {
+  switch (token) {
+    case 'brand-size':
+      return LOGO_DEFAULTS.brandSize[breakpoint]
+    case 'subtitle-size':
+      return LOGO_DEFAULTS.subtitleSize[breakpoint]
+    case 'icon-size':
+      return LOGO_DEFAULTS.iconSize[breakpoint]
+    case 'subtitle-inset':
+      return LOGO_DEFAULTS.subtitleInset[breakpoint]
+  }
+}
+
+export function registerClassicLogoInteractiveStyles(
+  theme: ThemeMode,
+  palette: ThemePalette,
+) {
+  styleBuilder
+    .select('.classic-logo__link[href]', theme)
+    .cursor('pointer')
+    .transition('border-color 180ms ease')
+
+  styleBuilder
+    .select('.classic-logo__link[href]:hover', theme)
+    .borderColor(palette.current.border.default)
+
+  styleBuilder
+    .select('.classic-logo__link[href]:focus-visible', theme)
+    .outline(`2px solid ${palette.current.border.focus}`)
+    .outlineOffset('0')
+}