@loomhq/lens

Lens — the design system for Loom products

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

From the Lens directory

pnpm i
pnpm --filter @loomhq/lens dev
navigate to: http://localhost:3000

Contributing

Please surface any urgent pull requests in #lens-designsystem.

Use conventional commits

Use conventional commits messages. Once the PR is merged it will kick off publishing a new version of Lens in npm.

🚨🚨 Be aware that only feat and fix can trigger a release. 🚨🚨

Upgrading Lens versions

loom

From the root of the main Loom repo

• Make your updates in /projects/libraries/lens

• You should be able to see the updates reflected in the web app

• Run pnpm changeset when you are done with your changes

• In a separate PR, run pnpm changeset:version to publish a new version of Lens. You can expect a lot of files to be updated when this is run. Once the PR is merged you should see a new version on JFrog.

Add an icon to the icon set

As part of visual refresh, we are now using ADS icons. If your icon is already in ADS, please refer to this icon as an example. Newer icons are sometimes in a different package called icon-lab and you may need to bump the version to have it available to you. If your icon is not yet in either @atlaskit/icon or @atlaskit/icon-lab please work with your designer to get it added. If the addition of the icon is urgent, you can include the SVG code like in SvgScissors.

Add your new SVG to misc/eslint/common.js and projects/libraries/lens/src/components/icon/available-icons/index.ts.

To see if your icon is in a certain version, refer to @atlaskit/icon changelog or the @atlaskit/icon-lab changelog.

Documentation

https://lens.loom.dev