Loom's Design System
Getting started
Installation
Add Lens to your app:
yarn add @loomhq/lens
Base styles
Add <BaseStyles />
component to your app, it injects global styles into the body
tag. Place this component in a high level so it's always loaded in the app.
Example:
import { BaseStyles } from "@loomhq/lens"
const App = () => (
<div>
<BaseStyles />
<AppContent />
</div>
)
Usage
Lens exports three types of contents:
Import variables
Example:
import { textSizes } from "@loomhq/lens"
const CustomComponent = styled.div`
text-size: ${textSizes.large.fontSize};
line-height: ${textSizes.large.lineHeight};
`
Import utilities
Example:
import { getTextSize } from "@loomhq/lens"
const CustomComponent = styled.div`
${getTextSize("large")};
`
Import components
Example:
import { Text } from "@loomhq/lens"
<Text size="large">Some text</Text>
Running Locally
yarn
yarn start
navigate to: http://localhost:6006/