@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) • 19.7 kB
JavaScript
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"),material=require("@mui/material"),iconsMaterial=require("@mui/icons-material"),reactI18next=require("react-i18next"),ColorVisibility=__name(({compact=!1,onEvent})=>{const{t}=reactI18next.useTranslation(),{settings,updateSettings,resolvedMode}=index.useTheme(),accessibilityMode=settings.accessibilityMode,isDarkModeHighContrast=resolvedMode==="dark"&&accessibilityMode==="high-contrast",colorVisibility=settings.colorVisibility,onColorVisibilityChange=__name((field,value)=>{updateSettings({...settings,colorVisibility:{...colorVisibility,[field]:value}})},"onColorVisibilityChange");return index.jsxs(index.Box,{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.Visibility,{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("color_visibility.title")}),index.jsx(index.Typography,{sx:{fontSize:"calc(12px * var(--unicity-font-scale, 1))",color:"text.secondary"},children:t("color_visibility.description")})]}),index.jsx(index.Tooltip,{title:t("color_visibility.tooltip"),placement:"left",arrow:!0,children:index.jsx(index.IconButton,{size:"small",sx:{alignSelf:"flex-start"},children:index.jsx(iconsMaterial.Info,{fontSize:"small"})})})]}),index.jsx(index.Box,{sx:{p:3,border:"1px solid",borderColor:"divider",borderRadius:1,backgroundColor:"background.paper",boxShadow:"0 1px 3px rgba(0, 0, 0, 0.08)",mb:3},children:index.jsxs(material.Stack,{spacing:2.5,children:[index.jsxs(index.Box,{children:[index.jsx(index.Typography,{variant:"body2",fontWeight:500,mb:2,children:t("color_visibility.color_blind_support")}),index.jsx(index.Typography,{variant:"body2",color:"textSecondary",mb:2,children:t("color_visibility.support_description")}),index.jsxs(index.Box,{sx:{display:"grid",gridTemplateColumns:{xs:"1fr",sm:"repeat(2, 1fr)",md:"repeat(4, 1fr)"},gap:1.5},children:[index.jsxs(index.Box,{onClick:__name(()=>onColorVisibilityChange("colorBlindSupport","none"),"onClick"),sx:{p:1.5,border:"2px solid",borderColor:colorVisibility.colorBlindSupport==="none"?"primary.main":"divider",borderRadius:1,backgroundColor:colorVisibility.colorBlindSupport==="none"?"primary.50":"transparent",cursor:"pointer",transition:"all 0.2s ease",textAlign:"center",minHeight:100,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center","&:hover":{borderColor:colorVisibility.colorBlindSupport==="none"?"primary.main":"primary.light",backgroundColor:colorVisibility.colorBlindSupport==="none"?"primary.50":"action.hover"}},children:[index.jsx(index.Box,{sx:{width:20,height:20,borderRadius:"50%",backgroundColor:colorVisibility.colorBlindSupport==="none"?"primary.main":"action.selected",color:colorVisibility.colorBlindSupport==="none"?"primary.contrastText":"text.secondary",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"0.75rem",fontWeight:"bold",mb:1},children:"✓"}),index.jsx(index.Typography,{variant:"body2",fontWeight:600,mb:.5,children:t("color_visibility.none")}),index.jsxs(index.Box,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",borderColor:"divider",mt:.5,mb:.5,gap:1.5},children:[index.jsx(index.Box,{sx:{width:12,height:12,backgroundColor:"#DC143C",borderRadius:"50%"}}),index.jsx(index.Box,{sx:{width:12,height:12,backgroundColor:"#32CD32",borderRadius:"50%"}}),index.jsx(index.Box,{sx:{width:12,height:12,backgroundColor:"#4169E1",borderRadius:"50%"}})]}),index.jsx(index.Typography,{variant:"caption",color:"textSecondary",children:t("color_visibility.full_spectrum")})]}),index.jsxs(index.Box,{onClick:__name(()=>onColorVisibilityChange("colorBlindSupport","protanopia"),"onClick"),sx:{p:1.5,border:"2px solid",borderColor:colorVisibility.colorBlindSupport==="protanopia"?"primary.main":"divider",borderRadius:1,backgroundColor:colorVisibility.colorBlindSupport==="protanopia"?"primary.50":"transparent",cursor:"pointer",transition:"all 0.2s ease",textAlign:"center",minHeight:100,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center","&:hover":{borderColor:colorVisibility.colorBlindSupport==="protanopia"?"primary.main":"primary.light",backgroundColor:colorVisibility.colorBlindSupport==="protanopia"?"primary.50":"action.hover"}},children:[index.jsx(index.Box,{sx:{width:20,height:20,borderRadius:"50%",backgroundColor:colorVisibility.colorBlindSupport==="protanopia"?"primary.main":"action.selected",color:colorVisibility.colorBlindSupport==="protanopia"?"primary.contrastText":"text.secondary",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"0.75rem",fontWeight:"bold",mb:1},children:"✓"}),index.jsx(index.Typography,{variant:"body2",fontWeight:600,mb:.5,children:t("color_visibility.protanopia")}),index.jsxs(index.Box,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",borderColor:"divider",mt:.5,mb:.5,gap:1.5},children:[index.jsx(index.Box,{sx:{width:12,height:12,backgroundColor:"#D4AF37",borderRadius:"50%"}}),index.jsx(index.Box,{sx:{width:12,height:12,backgroundColor:"#B8860B",borderRadius:"50%"}}),index.jsx(index.Box,{sx:{width:12,height:12,backgroundColor:"#4169E1",borderRadius:"50%"}})]}),index.jsx(index.Typography,{variant:"caption",color:"textSecondary",children:t("color_visibility.color_blind_descriptions.protanopia")})]}),index.jsxs(index.Box,{onClick:__name(()=>onColorVisibilityChange("colorBlindSupport","deuteranopia"),"onClick"),sx:{p:1.5,border:"2px solid",borderColor:colorVisibility.colorBlindSupport==="deuteranopia"?"primary.main":"divider",borderRadius:1,backgroundColor:colorVisibility.colorBlindSupport==="deuteranopia"?"primary.50":"transparent",cursor:"pointer",transition:"all 0.2s ease",textAlign:"center",minHeight:100,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center","&:hover":{borderColor:colorVisibility.colorBlindSupport==="deuteranopia"?"primary.main":"primary.light",backgroundColor:colorVisibility.colorBlindSupport==="deuteranopia"?"primary.50":"action.hover"}},children:[index.jsx(index.Box,{sx:{width:20,height:20,borderRadius:"50%",backgroundColor:colorVisibility.colorBlindSupport==="deuteranopia"?"primary.main":"action.selected",color:colorVisibility.colorBlindSupport==="deuteranopia"?"primary.contrastText":"text.secondary",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"0.75rem",fontWeight:"bold",mb:1},children:"✓"}),index.jsx(index.Typography,{variant:"body2",fontWeight:600,mb:.5,children:t("color_visibility.deuteranopia")}),index.jsxs(index.Box,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",borderColor:"divider",mt:.5,mb:.5,gap:1.5},children:[index.jsx(index.Box,{sx:{width:12,height:12,backgroundColor:"#DC143C",borderRadius:"50%"}}),index.jsx(index.Box,{sx:{width:12,height:12,backgroundColor:"#DAA520",borderRadius:"50%"}}),index.jsx(index.Box,{sx:{width:12,height:12,backgroundColor:"#4169E1",borderRadius:"50%"}})]}),index.jsx(index.Typography,{variant:"caption",color:"textSecondary",children:t("color_visibility.color_blind_descriptions.deuteranopia")})]}),index.jsxs(index.Box,{onClick:__name(()=>onColorVisibilityChange("colorBlindSupport","tritanopia"),"onClick"),sx:{p:1.5,border:"2px solid",borderColor:colorVisibility.colorBlindSupport==="tritanopia"?"primary.main":"divider",borderRadius:1,backgroundColor:colorVisibility.colorBlindSupport==="tritanopia"?"primary.50":"transparent",cursor:"pointer",transition:"all 0.2s ease",textAlign:"center",minHeight:100,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center","&:hover":{borderColor:colorVisibility.colorBlindSupport==="tritanopia"?"primary.main":"primary.light",backgroundColor:colorVisibility.colorBlindSupport==="tritanopia"?"primary.50":"action.hover"}},children:[index.jsx(index.Box,{sx:{width:20,height:20,borderRadius:"50%",backgroundColor:colorVisibility.colorBlindSupport==="tritanopia"?"primary.main":"action.selected",color:colorVisibility.colorBlindSupport==="tritanopia"?"primary.contrastText":"text.secondary",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"0.75rem",fontWeight:"bold",mb:1},children:"✓"}),index.jsx(index.Typography,{variant:"body2",fontWeight:600,mb:.5,children:t("color_visibility.tritanopia")}),index.jsxs(index.Box,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",borderColor:"divider",mt:.5,mb:.5,gap:1.5},children:[index.jsx(index.Box,{sx:{width:12,height:12,backgroundColor:"#DC143C",borderRadius:"50%"}}),index.jsx(index.Box,{sx:{width:12,height:12,backgroundColor:"#32CD32",borderRadius:"50%"}}),index.jsx(index.Box,{sx:{width:12,height:12,backgroundColor:"#DCDCDC",borderRadius:"50%"}})]}),index.jsx(index.Typography,{variant:"caption",color:"textSecondary",children:t("color_visibility.color_blind_descriptions.tritanopia")})]})]})]}),index.jsxs(index.Box,{children:[index.jsxs(index.Typography,{variant:"body2",fontWeight:500,mb:1,children:[t("color_visibility.color_richness"),": ",colorVisibility.saturation===.5?t("color_visibility.richness_labels.muted"):colorVisibility.saturation===1?t("color_visibility.richness_labels.normal"):colorVisibility.saturation===1.5?t("color_visibility.richness_labels.vibrant"):t("common.custom")]}),index.jsx(index.Slider,{value:colorVisibility.saturation,onChange:__name(value=>onColorVisibilityChange("saturation",value),"onChange"),min:.5,max:1.5,step:.1,marks:[{value:.5,label:t("color_visibility.richness_labels.muted")},{value:1,label:t("color_visibility.richness_labels.normal")},{value:1.5,label:t("color_visibility.richness_labels.vibrant")}],sx:{"& .MuiSlider-markLabel":{fontSize:"0.75rem",'&[data-index="0"]':{transform:"translateX(0%)",textAlign:"left"},'&[data-index="2"]':{transform:"translateX(-100%)",textAlign:"right"}}}})]}),index.jsxs(index.Box,{children:[index.jsxs(index.Typography,{variant:"body2",fontWeight:500,mb:1,children:[t("color_visibility.brightness"),": ",colorVisibility.brightness===.5?t("color_visibility.brightness_labels.dim"):colorVisibility.brightness===1?t("color_visibility.brightness_labels.normal"):colorVisibility.brightness===1.5?t("color_visibility.brightness_labels.bright"):t("common.custom")]}),index.jsx(index.Slider,{value:colorVisibility.brightness,onChange:__name(value=>onColorVisibilityChange("brightness",value),"onChange"),min:.5,max:1.5,step:.1,marks:[{value:.5,label:t("color_visibility.brightness_labels.dim")},{value:1,label:t("color_visibility.brightness_labels.normal")},{value:1.5,label:t("color_visibility.brightness_labels.bright")}],sx:{"& .MuiSlider-markLabel":{fontSize:"0.75rem",'&[data-index="0"]':{transform:"translateX(0%)",textAlign:"left"},'&[data-index="2"]':{transform:"translateX(-100%)",textAlign:"right"}}}})]})]})}),!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("color_visibility.preview_guidelines")}),index.jsxs(index.Box,{mb:3,children:[index.jsx(index.Typography,{variant:"body2",fontWeight:500,mb:1.5,children:t("color_visibility.system_brand_colors")}),index.jsx(index.Typography,{variant:"caption",color:"textSecondary",mb:1.5,sx:{display:"block"},children:t("color_visibility.palette_description")}),index.jsx(index.Box,{sx:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(80px, 1fr))",gap:1,p:2,backgroundColor:"background.paper",border:"1px solid",borderColor:"divider",borderRadius:1},children:[{color:"primary",label:"P"},{color:"secondary",label:"S"},{color:"error",label:"E"},{color:"warning",label:"W"},{color:"info",label:"I"},{color:"success",label:"G"},{color:"unicityGreen",label:"UG"},{color:"unicityBlue",label:"UB"},{color:"unicityPurple",label:"UP"},{color:"unicityOrange",label:"UO"},{color:"unicityNavy",label:"UN"}].map(({color,label})=>index.jsxs(index.Box,{sx:{textAlign:"center"},children:[index.jsx(index.Box,{sx:{width:40,height:40,backgroundColor:`${color}.main`,borderRadius:1,display:"flex",alignItems:"center",justifyContent:"center",mx:"auto",mb:.5,color:`${color}.contrastText`,fontWeight:"bold"},children:label}),index.jsx(index.Typography,{variant:"caption",color:"textSecondary",children:color.charAt(0).toUpperCase()+color.slice(1)})]},color))})]}),index.jsxs(index.Box,{mb:3,children:[index.jsx(index.Typography,{variant:"body2",fontWeight:500,mb:1.5,children:t("color_visibility.interactive_elements")}),index.jsxs(material.Stack,{direction:"row",spacing:1,flexWrap:"wrap",children:[index.jsx(index.Button,{variant:"contained",color:"primary",size:"small",children:t("color_visibility.primary_button")}),index.jsx(index.Button,{variant:"contained",color:"secondary",size:"small",children:t("color_visibility.secondary_button")}),index.jsx(index.Button,{variant:"outlined",color:"error",size:"small",children:t("color_visibility.error_button")}),index.jsx(index.Button,{variant:"outlined",color:"warning",size:"small",children:t("color_visibility.warning_button")}),index.jsx(index.Button,{variant:"outlined",color:"info",size:"small",children:t("color_visibility.info_button")}),index.jsx(index.Button,{variant:"outlined",color:"success",size:"small",children:t("color_visibility.success_button")})]})]}),index.jsxs(index.Box,{mb:3,children:[index.jsx(index.Typography,{variant:"body2",fontWeight:500,mb:1.5,children:t("color_visibility.unicity_brand_chips")}),index.jsx(index.Typography,{variant:"caption",color:"textSecondary",mb:1.5,sx:{display:"block"},children:t("color_visibility.brand_description")}),index.jsxs(material.Stack,{direction:"row",spacing:1,flexWrap:"wrap",children:[index.jsx(material.Chip,{label:t("color_visibility.unicity_green"),color:"unicityGreen",size:"small"}),index.jsx(material.Chip,{label:t("color_visibility.unicity_blue"),color:"unicityBlue",size:"small"}),index.jsx(material.Chip,{label:t("color_visibility.unicity_purple"),color:"unicityPurple",size:"small"}),index.jsx(material.Chip,{label:t("color_visibility.unicity_orange"),color:"unicityOrange",size:"small"}),index.jsx(material.Chip,{label:t("color_visibility.unicity_navy"),color:"unicityNavy",size:"small"})]}),index.jsxs(material.Stack,{direction:"row",spacing:1,flexWrap:"wrap",mt:1,children:[index.jsx(material.Chip,{label:t("color_visibility.outlined_green"),color:"unicityGreen",variant:"outlined",size:"small"}),index.jsx(material.Chip,{label:t("color_visibility.outlined_blue"),color:"unicityBlue",variant:"outlined",size:"small"}),index.jsx(material.Chip,{label:t("color_visibility.outlined_purple"),color:"unicityPurple",variant:"outlined",size:"small"}),index.jsx(material.Chip,{label:t("color_visibility.outlined_orange"),color:"unicityOrange",variant:"outlined",size:"small"}),index.jsx(material.Chip,{label:t("color_visibility.outlined_navy"),color:"unicityNavy",variant:"outlined",size:"small"})]})]}),index.jsxs(index.Box,{mb:3,children:[index.jsx(index.Typography,{variant:"body2",fontWeight:500,mb:1.5,children:t("color_visibility.progress_indicators")}),index.jsx(index.Typography,{variant:"caption",color:"textSecondary",mb:1.5,sx:{display:"block"},children:"Progress bars with improved contrast in high contrast mode"}),index.jsxs(material.Stack,{spacing:2,children:[index.jsxs(index.Box,{children:[index.jsxs(index.Typography,{variant:"caption",sx:{mb:.5,display:"block"},children:[t("color_visibility.primary_color")," ",t("color_visibility.progress_label")," (64%)"]}),index.jsx(material.LinearProgress,{variant:"determinate",value:64,color:"primary"})]}),index.jsxs(index.Box,{children:[index.jsxs(index.Typography,{variant:"caption",sx:{mb:.5,display:"block"},children:[t("color_visibility.unicity_blue")," ",t("color_visibility.progress_label")," (75%)"]}),index.jsx(material.LinearProgress,{variant:"determinate",value:75,sx:{backgroundColor:"unicityBlue.light","& .MuiLinearProgress-bar":{backgroundColor:"unicityBlue.main"}}})]}),index.jsxs(index.Box,{children:[index.jsxs(index.Typography,{variant:"caption",sx:{mb:.5,display:"block"},children:[t("color_visibility.success_color")," ",t("color_visibility.progress_label")," (90%)"]}),index.jsx(material.LinearProgress,{variant:"determinate",value:90,color:"success"})]}),index.jsxs(index.Box,{children:[index.jsxs(index.Typography,{variant:"caption",sx:{mb:.5,display:"block"},children:[t("color_visibility.unicity_green")," ",t("color_visibility.progress_label")," (45%)"]}),index.jsx(material.LinearProgress,{variant:"determinate",value:45,sx:{backgroundColor:"unicityGreen.light","& .MuiLinearProgress-bar":{backgroundColor:"unicityGreen.main"}}})]})]})]}),colorVisibility.colorBlindSupport!=="none"&&index.jsx(index.Alert,{severity:"info",sx:{mb:2},children:index.jsxs(index.Typography,{variant:"body2",children:[t("color_visibility.color_blind_support_active",{type:colorVisibility.colorBlindSupport}),"vision to improve accessibility and color distinction."]})}),index.jsxs(index.Box,{mb:2,children:[index.jsx(index.Typography,{variant:"body2",fontWeight:500,mb:1.5,children:"Accessibility Guidelines"}),index.jsxs(index.Box,{sx:{pl:1},children:[colorVisibility.saturation<.8&&index.jsx(index.Alert,{severity:"warning",sx:{mb:1},children:index.jsxs(index.Typography,{variant:"body2",children:[t("color_visibility.low_saturation"),"to distinguish between different interface elements."]})}),colorVisibility.brightness<.7&&index.jsx(index.Alert,{severity:"warning",sx:{mb:1},children:index.jsxs(index.Typography,{variant:"body2",children:[t("color_visibility.low_brightness"),"in bright environments or for users with certain visual impairments."]})}),colorVisibility.colorBlindSupport!=="none"&&index.jsx(index.Alert,{severity:"success",sx:{mb:1},children:index.jsxs(index.Typography,{variant:"body2",children:[t("color_visibility.color_blind_support_desc"),"for users with ",colorVisibility.colorBlindSupport," color vision deficiency."]})}),index.jsxs(index.Typography,{variant:"caption",color:"textSecondary",children:[index.jsxs("strong",{children:[t("color_visibility.color_guidelines"),":"]}),index.jsx("br",{}),"• ",t("color_visibility.color_blind_guideline"),index.jsx("br",{}),"• ",t("color_visibility.saturation_guideline"),index.jsx("br",{}),"• ",t("color_visibility.brightness_accommodation"),index.jsx("br",{}),"• ",t("color_visibility.dont_rely_color")]})]})]}),index.jsxs(index.Typography,{variant:"caption",color:"textSecondary",sx:{display:"block"},children:[t("color_visibility.current_settings",{colorBlind:colorVisibility.colorBlindSupport}),"Saturation: ",Math.round(colorVisibility.saturation*100),"% • Brightness: ",Math.round(colorVisibility.brightness*100),"% •",index.jsxs("strong",{children:[t("common.accessibility"),":"]})," ",colorVisibility.colorBlindSupport!=="none"?"Enhanced":colorVisibility.saturation<.8||colorVisibility.brightness<.7?"Reduced":"Standard"]})]})]})},"ColorVisibility");exports.ColorVisibility=ColorVisibility;exports.default=ColorVisibility;