search

seb-oss / green

Green is an open-source design system built by SEB.
https://storybook.seb.io/
Apache License 2.0
37 stars 55 forks source link

Add support for pseudo-selectors in Style Expression Properties #1602

Closed splashdust closed 2 months ago

splashdust commented 2 months ago

This PR adds support for specifying pseudo selectors like :hover, :focus, etc, in Style Expression Properties.

For example: 

<gds-card padding="xs; hover: xs s; >l { s m; hover: xl }"></gds-card>

Sub-selectors are specified by prefixing a value sequence with xxx:, and selector/value sequences are terminated by ; The sub-selector will then be appended/merged with the base selector, ie :host(:xxx) or .some-sel:xxx. The ; is only mandatory when there are more than one sequence, meaning that this upgrade will be backwards-compatible with existing expressions.

Here is a slightly more realistic example, changing the border and padding on hover:

<gds-card
  radius="s"
  border="4xs/l2-stroke-primary; hover: s/l2-stroke-primary"
  padding="xl; hover: l"
  background="l2-background-secondary"
>
...
</gds-card>
green-design-system-bot[bot] commented 2 months ago

🦋 Changeset status

Based on the included changeset, the following releases will be published as a result of this PR:

Note: If unpublished changesets where merged to main after the first commit of this PR, this list will include those changes in addition to the ones specific to this PR.

green-design-system-bot[bot] commented 2 months ago

👋 Thanks for creating a pull request!

🚀 Checkout the storybooks we've created for it:

splashdust commented 2 months ago

I have a feeling that we are making this too complicated and it will be tech debt... But it's at the same time soo good and creates an awesome DevEx! ☯️

Yes, it's a fine line! I think that we currently have a pretty good balance between complexity and value added, and we need to keep it that way. Let's discuss this further in light of the current feature set, and maybe we can refine a more final set of requirements, now that we have something concrete to look at.

As for this PR, most of the changes are just refactoring the original implementation to make it more maintainable and easier to understand. The new bit is pretty much just this: https://github.com/seb-oss/green/pull/1602/files#diff-d1a884735b6a1407454072cd84d9ba12577a8311d6a87f5be1b0a4f60dea2adcR107-R111

And these changes to how the final CSS is rendered: https://github.com/seb-oss/green/pull/1602/files#diff-d1a884735b6a1407454072cd84d9ba12577a8311d6a87f5be1b0a4f60dea2adcR168-R191