From 1c8992a8bd4e665d594a66f4616b39abbe098fb2 Mon Sep 17 00:00:00 2001 From: "russell@unturf.com" Date: Fri, 6 Mar 2026 10:10:46 -0500 Subject: [PATCH] refactor: consolidate dark mode theme into tokens.css, tokenize #2d3748 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 --- make_post_sell/static/css/common.css | 163 +++++++-------------------- make_post_sell/static/css/tokens.css | 123 ++++++++++++++++++++ 2 files changed, 163 insertions(+), 123 deletions(-) diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css index 4708c75..3b1bfc2 100644 --- a/make_post_sell/static/css/common.css +++ b/make_post_sell/static/css/common.css @@ -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); diff --git a/make_post_sell/static/css/tokens.css b/make_post_sell/static/css/tokens.css index 2ae157a..373b65e 100644 --- a/make_post_sell/static/css/tokens.css +++ b/make_post_sell/static/css/tokens.css @@ -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; } /* ============================================