{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "tip", "type": "registry:item", "title": "aesthetic Tooltip", "description": "Aesthetic Tooltip primitive, v0.25.0. Installs ae-tip-positioner, ae-tip-surface, [data-ae-tip] without the full stylesheet.", "registryDependencies": [ "https://aesthetic.mistystep.io/r/aesthetic-base.json" ], "meta": { "version": "0.25.0", "tier": "primitive", "route": "tip", "classes": ["ae-tip-positioner", "ae-tip-surface"], "attributes": ["[data-ae-tip]"], "tokens": [ "--ae-surface", "--ae-wash", "--ae-ink", "--ae-ink-faint", "--ae-accent", "--ae-surface-dark", "--ae-wash-dark", "--ae-ink-dark", "--ae-ink-faint-dark", "--ae-accent-dark", "--ae-font", "--ae-font-mono", "--ae-w-regular", "--ae-ease", "--ae-quick", "--ae-ink-muted", "--ae-line", "--ae-ink-muted-dark", "--ae-line-dark", "--ae-z-tip" ], "recipes": [] }, "files": [ { "path": "registry/tip/aesthetic.tip.css", "type": "registry:file", "target": "~/aesthetic.tip.css", "content": "/* aesthetic tip v0.25.0 — generated by scripts/build-registry.mjs. */\n@import './aesthetic.base.css';\n\n:root {\n --ae-ink-muted: #737373;\n --ae-line: #e9e9e9;\n --ae-ink-muted-dark: #8f8f8f;\n --ae-line-dark: #262626;\n --ae-z-tip: 60;\n}\n\n@media (prefers-color-scheme: dark) {\n :root:not(.light):not([data-ae-mode='light']) {\n --ae-ink-muted: var(--ae-ink-muted-dark);\n --ae-line: var(--ae-line-dark);\n }\n}\n\n.light,\n[data-ae-mode='light'] {\n color-scheme: light;\n}\n\n:root.dark,\n:root[data-ae-mode='dark'] {\n color-scheme: dark;\n --ae-ink-muted: var(--ae-ink-muted-dark);\n --ae-line: var(--ae-line-dark);\n}\n\n@media (prefers-color-scheme: dark) {\n :root:not(.light):not([data-ae-mode='light']) [data-ae-tip]::after,\n :root:not(.light):not([data-ae-mode='light']) .ae-tip-surface {\n background: var(--ae-wash);\n }\n}\n\n[data-ae-tip] {\nposition: relative;\n}\n\n[data-ae-tip]::after {\ncontent: attr(data-ae-tip);\n position: absolute;\n bottom: calc(100% + 0.6em);\n left: 50%;\n transform: translateX(-50%);\n background: var(--ae-surface);\n color: var(--ae-ink-muted);\n border: 1px solid var(--ae-line);\n font-family: var(--ae-font);\n font-size: 13px;\n font-weight: var(--ae-w-regular);\n letter-spacing: normal;\n line-height: 1.5;\n padding: 0.25em 0.7em;\n white-space: nowrap;\n pointer-events: none;\n opacity: 0;\n z-index: var(--ae-z-tip);\n transition: opacity var(--ae-quick) var(--ae-ease);\n}\n\n[data-ae-tip]:hover::after {\nopacity: 1;\n transition-delay: 450ms;\n}\n\n[data-ae-tip]:focus-visible::after {\nopacity: 1;\n}\n\n.dark [data-ae-tip]::after,\n[data-ae-mode='dark'] [data-ae-tip]::after {\nbackground: var(--ae-wash);\n}\n\n.ae-tip-positioner {\nz-index: var(--ae-z-tip);\n}\n\n.ae-tip-surface {\nz-index: var(--ae-z-tip);\n background: var(--ae-surface);\n color: var(--ae-ink-muted);\n border: 1px solid var(--ae-line);\n font-family: var(--ae-font);\n font-size: 13px;\n font-weight: var(--ae-w-regular);\n letter-spacing: normal;\n line-height: 1.5;\n padding: 0.25em 0.7em;\n white-space: nowrap;\n pointer-events: none;\n}\n\n.ae-tip-surface[data-open] {\nanimation: ae-enter var(--ae-quick) var(--ae-ease) both;\n}\n\n.dark .ae-tip-surface,\n[data-ae-mode='dark'] .ae-tip-surface {\nbackground: var(--ae-wash);\n}\n\n@keyframes ae-enter {\nfrom {\n opacity: 0;\n transform: translateY(6px);\n }\n}\n" } ] }