@patreon/studio/module/components/Select/components.jsx

Patreon Studio Design System

import { css, styled } from 'styled-components';
import { tokens } from '~/tokens';
import { cssForBodyText } from '~/utilities/type-bundles';
export const InputWrapper = styled.div `
  display: block;
  width: ${({ isFluid }) => (isFluid ? '100%' : '200px')};
  opacity: ${({ disabled }) => disabled && tokens.global.opacity.disabled};
`;
export const LabelWrapper = styled.div `
  display: flex;
  width: 100%;
  justify-content: space-between;
  vertical-align: bottom;
  flex-direction: ${({ primaryLabel, secondaryLabel }) => !primaryLabel && secondaryLabel && 'row-reverse'};
`;
export const SelectWrapper = styled.div `
  height: 40px;
  width: 100%;
  position: relative;
`;
export const IconWrapper = styled.div `
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 12px;
  top: 10px;
  pointer-events: none;
`;
const transparent = {
    default: 'transparent',
    hover: 'transparent',
    pressed: 'transparent',
};
const styles = {
    outlined: {
        default: {
            backgroundColor: tokens.global.bg.base,
            borderColor: tokens.global.border.action,
        },
        error: {
            backgroundColor: tokens.global.bg.base,
            borderColor: tokens.global.critical.surface,
        },
    },
    solid: {
        default: {
            backgroundColor: tokens.global.primary.surfaceMuted,
            borderColor: transparent,
        },
        error: {
            backgroundColor: tokens.global.critical.surfaceMuted,
            borderColor: transparent,
        },
    },
};
export const StyledSelect = styled.select `
  appearance: none;
  cursor: pointer;
  height: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  padding: 10px 36px 10px 16px;
  cursor: ${({ disabled }) => disabled && 'not-allowed'};
  color: ${tokens.global.content.regular.default};
  border: 1px solid;
  outline: none;
  box-sizing: border-box;
  border-radius: ${({ corners }) => corners === 'square' ? 0 : corners === 'pill' ? tokens.global.radius.pill : tokens.global.radius.md};

  border-top-left-radius: ${({ corners }) => (corners === 'rounded-bottom' ? 0 : undefined)};
  border-top-right-radius: ${({ corners }) => (corners === 'rounded-bottom' ? 0 : undefined)};
  border-bottom-left-radius: ${({ corners }) => (corners === 'rounded-top' ? 0 : undefined)};
  border-bottom-right-radius: ${({ corners }) => (corners === 'rounded-top' ? 0 : undefined)};
  ${cssForBodyText({ size: 'md' })}

  &:focus-visible {
    outline-offset: -2px;
    /* Firefox default outline color */
    outline: solid Highlight;

    /* Chrome/Safari default outline color */
    outline: -webkit-focus-ring-color auto;
  }

  ${({ variant, error, disabled }) => {
    const variantStyles = styles[variant][error ? 'error' : 'default'];
    return css `
      background-color: ${variantStyles.backgroundColor.default};
      border-color: ${variantStyles.borderColor.default};

      ${!disabled &&
        css `
        &:hover {
          border-color: ${variantStyles.borderColor.hover};
        }
        &:active {
          border-color: ${variantStyles.borderColor.pressed};
        }
      `}
    `;
}}
`;
//# sourceMappingURL=components.jsx.map