@socketsupply/components
TypeScript icon, indicating that this package has built-in type declarations

14.0.13 • Public • Published

SYNOPSIS

A bundle of example components built with Tonic.

USAGE

To use this example component library, install the following dependencies, Then, either register the components you want to bundle.

npm install @socketsupply/tonic
npm install @socketsupply/components

INCLUDE INDIVIDUAL COMPONENTS

import Tonic from '@socketsupply/tonic'
import { TonicInput } from '@socketsupply/components/input'
import { TonicIcon } from '@socketsupply/components/icon'

Tonic.add(TonicInput, 'tonic-input')
Tonic.add(TonicIcon, 'tonic-icon')

INCLUDE COMPONENT COLLECTION

import Tonic from '@socketsupply/tonic'
import bundle from '@socketsupply/components'

bundle(Tonic) // attach everything

THEME

Tonic uses CSS variables (which work in all major browsers) to theme components. So you can use any css framework you want. The following variables are observed but are not required.

FONTS

body {
  --tonic-body: 'Inter', sans-serif;
  --tonic-header: 'Inter Black', sans-serif;
  --tonic-subheader: 'Inter Medium', sans-serif;
  --tonic-monospace: 'FiraMono', monospace;
}

LIGHT THEME (DEFAULT)

body, *[theme="light"] {
  --tonic-background: rgba(245, 245, 245, 1);
  --tonic-window: rgba(255, 255, 255, 1);
  --tonic-accent: rgba(56, 185, 255, 1);
  --tonic-primary: rgba(54, 57, 61, 1);
  --tonic-secondary: rgba(232, 232, 228, 1);
  --tonic-light: rgba(153, 157, 160, 1);
  --tonic-medium: rgba(153, 157, 160, 1);
  --tonic-shadow: rgba(150, 150, 150, 0.25);
  --tonic-dark: rgba(54, 57, 61, 1);
  --tonic-disabled: rgba(152, 161, 175, 1);
  --tonic-button-text: rgba(54, 57, 61, 1);
  --tonic-button-shadow: rgba(0, 0, 0, 33%);
  --tonic-button-background: rgba(245, 245, 245, 1);
  --tonic-button-background-hover: rgba(230, 230, 230, 1);
  --tonic-button-background-focus: rgba(237, 237, 237, 1);
  --tonic-input-text: rgba(54, 57, 61, 1);
  --tonic-input-text-hover: rgba(228, 228, 228, 1);
  --tonic-input-border: rgba(201, 201, 201, 1);
  --tonic-input-border-hover: rgba(54, 57, 61, 1);
  --tonic-input-background: rgba(248, 248, 248, 1);
  --tonic-input-background-focus: rgba(238, 238, 238, 1);
  --tonic-border: rgba(224, 224, 224, 1);
  --tonic-border-accent: rgba(206, 206, 206, 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);
  --tonic-overlay: rgba(255, 255, 255, 0.75);
}

DARK THEME

*[theme="dark"] {
  --tonic-background: rgba(40, 40, 40, 1);
  --tonic-window: rgba(49, 49, 49, 1);
  --tonic-accent: rgba(56, 185, 255, 1);
  --tonic-primary: rgba(255, 255, 255, 1);
  --tonic-secondary: rgba(195, 195, 195, 1);
  --tonic-medium: rgba(153, 157, 160, 1);
  --tonic-dark: rgba(41, 41, 41, 1);
  --tonic-shadow: rgba(0, 0, 0, 0.3);
  --tonic-disabled: rgba(170, 170, 170, 1);
  --tonic-button-text: rgba(255, 255, 255, 1);
  --tonic-button-shadow: rgba(0, 0, 0, 1);
  --tonic-button-background: rgba(74, 74, 74, 1);
  --tonic-button-background-hover: rgba(94, 94, 94, 1);
  --tonic-button-background-focus: rgba(84, 84, 84, 1);
  --tonic-input-text: rgba(255, 255, 255, 1);
  --tonic-input-text-hover: rgba(255, 255, 255, 1);
  --tonic-input-background: rgba(45, 45, 45, 1);
  --tonic-input-background-focus: rgba(30, 30, 30, 1);
  --tonic-input-border: rgba(80, 80, 80, 1);
  --tonic-input-border-hover: rgba(105, 105, 105, 1);
  --tonic-border: rgba(72, 72, 72, 1);
  --tonic-border-accent: rgba(90, 90, 90, 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);
  --tonic-overlay: rgba(0, 0, 0, 0.40);
}

Dependents (1)

Package Sidebar

Install

npm i @socketsupply/components

Weekly Downloads

33

Version

14.0.13

License

ISC

Unpacked Size

279 kB

Total Files

72

Last publish

Collaborators

  • bret
  • chicoxyzzy
  • hij1nx
  • werle
  • raynos