refactor(circular-progress): remove typography (#14602)

Author: SisIvanova

package-lock.json

@@ -80,7 +80,7 @@
     "@types/source-map": "0.5.2",
     "express": "^4.19.2",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^10.0.0",
+    "igniteui-theming": "^10.1.0",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.0",

package.json

@@ -74,7 +74,7 @@
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
         "uuid": "^9.0.0",
-        "igniteui-theming": "^10.0.0",
+        "igniteui-theming": "^10.1.0",
         "@igniteui/material-icons-extended": "^3.0.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:math';
 @use 'sass:meta';
 @use 'sass:list';
 @use '../../base' as *;
@@ -398,6 +399,7 @@
 /// @param {Color} $base-circle-color [null] - The base circle fill color.
 /// @param {Color | List<Color>} $progress-circle-color [null] - The progress circle fill color.
 /// @param {Color} $text-color [null] - The value text color.
+/// @param {Number} $diameter [null] - The progress circle diameter.
 ///
 /// @requires $light-material-schema
 ///
@@ -412,8 +414,8 @@
 
     $base-circle-color: null,
     $progress-circle-color: null,
-
-    $text-color: null
+    $text-color: null,
+    $diameter: null
 ) {
     $name: 'igx-circular-bar';
     $circular-bar-schema: ();
@@ -446,6 +448,7 @@
         progress-circle-color-start: $progress-circle-color-start,
         progress-circle-color-end: $progress-circle-color-end,
         text-color: $text-color,
+        diameter: $diameter,
         _meta: map.merge(if($meta, $meta, ()), (
             variant: map.get($schema, '_meta', 'theme')
         )),
@@ -463,25 +466,14 @@
 
     $variant: map.get($theme, '_meta', 'variant');
 
-    $circular-size: map.get((
-        material: rem(32px),
-        fluent: rem(32px),
-        bootstrap: rem(54px),
-        indigo-design: rem(48px),
-    ), $variant);
-
-    $stroke-width: map.get((
-        material: rem(4px),
-        fluent: rem(4px),
-        bootstrap: rem(4px),
-        indigo-design: rem(4px),
-    ), $variant);
+    $stroke-width: rem(4px);
+    $diameter: var-get($theme, 'diameter');
 
     %circular-display {
         display: inline-flex;
         flex: 1 1 auto;
-        width: $circular-size;
-        height: $circular-size;
+        width: $diameter;
+        height: $diameter;
         position: relative;
 
         svg {
@@ -533,12 +525,32 @@
     }
 
     %circular-text {
+        $scale-factor: 2.28571;
+
+        @if $variant == 'indigo-design' {
+            $scale-factor: 3;
+        }
+
+        @if $variant == 'bootstrap' {
+            $scale-factor: 2.7;
+        }
+
+        --stroke-scale: calc(#{$diameter} / #{unitless(map.get($theme, 'diameter'))});
+        $font-size: round(calc($diameter / $scale-factor - #{unitless($stroke-width)} * var(--stroke-scale)), 1px);
+
         position: absolute;
         inset-block-start: 50%;
         inset-inline-start: 50%;
         transform: translate(-50%, -50%);
-        text-align: center;
         color: var-get($theme, 'text-color');
+        font-size: #{$font-size};
+        line-height: normal;
+        text-align: center;
+        font-weight: 600;
+
+        @if $variant == 'bootstrap' or $variant == 'fluent' {
+            font-weight: 700;
+        }
     }
 
     %circular-text--hidden {
@@ -564,27 +576,3 @@
         }
     }
 }
-
-// Adds typography styles for the igx-circular-bar component.
-/// Uses custom typography
-/// @group typography
-/// @param {Map} $categories [(text: 'h6')] - The categories from the typographic scale used for type styles.
-@mixin circular-bar-typography($categories: (text: 'h6')) {
-    $text: map.get($categories, 'text');
-
-    @if $text {
-        %circular-text {
-            @include type-style($text) {
-                font-size: rem(12px);
-                line-height: rem(16px);
-                margin: 0;
-            }
-        }
-    } @else {
-        %circular-text {
-            font-size: rem(12px);
-            font-weight: 700;
-            line-height: rem(16px);
-        }
-    }
-}

projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss

@@ -55,9 +55,6 @@
         label: 'body-1',
     ));
     @include chip-typography();
-    @include circular-bar-typography($categories: (
-        text: 'subtitle-1'
-    ));
     @include column-actions-typography();
     @include date-range-typography();
     @include dialog-typography($categories: (

projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss

@@ -58,9 +58,6 @@
     @include chip-typography($categories: (
         text: 'subtitle-2'
     ));
-    @include circular-bar-typography($categories: (
-        text: null
-    ));
     @include column-actions-typography();
     @include date-range-typography();
     @include dialog-typography();

projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss

@@ -57,9 +57,6 @@
         label: 'body-2',
     ));
     @include chip-typography();
-    @include circular-bar-typography($categories: (
-        text: 'subtitle-2'
-    ));
     @include column-actions-typography();
     @include date-range-typography();
     @include dialog-typography($categories: (

projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss

@@ -41,7 +41,6 @@
     @include card-typography();
     @include checkbox-typography();
     @include chip-typography();
-    @include circular-bar-typography();
     @include column-actions-typography();
     @include date-range-typography();
     @include dialog-typography();