@bobbykim/manguito-theme 0.1.3 → 0.2.0

package/README.md

@@ -21,16 +21,57 @@ tailwind.config.cjs
 ```cjs
 const {
   mclTheme,
-  mclHeading,
-} = require('@bobbykim/manguito-theme/themeVariables.cjs')
+} = require('./src/components/manguito-theme/themeVariables.cjs')
+module.exports = {
+  content: [
+    './src/**/*.{vue,ts,js,cjs}',
+    './node_modules/@bobbykim/**/*.{vue,ts,js,cjs}',
+  ],
+  plugins: [mclTheme()],
+}
+```
+
+## Theme color configuration
+
+You can change theme colors by adding colors/spacing in `tailwind.config.cjs`
 
+```cjs
 module.exports = {
   content: [
     './src/**/*.{vue,ts,js,cjs}',
     './node_modules/@bobbykim/**/*.{vue,ts,js,cjs}',
   ],
-  theme: mclTheme,
-  plugins: [mclHeading],
+  plugins: [
+    mclTheme({
+      colors: {
+        primary: '#ec489a',
+        secondary: '#00feda',
+        success: '#78be20',
+        info: '#00a3e0',
+        warning: '#f1ac18',
+        danger: '#cc2f2f',
+        'light-1': '#fafafa',
+        'light-2': '#f1f1f1',
+        'light-3': '#e8e8e8',
+        'light-4': '#d0d0d0',
+        'dark-1': '#747474',
+        'dark-2': '#484848',
+        'dark-3': '#1f2937',
+        'dark-4': '#191919',
+      },
+      spacing: {
+        '3xs': '4px',
+        '2xs': '8px',
+        xs: '16px',
+        sm: '24px',
+        md: '32px',
+        lg: '48px',
+        xl: '64px',
+        '2xl': '96px',
+        '3xl': '128px',
+      },
+    }),
+  ],
 }
 ```
 

package/index.ts

@@ -1,5 +1,5 @@
-import GenerateMCLClass from './theme/generateClass'
-import type { ClassType, InputType } from './theme/generateClass'
+import GenerateMCLClass from './theme'
+import type { ClassType, InputType } from './theme'
 
 const generateClass = (type: ClassType, value: InputType): string => {
   const mclGenerate = new GenerateMCLClass(type, value)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobbykim/manguito-theme",
-  "version": "0.1.3",
+  "version": "0.2.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": "4e6b9b908a17893f6e6baab01741dc0dde771ac8"
+  "gitHead": "aaee823ffe3d684532eb08f0553b96a4a5475a88"
 }

package/theme/index.ts

@@ -0,0 +1,609 @@
+import MCLTheme from './theme'
+import type {
+  ColorPalette,
+  HeadingSize,
+  BodyText,
+  FontWeight,
+  Range,
+  OpacityRange,
+  SpacingLevel,
+  Position,
+} from './theme.types'
+
+/**
+ * @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 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 type InputType =
+  | ColorPalette
+  | HeadingSize
+  | BodyText
+  | FontWeight
+  | Range<1, 12>
+  | OpacityRange
+  | SpacingLevel
+  | Position
+
+class GenerateMCLClass extends MCLTheme {
+  classType: ClassType
+  classValue: InputType
+
+  constructor(classType: ClassType, classValue: InputType) {
+    super()
+    this.classType = classType
+    this.classValue = classValue
+  }
+  generateClassName(): string {
+    switch (this.classType) {
+      // case: color class
+      case 'BGCOLOR':
+        return this.getBgColorClass()
+      case 'HVBGCOLOR':
+        return this.getHoverBgColorClass()
+      case 'BEFOREBG':
+        return this.getBeforeBgColorClass()
+      case 'AFTERBG':
+        return this.getAfterBgColorClass()
+      case 'ACTIVEBG':
+        return this.getActiveBgColorClass()
+      case 'TEXTCOLOR':
+        return this.getTextColorClass()
+      case 'HVTEXTCOLOR':
+        return this.getHoverTextColorClass()
+      case 'DISABLEDTEXTCOLOR':
+        return this.getDisabledTextColorClass()
+      case 'SVGFILL':
+        return this.getSvgFillColorClass()
+      case 'RINGCOLOR':
+        return this.getRingColorClass()
+      case 'FOCUSRING':
+        return this.getFocusRingColorClass()
+      case 'ACTIVERING':
+        return this.getActiveRingColorClass()
+      case 'BTNCOLOR':
+        return this.getBtnColorClass()
+      case 'LISTCOLOR':
+        return this.getRingColorClass()
+      // case: border color class
+      case 'BORDER':
+        return this.getBorderColorClass()
+      case 'BORDERX':
+        return this.getBorderXColorClass()
+      case 'BORDERY':
+        return this.getBorderYColorClass()
+      case 'BORDERT':
+        return this.getBorderTopColorClass()
+      case 'BORDERB':
+        return this.getBorderBottomColorClass()
+      case 'BORDERL':
+        return this.getBorderLeftColorClass()
+      case 'BORDERR':
+        return this.getBorderRightColorClass()
+      // case: heading text class
+      case 'H1':
+        return this.getH1Class()
+      case 'H2':
+        return this.getH2Class()
+      case 'H3':
+        return this.getH3Class()
+      case 'H4':
+        return this.getH4Class()
+      // case: body text class
+      case 'BODYTEXT':
+        return this.getBodyTextSizeClass()
+      // case: font weight class
+      case 'FONTWEIGHT':
+        return this.getFontWeightClass()
+      // case: text alignment class
+      case 'TEXTALIGN':
+        return this.getTextAlignClass()
+      // case: border width class
+      case 'BORDERW':
+        return this.getBorderWidthClass()
+      case 'BORDERXW':
+        return this.getBorderXWidthClass()
+      case 'BORDERYW':
+        return this.getBorderYWidthClass()
+      case 'BORDERTW':
+        return this.getBorderTopWidthClass()
+      case 'BORDERBW':
+        return this.getBorderBottomWidthClass()
+      case 'BORDERLW':
+        return this.getBorderLeftWidthClass()
+      case 'BORDERRW':
+        return this.getBorderWidthClass()
+      // case: opacity class
+      case 'OPACITY':
+        return this.getOpacityClass()
+      case 'BGOPACITY':
+        return this.getBgOpacityClass()
+      // case: spacing class
+      // margins
+      case 'MARGIN':
+        return this.getMarginClass()
+      case 'MARGINX':
+        return this.getMarginXClass()
+      case 'MARGINY':
+        return this.getMarginYClass()
+      case 'MARGINT':
+        return this.getMarginTopClass()
+      case 'MARGINB':
+        return this.getMarginBottomClass()
+      case 'MARGINL':
+        return this.getMarginLeftClass()
+      case 'MARGINR':
+        return this.getMarginRightClass()
+      // paddings
+      case 'PADDING':
+        return this.getPaddingClass()
+      case 'PADDINGX':
+        return this.getPaddingXClass()
+      case 'PADDINGY':
+        return this.getPaddingYClass()
+      case 'PADDINGT':
+        return this.getPaddingTopClass()
+      case 'PADDINGB':
+        return this.getPaddingBottomClass()
+      case 'PADDINGL':
+        return this.getPaddingLeftClass()
+      case 'PADDINGR':
+        return this.getPaddingRightClass()
+      // gap
+      case 'GAP':
+        return this.getGapClass()
+      default:
+        return ' '
+    }
+  }
+  // handle color class
+  // bg color
+  getBgColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.bgColor[this.classValue as ColorPalette]
+  }
+  getHoverBgColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.hoverBgColor[this.classValue as ColorPalette]
+  }
+  getBeforeBgColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.beforeBgColor[this.classValue as ColorPalette]
+  }
+  getAfterBgColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.afterBgColor[this.classValue as ColorPalette]
+  }
+  getActiveBgColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.bgActiveColor[this.classValue as ColorPalette]
+  }
+  // text color
+  getTextColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.textColor[this.classValue as ColorPalette]
+  }
+  getHoverTextColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.hoverTextColor[this.classValue as ColorPalette]
+  }
+  getDisabledTextColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.disabledTextColor[this.classValue as ColorPalette]
+  }
+  // svg color
+  getSvgFillColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.svgFillColor[this.classValue as ColorPalette]
+  }
+  // ring color
+  getRingColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.ringColor[this.classValue as ColorPalette]
+  }
+  getFocusRingColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.ringFocusColor[this.classValue as ColorPalette]
+  }
+  getActiveRingColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.ringActiveColor[this.classValue as ColorPalette]
+  }
+  // btn & list
+  getBtnColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.btnColor[this.classValue as ColorPalette]
+  }
+  getListColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.listColor[this.classValue as ColorPalette]
+  }
+  // border color
+  getBorderColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.borderColor[this.classValue as ColorPalette]
+  }
+  getBorderXColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.borderXColor[this.classValue as ColorPalette]
+  }
+  getBorderYColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.borderYColor[this.classValue as ColorPalette]
+  }
+  getBorderTopColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.borderTopColor[this.classValue as ColorPalette]
+  }
+  getBorderBottomColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.borderBottomColor[this.classValue as ColorPalette]
+  }
+  getBorderLeftColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.borderLeftColor[this.classValue as ColorPalette]
+  }
+  getBorderRightColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.borderRightColor[this.classValue as ColorPalette]
+  }
+  // handle heading classes
+  getH1Class(): string {
+    if (!this.validateHeadingTextSizeType) {
+      return ' '
+    }
+    return MCLTheme.heading1[this.classValue as HeadingSize]
+  }
+  getH2Class(): string {
+    if (!this.validateHeadingTextSizeType) {
+      return ' '
+    }
+    return MCLTheme.heading2[this.classValue as HeadingSize]
+  }
+  getH3Class(): string {
+    if (!this.validateHeadingTextSizeType) {
+      return ' '
+    }
+    return MCLTheme.heading3[this.classValue as HeadingSize]
+  }
+  getH4Class(): string {
+    if (!this.validateHeadingTextSizeType) {
+      return ' '
+    }
+    return MCLTheme.heading4[this.classValue as HeadingSize]
+  }
+  // handle body text size classes
+  getBodyTextSizeClass(): string {
+    if (!this.validateBodyTextSizeType) {
+      return ' '
+    }
+    return MCLTheme.bodyText[this.classValue as BodyText]
+  }
+  // handle font weight classes
+  getFontWeightClass(): string {
+    if (!this.validateFontWeightType) {
+      return ' '
+    }
+    return MCLTheme.fontweight[this.classValue as FontWeight]
+  }
+  // handle text align classes
+  getTextAlignClass(): string {
+    return MCLTheme.textAlign[this.classValue as Position]
+  }
+  // handle border width classes
+  getBorderWidthClass(): string {
+    if (!this.validateRangeType) {
+      return ' '
+    }
+    return MCLTheme.borderWidth[this.classValue as Range<1, 12>]
+  }
+  getBorderXWidthClass(): string {
+    if (!this.validateRangeType) {
+      return ' '
+    }
+    return MCLTheme.borderXWidth[this.classValue as Range<1, 12>]
+  }
+  getBorderYWidthClass(): string {
+    if (!this.validateRangeType) {
+      return ' '
+    }
+    return MCLTheme.borderYWidth[this.classValue as Range<1, 12>]
+  }
+  getBorderTopWidthClass(): string {
+    if (!this.validateRangeType) {
+      return ' '
+    }
+    return MCLTheme.borderTopWidth[this.classValue as Range<1, 12>]
+  }
+  getBorderBottomWidthClass(): string {
+    if (!this.validateRangeType) {
+      return ' '
+    }
+    return MCLTheme.borderBottomWidth[this.classValue as Range<1, 12>]
+  }
+  getBorderLeftWidthClass(): string {
+    if (!this.validateRangeType) {
+      return ' '
+    }
+    return MCLTheme.borderLeftWidth[this.classValue as Range<1, 12>]
+  }
+  getBorderRightWidthClass(): string {
+    if (!this.validateRangeType) {
+      return ' '
+    }
+    return MCLTheme.borderRightWidth[this.classValue as Range<1, 12>]
+  }
+  // handle opacity classes
+  getOpacityClass(): string {
+    if (!this.validateOpacityType) {
+      return ' '
+    }
+    return MCLTheme.opacity[this.classValue as OpacityRange]
+  }
+  getBgOpacityClass(): string {
+    if (!this.validateOpacityType) {
+      return ' '
+    }
+    return MCLTheme.backgroundOpacity[this.classValue as OpacityRange]
+  }
+  // handle spacing classes
+  // margins
+  getMarginClass(): string {
+    if (!this.validateSpaceType) {
+      return ' '
+    }
+    return MCLTheme.margin[this.classValue as SpacingLevel]
+  }
+  getMarginXClass(): string {
+    if (!this.validateSpaceType) {
+      return ' '
+    }
+    return MCLTheme.marginX[this.classValue as SpacingLevel]
+  }
+  getMarginYClass(): string {
+    if (!this.validateSpaceType) {
+      return ' '
+    }
+    return MCLTheme.marginY[this.classValue as SpacingLevel]
+  }
+  getMarginTopClass(): string {
+    if (!this.validateSpaceType) {
+      return ' '
+    }
+    return MCLTheme.marginTop[this.classValue as SpacingLevel]
+  }
+  getMarginBottomClass(): string {
+    if (!this.validateSpaceType) {
+      return ' '
+    }
+    return MCLTheme.marginBottom[this.classValue as SpacingLevel]
+  }
+  getMarginLeftClass(): string {
+    if (!this.validateSpaceType) {
+      return ' '
+    }
+    return MCLTheme.marginLeft[this.classValue as SpacingLevel]
+  }
+  getMarginRightClass(): string {
+    if (!this.validateSpaceType) {
+      return ' '
+    }
+    return MCLTheme.marginRight[this.classValue as SpacingLevel]
+  }
+  // padding
+  getPaddingClass(): string {
+    if (!this.validateSpaceType) {
+      return ' '
+    }
+    return MCLTheme.padding[this.classValue as SpacingLevel]
+  }
+  getPaddingXClass(): string {
+    if (!this.validateSpaceType) {
+      return ' '
+    }
+    return MCLTheme.paddingX[this.classValue as SpacingLevel]
+  }
+  getPaddingYClass(): string {
+    if (!this.validateSpaceType) {
+      return ' '
+    }
+    return MCLTheme.paddingY[this.classValue as SpacingLevel]
+  }
+  getPaddingTopClass(): string {
+    if (!this.validateSpaceType) {
+      return ' '
+    }
+    return MCLTheme.paddingTop[this.classValue as SpacingLevel]
+  }
+  getPaddingBottomClass(): string {
+    if (!this.validateSpaceType) {
+      return ' '
+    }
+    return MCLTheme.paddingBottom[this.classValue as SpacingLevel]
+  }
+  getPaddingLeftClass(): string {
+    if (!this.validateSpaceType) {
+      return ' '
+    }
+    return MCLTheme.paddingLeft[this.classValue as SpacingLevel]
+  }
+  getPaddingRightClass(): string {
+    if (!this.validateSpaceType) {
+      return ' '
+    }
+    return MCLTheme.paddingRight[this.classValue as SpacingLevel]
+  }
+  // gap
+  getGapClass(): string {
+    if (!this.validateSpaceType) {
+      return ' '
+    }
+    return MCLTheme.gap[this.classValue as SpacingLevel]
+  }
+  // input validation
+  validateColorType(): boolean {
+    const validatorRe =
+      /(primary|secondary|success|info|warning|danger|light-1|light-2|light-3|light-4|dark-1|dark-2|dark-3|dark-4|black|white|transparent)/
+    if (typeof this.classValue !== 'string') {
+      return false
+    }
+    return validatorRe.test(this.classValue)
+  }
+  validateSpaceType(): boolean {
+    const validatorRe = /(0|3xs|2xs|xs|sm|md|lg|xl|2xl|3xl)/
+    if (typeof this.classValue !== 'string') {
+      return false
+    }
+    return validatorRe.test(this.classValue)
+  }
+  validateHeadingTextSizeType(): boolean {
+    const validatorRe = /(sm|md|lg|xl)/
+    if (typeof this.classValue !== 'string') {
+      return false
+    }
+    return validatorRe.test(this.classValue)
+  }
+  validateBodyTextSizeType(): boolean {
+    const validatorRe = /(xs|sm|md|lg|xl)/
+    if (typeof this.classValue !== 'string') {
+      return false
+    }
+    return validatorRe.test(this.classValue)
+  }
+  validateFontWeightType(): boolean {
+    const validatorRe = /(light|normal|bold)/
+    if (typeof this.classValue !== 'string') {
+      return false
+    }
+    return validatorRe.test(this.classValue)
+  }
+  validateOpacityType(): boolean {
+    const validatorRe = /\b(0|[1-9]0|100)\b/
+    if (typeof this.classValue !== 'number') {
+      return false
+    }
+    return validatorRe.test(this.classValue.toString())
+  }
+  validateRangeType(): boolean {
+    const validatorRe = /\b([1-9]|1[0-2])\b/
+    if (typeof this.classValue !== 'number') {
+      return false
+    }
+    return validatorRe.test(this.classValue.toString())
+  }
+  validateAlignment(): boolean {
+    const validatorRe = /(left|center|right)/
+    if (typeof this.classValue !== 'string') {
+      return false
+    }
+    return validatorRe.test(this.classValue)
+  }
+}
+
+export default GenerateMCLClass