Nature Preceded Machines

    @splunk/themes
    TypeScript icon, indicating that this package has built-in type declarations

    0.11.0 • Public • Published

    @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
    

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

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

    Keywords

    none

    Install

    npm i @splunk/themes

    DownloadsWeekly Downloads

    1,781

    Version

    0.11.0

    License

    Apache-2.0

    Unpacked Size

    207 kB

    Total Files

    98

    Last publish

    Collaborators

    • splunker
    • splunk_sui_publish