@splunk/themes

@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:

yarn add @splunk/themes

-or-

npm install @splunk/themes

Peer-dependency notes

• react@^18 and styled-components@^5" are required peer dependencies for all capabilities except getTheme().
• The Storybook peer dependencies are required only when using @splunk/themes/storybook-addon-splunk-themes.

React Usage

A theme context is created at the root of the application using SplunkThemeProvider.

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

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

Styled Components Usage

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

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.

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

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

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