Skip to content
Example Components (Built with Tonic, the Web Components Framework)
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
docs
markdown
src
test
.gitignore
LICENSE.txt
README.md
index.js
package.json
theme.css

README.md

SYNOPSIS

A bundle of example components built with Tonic.

USAGE

To use this repo, install the following dependencies, then require the components module once from your bundle. This will attach all the components to Tonic. Then, require tonic wherever you want to use it.

npm install @conductorlab/tonic
npm install @conductorlab/components
const Tonic = require('@conductorlab/tonic')
const attachComponents = require('@conductorlab/components')

attachComponents(Tonic)

THEME

Tonic uses CSS variables (which work in all major browsers) to theme components. The following variables are observed but are not required.

FONTS

body {
  --tonic-body: 'Avenir-Light', sans-serif; // Body font
  --tonic-header: 'Avenir-Light', sans-serif; // Header font
  --tonic-subheader: 'Avenir-Medium', sans-serif; // Accent font
  --tonic-monospace: 'IBM Plex Mono', monospace; // Monospace font
}

LIGHT THEME (DEFAULT)

body, *[theme="light"] {
  --tonic-window: rgba(255, 255, 255, 1);
  --tonic-primary: rgba(54, 57, 61, 1);
  --tonic-disabled: rgba(152, 161, 175, 1);
  --tonic-secondary: rgba(232, 232, 228, 1);
  --tonic-medium: rgba(153, 157, 160, 1);
  --tonic-accent: rgba(240, 102, 83, 1);
  --tonic-button: rgba(54, 57, 61, 1);
  --tonic-border: rgba(232, 232, 228, 1);
  --tonic-background: rgba(247, 247, 245, 1);
  --tonic-error: rgba(240, 102, 83, 1);
  --tonic-notification: rgba(240, 102, 83, 1);
  --tonic-danger: rgba(240, 102, 83, 1);
  --tonic-success: rgba(133, 178, 116, 1);
  --tonic-warning: rgba(249, 169, 103, 1);
  --tonic-info: rgba(153, 157, 160, 1);
}

DARK THEME

*[theme="dark"] {
  --tonic-window: rgba(45, 47, 49, 1);
  --tonic-primary: rgba(255, 255, 255, 1);
  --tonic-disabled: rgba(170, 170, 170, 1);
  --tonic-secondary: rgba(195, 195, 195, 1);
  --tonic-medium: rgba(153, 157, 160, 1);
  --tonic-accent: rgba(240, 102, 83, 1);
  --tonic-button: rgba(255, 255, 255, 1);
  --tonic-border: rgb(107, 107, 107);
  --tonic-background: rgba(60, 60, 60, 1);
  --tonic-error: rgba(240, 102, 83, 1);
  --tonic-notification: rgba(240, 102, 83, 1);
  --tonic-caution: rgba(240, 102, 83, 1);
  --tonic-success: rgba(133, 178, 116, 1);
  --tonic-warn: rgba(249, 169, 103, 1);
}

DEVELOPMENT

npm install
npm run dev

Go to:

https://localhost:8080/
You can’t perform that action at this time.