@coinbase/cdp-react 0.0.10 → 0.0.12

package/dist/index.js

@@ -1,48 +1,54 @@
 import { CDPReactProvider as e, useAppConfig as t } from "./components/CDPReactProvider/index.js";
 import { AuthButton as m } from "./components/AuthButton/index.js";
-import { SignIn as f } from "./components/SignIn/index.js";
+import { SignIn as i } from "./components/SignIn/index.js";
 import { useSignInReducer as x } from "./components/SignIn/useSignInReducer.js";
-import { SignOutButton as I } from "./components/SignOutButton/index.js";
-import { SignInModal as a } from "./components/SignInModal/index.js";
-import { flattenedTheme as l } from "./theme/theme.js";
-import { colors as S, tokens as C } from "./theme/tokens.js";
-import { flattenTokensObject as h, themeToCssVariables as T } from "./theme/utils.js";
-import { IconCheckCircle as v } from "./icons/IconCheckCircle.js";
-import { IconExclamationCircle as E } from "./icons/IconExclamationCircle.js";
-import { IconLock as b } from "./icons/IconLock.js";
-import { IconXMark as D } from "./icons/IconXMark.js";
-import { isEmailInvalid as O } from "./utils/isEmailInvalid.js";
-import { isApiError as j } from "./utils/isApiError.js";
-import { SignInDescription as L } from "./components/SignIn/SignInDescription.js";
-import { SignInForm as X } from "./components/SignIn/SignInForm.js";
-import { SignInImage as w } from "./components/SignIn/SignInImage.js";
-import { SignInTitle as z } from "./components/SignIn/SignInTitle.js";
-import { useSignInContext as H } from "./components/SignIn/SignInProvider.js";
-import { ThemeProvider as K, useTheme as N } from "./components/ThemeProvider/index.js";
+import { SignOutButton as c } from "./components/SignOutButton/index.js";
+import { SignInModal as l } from "./components/SignInModal/index.js";
+import { ThemeProvider as g, useTheme as S } from "./components/ThemeProvider/index.js";
+import { cssVariables as C } from "./theme/cssVariables.js";
+import { theme as d } from "./theme/theme.js";
+import { colors as T, colorsBase as b, colorsComponents as v, colorsSemantic as A, font as B, tokens as E } from "./theme/tokens.js";
+import { flattenTokensObject as D, themeToCssVariables as M } from "./theme/utils.js";
+import { IconCheckCircle as R } from "./icons/IconCheckCircle.js";
+import { IconExclamationCircle as j } from "./icons/IconExclamationCircle.js";
+import { IconLock as L } from "./icons/IconLock.js";
+import { IconXMark as q } from "./icons/IconXMark.js";
+import { isEmailInvalid as y } from "./utils/isEmailInvalid.js";
+import { isApiError as G } from "./utils/isApiError.js";
+import { SignInDescription as J } from "./components/SignIn/SignInDescription.js";
+import { SignInForm as N } from "./components/SignIn/SignInForm.js";
+import { SignInImage as U } from "./components/SignIn/SignInImage.js";
+import { SignInTitle as Y } from "./components/SignIn/SignInTitle.js";
+import { useSignInContext as _ } from "./components/SignIn/SignInProvider.js";
 export {
   m as AuthButton,
   e as CDPReactProvider,
-  v as IconCheckCircle,
-  E as IconExclamationCircle,
-  b as IconLock,
-  D as IconXMark,
-  f as SignIn,
-  L as SignInDescription,
-  X as SignInForm,
-  w as SignInImage,
-  a as SignInModal,
-  z as SignInTitle,
-  I as SignOutButton,
-  K as ThemeProvider,
-  S as colors,
-  h as flattenTokensObject,
-  l as flattenedTheme,
-  j as isApiError,
-  O as isEmailInvalid,
-  T as themeToCssVariables,
-  C as tokens,
+  R as IconCheckCircle,
+  j as IconExclamationCircle,
+  L as IconLock,
+  q as IconXMark,
+  i as SignIn,
+  J as SignInDescription,
+  N as SignInForm,
+  U as SignInImage,
+  l as SignInModal,
+  Y as SignInTitle,
+  c as SignOutButton,
+  g as ThemeProvider,
+  T as colors,
+  b as colorsBase,
+  v as colorsComponents,
+  A as colorsSemantic,
+  C as cssVariables,
+  D as flattenTokensObject,
+  B as font,
+  G as isApiError,
+  y as isEmailInvalid,
+  d as theme,
+  M as themeToCssVariables,
+  E as tokens,
   t as useAppConfig,
-  H as useSignInContext,
+  _ as useSignInContext,
   x as useSignInReducer,
-  N as useTheme
+  S as useTheme
 };

package/dist/theme/cssVariables.d.ts

@@ -0,0 +1,5 @@
+export declare const cssVariables: import('./utils').CDPWebCSSVariables;
+declare const _default: {
+    customProperties: import('./utils').CDPWebCSSVariables;
+};
+export default _default;

package/dist/theme/cssVariables.js

@@ -0,0 +1,10 @@
+import { theme as s } from "./theme.js";
+import { themeToCssVariables as e } from "./utils.js";
+import "./tokens.js";
+const o = e(s), m = {
+  customProperties: o
+};
+export {
+  o as cssVariables,
+  m as default
+};

package/dist/theme/index.d.ts

@@ -1,3 +1,4 @@
+export { cssVariables } from './cssVariables';
 export * from './theme';
 export * from './tokens';
 export * from './utils';

package/dist/theme/index.js

@@ -1,10 +1,16 @@
-import { flattenedTheme as t } from "./theme.js";
-import { colors as s, tokens as f } from "./tokens.js";
-import { flattenTokensObject as a, themeToCssVariables as l } from "./utils.js";
+import { cssVariables as r } from "./cssVariables.js";
+import { theme as t } from "./theme.js";
+import { colors as a, colorsBase as c, colorsComponents as l, colorsSemantic as n, font as f, tokens as p } from "./tokens.js";
+import { flattenTokensObject as b, themeToCssVariables as i } from "./utils.js";
 export {
-  s as colors,
-  a as flattenTokensObject,
-  t as flattenedTheme,
-  l as themeToCssVariables,
-  f as tokens
+  a as colors,
+  c as colorsBase,
+  l as colorsComponents,
+  n as colorsSemantic,
+  r as cssVariables,
+  b as flattenTokensObject,
+  f as font,
+  t as theme,
+  i as themeToCssVariables,
+  p as tokens
 };

package/dist/theme/theme.d.ts

@@ -1,38 +1,242 @@
-export declare const flattenedTheme: import('./utils').Flattened<{
+import { colorsSemantic, colorsComponents, font } from './tokens';
+import { Flattened } from './utils';
+export declare const theme: Flattened<{
     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;
+        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}";
+            };
+        };
     };
-    fontFamily: {
-        sans: string;
+    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;
+            };
+        };
     };
-    fontSizeBase: number;
 }>;
-export type Theme = typeof flattenedTheme;
+export type SemanticColors = Flattened<{
+    colors: typeof colorsSemantic;
+}>;
+export type ComponentColors = Flattened<{
+    colors: typeof colorsComponents;
+}>;
+export type FontTokens = Flattened<{
+    font: typeof font;
+}>;
+export type ColorTokens = SemanticColors | ComponentColors;
+export type Theme = ColorTokens & FontTokens;
 export type ButtonVariant = "primary" | "secondary" | "transparentPrimary" | "transparentSecondary";

package/dist/theme/theme.js

@@ -1,6 +1,6 @@
 import { tokens as t } from "./tokens.js";
-import { flattenTokensObject as e } from "./utils.js";
-const n = e(t);
+import { flattenTokensObject as o } from "./utils.js";
+const r = o(t);
 export {
-  n as flattenedTheme
+  r as theme
 };