# @elemental-ui-alpha/theme

> The theme is used to share global theme settings throughout the hierarchy of your application. The theme provider is included by the Core component.

Latest version **0.0.0** (published 2020-04-23) · 0 weekly downloads

## Install

```sh
npm install @elemental-ui-alpha/theme
pnpm add @elemental-ui-alpha/theme
yarn add @elemental-ui-alpha/theme
bun add @elemental-ui-alpha/theme
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.0 |
| Published | 2020-04-23 |
| First published | 2020-04-23 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 53.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | dsf-release-bot, mitchellhamilton |

## Links

- npm: https://www.npmjs.com/package/@elemental-ui-alpha/theme
- npm.io page: https://npm.io/package/@elemental-ui-alpha/theme

## Dependencies (6)

- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [@types/react](https://npm.io/package/@types/react.md) ^16.9.34
- [@types/lodash](https://npm.io/package/@types/lodash.md) ^4.14.149
- [utility-types](https://npm.io/package/utility-types.md) ^3.10.0
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.8.3
- [@elemental-ui-alpha/tokens](https://npm.io/package/@elemental-ui-alpha/tokens.md) ^0.0.0

## Recent versions

- 0.0.0 (latest) — 2020-04-23

## README

# Theme

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

## Color

### Background

```jsx live
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

```jsx live
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:

```jsx live
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:

```typescript
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.

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

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

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

---
_Source: https://npm.io/package/@elemental-ui-alpha/theme · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._