@coinbase/cdp-react 0.0.31 → 0.0.32

package/dist/theme/tokens.js

@@ -21,6 +21,8 @@ const e = {
     // background
     alternate: { value: e.gray100 },
     // alternate background
+    contrast: { value: "{colors.fg.default}" },
+    // contrast background, used to mix with other backgrounds to create relative colors (i.e. for hover / pressed states)
     overlay: { value: "{colors.bg.alternate}", modify: { type: "alpha", value: 0.33 } },
     // overlay background
     skeleton: { value: "{colors.fg.default}", modify: { type: "alpha", value: 0.1 } },
@@ -60,7 +62,7 @@ const e = {
     negative: { value: "{colors.fg.negative}" }
     // negative line color
   }
-}, a = {
+}, o = {
   page: {
     bg: {
       default: { value: "{colors.bg.default}" }
@@ -77,7 +79,14 @@ const e = {
     primary: {
       bg: {
         default: { value: "{colors.bg.primary}" },
-        hover: { value: "{colors.bg.primary}", modify: { type: "alpha", value: "0.9" } }
+        hover: {
+          value: "{colors.bg.primary}",
+          modify: { type: "mix", value: [["{colors.bg.contrast}", "15%"]] }
+        },
+        pressed: {
+          value: "{colors.bg.primary}",
+          modify: { type: "mix", value: [["{colors.bg.contrast}", "30%"]] }
+        }
       },
       border: {
         focus: { value: "{colors.line.primary}" }
@@ -92,7 +101,11 @@ const e = {
         default: { value: "{colors.bg.secondary}" },
         hover: {
           value: "{colors.bg.secondary}",
-          modify: { type: "alpha", value: "0.9" }
+          modify: { type: "mix", value: [["{colors.bg.contrast}", "10%"]] }
+        },
+        pressed: {
+          value: "{colors.bg.secondary}",
+          modify: { type: "mix", value: [["{colors.bg.contrast}", "20%"]] }
         }
       },
       border: {
@@ -108,13 +121,27 @@ const e = {
     primary: {
       text: {
         default: { value: "{colors.fg.primary}" },
-        hover: { value: "{colors.fg.primary}", modify: { type: "alpha", value: "0.9" } }
+        hover: {
+          value: "{colors.fg.primary}",
+          modify: { type: "mix", value: [["{colors.bg.contrast}", "15%"]] }
+        },
+        pressed: {
+          value: "{colors.fg.primary}",
+          modify: { type: "mix", value: [["{colors.bg.contrast}", "30%"]] }
+        }
       }
     },
     secondary: {
       text: {
         default: { value: "{colors.fg.default}" },
-        hover: { value: "{colors.fg.default}", modify: { type: "alpha", value: "0.9" } }
+        hover: {
+          value: "{colors.fg.default}",
+          modify: { type: "mix", value: [["{colors.bg.contrast}", "10%"]] }
+        },
+        pressed: {
+          value: "{colors.fg.default}",
+          modify: { type: "mix", value: [["{colors.bg.contrast}", "20%"]] }
+        }
       }
     }
   },
@@ -150,7 +177,15 @@ const e = {
     },
     trigger: {
       bg: {
-        default: { value: "{colors.bg.default}" }
+        default: { value: "{colors.bg.default}" },
+        hover: {
+          value: "{colors.bg.default}",
+          modify: { type: "mix", value: [["{colors.bg.contrast}", "5%"]] }
+        },
+        pressed: {
+          value: "{colors.bg.default}",
+          modify: { type: "mix", value: [["{colors.bg.contrast}", "7%"]] }
+        }
       },
       border: {
         default: { value: "{colors.line.default}" },
@@ -184,7 +219,10 @@ const e = {
       item: {
         bg: {
           default: { value: "{colors.bg.default}" },
-          highlight: { value: "{colors.bg.secondary}" }
+          highlight: {
+            value: "{colors.bg.default}",
+            modify: { type: "mix", value: [["{colors.bg.contrast}", "10%"]] }
+          }
         },
         text: {
           default: { value: "{colors.fg.default}" },
@@ -206,30 +244,30 @@ const e = {
       default: { value: "{colors.fg.default}" }
     }
   }
-}, o = {
+}, a = {
   ...l,
-  ...a
+  ...o
 }, r = {
   family: {
     mono: {
       value: '"DM Mono", monospace'
     },
     sans: {
-      value: '"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+      value: '"Rethink Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
     }
   },
   size: {
     base: { value: 16 }
   }
-}, u = {
-  colors: o,
+}, t = {
+  colors: a,
   font: r
 };
 export {
-  o as colors,
+  a as colors,
   e as colorsBase,
-  a as colorsComponents,
+  o as colorsComponents,
   l as colorsSemantic,
   r as font,
-  u as tokens
+  t as tokens
 };

package/dist/theme/utils.d.ts

@@ -11,6 +11,12 @@ export type TokenValue = {
     modify?: {
         type: "alpha";
         value: number | string;
+    } | {
+        type: "hsl";
+        value: [number, number, number];
+    } | {
+        type: "mix";
+        value: ReadonlyArray<string | readonly [string, string]>;
     };
 };
 export type NestedTokenObject = {

package/dist/theme/utils.js

@@ -1,27 +1,44 @@
-function f(e) {
-  return typeof e == "object" && e !== null && "value" in e && (typeof e.value == "string" || typeof e.value == "number");
+function a(t) {
+  return typeof t == "object" && t !== null && "value" in t && (typeof t.value == "string" || typeof t.value == "number");
 }
-function p(e, t = "cdp-web") {
-  const n = {};
-  function o(u, s) {
-    for (const l in u)
-      if (Object.prototype.hasOwnProperty.call(u, l)) {
-        const c = [...s, l], r = u[l];
-        if (f(r)) {
-          const i = c.join("-");
-          n[i] = a(r, t);
-        } else typeof r == "object" && r !== null && o(r, c);
+function p(t, e = "cdp-web") {
+  const o = {};
+  function n(r, c) {
+    for (const s in r)
+      if (Object.prototype.hasOwnProperty.call(r, s)) {
+        const f = [...c, s], i = r[s];
+        if (a(i)) {
+          const u = f.join("-");
+          o[u] = y(i, e);
+        } else typeof i == "object" && i !== null && n(i, f);
       }
   }
-  return o(e, []), n;
+  return n(t, []), o;
 }
-const a = (e, t) => {
-  if (typeof e.value == "number")
-    return `${e.value}px`;
-  const n = e.value.startsWith("{") && e.value.endsWith("}") ? `var(--${t ? `${t}-` : ""}${e.value.slice(1, -1).replace(/\./g, "-")})` : e.value;
-  return e.modify?.type === "alpha" ? `color(from ${n} srgb r g b / ${e.modify.value ?? 1})` : n;
-}, y = (e) => Object.entries(e).reduce((t, [n, o]) => (t[`--cdp-web-${n}`] = o, t), {});
+const l = (t, e) => t.startsWith("{") && t.endsWith("}") ? `var(--${e ? `${e}-` : ""}${t.slice(1, -1).replace(/\./g, "-")})` : t, y = (t, e) => {
+  if (typeof t.value == "number")
+    return `${t.value}px`;
+  const o = l(t.value, e);
+  if (t.modify?.type === "alpha")
+    return `color(from ${o} srgb r g b / ${t.modify.value ?? 1})`;
+  if (t.modify?.type === "hsl") {
+    const [n, r, c] = t.modify.value;
+    return `hsl(from ${o} calc(h * ${n}) calc(s * ${r}) calc(l * ${c}))`;
+  }
+  if (t.modify?.type === "mix") {
+    let n = o;
+    return t.modify.value.forEach((r) => {
+      if (typeof r == "string")
+        n += `, ${l(r, e)}`;
+      else {
+        const [c, s] = r;
+        n += `, ${l(c, e)} ${s}`;
+      }
+    }), `color-mix(in oklab, ${n})`;
+  }
+  return o;
+}, m = (t) => Object.entries(t).reduce((e, [o, n]) => (e[`--cdp-web-${o}`] = n, e), {});
 export {
   p as flattenTokensObject,
-  y as themeToCssVariables
+  m as themeToCssVariables
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cdp-react",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "type": "module",
   "dependencies": {
     "@internationalized/number": "3.6.4",
@@ -14,8 +14,8 @@
   },
   "peerDependencies": {
     "react": ">=18.2.0",
-    "@coinbase/cdp-core": "^0.0.31",
-    "@coinbase/cdp-hooks": "^0.0.31"
+    "@coinbase/cdp-core": "^0.0.32",
+    "@coinbase/cdp-hooks": "^0.0.32"
   },
   "devDependencies": {
     "@size-limit/preset-big-lib": "^11.2.0",
@@ -45,8 +45,8 @@
     "vite": "^7.0.4",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "@coinbase/cdp-core": "^0.0.31",
-    "@coinbase/cdp-hooks": "^0.0.31"
+    "@coinbase/cdp-core": "^0.0.32",
+    "@coinbase/cdp-hooks": "^0.0.32"
   },
   "size-limit": [
     {