@reown/appkit-ui
Version:
#### 🔗 [Website](https://reown.com/appkit)
926 lines (802 loc) • 32.2 kB
JavaScript
import { css, unsafeCSS } from 'lit';
import { getW3mThemeVariables } from '@reown/appkit-common';
let themeTag = undefined;
let darkModeTag = undefined;
let lightModeTag = undefined;
export function initializeTheming(themeVariables, themeMode) {
themeTag = document.createElement('style');
darkModeTag = document.createElement('style');
lightModeTag = document.createElement('style');
themeTag.textContent = createRootStyles(themeVariables).core.cssText;
darkModeTag.textContent = createRootStyles(themeVariables).dark.cssText;
lightModeTag.textContent = createRootStyles(themeVariables).light.cssText;
document.head.appendChild(themeTag);
document.head.appendChild(darkModeTag);
document.head.appendChild(lightModeTag);
setColorTheme(themeMode);
}
export function setColorTheme(themeMode) {
if (darkModeTag && lightModeTag) {
if (themeMode === 'light') {
darkModeTag.removeAttribute('media');
lightModeTag.media = 'enabled';
}
else {
lightModeTag.removeAttribute('media');
darkModeTag.media = 'enabled';
}
}
}
export function setThemeVariables(themeVariables) {
if (themeTag && darkModeTag && lightModeTag) {
themeTag.textContent = createRootStyles(themeVariables).core.cssText;
darkModeTag.textContent = createRootStyles(themeVariables).dark.cssText;
lightModeTag.textContent = createRootStyles(themeVariables).light.cssText;
}
}
function createRootStyles(themeVariables) {
return {
core: css `
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@keyframes w3m-shake {
0% {
transform: scale(1) rotate(0deg);
}
20% {
transform: scale(1) rotate(-1deg);
}
40% {
transform: scale(1) rotate(1.5deg);
}
60% {
transform: scale(1) rotate(-1.5deg);
}
80% {
transform: scale(1) rotate(1deg);
}
100% {
transform: scale(1) rotate(0deg);
}
}
@keyframes w3m-iframe-fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes w3m-iframe-zoom-in {
0% {
transform: translateY(50px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
@keyframes w3m-iframe-zoom-in-mobile {
0% {
transform: scale(0.95);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
:root {
--w3m-modal-width: 360px;
--w3m-color-mix-strength: ${unsafeCSS(themeVariables?.['--w3m-color-mix-strength']
? `${themeVariables['--w3m-color-mix-strength']}%`
: '0%')};
--w3m-font-family: ${unsafeCSS(themeVariables?.['--w3m-font-family'] ||
'Inter, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;')};
--w3m-font-size-master: ${unsafeCSS(themeVariables?.['--w3m-font-size-master'] || '10px')};
--w3m-border-radius-master: ${unsafeCSS(themeVariables?.['--w3m-border-radius-master'] || '4px')};
--w3m-z-index: ${unsafeCSS(themeVariables?.['--w3m-z-index'] || 999)};
--wui-font-family: var(--w3m-font-family);
--wui-font-size-mini: calc(var(--w3m-font-size-master) * 0.8);
--wui-font-size-micro: var(--w3m-font-size-master);
--wui-font-size-tiny: calc(var(--w3m-font-size-master) * 1.2);
--wui-font-size-small: calc(var(--w3m-font-size-master) * 1.4);
--wui-font-size-paragraph: calc(var(--w3m-font-size-master) * 1.6);
--wui-font-size-medium: calc(var(--w3m-font-size-master) * 1.8);
--wui-font-size-large: calc(var(--w3m-font-size-master) * 2);
--wui-font-size-title-6: calc(var(--w3m-font-size-master) * 2.2);
--wui-font-size-medium-title: calc(var(--w3m-font-size-master) * 2.4);
--wui-font-size-2xl: calc(var(--w3m-font-size-master) * 4);
--wui-border-radius-5xs: var(--w3m-border-radius-master);
--wui-border-radius-4xs: calc(var(--w3m-border-radius-master) * 1.5);
--wui-border-radius-3xs: calc(var(--w3m-border-radius-master) * 2);
--wui-border-radius-xxs: calc(var(--w3m-border-radius-master) * 3);
--wui-border-radius-xs: calc(var(--w3m-border-radius-master) * 4);
--wui-border-radius-s: calc(var(--w3m-border-radius-master) * 5);
--wui-border-radius-m: calc(var(--w3m-border-radius-master) * 7);
--wui-border-radius-l: calc(var(--w3m-border-radius-master) * 9);
--wui-border-radius-3xl: calc(var(--w3m-border-radius-master) * 20);
--wui-font-weight-light: 400;
--wui-font-weight-regular: 500;
--wui-font-weight-medium: 600;
--wui-font-weight-bold: 700;
--wui-letter-spacing-2xl: -1.6px;
--wui-letter-spacing-medium-title: -0.96px;
--wui-letter-spacing-title-6: -0.88px;
--wui-letter-spacing-large: -0.8px;
--wui-letter-spacing-medium: -0.72px;
--wui-letter-spacing-paragraph: -0.64px;
--wui-letter-spacing-small: -0.56px;
--wui-letter-spacing-tiny: -0.48px;
--wui-letter-spacing-micro: -0.2px;
--wui-letter-spacing-mini: -0.16px;
--wui-spacing-0: 0px;
--wui-spacing-4xs: 2px;
--wui-spacing-3xs: 4px;
--wui-spacing-xxs: 6px;
--wui-spacing-2xs: 7px;
--wui-spacing-xs: 8px;
--wui-spacing-1xs: 10px;
--wui-spacing-s: 12px;
--wui-spacing-m: 14px;
--wui-spacing-l: 16px;
--wui-spacing-2l: 18px;
--wui-spacing-xl: 20px;
--wui-spacing-xxl: 24px;
--wui-spacing-2xl: 32px;
--wui-spacing-3xl: 40px;
--wui-spacing-4xl: 90px;
--wui-spacing-5xl: 95px;
--wui-icon-box-size-xxs: 14px;
--wui-icon-box-size-xs: 20px;
--wui-icon-box-size-sm: 24px;
--wui-icon-box-size-md: 32px;
--wui-icon-box-size-mdl: 36px;
--wui-icon-box-size-lg: 40px;
--wui-icon-box-size-2lg: 48px;
--wui-icon-box-size-xl: 64px;
--wui-icon-size-inherit: inherit;
--wui-icon-size-xxs: 10px;
--wui-icon-size-xs: 12px;
--wui-icon-size-sm: 14px;
--wui-icon-size-md: 16px;
--wui-icon-size-mdl: 18px;
--wui-icon-size-lg: 20px;
--wui-icon-size-xl: 24px;
--wui-icon-size-xxl: 28px;
--wui-wallet-image-size-inherit: inherit;
--wui-wallet-image-size-sm: 40px;
--wui-wallet-image-size-md: 56px;
--wui-wallet-image-size-lg: 80px;
--wui-visual-size-size-inherit: inherit;
--wui-visual-size-sm: 40px;
--wui-visual-size-md: 55px;
--wui-visual-size-lg: 80px;
--wui-box-size-md: 100px;
--wui-box-size-lg: 120px;
--wui-ease-out-power-2: cubic-bezier(0, 0, 0.22, 1);
--wui-ease-out-power-1: cubic-bezier(0, 0, 0.55, 1);
--wui-ease-in-power-3: cubic-bezier(0.66, 0, 1, 1);
--wui-ease-in-power-2: cubic-bezier(0.45, 0, 1, 1);
--wui-ease-in-power-1: cubic-bezier(0.3, 0, 1, 1);
--wui-ease-inout-power-1: cubic-bezier(0.45, 0, 0.55, 1);
--wui-duration-lg: 200ms;
--wui-duration-md: 125ms;
--wui-duration-sm: 75ms;
--wui-path-network-sm: path(
'M15.4 2.1a5.21 5.21 0 0 1 5.2 0l11.61 6.7a5.21 5.21 0 0 1 2.61 4.52v13.4c0 1.87-1 3.59-2.6 4.52l-11.61 6.7c-1.62.93-3.6.93-5.22 0l-11.6-6.7a5.21 5.21 0 0 1-2.61-4.51v-13.4c0-1.87 1-3.6 2.6-4.52L15.4 2.1Z'
);
--wui-path-network-md: path(
'M43.4605 10.7248L28.0485 1.61089C25.5438 0.129705 22.4562 0.129705 19.9515 1.61088L4.53951 10.7248C2.03626 12.2051 0.5 14.9365 0.5 17.886V36.1139C0.5 39.0635 2.03626 41.7949 4.53951 43.2752L19.9515 52.3891C22.4562 53.8703 25.5438 53.8703 28.0485 52.3891L43.4605 43.2752C45.9637 41.7949 47.5 39.0635 47.5 36.114V17.8861C47.5 14.9365 45.9637 12.2051 43.4605 10.7248Z'
);
--wui-path-network-lg: path(
'M78.3244 18.926L50.1808 2.45078C45.7376 -0.150261 40.2624 -0.150262 35.8192 2.45078L7.6756 18.926C3.23322 21.5266 0.5 26.3301 0.5 31.5248V64.4752C0.5 69.6699 3.23322 74.4734 7.6756 77.074L35.8192 93.5492C40.2624 96.1503 45.7376 96.1503 50.1808 93.5492L78.3244 77.074C82.7668 74.4734 85.5 69.6699 85.5 64.4752V31.5248C85.5 26.3301 82.7668 21.5266 78.3244 18.926Z'
);
--wui-width-network-sm: 36px;
--wui-width-network-md: 48px;
--wui-width-network-lg: 86px;
--wui-height-network-sm: 40px;
--wui-height-network-md: 54px;
--wui-height-network-lg: 96px;
--wui-icon-size-network-xs: 12px;
--wui-icon-size-network-sm: 16px;
--wui-icon-size-network-md: 24px;
--wui-icon-size-network-lg: 42px;
--wui-color-inherit: inherit;
--wui-color-inverse-100: #fff;
--wui-color-inverse-000: #000;
--wui-cover: rgba(20, 20, 20, 0.8);
--wui-color-modal-bg: var(--wui-color-modal-bg-base);
--wui-color-accent-100: var(--wui-color-accent-base-100);
--wui-color-accent-090: var(--wui-color-accent-base-090);
--wui-color-accent-080: var(--wui-color-accent-base-080);
--wui-color-success-100: var(--wui-color-success-base-100);
--wui-color-success-125: var(--wui-color-success-base-125);
--wui-color-warning-100: var(--wui-color-warning-base-100);
--wui-color-error-100: var(--wui-color-error-base-100);
--wui-color-error-125: var(--wui-color-error-base-125);
--wui-color-blue-100: var(--wui-color-blue-base-100);
--wui-color-blue-90: var(--wui-color-blue-base-90);
--wui-icon-box-bg-error-100: var(--wui-icon-box-bg-error-base-100);
--wui-icon-box-bg-blue-100: var(--wui-icon-box-bg-blue-base-100);
--wui-icon-box-bg-success-100: var(--wui-icon-box-bg-success-base-100);
--wui-icon-box-bg-inverse-100: var(--wui-icon-box-bg-inverse-base-100);
--wui-all-wallets-bg-100: var(--wui-all-wallets-bg-100);
--wui-avatar-border: var(--wui-avatar-border-base);
--wui-thumbnail-border: var(--wui-thumbnail-border-base);
--wui-wallet-button-bg: var(--wui-wallet-button-bg-base);
--wui-box-shadow-blue: var(--wui-color-accent-glass-020);
}
@supports (background: color-mix(in srgb, white 50%, black)) {
:root {
--wui-color-modal-bg: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-modal-bg-base)
);
--wui-box-shadow-blue: color-mix(in srgb, var(--wui-color-accent-100) 20%, transparent);
--wui-color-accent-100: color-mix(
in srgb,
var(--wui-color-accent-base-100) 100%,
transparent
);
--wui-color-accent-090: color-mix(
in srgb,
var(--wui-color-accent-base-100) 90%,
transparent
);
--wui-color-accent-080: color-mix(
in srgb,
var(--wui-color-accent-base-100) 80%,
transparent
);
--wui-color-accent-glass-090: color-mix(
in srgb,
var(--wui-color-accent-base-100) 90%,
transparent
);
--wui-color-accent-glass-080: color-mix(
in srgb,
var(--wui-color-accent-base-100) 80%,
transparent
);
--wui-color-accent-glass-020: color-mix(
in srgb,
var(--wui-color-accent-base-100) 20%,
transparent
);
--wui-color-accent-glass-015: color-mix(
in srgb,
var(--wui-color-accent-base-100) 15%,
transparent
);
--wui-color-accent-glass-010: color-mix(
in srgb,
var(--wui-color-accent-base-100) 10%,
transparent
);
--wui-color-accent-glass-005: color-mix(
in srgb,
var(--wui-color-accent-base-100) 5%,
transparent
);
--wui-color-accent-002: color-mix(
in srgb,
var(--wui-color-accent-base-100) 2%,
transparent
);
--wui-color-fg-100: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-fg-100)
);
--wui-color-fg-125: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-fg-125)
);
--wui-color-fg-150: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-fg-150)
);
--wui-color-fg-175: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-fg-175)
);
--wui-color-fg-200: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-fg-200)
);
--wui-color-fg-225: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-fg-225)
);
--wui-color-fg-250: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-fg-250)
);
--wui-color-fg-275: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-fg-275)
);
--wui-color-fg-300: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-fg-300)
);
--wui-color-fg-325: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-fg-325)
);
--wui-color-fg-350: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-fg-350)
);
--wui-color-bg-100: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-bg-100)
);
--wui-color-bg-125: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-bg-125)
);
--wui-color-bg-150: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-bg-150)
);
--wui-color-bg-175: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-bg-175)
);
--wui-color-bg-200: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-bg-200)
);
--wui-color-bg-225: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-bg-225)
);
--wui-color-bg-250: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-bg-250)
);
--wui-color-bg-275: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-bg-275)
);
--wui-color-bg-300: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-bg-300)
);
--wui-color-bg-325: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-bg-325)
);
--wui-color-bg-350: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-bg-350)
);
--wui-color-success-100: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-success-base-100)
);
--wui-color-success-125: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-success-base-125)
);
--wui-color-warning-100: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-warning-base-100)
);
--wui-color-error-100: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-error-base-100)
);
--wui-color-blue-100: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-blue-base-100)
);
--wui-color-blue-90: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-blue-base-90)
);
--wui-color-error-125: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-color-error-base-125)
);
--wui-icon-box-bg-error-100: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-icon-box-bg-error-base-100)
);
--wui-icon-box-bg-accent-100: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-icon-box-bg-blue-base-100)
);
--wui-icon-box-bg-success-100: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-icon-box-bg-success-base-100)
);
--wui-icon-box-bg-inverse-100: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-icon-box-bg-inverse-base-100)
);
--wui-all-wallets-bg-100: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-all-wallets-bg-100)
);
--wui-avatar-border: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-avatar-border-base)
);
--wui-thumbnail-border: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-thumbnail-border-base)
);
--wui-wallet-button-bg: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--wui-wallet-button-bg-base)
);
}
}
`,
light: css `
:root {
--w3m-color-mix: ${unsafeCSS(themeVariables?.['--w3m-color-mix'] || '#fff')};
--w3m-accent: ${unsafeCSS(getW3mThemeVariables(themeVariables, 'dark')['--w3m-accent'])};
--w3m-default: #fff;
--wui-color-modal-bg-base: ${unsafeCSS(getW3mThemeVariables(themeVariables, 'dark')['--w3m-background'])};
--wui-color-accent-base-100: var(--w3m-accent);
--wui-color-blueberry-100: hsla(230, 100%, 67%, 1);
--wui-color-blueberry-090: hsla(231, 76%, 61%, 1);
--wui-color-blueberry-080: hsla(230, 59%, 55%, 1);
--wui-color-blueberry-050: hsla(231, 100%, 70%, 0.1);
--wui-color-fg-100: #e4e7e7;
--wui-color-fg-125: #d0d5d5;
--wui-color-fg-150: #a8b1b1;
--wui-color-fg-175: #a8b0b0;
--wui-color-fg-200: #949e9e;
--wui-color-fg-225: #868f8f;
--wui-color-fg-250: #788080;
--wui-color-fg-275: #788181;
--wui-color-fg-300: #6e7777;
--wui-color-fg-325: #9a9a9a;
--wui-color-fg-350: #363636;
--wui-color-bg-100: #141414;
--wui-color-bg-125: #191a1a;
--wui-color-bg-150: #1e1f1f;
--wui-color-bg-175: #222525;
--wui-color-bg-200: #272a2a;
--wui-color-bg-225: #2c3030;
--wui-color-bg-250: #313535;
--wui-color-bg-275: #363b3b;
--wui-color-bg-300: #3b4040;
--wui-color-bg-325: #252525;
--wui-color-bg-350: #ffffff;
--wui-color-success-base-100: #26d962;
--wui-color-success-base-125: #30a46b;
--wui-color-warning-base-100: #f3a13f;
--wui-color-error-base-100: #f25a67;
--wui-color-error-base-125: #df4a34;
--wui-color-blue-base-100: rgba(102, 125, 255, 1);
--wui-color-blue-base-90: rgba(102, 125, 255, 0.9);
--wui-color-success-glass-001: rgba(38, 217, 98, 0.01);
--wui-color-success-glass-002: rgba(38, 217, 98, 0.02);
--wui-color-success-glass-005: rgba(38, 217, 98, 0.05);
--wui-color-success-glass-010: rgba(38, 217, 98, 0.1);
--wui-color-success-glass-015: rgba(38, 217, 98, 0.15);
--wui-color-success-glass-020: rgba(38, 217, 98, 0.2);
--wui-color-success-glass-025: rgba(38, 217, 98, 0.25);
--wui-color-success-glass-030: rgba(38, 217, 98, 0.3);
--wui-color-success-glass-060: rgba(38, 217, 98, 0.6);
--wui-color-success-glass-080: rgba(38, 217, 98, 0.8);
--wui-color-success-glass-reown-020: rgba(48, 164, 107, 0.2);
--wui-color-warning-glass-reown-020: rgba(243, 161, 63, 0.2);
--wui-color-error-glass-001: rgba(242, 90, 103, 0.01);
--wui-color-error-glass-002: rgba(242, 90, 103, 0.02);
--wui-color-error-glass-005: rgba(242, 90, 103, 0.05);
--wui-color-error-glass-010: rgba(242, 90, 103, 0.1);
--wui-color-error-glass-015: rgba(242, 90, 103, 0.15);
--wui-color-error-glass-020: rgba(242, 90, 103, 0.2);
--wui-color-error-glass-025: rgba(242, 90, 103, 0.25);
--wui-color-error-glass-030: rgba(242, 90, 103, 0.3);
--wui-color-error-glass-060: rgba(242, 90, 103, 0.6);
--wui-color-error-glass-080: rgba(242, 90, 103, 0.8);
--wui-color-error-glass-reown-020: rgba(223, 74, 52, 0.2);
--wui-color-gray-glass-001: rgba(255, 255, 255, 0.01);
--wui-color-gray-glass-002: rgba(255, 255, 255, 0.02);
--wui-color-gray-glass-005: rgba(255, 255, 255, 0.05);
--wui-color-gray-glass-010: rgba(255, 255, 255, 0.1);
--wui-color-gray-glass-015: rgba(255, 255, 255, 0.15);
--wui-color-gray-glass-020: rgba(255, 255, 255, 0.2);
--wui-color-gray-glass-025: rgba(255, 255, 255, 0.25);
--wui-color-gray-glass-030: rgba(255, 255, 255, 0.3);
--wui-color-gray-glass-060: rgba(255, 255, 255, 0.6);
--wui-color-gray-glass-080: rgba(255, 255, 255, 0.8);
--wui-color-gray-glass-090: rgba(255, 255, 255, 0.9);
--wui-color-dark-glass-100: rgba(42, 42, 42, 1);
--wui-icon-box-bg-error-base-100: #3c2426;
--wui-icon-box-bg-blue-base-100: #20303f;
--wui-icon-box-bg-success-base-100: #1f3a28;
--wui-icon-box-bg-inverse-base-100: #243240;
--wui-all-wallets-bg-100: #222b35;
--wui-avatar-border-base: #252525;
--wui-thumbnail-border-base: #252525;
--wui-wallet-button-bg-base: var(--wui-color-bg-125);
--w3m-card-embedded-shadow-color: rgb(17 17 18 / 25%);
}
`,
dark: css `
:root {
--w3m-color-mix: ${unsafeCSS(themeVariables?.['--w3m-color-mix'] || '#000')};
--w3m-accent: ${unsafeCSS(getW3mThemeVariables(themeVariables, 'light')['--w3m-accent'])};
--w3m-default: #000;
--wui-color-modal-bg-base: ${unsafeCSS(getW3mThemeVariables(themeVariables, 'light')['--w3m-background'])};
--wui-color-accent-base-100: var(--w3m-accent);
--wui-color-blueberry-100: hsla(231, 100%, 70%, 1);
--wui-color-blueberry-090: hsla(231, 97%, 72%, 1);
--wui-color-blueberry-080: hsla(231, 92%, 74%, 1);
--wui-color-fg-100: #141414;
--wui-color-fg-125: #2d3131;
--wui-color-fg-150: #474d4d;
--wui-color-fg-175: #636d6d;
--wui-color-fg-200: #798686;
--wui-color-fg-225: #828f8f;
--wui-color-fg-250: #8b9797;
--wui-color-fg-275: #95a0a0;
--wui-color-fg-300: #9ea9a9;
--wui-color-fg-325: #9a9a9a;
--wui-color-fg-350: #d0d0d0;
--wui-color-bg-100: #ffffff;
--wui-color-bg-125: #f5fafa;
--wui-color-bg-150: #f3f8f8;
--wui-color-bg-175: #eef4f4;
--wui-color-bg-200: #eaf1f1;
--wui-color-bg-225: #e5eded;
--wui-color-bg-250: #e1e9e9;
--wui-color-bg-275: #dce7e7;
--wui-color-bg-300: #d8e3e3;
--wui-color-bg-325: #f3f3f3;
--wui-color-bg-350: #202020;
--wui-color-success-base-100: #26b562;
--wui-color-success-base-125: #30a46b;
--wui-color-warning-base-100: #f3a13f;
--wui-color-error-base-100: #f05142;
--wui-color-error-base-125: #df4a34;
--wui-color-blue-base-100: rgba(102, 125, 255, 1);
--wui-color-blue-base-90: rgba(102, 125, 255, 0.9);
--wui-color-success-glass-001: rgba(38, 181, 98, 0.01);
--wui-color-success-glass-002: rgba(38, 181, 98, 0.02);
--wui-color-success-glass-005: rgba(38, 181, 98, 0.05);
--wui-color-success-glass-010: rgba(38, 181, 98, 0.1);
--wui-color-success-glass-015: rgba(38, 181, 98, 0.15);
--wui-color-success-glass-020: rgba(38, 181, 98, 0.2);
--wui-color-success-glass-025: rgba(38, 181, 98, 0.25);
--wui-color-success-glass-030: rgba(38, 181, 98, 0.3);
--wui-color-success-glass-060: rgba(38, 181, 98, 0.6);
--wui-color-success-glass-080: rgba(38, 181, 98, 0.8);
--wui-color-success-glass-reown-020: rgba(48, 164, 107, 0.2);
--wui-color-warning-glass-reown-020: rgba(243, 161, 63, 0.2);
--wui-color-error-glass-001: rgba(240, 81, 66, 0.01);
--wui-color-error-glass-002: rgba(240, 81, 66, 0.02);
--wui-color-error-glass-005: rgba(240, 81, 66, 0.05);
--wui-color-error-glass-010: rgba(240, 81, 66, 0.1);
--wui-color-error-glass-015: rgba(240, 81, 66, 0.15);
--wui-color-error-glass-020: rgba(240, 81, 66, 0.2);
--wui-color-error-glass-025: rgba(240, 81, 66, 0.25);
--wui-color-error-glass-030: rgba(240, 81, 66, 0.3);
--wui-color-error-glass-060: rgba(240, 81, 66, 0.6);
--wui-color-error-glass-080: rgba(240, 81, 66, 0.8);
--wui-color-error-glass-reown-020: rgba(223, 74, 52, 0.2);
--wui-icon-box-bg-error-base-100: #f4dfdd;
--wui-icon-box-bg-blue-base-100: #d9ecfb;
--wui-icon-box-bg-success-base-100: #daf0e4;
--wui-icon-box-bg-inverse-base-100: #dcecfc;
--wui-all-wallets-bg-100: #e8f1fa;
--wui-avatar-border-base: #f3f4f4;
--wui-thumbnail-border-base: #eaefef;
--wui-wallet-button-bg-base: var(--wui-color-bg-125);
--wui-color-gray-glass-001: rgba(0, 0, 0, 0.01);
--wui-color-gray-glass-002: rgba(0, 0, 0, 0.02);
--wui-color-gray-glass-005: rgba(0, 0, 0, 0.05);
--wui-color-gray-glass-010: rgba(0, 0, 0, 0.1);
--wui-color-gray-glass-015: rgba(0, 0, 0, 0.15);
--wui-color-gray-glass-020: rgba(0, 0, 0, 0.2);
--wui-color-gray-glass-025: rgba(0, 0, 0, 0.25);
--wui-color-gray-glass-030: rgba(0, 0, 0, 0.3);
--wui-color-gray-glass-060: rgba(0, 0, 0, 0.6);
--wui-color-gray-glass-080: rgba(0, 0, 0, 0.8);
--wui-color-gray-glass-090: rgba(0, 0, 0, 0.9);
--wui-color-dark-glass-100: rgba(233, 233, 233, 1);
--w3m-card-embedded-shadow-color: rgb(224 225 233 / 25%);
}
`
};
}
export const resetStyles = css `
*,
*::after,
*::before,
:host {
margin: 0;
padding: 0;
box-sizing: border-box;
font-style: normal;
text-rendering: optimizeSpeed;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: transparent;
font-family: var(--wui-font-family);
backface-visibility: hidden;
}
`;
export const elementStyles = css `
button,
a {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
position: relative;
transition:
color var(--wui-duration-lg) var(--wui-ease-out-power-1),
background-color var(--wui-duration-lg) var(--wui-ease-out-power-1),
border var(--wui-duration-lg) var(--wui-ease-out-power-1),
border-radius var(--wui-duration-lg) var(--wui-ease-out-power-1),
box-shadow var(--wui-duration-lg) var(--wui-ease-out-power-1);
will-change: background-color, color, border, box-shadow, border-radius;
outline: none;
border: none;
column-gap: var(--wui-spacing-3xs);
background-color: transparent;
text-decoration: none;
}
wui-flex {
transition: border-radius var(--wui-duration-lg) var(--wui-ease-out-power-1);
will-change: border-radius;
}
button:disabled > wui-wallet-image,
button:disabled > wui-all-wallets-image,
button:disabled > wui-network-image,
button:disabled > wui-image,
button:disabled > wui-transaction-visual,
button:disabled > wui-logo {
filter: grayscale(1);
}
@media (hover: hover) and (pointer: fine) {
button:hover:enabled {
background-color: var(--wui-color-gray-glass-005);
}
button:active:enabled {
background-color: var(--wui-color-gray-glass-010);
}
}
button:disabled > wui-icon-box {
opacity: 0.5;
}
input {
border: none;
outline: none;
appearance: none;
}
`;
export const colorStyles = css `
.wui-color-inherit {
color: var(--wui-color-inherit);
}
.wui-color-accent-100 {
color: var(--wui-color-accent-100);
}
.wui-color-error-100 {
color: var(--wui-color-error-100);
}
.wui-color-blue-100 {
color: var(--wui-color-blue-100);
}
.wui-color-blue-90 {
color: var(--wui-color-blue-90);
}
.wui-color-error-125 {
color: var(--wui-color-error-125);
}
.wui-color-success-100 {
color: var(--wui-color-success-100);
}
.wui-color-success-125 {
color: var(--wui-color-success-125);
}
.wui-color-inverse-100 {
color: var(--wui-color-inverse-100);
}
.wui-color-inverse-000 {
color: var(--wui-color-inverse-000);
}
.wui-color-fg-100 {
color: var(--wui-color-fg-100);
}
.wui-color-fg-200 {
color: var(--wui-color-fg-200);
}
.wui-color-fg-300 {
color: var(--wui-color-fg-300);
}
.wui-color-fg-325 {
color: var(--wui-color-fg-325);
}
.wui-color-fg-350 {
color: var(--wui-color-fg-350);
}
.wui-bg-color-inherit {
background-color: var(--wui-color-inherit);
}
.wui-bg-color-blue-100 {
background-color: var(--wui-color-accent-100);
}
.wui-bg-color-error-100 {
background-color: var(--wui-color-error-100);
}
.wui-bg-color-error-125 {
background-color: var(--wui-color-error-125);
}
.wui-bg-color-success-100 {
background-color: var(--wui-color-success-100);
}
.wui-bg-color-success-125 {
background-color: var(--wui-color-success-100);
}
.wui-bg-color-inverse-100 {
background-color: var(--wui-color-inverse-100);
}
.wui-bg-color-inverse-000 {
background-color: var(--wui-color-inverse-000);
}
.wui-bg-color-fg-100 {
background-color: var(--wui-color-fg-100);
}
.wui-bg-color-fg-200 {
background-color: var(--wui-color-fg-200);
}
.wui-bg-color-fg-300 {
background-color: var(--wui-color-fg-300);
}
.wui-color-fg-325 {
background-color: var(--wui-color-fg-325);
}
.wui-color-fg-350 {
background-color: var(--wui-color-fg-350);
}
`;
//# sourceMappingURL=ThemeUtil.js.map