@reown/appkit-ui
Version:
#### 🔗 [Website](https://reown.com/appkit)
77 lines (73 loc) • 2.21 kB
JavaScript
import { css } from 'lit';
export default css `
:host {
display: block;
width: var(--local-width);
height: var(--local-height);
border-radius: var(--wui-border-radius-3xl);
box-shadow: 0 0 0 8px var(--wui-color-gray-glass-005);
overflow: hidden;
position: relative;
}
:host([data-variant='generated']) {
--mixed-local-color-1: var(--local-color-1);
--mixed-local-color-2: var(--local-color-2);
--mixed-local-color-3: var(--local-color-3);
--mixed-local-color-4: var(--local-color-4);
--mixed-local-color-5: var(--local-color-5);
}
@supports (background: color-mix(in srgb, white 50%, black)) {
:host([data-variant='generated']) {
--mixed-local-color-1: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--local-color-1)
);
--mixed-local-color-2: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--local-color-2)
);
--mixed-local-color-3: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--local-color-3)
);
--mixed-local-color-4: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--local-color-4)
);
--mixed-local-color-5: color-mix(
in srgb,
var(--w3m-color-mix) var(--w3m-color-mix-strength),
var(--local-color-5)
);
}
}
:host([data-variant='generated']) {
box-shadow: 0 0 0 8px var(--wui-color-gray-glass-005);
background: radial-gradient(
var(--local-radial-circle),
#fff 0.52%,
var(--mixed-local-color-5) 31.25%,
var(--mixed-local-color-3) 51.56%,
var(--mixed-local-color-2) 65.63%,
var(--mixed-local-color-1) 82.29%,
var(--mixed-local-color-4) 100%
);
}
:host([data-variant='default']) {
box-shadow: 0 0 0 8px var(--wui-color-gray-glass-005);
background: radial-gradient(
75.29% 75.29% at 64.96% 24.36%,
#fff 0.52%,
#f5ccfc 31.25%,
#dba4f5 51.56%,
#9a8ee8 65.63%,
#6493da 82.29%,
#6ebdea 100%
);
}
`;
//# sourceMappingURL=styles.js.map