Visual refresh: Initial start of light mode (#127341)

start of light mode

packages/grafana-data/src/themes/palette_new.ts

@@ -7,6 +7,7 @@ export const palette = {
   // Warm grey scale for light mode structural colours
   neutral50: '#fafafa',
   neutral100: '#f5f5f4',
+  neutral150: '#f0f0ef',
   neutral200: '#ebebea',
   neutral300: '#dddcdb',
   neutral400: '#b0afae',

packages/grafana-data/src/themes/themeDefinitions/visual_refresh_dark.json

@@ -56,7 +56,8 @@
     "gradients": {
       "brandHorizontal": "linear-gradient(270deg, palette.orange400 0%, palette.orange500 100%)",
       "brandVertical": "linear-gradient(0.01deg, palette.orange400 0.01%, palette.orange500 99.99%)"
-    }
+    },
+    "contrastThreshold": 4.5
   },
   "shape": {
     "borderRadiusSm": 6,

packages/grafana-data/src/themes/themeDefinitions/visual_refresh_light.json

@@ -4,7 +4,64 @@
   "colors": {
     "mode": "light",
     "background": {
-      "canvas": "#ff0000"
-    }
+      "canvas": "palette.white",
+      "page": "palette.neutral50",
+      "primary": "palette.neutral150",
+      "secondary": "palette.white",
+      "elevated": "palette.neutral50"
+    },
+    "primary": {
+      "main": "palette.neutral950"
+    },
+    "secondary": {
+      "main": "palette.neutral200",
+      "border": "palette.neutral300",
+      "text": "palette.neutral800",
+      "contrastText": "palette.neutral800"
+    },
+    "tertiary": {
+      "main": "palette.violet400"
+    },
+    "accent": {
+      "main": "palette.orange600",
+      "text": "palette.orange700"
+    },
+    "error": {
+      "main": "palette.coral600",
+      "border": "palette.coral100"
+    },
+    "warning": {
+      "main": "palette.amber600",
+      "border": "palette.amber100"
+    },
+    "success": {
+      "main": "palette.sage600",
+      "border": "palette.sage100"
+    },
+    "info": {
+      "main": "palette.blue600",
+      "border": "palette.blue100"
+    },
+    "text": {
+      "primary": "palette.neutral900",
+      "secondary": "palette.neutral800",
+      "disabled": "palette.neutral700",
+      "link": "palette.orange700"
+    },
+    "border": {
+      "weak": "palette.neutral300",
+      "medium": "palette.neutral400",
+      "strong": "palette.neutral500"
+    },
+    "gradients": {
+      "brandHorizontal": "linear-gradient(270deg, palette.orange400 0%, palette.orange500 100%)",
+      "brandVertical": "linear-gradient(0.01deg, palette.orange400 0.01%, palette.orange500 99.99%)"
+    },
+    "contrastThreshold": 4.5
+  },
+  "shape": {
+    "borderRadiusSm": 6,
+    "borderRadius": 8,
+    "borderRadiusLg": 12
   }
 }

packages/grafana-ui/.storybook/preview.ts

@@ -43,6 +43,7 @@ if (process.env.NODE_ENV === 'development') {
   allowedExtraThemes.push('sapphiredusk');
   allowedExtraThemes.push('tron');
   allowedExtraThemes.push('visual_refresh_dark');
+  allowedExtraThemes.push('visual_refresh_light');
 }
 
 /*