@reown/appkit-ui/dist/esm/src/composites/wui-icon-box/styles.js

The full stack toolkit to build onchain app UX.

import { css } from '../../utils/ThemeHelperUtil.js';
export default css `
  :host {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: ${({ borderRadius }) => borderRadius[2]};
    padding: ${({ spacing }) => spacing[1]} !important;
    background-color: ${({ tokens }) => tokens.theme.backgroundPrimary};
    position: relative;
  }

  :host([data-padding='2']) {
    padding: ${({ spacing }) => spacing[2]} !important;
  }

  :host:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: ${({ borderRadius }) => borderRadius[2]};
  }

  :host > wui-icon {
    z-index: 10;
  }

  /* -- Colors --------------------------------------------------- */
  :host([data-color='accent-primary']) {
    color: ${({ tokens }) => tokens.core.iconAccentPrimary};
  }

  :host([data-color='accent-primary']):after {
    background-color: ${({ tokens }) => tokens.core.foregroundAccent010};
  }

  :host([data-color='default']),
  :host([data-color='secondary']) {
    color: ${({ tokens }) => tokens.theme.iconDefault};
  }

  :host([data-color='default']):after {
    background-color: ${({ tokens }) => tokens.theme.foregroundPrimary};
  }

  :host([data-color='secondary']):after {
    background-color: ${({ tokens }) => tokens.theme.foregroundSecondary};
  }

  :host([data-color='success']) {
    color: ${({ tokens }) => tokens.core.iconSuccess};
  }

  :host([data-color='success']):after {
    background-color: ${({ tokens }) => tokens.core.backgroundSuccess};
  }

  :host([data-color='error']) {
    color: ${({ tokens }) => tokens.core.iconError};
  }

  :host([data-color='error']):after {
    background-color: ${({ tokens }) => tokens.core.backgroundError};
  }

  :host([data-color='warning']) {
    color: ${({ tokens }) => tokens.core.iconWarning};
  }

  :host([data-color='warning']):after {
    background-color: ${({ tokens }) => tokens.core.backgroundWarning};
  }

  :host([data-color='inverse']) {
    color: ${({ tokens }) => tokens.theme.iconInverse};
  }

  :host([data-color='inverse']):after {
    background-color: transparent;
  }
`;
//# sourceMappingURL=styles.js.map