fix(blade): add description in token types (#330)

razorpay · Aug 3, 2021 · 7a09800 · 7a09800 · vercel · Aug 3, 2021
1 parent 29111e8
commit 7a09800
Show file tree

Hide file tree

Showing 7 changed files with 3,742 additions and 285 deletions.
diff --git a/.changeset/purple-lemons-collect.md b/.changeset/purple-lemons-collect.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+fix(blade): add description in token types
diff --git a/packages/blade/src/tokens/global/border.ts b/packages/blade/src/tokens/global/border.ts
@@ -1,14 +1,22 @@
 type BorderRadius = Readonly<{
+  /** none: 0(px/rem/pt) */
   none: number;
+  /** small: 2(px/rem/pt) */
   small: number;
+  /** medium: 4(px/rem/pt) */
   medium: number;
+  /** large: 8(px/rem/pt) */
   large: number;
+  /** max: 9999(px/rem/pt). This will round the left and right side of the box element */
   max: number;
+  /** round: 9999(px/rem/pt). This will turn the box element into a circle */
   round: string;
 }>;
 
 type BorderWidth = Readonly<{
+  /** none: 0(px/rem/pt) */
   none: number;
+  /** thin: 1(px/rem/pt) */
   thin: number;
 }>;
 

diff --git a/packages/blade/src/tokens/global/fontFamily.d.ts b/packages/blade/src/tokens/global/fontFamily.d.ts
@@ -1,5 +1,7 @@
 export type FontFamily = {
+  /** Used for all type of textual content except code snippets */
   text: string;
+  /** Used for code snippets  */
   code: string;
 };
 

diff --git a/packages/blade/src/tokens/global/opacity.ts b/packages/blade/src/tokens/global/opacity.ts
@@ -1,18 +1,28 @@
 export type Opacity = Readonly<{
+  /**0: 0 */
   0: number;
+  /**1: 0.09 */
   1: number;
+  /**2: 0.18 */
   2: number;
+  /**3: 0.32 */
   3: number;
+  /**4: 1.0 */
   4: number;
+  /**5: 1.0 */
   5: number;
+  /**6: 1.0 */
   6: number;
+  /**7: 1.0 */
   7: number;
+  /**8: 1.0 */
   8: number;
+  /**9: 1.0 */
   9: number;
 }>;
 
 const opacities: Opacity = {
-  0: 0.0,
+  0: 0,
   1: 0.09,
   2: 0.18,
   3: 0.32,

diff --git a/packages/blade/src/tokens/global/spacing.ts b/packages/blade/src/tokens/global/spacing.ts
@@ -1,14 +1,25 @@
 export type Spacing = Readonly<{
+  /** 0: 0(px/rem/pt) */
   0: number;
+  /** 1: 4(px/rem/pt) */
   1: number;
+  /** 2: 8(px/rem/pt) */
   2: number;
+  /** 3: 12(px/rem/pt) */
   3: number;
+  /** 4: 16(px/rem/pt) */
   4: number;
+  /** 5: 20(px/rem/pt) */
   5: number;
+  /** 6: 24(px/rem/pt) */
   6: number;
+  /** 7: 32(px/rem/pt) */
   7: number;
+  /** 8: 40(px/rem/pt) */
   8: number;
+  /** 9: 48(px/rem/pt) */
   9: number;
+  /** 10: 56(px/rem/pt) */
   10: number;
 }>;
 

diff --git a/packages/blade/src/tokens/global/typography.ts b/packages/blade/src/tokens/global/typography.ts
@@ -7,19 +7,75 @@ type FontWeight = {
 };
 
 type FontSize = {
+  /** desktop: 9(px/rem/pt)
+   *
+   * mobile: 10(px/rem/pt)
+   */
   10: number;
+  /** desktop: 10(px/rem/pt)
+   *
+   * mobile: 11(px/rem/pt)
+   */
   25: number;
+  /** desktop: 11(px/rem/pt)
+   *
+   * mobile: 12(px/rem/pt)
+   */
   50: number;
+  /** desktop: 12(px/rem/pt)
+   *
+   * mobile: 14(px/rem/pt)
+   */
   75: number;
+  /** desktop: 13(px/rem/pt)
+   *
+   * mobile: 15(px/rem/pt)
+   */
   100: number;
+  /** desktop: 16(px/rem/pt)
+   *
+   * mobile: 17(px/rem/pt)
+   */
   200: number;
+  /** desktop: 18(px/rem/pt)
+   *
+   * mobile: 18(px/rem/pt)
+   */
   300: number;
+  /** desktop: 20(px/rem/pt)
+   *
+   * mobile: 20(px/rem/pt)
+   */
   400: number;
+  /** desktop: 22(px/rem/pt)
+   *
+   * mobile: 22(px/rem/pt)
+   */
   500: number;
+  /** desktop: 25(px/rem/pt)
+   *
+   * mobile: 24(px/rem/pt)
+   */
   600: number;
+  /** desktop: 28(px/rem/pt)
+   *
+   * mobile: 27(px/rem/pt)
+   */
   700: number;
+  /** desktop: 32(px/rem/pt)
+   *
+   * mobile: 29(px/rem/pt)
+   */
   800: number;
+  /** desktop: 36(px/rem/pt)
+   *
+   * mobile: 32(px/rem/pt)
+   */
   900: number;
+  /** desktop: 40(px/rem/pt)
+   *
+   * mobile: 35(px/rem/pt)
+   */
   1000: number;
 };
 
@@ -40,26 +96,26 @@ export type Typography = Record<
 >;
 
 const typography: Typography = {
-  mobile: {
+  desktop: {
     fonts: {
       family: {
         ...fontFamily,
       },
       size: {
-        10: 10,
-        25: 11,
-        50: 12,
-        75: 14,
-        100: 15,
-        200: 17,
+        10: 9,
+        25: 10,
+        50: 11,
+        75: 12,
+        100: 13,
+        200: 16,
         300: 18,
         400: 20,
         500: 22,
-        600: 24,
-        700: 27,
-        800: 29,
-        900: 32,
-        1000: 35,
+        600: 25,
+        700: 28,
+        800: 32,
+        900: 36,
+        1000: 40,
       },
       weight: {
         ...fontWeight,
@@ -68,26 +124,26 @@ const typography: Typography = {
     // lineHeights: {},
     // letterSpacings: {},
   },
-  desktop: {
+  mobile: {
     fonts: {
       family: {
         ...fontFamily,
       },
       size: {
-        10: 9,
-        25: 10,
-        50: 11,
-        75: 12,
-        100: 13,
-        200: 16,
+        10: 10,
+        25: 11,
+        50: 12,
+        75: 14,
+        100: 15,
+        200: 17,
         300: 18,
         400: 20,
         500: 22,
-        600: 25,
-        700: 28,
-        800: 32,
-        900: 36,
-        1000: 40,
+        600: 24,
+        700: 27,
+        800: 29,
+        900: 32,
+        1000: 35,
       },
       weight: {
         ...fontWeight,