@bothub-chat/ui/dist/components/typography/styled.js

Bothub UI Components

import{styled as n,css as e}from"styled-components";const t=n=>e`
  ${({theme:e})=>{switch(n){case"h1":return`\n          font-weight: 700;\n          font-size: 46px;\n          line-height: 60px;\n          --skeleton-height: 60px;\n          @media (max-width: ${e.tablet.maxWidth}) {\n            font-size: 40px;\n            line-height: 52px;\n            --skeleton-height: 52px;\n          }\n          @media (max-width: ${e.mobile.maxWidth}) {\n            font-size: 28px;\n            line-height: 36px;\n            --skeleton-height: 36px;\n          }\n        `;case"h2":return`\n          font-weight: 600;\n          font-size: 34px;\n          line-height: 44px;\n          --skeleton-height: 44px;\n          @media (max-width: ${e.tablet.maxWidth}) {\n            font-size: 30px;\n            line-height: 40px;\n            --skeleton-height: 40px;\n          }\n          @media (max-width: ${e.mobile.maxWidth}) {\n            font-size: 24px;\n            line-height: 32px;\n            --skeleton-height: 32px;\n          }\n        `;case"h3":return`\n          font-weight: 600;\n          font-size: 30px;\n          line-height: 40px;\n          --skeleton-height: 40px;\n          @media (max-width: ${e.mobile.maxWidth}) {\n            font-size: 22px;\n            line-height: 30px;\n            --skeleton-height: 30px;\n          }\n        `;case"h4":case"body-xxl-semibold":return`\n          font-weight: 600;\n          font-size: 26px;\n          line-height: 34px;\n          --skeleton-height: 34px;\n          @media (max-width: ${e.tablet.maxWidth}) {\n            font-size: 22px;\n            line-height: 30px;\n            --skeleton-height: 30px;\n          }\n          @media (max-width: ${e.mobile.maxWidth}) {\n            font-size: 20px;\n            line-height: 26px;\n            --skeleton-height: 26px;\n          }\n        `;case"h5":return`\n          font-weight: 600;\n          font-size: 22px;\n          line-height: 30px;\n          --skeleton-height: 30px;\n          @media (max-width: ${e.tablet.maxWidth}) {\n            font-size: 20px;\n            line-height: 26px;\n            --skeleton-height: 26px;\n          }\n          @media (max-width: ${e.mobile.maxWidth}) {\n            font-size: 18px;\n            line-height: 24px;\n            --skeleton-height: 24px;\n          }\n        `;case"h6":return"\n          font-weight: 600;\n          font-size: 18px;\n          line-height: 24px;\n          --skeleton-height: 24px;\n        ";case"body-xxxl-regular":return`\n          font-size: 46px;\n          font-weight: 400;\n          line-height: 60px;\n          --skeleton-height: 60px;\n          @media (max-width: ${e.tablet.maxWidth}) {\n            font-size: 30px;\n            line-height: 40px;\n            --skeleton-height: 40px;\n          }\n          @media (max-width: ${e.mobile.maxWidth}) {\n            font-size: 24px;\n            line-height: 30px;\n            --skeleton-height: 30px;\n          }\n        `;case"banner-h1-bold":return`\n          font-size: 128px;\n          font-weight: 700;\n          line-height: 110px;\n          --skeleton-height: 110px;\n          @media (max-width: ${e.tablet.maxWidth}) {\n            font-size: 76px;\n            line-height: 70px;\n            --skeleton-height: 70px;\n          }\n          @media (max-width: ${e.mobile.maxWidth}) {\n            font-size: 36px;\n            line-height: 40px;\n            --skeleton-height: 40px;\n          }\n        `;case"banner-h3-black":return`\n          font-weight: 900;\n          font-size: 40px;\n          line-height: 40px;\n          --skeleton-height: 40px;\n          @media (max-width: ${e.tablet.maxWidth}) {\n            font-size: 24px;\n            line-height: 24px;\n            --skeleton-height: 24px;\n          }\n          @media (max-width: ${e.mobile.maxWidth}) {\n            font-size: 20px;\n            line-height: 24px;\n            --skeleton-height: 24px;\n          }\n        `;case"body-h1-regular":return`\n          font-weight: 400;\n          font-size: 46px;\n          line-height: 60px;\n          --skeleton-height: 60px;\n          @media (max-width: ${e.tablet.maxWidth}) {\n            font-size: 40px;\n            line-height: 52px;\n            --skeleton-height: 52px;\n          }\n          @media (max-width: ${e.mobile.maxWidth}) {\n            font-size: 28px;\n            line-height: 36px;\n            --skeleton-height: 36px;\n          }\n          `;case"body-xxl-regular":return`\n          font-weight: 400;\n          font-size: 26px;\n          line-height: 34px;\n          --skeleton-height: 34px;\n          @media (max-width: ${e.tablet.maxWidth}) {\n            font-size: 22px;\n            line-height: 30px;\n            --skeleton-height: 30px;\n          }\n          @media (max-width: ${e.mobile.maxWidth}) {\n            font-size: 20px;\n            line-height: 26px;\n            --skeleton-height: 26px;\n          }\n        `;case"body-xl-semibold":return`\n          font-weight: 600;\n          font-size: 22px;\n          line-height: 29px;\n          --skeleton-height: 29px;\n          @media (max-width: ${e.tablet.maxWidth}) {\n            font-size: 20px;\n            line-height: 26px;\n            --skeleton-height: 26px;\n          }\n          @media (max-width: ${e.mobile.maxWidth}) {\n            font-size: 18px;\n            line-height: 24px;\n            --skeleton-height: 24px;\n          }\n        `;case"body-xl-medium":return`\n          font-weight: 500;\n          font-size: 22px;\n          line-height: 29px;\n          --skeleton-height: 29px;\n          @media (max-width: ${e.tablet.maxWidth}) {\n            font-size: 20px;\n            line-height: 26px;\n            --skeleton-height: 26px;\n          }\n          @media (max-width: ${e.mobile.maxWidth}) {\n            font-size: 18px;\n            line-height: 24px;\n            --skeleton-height: 24px;\n          }\n        `;case"body-m-semibold":return`\n          font-weight: 600;\n          font-size: 16px;\n          line-height: 22px;\n          --skeleton-height: 22px;\n          @media (max-width: ${e.tablet.maxWidth}) {\n            font-size: 14px;\n            line-height: 18px;\n            --skeleton-height: 18px;\n          }\n        `;case"body-m-medium":return`\n          font-weight: 500;\n          font-size: 16px;\n          line-height: 22px;\n          --skeleton-height: 22px;\n          @media (max-width: ${e.tablet.maxWidth}) {\n            font-size: 14px;\n            line-height: 18px;\n            --skeleton-height: 18px;\n          }\n        `;case"body-s-medium":return`\n          font-weight: 500;\n          font-size: 14px;\n          line-height: 18px;\n          --skeleton-height: 18px;\n          @media (max-width: ${e.tablet.maxWidth}) {\n            font-size: 12px;\n            line-height: 16px;\n            --skeleton-height: 16px;\n          }\n        `;case"body-s-semibold":return`\n          font-weight: 600;\n          font-size: 14px;\n          line-height: 18px;\n          --skeleton-height: 18px;\n          @media (max-width: ${e.tablet.maxWidth}) {\n            font-size: 12px;\n            line-height: 16px;\n            --skeleton-height: 16px;\n          }\n        `;case"body-s-regular":return`\n          font-weight: 400;\n          font-size: 14px;\n          line-height: 18px;\n          --skeleton-height: 18px;\n          @media (max-width: ${e.tablet.maxWidth}) {\n              font-size: 12px;\n              line-height: 16px;\n              --skeleton-height: 16px;\n          }\n        `;case"body-xs-regular":return`\n          font-weight: 400;\n          font-size: 12px;\n          line-height: 16px;\n          --skeleton-height: 16px;\n          @media (max-width: ${e.tablet.maxWidth}) {\n            font-size: 10px;\n            line-height: 16px;\n            --skeleton-height: 16px;\n          }\n        `;case"body-xs-medium":return`\n          font-weight: 500;\n          font-size: 12px;\n          line-height: 16px;\n          --skeleton-height: 16px;\n          @media (max-width: ${e.tablet.maxWidth}) {\n            font-size: 10px;\n            line-height: 16px;\n            --skeleton-height: 16px;\n          }\n          `;case"body-m-regular":return`\n          font-weight: 400;\n          font-size: 16px;\n          line-height: 22px;\n          --skeleton-height: 22px;\n          @media (max-width: ${e.tablet.maxWidth}) {\n            font-size: 14px;\n            line-height: 18px;\n            --skeleton-height: 18px;\n          }\n        `;case"body-l-regular":return`\n          font-weight: 400;\n          font-size: 18px;\n          line-height: 23.4px;\n          --skeleton-height: 24px;\n          @media (max-width: ${e.mobile.maxWidth}) {\n            font-size: 16px;\n            line-height: 22px;\n            --skeleton-height: 22px;\n          }\n        `;case"body-l-semibold":return`\n          font-weight: 600;\n          font-size: 18px;\n          line-height: 24px;\n          --skeleton-height: 24px;\n          @media (max-width: ${e.mobile.maxWidth}) {\n            font-size: 16px;\n            line-height: 22px;\n            --skeleton-height: 22px;\n          }\n        `;case"body-l-medium":return`\n          font-weight: 500;\n          font-size: 18px;\n          line-height: 24px;\n          --skeleton-height: 24px;\n          @media (max-width: ${e.mobile.maxWidth}) {\n              font-size: 16px;\n              line-height: 22px;\n              --skeleton-height: 22px;\n          }\n        `;case"body-l-medium-italic":return`\n          font-weight: 500;\n          font-style: italic;\n          font-size: 18px;\n          line-height: 24px;\n          --skeleton-height: 24px;\n          @media (max-width: ${e.mobile.maxWidth}) {\n              font-size: 16px;\n              line-height: 22px;\n              --skeleton-height: 22px;\n          }\n      `;case"button-sm":return"\n          font-weight: 500;\n          font-size: 15px;\n          line-height: 20px;\n          --skeleton-height: 20px;\n        ";case"button-md":return"\n          font-weight: 500;\n          font-size: 18px;\n          line-height: 24px;\n          --skeleton-height: 24px;\n        ";case"input-md":return"\n          font-weight: 400;\n          font-size: 16px;\n          line-height: 22px;\n          --skeleton-height: 22px;\n        ";case"input-sm":return"\n          font-weight: 400;\n          font-size: 14px;\n          line-height: 18px;\n          --skeleton-height: 18px;\n        ";case"body-xl-regular":return`\n          font-size: 24px;\n          font-weight: 400;\n          line-height: 31.2px;\n          --skeleton-height: 31.2px;\n          @media (max-width: ${e.tablet.maxWidth}) {\n            font-size: 22px;\n            line-height: 30px;\n            --skeleton-height: 30px;\n          }\n          @media (max-width: ${e.mobile.maxWidth}) {\n            font-size: 18px;\n            line-height: 24px;\n            --skeleton-height: 24px;\n          }\n        `;default:return""}}}
`,i=n.span.withConfig({displayName:"styled__TypographyStyled",componentId:"sc-6o5m6z-0"})(["margin:0px;color:",";font-weight:normal;text-decoration:none;text-align:",";--skeleton-width:200px;"," ",""],(({theme:n})=>"custom"===n.scheme?n.colors.custom.interface.text:n.colors.base.white),(({$align:n})=>n),(({$fullWidth:n})=>n&&"\n    width: 100%;\n  "),(({$variant:n})=>t(n)));export{i as TypographyStyled,t as getTypographyStyles};