(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8882],{810:function(e,n,t){Promise.resolve().then(t.bind(t,985))},985:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return I}});var s=t(4004),r=t(4978),i=t(65),o=t(9819),a=t(6739),d=t(5227),l=t(271),h=t(721),c=t(9524),m=t(988),p=t(2433),x=t(4300),f=t(6551),y=t(5536),g=t(1966),j=t(5864),u=t(8711),Z=t(3375),v=t(7098),b=t(9426),k=t(5891),T=t(5123),w=t(1467),C=t(5527),M=t(1209),_=t(959),L=()=>{let{fragmentId:e,setFragmentId:n}=(0,r.useContext)(_.Z),t=e=>{n(e.target.hash)};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(x.Z,{variant:"h3",fw:"semibold",children:"Table of Contents"}),(0,s.jsxs)(C.Z,{indent:!1,children:[(0,s.jsx)(M.Z,{onClick:t,children:(0,s.jsx)(m.Z,{variant:"transparent",href:"#customization",active:/#customization$/.test(e),"data-testid":"customization",children:"Customization"})}),(0,s.jsx)(M.Z,{onClick:t,children:(0,s.jsx)(m.Z,{variant:"transparent",href:"#theming",fw:"bold",active:/#theming$/.test(e),"data-testid":"theming",children:"Theming"})}),(0,s.jsx)(M.Z,{onClick:t,children:(0,s.jsx)(m.Z,{variant:"transparent",href:"#light-theme",active:/#light-theme$/.test(e),"data-testid":"light_theme",children:"Light Theme"})}),(0,s.jsx)(M.Z,{onClick:t,children:(0,s.jsx)(m.Z,{variant:"transparent",href:"#dark-theme",active:/#dark-theme$/.test(e),"data-testid":"dark_theme",children:"Dark Theme"})}),(0,s.jsx)(M.Z,{onClick:t,children:(0,s.jsx)(m.Z,{variant:"transparent",href:"#override-styles",fw:"bold",active:/#override-styles$/.test(e),"data-testid":"override_styles",children:"Override Styles"})}),(0,s.jsx)(M.Z,{onClick:t,children:(0,s.jsx)(m.Z,{variant:"transparent",href:"#system-props",active:/#system-props$/.test(e),"data-testid":"system_props",children:"System Props"})}),(0,s.jsx)(M.Z,{onClick:t,children:(0,s.jsx)(m.Z,{variant:"transparent",href:"#styled-components",active:/#styled-components$/.test(e),"data-testid":"styled_components",children:"Styled Components"})}),(0,s.jsx)(M.Z,{onClick:t,children:(0,s.jsx)(m.Z,{variant:"transparent",href:"#custom-classnames",active:/#custom-classnames$/.test(e),"data-testid":"custom_classnames",children:"Custom classNames"})}),(0,s.jsx)(M.Z,{onClick:t,children:(0,s.jsx)(m.Z,{variant:"transparent",href:"#inline-styles",active:/#inline-styles$/.test(e),"data-testid":"inline_styles",children:"Inline Styles"})})]})]})},P=t(9362),S=t(176);let z=(0,i.zo)(o.Z).withConfig({componentId:"sc-f243618c-0"})(["width:100%;"]);function I(){let e=(0,y.Z)({query:{media:"(min-width: 1281px)"}}),n=(0,y.Z)({query:{media:"(max-width: 1280px)"}}),t=(0,y.Z)({query:{media:"(max-width: 768px)"}});return(0,s.jsx)(P.Z,{children:(0,s.jsxs)(a.Z,{children:[(0,s.jsx)(k.Z,{currentPage:"root/core/children"}),(0,s.jsxs)(d.Z,{display:"flex",children:[e&&(0,s.jsx)(l.Z,{children:(0,s.jsx)(h.Z,{fluid:!0,children:(0,s.jsx)(w.Z,{})})}),(0,s.jsxs)(z,{borderLeft:t?"none":n?"none":"dark",borderRight:t?"none":"dark",children:[(0,s.jsx)(d.Z,{borderBottom:"dark",children:(0,s.jsx)(h.Z,{children:(0,s.jsxs)(c.Z,{children:[(0,s.jsx)(m.Z,{variant:"transparent",href:"/core",width:"auto","data-testid":"breadcrumbs_core",children:"core"}),(0,s.jsx)(g.Z,{}),(0,s.jsx)(m.Z,{variant:"transparent",href:"/core/customization",active:!0,width:"auto","data-testid":"breadcrumbs_customization",children:"customization"})]})})}),(0,s.jsxs)(h.Z,{fluid:!1,children:[(0,s.jsxs)(p.Z,{id:"customization",children:[(0,s.jsx)(x.Z,{variant:"h1",children:"Customization"}),(0,s.jsx)(x.Z,{variant:"body1",children:"The core library provides various ways to customize its components to fit your project's design and functionality requirements:"})]}),(0,s.jsxs)(p.Z,{id:"theming",children:[(0,s.jsx)(x.Z,{variant:"h2",children:"Theming"}),(0,s.jsxs)(x.Z,{variant:"body1",children:["Customize the appearance and behavior of core components using a theming system from",(0,s.jsxs)(m.Z,{variant:"inline",target:"_blank",href:"https://github.com/modjs-org/modjs/tree/main/packages/utils","data-testid":"theming_modjs_utils",children:["@modjs/utils. ",(0,s.jsx)(j.Z,{})]})]}),(0,s.jsxs)(p.Z,{id:"light-theme",children:[(0,s.jsx)(x.Z,{variant:"h3",children:"Light Theme"}),(0,s.jsx)(f.Z,{variant:"filled",notched:!0,fileName:(0,s.jsxs)(d.Z,{display:"flex",alignItems:"center",gap:4,children:[(0,s.jsx)(u.Z,{height:"2em",width:"1.5em"}),(0,s.jsx)(x.Z,{variant:"small",fs:1,children:"lightTheme.js"})]}),children:"import { ModLightTheme } from '@modjs/utils'\n\n    mode: '#ffffff',\n\n    typography: {\n        ff: {\n            primary: 'KoHo',\n        },\n        fw: {\n            medium: 400,\n            semibold: 600,\n            bold: 700,\n        },\n        fs: {\n            xsm: '0.75rem',\n            sm: '0.875rem',\n            md: '1rem',\n            lg: '1.5rem',\n            xl: '2rem',\n        },\n        color: {\n            primary: '#474747',\n            main: '#474747',\n            light: '#8e8e8e',\n            secondary: '#c2c2c2',\n            white: '#ffffff',\n            success: '#5a6b31',\n            error: '#ca3c1f',\n        },\n    },\n    color: {\n        primary: '#1f8eff',\n        secondary: '#474747',\n        main: '#c2c2c2',\n        success: '#5a6b31',\n        error: '#ca3c1f',\n        light: '#f2f2f2',\n        dark: '#c2c2c2',\n        transparent: 'transparent',\n    },\n    border: {\n        primary: '1px solid #1f8eff',\n        success: '1px solid #5a6b31',\n        error: '1px solid #ca3c1f',\n        light: '1px solid #f2f2f2',\n        dark: '1px solid #c2c2c2',\n        none: 'none',\n    },\n    borderRadius: '2px',\n    avatar: {\n        height: {\n            sm: '32px',\n            md: '64px',\n            lg: '96px',\n        },\n        width: {\n            sm: '32px',\n            md: '64px',\n            lg: '96px',\n        },\n        brightness: {\n            light: 'brightness(60%)',\n            normal: 'brightness(40%)',\n            dark: 'brightness(20%)',\n        },\n    },\n    image: {\n        height: {\n            sm: '96px',\n            md: '240px',\n            lg: '320px',\n        },\n        width: {\n            sm: '96px',\n            md: '240px',\n            lg: '320px',\n        },\n        brightness: {\n            light: 'brightness(60%)',\n            normal: 'brightness(40%)',\n            dark: 'brightness(20%)',\n        },\n    },\n    icons: {\n        height: {\n            sm: '16px',\n            md: '32px',\n            lg: '64px',\n        },\n        width: {\n            sm: '24px',\n            md: '32px',\n            lg: '64px',\n        },\n    },\n    elevation: {\n        light: 'drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.1))',\n        normal: 'drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.3))',\n        heavy: 'drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.6))',\n        none: 'none',\n    },\n    opacity: {\n        high: 0.95,\n        medium: 0.85,\n        low: 0.5,\n    },\n    scrollbarColor: '#c2c2c2 #f2f2f2',\n    tooltipBg: '#474747',\n}\nexport default lightTheme"})]}),(0,s.jsxs)(p.Z,{id:"dark-theme",children:[(0,s.jsx)(x.Z,{variant:"h3",children:"Dark Theme"}),(0,s.jsx)(f.Z,{variant:"filled",notched:!0,fileName:(0,s.jsxs)(d.Z,{display:"flex",alignItems:"center",gap:4,children:[(0,s.jsx)(u.Z,{height:"2em",width:"1.5em"}),(0,s.jsx)(x.Z,{variant:"small",fs:1,children:"darkTheme.js"})]}),children:"import { ModDarkTheme } from '@modjs/utils'\n\n    ...ModDarkTheme.mode,\n    mode: '#121111',\n    typography: {\n        ...ModDarkTheme.typography,\n        ff: {\n            primary: 'KoHo',\n        },\n        fw: {\n            medium: 400,\n            semibold: 600,\n            bold: 700,\n        },\n        fs: {\n            xsm: '0.75rem',\n            sm: '0.875rem',\n            md: '1rem',\n            lg: '1.5rem',\n            xl: '2rem',\n        },\n        color: {\n            primary: '#ffffff',\n            main: '#c2c2c2',\n            light: '#8e8e8e',\n            secondary: '#474747',\n            white: '#ffffff',\n            success: '#5a6b31',\n            error: '#ca3c1f',\n        },\n    },\n    color: {\n        primary: '#1f8eff',\n        secondary: '#ffffff',\n        main: '#c2c2c2',\n        success: '#5a6b31',\n        error: '#ca3c1f',\n        light: '#1f1d1d',\n        dark: '#474747',\n        transparent: 'transparent',\n    },\n    border: {\n        primary: '1px solid #1f8eff',\n        success: '1px solid #5a6b31',\n        error: '1px solid #ca3c1f',\n        light: '1px solid #1f1d1d',\n        dark: '1px solid #474747',\n        none: 'none',\n    },\n    borderRadius: '2px',\n    avatar: {\n        height: {\n            sm: '32px',\n            md: '64px',\n            lg: '96px',\n        },\n        width: {\n            sm: '32px',\n            md: '64px',\n            lg: '96px',\n        },\n        brightness: {\n            light: 'brightness(60%)',\n            normal: 'brightness(40%)',\n            dark: 'brightness(20%)',\n        },\n    },\n    image: {\n        height: {\n            sm: '96px',\n            md: '240px',\n            lg: '320px',\n        },\n        width: {\n            sm: '96px',\n            md: '240px',\n            lg: '320px',\n        },\n        brightness: {\n            light: 'brightness(60%)',\n            normal: 'brightness(40%)',\n            dark: 'brightness(20%)',\n        },\n    },\n    icons: {\n        height: {\n            sm: '1rem',\n            md: '2rem',\n            lg: '4rem',\n        },\n        width: {\n            sm: '1.5rem',\n            md: '2rem',\n            lg: '4rem',\n        },\n    },\n    elevation: {\n        light: 'drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.1))',\n        normal: 'drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.3))',\n        heavy: 'drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.6))',\n        none: 'none',\n    },\n    opacity: {\n        high: 0.95,\n        medium: 0.85,\n        low: 0.5,\n    },\n    scrollbarColor: '#474747 #1f1d1d',\n    tooltipBg: '#8e8e8e',\n}\nexport default darkTheme"})]})]}),(0,s.jsxs)(p.Z,{id:"override-styles",children:[(0,s.jsx)(x.Z,{variant:"h2",children:"Override Styles"}),(0,s.jsx)(x.Z,{variant:"body1",children:"To override default styles of the components, you have several options. Note that the following options are listed in accending order based on the precedence. For example: the default styles have lowest precedence followed by the styles from System Props while the inline styles have the highest precedence."}),(0,s.jsxs)(p.Z,{id:"system-props",children:[(0,s.jsx)(x.Z,{variant:"h3",children:"System Props"}),(0,s.jsxs)(x.Z,{variant:"body1",children:["Each component under @modjs/core is wrapped with a",(0,s.jsxs)(m.Z,{variant:"inline",target:"_blank",href:"https://github.com/modjs-org/modjs/blob/main/packages/utils/src/components/withSystemProps/withSystemProps.tsx","data-testid":"system_props_withSystemProps",children:["withSystemProps ",(0,s.jsx)(j.Z,{})]}),"HOC. All props provided by withModSystemProps can be applied to the component to override default styles."]}),(0,s.jsx)(f.Z,{variant:"filled",notched:!0,type:"script",fileName:(0,s.jsxs)(d.Z,{display:"flex",alignItems:"center",gap:4,children:[(0,s.jsx)(Z.Z,{height:"2em",width:"1.5em"}),(0,s.jsx)(x.Z,{variant:"small",fs:1,children:"App.jsx"})]}),children:"import { CodeEditor, Layout, Typography } from '@modjs/core' \nimport {ModThemeProvider, ModLightTheme} from '@modjs/utils'\n\nexport const App = () => {\n    <ModThemeProvider theme={ModLightTheme}>\n        <Layout>\n            <CodeEditor\n                m={32}\n                p={32}\n            >\n                {codeEditorContent}\n            </CodeEditor>\n        </Layout>\n    </ModThemeProvider>  \n}\n"})]}),(0,s.jsxs)(p.Z,{id:"styled-components",children:[(0,s.jsx)(x.Z,{variant:"h3",children:"Styled Components"}),(0,s.jsxs)(x.Z,{variant:"body1",children:["All core components from @modjs/core are styled using the",(0,s.jsxs)(m.Z,{variant:"inline",target:"_blank",href:"https://styled-components.com/","data-testid":"styled_components_styled_components",children:["styled-components ",(0,s.jsx)(j.Z,{})]}),"library. The default styles can be overridden using styled-components."]}),(0,s.jsx)(f.Z,{variant:"filled",notched:!0,type:"script",fileName:(0,s.jsxs)(d.Z,{display:"flex",alignItems:"center",gap:4,children:[(0,s.jsx)(Z.Z,{height:"2em",width:"1.5em"}),(0,s.jsx)(x.Z,{variant:"small",fs:1,children:"App.jsx"})]}),children:"import { Layout, Typography } from '@modjs/core' \nimport {ModThemeProvider, ModDarkTheme} from '@modjs/utils'\n\nconst StyledTypography = styled(Typography)`\n    color: #5a6b31;\n    font-size: 1rem;\n`\nexport const App = () => {\n    <ModThemeProvider theme={ModDarkTheme}>\n        <Layout>\n            <StyledTypography>\n                Typography component styled using styled() from styled-components\n            </StyledTypography>\n        </Layout>\n    </ModThemeProvider>"})]}),(0,s.jsxs)(p.Z,{id:"custom-classnames",children:[(0,s.jsx)(x.Z,{variant:"h3",children:"Custom classNames"}),(0,s.jsx)(x.Z,{variant:"body1",children:"Each core components are designed to accept all valid HTML attributes. Therefore, the core components can be styled using the class attribute."}),(0,s.jsx)(f.Z,{variant:"filled",notched:!0,type:"script",fileName:(0,s.jsxs)(d.Z,{display:"flex",alignItems:"center",gap:4,children:[(0,s.jsx)(Z.Z,{height:"2em",width:"1.5em"}),(0,s.jsx)(x.Z,{variant:"small",fs:1,children:"App.jsx"})]}),children:"import { Layout, Link } from '@modjs/core' \nimport {ModThemeProvider, ModDarkTheme} from '@modjs/utils'\n\nexport const App = () => {\n    <ModThemeProvider theme={ModDarkTheme}>\n        <Layout>\n            <Link className = \"link-class\">\n                Link component styled using custom className\n            </Link>\n        </Layout>\n    </ModThemeProvider>"})]}),(0,s.jsxs)(p.Z,{id:"inline-styles",children:[(0,s.jsx)(x.Z,{variant:"h3",children:"Inline Styles"}),(0,s.jsx)(x.Z,{variant:"body1",children:"Since all core components accept valid HTML attributes, the component can also be styled using the style HTML attribute."}),(0,s.jsx)(f.Z,{variant:"filled",notched:!0,type:"script",fileName:(0,s.jsxs)(d.Z,{display:"flex",alignItems:"center",gap:4,children:[(0,s.jsx)(Z.Z,{height:"2em",width:"1.5em"}),(0,s.jsx)(x.Z,{variant:"small",fs:1,children:"App.jsx"})]}),children:"import { Layout, Button } from '@modjs/core' \nimport {ModThemeProvider, ModDarkTheme} from '@modjs/utils'\n\nexport const App = () => {\n    <ModThemeProvider theme={ModDarkTheme}>\n        <Layout>\n            <Button style = {{padding: \"8px\" margin: \"8px\"}}>\n                Button component styled using style HTML attribute.\n            </Button>\n        </Layout>\n    </ModThemeProvider>"})]})]}),(0,s.jsxs)(d.Z,{display:"flex",justifyContent:"space-between",my:32,children:[(0,s.jsxs)(m.Z,{href:"/core/installation",variant:"inline",display:"flex",alignItems:"center","data-testid":"prev_installation",children:[(0,s.jsx)(v.Z,{}),"Installation"]}),(0,s.jsxs)(m.Z,{href:"/core/api/react-accordion",variant:"inline",display:"flex",alignItems:"center","data-testid":"next_accordion_api",children:["Accordion API",(0,s.jsx)(b.Z,{})]})]})]}),(0,s.jsx)(T.Z,{})]}),(0,s.jsx)(S.Z,{defaultFragmentId:"#customization",sections:["customization","theming","light-theme","dark-theme","override-styles","system-props","styled-components","custom-classnames","inline-styles"],children:(0,s.jsx)(L,{})})]})]})})}}},function(e){e.O(0,[4293,65,6071,4663,8322,3375,3372,8470,9594,1744],function(){return e(e.s=810)}),_N_E=e.O()}]);