@antfu/design 0.1.0

package/styles/animations.css

@@ -0,0 +1,47 @@
+/** Spinner keyframes + the dark-mode view-transition circular reveal. */
+
+@keyframes af-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes af-spin-reverse {
+  to {
+    transform: rotate(-360deg);
+  }
+}
+
+.af-spin {
+  animation: af-spin 1s linear infinite;
+}
+
+/* View Transitions for the animated dark toggle (see ActionDarkToggle). */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+::view-transition-old(root) {
+  z-index: 1;
+}
+
+::view-transition-new(root) {
+  z-index: 9999;
+}
+
+html.dark::view-transition-old(root) {
+  z-index: 9999;
+}
+
+html.dark::view-transition-new(root) {
+  z-index: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation: none !important;
+  }
+}

package/styles/base.css

@@ -0,0 +1,31 @@
+/**
+ * Root surface + a small set of CSS custom properties mirroring the token
+ * defaults. The overlay-engine override files reference these vars, so they
+ * recolor with light/dark automatically and work on plain `import` (without
+ * needing UnoCSS to process them).
+ */
+
+:root {
+  --af-bg-base: #ffffff;
+  --af-bg-secondary: #f5f5f5;
+  --af-color-base: #262626; /* neutral-800 */
+  --af-color-muted: #525252; /* neutral-600 */
+  --af-border-base: rgba(136, 136, 136, 0.13); /* ~#8882 */
+  --af-border-mute: rgba(136, 136, 136, 0.07); /* ~#8881 */
+  --af-tooltip-bg: rgba(255, 255, 255, 0.75);
+  color-scheme: light;
+}
+
+html.dark {
+  --af-bg-base: #111111;
+  --af-bg-secondary: #1a1a1a;
+  --af-color-base: #e5e5e5; /* neutral-200 */
+  --af-color-muted: #a3a3a3; /* neutral-400 */
+  --af-tooltip-bg: rgba(17, 17, 17, 0.75);
+  color-scheme: dark;
+}
+
+html {
+  background-color: var(--af-bg-base);
+  color: var(--af-color-base);
+}

package/styles/floating-vue.css

@@ -0,0 +1,28 @@
+/**
+ * Recolor floating-vue tooltips/dropdowns to the design tokens. Driven by the
+ * `--af-*` custom properties from `base.css` so they follow light/dark.
+ */
+
+.v-popper__popper .v-popper__inner {
+  background: var(--af-tooltip-bg);
+  color: var(--af-color-base);
+  border: 1px solid var(--af-border-base);
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  backdrop-filter: blur(8px);
+  padding: 4px 8px;
+  font-size: 12px;
+}
+
+.v-popper__popper .v-popper__arrow-outer {
+  border-color: var(--af-border-base);
+}
+
+.v-popper__popper .v-popper__arrow-inner {
+  border-color: var(--af-tooltip-bg);
+  visibility: visible;
+}
+
+.v-popper--theme-dropdown .v-popper__inner {
+  padding: 4px;
+}

package/styles/index.css

@@ -0,0 +1,7 @@
+/* All design-system styles. Cherry-pick individual files instead if preferred. */
+@import './base.css';
+@import './scrollbar.css';
+@import './animations.css';
+@import './reka-ui.css';
+@import './floating-vue.css';
+@import './splitpanes.css';

package/styles/reka-ui.css

@@ -0,0 +1,112 @@
+/**
+ * reka-ui ships headless (unstyled) — most styling lives on the components'
+ * own token classes. This file carries only the shared niceties: open/close
+ * transitions for overlays, and locking background scroll behind modals.
+ */
+
+[data-reka-popper-content-wrapper] {
+  z-index: 70;
+}
+
+/*
+ * Enter/exit animations. reka keeps the element mounted until a CSS *animation*
+ * finishes (its Presence watches `animation-name`), so these use `@keyframes`
+ * rather than transitions — otherwise the close (exit) frame never plays.
+ */
+
+/* Backdrops + simple poppers (dropdowns): fade. */
+[data-af-animate][data-state='open'] {
+  animation: af-fade-in 0.15s ease both;
+}
+[data-af-animate][data-state='closed'] {
+  animation: af-fade-out 0.15s ease both;
+}
+
+/* Modal content: fade + scale, keeping the translate(-50%, -50%) centering. */
+[data-af-modal][data-state='open'] {
+  animation: af-modal-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+[data-af-modal][data-state='closed'] {
+  animation: af-modal-out 0.15s ease both;
+}
+
+/* Drawer content: slide from its edge; reverse on close. */
+[data-af-drawer] {
+  animation-duration: 0.22s;
+  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+  animation-fill-mode: both;
+}
+[data-af-drawer][data-side='right'] {
+  animation-name: af-slide-right;
+}
+[data-af-drawer][data-side='left'] {
+  animation-name: af-slide-left;
+}
+[data-af-drawer][data-side='top'] {
+  animation-name: af-slide-top;
+}
+[data-af-drawer][data-side='bottom'] {
+  animation-name: af-slide-bottom;
+}
+[data-af-drawer][data-state='closed'] {
+  animation-direction: reverse;
+}
+
+@keyframes af-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes af-fade-out {
+  to {
+    opacity: 0;
+  }
+}
+@keyframes af-modal-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+@keyframes af-modal-out {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.96);
+  }
+}
+@keyframes af-slide-right {
+  from {
+    transform: translateX(100%);
+  }
+}
+@keyframes af-slide-left {
+  from {
+    transform: translateX(-100%);
+  }
+}
+@keyframes af-slide-top {
+  from {
+    transform: translateY(-100%);
+  }
+}
+@keyframes af-slide-bottom {
+  from {
+    transform: translateY(100%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-af-animate],
+  [data-af-modal],
+  [data-af-drawer] {
+    animation: none !important;
+  }
+}

package/styles/scrollbar.css

@@ -0,0 +1,24 @@
+/** Thin, unobtrusive scrollbar that follows the theme. */
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(136, 136, 136, 0.35) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: rgba(136, 136, 136, 0.3);
+  border-radius: 3px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: rgba(136, 136, 136, 0.5);
+}

package/styles/splitpanes.css

@@ -0,0 +1,61 @@
+/**
+ * Splitpanes — base layout (so the `<SplitPane>` component works without
+ * importing the dependency's CSS) plus theming via the design tokens.
+ */
+
+.splitpanes {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+.splitpanes--vertical {
+  flex-direction: row;
+}
+.splitpanes--horizontal {
+  flex-direction: column;
+}
+.splitpanes--dragging * {
+  user-select: none;
+}
+.splitpanes__pane {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.splitpanes--vertical > .splitpanes__pane {
+  transition: width 0.2s ease-out;
+}
+.splitpanes--horizontal > .splitpanes__pane {
+  transition: height 0.2s ease-out;
+}
+.splitpanes--dragging > .splitpanes__pane {
+  transition: none;
+  pointer-events: none;
+}
+
+/* Splitter — recolored to the design tokens. */
+.splitpanes__splitter {
+  position: relative;
+  touch-action: none;
+  background-color: var(--af-border-base);
+  transition: background-color 0.2s;
+}
+.splitpanes__splitter:hover {
+  background-color: rgba(136, 136, 136, 0.4);
+}
+.splitpanes--vertical > .splitpanes__splitter {
+  min-width: 1px;
+  cursor: col-resize;
+}
+.splitpanes--horizontal > .splitpanes__splitter {
+  min-height: 1px;
+  cursor: row-resize;
+}
+
+/* Widen the invisible hit area so the 1px splitter is easy to grab. */
+.splitpanes__splitter::before {
+  content: '';
+  position: absolute;
+  inset: -4px;
+  z-index: 1;
+}

package/unocss/colors.ts

@@ -0,0 +1,127 @@
+/**
+ * Color ramps for the design system.
+ *
+ * Defaults are hand-tuned for AA contrast in both light and dark mode (the
+ * a11y contrast check guards this). A `generateColorRamp` helper produces a
+ * usable ramp from a single hex when a consumer overrides `primary` with a
+ * plain string rather than a full scale object — stepped in OKLCH via colorjs.io.
+ */
+import Color from 'colorjs.io'
+
+export type ColorRamp = Record<string | number, string>
+
+/** Default antfu green — the brand color, used as `primary` unless overridden. */
+export const primaryGreen: ColorRamp = {
+  50: '#f4f9f1',
+  100: '#e6f2e0',
+  200: '#cde4c2',
+  300: '#a8cf96',
+  400: '#7eb267',
+  500: '#5b9544',
+  600: '#49833e',
+  700: '#3b6832',
+  800: '#31532b',
+  900: '#2a4526',
+  950: '#132611',
+  DEFAULT: '#49833e',
+}
+
+/**
+ * Semantic ramps sourced from `eslint/config-inspector` (the most complete
+ * reference set among the source projects). Added under semantic names so they
+ * never clobber the base preset's built-in palette (`amber`, `green`, `red`).
+ */
+export const warning: ColorRamp = {
+  50: '#fffaeb',
+  100: '#fef0c7',
+  200: '#fedf89',
+  300: '#fec84b',
+  400: '#fdb022',
+  500: '#f79009',
+  600: '#dc6803',
+  700: '#b54708',
+  800: '#93370d',
+  900: '#7a2e0e',
+  950: '#4e1d09',
+  DEFAULT: '#f79009',
+}
+
+export const success: ColorRamp = {
+  50: '#ecfdf3',
+  100: '#d1fadf',
+  200: '#a6f4c5',
+  300: '#6ce9a6',
+  400: '#32d583',
+  500: '#12b76a',
+  600: '#039855',
+  700: '#027a48',
+  800: '#05603a',
+  900: '#054f31',
+  950: '#03281a',
+  DEFAULT: '#12b76a',
+}
+
+export const error: ColorRamp = {
+  50: '#fff1f3',
+  100: '#ffe4e8',
+  200: '#fecdd6',
+  300: '#fea3b4',
+  400: '#fd6f8e',
+  500: '#f63d68',
+  600: '#e31b54',
+  700: '#c01048',
+  800: '#a11043',
+  900: '#89123e',
+  950: '#510322',
+  DEFAULT: '#f63d68',
+}
+
+const RAMP_STOPS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const
+/** Target OKLCH lightness (0–1) per stop. */
+const RAMP_LIGHTNESS = [0.97, 0.94, 0.87, 0.78, 0.68, 0.58, 0.50, 0.42, 0.35, 0.28, 0.18] as const
+
+/**
+ * Generate an 11-stop color ramp (`50`..`950` + `DEFAULT`) from a single color,
+ * preserving its OKLCH hue while stepping lightness across fixed stops (chroma is
+ * tapered toward the extremes so tints/shades stay clean). Stepped in OKLCH via
+ * colorjs.io for perceptually even results. Used when `primary` is a string.
+ *
+ * @param input - The base color as any CSS color string; becomes the ramp's `DEFAULT`.
+ * @returns A ramp keyed `50`–`950` plus `DEFAULT`.
+ *
+ * @example
+ * generateColorRamp('#0969da')
+ * // → { DEFAULT: '#0969da', 50: '#…', … , 950: '#…' }
+ */
+export function generateColorRamp(input: string): ColorRamp {
+  const [, chroma, rawHue] = new Color(input).to('oklch').coords
+  const hue = Number.isFinite(rawHue) ? rawHue : 0
+  const ramp: ColorRamp = { DEFAULT: input }
+  RAMP_STOPS.forEach((stop, i) => {
+    const l = RAMP_LIGHTNESS[i]
+    // Taper chroma at the lightest/darkest stops so they don't look muddy.
+    const c = (chroma || 0) * (l > 0.9 || l < 0.25 ? 0.6 : 1)
+    ramp[stop] = new Color('oklch', [l, c, hue]).to('srgb').toGamut({ space: 'srgb' }).toString({ format: 'hex' })
+  })
+  return ramp
+}
+
+/**
+ * Normalize the `primary` option into a full color ramp: a string is expanded
+ * via {@link generateColorRamp}, a ramp object passes through, and `undefined`
+ * falls back to the default antfu green.
+ *
+ * @param primary - A hex string, a full ramp, or `undefined`.
+ * @returns The resolved {@link ColorRamp}.
+ *
+ * @example
+ * resolvePrimary() // → primaryGreen
+ * resolvePrimary('#0969da') // → generated ramp with DEFAULT '#0969da'
+ */
+export function resolvePrimary(primary?: string | ColorRamp): ColorRamp {
+  if (!primary)
+    return primaryGreen
+  if (typeof primary === 'string')
+    return generateColorRamp(primary)
+  return primary
+}

package/unocss/index.ts

@@ -0,0 +1,99 @@
+import type { Preset, UserShortcuts } from '@unocss/core'
+import type { PresetAnthonyDesignOptions } from './options'
+import { definePreset, mergeDeep } from '@unocss/core'
+import { error, resolvePrimary, success, warning } from './colors'
+import { DEFAULT_DARK_BG, DEFAULT_FONTS } from './options'
+import { patternRules } from './patterns'
+import { buildRules } from './rules'
+import { severityShortcuts } from './severity'
+import { buildShortcuts } from './shortcuts'
+
+function assertOptions(options: PresetAnthonyDesignOptions): void {
+  const { primary, darkBackground } = options
+  if (primary != null && typeof primary !== 'string' && typeof primary !== 'object')
+    throw new TypeError(`[@antfu/design] \`primary\` must be a hex string or a color scale object, got ${typeof primary}.`)
+  if (darkBackground != null && typeof darkBackground !== 'string')
+    throw new TypeError(`[@antfu/design] \`darkBackground\` must be a CSS color string, got ${typeof darkBackground}.`)
+}
+
+/**
+ * `presetAnthonyDesign` — the **single** antfu design preset.
+ *
+ * One preset contributes the whole design layer: the theme scales (a `primary`
+ * ramp + `warning`/`success`/`error` + fonts), the semantic `*-base` shortcuts,
+ * the dynamic `badge-color-*` / `bg-glass` shortcuts, and the `color-scale-*`
+ * severity layer. It bundles **no** base preset, icons, web-fonts or reset — the
+ * consumer composes those themselves. The semantic layer is base-agnostic, so it
+ * resolves under Wind4, Wind3 or Mini.
+ *
+ * @param options - Theme + dark-surface options (see {@link PresetAnthonyDesignOptions}).
+ * @returns A single UnoCSS `Preset`.
+ *
+ * @example
+ * ```ts
+ * import { presetAnthonyDesign } from '@antfu/design/unocss'
+ * import { defineConfig, presetIcons, presetWebFonts, presetWind4 } from 'unocss'
+ *
+ * export default defineConfig({
+ *   presets: [
+ *     presetAnthonyDesign({ primary: '#49833E' }),
+ *     presetWind4(), // a base preset is required — bring your own
+ *     presetIcons(),
+ *     presetWebFonts({ fonts: { sans: 'DM Sans', mono: 'DM Mono' } }),
+ *   ],
+ * })
+ * ```
+ */
+export const presetAnthonyDesign = definePreset((options: PresetAnthonyDesignOptions = {}): Preset => {
+  assertOptions(options)
+
+  const darkBackground = options.darkBackground ?? DEFAULT_DARK_BG
+  const primary = resolvePrimary(options.primary)
+  const fonts = { ...DEFAULT_FONTS, ...options.fonts }
+
+  const themeOverrides = mergeDeep(
+    {
+      colors: { primary, warning, success, error },
+      fontFamily: { sans: fonts.sans, mono: fonts.mono },
+    } as Record<string, any>,
+    (options.theme ?? {}) as Record<string, any>,
+  )
+
+  // Appended last so consumers can override the built-in layer precisely.
+  const extend = options.extendShortcuts == null
+    ? []
+    : Array.isArray(options.extendShortcuts)
+      ? options.extendShortcuts
+      : [options.extendShortcuts]
+
+  const shortcuts: UserShortcuts = [
+    ...buildShortcuts(darkBackground),
+    ...buildRules(darkBackground),
+    ...severityShortcuts,
+    ...extend,
+  ]
+
+  return {
+    name: '@antfu/design',
+    extendTheme: theme => mergeDeep(theme as any, themeOverrides as any),
+    shortcuts,
+    rules: patternRules,
+  }
+})
+
+export default presetAnthonyDesign
+
+export {
+  type ColorRamp,
+  error as errorRamp,
+  generateColorRamp,
+  primaryGreen,
+  resolvePrimary,
+  success as successRamp,
+  warning as warningRamp,
+} from './colors'
+
+export type {
+  PresetAnthonyDesignOptions,
+  PresetAnthonyFonts,
+} from './options'

package/unocss/options.ts

@@ -0,0 +1,31 @@
+import type { UserShortcuts } from '@unocss/core'
+import type { ColorRamp } from './colors'
+
+/** Default near-black used for dark surfaces. Overridable via `darkBackground`. */
+export const DEFAULT_DARK_BG = '#111'
+
+export const DEFAULT_FONTS = {
+  sans: 'DM Sans',
+  mono: 'DM Mono',
+} as const
+
+export interface PresetAnthonyFonts {
+  sans?: string
+  mono?: string
+}
+
+export interface PresetAnthonyDesignOptions {
+  /**
+   * Primary brand color — a single hex (a ramp is generated) or a full
+   * `{ 50..950, DEFAULT }` scale object. Defaults to the antfu green.
+   */
+  primary?: string | ColorRamp
+  /** Near-black for dark surfaces (`bg-base`, `bg-tooltip`, `bg-glass`, …). Default `#111`. */
+  darkBackground?: string
+  /** Font families. Defaults to DM Sans / DM Mono. The web fonts are the consumer's to load. */
+  fonts?: PresetAnthonyFonts
+  /** Extra theme fields, deep-merged into the generated theme. */
+  theme?: Record<string, any>
+  /** Extra shortcuts appended after the built-in layer (so they can override it). */
+  extendShortcuts?: UserShortcuts
+}

package/unocss/patterns.ts

@@ -0,0 +1,38 @@
+import type { Rule } from '@unocss/core'
+
+const DOT_COLOR = 'rgba(136, 136, 136, 0.25)'
+const GRID_COLOR = 'rgba(136, 136, 136, 0.15)'
+
+/**
+ * Background-pattern rules with a variable cell size in px:
+ *
+ * - `bg-dots` / `bg-dots-<n>` — a radial dot grid (default 16px).
+ * - `bg-grid` / `bg-grid-<n>` — crosshatch grid lines (default 16px).
+ *
+ * Real UnoCSS rules (they emit `background-image` + `background-size`), so the
+ * size is dynamic — `bg-dots-24`, `bg-grid-32`, … — rather than a fixed class.
+ * The dot/line color is a theme-neutral gray that reads in light and dark.
+ *
+ * @example
+ * // bg-dots      → 16px dot grid
+ * // bg-dots-24   → 24px dot grid
+ * // bg-grid-32   → 32px grid lines
+ */
+export const patternRules: Rule[] = [
+  [
+    /^bg-dots(?:-(\d+))?$/,
+    ([, size = '16']) => ({
+      'background-image': `radial-gradient(${DOT_COLOR} 1px, transparent 1px)`,
+      'background-size': `${size}px ${size}px`,
+    }),
+    { layer: 'default' },
+  ],
+  [
+    /^bg-grid(?:-(\d+))?$/,
+    ([, size = '16']) => ({
+      'background-image': `linear-gradient(to right, ${GRID_COLOR} 1px, transparent 1px), linear-gradient(to bottom, ${GRID_COLOR} 1px, transparent 1px)`,
+      'background-size': `${size}px ${size}px`,
+    }),
+    { layer: 'default' },
+  ],
+]

package/unocss/rules.ts

@@ -0,0 +1,26 @@
+import type { DynamicShortcut, StaticShortcutMap } from '@unocss/core'
+
+/**
+ * Dynamic, name-driven design shortcuts.
+ *
+ * In UnoCSS terms these expand to *other utility classes*, so they are dynamic
+ * shortcuts rather than raw-CSS rules — but they are the "dynamic rules" the
+ * design system exposes: `badge-color-<name>` and `bg-glass(:<n>)`.
+ */
+export function buildRules(db: string): (StaticShortcutMap | DynamicShortcut)[] {
+  return [
+    // `badge-color-green`, `badge-color-blue`, … — a chip tinted by color name,
+    // dark-aware. The deterministic formula shared across the source projects.
+    [
+      /^badge-color-(\w+)$/,
+      ([, color]) => `bg-${color}-400/20 dark:bg-${color}-400/10 text-${color}-700 dark:text-${color}-300 border border-${color}-600/15 dark:border-${color}-300/15`,
+      { layer: 'shortcuts' },
+    ],
+    // `bg-glass` / `bg-glass:75` — translucent surface + backdrop blur.
+    [
+      /^bg-glass(?::(\d+))?$/,
+      ([, opacity = '50']) => `bg-white/${opacity} dark:bg-${db}/${opacity} backdrop-blur-7`,
+      { layer: 'shortcuts' },
+    ],
+  ]
+}

package/unocss/severity.ts

@@ -0,0 +1,16 @@
+import type { DynamicShortcut, StaticShortcutMap } from '@unocss/core'
+
+/**
+ * Severity / freshness color scale, dark-aware (gray → lime → amber → orange →
+ * red). Unifies the duplicated severity/age/staleness ramps across the source
+ * projects (`color-scale-*`).
+ */
+export const severityShortcuts: (StaticShortcutMap | DynamicShortcut)[] = [
+  {
+    'color-scale-neutral': 'text-gray-700 dark:text-gray-300',
+    'color-scale-low': 'text-lime-700 dark:text-lime-300 dark:saturate-75',
+    'color-scale-medium': 'text-amber-700 dark:text-amber-300 dark:saturate-90',
+    'color-scale-high': 'text-orange-700 dark:text-orange-300',
+    'color-scale-critical': 'text-red-700 dark:text-red-300',
+  },
+]