diff --git a/.vscode/settings.json b/.vscode/settings.json index cc64012..5a784fc 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -10,7 +10,8 @@ "*.lock": true, "node_modules": true, "packs": true, - "foundry": true + "foundry": true, + "scripts": true, }, "html.customData": [ "./.vscode/components.html-data.json" diff --git a/langs/en-ca.json b/langs/en-ca.json index d8b04ce..bf97c0c 100644 --- a/langs/en-ca.json +++ b/langs/en-ca.json @@ -73,7 +73,8 @@ }, "attribute": { "key": { - "hint": "This is the computer-friendly identifier for the attribute. When accessing the attribute in rolls, this is the name you will need to use. Changing this WILL break any existing macros you have." + "label": "Identifier", + "hint": "This is the computer-friendly name for the attribute. When accessing the attribute in rolls, this is the name you will need to use. Changing this will most likely break any existing macros you have." }, "always-visible": "Always Visible", "minimum": "Minimum", diff --git a/module/data/Item/attribute.mjs b/module/data/Item/attribute.mjs index 25eee87..d982c04 100644 --- a/module/data/Item/attribute.mjs +++ b/module/data/Item/attribute.mjs @@ -162,7 +162,7 @@ export class AttributeItemData extends foundry.abstract.TypeDataModel { }); }; - await macro?.execute({ item }); + await macro?.execute({ item: this.parent }); }; // #endregion Methods }; diff --git a/styles/Apps/PlayerSheet.css b/styles/Apps/PlayerSheet.css index f83f335..3442d76 100644 --- a/styles/Apps/PlayerSheet.css +++ b/styles/Apps/PlayerSheet.css @@ -1,7 +1,6 @@ .taf.PlayerSheet { - .sheet-header, fieldset, .content { - border-radius: 8px; - border: 1px solid rebeccapurple; + > .window-content { + background: var(--actor-sheet-background); } .sheet-header { @@ -9,19 +8,36 @@ flex-direction: row; align-items: center; gap: 0.5rem; - padding: 4px; + padding: 0.5rem; + margin: -0.5rem -0.5rem 0; + color: var(--actor-sheet-header-colour); + background: var(--actor-sheet-header-background); + border-bottom: 1px solid var(--actor-sheet-divider-colour); img { border-radius: 4px; } + + input { + color: var(--actor-sheet-header-input-colour); + background: var(--actor-sheet-header-input-background); + } } .attributes { display: flex; flex-direction: row; flex-wrap: wrap; - justify-content: space-around; - gap: 0.5rem; + justify-content: space-evenly; + gap: 0.25rem; + + fieldset { + color: var(--attribute-colour); + background: var(--attribute-background); + border-radius: 6px; + border: none; + padding: 6px; + } } .attr-range { @@ -33,7 +49,15 @@ margin: 0 auto; > input { + color: var(--attribute-colour); + background: var(--attribute-input-background); text-align: center; + height: 24px; + min-height: unset; + + &:focus { + outline: 1px solid var(--attribute-input-focus-colour); + } } } @@ -192,17 +216,32 @@ font-size: 1.1rem; } - input { - width: 50px; - } - input, button { - background: var(--item-card-header-input-background); - color: var(--item-card-header-input-colour); + border: none; + background: var(--attribute-input-background); + color: var(--attribute-input-colour); text-align: center; + height: 24px; + min-height: unset; &:disabled { - color: var(--item-card-header-disabled-input-colour); + color: var(--attribute-disabled-input-colour); + } + } + + input { + width: 50px; + &:focus { + outline: 1px solid var(--attribute-input-focus-colour); + } + } + + button { + &:active { + background: var(--attribute-button-active-background); + } + &:focus-visible { + outline: 1px solid var(--attribute-input-focus-colour); } } @@ -219,6 +258,7 @@ } .content { + border-radius: 6px; flex-grow: 1; overflow: hidden; --table-row-color-odd: var(--table-header-bg-color); diff --git a/styles/Apps/common.css b/styles/Apps/common.css index d673ac7..49f4197 100644 --- a/styles/Apps/common.css +++ b/styles/Apps/common.css @@ -12,19 +12,34 @@ flex-direction: row; justify-content: left; align-items: center; - gap: 8px; + margin: 0 -0.5rem; + border-bottom: 1px solid var(--tab-nav-divider-colour); button { + color: var(--tab-button-colour); border: none; text-shadow: none; box-shadow: none; - - &.active { - outline: 1px solid var(--tab-button-active-border); - } + outline: none; + background: transparent; + border-radius: 0; + border: 2px solid transparent; + transition: unset; &:hover { - background: var(--tab-button-hover-bg); + color: var(--tab-button-hover-colour); + } + + &:focus-visible { + color: var(--tab-button-focus-colour); + border-color: var(--tab-button-focus-colour); + border-radius: 4px; + } + + &.active { + color: var(--tab-button-active-colour); + border-bottom: 2px solid currentColor; + outline: none; } } } diff --git a/styles/elements/button.css b/styles/elements/button.css index ddda02d..3343304 100644 --- a/styles/elements/button.css +++ b/styles/elements/button.css @@ -1,4 +1,19 @@ .taf > .window-content button { + &.inline { + color: inherit; + min-height: unset; + height: auto; + padding: 0; + background: none; + border: none; + outline: none; + text-decoration: underline; + + &:hover { + background: none; + } + } + &:disabled { cursor: not-allowed; } diff --git a/styles/elements/hr.css b/styles/elements/hr.css index f5b37f8..e027393 100644 --- a/styles/elements/hr.css +++ b/styles/elements/hr.css @@ -2,7 +2,7 @@ color: inherit; display: block; height: 1px; - background: var(--divider-colour, rebeccapurple); + background: var(--divider-colour, var(--steel-100, currentColor)); border-radius: 0; margin: 0; padding: 0; diff --git a/styles/elements/prose-mirror.css b/styles/elements/prose-mirror.css index 85420d7..6f257f0 100644 --- a/styles/elements/prose-mirror.css +++ b/styles/elements/prose-mirror.css @@ -1,13 +1,55 @@ .taf > .window-content prose-mirror { + color: var(--prosemirror-colour); + --table-row-color-odd: var(--steel-550); + --table-row-color-even: var(--steel-600); background: var(--prosemirror-background); gap: 0; + menu { + background: var(--prosemirror-menu-background); + } + + button { + color: var(--prosemirror-menu-colour); + + &.icon.toggle { + border: none; + background: var(--prosemirror-toggle-background); + padding: 6px; + + &:hover { + background: var(--prosemirror-toggle-hover-background); + } + } + } + .editor-content { padding: 8px; } + p { + color: inherit; + } + .tableWrapper th, - .tableWrapper td { - border-color: rebeccapurple; + .tableWrapper td, + table th, + table td { + border-color: var(--prosemirror-divider-colour); + } + + table td, table th { + border: 1px solid var(--prosemirror-divider-colour); + } + + pre:has(> code), code:not(pre > code) { + padding: 4px 6px; + background: var(--steel-700); + color: var(--steel-200); + } + + blockquote { + color: inherit; + border-left: 2px solid var(--steel-200); } } diff --git a/styles/themes/dark.css b/styles/themes/dark.css index 3d008e2..97cf099 100644 --- a/styles/themes/dark.css +++ b/styles/themes/dark.css @@ -1,5 +1,12 @@ .theme-dark { - --prosemirror-background: var(--color-cool-5); + /* Prose Mirror Elements */ + --prosemirror-colour: var(--steel-100); + --prosemirror-background: var(--steel-650); + --prosemirror-toggle-background: var(--steel-700); + --prosemirror-toggle-hover-background: var(--steel-600); + --prosemirror-menu-colour: var(--steel-100); + --prosemirror-menu-background: var(--steel-750); + --prosemirror-divider-colour: var(--steel-250); --spinner-outer-colour: white; --spinner-inner-colour: #FF3D00; @@ -8,26 +15,38 @@ --toggle-slider-unchecked-colour: maroon; --toggle-slider-checked-colour: green; - --tab-button-active-border: rebeccapurple; - --tab-button-hover-bg: var(--color-cool-3); + --tab-nav-divider-colour: var(--steel-750); + --tab-button-colour: var(--steel-200); + --tab-button-focus-colour: var(--steel-200); + --tab-button-hover-colour: var(--steel-100); + --tab-button-active-colour: white; /* Actor Sheet Variables */ - /* Use --steel-850 as the main sheet background */ - --inventory-summary-background: var(--steel-800); + --actor-sheet-colour: var(--steel-100); + --actor-sheet-background: var(--steel-850); + --actor-sheet-divider-colour: var(--steel-700); + --actor-sheet-header-colour: var(--steel-100); + --actor-sheet-header-background: var(--steel-900); + --actor-sheet-header-input-colour: var(--steel-100); + --actor-sheet-header-input-background: var(--steel-650); + + --inventory-summary-background: var(--steel-750); --inventory-summary-colour: var(--steel-100); --inventory-input-background: var(--steel-650); --inventory-input-colour: var(--steel-100); --inventory-input-disabled-colour: var(--steel-350); - --embedded-list-header-background: var(--steel-800); + --embedded-list-header-background: var(--steel-750); --embedded-list-header-colour: var(--steel-100); --embedded-list-header-input-background: var(--steel-650); --embedded-list-header-input-colour: var(--steel-100); --attribute-background: var(--steel-700); --attribute-colour: var(--steel-100); - --attribute-input-background: var(--steel-650); + --attribute-input-background: var(--steel-600); --attribute-input-colour: var(--steel-100); + --attribute-input-focus-colour: var(--zinc-250); + --attribute-button-active-background: var(--steel-650); --attribute-disabled-input-colour: var(--steel-350); --item-card-background: #1d262f; @@ -36,6 +55,7 @@ --item-card-header-colour: var(--steel-100); --item-card-header-input-background: var(--steel-650); --item-card-header-input-colour: var(--steel-100); + --item-card-header-input-focus-colour: var(--zinc-250); --item-card-header-disabled-input-colour: var(--steel-350); /* Item Sheet Variables */ diff --git a/templates/AttributeItemSheet/settings.hbs b/templates/AttributeItemSheet/settings.hbs index 4110cf1..e1f5644 100644 --- a/templates/AttributeItemSheet/settings.hbs +++ b/templates/AttributeItemSheet/settings.hbs @@ -1,7 +1,7 @@
{{ attr.name }}