Astro 6

Astro 5.3 is a significant overhaul of Astro’s design and development assets to promote broader adoption, more community engagement and faster future releases

With Astro 5.3 we have combined disparate repositories in to a single monorepo. Previous repositories incorporated in to the monorepo have been set to readonly archive mode. If you need release notes for prior versions of Astro please see Astro Release Notes

Current packages in the monorepo and their archived repositories here:

• AstroUXDS.com | Archive
• Astro Web Components | Archive
• AG Grid Theme | Archive
• React Starter Kit | Archive
• Angular Starter Kit | Archive
• Vue2 Starter Kit | Archive

⭐ Release of Astro’s new Stencil-based components

Astro Web Components have been significantly updated focusing on developer experience, improved documentation and time to start a project. Simple applications can now be initiated with four lines of code in less that 30 seconds.

Note: The Stencil components are a beta release, however they are more mature and better documented than the Lit components. We reccommend any new project start with these components.

🎉 NEW

• Can be used without NPM dependencies
• Form elements as Web Components
• Form patterns/guidance for HTML, React, Vue, Angular and Svelte
• Unit and Integration tests
• Visual regression tests
• TypeScript support
• Single package import with tree shaking
• Integrations with Libraries/Frameworks
  • Angular Wrapper
  • React Wrapper
  • Vue 3
  • Svelte
• Starter kits
  • Angular
  • HTML/JS
  • Svelte
  • Vue 2
  • Vue 3

📝 IMPROVED

• Storybook documentation
• CSS Custom Property documentation for developer overrides
• Framework integrations
  • HTML/JavaScript
  • React
  • Vue2
• Starter kits
  • React
    ​

⚠️ Deprecation notification
The existing Lit/CSS libraries are moving to maintenance mode and only receive bug fixes starting January 1, 2022. We encourage all new projects to start with the new Stencil based components https://github.com/RocketCommunicationsInc/astro/tree/main/packages/web-components(https://github.com/RocketCommunicationsInc/astro/tree/main/packages/web-components)

Figma libraries for Astro’s dark and light theme components

Astro 5.3 design assets and icons are now available in Figma. The Astro Figma libraries use detailed interactive components enabling designers and non-designers alike to craft compelling, interactive prototypes compliant with Enterprise Ground Services other teams in Cross Mission Ground

• Astro on Figma https://www.figma.com/@astrouxds
• Astro User Experience Design Assets https://www.figma.com/community/file/1014254163928270411
• Astro Icons https://www.figma.com/community/file/1022883566772542677

Monorepo for Astro documentation and components

As you may have noticed we starting with Astro 5.3 all Astro-related repositories have been merged in to a single monorepo to support faster and more consistent releasese and speed up development time.

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