move padding style in get-padding-by-size file

gigitux · gigitux · commit f5d8c4738b1a · 2025-10-24T10:39:54.000+02:00
diff --git a/packages/components/src/card/get-padding-by-size.ts b/packages/components/src/card/get-padding-by-size.ts
@@ -7,9 +7,35 @@ import { css, type SerializedStyles } from '@emotion/react';
  * Internal dependencies
  */
 import type { Props, SizeToken } from './types';
-import { cardPaddings } from './styles';
 import { space } from '../utils/space';
 
+const CONFIG = {
+	cardPaddingXSmall: `${ space( 2 ) }`,
+	cardPaddingSmall: `${ space( 4 ) }`,
+	cardPaddingMedium: `${ space( 4 ) } ${ space( 6 ) }`,
+	cardPaddingLarge: `${ space( 6 ) } ${ space( 8 ) }`,
+};
+
+const xSmallCardPadding = css`
+	padding: ${ CONFIG.cardPaddingXSmall };
+`;
+
+export const cardPaddings = {
+	large: css`
+		padding: ${ CONFIG.cardPaddingLarge };
+	`,
+	medium: css`
+		padding: ${ CONFIG.cardPaddingMedium };
+	`,
+	small: css`
+		padding: ${ CONFIG.cardPaddingSmall };
+	`,
+	xSmall: xSmallCardPadding,
+	// The `extraSmall` size is not officially documented, but the following styles
+	// are kept for legacy reasons to support older values of the `size` prop.
+	extraSmall: xSmallCardPadding,
+};
+
 const getSinglePaddingValue = ( size?: SizeToken ): string | undefined => {
 	switch ( size ) {
 		case 'xSmall':
diff --git a/packages/components/src/card/styles.ts b/packages/components/src/card/styles.ts
@@ -94,26 +94,6 @@ export const rounded = css`
 	border-radius: ${ adjustedBorderRadius };
 `;
 
-const xSmallCardPadding = css`
-	padding: ${ CONFIG.cardPaddingXSmall };
-`;
-
-export const cardPaddings = {
-	large: css`
-		padding: ${ CONFIG.cardPaddingLarge };
-	`,
-	medium: css`
-		padding: ${ CONFIG.cardPaddingMedium };
-	`,
-	small: css`
-		padding: ${ CONFIG.cardPaddingSmall };
-	`,
-	xSmall: xSmallCardPadding,
-	// The `extraSmall` size is not officially documented, but the following styles
-	// are kept for legacy reasons to support older values of the `size` prop.
-	extraSmall: xSmallCardPadding,
-};
-
 export const shady = css`
 	background-color: ${ COLORS.ui.backgroundDisabled };
 `;
diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js
@@ -1,7 +1,6 @@
 /**
  * Internal dependencies
  */
-import { space } from './space';
 import { COLORS } from './colors-values';
 
 const CONTROL_HEIGHT = '36px';
@@ -54,10 +53,6 @@ export default Object.assign( {}, CONTROL_PROPS, {
 	fontWeightMedium: '499', // ensures fallback to 400 (instead of 600)
 	fontWeightHeading: '600',
 	gridBase: '4px',
-	cardPaddingXSmall: `${ space( 2 ) }`,
-	cardPaddingSmall: `${ space( 4 ) }`,
-	cardPaddingMedium: `${ space( 4 ) } ${ space( 6 ) }`,
-	cardPaddingLarge: `${ space( 6 ) } ${ space( 8 ) }`,
 	elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)`,
 	elevationSmall: `0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)`,
 	elevationMedium: `0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02)`,
