@loomhq/lens 10.36.0 → 10.37.0

package/README.md

@@ -7,11 +7,13 @@
 ## Installation
 
 Add Lens to your app:
+
 ```
 yarn add @loomhq/lens
 ```
 
 Add dependencies:
+
 ```
 yarn add @emotion/core
 yarn add @emotion/styled
@@ -30,6 +32,7 @@ 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')
@@ -48,11 +51,23 @@ document.head.appendChild(style);
 ```
 
 ## Running Locally
+
 ```
 yarn
 yarn dev
 navigate to: http://localhost:3000
 ```
 
+## Contributing
+
+### Use conventional commits
+
+Use [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) 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](http://github.com/loomhq/loom), `cd src/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](https://github.com/loomhq/lens/pull/381/files) for an example PR or watch https://www.loom.com/share/26e36c6616be4db386192467b88edbc9 for a step-by-step walkthrough.
+
 ## Documentation
+
 https://lens.loom.dev

package/dist/components/avatar/avatar.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { getSizeValue, u } from '../../utilities';
+import { getRadius, getSizeValue, u } from '../../utilities';
 import React from 'react';
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
@@ -39,7 +39,7 @@ const AvatarWrapper = styled.span `
   display: block;
   color: var(--lns-color-orangeDark);
   background-color: var(--lns-color-background);
-  border-radius: 100%;
+  ${getRadius('full')};
   overflow: hidden;
   display: flex;
   align-items: center;

package/dist/components/container/container.d.ts

@@ -9,7 +9,7 @@ interface SharedProps {
     backgroundColor?: string;
     contentColor?: string;
     borderColor?: string;
-    radius?: 'medium';
+    radius?: 'medium' | 'large' | 'xlarge' | 'full';
     borderSide?: 'all' | 'left' | 'right' | 'top' | 'bottom';
     shadow?: 'small' | 'medium' | 'large';
     padding?: ResponsiveType<string | number>;

package/dist/components/container/container.js

@@ -59,7 +59,7 @@ const Container = (_a) => {
     return (React.createElement(ContainerWrapper, Object.assign({ backgroundColor: backgroundColor, contentColor: contentColor, borderColor: borderColor, radius: radius, borderSide: borderSide, shadow: shadow, padding: padding, paddingLeft: paddingX || paddingLeft, paddingRight: paddingX || paddingRight, paddingTop: paddingY || paddingTop, paddingBottom: paddingY || paddingBottom, margin: margin, marginLeft: marginX || marginLeft, marginRight: marginX || marginRight, marginTop: marginY || marginTop, marginBottom: marginY || marginBottom, width: width, height: height, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight, as: htmlTag, position: position, top: top, bottom: bottom, left: left, right: right, overflow: overflow, zIndex: zIndex, borderWidth: borderWidth }, props), children));
 };
 export const availableBorderSides = ['all', 'left', 'right', 'top', 'bottom'];
-export const availableRadii = ['medium'];
+export const availableRadii = ['medium', 'large', 'xlarge', 'full'];
 export const availableHtmlTags = [
     'div',
     'header',

package/dist/components/radio/radio.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef } from 'react';
-import { getColorValue, getFocusRing, u } from '../../utilities';
+import { getColorValue, getFocusRing, getRadius, u } from '../../utilities';
 import styled from '@emotion/styled';
 const RadioLabel = styled.label `
   display: block;
@@ -63,7 +63,7 @@ const RadioBox = styled.span `
   cursor: pointer;
   width: ${u(2.25)};
   height: ${u(2.25)};
-  border-radius: ${u(2.25)};
+  ${getRadius('full')};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -73,7 +73,7 @@ const RadioBox = styled.span `
     content: '';
     width: ${u(1)};
     height: ${u(1)};
-    border-radius: ${u(1)};
+    ${getRadius('full')};
     background-color: ${getColorValue('white')};
   }
 `;

package/dist/variables.d.ts

@@ -45,14 +45,19 @@ export namespace fontWeights {
 export namespace radii {
     const medium_2: string;
     export { medium_2 as medium };
+    const large_1: string;
+    export { large_1 as large };
+    const xlarge_1: string;
+    export { xlarge_1 as xlarge };
+    export const full: string;
 }
 export namespace shadows {
     const small_1: string;
     export { small_1 as small };
     const medium_3: string;
     export { medium_3 as medium };
-    const large_1: string;
-    export { large_1 as large };
+    const large_2: string;
+    export { large_2 as large };
 }
 export namespace spaces {
     export const xsmall: number;
@@ -60,10 +65,10 @@ export namespace spaces {
     export { small_2 as small };
     const medium_4: number;
     export { medium_4 as medium };
-    const large_2: number;
-    export { large_2 as large };
-    const xlarge_1: number;
-    export { xlarge_1 as xlarge };
+    const large_3: number;
+    export { large_3 as large };
+    const xlarge_2: number;
+    export { xlarge_2 as xlarge };
     const xxlarge_1: number;
     export { xxlarge_1 as xxlarge };
 }
@@ -74,6 +79,6 @@ export namespace breakpoints {
     export { small_3 as small };
     const medium_5: string;
     export { medium_5 as medium };
-    const large_3: string;
-    export { large_3 as large };
+    const large_4: string;
+    export { large_4 as large };
 }

package/dist/variables.js

@@ -33,7 +33,10 @@ export const fontWeights = {
     black: 900,
 };
 export const radii = {
-    medium: u(0.75),
+    medium: u(1),
+    large: u(2),
+    xlarge: u(4),
+    full: u(999),
 };
 export const shadows = {
     small: `0 ${u(0.5)} ${u(1.25)} hsla(0, 0%, 0%, 0.05)`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "10.36.0",
+  "version": "10.37.0",
   "scripts": {
     "dev": "next",
     "build:next": "next build",