Refactor commit graph styling to use css variables (#17860) - Use common variables for colors and font - Alter graph color 5 to provide enough contrast on both themes

Changes

2 changed files (+15/-53)

• web_src/less/features/gitgraph.less
  • @@ -68,15 +68,15 @@
    align-items: center; .node-relation { - font-family: "Bitstream Vera Sans Mono", Courier, monospace; + font-family: var(--fonts-monospace); } .author { - color: #666666; + color: var(--color-text-light); } .time { - color: #999999; + color: var(--color-text-light-3); font-size: 80%; }
  • @@ -85,8 +85,8 @@
    } a em { - color: #bb0000; - border-bottom: 1px dotted #bbbbbb; + color: var(--color-red); + border-bottom: 1px dotted var(--color-secondary); text-decoration: none; font-style: normal; }
  • @@ -108,7 +108,7 @@
    width: 100%; li.highlight.hover { - background-color: rgba(0, 0, 0, .05); + background-color: var(--color-secondary-alpha-30); } .tags a.button {
  • @@ -146,13 +146,13 @@
    &.monochrome #rel-container { .flow-group { - stroke: grey; - fill: grey; + stroke: var(--color-secondary-dark-5); + fill: var(--color-secondary-dark-5); } .flow-group.highlight { - stroke: black; - fill: black; + stroke: var(--color-secondary-dark-12); + fill: var(--color-secondary-dark-12); } }
  • @@ -164,7 +164,7 @@
    } &.flow-color-16-2 { - stroke: hsl(356, 58%, 54%); + stroke: #ce4751; fill: #ce4751; }
  • @@ -179,8 +179,8 @@
    } &.flow-color-16-5 { - stroke: #3d27aa; - fill: #3d27aa; + stroke: #7445e9; + fill: #7445e9; } &.flow-color-16-6 {
  • @@ -261,8 +261,8 @@
    } &.flow-color-16-5 { - stroke: #4e33d1; - fill: #4f35d1; + stroke: #8455f9; + fill: #8455f9; } &.flow-color-16-6 {
• web_src/less/themes/theme-arc-green.less
  • @@ -676,44 +676,6 @@ img[src$="/img/matrix.svg"] {
    filter: invert(80%); } - #git-graph-container li .time { - color: #6a737d; - } - - #git-graph-container.monochrome #rel-container .flow-group { - stroke: dimgrey; - fill: dimgrey; - } - - #git-graph-container.monochrome #rel-container .flow-group.highlight { - stroke: darkgrey; - fill: darkgrey; - } - - #git-graph-container:not(.monochrome) #rel-container .flow-group { - &.flow-color-16-5 { - stroke: #5543b1; - fill: #5543b1; - } - } - - #git-graph-container:not(.monochrome) #rel-container .flow-group.highlight { - &.flow-color-16-5 { - stroke: #7058e6; - fill: #7058e6; - } - } - - #git-graph-container #rev-list li.highlight.hover { - background-color: rgba(255, 255, 255, .1); - } - - #git-graph-container .ui.buttons button#flow-color-monochrome.ui.button { - border-left-color: rgb(76, 80, 92); - border-left-style: solid; - border-left-width: 1px; - } - .mermaid-chart { filter: invert(84%) hue-rotate(180deg); }