@gsretail.com/gui-core/build/esm/assets/theme/guiTheme.js

A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook

import{__assign as n}from"tslib";import{darken as o}from"@mui/material/styles";import t from"./basicStyle.js";import e from"./styles/color.js";import{paddingYSpacing as r}from"./styles/spacing.js";import{softShadows as i}from"./styles/shadows.js";import a from"./fonts/NotoSansKr/NotoSansKR-Bold.js";import d from"./fonts/NotoSansKr/NotoSansKR-Bold2.js";import l from"./fonts/NotoSansKr/NotoSansKR-Light2.js";import c from"./fonts/NotoSansKr/NotoSansKR-Light.js";import p from"./fonts/NotoSansKr/NotoSansKR-Medium.js";import s from"./fonts/NotoSansKr/NotoSansKR-Medium2.js";import u from"./fonts/NotoSansKr/NotoSansKR-Regular.js";import g from"./fonts/NotoSansKr/NotoSansKR-Regular2.js";import f from"./fonts/Pretendard/Pretendard-Bold.js";import h from"./fonts/Pretendard/Pretendard-Light.js";import m from"./fonts/Pretendard/Pretendard-Medium.js";import b from"./fonts/Pretendard/Pretendard-Regular.js";import x from"./fonts/Roboto/Roboto-Bold.js";import y from"./fonts/Roboto/Roboto-Light.js";import w from"./fonts/Roboto/Roboto-Medium.js";import M from"./fonts/Roboto/Roboto-Regular.js";var k=null,S=function(e){return{breakpoints:{values:{xs:375,sm:768,md:1024,lg:1439,xl:1920}},zIndex:{mobileStepper:1e3,speedDial:1050,appBar:1100,drawer:1200,modal:1300,snackbar:1400,tooltip:1500},responsiveFontSizes:!0,shadows:i,direction:"ltr",spacing:8,palette:{background:{paper:e.white},common:{black:e.black,white:e.white},primary:{main:e.primaryColor},secondary:{main:e.secondaryColor},error:{main:e.errorColor},warning:{main:e.warningColor},info:{main:e.infoColor},success:{main:e.successColor},grey:{50:e.grey50,100:e.grey100,200:e.grey200,300:e.grey300,400:e.grey400,500:e.grey500,600:e.grey600,700:e.grey700,800:e.grey800,900:e.grey900},text:{primary:e.primaryText,secondary:e.secondaryText,disabled:e.disabledText},action:{disabled:e.disabledText,disabledBackground:e.disabledColor},leafGreen:{main:e.leafGreen},green:{main:e.green},teal:{main:e.teal},cyan:{main:e.cyan},blue:{main:e.blue},indigo:{main:e.indigo},purple:{main:e.purple},pink:{main:e.pink},red:{main:e.red},orange:{main:e.orange},yellow:{main:e.yellow},tonalOffset:.1},typography:{fontFamily:"'Pretendard' !important",fontSize:13,htmlFontSize:16,fontWeightLight:300,fontWeightRegular:400,fontWeightMedium:500,fontWeightBold:700,h1:{fontSize:"2.25rem",fontWeight:500,lineHeight:1.225,letterSpacing:-.24},h2:{fontSize:"1.875rem",fontWeight:500,lineHeight:1.27,letterSpacing:-.24},h3:{fontSize:"1.625rem",fontWeight:500,lineHeight:1.234,letterSpacing:-.06},h4:{fontSize:"1.375rem",fontWeight:500,lineHeight:1.275,letterSpacing:-.06},h5:{fontSize:"1.250rem",fontWeight:500,lineHeight:1.3,letterSpacing:-.05},h6:{fontSize:"1.125rem",fontWeight:500,lineHeight:1.334,letterSpacing:-.38},subtitle1:{fontSize:"1rem",fontWeight:700,lineHeight:1.5,letterSpacing:-.4},subtitle2:{fontSize:"0.875rem",fontWeight:700,lineHeight:1.43,letterSpacing:-.4},body1:{fontSize:"1rem",fontWeight:400,lineHeight:1.5,letterSpacing:-.4},body2:{fontSize:"0.875rem",fontWeight:400,lineHeight:1.43,letterSpacing:-.4},caption:{fontSize:"0.8125rem",fontWeight:400,lineHeight:1.385,letterSpacing:0},overline:{fontSize:"0.75rem",lineHeight:1.34,letterSpacing:0,textTransform:"lowercase"}},components:{MuiCssBaseline:{styleOverrides:'\n        @font-face {\n          font-family: "NotoSansKR";\n          font-weight: 300;\n          src: url('.concat(c,") format('woff2'),\n               url(").concat(l,") format('woff');\n        }\n        @font-face {\n          font-family: \"NotoSansKR\";\n          font-weight: 400;\n          src: url(").concat(g,") format('woff2'),\n               url(").concat(u,") format('woff');\n        }\n        @font-face {\n          font-family: \"NotoSansKR\";\n          font-weight: 500;\n          src: url(").concat(s,") format('woff2'),\n               url(").concat(p,") format('woff');\n        }\n        @font-face {\n          font-family: \"NotoSansKR\";\n          font-weight: 700;\n          src: url(").concat(d,") format('woff2'),\n               url(").concat(a,") format('woff');\n        }\n        @font-face {\n          font-family: \"Roboto\";\n          font-weight: 300;\n          src: url(").concat(y,") format('truetype');\n        }\n        @font-face {\n          font-family: \"Roboto\";\n          font-weight: 400;\n          src: url(").concat(M,") format('truetype');\n        }\n        @font-face {\n          font-family: \"Roboto\";\n          font-weight: 500;\n          src: url(").concat(w,") format('truetype');\n        }\n        @font-face {\n          font-family: \"Roboto\";\n          font-weight: 700;\n          src: url(").concat(x,") format('truetype');\n        }\n        @font-face {\n          font-family: 'Pretendard';\n          src: url(").concat(h,") format('woff2');\n          font-weight: 300;\n        }\n        @font-face {\n          font-family: 'Pretendard';\n          src: url(").concat(b,") format('woff2');\n          font-weight: 400;\n        }\n        @font-face {\n          font-family: 'Pretendard';\n          src: url(").concat(m,") format('woff2');\n          font-weight: 500;\n        }\n        @font-face {\n          font-family: 'Pretendard';\n          src: url(").concat(f,") format('woff2');\n          font-weight: 700;\n        }\n\n        * {\n          box-sizing: border-box;\n          margin: 0;\n          padding: 0;\n        }\n        html {\n          width: 100%;\n          height: auto;\n        }\n        body {\n          min-width: 768px;\n          width: 100%;\n          height: 100%;\n          background-color: ").concat(e.grey100,';\n          font-weight: 500;\n          overflow: auto;\n\n          > div {\n            height: inherit;\n          }\n        }\n        #root {\n          height: 100%;\n          width: 100%;\n        }\n        ::-webkit-scrollbar {\n          width: 16px;\n          height: 16px;\n        }\n\n        ::-webkit-scrollbar-button:start:decrement,\n        ::-webkit-scrollbar-button:end:increment {\n          display: none;\n          height: 10px;\n          background: #f5f5f5;\n        }\n\n        ::-webkit-scrollbar-track {\n          background: transparent;\n          // background: #efefef;\n          -webkit-box-shadow: none;\n        }\n\n        ::-webkit-scrollbar-thumb {\n          height: 30px;\n          width: 30px;\n          background: rgba(0,0,0,.2);\n          -webkit-border-radius: 8px;\n          border-radius: 8px;\n          -webkit-box-shadow: none;\n          border: 3px solid #efefef;\n        }\n\n        input[type="number"]::-webkit-inner-spin-button,\n        input[type="number"]::-webkit-outer-spin-button{ -webkit-appearance: none; }\n\n        input:-webkit-autofill,\n        input:-webkit-autofill:hover,\n        input:-webkit-autofill:focus,\n        input:-webkit-autofill:active {\t-webkit-box-shadow: 0 0 0 1000px #fff inset !important; -webkit-text-fill-color: #000 !important; }\n\n        // disabled 커서\n        .Mui-disabled, button:disabled, input:disabled, textarea:disabled {\n          pointer-events: unset !important;\n          cursor: not-allowed !important;\n        }\n\n        .gui-form,\n        .gui-form-group > .MuiBox-root {\n          display: inline-flex;\n          align-items: center;\n          vertical-align: middle;\n          line-height: 1;\n        }\n\n        // GuiInput, GuiSelect label\n        .gui-label {\n          position: relative;\n          display: inline-block;\n          width: 100%;\n          padding-right: 12px;\n          white-space: nowrap;\n          font-size: 0.8125rem; //13px\n          font-weight: 500;\n          line-height: 19px;\n          color: ').concat(e.primaryText,";\n\n          &.Mui-required::after {\n            content: '*';\n            padding-left: 2px;\n            font-size: 1rem;  //16px\n            font-weight: 700;\n            color: ").concat(e.red,";\n          }\n\n          &.textAlign-left {\n            text-align: left;\n          }\n          &.textAlign-center {\n            text-align: center;\n          }\n          &.textAlign-right {\n            text-align: right;\n          }\n        }\n\n        // DatePicker\n        &.gui-date-picker {\n\n          .gui-date-single,\n          .gui-date-range {\n            display: flex;\n            flex-direction: row;\n            align-items: center;\n            border-radius: 4px;\n            border: 1px solid ").concat(e.grey400,";\n            background-color: ").concat(e.white,";\n\n            .MuiFormControl-root {\n              flex-grow: 1;\n\n              .MuiOutlinedInput-root {\n                min-height: 30px;\n                font-size: 0.8125rem; //13px\n                letter-spacing: -0.5px;\n                background-color: transparent;\n\n                & .MuiOutlinedInput-notchedOutline {\n                  display: none;\n                }\n\n                & .MuiInputBase-input {\n                  padding: 5px 8px;\n                }\n                &.MuiInputBase-sizeSmall {\n                  min-height: 22px;\n\n                  .MuiInputBase-inputSizeSmall {\n                    padding: 1.5px 8px;\n                  }\n                }\n\n                &.MuiInputBase-adornedStart {\n                  padding-left: 8px;\n                }\n                &.MuiInputBase-adornedEnd {\n                  padding-right: 8px;\n                }\n              }\n\n              .MuiInputAdornment-root {\n                width: 16px;\n                height: 16px;\n                color: inherit;\n                line-height: 1;\n                justify-content: center;\n                z-index: 1;\n\n                &.MuiInputAdornment-positionStart,\n                &.MuiInputAdornment-positionEnd {\n                  margin: 0 -2px;\n                }\n\n                & .MuiIconButton-root {\n                  width: 24px;\n                  height: 24px;\n                  padding: 4px;\n                  margin-right: -2px;\n                }\n\n                & svg {\n                  font-size: 1rem;  //16px\n                  color: inherit;\n\n                  & path {\n                    fill: ").concat(e.grey600,";\n                  }\n                }\n              }\n            }\n\n            // 대체 border\n            &:hover {\n              border-color: ").concat(e.grey500,";\n              background-color: ").concat(e.grey50,";\n            }\n            &:focus-within {\n              border: 1px solid ").concat(e.primaryColor,";\n\n              & .MuiOutlinedInput-root {\n                min-height: 30px;\n\n                &.MuiInputBase-sizeSmall {\n                  min-height: 22px;\n                }\n              }\n            }\n          }\n\n          .gui-date-range {\n            overflow: hidden;\n\n            .gui-form {\n              margin: 0 !important;\n            }\n\n            & .MuiInputBase-input {\n              text-align: center;\n            }\n\n            & .delimiter { //divider\n              color: ").concat(e.grey600,";\n              cursor: default;\n              z-index: 1;\n\n              & > * {\n                vertical-align: middle;\n              }\n            }\n\n            & .gui-date-single {\n              border: 0;\n              background-color: transparent;\n            }\n\n            & .gui-date-picker:not(:last-of-type) {\n              .MuiPickerStaticWrapper-root {\n                border-right: 1px solid ").concat(e.grey300,";\n              }\n            }\n          }\n\n          &.gui-form-readonly {\n            .gui-date-single,\n            .gui-date-range {\n              background-color: ").concat(e.disabledColor,";\n              border-color: ").concat(e.grey300,";\n\n              &:hover {\n                border-color: ").concat(e.grey400,";\n                .MuiInputBase-input {\n                  background-color: ").concat(e.disabledColor,";\n                }\n              }\n\n              & > p { //divider\n                color: ").concat(e.primaryText,";\n              }\n\n              & Svg { //OpenPicker Icon\n                opacity: 0.5;\n              }\n            }\n          }\n\n          &.gui-form-disabled {\n            .gui-date-single,\n            .gui-date-range {\n              background-color: ").concat(e.disabledColor,";\n              border-color: ").concat(e.grey300,";\n\n              &:hover {\n                border-color: ").concat(e.grey300,";\n              }\n\n              & > p { //divider\n                color: ").concat(e.disabledText,";\n              }\n\n              & Svg { //OpenPicker Icon\n                opacity: 0.5;\n              }\n            }\n          }\n\n          .disabled-static {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background-color: black;\n            opacity: 0.1;\n            cursor: not-allowed;\n            z-index: 1;\n          }\n\n          // error massage\n          .MuiFormHelperText-root {\n            position: absolute;\n            top: -8px;\n            margin: 0 0 0 12px;\n            padding: 0 2px;\n            line-height: 1;\n            background-color: ").concat(e.white,";\n            opacity: 0;\n\n            &.Mui-error {\n              opacity: 1;\n            }\n          }\n        }\n\n        // datePicker 사이즈 정의\n        .GuiCalendar {\n          height: auto;\n\n          & .MuiPaper-root {\n            min-width: auto !important;\n            margin: 2px 0 0;\n\n            & > div > div {\n              width: auto;\n            }\n\n            & .MuiTabs-root {\n              min-height: auto;\n              & .MuiTab-root {\n                min-height: auto;\n                padding: 8px 16px;\n              }\n            }\n\n            .css-epd502 {\n              position: relative;\n              width: auto;\n\n              & .MuiClockPicker-arrowSwitcher {\n                right: 4px;\n                top: 4px;\n\n                & .css-18puooo {\n                  width: 16px;\n                }\n              }\n\n              & .css-fhpqww {\n                margin-top: 24px;\n\n                & .MuiIconButton-root {\n                  bottom: 8px;\n                }\n              }\n            }\n\n            & .MuiDialogActions-root {\n              padding: 0 8px 8px;\n              & .MuiButton-root {\n                padding: 0 8px;\n                text-transform: capitalize;\n              }\n            }\n          }\n        }\n\n        // datePicker 사이즈 정의\n        .MuiPickerStaticWrapper-root {\n          min-width: auto;\n\n          & .MuiPickerStaticWrapper-content {\n            min-width: auto;\n            border-radius: 4px;\n          }\n\n          & .css-epd502 {\n            position: relative;\n            width: auto;\n\n            & .MuiClockPicker-arrowSwitcher {\n              right: 4px;\n              top: 4px;\n\n              & .css-18puooo {\n                width: 16px;\n              }\n            }\n\n            & .css-fhpqww {\n              margin-top: 24px;\n\n              & .MuiIconButton-root {\n                bottom: 8px;\n              }\n            }\n\n            // & .MuiDialogActions-root {\n            //   padding: 0 8px 8px;\n            //   & .MuiButton-root {\n            //     padding: 0 8px;\n            //   }\n            // }\n          }\n\n          & .MuiDialogActions-root {\n            padding: 0 8px 8px;\n            background: ").concat(e.white,";\n            border-radius: 4px;\n\n            & .MuiButton-root {\n              padding: 0 8px;\n              text-transform: capitalize;\n            }\n          }\n\n          & .MuiTabs-root {\n            min-height: auto;\n            & .MuiTab-root {\n              min-height: auto;\n              padding: 8px 16px;\n            }\n          }\n        }\n\n        // datePicker 사이즈 정의\n        .MuiCalendarPicker-root {\n          width: 246px !important;\n          overflow: hidden;\n\n          // .css-1dozdou {\n          //   margin-top: 8px;\n          //   padding: 8px 10px 4px;\n\n          //   .css-100ubp2, .css-l0iinn {\n          //     position: absolute;\n          //     left: 36%;\n\n          //     & .PrivatePickersFadeTransitionGroup-root {\n          //       &:nth-of-type(1) {\n          //         order: 1;\n          //       }\n          //       &:nth-of-type(2) {\n          //         order: 0;\n          //         display: flex;\n          //         &:after {\n          //           content: '년';\n          //           position: relative;\n          //           left: -5px;\n          //         }\n          //       }\n          //     }\n          //     & .MuiIconButton-root {\n          //       order: 1;\n          //       left: -8px;\n          //     }\n          //   }\n          //   .css-k008qs {\n          //     width: 100%;\n          //     justify-content: space-between;\n          //   }\n\n          //   .MuiPickersArrowSwitcher-root {\n          //     width: 100%;\n          //     .MuiPickersArrowSwitcher-spacer {\n          //       flex-grow: 1;\n          //     }\n          //   }\n          // }\n\n          & .MuiCalendarPicker-viewTransitionContainer {\n            & .MuiTypography-root.MuiTypography-caption {\n              width: 28.5px;\n              height: 28.5px;\n            }\n            & .PrivatePickersSlideTransition-root {\n              min-height: 195px;\n\n              & .MuiPickersDay-root {\n                width: 28.5px;\n                height: 28.5px;\n              }\n            }\n          }\n        }\n\n        .MuiClockPicker-root {\n          width: 246px !important;\n          min-height: 268px !important;\n        }\n\n        /* DatePicker Month 재정의 :: start */\n        .MuiCalendarPicker-root {\n          .MuiYearPicker-root {\n            justify-content: space-evenly;\n            max-height: 214px;\n            margin: 0 auto 8px;\n          }\n          .MuiMonthPicker-root {\n            width: 235px;\n            margin: 0 auto 16px;\n            & .PrivatePickersMonth-root {\n              color: unset;\n              background-color: transparent;\n              border: 0;\n              margin: 8px 0;\n              height: 36px;\n              border-radius: 1.125rem;\n              &.Mui-selected {\n                color: #fff;\n                font-weight: 700;\n                font-size: 1rem;\n                background-color: ").concat(e.primaryColor,';\n              }\n              &:not(.Mui-selected):focus, &:not(.Mui-selected):hover {\n                background-color: rgba(0, 0, 0, 0.04);\n              }\n            }\n          }\n        }\n        /* DatePicker Month 재정의 :: end */\n\n        /* react-date-range 재정의 :: start */\n        & .rdrCalendarWrapper {\n          .rdrMonths.rdrMonthsHorizontal {\n            min-height: 265px;\n\n            .rdrMonth:not(:first-of-type)::after {\n              content: "";\n              background: ').concat(e.grey300,";\n            }\n          }\n\n          .rdrMonth {\n            .rdrMonthName {\n              color: ").concat(e.grey800,";\n            }\n          }\n\n          .rdrNextPrevButton {\n            background: ").concat(e.white," !important;\n            &:hover {\n              background: ").concat(e.grey200," !important;\n            }\n          }\n\n          .rdrDayToday .rdrDayNumber span:after {\n            border: ").concat("1px solid "+e.grey500,";\n          }\n\n          .rdrDateDisplayItemActive {\n            border-color: ").concat(e.primaryColor,";\n          }\n\n          .rdrStartEdge, .rdrEndEdge, .rdrInRange {\n            background: ").concat(t.hexToRgbA(e.primaryColor,.85),";\n          }\n\n          .rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{\n            color: ").concat(e.primaryColor," !important;\n          }\n        }\n\n        & .rdrDefinedRangesWrapper {\n          position: absolute;\n          top: 0;\n          right: -1000px;\n          height: 100%;\n\n          // today\n          & .rdrStaticRange:first-of-type {\n            position: absolute;\n            bottom: 8px;\n            right: calc(1000px + 10px);\n            border: 0;\n\n            & > span {\n              padding: 4px 8px;\n              border-radius: 4px;\n              color: ").concat(e.blue,"\n            }\n          }\n        }\n        /* react-date-range 재정의 :: end */\n      ")},MuiAutocomplete:{styleOverrides:{paper:{boxShadow:"0 0 1px 0 rgb(0 0 0 / 31%), 0 4px 8px -2px rgb(0 0 0 / 25%)"},option:{fontSize:"0.875rem",minHeight:"33px !important",display:"block !important",whiteSpace:"nowrap",textOverflow:"ellipsis"}}},MuiToggleButtonGroup:{styleOverrides:{root:{backgroundColor:e.grey200},groupedHorizontal:{":not(:last-of-type)":{borderRight:"1px solid "+e.grey300}},groupedVertical:{":not(:last-of-type)":{borderBottom:"1px solid "+e.grey300}}}},MuiToggleButton:{styleOverrides:{root:{color:e.secondaryText,"&:hover:not(&.Mui-disabled,&.Mui-selected)":{backgroundColor:e.grey300},"&.Mui-selected":{color:e.white},"&.Mui-disabled":{color:e.disabledText,"&:hover":{backgroundColor:e.grey200},"&.Mui-selected":{color:e.white,backgroundColor:e.grey400,"&:hover":{color:e.white,backgroundColor:e.grey400}}}}},variants:[{props:{color:"primary"},style:{"&.Mui-selected":{backgroundColor:e.primaryColor,"&:hover:not(.Mui-disabled)":{backgroundColor:o(e.primaryColor,.15)}}}},{props:{color:"secondary"},style:{"&.Mui-selected":{backgroundColor:e.secondaryColor,"&:hover:not(.Mui-disabled)":{backgroundColor:o(e.secondaryColor,.15)}}}},{props:{color:"standard"},style:{"&.Mui-selected:not(.Mui-disabled)":{color:e.primaryColor}}}]},MuiInputBase:{styleOverrides:{root:{color:e.primaryText,backgroundColor:e.white,".MuiOutlinedInput-notchedOutline":{borderColor:e.textFieldBorder},"&:hover:not(.Mui-disabled,.Mui-focused)":{".MuiOutlinedInput-notchedOutline":{borderColor:e.textFieldHoverBorder}},"&.MuiOutlinedInput-root":{"&.Mui-focused":{".MuiOutlinedInput-notchedOutline":{borderWidth:1},"&.Mui-error":{".MuiOutlinedInput-notchedOutline":{borderColor:e.primaryColor}}},"&.Mui-disabled":{backgroundColor:e.textFieldDisabledBackground,".MuiOutlinedInput-notchedOutline":{borderColor:e.textFieldDisabledBorder},"&:hover:not(.Mui-focused,.Mui-error)":{".MuiOutlinedInput-notchedOutline":{borderColor:e.textFieldDisabledBorder}},"& .MuiButtonBase-root":{pointerEvents:"none"},"& svg > path":{fill:e.disabledText}},"&.Gui-readonly":{backgroundColor:e.textFieldDisabledBackground,".MuiOutlinedInput-notchedOutline":{borderColor:e.textFieldDisabledBorder},"&:hover:not(.Mui-disabled,.Mui-error)":{".MuiOutlinedInput-notchedOutline":{borderColor:e.textFieldDisabledHoverBorder}},".MuiInputBase-input:hover":{backgroundColor:e.textFieldDisabledBackground},".MuiSelect-icon":{color:e.disabledText}}},"&:hover:not(.Gui-readonly,.Mui-disabled,.MuiInputBase-inputMultiline)":{backgroundColor:e.textFieldHoverBackground}}}},MuiSelect:{styleOverrides:{select:{".select-placeholder":{color:e.grey500}}}},MuiDivider:{styleOverrides:{root:{borderColor:e.grey300}}},MuiLink:{styleOverrides:{root:{textDecoration:"none"}}},MuiMenu:{styleOverrides:{root:n({},r(0))}},MuiList:{styleOverrides:{root:n(n({},r(0)),{padding:0})}},MuiMenuItem:{styleOverrides:{root:{fontSize:13,"&:hover":{backgroundColor:"rgba(0,0,0,0.04)"}}}}}}},v=function(o){return o&&(k=S(n(n({},e),o))),k||S(e)};export{v as theme};