Theme System

tsx
import {Theme} from '@astryxdesign/core';
import {defaultTheme} from '@astryxdesign/theme-default';
​
function App() {
  return (
    <Theme theme={defaultTheme}>
      <YourApp />
    </Theme>
  );
}

tsx
import {Theme} from '@astryxdesign/core';
import {defaultTheme} from '@astryxdesign/theme-default/built';
import '@astryxdesign/theme-default/theme.css';
​
function App() {
  return (
    <Theme theme={defaultTheme}>
      <YourApp />
    </Theme>
  );
}

bash
npx astryx theme

tsx
import {defineTheme} from '@astryxdesign/core/theme';
​
const myTheme = defineTheme({
  name: 'my-theme',
  color: { accent: '#7B61FF', neutralStyle: 'cool' },
  typography: {
    scale: { base: 14, ratio: 1.2 },
    body: { family: 'Inter', fallbacks: '-apple-system, sans-serif' },
  },
  radius: { base: 4, multiplier: 1 },
  motion: { fast: 175, medium: 410, ratio: 0.75 },
  tokens: {
    // Explicit overrides take precedence over scale-generated values
    '--color-accent': ['#7B61FF', '#9B85FF'],
  },
  components: {
    button: { 'variant:primary': { color: 'white' } },
  },
});

tsx
import {defineTheme} from '@astryxdesign/core/theme';
import {defaultTheme} from '@astryxdesign/theme-default';
import {myIcons} from './icons';
​
const brandTheme = defineTheme({
  name: 'brand',
  extends: defaultTheme,
  icons: myIcons,
  tokens: {
    '--color-accent': ['#7B61FF', '#9B85FF'],
  },
});

tsx
components: {
  // Standard CSS properties are expanded automatically.
  // borderRadius also sets the internal radius var for concentric math.
  // padding on container components (card, section, dialog) expands to layout tokens.
  card: {
    base: { borderRadius: '20px', padding: '24px' },
  },
  button: {
    base: { borderRadius: '9999px', textTransform: 'uppercase' },
    'variant:ghost': { borderWidth: '2px', borderStyle: 'solid' },
  },
  // Some components have public CSS vars for properties that don't map
  // to standard CSS. Set these directly.
  button: {
    base: { '--button-press-scale': 'scale(0.95)' },
  },
}

tsx
components: {
  button: {
    // Override an existing variant
    'variant:secondary': { backgroundColor: 'rgba(0,0,0,0.06)' },
    // Add a new variant — generates type augmentation on build
    'variant:primary-muted': {
      backgroundColor: 'light-dark(#F2F4F6, #28292C)',
      color: 'var(--color-text-primary)',
    },
  },
  banner: {
    // Any extensible prop axis works — not just variant
    'status:neutral': {
      backgroundColor: 'var(--color-muted)',
      color: 'var(--color-text-secondary)',
    },
  },
}

tsx
// TypeScript knows about 'primary-muted' after astryx theme build
<Button variant="primary-muted" label="Save draft" />
<Banner status="neutral" title="Note" />

bash
npx astryx theme build ./src/themes/ocean.ts

tsx
import {oceanTheme} from './themes/ocean';
import './themes/ocean.css';
​
<Theme theme={oceanTheme}>
  <App />
</Theme>

tsx
'--color-accent': ['#0064E0', '#2694FE'],
//                   ^light     ^dark

tsx
const [mode, setMode] = useState<'light' | 'dark'>('light');
​
<Theme theme={myTheme} mode={mode}>
  <Button
    label={mode === 'light' ? 'Switch to Dark' : 'Switch to Light'}
    onClick={() => setMode(m => (m === 'light' ? 'dark' : 'light'))}
  />
</Theme>;

tsx
<Theme theme={lightTheme} mode="light">
  <Layout
    header={<LayoutHeader>...</LayoutHeader>}
    start={
      <Theme theme={darkTheme} mode="dark">
        <LayoutPanel>{/* Dark sidebar */}</LayoutPanel>
      </Theme>
    }
    content={<LayoutContent>{/* Light content */}</LayoutContent>}
  />
</Theme>

ts
import {xdsTokenVar, xdsTokenVars} from '@astryxdesign/core/theme/tokens';
​
const pandaOrEmotionTheme = {
  colors: {
    text: xdsTokenVar('--color-text-primary'),
    surface: xdsTokenVars['--color-background-surface'],
  },
  spacing: {
    4: xdsTokenVars['--spacing-4'],
  },
};

ts
import {resolveXDSThemeTokens} from '@astryxdesign/core/theme/tokens';
import {defaultTheme} from '@astryxdesign/theme-default';
​
const lightTokens = resolveXDSThemeTokens(defaultTheme, {mode: 'light'});
const chartTheme = {
  textColor: lightTokens['--color-text-primary'],
  seriesColor: lightTokens['--color-data-categorical-blue'],
};

tsx
import {useMemo} from 'react';
import {useTheme} from '@astryxdesign/core/theme';
​
function ChartConfig() {
  const {mode, tokens} = useTheme();
​
  const options = useMemo(
    () => ({
      mode,
      textColor: tokens['--color-text-primary'],
      gridColor: tokens['--color-border'],
      seriesColor: tokens['--color-data-categorical-blue'],
    }),
    [mode, tokens],
  );
​
  return <Chart options={options} />;
}