@chipmobilesdk/rn-theme 0.2.1 → 1.0.0

package/src/unistyles/validateThemeConfig.ts

@@ -1,154 +0,0 @@
-import tinycolor from 'tinycolor2';
-import type { BrandColors } from '../types/brand';
-import type { StyleConfig } from '../types/style';
-import type { TypographyConfig } from '../types/typography';
-
-const BRAND_COLOR_KEYS = ['primary', 'secondary', 'tertiary'] as const;
-
-type ThemeName = 'light' | 'dark';
-
-interface ThemeOptionsShape {
-	CSSVars?: unknown;
-	nativeBreakpointsMode?: unknown;
-	initialTheme?: unknown;
-	adaptiveThemes?: unknown;
-}
-
-export function validateStyleConfig(config: StyleConfig): void {
-	if (!isRecord(config)) {
-		throw new Error('Theme config must be an object.');
-	}
-
-	validateBrandColors(config.brandColors);
-	validateTypographyConfig(config.typographyConfig);
-}
-
-export function validateBrandColors(brandColors: BrandColors): void {
-	if (!isRecord(brandColors)) {
-		throw new Error('Theme config must include brandColors.');
-	}
-
-	for (const key of BRAND_COLOR_KEYS) {
-		const color = brandColors[key];
-
-		if (typeof color !== 'string' || color.trim().length === 0) {
-			throw new Error(`brandColors.${key} must be a non-empty color string.`);
-		}
-
-		if (!tinycolor(color).isValid()) {
-			throw new Error(`brandColors.${key} must be a valid color string.`);
-		}
-	}
-}
-
-export function validateTypographyConfig(config?: TypographyConfig): void {
-	if (config == null) {
-		return;
-	}
-
-	if (!isRecord(config)) {
-		throw new Error('typographyConfig must be an object when provided.');
-	}
-	const typographyConfig = config as {
-		fontFamily?: unknown;
-		baseFontSize?: unknown;
-		fontScale?: unknown;
-	};
-
-	if (typographyConfig.fontFamily != null) {
-		if (
-			typeof typographyConfig.fontFamily !== 'string' ||
-			typographyConfig.fontFamily.trim().length === 0
-		) {
-			throw new Error(
-				'typographyConfig.fontFamily must be a non-empty string.',
-			);
-		}
-	}
-
-	if (typographyConfig.baseFontSize != null) {
-		assertPositiveFiniteNumber(
-			typographyConfig.baseFontSize,
-			'typographyConfig.baseFontSize',
-		);
-	}
-
-	if (typographyConfig.fontScale != null) {
-		assertPositiveFiniteNumber(
-			typographyConfig.fontScale,
-			'typographyConfig.fontScale',
-		);
-	}
-}
-
-export function validateThemeOptions(options?: ThemeOptionsShape): void {
-	if (options == null) {
-		return;
-	}
-
-	if (!isRecord(options)) {
-		throw new Error('Theme options must be an object when provided.');
-	}
-
-	const hasInitialTheme = options.initialTheme != null;
-	const hasAdaptiveThemes = options.adaptiveThemes === true;
-
-	if (hasInitialTheme && hasAdaptiveThemes) {
-		throw new Error('Use either initialTheme or adaptiveThemes, not both.');
-	}
-
-	if (options.initialTheme != null) {
-		validateInitialTheme(options.initialTheme);
-	}
-
-	if (
-		options.adaptiveThemes != null &&
-		typeof options.adaptiveThemes !== 'boolean'
-	) {
-		throw new Error('adaptiveThemes must be a boolean when provided.');
-	}
-
-	if (options.CSSVars != null && typeof options.CSSVars !== 'boolean') {
-		throw new Error('CSSVars must be a boolean when provided.');
-	}
-
-	if (
-		options.nativeBreakpointsMode != null &&
-		options.nativeBreakpointsMode !== 'pixels' &&
-		options.nativeBreakpointsMode !== 'points'
-	) {
-		throw new Error("nativeBreakpointsMode must be 'pixels' or 'points'.");
-	}
-}
-
-function validateInitialTheme(initialTheme: unknown): void {
-	if (typeof initialTheme === 'function') {
-		const resolvedTheme = initialTheme();
-
-		if (!isThemeName(resolvedTheme)) {
-			throw new Error("initialTheme resolver must return 'light' or 'dark'.");
-		}
-
-		return;
-	}
-
-	if (!isThemeName(initialTheme)) {
-		throw new Error(
-			"initialTheme must be 'light', 'dark', or a resolver function.",
-		);
-	}
-}
-
-function assertPositiveFiniteNumber(value: unknown, fieldName: string): void {
-	if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) {
-		throw new Error(`${fieldName} must be a positive finite number.`);
-	}
-}
-
-function isThemeName(value: unknown): value is ThemeName {
-	return value === 'light' || value === 'dark';
-}
-
-function isRecord(value: unknown): value is Record<PropertyKey, unknown> {
-	return typeof value === 'object' && value !== null && !Array.isArray(value);
-}

package/src/utils/colorGeneration.ts

@@ -1,87 +0,0 @@
-import type { BrandColors } from '../types/brand';
-import type { ThemeColors } from '../types/colors';
-import {
-	getContrastColor,
-	adjustLightness,
-	adjustSaturation,
-	toContainerColor,
-} from './colorMath';
-
-export function generateLightPalette(brand: BrandColors): ThemeColors {
-	const primaryContainer = toContainerColor(brand.primary, false);
-	const secondaryContainer = toContainerColor(brand.secondary, false);
-	const tertiaryContainer = toContainerColor(brand.tertiary, false);
-
-	return {
-		primary: brand.primary,
-		primaryContainer,
-		onPrimary: getContrastColor(brand.primary),
-
-		secondary: brand.secondary,
-		secondaryContainer,
-		onSecondary: getContrastColor(brand.secondary),
-
-		tertiary: brand.tertiary,
-		tertiaryContainer,
-		onTertiary: getContrastColor(brand.tertiary),
-
-		background: '#F8F9FA',
-		surface: '#FFFFFF',
-		surfaceVariant: adjustSaturation(adjustLightness(brand.primary, 48), -20),
-
-		onBackground: '#1A1A1A',
-		onSurface: '#1A1A1A',
-
-		border: '#E0E0E0',
-
-		// Semantic — WCAG-compliant accessible values for light backgrounds
-		error: '#B3261E',
-		success: '#2E7D32',
-		warning: '#E65100',
-		info: '#0277BD',
-		disabled: '#9E9E9E',
-		shadow: '#000000',
-	};
-}
-
-export function generateDarkPalette(brand: BrandColors): ThemeColors {
-	// Brighten brand colors slightly so they read clearly on dark backgrounds
-	const darkPrimary = adjustLightness(brand.primary, 10);
-	const darkSecondary = adjustLightness(brand.secondary, 10);
-	const darkTertiary = adjustLightness(brand.tertiary, 10);
-
-	const primaryContainer = toContainerColor(brand.primary, true);
-	const secondaryContainer = toContainerColor(brand.secondary, true);
-	const tertiaryContainer = toContainerColor(brand.tertiary, true);
-
-	return {
-		primary: darkPrimary,
-		primaryContainer,
-		onPrimary: getContrastColor(darkPrimary),
-
-		secondary: darkSecondary,
-		secondaryContainer,
-		onSecondary: getContrastColor(darkSecondary),
-
-		tertiary: darkTertiary,
-		tertiaryContainer,
-		onTertiary: getContrastColor(darkTertiary),
-
-		background: '#121212',
-		surface: '#1E1E1E',
-		surfaceVariant: '#2D2D2D',
-
-		onBackground: '#E6E6E6',
-		onSurface: '#E6E6E6',
-
-		border: '#3A3A3A',
-
-		// Semantic — dark surfaces that keep light text readable
-		error: '#8C1D18',
-		success: '#1B5E20',
-		warning: '#8A4B00',
-		info: '#01579B',
-		disabled: '#4A4A4A',
-		shadow: '#000000',
-	};
-}

package/src/utils/colorMath.ts

@@ -1,55 +0,0 @@
-import tinycolor from 'tinycolor2';
-
-/** Returns the relative luminance of a color (0–1). */
-export function getLuminance(color: string): number {
-	return tinycolor(color).getLuminance();
-}
-
-/**
- * Returns '#FFFFFF' or '#000000' — whichever has higher contrast
- * against the given background color (WCAG AA).
- */
-export function getContrastColor(background: string): '#FFFFFF' | '#000000' {
-	return tinycolor.isReadable('#FFFFFF', background, { level: 'AA', size: 'small' })
-		? '#FFFFFF'
-		: '#000000';
-}
-
-/**
- * Adjusts lightness.
- * Positive delta = lighten, negative delta = darken.
- */
-export function adjustLightness(color: string, delta: number): string {
-	const tc = tinycolor(color);
-	return delta >= 0
-		? tc.lighten(delta).toHexString()
-		: tc.darken(Math.abs(delta)).toHexString();
-}
-
-/**
- * Adjusts saturation.
- * Positive delta = saturate, negative delta = desaturate.
- */
-export function adjustSaturation(color: string, delta: number): string {
-	const tc = tinycolor(color);
-	return delta >= 0
-		? tc.saturate(delta).toHexString()
-		: tc.desaturate(Math.abs(delta)).toHexString();
-}
-
-/** Returns whether two colors meet WCAG AA contrast requirements. */
-export function isReadable(foreground: string, background: string): boolean {
-	return tinycolor.isReadable(foreground, background, { level: 'AA', size: 'small' });
-}
-
-/**
- * Produces a container shade from a brand color.
- * For dark themes: darkens + desaturates.
- * For light themes: lightens + desaturates.
- */
-export function toContainerColor(color: string, isDark: boolean): string {
-	const tc = tinycolor(color);
-	return isDark
-		? tc.darken(25).desaturate(10).toHexString()
-		: tc.lighten(35).desaturate(15).toHexString();
-}