Odyssey styleguide

Odyssey styleguide

====

This is Odyssey's living styleguide, based on https://www.figma.com/file/efREcugPMTSDvkRRpBXBf5/Design-System-Odyssey?node-id=95%3A2

Installation

npm install @odysseyattribution/styleguide

Usage

/** Import everything */
@import "~odyssey-styleguide";
/** Import a specific component */
@import "~odyssey-styleguide/src/components/button";

Running Locally

You can run the styleguide once if you are not working on it with:

npm run serve

or

You can run this to see styling changes automatically. However when changing the structure of your KSS comments you will need to re-run npm run kssandserve.

npm run build:watch // Watch changes in one terminal
npm run kssandserve // Build KSS and serve styleguide in another terminal

*On first install possibly install cross-env globally.

npm install --global cross-env

Dark Theme

To see the styleguide in dark theme you can use the following commands:

npm run build:dark // Build the styleguide files with the dark colors
npm run serve:dark // Build and serve the styleguide files with dark colors

// For seeing styleguide changes
npm run build:watch // Watch changes in one terminal
npm run kssandserve:dark // Build KSS and serve styleguide in another terminal