@ryanhelsing/ry-ui/dist/themes/antigravity.css

Framework-agnostic, Light DOM web components. CSS is the source of truth.

/**
 * ry-ui Antigravity Theme
 *
 * Rework of Google Antigravity's visual language.
 * Clean, corporate, with large radii and subtle borders.
 * Dark values auto-generated by darkify, then hand-tuned.
 */

[data-ry-theme="antigravity"] {
  /* Typography */
  --ry-font-sans: "Google Sans Flex", system-ui, -apple-system, sans-serif;

  /* Primary — dark charcoal light, light grey dark */
  --ry-color-primary: light-dark(#121317, #e8e8ec);
  --ry-color-primary-hover: light-dark(#2F3034, #d0d0d6);
  --ry-color-primary-active: light-dark(#45474D, #b8b8c0);

  /* Secondary — subtle grey tonal */
  --ry-color-secondary: light-dark(rgba(183, 191, 217, 0.1), rgba(120, 128, 160, 0.15));
  --ry-color-secondary-hover: light-dark(#F0F1F5, #2a2a32);
  --ry-color-secondary-active: light-dark(#E6EAF0, #333340);

  /* Text */
  --ry-color-text: light-dark(#121317, #e0e1e6);
  --ry-color-text-muted: light-dark(#45474D, #9a9ca3);
  --ry-color-text-inverse: light-dark(#FFFFFF, #121317);

  /* Background */
  --ry-color-bg: light-dark(#FFFFFF, #121317);
  --ry-color-bg-subtle: light-dark(#F8F9FC, #1a1a22);
  --ry-color-bg-muted: light-dark(#EFF2F7, #222230);

  /* Border — very subtle */
  --ry-color-border: light-dark(rgba(33, 34, 38, 0.06), rgba(220, 222, 228, 0.08));
  --ry-color-border-strong: light-dark(rgba(33, 34, 38, 0.12), rgba(220, 222, 228, 0.15));

  /* Overlay */
  --ry-color-overlay: light-dark(rgba(255, 255, 255, 0.95), rgba(18, 19, 23, 0.95));
  --ry-color-hover-overlay: light-dark(rgba(33, 34, 38, 0.04), rgba(220, 222, 228, 0.06));

  /* Radius — Antigravity uses large, pill-like radii */
  --ry-radius-sm: 0.5rem;
  --ry-radius-md: 1rem;
  --ry-radius-lg: 1.5rem;
  --ry-radius-xl: 2rem;
  --ry-radius-2xl: 2rem;

  /* Shadows — minimal */
  --ry-shadow-sm: none;
  --ry-shadow-md: none;
  --ry-shadow-lg: none;
  --ry-shadow-xl: none;

  /* Focus */
  --ry-focus-ring: light-dark(0 0 0 3px rgba(18, 19, 23, 0.2), 0 0 0 3px rgba(200, 200, 210, 0.3));
}