@alfalab/core-components-circular-progress-bar 3.3.1 → 3.4.1

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 (9) hide show
  1. package/Component.js +1 -1
  2. package/cssm/index.module.css +16 -16
  3. package/esm/Component.js +1 -1
  4. package/esm/index.css +65 -65
  5. package/index.css +65 -65
  6. package/modern/Component.js +1 -1
  7. package/modern/index.css +65 -65
  8. package/package.json +2 -2
  9. package/src/index.module.css +9 -9
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_1ua3g","bg-positive":"circular-progress-bar__bg-positive_1ua3g","bg-negative":"circular-progress-bar__bg-negative_1ua3g","svg":"circular-progress-bar__svg_1ua3g","title":"circular-progress-bar__title_1ua3g","subtitle":"circular-progress-bar__subtitle_1ua3g","labelWrapper":"circular-progress-bar__labelWrapper_1ua3g","label":"circular-progress-bar__label_1ua3g","typography":"circular-progress-bar__typography_1ua3g","xxl":"circular-progress-bar__xxl_1ua3g","xl":"circular-progress-bar__xl_1ua3g","l":"circular-progress-bar__l_1ua3g","m":"circular-progress-bar__m_1ua3g","s":"circular-progress-bar__s_1ua3g","xs":"circular-progress-bar__xs_1ua3g","backgroundCircle":"circular-progress-bar__backgroundCircle_1ua3g","progressCircle":"circular-progress-bar__progressCircle_1ua3g","positive":"circular-progress-bar__positive_1ua3g","negative":"circular-progress-bar__negative_1ua3g","stroke":"circular-progress-bar__stroke_1ua3g","iconWrapper":"circular-progress-bar__iconWrapper_1ua3g","icon-tertiary":"circular-progress-bar__icon-tertiary_1ua3g","icon-positive":"circular-progress-bar__icon-positive_1ua3g","icon-negative":"circular-progress-bar__icon-negative_1ua3g","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1ua3g","icon-primary":"circular-progress-bar__icon-primary_1ua3g","icon-secondary":"circular-progress-bar__icon-secondary_1ua3g","icon":"circular-progress-bar__icon_1ua3g"};
16
+ var styles = {"component":"circular-progress-bar__component_1d3w5","bg-positive":"circular-progress-bar__bg-positive_1d3w5","bg-negative":"circular-progress-bar__bg-negative_1d3w5","svg":"circular-progress-bar__svg_1d3w5","title":"circular-progress-bar__title_1d3w5","subtitle":"circular-progress-bar__subtitle_1d3w5","labelWrapper":"circular-progress-bar__labelWrapper_1d3w5","label":"circular-progress-bar__label_1d3w5","typography":"circular-progress-bar__typography_1d3w5","xxl":"circular-progress-bar__xxl_1d3w5","xl":"circular-progress-bar__xl_1d3w5","l":"circular-progress-bar__l_1d3w5","m":"circular-progress-bar__m_1d3w5","s":"circular-progress-bar__s_1d3w5","xs":"circular-progress-bar__xs_1d3w5","backgroundCircle":"circular-progress-bar__backgroundCircle_1d3w5","progressCircle":"circular-progress-bar__progressCircle_1d3w5","positive":"circular-progress-bar__positive_1d3w5","negative":"circular-progress-bar__negative_1d3w5","stroke":"circular-progress-bar__stroke_1d3w5","iconWrapper":"circular-progress-bar__iconWrapper_1d3w5","icon-tertiary":"circular-progress-bar__icon-tertiary_1d3w5","icon-positive":"circular-progress-bar__icon-positive_1d3w5","icon-negative":"circular-progress-bar__icon-negative_1d3w5","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1d3w5","icon-primary":"circular-progress-bar__icon-primary_1d3w5","icon-secondary":"circular-progress-bar__icon-secondary_1d3w5","icon":"circular-progress-bar__icon_1d3w5"};
17
17
  require('./index.css')
18
18
 
19
19
  /**
package/cssm/index.module.css CHANGED
@@ -1,12 +1,12 @@
1
1
  :root {
2
2
  } /* deprecated */ :root {
3
- --color-light-border-primary: #d5d6dc;
4
- --color-light-graphic-negative: #ff5431;
5
- --color-light-graphic-positive: #0cc44d;
6
- --color-light-graphic-primary: #0e0e0e;
7
- --color-light-graphic-primary-inverted: #fff;
8
- --color-light-graphic-secondary: #898991;
9
- --color-light-graphic-tertiary: #b8b9c0; /* 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
+ --color-light-neutral-1500: #0e0e0e;
4
+ --color-light-neutral-1500-inverted: #fff;
5
+ --color-light-neutral-500: #babbc2;
6
+ --color-light-neutral-700: #898991;
7
+ --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
8
+ --color-light-status-negative: #ff5431;
9
+ --color-light-status-positive: #0cc44d; /* 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 */
10
10
  } :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 */
11
11
  } :root {
12
12
  } :root {
@@ -25,13 +25,13 @@
25
25
  } :root {
26
26
  } :root {
27
27
  /* stroke */
28
- --circular-progress-bar-stroke-color: var(--color-light-border-primary);
28
+ --circular-progress-bar-stroke-color: var(--color-light-neutral-translucent-300);
29
29
 
30
30
  /* positive */
31
- --circular-progress-bar-positive-color: var(--color-light-graphic-positive);
31
+ --circular-progress-bar-positive-color: var(--color-light-status-positive);
32
32
 
33
33
  /* negative */
34
- --circular-progress-bar-negative-color: var(--color-light-graphic-negative);
34
+ --circular-progress-bar-negative-color: var(--color-light-status-negative);
35
35
 
36
36
  /* theme */
37
37
  --circular-progress-bar-font-family: var(--font-family-system);
@@ -153,17 +153,17 @@
153
153
  max-width: 16px;
154
154
  max-height: 16px;
155
155
  } .iconWrapper.icon-tertiary {
156
- color: var(--color-light-graphic-tertiary);
156
+ color: var(--color-light-neutral-500);
157
157
  } .iconWrapper.icon-positive {
158
- color: var(--color-light-graphic-positive);
158
+ color: var(--color-light-status-positive);
159
159
  } .iconWrapper.icon-negative {
160
- color: var(--color-light-graphic-negative);
160
+ color: var(--color-light-status-negative);
161
161
  } .iconWrapper.icon-primary-inverted {
162
- color: var(--color-light-graphic-primary-inverted);
162
+ color: var(--color-light-neutral-1500-inverted);
163
163
  } .iconWrapper.icon-primary {
164
- color: var(--color-light-graphic-primary);
164
+ color: var(--color-light-neutral-1500);
165
165
  } .iconWrapper.icon-secondary {
166
- color: var(--color-light-graphic-secondary);
166
+ color: var(--color-light-neutral-700);
167
167
  } .icon {
168
168
  width: 100%;
169
169
  height: 100%;
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, VIEW_TITLE, VIEW_TEXT } from './consts.js';
6
6
 
7
- var styles = {"component":"circular-progress-bar__component_1ua3g","bg-positive":"circular-progress-bar__bg-positive_1ua3g","bg-negative":"circular-progress-bar__bg-negative_1ua3g","svg":"circular-progress-bar__svg_1ua3g","title":"circular-progress-bar__title_1ua3g","subtitle":"circular-progress-bar__subtitle_1ua3g","labelWrapper":"circular-progress-bar__labelWrapper_1ua3g","label":"circular-progress-bar__label_1ua3g","typography":"circular-progress-bar__typography_1ua3g","xxl":"circular-progress-bar__xxl_1ua3g","xl":"circular-progress-bar__xl_1ua3g","l":"circular-progress-bar__l_1ua3g","m":"circular-progress-bar__m_1ua3g","s":"circular-progress-bar__s_1ua3g","xs":"circular-progress-bar__xs_1ua3g","backgroundCircle":"circular-progress-bar__backgroundCircle_1ua3g","progressCircle":"circular-progress-bar__progressCircle_1ua3g","positive":"circular-progress-bar__positive_1ua3g","negative":"circular-progress-bar__negative_1ua3g","stroke":"circular-progress-bar__stroke_1ua3g","iconWrapper":"circular-progress-bar__iconWrapper_1ua3g","icon-tertiary":"circular-progress-bar__icon-tertiary_1ua3g","icon-positive":"circular-progress-bar__icon-positive_1ua3g","icon-negative":"circular-progress-bar__icon-negative_1ua3g","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1ua3g","icon-primary":"circular-progress-bar__icon-primary_1ua3g","icon-secondary":"circular-progress-bar__icon-secondary_1ua3g","icon":"circular-progress-bar__icon_1ua3g"};
7
+ var styles = {"component":"circular-progress-bar__component_1d3w5","bg-positive":"circular-progress-bar__bg-positive_1d3w5","bg-negative":"circular-progress-bar__bg-negative_1d3w5","svg":"circular-progress-bar__svg_1d3w5","title":"circular-progress-bar__title_1d3w5","subtitle":"circular-progress-bar__subtitle_1d3w5","labelWrapper":"circular-progress-bar__labelWrapper_1d3w5","label":"circular-progress-bar__label_1d3w5","typography":"circular-progress-bar__typography_1d3w5","xxl":"circular-progress-bar__xxl_1d3w5","xl":"circular-progress-bar__xl_1d3w5","l":"circular-progress-bar__l_1d3w5","m":"circular-progress-bar__m_1d3w5","s":"circular-progress-bar__s_1d3w5","xs":"circular-progress-bar__xs_1d3w5","backgroundCircle":"circular-progress-bar__backgroundCircle_1d3w5","progressCircle":"circular-progress-bar__progressCircle_1d3w5","positive":"circular-progress-bar__positive_1d3w5","negative":"circular-progress-bar__negative_1d3w5","stroke":"circular-progress-bar__stroke_1d3w5","iconWrapper":"circular-progress-bar__iconWrapper_1d3w5","icon-tertiary":"circular-progress-bar__icon-tertiary_1d3w5","icon-positive":"circular-progress-bar__icon-positive_1d3w5","icon-negative":"circular-progress-bar__icon-negative_1d3w5","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1d3w5","icon-primary":"circular-progress-bar__icon-primary_1d3w5","icon-secondary":"circular-progress-bar__icon-secondary_1d3w5","icon":"circular-progress-bar__icon_1d3w5"};
8
8
  require('./index.css')
9
9
 
10
10
  /**
package/esm/index.css CHANGED
@@ -1,13 +1,13 @@
1
- /* hash: 1ysjn */
1
+ /* hash: acx17 */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
- --color-light-border-primary: #d5d6dc;
5
- --color-light-graphic-negative: #ff5431;
6
- --color-light-graphic-positive: #0cc44d;
7
- --color-light-graphic-primary: #0e0e0e;
8
- --color-light-graphic-primary-inverted: #fff;
9
- --color-light-graphic-secondary: #898991;
10
- --color-light-graphic-tertiary: #b8b9c0; /* 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 */
4
+ --color-light-neutral-1500: #0e0e0e;
5
+ --color-light-neutral-1500-inverted: #fff;
6
+ --color-light-neutral-500: #babbc2;
7
+ --color-light-neutral-700: #898991;
8
+ --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
9
+ --color-light-status-negative: #ff5431;
10
+ --color-light-status-positive: #0cc44d; /* 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 */
11
11
  } :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 */
12
12
  } :root {
13
13
  } :root {
@@ -26,146 +26,146 @@
26
26
  } :root {
27
27
  } :root {
28
28
  /* stroke */
29
- --circular-progress-bar-stroke-color: var(--color-light-border-primary);
29
+ --circular-progress-bar-stroke-color: var(--color-light-neutral-translucent-300);
30
30
 
31
31
  /* positive */
32
- --circular-progress-bar-positive-color: var(--color-light-graphic-positive);
32
+ --circular-progress-bar-positive-color: var(--color-light-status-positive);
33
33
 
34
34
  /* negative */
35
- --circular-progress-bar-negative-color: var(--color-light-graphic-negative);
35
+ --circular-progress-bar-negative-color: var(--color-light-status-negative);
36
36
 
37
37
  /* theme */
38
38
  --circular-progress-bar-font-family: var(--font-family-system);
39
39
  --circular-progress-bar-font-weight: 600;
40
- } .circular-progress-bar__component_1ua3g {
40
+ } .circular-progress-bar__component_1d3w5 {
41
41
  position: relative;
42
42
  display: flex;
43
43
  justify-content: center;
44
44
  align-items: center;
45
45
  border-radius: var(--border-radius-pill)
46
- } .circular-progress-bar__component_1ua3g.circular-progress-bar__bg-positive_1ua3g {
46
+ } .circular-progress-bar__component_1d3w5.circular-progress-bar__bg-positive_1d3w5 {
47
47
  background: var(--circular-progress-bar-positive-color);
48
- } .circular-progress-bar__component_1ua3g.circular-progress-bar__bg-negative_1ua3g {
48
+ } .circular-progress-bar__component_1d3w5.circular-progress-bar__bg-negative_1d3w5 {
49
49
  background: var(--circular-progress-bar-negative-color);
50
- } .circular-progress-bar__svg_1ua3g {
50
+ } .circular-progress-bar__svg_1d3w5 {
51
51
  display: block;
52
52
  width: 100%;
53
- } .circular-progress-bar__title_1ua3g,
54
- .circular-progress-bar__subtitle_1ua3g {
53
+ } .circular-progress-bar__title_1d3w5,
54
+ .circular-progress-bar__subtitle_1d3w5 {
55
55
  overflow: hidden;
56
56
  word-break: break-word;
57
57
  white-space: nowrap;
58
58
  text-overflow: ellipsis;
59
59
  margin: 0 6px;
60
- } .circular-progress-bar__subtitle_1ua3g {
60
+ } .circular-progress-bar__subtitle_1d3w5 {
61
61
  max-height: 40px;
62
- } .circular-progress-bar__labelWrapper_1ua3g {
62
+ } .circular-progress-bar__labelWrapper_1d3w5 {
63
63
  text-align: center;
64
64
  position: absolute;
65
65
  top: 50%;
66
66
  left: 50%;
67
67
  width: 100%;
68
68
  transform: translate(-50%, -50%)
69
- } .circular-progress-bar__labelWrapper_1ua3g.circular-progress-bar__label_1ua3g {
69
+ } .circular-progress-bar__labelWrapper_1d3w5.circular-progress-bar__label_1d3w5 {
70
70
  display: flex;
71
71
  align-items: center;
72
72
  justify-content: center;
73
- } .circular-progress-bar__typography_1ua3g {
73
+ } .circular-progress-bar__typography_1d3w5 {
74
74
  font-feature-settings: 'ss01';
75
75
  font-weight: var(--circular-progress-bar-font-weight);
76
76
  font-family: var(--circular-progress-bar-font-family);
77
- } .circular-progress-bar__xxl_1ua3g {
77
+ } .circular-progress-bar__xxl_1d3w5 {
78
78
  width: 144px;
79
79
  height: 144px
80
- } .circular-progress-bar__xxl_1ua3g .circular-progress-bar__labelWrapper_1ua3g {
80
+ } .circular-progress-bar__xxl_1d3w5 .circular-progress-bar__labelWrapper_1d3w5 {
81
81
  max-width: 128px;
82
- } .circular-progress-bar__xxl_1ua3g .circular-progress-bar__title_1ua3g {
82
+ } .circular-progress-bar__xxl_1d3w5 .circular-progress-bar__title_1d3w5 {
83
83
  max-height: 32px;
84
- } .circular-progress-bar__xl_1ua3g {
84
+ } .circular-progress-bar__xl_1d3w5 {
85
85
  width: 128px;
86
86
  height: 128px
87
- } .circular-progress-bar__xl_1ua3g .circular-progress-bar__labelWrapper_1ua3g {
87
+ } .circular-progress-bar__xl_1d3w5 .circular-progress-bar__labelWrapper_1d3w5 {
88
88
  max-width: 108px;
89
- } .circular-progress-bar__xl_1ua3g .circular-progress-bar__title_1ua3g {
89
+ } .circular-progress-bar__xl_1d3w5 .circular-progress-bar__title_1d3w5 {
90
90
  max-height: 32px;
91
- } .circular-progress-bar__l_1ua3g {
91
+ } .circular-progress-bar__l_1d3w5 {
92
92
  width: 80px;
93
93
  height: 80px
94
- } .circular-progress-bar__l_1ua3g .circular-progress-bar__labelWrapper_1ua3g {
94
+ } .circular-progress-bar__l_1d3w5 .circular-progress-bar__labelWrapper_1d3w5 {
95
95
  max-width: 64px;
96
- } .circular-progress-bar__l_1ua3g .circular-progress-bar__title_1ua3g {
96
+ } .circular-progress-bar__l_1d3w5 .circular-progress-bar__title_1d3w5 {
97
97
  max-height: 24px;
98
- } .circular-progress-bar__m_1ua3g {
98
+ } .circular-progress-bar__m_1d3w5 {
99
99
  width: 64px;
100
100
  height: 64px
101
- } .circular-progress-bar__m_1ua3g .circular-progress-bar__labelWrapper_1ua3g {
101
+ } .circular-progress-bar__m_1d3w5 .circular-progress-bar__labelWrapper_1d3w5 {
102
102
  max-width: 48px;
103
- } .circular-progress-bar__m_1ua3g .circular-progress-bar__title_1ua3g {
103
+ } .circular-progress-bar__m_1d3w5 .circular-progress-bar__title_1d3w5 {
104
104
  max-height: 16px;
105
105
  margin: 0;
106
- } .circular-progress-bar__s_1ua3g {
106
+ } .circular-progress-bar__s_1d3w5 {
107
107
  width: 48px;
108
108
  height: 48px
109
- } .circular-progress-bar__s_1ua3g .circular-progress-bar__labelWrapper_1ua3g {
109
+ } .circular-progress-bar__s_1d3w5 .circular-progress-bar__labelWrapper_1d3w5 {
110
110
  max-width: 40px;
111
- } .circular-progress-bar__s_1ua3g .circular-progress-bar__title_1ua3g {
111
+ } .circular-progress-bar__s_1d3w5 .circular-progress-bar__title_1d3w5 {
112
112
  max-height: 16px;
113
113
  margin: 0;
114
- } .circular-progress-bar__xs_1ua3g {
114
+ } .circular-progress-bar__xs_1d3w5 {
115
115
  width: 24px;
116
116
  height: 24px
117
- } .circular-progress-bar__xs_1ua3g .circular-progress-bar__labelWrapper_1ua3g {
117
+ } .circular-progress-bar__xs_1d3w5 .circular-progress-bar__labelWrapper_1d3w5 {
118
118
  max-width: 24px;
119
- } .circular-progress-bar__backgroundCircle_1ua3g,
120
- .circular-progress-bar__progressCircle_1ua3g {
119
+ } .circular-progress-bar__backgroundCircle_1d3w5,
120
+ .circular-progress-bar__progressCircle_1d3w5 {
121
121
  width: 100%;
122
122
  height: 100%;
123
123
  fill: transparent;
124
- } .circular-progress-bar__positive_1ua3g {
124
+ } .circular-progress-bar__positive_1d3w5 {
125
125
  stroke: var(--circular-progress-bar-positive-color);
126
- } .circular-progress-bar__negative_1ua3g {
126
+ } .circular-progress-bar__negative_1d3w5 {
127
127
  stroke: var(--circular-progress-bar-negative-color);
128
- } .circular-progress-bar__backgroundCircle_1ua3g {
128
+ } .circular-progress-bar__backgroundCircle_1d3w5 {
129
129
  stroke: var(--circular-progress-bar-stroke-color)
130
- } .circular-progress-bar__backgroundCircle_1ua3g.circular-progress-bar__stroke_1ua3g {
130
+ } .circular-progress-bar__backgroundCircle_1d3w5.circular-progress-bar__stroke_1d3w5 {
131
131
  stroke: transparent;
132
- } .circular-progress-bar__progressCircle_1ua3g {
132
+ } .circular-progress-bar__progressCircle_1d3w5 {
133
133
  stroke-linecap: round;
134
- } .circular-progress-bar__iconWrapper_1ua3g {
134
+ } .circular-progress-bar__iconWrapper_1d3w5 {
135
135
  display: flex;
136
136
  align-items: center;
137
137
  justify-content: center
138
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__xxl_1ua3g {
138
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__xxl_1d3w5 {
139
139
  max-width: 64px;
140
140
  max-height: 64px;
141
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__xl_1ua3g {
141
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__xl_1d3w5 {
142
142
  max-width: 64px;
143
143
  max-height: 64px;
144
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__l_1ua3g {
144
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__l_1d3w5 {
145
145
  max-width: 48px;
146
146
  max-height: 48px;
147
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__m_1ua3g {
147
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__m_1d3w5 {
148
148
  max-width: 36px;
149
149
  max-height: 36px;
150
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__s_1ua3g {
150
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__s_1d3w5 {
151
151
  max-width: 24px;
152
152
  max-height: 24px;
153
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__xs_1ua3g {
153
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__xs_1d3w5 {
154
154
  max-width: 16px;
155
155
  max-height: 16px;
156
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__icon-tertiary_1ua3g {
157
- color: var(--color-light-graphic-tertiary);
158
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__icon-positive_1ua3g {
159
- color: var(--color-light-graphic-positive);
160
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__icon-negative_1ua3g {
161
- color: var(--color-light-graphic-negative);
162
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__icon-primary-inverted_1ua3g {
163
- color: var(--color-light-graphic-primary-inverted);
164
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__icon-primary_1ua3g {
165
- color: var(--color-light-graphic-primary);
166
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__icon-secondary_1ua3g {
167
- color: var(--color-light-graphic-secondary);
168
- } .circular-progress-bar__icon_1ua3g {
156
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__icon-tertiary_1d3w5 {
157
+ color: var(--color-light-neutral-500);
158
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__icon-positive_1d3w5 {
159
+ color: var(--color-light-status-positive);
160
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__icon-negative_1d3w5 {
161
+ color: var(--color-light-status-negative);
162
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__icon-primary-inverted_1d3w5 {
163
+ color: var(--color-light-neutral-1500-inverted);
164
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__icon-primary_1d3w5 {
165
+ color: var(--color-light-neutral-1500);
166
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__icon-secondary_1d3w5 {
167
+ color: var(--color-light-neutral-700);
168
+ } .circular-progress-bar__icon_1d3w5 {
169
169
  width: 100%;
170
170
  height: 100%;
171
171
  }
package/index.css CHANGED
@@ -1,13 +1,13 @@
1
- /* hash: 1ysjn */
1
+ /* hash: acx17 */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
- --color-light-border-primary: #d5d6dc;
5
- --color-light-graphic-negative: #ff5431;
6
- --color-light-graphic-positive: #0cc44d;
7
- --color-light-graphic-primary: #0e0e0e;
8
- --color-light-graphic-primary-inverted: #fff;
9
- --color-light-graphic-secondary: #898991;
10
- --color-light-graphic-tertiary: #b8b9c0; /* 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 */
4
+ --color-light-neutral-1500: #0e0e0e;
5
+ --color-light-neutral-1500-inverted: #fff;
6
+ --color-light-neutral-500: #babbc2;
7
+ --color-light-neutral-700: #898991;
8
+ --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
9
+ --color-light-status-negative: #ff5431;
10
+ --color-light-status-positive: #0cc44d; /* 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 */
11
11
  } :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 */
12
12
  } :root {
13
13
  } :root {
@@ -26,146 +26,146 @@
26
26
  } :root {
27
27
  } :root {
28
28
  /* stroke */
29
- --circular-progress-bar-stroke-color: var(--color-light-border-primary);
29
+ --circular-progress-bar-stroke-color: var(--color-light-neutral-translucent-300);
30
30
 
31
31
  /* positive */
32
- --circular-progress-bar-positive-color: var(--color-light-graphic-positive);
32
+ --circular-progress-bar-positive-color: var(--color-light-status-positive);
33
33
 
34
34
  /* negative */
35
- --circular-progress-bar-negative-color: var(--color-light-graphic-negative);
35
+ --circular-progress-bar-negative-color: var(--color-light-status-negative);
36
36
 
37
37
  /* theme */
38
38
  --circular-progress-bar-font-family: var(--font-family-system);
39
39
  --circular-progress-bar-font-weight: 600;
40
- } .circular-progress-bar__component_1ua3g {
40
+ } .circular-progress-bar__component_1d3w5 {
41
41
  position: relative;
42
42
  display: flex;
43
43
  justify-content: center;
44
44
  align-items: center;
45
45
  border-radius: var(--border-radius-pill)
46
- } .circular-progress-bar__component_1ua3g.circular-progress-bar__bg-positive_1ua3g {
46
+ } .circular-progress-bar__component_1d3w5.circular-progress-bar__bg-positive_1d3w5 {
47
47
  background: var(--circular-progress-bar-positive-color);
48
- } .circular-progress-bar__component_1ua3g.circular-progress-bar__bg-negative_1ua3g {
48
+ } .circular-progress-bar__component_1d3w5.circular-progress-bar__bg-negative_1d3w5 {
49
49
  background: var(--circular-progress-bar-negative-color);
50
- } .circular-progress-bar__svg_1ua3g {
50
+ } .circular-progress-bar__svg_1d3w5 {
51
51
  display: block;
52
52
  width: 100%;
53
- } .circular-progress-bar__title_1ua3g,
54
- .circular-progress-bar__subtitle_1ua3g {
53
+ } .circular-progress-bar__title_1d3w5,
54
+ .circular-progress-bar__subtitle_1d3w5 {
55
55
  overflow: hidden;
56
56
  word-break: break-word;
57
57
  white-space: nowrap;
58
58
  text-overflow: ellipsis;
59
59
  margin: 0 6px;
60
- } .circular-progress-bar__subtitle_1ua3g {
60
+ } .circular-progress-bar__subtitle_1d3w5 {
61
61
  max-height: 40px;
62
- } .circular-progress-bar__labelWrapper_1ua3g {
62
+ } .circular-progress-bar__labelWrapper_1d3w5 {
63
63
  text-align: center;
64
64
  position: absolute;
65
65
  top: 50%;
66
66
  left: 50%;
67
67
  width: 100%;
68
68
  transform: translate(-50%, -50%)
69
- } .circular-progress-bar__labelWrapper_1ua3g.circular-progress-bar__label_1ua3g {
69
+ } .circular-progress-bar__labelWrapper_1d3w5.circular-progress-bar__label_1d3w5 {
70
70
  display: flex;
71
71
  align-items: center;
72
72
  justify-content: center;
73
- } .circular-progress-bar__typography_1ua3g {
73
+ } .circular-progress-bar__typography_1d3w5 {
74
74
  font-feature-settings: 'ss01';
75
75
  font-weight: var(--circular-progress-bar-font-weight);
76
76
  font-family: var(--circular-progress-bar-font-family);
77
- } .circular-progress-bar__xxl_1ua3g {
77
+ } .circular-progress-bar__xxl_1d3w5 {
78
78
  width: 144px;
79
79
  height: 144px
80
- } .circular-progress-bar__xxl_1ua3g .circular-progress-bar__labelWrapper_1ua3g {
80
+ } .circular-progress-bar__xxl_1d3w5 .circular-progress-bar__labelWrapper_1d3w5 {
81
81
  max-width: 128px;
82
- } .circular-progress-bar__xxl_1ua3g .circular-progress-bar__title_1ua3g {
82
+ } .circular-progress-bar__xxl_1d3w5 .circular-progress-bar__title_1d3w5 {
83
83
  max-height: 32px;
84
- } .circular-progress-bar__xl_1ua3g {
84
+ } .circular-progress-bar__xl_1d3w5 {
85
85
  width: 128px;
86
86
  height: 128px
87
- } .circular-progress-bar__xl_1ua3g .circular-progress-bar__labelWrapper_1ua3g {
87
+ } .circular-progress-bar__xl_1d3w5 .circular-progress-bar__labelWrapper_1d3w5 {
88
88
  max-width: 108px;
89
- } .circular-progress-bar__xl_1ua3g .circular-progress-bar__title_1ua3g {
89
+ } .circular-progress-bar__xl_1d3w5 .circular-progress-bar__title_1d3w5 {
90
90
  max-height: 32px;
91
- } .circular-progress-bar__l_1ua3g {
91
+ } .circular-progress-bar__l_1d3w5 {
92
92
  width: 80px;
93
93
  height: 80px
94
- } .circular-progress-bar__l_1ua3g .circular-progress-bar__labelWrapper_1ua3g {
94
+ } .circular-progress-bar__l_1d3w5 .circular-progress-bar__labelWrapper_1d3w5 {
95
95
  max-width: 64px;
96
- } .circular-progress-bar__l_1ua3g .circular-progress-bar__title_1ua3g {
96
+ } .circular-progress-bar__l_1d3w5 .circular-progress-bar__title_1d3w5 {
97
97
  max-height: 24px;
98
- } .circular-progress-bar__m_1ua3g {
98
+ } .circular-progress-bar__m_1d3w5 {
99
99
  width: 64px;
100
100
  height: 64px
101
- } .circular-progress-bar__m_1ua3g .circular-progress-bar__labelWrapper_1ua3g {
101
+ } .circular-progress-bar__m_1d3w5 .circular-progress-bar__labelWrapper_1d3w5 {
102
102
  max-width: 48px;
103
- } .circular-progress-bar__m_1ua3g .circular-progress-bar__title_1ua3g {
103
+ } .circular-progress-bar__m_1d3w5 .circular-progress-bar__title_1d3w5 {
104
104
  max-height: 16px;
105
105
  margin: 0;
106
- } .circular-progress-bar__s_1ua3g {
106
+ } .circular-progress-bar__s_1d3w5 {
107
107
  width: 48px;
108
108
  height: 48px
109
- } .circular-progress-bar__s_1ua3g .circular-progress-bar__labelWrapper_1ua3g {
109
+ } .circular-progress-bar__s_1d3w5 .circular-progress-bar__labelWrapper_1d3w5 {
110
110
  max-width: 40px;
111
- } .circular-progress-bar__s_1ua3g .circular-progress-bar__title_1ua3g {
111
+ } .circular-progress-bar__s_1d3w5 .circular-progress-bar__title_1d3w5 {
112
112
  max-height: 16px;
113
113
  margin: 0;
114
- } .circular-progress-bar__xs_1ua3g {
114
+ } .circular-progress-bar__xs_1d3w5 {
115
115
  width: 24px;
116
116
  height: 24px
117
- } .circular-progress-bar__xs_1ua3g .circular-progress-bar__labelWrapper_1ua3g {
117
+ } .circular-progress-bar__xs_1d3w5 .circular-progress-bar__labelWrapper_1d3w5 {
118
118
  max-width: 24px;
119
- } .circular-progress-bar__backgroundCircle_1ua3g,
120
- .circular-progress-bar__progressCircle_1ua3g {
119
+ } .circular-progress-bar__backgroundCircle_1d3w5,
120
+ .circular-progress-bar__progressCircle_1d3w5 {
121
121
  width: 100%;
122
122
  height: 100%;
123
123
  fill: transparent;
124
- } .circular-progress-bar__positive_1ua3g {
124
+ } .circular-progress-bar__positive_1d3w5 {
125
125
  stroke: var(--circular-progress-bar-positive-color);
126
- } .circular-progress-bar__negative_1ua3g {
126
+ } .circular-progress-bar__negative_1d3w5 {
127
127
  stroke: var(--circular-progress-bar-negative-color);
128
- } .circular-progress-bar__backgroundCircle_1ua3g {
128
+ } .circular-progress-bar__backgroundCircle_1d3w5 {
129
129
  stroke: var(--circular-progress-bar-stroke-color)
130
- } .circular-progress-bar__backgroundCircle_1ua3g.circular-progress-bar__stroke_1ua3g {
130
+ } .circular-progress-bar__backgroundCircle_1d3w5.circular-progress-bar__stroke_1d3w5 {
131
131
  stroke: transparent;
132
- } .circular-progress-bar__progressCircle_1ua3g {
132
+ } .circular-progress-bar__progressCircle_1d3w5 {
133
133
  stroke-linecap: round;
134
- } .circular-progress-bar__iconWrapper_1ua3g {
134
+ } .circular-progress-bar__iconWrapper_1d3w5 {
135
135
  display: flex;
136
136
  align-items: center;
137
137
  justify-content: center
138
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__xxl_1ua3g {
138
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__xxl_1d3w5 {
139
139
  max-width: 64px;
140
140
  max-height: 64px;
141
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__xl_1ua3g {
141
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__xl_1d3w5 {
142
142
  max-width: 64px;
143
143
  max-height: 64px;
144
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__l_1ua3g {
144
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__l_1d3w5 {
145
145
  max-width: 48px;
146
146
  max-height: 48px;
147
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__m_1ua3g {
147
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__m_1d3w5 {
148
148
  max-width: 36px;
149
149
  max-height: 36px;
150
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__s_1ua3g {
150
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__s_1d3w5 {
151
151
  max-width: 24px;
152
152
  max-height: 24px;
153
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__xs_1ua3g {
153
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__xs_1d3w5 {
154
154
  max-width: 16px;
155
155
  max-height: 16px;
156
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__icon-tertiary_1ua3g {
157
- color: var(--color-light-graphic-tertiary);
158
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__icon-positive_1ua3g {
159
- color: var(--color-light-graphic-positive);
160
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__icon-negative_1ua3g {
161
- color: var(--color-light-graphic-negative);
162
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__icon-primary-inverted_1ua3g {
163
- color: var(--color-light-graphic-primary-inverted);
164
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__icon-primary_1ua3g {
165
- color: var(--color-light-graphic-primary);
166
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__icon-secondary_1ua3g {
167
- color: var(--color-light-graphic-secondary);
168
- } .circular-progress-bar__icon_1ua3g {
156
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__icon-tertiary_1d3w5 {
157
+ color: var(--color-light-neutral-500);
158
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__icon-positive_1d3w5 {
159
+ color: var(--color-light-status-positive);
160
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__icon-negative_1d3w5 {
161
+ color: var(--color-light-status-negative);
162
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__icon-primary-inverted_1d3w5 {
163
+ color: var(--color-light-neutral-1500-inverted);
164
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__icon-primary_1d3w5 {
165
+ color: var(--color-light-neutral-1500);
166
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__icon-secondary_1d3w5 {
167
+ color: var(--color-light-neutral-700);
168
+ } .circular-progress-bar__icon_1d3w5 {
169
169
  width: 100%;
170
170
  height: 100%;
171
171
  }
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, VIEW_TITLE, VIEW_TEXT } from './consts.js';
5
5
 
6
- const styles = {"component":"circular-progress-bar__component_1ua3g","bg-positive":"circular-progress-bar__bg-positive_1ua3g","bg-negative":"circular-progress-bar__bg-negative_1ua3g","svg":"circular-progress-bar__svg_1ua3g","title":"circular-progress-bar__title_1ua3g","subtitle":"circular-progress-bar__subtitle_1ua3g","labelWrapper":"circular-progress-bar__labelWrapper_1ua3g","label":"circular-progress-bar__label_1ua3g","typography":"circular-progress-bar__typography_1ua3g","xxl":"circular-progress-bar__xxl_1ua3g","xl":"circular-progress-bar__xl_1ua3g","l":"circular-progress-bar__l_1ua3g","m":"circular-progress-bar__m_1ua3g","s":"circular-progress-bar__s_1ua3g","xs":"circular-progress-bar__xs_1ua3g","backgroundCircle":"circular-progress-bar__backgroundCircle_1ua3g","progressCircle":"circular-progress-bar__progressCircle_1ua3g","positive":"circular-progress-bar__positive_1ua3g","negative":"circular-progress-bar__negative_1ua3g","stroke":"circular-progress-bar__stroke_1ua3g","iconWrapper":"circular-progress-bar__iconWrapper_1ua3g","icon-tertiary":"circular-progress-bar__icon-tertiary_1ua3g","icon-positive":"circular-progress-bar__icon-positive_1ua3g","icon-negative":"circular-progress-bar__icon-negative_1ua3g","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1ua3g","icon-primary":"circular-progress-bar__icon-primary_1ua3g","icon-secondary":"circular-progress-bar__icon-secondary_1ua3g","icon":"circular-progress-bar__icon_1ua3g"};
6
+ const styles = {"component":"circular-progress-bar__component_1d3w5","bg-positive":"circular-progress-bar__bg-positive_1d3w5","bg-negative":"circular-progress-bar__bg-negative_1d3w5","svg":"circular-progress-bar__svg_1d3w5","title":"circular-progress-bar__title_1d3w5","subtitle":"circular-progress-bar__subtitle_1d3w5","labelWrapper":"circular-progress-bar__labelWrapper_1d3w5","label":"circular-progress-bar__label_1d3w5","typography":"circular-progress-bar__typography_1d3w5","xxl":"circular-progress-bar__xxl_1d3w5","xl":"circular-progress-bar__xl_1d3w5","l":"circular-progress-bar__l_1d3w5","m":"circular-progress-bar__m_1d3w5","s":"circular-progress-bar__s_1d3w5","xs":"circular-progress-bar__xs_1d3w5","backgroundCircle":"circular-progress-bar__backgroundCircle_1d3w5","progressCircle":"circular-progress-bar__progressCircle_1d3w5","positive":"circular-progress-bar__positive_1d3w5","negative":"circular-progress-bar__negative_1d3w5","stroke":"circular-progress-bar__stroke_1d3w5","iconWrapper":"circular-progress-bar__iconWrapper_1d3w5","icon-tertiary":"circular-progress-bar__icon-tertiary_1d3w5","icon-positive":"circular-progress-bar__icon-positive_1d3w5","icon-negative":"circular-progress-bar__icon-negative_1d3w5","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1d3w5","icon-primary":"circular-progress-bar__icon-primary_1d3w5","icon-secondary":"circular-progress-bar__icon-secondary_1d3w5","icon":"circular-progress-bar__icon_1d3w5"};
7
7
  require('./index.css')
8
8
 
9
9
  /**
package/modern/index.css CHANGED
@@ -1,13 +1,13 @@
1
- /* hash: 1ysjn */
1
+ /* hash: acx17 */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
- --color-light-border-primary: #d5d6dc;
5
- --color-light-graphic-negative: #ff5431;
6
- --color-light-graphic-positive: #0cc44d;
7
- --color-light-graphic-primary: #0e0e0e;
8
- --color-light-graphic-primary-inverted: #fff;
9
- --color-light-graphic-secondary: #898991;
10
- --color-light-graphic-tertiary: #b8b9c0; /* 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 */
4
+ --color-light-neutral-1500: #0e0e0e;
5
+ --color-light-neutral-1500-inverted: #fff;
6
+ --color-light-neutral-500: #babbc2;
7
+ --color-light-neutral-700: #898991;
8
+ --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
9
+ --color-light-status-negative: #ff5431;
10
+ --color-light-status-positive: #0cc44d; /* 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 */
11
11
  } :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 */
12
12
  } :root {
13
13
  } :root {
@@ -26,146 +26,146 @@
26
26
  } :root {
27
27
  } :root {
28
28
  /* stroke */
29
- --circular-progress-bar-stroke-color: var(--color-light-border-primary);
29
+ --circular-progress-bar-stroke-color: var(--color-light-neutral-translucent-300);
30
30
 
31
31
  /* positive */
32
- --circular-progress-bar-positive-color: var(--color-light-graphic-positive);
32
+ --circular-progress-bar-positive-color: var(--color-light-status-positive);
33
33
 
34
34
  /* negative */
35
- --circular-progress-bar-negative-color: var(--color-light-graphic-negative);
35
+ --circular-progress-bar-negative-color: var(--color-light-status-negative);
36
36
 
37
37
  /* theme */
38
38
  --circular-progress-bar-font-family: var(--font-family-system);
39
39
  --circular-progress-bar-font-weight: 600;
40
- } .circular-progress-bar__component_1ua3g {
40
+ } .circular-progress-bar__component_1d3w5 {
41
41
  position: relative;
42
42
  display: flex;
43
43
  justify-content: center;
44
44
  align-items: center;
45
45
  border-radius: var(--border-radius-pill)
46
- } .circular-progress-bar__component_1ua3g.circular-progress-bar__bg-positive_1ua3g {
46
+ } .circular-progress-bar__component_1d3w5.circular-progress-bar__bg-positive_1d3w5 {
47
47
  background: var(--circular-progress-bar-positive-color);
48
- } .circular-progress-bar__component_1ua3g.circular-progress-bar__bg-negative_1ua3g {
48
+ } .circular-progress-bar__component_1d3w5.circular-progress-bar__bg-negative_1d3w5 {
49
49
  background: var(--circular-progress-bar-negative-color);
50
- } .circular-progress-bar__svg_1ua3g {
50
+ } .circular-progress-bar__svg_1d3w5 {
51
51
  display: block;
52
52
  width: 100%;
53
- } .circular-progress-bar__title_1ua3g,
54
- .circular-progress-bar__subtitle_1ua3g {
53
+ } .circular-progress-bar__title_1d3w5,
54
+ .circular-progress-bar__subtitle_1d3w5 {
55
55
  overflow: hidden;
56
56
  word-break: break-word;
57
57
  white-space: nowrap;
58
58
  text-overflow: ellipsis;
59
59
  margin: 0 6px;
60
- } .circular-progress-bar__subtitle_1ua3g {
60
+ } .circular-progress-bar__subtitle_1d3w5 {
61
61
  max-height: 40px;
62
- } .circular-progress-bar__labelWrapper_1ua3g {
62
+ } .circular-progress-bar__labelWrapper_1d3w5 {
63
63
  text-align: center;
64
64
  position: absolute;
65
65
  top: 50%;
66
66
  left: 50%;
67
67
  width: 100%;
68
68
  transform: translate(-50%, -50%)
69
- } .circular-progress-bar__labelWrapper_1ua3g.circular-progress-bar__label_1ua3g {
69
+ } .circular-progress-bar__labelWrapper_1d3w5.circular-progress-bar__label_1d3w5 {
70
70
  display: flex;
71
71
  align-items: center;
72
72
  justify-content: center;
73
- } .circular-progress-bar__typography_1ua3g {
73
+ } .circular-progress-bar__typography_1d3w5 {
74
74
  font-feature-settings: 'ss01';
75
75
  font-weight: var(--circular-progress-bar-font-weight);
76
76
  font-family: var(--circular-progress-bar-font-family);
77
- } .circular-progress-bar__xxl_1ua3g {
77
+ } .circular-progress-bar__xxl_1d3w5 {
78
78
  width: 144px;
79
79
  height: 144px
80
- } .circular-progress-bar__xxl_1ua3g .circular-progress-bar__labelWrapper_1ua3g {
80
+ } .circular-progress-bar__xxl_1d3w5 .circular-progress-bar__labelWrapper_1d3w5 {
81
81
  max-width: 128px;
82
- } .circular-progress-bar__xxl_1ua3g .circular-progress-bar__title_1ua3g {
82
+ } .circular-progress-bar__xxl_1d3w5 .circular-progress-bar__title_1d3w5 {
83
83
  max-height: 32px;
84
- } .circular-progress-bar__xl_1ua3g {
84
+ } .circular-progress-bar__xl_1d3w5 {
85
85
  width: 128px;
86
86
  height: 128px
87
- } .circular-progress-bar__xl_1ua3g .circular-progress-bar__labelWrapper_1ua3g {
87
+ } .circular-progress-bar__xl_1d3w5 .circular-progress-bar__labelWrapper_1d3w5 {
88
88
  max-width: 108px;
89
- } .circular-progress-bar__xl_1ua3g .circular-progress-bar__title_1ua3g {
89
+ } .circular-progress-bar__xl_1d3w5 .circular-progress-bar__title_1d3w5 {
90
90
  max-height: 32px;
91
- } .circular-progress-bar__l_1ua3g {
91
+ } .circular-progress-bar__l_1d3w5 {
92
92
  width: 80px;
93
93
  height: 80px
94
- } .circular-progress-bar__l_1ua3g .circular-progress-bar__labelWrapper_1ua3g {
94
+ } .circular-progress-bar__l_1d3w5 .circular-progress-bar__labelWrapper_1d3w5 {
95
95
  max-width: 64px;
96
- } .circular-progress-bar__l_1ua3g .circular-progress-bar__title_1ua3g {
96
+ } .circular-progress-bar__l_1d3w5 .circular-progress-bar__title_1d3w5 {
97
97
  max-height: 24px;
98
- } .circular-progress-bar__m_1ua3g {
98
+ } .circular-progress-bar__m_1d3w5 {
99
99
  width: 64px;
100
100
  height: 64px
101
- } .circular-progress-bar__m_1ua3g .circular-progress-bar__labelWrapper_1ua3g {
101
+ } .circular-progress-bar__m_1d3w5 .circular-progress-bar__labelWrapper_1d3w5 {
102
102
  max-width: 48px;
103
- } .circular-progress-bar__m_1ua3g .circular-progress-bar__title_1ua3g {
103
+ } .circular-progress-bar__m_1d3w5 .circular-progress-bar__title_1d3w5 {
104
104
  max-height: 16px;
105
105
  margin: 0;
106
- } .circular-progress-bar__s_1ua3g {
106
+ } .circular-progress-bar__s_1d3w5 {
107
107
  width: 48px;
108
108
  height: 48px
109
- } .circular-progress-bar__s_1ua3g .circular-progress-bar__labelWrapper_1ua3g {
109
+ } .circular-progress-bar__s_1d3w5 .circular-progress-bar__labelWrapper_1d3w5 {
110
110
  max-width: 40px;
111
- } .circular-progress-bar__s_1ua3g .circular-progress-bar__title_1ua3g {
111
+ } .circular-progress-bar__s_1d3w5 .circular-progress-bar__title_1d3w5 {
112
112
  max-height: 16px;
113
113
  margin: 0;
114
- } .circular-progress-bar__xs_1ua3g {
114
+ } .circular-progress-bar__xs_1d3w5 {
115
115
  width: 24px;
116
116
  height: 24px
117
- } .circular-progress-bar__xs_1ua3g .circular-progress-bar__labelWrapper_1ua3g {
117
+ } .circular-progress-bar__xs_1d3w5 .circular-progress-bar__labelWrapper_1d3w5 {
118
118
  max-width: 24px;
119
- } .circular-progress-bar__backgroundCircle_1ua3g,
120
- .circular-progress-bar__progressCircle_1ua3g {
119
+ } .circular-progress-bar__backgroundCircle_1d3w5,
120
+ .circular-progress-bar__progressCircle_1d3w5 {
121
121
  width: 100%;
122
122
  height: 100%;
123
123
  fill: transparent;
124
- } .circular-progress-bar__positive_1ua3g {
124
+ } .circular-progress-bar__positive_1d3w5 {
125
125
  stroke: var(--circular-progress-bar-positive-color);
126
- } .circular-progress-bar__negative_1ua3g {
126
+ } .circular-progress-bar__negative_1d3w5 {
127
127
  stroke: var(--circular-progress-bar-negative-color);
128
- } .circular-progress-bar__backgroundCircle_1ua3g {
128
+ } .circular-progress-bar__backgroundCircle_1d3w5 {
129
129
  stroke: var(--circular-progress-bar-stroke-color)
130
- } .circular-progress-bar__backgroundCircle_1ua3g.circular-progress-bar__stroke_1ua3g {
130
+ } .circular-progress-bar__backgroundCircle_1d3w5.circular-progress-bar__stroke_1d3w5 {
131
131
  stroke: transparent;
132
- } .circular-progress-bar__progressCircle_1ua3g {
132
+ } .circular-progress-bar__progressCircle_1d3w5 {
133
133
  stroke-linecap: round;
134
- } .circular-progress-bar__iconWrapper_1ua3g {
134
+ } .circular-progress-bar__iconWrapper_1d3w5 {
135
135
  display: flex;
136
136
  align-items: center;
137
137
  justify-content: center
138
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__xxl_1ua3g {
138
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__xxl_1d3w5 {
139
139
  max-width: 64px;
140
140
  max-height: 64px;
141
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__xl_1ua3g {
141
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__xl_1d3w5 {
142
142
  max-width: 64px;
143
143
  max-height: 64px;
144
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__l_1ua3g {
144
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__l_1d3w5 {
145
145
  max-width: 48px;
146
146
  max-height: 48px;
147
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__m_1ua3g {
147
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__m_1d3w5 {
148
148
  max-width: 36px;
149
149
  max-height: 36px;
150
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__s_1ua3g {
150
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__s_1d3w5 {
151
151
  max-width: 24px;
152
152
  max-height: 24px;
153
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__xs_1ua3g {
153
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__xs_1d3w5 {
154
154
  max-width: 16px;
155
155
  max-height: 16px;
156
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__icon-tertiary_1ua3g {
157
- color: var(--color-light-graphic-tertiary);
158
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__icon-positive_1ua3g {
159
- color: var(--color-light-graphic-positive);
160
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__icon-negative_1ua3g {
161
- color: var(--color-light-graphic-negative);
162
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__icon-primary-inverted_1ua3g {
163
- color: var(--color-light-graphic-primary-inverted);
164
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__icon-primary_1ua3g {
165
- color: var(--color-light-graphic-primary);
166
- } .circular-progress-bar__iconWrapper_1ua3g.circular-progress-bar__icon-secondary_1ua3g {
167
- color: var(--color-light-graphic-secondary);
168
- } .circular-progress-bar__icon_1ua3g {
156
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__icon-tertiary_1d3w5 {
157
+ color: var(--color-light-neutral-500);
158
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__icon-positive_1d3w5 {
159
+ color: var(--color-light-status-positive);
160
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__icon-negative_1d3w5 {
161
+ color: var(--color-light-status-negative);
162
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__icon-primary-inverted_1d3w5 {
163
+ color: var(--color-light-neutral-1500-inverted);
164
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__icon-primary_1d3w5 {
165
+ color: var(--color-light-neutral-1500);
166
+ } .circular-progress-bar__iconWrapper_1d3w5.circular-progress-bar__icon-secondary_1d3w5 {
167
+ color: var(--color-light-neutral-700);
168
+ } .circular-progress-bar__icon_1d3w5 {
169
169
  width: 100%;
170
170
  height: 100%;
171
171
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-circular-progress-bar",
3
- "version": "3.3.1",
3
+ "version": "3.4.1",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -11,7 +11,7 @@
11
11
  "directory": "dist"
12
12
  },
13
13
  "dependencies": {
14
- "@alfalab/core-components-typography": "^4.2.0",
14
+ "@alfalab/core-components-typography": "^4.3.0",
15
15
  "classnames": "^2.3.1",
16
16
  "tslib": "^2.4.0"
17
17
  },
package/src/index.module.css CHANGED
@@ -2,13 +2,13 @@
2
2
 
3
3
  :root {
4
4
  /* stroke */
5
- --circular-progress-bar-stroke-color: var(--color-light-border-primary);
5
+ --circular-progress-bar-stroke-color: var(--color-light-neutral-translucent-300);
6
6
 
7
7
  /* positive */
8
- --circular-progress-bar-positive-color: var(--color-light-graphic-positive);
8
+ --circular-progress-bar-positive-color: var(--color-light-status-positive);
9
9
 
10
10
  /* negative */
11
- --circular-progress-bar-negative-color: var(--color-light-graphic-negative);
11
+ --circular-progress-bar-negative-color: var(--color-light-status-negative);
12
12
 
13
13
  /* theme */
14
14
  --circular-progress-bar-font-family: var(--font-family-system);
@@ -209,27 +209,27 @@
209
209
  }
210
210
 
211
211
  &.icon-tertiary {
212
- color: var(--color-light-graphic-tertiary);
212
+ color: var(--color-light-neutral-500);
213
213
  }
214
214
 
215
215
  &.icon-positive {
216
- color: var(--color-light-graphic-positive);
216
+ color: var(--color-light-status-positive);
217
217
  }
218
218
 
219
219
  &.icon-negative {
220
- color: var(--color-light-graphic-negative);
220
+ color: var(--color-light-status-negative);
221
221
  }
222
222
 
223
223
  &.icon-primary-inverted {
224
- color: var(--color-light-graphic-primary-inverted);
224
+ color: var(--color-light-neutral-1500-inverted);
225
225
  }
226
226
 
227
227
  &.icon-primary {
228
- color: var(--color-light-graphic-primary);
228
+ color: var(--color-light-neutral-1500);
229
229
  }
230
230
 
231
231
  &.icon-secondary {
232
- color: var(--color-light-graphic-secondary);
232
+ color: var(--color-light-neutral-700);
233
233
  }
234
234
  }
235
235