feat: update color variables

Use color variables to set color in less and jsx, this makes it easy to change the theme for all pages.

Change-Id: I9b82c4624826854d40d11da4e6ce4a9137b86085

.eslintrc

@@ -74,6 +74,10 @@
           [
             "asset",
             "./src/asset"
+          ],
+          [
+            "styles",
+            "./src/styles"
           ]
         ],
         "extensions": [
@@ -134,6 +138,7 @@
     "t": true,
     "globals": true,
     "request": true,
-    "METRICDICT": true
+    "METRICDICT": true,
+    "globalCSS": true
   }
 }

.stylelintrc.json

@@ -10,6 +10,12 @@
   "rules": {
     "no-descending-specificity": null,
     "at-rule-no-unknown": null,
-    "color-function-notation": "legacy"
+    "color-function-notation": "legacy",
+    "property-no-unknown": [
+      true,
+      {
+        "ignoreProperties": ["/Color$/"]
+      }
+    ]
   }
 }

src/components/Cards/NotFound/index.less

@@ -18,7 +18,7 @@
   vertical-align: top;
 
   :global .h1 {
-    color: #abb4be;
+    color: @light-color08;
     font-size: 120px;
     line-height: 1.4;
     text-align: left;

src/components/DetailCard/index.less

@@ -8,11 +8,6 @@
 @resource-box-bg: #fbfdff;
 @resource-box-border: 1px solid #cfe1ff;
 
-@success: #57e39b;
-@warning: #fedf40;
-@error: #eb354d;
-@link: #0068ff;
-
 .card {
   flex: 1;
   margin-bottom: @mid-space;

src/components/Form/index.less

@@ -100,7 +100,7 @@
 .tips-icon {
   margin-top: 2px;
   margin-right: 4px;
-  color: #0068ff;
+  color: @primary-color;
 }
 
 .footer-left {

src/components/FormItem/Upload/index.jsx

@@ -28,8 +28,8 @@ export default class index extends Component {
   get progress() {
     return {
       strokeColor: {
-        '0%': '#108ee9',
+        '0%': globalCSS.primaryColor,
-        '100%': '#87d068',
+        '100%': globalCSS.successColor,
       },
       strokeWidth: 3,
       format: (percent) => `${parseFloat(percent.toFixed(2))}%`,

src/components/Layout/GlobalHeader/Token.jsx

@@ -82,7 +82,7 @@ export class Token extends ModalAction {
     const now = Date.now();
     if (now > this.keystoneTokenExp) {
       return (
-        <span style={{ color: 'rgb(232, 104, 74)' }}>
+        <span style={globalCSS.warnDarkColor}>
           {t('Keystone token is expired.')}
         </span>
       );

src/components/Loading/index.jsx

@@ -28,7 +28,7 @@ const Loading = ({ pastDelay, timedOut, error }) => {
       >
         <Icon
           type="loading"
-          style={{ fontSize: 32, color: '#1890ff' }}
+          style={{ fontSize: 32, color: globalCSS.primaryColor }}
           theme="outlined"
         />
         <p>Loading...</p>

src/components/Notify/index.jsx

@@ -42,19 +42,19 @@ const open = (args) => {
   let icon = null;
 
   if (type === 'info') {
-    iconColor = '#0068FF';
+    iconColor = globalCSS.primaryColor;
     icon = <InfoCircleOutlined theme="filled" style={{ color: iconColor }} />;
   } else if (type === 'success') {
-    iconColor = '#57E39B';
+    iconColor = globalCSS.successColor;
     icon = <CheckCircleOutlined theme="filled" style={{ color: iconColor }} />;
   } else if (type === 'error') {
-    iconColor = '#EB354D';
+    iconColor = globalCSS.errorColor;
     icon = <CloseCircleOutlined theme="filled" style={{ color: iconColor }} />;
   } else if (type === 'process') {
-    iconColor = '#0068FF';
+    iconColor = globalCSS.primaryColor;
     icon = <LoadingOutlined style={{ color: iconColor }} />;
   } else if (type === 'warn') {
-    iconColor = '#FEDF40';
+    iconColor = globalCSS.warnColor;
     icon = <InfoCircleOutlined theme="filled" style={{ color: iconColor }} />;
   }
 

src/components/Progress/index.jsx

@@ -30,9 +30,9 @@ export default class index extends Component {
   static defaultProps = {
     wanValue: 70,
     dangerValue: 90,
-    infoColor: 'rgba(0, 104, 255, 0.65)',
+    infoColor: globalCSS.primaryColor,
-    warnColor: 'rgba(254, 223, 64, 0.65)',
+    warnColor: globalCSS.warnDarkColor,
-    dangerColor: 'rgba(235, 53, 77, 0.65)',
+    dangerColor: globalCSS.dangerColor,
     label: '',
   };
 

src/components/ProjectProgress/index.jsx

@@ -30,9 +30,9 @@ export default class index extends Component {
   static defaultProps = {
     wanValue: 70,
     dangerValue: 90,
-    infoColor: 'rgba(0, 104, 255, 0.65)',
+    infoColor: globalCSS.primaryColor,
-    warnColor: 'rgba(254, 223, 64, 0.65)',
+    warnColor: globalCSS.warnDarkColor,
-    dangerColor: 'rgba(235, 53, 77, 0.65)',
+    dangerColor: globalCSS.dangerColor,
     label: '',
   };
 

src/components/QuotaChart/Ring.jsx

@@ -25,11 +25,11 @@ import {
 import { Tooltip as AntTooltip } from 'antd';
 
 export const typeColors = {
-  used: '#5B8FF9',
+  used: globalCSS.primaryColor,
   reserved: '#5D7092',
-  add: '#5AD8A6',
+  add: globalCSS.successColor,
   left: '#eee',
-  danger: '#E8684A',
+  danger: globalCSS.warnDarkColor,
 };
 
 export const getAddValueColor = (percent) => {

src/components/Tables/Base/index.jsx

@@ -337,7 +337,7 @@ export class BaseTable extends React.Component {
     }
     return (value) => {
       const valueStr = isString(value) ? value : (value || 0).toFixed(2);
-      return <span style={{ color: '#f50' }}>{valueStr}</span>;
+      return <span style={{ color: globalCSS.moneyColor }}>{valueStr}</span>;
     };
   };
 

src/components/Tables/SimpleTable/index.jsx

@@ -171,7 +171,7 @@ export default class SimpleTable extends React.Component {
     }
     return (value) => {
       const valueStr = isString(value) ? value : (value || 0).toFixed(2);
-      return <span style={{ color: '#f50' }}>{valueStr}</span>;
+      return <span style={{ color: globalCSS.moneyColor }}>{valueStr}</span>;
     };
   };
 

src/containers/List/index.less

@@ -17,7 +17,7 @@
       border: 1px solid #ffe58f;
 
       .ant-alert-icon {
-        color: #faad14;
+        color: @warn-color;
       }
     }
   }

src/core/index.jsx

@@ -22,11 +22,13 @@ import enUS from 'antd/es/locale/en_US';
 import globalRootStore from 'stores/root';
 import PageLoading from 'components/PageLoading';
 import metricDict from 'resources/prometheus/metricDict';
+import variables from 'styles/variables.less';
 import i18n from './i18n';
 import App from './App';
 
 window.t = i18n.t;
 window.METRICDICT = metricDict;
+window.globalCSS = variables;
 
 const store = globalRootStore;
 const browserHistory = createBrowserHistory();

src/layouts/Base/index.less

@@ -312,7 +312,7 @@
   margin-bottom: 16px;
   padding: 16px 24px;
   overflow: hidden;
-  color: #0068ff;
+  color: @primary-color;
   font-size: 18px;
   line-height: 24px;
   word-wrap: break-word;

src/pages/auth/containers/ChangePassword/index.jsx

@@ -138,7 +138,7 @@ export class Password extends Component {
         name: 'hint',
         render: () => (
           <div className={styles.hint}>
-            <InfoCircleFilled style={{ color: '#FAAD14' }} />
+            <InfoCircleFilled style={{ color: globalCSS.warnColor }} />
             {t('User need to change password')}
           </div>
         ),

src/pages/auth/containers/ChangePassword/index.less

@@ -1,3 +1,5 @@
+@import '~styles/variables';
+
 .register {
   float: right;
 }
@@ -47,11 +49,11 @@
 
 .error {
   padding-left: 12px;
-  color: #a43a39;
+  color: @login-error;
   font-size: 14px;
   line-height: 38px;
   background: #f2dede;
-  border: 1px solid #a43a39;
+  border: 1px solid @login-error;
   border-radius: 4px;
 
   :global {

src/pages/auth/containers/Login/index.less

@@ -1,3 +1,5 @@
+@import '~styles/variables';
+
 .register {
   float: right;
 }
@@ -13,11 +15,11 @@
 
 .login-error {
   padding: 8px 12px;
-  color: #a43a39;
+  color: @login-error;
   font-size: 14px;
   line-height: 1.5;
   background: #f2dede;
-  border: 1px solid #a43a39;
+  border: 1px solid @login-error;
   border-radius: 4px;
 
   :global {

src/pages/base/containers/AdminOverview/components/ResourceOverview.jsx

@@ -68,17 +68,17 @@ export const smallCard = [
 ];
 
 const instanceColors = {
-  active: { color: '#52C41A', text: t('Active Status') },
+  active: { color: globalCSS.successColor, text: t('Active Status') },
-  error: { color: '#E8684A', text: t('Error') },
+  error: { color: globalCSS.errorColor, text: t('Error') },
   shutoff: { color: '#E6F2E0', text: t('Shutoff') },
-  other: { color: '#F6B23D', text: t('Others') },
+  other: { color: globalCSS.warnLightColor, text: t('Others') },
 };
 
 const volumeColors = {
-  active: { color: '#52C41A', text: t('Attaching') },
+  active: { color: globalCSS.successColor, text: t('Attaching') },
-  error: { color: '#E8684A', text: t('Error') },
+  error: { color: globalCSS.errorColor, text: t('Error') },
   available: { color: '#E6F2E0', text: t('Unattached') },
-  other: { color: '#F6B23D', text: t('Others') },
+  other: { color: globalCSS.warnLightColor, text: t('Others') },
 };
 
 export class virtualResourceInfo extends Component {

src/pages/base/containers/AdminOverview/components/VirtualResource.jsx

@@ -31,9 +31,9 @@ export const resourceCircle = [
 ];
 
 export const color = {
-  infoColor: 'rgba(0, 104, 255, 0.65)',
+  infoColor: globalCSS.primaryColor,
-  warnColor: '#FE9901',
+  warnColor: globalCSS.warnDarkColor,
-  dangerColor: '#D93126',
+  dangerColor: globalCSS.errorColor,
 };
 
 export class ResourceCircle extends Component {
@@ -56,9 +56,9 @@ export class ResourceCircle extends Component {
     const used = overview[item.used];
     const percentNum = parseFloat(((used / resource) * 100).toFixed(2));
     const unUsed = parseFloat((resource - used).toFixed(2));
-    let circleColor = color.infoColor;
+    let circleColor = color.primaryColor;
     if (percentNum > 70) {
-      circleColor = color.warnColor;
+      circleColor = color.warnDarkColor;
     }
     if (percentNum > 90) {
       circleColor = color.dangerColor;

src/pages/base/containers/Overview/components/QuotaOverview.jsx

@@ -23,9 +23,9 @@ import { isNumber } from 'lodash';
 import styles from '../style.less';
 
 const colors = {
-  normal: { color: '#4CC9F0', text: t('Normal') },
+  normal: { color: globalCSS.primaryColor, text: t('Normal') },
-  danger: { color: '#4361EE', text: t('Danger') },
+  danger: { color: globalCSS.warnDarkColor, text: t('Danger') },
-  full: { color: '#E8684A', text: t('Full') },
+  full: { color: globalCSS.errorColor, text: t('Full') },
 };
 
 const keyPairTitle = (

src/pages/base/containers/Overview/style.less

@@ -137,7 +137,7 @@
   .action {
     float: right;
     margin-top: 6px;
-    color: #0068ff;
+    color: @primary-color;
     font-size: 12px;
     cursor: pointer;
   }

src/pages/compute/containers/Instance/actions/Resize.jsx

@@ -143,7 +143,7 @@ export class Resize extends ModalAction {
   get tips() {
     return (
       <div>
-        <p style={{ color: '#0068FF' }}>
+        <p style={{ color: globalCSS.primaryColor }}>
           {t('The current operation requires the instance to be shut down:')}
         </p>
         <p>

src/pages/monitor/containers/OpenstackService/Services.jsx

@@ -30,7 +30,7 @@ const statusToIcon = {
   down: (
     <InfoCircleTwoTone
       style={{ fontSize: 24, marginLeft: 36 }}
-      twoToneColor="#EB354D"
+      twoToneColor={globalCSS.errorColor}
     />
   ),
 };

src/pages/monitor/containers/Overview/components/Tops/index.jsx

@@ -23,7 +23,8 @@ export const renderTopProgress = ({ data }) => {
     <Row style={{ height: '100%' }}>
       {data.map((d) => {
         const percentage = get(d, 'y', 0);
-        const percentageColor = percentage > 80 ? '#FAAD14' : '#1890FF';
+        const percentageColor =
+          percentage > 80 ? globalCSS.warnDarkColor : globalCSS.primaryColor;
         return (
           <Col span={24} key={d.type}>
             <div>{d.type}</div>

src/pages/monitor/containers/Overview/config.jsx

@@ -137,7 +137,11 @@ export const physicalNodeLeftTopCardList = [
               <Progress
                 style={{ width: '95%' }}
                 percent={progressPercentage}
-                strokeColor={progressPercentage > 80 ? '#FAAD14' : '#1890FF'}
+                strokeColor={
+                  progressPercentage > 80
+                    ? globalCSS.warnDarkColor
+                    : globalCSS.primaryColor
+                }
                 showInfo={progressPercentage !== 100}
               />
             </Row>

src/pages/monitor/containers/PhysicalNode/index.jsx

@@ -99,7 +99,8 @@ export const topCardList = [
       >
         {(value.data || []).map((item, index) => {
           const percentage = computePercentage(item.avail, item.total);
-          const percentageColor = percentage > 80 ? '#FAAD14' : '#1890FF';
+          const percentageColor =
+            percentage > 80 ? globalCSS.warnDarkColor : globalCSS.primaryColor;
           return (
             <div
               key={item.mountpoint}

src/pages/monitor/containers/StorageCluster/index.jsx

@@ -211,7 +211,11 @@ const StorageCluster = () => {
                 <Progress
                   style={{ width: '95%' }}
                   percent={progressPercentage}
-                  strokeColor={progressPercentage > 80 ? '#FAAD14' : '#1890FF'}
+                  strokeColor={
+                    progressPercentage > 80
+                      ? globalCSS.warnDarkColor
+                      : globalCSS.primaryColor
+                  }
                   showInfo={progressPercentage !== 100}
                 />
               </Row>

src/pages/monitor/containers/StorageCluster/index.less

@@ -1,3 +1,5 @@
+@import '~styles/variables';
+
 .osd {
   height: 100%;
   color: rgba(0, 0, 0, 85%);
@@ -17,7 +19,7 @@
       }
 
       .ant-radio-button-wrapper-checked {
-        color: #0068ff;
+        color: @primary-color;
       }
     }
   }

src/pages/network/containers/LoadBalancers/Listener/Detail/Member/Actions/CreateMember.jsx

@@ -96,7 +96,7 @@ export class CreateAction extends ModalAction {
   get tips() {
     return (
       <div style={{ display: 'inline-table' }}>
-        <p style={{ color: '#0068FF' }}>
+        <p style={{ color: globalCSS.primaryColor }}>
           {t(
             'The amphora instance is required for load balancing service setup and is not recommended'
           )}

src/pages/network/containers/Topology/index.jsx

@@ -43,6 +43,10 @@ import NodeCard from './NodeCard';
 let graph = null;
 const { isIpInRangeAll } = ipValidate;
 
+export const activeShadowColor = 'rgba(87,227,155,0.61)';
+export const errorShadowColor = 'rgba(237,33,48,1)';
+export const errorStrokeColor = '#DB3A3A';
+
 export class Topology extends React.Component {
   constructor(props) {
     super(props);
@@ -142,11 +146,12 @@ export class Topology extends React.Component {
         style: {
           radius: 4,
           fill: '#FFFFFFFF',
-          stroke: router.status === 'ACTIVE' ? '#57E39B' : '#DB3A3A',
+          stroke:
-          shadowColor:
             router.status === 'ACTIVE'
-              ? 'rgba(87,227,155,0.61)'
+              ? globalCSS.successColor
-              : 'rgba(237,33,48,1)',
+              : errorStrokeColor,
+          shadowColor:
+            router.status === 'ACTIVE' ? activeShadowColor : errorShadowColor,
           shadowBlur: router.status === 'ACTIVE' ? 5 : 4,
         },
         anchorPoints: [[0.5, 0]],
@@ -336,11 +341,14 @@ export class Topology extends React.Component {
           style: {
             radius: 4,
             fill: '#FFFFFFFF',
-            stroke: server.vm_state === 'active' ? '#57E39B' : '#DB3A3A',
+            stroke:
+              server.vm_state === 'active'
+                ? globalCSS.successColor
+                : errorStrokeColor,
             shadowColor:
               server.vm_state === 'active'
-                ? 'rgba(87,227,155,0.61)'
+                ? activeShadowColor
-                : 'rgba(237,33,48,1)',
+                : errorShadowColor,
             shadowBlur: server.vm_state === 'active' ? 5 : 4,
           },
         });
@@ -403,11 +411,14 @@ export class Topology extends React.Component {
             style: {
               radius: 4,
               fill: '#FFFFFFFF',
-              stroke: server.vm_state === 'active' ? '#57E39B' : '#DB3A3A',
+              stroke:
+                server.vm_state === 'active'
+                  ? globalCSS.successColor
+                  : errorStrokeColor,
               shadowColor:
                 server.vm_state === 'active'
-                  ? 'rgba(87,227,155,0.61)'
+                  ? activeShadowColor
-                  : 'rgba(237,33,48,1)',
+                  : errorShadowColor,
               shadowBlur: server.vm_state === 'active' ? 5 : 4,
             },
           });

src/resources/prometheus/monitoring.js

@@ -391,7 +391,7 @@ export const cephStatusMap = {
 };
 
 export const cephStatusColorMap = {
-  0: '#379738',
+  0: globalCSS.successColor,
-  1: '#FAAD14',
+  1: globalCSS.warnDarkColor,
-  2: '#D93126',
+  2: globalCSS.errorColor,
 };

src/styles/base.less

@@ -64,7 +64,7 @@
 
     &:hover {
       svg {
-        color: #1890ff;
+        color: @primary-color;
         fill: #6fb4f5;
       }
     }

src/styles/variables.less

@@ -4,6 +4,7 @@
 @blue-3: rgba(89, 157, 255, 35%);
 @blue-4: #005ade;
 @primary-color: @blue-1;
+@info-color: @blue-2;
 @hover-color: @blue-4;
 
 @green-1: #57e39b;
@@ -16,6 +17,9 @@
 @yellow-3: rgba(254, 223, 64, 35%);
 @warn-color: @yellow-1;
 
+@warn-light-color: #f6b23d;
+@warn-dark-color: #fa8c16;
+
 @red-1: #eb354d;
 @red-2: rgba(235, 53, 77, 65%);
 @red-3: rgba(235, 53, 77, 35%);
@@ -124,3 +128,20 @@
 /*  sider */
 @sider-background: #26262b;
 @sider-open-background: #222121;
+
+/* login */
+@login-error: #a43a39;
+
+@money-color: #f50;
+
+:export {
+  primaryColor: @primary-color;
+  successColor: @success-color;
+  warnColor: @warn-color;
+  warnDarkColor: @warn-dark-color;
+  warnLightColor: @warn-light-color;
+  errorColor: @error-color;
+  dangerColor: @danger-color;
+  moneyColor: @money-color;
+  infoColor: @info-color;
+}