White tooltips

arkivverket · Dec 3, 2023 · 590d04f · 590d04f
1 parent a04e68d
commit 590d04f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/gallery/src/components/FabExample.tsx b/gallery/src/components/FabExample.tsx
@@ -1,4 +1,4 @@
-import { Autocomplete, Button, Fab, Grid, Paper, Popper, Stack, styled, TextField, Typography } from "@mui/material"
+import { Autocomplete, Button, Fab, Grid, Paper, Popper, Stack, styled, TextField, Tooltip, Typography } from "@mui/material"
 import { useRef, useState } from "react"
 import { ArrowDropDown } from "@mui/icons-material"
 
@@ -20,7 +20,9 @@ export const FabExample = () => {
 					<InnerPaper variant="padded">
 						<Fab variant="extended">Enabled</Fab>
 						&nbsp;
-						<Fab>E</Fab>
+						<Tooltip title="Tooltip">
+							<Fab>E</Fab>
+						</Tooltip>
 						&nbsp;
 						<Fab variant="extended" disabled>
 							Disabled
@@ -37,7 +39,9 @@ export const FabExample = () => {
 							Enabled
 						</Fab>
 						&nbsp;
-						<Fab color="secondary">E</Fab>
+						<Tooltip title="Tooltip">
+							<Fab color="secondary">E</Fab>
+						</Tooltip>
 						&nbsp;
 						<Fab variant="extended" color="secondary" disabled>
 							Disabled
@@ -56,7 +60,9 @@ export const FabExample = () => {
 							Enabled
 						</Fab>
 						&nbsp;
-						<Fab color="secondaryResult">E</Fab>
+						<Tooltip title="Tooltip">
+							<Fab color="secondaryResult">E</Fab>
+						</Tooltip>
 						&nbsp;
 						<Fab variant="extended" color="secondaryResult" disabled>
 							Disabled

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@digitalarkivet/mui-theme",
-	"version": "2.0.0-alpha12",
+	"version": "2.0.0-alpha13",
 	"description": "MUI themes for Digitalarkivet applications",
 	"private": false,
 	"main": "dist/main.js",

diff --git a/src/light.ts b/src/light.ts
@@ -611,6 +611,16 @@ const theme = createTheme(
 					},
 				},
 			},
+			MuiTooltip: {
+				styleOverrides: {
+					tooltip: {
+						backgroundColor: themeColors.palette.background.content,
+						color: themeColors.palette.text.primary,
+						fontSize: themeTypography.typography.fontSize12,
+						boxShadow: '0px 8px 20px 5px rgba(0,0,0,0.1)',
+					},
+				},
+			},
 		},
 	},
 	themeColors,