refactor: improve structure of reference and system tokens (#4952)

* add focusIndicator tokens
* add shadow overrides
* include mass in toRawSpring
* add contentColorFor helper

Author: adrcotfas

src/components/Button/utils.tsx

@@ -5,7 +5,7 @@ import { tokens } from '../../theme/tokens';
 import type { InternalTheme, Theme } from '../../types';
 import { splitStyles } from '../../utils/splitStyles';
 
-const { stateOpacity } = tokens.md.ref;
+const stateOpacity = tokens.md.sys.state.opacity;
 
 export type ButtonMode =
   | 'text'

src/components/Checkbox/CheckboxItem.tsx

@@ -11,7 +11,7 @@ import {
 
 import Checkbox from './Checkbox';
 import { useInternalTheme } from '../../core/theming';
-import { tokens } from '../../theme/tokens';
+import { getStateLayer } from '../../theme/utils/state';
 import type { ThemeProp, TypescaleKey } from '../../types';
 import TouchableRipple, {
   Props as TouchableRippleProps,
@@ -145,14 +145,10 @@ const CheckboxItem = ({
   const isLeading = position === 'leading';
   const checkbox = <Checkbox {...checkboxProps} />;
 
-  const textColor = theme.colors.onSurface;
   const textAlign = isLeading ? 'right' : 'left';
 
   const computedStyle = {
-    color: textColor,
-    opacity: disabled
-      ? tokens.md.ref.stateOpacity.disabled
-      : tokens.md.ref.stateOpacity.enabled,
+    ...getStateLayer(theme, 'onSurface', disabled ? 'disabled' : 'enabled'),
     textAlign,
   } as TextStyle;
 

src/components/Checkbox/utils.ts

@@ -3,7 +3,7 @@ import type { ColorValue } from 'react-native';
 import { tokens } from '../../theme/tokens';
 import type { InternalTheme } from '../../types';
 
-const { stateOpacity } = tokens.md.ref;
+const stateOpacity = tokens.md.sys.state.opacity;
 
 const getCheckedColor = ({
   theme,

src/components/Chip/helpers.tsx

@@ -7,7 +7,7 @@ import type { InternalTheme, Theme } from '../../types';
 
 const md3 = (theme: InternalTheme) => theme as Theme;
 
-const { stateOpacity } = tokens.md.ref;
+const stateOpacity = tokens.md.sys.state.opacity;
 
 export type ChipAvatarProps = {
   style?: StyleProp<ViewStyle>;

src/components/HelperText/utils.ts

@@ -1,8 +1,6 @@
-import { tokens } from '../../theme/tokens';
+import { getStateLayer } from '../../theme/utils/state';
 import type { InternalTheme } from '../../types';
 
-const { stateOpacity } = tokens.md.ref;
-
 type BaseProps = {
   theme: InternalTheme;
   disabled?: boolean;
@@ -11,18 +9,11 @@ type BaseProps = {
 
 export function getTextColor({ theme, disabled, type }: BaseProps) {
   if (type === 'error') {
-    return { color: theme.colors.error, opacity: stateOpacity.enabled };
-  }
-
-  if (disabled) {
-    return {
-      color: theme.colors.onSurfaceVariant,
-      opacity: stateOpacity.disabled,
-    };
+    return getStateLayer(theme, 'error', 'enabled');
   }
-
-  return {
-    color: theme.colors.onSurfaceVariant,
-    opacity: stateOpacity.enabled,
-  };
+  return getStateLayer(
+    theme,
+    'onSurfaceVariant',
+    disabled ? 'disabled' : 'enabled'
+  );
 }

src/components/IconButton/utils.ts

@@ -3,7 +3,7 @@ import type { ColorValue } from 'react-native';
 import { tokens } from '../../theme/tokens';
 import type { InternalTheme } from '../../types';
 
-const { stateOpacity } = tokens.md.ref;
+const stateOpacity = tokens.md.sys.state.opacity;
 
 type IconButtonMode = 'outlined' | 'contained' | 'contained-tonal';
 

src/components/Menu/utils.ts

@@ -2,7 +2,7 @@ import { tokens } from '../../theme/tokens';
 import type { InternalTheme } from '../../types';
 import type { IconSource } from '../Icon';
 
-const { stateOpacity } = tokens.md.ref;
+const stateOpacity = tokens.md.sys.state.opacity;
 
 export const MIN_WIDTH = 112;
 export const MAX_WIDTH = 280;

src/components/Modal.tsx

@@ -20,7 +20,7 @@ import { addEventListener } from '../utils/addEventListener';
 import { BackHandler } from '../utils/BackHandler/BackHandler';
 import useAnimatedValue from '../utils/useAnimatedValue';
 
-const { scrimAlpha } = tokens.md.ref;
+const scrimAlpha = tokens.md.sys.scrim.alpha;
 
 export type Props = {
   /**

src/components/RadioButton/RadioButtonItem.tsx

@@ -15,7 +15,7 @@ import { RadioButtonContext, RadioButtonContextType } from './RadioButtonGroup';
 import RadioButtonIOS from './RadioButtonIOS';
 import { handlePress, isChecked } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import { tokens } from '../../theme/tokens';
+import { getStateLayer } from '../../theme/utils/state';
 import type { ThemeProp, TypescaleKey } from '../../types';
 import TouchableRipple, {
   Props as TouchableRippleProps,
@@ -179,14 +179,10 @@ const RadioButtonItem = ({
     radioButton = <RadioButton {...radioButtonProps} />;
   }
 
-  const textColor = theme.colors.onSurface;
   const textAlign = isLeading ? 'right' : 'left';
 
   const computedStyle = {
-    color: textColor,
-    opacity: disabled
-      ? tokens.md.ref.stateOpacity.disabled
-      : tokens.md.ref.stateOpacity.enabled,
+    ...getStateLayer(theme, 'onSurface', disabled ? 'disabled' : 'enabled'),
     textAlign,
   } as TextStyle;
 

src/components/RadioButton/utils.ts

@@ -3,7 +3,7 @@ import type { ColorValue, GestureResponderEvent } from 'react-native';
 import { tokens } from '../../theme/tokens';
 import type { InternalTheme } from '../../types';
 
-const { stateOpacity } = tokens.md.ref;
+const stateOpacity = tokens.md.sys.state.opacity;
 
 export const handlePress = ({
   onPress,