NeXTSTEP Programming Mastermind
Have ideas to improve npm?Join in the discussion! »

@loomhq/lens

8.19.0 • Public • Published

Lens — the design system for Loom products

npm

Installation

Add Lens to your app:

yarn add @loomhq/lens

Add dependencies:

yarn add @emotion/core
yarn add @emotion/styled

Install CSS variables

getThemeStylesString() and getAllCssVarsString() return strings that contain all CSS variables. Use these functions and inject the output to a style tag in the head:

import { getThemeStylesString, getAllCssVarsString } from '@loomhq/lens'

const style = document.createElement('style');
style.innerHTML = getThemeStylesString() + getAllCssVarsString();
document.head.appendChild(style);

In some cases you might need to inject the CSS variables to a specific element. Pass a string argument to getThemeStylesString() and getAllCssVarsString():

getThemeStylesString('.myGlobalElement')
getAllCssVarsString('.myGlobalElement')

Install CSS utilities

CSS classes are exported as a string and can be injected to a style tag in the head:

import { cssUtilities } from '@loomhq/lens'

const style = document.createElement('style');
style.innerHTML = cssUtilities();
document.head.appendChild(style);

Running Locally

yarn
yarn dev
navigate to: http://localhost:3000

Documentation

https://lens.loom.dev

Keywords

none

Install

npm i @loomhq/lens

DownloadsWeekly Downloads

3,076

Version

8.19.0

License

ISC

Unpacked Size

854 kB

Total Files

292

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar