Implement the figma design for the copy button element in the design system

[macho-catt]

Dependency

After Design adds the classes to the components in figma, review if this is still necessary.

Overview

We need to update the design system with new elements so developers can use them in the website.

Details

Create new classes to implement the design for the copy button. Afterwards, add the copy button information in the design system page as necessary.

The actual implementation of the button on the design page where the button is placed next to the scss code, with the JS functionality of copying the code, should be a separate issue that is dependent on this.

Figma design

Click for screenshot


Action Items

• [ ] In _buttons.scss, create a new class called .btn-light under the Button Colors section
  • [ ] This class should have the color properties based on the figma design
  • [ ] This class' color properties should change on mouse hover
• [ ] In _buttons.scss, create a new class called .btn-sm under Button Sizes section
  • [ ] This class should have the proper size and text properties based on the figma design
• [ ] Comment the above classes as necessary in the scss file
• [ ] Update the button.md data file with the proper title, description, and example for the newly created short button class under Sizes
  • [ ] Create a new html file under _includes/design-system-page/examples/buttons called size-small.html, which should be the referenced example property above
• [ ] Update the button.md data file with the proper title, description, and example for the newly created light button class under Colors
  • [ ] Create a new html file under _includes/design-system-page/examples/buttons called color-light.html, which should be the referenced example property above
• [ ] Ensure that the new data shows up in your local environment

Resources/Instructions

Original issue for design button.md _includes/design-system-page/examples/buttons directory buttons.scss Figma design

[github-actions[bot]]

Hi @macho-catt.

Good job adding the required labels to this issue.

Additional Resources: Wiki: How to add status labels to issues (WIP. Link will be updated when the wiki is done) Wiki: How to create issues (WIP. Link will be updated when the wiki is done)