03.09.01 — mod_custom hero override, palette starter files, updated descriptions #84

Merged
jmiller-moko merged 17 commits from dev/03.09.01 into main 2026-03-24 21:48:07 +00:00
3 changed files with 119 additions and 0 deletions
Showing only changes of commit 079c4f4a5a - Show all commits

View File

@@ -169,6 +169,57 @@ TPL_MOKOCASSIOPEIA_CSS_VARS_BUTTONS_DESC="Applied on <code>:root</code> for glob
TPL_MOKOCASSIOPEIA_CSS_VARS_CARDS_LABEL="Cards" TPL_MOKOCASSIOPEIA_CSS_VARS_CARDS_LABEL="Cards"
TPL_MOKOCASSIOPEIA_CSS_VARS_CARDS_DESC="<code>--card-spacer-y</code> / <code>--card-spacer-x</code> — Body padding (default: <code>1rem</code>)<br><code>--card-title-spacer-y</code> — Title bottom margin (default: <code>0.5rem</code>)<br><code>--card-border-width</code> — Border width (default: <code>1px</code>)<br><code>--card-border-color</code> — Border colour<br><code>--card-border-radius</code> — Border radius<br><code>--card-box-shadow</code> — Card shadow (default: <code>none</code>)<br><code>--card-cap-padding-y</code> / <code>--card-cap-padding-x</code> — Header/footer padding<br><code>--card-cap-bg</code> — Header/footer background<br><code>--card-cap-color</code> — Header/footer text colour<br><code>--card-color</code> — Body text colour<br><code>--card-bg</code> — Card background" TPL_MOKOCASSIOPEIA_CSS_VARS_CARDS_DESC="<code>--card-spacer-y</code> / <code>--card-spacer-x</code> — Body padding (default: <code>1rem</code>)<br><code>--card-title-spacer-y</code> — Title bottom margin (default: <code>0.5rem</code>)<br><code>--card-border-width</code> — Border width (default: <code>1px</code>)<br><code>--card-border-color</code> — Border colour<br><code>--card-border-radius</code> — Border radius<br><code>--card-box-shadow</code> — Card shadow (default: <code>none</code>)<br><code>--card-cap-padding-y</code> / <code>--card-cap-padding-x</code> — Header/footer padding<br><code>--card-cap-bg</code> — Header/footer background<br><code>--card-cap-color</code> — Header/footer text colour<br><code>--card-color</code> — Body text colour<br><code>--card-bg</code> — Card background"
TPL_MOKOCASSIOPEIA_CSS_VARS_ACCORDION_LABEL="Accordion"
TPL_MOKOCASSIOPEIA_CSS_VARS_ACCORDION_DESC="<strong>Colours</strong><br><code>--accordion-color</code> — Panel text colour<br><code>--accordion-bg</code> — Panel background<br><code>--accordion-border-color</code> — Border colour<br><code>--accordion-btn-color</code> — Button text colour<br><code>--accordion-btn-bg</code> — Button background<br><code>--accordion-btn-focus-border-color</code> — Button focus border colour<br><code>--accordion-btn-focus-box-shadow</code> — Button focus ring<br><code>--accordion-active-color</code> — Active item text colour<br><code>--accordion-active-bg</code> — Active item background<br><br><strong>Dimensions</strong><br><code>--accordion-border-width</code> — Border width<br><code>--accordion-border-radius</code> — Outer border radius<br><code>--accordion-inner-border-radius</code> — Inner border radius<br><code>--accordion-btn-padding-x</code> / <code>--accordion-btn-padding-y</code> — Button padding<br><code>--accordion-body-padding-x</code> / <code>--accordion-body-padding-y</code> — Body padding<br><br><strong>Icon &amp; Animation</strong><br><code>--accordion-btn-icon</code> — Collapse icon (collapsed state)<br><code>--accordion-btn-icon-width</code> — Icon size<br><code>--accordion-btn-icon-transform</code> — Icon rotation when expanded<br><code>--accordion-btn-icon-transition</code> — Icon rotation transition<br><code>--accordion-btn-active-icon</code> — Icon (expanded state)<br><code>--accordion-transition</code> — Panel open/close transition<br><br><strong>Stacking</strong><br><code>--accordion-zindex</code> — z-index"
TPL_MOKOCASSIOPEIA_CSS_VARS_ALERT_BASE_LABEL="Alert (Base)"
TPL_MOKOCASSIOPEIA_CSS_VARS_ALERT_BASE_DESC="<strong>Colours</strong><br><code>--alert-color</code> — Alert text colour<br><code>--alert-bg</code> — Alert background<br><code>--alert-border-color</code> — Border colour<br><code>--alert-border</code> — Full border shorthand<br><br><strong>Dimensions</strong><br><code>--alert-padding-x</code> / <code>--alert-padding-y</code> — Inner padding<br><code>--alert-margin-bottom</code> — Bottom margin<br><code>--alert-border-radius</code> — Border radius<br><br><em>Note: per-variant contextual tokens (colours, backgrounds, borders) are covered in the Bootstrap State Colours section above.</em>"
TPL_MOKOCASSIOPEIA_CSS_VARS_BADGE_LABEL="Badge"
TPL_MOKOCASSIOPEIA_CSS_VARS_BADGE_DESC="<strong>Colours</strong><br><code>--badge-color</code> — Badge text colour<br><br><strong>Typography</strong><br><code>--badge-font-size</code> — Font size<br><code>--badge-font-weight</code> — Font weight<br><br><strong>Dimensions</strong><br><code>--badge-padding-x</code> / <code>--badge-padding-y</code> — Padding<br><code>--badge-border-radius</code> — Border radius"
TPL_MOKOCASSIOPEIA_CSS_VARS_BACKDROP_LABEL="Backdrop"
TPL_MOKOCASSIOPEIA_CSS_VARS_BACKDROP_DESC="<strong>Colours</strong><br><code>--backdrop-bg</code> — Backdrop colour (default: <code>#000</code>)<br><code>--backdrop-opacity</code> — Backdrop opacity (default: <code>0.5</code>)<br><br><strong>Stacking</strong><br><code>--backdrop-zindex</code> — z-index (default: <code>1040</code>)"
TPL_MOKOCASSIOPEIA_CSS_VARS_BREADCRUMB_LABEL="Breadcrumb"
TPL_MOKOCASSIOPEIA_CSS_VARS_BREADCRUMB_DESC="<strong>Colours</strong><br><code>--breadcrumb-bg</code> — Background colour<br><code>--breadcrumb-divider-color</code> — Divider colour<br><code>--breadcrumb-item-active-color</code> — Active item colour<br><br><strong>Dimensions</strong><br><code>--breadcrumb-padding-x</code> / <code>--breadcrumb-padding-y</code> — Container padding<br><code>--breadcrumb-margin-bottom</code> — Bottom margin<br><code>--breadcrumb-item-padding-x</code> — Spacing between items<br><code>--breadcrumb-border-radius</code> — Container border radius"
TPL_MOKOCASSIOPEIA_CSS_VARS_DROPDOWN_MENU_LABEL="Dropdown Menu"
TPL_MOKOCASSIOPEIA_CSS_VARS_DROPDOWN_MENU_DESC="<strong>Colours</strong><br><code>--dropdown-color</code> — Default text colour<br><code>--dropdown-bg</code> — Menu background<br><code>--dropdown-border-color</code> — Border colour<br><code>--dropdown-divider-bg</code> — Divider colour<br><code>--dropdown-box-shadow</code> — Menu shadow<br><code>--dropdown-link-color</code> — Link text colour<br><code>--dropdown-link-active-color</code> — Active link text colour<br><code>--dropdown-link-active-bg</code> — Active link background<br><code>--dropdown-link-disabled-color</code> — Disabled link colour<br><code>--dropdown-header-color</code> — Header text colour<br><br><strong>Dimensions</strong><br><code>--dropdown-min-width</code> — Minimum width<br><code>--dropdown-padding-x</code> / <code>--dropdown-padding-y</code> — Menu padding<br><code>--dropdown-spacer</code> — Gap from toggle<br><code>--dropdown-border-width</code> — Border width<br><code>--dropdown-border-radius</code> — Outer border radius<br><code>--dropdown-inner-border-radius</code> — Inner border radius<br><code>--dropdown-divider-margin-y</code> — Divider vertical margin<br><code>--dropdown-item-padding-x</code> / <code>--dropdown-item-padding-y</code> — Item padding<br><code>--dropdown-header-padding-x</code> / <code>--dropdown-header-padding-y</code> — Header padding<br><br><strong>Typography</strong><br><code>--dropdown-font-size</code> — Menu font size<br><br><strong>Stacking</strong><br><code>--dropdown-zindex</code> — z-index"
TPL_MOKOCASSIOPEIA_CSS_VARS_LIST_GROUP_LABEL="List Group"
TPL_MOKOCASSIOPEIA_CSS_VARS_LIST_GROUP_DESC="<strong>Colours</strong><br><code>--list-group-color</code> — Default text colour<br><code>--list-group-bg</code> — Default background<br><code>--list-group-border-color</code> — Border colour<br><code>--list-group-action-color</code> — Clickable item text colour<br><code>--list-group-action-active-color</code> — Clickable item active text colour<br><code>--list-group-action-active-bg</code> — Clickable item active background<br><code>--list-group-disabled-color</code> — Disabled item text colour<br><code>--list-group-disabled-bg</code> — Disabled item background<br><code>--list-group-active-color</code> — Active item text colour<br><code>--list-group-active-bg</code> — Active item background<br><code>--list-group-active-border-color</code> — Active item border colour<br><br><strong>Dimensions</strong><br><code>--list-group-border-width</code> — Border width<br><code>--list-group-border-radius</code> — Border radius<br><code>--list-group-item-padding-x</code> / <code>--list-group-item-padding-y</code> — Item padding"
TPL_MOKOCASSIOPEIA_CSS_VARS_MODAL_LABEL="Modal"
TPL_MOKOCASSIOPEIA_CSS_VARS_MODAL_DESC="<strong>Colours</strong><br><code>--modal-color</code> — Modal text colour<br><code>--modal-bg</code> — Modal background<br><code>--modal-border-color</code> — Outer border colour<br><code>--modal-box-shadow</code> — Modal shadow<br><code>--modal-header-border-color</code> — Header border colour<br><code>--modal-footer-bg</code> — Footer background<br><code>--modal-footer-border-color</code> — Footer border colour<br><br><strong>Dimensions</strong><br><code>--modal-width</code> — Default modal width<br><code>--modal-padding</code> — Body padding<br><code>--modal-margin</code> — Outer margin<br><code>--modal-border-width</code> — Outer border width<br><code>--modal-border-radius</code> — Outer border radius<br><code>--modal-inner-border-radius</code> — Inner border radius<br><code>--modal-header-padding-x</code> / <code>--modal-header-padding-y</code> — Header padding<br><code>--modal-header-padding</code> — Header padding shorthand<br><code>--modal-header-border-width</code> — Header border width<br><code>--modal-title-line-height</code> — Title line height<br><code>--modal-footer-gap</code> — Footer button gap<br><code>--modal-footer-border-width</code> — Footer border width<br><br><strong>Stacking</strong><br><code>--modal-zindex</code> — z-index"
TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_TABS_LABEL="Nav Tabs"
TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_TABS_DESC="<strong>Colours</strong><br><code>--nav-tabs-border-color</code> — Tab bar border colour<br><code>--nav-tabs-link-active-color</code> — Active tab text colour<br><code>--nav-tabs-link-active-bg</code> — Active tab background<br><code>--nav-tabs-link-active-border-color</code> — Active tab border colour<br><br><strong>Dimensions</strong><br><code>--nav-tabs-border-width</code> — Border width<br><code>--nav-tabs-border-radius</code> — Tab border radius"
TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_PILLS_LABEL="Nav Pills"
TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_PILLS_DESC="<strong>Colours</strong><br><code>--nav-pills-link-active-color</code> — Active pill text colour<br><code>--nav-pills-link-active-bg</code> — Active pill background<br><br><strong>Dimensions</strong><br><code>--nav-pills-border-radius</code> — Pill border radius"
TPL_MOKOCASSIOPEIA_CSS_VARS_PAGINATION_LABEL="Pagination"
TPL_MOKOCASSIOPEIA_CSS_VARS_PAGINATION_DESC="<strong>Colours</strong><br><code>--pagination-color</code> — Default link colour<br><code>--pagination-bg</code> — Default background<br><code>--pagination-border-color</code> — Default border colour<br><code>--pagination-focus-color</code> — Focused link colour<br><code>--pagination-focus-bg</code> — Focused background<br><code>--pagination-focus-box-shadow</code> — Focus ring<br><code>--pagination-active-color</code> — Active page text colour<br><code>--pagination-active-bg</code> — Active page background<br><code>--pagination-active-border-color</code> — Active page border colour<br><code>--pagination-disabled-color</code> — Disabled link colour<br><code>--pagination-disabled-bg</code> — Disabled background<br><code>--pagination-disabled-border-color</code> — Disabled border colour<br><br><strong>Dimensions</strong><br><code>--pagination-padding-x</code> / <code>--pagination-padding-y</code> — Item padding<br><code>--pagination-border-width</code> — Border width<br><code>--pagination-border-radius</code> — Border radius<br><br><strong>Typography</strong><br><code>--pagination-font-size</code> — Font size"
TPL_MOKOCASSIOPEIA_CSS_VARS_POPOVER_LABEL="Popover"
TPL_MOKOCASSIOPEIA_CSS_VARS_POPOVER_DESC="<strong>Colours</strong><br><code>--popover-bg</code> — Popover background<br><code>--popover-border-color</code> — Border colour<br><code>--popover-box-shadow</code> — Popover shadow<br><code>--popover-header-color</code> — Header text colour<br><code>--popover-header-bg</code> — Header background<br><code>--popover-body-color</code> — Body text colour<br><code>--popover-arrow-border</code> — Arrow border colour<br><br><strong>Dimensions</strong><br><code>--popover-max-width</code> — Maximum width<br><code>--popover-border-width</code> — Border width<br><code>--popover-border-radius</code> — Outer border radius<br><code>--popover-inner-border-radius</code> — Inner border radius<br><code>--popover-header-padding-x</code> / <code>--popover-header-padding-y</code> — Header padding<br><code>--popover-body-padding-x</code> / <code>--popover-body-padding-y</code> — Body padding<br><code>--popover-arrow-width</code> / <code>--popover-arrow-height</code> — Arrow dimensions<br><br><strong>Typography</strong><br><code>--popover-font-size</code> — Font size<br><code>--popover-header-font-size</code> — Header font size<br><br><strong>Stacking</strong><br><code>--popover-zindex</code> — z-index"
TPL_MOKOCASSIOPEIA_CSS_VARS_PROGRESS_LABEL="Progress Bar"
TPL_MOKOCASSIOPEIA_CSS_VARS_PROGRESS_DESC="<strong>Colours</strong><br><code>--progress-bg</code> — Track background<br><code>--progress-bar-color</code> — Bar text colour<br><code>--progress-bar-bg</code> — Bar fill colour<br><code>--progress-box-shadow</code> — Track shadow<br><br><strong>Dimensions</strong><br><code>--progress-height</code> — Track height<br><code>--progress-border-radius</code> — Track border radius<br><br><strong>Typography</strong><br><code>--progress-font-size</code> — Label font size<br><br><strong>Animation</strong><br><code>--progress-bar-transition</code> — Bar width transition"
TPL_MOKOCASSIOPEIA_CSS_VARS_SPINNER_LABEL="Spinner"
TPL_MOKOCASSIOPEIA_CSS_VARS_SPINNER_DESC="<strong>Dimensions</strong><br><code>--spinner-width</code> — Spinner width<br><code>--spinner-height</code> — Spinner height<br><code>--spinner-vertical-align</code> — Inline vertical alignment<br><code>--spinner-border-width</code> — Border-style spinner track width<br><br><strong>Animation</strong><br><code>--spinner-animation-speed</code> — Rotation duration"
TPL_MOKOCASSIOPEIA_CSS_VARS_TABLE_LABEL="Table"
TPL_MOKOCASSIOPEIA_CSS_VARS_TABLE_DESC="<strong>Colours</strong><br><code>--table-color</code> — Default cell text colour<br><code>--table-bg</code> — Default cell background<br><code>--table-border-color</code> — Border colour<br><code>--table-accent-bg</code> — Accent row background (used by variants)<br><code>--table-striped-color</code> — Striped row text colour<br><code>--table-striped-bg</code> — Striped row background<br><code>--table-active-color</code> — Hovered/active row text colour<br><code>--table-active-bg</code> — Hovered/active row background"
TPL_MOKOCASSIOPEIA_CSS_VARS_TOAST_LABEL="Toast"
TPL_MOKOCASSIOPEIA_CSS_VARS_TOAST_DESC="<strong>Colours</strong><br><code>--toast-color</code> — Body text colour<br><code>--toast-bg</code> — Body background<br><code>--toast-border-color</code> — Border colour<br><code>--toast-box-shadow</code> — Toast shadow<br><code>--toast-header-color</code> — Header text colour<br><code>--toast-header-bg</code> — Header background<br><code>--toast-header-border-color</code> — Header border colour<br><br><strong>Dimensions</strong><br><code>--toast-max-width</code> — Maximum width<br><code>--toast-padding-x</code> / <code>--toast-padding-y</code> — Body padding<br><code>--toast-spacing</code> — Gap between stacked toasts<br><code>--toast-border-width</code> — Border width<br><code>--toast-border-radius</code> — Border radius<br><br><strong>Typography</strong><br><code>--toast-font-size</code> — Font size<br><br><strong>Stacking</strong><br><code>--toast-zindex</code> — z-index"
TPL_MOKOCASSIOPEIA_CSS_VARS_TOOLTIP_LABEL="Tooltip"
TPL_MOKOCASSIOPEIA_CSS_VARS_TOOLTIP_DESC="<strong>Colours</strong><br><code>--tooltip-color</code> — Text colour<br><code>--tooltip-bg</code> — Background<br><code>--tooltip-opacity</code> — Overall opacity<br><br><strong>Dimensions</strong><br><code>--tooltip-max-width</code> — Maximum width<br><code>--tooltip-padding-x</code> / <code>--tooltip-padding-y</code> — Inner padding<br><code>--tooltip-margin</code> — Offset from target<br><code>--tooltip-border-radius</code> — Border radius<br><code>--tooltip-arrow-width</code> / <code>--tooltip-arrow-height</code> — Arrow dimensions<br><br><strong>Typography</strong><br><code>--tooltip-font-size</code> — Font size<br><br><strong>Stacking</strong><br><code>--tooltip-zindex</code> — z-index"
TPL_MOKOCASSIOPEIA_CSS_VARS_COMPONENTS_LABEL="Component &amp; Plugin Colours" TPL_MOKOCASSIOPEIA_CSS_VARS_COMPONENTS_LABEL="Component &amp; Plugin Colours"
TPL_MOKOCASSIOPEIA_CSS_VARS_COMPONENTS_DESC="<strong>Misc components</strong><br><code>--mod-finder-link-hover</code> — Smart Search hover background<br><code>--form-legend-color</code> — Form legend text colour<br><code>--border-gray</code> — General gray border<br><code>--subhead-color</code> — Subheading colour<br><code>--item-list-color</code> — Item list background<br><code>--notification-badge-bg</code> — Notification badge<br><br><strong>Table of Contents (TOC)</strong><br><code>--toc-link-color</code> — TOC link colour<br><code>--toc-link-active-color</code> — Active TOC link<br><br><strong>Choices.js select</strong><br><code>--choices-inner-bg</code> — Inner background<br><code>--choices-dropdown-bg</code> — Dropdown background<br><code>--choices-item-bg</code> — Tag item background<br><code>--choices-item-hover-bg</code> — Tag hover<br><code>--choices-disabled-bg</code> — Disabled state<br><code>--choices-focused-border</code> — Focused border<br><br><strong>Tab buttons (taba)</strong><br><code>--taba-btn-green</code>, <code>--taba-btn-blue</code>, <code>--taba-btn-red</code>, <code>--taba-btn-gray</code>" TPL_MOKOCASSIOPEIA_CSS_VARS_COMPONENTS_DESC="<strong>Misc components</strong><br><code>--mod-finder-link-hover</code> — Smart Search hover background<br><code>--form-legend-color</code> — Form legend text colour<br><code>--border-gray</code> — General gray border<br><code>--subhead-color</code> — Subheading colour<br><code>--item-list-color</code> — Item list background<br><code>--notification-badge-bg</code> — Notification badge<br><br><strong>Table of Contents (TOC)</strong><br><code>--toc-link-color</code> — TOC link colour<br><code>--toc-link-active-color</code> — Active TOC link<br><br><strong>Choices.js select</strong><br><code>--choices-inner-bg</code> — Inner background<br><code>--choices-dropdown-bg</code> — Dropdown background<br><code>--choices-item-bg</code> — Tag item background<br><code>--choices-item-hover-bg</code> — Tag hover<br><code>--choices-disabled-bg</code> — Disabled state<br><code>--choices-focused-border</code> — Focused border<br><br><strong>Tab buttons (taba)</strong><br><code>--taba-btn-green</code>, <code>--taba-btn-blue</code>, <code>--taba-btn-red</code>, <code>--taba-btn-gray</code>"

View File

@@ -169,6 +169,57 @@ TPL_MOKOCASSIOPEIA_CSS_VARS_BUTTONS_DESC="Applied on <code>:root</code> for glob
TPL_MOKOCASSIOPEIA_CSS_VARS_CARDS_LABEL="Cards" TPL_MOKOCASSIOPEIA_CSS_VARS_CARDS_LABEL="Cards"
TPL_MOKOCASSIOPEIA_CSS_VARS_CARDS_DESC="<code>--card-spacer-y</code> / <code>--card-spacer-x</code> — Body padding (default: <code>1rem</code>)<br><code>--card-title-spacer-y</code> — Title bottom margin (default: <code>0.5rem</code>)<br><code>--card-border-width</code> — Border width (default: <code>1px</code>)<br><code>--card-border-color</code> — Border color<br><code>--card-border-radius</code> — Border radius<br><code>--card-box-shadow</code> — Card shadow (default: <code>none</code>)<br><code>--card-cap-padding-y</code> / <code>--card-cap-padding-x</code> — Header/footer padding<br><code>--card-cap-bg</code> — Header/footer background<br><code>--card-cap-color</code> — Header/footer text color<br><code>--card-color</code> — Body text color<br><code>--card-bg</code> — Card background" TPL_MOKOCASSIOPEIA_CSS_VARS_CARDS_DESC="<code>--card-spacer-y</code> / <code>--card-spacer-x</code> — Body padding (default: <code>1rem</code>)<br><code>--card-title-spacer-y</code> — Title bottom margin (default: <code>0.5rem</code>)<br><code>--card-border-width</code> — Border width (default: <code>1px</code>)<br><code>--card-border-color</code> — Border color<br><code>--card-border-radius</code> — Border radius<br><code>--card-box-shadow</code> — Card shadow (default: <code>none</code>)<br><code>--card-cap-padding-y</code> / <code>--card-cap-padding-x</code> — Header/footer padding<br><code>--card-cap-bg</code> — Header/footer background<br><code>--card-cap-color</code> — Header/footer text color<br><code>--card-color</code> — Body text color<br><code>--card-bg</code> — Card background"
TPL_MOKOCASSIOPEIA_CSS_VARS_ACCORDION_LABEL="Accordion"
TPL_MOKOCASSIOPEIA_CSS_VARS_ACCORDION_DESC="<strong>Colors</strong><br><code>--accordion-color</code> — Panel text color<br><code>--accordion-bg</code> — Panel background<br><code>--accordion-border-color</code> — Border color<br><code>--accordion-btn-color</code> — Button text color<br><code>--accordion-btn-bg</code> — Button background<br><code>--accordion-btn-focus-border-color</code> — Button focus border color<br><code>--accordion-btn-focus-box-shadow</code> — Button focus ring<br><code>--accordion-active-color</code> — Active item text color<br><code>--accordion-active-bg</code> — Active item background<br><br><strong>Dimensions</strong><br><code>--accordion-border-width</code> — Border width<br><code>--accordion-border-radius</code> — Outer border radius<br><code>--accordion-inner-border-radius</code> — Inner border radius<br><code>--accordion-btn-padding-x</code> / <code>--accordion-btn-padding-y</code> — Button padding<br><code>--accordion-body-padding-x</code> / <code>--accordion-body-padding-y</code> — Body padding<br><br><strong>Icon &amp; Animation</strong><br><code>--accordion-btn-icon</code> — Collapse icon (collapsed state)<br><code>--accordion-btn-icon-width</code> — Icon size<br><code>--accordion-btn-icon-transform</code> — Icon rotation when expanded<br><code>--accordion-btn-icon-transition</code> — Icon rotation transition<br><code>--accordion-btn-active-icon</code> — Icon (expanded state)<br><code>--accordion-transition</code> — Panel open/close transition<br><br><strong>Stacking</strong><br><code>--accordion-zindex</code> — z-index"
TPL_MOKOCASSIOPEIA_CSS_VARS_ALERT_BASE_LABEL="Alert (Base)"
TPL_MOKOCASSIOPEIA_CSS_VARS_ALERT_BASE_DESC="<strong>Colors</strong><br><code>--alert-color</code> — Alert text color<br><code>--alert-bg</code> — Alert background<br><code>--alert-border-color</code> — Border color<br><code>--alert-border</code> — Full border shorthand<br><br><strong>Dimensions</strong><br><code>--alert-padding-x</code> / <code>--alert-padding-y</code> — Inner padding<br><code>--alert-margin-bottom</code> — Bottom margin<br><code>--alert-border-radius</code> — Border radius<br><br><em>Note: per-variant contextual tokens (colors, backgrounds, borders) are covered in the Bootstrap State Colors section above.</em>"
TPL_MOKOCASSIOPEIA_CSS_VARS_BADGE_LABEL="Badge"
TPL_MOKOCASSIOPEIA_CSS_VARS_BADGE_DESC="<strong>Colors</strong><br><code>--badge-color</code> — Badge text color<br><br><strong>Typography</strong><br><code>--badge-font-size</code> — Font size<br><code>--badge-font-weight</code> — Font weight<br><br><strong>Dimensions</strong><br><code>--badge-padding-x</code> / <code>--badge-padding-y</code> — Padding<br><code>--badge-border-radius</code> — Border radius"
TPL_MOKOCASSIOPEIA_CSS_VARS_BACKDROP_LABEL="Backdrop"
TPL_MOKOCASSIOPEIA_CSS_VARS_BACKDROP_DESC="<strong>Colors</strong><br><code>--backdrop-bg</code> — Backdrop color (default: <code>#000</code>)<br><code>--backdrop-opacity</code> — Backdrop opacity (default: <code>0.5</code>)<br><br><strong>Stacking</strong><br><code>--backdrop-zindex</code> — z-index (default: <code>1040</code>)"
TPL_MOKOCASSIOPEIA_CSS_VARS_BREADCRUMB_LABEL="Breadcrumb"
TPL_MOKOCASSIOPEIA_CSS_VARS_BREADCRUMB_DESC="<strong>Colors</strong><br><code>--breadcrumb-bg</code> — Background color<br><code>--breadcrumb-divider-color</code> — Divider color<br><code>--breadcrumb-item-active-color</code> — Active item color<br><br><strong>Dimensions</strong><br><code>--breadcrumb-padding-x</code> / <code>--breadcrumb-padding-y</code> — Container padding<br><code>--breadcrumb-margin-bottom</code> — Bottom margin<br><code>--breadcrumb-item-padding-x</code> — Spacing between items<br><code>--breadcrumb-border-radius</code> — Container border radius"
TPL_MOKOCASSIOPEIA_CSS_VARS_DROPDOWN_MENU_LABEL="Dropdown Menu"
TPL_MOKOCASSIOPEIA_CSS_VARS_DROPDOWN_MENU_DESC="<strong>Colors</strong><br><code>--dropdown-color</code> — Default text color<br><code>--dropdown-bg</code> — Menu background<br><code>--dropdown-border-color</code> — Border color<br><code>--dropdown-divider-bg</code> — Divider color<br><code>--dropdown-box-shadow</code> — Menu shadow<br><code>--dropdown-link-color</code> — Link text color<br><code>--dropdown-link-active-color</code> — Active link text color<br><code>--dropdown-link-active-bg</code> — Active link background<br><code>--dropdown-link-disabled-color</code> — Disabled link color<br><code>--dropdown-header-color</code> — Header text color<br><br><strong>Dimensions</strong><br><code>--dropdown-min-width</code> — Minimum width<br><code>--dropdown-padding-x</code> / <code>--dropdown-padding-y</code> — Menu padding<br><code>--dropdown-spacer</code> — Gap from toggle<br><code>--dropdown-border-width</code> — Border width<br><code>--dropdown-border-radius</code> — Outer border radius<br><code>--dropdown-inner-border-radius</code> — Inner border radius<br><code>--dropdown-divider-margin-y</code> — Divider vertical margin<br><code>--dropdown-item-padding-x</code> / <code>--dropdown-item-padding-y</code> — Item padding<br><code>--dropdown-header-padding-x</code> / <code>--dropdown-header-padding-y</code> — Header padding<br><br><strong>Typography</strong><br><code>--dropdown-font-size</code> — Menu font size<br><br><strong>Stacking</strong><br><code>--dropdown-zindex</code> — z-index"
TPL_MOKOCASSIOPEIA_CSS_VARS_LIST_GROUP_LABEL="List Group"
TPL_MOKOCASSIOPEIA_CSS_VARS_LIST_GROUP_DESC="<strong>Colors</strong><br><code>--list-group-color</code> — Default text color<br><code>--list-group-bg</code> — Default background<br><code>--list-group-border-color</code> — Border color<br><code>--list-group-action-color</code> — Clickable item text color<br><code>--list-group-action-active-color</code> — Clickable item active text color<br><code>--list-group-action-active-bg</code> — Clickable item active background<br><code>--list-group-disabled-color</code> — Disabled item text color<br><code>--list-group-disabled-bg</code> — Disabled item background<br><code>--list-group-active-color</code> — Active item text color<br><code>--list-group-active-bg</code> — Active item background<br><code>--list-group-active-border-color</code> — Active item border color<br><br><strong>Dimensions</strong><br><code>--list-group-border-width</code> — Border width<br><code>--list-group-border-radius</code> — Border radius<br><code>--list-group-item-padding-x</code> / <code>--list-group-item-padding-y</code> — Item padding"
TPL_MOKOCASSIOPEIA_CSS_VARS_MODAL_LABEL="Modal"
TPL_MOKOCASSIOPEIA_CSS_VARS_MODAL_DESC="<strong>Colors</strong><br><code>--modal-color</code> — Modal text color<br><code>--modal-bg</code> — Modal background<br><code>--modal-border-color</code> — Outer border color<br><code>--modal-box-shadow</code> — Modal shadow<br><code>--modal-header-border-color</code> — Header border color<br><code>--modal-footer-bg</code> — Footer background<br><code>--modal-footer-border-color</code> — Footer border color<br><br><strong>Dimensions</strong><br><code>--modal-width</code> — Default modal width<br><code>--modal-padding</code> — Body padding<br><code>--modal-margin</code> — Outer margin<br><code>--modal-border-width</code> — Outer border width<br><code>--modal-border-radius</code> — Outer border radius<br><code>--modal-inner-border-radius</code> — Inner border radius<br><code>--modal-header-padding-x</code> / <code>--modal-header-padding-y</code> — Header padding<br><code>--modal-header-padding</code> — Header padding shorthand<br><code>--modal-header-border-width</code> — Header border width<br><code>--modal-title-line-height</code> — Title line height<br><code>--modal-footer-gap</code> — Footer button gap<br><code>--modal-footer-border-width</code> — Footer border width<br><br><strong>Stacking</strong><br><code>--modal-zindex</code> — z-index"
TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_TABS_LABEL="Nav Tabs"
TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_TABS_DESC="<strong>Colors</strong><br><code>--nav-tabs-border-color</code> — Tab bar border color<br><code>--nav-tabs-link-active-color</code> — Active tab text color<br><code>--nav-tabs-link-active-bg</code> — Active tab background<br><code>--nav-tabs-link-active-border-color</code> — Active tab border color<br><br><strong>Dimensions</strong><br><code>--nav-tabs-border-width</code> — Border width<br><code>--nav-tabs-border-radius</code> — Tab border radius"
TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_PILLS_LABEL="Nav Pills"
TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_PILLS_DESC="<strong>Colors</strong><br><code>--nav-pills-link-active-color</code> — Active pill text color<br><code>--nav-pills-link-active-bg</code> — Active pill background<br><br><strong>Dimensions</strong><br><code>--nav-pills-border-radius</code> — Pill border radius"
TPL_MOKOCASSIOPEIA_CSS_VARS_PAGINATION_LABEL="Pagination"
TPL_MOKOCASSIOPEIA_CSS_VARS_PAGINATION_DESC="<strong>Colors</strong><br><code>--pagination-color</code> — Default link color<br><code>--pagination-bg</code> — Default background<br><code>--pagination-border-color</code> — Default border color<br><code>--pagination-focus-color</code> — Focused link color<br><code>--pagination-focus-bg</code> — Focused background<br><code>--pagination-focus-box-shadow</code> — Focus ring<br><code>--pagination-active-color</code> — Active page text color<br><code>--pagination-active-bg</code> — Active page background<br><code>--pagination-active-border-color</code> — Active page border color<br><code>--pagination-disabled-color</code> — Disabled link color<br><code>--pagination-disabled-bg</code> — Disabled background<br><code>--pagination-disabled-border-color</code> — Disabled border color<br><br><strong>Dimensions</strong><br><code>--pagination-padding-x</code> / <code>--pagination-padding-y</code> — Item padding<br><code>--pagination-border-width</code> — Border width<br><code>--pagination-border-radius</code> — Border radius<br><br><strong>Typography</strong><br><code>--pagination-font-size</code> — Font size"
TPL_MOKOCASSIOPEIA_CSS_VARS_POPOVER_LABEL="Popover"
TPL_MOKOCASSIOPEIA_CSS_VARS_POPOVER_DESC="<strong>Colors</strong><br><code>--popover-bg</code> — Popover background<br><code>--popover-border-color</code> — Border color<br><code>--popover-box-shadow</code> — Popover shadow<br><code>--popover-header-color</code> — Header text color<br><code>--popover-header-bg</code> — Header background<br><code>--popover-body-color</code> — Body text color<br><code>--popover-arrow-border</code> — Arrow border color<br><br><strong>Dimensions</strong><br><code>--popover-max-width</code> — Maximum width<br><code>--popover-border-width</code> — Border width<br><code>--popover-border-radius</code> — Outer border radius<br><code>--popover-inner-border-radius</code> — Inner border radius<br><code>--popover-header-padding-x</code> / <code>--popover-header-padding-y</code> — Header padding<br><code>--popover-body-padding-x</code> / <code>--popover-body-padding-y</code> — Body padding<br><code>--popover-arrow-width</code> / <code>--popover-arrow-height</code> — Arrow dimensions<br><br><strong>Typography</strong><br><code>--popover-font-size</code> — Font size<br><code>--popover-header-font-size</code> — Header font size<br><br><strong>Stacking</strong><br><code>--popover-zindex</code> — z-index"
TPL_MOKOCASSIOPEIA_CSS_VARS_PROGRESS_LABEL="Progress Bar"
TPL_MOKOCASSIOPEIA_CSS_VARS_PROGRESS_DESC="<strong>Colors</strong><br><code>--progress-bg</code> — Track background<br><code>--progress-bar-color</code> — Bar text color<br><code>--progress-bar-bg</code> — Bar fill color<br><code>--progress-box-shadow</code> — Track shadow<br><br><strong>Dimensions</strong><br><code>--progress-height</code> — Track height<br><code>--progress-border-radius</code> — Track border radius<br><br><strong>Typography</strong><br><code>--progress-font-size</code> — Label font size<br><br><strong>Animation</strong><br><code>--progress-bar-transition</code> — Bar width transition"
TPL_MOKOCASSIOPEIA_CSS_VARS_SPINNER_LABEL="Spinner"
TPL_MOKOCASSIOPEIA_CSS_VARS_SPINNER_DESC="<strong>Dimensions</strong><br><code>--spinner-width</code> — Spinner width<br><code>--spinner-height</code> — Spinner height<br><code>--spinner-vertical-align</code> — Inline vertical alignment<br><code>--spinner-border-width</code> — Border-style spinner track width<br><br><strong>Animation</strong><br><code>--spinner-animation-speed</code> — Rotation duration"
TPL_MOKOCASSIOPEIA_CSS_VARS_TABLE_LABEL="Table"
TPL_MOKOCASSIOPEIA_CSS_VARS_TABLE_DESC="<strong>Colors</strong><br><code>--table-color</code> — Default cell text color<br><code>--table-bg</code> — Default cell background<br><code>--table-border-color</code> — Border color<br><code>--table-accent-bg</code> — Accent row background (used by variants)<br><code>--table-striped-color</code> — Striped row text color<br><code>--table-striped-bg</code> — Striped row background<br><code>--table-active-color</code> — Hovered/active row text color<br><code>--table-active-bg</code> — Hovered/active row background"
TPL_MOKOCASSIOPEIA_CSS_VARS_TOAST_LABEL="Toast"
TPL_MOKOCASSIOPEIA_CSS_VARS_TOAST_DESC="<strong>Colors</strong><br><code>--toast-color</code> — Body text color<br><code>--toast-bg</code> — Body background<br><code>--toast-border-color</code> — Border color<br><code>--toast-box-shadow</code> — Toast shadow<br><code>--toast-header-color</code> — Header text color<br><code>--toast-header-bg</code> — Header background<br><code>--toast-header-border-color</code> — Header border color<br><br><strong>Dimensions</strong><br><code>--toast-max-width</code> — Maximum width<br><code>--toast-padding-x</code> / <code>--toast-padding-y</code> — Body padding<br><code>--toast-spacing</code> — Gap between stacked toasts<br><code>--toast-border-width</code> — Border width<br><code>--toast-border-radius</code> — Border radius<br><br><strong>Typography</strong><br><code>--toast-font-size</code> — Font size<br><br><strong>Stacking</strong><br><code>--toast-zindex</code> — z-index"
TPL_MOKOCASSIOPEIA_CSS_VARS_TOOLTIP_LABEL="Tooltip"
TPL_MOKOCASSIOPEIA_CSS_VARS_TOOLTIP_DESC="<strong>Colors</strong><br><code>--tooltip-color</code> — Text color<br><code>--tooltip-bg</code> — Background<br><code>--tooltip-opacity</code> — Overall opacity<br><br><strong>Dimensions</strong><br><code>--tooltip-max-width</code> — Maximum width<br><code>--tooltip-padding-x</code> / <code>--tooltip-padding-y</code> — Inner padding<br><code>--tooltip-margin</code> — Offset from target<br><code>--tooltip-border-radius</code> — Border radius<br><code>--tooltip-arrow-width</code> / <code>--tooltip-arrow-height</code> — Arrow dimensions<br><br><strong>Typography</strong><br><code>--tooltip-font-size</code> — Font size<br><br><strong>Stacking</strong><br><code>--tooltip-zindex</code> — z-index"
TPL_MOKOCASSIOPEIA_CSS_VARS_COMPONENTS_LABEL="Component &amp; Plugin Colors" TPL_MOKOCASSIOPEIA_CSS_VARS_COMPONENTS_LABEL="Component &amp; Plugin Colors"
TPL_MOKOCASSIOPEIA_CSS_VARS_COMPONENTS_DESC="<strong>Misc components</strong><br><code>--mod-finder-link-hover</code> — Smart Search hover background<br><code>--form-legend-color</code> — Form legend text color<br><code>--border-gray</code> — General gray border<br><code>--subhead-color</code> — Subheading color<br><code>--item-list-color</code> — Item list background<br><code>--notification-badge-bg</code> — Notification badge<br><br><strong>Table of Contents (TOC)</strong><br><code>--toc-link-color</code> — TOC link color<br><code>--toc-link-active-color</code> — Active TOC link<br><br><strong>Choices.js select</strong><br><code>--choices-inner-bg</code> — Inner background<br><code>--choices-dropdown-bg</code> — Dropdown background<br><code>--choices-item-bg</code> — Tag item background<br><code>--choices-item-hover-bg</code> — Tag hover<br><code>--choices-disabled-bg</code> — Disabled state<br><code>--choices-focused-border</code> — Focused border<br><br><strong>Tab buttons (taba)</strong><br><code>--taba-btn-green</code>, <code>--taba-btn-blue</code>, <code>--taba-btn-red</code>, <code>--taba-btn-gray</code>" TPL_MOKOCASSIOPEIA_CSS_VARS_COMPONENTS_DESC="<strong>Misc components</strong><br><code>--mod-finder-link-hover</code> — Smart Search hover background<br><code>--form-legend-color</code> — Form legend text color<br><code>--border-gray</code> — General gray border<br><code>--subhead-color</code> — Subheading color<br><code>--item-list-color</code> — Item list background<br><code>--notification-badge-bg</code> — Notification badge<br><br><strong>Table of Contents (TOC)</strong><br><code>--toc-link-color</code> — TOC link color<br><code>--toc-link-active-color</code> — Active TOC link<br><br><strong>Choices.js select</strong><br><code>--choices-inner-bg</code> — Inner background<br><code>--choices-dropdown-bg</code> — Dropdown background<br><code>--choices-item-bg</code> — Tag item background<br><code>--choices-item-hover-bg</code> — Tag hover<br><code>--choices-disabled-bg</code> — Disabled state<br><code>--choices-focused-border</code> — Focused border<br><br><strong>Tab buttons (taba)</strong><br><code>--taba-btn-green</code>, <code>--taba-btn-blue</code>, <code>--taba-btn-red</code>, <code>--taba-btn-gray</code>"

View File

@@ -271,6 +271,23 @@
<field name="css_vars_forms" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_FORMS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_FORMS_DESC" class="alert alert-light" /> <field name="css_vars_forms" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_FORMS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_FORMS_DESC" class="alert alert-light" />
<field name="css_vars_buttons" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_BUTTONS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_BUTTONS_DESC" class="alert alert-light" /> <field name="css_vars_buttons" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_BUTTONS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_BUTTONS_DESC" class="alert alert-light" />
<field name="css_vars_cards" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_CARDS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_CARDS_DESC" class="alert alert-light" /> <field name="css_vars_cards" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_CARDS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_CARDS_DESC" class="alert alert-light" />
<field name="css_vars_accordion" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_ACCORDION_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_ACCORDION_DESC" class="alert alert-light" />
<field name="css_vars_alert_base" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_ALERT_BASE_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_ALERT_BASE_DESC" class="alert alert-light" />
<field name="css_vars_badge" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_BADGE_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_BADGE_DESC" class="alert alert-light" />
<field name="css_vars_breadcrumb" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_BREADCRUMB_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_BREADCRUMB_DESC" class="alert alert-light" />
<field name="css_vars_dropdown_menu" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_DROPDOWN_MENU_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_DROPDOWN_MENU_DESC" class="alert alert-light" />
<field name="css_vars_list_group" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_LIST_GROUP_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_LIST_GROUP_DESC" class="alert alert-light" />
<field name="css_vars_modal" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_MODAL_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_MODAL_DESC" class="alert alert-light" />
<field name="css_vars_backdrop" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_BACKDROP_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_BACKDROP_DESC" class="alert alert-light" />
<field name="css_vars_nav_tabs" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_TABS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_TABS_DESC" class="alert alert-light" />
<field name="css_vars_nav_pills" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_PILLS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_PILLS_DESC" class="alert alert-light" />
<field name="css_vars_pagination" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_PAGINATION_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_PAGINATION_DESC" class="alert alert-light" />
<field name="css_vars_popover" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_POPOVER_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_POPOVER_DESC" class="alert alert-light" />
<field name="css_vars_progress" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_PROGRESS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_PROGRESS_DESC" class="alert alert-light" />
<field name="css_vars_spinner" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_SPINNER_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_SPINNER_DESC" class="alert alert-light" />
<field name="css_vars_table" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_TABLE_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_TABLE_DESC" class="alert alert-light" />
<field name="css_vars_toast" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_TOAST_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_TOAST_DESC" class="alert alert-light" />
<field name="css_vars_tooltip" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_TOOLTIP_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_TOOLTIP_DESC" class="alert alert-light" />
<field name="css_vars_components" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_COMPONENTS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_COMPONENTS_DESC" class="alert alert-light" /> <field name="css_vars_components" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_COMPONENTS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_COMPONENTS_DESC" class="alert alert-light" />
<field name="css_vars_offcanvas" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_OFFCANVAS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_OFFCANVAS_DESC" class="alert alert-light" /> <field name="css_vars_offcanvas" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_OFFCANVAS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_OFFCANVAS_DESC" class="alert alert-light" />
<field name="css_vars_virtuemart" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_VM_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_VM_DESC" class="alert alert-light" /> <field name="css_vars_virtuemart" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_VM_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_VM_DESC" class="alert alert-light" />