emoji-picker-element/src/svelte/styles/variables.scss

@mixin sizes() {
  --lep-indicator-height: 3px;
  --lep-outline-size: 2px;
  --lep-num-columns: 8;
  --lep-emoji-size: 1.375rem;
  --lep-emoji-padding: 0.5rem;
}

@mixin colors($dark) {
  $border: #e0e0e0;
  $bg: #fff;
  $placeholder: #999;
  $outline: #999;
  $input-border: #999;
  $indicator: #385ac1;
  $input-color: #111;

  @if $dark {
    $border: #444;
    $bg: #222;
    $placeholder: #ccc;
    $outline: #fff;
    $input-border: #ccc;
    $indicator: #5373ec;
    $input-color: #efefef;
  }

  --lep-border-color: #{$border};
  --lep-input-border-color: #{$input-border};
  --lep-background-color: #{$bg};
  --lep-placeholder-color: #{$placeholder};
  --lep-outline-color: #{$outline};
  --lep-indicator-color: #{$indicator};
  --lep-input-font-color: #{$input-color};

  @if $dark {
    --lep-hover-background-color: #{lighten($bg, 15%)};
    --lep-active-background-color: #{lighten($bg, 20%)};
  } @else {
    --lep-hover-background-color: #{darken($bg, 15%)};
    --lep-active-background-color: #{darken($bg, 10%)};
  }
}

:host, :host-context(lite-emoji-picker.light) {
  @include colors(false);
}
:host-context(lite-emoji-picker.dark) {
  @include colors(true);
}

:host {
  @include sizes();

  @media (prefers-color-scheme: dark) {
    @include colors(true);
  }
}