Targets

Targets are the dimensions every component must consciously handle. Kevlar detects them. The component reacts. You cannot ship a Kevlar app that ignores TV users, or color blind users, or slow networks, or muted phones.

There are 17 required targets and 2 special targets. Every component file imports all 17 required targets and uses them inline where they matter.

import {
  // Platform (6)
  isSmallMobile, isMobile, isTablet, isDesktop, isWidescreen, isTV,
  // Network (3)
  isFast, isSlow, isOffline,
  // Accessibility (4)
  prefersReducedMotion, prefersHighContrast, isKeyboardOnly, isColorBlind,
  // Input Method (3)
  isTouchDevice, isMouseDevice, isDpadDevice,
  // System (1)
  isSilentMode,
  // Special (2)
  isLowBattery, getUserSegment,
} from '@unlikefraction/kevlar/primitives';

Required Targets (17)

Platform (6)

Network (3)

Accessibility (4)

Input Method (3)

System (1)

Special Targets (2)

Available but not mandatory per component. For specific situations.

How Targets Are Used

No override objects. No platform blocks. Just the primitives called inline where they matter.

TV shadow example

The hover visual for a button checks isTV() and adjusts shadow and scale:

hover: {
  visual: (ctx) => ({
    cursor: 'pointer',
    opacity: 1,
    shadow: isTV() ? config.shadows.high : config.shadows.low,
    translateY: isTV() ? 0 : -1,
    scale: isTV() ? config.tv.focusScale : 1,
  }),
},

On TV, the element gets a larger shadow and scales up instead of translating. On everything else, it gets a subtle lift. The target is called at the point of use. The config value is referenced by name.

Reduced motion example

The enter animation checks prefersReducedMotion() and user segment:

enter: () => {
  if (prefersReducedMotion()) return config.animationPresets.none;
  if (getUserSegment() === 'power') return config.animationPresets.instant;
  return config.animationPresets.fadeIn;
},

Users who prefer reduced motion get no animation. Power users get instant transitions. Everyone else gets a fade. Three lines. No abstraction between the question and the answer.

Network handlers example

The network block forces a decision for each connection state:

onFast:    (ctx) => {},
onSlow:    (ctx) => { ctx.setState('loading'); },
onOffline: (ctx) => { ctx.setState('disabled'); ctx.setText('You are offline'); },

On a fast connection, proceed normally (empty function is a conscious decision to do nothing). On slow, immediately show the loading state. Offline, disable the element and tell the user why.

Focus ring with high contrast and TV

The focused state visual combines multiple targets:

focused: {
  visual: (ctx) => ({
    cursor: 'pointer',
    opacity: 1,
    outline: {
      width: isTV()
        ? config.tv.focusRing.width
        : prefersHighContrast()
          ? 4
          : config.focusRing.width,
      color: config.focusRing.color,
      offset: isTV() ? config.tv.focusRing.offset : config.focusRing.offset,
      style: config.focusRing.style,
    },
    ...(prefersHighContrast() && {
      borderWidth: 3, borderStyle: 'solid', borderColor: config.colors.focus,
    }),
  }),
},

TV gets the wide 8px focus ring. High contrast users get a 4px ring plus a solid border. Everyone else gets the standard 3px ring. All from the same function, all inline.

Silent mode example

The pressed state audio checks isSilentMode():

pressed: {
  audio: (ctx) => {
    if (!isSilentMode()) playSound(config.sounds.click);
  },
  haptic: (ctx) => { fireHaptic(config.haptics.tap); },
},

When the phone is muted, the click sound does not play but the haptic still fires (unless the sensory budget is exhausted or the battery is low). The tech lead made this decision once in the base. Every interactive component inherits it.

Keyboard-only focus ring

The focus ring visibility adapts to input method:

keyboard: {
  focusRing: () => ({
    visible: isKeyboardOnly() ? 'always' : 'keyboard-only',
    ...config.focusRing,
  }),
},

Mouse users only see the focus ring when they start tabbing. Keyboard-only users see it always. One line. One target. One decision.