Change main color

docs/extensions/capabilities/styling.md

@@ -74,11 +74,11 @@ They are all located inside `:root` and are defined in [app.scss](https://github
 as well as in [the theme modules](https://github.com/lensapp/lens/tree/master/src/renderer/themes):
 
 ```
---blue: #3d90ce;
+--blue: #00a7a0;
 --magenta: #c93dce;
 --golden: #ffc63d;
 --halfGray: #87909c80;
---primary: #3d90ce;
+--primary: #00a7a0;
 --textColorPrimary: #555555;
 --textColorSecondary: #51575d;
 --textColorAccent: #333333;

docs/stylesheets/extra.css

@@ -1,13 +1,13 @@
 :root {
-  --md-primary-fg-color:        #3d90ce;
-  --md-accent-fg-color:         #3d90ce;
+  --md-primary-fg-color:        #00a7a0;
+  --md-accent-fg-color:         #00a7a0;
 }
 
 :root > * {
   /* Footer */
   --md-footer-bg-color:         #e8e8e8;
   --md-footer-bg-color--dark:   #cccdcf;
-  --md-footer-fg-color:         #3d90ce;
+  --md-footer-fg-color:         #00a7a0;
   --md-footer-fg-color--light:  #fff;
 
   /* Background */
@@ -18,7 +18,7 @@
   /* Footer */
   --md-footer-bg-color:         #2e3136;
   --md-footer-bg-color--dark:   #262b2f;
-  --md-footer-fg-color:         #3d90ce;
+  --md-footer-fg-color:         #00a7a0;
   --md-footer-fg-color--light:  #fff;
 
   /* Background */

open-lens/static/splash.html

@@ -60,8 +60,8 @@
       .progress{
         position: relative;
         height: 2px;
-        background: #3d90ce;
-        box-shadow: 0 0 20px #3d90ce;
+        background: #00a7a0;
+        box-shadow: 0 0 20px #00a7a0;
         animation-name: loader-animation;
         animation-duration: 1.6s;
         animation-iteration-count: infinite;
@@ -97,9 +97,9 @@
 
     .glow div{
       flex: 1;
-      background: #3d90ce;
+      background: #00a7a0;
       animation: glow 0.8s infinite alternate ease;
-      box-shadow: 0 0 20px #3d90ce;
+      box-shadow: 0 0 20px #00a7a0;
     }
 
     .glow div.b1{ animation-delay: -0.72s; }

packages/core/src/common/catalog-entities/general-catalog-entities/implementations/catalog-catalog-entity.injectable.ts

@@ -26,7 +26,7 @@ const catalogCatalogEntityInjectable = getInjectable({
         path: url,
         icon: {
           material: "view_list",
-          background: "#3d90ce",
+          background: "#00a7a0",
         },
       },
       status: {

packages/core/src/common/catalog-entities/general-catalog-entities/implementations/welcome-catalog-entity.injectable.ts

@@ -26,7 +26,7 @@ const welcomeCatalogEntityInjectable = getInjectable({
         path: url,
         icon: {
           material: "home",
-          background: "#3d90ce",
+          background: "#00a7a0",
         },
       },
       status: {

packages/core/src/features/preferences/common/preferences-catalog-entity.injectable.ts

@@ -26,7 +26,7 @@ const preferencesCatalogEntityInjectable = getInjectable({
         path: url,
         icon: {
           material: "settings",
-          background: "#3d90ce",
+          background: "#00a7a0",
         },
       },
       status: {

packages/core/src/renderer/components/cluster/cluster-metrics.tsx

@@ -43,7 +43,7 @@ const NonInjectedClusterMetrics = observer((props: Dependencies) => {
   const metricValues = selectedMetricsType.metrics.get();
   const metricType = selectedMetricsType.value.get();
   const metricNodeRole = selectedNodeRoleForMetrics.value.get();
-  const colors = { cpu: "#3D90CE", memory: "#C93DCE" };
+  const colors = { cpu: "#00a7a0", memory: "#C93DCE" };
   const data = metricValues.map(value => ({
     x: value[0],
     y: parseFloat(value[1]).toFixed(3),

packages/core/src/renderer/components/cluster/cluster-pie-charts.tsx

@@ -101,7 +101,7 @@ const renderCharts = (defaultColor: string, lastPoints: Partial<Record<keyof Clu
           Math.max(0, cpuAllocatableCapacity - (cpuLimits ?? cpuAllocatableCapacity)),
         ],
         backgroundColor: [
-          "#3d90ce",
+          "#00a7a0",
           defaultColor,
         ],
         id: "cpuLimits",
@@ -148,7 +148,7 @@ const renderCharts = (defaultColor: string, lastPoints: Partial<Record<keyof Clu
           Math.max(0, memoryAllocatableCapacity - (memoryLimits ?? memoryAllocatableCapacity)),
         ],
         backgroundColor: [
-          "#3d90ce",
+          "#00a7a0",
           defaultColor,
         ],
         id: "memoryLimits",
@@ -197,7 +197,7 @@ const renderCharts = (defaultColor: string, lastPoints: Partial<Record<keyof Clu
           legendColors={[
             "#c93dce",
             "#4caf50",
-            "#3d90ce",
+            "#00a7a0",
             "#032b4d",
             defaultColor,
           ]}
@@ -211,7 +211,7 @@ const renderCharts = (defaultColor: string, lastPoints: Partial<Record<keyof Clu
           legendColors={[
             "#c93dce",
             "#4caf50",
-            "#3d90ce",
+            "#00a7a0",
             "#032b4d",
             defaultColor,
           ]}

packages/core/src/renderer/components/markdown-viewer/markdown-viewer.scss

@@ -187,7 +187,7 @@
   }
 
   a {
-    color: #3d90ce;
+    color: #00a7a0;
   }
 
   a:hover,

packages/core/src/renderer/components/nodes/node-charts.tsx

@@ -55,7 +55,7 @@ const NonInjectedNodeCharts = observer(({
         id: `${id}-cpuUsage`,
         label: `Usage`,
         tooltip: `CPU cores usage`,
-        borderColor: "#3D90CE",
+        borderColor: "#00a7a0",
         data: cpuUsage.map(([x, y]) => ({ x, y })),
       },
       {

packages/core/src/renderer/components/workloads-pods/container-charts.tsx

@@ -50,7 +50,7 @@ const NonInjectedContainerCharts = observer(({
         id: "cpuUsage",
         label: `Usage`,
         tooltip: `CPU cores usage`,
-        borderColor: "#3D90CE",
+        borderColor: "#00a7a0",
         data: cpuUsage.map(([x, y]) => ({ x, y })),
       },
       {

packages/core/src/renderer/components/workloads-pods/pod-charts.tsx

@@ -45,7 +45,7 @@ export const PodCharts = observer(() => {
         id: `${id}-cpuUsage`,
         label: `Usage`,
         tooltip: `Container CPU cores usage`,
-        borderColor: "#3D90CE",
+        borderColor: "#00a7a0",
         data: cpuUsage.map(([x, y]) => ({ x, y })),
       },
     ],

packages/core/src/renderer/themes/lens-dark.injectable.ts

@@ -14,11 +14,11 @@ const lensDarkThemeInjectable = getInjectable({
     author: "Mirantis",
     monacoTheme: "clouds-midnight" as const,
     colors: {
-      blue: "#3d90ce",
+      blue: "#00a7a0",
       magenta: "#c93dce",
       golden: "#ffc63d",
       halfGray: "#87909c80",
-      primary: "#3d90ce",
+      primary: "#00a7a0",
       textColorPrimary: "#8e9297",
       textColorSecondary: "#a0a0a0",
       textColorTertiary: "#909ba6",
@@ -39,7 +39,7 @@ const lensDarkThemeInjectable = getInjectable({
       sidebarSubmenuActiveColor: "#ffffff",
       sidebarItemHoverBackground: "#3a3e44",
       badgeBackgroundColor: "#ffba44",
-      buttonPrimaryBackground: "#3d90ce",
+      buttonPrimaryBackground: "#00a7a0",
       buttonDefaultBackground: "#414448",
       buttonLightBackground: "#f1f1f1",
       buttonAccentBackground: "#e85555",
@@ -50,7 +50,7 @@ const lensDarkThemeInjectable = getInjectable({
       tableHeaderColor: "#ffffff",
       tableSelectedRowColor: "#ffffff",
       helmLogoBackground: "#ffffff",
-      helmStableRepo: "#3d90ce",
+      helmStableRepo: "#00a7a0",
       helmIncubatorRepo: "#ff7043",
       helmDescriptionHr: "#41474a",
       helmDescriptionBlockquoteColor: "#bbb",
@@ -65,7 +65,7 @@ const lensDarkThemeInjectable = getInjectable({
       helmDescriptionPreColor: "#b4b5b4",
       colorSuccess: "#43a047",
       colorOk: "#4caf50",
-      colorInfo: "#3d90ce",
+      colorInfo: "#00a7a0",
       colorError: "#ce3933",
       colorSoftError: "#e85555",
       colorWarning: "#ff9800",
@@ -114,7 +114,7 @@ const lensDarkThemeInjectable = getInjectable({
       inputControlHoverBorder: "#474a4f",
       lineProgressBackground: "#414448",
       radioActiveBackground: "#36393e",
-      menuActiveBackground: "#3d90ce",
+      menuActiveBackground: "#00a7a0",
       menuSelectedOptionBgc: "#36393e",
       canvasBackground: "#24292e",
       scrollBarColor: "#5f6064",

packages/core/src/renderer/themes/lens-light.injectable.ts

@@ -14,11 +14,11 @@ const lensLightThemeInjectable = getInjectable({
     author: "Mirantis",
     monacoTheme: "vs" as const,
     colors: {
-      blue: "#3d90ce",
+      blue: "#00a7a0",
       magenta: "#c93dce",
       golden: "#ffc63d",
       halfGray: "#87909c80",
-      primary: "#3d90ce",
+      primary: "#800a7a0",
       textColorPrimary: "#555555",
       textColorSecondary: "#51575d",
       textColorTertiary: "#555555",
@@ -35,11 +35,11 @@ const lensLightThemeInjectable = getInjectable({
       layoutTabsLineColor: "#87909c80",
       sidebarLogoBackground: "#f1f1f1",
       sidebarActiveColor: "#ffffff",
-      sidebarSubmenuActiveColor: "#3d90ce",
+      sidebarSubmenuActiveColor: "#00a7a0",
       sidebarBackground: "#e8e8e8",
       sidebarItemHoverBackground: "#f0f2f5",
       badgeBackgroundColor: "#ffba44",
-      buttonPrimaryBackground: "#3d90ce",
+      buttonPrimaryBackground: "#00a7a0",
       buttonDefaultBackground: "#414448",
       buttonLightBackground: "#f1f1f1",
       buttonAccentBackground: "#e85555",
@@ -50,7 +50,7 @@ const lensLightThemeInjectable = getInjectable({
       tableHeaderColor: "#555555",
       tableSelectedRowColor: "#222222",
       helmLogoBackground: "#ffffff",
-      helmStableRepo: "#3d90ce",
+      helmStableRepo: "#00a7a0",
       helmIncubatorRepo: "#ff7043",
       helmDescriptionHr: "#dddddd",
       helmDescriptionBlockquoteColor: "#555555",
@@ -114,7 +114,7 @@ const lensLightThemeInjectable = getInjectable({
       inputControlHoverBorder: "#b9bbbe",
       lineProgressBackground: "#e8e8e8",
       radioActiveBackground: "#f1f1f1",
-      menuActiveBackground: "#3d90ce",
+      menuActiveBackground: "#00a7a0",
       menuSelectedOptionBgc: "#e8e8e8",
       canvasBackground: "#24292e",
       scrollBarColor: "#bbbbbb",
@@ -135,7 +135,7 @@ const lensLightThemeInjectable = getInjectable({
       red: "#cd3734 ",
       green: "#18cf12",
       yellow: "#acb300",
-      blue: "#3d90ce",
+      blue: "#00a7a0",
       magenta: "#c100cd",
       cyan: "#07c4b9",
       white: "#d3d7cf",

packages/core/static/splash.html

@@ -60,8 +60,8 @@
       .progress{
         position: relative;
         height: 2px;
-        background: #3d90ce;
-        box-shadow: 0 0 20px #3d90ce;
+        background: #00a7a0;
+        box-shadow: 0 0 20px #00a7a0;
         animation-name: loader-animation;
         animation-duration: 1.6s;
         animation-iteration-count: infinite;
@@ -97,9 +97,9 @@
 
     .glow div{
       flex: 1;
-      background: #3d90ce;
+      background: #00a7a0;
       animation: glow 0.8s infinite alternate ease;
-      box-shadow: 0 0 20px #3d90ce;
+      box-shadow: 0 0 20px #00a7a0;
     }
 
     .glow div.b1{ animation-delay: -0.72s; }