@razorpay/blade 6.5.2 → 6.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,9 +1,10 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 17 Mar 2023 11:31:53 GMT
3
+ * Generated on Tue, 21 Mar 2023 05:34:23 GMT
4
4
  */
5
5
 
6
6
  :root {
7
+ --name: bankingTheme;
7
8
  --border-radius-none: 0px;
8
9
  --border-radius-small: 2px;
9
10
  --border-radius-medium: 4px;
@@ -1,9 +1,10 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 17 Mar 2023 11:31:53 GMT
3
+ * Generated on Tue, 21 Mar 2023 05:34:23 GMT
4
4
  */
5
5
 
6
6
  :root {
7
+ --name: bankingTheme;
7
8
  --border-radius-none: 0px;
8
9
  --border-radius-small: 2px;
9
10
  --border-radius-medium: 4px;
@@ -1,9 +1,10 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 17 Mar 2023 11:31:52 GMT
3
+ * Generated on Tue, 21 Mar 2023 05:34:23 GMT
4
4
  */
5
5
 
6
6
  :root {
7
+ --name: bankingTheme;
7
8
  --border-radius-none: 0px;
8
9
  --border-radius-small: 2px;
9
10
  --border-radius-medium: 4px;
@@ -1,9 +1,10 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 17 Mar 2023 11:31:53 GMT
3
+ * Generated on Tue, 21 Mar 2023 05:34:23 GMT
4
4
  */
5
5
 
6
6
  :root {
7
+ --name: bankingTheme;
7
8
  --border-radius-none: 0px;
8
9
  --border-radius-small: 2px;
9
10
  --border-radius-medium: 4px;
@@ -1,9 +1,10 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 17 Mar 2023 11:31:52 GMT
3
+ * Generated on Tue, 21 Mar 2023 05:34:23 GMT
4
4
  */
5
5
 
6
6
  :root {
7
+ --name: paymentTheme;
7
8
  --border-radius-none: 0px;
8
9
  --border-radius-small: 2px;
9
10
  --border-radius-medium: 4px;
@@ -1,9 +1,10 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 17 Mar 2023 11:31:52 GMT
3
+ * Generated on Tue, 21 Mar 2023 05:34:23 GMT
4
4
  */
5
5
 
6
6
  :root {
7
+ --name: paymentTheme;
7
8
  --border-radius-none: 0px;
8
9
  --border-radius-small: 2px;
9
10
  --border-radius-medium: 4px;
@@ -1,9 +1,10 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 17 Mar 2023 11:31:52 GMT
3
+ * Generated on Tue, 21 Mar 2023 05:34:23 GMT
4
4
  */
5
5
 
6
6
  :root {
7
+ --name: paymentTheme;
7
8
  --border-radius-none: 0px;
8
9
  --border-radius-small: 2px;
9
10
  --border-radius-medium: 4px;
@@ -1,9 +1,10 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 17 Mar 2023 11:31:52 GMT
3
+ * Generated on Tue, 21 Mar 2023 05:34:23 GMT
4
4
  */
5
5
 
6
6
  :root {
7
+ --name: paymentTheme;
7
8
  --border-radius-none: 0px;
8
9
  --border-radius-small: 2px;
9
10
  --border-radius-medium: 4px;
@@ -779,6 +779,24 @@ type Motion$1 = Readonly<{
779
779
  easing: Easing$1;
780
780
  }>;
781
781
 
782
+ /**
783
+ *
784
+ * When combined with union, this type utility will give you autocomplete of union while still supporting any string value as input
785
+ *
786
+ * ### Usage
787
+ *
788
+ * ```ts
789
+ * type ThemeName = 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete;
790
+ * ```
791
+ *
792
+ * This will show paymentTheme and bankingTheme in autocomplete but also allow any other string as value.
793
+ *
794
+ * More details - https://github.com/razorpay/blade/pull/1031/commits/86b6ee0facf45e7556739efcbfa5396b11b1b3c9#r1121298293
795
+ * Related TS Issue - https://github.com/microsoft/TypeScript/issues/29729
796
+ *
797
+ */
798
+ type StringWithAutocomplete = string & Record<never, never>;
799
+
782
800
  declare type Duration = {
783
801
  /** `70` milliseconds */
784
802
  '2xquick': 70;
@@ -1073,6 +1091,7 @@ type Colors = {
1073
1091
  type ColorsWithModes = Record<ColorSchemeModes, Colors>;
1074
1092
 
1075
1093
  type ThemeTokens = {
1094
+ name: 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete; // Can be used to watch over state changes between theme without watching over entire theme object
1076
1095
  border: Border;
1077
1096
  breakpoints: Breakpoints;
1078
1097
  colors: ColorsWithModes;
@@ -779,6 +779,24 @@ type Motion$1 = Readonly<{
779
779
  easing: Easing$1;
780
780
  }>;
781
781
 
782
+ /**
783
+ *
784
+ * When combined with union, this type utility will give you autocomplete of union while still supporting any string value as input
785
+ *
786
+ * ### Usage
787
+ *
788
+ * ```ts
789
+ * type ThemeName = 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete;
790
+ * ```
791
+ *
792
+ * This will show paymentTheme and bankingTheme in autocomplete but also allow any other string as value.
793
+ *
794
+ * More details - https://github.com/razorpay/blade/pull/1031/commits/86b6ee0facf45e7556739efcbfa5396b11b1b3c9#r1121298293
795
+ * Related TS Issue - https://github.com/microsoft/TypeScript/issues/29729
796
+ *
797
+ */
798
+ type StringWithAutocomplete = string & Record<never, never>;
799
+
782
800
  declare type Duration = {
783
801
  /** `70` milliseconds */
784
802
  '2xquick': 70;
@@ -1073,6 +1091,7 @@ type Colors = {
1073
1091
  type ColorsWithModes = Record<ColorSchemeModes, Colors>;
1074
1092
 
1075
1093
  type ThemeTokens = {
1094
+ name: 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete; // Can be used to watch over state changes between theme without watching over entire theme object
1076
1095
  border: Border;
1077
1096
  breakpoints: Breakpoints;
1078
1097
  colors: ColorsWithModes;