toggle-corp/react-store

View on GitHub
utils/styles/default/dimens.js

Summary

Maintainability
A
0 mins
Test Coverage
const fontSizeSuperSmall = '7px';
const fontSizeSuperSmallAlt = '8px';
const fontSizeExtraSmall = '9px';
const fontSizeExtraSmallAlt = '10px';
const fontSizeSmall = '11px';
const fontSizeSmallAlt = '12px';
const fontSizeMedium = '13px';
const fontSizeMediumAlt = '14px';
const fontSizeLarge = '16px';
const fontSizeLargeAlt = '18px';
const fontSizeExtraLarge = '20px';
const fontSizeExtraLargeAlt = '22px';
const fontSizeSuperLarge = '26px';
const fontSizeSuperLargeAlt = '28px';
const fontSizeDefault = fontSizeMedium;

const fontWeightLight = '300';
const fontWeightNormal = '400';
const fontWeightMedium = '400';
const fontWeightBold = '600';
const fontWeightDefault = fontWeightMedium;

const spacingSuperSmall = '1px';
const spacingExtraSmall = '2px';
const spacingExtraSmallAlt = '3px';
const spacingSmall = '6px';
const spacingSmallAlt = '8px';
const spacingMedium = '10px';
const spacingMediumAlt = '12px';
const spacingLarge = '18px';
const spacingLargeAlt = '22px';
const spacingExtraLarge = '26px';
const spacingExtraLargeAlt = '30px';
const spacingSuperLarge = '36px';
const spacingSuperLargeAlt = '42px';

const spacingDefault = spacingMedium;

const heightNavbar = '48px';
const heightProgressBar = '6px';

const widthSeparatorThin = '1px';
const widthSeparatorMedium = '2px';
const widthSeparatorThick = '4px';

const widthIconMedium = '16px';
const widthIconLargeAlt = '24px';
const widthIconLarge = '24px';
const widthIconExtraLarge = '32px';
const widthIconExtraLargeAlt = '40px';
const widthIconSuperLarge = '48px';
const widthIconExtremeLarge = '96px';

const widthLoginForm = '360px';
const widthRegisterForm = '520px';

const widthMatrix1dTitle = '108px';

const zIndexRegionDetailView = '3';

const heightScaleWidgetUnit = '20px';
const widthScaleWidgetUnit = '10px';
const heightScaleWidgetUnitSelected = '24px';
const widthScaleWidgetUnitSelected = '12px';

const widthScrollbar = '10px';

const durationSlow = '.3s';
const durationMedium = '.2s';
const durationFast = '.1s';

const durationSuperSlow = '.7s';
const durationRelaxed = '1s';

const widthModalMedium = '640px';
const widthModalSmall = '480px';
const widthModalExtraSmall = '320px';

const widthNavbarIcon = '24px';
const heightNavbarIcon = '24px';
const widthNavbarAvatar = '32px';
const heightNavbarAvatar = '32px';

const radiusBlurMedium = '9px';
const radiusBlurSmall = '6px';
const radiusBlurLarge = '12px';

const radiusSpreadMedium = '-6px';
const radiusSpreadSmall = '-3px';
const radiusSpreadLarge = '-9px';

const radiusBorderMedium = '3px';
const radiusBorderSmall = '2px';
const radiusBorderLarge = '5px';

const radiusButtonBorder = radiusBorderSmall;
const radiusProgressBarBorder = radiusBorderMedium;

const durationTransitionSlow = '.4s';
const durationTransitionMedium = '.2s';
const durationTransitionFast = '.1s';

const widthSegmentButton = '42px';
const heightSegmentButton = '32px';

const heightIndicatorLine = '4px';
const heightIndicator = '10px';
const widthIndicator = '10px';

const heightHeader = '48px';

const heightModalHeader = '64px';
const heightModalFooter = '64px';
const heightTabbar = '40px';

const widthLoadingIcon = '32px';
const heightLoadingIcon = '32px';

const fontSizeLoadingIconSmall = '16px';
const fontSizeLoadingIconMedium = '24px';
const fontSizeLoadingIconLarge = '32px';

const widthMarkerRadius = '8px';

const pageMargin = '8px';

const dimens = {
    fontSizeSuperSmall,
    fontSizeSuperSmallAlt,
    fontSizeExtraSmall,
    fontSizeExtraSmallAlt,
    fontSizeSmall,
    fontSizeSmallAlt,
    fontSizeMedium,
    fontSizeMediumAlt,
    fontSizeLarge,
    fontSizeLargeAlt,
    fontSizeExtraLarge,
    fontSizeExtraLargeAlt,
    fontSizeSuperLarge,
    fontSizeSuperLargeAlt,
    fontSizeDefault,

    fontWeightLight,
    fontWeightNormal,
    fontWeightMedium,
    fontWeightBold,
    fontWeightDefault,

    spacingSuperSmall,
    spacingExtraSmall,
    spacingExtraSmallAlt,
    spacingSmall,
    spacingSmallAlt,
    spacingMedium,
    spacingMediumAlt,
    spacingLarge,
    spacingLargeAlt,
    spacingExtraLarge,
    spacingExtraLargeAlt,
    spacingSuperLarge,
    spacingSuperLargeAlt,

    spacingDefault,

    heightNavbar,
    heightProgressBar,

    widthSeparatorThin,
    widthSeparatorMedium,
    widthSeparatorThick,

    widthIconMedium,
    widthIconLargeAlt,
    widthIconLarge,
    widthIconExtraLarge,
    widthIconExtraLargeAlt,
    widthIconSuperLarge,
    widthIconExtremeLarge,

    widthLoginForm,
    widthRegisterForm,

    widthMatrix1dTitle,

    zIndexRegionDetailView,

    heightScaleWidgetUnit,
    widthScaleWidgetUnit,
    heightScaleWidgetUnitSelected,
    widthScaleWidgetUnitSelected,

    widthScrollbar,

    durationSuperSlow,
    durationRelaxed,
    durationSlow,
    durationMedium,
    durationFast,

    widthModalMedium,
    widthModalSmall,
    widthModalExtraSmall,

    widthNavbarIcon,
    heightNavbarIcon,
    widthNavbarAvatar,
    heightNavbarAvatar,

    radiusBlurMedium,
    radiusBlurSmall,
    radiusBlurLarge,

    radiusSpreadMedium,
    radiusSpreadSmall,
    radiusSpreadLarge,

    radiusBorderMedium,
    radiusBorderSmall,
    radiusBorderLarge,

    radiusButtonBorder,

    radiusProgressBarBorder,

    durationTransitionSlow,
    durationTransitionMedium,
    durationTransitionFast,

    widthSegmentButton,
    heightSegmentButton,

    heightIndicatorLine,
    heightIndicator,
    widthIndicator,

    heightHeader,

    heightModalHeader,
    heightModalFooter,
    heightTabbar,

    widthLoadingIcon,
    heightLoadingIcon,

    fontSizeLoadingIconSmall,
    fontSizeLoadingIconMedium,
    fontSizeLoadingIconLarge,

    widthMarkerRadius,

    pageMargin,
};

export default dimens;