checkpoint

Author: GurinderRawala

package.json

@@ -146,6 +146,7 @@
     "@types/ol-ext": "npm:@siedlerchr/[email protected]",
     "@types/papaparse": "5.3.7",
     "@types/pluralize": "^0.0.29",
+    "@types/postcss-prefix-selector": "^1",
     "@types/prismjs": "1.26.0",
     "@types/react": "18.2.28",
     "@types/react-beautiful-dnd": "13.1.3",
@@ -372,6 +373,8 @@
     "ol-ext": "4.0.6",
     "papaparse": "5.4.1",
     "pluralize": "^8.0.0",
+    "postcss-prefix-selector": "^1.16.1",
+    "postcss-prefixwrap": "^1.49.0",
     "prismjs": "1.29.0",
     "prop-types": "15.8.1",
     "pseudoizer": "^0.1.0",

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

@@ -28,7 +28,7 @@ export function createBreakpoints(): ThemeBreakpoints {
   const values: ThemeBreakpointValues = {
     xs: 0,
     sm: 544,
-    md: 769, // 1 more than regular ipad in portrait
+    md: 768, // 1 more than regular ipad in portrait
     lg: 992,
     xl: 1200,
     xxl: 1440,

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

@@ -220,9 +220,9 @@ class LightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
   };
 
   background = {
-    canvas: '#F6F5F3',
-    primary: '#FDFDFC',
-    secondary: '#FDFDFC',
+    canvas: '#FAFAFA',
+    primary: '#FFFFFF',
+    secondary: '#FAFAFA',
   };
 
   action = {

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

@@ -62,10 +62,10 @@ export function createTypography(colors: ThemeColors, typographyInput: ThemeTypo
     fontFamilyMonospace = defaultFontFamilyMonospace,
     // The default font size of the Material Specification.
     fontSize = 14, // px
-    fontWeightLight = 300,
-    fontWeightRegular = 400,
-    fontWeightMedium = 500,
-    fontWeightBold = 600,
+    fontWeightLight = 200,
+    fontWeightRegular = 300,
+    fontWeightMedium = 400,
+    fontWeightBold = 500,
     // Tell Grafana-UI what's the font-size on the html element.
     // 16px is the default font-size used by browsers.
     htmlFontSize = 16,

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

@@ -57,7 +57,7 @@ export const TimePickerFooter = (props: Props) => {
     return null;
   }
 
-  const fnColor = theme.isDark ? '#8EC4AD' : '#3A785E';
+  const fnColor = theme.isDark ? '#8EC4AD' : '#344054';
 
   return (
     <div>