OCTO Design System

Package for implementation of OCTO's design system.

1. Getting started

With a package manager

1. Install the package :

yarn add @octo-produits-internes/design-system

2. Import the design system package in your script :

import { theme } from '@octo-produits-internes/design-system

On a static website

1. Add the unpkg.com origin to your script-src and font-src CSPs.

2. Add the package script tag to your HTML page :

<script src="https://unpkg.com/@octo-produits-internes/design-system"></script>

3. Import the package namespace in your script :

const { theme } = OctoDesignSystem

2. Documentation

Before document loading :

• a new "octo" CSS class is added with basic styling
• the following CSS variables become available
  • --octo-marine-[100, 70, 50, 20, or 5]
  • --octo-turquoise-[100, 70, 50, 20, or 5]
  • --octo-cyan-[100, 70, 50, 20, or 5]
  • --octo-green-[100, 70, 50, 20, or 5]
  • --octo-yellow-[100, 70, 50, 20, or 5]
  • --octo-orange-[100, 70, 50, 20, or 5]
  • --octo-red-[100, 70, 50, 20, or 5]
  • --octo-purple-[100, 70, 50, 20, or 5]
  • --octo-white
• the following fonts become available
  • Outfit

theme

theme.colors

Hash referencing allowed hexadecimal color values. Apart from white, all colors are a hash of tints (100, 70, 50, 20, or 5). Available colors are :

• marine
• turquoise
• green
• yellow
• orange
• red
• purple
• white

theme.fonts

Hash referencing all font-family names. Available fonts are :

• outfit

3. Development

Clone this repository and install all dependencies with yarn install --check-files. Then, the following commands will be usable :

• yarn start:example: starts a headless server at localhost:8080 to show a use case example (defined in src/main.example.ts)
• yarn start:example:ssl: same as yarn start:example but the server will serve over HTTPS, as long as you have both certs/octopod-auth.pem and certs/octopod-auth-key.pem
• yarn reinstall: reinstalls all dependencies in a clean state
• yarn build: transpiles the project from Typescript to a Javascript module in dist
• yarn build:pack: same as yarn build but compiles the code and packs it for browser use
• yarn build:pack:example: same as yarn build:pack but writes the output pack file to example, alongside all the assets and the source map file
• yarn build:pack:production: same as yarn build:pack but writes the output pack file to dist/packs, alongside the imported assets and without the source map file
• yarn test: starts tests for the specified file if specified, all files if not
• yarn test:watch: same as yarn test, but will run in watch mode
• yarn test:output: same as yarn test, but will output the results in src/config/jest/jest.result.json
• yarn test:coverage: same as yarn test:output, but will output the coverage in the console and in src/config/jest/coverage/
• yarn test:coverage:inspect: same as yarn test:coverage, but will start a headless server at localhost:8081 to show coverage results
• yarn lint:code: lint the specified TS file
• yarn lint:code:all: same as yarn lint:code, but lints on all TS files
• yarn lint:style: lint the specified style file
• yarn lint:style:all: same as yarn lint:style, but lints on all style files

4. License

All rights reserved to OCTO Technology (France). Credit goes to the Produits Internes team. Use for other businesses is strictly prohibited.