@sonardigital/carbon-ui 1.1.67 → 1.1.70

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@sonardigital/carbon-ui",
-   "version": "1.1.67",
+   "version": "1.1.70",
    "description": "",
    "main": "src/index.ts",
    "files": [

package/src/components/layout/accordions/Accordions.tsx

@@ -0,0 +1,45 @@
+import {
+   Accordion,
+   AccordionDetails,
+   AccordionSummary,
+   Stack,
+   Typography,
+} from '@mui/material';
+import { useState } from 'react';
+
+interface AccordionsProps {
+   items: {
+      title: string;
+      descriptions: string;
+   }[];
+}
+
+export function Accordions({ items }: AccordionsProps): React.ReactElement {
+   const [index, setIndex] = useState(0);
+
+   return (
+      <Stack gap={2}>
+         {items?.map((a, i) => (
+            <Accordion
+               key={i}
+               expanded={index === i}
+               onChange={() => setIndex(index === i ? -1 : i)}
+            >
+               <AccordionSummary>
+                  <Typography variant="body1" fontWeight={400}>
+                     {a.title}
+                  </Typography>
+               </AccordionSummary>
+               <AccordionDetails>
+                  <Typography
+                     variant="body2"
+                     style={{ fontWeight: 400, opacity: 0.6 }}
+                  >
+                     {a.descriptions}
+                  </Typography>
+               </AccordionDetails>
+            </Accordion>
+         ))}
+      </Stack>
+   );
+}

package/src/components/layout/index.ts

@@ -6,3 +6,4 @@ export * from './delay';
 export * from './modal';
 export * from './bottom-navigation/BottomNavigation';
 export * from './multisteps';
+export * from './accordions/Accordions';

package/src/theme/constants/components.ts

@@ -29,6 +29,56 @@ export const components: Components<
          },
       },
    },
+   MuiStack: {
+      variants: [
+         {
+            props: { spacing: 'xxs' },
+            style: {
+               gap: 2.5,
+            },
+         },
+         {
+            props: { spacing: 'xs' },
+            style: {
+               gap: 5,
+            },
+         },
+         {
+            props: { spacing: 'sm' },
+            style: {
+               gap: 12,
+            },
+         },
+         {
+            props: { spacing: 'md' },
+            style: {
+               gap: 22.5,
+            },
+         },
+         {
+            props: { spacing: 'lg' },
+            style: {
+               gap: 40,
+            },
+         },
+         {
+            props: { spacing: 'xl' },
+            style: {
+               gap: 55,
+            },
+         },
+         {
+            props: { spacing: 'xxl' },
+            style: {
+               gap: 70,
+            },
+         },
+      ],
+      defaultProps: {
+         spacing: 'xxs',
+      },
+   },
+
    MuiAutocomplete: {
       defaultProps: {
          slotProps: {
@@ -122,19 +172,6 @@ export const components: Components<
          },
       },
    },
-   MuiContainer: {
-      defaultProps: {
-         maxWidth: 'lg',
-         sx: {
-            paddingY: 12,
-         },
-         style: {
-            height: '100%',
-            alignItems: 'center',
-            justifyContent: 'center',
-         },
-      },
-   },
    MuiPaper: {
       variants: [
          {
@@ -158,14 +195,6 @@ export const components: Components<
          },
       },
    },
-   MuiStack: {
-      defaultProps: {
-         style: {
-            borderColor: '#D4D6DE',
-            borderWidth: 1,
-         },
-      },
-   },
    MuiChip: {
       defaultProps: {
          style: {

package/src/theme/constants/shape.ts

@@ -0,0 +1,3 @@
+export const shape = {
+   borderRadius: 4,
+};

package/src/theme/constants/typography.ts

@@ -1,35 +1,80 @@
+const fontFamily = {
+   primary: 'Inter, sans-serif',
+   secondary: 'Bricolage Grotesque, sans-serif',
+};
+
 export const typography = {
-   fontFamily: `Inter`,
+   fontFamily: fontFamily.primary,
    h1: {
-      fontSize: '4.0rem',
+      fontSize: '3.1rem',
       fontWeight: 500,
       letterSpacing: -0.1,
+      '@media (max-width:600px)': {
+         fontSize: '3.35rem',
+         fontWeight: 600,
+         lineHeight: 1.18,
+         letterSpacing: -0.2,
+      },
    },
    h2: {
-      fontSize: '3.8rem',
+      fontSize: '2.8rem',
       fontWeight: 550,
+      '@media (max-width:600px)': {
+         fontSize: '2.8rem',
+         fontWeight: 600,
+      },
    },
    h3: {
-      fontSize: '2.6rem',
+      fontSize: '2.4rem',
       fontWeight: 500,
+      lineHeight: 1.28,
+      '@media (max-width:600px)': {
+         fontSize: '2.3rem',
+         fontWeight: 600,
+         lineHeight: 1.25,
+      },
    },
    h4: {
       fontSize: '2.2rem',
       fontWeight: 500,
+      '@media (max-width:600px)': {
+         fontWeight: 600,
+      },
    },
    h5: {
-      fontSize: '2.1rem',
+      fontSize: '2.15rem',
+      fontWeight: 500,
+      paddingLeft: 0.4,
+      '@media (max-width:600px)': {
+         fontSize: '2.2rem',
+      },
+   },
+   h6: {
+      fontFamily: fontFamily.secondary,
+      fontSize: '2.3rem',
       fontWeight: 500,
+      lineHeight: 1.25,
+      '@media (max-width:600px)': {
+         fontSize: '2.2rem',
+      },
    },
    body1: {
       fontSize: '1.9rem',
       lineHeight: 1.5,
       fontWeight: 350,
+      '@media (max-width:600px)': {
+         fontSize: '1.9rem',
+         lineHeight: 1.45,
+         fontWeight: 400,
+      },
    },
    body2: {
-      fontSize: '1.7rem',
+      fontSize: '1.8rem',
       fontWeight: 350,
       lineHeight: 1.5,
+      '@media (max-width:600px)': {
+         fontWeight: 400,
+      },
    },
    caption: {
       fontSize: '1.5rem',
@@ -42,5 +87,9 @@ export const typography = {
       fontWeight: 350,
       textTransform: 'none',
       letterSpacing: 0.1,
+      '@media (max-width:600px)': {
+         fontSize: '2rem',
+         fontWeight: 500,
+      },
    },
 };

package/src/theme/theme.ts

@@ -2,6 +2,7 @@ import { createTheme } from '@mui/material';
 import { typography } from './constants/typography';
 import { components } from './constants/components';
 import { palette } from './constants/palette';
+import { shape } from './constants/shape';
 
 export const defaultTheme = createTheme({
    palette,
@@ -10,5 +11,182 @@ export const defaultTheme = createTheme({
    // @ts-ignore
    typography,
    components,
-   shape: { borderRadius: 4 },
+   shape,
+});
+
+export const darkTheme = createTheme({
+   palette: {
+      ...palette,
+      info: {
+         dark: '#041222ff',
+         main: '#0b2645ff',
+         light: '#286cabff',
+      },
+      warning: {
+         dark: '#322603ff',
+         main: '#74580cff',
+         light: '#FFE8D7',
+      },
+      secondary: {
+         main: '#95219eff',
+         light: '#9c52c2ff',
+      },
+      success: {
+         dark: '#1C543A',
+         main: '#03130bff',
+         light: '#137349ff',
+      },
+      divider: '#35383dff',
+      mode: 'dark',
+      background: { default: '#0C0D0E', paper: '#161616' },
+   },
+   typography,
+   components: {
+      ...components,
+      ...defaultTheme.components,
+      MuiTextField: {
+         ...defaultTheme.components?.MuiTextField,
+         defaultProps: {
+            ...defaultTheme.components?.MuiTextField?.defaultProps,
+            sx: {
+               ...defaultTheme.components?.MuiTextField?.defaultProps?.sx,
+
+               '& .MuiOutlinedInput-root': {
+                  '& fieldset': {
+                     borderColor: '#35383dff',
+                  },
+                  '&:hover fieldset': {
+                     borderColor: 'info.light',
+                  },
+                  '&.Mui-focused fieldset': {
+                     borderColor: 'info.light',
+                  },
+               },
+               input: { color: 'white' },
+            },
+         },
+      },
+      MuiAutocomplete: {
+         ...defaultTheme.components?.MuiAutocomplete,
+         defaultProps: {
+            ...defaultTheme.components?.MuiAutocomplete?.defaultProps,
+            slotProps: {
+               paper: {
+                  ...defaultTheme.components?.MuiAutocomplete?.defaultProps
+                     ?.slotProps?.paper,
+                  sx: {
+                     // eslint-disable-next-line
+                     ...defaultTheme.components?.MuiAutocomplete?.defaultProps // @ts-ignore
+                        ?.slotProps?.paper?.sx,
+                     backgroundColor: '#0C0D0E',
+                     color: 'white',
+                     border: 1,
+                     borderStyle: 'solid',
+                  },
+               },
+            },
+         },
+      },
+      MuiAccordion: {
+         ...defaultTheme.components?.MuiAccordion,
+         defaultProps: {
+            ...defaultTheme.components?.MuiAccordion?.defaultProps,
+            sx: {
+               ...defaultTheme.components?.MuiAccordion?.defaultProps?.sx,
+               color: 'white',
+               bgcolor: '#0a0a0aff',
+               opacity: 1,
+            },
+         },
+      },
+      MuiContainer: {
+         variants: [
+            {
+               props: { className: 'xs' },
+               style: {
+                  paddingTop: 22.5,
+                  paddingBottom: 22.5,
+                  paddingLeft: 22.5,
+                  paddingRight: 22.5,
+               },
+            },
+            {
+               props: { className: 'sm' },
+               style: ({ theme }: { theme: Theme }) => ({
+                  paddingTop: 35,
+                  paddingBottom: 35,
+                  paddingLeft: 22.5,
+                  paddingRight: 22.5,
+                  [theme.breakpoints.down('sm')]: {
+                     paddingTop: 30,
+                     paddingBottom: 30,
+                  },
+               }),
+            },
+            {
+               props: { className: 'md' },
+               style: ({ theme }: { theme: Theme }) => ({
+                  paddingTop: 50,
+                  paddingBottom: 50,
+                  paddingLeft: 22.5,
+                  paddingRight: 22.5,
+                  [theme.breakpoints.down('sm')]: {
+                     paddingTop: 40,
+                     paddingBottom: 40,
+                  },
+               }),
+            },
+            {
+               props: { className: 'lg' },
+               style: ({ theme }: { theme: Theme }) => ({
+                  paddingTop: 80,
+                  paddingBottom: 80,
+                  paddingLeft: 22.5,
+                  paddingRight: 22.5,
+                  [theme.breakpoints.down('sm')]: {
+                     paddingTop: 70,
+                     paddingBottom: 70,
+                  },
+               }),
+            },
+            {
+               props: { className: 'xl' },
+               style: ({ theme }: { theme: Theme }) => ({
+                  paddingTop: 100,
+                  paddingBottom: 100,
+                  paddingLeft: 22.5,
+                  paddingRight: 22.5,
+                  [theme.breakpoints.down('sm')]: {
+                     paddingTop: 90,
+                     paddingBottom: 90,
+                  },
+               }),
+            },
+         ],
+         defaultProps: {
+            sx: {
+               paddingY: { xs: 11, md: 12.5 },
+               paddingX: { xs: 3 },
+            },
+            style: {
+               height: '100%',
+               alignItems: 'center',
+               justifyContent: 'center',
+            },
+         },
+      },
+      MuiAccordionDetails: {
+         defaultProps: {
+            sx: {
+               padding: 2,
+               display: 'flex',
+               flexDirection: 'column',
+               gap: 1,
+               borderTop: 5,
+               borderColor: '#0C0D0E',
+            },
+         },
+      },
+   },
+   shape,
 });