@razorpay/blade 12.111.0 → 12.119.1

package/build/types/tokens/index.d.ts

@@ -600,6 +600,10 @@ type DataCategoricalEmphasis = Pick<Emphasis, 'subtle' | 'moderate' | 'intense'>
     faint: string;
     strong: string;
 };
+type SurfacePrimaryEmphasis = Pick<Emphasis, 'subtle' | 'moderate' | 'intense'> & {
+    faint: string;
+    strong: string;
+};
 type DataSequentialEmphasis = Omit<ColorChromaticScale, 'a50' | 'a150' | 'a100' | 'a200' | 'a400' | 'a500' | 'a600' | 'a700'>;
 type DataColorCategories = 'blue' | 'green' | 'red' | 'orange' | 'skyBlue' | 'purple' | 'pink' | 'gold' | 'gray';
 type SubtleOrIntenseEmphasis = Pick<Emphasis, 'subtle' | 'intense'>;
@@ -651,8 +655,8 @@ type Colors = {
     interactive: {
         background: Record<Exclude<InteractiveColorKeys, InteractiveBackgroundColorsWithGhost>, InteractiveStatesWithFadedHighlighted> & Record<InteractiveBackgroundColorsWithGhost, InteractiveBackgroundStatesWithGhost>;
         border: Record<Exclude<InteractiveColorKeys, InteractiveBorderColorsWithFadedHighlighted>, InteractiveStates> & Record<InteractiveBorderColorsWithFadedHighlighted, InteractiveStatesWithFadedHighlighted>;
-        text: Record<InteractiveColorKeys | 'onPrimary', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
-        icon: Record<InteractiveColorKeys | 'onPrimary', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
+        text: Record<InteractiveColorKeys | 'onPrimary' | 'onNeutral', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
+        icon: Record<InteractiveColorKeys | 'onPrimary' | 'onNeutral', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
     };
     feedback: {
         background: Record<FeedbackColors, SubtleOrIntenseEmphasis>;
@@ -663,9 +667,10 @@ type Colors = {
     surface: {
         background: {
             gray: Pick<Emphasis, 'subtle' | 'moderate' | 'intense'>;
-            primary: SubtleOrIntenseEmphasis;
+            primary: SurfacePrimaryEmphasis;
             sea: SubtleOrIntenseEmphasis;
             cloud: SubtleOrIntenseEmphasis;
+            accent: Pick<Emphasis, 'intense'>;
         };
         border: {
             gray: Pick<Emphasis, 'normal' | 'subtle' | 'muted'>;
@@ -708,6 +713,8 @@ type ThemeTokens = {
 
 declare const bladeTheme: ThemeTokens;
 
+declare const bladeNeutralTheme: ThemeTokens;
+
 type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends Record<number | string, unknown> ? DeepPartial<T[P]> : T[P];
 };
@@ -1098,4 +1105,4 @@ type ElevationWithColorModes = Record<ColorSchemeModes, Elevation>;
 /** offset-x | offset-y | blur-radius | spread-radius | color, offset-x | offset-y | blur-radius | spread-radius | color */
 declare const elevation: ElevationWithColorModes;
 
-export { BackdropBlur, Border, Breakpoints, Color, ColorSchemeNames, ColorSchemeNamesInput, Colors, ColorsWithModes, DelayString, DurationString, EasingFactoryFn, EasingString, Elevation, ElevationWithColorModes, FontFamily, FontSize, Motion, Opacity, Size, Spacing, ThemeTokens, Typography, TypographyPlatforms, TypographyWithPlatforms, backdropBlur, bladeTheme, border, breakpoints, colors, createTheme, elevation, motion, opacity, overrideTheme, size, spacing, typography };
+export { BackdropBlur, Border, Breakpoints, Color, ColorSchemeNames, ColorSchemeNamesInput, Colors, ColorsWithModes, DelayString, DurationString, EasingFactoryFn, EasingString, Elevation, ElevationWithColorModes, FontFamily, FontSize, Motion, Opacity, Size, Spacing, ThemeTokens, Typography, TypographyPlatforms, TypographyWithPlatforms, backdropBlur, bladeNeutralTheme, bladeTheme, border, breakpoints, colors, createTheme, elevation, motion, opacity, overrideTheme, size, spacing, typography };

package/build/types/tokens/index.native.d.ts

@@ -600,6 +600,10 @@ type DataCategoricalEmphasis = Pick<Emphasis, 'subtle' | 'moderate' | 'intense'>
     faint: string;
     strong: string;
 };
+type SurfacePrimaryEmphasis = Pick<Emphasis, 'subtle' | 'moderate' | 'intense'> & {
+    faint: string;
+    strong: string;
+};
 type DataSequentialEmphasis = Omit<ColorChromaticScale, 'a50' | 'a150' | 'a100' | 'a200' | 'a400' | 'a500' | 'a600' | 'a700'>;
 type DataColorCategories = 'blue' | 'green' | 'red' | 'orange' | 'skyBlue' | 'purple' | 'pink' | 'gold' | 'gray';
 type SubtleOrIntenseEmphasis = Pick<Emphasis, 'subtle' | 'intense'>;
@@ -651,8 +655,8 @@ type Colors = {
     interactive: {
         background: Record<Exclude<InteractiveColorKeys, InteractiveBackgroundColorsWithGhost>, InteractiveStatesWithFadedHighlighted> & Record<InteractiveBackgroundColorsWithGhost, InteractiveBackgroundStatesWithGhost>;
         border: Record<Exclude<InteractiveColorKeys, InteractiveBorderColorsWithFadedHighlighted>, InteractiveStates> & Record<InteractiveBorderColorsWithFadedHighlighted, InteractiveStatesWithFadedHighlighted>;
-        text: Record<InteractiveColorKeys | 'onPrimary', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
-        icon: Record<InteractiveColorKeys | 'onPrimary', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
+        text: Record<InteractiveColorKeys | 'onPrimary' | 'onNeutral', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
+        icon: Record<InteractiveColorKeys | 'onPrimary' | 'onNeutral', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
     };
     feedback: {
         background: Record<FeedbackColors, SubtleOrIntenseEmphasis>;
@@ -663,9 +667,10 @@ type Colors = {
     surface: {
         background: {
             gray: Pick<Emphasis, 'subtle' | 'moderate' | 'intense'>;
-            primary: SubtleOrIntenseEmphasis;
+            primary: SurfacePrimaryEmphasis;
             sea: SubtleOrIntenseEmphasis;
             cloud: SubtleOrIntenseEmphasis;
+            accent: Pick<Emphasis, 'intense'>;
         };
         border: {
             gray: Pick<Emphasis, 'normal' | 'subtle' | 'muted'>;
@@ -708,6 +713,8 @@ type ThemeTokens = {
 
 declare const bladeTheme: ThemeTokens;
 
+declare const bladeNeutralTheme: ThemeTokens;
+
 type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends Record<number | string, unknown> ? DeepPartial<T[P]> : T[P];
 };
@@ -1097,4 +1104,4 @@ type ElevationWithColorModes = Record<ColorSchemeModes, Elevation>;
 
 declare const elevation: ElevationWithColorModes;
 
-export { BackdropBlur, Border, Breakpoints, Color, ColorSchemeNames, ColorSchemeNamesInput, Colors, ColorsWithModes, DelayString, DurationString, EasingFactoryFn, EasingString, Elevation, ElevationWithColorModes, FontFamily, FontSize, Motion, Opacity, Size, Spacing, ThemeTokens, Typography, TypographyPlatforms, TypographyWithPlatforms, backdropBlur, bladeTheme, border, breakpoints, colors, createTheme, elevation, motion, opacity, overrideTheme, size, spacing, typography };
+export { BackdropBlur, Border, Breakpoints, Color, ColorSchemeNames, ColorSchemeNamesInput, Colors, ColorsWithModes, DelayString, DurationString, EasingFactoryFn, EasingString, Elevation, ElevationWithColorModes, FontFamily, FontSize, Motion, Opacity, Size, Spacing, ThemeTokens, Typography, TypographyPlatforms, TypographyWithPlatforms, backdropBlur, bladeNeutralTheme, bladeTheme, border, breakpoints, colors, createTheme, elevation, motion, opacity, overrideTheme, size, spacing, typography };

package/build/types/utils/index.d.ts

@@ -553,6 +553,10 @@ type DataCategoricalEmphasis = Pick<Emphasis, 'subtle' | 'moderate' | 'intense'>
     faint: string;
     strong: string;
 };
+type SurfacePrimaryEmphasis = Pick<Emphasis, 'subtle' | 'moderate' | 'intense'> & {
+    faint: string;
+    strong: string;
+};
 type DataSequentialEmphasis = Omit<ColorChromaticScale, 'a50' | 'a150' | 'a100' | 'a200' | 'a400' | 'a500' | 'a600' | 'a700'>;
 type DataColorCategories = 'blue' | 'green' | 'red' | 'orange' | 'skyBlue' | 'purple' | 'pink' | 'gold' | 'gray';
 type SubtleOrIntenseEmphasis = Pick<Emphasis, 'subtle' | 'intense'>;
@@ -604,8 +608,8 @@ type Colors = {
     interactive: {
         background: Record<Exclude<InteractiveColorKeys, InteractiveBackgroundColorsWithGhost>, InteractiveStatesWithFadedHighlighted> & Record<InteractiveBackgroundColorsWithGhost, InteractiveBackgroundStatesWithGhost>;
         border: Record<Exclude<InteractiveColorKeys, InteractiveBorderColorsWithFadedHighlighted>, InteractiveStates> & Record<InteractiveBorderColorsWithFadedHighlighted, InteractiveStatesWithFadedHighlighted>;
-        text: Record<InteractiveColorKeys | 'onPrimary', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
-        icon: Record<InteractiveColorKeys | 'onPrimary', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
+        text: Record<InteractiveColorKeys | 'onPrimary' | 'onNeutral', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
+        icon: Record<InteractiveColorKeys | 'onPrimary' | 'onNeutral', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
     };
     feedback: {
         background: Record<FeedbackColors, SubtleOrIntenseEmphasis>;
@@ -616,9 +620,10 @@ type Colors = {
     surface: {
         background: {
             gray: Pick<Emphasis, 'subtle' | 'moderate' | 'intense'>;
-            primary: SubtleOrIntenseEmphasis;
+            primary: SurfacePrimaryEmphasis;
             sea: SubtleOrIntenseEmphasis;
             cloud: SubtleOrIntenseEmphasis;
+            accent: Pick<Emphasis, 'intense'>;
         };
         border: {
             gray: Pick<Emphasis, 'normal' | 'subtle' | 'muted'>;

package/build/types/utils/index.native.d.ts

@@ -553,6 +553,10 @@ type DataCategoricalEmphasis = Pick<Emphasis, 'subtle' | 'moderate' | 'intense'>
     faint: string;
     strong: string;
 };
+type SurfacePrimaryEmphasis = Pick<Emphasis, 'subtle' | 'moderate' | 'intense'> & {
+    faint: string;
+    strong: string;
+};
 type DataSequentialEmphasis = Omit<ColorChromaticScale, 'a50' | 'a150' | 'a100' | 'a200' | 'a400' | 'a500' | 'a600' | 'a700'>;
 type DataColorCategories = 'blue' | 'green' | 'red' | 'orange' | 'skyBlue' | 'purple' | 'pink' | 'gold' | 'gray';
 type SubtleOrIntenseEmphasis = Pick<Emphasis, 'subtle' | 'intense'>;
@@ -604,8 +608,8 @@ type Colors = {
     interactive: {
         background: Record<Exclude<InteractiveColorKeys, InteractiveBackgroundColorsWithGhost>, InteractiveStatesWithFadedHighlighted> & Record<InteractiveBackgroundColorsWithGhost, InteractiveBackgroundStatesWithGhost>;
         border: Record<Exclude<InteractiveColorKeys, InteractiveBorderColorsWithFadedHighlighted>, InteractiveStates> & Record<InteractiveBorderColorsWithFadedHighlighted, InteractiveStatesWithFadedHighlighted>;
-        text: Record<InteractiveColorKeys | 'onPrimary', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
-        icon: Record<InteractiveColorKeys | 'onPrimary', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
+        text: Record<InteractiveColorKeys | 'onPrimary' | 'onNeutral', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
+        icon: Record<InteractiveColorKeys | 'onPrimary' | 'onNeutral', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
     };
     feedback: {
         background: Record<FeedbackColors, SubtleOrIntenseEmphasis>;
@@ -616,9 +620,10 @@ type Colors = {
     surface: {
         background: {
             gray: Pick<Emphasis, 'subtle' | 'moderate' | 'intense'>;
-            primary: SubtleOrIntenseEmphasis;
+            primary: SurfacePrimaryEmphasis;
             sea: SubtleOrIntenseEmphasis;
             cloud: SubtleOrIntenseEmphasis;
+            accent: Pick<Emphasis, 'intense'>;
         };
         border: {
             gray: Pick<Emphasis, 'normal' | 'subtle' | 'muted'>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "12.111.0",
+  "version": "12.119.1",
   "license": "MIT",
   "engines": {
     "node": ">=20"
@@ -286,7 +286,7 @@
     "react-router-dom": "5.3.4",
     "react-scripts": "5.0.1",
     "react-test-renderer": "18.2.0",
-    "rollup": "3.29.5",
+    "rollup": "3.30.0",
     "rollup-plugin-dts": "5.3.1",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "size-limit": "11.2.0",