@balena/ui-shared-components 9.4.1 → 9.4.2

package/dist/theme.d.ts

@@ -92,6 +92,11 @@ declare module '@mui/material/Typography' {
         codeSm: true;
     }
 }
+declare module '@mui/material/Avatar' {
+    interface AvatarOwnProps {
+        size?: 'xl' | 'lg' | 'md' | 'sm';
+    }
+}
 declare module '@mui/material/Button' {
     interface ButtonPropsColorOverrides {
         customBlue: true;

package/dist/theme.js

@@ -334,12 +334,43 @@ export const theme = createTheme({
             },
         },
         MuiAvatar: {
+            defaultProps: { size: 'md' },
+            variants: [
+                {
+                    props: { size: 'xl' },
+                    style: {
+                        width: 64,
+                        height: 64,
+                        fontSize: '32px',
+                    },
+                },
+                {
+                    props: { size: 'lg' },
+                    style: {
+                        width: 48,
+                        height: 48,
+                        fontSize: '24px',
+                    },
+                },
+                {
+                    props: { size: 'sm' },
+                    style: {
+                        width: 24,
+                        height: 24,
+                        fontSize: '12px',
+                    },
+                },
+            ],
             styleOverrides: {
                 root: {
                     img: {
                         objectFit: 'contain',
                     },
                 },
+                colorDefault: {
+                    backgroundColor: color.bg.subtle.value,
+                    color: color.text.value,
+                },
             },
         },
         MuiDialogTitle: {
@@ -786,7 +817,7 @@ export const theme = createTheme({
                             color: color.text.inverse.value,
                         },
                         '&:not(.Mui-selected):hover': {
-                            backgroundColor: color.bg.value,
+                            backgroundColor: color.bg.active.value,
                         },
                         '&:focus-visible': {
                             outlineColor: color.bg.strong.value,
@@ -906,6 +937,7 @@ export const theme = createTheme({
             },
             styleOverrides: {
                 root: ({ theme }) => ({
+                    background: 'white',
                     legend: {
                         // We should be able to remove this but there is a css override somewhere that
                         // set the fieldset > legend max-width to 100%, and this invalidate the notched: false rule for some inputs.
@@ -922,6 +954,10 @@ export const theme = createTheme({
                         height: '20px',
                     },
                 }),
+                input: {
+                    paddingTop: '14px',
+                    paddingBottom: '12px',
+                },
             },
         },
         MuiInput: {
@@ -965,6 +1001,16 @@ export const theme = createTheme({
                 },
             },
         },
+        MuiAutocomplete: {
+            styleOverrides: {
+                root: ({ theme }) => ({
+                    '.MuiOutlinedInput-root .MuiAutocomplete-input': {
+                        paddingTop: theme.spacing(1),
+                        paddingBottom: theme.spacing(1),
+                    },
+                }),
+            },
+        },
         MuiLink: {
             defaultProps: { underline: 'none' },
             styleOverrides: {
@@ -1002,6 +1048,7 @@ export const theme = createTheme({
             },
             styleOverrides: {
                 root: {
+                    color: color.text.value,
                     textTransform: 'none',
                     fontSize: '1rem',
                 },
@@ -1407,5 +1454,23 @@ export const theme = createTheme({
                 }),
             },
         },
+        MuiMenuItem: {
+            styleOverrides: {
+                root: {
+                    '&.Mui-selected': {
+                        background: color.bg.active.value,
+                        '&:hover': {
+                            background: color.bg.active.value,
+                        },
+                    },
+                    '&:hover': {
+                        background: color.bg.hover.value,
+                    },
+                },
+                selected: {
+                    background: color.bg.active.value,
+                },
+            },
+        },
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balena/ui-shared-components",
-  "version": "9.4.1",
+  "version": "9.4.2",
   "main": "./dist/index.js",
   "sideEffects": false,
   "files": [
@@ -10,7 +10,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@balena/design-tokens": "^0.9.1",
+    "@balena/design-tokens": "^0.10.0",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
@@ -110,6 +110,6 @@
   },
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
-    "publishedAt": "2024-10-25T13:12:48.974Z"
+    "publishedAt": "2024-10-25T17:16:29.742Z"
   }
 }