@alfalab/core-components-circular-progress-bar 3.5.5 → 3.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/Component.js +1 -1
  2. package/cssm/index.module.css +3 -1
  3. package/esm/Component.js +1 -1
  4. package/esm/index.css +52 -50
  5. package/index.css +52 -50
  6. package/modern/Component.js +1 -1
  7. package/modern/index.css +52 -50
  8. package/moderncssm/Component.d.ts +111 -0
  9. package/moderncssm/Component.js +77 -0
  10. package/moderncssm/consts.d.ts +72 -0
  11. package/moderncssm/consts.js +73 -0
  12. package/moderncssm/index.d.ts +1 -0
  13. package/moderncssm/index.js +1 -0
  14. package/moderncssm/index.module.css +239 -0
  15. package/package.json +4 -4
  16. package/src/index.module.css +1 -1
package/Component.js CHANGED
@@ -13,7 +13,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
13
13
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
14
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
15
15
 
16
- var styles = {"component":"circular-progress-bar__component_9u1ba","bg-positive":"circular-progress-bar__bg-positive_9u1ba","bg-negative":"circular-progress-bar__bg-negative_9u1ba","svg":"circular-progress-bar__svg_9u1ba","title":"circular-progress-bar__title_9u1ba","subtitle":"circular-progress-bar__subtitle_9u1ba","labelWrapper":"circular-progress-bar__labelWrapper_9u1ba","label":"circular-progress-bar__label_9u1ba","typography":"circular-progress-bar__typography_9u1ba","size-144":"circular-progress-bar__size-144_9u1ba","size-128":"circular-progress-bar__size-128_9u1ba","size-80":"circular-progress-bar__size-80_9u1ba","size-64":"circular-progress-bar__size-64_9u1ba","size-48":"circular-progress-bar__size-48_9u1ba","size-24":"circular-progress-bar__size-24_9u1ba","backgroundCircle":"circular-progress-bar__backgroundCircle_9u1ba","progressCircle":"circular-progress-bar__progressCircle_9u1ba","positive":"circular-progress-bar__positive_9u1ba","negative":"circular-progress-bar__negative_9u1ba","stroke":"circular-progress-bar__stroke_9u1ba","iconWrapper":"circular-progress-bar__iconWrapper_9u1ba","icon-tertiary":"circular-progress-bar__icon-tertiary_9u1ba","icon-positive":"circular-progress-bar__icon-positive_9u1ba","icon-negative":"circular-progress-bar__icon-negative_9u1ba","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_9u1ba","icon-primary":"circular-progress-bar__icon-primary_9u1ba","icon-secondary":"circular-progress-bar__icon-secondary_9u1ba","icon":"circular-progress-bar__icon_9u1ba"};
16
+ var styles = {"component":"circular-progress-bar__component_1tzep","bg-positive":"circular-progress-bar__bg-positive_1tzep","bg-negative":"circular-progress-bar__bg-negative_1tzep","svg":"circular-progress-bar__svg_1tzep","title":"circular-progress-bar__title_1tzep","subtitle":"circular-progress-bar__subtitle_1tzep","labelWrapper":"circular-progress-bar__labelWrapper_1tzep","label":"circular-progress-bar__label_1tzep","typography":"circular-progress-bar__typography_1tzep","size-144":"circular-progress-bar__size-144_1tzep","size-128":"circular-progress-bar__size-128_1tzep","size-80":"circular-progress-bar__size-80_1tzep","size-64":"circular-progress-bar__size-64_1tzep","size-48":"circular-progress-bar__size-48_1tzep","size-24":"circular-progress-bar__size-24_1tzep","backgroundCircle":"circular-progress-bar__backgroundCircle_1tzep","progressCircle":"circular-progress-bar__progressCircle_1tzep","positive":"circular-progress-bar__positive_1tzep","negative":"circular-progress-bar__negative_1tzep","stroke":"circular-progress-bar__stroke_1tzep","iconWrapper":"circular-progress-bar__iconWrapper_1tzep","icon-tertiary":"circular-progress-bar__icon-tertiary_1tzep","icon-positive":"circular-progress-bar__icon-positive_1tzep","icon-negative":"circular-progress-bar__icon-negative_1tzep","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1tzep","icon-primary":"circular-progress-bar__icon-primary_1tzep","icon-secondary":"circular-progress-bar__icon-secondary_1tzep","icon":"circular-progress-bar__icon_1tzep"};
17
17
  require('./index.css')
18
18
 
19
19
  /**
package/cssm/index.module.css CHANGED
@@ -16,8 +16,10 @@
16
16
  /* Up */
17
17
 
18
18
  /* Hard up */
19
- } :root {
19
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
20
20
  --border-radius-pill: 99px;
21
+
22
+ /* новые значения, используйте их */
21
23
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
22
24
 
23
25
  /* новые значения, используйте их */
package/esm/Component.js CHANGED
@@ -4,7 +4,7 @@ import cn from 'classnames';
4
4
  import { Typography } from '@alfalab/core-components-typography/esm';
5
5
  import { STROKE, SIZES, TYPOGRAPHY_COLOR, SIZE_TO_CLASSNAME_MAP, VIEW_TITLE, VIEW_TEXT } from './consts.js';
6
6
 
7
- var styles = {"component":"circular-progress-bar__component_9u1ba","bg-positive":"circular-progress-bar__bg-positive_9u1ba","bg-negative":"circular-progress-bar__bg-negative_9u1ba","svg":"circular-progress-bar__svg_9u1ba","title":"circular-progress-bar__title_9u1ba","subtitle":"circular-progress-bar__subtitle_9u1ba","labelWrapper":"circular-progress-bar__labelWrapper_9u1ba","label":"circular-progress-bar__label_9u1ba","typography":"circular-progress-bar__typography_9u1ba","size-144":"circular-progress-bar__size-144_9u1ba","size-128":"circular-progress-bar__size-128_9u1ba","size-80":"circular-progress-bar__size-80_9u1ba","size-64":"circular-progress-bar__size-64_9u1ba","size-48":"circular-progress-bar__size-48_9u1ba","size-24":"circular-progress-bar__size-24_9u1ba","backgroundCircle":"circular-progress-bar__backgroundCircle_9u1ba","progressCircle":"circular-progress-bar__progressCircle_9u1ba","positive":"circular-progress-bar__positive_9u1ba","negative":"circular-progress-bar__negative_9u1ba","stroke":"circular-progress-bar__stroke_9u1ba","iconWrapper":"circular-progress-bar__iconWrapper_9u1ba","icon-tertiary":"circular-progress-bar__icon-tertiary_9u1ba","icon-positive":"circular-progress-bar__icon-positive_9u1ba","icon-negative":"circular-progress-bar__icon-negative_9u1ba","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_9u1ba","icon-primary":"circular-progress-bar__icon-primary_9u1ba","icon-secondary":"circular-progress-bar__icon-secondary_9u1ba","icon":"circular-progress-bar__icon_9u1ba"};
7
+ var styles = {"component":"circular-progress-bar__component_1tzep","bg-positive":"circular-progress-bar__bg-positive_1tzep","bg-negative":"circular-progress-bar__bg-negative_1tzep","svg":"circular-progress-bar__svg_1tzep","title":"circular-progress-bar__title_1tzep","subtitle":"circular-progress-bar__subtitle_1tzep","labelWrapper":"circular-progress-bar__labelWrapper_1tzep","label":"circular-progress-bar__label_1tzep","typography":"circular-progress-bar__typography_1tzep","size-144":"circular-progress-bar__size-144_1tzep","size-128":"circular-progress-bar__size-128_1tzep","size-80":"circular-progress-bar__size-80_1tzep","size-64":"circular-progress-bar__size-64_1tzep","size-48":"circular-progress-bar__size-48_1tzep","size-24":"circular-progress-bar__size-24_1tzep","backgroundCircle":"circular-progress-bar__backgroundCircle_1tzep","progressCircle":"circular-progress-bar__progressCircle_1tzep","positive":"circular-progress-bar__positive_1tzep","negative":"circular-progress-bar__negative_1tzep","stroke":"circular-progress-bar__stroke_1tzep","iconWrapper":"circular-progress-bar__iconWrapper_1tzep","icon-tertiary":"circular-progress-bar__icon-tertiary_1tzep","icon-positive":"circular-progress-bar__icon-positive_1tzep","icon-negative":"circular-progress-bar__icon-negative_1tzep","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1tzep","icon-primary":"circular-progress-bar__icon-primary_1tzep","icon-secondary":"circular-progress-bar__icon-secondary_1tzep","icon":"circular-progress-bar__icon_1tzep"};
8
8
  require('./index.css')
9
9
 
10
10
  /**
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1h9sg */
1
+ /* hash: 19xt6 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-500: #babbc2;
@@ -17,8 +17,10 @@
17
17
  /* Up */
18
18
 
19
19
  /* Hard up */
20
- } :root {
20
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
21
21
  --border-radius-pill: 99px;
22
+
23
+ /* новые значения, используйте их */
22
24
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
23
25
 
24
26
  /* новые значения, используйте их */
@@ -39,135 +41,135 @@
39
41
  /* theme */
40
42
  --circular-progress-bar-font-family: var(--font-family-system);
41
43
  --circular-progress-bar-font-weight: 600;
42
- } .circular-progress-bar__component_9u1ba {
44
+ } .circular-progress-bar__component_1tzep {
43
45
  position: relative;
44
46
  display: flex;
45
47
  justify-content: center;
46
48
  align-items: center;
47
49
  border-radius: var(--border-radius-pill)
48
- } .circular-progress-bar__component_9u1ba.circular-progress-bar__bg-positive_9u1ba {
50
+ } .circular-progress-bar__component_1tzep.circular-progress-bar__bg-positive_1tzep {
49
51
  background: var(--circular-progress-bar-positive-color);
50
- } .circular-progress-bar__component_9u1ba.circular-progress-bar__bg-negative_9u1ba {
52
+ } .circular-progress-bar__component_1tzep.circular-progress-bar__bg-negative_1tzep {
51
53
  background: var(--circular-progress-bar-negative-color);
52
- } .circular-progress-bar__svg_9u1ba {
54
+ } .circular-progress-bar__svg_1tzep {
53
55
  display: block;
54
56
  width: 100%;
55
- } .circular-progress-bar__title_9u1ba,
56
- .circular-progress-bar__subtitle_9u1ba {
57
+ } .circular-progress-bar__title_1tzep,
58
+ .circular-progress-bar__subtitle_1tzep {
57
59
  overflow: hidden;
58
60
  word-break: break-word;
59
61
  white-space: nowrap;
60
62
  text-overflow: ellipsis;
61
63
  margin: 0 6px;
62
- } .circular-progress-bar__subtitle_9u1ba {
64
+ } .circular-progress-bar__subtitle_1tzep {
63
65
  max-height: 40px;
64
- } .circular-progress-bar__labelWrapper_9u1ba {
66
+ } .circular-progress-bar__labelWrapper_1tzep {
65
67
  text-align: center;
66
68
  position: absolute;
67
69
  top: 50%;
68
70
  left: 50%;
69
71
  width: 100%;
70
72
  transform: translate(-50%, -50%)
71
- } .circular-progress-bar__labelWrapper_9u1ba.circular-progress-bar__label_9u1ba {
73
+ } .circular-progress-bar__labelWrapper_1tzep.circular-progress-bar__label_1tzep {
72
74
  display: flex;
73
75
  align-items: center;
74
76
  justify-content: center;
75
- } .circular-progress-bar__typography_9u1ba {
77
+ } .circular-progress-bar__typography_1tzep {
76
78
  font-feature-settings: 'ss01';
77
79
  font-weight: var(--circular-progress-bar-font-weight);
78
80
  font-family: var(--circular-progress-bar-font-family);
79
- } .circular-progress-bar__size-144_9u1ba {
81
+ } .circular-progress-bar__size-144_1tzep {
80
82
  width: 144px;
81
83
  height: 144px
82
- } .circular-progress-bar__size-144_9u1ba .circular-progress-bar__labelWrapper_9u1ba {
84
+ } .circular-progress-bar__size-144_1tzep .circular-progress-bar__labelWrapper_1tzep {
83
85
  max-width: 128px;
84
- } .circular-progress-bar__size-144_9u1ba .circular-progress-bar__title_9u1ba {
86
+ } .circular-progress-bar__size-144_1tzep .circular-progress-bar__title_1tzep {
85
87
  max-height: 32px;
86
- } .circular-progress-bar__size-128_9u1ba {
88
+ } .circular-progress-bar__size-128_1tzep {
87
89
  width: 128px;
88
90
  height: 128px
89
- } .circular-progress-bar__size-128_9u1ba .circular-progress-bar__labelWrapper_9u1ba {
91
+ } .circular-progress-bar__size-128_1tzep .circular-progress-bar__labelWrapper_1tzep {
90
92
  max-width: 108px;
91
- } .circular-progress-bar__size-128_9u1ba .circular-progress-bar__title_9u1ba {
93
+ } .circular-progress-bar__size-128_1tzep .circular-progress-bar__title_1tzep {
92
94
  max-height: 32px;
93
- } .circular-progress-bar__size-80_9u1ba {
95
+ } .circular-progress-bar__size-80_1tzep {
94
96
  width: 80px;
95
97
  height: 80px
96
- } .circular-progress-bar__size-80_9u1ba .circular-progress-bar__labelWrapper_9u1ba {
98
+ } .circular-progress-bar__size-80_1tzep .circular-progress-bar__labelWrapper_1tzep {
97
99
  max-width: 64px;
98
- } .circular-progress-bar__size-80_9u1ba .circular-progress-bar__title_9u1ba {
100
+ } .circular-progress-bar__size-80_1tzep .circular-progress-bar__title_1tzep {
99
101
  max-height: 24px;
100
- } .circular-progress-bar__size-64_9u1ba {
102
+ } .circular-progress-bar__size-64_1tzep {
101
103
  width: 64px;
102
104
  height: 64px
103
- } .circular-progress-bar__size-64_9u1ba .circular-progress-bar__labelWrapper_9u1ba {
105
+ } .circular-progress-bar__size-64_1tzep .circular-progress-bar__labelWrapper_1tzep {
104
106
  max-width: 48px;
105
- } .circular-progress-bar__size-64_9u1ba .circular-progress-bar__title_9u1ba {
107
+ } .circular-progress-bar__size-64_1tzep .circular-progress-bar__title_1tzep {
106
108
  max-height: 16px;
107
109
  margin: 0;
108
- } .circular-progress-bar__size-48_9u1ba {
110
+ } .circular-progress-bar__size-48_1tzep {
109
111
  width: 48px;
110
112
  height: 48px
111
- } .circular-progress-bar__size-48_9u1ba .circular-progress-bar__labelWrapper_9u1ba {
113
+ } .circular-progress-bar__size-48_1tzep .circular-progress-bar__labelWrapper_1tzep {
112
114
  max-width: 40px;
113
- } .circular-progress-bar__size-48_9u1ba .circular-progress-bar__title_9u1ba {
115
+ } .circular-progress-bar__size-48_1tzep .circular-progress-bar__title_1tzep {
114
116
  max-height: 16px;
115
117
  margin: 0;
116
- } .circular-progress-bar__size-24_9u1ba {
118
+ } .circular-progress-bar__size-24_1tzep {
117
119
  width: 24px;
118
120
  height: 24px
119
- } .circular-progress-bar__size-24_9u1ba .circular-progress-bar__labelWrapper_9u1ba {
121
+ } .circular-progress-bar__size-24_1tzep .circular-progress-bar__labelWrapper_1tzep {
120
122
  max-width: 24px;
121
- } .circular-progress-bar__backgroundCircle_9u1ba,
122
- .circular-progress-bar__progressCircle_9u1ba {
123
+ } .circular-progress-bar__backgroundCircle_1tzep,
124
+ .circular-progress-bar__progressCircle_1tzep {
123
125
  width: 100%;
124
126
  height: 100%;
125
127
  fill: transparent;
126
- } .circular-progress-bar__positive_9u1ba {
128
+ } .circular-progress-bar__positive_1tzep {
127
129
  stroke: var(--circular-progress-bar-positive-color);
128
- } .circular-progress-bar__negative_9u1ba {
130
+ } .circular-progress-bar__negative_1tzep {
129
131
  stroke: var(--circular-progress-bar-negative-color);
130
- } .circular-progress-bar__backgroundCircle_9u1ba {
132
+ } .circular-progress-bar__backgroundCircle_1tzep {
131
133
  stroke: var(--circular-progress-bar-stroke-color)
132
- } .circular-progress-bar__backgroundCircle_9u1ba.circular-progress-bar__stroke_9u1ba {
134
+ } .circular-progress-bar__backgroundCircle_1tzep.circular-progress-bar__stroke_1tzep {
133
135
  stroke: transparent;
134
- } .circular-progress-bar__progressCircle_9u1ba {
136
+ } .circular-progress-bar__progressCircle_1tzep {
135
137
  stroke-linecap: round;
136
- } .circular-progress-bar__iconWrapper_9u1ba {
138
+ } .circular-progress-bar__iconWrapper_1tzep {
137
139
  display: flex;
138
140
  align-items: center;
139
141
  justify-content: center
140
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__size-144_9u1ba {
142
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__size-144_1tzep {
141
143
  max-width: 64px;
142
144
  max-height: 64px;
143
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__size-128_9u1ba {
145
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__size-128_1tzep {
144
146
  max-width: 64px;
145
147
  max-height: 64px;
146
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__size-80_9u1ba {
148
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__size-80_1tzep {
147
149
  max-width: 48px;
148
150
  max-height: 48px;
149
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__size-64_9u1ba {
151
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__size-64_1tzep {
150
152
  max-width: 36px;
151
153
  max-height: 36px;
152
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__size-48_9u1ba {
154
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__size-48_1tzep {
153
155
  max-width: 24px;
154
156
  max-height: 24px;
155
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__size-24_9u1ba {
157
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__size-24_1tzep {
156
158
  max-width: 16px;
157
159
  max-height: 16px;
158
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__icon-tertiary_9u1ba {
160
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__icon-tertiary_1tzep {
159
161
  color: var(--color-light-neutral-500);
160
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__icon-positive_9u1ba {
162
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__icon-positive_1tzep {
161
163
  color: var(--color-light-status-positive);
162
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__icon-negative_9u1ba {
164
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__icon-negative_1tzep {
163
165
  color: var(--color-light-status-negative);
164
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__icon-primary-inverted_9u1ba {
166
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__icon-primary-inverted_1tzep {
165
167
  color: var(--color-light-neutral-translucent-1300-inverted);
166
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__icon-primary_9u1ba {
168
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__icon-primary_1tzep {
167
169
  color: var(--color-light-neutral-translucent-1300);
168
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__icon-secondary_9u1ba {
170
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__icon-secondary_1tzep {
169
171
  color: var(--color-light-neutral-700);
170
- } .circular-progress-bar__icon_9u1ba {
172
+ } .circular-progress-bar__icon_1tzep {
171
173
  width: 100%;
172
174
  height: 100%;
173
175
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1h9sg */
1
+ /* hash: 19xt6 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-500: #babbc2;
@@ -17,8 +17,10 @@
17
17
  /* Up */
18
18
 
19
19
  /* Hard up */
20
- } :root {
20
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
21
21
  --border-radius-pill: 99px;
22
+
23
+ /* новые значения, используйте их */
22
24
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
23
25
 
24
26
  /* новые значения, используйте их */
@@ -39,135 +41,135 @@
39
41
  /* theme */
40
42
  --circular-progress-bar-font-family: var(--font-family-system);
41
43
  --circular-progress-bar-font-weight: 600;
42
- } .circular-progress-bar__component_9u1ba {
44
+ } .circular-progress-bar__component_1tzep {
43
45
  position: relative;
44
46
  display: flex;
45
47
  justify-content: center;
46
48
  align-items: center;
47
49
  border-radius: var(--border-radius-pill)
48
- } .circular-progress-bar__component_9u1ba.circular-progress-bar__bg-positive_9u1ba {
50
+ } .circular-progress-bar__component_1tzep.circular-progress-bar__bg-positive_1tzep {
49
51
  background: var(--circular-progress-bar-positive-color);
50
- } .circular-progress-bar__component_9u1ba.circular-progress-bar__bg-negative_9u1ba {
52
+ } .circular-progress-bar__component_1tzep.circular-progress-bar__bg-negative_1tzep {
51
53
  background: var(--circular-progress-bar-negative-color);
52
- } .circular-progress-bar__svg_9u1ba {
54
+ } .circular-progress-bar__svg_1tzep {
53
55
  display: block;
54
56
  width: 100%;
55
- } .circular-progress-bar__title_9u1ba,
56
- .circular-progress-bar__subtitle_9u1ba {
57
+ } .circular-progress-bar__title_1tzep,
58
+ .circular-progress-bar__subtitle_1tzep {
57
59
  overflow: hidden;
58
60
  word-break: break-word;
59
61
  white-space: nowrap;
60
62
  text-overflow: ellipsis;
61
63
  margin: 0 6px;
62
- } .circular-progress-bar__subtitle_9u1ba {
64
+ } .circular-progress-bar__subtitle_1tzep {
63
65
  max-height: 40px;
64
- } .circular-progress-bar__labelWrapper_9u1ba {
66
+ } .circular-progress-bar__labelWrapper_1tzep {
65
67
  text-align: center;
66
68
  position: absolute;
67
69
  top: 50%;
68
70
  left: 50%;
69
71
  width: 100%;
70
72
  transform: translate(-50%, -50%)
71
- } .circular-progress-bar__labelWrapper_9u1ba.circular-progress-bar__label_9u1ba {
73
+ } .circular-progress-bar__labelWrapper_1tzep.circular-progress-bar__label_1tzep {
72
74
  display: flex;
73
75
  align-items: center;
74
76
  justify-content: center;
75
- } .circular-progress-bar__typography_9u1ba {
77
+ } .circular-progress-bar__typography_1tzep {
76
78
  font-feature-settings: 'ss01';
77
79
  font-weight: var(--circular-progress-bar-font-weight);
78
80
  font-family: var(--circular-progress-bar-font-family);
79
- } .circular-progress-bar__size-144_9u1ba {
81
+ } .circular-progress-bar__size-144_1tzep {
80
82
  width: 144px;
81
83
  height: 144px
82
- } .circular-progress-bar__size-144_9u1ba .circular-progress-bar__labelWrapper_9u1ba {
84
+ } .circular-progress-bar__size-144_1tzep .circular-progress-bar__labelWrapper_1tzep {
83
85
  max-width: 128px;
84
- } .circular-progress-bar__size-144_9u1ba .circular-progress-bar__title_9u1ba {
86
+ } .circular-progress-bar__size-144_1tzep .circular-progress-bar__title_1tzep {
85
87
  max-height: 32px;
86
- } .circular-progress-bar__size-128_9u1ba {
88
+ } .circular-progress-bar__size-128_1tzep {
87
89
  width: 128px;
88
90
  height: 128px
89
- } .circular-progress-bar__size-128_9u1ba .circular-progress-bar__labelWrapper_9u1ba {
91
+ } .circular-progress-bar__size-128_1tzep .circular-progress-bar__labelWrapper_1tzep {
90
92
  max-width: 108px;
91
- } .circular-progress-bar__size-128_9u1ba .circular-progress-bar__title_9u1ba {
93
+ } .circular-progress-bar__size-128_1tzep .circular-progress-bar__title_1tzep {
92
94
  max-height: 32px;
93
- } .circular-progress-bar__size-80_9u1ba {
95
+ } .circular-progress-bar__size-80_1tzep {
94
96
  width: 80px;
95
97
  height: 80px
96
- } .circular-progress-bar__size-80_9u1ba .circular-progress-bar__labelWrapper_9u1ba {
98
+ } .circular-progress-bar__size-80_1tzep .circular-progress-bar__labelWrapper_1tzep {
97
99
  max-width: 64px;
98
- } .circular-progress-bar__size-80_9u1ba .circular-progress-bar__title_9u1ba {
100
+ } .circular-progress-bar__size-80_1tzep .circular-progress-bar__title_1tzep {
99
101
  max-height: 24px;
100
- } .circular-progress-bar__size-64_9u1ba {
102
+ } .circular-progress-bar__size-64_1tzep {
101
103
  width: 64px;
102
104
  height: 64px
103
- } .circular-progress-bar__size-64_9u1ba .circular-progress-bar__labelWrapper_9u1ba {
105
+ } .circular-progress-bar__size-64_1tzep .circular-progress-bar__labelWrapper_1tzep {
104
106
  max-width: 48px;
105
- } .circular-progress-bar__size-64_9u1ba .circular-progress-bar__title_9u1ba {
107
+ } .circular-progress-bar__size-64_1tzep .circular-progress-bar__title_1tzep {
106
108
  max-height: 16px;
107
109
  margin: 0;
108
- } .circular-progress-bar__size-48_9u1ba {
110
+ } .circular-progress-bar__size-48_1tzep {
109
111
  width: 48px;
110
112
  height: 48px
111
- } .circular-progress-bar__size-48_9u1ba .circular-progress-bar__labelWrapper_9u1ba {
113
+ } .circular-progress-bar__size-48_1tzep .circular-progress-bar__labelWrapper_1tzep {
112
114
  max-width: 40px;
113
- } .circular-progress-bar__size-48_9u1ba .circular-progress-bar__title_9u1ba {
115
+ } .circular-progress-bar__size-48_1tzep .circular-progress-bar__title_1tzep {
114
116
  max-height: 16px;
115
117
  margin: 0;
116
- } .circular-progress-bar__size-24_9u1ba {
118
+ } .circular-progress-bar__size-24_1tzep {
117
119
  width: 24px;
118
120
  height: 24px
119
- } .circular-progress-bar__size-24_9u1ba .circular-progress-bar__labelWrapper_9u1ba {
121
+ } .circular-progress-bar__size-24_1tzep .circular-progress-bar__labelWrapper_1tzep {
120
122
  max-width: 24px;
121
- } .circular-progress-bar__backgroundCircle_9u1ba,
122
- .circular-progress-bar__progressCircle_9u1ba {
123
+ } .circular-progress-bar__backgroundCircle_1tzep,
124
+ .circular-progress-bar__progressCircle_1tzep {
123
125
  width: 100%;
124
126
  height: 100%;
125
127
  fill: transparent;
126
- } .circular-progress-bar__positive_9u1ba {
128
+ } .circular-progress-bar__positive_1tzep {
127
129
  stroke: var(--circular-progress-bar-positive-color);
128
- } .circular-progress-bar__negative_9u1ba {
130
+ } .circular-progress-bar__negative_1tzep {
129
131
  stroke: var(--circular-progress-bar-negative-color);
130
- } .circular-progress-bar__backgroundCircle_9u1ba {
132
+ } .circular-progress-bar__backgroundCircle_1tzep {
131
133
  stroke: var(--circular-progress-bar-stroke-color)
132
- } .circular-progress-bar__backgroundCircle_9u1ba.circular-progress-bar__stroke_9u1ba {
134
+ } .circular-progress-bar__backgroundCircle_1tzep.circular-progress-bar__stroke_1tzep {
133
135
  stroke: transparent;
134
- } .circular-progress-bar__progressCircle_9u1ba {
136
+ } .circular-progress-bar__progressCircle_1tzep {
135
137
  stroke-linecap: round;
136
- } .circular-progress-bar__iconWrapper_9u1ba {
138
+ } .circular-progress-bar__iconWrapper_1tzep {
137
139
  display: flex;
138
140
  align-items: center;
139
141
  justify-content: center
140
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__size-144_9u1ba {
142
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__size-144_1tzep {
141
143
  max-width: 64px;
142
144
  max-height: 64px;
143
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__size-128_9u1ba {
145
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__size-128_1tzep {
144
146
  max-width: 64px;
145
147
  max-height: 64px;
146
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__size-80_9u1ba {
148
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__size-80_1tzep {
147
149
  max-width: 48px;
148
150
  max-height: 48px;
149
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__size-64_9u1ba {
151
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__size-64_1tzep {
150
152
  max-width: 36px;
151
153
  max-height: 36px;
152
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__size-48_9u1ba {
154
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__size-48_1tzep {
153
155
  max-width: 24px;
154
156
  max-height: 24px;
155
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__size-24_9u1ba {
157
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__size-24_1tzep {
156
158
  max-width: 16px;
157
159
  max-height: 16px;
158
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__icon-tertiary_9u1ba {
160
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__icon-tertiary_1tzep {
159
161
  color: var(--color-light-neutral-500);
160
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__icon-positive_9u1ba {
162
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__icon-positive_1tzep {
161
163
  color: var(--color-light-status-positive);
162
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__icon-negative_9u1ba {
164
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__icon-negative_1tzep {
163
165
  color: var(--color-light-status-negative);
164
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__icon-primary-inverted_9u1ba {
166
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__icon-primary-inverted_1tzep {
165
167
  color: var(--color-light-neutral-translucent-1300-inverted);
166
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__icon-primary_9u1ba {
168
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__icon-primary_1tzep {
167
169
  color: var(--color-light-neutral-translucent-1300);
168
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__icon-secondary_9u1ba {
170
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__icon-secondary_1tzep {
169
171
  color: var(--color-light-neutral-700);
170
- } .circular-progress-bar__icon_9u1ba {
172
+ } .circular-progress-bar__icon_1tzep {
171
173
  width: 100%;
172
174
  height: 100%;
173
175
  }
package/modern/Component.js CHANGED
@@ -3,7 +3,7 @@ import cn from 'classnames';
3
3
  import { Typography } from '@alfalab/core-components-typography/modern';
4
4
  import { STROKE, SIZES, TYPOGRAPHY_COLOR, SIZE_TO_CLASSNAME_MAP, VIEW_TITLE, VIEW_TEXT } from './consts.js';
5
5
 
6
- const styles = {"component":"circular-progress-bar__component_9u1ba","bg-positive":"circular-progress-bar__bg-positive_9u1ba","bg-negative":"circular-progress-bar__bg-negative_9u1ba","svg":"circular-progress-bar__svg_9u1ba","title":"circular-progress-bar__title_9u1ba","subtitle":"circular-progress-bar__subtitle_9u1ba","labelWrapper":"circular-progress-bar__labelWrapper_9u1ba","label":"circular-progress-bar__label_9u1ba","typography":"circular-progress-bar__typography_9u1ba","size-144":"circular-progress-bar__size-144_9u1ba","size-128":"circular-progress-bar__size-128_9u1ba","size-80":"circular-progress-bar__size-80_9u1ba","size-64":"circular-progress-bar__size-64_9u1ba","size-48":"circular-progress-bar__size-48_9u1ba","size-24":"circular-progress-bar__size-24_9u1ba","backgroundCircle":"circular-progress-bar__backgroundCircle_9u1ba","progressCircle":"circular-progress-bar__progressCircle_9u1ba","positive":"circular-progress-bar__positive_9u1ba","negative":"circular-progress-bar__negative_9u1ba","stroke":"circular-progress-bar__stroke_9u1ba","iconWrapper":"circular-progress-bar__iconWrapper_9u1ba","icon-tertiary":"circular-progress-bar__icon-tertiary_9u1ba","icon-positive":"circular-progress-bar__icon-positive_9u1ba","icon-negative":"circular-progress-bar__icon-negative_9u1ba","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_9u1ba","icon-primary":"circular-progress-bar__icon-primary_9u1ba","icon-secondary":"circular-progress-bar__icon-secondary_9u1ba","icon":"circular-progress-bar__icon_9u1ba"};
6
+ const styles = {"component":"circular-progress-bar__component_1tzep","bg-positive":"circular-progress-bar__bg-positive_1tzep","bg-negative":"circular-progress-bar__bg-negative_1tzep","svg":"circular-progress-bar__svg_1tzep","title":"circular-progress-bar__title_1tzep","subtitle":"circular-progress-bar__subtitle_1tzep","labelWrapper":"circular-progress-bar__labelWrapper_1tzep","label":"circular-progress-bar__label_1tzep","typography":"circular-progress-bar__typography_1tzep","size-144":"circular-progress-bar__size-144_1tzep","size-128":"circular-progress-bar__size-128_1tzep","size-80":"circular-progress-bar__size-80_1tzep","size-64":"circular-progress-bar__size-64_1tzep","size-48":"circular-progress-bar__size-48_1tzep","size-24":"circular-progress-bar__size-24_1tzep","backgroundCircle":"circular-progress-bar__backgroundCircle_1tzep","progressCircle":"circular-progress-bar__progressCircle_1tzep","positive":"circular-progress-bar__positive_1tzep","negative":"circular-progress-bar__negative_1tzep","stroke":"circular-progress-bar__stroke_1tzep","iconWrapper":"circular-progress-bar__iconWrapper_1tzep","icon-tertiary":"circular-progress-bar__icon-tertiary_1tzep","icon-positive":"circular-progress-bar__icon-positive_1tzep","icon-negative":"circular-progress-bar__icon-negative_1tzep","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1tzep","icon-primary":"circular-progress-bar__icon-primary_1tzep","icon-secondary":"circular-progress-bar__icon-secondary_1tzep","icon":"circular-progress-bar__icon_1tzep"};
7
7
  require('./index.css')
8
8
 
9
9
  /**
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1h9sg */
1
+ /* hash: 19xt6 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-500: #babbc2;
@@ -17,8 +17,10 @@
17
17
  /* Up */
18
18
 
19
19
  /* Hard up */
20
- } :root {
20
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
21
21
  --border-radius-pill: 99px;
22
+
23
+ /* новые значения, используйте их */
22
24
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
23
25
 
24
26
  /* новые значения, используйте их */
@@ -39,135 +41,135 @@
39
41
  /* theme */
40
42
  --circular-progress-bar-font-family: var(--font-family-system);
41
43
  --circular-progress-bar-font-weight: 600;
42
- } .circular-progress-bar__component_9u1ba {
44
+ } .circular-progress-bar__component_1tzep {
43
45
  position: relative;
44
46
  display: flex;
45
47
  justify-content: center;
46
48
  align-items: center;
47
49
  border-radius: var(--border-radius-pill)
48
- } .circular-progress-bar__component_9u1ba.circular-progress-bar__bg-positive_9u1ba {
50
+ } .circular-progress-bar__component_1tzep.circular-progress-bar__bg-positive_1tzep {
49
51
  background: var(--circular-progress-bar-positive-color);
50
- } .circular-progress-bar__component_9u1ba.circular-progress-bar__bg-negative_9u1ba {
52
+ } .circular-progress-bar__component_1tzep.circular-progress-bar__bg-negative_1tzep {
51
53
  background: var(--circular-progress-bar-negative-color);
52
- } .circular-progress-bar__svg_9u1ba {
54
+ } .circular-progress-bar__svg_1tzep {
53
55
  display: block;
54
56
  width: 100%;
55
- } .circular-progress-bar__title_9u1ba,
56
- .circular-progress-bar__subtitle_9u1ba {
57
+ } .circular-progress-bar__title_1tzep,
58
+ .circular-progress-bar__subtitle_1tzep {
57
59
  overflow: hidden;
58
60
  word-break: break-word;
59
61
  white-space: nowrap;
60
62
  text-overflow: ellipsis;
61
63
  margin: 0 6px;
62
- } .circular-progress-bar__subtitle_9u1ba {
64
+ } .circular-progress-bar__subtitle_1tzep {
63
65
  max-height: 40px;
64
- } .circular-progress-bar__labelWrapper_9u1ba {
66
+ } .circular-progress-bar__labelWrapper_1tzep {
65
67
  text-align: center;
66
68
  position: absolute;
67
69
  top: 50%;
68
70
  left: 50%;
69
71
  width: 100%;
70
72
  transform: translate(-50%, -50%)
71
- } .circular-progress-bar__labelWrapper_9u1ba.circular-progress-bar__label_9u1ba {
73
+ } .circular-progress-bar__labelWrapper_1tzep.circular-progress-bar__label_1tzep {
72
74
  display: flex;
73
75
  align-items: center;
74
76
  justify-content: center;
75
- } .circular-progress-bar__typography_9u1ba {
77
+ } .circular-progress-bar__typography_1tzep {
76
78
  font-feature-settings: 'ss01';
77
79
  font-weight: var(--circular-progress-bar-font-weight);
78
80
  font-family: var(--circular-progress-bar-font-family);
79
- } .circular-progress-bar__size-144_9u1ba {
81
+ } .circular-progress-bar__size-144_1tzep {
80
82
  width: 144px;
81
83
  height: 144px
82
- } .circular-progress-bar__size-144_9u1ba .circular-progress-bar__labelWrapper_9u1ba {
84
+ } .circular-progress-bar__size-144_1tzep .circular-progress-bar__labelWrapper_1tzep {
83
85
  max-width: 128px;
84
- } .circular-progress-bar__size-144_9u1ba .circular-progress-bar__title_9u1ba {
86
+ } .circular-progress-bar__size-144_1tzep .circular-progress-bar__title_1tzep {
85
87
  max-height: 32px;
86
- } .circular-progress-bar__size-128_9u1ba {
88
+ } .circular-progress-bar__size-128_1tzep {
87
89
  width: 128px;
88
90
  height: 128px
89
- } .circular-progress-bar__size-128_9u1ba .circular-progress-bar__labelWrapper_9u1ba {
91
+ } .circular-progress-bar__size-128_1tzep .circular-progress-bar__labelWrapper_1tzep {
90
92
  max-width: 108px;
91
- } .circular-progress-bar__size-128_9u1ba .circular-progress-bar__title_9u1ba {
93
+ } .circular-progress-bar__size-128_1tzep .circular-progress-bar__title_1tzep {
92
94
  max-height: 32px;
93
- } .circular-progress-bar__size-80_9u1ba {
95
+ } .circular-progress-bar__size-80_1tzep {
94
96
  width: 80px;
95
97
  height: 80px
96
- } .circular-progress-bar__size-80_9u1ba .circular-progress-bar__labelWrapper_9u1ba {
98
+ } .circular-progress-bar__size-80_1tzep .circular-progress-bar__labelWrapper_1tzep {
97
99
  max-width: 64px;
98
- } .circular-progress-bar__size-80_9u1ba .circular-progress-bar__title_9u1ba {
100
+ } .circular-progress-bar__size-80_1tzep .circular-progress-bar__title_1tzep {
99
101
  max-height: 24px;
100
- } .circular-progress-bar__size-64_9u1ba {
102
+ } .circular-progress-bar__size-64_1tzep {
101
103
  width: 64px;
102
104
  height: 64px
103
- } .circular-progress-bar__size-64_9u1ba .circular-progress-bar__labelWrapper_9u1ba {
105
+ } .circular-progress-bar__size-64_1tzep .circular-progress-bar__labelWrapper_1tzep {
104
106
  max-width: 48px;
105
- } .circular-progress-bar__size-64_9u1ba .circular-progress-bar__title_9u1ba {
107
+ } .circular-progress-bar__size-64_1tzep .circular-progress-bar__title_1tzep {
106
108
  max-height: 16px;
107
109
  margin: 0;
108
- } .circular-progress-bar__size-48_9u1ba {
110
+ } .circular-progress-bar__size-48_1tzep {
109
111
  width: 48px;
110
112
  height: 48px
111
- } .circular-progress-bar__size-48_9u1ba .circular-progress-bar__labelWrapper_9u1ba {
113
+ } .circular-progress-bar__size-48_1tzep .circular-progress-bar__labelWrapper_1tzep {
112
114
  max-width: 40px;
113
- } .circular-progress-bar__size-48_9u1ba .circular-progress-bar__title_9u1ba {
115
+ } .circular-progress-bar__size-48_1tzep .circular-progress-bar__title_1tzep {
114
116
  max-height: 16px;
115
117
  margin: 0;
116
- } .circular-progress-bar__size-24_9u1ba {
118
+ } .circular-progress-bar__size-24_1tzep {
117
119
  width: 24px;
118
120
  height: 24px
119
- } .circular-progress-bar__size-24_9u1ba .circular-progress-bar__labelWrapper_9u1ba {
121
+ } .circular-progress-bar__size-24_1tzep .circular-progress-bar__labelWrapper_1tzep {
120
122
  max-width: 24px;
121
- } .circular-progress-bar__backgroundCircle_9u1ba,
122
- .circular-progress-bar__progressCircle_9u1ba {
123
+ } .circular-progress-bar__backgroundCircle_1tzep,
124
+ .circular-progress-bar__progressCircle_1tzep {
123
125
  width: 100%;
124
126
  height: 100%;
125
127
  fill: transparent;
126
- } .circular-progress-bar__positive_9u1ba {
128
+ } .circular-progress-bar__positive_1tzep {
127
129
  stroke: var(--circular-progress-bar-positive-color);
128
- } .circular-progress-bar__negative_9u1ba {
130
+ } .circular-progress-bar__negative_1tzep {
129
131
  stroke: var(--circular-progress-bar-negative-color);
130
- } .circular-progress-bar__backgroundCircle_9u1ba {
132
+ } .circular-progress-bar__backgroundCircle_1tzep {
131
133
  stroke: var(--circular-progress-bar-stroke-color)
132
- } .circular-progress-bar__backgroundCircle_9u1ba.circular-progress-bar__stroke_9u1ba {
134
+ } .circular-progress-bar__backgroundCircle_1tzep.circular-progress-bar__stroke_1tzep {
133
135
  stroke: transparent;
134
- } .circular-progress-bar__progressCircle_9u1ba {
136
+ } .circular-progress-bar__progressCircle_1tzep {
135
137
  stroke-linecap: round;
136
- } .circular-progress-bar__iconWrapper_9u1ba {
138
+ } .circular-progress-bar__iconWrapper_1tzep {
137
139
  display: flex;
138
140
  align-items: center;
139
141
  justify-content: center
140
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__size-144_9u1ba {
142
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__size-144_1tzep {
141
143
  max-width: 64px;
142
144
  max-height: 64px;
143
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__size-128_9u1ba {
145
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__size-128_1tzep {
144
146
  max-width: 64px;
145
147
  max-height: 64px;
146
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__size-80_9u1ba {
148
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__size-80_1tzep {
147
149
  max-width: 48px;
148
150
  max-height: 48px;
149
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__size-64_9u1ba {
151
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__size-64_1tzep {
150
152
  max-width: 36px;
151
153
  max-height: 36px;
152
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__size-48_9u1ba {
154
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__size-48_1tzep {
153
155
  max-width: 24px;
154
156
  max-height: 24px;
155
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__size-24_9u1ba {
157
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__size-24_1tzep {
156
158
  max-width: 16px;
157
159
  max-height: 16px;
158
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__icon-tertiary_9u1ba {
160
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__icon-tertiary_1tzep {
159
161
  color: var(--color-light-neutral-500);
160
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__icon-positive_9u1ba {
162
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__icon-positive_1tzep {
161
163
  color: var(--color-light-status-positive);
162
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__icon-negative_9u1ba {
164
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__icon-negative_1tzep {
163
165
  color: var(--color-light-status-negative);
164
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__icon-primary-inverted_9u1ba {
166
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__icon-primary-inverted_1tzep {
165
167
  color: var(--color-light-neutral-translucent-1300-inverted);
166
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__icon-primary_9u1ba {
168
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__icon-primary_1tzep {
167
169
  color: var(--color-light-neutral-translucent-1300);
168
- } .circular-progress-bar__iconWrapper_9u1ba.circular-progress-bar__icon-secondary_9u1ba {
170
+ } .circular-progress-bar__iconWrapper_1tzep.circular-progress-bar__icon-secondary_1tzep {
169
171
  color: var(--color-light-neutral-700);
170
- } .circular-progress-bar__icon_9u1ba {
172
+ } .circular-progress-bar__icon_1tzep {
171
173
  width: 100%;
172
174
  height: 100%;
173
175
  }
package/moderncssm/Component.d.ts ADDED
@@ -0,0 +1,111 @@
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { ElementType, ReactNode } from "react";
4
+ type TypographyColor = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';
5
+ type CircularProgressBarProps = {
6
+ /**
7
+ * Уровень прогресса, %
8
+ */
9
+ value: number;
10
+ /**
11
+ * Дополнительный класс
12
+ */
13
+ className?: string;
14
+ /**
15
+ * Основной текст
16
+ */
17
+ title?: ReactNode;
18
+ /**
19
+ * Цвет контента
20
+ */
21
+ contentColor?: TypographyColor | string;
22
+ /**
23
+ * Дополнительный текст
24
+ */
25
+ subtitle?: ReactNode;
26
+ /**
27
+ * Основной текст при 100%
28
+ */
29
+ titleComplete?: ReactNode;
30
+ /**
31
+ * Дополнительный текст при 100%
32
+ */
33
+ subtitleComplete?: ReactNode;
34
+ /**
35
+ * Цвет заполнения
36
+ */
37
+ view?: 'positive' | 'negative';
38
+ /**
39
+ * Размер (xxl — 144×144px, xl — 128×128px, l — 80×80px, m — 64×64px, s — 48×48px, xs — 24×24px)
40
+ * @description xs, s, m, l, xl, xxl deprecated, используйте вместо них 24, 48, 64 , 80, 128, 144 соответственно
41
+ */
42
+ size?: 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 24 | 48 | 64 | 80 | 128 | 144;
43
+ /**
44
+ * Наличие желоба
45
+ */
46
+ stroke?: boolean;
47
+ /**
48
+ * Заливка при 100%
49
+ */
50
+ fillComplete?: boolean;
51
+ /**
52
+ * Цвет текста при 100%
53
+ */
54
+ completeTextColor?: 'primary' | 'primary-inverted' | 'positive' | 'negative';
55
+ /**
56
+ * Цвет иконки при 100%
57
+ */
58
+ completeIconColor?: 'primary-inverted' | 'positive' | 'negative' | 'tertiary';
59
+ /**
60
+ * Компонент иконки
61
+ */
62
+ icon?: ElementType<{
63
+ className?: string;
64
+ }>;
65
+ /**
66
+ * Компонент иконки при 100%
67
+ */
68
+ iconComplete?: ElementType<{
69
+ className?: string;
70
+ }>;
71
+ /**
72
+ * Направление прогресса (clockwise - по часовой стрелке, counter-clockwise - против часовой стрелки)
73
+ */
74
+ direction?: 'clockwise' | 'counter-clockwise';
75
+ /**
76
+ * Высота компонента, min = 24; max = 144
77
+ * использовать совместно с size :
78
+ * xxl от 144
79
+ * xl от 128 до 143
80
+ * l от 80 до 127
81
+ * m от 64 до 79
82
+ * s от 48 до 63
83
+ * xs от 24 до 47
84
+ */
85
+ height?: number;
86
+ /**
87
+ * Id компонента для тестов
88
+ */
89
+ dataTestId?: string;
90
+ /**
91
+ * Дочерние элементы
92
+ */
93
+ children?: ReactNode;
94
+ /**
95
+ * Цвет прогресса
96
+ */
97
+ progressStrokeColor?: string;
98
+ /**
99
+ * Цвет заливки внутри круга
100
+ */
101
+ circleColor?: string;
102
+ /**
103
+ * Цвет желоба
104
+ */
105
+ strokeColor?: string;
106
+ };
107
+ /**
108
+ * Компонент круглого прогресс бара.
109
+ */
110
+ declare const CircularProgressBar: React.FC<CircularProgressBarProps>;
111
+ export { TypographyColor, CircularProgressBarProps, CircularProgressBar };
package/moderncssm/Component.js ADDED
@@ -0,0 +1,77 @@
1
+ import React, { useMemo } from 'react';
2
+ import cn from 'classnames';
3
+ import { Typography } from '@alfalab/core-components-typography/moderncssm';
4
+ import { STROKE, SIZES, TYPOGRAPHY_COLOR, SIZE_TO_CLASSNAME_MAP, VIEW_TITLE, VIEW_TEXT } from './consts.js';
5
+ import styles from './index.module.css';
6
+
7
+ /**
8
+ * Компонент круглого прогресс бара.
9
+ */
10
+ const CircularProgressBar = ({ value, view = 'positive', size = 64, 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, strokeColor, }) => {
11
+ const memorized = useMemo(() => {
12
+ const strokeWidth = STROKE[size];
13
+ const maxProgress = 100;
14
+ const minProgress = 0;
15
+ const widthSVG = SIZES[size];
16
+ const heightSVG = SIZES[size];
17
+ const center = widthSVG / 2;
18
+ const radius = center - strokeWidth / 2;
19
+ const circumference = Math.PI * radius * 2;
20
+ const progress = Math.min(Math.max(value, minProgress), maxProgress);
21
+ const strokeDasharray = circumference.toFixed(3);
22
+ const strokeDashoffset = (((100 - progress) / 100) * circumference).toFixed(3);
23
+ return {
24
+ widthSVG,
25
+ heightSVG,
26
+ center,
27
+ radius,
28
+ strokeDasharray,
29
+ strokeDashoffset,
30
+ };
31
+ }, [value, size]);
32
+ const isComplete = value === 100;
33
+ const isCompleteTextColor = isComplete && completeTextColor;
34
+ const titleContent = titleComplete && isComplete ? titleComplete : title;
35
+ const subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;
36
+ const IconComponent = IconComplete && isComplete ? IconComplete : Icon;
37
+ const typographyContentColor = TYPOGRAPHY_COLOR.includes(contentColor)
38
+ ? contentColor
39
+ : undefined;
40
+ 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: {
41
+ ...(!typographyContentColor && { color: contentColor }),
42
+ } }, titleContent)) : (React.createElement(Typography.Text, { className: styles.title, color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', weight: 'bold', view: VIEW_TEXT[size], style: {
43
+ ...(!typographyContentColor && { color: contentColor }),
44
+ } }, titleContent));
45
+ const renderTitle = () => (typeof title === 'string' ? renderTitleString() : titleContent);
46
+ const renderSubTitle = () => typeof subtitle === 'string' ? (React.createElement(Typography.Text, { tag: 'div', className: styles.subtitle, color: isCompleteTextColor ? completeTextColor : typographyContentColor, view: 'primary-small', style: {
47
+ ...(!typographyContentColor && { color: contentColor }),
48
+ } }, subtitleContent)) : (subtitleContent);
49
+ const renderIcon = () => (React.createElement("span", { className: cn(styles.iconWrapper, styles[SIZE_TO_CLASSNAME_MAP[size]], styles.tertiary, styles[`icon-${contentColor}`], {
50
+ [styles[`icon-${completeIconColor}`]]: completeIconColor,
51
+ }) }, IconComponent && React.createElement(IconComponent, { className: styles.icon })));
52
+ const renderContent = () => Icon || (IconComplete && isComplete) ? (renderIcon()) : (React.createElement(React.Fragment, null,
53
+ SIZES[size] > 24 && renderTitle(),
54
+ SIZES[size] > 64 && renderSubTitle()));
55
+ return (React.createElement("div", { className: cn(styles.component, styles[SIZE_TO_CLASSNAME_MAP[size]], className, {
56
+ [styles[`bg-${view}`]]: fillComplete && isComplete,
57
+ }), style: {
58
+ ...(height && { height, width: height }),
59
+ ...(circleColor && { backgroundColor: circleColor }),
60
+ }, "data-test-id": dataTestId },
61
+ React.createElement("svg", { viewBox: `0 0 ${memorized.widthSVG} ${memorized.heightSVG}`, className: styles.svg, xmlns: 'http://www.w3.org/2000/svg' },
62
+ React.createElement("circle", { className: cn(styles.backgroundCircle, styles[SIZE_TO_CLASSNAME_MAP[size]], {
63
+ [styles.stroke]: !stroke,
64
+ }), style: {
65
+ ...(strokeColor && stroke && { stroke: strokeColor }),
66
+ }, cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size] }),
67
+ React.createElement("circle", { className: cn(styles.progressCircle, styles[view], styles[SIZE_TO_CLASSNAME_MAP[size]]), style: {
68
+ ...(progressStrokeColor && { stroke: progressStrokeColor }),
69
+ }, cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
70
+ ? -memorized.strokeDashoffset
71
+ : memorized.strokeDashoffset, transform: `rotate(${-90} ${memorized.center} ${memorized.center})` })),
72
+ React.createElement("div", { className: cn(styles.labelWrapper, {
73
+ [styles.label]: Icon || IconComplete,
74
+ }) }, children || renderContent())));
75
+ };
76
+
77
+ export { CircularProgressBar };
package/moderncssm/consts.d.ts ADDED
@@ -0,0 +1,72 @@
1
+ declare const SIZES: {
2
+ xs: number;
3
+ s: number;
4
+ m: number;
5
+ l: number;
6
+ xl: number;
7
+ xxl: number;
8
+ 24: number;
9
+ 48: number;
10
+ 64: number;
11
+ 80: number;
12
+ 128: number;
13
+ 144: number;
14
+ };
15
+ declare const STROKE: {
16
+ xs: number;
17
+ s: number;
18
+ m: number;
19
+ l: number;
20
+ xl: number;
21
+ xxl: number;
22
+ 24: number;
23
+ 48: number;
24
+ 64: number;
25
+ 80: number;
26
+ 128: number;
27
+ 144: number;
28
+ };
29
+ declare const VIEW_TITLE: {
30
+ readonly xs: "small";
31
+ readonly s: "small";
32
+ readonly m: "small";
33
+ readonly l: "xsmall";
34
+ readonly xl: "medium";
35
+ readonly xxl: "medium";
36
+ readonly 24: "small";
37
+ readonly 48: "small";
38
+ readonly 64: "small";
39
+ readonly 80: "xsmall";
40
+ readonly 128: "medium";
41
+ readonly 144: "medium";
42
+ };
43
+ declare const VIEW_TEXT: {
44
+ readonly xs: "secondary-small";
45
+ readonly s: "secondary-small";
46
+ readonly m: "secondary-large";
47
+ readonly l: "secondary-large";
48
+ readonly xl: "secondary-large";
49
+ readonly xxl: "secondary-large";
50
+ readonly 24: "secondary-small";
51
+ readonly 48: "secondary-small";
52
+ readonly 64: "secondary-large";
53
+ readonly 80: "secondary-large";
54
+ readonly 128: "secondary-large";
55
+ readonly 144: "secondary-large";
56
+ };
57
+ declare const TYPOGRAPHY_COLOR: string[];
58
+ declare const SIZE_TO_CLASSNAME_MAP: {
59
+ xs: string;
60
+ s: string;
61
+ m: string;
62
+ l: string;
63
+ xl: string;
64
+ xxl: string;
65
+ 24: string;
66
+ 48: string;
67
+ 64: string;
68
+ 80: string;
69
+ 128: string;
70
+ 144: string;
71
+ };
72
+ export { SIZES, STROKE, VIEW_TITLE, VIEW_TEXT, TYPOGRAPHY_COLOR, SIZE_TO_CLASSNAME_MAP };
package/moderncssm/consts.js ADDED
@@ -0,0 +1,73 @@
1
+ const SIZES = {
2
+ xs: 24,
3
+ s: 48,
4
+ m: 64,
5
+ l: 80,
6
+ xl: 128,
7
+ xxl: 144,
8
+ 24: 24,
9
+ 48: 48,
10
+ 64: 64,
11
+ 80: 80,
12
+ 128: 128,
13
+ 144: 144,
14
+ };
15
+ const STROKE = {
16
+ xs: 4,
17
+ s: 4,
18
+ m: 6,
19
+ l: 8,
20
+ xl: 10,
21
+ xxl: 12,
22
+ 24: 4,
23
+ 48: 4,
24
+ 64: 6,
25
+ 80: 8,
26
+ 128: 10,
27
+ 144: 12,
28
+ };
29
+ const VIEW_TITLE = {
30
+ xs: 'small',
31
+ s: 'small',
32
+ m: 'small',
33
+ l: 'xsmall',
34
+ xl: 'medium',
35
+ xxl: 'medium',
36
+ 24: 'small',
37
+ 48: 'small',
38
+ 64: 'small',
39
+ 80: 'xsmall',
40
+ 128: 'medium',
41
+ 144: 'medium',
42
+ };
43
+ const VIEW_TEXT = {
44
+ xs: 'secondary-small',
45
+ s: 'secondary-small',
46
+ m: 'secondary-large',
47
+ l: 'secondary-large',
48
+ xl: 'secondary-large',
49
+ xxl: 'secondary-large',
50
+ 24: 'secondary-small',
51
+ 48: 'secondary-small',
52
+ 64: 'secondary-large',
53
+ 80: 'secondary-large',
54
+ 128: 'secondary-large',
55
+ 144: 'secondary-large',
56
+ };
57
+ const TYPOGRAPHY_COLOR = ['primary', 'secondary', 'tertiary', 'positive', 'negative'];
58
+ const SIZE_TO_CLASSNAME_MAP = {
59
+ xs: 'size-24',
60
+ s: 'size-48',
61
+ m: 'size-64',
62
+ l: 'size-80',
63
+ xl: 'size-128',
64
+ xxl: 'size-144',
65
+ 24: 'size-24',
66
+ 48: 'size-48',
67
+ 64: 'size-64',
68
+ 80: 'size-80',
69
+ 128: 'size-128',
70
+ 144: 'size-144',
71
+ };
72
+
73
+ export { SIZES, SIZE_TO_CLASSNAME_MAP, STROKE, TYPOGRAPHY_COLOR, VIEW_TEXT, VIEW_TITLE };
package/moderncssm/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from "./Component";
package/moderncssm/index.js ADDED
@@ -0,0 +1 @@
1
+ export { CircularProgressBar } from './Component.js';
package/moderncssm/index.module.css ADDED
@@ -0,0 +1,239 @@
1
+ /* */
2
+
3
+ :root {
4
+ /* stroke */
5
+ --circular-progress-bar-stroke-color: var(--color-light-neutral-translucent-300);
6
+
7
+ /* positive */
8
+ --circular-progress-bar-positive-color: var(--color-light-status-positive);
9
+
10
+ /* negative */
11
+ --circular-progress-bar-negative-color: var(--color-light-status-negative);
12
+
13
+ /* theme */
14
+ --circular-progress-bar-font-family: var(--font-family-system);
15
+ --circular-progress-bar-font-weight: 600;
16
+ }
17
+
18
+ .component {
19
+ position: relative;
20
+ display: flex;
21
+ justify-content: center;
22
+ align-items: center;
23
+ border-radius: var(--border-radius-pill)
24
+ }
25
+
26
+ .component.bg-positive {
27
+ background: var(--circular-progress-bar-positive-color);
28
+ }
29
+
30
+ .component.bg-negative {
31
+ background: var(--circular-progress-bar-negative-color);
32
+ }
33
+
34
+ .svg {
35
+ display: block;
36
+ width: 100%;
37
+ }
38
+
39
+ .title,
40
+ .subtitle {
41
+ overflow: hidden;
42
+ word-break: break-word;
43
+ white-space: nowrap;
44
+ text-overflow: ellipsis;
45
+ margin: 0 6px;
46
+ }
47
+
48
+ .subtitle {
49
+ max-height: 40px;
50
+ }
51
+
52
+ .labelWrapper {
53
+ text-align: center;
54
+ position: absolute;
55
+ top: 50%;
56
+ left: 50%;
57
+ width: 100%;
58
+ transform: translate(-50%, -50%)
59
+ }
60
+
61
+ .labelWrapper.label {
62
+ display: flex;
63
+ align-items: center;
64
+ justify-content: center;
65
+ }
66
+
67
+ .typography {
68
+ font-feature-settings: 'ss01';
69
+ font-weight: var(--circular-progress-bar-font-weight);
70
+ font-family: var(--circular-progress-bar-font-family);
71
+ }
72
+
73
+ .size-144 {
74
+ width: 144px;
75
+ height: 144px
76
+ }
77
+
78
+ .size-144 .labelWrapper {
79
+ max-width: 128px;
80
+ }
81
+
82
+ .size-144 .title {
83
+ max-height: 32px;
84
+ }
85
+
86
+ .size-128 {
87
+ width: 128px;
88
+ height: 128px
89
+ }
90
+
91
+ .size-128 .labelWrapper {
92
+ max-width: 108px;
93
+ }
94
+
95
+ .size-128 .title {
96
+ max-height: 32px;
97
+ }
98
+
99
+ .size-80 {
100
+ width: 80px;
101
+ height: 80px
102
+ }
103
+
104
+ .size-80 .labelWrapper {
105
+ max-width: 64px;
106
+ }
107
+
108
+ .size-80 .title {
109
+ max-height: 24px;
110
+ }
111
+
112
+ .size-64 {
113
+ width: 64px;
114
+ height: 64px
115
+ }
116
+
117
+ .size-64 .labelWrapper {
118
+ max-width: 48px;
119
+ }
120
+
121
+ .size-64 .title {
122
+ max-height: 16px;
123
+ margin: 0;
124
+ }
125
+
126
+ .size-48 {
127
+ width: 48px;
128
+ height: 48px
129
+ }
130
+
131
+ .size-48 .labelWrapper {
132
+ max-width: 40px;
133
+ }
134
+
135
+ .size-48 .title {
136
+ max-height: 16px;
137
+ margin: 0;
138
+ }
139
+
140
+ .size-24 {
141
+ width: 24px;
142
+ height: 24px
143
+ }
144
+
145
+ .size-24 .labelWrapper {
146
+ max-width: 24px;
147
+ }
148
+
149
+ .backgroundCircle,
150
+ .progressCircle {
151
+ width: 100%;
152
+ height: 100%;
153
+ fill: transparent;
154
+ }
155
+
156
+ .positive {
157
+ stroke: var(--circular-progress-bar-positive-color);
158
+ }
159
+
160
+ .negative {
161
+ stroke: var(--circular-progress-bar-negative-color);
162
+ }
163
+
164
+ .backgroundCircle {
165
+ stroke: var(--circular-progress-bar-stroke-color)
166
+ }
167
+
168
+ .backgroundCircle.stroke {
169
+ stroke: transparent;
170
+ }
171
+
172
+ .progressCircle {
173
+ stroke-linecap: round;
174
+ }
175
+
176
+ .iconWrapper {
177
+ display: flex;
178
+ align-items: center;
179
+ justify-content: center
180
+ }
181
+
182
+ .iconWrapper.size-144 {
183
+ max-width: 64px;
184
+ max-height: 64px;
185
+ }
186
+
187
+ .iconWrapper.size-128 {
188
+ max-width: 64px;
189
+ max-height: 64px;
190
+ }
191
+
192
+ .iconWrapper.size-80 {
193
+ max-width: 48px;
194
+ max-height: 48px;
195
+ }
196
+
197
+ .iconWrapper.size-64 {
198
+ max-width: 36px;
199
+ max-height: 36px;
200
+ }
201
+
202
+ .iconWrapper.size-48 {
203
+ max-width: 24px;
204
+ max-height: 24px;
205
+ }
206
+
207
+ .iconWrapper.size-24 {
208
+ max-width: 16px;
209
+ max-height: 16px;
210
+ }
211
+
212
+ .iconWrapper.icon-tertiary {
213
+ color: var(--color-light-neutral-500);
214
+ }
215
+
216
+ .iconWrapper.icon-positive {
217
+ color: var(--color-light-status-positive);
218
+ }
219
+
220
+ .iconWrapper.icon-negative {
221
+ color: var(--color-light-status-negative);
222
+ }
223
+
224
+ .iconWrapper.icon-primary-inverted {
225
+ color: var(--color-light-neutral-translucent-1300-inverted);
226
+ }
227
+
228
+ .iconWrapper.icon-primary {
229
+ color: var(--color-light-neutral-translucent-1300);
230
+ }
231
+
232
+ .iconWrapper.icon-secondary {
233
+ color: var(--color-light-neutral-700);
234
+ }
235
+
236
+ .icon {
237
+ width: 100%;
238
+ height: 100%;
239
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-circular-progress-bar",
3
- "version": "3.5.5",
3
+ "version": "3.6.0",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -11,13 +11,13 @@
11
11
  "directory": "dist"
12
12
  },
13
13
  "dependencies": {
14
- "@alfalab/core-components-typography": "^4.8.0",
14
+ "@alfalab/core-components-typography": "^4.10.0",
15
15
  "classnames": "^2.3.1",
16
16
  "tslib": "^2.4.0"
17
17
  },
18
18
  "peerDependencies": {
19
19
  "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
20
20
  },
21
- "themesVersion": "13.0.1",
22
- "varsVersion": "9.10.0"
21
+ "themesVersion": "13.1.0",
22
+ "varsVersion": "9.12.0"
23
23
  }
package/src/index.module.css CHANGED
@@ -1,4 +1,4 @@
1
- @import '@alfalab/core-components-themes/src/default.css';
1
+ @import '@alfalab/core-components-vars/src/index.css';
2
2
 
3
3
  :root {
4
4
  /* stroke */