mirror of
https://github.com/raphaelsalaja/userinterface-wiki.git
synced 2026-09-14 20:06:29 +08:00
Raphael Salaja
b0c89649b1
* feat: add AnimatePresence article with interactive playground * feat: add playground * feat: ƒix basic demo * feat: ap article start * chore: cleanup * chore: pre-commit * feat: update article * refactor: improve code formatting and readability in demo and script files * refactor: enhance formatting for improved readability in slideshow demo * chore: generate open graph rather than dynamically * chore: add @clack/prompts dependency and enhance icon/image generation scripts with improved logging * refactor: generators * chore: cleanup * feat: refactor generator * feat: second draft * docs: final draft * chore: final draft again * chore: update publication date and enhance text-to-speech generator with alignment data
59 lines
1.1 KiB
CSS
59 lines
1.1 KiB
CSS
.callout {
|
|
display: grid;
|
|
gap: 8px;
|
|
padding: 12px 14px;
|
|
background: var(--gray-2);
|
|
border: 1px solid var(--gray-4);
|
|
border-radius: var(--prose-block-radius);
|
|
transition:
|
|
border-color 200ms cubic-bezier(0.215, 0.61, 0.355, 1),
|
|
background 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
}
|
|
|
|
.title {
|
|
font-size: 14px;
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--gray-12);
|
|
letter-spacing: var(--font-letter-spacing-14px);
|
|
}
|
|
|
|
.body {
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
color: var(--gray-11);
|
|
letter-spacing: var(--font-letter-spacing-14px);
|
|
}
|
|
|
|
.callout[data-variant="info"] {
|
|
background: var(--blue-2);
|
|
border-color: var(--blue-6);
|
|
|
|
.title {
|
|
color: var(--blue-10);
|
|
}
|
|
|
|
.body {
|
|
color: var(--blue-8);
|
|
}
|
|
}
|
|
|
|
.callout[data-variant="warn"] {
|
|
background: var(--amber-2);
|
|
border-color: var(--amber-6);
|
|
}
|
|
|
|
.callout[data-variant="error"] {
|
|
background: var(--red-2);
|
|
border-color: var(--red-6);
|
|
}
|
|
|
|
.callout[data-variant="success"] {
|
|
background: var(--green-2);
|
|
border-color: var(--green-6);
|
|
}
|
|
|
|
.callout[data-variant="idea"] {
|
|
background: var(--purple-2);
|
|
border-color: var(--purple-6);
|
|
}
|