@alfalab/core-components-circular-progress-bar 3.1.0 → 3.2.0

package/modern/Component.js

@@ -1,46 +1,15 @@
 import React, { useMemo } from 'react';
 import cn from 'classnames';
 import { Typography } from '@alfalab/core-components-typography/modern';
+import { STROKE, SIZES, TYPOGRAPHY_COLOR, VIEW_TITLE, VIEW_TEXT } from './consts.js';
 
-const styles = {"component":"circular-progress-bar__component_xzi53","svg":"circular-progress-bar__svg_xzi53","title":"circular-progress-bar__title_xzi53","subtitle":"circular-progress-bar__subtitle_xzi53","labelWrapper":"circular-progress-bar__labelWrapper_xzi53","label":"circular-progress-bar__label_xzi53","typography":"circular-progress-bar__typography_xzi53","xxl":"circular-progress-bar__xxl_xzi53","xl":"circular-progress-bar__xl_xzi53","l":"circular-progress-bar__l_xzi53","m":"circular-progress-bar__m_xzi53","s":"circular-progress-bar__s_xzi53","xs":"circular-progress-bar__xs_xzi53","backgroundCircle":"circular-progress-bar__backgroundCircle_xzi53","progressCircle":"circular-progress-bar__progressCircle_xzi53","positive":"circular-progress-bar__positive_xzi53","negative":"circular-progress-bar__negative_xzi53","stroke":"circular-progress-bar__stroke_xzi53","bg-positive":"circular-progress-bar__bg-positive_xzi53","bg-negative":"circular-progress-bar__bg-negative_xzi53","iconWrapper":"circular-progress-bar__iconWrapper_xzi53","icon-tertiary":"circular-progress-bar__icon-tertiary_xzi53","icon-positive":"circular-progress-bar__icon-positive_xzi53","icon-negative":"circular-progress-bar__icon-negative_xzi53","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_xzi53","icon-primary":"circular-progress-bar__icon-primary_xzi53","icon-secondary":"circular-progress-bar__icon-secondary_xzi53","icon":"circular-progress-bar__icon_xzi53"};
+const styles = {"component":"circular-progress-bar__component_kekau","bg-positive":"circular-progress-bar__bg-positive_kekau","bg-negative":"circular-progress-bar__bg-negative_kekau","svg":"circular-progress-bar__svg_kekau","title":"circular-progress-bar__title_kekau","subtitle":"circular-progress-bar__subtitle_kekau","labelWrapper":"circular-progress-bar__labelWrapper_kekau","label":"circular-progress-bar__label_kekau","typography":"circular-progress-bar__typography_kekau","xxl":"circular-progress-bar__xxl_kekau","xl":"circular-progress-bar__xl_kekau","l":"circular-progress-bar__l_kekau","m":"circular-progress-bar__m_kekau","s":"circular-progress-bar__s_kekau","xs":"circular-progress-bar__xs_kekau","backgroundCircle":"circular-progress-bar__backgroundCircle_kekau","progressCircle":"circular-progress-bar__progressCircle_kekau","positive":"circular-progress-bar__positive_kekau","negative":"circular-progress-bar__negative_kekau","stroke":"circular-progress-bar__stroke_kekau","iconWrapper":"circular-progress-bar__iconWrapper_kekau","icon-tertiary":"circular-progress-bar__icon-tertiary_kekau","icon-positive":"circular-progress-bar__icon-positive_kekau","icon-negative":"circular-progress-bar__icon-negative_kekau","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_kekau","icon-primary":"circular-progress-bar__icon-primary_kekau","icon-secondary":"circular-progress-bar__icon-secondary_kekau","icon":"circular-progress-bar__icon_kekau"};
 require('./index.css')
 
-const SIZES = {
-    xs: 24,
-    s: 48,
-    m: 64,
-    l: 80,
-    xl: 128,
-    xxl: 144,
-};
-const STROKE = {
-    xs: 4,
-    s: 4,
-    m: 6,
-    l: 8,
-    xl: 10,
-    xxl: 12,
-};
-const VIEW_TITLE = {
-    xs: 'small',
-    s: 'small',
-    m: 'small',
-    l: 'xsmall',
-    xl: 'medium',
-    xxl: 'medium',
-};
-const VIEW_TEXT = {
-    xs: 'secondary-small',
-    s: 'secondary-small',
-    m: 'secondary-large',
-    l: 'secondary-large',
-    xl: 'secondary-large',
-    xxl: 'secondary-large',
-};
 /**
  * Компонент круглого прогресс бара.
  */
-const CircularProgressBar = ({ value, view = 'positive', size = 'm', className, dataTestId, title = value ? value.toString() : '0', titleComplete, subtitle, contentColor = 'secondary', subtitleComplete, stroke = true, fillComplete, icon: Icon, iconComplete: IconComplete, completeTextColor, completeIconColor = 'tertiary', direction = 'clockwise', height, children, }) => {
+const CircularProgressBar = ({ value, view = 'positive', size = 'm', className, dataTestId, title = value ? value.toString() : '0', titleComplete, subtitle, contentColor = 'secondary', subtitleComplete, stroke = true, fillComplete, icon: Icon, iconComplete: IconComplete, completeTextColor, completeIconColor = 'tertiary', direction = 'clockwise', height, children, progressStrokeColor, circleColor, }) => {
     const memorized = useMemo(() => {
         const strokeWidth = STROKE[size];
         const maxProgress = 100;
@@ -67,25 +36,37 @@ const CircularProgressBar = ({ value, view = 'positive', size = 'm', className,
     const titleContent = titleComplete && isComplete ? titleComplete : title;
     const subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;
     const IconComponent = IconComplete && isComplete ? IconComplete : Icon;
-    const renderTitleString = () => SIZES[size] > 64 ? (React.createElement(Typography.TitleMobile, { className: cn(styles.typography, styles.title), color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', font: 'system', view: VIEW_TITLE[size] }, titleContent)) : (React.createElement(Typography.Text, { className: styles.title, color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', weight: 'bold', view: VIEW_TEXT[size] }, titleContent));
+    const typographyContentColor = TYPOGRAPHY_COLOR.includes(contentColor)
+        ? contentColor
+        : undefined;
+    const renderTitleString = () => SIZES[size] > 64 ? (React.createElement(Typography.TitleMobile, { className: cn(styles.typography, styles.title), color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', font: 'system', view: VIEW_TITLE[size], style: {
+            ...(!typographyContentColor && { color: contentColor }),
+        } }, titleContent)) : (React.createElement(Typography.Text, { className: styles.title, color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', weight: 'bold', view: VIEW_TEXT[size], style: {
+            ...(!typographyContentColor && { color: contentColor }),
+        } }, titleContent));
     const renderTitle = () => (typeof title === 'string' ? renderTitleString() : titleContent);
-    const renderSubTitle = () => typeof subtitle === 'string' ? (React.createElement(Typography.Text, { tag: 'div', className: styles.subtitle, color: isCompleteTextColor ? completeTextColor : contentColor, view: 'primary-small' }, subtitleContent)) : (subtitleContent);
+    const renderSubTitle = () => typeof subtitle === 'string' ? (React.createElement(Typography.Text, { tag: 'div', className: styles.subtitle, color: isCompleteTextColor ? completeTextColor : typographyContentColor, view: 'primary-small', style: {
+            ...(!typographyContentColor && { color: contentColor }),
+        } }, subtitleContent)) : (subtitleContent);
     const renderIcon = () => (React.createElement("span", { className: cn(styles.iconWrapper, styles[size], styles.tertiary, styles[`icon-${contentColor}`], {
             [styles[`icon-${completeIconColor}`]]: completeIconColor,
         }) }, IconComponent && React.createElement(IconComponent, { className: styles.icon })));
     const renderContent = () => Icon || (IconComplete && isComplete) ? (renderIcon()) : (React.createElement(React.Fragment, null,
         SIZES[size] > 24 && renderTitle(),
         SIZES[size] > 64 && renderSubTitle()));
-    return (React.createElement("div", { className: cn(styles.component, styles[size], className), style: {
+    return (React.createElement("div", { className: cn(styles.component, styles[size], className, {
+            [styles[`bg-${view}`]]: fillComplete && isComplete,
+        }), style: {
             ...(height && { height, width: height }),
+            ...(circleColor && { backgroundColor: circleColor }),
         }, "data-test-id": dataTestId },
         React.createElement("svg", { viewBox: `0 0 ${memorized.widthSVG} ${memorized.heightSVG}`, className: styles.svg, xmlns: 'http://www.w3.org/2000/svg' },
             React.createElement("circle", { className: cn(styles.backgroundCircle, styles[size], {
                     [styles.stroke]: !stroke,
                 }), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size] }),
-            React.createElement("circle", { className: cn(styles.progressCircle, styles[view], styles[size], {
-                    [styles[`bg-${view}`]]: fillComplete && isComplete,
-                }), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
+            React.createElement("circle", { className: cn(styles.progressCircle, styles[view], styles[size]), style: {
+                    ...(progressStrokeColor && { stroke: progressStrokeColor }),
+                }, cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
                     ? -memorized.strokeDashoffset
                     : memorized.strokeDashoffset, transform: `rotate(${-90} ${memorized.center} ${memorized.center})` })),
         React.createElement("div", { className: cn(styles.labelWrapper, {

package/modern/consts.d.ts

@@ -0,0 +1,34 @@
+declare const SIZES: {
+    xs: number;
+    s: number;
+    m: number;
+    l: number;
+    xl: number;
+    xxl: number;
+};
+declare const STROKE: {
+    xs: number;
+    s: number;
+    m: number;
+    l: number;
+    xl: number;
+    xxl: number;
+};
+declare const VIEW_TITLE: {
+    readonly xs: "small";
+    readonly s: "small";
+    readonly m: "small";
+    readonly l: "xsmall";
+    readonly xl: "medium";
+    readonly xxl: "medium";
+};
+declare const VIEW_TEXT: {
+    readonly xs: "secondary-small";
+    readonly s: "secondary-small";
+    readonly m: "secondary-large";
+    readonly l: "secondary-large";
+    readonly xl: "secondary-large";
+    readonly xxl: "secondary-large";
+};
+declare const TYPOGRAPHY_COLOR: string[];
+export { SIZES, STROKE, VIEW_TITLE, VIEW_TEXT, TYPOGRAPHY_COLOR };

package/modern/consts.js

@@ -0,0 +1,35 @@
+const SIZES = {
+    xs: 24,
+    s: 48,
+    m: 64,
+    l: 80,
+    xl: 128,
+    xxl: 144,
+};
+const STROKE = {
+    xs: 4,
+    s: 4,
+    m: 6,
+    l: 8,
+    xl: 10,
+    xxl: 12,
+};
+const VIEW_TITLE = {
+    xs: 'small',
+    s: 'small',
+    m: 'small',
+    l: 'xsmall',
+    xl: 'medium',
+    xxl: 'medium',
+};
+const VIEW_TEXT = {
+    xs: 'secondary-small',
+    s: 'secondary-small',
+    m: 'secondary-large',
+    l: 'secondary-large',
+    xl: 'secondary-large',
+    xxl: 'secondary-large',
+};
+const TYPOGRAPHY_COLOR = ['primary', 'secondary', 'tertiary', 'positive', 'negative'];
+
+export { SIZES, STROKE, TYPOGRAPHY_COLOR, VIEW_TEXT, VIEW_TITLE };

package/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: n376a */
+/* hash: mxnd9 */
 :root {
 } /* deprecated */ :root {
     --color-light-border-primary: #dcdcdd;
@@ -18,6 +18,7 @@
 
     /* Hard up */
 } :root {
+    --border-radius-pill: 99px;
 } :root {
 } :root {
     --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
@@ -36,134 +37,135 @@
     /* theme */
     --circular-progress-bar-font-family: var(--font-family-system);
     --circular-progress-bar-font-weight: 600;
-} .circular-progress-bar__component_xzi53 {
+} .circular-progress-bar__component_kekau {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
-} .circular-progress-bar__svg_xzi53 {
+    border-radius: var(--border-radius-pill)
+} .circular-progress-bar__component_kekau.circular-progress-bar__bg-positive_kekau {
+        background: var(--circular-progress-bar-positive-color);
+    } .circular-progress-bar__component_kekau.circular-progress-bar__bg-negative_kekau {
+        background: var(--circular-progress-bar-negative-color);
+    } .circular-progress-bar__svg_kekau {
     display: block;
     width: 100%;
-} .circular-progress-bar__title_xzi53,
-.circular-progress-bar__subtitle_xzi53 {
+} .circular-progress-bar__title_kekau,
+.circular-progress-bar__subtitle_kekau {
     overflow: hidden;
     word-break: break-word;
     white-space: nowrap;
     text-overflow: ellipsis;
     margin: 0 6px;
-} .circular-progress-bar__subtitle_xzi53 {
+} .circular-progress-bar__subtitle_kekau {
     max-height: 40px;
-} .circular-progress-bar__labelWrapper_xzi53 {
+} .circular-progress-bar__labelWrapper_kekau {
     text-align: center;
     position: absolute;
     top: 50%;
     left: 50%;
     width: 100%;
     transform: translate(-50%, -50%)
-} .circular-progress-bar__labelWrapper_xzi53.circular-progress-bar__label_xzi53 {
+} .circular-progress-bar__labelWrapper_kekau.circular-progress-bar__label_kekau {
         display: flex;
         align-items: center;
         justify-content: center;
-    } .circular-progress-bar__typography_xzi53 {
+    } .circular-progress-bar__typography_kekau {
     font-feature-settings: 'ss01';
     font-weight: var(--circular-progress-bar-font-weight);
     font-family: var(--circular-progress-bar-font-family);
-} .circular-progress-bar__xxl_xzi53 {
+} .circular-progress-bar__xxl_kekau {
     width: 144px;
     height: 144px
-} .circular-progress-bar__xxl_xzi53 .circular-progress-bar__labelWrapper_xzi53 {
+} .circular-progress-bar__xxl_kekau .circular-progress-bar__labelWrapper_kekau {
         max-width: 128px;
-    } .circular-progress-bar__xxl_xzi53 .circular-progress-bar__title_xzi53 {
+    } .circular-progress-bar__xxl_kekau .circular-progress-bar__title_kekau {
         max-height: 32px;
-    } .circular-progress-bar__xl_xzi53 {
+    } .circular-progress-bar__xl_kekau {
     width: 128px;
     height: 128px
-} .circular-progress-bar__xl_xzi53 .circular-progress-bar__labelWrapper_xzi53 {
+} .circular-progress-bar__xl_kekau .circular-progress-bar__labelWrapper_kekau {
         max-width: 108px;
-    } .circular-progress-bar__xl_xzi53 .circular-progress-bar__title_xzi53 {
+    } .circular-progress-bar__xl_kekau .circular-progress-bar__title_kekau {
         max-height: 32px;
-    } .circular-progress-bar__l_xzi53 {
+    } .circular-progress-bar__l_kekau {
     width: 80px;
     height: 80px
-} .circular-progress-bar__l_xzi53 .circular-progress-bar__labelWrapper_xzi53 {
+} .circular-progress-bar__l_kekau .circular-progress-bar__labelWrapper_kekau {
         max-width: 64px;
-    } .circular-progress-bar__l_xzi53 .circular-progress-bar__title_xzi53 {
+    } .circular-progress-bar__l_kekau .circular-progress-bar__title_kekau {
         max-height: 24px;
-    } .circular-progress-bar__m_xzi53 {
+    } .circular-progress-bar__m_kekau {
     width: 64px;
     height: 64px
-} .circular-progress-bar__m_xzi53 .circular-progress-bar__labelWrapper_xzi53 {
+} .circular-progress-bar__m_kekau .circular-progress-bar__labelWrapper_kekau {
         max-width: 48px;
-    } .circular-progress-bar__m_xzi53 .circular-progress-bar__title_xzi53 {
+    } .circular-progress-bar__m_kekau .circular-progress-bar__title_kekau {
         max-height: 16px;
         margin: 0;
-    } .circular-progress-bar__s_xzi53 {
+    } .circular-progress-bar__s_kekau {
     width: 48px;
     height: 48px
-} .circular-progress-bar__s_xzi53 .circular-progress-bar__labelWrapper_xzi53 {
+} .circular-progress-bar__s_kekau .circular-progress-bar__labelWrapper_kekau {
         max-width: 40px;
-    } .circular-progress-bar__s_xzi53 .circular-progress-bar__title_xzi53 {
+    } .circular-progress-bar__s_kekau .circular-progress-bar__title_kekau {
         max-height: 16px;
         margin: 0;
-    } .circular-progress-bar__xs_xzi53 {
+    } .circular-progress-bar__xs_kekau {
     width: 24px;
     height: 24px
-} .circular-progress-bar__xs_xzi53 .circular-progress-bar__labelWrapper_xzi53 {
+} .circular-progress-bar__xs_kekau .circular-progress-bar__labelWrapper_kekau {
         max-width: 24px;
-    } .circular-progress-bar__backgroundCircle_xzi53,
-.circular-progress-bar__progressCircle_xzi53 {
+    } .circular-progress-bar__backgroundCircle_kekau,
+.circular-progress-bar__progressCircle_kekau {
     width: 100%;
     height: 100%;
     fill: transparent;
-} .circular-progress-bar__positive_xzi53 {
+} .circular-progress-bar__positive_kekau {
     stroke: var(--circular-progress-bar-positive-color);
-} .circular-progress-bar__negative_xzi53 {
+} .circular-progress-bar__negative_kekau {
     stroke: var(--circular-progress-bar-negative-color);
-} .circular-progress-bar__backgroundCircle_xzi53 {
+} .circular-progress-bar__backgroundCircle_kekau {
     stroke: var(--circular-progress-bar-stroke-color)
-} .circular-progress-bar__backgroundCircle_xzi53.circular-progress-bar__stroke_xzi53 {
+} .circular-progress-bar__backgroundCircle_kekau.circular-progress-bar__stroke_kekau {
         stroke: transparent;
-    } .circular-progress-bar__progressCircle_xzi53 {
-    stroke-linecap: round
-} .circular-progress-bar__progressCircle_xzi53.circular-progress-bar__bg-positive_xzi53 {
-        fill: var(--circular-progress-bar-positive-color);
-    } .circular-progress-bar__progressCircle_xzi53.circular-progress-bar__bg-negative_xzi53 {
-        fill: var(--circular-progress-bar-negative-color);
-    } .circular-progress-bar__iconWrapper_xzi53 {
+    } .circular-progress-bar__progressCircle_kekau {
+    stroke-linecap: round;
+} .circular-progress-bar__iconWrapper_kekau {
     display: flex;
     align-items: center;
     justify-content: center
-} .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__xxl_xzi53 {
+} .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__xxl_kekau {
         max-width: 64px;
         max-height: 64px;
-    } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__xl_xzi53 {
+    } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__xl_kekau {
         max-width: 64px;
         max-height: 64px;
-    } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__l_xzi53 {
+    } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__l_kekau {
         max-width: 48px;
         max-height: 48px;
-    } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__m_xzi53 {
+    } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__m_kekau {
         max-width: 36px;
         max-height: 36px;
-    } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__s_xzi53 {
+    } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__s_kekau {
         max-width: 24px;
         max-height: 24px;
-    } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__xs_xzi53 {
+    } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__xs_kekau {
         max-width: 16px;
         max-height: 16px;
-    } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__icon-tertiary_xzi53 {
+    } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-tertiary_kekau {
         color: var(--color-light-graphic-tertiary);
-    } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__icon-positive_xzi53 {
+    } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-positive_kekau {
         color: var(--color-light-graphic-positive);
-    } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__icon-negative_xzi53 {
+    } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-negative_kekau {
         color: var(--color-light-graphic-negative);
-    } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__icon-primary-inverted_xzi53 {
+    } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-primary-inverted_kekau {
         color: var(--color-light-graphic-primary-inverted);
-    } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__icon-primary_xzi53 {
+    } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-primary_kekau {
         color: var(--color-light-graphic-primary);
-    } .circular-progress-bar__iconWrapper_xzi53.circular-progress-bar__icon-secondary_xzi53 {
+    } .circular-progress-bar__iconWrapper_kekau.circular-progress-bar__icon-secondary_kekau {
         color: var(--color-light-graphic-secondary);
-    } .circular-progress-bar__icon_xzi53 {
+    } .circular-progress-bar__icon_kekau {
     width: 100%;
     height: 100%;
 }

package/modern/index.js

@@ -2,3 +2,4 @@ export { CircularProgressBar } from './Component.js';
 import 'react';
 import 'classnames';
 import '@alfalab/core-components-typography/modern';
+import './consts.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-circular-progress-bar",
-    "version": "3.1.0",
+    "version": "3.2.0",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -11,7 +11,7 @@
         "directory": "dist"
     },
     "dependencies": {
-        "@alfalab/core-components-typography": "^4.0.0",
+        "@alfalab/core-components-typography": "^4.1.0",
         "classnames": "^2.3.1",
         "tslib": "^2.4.0"
     },

package/src/Component.tsx

@@ -3,43 +3,11 @@ import cn from 'classnames';
 
 import { Typography } from '@alfalab/core-components-typography';
 
-import styles from './index.module.css';
-
-const SIZES = {
-    xs: 24,
-    s: 48,
-    m: 64,
-    l: 80,
-    xl: 128,
-    xxl: 144,
-};
+import { SIZES, STROKE, TYPOGRAPHY_COLOR, VIEW_TEXT, VIEW_TITLE } from './consts';
 
-const STROKE = {
-    xs: 4,
-    s: 4,
-    m: 6,
-    l: 8,
-    xl: 10,
-    xxl: 12,
-};
+import styles from './index.module.css';
 
-const VIEW_TITLE = {
-    xs: 'small',
-    s: 'small',
-    m: 'small',
-    l: 'xsmall',
-    xl: 'medium',
-    xxl: 'medium',
-} as const;
-
-const VIEW_TEXT = {
-    xs: 'secondary-small',
-    s: 'secondary-small',
-    m: 'secondary-large',
-    l: 'secondary-large',
-    xl: 'secondary-large',
-    xxl: 'secondary-large',
-} as const;
+export type TypographyColor = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';
 
 export type CircularProgressBarProps = {
     /**
@@ -60,7 +28,7 @@ export type CircularProgressBarProps = {
     /**
      * Цвет контента
      */
-    contentColor?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';
+    contentColor?: TypographyColor | string;
 
     /**
      * Дополнительный текст
@@ -140,9 +108,19 @@ export type CircularProgressBarProps = {
     dataTestId?: string;
 
     /**
-     * Дочерние элементы.
+     * Дочерние элементы
      */
     children?: ReactNode;
+
+    /**
+     * Цвет прогресса
+     */
+    progressStrokeColor?: string;
+
+    /**
+     * Цвет заливки внутри круга
+     */
+    circleColor?: string;
 };
 
 /**
@@ -168,6 +146,8 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
     direction = 'clockwise',
     height,
     children,
+    progressStrokeColor,
+    circleColor,
 }) => {
     const memorized = useMemo(() => {
         const strokeWidth = STROKE[size];
@@ -197,25 +177,34 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
     const titleContent = titleComplete && isComplete ? titleComplete : title;
     const subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;
     const IconComponent = IconComplete && isComplete ? IconComplete : Icon;
+    const typographyContentColor = TYPOGRAPHY_COLOR.includes(contentColor)
+        ? (contentColor as TypographyColor)
+        : undefined;
 
     const renderTitleString = () =>
         SIZES[size] > 64 ? (
             <Typography.TitleMobile
                 className={cn(styles.typography, styles.title)}
-                color={isCompleteTextColor ? completeTextColor : contentColor}
+                color={isCompleteTextColor ? completeTextColor : typographyContentColor}
                 tag='div'
                 font='system'
                 view={VIEW_TITLE[size]}
+                style={{
+                    ...(!typographyContentColor && { color: contentColor }),
+                }}
             >
                 {titleContent}
             </Typography.TitleMobile>
         ) : (
             <Typography.Text
                 className={styles.title}
-                color={isCompleteTextColor ? completeTextColor : contentColor}
+                color={isCompleteTextColor ? completeTextColor : typographyContentColor}
                 tag='div'
                 weight='bold'
                 view={VIEW_TEXT[size]}
+                style={{
+                    ...(!typographyContentColor && { color: contentColor }),
+                }}
             >
                 {titleContent}
             </Typography.Text>
@@ -228,8 +217,11 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
             <Typography.Text
                 tag='div'
                 className={styles.subtitle}
-                color={isCompleteTextColor ? completeTextColor : contentColor}
+                color={isCompleteTextColor ? completeTextColor : typographyContentColor}
                 view='primary-small'
+                style={{
+                    ...(!typographyContentColor && { color: contentColor }),
+                }}
             >
                 {subtitleContent}
             </Typography.Text>
@@ -265,9 +257,12 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
 
     return (
         <div
-            className={cn(styles.component, styles[size], className)}
+            className={cn(styles.component, styles[size], className, {
+                [styles[`bg-${view}`]]: fillComplete && isComplete,
+            })}
             style={{
                 ...(height && { height, width: height }),
+                ...(circleColor && { backgroundColor: circleColor }),
             }}
             data-test-id={dataTestId}
         >
@@ -286,9 +281,10 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
                     strokeWidth={STROKE[size]}
                 />
                 <circle
-                    className={cn(styles.progressCircle, styles[view], styles[size], {
-                        [styles[`bg-${view}`]]: fillComplete && isComplete,
-                    })}
+                    className={cn(styles.progressCircle, styles[view], styles[size])}
+                    style={{
+                        ...(progressStrokeColor && { stroke: progressStrokeColor }),
+                    }}
                     cx={memorized.center}
                     cy={memorized.center}
                     r={memorized.radius}

package/src/consts.ts

@@ -0,0 +1,37 @@
+export const SIZES = {
+    xs: 24,
+    s: 48,
+    m: 64,
+    l: 80,
+    xl: 128,
+    xxl: 144,
+};
+
+export const STROKE = {
+    xs: 4,
+    s: 4,
+    m: 6,
+    l: 8,
+    xl: 10,
+    xxl: 12,
+};
+
+export const VIEW_TITLE = {
+    xs: 'small',
+    s: 'small',
+    m: 'small',
+    l: 'xsmall',
+    xl: 'medium',
+    xxl: 'medium',
+} as const;
+
+export const VIEW_TEXT = {
+    xs: 'secondary-small',
+    s: 'secondary-small',
+    m: 'secondary-large',
+    l: 'secondary-large',
+    xl: 'secondary-large',
+    xxl: 'secondary-large',
+} as const;
+
+export const TYPOGRAPHY_COLOR = ['primary', 'secondary', 'tertiary', 'positive', 'negative'];

package/src/index.module.css

@@ -20,6 +20,15 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    border-radius: var(--border-radius-pill);
+
+    &.bg-positive {
+        background: var(--circular-progress-bar-positive-color);
+    }
+
+    &.bg-negative {
+        background: var(--circular-progress-bar-negative-color);
+    }
 }
 
 .svg {
@@ -162,14 +171,6 @@
 
 .progressCircle {
     stroke-linecap: round;
-
-    &.bg-positive {
-        fill: var(--circular-progress-bar-positive-color);
-    }
-
-    &.bg-negative {
-        fill: var(--circular-progress-bar-negative-color);
-    }
 }
 
 .iconWrapper {