@patreon/studio/module/components/Checkbox/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 styled, { css } from 'styled-components';
import { tokens } from '../../tokens';
const defaultFocusStyles = css `
  /* Firefox default outline color */
  outline: solid Highlight;

  /* Chrome/Safari default outline color */
  outline: solid -webkit-focus-ring-color;
`;
const sizeTo = {
    padding: {
        sm: '12px',
        md: '16px',
        lg: '20px',
    },
    dimensions: {
        sm: '16px',
        md: '20px',
        lg: '24px',
    },
};
export const StyledLabel = styled.label `
  align-items: flex-start;
  display: flex;
  ${(props) => props.labelPosition === 'left'
    ? `
        flex-direction: row-reverse;
        justify-content: flex-end;
    `
    : ''};
  cursor: ${(props) => (props.disabled ? 'default' : 'pointer')};
  opacity: ${({ disabled }) => disabled && tokens.global.opacity.disabled};
`;
export const StyledCheckboxContainer = styled.div `
  padding-right: ${(props) => (props.labelPosition === 'right' ? sizeTo.padding[props.sizeValue] : 0)};
  padding-left: ${(props) => (props.labelPosition === 'left' ? sizeTo.padding[props.sizeValue] : 0)};

  > input + div {
    background-color: ${tokens.global.bg.base.default};
    border: 1px solid ${tokens.global.border.action.default};

    svg {
      fill: ${tokens.global.primary.onActionBase.default};
    }
  }

  > input:disabled + div {
    border-color: ${tokens.global.border.muted.default};
  }

  > input:enabled + div {
    &:hover {
      background-color: ${tokens.global.bg.base.hover};
      border-color: ${tokens.global.border.action.hover};
    }
    &:active {
      background-color: ${tokens.global.bg.base.pressed};
      border-color: ${tokens.global.border.action.pressed};
    }
  }

  > input:indeterminate + div,
  > input:checked + div {
    border: none;
    background-color: ${tokens.global.primary.actionBase.default};
    svg {
      fill: ${tokens.global.primary.onActionBase.default};
    }
  }

  > input:enabled:indeterminate + div,
  > input:enabled:checked + div {
    &:hover {
      background-color: ${tokens.global.primary.actionBase.hover};
      svg {
        fill: ${tokens.global.primary.onActionBase.hover};
      }
    }

    &:active {
      background-color: ${tokens.global.primary.actionBase.pressed};
      svg {
        fill: ${tokens.global.primary.onActionBase.pressed};
      }
    }
  }

  > input:disabled + div {
    cursor: default;
  }

  > input:focus + div {
    outline: none;
  }

  > input:focus-visible + div {
    ${defaultFocusStyles};
  }
`;
export const StyledCheckbox = styled.input `
  display: block;
  width: ${(props) => sizeTo.dimensions[props.sizeValue]};
  height: ${(props) => sizeTo.dimensions[props.sizeValue]};
  position: absolute;
  opacity: 0;
  margin: 2px;
`;
export const StyledSynthethicCheckbox = styled.div `
  cursor: pointer;
  align-items: center;
  border-radius: ${tokens.global.radius.sm};
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  min-width: ${(props) => sizeTo.dimensions[props.sizeValue]};
  min-height: ${(props) => sizeTo.dimensions[props.sizeValue]};
  width: ${(props) => sizeTo.dimensions[props.sizeValue]};
  height: ${(props) => sizeTo.dimensions[props.sizeValue]};
  margin: 2px;
  position: relative;

  svg {
    width: 100%;
    height: 100%;
  }
`;
export const TextContainer = styled.div `
  display: inline-flex;
  margin: auto 0;
`;
//# sourceMappingURL=styled-components.js.map