@streamlayer/react-ui 0.28.1 → 0.29.0

package/lib/ui/app/styles.js

@@ -1,8 +1,9 @@
 import { styled as o } from "@linaria/react";
-const r = o.div`
+const t = o.div`
   height: 100%;
   background: #fff;
+  font-family: var(--font-regular);
 `;
 export {
-  r as SDKContainer
+  t as SDKContainer
 };

package/lib/ui/theme/ThemeTypography.js

@@ -1,5 +1,15 @@
-import { jsx as r } from "react/jsx-runtime";
-const o = () => /* @__PURE__ */ r("div", { children: "ThemeTypography" });
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { styled as e } from "@linaria/react";
+const n = e.p`
+  font-family: var(--font-serif);
+  font-size: 32px;
+`, i = e.p`
+  font-family: var(--font-regular);
+  font-size: 32px;
+`, s = () => /* @__PURE__ */ o("div", { children: [
+  /* @__PURE__ */ r(i, { children: "Regular (Benton Sans Serif)" }),
+  /* @__PURE__ */ r(n, { children: "Serif (Tiempos)" })
+] });
 export {
-  o as ThemeTypography
+  s as ThemeTypography
 };

package/lib/ui/theme/constants.js

@@ -50,7 +50,8 @@ const N = {
   NEUTRALS_GRAY9: "#25282A",
   NEUTRALS_BLACK: "#000000"
 }, E = Object.assign({}, N, T), S = {
-  FAMILY: "Roboto, sans-serif",
+  REGULAR: "'Benton Sans', BentonSans, Arial, Helvetica, sans-serif",
+  SERIF: "'Tiempos', 'Tiempos Text', Times New Roman, serif",
   COLOR: "#fff"
 }, O = Object.keys(E).reduce((_, R) => {
   const A = E[R];

package/lib/ui/theme/theme.js

@@ -1,27 +1,29 @@
-import { jsx as t, jsxs as e } from "react/jsx-runtime";
+import { jsx as r, jsxs as e } from "react/jsx-runtime";
 import { css as h } from "@linaria/core";
-import { colors as d, FONT as n } from "./constants.js";
+import { colors as s, FONT as t } from "./constants.js";
 const l = `
-  ${d}
-  --font-family: ${n.FAMILY};
-  --font-color: ${n.COLOR};
-`, p = h`
+  ${s}
+  --font-family: ${t.REGULAR};
+  --font-regular: ${t.REGULAR};
+  --font-color: ${t.COLOR};
+  --font-serif: ${t.SERIF};
+`, f = h`
   ${l}
-`, f = () => /* @__PURE__ */ t("table", { children: /* @__PURE__ */ e("table", { children: [
-  /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ e("tr", { children: [
-    /* @__PURE__ */ t("th", { children: "name" }),
-    /* @__PURE__ */ t("th", { children: "value" })
+`, p = () => /* @__PURE__ */ r("table", { children: /* @__PURE__ */ e("table", { children: [
+  /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ e("tr", { children: [
+    /* @__PURE__ */ r("th", { children: "name" }),
+    /* @__PURE__ */ r("th", { children: "value" })
   ] }) }),
-  /* @__PURE__ */ t("tbody", { children: l.split(";").map((o) => {
-    const r = o.trim(), [c, i] = r.split(":");
+  /* @__PURE__ */ r("tbody", { children: l.split(";").map((o) => {
+    const n = o.trim(), [i, c] = n.split(":");
     return /* @__PURE__ */ e("tr", { children: [
-      /* @__PURE__ */ t("td", { children: c }),
-      /* @__PURE__ */ t("td", { children: i })
-    ] }, r);
+      /* @__PURE__ */ r("td", { children: i }),
+      /* @__PURE__ */ r("td", { children: c })
+    ] }, n);
   }) })
 ] }) });
 export {
-  f as ThemeVariables,
-  p as theme,
+  p as ThemeVariables,
+  f as theme,
   l as themeStr
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.28.1",
+  "version": "0.29.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",