# @fabulas/theme-ui-modifiers

> Enabling BEM-flavored conventions when building your Theme-UI components

Latest version **0.0.3** (published 2020-03-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fabulas/theme-ui-modifiers
pnpm add @fabulas/theme-ui-modifiers
yarn add @fabulas/theme-ui-modifiers
bun add @fabulas/theme-ui-modifiers
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2020-03-01 |
| First published | 2020-02-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 17 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Michael Edelman |
| Maintainers | fabulascode |
| Keywords | react, theme-ui, design system, css, styling, BEM |

## Links

- npm: https://www.npmjs.com/package/@fabulas/theme-ui-modifiers
- Repository: https://github.com/fabulascode/theme-ui-modifiers
- Homepage: https://github.com/fabulascode/theme-ui-modifiers#readme
- Issues: https://github.com/fabulascode/theme-ui-modifiers/issues
- npm.io page: https://npm.io/package/@fabulas/theme-ui-modifiers

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.0.3 (latest) — 2020-03-01
- 0.0.1 — 2020-02-25

## README

# Theme-UI Modifiers

This library enhances [`theme-ui`](https://github.com/system-ui/theme-ui) by allowing you to use BEM-flavored conventions when building your components. It is inspired by and designed to provide similar functionality as [`styled-components-modifiers`](https://github.com/Decisiv/styled-components-modifiers).

## Installation

`yarn add @fabulas/theme-ui-modifiers`

## Usage

```jsx
/** @jsx jsx */
import { jsx, Text as ThemeUIText } from 'theme-ui';
import { useModifiers, getVariant } from '@fabulas/theme-ui-modifiers';

const TextModifiers = {
  bold: { fontWeight: 700 },
  orange: { color: 'orange' },
  bigger: ({ theme, variant }) => {
    const { fontSize } = getVariant(theme, variant);
    if (Array.isArray(fontSize)) {
      return { fontSize: fontSize.map(s => s + 1) };
    }
    return { fontSize: fontSize + 1 };
  },
};

function Text({ children, ...props }) {
  const modifiers = useModifiers(props);

  return (
    <ThemeUIText variant={props.variant} sx={modifiers}>
      {children}
    </ThemeUIText>
  );
}

function App() {
  return (
    <div>
      <Text variant="h1" modifiers={['bigger', 'bold', 'orange']}>
        Hello!
      </Text>
    </div>
  );
}
```

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