UNPKG

@unicity/design-system

Version:

A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support

2 lines (1 loc) 8.55 kB
var __defProp=Object.defineProperty;var __name=(target,value)=>__defProp(target,"name",{value,configurable:!0});Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const index=require("./index-2aYpps03.cjs"),iconsMaterial=require("@mui/icons-material"),reactI18next=require("react-i18next"),VisualAccessibility=__name(({compact=!1,onEvent})=>{const{t}=reactI18next.useTranslation(),{settings,updateSettings,resolvedMode}=index.useTheme(),accessibilityMode=settings.accessibilityMode,onAccessibilityModeChange=__name(checked=>{const newMode=checked?"high-contrast":"default";onEvent?.({type:"accessibility_mode_change",value:newMode,enabled:checked,previousMode:accessibilityMode}),updateSettings({...settings,accessibilityMode:newMode})},"onAccessibilityModeChange"),isDarkModeHighContrast=resolvedMode==="dark"&&accessibilityMode==="high-contrast";return index.jsxs(index.Box,{sx:{width:"100%"},children:[index.jsxs(index.Box,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",borderColor:"divider",borderRadius:1,backgroundColor:"background.paper",mb:3,gap:1.5},children:[index.jsx(index.Box,{sx:__name(theme=>({p:.75,borderRadius:1,backgroundColor:"primary.main",color:"primary.contrastText",display:"flex",alignItems:"center",justifyContent:"center","& .MuiSvgIcon-root":{fill:`${theme.palette.primary.contrastText} !important`,color:`${theme.palette.primary.contrastText} !important`,filter:isDarkModeHighContrast?"brightness(0)":resolvedMode==="dark"?"brightness(0) invert(0)":"brightness(0) invert(1)"}}),"sx"),children:index.jsx(iconsMaterial.Palette,{fontSize:"small"})}),index.jsxs(index.Box,{sx:{flex:1},children:[index.jsx(index.Typography,{sx:{fontSize:"calc(14px * var(--unicity-font-scale, 1))",fontWeight:600},children:t("visual_accessibility.title")}),index.jsx(index.Typography,{sx:{fontSize:"calc(12px * var(--unicity-font-scale, 1))",color:"text.secondary",mt:.25},children:t("visual_accessibility.description")})]}),index.jsx(index.Tooltip,{title:t("visual_accessibility.tooltip"),placement:"left",arrow:!0,children:index.jsx(index.IconButton,{size:"small",sx:{alignSelf:"flex-start"},children:index.jsx(iconsMaterial.Info,{fontSize:"small"})})})]}),index.jsxs(index.Box,{sx:{p:2.5,border:"1px solid",borderColor:accessibilityMode==="high-contrast"?"success.main":"divider",borderRadius:2,backgroundColor:accessibilityMode==="high-contrast"?"success.50":"transparent",transition:"all 0.2s ease-in-out"},children:[index.jsxs(index.Box,{sx:{display:"flex",alignItems:"flex-start",justifyContent:"space-between",mb:1},children:[index.jsxs(index.Box,{sx:{flex:1},children:[index.jsx(index.Typography,{variant:"h6",fontWeight:600,color:accessibilityMode==="high-contrast"?"success":"textPrimary",children:t("visual_accessibility.high_contrast_mode")}),index.jsx(index.Typography,{variant:"body2",color:"textSecondary",sx:{mt:.5},children:t("visual_accessibility.high_contrast_description")})]}),index.jsx(index.Switch,{checked:accessibilityMode==="high-contrast",onChange:__name(checked=>onAccessibilityModeChange(checked),"onChange"),name:"highContrast"})]}),accessibilityMode==="high-contrast"&&index.jsx(index.Box,{sx:{mt:2,p:1.5,backgroundColor:"success.100",borderRadius:1,border:"1px solid",borderColor:"success.200"},children:index.jsx(index.Typography,{variant:"caption",color:"success",fontWeight:500,children:t("visual_accessibility.high_contrast_active")})})]}),!compact&&index.jsxs(index.Box,{mt:2,p:2,children:[index.jsx(index.Typography,{variant:"caption",fontWeight:500,mb:1.5,color:"textSecondary",sx:{fontSize:"0.75rem"},children:t("visual_accessibility.preview")}),index.jsxs(index.Box,{mb:3,children:[index.jsx(index.Typography,{variant:"body2",fontWeight:500,mb:1.5,children:t("visual_accessibility.contrast_comparison")}),index.jsxs(index.Box,{sx:{display:"grid",gridTemplateColumns:{xs:"1fr",sm:"1fr 1fr"},gap:2},children:[index.jsxs(index.Box,{sx:{p:2,border:"1px solid",borderColor:"divider",borderRadius:1,backgroundColor:accessibilityMode==="default"?"background.paper":"grey.50",opacity:accessibilityMode==="default"?1:.7},children:[index.jsx(index.Typography,{variant:"caption",color:"textSecondary",mb:1,display:"block",children:t("visual_accessibility.default_mode")}),index.jsx(index.Typography,{variant:"body2",sx:{color:"text.primary",mb:1},children:t("visual_accessibility.regular_text_contrast")}),index.jsx(index.Box,{sx:{width:"100%",height:8,background:"linear-gradient(90deg, #1976d2 0%, #42a5f5 100%)",borderRadius:1,mb:1}}),index.jsx(index.Typography,{variant:"caption",color:"textSecondary",children:t("visual_accessibility.standard_colors_spacing")})]}),index.jsxs(index.Box,{sx:{p:2,border:"2px solid",borderColor:accessibilityMode==="high-contrast"?"text.primary":"divider",borderRadius:1,backgroundColor:accessibilityMode==="high-contrast"?"background.paper":"grey.50",opacity:accessibilityMode==="high-contrast"?1:.7},children:[index.jsx(index.Typography,{variant:"caption",color:"textSecondary",mb:1,display:"block",children:t("visual_accessibility.high_contrast_mode_title")}),index.jsx(index.Typography,{variant:"body2",sx:{color:accessibilityMode==="high-contrast"?"text.primary":"text.secondary",fontWeight:accessibilityMode==="high-contrast"?600:400,mb:1},children:t("visual_accessibility.enhanced_text_contrast")}),index.jsx(index.Box,{sx:{width:"100%",height:8,backgroundColor:accessibilityMode==="high-contrast"?"text.primary":"grey.400",borderRadius:1,mb:1}}),index.jsx(index.Typography,{variant:"caption",sx:{color:accessibilityMode==="high-contrast"?"text.primary":"text.secondary"},children:t("visual_accessibility.bold_colors_borders")})]})]})]}),index.jsxs(index.Box,{mb:3,children:[index.jsx(index.Typography,{variant:"body2",fontWeight:500,mb:1.5,children:t("visual_accessibility.interactive_elements")}),index.jsxs(index.Box,{sx:{display:"flex",gap:2,flexWrap:"wrap",alignItems:"center"},children:[index.jsx(index.Button,{variant:"contained",size:"small",sx:{borderWidth:accessibilityMode==="high-contrast"?2:1,borderStyle:"solid",borderColor:accessibilityMode==="high-contrast"?"text.primary":"primary.main"},children:t("visual_accessibility.button")}),index.jsx(index.Button,{variant:"outlined",size:"small",sx:{borderWidth:accessibilityMode==="high-contrast"?2:1,fontWeight:accessibilityMode==="high-contrast"?600:500},children:t("visual_accessibility.outlined_button")}),index.jsx(index.Box,{sx:{width:20,height:20,backgroundColor:accessibilityMode==="high-contrast"?"text.primary":"primary.main",border:accessibilityMode==="high-contrast"?"2px solid":"1px solid",borderColor:accessibilityMode==="high-contrast"?"background.paper":"primary.main",borderRadius:1}})]})]}),index.jsxs(index.Box,{mb:2,children:[index.jsx(index.Typography,{variant:"body2",fontWeight:500,mb:1.5,children:t("common.accessibility_guidelines")}),index.jsxs(index.Box,{sx:{pl:1},children:[accessibilityMode==="high-contrast"?index.jsx(index.Alert,{severity:"success",sx:{mb:1},children:index.jsx(index.Typography,{variant:"body2",children:t("visual_accessibility.high_contrast_on")})}):index.jsx(index.Alert,{severity:"info",sx:{mb:1},children:index.jsx(index.Typography,{variant:"body2",children:t("visual_accessibility.standard_mode")})}),index.jsxs(index.Typography,{variant:"caption",color:"textSecondary",children:[index.jsxs("strong",{children:[t("visual_accessibility.contrast_guidelines"),":"]}),index.jsx("br",{}),"• ",index.jsxs("strong",{children:[t("visual_accessibility.wcag_aa"),":"]})," ",t("visual_accessibility.wcag_aa_guideline"),index.jsx("br",{}),"• ",index.jsxs("strong",{children:[t("visual_accessibility.wcag_aaa"),":"]})," ",t("visual_accessibility.wcag_aaa_guideline"),index.jsx("br",{}),"• ",index.jsxs("strong",{children:[t("visual_accessibility.high_contrast_mode"),":"]})," ",t("visual_accessibility.high_contrast_guideline"),index.jsx("br",{}),"• ",index.jsxs("strong",{children:[t("visual_accessibility.benefits"),":"]})," ",t("visual_accessibility.benefits_guideline")]})]})]}),index.jsxs(index.Typography,{variant:"caption",color:"textSecondary",sx:{display:"block"},children:[index.jsxs("strong",{children:[t("visual_accessibility.current_mode"),":"]})," ",t(accessibilityMode==="high-contrast"?"visual_accessibility.wcag_aaa":"visual_accessibility.wcag_aa")," •",index.jsxs("strong",{children:[t("visual_accessibility.contrast_ratio"),":"]})," ",accessibilityMode==="high-contrast"?"7:1+":"4.5:1+"]})]})]})},"VisualAccessibility");exports.VisualAccessibility=VisualAccessibility;exports.default=VisualAccessibility;