feat(Grid|Image): move styles to base theme (#1182)

* -moved grid and image styles to base theme

* -added circularRadius variable in the image variables

* -removed unused imports

* -updated changelog

CHANGELOG.md

@@ -22,6 +22,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Features
 - Add `Reaction` variables to Teams dark and HOC themes @mnajdova ([#1152](https://github.com/stardust-ui/react/pull/1152))
+- Move `Grid`'s and `Image`'s styles and variables from Teams to base theme @mnajdova ([#1182](https://github.com/stardust-ui/react/pull/1182))
 
 ### Fixes
 - Fix the reset of the `highlightedIndex` when search query changes @silviuavram ([#1168](https://github.com/stardust-ui/react/pull/1168))

packages/react/src/themes/base/componentStyles.ts

@@ -3,3 +3,5 @@ export { default as Icon } from './components/Icon/iconStyles'
 export { default as Loader } from './components/Loader/loaderStyles'
 export { default as ProviderBox } from './components/Provider/providerBoxStyles'
 export { default as Text } from './components/Text/textStyles'
+export { default as Grid } from './components/Grid/gridStyles'
+export { default as Image } from './components/Image/imageStyles'

packages/react/src/themes/base/componentVariables.ts

@@ -3,3 +3,5 @@ export { default as Icon } from './components/Icon/iconVariables'
 export { default as Loader } from './components/Loader/loaderVariables'
 export { default as ProviderBox } from './components/Provider/providerBoxVariables'
 export { default as Text } from './components/Text/textVariables'
+export { default as Grid } from './components/Grid/gridVariables'
+export { default as Image } from './components/Image/imageVariables'

packages/react/src/themes/teams/components/Image/imageStyles.ts → packages/react/src/themes/base/components/Image/imageStyles.ts

@@ -1,4 +1,3 @@
-import { pxToRem } from '../../../../lib'
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { ImageProps } from '../../../../components/Image/Image'
 
@@ -9,7 +8,7 @@ export default {
     verticalAlign: 'middle',
     width: (props.fluid && '100%') || variables.width,
     height: variables.height || 'auto',
-    ...(props.circular && { borderRadius: pxToRem(9999) }),
+    ...(props.circular && { borderRadius: variables.circularRadius }),
     ...(props.avatar && {
       width: (props.fluid && '100%') || variables.avatarSize,
       borderRadius: variables.avatarRadius,

packages/react/src/themes/teams/components/Image/imageVariables.ts → packages/react/src/themes/base/components/Image/imageVariables.ts

@@ -5,4 +5,5 @@ export default () => ({
   height: undefined,
   avatarRadius: pxToRem(9999),
   avatarSize: pxToRem(32),
+  circularRadius: pxToRem(9999),
 })

packages/react/src/themes/teams/componentStyles.ts

@@ -31,12 +31,8 @@ export { default as FormField } from './components/Form/formFieldStyles'
 export { default as Header } from './components/Header/headerStyles'
 export { default as HeaderDescription } from './components/Header/headerDescriptionStyles'
 
-export { default as Grid } from './components/Grid/gridStyles'
-
 export { default as Icon } from './components/Icon/iconStyles'
 
-export { default as Image } from './components/Image/imageStyles'
-
 export { default as Input } from './components/Input/inputStyles'
 
 export { default as Label } from './components/Label/labelStyles'

packages/react/src/themes/teams/componentVariables.ts

@@ -25,15 +25,11 @@ export {
 export { default as Flex } from './components/Flex/flexVariables'
 export { default as FlexItem } from './components/Flex/flexItemVariables'
 
-export { default as Grid } from './components/Grid/gridVariables'
-
 export { default as Header } from './components/Header/headerVariables'
 export { default as HeaderDescription } from './components/Header/headerDescriptionVariables'
 
 export { default as Icon } from './components/Icon/iconVariables'
 
-export { default as Image } from './components/Image/imageVariables'
-
 export { default as Input } from './components/Input/inputVariables'
 
 export { default as Label } from './components/Label/labelVariables'