Skip to content

Version 5.3

Latest
Latest
Compare
Choose a tag to compare
@dmcalester dmcalester released this 21 Oct 22:15
· 10 commits to master since this release
v5.3
5af8dbf
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.

Additional alignment with programs across ECX

Astro 5.3 introduces updated styling for improved accessibility, aesthetics and alignment with applications across Enterprise Ground Services (EGS) and Kobayashi Maru. These updates are availble in both the older CSS and Lit Web Component libraries and the new Stencil libraries.

The following components have been updated

  • Checkbox
  • Input and Text Area
  • Pop Up Menu
  • Menu Item
  • Radio Button
  • Scroll Bar
  • Segmented Button
  • Select
  • Slider
  • Switch (formerly Toggle)

See below for a detailed changelog for each component

Change Log

Global Color Variables

Changed
  • Changed --colorPrimaryLighten2 to correct value of #649cbd
  • Changed --colorSecondaryDarken2 to correct value of #2b659b
  • Changed --colorTertiaryDarken4 to correct value of #080c11
Added
  • Added color --colorSnowflakesDarkSurface: #1b2d3e
  • Added color --colorSnowflakesLightShadow: #828181
  • Added color --colorSnowflakesDarkSelected: #1c3f5e
  • Added color --colorSnowflakesLightSelected: #cee9fc

Theme Alias Variabels

Dark Theme Aliases

Changed
  • Changed --surfaceElements to #1b2d3e using var(--colorSnowflakesDarkSurface)
Added
  • Added --primaryDarker as var(--colorSecondaryDarken2, #2e679b)
  • Added --darkSelected as var(--colorSnowflakesDarkSelected, #1c3f5e)

Light Theme Aliases

Changed
  • Changed --inputDark to #080c11 using var(--colorTertiaryDarken4)
Added
  • Added --primaryLighter as var(--colorPrimaryLighten2, #92cbff)
  • Added --lightSelected as var(--colorSnowflakesLightSelected, #cee9fc)

Dark Theme

Checkbox

Changed
  • Text color changed to #2e6799 using var(--primaryDarker)
  • Border color changed to #2e6799 using var(--primaryDarker)
  • Selected text color changed to #ffffff using var(--defalutText)
  • Selected border color changed to #2e6799 using var(--primaryDarker)
  • Hovered border color changed to #92cbff using var(--primaryLight)
Added
  • Outline background color added as #101923 using var(--backgroundColor)
  • Outline hovered background color added as #101923 using var(--backgroundColor)
  • Outline selected background color added as #101923 using var(--backgroundColor)

Input & Text Area

Changed
  • Background color changed to #101923 using var(--backgroundColor)
  • Border color changed to #2b659b using var(--primaryDarker)
  • Text color changed to #ffffff using var(--defalutText)
  • Focused border color changed to #92cbff using var(--primaryLight)
  • Focused text color changed to #ffffff using var(--defalutText)
  • Search and cancel icon fill colors chagned to #4dacff
  • Border radius changed to 3px
Added
  • Added text selection background color of #1c3f5e using var(--colorSnowflakeDarkSelected)
  • Added placehoder opacity of 0.6

Pop-up

Changed
  • Background color changed to #101923 using var(--backgroundColor)
  • Border color changed to #2b659b using var(--primaryDarker)
  • Text color changed to #4dacff using var(--primary)
  • Caret background color changed to #2b659b using var(--primaryDarker)
  • Border seperation from anchor element increased to 4px

Menu Item (used in Pop-up)

Changed
  • Background color changed to #101923 using var(--backgroundColor)
  • Background hovered color changed to rgba(28, 63, 94, 0.3)
  • Text color changed to #4dacff using var(--primary)
  • Text hovered color changed to #4dacff using var(--primary)

Menu Item Divider (used in Pop-up)

Changed
  • Border color changed to #4dacff using var(--primary)

Radio

Changed
  • Border color changed to 2e6799 using var(--primaryDarker)
  • Selected border color changed to var(--primaryDarker)
  • Background color changed to #101923 using var(--backgroundColor)

Scroll Bar

Changed
  • Thumb background color changed to #2B659B
  • Track background color changed to #1B2D3E
  • Changes width to 16px
  • Changes height to 16px
  • Changes thumb border radius to 8px
Added
  • Vertical box shadow to scroll bar added as inset 3px 3px 3px 0px rgba(0, 0, 0, 0.5) using --scrollBarVerticalBoxShadow
  • Horizontal box shadow to scroll bar added as inset 1px 3px 3px 0px rgba(0, 0, 0, 0.5) using --scrollBarHorizontalBoxShadow

Segmented Button

Changed
  • Background color changed to #101923 using var(--backgroundColor)
  • Background hover color changed to #101923 using var(--backgroundColor)
  • Hovered text color changed to #4dacff using var(--primary)
  • Selected background color changed to #1c3f5e us var(--colorSnowflakesDarkSelected)
  • Selected text color changed to #ffffff using var(--defalutText)
  • Changed height to 1.625rem
Added
  • Selected hovered background color added as #1c3f5e
  • Selected hovered text color added as #ffffff using var(--defalutText)
  • Selected hovered border color added as #4dacff using var(--primary)

Select

Changed
  • Option hovered background color changed to #1c3f5e using var(--colorSnowflakesDarkSelected)
  • Menu border color changed to #2b659b using var(--primaryDarker)
  • Menu caret background color changed to linear-gradient(rgba(28, 63, 94, 1), rgba(28, 63, 94, 1))
  • Menu background color changed to #101923 using var(--backgroundColor)
  • Menu text color changed to #4dacff using var(--primary)
  • Menu invalid border color changed to #ff2a04 using var(--criticalBorder)
  • Menu hovered text color changed to #92cbff using var(--primaryLight)

Slider

Changed
  • Thumb background color changed to #101923 using var(--backgroundColor)
  • Thumb border color changed to #4dacff using var(--primary)
  • Thumb hovered background color chagned to #101923 using var(--backgroundColor)
  • Thumb hovered border color changed to #92cbff using var(--primaryLight)
  • Track background color changed to #4dacff using var(--primary)

Switch

Changed
  • Off color changed to #101923 using var(--backgroundColor)
  • On color changed to #4dacff using var(--primary)
  • On hovered color changed to #4dacff using var(--primary)
  • Off hovered color changed to #4dacff using var(--primary)
  • Off button hovered color changed to #92cbff using var(--primaryLight)
  • On disabled color changed to #4dacff using var(--primary)
  • Off disabled color changed to #d4d8dd using var(--secondaryText)
Added
  • Off border color added as #2b659b using var(--primaryDarker)

Light Theme

Checkbox

Changed
  • Border color changed to #92cbff using var(--primaryLighter)
  • Selected background color changed to #005a8f using var(--primary)
  • Hovered border color changed to #004872 using var(--primaryDark)
Added
  • Outline background color added as #92cbff using var(--primaryLighter)
  • Accent color added as #005a8f using var(--primary)
  • Selected border color added as #92cbff using var(--primaryLighter)
  • Outline hovered background color added as #eaeef4 using var(--backgroundColor)
  • Outline selected background color added as #eaeef4 using var(--backgroundColor)

Input & Text Area

  • Background color changed to #eaeef4 using var(--backgroundColor)
  • Border color changed to #92cbff using var(--primaryLighter)
  • Focused border color changed to #004872 using var(--primaryDark)
  • Focused text color changed to #292a2d using var(--defalutText)
  • Search and cancel icon fill colors chagned to #005a8f
  • Changed border radius to 3px
Added
  • Added text selection background color of #b7dcff using var(--colorSecondaryLighten3)
  • Added placehoder opacity of 0.6

Pop-up

Changed
  • Background color changed to #eaeef4 using var(--backgroundColor)
  • Border color changed to #92cbff using var(--primaryLighter)
  • Text color changed to #005a8f using var(--primary)
  • Caret background color changed to #92cbff using var(--primaryLighter)
  • Border seperation from anchor element increased to 4px

Menu Item (used in Pop-up)

Changed
  • Background color changed to #eaeef4 using var(--backgroundColor)
  • Background hovered color changed to rgba(206, 233, 252, 0.3)
  • Text color changed to #005a8f using var(--primary)
  • Text hovered color changed to #2f7aa7 using var(--primaryLight)

Menu Item Divider (used in Pop-up)

Changed
  • Border color changed to #005a8f using var(--primary)

Rux-Radio

  • Border color changed to #92cbff using var(--primaryLighter)
  • Selected border color changed to #92cbff using var(--primaryLighter)
  • Background color changed to #eaeef4 using var(--backgroundColor)

Scroll Bar

Changed
  • Thumb background color changed to #005a8f using var(--primary)
  • Track background color changed to #ffffff using var(--colorWhite)
  • Changes width to 16px
  • Changes height to 16px
  • Changes thumb border radius to 8px
Added
  • Vertical box shadow to scroll bar added as inset 3px 3px 3px 0px rgba(47, 72, 99, 0.5) using --scrollBarVerticalBoxShadow
  • Horizontal box shadow to scroll bar added as inset 1px 3px 3px 0px rgba(47, 72, 99, 0.5) using --scrollBarHorizontalBoxShadow

Segmented Button

Changed
  • Background color changed to #eaeef4 using var(--backgroundColor)
  • Background hover color changed to #eaeef4 using var(--backgroundColor)
  • Hover text color changed to #005a8f using var(--primary)
  • Selected background color changed to #cee9fc
  • Selected text color changed to #292a2d) using var(--defalutText)
  • Changed height to 1.625rem
Added
  • Selected hovered background color added as #cee9fc
  • Selected hovered text color added as #292a2d) using var(--defalutText)
  • Selected hovered border color added as #005a8f using var(--primary)

Select

Changed
  • Option hovered background color changed to 1c3f5e using var(--colorSnowflakesDarkSelected)
  • Menu border color changed to #649cbd using
  • Menu caret background color changed to linear-gradient(rgba(206, 233, 252, 1), rgba(206, 233, 252, 1))
  • Menu background color changed to #eaeef4 using var(--backgroundColor)
  • Menu text color changed to #005a8f using var(--primary)
  • Menu invalid border color changed to #ff2a04 using var(--criticalBorder)
  • Menu hovered text color changed to #004872 using var(--primaryDark)

Slider

Changed
  • Thumb background color changed to #eaeef4 using var(--backgroundColor)
  • Thumb border color changed to #005a8f using var(--primary)
  • Thumb hovered background color chagned to #eaeef4 using var(--backgroundColor)
  • Thumb hovered border color changed to #2f7aa7 using var(--primaryLight)
  • Track background color changed to #005a8f using var(--primary)

Switch

Changed
  • Off color changed to #eaeef4
  • Off border color changed to #649cbd
  • On color changed to #005a8f using var(--primary)
  • On hovered color changed to #005a8f using var(--primary)
  • Off hovered color changed to #005a8f using var(--primary)
  • Off button hovered color changed to #004872 using var(--primaryDark)
  • On disabled color changed to #005a8f using var(--primary)
  • Off disabled color changed to #51555b using var(--secondaryText)
Added
  • Off border color added as #649cbd
Assets 2
Loading