fix(Divider): Matching divider Teams theme to redlines

CHANGELOG.md

@@ -20,7 +20,8 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### BREAKING CHANGES
 - Fixed `Divider` wrong usage of the `typeSecondary{color, backgroundColor}` and `default{color, backgroundColor}` variables; renamed `default{color, backgroundColor}` variables to `color` and `backgroundColor` @mnajdova ([#234](https://github.com/stardust-ui/react/pull/234))
 - Restrict the `styles` prop to styling the root element only @levithomason ([#238](https://github.com/stardust-ui/react/pull/238))
-- `Add` `RadioGroup` compliant with ARIA patterns. `Radio` changed to `RadioGroup.Item` @jurokapsiar ([#229](https://github.com/stardust-ui/react/pull/229))
+- Add `RadioGroup` compliant with ARIA patterns. `Radio` changed to `RadioGroup.Item` @jurokapsiar ([#229](https://github.com/stardust-ui/react/pull/229))
+- `Divider` refactored variables names and the way they are used @codepretty ([#249](https://github.com/stardust-ui/react/pull/249))
 
 ### Fixes
 - Allow string or number as Input value @levithomason ([#250](https://github.com/stardust-ui/react/pull/250))

src/themes/teams/components/Divider/dividerStyles.ts

@@ -14,12 +14,12 @@ const dividerBorderStyle = (size, color): ICSSInJSStyle => ({
 const beforeAndAfter = (size, type, variables): ICSSPseudoElementStyle => ({
   content: '""',
   flex: 1,
-  ...dividerBorderStyle(size, variables.backgroundColor), // the default border style
+  ...dividerBorderStyle(size, variables.dividerColor),
   ...(type === 'primary' && {
-    ...dividerBorderStyle(size, variables.typePrimaryBackgroundColor),
+    ...dividerBorderStyle(size, variables.primaryColor),
   }),
   ...(type === 'secondary' && {
-    ...dividerBorderStyle(size, variables.typeSecondaryBackgroundColor),
+    ...dividerBorderStyle(size, variables.secondaryColor),
   }),
 })
 
@@ -33,43 +33,38 @@ const dividerStyles: IComponentPartStylesInput = {
   }): ICSSInJSStyle => {
     const { children, size, type, important, content } = props
     return {
-      marginTop: pxToRem(5 + size * 7.5),
-      marginBottom: pxToRem(5 + size * 7.5),
-      fontWeight: 400,
+      color: variables.textColor,
+      display: 'flex',
+      alignItems: 'center',
+      paddingTop: pxToRem(variables.dividerPadding),
+      paddingBottom: pxToRem(variables.dividerPadding),
+      ...(type === 'primary' && {
+        color: variables.primaryColor,
+      }),
+      ...(type === 'secondary' && {
+        color: variables.secondaryColor,
+      }),
       ...(important && {
-        fontWeight: 700,
+        fontWeight: variables.importantFontWeight,
       }),
       ...(childrenExist(children) || content
         ? {
-            display: 'flex',
-            alignItems: 'center',
             textAlign: 'center',
-            lineHeight: 1.25,
             fontSize: pxToRem(12 + size),
+            lineHeight: variables.textLineHeight,
             '::before': {
               ...beforeAndAfter(size, type, variables),
-              marginRight: pxToRem(22 + size * 2),
+              marginRight: pxToRem(20),
             },
             '::after': {
               ...beforeAndAfter(size, type, variables),
-              marginLeft: pxToRem(22 + size * 2),
+              marginLeft: pxToRem(20),
             },
-            color: variables.color, // the default color
-            ...(type === 'primary' && {
-              color: variables.typePrimaryColor,
-            }),
-            ...(type === 'secondary' && {
-              color: variables.typeSecondaryColor,
-            }),
           }
         : {
-            ...dividerBorderStyle(size, variables.backgroundColor), // the default border style
-            ...(type === 'primary' && {
-              ...dividerBorderStyle(size, variables.typePrimaryBackgroundColor),
-            }),
-            ...(type === 'secondary' && {
-              ...dividerBorderStyle(size, variables.typeSecondaryBackgroundColor),
-            }),
+            '::before': {
+              ...beforeAndAfter(size, type, variables),
+            },
           }),
     }
   },

src/themes/teams/components/Divider/dividerVariables.ts

@@ -1,10 +1,12 @@
 export default (siteVars: any) => {
   return {
-    color: siteVars.gray02,
-    backgroundColor: siteVars.gray10,
-    typePrimaryColor: siteVars.brand,
-    typePrimaryBackgroundColor: siteVars.brand,
-    typeSecondaryColor: siteVars.gray04,
-    typeSecondaryBackgroundColor: siteVars.gray08,
+    dividerColor: siteVars.gray09,
+    textColor: siteVars.gray03,
+    textFontSize: siteVars.fontSizeSmall,
+    textLineHeight: siteVars.lineHeightSmall,
+    primaryColor: siteVars.brand,
+    secondaryColor: siteVars.gray04,
+    importantFontWeight: siteVars.fontWeightBold,
+    dividerPadding: 4,
   }
 }