Declarative Layout refine and refactor

[splashdust]

What is it

Since we've been trying out and using this system for a while now, some patterns and opportunities for improvement have started to emerge. This PR is a step towards finalizing the declarative layout system.

The focus of this PR is to streamline the available properties for building layouts using GDS tokens. That means that rarely used and non-layout related properties are being removed. Also ome support for custom values are being removed, except for sizing and positioning. Declarative Layout is not meant to replace CSS, just to reduce or eliminate the need for layout CSS.

So far in this PR

Refactor

• Colors now only support tokens from Green, no custom values except transparent and currentColor. This simplifies implementation and makes color properties more consistent.
• Color properties now always use tokenName/transparency, where transparency is optional.
• Set box-sizing to border-box by default
• Set border-color to primary by default
• border property now works like css shorthand border property, ie. size style color
• border-style property added for completeness
  • We now have border, border-width, border-color, border-style, and border-radius, all with the same parameter structure as css.
• Commonly used @styleExpressionProperty logic moved to reusable functions.
• gds-grid: auto-columns now support any CSS units. If no unit is specified, it still appends px for backwards compatibility.

Removed

These properties have been removed. Any edge-cases that need these will have to be written in regular CSS

• pointer-events
• user-select
• cursor
• transform-style
• Animation related properties. These we could eventually handle through a well thought out animation/transition system instead
  • transition
  • transition-behavior
  • animation

Other improvements

• Composable and reusable Style Expression Property groups through class mixins
• Put Declarative layout properties in their own section in the API tables

[green-design-system-bot]

🦋 Changeset status

None or empty changeset found. This PR will not result any new releases.

If you believe this is incorrect, please add a changeset by running npx changeset, and then commiting the resulting changeset file.

You can also explicitly add an empty changeset by running:
npx changeset add --empty

[green-design-system-bot]

👋 Thanks for creating a pull request!

🚀 Checkout the storybooks we've created for it:

• angular
• angular-charts
• chlorophyll
• core
• react
• react-charts