@razorpay/blade 3.5.3 → 3.6.0

package/build/tokens/index.web.js

@@ -158,7 +158,10 @@ var colors$2 = {
       a00: "hsla(216, 44%, 23%, ".concat(opacities[0], ")"),
       a50: "hsla(216, 44%, 23%, ".concat(opacities[1], ")"),
       a100: "hsla(216, 44%, 23%, ".concat(opacities[2], ")"),
-      a200: "hsla(216, 44%, 23%, ".concat(opacities[3], ")")
+      a200: "hsla(216, 44%, 23%, ".concat(opacities[3], ")"),
+      a300: "hsla(214, 21%, 94%, ".concat(opacities[1], ")"),
+      a400: "hsla(214, 21%, 94%, ".concat(opacities[2], ")"),
+      a500: "hsla(214, 21%, 94%, ".concat(opacities[3], ")")
     },
     blueGrayDark: {
       0: "hsla(0, 0%, 99%, ".concat(opacities[9], ")"),
@@ -179,7 +182,10 @@ var colors$2 = {
       a00: "hsla(220, 11%, 84%, ".concat(opacities[0], ")"),
       a50: "hsla(220, 11%, 84%, ".concat(opacities[1], ")"),
       a100: "hsla(220, 11%, 84%, ".concat(opacities[2], ")"),
-      a200: "hsla(220, 11%, 84%, ".concat(opacities[3], ")")
+      a200: "hsla(220, 11%, 84%, ".concat(opacities[3], ")"),
+      a300: "hsla(217, 11%, 76%, ".concat(opacities[1], ")"),
+      a400: "hsla(217, 11%, 76%, ".concat(opacities[2], ")"),
+      a500: "hsla(217, 11%, 76%, ".concat(opacities[3], ")")
     },
     navyGrayLight: {
       0: "hsla(0, 0%, 100%, ".concat(opacities[9], ")"),
@@ -200,7 +206,10 @@ var colors$2 = {
       a00: "hsla(226, 44%, 23%, ".concat(opacities[0], ")"),
       a50: "hsla(226, 44%, 23%, ".concat(opacities[1], ")"),
       a100: "hsla(226, 44%, 23%, ".concat(opacities[2], ")"),
-      a200: "hsla(226, 44%, 23%, ".concat(opacities[3], ")")
+      a200: "hsla(226, 44%, 23%, ".concat(opacities[3], ")"),
+      a300: "hsla(223, 21%, 94%, ".concat(opacities[1], ")"),
+      a400: "hsla(223, 21%, 94%, ".concat(opacities[2], ")"),
+      a500: "hsla(223, 21%, 94%, ".concat(opacities[3], ")")
     },
     navyGrayDark: {
       0: "hsla(0, 0%, 99%, ".concat(opacities[9], ")"),
@@ -221,7 +230,10 @@ var colors$2 = {
       a00: "hsla(233, 11%, 84%, ".concat(opacities[0], ")"),
       a50: "hsla(233, 11%, 84%, ".concat(opacities[1], ")"),
       a100: "hsla(233, 11%, 84%, ".concat(opacities[2], ")"),
-      a200: "hsla(233, 11%, 84%, ".concat(opacities[3], ")")
+      a200: "hsla(233, 11%, 84%, ".concat(opacities[3], ")"),
+      a300: "hsla(231, 11%, 76%, ".concat(opacities[1], ")"),
+      a400: "hsla(231, 11%, 76%, ".concat(opacities[2], ")"),
+      a500: "hsla(231, 11%, 76%, ".concat(opacities[3], ")")
     },
     ashGrayLight: {
       0: "hsla(0, 0%, 100%, ".concat(opacities[9], ")"),
@@ -242,7 +254,10 @@ var colors$2 = {
       a00: "hsla(214, 15%, 18%, ".concat(opacities[0], ")"),
       a50: "hsla(214, 15%, 18%, ".concat(opacities[1], ")"),
       a100: "hsla(214, 15%, 18%, ".concat(opacities[2], ")"),
-      a200: "hsla(214, 15%, 18%, ".concat(opacities[3], ")")
+      a200: "hsla(214, 15%, 18%, ".concat(opacities[3], ")"),
+      a300: "hsla(210, 6%, 94%, ".concat(opacities[1], ")"),
+      a400: "hsla(210, 6%, 94%, ".concat(opacities[2], ")"),
+      a500: "hsla(210, 6%, 94%, ".concat(opacities[3], ")")
     },
     ashGrayDark: {
       0: "hsla(0, 0%, 99%, ".concat(opacities[9], ")"),
@@ -263,7 +278,10 @@ var colors$2 = {
       a00: "hsla(240, 1%, 84%, ".concat(opacities[0], ")"),
       a50: "hsla(240, 1%, 84%, ".concat(opacities[1], ")"),
       a100: "hsla(240, 1%, 84%, ".concat(opacities[2], ")"),
-      a200: "hsla(240, 1%, 84%, ".concat(opacities[3], ")")
+      a200: "hsla(240, 1%, 84%, ".concat(opacities[3], ")"),
+      a300: "hsla(228, 4%, 76%, ".concat(opacities[1], ")"),
+      a400: "hsla(228, 4%, 76%, ".concat(opacities[2], ")"),
+      a500: "hsla(228, 4%, 76%, ".concat(opacities[3], ")")
     }
   }
 };
@@ -4729,15 +4747,15 @@ var colors$1 = {
       background: {
         level1: {
           lowContrast: colors$2.neutral.blueGrayLight[100],
-          highContrast: colors$2.neutral.blueGrayLight[1100]
+          highContrast: colors$2.neutral.blueGrayLight[1200]
         },
         level2: {
           lowContrast: colors$2.neutral.blueGrayLight[0],
-          highContrast: colors$2.neutral.blueGrayLight[900]
+          highContrast: colors$2.neutral.blueGrayLight[1100]
         },
         level3: {
           lowContrast: colors$2.neutral.blueGrayLight[50],
-          highContrast: colors$2.neutral.blueGrayLight[1300]
+          highContrast: colors$2.neutral.blueGrayLight[1000]
         }
       },
       border: {
@@ -4810,14 +4828,38 @@ var colors$1 = {
         800: colors$2.chromatic.azure[950]
       },
       gray: {
-        200: colors$2.neutral.blueGrayLight[50],
-        300: colors$2.neutral.blueGrayLight[100],
-        400: colors$2.neutral.blueGrayLight[300],
-        500: colors$2.neutral.blueGrayLight[500],
-        600: colors$2.neutral.blueGrayLight[600],
-        700: colors$2.neutral.blueGrayLight[800],
-        a50: colors$2.neutral.blueGrayLight.a50,
-        a100: colors$2.neutral.blueGrayLight.a100
+        200: {
+          lowContrast: colors$2.neutral.blueGrayLight[50],
+          highContrast: colors$2.neutral.blueGrayLight[1000]
+        },
+        300: {
+          lowContrast: colors$2.neutral.blueGrayLight[100],
+          highContrast: colors$2.neutral.blueGrayLight[900]
+        },
+        400: {
+          lowContrast: colors$2.neutral.blueGrayLight[300],
+          highContrast: colors$2.neutral.blueGrayLight[800]
+        },
+        500: {
+          lowContrast: colors$2.neutral.blueGrayLight[500],
+          highContrast: colors$2.neutral.blueGrayLight[700]
+        },
+        600: {
+          lowContrast: colors$2.neutral.blueGrayLight[600],
+          highContrast: colors$2.neutral.blueGrayLight[500]
+        },
+        700: {
+          lowContrast: colors$2.neutral.blueGrayLight[800],
+          highContrast: colors$2.neutral.blueGrayLight[100]
+        },
+        a50: {
+          lowContrast: colors$2.neutral.blueGrayLight.a50,
+          highContrast: colors$2.neutral.blueGrayLight.a300
+        },
+        a100: {
+          lowContrast: colors$2.neutral.blueGrayLight.a100,
+          highContrast: colors$2.neutral.blueGrayLight.a400
+        }
       },
       secondary: {
         500: colors$2.chromatic.emerald[500]
@@ -5775,15 +5817,15 @@ var colors$1 = {
       background: {
         level1: {
           lowContrast: colors$2.neutral.blueGrayDark[1300],
-          highContrast: colors$2.neutral.blueGrayDark[700]
+          highContrast: colors$2.neutral.blueGrayDark[800]
         },
         level2: {
           lowContrast: colors$2.neutral.blueGrayDark[1100],
-          highContrast: colors$2.neutral.blueGrayDark[600]
+          highContrast: colors$2.neutral.blueGrayDark[700]
         },
         level3: {
           lowContrast: colors$2.neutral.blueGrayDark[900],
-          highContrast: colors$2.neutral.blueGrayDark[1100]
+          highContrast: colors$2.neutral.blueGrayDark[600]
         }
       },
       border: {
@@ -5856,14 +5898,38 @@ var colors$1 = {
         800: colors$2.chromatic.azure[900]
       },
       gray: {
-        200: colors$2.neutral.blueGrayDark[800],
-        300: colors$2.neutral.blueGrayDark[700],
-        400: colors$2.neutral.blueGrayDark[600],
-        500: colors$2.neutral.blueGrayDark[500],
-        600: colors$2.neutral.blueGrayDark[400],
-        700: colors$2.neutral.blueGrayDark[200],
-        a50: colors$2.neutral.blueGrayDark.a50,
-        a100: colors$2.neutral.blueGrayDark.a100
+        200: {
+          lowContrast: colors$2.neutral.blueGrayDark[800],
+          highContrast: colors$2.neutral.blueGrayDark[600]
+        },
+        300: {
+          lowContrast: colors$2.neutral.blueGrayDark[700],
+          highContrast: colors$2.neutral.blueGrayDark[500]
+        },
+        400: {
+          lowContrast: colors$2.neutral.blueGrayDark[600],
+          highContrast: colors$2.neutral.blueGrayDark[400]
+        },
+        500: {
+          lowContrast: colors$2.neutral.blueGrayDark[500],
+          highContrast: colors$2.neutral.blueGrayDark[300]
+        },
+        600: {
+          lowContrast: colors$2.neutral.blueGrayDark[400],
+          highContrast: colors$2.neutral.blueGrayDark[200]
+        },
+        700: {
+          lowContrast: colors$2.neutral.blueGrayDark[200],
+          highContrast: colors$2.neutral.blueGrayDark[50]
+        },
+        a50: {
+          lowContrast: colors$2.neutral.blueGrayDark.a50,
+          highContrast: colors$2.neutral.blueGrayDark.a300
+        },
+        a100: {
+          lowContrast: colors$2.neutral.blueGrayDark.a100,
+          highContrast: colors$2.neutral.blueGrayDark.a400
+        }
       },
       secondary: {
         500: colors$2.chromatic.emerald[500]
@@ -6893,15 +6959,15 @@ var colors = {
       background: {
         level1: {
           lowContrast: colors$2.neutral.navyGrayLight[100],
-          highContrast: colors$2.neutral.navyGrayLight[1100]
+          highContrast: colors$2.neutral.navyGrayLight[1200]
         },
         level2: {
           lowContrast: colors$2.neutral.navyGrayLight[0],
-          highContrast: colors$2.neutral.navyGrayLight[900]
+          highContrast: colors$2.neutral.navyGrayLight[1100]
         },
         level3: {
           lowContrast: colors$2.neutral.navyGrayLight[50],
-          highContrast: colors$2.neutral.navyGrayLight[1300]
+          highContrast: colors$2.neutral.navyGrayLight[1000]
         }
       },
       border: {
@@ -6974,14 +7040,38 @@ var colors = {
         800: colors$2.chromatic.azure[950]
       },
       gray: {
-        200: colors$2.neutral.navyGrayLight[50],
-        300: colors$2.neutral.navyGrayLight[100],
-        400: colors$2.neutral.navyGrayLight[300],
-        500: colors$2.neutral.navyGrayLight[500],
-        600: colors$2.neutral.navyGrayLight[600],
-        700: colors$2.neutral.navyGrayLight[800],
-        a50: colors$2.neutral.navyGrayLight.a50,
-        a100: colors$2.neutral.navyGrayLight.a100
+        200: {
+          lowContrast: colors$2.neutral.navyGrayLight[50],
+          highContrast: colors$2.neutral.navyGrayLight[1000]
+        },
+        300: {
+          lowContrast: colors$2.neutral.navyGrayLight[100],
+          highContrast: colors$2.neutral.navyGrayLight[900]
+        },
+        400: {
+          lowContrast: colors$2.neutral.navyGrayLight[300],
+          highContrast: colors$2.neutral.navyGrayLight[800]
+        },
+        500: {
+          lowContrast: colors$2.neutral.navyGrayLight[500],
+          highContrast: colors$2.neutral.navyGrayLight[700]
+        },
+        600: {
+          lowContrast: colors$2.neutral.navyGrayLight[600],
+          highContrast: colors$2.neutral.navyGrayLight[500]
+        },
+        700: {
+          lowContrast: colors$2.neutral.navyGrayLight[800],
+          highContrast: colors$2.neutral.navyGrayLight[100]
+        },
+        a50: {
+          lowContrast: colors$2.neutral.navyGrayLight.a50,
+          highContrast: colors$2.neutral.navyGrayLight.a300
+        },
+        a100: {
+          lowContrast: colors$2.neutral.navyGrayLight.a100,
+          highContrast: colors$2.neutral.navyGrayLight.a400
+        }
       },
       secondary: {
         500: colors$2.chromatic.cider[600]
@@ -7939,15 +8029,15 @@ var colors = {
       background: {
         level1: {
           lowContrast: colors$2.neutral.navyGrayDark[1300],
-          highContrast: colors$2.neutral.navyGrayDark[700]
+          highContrast: colors$2.neutral.navyGrayDark[800]
         },
         level2: {
           lowContrast: colors$2.neutral.navyGrayDark[1100],
-          highContrast: colors$2.neutral.navyGrayDark[600]
+          highContrast: colors$2.neutral.navyGrayDark[700]
         },
         level3: {
           lowContrast: colors$2.neutral.navyGrayDark[900],
-          highContrast: colors$2.neutral.navyGrayDark[1100]
+          highContrast: colors$2.neutral.navyGrayDark[600]
         }
       },
       border: {
@@ -8020,14 +8110,38 @@ var colors = {
         800: colors$2.chromatic.azure[900]
       },
       gray: {
-        200: colors$2.neutral.navyGrayDark[800],
-        300: colors$2.neutral.navyGrayDark[700],
-        400: colors$2.neutral.navyGrayDark[600],
-        500: colors$2.neutral.navyGrayDark[500],
-        600: colors$2.neutral.navyGrayDark[400],
-        700: colors$2.neutral.navyGrayDark[200],
-        a50: colors$2.neutral.navyGrayDark.a50,
-        a100: colors$2.neutral.navyGrayDark.a100
+        200: {
+          lowContrast: colors$2.neutral.navyGrayDark[800],
+          highContrast: colors$2.neutral.navyGrayDark[600]
+        },
+        300: {
+          lowContrast: colors$2.neutral.navyGrayDark[700],
+          highContrast: colors$2.neutral.navyGrayDark[500]
+        },
+        400: {
+          lowContrast: colors$2.neutral.navyGrayDark[600],
+          highContrast: colors$2.neutral.navyGrayDark[400]
+        },
+        500: {
+          lowContrast: colors$2.neutral.navyGrayDark[500],
+          highContrast: colors$2.neutral.navyGrayDark[300]
+        },
+        600: {
+          lowContrast: colors$2.neutral.navyGrayDark[400],
+          highContrast: colors$2.neutral.navyGrayDark[200]
+        },
+        700: {
+          lowContrast: colors$2.neutral.navyGrayDark[200],
+          highContrast: colors$2.neutral.navyGrayDark[50]
+        },
+        a50: {
+          lowContrast: colors$2.neutral.navyGrayDark.a50,
+          highContrast: colors$2.neutral.navyGrayDark.a300
+        },
+        a100: {
+          lowContrast: colors$2.neutral.navyGrayDark.a100,
+          highContrast: colors$2.neutral.navyGrayDark.a400
+        }
       },
       secondary: {
         500: colors$2.chromatic.cider[600]