peter
c91caffa5e
Replace ~48 magic z-index values (z-10..z-[9999] + 2 inline zIndex) with named tailwind zIndex tokens (base/menu/chrome/paneltab/panel/rail/overlay/popover/ tooltip/tuner). Values are UNCHANGED — a rename, not a renumber — so layering is identical; the names give one source of truth for the stack.
48 lines
1.9 KiB
JavaScript
48 lines
1.9 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ["./index.html", "./src/**/*.{ts,tsx}"],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
bg: "var(--bg)",
|
|
surface: "var(--surface)",
|
|
card: "var(--card)",
|
|
border: "var(--border)",
|
|
fg: "var(--fg)",
|
|
muted: "var(--muted)",
|
|
accent: "var(--accent)",
|
|
"accent-fg": "var(--accent-fg)",
|
|
},
|
|
fontFamily: {
|
|
sans: ["Inter", "system-ui", "-apple-system", "Segoe UI", "Roboto", "sans-serif"],
|
|
},
|
|
// Named z-index layers — the single source of truth for stacking order. Values are
|
|
// deliberately UNCHANGED from the magic numbers they replaced (this was a rename, not a
|
|
// renumber), so the visual layering is identical; the names just make the stack legible and
|
|
// give future changes one place to edit. Low → high:
|
|
// base(10) in-content decorations: sticky table head, card badges, in-flow dropdowns
|
|
// menu(20) menus/overlays sitting just over content
|
|
// chrome(30) floating chrome: the header band, back-to-top, content filter/sort menus
|
|
// paneltab / panel (34/35) the collapsed tab vs the expanded side panel (aside over tab)
|
|
// rail(40) full-height rails + docked bars: nav rail, chat dock, floating save bar
|
|
// overlay(50) full-screen modals/players, toaster, onboarding, popovers over content
|
|
// popover(60) a popover that must sit over an overlay (player scrub, tag menu) + the login gate
|
|
// tooltip(100) tooltips, above everything interactive
|
|
// tuner(9999) the dev/lab glass tuner, deliberately on top of all
|
|
zIndex: {
|
|
base: "10",
|
|
menu: "20",
|
|
chrome: "30",
|
|
paneltab: "34",
|
|
panel: "35",
|
|
rail: "40",
|
|
overlay: "50",
|
|
popover: "60",
|
|
tooltip: "100",
|
|
tuner: "9999",
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|