@openfort/react 0.3.1 → 1.0.0

package/build/styles/index.js

@@ -0,0 +1,334 @@
+import { motion } from 'framer-motion';
+import { css } from 'styled-components';
+import { hexToP3 } from '../utils/p3.js';
+import styled from './styled/index.js';
+import predefinedThemes from './themes/index.js';
+
+/**
+ * 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',
+            '--ck-body-color-danger': '#FF4E4E',
+            '--ck-body-color-valid': '#32D74B',
+        },
+        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-body-color-danger': '#FF4E4E',
+            '--ck-body-color-valid': '#32D74B',
+            //'--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-family-accounts-brand': '#0090ff',
+        '--ck-family-brand': '#1A88F8',
+        '--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,
+};
+/**
+ * Generates CSS custom property declarations from the given theme map.
+ */
+//  TODO: Don't use :any type
+const createCssVars = (scheme, _important) => {
+    return css `
+    ${Object.keys(scheme).map((key) => {
+        const value = scheme[key];
+        return value && `${key}:${value};`;
+    })}
+  `;
+};
+/**
+ * Expands a theme colour map into CSS custom properties, using Display-P3 values when supported.
+ *
+ * @param scheme - Map of CSS custom property names to hex colour values.
+ * @param override - When `true`, appends `!important` to each declaration.
+ */
+const createCssColors = (scheme, override) => {
+    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
+ */
+// OLD_TODO: Think more about how to reset our components as to not be affected by external stylings
+// OLD_TODO: Merge theme objects instead of overriding
+let mode = 'auto';
+const ResetContainer = styled(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 css `
+            @media (prefers-color-scheme: light) {
+              ${themes.light}
+            }
+            @media (prefers-color-scheme: dark) {
+              ${themes.dark}
+            }
+          `;
+            }
+    }
+}}
+
+  ${(_props) => {
+    switch (mode) {
+        case 'light':
+            return globalsLight;
+        case 'dark':
+            return globalsDark;
+        default:
+            return css `
+          ${globalsLight}
+          @media (prefers-color-scheme: dark) {
+            ${globalsDark}
+          }
+        `;
+    }
+}}
+
+  ${(props) => {
+    var _a, _b;
+    if (((_a = props.$customTheme) === null || _a === void 0 ? void 0 : _a['--ck-accent-color']) &&
+        ['light', 'dark', 'auto', '', undefined].includes(props.$useTheme)) {
+        const accentColor = props.$customTheme['--ck-accent-color'];
+        const accentTextColor = (_b = props.$customTheme['--ck-accent-text-color']) !== null && _b !== void 0 ? _b : '#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);
+  }
+`;
+
+export { ResetContainer };
+//# sourceMappingURL=index.js.map

package/build/styles/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/styles/styled/index.js

@@ -0,0 +1,14 @@
+import styled$1 from 'styled-components';
+
+/**
+ * Workaround to expose the correct styled-components export in ESM builds.
+ *
+ * When using Rollup with styled-components, the DOM helpers may be assigned to `styled.default`
+ * instead of `styled`. This proxy ensures consumers can import `styled` without needing to know
+ * about the bundler quirk. Please open a discussion on GitHub if you have a more robust fix:
+ * https://github.com/openfort-xyz/openfort-react/discussions/new.
+ */
+var styled = typeof styled$1.div === 'function' ? styled$1 : styled$1.default;
+
+export { styled as default };
+//# sourceMappingURL=index.js.map

package/build/styles/styled/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/build/styles/themes/base.js

@@ -0,0 +1,147 @@
+const baseTheme = {
+    light: {
+        /** Connect Wallet button tokens. */
+        '--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 tokens. */
+        '--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 tokens. */
+        '--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 tokens. */
+        '--ck-tertiary-button-background': '#FFFFFF',
+        '--ck-secondary-button-hover-background': '#e0e4eb',
+        /** Input field tokens. */
+        '--ck-input-background': '#e0e4eb',
+        '--ck-input-hover-background': '#F6F7F9',
+        /** Modal appearance tokens. */
+        '--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 section tokens. */
+        //'--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',
+        /** Tooltip styling tokens. */
+        '--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 tokens. */
+        '--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 styling tokens. */
+        '--ck-qr-dot-color': '#000000',
+        '--ck-qr-border-color': '#f7f6f8',
+        /** Miscellaneous token overrides. */
+        '--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',
+        /** Input field tokens. */
+        '--ck-input-background': '#4D4D4D',
+        '--ck-input-hover-background': '#333333',
+        /** Tertiary button tokens. */
+        '--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': '#323232ff',
+        '--ck-tooltip-background-secondary': '#333333',
+        '--ck-tooltip-color': '#999999',
+        '--ck-tooltip-shadow': '0px 2px 10px rgba(0, 0, 0, 0.08)',
+        /** Network dropdown tokens. */
+        '--ck-dropdown-button-color': '#6C7381',
+        '--ck-spinner-color': 'var(--ck-focus-color)',
+        '--ck-qr-dot-color': '#ffffff',
+        '--ck-qr-border-color': '#3d3d3d',
+    },
+};
+
+export { baseTheme as default };
+//# sourceMappingURL=base.js.map

package/build/styles/themes/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/styles/themes/index.js

@@ -0,0 +1,13 @@
+import baseTheme from './base.js';
+import midnightTheme from './midnight.js';
+import minimalTheme from './minimal.js';
+import nounsTheme from './nouns.js';
+import retroTheme from './retro.js';
+import roundedTheme from './rounded.js';
+import softTheme from './soft.js';
+import web95Theme from './web95.js';
+
+var predefinedThemes = { base: baseTheme, web95: web95Theme, retro: retroTheme, soft: softTheme, midnight: midnightTheme, minimal: minimalTheme, rounded: roundedTheme, nouns: nounsTheme };
+
+export { predefinedThemes as default };
+//# sourceMappingURL=index.js.map

package/build/styles/themes/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/build/styles/themes/midnight.js

@@ -0,0 +1,78 @@
+const midnightTheme = {
+    '--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-input-background': '#3c3c3e',
+    '--ck-input-hover-background': '#363638',
+    '--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',
+};
+
+export { midnightTheme as default };
+//# sourceMappingURL=midnight.js.map

package/build/styles/themes/midnight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"midnight.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}