fix(ui-flex): resolve general.* spacing tokens for the gap prop

Flex v2 resolved `gap` with getShorthandPropValue, which only handles the
flat legacy keyword scale. The current general.* tokens are nested
(sharedTokens.spacing.general.spaceXl), so `gap="general.spaceXl"` was not
found and silently fell back to `0` (no gap). Resolve `gap` with
calcSpacingFromShorthand instead -- the same helper View uses for
margin/padding -- which supports both the general.* dot-path and the legacy
keyword scale.

INSTUI-5125

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: git-nandor

packages/ui-flex/src/Flex/v2/styles.ts

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import { getShorthandPropValue, makeThemeVars } from '@instructure/emotion'
+import { calcSpacingFromShorthand } from '@instructure/emotion'
 import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
 import type { FlexProps, FlexStyle } from './props'
 
@@ -87,14 +87,6 @@ const generateStyle = (
     'row-reverse': 'row-reverse'
   }
 
-  // gap css prop
-  const gapValues = makeThemeVars('gap', {
-    ...sharedTokens.spacing,
-    ...sharedTokens.legacy.spacing
-  })
-  const getGapValue = (gap: FlexProps['gap'], values: Record<string, string>) =>
-    getShorthandPropValue('Flex', values, gap, 'gap')
-
   return {
     flex: {
       label: 'flex',
@@ -104,7 +96,10 @@ const generateStyle = (
       justifyContent: justifyItemsValues[justifyItems!],
       flexWrap: wrapValues[wrap!],
       flexDirection: flexDirectionValues[direction!],
-      gap: getGapValue(gap!, gapValues)
+      gap: calcSpacingFromShorthand(gap, {
+        ...sharedTokens.spacing,
+        ...sharedTokens.legacy.spacing
+      })
     }
   }
 }