@loomhq/lens 10.77.0 → 10.77.2

package/dist/components/avatar/avatar.js

@@ -45,7 +45,7 @@ const AvatarWrapper = styled.span `
   align-items: center;
   justify-content: center;
   line-height: 1;
-  font-weight: var(--lns-fontWeight-medium);
+  font-weight: var(--lns-fontWeight-bold);
   ${props => getAvatarSize(props.size)};
   position: relative;
   z-index: 0;

package/dist/components/button/button.js

@@ -101,7 +101,7 @@ const ButtonWrapper = styled.button `
   vertical-align: middle;
   white-space: nowrap;
   border: 1px solid;
-  ${getFontWeight('medium')};
+  ${getFontWeight('bold')};
   ${getRadius('full')};
   ${props => props.hasFullWidth ? 'display: flex; width: 100%' : 'display: inline-flex'};
   height: ${props => sizesStyles[props.size].height};

package/dist/components/pill/pill.js

@@ -25,7 +25,7 @@ const PillWrapper = styled.div `
   background-color: ${props => getColorValue(props.backgroundColor)};
   ${getRadius('full')};
   ${getTextSize('small')};
-  ${getFontWeight('medium')};
+  ${getFontWeight('bold')};
   ${getSize('gap', 'xsmall')};
 `;
 const Pill = (_a) => {

package/dist/components/tabs/tabs.js

@@ -63,7 +63,7 @@ const TabWrapper = styled.button `
   color: inherit;
   text-decoration: none;
   flex-shrink: 0;
-  ${getFontWeight('medium')};
+  ${getFontWeight('bold')};
   transition: 0.6s color;
   white-space: nowrap;
   color: ${props => getColorValue(props.isActive ? 'body' : 'bodyDimmed')};

package/dist/components/text/text.d.ts

@@ -11,12 +11,13 @@ export declare const lineHeightToPx: (size: any) => number;
 declare const TextWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, TextWrapperProps, object>;
 declare const Text: ({ children, size, color, isInline, isDimmed, fontWeight, hasEllipsis, ellipsisLines, variant, htmlTag, alignment, sizeMinMax, ...props }: TextProps & React.ComponentProps<typeof TextWrapper>) => JSX.Element;
 export declare const availableSizes: string[];
+export declare const deprecatedSizes: string[];
 export declare const availableFontWeights: string[];
 export declare const availableHtmlTags: string[];
 export declare const alignments: string[];
 interface TextProps {
-    size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
-    fontWeight?: 'regular' | 'medium' | 'bold' | 'black';
+    size?: 'body-sm' | 'body-md' | 'body-lg' | 'heading-sm' | 'heading-md' | 'heading-lg' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
+    fontWeight?: 'book' | 'bold';
     variant?: 'body' | 'title' | 'mainTitle';
     alignment?: 'left' | 'right' | 'center';
     color?: string;

package/dist/components/text/text.js

@@ -17,16 +17,16 @@ import { textIsDimmedDeprecated } from '../../console-messages';
 export const dimAmount = 0.6;
 export const variants = {
     body: {
-        size: 'medium',
-        fontWeight: 'regular',
+        size: 'body-md',
+        fontWeight: 'book',
     },
     title: {
-        size: 'large',
+        size: 'body-lg',
         fontWeight: 'bold',
     },
     mainTitle: {
-        size: 'xxlarge',
-        fontWeight: 'black',
+        size: 'heading-md',
+        fontWeight: 'bold',
     },
 };
 const getTextPxSize = size => textSizes[size].fontSize * unit;
@@ -77,13 +77,21 @@ const TextWrapper = styled.span `
   `}
 `;
 const Text = (_a) => {
-    var { children, size = 'medium', color, isInline, isDimmed, fontWeight = 'regular', hasEllipsis, ellipsisLines, variant, htmlTag = 'span', alignment, sizeMinMax } = _a, props = __rest(_a, ["children", "size", "color", "isInline", "isDimmed", "fontWeight", "hasEllipsis", "ellipsisLines", "variant", "htmlTag", "alignment", "sizeMinMax"]);
+    var { children, size = 'body-md', color, isInline, isDimmed, fontWeight = 'book', hasEllipsis, ellipsisLines, variant, htmlTag = 'span', alignment, sizeMinMax } = _a, props = __rest(_a, ["children", "size", "color", "isInline", "isDimmed", "fontWeight", "hasEllipsis", "ellipsisLines", "variant", "htmlTag", "alignment", "sizeMinMax"]);
     if (isDimmed) {
         console.warn(textIsDimmedDeprecated);
     }
     return (React.createElement(TextWrapper, Object.assign({ size: variant ? variants[variant].size : size, color: color, isInline: isInline, isDimmed: isDimmed, fontWeight: variant ? variants[variant].fontWeight : fontWeight, hasEllipsis: hasEllipsis, ellipsisLines: ellipsisLines, variant: variant, as: htmlTag, alignment: alignment, sizeMinMax: sizeMinMax }, props), children));
 };
 export const availableSizes = [
+    'body-sm',
+    'body-md',
+    'body-lg',
+    'heading-sm',
+    'heading-md',
+    'heading-lg',
+];
+export const deprecatedSizes = [
     'small',
     'medium',
     'large',
@@ -91,7 +99,7 @@ export const availableSizes = [
     'xxlarge',
     'xxxlarge',
 ];
-export const availableFontWeights = ['regular', 'medium'];
+export const availableFontWeights = ['book', 'bold'];
 export const availableHtmlTags = ['h1', 'h2', 'h3', 'h4', 'p', 'span', 'div'];
 export const alignments = ['left', 'right', 'center'];
 export default Text;

package/dist/components/text-button/text-button.js

@@ -41,7 +41,7 @@ const TextButtonWrapper = styled.button `
   cursor: pointer;
   transition: 0.6s background-color;
   color: ${getColorValue('body')};
-  ${getFontWeight('medium')};
+  ${getFontWeight('bold')};
   ${getRadius('full')};
   ${props => getTextSize(sizeStyles[props.size].textSize)};
   padding: 0 ${props => sizeStyles[props.size].xSpace};

package/dist/components/tooltip/tooltip.js

@@ -38,7 +38,7 @@ const TooltipBoxWrapper = styled.div `
   background-color: ${getColorValue('background')};
   color: ${getColorValue('body')};
   ${getRadius('large')};
-  ${getFontWeight('medium')};
+  ${getFontWeight('bold')};
   ${getTextSize('small')};
   ${getShadow('medium')};
   ${props => getSize('max-width', props.maxWidth)};
@@ -50,7 +50,7 @@ const ShortcutWrapper = styled.div `
   background-color: ${getColorValue('backgroundActive')};
   border-radius: 3px;
   color: ${getColorValue('grey3')};
-  ${getFontWeight('medium')};
+  ${getFontWeight('bold')};
   ${getTextSize('small')};
   padding-left: ${u(0.5)};
   padding-right: ${u(0.5)};
@@ -149,7 +149,7 @@ const Tooltip = (_a) => {
             renderLayer(React.createElement("div", Object.assign({}, layerProps, { style: Object.assign(Object.assign({}, layerProps.style), { zIndex }) }),
                 React.createElement(TooltipBox, Object.assign({ maxWidth: maxWidth, onMouseEnter: () => setIsOverTooltip(true), onMouseLeave: () => setIsOverTooltip(false) }, rest),
                     React.createElement(Arrange, { gap: "small" },
-                        React.createElement(Text, { size: "small", fontWeight: "medium" }, content),
+                        React.createElement(Text, { size: "small", fontWeight: "bold" }, content),
                         shortcut && (React.createElement(Arrange, { gap: "xsmall" }, shortcut.map((char, index) => (React.createElement(ShortcutBox, { key: index }, char)))))))))));
 };
 export const availablePlacements = Object.keys(placements);

package/dist/variables.d.ts

@@ -1,84 +1,90 @@
 export const unit: 8;
-export namespace textSizes {
-    namespace small {
-        const fontSize: number;
-        const lineHeight: number;
-    }
-    namespace medium {
-        const fontSize_1: number;
-        export { fontSize_1 as fontSize };
-        const lineHeight_1: number;
-        export { lineHeight_1 as lineHeight };
-    }
-    namespace large {
-        const fontSize_2: number;
-        export { fontSize_2 as fontSize };
-        const lineHeight_2: number;
-        export { lineHeight_2 as lineHeight };
-    }
-    namespace xlarge {
-        const fontSize_3: number;
-        export { fontSize_3 as fontSize };
-        const lineHeight_3: number;
-        export { lineHeight_3 as lineHeight };
-    }
-    namespace xxlarge {
-        const fontSize_4: number;
-        export { fontSize_4 as fontSize };
-        const lineHeight_4: number;
-        export { lineHeight_4 as lineHeight };
-    }
-    namespace xxxlarge {
-        const fontSize_5: number;
-        export { fontSize_5 as fontSize };
-        const lineHeight_5: number;
-        export { lineHeight_5 as lineHeight };
-    }
-}
+export const textSizes: {
+    small: {
+        fontSize: number;
+        lineHeight: number;
+    };
+    'body-sm': {
+        fontSize: number;
+        lineHeight: number;
+    };
+    medium: {
+        fontSize: number;
+        lineHeight: number;
+    };
+    'body-md': {
+        fontSize: number;
+        lineHeight: number;
+    };
+    large: {
+        fontSize: number;
+        lineHeight: number;
+    };
+    'body-lg': {
+        fontSize: number;
+        lineHeight: number;
+    };
+    xlarge: {
+        fontSize: number;
+        lineHeight: number;
+    };
+    'heading-sm': {
+        fontSize: number;
+        lineHeight: number;
+    };
+    xxlarge: {
+        fontSize: number;
+        lineHeight: number;
+    };
+    'heading-md': {
+        fontSize: number;
+        lineHeight: number;
+    };
+    xxxlarge: {
+        fontSize: number;
+        lineHeight: number;
+    };
+    'heading-lg': {
+        fontSize: number;
+        lineHeight: number;
+    };
+};
 export namespace fontWeights {
-    export const regular: number;
-    const medium_1: number;
-    export { medium_1 as medium };
-    export const bold: number;
-    export const black: number;
+    const book: number;
+    const bold: number;
 }
 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;
+    const medium: string;
+    const large: string;
+    const xlarge: string;
+    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_2: string;
-    export { large_2 as large };
+    export const small: string;
+    const medium_1: string;
+    export { medium_1 as medium };
+    const large_1: string;
+    export { large_1 as large };
 }
 export namespace spaces {
     export const xsmall: number;
-    const small_2: number;
-    export { small_2 as small };
-    const medium_4: number;
-    export { medium_4 as medium };
-    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 };
+    const small_1: number;
+    export { small_1 as small };
+    const medium_2: number;
+    export { medium_2 as medium };
+    const large_2: number;
+    export { large_2 as large };
+    const xlarge_1: number;
+    export { xlarge_1 as xlarge };
+    export const xxlarge: number;
 }
 export namespace breakpoints {
     const xsmall_1: string;
     export { xsmall_1 as xsmall };
-    const small_3: string;
-    export { small_3 as small };
-    const medium_5: string;
-    export { medium_5 as medium };
-    const large_4: string;
-    export { large_4 as large };
+    const small_2: string;
+    export { small_2 as small };
+    const medium_3: string;
+    export { medium_3 as medium };
+    const large_3: string;
+    export { large_3 as large };
 }

package/dist/variables.js

@@ -5,32 +5,54 @@ export const textSizes = {
         fontSize: 1.5,
         lineHeight: 1.5,
     },
+    'body-sm': {
+        fontSize: 1.5,
+        lineHeight: 1.5,
+    },
     medium: {
         fontSize: 1.75,
         lineHeight: 1.6,
     },
+    'body-md': {
+        fontSize: 1.75,
+        lineHeight: 1.6,
+    },
     large: {
         fontSize: 2.25,
         lineHeight: 1.45,
     },
+    'body-lg': {
+        fontSize: 2.25,
+        lineHeight: 1.45,
+    },
     xlarge: {
         fontSize: 3,
         lineHeight: 1.35,
     },
+    'heading-sm': {
+        fontSize: 3,
+        lineHeight: 1.35,
+    },
     xxlarge: {
         fontSize: 4,
         lineHeight: 1.2,
     },
+    'heading-md': {
+        fontSize: 4,
+        lineHeight: 1.2,
+    },
     xxxlarge: {
         fontSize: 6,
         lineHeight: 1.15,
     },
+    'heading-lg': {
+        fontSize: 6,
+        lineHeight: 1.15,
+    },
 };
 export const fontWeights = {
-    regular: 400,
-    medium: 500,
+    book: 400,
     bold: 700,
-    black: 900,
 };
 export const radii = {
     medium: u(1),

package/package.json

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