@gsretail.com/gui-core/build/core/Button/GuiIconButton.styled.js

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

import{__makeTemplateObject as n}from"../../node_modules/tslib/tslib.es6.js";import o from"@emotion/styled";import{darken as r,lighten as t}from"@mui/material/styles";import e from"../../assets/theme/basicStyle.js";var i,c="".concat(e.button.size.xTiny,"px"),a="".concat(e.button.size.tiny,"px"),u="".concat(e.button.size.small,"px"),l="".concat(e.button.size.medium,"px"),d="".concat(e.button.size.large,"px"),s=function(s){return o(s)(i||(i=n(["\n\n  width: ",";\n\n  height: ",";\n\n  padding: 2px;\n  font-size:  ",";\n\n  box-shadow: ",";\n  border-radius: 4px;\n\n  color: ",";\n\n  background-color: ",";\n\n  &:hover {\n    background-color:  ",";\n  }\n\n  &.MuiIconButton-contained {\n    &.MuiIconButton-colorPrimary {\n      background-color: ",";\n      &:hover:not(.Mui-disabled) {\n        background-color: ",";\n      }\n    }\n    &.MuiIconButton-colorSecondary {\n      color: ",";\n      background-color: ",";\n      &:hover:not(.Mui-disabled) {\n        background-color: ",";\n      }\n    }\n    &.MuiIconButton-colorError {\n      background-color: ",";\n      &:hover:not(.Mui-disabled) {\n        background-color: ",";\n      }\n    }\n    &.MuiIconButton-colorWarning {\n      background-color: ",";\n      &:hover:not(.Mui-disabled) {\n        background-color: ",";\n      }\n    }\n    &.MuiIconButton-colorSuccess {\n      background-color: ",";\n      &:hover:not(.Mui-disabled) {\n        background-color: ",";\n      }\n    }\n    &.MuiIconButton-colorInfo {\n      background-color: ",";\n      &:hover:not(.Mui-disabled) {\n        background-color: ",";\n      }\n    }\n  }\n\n  &.MuiIconButton-clear {\n    &.MuiIconButton-colorPrimary {\n      &:hover:not(.Mui-disabled) {\n        color: ",";\n      }\n    }\n    &.MuiIconButton-colorSecondary {\n      &:hover:not(.Mui-disabled) {\n        color: ",";\n      }\n    }\n    &.MuiIconButton-colorError {\n      &:hover:not(.Mui-disabled) {\n        color: ",";\n      }\n    }\n    &.MuiIconButton-colorWarning {\n      &:hover:not(.Mui-disabled) {\n        color: ",";\n      }\n    }\n    &.MuiIconButton-colorSuccess {\n      &:hover:not(.Mui-disabled) {\n        color: ",";\n      }\n    }\n    &.MuiIconButton-colorInfo {\n      &:hover:not(.Mui-disabled) {\n        color: ",";\n        }\n      }\n    }\n\n    &.Mui-disabled {\n      &.MuiIconButton-contained {\n        background-color: ",";\n      }\n    }\n\n    border-width: ",";\n    border-style: ",";\n    border-color: ",";\n"],["\n\n  width: ",";\n\n  height: ",";\n\n  padding: 2px;\n  font-size:  ",";\n\n  box-shadow: ",";\n  border-radius: 4px;\n\n  color: ",";\n\n  background-color: ",";\n\n  &:hover {\n    background-color:  ",";\n  }\n\n  &.MuiIconButton-contained {\n    &.MuiIconButton-colorPrimary {\n      background-color: ",";\n      &:hover:not(.Mui-disabled) {\n        background-color: ",";\n      }\n    }\n    &.MuiIconButton-colorSecondary {\n      color: ",";\n      background-color: ",";\n      &:hover:not(.Mui-disabled) {\n        background-color: ",";\n      }\n    }\n    &.MuiIconButton-colorError {\n      background-color: ",";\n      &:hover:not(.Mui-disabled) {\n        background-color: ",";\n      }\n    }\n    &.MuiIconButton-colorWarning {\n      background-color: ",";\n      &:hover:not(.Mui-disabled) {\n        background-color: ",";\n      }\n    }\n    &.MuiIconButton-colorSuccess {\n      background-color: ",";\n      &:hover:not(.Mui-disabled) {\n        background-color: ",";\n      }\n    }\n    &.MuiIconButton-colorInfo {\n      background-color: ",";\n      &:hover:not(.Mui-disabled) {\n        background-color: ",";\n      }\n    }\n  }\n\n  &.MuiIconButton-clear {\n    &.MuiIconButton-colorPrimary {\n      &:hover:not(.Mui-disabled) {\n        color: ",";\n      }\n    }\n    &.MuiIconButton-colorSecondary {\n      &:hover:not(.Mui-disabled) {\n        color: ",";\n      }\n    }\n    &.MuiIconButton-colorError {\n      &:hover:not(.Mui-disabled) {\n        color: ",";\n      }\n    }\n    &.MuiIconButton-colorWarning {\n      &:hover:not(.Mui-disabled) {\n        color: ",";\n      }\n    }\n    &.MuiIconButton-colorSuccess {\n      &:hover:not(.Mui-disabled) {\n        color: ",";\n      }\n    }\n    &.MuiIconButton-colorInfo {\n      &:hover:not(.Mui-disabled) {\n        color: ",";\n        }\n      }\n    }\n\n    &.Mui-disabled {\n      &.MuiIconButton-contained {\n        background-color: ",";\n      }\n    }\n\n    border-width: ",";\n    border-style: ",";\n    border-color: ",";\n"])),(function(n){var o=n.size;return"xTiny"===o?c:"tiny"===o?a:"small"===o?u:"large"===o?d:l}),(function(n){var o=n.size;return"xTiny"===o?c:"tiny"===o?a:"small"===o?u:"large"===o?d:l}),(function(n){var o=n.size;return"clear"===n.variant?"xTiny"===o?e.font.size[14]:"tiny"===o?e.font.size[20]:"small"===o?e.font.size[22]:"medium"===o?e.font.size[24]:"large"===o?e.font.size[28]:e.font.size[24]:"xTiny"===o?e.font.size[14]:"tiny"===o?e.font.size[16]:"small"===o?e.font.size[18]:"medium"===o?e.font.size[20]:"large"===o?e.font.size[24]:e.font.size[20]}),(function(n){var o=n.variant,r=n.theme;return"clear"===o?"none":r.shadows[1]}),(function(n){var o=n.variant,r=n.color,t=n.theme;if("outlined"===o){if("primary"===r)return t.palette.common.black;if("secondary"===r)return t.palette.grey[700]}return"contained"===o?t.palette.common.white:"clear"===o?"primary"===r?t.palette.common.black:"secondary"===r?t.palette.grey[700]:void 0:"secondary"===r?t.palette.common.black:void 0}),(function(n){var o=n.variant,r=n.theme;if("outlined"===o)return r.palette.common.white}),(function(n){var o=n.variant,r=n.theme;return"outlined"===o?r.palette.grey[100]:"clear"===o?"transparent":void 0}),(function(n){return n.theme.palette.primary.main}),(function(n){var o=n.theme;return r(o.palette.primary.main,.1)}),(function(n){return n.theme.palette.common.black}),(function(n){return n.theme.palette.secondary.main}),(function(n){var o=n.theme;return r(o.palette.secondary.main,.02)}),(function(n){return n.theme.palette.error.main}),(function(n){var o=n.theme;return r(o.palette.error.main,.1)}),(function(n){return n.theme.palette.warning.main}),(function(n){var o=n.theme;return r(o.palette.warning.main,.1)}),(function(n){return n.theme.palette.success.main}),(function(n){var o=n.theme;return r(o.palette.success.main,.1)}),(function(n){return n.theme.palette.info.main}),(function(n){var o=n.theme;return r(o.palette.info.main,.1)}),(function(n){var o=n.theme;return t(o.palette.common.black,.2)}),(function(n){var o=n.theme;return r(o.palette.grey[700],.15)}),(function(n){var o=n.theme;return r(o.palette.error.main,.15)}),(function(n){var o=n.theme;return r(o.palette.warning.main,.15)}),(function(n){var o=n.theme;return r(o.palette.success.main,.15)}),(function(n){var o=n.theme;return r(o.palette.info.main,.15)}),(function(n){var o=n.disabled,r=n.theme;return o&&r.palette.grey[200]}),(function(n){var o=n.variant;return"outlined"===o||"contained"===o?"1px":0}),(function(n){var o=n.variant;return"outlined"===o||"contained"===o?"solid":"none"}),(function(n){var o=n.variant,r=n.theme;return"outlined"===o?r.palette.grey[400]:"transparent"}))};export{s as default};