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

Convert form and alert colors to CSS variables

Browse Source 
Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2026-03-07 21:48:06 +00:00
parent 3e7816ad17
commit bb900de8c6
3 changed files with 41 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/media/css/colors/dark/colors_standard.css
View File

@@ -167,6 +167,16 @@ color-scheme: dark;
--light-border-subtle: #222831; --light-border-subtle: #222831;
--dark-border-subtle: #2b323b; --dark-border-subtle: #2b323b;
/* ===== ALERT LINK COLORS ===== */
--alert-primary-link-color: #b3c1ff;
--alert-secondary-link-color: #9fa6ad;
--alert-success-link-color: #a0e5b3;
--alert-info-link-color: #8eccf2;
--alert-warning-link-color: #ffe4a0;
--alert-danger-link-color: #ffa8a3;
--alert-light-link-color: #f0f4f8;
--alert-dark-link-color: #9fa6ad;
/* ===== STANDARD COLORS ===== */ /* ===== STANDARD COLORS ===== */
--blue: #91a4ff; --blue: #91a4ff;
--indigo: #b19cff; --indigo: #b19cff;
@@ -315,6 +325,8 @@ color-scheme: dark;
--input-placeholder-color: #8894aa; --input-placeholder-color: #8894aa;
--input-disabled-bg: #0f1318; --input-disabled-bg: #0f1318;
--input-disabled-border-color: #2b323b; --input-disabled-border-color: #2b323b;
--input-file-button-active-bg: #2b3441;
--form-range-thumb-active-bg: #4a5766;
--form-valid-color: #78d694; --form-valid-color: #78d694;
--form-valid-border-color: #78d694; --form-valid-border-color: #78d694;
--form-invalid-color: #ff8e86; --form-invalid-color: #ff8e86;

12
src/media/css/colors/light/colors_standard.css
View File

@@ -166,6 +166,16 @@ color-scheme: light;
--light-border-subtle: #eaedf0; --light-border-subtle: #eaedf0;
--dark-border-subtle: #adb5bd; --dark-border-subtle: #adb5bd;
/* ===== ALERT LINK COLORS ===== */
--alert-primary-link-color: #01012a;
--alert-secondary-link-color: #34383d;
--alert-success-link-color: #213f21;
--alert-info-link-color: #172f44;
--alert-warning-link-color: #532f00;
--alert-danger-link-color: #4f0f0b;
--alert-light-link-color: #505050;
--alert-dark-link-color: #1a1c1f;
/* ===== STANDARD COLORS ===== */ /* ===== STANDARD COLORS ===== */
--blue: #010156; --blue: #010156;
--indigo: #6812f3; --indigo: #6812f3;
@@ -314,6 +324,8 @@ color-scheme: light;
--input-placeholder-color: hsl(210, 7%, 46%); --input-placeholder-color: hsl(210, 7%, 46%);
--input-disabled-bg: hsl(210, 16%, 93%); --input-disabled-bg: hsl(210, 16%, 93%);
--input-disabled-border-color: hsl(210, 14%, 83%); --input-disabled-border-color: hsl(210, 14%, 83%);
--input-file-button-active-bg: #dee1e4;
--form-range-thumb-active-bg: #b8bfcc;
--form-valid-color: #448344; --form-valid-color: #448344;
--form-valid-border-color: #448344; --form-valid-border-color: #448344;
--form-invalid-color: #a51f18; --form-invalid-color: #a51f18;

34
src/media/css/template.css
View File

@@ -2729,11 +2729,11 @@ progress {
} }
.form-control:active:not(:disabled):not([readonly])::-webkit-file-upload-button { .form-control:active:not(:disabled):not([readonly])::-webkit-file-upload-button {
background-color: #dee1e4; background-color: var(--input-file-button-active-bg);
} }
.form-control:active:not(:disabled):not([readonly])::file-selector-button { .form-control:active:not(:disabled):not([readonly])::file-selector-button {
background-color: #dee1e4; background-color: var(--input-file-button-active-bg);
} }
.form-control-plaintext { .form-control-plaintext {
@@ -2878,7 +2878,7 @@ textarea.form-control-lg {
.form-select:focus, .form-select:focus,
.custom-select:focus { .custom-select:focus {
border-color: #8894aa; border-color: var(--input-focus-border-color);
outline: 0; outline: 0;
-webkit-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); -webkit-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
@@ -2974,7 +2974,7 @@ textarea.form-control-lg {
} }
.form-check-input:focus { .form-check-input:focus {
border-color: #8894aa; border-color: var(--input-focus-border-color);
outline: 0; outline: 0;
-webkit-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); -webkit-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
@@ -3123,7 +3123,7 @@ textarea.form-control-lg {
} }
.form-range::-webkit-slider-thumb:active { .form-range::-webkit-slider-thumb:active {
background-color: #b8bfcc; background-color: var(--form-range-thumb-active-bg);
} }
.form-range::-webkit-slider-runnable-track { .form-range::-webkit-slider-runnable-track {
@@ -3156,7 +3156,7 @@ textarea.form-control-lg {
} }
.form-range::-moz-range-thumb:active { .form-range::-moz-range-thumb:active {
background-color: #b8bfcc; background-color: var(--form-range-thumb-active-bg);
} }
.form-range::-moz-range-track { .form-range::-moz-range-track {
@@ -5278,7 +5278,7 @@ fieldset:disabled .btn {
--accordion-btn-icon-transform: rotate(-180deg); --accordion-btn-icon-transform: rotate(-180deg);
--accordion-btn-icon-transition: transform 0.2s ease-in-out; --accordion-btn-icon-transition: transform 0.2s ease-in-out;
--accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230f244d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230f244d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
--accordion-btn-focus-border-color: #8894aa; --accordion-btn-focus-border-color: var(--input-focus-border-color);
--accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); --accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
--accordion-body-padding-x: 1.25rem; --accordion-body-padding-x: 1.25rem;
--accordion-body-padding-y: 1rem; --accordion-body-padding-y: 1rem;
@@ -5654,7 +5654,7 @@ fieldset:disabled .btn {
} }
.alert-primary .alert-link { .alert-primary .alert-link {
color: #01012a; color: var(--alert-primary-link-color);
} }
.alert-secondary { .alert-secondary {
@@ -5664,7 +5664,7 @@ fieldset:disabled .btn {
} }
.alert-secondary .alert-link { .alert-secondary .alert-link {
color: #34383d; color: var(--alert-secondary-link-color);
} }
.alert-success { .alert-success {
@@ -5674,7 +5674,7 @@ fieldset:disabled .btn {
} }
.alert-success .alert-link { .alert-success .alert-link {
color: #213f21; color: var(--alert-success-link-color);
} }
.alert-info { .alert-info {
@@ -5684,7 +5684,7 @@ fieldset:disabled .btn {
} }
.alert-info .alert-link { .alert-info .alert-link {
color: #172f44; color: var(--alert-info-link-color);
} }
.alert-warning { .alert-warning {
@@ -5694,7 +5694,7 @@ fieldset:disabled .btn {
} }
.alert-warning .alert-link { .alert-warning .alert-link {
color: #532f00; color: var(--alert-warning-link-color);
} }
.alert-danger { .alert-danger {
@@ -5704,7 +5704,7 @@ fieldset:disabled .btn {
} }
.alert-danger .alert-link { .alert-danger .alert-link {
color: #4f0f0b; color: var(--alert-danger-link-color);
} }
.alert-light { .alert-light {
@@ -5714,7 +5714,7 @@ fieldset:disabled .btn {
} }
.alert-light .alert-link { .alert-light .alert-link {
color: #505050; color: var(--alert-light-link-color);
} }
.alert-dark { .alert-dark {
@@ -5724,7 +5724,7 @@ fieldset:disabled .btn {
} }
.alert-dark .alert-link { .alert-dark .alert-link {
color: #1a1c1f; color: var(--alert-dark-link-color);
} }
@-webkit-keyframes progress-bar-stripes { @-webkit-keyframes progress-bar-stripes {
@@ -16181,7 +16181,7 @@ body:not(.has-sidebar-right) .site-grid .container-component {
} }
.chosen-container.chosen-container-single .chosen-single:focus { .chosen-container.chosen-container-single .chosen-single:focus {
border-color: #8894aa; border-color: var(--input-focus-border-color);
outline: none; outline: none;
} }
@@ -18037,7 +18037,7 @@ nav[data-toggle=toc] .nav-link.active+ul{
border-radius: 0.25rem; border-radius: 0.25rem;
} }
.choices.is-focused { .choices.is-focused {
border-color: #8894aa; border-color: var(--input-focus-border-color);
-webkit-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); -webkit-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
} }