timvir 0.2.19 → 0.2.21
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/blocks/Code/index.js +6 -1
- package/blocks/Font/docs/index.mdx +20 -15
- package/blocks/Font/index.js +11 -9
- package/blocks/Font/samples/timvir/body1.d.ts +5 -0
- package/blocks/Font/samples/timvir/caption.d.ts +5 -0
- package/blocks/Font/samples/timvir/h1.d.ts +5 -0
- package/blocks/Font/samples/timvir/h2.d.ts +5 -0
- package/blocks/Font/samples/timvir/h3.d.ts +5 -0
- package/blocks/Font/samples/timvir/h4.d.ts +5 -0
- package/blocks/Font/styles.css +7 -8
- package/blocks/Icon/types.d.ts +0 -1
- package/blocks/styles.css +7 -8
- package/core/styles.css +1 -1
- package/package.json +2 -2
- package/styles.css +8 -9
- package/blocks/Font/samples/system.d.ts +0 -2
package/blocks/Code/index.js
CHANGED
|
@@ -59,7 +59,12 @@ function Code(props, ref) {
|
|
|
59
59
|
const [state, mutate] = useImmer({
|
|
60
60
|
mouseOver: false,
|
|
61
61
|
copiedToClipboard: false,
|
|
62
|
-
|
|
62
|
+
/*
|
|
63
|
+
* Prevent layout shift during (asynchronous) highlighting of the markup by
|
|
64
|
+
* initializing the html witha pre/code block with the expected number of
|
|
65
|
+
* lines.
|
|
66
|
+
*/
|
|
67
|
+
html: `<pre><code>${children.trim().split("\n").map(() => "\n").join("")}</code></pre>`
|
|
63
68
|
});
|
|
64
69
|
React.useEffect(() => {
|
|
65
70
|
(async () => {
|
|
@@ -1,23 +1,28 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { Code } from "../../Code";
|
|
3
|
-
import { Viewport } from "../../Viewport";
|
|
1
|
+
import { Exhibit } from "../../Exhibit";
|
|
4
2
|
|
|
5
3
|
# Font
|
|
6
4
|
|
|
7
|
-
|
|
5
|
+
The Font block displays a sample text in a given font, and provides basic information about the font metrics.
|
|
6
|
+
The metrics show the actual, computed font size and line height values from the DOM.
|
|
7
|
+
They are updated in real time to support fonts that make use of dynamic CSS units (such as `vw`).
|
|
8
|
+
To provide context (such as where this font is used, or instructions for developers how to apply the font style), use the info option.
|
|
8
9
|
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
</
|
|
10
|
+
<Exhibit caption="A Font block inside an Exhibit. You would not usually use it like that but here we do to better illustrate what it contains.">
|
|
11
|
+
<Sample variant="basic" />
|
|
12
|
+
</Exhibit>
|
|
12
13
|
|
|
13
|
-
|
|
14
|
-
Originally called Neuste schmale fette Zeitungs-Grotesk, the design was listed in this catalogue as Enge fette Grotesque. It was a straight-sided sans serif with rounded terminals, and it bears no relation to any styles of Akzidenz-Grotesk. The remaining three sans serif designs in that undated, post-sale catalogue were Schmale magere Grotesque, Breite Grotesque, and Breite fette Grotesque.
|
|
15
|
-
</Font>
|
|
14
|
+
## Timvir Font System
|
|
16
15
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
The samples below illustrate the font system used by Timvir itself.
|
|
17
|
+
Note that the Timvir font system is currently (for most parts) not responsive.
|
|
18
|
+
The font sizes remain the same across all viewport sizes.
|
|
20
19
|
|
|
21
|
-
|
|
20
|
+
In Timvir itself, ont sizes are always specified in rem, line height in unitless values.
|
|
21
|
+
This ensures the font size scales when the user has set a non-standard font size in their browser (currently Chrome and Firefox offer such option, Safari does not).
|
|
22
22
|
|
|
23
|
-
<
|
|
23
|
+
<Sample variant="timvir/h1" />
|
|
24
|
+
<Sample variant="timvir/h2" />
|
|
25
|
+
<Sample variant="timvir/h3" />
|
|
26
|
+
<Sample variant="timvir/h4" />
|
|
27
|
+
<Sample variant="timvir/body1" />
|
|
28
|
+
<Sample variant="timvir/caption" />
|
package/blocks/Font/index.js
CHANGED
|
@@ -59,7 +59,9 @@ function Font(props, ref) {
|
|
|
59
59
|
const computedStyle = window.getComputedStyle(contentRef);
|
|
60
60
|
const intervalId = setInterval(() => {
|
|
61
61
|
if (fontSizeRef) {
|
|
62
|
-
const
|
|
62
|
+
const fontSize = parseInt(computedStyle.fontSize, 10);
|
|
63
|
+
const lineHeight = parseInt(computedStyle.lineHeight, 10);
|
|
64
|
+
const innerText = `${name} – ${Math.round(fontSize)}px / ${Math.round(lineHeight / fontSize * 1000) / 1000}`;
|
|
63
65
|
if (fontSizeRef.innerText !== innerText) {
|
|
64
66
|
fontSizeRef.innerText = innerText;
|
|
65
67
|
}
|
|
@@ -72,16 +74,16 @@ function Font(props, ref) {
|
|
|
72
74
|
}, [name, contentRef]);
|
|
73
75
|
return /*#__PURE__*/React.createElement(Root, {
|
|
74
76
|
ref: ref,
|
|
75
|
-
className: cx_default(className
|
|
77
|
+
className: cx_default(className),
|
|
76
78
|
...rest
|
|
77
79
|
}, /*#__PURE__*/React.createElement("div", {
|
|
78
80
|
className: classes.meta
|
|
79
81
|
}, /*#__PURE__*/React.createElement(components.h3, {
|
|
80
|
-
className: "
|
|
82
|
+
className: "fc7ivp5"
|
|
81
83
|
}, /*#__PURE__*/React.createElement("span", {
|
|
82
84
|
ref: setFontSizeRef
|
|
83
85
|
}, name)), info && /*#__PURE__*/React.createElement("div", {
|
|
84
|
-
className: "
|
|
86
|
+
className: "de58upx",
|
|
85
87
|
onClick: () => {
|
|
86
88
|
if (infoRef && contentRef) {
|
|
87
89
|
// const contentParent = contentRef.parentElement;
|
|
@@ -104,18 +106,18 @@ function Font(props, ref) {
|
|
|
104
106
|
}, /*#__PURE__*/React.createElement(Icons.Info, {
|
|
105
107
|
size: "1.1em"
|
|
106
108
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
107
|
-
className: "
|
|
109
|
+
className: "d10949ho"
|
|
108
110
|
}, info && /*#__PURE__*/React.createElement("div", {
|
|
109
|
-
className: "
|
|
111
|
+
className: "d1o2du3z",
|
|
110
112
|
style: {
|
|
111
113
|
height: 0,
|
|
112
114
|
opacity: 0
|
|
113
115
|
}
|
|
114
116
|
}, /*#__PURE__*/React.createElement("div", {
|
|
115
117
|
ref: setInfoRef,
|
|
116
|
-
className: "
|
|
118
|
+
className: "d1o9zhgl"
|
|
117
119
|
}, info)), /*#__PURE__*/React.createElement("div", {
|
|
118
|
-
className: "
|
|
120
|
+
className: "ddlplux",
|
|
119
121
|
style: {
|
|
120
122
|
height: "auto",
|
|
121
123
|
opacity: 1
|
|
@@ -124,7 +126,7 @@ function Font(props, ref) {
|
|
|
124
126
|
ref: setContentRef,
|
|
125
127
|
contentEditable: true,
|
|
126
128
|
spellCheck: "false",
|
|
127
|
-
className: cx_default(font.className, "
|
|
129
|
+
className: cx_default(font.className, "dw285p4"),
|
|
128
130
|
style: font.style
|
|
129
131
|
}, children || "The quick brown fox jumps over the lazy dog"))));
|
|
130
132
|
}
|
package/blocks/Font/styles.css
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
.mby32tn{display:flex;align-items:baseline;font-size:0.9rem;font-weight:bold;transition:all 0.2s;}
|
|
2
|
-
.
|
|
3
|
-
.
|
|
4
|
-
.d10949ho{
|
|
5
|
-
.d1o2du3z{
|
|
6
|
-
.d1o9zhgl{
|
|
7
|
-
.ddlplux{
|
|
8
|
-
.dw285p4{
|
|
9
|
-
.dx3nfmc{outline:none;user-select:text;white-space:pre-wrap;overflow-wrap:break-word;}
|
|
2
|
+
.fc7ivp5{margin:0 auto 0 0;}
|
|
3
|
+
.de58upx{cursor:pointer;}.de58upx:hover{color:var(--c-p-4);opacity:1;}.de58upx > svg{position:relative;top:2px;}
|
|
4
|
+
.d10949ho{display:flex;flex-direction:column;}
|
|
5
|
+
.d1o2du3z{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
|
|
6
|
+
.d1o9zhgl{padding:0 0 16px;}
|
|
7
|
+
.ddlplux{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
|
|
8
|
+
.dw285p4{outline:none;user-select:text;white-space:pre-wrap;overflow-wrap:break-word;}
|
|
10
9
|
|
package/blocks/Icon/types.d.ts
CHANGED
package/blocks/styles.css
CHANGED
|
@@ -40,14 +40,13 @@
|
|
|
40
40
|
.cf43jjx{font-size:0.8125rem;line-height:1.1875;color:var(--timvir-secondary-text-color);margin-top:0.3em;}
|
|
41
41
|
|
|
42
42
|
.mby32tn{display:flex;align-items:baseline;font-size:0.9rem;font-weight:bold;transition:all 0.2s;}
|
|
43
|
-
.
|
|
44
|
-
.
|
|
45
|
-
.d10949ho{
|
|
46
|
-
.d1o2du3z{
|
|
47
|
-
.d1o9zhgl{
|
|
48
|
-
.ddlplux{
|
|
49
|
-
.dw285p4{
|
|
50
|
-
.dx3nfmc{outline:none;user-select:text;white-space:pre-wrap;overflow-wrap:break-word;}
|
|
43
|
+
.fc7ivp5{margin:0 auto 0 0;}
|
|
44
|
+
.de58upx{cursor:pointer;}.de58upx:hover{color:var(--c-p-4);opacity:1;}.de58upx > svg{position:relative;top:2px;}
|
|
45
|
+
.d10949ho{display:flex;flex-direction:column;}
|
|
46
|
+
.d1o2du3z{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
|
|
47
|
+
.d1o9zhgl{padding:0 0 16px;}
|
|
48
|
+
.ddlplux{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
|
|
49
|
+
.dw285p4{outline:none;user-select:text;white-space:pre-wrap;overflow-wrap:break-word;}
|
|
51
50
|
|
|
52
51
|
.r1c1ozpm{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--timvir-page-margin,24px);--timvir-margin:calc(var(--timvir-page-margin,24px) * 0.5);}
|
|
53
52
|
|
package/core/styles.css
CHANGED
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
.rymvrdu{padding:50px 0 80px;display:grid;grid-auto-rows:min-content;grid-template-columns:[le] var(--timvir-page-margin) [lex lc] 1fr [rc rex] var(--timvir-page-margin) [re];}@media (min-width:48rem){.rymvrdu{grid-template-columns: [le] var(--timvir-page-margin) [lex] 1fr [lc] minmax(0,48rem) [rc] 1fr [rex] var(--timvir-page-margin) [re];}}@media (min-width:72rem){.rymvrdu{grid-template-columns: [le] 1fr var(--timvir-page-margin) [lex] minmax(0,12rem) [lc] 48rem [rc] minmax(0,12rem) [rex] var( --timvir-page-margin ) 1fr [re];}}.rymvrdu > *{grid-column:lc / rc;}
|
|
32
32
|
|
|
33
33
|
.a12hs2f7{color:inherit;text-decoration:none;}.a12hs2f7:hover svg{opacity:1;transform:none;visibility:visible;--visibility-delay:0s;}
|
|
34
|
-
.c31avqb{margin-left:6px;color:var(--timvir-secondary-text-color);height:0.9rem;width:0.9rem;vertical-align:middle;transition:opacity 0.2s,transform 0.2s,visibility 0s var(--visibility-delay,0.2s);opacity:0;visibility:hidden;transform:translateX(-50%);}
|
|
34
|
+
.c31avqb{display:inline-block;margin-left:6px;color:var(--timvir-secondary-text-color);height:0.9rem;width:0.9rem;vertical-align:middle;transition:opacity 0.2s,transform 0.2s,visibility 0s var(--visibility-delay,0.2s);opacity:0;visibility:hidden;transform:translateX(-50%);}
|
|
35
35
|
.h6ceq1b{margin-top:3rem;margin-bottom:1rem;font-size:2rem;line-height:1.125;font-weight:590;text-indent:-0.05em;}
|
|
36
36
|
.hj6166y{position:relative;margin:2.5rem 0 1rem;font-size:1.5rem;line-height:1.1666;font-weight:590;}
|
|
37
37
|
.h1f8mqks{position:relative;margin:1rem 0 1rem;font-size:1.0625rem;line-height:1.4705882353;font-weight:590;}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"type": "module",
|
|
3
3
|
"name": "timvir",
|
|
4
|
-
"version": "0.2.
|
|
4
|
+
"version": "0.2.21",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"exports": {
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"immer": "^9 || ^10",
|
|
22
22
|
"shiki": "^1",
|
|
23
23
|
"react-feather": "^2",
|
|
24
|
-
"use-immer": "^0.8.0 || ^0.8.1 || ^0.9.0",
|
|
24
|
+
"use-immer": "^0.8.0 || ^0.8.1 || ^0.9.0 || ^0.10.0",
|
|
25
25
|
"wonka": "^6"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
package/styles.css
CHANGED
|
@@ -40,14 +40,13 @@
|
|
|
40
40
|
.cf43jjx{font-size:0.8125rem;line-height:1.1875;color:var(--timvir-secondary-text-color);margin-top:0.3em;}
|
|
41
41
|
|
|
42
42
|
.mby32tn{display:flex;align-items:baseline;font-size:0.9rem;font-weight:bold;transition:all 0.2s;}
|
|
43
|
-
.
|
|
44
|
-
.
|
|
45
|
-
.d10949ho{
|
|
46
|
-
.d1o2du3z{
|
|
47
|
-
.d1o9zhgl{
|
|
48
|
-
.ddlplux{
|
|
49
|
-
.dw285p4{
|
|
50
|
-
.dx3nfmc{outline:none;user-select:text;white-space:pre-wrap;overflow-wrap:break-word;}
|
|
43
|
+
.fc7ivp5{margin:0 auto 0 0;}
|
|
44
|
+
.de58upx{cursor:pointer;}.de58upx:hover{color:var(--c-p-4);opacity:1;}.de58upx > svg{position:relative;top:2px;}
|
|
45
|
+
.d10949ho{display:flex;flex-direction:column;}
|
|
46
|
+
.d1o2du3z{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
|
|
47
|
+
.d1o9zhgl{padding:0 0 16px;}
|
|
48
|
+
.ddlplux{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
|
|
49
|
+
.dw285p4{outline:none;user-select:text;white-space:pre-wrap;overflow-wrap:break-word;}
|
|
51
50
|
|
|
52
51
|
.r1c1ozpm{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--timvir-page-margin,24px);--timvir-margin:calc(var(--timvir-page-margin,24px) * 0.5);}
|
|
53
52
|
|
|
@@ -132,7 +131,7 @@
|
|
|
132
131
|
.rymvrdu{padding:50px 0 80px;display:grid;grid-auto-rows:min-content;grid-template-columns:[le] var(--timvir-page-margin) [lex lc] 1fr [rc rex] var(--timvir-page-margin) [re];}@media (min-width:48rem){.rymvrdu{grid-template-columns: [le] var(--timvir-page-margin) [lex] 1fr [lc] minmax(0,48rem) [rc] 1fr [rex] var(--timvir-page-margin) [re];}}@media (min-width:72rem){.rymvrdu{grid-template-columns: [le] 1fr var(--timvir-page-margin) [lex] minmax(0,12rem) [lc] 48rem [rc] minmax(0,12rem) [rex] var( --timvir-page-margin ) 1fr [re];}}.rymvrdu > *{grid-column:lc / rc;}
|
|
133
132
|
|
|
134
133
|
.a12hs2f7{color:inherit;text-decoration:none;}.a12hs2f7:hover svg{opacity:1;transform:none;visibility:visible;--visibility-delay:0s;}
|
|
135
|
-
.c31avqb{margin-left:6px;color:var(--timvir-secondary-text-color);height:0.9rem;width:0.9rem;vertical-align:middle;transition:opacity 0.2s,transform 0.2s,visibility 0s var(--visibility-delay,0.2s);opacity:0;visibility:hidden;transform:translateX(-50%);}
|
|
134
|
+
.c31avqb{display:inline-block;margin-left:6px;color:var(--timvir-secondary-text-color);height:0.9rem;width:0.9rem;vertical-align:middle;transition:opacity 0.2s,transform 0.2s,visibility 0s var(--visibility-delay,0.2s);opacity:0;visibility:hidden;transform:translateX(-50%);}
|
|
136
135
|
.h6ceq1b{margin-top:3rem;margin-bottom:1rem;font-size:2rem;line-height:1.125;font-weight:590;text-indent:-0.05em;}
|
|
137
136
|
.hj6166y{position:relative;margin:2.5rem 0 1rem;font-size:1.5rem;line-height:1.1666;font-weight:590;}
|
|
138
137
|
.h1f8mqks{position:relative;margin:1rem 0 1rem;font-size:1.0625rem;line-height:1.4705882353;font-weight:590;}
|