@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';


...
;
`

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);
``