color manual fixing
This commit is contained in:
+20
-20
@@ -43,7 +43,7 @@
|
||||
|
||||
/* Neutrals (unchanged) */
|
||||
--color-background: #E8E4DC; /* Off-White - light backgrounds */
|
||||
--color-text: #1A1A1A; /* Deep Black - text color */
|
||||
--color-body: #1A1A1A; /* Deep Black - body text color */
|
||||
|
||||
/* Semantic Aliases - used by components */
|
||||
--color-accent-content: #A5C87A; /* Light Olive */
|
||||
@@ -91,7 +91,7 @@
|
||||
========================================================================== */
|
||||
|
||||
.logo-badge {
|
||||
border: 2px solid var(--color-text);
|
||||
border: 2px solid var(--color-body);
|
||||
box-shadow: 4px 4px 6px rgba(26, 26, 26, 0.5);
|
||||
}
|
||||
|
||||
@@ -106,7 +106,7 @@
|
||||
|
||||
/* Label styling - semibold weight per specs */
|
||||
[data-flux-label] {
|
||||
@apply !mb-0 !leading-tight font-semibold text-text;
|
||||
@apply !mb-0 !leading-tight font-semibold text-body;
|
||||
}
|
||||
|
||||
/* Input, Textarea, Select base styling */
|
||||
@@ -115,7 +115,7 @@ textarea[data-flux-control],
|
||||
[data-flux-control] input,
|
||||
select[data-flux-control],
|
||||
[data-flux-select-button] {
|
||||
@apply border-text/30 rounded-md transition-colors;
|
||||
@apply border-body/30 rounded-md transition-colors text-body;
|
||||
}
|
||||
|
||||
/* Focus states - Warm Gray border with subtle ring */
|
||||
@@ -135,13 +135,13 @@ textarea[data-flux-control] {
|
||||
/* Checkbox styling - Light Olive accent when checked */
|
||||
[data-flux-checkbox] input[type="checkbox"],
|
||||
input[type="checkbox"][data-flux-control] {
|
||||
@apply w-5 h-5 rounded border-text/30 text-accent focus:ring-accent focus:ring-offset-0;
|
||||
@apply w-5 h-5 rounded border-body/30 text-accent focus:ring-accent focus:ring-offset-0;
|
||||
}
|
||||
|
||||
/* Radio styling - Light Olive accent when selected */
|
||||
[data-flux-radio] input[type="radio"],
|
||||
input[type="radio"][data-flux-control] {
|
||||
@apply w-5 h-5 border-text/30 text-accent focus:ring-accent focus:ring-offset-0;
|
||||
@apply w-5 h-5 border-body/30 text-accent focus:ring-accent focus:ring-offset-0;
|
||||
}
|
||||
|
||||
/* Error state styling for Flux fields */
|
||||
@@ -185,10 +185,10 @@ input[type="radio"][data-flux-control] {
|
||||
|
||||
/* Prose Brand styling for blog posts - Olive Green palette (Story 12.2) */
|
||||
.prose-brand {
|
||||
--tw-prose-headings: var(--color-text); /* Deep Black */
|
||||
--tw-prose-headings: var(--color-body); /* Deep Black */
|
||||
--tw-prose-links: var(--color-primary); /* Olive Green */
|
||||
--tw-prose-bold: var(--color-text); /* Deep Black */
|
||||
--tw-prose-body: var(--color-text); /* Deep Black */
|
||||
--tw-prose-bold: var(--color-body); /* Deep Black */
|
||||
--tw-prose-body: var(--color-body); /* Deep Black */
|
||||
}
|
||||
|
||||
.prose-brand a {
|
||||
@@ -201,10 +201,10 @@ input[type="radio"][data-flux-control] {
|
||||
|
||||
/* Backward compatibility alias for prose-navy */
|
||||
.prose-navy {
|
||||
--tw-prose-headings: var(--color-text);
|
||||
--tw-prose-headings: var(--color-body);
|
||||
--tw-prose-links: var(--color-primary);
|
||||
--tw-prose-bold: var(--color-text);
|
||||
--tw-prose-body: var(--color-text);
|
||||
--tw-prose-bold: var(--color-body);
|
||||
--tw-prose-body: var(--color-body);
|
||||
}
|
||||
|
||||
.prose-navy a {
|
||||
@@ -266,8 +266,8 @@ small, .text-sm {
|
||||
|
||||
/* Secondary button - Outlined with Light Olive border, Deep Black text */
|
||||
.btn-secondary {
|
||||
@apply bg-transparent border-2 border-accent text-text rounded-md px-6 py-3 font-semibold transition-colors;
|
||||
@apply hover:bg-accent hover:text-text;
|
||||
@apply bg-transparent border-2 border-accent text-body rounded-md px-6 py-3 font-semibold transition-colors;
|
||||
@apply hover:bg-accent hover:text-body;
|
||||
@apply focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2;
|
||||
}
|
||||
|
||||
@@ -356,7 +356,7 @@ button.btn-danger:disabled {
|
||||
|
||||
/* Input field styling */
|
||||
.input-field {
|
||||
@apply w-full border border-text/30 rounded-md px-4 py-3
|
||||
@apply w-full border border-body/30 rounded-md px-4 py-3
|
||||
focus:border-accent focus:ring-2 focus:ring-accent/20
|
||||
transition-colors outline-none bg-white;
|
||||
}
|
||||
@@ -368,7 +368,7 @@ button.btn-danger:disabled {
|
||||
|
||||
/* Form label styling */
|
||||
.form-label {
|
||||
@apply block text-sm font-semibold text-text mb-2;
|
||||
@apply block text-sm font-semibold text-body mb-2;
|
||||
}
|
||||
|
||||
/* Required field indicator - for manual class usage */
|
||||
@@ -390,7 +390,7 @@ button.btn-danger:disabled {
|
||||
|
||||
/* Textarea specific styling */
|
||||
.textarea-field {
|
||||
@apply w-full border border-text/30 rounded-md px-4 py-3
|
||||
@apply w-full border border-body/30 rounded-md px-4 py-3
|
||||
focus:border-accent focus:ring-2 focus:ring-accent/20
|
||||
transition-colors outline-none bg-white
|
||||
min-h-[120px] resize-y;
|
||||
@@ -398,20 +398,20 @@ button.btn-danger:disabled {
|
||||
|
||||
/* Select dropdown styling */
|
||||
.select-field {
|
||||
@apply w-full border border-text/30 rounded-md px-4 py-3
|
||||
@apply w-full border border-body/30 rounded-md px-4 py-3
|
||||
focus:border-accent focus:ring-2 focus:ring-accent/20
|
||||
transition-colors outline-none bg-white;
|
||||
}
|
||||
|
||||
/* Custom checkbox styling */
|
||||
.checkbox-custom {
|
||||
@apply w-5 h-5 rounded border-text/30 text-accent
|
||||
@apply w-5 h-5 rounded border-body/30 text-accent
|
||||
focus:ring-accent focus:ring-offset-0;
|
||||
}
|
||||
|
||||
/* Custom radio styling */
|
||||
.radio-custom {
|
||||
@apply w-5 h-5 border-text/30 text-accent
|
||||
@apply w-5 h-5 border-body/30 text-accent
|
||||
focus:ring-accent focus:ring-offset-0;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user