fix(progressbar): remove shared file, optimize css output for linear gradient

Author: desig9stein

src/components/progress/themes/circular/circular.progress.base.scss

@@ -1,7 +1,6 @@
 @use 'styles/common/component';
 @use 'styles/utilities' as *;
 @use '../animations' as *;
-@use '../shared' as *;
 @use '../vars' as *;
 
 [part~='base'] {

src/components/progress/themes/linear/shared/linear.progress.bootstrap.scss

@@ -1,31 +1,14 @@
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
 @use '../../vars' as *;
-@use '../../shared' as *;
 @use '../../animations' as *;
 
 $theme: $bootstrap;
-$stripe-size: rem(5px);
 
 :host {
     --track-size: #{rem(16px)};
 }
 
-// Define a mixin for generating striped styles
-@mixin striped-styles($part, $color-key) {
-    [part~='striped'][part~='#{$part}']:not([part~='indeterminate']) {
-        @include stripe-colors(var-get($theme, $color-key), var-get($theme, 'stripes-color'), $stripe-size, 45deg);
-    }
-    [part~='striped'][part~='#{$part}'] {
-        &::after {
-            @include stripe-colors(var-get($theme, $color-key), var-get($theme, 'stripes-color'), $stripe-size, 45deg);
-        }
-    }
+:host([striped]) {
+    --stripe-size: #{rem(5px)};
 }
-
-// Apply the mixin for each part
-@include striped-styles('primary', 'fill-color-default');
-@include striped-styles('danger', 'fill-color-danger');
-@include striped-styles('warning', 'fill-color-warning');
-@include striped-styles('info', 'fill-color-info');
-@include striped-styles('success', 'fill-color-success');

src/components/progress/themes/linear/shared/linear.progress.common.scss

@@ -1,7 +1,6 @@
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
 @use '../../vars' as *;
-@use '../../shared' as *;
 @use '../../animations' as *;
 
 $theme: $material;
@@ -15,38 +14,51 @@ $theme: $material;
     color: var-get($theme, 'text-color');
 }
 
-// Mixin for base background styles
-@mixin background-styles($part, $color-key) {
-    [part~='#{$part}']:not([part~='indeterminate']) {
-        background-color: var-get($theme, $color-key);
-    }
-    [part~='#{$part}'] {
-        &::after {
-            background-color: var-get($theme, $color-key);
-        }
-    }
+:host([striped]) {
+    --stripe-size: #{rem(16px)};
 }
 
-// Mixin for striped styles
-@mixin striped-styles($part, $color-key) {
-    [part~='striped'][part~='#{$part}']:not([part~='indeterminate']) {
-        @include stripe-colors(var-get($theme, $color-key), var-get($theme, 'stripes-color'), $stripe-size, -45deg);
+@mixin part-styles($part, $color-key) {
+    :host([variant='#{$part}']) {
+        --fill-bg: #{var-get($theme, $color-key)};
     }
-    [part~='striped'][part~='#{$part}'] {
-        &::after {
-            @include stripe-colors(var-get($theme, $color-key), var-get($theme, 'stripes-color'), $stripe-size, -45deg);
-        }
+
+    :host([striped][variant='#{$part}']) {
+        --striped-bg: #{var-get($theme, $color-key) repeating-linear-gradient(
+            -45deg,
+            var-get($theme, $color-key),
+            var-get($theme, $color-key) var(--stripe-size),
+            var-get($theme, 'stripes-color') var(--stripe-size),
+            var-get($theme, 'stripes-color') calc(var(--stripe-size) * 2)
+        )};
     }
 }
 
-// Apply styles for different parts
+// Generate styles for each variant
 @each $part, $color-key in (
     'primary': 'fill-color-default',
     'danger': 'fill-color-danger',
     'warning': 'fill-color-warning',
     'info': 'fill-color-info',
     'success': 'fill-color-success'
 ) {
-    @include background-styles($part, $color-key);
-    @include striped-styles($part, $color-key);
+    @include part-styles($part, $color-key);
+}
+
+:host(:not([indeterminate])) {
+    [part~='fill'] {
+        background-color: var(--fill-bg);
+    }
+}
+
+[part~='fill'] {
+    &::after {
+        background-color: var(--fill-bg);
+    }
+}
+
+:host([striped]:not([indeterminate])) {
+    [part~='fill'] {
+        background: var(--striped-bg);
+    }
 }

src/components/progress/themes/shared.scss

@@ -1,7 +1,6 @@
 @use 'styles/utilities' as *;
 
 $background-size: #{rem(40px)} #{rem(40px)};
-$stripe-size: rem(16px);
 $animation-direction: normal;
 $animation-direction-rtl: reverse;
 $diameter: calc(var(--circular-size) + var(--stroke-thickness));