MokoConsulting/MokoCassiopeia
1
1
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases 1 Wiki Activity
Files
97d31338432a1b7ba9c9cc6be61c2a95a1bc307f
MokoCassiopeia/src/language/en-US/tpl_mokocassiopeia.ini
Jonathan Miller 97d3133843 03.09.01 — mod_custom hero override, palette starter files, updated descriptions (#84) 
* Add mod_custom hero layout override and bump version to 03.09.01

Adds src/html/mod_custom/hero.php — a banner-overlay style template
override for mod_custom, mirroring Cassiopeia's banner layout pattern.
Includes background image support via WebAssetManager and respects the
Module Manager's moduleclass_sfx field.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Ignore and untrack .claude/settings.local.json

Adds .claude/settings.local.json to .gitignore and removes it from
version control to keep local Claude Code permissions out of the repo.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Ship custom palette starters and update template description

- Add src/templates/light.custom.css and dark.custom.css as starter
  palette files that ship with the template, giving users a full
  variable reference to copy and customise
- Register src/templates/ folder in templateDetails.xml <files>
- Update <description> in templateDetails.xml: correct palette source
  paths, add Custom CSS & JavaScript section (user.css / user.js),
  link docs to GitHub repo docs/ directory
- Sync en-GB and en-US tpl_mokocassiopeia.sys.ini with same changes,
  preserving British/American spelling variants; bump version to 03.09.01

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Add CSS Variables reference tab to template options

Adds a new 'CSS Variables' tab to the template configuration with eight
documented sections (brand, typography, navigation, header background,
container backgrounds, borders/shadows, forms/focus) so site builders
can reference all available custom properties without leaving Joomla admin.

Also removes external docs links from descriptions in templateDetails.xml
and both language files, replacing them with a pointer to the new tab.
Fixes stale custom palette source paths in en-GB and en-US ini files.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Expand CSS Variables tab to full variable reference and add custom-hero class

- Replace 8-field CSS Variables tab with 21 comprehensive sections covering
  all variables from light.standard.css and dark.standard.css
- New sections: Links, Layout & Spacing, Breakpoints, Bootstrap Semantic
  Palette, Bootstrap State Colors, Alert & List Group Colors, Standard
  Colors/Grays/Opacity, Shadows & Shadow Tokens, Buttons, Cards,
  Component & Plugin Colors, VirtueMart, Gable
- Add custom-hero class to hero.php outer div (always present)
- Both en-GB and en-US language files updated

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Add Google Search Console verification and ensure all Google services coexist

- Add googlesitekey param to Google fieldset in templateDetails.xml
- Inject <meta name="google-site-verification"> via setMetaData() in
  index.php, component.php, and offline.php
- GTM, GA, and Search Console verification can now all be active simultaneously
- Add language strings for new field in en-US and en-GB

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Add header-aside module position to the right of the logo

- New position renders inside .header-brand-wrap, right-aligned via
  margin-inline-start: auto on .container-header-aside
- CSS: .header-brand-wrap uses flexbox so logo stays left, aside floats right
- Registered in templateDetails.xml positions list
- Language strings added to both en-US and en-GB sys.ini files

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Add minify build script and generate .min CSS/JS; rename position to brand-aside

Build tooling:
- Add package.json with clean-css and terser dev dependencies
- Add scripts/minify.js: reads joomla.asset.json, auto-detects source/.min
  pairs, and minifies all template-owned CSS and JS files
- Add node_modules/ to .gitignore

Generated .min files (all 6 manifest pairs):
- css/template.min.css      (17.8% saved)
- css/editor.min.css        (49.4% saved)
- css/theme/light.standard.min.css  (13.1% saved)
- css/theme/dark.standard.min.css   (14.4% saved)
- js/template.min.js        (58.2% saved)
- js/gtm.min.js             (62.3% saved)

Rename: header-aside → brand-aside (position, CSS class, language keys)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Add hero/banner-overlay CSS variables and wire template.css

- Add HERO / BANNER OVERLAY section to light.standard.css and dark.standard.css:
  --hero-height, --hero-color, --hero-bg-repeat, --hero-bg-attachment,
  --hero-bg-position, --hero-bg-size, --hero-border-bottom,
  --hero-overlay-bg (light: 0.1 alpha / dark: 0.3 alpha),
  --hero-overlay-padding, --hero-overlay-text-align, --hero-overlay-text-color
- Replace all hardcoded values in .container-banner .banner-overlay and
  .overlay with var() references (with fallbacks)
- Fix background-position: comma syntax → correct space-separated single-bg value
- Add css_vars_hero note field to CSS Variables tab in templateDetails.xml
- Add TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_LABEL/DESC to en-US and en-GB
- Regenerate .min files

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Add smooth theme-switch transitions and restore hero .overlay wrapper

- Add prefers-reduced-motion-scoped CSS transitions (bg, color, border) on
  :root, body, and key layout containers so light/dark theme switches animate
  smoothly instead of snapping
- Restore <div class="overlay"> child in hero.php; slim .custom-hero rule to a
  customisation hook only — visual overlay styles are handled by .overlay child
- Regenerate template.min.css

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Update template.css

* Merge duplicate prefers-reduced-motion media queries

Consolidate the two @media (prefers-reduced-motion: no-preference) blocks
into one — scroll-behavior and theme-switch colour transitions share the
same query and are cleaner in a single block.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Promote offcanvas variables to :root theme files and document in CSS Variables tab

- Move --offcanvas-* definitions from component-scoped .offcanvas selector in
  template.css into :root[data-bs-theme] blocks in light.standard.css and
  dark.standard.css so they are overridable via user.css at root level
- Fix two bugs in the old definitions: --offcanvas-bg was incorrectly set to
  var(--body-color) (text colour); corrected to var(--body-bg); and
  --offcanvas-color had a spurious 'color:' prefix
- Dark theme uses a heavier box-shadow (0.3 alpha) for better depth perception
- Add css_vars_offcanvas field to templateDetails.xml CSS Variables tab
- Add en-US and en-GB language strings for the new Offcanvas Panel section
- Rebuild all .min CSS files

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Promote Bootstrap component variables from template.css to :root theme files

Move 16 component variable groups from component-scoped selectors in
template.css into :root[data-bs-theme] blocks in light.standard.css and
dark.standard.css:

accordion, breadcrumb, pagination, badge, alert, progress, list-group,
dropdown, toast, modal, tooltip, popover, spinner, nav, nav-tabs, nav-pills

Dark theme values adapted for dark surfaces: semantic var() references,
lighter SVG icon fill colours, heavier shadows, secondary-bg backgrounds.
Component selectors in template.css retain only non-variable rules.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Promote table and backdrop variables to :root theme files

Move --table-* and --backdrop-* base definitions from component selectors
in template.css into :root[data-bs-theme] blocks in light/dark theme files.

Dark table uses white-rgb-based striped/active overlays for proper contrast
on dark surfaces. Deduplicate the double --table-active-* declarations that
existed in template.css. Backdrop values are identical in both themes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Add CSS Variables tab documentation for all promoted Bootstrap components

Add LABEL/DESC language strings (en-US + en-GB) for all 17 Bootstrap
component variable groups now living in the :root theme files:

accordion, alert, badge, backdrop, breadcrumb, dropdown, list-group,
modal, nav-tabs, nav-pills, pagination, popover, progress, spinner,
table, toast, tooltip

Each section documents variables with HTML subheadings (Dimensions,
Colours, Typography, Stacking, Animation) and <code> tags for every
variable name. British English spellings used throughout en-GB.

Adds 34 new lines per language file (17 LABEL + 17 DESC pairs, 80
CSS_VARS_* keys total). XML fields were already present from the
prior migration commit.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-24 16:48:07 -05:00

239 lines
42 KiB
INI
Raw Blame History

; Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
;
; This file is part of a Moko Consulting project.
;
; SPDX-License-Identifier: GPL-3.0-or-later
;
; #FILE INFORMATION
; DEFGROUP: Joomla.Template.Site
; INGROUP: MokoCassiopeia
; PATH: ./language/en-US/tpl_mokocassiopeia.ini
; VERSION: 03.09.01
; BRIEF: English (US) language strings for the MokoCassiopeia Joomla template
;
; Note: Template metadata strings (name, description) are in tpl_mokocassiopeia.sys.ini
; ===== System / layout =====
TPL_MOKOCASSIOPEIA_DEVELOPMENTMODE_LABEL="Development Mode"
TPL_MOKOCASSIOPEIA_DEVELOPMENTMODE_DESC="If 'Development Mode' is active, certain features may be disabled, such as Google Tag Manager and Google Analytics."
TPL_MOKOCASSIOPEIA_FLUID_LABEL="Layout"
TPL_MOKOCASSIOPEIA_STATIC="Static"
TPL_MOKOCASSIOPEIA_FLUID="Fluid"
; ===== Custom Code tab =====
TPL_MOKOCASSIOPEIA_CUSTOM_CODE_FIELDSET="Custom Code"
TPL_MOKOCASSIOPEIA_CUSTOM_HEAD_START_LABEL="Custom Head: Start"
TPL_MOKOCASSIOPEIA_CUSTOM_HEAD_START_DESC="This content will be inserted at the beginning of the &lt;head&gt; tag"
TPL_MOKOCASSIOPEIA_CUSTOM_HEAD_END_LABEL="Custom Head: End"
TPL_MOKOCASSIOPEIA_CUSTOM_HEAD_END_DESC="This content will be inserted at the end of the &lt;head&gt; tag"
TPL_MOKOCASSIOPEIA_OFFLINEEMBED_LABEL="Offline Page Embed Code"
TPL_MOKOCASSIOPEIA_OFFLINEEMBED_DESC="In addition to the 'Offline message' defined in 'Global Configuration', this will be displayed on the offline page.<i>Use for Mailchimp code and Social Icons</i>"
; ===== Drawers =====
TPL_MOKOCASSIOPEIA_DRAWERS_FIELDSET_LABEL="Drawers"
TPL_MOKOCASSIOPEIA_DRAWER_LEFT_ICON_LABEL="Drawer Left Icon CSS"
TPL_MOKOCASSIOPEIA_DRAWER_LEFT_ICON_DESC="Enter the Font-Awesome class for the left drawer toggle (e.g. 'fas fa-chevron-left')."
TPL_MOKOCASSIOPEIA_DRAWER_RIGHT_ICON_LABEL="Drawer Right Icon CSS"
TPL_MOKOCASSIOPEIA_DRAWER_RIGHT_ICON_DESC="Enter the Font-Awesome class for the right drawer toggle (e.g. 'fas fa-chevron-right')."
; ===== Google =====
TPL_MOKOCASSIOPEIA_GOOGLE_FIELDSET_LABEL="Google"
TPL_MOKOCASSIOPEIA_GOOGLE_NOTE_TEXT="<h3>PLEASE NOTE:</h3>If fields are left blank, relative Google features will not be used"
TPL_MOKOCASSIOPEIA_GOOGLETAGMANAGER_LABEL="Use Google Tag Manager?"
TPL_MOKOCASSIOPEIA_GOOGLETAGMANAGER_DESC="Do you want to use Google Tag Manager?<br>More information on Google Tag Manager can be found <a target='_blank' href='https://support.google.com/tagmanager/answer/14842164'>here.</a>"
TPL_MOKOCASSIOPEIA_GOOGLETAGMANAGERID_LABEL="Google Tag Manager ID"
TPL_MOKOCASSIOPEIA_GOOGLETAGMANAGERID_DESC="Begins with 'GTM-'"
TPL_MOKOCASSIOPEIA_GOOGLEANALYTICS_LABEL="Use Google Analytics?"
TPL_MOKOCASSIOPEIA_GOOGLEANALYTICS_DESC="Do you want to use Google Analytics?<br>More information on Google Analytics can be found <a target='_blank' href='https://developers.google.com/analytics'>here.</a>"
TPL_MOKOCASSIOPEIA_GOOGLEANALYTICSID_LABEL="Google Analytics ID"
TPL_MOKOCASSIOPEIA_GOOGLEANALYTICSID_DESC="Begins with 'G-'"
TPL_MOKOCASSIOPEIA_GOOGLESITEKEY_LABEL="Google Search Console Verification"
TPL_MOKOCASSIOPEIA_GOOGLESITEKEY_DESC="Paste the content value from the &lt;meta name=&quot;google-site-verification&quot;&gt; tag. Find this in Google Search Console under Ownership Verification &rarr; HTML tag method."
; ===== Branding & icons (Theme tab) =====
TPL_MOKOCASSIOPEIA_BRAND_LABEL="Brand"
TPL_MOKOCASSIOPEIA_LOGO_LABEL="Logo"
TPL_MOKOCASSIOPEIA_TITLE="Title (alternative to logo)"
TPL_MOKOCASSIOPEIA_TAGLINE_LABEL="Tagline"
TPL_MOKOCASSIOPEIA_TAGLINE_DESC="Optional text to show as a subheading"
TPL_MOKOCASSIOPEIA_FA7KITCODE_LABEL="Font Awesome 7 Kit Unique Code"
TPL_MOKOCASSIOPEIA_FA7KITCODE_DESC="<i>If left blank, Font Awesome 7 Free will be used.</i><br>Copy the unique Kit embed code above and paste it into the &lt;head&gt; of your project's HTML file or template.<br><a href='https://fontawesome.com/' target='_blank'>More information at the Font Awesome website.</a>"
; ===== Typography (Theme tab) =====
TPL_MOKOCASSIOPEIA_FONT_LABEL="Fonts Scheme"
TPL_MOKOCASSIOPEIA_FONT_LABEL_DESC="Select a font scheme for your site. Local fonts are loaded from the template folder, while web fonts are loaded from external sources (Google Fonts). The default is Roboto (local). See the note below for important privacy and performance considerations."
TPL_MOKOCASSIOPEIA_FONT_GROUP_LOCAL="Fonts from Folder"
TPL_MOKOCASSIOPEIA_FONT_GROUP_WEB="Fonts from Web"
TPL_MOKOCASSIOPEIA_FONT_NOTE_TEXT="Loading fonts from external sources might be against privacy regulations in some countries.<br>Loading fonts from a local folder might have a performance impact on your site."
; ===== Header & navigation (Theme tab) =====
TPL_MOKOCASSIOPEIA_STICKY_LABEL="Sticky Header"
TPL_MOKOCASSIOPEIA_BACKTOTOP="Back to Top"
TPL_MOKOCASSIOPEIA_BACKTOTOP_LABEL="Back-to-top Link"
TPL_MOKOCASSIOPEIA_TOC="Table of Contents"
; ===== Color palette choices (shared) =====
TPL_MOKOCASSIOPEIA_COLOR_NAME_STANDARD="Standard"
TPL_MOKOCASSIOPEIA_COLOR_NAME_CUSTOM="Custom"
; New labels for Theme tab dropdowns
TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_LABEL="Light color palette"
TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_DESC="Select a color palette for light mode. <strong>Standard</strong> uses the default blue theme with comprehensive styling for all components. <strong>Custom</strong> loads <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code> — copy the starter file from <code>templates/mokocassiopeia/templates/light.custom.css</code> and customize the CSS variables to match your brand."
TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_LABEL="Dark color palette"
TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_DESC="Select a color palette for dark mode. <strong>Standard</strong> uses the default blue theme optimized for dark backgrounds with proper contrast. <strong>Custom</strong> loads <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code> — copy the starter file from <code>templates/mokocassiopeia/templates/dark.custom.css</code> and customize the CSS variables to match your brand."
; ===== Theme tab (core feature strings) =====
TPL_MOKO_THEME_FIELDSET="Theme"
TPL_MOKO_THEME_SECTION_GENERAL="General"
TPL_MOKO_THEME_SECTION_VARS="Variables & Palettes"
TPL_MOKO_THEME_SECTION_TYPO="Typography"
TPL_MOKO_THEME_SECTION_BRAND="Branding & Icons"
TPL_MOKO_THEME_SECTION_HEADER="Header & Navigation"
TPL_MOKO_THEME_SECTION_TOGGLE="Theme Toggle UI"
TPL_MOKO_THEME_ENABLED="Enable theme feature"
TPL_MOKO_THEME_ENABLED_DESC="Turn the entire light/dark feature on or off."
TPL_MOKO_THEME_CONTROL_TYPE="Theme Control Type"
TPL_MOKO_THEME_CONTROL_TYPE_DESC="Choose a visible toggle (Switch or Radios), or no control to follow System only."
TPL_MOKO_THEME_DEFAULT_CHOICE="Default Choice"
TPL_MOKO_THEME_DEFAULT_CHOICE_DESC="Initial theme when no user preference is stored."
TPL_MOKO_THEME_AUTO_DARK="Auto Dark Mode"
TPL_MOKO_THEME_AUTO_DARK_DESC="Force the site to switch to dark mode automatically. When enabled, the template will override the default and use dark unless the user explicitly selects otherwise."
TPL_MOKO_THEME_META_COLOR_SCHEME="Add &lt;meta name=&quot;color-scheme&quot;&gt;"
TPL_MOKO_THEME_META_COLOR_SCHEME_DESC="Advertise light/dark support for UA controls."
TPL_MOKO_THEME_META_THEME_COLOR="Add &lt;meta name=&quot;theme-color&quot;&gt;"
TPL_MOKO_THEME_META_THEME_COLOR_DESC="Update mobile address bar color."
TPL_MOKO_THEME_BASE_CSS="Base template CSS"
TPL_MOKO_THEME_BASE_CSS_DESC="Main stylesheet that consumes variables."
TPL_MOKO_THEME_BRIDGE="Sync data-bs-theme with data-aria-theme"
TPL_MOKO_THEME_BRIDGE_DESC="Keep both attributes in lockstep so Bootstrap and custom CSS stay aligned."
TPL_MOKO_THEME_FAB_ENABLED="Show floating theme switch"
TPL_MOKO_THEME_FAB_ENABLED_DESC="Display a persistent, accessible theme toggle."
TPL_MOKO_THEME_FAB_POS="Floating switch position"
TPL_MOKO_THEME_FAB_POS_DESC="Screen corner for the toggle."
; ===== CSS Variables tab =====
TPL_MOKOCASSIOPEIA_CSS_VARS_FIELDSET_LABEL="CSS Variables"
TPL_MOKOCASSIOPEIA_CSS_VARS_INTRO="<p>All colors, spacing and layout values are driven by CSS custom properties. To override any variable without editing the template, add your overrides to <code>media/templates/site/mokocassiopeia/css/user.css</code>, or create a custom palette file (see the Theme tab). Variables are scoped to <code>:root[data-bs-theme=&quot;light&quot;]</code> or <code>:root[data-bs-theme=&quot;dark&quot;]</code> so light and dark values are independent.</p>"
TPL_MOKOCASSIOPEIA_CSS_VARS_BRAND_LABEL="Brand &amp; Theme Colors"
TPL_MOKOCASSIOPEIA_CSS_VARS_BRAND_DESC="<code>--color-primary</code> — Primary brand color (default: <code>#112855</code>)<br><code>--accent-color-primary</code> — Primary accent (default: <code>#3f8ff0</code>)<br><code>--accent-color-secondary</code> — Secondary accent"
TPL_MOKOCASSIOPEIA_CSS_VARS_LINKS_LABEL="Links &amp; Link Utilities"
TPL_MOKOCASSIOPEIA_CSS_VARS_LINKS_DESC="<strong>Core link tokens</strong><br><code>--color-link</code> — Base link color<br><code>--color-hover</code> — Base hover color<br><code>--link-color</code> / <code>--link-hover-color</code> — Bootstrap link colors<br><code>--link-decoration</code> — Default text-decoration<br><code>--link-active-color</code> — Active state<br><br><strong>Semantic link utilities</strong> (replace <code>{color}</code> with <code>primary</code>, <code>secondary</code>, <code>success</code>, <code>info</code>, <code>warning</code>, <code>danger</code>, <code>light</code>, <code>dark</code>)<br><code>--link-{color}-color</code> — Color for <code>.link-{color}</code><br><code>--link-{color}-hover-color</code> — Hover color"
TPL_MOKOCASSIOPEIA_CSS_VARS_TYPO_LABEL="Typography &amp; Body"
TPL_MOKOCASSIOPEIA_CSS_VARS_TYPO_DESC="<code>--body-color</code> — Default text color (default: <code>#22262a</code>)<br><code>--body-bg</code> — Page background (default: <code>#fff</code>)<br><code>--body-font-family</code> — Font stack<br><code>--body-font-size</code> — Base size (default: <code>1rem</code>)<br><code>--body-font-weight</code> — Base weight (default: <code>400</code>)<br><code>--body-line-height</code> — Line height (default: <code>1.5</code>)<br><code>--heading-color</code> — Heading color (default: <code>inherit</code>)<br><code>--muted-color</code> — Muted/secondary text (default: <code>#6d757e</code>)<br><code>--code-color</code> — Inline code color<br><code>--emphasis-color</code> — Strong emphasis color<br><code>--secondary-color</code> / <code>--tertiary-color</code> — Stepped text opacities<br><code>--highlight-color</code> / <code>--highlight-bg</code> — <code>&lt;mark&gt;</code> colors<br><code>--font-sans-serif</code> / <code>--font-monospace</code> — Font stacks"
TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_LABEL="Navigation, Navbar &amp; Offcanvas"
TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_DESC="<strong>Theme nav</strong><br><code>--nav-bg-color</code> — Navbar background<br><code>--nav-text-color</code> — Navbar text<br><code>--mainmenu-nav-link-color</code> — Active nav link<br><br><strong>Navbar tokens</strong><br><code>--navbar-padding-x</code> / <code>--navbar-padding-y</code> — Navbar padding<br><code>--navbar-brand-font-size</code> — Brand font size<br><code>--navbar-toggler-border-color</code> — Mobile toggler border<br><code>--nav-link-padding-x</code> / <code>--nav-link-padding-y</code> — Link padding<br><code>--nav-link-font-weight</code> — Link weight<br><code>--nav-link-disabled-color</code> — Disabled link color<br><br><strong>Offcanvas</strong><br><code>--offcanvas-color</code> — Offcanvas text color<br><code>--offcanvas-padding-x</code> / <code>--offcanvas-padding-y</code> — Offcanvas padding"
TPL_MOKOCASSIOPEIA_CSS_VARS_LAYOUT_LABEL="Layout &amp; Spacing"
TPL_MOKOCASSIOPEIA_CSS_VARS_LAYOUT_DESC="<code>--padding-x</code> / <code>--padding-y</code> — Default component padding<br><code>--nav-toggle-size</code> — Mobile nav toggle button size (default: <code>3rem</code>)<br><code>--secondary-bg</code> — Secondary surface background (default: <code>#eaedf0</code>)<br><code>--tertiary-bg</code> — Tertiary surface background (default: <code>#f9fafb</code>)<br><code>--hr-color</code> — Horizontal rule color<br><code>--border-color-soft</code> — Soft border variant<br><code>--kbd-bg</code> / <code>--kbd-ink</code> — Keyboard element colors<br><code>--toc-bg</code> / <code>--toc-ink</code> — Table of contents colors<br><code>--selection-bg</code> / <code>--selection-ink</code> — Text selection colors<br><code>--gradient</code> — Bootstrap gradient overlay value<br><code>--bg-opacity</code> — Background opacity utility base"
TPL_MOKOCASSIOPEIA_CSS_VARS_BP_LABEL="Breakpoints"
TPL_MOKOCASSIOPEIA_CSS_VARS_BP_DESC="Read-only reference values matching Bootstrap breakpoints.<br><code>--bp-xs</code> — <code>0</code><br><code>--bp-sm</code> — <code>576px</code><br><code>--bp-md</code> — <code>768px</code><br><code>--bp-lg</code> — <code>992px</code><br><code>--bp-xl</code> — <code>1200px</code>"
TPL_MOKOCASSIOPEIA_CSS_VARS_BS_LABEL="Bootstrap Semantic Palette"
TPL_MOKOCASSIOPEIA_CSS_VARS_BS_DESC="These map to Bootstrap components (buttons, alerts, badges). Override to retheme all components at once.<br><code>--primary</code> — <code>#010156</code><br><code>--secondary</code> — <code>#6d757e</code><br><code>--success</code> — <code>#448344</code><br><code>--info</code> — <code>#30638d</code><br><code>--warning</code> — <code>#ad6200</code><br><code>--danger</code> — <code>#a51f18</code><br><code>--light</code> — <code>#f9fafb</code><br><code>--dark</code> — <code>#353b41</code><br>Each color also has an <code>--{color}-rgb</code> variant for use in <code>rgba()</code> expressions."
TPL_MOKOCASSIOPEIA_CSS_VARS_BS_STATES_LABEL="Bootstrap State Colors"
TPL_MOKOCASSIOPEIA_CSS_VARS_BS_STATES_DESC="Contextual state tokens used by alerts, badges and list groups. Replace <code>{color}</code> with <code>primary</code>, <code>secondary</code>, <code>success</code>, <code>info</code>, <code>warning</code>, <code>danger</code>, <code>light</code>, or <code>dark</code>.<br><code>--{color}-text-emphasis</code> — High-contrast text on subtle backgrounds<br><code>--{color}-bg-subtle</code> — Tinted component background<br><code>--{color}-border-subtle</code> — Tinted component border"
TPL_MOKOCASSIOPEIA_CSS_VARS_ALERT_LIST_LABEL="Alert &amp; List Group Colors"
TPL_MOKOCASSIOPEIA_CSS_VARS_ALERT_LIST_DESC="<strong>Alert link colors</strong> — override to adjust link contrast inside <code>.alert-{color}</code> components.<br><code>--alert-{color}-link-color</code> — e.g. <code>--alert-primary-link-color</code><br><br><strong>List group item colors</strong> — contextual surfaces for <code>.list-group-item-{color}</code>.<br><code>--list-group-item-{color}-color</code> — Text color<br><code>--list-group-item-{color}-bg</code> — Background<br><code>--list-group-item-{color}-active-bg</code> — Active state background"
TPL_MOKOCASSIOPEIA_CSS_VARS_COLORS_LABEL="Standard Colors, Grays &amp; Opacity"
TPL_MOKOCASSIOPEIA_CSS_VARS_COLORS_DESC="<strong>Named colors</strong><br><code>--blue</code>, <code>--indigo</code>, <code>--purple</code>, <code>--pink</code>, <code>--red</code>, <code>--orange</code>, <code>--yellow</code>, <code>--green</code>, <code>--teal</code>, <code>--cyan</code>, <code>--black</code>, <code>--white</code><br><br><strong>Gray scale</strong><br><code>--gray-100</code> through <code>--gray-900</code> plus <code>--white-rgb</code> and <code>--black-rgb</code><br><br><strong>Opacity utilities</strong><br><code>--opacity-0</code>, <code>--opacity-5</code>, <code>--opacity-10</code>, <code>--opacity-15</code>, <code>--opacity-20</code>, <code>--opacity-25</code>, <code>--opacity-30</code>, <code>--opacity-50</code>, <code>--opacity-75</code>, <code>--opacity-100</code>"
TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_LABEL="Hero / Banner Overlay"
TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_DESC="Applied to the <code>.custom-hero</code> / <code>.banner-overlay</code> layout. Set on <code>:root[data-bs-theme]</code> so light and dark values are independent.<br><code>--hero-height</code> — Banner height (default: <code>70vh</code>)<br><code>--hero-color</code> — Base text color<br><code>--hero-bg-repeat</code> — Background repeat (default: <code>no-repeat</code>)<br><code>--hero-bg-attachment</code> — Background attachment (default: <code>fixed</code>)<br><code>--hero-bg-position</code> — Background position (default: <code>top center</code>)<br><code>--hero-bg-size</code> — Background size (default: <code>cover</code>)<br><code>--hero-border-bottom</code> — Bottom border (default: <code>solid var(--accent-color-secondary)</code>)<br><code>--hero-overlay-bg</code> — Overlay tint color (light default: <code>hsla(0,0%,0%,0.1)</code> / dark default: <code>hsla(0,0%,0%,0.3)</code>)<br><code>--hero-overlay-padding</code> — Overlay inner padding (default: <code>1em</code>)<br><code>--hero-overlay-text-align</code> — Overlay text alignment (default: <code>center</code>)<br><code>--hero-overlay-text-color</code> — Overlay text color"
TPL_MOKOCASSIOPEIA_CSS_VARS_HEADER_LABEL="Header Background"
TPL_MOKOCASSIOPEIA_CSS_VARS_HEADER_DESC="Controls the background of the topbar/header area.<br><code>--header-background-image</code> — CSS <code>background-image</code> value (default: built-in SVG pattern)<br><code>--header-background-attachment</code> — <code>fixed</code> or <code>scroll</code><br><code>--header-background-repeat</code> — e.g. <code>repeat</code>, <code>no-repeat</code><br><code>--header-background-size</code> — e.g. <code>auto</code>, <code>cover</code>, <code>contain</code>"
TPL_MOKOCASSIOPEIA_CSS_VARS_CONTAINERS_LABEL="Container Backgrounds"
TPL_MOKOCASSIOPEIA_CSS_VARS_CONTAINERS_DESC="Each layout container has its own background variables. Replace <code>{pos}</code> with: <code>below-topbar</code>, <code>top-a</code>, <code>top-b</code>, <code>sidebar</code>, <code>bottom-a</code>, or <code>bottom-b</code>.<br><br><code>--container-{pos}-bg-image</code> — Background image (default: <code>none</code>)<br><code>--container-{pos}-bg-color</code> — Background color (default: <code>transparent</code>)<br><code>--container-{pos}-bg-position</code> — Background position<br><code>--container-{pos}-bg-attachment</code> — <code>fixed</code> or <code>scroll</code><br><code>--container-{pos}-bg-repeat</code> — Repeat behavior<br><code>--container-{pos}-bg-size</code> — e.g. <code>cover</code>, <code>auto</code><br><code>--container-{pos}-border</code> — Border shorthand<br><code>--container-{pos}-border-radius</code> — Border radius<br><br>Also: <code>--container-toc-bg</code> / <code>--container-toc-color</code> for the TOC sidebar."
TPL_MOKOCASSIOPEIA_CSS_VARS_BORDERS_LABEL="Borders"
TPL_MOKOCASSIOPEIA_CSS_VARS_BORDERS_DESC="<code>--border-width</code> — Default width (default: <code>1px</code>)<br><code>--border-style</code> — Default style (default: <code>solid</code>)<br><code>--border-color</code> — Default border color (default: <code>#dfe3e7</code>)<br><code>--border-color-translucent</code> — Semi-transparent border<br><code>--border-radius</code> — Default radius (default: <code>.25rem</code>)<br><code>--border-radius-sm</code> — Small radius<br><code>--border-radius-lg</code> — Large radius<br><code>--border-radius-xl</code> — Extra large radius<br><code>--border-radius-xxl</code> — 2XL radius (default: <code>2rem</code>)<br><code>--border-radius-pill</code> — Pill radius (default: <code>50rem</code>)"
TPL_MOKOCASSIOPEIA_CSS_VARS_SHADOWS_LABEL="Shadows &amp; Shadow Tokens"
TPL_MOKOCASSIOPEIA_CSS_VARS_SHADOWS_DESC="<strong>Box shadows</strong><br><code>--box-shadow</code> — Standard shadow<br><code>--box-shadow-sm</code> — Subtle shadow<br><code>--box-shadow-lg</code> — Prominent shadow<br><code>--box-shadow-inset</code> — Inset shadow<br><br><strong>Shadow color tokens</strong> — used as building blocks by component shadows<br><code>--shadow-color-light</code> — <code>rgba(black, 0.15)</code><br><code>--shadow-color-medium</code> — <code>rgba(black, 0.25)</code><br><code>--shadow-color-dark</code> — <code>rgba(black, 0.30)</code><br><code>--highlight-translucent</code> — <code>rgba(white, 0.15)</code>"
TPL_MOKOCASSIOPEIA_CSS_VARS_FORMS_LABEL="Focus &amp; Forms"
TPL_MOKOCASSIOPEIA_CSS_VARS_FORMS_DESC="<code>--focus-ring-width</code> — Keyboard focus ring width (default: <code>.25rem</code>)<br><code>--focus-ring-opacity</code> — Focus ring opacity<br><code>--focus-ring-color</code> — Focus ring color<br><code>--input-color</code> — Input text color<br><code>--input-bg</code> — Input background<br><code>--input-border-color</code> — Input border color<br><code>--input-focus-border-color</code> — Focused border color<br><code>--input-focus-box-shadow</code> — Focused input shadow<br><code>--input-placeholder-color</code> — Placeholder text color<br><code>--input-disabled-bg</code> — Disabled input background<br><code>--input-disabled-border-color</code> — Disabled input border<br><code>--form-valid-color</code> / <code>--form-valid-border-color</code> — Valid state<br><code>--form-invalid-color</code> / <code>--form-invalid-border-color</code> — Invalid state"
TPL_MOKOCASSIOPEIA_CSS_VARS_BUTTONS_LABEL="Buttons"
TPL_MOKOCASSIOPEIA_CSS_VARS_BUTTONS_DESC="Applied on <code>:root</code> for global button defaults:<br><code>--btn-border-radius</code> — Button border radius<br><code>--btn-box-shadow</code> — Button box shadow<br><br>Applied on <code>.btn</code> for base button tokens (overridable per variant):<br><code>--btn-padding-x</code> / <code>--btn-padding-y</code> — Padding<br><code>--btn-font-size</code> / <code>--btn-font-weight</code> / <code>--btn-line-height</code> — Typography<br><code>--btn-color</code> / <code>--btn-bg</code> / <code>--btn-border-color</code> — Default state<br><code>--btn-hover-color</code> / <code>--btn-hover-bg</code> / <code>--btn-hover-border-color</code> — Hover state<br><code>--btn-active-color</code> / <code>--btn-active-bg</code> / <code>--btn-active-shadow</code> — Active state<br><code>--btn-disabled-opacity</code> — Disabled opacity<br><br>Each <code>.btn-{color}</code> and <code>.btn-outline-{color}</code> class inherits these tokens and sets its own values."
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_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_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_OFFCANVAS_LABEL="Offcanvas Panel"
TPL_MOKOCASSIOPEIA_CSS_VARS_OFFCANVAS_DESC="<strong>Dimensions</strong><br><code>--offcanvas-width</code> — Panel width (default: <code>400px</code>)<br><code>--offcanvas-height</code> — Panel height for top/bottom variants (default: <code>30vh</code>)<br><code>--offcanvas-padding-x</code> / <code>--offcanvas-padding-y</code> — Inner padding<br><br><strong>Colors</strong><br><code>--offcanvas-bg</code> — Panel background (default: <code>var(--body-bg)</code>)<br><code>--offcanvas-color</code> — Panel text color (default: <code>var(--body-color)</code>)<br><code>--offcanvas-border-width</code> / <code>--offcanvas-border-color</code> — Panel border<br><code>--offcanvas-box-shadow</code> — Drop shadow<br><br><strong>Stacking</strong><br><code>--offcanvas-zindex</code> — z-index (default: <code>1045</code>)"
TPL_MOKOCASSIOPEIA_CSS_VARS_VM_LABEL="VirtueMart"
TPL_MOKOCASSIOPEIA_CSS_VARS_VM_DESC="<strong>Surfaces &amp; text</strong><br><code>--vm-surface</code> / <code>--vm-surface-2</code> — Card/panel backgrounds<br><code>--vm-text</code> / <code>--vm-text-strong</code> / <code>--vm-text-muted</code> — Text variants<br><code>--vm-border</code> — Border color<br><code>--vm-price-color</code> — Price text color<br><br><strong>Layout &amp; density</strong><br><code>--vm-container-max-width</code> — Max content width (default: <code>1200px</code>)<br><code>--vm-section-gap</code> — Section spacing (default: <code>2rem</code>)<br><code>--vm-block-radius</code> / <code>--vm-block-shadow</code> — Block appearance<br><br><strong>Typography</strong><br><code>--vm-category-title-size</code> — Category heading size<br><code>--vm-product-title-size</code> — Product title size<br><code>--vm-price-size</code> — Price size<br><br><strong>Buttons</strong><br><code>--vm-btn-primary-bg</code> / <code>--vm-btn-primary-text</code> — Primary button<br><code>--vm-btn-secondary-bg</code> / <code>--vm-btn-secondary-text</code> — Secondary button<br><br><strong>Image overlay controls</strong><br><code>--vm-image-overlay-btn-bg</code> / <code>--vm-image-overlay-btn-color</code> — Overlay button appearance"
TPL_MOKOCASSIOPEIA_CSS_VARS_GABLE_LABEL="Gable"
TPL_MOKOCASSIOPEIA_CSS_VARS_GABLE_DESC="Color tokens used by the Gable extension.<br><code>--gab-blue</code> — <code>#0066cc</code><br><code>--gab-green</code> — <code>#28a745</code><br><code>--gab-red</code> — <code>#dc3545</code><br><code>--gab-orange</code> — <code>#fd7e14</code><br><code>--gab-gray1</code> — <code>#495057</code><br><code>--gab-gray2</code> — <code>#6c757d</code><br><code>--gab-gray3</code> — <code>#adb5bd</code>"
; ===== Misc =====
MOD_BREADCRUMBS_HERE="YOU ARE HERE:"
JGLOBAL_OFFLINE="Offline"
Reference in New Issue View Git Blame Copy Permalink