@razorpay/blade/build/lib/web/development/tokens/global/typography.js

The Design System that powers Razorpay

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import './fontFamily/index.js';
import { fontFamily } from './fontFamily/fontFamily.web.js';

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }

/**
 * For font size and line-heights we can’t say from xl to 2xl the value will necessary increase.
 * it might decrease or remain same because these are alias tokens and we need aliases for cross platform.
 * so for example xl on mobile can be 32px and on desktop xl can be 34px,
 * similarly 2xl on mobile can be 34px but on desktop doesn’t necessarily mean 2xl will be more than xl(34px) it can be 32 as well since visually they make better hierarchy.
 */

var fontWeight = {
  regular: 400,
  medium: 500,
  semibold: 600,
  bold: 700
};
var typography = {
  onDesktop: {
    fonts: {
      family: _objectSpread({}, fontFamily),
      size: {
        25: 10,
        50: 11,
        75: 12,
        100: 14,
        200: 16,
        300: 18,
        400: 20,
        500: 24,
        600: 32,
        700: 40,
        800: 48,
        900: 56,
        1000: 64,
        1100: 72
      },
      weight: _objectSpread({}, fontWeight)
    },
    lineHeights: {
      0: 0,
      25: 14,
      50: 16,
      75: 18,
      100: 20,
      200: 24,
      300: 24,
      400: 26,
      500: 32,
      600: 38,
      700: 46,
      800: 56,
      900: 64,
      1000: 70,
      1100: 78
    },
    letterSpacings: {
      50: -1,
      100: 0
    }
  },
  onMobile: {
    fonts: {
      family: _objectSpread({}, fontFamily),
      size: {
        25: 10,
        50: 11,
        75: 12,
        100: 14,
        200: 16,
        300: 16,
        400: 18,
        500: 20,
        600: 24,
        700: 32,
        800: 34,
        900: 36,
        1000: 38,
        1100: 40
      },
      weight: _objectSpread({}, fontWeight)
    },
    lineHeights: {
      0: 0,
      25: 14,
      50: 16,
      75: 18,
      100: 20,
      200: 24,
      300: 22,
      400: 24,
      500: 26,
      600: 32,
      700: 38,
      800: 40,
      900: 42,
      1000: 46,
      1100: 48
    },
    letterSpacings: {
      50: -1,
      100: 0
    }
  }
};

export { typography };
//# sourceMappingURL=typography.js.map