[Emotion] Convert EuiToken

[elizabetdev]

Summary

This PR converts EuiToken to Emotion.

• I also improved a few comments in the code and in the props table. Some of them in my opinion were difficult to understand.
• When in size xs and square shape the icon was touching the top and bottom borders so I added a small vertical padding (1px)
• Added a border-radius to the rectangle shape just because I think it looks better and it gets similar to the square shape

This is only for testing purposes:

Fixed EuiIconTokenStruct

Why isn't the token getting centered? Well... It seems that it was incorrectly exported from Figma/Sketch. So I fixed the design and recompiled the icon.

Changed tokens that were defaulting to rectangle shape

I didn't see any rectangle shape usage. So I decided to make these tokens more aligned with the other tokens.

Checklist

• Checked in both light and dark modes
• [ ] Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• [ ] Props have proper autodocs and playground toggles
• Added documentation
• [ ] Checked Code Sandbox works for any docs examples
• Added or updated jest and cypress tests
• Checked for breaking changes and labeled appropriately
• [ ] Checked for accessibility including keyboard-only and screenreader modes
• Updated the Figma library counterpart
• A changelog entry exists and is marked appropriately

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6067/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6067/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6067/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6067/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6067/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6067/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6067/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6067/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6067/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6067/

[elizabetdev]

Thanks, @constancecchen for pushing 9ec7d9c. I tested and works perfectly! 👍🏽

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6067/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6067/

[chandlerprall]

Removing the rectangle shape is a breaking change. Have a couple very small requests, otherwise this LGTM

[chandlerprall]

Are these attribute selectors necessary? If I'm reading this correctly, since color mode is passed in the style generation should know which form is needed and can return just those styles.

[elizabetdev]

When I started doing this conversion I also got confused with these light and dark props and class names. They correspond to the fills.

It is not related to the color mode. When a token is light it looks like this:

When is dark:

When is none:

[chandlerprall]

How do you feel about passing the fill prop through, keeping the css tied to the prop value instead of matching against the generated selector. Looks like it would require creating a token.types.ts file to avoid a circular dependency.

    ${
      fill === 'light'
        ? `
          color: ${lightColor};
          background-color: ${backgroundLightColor};
          box-shadow: inset 0 0 0 1px ${boxShadowColor};
        `
        : `
          color: ${darkColor};
          background-color: ${backgroundDarkColor};
        `
    }

[elizabetdev]

Thanks, @chandlerprall. I addressed your review with 720c0d4. Let me know if is there anything else to address.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6067/

[chandlerprall]

How do you feel about passing the fill prop through, keeping the css tied to the prop value instead of matching against the generated selector. Looks like it would require creating a token.types.ts file to avoid a circular dependency.

    ${
      fill === 'light'
        ? `
          color: ${lightColor};
          background-color: ${backgroundLightColor};
          box-shadow: inset 0 0 0 1px ${boxShadowColor};
        `
        : `
          color: ${darkColor};
          background-color: ${backgroundDarkColor};
        `
    }

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6067/

[elizabetdev]

Thanks @chandlerprall,

• I'm now passing the fill to getTokenColor() 0b3f9f6
• Added the reactangle shape back to the TokenShape type f385963
• Renamed and converted the examples to TS 6eeff25

[chandlerprall]

Changes LGTM; I don't see any visual differences, including light+dark mode with various fills & colors