@primer/components/lib/Token/_tokenButtonUtils.js

Primer react components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getTokenButtonIconSize = exports.tokenButtonStyles = exports.variants = void 0;

var _styledComponents = require("styled-components");

var _styledSystem = require("styled-system");

var _constants = require("../constants");

var _TokenBase = require("./TokenBase");

const variants = (0, _styledSystem.variant)({
  variants: {
    sm: {
      height: `${_TokenBase.tokenSizes.sm}px`,
      width: `${_TokenBase.tokenSizes.sm}px`
    },
    md: {
      height: `${_TokenBase.tokenSizes.md}px`,
      width: `${_TokenBase.tokenSizes.md}px`
    },
    lg: {
      height: `${_TokenBase.tokenSizes.lg}px`,
      width: `${_TokenBase.tokenSizes.lg}px`
    },
    xl: {
      height: `${_TokenBase.tokenSizes.xl}px`,
      width: `${_TokenBase.tokenSizes.xl}px`
    }
  }
});
exports.variants = variants;
const tokenButtonStyles = (0, _styledComponents.css)(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;align-self:baseline;border:0;border-radius:999px;&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}"], (0, _constants.get)('colors.fade.fg10'), (0, _constants.get)('colors.fade.fg15'));
exports.tokenButtonStyles = tokenButtonStyles;

const getTokenButtonIconSize = variant => _TokenBase.tokenSizes[variant || _TokenBase.defaultTokenSize] * 0.75;

exports.getTokenButtonIconSize = getTokenButtonIconSize;