Design system.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

46 rivejä
896 B

  1. import { css } from '@tesseract-design/goofy-goober';
  2. export type BadgeBaseArgs = {
  3. /**
  4. * Will the component be displayed with circular sides?
  5. */
  6. rounded: boolean,
  7. }
  8. export const Root = ({
  9. rounded,
  10. }: BadgeBaseArgs) => css.cx(
  11. css`
  12. position: relative;
  13. height: 1.5em;
  14. min-width: 1.5em;
  15. display: inline-grid;
  16. vertical-align: middle;
  17. place-content: center;
  18. overflow: hidden;
  19. font-stretch: var(--font-stretch-base, normal);
  20. padding: 0 0.25rem;
  21. box-sizing: border-box;
  22. &::before {
  23. position: absolute;
  24. top: 0;
  25. left: 0;
  26. width: 100%;
  27. height: 100%;
  28. background-color: currentColor;
  29. opacity: 0.25;
  30. content: '';
  31. }
  32. `,
  33. css.dynamic({
  34. 'border-radius': rounded ? '0.75em' : '0.25rem',
  35. }),
  36. );
  37. export const Content = () => css.cx(
  38. css`
  39. position: relative;
  40. font-size: 0.75em;
  41. `
  42. );