@razorpay/blade 8.1.0 → 8.2.3

package/build/components/index.d.ts

@@ -268,9 +268,9 @@ type Typography = {
   // letterSpacings: {};
 };
 
-type TypographyPlatforms$1 = 'onDesktop' | 'onMobile';
+type TypographyPlatforms = 'onDesktop' | 'onMobile';
 
-type TypographyWithPlatforms = Record<TypographyPlatforms$1, Typography>;
+type TypographyWithPlatforms = Record<TypographyPlatforms, Typography>;
 
 /**
  * When any of the values are changed here, do change the jsdoc comments in BaseBox/types/spacingTypes.ts as well
@@ -310,39 +310,19 @@ type ColorSchemeNamesInput = ColorSchemeNames | 'system';
 
 type ColorSchemeModes = 'onDark' | 'onLight';
 
-type ShadowLevels = 1 | 2 | 3 | 4 | 5;
-
 type TextTypes = 'muted' | 'normal' | 'placeholder' | 'subdued' | 'subtle';
 
 type ColorContrastTypes = 'low' | 'high';
 
-type Shadows = {
-  offsetX: {
-    level: Record<ShadowLevels, number>;
-  };
-  offsetY: {
-    level: Record<ShadowLevels, number>;
-  };
-  blurRadius: {
-    level: Record<ShadowLevels, number>;
-  };
-  color: Record<
-    ColorSchemeModes,
-    {
-      level: Record<ShadowLevels, string>;
-    }
-  >;
-  androidElevation: {
-    level: Record<ShadowLevels, number>;
-  };
-};
-
 type Feedback = 'information' | 'negative' | 'neutral' | 'notice' | 'positive';
 
 type ColorContrast = {
   [K in ColorContrastTypes as `${Extract<K, string>}Contrast`]: string;
 };
 
+// @TODO: this shall rather be Surface = 'level1' | 'level2' | 'level3' to keep in sync with color tokens
+type SurfaceLevels = 1 | 2 | 3;
+
 type ActionStates = {
   default: string;
   hover: string;
@@ -457,8 +437,8 @@ type ThemeTokens = {
   breakpoints: Breakpoints;
   colors: ColorsWithModes;
   motion: Motion;
+  elevation: ElevationWithColorModes;
   spacing: Spacing;
-  shadows: Shadows;
   typography: TypographyWithPlatforms;
 };
 
@@ -904,6 +884,35 @@ type Motion = Readonly<{
   easing: Easing;
 }>;
 
+type ElevationLevels = 'none' | 'lowRaised' | 'midRaised' | 'highRaised';
+
+type ElevationStyles = Readonly<{
+  elevation: number;
+  shadowColor: string;
+  shadowOpacity: number;
+  shadowRadius: number;
+  shadowOffset: {
+    /**
+     * x-axis
+     */
+    width: number;
+    /**
+     * y-axis
+     */
+    height: number;
+  };
+}>;
+
+type Elevation = Record<
+  ElevationLevels,
+  Platform.Select<{
+    web: string;
+    native: ElevationStyles;
+  }>
+>;
+
+type ElevationWithColorModes = Record<ColorSchemeModes, Elevation>;
+
 /**
  * @template TokenType token type generic
  * @description Tokenises objects to dot notation strings, eg: `surface.text.normal.lowContrast`
@@ -1002,7 +1011,7 @@ declare type ActionListProps = {
     /**
      * Decides the backgroundColor of ActionList
      */
-    surfaceLevel?: 2 | 3;
+    surfaceLevel?: Exclude<SurfaceLevels, 1>;
 } & TestID;
 declare const ActionList: React__default.MemoExoticComponent<({ children, surfaceLevel, testID }: ActionListProps) => JSX.Element>;
 
@@ -1013,11 +1022,7 @@ type Theme$1 = {
   colors: Colors;
   spacing: Spacing;
   motion: Motion;
-  shadows: Omit<Shadows, 'color'> & {
-    color: {
-      level: Record<ShadowLevels, string>;
-    };
-  };
+  elevation: Elevation;
   typography: Typography;
 };
 
@@ -1663,8 +1668,6 @@ declare type UseColorScheme = {
     setColorScheme: (colorScheme: ColorSchemeNamesInput) => void;
 };
 
-declare type TypographyPlatforms = 'onDesktop' | 'onMobile';
-
 declare type ThemeContext = UseColorScheme & {
     theme: Theme;
     platform: TypographyPlatforms;
@@ -1679,11 +1682,7 @@ declare type Theme = {
     colors: Colors;
     spacing: Spacing;
     motion: Motion;
-    shadows: Omit<Shadows, 'color'> & {
-        color: {
-            level: Record<ShadowLevels, string>;
-        };
-    };
+    elevation: Elevation;
     typography: Typography;
 };
 
@@ -2301,6 +2300,8 @@ declare type CardProps = {
      *
      * eg: `theme.colors.surface.background.level1`
      *
+     * @default `2`
+     *
      * **Description:**
      *
      * - 2: Used in layouts which are on top of the main background
@@ -2310,9 +2311,28 @@ declare type CardProps = {
      * - Docs: https://blade.razorpay.com/?path=/docs/tokens-colors--page#-theme-tokens
      * - Figma: https://shorturl.at/fsvwK
      */
-    surfaceLevel?: 2 | 3;
+    surfaceLevel?: Exclude<SurfaceLevels, 1>;
+    /**
+     * Sets the elevation for Cards
+     *
+     * eg: `theme.elevation.midRaised`
+     *
+     * @default `theme.elevation.lowRaised`
+     *
+     * **Links:**
+     * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--page
+     */
+    elevation?: keyof Elevation;
+    /**
+     * Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately
+     * @default `spacing.7`
+     *
+     * **Links:**
+     * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--page
+     */
+    padding?: Extract<SpacingValueType$1, 'spacing.0' | 'spacing.3' | 'spacing.5' | 'spacing.7'>;
 } & TestID & StyledPropsBlade;
-declare const Card: ({ children, surfaceLevel, testID, ...styledProps }: CardProps) => React__default.ReactElement;
+declare const Card: ({ children, surfaceLevel, elevation, testID, padding, ...styledProps }: CardProps) => React__default.ReactElement;
 declare type CardBodyProps = {
     children: React__default.ReactNode;
 } & TestID;

package/build/components/index.native.d.ts

@@ -268,9 +268,9 @@ type Typography = {
   // letterSpacings: {};
 };
 
-type TypographyPlatforms$1 = 'onDesktop' | 'onMobile';
+type TypographyPlatforms = 'onDesktop' | 'onMobile';
 
-type TypographyWithPlatforms = Record<TypographyPlatforms$1, Typography>;
+type TypographyWithPlatforms = Record<TypographyPlatforms, Typography>;
 
 /**
  * When any of the values are changed here, do change the jsdoc comments in BaseBox/types/spacingTypes.ts as well
@@ -310,39 +310,19 @@ type ColorSchemeNamesInput = ColorSchemeNames | 'system';
 
 type ColorSchemeModes = 'onDark' | 'onLight';
 
-type ShadowLevels = 1 | 2 | 3 | 4 | 5;
-
 type TextTypes = 'muted' | 'normal' | 'placeholder' | 'subdued' | 'subtle';
 
 type ColorContrastTypes = 'low' | 'high';
 
-type Shadows = {
-  offsetX: {
-    level: Record<ShadowLevels, number>;
-  };
-  offsetY: {
-    level: Record<ShadowLevels, number>;
-  };
-  blurRadius: {
-    level: Record<ShadowLevels, number>;
-  };
-  color: Record<
-    ColorSchemeModes,
-    {
-      level: Record<ShadowLevels, string>;
-    }
-  >;
-  androidElevation: {
-    level: Record<ShadowLevels, number>;
-  };
-};
-
 type Feedback = 'information' | 'negative' | 'neutral' | 'notice' | 'positive';
 
 type ColorContrast = {
   [K in ColorContrastTypes as `${Extract<K, string>}Contrast`]: string;
 };
 
+// @TODO: this shall rather be Surface = 'level1' | 'level2' | 'level3' to keep in sync with color tokens
+type SurfaceLevels = 1 | 2 | 3;
+
 type ActionStates = {
   default: string;
   hover: string;
@@ -457,8 +437,8 @@ type ThemeTokens = {
   breakpoints: Breakpoints;
   colors: ColorsWithModes;
   motion: Motion;
+  elevation: ElevationWithColorModes;
   spacing: Spacing;
-  shadows: Shadows;
   typography: TypographyWithPlatforms;
 };
 
@@ -904,6 +884,35 @@ type Motion = Readonly<{
   easing: Easing;
 }>;
 
+type ElevationLevels = 'none' | 'lowRaised' | 'midRaised' | 'highRaised';
+
+type ElevationStyles = Readonly<{
+  elevation: number;
+  shadowColor: string;
+  shadowOpacity: number;
+  shadowRadius: number;
+  shadowOffset: {
+    /**
+     * x-axis
+     */
+    width: number;
+    /**
+     * y-axis
+     */
+    height: number;
+  };
+}>;
+
+type Elevation = Record<
+  ElevationLevels,
+  Platform.Select<{
+    web: string;
+    native: ElevationStyles;
+  }>
+>;
+
+type ElevationWithColorModes = Record<ColorSchemeModes, Elevation>;
+
 /**
  * @template TokenType token type generic
  * @description Tokenises objects to dot notation strings, eg: `surface.text.normal.lowContrast`
@@ -1002,7 +1011,7 @@ declare type ActionListProps = {
     /**
      * Decides the backgroundColor of ActionList
      */
-    surfaceLevel?: 2 | 3;
+    surfaceLevel?: Exclude<SurfaceLevels, 1>;
 } & TestID;
 declare const ActionList: React__default.MemoExoticComponent<({ children, surfaceLevel, testID }: ActionListProps) => JSX.Element>;
 
@@ -1013,11 +1022,7 @@ type Theme$1 = {
   colors: Colors;
   spacing: Spacing;
   motion: Motion;
-  shadows: Omit<Shadows, 'color'> & {
-    color: {
-      level: Record<ShadowLevels, string>;
-    };
-  };
+  elevation: Elevation;
   typography: Typography;
 };
 
@@ -1665,8 +1670,6 @@ declare type UseColorScheme = {
     setColorScheme: (colorScheme: ColorSchemeNamesInput) => void;
 };
 
-declare type TypographyPlatforms = 'onDesktop' | 'onMobile';
-
 declare type ThemeContext = UseColorScheme & {
     theme: Theme;
     platform: TypographyPlatforms;
@@ -1681,11 +1684,7 @@ declare type Theme = {
     colors: Colors;
     spacing: Spacing;
     motion: Motion;
-    shadows: Omit<Shadows, 'color'> & {
-        color: {
-            level: Record<ShadowLevels, string>;
-        };
-    };
+    elevation: Elevation;
     typography: Typography;
 };
 
@@ -2303,6 +2302,8 @@ declare type CardProps = {
      *
      * eg: `theme.colors.surface.background.level1`
      *
+     * @default `2`
+     *
      * **Description:**
      *
      * - 2: Used in layouts which are on top of the main background
@@ -2312,9 +2313,28 @@ declare type CardProps = {
      * - Docs: https://blade.razorpay.com/?path=/docs/tokens-colors--page#-theme-tokens
      * - Figma: https://shorturl.at/fsvwK
      */
-    surfaceLevel?: 2 | 3;
+    surfaceLevel?: Exclude<SurfaceLevels, 1>;
+    /**
+     * Sets the elevation for Cards
+     *
+     * eg: `theme.elevation.midRaised`
+     *
+     * @default `theme.elevation.lowRaised`
+     *
+     * **Links:**
+     * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--page
+     */
+    elevation?: keyof Elevation;
+    /**
+     * Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately
+     * @default `spacing.7`
+     *
+     * **Links:**
+     * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--page
+     */
+    padding?: Extract<SpacingValueType$1, 'spacing.0' | 'spacing.3' | 'spacing.5' | 'spacing.7'>;
 } & TestID & StyledPropsBlade;
-declare const Card: ({ children, surfaceLevel, testID, ...styledProps }: CardProps) => React__default.ReactElement;
+declare const Card: ({ children, surfaceLevel, elevation, testID, padding, ...styledProps }: CardProps) => React__default.ReactElement;
 declare type CardBodyProps = {
     children: React__default.ReactNode;
 } & TestID;