Symbols

With Symbols, you can create a Design System and use it in DOMQL, React and soon others (ask) components.

For more in-depth exmplanation check out the official documentation page.

Index

• Installation
• Initialization
• Design System
• Components

Installation

Install the CLI

npm i @symbo.ls/cli -g

or inside the project of your frontend

npm i smbls --save

Initialization

Initialize Symbols design system externally, or inject it in your already existing application.

import { init } from 'smbls'

const color = {
  oceanblue: '#112233'
}
const theme = {
  primary: {
    text: 'white',
    background: 'oceanblue 0.9',
    ':hover': {
      background: 'oceanblue'
    }
  }
}

init({ color, theme })

More about these config at the Initialization page.

Design System

Symbols provides advanced design system tools to support configuring all nessessary tokens in the web application.

You can create a designSystem.js file and insert following:

export default {
  color: {},
  theme: {},
  typography: {},
  space: {},
  media: {},
  icons: {},
  font: {},
  font_family: {},
  timing: {},
  reset: {}
}

Each token has a individual config parameters. For example colors receive following config:

const colors = {
  blue: '#112233',
  gray: ['#111', '#CCC'], // light mode, dark mode
  modal: '--gray .1', // references with gray and applies 0.1 opacity
  bg: {
    '@dark': 'black',
    '@light': 'white'
  }
}

Fonts configuration looks like this:

const font = {
  OpenSans: [{
    url: 'https://...',
    isVariable: true,
    fontStyle: 'normal',
    fontDisplay: 'swap',
    unicodeRange: 'U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF'
  }]
}

Icons receive pure SVG objects as follows:

const icons = {
  arrow: '<svg viewbox="...'
}

Although you can configure your bundler in a way that it inlines SVG imports Parcel, Vite.

The example of the default-config page. You can read more at Design System page.

---

Components

You can directly use this configuration in DOMQL and React components.

The color and fonts use would be like:

DOMQL

const MyComponent = {
  H1: { text: 'Hello!' },
  Button: {
    icon: 'arrow',
    text: 'Read More!',
    color: 'white',
    background: 'blue'
  }
}

React

const MyComponent = () => {
  <H1 text="Hello"/>
  <Button
    icon="arrow"
    text="Read More!"
    color="white"
    background="blue"
  />
}

Symbols provide all nessessary atoms and components. You can check more at our uikit library.

How components work at components page.

---

For more in-depth exmplanation check out the official documentation page.