@reown/appkit-ui
Version:
#### 🔗 [Website](https://reown.com/appkit)
198 lines (170 loc) • 6.19 kB
JavaScript
import { css } from 'lit';
export default css `
:host {
width: var(--local-width);
position: relative;
}
button {
border: none;
border-radius: var(--local-border-radius);
width: var(--local-width);
white-space: nowrap;
}
/* -- Sizes --------------------------------------------------- */
button[data-size='md'] {
padding: 8.2px var(--wui-spacing-l) 9px var(--wui-spacing-l);
height: 36px;
}
button[data-size='md'][data-icon-left='true'][data-icon-right='false'] {
padding: 8.2px var(--wui-spacing-l) 9px var(--wui-spacing-s);
}
button[data-size='md'][data-icon-right='true'][data-icon-left='false'] {
padding: 8.2px var(--wui-spacing-s) 9px var(--wui-spacing-l);
}
button[data-size='lg'] {
padding: var(--wui-spacing-m) var(--wui-spacing-2l);
height: 48px;
}
/* -- Variants --------------------------------------------------------- */
button[data-variant='main'] {
background-color: var(--wui-color-accent-100);
color: var(--wui-color-inverse-100);
border: none;
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
}
button[data-variant='inverse'] {
background-color: var(--wui-color-inverse-100);
color: var(--wui-color-inverse-000);
border: none;
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
}
button[data-variant='accent'] {
background-color: var(--wui-color-accent-glass-010);
color: var(--wui-color-accent-100);
border: none;
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
}
button[data-variant='accent-error'] {
background: var(--wui-color-error-glass-015);
color: var(--wui-color-error-100);
border: none;
box-shadow: inset 0 0 0 1px var(--wui-color-error-glass-010);
}
button[data-variant='accent-success'] {
background: var(--wui-color-success-glass-015);
color: var(--wui-color-success-100);
border: none;
box-shadow: inset 0 0 0 1px var(--wui-color-success-glass-010);
}
button[data-variant='neutral'] {
background: transparent;
color: var(--wui-color-fg-100);
border: none;
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
}
/* -- Focus states --------------------------------------------------- */
button[data-variant='main']:focus-visible:enabled {
background-color: var(--wui-color-accent-090);
box-shadow:
inset 0 0 0 1px var(--wui-color-accent-100),
0 0 0 4px var(--wui-color-accent-glass-020);
}
button[data-variant='inverse']:focus-visible:enabled {
background-color: var(--wui-color-inverse-100);
box-shadow:
inset 0 0 0 1px var(--wui-color-gray-glass-010),
0 0 0 4px var(--wui-color-accent-glass-020);
}
button[data-variant='accent']:focus-visible:enabled {
background-color: var(--wui-color-accent-glass-010);
box-shadow:
inset 0 0 0 1px var(--wui-color-accent-100),
0 0 0 4px var(--wui-color-accent-glass-020);
}
button[data-variant='accent-error']:focus-visible:enabled {
background: var(--wui-color-error-glass-015);
box-shadow:
inset 0 0 0 1px var(--wui-color-error-100),
0 0 0 4px var(--wui-color-error-glass-020);
}
button[data-variant='accent-success']:focus-visible:enabled {
background: var(--wui-color-success-glass-015);
box-shadow:
inset 0 0 0 1px var(--wui-color-success-100),
0 0 0 4px var(--wui-color-success-glass-020);
}
button[data-variant='neutral']:focus-visible:enabled {
background: var(--wui-color-gray-glass-005);
box-shadow:
inset 0 0 0 1px var(--wui-color-gray-glass-010),
0 0 0 4px var(--wui-color-gray-glass-002);
}
/* -- Hover & Active states ----------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
button[data-variant='main']:hover:enabled {
background-color: var(--wui-color-accent-090);
}
button[data-variant='main']:active:enabled {
background-color: var(--wui-color-accent-080);
}
button[data-variant='accent']:hover:enabled {
background-color: var(--wui-color-accent-glass-015);
}
button[data-variant='accent']:active:enabled {
background-color: var(--wui-color-accent-glass-020);
}
button[data-variant='accent-error']:hover:enabled {
background: var(--wui-color-error-glass-020);
color: var(--wui-color-error-100);
}
button[data-variant='accent-error']:active:enabled {
background: var(--wui-color-error-glass-030);
color: var(--wui-color-error-100);
}
button[data-variant='accent-success']:hover:enabled {
background: var(--wui-color-success-glass-020);
color: var(--wui-color-success-100);
}
button[data-variant='accent-success']:active:enabled {
background: var(--wui-color-success-glass-030);
color: var(--wui-color-success-100);
}
button[data-variant='neutral']:hover:enabled {
background: var(--wui-color-gray-glass-002);
}
button[data-variant='neutral']:active:enabled {
background: var(--wui-color-gray-glass-005);
}
button[data-size='lg'][data-icon-left='true'][data-icon-right='false'] {
padding-left: var(--wui-spacing-m);
}
button[data-size='lg'][data-icon-right='true'][data-icon-left='false'] {
padding-right: var(--wui-spacing-m);
}
}
/* -- Disabled state --------------------------------------------------- */
button:disabled {
background-color: var(--wui-color-gray-glass-002);
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
color: var(--wui-color-gray-glass-020);
cursor: not-allowed;
}
button > wui-text {
transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
will-change: opacity;
opacity: var(--local-opacity-100);
}
::slotted(*) {
transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
will-change: opacity;
opacity: var(--local-opacity-100);
}
wui-loading-spinner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: var(--local-opacity-000);
}
`;
//# sourceMappingURL=styles.js.map