Tokens

The MiniWizard component tokens.


body {
    --sds_wizard_background_color: var(--sds_theme_background, #{sds-color(neutral, 05)});
    
    --sds_wizard_header_background_color: var(--sds_theme_background_high, #{sds-color(white)});
    --sds_wizard_header_border_color: var(--sds_theme_border, #{sds-color(neutral, 30)}); 
    --sds_wizard_header_text: var(--sds_theme_text, #{sds-color(black)}); 
    --sds_wizard_header_button_icon: var(--sds_theme_button_ghost_icon, #{sds-color(neutral, 70)});
    --sds_wizard_header_button_interactive_background: var(--sds_theme_button_ghost_interactive_background, #{sds-color(neutral, 20)});
    --sds_wizard_header_button_interactive_icon: var(--sds_theme_button_ghost_interactive_icon, #{sds-color(black)});

    --sds_wizard_navbar_background_color: var(--sds_theme_background, #{sds-color(white)});
    --sds_wizard_navbar_border_color: var(--sds_theme_border, #{sds-color(neutral, 30)}); 
    --sds_wizard_navbar_text: var(--sds_theme_text, #{sds-color(black)}); 
    --sds_wizard_navbar_button_icon: var(--sds_theme_button_ghost_icon, #{sds-color(neutral, 70)});
    --sds_wizard_navbar_button_interactive_background: var(--sds_theme_button_ghost_interactive_background, #{sds-color(neutral, 20)});
    --sds_wizard_navbar_button_interactive_icon: var(--sds_theme_button_ghost_interactive_icon, #{sds-color(black)});
    
    --sds_wizard_navbar_step_background_color: var(--sds_wizard_navbar_background_color);
    --sds_wizard_navbar_step_border_radius: var(--sds_theme_border_radius, 0.5rem);
    --sds_wizard_navbar_step_text: var(--sds_theme_text_subtle, #{sds-color(neutral, 60)});
    
    --sds_wizard_navbar_step_active_background_color: var(--sds_theme_background_high, #{sds-color(neutral, 05)});
    --sds_wizard_navbar_step_active_icon: var(--sds_theme_color_primary, #{sds-color(indigo, 60)});
    --sds_wizard_navbar_step_active_text: var(--sds_theme_color_primary_text, #{sds-color(indigo, 70)});
    
    --sds_wizard_overlay: var(--sds_theme_background_overlay);
    --sds_wizard_blurOverlay: var(--sds_theme_background_overlay_blur);


    --sds_wizard_navbar_step_complete_background_color: var(--sds_wizard_navbar_step_background_color);
    
    --sds_wizard_navbar_step_complete_icon: var(--sds_theme_color_success, #{sds-color(green, 60)});
    --sds_wizard_navbar_step_complete_text: var(--sds_theme_text, #{sds-color(black)});
    
    --sds_wizard_navbar_step_interactive_background_color: var(--sds_theme_background, #{sds-color(neutral, 05)});


    --sds_wizard_footer_background_color: var(--sds_theme_background_high, #{sds-color(white)});
    --sds_wizard_footer_border_color: var(--sds_theme_border, #{sds-color(neutral, 30)}); 
}

Last updated