Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/socketsupply/components
Example Components (Built with Tonic)
https://github.com/socketsupply/components
cba component-library components jam jamstack minimal minimalist ui ui-components ui-design ui-router web-components
Last synced: 4 days ago
JSON representation
Example Components (Built with Tonic)
- Host: GitHub
- URL: https://github.com/socketsupply/components
- Owner: socketsupply
- License: mit
- Created: 2018-08-07T16:41:53.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-25T11:12:49.000Z (8 months ago)
- Last Synced: 2024-12-17T06:53:50.502Z (6 days ago)
- Topics: cba, component-library, components, jam, jamstack, minimal, minimalist, ui, ui-components, ui-design, ui-router, web-components
- Language: JavaScript
- Homepage: https://tonicframework.dev
- Size: 7.59 MB
- Stars: 84
- Watchers: 8
- Forks: 8
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# SYNOPSIS
A bundle of example components built with [Tonic](https://github.com/hxoht/tonic).
# USAGE
To use this example component library, install the following dependencies,
Then, either register the components you want to bundle.
```bash
npm install @socketsupply/tonic
npm install @socketsupply/components
```
#### INCLUDE INDIVIDUAL COMPONENTS
```js
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
```js
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
```css
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)
```css
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
```css
*[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);
}
```