feat: improve structure of ref and sys tokens; add useFocusVisible hook

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

@@ -13,7 +13,7 @@ import Checkbox from './Checkbox';
 import CheckboxAndroid from './CheckboxAndroid';
 import CheckboxIOS from './CheckboxIOS';
 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,
@@ -161,14 +161,10 @@ const CheckboxItem = ({
     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 getAndroidCheckedColor = ({
   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/SegmentedButtons/utils.ts

@@ -3,7 +3,7 @@ import { ViewStyle } 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 BaseProps = {
   theme: InternalTheme;

src/components/TextInput/Adornment/utils.ts

@@ -1,20 +1,22 @@
 import type { ColorValue } from 'react-native';
 
 import { tokens } from '../../../theme/tokens';
+import { getStateLayer } from '../../../theme/utils/state';
 import type { InternalTheme } from '../../../types';
 
-const { stateOpacity } = tokens.md.ref;
+const stateOpacity = tokens.md.sys.state.opacity;
 
 type BaseProps = {
   theme: InternalTheme;
   disabled?: boolean;
 };
 
 export function getTextColor({ theme, disabled }: BaseProps) {
-  return {
-    color: theme.colors.onSurfaceVariant,
-    opacity: disabled ? stateOpacity.disabled : stateOpacity.enabled,
-  };
+  return getStateLayer(
+    theme,
+    'onSurfaceVariant',
+    disabled ? 'disabled' : 'enabled'
+  );
 }
 
 export function getIconColor({

src/components/TextInput/helpers.tsx

@@ -19,7 +19,7 @@ import type { TextInputLabelProp } from './types';
 import { tokens } from '../../theme/tokens';
 import type { InternalTheme } from '../../types';
 
-const { stateOpacity } = tokens.md.ref;
+const stateOpacity = tokens.md.sys.state.opacity;
 
 type PaddingProps = {
   height: number | null;

src/components/__tests__/Button.test.tsx

@@ -10,7 +10,7 @@ import { tokens } from '../../theme/tokens';
 import Button from '../Button/Button';
 import { getButtonColors } from '../Button/utils';
 
-const { stateOpacity } = tokens.md.ref;
+const stateOpacity = tokens.md.sys.state.opacity;
 
 const styles = StyleSheet.create({
   flexing: {

src/components/__tests__/Checkbox/utils.test.tsx

@@ -4,7 +4,7 @@ import {
   getAndroidSelectionControlColor,
   getSelectionControlIOSColor,
 } from '../../Checkbox/utils';
-const { stateOpacity } = tokens.md.ref;
+const stateOpacity = tokens.md.sys.state.opacity;
 
 describe('getAndroidSelectionControlColor - checkbox color', () => {
   it('should return correct disabled color, for theme version 3', () => {

src/components/__tests__/Chip.test.tsx

@@ -10,7 +10,7 @@ import { tokens } from '../../theme/tokens';
 import Chip from '../Chip/Chip';
 import { getChipColors } from '../Chip/helpers';
 
-const { stateOpacity } = tokens.md.ref;
+const stateOpacity = tokens.md.sys.state.opacity;
 
 it('renders chip with onPress', () => {
   const tree = render(<Chip onPress={() => {}}>Example Chip</Chip>).toJSON();

src/components/__tests__/IconButton.test.tsx

@@ -10,7 +10,7 @@ import { tokens } from '../../theme/tokens';
 import IconButton from '../IconButton/IconButton';
 import { getIconButtonColor } from '../IconButton/utils';
 
-const { stateOpacity } = tokens.md.ref;
+const stateOpacity = tokens.md.sys.state.opacity;
 
 const styles = StyleSheet.create({
   square: {

src/components/__tests__/MenuItem.test.tsx

@@ -6,7 +6,7 @@ import { tokens } from '../../theme/tokens';
 import Menu from '../Menu/Menu';
 import { getMenuItemColor } from '../Menu/utils';
 
-const { stateOpacity } = tokens.md.ref;
+const stateOpacity = tokens.md.sys.state.opacity;
 
 describe('Menu Item', () => {
   it('renders menu item', () => {

src/components/__tests__/Modal.test.tsx

@@ -13,7 +13,7 @@ import { LightTheme } from '../../theme/schemes';
 import { tokens } from '../../theme/tokens';
 import Modal from '../Modal';
 
-const { scrimAlpha } = tokens.md.ref;
+const scrimAlpha = tokens.md.sys.scrim.alpha;
 
 jest.mock('react-native-safe-area-context', () => ({
   useSafeAreaInsets: () => ({ bottom: 44, left: 0, right: 0, top: 37 }),

src/components/__tests__/SegmentedButton.test.tsx

@@ -9,7 +9,7 @@ import {
   getSegmentedButtonColors,
 } from '../SegmentedButtons/utils';
 
-const { stateOpacity } = tokens.md.ref;
+const stateOpacity = tokens.md.sys.state.opacity;
 
 it('renders segmented button', () => {
   const tree = render(

src/components/__tests__/TextInput.test.tsx

@@ -16,7 +16,7 @@ import {
 } from '../TextInput/helpers';
 import TextInput, { Props } from '../TextInput/TextInput';
 
-const { stateOpacity } = tokens.md.ref;
+const stateOpacity = tokens.md.sys.state.opacity;
 
 const style = StyleSheet.create({
   inputStyle: {

src/theme/schemes/DarkTheme.tsx

@@ -1,12 +1,12 @@
 import { themeDefaults } from './base';
 import { tokens } from '../tokens';
-import { buildScheme } from '../tokens/sys/color/roles';
+import { buildScheme } from '../tokens/sys/color';
 import { defaultShapes } from '../tokens/sys/shape';
 import type { Theme } from '../types';
 
 export const DarkTheme: Theme = {
   ...themeDefaults,
   dark: true,
-  colors: buildScheme(tokens.md.ref.palette, tokens.md.ref, { mode: 'dark' }),
+  colors: buildScheme(tokens.md.ref.palette, { mode: 'dark' }),
   shapes: defaultShapes,
 };

src/theme/schemes/LightTheme.tsx

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