@razorpay/blade 9.6.1 → 10.0.0

package/build/tokens/index.production.web.js

@@ -10,8 +10,8 @@ var border = {
     large: 8,
     max: 9999,
     round: '50%' // this needs to be in % but need to figure out how will we store unitless things
-
   },
+
   width: {
     none: 0,
     thinner: 0.5,
@@ -324,8 +324,15 @@ var fontFamily = {
 };
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/**
+ * 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,
   bold: 700
@@ -365,9 +372,10 @@ var typography = {
       600: 40,
       700: 40,
       800: 48
-    } // letterSpacings: {},
-
+    }
+    // letterSpacings: {},
   },
+
   onMobile: {
     fonts: {
       family: _objectSpread({}, fontFamily),
@@ -402,8 +410,8 @@ var typography = {
       600: 32,
       700: 40,
       800: 40
-    } // letterSpacings: {},
-
+    }
+    // letterSpacings: {},
   }
 };
 
@@ -412,6 +420,7 @@ var typography = {
  *
  * {@link ../../components/Box/BaseBox/types/spacingTypes.ts}
  */
+
 var spacing = {
   0: 0,
   1: 2,
@@ -431,6 +440,8 @@ var makeBezier = function makeBezier(x1, y1, x2, y2) {
   return "cubic-bezier(".concat(x1, ", ").concat(y1, ", ").concat(x2, ", ").concat(y2, ")");
 };
 
+// similar to EasingFactoryFn of `react-native-reanimated`
+
 var delay = {
   '2xshort': 70,
   xshort: 120,
@@ -448,8 +459,8 @@ var duration = {
   xgentle: 600,
   '2xgentle': 900
 };
-/* makeBezier returns a string of `cubic-bezier()` for web & a react-native-reanimated Easing Function of type `EasingFunctionFactory` for native */
 
+/* makeBezier returns a string of `cubic-bezier()` for web & a react-native-reanimated Easing Function of type `EasingFactoryFn` for native */
 var easing = {
   standard: {
     attentive: makeBezier(0.5, 0, 0.3, 1.5),
@@ -480,106 +491,72 @@ var motion = {
 var size = {
   /** 0 px */
   0: 0,
-
   /** 1 px */
   1: 1,
-
   /** 2 px */
   2: 2,
-
   /** 3 px */
   3: 3,
-
   /** 4 px */
   4: 4,
-
   /** 5 px */
   5: 5,
-
   /** 6 px */
   6: 6,
-
   /** 8 px */
   8: 8,
-
   /** 10 px */
   10: 10,
-
   /** 12 px */
   12: 12,
-
   /** 16 px */
   16: 16,
-
   /** 18 px */
   18: 18,
-
   /** 20 px */
   20: 20,
-
   /** 24 px */
   24: 24,
-
   /** 28 px */
   28: 28,
-
   /** 32 px */
   32: 32,
-
   /** 36 px */
   36: 36,
-
   /** 40 px */
   40: 40,
-
   /** 44 px */
   44: 44,
-
   /** 48 px */
   48: 48,
-
   /** 60 px */
   56: 56,
-
   /** 100 px */
   100: 100,
-
   /** 120 px */
   120: 120,
-
   /** 140 px */
   140: 140,
-
   /** 160 px */
   160: 160,
-
   /** 200 px */
   200: 200,
-
   /** 300 px */
   300: 300,
-
   /** 360 px */
   360: 360,
-
   /** 400 px */
   400: 400,
-
   /** 584 px */
   584: 584,
-
   /** 640 px */
   640: 640,
-
   /** 760 px */
   760: 760,
-
   /** 800 px */
   800: 800,
-
   /** 1024 px */
   1024: 1024,
-
   /** 1136 px */
   1136: 1136
 };
@@ -587,7 +564,6 @@ var size = {
 var elevation = {
   onLight: {
     none: 'none',
-
     /** offset-x | offset-y | blur-radius | spread-radius | color, offset-x | offset-y | blur-radius | spread-radius | color */
     lowRaised: "0 4px 8px -2px hsla(217, 56%, 17%, 0.1), 0 2px 4px -2px hsla(217, 56%, 17%, 0.06)",
     midRaised: "0 12px 16px -4px hsla(217, 56%, 17%, 0.08), 0 4px 6px -2px hsla(217, 56%, 17%, 0.03)",
@@ -8397,9 +8373,9 @@ var merge_1 = merge;
  */
 var overrideTheme = function overrideTheme(_ref) {
   var baseThemeTokens = _ref.baseThemeTokens,
-      overrides = _ref.overrides;
-
+    overrides = _ref.overrides;
 
+  // Need to clone before merging since merge changes/mutates the actual object
   return merge_1(cloneDeep_1(baseThemeTokens), overrides);
 };