Theme

import { makeTheme, useElementalTheme } from '@elemental-ui-alpha/theme';

Color

Background

const { background, foreground } = useElementalTheme();
return (
  <Stack gap="small">
    {Object.entries(background).map(([key, value]) => (
      <Card padding="small">
        <Flex key={key} align="center" direction="horizontal">
          <Box
            height="2.2em"
            width="2.2em"
            marginRight="medium"
            style={{
              backgroundColor: value,
              border: `1px solid ${foreground.border}`,
            }}
          />
          <Text marginRight="small">{key}</Text>
          <Text foreground="dim">({value})</Text>
        </Flex>
      </Card>
    ))}
  </Stack>
);

Foreground

const { foreground } = useElementalTheme();
return (
  <Stack gap="small">
    {Object.entries(foreground).map(([key, value]) => (
      <Card padding="small">
        <Flex key={key} align="center" direction="horizontal">
          <Box
            height="2.2em"
            width="2.2em"
            marginRight="medium"
            style={{
              backgroundColor: value,
              border: `1px solid ${foreground.border}`,
            }}
          />
          <Text marginRight="small">{key}</Text>
          <Text foreground="dim">({value})</Text>
        </Flex>
      </Card>
    ))}
  </Stack>
);

Spacing

Using a base unit of 4px, doubling each increment for harmonious layout, there are six named spacing options:

const { color, spacing } = useElementalTheme();
return (
  <Cluster gap="small">
    {Object.entries(spacing).map(([key, val]) => (
      <Box
        key={key}
        height="1em"
        width={val}
        title={key}
        style={{ background: color.B400 }}
      />
    ))}
  </Cluster>
);

Shape

The shape of an Elemental theme:

type ElementalNamedTheme = {
  name: string;
  foreground: {
    accent: string;
    action: string;
    border: string;
    dim: string;
    focusRing: string;
    heading: string;
    muted: string;
    text: string;

    // tones
    critical: string;
    neutral: string;
    info: string;
    positive: string;
  };
  background: {
    base: string;
    muted: string;
    shade: string;
    dim: string;
  };

  breakpoints: {
    small: number | string;
    medium: number | string;
    large: number | string;
    xlarge: number | string;
  };
  color: Object;
  elevation: {
    E100: number;
    E200: number;
    E300: number;
    E400: number;
    E500: number;
  };
  spacing: {
    none: number | string;
    xxsmall: number | string;
    xsmall: number | string;
    small: number | string;
    medium: number | string;
    large: number | string;
    xlarge: number | string;
    xxlarge: number | string;
  };
  fontFamily: {
    monospace: string;
    body: string;
    heading: string;
  };
  fontSize: {
    xsmall: number | string;
    small: number | string;
    medium: number | string;
    large: number | string;
    xlarge: number | string;
    xxlarge: number | string;
    xxxlarge: number | string;
  };
  radii: {
    none: number | string;
    small: number | string;
    medium: number | string;
    large: number | string;
  };
};

Customize

Customize the theme consumed by Elemental components.

import { makeTheme } from '@elemental-ui-alpha/theme';

const customTheme = makeTheme('Custom Theme', {
  foreground: {
    action: 'DodgerBlue',
  },
});

function App() {
  return <Core theme={customTheme} />;
}