fix: #249 using correct size variables matching DS figma (#250)

ksolanki7 · web-flow · commit 76eb8dc6a516 · 2024-12-11T15:00:29.000+11:00
* fix: #249 using correct size variables matching DS figma * Updated usage of size variable across the repo with correct values reflecting DS figma
diff --git a/src/components/avatar-rectangle/styles.ts b/src/components/avatar-rectangle/styles.ts
@@ -7,23 +7,23 @@ import CommercialBottomImage from './icons/bottom-commercial-image.svg?react'
 import CommercialSmallBottomImage from './icons/bottom-commercial-image-small.svg?react'
 
 const baseAvatarRectMediumSize = `
-  width: var(--size-size-12, 72px);
+  width: var(--size-18);
   height: 54px;
 `
 
 const baseAvatarRectSmallSize = `
-  width: var(--size-size-11, 64px);
-  height: var(--size-size-9, 48px);
+  width: var(--size-16);
+  height: var(--size-12);
 `
 
 // The commercial consists of two sections: the commercial image and the bottom placeholder.
 const baseCommercialMediumImagesSize = `
   width: 54px;
-  height: var(--size-size-8, 40px);
+  height: var(--size-10);
 `
 
 const baseCommercialBottomSmallPlaceholderSize = `
-  width: var(--size-size-9, 48px);
+  width: var(--size-12);
   height: 36px;
 `
 
diff --git a/src/components/avatar/styles.ts b/src/components/avatar/styles.ts
@@ -5,8 +5,8 @@ const baseCircleStyle = `
 `
 
 const baseMediumSizeStyle = `
-  width: var(--size-8, 40px);
-  height: var(--size-8, 40px);
+  width: var(--size-10);
+  height: var(--size-10);
   font-size: var(--font-size-base, 15px);
   line-height: var(--line-height-base, 24px);
   letter-spacing: var(--letter-spacing-base, -0.15px);
@@ -50,8 +50,8 @@ export const ElAvatar = styled.span`
   }
 
   &[data-size='small'] {
-    width: var(--size-7, 32px);
-    height: var(--size-7, 32px);
+    width: var(--size-8);
+    height: var(--size-8);
     font-size: var(--font-size-2xs, 12px);
     line-height: var(--line-height-2xs, 16px);
     letter-spacing: var(--letter-spacing-2xs, -0.12px);
diff --git a/src/components/bottom-bar-item/styles.ts b/src/components/bottom-bar-item/styles.ts
@@ -48,8 +48,8 @@ export const ElBottomBarItemBadge = styled.span`
   position: absolute;
   top: -3px;
   right: -3px;
-  width: var(--size-2, 8px);
-  height: var(--size-2, 8px);
+  width: var(--size-2);
+  height: var(--size-2);
   background-color: var(--icon-error, #f01830);
   border-radius: 100%;
 `
diff --git a/src/components/mobile-nav-item/styles.ts b/src/components/mobile-nav-item/styles.ts
@@ -55,8 +55,8 @@ export const ElMobileNavItemContent = styled.span`
 
 export const ElMobileNavItemBadge = styled.span`
   display: block;
-  width: var(--size-2, 8px);
-  height: var(--size-2, 8px);
+  width: var(--size-2);
+  height: var(--size-2);
   background-color: var(--icon-error, #f01830);
   border-radius: 100%;
 `
diff --git a/src/components/nav-icon-item/styles.ts b/src/components/nav-icon-item/styles.ts
@@ -41,8 +41,8 @@ export const ElNavIconItemBadge = styled.span`
   position: absolute;
   right: 5px;
   top: 5px;
-  width: var(--size-2, 8px);
-  height: var(--size-2, 8px);
+  width: var(--size-2);
+  height: var(--size-2);
   background-color: var(--icon-error, #f01830);
   border-radius: 100%;
 `
diff --git a/src/components/top-bar/styles.ts b/src/components/top-bar/styles.ts
@@ -29,7 +29,7 @@ export const ElTopBarSecondaryNav = styled(ElButtonGroup)`
 export const ElTopBar = styled.div`
   display: flex;
   align-items: center;
-  height: var(--size-10, 56px);
+  height: var(--size-14);
   padding: var(--spacing-2, 8px) var(--spacing-5, 20px);
   border-bottom: var(--border-default, 1px) solid var(--outline-default, #e5e9ed);
   background: var(--fill-white, #fff);
diff --git a/src/tokens/build.mjs b/src/tokens/build.mjs
@@ -5,7 +5,7 @@ const themes = ['Reapit', 'PayProp']
 const getStyleDictionaryConfig = (theme) => {
   const lowerCasedTheme = theme.toLowerCase()
   return {
-    source: ['./tokens/tokens.json'],
+    source: ['./src/tokens/tokens.json'],
     parsers: [
       {
         pattern: /\.json$/,
@@ -27,7 +27,7 @@ const getStyleDictionaryConfig = (theme) => {
     ],
     platforms: {
       css: {
-        buildPath: `tokens/${lowerCasedTheme}/`,
+        buildPath: `src/tokens/${lowerCasedTheme}/`,
         files: [
           {
             destination: 'tokens.css',
@@ -36,7 +36,7 @@ const getStyleDictionaryConfig = (theme) => {
         ],
       },
       ts: {
-        buildPath: `tokens/${lowerCasedTheme}/`,
+        buildPath: `src/tokens/${lowerCasedTheme}/`,
         files: [
           {
             destination: 'tokens.ts',
diff --git a/src/tokens/payprop/tokens.css b/src/tokens/payprop/tokens.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Jul 2024 10:36:54 GMT
+ * Generated on Tue, 10 Dec 2024 06:08:05 GMT
  */
 
 :root {
@@ -281,18 +281,21 @@
   --size-4: 1rem;
   --size-5: 1.25rem;
   --size-6: 1.5rem;
-  --size-7: 2rem;
-  --size-8: 2.5rem;
-  --size-9: 3rem;
-  --size-10: 3.5rem;
-  --size-11: 4rem;
-  --size-12: 4.5rem;
-  --size-13: 5rem;
-  --size-14: 6rem;
-  --size-15: 7rem;
-  --size-16: 8rem;
-  --size-17: 9rem;
-  --size-18: 10rem;
+  --size-7: 1.75rem;
+  --size-8: 2rem;
+  --size-9: 2.25rem;
+  --size-10: 2.5rem;
+  --size-11: 2.75rem;
+  --size-12: 3rem;
+  --size-14: 3.5rem;
+  --size-16: 4rem;
+  --size-18: 4.5rem;
+  --size-20: 5rem;
+  --size-24: 6rem;
+  --size-28: 7rem;
+  --size-32: 8rem;
+  --size-36: 9rem;
+  --size-40: 10rem;
   --size-px: 0.0625rem;
   --icon-xs: 0.75rem;
   --icon-sm: 1rem;
diff --git a/src/tokens/payprop/tokens.ts b/src/tokens/payprop/tokens.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Jul 2024 10:36:54 GMT
+ * Generated on Tue, 10 Dec 2024 06:08:05 GMT
  */
 
 export const neutral900 = '#222b33'
@@ -280,18 +280,21 @@ export const sizeSize3 = '0.75rem'
 export const sizeSize4 = '1rem'
 export const sizeSize5 = '1.25rem'
 export const sizeSize6 = '1.5rem'
-export const sizeSize7 = '2rem'
-export const sizeSize8 = '2.5rem'
-export const sizeSize9 = '3rem'
-export const sizeSize10 = '3.5rem'
-export const sizeSize11 = '4rem'
-export const sizeSize12 = '4.5rem'
-export const sizeSize13 = '5rem'
-export const sizeSize14 = '6rem'
-export const sizeSize15 = '7rem'
-export const sizeSize16 = '8rem'
-export const sizeSize17 = '9rem'
-export const sizeSize18 = '10rem'
+export const sizeSize7 = '1.75rem'
+export const sizeSize8 = '2rem'
+export const sizeSize9 = '2.25rem'
+export const sizeSize10 = '2.5rem'
+export const sizeSize11 = '2.75rem'
+export const sizeSize12 = '3rem'
+export const sizeSize14 = '3.5rem'
+export const sizeSize16 = '4rem'
+export const sizeSize18 = '4.5rem'
+export const sizeSize20 = '5rem'
+export const sizeSize24 = '6rem'
+export const sizeSize28 = '7rem'
+export const sizeSize32 = '8rem'
+export const sizeSize36 = '9rem'
+export const sizeSize40 = '10rem'
 export const sizeSizePx = '0.0625rem'
 export const iconSizeIconXs = '0.75rem'
 export const iconSizeIconSm = '1rem'
diff --git a/src/tokens/reapit/tokens.css b/src/tokens/reapit/tokens.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Jul 2024 10:36:54 GMT
+ * Generated on Tue, 10 Dec 2024 06:08:05 GMT
  */
 
 :root {
@@ -281,18 +281,21 @@
   --size-4: 1rem;
   --size-5: 1.25rem;
   --size-6: 1.5rem;
-  --size-7: 2rem;
-  --size-8: 2.5rem;
-  --size-9: 3rem;
-  --size-10: 3.5rem;
-  --size-11: 4rem;
-  --size-12: 4.5rem;
-  --size-13: 5rem;
-  --size-14: 6rem;
-  --size-15: 7rem;
-  --size-16: 8rem;
-  --size-17: 9rem;
-  --size-18: 10rem;
+  --size-7: 1.75rem;
+  --size-8: 2rem;
+  --size-9: 2.25rem;
+  --size-10: 2.5rem;
+  --size-11: 2.75rem;
+  --size-12: 3rem;
+  --size-14: 3.5rem;
+  --size-16: 4rem;
+  --size-18: 4.5rem;
+  --size-20: 5rem;
+  --size-24: 6rem;
+  --size-28: 7rem;
+  --size-32: 8rem;
+  --size-36: 9rem;
+  --size-40: 10rem;
   --size-px: 0.0625rem;
   --icon-xs: 0.75rem;
   --icon-sm: 1rem;
diff --git a/src/tokens/reapit/tokens.ts b/src/tokens/reapit/tokens.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Jul 2024 10:36:54 GMT
+ * Generated on Tue, 10 Dec 2024 06:08:05 GMT
  */
 
 export const neutral900 = '#222b33'
@@ -280,18 +280,21 @@ export const sizeSize3 = '0.75rem'
 export const sizeSize4 = '1rem'
 export const sizeSize5 = '1.25rem'
 export const sizeSize6 = '1.5rem'
-export const sizeSize7 = '2rem'
-export const sizeSize8 = '2.5rem'
-export const sizeSize9 = '3rem'
-export const sizeSize10 = '3.5rem'
-export const sizeSize11 = '4rem'
-export const sizeSize12 = '4.5rem'
-export const sizeSize13 = '5rem'
-export const sizeSize14 = '6rem'
-export const sizeSize15 = '7rem'
-export const sizeSize16 = '8rem'
-export const sizeSize17 = '9rem'
-export const sizeSize18 = '10rem'
+export const sizeSize7 = '1.75rem'
+export const sizeSize8 = '2rem'
+export const sizeSize9 = '2.25rem'
+export const sizeSize10 = '2.5rem'
+export const sizeSize11 = '2.75rem'
+export const sizeSize12 = '3rem'
+export const sizeSize14 = '3.5rem'
+export const sizeSize16 = '4rem'
+export const sizeSize18 = '4.5rem'
+export const sizeSize20 = '5rem'
+export const sizeSize24 = '6rem'
+export const sizeSize28 = '7rem'
+export const sizeSize32 = '8rem'
+export const sizeSize36 = '9rem'
+export const sizeSize40 = '10rem'
 export const sizeSizePx = '0.0625rem'
 export const iconSizeIconXs = '0.75rem'
 export const iconSizeIconSm = '1rem'
diff --git a/src/tokens/tokens.json b/src/tokens/tokens.json
@@ -647,72 +647,90 @@
         "description": "Used for sizing shapes except icons. For icons use icon sizes"
       },
       "size-7": {
-        "value": "{unit-8}",
+        "value": "{unit-7}",
         "type": "dimension",
         "parent": "Semantic variables/Reapit",
         "description": "Used for sizing shapes except icons. For icons use icon sizes"
       },
       "size-8": {
-        "value": "{unit-10}",
+        "value": "{unit-8}",
         "type": "dimension",
         "parent": "Semantic variables/Reapit",
         "description": "Used for sizing shapes except icons. For icons use icon sizes"
       },
       "size-9": {
-        "value": "{unit-12}",
+        "value": "{unit-9}",
         "type": "dimension",
         "parent": "Semantic variables/Reapit",
         "description": "Used for sizing shapes except icons. For icons use icon sizes"
       },
       "size-10": {
-        "value": "{unit-14}",
+        "value": "{unit-10}",
         "type": "dimension",
         "parent": "Semantic variables/Reapit",
         "description": "Used for sizing shapes except icons. For icons use icon sizes"
       },
       "size-11": {
-        "value": "{unit-16}",
+        "value": "{unit-11}",
         "type": "dimension",
         "parent": "Semantic variables/Reapit",
         "description": "Used for sizing shapes except icons. For icons use icon sizes"
       },
       "size-12": {
+        "value": "{unit-12}",
+        "type": "dimension",
+        "parent": "Semantic variables/Reapit",
+        "description": "Used for sizing shapes except icons. For icons use icon sizes"
+      },
+      "size-14": {
+        "value": "{unit-14}",
+        "type": "dimension",
+        "parent": "Semantic variables/Reapit",
+        "description": "Used for sizing shapes except icons. For icons use icon sizes"
+      },
+      "size-16": {
+        "value": "{unit-16}",
+        "type": "dimension",
+        "parent": "Semantic variables/Reapit",
+        "description": "Used for sizing shapes except icons. For icons use icon sizes"
+      },
+      "size-18": {
         "value": "{unit-18}",
         "type": "dimension",
         "parent": "Semantic variables/Reapit",
         "description": "Used for sizing shapes except icons. For icons use icon sizes"
       },
-      "size-13": {
+      "size-20": {
         "value": "{unit-20}",
         "type": "dimension",
         "parent": "Semantic variables/Reapit",
         "description": "Used for sizing shapes except icons. For icons use icon sizes"
       },
-      "size-14": {
+      "size-24": {
         "value": "{unit-24}",
         "type": "dimension",
         "parent": "Semantic variables/Reapit",
         "description": "Used for sizing shapes except icons. For icons use icon sizes"
       },
-      "size-15": {
+      "size-28": {
         "value": "{unit-28}",
         "type": "dimension",
         "parent": "Semantic variables/Reapit",
         "description": "Used for sizing shapes except icons. For icons use icon sizes"
       },
-      "size-16": {
+      "size-32": {
         "value": "{unit-32}",
         "type": "dimension",
         "parent": "Semantic variables/Reapit",
         "description": "Used for sizing shapes except icons. For icons use icon sizes"
       },
-      "size-17": {
+      "size-36": {
         "value": "{unit-36}",
         "type": "dimension",
         "parent": "Semantic variables/Reapit",
         "description": "Used for sizing shapes except icons. For icons use icon sizes"
       },
-      "size-18": {
+      "size-40": {
         "value": "{unit-40}",
         "type": "dimension",
         "parent": "Semantic variables/Reapit",

Original file line number	Diff line number	Diff line change
`@@ -7,23 +7,23 @@ import CommercialBottomImage from './icons/bottom-commercial-image.svg?react'`
`7`	`7`	`import CommercialSmallBottomImage from './icons/bottom-commercial-image-small.svg?react'`
`8`	`8`
`9`	`9`	const baseAvatarRectMediumSize = `
`10`		`- width: var(--size-size-12, 72px);`
	`10`	`+ width: var(--size-18);`
`11`	`11`	`height: 54px;`
`12`	`12`	`
`13`	`13`
`14`	`14`	const baseAvatarRectSmallSize = `
`15`		`- width: var(--size-size-11, 64px);`
`16`		`- height: var(--size-size-9, 48px);`
	`15`	`+ width: var(--size-16);`
	`16`	`+ height: var(--size-12);`
`17`	`17`	`
`18`	`18`
`19`	`19`	`// The commercial consists of two sections: the commercial image and the bottom placeholder.`
`20`	`20`	const baseCommercialMediumImagesSize = `
`21`	`21`	`width: 54px;`
`22`		`- height: var(--size-size-8, 40px);`
	`22`	`+ height: var(--size-10);`
`23`	`23`	`
`24`	`24`
`25`	`25`	const baseCommercialBottomSmallPlaceholderSize = `
`26`		`- width: var(--size-size-9, 48px);`
	`26`	`+ width: var(--size-12);`
`27`	`27`	`height: 36px;`
`28`	`28`	`
`29`	`29`