@bethinkpl/design-system 35.0.4 → 35.2.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.
- package/dist/design-system.css +1 -1
- package/dist/design-system.js +4698 -4664
- package/dist/design-system.js.map +1 -1
- package/dist/lib/js/components/ProgressBar/ProgressBar.consts.d.ts +5 -0
- package/dist/lib/js/components/ProgressBar/ProgressBar.vue.d.ts +51 -17
- package/dist/lib/js/components/ProgressBar/ProgressBarLabelDataWrapper.vue.d.ts +19 -0
- package/lib/js/components/ProgressBar/ProgressBar.consts.ts +7 -0
- package/lib/js/components/ProgressBar/ProgressBar.spec.ts +2 -0
- package/lib/js/components/ProgressBar/ProgressBar.stories.ts +8 -0
- package/lib/js/components/ProgressBar/ProgressBar.vue +67 -56
- package/lib/js/components/ProgressBar/ProgressBarLabelDataWrapper.vue +62 -0
- package/lib/js/styles/ColorsThemes/ColorsThemes.stories.ts +7 -0
- package/lib/js/styles/ColorsTokensPrimaryMedcourses/ColorsTokensPrimaryMedcourses.stories.ts +28 -0
- package/lib/styles/design-system.scss +3 -0
- package/lib/styles/settings/colors/_raw-mc.json +1 -0
- package/lib/styles/settings/colors/_raw-mc.scss +22 -0
- package/lib/styles/settings/colors/_raw.json +1 -1
- package/lib/styles/settings/colors/_raw.scss +40 -20
- package/lib/styles/settings/colors/_tokens-mc-variables.scss +55 -0
- package/lib/styles/settings/colors/_tokens-mc.json +1 -0
- package/lib/styles/settings/colors/_tokens-mc.scss +53 -0
- package/package.json +1 -1
|
@@ -123,26 +123,6 @@
|
|
|
123
123
|
--raw-blue-800-rgb: 12, 86, 133;
|
|
124
124
|
--raw-blue-900: #0c4870;
|
|
125
125
|
--raw-blue-900-rgb: 12, 72, 112;
|
|
126
|
-
--raw-violet-50: #f4f1f8;
|
|
127
|
-
--raw-violet-50-rgb: 244, 241, 248;
|
|
128
|
-
--raw-violet-100: #e6deee;
|
|
129
|
-
--raw-violet-100-rgb: 230, 222, 238;
|
|
130
|
-
--raw-violet-200: #cebfde;
|
|
131
|
-
--raw-violet-200-rgb: 206, 191, 222;
|
|
132
|
-
--raw-violet-300: #af97c8;
|
|
133
|
-
--raw-violet-300-rgb: 175, 151, 200;
|
|
134
|
-
--raw-violet-400: #9271b5;
|
|
135
|
-
--raw-violet-400-rgb: 146, 113, 181;
|
|
136
|
-
--raw-violet-500: #7e57a7;
|
|
137
|
-
--raw-violet-500-rgb: 126, 87, 167;
|
|
138
|
-
--raw-violet-600: #72499b;
|
|
139
|
-
--raw-violet-600-rgb: 114, 73, 155;
|
|
140
|
-
--raw-violet-700: #643d8c;
|
|
141
|
-
--raw-violet-700-rgb: 100, 61, 140;
|
|
142
|
-
--raw-violet-800: #56367b;
|
|
143
|
-
--raw-violet-800-rgb: 86, 54, 123;
|
|
144
|
-
--raw-violet-900: #472f6b;
|
|
145
|
-
--raw-violet-900-rgb: 71, 47, 107;
|
|
146
126
|
--raw-indigo-50: #f0f1fd;
|
|
147
127
|
--raw-indigo-50-rgb: 240, 241, 253;
|
|
148
128
|
--raw-indigo-100: #e4e5fb;
|
|
@@ -163,6 +143,46 @@
|
|
|
163
143
|
--raw-indigo-800-rgb: 66, 75, 144;
|
|
164
144
|
--raw-indigo-900: #363e73;
|
|
165
145
|
--raw-indigo-900-rgb: 54, 62, 115;
|
|
146
|
+
--raw-teal-50: #e8f6f6;
|
|
147
|
+
--raw-teal-50-rgb: 232, 246, 246;
|
|
148
|
+
--raw-teal-100: #d5eeef;
|
|
149
|
+
--raw-teal-100-rgb: 213, 238, 239;
|
|
150
|
+
--raw-teal-200: #a6dcde;
|
|
151
|
+
--raw-teal-200-rgb: 166, 220, 222;
|
|
152
|
+
--raw-teal-300: #5bbdc1;
|
|
153
|
+
--raw-teal-300-rgb: 91, 189, 193;
|
|
154
|
+
--raw-teal-400: #0d9ea4;
|
|
155
|
+
--raw-teal-400-rgb: 13, 158, 164;
|
|
156
|
+
--raw-teal-500: #078f96;
|
|
157
|
+
--raw-teal-500-rgb: 7, 143, 150;
|
|
158
|
+
--raw-teal-600: #078f96;
|
|
159
|
+
--raw-teal-600-rgb: 7, 143, 150;
|
|
160
|
+
--raw-teal-700: #096b75;
|
|
161
|
+
--raw-teal-700-rgb: 9, 107, 117;
|
|
162
|
+
--raw-teal-800: #095d68;
|
|
163
|
+
--raw-teal-800-rgb: 9, 93, 104;
|
|
164
|
+
--raw-teal-900: #0a4c58;
|
|
165
|
+
--raw-teal-900-rgb: 10, 76, 88;
|
|
166
|
+
--raw-violet-50: #f4f1f8;
|
|
167
|
+
--raw-violet-50-rgb: 244, 241, 248;
|
|
168
|
+
--raw-violet-100: #e6deee;
|
|
169
|
+
--raw-violet-100-rgb: 230, 222, 238;
|
|
170
|
+
--raw-violet-200: #cebfde;
|
|
171
|
+
--raw-violet-200-rgb: 206, 191, 222;
|
|
172
|
+
--raw-violet-300: #af97c8;
|
|
173
|
+
--raw-violet-300-rgb: 175, 151, 200;
|
|
174
|
+
--raw-violet-400: #9271b5;
|
|
175
|
+
--raw-violet-400-rgb: 146, 113, 181;
|
|
176
|
+
--raw-violet-500: #7e57a7;
|
|
177
|
+
--raw-violet-500-rgb: 126, 87, 167;
|
|
178
|
+
--raw-violet-600: #72499b;
|
|
179
|
+
--raw-violet-600-rgb: 114, 73, 155;
|
|
180
|
+
--raw-violet-700: #643d8c;
|
|
181
|
+
--raw-violet-700-rgb: 100, 61, 140;
|
|
182
|
+
--raw-violet-800: #56367b;
|
|
183
|
+
--raw-violet-800-rgb: 86, 54, 123;
|
|
184
|
+
--raw-violet-900: #472f6b;
|
|
185
|
+
--raw-violet-900-rgb: 71, 47, 107;
|
|
166
186
|
--raw-olive-50: #eef6e3;
|
|
167
187
|
--raw-olive-50-rgb: 238, 246, 227;
|
|
168
188
|
--raw-olive-100: #e0eed1;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
.-ds-theme-mc {
|
|
2
|
+
--color-primary-text-strong: var(--theme-700);
|
|
3
|
+
--color-primary-text-strong-hovered: var(--theme-900);
|
|
4
|
+
--color-primary-text-strong-focused: var(--theme-900);
|
|
5
|
+
--color-primary-text-strong-disabled: var(--theme-200);
|
|
6
|
+
--color-primary-text: var(--theme-600);
|
|
7
|
+
--color-primary-text-hovered: var(--theme-800);
|
|
8
|
+
--color-primary-text-focused: var(--theme-800);
|
|
9
|
+
--color-primary-text-disabled: var(--theme-200);
|
|
10
|
+
--color-primary-icon: var(--theme-500);
|
|
11
|
+
--color-primary-icon-hovered: var(--theme-700);
|
|
12
|
+
--color-primary-icon-focused: var(--theme-700);
|
|
13
|
+
--color-primary-icon-disabled: var(--theme-200);
|
|
14
|
+
--color-primary-icon-weak: var(--theme-300);
|
|
15
|
+
--color-primary-icon-weak-hovered: var(--theme-500);
|
|
16
|
+
--color-primary-icon-weak-focused: var(--theme-500);
|
|
17
|
+
--color-primary-icon-weak-disabled: var(--theme-100);
|
|
18
|
+
--color-primary-data-medium: var(--theme-600);
|
|
19
|
+
--color-primary-data: var(--theme-400);
|
|
20
|
+
--color-primary-data-weak: var(--theme-300);
|
|
21
|
+
--color-primary-data-ghost: var(--theme-200);
|
|
22
|
+
--color-primary-background-strong: var(--theme-500);
|
|
23
|
+
--color-primary-background-strong-hovered: var(--theme-600);
|
|
24
|
+
--color-primary-background-strong-focused: var(--theme-600);
|
|
25
|
+
--color-primary-background-strong-pressed: var(--theme-700);
|
|
26
|
+
--color-primary-background-strong-disabled: var(--theme-200);
|
|
27
|
+
--color-primary-background-medium: var(--theme-100);
|
|
28
|
+
--color-primary-background-medium-hovered: var(--theme-200);
|
|
29
|
+
--color-primary-background-medium-focused: var(--theme-200);
|
|
30
|
+
--color-primary-background-medium-pressed: var(--theme-300);
|
|
31
|
+
--color-primary-background-medium-disabled: var(--theme-50);
|
|
32
|
+
--color-primary-background: var(--theme-50);
|
|
33
|
+
--color-primary-background-hovered: var(--theme-100);
|
|
34
|
+
--color-primary-background-focused: var(--theme-100);
|
|
35
|
+
--color-primary-background-pressed: var(--theme-200);
|
|
36
|
+
--color-primary-background-disabled: var(--theme-50);
|
|
37
|
+
--color-primary-background-weak-hovered: var(--theme-100);
|
|
38
|
+
--color-primary-background-weak-focused: var(--theme-100);
|
|
39
|
+
--color-primary-background-weak-pressed: var(--theme-200);
|
|
40
|
+
--color-primary-background-ghost: rgba(var(--theme-500-rgb), 0);
|
|
41
|
+
--color-primary-background-ghost-hovered: rgba(var(--theme-500-rgb), 0.12);
|
|
42
|
+
--color-primary-background-ghost-focused: rgba(var(--theme-500-rgb), 0.12);
|
|
43
|
+
--color-primary-background-ghost-pressed: rgba(var(--theme-500-rgb), 0.18);
|
|
44
|
+
--color-primary-background-ghost-disabled: rgba(var(--theme-500-rgb), 0);
|
|
45
|
+
--color-primary-overlay: rgba(var(--theme-100-rgb), 0.8);
|
|
46
|
+
--color-primary-border: var(--theme-500);
|
|
47
|
+
--color-primary-border-hovered: var(--theme-700);
|
|
48
|
+
--color-primary-border-focused: var(--theme-700);
|
|
49
|
+
--color-primary-border-disabled: var(--theme-200);
|
|
50
|
+
--color-primary-border-weak: var(--theme-100);
|
|
51
|
+
--color-primary-border-weak-hovered: var(--theme-300);
|
|
52
|
+
--color-primary-border-weak-focused: var(--theme-300);
|
|
53
|
+
--color-primary-border-weak-disabled: var(--theme-100);
|
|
54
|
+
--color-primary-ripple: rgba(var(--theme-500-rgb), 0.12);
|
|
55
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"text":[{"id":"_tokens-mc.scss_color-primary-text-strong","label":"color-primary-text-strong","value":"var(--theme-700)"},{"id":"_tokens-mc.scss_color-primary-text-strong-hovered","label":"color-primary-text-strong-hovered","value":"var(--theme-900)"},{"id":"_tokens-mc.scss_color-primary-text-strong-focused","label":"color-primary-text-strong-focused","value":"var(--theme-900)"},{"id":"_tokens-mc.scss_color-primary-text-strong-disabled","label":"color-primary-text-strong-disabled","value":"var(--theme-200)"},{"id":"_tokens-mc.scss_color-primary-text","label":"color-primary-text","value":"var(--theme-600)"},{"id":"_tokens-mc.scss_color-primary-text-hovered","label":"color-primary-text-hovered","value":"var(--theme-800)"},{"id":"_tokens-mc.scss_color-primary-text-focused","label":"color-primary-text-focused","value":"var(--theme-800)"},{"id":"_tokens-mc.scss_color-primary-text-disabled","label":"color-primary-text-disabled","value":"var(--theme-200)"}],"icon":[{"id":"_tokens-mc.scss_color-primary-icon","label":"color-primary-icon","value":"var(--theme-500)"},{"id":"_tokens-mc.scss_color-primary-icon-hovered","label":"color-primary-icon-hovered","value":"var(--theme-700)"},{"id":"_tokens-mc.scss_color-primary-icon-focused","label":"color-primary-icon-focused","value":"var(--theme-700)"},{"id":"_tokens-mc.scss_color-primary-icon-disabled","label":"color-primary-icon-disabled","value":"var(--theme-200)"},{"id":"_tokens-mc.scss_color-primary-icon-weak","label":"color-primary-icon-weak","value":"var(--theme-300)"},{"id":"_tokens-mc.scss_color-primary-icon-weak-hovered","label":"color-primary-icon-weak-hovered","value":"var(--theme-500)"},{"id":"_tokens-mc.scss_color-primary-icon-weak-focused","label":"color-primary-icon-weak-focused","value":"var(--theme-500)"},{"id":"_tokens-mc.scss_color-primary-icon-weak-disabled","label":"color-primary-icon-weak-disabled","value":"var(--theme-100)"}],"data":[{"id":"_tokens-mc.scss_color-primary-data-medium","label":"color-primary-data-medium","value":"var(--theme-600)"},{"id":"_tokens-mc.scss_color-primary-data","label":"color-primary-data","value":"var(--theme-400)"},{"id":"_tokens-mc.scss_color-primary-data-weak","label":"color-primary-data-weak","value":"var(--theme-300)"},{"id":"_tokens-mc.scss_color-primary-data-ghost","label":"color-primary-data-ghost","value":"var(--theme-200)"}],"background":[{"id":"_tokens-mc.scss_color-primary-background-strong","label":"color-primary-background-strong","value":"var(--theme-500)"},{"id":"_tokens-mc.scss_color-primary-background-strong-hovered","label":"color-primary-background-strong-hovered","value":"var(--theme-600)"},{"id":"_tokens-mc.scss_color-primary-background-strong-focused","label":"color-primary-background-strong-focused","value":"var(--theme-600)"},{"id":"_tokens-mc.scss_color-primary-background-strong-pressed","label":"color-primary-background-strong-pressed","value":"var(--theme-700)"},{"id":"_tokens-mc.scss_color-primary-background-strong-disabled","label":"color-primary-background-strong-disabled","value":"var(--theme-200)"},{"id":"_tokens-mc.scss_color-primary-background-medium","label":"color-primary-background-medium","value":"var(--theme-100)"},{"id":"_tokens-mc.scss_color-primary-background-medium-hovered","label":"color-primary-background-medium-hovered","value":"var(--theme-200)"},{"id":"_tokens-mc.scss_color-primary-background-medium-focused","label":"color-primary-background-medium-focused","value":"var(--theme-200)"},{"id":"_tokens-mc.scss_color-primary-background-medium-pressed","label":"color-primary-background-medium-pressed","value":"var(--theme-300)"},{"id":"_tokens-mc.scss_color-primary-background-medium-disabled","label":"color-primary-background-medium-disabled","value":"var(--theme-50)"},{"id":"_tokens-mc.scss_color-primary-background","label":"color-primary-background","value":"var(--theme-50)"},{"id":"_tokens-mc.scss_color-primary-background-hovered","label":"color-primary-background-hovered","value":"var(--theme-100)"},{"id":"_tokens-mc.scss_color-primary-background-focused","label":"color-primary-background-focused","value":"var(--theme-100)"},{"id":"_tokens-mc.scss_color-primary-background-pressed","label":"color-primary-background-pressed","value":"var(--theme-200)"},{"id":"_tokens-mc.scss_color-primary-background-disabled","label":"color-primary-background-disabled","value":"var(--theme-50)"},{"id":"_tokens-mc.scss_color-primary-background-weak-hovered","label":"color-primary-background-weak-hovered","value":"var(--theme-100)"},{"id":"_tokens-mc.scss_color-primary-background-weak-focused","label":"color-primary-background-weak-focused","value":"var(--theme-100)"},{"id":"_tokens-mc.scss_color-primary-background-weak-pressed","label":"color-primary-background-weak-pressed","value":"var(--theme-200)"},{"id":"_tokens-mc.scss_color-primary-background-ghost","label":"color-primary-background-ghost","value":"rgba(var(--theme-500-rgb), 0)"},{"id":"_tokens-mc.scss_color-primary-background-ghost-hovered","label":"color-primary-background-ghost-hovered","value":"rgba(var(--theme-500-rgb), 0.12)"},{"id":"_tokens-mc.scss_color-primary-background-ghost-focused","label":"color-primary-background-ghost-focused","value":"rgba(var(--theme-500-rgb), 0.12)"},{"id":"_tokens-mc.scss_color-primary-background-ghost-pressed","label":"color-primary-background-ghost-pressed","value":"rgba(var(--theme-500-rgb), 0.18)"},{"id":"_tokens-mc.scss_color-primary-background-ghost-disabled","label":"color-primary-background-ghost-disabled","value":"rgba(var(--theme-500-rgb), 0)"}],"overlay":[{"id":"_tokens-mc.scss_color-primary-overlay","label":"color-primary-overlay","value":"rgba(var(--theme-100-rgb), 0.8)"}],"border":[{"id":"_tokens-mc.scss_color-primary-border","label":"color-primary-border","value":"var(--theme-500)"},{"id":"_tokens-mc.scss_color-primary-border-hovered","label":"color-primary-border-hovered","value":"var(--theme-700)"},{"id":"_tokens-mc.scss_color-primary-border-focused","label":"color-primary-border-focused","value":"var(--theme-700)"},{"id":"_tokens-mc.scss_color-primary-border-disabled","label":"color-primary-border-disabled","value":"var(--theme-200)"},{"id":"_tokens-mc.scss_color-primary-border-weak","label":"color-primary-border-weak","value":"var(--theme-100)"},{"id":"_tokens-mc.scss_color-primary-border-weak-hovered","label":"color-primary-border-weak-hovered","value":"var(--theme-300)"},{"id":"_tokens-mc.scss_color-primary-border-weak-focused","label":"color-primary-border-weak-focused","value":"var(--theme-300)"},{"id":"_tokens-mc.scss_color-primary-border-weak-disabled","label":"color-primary-border-weak-disabled","value":"var(--theme-100)"}],"ripple":[{"id":"_tokens-mc.scss_color-primary-ripple","label":"color-primary-ripple","value":"rgba(var(--theme-500-rgb), 0.12)"}]}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
$color-primary-text-strong: var(--color-primary-text-strong);
|
|
2
|
+
$color-primary-text-strong-hovered: var(--color-primary-text-strong-hovered);
|
|
3
|
+
$color-primary-text-strong-focused: var(--color-primary-text-strong-focused);
|
|
4
|
+
$color-primary-text-strong-disabled: var(--color-primary-text-strong-disabled);
|
|
5
|
+
$color-primary-text: var(--color-primary-text);
|
|
6
|
+
$color-primary-text-hovered: var(--color-primary-text-hovered);
|
|
7
|
+
$color-primary-text-focused: var(--color-primary-text-focused);
|
|
8
|
+
$color-primary-text-disabled: var(--color-primary-text-disabled);
|
|
9
|
+
$color-primary-icon: var(--color-primary-icon);
|
|
10
|
+
$color-primary-icon-hovered: var(--color-primary-icon-hovered);
|
|
11
|
+
$color-primary-icon-focused: var(--color-primary-icon-focused);
|
|
12
|
+
$color-primary-icon-disabled: var(--color-primary-icon-disabled);
|
|
13
|
+
$color-primary-icon-weak: var(--color-primary-icon-weak);
|
|
14
|
+
$color-primary-icon-weak-hovered: var(--color-primary-icon-weak-hovered);
|
|
15
|
+
$color-primary-icon-weak-focused: var(--color-primary-icon-weak-focused);
|
|
16
|
+
$color-primary-icon-weak-disabled: var(--color-primary-icon-weak-disabled);
|
|
17
|
+
$color-primary-data-medium: var(--color-primary-data-medium);
|
|
18
|
+
$color-primary-data: var(--color-primary-data);
|
|
19
|
+
$color-primary-data-weak: var(--color-primary-data-weak);
|
|
20
|
+
$color-primary-data-ghost: var(--color-primary-data-ghost);
|
|
21
|
+
$color-primary-background-strong: var(--color-primary-background-strong);
|
|
22
|
+
$color-primary-background-strong-hovered: var(--color-primary-background-strong-hovered);
|
|
23
|
+
$color-primary-background-strong-focused: var(--color-primary-background-strong-focused);
|
|
24
|
+
$color-primary-background-strong-pressed: var(--color-primary-background-strong-pressed);
|
|
25
|
+
$color-primary-background-strong-disabled: var(--color-primary-background-strong-disabled);
|
|
26
|
+
$color-primary-background-medium: var(--color-primary-background-medium);
|
|
27
|
+
$color-primary-background-medium-hovered: var(--color-primary-background-medium-hovered);
|
|
28
|
+
$color-primary-background-medium-focused: var(--color-primary-background-medium-focused);
|
|
29
|
+
$color-primary-background-medium-pressed: var(--color-primary-background-medium-pressed);
|
|
30
|
+
$color-primary-background-medium-disabled: var(--color-primary-background-medium-disabled);
|
|
31
|
+
$color-primary-background: var(--color-primary-background);
|
|
32
|
+
$color-primary-background-hovered: var(--color-primary-background-hovered);
|
|
33
|
+
$color-primary-background-focused: var(--color-primary-background-focused);
|
|
34
|
+
$color-primary-background-pressed: var(--color-primary-background-pressed);
|
|
35
|
+
$color-primary-background-disabled: var(--color-primary-background-disabled);
|
|
36
|
+
$color-primary-background-weak-hovered: var(--color-primary-background-weak-hovered);
|
|
37
|
+
$color-primary-background-weak-focused: var(--color-primary-background-weak-focused);
|
|
38
|
+
$color-primary-background-weak-pressed: var(--color-primary-background-weak-pressed);
|
|
39
|
+
$color-primary-background-ghost: var(--color-primary-background-ghost);
|
|
40
|
+
$color-primary-background-ghost-hovered: var(--color-primary-background-ghost-hovered);
|
|
41
|
+
$color-primary-background-ghost-focused: var(--color-primary-background-ghost-focused);
|
|
42
|
+
$color-primary-background-ghost-pressed: var(--color-primary-background-ghost-pressed);
|
|
43
|
+
$color-primary-background-ghost-disabled: var(--color-primary-background-ghost-disabled);
|
|
44
|
+
$color-primary-overlay: var(--color-primary-overlay);
|
|
45
|
+
$color-primary-border: var(--color-primary-border);
|
|
46
|
+
$color-primary-border-hovered: var(--color-primary-border-hovered);
|
|
47
|
+
$color-primary-border-focused: var(--color-primary-border-focused);
|
|
48
|
+
$color-primary-border-disabled: var(--color-primary-border-disabled);
|
|
49
|
+
$color-primary-border-weak: var(--color-primary-border-weak);
|
|
50
|
+
$color-primary-border-weak-hovered: var(--color-primary-border-weak-hovered);
|
|
51
|
+
$color-primary-border-weak-focused: var(--color-primary-border-weak-focused);
|
|
52
|
+
$color-primary-border-weak-disabled: var(--color-primary-border-weak-disabled);
|
|
53
|
+
$color-primary-ripple: var(--color-primary-ripple);
|