@bobbykim/manguito-theme 0.15.0 → 0.16.0

package/lib/header/HeaderVertical.vue.d.ts

@@ -0,0 +1,63 @@
+import type { ColorPalette } from '../../';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    bgColor?: ColorPalette | undefined;
+    drawerBtnColor?: ColorPalette | undefined;
+    drawerBtnBorder?: boolean | undefined;
+    headerWidth?: number | undefined;
+}>, {
+    bgColor: string;
+    drawerBtnColor: string;
+    drawerBtnBorder: boolean;
+    headerWidth: number;
+}>, {
+    headerClose: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "toggle-drawer": (event: Event, open: boolean) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    bgColor?: ColorPalette | undefined;
+    drawerBtnColor?: ColorPalette | undefined;
+    drawerBtnBorder?: boolean | undefined;
+    headerWidth?: number | undefined;
+}>, {
+    bgColor: string;
+    drawerBtnColor: string;
+    drawerBtnBorder: boolean;
+    headerWidth: number;
+}>>> & {
+    "onToggle-drawer"?: ((event: Event, open: boolean) => any) | undefined;
+}, {
+    bgColor: ColorPalette;
+    drawerBtnColor: ColorPalette;
+    drawerBtnBorder: boolean;
+    headerWidth: number;
+}, {}>, Readonly<{
+    default: any;
+    content: any;
+    'content-bottom': any;
+    'mobile-content'(props: {
+        headerClose: () => void;
+    }): any;
+}>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/header/NavDrawer.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ColorPalette } from '../../'
+import generateClass from '../../'
+
+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/header/NavDrawer.vue.d.ts

@@ -0,0 +1,43 @@
+import type { ColorPalette } from '../../';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    color?: ColorPalette | undefined;
+    displayBorder?: boolean | undefined;
+    toggle: boolean;
+    navColor: ColorPalette;
+}>, {
+    color: string;
+    displayBorder: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "hbg-click": (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    color?: ColorPalette | undefined;
+    displayBorder?: boolean | undefined;
+    toggle: boolean;
+    navColor: ColorPalette;
+}>, {
+    color: string;
+    displayBorder: boolean;
+}>>> & {
+    "onHbg-click"?: ((...args: any[]) => any) | undefined;
+}, {
+    color: ColorPalette;
+    displayBorder: boolean;
+}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/lib/header/index.types.d.ts

@@ -0,0 +1 @@
+export type HeaderStickyOptionType = 'none' | 'tablet' | 'pc' | 'all';

package/lib/header/index.types.ts

@@ -0,0 +1 @@
+export type HeaderStickyOptionType = 'none' | 'tablet' | 'pc' | 'all'

package/lib/modal/Modal.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import {
-  ref,
-  computed,
-  watch,
   Transition,
-  onMounted,
+  computed,
   onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
 } from 'vue'
-import generateClass, { vClickOutside } from '../../index.js'
-import type { ColorPalette, VerticalAlignment } from '../../index.js'
-import { observeVisibleAttr } from '../composables/index.js'
+import type { ColorPalette, VerticalAlignment } from '../../'
+import generateClass, { vClickOutside } from '../../'
+import { observeVisibleAttr } from '../composables'
 
 const props = withDefaults(
   defineProps<{
@@ -35,7 +35,15 @@ const props = withDefaults(
   }
 )
 
-const emit = defineEmits(['open', 'close'])
+const slots = defineSlots<{
+  header(props: { close: () => void; status: boolean }): any
+  body(props: { close: () => void; status: boolean }): any
+  footer(props: { close: () => void; status: boolean }): any
+}>()
+const emit = defineEmits<{
+  (e: 'open', visible: boolean): void
+  (e: 'close', visible: boolean): void
+}>()
 const modalRef = ref<HTMLElement | undefined>()
 const toggle = ref<boolean>(props.visible)
 const toggleComplete = ref<boolean>(false)
@@ -52,10 +60,10 @@ const closeModal = (): void => {
   }
 }
 const emitOpenEvent = () => {
-  emit('open', { visible: true })
+  emit('open', true)
 }
 const emitCloseEvent = () => {
-  emit('close', { visible: false })
+  emit('close', false)
 }
 const handlePlacementVar = computed(() => {
   let placementVariable: number
@@ -172,7 +180,7 @@ onBeforeUnmount(() => {
             </slot>
           </div>
           <slot name="body" :close="closeModal" :status="toggle" />
-          <div class="sticky bottom-0">
+          <div class="sticky bottom-0" v-if="slots['footer']">
             <slot name="footer" :close="closeModal" :status="toggle" />
           </div>
         </div>

package/lib/modal/Modal.vue.d.ts

@@ -1,4 +1,4 @@
-import type { ColorPalette, VerticalAlignment } from '../../index.js';
+import type { ColorPalette, VerticalAlignment } from '../../';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     title?: string | undefined;
     titleColor?: ColorPalette | undefined;
@@ -23,8 +23,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     close: () => void;
     open: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    open: (...args: any[]) => void;
-    close: (...args: any[]) => void;
+    open: (visible: boolean) => void;
+    close: (visible: boolean) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     title?: string | undefined;
     titleColor?: ColorPalette | undefined;
@@ -45,31 +45,31 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     backdropColor: string;
     placement: string;
 }>>> & {
-    onOpen?: ((...args: any[]) => any) | undefined;
-    onClose?: ((...args: any[]) => any) | undefined;
+    onOpen?: ((visible: boolean) => any) | undefined;
+    onClose?: ((visible: boolean) => any) | undefined;
 }, {
     visible: boolean;
     className: string;
+    color: ColorPalette;
     titleColor: ColorPalette;
     noBackdrop: boolean;
     noHeader: boolean;
-    color: ColorPalette;
     backdropColor: ColorPalette;
     placement: VerticalAlignment;
-}, {}>, {
-    header?(_: {
+}, {}>, Readonly<{
+    header(props: {
         close: () => void;
-        status: true;
+        status: boolean;
     }): any;
-    body?(_: {
+    body(props: {
         close: () => void;
-        status: true;
+        status: boolean;
     }): any;
-    footer?(_: {
+    footer(props: {
         close: () => void;
-        status: true;
+        status: boolean;
     }): any;
-}>;
+}>>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/lib/sidebar/Sidebar.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import {
-  ref,
-  computed,
-  watch,
   Transition,
-  onMounted,
+  computed,
   onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
 } from 'vue'
-import generateClass, { vClickOutside } from '../../index.js'
-import type { ColorPalette, DirectionX } from '../../index.js'
-import { observeVisibleAttr } from '../composables/index.js'
+import type { ColorPalette, DirectionX } from '../../'
+import generateClass, { vClickOutside } from '../../'
+import { observeVisibleAttr } from '../composables'
 
 const props = withDefaults(
   defineProps<{
@@ -37,7 +37,15 @@ const props = withDefaults(
   }
 )
 
-const emit = defineEmits(['open', 'close'])
+const slots = defineSlots<{
+  header(props: { close: () => void; status: boolean }): any
+  body(props: { close: () => void; status: boolean }): any
+  footer(props: { close: () => void; status: boolean }): any
+}>()
+const emit = defineEmits<{
+  (e: 'open', visible: boolean): void
+  (e: 'close', visible: boolean): void
+}>()
 const toggle = ref<boolean>(props.visible)
 const toggleComplete = ref<boolean>(false)
 const sidebarRef = ref<HTMLElement | undefined>()
@@ -50,16 +58,16 @@ const toggleSidebar = (): void => {
 const openSidebar = (): void => {
   toggle.value = true
 }
-const closeSidebar = (e: Event): void => {
+const closeSidebar = (): void => {
   if (toggleComplete.value === true) {
     toggle.value = false
   }
 }
 const emitOpenEvent = () => {
-  emit('open', { visible: true })
+  emit('open', true)
 }
 const emitCloseEvent = () => {
-  emit('close', { visible: false })
+  emit('close', false)
 }
 const handleStyleVariables = computed(() => {
   return {
@@ -185,7 +193,7 @@ onBeforeUnmount(() => {
             <slot name="body" :close="closeSidebar" :status="toggle" />
           </div>
 
-          <div class="sticky bottom-0" ref="footerRef">
+          <div class="sticky bottom-0" ref="footerRef" v-if="slots['footer']">
             <slot name="footer" :close="closeSidebar" :status="toggle" />
           </div>
         </div>

package/lib/sidebar/Sidebar.vue.d.ts

@@ -1,4 +1,4 @@
-import type { ColorPalette, DirectionX } from '../../index.js';
+import type { ColorPalette, DirectionX } from '../../';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     title?: string | undefined;
     titleColor?: ColorPalette | undefined;
@@ -23,10 +23,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>, {
     toggle: () => void;
     open: () => void;
-    close: (e: Event) => void;
+    close: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    open: (...args: any[]) => void;
-    close: (...args: any[]) => void;
+    open: (visible: boolean) => void;
+    close: (visible: boolean) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     title?: string | undefined;
     titleColor?: ColorPalette | undefined;
@@ -49,32 +49,32 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     placement: string;
     width: number;
 }>>> & {
-    onOpen?: ((...args: any[]) => any) | undefined;
-    onClose?: ((...args: any[]) => any) | undefined;
+    onOpen?: ((visible: boolean) => any) | undefined;
+    onClose?: ((visible: boolean) => any) | undefined;
 }, {
     visible: boolean;
     className: string;
+    color: ColorPalette;
     titleColor: ColorPalette;
     noBackdrop: boolean;
     noHeader: boolean;
-    color: ColorPalette;
     backdropColor: ColorPalette;
     placement: DirectionX;
     width: string | number;
-}, {}>, {
-    header?(_: {
-        close: (e: Event) => void;
-        status: true;
+}, {}>, Readonly<{
+    header(props: {
+        close: () => void;
+        status: boolean;
     }): any;
-    body?(_: {
-        close: (e: Event) => void;
-        status: true;
+    body(props: {
+        close: () => void;
+        status: boolean;
     }): any;
-    footer?(_: {
-        close: (e: Event) => void;
-        status: true;
+    footer(props: {
+        close: () => void;
+        status: boolean;
     }): any;
-}>;
+}>>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobbykim/manguito-theme",
-  "version": "0.15.0",
+  "version": "0.16.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",
@@ -8,7 +8,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "vue-tsc --project tsconfig.vue.json && tsc"
+    "build": "vue-tsc --project tsconfig.vue.json && tsc --project tsconfig.ts.json"
   },
   "dependencies": {
     "@vueuse/core": "^10.8.0",
@@ -30,5 +30,5 @@
     "url": "https://github.com/bobbykim89/manguito-component-library.git"
   },
   "license": "MIT",
-  "gitHead": "69d6ee1c4f91a74b226cb46182845201141805fa"
+  "gitHead": "5b81953e5108fd166c0b89ebc6a24e6de9499635"
 }

package/theme/index.d.ts

@@ -1,16 +1,16 @@
 import MCLTheme from './theme.js';
-import type { ColorPalette, HeadingSize, BodyText, FontWeight, Range, OpacityRange, SpacingLevel, Alignment } from './theme.types.js';
+import type { Alignment, BodyText, ColorPalette, FontWeight, HeadingSize, OpacityRange, Range, SpacingLevel } from './theme.types.js';
 /**
  * @TailwindCSS - Good practice is to let all of used classes to be in full instead of generated dynamically using methods such as string literal.
  * @Interface - ClassType to define the case, and Input type to generate tailwind clssname.
  * @Export GenerateMCLClass - extends MCLTheme class
  */
-export declare const colorType: readonly ["BGCOLOR", "BEFOREBG", "AFTERBG", "HVBGCOLOR", "FCBGCOLOR", "ACTIVEBG", "TEXTCOLOR", "HVTEXTCOLOR", "DISABLEDTEXTCOLOR", "SVGFILL", "RINGCOLOR", "FOCUSRING", "ACTIVERING", "OFFSETRING", "DUMMYCOLOR", "BTNCOLOR", "LISTCOLOR", "BORDER", "BORDERX", "BORDERY", "BORDERT", "BORDERB", "BORDERL", "BORDERR"];
+export declare const colorType: readonly ["BGCOLOR", "BEFOREBG", "AFTERBG", "HVBGCOLOR", "FCBGCOLOR", "ACTIVEBG", "TEXTCOLOR", "HVTEXTCOLOR", "FCTEXTCOLOR", "DISABLEDTEXTCOLOR", "SVGFILL", "RINGCOLOR", "FOCUSRING", "ACTIVERING", "OFFSETRING", "DUMMYCOLOR", "BTNCOLOR", "LISTCOLOR", "BORDER", "BORDERX", "BORDERY", "BORDERT", "BORDERB", "BORDERL", "BORDERR"];
 export declare const textType: readonly ["H1", "H2", "H3", "H4", "BODYTEXT", "FONTWEIGHT", "TEXTALIGN"];
 export declare const borderWidthType: readonly ["BORDERW", "BORDERXW", "BORDERYW", "BORDERTW", "BORDERBW", "BORDERLW", "BORDERRW"];
 export declare const scaleType: readonly ["BGOPACITY", "OPACITY"];
 export declare const spacingType: readonly ["MARGIN", "MARGINX", "MARGINY", "MARGINT", "MARGINB", "MARGINL", "MARGINR", "PADDING", "PADDINGX", "PADDINGY", "PADDINGT", "PADDINGB", "PADDINGL", "PADDINGR", "GAP"];
-declare const allType: readonly ["BGCOLOR", "BEFOREBG", "AFTERBG", "HVBGCOLOR", "FCBGCOLOR", "ACTIVEBG", "TEXTCOLOR", "HVTEXTCOLOR", "DISABLEDTEXTCOLOR", "SVGFILL", "RINGCOLOR", "FOCUSRING", "ACTIVERING", "OFFSETRING", "DUMMYCOLOR", "BTNCOLOR", "LISTCOLOR", "BORDER", "BORDERX", "BORDERY", "BORDERT", "BORDERB", "BORDERL", "BORDERR", "H1", "H2", "H3", "H4", "BODYTEXT", "FONTWEIGHT", "TEXTALIGN", "BORDERW", "BORDERXW", "BORDERYW", "BORDERTW", "BORDERBW", "BORDERLW", "BORDERRW", "BGOPACITY", "OPACITY", "MARGIN", "MARGINX", "MARGINY", "MARGINT", "MARGINB", "MARGINL", "MARGINR", "PADDING", "PADDINGX", "PADDINGY", "PADDINGT", "PADDINGB", "PADDINGL", "PADDINGR", "GAP"];
+declare const allType: readonly ["BGCOLOR", "BEFOREBG", "AFTERBG", "HVBGCOLOR", "FCBGCOLOR", "ACTIVEBG", "TEXTCOLOR", "HVTEXTCOLOR", "FCTEXTCOLOR", "DISABLEDTEXTCOLOR", "SVGFILL", "RINGCOLOR", "FOCUSRING", "ACTIVERING", "OFFSETRING", "DUMMYCOLOR", "BTNCOLOR", "LISTCOLOR", "BORDER", "BORDERX", "BORDERY", "BORDERT", "BORDERB", "BORDERL", "BORDERR", "H1", "H2", "H3", "H4", "BODYTEXT", "FONTWEIGHT", "TEXTALIGN", "BORDERW", "BORDERXW", "BORDERYW", "BORDERTW", "BORDERBW", "BORDERLW", "BORDERRW", "BGOPACITY", "OPACITY", "MARGIN", "MARGINX", "MARGINY", "MARGINT", "MARGINB", "MARGINL", "MARGINR", "PADDING", "PADDINGX", "PADDINGY", "PADDINGT", "PADDINGB", "PADDINGL", "PADDINGR", "GAP"];
 export type ClassType = (typeof allType)[number];
 export type ColorClassType = (typeof colorType)[number];
 export type TextClassType = (typeof textType)[number];
@@ -35,6 +35,7 @@ declare class GenerateMCLClass extends MCLTheme {
     getActiveBgColorClass(): string;
     getTextColorClass(): string;
     getHoverTextColorClass(): string;
+    getFocusTextColorClass(): string;
     getDisabledTextColorClass(): string;
     getSvgFillColorClass(): string;
     getRingColorClass(): string;

package/theme/index.js

@@ -13,6 +13,7 @@ export const colorType = [
     'ACTIVEBG',
     'TEXTCOLOR',
     'HVTEXTCOLOR',
+    'FCTEXTCOLOR',
     'DISABLEDTEXTCOLOR',
     'SVGFILL',
     'RINGCOLOR',
@@ -100,6 +101,8 @@ class GenerateMCLClass extends MCLTheme {
                 return this.getTextColorClass();
             case 'HVTEXTCOLOR':
                 return this.getHoverTextColorClass();
+            case 'FCTEXTCOLOR':
+                return this.getFocusTextColorClass();
             case 'DISABLEDTEXTCOLOR':
                 return this.getDisabledTextColorClass();
             case 'SVGFILL':
@@ -282,6 +285,12 @@ class GenerateMCLClass extends MCLTheme {
         }
         return MCLTheme.hoverTextColor[this.classValue];
     }
+    getFocusTextColorClass() {
+        if (!this.validateColorType) {
+            return ' ';
+        }
+        return MCLTheme.focusTextColor[this.classValue];
+    }
     getDisabledTextColorClass() {
         if (!this.validateColorType) {
             return ' ';

package/theme/index.ts

@@ -1,13 +1,13 @@
 import MCLTheme from './theme.js'
 import type {
-  ColorPalette,
-  HeadingSize,
+  Alignment,
   BodyText,
+  ColorPalette,
   FontWeight,
-  Range,
+  HeadingSize,
   OpacityRange,
+  Range,
   SpacingLevel,
-  Alignment,
 } from './theme.types.js'
 
 /**
@@ -25,6 +25,7 @@ export const colorType = [
   'ACTIVEBG',
   'TEXTCOLOR',
   'HVTEXTCOLOR',
+  'FCTEXTCOLOR',
   'DISABLEDTEXTCOLOR',
   'SVGFILL',
   'RINGCOLOR',
@@ -132,6 +133,8 @@ class GenerateMCLClass extends MCLTheme {
         return this.getTextColorClass()
       case 'HVTEXTCOLOR':
         return this.getHoverTextColorClass()
+      case 'FCTEXTCOLOR':
+        return this.getFocusTextColorClass()
       case 'DISABLEDTEXTCOLOR':
         return this.getDisabledTextColorClass()
       case 'SVGFILL':
@@ -314,6 +317,12 @@ class GenerateMCLClass extends MCLTheme {
     }
     return MCLTheme.hoverTextColor[this.classValue as ColorPalette]
   }
+  getFocusTextColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.focusTextColor[this.classValue as ColorPalette]
+  }
   getDisabledTextColorClass(): string {
     if (!this.validateColorType) {
       return ' '

package/theme/theme.d.ts

@@ -3,7 +3,7 @@
  * @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, Alignment as Position } from './theme.types.js';
+import type { BodyText, ColorPalette, FontWeight, HeadingSize, OpacityRange, Alignment as Position, Range, SpacingLevel } from './theme.types.js';
 export type ColorClass = {
     [key in ColorPalette]: string;
 };
@@ -37,6 +37,7 @@ declare abstract class MCLTheme {
     protected static bgActiveColor: ColorClass;
     protected static textColor: ColorClass;
     protected static hoverTextColor: ColorClass;
+    protected static focusTextColor: ColorClass;
     protected static disabledTextColor: ColorClass;
     protected static svgFillColor: ColorClass;
     protected static ringColor: ColorClass;

package/theme/theme.js

@@ -159,6 +159,26 @@ class MCLTheme {
         white: 'hover:text-white',
         transparent: 'hover:text-transparent',
     };
+    // focus text color class
+    static focusTextColor = {
+        primary: 'focus:text-primary',
+        secondary: 'focus:text-secondary',
+        success: 'focus:text-success',
+        danger: 'focus:text-danger',
+        info: 'focus:text-info',
+        warning: 'focus:text-warning',
+        'light-1': 'focus:text-light-1',
+        'light-2': 'focus:text-light-2',
+        'light-3': 'focus:text-light-3',
+        'light-4': 'focus:text-light-4',
+        'dark-1': 'focus:text-dark-1',
+        'dark-2': 'focus:text-dark-2',
+        'dark-3': 'focus:text-dark-3',
+        'dark-4': 'focus:text-dark-4',
+        black: 'focus:text-black',
+        white: 'focus:text-white',
+        transparent: 'focus:text-transparent',
+    };
     // disabled text color class
     static disabledTextColor = {
         primary: 'disabled:text-primary',