timvir 0.2.20 → 0.2.22

package/blocks/Arbitrary/index.js

@@ -128,7 +128,7 @@ function Arbitrary(props, ref) {
     value: value
   }, /*#__PURE__*/React.createElement(Root, {
     ref: ref,
-    className: cx_default(classes.root, className),
+    className: cx_default("timvir-b-Arbitrary", classes.root, className),
     ...rest
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.controls
@@ -137,7 +137,7 @@ function Arbitrary(props, ref) {
   }, /*#__PURE__*/React.createElement("span", {
     className: classes.startAdornment
   }, "Seed:"), /*#__PURE__*/React.createElement("input", {
-    className: classes.input,
+    className: cx_default("timvir-b-Arbitrary-seed", classes.input),
     placeholder: "Seed",
     value: encode(new TextEncoder().encode(`${value.seed}`)),
     readOnly: true,
@@ -158,13 +158,6 @@ function Arbitrary(props, ref) {
       });
     }
   }, "Refresh")), /*#__PURE__*/React.createElement(Exhibit, {
-    bleed: 0,
-    BackdropProps: {
-      style: {
-        borderRadius: 2,
-        border: "1px solid var(--timvir-border-color)"
-      }
-    },
     ...ExhibitProps
   }, children)));
 }

package/blocks/Code/index.js

@@ -95,10 +95,10 @@ function Code(props, ref) {
   }, [mutate, children, language]);
   return /*#__PURE__*/React.createElement(Root, {
     ref: ref,
-    className: cx_default(classes.root, fullWidth && Page.fullWidth),
+    className: cx_default("timvir-b-Code", classes.root, fullWidth && Page.fullWidth),
     ...rest
   }, /*#__PURE__*/React.createElement("div", {
-    className: cx_default(className, theme, classes.code, fullWidth && classes.fullWidth)
+    className: cx_default("timvir-b-Code-container", className, theme, classes.code, fullWidth && classes.fullWidth)
   }, /*#__PURE__*/React.createElement("div", {
     className: "d1513p2s",
     onMouseEnter: () => {
@@ -137,7 +137,7 @@ function Code(props, ref) {
       __html: state.html
     }
   }))), caption && /*#__PURE__*/React.createElement("div", {
-    className: classes.caption
+    className: cx_default("timvir-b-Code-caption", classes.caption)
   }, caption));
 }
 var Code$1 = /*#__PURE__*/React.forwardRef(Code);

package/blocks/Exhibit/index.js

@@ -53,21 +53,21 @@ function Exhibit(props, ref) {
   } = block.props;
   return /*#__PURE__*/React.createElement(React.Fragment, null, title && /*#__PURE__*/React.createElement(components.h3, null, title), /*#__PURE__*/React.createElement(Root, {
     ref: ref,
-    className: cx_default(className, classes.root),
+    className: cx_default("timvir-b-Exhibit", className, classes.root),
     style: {
       ...style,
       [cssVariables.bleed]: typeof bleed === "number" ? `${bleed}px` : undefined
     },
     ...rest
   }, /*#__PURE__*/React.createElement("div", {
-    className: classes.container,
+    className: cx_default("timvir-b-Exhibit-container", classes.container),
     ...BackdropProps,
     style: {
       border: bleed === 0 ? "none" : `1px solid var(${cssVariables.borderColor})`,
       ...BackdropProps?.style
     }
   }, children), caption && /*#__PURE__*/React.createElement("div", {
-    className: classes.caption
+    className: cx_default("timvir-b-Exhibit-caption", classes.caption)
   }, caption)));
 }
 var Exhibit$1 = /*#__PURE__*/React.forwardRef(Exhibit);

package/blocks/Font/docs/index.mdx

@@ -1,23 +1,28 @@
-import { Font } from "..";
-import { Code } from "../../Code";
-import { Viewport } from "../../Viewport";
+import { Exhibit } from "../../Exhibit";
 
 # Font
 
-<Sample variant="basic" />
+The Font block displays a sample text in a given font, and provides basic information about the font metrics.
+The metrics show the actual, computed font size and line height values from the DOM.
+They are updated in real time to support fonts that make use of dynamic CSS units (such as `vw`).
+To provide context (such as where this font is used, or instructions for developers how to apply the font style), use the info option.
 
-<Font name="Heading 2" font={{ style: { fontFamily: "system-ui", fontWeight: 700, fontSize: "2vw", lineHeight: 1.3 } }}>
-  The basic structure of each upright letter remained the same in its italic companion.
-</Font>
+<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.">
+  <Sample variant="basic" />
+</Exhibit>
 
-<Font name="Body 1" font={{ style: { fontFamily: "system-ui", fontSize: 18 } }}>
-  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.
-</Font>
+## Timvir Font System
 
-<Font name="Meta" font={{ style: { fontFamily: "system-ui", fontSize: 14 } }}>
-  Meta Text
-</Font>
+The samples below illustrate the font system used by Timvir itself.
+Note that the Timvir font system is currently (for most parts) not responsive.
+The font sizes remain the same across all viewport sizes.
 
-## Inside Viewport
+In Timvir itself, ont sizes are always specified in rem, line height in unitless values.
+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).
 
-<Viewport src="/docs/components/Font/samples/system" />
+<Sample variant="timvir/h1" />
+<Sample variant="timvir/h2" />
+<Sample variant="timvir/h3" />
+<Sample variant="timvir/h4" />
+<Sample variant="timvir/body1" />
+<Sample variant="timvir/caption" />

package/blocks/Font/index.js

@@ -59,7 +59,9 @@ function Font(props, ref) {
       const computedStyle = window.getComputedStyle(contentRef);
       const intervalId = setInterval(() => {
         if (fontSizeRef) {
-          const innerText = `${name} – ${Math.round(parseInt(computedStyle.fontSize))}px`;
+          const fontSize = parseInt(computedStyle.fontSize, 10);
+          const lineHeight = parseInt(computedStyle.lineHeight, 10);
+          const innerText = `${name} – ${Math.round(fontSize)}px / ${Math.round(lineHeight / fontSize * 1000) / 1000}`;
           if (fontSizeRef.innerText !== innerText) {
             fontSizeRef.innerText = innerText;
           }
@@ -72,16 +74,16 @@ function Font(props, ref) {
   }, [name, contentRef]);
   return /*#__PURE__*/React.createElement(Root, {
     ref: ref,
-    className: cx_default(className, "rc7ivp5"),
+    className: cx_default(className),
     ...rest
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.meta
   }, /*#__PURE__*/React.createElement(components.h3, {
-    className: "fe58upx"
+    className: "fc7ivp5"
   }, /*#__PURE__*/React.createElement("span", {
     ref: setFontSizeRef
   }, name)), info && /*#__PURE__*/React.createElement("div", {
-    className: "d10949ho",
+    className: "de58upx",
     onClick: () => {
       if (infoRef && contentRef) {
         // const contentParent = contentRef.parentElement;
@@ -104,18 +106,18 @@ function Font(props, ref) {
   }, /*#__PURE__*/React.createElement(Icons.Info, {
     size: "1.1em"
   }))), /*#__PURE__*/React.createElement("div", {
-    className: "d1o2du3z"
+    className: "d10949ho"
   }, info && /*#__PURE__*/React.createElement("div", {
-    className: "d1o9zhgl",
+    className: "d1o2du3z",
     style: {
       height: 0,
       opacity: 0
     }
   }, /*#__PURE__*/React.createElement("div", {
     ref: setInfoRef,
-    className: "ddlplux"
+    className: "d1o9zhgl"
   }, info)), /*#__PURE__*/React.createElement("div", {
-    className: "dw285p4",
+    className: "ddlplux",
     style: {
       height: "auto",
       opacity: 1
@@ -124,7 +126,7 @@ function Font(props, ref) {
     ref: setContentRef,
     contentEditable: true,
     spellCheck: "false",
-    className: cx_default(font.className, "dx3nfmc"),
+    className: cx_default(font.className, "dw285p4"),
     style: font.style
   }, children || "The quick brown fox jumps over the lazy dog"))));
 }

package/blocks/Font/samples/timvir/body1.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { Font } from "../..";
+type Props = Partial<React.ComponentPropsWithoutRef<typeof Font>>;
+export default function Sample(props: Props): React.JSX.Element;
+export {};

package/blocks/Font/samples/timvir/caption.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { Font } from "../..";
+type Props = Partial<React.ComponentPropsWithoutRef<typeof Font>>;
+export default function Sample(props: Props): React.JSX.Element;
+export {};

package/blocks/Font/samples/timvir/h1.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { Font } from "../..";
+type Props = Partial<React.ComponentPropsWithoutRef<typeof Font>>;
+export default function Sample(props: Props): React.JSX.Element;
+export {};

package/blocks/Font/samples/timvir/h2.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { Font } from "../..";
+type Props = Partial<React.ComponentPropsWithoutRef<typeof Font>>;
+export default function Sample(props: Props): React.JSX.Element;
+export {};

package/blocks/Font/samples/timvir/h3.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { Font } from "../..";
+type Props = Partial<React.ComponentPropsWithoutRef<typeof Font>>;
+export default function Sample(props: Props): React.JSX.Element;
+export {};

package/blocks/Font/samples/timvir/h4.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { Font } from "../..";
+type Props = Partial<React.ComponentPropsWithoutRef<typeof Font>>;
+export default function Sample(props: Props): React.JSX.Element;
+export {};

package/blocks/Font/styles.css

@@ -1,10 +1,9 @@
 .mby32tn{display:flex;align-items:baseline;font-size:0.9rem;font-weight:bold;transition:all 0.2s;}
-.rc7ivp5{padding:16px 0;}
-.fe58upx{margin:0 auto 0 0;}
-.d10949ho{cursor:pointer;}.d10949ho:hover{color:var(--c-p-4);opacity:1;}.d10949ho > svg{position:relative;top:2px;}
-.d1o2du3z{display:flex;flex-direction:column;}
-.d1o9zhgl{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
-.ddlplux{padding:0 0 16px;display:flex;flex-direction:column;}
-.dw285p4{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
-.dx3nfmc{outline:none;user-select:text;white-space:pre-wrap;overflow-wrap:break-word;}
+.fc7ivp5{margin:0 auto 0 0;}
+.de58upx{cursor:pointer;}.de58upx:hover{color:var(--c-p-4);opacity:1;}.de58upx > svg{position:relative;top:2px;}
+.d10949ho{display:flex;flex-direction:column;}
+.d1o2du3z{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
+.d1o9zhgl{padding:0 0 16px;}
+.ddlplux{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
+.dw285p4{outline:none;user-select:text;white-space:pre-wrap;overflow-wrap:break-word;}
 

package/blocks/Icon/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type Size = "responsive" | number;
 export interface Instance {
     size: Size;

package/blocks/Viewport/index.js

@@ -249,7 +249,7 @@ function Viewport(props, ref) {
   }), /*#__PURE__*/React.createElement(Root, {
     ref: ref,
     ...rest,
-    className: cx_default(className, fullWidth, "r1ouu0bc")
+    className: cx_default("timvir-b-Viewport", className, fullWidth, "r1ouu0bc")
   }, /*#__PURE__*/React.createElement("div", {
     ref: svgRef,
     className: "d1uj09ka"

package/blocks/styles.css

@@ -40,14 +40,13 @@
 .cf43jjx{font-size:0.8125rem;line-height:1.1875;color:var(--timvir-secondary-text-color);margin-top:0.3em;}
 
 .mby32tn{display:flex;align-items:baseline;font-size:0.9rem;font-weight:bold;transition:all 0.2s;}
-.rc7ivp5{padding:16px 0;}
-.fe58upx{margin:0 auto 0 0;}
-.d10949ho{cursor:pointer;}.d10949ho:hover{color:var(--c-p-4);opacity:1;}.d10949ho > svg{position:relative;top:2px;}
-.d1o2du3z{display:flex;flex-direction:column;}
-.d1o9zhgl{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
-.ddlplux{padding:0 0 16px;display:flex;flex-direction:column;}
-.dw285p4{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
-.dx3nfmc{outline:none;user-select:text;white-space:pre-wrap;overflow-wrap:break-word;}
+.fc7ivp5{margin:0 auto 0 0;}
+.de58upx{cursor:pointer;}.de58upx:hover{color:var(--c-p-4);opacity:1;}.de58upx > svg{position:relative;top:2px;}
+.d10949ho{display:flex;flex-direction:column;}
+.d1o2du3z{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
+.d1o9zhgl{padding:0 0 16px;}
+.ddlplux{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
+.dw285p4{outline:none;user-select:text;white-space:pre-wrap;overflow-wrap:break-word;}
 
 .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);}
 

package/core/styles.css

@@ -31,7 +31,7 @@
 .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;}
 
 .a12hs2f7{color:inherit;text-decoration:none;}.a12hs2f7:hover svg{opacity:1;transform:none;visibility:visible;--visibility-delay:0s;}
-.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%);}
+.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%);}
 .h6ceq1b{margin-top:3rem;margin-bottom:1rem;font-size:2rem;line-height:1.125;font-weight:590;text-indent:-0.05em;}
 .hj6166y{position:relative;margin:2.5rem 0 1rem;font-size:1.5rem;line-height:1.1666;font-weight:590;}
 .h1f8mqks{position:relative;margin:1rem 0 1rem;font-size:1.0625rem;line-height:1.4705882353;font-weight:590;}

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "timvir",
-  "version": "0.2.20",
+  "version": "0.2.22",
   "license": "MIT",
   "sideEffects": false,
   "exports": {

package/styles.css

@@ -40,14 +40,13 @@
 .cf43jjx{font-size:0.8125rem;line-height:1.1875;color:var(--timvir-secondary-text-color);margin-top:0.3em;}
 
 .mby32tn{display:flex;align-items:baseline;font-size:0.9rem;font-weight:bold;transition:all 0.2s;}
-.rc7ivp5{padding:16px 0;}
-.fe58upx{margin:0 auto 0 0;}
-.d10949ho{cursor:pointer;}.d10949ho:hover{color:var(--c-p-4);opacity:1;}.d10949ho > svg{position:relative;top:2px;}
-.d1o2du3z{display:flex;flex-direction:column;}
-.d1o9zhgl{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
-.ddlplux{padding:0 0 16px;display:flex;flex-direction:column;}
-.dw285p4{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
-.dx3nfmc{outline:none;user-select:text;white-space:pre-wrap;overflow-wrap:break-word;}
+.fc7ivp5{margin:0 auto 0 0;}
+.de58upx{cursor:pointer;}.de58upx:hover{color:var(--c-p-4);opacity:1;}.de58upx > svg{position:relative;top:2px;}
+.d10949ho{display:flex;flex-direction:column;}
+.d1o2du3z{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
+.d1o9zhgl{padding:0 0 16px;}
+.ddlplux{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
+.dw285p4{outline:none;user-select:text;white-space:pre-wrap;overflow-wrap:break-word;}
 
 .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);}
 
@@ -132,7 +131,7 @@
 .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;}
 
 .a12hs2f7{color:inherit;text-decoration:none;}.a12hs2f7:hover svg{opacity:1;transform:none;visibility:visible;--visibility-delay:0s;}
-.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%);}
+.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%);}
 .h6ceq1b{margin-top:3rem;margin-bottom:1rem;font-size:2rem;line-height:1.125;font-weight:590;text-indent:-0.05em;}
 .hj6166y{position:relative;margin:2.5rem 0 1rem;font-size:1.5rem;line-height:1.1666;font-weight:590;}
 .h1f8mqks{position:relative;margin:1rem 0 1rem;font-size:1.0625rem;line-height:1.4705882353;font-weight:590;}

package/blocks/Font/samples/system.d.ts

@@ -1,2 +0,0 @@
-import * as React from "react";
-export default function Sample(): React.JSX.Element;