/* Shared CoA Apps colour tokens.
Each app still defines its own full palette in its own stylesheet - this
file is only for colours that need to be the SAME across products, so a
sidebar in one app is the same grey as a sidebar in another.
Load it BEFORE the app's own stylesheet:
Themes follow the shared theme key: dark is the default, and light is
opted into with data-theme="light" on , the same switch every other
CoA app uses.
---- Sidebar surfaces ----
--surface-sidebar a panel that frames the page's main content
--surface-sidebar-raised a card sitting INSIDE one of those panels
Both step AWAY from the page background rather than in a fixed direction:
lighter in dark mode, darker in light mode. That is why they can't just be
--surface-raised, which in the light palette sits between the sidebar and
the background and would cut the separation rather than add to it.
They are meant to carry no border. A panel that is both a different colour
and outlined reads as a box inside a box. */
:root {
--surface-sidebar: #242424;
--surface-sidebar-raised: #363636;
}
:root[data-theme="light"] {
--surface-sidebar: #e2e2e2;
--surface-sidebar-raised: #f3f3f3;
}
/* ---- Dividers and card outlines ----
--divider-color the line between items in a list, and the outline
around a modal card
Taken from Access-a-Bible, where it started life as a softened
--border-color: 66 book dividers stacked down a list read louder than
the book names they separated, so it was knocked back to 65% and then
reused for modal outlines.
Deliberately a self-contained rgba() rather than a relative colour
derived from each app's own --border-color. Two reasons: those values
differ per app (#aaaaaa here, #9a9a9a in Lyrics/Story Creator/CoATools,
#8a8a85 in ShaSha), which is exactly the inconsistency this is meant to
remove; and an app with no --border-color of its own would get nothing
at all.
It keeps the alpha rather than being flattened to a hex so it still
composites over whatever surface it sits on - a divider inside a raised
card and one on the page background stay in the same relationship they
have now. */
:root {
--divider-color: rgba(170, 170, 170, 0.65);
}
:root[data-theme="light"] {
--divider-color: rgba(68, 68, 68, 0.65);
}