fix: use mask for dougnhut

Author: astandrik

src/components/DoughnutMetrics/DoughnutMetrics.scss

@@ -13,21 +13,9 @@
         aspect-ratio: 1;
 
         border-radius: 50%;
+        mask: radial-gradient(circle at center, transparent 46%, #000 46.5%);
 
         transform: rotate(180deg);
-        &::before {
-            display: block;
-
-            height: calc(100% - calc(var(--doughnut-border) * 2));
-
-            content: '';
-
-            border-radius: 50%;
-            background-color: var(--center-color, var(--g-color-base-background));
-
-            transform: translate(var(--doughnut-border), var(--doughnut-border));
-            aspect-ratio: 1;
-        }
     }
 
     // Size modifiers - using visually centered values
@@ -61,8 +49,9 @@
     }
     &__text-wrapper {
         position: absolute;
+        z-index: 1;
         top: var(--doughnut-wrapper-indent);
-        right: var(--doughnut-wrapper-indent);
+        left: var(--doughnut-wrapper-indent);
 
         display: flex;
         flex-direction: column;
@@ -73,7 +62,6 @@
 
         text-align: center;
 
-        transform: rotate(180deg);
         aspect-ratio: 1;
     }
 

src/components/DoughnutMetrics/DoughnutMetrics.tsx

@@ -57,7 +57,6 @@ interface DoughnutProps {
     children?: React.ReactNode;
     className?: string;
     size?: 'small' | 'medium' | 'large';
-    centerColor?: string;
 }
 
 export function DoughnutMetrics({
@@ -66,7 +65,6 @@ export function DoughnutMetrics({
     children,
     className,
     size = 'medium',
-    centerColor,
 }: DoughnutProps) {
     let filledDegrees = fillWidth * 3.6;
     let doughnutFillVar = 'var(--doughnut-color)';
@@ -80,15 +78,13 @@ export function DoughnutMetrics({
 
     const doughnutStyle: React.CSSProperties = {
         background: `conic-gradient(${doughnutFillVar} 0deg ${filledDegrees}deg, ${doughnutBackdropVar} ${filledDegrees}deg 360deg)`,
-        ...(centerColor && ({'--center-color': centerColor} as React.CSSProperties)),
     };
 
     return (
         <SizeContext.Provider value={size}>
-            <div className={b(null, className)}>
-                <div style={doughnutStyle} className={b('doughnut', {status, size})}>
-                    <div className={b('text-wrapper')}>{children}</div>
-                </div>
+            <div className={b(null, className)} style={{position: 'relative'}}>
+                <div style={doughnutStyle} className={b('doughnut', {status, size})}></div>
+                <div className={b('text-wrapper')}>{children}</div>
             </div>
         </SizeContext.Provider>
     );

src/containers/Tenant/Diagnostics/TenantOverview/TabCard/TabCard.tsx

@@ -46,9 +46,6 @@ export function TabCard({
         formattedValue = `${value} of ${limit}${unit ? ' ' + unit : ''}`;
     }
 
-    // Set center color based on card state
-    const centerColor = active ? 'var(--g-color-base-background)' : 'var(--g-color-base-float)';
-
     return (
         <div className={b({clickable, active})}>
             <Card
@@ -62,7 +59,6 @@ export function TabCard({
                         status={status}
                         fillWidth={percentage}
                         className={b('doughnut')}
-                        centerColor={centerColor}
                     >
                         <DoughnutMetrics.Value variant="subheader-1">
                             {formattedPercentage}