tesseract/packages/web/base/badge/src/index.ts

import { css } from '@tesseract-design/goofy-goober';

export type BadgeBaseArgs = {
  /**
   * Will the component be displayed with circular sides?
   */
  rounded: boolean,
}

export const Root = ({
  rounded,
}: BadgeBaseArgs) => css.cx(
  css`
    position: relative;
    height: 1.5em;
    min-width: 1.5em;
    display: inline-grid;
    vertical-align: middle;
    place-content: center;
    overflow: hidden;
    font-stretch: var(--font-stretch-base, normal);
    padding: 0 0.25rem;
    box-sizing: border-box;
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: currentColor;
      opacity: 0.25;
      content: '';
    }
  `,
  css.dynamic({
    'border-radius': rounded ? '0.75em' : '0.25rem',
  }),
);

export const Content = () => css.cx(
  css`
    position: relative;
    font-size: 0.75em;
  `
);