Novices Plagiarizing Mozart

    This package has been deprecated

    Author message:

    @pxblue/themes has been split into separate packages for each supported framework. Please update to @pxblue/angular-themes, @pxblue/react-themes, or @pxblue/react-native-themes to stay up to date with the latest updates

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

    3.0.2 • Public • Published

    PX Blue themes for Eaton applications

    This package provides theming support for Eaton applications using the PX Blue design system. It includes resources for developers using:

    The PX Blue themes package comes with two theme options: a Blue theme (standard) and a Dark theme.

    Installation

    Install with npm

    npm install --save @pxblue/themes
    

    or yarn

    yarn add @pxblue/themes
    

    Usage

    Depending on the framework that you are using, PX Blue themes are applied in different ways.

    Angular w/ Angular Material

    In order to use the PX Blue themes and font (Open Sans), you will need to modify your angular.json file "styles" entries (there is one under "build" and one under "test") to include the PX Blue themes and Open Sans reference:

    "styles": [
        "src/styles.scss",
        "./node_modules/@pxblue/themes/angular/theme.scss",
        "./node_modules/typeface-open-sans"
    ],
    

    Alternatively, you can also import the theme file in your top-level SCSS file.

    // in styles.scss or your top-level scss file
    import '~@pxblue/themes/angular/theme.scss'
    

    You can then apply the theme to your application by adding the proper class to your application's top-level element:

    // Default Theme
    <app-root class="pxb-blue">
    
    // Dark Theme
    <app-root class="pxb-blue-dark">
    

    If you do not specify a theme class, your application will use the default Material theme.

    React w/ Material UI

    import { 
        MuiThemeProvider, 
        createMuiTheme 
    } from '@material-ui/core/styles';
    import * as PXBThemes from '@pxblue/themes/react';
    require('typeface-open-sans');
    
    ...
    // Default Theme
    <MuiThemeProvider theme={createMuiTheme(PXBThemes.blue)}>
        <App />
    </MuiThemeProvider>
    ...
    // Dark Theme
    <MuiThemeProvider theme={createMuiTheme(PXBThemes.blueDark)}>
        <App />
    </MuiThemeProvider>
    

    React Native w/ @pxblue/react-native-components

    import { ThemeProvider } from '@pxblue/react-native-components';
    import * as PXBThemes from '@pxblue/themes/react-native';
    ...
    <ThemeProvider theme={PXBThemes.blue}>
        <App />
    </ThemeProvider>
    

    NOTE: Using the PX Blue React Native theme requires that you add the Open Sans font to your application. You can learn how to do this by reading the instructions for Vanilla React Native or Expo.

    When using Expo, you will need to specify the name for each font weight you load using the format OpenSans-<Weight>, e.g., OpenSans-SemiBold. Refer to one of our React Native demos for reference.

    Demos

    Framework Live Examples
    Angular View on Stackblitz
    React View on Code Sandbox
    React Native Coming Soon

    Install

    npm i @pxblue/themes

    DownloadsWeekly Downloads

    155

    Version

    3.0.2

    License

    BSD-3-Clause

    Unpacked Size

    38.2 kB

    Total Files

    29

    Last publish

    Collaborators

    • avatar