carbon-react/esm/components/button/button-types.style.js

A library of reusable React components for easily building user interfaces.

import n from"../icon/icon.style.js";import o from"../loader/loader-square.style.js";function r(r){return`\n  color: ${r};\n  ${n} {\n    color: ${r};\n  }\n  ${o} {\n    background-color: ${r};\n  }\n  `}const a="\n  img, svg {\n    opacity: 0.3;\n  }\n",c=`\n  background: transparent;\n  border-color: var(--colorsActionDisabled500);\n  ${r("var(--colorsActionMajorYin030)")};\n  &:hover {\n    border-color: var(--colorsActionDisabled500);\n    ${r("var(--colorsActionMajorYin030)")};\n  }\n  ${a}\n`,e="\n  border: 2px solid transparent;\n  &:hover {\n    background: linear-gradient(to right, #d6f8df, #d9f2ff, #ede2ff) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;\n  }\n";var i=(n,o,i)=>({primary:`\n    background: var(--colorsActionMajor500);\n    border-color: transparent;\n    ${r("var(--colorsActionMajorYang100)")};\n    &:hover {\n      background: var(--colorsActionMajor600);\n    }\n\n    ${n?`\n          background: var(--colorsActionDisabled500);\n          ${r("var(--colorsActionMajorYin030)")};\n          &:hover {\n            background: var(--colorsActionDisabled500);\n          }\n          ${a}\n        `:""}\n\n    ${o?`\n        background: var(--colorsSemanticNegative500);\n        ${r("var(--colorsSemanticNegativeYang100)")};\n        &:hover {\n          background: var(--colorsSemanticNegative600);\n        }\n\n    ${n?`\n          background: var(--colorsActionDisabled500);\n          ${r("var(--colorsActionMajorYin030)")};\n          &:hover {\n            background: var(--colorsActionDisabled500);\n          }\n          ${a}\n        `:""}`:""}\n  `,secondary:`\n      background: transparent;\n      border-color: var(--colorsActionMajor500);\n      ${r("var(--colorsActionMajor500)")};\n      &:hover {\n        background: var(--colorsActionMajor600);\n        border-color: var(--colorsActionMajorTransparent);\n        ${r("var(--colorsActionMajorYang100)")};\n      }\n\n      ${!i||n&&o?"":`\n          border-color: var(--colorsActionMajorYang100);\n          ${r("var(--colorsActionMajorYang100)")};\n          &:hover {\n            background: var(--colorsActionMajorYang100);\n            border-color: var(--colorsActionMajorYang100);\n            ${r("var(--colorsYin100)")};\n          }\n          `}\n\n      ${o?`\n            border-color: var(--colorsSemanticNegative500);\n            ${r("var(--colorsSemanticNegative500)")}\n            &:hover {\n              background: var(--colorsSemanticNegative600);\n              border-color: var(--colorsSemanticNegativeTransparent);\n              ${r("var(--colorsSemanticNegativeYang100)")};\n            }\n          `:""}\n\n      ${n&&!i?`\n            border-color: var(--colorsActionDisabled500);\n            ${r("var(--colorsActionMajorYin030)")};\n            &:hover {\n              background: transparent;\n              border-color: var(--colorsActionDisabled500);\n              ${r("var(--colorsActionMajorYin030)")};\n            }\n            ${a}\n          `:""}\n\n      ${i?`\n            border-color: var(--colorsActionMajorYang100);\n            ${r("var(--colorsActionMajorYang100)")}\n            &:hover {\n              background: var(--colorsActionMajorYang100);\n              ${r("var(--colorsUtilityYin100)")};\n            }\n\n\n            ${o?`\n                  border-color: var(--colorsSemanticNegative450);\n                  ${r("var(--colorsSemanticNegative450)")}\n                  &:hover {\n                    background: var(--colorsSemanticNegative600);\n                    border-color: var(--colorsSemanticNegativeTransparent);\n                    ${r("var(--colorsSemanticNegativeYang100)")};\n                  }\n                `:""}\n\n            ${n?`\n                  border-color: #4B4B4B;\n                  ${r("#4B4B4B")};\n                  &:hover {\n                    background: transparent;\n                    border-color: #4B4B4B;\n                    ${r("#4B4B4B")};\n\n                  }\n                  ${a}\n                `:""}\n          }\n          `:""}\n  `,tertiary:`\n    background: transparent;\n    border-color: transparent;\n    ${r("var(--colorsActionMajor500)")};\n    &:hover {\n      background: var(--colorsActionMajor600);\n      ${r("var(--colorsActionMajorYang100)")};\n    }\n\n    ${o?`\n          ${r("var(--colorsSemanticNegative500)")};\n          &:hover {\n            background: var(--colorsSemanticNegative600);\n            ${r("var(--colorsSemanticNegativeYang100)")};\n          }\n        `:""}\n\n    ${n?`\n          ${r("var(--colorsActionMajorYin030)")};\n          &:hover {\n            background: var(--colorsActionMajorTransparent);\n            ${r("var(--colorsActionMajorYin030)")};\n          }\n          ${a}\n        `:""}\n  `,darkBackground:`\n    background: var(--colorsActionMajorYang100);\n    border-color: transparent;\n    ${r("var(--colorsActionMajor500)")};\n    &:hover {\n      background: var(--colorsActionMajor600);\n      ${r("var(--colorsActionMajorYang100)")}\n    }\n\n    ${n?`\n          background: var(--colorsActionDisabled500);\n          ${r("var(--colorsActionMajorYin030)")};\n          &:hover {\n            background: var(--colorsActionDisabled500);\n            ${r("var(--colorsActionMajorYin030)")};\n          }\n          ${a}\n        `:""}\n  `,"gradient-grey":`\n    ${n?c:`\n          background: linear-gradient(#F2F5F6, #F2F5F6) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;\n          ${e}\n        `}\n  `,"gradient-white":`\n    ${n?c:`\n          background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;\n          ${e}\n        `}\n  `});export{i as default};