Version 5.3

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 `...

Version 5.2

New Features

• Add copy command
• Copy icons file on rux-icon publish

Updates

• Updated nav bar story name capitalization for ag-Grid
• Update rux-monitoring-progress-icon.js
• Removed monitoring progress readme from monitoring and applied to own story
• Color tweaks
• Tweak variable values
• Update typograph sizes per spec

Bug Fixes

• Fixed capitalization of ag-Grid in readme
• Fixed Classification Marking link and typograph
• Fix: incorrect css custom property used in button
• Fix: bug when threshold is set to 100
• Fix: missing progress svg
• Fix: missing close icon on notification banner``

Version 5.1

New Features

• New Rux Icon Library supporting 800+ icons from Material Design
• New Astro Icons to stylistically match generic icon set
• New workflow for converting SVG icons
• Updated Pop Up menu to allow for custom content and improved event listeners for closing and close outside
• Storybook entry for simple sign in component

Bug Fixes

• Fixed several color RGB values that were off by one from those documented on AstroUXDS
• Fixed font issue on Rux Clock
• Fixed AOS/LOS not showing in Rux Clock
• Fixed notification banner not disappearing completely on close
• Fixed height of classification markers to match documentation specs
• Fixed height of classification portion markings between browsers
• Fixed tabs error/not working in Storybook
• Fixed disabled event on RuxSlider, RuxSwitch, RuxPushButton and RuxTab
• Fixed select error text and input icons
• Fixed Chrome issue with tables being occluded in Storybook
• Various typos fixed

Version 5.0.2

Bug fixes

• Added missing Roboto Light Italic fonts

Version 5.0.1

Bug fixes

• Fixed an issue with rux-clock attempting to install erroneous dependencies
• Added missing Roboto Light Italic fonts
• Minor additional fixes

Version 5.0

Astro v5.0 Components reflect the changes from AstroUXDS 5.0 guidance. Astro 5.0 reflects work completed in collaboration with other teams working in Cross Mission Ground teams to create consistent user interfaces across applications across ECX.

New features

• Implements new guidance on application of Astro colors across UI elements
• Updated button specifications

Bug fixes

• The Astro pop up menu has been updated to fix an issue when used in certain Angular applications