engineering/make_post_sell
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 2 Packages Wiki Activity Actions

refactor: consolidate dark mode theme into tokens.css, tokenize #2d3748

Browse source 
Move :root and [data-theme="dark"] variable blocks from common.css into
tokens.css so the entire theme system lives in one file. Replace ~38
hardcoded #2d3748 dark button backgrounds with var(--dark-button-bg).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
russell@unturf.com 2026-03-06 10:10:46 -05:00
parent 77c7faba40
commit 1c8992a8bd
2 changed files with 163 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

163
make_post_sell/static/css/common.css
View file

@ -525,14 +525,14 @@ pre, code {
}
[data-theme="dark"] .mps-button {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-blue.png");
color: var(--blue-color);
border: 2px solid var(--blue-color);
}
[data-theme="dark"] .mps-button:hover {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-blue2.png");
color: #ffffff;
border: 2px solid var(--blue-color);
@ -546,7 +546,7 @@ button.mps-button-blue {
[data-theme="dark"] a.mps-button-blue,
[data-theme="dark"] button.mps-button-blue,
[data-theme="dark"] input.mps-button-blue {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-blue.png");
color: var(--blue-color);
border: 2px solid var(--blue-color);
@ -555,7 +555,7 @@ button.mps-button-blue {
[data-theme="dark"] a.mps-button-blue:hover,
[data-theme="dark"] button.mps-button-blue:hover,
[data-theme="dark"] input.mps-button-blue:hover {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-blue2.png");
color: #ffffff;
border: 2px solid var(--blue-color);
@ -569,7 +569,7 @@ button.mps-button-green {
[data-theme="dark"] a.mps-button-green,
[data-theme="dark"] button.mps-button-green,
[data-theme="dark"] input.mps-button-green {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-green.png");
color: var(--green-color);
border: 2px solid var(--green-color);
@ -578,7 +578,7 @@ button.mps-button-green {
[data-theme="dark"] a.mps-button-green:hover,
[data-theme="dark"] button.mps-button-green:hover,
[data-theme="dark"] input.mps-button-green:hover {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-green2.png");
color: #ffffff;
border: 2px solid var(--green-color);
@ -594,7 +594,7 @@ input.mps-button-red {
[data-theme="dark"] a.mps-button-red,
[data-theme="dark"] button.mps-button-red,
[data-theme="dark"] input.mps-button-red {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-red.png");
color: var(--red-color);
border: 2px solid var(--red-color);
@ -604,7 +604,7 @@ input.mps-button-red {
[data-theme="dark"] a.mps-button-red:hover,
[data-theme="dark"] button.mps-button-red:hover,
[data-theme="dark"] input.mps-button-red:hover {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-red2.png");
color: #ffffff;
border: 2px solid var(--red-color);
@ -634,7 +634,7 @@ input.mps-button-red {
}
[data-theme="dark"] .mps-cancel-button-red {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-red.png");
border: 2px solid var(--red-color);
color: var(--red-color);
@ -642,7 +642,7 @@ input.mps-button-red {
}
[data-theme="dark"] .mps-cancel-button-red:hover {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-red2.png");
color: #ffffff;
border: 2px solid var(--red-color);
@ -700,7 +700,7 @@ input.mps-button-red {
[data-theme="dark"] .reply-link,
[data-theme="dark"] .edit-link,
[data-theme="dark"] .moderate-link {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-blue.png");
border: 2px solid var(--blue-color);
color: var(--blue-color);
@ -710,7 +710,7 @@ input.mps-button-red {
[data-theme="dark"] .reply-link:hover,
[data-theme="dark"] .edit-link:hover,
[data-theme="dark"] .moderate-link:hover {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-blue2.png");
color: #ffffff;
border: 2px solid var(--blue-color);
@ -718,7 +718,7 @@ input.mps-button-red {
/* Reply button - green */
[data-theme="dark"] .reply-link {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-green.png");
border: 2px solid var(--green-color);
color: var(--green-color);
@ -726,7 +726,7 @@ input.mps-button-red {
}
[data-theme="dark"] .reply-link:hover {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-green2.png");
color: #ffffff;
border: 2px solid var(--green-color);
@ -734,7 +734,7 @@ input.mps-button-red {
/* Delete button - red */
[data-theme="dark"] .delete-link {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-red.png");
border: 2px solid var(--red-color);
color: var(--red-color);
@ -742,7 +742,7 @@ input.mps-button-red {
}
[data-theme="dark"] .delete-link:hover {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-red2.png");
color: #ffffff;
border: 2px solid var(--red-color);
@ -750,7 +750,7 @@ input.mps-button-red {
/* Post comment button - green */
[data-theme="dark"] .mps-comment-form-button {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-green.png");
border: 2px solid var(--green-color);
color: var(--green-color);
@ -758,7 +758,7 @@ input.mps-button-red {
}
[data-theme="dark"] .mps-comment-form-button:hover {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-green2.png");
color: #ffffff;
border: 2px solid var(--green-color);
@ -796,28 +796,28 @@ a.product-edit-button {
}
[data-theme="dark"] a.mps-button.product-edit-button {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-blue.png");
color: #7ab9ff;
border: 2px solid #7ab9ff;
}
[data-theme="dark"] a.mps-button.product-edit-button:hover {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-blue2.png");
color: #ffffff;
border: 2px solid #7ab9ff;
}
[data-theme="dark"] a.mps-button.shop-new-button {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-green.png");
color: var(--green-color);
border: 2px solid var(--green-color);
}
[data-theme="dark"] a.mps-button.shop-new-button:hover {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-green2.png");
color: #ffffff;
border: 2px solid var(--green-color);
@ -826,7 +826,7 @@ a.product-edit-button {
/* Product download and preview buttons - make them green in dark mode */
[data-theme="dark"] a.product-download-button,
[data-theme="dark"] button.product-download-button {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-green.png");
color: var(--green-color);
border: 2px solid var(--green-color);
@ -834,7 +834,7 @@ a.product-edit-button {
[data-theme="dark"] a.product-download-button:hover,
[data-theme="dark"] button.product-download-button:hover {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-green2.png");
color: #ffffff;
border: 2px solid var(--green-color);
@ -842,7 +842,7 @@ a.product-edit-button {
[data-theme="dark"] a.product-preview-button,
[data-theme="dark"] button.product-preview-button {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-green.png");
color: var(--green-color);
border: 2px solid var(--green-color);
@ -850,7 +850,7 @@ a.product-edit-button {
[data-theme="dark"] a.product-preview-button:hover,
[data-theme="dark"] button.product-preview-button:hover {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-green2.png");
color: #ffffff;
border: 2px solid var(--green-color);
@ -881,7 +881,7 @@ a.log-out-button {
}
[data-theme="dark"] a.log-out-button {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-red.png");
border: 2px solid var(--red-color);
color: var(--red-color);
@ -967,14 +967,14 @@ button.cart-save-button {
/* Dark mode cart buttons */
[data-theme="dark"] button.cart-checkout-button {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-green.png");
color: var(--green-color);
border: 2px solid var(--green-color);
}
[data-theme="dark"] button.cart-checkout-button:hover {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-green2.png");
color: #ffffff;
border: 2px solid var(--green-color);
@ -1068,7 +1068,7 @@ div.serp-item:hover {
}
[data-theme="dark"] div.serp-item:hover {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-blue2.png");
border: 2px solid #7ab9ff;
color: #ffffff;
@ -1290,7 +1290,7 @@ section.checkout-page .well {
[data-theme="dark"] .one-column.well.well-green,
[data-theme="dark"] .action-columns.well.well-green {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-green.png");
border: 2px solid var(--green-color);
box-shadow: 0 0 10px rgba(163, 199, 101, 0.3);
@ -1876,14 +1876,14 @@ div.message-ribbon {
[data-theme="dark"] .alert-danger,
[data-theme="dark"] .alert-error {
color: white;
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-red2.png");
border-color: var(--red-color);
}
[data-theme="dark"] .alert-warning {
color: white;
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-red2.png");
border-color: #ffd93d;
}
@ -1891,14 +1891,14 @@ div.message-ribbon {
[data-theme="dark"] .alert-info,
[data-theme="dark"] .alert-notice {
color: white;
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-blue2.png");
border-color: var(--blue-color);
}
[data-theme="dark"] .alert-success {
color: white;
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-green2.png");
border-color: var(--green-color);
}
@ -1937,14 +1937,14 @@ div.message-ribbon {
}
[data-theme="dark"] .add-payment-method-button {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-blue.png");
color: var(--blue-color);
border: 2px solid var(--blue-color);
}
[data-theme="dark"] .add-payment-method-button:hover {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-blue2.png");
color: #ffffff;
border: 2px solid var(--blue-color);
@ -2276,7 +2276,7 @@ img.crypto-button-icon {
}
[data-theme="dark"] .original-comment-box {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-blue.png");
border-left: 4px solid var(--blue-color);
color: var(--text-primary);
@ -2453,90 +2453,7 @@ img.crypto-button-icon {
font-family: var(--font-mono, monospace);
}
/* Dark Mode Theme System */
:root {
/* Light mode colors (default) */
--bg-primary: #ffffff;
--bg-secondary: #f8f9fa;
--bg-tertiary: #e9ecef;
--text-primary: #333333;
--text-secondary: #6c757d;
--text-muted: #666666;
--border-color: #dee2e6;
--border-light: #e9ecef;
--link-color: #5f6368;
--blue-color: #98b6fa;
--green-color: #a3c765;
--red-color: #bc2131;
--success-color: #28a745;
--warning-color: #ffc107;
--error-color: #dc3545;
--info-color: #17a2b8;
/* Form elements */
--input-bg: #ffffff;
--input-border: #cccccc;
--input-text: #333333;
/* Navigation */
--nav-bg: #f9f9fa;
--nav-text: #333333;
/* Cards and containers */
--card-bg: #f8f9fa;
--well-bg: #f9f9fa;
/* Status notices */
--notice-warning-bg: #fff3cd;
--notice-warning-border: #ffeaa7;
--notice-error-bg: #f8d7da;
--notice-error-border: #f5c6cb;
--notice-info-bg: #d1ecf1;
--notice-info-border: #bee5eb;
}
[data-theme="dark"] {
/* Dark mode colors - zealotrush.com inspired gaming theme */
--bg-primary: #0d1117;
--bg-secondary: #161b22;
--bg-tertiary: #21262d;
--text-primary: #ffffff;
--text-secondary: #cccccc;
--text-muted: #999999;
--border-color: #7ab9ff;
--border-light: #5599dd;
--link-color: #7ab9ff;
--blue-color: #7ab9ff;
--green-color: #08e700;
--red-color: #F34C31;
--success-color: #08e700;
--warning-color: #f34c31;
--error-color: #f34c31;
--info-color: #7ab9ff;
/* Form elements */
--input-bg: #161b22;
--input-border: #7ab9ff;
--input-text: #ffffff;
/* Navigation */
--nav-bg: #0d1117;
--nav-text: #ffffff;
/* Cards and containers */
--card-bg: #2d2d2d;
--well-bg: #2d2d2d;
/* Status notices */
--notice-warning-bg: #3e2723;
--notice-warning-border: #5d4037;
--notice-error-bg: #3f1a1a;
--notice-error-border: #5c2626;
--notice-info-bg: #1a365d;
--notice-info-border: #2c5282;
}
/* Apply theme variables to existing elements */
/* Apply theme variables to existing elements (tokens defined in tokens.css) */
body {
background-color: var(--bg-primary);
color: var(--text-primary);
@ -2575,7 +2492,7 @@ textarea {
[data-theme="dark"] .well,
[data-theme="dark"] .well2 {
background-color: #2d3748;
background-color: var(--dark-button-bg, #2d3748);
background-image: url("/static/img/trans-blue.png");
border: 2px solid #7ab9ff;
box-shadow: 0 0 10px rgba(122, 185, 255, 0.3);

123
make_post_sell/static/css/tokens.css
View file

@ -169,6 +169,129 @@
--content-wide: 1200px;
--bp-tablet: 800px;
--bp-desktop: 1200px;
/* ---- App theme (light mode defaults) ---- */
--bg-primary: #ffffff;
--bg-secondary: #f8f9fa;
--bg-tertiary: #e9ecef;
--text-primary: #333333;
--text-secondary: #6c757d;
--text-muted: #666666;
--border-color: #dee2e6;
--border-light: #e9ecef;
--link-color: #5f6368;
--blue-color: #98b6fa;
--green-color: #a3c765;
--red-color: #bc2131;
--success-color: #28a745;
--warning-color: #ffc107;
--error-color: #dc3545;
--info-color: #17a2b8;
/* Form elements */
--input-bg: #ffffff;
--input-border: #cccccc;
--input-text: #333333;
/* Navigation */
--nav-bg: #f9f9fa;
--nav-text: #333333;
/* Cards and containers */
--card-bg: #f8f9fa;
--well-bg: #f9f9fa;
/* Dark mode button surface */
--dark-button-bg: #2d3748;
/* Status notices */
--notice-warning-bg: #fff3cd;
--notice-warning-border:#ffeaa7;
--notice-error-bg: #f8d7da;
--notice-error-border: #f5c6cb;
--notice-info-bg: #d1ecf1;
--notice-info-border: #bee5eb;
}
/* ============================================
DARK MODE
============================================ */
[data-theme="dark"] {
/* zealotrush.com inspired gaming theme */
--bg-primary: #0d1117;
--bg-secondary: #161b22;
--bg-tertiary: #21262d;
--text-primary: #ffffff;
--text-secondary: #cccccc;
--text-muted: #999999;
--border-color: #7ab9ff;
--border-light: #5599dd;
--link-color: #7ab9ff;
--blue-color: #7ab9ff;
--green-color: #08e700;
--red-color: #F34C31;
--success-color: #08e700;
--warning-color: #f34c31;
--error-color: #f34c31;
--info-color: #7ab9ff;
/* Form elements */
--input-bg: #161b22;
--input-border: #7ab9ff;
--input-text: #ffffff;
/* Navigation */
--nav-bg: #0d1117;
--nav-text: #ffffff;
/* Cards and containers */
--card-bg: #2d2d2d;
--well-bg: #2d2d2d;
/* Status notices */
--notice-warning-bg: #3e2723;
--notice-warning-border:#5d4037;
--notice-error-bg: #3f1a1a;
--notice-error-border: #5c2626;
--notice-info-bg: #1a365d;
--notice-info-border: #2c5282;
/* Surfaces and tokens override */
--surface-base: #0d1117;
--surface-dim: #161b22;
--surface-container: #21262d;
--surface-container-high:#2d3748;
--surface-inverse: #ffffff;
--text-body: #cccccc;
--text-faint: #666666;
--text-disabled: #444444;
--text-inverse: #0d1117;
--border-default: #7ab9ff;
--border-focus: #7ab9ff;
--border-error: #F34C31;
--color-blue: #7ab9ff;
--color-green: #08e700;
--color-navy: #7ab9ff;
--color-navy-light: #7ab9ff;
--color-danger: #F34C31;
--color-check: #08e700;
--color-cross: #F34C31;
--color-gold: #f59e0b;
/* Alert tokens */
--alert-success-bg: #1a3a1a;
--alert-success-text: #08e700;
--alert-success-border: #08e700;
--alert-info-bg: #1a365d;
--alert-info-text: #7ab9ff;
--alert-info-border: #7ab9ff;
--alert-warning-bg: #3e2723;
--alert-warning-text: #ffd93d;
--alert-warning-border: #ffd93d;
--alert-danger-bg: #3f1a1a;
--alert-danger-text: #F34C31;
--alert-danger-border: #F34C31;
}
/* ============================================