@embeddable.com/remarkable-ui 0.0.12 → 0.0.13

package/README.md

@@ -1 +1,28 @@
-# remarkable-ui
+# Remarkable UI
+
+**Remarkable UI** is an open-source library of **beautiful components** for analytics – charts, controls, tables, and more – designed to be styled with **granular CSS variables**.  
+
+👉 Remarkable UI forms part of the [Embeddable](https://embeddable.com) ecosystem but can also be used independently.
+
+## 🎨 Styling with CSS Variables
+
+Every part of a Remarkable UI component can be styled with granular CSS variables.
+
+There are **three layers** of variables in our system:
+
+1. **Base variables**
+    – Raw CSS primitives (colors, spacing, type scales)    
+    – *Don’t override*—they’re the foundation.
+    
+2. **Semantic variables**    
+    – “Meaningful” tokens built from base vars (e.g. --background-default, --foreground-error, --font-default)    
+    – Control *global* look-and-feel: light vs. dark palettes, brand colors, default text styles.
+    
+3. **Component variables**    
+    – Element-specific tokens (namespaced by component, e.g. --icn-btn-background-hover, --dropdown-padding)    
+    – Fine-tune individual components without touching global semantics.
+
+## 🛠 Contributing
+
+Remarkable UI is under active development, and we’d love feedback or contributions.  
+Feel free to open issues or suggest improvements.

package/dist/{ChartCard-B_BAibdy.js → ChartCard-DmNmLI8u.js}

@@ -17145,6 +17145,7 @@ const fi = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20wid
     options: js
   }
 }, j0 = {
+  id: "remarkableTheme",
   i18n: Jd,
   charts: qd,
   editors: Zd,
@@ -17165,14 +17166,14 @@ const fi = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20wid
   }
 };
 em();
-const li = (e, t, r, n = "global") => {
-  Ft.has(n) || (Ft.set(n, /* @__PURE__ */ new Map()), Hn.set(n, /* @__PURE__ */ new Set()));
-  const a = Ft.get(n), i = Hn.get(n);
-  if (a.has(e)) return a.get(e);
-  const s = t.find((o) => !i.has(o)) ?? t[r % t.length];
+const li = (e, t, r, n) => {
+  Ft.has(e) || (Ft.set(e, /* @__PURE__ */ new Map()), Hn.set(e, /* @__PURE__ */ new Set()));
+  const a = Ft.get(e), i = Hn.get(e);
+  if (a.has(t)) return a.get(t);
+  const s = r.find((o) => !i.has(o)) ?? r[n % r.length];
   if (typeof s != "string")
     throw new Error("No valid color found in palette");
-  return a.set(e, s), i.add(s), Qd(), s;
+  return a.set(t, s), i.add(s), Qd(), s;
 }, rm = "_skeleton_12e7h_10", tm = {
   skeleton: rm
 }, nm = () => /* @__PURE__ */ ze.jsx("div", { className: tm.skeleton });
@@ -17194,31 +17195,31 @@ const am = [["path", { d: "M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", key: "svg-
     e.dimension,
     e.measure,
     e.maxLegendItems
-  ), a = JSON.stringify(t), i = n.map(
-    (o, l) => li(
-      `${a}.${e.dimension.name}.${o[e.dimension.name]}.backgroundColor`,
+  ), a = n.map(
+    (s, o) => li(
+      `${t.id}.charts.backgroundColors`,
+      `${e.dimension.name}.${s[e.dimension.name]}`,
       t.charts.backgroundColors ?? _a,
-      l,
-      "chartBackgroundColors"
+      o
     )
-  ), s = n.map(
-    (o, l) => li(
-      `${a}.${e.dimension.name}.${o[e.dimension.name]}.borderColor`,
+  ), i = n.map(
+    (s, o) => li(
+      `${t.id}.charts.borderColors`,
+      `${e.dimension.name}.${s[e.dimension.name]}`,
       t.charts.borderColors ?? _a,
-      l,
-      "chartBorderColors"
+      o
     )
   );
   return {
-    labels: n.map((o) => {
-      const l = o[e.dimension.name], f = r.data(e.dimension, l);
-      return l === f ? Pr.t(l) : f;
+    labels: n.map((s) => {
+      const o = s[e.dimension.name], l = r.data(e.dimension, o);
+      return o === l ? Pr.t(o) : l;
     }),
     datasets: [
       {
-        data: n.map((o) => o[e.measure.name]),
-        backgroundColor: i,
-        borderColor: s
+        data: n.map((s) => s[e.measure.name]),
+        backgroundColor: a,
+        borderColor: i
       }
     ]
   };
@@ -17338,4 +17339,4 @@ export {
   j0 as r,
   Xs as s
 };
-//# sourceMappingURL=ChartCard-B_BAibdy.js.map
+//# sourceMappingURL=ChartCard-DmNmLI8u.js.map