material-components_material-web/packages/linear-progress/_linear-progress-theme.scss

/**
 * @license
 * Copyright 2020 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

@use 'sass:map';
@use 'sass:string';
@use '@material/linear-progress' as linearprogress;
@use '@material/theme/theme-color';
@use '@material/theme/custom-properties';

$light-theme: (
  bar: theme-color.prop-value(primary),
  buffer: linearprogress.$baseline-buffer-color,
);

@mixin theme($theme: $light-theme) {
  $bar-color: map.get($theme, bar);
  @if $bar-color {
    --mdc-theme-primary: #{$bar-color};
  }

  $buffer-color: map.get($theme, buffer);
  @if $buffer-color {
    @include buffer-color($buffer-color);
  }
}

/// Sets the color of the buffer bar and buffering dots image.
@mixin buffer-color($color) {
  // TODO(b/153370936): Replace with theme key resolve function
  @if map.has-key(theme-color.$property-values, $color) {
    @error 'buffer-color does not support theme keys';
  }

  @if custom-properties.is-custom-prop($color) {
    @error 'buffer-color does not support custom properties.';
  }

  $buffer-color-svg: linearprogress.str-replace_(
    string.unquote('#{$color}'),
    '#',
    '%23'
  );

  --mdc-linear-progress-buffer-color: #{$color};
  --mdc-linear-progress-buffering-dots-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='#{$buffer-color-svg}'/%3E%3C/svg%3E");
}