material-components_material-web/list/lib/_list.scss

//
// Copyright 2022 Google LLC
// SPDX-License-Identifier: Apache-2.0
//

// stylelint-disable selector-class-pattern --
// Selector '.md3-*' should only be used in this project.

// go/keep-sorted start
@use 'sass:list';
@use 'sass:map';
@use 'sass:string';
// go/keep-sorted end
// go/keep-sorted start
@use '../../elevation/lib/elevation';
@use '../../sass/theme';
@use '../../tokens';
@use './listitem/list-item';
// go/keep-sorted end

@mixin theme($tokens) {
  $reference: tokens.md-comp-list-values();
  $tokens: theme.validate-theme($reference, $tokens);
  $tokens: resolve-tokens($tokens);
  $tokens: theme.create-theme-vars($tokens, list);

  @include theme.emit-theme-vars($tokens);
}

@mixin styles() {
  $tokens: resolve-tokens(tokens.md-comp-list-values());
  $tokens: theme.create-theme-vars($tokens, list);

  :host {
    @each $token, $value in $tokens {
      --_#{$token}: #{$value};
    }

    color: unset;
    min-width: 300px;
  }

  .md3-list {
    background-color: var(--_container-color);
    display: block;
    list-style-type: none;
    margin: 0;
    min-width: inherit;
    outline: none;
    padding: 8px 0;
    // Add position so the elevation overlay (which is absolutely positioned)
    // can be positioned relative to the list root.
    position: relative;
  }
}

/// Resolves the tokens that are specific to list.
///
/// The tokenset for list include list plus all of list item. We do not want to
/// duplicate tokens and custom properties across md-list and md-list-item.
/// So here we resolve list-items tokens, and resolve the difference between
/// the full set of tokens and the ones specific to list-item.
@function resolve-tokens($tokens) {
  // We need container color so rename so that we don't lose it
  $tokens: map.set(
    $tokens,
    container-color,
    map.get($tokens, list-item-container-color)
  );
  $list-tokens: remove-unused-tokens($tokens);

  @return $list-tokens;
}

// removes unused tokens
@function remove-unused-tokens($tokens) {
  $unused-tokens: ();
  @each $token in map-keys($tokens) {
    $index: string.index($token, 'list-item');

    @if $index {
      $unused-tokens: list.append($unused-tokens, $token);
    }
  }

  @each $token in $unused-tokens {
    $tokens: map.remove($tokens, $token);
  }

  @return $tokens;
}