Static Brand Functions
Functions for managing pre-defined static brands (Stride, Coral, Forest, Runswap, Acme).
applyBrandTheme()
Applies a brand theme to the document. Automatically handles both static and dynamic brands.
function applyBrandTheme(brandId: string): void
The ID of the brand to apply. Can be a static brand ID (‘stride’, ‘coral’, ‘forest’, ‘runswap’, ‘acme’) or a dynamic brand ID.
import { applyBrandTheme } from 'stride-ds';
// Apply static brand
applyBrandTheme('coral');
// Apply dynamic brand
applyBrandTheme('my-custom-brand');
getBrandById()
Retrieves a static brand definition by ID.
function getBrandById(brandId: string): BrandTheme | undefined
The ID of the brand to retrieve.
The brand theme object or undefined if not found.
import { getBrandById } from 'stride-ds';
const brand = getBrandById('stride');
console.log(brand?.name); // "Stride"
getCurrentBrand()
Returns the currently active brand ID.
function getCurrentBrand(): string
The ID of the currently active brand.
import { getCurrentBrand } from 'stride-ds';
const currentBrandId = getCurrentBrand();
console.log(currentBrandId); // "stride"
getCurrentBrandType()
Returns whether the current brand is static or dynamic.
function getCurrentBrandType(): 'static' | 'dynamic'
The type of the currently active brand.
import { getCurrentBrandType } from 'stride-ds';
const brandType = getCurrentBrandType();
if (brandType === 'dynamic') {
console.log('Using a custom dynamic brand');
}
getDefaultBrand()
Returns the default brand theme (Stride).
function getDefaultBrand(): BrandTheme
The default Stride brand theme.
getAllBrands()
Returns all available brands (both static and dynamic).
function getAllBrands(): Array<BrandTheme | DynamicBrandConfig>
return
Array<BrandTheme | DynamicBrandConfig>
Array containing all available brand configurations.
import { getAllBrands } from 'stride-ds';
const allBrands = getAllBrands();
allBrands.forEach(brand => {
console.log(brand.name);
});
initializeBrand()
Initializes the brand system on page load. Restores the saved brand from localStorage and applies it.
function initializeBrand(): void
import { initializeBrand } from 'stride-ds';
// Call on app initialization
initializeBrand();
Dynamic Brand Functions
Functions for managing custom white-label brands with dynamic token configuration.
registerDynamicBrand()
Registers a new dynamic brand with custom tokens.
function registerDynamicBrand(config: DynamicBrandConfig): void
config
DynamicBrandConfig
required
Complete brand configuration including tokens and fallback settings.
import { registerDynamicBrand } from 'stride-ds';
registerDynamicBrand({
id: 'my-brand',
name: 'My Brand',
description: 'Custom brand for client X',
tokens: {
core: {
primary: {
500: '#8B5CF6',
600: '#7C3AED',
700: '#6D28D9'
}
},
semantic: {
textPrimary: '#1F2937',
bgPrimary: '#FFFFFF',
interactivePrimary: 'var(--brand-primary-500)'
},
typography: {
fontFamilyPrimary: 'Inter, sans-serif'
}
},
fallback: {
brand: 'stride',
useSemanticFallback: true
}
});
applyDynamicBrandTheme()
Applies a registered dynamic brand theme.
function applyDynamicBrandTheme(brandId: string): void
The ID of the dynamic brand to apply.
import { applyDynamicBrandTheme } from 'stride-ds';
applyDynamicBrandTheme('my-brand');
getDynamicBrand()
Retrieves a registered dynamic brand configuration.
function getDynamicBrand(brandId: string): DynamicBrandConfig | undefined
The ID of the dynamic brand to retrieve.
return
DynamicBrandConfig | undefined
The dynamic brand configuration or undefined if not found.
getAllDynamicBrands()
Returns all registered dynamic brands.
function getAllDynamicBrands(): DynamicBrandConfig[]
Array of all registered dynamic brand configurations.
isDynamicBrand()
Checks if a brand ID corresponds to a dynamic brand.
function isDynamicBrand(brandId: string): boolean
True if the brand is a dynamic brand, false otherwise.
unregisterDynamicBrand()
Removes a dynamic brand from the registry.
function unregisterDynamicBrand(brandId: string): boolean
The ID of the dynamic brand to remove.
True if the brand was successfully removed, false if not found.
import { unregisterDynamicBrand } from 'stride-ds';
const success = unregisterDynamicBrand('my-brand');
if (success) {
console.log('Brand removed and localStorage cleaned');
}
clearAllDynamicBrands()
Removes all dynamic brands from the registry.
function clearAllDynamicBrands(): void
import { clearAllDynamicBrands } from 'stride-ds';
clearAllDynamicBrands();
console.log('All dynamic brands removed');
Configuration Functions
Configures global settings for the dynamic brand system.
function configureDynamicBrandSystem(config: Partial<DynamicBrandSystemConfig>): void
config
Partial<DynamicBrandSystemConfig>
required
Partial configuration object with system settings.
config.defaultFallbackBrand
Default fallback brand ID. Default: ‘stride’
config.enableLocalStorage
Enable localStorage persistence. Default: true
Enable CSS transitions during brand switching. Default: true
config.transitionDuration
Transition duration in milliseconds. Default: 50
import { configureDynamicBrandSystem } from 'stride-ds';
configureDynamicBrandSystem({
defaultFallbackBrand: 'coral',
enableTransitions: true,
transitionDuration: 200,
enableLocalStorage: true
});
getDynamicBrandSystemConfig()
Retrieves the current dynamic brand system configuration.
function getDynamicBrandSystemConfig(): DynamicBrandSystemConfig
The current system configuration.
restoreDynamicBrandsFromStorage()
Restores saved dynamic brands from localStorage. Called automatically by initializeBrand().
function restoreDynamicBrandsFromStorage(): void
Validation Functions
validateDynamicBrandConfig()
Validates a dynamic brand configuration before registration.
function validateDynamicBrandConfig(config: DynamicBrandConfig): {
valid: boolean;
errors: string[]
}
config
DynamicBrandConfig
required
The brand configuration to validate.
True if the configuration is valid.
Array of validation error messages.
import { validateDynamicBrandConfig } from 'stride-ds';
const validation = validateDynamicBrandConfig(myBrandConfig);
if (!validation.valid) {
validation.errors.forEach(error => {
console.error('Validation error:', error);
});
} else {
registerDynamicBrand(myBrandConfig);
}
isValidColor()
Validates if a string is a valid CSS color value.
function isValidColor(color: string): boolean
The color string to validate.
True if the color is valid CSS color.
import { isValidColor } from 'stride-ds';
console.log(isValidColor('#FF0000')); // true
console.log(isValidColor('rgb(255, 0, 0)')); // true
console.log(isValidColor('red')); // true
console.log(isValidColor('not-a-color')); // false
Utility Functions
generateColorPalette()
Generates a color palette from a base color. Currently a placeholder for future implementation.
function generateColorPalette(baseColor: string): CoreBrandTokens['primary']
Base color to generate palette from.
return
CoreBrandTokens['primary']
Generated color palette object with shades.
This function requires a color manipulation library like chroma.js or polished for full implementation.
exportDynamicBrandToCSS()
Exports a dynamic brand’s tokens as a CSS string.
function exportDynamicBrandToCSS(brandId: string): string | null
The ID of the dynamic brand to export.
CSS string with brand tokens or null if brand not found.
import { exportDynamicBrandToCSS } from 'stride-ds';
const css = exportDynamicBrandToCSS('my-brand');
if (css) {
console.log(css);
// .brand-dynamic-my-brand {
// --brand-primary-500: #8B5CF6;
// ...
// }
}
Available Static Brands
The design system includes these pre-configured static brands:
export const strideBrand: BrandTheme
export const coralBrand: BrandTheme
export const forestBrand: BrandTheme
export const runswapBrand: BrandTheme
export const acmeBrand: BrandTheme
export const availableBrands: BrandTheme[]