Color Palette Documentation

Introduction #

This documentation includes the color palette designed for your components. You can use these colors in designing and customizing your components.

                    

                        
                        
SCSS
                        
                    
                    $color-palette: (
    primary: #3761EB,
    on-primary: #FFFFFF,
    primary-light: #E9EDFA,
    primary-dark: #0C2780,
    secondary: #272E3F,
    on-secondary: #FFFFFF,
    secondary-light: #3C4252,
    secondary-dark: #0F172A,
    specific: #38BDF8,
    button-text: #FFFFFF,
    button: #3761EB,
    text: #707479,
    title-text: #0F172A,
    secondary-text: #AFB3BC,
    section-title-text: #FFFFFF,
    border: #E4E6E8,
    divider: #E6E7EA,
    shadow: #DEDEDE,
    icon: #3761EB,
    menu: #FFFFFF,
    card: #FFFFFF,
    background: #FAFAFA,
    section: #FFFFFF,
    hover: #9E9E9E,
    button-hover: #FFFFFF,
    text-hover: #FFFFFF,
    button-text-hover: #FFFFFF,
    fields: #343A40,
    border-fields: #495057,
    title-text-fields: #FFFFFF,
    text-fields: #ABAFB3,
    black: #000000,
    white: #FFFFFF,
    danger-regular: #D70D0D,
    disabled-regular: #3761EB,
    warning-regular: #FFB800,
    warning-light: #FDD368,
    warning-dark: #E4A400,
    success-regular: #02B74A,
    success-light: #C0FCD8,
    success-dark: #009C3F,
    danger-dark: #D70D0D,
    danger-light: #F8D0D0,
    disabled-light: #E2E2E2,
    disabled-dark: #575857,
    information-regular: #3761EB,
    information-light: #7393FF,
    information-dark: #2145BC,
    border-secondary: #B1B1B1,
    unCommon: #FFFFFF
);
                    
                

Customizing Colors #

Users can customize the color palette by changing the values of the color codes in the $color-palette variable. For example, to change the primary color to green, you can do the following:

                    

                        
                        
SCSS
                        
                    
                    $color-palette: (
    primary: #28A745, // Change color to green
    // Other colors remain the same
);
                    
                

Using Colors #

Users can use two methods to apply colors in SCSS:

1. Using the get-color function:

   To use colors dynamically, you can utilize the get-color function:

                               
   
                                   
                                   
   SCSS
                                   
                               
                               
   .button {
       background-color: get-color(primary);
   }
                               
                           

2. Using CSS Classes: You can also use the predefined CSS classes. For example:

                               
   
                                   
                                   
   HTML
                                   
                               
                               
   <button class="bg-primary-color">Button</button>
                               
                           

Conclusion #

With this color palette and customization options, you can create a beautiful and organized design. These colors provide you with the ability to enhance the user experience for your users.