Tokens

The Modal component tokens.


@use 'node_modules/@sipster/core/tools' as *;

body {
  --sds_modal_overlay_background: var(
    --sds_theme_background_overlay,
    rgba(0, 0, 0, 0.24)
  );

  --sds_modal_header_background: var(
    --sds_theme_background_high,
    #{sds-color(white)}
  );
  --sds_modal_header_text: var(--sds_theme_text, #{sds-color(black)});

  --sds_modal_header_button_background: var(--sds_modal_header_background);
  --sds_modal_header_button_icon: var(
    --sds_theme_icon,
    #{sds-color(neutral, 70)}
  );
  --sds_modal_header_button_interactive_background: var(
    --sds_modal_header_button_background
  );
  --sds_modal_header_button_hover_icon: var(
    --sds_theme_icon_interactive,
    #{sds-color(black)}
  );

  --sds_modal_body_background: var(
    --sds_theme_background_high,
    #{sds-color(white)}
  );

  --sds_modal_footer_background: var(
    --sds_theme_background,
    #{sds-color(neutral, 05)}
  );
  --sds_modal_footer_border: var(--sds_theme_border, #{sds-color(neutral, 30)});
}

Last updated