npm - @coinbase/cdp-react - Versions diffs - 0.0.10 → 0.0.12 - Mend

@coinbase/cdp-react 0.0.10 → 0.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/README.md +4 -4
package/dist/assets/Button.css +1 -1
package/dist/assets/Error.css +1 -1
package/dist/assets/Field.css +1 -1
package/dist/assets/Input.css +1 -1
package/dist/assets/LoadingSkeleton.css +1 -1
package/dist/assets/LoadingSpinner.css +1 -1
package/dist/assets/OTP.css +1 -1
package/dist/assets/SignIn.css +1 -1
package/dist/assets/SignInDescription.css +1 -0
package/dist/assets/SignInForm.css +1 -0
package/dist/assets/SignInImage.css +1 -0
package/dist/assets/SignInModal.css +1 -1
package/dist/assets/SignInTitle.css +1 -0
package/dist/assets/SignOutButton.css +1 -1
package/dist/assets/VisuallyHidden.css +1 -1
package/dist/components/AuthButton/index.d.ts +7 -1
package/dist/components/AuthButton/index.js +51 -31
package/dist/components/Button/index.js +38 -22
package/dist/components/Field/index.js +11 -11
package/dist/components/LoadingSpinner/index.js +7 -7
package/dist/components/OTP/index.js +26 -25
package/dist/components/SignIn/SignInDescription.js +20 -18
package/dist/components/SignIn/SignInForm.js +113 -102
package/dist/components/SignIn/SignInImage.js +13 -11
package/dist/components/SignIn/SignInTitle.js +12 -11
package/dist/components/SignIn/index.js +22 -21
package/dist/components/SignInModal/index.js +29 -29
package/dist/components/SignOutButton/index.js +7 -7
package/dist/components/ThemeProvider/index.d.ts +1 -3
package/dist/components/ThemeProvider/index.js +7 -7
package/dist/components/VisuallyHidden/index.js +4 -4
package/dist/index.js +45 -39
package/dist/theme/cssVariables.d.ts +5 -0
package/dist/theme/cssVariables.js +10 -0
package/dist/theme/index.d.ts +1 -0
package/dist/theme/index.js +14 -8
package/dist/theme/theme.d.ts +237 -33
package/dist/theme/theme.js +3 -3
package/dist/theme/tokens.d.ts +679 -45
package/dist/theme/tokens.js +142 -43
package/dist/theme/utils.d.ts +14 -2
package/dist/theme/utils.js +23 -14
package/package.json +9 -5
package/dist/chunks/SignIn.module.Dl3CqKQ_.js +0 -20

package/dist/theme/tokens.d.ts CHANGED Viewed

@@ -1,51 +1,685 @@
+export declare const colorsBase: {
+    readonly blue500: "#0052ff";
+    readonly blue550: "#014cec";
+    readonly black: "#0a0b0d";
+    readonly white: "#ffffff";
+    readonly gray50: "#f9fafb";
+    readonly gray100: "#eef0f3";
+    readonly gray200: "#dcdfe4";
+    readonly gray500: "#9397a0";
+    readonly gray700: "#5b616e";
+    readonly gray900: "#1a1d21";
+    readonly red500: "#cf202f";
+    readonly green500: "#008531";
+};
+export declare const colorsSemantic: {
+    readonly bg: {
+        readonly default: {
+            readonly value: "#ffffff";
+        };
+        readonly alternate: {
+            readonly value: "#eef0f3";
+        };
+        readonly overlay: {
+            readonly value: "{colors.bg.alternate}";
+            readonly modify: {
+                readonly type: "alpha";
+                readonly value: 0.33;
+            };
+        };
+        readonly skeleton: {
+            readonly value: "{colors.fg.default}";
+            readonly modify: {
+                readonly type: "alpha";
+                readonly value: 0.1;
+            };
+        };
+        readonly primary: {
+            readonly value: "#0052ff";
+        };
+        readonly secondary: {
+            readonly value: "#eef0f3";
+        };
+    };
+    readonly fg: {
+        readonly default: {
+            readonly value: "#0a0b0d";
+        };
+        readonly muted: {
+            readonly value: "#5b616e";
+        };
+        readonly primary: {
+            readonly value: "#0052ff";
+        };
+        readonly onPrimary: {
+            readonly value: "#ffffff";
+        };
+        readonly onSecondary: {
+            readonly value: "#0a0b0d";
+        };
+        readonly positive: {
+            readonly value: "#008531";
+        };
+        readonly negative: {
+            readonly value: "#cf202f";
+        };
+    };
+    readonly line: {
+        readonly default: {
+            readonly value: "#dcdfe4";
+        };
+        readonly heavy: {
+            readonly value: "#9397a0";
+        };
+        readonly primary: {
+            readonly value: "{colors.fg.primary}";
+        };
+        readonly positive: {
+            readonly value: "{colors.fg.positive}";
+        };
+        readonly negative: {
+            readonly value: "{colors.fg.negative}";
+        };
+    };
+};
+export declare const colorsComponents: {
+    readonly page: {
+        readonly bg: {
+            readonly default: {
+                readonly value: "{colors.bg.default}";
+            };
+        };
+        readonly border: {
+            readonly default: {
+                readonly value: "{colors.line.default}";
+            };
+        };
+        readonly text: {
+            readonly default: {
+                readonly value: "{colors.fg.default}";
+            };
+            readonly muted: {
+                readonly value: "{colors.fg.muted}";
+            };
+        };
+    };
+    readonly cta: {
+        readonly primary: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.primary}";
+                };
+                readonly hover: {
+                    readonly value: "{colors.bg.primary}";
+                    readonly modify: {
+                        readonly type: "alpha";
+                        readonly value: "0.9";
+                    };
+                };
+            };
+            readonly border: {
+                readonly focus: {
+                    readonly value: "{colors.line.primary}";
+                };
+            };
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.onPrimary}";
+                };
+                readonly hover: {
+                    readonly value: "{colors.fg.onPrimary}";
+                };
+            };
+        };
+        readonly secondary: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.secondary}";
+                };
+                readonly hover: {
+                    readonly value: "{colors.bg.secondary}";
+                    readonly modify: {
+                        readonly type: "alpha";
+                        readonly value: "0.9";
+                    };
+                };
+            };
+            readonly border: {
+                readonly focus: {
+                    readonly value: "{colors.line.primary}";
+                };
+            };
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.onSecondary}";
+                };
+                readonly hover: {
+                    readonly value: "{colors.fg.onSecondary}";
+                };
+            };
+        };
+    };
+    readonly link: {
+        readonly primary: {
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.primary}";
+                };
+                readonly hover: {
+                    readonly value: "{colors.fg.primary}";
+                    readonly modify: {
+                        readonly type: "alpha";
+                        readonly value: "0.9";
+                    };
+                };
+            };
+        };
+        readonly secondary: {
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.default}";
+                };
+                readonly hover: {
+                    readonly value: "{colors.fg.default}";
+                    readonly modify: {
+                        readonly type: "alpha";
+                        readonly value: "0.9";
+                    };
+                };
+            };
+        };
+    };
+    readonly input: {
+        readonly bg: {
+            readonly default: {
+                readonly value: "{colors.bg.default}";
+            };
+        };
+        readonly border: {
+            readonly default: {
+                readonly value: "{colors.line.heavy}";
+            };
+            readonly focus: {
+                readonly value: "{colors.line.primary}";
+            };
+            readonly error: {
+                readonly value: "{colors.line.negative}";
+            };
+        };
+        readonly label: {
+            readonly default: {
+                readonly value: "{colors.fg.default}";
+            };
+        };
+        readonly placeholder: {
+            readonly default: {
+                readonly value: "{colors.fg.muted}";
+            };
+        };
+        readonly text: {
+            readonly default: {
+                readonly value: "{colors.fg.default}";
+            };
+        };
+        readonly errorText: {
+            readonly default: {
+                readonly value: "{colors.fg.negative}";
+            };
+        };
+    };
+};
 export declare const colors: {
-    blue500: string;
-    blue550: string;
-    black: string;
-    white: string;
-    gray50: string;
-    gray100: string;
-    gray200: string;
-    gray500: string;
-    gray700: string;
-    gray900: string;
-    red500: string;
-    green500: string;
+    readonly page: {
+        readonly bg: {
+            readonly default: {
+                readonly value: "{colors.bg.default}";
+            };
+        };
+        readonly border: {
+            readonly default: {
+                readonly value: "{colors.line.default}";
+            };
+        };
+        readonly text: {
+            readonly default: {
+                readonly value: "{colors.fg.default}";
+            };
+            readonly muted: {
+                readonly value: "{colors.fg.muted}";
+            };
+        };
+    };
+    readonly cta: {
+        readonly primary: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.primary}";
+                };
+                readonly hover: {
+                    readonly value: "{colors.bg.primary}";
+                    readonly modify: {
+                        readonly type: "alpha";
+                        readonly value: "0.9";
+                    };
+                };
+            };
+            readonly border: {
+                readonly focus: {
+                    readonly value: "{colors.line.primary}";
+                };
+            };
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.onPrimary}";
+                };
+                readonly hover: {
+                    readonly value: "{colors.fg.onPrimary}";
+                };
+            };
+        };
+        readonly secondary: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.secondary}";
+                };
+                readonly hover: {
+                    readonly value: "{colors.bg.secondary}";
+                    readonly modify: {
+                        readonly type: "alpha";
+                        readonly value: "0.9";
+                    };
+                };
+            };
+            readonly border: {
+                readonly focus: {
+                    readonly value: "{colors.line.primary}";
+                };
+            };
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.onSecondary}";
+                };
+                readonly hover: {
+                    readonly value: "{colors.fg.onSecondary}";
+                };
+            };
+        };
+    };
+    readonly link: {
+        readonly primary: {
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.primary}";
+                };
+                readonly hover: {
+                    readonly value: "{colors.fg.primary}";
+                    readonly modify: {
+                        readonly type: "alpha";
+                        readonly value: "0.9";
+                    };
+                };
+            };
+        };
+        readonly secondary: {
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.default}";
+                };
+                readonly hover: {
+                    readonly value: "{colors.fg.default}";
+                    readonly modify: {
+                        readonly type: "alpha";
+                        readonly value: "0.9";
+                    };
+                };
+            };
+        };
+    };
+    readonly input: {
+        readonly bg: {
+            readonly default: {
+                readonly value: "{colors.bg.default}";
+            };
+        };
+        readonly border: {
+            readonly default: {
+                readonly value: "{colors.line.heavy}";
+            };
+            readonly focus: {
+                readonly value: "{colors.line.primary}";
+            };
+            readonly error: {
+                readonly value: "{colors.line.negative}";
+            };
+        };
+        readonly label: {
+            readonly default: {
+                readonly value: "{colors.fg.default}";
+            };
+        };
+        readonly placeholder: {
+            readonly default: {
+                readonly value: "{colors.fg.muted}";
+            };
+        };
+        readonly text: {
+            readonly default: {
+                readonly value: "{colors.fg.default}";
+            };
+        };
+        readonly errorText: {
+            readonly default: {
+                readonly value: "{colors.fg.negative}";
+            };
+        };
+    };
+    readonly bg: {
+        readonly default: {
+            readonly value: "#ffffff";
+        };
+        readonly alternate: {
+            readonly value: "#eef0f3";
+        };
+        readonly overlay: {
+            readonly value: "{colors.bg.alternate}";
+            readonly modify: {
+                readonly type: "alpha";
+                readonly value: 0.33;
+            };
+        };
+        readonly skeleton: {
+            readonly value: "{colors.fg.default}";
+            readonly modify: {
+                readonly type: "alpha";
+                readonly value: 0.1;
+            };
+        };
+        readonly primary: {
+            readonly value: "#0052ff";
+        };
+        readonly secondary: {
+            readonly value: "#eef0f3";
+        };
+    };
+    readonly fg: {
+        readonly default: {
+            readonly value: "#0a0b0d";
+        };
+        readonly muted: {
+            readonly value: "#5b616e";
+        };
+        readonly primary: {
+            readonly value: "#0052ff";
+        };
+        readonly onPrimary: {
+            readonly value: "#ffffff";
+        };
+        readonly onSecondary: {
+            readonly value: "#0a0b0d";
+        };
+        readonly positive: {
+            readonly value: "#008531";
+        };
+        readonly negative: {
+            readonly value: "#cf202f";
+        };
+    };
+    readonly line: {
+        readonly default: {
+            readonly value: "#dcdfe4";
+        };
+        readonly heavy: {
+            readonly value: "#9397a0";
+        };
+        readonly primary: {
+            readonly value: "{colors.fg.primary}";
+        };
+        readonly positive: {
+            readonly value: "{colors.fg.positive}";
+        };
+        readonly negative: {
+            readonly value: "{colors.fg.negative}";
+        };
+    };
+};
+export declare const font: {
+    readonly family: {
+        readonly sans: {
+            readonly value: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+        };
+    };
+    readonly size: {
+        readonly base: {
+            readonly value: 16;
+        };
+    };
 };
 export declare const tokens: {
     colors: {
-        error: string;
-        success: string;
-        background: string;
-        backgroundOverlay: string;
-        backgroundSkeleton: string;
-        text: string;
-        textSecondary: string;
-        primary: string;
-        primaryText: string;
-        primaryHoverBackground: string;
-        primaryHoverText: string;
-        primaryFocusRing: string;
-        secondary: string;
-        secondaryText: string;
-        secondaryHoverBackground: string;
-        secondaryHoverText: string;
-        secondaryFocusRing: string;
-        linkText: string;
-        linkHover: string;
-        linkSecondaryText: string;
-        linkSecondaryHover: string;
-        border: string;
-        inputBackground: string;
-        inputBorder: string;
-        inputFocusBorder: string;
-        inputLabel: string;
-        inputPlaceholder: string;
-        inputText: string;
-    };
-    fontFamily: {
-        sans: string;
-    };
-    fontSizeBase: number;
+        readonly page: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.default}";
+                };
+            };
+            readonly border: {
+                readonly default: {
+                    readonly value: "{colors.line.default}";
+                };
+            };
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.default}";
+                };
+                readonly muted: {
+                    readonly value: "{colors.fg.muted}";
+                };
+            };
+        };
+        readonly cta: {
+            readonly primary: {
+                readonly bg: {
+                    readonly default: {
+                        readonly value: "{colors.bg.primary}";
+                    };
+                    readonly hover: {
+                        readonly value: "{colors.bg.primary}";
+                        readonly modify: {
+                            readonly type: "alpha";
+                            readonly value: "0.9";
+                        };
+                    };
+                };
+                readonly border: {
+                    readonly focus: {
+                        readonly value: "{colors.line.primary}";
+                    };
+                };
+                readonly text: {
+                    readonly default: {
+                        readonly value: "{colors.fg.onPrimary}";
+                    };
+                    readonly hover: {
+                        readonly value: "{colors.fg.onPrimary}";
+                    };
+                };
+            };
+            readonly secondary: {
+                readonly bg: {
+                    readonly default: {
+                        readonly value: "{colors.bg.secondary}";
+                    };
+                    readonly hover: {
+                        readonly value: "{colors.bg.secondary}";
+                        readonly modify: {
+                            readonly type: "alpha";
+                            readonly value: "0.9";
+                        };
+                    };
+                };
+                readonly border: {
+                    readonly focus: {
+                        readonly value: "{colors.line.primary}";
+                    };
+                };
+                readonly text: {
+                    readonly default: {
+                        readonly value: "{colors.fg.onSecondary}";
+                    };
+                    readonly hover: {
+                        readonly value: "{colors.fg.onSecondary}";
+                    };
+                };
+            };
+        };
+        readonly link: {
+            readonly primary: {
+                readonly text: {
+                    readonly default: {
+                        readonly value: "{colors.fg.primary}";
+                    };
+                    readonly hover: {
+                        readonly value: "{colors.fg.primary}";
+                        readonly modify: {
+                            readonly type: "alpha";
+                            readonly value: "0.9";
+                        };
+                    };
+                };
+            };
+            readonly secondary: {
+                readonly text: {
+                    readonly default: {
+                        readonly value: "{colors.fg.default}";
+                    };
+                    readonly hover: {
+                        readonly value: "{colors.fg.default}";
+                        readonly modify: {
+                            readonly type: "alpha";
+                            readonly value: "0.9";
+                        };
+                    };
+                };
+            };
+        };
+        readonly input: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.default}";
+                };
+            };
+            readonly border: {
+                readonly default: {
+                    readonly value: "{colors.line.heavy}";
+                };
+                readonly focus: {
+                    readonly value: "{colors.line.primary}";
+                };
+                readonly error: {
+                    readonly value: "{colors.line.negative}";
+                };
+            };
+            readonly label: {
+                readonly default: {
+                    readonly value: "{colors.fg.default}";
+                };
+            };
+            readonly placeholder: {
+                readonly default: {
+                    readonly value: "{colors.fg.muted}";
+                };
+            };
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.default}";
+                };
+            };
+            readonly errorText: {
+                readonly default: {
+                    readonly value: "{colors.fg.negative}";
+                };
+            };
+        };
+        readonly bg: {
+            readonly default: {
+                readonly value: "#ffffff";
+            };
+            readonly alternate: {
+                readonly value: "#eef0f3";
+            };
+            readonly overlay: {
+                readonly value: "{colors.bg.alternate}";
+                readonly modify: {
+                    readonly type: "alpha";
+                    readonly value: 0.33;
+                };
+            };
+            readonly skeleton: {
+                readonly value: "{colors.fg.default}";
+                readonly modify: {
+                    readonly type: "alpha";
+                    readonly value: 0.1;
+                };
+            };
+            readonly primary: {
+                readonly value: "#0052ff";
+            };
+            readonly secondary: {
+                readonly value: "#eef0f3";
+            };
+        };
+        readonly fg: {
+            readonly default: {
+                readonly value: "#0a0b0d";
+            };
+            readonly muted: {
+                readonly value: "#5b616e";
+            };
+            readonly primary: {
+                readonly value: "#0052ff";
+            };
+            readonly onPrimary: {
+                readonly value: "#ffffff";
+            };
+            readonly onSecondary: {
+                readonly value: "#0a0b0d";
+            };
+            readonly positive: {
+                readonly value: "#008531";
+            };
+            readonly negative: {
+                readonly value: "#cf202f";
+            };
+        };
+        readonly line: {
+            readonly default: {
+                readonly value: "#dcdfe4";
+            };
+            readonly heavy: {
+                readonly value: "#9397a0";
+            };
+            readonly primary: {
+                readonly value: "{colors.fg.primary}";
+            };
+            readonly positive: {
+                readonly value: "{colors.fg.positive}";
+            };
+            readonly negative: {
+                readonly value: "{colors.fg.negative}";
+            };
+        };
+    };
+    font: {
+        readonly family: {
+            readonly sans: {
+                readonly value: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+            };
+        };
+        readonly size: {
+            readonly base: {
+                readonly value: 16;
+            };
+        };
+    };
 };
 export type Tokens = typeof tokens;