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

Author: adrcotfas

src/components/__tests__/__snapshots__/ListSection.test.tsx.snap

@@ -188,6 +188,14 @@ exports[`renders list section with custom title style 1`] = `
         },
       },
       "roundness": 4,
+      "state": {
+        "opacity": {
+          "dragged": 0.16,
+          "focused": 0.1,
+          "hovered": 0.08,
+          "pressed": 0.1,
+        },
+      },
     }
   }
 >
@@ -730,6 +738,14 @@ exports[`renders list section with subheader 1`] = `
         },
       },
       "roundness": 4,
+      "state": {
+        "opacity": {
+          "dragged": 0.16,
+          "focused": 0.1,
+          "hovered": 0.08,
+          "pressed": 0.1,
+        },
+      },
     }
   }
 >
@@ -1270,6 +1286,14 @@ exports[`renders list section without subheader 1`] = `
         },
       },
       "roundness": 4,
+      "state": {
+        "opacity": {
+          "dragged": 0.16,
+          "focused": 0.1,
+          "hovered": 0.08,
+          "pressed": 0.1,
+        },
+      },
     }
   }
 >

src/theme/schemes/DarkTheme.tsx

@@ -1,11 +1,13 @@
 import { baseTheme } from './base';
 import { tokens } from '../tokens';
 import { buildScheme } from '../tokens/sys/color/roles';
+import { defaultState } from '../tokens/sys/state';
 import type { Theme } from '../types';
 
 export const DarkTheme: Theme = {
   ...baseTheme,
   dark: true,
   mode: 'adaptive',
   colors: buildScheme(tokens.md.ref.palette, tokens.md.ref, { mode: 'dark' }),
+  state: defaultState,
 };

src/theme/schemes/DynamicTheme.android.tsx

@@ -2,6 +2,7 @@ import { Platform, PlatformColor } from 'react-native';
 
 import { DarkTheme } from './DarkTheme';
 import { LightTheme } from './LightTheme';
+import { defaultState } from '../tokens/sys/state';
 import type { Theme } from '../types';
 
 const isApi34 = (Platform.Version as number) >= 34;
@@ -494,9 +495,11 @@ const darkColors = {
 export const DynamicLightTheme: Theme = {
   ...LightTheme,
   colors: { ...LightTheme.colors, ...lightColors },
+  state: defaultState,
 };
 
 export const DynamicDarkTheme: Theme = {
   ...DarkTheme,
   colors: { ...DarkTheme.colors, ...darkColors },
+  state: defaultState,
 };

src/theme/schemes/LightTheme.tsx

@@ -1,10 +1,12 @@
 import { baseTheme } from './base';
 import { tokens } from '../tokens';
 import { buildScheme } from '../tokens/sys/color/roles';
+import { defaultState } from '../tokens/sys/state';
 import type { Theme } from '../types';
 
 export const LightTheme: Theme = {
   ...baseTheme,
   dark: false,
   colors: buildScheme(tokens.md.ref.palette, tokens.md.ref, { mode: 'light' }),
+  state: defaultState,
 };

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/tokens/sys/state.ts

@@ -0,0 +1,13 @@
+import type { ThemeState } from '../../types';
+import { tokens } from '../index';
+
+const { stateOpacity } = tokens.md.ref;
+
+export const defaultState: ThemeState = {
+  opacity: {
+    hovered: stateOpacity.hovered,
+    focused: stateOpacity.focused,
+    pressed: stateOpacity.pressed,
+    dragged: stateOpacity.dragged,
+  },
+};

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;
+};

src/theme/types/color.ts

@@ -0,0 +1,14 @@
+export type Elevation = 0 | 1 | 2 | 3 | 4 | 5;
+
+export enum ElevationLevels {
+  'level0',
+  'level1',
+  'level2',
+  'level3',
+  'level4',
+  'level5',
+}
+
+export type ElevationColors = {
+  [key in keyof typeof ElevationLevels]: string;
+};

src/theme/types/elevation.ts

@@ -0,0 +1,7 @@
+export * from './color';
+export * from './elevation';
+export * from './navigation';
+export * from './state';
+export * from './theme';
+export * from './typography';
+export * from './utils';