@patreon/studio/module/components/Pill/styled-components.js

Patreon Studio Design System

// TODO (legacied filenames/match-regex)
// This failure is legacied in and should be updated. DO NOT COPY.
// eslint-disable-next-line filenames/match-regex
import { css, styled } from 'styled-components';
import { getDimensions, getPadding } from '~/components/Button/theme';
import { tokens } from '~/tokens';
import { mediaForBreakpoint } from '~/utilities/breakpoints';
const colors = {
    unselected: {
        background: tokens.global.primary.surfaceMuted,
        content: tokens.global.primary.onSurfaceMuted,
    },
    selected: {
        background: tokens.global.rich.surfaceAlt,
        content: tokens.global.rich.regular,
    },
    disabled_unselected: {
        background: tokens.global.primary.surfaceMuted,
        content: tokens.global.content.muted,
    },
    disabled_selected: {
        background: tokens.global.rich.surfaceAlt,
        content: tokens.global.rich.regular,
    },
};
export const StyledPill = styled.button `
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  border: none;
  border-radius: ${tokens.global.radius.pill};
  width: fit-content;
  height: ${({ size }) => getDimensions({ size, isMobile: true })};
  padding: ${({ size, icon, hasLabel, disclosureIcon }) => getPadding({ size, isMobile: true, hasLabel, icon, disclosureIcon })};
  cursor: pointer;

  ${({ disabled }) => disabled &&
    css `
      cursor: not-allowed;
      opacity: ${tokens.global.opacity.disabled};
    `}

  @media ${mediaForBreakpoint('sm')} {
    height: ${({ size }) => getDimensions({ size, isMobile: false })};
    padding: ${({ size, icon, hasLabel, disclosureIcon }) => getPadding({
    size,
    isMobile: false,
    hasLabel,
    icon,
    disclosureIcon,
})};
  }

  ${({ disabled, selected }) => {
    const selectedState = selected ? 'selected' : 'unselected';
    const state = disabled ? `disabled_${selectedState}` : selectedState;
    const { background, content } = colors[state];
    return css `
      border-radius: ${tokens.global.radius.sm};
      background-color: ${background.default};
      color: ${content.default};

      svg {
        fill: currentColor;
      }

      ${!disabled &&
        css `
        &:hover {
          background-color: ${background.hover};
          color: ${content.hover};
          border-color: ${tokens.global.border.action.hover};
        }

        &:active {
          background-color: ${background.pressed};
          color: ${content.pressed};
          border-color: ${tokens.global.border.action.pressed};
        }
      `}
    `;
}}
`;
//# sourceMappingURL=styled-components.js.map