diff --git a/components/core/I18nWidget/I18nWidget.module.css b/components/core/I18nWidget/I18nWidget.module.css index afb5026f4..6c11be041 100644 --- a/components/core/I18nWidget/I18nWidget.module.css +++ b/components/core/I18nWidget/I18nWidget.module.css @@ -3,7 +3,11 @@ } .button { - @apply h-10 px-2 rounded-md border border-accents-2 flex items-center space-x-2 justify-center outline-none focus:outline-none; + @apply h-10 px-2 rounded-md border border-accents-2 flex items-center justify-center; +} + +.button:focus { + @apply outline-none; } .dropdownMenu { @@ -15,9 +19,10 @@ } .item { - @apply flex cursor-pointer px-6 py-3 block hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900 items-center; + @apply flex cursor-pointer px-6 py-3 block transition ease-in-out duration-150 text-primary leading-6 font-medium text-gray-900 items-center; text-transform: capitalize; } -.item.active { +.item:hover { + @apply bg-accents-1; } diff --git a/components/core/Navbar/Navbar.module.css b/components/core/Navbar/Navbar.module.css index 8c14f3253..f24ae8df6 100644 --- a/components/core/Navbar/Navbar.module.css +++ b/components/core/Navbar/Navbar.module.css @@ -1,5 +1,11 @@ .link { - @apply group inline-flex items-center text-base leading-6 font-medium - hover:text-accents-8 focus:outline-none focus:text-accents-8 transition - ease-in-out duration-150 cursor-pointer; + @apply inline-flex items-center text-primary leading-6 font-medium transition ease-in-out duration-150 cursor-pointer; +} + +.link:hover { + @apply text-accents-8; +} + +.link:focus { + @apply outline-none text-accents-8; } diff --git a/components/core/Searchbar/Searchbar.module.css b/components/core/Searchbar/Searchbar.module.css index 28c31b26c..2ed57f2c0 100644 --- a/components/core/Searchbar/Searchbar.module.css +++ b/components/core/Searchbar/Searchbar.module.css @@ -1,6 +1,6 @@ .input { @apply bg-transparent px-3 py-2 appearance-none w-full transition - duration-150 ease-in-out placeholder-accents-5 pr-10; + duration-150 ease-in-out pr-10; min-width: 300px; } diff --git a/components/core/UserNav/DropdownMenu.module.css b/components/core/UserNav/DropdownMenu.module.css index fd6934cf8..429ddebcf 100644 --- a/components/core/UserNav/DropdownMenu.module.css +++ b/components/core/UserNav/DropdownMenu.module.css @@ -4,14 +4,17 @@ @screen lg { @apply absolute border border-accents-1 shadow-lg w-56 h-auto; } - - & .link { - @apply flex cursor-pointer px-6 py-3 block hover:bg-accents-1 transition ease-in-out - duration-150 text-base leading-6 font-medium text-gray-900 items-center; - text-transform: capitalize; - } - - &.off { - @apply hidden; - } +} + +.link { + @apply flex cursor-pointer px-6 py-3 block transition ease-in-out duration-150 text-primary leading-6 font-medium text-gray-900 items-center; + text-transform: capitalize; +} + +.link:hover { + @apply bg-accents-1; +} + +.off { + @apply hidden; } diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css index f96b44935..4f30f5fe4 100644 --- a/components/core/UserNav/UserNav.module.css +++ b/components/core/UserNav/UserNav.module.css @@ -7,7 +7,7 @@ } .item { - @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center outline-none; + @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-primary flex items-center outline-none; &:hover { @apply text-accents-8 transition scale-110 duration-100; @@ -28,5 +28,9 @@ } .avatarButton { - @apply inline-flex justify-center rounded-full outline-none focus:outline-none; + @apply inline-flex justify-center rounded-full; +} + +.avatarButton:focus { + @apply outline-none; } diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index 14b164e23..c0f2356f8 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -113,12 +113,12 @@ } .productPrice { - @apply py-4 px-6 bg-primary text-base font-semibold inline-block text-sm leading-6; + @apply py-4 px-6 bg-primary text-primary font-semibold inline-block text-sm leading-6; letter-spacing: 0.4px; } .wishlistButton { - @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-base font-semibold inline-block text-xs leading-6 cursor-pointer; + @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-primary font-semibold inline-block text-xs leading-6 cursor-pointer; } .imageContainer { diff --git a/components/product/ProductSlider/ProductSlider.module.css b/components/product/ProductSlider/ProductSlider.module.css index d0421e8e5..c07228d0b 100644 --- a/components/product/ProductSlider/ProductSlider.module.css +++ b/components/product/ProductSlider/ProductSlider.module.css @@ -5,7 +5,17 @@ .leftControl, .rightControl { - @apply absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full focus:outline-none focus:shadow-outline-blue hover:bg-hover-2; + @apply absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full; +} + +.leftControl:hover, +.rightControl:hover { + @apply bg-hover-2; +} + +.leftControl:hover, +.rightControl:hover { + @apply outline-none shadow-outline-blue; } .leftControl { diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css index a737a7d64..ddcb42667 100644 --- a/components/product/ProductView/ProductView.module.css +++ b/components/product/ProductView/ProductView.module.css @@ -83,7 +83,7 @@ } .wishlistButton { - @apply absolute z-30 top-6 right-0 bg-primary text-base w-10 h-10 flex items-center justify-center font-semibold leading-6 cursor-pointer; + @apply absolute z-30 top-6 right-0 bg-primary text-primary w-10 h-10 flex items-center justify-center font-semibold leading-6 cursor-pointer; @screen lg { @apply right-12 text-white bg-violet; diff --git a/components/ui/Button/Button.module.css b/components/ui/Button/Button.module.css index ffdbb7cae..a08549ac6 100644 --- a/components/ui/Button/Button.module.css +++ b/components/ui/Button/Button.module.css @@ -1,16 +1,13 @@ .root { - @apply text-accents-1 cursor-pointer inline-flex px-10 rounded-sm leading-6 - bg-secondary transition ease-in-out duration-150 shadow-sm font-semibold - text-center justify-center uppercase py-4 uppercase text-center focus:outline-none - border border-transparent items-center; + @apply text-accents-1 cursor-pointer inline-flex px-10 rounded-sm leading-6 bg-secondary transition ease-in-out duration-150 shadow-sm font-semibold text-center justify-center uppercase py-4 uppercase text-center border border-transparent items-center; } .root:hover { - @apply bg-accents-0 text-base border border-secondary; + @apply bg-accents-0 text-primary border border-secondary; } .root:focus { - @apply shadow-outline; + @apply shadow-outline outline-none; } .root[data-active] { diff --git a/components/ui/Input/Input.module.css b/components/ui/Input/Input.module.css index ccaf833db..9ace85277 100644 --- a/components/ui/Input/Input.module.css +++ b/components/ui/Input/Input.module.css @@ -1,5 +1,7 @@ .root { - @apply focus:outline-none bg-primary focus:shadow-outline-gray py-2 - px-6 w-full appearance-none transition duration-150 ease-in-out - placeholder-accents-5 pr-10 border border-accents-3 text-accents-6; + @apply bg-primary py-2 px-6 w-full appearance-none transition duration-150 ease-in-out pr-10 border border-accents-3 text-accents-6; +} + +.root:focus { + @apply outline-none shadow-outline-gray; } diff --git a/components/ui/Text/Text.module.css b/components/ui/Text/Text.module.css index 61b2d6955..bbdfb6a05 100644 --- a/components/ui/Text/Text.module.css +++ b/components/ui/Text/Text.module.css @@ -7,9 +7,9 @@ } .pageHeading { - @apply pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide; + @apply pt-1 pb-4 text-2xl leading-7 font-bold tracking-wide; } .sectionHeading { - @apply pt-1 pb-2 text-base font-semibold leading-7 text-base tracking-wider uppercase border-b border-accents-2 mb-3; + @apply pt-1 pb-2 font-semibold leading-7 tracking-wider uppercase border-b border-accents-2 mb-3; } diff --git a/tailwind.config.js b/tailwind.config.js index e6b14b11e..51b5f003c 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,8 +1,4 @@ module.exports = { - future: { - removeDeprecatedGapUtilities: true, - purgeLayersByDefault: true, - }, purge: { content: [ './pages/**/*.{js,ts,jsx,tsx}', @@ -54,9 +50,5 @@ module.exports = { }, }, }, - variants: {}, plugins: [require('@tailwindcss/ui')], - experimental: { - applyComplexClasses: true, - }, }