search

RocketCommunicationsInc / astro-components

Other
24 stars 8 forks source link

select element updated light/dark #154

Closed micahjones13 closed 3 years ago

micahjones13 commented 3 years ago

JIRA Link

Updates the select element (rux-select) class to be in line with KM updates and current Abstract libraries. One notable change is adding a background color behind the SVG, which was accomplished by adding an additional param to background-image of a linear gradient, and then positioning that accordingly. The SVG color updates were left out of this description due to length. Abstract Dark and Light for reference. Light changes: 

--selectHoverOptBackgroundColor: rgb(28, 63, 94);
    --selectMenuBorderColor: rgb(100, 156, 189);
    --selectMenuCaretBackgroundColor: linear-gradient(
        rgba(206, 233, 252, 1),
        rgba(206, 233, 252, 1)
    );
    --selectMenuBackgroundColor: rgb(234, 238, 244);
    --selectMenuTextColor: var(--primary);
    --selectMenuInvalidBorder: var(--criticalBorder);
    --selectMenuTextHoverColor: rgb(0, 72, 114);

Dark changes: 

 --selectHoverOptBackgroundColor: rgb(28, 63, 94);
    --selectMenuBorderColor: rgb(43, 101, 155);
    --selectMenuCaretBackgroundColor: linear-gradient(
        rgba(28, 63, 94, 1),
        rgba(28, 63, 94, 1)
    );
    --selectMenuBackgroundColor: var(--backgroundColor);
    --selectMenuTextColor: var(--primary);
    --selectMenuInvalidBorder: var(--criticalBorder);
    --selectMenuTextHoverColor: rgb(146, 203, 255);