bvandeusenandClaude Opus 5.5
fecd030b68
release / govulncheck (push) Successful in 42s
release / web (push) Successful in 1m39s
release / go (push) Successful in 1m53s
release / integration (push) Successful in 5m37s
release / android (push) Successful in 6m54s
release / Build signed APK (releases and dev) (push) Successful in 7m27s
release / Attach APK to the Release (tag releases only) (push) Skipped
release / Build + push container image (push) Failing after 34s
release / Verify release artifacts (tag releases only) (push) Skipped
Renovate's tailwindcss bump (PR #150) plus the migration it needs: - Theme moves from tailwind.config.js into app.css as `@theme inline`, mapping the same FabledSword tokens. tailwind.config.js is gone. - PostCSS runs @tailwindcss/postcss; autoprefixer is dropped, since Tailwind 4 prefixes through Lightning CSS. - Class renames from @tailwindcss/upgrade 4.3.3, reviewed: outline-none -> outline-hidden, focus-visible:outline -> outline-solid, shadow -> shadow-sm, shadow-sm -> shadow-xs, flex-shrink-0 -> shrink-0. Bare `rounded` stays: v4 keeps it at 0.25rem, as before. - Three v3 preflight defaults kept in a base layer so nothing changes on screen: gray-200 default border colour, gray-400 placeholder text and the pointer cursor on buttons. - The unused class-based dark variant is not carried over; no template uses `dark:`. Clears the five high and two moderate npm audit findings that came in through Tailwind 3 (braces, chokidar, micromatch, fast-glob, postcss-selector-parser). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
104 lines
2.7 KiB
CSS
104 lines
2.7 KiB
CSS
@import './lib/styles/tokens.generated.css' layer(base);
|
|
|
|
@import 'tailwindcss';
|
|
|
|
/* The FabledSword tokens as Tailwind's theme. `inline` makes each utility emit
|
|
* the var(--fs-*) itself, so a theme swap that redefines the tokens reaches the
|
|
* utilities without going through a second variable. */
|
|
@theme inline {
|
|
--color-background: var(--fs-obsidian);
|
|
|
|
--color-surface: var(--fs-iron);
|
|
--color-surface-hover: var(--fs-slate);
|
|
|
|
--color-border: var(--fs-pewter);
|
|
|
|
--color-text-primary: var(--fs-parchment);
|
|
--color-text-secondary: var(--fs-vellum);
|
|
--color-text-muted: var(--fs-ash);
|
|
|
|
--color-action-primary: var(--fs-moss);
|
|
--color-action-secondary: var(--fs-bronze);
|
|
--color-action-destructive: var(--fs-oxblood);
|
|
--color-action-fg: var(--fs-on-action);
|
|
|
|
--color-accent: var(--fs-accent);
|
|
--color-accent-tint: color-mix(in srgb, var(--fs-accent) 12%, transparent);
|
|
--color-accent-fg: var(--fs-accent-fg);
|
|
|
|
--color-warning: var(--fs-warning);
|
|
--color-warning-fg: var(--fs-warning-fg);
|
|
|
|
--color-error: var(--fs-error);
|
|
--color-error-fg: var(--fs-error-fg);
|
|
|
|
--color-info: var(--fs-info);
|
|
--color-info-fg: var(--fs-info-fg);
|
|
|
|
--radius-sm: var(--fs-radius-sm);
|
|
--radius-md: var(--fs-radius-md);
|
|
--radius-lg: var(--fs-radius-lg);
|
|
--radius-xl: var(--fs-radius-xl);
|
|
|
|
--font-display: var(--fs-font-display);
|
|
--font-sans: var(--fs-font-body);
|
|
--font-mono: var(--fs-font-mono);
|
|
}
|
|
|
|
/* Tailwind 3's preflight defaults that 4 changed (#5021). Kept so the upgrade
|
|
* changes nothing on screen; each can go once the elements relying on it name
|
|
* the value themselves.
|
|
* - A border with no colour utility was gray-200; 4 makes it currentcolor.
|
|
* - Placeholder text was gray-400; 4 makes it the text colour at 50%.
|
|
* - Buttons had a pointer cursor; 4 leaves the browser default. */
|
|
@layer base {
|
|
*,
|
|
::after,
|
|
::before,
|
|
::backdrop,
|
|
::file-selector-button {
|
|
border-color: var(--color-gray-200, currentcolor);
|
|
}
|
|
|
|
input::placeholder,
|
|
textarea::placeholder {
|
|
color: var(--color-gray-400);
|
|
}
|
|
|
|
button:not(:disabled),
|
|
[role='button']:not(:disabled) {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
:root {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--fs-font-body);
|
|
}
|
|
|
|
/* Card play-overlay: positioned absolutely over the card's art square,
|
|
* fades in on hover (mouse) or stays visible (touch). Used by AlbumCard,
|
|
* ArtistCard, PlaylistCard. The `.card` class is a marker used as the
|
|
* :hover anchor; it has no styling of its own. */
|
|
.play-overlay {
|
|
background: var(--fs-accent);
|
|
color: var(--fs-parchment);
|
|
opacity: 0;
|
|
transition: opacity 150ms ease;
|
|
}
|
|
@media (hover: hover) {
|
|
.card:hover .play-overlay { opacity: 1; }
|
|
}
|
|
@media (hover: none) {
|
|
.play-overlay { opacity: 1; }
|
|
}
|