Package Exports

@aotearoan/neon

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@aotearoan/neon) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

neon

Documentation & Demo

Full documentation is available on the demo site.

Installation

Install with NPM:

npm install @aotearoan/neon

or yarn:

yarn add @aotearoan/neon

Usage

Javascript/Typescript

Import components and supporting classes like so:

import { Component, Vue } from 'vue-property-decorator';
import { NeonLogo } from '@aotearoan/neon';

@Component({
  components: {
    NeonLogo,
  },
})
export default class App extends Vue {}

SASS

First select a theme:

classic
sharp

To use a theme without any customization simply import the basic theme file, e.g. to import the classic theme:

@import '~@aotearoan/neon/themes/classic';

If, however you would like to override/customize the theme then you need to include the following:

.app {
  &.neon-theme--classic {
    // override colors, palettes and other basic variables here BEFORE importing the theme, e.g. $color-primary: #bada55
    @import '~@aotearoan/neon/themes/classic/theme';
    // include custom app SASS here (you can use neon's defined variables, mixins and functions)
    &.neon-mode--dark {
      // override dark mode specific variables here, e.g. $border-color: #bada55
      @import '~@aotearoan/neon/themes/classic/dark';
      // include custom app dark mode SASS here (you can use neon's defined variables, mixins and functions)
    }
    &.neon-mode--light {
      // override light mode specific variables here, e.g. $border-color: #bada55
      @import '~@aotearoan/neon/themes/classic/light';
      // include custom app light mode SASS here (you can use neon's defined variables, mixins and functions)
    }
  }
}

Finally, the theme and mode (light/dark) need to be set on the document, e.g. to set the classic theme and dark mode:

<html class="app neon neon-theme--classic neon-mode--dark">