@bobbykim/manguito-theme 0.14.0 → 0.16.0

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',

package/theme/theme.ts

@@ -4,14 +4,14 @@
  * @Export RDSTheme - an abstract class
  */
 import type {
-  ColorPalette,
-  HeadingSize,
   BodyText,
+  ColorPalette,
   FontWeight,
-  Range,
+  HeadingSize,
   OpacityRange,
-  SpacingLevel,
   Alignment as Position,
+  Range,
+  SpacingLevel,
 } from './theme.types.js'
 
 export type ColorClass = {
@@ -200,6 +200,26 @@ abstract class MCLTheme {
     white: 'hover:text-white',
     transparent: 'hover:text-transparent',
   }
+  // focus text color class
+  protected static focusTextColor: ColorClass = {
+    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
   protected static disabledTextColor: ColorClass = {
     primary: 'disabled:text-primary',

package/tsconfig.json

@@ -1,9 +1,5 @@
 {
   "extends": "../../../tsconfig.json",
-  "include": ["./**/*.ts"],
-  "exclude": ["node_modules", "./**/*.vue.d.ts", "./**/*.vue"],
-  "compilerOptions": {
-    "skipLibCheck": true,
-    "declaration": true
-  }
+  "include": ["./**/*.ts", "./**/*.vue"],
+  "exclude": ["node_modules", "./**/*.vue.d.ts"]
 }

package/tsconfig.ts.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["./**/*.ts"],
+  "exclude": ["node_modules", "./**/*.vue.d.ts", "./**/*.vue"],
+  "compilerOptions": {
+    "skipLibCheck": true,
+    "declaration": true
+  }
+}

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

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

package/lib/collapse/index.types.ts

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