@multiplatform.one/connectkit 6.0.0

package/dist/cjs/styles/defaultTheme.cjs

@@ -0,0 +1,106 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var defaultTheme_exports = {};
+__export(defaultTheme_exports, {
+  default: () => defaultTheme_default
+});
+module.exports = __toCommonJS(defaultTheme_exports);
+const defaultLightTheme = {
+  font: {
+    family: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji'`
+  },
+  text: {
+    primary: {
+      color: "#373737"
+    },
+    secondary: {
+      color: "#999999",
+      hover: {
+        color: "#111111"
+      }
+    },
+    error: "#FC6464",
+    valid: "#32D74B"
+  },
+  buttons: {
+    primary: {
+      borderRadius: 16,
+      color: "#000373737000",
+      background: "#FFFFFF",
+      border: "#F0F0F0",
+      hover: {
+        color: "#000000",
+        border: "#1A88F8"
+      }
+    },
+    secondary: {
+      borderRadius: 16,
+      background: "#F6F7F9",
+      color: "#000000"
+    }
+  },
+  navigation: {
+    color: "#999999"
+  },
+  modal: {
+    background: "#ffffff",
+    // need to generate an rgba transparent version of this for Safari
+    divider: "#f7f6f8"
+  },
+  tooltips: {
+    color: "#999999",
+    background: "#ffffff",
+    hover: {
+      background: "#f6f7f9"
+    }
+  },
+  overlay: {
+    background: "rgba(0, 0, 0, 0.06)"
+  },
+  qrCode: {
+    accentColor: "#F7F6F8"
+  }
+};
+const parseTheme = theme => {
+  return theme;
+};
+const userPrefersDarkMode = () => {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+};
+let darkMode = userPrefersDarkMode();
+if (darkMode) {}
+const defaultTheme = {
+  connectKit: {
+    options: {
+      iconStyle: "light"
+    },
+    //theme: parseTheme(defaultLightTheme),
+    theme: {
+      preferred: "dark",
+      light: parseTheme(defaultLightTheme),
+      dark: parseTheme(defaultLightTheme)
+    }
+  }
+};
+var defaultTheme_default = defaultTheme;

package/dist/cjs/styles/defaultTheme.native.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var defaultTheme_exports = {};
+__export(defaultTheme_exports, {
+  default: () => defaultTheme_default
+});
+module.exports = __toCommonJS(defaultTheme_exports);
+var defaultLightTheme = {
+  font: {
+    family: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji'`
+  },
+  text: {
+    primary: {
+      color: "#373737"
+    },
+    secondary: {
+      color: "#999999",
+      hover: {
+        color: "#111111"
+      }
+    },
+    error: "#FC6464",
+    valid: "#32D74B"
+  },
+  buttons: {
+    primary: {
+      borderRadius: 16,
+      color: "#000373737000",
+      background: "#FFFFFF",
+      border: "#F0F0F0",
+      hover: {
+        color: "#000000",
+        border: "#1A88F8"
+      }
+    },
+    secondary: {
+      borderRadius: 16,
+      background: "#F6F7F9",
+      color: "#000000"
+    }
+  },
+  navigation: {
+    color: "#999999"
+  },
+  modal: {
+    background: "#ffffff",
+    // need to generate an rgba transparent version of this for Safari
+    divider: "#f7f6f8"
+  },
+  tooltips: {
+    color: "#999999",
+    background: "#ffffff",
+    hover: {
+      background: "#f6f7f9"
+    }
+  },
+  overlay: {
+    background: "rgba(0, 0, 0, 0.06)"
+  },
+  qrCode: {
+    accentColor: "#F7F6F8"
+  }
+};
+var parseTheme = function parseTheme2(theme) {
+  return theme;
+};
+var userPrefersDarkMode = function userPrefersDarkMode2() {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+};
+var darkMode = userPrefersDarkMode();
+if (darkMode) {}
+var defaultTheme = {
+  connectKit: {
+    options: {
+      iconStyle: "light"
+    },
+    //theme: parseTheme(defaultLightTheme),
+    theme: {
+      preferred: "dark",
+      light: parseTheme(defaultLightTheme),
+      dark: parseTheme(defaultLightTheme)
+    }
+  }
+};
+var defaultTheme_default = defaultTheme;
+//# sourceMappingURL=defaultTheme.native.js.map

package/dist/cjs/styles/defaultTheme.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","defaultTheme_exports","__export","default","defaultTheme_default","module","exports","defaultLightTheme","font","family","text","primary","color","secondary","hover","error","valid","buttons","borderRadius","background","border","navigation","modal","divider","tooltips","overlay","qrCode","accentColor","parseTheme","parseTheme2","theme","userPrefersDarkMode","userPrefersDarkMode2","window","matchMedia","matches","darkMode","defaultTheme","connectKit","options","iconStyle","preferred","light","dark"],"sources":["../../../src/styles/defaultTheme.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,oBAAA;AAAAC,QAAA,CAAAD,oBAAA;EAAAE,OAAA,EAAAA,CAAA,KAAAC;AAAA;AAEAC,MAAM,CAAAC,OAAA,GAAAV,YAA2B,CAAAK,oBAAA;AAAA,IAC/BM,iBAAM;EAAAC,IACJ;IACFC,MAAA;EACA;EAAMC,IACJ;IAASC,OACP,EAAO;MACTC,KAAA;IACA;IAAWC,SACF;MACPD,KAAA,EAAO;MAAAE,KACL;QACFF,KAAA;MACF;IACA;IACAG,KAAA,EAAO;IACTC,KAAA;EACA;EAASC,OACP;IAASN,OACP;MACAO,YAAO;MACPN,KAAA,iBAAY;MACZO,UAAQ;MACRC,MAAA,EAAO;MAAAN,KACL;QACAF,KAAA,WAAQ;QACVQ,MAAA;MACF;IACA;IAAWP,SACT;MACAK,YAAY;MACZC,UAAO;MACTP,KAAA;IACF;EACA;EAAYS,UACH;IACTT,KAAA;EACA;EAAOU,KACL;IAAYH,UAAA;IACZ;IACFI,OAAA;EACA;EAAUC,QACR,EAAO;IACPZ,KAAA,WAAY;IACZO,UAAO;IAAAL,KACL;MACFK,UAAA;IACF;EACA;EAASM,OACP;IACFN,UAAA;EACA;EAAQO,MACN;IACFC,WAAA;EACF;AAGA;AACE,IAAAC,UAAO,YAAAC,YAAAC,KAAA;EACT,OAAAA,KAAA;AAEA;AACE,IAAAC,mBAAW,GAAW,SAAAC,oBAAoBA,CAAA;EAC1C,WAAOC,MAAO,gBAAc,EAAO,YAAW;EAQhD,OAAAA,MAAA,CAAAC,UAAA,IAAAD,MAAA,CAAAC,UAAA,iCAAAC,OAAA;AACA;AAEA,IAAIC,QAAA,GAAUL,mBAAA;AACd,IAAAK,QAAA,GAEA;AAAkC,IAChCC,YAAY;EAAAC,UACV,EAAS;IAAAC,OACP;MACFC,SAAA;IAAA;IAEA;IAAOV,KACL;MACAW,SAAO;MACPC,KAAA,EAAMd,UAAW,CAAArB,iBAAiB;MACpCoC,IAAA,EAAAf,UAAA,CAAArB,iBAAA;IACF;EACF;AACA","ignoreList":[]}

package/dist/cjs/styles/index.cjs

@@ -0,0 +1,343 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var styles_exports = {};
+__export(styles_exports, {
+  ResetContainer: () => ResetContainer
+});
+module.exports = __toCommonJS(styles_exports);
+var import_styled = __toESM(require("./styled/index.cjs"));
+var import_styled_components = require("styled-components");
+var import_framer_motion = require("framer-motion");
+var import_p3 = require("../utils/p3.cjs");
+var import_themes = __toESM(require("./themes/index.cjs"));
+const themeGlobals = {
+  default: {
+    "--ck-font-family": `-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica,
+    'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji',
+    'Segoe UI Symbol'`,
+    "--ck-border-radius": "20px",
+    "--ck-secondary-button-border-radius": "16px"
+  },
+  graphics: {
+    light: {
+      "--ck-graphic-wave-stop-01": "#E8F17D",
+      "--ck-graphic-wave-stop-02": "#A8ECDE",
+      "--ck-graphic-wave-stop-03": "#7AA1F2",
+      "--ck-graphic-wave-stop-04": "#DEA1E8",
+      "--ck-graphic-wave-stop-05": "#F46D98",
+      "--ck-graphic-scaniconwithlogos-01": "#4E4E4E",
+      "--ck-graphic-scaniconwithlogos-02": "#272727",
+      "--ck-graphic-scaniconwithlogos-03": "#F8D74A",
+      "--ck-graphic-scaniconwithlogos-04": "#F6F7F9",
+      "--ck-chain-ethereum-01": "#25292E",
+      "--ck-chain-ethereum-02": "#ffffff",
+      "--ck-chain-ethereum-03": "#DFE0E0"
+    },
+    dark: {
+      "--ck-graphic-wave-stop-01": "#E8F17D",
+      "--ck-graphic-wave-stop-02": "#A8ECDE",
+      "--ck-graphic-wave-stop-03": "#7AA1F2",
+      "--ck-graphic-wave-stop-04": "#DEA1E8",
+      "--ck-graphic-wave-stop-05": "#F46D98",
+      "--ck-graphic-scaniconwithlogos-01": "#AFAFAF",
+      "--ck-graphic-scaniconwithlogos-02": "#696969",
+      "--ck-graphic-scaniconwithlogos-03": "#F8D74A",
+      "--ck-graphic-scaniconwithlogos-04": "#3D3D3D"
+      //'--ck-chain-ethereum-01': '#fff',
+      //'--ck-chain-ethereum-02': '#000',
+      //'--ck-chain-ethereum-03': '#000',
+    }
+  },
+  ens: {
+    light: {
+      "--ck-ens-01-start": "#FF3B30",
+      "--ck-ens-01-stop": "#FF9500",
+      "--ck-ens-02-start": "#FF9500",
+      "--ck-ens-02-stop": "#FFCC00",
+      "--ck-ens-03-start": "#FFCC00",
+      "--ck-ens-03-stop": "#34C759",
+      "--ck-ens-04-start": "#5856D6",
+      "--ck-ens-04-stop": "#AF52DE",
+      "--ck-ens-05-start": "#5AC8FA",
+      "--ck-ens-05-stop": "#007AFF",
+      "--ck-ens-06-start": "#007AFF",
+      "--ck-ens-06-stop": "#5856D6",
+      "--ck-ens-07-start": "#5856D6",
+      "--ck-ens-07-stop": "#AF52DE",
+      "--ck-ens-08-start": "#AF52DE",
+      "--ck-ens-08-stop": "#FF2D55"
+    },
+    dark: {
+      "--ck-ens-01-start": "#FF453A",
+      "--ck-ens-01-stop": "#FF9F0A",
+      "--ck-ens-02-start": "#FF9F0A",
+      "--ck-ens-02-stop": "#FFD60A",
+      "--ck-ens-03-start": "#FFD60A",
+      "--ck-ens-03-stop": "#32D74B",
+      "--ck-ens-04-start": "#32D74B",
+      "--ck-ens-04-stop": "#64D2FF",
+      "--ck-ens-05-start": "#64D2FF",
+      "--ck-ens-05-stop": "#0A84FF",
+      "--ck-ens-06-start": "#0A84FF",
+      "--ck-ens-06-stop": "#5E5CE6",
+      "--ck-ens-07-start": "#5E5CE6",
+      "--ck-ens-07-stop": "#BF5AF2",
+      "--ck-ens-08-start": "#BF5AF2",
+      "--ck-ens-08-stop": "#FF2D55"
+    }
+  },
+  brand: {
+    "--ck-aave-brand": "#9896FF",
+    "--ck-aave-brand-hover": "#8784FF",
+    "--ck-brand-walletConnect": "#3B99FC",
+    "--ck-brand-coinbaseWallet": "#0052FF",
+    "--ck-brand-metamask": "#FF5C16",
+    "--ck-brand-metamask-bg": "#FFF2EB",
+    "--ck-brand-metamask-01": "#FF5C16",
+    "--ck-brand-metamask-02": "#E34807",
+    "--ck-brand-metamask-03": "#FF8D5D",
+    "--ck-brand-metamask-04": "#661800",
+    "--ck-brand-metamask-05": "#C0C4CD",
+    "--ck-brand-metamask-06": "#E7EBF6",
+    "--ck-brand-trust-01": "#3375BB",
+    "--ck-brand-trust-02": "#ffffff",
+    "--ck-brand-trust-01b": "#ffffff",
+    // dark Theme
+    "--ck-brand-trust-02b": "#3375BB",
+    // dark Theme
+    "--ck-brand-argent": "#f36a3d",
+    "--ck-brand-imtoken-01": "#11C4D1",
+    "--ck-brand-imtoken-02": "#0062AD",
+    "--ck-brand-safe": "#12FF80",
+    "--ck-brand-dawn": "#000000"
+  }
+};
+const themeColors = {
+  light: import_themes.default.base.light,
+  dark: import_themes.default.base.dark,
+  web95: import_themes.default.web95,
+  retro: import_themes.default.retro,
+  soft: import_themes.default.soft,
+  midnight: import_themes.default.midnight,
+  minimal: import_themes.default.minimal,
+  rounded: import_themes.default.rounded,
+  nouns: import_themes.default.nouns
+};
+const createCssVars = (scheme, _important) => {
+  return import_styled_components.css`
+    ${Object.keys(scheme).map(key => {
+    const value = scheme[key];
+    return value && `${key}:${value};`;
+  })}
+  `;
+};
+const createCssColors = (scheme, override) => {
+  const important = override ? " !important" : "";
+  return import_styled_components.css`
+    ${Object.keys(scheme).map(key => {
+    const value = scheme[key];
+    return value && `${key}:${value}${important};`;
+  })}
+    @supports (color: color(display-p3 1 1 1)) {
+      ${Object.keys(scheme).map(key => {
+    const value = scheme[key];
+    return `${key}:${(0, import_p3.hexToP3)(value)}${important};`;
+  })}
+    }
+  `;
+};
+const themes = {
+  default: createCssVars(themeGlobals.default),
+  light: createCssColors(themeColors.light),
+  dark: createCssColors(themeColors.dark),
+  web95: createCssColors(themeColors.web95),
+  retro: createCssColors(themeColors.retro),
+  soft: createCssColors(themeColors.soft),
+  midnight: createCssColors(themeColors.midnight),
+  minimal: createCssColors(themeColors.minimal),
+  rounded: createCssColors(themeColors.rounded),
+  nouns: createCssColors(themeColors.nouns)
+};
+const globals = {
+  brand: createCssColors(themeGlobals.brand),
+  ensLight: createCssColors(themeGlobals.ens.light),
+  ensDark: createCssColors(themeGlobals.ens.dark),
+  graphicsLight: createCssColors(themeGlobals.graphics.light),
+  graphicsDark: createCssColors(themeGlobals.graphics.dark)
+};
+const globalsLight = import_styled_components.css`
+  ${globals.brand}
+  ${globals.ensLight}
+  ${globals.graphicsLight}
+`;
+const globalsDark = import_styled_components.css`
+  ${globals.brand}
+  ${globals.ensDark}
+  ${globals.graphicsDark}
+`;
+let mode = "auto";
+const ResetContainer = (0, import_styled.default)(import_framer_motion.motion.div)`
+  ${themes.default}
+
+  ${props => {
+  switch (props.$useTheme) {
+    case "web95":
+      mode = "light";
+      return themes.web95;
+    case "retro":
+      mode = "light";
+      return themes.retro;
+    case "soft":
+      mode = "light";
+      return themes.soft;
+    case "midnight":
+      mode = "dark";
+      return themes.midnight;
+    case "minimal":
+      mode = "light";
+      return themes.minimal;
+    case "rounded":
+      mode = "light";
+      return themes.rounded;
+    case "nouns":
+      mode = "light";
+      return themes.nouns;
+    default:
+      if (props.$useMode === "light") {
+        mode = "light";
+        return themes.light;
+      } else if (props.$useMode === "dark") {
+        mode = "dark";
+        return themes.dark;
+      } else {
+        return import_styled_components.css`
+            @media (prefers-color-scheme: light) {
+              ${themes.light}
+            }
+            @media (prefers-color-scheme: dark) {
+              ${themes.dark}
+            }
+          `;
+      }
+  }
+}}
+
+  ${() => {
+  switch (mode) {
+    case "light":
+      return globalsLight;
+    case "dark":
+      return globalsDark;
+    default:
+      return import_styled_components.css`
+          ${globalsLight}
+          @media (prefers-color-scheme: dark) {
+            ${globalsDark}
+          }
+        `;
+  }
+}}
+
+  ${props => {
+  if (props.$customTheme && props.$customTheme["--ck-accent-color"] && ["light", "dark", "auto", "", void 0].includes(props.$useTheme)) {
+    const accentColor = props.$customTheme["--ck-accent-color"];
+    const accentTextColor = props.$customTheme["--ck-accent-text-color"] ?? "#ffffff";
+    return {
+      "--ck-accent-color": accentColor,
+      "--ck-accent-text-color": accentTextColor,
+      // '--ck-connectbutton-color': accentTextColor,
+      // '--ck-connectbutton-background': accentColor,
+      // '--ck-connectbutton-background-hover': accentColor,
+      // '--ck-connectbutton-background-active': LightenDarkenColor(
+      // accentColor,
+      // 20
+      // ),
+      "--ck-secondary-button-background": accentColor,
+      "--ck-secondary-button-hover-background": accentColor,
+      "--ck-secondary-button-color": accentTextColor,
+      "--ck-button-primary-color": accentTextColor,
+      "--ck-focus-color": accentColor
+    };
+  }
+  if (props.$customTheme) {
+    return createCssColors(props.$customTheme, true);
+  }
+}}
+
+  all: initial;
+  text-align: left;
+  text-direction: ltr;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-text-stroke: 0.001px transparent;
+  text-size-adjust: none;
+  font-size: 16px;
+
+  button {
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-text-stroke: 0.001px transparent;
+  }
+
+  &,
+  * {
+    font-family: var(--ck-font-family);
+    box-sizing: border-box;
+    outline: none;
+    border: none;
+  }
+  /*
+  @media (prefers-reduced-motion) {
+    * {
+      animation-duration: 60ms !important;
+      transition-duration: 60ms !important;
+    }
+  }
+  */
+  img,
+  svg {
+    max-width: 100%;
+  }
+  strong {
+    font-weight: 600;
+  }
+  a:focus-visible,
+  button:focus-visible {
+    outline: 2px solid var(--ck-focus-color);
+  }
+`;