chore(design-system): align scss typings between IDE and CLI [AR-54784]

packages/design-system/src/components/ds-button/versions/ds-button-new/ds-button-new.tsx

@@ -36,9 +36,8 @@ const DsButton: React.FC<DsButtonProps> = ({
 		styles[size],
 		className,
 
-		// @ts-expect-error: we don't have all variations of classnames defined
-		// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-		styles[`${type}-${variant}`],
+		// Casting because we don't have all variations of classnames defined
+		styles[`${type}-${variant}` as keyof typeof styles],
 	);
 
 	return (

packages/design-system/src/components/ds-drawer/ds-drawer.tsx

@@ -49,9 +49,8 @@ const DsDrawer = ({
 							styles[`position-${position}`],
 							className,
 
-							// @ts-expect-error: these classnames are generated dynamically in scss
-							// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-							styles[`cols-${String(columns)}`],
+							// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+							styles[`cols-${columns}`],
 						)}
 					>
 						<div className={styles.content}>{children}</div>

packages/design-system/src/components/ds-form-control/ds-form-control.tsx

@@ -63,9 +63,8 @@ const DsFormControl = ({
 					styles.container,
 					className,
 
-					// @ts-expect-error: `info` doesn't have its own classname
-					// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-					status && message && styles[status],
+					// Casting because `info` doesn't have its own classname
+					status && message && styles[status as keyof typeof styles],
 				)}
 				style={style}
 			>