Skip to content

feat: add native ring utilities - #13

Draft
e-simpson wants to merge 2 commits into
mgcrea:mainfrom
e-simpson:codex/ring-utilities
Draft

feat: add native ring utilities#13
e-simpson wants to merge 2 commits into
mgcrea:mainfrom
e-simpson:codex/ring-utilities

Conversation

@e-simpson

@e-simpson e-simpson commented Jul 28, 2026

Copy link
Copy Markdown
Contributor

Summary

This PR adds browser-style native focus-ring utilities backed by React Native outline styles.

Behavior

  • ring adds a 3-unit solid blue-500/50 browser-style ring.
  • ring-{number} and ring-[{pixels}] set dynamic widths and inherit the same default blue when no explicit color is present.
  • Explicit preset, custom, arbitrary, and opacity-modified ring colors override the default regardless of class order.
  • ring-offset-* maps to native outlineOffset.
<View className="ring-2" />                    // default browser blue
<View className="ring-2 ring-red-500" />       // explicit red
<View className="dark:ring-white light:ring-black ring-2" />

Intentional Tailwind divergence

Tailwind CSS v4 implements rings with box shadows and defaults bare ring to 1px/currentColor. This package feature intentionally implements the requested browser-style focus treatment instead:

  • native outlines are non-layout-shifting and match focus-ring semantics;
  • the default remains the familiar blue browser treatment;
  • rings and outlines share the same React Native properties, so they cannot render as two independent effects;
  • inset rings and ring-offset colors have no direct outline equivalent and are not supported.

Validation

  • bun run spec -- src/parser/rings.test.ts — 10 passed
  • bun run check
  • bun run format:check

@e-simpson
e-simpson force-pushed the codex/ring-utilities branch from ed38d0a to 46fce79 Compare July 28, 2026 02:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant