feat(progress): update values to be used from schemas (#1582)

Author: didimmova

package-lock.json

@@ -79,7 +79,7 @@
     "globby": "^14.1.0",
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^6.0.0",
-    "igniteui-theming": "^15.1.1",
+    "igniteui-theming": "^16.0.0",
     "keep-a-changelog": "^2.6.1",
     "lint-staged": "^15.4.3",
     "lit-analyzer": "^2.0.3",

package.json

@@ -33,13 +33,13 @@ $theme: $material;
     }
 }
 
-@include gradient-variant('danger', color(error, 500));
-@include gradient-variant('warning', color(warn, 500));
-@include gradient-variant('info', color(info, 500));
-@include gradient-variant('success', color(success, 500));
+@include gradient-variant('danger', var-get($theme, 'fill-color-danger'));
+@include gradient-variant('warning', var-get($theme, 'fill-color-warning'));
+@include gradient-variant('info', var-get($theme, 'fill-color-info'));
+@include gradient-variant('success', var-get($theme, 'fill-color-success'));
 
 [part~='gradient_start'],
 [part~='gradient_end'] {
-    stop-color: var(--gradient-stop-color, var-get($theme, 'progress-circle-color'));
+    stop-color: var(--gradient-stop-color, var-get($theme, 'fill-color-default'));
 }
 

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

@@ -5,7 +5,6 @@
 @use '../vars' as *;
 
 :host {
-    --track-size: #{rem(4px)};
     --linear-animation-duration: 2000ms;
     --linear-strips-orientation: -45deg;
 }
@@ -43,7 +42,6 @@
 [part~='track'] {
     position: relative;
     width: inherit;
-    height: var(--track-size);
     overflow: hidden;
     z-index: 0;
 }

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

@@ -5,7 +5,16 @@
 
 $theme: $material;
 
+:host {
+    --track-size: #{var-get($theme, 'track-height')};
+}
+
+:host([striped]) {
+    --stripe-size: #{var-get($theme, 'strip-size')};
+}
+
 [part~='track'] {
+    height: var(--track-size);
     border-radius: var-get($theme, 'track-border-radius');
     background: var-get($theme, 'track-color');
 }
@@ -14,10 +23,6 @@ $theme: $material;
     color: var-get($theme, 'text-color');
 }
 
-:host([striped]) {
-    --stripe-size: #{rem(16px)};
-}
-
 @mixin part-styles($part, $color-key) {
     :host([variant='#{$part}']) {
         --fill-bg: #{var-get($theme, $color-key)};

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

@@ -6,10 +6,6 @@
 $theme: $fluent;
 $track-color: color(gray, 200);
 
-:host {
-    --track-size: #{rem(2px)};
-}
-
 :host(:dir(rtl)[indeterminate]),
 :host([dir='rtl']) {
     [part~='track'] {

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

@@ -14,7 +14,6 @@ import { styles as indigoLight } from './light/linear.progress.indigo.css.js';
 import { styles as materialLight } from './light/linear.progress.material.css.js';
 import { styles as sharedLight } from './light/linear.progress.shared.css.js';
 // Shared Styles
-import { styles as bootstrap } from './shared/linear.progress.bootstrap.css.js';
 import { styles as fluent } from './shared/linear.progress.fluent.css.js';
 import { styles as indigo } from './shared/linear.progress.indigo.css.js';
 
@@ -23,7 +22,7 @@ const light = {
     ${sharedLight}
   `,
   bootstrap: css`
-    ${bootstrap} ${bootstrapLight}
+    ${bootstrapLight}
   `,
   material: css`
     ${materialLight}
@@ -41,7 +40,7 @@ const dark = {
     ${sharedDark}
   `,
   bootstrap: css`
-    ${bootstrap} ${bootstrapDark}
+    ${bootstrapDark}
   `,
   material: css`
     ${materialDark}