baseui/page-control/styled-components.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledRoot = exports.StyledDot = void 0;
var _styles = require("../styles");
var _constants = require("./constants");
/*
Copyright (c) Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/

const StyledRoot = exports.StyledRoot = (0, _styles.styled)('div', ({
  $kind,
  $theme
}) => ({
  display: 'flex',
  alignItems: 'center',
  gap: $theme.sizing.scale300,
  width: 'fit-content',
  paddingTop: $theme.sizing.scale100,
  paddingRight: $theme.sizing.scale500,
  paddingBottom: $theme.sizing.scale100,
  paddingLeft: $theme.sizing.scale500,
  borderRadius: $theme.borders.radius500,
  backgroundColor: $kind === _constants.KIND.backgroundProtection ? $theme.colors.backgroundPrimary : 'transparent'
}));
StyledRoot.displayName = "StyledRoot";
StyledRoot.displayName = 'StyledRoot';
const StyledDot = exports.StyledDot = (0, _styles.styled)('input', ({
  $active,
  $kind,
  $size,
  $disabled,
  $isVisible,
  $theme
}) => {
  const sizes = {
    [_constants.SIZE.large]: {
      height: $theme.sizing.scale300,
      width: $theme.sizing.scale300
    },
    [_constants.SIZE.medium]: {
      height: $theme.sizing.scale200,
      width: $theme.sizing.scale200,
      marginTop: '1px',
      marginRight: '1px',
      marginBottom: '1px',
      marginLeft: '1px'
    },
    [_constants.SIZE.small]: {
      height: $theme.sizing.scale100,
      width: $theme.sizing.scale100,
      marginTop: $theme.sizing.scale0,
      marginRight: $theme.sizing.scale0,
      marginBottom: $theme.sizing.scale0,
      marginLeft: $theme.sizing.scale0
    }
  };
  const colors = {
    [_constants.KIND.default]: {
      active: $theme.colors.contentPrimary,
      inactive: $theme.colors.backgroundTertiary
    },
    [_constants.KIND.backgroundProtection]: {
      active: $theme.colors.contentPrimary,
      inactive: $theme.colors.backgroundTertiary
    },
    [_constants.KIND.inverse]: {
      active: $theme.colors.contentInversePrimary,
      inactive: $theme.colors.backgroundInversePrimary
    },
    [_constants.KIND.alwaysLight]: {
      active: $theme.colors.contentOnColorInverse,
      inactive: (0, _styles.hexToRgb)($theme.colors.backgroundAlwaysDark, '0.12')
    },
    [_constants.KIND.alwaysDark]: {
      active: $theme.colors.contentOnColor,
      inactive: (0, _styles.hexToRgb)($theme.colors.backgroundAlwaysLight, '0.24')
    }
  };
  return {
    // reset default input styles
    appearance: 'none',
    margin: 0,
    // base web styles
    ...sizes[$size],
    borderRadius: '50%',
    backgroundColor: $disabled ? $theme.colors.contentStateDisabled : $active ? colors[$kind].active : colors[$kind].inactive,
    ...(!$isVisible ? {
      // https://www.nomensa.com/blog/how-improve-web-accessibility-hiding-elements
      border: 0,
      clip: 'rect(1px, 1px, 1px, 1px)',
      height: '1px',
      margin: '-1px',
      overflow: 'hidden',
      padding: 0,
      position: 'absolute',
      width: '1px'
    } : {})
  };
});
StyledDot.displayName = "StyledDot";
StyledDot.displayName = 'StyledDot';