feat(circular-progress): support track color

PiperOrigin-RevId: 334177072

Author: allan-chen

packages/circular-progress-four-color/README.md

@@ -84,6 +84,7 @@ Name                                  | Default
 `--mdc-circular-progress-bar-color-2` | `--mdc-theme-primary`                                               | Sets the second of the four rotating colors.
 `--mdc-circular-progress-bar-color-3` | `--mdc-theme-primary`                                               | Sets the third of the four rotating colors.
 `--mdc-circular-progress-bar-color-4` | `--mdc-theme-primary`                                               | Sets the last of the four rotating colors.
+`--mdc-circular-progress-track-color` | transparent                                                         | Sets the track color of the determinate progress bar.
 
 #### Global Custom Properties
 

packages/circular-progress-four-color/_circular-progress-four-color-theme.scss

@@ -28,12 +28,14 @@ $light-theme: (
     theme-color.prop-value(primary),
     theme-color.prop-value(primary),
     theme-color.prop-value(primary)
-  )
+  ),
+  track-color: transparent
 );
 
 @mixin theme($theme: $light-theme) {
   $bar-color: map.get($theme, bar-color);
   $bar-indeterminate-colors: map.get($theme, bar-indeterminate-colors);
+  $track-color: map.get($theme, track-color);
 
   @include css.declaration(--mdc-theme-primary, $bar-color);
 
@@ -47,4 +49,6 @@ $light-theme: (
     @include css.declaration(--mdc-circular-progress-bar-color-3, nth($bar-indeterminate-colors, 3));
     @include css.declaration(--mdc-circular-progress-bar-color-4, nth($bar-indeterminate-colors, 4));
   }
+
+  @include css.declaration(--mdc-circular-progress-track-color, $track-color);
 }

packages/circular-progress-four-color/_circular-progress-four-color.scss

@@ -14,15 +14,16 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-@use '@material/circular-progress' as circularprogress;
+@use '@material/circular-progress' as circular-progress;
 @use '@material/theme/theme-color';
 @use '@material/theme/custom-properties';
+@use '@material/mwc-circular-progress/circular-progress' as mwc-circular-progress;
 
 @mixin core-styles() {
-  @include circularprogress.core-styles();
+  @include mwc-circular-progress.core-styles();
 
   $primary: custom-properties.create(--mdc-theme-primary, theme-color.prop-value(primary));
-  @include circularprogress.indeterminate-colors((
+  @include circular-progress.indeterminate-colors((
     custom-properties.create(--mdc-circular-progress-bar-color-1, $primary),
     custom-properties.create(--mdc-circular-progress-bar-color-2, $primary),
     custom-properties.create(--mdc-circular-progress-bar-color-3, $primary),

packages/circular-progress/README.md

@@ -73,6 +73,10 @@ None
 
 ### CSS Custom Properties
 
+Name                                  | Default      | Description
+------------------------------------- | ------------ | -----------
+`--mdc-circular-progress-track-color` | transparent  | Sets the track color of the determinate progress bar.
+
 #### Global Custom Properties
 
 This component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)

packages/circular-progress/_circular-progress-theme.scss

@@ -22,9 +22,12 @@ limitations under the License.
 
 $light-theme: (
   bar-color: theme-color.prop-value(primary),
+  track-color: transparent,
 );
 
 @mixin theme($theme: $light-theme) {
-  $bar-color: map.get($theme, bar-color);
-  @include css.declaration(--mdc-theme-primary, $bar-color);
+  @include css.declaration(--mdc-theme-primary, map.get($theme, bar-color));
+  @include css.declaration(--mdc-circular-progress-track-color, map.get($theme, track-color));
 }
+
+

packages/circular-progress/_circular-progress.scss

@@ -23,4 +23,8 @@ limitations under the License.
   :host {
     display: inline-flex;
   }
+
+  @include circularprogress.track-color(custom-properties.create(
+        --mdc-circular-progress-track-color,
+        transparent));
 }

packages/circular-progress/mwc-circular-progress-base.ts

@@ -87,6 +87,9 @@ export class CircularProgressBase extends LitElement {
       <div class="mdc-circular-progress__determinate-container">
         <svg class="mdc-circular-progress__determinate-circle-graphic"
              viewBox="0 0 ${sideLength} ${sideLength}">
+          <circle class="mdc-circular-progress__determinate-track"
+                  cx="${center}" cy="${center}" r="${circleRadius}"
+                  stroke-width="${strokeWidth}"></circle>
           <circle class="mdc-circular-progress__determinate-circle"
                   cx="${center}" cy="${center}" r="${circleRadius}"
                   stroke-dasharray="${2 * 3.1415926 * circleRadius}"