Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@colearn/theme

Package Overview
Dependencies
Maintainers
3
Versions
28
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@colearn/theme - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

1418

dist/index.cjs.js

@@ -1,2 +0,1418 @@

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e={parts:["container","avatar","label"],baseStyle:{container:{display:"flex",alignItems:"center",cursor:"pointer",pl:"4px",pr:"1rem",mr:"0.5rem",boxSizing:"content-box",border:"1px solid transparent",bg:"white",color:"#313131",_selected:{bg:"#ee682a",color:"white"},_hover:{bg:"#ee682a",color:"white"}},label:{color:void 0}},sizes:{md:{container:{h:"2.75rem",borderRadius:"1.375rem"}}},variants:{outline:{container:{borderColor:"#e4e4e4"}},"outline-truncated":{container:{borderColor:"#e4e4e4"},label:{isTruncated:!0}}}},r="".concat(20,"%");var o={components:{AutocompleteTags:{parts:["input","container","suggestions","suggestion"],baseStyle:{container:{bg:"white",boxSizing:"border-box",borderRadius:"0.25rem",pos:"relative",px:"0.5rem",pb:"0.25rem",border:"1px solid #e4e4e4",_focus:{borderColor:"rgb(49, 130, 206)"}},leftAddon:{position:"relative",display:"inline-block",pr:"0.5rem",pl:"0.25rem","> *":{display:"inline-block",verticalAlign:"center"}},tags:{display:"inline","> *":{mt:"0.25rem",mr:"0.25rem"}},inner:{position:"relative",display:"inline-block"},input:{pl:"2px",boxSizing:"content-box",outline:0,_focus:{border:"none",boxShadow:"none"}},suggestions:{top:"calc(100% + 0.7rem)",pos:"absolute",left:"0",bg:"white",py:"0.2rem",boxShadow:"sm"},suggestion:{fontSize:"md",px:"0.75rem",py:"0.3rem",cursor:"pointer",_hover:{bg:"gray.200"},mark:{backgroundColor:"transparent",fontWeight:"600"},_selected:{bg:"gray.200"}}},variants:{"single-line":{tags:{}}},sizes:{lg:{input:{lineHeight:"2rem"},leftAddon:{h:"2rem",lineHeight:"2rem"}},md:{input:{lineHeight:"1.75rem"},leftAddon:{h:"1.75rem",lineHeight:"1.75rem",minW:"1.75rem"}}},defaultProps:{variant:"resource",size:"md"}},Avatar:{baseStyle:{container:{color:"white",cursor:"pointer",fontWeight:"500",borderColor:"transparent"}},sizes:{xs:{container:{width:"1.5rem",height:"1.5rem"},excessLabel:{width:"1.5rem",height:"1.5rem"},label:{fontSize:"0.875rem"}},sm:{container:{width:"2rem",height:"2rem"},excessLabel:{width:"2rem",height:"2rem"},label:{fontSize:"1rem"}},md:{container:{width:"2.25rem",height:"2.25rem"},excessLabel:{width:"2.25rem",height:"2.25rem"},label:{fontSize:"1rem"}},lg:{container:{width:"2.5rem",height:"2.5rem"},excessLabel:{width:"2.5rem",height:"2.5rem"},label:{fontSize:"1.25rem"}},xl:{container:{width:"3.125rem",height:"3.125rem"},excessLabel:{width:"3.125rem",height:"3.125rem"},label:{fontSize:"1.25rem"}}},defaultProps:{size:"sm"}},Button:{baseStyle:{fontWeight:"700",_focus:{boxShadow:"none"}},variants:{outline:{borderWidth:"3px"},"dropdown-menu":{bg:"white",color:"#354144",fontWeight:500,border:"1px solid #e4e4e4",borderRadius:"4px",textAlign:"left",px:"0.5rem",minW:"10rem"},"appbar-menu":{h:"3rem",mx:"2px",fontSize:"1rem",fontWeight:"500",color:"black",px:"1.25rem",_before:{content:'""',pos:"absolute",w:"100%",h:"4px",bottom:0,display:"block",borderRadius:"2px",bgImage:"linear-gradient(92deg, #ef6829 5%, #f3a261 36%, #e8c46a 54%, #3699ae 83%)"}},toggle:{borderRadius:"6px",color:"#29879c",bg:"rgba(54, 153, 174, 0.1)",_hover:{color:"white",bg:"c-orange.200"},_selected:{color:"white",bg:"c-orange.200"}}},sizes:{xs:{borderRadius:"full",px:"0.875rem"},sm:{h:"1.875rem",borderRadius:"0.9375rem",px:"1rem",fontSize:"0.75rem"},md:{h:"2.25rem",borderRadius:"1.125rem",px:"1.25rem",fontSize:"1rem"},lg:{h:"2.5rem",borderRadius:"1.25rem",px:"1.75rem",fontSize:"1rem"},xl:{h:"3.125rem",borderRadius:"1.5625rem",px:"1.75rem",fontSize:"1.125rem"}}},Checkbox:{baseStyle:{control:{border:"1px solid #e4e4e4",borderRadius:"3px",_focus:{boxShadow:"none"}}},defaultProps:{colorScheme:"c-orange"}},FormLabel:{baseStyle:{color:"#3699ae",fontSize:"0.875rem",fontWeight:"700",lineHeight:"1",mb:"5px"},variants:{"fw-learners":{fontSize:"0.75rem",fontWeight:"500",color:"#61767b"}}},Input:{baseStyle:{},sizes:{lg:{field:{borderRadius:"0.25rem"}},md:{field:{borderRadius:"0.25rem"}}},variants:{outline:{field:{bg:"white",_focus:{boxShadow:"none"}}}}},Textarea:{baseStyle:{},sizes:{lg:{borderRadius:"0.25rem"},md:{borderRadius:"0.25rem"}},variants:{outline:{bg:"white",_focus:{boxShadow:"none"}}}},LearnerTab:e,Menu:{baseStyle:{list:{boxShadow:"md",border:"none",borderRadius:"0.5rem"}},variants:{"subject-addon":{button:{pos:"absolute",right:"1px",top:"0",bottom:"0",w:"5.25rem",bg:"#fafafa",color:"#c1c1c1",borderLeft:"solid 1px #e4e4e4",borderRightRadius:"0.25rem",_hover:{opacity:.7}}}}},Modal:{baseStyle:{dialog:{p:"0",borderRadius:"0.5rem",boxShadow:"0 4px 16px 4px rgba(0, 0, 0, 0.15)"},closeButton:{top:"20px",opacity:.45,_focus:{boxShadow:"none"},svg:{width:"1.125rem",height:"1.125rem"},_hover:{opacity:.8,bg:"transparent"}},header:{flex:"auto",display:"flex",alignItems:"center",h:"3.75rem",minH:"3.75rem",maxH:"3.75rem",color:"#313131",fontWeight:"700",fontSize:"1.125rem",px:"1.75rem",py:0,borderBottom:"solid 1px #e4e4e4"},body:{p:"1.75rem"},footer:{bg:"bg.500",px:"1.7rem",borderTop:"1px solid #e4e4e4",borderBottomRadius:"0.5rem"}},variants:{gradient:{dialog:{pos:"relative",pt:"6px",_before:{content:'""',pos:"absolute",top:0,h:"6px",w:"100%",borderTopRadius:"0.5rem",bgImage:"linear-gradient(91deg, #ef6829 5%, #f3a261 36%, #e8c46a 54%, #3699ae 83%)"}}}},defaultProps:{variant:"gradient"}},MultiProgressBar:{parts:["container","progress"],baseStyle:{container:{bg:"#f6f6f6",borderRadius:"0.25rem",pos:"relative"},progress:{pos:"absolute",display:"flex",alignItems:"center",left:"0",top:"0",bottom:"0",bg:"#f6f6f6",borderRadius:"0.25rem",color:"white",fontSize:"0.75rem",fontWeight:"500",textAlign:"right",width:"0%",transition:"width 0.25s ease-out"}},sizes:{lg:{container:{h:"2.5rem"}},md:{container:{h:"1.75rem"}},sm:{container:{h:"1rem"}}},defaultProps:{size:"md"}},NavLinks:{parts:["container","link"],baseStyle:{container:{},link:{pos:"relative",display:"flex",justifyContent:"center",alignItems:"center"}},variants:{appbar:{container:{display:"flex",h:"100%"},link:{h:"100%",mx:"2px",fontSize:"1rem",fontWeight:"500",color:"#999999",px:"1.25rem","> *":{opacity:.4},_before:{content:'""',pos:"absolute",w:"100%",h:"4px",bottom:0,display:"none",borderRadius:"2px",bgImage:"linear-gradient(92deg, #ef6829 5%, #f3a261 36%, #e8c46a 54%, #3699ae 83%)"},_hover:{color:"black","> *":{opacity:1}},"&.active":{color:"black",_before:{display:"block"},"> *":{opacity:1}}}},sidebar:{link:{justifyContent:"flex-start",pos:"relative",pl:"1.5rem",h:"3.75rem",color:"white",fontSize:"14px",fontWeight:"bold",whiteSpace:"nowrap",_before:{content:'""',pos:"absolute",display:"none",left:0,borderTopRightRadius:"5px",borderBottomRightRadius:"5px",bgImage:"linear-gradient(185deg, #f2dd7f, #ee682a)",h:"100%",w:"5px"},svg:{mr:"1rem"},"> *":{opacity:.55},_hover:{bg:"bg.900"},"&.active":{bg:"bg.900",_before:{display:"block"},"> *":{opacity:1}}}},inner:{container:{display:"flex",alignItems:"center",justifyContent:"center",borderTopRadius:"6px",p:"0.5rem"},link:{display:"flex",justifyContent:"center",alignItems:"center",boxSizing:"border-box",color:"#c1c1c1",lineHeight:"1.14",fontWeight:"bold",minW:"12.5rem",h:"2.75rem",border:"1px solid transparent",borderRadius:"6px",mx:"2px",svg:{mr:"0.5rem"},_hover:{color:"c-orange.200","svg g":{stroke:"c-orange.200"}},"&.active":{color:"c-orange.200",bg:"white",boxShadow:"2px 2px 2px 0 rgba(192, 192, 192, 0.25)",borderColor:"#dddddd","svg g":{stroke:"c-orange.200"}}}},"inner-sidebar":{container:{bg:"#f6f6f6"},link:{justifyContent:"flex-start",pos:"relative",pl:"1.35rem",h:"3.75rem",color:"rgba(0,0,0, 0.25)",fontSize:"14px",fontWeight:"bold",whiteSpace:"nowrap",borderBottom:"solid 1px #d3d3d3",svg:{mr:"0.5rem"},_hover:{color:"c-orange.200","svg g":{stroke:"c-orange.200"}},"&.active":{color:"c-orange.200",bg:"white","svg g":{stroke:"c-orange.200"}}}}}},PlannerBlock:{parts:["container","title","subject","progress","strip","statusBadge"],baseStyle:{container:{position:"relative",boxSizing:"border-box",borderRadius:"3px",h:"4.5rem",py:"6px",pl:"5px",bg:"white",transform:"translate(0, 0)",cursor:"pointer",border:"solid 1px #dddddd",boxShadow:"2px 2px 2px 0 rgba(192, 192, 192, 0.25)",_hover:{".pl-block-statusbridge":{opacity:0},".pl-actions":{opacity:1}}},placeholder:{boxSizing:"border-box",borderRadius:"3px",h:"4.5rem"},inner:{position:"relative",display:"flex",justifyContent:"space-between",flexDirection:"column",h:"100%",px:"0.75rem",py:"3px"},statusBadge:{pos:"absolute",top:"-9px",right:"0",opacity:1,h:"18px",px:"10px",fontSize:"9px",lineHeight:"18px",bg:"#48adf3",color:"white",borderRadius:"9px",textTransform:"uppercase",transition:"opacity 0.15s ease-out"},strip:{pos:"absolute",left:0,top:0,bottom:0,w:"6px",borderRadius:"3px"},title:{fontSize:"0.75rem",fontWeight:"500",lineHeight:1.33,color:"#313131"},subject:{lineHeight:1,fontSize:"0.875rem",fontWeight:"800",mr:"0.5rem"},progress:{w:"30%",display:"flex",alignItems:"center",justifyContent:"flex-end"},row:{display:"flex",justifyContent:"space-between",alignItems:"center"},actions:{position:"absolute",left:"-1px",right:"-1px",top:"-1px",bottom:"-1px",display:"flex",justifyContent:"space-between",alignItems:"center",borderRadius:"3px",px:"1.25rem",bg:"rgba(250, 100, 0, 0.95)",transition:"opacity 0.15s ease-out",opacity:0},actionsInner:{display:"flex",alignItems:"center"},delete:{background:"transparent",cursor:"pointer",padding:0,outline:0,path:{stroke:"white"}},duplicate:{ml:"1.25rem",background:"transparent",cursor:"pointer",padding:0,outline:0},review:{mr:"1.25rem",background:"transparent",cursor:"pointer",padding:0,outline:0},moveIcon:{path:{stroke:"white"}}}},PlannerBlocksSlot:{parts:["container","inner","footer","button"],baseStyle:{container:{px:"0.25rem",py:"0.5rem",bg:"#fafafa",_hover:{bg:"#f1f1f1","button[aria-label='icon-btn-add']":{visibility:"visible"}},_selected:{bg:"#f1f1f1"}},inner:{minH:"4.5rem"},footer:{display:"flex",justifyContent:"center",alignItems:"center"},button:{visibility:"hidden",background:"transparent",cursor:"pointer",padding:0,outline:0,_hover:{".path-circle":{fill:"c-orange.200"},".path-cross":{stroke:"c-orange.200"}}}},variants:{anytime:{container:{px:"0"},inner:{display:"flex",justifyContent:"flex-start",alignItems:"flex-start",flexWrap:"wrap","> *":{mx:"0.25rem",mb:"0.5rem",w:"".concat(r,"!important")}},footer:{py:"1.125rem"}},day:{container:{w:r,display:"flex",flexDirection:"column",borderLeft:"solid 1px #e4e4e4",_first:{borderLeft:"none"}},inner:{flexGrow:"1","> *":{mb:"0.5rem",_last:{mb:"0"}}},footer:{pt:"0.75rem",pb:"0.25rem"}},week:{container:{w:"calc(50% - 1.25rem)",mx:"0.625rem",px:"1.25rem",py:"1.25rem",display:"flex",flexDirection:"column",borderRadius:"0.5rem",border:"1px solid #e5e5e5"},inner:{flexGrow:"1","> *":{mb:"0.5rem",_last:{mb:"0"}}},footer:{pt:"2.5rem"}},sidebar:{container:{bg:"transparent",py:"0",px:"0.75rem",my:"0.75rem",flexGrow:1,overflowY:"auto",_hover:{bg:"transparent"},_selected:{bg:"rgb(223, 242, 244)"}},inner:{"> *":{mb:"0.5rem"}}}},defaultProps:{variant:"day"}},PlannerHeader:{parts:["container","item","title","subtitle"],baseStyle:{container:{display:"flex",justifyConteint:"space-between",pos:"relative",h:"3.75rem",bg:"white"},item:{position:"relative",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",fontWeight:"700",lineHeight:"1"},title:{color:"#313131",fontSize:"0.875rem",_selected:{color:"c-orange.500"}},subtitle:{color:"#3699ae",fontSize:"0.75rem",mt:"3px",_selected:{color:"c-orange.500"}}}},Popover:{parts:["popper","content","header","body","footer","arrow"],baseStyle:{content:{border:"none",_focus:{boxShadow:"md",outline:0}}},variants:{"avatar-select":{content:{px:"0",py:"0",minW:"20rem"},header:{color:"#313131",borderBottom:"0",fontWeight:"bold",fontSize:"1.25rem",lineHeight:"normal",px:"1.75rem",pt:"1.5rem"},body:{display:"grid",px:"1.75rem",mb:"0",pt:"1.5rem",pb:"3.125rem",gridTemplateColumns:"repeat(4, 1fr)",gridColumnGap:"0.75rem",gridRowGap:"1rem"}},"accounts-list":{content:{border:"none",_focus:{borderTopLeftRadius:"0",border:"none"}}}}},Progress:{variants:{block:{track:{borderRadius:"3px",bg:"#ececec"},trackFilled:{borderRadius:"3px"}}},sizes:{block:{track:{h:"6px"}}}},Radio:{baseStyle:{container:{cursor:"pointer"},control:{_focus:{boxShadow:"none"}}},sizes:{lg2:{control:{w:5,h:5},label:{fontSize:"0.875rem"}}},defaultProps:{colorScheme:"c-orange"}},ResourceCard:{parts:["container","header","ages","content","actions","image"],baseStyle:{container:{display:"inline-flex",flexDir:"column",justifyItems:"flex-start",verticalAlign:"top",h:"14.375rem",maxH:"14.375rem",minH:"14.375rem",w:"13.75rem",minW:"13.75rem",maxW:"13.75rem",bg:"white",boxShadow:"0 2px 8px 0 rgba(0, 0, 0, 0.1)",borderRadius:"0.875rem",whiteSpace:"normal"},header:{color:"#313131",lineHeight:"1.13",fontSize:"1rem",fontWeight:"500"},ages:{mt:"0.25rem",color:"#61767b",fontSize:"0.875rem",fontWeight:"500"},content:{px:"1.25rem",flexGrow:1,py:"0.75rem",h:"4.75rem",cursor:"pointer"},actions:{h:"3rem",display:"flex",justifyContent:"space-between",alignItems:"center",px:"1.125rem",boxSizing:"border-box",borderTop:"1px solid #ececec"},image:{width:"100%",objectFit:"cover",bg:"transparent",height:"6.5rem",cursor:"pointer",borderTopLeftRadius:"0.875rem",borderTopRightRadius:"0.875rem",border:"none"}},defaultProps:{variant:"card"},variants:{"card-tall":{container:{h:"18.125rem",maxH:"18.125rem",minH:"18.125rem"}},modal:{}}},Select:{sizes:{lg:{field:{borderRadius:"0.25rem"}},md:{field:{borderRadius:"0.25rem"}}},variants:{outline:{field:{bg:"white",pl:"0.75rem",_focus:{boxShadow:"none"}}}}},Tag:{baseStyle:{label:{fontWeight:"500"},closeButton:{_active:{bg:"transparent",boxShadow:"none"}}},variants:{outline:{container:{boxShadow:"inset 0 0 0px 1px #3699ae;",color:"#3699ae"}},resource:{container:{bg:"#cfe6eb",color:"#7fb7c4",_hover:{bg:"#86c2ce",color:"white"}}}},sizes:{md:{container:{minH:"1.75rem",minW:"1.75rem",px:"0.625rem",fontSize:"0.75rem",borderRadius:"3px"}},lg:{container:{minH:"2rem",minW:"2rem",px:"0.625rem",fontSize:"0.75rem",borderRadius:"3px"}}},defaultProps:{size:"md",variant:"resource"}},WeekdayButton:{baseStyle:{boxSizing:"border-box",bg:"white",color:"#313131",fontWeight:"bold",textAlign:"center",_hover:{bg:"c-orange.600",color:"white"},_selected:{bg:"c-orange.200",color:"white"}},variants:{outline:{border:"1px solid #e4e4e4"}},sizes:{md:{h:"2.5rem",w:"2.5rem",minH:"2.5rem",minW:"2.5rem",borderRadius:"2.5rem",lineHeight:"2.5rem",fontSize:"1rem"},lg:{h:"2.8125rem",w:"2.8125rem",minH:"2.8125rem",minW:"2.8125rem",borderRadius:"2.8125rem",lineHeight:"2.8125rem",fontSize:"1rem"}},defaultProps:{variant:"default",size:"md"}}},fonts:{body:"'FilsonSoft', sans-serif",heading:"'FilsonSoft', sans-serif"},shadows:{sm:"2px 2px 3px rgba(53, 65, 68, 0.15)",md:"0 4px 16px 4px rgba(0, 0, 0, 0.2)"},colors:{bg:{100:"#F5FAFB",200:"#FAFAFA",300:"#F1F1F1",400:"#DFF2F4",500:"#f6f6f6",800:"#29879C",900:"#177084"},"c-orange":{200:"#ee682a",500:"#ef6829",600:"#f38754"},brand:{900:"#1a365d",800:"#153e75",700:"#2a69ac"},progress:{200:"#52de63",500:"#52de63"},green1:{100:"#27a02e",200:"#27a02e",300:"#27a02e",400:"#27a02e",500:"#27a02e",600:"#27a02e",700:"#27a02e",800:"#27a02e",900:"#27a02e"}}};exports.appTheme=o,exports.colors=["#11C7B6","#067ABF","#FF6753","#B059CC","#FA9715","#276749"],exports.randomColorFromList=function(e,r){var o=0;if(!(null==e?void 0:e.length))return r[0];for(var t=0;t<e.length;t++)o=e.charCodeAt(t)+((o<<5)-o),o&=o;return r[o=(o%r.length+r.length)%r.length]},exports.subjectColors=["#00B99B","#F59C49","#FC5B6E","#B1182C","#8CC983","#267960","#DBCE2B","#9585DD","#9D3FA9","#74ADD0","#4575B4","#053061"];
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const AutocompleteTags = {
parts: ["input", "container", "suggestions", "suggestion"],
baseStyle: {
container: {
bg: "white",
boxSizing: "border-box",
borderRadius: "0.25rem",
pos: "relative",
px: "0.5rem",
pb: "0.25rem",
border: "1px solid #e4e4e4",
_focus: {
borderColor: "rgb(49, 130, 206)"
}
},
leftAddon: {
position: "relative",
display: "inline-block",
pr: "0.5rem",
pl: "0.25rem",
"> *": {
display: "inline-block",
verticalAlign: "center"
}
},
tags: {
display: "inline",
"> *": {
mt: "0.25rem",
mr: "0.25rem"
}
},
inner: {
position: "relative",
display: "inline-block"
},
input: {
pl: "2px",
boxSizing: "content-box",
outline: 0,
_focus: {
border: "none",
boxShadow: "none"
}
},
suggestions: {
top: "calc(100% + 0.7rem)",
pos: "absolute",
left: "0",
bg: "white",
py: "0.2rem",
boxShadow: "sm"
},
suggestion: {
fontSize: "md",
px: "0.75rem",
py: "0.3rem",
cursor: "pointer",
_hover: {
bg: "gray.200"
},
mark: {
backgroundColor: "transparent",
fontWeight: "600"
},
_selected: {
bg: "gray.200"
}
}
},
variants: {
"single-line": {
tags: {}
}
},
sizes: {
lg: {
input: {
lineHeight: "2rem"
},
leftAddon: {
h: "2rem",
lineHeight: "2rem"
}
},
md: {
input: {
lineHeight: "1.75rem"
},
leftAddon: {
h: "1.75rem",
lineHeight: "1.75rem",
minW: "1.75rem"
}
}
},
defaultProps: {
variant: "resource",
size: "md"
}
};
const Avatar = {
baseStyle: {
container: {
color: "white",
cursor: "pointer",
fontWeight: "500",
borderColor: "transparent"
}
},
sizes: {
xs: {
container: {
width: "1.5rem",
height: "1.5rem"
},
excessLabel: {
width: "1.5rem",
height: "1.5rem"
},
label: {
fontSize: "0.875rem"
}
},
sm: {
container: {
width: "2rem",
height: "2rem"
},
excessLabel: {
width: "2rem",
height: "2rem"
},
label: {
fontSize: "1rem"
}
},
md: {
container: {
width: "2.25rem",
height: "2.25rem"
},
excessLabel: {
width: "2.25rem",
height: "2.25rem"
},
label: {
fontSize: "1rem"
}
},
lg: {
container: {
width: "2.5rem",
height: "2.5rem"
},
excessLabel: {
width: "2.5rem",
height: "2.5rem"
},
label: {
fontSize: "1.25rem"
}
},
xl: {
container: {
width: "3.125rem",
height: "3.125rem"
},
excessLabel: {
width: "3.125rem",
height: "3.125rem"
},
label: {
fontSize: "1.25rem"
}
}
},
defaultProps: {
size: "sm"
}
};
const Button = {
baseStyle: {
fontWeight: "700",
_focus: {
boxShadow: "none"
}
},
variants: {
outline: {
borderWidth: "3px"
},
"dropdown-menu": {
bg: "white",
color: "#354144",
fontWeight: 500,
border: "1px solid #e4e4e4",
borderRadius: "4px",
textAlign: "left",
px: "0.5rem",
minW: "10rem"
},
"appbar-menu": {
h: "3rem",
mx: "2px",
fontSize: "1rem",
fontWeight: "500",
color: "black",
px: "1.25rem",
_before: {
content: '""',
pos: "absolute",
w: "100%",
h: "4px",
bottom: 0,
display: "block",
borderRadius: "2px",
bgImage: "linear-gradient(92deg, #ef6829 5%, #f3a261 36%, #e8c46a 54%, #3699ae 83%)"
}
},
toggle: {
borderRadius: "6px",
color: "#29879c",
bg: "rgba(54, 153, 174, 0.1)",
_hover: {
color: "white",
bg: "c-orange.200"
},
_selected: {
color: "white",
bg: "c-orange.200"
}
}
},
sizes: {
xs: {
borderRadius: "full",
px: "0.875rem"
},
sm: {
h: "1.875rem",
borderRadius: "0.9375rem",
px: "1rem",
fontSize: "0.75rem"
},
md: {
h: "2.25rem",
borderRadius: "1.125rem",
px: "1.25rem",
fontSize: "1rem"
},
lg: {
h: "2.5rem",
borderRadius: "1.25rem",
px: "1.75rem",
fontSize: "1rem"
},
xl: {
h: "3.125rem",
borderRadius: "1.5625rem",
px: "1.75rem",
fontSize: "1.125rem"
}
}
};
const Checkbox = {
baseStyle: {
control: {
border: "1px solid #e4e4e4",
borderRadius: "3px",
_focus: {
boxShadow: "none"
}
}
},
defaultProps: {
colorScheme: "c-orange"
}
};
const FormLabel = {
baseStyle: {
color: "#3699ae",
fontSize: "0.875rem",
fontWeight: "700",
lineHeight: "1",
mb: "5px"
},
variants: {
"fw-learners": {
fontSize: "0.75rem",
fontWeight: "500",
color: "#61767b"
}
}
};
const Input = {
baseStyle: {},
sizes: {
lg: {
field: {
borderRadius: "0.25rem"
}
},
md: {
field: {
borderRadius: "0.25rem"
}
}
},
variants: {
outline: {
field: {
bg: "white",
_focus: { boxShadow: "none" }
}
}
}
};
const Textarea = {
baseStyle: {},
sizes: {
lg: {
borderRadius: "0.25rem"
},
md: {
borderRadius: "0.25rem"
}
},
variants: {
outline: {
bg: "white",
_focus: { boxShadow: "none" }
}
}
};
const LearnerTab = {
parts: ["container", "avatar", "label"],
baseStyle: {
container: {
display: "flex",
alignItems: "center",
cursor: "pointer",
pl: "4px",
pr: "1rem",
mr: "0.5rem",
boxSizing: "content-box",
border: "1px solid transparent",
bg: "white",
color: "#313131",
_selected: {
bg: "#ee682a",
color: "white"
},
_hover: {
bg: "#ee682a",
color: "white"
}
},
label: {
color: void 0
}
},
sizes: {
md: {
container: {
h: "2.75rem",
borderRadius: "1.375rem"
}
}
},
variants: {
outline: {
container: {
borderColor: "#e4e4e4"
}
},
"outline-truncated": {
container: {
borderColor: "#e4e4e4"
},
label: {
isTruncated: true
}
}
}
};
const Menu = {
baseStyle: {
list: {
boxShadow: "md",
border: "none",
borderRadius: "0.5rem"
}
},
variants: {
"subject-addon": {
button: {
pos: "absolute",
right: "1px",
top: "0",
bottom: "0",
w: "5.25rem",
bg: "#fafafa",
color: "#c1c1c1",
borderLeft: "solid 1px #e4e4e4",
borderRightRadius: "0.25rem",
_hover: { opacity: 0.7 }
}
}
}
};
const Modal = {
baseStyle: {
dialog: {
p: "0",
borderRadius: "0.5rem",
boxShadow: "0 4px 16px 4px rgba(0, 0, 0, 0.15)"
},
closeButton: {
top: "20px",
opacity: 0.45,
_focus: {
boxShadow: "none"
},
svg: {
width: "1.125rem",
height: "1.125rem"
},
_hover: {
opacity: 0.8,
bg: "transparent"
}
},
header: {
flex: "auto",
display: "flex",
alignItems: "center",
h: "3.75rem",
minH: "3.75rem",
maxH: "3.75rem",
color: "#313131",
fontWeight: "700",
fontSize: "1.125rem",
px: "1.75rem",
py: 0,
borderBottom: "solid 1px #e4e4e4"
},
body: {
p: "1.75rem"
},
footer: {
bg: "bg.500",
px: "1.7rem",
borderTop: "1px solid #e4e4e4",
borderBottomRadius: "0.5rem"
}
},
variants: {
gradient: {
dialog: {
pos: "relative",
pt: "6px",
_before: {
content: '""',
pos: "absolute",
top: 0,
h: "6px",
w: "100%",
borderTopRadius: "0.5rem",
bgImage: "linear-gradient(91deg, #ef6829 5%, #f3a261 36%, #e8c46a 54%, #3699ae 83%)"
}
}
}
},
defaultProps: {
variant: "gradient"
}
};
const MultiProgressBar = {
parts: ["container", "progress"],
baseStyle: {
container: {
bg: "#f6f6f6",
borderRadius: "0.25rem",
pos: "relative"
},
progress: {
pos: "absolute",
display: "flex",
alignItems: "center",
left: "0",
top: "0",
bottom: "0",
bg: "#f6f6f6",
borderRadius: "0.25rem",
color: "white",
fontSize: "0.75rem",
fontWeight: "500",
textAlign: "right",
width: "0%",
transition: "width 0.25s ease-out"
}
},
sizes: {
lg: {
container: {
h: "2.5rem"
}
},
md: {
container: {
h: "1.75rem"
}
},
sm: {
container: {
h: "1rem"
}
}
},
defaultProps: {
size: "md"
}
};
const NavLinks = {
parts: ["container", "link"],
baseStyle: {
container: {},
link: {
pos: "relative",
display: "flex",
justifyContent: "center",
alignItems: "center"
}
},
variants: {
appbar: {
container: {
display: "flex",
h: "100%"
},
link: {
h: "100%",
mx: "2px",
fontSize: "1rem",
fontWeight: "500",
color: "#999999",
px: "1.25rem",
"> *": {
opacity: 0.4
},
_before: {
content: '""',
pos: "absolute",
w: "100%",
h: "4px",
bottom: 0,
display: "none",
borderRadius: "2px",
bgImage: "linear-gradient(92deg, #ef6829 5%, #f3a261 36%, #e8c46a 54%, #3699ae 83%)"
},
_hover: {
color: "black",
"> *": {
opacity: 1
}
},
"&.active": {
color: "black",
_before: {
display: "block"
},
"> *": {
opacity: 1
}
}
}
},
sidebar: {
link: {
justifyContent: "flex-start",
pos: "relative",
pl: "1.5rem",
h: "3.75rem",
color: "white",
fontSize: "14px",
fontWeight: "bold",
whiteSpace: "nowrap",
_before: {
content: '""',
pos: "absolute",
display: "none",
left: 0,
borderTopRightRadius: "5px",
borderBottomRightRadius: "5px",
bgImage: "linear-gradient(185deg, #f2dd7f, #ee682a)",
h: "100%",
w: "5px"
},
svg: {
mr: "1rem"
},
"> *": {
opacity: 0.55
},
_hover: {
bg: "bg.900"
},
"&.active": {
bg: "bg.900",
_before: {
display: "block"
},
"> *": {
opacity: 1
}
}
}
},
inner: {
container: {
display: "flex",
alignItems: "center",
justifyContent: "center",
borderTopRadius: "6px",
p: "0.5rem"
},
link: {
display: "flex",
justifyContent: "center",
alignItems: "center",
boxSizing: "border-box",
color: "#c1c1c1",
lineHeight: "1.14",
fontWeight: "bold",
minW: "12.5rem",
h: "2.75rem",
border: "1px solid transparent",
borderRadius: "6px",
mx: "2px",
svg: {
mr: "0.5rem"
},
_hover: {
color: "c-orange.200",
"svg g": {
stroke: "c-orange.200"
}
},
"&.active": {
color: "c-orange.200",
bg: "white",
boxShadow: "2px 2px 2px 0 rgba(192, 192, 192, 0.25)",
borderColor: "#dddddd",
"svg g": {
stroke: "c-orange.200"
}
}
}
},
"inner-sidebar": {
container: {
bg: "#f6f6f6"
},
link: {
justifyContent: "flex-start",
pos: "relative",
pl: "1.35rem",
h: "3.75rem",
color: "rgba(0,0,0, 0.25)",
fontSize: "14px",
fontWeight: "bold",
whiteSpace: "nowrap",
borderBottom: "solid 1px #d3d3d3",
svg: {
mr: "0.5rem"
},
_hover: {
color: "c-orange.200",
"svg g": {
stroke: "c-orange.200"
}
},
"&.active": {
color: "c-orange.200",
bg: "white",
"svg g": {
stroke: "c-orange.200"
}
}
}
}
}
};
const PlannerBlock = {
parts: ["container", "title", "subject", "progress", "strip", "statusBadge"],
baseStyle: {
container: {
position: "relative",
boxSizing: "border-box",
borderRadius: "3px",
h: "4.5rem",
py: "6px",
pl: "5px",
bg: "white",
transform: "translate(0, 0)",
cursor: "pointer",
border: "solid 1px #dddddd",
boxShadow: "2px 2px 2px 0 rgba(192, 192, 192, 0.25)",
_hover: {
".pl-block-statusbridge": {
opacity: 0
},
".pl-actions": {
opacity: 1
}
}
},
placeholder: {
boxSizing: "border-box",
borderRadius: "3px",
h: "4.5rem"
},
inner: {
position: "relative",
display: "flex",
justifyContent: "space-between",
flexDirection: "column",
h: "100%",
px: "0.75rem",
py: "3px"
},
statusBadge: {
pos: "absolute",
top: "-9px",
right: "0",
opacity: 1,
h: "18px",
px: "10px",
fontSize: "9px",
lineHeight: "18px",
bg: "#48adf3",
color: "white",
borderRadius: "9px",
textTransform: "uppercase",
transition: "opacity 0.15s ease-out"
},
strip: {
pos: "absolute",
left: 0,
top: 0,
bottom: 0,
w: "6px",
borderRadius: "3px"
},
title: {
fontSize: "0.75rem",
fontWeight: "500",
lineHeight: 1.33,
color: "#313131"
},
subject: {
lineHeight: 1,
fontSize: "0.875rem",
fontWeight: "800",
mr: "0.5rem"
},
progress: {
w: "30%",
display: "flex",
alignItems: "center",
justifyContent: "flex-end"
},
row: {
display: "flex",
justifyContent: "space-between",
alignItems: "center"
},
actions: {
position: "absolute",
left: "-1px",
right: "-1px",
top: "-1px",
bottom: "-1px",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
borderRadius: "3px",
px: "1.25rem",
bg: "rgba(250, 100, 0, 0.95)",
transition: "opacity 0.15s ease-out",
opacity: 0
},
actionsInner: {
display: "flex",
alignItems: "center"
},
delete: {
background: "transparent",
cursor: "pointer",
padding: 0,
outline: 0,
path: {
stroke: "white"
}
},
duplicate: {
ml: "1.25rem",
background: "transparent",
cursor: "pointer",
padding: 0,
outline: 0
},
review: {
mr: "1.25rem",
background: "transparent",
cursor: "pointer",
padding: 0,
outline: 0
},
moveIcon: {
path: {
stroke: "white"
}
}
}
};
const colW = `${100 / 5}%`;
const PlannerBlocksSlot = {
parts: ["container", "inner", "footer", "button"],
baseStyle: {
container: {
px: "0.25rem",
py: "0.5rem",
bg: "#fafafa",
_hover: {
bg: "#f1f1f1",
"button[aria-label='icon-btn-add']": {
visibility: "visible"
}
},
_selected: {
bg: "#f1f1f1"
}
},
inner: {
minH: "4.5rem"
},
footer: {
display: "flex",
justifyContent: "center",
alignItems: "center"
},
button: {
visibility: "hidden",
background: "transparent",
cursor: "pointer",
padding: 0,
outline: 0,
_hover: {
".path-circle": {
fill: "c-orange.200"
},
".path-cross": {
stroke: "c-orange.200"
}
}
}
},
variants: {
anytime: {
container: {
px: "0"
},
inner: {
display: "flex",
justifyContent: "flex-start",
alignItems: "flex-start",
flexWrap: "wrap",
"> *": {
mx: "0.25rem",
mb: "0.5rem",
w: `${colW}!important`
}
},
footer: {
py: "1.125rem"
}
},
day: {
container: {
w: colW,
display: "flex",
flexDirection: "column",
borderLeft: "solid 1px #e4e4e4",
_first: { borderLeft: "none" }
},
inner: {
flexGrow: "1",
"> *": {
mb: "0.5rem",
_last: { mb: "0" }
}
},
footer: {
pt: "0.75rem",
pb: "0.25rem"
}
},
week: {
container: {
w: "calc(50% - 1.25rem)",
mx: "0.625rem",
px: "1.25rem",
py: "1.25rem",
display: "flex",
flexDirection: "column",
borderRadius: "0.5rem",
border: "1px solid #e5e5e5"
},
inner: {
flexGrow: "1",
"> *": {
mb: "0.5rem",
_last: { mb: "0" }
}
},
footer: {
pt: "2.5rem"
}
},
sidebar: {
container: {
bg: "transparent",
py: "0",
px: "0.75rem",
my: "0.75rem",
flexGrow: 1,
overflowY: "auto",
_hover: {
bg: "transparent"
},
_selected: {
bg: "rgb(223, 242, 244)"
}
},
inner: {
"> *": {
mb: "0.5rem"
}
}
}
},
defaultProps: {
variant: "day"
}
};
const PlannerHeader = {
parts: ["container", "item", "title", "subtitle"],
baseStyle: {
container: {
display: "flex",
justifyConteint: "space-between",
pos: "relative",
h: "3.75rem",
bg: "white"
},
item: {
position: "relative",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
fontWeight: "700",
lineHeight: "1"
},
title: {
color: "#313131",
fontSize: "0.875rem",
_selected: {
color: "c-orange.500"
}
},
subtitle: {
color: "#3699ae",
fontSize: "0.75rem",
mt: "3px",
_selected: {
color: "c-orange.500"
}
}
}
};
const Popover = {
parts: ["popper", "content", "header", "body", "footer", "arrow"],
baseStyle: {
content: {
border: "none",
_focus: {
boxShadow: "md",
outline: 0
}
}
},
variants: {
"avatar-select": {
content: {
px: "0",
py: "0",
minW: "20rem"
},
header: {
color: "#313131",
borderBottom: "0",
fontWeight: "bold",
fontSize: "1.25rem",
lineHeight: "normal",
px: "1.75rem",
pt: "1.5rem"
},
body: {
display: "grid",
px: "1.75rem",
mb: "0",
pt: "1.5rem",
pb: "3.125rem",
gridTemplateColumns: "repeat(4, 1fr)",
gridColumnGap: "0.75rem",
gridRowGap: "1rem"
}
},
"accounts-list": {
content: {
border: "none",
_focus: {
borderTopLeftRadius: "0",
border: "none"
}
}
}
}
};
const Progress = {
variants: {
block: {
track: {
borderRadius: "3px",
bg: "#ececec"
},
trackFilled: {
borderRadius: "3px"
}
}
},
sizes: {
block: {
track: {
h: "6px"
}
}
}
};
const Radio = {
baseStyle: {
container: {
cursor: "pointer"
},
control: {
_focus: {
boxShadow: "none"
}
}
},
sizes: {
lg2: {
control: { w: 5, h: 5 },
label: { fontSize: "0.875rem" }
}
},
defaultProps: {
colorScheme: "c-orange"
}
};
const ResourceCard = {
parts: ["container", "header", "ages", "content", "actions", "image"],
baseStyle: {
container: {
display: "inline-flex",
flexDir: "column",
justifyItems: "flex-start",
verticalAlign: "top",
h: "14.375rem",
maxH: "14.375rem",
minH: "14.375rem",
w: "13.75rem",
minW: "13.75rem",
maxW: "13.75rem",
bg: "white",
boxShadow: "0 2px 8px 0 rgba(0, 0, 0, 0.1)",
borderRadius: "0.875rem",
whiteSpace: "normal"
},
header: {
color: "#313131",
lineHeight: "1.13",
fontSize: "1rem",
fontWeight: "500"
},
ages: {
mt: "0.25rem",
color: "#61767b",
fontSize: "0.875rem",
fontWeight: "500"
},
content: {
px: "1.25rem",
flexGrow: 1,
py: "0.75rem",
h: "4.75rem",
cursor: "pointer"
},
actions: {
h: "3rem",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
px: "1.125rem",
boxSizing: "border-box",
borderTop: "1px solid #ececec"
},
image: {
width: "100%",
objectFit: "cover",
bg: "transparent",
height: "6.5rem",
cursor: "pointer",
borderTopLeftRadius: "0.875rem",
borderTopRightRadius: "0.875rem",
border: "none"
}
},
defaultProps: {
variant: "card"
},
variants: {
"card-tall": {
container: {
h: "18.125rem",
maxH: "18.125rem",
minH: "18.125rem"
}
},
modal: {}
}
};
const Select = {
sizes: {
lg: {
field: {
borderRadius: "0.25rem"
}
},
md: {
field: {
borderRadius: "0.25rem"
}
}
},
variants: {
outline: {
field: {
bg: "white",
pl: "0.75rem",
_focus: { boxShadow: "none" }
}
}
}
};
const Tag = {
baseStyle: {
label: {
fontWeight: "500"
},
closeButton: {
_active: {
bg: "transparent",
boxShadow: "none"
}
}
},
variants: {
outline: {
container: {
boxShadow: "inset 0 0 0px 1px #3699ae;",
color: "#3699ae"
}
},
resource: {
container: {
bg: "#cfe6eb",
color: "#7fb7c4",
_hover: {
bg: "#86c2ce",
color: "white"
}
}
}
},
sizes: {
md: {
container: {
minH: "1.75rem",
minW: "1.75rem",
px: "0.625rem",
fontSize: "0.75rem",
borderRadius: "3px"
}
},
lg: {
container: {
minH: "2rem",
minW: "2rem",
px: "0.625rem",
fontSize: "0.75rem",
borderRadius: "3px"
}
}
},
defaultProps: {
size: "md",
variant: "resource"
}
};
const WeekdayButton = {
baseStyle: {
boxSizing: "border-box",
bg: "white",
color: "#313131",
fontWeight: "bold",
textAlign: "center",
_hover: {
bg: "c-orange.600",
color: "white"
},
_selected: {
bg: "c-orange.200",
color: "white"
}
},
variants: {
outline: {
border: "1px solid #e4e4e4"
}
},
sizes: {
md: {
h: "2.5rem",
w: "2.5rem",
minH: "2.5rem",
minW: "2.5rem",
borderRadius: "2.5rem",
lineHeight: "2.5rem",
fontSize: "1rem"
},
lg: {
h: "2.8125rem",
w: "2.8125rem",
minH: "2.8125rem",
minW: "2.8125rem",
borderRadius: "2.8125rem",
lineHeight: "2.8125rem",
fontSize: "1rem"
}
},
defaultProps: {
variant: "default",
size: "md"
}
};
const controls = {
AutocompleteTags,
Avatar,
Button,
Checkbox,
FormLabel,
Input,
Textarea,
LearnerTab,
Menu,
Modal,
MultiProgressBar,
NavLinks,
PlannerBlock,
PlannerBlocksSlot,
PlannerHeader,
Popover,
Progress,
Radio,
ResourceCard,
Select,
Tag,
WeekdayButton
};
const colors = [
"#11C7B6",
"#067ABF",
"#FF6753",
"#B059CC",
"#FA9715",
"#276749"
];
const subjectColors = [
"#00B99B",
"#F59C49",
"#FC5B6E",
"#B1182C",
"#8CC983",
"#267960",
"#DBCE2B",
"#9585DD",
"#9D3FA9",
"#74ADD0",
"#4575B4",
"#053061"
];
function randomColorFromList(str, list) {
let index = 0;
if (!(str == null ? void 0 : str.length)) {
return list[0];
}
for (let i = 0; i < str.length; i++) {
index = str.charCodeAt(i) + ((index << 5) - index);
index = index & index;
}
index = (index % list.length + list.length) % list.length;
return list[index];
}
const appTheme = {
components: controls,
fonts: {
body: "'FilsonSoft', sans-serif",
heading: "'FilsonSoft', sans-serif"
},
shadows: {
sm: "2px 2px 3px rgba(53, 65, 68, 0.15)",
md: "0 4px 16px 4px rgba(0, 0, 0, 0.2)"
},
colors: {
bg: {
100: "#F5FAFB",
200: "#FAFAFA",
300: "#F1F1F1",
400: "#DFF2F4",
500: "#f6f6f6",
800: "#29879C",
900: "#177084"
},
"c-orange": {
200: "#ee682a",
500: "#ef6829",
600: "#f38754"
},
brand: {
900: "#1a365d",
800: "#153e75",
700: "#2a69ac"
},
progress: {
200: "#52de63",
500: "#52de63"
},
green1: {
100: "#27a02e",
200: "#27a02e",
300: "#27a02e",
400: "#27a02e",
500: "#27a02e",
600: "#27a02e",
700: "#27a02e",
800: "#27a02e",
900: "#27a02e"
}
}
};
exports.appTheme = appTheme;
exports.colors = colors;
exports.randomColorFromList = randomColorFromList;
exports.subjectColors = subjectColors;
//# sourceMappingURL=index.cjs.js.map

1411

dist/index.esm.js

@@ -1,2 +0,1411 @@

var e={parts:["container","avatar","label"],baseStyle:{container:{display:"flex",alignItems:"center",cursor:"pointer",pl:"4px",pr:"1rem",mr:"0.5rem",boxSizing:"content-box",border:"1px solid transparent",bg:"white",color:"#313131",_selected:{bg:"#ee682a",color:"white"},_hover:{bg:"#ee682a",color:"white"}},label:{color:void 0}},sizes:{md:{container:{h:"2.75rem",borderRadius:"1.375rem"}}},variants:{outline:{container:{borderColor:"#e4e4e4"}},"outline-truncated":{container:{borderColor:"#e4e4e4"},label:{isTruncated:!0}}}},r="".concat(20,"%"),o=["#11C7B6","#067ABF","#FF6753","#B059CC","#FA9715","#276749"],t=["#00B99B","#F59C49","#FC5B6E","#B1182C","#8CC983","#267960","#DBCE2B","#9585DD","#9D3FA9","#74ADD0","#4575B4","#053061"];function i(e,r){var o=0;if(!(null==e?void 0:e.length))return r[0];for(var t=0;t<e.length;t++)o=e.charCodeAt(t)+((o<<5)-o),o&=o;return r[o=(o%r.length+r.length)%r.length]}var n={components:{AutocompleteTags:{parts:["input","container","suggestions","suggestion"],baseStyle:{container:{bg:"white",boxSizing:"border-box",borderRadius:"0.25rem",pos:"relative",px:"0.5rem",pb:"0.25rem",border:"1px solid #e4e4e4",_focus:{borderColor:"rgb(49, 130, 206)"}},leftAddon:{position:"relative",display:"inline-block",pr:"0.5rem",pl:"0.25rem","> *":{display:"inline-block",verticalAlign:"center"}},tags:{display:"inline","> *":{mt:"0.25rem",mr:"0.25rem"}},inner:{position:"relative",display:"inline-block"},input:{pl:"2px",boxSizing:"content-box",outline:0,_focus:{border:"none",boxShadow:"none"}},suggestions:{top:"calc(100% + 0.7rem)",pos:"absolute",left:"0",bg:"white",py:"0.2rem",boxShadow:"sm"},suggestion:{fontSize:"md",px:"0.75rem",py:"0.3rem",cursor:"pointer",_hover:{bg:"gray.200"},mark:{backgroundColor:"transparent",fontWeight:"600"},_selected:{bg:"gray.200"}}},variants:{"single-line":{tags:{}}},sizes:{lg:{input:{lineHeight:"2rem"},leftAddon:{h:"2rem",lineHeight:"2rem"}},md:{input:{lineHeight:"1.75rem"},leftAddon:{h:"1.75rem",lineHeight:"1.75rem",minW:"1.75rem"}}},defaultProps:{variant:"resource",size:"md"}},Avatar:{baseStyle:{container:{color:"white",cursor:"pointer",fontWeight:"500",borderColor:"transparent"}},sizes:{xs:{container:{width:"1.5rem",height:"1.5rem"},excessLabel:{width:"1.5rem",height:"1.5rem"},label:{fontSize:"0.875rem"}},sm:{container:{width:"2rem",height:"2rem"},excessLabel:{width:"2rem",height:"2rem"},label:{fontSize:"1rem"}},md:{container:{width:"2.25rem",height:"2.25rem"},excessLabel:{width:"2.25rem",height:"2.25rem"},label:{fontSize:"1rem"}},lg:{container:{width:"2.5rem",height:"2.5rem"},excessLabel:{width:"2.5rem",height:"2.5rem"},label:{fontSize:"1.25rem"}},xl:{container:{width:"3.125rem",height:"3.125rem"},excessLabel:{width:"3.125rem",height:"3.125rem"},label:{fontSize:"1.25rem"}}},defaultProps:{size:"sm"}},Button:{baseStyle:{fontWeight:"700",_focus:{boxShadow:"none"}},variants:{outline:{borderWidth:"3px"},"dropdown-menu":{bg:"white",color:"#354144",fontWeight:500,border:"1px solid #e4e4e4",borderRadius:"4px",textAlign:"left",px:"0.5rem",minW:"10rem"},"appbar-menu":{h:"3rem",mx:"2px",fontSize:"1rem",fontWeight:"500",color:"black",px:"1.25rem",_before:{content:'""',pos:"absolute",w:"100%",h:"4px",bottom:0,display:"block",borderRadius:"2px",bgImage:"linear-gradient(92deg, #ef6829 5%, #f3a261 36%, #e8c46a 54%, #3699ae 83%)"}},toggle:{borderRadius:"6px",color:"#29879c",bg:"rgba(54, 153, 174, 0.1)",_hover:{color:"white",bg:"c-orange.200"},_selected:{color:"white",bg:"c-orange.200"}}},sizes:{xs:{borderRadius:"full",px:"0.875rem"},sm:{h:"1.875rem",borderRadius:"0.9375rem",px:"1rem",fontSize:"0.75rem"},md:{h:"2.25rem",borderRadius:"1.125rem",px:"1.25rem",fontSize:"1rem"},lg:{h:"2.5rem",borderRadius:"1.25rem",px:"1.75rem",fontSize:"1rem"},xl:{h:"3.125rem",borderRadius:"1.5625rem",px:"1.75rem",fontSize:"1.125rem"}}},Checkbox:{baseStyle:{control:{border:"1px solid #e4e4e4",borderRadius:"3px",_focus:{boxShadow:"none"}}},defaultProps:{colorScheme:"c-orange"}},FormLabel:{baseStyle:{color:"#3699ae",fontSize:"0.875rem",fontWeight:"700",lineHeight:"1",mb:"5px"},variants:{"fw-learners":{fontSize:"0.75rem",fontWeight:"500",color:"#61767b"}}},Input:{baseStyle:{},sizes:{lg:{field:{borderRadius:"0.25rem"}},md:{field:{borderRadius:"0.25rem"}}},variants:{outline:{field:{bg:"white",_focus:{boxShadow:"none"}}}}},Textarea:{baseStyle:{},sizes:{lg:{borderRadius:"0.25rem"},md:{borderRadius:"0.25rem"}},variants:{outline:{bg:"white",_focus:{boxShadow:"none"}}}},LearnerTab:e,Menu:{baseStyle:{list:{boxShadow:"md",border:"none",borderRadius:"0.5rem"}},variants:{"subject-addon":{button:{pos:"absolute",right:"1px",top:"0",bottom:"0",w:"5.25rem",bg:"#fafafa",color:"#c1c1c1",borderLeft:"solid 1px #e4e4e4",borderRightRadius:"0.25rem",_hover:{opacity:.7}}}}},Modal:{baseStyle:{dialog:{p:"0",borderRadius:"0.5rem",boxShadow:"0 4px 16px 4px rgba(0, 0, 0, 0.15)"},closeButton:{top:"20px",opacity:.45,_focus:{boxShadow:"none"},svg:{width:"1.125rem",height:"1.125rem"},_hover:{opacity:.8,bg:"transparent"}},header:{flex:"auto",display:"flex",alignItems:"center",h:"3.75rem",minH:"3.75rem",maxH:"3.75rem",color:"#313131",fontWeight:"700",fontSize:"1.125rem",px:"1.75rem",py:0,borderBottom:"solid 1px #e4e4e4"},body:{p:"1.75rem"},footer:{bg:"bg.500",px:"1.7rem",borderTop:"1px solid #e4e4e4",borderBottomRadius:"0.5rem"}},variants:{gradient:{dialog:{pos:"relative",pt:"6px",_before:{content:'""',pos:"absolute",top:0,h:"6px",w:"100%",borderTopRadius:"0.5rem",bgImage:"linear-gradient(91deg, #ef6829 5%, #f3a261 36%, #e8c46a 54%, #3699ae 83%)"}}}},defaultProps:{variant:"gradient"}},MultiProgressBar:{parts:["container","progress"],baseStyle:{container:{bg:"#f6f6f6",borderRadius:"0.25rem",pos:"relative"},progress:{pos:"absolute",display:"flex",alignItems:"center",left:"0",top:"0",bottom:"0",bg:"#f6f6f6",borderRadius:"0.25rem",color:"white",fontSize:"0.75rem",fontWeight:"500",textAlign:"right",width:"0%",transition:"width 0.25s ease-out"}},sizes:{lg:{container:{h:"2.5rem"}},md:{container:{h:"1.75rem"}},sm:{container:{h:"1rem"}}},defaultProps:{size:"md"}},NavLinks:{parts:["container","link"],baseStyle:{container:{},link:{pos:"relative",display:"flex",justifyContent:"center",alignItems:"center"}},variants:{appbar:{container:{display:"flex",h:"100%"},link:{h:"100%",mx:"2px",fontSize:"1rem",fontWeight:"500",color:"#999999",px:"1.25rem","> *":{opacity:.4},_before:{content:'""',pos:"absolute",w:"100%",h:"4px",bottom:0,display:"none",borderRadius:"2px",bgImage:"linear-gradient(92deg, #ef6829 5%, #f3a261 36%, #e8c46a 54%, #3699ae 83%)"},_hover:{color:"black","> *":{opacity:1}},"&.active":{color:"black",_before:{display:"block"},"> *":{opacity:1}}}},sidebar:{link:{justifyContent:"flex-start",pos:"relative",pl:"1.5rem",h:"3.75rem",color:"white",fontSize:"14px",fontWeight:"bold",whiteSpace:"nowrap",_before:{content:'""',pos:"absolute",display:"none",left:0,borderTopRightRadius:"5px",borderBottomRightRadius:"5px",bgImage:"linear-gradient(185deg, #f2dd7f, #ee682a)",h:"100%",w:"5px"},svg:{mr:"1rem"},"> *":{opacity:.55},_hover:{bg:"bg.900"},"&.active":{bg:"bg.900",_before:{display:"block"},"> *":{opacity:1}}}},inner:{container:{display:"flex",alignItems:"center",justifyContent:"center",borderTopRadius:"6px",p:"0.5rem"},link:{display:"flex",justifyContent:"center",alignItems:"center",boxSizing:"border-box",color:"#c1c1c1",lineHeight:"1.14",fontWeight:"bold",minW:"12.5rem",h:"2.75rem",border:"1px solid transparent",borderRadius:"6px",mx:"2px",svg:{mr:"0.5rem"},_hover:{color:"c-orange.200","svg g":{stroke:"c-orange.200"}},"&.active":{color:"c-orange.200",bg:"white",boxShadow:"2px 2px 2px 0 rgba(192, 192, 192, 0.25)",borderColor:"#dddddd","svg g":{stroke:"c-orange.200"}}}},"inner-sidebar":{container:{bg:"#f6f6f6"},link:{justifyContent:"flex-start",pos:"relative",pl:"1.35rem",h:"3.75rem",color:"rgba(0,0,0, 0.25)",fontSize:"14px",fontWeight:"bold",whiteSpace:"nowrap",borderBottom:"solid 1px #d3d3d3",svg:{mr:"0.5rem"},_hover:{color:"c-orange.200","svg g":{stroke:"c-orange.200"}},"&.active":{color:"c-orange.200",bg:"white","svg g":{stroke:"c-orange.200"}}}}}},PlannerBlock:{parts:["container","title","subject","progress","strip","statusBadge"],baseStyle:{container:{position:"relative",boxSizing:"border-box",borderRadius:"3px",h:"4.5rem",py:"6px",pl:"5px",bg:"white",transform:"translate(0, 0)",cursor:"pointer",border:"solid 1px #dddddd",boxShadow:"2px 2px 2px 0 rgba(192, 192, 192, 0.25)",_hover:{".pl-block-statusbridge":{opacity:0},".pl-actions":{opacity:1}}},placeholder:{boxSizing:"border-box",borderRadius:"3px",h:"4.5rem"},inner:{position:"relative",display:"flex",justifyContent:"space-between",flexDirection:"column",h:"100%",px:"0.75rem",py:"3px"},statusBadge:{pos:"absolute",top:"-9px",right:"0",opacity:1,h:"18px",px:"10px",fontSize:"9px",lineHeight:"18px",bg:"#48adf3",color:"white",borderRadius:"9px",textTransform:"uppercase",transition:"opacity 0.15s ease-out"},strip:{pos:"absolute",left:0,top:0,bottom:0,w:"6px",borderRadius:"3px"},title:{fontSize:"0.75rem",fontWeight:"500",lineHeight:1.33,color:"#313131"},subject:{lineHeight:1,fontSize:"0.875rem",fontWeight:"800",mr:"0.5rem"},progress:{w:"30%",display:"flex",alignItems:"center",justifyContent:"flex-end"},row:{display:"flex",justifyContent:"space-between",alignItems:"center"},actions:{position:"absolute",left:"-1px",right:"-1px",top:"-1px",bottom:"-1px",display:"flex",justifyContent:"space-between",alignItems:"center",borderRadius:"3px",px:"1.25rem",bg:"rgba(250, 100, 0, 0.95)",transition:"opacity 0.15s ease-out",opacity:0},actionsInner:{display:"flex",alignItems:"center"},delete:{background:"transparent",cursor:"pointer",padding:0,outline:0,path:{stroke:"white"}},duplicate:{ml:"1.25rem",background:"transparent",cursor:"pointer",padding:0,outline:0},review:{mr:"1.25rem",background:"transparent",cursor:"pointer",padding:0,outline:0},moveIcon:{path:{stroke:"white"}}}},PlannerBlocksSlot:{parts:["container","inner","footer","button"],baseStyle:{container:{px:"0.25rem",py:"0.5rem",bg:"#fafafa",_hover:{bg:"#f1f1f1","button[aria-label='icon-btn-add']":{visibility:"visible"}},_selected:{bg:"#f1f1f1"}},inner:{minH:"4.5rem"},footer:{display:"flex",justifyContent:"center",alignItems:"center"},button:{visibility:"hidden",background:"transparent",cursor:"pointer",padding:0,outline:0,_hover:{".path-circle":{fill:"c-orange.200"},".path-cross":{stroke:"c-orange.200"}}}},variants:{anytime:{container:{px:"0"},inner:{display:"flex",justifyContent:"flex-start",alignItems:"flex-start",flexWrap:"wrap","> *":{mx:"0.25rem",mb:"0.5rem",w:"".concat(r,"!important")}},footer:{py:"1.125rem"}},day:{container:{w:r,display:"flex",flexDirection:"column",borderLeft:"solid 1px #e4e4e4",_first:{borderLeft:"none"}},inner:{flexGrow:"1","> *":{mb:"0.5rem",_last:{mb:"0"}}},footer:{pt:"0.75rem",pb:"0.25rem"}},week:{container:{w:"calc(50% - 1.25rem)",mx:"0.625rem",px:"1.25rem",py:"1.25rem",display:"flex",flexDirection:"column",borderRadius:"0.5rem",border:"1px solid #e5e5e5"},inner:{flexGrow:"1","> *":{mb:"0.5rem",_last:{mb:"0"}}},footer:{pt:"2.5rem"}},sidebar:{container:{bg:"transparent",py:"0",px:"0.75rem",my:"0.75rem",flexGrow:1,overflowY:"auto",_hover:{bg:"transparent"},_selected:{bg:"rgb(223, 242, 244)"}},inner:{"> *":{mb:"0.5rem"}}}},defaultProps:{variant:"day"}},PlannerHeader:{parts:["container","item","title","subtitle"],baseStyle:{container:{display:"flex",justifyConteint:"space-between",pos:"relative",h:"3.75rem",bg:"white"},item:{position:"relative",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",fontWeight:"700",lineHeight:"1"},title:{color:"#313131",fontSize:"0.875rem",_selected:{color:"c-orange.500"}},subtitle:{color:"#3699ae",fontSize:"0.75rem",mt:"3px",_selected:{color:"c-orange.500"}}}},Popover:{parts:["popper","content","header","body","footer","arrow"],baseStyle:{content:{border:"none",_focus:{boxShadow:"md",outline:0}}},variants:{"avatar-select":{content:{px:"0",py:"0",minW:"20rem"},header:{color:"#313131",borderBottom:"0",fontWeight:"bold",fontSize:"1.25rem",lineHeight:"normal",px:"1.75rem",pt:"1.5rem"},body:{display:"grid",px:"1.75rem",mb:"0",pt:"1.5rem",pb:"3.125rem",gridTemplateColumns:"repeat(4, 1fr)",gridColumnGap:"0.75rem",gridRowGap:"1rem"}},"accounts-list":{content:{border:"none",_focus:{borderTopLeftRadius:"0",border:"none"}}}}},Progress:{variants:{block:{track:{borderRadius:"3px",bg:"#ececec"},trackFilled:{borderRadius:"3px"}}},sizes:{block:{track:{h:"6px"}}}},Radio:{baseStyle:{container:{cursor:"pointer"},control:{_focus:{boxShadow:"none"}}},sizes:{lg2:{control:{w:5,h:5},label:{fontSize:"0.875rem"}}},defaultProps:{colorScheme:"c-orange"}},ResourceCard:{parts:["container","header","ages","content","actions","image"],baseStyle:{container:{display:"inline-flex",flexDir:"column",justifyItems:"flex-start",verticalAlign:"top",h:"14.375rem",maxH:"14.375rem",minH:"14.375rem",w:"13.75rem",minW:"13.75rem",maxW:"13.75rem",bg:"white",boxShadow:"0 2px 8px 0 rgba(0, 0, 0, 0.1)",borderRadius:"0.875rem",whiteSpace:"normal"},header:{color:"#313131",lineHeight:"1.13",fontSize:"1rem",fontWeight:"500"},ages:{mt:"0.25rem",color:"#61767b",fontSize:"0.875rem",fontWeight:"500"},content:{px:"1.25rem",flexGrow:1,py:"0.75rem",h:"4.75rem",cursor:"pointer"},actions:{h:"3rem",display:"flex",justifyContent:"space-between",alignItems:"center",px:"1.125rem",boxSizing:"border-box",borderTop:"1px solid #ececec"},image:{width:"100%",objectFit:"cover",bg:"transparent",height:"6.5rem",cursor:"pointer",borderTopLeftRadius:"0.875rem",borderTopRightRadius:"0.875rem",border:"none"}},defaultProps:{variant:"card"},variants:{"card-tall":{container:{h:"18.125rem",maxH:"18.125rem",minH:"18.125rem"}},modal:{}}},Select:{sizes:{lg:{field:{borderRadius:"0.25rem"}},md:{field:{borderRadius:"0.25rem"}}},variants:{outline:{field:{bg:"white",pl:"0.75rem",_focus:{boxShadow:"none"}}}}},Tag:{baseStyle:{label:{fontWeight:"500"},closeButton:{_active:{bg:"transparent",boxShadow:"none"}}},variants:{outline:{container:{boxShadow:"inset 0 0 0px 1px #3699ae;",color:"#3699ae"}},resource:{container:{bg:"#cfe6eb",color:"#7fb7c4",_hover:{bg:"#86c2ce",color:"white"}}}},sizes:{md:{container:{minH:"1.75rem",minW:"1.75rem",px:"0.625rem",fontSize:"0.75rem",borderRadius:"3px"}},lg:{container:{minH:"2rem",minW:"2rem",px:"0.625rem",fontSize:"0.75rem",borderRadius:"3px"}}},defaultProps:{size:"md",variant:"resource"}},WeekdayButton:{baseStyle:{boxSizing:"border-box",bg:"white",color:"#313131",fontWeight:"bold",textAlign:"center",_hover:{bg:"c-orange.600",color:"white"},_selected:{bg:"c-orange.200",color:"white"}},variants:{outline:{border:"1px solid #e4e4e4"}},sizes:{md:{h:"2.5rem",w:"2.5rem",minH:"2.5rem",minW:"2.5rem",borderRadius:"2.5rem",lineHeight:"2.5rem",fontSize:"1rem"},lg:{h:"2.8125rem",w:"2.8125rem",minH:"2.8125rem",minW:"2.8125rem",borderRadius:"2.8125rem",lineHeight:"2.8125rem",fontSize:"1rem"}},defaultProps:{variant:"default",size:"md"}}},fonts:{body:"'FilsonSoft', sans-serif",heading:"'FilsonSoft', sans-serif"},shadows:{sm:"2px 2px 3px rgba(53, 65, 68, 0.15)",md:"0 4px 16px 4px rgba(0, 0, 0, 0.2)"},colors:{bg:{100:"#F5FAFB",200:"#FAFAFA",300:"#F1F1F1",400:"#DFF2F4",500:"#f6f6f6",800:"#29879C",900:"#177084"},"c-orange":{200:"#ee682a",500:"#ef6829",600:"#f38754"},brand:{900:"#1a365d",800:"#153e75",700:"#2a69ac"},progress:{200:"#52de63",500:"#52de63"},green1:{100:"#27a02e",200:"#27a02e",300:"#27a02e",400:"#27a02e",500:"#27a02e",600:"#27a02e",700:"#27a02e",800:"#27a02e",900:"#27a02e"}}};export{n as appTheme,o as colors,i as randomColorFromList,t as subjectColors};
const AutocompleteTags = {
parts: ["input", "container", "suggestions", "suggestion"],
baseStyle: {
container: {
bg: "white",
boxSizing: "border-box",
borderRadius: "0.25rem",
pos: "relative",
px: "0.5rem",
pb: "0.25rem",
border: "1px solid #e4e4e4",
_focus: {
borderColor: "rgb(49, 130, 206)"
}
},
leftAddon: {
position: "relative",
display: "inline-block",
pr: "0.5rem",
pl: "0.25rem",
"> *": {
display: "inline-block",
verticalAlign: "center"
}
},
tags: {
display: "inline",
"> *": {
mt: "0.25rem",
mr: "0.25rem"
}
},
inner: {
position: "relative",
display: "inline-block"
},
input: {
pl: "2px",
boxSizing: "content-box",
outline: 0,
_focus: {
border: "none",
boxShadow: "none"
}
},
suggestions: {
top: "calc(100% + 0.7rem)",
pos: "absolute",
left: "0",
bg: "white",
py: "0.2rem",
boxShadow: "sm"
},
suggestion: {
fontSize: "md",
px: "0.75rem",
py: "0.3rem",
cursor: "pointer",
_hover: {
bg: "gray.200"
},
mark: {
backgroundColor: "transparent",
fontWeight: "600"
},
_selected: {
bg: "gray.200"
}
}
},
variants: {
"single-line": {
tags: {}
}
},
sizes: {
lg: {
input: {
lineHeight: "2rem"
},
leftAddon: {
h: "2rem",
lineHeight: "2rem"
}
},
md: {
input: {
lineHeight: "1.75rem"
},
leftAddon: {
h: "1.75rem",
lineHeight: "1.75rem",
minW: "1.75rem"
}
}
},
defaultProps: {
variant: "resource",
size: "md"
}
};
const Avatar = {
baseStyle: {
container: {
color: "white",
cursor: "pointer",
fontWeight: "500",
borderColor: "transparent"
}
},
sizes: {
xs: {
container: {
width: "1.5rem",
height: "1.5rem"
},
excessLabel: {
width: "1.5rem",
height: "1.5rem"
},
label: {
fontSize: "0.875rem"
}
},
sm: {
container: {
width: "2rem",
height: "2rem"
},
excessLabel: {
width: "2rem",
height: "2rem"
},
label: {
fontSize: "1rem"
}
},
md: {
container: {
width: "2.25rem",
height: "2.25rem"
},
excessLabel: {
width: "2.25rem",
height: "2.25rem"
},
label: {
fontSize: "1rem"
}
},
lg: {
container: {
width: "2.5rem",
height: "2.5rem"
},
excessLabel: {
width: "2.5rem",
height: "2.5rem"
},
label: {
fontSize: "1.25rem"
}
},
xl: {
container: {
width: "3.125rem",
height: "3.125rem"
},
excessLabel: {
width: "3.125rem",
height: "3.125rem"
},
label: {
fontSize: "1.25rem"
}
}
},
defaultProps: {
size: "sm"
}
};
const Button = {
baseStyle: {
fontWeight: "700",
_focus: {
boxShadow: "none"
}
},
variants: {
outline: {
borderWidth: "3px"
},
"dropdown-menu": {
bg: "white",
color: "#354144",
fontWeight: 500,
border: "1px solid #e4e4e4",
borderRadius: "4px",
textAlign: "left",
px: "0.5rem",
minW: "10rem"
},
"appbar-menu": {
h: "3rem",
mx: "2px",
fontSize: "1rem",
fontWeight: "500",
color: "black",
px: "1.25rem",
_before: {
content: '""',
pos: "absolute",
w: "100%",
h: "4px",
bottom: 0,
display: "block",
borderRadius: "2px",
bgImage: "linear-gradient(92deg, #ef6829 5%, #f3a261 36%, #e8c46a 54%, #3699ae 83%)"
}
},
toggle: {
borderRadius: "6px",
color: "#29879c",
bg: "rgba(54, 153, 174, 0.1)",
_hover: {
color: "white",
bg: "c-orange.200"
},
_selected: {
color: "white",
bg: "c-orange.200"
}
}
},
sizes: {
xs: {
borderRadius: "full",
px: "0.875rem"
},
sm: {
h: "1.875rem",
borderRadius: "0.9375rem",
px: "1rem",
fontSize: "0.75rem"
},
md: {
h: "2.25rem",
borderRadius: "1.125rem",
px: "1.25rem",
fontSize: "1rem"
},
lg: {
h: "2.5rem",
borderRadius: "1.25rem",
px: "1.75rem",
fontSize: "1rem"
},
xl: {
h: "3.125rem",
borderRadius: "1.5625rem",
px: "1.75rem",
fontSize: "1.125rem"
}
}
};
const Checkbox = {
baseStyle: {
control: {
border: "1px solid #e4e4e4",
borderRadius: "3px",
_focus: {
boxShadow: "none"
}
}
},
defaultProps: {
colorScheme: "c-orange"
}
};
const FormLabel = {
baseStyle: {
color: "#3699ae",
fontSize: "0.875rem",
fontWeight: "700",
lineHeight: "1",
mb: "5px"
},
variants: {
"fw-learners": {
fontSize: "0.75rem",
fontWeight: "500",
color: "#61767b"
}
}
};
const Input = {
baseStyle: {},
sizes: {
lg: {
field: {
borderRadius: "0.25rem"
}
},
md: {
field: {
borderRadius: "0.25rem"
}
}
},
variants: {
outline: {
field: {
bg: "white",
_focus: { boxShadow: "none" }
}
}
}
};
const Textarea = {
baseStyle: {},
sizes: {
lg: {
borderRadius: "0.25rem"
},
md: {
borderRadius: "0.25rem"
}
},
variants: {
outline: {
bg: "white",
_focus: { boxShadow: "none" }
}
}
};
const LearnerTab = {
parts: ["container", "avatar", "label"],
baseStyle: {
container: {
display: "flex",
alignItems: "center",
cursor: "pointer",
pl: "4px",
pr: "1rem",
mr: "0.5rem",
boxSizing: "content-box",
border: "1px solid transparent",
bg: "white",
color: "#313131",
_selected: {
bg: "#ee682a",
color: "white"
},
_hover: {
bg: "#ee682a",
color: "white"
}
},
label: {
color: void 0
}
},
sizes: {
md: {
container: {
h: "2.75rem",
borderRadius: "1.375rem"
}
}
},
variants: {
outline: {
container: {
borderColor: "#e4e4e4"
}
},
"outline-truncated": {
container: {
borderColor: "#e4e4e4"
},
label: {
isTruncated: true
}
}
}
};
const Menu = {
baseStyle: {
list: {
boxShadow: "md",
border: "none",
borderRadius: "0.5rem"
}
},
variants: {
"subject-addon": {
button: {
pos: "absolute",
right: "1px",
top: "0",
bottom: "0",
w: "5.25rem",
bg: "#fafafa",
color: "#c1c1c1",
borderLeft: "solid 1px #e4e4e4",
borderRightRadius: "0.25rem",
_hover: { opacity: 0.7 }
}
}
}
};
const Modal = {
baseStyle: {
dialog: {
p: "0",
borderRadius: "0.5rem",
boxShadow: "0 4px 16px 4px rgba(0, 0, 0, 0.15)"
},
closeButton: {
top: "20px",
opacity: 0.45,
_focus: {
boxShadow: "none"
},
svg: {
width: "1.125rem",
height: "1.125rem"
},
_hover: {
opacity: 0.8,
bg: "transparent"
}
},
header: {
flex: "auto",
display: "flex",
alignItems: "center",
h: "3.75rem",
minH: "3.75rem",
maxH: "3.75rem",
color: "#313131",
fontWeight: "700",
fontSize: "1.125rem",
px: "1.75rem",
py: 0,
borderBottom: "solid 1px #e4e4e4"
},
body: {
p: "1.75rem"
},
footer: {
bg: "bg.500",
px: "1.7rem",
borderTop: "1px solid #e4e4e4",
borderBottomRadius: "0.5rem"
}
},
variants: {
gradient: {
dialog: {
pos: "relative",
pt: "6px",
_before: {
content: '""',
pos: "absolute",
top: 0,
h: "6px",
w: "100%",
borderTopRadius: "0.5rem",
bgImage: "linear-gradient(91deg, #ef6829 5%, #f3a261 36%, #e8c46a 54%, #3699ae 83%)"
}
}
}
},
defaultProps: {
variant: "gradient"
}
};
const MultiProgressBar = {
parts: ["container", "progress"],
baseStyle: {
container: {
bg: "#f6f6f6",
borderRadius: "0.25rem",
pos: "relative"
},
progress: {
pos: "absolute",
display: "flex",
alignItems: "center",
left: "0",
top: "0",
bottom: "0",
bg: "#f6f6f6",
borderRadius: "0.25rem",
color: "white",
fontSize: "0.75rem",
fontWeight: "500",
textAlign: "right",
width: "0%",
transition: "width 0.25s ease-out"
}
},
sizes: {
lg: {
container: {
h: "2.5rem"
}
},
md: {
container: {
h: "1.75rem"
}
},
sm: {
container: {
h: "1rem"
}
}
},
defaultProps: {
size: "md"
}
};
const NavLinks = {
parts: ["container", "link"],
baseStyle: {
container: {},
link: {
pos: "relative",
display: "flex",
justifyContent: "center",
alignItems: "center"
}
},
variants: {
appbar: {
container: {
display: "flex",
h: "100%"
},
link: {
h: "100%",
mx: "2px",
fontSize: "1rem",
fontWeight: "500",
color: "#999999",
px: "1.25rem",
"> *": {
opacity: 0.4
},
_before: {
content: '""',
pos: "absolute",
w: "100%",
h: "4px",
bottom: 0,
display: "none",
borderRadius: "2px",
bgImage: "linear-gradient(92deg, #ef6829 5%, #f3a261 36%, #e8c46a 54%, #3699ae 83%)"
},
_hover: {
color: "black",
"> *": {
opacity: 1
}
},
"&.active": {
color: "black",
_before: {
display: "block"
},
"> *": {
opacity: 1
}
}
}
},
sidebar: {
link: {
justifyContent: "flex-start",
pos: "relative",
pl: "1.5rem",
h: "3.75rem",
color: "white",
fontSize: "14px",
fontWeight: "bold",
whiteSpace: "nowrap",
_before: {
content: '""',
pos: "absolute",
display: "none",
left: 0,
borderTopRightRadius: "5px",
borderBottomRightRadius: "5px",
bgImage: "linear-gradient(185deg, #f2dd7f, #ee682a)",
h: "100%",
w: "5px"
},
svg: {
mr: "1rem"
},
"> *": {
opacity: 0.55
},
_hover: {
bg: "bg.900"
},
"&.active": {
bg: "bg.900",
_before: {
display: "block"
},
"> *": {
opacity: 1
}
}
}
},
inner: {
container: {
display: "flex",
alignItems: "center",
justifyContent: "center",
borderTopRadius: "6px",
p: "0.5rem"
},
link: {
display: "flex",
justifyContent: "center",
alignItems: "center",
boxSizing: "border-box",
color: "#c1c1c1",
lineHeight: "1.14",
fontWeight: "bold",
minW: "12.5rem",
h: "2.75rem",
border: "1px solid transparent",
borderRadius: "6px",
mx: "2px",
svg: {
mr: "0.5rem"
},
_hover: {
color: "c-orange.200",
"svg g": {
stroke: "c-orange.200"
}
},
"&.active": {
color: "c-orange.200",
bg: "white",
boxShadow: "2px 2px 2px 0 rgba(192, 192, 192, 0.25)",
borderColor: "#dddddd",
"svg g": {
stroke: "c-orange.200"
}
}
}
},
"inner-sidebar": {
container: {
bg: "#f6f6f6"
},
link: {
justifyContent: "flex-start",
pos: "relative",
pl: "1.35rem",
h: "3.75rem",
color: "rgba(0,0,0, 0.25)",
fontSize: "14px",
fontWeight: "bold",
whiteSpace: "nowrap",
borderBottom: "solid 1px #d3d3d3",
svg: {
mr: "0.5rem"
},
_hover: {
color: "c-orange.200",
"svg g": {
stroke: "c-orange.200"
}
},
"&.active": {
color: "c-orange.200",
bg: "white",
"svg g": {
stroke: "c-orange.200"
}
}
}
}
}
};
const PlannerBlock = {
parts: ["container", "title", "subject", "progress", "strip", "statusBadge"],
baseStyle: {
container: {
position: "relative",
boxSizing: "border-box",
borderRadius: "3px",
h: "4.5rem",
py: "6px",
pl: "5px",
bg: "white",
transform: "translate(0, 0)",
cursor: "pointer",
border: "solid 1px #dddddd",
boxShadow: "2px 2px 2px 0 rgba(192, 192, 192, 0.25)",
_hover: {
".pl-block-statusbridge": {
opacity: 0
},
".pl-actions": {
opacity: 1
}
}
},
placeholder: {
boxSizing: "border-box",
borderRadius: "3px",
h: "4.5rem"
},
inner: {
position: "relative",
display: "flex",
justifyContent: "space-between",
flexDirection: "column",
h: "100%",
px: "0.75rem",
py: "3px"
},
statusBadge: {
pos: "absolute",
top: "-9px",
right: "0",
opacity: 1,
h: "18px",
px: "10px",
fontSize: "9px",
lineHeight: "18px",
bg: "#48adf3",
color: "white",
borderRadius: "9px",
textTransform: "uppercase",
transition: "opacity 0.15s ease-out"
},
strip: {
pos: "absolute",
left: 0,
top: 0,
bottom: 0,
w: "6px",
borderRadius: "3px"
},
title: {
fontSize: "0.75rem",
fontWeight: "500",
lineHeight: 1.33,
color: "#313131"
},
subject: {
lineHeight: 1,
fontSize: "0.875rem",
fontWeight: "800",
mr: "0.5rem"
},
progress: {
w: "30%",
display: "flex",
alignItems: "center",
justifyContent: "flex-end"
},
row: {
display: "flex",
justifyContent: "space-between",
alignItems: "center"
},
actions: {
position: "absolute",
left: "-1px",
right: "-1px",
top: "-1px",
bottom: "-1px",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
borderRadius: "3px",
px: "1.25rem",
bg: "rgba(250, 100, 0, 0.95)",
transition: "opacity 0.15s ease-out",
opacity: 0
},
actionsInner: {
display: "flex",
alignItems: "center"
},
delete: {
background: "transparent",
cursor: "pointer",
padding: 0,
outline: 0,
path: {
stroke: "white"
}
},
duplicate: {
ml: "1.25rem",
background: "transparent",
cursor: "pointer",
padding: 0,
outline: 0
},
review: {
mr: "1.25rem",
background: "transparent",
cursor: "pointer",
padding: 0,
outline: 0
},
moveIcon: {
path: {
stroke: "white"
}
}
}
};
const colW = `${100 / 5}%`;
const PlannerBlocksSlot = {
parts: ["container", "inner", "footer", "button"],
baseStyle: {
container: {
px: "0.25rem",
py: "0.5rem",
bg: "#fafafa",
_hover: {
bg: "#f1f1f1",
"button[aria-label='icon-btn-add']": {
visibility: "visible"
}
},
_selected: {
bg: "#f1f1f1"
}
},
inner: {
minH: "4.5rem"
},
footer: {
display: "flex",
justifyContent: "center",
alignItems: "center"
},
button: {
visibility: "hidden",
background: "transparent",
cursor: "pointer",
padding: 0,
outline: 0,
_hover: {
".path-circle": {
fill: "c-orange.200"
},
".path-cross": {
stroke: "c-orange.200"
}
}
}
},
variants: {
anytime: {
container: {
px: "0"
},
inner: {
display: "flex",
justifyContent: "flex-start",
alignItems: "flex-start",
flexWrap: "wrap",
"> *": {
mx: "0.25rem",
mb: "0.5rem",
w: `${colW}!important`
}
},
footer: {
py: "1.125rem"
}
},
day: {
container: {
w: colW,
display: "flex",
flexDirection: "column",
borderLeft: "solid 1px #e4e4e4",
_first: { borderLeft: "none" }
},
inner: {
flexGrow: "1",
"> *": {
mb: "0.5rem",
_last: { mb: "0" }
}
},
footer: {
pt: "0.75rem",
pb: "0.25rem"
}
},
week: {
container: {
w: "calc(50% - 1.25rem)",
mx: "0.625rem",
px: "1.25rem",
py: "1.25rem",
display: "flex",
flexDirection: "column",
borderRadius: "0.5rem",
border: "1px solid #e5e5e5"
},
inner: {
flexGrow: "1",
"> *": {
mb: "0.5rem",
_last: { mb: "0" }
}
},
footer: {
pt: "2.5rem"
}
},
sidebar: {
container: {
bg: "transparent",
py: "0",
px: "0.75rem",
my: "0.75rem",
flexGrow: 1,
overflowY: "auto",
_hover: {
bg: "transparent"
},
_selected: {
bg: "rgb(223, 242, 244)"
}
},
inner: {
"> *": {
mb: "0.5rem"
}
}
}
},
defaultProps: {
variant: "day"
}
};
const PlannerHeader = {
parts: ["container", "item", "title", "subtitle"],
baseStyle: {
container: {
display: "flex",
justifyConteint: "space-between",
pos: "relative",
h: "3.75rem",
bg: "white"
},
item: {
position: "relative",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
fontWeight: "700",
lineHeight: "1"
},
title: {
color: "#313131",
fontSize: "0.875rem",
_selected: {
color: "c-orange.500"
}
},
subtitle: {
color: "#3699ae",
fontSize: "0.75rem",
mt: "3px",
_selected: {
color: "c-orange.500"
}
}
}
};
const Popover = {
parts: ["popper", "content", "header", "body", "footer", "arrow"],
baseStyle: {
content: {
border: "none",
_focus: {
boxShadow: "md",
outline: 0
}
}
},
variants: {
"avatar-select": {
content: {
px: "0",
py: "0",
minW: "20rem"
},
header: {
color: "#313131",
borderBottom: "0",
fontWeight: "bold",
fontSize: "1.25rem",
lineHeight: "normal",
px: "1.75rem",
pt: "1.5rem"
},
body: {
display: "grid",
px: "1.75rem",
mb: "0",
pt: "1.5rem",
pb: "3.125rem",
gridTemplateColumns: "repeat(4, 1fr)",
gridColumnGap: "0.75rem",
gridRowGap: "1rem"
}
},
"accounts-list": {
content: {
border: "none",
_focus: {
borderTopLeftRadius: "0",
border: "none"
}
}
}
}
};
const Progress = {
variants: {
block: {
track: {
borderRadius: "3px",
bg: "#ececec"
},
trackFilled: {
borderRadius: "3px"
}
}
},
sizes: {
block: {
track: {
h: "6px"
}
}
}
};
const Radio = {
baseStyle: {
container: {
cursor: "pointer"
},
control: {
_focus: {
boxShadow: "none"
}
}
},
sizes: {
lg2: {
control: { w: 5, h: 5 },
label: { fontSize: "0.875rem" }
}
},
defaultProps: {
colorScheme: "c-orange"
}
};
const ResourceCard = {
parts: ["container", "header", "ages", "content", "actions", "image"],
baseStyle: {
container: {
display: "inline-flex",
flexDir: "column",
justifyItems: "flex-start",
verticalAlign: "top",
h: "14.375rem",
maxH: "14.375rem",
minH: "14.375rem",
w: "13.75rem",
minW: "13.75rem",
maxW: "13.75rem",
bg: "white",
boxShadow: "0 2px 8px 0 rgba(0, 0, 0, 0.1)",
borderRadius: "0.875rem",
whiteSpace: "normal"
},
header: {
color: "#313131",
lineHeight: "1.13",
fontSize: "1rem",
fontWeight: "500"
},
ages: {
mt: "0.25rem",
color: "#61767b",
fontSize: "0.875rem",
fontWeight: "500"
},
content: {
px: "1.25rem",
flexGrow: 1,
py: "0.75rem",
h: "4.75rem",
cursor: "pointer"
},
actions: {
h: "3rem",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
px: "1.125rem",
boxSizing: "border-box",
borderTop: "1px solid #ececec"
},
image: {
width: "100%",
objectFit: "cover",
bg: "transparent",
height: "6.5rem",
cursor: "pointer",
borderTopLeftRadius: "0.875rem",
borderTopRightRadius: "0.875rem",
border: "none"
}
},
defaultProps: {
variant: "card"
},
variants: {
"card-tall": {
container: {
h: "18.125rem",
maxH: "18.125rem",
minH: "18.125rem"
}
},
modal: {}
}
};
const Select = {
sizes: {
lg: {
field: {
borderRadius: "0.25rem"
}
},
md: {
field: {
borderRadius: "0.25rem"
}
}
},
variants: {
outline: {
field: {
bg: "white",
pl: "0.75rem",
_focus: { boxShadow: "none" }
}
}
}
};
const Tag = {
baseStyle: {
label: {
fontWeight: "500"
},
closeButton: {
_active: {
bg: "transparent",
boxShadow: "none"
}
}
},
variants: {
outline: {
container: {
boxShadow: "inset 0 0 0px 1px #3699ae;",
color: "#3699ae"
}
},
resource: {
container: {
bg: "#cfe6eb",
color: "#7fb7c4",
_hover: {
bg: "#86c2ce",
color: "white"
}
}
}
},
sizes: {
md: {
container: {
minH: "1.75rem",
minW: "1.75rem",
px: "0.625rem",
fontSize: "0.75rem",
borderRadius: "3px"
}
},
lg: {
container: {
minH: "2rem",
minW: "2rem",
px: "0.625rem",
fontSize: "0.75rem",
borderRadius: "3px"
}
}
},
defaultProps: {
size: "md",
variant: "resource"
}
};
const WeekdayButton = {
baseStyle: {
boxSizing: "border-box",
bg: "white",
color: "#313131",
fontWeight: "bold",
textAlign: "center",
_hover: {
bg: "c-orange.600",
color: "white"
},
_selected: {
bg: "c-orange.200",
color: "white"
}
},
variants: {
outline: {
border: "1px solid #e4e4e4"
}
},
sizes: {
md: {
h: "2.5rem",
w: "2.5rem",
minH: "2.5rem",
minW: "2.5rem",
borderRadius: "2.5rem",
lineHeight: "2.5rem",
fontSize: "1rem"
},
lg: {
h: "2.8125rem",
w: "2.8125rem",
minH: "2.8125rem",
minW: "2.8125rem",
borderRadius: "2.8125rem",
lineHeight: "2.8125rem",
fontSize: "1rem"
}
},
defaultProps: {
variant: "default",
size: "md"
}
};
const controls = {
AutocompleteTags,
Avatar,
Button,
Checkbox,
FormLabel,
Input,
Textarea,
LearnerTab,
Menu,
Modal,
MultiProgressBar,
NavLinks,
PlannerBlock,
PlannerBlocksSlot,
PlannerHeader,
Popover,
Progress,
Radio,
ResourceCard,
Select,
Tag,
WeekdayButton
};
const colors = [
"#11C7B6",
"#067ABF",
"#FF6753",
"#B059CC",
"#FA9715",
"#276749"
];
const subjectColors = [
"#00B99B",
"#F59C49",
"#FC5B6E",
"#B1182C",
"#8CC983",
"#267960",
"#DBCE2B",
"#9585DD",
"#9D3FA9",
"#74ADD0",
"#4575B4",
"#053061"
];
function randomColorFromList(str, list) {
let index = 0;
if (!(str == null ? void 0 : str.length)) {
return list[0];
}
for (let i = 0; i < str.length; i++) {
index = str.charCodeAt(i) + ((index << 5) - index);
index = index & index;
}
index = (index % list.length + list.length) % list.length;
return list[index];
}
const appTheme = {
components: controls,
fonts: {
body: "'FilsonSoft', sans-serif",
heading: "'FilsonSoft', sans-serif"
},
shadows: {
sm: "2px 2px 3px rgba(53, 65, 68, 0.15)",
md: "0 4px 16px 4px rgba(0, 0, 0, 0.2)"
},
colors: {
bg: {
100: "#F5FAFB",
200: "#FAFAFA",
300: "#F1F1F1",
400: "#DFF2F4",
500: "#f6f6f6",
800: "#29879C",
900: "#177084"
},
"c-orange": {
200: "#ee682a",
500: "#ef6829",
600: "#f38754"
},
brand: {
900: "#1a365d",
800: "#153e75",
700: "#2a69ac"
},
progress: {
200: "#52de63",
500: "#52de63"
},
green1: {
100: "#27a02e",
200: "#27a02e",
300: "#27a02e",
400: "#27a02e",
500: "#27a02e",
600: "#27a02e",
700: "#27a02e",
800: "#27a02e",
900: "#27a02e"
}
}
};
export { appTheme, colors, randomColorFromList, subjectColors };
//# sourceMappingURL=index.esm.js.map

2

package.json
{
"name": "@colearn/theme",
"version": "1.1.1",
"version": "1.2.0",
"description": "Colean UI Theme",

@@ -5,0 +5,0 @@ "author": "Colearn",

dist/index.cjs.js.map

Sorry, the diff of this file is not supported yet

dist/index.esm.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc