@bobbykim/manguito-theme 0.2.0 → 0.4.0

package/README.md

@@ -92,7 +92,7 @@ import type { <Type you need> } from '@bobbykim/manguito-theme/theme/theme.types
 <template>...</template>
 ```
 
-## Authors
+## Maintainers
 
 - **Bobby Kim** - _Initial work_
 

package/index.ts

@@ -1,10 +1,35 @@
-import GenerateMCLClass from './theme'
-import type { ClassType, InputType } from './theme'
+import GenerateMCLClass, {
+  colorType,
+  textType,
+  borderWidthType,
+  scaleType,
+} from './theme'
+import type { ClassType, InputType } from './theme/index.js'
+// base components
+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'
 
 const generateClass = (type: ClassType, value: InputType): string => {
   const mclGenerate = new GenerateMCLClass(type, value)
-
-  return mclGenerate.generateClassName()
+  if ((<string[]>(<unknown>colorType)).includes(type)) {
+    return mclGenerate.generateColorClass()
+  }
+  if ((<string[]>(<unknown>textType)).includes(type)) {
+    return mclGenerate.generateTextClass()
+  }
+  if ((<string[]>(<unknown>borderWidthType)).includes(type)) {
+    return mclGenerate.generateBorderWidthClass()
+  }
+  if ((<string[]>(<unknown>scaleType)).includes(type)) {
+    return mclGenerate.generateScaleClass()
+  }
+  // return spacing type if all of above is false
+  return mclGenerate.generateSpacingClass()
 }
 
 export default generateClass
+
+export { DropdownContainer, DropdownContent, Collapse, CollapseEvent }
+export * from './lib/directives'

package/lib/collapse/Collapse.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
+import type { CollapseEvent } from './index.types'
+const props = withDefaults(
+  defineProps<{
+    collapseId: string
+    accordion?: string
+    className?: string
+    visible?: boolean
+  }>(),
+  {
+    className: '',
+    visible: false,
+  }
+)
+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
+}
+const slotHeightVal = computed(() => {
+  return {
+    height: contentRef.value && toggle.value ? slotHeight.value + 'px' : '0px',
+  }
+})
+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>
+  <div>
+    <button
+      :id="collapseId"
+      @click="handleToggleEvent"
+      class="hidden"
+      :accordion="accordion"
+      :visible="toggle"
+    ></button>
+    <div
+      class="overflow-hidden transition-[height] duration-500"
+      :style="slotHeightVal"
+      :class="[toggle ? 'ease-in' : 'ease-out']"
+    >
+      <div
+        ref="contentRef"
+        class="transition-opacity duration-500"
+        :class="[
+          toggle ? 'opacity-100 ease-in' : 'opacity-0 ease-out',
+          className,
+        ]"
+      >
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

package/lib/collapse/index.types.ts

@@ -0,0 +1,3 @@
+export interface CollapseEvent extends Event {
+  visible: boolean
+}

package/lib/directives/index.ts

@@ -0,0 +1,57 @@
+import { Directive } from 'vue'
+
+export const vClickOutside: Directive = {
+  mounted(el, binding) {
+    el.__ClickOutsideHandler = (event: Event) => {
+      if (!(el === event.target || el.contains(event.target))) {
+        binding.value(event)
+      }
+    }
+    document.body.addEventListener('click', el.__ClickOutsideHandler)
+  },
+  unmounted(el) {
+    document.body.removeEventListener('click', el.__ClickOutsideHandler)
+  },
+}
+
+export const vCollapse: Directive = {
+  mounted(el, binding) {
+    el.__HandleToggler = (event: Event): void => {
+      const eTarget = event.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
+        ) as HTMLElement
+      } else {
+        target = document.getElementById(binding.arg as string) as HTMLElement
+      }
+      if (!target.hasAttribute('accordion')) {
+        // run when it is not accordion component case
+        target.click()
+        return
+      }
+      const accordionName = target.getAttribute('accordion')
+      const accordionList: NodeListOf<HTMLElement> = document.querySelectorAll(
+        `button[accordion="${accordionName}"]`
+      )
+      // loop through each accordion items and handle reaction for each case
+      for (let i = 0; i < accordionList.length; i++) {
+        const isVisible = accordionList[i].getAttribute('visible')
+        if (accordionList[i].id !== target.id && isVisible === 'true') {
+          accordionList[i].click()
+        }
+        if (accordionList[i].id === target.id) {
+          accordionList[i].click()
+        }
+      }
+    }
+    el.addEventListener('click', el.__HandleToggler)
+  },
+  unmounted(el) {
+    el.removeEventListener('click', el.__HandleToggler)
+  },
+}

package/lib/dropdown/DropdownContainer.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { reactive, provide, ref, onMounted } from 'vue'
+import type { InjectType } from './index.types'
+import { vClickOutside } from '../directives'
+
+const emit = defineEmits(['click-outside', 'toggle'])
+const dropdownTarget = ref()
+const dropdownState = reactive<InjectType>({
+  active: false,
+  buttonHeight: 0,
+})
+provide('dropdownState', dropdownState)
+const toggle = (e: Event): void => {
+  dropdownState.active = !dropdownState.active
+  emit('toggle', e)
+}
+const onClickOutside = (e: Event): void => {
+  dropdownState.active = false
+  emit('click-outside', e)
+}
+const onEscape = (): void => {
+  dropdownState.active = false
+}
+onMounted(() => {
+  if (typeof window !== undefined) {
+    dropdownState.buttonHeight = dropdownTarget.value.scrollHeight
+  }
+})
+</script>
+
+<template>
+  <div
+    class="relative"
+    ref="dropdownTarget"
+    v-click-outside="onClickOutside"
+    @keyup.esc="onEscape"
+  >
+    <slot
+      name="toggler"
+      :toggle="toggle"
+      :dropdown-state="dropdownState.active"
+    />
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

package/lib/dropdown/DropdownContent.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed, ref, inject, Transition } from 'vue'
+import { InjectType } from './index.types'
+
+const props = withDefaults(
+  defineProps<{
+    className?: string
+  }>(),
+  {
+    className: '',
+  }
+)
+const contentRef = ref<HTMLAreaElement>()
+const dropdownState = inject<InjectType>('dropdownState', {
+  active: false,
+  buttonHeight: 0,
+})
+const active = computed<boolean>(() => {
+  return dropdownState.active
+})
+const handleItemClick = () => {
+  dropdownState.active = false
+}
+const buttonHeight = computed(() => {
+  return { '--button-height': `${dropdownState.buttonHeight}px` }
+})
+const dropdownDirection = computed<string | undefined>(() => {
+  if (typeof window === undefined) {
+    return
+  }
+  if (!dropdownState.active || !contentRef.value) {
+    return
+  }
+  if (
+    window.innerHeight - contentRef.value.getBoundingClientRect().bottom <
+    0
+  ) {
+    return 'dropup-bottom'
+  }
+})
+</script>
+
+<template>
+  <transition name="dropdown-content">
+    <div
+      v-if="active"
+      ref="contentRef"
+      class="absolute my-2xs max-w-[14rem] w-max overflow-hidden"
+      :class="[dropdownDirection, className]"
+      :style="buttonHeight"
+    >
+      <slot :item-click="handleItemClick" />
+    </div>
+  </transition>
+</template>
+
+<style scoped lang="scss">
+.dropup-bottom {
+  bottom: var(--button-height);
+}
+.dropdown-content-enter-active,
+.dropdown-content-leave-active {
+  transition: all 0.3s;
+}
+.dropdown-content-enter-from,
+.dropdown-content-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+</style>

package/lib/dropdown/index.types.ts

@@ -0,0 +1,4 @@
+export type InjectType = {
+  active: boolean
+  buttonHeight: number
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobbykim/manguito-theme",
-  "version": "0.2.0",
+  "version": "0.4.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": "aaee823ffe3d684532eb08f0553b96a4a5475a88"
+  "gitHead": "79700f8b34204a6ecbe2f56d75f74a64c331055c"
 }

package/theme/index.ts

@@ -1,4 +1,4 @@
-import MCLTheme from './theme'
+import MCLTheme from './theme.js'
 import type {
   ColorPalette,
   HeadingSize,
@@ -16,68 +16,83 @@ import type {
  * @Export GenerateMCLClass - extends MCLTheme class
  */
 
-export type ClassType =
-  // color class
-  | 'BGCOLOR'
-  | 'BEFOREBG'
-  | 'AFTERBG'
-  | 'HVBGCOLOR'
-  | 'ACTIVEBG'
-  | 'TEXTCOLOR'
-  | 'HVTEXTCOLOR'
-  | 'DISABLEDTEXTCOLOR'
-  | 'SVGFILL'
-  | 'RINGCOLOR'
-  | 'FOCUSRING'
-  | 'ACTIVERING'
-  | 'BTNCOLOR'
-  | 'LISTCOLOR'
-  // header text class
-  | 'H1'
-  | 'H2'
-  | 'H3'
-  | 'H4'
-  // body text class
-  | 'BODYTEXT'
-  // font weight class
-  | 'FONTWEIGHT'
-  // border color class
-  | 'BORDER'
-  | 'BORDERX'
-  | 'BORDERY'
-  | 'BORDERT'
-  | 'BORDERB'
-  | 'BORDERL'
-  | 'BORDERR'
-  // border width class
-  | 'BORDERW'
-  | 'BORDERXW'
-  | 'BORDERYW'
-  | 'BORDERTW'
-  | 'BORDERBW'
-  | 'BORDERLW'
-  | 'BORDERRW'
-  // opacity class
-  | 'BGOPACITY'
-  | 'OPACITY'
-  // spacing class
-  | 'MARGIN'
-  | 'MARGINX'
-  | 'MARGINY'
-  | 'MARGINT'
-  | 'MARGINB'
-  | 'MARGINL'
-  | 'MARGINR'
-  | 'PADDING'
-  | 'PADDINGX'
-  | 'PADDINGY'
-  | 'PADDINGT'
-  | 'PADDINGB'
-  | 'PADDINGL'
-  | 'PADDINGR'
-  | 'GAP'
-  // text align class
-  | 'TEXTALIGN'
+export const colorType = [
+  'BGCOLOR',
+  'BEFOREBG',
+  'AFTERBG',
+  'HVBGCOLOR',
+  'FCBGCOLOR',
+  'ACTIVEBG',
+  'TEXTCOLOR',
+  'HVTEXTCOLOR',
+  'DISABLEDTEXTCOLOR',
+  'SVGFILL',
+  'RINGCOLOR',
+  'FOCUSRING',
+  'ACTIVERING',
+  'OFFSETRING',
+  'DUMMYCOLOR',
+  'BTNCOLOR',
+  'LISTCOLOR',
+  'BORDER',
+  'BORDERX',
+  'BORDERY',
+  'BORDERT',
+  'BORDERB',
+  'BORDERL',
+  'BORDERR',
+] as const
+
+export const textType = [
+  'H1',
+  'H2',
+  'H3',
+  'H4',
+  'BODYTEXT',
+  'FONTWEIGHT',
+  'TEXTALIGN',
+] as const
+export const borderWidthType = [
+  'BORDERW',
+  'BORDERXW',
+  'BORDERYW',
+  'BORDERTW',
+  'BORDERBW',
+  'BORDERLW',
+  'BORDERRW',
+] as const
+export const scaleType = ['BGOPACITY', 'OPACITY'] as const
+export const spacingType = [
+  'MARGIN',
+  'MARGINX',
+  'MARGINY',
+  'MARGINT',
+  'MARGINB',
+  'MARGINL',
+  'MARGINR',
+  'PADDING',
+  'PADDINGX',
+  'PADDINGY',
+  'PADDINGT',
+  'PADDINGB',
+  'PADDINGL',
+  'PADDINGR',
+  'GAP',
+] as const
+const allType = [
+  ...colorType,
+  ...textType,
+  ...borderWidthType,
+  ...scaleType,
+  ...spacingType,
+] as const
+
+export type ClassType = (typeof allType)[number]
+export type ColorClassType = (typeof colorType)[number]
+export type TextClassType = (typeof textType)[number]
+export type BorderWidthClassType = (typeof borderWidthType)[number]
+export type ScaleClassType = (typeof scaleType)[number]
+export type SpacingClassType = (typeof spacingType)[number]
 
 export type InputType =
   | ColorPalette
@@ -98,13 +113,15 @@ class GenerateMCLClass extends MCLTheme {
     this.classType = classType
     this.classValue = classValue
   }
-  generateClassName(): string {
+  // handle color classes types
+  generateColorClass(): string {
     switch (this.classType) {
-      // case: color class
       case 'BGCOLOR':
         return this.getBgColorClass()
       case 'HVBGCOLOR':
         return this.getHoverBgColorClass()
+      case 'FCBGCOLOR':
+        return this.getFocusBgColorClass()
       case 'BEFOREBG':
         return this.getBeforeBgColorClass()
       case 'AFTERBG':
@@ -125,11 +142,12 @@ class GenerateMCLClass extends MCLTheme {
         return this.getFocusRingColorClass()
       case 'ACTIVERING':
         return this.getActiveRingColorClass()
+      case 'OFFSETRING':
+        return this.getRingOffsetColorClass()
       case 'BTNCOLOR':
         return this.getBtnColorClass()
       case 'LISTCOLOR':
         return this.getRingColorClass()
-      // case: border color class
       case 'BORDER':
         return this.getBorderColorClass()
       case 'BORDERX':
@@ -144,6 +162,13 @@ class GenerateMCLClass extends MCLTheme {
         return this.getBorderLeftColorClass()
       case 'BORDERR':
         return this.getBorderRightColorClass()
+      default:
+        return ' '
+    }
+  }
+  // handle text class types
+  generateTextClass(): string {
+    switch (this.classType) {
       // case: heading text class
       case 'H1':
         return this.getH1Class()
@@ -162,6 +187,13 @@ class GenerateMCLClass extends MCLTheme {
       // case: text alignment class
       case 'TEXTALIGN':
         return this.getTextAlignClass()
+      default:
+        return ' '
+    }
+  }
+  // handle border width class types
+  generateBorderWidthClass(): string {
+    switch (this.classType) {
       // case: border width class
       case 'BORDERW':
         return this.getBorderWidthClass()
@@ -177,13 +209,24 @@ class GenerateMCLClass extends MCLTheme {
         return this.getBorderLeftWidthClass()
       case 'BORDERRW':
         return this.getBorderWidthClass()
+      default:
+        return ' '
+    }
+  }
+  generateScaleClass(): string {
+    switch (this.classType) {
       // case: opacity class
       case 'OPACITY':
         return this.getOpacityClass()
       case 'BGOPACITY':
         return this.getBgOpacityClass()
-      // case: spacing class
-      // margins
+      default:
+        return ' '
+    }
+  }
+  generateSpacingClass(): string {
+    switch (this.classType) {
+      // case: margins
       case 'MARGIN':
         return this.getMarginClass()
       case 'MARGINX':
@@ -198,7 +241,7 @@ class GenerateMCLClass extends MCLTheme {
         return this.getMarginLeftClass()
       case 'MARGINR':
         return this.getMarginRightClass()
-      // paddings
+      // case: paddings
       case 'PADDING':
         return this.getPaddingClass()
       case 'PADDINGX':
@@ -213,7 +256,7 @@ class GenerateMCLClass extends MCLTheme {
         return this.getPaddingLeftClass()
       case 'PADDINGR':
         return this.getPaddingRightClass()
-      // gap
+      // case: gap
       case 'GAP':
         return this.getGapClass()
       default:
@@ -234,6 +277,12 @@ class GenerateMCLClass extends MCLTheme {
     }
     return MCLTheme.hoverBgColor[this.classValue as ColorPalette]
   }
+  getFocusBgColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.focusBgColor[this.classValue as ColorPalette]
+  }
   getBeforeBgColorClass(): string {
     if (!this.validateColorType) {
       return ' '
@@ -297,6 +346,12 @@ class GenerateMCLClass extends MCLTheme {
     }
     return MCLTheme.ringActiveColor[this.classValue as ColorPalette]
   }
+  getRingOffsetColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.ringOffsetColor[this.classValue as ColorPalette]
+  }
   // btn & list
   getBtnColorClass(): string {
     if (!this.validateColorType) {
@@ -604,6 +659,9 @@ class GenerateMCLClass extends MCLTheme {
     }
     return validatorRe.test(this.classValue)
   }
+  dummyMethod(): any {
+    return this.getRingOffsetColorClass()
+  }
 }
 
 export default GenerateMCLClass

package/theme/theme.ts

@@ -3,93 +3,40 @@
  * @Interface - Classes for color, header text, body text, border color, border width(top, left).
  * @Export RDSTheme - an abstract class
  */
+import type {
+  ColorPalette,
+  HeadingSize,
+  BodyText,
+  FontWeight,
+  Range,
+  OpacityRange,
+  SpacingLevel,
+  Position,
+} from './theme.types'
 
-export interface ColorClass {
-  primary: string
-  secondary: string
-  success: string
-  info: string
-  warning: string
-  danger: string
-  'light-1': string
-  'light-2': string
-  'light-3': string
-  'light-4': string
-  'dark-1': string
-  'dark-2': string
-  'dark-3': string
-  'dark-4': string
-  black: string
-  white: string
-  transparent: string
+export type ColorClass = {
+  [key in ColorPalette]: string
 }
-
-export interface HeaderSizeClass {
-  sm: string
-  md: string
-  lg: string
-  xl: string
+export type HeaderSizeClass = {
+  [key in HeadingSize]: string
 }
-
-export interface BodyTextClass {
-  xs: string
-  sm: string
-  md: string
-  lg: string
-  xl: string
+export type BodyTextClass = {
+  [key in BodyText]: string
 }
-
-export interface FontWeightClass {
-  light: string
-  normal: string
-  bold: string
+export type FontWeightClass = {
+  [key in FontWeight]: string
 }
-
-export interface BorderWidth {
-  1: string
-  2: string
-  3: string
-  4: string
-  5: string
-  6: string
-  7: string
-  8: string
-  9: string
-  10: string
-  11: string
-  12: string
+export type BorderWidth = {
+  [key in Range<1, 12>]: string
 }
-
-export interface Opacity {
-  10: string
-  20: string
-  30: string
-  40: string
-  50: string
-  60: string
-  70: string
-  80: string
-  90: string
-  100: string
+export type Opacity = {
+  [key in OpacityRange]: string
 }
-
-export interface Spacing {
-  '0': string
-  '3xs': string
-  '2xs': string
-  xs: string
-  sm: string
-  md: string
-  lg: string
-  xl: string
-  '2xl': string
-  '3xl': string
+export type Spacing = {
+  [key in SpacingLevel]: string
 }
-
-export interface Alignment {
-  left: string
-  center: string
-  right: string
+export type Alignment = {
+  [key in Position]: string
 }
 
 abstract class MCLTheme {
@@ -113,7 +60,7 @@ abstract class MCLTheme {
     white: 'bg-white',
     transparent: 'bg-transparent',
   }
-  // hover bg color class
+  // hover: bg color class
   protected static hoverBgColor: ColorClass = {
     primary: 'hover:bg-primary',
     secondary: 'hover:bg-secondary',
@@ -133,6 +80,26 @@ abstract class MCLTheme {
     white: 'hover:bg-white',
     transparent: 'hover:bg-transparent',
   }
+  // focus: bg color class
+  protected static focusBgColor: ColorClass = {
+    primary: 'focus:bg-primary',
+    secondary: 'focus:bg-secondary',
+    success: 'focus:bg-success',
+    danger: 'focus:bg-danger',
+    info: 'focus:bg-info',
+    warning: 'focus:bg-warning',
+    'light-1': 'focus:bg-light-1',
+    'light-2': 'focus:bg-light-2',
+    'light-3': 'focus:bg-light-3',
+    'light-4': 'focus:bg-light-4',
+    'dark-1': 'focus:bg-dark-1',
+    'dark-2': 'focus:bg-dark-2',
+    'dark-3': 'focus:bg-dark-3',
+    'dark-4': 'focus:bg-dark-4',
+    black: 'focus:bg-black',
+    white: 'focus:bg-white',
+    transparent: 'focus:bg-transparent',
+  }
   // ::before bg color class
   protected static beforeBgColor: ColorClass = {
     primary: 'before:bg-primary',
@@ -333,6 +300,45 @@ abstract class MCLTheme {
     white: 'active:ring-white',
     transparent: 'active:ring-transparent',
   }
+  // ring-offset color class
+  protected static ringOffsetColor: ColorClass = {
+    primary: 'ring-offset-primary',
+    secondary: 'ring-offset-secondary',
+    success: 'ring-offset-success',
+    danger: 'ring-offset-danger',
+    info: 'ring-offset-info',
+    warning: 'ring-offset-warning',
+    'light-1': 'ring-offset-light-1',
+    'light-2': 'ring-offset-light-2',
+    'light-3': 'ring-offset-light-3',
+    'light-4': 'ring-offset-light-4',
+    'dark-1': 'ring-offset-dark-1',
+    'dark-2': 'ring-offset-dark-2',
+    'dark-3': 'ring-offset-dark-3',
+    'dark-4': 'ring-offset-dark-4',
+    black: 'ring-offset-black',
+    white: 'ring-offset-white',
+    transparent: 'ring-offset-transparent',
+  }
+  protected static dummyColor: ColorClass = {
+    primary: 'ring-offset-primary',
+    secondary: 'ring-offset-secondary',
+    success: 'ring-offset-success',
+    danger: 'ring-offset-danger',
+    info: 'ring-offset-info',
+    warning: 'ring-offset-warning',
+    'light-1': 'ring-offset-light-1',
+    'light-2': 'ring-offset-light-2',
+    'light-3': 'ring-offset-light-3',
+    'light-4': 'ring-offset-light-4',
+    'dark-1': 'ring-offset-dark-1',
+    'dark-2': 'ring-offset-dark-2',
+    'dark-3': 'ring-offset-dark-3',
+    'dark-4': 'ring-offset-dark-4',
+    black: 'ring-offset-black',
+    white: 'ring-offset-white',
+    transparent: 'ring-offset-transparent',
+  }
   // btn color class
   protected static btnColor: ColorClass = {
     primary: 'btn-primary',

package/theme/theme.types.ts

@@ -57,6 +57,7 @@ export type Range<T extends number, R extends number> = IntRange<
   _RangeArray<T>,
   R
 >
+
 export type ButtonSize = 'small' | 'medium' | 'large'
 export type OpacityRange = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100
 export type Directions = 'left' | 'right'

package/themeVariables.cjs

@@ -4,7 +4,6 @@ const mclTheme = plugin.withOptions(
   () => {
     return ({ addBase, theme, addComponents, addUtilities, e }) => {
       const colors = theme('colors')
-      // console.log(colors)
       const listColors = Object.keys(colors).reduce((accumulator, key) => {
         if (typeof colors[key] === 'string') {
           return {
@@ -29,6 +28,34 @@ const mclTheme = plugin.withOptions(
           ),
         }
       }, {})
+      const linkColors = Object.keys(colors).reduce((accumulator, key) => {
+        const invalidKeys = ['current', 'transparent', 'inherit']
+        if (invalidKeys.includes(key)) {
+          return
+        }
+        if (typeof colors[key] === 'string') {
+          return {
+            ...accumulator,
+            [`.mcl-link.text-${e(key)}`]: {
+              '&:hover': {
+                [`@apply text-${key}/60`]: {},
+              },
+            },
+          }
+        }
+        const colorShades = Object.keys(colors[key])
+        return {
+          ...accumulator,
+          ...colorShades.reduce((acc, level) => ({
+            ...acc,
+            [`.mcl-link.text-${e(key)}-${level}`]: {
+              '&:hover': {
+                [`@apply text-${key}-${level}/60`]: {},
+              },
+            },
+          })),
+        }
+      })
       const btnColors = Object.keys(colors).reduce((accumulator, key) => {
         if (typeof colors[key] === 'string') {
           return {
@@ -56,6 +83,18 @@ const mclTheme = plugin.withOptions(
                 '@apply ring-0': {},
               },
             },
+            [`.btn.btn-${e(key)}.btn-no-ring`]: {
+              '&:focus': {
+                '@apply ring-0': {},
+              },
+            },
+            [`.btn.btn-progress.btn-${e(key)}`]: {
+              [`@apply before:bg-${key} border-${key} text-${key} bg-transparent`]:
+                {},
+              '&:hover, &:focus': {
+                '@apply text-white': {},
+              },
+            },
           }
         }
 
@@ -90,6 +129,13 @@ const mclTheme = plugin.withOptions(
                   '@apply ring-0': {},
                 },
               },
+              [`.btn.btn-progress.btn-${e(key)}-${level}`]: {
+                [`@apply before:bg-${key}-${level} border-${key}-${level} text-${key}-${level} bg-transparent`]:
+                  {},
+                '&:hover, &:focus': {
+                  '@apply text-white': {},
+                },
+              },
             }),
             {}
           ),
@@ -252,6 +298,10 @@ const mclTheme = plugin.withOptions(
         '.mcl-link': {
           color: theme('colors.primary'),
           textDecoration: 'underline',
+          '@apply transition-colors duration-200 ease-in': {},
+          '&:hover': {
+            '@apply text-primary/60': {},
+          },
         },
         '.mcl-list': {
           'list-style-position': 'inside',
@@ -319,16 +369,59 @@ const mclTheme = plugin.withOptions(
             '@apply ring-0': {},
           },
         },
+        '.btn.btn-no-ring': {
+          '@apply ring-offset-0': {},
+          '&:focus': {
+            '@apply ring-0': {},
+          },
+        },
         '.btn.btn-invert': {
           '@apply border-2 border-primary text-primary bg-white': {},
           '&:hover': {
             '@apply bg-primary text-white bg-opacity-100': {},
           },
         },
+        '.btn.btn-progress': {
+          position: 'relative',
+          '&::before': {
+            content: '""',
+            position: 'absolute',
+            height: '100%',
+            width: '0',
+            bottom: '0',
+            left: '0',
+            transition: 'width 300ms linear',
+          },
+          '@apply before:bg-primary border-2 border-primary text-primary bg-transparent':
+            {},
+        },
+        '.btn.btn-progress > *': {
+          position: 'relative',
+        },
+        '.btn.btn-progress.btn-progress-r': {
+          '&::before': {
+            left: '100%',
+            transition: 'all 300ms linear',
+          },
+        },
+        '.btn.btn-progress:hover, .btn.btn-progress:focus': {
+          '@apply text-white': {},
+          '&::before': {
+            width: '100%',
+          },
+        },
+        '.btn.btn-progress.btn-progress-r:hover, .btn.btn-progress.btn-progress-r:focus':
+          {
+            '&::before': {
+              width: '100%',
+              left: '0',
+            },
+          },
       })
 
       addUtilities(listColors)
       addUtilities(btnColors)
+      addUtilities(linkColors)
     }
   },
   (options = {}) => {