Skip to content

Commit b5b3e0e

Browse files
refactor(toasts): add accent, dark, disabled, gray, gray-dark, gray-light, info, light, and secondary colors.
1 parent ed96a91 commit b5b3e0e

File tree

1 file changed

+46
-6
lines changed

1 file changed

+46
-6
lines changed

src/_toasts.scss

Lines changed: 46 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,57 @@
1818
padding: get-var('layout-spacing', $unit: 1);
1919
width: 100%;
2020

21-
// TODO: Add accent toast, info toast.
21+
&.toast-accent {
22+
@include toast-variant('accent-color');
23+
}
24+
25+
&.toast-dark {
26+
@include toast-variant('dark-color');
27+
}
28+
29+
&.toast-disabled {
30+
@include toast-variant('disabled-color');
31+
color: color('disabled-color', $lightness: -10%);
32+
}
33+
34+
&.toast-error {
35+
// @include toast-variant($error-color); // old spectre.css
36+
@include toast-variant('error-color');
37+
}
38+
39+
&.toast-gray {
40+
@include toast-variant('gray-color');
41+
}
42+
43+
&.toast-gray-dark {
44+
@include toast-variant('gray-color-dark');
45+
}
46+
47+
&.toast-gray-light {
48+
@include toast-variant('gray-color-light');
49+
color: color('gray-color-dark');
50+
}
51+
52+
&.toast-info {
53+
@include toast-variant('info-color');
54+
color: color('info-color', $lightness: -60%);
55+
}
56+
57+
&.toast-light {
58+
@include toast-variant('light-color');
59+
color: color('body-font-color');
60+
}
61+
2262
&.toast-primary {
2363
// @include toast-variant($primary-color); // old spectre.css
2464
@include toast-variant('primary-color');
2565
}
2666

67+
&.toast-secondary {
68+
@include toast-variant('secondary-color');
69+
color: color('primary-color');
70+
}
71+
2772
&.toast-success {
2873
// @include toast-variant($success-color); // old spectre.css
2974
@include toast-variant('success-color');
@@ -34,11 +79,6 @@
3479
@include toast-variant('warning-color');
3580
}
3681

37-
&.toast-error {
38-
// @include toast-variant($error-color); // old spectre.css
39-
@include toast-variant('error-color');
40-
}
41-
4282
a {
4383
// color: $light-color; // old spectre.css
4484
color: color('light-color');

0 commit comments

Comments
 (0)