@flodesk/grain 1.1.5 → 1.2.2
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/es/base-styles.css +34 -7
- package/es/components/text/index.js +1 -1
- package/es/hooks/use-window-size.js +19 -1
- package/package.json +2 -1
package/es/base-styles.css
CHANGED
|
@@ -1,17 +1,38 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--
|
|
3
|
-
|
|
2
|
+
--grn-unit: 8px;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
:root {
|
|
6
|
+
--textIncrement: calc(0.2vw + 2px);
|
|
4
7
|
|
|
5
|
-
--grn-text-s:
|
|
6
|
-
--grn-text-m: var(--
|
|
7
|
-
--grn-text-l: calc(var(--grn-text-m) + var(--
|
|
8
|
-
--grn-text-xl: calc(var(--grn-text-l) + var(--
|
|
9
|
-
--grn-text-xxl: calc(var(--grn-text-xl) + var(--
|
|
8
|
+
--grn-text-s: calc(var(--grn-unit) * 1.625);
|
|
9
|
+
--grn-text-m: calc(var(--grn-unit) * 1.875);
|
|
10
|
+
--grn-text-l: calc(var(--grn-text-m) + var(--textIncrement));
|
|
11
|
+
--grn-text-xl: calc(var(--grn-text-l) + var(--textIncrement));
|
|
12
|
+
--grn-text-xxl: calc(var(--grn-text-xl) + var(--textIncrement));
|
|
13
|
+
}
|
|
10
14
|
|
|
15
|
+
:root {
|
|
11
16
|
--grn-weight-normal: 400;
|
|
17
|
+
--grn-weight-medium: 500;
|
|
12
18
|
--grn-weight-semiBold: 600;
|
|
13
19
|
}
|
|
14
20
|
|
|
21
|
+
:root {
|
|
22
|
+
--grn-space-xs: calc(var(--grn-unit) / 2);
|
|
23
|
+
--grn-space-s: calc(var(--grn-unit) * 1);
|
|
24
|
+
--grn-space-m: calc(var(--grn-unit) * 2);
|
|
25
|
+
--grn-space-l: calc(var(--grn-unit) * 3);
|
|
26
|
+
--grn-space-xl: calc(var(--grn-unit) * 5);
|
|
27
|
+
--grn-space-xxl: calc(var(--grn-unit) * 7);;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
:root {
|
|
31
|
+
--grn-color-body: hsl(0 0% 7%);
|
|
32
|
+
--grn-color-bodyDimmed: hsl(0 0% 7% / 40%);
|
|
33
|
+
--grn-color-primary: hsl(0 0% 7%);
|
|
34
|
+
}
|
|
35
|
+
|
|
15
36
|
* {
|
|
16
37
|
letter-spacing: calc(1.3px - 0.07em);
|
|
17
38
|
line-height: calc(5px + 1em);
|
|
@@ -19,8 +40,14 @@
|
|
|
19
40
|
-moz-osx-font-smoothing: grayscale;
|
|
20
41
|
}
|
|
21
42
|
|
|
43
|
+
*, *:before, *:after {
|
|
44
|
+
box-sizing: border-box;
|
|
45
|
+
}
|
|
46
|
+
|
|
22
47
|
body {
|
|
23
48
|
font-family: 'BeausiteClassic';
|
|
49
|
+
color: var(--grn-color-body);
|
|
50
|
+
font-size: var(--grn-text-m);
|
|
24
51
|
}
|
|
25
52
|
|
|
26
53
|
a {
|
|
@@ -11,7 +11,7 @@ import React from "react";
|
|
|
11
11
|
import { getTextSize } from '../../utilities';
|
|
12
12
|
import styled from "@emotion/styled";
|
|
13
13
|
export var textSizes = ['s', 'm', 'l', 'xl', 'xxl'];
|
|
14
|
-
export var weights = ['normal', 'semiBold'];
|
|
14
|
+
export var weights = ['normal', 'medium', 'semiBold'];
|
|
15
15
|
var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: block;\n font-size: ", ";\n font-weight: var(--grn-weight-", ");\n"])), function (p) {
|
|
16
16
|
return getTextSize(p.size);
|
|
17
17
|
}, function (p) {
|
|
@@ -46,4 +46,22 @@ export function useWindowSize() {
|
|
|
46
46
|
};
|
|
47
47
|
}, []);
|
|
48
48
|
return windowSize;
|
|
49
|
-
}
|
|
49
|
+
}
|
|
50
|
+
export var useComputedStyle = function useComputedStyle(ref, property) {
|
|
51
|
+
var _useState3 = useState(),
|
|
52
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
53
|
+
computedValue = _useState4[0],
|
|
54
|
+
setComputedValue = _useState4[1];
|
|
55
|
+
|
|
56
|
+
var windowSize = useWindowSize();
|
|
57
|
+
useEffect(function () {
|
|
58
|
+
if (typeof window !== "undefined") {
|
|
59
|
+
var getStyle = function getStyle(style) {
|
|
60
|
+
return window.getComputedStyle(ref.current).getPropertyValue(style);
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
setComputedValue(getStyle(property));
|
|
64
|
+
}
|
|
65
|
+
}, [windowSize]);
|
|
66
|
+
return computedValue;
|
|
67
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flodesk/grain",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.2",
|
|
4
4
|
"description": "Flodesk design system",
|
|
5
5
|
"module": "es/index.js",
|
|
6
6
|
"author": "Flodesk",
|
|
@@ -40,6 +40,7 @@
|
|
|
40
40
|
"@semantic-release/git": "^10.0.1",
|
|
41
41
|
"@semantic-release/gitlab": "^9.3.1",
|
|
42
42
|
"@semantic-release/npm": "^9.0.1",
|
|
43
|
+
"colord": "^2.9.2",
|
|
43
44
|
"cross-env": "^7.0.3",
|
|
44
45
|
"del-cli": "^4.0.1",
|
|
45
46
|
"eslint": "8.16.0",
|