Tokens

The MiniWizard component tokens.

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

body {
    --sds_miniWizard_background_color: var(--sds_theme_background_high, #{sds-color(white)});
    
    --sds_miniWizard_header_background_color: var(--sds_miniWizard_background_color);
    --sds_miniWizard_header_border_color: var(--sds_theme_border, #{sds-color(neutral, 30)}); 
    --sds_miniWizard_header_text: var(--sds_theme_text, #{sds-color(black)}); 
    --sds_miniWizard_header_button_icon: var(--sds_theme_button_ghost_icon, #{sds-color(neutral, 70)});
    --sds_miniWizard_header_button_interactive_background: var(--sds_theme_button_ghost_interactive_background, #{sds-color(neutral, 20)});
    --sds_miniWizard_header_button_interactive_icon: var(--sds_theme_button_ghost_interactive_icon, #{sds-color(black)});

    --sds_miniWizard_navbar_background_color: var(--sds_theme_background_high, #{sds-color(white)});
    --sds_miniWizard_navbar_border_color: var(--sds_theme_border, #{sds-color(neutral, 30)}); 
    --sds_miniWizard_navbar_button_icon: var(--sds_theme_button_ghost_icon, #{sds-color(neutral, 70)});
    --sds_miniWizard_navbar_button_interactive_background: var(--sds_theme_button_ghost_interactive_background, #{sds-color(neutral, 20)});
    --sds_miniWizard_navbar_button_interactive_icon: var(--sds_theme_button_ghost_interactive_icon, #{sds-color(black)});
    --sds_miniWizard_navbar_text: var(--sds_theme_text, #{sds-color(black)}); 


    --sds_miniWizard_navbar_step_background_color: var(--sds_miniWizard_navbar_background_color);
    --sds_miniWizard_navbar_step_border_radius: var(--sds_theme_border_radius, 0.5rem);
    --sds_miniWizard_navbar_step_text: var(--sds_theme_text_subtle, #{sds-color(neutral, 60)});

    --sds_miniWizard_navbar_step_active_background_color: var(--sds_theme_background, #{sds-color(neutral, 05)});
    --sds_miniWizard_navbar_step_active_icon: var(--sds_theme_color_primary, #{sds-color(indigo, 60)});
    --sds_miniWizard_navbar_step_active_text: var(--sds_theme_color_primary_text, #{sds-color(indigo, 70)});

    --sds_miniWizard_navbar_step_complete_background_color: var(--sds_miniWizard_navbar_step_background_color);
    --sds_miniWizard_navbar_step_complete_icon: var(--sds_theme_color_success, #{sds-color(green, 60)});
    --sds_miniWizard_navbar_step_complete_text: var(--sds_theme_text, #{sds-color(black)});

    --sds_miniWizard_navbar_step_interactive_background: var(--sds_theme_background, #{sds-color(neutral, 05)});

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


    --sds_miniWizard_overlay_background_color: var(--sds_theme_background_overlay, rgba(0,0,0, 0.24));
    --sds_miniWizard_overlay_blur: var(--sds_theme_background_overlay_blur, 4px);
}