# UI Token Extractor

A userscript that reads the **live, computed** DOM of whatever page
you're on and extracts design tokens — colors, typography, spacing,
effects, component styles — into an on-screen panel you can select and
copy from. No AI, no network requests, nothing sent anywhere. Inspired by
[uidrop.site](https://uidrop.site)'s extraction categories; deliberately
without its "send to Claude/ChatGPT/etc." step.

## What it captures

- **Colors** — the most-used text and background colors on the page
  (by computed value, ranked by frequency), plus any `:root` CSS custom
  properties it can read from same-origin stylesheets (the usual home
  for a site's real design tokens).
- **Typography** — distinct font families, sizes, and weights in use,
  ranked by frequency.
- **Spacing** — distinct padding and margin values in use.
- **Border radius** — distinct values in use.
- **Effects** — box-shadows, CSS gradients, and any non-default opacity
  values.
- **Components** — up to 5 examples each of buttons, inputs, cards, and
  chip/badge/tag-like elements, with their full style snapshot (colors,
  padding, radius, border, shadow, font).
- **Color scheme** — whether the page matches `prefers-color-scheme:
  dark`, and whether the body background itself reads as dark.

## How to use it

1. Install the script (see the top-level repo README).
2. On any page, click the floating 🎨 button in the bottom-right corner,
   or press **Alt+Shift+U**.
3. A panel opens with everything formatted as plain text in a read-only
   textarea. Click the text to select all of it, then copy normally
   (Ctrl/Cmd+C) — or use the **Copy all** button, which uses the
   browser's local clipboard API and never touches the network either.
4. Press **Esc**, click outside the panel, or hit **Close** to dismiss.

## Guarantees

- **No `fetch`/`XMLHttpRequest`/`WebSocket`/`sendBeacon`/`GM_xmlhttpRequest`
  anywhere in the script.** Extraction only reads `getComputedStyle()`
  and same-origin stylesheet rules already loaded by the page you're
  viewing.
- **No AI integration.** This is deliberately a strict subset of what
  uidrop.site does — the "send to an AI tool" step from the original is
  not implemented here at all.
- **`@grant none`** — the script doesn't request any special userscript-
  manager permissions.

## Known limitations

- Cross-origin stylesheets can't be read for `:root` custom properties
  (a browser security restriction, not something this script can work
  around) — the color/typography/spacing extraction from computed
  styles still works fine regardless, since that doesn't depend on
  reading stylesheet source.
- Component detection (buttons/cards/chips) uses heuristics (tag name,
  `class` name patterns, `role="button"`) — it won't catch every custom
  component naming convention, and may occasionally mis-tag something.
- Capped at scanning 4,000 elements for performance on very large pages;
  the report notes when a page was truncated.