@loomhq/lens
    TypeScript icon, indicating that this package has built-in type declarations

    10.51.1 • 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
    

    Contributing

    Use conventional commits

    Use conventional commits to kick off publishing a new version of Lens when PR is merged. To upgrade Lens to the latest published version in the main Loom repo, cd projects/webapp-client and pnpm up @loomhq/lens.

    Add an icon to the icon set

    Once you have the SVG of the new icon to be added, make sure all strokes are outlined. Set <svg> attributes to viewBox="0 0 24 24" fill="none" {...props} and <path> attributes to fill="currentColor". Follow this for an example PR or watch https://www.loom.com/share/26e36c6616be4db386192467b88edbc9 for a step-by-step walkthrough.

    Documentation

    https://lens.loom.dev

    Keywords

    none

    Install

    npm i @loomhq/lens

    DownloadsWeekly Downloads

    6,054

    Version

    10.51.1

    License

    ISC

    Unpacked Size

    545 kB

    Total Files

    670

    Last publish

    Collaborators

    • rahirikar
    • peterheesterman
    • diaswrd-loom
    • steveatloom
    • dainguyendo-loom
    • complicated-cog
    • gchildsloom
    • garshythoel
    • anthonyloom
    • swac-loom
    • yoannloom
    • avanikaloom
    • amanda-loom
    • loom-infra-robot
    • lingrino
    • brett-loom
    • ilyalavrenov
    • stuti43
    • gkim795
    • laurabarrera
    • akash.sant
    • boekatloom
    • junekimloomcom
    • wmiller112
    • nsujela
    • sadebrowne
    • emilyteng
    • joeyma22
    • yoichi
    • paul.kuang
    • pjang-loom
    • nathanthomas
    • andi-ni-loom
    • brian-liao-loom
    • jflashlight
    • dkim96
    • btuttle
    • brian-nguyen-loom
    • maitri.shah
    • jose.medina
    • ben.lo
    • sergioloom
    • dainguyendo
    • tatiana_loom
    • jessica.pancer
    • thefriendlyghost
    • josh_loom
    • vinayh
    • loom.embed-sdk
    • nymerias
    • ydep
    • luis.loom
    • sravanti
    • premaloom
    • vladloom
    • angelaliu
    • rodrigoloom
    • noah.loom
    • jennyloom
    • juliannaroenloom
    • marni.kostman
    • cndreisbach
    • narayangowraj8
    • dj_haile
    • catherinelin
    • andrzej.wisniewski
    • mosesj-loom
    • matt.lavine
    • erinbyerly
    • cwaslo-loom
    • aditya_singla
    • jiaweiou
    • loominghoward
    • vishalsantoshi
    • wilbertthelam