Tokens
The Toast component tokens.
@use 'node_modules/@sipster/core/tools' as *;
body {
--sds_toast_background_color: var(
--sds_theme_background_inverted,
#{sds-color(black)}
);
--sds_toast_close_icon: var(
--sds_theme_icon_subtle,
#{sds-color(neutral, 40)}
);
--sds_toast_text: var(--sds_theme_text_inverted, #{sds-color(white)});
--sds_toast_icon: var(--sds_theme_icon_subtle, #{sds-color(neutral, 40)});
--sds_toast_progressbar: var(
--sds_theme_border_interactive,
#{sds-color(neutral, 70)}
);
--sds_toast_success_icon: var(
--sds_theme_color_success,
#{sds-color(green, 60)}
);
--sds_toast_success_progressbar: var(
--sds_theme_color_success,
#{sds-color(green, 60)}
);
--sds_toast_warning_icon: var(
--sds_theme_color_warning,
#{sds-color(yellow, 60)}
);
--sds_toast_warning_progressbar: var(
--sds_theme_color_warning,
#{sds-color(yellow, 60)}
);
--sds_toast_danger_icon: var(--sds_theme_color_danger, #{sds-color(red, 60)});
--sds_toast_danger_progressbar: var(
--sds_theme_color_danger,
#{sds-color(red, 60)}
);
--sds_toast_subtle_background_color: var(
--sds_theme_background_inverted,
#{sds-color(black)}
);
--sds_toast_subtle_icon: var(--sds_theme_icon_inverted, #{sds-color(white)});
--sds_toast_subtle_text: var(--sds_theme_text_inverted, #{sds-color(white)});
}
Last updated