# @fellesdatakatalog/theme

> Felles datakatalog UI theme

Latest version **0.5.4** (published 2023-01-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fellesdatakatalog/theme
pnpm add @fellesdatakatalog/theme
yarn add @fellesdatakatalog/theme
bun add @fellesdatakatalog/theme
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.4 |
| Published | 2023-01-19 |
| First published | 2020-08-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >= 14.15.0 |
| Dependencies | 0 |
| Unpacked size | 50.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Alexander Zakharov |
| Maintainers | fdk-bot, valosnah, stigbd, jeffreiffers |

## Links

- npm: https://www.npmjs.com/package/@fellesdatakatalog/theme
- Repository: https://github.com/fellesdatakatalog/fdk-kit
- Homepage: https://github.com/fellesdatakatalog/fdk-kit#readme
- Issues: https://github.com/fellesdatakatalog/fdk-kit/issues
- npm.io page: https://npm.io/package/@fellesdatakatalog/theme

## Recent versions

- 0.5.4 (latest) — 2023-01-19
- 0.5.3 — 2023-01-17
- 0.5.2 — 2022-09-21
- 0.5.1 — 2022-03-16
- 0.5.0 — 2022-02-22
- 0.4.4 — 2021-09-16
- 0.4.3 — 2021-03-09
- 0.4.2 — 2020-12-14
- 0.4.1 — 2020-11-24
- 0.4.0 — 2020-10-28
- 0.3.1 — 2020-10-28
- 0.3.0 — 2020-10-26
- 0.2.0 — 2020-08-25

## README

# @fellesdatakatalog/theme

Common theme module that provides global styles and design tokens.

## Installation

```bash
npm i @fellesdatakatalog/theme
```

## Dependencies

- react
- styled-components

## Usage

### Basic usage

In order to add global styles and expose design tokens to the application, wrap the application in a theme provider component exposed by the library.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@fellesdatakatalog/theme';

const App: FC = () => (
  <ThemeProvider>
    <div>App</div>
  </ThemeProvider>
)

export default App;
```

### Custom target for global styles

By default, theme provider will add global styles to document head. However, this behaviour can be overridden by providing another HTML element as `target` prop to theme provider.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@fellesdatakatalog/theme';

const App: FC = () => (
  <ThemeProvider target={document.head}>
    <div>App</div>
  </ThemeProvider>
)

export default App;
```

### Disabling global styles

Global styles can be disabled by `useGlobalStyles` prop to theme provider.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@fellesdatakatalog/theme';

const App: FC = () => (
  <ThemeProvider useGlobalStyles={false}>
    <div>App</div>
  </ThemeProvider>
)

export default App;
```


### Design token selectors

Design tokens can be accessed through various selectors exposed by the library.

```ts
import styled from 'styled-components';
import { theme, Colour } from '@fellesdatakatalog/theme';

const Box = styled.div`
  font-family: ${theme.fontFamily()};
  font-size: ${theme.fontSize('FS16')};
  font-weight: ${theme.fontWeight('FW500')};
  color: ${theme.colour(Colour.NEUTRAL, 'N60')};
`;

export default { Box }
```

### Extending default theme

In a rare case when default theme needs to be extended, it is possible to provide a `theme` prop to theme provider. Provided theme will be merged with the default theme, therefore, make sure not to overwrite any existing values.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@fellesdatakatalog/theme';

const theme = {
  additionalColour: 'red'
};

const App: FC = () => (
  <ThemeProvider theme={theme}>
    <div>App</div>
  </ThemeProvider>
)

export default App;
```

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