# @uppsala-designsystem/theme

This package contains the following predefined themes for use in Uppsala kommun.

- `uppsala-kommun`
- `uppsala-kommun-old`

## Usage

When importing the package make sure to specify which theme. 
By default `uppsala-kommun` is used.

```tsx
import '@uppsala-designsystem/theme/<theme>.css';

// uppala-kommun theme
import '@uppsala-designsystem/theme/uppala-kommun.css';

// uppala-kommun-old theme
import '@uppsala-designsystem/theme/uppala-kommun-old.css';
```

### CSS

This package adds Designsystemet [css variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) to your `:root {}`.
You only need to import this once in your application, preferably somewhere in your "root" html.

All variables are prefixed with `ds`.

```js
import '@uppsala-designsystem/theme/uppala-kommun-old.css';
```

```css
div {
  padding: var(--ds-size-1);
}
```