@multiplatform.one/connectkit 6.0.0

package/src/styles/index.ts

@@ -0,0 +1,336 @@
+import styled from "./styled";
+import { css } from "styled-components";
+import { motion } from "framer-motion";
+import { CustomTheme } from "../types";
+import { hexToP3 } from "../utils/p3";
+
+import predefinedThemes from "./themes";
+
+/**
+ * Theme variables for the modal
+ */
+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: predefinedThemes.base.light,
+  dark: predefinedThemes.base.dark,
+  web95: predefinedThemes.web95,
+  retro: predefinedThemes.retro,
+  soft: predefinedThemes.soft,
+  midnight: predefinedThemes.midnight,
+  minimal: predefinedThemes.minimal,
+  rounded: predefinedThemes.rounded,
+  nouns: predefinedThemes.nouns,
+};
+
+/**
+ *  Automatically use p3 if available
+ */
+//  TODO: Don't use :any type
+const createCssVars = (scheme: any, _important?: boolean) => {
+  return css`
+    ${Object.keys(scheme).map((key) => {
+      const value = scheme[key];
+      return value && `${key}:${value};`;
+    })}
+  `;
+};
+const createCssColors = (scheme: any, override?: boolean) => {
+  const important = override ? " !important" : "";
+  return 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}:${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 = css`
+  ${globals.brand}
+  ${globals.ensLight}
+  ${globals.graphicsLight}
+`;
+const globalsDark = css`
+  ${globals.brand}
+  ${globals.ensDark}
+  ${globals.graphicsDark}
+`;
+
+/*
+ *  Reset stylings to avoid conflicting with the parent websites styling
+ * Automatically apply theme based on system theme
+ */
+// TODO: Think more about how to reset our components as to not be affected by external stylings
+// TODO: Merge theme objects instead of overriding
+
+let mode = "auto";
+export const ResetContainer = styled(motion.div)<{
+  $useTheme?: string;
+  $useMode?: string;
+  $customTheme?: CustomTheme;
+}>`
+  ${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 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 css`
+          ${globalsLight}
+          @media (prefers-color-scheme: dark) {
+            ${globalsDark}
+          }
+        `;
+    }
+  }}
+
+  ${(props) => {
+    if (
+      props.$customTheme &&
+      props.$customTheme["--ck-accent-color"] &&
+      ["light", "dark", "auto", "", undefined].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);
+  }
+`;

package/src/styles/styled/index.ts

@@ -0,0 +1,13 @@
+/**
+ *
+ * IMPORTANT NOTE: This file is a workaround for the following issue:
+ *
+ * When using rollup with styled-components to build into an ES module, styled components decides to move all of it’s DOM elements into "styled.default" rather than just within "styled"
+ *
+ * We're unsure as to why this issue occurs, if you have any ideas or a better solution please let us know by opening a discussion on our GitHub repo:
+ * https://github.com/family/connectkit/discussions/new
+ *
+ */
+
+import styled from "styled-components";
+export default typeof styled.div === "function" ? styled : styled["default"];

package/src/styles/themes/base.ts

@@ -0,0 +1,182 @@
+export default {
+  light: {
+    /** Connect Wallet Button */
+    "--ck-connectbutton-font-size": "15px",
+    "--ck-connectbutton-color": "#373737",
+    "--ck-connectbutton-background": "#F6F7F9",
+    "--ck-connectbutton-background-secondary": "#FFFFFF",
+
+    "--ck-connectbutton-hover-color": "#373737",
+    "--ck-connectbutton-hover-background": "#F0F2F5",
+
+    "--ck-connectbutton-active-color": "#373737",
+    "--ck-connectbutton-active-background": "#EAECF1",
+
+    "--ck-connectbutton-balance-color": "#373737",
+    "--ck-connectbutton-balance-background": "#fff",
+    "--ck-connectbutton-balance-box-shadow": "inset 0 0 0 1px var(--ck-connectbutton-background)",
+
+    "--ck-connectbutton-balance-hover-background": "#F6F7F9",
+    "--ck-connectbutton-balance-hover-box-shadow":
+      "inset 0 0 0 1px var(--ck-connectbutton-hover-background)",
+
+    "--ck-connectbutton-balance-active-background": "#F0F2F5",
+    "--ck-connectbutton-balance-active-box-shadow":
+      "inset 0 0 0 1px var(--ck-connectbutton-active-background)",
+
+    /** Primary Button */
+    "--ck-primary-button-border-radius": "16px",
+    "--ck-primary-button-color": "#373737",
+    "--ck-primary-button-background": "#F6F7F9",
+    //'--ck-primary-button-box-shadow': 'inset 0 0 0 1px #F0F0F0',
+    "--ck-primary-button-font-weight": "600",
+
+    "--ck-primary-button-hover-color": "#373737",
+    "--ck-primary-button-hover-background": "#F0F2F5",
+    //'--ck-primary-button-hover-box-shadow': 'inset 0 0 0 2px var(--ck-focus-color)',
+
+    //'--ck-primary-button-active-background': '#EAECF1',
+
+    /** Secondary Button */
+    "--ck-secondary-button-border-radius": "16px",
+    "--ck-secondary-button-color": "#373737",
+    "--ck-secondary-button-background": "#F6F7F9",
+    //'--ck-secondary-button-box-shadow': '',
+    //'--ck-secondary-button-font-weight': '',
+
+    /** Tertiary Button */
+    "--ck-tertiary-button-background": "#FFFFFF",
+
+    "--ck-secondary-button-hover-background": "#e0e4eb",
+
+    /** Modal */
+    "--ck-modal-box-shadow": "0px 2px 4px rgba(0, 0, 0, 0.02)",
+    "--ck-overlay-background": "rgba(71, 88, 107, 0.24)",
+    "--ck-body-color": "#373737",
+    "--ck-body-color-muted": "#999999",
+    "--ck-body-color-muted-hover": "#111111",
+    "--ck-body-background": "#ffffff",
+    "--ck-body-background-transparent": "rgba(255,255,255,0)",
+    "--ck-body-background-secondary": "#f6f7f9",
+    "--ck-body-background-secondary-hover-background": "#e0e4eb",
+    "--ck-body-background-secondary-hover-outline": "#4282FF",
+    "--ck-body-background-tertiary": "#F3F4F7",
+    "--ck-body-action-color": "#999999",
+    "--ck-body-divider": "#f7f6f8",
+    "--ck-body-divider-secondary": "rgba(0, 0, 0, 0.06)",
+    "--ck-body-color-danger": "#FF4E4E",
+    "--ck-body-color-valid": "#32D74B",
+    "--ck-siwe-border": "#F0F0F0",
+
+    /** Disclaimer */
+    //'--ck-body-disclaimer-background': '#E3D6C9',
+    //'--ck-body-disclaimer-box-shadow': 'none',
+    "--ck-body-disclaimer-color": "#AAAAAB",
+    "--ck-body-disclaimer-link-color": "#838485",
+    "--ck-body-disclaimer-link-hover-color": "#000000",
+
+    /** Tooltips */
+    "--ck-tooltip-background": "#ffffff",
+    "--ck-tooltip-background-secondary": "#ffffff",
+    "--ck-tooltip-color": "#999999",
+    "--ck-tooltip-shadow": "0px 2px 10px rgba(0, 0, 0, 0.08)",
+
+    /** Network dropdown */
+    "--ck-dropdown-button-color": "#999999",
+    "--ck-dropdown-button-box-shadow":
+      "0 0 0 1px rgba(0,0,0,0.01), 0px 0px 7px rgba(0, 0, 0, 0.05)",
+    "--ck-dropdown-button-background": "#fff",
+
+    "--ck-dropdown-button-hover-color": "#8B8B8B",
+    "--ck-dropdown-button-hover-background": "#F5F7F9",
+
+    /** QR Code */
+    "--ck-qr-dot-color": "#000000",
+    "--ck-qr-border-color": "#f7f6f8",
+
+    /** Misc. */
+    "--ck-focus-color": "#1A88F8",
+    "--ck-spinner-color": "var(--ck-focus-color)",
+    "--ck-copytoclipboard-stroke": "#CCCCCC",
+  },
+  dark: {
+    "--ck-connectbutton-font-size": "15px",
+    "--ck-connectbutton-color": "#ffffff",
+    "--ck-connectbutton-background": "#383838",
+    "--ck-connectbutton-background-secondary": "#282828",
+
+    "--ck-connectbutton-hover-background": "#404040",
+
+    "--ck-connectbutton-active-background": "#4D4D4D",
+
+    "--ck-connectbutton-balance-color": "#fff",
+    "--ck-connectbutton-balance-background": "#282828",
+    "--ck-connectbutton-balance-box-shadow": "inset 0 0 0 1px var(--ck-connectbutton-background)",
+
+    "--ck-connectbutton-balance-hover-background": "#383838",
+    "--ck-connectbutton-balance-hover-box-shadow":
+      "inset 0 0 0 1px var(--ck-connectbutton-hover-background)",
+
+    "--ck-connectbutton-balance-active-background": "#404040",
+    "--ck-connectbutton-balance-active-box-shadow":
+      "inset 0 0 0 1px var(--ck-connectbutton-active-background)",
+
+    "--ck-primary-button-color": "#ffffff",
+    "--ck-primary-button-background": "#383838",
+    //'--ck-primary-button-box-shadow': 'inset 0 0 0 1px #3D3D3D',
+    "--ck-primary-button-border-radius": "16px",
+    "--ck-primary-button-font-weight": "600",
+
+    "--ck-primary-button-hover-background": "#404040",
+    //'--ck-primary-button-hover-box-shadow': 'inset 0 0 0 2px rgba(255, 255, 255, 0.4)',
+
+    //'--ck-primary-button-active-background': '#4D4D4D',
+
+    "--ck-primary-button-active-border-radius": "16px",
+
+    "--ck-secondary-button-color": "#ffffff",
+    "--ck-secondary-button-background": "#333333",
+
+    "--ck-secondary-button-hover-background": "#4D4D4D",
+
+    /** Tertiary Button */
+    "--ck-tertiary-button-background": "#424242",
+
+    "--ck-focus-color": "#1A88F8",
+
+    "--ck-overlay-background": "rgba(0,0,0,0.4)",
+    "--ck-body-color": "#ffffff",
+    "--ck-body-color-muted": "rgba(255, 255, 255, 0.4)",
+    "--ck-body-color-muted-hover": "rgba(255, 255, 255, 0.8)",
+    "--ck-body-background": "#2B2B2B",
+    "--ck-body-background-transparent": "rgba(0,0,0,0)",
+    "--ck-body-background-secondary": "#333333",
+    "--ck-body-background-secondary-hover-background": "#4D4D4D",
+    "--ck-body-background-secondary-hover-outline": "#ffffff",
+    "--ck-body-background-tertiary": "#333333",
+    "--ck-body-action-color": "#808080",
+    "--ck-body-divider": "#383838",
+    "--ck-body-color-danger": "#FF4E4E",
+
+    "--ck-body-disclaimer-color": "#858585",
+    "--ck-body-disclaimer-link-color": "#ADADAD",
+    "--ck-body-disclaimer-link-hover-color": "#FFFFFF",
+
+    "--ck-modal-box-shadow": "0px 2px 4px rgba(0, 0, 0, 0.02)",
+
+    "--ck-copytoclipboard-stroke": "#555555",
+
+    "--ck-tooltip-background": "#2B2B2B",
+    "--ck-tooltip-background-secondary": "#333333",
+    "--ck-tooltip-color": "#999999",
+    "--ck-tooltip-shadow": "0px 2px 10px rgba(0, 0, 0, 0.08)",
+
+    /** Network dropdown */
+    "--ck-dropdown-button-color": "#6C7381",
+
+    "--ck-spinner-color": "var(--ck-focus-color)",
+
+    "--ck-qr-dot-color": "#ffffff",
+    "--ck-qr-border-color": "#3d3d3d",
+  },
+};

package/src/styles/themes/index.ts

@@ -0,0 +1,10 @@
+import base from "./base";
+import web95 from "./web95";
+import retro from "./retro";
+import soft from "./soft";
+import midnight from "./midnight";
+import minimal from "./minimal";
+import rounded from "./rounded";
+import nouns from "./nouns";
+
+export default { base, web95, retro, soft, midnight, minimal, rounded, nouns };

package/src/styles/themes/midnight.ts

@@ -0,0 +1,93 @@
+export default {
+  "--ck-font-family":
+    '"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"',
+  "--ck-border-radius": "10px",
+
+  "--ck-connectbutton-font-size": "17px",
+  "--ck-connectbutton-border-radius": "8px",
+  "--ck-connectbutton-color": "#ffffff",
+  "--ck-connectbutton-background": "#313235",
+  "--ck-connectbutton-box-shadow": "inset 0 0 0 1px rgba(255, 255, 255, 0.05)",
+
+  "--ck-connectbutton-hover-background": "#414144",
+  "--ck-connectbutton-active-background": "#4C4D4F",
+
+  "--ck-connectbutton-balance-color": "#ffffff",
+  "--ck-connectbutton-balance-background": "#1F2023",
+  "--ck-connectbutton-balance-box-shadow": "inset 0 0 0 1px #313235",
+  "--ck-connectbutton-balance-hover-background": "#313235",
+  "--ck-connectbutton-balance-active-background": "#414144",
+
+  "--ck-primary-button-border-radius": "8px",
+  "--ck-primary-button-color": "#ffffff",
+  "--ck-primary-button-background": "rgba(255, 255, 255, 0.08)",
+  "--ck-primary-button-box-shadow": "inset 0 0 0 1px rgba(255, 255, 255, 0.05)",
+
+  "--ck-primary-button-hover-background": "rgba(255, 255, 255, 0.2)",
+
+  "--ck-secondary-button-border-radius": "8px",
+  "--ck-secondary-button-color": "#ffffff",
+  "--ck-secondary-button-background": "#363638",
+  "--ck-secondary-button-box-shadow": "inset 0 0 0 1px rgba(255, 255, 255, 0.05)",
+
+  "--ck-secondary-button-hover-background": "#3c3c3e",
+
+  "--ck-overlay-background": "rgba(0,0,0,0.4)",
+  "--ck-modal-box-shadow": `inset 0 0 0 1px #38393C, 0px 2px 4px rgba(0, 0, 0, 0.02)`,
+
+  "--ck-focus-color": "#1A88F8",
+  "--ck-body-color": "#ffffff",
+  "--ck-body-color-muted": "#8B8F97",
+  "--ck-body-color-muted-hover": "#ffffff",
+  "--ck-body-background": "#1F2023",
+  "--ck-body-background-transparent": "rgba(31, 32, 35, 0)",
+  "--ck-body-background-secondary": "#313235",
+  "--ck-body-background-secondary-hover-background": "#e0e4eb",
+  "--ck-body-background-secondary-hover-outline": "rgba(255, 255, 255, 0.02)",
+  "--ck-body-background-tertiary": "#313235",
+  "--ck-tertiary-border-radius": "12px",
+  "--ck-tertiary-box-shadow": "inset 0 0 0 1px rgba(255, 255, 255, 0.02)",
+
+  "--ck-body-action-color": "#8B8F97",
+  "--ck-body-divider": "rgba(255,255,255,0.1)",
+  "--ck-body-color-danger": "#FF4E4E",
+  "--ck-body-color-valid": "#32D74B",
+
+  "--ck-body-disclaimer-background": "#2B2D31",
+  "--ck-body-disclaimer-box-shadow": "none",
+  "--ck-body-disclaimer-color": "#808183",
+  "--ck-body-disclaimer-link-color": "#AAABAD",
+  "--ck-body-disclaimer-link-hover-color": "#ffffff",
+
+  "--ck-copytoclipboard-stroke": "#CCCCCC",
+
+  "--ck-tooltip-background": "#1F2023",
+  "--ck-tooltip-background-secondary": "#1F2023",
+  "--ck-tooltip-color": "#ffffff",
+  "--ck-tooltip-shadow": " 0 0 0 1px rgba(255, 255, 255, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.02)",
+
+  "--ck-spinner-color": "var(--ck-focus-color)",
+
+  "--ck-dropdown-button-color": "#6C7381",
+  "--ck-dropdown-button-box-shadow": "inset 0 0 0 1px rgba(255, 255, 255, 0.05)",
+  "--ck-dropdown-button-background": "#313235",
+
+  "--ck-dropdown-pending-color": "#8B8F97",
+  "--ck-dropdown-active-color": "#FFF",
+  "--ck-dropdown-active-static-color": "#FFF",
+  "--ck-dropdown-active-background": "rgba(255, 255, 255, 0.07)",
+  "--ck-dropdown-color": "#8B8F97",
+  "--ck-dropdown-background": "#313235",
+  "--ck-dropdown-box-shadow": "inset 0 0 0 1px rgba(255, 255, 255, 0.03)",
+  "--ck-dropdown-border-radius": "8px",
+
+  "--ck-alert-color": "#8B8F97",
+  "--ck-alert-background": "#404145",
+  "--ck-alert-box-shadow": "inset 0 0 0 1px rgba(255, 255, 255, 0.02)",
+
+  "--ck-qr-border-radius": "12px",
+  "--ck-qr-dot-color": "#ffffff",
+  "--ck-qr-border-color": "rgba(255,255,255,0.1)",
+
+  "--ck-recent-badge-border-radius": "32px",
+};