Theme: increase debug theme gridSize and fix some obvious mistakes (#97661)

* increase debug theme gridSize and fix some obvious mistakes

* better switch styling

* fix checkbox

* fix tabs

* also fix editable title height

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

@@ -97,7 +97,7 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
       width: 57,
     },
     menuTabs: {
-      height: 42,
+      height: 5,
     },
     textHighlight: {
       text: colors.warning.contrastText,

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

@@ -119,5 +119,8 @@ function createDebug(): GrafanaTheme2 {
     shape: {
       borderRadius: 8,
     },
+    spacing: {
+      gridSize: 10,
+    },
   });
 }

packages/grafana-ui/src/components/Forms/Checkbox.tsx

@@ -113,10 +113,10 @@ export const getCheckboxStyles = (theme: GrafanaTheme2, invalid = false) => {
           content: '""',
           position: 'absolute',
           zIndex: 2,
-          left: '4px',
+          left: theme.spacing(0.5),
           top: 0,
-          width: '6px',
-          height: '12px',
+          width: theme.spacing(0.75),
+          height: theme.spacing(1.5),
           border: `solid ${theme.colors.primary.contrastText}`,
           borderWidth: '0 3px 3px 0',
           transform: 'rotate(45deg)',

packages/grafana-ui/src/components/Menu/MenuItem.tsx

@@ -221,6 +221,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'stretch',
+      justifyContent: 'center',
       padding: theme.spacing(0.5, 2),
       minHeight: theme.spacing(4),
       margin: 0,

packages/grafana-ui/src/components/Select/SelectContainer.tsx

@@ -50,7 +50,7 @@ const getSelectContainerStyles = (theme: GrafanaTheme2, focused: boolean, disabl
         flexWrap: 'wrap',
         alignItems: 'stretch',
         justifyContent: 'space-between',
-        minHeight: '32px',
+        minHeight: theme.spacing(theme.components.height.md),
         height: 'auto',
         maxWidth: '100%',
 

packages/grafana-ui/src/components/Switch/Switch.tsx

@@ -80,8 +80,8 @@ InlineSwitch.displayName = 'Switch';
 
 const getSwitchStyles = (theme: GrafanaTheme2, transparent?: boolean) => ({
   switch: css({
-    width: '32px',
-    height: '16px',
+    width: theme.spacing(4),
+    height: theme.spacing(2),
     position: 'relative',
     lineHeight: 1,
 
@@ -101,7 +101,7 @@ const getSwitchStyles = (theme: GrafanaTheme2, transparent?: boolean) => ({
         },
 
         svg: {
-          transform: 'translate3d(17px, -50%, 0)',
+          transform: `translate3d(${theme.spacing(2.25)}, -50%, 0)`,
           background: theme.colors.primary.contrastText,
           color: theme.colors.primary.main,
         },
@@ -147,13 +147,14 @@ const getSwitchStyles = (theme: GrafanaTheme2, transparent?: boolean) => ({
         position: 'absolute',
         display: 'block',
         color: 'transparent',
-        width: '12px',
-        height: '12px',
+        width: theme.spacing(1.5),
+        height: theme.spacing(1.5),
         borderRadius: theme.shape.radius.circle,
         background: theme.colors.text.secondary,
         boxShadow: theme.shadows.z1,
+        left: 0,
         top: '50%',
-        transform: 'translate3d(1px, -50%, 0)',
+        transform: `translate3d(${theme.spacing(0.25)}, -50%, 0)`,
         transition: 'transform 0.2s cubic-bezier(0.19, 1, 0.22, 1)',
 
         '@media (forced-colors: active)': {

packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx

@@ -34,7 +34,7 @@ export function TabbedContainer({ tabs, defaultTab, closeIconTooltip, onClose, t
     setActiveTab(item.value!);
   };
 
-  const autoHeight = `calc(100% - (${theme.components.menuTabs.height}px + ${theme.spacing(1)}))`;
+  const autoHeight = `calc(100% - (${theme.spacing(theme.components.menuTabs.height)} + ${theme.spacing(1)}))`;
 
   return (
     <div className={styles.container} data-testid={testId}>

packages/grafana-ui/src/components/Tabs/TabsBar.tsx

@@ -36,8 +36,8 @@ const getStyles = (theme: GrafanaTheme2) => ({
   tabs: css({
     position: 'relative',
     display: 'flex',
-    height: `${theme.components.menuTabs.height}px`,
-    alignItems: 'center',
+    height: theme.spacing(theme.components.menuTabs.height),
+    alignItems: 'stretch',
   }),
 });
 

public/app/core/components/Page/EditableTitle.tsx

@@ -118,6 +118,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       alignItems: 'center',
       display: 'flex',
       gap: theme.spacing(1),
+      height: theme.spacing(theme.components.height.md),
     }),
   };
 };