feat: css variables

[anuragxxd]

Description

Fixes #159

Checklist

• My code follows the contributing guidelines of this project.
• I am aware that all my commits will be squashed into a single commit, using the PR title as the commit message.
• I have performed a self-review of my own code.
• I have commented my code in hard-to-understand areas.
• I have updated the user-facing documentation to describe any new or changed behavior.
• My changes generate no new warnings.
• I have added tests that prove my fix is effective or that my feature works.
• I have not reduced the existing code coverage.

Comments

Summary by Sourcery

This pull request introduces a comprehensive set of CSS variables to standardize and simplify the styling across the project. It refactors existing styles to use these new variables and updates various components to ensure consistency. Additionally, it enhances the form, collection, and details components with new styles and updates the demo HTML files accordingly.

• New Features:
  • Introduced CSS variables for primary, success, warning, danger, and neutral colors, as well as various UI elements like border radius, shadows, spacing, transitions, fonts, and input styles.
• Enhancements:
  • Refactored existing styles to use new CSS variables for better maintainability and consistency.
  • Updated form, collection, and details components to utilize the new CSS variables.
  • Added new styles for form elements such as file inputs, switch labels, and submit buttons.
  • Enhanced the details component with new styles for actions, fields, and copy buttons.
• Documentation:
  • Updated demo HTML files to reflect the new CSS variable usage and removed inline styles.

[changeset-bot]

🦋 Changeset detected

Latest commit: a1b5e92

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@elixir-cloud/design	Minor
@elixir-cloud/tes	Minor
@elixir-cloud/wes	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
elixir-cloud-components	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 16, 2024 7:34am

[sourcery-ai]

Reviewer's Guide by Sourcery

This pull request introduces the use of CSS variables for design tokens, replacing existing --sl-* variables with --ecc-* variables across multiple stylesheets. It also updates component styles to use these new variables and imports a new primitive stylesheet. Additionally, inline CSS styles in demo HTML files are commented out, and new form fields are added to the form demo. Two new files are added: one for primitive CSS variables and another for details component styles.

File-Level Changes

Files	Changes
packages/ecc-utils-design/src/styles/shoelace.styles.ts packages/ecc-utils-design/src/components/form/form.styles.ts packages/ecc-utils-design/src/components/collection/collection.styles.ts	Replaced all --sl-* variables with --ecc-* variables and updated styles to use new CSS variables.
packages/ecc-utils-design/src/components/details/details.ts packages/ecc-utils-design/src/components/form/form.ts packages/ecc-utils-design/src/components/collection/collection.ts	Imported primitiveStylesheet and updated components to use new CSS classes.
packages/ecc-utils-design/demo/form/index.html packages/ecc-utils-design/demo/details/index.html packages/ecc-utils-design/demo/collection/index.html	Commented out inline CSS styles and added new form fields in form demo.
packages/ecc-utils-design/src/styles/primitive.styles.ts packages/ecc-utils-design/src/components/details/details.styles.ts	Added new files with primitive CSS variables and details component styles.

---

Tips

• Trigger a new Sourcery review by commenting @sourcery-ai review on the pull request.
• You can change your review settings at any time by accessing your dashboard:
  • Enable or disable the Sourcery-generated pull request summary or reviewer's guide;
  • Change the review language;
• You can always contact us if you have any questions or feedback.

[sourcery-ai]

Hey @anuragxxd - I've reviewed your changes and they look great!

Here's what I looked at during the review

• 🟡 General issues: 2 issues found
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟢 Complexity: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment to tell me if it was helpful.}

[SalihuDickson]

Hey @anuragxxd, great work on this. Can you just add examples of how the css variables can be used to change the theme of the components in the demo so that new users can have something to play around with in plain HTML when they're trying to get a better understanding of how to style the components.

[anuragxxd]

Hey @anuragxxd, great work on this. Can you just add examples of how the css variables can be used to change the theme of the components in the demo so that new users can have something to play around with in plain HTML when they're trying to get a better understanding of how to style the components.

Sure, There is still work left on the docs part. I will try to sort that out before the weekly meeting for better momentum.

[SalihuDickson]

hey @anuragxxd, you haven't provided a way to access the text in the editor. I think a simple way to handle this would be to have the component fire an event whenever the text is modified. If you want i can implement this myself incase you're too busy at the moment. I just didn't want to work on an implementation if you have already built this functionality but are yet to push it.

[SalihuDickson]

hey @anuragxxd, could you please take a look at the above stated issue, it is blocker for a feature i am working on. Thank you!

[anuragxxd]

hey @anuragxxd, could you please take a look at the above stated issue, it is blocker for a feature i am working on. Thank you!

Hey @SalihuDickson, was little busy but have pushed the changes now. Also, ace will also now show the errors too based on the language!

[anuragxxd]

Hi @SalihuDickson and @JaeAeich,
I believe I've completed all the work on this branch. Could you both please review it?
@SalihuDickson: Regarding the documentation, I have some changes on another branch. I'll update the docs in that PR, as this one has grown quite large.
@JaeAeich: Good news - this should unblock your code component integration PR.
Please let me know if you need any clarification or have any questions. Thanks!

[JaeAeich]

LGTM!
Whole lib changed in this PR though, hopefully the design will be consistent from now on 🤞, it was a necessary change.
Please format the files though!