From dcbc9e54ca705fe7741c91965a3eb0e4e7e07e6b Mon Sep 17 00:00:00 2001 From: Suraj Shetty Date: Fri, 20 Jan 2023 14:16:04 +0530 Subject: [PATCH] fix: Indicator dot colors in dark mode --- frappe/public/scss/common/css_variables.scss | 7 +- frappe/public/scss/common/indicator.scss | 141 +++---------------- frappe/public/scss/desk/dark.scss | 15 +- 3 files changed, 42 insertions(+), 121 deletions(-) diff --git a/frappe/public/scss/common/css_variables.scss b/frappe/public/scss/common/css_variables.scss index 1914e7479b..aa40c9a17f 100644 --- a/frappe/public/scss/common/css_variables.scss +++ b/frappe/public/scss/common/css_variables.scss @@ -165,8 +165,10 @@ $input-height: 28px !default; --bg-orange: var(--orange-50); --bg-red: var(--red-50); --bg-gray: var(--gray-200); + --bg-grey: var(--gray-200); --bg-light-gray: var(--gray-100); - --bg-dark-gray: var(--gray-900); + --bg-dark-gray: var(--gray-400); + --bg-darkgrey: var(--gray-400); --bg-purple: var(--purple-100); --bg-pink: var(--pink-50); --bg-cyan: var(--cyan-50); @@ -189,6 +191,9 @@ $input-height: 28px !default; --text-on-orange: var(--orange-600); --text-on-red: var(--red-600); --text-on-gray: var(--gray-600); + --text-on-grey: var(--gray-600); + --text-on-darkgrey: var(--gray-700); + --text-on-dark-gray: var(--gray-700); --text-on-light-gray: var(--gray-800); --text-on-purple: var(--purple-700); --text-on-pink: var(--pink-600); diff --git a/frappe/public/scss/common/indicator.scss b/frappe/public/scss/common/indicator.scss index b995cf856f..023e463aef 100644 --- a/frappe/public/scss/common/indicator.scss +++ b/frappe/public/scss/common/indicator.scss @@ -1,19 +1,3 @@ -@mixin indicator-pill-color($color) { - background: var(--bg-#{$color}); - color: var(--text-on-#{$color}); - &::before, - &::after { - background: var(--text-on-#{$color}); - } -} - -@mixin indicator-color($color) { - &::before, - &::after { - background: var(--text-on-#{$color}); - } -} - .indicator, .indicator-pill, .indicator-pill-right, @@ -67,111 +51,30 @@ margin: 0 0 0 4px; } -.indicator.green { - @include indicator-color('green'); +$indicator-colors: green, cyan, blue, orange, yellow, gray, grey, red, pink, darkgrey, purple, light-blue; +@each $color in $indicator-colors { + .indicator.#{"" + $color} { + &::before, + &::after { + background: var(--indicator-dot-#{$color}); + } + } + + .indicator-pill.#{"" + $color}, + .indicator-pill-right.#{"" + $color}, + .indicator-pill-round.#{"" + $color} { + background: var(--bg-#{$color}); + color: var(--text-on-#{$color}); + &::before, + &::after { + background: var(--text-on-#{$color}); + } + } + .indicator { + --indicator-dot-#{"" + $color}: var(--text-on-#{$color}); + } } -.indicator-pill.green, -.indicator-pill-right.green, -.indicator-pill-round.green { - @include indicator-pill-color('green'); -} - -.indicator.cyan { - @include indicator-color('cyan'); -} - -.indicator-pill.cyan, -.indicator-pill-right.cyan, -.indicator-pill-round.cyan { - @include indicator-pill-color('cyan'); -} - -.indicator.blue { - @include indicator-color('blue'); -} - -.indicator-pill.blue, -.indicator-pill-right.blue, -.indicator-pill-round.blue { - @include indicator-pill-color('blue'); -} - -.indicator.orange { - @include indicator-color('orange'); -} - -.indicator-pill.orange, -.indicator-pill-right.orange -.indicator-pill-round.orange { - @include indicator-pill-color('orange'); -} - -.indicator.yellow { - @include indicator-color('yellow'); -} - -.indicator-pill.yellow, -.indicator-pill-right.yellow -.indicator-pill-round.yellow { - @include indicator-pill-color('yellow'); -} - -.indicator.gray, -.indicator.grey { - @include indicator-color('gray'); -} - -.indicator-pill.gray, -.indicator-pill-right.gray, -.indicator-pill-round.gray, -.indicator-pill.grey, -.indicator-pill-right.grey, -.indicator-pill-round.grey { - @include indicator-pill-color('light-gray'); -} - -.indicator.red { - @include indicator-color('red'); -} - -.indicator-pill.red, -.indicator-pill-right.red, -.indicator-pill-round.red { - @include indicator-pill-color('red'); -} - -.indicator.pink { - @include indicator-color('pink'); -} - -.indicator-pill.pink, -.indicator-pill-right.pink, -.indicator-pill-round.pink { - @include indicator-pill-color('pink'); -} - -.indicator-pill.darkgrey, -.indicator-pill-right.darkgrey, -.indicator-pill-round.darkgrey { - @include indicator-pill-color('gray'); -} - -.indicator-pill.purple, -.indicator-pill-right.purple, -.indicator-pill-round.purple { - @include indicator-pill-color('purple'); -} - -.indicator.light-blue { - @include indicator-color('light-blue'); -} - -.indicator-pill.light-blue, -.indicator-pill-right.light-blue, -.indicator-pill-round.light-blue { - @include indicator-pill-color('light-blue'); -} .indicator.blink { animation: blink 1s linear infinite; diff --git a/frappe/public/scss/desk/dark.scss b/frappe/public/scss/desk/dark.scss index aad3e4b597..2d37fc3c4b 100644 --- a/frappe/public/scss/desk/dark.scss +++ b/frappe/public/scss/desk/dark.scss @@ -54,6 +54,9 @@ --bg-orange: var(--orange-500); --bg-red: var(--red-500); --bg-gray: var(--gray-600); + --bg-grey: var(--gray-600); + --bg-darkgrey: var(--gray-800); + --bg-dark-gray: var(--gray-800); --bg-light-gray: var(--gray-700); --bg-dark-gray: var(--gray-300); --bg-purple: var(--purple-600); @@ -65,7 +68,10 @@ --text-on-yellow: var(--yellow-50); --text-on-orange: var(--orange-100); --text-on-red: var(--red-50); - --text-on-gray: var(--gray-300); + --text-on-gray: var(--gray-200); + --text-on-grey: var(--gray-200); + --text-on-darkgrey: var(--gray-200); + --text-on-dark-gray: var(--gray-200); --text-on-light-gray: var(--gray-100); --text-on-purple: var(--purple-100); @@ -190,4 +196,11 @@ color: var(--text-color); background: var(--gray-500); } + + $indicator-colors: green, cyan, blue, orange, yellow, gray, grey, red, pink, darkgrey, purple, light-blue; + @each $color in $indicator-colors { + .indicator { + --indicator-dot-#{"" + $color}: var(--bg-#{$color}); + } + } }