MokoConsulting/MokoCassiopeia
1
1
Fork 0
Code Issues 2 Pull Requests Actions Packages Releases 1 Activity

feat: add hero variant and block color variables to standard theme files

Browse Source 
Adds all 20 hero variant and block color CSS variables to both
light.standard.css and dark.standard.css, matching the custom palette
templates. Users on the standard palette now get hero variants and
block colors out of the box.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Miller
2026-03-26 13:31:02 -05:00
parent 2b7c009f8a
commit eb3ad178c9
2 changed files with 68 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/media/css/theme/dark.standard.css
View File

@@ -534,6 +534,40 @@ color-scheme: dark;
--hero-overlay-text-align: center;
--hero-overlay-text-color: var(--body-color);
/* ===== HERO VARIANTS ===== */
/* Primary — deep navy, dark overlay */
--hero-primary-bg-color: #0d1e3a;
--hero-primary-overlay: linear-gradient(rgba(13, 30, 58, .65), rgba(13, 30, 58, .65));
--hero-primary-color: #f1f5f9;
/* Secondary — darker navy, heavier overlay */
--hero-secondary-bg-color: #080f1e;
--hero-secondary-overlay: linear-gradient(rgba(8, 15, 30, .80), rgba(8, 15, 30, .80));
--hero-secondary-color: #f1f5f9;
/* ===== BLOCK COLORS (top-a / top-b / bottom-a / bottom-b) ===== */
--block-color-1: var(--secondary-bg);
--block-text-1: var(--body-color);
--block-color-2: var(--accent-color-primary);
--block-text-2: #fff;
--block-color-3: rgba(238, 194, 52, .15);
--block-text-3: var(--body-color);
--block-color-4: rgba(74, 166, 100, .15);
--block-text-4: var(--body-color);
/* ===== BLOCK COLOR OVERRIDES ===== */
--block-highlight-bg: var(--accent-color-primary);
--block-highlight-text: #fff;
--block-cta-bg: var(--color-primary);
--block-cta-text: #f1f5f9;
--block-alert-bg: var(--danger, #c23a31);
--block-alert-text: #fff;
/* ===== OFFCANVAS ===== */
--offcanvas-zindex: 1045;
--offcanvas-width: 400px;

34
src/media/css/theme/light.standard.css
View File

@@ -533,6 +533,40 @@ color-scheme: light;
--hero-overlay-text-align: center;
--hero-overlay-text-color: var(--body-color);
/* ===== HERO VARIANTS ===== */
/* Primary — sky blue, light overlay */
--hero-primary-bg-color: var(--color-primary);
--hero-primary-overlay: linear-gradient(rgba(163, 205, 226, .45), rgba(163, 205, 226, .45));
--hero-primary-color: var(--color-primary);
/* Secondary — navy, stronger overlay */
--hero-secondary-bg-color: var(--color-primary);
--hero-secondary-overlay: linear-gradient(rgba(17, 40, 85, .75), rgba(17, 40, 85, .75));
--hero-secondary-color: #f1f5f9;
/* ===== BLOCK COLORS (top-a / top-b / bottom-a / bottom-b) ===== */
--block-color-1: var(--color-primary);
--block-text-1: var(--body-color);
--block-color-2: var(--accent-color-primary);
--block-text-2: #fff;
--block-color-3: var(--warning, #eec234);
--block-text-3: var(--body-color);
--block-color-4: var(--success-bg-subtle, #eef7f0);
--block-text-4: var(--body-color);
/* ===== BLOCK COLOR OVERRIDES ===== */
--block-highlight-bg: var(--accent-color-primary);
--block-highlight-text: #fff;
--block-cta-bg: var(--color-primary);
--block-cta-text: #fff;
--block-alert-bg: var(--danger, #a51f18);
--block-alert-text: #fff;
/* ===== OFFCANVAS ===== */
--offcanvas-zindex: 1045;
--offcanvas-width: 400px;