Tokens
body {
//normal accordion
--sds_accordion_background_color: var(
--sds_theme_background,
#{sds-color(neutral, 05)}
);
--sds_accordion_border_color: var(
--sds_theme_border,
#{sds-color(neutral, 30)}
);
--sds_accordion_indicator: var(--sds_theme_icon, #{sds-color(neutral, 70)});
--sds_accordion_text: var(--sds_theme_text, #{sds-color(black)});
//normal accordion expanded
--sds_accordion_expanded_background_color: var(
--sds_accordion_background_color
);
--sds_accordion_expanded_border_color: var(--sds_accordion_border_color);
--sds_accordion_expanded_indicator: var(--sds_accordion_indicator);
--sds_accordion_expanded_text: var(--sds_accordion_text);
//normal accordion hover
--sds_accordion_hover_background_color: var(
--sds_theme_background_high,
#{sds-color(white)}
);
--sds_accordion_hover_border_color: var(--sds_accordion_border_color);
--sds_accordion_hover_indicator: var(--sds_accordion_indicator);
--sds_accordion_hover_text: var(--sds_accordion_text);
//normal accordion hover expanded
--sds_accordion_expanded_hover_background_color: var(
--sds_accordion_hover_background_color
);
--sds_accordion_expanded_hover_border_color: var(
--sds_accordion_hover_border_color
);
--sds_accordion_expanded_hover_indicator: var(
--sds_accordion_hover_indicator
);
--sds_accordion_expanded_hover_text: var(--sds_accordion_hover_text);
//normal accordion focus
--sds_accordion_focus_background_color: var(
--sds_accordion_hover_background_color
);
--sds_accordion_focus_border_color: var(
--sds_theme_focus_border,
var(--sds_theme_color_primary)
);
--sds_accordion_focus_indicator: var(--sds_accordion_hover_indicator);
--sds_accordion_focus_text: var(--sds_accordion_hover_text);
//normal accordion focus expanded
--sds_accordion_expanded_focus_background_color: var(
--sds_accordion_focus_background_color
);
--sds_accordion_expanded_focus_border_color: var(
--sds_accordion_focus_border_color
);
--sds_accordion_expanded_focus_indicator: var(
--sds_accordion_focus_indicator
);
--sds_accordion_expanded_focus_text: var(--sds_accordion_focus_text);
//container accordion
--sds_accordion_container_background_color: var(
--sds_theme_background_high,
#{sds-color(white)}
);
--sds_accordion_container_border_color: transparent;
--sds_accordion_container_border_radius: var(
--sds_theme_border_radius,
0.5rem
);
--sds_accordion_container_indicator: var(
--sds_theme_icon,
#{sds-color(neutral, 70)}
);
--sds_accordion_container_text: var(--sds_theme_text, #{sds-color(black)});
//container accordion expanded
--sds_accordion_container_expanded_background_color: var(
--sds_accordion_container_background_color
);
--sds_accordion_container_expanded_border_color: var(
--sds_accordion_container_border_color
);
--sds_accordion_container_expanded_border_radius: var(
--sds_accordion_container_border_radius
);
--sds_accordion_container_expanded_indicator: var(
--sds_accordion_container_indicator
);
--sds_accordion_container_expanded_text: var(--sds_accordion_container_text);
//container accordion hover
--sds_accordion_container_hover_background_color: var(
--sds_accordion_container_background_color
);
--sds_accordion_container_hover_border_color: var(
--sds_theme_border,
#{sds-color(neutral, 30)}
);
--sds_accordion_container_hover_border_radius: var(
--sds_accordion_container_border_radius
);
--sds_accordion_container_hover_indicator: var(
--sds_accordion_container_indicator
);
--sds_accordion_container_hover_text: var(--sds_accordion_container_text);
//container accordion expanded hover
--sds_accordion_container_expanded_hover_background_color: var(
--sds_accordion_container_hover_background_color
);
--sds_accordion_container_expanded_hover_border_color: var(
--sds_accordion_container_hover_border_color
);
--sds_accordion_container_expanded_hover_border_radius: var(
--sds_accordion_container_hover_border_radius
);
--sds_accordion_container_expanded_hover_indicator: var(
--sds_accordion_container_hover_indicator
);
--sds_accordion_container_expanded_hover_text: var(
--sds_accordion_container_hover_text
);
//container accordion focus
--sds_accordion_container_focus_background_color: var(
--sds_accordion_container_hover_background_color
);
--sds_accordion_container_focus_border_color: var(
--sds_theme_focus_border,
var(--sds_theme_color_primary)
);
--sds_accordion_container_focus_border_radius: var(
--sds_accordion_container_hover_border_radius
);
--sds_accordion_container_focus_indicator: var(
--sds_accordion_container_hover_indicator
);
--sds_accordion_container_focus_text: var(
--sds_accordion_container_hover_text
);
//container accordion expanded focus
--sds_accordion_container_expanded_focus_background_color: var(
--sds_accordion_container_focus_background_color
);
--sds_accordion_container_expanded_focus_border_color: var(
--sds_accordion_container_focus_border_color
);
--sds_accordion_container_expanded_focus_border_radius: var(
--sds_accordion_container_focus_border_radius
);
--sds_accordion_container_expanded_focus_indicator: var(
--sds_accordion_container_focus_indicator
);
--sds_accordion_container_expanded_focus_text: var(
--sds_accordion_container_focus_text
);
}
Last updated