@amboss/design-system 1.16.4 → 1.16.5
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/build/scss/_variables.scss +111 -226
- package/package.json +2 -2
|
@@ -1,226 +1,111 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
$
|
|
6
|
-
$
|
|
7
|
-
$
|
|
8
|
-
$
|
|
9
|
-
$
|
|
10
|
-
$
|
|
11
|
-
$
|
|
12
|
-
$
|
|
13
|
-
$
|
|
14
|
-
$
|
|
15
|
-
$
|
|
16
|
-
$
|
|
17
|
-
$
|
|
18
|
-
$
|
|
19
|
-
$
|
|
20
|
-
$
|
|
21
|
-
$
|
|
22
|
-
$
|
|
23
|
-
$
|
|
24
|
-
$
|
|
25
|
-
$
|
|
26
|
-
$
|
|
27
|
-
$
|
|
28
|
-
$
|
|
29
|
-
$
|
|
30
|
-
$
|
|
31
|
-
$
|
|
32
|
-
$
|
|
33
|
-
$
|
|
34
|
-
$
|
|
35
|
-
$
|
|
36
|
-
$
|
|
37
|
-
$
|
|
38
|
-
$
|
|
39
|
-
$
|
|
40
|
-
$
|
|
41
|
-
$
|
|
42
|
-
$
|
|
43
|
-
$
|
|
44
|
-
$
|
|
45
|
-
$
|
|
46
|
-
$
|
|
47
|
-
$
|
|
48
|
-
$
|
|
49
|
-
$
|
|
50
|
-
$
|
|
51
|
-
$
|
|
52
|
-
$
|
|
53
|
-
$
|
|
54
|
-
$
|
|
55
|
-
$
|
|
56
|
-
$
|
|
57
|
-
$
|
|
58
|
-
$
|
|
59
|
-
$
|
|
60
|
-
$
|
|
61
|
-
$
|
|
62
|
-
$
|
|
63
|
-
$
|
|
64
|
-
$
|
|
65
|
-
$
|
|
66
|
-
$
|
|
67
|
-
$
|
|
68
|
-
$
|
|
69
|
-
$
|
|
70
|
-
$
|
|
71
|
-
$
|
|
72
|
-
$
|
|
73
|
-
$
|
|
74
|
-
$
|
|
75
|
-
$
|
|
76
|
-
$
|
|
77
|
-
$
|
|
78
|
-
$
|
|
79
|
-
$
|
|
80
|
-
$
|
|
81
|
-
$
|
|
82
|
-
$
|
|
83
|
-
$
|
|
84
|
-
$
|
|
85
|
-
$
|
|
86
|
-
$
|
|
87
|
-
$
|
|
88
|
-
$
|
|
89
|
-
$
|
|
90
|
-
$
|
|
91
|
-
$
|
|
92
|
-
$
|
|
93
|
-
$
|
|
94
|
-
$
|
|
95
|
-
$
|
|
96
|
-
$
|
|
97
|
-
$
|
|
98
|
-
$
|
|
99
|
-
$
|
|
100
|
-
$
|
|
101
|
-
$
|
|
102
|
-
$
|
|
103
|
-
$
|
|
104
|
-
$
|
|
105
|
-
$
|
|
106
|
-
$
|
|
107
|
-
$
|
|
108
|
-
$
|
|
109
|
-
$
|
|
110
|
-
$
|
|
111
|
-
$
|
|
112
|
-
$dark-elevation-a: 0px 2px 5px 0px rgba(0, 0, 0, 0.07), 0px 0.3px 0.6px 0px rgba(0, 0, 0, 0.00), 0px 0px 0px 1px rgba(64, 69, 79, 0.40) inset;
|
|
113
|
-
$dark-elevation-b: 0px 2px 8px 0px rgba(0, 0, 0, 0.12), 0px 0.3px 1px 0px rgba(0, 0, 0, 0.01), 0px 0px 0px 1px rgba(64, 69, 79, 0.40) inset;
|
|
114
|
-
$dark-elevation-c: 0px 4px 20px 0px rgba(0, 0, 0, 0.20), 0px 0.5px 2.5px 0px rgba(0, 0, 0, 0.16), 0px 0px 0px 1px rgba(64, 69, 79, 0.50) inset;
|
|
115
|
-
$dark-elevation-d: 0px 32px 112px 0px rgba(0, 0, 0, 0.24), 0px 4px 14px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(64, 69, 79, 0.50) inset;
|
|
116
|
-
$light-color-canvas: #eef2f5;
|
|
117
|
-
$light-color-background-primary-default: #ffffff;
|
|
118
|
-
$light-color-background-secondary-default: #f5f7f9;
|
|
119
|
-
$light-color-background-secondary-hover: #eef2f5;
|
|
120
|
-
$light-color-background-secondary-active: #ffffff;
|
|
121
|
-
$light-color-background-accent-default: #0fa980;
|
|
122
|
-
$light-color-background-accent-hover: #0b8363;
|
|
123
|
-
$light-color-background-accent-active: #0a5c45;
|
|
124
|
-
$light-color-background-accent-disabled: rgba(15, 169, 128, 0.3);
|
|
125
|
-
$light-color-background-onAccent-default: #ffffff;
|
|
126
|
-
$light-color-background-onAccent-hover: #ffffff;
|
|
127
|
-
$light-color-background-onAccent-active: #ffffff;
|
|
128
|
-
$light-color-background-onAccent-disabled: rgba(255, 255, 255, 0.6);
|
|
129
|
-
$light-color-background-error-default: #dc4847;
|
|
130
|
-
$light-color-background-error-hover: #c02725;
|
|
131
|
-
$light-color-background-error-active: #c02725;
|
|
132
|
-
$light-color-background-error-disabled: rgba(238, 97, 96, 0.3);
|
|
133
|
-
$light-color-background-success-default: #0b8363;
|
|
134
|
-
$light-color-background-info-default: #295dae;
|
|
135
|
-
$light-color-background-warning-default: #df9411;
|
|
136
|
-
$light-color-background-accentSubtle-default: #e8f8f4;
|
|
137
|
-
$light-color-background-errorSubtle-default: #fde8e8;
|
|
138
|
-
$light-color-background-successSubtle-default: #e8f8f4;
|
|
139
|
-
$light-color-background-infoSubtle-default: #e7effe;
|
|
140
|
-
$light-color-background-warningSubtle-default: #fef3e1;
|
|
141
|
-
$light-color-background-highlight-default: #607585;
|
|
142
|
-
$light-color-background-highlight-hover: #40515e;
|
|
143
|
-
$light-color-background-contrast-default: #314554;
|
|
144
|
-
$light-color-background-transparent-default: rgba(255, 255, 255, 0);
|
|
145
|
-
$light-color-background-transparent-hover: rgba(96, 117, 133, 0.08);
|
|
146
|
-
$light-color-background-transparent-active: rgba(96, 117, 133, 0.08);
|
|
147
|
-
$light-color-background-backdrop-default: rgba(0, 0, 0, 0.6);
|
|
148
|
-
$light-color-text-primary-default: #1a1c1c;
|
|
149
|
-
$light-color-text-primary-hover: #1a1c1c;
|
|
150
|
-
$light-color-text-secondary-default: #40515e;
|
|
151
|
-
$light-color-text-secondary-hover: #40515e;
|
|
152
|
-
$light-color-text-tertiary-default: #607585;
|
|
153
|
-
$light-color-text-tertiary-disabled: rgba(64, 81, 94, 0.3);
|
|
154
|
-
$light-color-text-tertiary-hover: #40515e;
|
|
155
|
-
$light-color-text-quaternary-default: #a3b2bd;
|
|
156
|
-
$light-color-text-accent-default: #0b8363;
|
|
157
|
-
$light-color-text-accent-hover: #0a5c45;
|
|
158
|
-
$light-color-text-onAccent-default: #ffffff;
|
|
159
|
-
$light-color-text-onAccent-disabled: rgba(255, 255, 255, 0.6);
|
|
160
|
-
$light-color-text-info-default: #1c427d;
|
|
161
|
-
$light-color-text-error-default: #c02725;
|
|
162
|
-
$light-color-text-error-disabled: rgba(192, 39, 37, 0.3);
|
|
163
|
-
$light-color-text-warning-default: #314554;
|
|
164
|
-
$light-color-text-success-default: #0a5c45;
|
|
165
|
-
$light-color-icon-primary: #1a1c1c;
|
|
166
|
-
$light-color-icon-secondary: #40515e;
|
|
167
|
-
$light-color-icon-tertiary: #607585;
|
|
168
|
-
$light-color-icon-quaternary: #a3b2bd;
|
|
169
|
-
$light-color-icon-accent: #0b8363;
|
|
170
|
-
$light-color-icon-onAccent: #ffffff;
|
|
171
|
-
$light-color-icon-info: #295dae;
|
|
172
|
-
$light-color-icon-error: #dc4847;
|
|
173
|
-
$light-color-icon-warning: #df9411;
|
|
174
|
-
$light-color-icon-success: #0b8363;
|
|
175
|
-
$light-color-icon-brand: #0aa6b8;
|
|
176
|
-
$light-color-border-primary-default: #a3b2bd;
|
|
177
|
-
$light-color-border-primary-hover: #607585;
|
|
178
|
-
$light-color-border-primary-active: #40515e;
|
|
179
|
-
$light-color-border-primary-disabled: rgba(163, 178, 189, 0.3);
|
|
180
|
-
$light-color-border-secondary-default: rgba(163, 178, 189, 0.3);
|
|
181
|
-
$light-color-border-accent-default: #0b8363;
|
|
182
|
-
$light-color-border-error-default: #dc4847;
|
|
183
|
-
$light-color-border-accentSubtle-default: #8adcc6;
|
|
184
|
-
$light-color-divider-primary: #e0e6eb;
|
|
185
|
-
$light-color-divider-secondary: rgba(163, 178, 189, 0.3);
|
|
186
|
-
$light-color-toggle-background-highlight: #f3eb75;
|
|
187
|
-
$light-color-toggle-border-highlight: #f3eb75;
|
|
188
|
-
$light-color-badge-background-default: #ffffff;
|
|
189
|
-
$light-color-badge-background-green: #e8f8f4;
|
|
190
|
-
$light-color-badge-background-blue: #e7effe;
|
|
191
|
-
$light-color-badge-background-yellow: #fef3e1;
|
|
192
|
-
$light-color-badge-background-brand: #e7f6f8;
|
|
193
|
-
$light-color-badge-background-purple: #f2effb;
|
|
194
|
-
$light-color-badge-background-red: #fde8e8;
|
|
195
|
-
$light-color-badge-background-gray: #eef2f5;
|
|
196
|
-
$light-color-badge-text-default: #1a1c1c;
|
|
197
|
-
$light-color-badge-text-green: #0b8363;
|
|
198
|
-
$light-color-badge-text-blue: #295dae;
|
|
199
|
-
$light-color-badge-text-yellow: #9a6304;
|
|
200
|
-
$light-color-badge-text-brand: #067c89;
|
|
201
|
-
$light-color-badge-text-purple: #5d44ab;
|
|
202
|
-
$light-color-badge-text-red: #c02725;
|
|
203
|
-
$light-color-badge-text-gray: #607585;
|
|
204
|
-
$light-color-badge-border-default: #e0e6eb;
|
|
205
|
-
$light-color-badge-border-green: #e8f8f4;
|
|
206
|
-
$light-color-badge-border-blue: #e7effe;
|
|
207
|
-
$light-color-badge-border-yellow: #fef3e1;
|
|
208
|
-
$light-color-badge-border-brand: #e7f6f8;
|
|
209
|
-
$light-color-badge-border-purple: #f2effb;
|
|
210
|
-
$light-color-badge-border-red: #fde8e8;
|
|
211
|
-
$light-color-badge-border-gray: #eef2f5;
|
|
212
|
-
$light-color-segmented-progress-bar-monochrome: #607585;
|
|
213
|
-
$light-color-segmented-progress-bar-success: #39d6ac;
|
|
214
|
-
$light-color-segmented-progress-bar-warning: #f1d56b;
|
|
215
|
-
$light-color-segmented-progress-bar-alert: #f07575;
|
|
216
|
-
$light-color-segmented-progress-bar-in-progress: #e0e6eb;
|
|
217
|
-
$light-color-tag-background-gray: #e0e6eb;
|
|
218
|
-
$light-color-tag-background-blue: #d2e2f9;
|
|
219
|
-
$light-color-tag-text-gray: #40515e;
|
|
220
|
-
$light-color-tag-text-blue: #1c427d;
|
|
221
|
-
$light-color-destructive-tertiary-button-background-hover: rgba(238, 97, 96, 0.08);
|
|
222
|
-
$light-color-destructive-tertiary-button-background-active: rgba(238, 97, 96, 0.08);
|
|
223
|
-
$light-elevation-a: 0px 0.3px 0.6px rgba(0, 0, 0, 0.0035), 0px 2px 5px rgba(0, 0, 0, 0.07);
|
|
224
|
-
$light-elevation-b: 0px 2px 8px 0px rgba(0, 0, 0, 0.12), 0px 0.3px 1px 0px rgba(0, 0, 0, 0.01);
|
|
225
|
-
$light-elevation-c: 0px 0.5px 2.5px rgba(0, 0, 0, 0.16), 0px 4px 20px rgba(0, 0, 0, 0.2);
|
|
226
|
-
$light-elevation-d: 0px 0.5px 2.5px rgba(0, 0, 0, 0.16), 0px 4px 20px rgba(0, 0, 0, 0.2);
|
|
1
|
+
$colorCanvas: var(--color-canvas);
|
|
2
|
+
$colorBackgroundPrimary: var(--color-background-primary-default);
|
|
3
|
+
$colorBackgroundSecondary: var(--color-background-secondary-default);
|
|
4
|
+
$colorBackgroundSecondaryHover: var(--color-background-secondary-hover);
|
|
5
|
+
$colorBackgroundSecondaryActive: var(--color-background-secondary-active);
|
|
6
|
+
$colorBackgroundAccent: var(--color-background-accent-default);
|
|
7
|
+
$colorBackgroundAccentHover: var(--color-background-accent-hover);
|
|
8
|
+
$colorBackgroundAccentActive: var(--color-background-accent-active);
|
|
9
|
+
$colorBackgroundAccentDisabled: var(--color-background-accent-disabled);
|
|
10
|
+
$colorBackgroundOnAccent: var(--color-background-onAccent-default);
|
|
11
|
+
$colorBackgroundOnAccentHover: var(--color-background-onAccent-hover);
|
|
12
|
+
$colorBackgroundOnAccentActive: var(--color-background-onAccent-active);
|
|
13
|
+
$colorBackgroundOnAccentDisabled: var(--color-background-onAccent-disabled);
|
|
14
|
+
$colorBackgroundError: var(--color-background-error-default);
|
|
15
|
+
$colorBackgroundErrorHover: var(--color-background-error-hover);
|
|
16
|
+
$colorBackgroundErrorActive: var(--color-background-error-active);
|
|
17
|
+
$colorBackgroundErrorDisabled: var(--color-background-error-disabled);
|
|
18
|
+
$colorBackgroundSuccess: var(--color-background-success-default);
|
|
19
|
+
$colorBackgroundInfo: var(--color-background-info-default);
|
|
20
|
+
$colorBackgroundWarning: var(--color-background-warning-default);
|
|
21
|
+
$colorBackgroundAccentSubtle: var(--color-background-accentSubtle-default);
|
|
22
|
+
$colorBackgroundErrorSubtle: var(--color-background-errorSubtle-default);
|
|
23
|
+
$colorBackgroundSuccessSubtle: var(--color-background-successSubtle-default);
|
|
24
|
+
$colorBackgroundInfoSubtle: var(--color-background-infoSubtle-default);
|
|
25
|
+
$colorBackgroundWarningSubtle: var(--color-background-warningSubtle-default);
|
|
26
|
+
$colorBackgroundHighlight: var(--color-background-highlight-default);
|
|
27
|
+
$colorBackgroundHighlightHover: var(--color-background-highlight-hover);
|
|
28
|
+
$colorBackgroundContrast: var(--color-background-contrast-default);
|
|
29
|
+
$colorBackgroundTransparent: var(--color-background-transparent-default);
|
|
30
|
+
$colorBackgroundTransparentHover: var(--color-background-transparent-hover);
|
|
31
|
+
$colorBackgroundTransparentActive: var(--color-background-transparent-active);
|
|
32
|
+
$colorBackgroundBackdrop: var(--color-background-backdrop-default);
|
|
33
|
+
$colorTextPrimary: var(--color-text-primary-default);
|
|
34
|
+
$colorTextPrimaryHover: var(--color-text-primary-hover);
|
|
35
|
+
$colorTextSecondary: var(--color-text-secondary-default);
|
|
36
|
+
$colorTextSecondaryHover: var(--color-text-secondary-hover);
|
|
37
|
+
$colorTextTertiary: var(--color-text-tertiary-default);
|
|
38
|
+
$colorTextTertiaryDisabled: var(--color-text-tertiary-disabled);
|
|
39
|
+
$colorTextTertiaryHover: var(--color-text-tertiary-hover);
|
|
40
|
+
$colorTextQuaternary: var(--color-text-quaternary-default);
|
|
41
|
+
$colorTextAccent: var(--color-text-accent-default);
|
|
42
|
+
$colorTextAccentHover: var(--color-text-accent-hover);
|
|
43
|
+
$colorTextOnAccent: var(--color-text-onAccent-default);
|
|
44
|
+
$colorTextOnAccentDisabled: var(--color-text-onAccent-disabled);
|
|
45
|
+
$colorTextInfo: var(--color-text-info-default);
|
|
46
|
+
$colorTextError: var(--color-text-error-default);
|
|
47
|
+
$colorTextErrorDisabled: var(--color-text-error-disabled);
|
|
48
|
+
$colorTextWarning: var(--color-text-warning-default);
|
|
49
|
+
$colorTextSuccess: var(--color-text-success-default);
|
|
50
|
+
$colorIconPrimary: var(--color-icon-primary);
|
|
51
|
+
$colorIconSecondary: var(--color-icon-secondary);
|
|
52
|
+
$colorIconTertiary: var(--color-icon-tertiary);
|
|
53
|
+
$colorIconQuaternary: var(--color-icon-quaternary);
|
|
54
|
+
$colorIconAccent: var(--color-icon-accent);
|
|
55
|
+
$colorIconOnAccent: var(--color-icon-onAccent);
|
|
56
|
+
$colorIconInfo: var(--color-icon-info);
|
|
57
|
+
$colorIconError: var(--color-icon-error);
|
|
58
|
+
$colorIconWarning: var(--color-icon-warning);
|
|
59
|
+
$colorIconSuccess: var(--color-icon-success);
|
|
60
|
+
$colorIconBrand: var(--color-icon-brand);
|
|
61
|
+
$colorBorderPrimary: var(--color-border-primary-default);
|
|
62
|
+
$colorBorderPrimaryHover: var(--color-border-primary-hover);
|
|
63
|
+
$colorBorderPrimaryActive: var(--color-border-primary-active);
|
|
64
|
+
$colorBorderPrimaryDisabled: var(--color-border-primary-disabled);
|
|
65
|
+
$colorBorderSecondary: var(--color-border-secondary-default);
|
|
66
|
+
$colorBorderAccent: var(--color-border-accent-default);
|
|
67
|
+
$colorBorderError: var(--color-border-error-default);
|
|
68
|
+
$colorBorderAccentSubtle: var(--color-border-accentSubtle-default);
|
|
69
|
+
$colorDividerPrimary: var(--color-divider-primary);
|
|
70
|
+
$colorDividerSecondary: var(--color-divider-secondary);
|
|
71
|
+
$colorToggleBackgroundHighlight: var(--color-toggle-background-highlight);
|
|
72
|
+
$colorToggleBorderHighlight: var(--color-toggle-border-highlight);
|
|
73
|
+
$colorBadgeBackground: var(--color-badge-background-default);
|
|
74
|
+
$colorBadgeBackgroundGreen: var(--color-badge-background-green);
|
|
75
|
+
$colorBadgeBackgroundBlue: var(--color-badge-background-blue);
|
|
76
|
+
$colorBadgeBackgroundYellow: var(--color-badge-background-yellow);
|
|
77
|
+
$colorBadgeBackgroundBrand: var(--color-badge-background-brand);
|
|
78
|
+
$colorBadgeBackgroundPurple: var(--color-badge-background-purple);
|
|
79
|
+
$colorBadgeBackgroundRed: var(--color-badge-background-red);
|
|
80
|
+
$colorBadgeBackgroundGray: var(--color-badge-background-gray);
|
|
81
|
+
$colorBadgeText: var(--color-badge-text-default);
|
|
82
|
+
$colorBadgeTextGreen: var(--color-badge-text-green);
|
|
83
|
+
$colorBadgeTextBlue: var(--color-badge-text-blue);
|
|
84
|
+
$colorBadgeTextYellow: var(--color-badge-text-yellow);
|
|
85
|
+
$colorBadgeTextBrand: var(--color-badge-text-brand);
|
|
86
|
+
$colorBadgeTextPurple: var(--color-badge-text-purple);
|
|
87
|
+
$colorBadgeTextRed: var(--color-badge-text-red);
|
|
88
|
+
$colorBadgeTextGray: var(--color-badge-text-gray);
|
|
89
|
+
$colorBadgeBorder: var(--color-badge-border-default);
|
|
90
|
+
$colorBadgeBorderGreen: var(--color-badge-border-green);
|
|
91
|
+
$colorBadgeBorderBlue: var(--color-badge-border-blue);
|
|
92
|
+
$colorBadgeBorderYellow: var(--color-badge-border-yellow);
|
|
93
|
+
$colorBadgeBorderBrand: var(--color-badge-border-brand);
|
|
94
|
+
$colorBadgeBorderPurple: var(--color-badge-border-purple);
|
|
95
|
+
$colorBadgeBorderRed: var(--color-badge-border-red);
|
|
96
|
+
$colorBadgeBorderGray: var(--color-badge-border-gray);
|
|
97
|
+
$colorSegmentedProgressBarMonochrome: var(--color-segmented-progress-bar-monochrome);
|
|
98
|
+
$colorSegmentedProgressBarSuccess: var(--color-segmented-progress-bar-success);
|
|
99
|
+
$colorSegmentedProgressBarWarning: var(--color-segmented-progress-bar-warning);
|
|
100
|
+
$colorSegmentedProgressBarAlert: var(--color-segmented-progress-bar-alert);
|
|
101
|
+
$colorSegmentedProgressBarInProgress: var(--color-segmented-progress-bar-in-progress);
|
|
102
|
+
$colorTagBackgroundGray: var(--color-tag-background-gray);
|
|
103
|
+
$colorTagBackgroundBlue: var(--color-tag-background-blue);
|
|
104
|
+
$colorTagTextGray: var(--color-tag-text-gray);
|
|
105
|
+
$colorTagTextBlue: var(--color-tag-text-blue);
|
|
106
|
+
$colorDestructiveTertiaryButtonBackgroundHover: var(--color-destructive-tertiary-button-background-hover);
|
|
107
|
+
$colorDestructiveTertiaryButtonBackgroundActive: var(--color-destructive-tertiary-button-background-active);
|
|
108
|
+
$elevationA: var(--elevation-a);
|
|
109
|
+
$elevationB: var(--elevation-b);
|
|
110
|
+
$elevationC: var(--elevation-c);
|
|
111
|
+
$elevationD: var(--elevation-d);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@amboss/design-system",
|
|
3
|
-
"version": "1.16.
|
|
3
|
+
"version": "1.16.5",
|
|
4
4
|
"description": "the design system for AMBOSS products",
|
|
5
5
|
"author": "Bagrat Gobedashvili",
|
|
6
6
|
"license": "ISC",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"import": "./build/esm/src/index.js",
|
|
13
13
|
"require": "./build/cjs/src/index.js"
|
|
14
14
|
},
|
|
15
|
-
"./scss/": "./build/scss"
|
|
15
|
+
"./scss/": "./build/scss/"
|
|
16
16
|
},
|
|
17
17
|
"sideEffects": false,
|
|
18
18
|
"bugs": {
|