fix(style) - housekeeping for button css

[Shashika6]

This PR provides refactoring/housekeeping of the button component.

• Replace explicit instances of ilo with the $prefix variable to enable theming later on
• Make sure classnames conform to modified BEM convention (block--element__modifier)
• Remove local variables that should instead use standard ones from the theme
• Explain any local variables that have to be used for special cases
• Remove unneeded rules
• Replace map-get invocations with the name of the css variable exported by the themes package
• Use LTR/RTL agnostic css (Example padding-inline-start instead of padding-left)
• Where necessary, break up the CSS for very big components into logical sub-components, that could potentially be exported from the Design System by themselves

Related to #971

Design bugs fixed :-

Align the small button icon and label

Before :-

After :-

Fix icon only component in twig

Before :-

After :-

[changeset-bot]

🦋 Changeset detected

Latest commit: ef425c4

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

This PR includes changesets to release 3 packages

Name	Type
@ilo-org/react	Patch
@ilo-org/styles	Patch
@ilo-org/twig	Patch

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

[netlify]

✅ Deploy Preview for ilo-ui-twig-develop ready!

Name	Link
🔨 Latest commit	ef425c4
🔍 Latest deploy log	https://app.netlify.com/sites/ilo-ui-twig-develop/deploys/663cc4d49d54630008bb1d69
😎 Deploy Preview	https://deploy-preview-994--ilo-ui-twig-develop.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for ilo-ui-twig ready!

Name	Link
🔨 Latest commit	ef425c4
🔍 Latest deploy log	https://app.netlify.com/sites/ilo-ui-twig/deploys/663cc4d4b42bd60008f776b3
😎 Deploy Preview	https://deploy-preview-994--ilo-ui-twig.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for ilo-ui-react ready!

Name	Link
🔨 Latest commit	ef425c4
🔍 Latest deploy log	https://app.netlify.com/sites/ilo-ui-react/deploys/663cc4d4dcab350007367f99
😎 Deploy Preview	https://deploy-preview-994--ilo-ui-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Shashika6]

@justintemps I noticed that there is a border radius token just used for the button. We should get rid of this one right?

• The reason why I didn't delete it yet is because its been used in fileupload as well. Should we come back to this on file upload ?

packages/themes/tokens/radius/button.json

[justintemps]

Hi @Shashika6 think you're still missing some things here

[justintemps]

@Shashika6 Do we need tokens for this? What do you think @GGKapanadze ?

[Shashika6]

This is used in like 6 components so I think it should be fine right what do you think @GGKapanadze

[GGKapanadze]

Of course, if it's button-specific we should define it on the button level but if it's general we can move it to the foundation after #999

[justintemps]

@GGKapanadze could you give this a look?

[GGKapanadze]

@justintemps @Shashika6 data-js-processed selector is removed and replaced with twig component attributes

[GGKapanadze]

Everything looks good, but we can hold it to integrate with #999