diff --git a/.claude/references/Vagabond_-_Hero_Record_Interactive_PDF.pdf b/.claude/references/Vagabond_-_Hero_Record_Interactive_PDF.pdf new file mode 100755 index 0000000..58dd8e8 Binary files /dev/null and b/.claude/references/Vagabond_-_Hero_Record_Interactive_PDF.pdf differ diff --git a/.claude/references/Vagabond_-_Hero_Record_Print.pdf b/.claude/references/Vagabond_-_Hero_Record_Print.pdf new file mode 100755 index 0000000..7a75ce4 Binary files /dev/null and b/.claude/references/Vagabond_-_Hero_Record_Print.pdf differ diff --git a/.claude/references/Vagabond_RPG_-_Pulp_Fantasy_Core_Rulebook_Interactive_PDF.pdf b/.claude/references/Vagabond_RPG_-_Pulp_Fantasy_Core_Rulebook_Interactive_PDF.pdf new file mode 100755 index 0000000..00892d9 Binary files /dev/null and b/.claude/references/Vagabond_RPG_-_Pulp_Fantasy_Core_Rulebook_Interactive_PDF.pdf differ diff --git a/CLAUDE.md b/CLAUDE.md index 2323f08..a562fd3 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -118,6 +118,10 @@ cd ~/.claude/skills/notediscovery && python client.py search "keyword" Original PDF at: `/mnt/NV2/Development/claude-home/gaming/Vagabond_RPG_-_Pulp_Fantasy_Core_Rulebook_Interactive_PDF.pdf` Character sheet reference: `/mnt/NV2/Development/claude-home/gaming/Vagabond_-_Hero_Record_Interactive_PDF.pdf` +## Reference Project Documentation + +The D&D 5e Foundry system is very well documented here: https://deepwiki.com/foundryvtt/dnd5e/1-dnd5e-system-overview + ## Project Roadmap See `PROJECT_ROADMAP.json` for complete task breakdown with dependencies. diff --git a/PROJECT_ROADMAP.json b/PROJECT_ROADMAP.json index 5726e7d..3cf42a8 100644 --- a/PROJECT_ROADMAP.json +++ b/PROJECT_ROADMAP.json @@ -680,28 +680,31 @@ "id": "5.6", "name": "Style Item sheets", "description": "Consistent look across all item types, clear form layouts", - "completed": false, + "completed": true, "tested": false, "priority": "medium", - "dependencies": ["5.1", "5.2", "5.3", "4.1"] + "dependencies": ["5.1", "5.2", "5.3", "4.1"], + "notes": "Styled all 8 item types with: header (image with hover effect, styled name input, color-coded type badges), tab navigation, form inputs (transitions, focus states, disabled states), fieldsets, properties grids, type-specific sections (traits, prerequisites, progression tables, features, relic sections, spell effects). Added .hidden utility for tab switching, custom scrollbar, flexbox layout for proper scrolling. ALSO IMPLEMENTED: Light/Dark theme system with CSS custom properties - registered themes in system.json, created _theme-variables.scss with light (parchment) and dark color palettes, converted all SCSS color variables to CSS custom properties across base, mixins, components, and sheet styles." }, { "id": "5.7", "name": "Style roll dialogs", "description": "Favor/Hinder toggles, modifier inputs, clear roll button", - "completed": false, + "completed": true, "tested": false, "priority": "medium", - "dependencies": ["5.1", "5.2"] + "dependencies": ["5.1", "5.2"], + "notes": "Comprehensive styling in _roll-dialog.scss (950 lines): ApplicationV2 dialogs with themed backgrounds, skill/weapon/save/spell selections, info panels with difficulty/crit display, favor/hinder toggles with active states, damage preview, mana display for spells, focus warnings, legacy dialog support, Favor/Hinder Debug Panel." }, { "id": "5.8", "name": "Style chat cards", "description": "Roll results, spell casts, attack outcomes in themed chat messages", - "completed": false, + "completed": true, "tested": false, "priority": "medium", - "dependencies": ["5.1", "5.2"] + "dependencies": ["5.1", "5.2"], + "notes": "Comprehensive styling in _chat-cards.scss (577 lines): Card headers with icons and badges, roll results with success/failure/critical/fumble states, roll breakdown display, damage sections with critical highlighting, weapon properties, spell cards with mana cost and focus indicator, animations for crits and fumbles." }, { "id": "5.9", @@ -711,6 +714,26 @@ "tested": false, "priority": "high", "dependencies": ["5.4", "5.5", "5.6"] + }, + { + "id": "5.10", + "name": "Investigate per-sheet theming in Foundry v13", + "description": "Per-sheet theme selection via Configure Sheet dialog doesn't work - Foundry v13 shows theme options but doesn't store selection in document flags or apply theme classes to ApplicationV2 sheets. Infrastructure exists (CSS variables, _applyThemeClass JS), need to find correct Foundry API for per-sheet theme storage. Global theme switching works via Settings > Color Scheme.", + "completed": false, + "tested": false, + "priority": "low", + "dependencies": ["5.6"], + "notes": "CSS infrastructure complete in _theme-variables.scss. JS _applyThemeClass() in base-actor-sheet.mjs and base-item-sheet.mjs applies theme class based on settings. Current workaround: use global Foundry color scheme (Settings > Configure Settings > Color Scheme > Applications). Per-sheet theme dropdown in Configure Sheet appears but selection not persisted to document.flags.core.sheetTheme." + }, + { + "id": "5.11", + "name": "Add resizable editor containers", + "description": "Allow users to drag-resize ProseMirror editor text boxes on item sheets for viewing/editing longer content. CSS resize:vertical not working with Foundry's prose-mirror element structure.", + "completed": false, + "tested": false, + "priority": "low", + "dependencies": ["5.6"], + "notes": "Editors functional with prose-mirror element in v13 ApplicationV2. Resize handle not appearing despite CSS - may need JavaScript-based resize or different approach. Foundry's internal .editor-container conflicts with custom wrapper naming." } ] }, diff --git a/lang/en.json b/lang/en.json index 81e9ca1..06a1f3b 100644 --- a/lang/en.json +++ b/lang/en.json @@ -2,6 +2,9 @@ "VAGABOND.SystemName": "Vagabond RPG", "VAGABOND.SystemDescription": "A Foundry VTT system for Vagabond RPG - Pulp Fantasy Roleplaying", + "VAGABOND.ThemeLight": "Light (Parchment)", + "VAGABOND.ThemeDark": "Dark", + "VAGABOND.SheetCharacter": "Character Sheet", "VAGABOND.SheetNPC": "NPC Sheet", "VAGABOND.SheetItem": "Item Sheet", diff --git a/module/applications/base-roll-dialog.mjs b/module/applications/base-roll-dialog.mjs index 118b4b0..b654410 100644 --- a/module/applications/base-roll-dialog.mjs +++ b/module/applications/base-roll-dialog.mjs @@ -44,7 +44,7 @@ export default class VagabondRollDialog extends HandlebarsApplicationMixin(Appli /** @override */ static DEFAULT_OPTIONS = { id: "vagabond-roll-dialog", - classes: ["vagabond", "roll-dialog"], + classes: ["vagabond", "roll-dialog", "themed"], tag: "form", window: { title: "VAGABOND.RollDialog", @@ -143,6 +143,9 @@ export default class VagabondRollDialog extends HandlebarsApplicationMixin(Appli _onRender(context, options) { super._onRender(context, options); + // Apply theme class based on configured theme + this._applyThemeClass(); + // Favor/Hinder toggle buttons const favorBtn = this.element.querySelector('[data-action="toggle-favor"]'); const hinderBtn = this.element.querySelector('[data-action="toggle-hinder"]'); @@ -166,6 +169,40 @@ export default class VagabondRollDialog extends HandlebarsApplicationMixin(Appli }); } + /** + * Apply the configured theme class to the dialog element. + * Foundry v13 doesn't automatically add theme classes to ApplicationV2, + * so we handle it manually. + * @protected + */ + _applyThemeClass() { + if (!this.element) return; + + // Remove any existing theme classes + this.element.classList.remove("theme-light", "theme-dark"); + + // Check global preference + let theme = null; + try { + const uiConfig = game.settings.get("core", "uiConfig"); + const colorScheme = uiConfig?.colorScheme?.applications; + if (colorScheme === "dark") { + theme = "dark"; + } else if (colorScheme === "light") { + theme = "light"; + } + } catch { + // Settings not available, use default + } + + // Apply the theme class + if (theme === "dark") { + this.element.classList.add("theme-dark"); + } else if (theme === "light") { + this.element.classList.add("theme-light"); + } + } + /** * Toggle favor on/off. * @private diff --git a/module/applications/favor-hinder-debug.mjs b/module/applications/favor-hinder-debug.mjs index 6d684d3..eef0ad8 100644 --- a/module/applications/favor-hinder-debug.mjs +++ b/module/applications/favor-hinder-debug.mjs @@ -26,7 +26,7 @@ export default class FavorHinderDebug extends HandlebarsApplicationMixin(Applica /** @override */ static DEFAULT_OPTIONS = { id: "vagabond-favor-hinder-debug", - classes: ["vagabond", "favor-hinder-debug"], + classes: ["vagabond", "favor-hinder-debug", "themed"], tag: "div", window: { title: "Favor/Hinder Debug", @@ -174,6 +174,9 @@ export default class FavorHinderDebug extends HandlebarsApplicationMixin(Applica _onRender(context, options) { super._onRender(context, options); + // Apply theme class based on configured theme + this._applyThemeClass(); + // Actor selection dropdown const actorSelect = this.element.querySelector('[name="actorId"]'); actorSelect?.addEventListener("change", (event) => { @@ -319,6 +322,40 @@ export default class FavorHinderDebug extends HandlebarsApplicationMixin(Applica SkillCheckDialog.prompt(this.actor); } + /** + * Apply the configured theme class to the dialog element. + * Foundry v13 doesn't automatically add theme classes to ApplicationV2, + * so we handle it manually. + * @protected + */ + _applyThemeClass() { + if (!this.element) return; + + // Remove any existing theme classes + this.element.classList.remove("theme-light", "theme-dark"); + + // Check global preference + let theme = null; + try { + const uiConfig = game.settings.get("core", "uiConfig"); + const colorScheme = uiConfig?.colorScheme?.applications; + if (colorScheme === "dark") { + theme = "dark"; + } else if (colorScheme === "light") { + theme = "light"; + } + } catch { + // Settings not available, use default + } + + // Apply the theme class + if (theme === "dark") { + this.element.classList.add("theme-dark"); + } else if (theme === "light") { + this.element.classList.add("theme-light"); + } + } + /* -------------------------------------------- */ /* Static Methods */ /* -------------------------------------------- */ diff --git a/module/sheets/base-actor-sheet.mjs b/module/sheets/base-actor-sheet.mjs index eb41732..dc47a00 100644 --- a/module/sheets/base-actor-sheet.mjs +++ b/module/sheets/base-actor-sheet.mjs @@ -38,7 +38,7 @@ export default class VagabondActorSheet extends HandlebarsApplicationMixin(Actor /** @override */ static DEFAULT_OPTIONS = { id: "vagabond-actor-sheet-{id}", - classes: ["vagabond", "sheet", "actor"], + classes: ["vagabond", "sheet", "actor", "themed"], tag: "form", window: { title: "VAGABOND.ActorSheet", @@ -271,6 +271,9 @@ export default class VagabondActorSheet extends HandlebarsApplicationMixin(Actor _onRender(context, options) { super._onRender(context, options); + // Apply theme class based on configured theme + this._applyThemeClass(); + // Remove stale tab content (ApplicationV2 appends parts without removing old ones) this._cleanupInactiveTabs(); @@ -284,6 +287,49 @@ export default class VagabondActorSheet extends HandlebarsApplicationMixin(Actor this._initializeEditors(); } + /** + * Apply the configured theme class to the sheet element. + * Foundry v13 doesn't automatically add theme classes to ApplicationV2 sheets, + * so we handle it manually. + * @protected + */ + _applyThemeClass() { + if (!this.element) return; + + // Remove any existing theme classes + this.element.classList.remove("theme-light", "theme-dark"); + + // Get the configured theme for this sheet + // DocumentSheetConfig stores per-document and per-type theme preferences + const sheetConfig = this.document.getFlag("core", "sheetTheme"); + const typeConfig = game.settings.get("core", "sheetClasses")?.[this.document.documentName]?.[ + this.document.type + ]; + const defaultTheme = typeConfig?.defaultTheme; + + // Determine which theme to apply: document-specific > type default > global + let theme = sheetConfig || defaultTheme; + + // If no specific theme, check global preference + if (!theme) { + const uiConfig = game.settings.get("core", "uiConfig"); + const colorScheme = uiConfig?.colorScheme?.applications; + if (colorScheme === "dark") { + theme = "dark"; + } else if (colorScheme === "light") { + theme = "light"; + } + } + + // Apply the theme class + if (theme === "dark") { + this.element.classList.add("theme-dark"); + } else if (theme === "light") { + this.element.classList.add("theme-light"); + } + // If still no theme, it will use body.theme-dark/light via CSS + } + /** * Remove tab content sections that don't match the active tab. * ApplicationV2's parts rendering appends new parts without removing old ones, @@ -581,7 +627,7 @@ export default class VagabondActorSheet extends HandlebarsApplicationMixin(Actor const weaponId = target.dataset.weaponId; const { AttackRollDialog } = game.vagabond.applications; - await AttackRollDialog.prompt(this.actor, { weaponId }); + await AttackRollDialog.prompt(this.actor, weaponId); } /** @@ -594,11 +640,8 @@ export default class VagabondActorSheet extends HandlebarsApplicationMixin(Actor const spellId = target.dataset.spellId; if (!spellId) return; - const spell = this.actor.items.get(spellId); - if (!spell) return; - const { SpellCastDialog } = game.vagabond.applications; - await SpellCastDialog.prompt(this.actor, { spell }); + await SpellCastDialog.prompt(this.actor, spellId); } /** diff --git a/module/sheets/base-item-sheet.mjs b/module/sheets/base-item-sheet.mjs index 32d61c3..b1609fd 100644 --- a/module/sheets/base-item-sheet.mjs +++ b/module/sheets/base-item-sheet.mjs @@ -34,7 +34,7 @@ export default class VagabondItemSheet extends HandlebarsApplicationMixin(ItemSh /** @override */ static DEFAULT_OPTIONS = { id: "vagabond-item-sheet-{id}", - classes: ["vagabond", "sheet", "item"], + classes: ["vagabond", "sheet", "item", "themed"], tag: "form", window: { title: "VAGABOND.ItemSheet", @@ -163,6 +163,39 @@ export default class VagabondItemSheet extends HandlebarsApplicationMixin(ItemSh // Active Effects on this item context.effects = this._prepareEffects(); + // Enrich HTML content for ProseMirror editors + // ApplicationV2 requires enriched HTML to be prepared in context + const enrichOptions = { + secrets: this.item.isOwner, + rollData: context.rollData, + relativeTo: this.item, + }; + const TextEditorImpl = foundry.applications.ux.TextEditor.implementation; + context.enrichedDescription = await TextEditorImpl.enrichHTML( + this.item.system.description ?? "", + enrichOptions + ); + + // Enrich spell-specific fields + if (this.item.type === "spell") { + context.enrichedEffect = await TextEditorImpl.enrichHTML( + this.item.system.effect ?? "", + enrichOptions + ); + context.enrichedCritEffect = await TextEditorImpl.enrichHTML( + this.item.system.critEffect ?? "", + enrichOptions + ); + } + + // Enrich class-specific fields + if (this.item.type === "class") { + context.enrichedStartingPack = await TextEditorImpl.enrichHTML( + this.item.system.startingPack ?? "", + enrichOptions + ); + } + // Type-specific context await this._prepareTypeContext(context, options); @@ -205,6 +238,9 @@ export default class VagabondItemSheet extends HandlebarsApplicationMixin(ItemSh _onRender(context, options) { super._onRender(context, options); + // Apply theme class based on configured theme + this._applyThemeClass(); + // Clean up inactive tabs if using tabs if (this.hasTabs) { this._cleanupInactiveTabs(); @@ -214,6 +250,46 @@ export default class VagabondItemSheet extends HandlebarsApplicationMixin(ItemSh this._initializeEditors(); } + /** + * Apply the configured theme class to the sheet element. + * Foundry v13 doesn't automatically add theme classes to ApplicationV2 sheets, + * so we handle it manually. + * @protected + */ + _applyThemeClass() { + if (!this.element) return; + + // Remove any existing theme classes + this.element.classList.remove("theme-light", "theme-dark"); + + // Try to get per-sheet theme (location TBD - Foundry v13 storage unclear) + // TODO: Find correct API for per-sheet theme in Foundry v13 + const sheetConfig = this.document.getFlag("core", "sheetTheme"); + const sheetClasses = game.settings.get("core", "sheetClasses"); + const typeConfig = sheetClasses?.[this.document.documentName]?.[this.document.type]; + + // Determine which theme to apply: document-specific > type default > global + let theme = sheetConfig || typeConfig?.defaultTheme; + + // If no specific theme, check global preference + if (!theme) { + const uiConfig = game.settings.get("core", "uiConfig"); + const colorScheme = uiConfig?.colorScheme?.applications; + if (colorScheme === "dark") { + theme = "dark"; + } else if (colorScheme === "light") { + theme = "light"; + } + } + + // Apply the theme class + if (theme === "dark") { + this.element.classList.add("theme-dark"); + } else if (theme === "light") { + this.element.classList.add("theme-light"); + } + } + /** * Remove tab content sections that don't match the active tab. * ApplicationV2's parts rendering appends new parts without removing old ones. diff --git a/styles/scss/_base.scss b/styles/scss/_base.scss index 09229e9..e8d1e94 100644 --- a/styles/scss/_base.scss +++ b/styles/scss/_base.scss @@ -7,7 +7,7 @@ font-family: $font-family-body; font-size: $font-size-base; line-height: $line-height-normal; - color: $color-text-primary; + color: var(--color-text-primary); // Box sizing *, @@ -18,12 +18,12 @@ // Links a { - color: $color-accent-primary; + color: var(--color-accent-primary); text-decoration: none; transition: color $transition-fast; &:hover { - color: $color-accent-secondary; + color: var(--color-accent-secondary); text-decoration: underline; } @@ -40,7 +40,7 @@ font-family: $font-family-header; font-weight: $font-weight-bold; line-height: $line-height-tight; - color: $color-text-primary; + color: var(--color-text-primary); margin: 0 0 $spacing-2 0; } @@ -100,18 +100,18 @@ td { padding: $spacing-2 $spacing-3; text-align: left; - border-bottom: 1px solid $color-border-light; + border-bottom: 1px solid var(--color-border-light); } th { font-weight: $font-weight-semibold; - background-color: $color-parchment-dark; + background-color: var(--color-bg-secondary); } // Horizontal rule hr { border: none; - border-top: 1px solid $color-border; + border-top: 1px solid var(--color-border); margin: $spacing-4 0; } @@ -120,7 +120,7 @@ font-family: $font-family-mono; font-size: $font-size-sm; padding: $spacing-1 $spacing-2; - background-color: $color-parchment-dark; + background-color: var(--color-bg-secondary); border-radius: $radius-sm; } @@ -128,48 +128,41 @@ blockquote { margin: 0 0 $spacing-4 0; padding: $spacing-3 $spacing-4; - border-left: 3px solid $color-accent-primary; - background-color: $color-parchment-dark; + border-left: 3px solid var(--color-accent-primary); + background-color: var(--color-bg-secondary); font-style: italic; } // Selection ::selection { - background-color: $color-accent-highlight; - color: $color-text-primary; + background-color: var(--color-accent-highlight); + color: var(--color-text-primary); } } // Foundry sheet wrapper styles .sheet.vagabond { @include custom-scrollbar; - background: $color-parchment; - background-image: linear-gradient( - to bottom, - rgba($color-parchment-light, 0.3) 0%, - transparent 5%, - transparent 95%, - rgba($color-parchment-dark, 0.3) 100% - ); + background: var(--color-bg-primary); } // Window header customization .window-app.vagabond { .window-header { - background: linear-gradient(to bottom, $color-parchment-dark, $color-parchment-darker); - border-bottom: 2px solid $color-border-dark; + background: linear-gradient(to bottom, var(--color-bg-secondary), var(--color-bg-tertiary)); + border-bottom: 2px solid var(--color-border-dark); .window-title { font-family: $font-family-header; font-size: $font-size-lg; - color: $color-text-primary; + color: var(--color-text-primary); } .header-button { - color: $color-text-secondary; + color: var(--color-text-secondary); &:hover { - color: $color-text-primary; + color: var(--color-text-primary); } } } diff --git a/styles/scss/_mixins.scss b/styles/scss/_mixins.scss index b45b848..0449f27 100644 --- a/styles/scss/_mixins.scss +++ b/styles/scss/_mixins.scss @@ -32,7 +32,7 @@ font-size: $size; font-weight: $font-weight-bold; line-height: $line-height-tight; - color: $color-text-primary; + color: var(--color-text-primary); } @mixin body-text($size: $font-size-base) { @@ -40,7 +40,7 @@ font-size: $size; font-weight: $font-weight-normal; line-height: $line-height-normal; - color: $color-text-primary; + color: var(--color-text-primary); } // Buttons @@ -60,7 +60,7 @@ transition: all $transition-fast; &:focus { - outline: 2px solid $color-accent-primary; + outline: 2px solid var(--color-accent-primary); outline-offset: 2px; } @@ -72,23 +72,23 @@ @mixin button-primary { @include button-base; - background-color: $color-accent-primary; - color: $color-text-inverse; - border-color: $color-accent-secondary; + background-color: var(--color-accent-primary); + color: var(--color-text-inverse); + border-color: var(--color-accent-secondary); &:hover:not(:disabled) { - background-color: $color-accent-secondary; + background-color: var(--color-accent-secondary); } } @mixin button-secondary { @include button-base; background-color: transparent; - color: $color-text-primary; - border-color: $color-border; + color: var(--color-text-primary); + border-color: var(--color-border); &:hover:not(:disabled) { - background-color: $color-parchment-dark; + background-color: var(--color-bg-secondary); } } @@ -100,7 +100,7 @@ height: 28px; padding: 0; font-size: $font-size-sm; - color: $color-text-secondary; + color: var(--color-text-secondary); background-color: transparent; border: 1px solid transparent; border-radius: $radius-sm; @@ -108,13 +108,13 @@ transition: all $transition-fast; &:hover:not(:disabled) { - color: $color-text-primary; - background-color: $color-parchment-dark; - border-color: $color-border; + color: var(--color-text-primary); + background-color: var(--color-bg-secondary); + border-color: var(--color-border); } &:focus { - outline: 2px solid $color-accent-primary; + outline: 2px solid var(--color-accent-primary); outline-offset: 2px; } @@ -129,41 +129,41 @@ padding: $spacing-2 $spacing-3; font-family: $font-family-body; font-size: $font-size-base; - color: $color-text-primary; - background-color: $color-parchment-light; - border: 1px solid $color-border; + color: var(--color-text-primary); + background-color: var(--color-bg-input); + border: 1px solid var(--color-border); border-radius: $radius-md; transition: border-color $transition-fast; &:focus { outline: none; - border-color: $color-accent-primary; - box-shadow: 0 0 0 2px rgba($color-accent-primary, 0.2); + border-color: var(--color-accent-primary); + box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.2); // Using fixed color for box-shadow } &::placeholder { - color: $color-text-muted; + color: var(--color-text-muted); } &:disabled { - background-color: $color-parchment-darker; + background-color: var(--color-bg-tertiary); cursor: not-allowed; } } // Cards/Panels @mixin panel { - background-color: $color-parchment; - border: 1px solid $color-border; + background-color: var(--color-bg-primary); + border: 1px solid var(--color-border); border-radius: $radius-md; - box-shadow: 0 1px 3px $shadow-light; + box-shadow: 0 1px 3px var(--shadow-light); } @mixin panel-header { @include flex-between; padding: $spacing-3 $spacing-4; - background-color: $color-parchment-dark; - border-bottom: 1px solid $color-border; + background-color: var(--color-bg-secondary); + border-bottom: 1px solid var(--color-border); border-radius: $radius-md $radius-md 0 0; } @@ -175,16 +175,16 @@ } &::-webkit-scrollbar-track { - background: $color-parchment-dark; + background: var(--color-bg-secondary); border-radius: $radius-full; } &::-webkit-scrollbar-thumb { - background: $color-border; + background: var(--color-border); border-radius: $radius-full; &:hover { - background: $color-border-dark; + background: var(--color-border-dark); } } } @@ -192,7 +192,7 @@ // Accessibility - focus visible @mixin focus-visible { &:focus-visible { - outline: 2px solid $color-accent-primary; + outline: 2px solid var(--color-accent-primary); outline-offset: 2px; } } @@ -218,7 +218,7 @@ } // Stat badge (for the large stat numbers) -@mixin stat-badge($color: $color-text-primary) { +@mixin stat-badge($color: var(--color-text-primary)) { @include flex-center; width: 3rem; height: 3rem; @@ -226,7 +226,7 @@ font-size: $font-size-3xl; font-weight: $font-weight-bold; color: $color; - background-color: $color-parchment-light; - border: 2px solid $color-border; + background-color: var(--color-bg-input); + border: 2px solid var(--color-border); border-radius: $radius-md; } diff --git a/styles/scss/_theme-variables.scss b/styles/scss/_theme-variables.scss new file mode 100644 index 0000000..56d79d1 --- /dev/null +++ b/styles/scss/_theme-variables.scss @@ -0,0 +1,146 @@ +// Vagabond RPG - Theme Variables (CSS Custom Properties) +// ====================================================== +// These CSS custom properties enable theme switching. +// The SCSS variables are kept for compile-time calculations (like mix()). +// Runtime theming uses the CSS custom properties. + +// ========================================== +// LIGHT THEME (Default - Parchment) +// ========================================== +// This is the default theme, warm parchment colors +// WCAG AA compliant (4.5:1 contrast ratio minimum) + +.vagabond { + // Background colors + --color-bg-primary: #{$color-parchment}; + --color-bg-secondary: #{$color-parchment-dark}; + --color-bg-tertiary: #{$color-parchment-darker}; + --color-bg-input: #{$color-parchment-light}; + --color-bg-highlight: #{$color-parchment-light}; + + // Text colors + --color-text-primary: #{$color-text-primary}; + --color-text-secondary: #{$color-text-secondary}; + --color-text-muted: #{$color-text-muted}; + --color-text-inverse: #{$color-text-inverse}; + + // Accent colors + --color-accent-primary: #{$color-accent-primary}; + --color-accent-secondary: #{$color-accent-secondary}; + --color-accent-highlight: #{$color-accent-highlight}; + + // Semantic colors + --color-success: #{$color-success}; + --color-danger: #{$color-danger}; + --color-warning: #{$color-warning}; + --color-info: #{$color-info}; + + // Stat colors (for visual distinction) + --color-might: #{$color-might}; + --color-dexterity: #{$color-dexterity}; + --color-awareness: #{$color-awareness}; + --color-reason: #{$color-reason}; + --color-presence: #{$color-presence}; + --color-luck: #{$color-luck}; + + // Border colors + --color-border: #{$color-border}; + --color-border-light: #{$color-border-light}; + --color-border-dark: #{$color-border-dark}; + + // Shadows + --shadow-light: #{$shadow-light}; + --shadow-medium: #{$shadow-medium}; + --shadow-dark: #{$shadow-dark}; + + // Resource bar colors (HP, Mana) + --color-hp-fill: #{$color-danger}; + --color-hp-bg: #{$color-parchment-darker}; + --color-mana-fill: #{$color-reason}; + --color-mana-bg: #{$color-parchment-darker}; + --color-bar-values-bg: rgba(245, 240, 225, 0.85); + --color-bar-input-bg: rgba(255, 255, 255, 0.9); + + // Type badge backgrounds (mixed with background) + --color-badge-weapon: #{mix($color-danger, $color-parchment, 15%)}; + --color-badge-armor: #{mix($color-info, $color-parchment, 15%)}; + --color-badge-spell: #{mix($color-reason, $color-parchment, 15%)}; + --color-badge-perk: #{mix($color-success, $color-parchment, 15%)}; + --color-badge-class: #{mix($color-warning, $color-parchment, 15%)}; + --color-badge-feature: #{mix($color-presence, $color-parchment, 15%)}; + --color-badge-ancestry: #{mix($color-luck, $color-parchment, 15%)}; + --color-badge-equipment: #{mix($color-dexterity, $color-parchment, 15%)}; +} + +// ========================================== +// DARK THEME +// ========================================== +// Dark backgrounds with warm parchment-tinted text +// Maintains the fantasy aesthetic while being easier on eyes +// +// Two application methods: +// 1. Global: body.theme-dark .vagabond - when Foundry's global theme is dark +// 2. Per-sheet: .vagabond.theme-dark - when sheet has theme-dark class (applied by _applyThemeClass) + +body.theme-dark .vagabond:not(.theme-light), +.vagabond.theme-dark { + // Dark background colors (warm-tinted darks) + --color-bg-primary: #1e1a16; + --color-bg-secondary: #2a2520; + --color-bg-tertiary: #36302a; + --color-bg-input: #252119; + --color-bg-highlight: #3d362e; + + // Light text colors (parchment-tinted) + --color-text-primary: #e8dcc8; + --color-text-secondary: #c4b8a4; + --color-text-muted: #8a7e6e; + --color-text-inverse: #1e1a16; + + // Accent colors (slightly brighter for dark bg) + --color-accent-primary: #c9682a; + --color-accent-secondary: #a85a24; + --color-accent-highlight: #e8a060; + + // Semantic colors (adjusted for dark backgrounds) + --color-success: #4a9f42; + --color-danger: #c94444; + --color-warning: #d4a32c; + --color-info: #4a8080; + + // Stat colors (brighter for dark bg) + --color-might: #e05050; + --color-dexterity: #50c050; + --color-awareness: #6090e0; + --color-reason: #b060e0; + --color-presence: #e0b030; + --color-luck: #40d0d0; + + // Border colors (warm grays) + --color-border: #5c4a3a; + --color-border-light: #6d5a4a; + --color-border-dark: #4a3a2a; + + // Shadows (more pronounced on dark) + --shadow-light: rgba(0, 0, 0, 0.2); + --shadow-medium: rgba(0, 0, 0, 0.35); + --shadow-dark: rgba(0, 0, 0, 0.5); + + // Resource bar colors + --color-hp-fill: #c94444; + --color-hp-bg: #2a2520; + --color-mana-fill: #7050b0; + --color-mana-bg: #2a2520; + --color-bar-values-bg: rgba(30, 26, 22, 0.9); + --color-bar-input-bg: rgba(42, 37, 32, 0.95); + + // Type badge backgrounds (for dark theme) + --color-badge-weapon: #3d2828; + --color-badge-armor: #283838; + --color-badge-spell: #382840; + --color-badge-perk: #283828; + --color-badge-class: #383828; + --color-badge-feature: #383028; + --color-badge-ancestry: #283838; + --color-badge-equipment: #283828; +} diff --git a/styles/scss/chat/_chat-cards.scss b/styles/scss/chat/_chat-cards.scss index 51982aa..cf34ffc 100644 --- a/styles/scss/chat/_chat-cards.scss +++ b/styles/scss/chat/_chat-cards.scss @@ -1,36 +1,45 @@ // Vagabond RPG - Chat Card Styles // ================================ +// Uses CSS custom properties for theme support. // Base chat card .vagabond.chat-card { @include panel; overflow: hidden; + background-color: var(--color-bg-primary); // Card header .card-header { @include flex-between; padding: $spacing-2 $spacing-3; - background-color: $color-parchment-dark; - border-bottom: 1px solid $color-border; + background-color: var(--color-bg-secondary); + border-bottom: 1px solid var(--color-border); .card-title, h3 { + @include flex-center; + gap: $spacing-2; font-family: $font-family-header; font-size: $font-size-base; font-weight: $font-weight-bold; margin: 0; + color: var(--color-text-primary); + + i { + color: var(--color-accent-primary); + } } .card-subtitle { font-size: $font-size-sm; - color: $color-text-muted; + color: var(--color-text-muted); } .trained-badge { font-size: $font-size-xs; padding: $spacing-1 $spacing-2; - background-color: rgba($color-success, 0.2); - color: $color-success; + background-color: rgba(74, 159, 66, 0.2); + color: var(--color-success); border-radius: $radius-full; font-weight: $font-weight-medium; } @@ -46,17 +55,18 @@ @include flex-column; align-items: center; gap: $spacing-2; - padding: $spacing-3; - margin: $spacing-2 0; - background-color: $color-parchment-light; + padding: $spacing-4; + margin: $spacing-3; + background-color: var(--color-bg-secondary); border-radius: $radius-md; - border: 2px solid $color-border; + border: 2px solid var(--color-border); .roll-total { font-family: $font-family-header; font-size: $font-size-4xl; font-weight: $font-weight-bold; line-height: 1; + color: var(--color-text-primary); } .roll-status { @@ -71,45 +81,45 @@ } .success { - background-color: rgba($color-success, 0.2); - color: $color-success; + background-color: rgba(74, 159, 66, 0.2); + color: var(--color-success); } .failure { - background-color: rgba($color-danger, 0.2); - color: $color-danger; + background-color: rgba(201, 68, 68, 0.2); + color: var(--color-danger); } .critical { - background-color: rgba($color-warning, 0.3); - color: $color-warning; + background-color: rgba(212, 163, 44, 0.3); + color: var(--color-warning); animation: pulse 1s ease-in-out; } .fumble { - background-color: rgba($color-danger, 0.3); - color: $color-danger; + background-color: rgba(201, 68, 68, 0.3); + color: var(--color-danger); animation: shake 0.5s ease-in-out; } } // Conditional styling based on result &.success { - border-color: $color-success; + border-color: var(--color-success); } &.failure { - border-color: $color-danger; + border-color: var(--color-danger); } &.critical { - border-color: $color-warning; - background-color: rgba($color-warning, 0.1); + border-color: var(--color-warning); + background-color: rgba(212, 163, 44, 0.1); } &.fumble { - border-color: $color-danger; - background-color: rgba($color-danger, 0.1); + border-color: var(--color-danger); + background-color: rgba(201, 68, 68, 0.1); } } @@ -117,8 +127,9 @@ .roll-details { @include flex-column; gap: $spacing-2; - padding: $spacing-2; - background-color: $color-parchment-dark; + padding: $spacing-3; + margin: 0 $spacing-3 $spacing-3; + background-color: var(--color-bg-secondary); border-radius: $radius-md; font-size: $font-size-sm; @@ -126,11 +137,12 @@ @include flex-between; .label { - color: $color-text-muted; + color: var(--color-text-muted); } .value { font-family: $font-family-mono; + color: var(--color-text-primary); } } @@ -138,7 +150,7 @@ @include flex-center; gap: $spacing-3; padding-top: $spacing-2; - border-top: 1px solid $color-border; + border-top: 1px solid var(--color-border); span { @include flex-center; @@ -148,32 +160,38 @@ .d20-result { font-family: $font-family-mono; font-weight: $font-weight-bold; + color: var(--color-text-primary); } .favor-die { font-family: $font-family-mono; &.favor { - color: $color-success; + color: var(--color-success); } &.hinder { - color: $color-danger; + color: var(--color-danger); } } .modifier { font-family: $font-family-mono; - color: $color-text-secondary; + color: var(--color-text-secondary); } } } - // Target info (difficulty, crit threshold) + // Info sections (save-info, skill-info, target-info) + .save-info, + .skill-info, .target-info { - @include grid(2, $spacing-2); - margin-top: $spacing-2; - padding: $spacing-2; + @include flex-column; + gap: $spacing-1; + margin: 0 $spacing-3 $spacing-3; + padding: $spacing-2 $spacing-3; + background-color: var(--color-bg-tertiary); + border-radius: $radius-md; font-size: $font-size-sm; > div { @@ -181,11 +199,53 @@ } .label { - color: $color-text-muted; + color: var(--color-text-muted); } .value { font-weight: $font-weight-medium; + color: var(--color-text-primary); + } + + .stat-abbr { + font-weight: $font-weight-bold; + color: var(--color-accent-primary); + } + } + + // Defense info display + .defense-info-display { + @include flex-center; + gap: $spacing-2; + margin: 0 $spacing-3 $spacing-3; + padding: $spacing-2 $spacing-3; + background-color: rgba(64, 144, 224, 0.1); + border: 1px solid var(--color-info); + border-radius: $radius-md; + font-size: $font-size-sm; + color: var(--color-info); + + i { + font-size: $font-size-base; + } + } + + // Defense badge + .defense-badge { + font-size: $font-size-xs; + padding: $spacing-1 $spacing-2; + border-radius: $radius-full; + font-weight: $font-weight-medium; + text-transform: uppercase; + + &.block { + background-color: rgba(64, 144, 224, 0.2); + color: var(--color-info); + } + + &.dodge { + background-color: rgba(74, 159, 66, 0.2); + color: var(--color-success); } } @@ -194,20 +254,20 @@ .hinder-sources { @include flex-center; gap: $spacing-2; - margin-top: $spacing-2; + margin: 0 $spacing-3 $spacing-3; padding: $spacing-2; font-size: $font-size-sm; border-radius: $radius-md; } .favor-sources { - background-color: rgba($color-success, 0.1); - color: $color-success; + background-color: rgba(74, 159, 66, 0.1); + color: var(--color-success); } .hinder-sources { - background-color: rgba($color-danger, 0.1); - color: $color-danger; + background-color: rgba(201, 68, 68, 0.1); + color: var(--color-danger); } // Result status (legacy) @@ -220,18 +280,18 @@ border-radius: $radius-md; &.success { - background-color: rgba($color-success, 0.2); - color: $color-success; + background-color: rgba(74, 159, 66, 0.2); + color: var(--color-success); } &.failure { - background-color: rgba($color-danger, 0.2); - color: $color-danger; + background-color: rgba(201, 68, 68, 0.2); + color: var(--color-danger); } &.critical { - background-color: rgba($color-warning, 0.2); - color: $color-warning; + background-color: rgba(212, 163, 44, 0.2); + color: var(--color-warning); animation: pulse 1s ease-in-out; } } @@ -240,27 +300,27 @@ .damage-display { @include flex-center; gap: $spacing-2; - margin-top: $spacing-3; + margin: $spacing-3; padding: $spacing-2; - background-color: rgba($color-danger, 0.1); - border: 1px solid $color-danger; + background-color: rgba(201, 68, 68, 0.1); + border: 1px solid var(--color-danger); border-radius: $radius-md; .damage-label { font-size: $font-size-sm; - color: $color-text-secondary; + color: var(--color-text-secondary); } .damage-value { font-family: $font-family-header; font-size: $font-size-xl; font-weight: $font-weight-bold; - color: $color-danger; + color: var(--color-danger); } .damage-type { font-size: $font-size-sm; - color: $color-text-muted; + color: var(--color-text-muted); } } @@ -269,7 +329,7 @@ display: flex; gap: $spacing-2; padding: $spacing-3; - border-top: 1px solid $color-border; + border-top: 1px solid var(--color-border); button { flex: 1; @@ -284,6 +344,13 @@ } } +// Save roll card specific +.vagabond.chat-card.save-roll { + .save-name { + margin: 0; + } +} + // Attack roll card specific .vagabond.chat-card.attack-roll { .card-header { @@ -295,7 +362,7 @@ width: 32px; height: 32px; border-radius: $radius-sm; - border: 1px solid $color-border; + border: 1px solid var(--color-border); } .header-text { @@ -304,13 +371,14 @@ .weapon-name { margin: 0; font-size: $font-size-base; + color: var(--color-text-primary); } .attack-type-badge { font-size: $font-size-xs; padding: $spacing-1 $spacing-2; - background-color: rgba($color-accent-primary, 0.2); - color: $color-accent-primary; + background-color: rgba(139, 69, 19, 0.2); + color: var(--color-accent-primary); border-radius: $radius-full; font-weight: $font-weight-medium; } @@ -318,18 +386,18 @@ } .damage-section { - margin-top: $spacing-3; + margin: $spacing-3; padding: $spacing-3; - background-color: rgba($color-danger, 0.1); - border: 1px solid rgba($color-danger, 0.3); + background-color: rgba(201, 68, 68, 0.1); + border: 1px solid rgba(201, 68, 68, 0.3); border-radius: $radius-md; &.critical { - background-color: rgba($color-warning, 0.15); - border-color: $color-warning; + background-color: rgba(212, 163, 44, 0.15); + border-color: var(--color-warning); .damage-total { - color: $color-warning; + color: var(--color-warning); } } @@ -338,13 +406,14 @@ gap: $spacing-2; font-weight: $font-weight-semibold; margin-bottom: $spacing-2; + color: var(--color-text-primary); i { - color: $color-danger; + color: var(--color-danger); } .crit-label { - color: $color-warning; + color: var(--color-warning); font-size: $font-size-sm; } } @@ -357,13 +426,13 @@ font-family: $font-family-header; font-size: $font-size-3xl; font-weight: $font-weight-bold; - color: $color-danger; + color: var(--color-danger); line-height: 1; } .damage-type { font-size: $font-size-sm; - color: $color-text-secondary; + color: var(--color-text-secondary); text-transform: capitalize; } } @@ -374,10 +443,10 @@ margin-top: $spacing-2; font-family: $font-family-mono; font-size: $font-size-sm; - color: $color-text-muted; + color: var(--color-text-muted); .grip-indicator { - color: $color-text-secondary; + color: var(--color-text-secondary); } } } @@ -386,32 +455,54 @@ display: flex; flex-wrap: wrap; gap: $spacing-1; - margin-top: $spacing-2; + margin: $spacing-2 $spacing-3; padding: $spacing-2; .property-tag { font-size: $font-size-xs; padding: $spacing-1 $spacing-2; - background-color: $color-parchment-dark; + background-color: var(--color-bg-secondary); border-radius: $radius-full; - color: $color-text-secondary; + color: var(--color-text-secondary); text-transform: capitalize; } } } // Spell card specific -.vagabond.chat-card.spell-card { +.vagabond.chat-card.spell-card, +.vagabond.chat-card.spell-cast { + .card-header { + .spell-name { + margin: 0; + } + + .mana-cost-badge { + font-size: $font-size-xs; + padding: $spacing-1 $spacing-2; + background-color: rgba(112, 80, 176, 0.2); + color: var(--color-reason); + border-radius: $radius-full; + font-weight: $font-weight-medium; + + i { + margin-right: $spacing-1; + } + } + } + .spell-effect { padding: $spacing-3; font-style: italic; - border-left: 3px solid $color-accent-primary; - background-color: $color-parchment-light; - margin: $spacing-3 0; + border-left: 3px solid var(--color-accent-primary); + background-color: var(--color-bg-secondary); + margin: $spacing-3; + color: var(--color-text-secondary); } .spell-meta { @include grid(2, $spacing-2); + margin: 0 $spacing-3 $spacing-3; font-size: $font-size-sm; .meta-item { @@ -419,10 +510,45 @@ padding: $spacing-1; .meta-label { - color: $color-text-muted; + color: var(--color-text-muted); + } + + .meta-value { + font-weight: $font-weight-medium; + color: var(--color-text-primary); } } } + + // Mana spent display + .mana-spent { + @include flex-center; + gap: $spacing-2; + margin: 0 $spacing-3 $spacing-3; + padding: $spacing-2; + background-color: rgba(112, 80, 176, 0.1); + border: 1px solid rgba(112, 80, 176, 0.3); + border-radius: $radius-md; + font-size: $font-size-sm; + color: var(--color-reason); + + i { + font-size: $font-size-base; + } + } + + // Focus indicator + .focus-indicator { + @include flex-center; + gap: $spacing-2; + margin: 0 $spacing-3 $spacing-3; + padding: $spacing-2; + background-color: rgba(212, 163, 44, 0.1); + border: 1px solid var(--color-warning); + border-radius: $radius-md; + font-size: $font-size-sm; + color: var(--color-warning); + } } // Animations diff --git a/styles/scss/components/_buttons.scss b/styles/scss/components/_buttons.scss index fbe6d8c..ce9500f 100644 --- a/styles/scss/components/_buttons.scss +++ b/styles/scss/components/_buttons.scss @@ -33,11 +33,11 @@ padding: 0; background-color: transparent; border-color: transparent; - color: $color-text-primary; + color: var(--color-text-primary); &:hover:not(:disabled) { - background-color: $color-parchment-dark; - color: $color-accent-primary; + background-color: var(--color-bg-secondary); + color: var(--color-accent-primary); } i { @@ -52,14 +52,14 @@ width: 24px; height: 24px; padding: 0; - background-color: $color-parchment; - border: 1px solid $color-border; - color: $color-text-primary; + background-color: var(--color-bg-primary); + border: 1px solid var(--color-border); + color: var(--color-text-primary); &:hover:not(:disabled) { - background-color: $color-parchment-dark; - border-color: $color-accent-primary; - color: $color-accent-primary; + background-color: var(--color-bg-secondary); + border-color: var(--color-accent-primary); + color: var(--color-accent-primary); } i { @@ -71,13 +71,13 @@ // Rollable button (for dice rolls) .btn-roll { @include button-base; - background-color: $color-parchment-light; - color: $color-text-primary; - border-color: $color-border; + background-color: var(--color-bg-input); + color: var(--color-text-primary); + border-color: var(--color-border); &:hover:not(:disabled) { - background-color: $color-accent-highlight; - border-color: $color-accent-primary; + background-color: var(--color-accent-highlight); + border-color: var(--color-accent-primary); } i { @@ -88,24 +88,24 @@ // Danger button .btn-danger { @include button-base; - background-color: $color-danger; - color: $color-text-inverse; - border-color: darken($color-danger, 10%); + background-color: var(--color-danger); + color: var(--color-text-inverse); + border-color: var(--color-danger); &:hover:not(:disabled) { - background-color: darken($color-danger, 10%); + filter: brightness(0.85); } } // Success button .btn-success { @include button-base; - background-color: $color-success; - color: $color-text-inverse; - border-color: darken($color-success, 10%); + background-color: var(--color-success); + color: var(--color-text-inverse); + border-color: var(--color-success); &:hover:not(:disabled) { - background-color: darken($color-success, 10%); + filter: brightness(0.85); } } diff --git a/styles/scss/components/_forms.scss b/styles/scss/components/_forms.scss index 1e67afa..f38a030 100644 --- a/styles/scss/components/_forms.scss +++ b/styles/scss/components/_forms.scss @@ -41,8 +41,8 @@ padding: $spacing-2 $spacing-8 $spacing-2 $spacing-3; cursor: pointer; appearance: none; - background-color: $color-parchment-light !important; - color: $color-text-primary !important; + background-color: var(--color-bg-input) !important; + color: var(--color-text-primary) !important; font-size: $font-size-base; line-height: 1.5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232c2416' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); @@ -50,13 +50,18 @@ background-position: right $spacing-3 center; } + // Dark theme select arrow override (per-sheet, following D&D5e pattern) + &.themed.theme-dark select { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e8dcc8' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); + } + // Checkbox input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0; cursor: pointer; - accent-color: $color-accent-primary; + accent-color: var(--color-accent-primary); @include focus-visible; } @@ -78,7 +83,7 @@ height: 1rem; margin: 0; cursor: pointer; - accent-color: $color-accent-primary; + accent-color: var(--color-accent-primary); @include focus-visible; } @@ -91,7 +96,7 @@ display: block; margin-bottom: $spacing-1; font-weight: $font-weight-medium; - color: $color-text-secondary; + color: var(--color-text-secondary); } &.inline { @@ -134,6 +139,7 @@ text-align: center; background: transparent; border: none; + color: inherit; &:focus { outline: none; @@ -153,7 +159,7 @@ } .separator { - color: $color-text-muted; + color: var(--color-text-muted); } } @@ -166,12 +172,12 @@ transition: all $transition-fast; &:hover { - border-color: $color-border-light; + border-color: var(--color-border-light); } &:focus { - background: $color-parchment-light; - border-color: $color-accent-primary; + background: var(--color-bg-input); + border-color: var(--color-accent-primary); outline: none; } } @@ -179,9 +185,14 @@ // Readonly display (looks like text, not input) .readonly-value { padding: $spacing-2 $spacing-3; - background-color: $color-parchment-dark; - border: 1px solid $color-border-light; + background-color: var(--color-bg-secondary); + border: 1px solid var(--color-border-light); border-radius: $radius-md; - color: $color-text-secondary; + color: var(--color-text-secondary); } } + +// Global dark theme select arrow override (when body has theme-dark) +body.theme-dark .vagabond select { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e8dcc8' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); +} diff --git a/styles/scss/components/_tabs.scss b/styles/scss/components/_tabs.scss index 338bb9b..870e2cf 100644 --- a/styles/scss/components/_tabs.scss +++ b/styles/scss/components/_tabs.scss @@ -9,8 +9,8 @@ margin: 0; padding: 0; list-style: none; - border-bottom: 2px solid $color-border; - background-color: $color-parchment-dark; + border-bottom: 2px solid var(--color-border); + background-color: var(--color-bg-secondary); .item { margin: 0; @@ -18,7 +18,7 @@ font-family: $font-family-header; font-size: $font-size-base; font-weight: $font-weight-medium; - color: $color-text-secondary; + color: var(--color-text-secondary); background-color: transparent; border: none; border-bottom: 2px solid transparent; @@ -27,14 +27,14 @@ transition: all $transition-fast; &:hover { - color: $color-text-primary; - background-color: $color-parchment; + color: var(--color-text-primary); + background-color: var(--color-bg-primary); } &.active { - color: $color-text-primary; - background-color: $color-parchment; - border-bottom-color: $color-accent-primary; + color: var(--color-text-primary); + background-color: var(--color-bg-primary); + border-bottom-color: var(--color-accent-primary); } @include focus-visible; @@ -64,7 +64,7 @@ .sheet-tabs.vertical { flex-direction: column; border-bottom: none; - border-right: 2px solid $color-border; + border-right: 2px solid var(--color-border); .item { border-bottom: none; @@ -73,7 +73,7 @@ margin-right: -2px; &.active { - border-right-color: $color-accent-primary; + border-right-color: var(--color-accent-primary); } } } @@ -84,12 +84,12 @@ gap: $spacing-2; margin-bottom: $spacing-4; padding-bottom: $spacing-2; - border-bottom: 1px solid $color-border-light; + border-bottom: 1px solid var(--color-border-light); .sub-tab { padding: $spacing-1 $spacing-3; font-size: $font-size-sm; - color: $color-text-muted; + color: var(--color-text-muted); background-color: transparent; border: 1px solid transparent; border-radius: $radius-md; @@ -97,14 +97,14 @@ transition: all $transition-fast; &:hover { - color: $color-text-primary; - background-color: $color-parchment-dark; + color: var(--color-text-primary); + background-color: var(--color-bg-secondary); } &.active { - color: $color-text-primary; - background-color: $color-parchment-dark; - border-color: $color-border; + color: var(--color-text-primary); + background-color: var(--color-bg-secondary); + border-color: var(--color-border); } } } diff --git a/styles/scss/dialogs/_roll-dialog.scss b/styles/scss/dialogs/_roll-dialog.scss index 00bde67..7bc991b 100644 --- a/styles/scss/dialogs/_roll-dialog.scss +++ b/styles/scss/dialogs/_roll-dialog.scss @@ -1,18 +1,21 @@ // Vagabond RPG - Roll Dialog Styles // ================================== +// All roll dialogs use CSS custom properties for theme support. // ApplicationV2 Roll Dialog Base .vagabond.roll-dialog { - // Force light background on the entire window - background-color: $color-parchment; - color: $color-text-primary; + // Use themed class for proper theme support + &.themed { + background-color: var(--color-bg-primary); + color: var(--color-text-primary); + } .roll-dialog-content { @include flex-column; gap: $spacing-3; padding: $spacing-4; - background-color: $color-parchment; - color: $color-text-primary; + background-color: var(--color-bg-primary); + color: var(--color-text-primary); } // Automatic favor/hinder from Active Effects @@ -28,30 +31,60 @@ } &.favor { - background-color: rgba($color-success, 0.15); - color: $color-success; - border: 1px solid $color-success; + background-color: rgba(74, 159, 66, 0.15); + color: var(--color-success); + border: 1px solid var(--color-success); } &.hinder { - background-color: rgba($color-danger, 0.15); - color: $color-danger; - border: 1px solid $color-danger; + background-color: rgba(201, 68, 68, 0.15); + color: var(--color-danger); + border: 1px solid var(--color-danger); } } - // Skill selection - .skill-selection { + // Common selection dropdowns + .skill-selection, + .weapon-selection, + .save-selection, + .spell-selection { @include flex-column; gap: $spacing-2; label { font-weight: $font-weight-semibold; + color: var(--color-text-primary); + } + + select { + @include input-base; + width: 100%; + cursor: pointer; + } + + .no-weapons-message, + .no-spells-warning { + @include flex-center; + gap: $spacing-2; + padding: $spacing-3; + text-align: center; + color: var(--color-text-muted); + font-style: italic; + background-color: var(--color-bg-secondary); + border-radius: $radius-md; + + i { + color: var(--color-warning); + } } } - // Skill info panel - .skill-info { + // Info panels (skill-info, attack-info, save-info, spell-info) + .skill-info, + .attack-info, + .save-info, + .spell-info, + .casting-skill { @include panel; @include grid(2, $spacing-2); padding: $spacing-3; @@ -62,28 +95,113 @@ .label { font-size: $font-size-sm; - color: $color-text-muted; + color: var(--color-text-muted); } .value { font-weight: $font-weight-medium; + color: var(--color-text-primary); &.trained { - color: $color-success; + color: var(--color-success); } &.untrained { - color: $color-text-muted; + color: var(--color-text-muted); } &.difficulty { font-family: $font-family-header; font-size: $font-size-lg; font-weight: $font-weight-bold; + color: var(--color-accent-primary); } &.crit { - color: $color-warning; + color: var(--color-warning); + } + } + + .stat-name { + font-weight: $font-weight-medium; + } + } + + // Single-column info (for spell dialog) + .spell-info { + @include flex-column; + gap: $spacing-2; + + > div { + @include flex-between; + } + } + + // Damage preview panel + .damage-preview { + @include panel; + padding: $spacing-3; + background-color: rgba(201, 68, 68, 0.08); + border-color: rgba(201, 68, 68, 0.3); + + .damage-formula { + @include flex-center; + gap: $spacing-2; + + .label { + font-size: $font-size-sm; + color: var(--color-text-muted); + } + + .value { + font-family: $font-family-mono; + font-weight: $font-weight-bold; + font-size: $font-size-lg; + color: var(--color-danger); + } + + .damage-type { + font-size: $font-size-sm; + color: var(--color-text-secondary); + } + } + + .weapon-properties { + display: flex; + flex-wrap: wrap; + gap: $spacing-1; + margin-top: $spacing-2; + justify-content: center; + + .property-tag { + font-size: $font-size-xs; + padding: $spacing-1 $spacing-2; + background-color: var(--color-bg-secondary); + border-radius: $radius-full; + color: var(--color-text-secondary); + text-transform: uppercase; + } + } + } + + // Versatile weapon toggle + .versatile-toggle { + @include flex-center; + padding: $spacing-2; + + .checkbox-label { + @include flex-center; + gap: $spacing-2; + cursor: pointer; + + input[type="checkbox"] { + width: 1.25rem; + height: 1.25rem; + accent-color: var(--color-accent-primary); + } + + span { + color: var(--color-text-primary); } } } @@ -95,6 +213,7 @@ > label { font-weight: $font-weight-semibold; + color: var(--color-text-primary); } .favor-hinder-toggles { @@ -109,18 +228,18 @@ &.favor-btn { &.active, &:hover { - background-color: rgba($color-success, 0.15); - border-color: $color-success; - color: $color-success; + background-color: rgba(74, 159, 66, 0.15); + border-color: var(--color-success); + color: var(--color-success); } } &.hinder-btn { &.active, &:hover { - background-color: rgba($color-danger, 0.15); - border-color: $color-danger; - color: $color-danger; + background-color: rgba(201, 68, 68, 0.15); + border-color: var(--color-danger); + color: var(--color-danger); } } } @@ -128,19 +247,24 @@ .net-favor-hinder { @include flex-center; - padding: $spacing-1 $spacing-2; + gap: $spacing-2; + padding: $spacing-2 $spacing-3; font-size: $font-size-sm; font-weight: $font-weight-medium; border-radius: $radius-md; + i { + font-size: $font-size-base; + } + &.favor { - background-color: rgba($color-success, 0.15); - color: $color-success; + background-color: rgba(74, 159, 66, 0.15); + color: var(--color-success); } &.hinder { - background-color: rgba($color-danger, 0.15); - color: $color-danger; + background-color: rgba(201, 68, 68, 0.15); + color: var(--color-danger); } } } @@ -152,6 +276,7 @@ > label { font-weight: $font-weight-semibold; + color: var(--color-text-primary); } .modifier-presets { @@ -166,7 +291,7 @@ font-size: $font-size-sm; &:hover { - background-color: $color-parchment-dark; + background-color: var(--color-bg-secondary); } } } @@ -196,129 +321,310 @@ opacity: 0.5; cursor: not-allowed; } + + .insufficient-mana-label { + font-size: $font-size-sm; + opacity: 0.8; + } } } } -// Skill check dialog specific -.vagabond.skill-check-dialog { - // Additional skill-specific styles if needed -} - -// Attack roll dialog specific -.vagabond.attack-roll-dialog { - .weapon-selection { +// =========================================== +// Save Roll Dialog Specific Styles +// =========================================== +.vagabond.roll-dialog { + // Defense options (Block/Dodge for Reflex saves) + .defense-options { @include flex-column; gap: $spacing-2; + margin-top: $spacing-2; - label { + > label { font-weight: $font-weight-semibold; + color: var(--color-text-primary); } - .no-weapons-message { - padding: $spacing-3; - text-align: center; - color: $color-text-muted; - font-style: italic; - } - } + .defense-buttons { + display: flex; + gap: $spacing-2; - .attack-info { - @include panel; - @include grid(2, $spacing-2); - padding: $spacing-3; + .defense-btn { + @include button-secondary; + flex: 1; + gap: $spacing-2; + padding: $spacing-3; - > div { - @include flex-between; + i { + font-size: $font-size-lg; + } + + &.dodge-btn { + &.active, + &:hover:not(:disabled) { + background-color: rgba(74, 159, 66, 0.15); + border-color: var(--color-success); + color: var(--color-success); + } + } + + &.block-btn { + &.active, + &:hover:not(:disabled) { + background-color: rgba(64, 144, 224, 0.15); + border-color: var(--color-info); + color: var(--color-info); + } + } + + &:disabled { + opacity: 0.5; + cursor: not-allowed; + + &:hover { + background-color: transparent; + border-color: var(--color-border); + color: var(--color-text-muted); + } + } + } } - .label { + .defense-info { + @include flex-center; + gap: $spacing-2; + padding: $spacing-2 $spacing-3; font-size: $font-size-sm; - color: $color-text-muted; - } + color: var(--color-text-secondary); + background-color: var(--color-bg-secondary); + border-radius: $radius-md; - .value { - font-weight: $font-weight-medium; - - &.difficulty { - font-family: $font-family-header; - font-size: $font-size-lg; - font-weight: $font-weight-bold; - } - - &.crit { - color: $color-warning; + i { + color: var(--color-info); } } } +} - .damage-preview { +// =========================================== +// Spell Cast Dialog Specific Styles +// =========================================== +.vagabond.roll-dialog { + // Mana display + .mana-display { @include panel; + @include flex-between; padding: $spacing-3; - background-color: rgba($color-danger, 0.1); - border-color: rgba($color-danger, 0.3); + background: linear-gradient(135deg, rgba(112, 80, 176, 0.1), rgba(112, 80, 176, 0.05)); + border-color: rgba(112, 80, 176, 0.3); - .damage-formula { + .mana-current, + .mana-cost { @include flex-center; gap: $spacing-2; .label { font-size: $font-size-sm; - color: $color-text-muted; + color: var(--color-text-muted); + } + + .value { + font-family: $font-family-header; + font-size: $font-size-xl; + font-weight: $font-weight-bold; + color: var(--color-reason); + + &.insufficient { + color: var(--color-danger); + } + } + } + } + + // Spell effect section + .spell-effect { + @include panel; + padding: $spacing-3; + background-color: var(--color-bg-secondary); + + .effect-header { + margin-bottom: $spacing-2; + + .include-effect-toggle { + @include flex-center; + justify-content: flex-start; + gap: $spacing-2; + cursor: pointer; + + input[type="checkbox"] { + width: 1.25rem; + height: 1.25rem; + accent-color: var(--color-accent-primary); + } + + span { + font-weight: $font-weight-semibold; + color: var(--color-text-primary); + } + } + } + + .effect-text { + font-size: $font-size-sm; + color: var(--color-text-secondary); + padding: $spacing-2; + background-color: var(--color-bg-primary); + border-radius: $radius-sm; + border-left: 3px solid var(--color-accent-primary); + } + } + + // Damage configuration (dice slider) + .damage-config { + @include flex-column; + gap: $spacing-2; + + > label { + font-weight: $font-weight-semibold; + color: var(--color-text-primary); + } + + .damage-dice-input { + @include flex-center; + gap: $spacing-3; + + input[type="range"] { + flex: 1; + height: 8px; + border-radius: $radius-full; + background: var(--color-bg-tertiary); + outline: none; + cursor: pointer; + + &::-webkit-slider-thumb { + -webkit-appearance: none; + width: 20px; + height: 20px; + border-radius: 50%; + background: var(--color-danger); + cursor: pointer; + border: 2px solid var(--color-bg-primary); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + } + + &::-moz-range-thumb { + width: 20px; + height: 20px; + border-radius: 50%; + background: var(--color-danger); + cursor: pointer; + border: 2px solid var(--color-bg-primary); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + } + } + + .dice-count { + font-family: $font-family-mono; + font-size: $font-size-lg; + font-weight: $font-weight-bold; + color: var(--color-danger); + min-width: 4rem; + text-align: center; + } + } + + .damage-preview { + @include flex-center; + gap: $spacing-2; + padding: $spacing-2; + background-color: rgba(201, 68, 68, 0.08); + border-radius: $radius-md; + + .label { + font-size: $font-size-sm; + color: var(--color-text-muted); } .value { font-family: $font-family-mono; font-weight: $font-weight-bold; - font-size: $font-size-lg; + color: var(--color-danger); } .damage-type { font-size: $font-size-sm; - color: $color-text-secondary; - } - } - - .weapon-properties { - display: flex; - flex-wrap: wrap; - gap: $spacing-1; - margin-top: $spacing-2; - justify-content: center; - - .property-tag { - font-size: $font-size-xs; - padding: $spacing-1 $spacing-2; - background-color: $color-parchment-dark; - border-radius: $radius-full; - color: $color-text-secondary; - text-transform: uppercase; + color: var(--color-text-secondary); } } } - .versatile-toggle { - @include flex-center; - padding: $spacing-2; + // Delivery and Duration selection + .delivery-selection, + .duration-selection { + @include flex-column; + gap: $spacing-2; - .checkbox-label { + > label { + font-weight: $font-weight-semibold; + color: var(--color-text-primary); + } + + select { + @include input-base; + width: 100%; + cursor: pointer; + } + } + + // Focus warning + .focus-warning { + @include panel; + @include flex-column; + gap: $spacing-2; + padding: $spacing-3; + background-color: rgba(212, 163, 44, 0.1); + border-color: var(--color-warning); + + > i { + color: var(--color-warning); + } + + > span { + font-size: $font-size-sm; + color: var(--color-text-secondary); + } + + .current-focus { + font-size: $font-size-sm; + color: var(--color-text-muted); + font-style: italic; + } + + .focus-limit-warning { @include flex-center; gap: $spacing-2; - cursor: pointer; + padding: $spacing-2; + font-size: $font-size-sm; + font-weight: $font-weight-medium; + color: var(--color-danger); + background-color: rgba(201, 68, 68, 0.1); + border-radius: $radius-md; - input[type="checkbox"] { - width: 1.25rem; - height: 1.25rem; - accent-color: $color-accent-primary; + i { + color: var(--color-danger); } } } } +// =========================================== // Legacy dialog styles (for backward compatibility) +// =========================================== .vagabond.dialog.roll-dialog { .dialog-content { padding: $spacing-4; + background-color: var(--color-bg-primary); + color: var(--color-text-primary); } // Roll info section @@ -335,14 +641,15 @@ font-family: $font-family-header; font-size: $font-size-3xl; font-weight: $font-weight-bold; + color: var(--color-accent-primary); } .crit-threshold { font-size: $font-size-sm; - color: $color-text-muted; + color: var(--color-text-muted); .crit-value { - color: $color-accent-primary; + color: var(--color-warning); font-weight: $font-weight-bold; } } @@ -361,14 +668,15 @@ label { font-weight: $font-weight-medium; + color: var(--color-text-primary); } &.favor .toggle-active { - color: $color-success; + color: var(--color-success); } &.hinder .toggle-active { - color: $color-danger; + color: var(--color-danger); } } } @@ -398,7 +706,7 @@ } } -// Spell cast dialog specific +// Legacy spell cast dialog .vagabond.dialog.spell-cast-dialog { .mana-cost { @include panel; @@ -408,20 +716,21 @@ .cost-label { font-weight: $font-weight-semibold; + color: var(--color-text-primary); } .cost-value { font-family: $font-family-header; font-size: $font-size-xl; font-weight: $font-weight-bold; - color: $color-accent-primary; + color: var(--color-reason); } &.insufficient { - border-color: $color-danger; + border-color: var(--color-danger); .cost-value { - color: $color-danger; + color: var(--color-danger); } } } @@ -434,6 +743,7 @@ .selection-label { font-weight: $font-weight-semibold; margin-bottom: $spacing-2; + color: var(--color-text-primary); } .selection-grid { @@ -447,35 +757,34 @@ transition: all $transition-fast; &:hover { - border-color: $color-accent-primary; + border-color: var(--color-accent-primary); } &.selected { - background-color: $color-parchment-dark; - border-color: $color-accent-primary; + background-color: var(--color-bg-secondary); + border-color: var(--color-accent-primary); } .option-name { font-weight: $font-weight-medium; + color: var(--color-text-primary); } .option-cost { font-size: $font-size-sm; - color: $color-text-muted; + color: var(--color-text-muted); } } } } +// =========================================== // Favor/Hinder Debug Panel +// =========================================== .vagabond.favor-hinder-debug { - // Force light background on the entire window content - // Using !important to override Foundry's dark theme styles - background-color: $color-parchment !important; - color: $color-text-primary !important; - - * { - color: $color-text-primary; + &.themed { + background-color: var(--color-bg-primary); + color: var(--color-text-primary); } // Enable scrolling on the window content @@ -489,7 +798,7 @@ @include flex-column; gap: $spacing-4; padding: $spacing-4; - background-color: $color-parchment !important; + background-color: var(--color-bg-primary); } .actor-selection { @@ -498,7 +807,7 @@ label { font-weight: $font-weight-semibold; - color: $color-text-primary; + color: var(--color-text-primary); } } @@ -510,7 +819,7 @@ .debug-panel { @include panel; padding: $spacing-3; - background-color: $color-parchment-light; + background-color: var(--color-bg-secondary); h3 { @include flex-center; @@ -518,12 +827,12 @@ gap: $spacing-2; margin: 0 0 $spacing-3 0; padding-bottom: $spacing-2; - border-bottom: 1px solid $color-border; + border-bottom: 1px solid var(--color-border); font-size: $font-size-base; - color: $color-text-primary; + color: var(--color-text-primary); i { - color: $color-accent-primary; + color: var(--color-accent-primary); } } } @@ -531,21 +840,21 @@ .flag-table { width: 100%; border-collapse: collapse; - background-color: $color-parchment-light; + background-color: var(--color-bg-secondary); th, td { padding: $spacing-2; text-align: left; - border-bottom: 1px solid $color-border-light; - color: $color-text-primary; + border-bottom: 1px solid var(--color-border-light); + color: var(--color-text-primary); } th { font-size: $font-size-sm; font-weight: $font-weight-semibold; - color: $color-text-secondary; - background-color: $color-parchment-dark; + color: var(--color-text-secondary); + background-color: var(--color-bg-tertiary); &.center { text-align: center; @@ -553,7 +862,7 @@ } td { - background-color: $color-parchment-light !important; + background-color: var(--color-bg-secondary); &.center { text-align: center; @@ -564,17 +873,16 @@ } } - // Alternating row colors with good contrast tbody tr:nth-child(even) td { - background-color: $color-parchment !important; + background-color: var(--color-bg-primary); } .stat-tag { font-size: $font-size-xs; padding: $spacing-1 $spacing-2; - background-color: $color-parchment-dark; + background-color: var(--color-bg-tertiary); border-radius: $radius-full; - color: $color-text-secondary; + color: var(--color-text-secondary); text-transform: uppercase; } @@ -582,11 +890,11 @@ width: 1.25rem; height: 1.25rem; cursor: pointer; - accent-color: $color-accent-primary; + accent-color: var(--color-accent-primary); } tbody tr:hover td { - background-color: $color-parchment-dark; + background-color: var(--color-bg-tertiary); } } @@ -594,7 +902,7 @@ display: flex; gap: $spacing-3; padding-top: $spacing-3; - border-top: 1px solid $color-border; + border-top: 1px solid var(--color-border); button { @include button-base; @@ -608,11 +916,11 @@ .clear-btn { @include button-secondary; - color: $color-danger; - border-color: $color-danger; + color: var(--color-danger); + border-color: var(--color-danger); &:hover:not(:disabled) { - background-color: rgba($color-danger, 0.1); + background-color: rgba(201, 68, 68, 0.1); } } } @@ -623,7 +931,7 @@ gap: $spacing-3; padding: $spacing-6; text-align: center; - color: $color-text-muted; + color: var(--color-text-muted); i { font-size: $font-size-4xl; diff --git a/styles/scss/sheets/_actor-sheet.scss b/styles/scss/sheets/_actor-sheet.scss index b0d49df..673e7d1 100644 --- a/styles/scss/sheets/_actor-sheet.scss +++ b/styles/scss/sheets/_actor-sheet.scss @@ -14,8 +14,8 @@ grid-template-columns: auto 1fr auto; gap: $spacing-4; padding: $spacing-4; - background-color: $color-parchment-dark; - border-bottom: 2px solid $color-border; + background-color: var(--color-bg-secondary); + border-bottom: 2px solid var(--color-border); // Left column - Portrait .header-left { @@ -70,14 +70,14 @@ label { font-size: $font-size-xs; font-weight: $font-weight-semibold; - color: $color-text-secondary; + color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } span { font-size: $font-size-sm; - color: $color-text-primary; + color: var(--color-text-primary); } input { @@ -121,7 +121,7 @@ > label { font-size: $font-size-xs; font-weight: $font-weight-bold; - color: $color-text-secondary; + color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } @@ -137,8 +137,8 @@ flex: 1; position: relative; height: 28px; - background-color: $color-parchment-darker; - border: 1px solid $color-border; + background-color: var(--color-bg-secondary) er; + border: 1px solid var(--color-border); border-radius: $radius-md; overflow: hidden; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.15); @@ -165,10 +165,10 @@ justify-content: center; gap: $spacing-1; padding: $spacing-1 $spacing-2; - background: rgba($color-parchment-light, 0.85); + background: var(--color-bar-values-bg); border-radius: $radius-full; font-weight: $font-weight-semibold; - color: $color-text-primary; + color: var(--color-text-primary); input { width: 32px; @@ -176,25 +176,26 @@ font-size: $font-size-sm; font-weight: $font-weight-bold; text-align: center; - background: rgba(255, 255, 255, 0.9); - border: 1px solid $color-border-light; + background: var(--color-bar-input-bg); + border: 1px solid var(--color-border-light); border-radius: $radius-sm; + color: var(--color-text-primary); &:focus { - background: white; + background: var(--color-bg-input); outline: none; - border-color: $color-accent-primary; + border-color: var(--color-accent-primary); } } .separator { - color: $color-text-secondary; + color: var(--color-text-secondary); font-size: $font-size-sm; } .max { font-size: $font-size-sm; - color: $color-text-secondary; + color: var(--color-text-secondary); } } } @@ -210,14 +211,14 @@ width: 24px; height: 24px; padding: 0; - background-color: $color-parchment; - border: 1px solid $color-border; - color: $color-text-primary; + background-color: var(--color-bg-primary); + border: 1px solid var(--color-border); + color: var(--color-text-primary); &:hover:not(:disabled) { - background-color: $color-parchment-dark; - border-color: $color-accent-primary; - color: $color-accent-primary; + background-color: var(--color-bg-secondary); + border-color: var(--color-accent-primary); + color: var(--color-accent-primary); } i { @@ -230,26 +231,26 @@ // HP-specific colors &.hp { .bar-fill { - background: linear-gradient(to bottom, $color-danger, darken($color-danger, 10%)); + background: linear-gradient(to bottom, var(--color-danger), #6b0000); } &.healthy .bar-fill { - background: linear-gradient(to bottom, $color-success, darken($color-success, 10%)); + background: linear-gradient(to bottom, var(--color-success), #1f3f1b); } &.warning .bar-fill { - background: linear-gradient(to bottom, $color-warning, darken($color-warning, 10%)); + background: linear-gradient(to bottom, var(--color-warning), #9a7009); } &.critical .bar-fill { - background: linear-gradient(to bottom, $color-danger, darken($color-danger, 15%)); + background: linear-gradient(to bottom, var(--color-danger), #580000); } } // Mana-specific colors &.mana { .bar-fill { - background: linear-gradient(to bottom, $color-info, darken($color-info, 10%)); + background: linear-gradient(to bottom, var(--color-info), #1f3838); } } } @@ -268,33 +269,33 @@ align-items: center; gap: $spacing-1; padding: $spacing-1 $spacing-2; - background-color: $color-parchment; - border: 1px solid $color-border-light; + background-color: var(--color-bg-primary); + border: 1px solid var(--color-border)-light; border-radius: $radius-md; font-size: $font-size-sm; label { font-weight: $font-weight-semibold; - color: $color-text-secondary; + color: var(--color-text-secondary); margin-right: auto; } .value { font-weight: $font-weight-bold; - color: $color-text-primary; + color: var(--color-text-primary); } .separator { - color: $color-text-muted; + color: var(--color-text-muted); } .max { - color: $color-text-secondary; + color: var(--color-text-secondary); } .unit { font-size: $font-size-xs; - color: $color-text-muted; + color: var(--color-text-muted); } input { @@ -303,24 +304,24 @@ font-size: $font-size-sm; font-weight: $font-weight-bold; text-align: center; - background: $color-parchment-light; - border: 1px solid $color-border-light; + background: var(--color-bg-input); + border: 1px solid var(--color-border)-light; border-radius: $radius-sm; &:focus { outline: none; - border-color: $color-accent-primary; + border-color: var(--color-accent-primary); } } // Danger state for fatigue &.danger { - background-color: rgba($color-danger, 0.1); - border-color: $color-danger; + background-color: rgba(139, 0, 0, 0.1); + border-color: var(--color-danger); label, .value { - color: $color-danger; + color: var(--color-danger); } } } @@ -335,7 +336,7 @@ // ---------------------------------------- .tab-content { padding: $spacing-4; - background-color: $color-parchment; + background-color: var(--color-bg-primary); overflow-y: auto; @include custom-scrollbar; @@ -351,10 +352,10 @@ font-family: $font-family-header; font-size: $font-size-lg; font-weight: $font-weight-bold; - color: $color-text-primary; + color: var(--color-text-primary); margin: 0 0 $spacing-3 0; padding-bottom: $spacing-2; - border-bottom: 2px solid $color-border; + border-bottom: 2px solid var(--color-border); text-transform: uppercase; letter-spacing: 0.05em; } @@ -363,7 +364,7 @@ font-family: $font-family-header; font-size: $font-size-base; font-weight: $font-weight-semibold; - color: $color-text-secondary; + color: var(--color-text-secondary); margin: $spacing-3 0 $spacing-2 0; } @@ -410,8 +411,8 @@ @include flex-column; align-items: center; padding: $spacing-2; - background-color: $color-parchment-light; - border: 1px solid $color-border-light; + background-color: var(--color-bg-input); + border: 1px solid var(--color-border)-light; border-radius: $radius-md; .stat-label { @@ -420,7 +421,7 @@ font-weight: $font-weight-bold; text-transform: uppercase; letter-spacing: 0.05em; - color: $color-text-secondary; + color: var(--color-text-secondary); margin-bottom: $spacing-1; } @@ -432,14 +433,14 @@ font-size: $font-size-2xl; font-weight: $font-weight-bold; text-align: center; - color: $color-text-primary; - background-color: $color-parchment; - border: 2px solid $color-border; + color: var(--color-text-primary); + background-color: var(--color-bg-primary); + border: 2px solid var(--color-border); border-radius: $radius-md; &:focus { outline: none; - border-color: $color-accent-primary; + border-color: var(--color-accent-primary); } } } @@ -487,29 +488,29 @@ align-items: center; gap: $spacing-2; padding: $spacing-2 $spacing-3; - background-color: $color-parchment-light; - border: 1px solid $color-border-light; + background-color: var(--color-bg-input); + border: 1px solid var(--color-border)-light; border-radius: $radius-md; cursor: pointer; transition: all $transition-fast; &:hover { - background-color: $color-parchment-dark; - border-color: $color-accent-primary; + background-color: var(--color-bg-secondary); + border-color: var(--color-accent-primary); .roll-icon { - color: $color-accent-primary; + color: var(--color-accent-primary); } } .save-label { font-weight: $font-weight-semibold; - color: $color-text-primary; + color: var(--color-text-primary); } .save-stats { font-size: $font-size-sm; - color: $color-text-secondary; + color: var(--color-text-secondary); margin-right: auto; } @@ -517,13 +518,13 @@ font-family: $font-family-header; font-size: $font-size-lg; font-weight: $font-weight-bold; - color: $color-text-primary; + color: var(--color-text-primary); min-width: 28px; text-align: center; } .roll-icon { - color: $color-text-muted; + color: var(--color-text-muted); transition: color $transition-fast; } } @@ -542,23 +543,23 @@ align-items: center; gap: $spacing-2; padding: $spacing-1 $spacing-2; - background-color: $color-parchment-light; - border: 1px solid $color-border-light; + background-color: var(--color-bg-input); + border: 1px solid var(--color-border)-light; border-radius: $radius-md; transition: all $transition-fast; &:hover { - background-color: $color-parchment-dark; - border-color: $color-border; + background-color: var(--color-bg-secondary); + border-color: var(--color-border); } &.trained { - background-color: rgba($color-success, 0.1); - border-color: rgba($color-success, 0.3); + background-color: rgba(45, 90, 39, 0.1); + border-color: rgba(45, 90, 39, 0.3); .skill-trained-toggle { - color: $color-success; - border-color: $color-success; + color: var(--color-success); + border-color: var(--color-success); } } @@ -568,15 +569,15 @@ height: 20px; padding: 0; background: transparent; - border: 1px solid $color-border; + border: 1px solid var(--color-border); border-radius: $radius-sm; - color: $color-text-muted; + color: var(--color-text-muted); cursor: pointer; transition: all $transition-fast; &:hover { - border-color: $color-accent-primary; - color: $color-accent-primary; + border-color: var(--color-accent-primary); + color: var(--color-accent-primary); } i { @@ -586,26 +587,26 @@ .skill-name { font-weight: $font-weight-medium; - color: $color-text-primary; + color: var(--color-text-primary); flex: 1; } .skill-stat { font-size: $font-size-xs; - color: $color-text-secondary; + color: var(--color-text-secondary); } .skill-difficulty { font-family: $font-family-header; font-weight: $font-weight-bold; - color: $color-text-primary; + color: var(--color-text-primary); min-width: 24px; text-align: center; } .skill-crit { font-size: $font-size-xs; - color: $color-warning; + color: var(--color-warning); i { margin-right: 2px; @@ -619,12 +620,12 @@ padding: 0; background: transparent; border: none; - color: $color-text-muted; + color: var(--color-text-muted); cursor: pointer; transition: color $transition-fast; &:hover { - color: $color-accent-primary; + color: var(--color-accent-primary); } } } @@ -658,37 +659,37 @@ align-items: center; gap: $spacing-2; padding: $spacing-2 $spacing-3; - background-color: $color-parchment-light; - border: 1px solid $color-border-light; + background-color: var(--color-bg-input); + border: 1px solid var(--color-border)-light; border-radius: $radius-md; cursor: pointer; transition: all $transition-fast; &:hover { - background-color: $color-parchment-dark; - border-color: $color-accent-primary; + background-color: var(--color-bg-secondary); + border-color: var(--color-accent-primary); } .attack-name { font-weight: $font-weight-semibold; - color: $color-text-primary; + color: var(--color-text-primary); } .attack-stat { font-size: $font-size-xs; - color: $color-text-secondary; + color: var(--color-text-secondary); margin-right: auto; } .attack-difficulty { font-family: $font-family-header; font-weight: $font-weight-bold; - color: $color-text-primary; + color: var(--color-text-primary); } .attack-crit { font-size: $font-size-xs; - color: $color-warning; + color: var(--color-warning); } } @@ -704,7 +705,7 @@ align-items: center; gap: $spacing-2; padding: $spacing-2; - border-bottom: 1px solid $color-border-light; + border-bottom: 1px solid var(--color-border)-light; &:last-child { border-bottom: none; @@ -713,18 +714,18 @@ .weapon-name { flex: 1; font-weight: $font-weight-medium; - color: $color-text-primary; + color: var(--color-text-primary); cursor: pointer; &:hover { - color: $color-accent-primary; + color: var(--color-accent-primary); } } .weapon-damage { font-family: $font-family-mono; font-size: $font-size-sm; - color: $color-danger; + color: var(--color-danger); } .weapon-roll { @@ -732,17 +733,17 @@ width: 28px; height: 28px; padding: 0; - background-color: $color-parchment; - border: 1px solid $color-border; + background-color: var(--color-bg-primary); + border: 1px solid var(--color-border); border-radius: $radius-md; - color: $color-text-primary; + color: var(--color-text-primary); cursor: pointer; transition: all $transition-fast; &:hover { - background-color: $color-accent-highlight; - border-color: $color-accent-primary; - color: $color-accent-primary; + background-color: var(--color-accent-highlight); + border-color: var(--color-accent-primary); + color: var(--color-accent-primary); } } } @@ -764,7 +765,7 @@ gap: $spacing-4; padding-bottom: $spacing-3; margin-bottom: $spacing-2; - border-bottom: 2px solid $color-border; + border-bottom: 2px solid var(--color-border); flex-wrap: nowrap; .header-stat { @@ -778,7 +779,7 @@ font-weight: $font-weight-semibold; text-transform: uppercase; letter-spacing: 0.05em; - color: $color-text-secondary; + color: var(--color-text-secondary); } .stat-value { @@ -790,15 +791,15 @@ .current { font-weight: $font-weight-bold; - color: $color-text-primary; + color: var(--color-text-primary); } .separator { - color: $color-text-muted; + color: var(--color-text-muted); } .max { - color: $color-text-secondary; + color: var(--color-text-secondary); } } @@ -809,13 +810,13 @@ font-size: $font-size-lg; font-weight: $font-weight-bold; text-align: center; - background-color: $color-parchment-light; - border: 1px solid $color-border; + background-color: var(--color-bg-input); + border: 1px solid var(--color-border); border-radius: $radius-md; &:focus { outline: none; - border-color: $color-accent-primary; + border-color: var(--color-accent-primary); } } @@ -831,11 +832,11 @@ } .overburdened-warning { - color: $color-danger; + color: var(--color-danger); } &.overburdened .current { - color: $color-danger; + color: var(--color-danger); } } @@ -873,16 +874,16 @@ width: 28px; height: 28px; padding: 0; - background-color: $color-parchment; - border: 1px solid $color-border; + background-color: var(--color-bg-primary); + border: 1px solid var(--color-border); border-radius: $radius-md; - color: $color-text-primary; + color: var(--color-text-primary); cursor: pointer; transition: all $transition-fast; &:hover { - background-color: $color-success; - border-color: $color-success; + background-color: var(--color-success); + border-color: var(--color-success); color: white; } @@ -898,8 +899,8 @@ list-style: none; margin: 0; padding: 0; - background-color: $color-parchment-light; - border: 1px solid $color-border-light; + background-color: var(--color-bg-input); + border: 1px solid var(--color-border)-light; border-radius: $radius-md; overflow: hidden; } @@ -909,7 +910,7 @@ align-items: center; gap: $spacing-2; padding: $spacing-2 $spacing-3; - border-bottom: 1px solid $color-border-light; + border-bottom: 1px solid var(--color-border)-light; transition: background-color $transition-fast; &:last-child { @@ -917,14 +918,14 @@ } &:hover { - background-color: $color-parchment; + background-color: var(--color-bg-primary); } &.empty { justify-content: center; padding: $spacing-4; font-style: italic; - color: $color-text-muted; + color: var(--color-text-muted); } // Item thumbnail @@ -932,9 +933,9 @@ width: 32px; height: 32px; object-fit: cover; - border: 1px solid $color-border; + border: 1px solid var(--color-border); border-radius: $radius-sm; - background-color: $color-parchment; + background-color: var(--color-bg-primary); flex-shrink: 0; } @@ -942,12 +943,12 @@ .item-name { flex: 1; font-weight: $font-weight-medium; - color: $color-text-primary; + color: var(--color-text-primary); cursor: pointer; transition: color $transition-fast; &:hover { - color: $color-accent-primary; + color: var(--color-accent-primary); text-decoration: underline; } } @@ -959,27 +960,27 @@ font-size: $font-size-sm; font-weight: $font-weight-semibold; padding: $spacing-1 $spacing-2; - background-color: rgba($color-danger, 0.1); + background-color: rgba(139, 0, 0, 0.1); border-radius: $radius-sm; - color: $color-danger; + color: var(--color-danger); } .item-armor-value { - background-color: rgba($color-info, 0.1); - color: $color-info; + background-color: rgba(47, 79, 79, 0.1); + color: var(--color-info); } .item-quantity { font-family: $font-family-mono; font-size: $font-size-sm; - color: $color-text-secondary; + color: var(--color-text-secondary); min-width: 32px; text-align: center; } .item-slots { font-size: $font-size-xs; - color: $color-text-muted; + color: var(--color-text-muted); white-space: nowrap; } @@ -991,9 +992,9 @@ height: 28px; padding: 0; background-color: transparent; - border: 1px solid $color-border-light; + border: 1px solid var(--color-border)-light; border-radius: $radius-sm; - color: $color-text-muted; + color: var(--color-text-muted); cursor: pointer; transition: all $transition-fast; flex-shrink: 0; @@ -1005,23 +1006,23 @@ .item-equipped { &:hover { - background-color: rgba($color-success, 0.1); - border-color: $color-success; - color: $color-success; + background-color: rgba(45, 90, 39, 0.1); + border-color: var(--color-success); + color: var(--color-success); } &.active { - background-color: $color-success; - border-color: $color-success; + background-color: var(--color-success); + border-color: var(--color-success); color: white; } } .item-delete { &:hover { - background-color: rgba($color-danger, 0.1); - border-color: $color-danger; - color: $color-danger; + background-color: rgba(139, 0, 0, 0.1); + border-color: var(--color-danger); + color: var(--color-danger); } } } @@ -1090,16 +1091,16 @@ width: 28px; height: 28px; padding: 0; - background-color: $color-parchment; - border: 1px solid $color-border; + background-color: var(--color-bg-primary); + border: 1px solid var(--color-border); border-radius: $radius-md; - color: $color-text-primary; + color: var(--color-text-primary); cursor: pointer; transition: all $transition-fast; &:hover { - background-color: $color-success; - border-color: $color-success; + background-color: var(--color-success); + border-color: var(--color-success); color: white; } @@ -1112,8 +1113,8 @@ // Ancestry Block .ancestry-block { - background-color: $color-parchment-light; - border: 1px solid $color-border-light; + background-color: var(--color-bg-input); + border: 1px solid var(--color-border)-light; border-radius: $radius-md; overflow: hidden; @@ -1122,16 +1123,16 @@ align-items: center; gap: $spacing-3; padding: $spacing-3; - background-color: $color-parchment-dark; - border-bottom: 1px solid $color-border-light; + background-color: var(--color-bg-secondary); + border-bottom: 1px solid var(--color-border)-light; .ancestry-img { width: 48px; height: 48px; object-fit: cover; - border: 2px solid $color-border; + border: 2px solid var(--color-border); border-radius: $radius-md; - background-color: $color-parchment; + background-color: var(--color-bg-primary); } .ancestry-info { @@ -1143,18 +1144,18 @@ font-family: $font-family-header; font-size: $font-size-lg; font-weight: $font-weight-bold; - color: $color-text-primary; + color: var(--color-text-primary); cursor: pointer; &:hover { - color: $color-accent-primary; + color: var(--color-accent-primary); } } .ancestry-being-type, .ancestry-size { font-size: $font-size-sm; - color: $color-text-secondary; + color: var(--color-text-secondary); } .ancestry-being-type::after { @@ -1168,7 +1169,7 @@ .trait { padding: $spacing-2 0; - border-bottom: 1px solid $color-border-light; + border-bottom: 1px solid var(--color-border)-light; font-size: $font-size-sm; line-height: $line-height-relaxed; @@ -1182,7 +1183,7 @@ } strong { - color: $color-text-primary; + color: var(--color-text-primary); } } } @@ -1204,13 +1205,13 @@ grid-template-rows: auto auto; gap: $spacing-2; padding: $spacing-3; - background-color: $color-parchment-light; - border: 1px solid $color-border-light; + background-color: var(--color-bg-input); + border: 1px solid var(--color-border)-light; border-radius: $radius-md; transition: background-color $transition-fast; &:hover { - background-color: $color-parchment; + background-color: var(--color-bg-primary); } &.empty { @@ -1218,7 +1219,7 @@ justify-content: center; padding: $spacing-4; font-style: italic; - color: $color-text-muted; + color: var(--color-text-muted); } .ability-img { @@ -1226,9 +1227,9 @@ width: 40px; height: 40px; object-fit: cover; - border: 1px solid $color-border; + border: 1px solid var(--color-border); border-radius: $radius-md; - background-color: $color-parchment; + background-color: var(--color-bg-primary); } .ability-info { @@ -1238,11 +1239,11 @@ .ability-name { font-weight: $font-weight-semibold; - color: $color-text-primary; + color: var(--color-text-primary); cursor: pointer; &:hover { - color: $color-accent-primary; + color: var(--color-accent-primary); text-decoration: underline; } } @@ -1250,7 +1251,7 @@ .ability-source, .ability-prereqs { font-size: $font-size-xs; - color: $color-text-secondary; + color: var(--color-text-secondary); } .ability-prereqs { @@ -1261,7 +1262,7 @@ .ability-description { grid-column: 2 / -1; font-size: $font-size-sm; - color: $color-text-secondary; + color: var(--color-text-secondary); line-height: $line-height-normal; // Style inline HTML from descriptions @@ -1282,16 +1283,16 @@ height: 28px; padding: 0; background-color: transparent; - border: 1px solid $color-border-light; + border: 1px solid var(--color-border)-light; border-radius: $radius-sm; - color: $color-text-muted; + color: var(--color-text-muted); cursor: pointer; transition: all $transition-fast; &:hover { - background-color: rgba($color-danger, 0.1); - border-color: $color-danger; - color: $color-danger; + background-color: rgba(139, 0, 0, 0.1); + border-color: var(--color-danger); + color: var(--color-danger); } i { @@ -1323,8 +1324,8 @@ align-items: center; gap: $spacing-2; padding: $spacing-2 $spacing-3; - background-color: $color-parchment-light; - border: 1px solid $color-border-light; + background-color: var(--color-bg-input); + border: 1px solid var(--color-border)-light; border-radius: $radius-md; .effect-icon { @@ -1337,20 +1338,20 @@ .effect-name { flex: 1; font-weight: $font-weight-medium; - color: $color-text-primary; + color: var(--color-text-primary); } .effect-duration { font-size: $font-size-xs; padding: $spacing-1 $spacing-2; - background-color: rgba($color-warning, 0.15); + background-color: rgba(184, 134, 11, 0.15); border-radius: $radius-sm; - color: $color-warning; + color: var(--color-warning); } .effect-source { font-size: $font-size-xs; - color: $color-text-muted; + color: var(--color-text-muted); } } @@ -1397,7 +1398,7 @@ gap: $spacing-4; padding-bottom: $spacing-3; margin-bottom: $spacing-2; - border-bottom: 2px solid $color-border; + border-bottom: 2px solid var(--color-border); } // Mana Display - matches inventory item-slots format @@ -1413,7 +1414,7 @@ font-weight: $font-weight-semibold; text-transform: uppercase; letter-spacing: 0.05em; - color: $color-text-secondary; + color: var(--color-text-secondary); } .mana-values { @@ -1430,23 +1431,23 @@ font-size: $font-size-lg; font-weight: $font-weight-bold; text-align: center; - color: $color-text-primary; - background-color: $color-parchment-light; - border: 1px solid $color-border; + color: var(--color-text-primary); + background-color: var(--color-bg-input); + border: 1px solid var(--color-border); border-radius: $radius-sm; &:focus { outline: none; - border-color: $color-accent-primary; + border-color: var(--color-accent-primary); } } .separator { - color: $color-text-muted; + color: var(--color-text-muted); } .max { - color: $color-text-secondary; + color: var(--color-text-secondary); } } @@ -1456,16 +1457,16 @@ gap: $spacing-2; margin-left: $spacing-3; padding-left: $spacing-3; - border-left: 1px solid $color-border-light; + border-left: 1px solid var(--color-border)-light; font-size: $font-size-sm; .label { - color: $color-text-muted; + color: var(--color-text-muted); } .value { font-weight: $font-weight-bold; - color: $color-info; + color: var(--color-info); } } } @@ -1475,8 +1476,8 @@ flex: 1; min-width: 200px; padding: $spacing-3; - background-color: rgba($color-warning, 0.1); - border: 1px solid rgba($color-warning, 0.3); + background-color: rgba(184, 134, 11, 0.1); + border: 1px solid rgba(184, 134, 11, 0.3); border-radius: $radius-md; h3 { @@ -1484,7 +1485,7 @@ font-family: $font-family-header; font-size: $font-size-base; font-weight: $font-weight-bold; - color: $color-warning; + color: var(--color-warning); text-transform: uppercase; letter-spacing: 0.05em; } @@ -1504,25 +1505,25 @@ align-items: center; gap: $spacing-2; padding: $spacing-2; - background-color: $color-parchment-light; + background-color: var(--color-bg-input); border-radius: $radius-sm; .focus-spell { font-weight: $font-weight-semibold; - color: $color-text-primary; + color: var(--color-text-primary); } .focus-target { font-size: $font-size-sm; - color: $color-text-secondary; + color: var(--color-text-secondary); } .focus-cost { font-size: $font-size-xs; padding: $spacing-1 $spacing-2; - background-color: rgba($color-info, 0.1); + background-color: rgba(47, 79, 79, 0.1); border-radius: $radius-sm; - color: $color-info; + color: var(--color-info); margin-left: auto; } } @@ -1547,16 +1548,16 @@ width: 28px; height: 28px; padding: 0; - background-color: $color-parchment; - border: 1px solid $color-border; + background-color: var(--color-bg-primary); + border: 1px solid var(--color-border); border-radius: $radius-md; - color: $color-text-primary; + color: var(--color-text-primary); cursor: pointer; transition: all $transition-fast; &:hover { - background-color: $color-success; - border-color: $color-success; + background-color: var(--color-success); + border-color: var(--color-success); color: white; } @@ -1583,14 +1584,14 @@ gap: $spacing-3; align-items: center; padding: $spacing-3; - background-color: $color-parchment-light; - border: 1px solid $color-border-light; + background-color: var(--color-bg-input); + border: 1px solid var(--color-border)-light; border-radius: $radius-md; transition: all $transition-fast; &:hover { - background-color: $color-parchment; - border-color: $color-border; + background-color: var(--color-bg-primary); + border-color: var(--color-border); } &.empty { @@ -1598,16 +1599,16 @@ justify-content: center; padding: $spacing-4; font-style: italic; - color: $color-text-muted; + color: var(--color-text-muted); } .spell-img { width: 40px; height: 40px; object-fit: cover; - border: 1px solid $color-border; + border: 1px solid var(--color-border); border-radius: $radius-md; - background-color: $color-parchment; + background-color: var(--color-bg-primary); } .spell-info { @@ -1617,18 +1618,18 @@ .spell-name { font-weight: $font-weight-semibold; - color: $color-text-primary; + color: var(--color-text-primary); cursor: pointer; &:hover { - color: $color-accent-primary; + color: var(--color-accent-primary); text-decoration: underline; } } .spell-type { font-size: $font-size-xs; - color: $color-text-secondary; + color: var(--color-text-secondary); text-transform: capitalize; } } @@ -1643,12 +1644,12 @@ align-items: center; gap: $spacing-1; padding: $spacing-1 $spacing-2; - background-color: rgba($color-danger, 0.1); + background-color: rgba(139, 0, 0, 0.1); border-radius: $radius-sm; font-family: $font-family-mono; font-size: $font-size-sm; font-weight: $font-weight-semibold; - color: $color-danger; + color: var(--color-danger); i { font-size: $font-size-xs; @@ -1660,10 +1661,10 @@ align-items: center; gap: $spacing-1; padding: $spacing-1 $spacing-2; - background-color: rgba($color-info, 0.1); + background-color: rgba(47, 79, 79, 0.1); border-radius: $radius-sm; font-size: $font-size-sm; - color: $color-info; + color: var(--color-info); cursor: help; i { @@ -1682,7 +1683,7 @@ align-items: center; gap: $spacing-1; padding: $spacing-2 $spacing-3; - background-color: $color-info; + background-color: var(--color-info); border: none; border-radius: $radius-md; font-size: $font-size-sm; @@ -1692,7 +1693,7 @@ transition: all $transition-fast; &:hover { - background-color: darken($color-info, 10%); + background-color: #1f3838; } i { @@ -1706,16 +1707,16 @@ height: 28px; padding: 0; background-color: transparent; - border: 1px solid $color-border-light; + border: 1px solid var(--color-border)-light; border-radius: $radius-sm; - color: $color-text-muted; + color: var(--color-text-muted); cursor: pointer; transition: all $transition-fast; &:hover { - background-color: rgba($color-danger, 0.1); - border-color: $color-danger; - color: $color-danger; + background-color: rgba(139, 0, 0, 0.1); + border-color: var(--color-danger); + color: var(--color-danger); } i { @@ -1728,8 +1729,8 @@ // Casting Reference .casting-reference { padding: $spacing-3; - background-color: $color-parchment-light; - border: 1px solid $color-border-light; + background-color: var(--color-bg-input); + border: 1px solid var(--color-border)-light; border-radius: $radius-md; > h3 { @@ -1737,11 +1738,11 @@ font-family: $font-family-header; font-size: $font-size-base; font-weight: $font-weight-bold; - color: $color-text-secondary; + color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; padding-bottom: $spacing-2; - border-bottom: 1px solid $color-border-light; + border-bottom: 1px solid var(--color-border)-light; } .reference-grid { @@ -1755,7 +1756,7 @@ margin: 0 0 $spacing-2 0; font-size: $font-size-sm; font-weight: $font-weight-semibold; - color: $color-text-primary; + color: var(--color-text-primary); } ul { @@ -1768,11 +1769,11 @@ li { font-size: $font-size-sm; - color: $color-text-secondary; + color: var(--color-text-secondary); line-height: $line-height-normal; strong { - color: $color-text-primary; + color: var(--color-text-primary); } } } @@ -1841,7 +1842,7 @@ font-weight: $font-weight-semibold; text-transform: uppercase; letter-spacing: 0.05em; - color: $color-text-secondary; + color: var(--color-text-secondary); } select { @@ -1852,7 +1853,7 @@ &:focus { outline: none; - border-color: $color-accent-primary; + border-color: var(--color-accent-primary); } } } @@ -1871,28 +1872,28 @@ gap: $spacing-2; font-size: $font-size-sm; font-weight: $font-weight-medium; - color: $color-text-primary; + color: var(--color-text-primary); cursor: pointer; padding: $spacing-2; - background-color: $color-parchment-light; - border: 1px solid $color-border-light; + background-color: var(--color-bg-input); + border: 1px solid var(--color-border)-light; border-radius: $radius-sm; transition: all $transition-fast; &:hover { - background-color: $color-parchment; - border-color: $color-border; + background-color: var(--color-bg-primary); + border-color: var(--color-border); } input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; - accent-color: $color-accent-primary; + accent-color: var(--color-accent-primary); &:checked + span, &:checked ~ span { - color: $color-accent-primary; + color: var(--color-accent-primary); font-weight: $font-weight-semibold; } } @@ -1900,8 +1901,8 @@ // Style when checkbox is checked &:has(input:checked) label { - background-color: rgba($color-success, 0.1); - border-color: rgba($color-success, 0.3); + background-color: rgba(45, 90, 39, 0.1); + border-color: rgba(45, 90, 39, 0.3); } } } @@ -1919,28 +1920,28 @@ gap: $spacing-2; font-size: $font-size-sm; font-weight: $font-weight-medium; - color: $color-text-primary; + color: var(--color-text-primary); cursor: pointer; padding: $spacing-2; - background-color: $color-parchment-light; - border: 1px solid $color-border-light; + background-color: var(--color-bg-input); + border: 1px solid var(--color-border)-light; border-radius: $radius-sm; transition: all $transition-fast; &:hover { - background-color: $color-parchment; - border-color: $color-border; + background-color: var(--color-bg-primary); + border-color: var(--color-border); } input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; - accent-color: $color-accent-primary; + accent-color: var(--color-accent-primary); &:checked + span, &:checked ~ span { - color: $color-accent-primary; + color: var(--color-accent-primary); font-weight: $font-weight-semibold; } } @@ -1948,8 +1949,8 @@ // Style when checkbox is checked &:has(input:checked) label { - background-color: rgba($color-success, 0.1); - border-color: rgba($color-success, 0.3); + background-color: rgba(45, 90, 39, 0.1); + border-color: rgba(45, 90, 39, 0.3); } } } @@ -1958,8 +1959,8 @@ .biography-text, .notes { .editor-container { - background-color: $color-parchment-light; - border: 1px solid $color-border; + background-color: var(--color-bg-input); + border: 1px solid var(--color-border); border-radius: $radius-md; overflow: hidden; } @@ -1971,7 +1972,7 @@ font-family: $font-family-body; font-size: $font-size-sm; line-height: $line-height-relaxed; - color: $color-text-primary; + color: var(--color-text-primary); background-color: transparent; border: none; resize: vertical; @@ -1981,7 +1982,7 @@ } &::placeholder { - color: $color-text-muted; + color: var(--color-text-muted); font-style: italic; } } @@ -2020,21 +2021,21 @@ grid-template-columns: auto 1fr auto; gap: $spacing-3; padding: $spacing-3; - background-color: $color-parchment-dark; - border-bottom: 2px solid $color-border; + background-color: var(--color-bg-secondary); + border-bottom: 2px solid var(--color-border); .header-portrait { .profile-img { width: 80px; height: 80px; object-fit: cover; - border: 2px solid $color-border; + border: 2px solid var(--color-border); border-radius: $radius-md; cursor: pointer; transition: border-color $transition-fast; &:hover { - border-color: $color-accent-primary; + border-color: var(--color-accent-primary); } } } @@ -2052,7 +2053,7 @@ font-family: $font-family-header; font-size: $font-size-xl; font-weight: $font-weight-bold; - color: $color-text-primary; + color: var(--color-text-primary); background: transparent; border: none; border-bottom: 1px solid transparent; @@ -2060,7 +2061,7 @@ &:hover, &:focus { - border-bottom-color: $color-border; + border-bottom-color: var(--color-border); outline: none; } } @@ -2077,8 +2078,8 @@ align-items: center; gap: 2px; padding: $spacing-2; - background-color: $color-parchment-light; - border: 1px solid $color-border; + background-color: var(--color-bg-input); + border: 1px solid var(--color-border); border-radius: $radius-sm; min-width: 50px; @@ -2086,7 +2087,7 @@ font-size: $font-size-xs; font-weight: $font-weight-semibold; text-transform: uppercase; - color: $color-text-secondary; + color: var(--color-text-secondary); } input { @@ -2095,7 +2096,7 @@ font-size: $font-size-lg; font-weight: $font-weight-bold; text-align: center; - color: $color-text-primary; + color: var(--color-text-primary); background: transparent; border: none; @@ -2120,16 +2121,16 @@ width: 24px; height: 24px; padding: 0; - background-color: $color-parchment; - border: 1px solid $color-border; + background-color: var(--color-bg-primary); + border: 1px solid var(--color-border); border-radius: $radius-sm; - color: $color-text-primary; + color: var(--color-text-primary); cursor: pointer; transition: all $transition-fast; &:hover:not(:disabled) { - background-color: $color-accent-primary; - border-color: $color-accent-primary; + background-color: var(--color-accent-primary); + border-color: var(--color-accent-primary); color: white; } @@ -2162,14 +2163,14 @@ font-size: $font-size-xs; font-weight: $font-weight-semibold; text-transform: uppercase; - color: $color-text-secondary; + color: var(--color-text-secondary); } .bar-container { position: relative; height: 32px; - background-color: $color-parchment-light; - border: 2px solid $color-border; + background-color: var(--color-bg-input); + border: 2px solid var(--color-border); border-radius: $radius-md; overflow: hidden; @@ -2178,7 +2179,7 @@ top: 0; left: 0; height: 100%; - background: linear-gradient(to bottom, $color-success, darken($color-success, 10%)); + background: linear-gradient(to bottom, var(--color-success), #1f3f1b); transition: width 0.3s ease; } @@ -2196,7 +2197,7 @@ font-size: $font-size-base; font-weight: $font-weight-bold; text-align: center; - color: $color-text-primary; + color: var(--color-text-primary); background: transparent; border: none; @@ -2208,7 +2209,7 @@ } .separator { - color: $color-text-secondary; + color: var(--color-text-secondary); margin: 0 2px; } } @@ -2216,11 +2217,11 @@ // HP state colors &.half .bar-fill { - background: linear-gradient(to bottom, $color-warning, darken($color-warning, 10%)); + background: linear-gradient(to bottom, var(--color-warning), #9a7009); } &.dead .bar-fill { - background: linear-gradient(to bottom, $color-danger, darken($color-danger, 10%)); + background: linear-gradient(to bottom, var(--color-danger), #6b0000); } } @@ -2229,12 +2230,12 @@ align-items: center; gap: $spacing-1; padding: $spacing-1 $spacing-2; - background-color: rgba($color-danger, 0.1); - border: 1px solid rgba($color-danger, 0.3); + background-color: rgba(139, 0, 0, 0.1); + border: 1px solid rgba(139, 0, 0, 0.3); border-radius: $radius-sm; font-size: $font-size-xs; font-weight: $font-weight-semibold; - color: $color-danger; + color: var(--color-danger); i { font-size: $font-size-sm; @@ -2264,8 +2265,8 @@ flex-direction: column; gap: $spacing-3; padding: $spacing-3; - background-color: $color-parchment-light; - border: 1px solid $color-border; + background-color: var(--color-bg-input); + border: 1px solid var(--color-border); border-radius: $radius-md; .stats-row { @@ -2284,7 +2285,7 @@ font-weight: $font-weight-semibold; text-transform: uppercase; letter-spacing: 0.05em; - color: $color-text-secondary; + color: var(--color-text-secondary); // Rollable labels (e.g., Appearing) &.rollable { @@ -2295,16 +2296,16 @@ transition: color $transition-fast; &:hover { - color: $color-accent-primary; + color: var(--color-accent-primary); i { - color: $color-accent-primary; + color: var(--color-accent-primary); } } i { font-size: $font-size-xs; - color: $color-text-muted; + color: var(--color-text-muted); transition: color $transition-fast; } } @@ -2322,7 +2323,7 @@ margin: 0; font-size: $font-size-xs; font-style: italic; - color: $color-text-muted; + color: var(--color-text-muted); line-height: $line-height-tight; } } @@ -2339,20 +2340,20 @@ font-size: $font-size-base; font-weight: $font-weight-semibold; text-align: center; - background-color: $color-parchment; - border: 1px solid $color-border-light; + background-color: var(--color-bg-primary); + border: 1px solid var(--color-border)-light; border-radius: $radius-sm; &:focus { outline: none; background-color: white; - border-color: $color-accent-primary; + border-color: var(--color-accent-primary); } } .unit { font-size: $font-size-sm; - color: $color-text-muted; + color: var(--color-text-muted); } } } @@ -2360,13 +2361,13 @@ // Movement Section (uses same styling as biography movement-grid) .biography-section.movement { padding: $spacing-2 0; - border-top: 1px solid $color-border-light; + border-top: 1px solid var(--color-border)-light; .section-header { font-family: $font-family-header; font-size: $font-size-sm; font-weight: $font-weight-bold; - color: $color-text-secondary; + color: var(--color-text-secondary); margin: 0 0 $spacing-2 0; padding: 0; border: none; @@ -2386,30 +2387,30 @@ gap: $spacing-2; font-size: $font-size-sm; font-weight: $font-weight-medium; - color: $color-text-primary; + color: var(--color-text-primary); cursor: pointer; padding: $spacing-2; - background-color: $color-parchment-light; - border: 1px solid $color-border-light; + background-color: var(--color-bg-input); + border: 1px solid var(--color-border)-light; border-radius: $radius-sm; transition: all $transition-fast; &:hover { - background-color: $color-parchment; - border-color: $color-border; + background-color: var(--color-bg-primary); + border-color: var(--color-border); } input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; - accent-color: $color-accent-primary; + accent-color: var(--color-accent-primary); } } .movement-field:has(input:checked) label { - background-color: rgba($color-success, 0.1); - border-color: rgba($color-success, 0.3); + background-color: rgba(45, 90, 39, 0.1); + border-color: rgba(45, 90, 39, 0.3); } } @@ -2428,7 +2429,7 @@ font-size: $font-size-xs; font-weight: $font-weight-semibold; text-transform: uppercase; - color: $color-text-secondary; + color: var(--color-text-secondary); } } } @@ -2440,21 +2441,21 @@ align-items: center; gap: $spacing-2; padding-top: $spacing-2; - border-top: 1px solid $color-border-light; + border-top: 1px solid var(--color-border)-light; > label { font-size: $font-size-sm; font-weight: $font-weight-semibold; - color: $color-text-secondary; + color: var(--color-text-secondary); } .sense-tag { padding: $spacing-1 $spacing-2; font-size: $font-size-xs; font-weight: $font-weight-medium; - color: $color-info; - background-color: rgba($color-info, 0.1); - border: 1px solid rgba($color-info, 0.3); + color: var(--color-info); + background-color: rgba(47, 79, 79, 0.1); + border: 1px solid rgba(47, 79, 79, 0.3); border-radius: $radius-sm; } } @@ -2465,7 +2466,7 @@ flex-direction: column; gap: $spacing-2; padding-top: $spacing-2; - border-top: 1px solid $color-border-light; + border-top: 1px solid var(--color-border)-light; .modifier-row { display: flex; @@ -2476,7 +2477,7 @@ > label { font-size: $font-size-sm; font-weight: $font-weight-semibold; - color: $color-text-secondary; + color: var(--color-text-secondary); min-width: 80px; } @@ -2494,21 +2495,21 @@ text-transform: capitalize; &.immune { - color: darken($color-info, 20%); - background-color: rgba($color-info, 0.15); - border: 1px solid rgba($color-info, 0.3); + color: #1a2929; + background-color: rgba(47, 79, 79, 0.15); + border: 1px solid rgba(47, 79, 79, 0.3); } &.resist { - color: darken($color-success, 20%); - background-color: rgba($color-success, 0.15); - border: 1px solid rgba($color-success, 0.3); + color: #163015; + background-color: rgba(45, 90, 39, 0.15); + border: 1px solid rgba(45, 90, 39, 0.3); } &.weak { - color: darken($color-danger, 10%); - background-color: rgba($color-danger, 0.15); - border: 1px solid rgba($color-danger, 0.3); + color: #6b0000; + background-color: rgba(139, 0, 0, 0.15); + border: 1px solid rgba(139, 0, 0, 0.3); } } } @@ -2530,7 +2531,7 @@ font-family: $font-family-header; font-size: $font-size-base; font-weight: $font-weight-bold; - color: $color-text-primary; + color: var(--color-text-primary); text-transform: uppercase; letter-spacing: 0.05em; } @@ -2540,16 +2541,16 @@ width: 28px; height: 28px; padding: 0; - background-color: $color-parchment; - border: 1px solid $color-border; + background-color: var(--color-bg-primary); + border: 1px solid var(--color-border); border-radius: $radius-md; - color: $color-text-primary; + color: var(--color-text-primary); cursor: pointer; transition: all $transition-fast; &:hover { - background-color: $color-success; - border-color: $color-success; + background-color: var(--color-success); + border-color: var(--color-success); color: white; } @@ -2570,8 +2571,8 @@ .action-item { padding: $spacing-3; - background-color: $color-parchment-light; - border: 1px solid $color-border; + background-color: var(--color-bg-input); + border: 1px solid var(--color-border); border-radius: $radius-md; &.empty { @@ -2584,7 +2585,7 @@ p { margin: 0; font-style: italic; - color: $color-text-muted; + color: var(--color-text-muted); } button { @@ -2592,17 +2593,17 @@ align-items: center; gap: $spacing-1; padding: $spacing-2 $spacing-3; - background-color: $color-parchment; - border: 1px solid $color-border; + background-color: var(--color-bg-primary); + border: 1px solid var(--color-border); border-radius: $radius-md; font-size: $font-size-sm; - color: $color-text-primary; + color: var(--color-text-primary); cursor: pointer; transition: all $transition-fast; &:hover { - background-color: $color-success; - border-color: $color-success; + background-color: var(--color-success); + border-color: var(--color-success); color: white; } } @@ -2620,7 +2621,7 @@ font-family: $font-family-header; font-size: $font-size-base; font-weight: $font-weight-semibold; - color: $color-text-primary; + color: var(--color-text-primary); background: transparent; border: none; border-bottom: 1px solid transparent; @@ -2628,7 +2629,7 @@ &:hover, &:focus { - border-bottom-color: $color-border; + border-bottom-color: var(--color-border); outline: none; } } @@ -2642,23 +2643,23 @@ width: 28px; height: 28px; padding: 0; - background-color: $color-parchment; - border: 1px solid $color-border; + background-color: var(--color-bg-primary); + border: 1px solid var(--color-border); border-radius: $radius-sm; - color: $color-text-primary; + color: var(--color-text-primary); cursor: pointer; transition: all $transition-fast; &.action-roll:hover { - background-color: $color-accent-primary; - border-color: $color-accent-primary; + background-color: var(--color-accent-primary); + border-color: var(--color-accent-primary); color: white; } &.action-delete:hover { - background-color: rgba($color-danger, 0.1); - border-color: $color-danger; - color: $color-danger; + background-color: rgba(139, 0, 0, 0.1); + border-color: var(--color-danger); + color: var(--color-danger); } i { @@ -2683,7 +2684,7 @@ font-size: $font-size-xs; font-weight: $font-weight-semibold; text-transform: uppercase; - color: $color-text-secondary; + color: var(--color-text-secondary); } input, @@ -2702,19 +2703,19 @@ padding: $spacing-2; font-size: $font-size-sm; line-height: $line-height-relaxed; - color: $color-text-primary; - background-color: $color-parchment; - border: 1px solid $color-border-light; + color: var(--color-text-primary); + background-color: var(--color-bg-primary); + border: 1px solid var(--color-border)-light; border-radius: $radius-sm; resize: vertical; &:focus { outline: none; - border-color: $color-accent-primary; + border-color: var(--color-accent-primary); } &::placeholder { - color: $color-text-muted; + color: var(--color-text-muted); font-style: italic; } } @@ -2737,7 +2738,7 @@ font-family: $font-family-header; font-size: $font-size-base; font-weight: $font-weight-bold; - color: $color-text-primary; + color: var(--color-text-primary); text-transform: uppercase; letter-spacing: 0.05em; } @@ -2747,16 +2748,16 @@ width: 28px; height: 28px; padding: 0; - background-color: $color-parchment; - border: 1px solid $color-border; + background-color: var(--color-bg-primary); + border: 1px solid var(--color-border); border-radius: $radius-md; - color: $color-text-primary; + color: var(--color-text-primary); cursor: pointer; transition: all $transition-fast; &:hover { - background-color: $color-success; - border-color: $color-success; + background-color: var(--color-success); + border-color: var(--color-success); color: white; } @@ -2777,8 +2778,8 @@ .ability-item { padding: $spacing-3; - background-color: $color-parchment-light; - border: 1px solid $color-border; + background-color: var(--color-bg-input); + border: 1px solid var(--color-border); border-radius: $radius-md; &.empty { @@ -2791,7 +2792,7 @@ p { margin: 0; font-style: italic; - color: $color-text-muted; + color: var(--color-text-muted); } button { @@ -2799,17 +2800,17 @@ align-items: center; gap: $spacing-1; padding: $spacing-2 $spacing-3; - background-color: $color-parchment; - border: 1px solid $color-border; + background-color: var(--color-bg-primary); + border: 1px solid var(--color-border); border-radius: $radius-md; font-size: $font-size-sm; - color: $color-text-primary; + color: var(--color-text-primary); cursor: pointer; transition: all $transition-fast; &:hover { - background-color: $color-success; - border-color: $color-success; + background-color: var(--color-success); + border-color: var(--color-success); color: white; } } @@ -2827,7 +2828,7 @@ font-family: $font-family-header; font-size: $font-size-base; font-weight: $font-weight-semibold; - color: $color-text-primary; + color: var(--color-text-primary); background: transparent; border: none; border-bottom: 1px solid transparent; @@ -2835,7 +2836,7 @@ &:hover, &:focus { - border-bottom-color: $color-border; + border-bottom-color: var(--color-border); outline: none; } } @@ -2850,14 +2851,14 @@ align-items: center; gap: $spacing-1; font-size: $font-size-xs; - color: $color-text-secondary; + color: var(--color-text-secondary); cursor: pointer; input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; - accent-color: $color-accent-primary; + accent-color: var(--color-accent-primary); } } @@ -2867,16 +2868,16 @@ height: 24px; padding: 0; background-color: transparent; - border: 1px solid $color-border-light; + border: 1px solid var(--color-border)-light; border-radius: $radius-sm; - color: $color-text-muted; + color: var(--color-text-muted); cursor: pointer; transition: all $transition-fast; &:hover { - background-color: rgba($color-danger, 0.1); - border-color: $color-danger; - color: $color-danger; + background-color: rgba(139, 0, 0, 0.1); + border-color: var(--color-danger); + color: var(--color-danger); } i { @@ -2893,19 +2894,19 @@ padding: $spacing-2; font-size: $font-size-sm; line-height: $line-height-relaxed; - color: $color-text-primary; - background-color: $color-parchment; - border: 1px solid $color-border-light; + color: var(--color-text-primary); + background-color: var(--color-bg-primary); + border: 1px solid var(--color-border)-light; border-radius: $radius-sm; resize: vertical; &:focus { outline: none; - border-color: $color-accent-primary; + border-color: var(--color-accent-primary); } &::placeholder { - color: $color-text-muted; + color: var(--color-text-muted); font-style: italic; } } @@ -2931,7 +2932,7 @@ font-family: $font-family-header; font-size: $font-size-sm; font-weight: $font-weight-bold; - color: $color-text-secondary; + color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } @@ -2946,19 +2947,19 @@ padding: $spacing-2; font-size: $font-size-sm; line-height: $line-height-relaxed; - color: $color-text-primary; - background-color: $color-parchment-light; - border: 1px solid $color-border; + color: var(--color-text-primary); + background-color: var(--color-bg-input); + border: 1px solid var(--color-border); border-radius: $radius-md; resize: vertical; &:focus { outline: none; - border-color: $color-accent-primary; + border-color: var(--color-accent-primary); } &::placeholder { - color: $color-text-muted; + color: var(--color-text-muted); font-style: italic; } } diff --git a/styles/scss/sheets/_item-sheet.scss b/styles/scss/sheets/_item-sheet.scss index 650347e..74516cf 100644 --- a/styles/scss/sheets/_item-sheet.scss +++ b/styles/scss/sheets/_item-sheet.scss @@ -4,25 +4,36 @@ .vagabond.sheet.item { min-width: 500px; min-height: 400px; + display: flex; + flex-direction: column; + + // Utility class for hiding inactive tabs + .hidden { + display: none !important; + } // Header styling .sheet-header.item-header { @include flex-between; padding: $spacing-4; - background-color: $color-parchment-dark; - border-bottom: 2px solid $color-border; + background-color: var(--color-bg-secondary); + border-bottom: 2px solid var(--color-border); gap: $spacing-4; .item-img { width: 64px; height: 64px; object-fit: cover; - border: 2px solid $color-border; + border: 2px solid var(--color-border); border-radius: $radius-md; cursor: pointer; + transition: all $transition-fast; + box-shadow: 0 1px 3px var(--shadow-light); &:hover { - border-color: $color-accent-primary; + border-color: var(--color-accent-primary); + box-shadow: 0 2px 6px var(--shadow-medium); + transform: scale(1.02); } } @@ -37,14 +48,23 @@ input { width: 100%; - font-size: $font-size-lg; - font-weight: bold; + font-family: $font-family-header; + font-size: $font-size-xl; + font-weight: $font-weight-bold; + color: var(--color-text-primary); border: none; background: transparent; border-bottom: 1px solid transparent; + padding: $spacing-1 0; + transition: border-color $transition-fast; + + &:hover { + border-bottom-color: var(--color-border-light); + } &:focus { - border-bottom-color: $color-accent-primary; + border-bottom-color: var(--color-accent-primary); + outline: none; } } } @@ -56,35 +76,64 @@ font-size: $font-size-sm; font-weight: 500; text-transform: capitalize; - background-color: $color-parchment; - border: 1px solid $color-border; + background-color: var(--color-bg-primary); + border: 1px solid var(--color-border); border-radius: $radius-full; &.weapon { - background-color: mix($color-danger, $color-parchment, 15%); + background-color: var(--color-badge-weapon); } &.armor { - background-color: mix($color-info, $color-parchment, 15%); + background-color: var(--color-badge-armor); } &.spell { - background-color: mix($color-reason, $color-parchment, 15%); + background-color: var(--color-badge-spell); } &.perk { - background-color: mix($color-success, $color-parchment, 15%); + background-color: var(--color-badge-perk); } &.class { - background-color: mix($color-warning, $color-parchment, 15%); + background-color: var(--color-badge-class); + } + &.feature { + background-color: var(--color-badge-feature); + } + &.ancestry { + background-color: var(--color-badge-ancestry); + } + &.equipment { + background-color: var(--color-badge-equipment); } } } } } - // Sheet body - .sheet-body { + // Tab content areas (both .sheet-body and .tab-content) + .sheet-body, + .tab-content { padding: $spacing-4; overflow-y: auto; - max-height: calc(100% - 80px); + background-color: var(--color-bg-primary); + @include custom-scrollbar; + + // When used as standalone body (no tabs) + &.sheet-body { + flex: 1; + min-height: 0; // Important for flexbox scrolling + } + } + + // Details tab specific + .details-tab { + &.sheet-body { + // Combined class - body that's also the details tab + } + } + + // Effects tab has its own padding defined in .effects-tab + .effects-tab.tab-content { + padding: 0; // Remove duplicate padding, .effects-tab handles it } // Item content container @@ -120,9 +169,11 @@ } label { - font-size: $font-size-sm; - font-weight: 500; - color: $color-text-secondary; + font-size: $font-size-xs; + font-weight: $font-weight-semibold; + color: var(--color-text-secondary); + text-transform: uppercase; + letter-spacing: 0.03em; } input[type="text"], @@ -130,17 +181,29 @@ select, textarea { padding: $spacing-2; - border: 1px solid $color-border; + border: 1px solid var(--color-border); border-radius: $radius-sm; - background-color: $color-parchment-light; + background-color: var(--color-bg-input); + font-family: $font-family-body; + font-size: $font-size-sm; + color: var(--color-text-primary); + transition: + border-color $transition-fast, + box-shadow $transition-fast; + + &:hover:not(:disabled) { + border-color: var(--color-border-dark); + } &:focus { - border-color: $color-accent-primary; + border-color: var(--color-accent-primary); + box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.15); outline: none; } &:disabled { - background-color: $color-parchment; + background-color: var(--color-bg-primary); + color: var(--color-text-muted); cursor: not-allowed; } } @@ -150,6 +213,12 @@ height: 18px; margin: 0; cursor: pointer; + accent-color: var(--color-accent-primary); + + &:disabled { + cursor: not-allowed; + opacity: 0.6; + } } input[type="number"] { @@ -168,7 +237,7 @@ .units { font-size: $font-size-sm; - color: $color-text-secondary; + color: var(--color-text-secondary); } textarea { @@ -180,11 +249,11 @@ // Fieldset styling fieldset { - border: 1px solid $color-border; + border: 1px solid var(--color-border); border-radius: $radius-md; padding: $spacing-3; margin: 0; - background-color: rgba($color-parchment-dark, 0.3); + background-color: var(--color-bg-highlight); legend { padding: 0 $spacing-2; @@ -254,15 +323,55 @@ font-weight: 600; } - .editor-container { - border: 1px solid $color-border; + .editor-wrapper { + border: 1px solid var(--color-border); border-radius: $radius-sm; - overflow: hidden; + background-color: var(--color-bg-input); + min-height: 120px; + max-height: 400px; + overflow: auto; + resize: vertical; - .editor { - min-height: 120px; + // Static content display (non-editable) + > .editor-content { + min-height: 100px; padding: $spacing-2; - background-color: $color-parchment-light; + } + + // ProseMirror custom element styling + prose-mirror { + display: flex; + flex-direction: column; + min-height: 100px; + + // The menu bar that appears when editing + > menu.editor-menu { + flex: 0 0 auto; + position: sticky; + top: 0; + z-index: 1; + background-color: var(--color-bg-secondary); + border-bottom: 1px solid var(--color-border); + } + + // Foundry's inner editor-container + > .editor-container { + flex: 1 1 auto; + display: flex; + flex-direction: column; + min-height: 80px; + + // The actual editable content area + > .editor-content { + flex: 1 1 auto; + padding: $spacing-2; + } + } + + // Toggle button + > button.toggle { + display: none; // Hide since we use toggled="false" + } } } } @@ -275,9 +384,9 @@ .trait-entry { padding: $spacing-3; - border: 1px solid $color-border; + border: 1px solid var(--color-border); border-radius: $radius-sm; - background-color: $color-parchment-light; + background-color: var(--color-bg-input); .trait-header { display: flex; @@ -291,7 +400,7 @@ button { @include button-icon; - color: $color-danger; + color: var(--color-danger); } } @@ -302,7 +411,7 @@ } .no-traits { - color: $color-text-secondary; + color: var(--color-text-secondary); font-style: italic; text-align: center; padding: $spacing-4; @@ -330,7 +439,7 @@ label { font-size: $font-size-xs; font-weight: 600; - color: $color-text-secondary; + color: var(--color-text-secondary); } input { @@ -364,7 +473,7 @@ .hint { font-size: $font-size-xs; - color: $color-text-secondary; + color: var(--color-text-secondary); font-style: italic; } } @@ -380,7 +489,7 @@ grid-template-columns: 50px 60px 80px 80px 1fr 40px; gap: $spacing-2; padding: $spacing-2; - background-color: $color-parchment-dark; + background-color: var(--color-bg-secondary); font-size: $font-size-xs; font-weight: 600; border-radius: $radius-sm $radius-sm 0 0; @@ -391,8 +500,8 @@ grid-template-columns: 50px 60px 80px 80px 1fr 40px; gap: $spacing-2; padding: $spacing-2; - border-bottom: 1px solid $color-border; - background-color: $color-parchment-light; + border-bottom: 1px solid var(--color-border); + background-color: var(--color-bg-input); &:last-child { border-radius: 0 0 $radius-sm $radius-sm; @@ -406,14 +515,14 @@ button { @include button-icon; - color: $color-danger; + color: var(--color-danger); } } .no-progression { padding: $spacing-4; text-align: center; - color: $color-text-secondary; + color: var(--color-text-secondary); font-style: italic; } } @@ -429,9 +538,9 @@ .feature-entry { padding: $spacing-3; - border: 1px solid $color-border; + border: 1px solid var(--color-border); border-radius: $radius-sm; - background-color: $color-parchment-light; + background-color: var(--color-bg-input); .feature-header { display: flex; @@ -458,7 +567,7 @@ button { @include button-icon; - color: $color-danger; + color: var(--color-danger); } } @@ -471,7 +580,7 @@ .no-features { padding: $spacing-4; text-align: center; - color: $color-text-secondary; + color: var(--color-text-secondary); font-style: italic; } } @@ -488,14 +597,55 @@ font-weight: 600; } - .editor-container { - border: 1px solid $color-border; + .editor-wrapper { + border: 1px solid var(--color-border); border-radius: $radius-sm; + background-color: var(--color-bg-input); + min-height: 80px; + max-height: 300px; + overflow: auto; + resize: vertical; - .editor { - min-height: 80px; + // Static content display (non-editable) + > .editor-content { + min-height: 60px; padding: $spacing-2; - background-color: $color-parchment-light; + } + + // ProseMirror custom element styling + prose-mirror { + display: flex; + flex-direction: column; + min-height: 60px; + + // The menu bar that appears when editing + > menu.editor-menu { + flex: 0 0 auto; + position: sticky; + top: 0; + z-index: 1; + background-color: var(--color-bg-secondary); + border-bottom: 1px solid var(--color-border); + } + + // Foundry's inner editor-container + > .editor-container { + flex: 1 1 auto; + display: flex; + flex-direction: column; + min-height: 40px; + + // The actual editable content area + > .editor-content { + flex: 1 1 auto; + padding: $spacing-2; + } + } + + // Toggle button + > button.toggle { + display: none; + } } } } @@ -515,6 +665,94 @@ } } + // Requirements section (feature) + .requirements-section { + display: flex; + flex-direction: column; + gap: $spacing-2; + + > label { + font-size: $font-size-xs; + font-weight: $font-weight-semibold; + color: var(--color-text-secondary); + text-transform: uppercase; + letter-spacing: 0.03em; + } + + input { + padding: $spacing-2; + border: 1px solid var(--color-border); + border-radius: $radius-sm; + background-color: var(--color-bg-input); + font-family: $font-family-body; + font-size: $font-size-sm; + color: var(--color-text-primary); + transition: + border-color $transition-fast, + box-shadow $transition-fast; + + &:hover:not(:disabled) { + border-color: var(--color-border-dark); + } + + &:focus { + border-color: var(--color-accent-primary); + box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.15); + outline: none; + } + + &:disabled { + background-color: var(--color-bg-primary); + color: var(--color-text-muted); + cursor: not-allowed; + } + } + } + + // Ritual components (perk) + .ritual-components { + display: flex; + flex-direction: column; + gap: $spacing-2; + + > label { + font-size: $font-size-xs; + font-weight: $font-weight-semibold; + color: var(--color-text-secondary); + text-transform: uppercase; + letter-spacing: 0.03em; + } + + input { + padding: $spacing-2; + border: 1px solid var(--color-border); + border-radius: $radius-sm; + background-color: var(--color-bg-input); + font-family: $font-family-body; + font-size: $font-size-sm; + color: var(--color-text-primary); + transition: + border-color $transition-fast, + box-shadow $transition-fast; + + &:hover:not(:disabled) { + border-color: var(--color-border-dark); + } + + &:focus { + border-color: var(--color-accent-primary); + box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.15); + outline: none; + } + + &:disabled { + background-color: var(--color-bg-primary); + color: var(--color-text-muted); + cursor: not-allowed; + } + } + } + // Effects tab .effects-tab { padding: $spacing-4; @@ -561,8 +799,8 @@ align-items: center; gap: $spacing-2; padding: $spacing-2; - background-color: $color-parchment-light; - border: 1px solid $color-border; + background-color: var(--color-bg-input); + border: 1px solid var(--color-border); border-radius: $radius-sm; &.disabled { @@ -587,7 +825,7 @@ width: 24px; height: 24px; border-radius: $radius-sm; - border: 1px solid $color-border; + border: 1px solid var(--color-border); } .effect-name { @@ -603,10 +841,10 @@ @include button-icon; &.delete { - color: $color-danger; + color: var(--color-danger); &:hover { - background-color: rgba($color-danger, 0.1); + background-color: rgba(201, 68, 68, 0.1); } } } @@ -614,7 +852,7 @@ } .no-effects { - color: $color-text-secondary; + color: var(--color-text-secondary); font-style: italic; text-align: center; padding: $spacing-4; @@ -622,7 +860,7 @@ .effects-hint { font-size: $font-size-sm; - color: $color-text-secondary; + color: var(--color-text-secondary); margin-top: $spacing-2; i { diff --git a/styles/scss/vagabond.scss b/styles/scss/vagabond.scss index 10b7237..836b4fc 100644 --- a/styles/scss/vagabond.scss +++ b/styles/scss/vagabond.scss @@ -5,6 +5,9 @@ @import "variables"; @import "mixins"; +// Theme system (CSS custom properties) +@import "theme-variables"; + // Base styles @import "base"; diff --git a/system.json b/system.json index 529edcf..6ca897f 100644 --- a/system.json +++ b/system.json @@ -16,6 +16,17 @@ ], "esmodules": ["module/vagabond.mjs"], "styles": ["styles/vagabond.css"], + "themes": [ + { + "name": "light", + "label": "VAGABOND.ThemeLight", + "default": true + }, + { + "name": "dark", + "label": "VAGABOND.ThemeDark" + } + ], "languages": [ { "lang": "en", diff --git a/templates/item/types/ancestry.hbs b/templates/item/types/ancestry.hbs index 436f704..b3fb08e 100644 --- a/templates/item/types/ancestry.hbs +++ b/templates/item/types/ancestry.hbs @@ -64,8 +64,12 @@ {{!-- Description --}}
-
- {{editor system.description target="system.description" button=true editable=editable engine="prosemirror"}} +
+ {{#if editable}} + {{{enrichedDescription}}} + {{else}} +
{{{enrichedDescription}}}
+ {{/if}}
diff --git a/templates/item/types/armor.hbs b/templates/item/types/armor.hbs index dd6f46f..f9ea930 100644 --- a/templates/item/types/armor.hbs +++ b/templates/item/types/armor.hbs @@ -128,8 +128,12 @@ {{!-- Description --}}
-
- {{editor system.description target="system.description" button=true editable=editable engine="prosemirror"}} +
+ {{#if editable}} + {{{enrichedDescription}}} + {{else}} +
{{{enrichedDescription}}}
+ {{/if}}
diff --git a/templates/item/types/class.hbs b/templates/item/types/class.hbs index 92fe713..3d1f265 100644 --- a/templates/item/types/class.hbs +++ b/templates/item/types/class.hbs @@ -56,8 +56,12 @@ {{!-- Starting Pack --}}
-
- {{editor system.startingPack target="system.startingPack" button=true editable=editable engine="prosemirror"}} +
+ {{#if editable}} + {{{enrichedStartingPack}}} + {{else}} +
{{{enrichedStartingPack}}}
+ {{/if}}
@@ -156,8 +160,12 @@ {{!-- Description --}}
-
- {{editor system.description target="system.description" button=true editable=editable engine="prosemirror"}} +
+ {{#if editable}} + {{{enrichedDescription}}} + {{else}} +
{{{enrichedDescription}}}
+ {{/if}}
diff --git a/templates/item/types/equipment.hbs b/templates/item/types/equipment.hbs index 30f4214..9b50093 100644 --- a/templates/item/types/equipment.hbs +++ b/templates/item/types/equipment.hbs @@ -162,8 +162,12 @@ {{!-- Description --}}
-
- {{editor system.description target="system.description" button=true editable=editable engine="prosemirror"}} +
+ {{#if editable}} + {{{enrichedDescription}}} + {{else}} +
{{{enrichedDescription}}}
+ {{/if}}
diff --git a/templates/item/types/feature.hbs b/templates/item/types/feature.hbs index 13f5ed1..2e2a4f7 100644 --- a/templates/item/types/feature.hbs +++ b/templates/item/types/feature.hbs @@ -76,8 +76,12 @@ {{!-- Description --}}
-
- {{editor system.description target="system.description" button=true editable=editable engine="prosemirror"}} +
+ {{#if editable}} + {{{enrichedDescription}}} + {{else}} +
{{{enrichedDescription}}}
+ {{/if}}
diff --git a/templates/item/types/perk.hbs b/templates/item/types/perk.hbs index fdb67ce..a447917 100644 --- a/templates/item/types/perk.hbs +++ b/templates/item/types/perk.hbs @@ -133,8 +133,12 @@ {{!-- Description --}}
-
- {{editor system.description target="system.description" button=true editable=editable engine="prosemirror"}} +
+ {{#if editable}} + {{{enrichedDescription}}} + {{else}} +
{{{enrichedDescription}}}
+ {{/if}}
diff --git a/templates/item/types/spell.hbs b/templates/item/types/spell.hbs index d92c5af..ef86a5d 100644 --- a/templates/item/types/spell.hbs +++ b/templates/item/types/spell.hbs @@ -111,24 +111,36 @@ {{!-- Effect --}}
-
- {{editor system.effect target="system.effect" button=true editable=editable engine="prosemirror"}} +
+ {{#if editable}} + {{{enrichedEffect}}} + {{else}} +
{{{enrichedEffect}}}
+ {{/if}}
{{!-- Crit Effect --}}
-
- {{editor system.critEffect target="system.critEffect" button=true editable=editable engine="prosemirror"}} +
+ {{#if editable}} + {{{enrichedCritEffect}}} + {{else}} +
{{{enrichedCritEffect}}}
+ {{/if}}
{{!-- Description --}}
-
- {{editor system.description target="system.description" button=true editable=editable engine="prosemirror"}} +
+ {{#if editable}} + {{{enrichedDescription}}} + {{else}} +
{{{enrichedDescription}}}
+ {{/if}}
diff --git a/templates/item/types/weapon.hbs b/templates/item/types/weapon.hbs index 620ec29..4d767f5 100644 --- a/templates/item/types/weapon.hbs +++ b/templates/item/types/weapon.hbs @@ -228,8 +228,12 @@ {{!-- Description --}}
-
- {{editor system.description target="system.description" button=true editable=editable engine="prosemirror"}} +
+ {{#if editable}} + {{{enrichedDescription}}} + {{else}} +
{{{enrichedDescription}}}
+ {{/if}}