feat: add theme.state opacity tokens and split theme types (#4917)

* feat: add theme.state opacity tokens and split theme types

* feat: add disabled and enabled opacity to theme.state

* fix: code review findings

Author: adrcotfas

src/components/Card/CardTitle.tsx

@@ -40,7 +40,7 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
    *
    *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
    */
-  titleVariant?: keyof typeof TypescaleKey;
+  titleVariant?: TypescaleKey;
   /**
    * Text for the subtitle. Note that this will only accept a string or `<Text>`-based node.
    */
@@ -69,7 +69,7 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
    *
    *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
    */
-  subtitleVariant?: keyof typeof TypescaleKey;
+  subtitleVariant?: TypescaleKey;
   /**
    * Callback which returns a React element to display on the left side.
    */

src/components/Checkbox/CheckboxItem.tsx

@@ -86,7 +86,7 @@ export type Props = {
    *
    *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
    */
-  labelVariant?: keyof typeof TypescaleKey;
+  labelVariant?: TypescaleKey;
   /**
    * @optional
    */

src/components/Menu/Menu.tsx

@@ -24,7 +24,6 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import MenuItem from './MenuItem';
 import { useInternalTheme } from '../../core/theming';
 import type { Elevation, Theme, ThemeProp } from '../../types';
-import { ElevationLevels } from '../../types';
 import { addEventListener } from '../../utils/addEventListener';
 import { BackHandler } from '../../utils/BackHandler/BackHandler';
 import Portal from '../Portal/Portal';
@@ -105,9 +104,14 @@ const EASING = Easing.bezier(0.4, 0, 0.2, 1);
 const WINDOW_LAYOUT = Dimensions.get('window');
 
 const DEFAULT_ELEVATION: Elevation = 2;
-export const ELEVATION_LEVELS_MAP = Object.values(
-  ElevationLevels
-) as ElevationLevels[];
+export const ELEVATION_LEVELS_MAP = [
+  'level0',
+  'level1',
+  'level2',
+  'level3',
+  'level4',
+  'level5',
+] as const;
 
 const DEFAULT_MODE = 'elevated';
 

src/components/RadioButton/RadioButtonItem.tsx

@@ -88,7 +88,7 @@ export type Props = {
    *
    *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
    */
-  labelVariant?: keyof typeof TypescaleKey;
+  labelVariant?: TypescaleKey;
   /**
    * Specifies the largest possible scale a label font can reach.
    */

src/components/Typography/types.tsx

@@ -2,4 +2,4 @@ import type { TypescaleKey } from '../../types';
 
 export type VariantProp<T> =
   | (T extends string ? (string extends T ? never : T) : never)
-  | keyof typeof TypescaleKey;
+  | TypescaleKey;

src/deprecated.ts

@@ -11,8 +11,7 @@
 import { DarkTheme } from './theme/schemes/DarkTheme';
 import { LightTheme } from './theme/schemes/LightTheme';
 import { Palette } from './theme/tokens';
-import { TypescaleKey } from './types';
-import type { Theme, Elevation } from './types';
+import type { Theme, Elevation, TypescaleKey } from './types';
 
 /**
  * @deprecated Use `LightTheme` instead. Will be removed in a future version.
@@ -32,8 +31,6 @@ export const MD3Colors = Palette;
 /**
  * @deprecated Use `TypescaleKey` instead. Will be removed in a future version.
  */
-export const MD3TypescaleKey = TypescaleKey;
-// eslint-disable-next-line no-redeclare
 export type MD3TypescaleKey = TypescaleKey;
 
 /**

src/theme/fonts.tsx

@@ -2,12 +2,8 @@ import { typescale } from './tokens';
 import type { TypescaleStyle, Typescale, TypescaleKey } from './types';
 
 type FontsConfig =
-  | {
-      [key in TypescaleKey]: Partial<TypescaleStyle>;
-    }
-  | {
-      [key: string]: TypescaleStyle;
-    }
+  | Record<TypescaleKey, Partial<TypescaleStyle>>
+  | Record<string, TypescaleStyle>
   | Partial<TypescaleStyle>;
 
 function configureFontsConfig(

src/theme/tokens/index.ts

@@ -122,8 +122,8 @@ const ref = {
   stateOpacity: {
     dragged: 0.16,
     pressed: 0.1,
-    focus: 0.1,
-    hover: 0.08,
+    focused: 0.1,
+    hovered: 0.08,
     disabled: 0.38,
     enabled: 1.0,
   },

src/theme/types.ts

@@ -0,0 +1,59 @@
+import type { ElevationColors } from './elevation';
+
+export type ThemeColors = {
+  primary: string;
+  primaryContainer: string;
+  secondary: string;
+  secondaryContainer: string;
+  tertiary: string;
+  tertiaryContainer: string;
+  surface: string;
+  surfaceDim: string;
+  surfaceBright: string;
+  surfaceContainerLowest: string;
+  surfaceContainerLow: string;
+  surfaceContainer: string;
+  surfaceContainerHigh: string;
+  surfaceContainerHighest: string;
+  surfaceVariant: string;
+  background: string;
+  error: string;
+  errorContainer: string;
+  onPrimary: string;
+  onPrimaryContainer: string;
+  onSecondary: string;
+  onSecondaryContainer: string;
+  onTertiary: string;
+  onTertiaryContainer: string;
+  onSurface: string;
+  onSurfaceVariant: string;
+  onError: string;
+  onErrorContainer: string;
+  onBackground: string;
+  outline: string;
+  outlineVariant: string;
+  inverseSurface: string;
+  inverseOnSurface: string;
+  inversePrimary: string;
+  primaryFixed: string;
+  primaryFixedDim: string;
+  onPrimaryFixed: string;
+  onPrimaryFixedVariant: string;
+  secondaryFixed: string;
+  secondaryFixedDim: string;
+  onSecondaryFixed: string;
+  onSecondaryFixedVariant: string;
+  tertiaryFixed: string;
+  tertiaryFixedDim: string;
+  onTertiaryFixed: string;
+  onTertiaryFixedVariant: string;
+  shadow: string;
+  scrim: string;
+  /** Pre-computed state layer color at press opacity (0.10).
+   *  Used for ripple effects. Avoids runtime alpha manipulation
+   *  which is incompatible with PlatformColor on Android.
+   *  TODO: revisit after https://github.com/facebook/react-native/pull/56395
+   *  @see https://m3.material.io/foundations/interaction/states/state-layers */
+  stateLayerPressed: string;
+  elevation: ElevationColors;
+};