v6.0 #79
dmcalester
announced in
Announcements
v6.0
#79
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Astro 6.0
Astro 6.0 is a significant overhaul of Astro’s design and development assets to promote broader adoption, more community engagement and faster future releases
With Astro 6.0 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
For existing projects we recommend starting a transition to 6.0, the original LitElement-based components have been updated to 5.3 and are available in their own repository https://github.com/RocketCommunicationsInc/astro-components
Current packages in the monorepo and their archived repositories here:
⭐ 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
📝 IMPROVED
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 6.0 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
Monorepo for Astro documentation and components
As you may have noticed we starting with Astro 6.0 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 6.0 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
See below for a detailed changelog for each component
Change Log
Global Color Variables
Changed
--colorPrimaryLighten2to correct value of#649cbd--colorSecondaryDarken2to correct value of#2b659b--colorTertiaryDarken4to correct value of#080c11Added
--colorSnowflakesDarkSurface: #1b2d3e--colorSnowflakesLightShadow: #828181--colorSnowflakesDarkSelected: #1c3f5e--colorSnowflakesLightSelected: #cee9fcTheme Alias Variabels
Dark Theme Aliases
Changed
--surfaceElementsto#1b2d3eusingvar(--colorSnowflakesDarkSurface)Added
--primaryDarkerasvar(--colorSecondaryDarken2, #2e679b)--darkSelectedasvar(--colorSnowflakesDarkSelected, #1c3f5e)Light Theme Aliases
Changed
--inputDarkto#080c11usingvar(--colorTertiaryDarken4)Added
--primaryLighterasvar(--colorPrimaryLighten2, #92cbff)--lightSelectedasvar(--colorSnowflakesLightSelected, #cee9fc)Dark Theme
Checkbox
Changed
#2e6799usingvar(--primaryDarker)#2e6799usingvar(--primaryDarker)#ffffffusingvar(--defalutText)#2e6799usingvar(--primaryDarker)#92cbffusingvar(--primaryLight)Added
#101923usingvar(--backgroundColor)#101923usingvar(--backgroundColor)#101923usingvar(--backgroundColor)Input & Text Area
Changed
#101923usingvar(--backgroundColor)#2b659busingvar(--primaryDarker)#ffffffusingvar(--defalutText)#92cbffusingvar(--primaryLight)#ffffffusingvar(--defalutText)#4dacff3pxAdded
#1c3f5eusingvar(--colorSnowflakeDarkSelected)0.6Pop-up
Changed
#101923usingvar(--backgroundColor)#2b659busingvar(--primaryDarker)#4dacffusingvar(--primary)#2b659busingvar(--primaryDarker)4pxMenu Item (used in Pop-up)
Changed
#101923usingvar(--backgroundColor)rgba(28, 63, 94, 0.3)#4dacffusingvar(--primary)#4dacffusingvar(--primary)Menu Item Divider (used in Pop-up)
Changed
#4dacffusingvar(--primary)Radio
Changed
2e6799usingvar(--primaryDarker)var(--primaryDarker)#101923usingvar(--backgroundColor)Scroll Bar
Changed
#2B659B#1B2D3E16px16px8pxAdded
inset 3px 3px 3px 0px rgba(0, 0, 0, 0.5)using--scrollBarVerticalBoxShadowinset 1px 3px 3px 0px rgba(0, 0, 0, 0.5)using--scrollBarHorizontalBoxShadowSegmented Button
Changed
#101923usingvar(--backgroundColor)#101923usingvar(--backgroundColor)#4dacffusingvar(--primary)#1c3f5eusvar(--colorSnowflakesDarkSelected)#ffffffusingvar(--defalutText)1.625remAdded
#1c3f5e#ffffffusingvar(--defalutText)#4dacffusingvar(--primary)Select
Changed
#1c3f5eusingvar(--colorSnowflakesDarkSelected)#2b659busingvar(--primaryDarker)linear-gradient(rgba(28, 63, 94, 1), rgba(28, 63, 94, 1))#101923usingvar(--backgroundColor)#4dacffusingvar(--primary)#ff2a04usingvar(--criticalBorder)#92cbffusingvar(--primaryLight)Slider
Changed
#101923usingvar(--backgroundColor)#4dacffusingvar(--primary)#101923usingvar(--backgroundColor)#92cbffusingvar(--primaryLight)#4dacffusingvar(--primary)Switch
Changed
#101923usingvar(--backgroundColor)#4dacffusingvar(--primary)#4dacffusingvar(--primary)#4dacffusingvar(--primary)#92cbffusingvar(--primaryLight)#4dacffusingvar(--primary)#d4d8ddusingvar(--secondaryText)Added
#2b659busingvar(--primaryDarker)Light Theme
Checkbox
Changed
#92cbffusingvar(--primaryLighter)#005a8fusingvar(--primary)#004872usingvar(--primaryDark)Added
#92cbffusingvar(--primaryLighter)#005a8fusingvar(--primary)#92cbffusingvar(--primaryLighter)#eaeef4usingvar(--backgroundColor)#eaeef4usingvar(--backgroundColor)Input & Text Area
#eaeef4usingvar(--backgroundColor)#92cbffusingvar(--primaryLighter)#004872usingvar(--primaryDark)#292a2dusingvar(--defalutText)#005a8f3pxAdded
#b7dcffusingvar(--colorSecondaryLighten3)0.6Pop-up
Changed
#eaeef4usingvar(--backgroundColor)#92cbffusingvar(--primaryLighter)#005a8fusingvar(--primary)#92cbffusingvar(--primaryLighter)4pxMenu Item (used in Pop-up)
Changed
#eaeef4usingvar(--backgroundColor)rgba(206, 233, 252, 0.3)#005a8fusingvar(--primary)#2f7aa7usingvar(--primaryLight)Menu Item Divider (used in Pop-up)
Changed
#005a8fusingvar(--primary)Rux-Radio
#92cbffusingvar(--primaryLighter)#92cbffusingvar(--primaryLighter)#eaeef4usingvar(--backgroundColor)Scroll Bar
Changed
#005a8fusingvar(--primary)#ffffffusingvar(--colorWhite)16px16px8pxAdded
inset 3px 3px 3px 0px rgba(47, 72, 99, 0.5)using--scrollBarVerticalBoxShadowinset 1px 3px 3px 0px rgba(47, 72, 99, 0.5)using--scrollBarHorizontalBoxShadowSegmented Button
Changed
#eaeef4usingvar(--backgroundColor)#eaeef4usingvar(--backgroundColor)#005a8fusingvar(--primary)#cee9fc#292a2d)usingvar(--defalutText)1.625remAdded
#cee9fc#292a2d)usingvar(--defalutText)#005a8fusingvar(--primary)Select
Changed
1c3f5eusingvar(--colorSnowflakesDarkSelected)#649cbdusinglinear-gradient(rgba(206, 233, 252, 1), rgba(206, 233, 252, 1))#eaeef4usingvar(--backgroundColor)#005a8fusingvar(--primary)#ff2a04usingvar(--criticalBorder)#004872usingvar(--primaryDark)Slider
Changed
#eaeef4usingvar(--backgroundColor)#005a8fusingvar(--primary)#eaeef4usingvar(--backgroundColor)#2f7aa7usingvar(--primaryLight)#005a8fusingvar(--primary)Switch
Changed
#eaeef4#649cbd#005a8fusingvar(--primary)#005a8fusingvar(--primary)#005a8fusingvar(--primary)#004872usingvar(--primaryDark)#005a8fusingvar(--primary)#51555busingvar(--secondaryText)Added
#649cbdBeta Was this translation helpful? Give feedback.
All reactions