@coinbase/cdp-react 0.0.11 → 0.0.13

package/dist/theme/tokens.js

@@ -14,51 +14,150 @@ const e = {
   // contextual
   red500: "#cf202f",
   green500: "#008531"
-}, r = {
-  colors: {
-    // Contextual
-    error: e.red500,
-    success: e.green500,
-    // Background
-    background: e.white,
-    backgroundOverlay: "rgba(255,255,255,0.5)",
-    backgroundSkeleton: e.gray100,
-    // Foreground
-    text: e.black,
-    textSecondary: e.gray700,
-    // Primary action
-    primary: e.blue500,
-    primaryText: e.white,
-    primaryHoverBackground: e.blue550,
-    primaryHoverText: e.white,
-    primaryFocusRing: e.blue500,
-    // Secondary action
-    secondary: e.gray100,
-    secondaryText: e.black,
-    secondaryHoverBackground: e.gray200,
-    secondaryHoverText: e.black,
-    secondaryFocusRing: e.black,
-    // Link
-    linkText: e.blue500,
-    linkHover: e.blue550,
-    linkSecondaryText: e.black,
-    linkSecondaryHover: e.gray700,
-    // Borders and dividers
-    border: e.gray200,
-    // Input
-    inputBackground: e.white,
-    inputBorder: e.gray500,
-    inputFocusBorder: e.blue500,
-    inputLabel: e.black,
-    inputPlaceholder: e.gray700,
-    inputText: e.black
+}, a = {
+  bg: {
+    default: { value: e.white },
+    // background
+    alternate: { value: e.gray100 },
+    // alternate background
+    overlay: { value: "{colors.bg.alternate}", modify: { type: "alpha", value: 0.33 } },
+    // overlay background
+    skeleton: { value: "{colors.fg.default}", modify: { type: "alpha", value: 0.1 } },
+    // skeleton background
+    primary: { value: e.blue500 },
+    // primary color background
+    secondary: { value: e.gray100 }
+    // secondary color background
+  },
+  fg: {
+    default: { value: e.black },
+    // text
+    muted: { value: e.gray700 },
+    // secondary (muted) text
+    primary: { value: e.blue500 },
+    // primary color text
+    onPrimary: { value: e.white },
+    // text on primary color
+    onSecondary: { value: e.black },
+    // text on secondary color
+    positive: { value: e.green500 },
+    // positive color text
+    negative: { value: e.red500 }
+    // negative color text
+  },
+  line: {
+    default: { value: e.gray200 },
+    // line color
+    heavy: { value: e.gray500 },
+    // higher contrast line color
+    primary: { value: "{colors.fg.primary}" },
+    // primary line color
+    positive: { value: "{colors.fg.positive}" },
+    // positive line color
+    negative: { value: "{colors.fg.negative}" }
+    // negative line color
+  }
+}, l = {
+  page: {
+    bg: {
+      default: { value: "{colors.bg.default}" }
+    },
+    border: {
+      default: { value: "{colors.line.default}" }
+    },
+    text: {
+      default: { value: "{colors.fg.default}" },
+      muted: { value: "{colors.fg.muted}" }
+    }
   },
-  fontFamily: {
-    sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+  cta: {
+    primary: {
+      bg: {
+        default: { value: "{colors.bg.primary}" },
+        hover: { value: "{colors.bg.primary}", modify: { type: "alpha", value: "0.9" } }
+      },
+      border: {
+        focus: { value: "{colors.line.primary}" }
+      },
+      text: {
+        default: { value: "{colors.fg.onPrimary}" },
+        hover: { value: "{colors.fg.onPrimary}" }
+      }
+    },
+    secondary: {
+      bg: {
+        default: { value: "{colors.bg.secondary}" },
+        hover: {
+          value: "{colors.bg.secondary}",
+          modify: { type: "alpha", value: "0.9" }
+        }
+      },
+      border: {
+        focus: { value: "{colors.line.primary}" }
+      },
+      text: {
+        default: { value: "{colors.fg.onSecondary}" },
+        hover: { value: "{colors.fg.onSecondary}" }
+      }
+    }
+  },
+  link: {
+    primary: {
+      text: {
+        default: { value: "{colors.fg.primary}" },
+        hover: { value: "{colors.fg.primary}", modify: { type: "alpha", value: "0.9" } }
+      }
+    },
+    secondary: {
+      text: {
+        default: { value: "{colors.fg.default}" },
+        hover: { value: "{colors.fg.default}", modify: { type: "alpha", value: "0.9" } }
+      }
+    }
+  },
+  input: {
+    bg: {
+      default: { value: "{colors.bg.default}" }
+    },
+    border: {
+      default: { value: "{colors.line.heavy}" },
+      focus: { value: "{colors.line.primary}" },
+      error: { value: "{colors.line.negative}" }
+    },
+    label: {
+      default: { value: "{colors.fg.default}" }
+    },
+    placeholder: {
+      default: { value: "{colors.fg.muted}" }
+    },
+    text: {
+      default: { value: "{colors.fg.default}" }
+    },
+    errorText: {
+      default: { value: "{colors.fg.negative}" }
+    }
+  }
+}, o = {
+  ...a,
+  ...l
+}, r = {
+  family: {
+    sans: {
+      value: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+    }
   },
-  fontSizeBase: 16
+  size: {
+    base: { value: 16 }
+  }
+}, u = {
+  colors: o,
+  font: r
 };
 export {
-  e as colors,
-  r as tokens
+  o as colors,
+  e as colorsBase,
+  l as colorsComponents,
+  a as colorsSemantic,
+  r as font,
+  u as tokens
 };

package/dist/theme/utils.d.ts

@@ -1,10 +1,22 @@
 export type KebabCasePaths<T> = T extends Record<string, unknown> ? {
-    [K in keyof T]: T[K] extends Record<string, unknown> ? `${K & string}-${KebabCasePaths<T[K]> & string}` : K & string;
+    [K in keyof T]: T[K] extends {
+        value: unknown;
+    } ? K & string : T[K] extends Record<string, unknown> ? `${K & string}-${KebabCasePaths<T[K]> & string}` : K & string;
 }[keyof T] : never;
 export type Flattened<T extends Record<string, unknown>> = {
     [K in KebabCasePaths<T>]: string;
 };
-export declare function flattenTokensObject<T extends Record<string, unknown>>(obj: T, path?: string[]): Flattened<T>;
+export type TokenValue = {
+    value: string | number;
+    modify?: {
+        type: "alpha";
+        value: number | string;
+    };
+};
+export type NestedTokenObject = {
+    [key: string]: TokenValue | NestedTokenObject;
+};
+export declare function flattenTokensObject<T extends NestedTokenObject>(tokensObject: T, cssVarPrefix?: string): Flattened<T>;
 export declare const themeToCssVariables: (theme: Record<string, string>) => CDPWebCSSVariables;
 export type CDPWebCSSVariables = {
     [key: `--cdp-web-${string}`]: string;

package/dist/theme/utils.js

@@ -1,18 +1,27 @@
-function i(n, r = []) {
-  const t = {};
-  for (const [s, e] of Object.entries(n)) {
-    const o = [...r, s];
-    if (typeof e == "object" && e !== null && !Array.isArray(e))
-      Object.assign(t, i(e, o));
-    else {
-      const c = o.join("-");
-      Array.isArray(e) ? t[c] = e.join(" ") : t[c] = typeof e == "number" ? `${e}px` : String(e);
-    }
+function f(e) {
+  return typeof e == "object" && e !== null && "value" in e && (typeof e.value == "string" || typeof e.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);
+      }
   }
-  return t;
+  return o(e, []), n;
 }
-const a = (n) => Object.entries(n).reduce((r, [t, s]) => (r[`--cdp-web-${t}`] = s, r), {});
+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), {});
 export {
-  i as flattenTokensObject,
-  a as themeToCssVariables
+  p as flattenTokensObject,
+  y as themeToCssVariables
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cdp-react",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.14",
@@ -9,8 +9,8 @@
   },
   "peerDependencies": {
     "react": ">=18.2.0",
-    "@coinbase/cdp-core": "^0.0.11",
-    "@coinbase/cdp-hooks": "^0.0.11"
+    "@coinbase/cdp-hooks": "^0.0.13",
+    "@coinbase/cdp-core": "^0.0.13"
   },
   "devDependencies": {
     "@size-limit/preset-big-lib": "^11.2.0",
@@ -25,17 +25,21 @@
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "@vitejs/plugin-react": "^4.6.0",
+    "eslint-plugin-css-modules": "^2.12.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "glob": "^11.0.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "size-limit": "^11.2.0",
+    "stylelint": "^16.22.0",
+    "stylelint-config-standard": "^38.0.0",
+    "stylelint-value-no-unknown-custom-properties": "^6.0.1",
     "vite": "^7.0.4",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "@coinbase/cdp-core": "^0.0.11",
-    "@coinbase/cdp-hooks": "^0.0.11"
+    "@coinbase/cdp-core": "^0.0.13",
+    "@coinbase/cdp-hooks": "^0.0.13"
   },
   "size-limit": [
     {

package/dist/chunks/SignIn.module.Dl3CqKQ_.js

@@ -1,20 +0,0 @@
-import '../assets/SignIn.css';const n = "SignIn-module__signIn___cS7KU", _ = "SignIn-module__heading___nzF-H", o = "SignIn-module__description___6bRpF", e = "SignIn-module__medium___rfGKj", r = "SignIn-module__form___MXCq6", s = "SignIn-module__logo___9j5Y-", i = "SignIn-module__formFooter___Rasrs", c = "SignIn-module__serverStateWrapper___GML6w", t = "SignIn-module__loadingSpinner___JnMDX", m = "SignIn-module__serverError___p4Z3K", g = "SignIn-module__resetTimer___s-bUu", d = "SignIn-module__successIcon___2a7me", I = "SignIn-module__footer___3Gkbc", l = "SignIn-module__coinbaseIcon___cOnQb", u = "SignIn-module__hr___WFRgK", S = {
-  signIn: n,
-  heading: _,
-  description: o,
-  medium: e,
-  form: r,
-  logo: s,
-  formFooter: i,
-  serverStateWrapper: c,
-  loadingSpinner: t,
-  serverError: m,
-  resetTimer: g,
-  successIcon: d,
-  footer: I,
-  coinbaseIcon: l,
-  hr: u
-};
-export {
-  S as s
-};