@amboss/design-system 1.25.0 → 1.25.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.
- package/build/scss/_theming.scss +117 -0
- package/package.json +1 -1
package/build/scss/_theming.scss
CHANGED
|
@@ -121,6 +121,123 @@
|
|
|
121
121
|
}
|
|
122
122
|
@mixin ds-theme-dark {
|
|
123
123
|
& {
|
|
124
|
+
--color-canvas: #111111;
|
|
125
|
+
--color-background-primary-default: #1a1c1c;
|
|
126
|
+
--color-background-secondary-default: #1e2125;
|
|
127
|
+
--color-background-secondary-hover: #24282d;
|
|
128
|
+
--color-background-secondary-active: #1e2125;
|
|
129
|
+
--color-background-accent-default: #1d6670;
|
|
130
|
+
--color-background-accent-hover: #2e9aa7;
|
|
131
|
+
--color-background-accent-active: #223c44;
|
|
132
|
+
--color-background-accent-disabled: rgba(29, 102, 112, 0.3);
|
|
133
|
+
--color-background-elevated-default: #24282d;
|
|
134
|
+
--color-background-onAccent-default: #ffffff;
|
|
135
|
+
--color-background-onAccent-hover: #ffffff;
|
|
136
|
+
--color-background-onAccent-active: #ffffff;
|
|
137
|
+
--color-background-onAccent-disabled: rgba(255, 255, 255, 0.6);
|
|
138
|
+
--color-background-error-default: #a45355;
|
|
139
|
+
--color-background-error-hover: #d07c7c;
|
|
140
|
+
--color-background-error-active: #4d3237;
|
|
141
|
+
--color-background-error-disabled: rgba(164, 83, 85, 0.3);
|
|
142
|
+
--color-background-success-default: #28816b;
|
|
143
|
+
--color-background-info-default: #2f538a;
|
|
144
|
+
--color-background-warning-default: #a4792d;
|
|
145
|
+
--color-background-accentSubtle-default: #262f36;
|
|
146
|
+
--color-background-errorSubtle-default: #312b31;
|
|
147
|
+
--color-background-successSubtle-default: #262e33;
|
|
148
|
+
--color-background-infoSubtle-default: #282e39;
|
|
149
|
+
--color-background-warningSubtle-default: #32302f;
|
|
150
|
+
--color-background-textHighlight-primary: rgba(178, 171, 57, 0.45);
|
|
151
|
+
--color-background-textHighlight-secondary: #494a2f;
|
|
152
|
+
--color-background-textHighlight-find: rgba(178, 171, 57, 0.6);
|
|
153
|
+
--color-background-textHighlight-relevancePrimary: #233d3d;
|
|
154
|
+
--color-background-textHighlight-relevanceSecondary: rgba(35, 61, 61, 0.8);
|
|
155
|
+
--color-background-contrast-default: #ced1d6;
|
|
156
|
+
--color-background-transparent-default: rgba(255, 255, 255, 0);
|
|
157
|
+
--color-background-transparent-selected: #40454f;
|
|
158
|
+
--color-background-transparent-hover: rgba(147, 151, 159, 0.08);
|
|
159
|
+
--color-background-transparent-active: rgba(147, 151, 159, 0.08);
|
|
160
|
+
--color-background-transparent-selectedHover: #393e47;
|
|
161
|
+
--color-background-placeholder-default: #393e47;
|
|
162
|
+
--color-background-backdrop-default: rgba(0, 0, 0, 0.6);
|
|
163
|
+
--color-text-primary-default: #ced1d6;
|
|
164
|
+
--color-text-primary-hover: #ffffff;
|
|
165
|
+
--color-text-secondary-default: #b9bcc3;
|
|
166
|
+
--color-text-secondary-hover: #ced1d6;
|
|
167
|
+
--color-text-tertiary-default: #93979f;
|
|
168
|
+
--color-text-tertiary-disabled: rgba(216, 218, 222, 0.3);
|
|
169
|
+
--color-text-tertiary-hover: #b9bcc3;
|
|
170
|
+
--color-text-quaternary-default: #757a84;
|
|
171
|
+
--color-text-accent-default: #2e9aa7;
|
|
172
|
+
--color-text-accent-hover: #80dfea;
|
|
173
|
+
--color-text-onAccent-default: #ffffff;
|
|
174
|
+
--color-text-onAccent-disabled: rgba(216, 218, 222, 0.3);
|
|
175
|
+
--color-text-onAccentSubtle-default: rgba(255, 255, 255, 0.6);
|
|
176
|
+
--color-text-info-default: #99c1fa;
|
|
177
|
+
--color-text-error-default: #f49a9a;
|
|
178
|
+
--color-text-error-disabled: rgba(244, 154, 154, 0.3);
|
|
179
|
+
--color-text-warning-default: #fae0b3;
|
|
180
|
+
--color-text-success-default: #a6f2dd;
|
|
181
|
+
--color-text-underline-default: #757a84;
|
|
182
|
+
--color-text-underline-hover: #93979f;
|
|
183
|
+
--color-text-dottedUnderline-default: #93979f;
|
|
184
|
+
--color-text-dottedUnderline-hover: #b9bcc3;
|
|
185
|
+
--color-icon-primary: #d8dade;
|
|
186
|
+
--color-icon-secondary: #ced1d6;
|
|
187
|
+
--color-icon-tertiary: #93979f;
|
|
188
|
+
--color-icon-quaternary: #757a84;
|
|
189
|
+
--color-icon-accent: #2e9aa7;
|
|
190
|
+
--color-icon-onAccent: #ffffff;
|
|
191
|
+
--color-icon-onAccentSubtle: rgba(255, 255, 255, 0.6);
|
|
192
|
+
--color-icon-info: #6e95cf;
|
|
193
|
+
--color-icon-error: #d07c7c;
|
|
194
|
+
--color-icon-warning: #cbac76;
|
|
195
|
+
--color-icon-success: #41a48a;
|
|
196
|
+
--color-icon-brand: #2e9aa7;
|
|
197
|
+
--color-border-primary-default: #5b5f67;
|
|
198
|
+
--color-border-primary-hover: #757a84;
|
|
199
|
+
--color-border-primary-active: #93979f;
|
|
200
|
+
--color-border-primary-disabled: rgba(147, 151, 159, 0.08);
|
|
201
|
+
--color-border-secondary-default: rgba(147, 149, 159, 0.3);
|
|
202
|
+
--color-border-accent-default: #2e9aa7;
|
|
203
|
+
--color-border-onAccent-default: #ffffff;
|
|
204
|
+
--color-border-accentSubtle-default: #1d6670;
|
|
205
|
+
--color-border-error-default: #d07c7c;
|
|
206
|
+
--color-divider-primary: #32363e;
|
|
207
|
+
--color-divider-secondary: rgba(147, 149, 159, 0.15);
|
|
208
|
+
--color-badge-background-default: transparent;
|
|
209
|
+
--color-badge-background-green: transparent;
|
|
210
|
+
--color-badge-background-blue: transparent;
|
|
211
|
+
--color-badge-background-yellow: transparent;
|
|
212
|
+
--color-badge-background-brand: transparent;
|
|
213
|
+
--color-badge-background-purple: transparent;
|
|
214
|
+
--color-badge-background-red: transparent;
|
|
215
|
+
--color-badge-background-gray: transparent;
|
|
216
|
+
--color-badge-text-default: #ced1d6;
|
|
217
|
+
--color-badge-text-green: #41a48a;
|
|
218
|
+
--color-badge-text-blue: #6e95cf;
|
|
219
|
+
--color-badge-text-yellow: #cbac76;
|
|
220
|
+
--color-badge-text-brand: #2e9aa7;
|
|
221
|
+
--color-badge-text-purple: #ad97f7;
|
|
222
|
+
--color-badge-text-red: #d07c7c;
|
|
223
|
+
--color-badge-text-gray: #93979f;
|
|
224
|
+
--color-badge-border-default: #393e47;
|
|
225
|
+
--color-badge-border-green: #393e47;
|
|
226
|
+
--color-badge-border-blue: #393e47;
|
|
227
|
+
--color-badge-border-yellow: #393e47;
|
|
228
|
+
--color-badge-border-brand: #393e47;
|
|
229
|
+
--color-badge-border-purple: #393e47;
|
|
230
|
+
--color-badge-border-red: #393e47;
|
|
231
|
+
--color-badge-border-gray: #393e47;
|
|
232
|
+
--color-segmented-progress-bar-monochrome: #ced1d6;
|
|
233
|
+
--color-segmented-progress-bar-success: #28816b;
|
|
234
|
+
--color-segmented-progress-bar-warning: #a4792d;
|
|
235
|
+
--color-segmented-progress-bar-alert: #a45355;
|
|
236
|
+
--color-segmented-progress-bar-in-progress: #5b5f67;
|
|
237
|
+
--elevation-1: 0px 2px 5px 0px rgba(0, 0, 0, 0.07), 0px 0.3px 0.6px 0px rgba(0, 0, 0, 0), 0px 0px 0px 1px rgba(64, 69, 79, 0.4) inset;
|
|
238
|
+
--elevation-2: 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.4) inset;
|
|
239
|
+
--elevation-3: 0px 4px 20px 0px rgba(0, 0, 0, 0.2), 0px 0.5px 2.5px 0px rgba(0, 0, 0, 0.16), 0px 0px 0px 1px rgba(64, 69, 79, 0.5) inset;
|
|
240
|
+
--elevation-4: 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.5) inset;
|
|
124
241
|
}
|
|
125
242
|
}
|
|
126
243
|
@mixin theming($theme-name: ".dark-theme") {
|