From c87cff273b61d483b5154ef3420d06be3db4caf0 Mon Sep 17 00:00:00 2001 From: rsek Date: Mon, 19 Dec 2022 15:26:22 -0800 Subject: [PATCH 001/195] migrate less files to scss --- src/styles/{assets.less => assets.scss} | 46 ++--- src/styles/{attr-box.less => attr-box.scss} | 2 +- .../{chat-message.less => chat-message.scss} | 12 +- src/styles/{clickable.less => clickable.scss} | 8 +- src/styles/{dialog.less => dialog.scss} | 2 +- src/styles/{dice.less => dice.scss} | 26 +-- ...{drag-and-drop.less => drag-and-drop.scss} | 6 +- src/styles/{editor.less => editor.scss} | 132 +++++++------- src/styles/fvtt/{app.less => app.scss} | 2 +- .../fvtt/{clickable.less => clickable.scss} | 4 +- src/styles/fvtt/{dialog.less => dialog.scss} | 12 +- .../fvtt/{settings.less => settings.scss} | 0 .../fvtt/{sidebar.less => sidebar.scss} | 14 +- .../fvtt/{tooltip.less => tooltip.scss} | 0 src/styles/{icons.less => icons.scss} | 22 +-- src/styles/inputs.less | 165 ------------------ src/styles/inputs.scss | 165 ++++++++++++++++++ src/styles/{list.less => list.scss} | 0 src/styles/{mixins.less => mixins.scss} | 160 ++++++++--------- src/styles/scrollbar.less | 26 --- src/styles/scrollbar.scss | 26 +++ src/styles/{sheet.less => sheet.scss} | 0 src/styles/{styles.less => styles.scss} | 40 ++--- src/styles/{tables.less => tables.scss} | 6 +- .../themes/{ironsworn.less => ironsworn.scss} | 16 +- src/styles/themes/mixins/colors.less | 47 ----- src/styles/themes/mixins/colors.scss | 47 +++++ .../{decorations.less => decorations.scss} | 12 +- ...overrides.less => fvtt-var-overrides.scss} | 0 src/styles/themes/mixins/palettize.less | 104 ----------- src/styles/themes/mixins/palettize.scss | 104 +++++++++++ .../{starforged.less => starforged.scss} | 38 ++-- src/styles/transitions.less | 13 -- src/styles/transitions.scss | 13 ++ src/styles/{utils.less => utils.scss} | 8 +- 35 files changed, 639 insertions(+), 639 deletions(-) rename src/styles/{assets.less => assets.scss} (79%) rename src/styles/{attr-box.less => attr-box.scss} (97%) rename src/styles/{chat-message.less => chat-message.scss} (95%) rename src/styles/{clickable.less => clickable.scss} (90%) rename src/styles/{dialog.less => dialog.scss} (95%) rename src/styles/{dice.less => dice.scss} (82%) rename src/styles/{drag-and-drop.less => drag-and-drop.scss} (92%) rename src/styles/{editor.less => editor.scss} (65%) rename src/styles/fvtt/{app.less => app.scss} (98%) rename src/styles/fvtt/{clickable.less => clickable.scss} (81%) rename src/styles/fvtt/{dialog.less => dialog.scss} (82%) rename src/styles/fvtt/{settings.less => settings.scss} (100%) rename src/styles/fvtt/{sidebar.less => sidebar.scss} (74%) rename src/styles/fvtt/{tooltip.less => tooltip.scss} (100%) rename src/styles/{icons.less => icons.scss} (95%) delete mode 100644 src/styles/inputs.less create mode 100644 src/styles/inputs.scss rename src/styles/{list.less => list.scss} (100%) rename src/styles/{mixins.less => mixins.scss} (66%) delete mode 100644 src/styles/scrollbar.less create mode 100644 src/styles/scrollbar.scss rename src/styles/{sheet.less => sheet.scss} (100%) rename src/styles/{styles.less => styles.scss} (88%) rename src/styles/{tables.less => tables.scss} (90%) rename src/styles/themes/{ironsworn.less => ironsworn.scss} (50%) delete mode 100644 src/styles/themes/mixins/colors.less create mode 100644 src/styles/themes/mixins/colors.scss rename src/styles/themes/mixins/{decorations.less => decorations.scss} (76%) rename src/styles/themes/mixins/{fvtt-var-overrides.less => fvtt-var-overrides.scss} (100%) delete mode 100644 src/styles/themes/mixins/palettize.less create mode 100644 src/styles/themes/mixins/palettize.scss rename src/styles/themes/{starforged.less => starforged.scss} (52%) delete mode 100644 src/styles/transitions.less create mode 100644 src/styles/transitions.scss rename src/styles/{utils.less => utils.scss} (95%) diff --git a/src/styles/assets.less b/src/styles/assets.scss similarity index 79% rename from src/styles/assets.less rename to src/styles/assets.scss index b3599ffbb..ae0c89649 100644 --- a/src/styles/assets.less +++ b/src/styles/assets.scss @@ -1,17 +1,17 @@ -@import (reference) './themes/mixins/decorations.less'; +@import (reference) './themes/mixins/decorations.scss'; -@asset_spacer: 0.5em; +$asset_spacer: 0.5em; .ironsworn__asset { overflow: hidden; transition: var(--std-animation); .asset-header { - gap: @asset_spacer; + gap: $asset_spacer; align-items: center; .asset-expand-toggle { transition: var(--std-animation); display: flex; - gap: @asset_spacer; + gap: $asset_spacer; background: none; box-shadow: none !important; flex-flow: row wrap; @@ -43,8 +43,8 @@ .asset-body { transition: var(--std-animation); overflow: hidden; - padding: (@asset_spacer / 2); - gap: @asset_spacer; + padding: ($asset_spacer / 2); + gap: $asset_spacer; .asset-fields { margin: 0; display: flex; @@ -52,7 +52,7 @@ .asset-field { display: flex; flex-direction: row; - gap: (@asset_spacer / 2); + gap: ($asset_spacer / 2); flex-grow: 0; border-bottom-width: var(--ironsworn-border-width-md); border-bottom-style: solid; @@ -64,18 +64,18 @@ .asset-field-value { margin: 0; flex-grow: 1; - padding: 0 (@asset_spacer / 2); + padding: 0 ($asset_spacer / 2); } } } .asset-abilities { - padding-left: @asset_spacer; - gap: @asset_spacer; + padding-left: $asset_spacer; + gap: $asset_spacer; .asset-ability { list-style: none; display: flex; flex-direction: row; - gap: @asset_spacer; + gap: $asset_spacer; } } } @@ -103,14 +103,14 @@ } .slider-segment { --ironsworn-text-stroke-color: var(--ironsworn-dark-color); - .textStrokeMixin(); + @include textStrokeMixin(); } } -@hexagon_aspect_ratio: (sqrt(3) / 2); -@hex_deco_aspect_ratio: 24 / 28; -@hex_deco_expanded_height: 50px; -@hex_deco_collapsed_height: 32px; +$hexagon_aspect_ratio: calc(sqrt(3) / 2); +$hex_deco_aspect_ratio: 24 / 28; +$hex_deco_expanded_height: 50px; +$hex_deco_collapsed_height: 32px; // Here we encode the bullet styles as classes, and pull them into the // ul>li bullet class from there. These will also be available for block @@ -136,7 +136,7 @@ } .asset-ability-bullet-starforged { - aspect-ratio: @hexagon_aspect_ratio; + aspect-ratio: $hexagon_aspect_ratio; background-image: url('/assets/misc/hex-checkbox-unchecked.svg'); mask-image: url('/assets/misc/hex-checkbox-unchecked.svg'); height: 1em; @@ -152,31 +152,31 @@ .asset-ability { &:before { content: ''; - .asset-ability-bullet; + @include asset-ability-bullet; } &.marked:before { - .asset-ability-bullet-marked; + @include asset-ability-bullet-marked; } } } .asset-ironsworn { .asset-ability { &:before { - .asset-ability-bullet-ironsworn; + @include asset-ability-bullet-ironsworn; } } } .asset-starforged { - .starforgedAssetDecoMixin(50px,32px); + @include starforgedAssetDecoMixin(50px,32px); .asset-abilities { .asset-ability { &:before { - .asset-ability-bullet-starforged; + @include asset-ability-bullet-starforged; } &.marked:before { - .asset-ability-bullet-starforged-marked; + @include asset-ability-bullet-starforged-marked; } } } diff --git a/src/styles/attr-box.less b/src/styles/attr-box.scss similarity index 97% rename from src/styles/attr-box.less rename to src/styles/attr-box.scss index 97a007c21..fbff3d943 100644 --- a/src/styles/attr-box.less +++ b/src/styles/attr-box.scss @@ -8,7 +8,7 @@ .stat { text-transform: uppercase; --ironsworn-color-text-stroke: var(--ironsworn-color-bg); - .textStrokeMixin(); + @include textStrokeMixin(); flex: 0 0 75px; border-style: solid; border-width: var(--ironsworn-border-width-md); diff --git a/src/styles/chat-message.less b/src/styles/chat-message.scss similarity index 95% rename from src/styles/chat-message.less rename to src/styles/chat-message.scss index f2bcd02df..2f3a77155 100644 --- a/src/styles/chat-message.less +++ b/src/styles/chat-message.scss @@ -1,4 +1,4 @@ -@import (reference) 'mixins.less'; +@import (reference) 'mixins.scss'; .chat-message { border: var(--ironsworn-border-width-md) solid var(--ironsworn-color-border); @@ -9,7 +9,7 @@ } // General message content styling .message-content { - .textCompactMixin(); + @include textCompactMixin(); border: none; .ironsworn-roll-title, h3, @@ -17,7 +17,7 @@ font-size: var(--font-size-16); font-weight: bold; margin: 0; - .initial-caps(); + @include initial-caps(); } .move-oracle-buttons { gap: var(--ironsworn-spacer-xs); @@ -30,8 +30,8 @@ .button-text { white-space: nowrap; } - .initial-caps(); - .clickableBlockMixin(); + @include initial-caps(); + @include clickableBlockMixin(); border-radius: var(--ironsworn-border-radius-md); border-width: var(--ironsworn-border-width-md); background-color: var(--ironsworn-color-bg-20); @@ -125,7 +125,7 @@ margin: 0; } .oracle-result-control { - .clickableTextMixin(); + @include clickableTextMixin(); background: none !important; border: none !important; opacity: 0; diff --git a/src/styles/clickable.less b/src/styles/clickable.scss similarity index 90% rename from src/styles/clickable.less rename to src/styles/clickable.scss index ab0fb584c..aca7f5167 100644 --- a/src/styles/clickable.less +++ b/src/styles/clickable.scss @@ -3,7 +3,7 @@ // the following selector is a proxy for compendium links which don't have a class attached to them. // ideally, all of them would share an identifying data attribute that could be selected for -- something like 'data-action', maybe? a[data-pack][data-uuid] { - .clickableBlockMixin(); + @include clickableBlockMixin(); filter: none; border-radius: var(--ironsworn-border-radius-sm); border-width: var(--ironsworn-border-width-md); @@ -27,18 +27,18 @@ a[data-pack][data-uuid] { } .clickable { - .interactiveMixin(); + @include interactiveMixin(); cursor: pointer; // &:not(svg):not(.svg) { &.text:not(.block) { - .clickableTextMixin(); + @include clickableTextMixin(); &:not(:before) { text-align: left; justify-content: left; } } &.block { - .clickableBlockMixin(); + @include clickableBlockMixin(); } // } svg, diff --git a/src/styles/dialog.less b/src/styles/dialog.scss similarity index 95% rename from src/styles/dialog.less rename to src/styles/dialog.scss index 35a9066da..c5ace8cc1 100644 --- a/src/styles/dialog.less +++ b/src/styles/dialog.scss @@ -1,4 +1,4 @@ -// styles specific to foundry-ironsworn's dialogs. For general dialog styles, see ./fvtt/dialog.less +// styles specific to foundry-ironsworn's dialogs. For general dialog styles, see ./fvtt/dialog.scss .new-actor { .box { diff --git a/src/styles/dice.less b/src/styles/dice.scss similarity index 82% rename from src/styles/dice.less rename to src/styles/dice.scss index a6dd6e184..5fbad4aad 100644 --- a/src/styles/dice.less +++ b/src/styles/dice.scss @@ -19,15 +19,15 @@ } .roll-graphic { - @graphic-gap: 0.25rem; + $graphic-gap: 0.25rem; &.dice-formula { display: flex; flex-flow: row nowrap; flex: auto; - gap: @graphic-gap; + gap: $graphic-gap; justify-content: center; margin: 0; - padding: @graphic-gap; + padding: $graphic-gap; * { margin: 0; } @@ -36,7 +36,7 @@ height: 100%; flex-grow: 0; --ironsworn-color-text-stroke: var(--ironsworn-color-bg); - .textStrokeMixin(); + @include textStrokeMixin(); } .indeterminate-value { color: var(--ironsworn-color-midtone-60); @@ -59,7 +59,7 @@ display: flex; flex-direction: row; flex-grow: 0; - gap: (@graphic-gap / 2); + gap: ($graphic-gap / 2); .challenge-die { } } @@ -72,10 +72,10 @@ font-weight: bold; } - .diceGlowMixin(@color, @diceDropShadowSize: 0px 0px 2px) { - color: @color !important; - filter: drop-shadow(@diceDropShadowSize @color) - drop-shadow(@diceDropShadowSize @color); + @mixin diceGlowMixin($color, $diceDropShadowSize: 0px 0px 2px){ + color: $color !important; + filter: drop-shadow($diceDropShadowSize $color) + drop-shadow($diceDropShadowSize $color); background-blend-mode: screen; } @@ -121,20 +121,20 @@ &.min:not(.challenge), &.challenge.max { - .diceGlowMixin(var(--ironsworn-color-danger)); + @include diceGlowMixin(var(--ironsworn-color-danger)); } &.max:not(.challenge), &.challenge.min { - .diceGlowMixin(var(--ironsworn-color-success)); + @include diceGlowMixin(var(--ironsworn-color-success)); } &.canceled { - .diceGlowMixin(var(--ironsworn-color-warning)); + @include diceGlowMixin(var(--ironsworn-color-warning)); } } del .roll { text-decoration: line-through; - .diceGlowMixin(var(--ironsworn-color-warning)); + @include diceGlowMixin(var(--ironsworn-color-warning)); } } diff --git a/src/styles/drag-and-drop.less b/src/styles/drag-and-drop.scss similarity index 92% rename from src/styles/drag-and-drop.less rename to src/styles/drag-and-drop.scss index fde0c3105..c25f07469 100644 --- a/src/styles/drag-and-drop.less +++ b/src/styles/drag-and-drop.scss @@ -1,4 +1,4 @@ -@import (reference) 'mixins.less'; +@import (reference) 'mixins.scss'; [data-ironsworn-drop-type] { --ironsworn-drop-zone-outline-width: 3px; @@ -7,12 +7,12 @@ outline: 0 var(--ironsworn-drop-zone-outline-style) transparent; transition: all 0.2s ease; &:after { - .overlayMixin(); + @include overlayMixin(); opacity: 0; visibility: hidden; transition: all 0.2s ease; border-radius: inherit; - .staticHighlightMixin(20); + @include staticHighlightMixin(20); } &[data-ironsworn-drop-active='true'] { outline-width: var(--ironsworn-drop-zone-outline-width); diff --git a/src/styles/editor.less b/src/styles/editor.scss similarity index 65% rename from src/styles/editor.less rename to src/styles/editor.scss index a46912fbf..b67378e50 100644 --- a/src/styles/editor.less +++ b/src/styles/editor.scss @@ -17,7 +17,7 @@ var(--ironsworn-border-radius-lg); } .editor-edit { - .clickableBlockMixin(); + @include clickableBlockMixin(); background: var(--ironsworn-color-bg); border-radius: var(--ironsworn-border-radius-md); } @@ -25,14 +25,14 @@ // Editor custom select elements .prosemirror button, .tox .tox-tbtn--bespoke { - .clickableBlockMixin(); + @include clickableBlockMixin(); border-radius: var(--ironsworn-border-radius-md); } // Editors: ProseMirror .ProseMirror { - .inputFieldMixin(); + @include inputFieldMixin(); padding: 0.5rem; } @@ -106,7 +106,7 @@ } } .tox-tbtn--select { - .inputFieldMixin(); + @include inputFieldMixin(); text-shadow: none; } .tox-collection--list { @@ -121,38 +121,38 @@ // Menu // // Root variables -// from https://github.com/tinymce/tinymce/blob/develop/modules/oxide/src/less/theme/globals/global-variables.less +// from https://github.com/tinymce/tinymce/blob/develop/modules/oxide/src/scss/theme/globals/global-variables.scss // Begin customization by changing these variables as most other variables are derivatives of these. -@background-color: var(--ironsworn-color-input-bg); -@base-value: 16px; -@color-black: #000; -@color-tint: #006ce7; -@color-white: var(--ironsworn-color-light); -@color-error: #c00; -@color-success: #78ab46; -@font-stack: var(--font-primary); +$background-color: var(--ironsworn-color-input-bg); +$base-value: 16px; +$color-black: #000; +$color-tint: #006ce7; +$color-white: var(--ironsworn-color-light); +$color-error: #c00; +$color-success: #78ab46; +$font-stack: var(--font-primary); // Content; -@content-ui-darkmode: false; // Change this to true to get white icons in the content such as bookmarks. +$content-ui-darkmode: false; // Change this to true to get white icons in the content such as bookmarks. // Colors -@border-color: transparent; -@text-color: var(--ironsworn-color-fg); -@text-color-muted: var(--ironsworn-color-fg-muted); +$border-color: transparent; +$text-color: var(--ironsworn-color-fg); +$text-color-muted: var(--ironsworn-color-fg-muted); // Some useful generic variables -@menu-background-color: var(--ironsworn-color-midtone-10); -@menu-border-color: var(--ironsworn-color-input-border); -@menu-box-shadow: 0 0 2px 0 fade(@color-black, 20%), - 0 4px 8px 0 fade(@color-black, 15%); +$menu-background-color: var(--ironsworn-color-midtone-10); +$menu-border-color: var(--ironsworn-color-input-border); +$menu-box-shadow: 0 0 2px 0 rgba($color-black, 20%/100.0%), + 0 4px 8px 0 rgba($color-black, 15%/100.0%); .tox { .tox-menu { - background: @menu-background-color; - border: var(--ironsworn-border-width-md) solid @menu-border-color; - box-shadow: @menu-box-shadow; + background: $menu-background-color; + border: var(--ironsworn-border-width-md) solid $menu-border-color; + box-shadow: $menu-box-shadow; } } @@ -162,60 +162,60 @@ // A list of items that can be arranged as vertical list, horizontal toolbar or a grid. // -@collection-item-separator-color: var(--ironsworn-color-border-muted); +$collection-item-separator-color: var(--ironsworn-color-border-muted); -@collection-item-label-text-color: var(--ironsworn-color-fg); +$collection-item-label-text-color: var(--ironsworn-color-fg); -@collection-item-label-disabled-text-color: var(--ironsworn-color-fg-50); +$collection-item-label-disabled-text-color: var(--ironsworn-color-fg-50); -@toolbar-button-hover-background-color: var( +$toolbar-button-hover-background-color: var( --ironsworn-color-clickable-block-bg-hover ); -@collection-list-item-active-background-color: var( +$collection-list-item-active-background-color: var( --ironsworn-color-clickable-block-bg-hover ); -@collection-list-item-label-active-text-color: var( +$collection-list-item-label-active-text-color: var( --ironsworn-color-clickable-block-fg-hover ); -@collection-list-item-enabled-background-color: @menu-background-color; -@collection-list-item-label-enabled-text-color: var( +$collection-list-item-enabled-background-color: $menu-background-color; +$collection-list-item-label-enabled-text-color: var( --ironsworn-color-clickable-block-fg ); -@collection-toolbar-item-active-background-color: var( +$collection-toolbar-item-active-background-color: var( --ironsworn-color-clickable-block-bg-hover ); -@collection-toolbar-item-label-active-text-color: var( +$collection-toolbar-item-label-active-text-color: var( --ironsworn-color-clickable-block-fg-selected ); -@toolbar-button-enabled-background-color: var( +$toolbar-button-enabled-background-color: var( --ironsworn-color-clickable-block-bg ); -@collection-toolbar-item-enabled-background-color: @toolbar-button-enabled-background-color; -@collection-toolbar-item-label-enabled-text-color: var( +$collection-toolbar-item-enabled-background-color: $toolbar-button-enabled-background-color; +$collection-toolbar-item-label-enabled-text-color: var( --ironsworn-color-clickable-block-fg ); -@collection-grid-item-active-background-color: var( +$collection-grid-item-active-background-color: var( --ironsworn-color-clickable-block-bg-hover ); -@collection-grid-item-label-active-text-color: var( +$collection-grid-item-label-active-text-color: var( --ironsworn-color-clickable-block-fg-hover ); -@collection-grid-item-enabled-background-color: @toolbar-button-enabled-background-color; -@collection-grid-item-label-enabled-text-color: var( +$collection-grid-item-enabled-background-color: $toolbar-button-enabled-background-color; +$collection-grid-item-label-enabled-text-color: var( --ironsworn-color-clickable-block-fg ); -@collection-group-label-background-color: var(--ironsworn-color-bg-20); -@collection-group-label-text-color: var(--ironsworn-color-fg-muted); +$collection-group-label-background-color: var(--ironsworn-color-bg-20); +$collection-group-label-text-color: var(--ironsworn-color-fg-muted); .tox { .tox-collection--list .tox-collection__group { border-bottom-width: 0; - border-color: @collection-item-separator-color; + border-color: $collection-item-separator-color; border-left-width: 0; border-right-width: 0; border-style: solid; @@ -228,52 +228,52 @@ // Group headings should only be used on collection lists. .tox-collection__group-heading { - background: @collection-group-label-background-color; - color: @collection-group-label-text-color; + background: $collection-group-label-background-color; + color: $collection-group-label-text-color; } .tox-collection__item { - color: @collection-item-label-text-color; + color: $collection-item-label-text-color; transition: var(--std-animation); } // Note: Ensure "enabled" is before "active", as active styles should have a higher precedence .tox-collection--list .tox-collection__item--enabled { - background: @collection-list-item-enabled-background-color; - color: @collection-list-item-label-enabled-text-color; + background: $collection-list-item-enabled-background-color; + color: $collection-list-item-label-enabled-text-color; } .tox-collection--list .tox-collection__item--active { - background: @collection-list-item-active-background-color; + background: $collection-list-item-active-background-color; } .tox-collection--toolbar .tox-collection__item--enabled { - background: @collection-toolbar-item-enabled-background-color; - color: @collection-toolbar-item-label-enabled-text-color; + background: $collection-toolbar-item-enabled-background-color; + color: $collection-toolbar-item-label-enabled-text-color; } .tox-collection--toolbar .tox-collection__item--active { - background: @collection-toolbar-item-active-background-color; + background: $collection-toolbar-item-active-background-color; } .tox-collection--grid .tox-collection__item--enabled { - background: @collection-grid-item-enabled-background-color; - color: @collection-grid-item-label-enabled-text-color; + background: $collection-grid-item-enabled-background-color; + color: $collection-grid-item-label-enabled-text-color; } .tox-collection--grid .tox-collection__item--active:not(.tox-collection__item--state-disabled) { - background: @collection-grid-item-active-background-color; - color: @collection-grid-item-label-active-text-color; + background: $collection-grid-item-active-background-color; + color: $collection-grid-item-label-active-text-color; } .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled) { - color: @collection-list-item-label-active-text-color; + color: $collection-list-item-label-active-text-color; } .tox-collection--toolbar .tox-collection__item--active:not(.tox-collection__item--state-disabled) { - color: @collection-toolbar-item-label-active-text-color; + color: $collection-toolbar-item-label-active-text-color; } .tox-collection__item-icon, @@ -288,7 +288,7 @@ } .tox-collection__item-accessory { - color: @text-color-muted; + color: $text-color-muted; } .tox-collection__item-caret { @@ -300,25 +300,25 @@ // Disabled item .tox-collection__item--state-disabled { background: transparent !important; - color: @collection-item-label-disabled-text-color; + color: $collection-item-label-disabled-text-color; .tox-collection__item-caret svg { fill: currentColor; } } .tox-collection--horizontal { - background: @menu-background-color; + background: $menu-background-color; border: var(--ironsworn-border-width-md) solid - @collection-item-separator-color; + $collection-item-separator-color; } } -@toolbar-group-separator-color: var(--ironsworn-color-border-muted); +$toolbar-group-separator-color: var(--ironsworn-color-border-muted); .tox:not([dir='rtl']) { .tox-collection--horizontal .tox-collection__group:not(:last-of-type) { border-right: var(--ironsworn-border-width-md) solid - @toolbar-group-separator-color; + $toolbar-group-separator-color; } } @@ -326,6 +326,6 @@ .tox[dir='rtl'] { .tox-collection--horizontal .tox-collection__group:not(:last-of-type) { border-left: var(--ironsworn-border-width-md) solid - @toolbar-group-separator-color; + $toolbar-group-separator-color; } } diff --git a/src/styles/fvtt/app.less b/src/styles/fvtt/app.scss similarity index 98% rename from src/styles/fvtt/app.less rename to src/styles/fvtt/app.scss index af7563ac1..ec8ba3308 100644 --- a/src/styles/fvtt/app.less +++ b/src/styles/fvtt/app.scss @@ -1,5 +1,5 @@ // styles for FVTT application windows. -@import '../mixins.less'; +@import '../mixins.scss'; .app { border-color: var(--ironsworn-color-midtone-80); diff --git a/src/styles/fvtt/clickable.less b/src/styles/fvtt/clickable.scss similarity index 81% rename from src/styles/fvtt/clickable.less rename to src/styles/fvtt/clickable.scss index eb95886b5..96655051b 100644 --- a/src/styles/fvtt/clickable.less +++ b/src/styles/fvtt/clickable.scss @@ -1,7 +1,7 @@ -@import '../mixins.less'; +@import '../mixins.scss'; .app:not(.ironsworn) button { - .clickableBlockMixin(); + @include clickableBlockMixin(); border-radius: var(--ironsworn-border-radius-md); border-width: var(--ironsworn-border-width-md); border-style: solid; diff --git a/src/styles/fvtt/dialog.less b/src/styles/fvtt/dialog.scss similarity index 82% rename from src/styles/fvtt/dialog.less rename to src/styles/fvtt/dialog.scss index 8abdacbbc..03c576cba 100644 --- a/src/styles/fvtt/dialog.less +++ b/src/styles/fvtt/dialog.scss @@ -1,6 +1,6 @@ // styles for any FVTT dialog. You can import them globally, or scoped to e.g. the .ironsworn class. -@import (reference) '../mixins.less'; -@import (reference) '../utils.less'; +@import (reference) '../mixins.scss'; +@import (reference) '../utils.scss'; .dialog { .window-content { @@ -15,7 +15,7 @@ cursor: pointer; border-radius: var(--ironsworn-border-radius-md); &:focus { - .inputFieldFocusMixin(); + @include inputFieldFocusMixin(); } } } @@ -29,7 +29,7 @@ gap: var(--ironsworn-spacer-sm); button.default, button { - .clickableBlockMixin(); + @include clickableBlockMixin(); display: flex; align-items: center; justify-content: center; @@ -37,8 +37,8 @@ border-width: var(--ironsworn-border-radius-md); border-radius: 0; .button-text { - .nogrow(); - .initial-caps(); + @include nogrow(); + @include initial-caps(); width: auto; height: max-content; } diff --git a/src/styles/fvtt/settings.less b/src/styles/fvtt/settings.scss similarity index 100% rename from src/styles/fvtt/settings.less rename to src/styles/fvtt/settings.scss diff --git a/src/styles/fvtt/sidebar.less b/src/styles/fvtt/sidebar.scss similarity index 74% rename from src/styles/fvtt/sidebar.less rename to src/styles/fvtt/sidebar.scss index c28a5ce33..f380795a6 100644 --- a/src/styles/fvtt/sidebar.less +++ b/src/styles/fvtt/sidebar.scss @@ -1,6 +1,6 @@ // styles for FVTT's sidebar -@import '../mixins.less'; +@import '../mixins.scss'; #sidebar { li.folder > .folder-header { background: var(--ironsworn-color-fg-20); @@ -16,13 +16,13 @@ .combat-sidebar { .combat-tracker-header { a.combat-button { - .clickableTextMixin(); + @include clickableTextMixin(); } } } #sidebar-tabs { .collapse { - .clickableBlockMixin(); + @include clickableBlockMixin(); background-color: transparent; border: 0; } @@ -31,16 +31,16 @@ // CHAT TAB #chat { #chat-log { - // for chat *messages*, see chat-messages.less + // for chat *messages*, see chat-messages.scss } #chat-controls { .roll-type-select { - .inputFieldMixin(); + @include inputFieldMixin(); border-style: outset; } } textarea#chat-message { - .inputFieldMixin(); + @include inputFieldMixin(); } } } @@ -49,7 +49,7 @@ .directory-header { .header-search { input { - .inputFieldMixin(); + @include inputFieldMixin(); } } } diff --git a/src/styles/fvtt/tooltip.less b/src/styles/fvtt/tooltip.scss similarity index 100% rename from src/styles/fvtt/tooltip.less rename to src/styles/fvtt/tooltip.scss diff --git a/src/styles/icons.less b/src/styles/icons.scss similarity index 95% rename from src/styles/icons.less rename to src/styles/icons.scss index e62b2c8ea..13a1de23c 100644 --- a/src/styles/icons.less +++ b/src/styles/icons.scss @@ -110,7 +110,7 @@ mask-size: contain; height: 1em; // height and width of the :before pseudo-element can be set as desired, these are just reasonable defaults that scale the current font size. width: 1em; - .vertical-text& { + .vertical-text & { transform: rotateZ(90deg); } } @@ -121,7 +121,7 @@ [class*=' isicon-'], [class^='fa-'], [class*=' fa-'] { - i.juicy&, + i.juicy &, &:not(i).juicy:before { font-size: 120%; } @@ -155,7 +155,7 @@ // if the icon needs to be clickable, IronBtn + FontIcon/IronIcon should be preferred instead [class^='isicon-'], [class*=' isicon-'] { - i& { + i & { display: inline-flex; align-items: center; justify-content: center; @@ -179,10 +179,10 @@ i { align-items: center; justify-content: center; &:before { - @padIcon: 2px; + $padIcon: 2px; display: flex; - height: calc(100% - (@padIcon*2)); - width: calc(100% - (@padIcon*2)); + height: calc(100% - ($padIcon*2)); + width: calc(100% - ($padIcon*2)); } } } @@ -191,7 +191,7 @@ i { // HOW TO ADD AN ICON FROM GAME-ICONS.NET // 1) use the game-icons studio, turn off the black background // 2) download the icon as an svg and place it in system/assets/icons -// 3) add an entry to @icons hash object below +// 3) add an entry to $icons hash object below // alternatively, you can remove the black background element manually by editing the SVG's source // generally it will be the first path element, and it'll look like one of the following, e.g.: @@ -200,7 +200,7 @@ i { // icons require a key (the file name without the extension) and a value (a string describing the source information/credit). // the value isn't used by any LESS functions, it's just to make it harder to forget to include source/credit info. -@icons: { +$icons: { // game logos logo-delve-dk: 'original icon by Shawn Tomkin; minor adjustments for FVTT format by rsek'; logo-ironsworn-dk: 'original icon by Shawn Tomkin; minor adjustments for FVTT format by rsek'; @@ -237,9 +237,9 @@ i { world: 'https://game-icons.net/1x1/lorc/ringed-planet.html'; }; -each(@icons, { - .isicon-@{key}, .isiconbg-@{key} { +each($icons, { + .isicon-#{$key}, .isiconbg-#{$key} { &:before { - mask-image: url('/assets/icons/@{key}.svg'); + mask-image: url('/assets/icons/#{$key}.svg'); }} }); diff --git a/src/styles/inputs.less b/src/styles/inputs.less deleted file mode 100644 index 3166dadbd..000000000 --- a/src/styles/inputs.less +++ /dev/null @@ -1,165 +0,0 @@ -// styles for form input elements. for ProseMirror and TinyMCE styles, see editors.less. -// the main style sheet scopes these to .ironsworn, so import them again globally if you want to retheme the form inputs on the UX elements that belong to FVTT. -@import 'mixins.less'; - -*::placeholder { - font-family: inherit; -} - -select { - .inputFieldMixin(); - border-style: outset; -} - -textarea { - .inputFieldMixin(); -} - -input[type='text'], -input[type='number'], -input[type='password'], -input[type='date'], -input[type='time'], -input[type='search'] { - .inputFieldMixin(); -} - -// CHECKBOXES -input[type='checkbox'] { - accent-color: var(--ironsworn-color-fg); - cursor: pointer; -} -label.checkbox { - cursor: pointer; -} -// RADIO BUTTONS -input[type='radio'] { - accent-color: var(--ironsworn-color-fg); - cursor: pointer; -} -// NUMBER SPINNERS -input[type='number'] { - -moz-appearance: auto; - &::-webkit-inner-spin-button, - &::-webkit-outer-spin-button { - -webkit-appearance: button !important; - opacity: 1 !important; - } -} - -// RANGE SLIDERS - -input[type='range'] { - @sliderThumbBgColor: var(--ironsworn-color-fg); - @sliderThumbBorderColor: var(--ironsworn-color-cool-50); - @sliderThumbBgColorFocus: var(--ironsworn-color-fg); - @sliderThumbBorderColorFocus: var(--ironsworn-color-warm-90); - @sliderThumbHeight: 12px; - @sliderThumbWidth: 12px; - - @sliderTrackHeight: 6px; - @sliderTrackBorderRadius: (@sliderTrackHeight / 2); - @sliderTrackBgColor: var(--ironsworn-color-fg-20); - @sliderTrackBorderColor: var(--ironsworn-color-fg-20); - @sliderTrackBgColorFocus: var(--ironsworn-color-warm-20); - @sliderTrackBorderColorFocus: var(--ironsworn-color-cool-50); - @sliderBoxShadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; - - background: transparent; - -webkit-appearance: none; - height: 20px; - margin: 0; - width: 100%; - - &:focus { - outline: none; - } - &::-webkit-slider-runnable-track { - width: 100%; - height: @sliderTrackHeight; - cursor: pointer; - box-shadow: @sliderBoxShadow; - background: @sliderTrackBgColor; - border-radius: @sliderTrackBorderRadius; - border: 1px solid @sliderTrackBorderColor; - } - &::-webkit-slider-thumb { - box-shadow: @sliderBoxShadow; - border: 1px solid @sliderThumbBorderColor; - height: @sliderThumbHeight; - width: @sliderThumbWidth; - border-radius: 2px; - background: @sliderThumbBgColor; - cursor: pointer; - -webkit-appearance: none; - margin-top: -4px; - } - &:focus::-webkit-slider-runnable-track { - background: @sliderTrackBgColorFocus; - border-color: @sliderTrackBorderColorFocus; - } - &::-moz-range-track { - width: 100%; - height: @sliderTrackHeight; - cursor: pointer; - box-shadow: @sliderBoxShadow; - background: @sliderTrackBgColor; - border-radius: @sliderTrackBorderRadius; - border: 1px solid @sliderTrackBorderColor; - } - &::-moz-range-thumb { - box-shadow: @sliderBoxShadow; - border: 1px solid @sliderThumbBorderColor; - height: @sliderThumbHeight; - width: @sliderThumbWidth; - border-radius: 2px; - background: @sliderThumbBgColor; - cursor: pointer; - } - &::-ms-track { - width: 100%; - height: @sliderTrackHeight; - cursor: pointer; - background: transparent; - border-color: transparent; - color: transparent; - } - &::-ms-fill-lower { - background: #8c8c8c; - border: 1px solid @sliderTrackBorderColor; - border-radius: @sliderTrackHeight; - box-shadow: @sliderBoxShadow; - } - &:focus::-ms-fill-lower { - background: @sliderTrackBgColor; - border-color: @sliderTrackBorderColorFocus; - } - &::-ms-fill-upper { - background: @sliderTrackBgColor; - border: 1px solid @sliderTrackBorderColor; - border-radius: @sliderTrackHeight; - box-shadow: @sliderBoxShadow; - } - &:focus::-ms-fill-upper { - background: @sliderTrackBgColorFocus; - border-color: @sliderTrackBorderColorFocus; - } - &::-ms-thumb { - box-shadow: @sliderBoxShadow; - border: 1px solid @sliderThumbBorderColor; - height: @sliderThumbHeight; - width: @sliderThumbWidth; - border-radius: 2px; - background: @sliderThumbBgColor; - cursor: pointer; - } - input[type='range'] + .range-value { - display: block; - flex: 0 1 48px; - text-align: center; - border: 1px solid var(--ironsworn-color-fg); - padding: 2px; - margin-left: 10px; - .inputFieldStaticMixin(); - } -} diff --git a/src/styles/inputs.scss b/src/styles/inputs.scss new file mode 100644 index 000000000..78fde7e02 --- /dev/null +++ b/src/styles/inputs.scss @@ -0,0 +1,165 @@ +// styles for form input elements. for ProseMirror and TinyMCE styles, see editors.scss. +// the main style sheet scopes these to .ironsworn, so import them again globally if you want to retheme the form inputs on the UX elements that belong to FVTT. +@import 'mixins.scss'; + +*::placeholder { + font-family: inherit; +} + +select { + @include inputFieldMixin(); + border-style: outset; +} + +textarea { + @include inputFieldMixin(); +} + +input[type='text'], +input[type='number'], +input[type='password'], +input[type='date'], +input[type='time'], +input[type='search'] { + @include inputFieldMixin(); +} + +// CHECKBOXES +input[type='checkbox'] { + accent-color: var(--ironsworn-color-fg); + cursor: pointer; +} +label.checkbox { + cursor: pointer; +} +// RADIO BUTTONS +input[type='radio'] { + accent-color: var(--ironsworn-color-fg); + cursor: pointer; +} +// NUMBER SPINNERS +input[type='number'] { + -moz-appearance: auto; + &::-webkit-inner-spin-button, + &::-webkit-outer-spin-button { + -webkit-appearance: button !important; + opacity: 1 !important; + } +} + +// RANGE SLIDERS + +input[type='range'] { + $sliderThumbBgColor: var(--ironsworn-color-fg); + $sliderThumbBorderColor: var(--ironsworn-color-cool-50); + $sliderThumbBgColorFocus: var(--ironsworn-color-fg); + $sliderThumbBorderColorFocus: var(--ironsworn-color-warm-90); + $sliderThumbHeight: 12px; + $sliderThumbWidth: 12px; + + $sliderTrackHeight: 6px; + $sliderTrackBorderRadius: ($sliderTrackHeight / 2); + $sliderTrackBgColor: var(--ironsworn-color-fg-20); + $sliderTrackBorderColor: var(--ironsworn-color-fg-20); + $sliderTrackBgColorFocus: var(--ironsworn-color-warm-20); + $sliderTrackBorderColorFocus: var(--ironsworn-color-cool-50); + $sliderBoxShadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + + background: transparent; + -webkit-appearance: none; + height: 20px; + margin: 0; + width: 100%; + + &:focus { + outline: none; + } + &::-webkit-slider-runnable-track { + width: 100%; + height: $sliderTrackHeight; + cursor: pointer; + box-shadow: $sliderBoxShadow; + background: $sliderTrackBgColor; + border-radius: $sliderTrackBorderRadius; + border: 1px solid $sliderTrackBorderColor; + } + &::-webkit-slider-thumb { + box-shadow: $sliderBoxShadow; + border: 1px solid $sliderThumbBorderColor; + height: $sliderThumbHeight; + width: $sliderThumbWidth; + border-radius: 2px; + background: $sliderThumbBgColor; + cursor: pointer; + -webkit-appearance: none; + margin-top: -4px; + } + &:focus::-webkit-slider-runnable-track { + background: $sliderTrackBgColorFocus; + border-color: $sliderTrackBorderColorFocus; + } + &::-moz-range-track { + width: 100%; + height: $sliderTrackHeight; + cursor: pointer; + box-shadow: $sliderBoxShadow; + background: $sliderTrackBgColor; + border-radius: $sliderTrackBorderRadius; + border: 1px solid $sliderTrackBorderColor; + } + &::-moz-range-thumb { + box-shadow: $sliderBoxShadow; + border: 1px solid $sliderThumbBorderColor; + height: $sliderThumbHeight; + width: $sliderThumbWidth; + border-radius: 2px; + background: $sliderThumbBgColor; + cursor: pointer; + } + &::-ms-track { + width: 100%; + height: $sliderTrackHeight; + cursor: pointer; + background: transparent; + border-color: transparent; + color: transparent; + } + &::-ms-fill-lower { + background: #8c8c8c; + border: 1px solid $sliderTrackBorderColor; + border-radius: $sliderTrackHeight; + box-shadow: $sliderBoxShadow; + } + &:focus::-ms-fill-lower { + background: $sliderTrackBgColor; + border-color: $sliderTrackBorderColorFocus; + } + &::-ms-fill-upper { + background: $sliderTrackBgColor; + border: 1px solid $sliderTrackBorderColor; + border-radius: $sliderTrackHeight; + box-shadow: $sliderBoxShadow; + } + &:focus::-ms-fill-upper { + background: $sliderTrackBgColorFocus; + border-color: $sliderTrackBorderColorFocus; + } + &::-ms-thumb { + box-shadow: $sliderBoxShadow; + border: 1px solid $sliderThumbBorderColor; + height: $sliderThumbHeight; + width: $sliderThumbWidth; + border-radius: 2px; + background: $sliderThumbBgColor; + cursor: pointer; + } + input[type='range'] + .range-value { + display: block; + flex: 0 1 48px; + text-align: center; + border: 1px solid var(--ironsworn-color-fg); + padding: 2px; + margin-left: 10px; + @include inputFieldStaticMixin(); + } +} diff --git a/src/styles/list.less b/src/styles/list.scss similarity index 100% rename from src/styles/list.less rename to src/styles/list.scss diff --git a/src/styles/mixins.less b/src/styles/mixins.scss similarity index 66% rename from src/styles/mixins.less rename to src/styles/mixins.scss index c404d9363..0781c0624 100644 --- a/src/styles/mixins.less +++ b/src/styles/mixins.scss @@ -5,11 +5,11 @@ // in the mean time, we can fake a 1px solid outside stroke by stacking text-shadow or drop-shadow filters. be cautious with overusing it; they're not blurred, so the computational cost isn't *too* bad, but that's still 6x as many shadows as we want to be drawing. // if you want this + a soft shadow, LESS can combine them with square bracket notation to access the text-shadow property. // generated with owumaro.github.io/text-stroke-generator/ -.textStrokeMixin(@color: var(--ironsworn-color-text-stroke)) { - text-shadow: 1px 0px 0px @color, 0.540302px 0.841471px 0px @color, - -0.416147px 0.909297px 0px @color, -0.989993px 0.14112px 0px @color, - -0.653644px -0.756803px 0px @color, 0.283662px -0.958924px 0px @color, - 0.96017px -0.279416px 0px @color; +@mixin textStrokeMixin($color: var(--ironsworn-color-text-stroke)){ + text-shadow: 1px 0px 0px $color, 0.540302px 0.841471px 0px $color, + -0.416147px 0.909297px 0px $color, -0.989993px 0.14112px 0px $color, + -0.653644px -0.756803px 0px $color, 0.283662px -0.958924px 0px $color, + 0.96017px -0.279416px 0px $color; } .initial-caps { &::first-letter { @@ -20,28 +20,28 @@ // special effects // used to mark focused fields -.borderGlowExteriorMixin(@spread:6px) { - box-shadow: 0 0 @spread var(--ironsworn-color-cool); +@mixin borderGlowExteriorMixin($spread:6px){ + box-shadow: 0 0 $spread var(--ironsworn-color-cool); } // used inside block/tab like elements. it's inset so that both the focus effect and the hover effect can be visible at once. -.borderGlowInteriorMixin(@spread:5px,@blur:0,@color:var(--ironsworn-color-cool)) { - box-shadow: inset 0 0 @spread @blur @color; +@mixin borderGlowInteriorMixin($spread:5px,$blur:0,$color:var(--ironsworn-color-cool)){ + box-shadow: inset 0 0 $spread $blur $color; } // sets border colours, modelled after the hover effect on FVTT's canvas buttons. -.borderAccentColorMixin(@warm:var(--ironsworn-color-warm),@cool:var(--ironsworn-color-cool)) { - border-color: @warm; - border-bottom-color: @cool; +@mixin borderAccentColorMixin($warm:var(--ironsworn-color-warm),$cool:var(--ironsworn-color-cool)){ + border-color: $warm; + border-bottom-color: $cool; } -.textGlowMixin(@color:var(--ironsworn-color-fg-highlight),@spread:10px) { - text-shadow: 0 0 @spread @color; +@mixin textGlowMixin($color:var(--ironsworn-color-fg-highlight),$spread:10px){ + text-shadow: 0 0 $spread $color; } // used for e.g. hover effects. resembles a transparent overlay (with a subtle gradient) without having to do any interpolation or set additional variables. -.overlayGlowMixin(@blockSize:50px) { - .borderGlowInteriorMixin(calc(@blockSize / 2),0,var(--ironsworn-color-thematic,var(--ironsworn-color-clickable-block-bg-hover))); +@mixin overlayGlowMixin($blockSize:50px){ + @include borderGlowInteriorMixin(calc($blockSize / 2),0,var(--ironsworn-color-thematic,var(--ironsworn-color-clickable-block-bg-hover))); } .borderFloatingMixin { @@ -49,48 +49,48 @@ border-color: var(--ironsworn-color-border); } -.tabBaseMixin(@glowSpread: 5px, @glowBlur: 1px,@borderWidth: var(--ironsworn-border-width-md)) { - border-width: @borderWidth; +@mixin tabBaseMixin($glowSpread: 5px, $glowBlur: 1px,$borderWidth: var(--ironsworn-border-width-md)){ + border-width: $borderWidth; &:hover { - .borderGlowInteriorMixin(@glowSpread, @glowBlur, var(--ironsworn-color-clickable-block-bg-selected)); + @include borderGlowInteriorMixin($glowSpread, $glowBlur, var(--ironsworn-color-clickable-block-bg-selected)); border-color: var(--ironsworn-color-fg-muted); } &[aria-selected='true'], &.active { - .borderGlowInteriorMixin(@glowSpread, @glowBlur, var(--ironsworn-color-cool)); + @include borderGlowInteriorMixin($glowSpread, $glowBlur, var(--ironsworn-color-cool)); border-color: var(--ironsworn-color-warm); } } -.tabTopMixin(@borderRadius:var(--ironsworn-border-radius-lg)) { - .tabBaseMixin(); - border-top-right-radius: @borderRadius; - border-top-left-radius: @borderRadius; +@mixin tabTopMixin($borderRadius:var(--ironsworn-border-radius-lg)){ + @include tabBaseMixin(); + border-top-right-radius: $borderRadius; + border-top-left-radius: $borderRadius; border-bottom-width: 0px; } -.tabBottomMixin(@borderRadius:var(--ironsworn-border-radius-lg)) { - .tabBaseMixin(); - border-bottom-right-radius: @borderRadius; - border-bottom-left-radius: @borderRadius; +@mixin tabBottomMixin($borderRadius:var(--ironsworn-border-radius-lg)){ + @include tabBaseMixin(); + border-bottom-right-radius: $borderRadius; + border-bottom-left-radius: $borderRadius; border-top-width: 0px; } -.tabLeftMixin(@borderRadius:var(--ironsworn-border-radius-lg)) { - .tabBaseMixin(); - border-top-left-radius: @borderRadius; - border-bottom-left-radius: @borderRadius; +@mixin tabLeftMixin($borderRadius:var(--ironsworn-border-radius-lg)){ + @include tabBaseMixin(); + border-top-left-radius: $borderRadius; + border-bottom-left-radius: $borderRadius; border-right-width: 0px; } -.tabRightMixin(@borderRadius:var(--ironsworn-border-radius-lg)) { - .tabBaseMixin(); - border-top-right-radius: @borderRadius; - border-bottom-right-radius: @borderRadius; +@mixin tabRightMixin($borderRadius:var(--ironsworn-border-radius-lg)){ + @include tabBaseMixin(); + border-top-right-radius: $borderRadius; + border-bottom-right-radius: $borderRadius; border-left-width: 0px; } -.borderMixin(@color:var(--ironsworn-color-border),@width:var(--ironsworn-border-width-md)) { - color: @color; +@mixin borderMixin($color:var(--ironsworn-color-border),$width:var(--ironsworn-border-width-md)){ + color: $color; border-style: solid; - border-width: @width; + border-width: $width; } // CLICKABLE MIXINS @@ -112,7 +112,7 @@ filter: var(--ironsworn-filter-highlight); } .textFocusMixin { - .focusOutlineMixin(); + @include focusOutlineMixin(); } .textActiveMixin { @@ -122,9 +122,9 @@ .clickableTextMixin { --ironsworn-color-text-stroke: transparent; - .interactiveMixin(); + @include interactiveMixin(); margin: 0; - // .textStrokeMixin(); + // @include textStrokeMixin(); background: transparent; color: var(--ironsworn-color-clickable-text); border-width: 0; @@ -137,21 +137,21 @@ &.selected, &.active { --ironsworn-color-text-stroke: var(--ironsworn-color-warm-50); - .textActiveMixin(); + @include textActiveMixin(); } &:hover, &.hover { --ironsworn-color-text-stroke: var(--ironsworn-color-warm-50); - .textHoverMixin(); + @include textHoverMixin(); } &:focus, &:focus-within { --ironsworn-color-text-stroke: var(--ironsworn-color-warm-50); - .textFocusMixin(); + @include textFocusMixin(); } } -.blockHoverMixin(@blockSize:50px) { +@mixin blockHoverMixin($blockSize:50px){ color: var(--ironsworn-color-clickable-block-fg-hover); background-color: var(--ironsworn-color-clickable-block-bg-hover); border-color: var(--ironsworn-color-clickable-block-border-hover); @@ -160,7 +160,7 @@ .blockFocusMixin { z-index: var(--ironsworn-z-index-highest); - .focusOutlineMixin(); + @include focusOutlineMixin(); } .blockActiveMixin { @@ -175,8 +175,8 @@ } // For the block's 'default' state. -.blockMixin(@blockSize:50px) { - .interactiveMixin(); +@mixin blockMixin($blockSize:50px){ + @include interactiveMixin(); box-shadow: none; overflow-y: visible; border-color: var(--ironsworn-color-clickable-block-border); @@ -235,32 +235,32 @@ } } -.clickableBlockMixin(@blockSize:50px,) { - .blockMixin(@blockSize); +@mixin clickableBlockMixin($blockSize:50px,){ + @include blockMixin($blockSize); &:hover, &.hover { - .blockHoverMixin(@blockSize); + @include blockHoverMixin($blockSize); } &:focus, &:focus-within { - .blockFocusMixin(); + @include blockFocusMixin(); } &[aria-selected='true'], &.selected, &.active { - .blockActiveMixin(); + @include blockActiveMixin(); } } // input mixins -.inputFieldFocusMixin(@spread: 6px) { - .borderGlowExteriorMixin(@spread); - .borderAccentColorMixin(var(--ironsworn-color-warm-50), var(--ironsworn-color-cool-50)); +@mixin inputFieldFocusMixin($spread: 6px){ + @include borderGlowExteriorMixin($spread); + @include borderAccentColorMixin(var(--ironsworn-color-warm-50), var(--ironsworn-color-cool-50)); outline: var(--ironsworn-border-width-md) solid var(--ironsworn-color-warm); } -.inputFieldStaticMixin() { +@mixin inputFieldStaticMixin(){ color: var(--ironsworn-color-fg); background: var(--ironsworn-color-input-bg); border-width: var(--ironsworn-border-width-md); @@ -269,13 +269,13 @@ border-radius: var(--ironsworn-border-radius-md); } -.inputFieldMixin(@spread:6px) { +@mixin inputFieldMixin($spread:6px){ // specify invisible outline to stop jitter from border width transition outline-width: var(--ironsworn-border-width-md); outline-style: solid; outline-color: transparent; - .interactiveMixin(); - .inputFieldStaticMixin(); + @include interactiveMixin(); + @include inputFieldStaticMixin(); cursor: initial; &::placeholder { color: var(--ironsworn-color-fg); @@ -283,31 +283,31 @@ } &:hover { border-color: var(--ironsworn-color-clickable-block-border-hover); - .borderGlowInteriorMixin(@spread, 0, var(--ironsworn-color-cool)); + @include borderGlowInteriorMixin($spread, 0, var(--ironsworn-color-cool)); } &:focus, &:focus-within { - .inputFieldFocusMixin(); - .borderAccentColorMixin(var(--ironsworn-color-warm-80), var(--ironsworn-color-cool-80)); + @include inputFieldFocusMixin(); + @include borderAccentColorMixin(var(--ironsworn-color-warm-80), var(--ironsworn-color-cool-80)); &:hover { - box-shadow: .inputFieldFocusMixin() [box-shadow], - .borderGlowInteriorMixin(@spread, 0, var(--ironsworn-color-cool)) + box-shadow: @include inputFieldFocusMixin(); [box-shadow], + @include borderGlowInteriorMixin($spread, 0, var(--ironsworn-color-cool)); [box-shadow]; } } } -.marginMixin(@direction) { - @spacer: var(--ironsworn-spacer-md); +@mixin marginMixin($direction){ + $spacer: var(--ironsworn-spacer-md); flex: 0; - border-@{direction}-style: solid; + border-#{$direction}-style: solid; position: relative; - border-@{direction}-width: var(--ironsworn-border-width-md); - margin-@{direction}: @spacer; - border-@{direction}-color: var(--ironsworn-color-border); + border-#{$direction}-width: var(--ironsworn-border-width-md); + margin-#{$direction}: $spacer; + border-#{$direction}-color: var(--ironsworn-color-border); } -.focusOutlineMixin() { +@mixin focusOutlineMixin(){ // outline disabled for now // outline: 1px solid var(--ironsworn-color-cool) !important; z-index: var(--ironsworn-z-index-highest); @@ -317,19 +317,19 @@ // since gradients are *images*, they're overlaid on top of background-colour. great for a lazy tint on a highlighted element. // we *could* just make it a single-color 'gradient', but i think the subtle colour movement is kinda fun. :) // only problem is they're not currently animatable... at least, not without getting some sorcery w/ pseudo-elements involved. -.staticHighlightMixin(@opacity:20,@direction:'to bottom') { - background-image: e( +@mixin staticHighlightMixin($opacity:20,$direction:'to bottom'){ + background-image: unquote( %( 'linear-gradient(%s, var(--ironsworn-color-warm-%s), var(--ironsworn-color-cool-%s))', - @direction, - @opacity, - @opacity + $direction, + $opacity, + $opacity ) ); background-blend-mode: overlay; } -.overlayMixin() { +@mixin overlayMixin(){ content: ''; position: absolute; top: 0; @@ -340,7 +340,7 @@ z-index: var(--ironsworn-z-index-highest); } -.textCompactMixin() { +@mixin textCompactMixin(){ ol, ul { padding: 0 0 0 1em; diff --git a/src/styles/scrollbar.less b/src/styles/scrollbar.less deleted file mode 100644 index c93a24259..000000000 --- a/src/styles/scrollbar.less +++ /dev/null @@ -1,26 +0,0 @@ -@import 'mixins.less'; - -@scrollbarThumbBgColor: var(--ironsworn-color-fg-50); -@scrollbarThumbBorderColor: var(--ironsworn-color-warm-50); -@scrollbarTrackColor: var(--ironsworn-color-fg-50); -@scrollbarWidth: 6px; - -::-webkit-scrollbar { - width: @scrollbarWidth; - height: @scrollbarWidth; -} -::-webkit-scrollbar-track { - box-shadow: 0 0 1px var(--ironsworn-color-cool-50) inset; - border-radius: 4px; -} -::-webkit-scrollbar-thumb { - outline: none; - border-radius: (@scrollbarWidth / 2); - background: @scrollbarThumbBgColor; - border: 1px solid @scrollbarThumbBorderColor; -} -:root { - scrollbar-width: thin; - scrollbar-color: @scrollbarThumbBgColor @scrollbarTrackColor; - scrollbar-gutter: auto; -} diff --git a/src/styles/scrollbar.scss b/src/styles/scrollbar.scss new file mode 100644 index 000000000..f8a59c1ec --- /dev/null +++ b/src/styles/scrollbar.scss @@ -0,0 +1,26 @@ +@import 'mixins.scss'; + +$scrollbarThumbBgColor: var(--ironsworn-color-fg-50); +$scrollbarThumbBorderColor: var(--ironsworn-color-warm-50); +$scrollbarTrackColor: var(--ironsworn-color-fg-50); +$scrollbarWidth: 6px; + +::-webkit-scrollbar { + width: $scrollbarWidth; + height: $scrollbarWidth; +} +::-webkit-scrollbar-track { + box-shadow: 0 0 1px var(--ironsworn-color-cool-50) inset; + border-radius: 4px; +} +::-webkit-scrollbar-thumb { + outline: none; + border-radius: ($scrollbarWidth / 2); + background: $scrollbarThumbBgColor; + border: 1px solid $scrollbarThumbBorderColor; +} +:root { + scrollbar-width: thin; + scrollbar-color: $scrollbarThumbBgColor $scrollbarTrackColor; + scrollbar-gutter: auto; +} diff --git a/src/styles/sheet.less b/src/styles/sheet.scss similarity index 100% rename from src/styles/sheet.less rename to src/styles/sheet.scss diff --git a/src/styles/styles.less b/src/styles/styles.scss similarity index 88% rename from src/styles/styles.less rename to src/styles/styles.scss index 7cd02f469..30347c391 100644 --- a/src/styles/styles.less +++ b/src/styles/styles.scss @@ -1,4 +1,4 @@ -@import 'mixins.less'; +@import 'mixins.scss'; :root { // VARIABLES: DIMENSIONS FOR SPACERS, BORDERS, ETC @@ -83,11 +83,11 @@ // :where is a zero-specificity selector, used here so that it's not impossible for components to override global styles // https://developer.mozilla.org/en-US/docs/Web/CSS/:where :where(.ironsworn) { - @import 'utils.less'; - @import 'inputs.less'; - @import (reference) './fvtt/dialog.less'; + @import 'utils.scss'; + @import 'inputs.scss'; + @import (reference) './fvtt/dialog.scss'; &.dialog { - .dialog(); + @include dialog(); } form button, button { @@ -98,7 +98,7 @@ } } -@import 'transitions.less'; +@import 'transitions.scss'; .system-foundry-ironsworn { // transitions for interactive elements @@ -120,7 +120,7 @@ // stuff scoped to .ironsworn app windows only .window-title { - .initial-caps(); + @include initial-caps(); } .window-content { background: var(--ironsworn-color-bg); @@ -154,17 +154,17 @@ } // importing within this selector to ensure higher specificity - @import 'assets.less'; - @import 'attr-box.less'; - @import 'chat-message.less'; - @import 'clickable.less'; - @import 'dialog.less'; - @import 'dice.less'; - @import 'drag-and-drop.less'; - @import 'editor.less'; - @import 'icons.less'; - @import 'list.less'; - @import 'scrollbar.less'; - @import 'sheet.less'; - @import 'tables.less'; + @import 'assets.scss'; + @import 'attr-box.scss'; + @import 'chat-message.scss'; + @import 'clickable.scss'; + @import 'dialog.scss'; + @import 'dice.scss'; + @import 'drag-and-drop.scss'; + @import 'editor.scss'; + @import 'icons.scss'; + @import 'list.scss'; + @import 'scrollbar.scss'; + @import 'sheet.scss'; + @import 'tables.scss'; } diff --git a/src/styles/tables.less b/src/styles/tables.scss similarity index 90% rename from src/styles/tables.less rename to src/styles/tables.scss index ba39f8b2e..1050d483e 100644 --- a/src/styles/tables.less +++ b/src/styles/tables.scss @@ -1,4 +1,4 @@ -@import 'mixins.less'; +@import 'mixins.scss'; // general table styles table { @@ -20,7 +20,7 @@ table { .oracle-table { .oracle-table-column-result-text { a.entity-link { - .clickableTextMixin(); + @include clickableTextMixin(); border: none; background: none !important; } @@ -38,7 +38,7 @@ table { .oracle-result-row { &.selected, &[aria-selected='true'] { - .staticHighlightMixin(20); + @include staticHighlightMixin(20); } } } diff --git a/src/styles/themes/ironsworn.less b/src/styles/themes/ironsworn.scss similarity index 50% rename from src/styles/themes/ironsworn.less rename to src/styles/themes/ironsworn.scss index 28668f835..a4f02da32 100644 --- a/src/styles/themes/ironsworn.less +++ b/src/styles/themes/ironsworn.scss @@ -1,13 +1,13 @@ // Light theme for Ironsworn, with minimal restyling of FVTT's stock UI. .system-foundry-ironsworn.theme-ironsworn { - @import (reference) './mixins/colors.less'; - @import (reference) './mixins/palettize.less'; + @import (reference) './mixins/colors.scss'; + @import (reference) './mixins/palettize.scss'; // #ff6600 and #ff0000 chosen because they're what FVTT uses for similar accents. - .palettize(ironsworn-color, #000000, #ffffff, #ff6600, #ff0000); - .ironswornLightThemeMixin(ironsworn-color); - .sharpBorderMixin(ironsworn-color); - .interactiveInvertMixin(ironsworn-color-clickable-block,ironsworn-color); + @include palettize(ironsworn-color, #000000, #ffffff, #ff6600, #ff0000); + @include ironswornLightThemeMixin(ironsworn-color); + @include sharpBorderMixin(ironsworn-color); + @include interactiveInvertMixin(ironsworn-color-clickable-block,ironsworn-color); --ironsworn-color-text-stroke: transparent; @@ -17,6 +17,6 @@ ); --ironsworn-box-shadow-highlight: 0 0 3px var(--ironsworn-color-cool); - @import (reference) './mixins/decorations.less'; - .ironswornDecorationMixin(); + @import (reference) './mixins/decorations.scss'; + @include ironswornDecorationMixin(); } diff --git a/src/styles/themes/mixins/colors.less b/src/styles/themes/mixins/colors.less deleted file mode 100644 index 03f19062b..000000000 --- a/src/styles/themes/mixins/colors.less +++ /dev/null @@ -1,47 +0,0 @@ -.ironswornLightThemeMixin(@prefix) { - --@{prefix}-legacy-quests: var(--ironsworn-color-red); - --@{prefix}-legacy-bonds: var(--ironsworn-color-purple); - --@{prefix}-legacy-discoveries: var(--ironsworn-color-blue); -} -.ironswornDarkThemeMixin(@prefix) { - --@{prefix}-legacy-quests: var(--ironsworn-color-red-dark); - --@{prefix}-legacy-bonds: var(--ironsworn-color-purple-dark); - --@{prefix}-legacy-discoveries: var(--ironsworn-color-blue-dark); -} - -// generates color variables to style an interactive element with an invert effect when it's active -.interactiveInvertMixin(@elementPrefix, @sourcePrefix) { - --@{elementPrefix}-fg: var(e(%('--%s-fg', @sourcePrefix))); - --@{elementPrefix}-bg: transparent; - --@{elementPrefix}-border: var(e(%('--%s-fg', @sourcePrefix))); - --@{elementPrefix}-fg-hover: var(e(%('--%s-fg', @sourcePrefix))); - --@{elementPrefix}-bg-hover: var(e(%('--%s-fg-20', @sourcePrefix))); - --@{elementPrefix}-border-hover: var(e(%('--%s-fg', @sourcePrefix))); - --@{elementPrefix}-fg-selected: var(e(%('--%s-bg', @sourcePrefix))); - --@{elementPrefix}-bg-selected: var(e(%('--%s-fg', @sourcePrefix))); - --@{elementPrefix}-border-selected: var(e(%('--%s-fg', @sourcePrefix))); -} -// generates color variables to style an interactive element with slightly dulled colours in its default state, and a tint effect when it's active. -.interactiveTintMixin(@elementPrefix, @sourcePrefix) { - --@{elementPrefix}-fg: var(e(%('--%s-midtone-80', @sourcePrefix))); - --@{elementPrefix}-bg: transparent; - --@{elementPrefix}-border: var(e(%('--%s-midtone-80', @sourcePrefix))); - --@{elementPrefix}-fg-hover: var(e(%('--%s-fg-warm', @sourcePrefix))); - --@{elementPrefix}-bg-hover: var(e(%('--%s-fg-30', @sourcePrefix))); - --@{elementPrefix}-border-hover: var(e(%('--%s-fg', @sourcePrefix))); - --@{elementPrefix}-fg-selected: var(e(%('--%s-fg-warm', @sourcePrefix))); - --@{elementPrefix}-bg-selected: var(e(%('--%s-fg-50', @sourcePrefix))); - --@{elementPrefix}-border-selected: var(e(%('--%s-fg-warm', @sourcePrefix))); -} - -.softBorderMixin(@prefix) { - --@{prefix}-border-highlight: var(e(%('--%s-fg-warm', @prefix))); - --@{prefix}-border: var(e(%('--%s-fg-80', @prefix))); - --@{prefix}-border-muted: var(e(%('--%s-fg-30', @prefix))); -} - -.sharpBorderMixin(@prefix) { - --@{prefix}-border-highlight: var(e(%('--%s-fg-warm', @prefix))); - --@{prefix}-border: var(e(%('--%s-fg', @prefix))); - --@{prefix}-border-muted: var(e(%('--%s-fg-80', @prefix))); -} diff --git a/src/styles/themes/mixins/colors.scss b/src/styles/themes/mixins/colors.scss new file mode 100644 index 000000000..be078937c --- /dev/null +++ b/src/styles/themes/mixins/colors.scss @@ -0,0 +1,47 @@ +@mixin ironswornLightThemeMixin($prefix){ + --#{$prefix}-legacy-quests: var(--ironsworn-color-red); + --#{$prefix}-legacy-bonds: var(--ironsworn-color-purple); + --#{$prefix}-legacy-discoveries: var(--ironsworn-color-blue); +} +@mixin ironswornDarkThemeMixin($prefix){ + --#{$prefix}-legacy-quests: var(--ironsworn-color-red-dark); + --#{$prefix}-legacy-bonds: var(--ironsworn-color-purple-dark); + --#{$prefix}-legacy-discoveries: var(--ironsworn-color-blue-dark); +} + +// generates color variables to style an interactive element with an invert effect when it's active +@mixin interactiveInvertMixin($elementPrefix, $sourcePrefix){ + --#{$elementPrefix}-fg: var(e(undefined + --#{$elementPrefix}-bg: transparent; + --#{$elementPrefix}-border: var(e(undefined + --#{$elementPrefix}-fg-hover: var(e(undefined + --#{$elementPrefix}-bg-hover: var(e(undefined + --#{$elementPrefix}-border-hover: var(e(undefined + --#{$elementPrefix}-fg-selected: var(e(undefined + --#{$elementPrefix}-bg-selected: var(e(undefined + --#{$elementPrefix}-border-selected: var(e(undefined +} +// generates color variables to style an interactive element with slightly dulled colours in its default state, and a tint effect when it's active. +@mixin interactiveTintMixin($elementPrefix, $sourcePrefix){ + --#{$elementPrefix}-fg: var(e(undefined + --#{$elementPrefix}-bg: transparent; + --#{$elementPrefix}-border: var(e(undefined + --#{$elementPrefix}-fg-hover: var(e(undefined + --#{$elementPrefix}-bg-hover: var(e(undefined + --#{$elementPrefix}-border-hover: var(e(undefined + --#{$elementPrefix}-fg-selected: var(e(undefined + --#{$elementPrefix}-bg-selected: var(e(undefined + --#{$elementPrefix}-border-selected: var(e(undefined +} + +@mixin softBorderMixin($prefix){ + --#{$prefix}-border-highlight: var(e(undefined + --#{$prefix}-border: var(e(undefined + --#{$prefix}-border-muted: var(e(undefined +} + +@mixin sharpBorderMixin($prefix){ + --#{$prefix}-border-highlight: var(e(undefined + --#{$prefix}-border: var(e(undefined + --#{$prefix}-border-muted: var(e(undefined +} diff --git a/src/styles/themes/mixins/decorations.less b/src/styles/themes/mixins/decorations.scss similarity index 76% rename from src/styles/themes/mixins/decorations.less rename to src/styles/themes/mixins/decorations.scss index 8221aad81..bfc9c5b24 100644 --- a/src/styles/themes/mixins/decorations.less +++ b/src/styles/themes/mixins/decorations.scss @@ -16,9 +16,9 @@ } } -.starforgedAssetDecoMixin(@hex_deco_expanded_height: 50px, -@hex_deco_collapsed_height: 32px) { - @hex_deco_aspect_ratio: 24 / 28; +.starforgedAssetDecoMixin($hex_deco_expanded_height: 50px, +$hex_deco_collapsed_height: 32px) { + $hex_deco_aspect_ratio: 24 / 28; position: relative; & > * { z-index: 2; @@ -30,15 +30,15 @@ mask-image: url(/assets/misc/hex-deco.svg); background: var(--ironsworn-color-thematic); position: absolute; - aspect-ratio: @hex_deco_aspect_ratio; + aspect-ratio: $hex_deco_aspect_ratio; z-index: auto; mask-repeat: no-repeat; transform: scaleX(-1); - height: @hex_deco_collapsed_height; + height: $hex_deco_collapsed_height; top: -($height * 0.09); right: ($height * 0.03); } .asset-header { - padding-right: (@hex_deco_collapsed_height * @hex_deco_aspect_ratio); + padding-right: ($hex_deco_collapsed_height * $hex_deco_aspect_ratio); } } diff --git a/src/styles/themes/mixins/fvtt-var-overrides.less b/src/styles/themes/mixins/fvtt-var-overrides.scss similarity index 100% rename from src/styles/themes/mixins/fvtt-var-overrides.less rename to src/styles/themes/mixins/fvtt-var-overrides.scss diff --git a/src/styles/themes/mixins/palettize.less b/src/styles/themes/mixins/palettize.less deleted file mode 100644 index 35777da9a..000000000 --- a/src/styles/themes/mixins/palettize.less +++ /dev/null @@ -1,104 +0,0 @@ -/** - * LESS mixin that interpolates CSS variables for a palette of colours. - * Currently it doesn't check contrast, but it probably should. -* NOTE: 'warm' and 'cool' are used here primarily because they're more memorable labels than 'primary' or 'secondary'. They *could* be 'warmer'/'cooler' colours, but they don't have to be; 'warm'/'cool' are more about a UX element's importance/activity (warmer = more active/dramatic). - * @prefix - the prefix to use for the generated CSS variables. - * @fgColor - The foreground color. - * @bgColor - The background color. - * @warmColor - A saturated accent/highlight color, used both as-is and in mixtures with the other colours. - * @coolColor - A second saturated accent/highlight color, used both as-is and in mixtures with the other colours. - */ -.palettize(@prefix:palette, @fgColor:hsl(0, 0%, 0%),@bgColor:hsl(0, 0%, 100%),@warmColor:hsl(24, 100%, 50%), @coolColor:hsl(0, 100%, 50%)) { - // TODO: This could probably be improved significantly by writing palettize in JS to take advantage of chroma.js, then importing it as a LESS plugin. The various scale functions are particularly attractive! - @lightColor: if((luma(@fgColor) > luma(@bgColor)), @fgColor, @bgColor); - @darkColor: if((luma(@fgColor) < luma(@bgColor)), @fgColor, @bgColor); - - @lightWarmBase: mix(@warmColor, @lightColor, 75%); - @lightCoolBase: mix(@coolColor, @lightColor, 75%); - @darkWarmBase: mix(@warmColor, @darkColor, 75%); - @darkCoolBase: mix(@coolColor, @darkColor, 75%); - - @lightnessCeiling: 75%; - @lightnessFloor: 20%; - - @lightWarm: hsl(hue(@lightWarmBase), 100%, @lightnessCeiling); - @lightCool: hsl(hue(@lightCoolBase), 100%, @lightnessCeiling); - @darkWarm: hsl(hue(@darkWarmBase), 100%, @lightnessFloor); - @darkCool: hsl(hue(@darkCoolBase), 100%, @lightnessFloor); - - @fgWarm: if((luma(@fgColor) > luma(@bgColor)), @lightWarm, @darkWarm); - @fgCool: if((luma(@fgColor) > luma(@bgColor)), @lightCool, @darkCool); - @bgWarm: if((luma(@fgColor) < luma(@bgColor)), @lightWarm, @darkWarm); - @bgCool: if((luma(@fgColor) < luma(@bgColor)), @lightCool, @darkCool); - - // Now that all the LESS variables are set, start writing the CSS variables. - - --@{prefix}-warm: @warmColor; - --@{prefix}-cool: @coolColor; - --@{prefix}-light: @lightColor; - --@{prefix}-light-cool: @lightCool; - --@{prefix}-light-warm: @lightWarm; - --@{prefix}-dark: @darkColor; - --@{prefix}-dark-cool: @darkCool; - --@{prefix}-dark-warm: @darkWarm; - - --@{prefix}-fg: @fgColor; - --@{prefix}-bg: @bgColor; - --@{prefix}-fg-warm: @fgWarm; - --@{prefix}-fg-cool: @fgCool; - --@{prefix}-bg-warm: @bgWarm; - --@{prefix}-bg-cool: @bgCool; - - // transparent overlays - .mixOverlays(@prefix, warm, @warmColor); - .mixOverlays(@prefix, cool, @coolColor); - .mixOverlays(@prefix, light, @lightColor); - .mixOverlays(@prefix, light-cool, @lightCool); - .mixOverlays(@prefix, light-warm, @lightWarm); - .mixOverlays(@prefix, dark, @darkColor); - .mixOverlays(@prefix, dark-cool, @darkCool); - .mixOverlays(@prefix, dark-warm, @darkWarm); - .mixOverlays(@prefix, fg, @fgColor); - .mixOverlays(@prefix, fg-cool, @fgCool); - .mixOverlays(@prefix, fg-warm, @fgWarm); - .mixOverlays(@prefix, bg, @bgColor); - .mixOverlays(@prefix, bg-cool, @bgCool); - .mixOverlays(@prefix, bg-warm, @bgWarm); - - // *-midtone-* variables describe a color scale from @fgColor to @bgColor, where *-midtone-90 is 90% @fgColor, and *-midtone-10 is 10% @fgColor. - .mixScale(@prefix, midtone, @bgColor, @fgColor); - - // *-scale-* variables describe a color scale from @lightColor to @darkColor, where *-scale-90 is 90% @lightColor, and *-scale-10 is 10% @lightColor. - .mixScale(@prefix, scale, @darkColor, @lightColor); - - // Set sensible defaults for semantically-oriented colors - - --@{prefix}-fg-muted: var(e(%('--%s-midtone-60', @prefix))); - --@{prefix}-fg-highlight: var(e(%('--%s-fg-warm', @prefix))); - - // INPUT - --@{prefix}-input-bg: var(e(%('--%s-fg-10', @prefix))); - --@{prefix}-input-border: var(e(%('--%s-fg-10', @prefix))); - - // CLICKABLE TEXT - --@{prefix}-clickable-text: inherit; - --@{prefix}-clickable-text-hover: var(e(%('--%s-fg-warm', @prefix))); - --@{prefix}-clickable-text-selected: var(e(%('--%s-fg-warm', @prefix))); - - // WIDGETS - --@{prefix}-widget-fill: var(e(%('--%s-midtone-60', @prefix))); -} - -// HELPER MIXINS -.mixOverlays(@prefix,@infix,@baseColor) { - @overlays: range(10, 90, 10); - each(@overlays, { - --@{prefix}-@{infix}-@{value}: fade(@baseColor, @value); - }); -} -.mixScale(@prefix,@infix,@baseColor,@addedColor) { - @mixtures: range(10, 90, 10); - each(@mixtures, { - --@{prefix}-@{infix}-@{value}: mix(@addedColor, @baseColor, @value); - }); -} diff --git a/src/styles/themes/mixins/palettize.scss b/src/styles/themes/mixins/palettize.scss new file mode 100644 index 000000000..76fbaa81f --- /dev/null +++ b/src/styles/themes/mixins/palettize.scss @@ -0,0 +1,104 @@ +/** + * LESS mixin that interpolates CSS variables for a palette of colours. + * Currently it doesn't check contrast, but it probably should. +* NOTE: 'warm' and 'cool' are used here primarily because they're more memorable labels than 'primary' or 'secondary'. They *could* be 'warmer'/'cooler' colours, but they don't have to be; 'warm'/'cool' are more about a UX element's importance/activity (warmer = more active/dramatic). + * $prefix - the prefix to use for the generated CSS variables. + * $fgColor - The foreground color. + * $bgColor - The background color. + * $warmColor - A saturated accent/highlight color, used both as-is and in mixtures with the other colours. + * $coolColor - A second saturated accent/highlight color, used both as-is and in mixtures with the other colours. + */ +@mixin palettize($prefix:palette, $fgColor:hsl(0, 0%, 0%),$bgColor:hsl(0, 0%, 100%),$warmColor:hsl(24, 100%, 50%), $coolColor:hsl(0, 100%, 50%)){ + // TODO: This could probably be improved significantly by writing palettize in JS to take advantage of chroma.js, then importing it as a LESS plugin. The various scale functions are particularly attractive! + $lightColor: if((luma($fgColor) > luma($bgColor)), $fgColor, $bgColor); + $darkColor: if((luma($fgColor) < luma($bgColor)), $fgColor, $bgColor); + + $lightWarmBase: mix($warmColor, $lightColor, 75%); + $lightCoolBase: mix($coolColor, $lightColor, 75%); + $darkWarmBase: mix($warmColor, $darkColor, 75%); + $darkCoolBase: mix($coolColor, $darkColor, 75%); + + $lightnessCeiling: 75%; + $lightnessFloor: 20%; + + $lightWarm: hsl(hue($lightWarmBase), 100%, $lightnessCeiling); + $lightCool: hsl(hue($lightCoolBase), 100%, $lightnessCeiling); + $darkWarm: hsl(hue($darkWarmBase), 100%, $lightnessFloor); + $darkCool: hsl(hue($darkCoolBase), 100%, $lightnessFloor); + + $fgWarm: if((luma($fgColor) > luma($bgColor)), $lightWarm, $darkWarm); + $fgCool: if((luma($fgColor) > luma($bgColor)), $lightCool, $darkCool); + $bgWarm: if((luma($fgColor) < luma($bgColor)), $lightWarm, $darkWarm); + $bgCool: if((luma($fgColor) < luma($bgColor)), $lightCool, $darkCool); + + // Now that all the LESS variables are set, start writing the CSS variables. + + --#{$prefix}-warm: $warmColor; + --#{$prefix}-cool: $coolColor; + --#{$prefix}-light: $lightColor; + --#{$prefix}-light-cool: $lightCool; + --#{$prefix}-light-warm: $lightWarm; + --#{$prefix}-dark: $darkColor; + --#{$prefix}-dark-cool: $darkCool; + --#{$prefix}-dark-warm: $darkWarm; + + --#{$prefix}-fg: $fgColor; + --#{$prefix}-bg: $bgColor; + --#{$prefix}-fg-warm: $fgWarm; + --#{$prefix}-fg-cool: $fgCool; + --#{$prefix}-bg-warm: $bgWarm; + --#{$prefix}-bg-cool: $bgCool; + + // transparent overlays + @include mixOverlays($prefix, warm, $warmColor); + @include mixOverlays($prefix, cool, $coolColor); + @include mixOverlays($prefix, light, $lightColor); + @include mixOverlays($prefix, light-cool, $lightCool); + @include mixOverlays($prefix, light-warm, $lightWarm); + @include mixOverlays($prefix, dark, $darkColor); + @include mixOverlays($prefix, dark-cool, $darkCool); + @include mixOverlays($prefix, dark-warm, $darkWarm); + @include mixOverlays($prefix, fg, $fgColor); + @include mixOverlays($prefix, fg-cool, $fgCool); + @include mixOverlays($prefix, fg-warm, $fgWarm); + @include mixOverlays($prefix, bg, $bgColor); + @include mixOverlays($prefix, bg-cool, $bgCool); + @include mixOverlays($prefix, bg-warm, $bgWarm); + + // *-midtone-* variables describe a color scale from $fgColor to $bgColor, where *-midtone-90 is 90% $fgColor, and *-midtone-10 is 10% $fgColor. + @include mixScale($prefix, midtone, $bgColor, $fgColor); + + // *-scale-* variables describe a color scale from $lightColor to $darkColor, where *-scale-90 is 90% $lightColor, and *-scale-10 is 10% $lightColor. + @include mixScale($prefix, scale, $darkColor, $lightColor); + + // Set sensible defaults for semantically-oriented colors + + --#{$prefix}-fg-muted: var(e(undefined + --#{$prefix}-fg-highlight: var(e(undefined + + // INPUT + --#{$prefix}-input-bg: var(e(undefined + --#{$prefix}-input-border: var(e(undefined + + // CLICKABLE TEXT + --#{$prefix}-clickable-text: inherit; + --#{$prefix}-clickable-text-hover: var(e(undefined + --#{$prefix}-clickable-text-selected: var(e(undefined + + // WIDGETS + --#{$prefix}-widget-fill: var(e(undefined +} + +// HELPER MIXINS +@mixin mixOverlays($prefix,$infix,$baseColor){ + $overlays: range(10, 90, 10); + each($overlays, { + --#{$prefix}-#{$infix}-#{$value}: rgba($baseColor, $value); + }); +} +@mixin mixScale($prefix,$infix,$baseColor,$addedColor){ + $mixtures: range(10, 90, 10); + each($mixtures, { + --#{$prefix}-#{$infix}-#{$value}: mix($addedColor, $baseColor, $value); + }); +} diff --git a/src/styles/themes/starforged.less b/src/styles/themes/starforged.scss similarity index 52% rename from src/styles/themes/starforged.less rename to src/styles/themes/starforged.scss index 59e40e66a..4b3e5eb1f 100644 --- a/src/styles/themes/starforged.less +++ b/src/styles/themes/starforged.scss @@ -1,18 +1,18 @@ // Dark theme for Starforged, with aggressive restyling of FVTT's stock UX elements. @import './starforged-font.css'; // HACK to avoid import error -@import (reference) '../mixins.less'; -@import (reference) './mixins/colors.less'; -@import (reference) './mixins/palettize.less'; -@import (reference) './mixins/fvtt-var-overrides.less'; +@import (reference) '../mixins.scss'; +@import (reference) './mixins/colors.scss'; +@import (reference) './mixins/palettize.scss'; +@import (reference) './mixins/fvtt-var-overrides.scss'; .system-foundry-ironsworn.theme-starforged { // set CSS variables - .palettize(ironsworn-color,hsl(180, 70%, 60%), hsl(180,20%,0%), hsl(185,100%,50%), hsl(210,100%,50%)); - .ironswornDarkThemeMixin(ironsworn-color); - .softBorderMixin(ironsworn-color); - .interactiveTintMixin(ironsworn-color-clickable-block,ironsworn-color); + @include palettize(ironsworn-color,hsl(180, 70%, 60%), hsl(180,20%,0%), hsl(185,100%,50%), hsl(210,100%,50%)); + @include ironswornDarkThemeMixin(ironsworn-color); + @include softBorderMixin(ironsworn-color); + @include interactiveTintMixin(ironsworn-color-clickable-block,ironsworn-color); --font-primary: 'Carrois Gothic SC', sans-serif; --ironsworn-color-text-stroke: var(--ironsworn-color-bg); @@ -28,18 +28,18 @@ --path-hexagon: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%); // now that the vars are set, set the overrides to FVTT's vars that are dependent on them. - .fvttVarOverridesMixin(); + @include fvttVarOverridesMixin(); // restyle FVTT's UI - @import '../fvtt/app.less'; - @import '../fvtt/dialog.less'; - @import '../fvtt/clickable.less'; - @import '../fvtt/settings.less'; - @import '../fvtt/sidebar.less'; - @import '../fvtt/tooltip.less'; - @import '../inputs.less'; - @import (reference) './mixins/decorations.less'; - - .starforgedDecorationMixin(); + @import '../fvtt/app.scss'; + @import '../fvtt/dialog.scss'; + @import '../fvtt/clickable.scss'; + @import '../fvtt/settings.scss'; + @import '../fvtt/sidebar.scss'; + @import '../fvtt/tooltip.scss'; + @import '../inputs.scss'; + @import (reference) './mixins/decorations.scss'; + + @include starforgedDecorationMixin(); .chat-message { background: var(--ironsworn-color-bg); diff --git a/src/styles/transitions.less b/src/styles/transitions.less deleted file mode 100644 index 5b2ac250b..000000000 --- a/src/styles/transitions.less +++ /dev/null @@ -1,13 +0,0 @@ -@animationDuration: var(--ironsworn-transition-duration, 0.5s); - -// Main mixin -@import 'vue2-animate/src/less/make-transitions.less'; - -// vue2-animate animations -// @import 'vue2-animate/src/less/animations/bouncing/all.less'; -@import 'vue2-animate/src/less/animations/fading/all.less'; -// @import 'vue2-animate/src/less/animations/rotating/all.less'; -@import 'vue2-animate/src/less/animations/sliding/all.less'; -// @import 'vue2-animate/src/less/animations/zooming/all.less'; -// @import 'vue2-animate/src/less/animations/flipping/all.less'; -// @import 'vue2-animate/src/less/animations/lightspeeding/all.less'; diff --git a/src/styles/transitions.scss b/src/styles/transitions.scss new file mode 100644 index 000000000..eae3169bc --- /dev/null +++ b/src/styles/transitions.scss @@ -0,0 +1,13 @@ +$animationDuration: var(--ironsworn-transition-duration, 0.5s); + +// Main mixin +@import 'vue2-animate/src/scss/make-transitions.scss'; + +// vue2-animate animations +// @import 'vue2-animate/src/scss/animations/bouncing/all.scss'; +@import 'vue2-animate/src/scss/animations/fading/all.scss'; +// @import 'vue2-animate/src/scss/animations/rotating/all.scss'; +@import 'vue2-animate/src/scss/animations/sliding/all.scss'; +// @import 'vue2-animate/src/scss/animations/zooming/all.scss'; +// @import 'vue2-animate/src/scss/animations/flipping/all.scss'; +// @import 'vue2-animate/src/scss/animations/lightspeeding/all.scss'; diff --git a/src/styles/utils.less b/src/styles/utils.scss similarity index 95% rename from src/styles/utils.less rename to src/styles/utils.scss index 31f317732..c7cf7e11c 100644 --- a/src/styles/utils.less +++ b/src/styles/utils.scss @@ -1,16 +1,16 @@ // for classes that apply a set of commonly used styles, but don't describe an element with a specific purpose -@import 'mixins.less'; +@import 'mixins.scss'; .grid { display: grid; } .margin-left { - .marginMixin(right); + @include marginMixin(right); } .highlighted { - .staticHighlightMixin(30); + @include staticHighlightMixin(30); } .scrollable { @@ -20,7 +20,7 @@ } .margin-right { - .marginMixin(left); + @include marginMixin(left); } .vertical-text { writing-mode: vertical-lr; From 103db270c6f6eed74716418a4e2f4072bbde2478 Mon Sep 17 00:00:00 2001 From: rsek Date: Mon, 19 Dec 2022 15:35:48 -0800 Subject: [PATCH 002/195] migrate components w/o variables --- src/module/vue/asset-compendium-browser.vue | 2 +- src/module/vue/asset-sheet.vue | 4 ++-- src/module/vue/bondset-sheet.vue | 2 +- src/module/vue/challenge-resolution-dialog.vue | 2 +- src/module/vue/character-sheet.vue | 4 ++-- src/module/vue/components/active-completed-progresses.vue | 2 +- src/module/vue/components/asset/asset-browser-card.vue | 2 +- src/module/vue/components/asset/asset-conditions.vue | 2 +- src/module/vue/components/asset/asset-overview.vue | 4 ++-- src/module/vue/components/asset/asset.vue | 2 +- src/module/vue/components/attr-box.vue | 2 +- src/module/vue/components/bonds.vue | 2 +- src/module/vue/components/buttons/btn-oracle.vue | 2 +- src/module/vue/components/buttons/btn-sendmovetochat.vue | 2 +- src/module/vue/components/character-header.vue | 2 +- .../vue/components/character-sheet-tabs/ironsworn-main.vue | 4 ++-- src/module/vue/components/character-sheet-tabs/sf-assets.vue | 2 +- .../vue/components/character-sheet-tabs/sf-connections.vue | 2 +- .../vue/components/character-sheet-tabs/sf-legacies.vue | 2 +- src/module/vue/components/clock.vue | 2 +- src/module/vue/components/collapsible/collapsible.vue | 2 +- src/module/vue/components/completed-progress-list.vue | 2 +- src/module/vue/components/conditions/condition-checkbox.vue | 2 +- src/module/vue/components/conditions/conditions.vue | 2 +- .../vue/components/conditions/custom-condition-checkbox.vue | 2 +- src/module/vue/components/document-img.vue | 2 +- src/module/vue/components/foe-sheet.vue | 2 +- src/module/vue/components/icon/font-icon-stack.vue | 2 +- src/module/vue/components/oracle-tree-node.vue | 4 ++-- src/module/vue/components/order-buttons.vue | 2 +- src/module/vue/components/progress-controls.vue | 2 +- src/module/vue/components/progress-list.vue | 2 +- src/module/vue/components/rules-text/oracle-table.vue | 2 +- src/module/vue/components/rules-text/rules-text-move.vue | 2 +- src/module/vue/components/rules-text/rules-text.vue | 2 +- src/module/vue/components/sf-characterheader.vue | 2 +- src/module/vue/components/sf-impacts.vue | 2 +- src/module/vue/components/sf-movesheetoracles.vue | 2 +- src/module/vue/components/sfmove-tab.vue | 2 +- src/module/vue/components/site/site-denizenbox.vue | 2 +- src/module/vue/components/site/site-moves.vue | 2 +- src/module/vue/components/tabs/tab-list.vue | 2 +- src/module/vue/components/tabs/tab-panel.vue | 4 ++-- src/module/vue/components/tabs/tab-panels.vue | 2 +- src/module/vue/components/tabs/tab.vue | 2 +- src/module/vue/progress-sheet.vue | 2 +- src/module/vue/sf-charactermovesheet.vue | 2 +- src/module/vue/sf-charactersheet.vue | 4 ++-- src/module/vue/sf-locationsheet.vue | 4 ++-- src/module/vue/sfmove-sheet.vue | 2 +- src/module/vue/shared-sheet.vue | 2 +- src/module/vue/sheet-basic.vue | 2 +- src/module/vue/sheet-header.vue | 2 +- src/module/vue/site-sheet.vue | 4 ++-- src/module/vue/starship-sheet.vue | 2 +- 55 files changed, 64 insertions(+), 64 deletions(-) diff --git a/src/module/vue/asset-compendium-browser.vue b/src/module/vue/asset-compendium-browser.vue index c30eb75c5..ff547a23f 100644 --- a/src/module/vue/asset-compendium-browser.vue +++ b/src/module/vue/asset-compendium-browser.vue @@ -43,7 +43,7 @@ - - - + - - - diff --git a/src/styles/TODO.md b/src/styles/TODO.md deleted file mode 100644 index 7bab90d3c..000000000 --- a/src/styles/TODO.md +++ /dev/null @@ -1,6 +0,0 @@ -# Wed Sep 21 - -- group all progress (etc) constants together in one file -- offer a coupel variant styles of progress items - - compact freestanding (p.390) - - compact segmented (progress items on playkit) diff --git a/src/styles/assets.scss b/src/styles/assets.scss index c38b11148..2e79de0d5 100644 --- a/src/styles/assets.scss +++ b/src/styles/assets.scss @@ -1,6 +1,9 @@ @use 'themes/mixins/decorations'; +@use 'sass:math'; @use 'mixins'; +$hexagon-aspect-ratio: math.div(math.sqrt(3), 2); + // Here we encode the bullet styles as classes, and pull them into the // ul>li bullet class from there. These will also be available for block // elements @@ -9,8 +12,8 @@ transition: var(--std-animation); background-position: center; background-repeat: no-repeat; - mask-repeat: no-repeat; mask-position: center; + mask-repeat: no-repeat; } @mixin asset-ability-bullet-marked { diff --git a/src/styles/attr-box.scss b/src/styles/attr-box.scss index 9e35799f1..620f9c594 100644 --- a/src/styles/attr-box.scss +++ b/src/styles/attr-box.scss @@ -1,5 +1,6 @@ // styles attr-box (aka stat box) elements. -// these could probably just live in their own component, but the compact sheet would need to be migrated to Vue, first. +// FIXME these could probably just live in their own component, but the compact sheet would need to be migrated to Vue, first. + @use 'mixins'; .stats { diff --git a/src/styles/chat-message.scss b/src/styles/chat-message.scss index 9de57e7a9..423a0d3d7 100644 --- a/src/styles/chat-message.scss +++ b/src/styles/chat-message.scss @@ -162,8 +162,8 @@ } .icon { - display: flex; aspect-ratio: 1; + display: flex; margin: 0; } diff --git a/src/styles/clickable.scss b/src/styles/clickable.scss index a793d21ec..bbf906578 100644 --- a/src/styles/clickable.scss +++ b/src/styles/clickable.scss @@ -2,7 +2,7 @@ .entity-link, .content-link, -// the following selector is a proxy for compendium links which don't have a class attached to them. +// FIXME the following selector is a proxy for compendium links which don't have a class attached to them. // ideally, all of them would share an identifying data attribute that could be selected for -- something like 'data-action', maybe? a[data-pack][data-uuid] { @include mixins.clickable-block; diff --git a/src/styles/dice.scss b/src/styles/dice.scss index c949a86f2..a3077fe06 100644 --- a/src/styles/dice.scss +++ b/src/styles/dice.scss @@ -1,5 +1,12 @@ @use 'mixins'; +@mixin dice-glow($color, $diceDropShadowSize: 0 0 2px) { + background-blend-mode: screen; + color: $color !important; + filter: drop-shadow($diceDropShadowSize $color) + drop-shadow($diceDropShadowSize $color); +} + .dice-roll { .dice-formula, .dice-total { @@ -73,22 +80,12 @@ flex-direction: row; flex-grow: 0; gap: calc($graphic-gap / 2); - - .challenge-die { - } } } } } .ironsworn-roll { - @mixin dice-glow($color, $diceDropShadowSize: 0 0 2px) { - background-blend-mode: screen; - color: $color !important; - filter: drop-shadow($diceDropShadowSize $color) - drop-shadow($diceDropShadowSize $color); - } - h3, .hit-type { font-weight: bold; @@ -113,8 +110,8 @@ &.d6::before { background-color: var(--dice-background-color); - mask-image: url('/assets/icons/d6-blank.svg'); content: ''; + mask-image: url('/assets/icons/d6-blank.svg'); } &.d8 { @@ -123,8 +120,8 @@ &.d10::before { background-color: var(--dice-background-color); - mask-image: url('/assets/icons/d10-blank.svg'); content: ''; + mask-image: url('/assets/icons/d10-blank.svg'); } &.d12 { diff --git a/src/styles/editor.scss b/src/styles/editor.scss index d741c2f2d..3d358daab 100644 --- a/src/styles/editor.scss +++ b/src/styles/editor.scss @@ -1,3 +1,4 @@ +/* stylelint-disable no-duplicate-selectors */ @use 'mixins'; // styles for TinyMCE and ProseMirror editors @@ -182,10 +183,8 @@ $menu-box-shadow: 0 0 2px 0 rgba($color-black, 20%), } // LIST -// // Collection // A list of items that can be arranged as vertical list, horizontal toolbar or a grid. -// $collection-item-separator-color: var(--ironsworn-color-border-muted); $collection-item-label-text-color: var(--ironsworn-color-fg); @@ -231,10 +230,7 @@ $collection-group-label-text-color: var(--ironsworn-color-fg-muted); .tox { .tox-collection--list .tox-collection__group { - border-top-width: var(--ironsworn-border-width-md); - border-right-width: 0; - border-bottom-width: 0; - border-left-width: 0; + border-width: var(--ironsworn-border-width-md) 0 0; border-style: solid; border-color: $collection-item-separator-color; diff --git a/src/styles/fvtt/app.scss b/src/styles/fvtt/app.scss index ac6cc0e06..9d76acbe6 100644 --- a/src/styles/fvtt/app.scss +++ b/src/styles/fvtt/app.scss @@ -1,5 +1,4 @@ // styles for FVTT application windows. -@use '../mixins'; .app { border-color: var(--ironsworn-color-midtone-80); @@ -28,21 +27,19 @@ nav.tabs { .category-tab { &:hover { - background: - linear-gradient( - to right, - transparent, - var(--ironsworn-color-cool-20) - ); + background: linear-gradient( + to right, + transparent, + var(--ironsworn-color-cool-20) + ); } &.active { - background: - linear-gradient( - to right, - transparent, - var(--ironsworn-color-warm-30) - ); + background: linear-gradient( + to right, + transparent, + var(--ironsworn-color-warm-30) + ); } } } @@ -54,7 +51,6 @@ } .window-content { - // so the background doesn't spill over the parent element's border border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; diff --git a/src/styles/fvtt/clickable.scss b/src/styles/fvtt/clickable.scss index ab1d5bc84..975a25b49 100644 --- a/src/styles/fvtt/clickable.scss +++ b/src/styles/fvtt/clickable.scss @@ -1,4 +1,4 @@ -@use '../mixins'; +@use '@styles/mixins'; .app:not(.ironsworn) button { @include mixins.clickable-block; diff --git a/src/styles/fvtt/dialog.scss b/src/styles/fvtt/dialog.scss index 65acb960b..e2438f860 100644 --- a/src/styles/fvtt/dialog.scss +++ b/src/styles/fvtt/dialog.scss @@ -1,6 +1,6 @@ // styles for any FVTT dialog. You can import them globally, or scoped to e.g. the .ironsworn class. -@use '../mixins'; -@use '../utils'; +@use 'sass:meta'; +@use '@styles/mixins'; .dialog { .window-content { @@ -43,9 +43,9 @@ height: max-content; .button-text { - @extend %nogrow; @include mixins.initial-caps; + flex-grow: 0; width: auto; height: max-content; } diff --git a/src/styles/fvtt/settings.scss b/src/styles/fvtt/settings.scss index dba0febd0..ca27af82c 100644 --- a/src/styles/fvtt/settings.scss +++ b/src/styles/fvtt/settings.scss @@ -1,3 +1,7 @@ -#module-management .package-list .package-title { - color: var(--ironsworn-color-fg); +#module-management { + .package-list { + .package-title { + color: var(--ironsworn-color-fg); + } + } } diff --git a/src/styles/fvtt/sidebar.scss b/src/styles/fvtt/sidebar.scss index e2d27e9a7..6ce9f4f2a 100644 --- a/src/styles/fvtt/sidebar.scss +++ b/src/styles/fvtt/sidebar.scss @@ -1,6 +1,6 @@ // styles for FVTT's sidebar -@use '../mixins'; +@use '@styles/mixins'; #sidebar { li.folder > .folder-header { diff --git a/src/styles/fvtt/tooltip.scss b/src/styles/fvtt/tooltip.scss index f6f5f0f1f..e5996bbe2 100644 --- a/src/styles/fvtt/tooltip.scss +++ b/src/styles/fvtt/tooltip.scss @@ -4,6 +4,7 @@ var(--color-border-dark-secondary); border-radius: var(--ironsworn-border-radius-md); box-shadow: 0 0 4px #000; + // TODO: currently this isn't really changing much, but i'd like to revisit it for the dark theme. background: var(--ironsworn-color-dark-90); line-height: var(--font-size-16); diff --git a/src/styles/icons.scss b/src/styles/icons.scss index c41cc7e5f..f2e154d3f 100644 --- a/src/styles/icons.scss +++ b/src/styles/icons.scss @@ -103,6 +103,7 @@ .fat { &:not(i) { &::before { + /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ font-family: 'Font Awesome 6 Pro'; } } @@ -119,8 +120,8 @@ width: 1em; height: 1em; content: ''; - mask-repeat: no-repeat; mask-position: center; + mask-repeat: no-repeat; mask-size: contain; .vertical-text & { @@ -158,10 +159,10 @@ width: 100%; height: 100%; content: ''; - mask-repeat: no-repeat; + mask-origin: content-box; // this + above make this sensitive to padding on the :before pseudo-element. mask-position: center; + mask-repeat: no-repeat; mask-size: contain; - mask-origin: content-box; // this + above make this sensitive to padding on the :before pseudo-element. } } diff --git a/src/styles/inputs.scss b/src/styles/inputs.scss index 845afe0c3..bee7e5290 100644 --- a/src/styles/inputs.scss +++ b/src/styles/inputs.scss @@ -1,5 +1,6 @@ // styles for form input elements. for ProseMirror and TinyMCE styles, see editors.scss. // the main style sheet scopes these to .ironsworn, so import them again globally if you want to retheme the form inputs on the UX elements that belong to FVTT. + @use 'mixins'; *::placeholder { diff --git a/src/styles/list.scss b/src/styles/list.scss index e6ec3633d..2f8008ad3 100644 --- a/src/styles/list.scss +++ b/src/styles/list.scss @@ -32,6 +32,7 @@ var(--ironsworn-border-width-md) solid var(--ironsworn-color-border); padding: var(--ironsworn-spacer-sm) 0; + // FIXME: what's this for? height: 30px; line-height: 24px; diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss index 5752eac68..54fd8a8d1 100644 --- a/src/styles/mixins.scss +++ b/src/styles/mixins.scss @@ -11,12 +11,18 @@ -0.653644px -0.756803px 0 $color, 0.283662px -0.958924px 0 $color, 0.96017px -0.279416px 0 $color; } + @mixin initial-caps() { &::first-letter { text-transform: uppercase; } } +@mixin thematic-color($color) { + --ironsworn-color-text-stroke: var(--ironsworn-color-dark); + --ironsworn-color-thematic: $color; +} + // special effects // used to mark focused fields @@ -230,8 +236,8 @@ color: var(--ironsworn-color-clickable-block-fg); &.vertical-text { - writing-mode: initial !important; // prevents this fix from breaking the button layout in FF flex-direction: column; + writing-mode: initial !important; // prevents this fix from breaking the button layout in FF & > * { writing-mode: vertical-lr !important; @@ -279,8 +285,8 @@ } &.vertical-text { - writing-mode: initial !important; // prevents this fix from breaking the button layout in FF flex-direction: column; + writing-mode: initial !important; // prevents this fix from breaking the button layout in FF .button-text { display: inherit; diff --git a/src/styles/scrollbar.scss b/src/styles/scrollbar.scss index 7a3f08dc0..9d0efe95a 100644 --- a/src/styles/scrollbar.scss +++ b/src/styles/scrollbar.scss @@ -1,5 +1,3 @@ -@use 'mixins'; - $scrollbar-thumb-bg-color: var(--ironsworn-color-fg-50); $scrollbar-thumb-border-color: var(--ironsworn-color-warm-50); $scrollbar-track-color: var(--ironsworn-color-fg-50); @@ -23,7 +21,7 @@ $scrollbar-width: 6px; } :root { - scrollbar-width: thin; scrollbar-color: $scrollbar-thumb-bg-color $scrollbar-track-color; scrollbar-gutter: auto; + scrollbar-width: thin; } diff --git a/src/styles/styles.scss b/src/styles/styles.scss index 453a57b39..55e062c99 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -1,5 +1,4 @@ @use 'sass:meta'; -@use 'mixins'; :root { // VARIABLES: DIMENSIONS FOR SPACERS, BORDERS, ETC @@ -112,18 +111,22 @@ } .ironsworn { + // stuff scoped to .ironsworn app windows only + // include these in a theme it to FVTT's own dialogs and inputs as well. @include meta.load-css('fvtt/dialog'); @include meta.load-css('dialog'); @include meta.load-css('editor'); @include meta.load-css('scrollbar'); @include meta.load-css('tables'); - // import these to the theme apply it to FVTT's own dialogs and inputs as well. + // THEMES + // TODO: this could probably be set up to extract everything from the theme directory automatically. + @include meta.load-css('themes/starforged'); + @include meta.load-css('themes/ironsworn'); - // stuff scoped to .ironsworn app windows only - .window-title { - @include mixins.initial-caps; - } + // .window-title { + // @include initial-caps; + // } .window-content { background: var(--ironsworn-color-bg); diff --git a/src/styles/themes/mixins/decorations.scss b/src/styles/themes/mixins/decorations.scss index 28a305cb5..97cdda1fa 100644 --- a/src/styles/themes/mixins/decorations.scss +++ b/src/styles/themes/mixins/decorations.scss @@ -36,8 +36,8 @@ height: $hex-deco-collapsed-height; content: ''; pointer-events: none; - mask-image: url('/assets/misc/hex-deco.svg'); aspect-ratio: $hex-deco-aspect-ratio; + mask-image: url('/assets/misc/hex-deco.svg'); mask-repeat: no-repeat; } diff --git a/src/styles/themes/starforged.scss b/src/styles/themes/starforged.scss index 8b8aa19c6..0b7ecaff8 100644 --- a/src/styles/themes/starforged.scss +++ b/src/styles/themes/starforged.scss @@ -1,7 +1,6 @@ // Dark theme for Starforged, with aggressive restyling of FVTT's stock UX elements. @use 'starforged-font.css'; // HACK to avoid import error -@use '../mixins'; @use 'mixins/colors'; @use 'mixins/palette'; @use 'mixins/fvtt-var-overrides'; diff --git a/src/styles/utils.scss b/src/styles/utils.scss index 40a608f0c..9c3cd940c 100644 --- a/src/styles/utils.scss +++ b/src/styles/utils.scss @@ -1,32 +1,19 @@ // for classes that apply a set of commonly used styles, but don't describe an element with a specific purpose -@use 'mixins'; .grid { display: grid; } -.margin-left { - @include mixins.margin(right); -} - -.highlighted { - @include mixins.static-highlight(30); -} - .scrollable { // property intentionally duplicated to provide fallback overflow-y: scroll; overflow-y: overlay; } -.margin-right { - @include mixins.margin(left); -} - .vertical-text { - writing-mode: vertical-lr; border: none; width: 1.5rem; + writing-mode: vertical-lr; i { display: inline-block; diff --git a/stylelint.config.js b/stylelint.config.js index 50d019adb..c2a6dd43e 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -18,10 +18,11 @@ const CONFIG = { ], overrides: [ { - files: ['**/*.vue', '**/*.scss'], + files: ['./src/modules/vue/**/*.vue', './src/styles/**/*.scss'], rules: { 'max-line-length': [120, { ignore: ['comments'] }], + // *theoretically* this would be good to use, but i don't have the patience to do it right now 'no-descending-specificity': null, 'string-quotes': ['single'], 'selector-class-pattern': [ diff --git a/vite.config.ts b/vite.config.ts index f21a607a2..f3de080b2 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -4,17 +4,22 @@ import autoprefixer from 'autoprefixer' import Inspector from 'vite-plugin-vue-inspector' import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' import path from 'path' -import sassSyntax from 'postcss-scss' -import sassPlugin from '@csstools/postcss-sass' import tsconfigPaths from 'vite-tsconfig-paths' -import sass from 'sass' -import chromatic from './src/module/plugin/chromatic-sass' +import sassChroma from './src/module/plugin/chromatic-sass' +import chroma from 'chroma-js' const PORT = 30000 -const sassOptions: sass.Options<'sync'> = { - functions: chromatic, - loadPaths: [path.resolve(process.cwd(), `src/styles`)], +const sassOptions = { + functions: sassChroma, + modules: { chroma }, + additionalData: ` + @use "${path.resolve( + __dirname, + 'src/styles/mixins.scss' + )}" as mixins; + @use "@styles/utils" as utils; + `, } const config: UserConfig = { @@ -32,6 +37,8 @@ const config: UserConfig = { ], resolve: { alias: { + '@styles': path.resolve(__dirname, 'src/styles'), + '@components': path.resolve(__dirname, 'src/module/vue/components'), vue: 'vue/dist/vue.esm-bundler.js', }, }, @@ -50,11 +57,15 @@ const config: UserConfig = { }, }, }, + css: { + preprocessorOptions: { + scss: sassOptions, + }, postcss: { - syntax: sassSyntax, - plugins: [sassPlugin(sassOptions), autoprefixer()], + plugins: [autoprefixer()], }, + devSourcemap: true, }, build: { outDir: 'dist', From 1cdf3a1adf6edf00499d6924283a128bc95dbe81 Mon Sep 17 00:00:00 2001 From: rsek Date: Wed, 21 Dec 2022 07:36:11 -0800 Subject: [PATCH 020/195] mostly working palettize. reorg color mixins --- package-lock.json | 417 ++++++++-------------- package.json | 3 +- src/module/plugin/chromatic-sass.ts | 332 ++++++++++++----- src/styles/fvtt/app.scss | 3 - src/styles/styles.scss | 10 +- src/styles/themes/ironsworn.scss | 33 +- src/styles/themes/mixins/colors.scss | 89 ++++- src/styles/themes/mixins/decorations.scss | 4 +- src/styles/themes/mixins/palette.scss | 125 ------- src/styles/themes/starforged.scss | 51 +-- vite.config.ts | 8 +- 11 files changed, 516 insertions(+), 559 deletions(-) delete mode 100644 src/styles/themes/mixins/palette.scss diff --git a/package-lock.json b/package-lock.json index e23b604c4..39e50c027 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,12 +33,11 @@ "patch-package": "^6.4.7", "postcss-html": "^1.5.0", "prettier": "^2.7.1", - "sass": "npm:sass-embedded@^1.57.1", + "sass": "^1.57.1", "sha.js": "^2.4.11", "stylelint": "^14.16.0", "stylelint-config-concentric-order": "^5.1.0", "stylelint-config-prettier-scss": "^0.0.1", - "stylelint-config-recommended-scss": "^8.0.0", "stylelint-config-recommended-vue": "^1.4.0", "stylelint-config-standard-scss": "^6.1.0", "typescript": "^4.7.3", @@ -3579,6 +3578,18 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, "node_modules/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -3753,6 +3764,14 @@ "node": "*" } }, + "node_modules/binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "engines": { + "node": ">=8" + } + }, "node_modules/bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -3833,11 +3852,6 @@ "ieee754": "^1.2.1" } }, - "node_modules/buffer-builder": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/buffer-builder/-/buffer-builder-0.2.0.tgz", - "integrity": "sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==" - }, "node_modules/buffer-from": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz", @@ -3953,6 +3967,43 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/chokidar": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", + "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "funding": [ + { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + ], + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/chokidar/node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/chroma-js": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz", @@ -5309,11 +5360,6 @@ "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz", "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==" }, - "node_modules/google-protobuf": { - "version": "3.21.2", - "resolved": "https://registry.npmjs.org/google-protobuf/-/google-protobuf-3.21.2.tgz", - "integrity": "sha512-3MSOYFO5U9mPGikIYCzK0SaThypfGgS6bHqrUGXG3DPHCrb+txNqeEcns1W0lkGfk0rCyNXm7xB9rMxnCiZOoA==" - }, "node_modules/graceful-fs": { "version": "4.2.10", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz", @@ -5709,6 +5755,17 @@ "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==" }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/is-buffer": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", @@ -7684,6 +7741,17 @@ "node": ">= 6" } }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, "node_modules/redent": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", @@ -7881,14 +7949,6 @@ "queue-microtask": "^1.2.2" } }, - "node_modules/rxjs": { - "version": "7.8.0", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.0.tgz", - "integrity": "sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==", - "dependencies": { - "tslib": "^2.1.0" - } - }, "node_modules/safe-buffer": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", @@ -7924,163 +7984,19 @@ "peer": true }, "node_modules/sass": { - "name": "sass-embedded", "version": "1.57.1", - "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.57.1.tgz", - "integrity": "sha512-O0s796x76bRSJIdmJ4lrK+zJLtF3XeP+0tbJzR4NAPSDnWqHLk2boUYSdfx4DnF4x9rGmcVlMWFE8UvnLMNCmw==", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz", + "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==", "dependencies": { - "buffer-builder": "^0.2.0", - "google-protobuf": "^3.11.4", + "chokidar": ">=3.0.0 <4.0.0", "immutable": "^4.0.0", - "rxjs": "^7.4.0", - "supports-color": "^8.1.1" - }, - "engines": { - "node": ">=14.0.0" + "source-map-js": ">=0.6.2 <2.0.0" }, - "optionalDependencies": { - "sass-embedded-darwin-arm64": "1.57.1", - "sass-embedded-darwin-x64": "1.57.1", - "sass-embedded-linux-arm": "1.57.1", - "sass-embedded-linux-arm64": "1.57.1", - "sass-embedded-linux-ia32": "1.57.1", - "sass-embedded-linux-x64": "1.57.1", - "sass-embedded-win32-ia32": "1.57.1", - "sass-embedded-win32-x64": "1.57.1" - } - }, - "node_modules/sass-embedded-darwin-arm64": { - "version": "1.57.1", - "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.57.1.tgz", - "integrity": "sha512-YSfrLZkM2HdXETQdSznv2DN2GdkmBNWLAlHfDWe0toSEIB2C2YGuoqHYZtl6PBYqu8k8FH4TDyct8VzoIa+rMw==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=14.0.0" - } - }, - "node_modules/sass-embedded-darwin-x64": { - "version": "1.57.1", - "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.57.1.tgz", - "integrity": "sha512-xq2Au8CRLHQ+MqH2p8gQn9rYGtfQ8voCWMRz7klYmmh5kXHFjefG3opPPB8mJeSc3SIqE35SQxQEIhUbsxozpg==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=14.0.0" - } - }, - "node_modules/sass-embedded-linux-arm": { - "version": "1.57.1", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.57.1.tgz", - "integrity": "sha512-s+roBIgiQSg8124JmYmiSw4THWRvkF2BOclBZCb+OFLa8ZTak2WZdGs0PhqkMmZypxQ7cewh9ts+sOWN24yIrw==", - "cpu": [ - "arm" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=14.0.0" - } - }, - "node_modules/sass-embedded-linux-arm64": { - "version": "1.57.1", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.57.1.tgz", - "integrity": "sha512-R0GqVqf0xEhQ5nDbj7vqmKw+/1kqiURNBl0pD4uv4inBed2YKg+7agn7Y5XE5GUWbgOz7ubjL2kt4Glr7K7xeA==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=14.0.0" - } - }, - "node_modules/sass-embedded-linux-ia32": { - "version": "1.57.1", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-ia32/-/sass-embedded-linux-ia32-1.57.1.tgz", - "integrity": "sha512-gKqMpfcjrW4S1m+cuRn88oUkr/HMv48CqyCHnfGCsrkTpIft33a1ZKW2jWm09rwmR0g/G6yGstoQO0iHWJWxuQ==", - "cpu": [ - "ia32" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=14.0.0" - } - }, - "node_modules/sass-embedded-linux-x64": { - "version": "1.57.1", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.57.1.tgz", - "integrity": "sha512-AI6CrcuLWP22RXhVrZUN2JfdQ7YdFR30dA4twYwp/Q4hUfj85dJrVD5ORi8G04haMWPOQiFV6pBcMgzpiY2Bog==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=14.0.0" - } - }, - "node_modules/sass-embedded-win32-ia32": { - "version": "1.57.1", - "resolved": "https://registry.npmjs.org/sass-embedded-win32-ia32/-/sass-embedded-win32-ia32-1.57.1.tgz", - "integrity": "sha512-s7EhJLG9AnJNBga3I+W0rk6y/1n/i0XD34rvqR3yJgBhNKkI5rVCxFN7FAcGR50vQQbCO1MrUCmuVvld+2qvyQ==", - "cpu": [ - "ia32" - ], - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=14.0.0" - } - }, - "node_modules/sass-embedded-win32-x64": { - "version": "1.57.1", - "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.57.1.tgz", - "integrity": "sha512-b/Kgz7ADPTlPITk8e47Zf3eiuXlTGhi/eWsAoesUmkjR7jayvFNLHPhThgiRAxkzT6UlWI3Dzr+E3OBqUjegEg==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=14.0.0" - } - }, - "node_modules/sass/node_modules/supports-color": { - "version": "8.1.1", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", - "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", - "dependencies": { - "has-flag": "^4.0.0" + "bin": { + "sass": "sass.js" }, "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/supports-color?sponsor=1" + "node": ">=12.0.0" } }, "node_modules/sax": { @@ -9386,7 +9302,9 @@ "node_modules/tslib": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", - "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==", + "optional": true, + "peer": true }, "node_modules/tsutils": { "version": "3.21.0", @@ -12882,6 +12800,15 @@ "color-convert": "^2.0.1" } }, + "anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "requires": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + } + }, "argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -12986,6 +12913,11 @@ "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==" }, + "binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==" + }, "bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -13033,11 +12965,6 @@ "ieee754": "^1.2.1" } }, - "buffer-builder": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/buffer-builder/-/buffer-builder-0.2.0.tgz", - "integrity": "sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==" - }, "buffer-from": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz", @@ -13117,6 +13044,31 @@ "supports-color": "^7.1.0" } }, + "chokidar": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", + "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "requires": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "fsevents": "~2.3.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "dependencies": { + "glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "requires": { + "is-glob": "^4.0.1" + } + } + } + }, "chroma-js": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz", @@ -14136,11 +14088,6 @@ "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz", "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==" }, - "google-protobuf": { - "version": "3.21.2", - "resolved": "https://registry.npmjs.org/google-protobuf/-/google-protobuf-3.21.2.tgz", - "integrity": "sha512-3MSOYFO5U9mPGikIYCzK0SaThypfGgS6bHqrUGXG3DPHCrb+txNqeEcns1W0lkGfk0rCyNXm7xB9rMxnCiZOoA==" - }, "graceful-fs": { "version": "4.2.10", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz", @@ -14437,6 +14384,14 @@ "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==" }, + "is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "requires": { + "binary-extensions": "^2.0.0" + } + }, "is-buffer": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", @@ -15896,6 +15851,14 @@ "util-deprecate": "^1.0.1" } }, + "readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "requires": { + "picomatch": "^2.2.1" + } + }, "redent": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", @@ -16021,14 +15984,6 @@ "queue-microtask": "^1.2.2" } }, - "rxjs": { - "version": "7.8.0", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.0.tgz", - "integrity": "sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==", - "requires": { - "tslib": "^2.1.0" - } - }, "safe-buffer": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", @@ -16050,83 +16005,15 @@ "peer": true }, "sass": { - "version": "npm:sass-embedded@1.57.1", - "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.57.1.tgz", - "integrity": "sha512-O0s796x76bRSJIdmJ4lrK+zJLtF3XeP+0tbJzR4NAPSDnWqHLk2boUYSdfx4DnF4x9rGmcVlMWFE8UvnLMNCmw==", + "version": "1.57.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz", + "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==", "requires": { - "buffer-builder": "^0.2.0", - "google-protobuf": "^3.11.4", + "chokidar": ">=3.0.0 <4.0.0", "immutable": "^4.0.0", - "rxjs": "^7.4.0", - "sass-embedded-darwin-arm64": "1.57.1", - "sass-embedded-darwin-x64": "1.57.1", - "sass-embedded-linux-arm": "1.57.1", - "sass-embedded-linux-arm64": "1.57.1", - "sass-embedded-linux-ia32": "1.57.1", - "sass-embedded-linux-x64": "1.57.1", - "sass-embedded-win32-ia32": "1.57.1", - "sass-embedded-win32-x64": "1.57.1", - "supports-color": "^8.1.1" - }, - "dependencies": { - "supports-color": { - "version": "8.1.1", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", - "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", - "requires": { - "has-flag": "^4.0.0" - } - } + "source-map-js": ">=0.6.2 <2.0.0" } }, - "sass-embedded-darwin-arm64": { - "version": "1.57.1", - "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.57.1.tgz", - "integrity": "sha512-YSfrLZkM2HdXETQdSznv2DN2GdkmBNWLAlHfDWe0toSEIB2C2YGuoqHYZtl6PBYqu8k8FH4TDyct8VzoIa+rMw==", - "optional": true - }, - "sass-embedded-darwin-x64": { - "version": "1.57.1", - "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.57.1.tgz", - "integrity": "sha512-xq2Au8CRLHQ+MqH2p8gQn9rYGtfQ8voCWMRz7klYmmh5kXHFjefG3opPPB8mJeSc3SIqE35SQxQEIhUbsxozpg==", - "optional": true - }, - "sass-embedded-linux-arm": { - "version": "1.57.1", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.57.1.tgz", - "integrity": "sha512-s+roBIgiQSg8124JmYmiSw4THWRvkF2BOclBZCb+OFLa8ZTak2WZdGs0PhqkMmZypxQ7cewh9ts+sOWN24yIrw==", - "optional": true - }, - "sass-embedded-linux-arm64": { - "version": "1.57.1", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.57.1.tgz", - "integrity": "sha512-R0GqVqf0xEhQ5nDbj7vqmKw+/1kqiURNBl0pD4uv4inBed2YKg+7agn7Y5XE5GUWbgOz7ubjL2kt4Glr7K7xeA==", - "optional": true - }, - "sass-embedded-linux-ia32": { - "version": "1.57.1", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-ia32/-/sass-embedded-linux-ia32-1.57.1.tgz", - "integrity": "sha512-gKqMpfcjrW4S1m+cuRn88oUkr/HMv48CqyCHnfGCsrkTpIft33a1ZKW2jWm09rwmR0g/G6yGstoQO0iHWJWxuQ==", - "optional": true - }, - "sass-embedded-linux-x64": { - "version": "1.57.1", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.57.1.tgz", - "integrity": "sha512-AI6CrcuLWP22RXhVrZUN2JfdQ7YdFR30dA4twYwp/Q4hUfj85dJrVD5ORi8G04haMWPOQiFV6pBcMgzpiY2Bog==", - "optional": true - }, - "sass-embedded-win32-ia32": { - "version": "1.57.1", - "resolved": "https://registry.npmjs.org/sass-embedded-win32-ia32/-/sass-embedded-win32-ia32-1.57.1.tgz", - "integrity": "sha512-s7EhJLG9AnJNBga3I+W0rk6y/1n/i0XD34rvqR3yJgBhNKkI5rVCxFN7FAcGR50vQQbCO1MrUCmuVvld+2qvyQ==", - "optional": true - }, - "sass-embedded-win32-x64": { - "version": "1.57.1", - "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.57.1.tgz", - "integrity": "sha512-b/Kgz7ADPTlPITk8e47Zf3eiuXlTGhi/eWsAoesUmkjR7jayvFNLHPhThgiRAxkzT6UlWI3Dzr+E3OBqUjegEg==", - "optional": true - }, "sax": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", @@ -17114,7 +17001,9 @@ "tslib": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", - "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==", + "optional": true, + "peer": true }, "tsutils": { "version": "3.21.0", diff --git a/package.json b/package.json index f54f80614..f30770e77 100644 --- a/package.json +++ b/package.json @@ -39,12 +39,11 @@ "patch-package": "^6.4.7", "postcss-html": "^1.5.0", "prettier": "^2.7.1", - "sass": "npm:sass-embedded@^1.57.1", + "sass": "^1.57.1", "sha.js": "^2.4.11", "stylelint": "^14.16.0", "stylelint-config-concentric-order": "^5.1.0", "stylelint-config-prettier-scss": "^0.0.1", - "stylelint-config-recommended-scss": "^8.0.0", "stylelint-config-recommended-vue": "^1.4.0", "stylelint-config-standard-scss": "^6.1.0", "typescript": "^4.7.3", diff --git a/src/module/plugin/chromatic-sass.ts b/src/module/plugin/chromatic-sass.ts index c1f858b56..2484fb718 100644 --- a/src/module/plugin/chromatic-sass.ts +++ b/src/module/plugin/chromatic-sass.ts @@ -1,17 +1,15 @@ // based on https://github.com/bugsnag/chromatic-sass -import Chroma, { contrast } from 'chroma-js' -import { isUndefined } from 'lodash' +import chroma, { contrast, mix } from 'chroma-js' +import { forEach, mapKeys, maxBy, mean, minBy, range } from 'lodash' + import { - CustomFunction, - SassColor, - SassList, - SassNumber, - SassString, - Value, + types as Sass, + LegacyValue as SassValue, + LegacySyncFunction as SassSyncFunction, } from 'sass' -const COLOR_MODES: Chroma.InterpolationMode[] = [ +const COLOR_MODES: chroma.InterpolationMode[] = [ 'rgb', 'hsl', 'hsv', @@ -22,8 +20,33 @@ const COLOR_MODES: Chroma.InterpolationMode[] = [ 'lrgb', ] -function assertColorMode(mode: Value) { - mode.assertString() +const getMethods = (obj) => { + let properties = new Set() + let currentObj = obj + do { + Object.getOwnPropertyNames(currentObj).map((item) => properties.add(item)) + } while ((currentObj = Object.getPrototypeOf(currentObj))) + return [...properties.keys()].filter( + (item) => typeof obj[item] === 'function' + ) +} + +function sassList2Array(list: Sass.List) { + const array: T[] = [] + for (let i = 1; i < list.getLength(); i++) { + array.push(list.getValue(i) as T) + } + return array +} + +function array2SassList(array: T[]) { + const list = new Sass.List(array.length, true) + array.forEach((v, i) => list.setValue(i + 1, v)) + return list +} + +function assertColorMode(mode: SassValue) { + // mode.assertString() if (COLOR_MODES.includes(mode.toString() as any)) { return true } @@ -31,10 +54,10 @@ function assertColorMode(mode: Value) { throw Error() } -function assertModeChannel(modeChannel: Value) { - modeChannel.assertString() +function assertModeChannel(modeChannel: SassValue) { + // modeChannel.assertString() const [mode, channel] = modeChannel.toString().split('.') as [ - Chroma.InterpolationMode, + chroma.InterpolationMode, string ] if (COLOR_MODES.includes(mode.toString() as any) && mode.includes(channel)) { @@ -45,157 +68,268 @@ function assertModeChannel(modeChannel: Value) { } /** - * Converts a {@link Chroma.Color} to a {@link SassColor}. + * Converts a {@link chroma.Color} to a {@link Sass.Color}. */ -function chroma2Sass(color: Chroma.Color) { +function chroma2Sass(color: chroma.Color) { const [red, green, blue, alpha] = color.rgba() - return new SassColor({ red, green, blue, alpha }) + const newColor = new Sass.Color(red, green, blue, alpha) + return newColor } /** - * Converts a {@link SassColor} to a {@link Chroma.Color}. + * Converts a {@link Sass.Color} to a {@link chroma.Color}. */ -function sass2Chroma(color: SassColor) { - color.assertColor() - const { red, green, blue, alpha } = color - return Chroma.rgb(red, green, blue).alpha(alpha) +function sass2Chroma(color: Sass.Color) { + const colorString = `rgba(${[ + color.getR(), + color.getG(), + color.getB(), + color.getA(), + ].join(',')})` + const newColor = chroma(colorString) + + // console.log('sass2Chroma converts', color, '\nto\n', newColor) + return newColor } -const chroma = { +const chromaSass: Record = { /** - * @see {@link Chroma.Color.set} + * @see {@link chroma.Color.set} */ 'set($color, $modechan, $v)': ( - color: SassColor, - modechan: SassString, - v: SassNumber + color: Sass.Color, + modechan: Sass.String, + v: Sass.Number ) => { - color.assertColor() - assertModeChannel(modechan) - v.assertNumber() - const newColor = sass2Chroma(color).set(modechan.toString(), v.value) + // assertModeChannel(modechan) + // v.assertNumber() + const newColor = sass2Chroma(color).set(modechan.toString(), v.getValue()) return chroma2Sass(newColor) }, /** - * @see {@link Chroma.Color.get} + * @see {@link chroma.Color.get} */ - 'get($color, $modechan)': (color: SassColor, modechan: SassString) => { - color.assertColor() - assertModeChannel(modechan) + 'get($color, $modechan)': (color: Sass.Color, modechan: Sass.String) => { + // assertModeChannel(modechan) const chromaColor = sass2Chroma(color) - return new SassNumber(chromaColor.get(modechan.toString())) + return new Sass.Number(chromaColor.get(modechan.toString())) }, /** - * @see {@link Chroma.Color.luminance} + * @see {@link chroma.Color.luminance} */ "luminance($color, $luminance: '', $color-space: 'rgb')": ( - color: SassColor, + color: Sass.Color, /** * @default undefined * @min 0 * @max 1 */ - luminance?: SassNumber, + luminance: Sass.Number, /** * @default 'rgb' */ - mode?: SassString + mode?: Sass.String ) => { - color.assertColor() - luminance?.assertNumber() - if (mode) { - assertColorMode(mode) - } const chromaColor = sass2Chroma(color) - if (!isUndefined(luminance)) { - const newColor = chromaColor.luminance( - luminance.value, - mode?.toString() as Chroma.InterpolationMode + + if (luminance instanceof Sass.String) { + // return the colour's luminance + const luminance = chromaColor.luminance() + + return new Sass.Number(luminance) + } else { + // set the colour's luminance and return the new color + chromaColor.luminance( + luminance.getValue(), + mode?.toString() as chroma.InterpolationMode ) - const [red, green, blue] = newColor.rgb() - return new SassColor({ red, green, blue }) - } else return new SassNumber(chromaColor.luminance()) + return new Sass.Color(...chromaColor._rgb._unclipped) + } + }, + 'lightest($colors...)': (colors: Sass.List) => { + const arr = sassList2Array(colors) + return maxBy(arr, (color) => sass2Chroma(color).luminance()) + }, + 'darkest($colors...)': (colors: Sass.List) => { + const arr = sassList2Array(colors) + return minBy(arr, (color) => sass2Chroma(color).luminance()) }, /** - * @see {@link Chroma.Color.contrast} + * @see {@link chroma.Color.contrast} */ - 'contrast($color1, $color2)': (color1: SassColor, color2: SassColor) => { - color1.assertColor() - color2.assertColor() + 'contrast($color1, $color2)': (color1: Sass.Color, color2: Sass.Color) => { + // color1.assertColor() + // color2.assertColor() const [chromaColor1, chromaColor2] = [color1, color2].map((color) => sass2Chroma(color) ) const contrastValue = contrast(chromaColor1, chromaColor2) - return new SassNumber(contrastValue) + return new Sass.Number(contrastValue) }, 'mix($color1, $color2, $f: 0.5, $color-space: lrgb)': ( - color1: SassColor, - color2: SassColor, - f?: SassNumber, - colorSpace?: SassString + color1: Sass.Color, + color2: Sass.Color, + f?: Sass.Number, + colorSpace?: Sass.String ) => { - ;[color1, color2].forEach((c) => c.assertColor()) - f?.assertNumber() - colorSpace?.assertString() + // ;[color1, color2].forEach((c) => c.assertColor()) + // f?.assertNumber() + // colorSpace?.assertString() const [chromaColor1, chromaColor2] = [color1, color2].map((c) => sass2Chroma(c) ) - const newColor = Chroma.mix( + const newColor = chroma.mix( chromaColor1, chromaColor2, - f?.value, - colorSpace?.toString() as Chroma.InterpolationMode + f?.getValue(), + colorSpace?.toString() as chroma.InterpolationMode ) return chroma2Sass(newColor) }, /** - * @see {@link Chroma.Color.hcl} + * @see {@link chroma.Color.hcl} */ - 'hcl($h, $c, $l)': (h: SassNumber, c: SassNumber, l: SassNumber) => { - ;[h, c, l].forEach((item) => item.assertNumber()) - const chromaColor = Chroma([h.value, c.value, l.value], 'hcl') + 'hcl($h, $c, $l)': (h: Sass.Number, c: Sass.Number, l: Sass.Number) => { + // ;[h, c, l].forEach((item) => item.assertNumber()) + const chromaColor = chroma( + [h.getValue(), c.getValue(), l.getValue()], + 'hcl' + ) return chroma2Sass(chromaColor) }, 'scale-steps($colors, $steps, $modechan: rgb)': ( - colors: SassList, - steps: SassNumber, - modechan: SassString + colors: Sass.List, + steps: Sass.Number, + modechan: Sass.String ) => { - steps.assertInt() - assertModeChannel(modechan) - const chromaColors: Chroma.Color[] = [] + // steps.assertInt() + // assertModeChannel(modechan) + const chromaColors: chroma.Color[] = [] for (const color in colors) { - chromaColors.push(Chroma(color)) + chromaColors.push(chroma(color)) } - const scale = Chroma.scale(chromaColors) + const scale = chroma + .scale(chromaColors) .correctLightness(true) .out('hsl') - .classes(steps.value) - .mode(modechan.toString() as Chroma.InterpolationMode) + .classes(steps.getValue()) + .mode(modechan.toString() as chroma.InterpolationMode) - return new SassList( - scale.colors(steps.value).map((c) => chroma2Sass(Chroma(c))), + return new Sass.List( + scale.colors(steps.value).map((c) => chroma2Sass(chroma(c))), { separator: ',', } ) }, -} as unknown as Record> - -export default chroma - -/* Print JS stack traces for exceptions caught by sass: - * Add to node_modules/sass/sass.dart.js: completeError$2(): console.error ('STACKTRACE:', st); - * Text snipet: - "use strict"; - const sass = require ('sass'); - const r = sass.renderSync ({ - file: 'ebeast/app.scss', - includePaths: [ 'ebeast/', 'out/ebeast/', ], - functions: require ("./chromatic-sass2"), - }); - console.log (r.css.toString ('utf8')); - */ + /** + * Interpolates a palette of colors from four 'anchor' colors. + * + * Currently it doesn't check contrast, but it probably should. + * + * @param fgColor - The foreground color. + * @param bgColor - The background color. + * @param warmColor - A saturated accent/highlight color, used both as-is and in mixtures with the other colours. + * @param coolColor - A second saturated accent/highlight color, used both as-is and in mixtures with the other colours. + * @param prefix - the prefix to use for the generated CSS variables. + * @returns A {@link Sass.Map} of keyed colours. Iterate over it with `@each` to set CSS custom properties that can + * + * @remarks 'warm' and 'cool' are used here primarily because they're more memorable labels than 'primary' or 'secondary'. They *could* be 'warmer'/'cooler' colours, but they don't have to be; 'warm'/'cool' are more about a UX element's importance/activity (warmer = more active/dramatic). + */ + 'gamutize($fg-color, $bg-color, $warm-color, $cool-color, $prefix: palette)': + ( + fgColor: Sass.Color, + bgColor: Sass.Color, + warmColor: Sass.Color, + coolColor: Sass.Color, + /** + * @default 'palette' + */ + prefix: Sass.String + ) => { + const ground = { + fg: sass2Chroma(fgColor), + bg: sass2Chroma(bgColor), + } + const steps = range(10, 100, 10) + const cssPrefix = prefix.getValue() + + const lightness = { + light: maxBy([ground.fg, ground.bg], (color) => + color?.luminance() + ) as chroma.Color, + dark: minBy([ground.fg, ground.bg], (color) => + color?.luminance() + ) as chroma.Color, + } + const temperature = { + warm: sass2Chroma(warmColor), + cool: sass2Chroma(coolColor), + } + const colorMap = new Map() + const mode: chroma.InterpolationMode = 'hcl' + + forEach( + { + ...lightness, + ...ground, + ...temperature, + }, + (color, colorKey) => { + colorMap.set(`${cssPrefix}-${colorKey}`, color) + // mix overlays + steps.forEach((step) => { + const stepFactor = step / 100 + colorMap.set( + `${cssPrefix}-${colorKey}-${step}`, + color.alpha(stepFactor) + ) + }) + } + ) + steps.forEach((step) => { + const stepFactor = step / 100 + // mix scales + const scaleColor = chroma.mix( + lightness['light'], + lightness['dark'], + stepFactor, + mode + ) + + // Mix a colour scale from $light-color to $dark-color, where *-scale-90 is 90% $light-color, and *-scale-10 is 10% $light-color. + colorMap.set(`${cssPrefix}-scale-${step}`, scaleColor) + + // Mix a color scale of midtones from $fg-color to $bg-color, where *-midtone-90 is 90% $fg-color, and *-midtone-10 is 10% $fg-color. + colorMap.set( + `${cssPrefix}-midtone-${step}`, + mix(ground['fg'], ground['bg'], stepFactor, mode) + ) + }) + + // mix color variants + forEach({ ...lightness, ...ground }, (vBase, kBase) => { + forEach(temperature, (vTemp, kTemp) => { + colorMap.set( + `${cssPrefix}-${kBase}-${kTemp}`, + mix(vBase, vTemp, 0.5, mode) + ) + }) + }) + + const sassColorMap = new Sass.Map(colorMap.size) + let index = 0 + colorMap.forEach((colorValue, colorKey) => { + sassColorMap.setKey(index, new Sass.String(colorKey)) + sassColorMap.setValue(index, chroma2Sass(colorValue)) + index++ + }) + + return sassColorMap + }, +} + +export default chromaSass diff --git a/src/styles/fvtt/app.scss b/src/styles/fvtt/app.scss index 9d76acbe6..976487979 100644 --- a/src/styles/fvtt/app.scss +++ b/src/styles/fvtt/app.scss @@ -12,9 +12,6 @@ } .categories { - .scrollable { - } - footer { background: var(--ironsworn-color-warm-20); } diff --git a/src/styles/styles.scss b/src/styles/styles.scss index 55e062c99..eda03ab90 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -66,6 +66,11 @@ --ironsworn-tab-transition: fade; } +// THEMES +// TODO: this could probably be set up to extract everything from the theme directory automatically. +@include meta.load-css('themes/starforged'); +@include meta.load-css('themes/ironsworn'); + // :where is a zero-specificity selector, used here so that it's not impossible for components to override global styles // https://developer.mozilla.org/en-US/docs/Web/CSS/:where :where(.ironsworn) { @@ -119,11 +124,6 @@ @include meta.load-css('scrollbar'); @include meta.load-css('tables'); - // THEMES - // TODO: this could probably be set up to extract everything from the theme directory automatically. - @include meta.load-css('themes/starforged'); - @include meta.load-css('themes/ironsworn'); - // .window-title { // @include initial-caps; // } diff --git a/src/styles/themes/ironsworn.scss b/src/styles/themes/ironsworn.scss index 8e4ff158f..7eb763528 100644 --- a/src/styles/themes/ironsworn.scss +++ b/src/styles/themes/ironsworn.scss @@ -1,10 +1,26 @@ +/* stylelint-disable order/order */ // Light theme for Ironsworn, with minimal restyling of FVTT's stock UI. @use 'mixins/colors'; -@use 'mixins/palette'; @use 'mixins/decorations'; -.system-foundry-ironsworn.theme-ironsworn { +.theme-ironsworn { + // #ff6600 and #ff0000 chosen because they're what FVTT uses for similar accents. + @include colors.palettize( + $fg-color: hsl(0, 0%, 0%), + $bg-color: hsl(0, 0%, 100%), + $warm-color: hsl(24, 100%, 50%), + $cool-color: hsl(0, 100%, 50%), + $prefix: ironsworn-color + ); + @include colors.light-theme(ironsworn-color); + @include colors.sharp-border(ironsworn-color); + @include colors.interactive-invert( + ironsworn-color-clickable-block, + ironsworn-color + ); + @include decorations.ironsworn; + --ironsworn-color-text-stroke: transparent; // CLICKABLE TEXT: HOVER FILTER EFFECT @@ -12,17 +28,4 @@ 0 0 3px var(--ironsworn-color-cool) ); --ironsworn-box-shadow-highlight: 0 0 3px var(--ironsworn-color-cool); - - // #ff6600 and #ff0000 chosen because they're what FVTT uses for similar accents. - @include palette.palettize( - ironsworn-color, - #000000, - #ffffff, - #ff6600, - #ff0000 - ); - @include ironsworn-light-theme(ironsworn-color); - @include sharp-border(ironsworn-color); - @include interactive-invert(ironsworn-color-clickable-block, ironsworn-color); - @include ironsworn-decoration; } diff --git a/src/styles/themes/mixins/colors.scss b/src/styles/themes/mixins/colors.scss index c80827446..595f7cecf 100644 --- a/src/styles/themes/mixins/colors.scss +++ b/src/styles/themes/mixins/colors.scss @@ -1,26 +1,71 @@ -@mixin ironsworn-light-theme($prefix) { - --#{$prefix}-legacy-quests: var(--ironsworn-color-red); - --#{$prefix}-legacy-bonds: var(--ironsworn-color-purple); - --#{$prefix}-legacy-discoveries: var(--ironsworn-color-blue); +@use 'sass:color'; +@use 'sass:math'; +@use 'sass:meta'; +@use 'sass:map'; +@use 'sass:string'; + +@mixin palettize( + $fg-color, + $bg-color, + $warm-color, + $cool-color, + $prefix: palette +) { + // generate a large set of colour values from the four anchor colours. + + $palette: gamutize($fg-color, $bg-color, $warm-color, $cool-color, $prefix); + // @debug meta.inspect($palette); + + // Start writing the CSS custom properties. + // see: https://developer.mozilla.org/en-US/docs/Web/CSS/--* + @each $css-property, $color in $palette { + --#{$css-property}: #{$color}; + } +} + +@mixin light-theme($prefix) { + @include color-defaults('dark', 'light', 'ironsworn-color'); + --#{$prefix}-legacy-quests: var(--#{$prefix}-red); + --#{$prefix}-legacy-bonds: var(--#{$prefix}-purple); + --#{$prefix}-legacy-discoveries: var(--#{$prefix}-blue); +} + +@mixin dark-theme($prefix) { + @include color-defaults('light', 'dark', 'ironsworn-color'); + --#{$prefix}-legacy-quests: var(--#{$prefix}-red-dark); + --#{$prefix}-legacy-bonds: var(--#{$prefix}-purple-dark); + --#{$prefix}-legacy-discoveries: var(--#{$prefix}-blue-dark); } -@mixin ironsworn-dark-theme($prefix) { - --#{$prefix}-legacy-quests: var(--ironsworn-color-red-dark); - --#{$prefix}-legacy-bonds: var(--ironsworn-color-purple-dark); - --#{$prefix}-legacy-discoveries: var(--ironsworn-color-blue-dark); +// Set sensible defaults for semantically-oriented colors +@mixin color-defaults($fg-type, $bg-type, $prefix) { + --#{$prefix}-fg-muted: var(--#{$prefix}-midtone-60); + --#{$prefix}-fg-highlight: var(--#{$prefix}-#{$fg-type}-warm); + + // INPUT + --#{$prefix}-input-bg: var(--#{$prefix}-#{fg-type}-10); + --#{$prefix}-input-border: var(--#{$prefix}-#{fg-type}-10); + + // CLICKABLE TEXT + --#{$prefix}-clickable-text: inherit; + --#{$prefix}-clickable-text-hover: var(--#{$prefix}-#{fg-type}-warm); + --#{$prefix}-clickable-text-selected: var(--#{$prefix}-#{fg-type}-warm); + + // WIDGETS + --#{$prefix}-widget-fill: var(--#{$prefix}-#{fg-type}); } // generates color variables to style an interactive element with an invert effect when it's active @mixin interactive-invert($element-prefix, $source-prefix) { - --#{$element-prefix}-fg: var(--#{$element-prefix}-fg); + --#{$element-prefix}-fg: var(--#{$source-prefix}-fg); --#{$element-prefix}-bg: transparent; - --#{$element-prefix}-border: var(--#{$element-prefix}-border); - --#{$element-prefix}-fg-hover: var(--#{$element-prefix}-fg); - --#{$element-prefix}-bg-hover: var(--#{$element-prefix}-fg-20); - --#{$element-prefix}-border-hover: var(--#{$element-prefix}-border); - --#{$element-prefix}-fg-selected: var(--#{$element-prefix}-bg); - --#{$element-prefix}-bg-selected: var(--#{$element-prefix}-fg); - --#{$element-prefix}-border-selected: var(--#{$element-prefix}-fg); + --#{$element-prefix}-border: var(--#{$source-prefix}-border); + --#{$element-prefix}-fg-hover: var(--#{$source-prefix}-fg); + --#{$element-prefix}-bg-hover: var(--#{$source-prefix}-fg-20); + --#{$element-prefix}-border-hover: var(--#{$source-prefix}-border); + --#{$element-prefix}-fg-selected: var(--#{$source-prefix}-bg); + --#{$element-prefix}-bg-selected: var(--#{$source-prefix}-fg); + --#{$element-prefix}-border-selected: var(--#{$source-prefix}-fg); } // generates color variables to style an interactive element with slightly dulled colours in its default state, and a tint effect when it's active. @@ -47,3 +92,15 @@ --#{$prefix}-border: var(--#{$prefix}-fg); --#{$prefix}-border-muted: var(--#{$prefix}-fg-80); } + +// HELPER FUNCTIONS + +// Infers whether this is a light or dark theme. + +@function theme-type($fg-color, $bg-color) { + @if luminance($bg-color) < luminance($fg-color) { + @return (bg: 'dark', fg: 'light'); + } @else { + @return (bg: 'light', fg: 'dark'); + } +} diff --git a/src/styles/themes/mixins/decorations.scss b/src/styles/themes/mixins/decorations.scss index 97cdda1fa..2fd3f8801 100644 --- a/src/styles/themes/mixins/decorations.scss +++ b/src/styles/themes/mixins/decorations.scss @@ -1,10 +1,10 @@ -.ironsworn-decoration { +@mixin ironsworn { .asset-ironsworn .asset-ability::before { border: var(--ironsworn-border-width-md) solid var(--ironsworn-color-fg); } } -.starforged-decoration { +@mixin starforged { .asset-ironsworn .asset-ability::before { border-width: var(--ironsworn-border-width-md); border-style: solid; diff --git a/src/styles/themes/mixins/palette.scss b/src/styles/themes/mixins/palette.scss deleted file mode 100644 index 4c6f2a441..000000000 --- a/src/styles/themes/mixins/palette.scss +++ /dev/null @@ -1,125 +0,0 @@ -@use 'sass:color'; -@use 'sass:math'; - -/** - * Mixin that interpolates CSS variables for a palette of colours. - * Currently it doesn't check contrast, but it probably should. -* NOTE: 'warm' and 'cool' are used here primarily because they're more memorable labels than 'primary' or 'secondary'. They *could* be 'warmer'/'cooler' colours, but they don't have to be; 'warm'/'cool' are more about a UX element's importance/activity (warmer = more active/dramatic). - * $prefix - the prefix to use for the generated CSS variables. - * $fg-color - The foreground color. - * $bg-color - The background color. - * $warm-color - A saturated accent/highlight color, used both as-is and in mixtures with the other colours. - * $cool-color - A second saturated accent/highlight color, used both as-is and in mixtures with the other colours. - */ -@mixin palettize( - $prefix: palette, - $fg-color: hsl(0, 0%, 0%), - $bg-color: hsl(0, 0%, 100%), - $warm-color: hsl(24, 100%, 50%), - $cool-color: hsl(0, 100%, 50%) -) { - // TODO: With SCSS migration and the chromatic-sass plugin, this could be significantly improved. - $fg-luma: luminance($fg-color); - $bg-luma: luminance($bg-color); - - @if $fg-luma > $bg-luma { - $light-color: $fg-color; - $dark-color: $bg-color; - $fg-type: light; - $bg-type: dark; - } @else { - $light-color: $bg-color; - $dark-color: $fg-color; - $fg-type: dark; - $bg-type: light; - } - - $light-warm-base: color.mix($warm-color, $light-color, 75%); - $light-cool-base: color.mix($cool-color, $light-color, 75%); - $dark-warm-base: color.mix($warm-color, $dark-color, 75%); - $dark-cool-base: color.mix($cool-color, $dark-color, 75%); - $lightness-ceiling: 75%; - $lightness-floor: 20%; - $light-warm: hsl(color.hue($light-warm-base), 100%, $lightness-ceiling); - $light-cool: hsl(color.hue($light-cool-base), 100%, $lightness-ceiling); - $dark-warm: hsl(color.hue($dark-warm-base), 100%, $lightness-floor); - $dark-cool: hsl(color.hue($dark-cool-base), 100%, $lightness-floor); - $fg-warm: var(--#{prefix}-#{$fg-type}-warm); - $fg-cool: var(--#{prefix}-#{$fg-type}-cool); - $bg-warm: var(--#{prefix}-#{$bg-type}-warm); - $bg-cool: var(--#{prefix}-#{$bg-type}-cool); - - // Now that all the variables are set, start writing the CSS custom properties. - // see: https://developer.mozilla.org/en-US/docs/Web/CSS/--* - --#{$prefix}-warm: $warm-color; - --#{$prefix}-cool: $cool-color; - --#{$prefix}-light: $light-color; - --#{$prefix}-light-cool: $light-cool; - --#{$prefix}-light-warm: $light-warm; - --#{$prefix}-dark: $dark-color; - --#{$prefix}-dark-cool: $dark-cool; - --#{$prefix}-dark-warm: $dark-warm; - --#{$prefix}-fg: $fg-color; - --#{$prefix}-bg: $bg-color; - --#{$prefix}-fg-warm: $fg-warm; - --#{$prefix}-fg-cool: $fg-cool; - --#{$prefix}-bg-warm: $bg-warm; - --#{$prefix}-bg-cool: $bg-cool; - - // Set sensible defaults for semantically-oriented colors - --#{$prefix}-fg-muted: var(--#{$prefix}-midtone-60); - --#{$prefix}-fg-highlight: var(--#{$prefix}-#{$fg-type}-warm); - - // INPUT - --#{$prefix}-input-bg: var(--#{$prefix}-#{fg-type}-10); - --#{$prefix}-input-border: var(--#{$prefix}-#{fg-type}-10); - - // CLICKABLE TEXT - --#{$prefix}-clickable-text: inherit; - --#{$prefix}-clickable-text-hover: var(--#{$prefix}-#{fg-type}-warm); - --#{$prefix}-clickable-text-selected: var(--#{$prefix}-#{fg-type}-warm); - - // WIDGETS - --#{$prefix}-widget-fill: var(--#{$prefix}-#{fg-type}); - - // transparent overlays - @include mix-overlays($prefix, warm, $warm-color); - @include mix-overlays($prefix, cool, $cool-color); - @include mix-overlays($prefix, light, $light-color); - @include mix-overlays($prefix, light-cool, $light-cool); - @include mix-overlays($prefix, light-warm, $light-warm); - @include mix-overlays($prefix, dark, $dark-color); - @include mix-overlays($prefix, dark-cool, $dark-cool); - @include mix-overlays($prefix, dark-warm, $dark-warm); - @include mix-overlays($prefix, fg, $fg-color); - @include mix-overlays($prefix, fg-cool, $fg-cool); - @include mix-overlays($prefix, fg-warm, $fg-warm); - @include mix-overlays($prefix, bg, $bg-color); - @include mix-overlays($prefix, bg-cool, $bg-cool); - @include mix-overlays($prefix, bg-warm, $bg-warm); - - // *-midtone-* variables describe a color scale from $fg-color to $bg-color, where *-midtone-90 is 90% $fg-color, and *-midtone-10 is 10% $fg-color. - @include mix-scale($prefix, midtone, $bg-color, $fg-color); - - // *-scale-* variables describe a color scale from $light-color to $dark-color, where *-scale-90 is 90% $light-color, and *-scale-10 is 10% $light-color. - @include mix-scale($prefix, scale, $dark-color, $light-color); -} - -// HELPER MIXINS -@mixin mix-overlays($prefix, $infix, $base-color) { - $overlays: range(10, 90, 10); - @each $percent in $overlays { - --#{$prefix}-#{$infix}-#{$percent}: rgba($base-color, $percent); - } -} - -@mixin mix-scale($prefix, $infix, $base-color, $added-color) { - $mixtures: range(10, 90, 10); - @each $percent in $mixtures { - --#{$prefix}-#{$infix}-#{$percent}: color.mix( - $added-color, - $base-color, - $percent - ); - } -} diff --git a/src/styles/themes/starforged.scss b/src/styles/themes/starforged.scss index 0b7ecaff8..254e7c577 100644 --- a/src/styles/themes/starforged.scss +++ b/src/styles/themes/starforged.scss @@ -1,21 +1,27 @@ +/* stylelint-disable order/order */ // Dark theme for Starforged, with aggressive restyling of FVTT's stock UX elements. +@use 'sass:meta'; @use 'starforged-font.css'; // HACK to avoid import error @use 'mixins/colors'; -@use 'mixins/palette'; @use 'mixins/fvtt-var-overrides'; @use 'mixins/decorations'; -// restyle FVTT's UI -@use '../fvtt/app'; -@use '../fvtt/dialog'; -@use '../fvtt/clickable'; -@use '../fvtt/settings'; -@use '../fvtt/sidebar'; -@use '../fvtt/tooltip'; -@use '../inputs'; +.theme-starforged { + @include colors.palettize( + $fg-color: hsl(180, 70%, 60%), + $bg-color: hsl(180, 20%, 0%), + $warm-color: hsl(185, 100%, 50%), + $cool-color: hsl(210, 100%, 50%), + $prefix: ironsworn-color + ); + @include colors.dark-theme(ironsworn-color); + @include colors.soft-border(ironsworn-color); + @include colors.interactive-tint( + ironsworn-color-clickable-block, + ironsworn-color + ); -.system-foundry-ironsworn.theme-starforged { // set CSS variables --font-primary: 'Carrois Gothic SC', sans-serif; --ironsworn-color-text-stroke: var(--ironsworn-color-bg); @@ -28,21 +34,20 @@ --ironsworn-tab-transition: slide; --path-hexagon: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%); - @include palette.palettize( - ironsworn-color, - hsl(180, 70%, 60%), - hsl(180, 20%, 0%), - hsl(185, 100%, 50%), - hsl(210, 100%, 50%) - ); - @include ironsworn-dark-theme(ironsworn-color); - @include soft-border(ironsworn-color); - @include interactive-tint(ironsworn-color-clickable-block, ironsworn-color); - // now that the vars are set, set the overrides to FVTT's vars that are dependent on them. - @include fvtt-var-overrides; - @include starforged-decoration; + @include fvtt-var-overrides.fvtt-var-overrides; + @include decorations.starforged; + + // restyle FVTT's UI + @include meta.load-css('@styles/fvtt/app'); + @include meta.load-css('@styles/fvtt/dialog'); + @include meta.load-css('@styles/fvtt/clickable'); + @include meta.load-css('@styles/fvtt/settings'); + @include meta.load-css('@styles/fvtt/sidebar'); + @include meta.load-css('@styles/fvtt/tooltip'); + @include meta.load-css('@styles/inputs'); + // specific configuration. avoid adding to this -- generalize where possible to keep the code neat and maintainable. .chat-message { background: var(--ironsworn-color-bg); } diff --git a/vite.config.ts b/vite.config.ts index f3de080b2..58c03791c 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -6,19 +6,18 @@ import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' import path from 'path' import tsconfigPaths from 'vite-tsconfig-paths' import sassChroma from './src/module/plugin/chromatic-sass' -import chroma from 'chroma-js' +import * as sass from 'sass' const PORT = 30000 -const sassOptions = { +const sassOptions: sass.LegacyStringOptions<'sync'> = { functions: sassChroma, - modules: { chroma }, + // @ts-ignore additionalData: ` @use "${path.resolve( __dirname, 'src/styles/mixins.scss' )}" as mixins; - @use "@styles/utils" as utils; `, } @@ -65,7 +64,6 @@ const config: UserConfig = { postcss: { plugins: [autoprefixer()], }, - devSourcemap: true, }, build: { outDir: 'dist', From 2c76ed47d32696f680495aa8104e3a4315be2645 Mon Sep 17 00:00:00 2001 From: rsek Date: Wed, 21 Dec 2022 08:41:52 -0800 Subject: [PATCH 021/195] fix margins, inputs, adjust palettize --- src/module/vue/character-sheet.vue | 11 ++++++++-- .../vue/components/buttons/iron-btn.vue | 18 +++++++++-------- src/module/vue/components/icon/icon-common.ts | 9 ++++++--- src/module/vue/components/icon/iron-icon.vue | 20 ++++++++++++++++--- .../progress/progress-track-box.vue | 2 +- .../vue/components/sf-characterheader.vue | 3 --- src/module/vue/sf-charactersheet.vue | 2 +- src/styles/inputs.scss | 5 ++++- src/styles/mixins.scss | 2 +- src/styles/styles.scss | 2 +- src/styles/themes/mixins/colors.scss | 10 +++++----- 11 files changed, 55 insertions(+), 29 deletions(-) diff --git a/src/module/vue/character-sheet.vue b/src/module/vue/character-sheet.vue index ce9257a94..bba9855b3 100644 --- a/src/module/vue/character-sheet.vue +++ b/src/module/vue/character-sheet.vue @@ -11,7 +11,7 @@ -
+
@@ -53,7 +53,8 @@ @@ -61,6 +62,12 @@ + From 8c452b92391479a74de6325306c90edcd27013b4 Mon Sep 17 00:00:00 2001 From: rsek Date: Sun, 8 Jan 2023 23:11:16 -0800 Subject: [PATCH 061/195] add some aria annotation to xp track --- src/module/vue/components/xp-track.vue | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/module/vue/components/xp-track.vue b/src/module/vue/components/xp-track.vue index bf0a49728..8055e1417 100644 --- a/src/module/vue/components/xp-track.vue +++ b/src/module/vue/components/xp-track.vue @@ -1,11 +1,16 @@ diff --git a/src/module/vue/components/character-sheet-tabs/sf-connections.vue b/src/module/vue/components/character-sheet-tabs/sf-connections.vue index f7f85fbed..548296181 100644 --- a/src/module/vue/components/character-sheet-tabs/sf-connections.vue +++ b/src/module/vue/components/character-sheet-tabs/sf-connections.vue @@ -7,7 +7,7 @@ ref="$connectionList" />
diff --git a/src/module/vue/components/character-sheet-tabs/sf-legacies.vue b/src/module/vue/components/character-sheet-tabs/sf-legacies.vue index 608dc181e..07ee38107 100644 --- a/src/module/vue/components/character-sheet-tabs/sf-legacies.vue +++ b/src/module/vue/components/character-sheet-tabs/sf-legacies.vue @@ -1,17 +1,17 @@ diff --git a/src/module/vue/components/progress-controls.vue b/src/module/vue/components/progress-controls.vue index 5ce5b6a54..c755b2326 100644 --- a/src/module/vue/components/progress-controls.vue +++ b/src/module/vue/components/progress-controls.vue @@ -1,21 +1,21 @@ diff --git a/src/module/vue/components/progress-list.vue b/src/module/vue/components/progress-list.vue index 000be8467..e91052724 100644 --- a/src/module/vue/components/progress-list.vue +++ b/src/module/vue/components/progress-list.vue @@ -3,7 +3,7 @@ group tag="ul" class="progress-list item-list" - :class="$style.progressList" + :class="$style['progress-list']" >
  • diff --git a/src/module/vue/components/progress/progress-list-item.vue b/src/module/vue/components/progress/progress-list-item.vue index a6898337f..8b59b06e0 100644 --- a/src/module/vue/components/progress/progress-list-item.vue +++ b/src/module/vue/components/progress/progress-list-item.vue @@ -92,9 +92,9 @@ diff --git a/src/module/vue/components/sf-move-category-rows.vue b/src/module/vue/components/sf-move-category-rows.vue index b0219f307..c02c45e37 100644 --- a/src/module/vue/components/sf-move-category-rows.vue +++ b/src/module/vue/components/sf-move-category-rows.vue @@ -1,7 +1,7 @@ + + diff --git a/src/module/vue/components/character-sheet-tabs/sf-connections.vue b/src/module/vue/components/character-sheet-tabs/sf-connections.vue index 76902f6c6..9c04912ae 100644 --- a/src/module/vue/components/character-sheet-tabs/sf-connections.vue +++ b/src/module/vue/components/character-sheet-tabs/sf-connections.vue @@ -1,26 +1,21 @@ - + diff --git a/src/module/vue/components/character-sheet-tabs/sf-legacies.vue b/src/module/vue/components/character-sheet-tabs/sf-legacies.vue index d6d025447..7d1e4ef95 100644 --- a/src/module/vue/components/character-sheet-tabs/sf-legacies.vue +++ b/src/module/vue/components/character-sheet-tabs/sf-legacies.vue @@ -11,9 +11,9 @@ />
    • + + - - diff --git a/src/module/vue/components/character-sheet-tabs/sf-notes.vue b/src/module/vue/components/character-sheet-tabs/sf-notes.vue index b49a7d3e7..3ea5706df 100644 --- a/src/module/vue/components/character-sheet-tabs/sf-notes.vue +++ b/src/module/vue/components/character-sheet-tabs/sf-notes.vue @@ -5,7 +5,8 @@ + + diff --git a/src/module/vue/components/collapsible/collapsible.vue b/src/module/vue/components/collapsible/collapsible.vue index c2d072071..7aaddf8b2 100644 --- a/src/module/vue/components/collapsible/collapsible.vue +++ b/src/module/vue/components/collapsible/collapsible.vue @@ -1,13 +1,13 @@ - - + + diff --git a/src/module/vue/components/completed-progress-list.vue b/src/module/vue/components/completed-progress-list.vue index 4864fde35..04e3f4b0c 100644 --- a/src/module/vue/components/completed-progress-list.vue +++ b/src/module/vue/components/completed-progress-list.vue @@ -1,48 +1,30 @@ - - + + diff --git a/src/module/vue/components/conditions/condition-checkbox.vue b/src/module/vue/components/conditions/condition-checkbox.vue index d396fc3f1..9b6791f66 100644 --- a/src/module/vue/components/conditions/condition-checkbox.vue +++ b/src/module/vue/components/conditions/condition-checkbox.vue @@ -6,24 +6,19 @@ > {{ $t(`IRONSWORN.${$capitalize(name)}`) }} - - + + diff --git a/src/module/vue/components/conditions/conditions.vue b/src/module/vue/components/conditions/conditions.vue index ec6290d87..2a792b631 100644 --- a/src/module/vue/components/conditions/conditions.vue +++ b/src/module/vue/components/conditions/conditions.vue @@ -25,13 +25,13 @@
    + + - - diff --git a/src/module/vue/components/conditions/custom-condition-checkbox.vue b/src/module/vue/components/conditions/custom-condition-checkbox.vue index 4ac35b185..46288cd19 100644 --- a/src/module/vue/components/conditions/custom-condition-checkbox.vue +++ b/src/module/vue/components/conditions/custom-condition-checkbox.vue @@ -6,29 +6,17 @@ @input="toggled" /> - - + + diff --git a/src/module/vue/components/document-img.vue b/src/module/vue/components/document-img.vue index db7ad3376..7990c34bd 100644 --- a/src/module/vue/components/document-img.vue +++ b/src/module/vue/components/document-img.vue @@ -9,19 +9,8 @@ /> - - + + diff --git a/src/module/vue/components/document-name.vue b/src/module/vue/components/document-name.vue index 407f65c13..b6a0024ce 100644 --- a/src/module/vue/components/document-name.vue +++ b/src/module/vue/components/document-name.vue @@ -1,11 +1,11 @@ diff --git a/src/module/vue/components/foe-sheet.vue b/src/module/vue/components/foe-sheet.vue index 742b78ef9..67c376bc2 100644 --- a/src/module/vue/components/foe-sheet.vue +++ b/src/module/vue/components/foe-sheet.vue @@ -4,9 +4,9 @@ @@ -15,16 +15,16 @@ block nogrow :icon="whisperIcon" - @click="toggleWhisper" :data-tooltip="whisperTooltip" :text="$t('IRONSWORN.ChatAlert.ToggleMute')" + @click="toggleWhisper" /> - - + + diff --git a/src/module/vue/components/icon/font-icon-stack.vue b/src/module/vue/components/icon/font-icon-stack.vue index 97f48266e..fdca4795a 100644 --- a/src/module/vue/components/icon/font-icon-stack.vue +++ b/src/module/vue/components/icon/font-icon-stack.vue @@ -13,15 +13,9 @@ - - + + diff --git a/src/module/vue/components/icon/font-icon.vue b/src/module/vue/components/icon/font-icon.vue index 1201a0119..332618908 100644 --- a/src/module/vue/components/icon/font-icon.vue +++ b/src/module/vue/components/icon/font-icon.vue @@ -13,38 +13,11 @@ /> - - + + diff --git a/src/module/vue/components/icon/iron-icon.vue b/src/module/vue/components/icon/iron-icon.vue index fbf821cf5..12031a698 100644 --- a/src/module/vue/components/icon/iron-icon.vue +++ b/src/module/vue/components/icon/iron-icon.vue @@ -12,9 +12,9 @@ - diff --git a/src/module/vue/components/mce-editor.vue b/src/module/vue/components/mce-editor.vue index cc96a528a..fb0566c46 100644 --- a/src/module/vue/components/mce-editor.vue +++ b/src/module/vue/components/mce-editor.vue @@ -2,7 +2,7 @@
    @@ -11,9 +11,9 @@
    @@ -24,9 +24,9 @@ + + + + diff --git a/src/module/vue/components/order-buttons.vue b/src/module/vue/components/order-buttons.vue index e0dc5808f..0c3da70f0 100644 --- a/src/module/vue/components/order-buttons.vue +++ b/src/module/vue/components/order-buttons.vue @@ -18,6 +18,11 @@
    + + - - diff --git a/src/module/vue/components/progress-controls.vue b/src/module/vue/components/progress-controls.vue index 5c33ffae2..b96b4a845 100644 --- a/src/module/vue/components/progress-controls.vue +++ b/src/module/vue/components/progress-controls.vue @@ -4,15 +4,15 @@ :class="$style.btn" block icon="fa:plus" - @click="addProgressItem('vow')" :text="$t('IRONSWORN.ITEM.SubtypeVow')" + @click="addProgressItem('vow')" /> - - + + diff --git a/src/module/vue/components/progress-item-detail.vue b/src/module/vue/components/progress-item-detail.vue index 3e1681edc..c0e1d0271 100644 --- a/src/module/vue/components/progress-item-detail.vue +++ b/src/module/vue/components/progress-item-detail.vue @@ -3,8 +3,8 @@

    {{ rankText }}

    @@ -35,7 +35,7 @@ + + diff --git a/src/module/vue/components/progress/progress-list-item.vue b/src/module/vue/components/progress/progress-list-item.vue index 4facba37f..3ca76a2f7 100644 --- a/src/module/vue/components/progress/progress-list-item.vue +++ b/src/module/vue/components/progress/progress-list-item.vue @@ -30,39 +30,39 @@ v-if="editMode" block icon="fa:trash" - @click="destroy" :tooltip=" $t('DOCUMENT.Delete', { type: $t('IRONSWORN.ITEM.TypeProgressTrack'), }) " + @click="destroy" /> - - + + diff --git a/src/module/vue/components/progress/progress-track-box.vue b/src/module/vue/components/progress/progress-track-box.vue index 6d1d9162d..adc451a44 100644 --- a/src/module/vue/components/progress/progress-track-box.vue +++ b/src/module/vue/components/progress/progress-track-box.vue @@ -13,10 +13,10 @@ viewBox="0 0 100 100" role="presentational" > - + @@ -38,6 +38,49 @@
    + - diff --git a/src/module/vue/components/progress/progress-track.vue b/src/module/vue/components/progress/progress-track.vue index 20a77c814..c0cd54928 100644 --- a/src/module/vue/components/progress/progress-track.vue +++ b/src/module/vue/components/progress/progress-track.vue @@ -19,15 +19,68 @@ > + + - - diff --git a/src/module/vue/components/rank-pips/pip-svg-hex.vue b/src/module/vue/components/rank-pips/pip-svg-hex.vue index 79110954b..5bda696c9 100644 --- a/src/module/vue/components/rank-pips/pip-svg-hex.vue +++ b/src/module/vue/components/rank-pips/pip-svg-hex.vue @@ -13,7 +13,7 @@ + + diff --git a/src/module/vue/components/resource-meter/condition-meter.vue b/src/module/vue/components/resource-meter/condition-meter.vue index 3992013af..18e9856db 100644 --- a/src/module/vue/components/resource-meter/condition-meter.vue +++ b/src/module/vue/components/resource-meter/condition-meter.vue @@ -1,13 +1,13 @@ @@ -27,7 +27,7 @@ + + diff --git a/src/module/vue/components/resource-meter/pc-condition-meters.vue b/src/module/vue/components/resource-meter/pc-condition-meters.vue index fa9c2165e..e16c29090 100644 --- a/src/module/vue/components/resource-meter/pc-condition-meters.vue +++ b/src/module/vue/components/resource-meter/pc-condition-meters.vue @@ -3,20 +3,36 @@ + - diff --git a/src/module/vue/components/resource-meter/slider-bar.vue b/src/module/vue/components/resource-meter/slider-bar.vue index 6e04b3caf..5e06f2e30 100644 --- a/src/module/vue/components/resource-meter/slider-bar.vue +++ b/src/module/vue/components/resource-meter/slider-bar.vue @@ -48,6 +48,98 @@ + + - - diff --git a/src/module/vue/components/rules-text/oracle-table.vue b/src/module/vue/components/rules-text/oracle-table.vue index abb049a31..27a1e4a72 100644 --- a/src/module/vue/components/rules-text/oracle-table.vue +++ b/src/module/vue/components/rules-text/oracle-table.vue @@ -26,26 +26,8 @@ - - + + diff --git a/src/module/vue/components/rules-text/rules-source-info.vue b/src/module/vue/components/rules-text/rules-source-info.vue index 533154b14..5c619a5de 100644 --- a/src/module/vue/components/rules-text/rules-source-info.vue +++ b/src/module/vue/components/rules-text/rules-source-info.vue @@ -11,8 +11,8 @@ + + diff --git a/src/module/vue/components/rules-text/rules-text-oracle.vue b/src/module/vue/components/rules-text/rules-text-oracle.vue index de9b45eea..cd00d16c7 100644 --- a/src/module/vue/components/rules-text/rules-text-oracle.vue +++ b/src/module/vue/components/rules-text/rules-text-oracle.vue @@ -1,7 +1,7 @@ diff --git a/src/module/vue/components/asset/asset-edit-description.vue b/src/module/vue/components/asset/asset-edit-description.vue index 50bc7610a..488d88549 100644 --- a/src/module/vue/components/asset/asset-edit-description.vue +++ b/src/module/vue/components/asset/asset-edit-description.vue @@ -1,37 +1,35 @@ diff --git a/src/module/vue/components/asset/asset-edit-fields.vue b/src/module/vue/components/asset/asset-edit-fields.vue index 8b4aca695..5f559e9d4 100644 --- a/src/module/vue/components/asset/asset-edit-fields.vue +++ b/src/module/vue/components/asset/asset-edit-fields.vue @@ -1,38 +1,34 @@ diff --git a/src/module/vue/components/asset/asset-edit-options.vue b/src/module/vue/components/asset/asset-edit-options.vue index e10ab0b98..84adad51c 100644 --- a/src/module/vue/components/asset/asset-edit-options.vue +++ b/src/module/vue/components/asset/asset-edit-options.vue @@ -1,32 +1,29 @@ diff --git a/src/module/vue/components/asset/asset-edit-track.vue b/src/module/vue/components/asset/asset-edit-track.vue index 2ad3d86f3..a44b8add2 100644 --- a/src/module/vue/components/asset/asset-edit-track.vue +++ b/src/module/vue/components/asset/asset-edit-track.vue @@ -1,65 +1,60 @@ diff --git a/src/module/vue/components/asset/asset-exclusiveoption.vue b/src/module/vue/components/asset/asset-exclusiveoption.vue index 0c0fb7230..ad6307cab 100644 --- a/src/module/vue/components/asset/asset-exclusiveoption.vue +++ b/src/module/vue/components/asset/asset-exclusiveoption.vue @@ -1,12 +1,11 @@ diff --git a/src/module/vue/components/asset/asset-overview.vue b/src/module/vue/components/asset/asset-overview.vue index 5d0d48d3f..36c702844 100644 --- a/src/module/vue/components/asset/asset-overview.vue +++ b/src/module/vue/components/asset/asset-overview.vue @@ -1,6 +1,6 @@ diff --git a/src/module/vue/components/asset/asset.vue b/src/module/vue/components/asset/asset.vue index 973df1c6d..503a9d669 100644 --- a/src/module/vue/components/asset/asset.vue +++ b/src/module/vue/components/asset/asset.vue @@ -1,127 +1,117 @@ diff --git a/src/module/vue/components/attr-box.vue b/src/module/vue/components/attr-box.vue index b632d4f25..21d7122d8 100644 --- a/src/module/vue/components/attr-box.vue +++ b/src/module/vue/components/attr-box.vue @@ -1,25 +1,24 @@ @@ -67,57 +66,57 @@ function decrement() { @import (reference) '../../../styles/mixins.less'; .label { - margin: 0; - font-size: var(--font-size-14); - font-weight: bold; - pointer-events: none; + margin: 0; + font-size: var(--font-size-14); + font-weight: bold; + pointer-events: none; } .value { - margin: 0; - font-size: var(--font-size-16); - font-weight: bold; + margin: 0; + font-size: var(--font-size-16); + font-weight: bold; } .box { - --ironsworn-color-text-stroke: var(--ironsworn-color-bg); - --ironsworn-attr-box-width: 75px; - - flex: 0 0 var(--ironsworn-attr-box-width); - border-width: var(--ironsworn-border-width-md); - border-style: solid; - border-radius: var(--ironsworn-border-radius-lg) !important; - padding: var(--ironsworn-spacer-lg) 0; - text-align: center; - text-transform: uppercase; - - &::before { - --ironsworn-color-bg-highlight: var(--ironsworn-color-fg); - - transition: opacity 0.4s ease; - opacity: 0; - z-index: 0; - padding: var(--ironsworn-spacer-sm); - } - - &:hover { - &::before { - opacity: 1; - } - } - - input { - margin-bottom: var(--ironsworn-spacer-md); - width: 50%; - text-align: center; - font-size: var(--font-size-18); - font-weight: bold; - } - - & > * { - position: relative; // must be set to manipulate z-index - z-index: 1; - } - .textStrokeMixin(); + --ironsworn-color-text-stroke: var(--ironsworn-color-bg); + --ironsworn-attr-box-width: 75px; + + flex: 0 0 var(--ironsworn-attr-box-width); + border-width: var(--ironsworn-border-width-md); + border-style: solid; + border-radius: var(--ironsworn-border-radius-lg) !important; + padding: var(--ironsworn-spacer-lg) 0; + text-align: center; + text-transform: uppercase; + + &::before { + --ironsworn-color-bg-highlight: var(--ironsworn-color-fg); + + transition: opacity 0.4s ease; + opacity: 0; + z-index: 0; + padding: var(--ironsworn-spacer-sm); + } + + &:hover { + &::before { + opacity: 1; + } + } + + input { + margin-bottom: var(--ironsworn-spacer-md); + width: 50%; + text-align: center; + font-size: var(--font-size-18); + font-weight: bold; + } + + & > * { + position: relative; // must be set to manipulate z-index + z-index: 1; + } + .textStrokeMixin(); } diff --git a/src/module/vue/components/bonds.vue b/src/module/vue/components/bonds.vue index 88b1d70be..095b01730 100644 --- a/src/module/vue/components/bonds.vue +++ b/src/module/vue/components/bonds.vue @@ -1,24 +1,23 @@ diff --git a/src/module/vue/components/boxrow/boxrow-box.vue b/src/module/vue/components/boxrow/boxrow-box.vue index 32cf48ecd..6a7ad3e35 100644 --- a/src/module/vue/components/boxrow/boxrow-box.vue +++ b/src/module/vue/components/boxrow/boxrow-box.vue @@ -1,11 +1,10 @@ diff --git a/src/module/vue/components/buttons/btn-compendium.vue b/src/module/vue/components/buttons/btn-compendium.vue index dc734bf98..fd168d687 100644 --- a/src/module/vue/components/buttons/btn-compendium.vue +++ b/src/module/vue/components/buttons/btn-compendium.vue @@ -1,15 +1,14 @@ diff --git a/src/module/vue/components/buttons/btn-momentumburn.vue b/src/module/vue/components/buttons/btn-momentumburn.vue index 1776ee120..e8214fffa 100644 --- a/src/module/vue/components/buttons/btn-momentumburn.vue +++ b/src/module/vue/components/buttons/btn-momentumburn.vue @@ -1,20 +1,19 @@ diff --git a/src/module/vue/components/buttons/btn-rollmove.vue b/src/module/vue/components/buttons/btn-rollmove.vue index 1665797dd..d13c7c42f 100644 --- a/src/module/vue/components/buttons/btn-rollmove.vue +++ b/src/module/vue/components/buttons/btn-rollmove.vue @@ -1,24 +1,23 @@ diff --git a/src/module/vue/components/buttons/btn-rollprogress.vue b/src/module/vue/components/buttons/btn-rollprogress.vue index 089511e44..a6db17d48 100644 --- a/src/module/vue/components/buttons/btn-rollprogress.vue +++ b/src/module/vue/components/buttons/btn-rollprogress.vue @@ -1,25 +1,24 @@ diff --git a/src/module/vue/components/buttons/btn-rollstat.vue b/src/module/vue/components/buttons/btn-rollstat.vue index e49f0794a..2e41c1b65 100644 --- a/src/module/vue/components/buttons/btn-rollstat.vue +++ b/src/module/vue/components/buttons/btn-rollstat.vue @@ -1,21 +1,20 @@ diff --git a/src/module/vue/components/buttons/btn-sendmovetochat.vue b/src/module/vue/components/buttons/btn-sendmovetochat.vue index ba2889006..dcb6dd4c2 100644 --- a/src/module/vue/components/buttons/btn-sendmovetochat.vue +++ b/src/module/vue/components/buttons/btn-sendmovetochat.vue @@ -1,19 +1,18 @@ diff --git a/src/module/vue/components/buttons/iron-btn.vue b/src/module/vue/components/buttons/iron-btn.vue index 042b95391..e71780797 100644 --- a/src/module/vue/components/buttons/iron-btn.vue +++ b/src/module/vue/components/buttons/iron-btn.vue @@ -1,48 +1,45 @@ @@ -142,90 +139,90 @@ defineExpose({ .flexStart, .flexCenter, .flexEnd { - align-content: center; - align-items: center; + align-content: center; + align-items: center; } .flexStart { - justify-content: start; - justify-items: start; + justify-content: start; + justify-items: start; } .flexCenter { - justify-content: center; - justify-items: center; + justify-content: center; + justify-items: center; } .flexEnd { - justify-content: end; - justify-items: end; + justify-content: end; + justify-items: end; } .btn { - display: flex; - flex-wrap: nowrap; - gap: var(--ironsworn-spacer-sm); - margin: 0; - border-width: 0; - border-radius: 0; - padding: var(--ironsworn-spacer-xs); - width: v-bind(width); - height: v-bind(height); - color: inherit; - - & > svg { - // prevents double hover effect on svg hover - pointer-events: none; - } - - &:local(.vertical) { - writing-mode: initial !important; // prevents this fix from breaking the button layout in FF - flex-direction: column; - line-height: 1.25; - } - - .text { - display: inline; - border-width: 0; - - strong { - white-space: nowrap; - } - - &:local(.vertical) { - .vertical-text(); - - display: inherit; - width: max-content; - line-height: inherit; - writing-mode: vertical-lr !important; - } - } + display: flex; + flex-wrap: nowrap; + gap: var(--ironsworn-spacer-sm); + margin: 0; + border-width: 0; + border-radius: 0; + padding: var(--ironsworn-spacer-xs); + width: v-bind(width); + height: v-bind(height); + color: inherit; + + & > svg { + // prevents double hover effect on svg hover + pointer-events: none; + } + + &:local(.vertical) { + writing-mode: initial !important; // prevents this fix from breaking the button layout in FF + flex-direction: column; + line-height: 1.25; + } + + .text { + display: inline; + border-width: 0; + + strong { + white-space: nowrap; + } + + &:local(.vertical) { + .vertical-text(); + + display: inherit; + width: max-content; + line-height: inherit; + writing-mode: vertical-lr !important; + } + } } .iconOnly { - box-sizing: content-box; - flex-direction: row; - align-content: center; - justify-content: center; - padding: var(--ironsworn-spacer-xs); - width: 1em; - height: 1em; - line-height: 1; - aspect-ratio: 1; + box-sizing: content-box; + flex-direction: row; + align-content: center; + justify-content: center; + padding: var(--ironsworn-spacer-xs); + width: 1em; + height: 1em; + line-height: 1; + aspect-ratio: 1; } .noBlock { - .clickableTextMixin(); + .clickableTextMixin(); - line-height: var(--ironsworn-line-height); + line-height: var(--ironsworn-line-height); } .block { - .clickableBlockMixin(); + .clickableBlockMixin(); - &:hover:not(:focus) { - box-shadow: none; - } + &:hover:not(:focus) { + box-shadow: none; + } } diff --git a/src/module/vue/components/character-header.vue b/src/module/vue/components/character-header.vue index d007c55bc..979af9b96 100644 --- a/src/module/vue/components/character-header.vue +++ b/src/module/vue/components/character-header.vue @@ -1,26 +1,24 @@ diff --git a/src/module/vue/components/character-sheet-tabs/ironsworn-main.vue b/src/module/vue/components/character-sheet-tabs/ironsworn-main.vue index b19fdc596..527fe6697 100644 --- a/src/module/vue/components/character-sheet-tabs/ironsworn-main.vue +++ b/src/module/vue/components/character-sheet-tabs/ironsworn-main.vue @@ -1,57 +1,52 @@ diff --git a/src/module/vue/components/character-sheet-tabs/ironsworn-notes.vue b/src/module/vue/components/character-sheet-tabs/ironsworn-notes.vue index ae5ca7ab9..e38eba9c0 100644 --- a/src/module/vue/components/character-sheet-tabs/ironsworn-notes.vue +++ b/src/module/vue/components/character-sheet-tabs/ironsworn-notes.vue @@ -1,9 +1,9 @@ diff --git a/src/module/vue/components/character-sheet-tabs/sf-assets.vue b/src/module/vue/components/character-sheet-tabs/sf-assets.vue index f89cbc38a..5fd561dc9 100644 --- a/src/module/vue/components/character-sheet-tabs/sf-assets.vue +++ b/src/module/vue/components/character-sheet-tabs/sf-assets.vue @@ -1,40 +1,36 @@ diff --git a/src/module/vue/components/character-sheet-tabs/sf-connections.vue b/src/module/vue/components/character-sheet-tabs/sf-connections.vue index 9c04912ae..a3affaced 100644 --- a/src/module/vue/components/character-sheet-tabs/sf-connections.vue +++ b/src/module/vue/components/character-sheet-tabs/sf-connections.vue @@ -1,20 +1,18 @@ diff --git a/src/module/vue/components/character-sheet-tabs/sf-legacies.vue b/src/module/vue/components/character-sheet-tabs/sf-legacies.vue index 7d1e4ef95..1d1132cb5 100644 --- a/src/module/vue/components/character-sheet-tabs/sf-legacies.vue +++ b/src/module/vue/components/character-sheet-tabs/sf-legacies.vue @@ -1,32 +1,29 @@ diff --git a/src/module/vue/components/character-sheet-tabs/sf-notes.vue b/src/module/vue/components/character-sheet-tabs/sf-notes.vue index 3ea5706df..7f0659e01 100644 --- a/src/module/vue/components/character-sheet-tabs/sf-notes.vue +++ b/src/module/vue/components/character-sheet-tabs/sf-notes.vue @@ -1,11 +1,11 @@ diff --git a/src/module/vue/components/character-sheet-tabs/sf-progresses.vue b/src/module/vue/components/character-sheet-tabs/sf-progresses.vue index d5123a295..67c454e39 100644 --- a/src/module/vue/components/character-sheet-tabs/sf-progresses.vue +++ b/src/module/vue/components/character-sheet-tabs/sf-progresses.vue @@ -1,8 +1,7 @@ diff --git a/src/module/vue/components/collapsible/collapsible-helpers.ts b/src/module/vue/components/collapsible/collapsible-helpers.ts index 55d1586e3..312c85649 100644 --- a/src/module/vue/components/collapsible/collapsible-helpers.ts +++ b/src/module/vue/components/collapsible/collapsible-helpers.ts @@ -1,10 +1,10 @@ export type ExpandEvent = ( - expandedElement?: HTMLElement, - triggerElement?: HTMLElement, - collapsibleComponent?: HTMLElement + expandedElement?: HTMLElement, + triggerElement?: HTMLElement, + collapsibleComponent?: HTMLElement ) => void export type CollapseEvent = ( - collapsedElement?: HTMLElement, - triggerElement?: HTMLElement, - collapsibleElement?: HTMLElement + collapsedElement?: HTMLElement, + triggerElement?: HTMLElement, + collapsibleElement?: HTMLElement ) => void diff --git a/src/module/vue/components/collapsible/collapsible.vue b/src/module/vue/components/collapsible/collapsible.vue index 6db69d2f5..20d100add 100644 --- a/src/module/vue/components/collapsible/collapsible.vue +++ b/src/module/vue/components/collapsible/collapsible.vue @@ -1,83 +1,76 @@ diff --git a/src/module/vue/components/compact-character-sheet-button.vue b/src/module/vue/components/compact-character-sheet-button.vue index 6ba85815d..65cff75fa 100644 --- a/src/module/vue/components/compact-character-sheet-button.vue +++ b/src/module/vue/components/compact-character-sheet-button.vue @@ -1,25 +1,23 @@ @@ -70,37 +68,37 @@ function click() { @import (reference) '../../../styles/mixins.less'; .interactive { - cursor: pointer; - .interactiveMixin(); + cursor: pointer; + .interactiveMixin(); - &::before { - --ironsworn-color-bg-highlight: var(--ironsworn-color-fg); + &::before { + --ironsworn-color-bg-highlight: var(--ironsworn-color-fg); - transition: all 0.4s ease; - opacity: 0; - z-index: 0; - padding: var(--ironsworn-spacer-sm); - } + transition: all 0.4s ease; + opacity: 0; + z-index: 0; + padding: var(--ironsworn-spacer-sm); + } - &:hover { - background-color: var(--ironsworn-color-clickable-block-bg-hover); + &:hover { + background-color: var(--ironsworn-color-clickable-block-bg-hover); - &::before { - opacity: 1; - background-color: var(--ironsworn-color-fg); - } - } + &::before { + opacity: 1; + background-color: var(--ironsworn-color-fg); + } + } } .wrapper { - --ironsworn-color-text-stroke: var(--ironsworn-color-bg); - .textStrokeMixin(); + --ironsworn-color-text-stroke: var(--ironsworn-color-bg); + .textStrokeMixin(); - h4 { - margin: 0; - padding: var(--ironsworn-spacer-sm) 0; - text-transform: uppercase; - font-weight: bold; - } + h4 { + margin: 0; + padding: var(--ironsworn-spacer-sm) 0; + text-transform: uppercase; + font-weight: bold; + } } diff --git a/src/module/vue/components/completed-progress-list.vue b/src/module/vue/components/completed-progress-list.vue index 04e3f4b0c..1e19b587c 100644 --- a/src/module/vue/components/completed-progress-list.vue +++ b/src/module/vue/components/completed-progress-list.vue @@ -1,40 +1,38 @@ diff --git a/src/module/vue/components/conditions/condition-checkbox.vue b/src/module/vue/components/conditions/condition-checkbox.vue index 9b6791f66..126c8c57a 100644 --- a/src/module/vue/components/conditions/condition-checkbox.vue +++ b/src/module/vue/components/conditions/condition-checkbox.vue @@ -1,20 +1,18 @@ diff --git a/src/module/vue/components/conditions/conditions.vue b/src/module/vue/components/conditions/conditions.vue index 2a792b631..bdc5b6982 100644 --- a/src/module/vue/components/conditions/conditions.vue +++ b/src/module/vue/components/conditions/conditions.vue @@ -1,28 +1,26 @@ diff --git a/src/module/vue/components/document-img.vue b/src/module/vue/components/document-img.vue index 7990c34bd..4b93f5559 100644 --- a/src/module/vue/components/document-img.vue +++ b/src/module/vue/components/document-img.vue @@ -1,53 +1,52 @@ diff --git a/src/module/vue/components/document-name.vue b/src/module/vue/components/document-name.vue index b6a0024ce..f050623a8 100644 --- a/src/module/vue/components/document-name.vue +++ b/src/module/vue/components/document-name.vue @@ -1,13 +1,12 @@ diff --git a/src/module/vue/components/foe-sheet.vue b/src/module/vue/components/foe-sheet.vue index 67c376bc2..b5db7a349 100644 --- a/src/module/vue/components/foe-sheet.vue +++ b/src/module/vue/components/foe-sheet.vue @@ -1,45 +1,40 @@ diff --git a/src/module/vue/components/icon/font-icon-stack.vue b/src/module/vue/components/icon/font-icon-stack.vue index fdca4795a..f66ad1073 100644 --- a/src/module/vue/components/icon/font-icon-stack.vue +++ b/src/module/vue/components/icon/font-icon-stack.vue @@ -1,16 +1,15 @@ diff --git a/src/module/vue/components/loading-spinner.vue b/src/module/vue/components/loading-spinner.vue index 1c1105b57..8b1a945f8 100644 --- a/src/module/vue/components/loading-spinner.vue +++ b/src/module/vue/components/loading-spinner.vue @@ -1,5 +1,5 @@ diff --git a/src/module/vue/components/oracle-tree-node.vue b/src/module/vue/components/oracle-tree-node.vue index 703940ca0..4bfad87b4 100644 --- a/src/module/vue/components/oracle-tree-node.vue +++ b/src/module/vue/components/oracle-tree-node.vue @@ -1,73 +1,67 @@ diff --git a/src/module/vue/components/order-buttons.vue b/src/module/vue/components/order-buttons.vue index 0c3da70f0..f6ef8c6ad 100644 --- a/src/module/vue/components/order-buttons.vue +++ b/src/module/vue/components/order-buttons.vue @@ -1,21 +1,19 @@ diff --git a/src/module/vue/components/progress-item-detail.vue b/src/module/vue/components/progress-item-detail.vue index c0e1d0271..a7fa590ae 100644 --- a/src/module/vue/components/progress-item-detail.vue +++ b/src/module/vue/components/progress-item-detail.vue @@ -1,35 +1,32 @@ diff --git a/src/module/vue/components/progress-list.vue b/src/module/vue/components/progress-list.vue index aa2c24ca3..7f5ca2cf4 100644 --- a/src/module/vue/components/progress-list.vue +++ b/src/module/vue/components/progress-list.vue @@ -1,31 +1,28 @@ diff --git a/src/module/vue/components/progress/progress-list-item.vue b/src/module/vue/components/progress/progress-list-item.vue index 3ca76a2f7..460afe130 100644 --- a/src/module/vue/components/progress/progress-list-item.vue +++ b/src/module/vue/components/progress/progress-list-item.vue @@ -1,93 +1,83 @@ @@ -182,70 +172,70 @@ function setClock(clockTicks: number) { @progress_widget_spacing: 6px; .progress-list-item { - --ironsworn-clock-size: 50px; - - display: grid; - grid-template-rows: max-content max-content 1fr; - grid-template-columns: max-content max-content 1fr max-content; - gap: @progress_widget_spacing; - padding: (@progress_widget_spacing / 2) (@progress_widget_spacing / 2) - @progress_widget_spacing; - - .progress-img { - grid-row: 1 / span 2; - grid-column: 2; - margin: 0; - } - - .progress-rank-pips { - grid-row: 1; - grid-column: 3 / span 2; - } - - .progress-title { - grid-row: 2; - grid-column: 3; - margin: 0; - height: max-content; - line-height: 1; - } - - .progress-subtitle { - grid-row: 1 / span 3; - grid-column: 1; - margin: 0; - padding: 0; - width: max-content; - text-transform: uppercase; - line-height: 1; - color: var(--ironsworn-color-fg-muted); - font-weight: normal; - } - - .progress-widgets { - grid-row: 3; - grid-column: 2 / span 3; - gap: var(--ironsworn-spacer-xs); - - .progress-clock { - flex-basis: var(--ironsworn-clock-size); - } - } - - .progress-controls { - display: grid; - grid-row: 1 / span 2; - grid-column: 4; - grid-auto-flow: column; - - > * { - aspect-ratio: 1; - grid-row: 1; - } - - .star-progress { - grid-row: 2; - } - } + --ironsworn-clock-size: 50px; + + display: grid; + grid-template-rows: max-content max-content 1fr; + grid-template-columns: max-content max-content 1fr max-content; + gap: @progress_widget_spacing; + padding: (@progress_widget_spacing / 2) (@progress_widget_spacing / 2) + @progress_widget_spacing; + + .progress-img { + grid-row: 1 / span 2; + grid-column: 2; + margin: 0; + } + + .progress-rank-pips { + grid-row: 1; + grid-column: 3 / span 2; + } + + .progress-title { + grid-row: 2; + grid-column: 3; + margin: 0; + height: max-content; + line-height: 1; + } + + .progress-subtitle { + grid-row: 1 / span 3; + grid-column: 1; + margin: 0; + padding: 0; + width: max-content; + text-transform: uppercase; + line-height: 1; + color: var(--ironsworn-color-fg-muted); + font-weight: normal; + } + + .progress-widgets { + grid-row: 3; + grid-column: 2 / span 3; + gap: var(--ironsworn-spacer-xs); + + .progress-clock { + flex-basis: var(--ironsworn-clock-size); + } + } + + .progress-controls { + display: grid; + grid-row: 1 / span 2; + grid-column: 4; + grid-auto-flow: column; + + > * { + aspect-ratio: 1; + grid-row: 1; + } + + .star-progress { + grid-row: 2; + } + } } diff --git a/src/module/vue/components/progress/progress-track-box.vue b/src/module/vue/components/progress/progress-track-box.vue index adc451a44..dae36b479 100644 --- a/src/module/vue/components/progress/progress-track-box.vue +++ b/src/module/vue/components/progress/progress-track-box.vue @@ -1,42 +1,38 @@ diff --git a/src/module/vue/components/progress/progress-track.vue b/src/module/vue/components/progress/progress-track.vue index c0cd54928..880e77e7e 100644 --- a/src/module/vue/components/progress/progress-track.vue +++ b/src/module/vue/components/progress/progress-track.vue @@ -1,54 +1,52 @@ @@ -85,65 +83,65 @@ const boxes = computed(() => { @import (reference) '../../../../styles/mixins.less'; .progress-track { - --ironsworn-progress-box-border-radius: var(--ironsworn-border-radius-md); - --ironsworn-progress-box-border-width: var(--ironsworn-border-width-md); - // TODO: replace this with a 4px variable when available - --ironsworn-progress-box-gap: 4px; - --ironsworn-progress-box-max-size: 50px; - - display: grid; - grid-template-columns: repeat(10, 1fr); - grid-auto-flow: column; - gap: var(--ironsworn-progress-box-gap); - align-items: center; - justify-content: center; - - &:focus { - .focusOutlineMixin(); - } - - .progress-track-box { - border-radius: var(--ironsworn-border-radius-md); - max-width: var(--ironsworn-progress-box-max-size); - max-height: var(--ironsworn-progress-box-max-size); - } - - &.compact-progress { - --ironsworn-progress-box-gap: 0; - - display: flex; - flex-flow: row nowrap; - - .progress-track-box { - flex-basis: 10%; - margin: 0; - border: var(--ironsworn-progress-box-border-width) solid currentcolor; - border-radius: 0; - - &:first-child { - border-radius: var(--ironsworn-progress-box-border-radius) 0 0 - var(--ironsworn-progress-box-border-radius); - } - - &:not(:first-child) { - margin-left: calc(var(--ironsworn-progress-box-border-width) / -2); - } - - &:last-child { - border-radius: 0 var(--ironsworn-progress-box-border-radius) - var(--ironsworn-progress-box-border-radius) 0; - } - - &:not(:last-child) { - margin-right: calc(var(--ironsworn-progress-box-border-width) / -2); - } - - .progress-tick { - // sets absolute width so compact progress doesn't totally disappear when displayed in the compact format - vector-effect: non-scaling-stroke; - stroke-width: var(--ironsworn-border-width-md); - } - } - } + --ironsworn-progress-box-border-radius: var(--ironsworn-border-radius-md); + --ironsworn-progress-box-border-width: var(--ironsworn-border-width-md); + // TODO: replace this with a 4px variable when available + --ironsworn-progress-box-gap: 4px; + --ironsworn-progress-box-max-size: 50px; + + display: grid; + grid-template-columns: repeat(10, 1fr); + grid-auto-flow: column; + gap: var(--ironsworn-progress-box-gap); + align-items: center; + justify-content: center; + + &:focus { + .focusOutlineMixin(); + } + + .progress-track-box { + border-radius: var(--ironsworn-border-radius-md); + max-width: var(--ironsworn-progress-box-max-size); + max-height: var(--ironsworn-progress-box-max-size); + } + + &.compact-progress { + --ironsworn-progress-box-gap: 0; + + display: flex; + flex-flow: row nowrap; + + .progress-track-box { + flex-basis: 10%; + margin: 0; + border: var(--ironsworn-progress-box-border-width) solid currentcolor; + border-radius: 0; + + &:first-child { + border-radius: var(--ironsworn-progress-box-border-radius) 0 0 + var(--ironsworn-progress-box-border-radius); + } + + &:not(:first-child) { + margin-left: calc(var(--ironsworn-progress-box-border-width) / -2); + } + + &:last-child { + border-radius: 0 var(--ironsworn-progress-box-border-radius) + var(--ironsworn-progress-box-border-radius) 0; + } + + &:not(:last-child) { + margin-right: calc(var(--ironsworn-progress-box-border-width) / -2); + } + + .progress-tick { + // sets absolute width so compact progress doesn't totally disappear when displayed in the compact format + vector-effect: non-scaling-stroke; + stroke-width: var(--ironsworn-border-width-md); + } + } + } } diff --git a/src/module/vue/components/rank-pips/pip-svg-circle.vue b/src/module/vue/components/rank-pips/pip-svg-circle.vue index 45c3b1ec0..2109b660e 100644 --- a/src/module/vue/components/rank-pips/pip-svg-circle.vue +++ b/src/module/vue/components/rank-pips/pip-svg-circle.vue @@ -1,10 +1,9 @@ diff --git a/src/module/vue/components/rank-pips/pip-svg-hex.vue b/src/module/vue/components/rank-pips/pip-svg-hex.vue index 5bda696c9..976f447fd 100644 --- a/src/module/vue/components/rank-pips/pip-svg-hex.vue +++ b/src/module/vue/components/rank-pips/pip-svg-hex.vue @@ -1,15 +1,13 @@ diff --git a/src/module/vue/components/rank-pips/rank-pips.vue b/src/module/vue/components/rank-pips/rank-pips.vue index 8e11aa9cd..8b298722a 100644 --- a/src/module/vue/components/rank-pips/rank-pips.vue +++ b/src/module/vue/components/rank-pips/rank-pips.vue @@ -1,31 +1,27 @@ @@ -101,60 +98,60 @@ async function onChange(newValue: number) { @segment_border_radius: var(--ironsworn-border-radius-lg); .attr-slider { - &[aria-orientation='vertical'] { - display: grid; - grid-template-rows: max-content max-content max-content; - grid-template-columns: max-content max-content; - grid-auto-flow: column; - place-items: start; - - .attr-slider-label { - grid-row: 1; - max-height: 50%; - } - - .attr-slider-bar { - grid-row: 1; - } - - &.label-none { - display: flex; - } - - &.label-left { - .attr-slider-label { - grid-column: 1; - } - } - - &.label-right { - .attr-slider-label { - grid-column: 2; - } - } - } - - &[aria-orientation='horizontal'] { - display: flex; - flex-flow: row wrap; - justify-items: space-between; - - .attr-slider-label { - > * { - padding-inline-end: @segment_border_radius; - } - } - } - - .attr-slider-label { - display: flex; - align-items: center; - text-transform: uppercase; - line-height: 1; - - > * { - text-transform: inherit; - } - } + &[aria-orientation='vertical'] { + display: grid; + grid-template-rows: max-content max-content max-content; + grid-template-columns: max-content max-content; + grid-auto-flow: column; + place-items: start; + + .attr-slider-label { + grid-row: 1; + max-height: 50%; + } + + .attr-slider-bar { + grid-row: 1; + } + + &.label-none { + display: flex; + } + + &.label-left { + .attr-slider-label { + grid-column: 1; + } + } + + &.label-right { + .attr-slider-label { + grid-column: 2; + } + } + } + + &[aria-orientation='horizontal'] { + display: flex; + flex-flow: row wrap; + justify-items: space-between; + + .attr-slider-label { + > * { + padding-inline-end: @segment_border_radius; + } + } + } + + .attr-slider-label { + display: flex; + align-items: center; + text-transform: uppercase; + line-height: 1; + + > * { + text-transform: inherit; + } + } } diff --git a/src/module/vue/components/resource-meter/condition-meter.vue b/src/module/vue/components/resource-meter/condition-meter.vue index 18e9856db..b8317fbd8 100644 --- a/src/module/vue/components/resource-meter/condition-meter.vue +++ b/src/module/vue/components/resource-meter/condition-meter.vue @@ -1,28 +1,26 @@ diff --git a/src/module/vue/components/resource-meter/momentum-meter.vue b/src/module/vue/components/resource-meter/momentum-meter.vue index b79d8a9c0..90d994c26 100644 --- a/src/module/vue/components/resource-meter/momentum-meter.vue +++ b/src/module/vue/components/resource-meter/momentum-meter.vue @@ -1,41 +1,39 @@ @@ -62,16 +60,16 @@ const actorSys = computed( @import (reference) '../../../../styles/mixins.less'; .momentum-meter { - gap: var(--ironsworn-spacer-md) 0; + gap: var(--ironsworn-spacer-md) 0; - .attr-slider-label:hover ~ .slider-bar { - .segment-momentum-reset { - .blockHoverMixin(); + .attr-slider-label:hover ~ .slider-bar { + .segment-momentum-reset { + .blockHoverMixin(); - box-shadow: 0 0 5px var(--ironsworn-color-warm) inset, - 0 0 5px var(--ironsworn-color-warm), - 0 0 10px var(--ironsworn-color-cool); - } - } + box-shadow: 0 0 5px var(--ironsworn-color-warm) inset, + 0 0 5px var(--ironsworn-color-warm), + 0 0 10px var(--ironsworn-color-cool); + } + } } diff --git a/src/module/vue/components/resource-meter/pc-condition-meters.vue b/src/module/vue/components/resource-meter/pc-condition-meters.vue index e16c29090..a11f2b8ac 100644 --- a/src/module/vue/components/resource-meter/pc-condition-meters.vue +++ b/src/module/vue/components/resource-meter/pc-condition-meters.vue @@ -1,20 +1,19 @@ diff --git a/src/module/vue/components/resource-meter/slider-bar.vue b/src/module/vue/components/resource-meter/slider-bar.vue index 5e06f2e30..d1efe3e38 100644 --- a/src/module/vue/components/resource-meter/slider-bar.vue +++ b/src/module/vue/components/resource-meter/slider-bar.vue @@ -1,51 +1,49 @@ diff --git a/src/module/vue/components/rules-text/rules-source-info.vue b/src/module/vue/components/rules-text/rules-source-info.vue index 5c619a5de..515b0255c 100644 --- a/src/module/vue/components/rules-text/rules-source-info.vue +++ b/src/module/vue/components/rules-text/rules-source-info.vue @@ -1,13 +1,13 @@ diff --git a/src/module/vue/components/rules-text/rules-text-move.vue b/src/module/vue/components/rules-text/rules-text-move.vue index 4312b3b8e..05043126a 100644 --- a/src/module/vue/components/rules-text/rules-text-move.vue +++ b/src/module/vue/components/rules-text/rules-text-move.vue @@ -1,27 +1,26 @@ diff --git a/src/module/vue/components/rules-text/rules-text-oracle.vue b/src/module/vue/components/rules-text/rules-text-oracle.vue index cd00d16c7..150f193ea 100644 --- a/src/module/vue/components/rules-text/rules-text-oracle.vue +++ b/src/module/vue/components/rules-text/rules-text-oracle.vue @@ -1,18 +1,18 @@ @@ -61,40 +61,40 @@ const enrichedText = computed(() => { @import (reference) '../../../../styles/mixins.less'; .rules-text { - --ironsworn-rules-text-spacer: 0.5em; + --ironsworn-rules-text-spacer: 0.5em; - display: flex; - flex-direction: column; - gap: var(--ironsworn-rules-text-spacer); + display: flex; + flex-direction: column; + gap: var(--ironsworn-rules-text-spacer); } .rules-text-main { - display: flex; - flex-direction: column; - gap: var(--ironsworn-rules-text-spacer); + display: flex; + flex-direction: column; + gap: var(--ironsworn-rules-text-spacer); - p { - &:first-of-type { - margin-top: 0; - } + p { + &:first-of-type { + margin-top: 0; + } - &:last-of-type:not(:last-child) { - margin-bottom: 0; - } - } + &:last-of-type:not(:last-child) { + margin-bottom: 0; + } + } - & > * { - margin: 0; - } - .textCompactMixin(); + & > * { + margin: 0; + } + .textCompactMixin(); } .rules-text-footer { - text-align: right; + text-align: right; } .rules-source-info { - opacity: 0.5; - font-size: small; + opacity: 0.5; + font-size: small; } diff --git a/src/module/vue/components/sf-characterheader.vue b/src/module/vue/components/sf-characterheader.vue index b30e36c37..cb6791d0c 100644 --- a/src/module/vue/components/sf-characterheader.vue +++ b/src/module/vue/components/sf-characterheader.vue @@ -1,43 +1,39 @@ + - - diff --git a/src/module/vue/components/asset/asset-old.vue b/src/module/vue/components/asset/asset-old.vue index dbae05034..925415fda 100644 --- a/src/module/vue/components/asset/asset-old.vue +++ b/src/module/vue/components/asset/asset-old.vue @@ -9,9 +9,9 @@