Napoleonic Panda Machine

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

    13.2.19 • 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

    inport Tonic from '@socketsupply/tonic'
    import { TonicInput } from '@socketsupply/components/input'
    import { TonicIcon } from '@socketsupply/components/icon'
    
    Tonic.add(TonicInput)
    Tonic.add(TonicIcon)

    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);
    }

    Keywords

    none

    Install

    npm i @socketsupply/components

    DownloadsWeekly Downloads

    29

    Version

    13.2.19

    License

    ISC

    Unpacked Size

    1.02 MB

    Total Files

    79

    Last publish

    Collaborators

    • chicoxyzzy
    • hij1nx
    • dominictarr
    • werle
    • raynos