Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.

Stars: ✭ 6,398 (+10219.35%)

Mutual labels: web-components, component-library

Minimal-Blog

Tailwind CSS Starter Template - Minimal Blog

Stars: ✭ 100 (+61.29%)

Mutual labels: minimal, minimalist

Boston-Icons

Boston is an exclusive icon theme inspired by functionalist design and a touch of early computer icons. The project is focused on elemental properties, basic shapes, a reduced color palette and visual hierarchy.

Stars: ✭ 106 (+70.97%)

Mutual labels: minimal, minimalist

View All Similar Projects ➔

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

operatortc / components

Programming Languages

Labels

Projects that are alternatives of or similar to components