@snowball-ui/themes

Theme definitions and runtime theme adapters for Snowball UI.

This package is the shared theme boundary for web and React Native runtimes. Use it for theme lookup, CSS variable creation, and platform-neutral style tokens.

Install

pnpm add @snowball-ui/themes

Usage

import {
  createSemanticTheme,
  createThemeCssVariables,
  createThemeStyleTokens,
  extendSemanticTheme,
  getSnowballTheme,
} from '@snowball-ui/themes';

const theme = getSnowballTheme('default');

const webVariables = createThemeCssVariables(theme);
const nativeStyleTokens = createThemeStyleTokens(theme);

createThemeCssVariables() is for web providers. It emits semantic theme roles plus primitive runtime variables for radius, spacing, layers, interaction hit slop/target sizes, state opacity, component anatomy, and motion. Component anatomy variables cover stable shell metrics for controls, rows, tabs, and dialog cards. createThemeStyleTokens() keeps RN-friendly numeric values for the same non-color runtime tokens while components continue to read colors from theme.semantic.

Create product themes with semantic overrides. Unspecified roles inherit from the selected base theme, so custom themes can stay focused on brand roles without changing component anatomy or variant meaning.

const productTheme = createSemanticTheme('product', {
  action: {
    primary: {
      bg: '#123456',
      fg: '#ffffff',
    },
  },
});

const campaignTheme = extendSemanticTheme(productTheme, 'product-campaign', {
  status: {
    success: {
      bg: '#0f9f6e',
    },
  },
});

Pass custom theme objects to SnowballThemeProvider on web or SnowballNativeThemeProvider on React Native. For one-off product tuning, providers also accept themeOverrides layered on the selected base theme.

License

MIT