@streamlayer/react-ui 0.27.1 → 0.27.2

package/lib/index.js

@@ -1,6 +1,6 @@
-import { QuestionInApp as No } from "./ui/notifications/notification/question-inapp/index.js";
-import { Login as To } from "./ui/login/index.js";
-import { Onboarding as Vo } from "./ui/gamification/onboarding/index.js";
+import { QuestionInApp as Vo } from "./ui/notifications/notification/question-inapp/index.js";
+import { Login as No } from "./ui/login/index.js";
+import { Onboarding as Uo } from "./ui/gamification/onboarding/index.js";
 import { ActivePages as ko, Navigation as qo } from "./ui/gamification/navigation/index.js";
 import { LeaderboardItemDetail as zo } from "./ui/gamification/leaderboard-item-detail/index.js";
 import { Question as Co } from "./ui/gamification/question/index.js";
@@ -10,7 +10,7 @@ import { Vote as Ko } from "./ui/gamification/vote/index.js";
 import { Demo as Ro } from "./ui/demo/index.js";
 import { Points as Xo } from "./ui/gamification/points/index.js";
 import { StreamLayerThemeProvider as Zo } from "./ui/theme/index.js";
-import { theme as $o } from "./ui/theme/theme.js";
+import { ThemeVariables as $o, theme as or, themeStr as rr } from "./ui/theme/theme.js";
 import "react/jsx-runtime";
 import "react";
 import "./icon-exit-6a55bb8f.js";
@@ -94,15 +94,17 @@ export {
   ko as ActivePages,
   Ro as Demo,
   zo as LeaderboardItemDetail,
-  To as Login,
+  No as Login,
   qo as Navigation,
-  Vo as Onboarding,
+  Uo as Onboarding,
   Xo as Points,
   Co as Question,
-  No as QuestionInApp,
+  Vo as QuestionInApp,
   Fo as QuestionList,
   Zo as StreamLayerThemeProvider,
+  $o as ThemeVariables,
   Ho as UserStatistics,
   Ko as Vote,
-  $o as theme
+  or as theme,
+  rr as themeStr
 };

package/lib/ui/theme/ThemeColors.js

@@ -0,0 +1,15 @@
+import { jsx as t } from "react/jsx-runtime";
+import { ColorItem as e } from "@storybook/blocks";
+import { MASTERS_COLORS as r } from "./constants.js";
+const l = Object.keys(r), p = () => l.map((o) => /* @__PURE__ */ t(
+  e,
+  {
+    title: o,
+    subtitle: `--color-${o.toLowerCase().replaceAll("_", "-")}`,
+    colors: [r[o]]
+  },
+  o
+));
+export {
+  p as ThemeColors
+};

package/lib/ui/theme/ThemeTypography.js

@@ -0,0 +1,5 @@
+import { jsx as r } from "react/jsx-runtime";
+const o = () => /* @__PURE__ */ r("div", { children: "ThemeTypography" });
+export {
+  o as ThemeTypography
+};

package/lib/ui/theme/constants.js

@@ -1,4 +1,4 @@
-const R = {
+const N = {
   BG_TRANSPARENT: "rgba(0,0,0, .8)",
   BG_TRANSPARENT_VOTE_CONTAINER: "rgba(10, 14, 19, 0.8)",
   BG_TRANSPARENT_ITEM: "rgba(0, 0, 0, 0.7)",
@@ -29,11 +29,39 @@ const R = {
   DIVIDER_COLOR_PRIMARY: "#2d3135",
   DIVIDER_COLOR_SECONDARY: "#53565a",
   GREEN_PRIMARY_BTN: "#009B77"
-}, E = {
+}, T = {
+  PRIMARY_GREEN1: "#107D57",
+  PRIMARY_GREEN2: "#006747",
+  PRIMARY_GREEN3: "#1C4932",
+  PRIMARY_GREEN4: "#193526",
+  SECONDARY_RED1: "#DF2F3B",
+  SECONDARY_RED2: "#BA0C2F",
+  SECONDARY_YELLOW: "#fce300",
+  SECONDARY_GREEN5: "#C0DC8F",
+  NEUTRALS_WHITE: "#FFFFFF",
+  NEUTRALS_GRAY1: "#F7F7F7",
+  NEUTRALS_GRAY2: "#F2F2F1",
+  NEUTRALS_GRAY3: "#E8E8E8",
+  NEUTRALS_GRAY4: "#D9D9D6",
+  NEUTRALS_GRAY5: "#B1B3B3",
+  NEUTRALS_GRAY6: "#888B8D",
+  NEUTRALS_GRAY7: "#6B6F73",
+  NEUTRALS_GRAY8: "#53565A",
+  NEUTRALS_GRAY9: "#25282A",
+  NEUTRALS_BLACK: "#000000"
+}, E = Object.assign({}, N, T), S = {
   FAMILY: "Roboto, sans-serif",
   COLOR: "#fff"
-};
+}, O = Object.keys(E).reduce((_, R) => {
+  const A = E[R];
+  return `
+    ${_}
+    --color-${R.toLowerCase().replaceAll("_", "-")}: ${A};
+  `;
+}, "");
 export {
-  R as COLORS,
-  E as FONT
+  E as COLORS,
+  S as FONT,
+  T as MASTERS_COLORS,
+  O as colors
 };

package/lib/ui/theme/theme.js

@@ -1,29 +1,27 @@
-import { css as R } from "@linaria/core";
-import { COLORS as r, FONT as o } from "./constants.js";
-const n = R`
-  --color-bg-transparent: ${r.BG_TRANSPARENT};
-  --color-transparent-vote-container: ${r.BG_TRANSPARENT_VOTE_CONTAINER};
-  --color-transparent-item: ${r.BG_TRANSPARENT_ITEM};
-  --color-transparent-item-success: ${r.BG_TRANSPARENT_ITEM_SUCCESS};
-  --color-transparent-item-error: ${r.BG_TRANSPARENT_ITEM_ERROR};
-  --color-bg-transparent-item-vote: ${r.BG_TRANSPARENT_ITEM_VOTE};
-  --color-transparent-user-container: ${r.BG_TRANSPARENT_USER_CONTAINER};
-  --color-transparent-onboarding-inapp: ${r.BG_TRANSPARENT_ONBOARDING_INAPP};
-  --color-leaderboard-unit: ${r.LEADERBOARD_UNIT};
-  --color-blue-primary: ${r.BLUE_PRIMARY};
-  --color-red-primary: ${r.RED_PRIMARY};
-  --color-red-secondary: ${r.RED_SECONDARY};
-  --color-blue-question-action-btn: ${r.BLUE_QUESTION_ACTION_BTN};
-  --color-white: ${r.WHITE};
-  --color-red-2: ${r.RED_2};
-  --color-grey-primary: ${r.GREY_PRIMARY};
-  --color-grey-primary-onboarding-inapp: ${r.GREY_PRIMARY_ONBOARDING_INAPP};
-  --color-divider-color-primary: ${r.DIVIDER_COLOR_PRIMARY};
-  --color-divider-color-secondary: ${r.DIVIDER_COLOR_SECONDARY};
-  --color-green-primary-btn: ${r.GREEN_PRIMARY_BTN};
-  --font-family: ${o.FAMILY};
-  --font-color: ${o.COLOR};
-`;
+import { jsx as t, jsxs as e } from "react/jsx-runtime";
+import { css as h } from "@linaria/core";
+import { colors as d, FONT as n } from "./constants.js";
+const l = `
+  ${d}
+  --font-family: ${n.FAMILY};
+  --font-color: ${n.COLOR};
+`, p = 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" })
+  ] }) }),
+  /* @__PURE__ */ t("tbody", { children: l.split(";").map((o) => {
+    const r = o.trim(), [c, i] = r.split(":");
+    return /* @__PURE__ */ e("tr", { children: [
+      /* @__PURE__ */ t("td", { children: c }),
+      /* @__PURE__ */ t("td", { children: i })
+    ] }, r);
+  }) })
+] }) });
 export {
-  n as theme
+  f as ThemeVariables,
+  p as theme,
+  l as themeStr
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.27.1",
+  "version": "0.27.2",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -23,13 +23,13 @@
   "peerDependencies": {
     "@streamlayer/sl-eslib": "^5.45.1",
     "@streamlayer/feature-gamification": "^0.16.0",
-    "@streamlayer/sdk-web": "^0.27.0",
     "@streamlayer/sdk-web-anonymous-auth": "^0.10.5",
+    "@streamlayer/sdk-web": "^0.27.0",
     "@streamlayer/sdk-web-api": "^0.0.2",
     "@streamlayer/sdk-web-core": "^0.12.0",
     "@streamlayer/sdk-web-features": "^0.9.5",
-    "@streamlayer/sdk-web-notifications": "^0.9.4",
     "@streamlayer/sdk-web-interfaces": "^0.18.0",
+    "@streamlayer/sdk-web-notifications": "^0.9.4",
     "@streamlayer/sdk-web-storage": "^0.3.2",
     "@streamlayer/sdk-web-types": "^0.16.0"
   },