eryn/erynwells.me
1
0
Fork 0
Code Issues 8 Pull requests 1 Projects Releases Packages Activity Actions

Define all color vars as triples, and create semantic colors that convert the triples to rgb colors

Browse source
This commit is contained in:
Eryn Wells 2022-10-03 19:54:14 -07:00
parent e31a4a268d
commit d862251a8f
3 changed files with 41 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

19
static/styles/railroad.css
View file

@ -1,16 +1,15 @@
:root {
--rect-fill: #fafafa;
--rect-fill: rgba(var(--mid-blue), 0.1);
}
@media (prefers-color-scheme: dark) {
:root {
--rect-fill: #272822;
--rect-fill: rgb(var(--mid-blue), 0.9);
}
}
svg.railroad-diagram path {
stroke-width: 2;
stroke: var(--body-foreground-color);
stroke: var(--foreground-body-color);
fill: none;
}
@ -18,7 +17,7 @@ svg.railroad-diagram text {
font-family: var(--monospace-font-family);
text-anchor: middle;
white-space: pre;
fill: var(--body-foreground-color);
fill: var(--foreground-body-color);
}
svg.railroad-diagram text.diagram-text {
@ -43,7 +42,7 @@ svg.railroad-diagram g.non-terminal text {
svg.railroad-diagram rect {
stroke-width: 2;
stroke: var(--body-foreground-color);
stroke: var(--foreground-body-color);
fill: var(--rect-fill);
}
@ -54,12 +53,12 @@ svg.railroad-diagram rect.group-box {
}
svg.railroad-diagram path.diagram-text {
stroke-width: 3;
stroke: var(--body-foreground-color);
fill: var(--body-background-color);
stroke-width: 2;
stroke: var(--foreground-body-color);
fill: var(--background-body-color);
cursor: help;
}
svg.railroad-diagram g.diagram-text:hover path.diagram-text {
fill: #eee;
fill: var(--rect-fill);
}