@razorpay/blade 10.23.4 → 11.0.0

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

@@ -3,12 +3,18 @@ import { ColorInput } from 'tinycolor2';
 type BorderRadius = Readonly<{
     /** none: 0(px/rem/pt) */
     none: 0;
+    /** xsmall: 1(px/rem/pt) */
+    xsmall: 1;
     /** small: 2(px/rem/pt) */
     small: 2;
     /** medium: 4(px/rem/pt) */
     medium: 4;
     /** large: 8(px/rem/pt) */
     large: 8;
+    /** xlarge: 12(px/rem/pt) */
+    xlarge: 12;
+    /** 2xlarge: 16(px/rem/pt) */
+    '2xlarge': 16;
     /** max: 9999(px/rem/pt). This will round the left and right side of the box element */
     max: 9999;
     /** round: 50%(pt). This will turn the box element into a circle */
@@ -114,13 +120,13 @@ type ColorChromaticScale = Readonly<{
     700: string;
     800: string;
     900: string;
-    950: string;
-    a00: string;
+    1000: string;
     a50: string;
     a100: string;
+    a150: string;
     a200: string;
 }>;
-type ColorNeutralScale = Readonly<{
+type ColorNeutralGrayScale = Readonly<{
     0: string;
     50: string;
     100: string;
@@ -136,14 +142,22 @@ type ColorNeutralScale = Readonly<{
     1100: string;
     1200: string;
     1300: string;
-    a00: string;
     a50: string;
+    a75: string;
     a100: string;
     a200: string;
-    a300: string;
     a400: string;
-    a500: string;
-    a1100: string;
+}>;
+type ColorNeutralStaticScale = Readonly<{
+    10: string;
+    25: string;
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    450: string;
+    500: string;
 }>;
 type Color = Readonly<{
     chromatic: {
@@ -151,17 +165,18 @@ type Color = Readonly<{
         emerald: ColorChromaticScale;
         crimson: ColorChromaticScale;
         cider: ColorChromaticScale;
-        orchid: ColorChromaticScale;
-        magenta: ColorChromaticScale;
         sapphire: ColorChromaticScale;
+        sea: ColorChromaticScale;
+        cloud: ColorChromaticScale;
+        forest: ColorChromaticScale;
     };
     neutral: {
-        blueGrayLight: ColorNeutralScale;
-        blueGrayDark: ColorNeutralScale;
-        navyGrayLight: ColorNeutralScale;
-        navyGrayDark: ColorNeutralScale;
-        ashGrayLight: ColorNeutralScale;
-        ashGrayDark: ColorNeutralScale;
+        blueGrayLight: ColorNeutralGrayScale;
+        blueGrayDark: ColorNeutralGrayScale;
+        ashGrayLight: ColorNeutralGrayScale;
+        ashGrayDark: ColorNeutralGrayScale;
+        white: ColorNeutralStaticScale;
+        black: ColorNeutralStaticScale;
     };
 }>;
 declare const colors: Color;
@@ -171,34 +186,44 @@ type Opacity = Readonly<{
     0: number;
     /**1: 0.09 */
     1: number;
-    /**2: 0.18 */
+    /**2: 0.12 */
     2: number;
-    /**3: 0.32 */
+    /**3: 0.18 */
     3: number;
-    /**4: 0.48 */
+    /**4: 0.24 */
     4: number;
-    /**5: 0.56 */
+    /**5: 0.32 */
     5: number;
-    /**6: 0.64 */
+    /**6: 0.48 */
     6: number;
-    /**7: 0.72 */
+    /**7: 0.56 */
     7: number;
-    /**8: 1.0 */
+    /**8: 0.64 */
     8: number;
-    /**9: 1.0 */
+    /**9: 0.72 */
     9: number;
+    /**10: 0.8 */
+    10: number;
+    /**11: 0.88 */
+    11: number;
+    /**12: 1.0 */
+    12: number;
 }>;
 declare const opacity: Opacity;
 
 type FontFamily = {
-    /** Used for all type of textual content except code snippets */
+    /** Used for all type of textual content except code snippets, and headings */
     text: string;
     /** Used for code snippets  */
     code: string;
+    /** Used for headings */
+    heading: string;
 };
 
 type FontWeight = {
     regular: 400;
+    medium: 500;
+    semibold: 600;
     bold: 700;
 };
 /**
@@ -208,11 +233,6 @@ type FontWeight = {
  * 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.
  */
 type FontSize = {
-    /** desktop: 9(px/rem/pt)
-     *
-     * mobile: 9(px/rem/pt)
-     */
-    10: number;
     /** desktop: 10(px/rem/pt)
      *
      * mobile: 10(px/rem/pt)
@@ -248,56 +268,41 @@ type FontSize = {
      * mobile: 18(px/rem/pt)
      */
     400: number;
-    /** desktop: 22(px/rem/pt)
+    /** desktop: 24(px/rem/pt)
      *
      * mobile: 20(px/rem/pt)
      */
     500: number;
-    /** desktop: 24(px/rem/pt)
+    /** desktop: 32(px/rem/pt)
      *
-     * mobile: 20(px/rem/pt)
+     * mobile: 24(px/rem/pt)
      */
     600: number;
-    /** desktop: 28(px/rem/pt)
+    /** desktop: 40(px/rem/pt)
      *
-     * mobile: 24(px/rem/pt)
+     * mobile: 32(px/rem/pt)
      */
     700: number;
-    /** desktop: 32(px/rem/pt)
+    /** desktop: 48(px/rem/pt)
      *
-     * mobile: 28(px/rem/pt)
+     * mobile: 34(px/rem/pt)
      */
     800: number;
-    /** desktop: 36(px/rem/pt)
+    /** desktop: 56(px/rem/pt)
      *
-     * mobile: 32(px/rem/pt)
+     * mobile: 36(px/rem/pt)
      */
     900: number;
-    /** desktop: 40(px/rem/pt)
+    /** desktop: 64(px/rem/pt)
      *
-     * mobile: 32(px/rem/pt)
+     * mobile: 38(px/rem/pt)
      */
     1000: number;
-    /** desktop: 48(px/rem/pt)
+    /** desktop: 72(px/rem/pt)
      *
      * mobile: 40(px/rem/pt)
      */
     1100: number;
-    /** desktop: 56(px/rem/pt)
-     *
-     * mobile: 48(px/rem/pt)
-     */
-    1200: number;
-    /** desktop: 64(px/rem/pt)
-     *
-     * mobile: 56(px/rem/pt)
-     */
-    1300: number;
-    /** desktop: 88(px/rem/pt)
-     *
-     * mobile: 64(px/rem/pt)
-     */
-    1600: number;
 };
 type Typography = {
     fonts: {
@@ -333,59 +338,60 @@ type Typography = {
         100: number;
         /** desktop: 24(px/rem/pt)
          *
-         * mobile: 20(px/rem/pt)
+         * mobile: 24(px/rem/pt)
          */
         200: number;
         /** desktop: 24(px/rem/pt)
          *
-         * mobile: 24(px/rem/pt)
+         * mobile: 22(px/rem/pt)
          */
         300: number;
-        /** desktop: 28(px/rem/pt)
+        /** desktop: 26(px/rem/pt)
          *
          * mobile: 24(px/rem/pt)
          */
         400: number;
         /** desktop: 32(px/rem/pt)
          *
-         * mobile: 28(px/rem/pt)
+         * mobile: 26(px/rem/pt)
          */
         500: number;
-        /** desktop: 40(px/rem/pt)
+        /** desktop: 38(px/rem/pt)
          *
          * mobile: 32(px/rem/pt)
          */
         600: number;
-        /** desktop: 40(px/rem/pt)
+        /** desktop: 46(px/rem/pt)
          *
-         * mobile: 40(px/rem/pt)
+         * mobile: 38(px/rem/pt)
          */
         700: number;
-        /** desktop: 48(px/rem/pt)
+        /** desktop: 56(px/rem/pt)
          *
          * mobile: 40(px/rem/pt)
          */
         800: number;
-        /** desktop: 56(px/rem/pt)
+        /** desktop: 64(px/rem/pt)
          *
-         * mobile: 48(px/rem/pt)
+         * mobile: 42(px/rem/pt)
          */
         900: number;
-        /** desktop: 64(px/rem/pt)
+        /** desktop: 70(px/rem/pt)
          *
-         * mobile: 56(px/rem/pt)
+         * mobile: 46(px/rem/pt)
          */
         1000: number;
-        /** desktop: 72(px/rem/pt)
+        /** desktop: 78(px/rem/pt)
          *
-         * mobile: 64(px/rem/pt)
+         * mobile: 48(px/rem/pt)
          */
         1100: number;
-        /** desktop: 104(px/rem/pt)
-         *
-         * mobile: 72(px/rem/pt)
-         */
-        1500: number;
+    };
+    letterSpacings: {
+        /** -1% */
+        50: number;
+        /** 0% */
+        100: number;
     };
 };
 type TypographyPlatforms = 'onDesktop' | 'onMobile';
@@ -428,127 +434,76 @@ declare const spacing: Spacing;
 type ColorSchemeNames = 'dark' | 'light';
 type ColorSchemeNamesInput = ColorSchemeNames | 'system';
 type ColorSchemeModes = 'onDark' | 'onLight';
-type TextTypes = 'muted' | 'normal' | 'placeholder' | 'subdued' | 'subtle';
-type ColorContrastTypes = 'low' | 'high';
-type Feedback = 'information' | 'negative' | 'neutral' | 'notice' | 'positive';
-type ColorContrast = {
-    [K in ColorContrastTypes as `${Extract<K, string>}Contrast`]: string;
+type FeedbackColors = 'information' | 'negative' | 'neutral' | 'notice' | 'positive';
+type Emphasis = {
+    subtle: string;
+    moderate: string;
+    intense: string;
+    normal: string;
+    muted: string;
+    disabled: string;
 };
-type ActionStates = {
+type SubtleOrIntenseEmphasis = Pick<Emphasis, 'subtle' | 'intense'>;
+type InteractiveStates = {
     default: string;
-    hover: string;
-    focus: string;
-    active: string;
+    highlighted: string;
     disabled: string;
+    faded: string;
 };
-type LinkActionStates = ActionStates & {
-    visited: string;
+type OnEmphasis = {
+    onSubtle: string;
+    onIntense: string;
 };
-type ActionStatesWithContrast = {
-    default: ColorContrast;
-    hover: ColorContrast;
-    focus: ColorContrast;
-    active: ColorContrast;
-    disabled: ColorContrast;
-};
-type ActionStatesWithLowContrast = {
-    default: Pick<ColorContrast, 'lowContrast'>;
-    hover: Pick<ColorContrast, 'lowContrast'>;
-    focus: Pick<ColorContrast, 'lowContrast'>;
-    active: Pick<ColorContrast, 'lowContrast'>;
-    disabled: Pick<ColorContrast, 'lowContrast'>;
-};
-type ActionVariants = {
-    primary: ActionStates;
-    secondary: ActionStates;
-    tertiary: ActionStates;
-    link: LinkActionStates;
-};
-type FeedbackActions = {
-    action: {
-        background: {
-            primary: ActionStatesWithContrast;
-            secondary: ActionStatesWithLowContrast;
-        };
-        border: {
-            primary: ActionStatesWithContrast;
-            secondary: ActionStatesWithLowContrast;
-        };
-        text: {
-            link: ActionStatesWithContrast;
-            primary: ActionStatesWithContrast;
-            secondary: ActionStatesWithLowContrast;
-        };
-        icon: {
-            link: ActionStatesWithContrast;
-            primary: ActionStatesWithContrast;
-            secondary: ActionStatesWithLowContrast;
-        };
-    };
-};
-type WhiteColors = {
-    background: Pick<ActionVariants, 'primary' | 'secondary' | 'tertiary'>;
-    border: Pick<ActionVariants, 'primary' | 'secondary' | 'tertiary'>;
-    text: Pick<ActionVariants, 'link' | 'primary' | 'secondary' | 'tertiary'>;
-    icon: Pick<ActionVariants, 'link' | 'primary' | 'secondary' | 'tertiary'>;
+type ColorCategories = {
+    staticBlack: Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>;
+    staticWhite: Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>;
+    gray: Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>;
+    onSea: Pick<OnEmphasis, 'onSubtle' | 'onIntense'>;
+    onCloud: Pick<OnEmphasis, 'onSubtle' | 'onIntense'>;
+    primary: Pick<Emphasis, 'normal'>;
 };
+type InteractiveColorKeys = FeedbackColors | Exclude<keyof ColorCategories, 'onSea' | 'onCloud'>;
 type Colors = {
-    brand: {
-        primary: Record<300 | 400 | 500 | 600 | 700 | 800, string>;
-        secondary: Record<500, string>;
-        gray: Record<200 | 300 | 400 | 500 | 600 | 700 | 'a50' | 'a100', ColorContrast>;
+    interactive: {
+        background: Record<InteractiveColorKeys, InteractiveStates & {
+            fadedHighlighted: string;
+        }>;
+        border: Record<InteractiveColorKeys, InteractiveStates>;
+        text: Record<InteractiveColorKeys | 'onPrimary', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
+        icon: Record<InteractiveColorKeys | 'onPrimary', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
     };
     feedback: {
-        background: Record<Feedback, ColorContrast>;
-        border: Record<Feedback, ColorContrast>;
-        text: Record<Feedback, ColorContrast>;
-        icon: Record<Feedback, ColorContrast>;
-        positive: FeedbackActions;
-        negative: FeedbackActions;
-        information: FeedbackActions;
-        notice: FeedbackActions;
-        neutral: FeedbackActions;
+        background: Record<FeedbackColors, SubtleOrIntenseEmphasis>;
+        border: Record<FeedbackColors, SubtleOrIntenseEmphasis>;
+        text: Record<FeedbackColors, SubtleOrIntenseEmphasis>;
+        icon: Record<FeedbackColors, SubtleOrIntenseEmphasis>;
     };
     surface: {
-        background: Record<'level1' | 'level2' | 'level3', ColorContrast>;
-        border: Record<'normal' | 'subtle', ColorContrast>;
-        text: Record<TextTypes, ColorContrast>;
-        action: {
-            icon: ActionStatesWithContrast;
-        };
-        overlay: Record<'background', Record<400 | 800, string>>;
-        popup: Record<'background', string>;
-    };
-    action: {
-        background: Omit<ActionVariants, 'link'>;
-        border: Omit<ActionVariants, 'link'>;
-        text: ActionVariants;
-        icon: ActionVariants;
-    };
-    badge: {
         background: {
-            blue: ColorContrast;
+            gray: Pick<Emphasis, 'subtle' | 'moderate' | 'intense'>;
+            primary: SubtleOrIntenseEmphasis;
+            sea: SubtleOrIntenseEmphasis;
+            cloud: SubtleOrIntenseEmphasis;
         };
         border: {
-            blue: ColorContrast;
-        };
-        text: {
-            blue: ColorContrast;
-        };
-        icon: {
-            blue: ColorContrast;
+            gray: Pick<Emphasis, 'normal' | 'subtle' | 'muted'>;
+            primary: Pick<Emphasis, 'normal' | 'muted'>;
         };
+        text: ColorCategories;
+        icon: ColorCategories;
     };
-    static: {
-        white: string;
+    overlay: {
+        background: Pick<Emphasis, 'moderate' | 'subtle'>;
     };
-    white: {
-        action: WhiteColors;
+    popup: {
+        background: SubtleOrIntenseEmphasis;
+        border: SubtleOrIntenseEmphasis;
     };
+    transparent: string;
 };
 type ColorsWithModes = Record<ColorSchemeModes, Colors>;
 type ThemeTokens = {
-    name: 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete;
+    name: 'bladeTheme' | StringWithAutocomplete;
     border: Border;
     breakpoints: Breakpoints;
     colors: ColorsWithModes;
@@ -558,9 +513,7 @@ type ThemeTokens = {
     typography: TypographyWithPlatforms;
 };
 
-declare const paymentTheme: ThemeTokens;
-
-declare const bankingTheme: ThemeTokens;
+declare const bladeTheme: ThemeTokens;
 
 type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends Record<number | string, unknown> ? DeepPartial<T[P]> : T[P];
@@ -587,7 +540,7 @@ type OverrideTheme = {
  * @example
  * ```tsx
  * const customTheme = overrideTheme({
- *   baseThemeTokens: paymentTheme, // theme to override
+ *   baseThemeTokens: bladeTheme, // theme to override
  *   overrides: {
  *     colors: {
  *       onLight: {
@@ -657,10 +610,10 @@ type DotNotationMotionStringToken<TokenType> = {
  * ### Usage
  *
  * ```ts
- * type ThemeName = 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete;
+ * type ThemeName = 'themeOne' | 'themeTwo' | StringWithAutocomplete;
  * ```
  *
- * This will show paymentTheme and bankingTheme in autocomplete but also allow any other string as value.
+ * This will show themeOne and themeTwo in autocomplete but also allow any other string as value.
  *
  * More details - https://github.com/razorpay/blade/pull/1031/commits/86b6ee0facf45e7556739efcbfa5396b11b1b3c9#r1121298293
  * Related TS Issue - https://github.com/microsoft/TypeScript/issues/29729
@@ -870,4 +823,4 @@ type ElevationWithColorModes = Record<ColorSchemeModes, Elevation>;
 
 declare const elevation: ElevationWithColorModes;
 
-export { Border, Breakpoints, Color, ColorSchemeNames, ColorSchemeNamesInput, ColorsWithModes, DelayString, DurationString, EasingFactoryFn, EasingString, Elevation, ElevationWithColorModes, FontFamily, FontSize, Motion, Opacity, Size, Spacing, ThemeTokens, Typography, TypographyPlatforms, TypographyWithPlatforms, bankingTheme, border, breakpoints, colors, createTheme, elevation, motion, opacity, overrideTheme, paymentTheme, size, spacing, typography };
+export { Border, Breakpoints, Color, ColorSchemeNames, ColorSchemeNamesInput, ColorsWithModes, DelayString, DurationString, EasingFactoryFn, EasingString, Elevation, ElevationWithColorModes, FontFamily, FontSize, Motion, Opacity, Size, Spacing, ThemeTokens, Typography, TypographyPlatforms, TypographyWithPlatforms, bladeTheme, border, breakpoints, colors, createTheme, elevation, motion, opacity, overrideTheme, size, spacing, typography };