SvelteKit Package

core-ui-branding

Branding & style system — brand config, CSS custom properties, contrast validation

SvelteKit Ready UI

Brand Configuration typescript

import { shredbxBrand, contrastValidator } from '@sbx/core-ui/branding';
import { styleStore } from '@sbx/core-ui/style';

// Apply brand — generates CSS custom properties
styleStore.setBrand(shredbxBrand);

// Validate accessibility
const result = contrastValidator('#00ff88', '#0a0a0a');
// { ratio: 12.4, aa: true, aaa: true }

// Brand tokens available as CSS vars:
// var(--color-accent), var(--color-bg), var(--font-sans), etc.

About

Design system infrastructure. The branding module defines typed brand configurations (colors, fonts, spacing) that generate CSS custom properties at runtime. The style module provides brand-bridge CSS for token cascading, theme presets, and a contrast validator to ensure WCAG-compliant color combinations. Brand configs are defined as TypeScript fixtures (hub-brand, shredbx-brand) and applied via CSS custom properties.

Public API

Name	Kind	Signature
IBrandConfig	interface	interface IBrandConfig — colors, fonts, spacing, borders, motion
hubBrand	const	const hubBrand: IBrandConfig
shredbxBrand	const	const shredbxBrand: IBrandConfig
contrastValidator	func	contrastValidator(fg: string, bg: string): { ratio: number, aa: boolean, aaa: boolean }
IStylePreset	interface	interface IStylePreset — name, description, tokens
styleStore	func	styleStore — $state-based reactive style management