@bobbykim/manguito-theme 0.4.0 → 0.5.0

package/index.ts

@@ -9,7 +9,10 @@ import type { ClassType, InputType } from './theme/index.js'
 import DropdownContainer from './lib/dropdown/DropdownContainer.vue'
 import DropdownContent from './lib/dropdown/DropdownContent.vue'
 import Collapse from './lib/collapse/Collapse.vue'
-import type { CollapseEvent } from './lib/collapse/index.types'
+import Sidebar from './lib/sidebar/Sidebar.vue'
+import Modal from './lib/modal/Modal.vue'
+
+import HamburgerMenu from './lib/nav/HamburgerMenu.vue'
 
 const generateClass = (type: ClassType, value: InputType): string => {
   const mclGenerate = new GenerateMCLClass(type, value)
@@ -31,5 +34,14 @@ const generateClass = (type: ClassType, value: InputType): string => {
 
 export default generateClass
 
-export { DropdownContainer, DropdownContent, Collapse, CollapseEvent }
+export {
+  DropdownContainer,
+  DropdownContent,
+  Collapse,
+  HamburgerMenu,
+  Sidebar,
+  Modal,
+}
 export * from './lib/directives'
+export * from './theme/theme.types'
+export * from './lib/collapse/index.types'

package/lib/collapse/Collapse.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
+import { ref, watch, Transition } from 'vue'
 import type { CollapseEvent } from './index.types'
 const props = withDefaults(
   defineProps<{
@@ -15,43 +15,42 @@ const props = withDefaults(
 )
 const emit = defineEmits(['toggle'])
 const toggle = ref<boolean>(props.visible)
-const contentRef = ref<HTMLAreaElement>()
-const slotHeight = ref<number>()
 
 const handleToggleEvent = (e: Event): void => {
   toggle.value = !toggle.value
   emit('toggle', { ...e, visible: toggle.value } as CollapseEvent)
 }
-const initObserver = (): ResizeObserver => {
-  const observer = new ResizeObserver(() => {
-    if (contentRef.value) {
-      slotHeight.value = contentRef.value.scrollHeight
-      return
-    }
-    slotHeight.value = 0
-  })
-  return observer
+
+/**
+ * @TransitionFunctions
+ * @param {HTMLElement} el - passed any since transition handlers don't accept HTMLElement (accepts Element)
+ */
+const onEnter = (el: any) => {
+  el.style.height = 'auto'
+  el.style.opacity = '0'
+  const endWidth = getComputedStyle(el).height
+  el.style.height = '0px'
+  el.offsetHeight // force repaint
+  el.style.height = endWidth
+  el.style.opacity = '1'
 }
-const slotHeightVal = computed(() => {
-  return {
-    height: contentRef.value && toggle.value ? slotHeight.value + 'px' : '0px',
-  }
-})
+const onAfterEnter = (el: any) => {
+  el.style.height = 'auto'
+  el.style.opacity = '1'
+}
+const onLeave = (el: any) => {
+  el.style.height = getComputedStyle(el).height
+  el.offsetHeight // force repaint
+  el.style.height = '0px'
+  el.style.opacity = '0'
+}
+
 watch(
   () => props.visible,
   (newValue) => {
     toggle.value = newValue
   }
 )
-// lifecycle hooks
-onMounted(() => {
-  if (typeof window !== undefined) {
-    initObserver().observe(contentRef.value as Element)
-  }
-})
-onBeforeUnmount(() => {
-  initObserver().disconnect()
-})
 </script>
 
 <template>
@@ -63,23 +62,28 @@ onBeforeUnmount(() => {
       :accordion="accordion"
       :visible="toggle"
     ></button>
-    <div
-      class="overflow-hidden transition-[height] duration-500"
-      :style="slotHeightVal"
-      :class="[toggle ? 'ease-in' : 'ease-out']"
+    <transition
+      name="collapse"
+      tag="div"
+      @enter="onEnter"
+      @after-enter="onAfterEnter"
+      @leave="onLeave"
+      class="overflow-hidden"
     >
-      <div
-        ref="contentRef"
-        class="transition-opacity duration-500"
-        :class="[
-          toggle ? 'opacity-100 ease-in' : 'opacity-0 ease-out',
-          className,
-        ]"
-      >
-        <slot />
+      <div v-show="toggle">
+        <div :class="[className]">
+          <slot />
+        </div>
       </div>
-    </div>
+    </transition>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped lang="scss">
+.collapse-enter-active,
+.collapse-leave-active {
+  transition-property: height, opacity;
+  transition-duration: 500ms;
+  transition-timing-function: ease;
+}
+</style>

package/lib/directives/index.ts

@@ -14,6 +14,29 @@ export const vClickOutside: Directive = {
   },
 }
 
+export const vToggle: Directive = {
+  mounted(el, binding) {
+    el.__ClickToggleHandler = (e: Event): void => {
+      const eTarget = e.target as HTMLElement
+      let target: HTMLElement
+      if (eTarget.tagName === 'A') {
+        const targetId = eTarget.getAttribute('href')
+        const formattedTargetId =
+          targetId?.charAt(0) === '#' ? targetId.substring(1) : targetId
+        target = document.getElementById(formattedTargetId as string)!
+      } else {
+        target = document.getElementById(binding.arg as string)!
+      }
+      target.click()
+      return
+    }
+    el.addEventListener('click', el.__ClickToggleHandler)
+  },
+  unmounted(el) {
+    el.removeEventListener('click', el.__ClickToggleHandler)
+  },
+}
+
 export const vCollapse: Directive = {
   mounted(el, binding) {
     el.__HandleToggler = (event: Event): void => {
@@ -23,9 +46,7 @@ export const vCollapse: Directive = {
         const targetId = eTarget.getAttribute('href')
         const formattedTargetId =
           targetId?.charAt(0) === '#' ? targetId.substring(1) : targetId
-        target = document.getElementById(
-          formattedTargetId as string
-        ) as HTMLElement
+        target = document.getElementById(formattedTargetId as string)!
       } else {
         target = document.getElementById(binding.arg as string) as HTMLElement
       }

package/lib/modal/Modal.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { ref, computed, watch, Transition } from 'vue'
+import generateClass, {
+  ColorPalette,
+  vClickOutside,
+  VerticalAlignment,
+} from '../../'
+
+const props = withDefaults(
+  defineProps<{
+    modalId: string
+    title?: string
+    titleColor?: ColorPalette
+    className?: string
+    visible?: boolean
+    noBackdrop?: boolean
+    noHeader?: boolean
+    color?: ColorPalette
+    backdropColor?: ColorPalette
+    placement?: VerticalAlignment
+  }>(),
+  {
+    titleColor: 'dark-3',
+    className: '',
+    visible: false,
+    noBackdrop: false,
+    noHeader: false,
+    color: 'light-1',
+    backdropColor: 'dark-4',
+    placement: 'center',
+  }
+)
+
+const emit = defineEmits(['toggle', 'close'])
+const toggle = ref<boolean>(props.visible)
+const toggleComplete = ref<boolean>(false)
+
+const handleToggleEvent = (e: Event): void => {
+  toggle.value = !toggle.value
+  emit('toggle', e)
+}
+const openModal = (): void => {
+  toggle.value = true
+}
+const closeModal = (e: Event): void => {
+  if (toggleComplete.value === true) {
+    toggle.value = false
+    emit('close', e)
+  }
+}
+const handlePlacementVar = computed(() => {
+  let placementVariable: number
+  if (props.placement === 'top') {
+    placementVariable = 25
+  } else if (props.placement === 'bottom') {
+    placementVariable = 75
+  } else {
+    placementVariable = 50
+  }
+  return { '--vertical-placement': placementVariable + '%' }
+})
+
+/**
+ * @TransitionFunctions
+ * Handle toggleComplete value after completion of animation
+ */
+const onAfterEnter = () => {
+  toggleComplete.value = true
+}
+const onAfterLeave = () => {
+  toggleComplete.value = false
+}
+watch(
+  () => props.visible,
+  (newValue) => {
+    toggle.value = newValue
+  }
+)
+defineExpose({
+  toggle: handleToggleEvent,
+  close: closeModal,
+  open: openModal,
+})
+</script>
+
+<template>
+  <div :style="handlePlacementVar">
+    <button :id="modalId" @click="handleToggleEvent" class="hidden"></button>
+    <Transition name="fade" appear tag="div" v-if="!noBackdrop">
+      <section
+        v-if="toggle"
+        @click="closeModal"
+        class="fixed inset-0 overflow-y-auto bg-opacity-70 backdrop-blur z-[100]"
+        :class="generateClass('BGCOLOR', backdropColor)"
+      ></section>
+    </Transition>
+    <Transition
+      name="slide-down"
+      tag="div"
+      @after-enter="onAfterEnter"
+      @after-leave="onAfterLeave"
+      appear
+    >
+      <div
+        v-if="toggle"
+        class="vertical-placement fixed w-full max-w-md z-[110] px-xs"
+      >
+        <div
+          v-click-outside="closeModal"
+          :class="[generateClass('BGCOLOR', color), className]"
+          class="relative overscroll-contain overflow-y-scroll max-h-[80vh] md:max-h-[60vh]"
+        >
+          <div v-if="!noHeader" class="sticky top-0">
+            <slot name="header" :close="closeModal" :status="toggle">
+              <div
+                class="flex justify-between items-center p-xs border-b-2"
+                :class="generateClass('BGCOLOR', color)"
+              >
+                <h3
+                  v-if="title"
+                  class="h3-md"
+                  :class="generateClass('TEXTCOLOR', titleColor)"
+                >
+                  {{ title }}
+                </h3>
+                <button @click="closeModal">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    height="1em"
+                    viewBox="0 0 384 512"
+                    class="hover:opacity-75 focus:opacity-75 transition-opacity duration-300 ease-in h-sm"
+                    :class="[generateClass('SVGFILL', titleColor)]"
+                  >
+                    <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+                    <path
+                      d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </slot>
+          </div>
+          <slot name="body" :close="closeModal" :status="toggle" />
+          <div class="sticky bottom-0">
+            <slot name="footer" :close="closeModal" :status="toggle" />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.vertical-placement {
+  top: var(--vertical-placement);
+  left: 50%;
+  transform: translateY(calc(-1 * var(--vertical-placement))) translateX(-50%);
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition-property: opacity;
+  transition-duration: 300ms;
+  transition-timing-function: linear;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.slide-down-enter-active {
+  animation: slide-down 300ms ease;
+}
+.slide-down-leave-active {
+  animation: slide-down reverse 300ms ease;
+}
+
+@keyframes slide-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-100%) translateX(-50%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(calc(-1 * var(--vertical-placement))) translateX(-50%);
+  }
+}
+</style>

package/lib/nav/HamburgerMenu.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ColorPalette } from '@bobbykim/manguito-theme'
+import generateClass from '../../index'
+
+const props = withDefaults(
+  defineProps<{
+    color?: ColorPalette
+    displayBorder?: boolean
+    toggle: boolean
+    navColor: ColorPalette
+  }>(),
+  {
+    color: 'dark-2',
+    displayBorder: true,
+  }
+)
+
+const emit = defineEmits(['hbg-click'])
+
+const handleButtonToggle = (e: Event): void => {
+  emit('hbg-click', e)
+}
+
+const hamburgetButtonState = computed({
+  get() {
+    return props.toggle
+  },
+  set(value) {
+    return value
+  },
+})
+
+const getBorderClass = (
+  bColor: ColorPalette,
+  border: boolean,
+  nColor: ColorPalette
+): string => {
+  /**
+   * @bColor - color
+   * @border - displayBorder
+   * @nColor - navColor
+   */
+
+  const classArray: string[] = [
+    generateClass('RINGCOLOR', bColor),
+    generateClass('OFFSETRING', nColor),
+  ]
+
+  if (border) {
+    classArray.push(generateClass('BORDER', bColor))
+    classArray.push('border')
+  }
+  return classArray.join(' ')
+}
+
+const getHamburgerButtonClass = (color: ColorPalette): string => {
+  /**
+   * @color - color
+   */
+  const classArray: string[] = [
+    generateClass('BGCOLOR', color),
+    generateClass('BEFOREBG', color),
+    generateClass('AFTERBG', color),
+  ]
+
+  return classArray.join(' ')
+}
+</script>
+
+<template>
+  <button
+    class="p-3xs rounded-md aspect-square outline-none focus:ring-4 ring-offset-2 transition-all duration-300 ease-linear hover:opacity-70 focus:opacity-70 hamburger__button"
+    :class="getBorderClass(color, displayBorder, navColor)"
+    @click="handleButtonToggle"
+  >
+    <input
+      type="checkbox"
+      v-model="hamburgetButtonState"
+      class="hidden hamburger__checkbox"
+    />
+    <div
+      class="relative h-[3px] w-sm hamburger__icon before:w-sm after:w-sm before:h-[3px] after:h-[3px] transition-all duration-300 ease-linear"
+      :class="getHamburgerButtonClass(color)"
+    ></div>
+  </button>
+</template>
+
+<style lang="scss" scoped>
+.hamburger__icon {
+  &::before,
+  &::after {
+    position: absolute;
+    left: 0;
+    transition: all 0.3s linear;
+  }
+  &::before {
+    top: -0.5rem;
+  }
+  &::after {
+    top: 0.5rem;
+  }
+}
+.hamburger__button {
+  &:focus .hamburger__icon,
+  &:hover .hamburger__icon {
+    scale: 1.05;
+  }
+}
+.hamburger__checkbox:checked + .hamburger__icon {
+  background-color: transparent;
+}
+.hamburger__checkbox:checked + .hamburger__icon::before {
+  top: 0;
+  transform: rotate(135deg);
+}
+.hamburger__checkbox:checked + .hamburger__icon::after {
+  top: 0;
+  transform: rotate(-135deg);
+}
+</style>

package/lib/sidebar/Sidebar.vue

@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import { ref, computed, watch, Transition } from 'vue'
+import generateClass, { ColorPalette, vClickOutside, DirectionX } from '../../'
+
+const props = withDefaults(
+  defineProps<{
+    sidebarId: string
+    title?: string
+    titleColor?: ColorPalette
+    className?: string
+    visible?: boolean
+    noBackdrop?: boolean
+    noHeader?: boolean
+    color?: ColorPalette
+    backdropColor?: ColorPalette
+    placement?: DirectionX
+    width?: string | number
+  }>(),
+  {
+    titleColor: 'dark-3',
+    className: '',
+    visible: false,
+    noBackdrop: false,
+    noHeader: false,
+    color: 'light-1',
+    backdropColor: 'dark-4',
+    placement: 'left',
+    width: 300,
+  }
+)
+
+const emit = defineEmits(['toggle', 'close'])
+const toggle = ref<boolean>(props.visible)
+const toggleComplete = ref<boolean>(false)
+const headerRef = ref<HTMLElement>()
+const footerRef = ref<HTMLElement>()
+
+const handleToggleEvent = (e: Event): void => {
+  toggle.value = !toggle.value
+  emit('toggle', e)
+}
+const openSidebar = (): void => {
+  toggle.value = true
+}
+const closeSidebar = (e: Event): void => {
+  if (toggleComplete.value === true) {
+    toggle.value = false
+    emit('close', e)
+  }
+}
+const handleStyleVariables = computed(() => {
+  return {
+    '--sidebar-width': `${props.width}px`,
+    '--header-height':
+      headerRef.value && toggle.value
+        ? headerRef.value.scrollHeight + 'px'
+        : '0px',
+    '--footer-height':
+      footerRef.value && toggle.value
+        ? footerRef.value.scrollHeight + 'px'
+        : '0px',
+  }
+})
+const sidebarClass = computed(() => {
+  return props.placement === 'left' ? 'sidebar-left' : 'sidebar-right'
+})
+
+/**
+ * @TransitionFunctions
+ * Handle toggleComplete value after completion of animation
+ */
+const onAfterEnter = () => {
+  toggleComplete.value = true
+}
+const onAfterLeave = () => {
+  toggleComplete.value = false
+}
+watch(
+  () => props.visible,
+  (newValue) => {
+    toggle.value = newValue
+  }
+)
+defineExpose({
+  toggle: handleToggleEvent,
+  open: openSidebar,
+  close: closeSidebar,
+})
+</script>
+
+<template>
+  <div :style="handleStyleVariables">
+    <button :id="sidebarId" @click="handleToggleEvent" class="hidden"></button>
+    <Transition name="fade" appear tag="div" v-if="!noBackdrop">
+      <section
+        v-if="toggle"
+        @click="closeSidebar"
+        class="fixed inset-0 overflow-y-auto bg-opacity-70 backdrop-blur z-[100]"
+        :class="generateClass('BGCOLOR', backdropColor)"
+      ></section>
+    </Transition>
+    <Transition
+      :name="sidebarClass"
+      @after-enter="onAfterEnter"
+      @after-leave="onAfterLeave"
+      appear
+    >
+      <div
+        v-if="toggle"
+        v-click-outside="closeSidebar"
+        class="sidebar-body fixed h-full overflow-hidden inset-y-0 shadow z-[110]"
+        :class="[placement === 'left' ? 'left-0' : 'right-0']"
+      >
+        <div
+          class="relative h-full overscroll-contain overflow-y-scroll"
+          :class="[generateClass('BGCOLOR', color), className]"
+        >
+          <div v-if="!noHeader" class="sticky top-0" ref="headerRef">
+            <slot name="header" :close="closeSidebar" :status="toggle">
+              <div
+                class="flex justify-between items-center p-xs"
+                :class="generateClass('BGCOLOR', color)"
+              >
+                <h3
+                  v-if="title"
+                  class="h3-md"
+                  :class="generateClass('TEXTCOLOR', titleColor)"
+                >
+                  {{ title }}
+                </h3>
+                <button @click="closeSidebar">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    height="1em"
+                    viewBox="0 0 384 512"
+                    class="hover:opacity-75 focus:opacity-75 transition-opacity duration-300 ease-in h-sm"
+                    :class="[generateClass('SVGFILL', titleColor)]"
+                  >
+                    <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+                    <path
+                      d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </slot>
+          </div>
+
+          <div class="sidebar-body-height">
+            <slot name="body" :close="closeSidebar" :status="toggle" />
+          </div>
+
+          <div class="sticky bottom-0" ref="footerRef">
+            <slot name="footer" :close="closeSidebar" :status="toggle" />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.sidebar-body {
+  width: 100%;
+}
+.sidebar-body-height {
+  min-height: calc(100vh - var(--header-height) - var(--footer-height));
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition-property: opacity;
+  transition-duration: 300ms;
+  transition-timing-function: linear;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.sidebar-left-enter-active,
+.sidebar-left-leave-active,
+.sidebar-right-enter-active,
+.sidebar-right-leave-active {
+  transition-property: transform, opacity;
+  transition-duration: 300ms;
+  transition-timing-function: linear;
+}
+
+.sidebar-left-enter-from,
+.sidebar-left-leave-to {
+  transform: translateX(-100%);
+}
+.sidebar-right-enter-from,
+.sidebar-right-leave-to {
+  transform: translateX(100%);
+}
+
+@media screen and (min-width: 768px) {
+  .sidebar-body {
+    width: var(--sidebar-width);
+  }
+  .sidebar-left-enter-from,
+  .sidebar-left-leave-to {
+    transform: translateX(calc(-1 * var(--sidebar-width)));
+  }
+  .sidebar-right-enter-from,
+  .sidebar-right-leave-to {
+    transform: translateX(var(--sidebar-width));
+  }
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobbykim/manguito-theme",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "main theme file for manguito components library. Other MCL components will need to import this file to run.",
   "type": "module",
   "main": "index.ts",
@@ -17,5 +17,5 @@
     "url": "https://github.com/bobbykim89/manguito-component-library.git"
   },
   "license": "MIT",
-  "gitHead": "79700f8b34204a6ecbe2f56d75f74a64c331055c"
+  "gitHead": "c095c399687fa416347eaec8a6d2003a39fc19ac"
 }

package/theme/index.ts

@@ -7,7 +7,7 @@ import type {
   Range,
   OpacityRange,
   SpacingLevel,
-  Position,
+  Alignment,
 } from './theme.types'
 
 /**
@@ -102,7 +102,7 @@ export type InputType =
   | Range<1, 12>
   | OpacityRange
   | SpacingLevel
-  | Position
+  | Alignment
 
 class GenerateMCLClass extends MCLTheme {
   classType: ClassType
@@ -449,7 +449,7 @@ class GenerateMCLClass extends MCLTheme {
   }
   // handle text align classes
   getTextAlignClass(): string {
-    return MCLTheme.textAlign[this.classValue as Position]
+    return MCLTheme.textAlign[this.classValue as Alignment]
   }
   // handle border width classes
   getBorderWidthClass(): string {

package/theme/theme.types.ts

@@ -37,12 +37,15 @@ export type HeadingSize = 'sm' | 'md' | 'lg' | 'xl'
 export type BodyText = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 // Font weight
 export type FontWeight = 'light' | 'normal' | 'bold'
-// border positions
-export type Position = 'left' | 'center' | 'right'
+// alignment
+export type Alignment = 'left' | 'center' | 'right'
+export type VerticalAlignment = 'top' | 'center' | 'bottom'
 // link targets
 export type CtaTarget = '_self' | '_blank'
 // Highlight positions
-export type Location = 'left' | 'right' | 'top' | 'bottom'
+export type Direction = 'left' | 'right' | 'top' | 'bottom'
+export type DirectionY = 'top' | 'bottom'
+export type DirectionX = 'left' | 'right'
 // available ranges
 type _RangeArray<
   T extends number,
@@ -60,7 +63,6 @@ export type Range<T extends number, R extends number> = IntRange<
 
 export type ButtonSize = 'small' | 'medium' | 'large'
 export type OpacityRange = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100
-export type Directions = 'left' | 'right'
 export type ColumnWidth = 25 | 50 | 75 | 100
 export type CrossOrigin = 'use-credentials' | 'anonymous'
 export type InputType = 'text' | 'email' | 'password'

package/themeVariables.cjs

@@ -70,7 +70,7 @@ const mclTheme = plugin.withOptions(
               },
             },
             [`.btn.btn-invert.btn-${e(key)}`]: {
-              [`@apply border-2 bg-white border-${key} text-${key}`]: {},
+              [`@apply border-2 bg-transparent border-${key} text-${key}`]: {},
               '&:hover': {
                 [`@apply bg-${key} text-white bg-opacity-100`]: {},
               },