# @splunk/themes

A collection of Splunk software theme variables and mixins. This package provides functions that can be useful in React, styled-components and other frameworks.
Themes consist of plain objects containing primitives such as strings and numbers. Functions are used for mixins.

## Install

Install the package:
```bash
yarn add @splunk/themes

-or-

npm install @splunk/themes

```

`react@^18` and `styled-components@^5"` are required peer dependencies for all capabilities except `getTheme()`.

## React Usage
A theme context is created at the root of the application using `SplunkThemeProvider`.

```js
import SplunkThemeProvider from '@splunk/themes/SplunkThemeProvider';

<SplunkThemeProvider family="prisma" density="compact" colorScheme="light">
     ...
</SplunkThemeProvider>;
```

## Styled Components Usage

Components are themed using `pick()`, `variables`, `mixins`.

```js
import { pick, variables, mixins } from '@splunk/themes';
import styled from 'styled-components';

const Wrapper = styled.div`
    ${mixins.reset()};

    color: ${pick({
         enterprise: variables.textColor,
         prisma: variables.contentColorDefault
    })};
`;
```


## Generic Usage
Theme variables are also available outside of React and styled-components.

```js
import getTheme from '@splunk/themes/getTheme';

const baseTheme = getTheme({family: 'prisma', colorScheme: 'light', density: 'compact' });

console.log(baseTheme.family, baseTheme.focusColor);
```