improve css management (#2746)

5 files changed, 54 insertions, 53 deletions

diff --git a/server/sonar-web/src/main/js/components/ui/CoverageRating.tsx b/server/sonar-web/src/main/js/components/ui/CoverageRating.tsx
index e7eda495d7f..61dcb6e3ef4 100644
--- a/server/sonar-web/src/main/js/components/ui/CoverageRating.tsx
+++ b/server/sonar-web/src/main/js/components/ui/CoverageRating.tsx
@@ -19,6 +19,7 @@
  */
 import * as React from 'react';
 import { DonutChart } from '../charts/donut-chart';
+import * as theme from '../../app/theme';
 
 const SIZE_TO_WIDTH_MAPPING = { small: 16, normal: 24, big: 40, huge: 60 };
 
@@ -36,8 +37,8 @@ export default function CoverageRating({ muted = false, size = 'normal', value }
   if (value != null) {
     const numberValue = Number(value);
     data = [
-      { value: numberValue, fill: muted ? '#bdbdbd' : '#00aa00' },
-      { value: 100 - numberValue, fill: muted ? '#f3f3f3' : '#d4333f' }
+      { value: numberValue, fill: muted ? theme.gray71 : theme.green },
+      { value: 100 - numberValue, fill: muted ? theme.barBackgroundColor : theme.red }
     ];
   }
 
diff --git a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css
index 0cb22a681ce..dd8493ac31b 100644
--- a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css
+++ b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css
@@ -4,10 +4,10 @@
   vertical-align: top;
   justify-content: center;
   align-items: center;
-  width: 24px;
-  height: 24px;
-  border: 3px solid #ed7d20;
-  border-radius: 24px;
+  width: var(--controlHeight);
+  height: var(--controlHeight);
+  border: 3px solid var(--orange);
+  border-radius: var(--controlHeight);
   box-sizing: border-box;
 }
 
@@ -39,12 +39,12 @@
 }
 
 .duplications-rating:after {
-  border-radius: 24px;
+  border-radius: var(--controlHeight);
   content: '';
 }
 
 .duplications-rating-A {
-  border-color: #00aa00;
+  border-color: var(--green);
 }
 
 .duplications-rating-A:after {
@@ -52,13 +52,13 @@
 }
 
 .duplications-rating-B {
-  border-color: #b0d513;
+  border-color: var(--lightGreen);
 }
 
 .duplications-rating-B:after {
   width: 6px;
   height: 6px;
-  background-color: #b0d513;
+  background-color: var(--lightGreen);
 }
 
 .duplications-rating-small.duplications-rating-B:after {
@@ -67,8 +67,8 @@
 }
 
 .duplications-rating-big.duplications-rating-B:after {
-  width: 12px;
-  height: 12px;
+  width: var(--smallFontSize);
+  height: var(--smallFontSize);
 }
 
 .duplications-rating-huge.duplications-rating-B:after {
@@ -77,13 +77,13 @@
 }
 
 .duplications-rating-C {
-  border-color: #eabe06;
+  border-color: var(--yellow);
 }
 
 .duplications-rating-C:after {
   width: 8px;
   height: 8px;
-  background-color: #eabe06;
+  background-color: var(--yellow);
 }
 
 .duplications-rating-small.duplications-rating-C:after {
@@ -97,18 +97,18 @@
 }
 
 .duplications-rating-huge.duplications-rating-C:after {
-  width: 24px;
-  height: 24px;
+  width: var(--controlHeight);
+  height: var(--controlHeight);
 }
 
 .duplications-rating-D {
-  border-color: #ed7d20;
+  border-color: var(--orange);
 }
 
 .duplications-rating-D:after {
-  width: 12px;
-  height: 12px;
-  background-color: #ed7d20;
+  width: var(--smallFontSize);
+  height: var(--smallFontSize);
+  background-color: var(--orange);
 }
 
 .duplications-rating-small.duplications-rating-D:after {
@@ -117,8 +117,8 @@
 }
 
 .duplications-rating-big.duplications-rating-D:after {
-  width: 24px;
-  height: 24px;
+  width: var(--controlHeight);
+  height: var(--controlHeight);
 }
 
 .duplications-rating-huge.duplications-rating-D:after {
@@ -127,13 +127,13 @@
 }
 
 .duplications-rating-E {
-  border-color: #d4333f;
+  border-color: var(--red);
 }
 
 .duplications-rating-E:after {
   width: 14px;
   height: 14px;
-  background-color: #d4333f;
+  background-color: var(--red);
 }
 
 .duplications-rating-small.duplications-rating-E:after {
diff --git a/server/sonar-web/src/main/js/components/ui/Level.css b/server/sonar-web/src/main/js/components/ui/Level.css
index 64d8f63a168..455b05036db 100644
--- a/server/sonar-web/src/main/js/components/ui/Level.css
+++ b/server/sonar-web/src/main/js/components/ui/Level.css
@@ -4,13 +4,13 @@
   min-width: 80px;
   padding-left: 9px;
   padding-right: 9px;
-  height: 24px;
-  line-height: 24px;
-  border-radius: 24px;
+  height: var(--controlHeight);
+  line-height: var(--controlHeight);
+  border-radius: var(--controlHeight);
   box-sizing: border-box;
   color: #fff;
   letter-spacing: 0.02em;
-  font-size: 13px;
+  font-size: var(--baseFontSize);
   font-weight: 400;
   text-align: center;
   text-shadow: 0 0 1px rgba(0, 0, 0, 0.35);
@@ -25,7 +25,7 @@
   margin-bottom: -1px;
   height: 18px;
   line-height: 18px;
-  font-size: 12px;
+  font-size: var(--smallFontSize);
 }
 
 .level-muted {
@@ -43,17 +43,17 @@ a > .level:hover {
 }
 
 .level-OK {
-  background-color: #00aa00;
+  background-color: var(--green);
 }
 
 .level-WARN {
-  background-color: #ed7d20;
+  background-color: var(--orange);
 }
 
 .level-ERROR {
-  background-color: #d4333f;
+  background-color: var(--red);
 }
 
 .level-NONE {
-  background-color: #b4b4b4;
+  background-color: var(--gray71);
 }
diff --git a/server/sonar-web/src/main/js/components/ui/Rating.css b/server/sonar-web/src/main/js/components/ui/Rating.css
index 2c7d5df1b4d..cec24087646 100644
--- a/server/sonar-web/src/main/js/components/ui/Rating.css
+++ b/server/sonar-web/src/main/js/components/ui/Rating.css
@@ -1,12 +1,12 @@
 .rating {
   display: inline-block;
-  width: 24px;
-  height: 24px;
-  line-height: 24px;
-  border-radius: 24px;
+  width: var(--controlHeight);
+  height: var(--controlHeight);
+  line-height: var(--controlHeight);
+  border-radius: var(--controlHeight);
   box-sizing: border-box;
   color: #fff;
-  font-size: 16px;
+  font-size: var(--bigFontSize);
   font-weight: 400;
   text-align: center;
   text-shadow: 0 0 1px rgba(0, 0, 0, 0.35);
@@ -30,35 +30,35 @@ a > .rating:hover {
 
 .rating-A {
   line-height: 23px;
-  background-color: #00aa00;
+  background-color: var(--green);
 }
 
 a > .rating-A {
-  border-bottom-color: #00aa00;
+  border-bottom-color: var(--green);
 }
 
 .rating-B {
-  background-color: #b0d513;
+  background-color: var(--lightGreen);
 }
 
 a .rating-B {
-  border-bottom-color: #b0d513;
+  border-bottom-color: var(--lightGreen);
 }
 
 .rating-C {
-  background-color: #eabe06;
+  background-color: var(--yellow);
 }
 
 a .rating-C {
-  border-bottom-color: #eabe06;
+  border-bottom-color: var(--yellow);
 }
 
 .rating-D {
-  background-color: #ed7d20;
+  background-color: var(--orange);
 }
 
 a .rating-D {
-  border-bottom-color: #ed7d20;
+  border-bottom-color: var(--orange);
 }
 
 .rating-E {
@@ -75,5 +75,5 @@ a .rating-E {
   line-height: 18px;
   margin-top: -1px;
   margin-bottom: -1px;
-  font-size: 12px;
+  font-size: var(--smallFontSize);
 }
diff --git a/server/sonar-web/src/main/js/components/ui/SizeRating.css b/server/sonar-web/src/main/js/components/ui/SizeRating.css
index 846a993febd..351ee56a6e4 100644
--- a/server/sonar-web/src/main/js/components/ui/SizeRating.css
+++ b/server/sonar-web/src/main/js/components/ui/SizeRating.css
@@ -1,13 +1,13 @@
 .size-rating {
   display: inline-block;
   vertical-align: top;
-  width: 24px;
-  height: 24px;
-  line-height: 24px;
-  border-radius: 24px;
-  background-color: #4b9fd5;
+  width: var(--controlHeight);
+  height: var(--controlHeight);
+  line-height: var(--controlHeight);
+  border-radius: var(--controlHeight);
+  background-color: var(--blue);
   color: #fff;
-  font-size: 12px;
+  font-size: var(--smallFontSize);
   text-align: center;
   text-shadow: 0 0 1px rgba(0, 0, 0, 0.35);
 }