cauldron icon indicating copy to clipboard operation
cauldron copied to clipboard

Design Sync: Tag

Open scurker opened this issue 1 year ago • 0 comments

screenshot of tag with variants

To sync with the design, the following changes are needed to tag:

  • New size variants, small and default, defaulting to default
  • Default size is set to 36px (Note: There is no variable for this height, but it matches the existing button-height and a new variable will need to be created, ideally using 2.25rem)
  • The background color is set to --background-light for light mode
  • The border color is set to --gray-30 for light mode
  • font-size is set to --text-size-body-small
  • top/bottom padding is removed from .Tag (the text should still remain vertically centered within the tag) with a left/right padding of (--space-small)
  • tag label should have a font-weight of --font-weight-medium with no font weight applied to the value

No new color changes are necessary for dark theme, the existing colors can be used.

scurker avatar Jul 16 '24 20:07 scurker