How to use polished - 10 common examples

export const inputBgFocus = inputBg;
export const inputBorderColorFocus = lighten(0.25, themeColors.primary);
export const inputBoxShadowFocus = `${inputBoxShadow}, ${sassRgba(
  inputBorderColorFocus,
  0.6
)}`;
export const inputColorFocus = inputColor;
export const inputColorPlaceholder = gray600;

export const inputHeight = `${stripUnit(fontSizeBase) * inputBtnLineHeight +
  stripUnit(inputBtnPaddingY) * 2}rem`;

export const inputHeightLg = `${stripUnit(fontSizeLg) * inputBtnLineHeightLg +
  stripUnit(inputBtnPaddingYlg) * 2}rem`;

export const inputHeightSm = `${stripUnit(fontSizeSm) * inputBtnLineHeightSm +
  stripUnit(inputBtnPaddingYsm) * 2}rem`;

export const inputTransition = `borderColor ease-in-out .15s, box-shadow ease-in-out .15s`;

// Dropdowns
//
// Dropdown menu container and contents.

export const dropdownMinWidth = '10rem';
export const dropdownPaddingY = '.5rem';
export const dropdownMarginTop = '.125rem';
export const dropdownBg = white;
export const dropdownBorderColor = sassRgba(black, 0.15);
export const dropdownBorderWidth = borderWidth;
export const dropdownDividerBg = gray200;
export const dropdownBoxShadow = `0 .5rem 1rem ${sassRgba(black, 0.175)}`;

export const navTabsLinkActiveColor = gray700;
export const navTabsLinkActiveBg = bodyBg;
export const navTabsLinkActiveBorderColor = '#ddd';

export const navPillsBorderRadius = borderRadius;
export const navPillsLinkActiveColor = componentActiveColor;
export const navPillsLinkActiveBg = componentActiveBg;

// Navbar

export const navbarPaddingY = `${spacer / 2}rem`;
export const navbarPaddingX = spacer;

export const navbarBrandFontSize = fontSizeLg;
// Compute the navbarBrand paddingY so the navbarBrand will have the same height as navbar-text and navLink
export const navLinkHeight = `${stripUnit(navbarBrandFontSize) *
  lineHeightBase}rem`;

export const navbarBrandHeight = `${stripUnit(fontSizeBase) * lineHeightBase +
  navLinkPaddingY * 2}rem`;

export const navbarBrandPaddingY = `${(stripUnit(navbarBrandHeight) -
  navLinkHeight) /
  2}rem`;

export const navbarTogglerPaddingY = '.25rem';
export const navbarTogglerPaddingX = '.75rem';
export const navbarTogglerFontSize = fontSizeLg;
export const navbarTogglerBorderRadius = borderRadius;

export const navbarDarkColor = sassRgba(white, 0.5);
export const navbarDarkHoverColor = sassRgba(white, 0.75);

var navPillsBorderRadius = borderRadius;
var navPillsLinkActiveColor = componentActiveColor;
var navPillsLinkActiveBg = componentActiveBg;

// Navbar

var navbarPaddingY = spacer / 2 + 'rem';
var navbarPaddingX = spacer;

var navbarBrandFontSize = fontSizeLg;
// Compute the navbarBrand paddingY so the navbarBrand will have the same height as navbar-text and navLink
var navLinkHeight = stripUnit(navbarBrandFontSize) * lineHeightBase + 'rem';

var navbarBrandHeight = stripUnit(fontSizeBase) * lineHeightBase + navLinkPaddingY * 2 + 'rem';

var navbarBrandPaddingY = (stripUnit(navbarBrandHeight) - navLinkHeight) / 2 + 'rem';

var navbarTogglerPaddingY = '.25rem';
var navbarTogglerPaddingX = '.75rem';
var navbarTogglerFontSize = fontSizeLg;
var navbarTogglerBorderRadius = borderRadius;

var navbarDarkColor = sassRgba(white, 0.5);
var navbarDarkHoverColor = sassRgba(white, 0.75);
var navbarDarkActiveColor = sassRgba(white, 1);
var navbarDarkDisabledColor = sassRgba(white, 0.25);
var navbarDarkTogglerIconBg = 'url("data:image/svg+xml;charset=utf8,%3Csvg viewBox=\'0 0 30 30\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath stroke=\'' + navbarDarkColor + '\' strokeWidth=\'2\' strokeLinecap=\'round\' stroke-miterlimit=\'10\' d=\'M4 7h22M4 15h22M4 23h22\'/%3E%3C/svg%3E")';
var navbarDarkTogglerBorderColor = sassRgba(white, 0.1);

var navbarLightColor = sassRgba(black, 0.5);
var navbarLightHoverColor = sassRgba(black, 0.7);
var navbarLightActiveColor = sassRgba(black, 0.9);

export const inputBoxShadow = `inset 0 1px 1px ${sassRgba(black, 0.075)}`;

export const inputBorderRadius = borderRadius;
export const inputBorderRadiusLg = borderRadiusLg;
export const inputBorderRadiusSm = borderRadiusSm;
export const inputBgFocus = inputBg;
export const inputBorderColorFocus = lighten(0.25, themeColors.primary);
export const inputBoxShadowFocus = `${inputBoxShadow}, ${sassRgba(
  inputBorderColorFocus,
  0.6
)}`;
export const inputColorFocus = inputColor;
export const inputColorPlaceholder = gray600;

export const inputHeight = `${stripUnit(fontSizeBase) * inputBtnLineHeight +
  stripUnit(inputBtnPaddingY) * 2}rem`;

export const inputHeightLg = `${stripUnit(fontSizeLg) * inputBtnLineHeightLg +
  stripUnit(inputBtnPaddingYlg) * 2}rem`;

export const inputHeightSm = `${stripUnit(fontSizeSm) * inputBtnLineHeightSm +
  stripUnit(inputBtnPaddingYsm) * 2}rem`;

export const inputTransition = `borderColor ease-in-out .15s, box-shadow ease-in-out .15s`;

// Dropdowns
//
// Dropdown menu container and contents.

export const dropdownMinWidth = '10rem';
export const dropdownPaddingY = '.5rem';
export const dropdownMarginTop = '.125rem';

// Cards

var cardSpacerY = '.75rem';
var cardSpacerX = '1.25rem';
var cardBorderWidth = '1px';
var cardBorderRadius = borderRadius;
var cardBorderColor = sassRgba(black, 0.125);
var cardInnerBorderRadius = 'calc(' + polished.stripUnit(cardBorderRadius) + 'px - ' + polished.stripUnit(cardBorderWidth) + ')}px)';
var cardCapBg = sassRgba(black, 0.03);
var cardBg = white;

var cardInverseLinkHoverColor = white;

var cardImgOverlayPadding = '1.25rem';

var cardDeckMargin = polished.stripUnit(gridGutterWidthBase) / 2 + 'px';

var cardColumnsCount = 3;
var cardColumnsGap = '1.25rem';
var cardColumnsMargin = cardSpacerY;

var defaultTheme = Object.freeze({
	white: white,
	gray100: gray100,
	gray200: gray200,
	gray300: gray300,
	gray400: gray400,
	gray500: gray500,
	gray600: gray600,
	gray700: gray700,
	gray800: gray800,
	gray900: gray900,

var inputBorderColor = sassRgba(black, 0.15);
var inputBtnBorderWidth = borderWidth; // For form controls ans
var inputBoxShadow = 'inset 0 1px 1px ' + sassRgba(black, 0.075);

var inputBorderRadius = borderRadius;
var inputBorderRadiusLg = borderRadiusLg;
var inputBorderRadiusSm = borderRadiusSm;
var inputBgFocus = inputBg;
var inputBorderColorFocus = lighten(0.25, themeColors.primary);
var inputBoxShadowFocus = inputBoxShadow + ', ' + sassRgba(inputBorderColorFocus, 0.6);
var inputColorFocus = inputColor;
var inputColorPlaceholder = gray600;

var inputHeight = stripUnit(fontSizeBase) * inputBtnLineHeight + stripUnit(inputBtnPaddingY) * 2 + 'rem';

var inputHeightLg = stripUnit(fontSizeLg) * inputBtnLineHeightLg + stripUnit(inputBtnPaddingYlg) * 2 + 'rem';

var inputHeightSm = stripUnit(fontSizeSm) * inputBtnLineHeightSm + stripUnit(inputBtnPaddingYsm) * 2 + 'rem';

var inputTransition = 'borderColor ease-in-out .15s, box-shadow ease-in-out .15s';

// Dropdowns
//
// Dropdown menu container and contents.

var dropdownMinWidth = '10rem';
var dropdownPaddingY = '.5rem';
var dropdownMarginTop = '.125rem';
var dropdownBg = white;
var dropdownBorderColor = sassRgba(black, 0.15);
var dropdownBorderWidth = borderWidth;
var dropdownDividerBg = gray200;

// Jumbotron

export const jumbotronPadding = '2rem';
export const jumbotronBg = gray200;

// Cards

export const cardSpacerY = '.75rem';
export const cardSpacerX = '1.25rem';
export const cardBorderWidth = '1px';
export const cardBorderRadius = borderRadius;
export const cardBorderColor = sassRgba(black, 0.125);
export const cardInnerBorderRadius = `calc(${stripUnit(
  cardBorderRadius
)}px - ${stripUnit(cardBorderWidth)})}px)`;
export const cardCapBg = sassRgba(black, 0.03);
export const cardBg = white;

export const cardInverseLinkHoverColor = white;

export const cardImgOverlayPadding = '1.25rem';

export const cardDeckMargin = `${stripUnit(gridGutterWidthBase) / 2}px`;

export const cardColumnsCount = 3;
export const cardColumnsGap = '1.25rem';
export const cardColumnsMargin = cardSpacerY;

return function responseFontFn(props) {
    minSize = stripUnit(minSize || variables.font.sizeMin);
    size = stripUnit(size || variables.font.size);
    limit = limit || variables.pageLimit();
    if (typeof limit === 'function') {
      limit = (limit as any)(props);
    }

    const baseline = stripUnit(breakpoints.sm);
    const fontMultiplier =
      ((size as number) - (minSize as number)) / (stripUnit(limit) - baseline);
    const fontBaseline = (minSize as number) - fontMultiplier * baseline;

    // prettier-ignore
    return css`
      font-size: ${minSize}px;
      font-size: calc(${minSize}px * var(--scale-font));

var breadcrumbActiveColor = gray600;
var breadcrumbDivider = '"/"';

// Jumbotron

var jumbotronPadding = '2rem';
var jumbotronBg = gray200;

// Cards

var cardSpacerY = '.75rem';
var cardSpacerX = '1.25rem';
var cardBorderWidth = '1px';
var cardBorderRadius = borderRadius;
var cardBorderColor = sassRgba(black, 0.125);
var cardInnerBorderRadius = 'calc(' + polished.stripUnit(cardBorderRadius) + 'px - ' + polished.stripUnit(cardBorderWidth) + ')}px)';
var cardCapBg = sassRgba(black, 0.03);
var cardBg = white;

var cardInverseLinkHoverColor = white;

var cardImgOverlayPadding = '1.25rem';

var cardDeckMargin = polished.stripUnit(gridGutterWidthBase) / 2 + 'px';

var cardColumnsCount = 3;
var cardColumnsGap = '1.25rem';
var cardColumnsMargin = cardSpacerY;

var defaultTheme = Object.freeze({
	white: white,
	gray100: gray100,

var inputColor = gray700;
var inputBorderColor = sassRgba(black, 0.15);
var inputBtnBorderWidth = borderWidth; // For form controls ans
var inputBoxShadow = 'inset 0 1px 1px ' + sassRgba(black, 0.075);

var inputBorderRadius = borderRadius;
var inputBorderRadiusLg = borderRadiusLg;
var inputBorderRadiusSm = borderRadiusSm;
var inputBgFocus = inputBg;
var inputBorderColorFocus = lighten(0.25, themeColors.primary);
var inputBoxShadowFocus = inputBoxShadow + ', ' + sassRgba(inputBorderColorFocus, 0.6);
var inputColorFocus = inputColor;
var inputColorPlaceholder = gray600;

var inputHeight = stripUnit(fontSizeBase) * inputBtnLineHeight + stripUnit(inputBtnPaddingY) * 2 + 'rem';

var inputHeightLg = stripUnit(fontSizeLg) * inputBtnLineHeightLg + stripUnit(inputBtnPaddingYlg) * 2 + 'rem';

var inputHeightSm = stripUnit(fontSizeSm) * inputBtnLineHeightSm + stripUnit(inputBtnPaddingYsm) * 2 + 'rem';

var inputTransition = 'borderColor ease-in-out .15s, box-shadow ease-in-out .15s';

// Dropdowns
//
// Dropdown menu container and contents.

var dropdownMinWidth = '10rem';
var dropdownPaddingY = '.5rem';
var dropdownMarginTop = '.125rem';
var dropdownBg = white;
var dropdownBorderColor = sassRgba(black, 0.15);