feat(style): adding theme key support on more style props (#2077)

* feat(style): adding theme key support on more style props

* chore: fix style types

* chore: fix duplicate type

* Create little-hotels-hunt.md

* Update little-hotels-hunt.md

Author: zchenwei

.changeset/little-hotels-hunt.md

@@ -0,0 +1,6 @@
+---
+"@aws-amplify/ui-react": minor
+"@aws-amplify/ui": patch
+---
+
+feat(style): adding theme key support on more style props(`font-family`, `line-height`, `opacity`, `box-shadow` and `transform`)

packages/react/src/primitives/types/style.ts

@@ -2,11 +2,16 @@ import { Property } from 'csstype';
 import { WebDesignToken } from '@aws-amplify/ui';
 
 import type {
+  BoxShadowKeys,
   ColorKeys,
+  FontFamilyKeys,
   FontSizeKeys,
   FontWeightKeys,
+  LineHeightKeys,
+  OpacityKeys,
   RadiiKeys,
   SpaceKeys,
+  TransformKeys,
 } from './theme';
 import { FlexItemStyleProps, FlexContainerStyleProps } from './flex';
 import { GridItemStyleProps, GridContainerStyleProps } from './grid';
@@ -55,10 +60,10 @@ export interface BaseStyleProps extends FlexItemStyleProps, GridItemStyleProps {
   border?: ResponsiveStyle<StyleToken<Property.Border>>;
   borderRadius?: ResponsiveStyle<RadiiKeys<StyleToken<Property.BorderRadius>>>;
   bottom?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Bottom>>>;
-  boxShadow?: ResponsiveStyle<StyleToken<Property.BoxShadow>>;
+  boxShadow?: ResponsiveStyle<BoxShadowKeys<StyleToken<Property.BoxShadow>>>;
   color?: ResponsiveStyle<ColorKeys<StyleToken<Property.Color>>>;
   display?: ResponsiveStyle<StyleToken<Property.Display>>;
-  fontFamily?: ResponsiveStyle<StyleToken<Property.FontFamily>>;
+  fontFamily?: ResponsiveStyle<FontFamilyKeys<StyleToken<Property.FontFamily>>>;
   fontSize?: ResponsiveStyle<FontSizeKeys<StyleToken<Property.FontSize>>>;
   fontStyle?: ResponsiveStyle<StyleToken<Property.FontStyle>>;
   fontWeight?: ResponsiveStyle<FontWeightKeys<StyleToken<Property.FontWeight>>>;
@@ -67,7 +72,7 @@ export interface BaseStyleProps extends FlexItemStyleProps, GridItemStyleProps {
   letterSpacing?: ResponsiveStyle<
     SpaceKeys<StyleToken<Property.LetterSpacing>>
   >;
-  lineHeight?: ResponsiveStyle<StyleToken<Property.LineHeight>>;
+  lineHeight?: ResponsiveStyle<LineHeightKeys<StyleToken<Property.LineHeight>>>;
   margin?: ResponsiveStyle<StyleToken<Property.Margin>>;
   marginBlockEnd?: ResponsiveStyle<
     SpaceKeys<StyleToken<Property.MarginBlockEnd>>
@@ -89,7 +94,7 @@ export interface BaseStyleProps extends FlexItemStyleProps, GridItemStyleProps {
   maxWidth?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MaxWidth>>>;
   minHeight?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MinHeight>>>;
   minWidth?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MinWidth>>>;
-  opacity?: ResponsiveStyle<StyleToken<Property.Opacity>>;
+  opacity?: ResponsiveStyle<OpacityKeys<StyleToken<Property.Opacity>>>;
   overflow?: ResponsiveStyle<StyleToken<Property.Overflow>>;
   padding?: ResponsiveStyle<StyleToken<Property.Padding>>;
   paddingBlockEnd?: ResponsiveStyle<
@@ -116,7 +121,7 @@ export interface BaseStyleProps extends FlexItemStyleProps, GridItemStyleProps {
   textDecoration?: ResponsiveStyle<StyleToken<Property.TextDecoration>>;
   textTransform?: ResponsiveStyle<StyleToken<Property.TextTransform>>;
   top?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Top>>>;
-  transform?: ResponsiveStyle<StyleToken<Property.Transform>>;
+  transform?: ResponsiveStyle<TransformKeys<StyleToken<Property.Transform>>>;
   transformOrigin?: ResponsiveStyle<StyleToken<Property.TransformOrigin>>;
   width?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Width>>>;
   whiteSpace?: ResponsiveStyle<StyleToken<Property.WhiteSpace>>;

packages/react/src/primitives/types/theme.ts

@@ -1,8 +1,10 @@
 import type {
   FontSizes,
   FontWeights,
-  SpaceSizes,
+  LineHeights,
   Radii,
+  Shadows,
+  SpaceSizes,
 } from '@aws-amplify/ui';
 
 /**
@@ -184,10 +186,35 @@ export type ColorKeys<PropertyType> =
   | BorderColorKeys
   | ShadowColorKeys;
 
+export type BoxShadowKeys<PropertyType> = PropertyType | keyof Shadows;
+
 export type FontSizeKeys<PropertyType> = PropertyType | keyof FontSizes;
 
 export type FontWeightKeys<PropertyType> = PropertyType | keyof FontWeights;
 
+export type FontFamilyKeys<PropertyType> =
+  | PropertyType
+  | 'default.variable'
+  | 'default.static';
+
+export type LineHeightKeys<PropertyType> = PropertyType | keyof LineHeights;
+
+// Note: we cannot use keyof Opacities
+// because the return type will be number union and no intellisense
+export type OpacityKeys<PropertyType> =
+  | PropertyType
+  | '0'
+  | '10'
+  | '20'
+  | '30'
+  | '40'
+  | '50'
+  | '60'
+  | '70'
+  | '80'
+  | '90'
+  | '100';
+
 export type RadiiKeys<PropertyType> = PropertyType | keyof Radii;
 
 // Theme keys for space
@@ -206,9 +233,23 @@ export type SpaceKeys<PropertyType> =
   | 'relative.xxxl'
   | 'relative.full';
 
+export type TransformKeys<PropertyType> =
+  | PropertyType
+  | 'slideX.small'
+  | 'slideX.medium'
+  | 'slideX.large';
+
 export const stylePropsToThemeKeys = {
   backgroundColor: 'colors',
   color: 'colors',
+  borderRadius: 'radii',
+  fontSize: 'fontSizes',
+  fontWeight: 'fontWeights',
+  fontFamily: 'fonts',
+  lineHeight: 'lineHeights',
+  opacity: 'opacities',
+  boxShadow: 'shadows',
+  transform: 'transforms',
   left: 'space',
   right: 'space',
   top: 'space',
@@ -239,7 +280,4 @@ export const stylePropsToThemeKeys = {
   gap: 'space',
   columnGap: 'space',
   rowGap: 'space',
-  borderRadius: 'radii',
-  fontSize: 'fontSizes',
-  fontWeight: 'fontWeights',
 };

packages/ui/src/theme/types.ts

@@ -5,8 +5,10 @@ import { Breakpoints } from './breakpoints';
 export * from './tokens/types/designToken';
 export type { FontSizes } from './tokens/fontSizes';
 export type { FontWeights } from './tokens/fontWeights';
-export type { SpaceSizes } from './tokens/space';
+export type { LineHeights } from './tokens/lineHeights';
 export type { Radii } from './tokens/radii';
+export type { Shadows } from './tokens/shadows';
+export type { SpaceSizes } from './tokens/space';
 
 /**
  * An override is a set of tokens that override others