@loomhq/lens 10.41.0 → 10.42.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/base-styles/base-styles.js +2 -0
- package/dist/components/button/button.js +2 -2
- package/dist/components/color-picker/color-picker.js +1 -1
- package/dist/components/icon-button/icon-button.js +3 -3
- package/dist/components/menu/menu.js +2 -2
- package/dist/components/text-button/text-button.js +2 -2
- package/dist/components/textarea/textarea.js +1 -1
- package/dist/css-variables/index.js +1 -1
- package/package.json +1 -1
|
@@ -7,6 +7,8 @@ const buildGlobalStylesheet = (rootElement = ':root', bodyElement = 'body') => {
|
|
|
7
7
|
return `
|
|
8
8
|
${rootElement} {
|
|
9
9
|
font-size: 100%;
|
|
10
|
+
--lns-radius-thread-full: var(--lns-radius-medium);
|
|
11
|
+
--lns-radius-thread-large: var(--lns-radius-medium);
|
|
10
12
|
}
|
|
11
13
|
${bodyElement} {
|
|
12
14
|
font-family: circular, -apple-system, BlinkMacSystemFont, Segoe UI,
|
|
@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import { getColorValue, getFocusRing, getFontWeight,
|
|
12
|
+
import { getColorValue, getFocusRing, getFontWeight, getSize, getTextSize, u, } from '../../utilities';
|
|
13
13
|
import Icon from '../icon/icon';
|
|
14
14
|
import Loader from '../loader/loader';
|
|
15
15
|
import React from 'react';
|
|
@@ -102,7 +102,7 @@ const ButtonWrapper = styled.button `
|
|
|
102
102
|
white-space: nowrap;
|
|
103
103
|
border: 1px solid;
|
|
104
104
|
${getFontWeight('medium')};
|
|
105
|
-
|
|
105
|
+
border-radius: var(--lns-radius-thread-full);
|
|
106
106
|
${props => props.hasFullWidth ? 'display: flex; width: 100%' : 'display: inline-flex'};
|
|
107
107
|
height: ${props => sizesStyles[props.size].height};
|
|
108
108
|
min-width: ${props => sizesStyles[props.size].height};
|
|
@@ -70,7 +70,7 @@ const ColorBox = styled.div `
|
|
|
70
70
|
left: var(--lns-space-xsmall);
|
|
71
71
|
top: var(--lns-space-xsmall);
|
|
72
72
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
73
|
-
border-radius:
|
|
73
|
+
border-radius: var(--lns-radius-thread-full);
|
|
74
74
|
background-color: ${props => props.color};
|
|
75
75
|
`;
|
|
76
76
|
const ButtonWrapper = styled.div `
|
|
@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import { getColorValue, getFocusRing,
|
|
12
|
+
import { getColorValue, getFocusRing, u } from '../../utilities';
|
|
13
13
|
import Icon from '../icon/icon';
|
|
14
14
|
import React from 'react';
|
|
15
15
|
import styled from '@emotion/styled';
|
|
@@ -38,7 +38,7 @@ export const IconButtonBox = styled.button `
|
|
|
38
38
|
justify-content: center;
|
|
39
39
|
align-items: center;
|
|
40
40
|
vertical-align: middle;
|
|
41
|
-
|
|
41
|
+
border-radius: var(--lns-radius-thread-full);
|
|
42
42
|
font: inherit;
|
|
43
43
|
|
|
44
44
|
&:hover {
|
|
@@ -63,7 +63,7 @@ export const IconButtonBox = styled.button `
|
|
|
63
63
|
display: block;
|
|
64
64
|
position: absolute;
|
|
65
65
|
top: 0;
|
|
66
|
-
|
|
66
|
+
border-radius: var(--lns-radius-thread-full);
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
&:focus-visible:before {
|
|
@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import { getColorValue,
|
|
12
|
+
import { getColorValue, getShadow, getSize, u } from '../../utilities';
|
|
13
13
|
import Icon from '../icon/icon';
|
|
14
14
|
import React from 'react';
|
|
15
15
|
import { SvgCheck } from '../icon/available-icons';
|
|
@@ -27,7 +27,7 @@ const MenuWrapper = styled.ul `
|
|
|
27
27
|
overflow: auto;
|
|
28
28
|
border: 1px solid ${getColorValue('border')};
|
|
29
29
|
${getShadow('medium')};
|
|
30
|
-
|
|
30
|
+
border-radius: var(--lns-radius-thread-large);
|
|
31
31
|
`;
|
|
32
32
|
const MenuItemWrapper = styled.li `
|
|
33
33
|
display: grid;
|
|
@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import { getColorValue, getFocusRing, getFontWeight,
|
|
12
|
+
import { getColorValue, getFocusRing, getFontWeight, getTextSize, u, } from '../../utilities';
|
|
13
13
|
import Container from '../container/container';
|
|
14
14
|
import Icon from '../icon/icon';
|
|
15
15
|
import React from 'react';
|
|
@@ -41,7 +41,7 @@ const TextButtonWrapper = styled.button `
|
|
|
41
41
|
transition: 0.6s background-color;
|
|
42
42
|
color: ${getColorValue('body')};
|
|
43
43
|
${getFontWeight('medium')};
|
|
44
|
-
|
|
44
|
+
border-radius: var(--lns-radius-thread-full);
|
|
45
45
|
${props => getTextSize(sizeStyles[props.size].textSize)};
|
|
46
46
|
padding: 0 ${u(xSpace)};
|
|
47
47
|
${props => props.offsetSide && `margin-${props.offsetSide}: ${u(-xSpace)}`};
|
|
@@ -30,7 +30,7 @@ const TextareaWrapper = styled.textarea `
|
|
|
30
30
|
background-color: ${getColorValue('formFieldBackground')};
|
|
31
31
|
transition: 0.3s box-shadow;
|
|
32
32
|
padding: ${props => sizesStyles[props.size].padding};
|
|
33
|
-
border-radius: var(--lns-
|
|
33
|
+
border-radius: var(--lns-radius-thread-large);
|
|
34
34
|
box-shadow: inset 0 0 0 var(--lns-formFieldBorderWidth)
|
|
35
35
|
var(--lns-color-formFieldBorder);
|
|
36
36
|
${props => getTextSize(sizesStyles[props.size].textSize)};
|
|
@@ -60,7 +60,7 @@ export const formFieldVariables = getCssVarsFromObject(undefined, {
|
|
|
60
60
|
formFieldBorderWidth: '1px',
|
|
61
61
|
formFieldBorderWidthFocus: '2px',
|
|
62
62
|
formFieldHeight: u(4.5),
|
|
63
|
-
formFieldRadius: 'var(--lns-radius-
|
|
63
|
+
formFieldRadius: 'var(--lns-radius-thread-full)',
|
|
64
64
|
formFieldHorizontalPadding: u(1.5),
|
|
65
65
|
formFieldBorderShadow: `
|
|
66
66
|
inset 0 0 0 var(--lns-formFieldBorderWidth) var(--lns-color-formFieldBorder)
|