@storybook/components 6.4.0-beta.13 → 6.4.0-beta.17
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/cjs/typography/typography.stories.mdx +75 -0
- package/dist/esm/typography/typography.stories.mdx +75 -0
- package/dist/modern/typography/typography.stories.mdx +75 -0
- package/package.json +4 -4
- package/dist/cjs/typography/typography.stories.js +0 -130
- package/dist/esm/typography/typography.stories.js +0 -106
- package/dist/modern/typography/typography.stories.js +0 -91
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { typography } from '@storybook/theming';
|
|
2
|
+
import { Meta, Typeset } from '@storybook/addon-docs';
|
|
3
|
+
|
|
4
|
+
export const fontSizes = ['l3', 'l2', 'l1', 'm3', 'm2', 'm1', 's3', 's2', 's1'].map(
|
|
5
|
+
(size) => `${typography.size[size]}px`
|
|
6
|
+
);
|
|
7
|
+
|
|
8
|
+
export const sampleText =
|
|
9
|
+
'Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.';
|
|
10
|
+
|
|
11
|
+
<Meta title="Basics/Typography" />
|
|
12
|
+
|
|
13
|
+
## Sans-serif
|
|
14
|
+
|
|
15
|
+
```
|
|
16
|
+
font-family:
|
|
17
|
+
"Nunito Sans",
|
|
18
|
+
-apple-system,
|
|
19
|
+
".SFNSText-Regular",
|
|
20
|
+
"San Francisco",
|
|
21
|
+
BlinkMacSystemFont,
|
|
22
|
+
"Segoe UI",
|
|
23
|
+
"Helvetica Neue",
|
|
24
|
+
Helvetica,
|
|
25
|
+
Arial,
|
|
26
|
+
sans-serif;
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
<Typeset
|
|
30
|
+
fontFamily={typography.fonts.base}
|
|
31
|
+
fontSizes={fontSizes}
|
|
32
|
+
fontWeight={typography.weight.regular}
|
|
33
|
+
sampleText={sampleText}
|
|
34
|
+
/>
|
|
35
|
+
<Typeset
|
|
36
|
+
fontFamily={typography.fonts.base}
|
|
37
|
+
fontSizes={fontSizes}
|
|
38
|
+
fontWeight={typography.weight.bold}
|
|
39
|
+
sampleText={sampleText}
|
|
40
|
+
/>
|
|
41
|
+
<Typeset
|
|
42
|
+
fontFamily={typography.fonts.base}
|
|
43
|
+
fontSizes={fontSizes}
|
|
44
|
+
fontWeight={typography.weight.black}
|
|
45
|
+
sampleText={sampleText}
|
|
46
|
+
/>
|
|
47
|
+
|
|
48
|
+
## Monospace
|
|
49
|
+
|
|
50
|
+
```
|
|
51
|
+
font-family:
|
|
52
|
+
ui-monospace,
|
|
53
|
+
Menlo,
|
|
54
|
+
Monaco,
|
|
55
|
+
"Roboto Mono",
|
|
56
|
+
"Oxygen Mono",
|
|
57
|
+
"Ubuntu Monospace",
|
|
58
|
+
"Source Code Pro",
|
|
59
|
+
"Droid Sans Mono",
|
|
60
|
+
"Courier New",
|
|
61
|
+
monospace;
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
<Typeset
|
|
65
|
+
fontFamily={typography.fonts.mono}
|
|
66
|
+
fontSizes={fontSizes}
|
|
67
|
+
fontWeight={typography.weight.regular}
|
|
68
|
+
sampleText={sampleText}
|
|
69
|
+
/>
|
|
70
|
+
<Typeset
|
|
71
|
+
fontFamily={typography.fonts.mono}
|
|
72
|
+
fontSizes={fontSizes}
|
|
73
|
+
fontWeight={typography.weight.bold}
|
|
74
|
+
sampleText={sampleText}
|
|
75
|
+
/>
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { typography } from '@storybook/theming';
|
|
2
|
+
import { Meta, Typeset } from '@storybook/addon-docs';
|
|
3
|
+
|
|
4
|
+
export const fontSizes = ['l3', 'l2', 'l1', 'm3', 'm2', 'm1', 's3', 's2', 's1'].map(
|
|
5
|
+
(size) => `${typography.size[size]}px`
|
|
6
|
+
);
|
|
7
|
+
|
|
8
|
+
export const sampleText =
|
|
9
|
+
'Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.';
|
|
10
|
+
|
|
11
|
+
<Meta title="Basics/Typography" />
|
|
12
|
+
|
|
13
|
+
## Sans-serif
|
|
14
|
+
|
|
15
|
+
```
|
|
16
|
+
font-family:
|
|
17
|
+
"Nunito Sans",
|
|
18
|
+
-apple-system,
|
|
19
|
+
".SFNSText-Regular",
|
|
20
|
+
"San Francisco",
|
|
21
|
+
BlinkMacSystemFont,
|
|
22
|
+
"Segoe UI",
|
|
23
|
+
"Helvetica Neue",
|
|
24
|
+
Helvetica,
|
|
25
|
+
Arial,
|
|
26
|
+
sans-serif;
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
<Typeset
|
|
30
|
+
fontFamily={typography.fonts.base}
|
|
31
|
+
fontSizes={fontSizes}
|
|
32
|
+
fontWeight={typography.weight.regular}
|
|
33
|
+
sampleText={sampleText}
|
|
34
|
+
/>
|
|
35
|
+
<Typeset
|
|
36
|
+
fontFamily={typography.fonts.base}
|
|
37
|
+
fontSizes={fontSizes}
|
|
38
|
+
fontWeight={typography.weight.bold}
|
|
39
|
+
sampleText={sampleText}
|
|
40
|
+
/>
|
|
41
|
+
<Typeset
|
|
42
|
+
fontFamily={typography.fonts.base}
|
|
43
|
+
fontSizes={fontSizes}
|
|
44
|
+
fontWeight={typography.weight.black}
|
|
45
|
+
sampleText={sampleText}
|
|
46
|
+
/>
|
|
47
|
+
|
|
48
|
+
## Monospace
|
|
49
|
+
|
|
50
|
+
```
|
|
51
|
+
font-family:
|
|
52
|
+
ui-monospace,
|
|
53
|
+
Menlo,
|
|
54
|
+
Monaco,
|
|
55
|
+
"Roboto Mono",
|
|
56
|
+
"Oxygen Mono",
|
|
57
|
+
"Ubuntu Monospace",
|
|
58
|
+
"Source Code Pro",
|
|
59
|
+
"Droid Sans Mono",
|
|
60
|
+
"Courier New",
|
|
61
|
+
monospace;
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
<Typeset
|
|
65
|
+
fontFamily={typography.fonts.mono}
|
|
66
|
+
fontSizes={fontSizes}
|
|
67
|
+
fontWeight={typography.weight.regular}
|
|
68
|
+
sampleText={sampleText}
|
|
69
|
+
/>
|
|
70
|
+
<Typeset
|
|
71
|
+
fontFamily={typography.fonts.mono}
|
|
72
|
+
fontSizes={fontSizes}
|
|
73
|
+
fontWeight={typography.weight.bold}
|
|
74
|
+
sampleText={sampleText}
|
|
75
|
+
/>
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { typography } from '@storybook/theming';
|
|
2
|
+
import { Meta, Typeset } from '@storybook/addon-docs';
|
|
3
|
+
|
|
4
|
+
export const fontSizes = ['l3', 'l2', 'l1', 'm3', 'm2', 'm1', 's3', 's2', 's1'].map(
|
|
5
|
+
(size) => `${typography.size[size]}px`
|
|
6
|
+
);
|
|
7
|
+
|
|
8
|
+
export const sampleText =
|
|
9
|
+
'Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.';
|
|
10
|
+
|
|
11
|
+
<Meta title="Basics/Typography" />
|
|
12
|
+
|
|
13
|
+
## Sans-serif
|
|
14
|
+
|
|
15
|
+
```
|
|
16
|
+
font-family:
|
|
17
|
+
"Nunito Sans",
|
|
18
|
+
-apple-system,
|
|
19
|
+
".SFNSText-Regular",
|
|
20
|
+
"San Francisco",
|
|
21
|
+
BlinkMacSystemFont,
|
|
22
|
+
"Segoe UI",
|
|
23
|
+
"Helvetica Neue",
|
|
24
|
+
Helvetica,
|
|
25
|
+
Arial,
|
|
26
|
+
sans-serif;
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
<Typeset
|
|
30
|
+
fontFamily={typography.fonts.base}
|
|
31
|
+
fontSizes={fontSizes}
|
|
32
|
+
fontWeight={typography.weight.regular}
|
|
33
|
+
sampleText={sampleText}
|
|
34
|
+
/>
|
|
35
|
+
<Typeset
|
|
36
|
+
fontFamily={typography.fonts.base}
|
|
37
|
+
fontSizes={fontSizes}
|
|
38
|
+
fontWeight={typography.weight.bold}
|
|
39
|
+
sampleText={sampleText}
|
|
40
|
+
/>
|
|
41
|
+
<Typeset
|
|
42
|
+
fontFamily={typography.fonts.base}
|
|
43
|
+
fontSizes={fontSizes}
|
|
44
|
+
fontWeight={typography.weight.black}
|
|
45
|
+
sampleText={sampleText}
|
|
46
|
+
/>
|
|
47
|
+
|
|
48
|
+
## Monospace
|
|
49
|
+
|
|
50
|
+
```
|
|
51
|
+
font-family:
|
|
52
|
+
ui-monospace,
|
|
53
|
+
Menlo,
|
|
54
|
+
Monaco,
|
|
55
|
+
"Roboto Mono",
|
|
56
|
+
"Oxygen Mono",
|
|
57
|
+
"Ubuntu Monospace",
|
|
58
|
+
"Source Code Pro",
|
|
59
|
+
"Droid Sans Mono",
|
|
60
|
+
"Courier New",
|
|
61
|
+
monospace;
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
<Typeset
|
|
65
|
+
fontFamily={typography.fonts.mono}
|
|
66
|
+
fontSizes={fontSizes}
|
|
67
|
+
fontWeight={typography.weight.regular}
|
|
68
|
+
sampleText={sampleText}
|
|
69
|
+
/>
|
|
70
|
+
<Typeset
|
|
71
|
+
fontFamily={typography.fonts.mono}
|
|
72
|
+
fontSizes={fontSizes}
|
|
73
|
+
fontWeight={typography.weight.bold}
|
|
74
|
+
sampleText={sampleText}
|
|
75
|
+
/>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/components",
|
|
3
|
-
"version": "6.4.0-beta.
|
|
3
|
+
"version": "6.4.0-beta.17",
|
|
4
4
|
"description": "Core Storybook Components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook"
|
|
@@ -41,9 +41,9 @@
|
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
43
|
"@popperjs/core": "^2.6.0",
|
|
44
|
-
"@storybook/client-logger": "6.4.0-beta.
|
|
44
|
+
"@storybook/client-logger": "6.4.0-beta.17",
|
|
45
45
|
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
|
46
|
-
"@storybook/theming": "6.4.0-beta.
|
|
46
|
+
"@storybook/theming": "6.4.0-beta.17",
|
|
47
47
|
"@types/color-convert": "^2.0.0",
|
|
48
48
|
"@types/overlayscrollbars": "^1.12.0",
|
|
49
49
|
"@types/react-syntax-highlighter": "11.0.5",
|
|
@@ -76,6 +76,6 @@
|
|
|
76
76
|
"publishConfig": {
|
|
77
77
|
"access": "public"
|
|
78
78
|
},
|
|
79
|
-
"gitHead": "
|
|
79
|
+
"gitHead": "936d37ffdea541fbc8829a7ba2c357ce0a948dda",
|
|
80
80
|
"sbmodern": "dist/modern/index.js"
|
|
81
81
|
}
|
|
@@ -1,130 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _react = _interopRequireDefault(require("react"));
|
|
4
|
-
|
|
5
|
-
var _theming = require("@storybook/theming");
|
|
6
|
-
|
|
7
|
-
var _react2 = require("@storybook/react");
|
|
8
|
-
|
|
9
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
-
|
|
11
|
-
var Info = _theming.styled.div({
|
|
12
|
-
marginBottom: '3rem'
|
|
13
|
-
});
|
|
14
|
-
|
|
15
|
-
var Heading1 = _theming.styled.div(function (_ref) {
|
|
16
|
-
var theme = _ref.theme;
|
|
17
|
-
return {
|
|
18
|
-
fontSize: theme.typography.size.l3
|
|
19
|
-
};
|
|
20
|
-
});
|
|
21
|
-
|
|
22
|
-
var Heading2 = _theming.styled.div(function (_ref2) {
|
|
23
|
-
var theme = _ref2.theme;
|
|
24
|
-
return {
|
|
25
|
-
fontSize: theme.typography.size.l2
|
|
26
|
-
};
|
|
27
|
-
});
|
|
28
|
-
|
|
29
|
-
var Heading3 = _theming.styled.div(function (_ref3) {
|
|
30
|
-
var theme = _ref3.theme;
|
|
31
|
-
return {
|
|
32
|
-
fontSize: theme.typography.size.l1
|
|
33
|
-
};
|
|
34
|
-
});
|
|
35
|
-
|
|
36
|
-
var Heading4 = _theming.styled.div(function (_ref4) {
|
|
37
|
-
var theme = _ref4.theme;
|
|
38
|
-
return {
|
|
39
|
-
fontSize: theme.typography.size.m3
|
|
40
|
-
};
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
var Heading5 = _theming.styled.div(function (_ref5) {
|
|
44
|
-
var theme = _ref5.theme;
|
|
45
|
-
return {
|
|
46
|
-
fontSize: theme.typography.size.m3
|
|
47
|
-
};
|
|
48
|
-
});
|
|
49
|
-
|
|
50
|
-
var Heading6 = _theming.styled.div(function (_ref6) {
|
|
51
|
-
var theme = _ref6.theme;
|
|
52
|
-
return {
|
|
53
|
-
fontSize: theme.typography.size.m1
|
|
54
|
-
};
|
|
55
|
-
});
|
|
56
|
-
|
|
57
|
-
var Heading7 = _theming.styled.div(function (_ref7) {
|
|
58
|
-
var theme = _ref7.theme;
|
|
59
|
-
return {
|
|
60
|
-
fontSize: theme.typography.size.s3
|
|
61
|
-
};
|
|
62
|
-
});
|
|
63
|
-
|
|
64
|
-
var Heading8 = _theming.styled.div(function (_ref8) {
|
|
65
|
-
var theme = _ref8.theme;
|
|
66
|
-
return {
|
|
67
|
-
fontSize: theme.typography.size.s2
|
|
68
|
-
};
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
var Heading9 = _theming.styled.div(function (_ref9) {
|
|
72
|
-
var theme = _ref9.theme;
|
|
73
|
-
return {
|
|
74
|
-
fontSize: theme.typography.size.s1
|
|
75
|
-
};
|
|
76
|
-
});
|
|
77
|
-
|
|
78
|
-
var HeadingWrapper = _theming.styled.div(function (_ref10) {
|
|
79
|
-
var theme = _ref10.theme;
|
|
80
|
-
return {
|
|
81
|
-
fontWeight: theme.typography.weight.black,
|
|
82
|
-
'> *': {
|
|
83
|
-
marginBottom: '1rem'
|
|
84
|
-
}
|
|
85
|
-
};
|
|
86
|
-
});
|
|
87
|
-
|
|
88
|
-
var Type1 = _theming.styled.div(function (_ref11) {
|
|
89
|
-
var theme = _ref11.theme;
|
|
90
|
-
return {
|
|
91
|
-
fontSize: theme.typography.size.s3
|
|
92
|
-
};
|
|
93
|
-
});
|
|
94
|
-
|
|
95
|
-
var Type2 = _theming.styled.div(function (_ref12) {
|
|
96
|
-
var theme = _ref12.theme;
|
|
97
|
-
return {
|
|
98
|
-
fontSize: theme.typography.size.s2
|
|
99
|
-
};
|
|
100
|
-
});
|
|
101
|
-
|
|
102
|
-
var Type3 = _theming.styled.div(function (_ref13) {
|
|
103
|
-
var theme = _ref13.theme;
|
|
104
|
-
return {
|
|
105
|
-
fontSize: theme.typography.size.s1
|
|
106
|
-
};
|
|
107
|
-
});
|
|
108
|
-
|
|
109
|
-
var TypeWrapper = _theming.styled.div({
|
|
110
|
-
'> *': {
|
|
111
|
-
marginBottom: '1rem'
|
|
112
|
-
}
|
|
113
|
-
});
|
|
114
|
-
|
|
115
|
-
var Wrapper = _theming.styled.div({
|
|
116
|
-
display: 'flex',
|
|
117
|
-
flexDirection: 'row',
|
|
118
|
-
'> *': {
|
|
119
|
-
flex: 1,
|
|
120
|
-
paddingRight: 40
|
|
121
|
-
}
|
|
122
|
-
});
|
|
123
|
-
|
|
124
|
-
var Page = _theming.styled.div({
|
|
125
|
-
padding: '3rem'
|
|
126
|
-
});
|
|
127
|
-
|
|
128
|
-
(0, _react2.storiesOf)('Basics/typography', module).add('all', function () {
|
|
129
|
-
return /*#__PURE__*/_react.default.createElement(Page, null, /*#__PURE__*/_react.default.createElement(Info, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("b", null, "Font-family:"), " \"Nunito sans\", Apple system font ... sans-serif"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("b", null, "UI text size:"), " 13px"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("b", null, "Document/Markdown text size:"), " 14px"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("b", null, "Code font:"), " ", /*#__PURE__*/_react.default.createElement("code", null, "Operator Mono, Fira Code, Consolas ... monospace")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("b", null, "Weights:"), " 400(normal), 600(bold), 900(black)")), /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(HeadingWrapper, null, /*#__PURE__*/_react.default.createElement(Heading1, null, "48 heading"), /*#__PURE__*/_react.default.createElement(Heading2, null, "40 heading"), /*#__PURE__*/_react.default.createElement(Heading3, null, "32 heading"), /*#__PURE__*/_react.default.createElement(Heading4, null, "28 heading"), /*#__PURE__*/_react.default.createElement(Heading5, null, "24 heading"), /*#__PURE__*/_react.default.createElement(Heading6, null, "20 heading"), /*#__PURE__*/_react.default.createElement(Heading7, null, "16 heading"), /*#__PURE__*/_react.default.createElement(Heading8, null, "14 heading"), /*#__PURE__*/_react.default.createElement(Heading9, null, "12 heading")), /*#__PURE__*/_react.default.createElement(TypeWrapper, null, /*#__PURE__*/_react.default.createElement(Type1, null, "16 The quick brown fox jumps over the lazy dog"), /*#__PURE__*/_react.default.createElement(Type2, null, "14 The quick brown fox jumps over the lazy dog"), /*#__PURE__*/_react.default.createElement(Type3, null, "12 The quick brown fox jumps over the lazy dog"))));
|
|
130
|
-
});
|
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { styled } from '@storybook/theming';
|
|
3
|
-
import { storiesOf } from '@storybook/react';
|
|
4
|
-
var Info = styled.div({
|
|
5
|
-
marginBottom: '3rem'
|
|
6
|
-
});
|
|
7
|
-
var Heading1 = styled.div(function (_ref) {
|
|
8
|
-
var theme = _ref.theme;
|
|
9
|
-
return {
|
|
10
|
-
fontSize: theme.typography.size.l3
|
|
11
|
-
};
|
|
12
|
-
});
|
|
13
|
-
var Heading2 = styled.div(function (_ref2) {
|
|
14
|
-
var theme = _ref2.theme;
|
|
15
|
-
return {
|
|
16
|
-
fontSize: theme.typography.size.l2
|
|
17
|
-
};
|
|
18
|
-
});
|
|
19
|
-
var Heading3 = styled.div(function (_ref3) {
|
|
20
|
-
var theme = _ref3.theme;
|
|
21
|
-
return {
|
|
22
|
-
fontSize: theme.typography.size.l1
|
|
23
|
-
};
|
|
24
|
-
});
|
|
25
|
-
var Heading4 = styled.div(function (_ref4) {
|
|
26
|
-
var theme = _ref4.theme;
|
|
27
|
-
return {
|
|
28
|
-
fontSize: theme.typography.size.m3
|
|
29
|
-
};
|
|
30
|
-
});
|
|
31
|
-
var Heading5 = styled.div(function (_ref5) {
|
|
32
|
-
var theme = _ref5.theme;
|
|
33
|
-
return {
|
|
34
|
-
fontSize: theme.typography.size.m3
|
|
35
|
-
};
|
|
36
|
-
});
|
|
37
|
-
var Heading6 = styled.div(function (_ref6) {
|
|
38
|
-
var theme = _ref6.theme;
|
|
39
|
-
return {
|
|
40
|
-
fontSize: theme.typography.size.m1
|
|
41
|
-
};
|
|
42
|
-
});
|
|
43
|
-
var Heading7 = styled.div(function (_ref7) {
|
|
44
|
-
var theme = _ref7.theme;
|
|
45
|
-
return {
|
|
46
|
-
fontSize: theme.typography.size.s3
|
|
47
|
-
};
|
|
48
|
-
});
|
|
49
|
-
var Heading8 = styled.div(function (_ref8) {
|
|
50
|
-
var theme = _ref8.theme;
|
|
51
|
-
return {
|
|
52
|
-
fontSize: theme.typography.size.s2
|
|
53
|
-
};
|
|
54
|
-
});
|
|
55
|
-
var Heading9 = styled.div(function (_ref9) {
|
|
56
|
-
var theme = _ref9.theme;
|
|
57
|
-
return {
|
|
58
|
-
fontSize: theme.typography.size.s1
|
|
59
|
-
};
|
|
60
|
-
});
|
|
61
|
-
var HeadingWrapper = styled.div(function (_ref10) {
|
|
62
|
-
var theme = _ref10.theme;
|
|
63
|
-
return {
|
|
64
|
-
fontWeight: theme.typography.weight.black,
|
|
65
|
-
'> *': {
|
|
66
|
-
marginBottom: '1rem'
|
|
67
|
-
}
|
|
68
|
-
};
|
|
69
|
-
});
|
|
70
|
-
var Type1 = styled.div(function (_ref11) {
|
|
71
|
-
var theme = _ref11.theme;
|
|
72
|
-
return {
|
|
73
|
-
fontSize: theme.typography.size.s3
|
|
74
|
-
};
|
|
75
|
-
});
|
|
76
|
-
var Type2 = styled.div(function (_ref12) {
|
|
77
|
-
var theme = _ref12.theme;
|
|
78
|
-
return {
|
|
79
|
-
fontSize: theme.typography.size.s2
|
|
80
|
-
};
|
|
81
|
-
});
|
|
82
|
-
var Type3 = styled.div(function (_ref13) {
|
|
83
|
-
var theme = _ref13.theme;
|
|
84
|
-
return {
|
|
85
|
-
fontSize: theme.typography.size.s1
|
|
86
|
-
};
|
|
87
|
-
});
|
|
88
|
-
var TypeWrapper = styled.div({
|
|
89
|
-
'> *': {
|
|
90
|
-
marginBottom: '1rem'
|
|
91
|
-
}
|
|
92
|
-
});
|
|
93
|
-
var Wrapper = styled.div({
|
|
94
|
-
display: 'flex',
|
|
95
|
-
flexDirection: 'row',
|
|
96
|
-
'> *': {
|
|
97
|
-
flex: 1,
|
|
98
|
-
paddingRight: 40
|
|
99
|
-
}
|
|
100
|
-
});
|
|
101
|
-
var Page = styled.div({
|
|
102
|
-
padding: '3rem'
|
|
103
|
-
});
|
|
104
|
-
storiesOf('Basics/typography', module).add('all', function () {
|
|
105
|
-
return /*#__PURE__*/React.createElement(Page, null, /*#__PURE__*/React.createElement(Info, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "Font-family:"), " \"Nunito sans\", Apple system font ... sans-serif"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "UI text size:"), " 13px"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "Document/Markdown text size:"), " 14px"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "Code font:"), " ", /*#__PURE__*/React.createElement("code", null, "Operator Mono, Fira Code, Consolas ... monospace")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "Weights:"), " 400(normal), 600(bold), 900(black)")), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(HeadingWrapper, null, /*#__PURE__*/React.createElement(Heading1, null, "48 heading"), /*#__PURE__*/React.createElement(Heading2, null, "40 heading"), /*#__PURE__*/React.createElement(Heading3, null, "32 heading"), /*#__PURE__*/React.createElement(Heading4, null, "28 heading"), /*#__PURE__*/React.createElement(Heading5, null, "24 heading"), /*#__PURE__*/React.createElement(Heading6, null, "20 heading"), /*#__PURE__*/React.createElement(Heading7, null, "16 heading"), /*#__PURE__*/React.createElement(Heading8, null, "14 heading"), /*#__PURE__*/React.createElement(Heading9, null, "12 heading")), /*#__PURE__*/React.createElement(TypeWrapper, null, /*#__PURE__*/React.createElement(Type1, null, "16 The quick brown fox jumps over the lazy dog"), /*#__PURE__*/React.createElement(Type2, null, "14 The quick brown fox jumps over the lazy dog"), /*#__PURE__*/React.createElement(Type3, null, "12 The quick brown fox jumps over the lazy dog"))));
|
|
106
|
-
});
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { styled } from '@storybook/theming';
|
|
3
|
-
import { storiesOf } from '@storybook/react';
|
|
4
|
-
const Info = styled.div({
|
|
5
|
-
marginBottom: '3rem'
|
|
6
|
-
});
|
|
7
|
-
const Heading1 = styled.div(({
|
|
8
|
-
theme
|
|
9
|
-
}) => ({
|
|
10
|
-
fontSize: theme.typography.size.l3
|
|
11
|
-
}));
|
|
12
|
-
const Heading2 = styled.div(({
|
|
13
|
-
theme
|
|
14
|
-
}) => ({
|
|
15
|
-
fontSize: theme.typography.size.l2
|
|
16
|
-
}));
|
|
17
|
-
const Heading3 = styled.div(({
|
|
18
|
-
theme
|
|
19
|
-
}) => ({
|
|
20
|
-
fontSize: theme.typography.size.l1
|
|
21
|
-
}));
|
|
22
|
-
const Heading4 = styled.div(({
|
|
23
|
-
theme
|
|
24
|
-
}) => ({
|
|
25
|
-
fontSize: theme.typography.size.m3
|
|
26
|
-
}));
|
|
27
|
-
const Heading5 = styled.div(({
|
|
28
|
-
theme
|
|
29
|
-
}) => ({
|
|
30
|
-
fontSize: theme.typography.size.m3
|
|
31
|
-
}));
|
|
32
|
-
const Heading6 = styled.div(({
|
|
33
|
-
theme
|
|
34
|
-
}) => ({
|
|
35
|
-
fontSize: theme.typography.size.m1
|
|
36
|
-
}));
|
|
37
|
-
const Heading7 = styled.div(({
|
|
38
|
-
theme
|
|
39
|
-
}) => ({
|
|
40
|
-
fontSize: theme.typography.size.s3
|
|
41
|
-
}));
|
|
42
|
-
const Heading8 = styled.div(({
|
|
43
|
-
theme
|
|
44
|
-
}) => ({
|
|
45
|
-
fontSize: theme.typography.size.s2
|
|
46
|
-
}));
|
|
47
|
-
const Heading9 = styled.div(({
|
|
48
|
-
theme
|
|
49
|
-
}) => ({
|
|
50
|
-
fontSize: theme.typography.size.s1
|
|
51
|
-
}));
|
|
52
|
-
const HeadingWrapper = styled.div(({
|
|
53
|
-
theme
|
|
54
|
-
}) => ({
|
|
55
|
-
fontWeight: theme.typography.weight.black,
|
|
56
|
-
'> *': {
|
|
57
|
-
marginBottom: '1rem'
|
|
58
|
-
}
|
|
59
|
-
}));
|
|
60
|
-
const Type1 = styled.div(({
|
|
61
|
-
theme
|
|
62
|
-
}) => ({
|
|
63
|
-
fontSize: theme.typography.size.s3
|
|
64
|
-
}));
|
|
65
|
-
const Type2 = styled.div(({
|
|
66
|
-
theme
|
|
67
|
-
}) => ({
|
|
68
|
-
fontSize: theme.typography.size.s2
|
|
69
|
-
}));
|
|
70
|
-
const Type3 = styled.div(({
|
|
71
|
-
theme
|
|
72
|
-
}) => ({
|
|
73
|
-
fontSize: theme.typography.size.s1
|
|
74
|
-
}));
|
|
75
|
-
const TypeWrapper = styled.div({
|
|
76
|
-
'> *': {
|
|
77
|
-
marginBottom: '1rem'
|
|
78
|
-
}
|
|
79
|
-
});
|
|
80
|
-
const Wrapper = styled.div({
|
|
81
|
-
display: 'flex',
|
|
82
|
-
flexDirection: 'row',
|
|
83
|
-
'> *': {
|
|
84
|
-
flex: 1,
|
|
85
|
-
paddingRight: 40
|
|
86
|
-
}
|
|
87
|
-
});
|
|
88
|
-
const Page = styled.div({
|
|
89
|
-
padding: '3rem'
|
|
90
|
-
});
|
|
91
|
-
storiesOf('Basics/typography', module).add('all', () => /*#__PURE__*/React.createElement(Page, null, /*#__PURE__*/React.createElement(Info, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "Font-family:"), " \"Nunito sans\", Apple system font ... sans-serif"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "UI text size:"), " 13px"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "Document/Markdown text size:"), " 14px"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "Code font:"), " ", /*#__PURE__*/React.createElement("code", null, "Operator Mono, Fira Code, Consolas ... monospace")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "Weights:"), " 400(normal), 600(bold), 900(black)")), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(HeadingWrapper, null, /*#__PURE__*/React.createElement(Heading1, null, "48 heading"), /*#__PURE__*/React.createElement(Heading2, null, "40 heading"), /*#__PURE__*/React.createElement(Heading3, null, "32 heading"), /*#__PURE__*/React.createElement(Heading4, null, "28 heading"), /*#__PURE__*/React.createElement(Heading5, null, "24 heading"), /*#__PURE__*/React.createElement(Heading6, null, "20 heading"), /*#__PURE__*/React.createElement(Heading7, null, "16 heading"), /*#__PURE__*/React.createElement(Heading8, null, "14 heading"), /*#__PURE__*/React.createElement(Heading9, null, "12 heading")), /*#__PURE__*/React.createElement(TypeWrapper, null, /*#__PURE__*/React.createElement(Type1, null, "16 The quick brown fox jumps over the lazy dog"), /*#__PURE__*/React.createElement(Type2, null, "14 The quick brown fox jumps over the lazy dog"), /*#__PURE__*/React.createElement(Type3, null, "12 The quick brown fox jumps over the lazy dog")))));
|