@bobbykim/manguito-theme 0.1.0

package/index.ts

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

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@bobbykim/manguito-theme",
+  "version": "0.1.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",
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": {
+    "name": "Bobby Kim",
+    "url": "https://www.devbobbykim.com/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bobbykim89/manguito-component-library.git"
+  },
+  "license": "MIT"
+}

package/theme/generateClass.ts

@@ -0,0 +1,231 @@
+import MCLTheme from './theme'
+import type {
+  ColorPalette,
+  HeadingSize,
+  BodyText,
+  FontWeight,
+  Range,
+  OpacityRange,
+  SpacingLevel,
+} 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 GenerateRDSClass - extends RDSTheme class
+ */
+
+export type ClassType =
+  | 'BGCOLOR'
+  | 'BEFOREBG'
+  | 'AFTERBG'
+  | 'TEXTCOLOR'
+  | 'DISABLEDTEXTCOLOR'
+  | 'SVGFILL'
+  | 'RINGCOLOR'
+  | 'FOCUSRING'
+  | 'ACTIVERING'
+  | 'ACTIVEBG'
+  | 'H1'
+  | 'H2'
+  | 'H3'
+  | 'H4'
+  | 'BODYTEXT'
+  | 'FONTWEIGHT'
+  | 'BORDER'
+  | 'BORDERX'
+  | 'BORDERY'
+  | 'BORDERT'
+  | 'BORDERL'
+  | 'BORDERB'
+  | 'BORDERTW'
+  | 'BORDERLW'
+  | 'HVBGCOLOR'
+  | 'HVTEXTCOLOR'
+  | 'BGOPACITY'
+  | 'OPACITY'
+  | 'MARGINB'
+
+export type InputType =
+  | ColorPalette
+  | HeadingSize
+  | BodyText
+  | FontWeight
+  | Range<12>
+  | OpacityRange
+  | SpacingLevel
+
+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 'BGCOLOR':
+      case 'BEFOREBG':
+      case 'AFTERBG':
+      case 'TEXTCOLOR':
+      case 'DISABLEDTEXTCOLOR':
+      case 'SVGFILL':
+      case 'RINGCOLOR':
+      case 'FOCUSRING':
+      case 'ACTIVERING':
+      case 'ACTIVEBG':
+        return this.getColorClass()
+      case 'HVBGCOLOR':
+      case 'HVTEXTCOLOR':
+        return this.getHoverColorClass()
+      case 'H1':
+      case 'H2':
+      case 'H3':
+      case 'H4':
+        return this.getHeadingTextSizeClass()
+      case 'BODYTEXT':
+        return this.getBodyTextSizeClass()
+      case 'FONTWEIGHT':
+        return this.getFontWeightClass()
+      case 'BORDER':
+      case 'BORDERX':
+      case 'BORDERY':
+      case 'BORDERT':
+      case 'BORDERB':
+      case 'BORDERL':
+        return this.getBorderColorClass()
+      case 'BORDERTW':
+      case 'BORDERLW':
+        return this.getBorderWidthClass()
+      case 'BGOPACITY':
+        return this.getBgOpacityClass()
+      case 'OPACITY':
+        return this.getOpacityClass()
+      case 'MARGINB':
+        return this.getSpacingClass()
+      default:
+        return
+    }
+  }
+  getColorClass(): string {
+    const {
+      bgColor,
+      beforeBgColor,
+      afterBgColor,
+      textColor,
+      disabledTextColor,
+      svgFillColor,
+      ringColor,
+      ringFocusColor,
+      ringActiveColor,
+      bgActiveColor,
+    } = MCLTheme
+    if (this.classType === 'BGCOLOR') {
+      return bgColor[this.classValue]
+    }
+    if (this.classType === 'BEFOREBG') {
+      return beforeBgColor[this.classValue]
+    }
+    if (this.classType === 'AFTERBG') {
+      return afterBgColor[this.classValue]
+    }
+    if (this.classType === 'TEXTCOLOR') {
+      return textColor[this.classValue]
+    }
+    if (this.classType === 'DISABLEDTEXTCOLOR') {
+      return disabledTextColor[this.classValue]
+    }
+    if (this.classType === 'SVGFILL') {
+      return svgFillColor[this.classValue]
+    }
+    if (this.classType === 'FOCUSRING') {
+      return ringFocusColor[this.classValue]
+    }
+    if (this.classType === 'ACTIVERING') {
+      return ringActiveColor[this.classValue]
+    }
+    if (this.classType === 'ACTIVEBG') {
+      return bgActiveColor[this.classValue]
+    }
+    return ringColor[this.classValue]
+  }
+  getHoverColorClass(): string {
+    const { hoverBgColor, hoverTextColor } = MCLTheme
+    if (this.classType === 'HVBGCOLOR') {
+      return hoverBgColor[this.classValue]
+    }
+    return hoverTextColor[this.classValue]
+  }
+  getHeadingTextSizeClass(): string {
+    const { heading1, heading2, heading3, heading4 } = MCLTheme
+    if (this.classType === 'H1') {
+      return heading1[this.classValue]
+    }
+    if (this.classType === 'H2') {
+      return heading2[this.classValue]
+    }
+    if (this.classType === 'H3') {
+      return heading3[this.classValue]
+    }
+    return heading4[this.classValue]
+  }
+  getBodyTextSizeClass(): string {
+    const { bodyText } = MCLTheme
+    return bodyText[this.classValue]
+  }
+  getFontWeightClass(): string {
+    const { fontweight } = MCLTheme
+    return fontweight[this.classValue]
+  }
+  getBorderColorClass(): string {
+    const {
+      borderColor,
+      borderXColor,
+      borderYColor,
+      borderTopColor,
+      borderBottomColor,
+      borderLeftColor,
+    } = MCLTheme
+    if (this.classType === 'BORDERX') {
+      return borderXColor[this.classValue]
+    }
+    if (this.classType === 'BORDERY') {
+      return borderYColor[this.classValue]
+    }
+    if (this.classType === 'BORDERT') {
+      return borderTopColor[this.classValue]
+    }
+    if (this.classType === 'BORDERB') {
+      return borderBottomColor[this.classValue]
+    }
+    if (this.classType === 'BORDERL') {
+      return borderLeftColor[this.classValue]
+    }
+    return borderColor[this.classValue]
+  }
+  getBorderWidthClass(): string {
+    const { borderTopWidth, borderLeftWidth } = MCLTheme
+    if (this.classType === 'BORDERTW') {
+      return borderTopWidth[this.classValue]
+    }
+    return borderLeftWidth[this.classValue]
+  }
+  getBgOpacityClass(): string {
+    const { backgroundOpacity } = MCLTheme
+    return backgroundOpacity[this.classValue]
+  }
+  getOpacityClass(): string {
+    const { opacity } = MCLTheme
+    return opacity[this.classValue]
+  }
+  getSpacingClass(): string {
+    const { marginBottom } = MCLTheme
+    if (this.classType === 'MARGINB') {
+      return marginBottom[this.classValue]
+    }
+  }
+}
+
+export default GenerateMCLClass

package/theme/theme.ts

@@ -0,0 +1,554 @@
+/**
+ * @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 - Classes for color, header text, body text, border color, border width(top, left).
+ * @Export RDSTheme - an abstract class
+ */
+
+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 interface HeaderSizeClass {
+  sm: string
+  md: string
+  lg: string
+  xl: string
+}
+
+export interface BodyTextClass {
+  xs: string
+  sm: string
+  md: string
+  lg: string
+  xl: string
+}
+
+export interface FontWeightClass {
+  light: string
+  normal: string
+  bold: 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 interface Opacity {
+  10: string
+  20: string
+  30: string
+  40: string
+  50: string
+  60: string
+  70: string
+  80: string
+  90: string
+  100: string
+}
+
+export interface Spacing {
+  '0': string
+  '3xs': string
+  '2xs': string
+  xs: string
+  sm: string
+  md: string
+  lg: string
+  xl: string
+  '2xl': string
+  '3xl': string
+}
+
+abstract class MCLTheme {
+  // bg color class
+  protected static bgColor: ColorClass = {
+    primary: 'bg-primary',
+    secondary: 'bg-secondary',
+    success: 'bg-success',
+    danger: 'bg-danger',
+    info: 'bg-info',
+    warning: 'bg-warning',
+    'light-1': 'bg-light-1',
+    'light-2': 'bg-light-2',
+    'light-3': 'bg-light-3',
+    'light-4': 'bg-light-4',
+    'dark-1': 'bg-dark-1',
+    'dark-2': 'bg-dark-2',
+    'dark-3': 'bg-dark-3',
+    'dark-4': 'bg-dark-4',
+    black: 'bg-black',
+    white: 'bg-white',
+    transparent: 'bg-transparent',
+  }
+  // hover bg color class
+  protected static hoverBgColor: ColorClass = {
+    primary: 'hover:bg-primary',
+    secondary: 'hover:bg-secondary',
+    success: 'hover:bg-success',
+    danger: 'hover:bg-danger',
+    info: 'hover:bg-info',
+    warning: 'hover:bg-warning',
+    'light-1': 'hover:bg-light-1',
+    'light-2': 'hover:bg-light-2',
+    'light-3': 'hover:bg-light-3',
+    'light-4': 'hover:bg-light-4',
+    'dark-1': 'hover:bg-dark-1',
+    'dark-2': 'hover:bg-dark-2',
+    'dark-3': 'hover:bg-dark-3',
+    'dark-4': 'hover:bg-dark-4',
+    black: 'hover:bg-black',
+    white: 'hover:bg-white',
+    transparent: 'hover:bg-transparent',
+  }
+  // ::before bg color class
+  protected static beforeBgColor: ColorClass = {
+    primary: 'before:bg-primary',
+    secondary: 'before:bg-secondary',
+    success: 'before:bg-success',
+    danger: 'before:bg-danger',
+    info: 'before:bg-info',
+    warning: 'before:bg-warning',
+    'light-1': 'before:bg-light-1',
+    'light-2': 'before:bg-light-2',
+    'light-3': 'before:bg-light-3',
+    'light-4': 'before:bg-light-4',
+    'dark-1': 'before:bg-dark-1',
+    'dark-2': 'before:bg-dark-2',
+    'dark-3': 'before:bg-dark-3',
+    'dark-4': 'before:bg-dark-4',
+    black: 'before:bg-black',
+    white: 'before:bg-white',
+    transparent: 'before:bg-transparent',
+  }
+  // ::after bg color class
+  protected static afterBgColor: ColorClass = {
+    primary: 'after:bg-primary',
+    secondary: 'after:bg-secondary',
+    success: 'after:bg-success',
+    danger: 'after:bg-danger',
+    info: 'after:bg-info',
+    warning: 'after:bg-warning',
+    'light-1': 'after:bg-light-1',
+    'light-2': 'after:bg-light-2',
+    'light-3': 'after:bg-light-3',
+    'light-4': 'after:bg-light-4',
+    'dark-1': 'after:bg-dark-1',
+    'dark-2': 'after:bg-dark-2',
+    'dark-3': 'after:bg-dark-3',
+    'dark-4': 'after:bg-dark-4',
+    black: 'after:bg-black',
+    white: 'after:bg-white',
+    transparent: 'after:bg-transparent',
+  }
+  // text color class
+  protected static textColor: ColorClass = {
+    primary: 'text-primary',
+    secondary: 'text-secondary',
+    success: 'text-success',
+    danger: 'text-danger',
+    info: 'text-info',
+    warning: 'text-warning',
+    'light-1': 'text-light-1',
+    'light-2': 'text-light-2',
+    'light-3': 'text-light-3',
+    'light-4': 'text-light-4',
+    'dark-1': 'text-dark-1',
+    'dark-2': 'text-dark-2',
+    'dark-3': 'text-dark-3',
+    'dark-4': 'text-dark-4',
+    black: 'text-black',
+    white: 'text-white',
+    transparent: 'text-transparent',
+  }
+  // hover text color class
+  protected static hoverTextColor: ColorClass = {
+    primary: 'hover:text-primary',
+    secondary: 'hover:text-secondary',
+    success: 'hover:text-success',
+    danger: 'hover:text-danger',
+    info: 'hover:text-info',
+    warning: 'hover:text-warning',
+    'light-1': 'hover:text-light-1',
+    'light-2': 'hover:text-light-2',
+    'light-3': 'hover:text-light-3',
+    'light-4': 'hover:text-light-4',
+    'dark-1': 'hover:text-dark-1',
+    'dark-2': 'hover:text-dark-2',
+    'dark-3': 'hover:text-dark-3',
+    'dark-4': 'hover:text-dark-4',
+    black: 'hover:text-black',
+    white: 'hover:text-white',
+    transparent: 'hover:text-transparent',
+  }
+  // disabled text color class
+  protected static disabledTextColor: ColorClass = {
+    primary: 'disabled:text-primary',
+    secondary: 'disabled:text-secondary',
+    success: 'disabled:text-success',
+    danger: 'disabled:text-danger',
+    info: 'disabled:text-info',
+    warning: 'disabled:text-warning',
+    'light-1': 'disabled:text-light-1',
+    'light-2': 'disabled:text-light-2',
+    'light-3': 'disabled:text-light-3',
+    'light-4': 'disabled:text-light-4',
+    'dark-1': 'disabled:text-dark-1',
+    'dark-2': 'disabled:text-dark-2',
+    'dark-3': 'disabled:text-dark-3',
+    'dark-4': 'disabled:text-dark-4',
+    black: 'disabled:text-black',
+    white: 'disabled:text-white',
+    transparent: 'disabled:text-transparent',
+  }
+  // SVG fill color class
+  protected static svgFillColor: ColorClass = {
+    primary: 'fill-primary',
+    secondary: 'fill-secondary',
+    success: 'fill-success',
+    danger: 'fill-danger',
+    info: 'fill-info',
+    warning: 'fill-warning',
+    'light-1': 'fill-light-1',
+    'light-2': 'fill-light-2',
+    'light-3': 'fill-light-3',
+    'light-4': 'fill-light-4',
+    'dark-1': 'fill-dark-1',
+    'dark-2': 'fill-dark-2',
+    'dark-3': 'fill-dark-3',
+    'dark-4': 'fill-dark-4',
+    black: 'fill-black',
+    white: 'fill-white',
+    transparent: 'fill-transparent',
+  }
+  // ring color class
+  protected static ringColor: ColorClass = {
+    primary: 'ring-primary',
+    secondary: 'ring-secondary',
+    success: 'ring-success',
+    danger: 'ring-danger',
+    info: 'ring-info',
+    warning: 'ring-warning',
+    'light-1': 'ring-light-1',
+    'light-2': 'ring-light-2',
+    'light-3': 'ring-light-3',
+    'light-4': 'ring-light-4',
+    'dark-1': 'ring-dark-1',
+    'dark-2': 'ring-dark-2',
+    'dark-3': 'ring-dark-3',
+    'dark-4': 'ring-dark-4',
+    black: 'ring-black',
+    white: 'ring-white',
+    transparent: 'ring-transparent',
+  }
+  // focus:ring color class
+  protected static ringFocusColor: ColorClass = {
+    primary: 'focus:ring-primary',
+    secondary: 'focus:ring-secondary',
+    success: 'focus:ring-success',
+    danger: 'focus:ring-danger',
+    info: 'focus:ring-info',
+    warning: 'focus:ring-warning',
+    'light-1': 'focus:ring-light-1',
+    'light-2': 'focus:ring-light-2',
+    'light-3': 'focus:ring-light-3',
+    'light-4': 'focus:ring-light-4',
+    'dark-1': 'focus:ring-dark-1',
+    'dark-2': 'focus:ring-dark-2',
+    'dark-3': 'focus:ring-dark-3',
+    'dark-4': 'focus:ring-dark-4',
+    black: 'focus:ring-black',
+    white: 'focus:ring-white',
+    transparent: 'focus:ring-transparent',
+  }
+  // active:ring color class
+  protected static ringActiveColor: ColorClass = {
+    primary: 'active:ring-primary',
+    secondary: 'active:ring-secondary',
+    success: 'active:ring-success',
+    danger: 'active:ring-danger',
+    info: 'active:ring-info',
+    warning: 'active:ring-warning',
+    'light-1': 'active:ring-light-1',
+    'light-2': 'active:ring-light-2',
+    'light-3': 'active:ring-light-3',
+    'light-4': 'active:ring-light-4',
+    'dark-1': 'active:ring-dark-1',
+    'dark-2': 'active:ring-dark-2',
+    'dark-3': 'active:ring-dark-3',
+    'dark-4': 'active:ring-dark-4',
+    black: 'active:ring-black',
+    white: 'active:ring-white',
+    transparent: 'active:ring-transparent',
+  }
+  // active:bg color class
+  protected static bgActiveColor: ColorClass = {
+    primary: 'active:bg-primary',
+    secondary: 'active:bg-secondary',
+    success: 'active:bg-success',
+    danger: 'active:bg-danger',
+    info: 'active:bg-info',
+    warning: 'active:bg-warning',
+    'light-1': 'active:bg-light-1',
+    'light-2': 'active:bg-light-2',
+    'light-3': 'active:bg-light-3',
+    'light-4': 'active:bg-light-4',
+    'dark-1': 'active:bg-dark-1',
+    'dark-2': 'active:bg-dark-2',
+    'dark-3': 'active:bg-dark-3',
+    'dark-4': 'active:bg-dark-4',
+    black: 'active:bg-black',
+    white: 'active:bg-white',
+    transparent: 'active:bg-transparent',
+  }
+  // h1 class
+  protected static heading1: HeaderSizeClass = {
+    sm: 'h1-sm',
+    md: 'h1-md',
+    lg: 'h1-lg',
+    xl: 'h1-xl',
+  }
+  // h2 class
+  protected static heading2: HeaderSizeClass = {
+    sm: 'h2-sm',
+    md: 'h2-md',
+    lg: 'h2-lg',
+    xl: 'h2-xl',
+  }
+  // h3 class
+  protected static heading3: HeaderSizeClass = {
+    sm: 'h3-sm',
+    md: 'h3-md',
+    lg: 'h3-lg',
+    xl: 'h3-xl',
+  }
+  // h4 class
+  protected static heading4: HeaderSizeClass = {
+    sm: 'h4-sm',
+    md: 'h4-md',
+    lg: 'h4-lg',
+    xl: 'h4-xl',
+  }
+  // body text class
+  protected static bodyText: BodyTextClass = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    md: 'text-md',
+    lg: 'text-lg',
+    xl: 'text-xl',
+  }
+  // font weight class
+  protected static fontweight: FontWeightClass = {
+    light: 'font-light',
+    normal: 'font-normal',
+    bold: 'font-bold',
+  }
+  // border color classes
+  protected static borderColor: ColorClass = {
+    primary: 'border-primary',
+    secondary: 'border-secondary',
+    success: 'border-success',
+    danger: 'border-danger',
+    info: 'border-info',
+    warning: 'border-warning',
+    'light-1': 'border-light-1',
+    'light-2': 'border-light-2',
+    'light-3': 'border-light-3',
+    'light-4': 'border-light-4',
+    'dark-1': 'border-dark-1',
+    'dark-2': 'border-dark-2',
+    'dark-3': 'border-dark-3',
+    'dark-4': 'border-dark-4',
+    black: 'border-black',
+    white: 'border-white',
+    transparent: 'border-transparent',
+  }
+  protected static borderXColor: ColorClass = {
+    primary: 'border-x-primary',
+    secondary: 'border-x-secondary',
+    success: 'border-x-success',
+    danger: 'border-x-danger',
+    info: 'border-x-info',
+    warning: 'border-x-warning',
+    'light-1': 'border-x-light-1',
+    'light-2': 'border-x-light-2',
+    'light-3': 'border-x-light-3',
+    'light-4': 'border-x-light-4',
+    'dark-1': 'border-x-dark-1',
+    'dark-2': 'border-x-dark-2',
+    'dark-3': 'border-x-dark-3',
+    'dark-4': 'border-x-dark-4',
+    black: 'border-x-black',
+    white: 'border-x-white',
+    transparent: 'border-x-transparent',
+  }
+  protected static borderYColor: ColorClass = {
+    primary: 'border-y-primary',
+    secondary: 'border-y-secondary',
+    success: 'border-y-success',
+    danger: 'border-y-danger',
+    info: 'border-y-info',
+    warning: 'border-y-warning',
+    'light-1': 'border-y-light-1',
+    'light-2': 'border-y-light-2',
+    'light-3': 'border-y-light-3',
+    'light-4': 'border-y-light-4',
+    'dark-1': 'border-y-dark-1',
+    'dark-2': 'border-y-dark-2',
+    'dark-3': 'border-y-dark-3',
+    'dark-4': 'border-y-dark-4',
+    black: 'border-y-black',
+    white: 'border-y-white',
+    transparent: 'border-y-transparent',
+  }
+  protected static borderTopColor: ColorClass = {
+    primary: 'border-t-primary',
+    secondary: 'border-t-secondary',
+    success: 'border-t-success',
+    danger: 'border-t-danger',
+    info: 'border-t-info',
+    warning: 'border-t-warning',
+    'light-1': 'border-t-light-1',
+    'light-2': 'border-t-light-2',
+    'light-3': 'border-t-light-3',
+    'light-4': 'border-t-light-4',
+    'dark-1': 'border-t-dark-1',
+    'dark-2': 'border-t-dark-2',
+    'dark-3': 'border-t-dark-3',
+    'dark-4': 'border-t-dark-4',
+    black: 'border-t-black',
+    white: 'border-t-white',
+    transparent: 'border-t-transparent',
+  }
+  protected static borderLeftColor: ColorClass = {
+    primary: 'border-l-primary',
+    secondary: 'border-l-secondary',
+    success: 'border-l-success',
+    danger: 'border-l-danger',
+    info: 'border-l-info',
+    warning: 'border-l-warning',
+    'light-1': 'border-l-light-1',
+    'light-2': 'border-l-light-2',
+    'light-3': 'border-l-light-3',
+    'light-4': 'border-l-light-4',
+    'dark-1': 'border-l-dark-1',
+    'dark-2': 'border-l-dark-2',
+    'dark-3': 'border-l-dark-3',
+    'dark-4': 'border-l-dark-4',
+    black: 'border-l-black',
+    white: 'border-l-white',
+    transparent: 'border-l-transparent',
+  }
+  protected static borderBottomColor: ColorClass = {
+    primary: 'border-b-primary',
+    secondary: 'border-b-secondary',
+    success: 'border-b-success',
+    danger: 'border-b-danger',
+    info: 'border-b-info',
+    warning: 'border-b-warning',
+    'light-1': 'border-b-light-1',
+    'light-2': 'border-b-light-2',
+    'light-3': 'border-b-light-3',
+    'light-4': 'border-b-light-4',
+    'dark-1': 'border-b-dark-1',
+    'dark-2': 'border-b-dark-2',
+    'dark-3': 'border-b-dark-3',
+    'dark-4': 'border-b-dark-4',
+    black: 'border-b-black',
+    white: 'border-b-white',
+    transparent: 'border-b-transparent',
+  }
+  // Border width class for top/left
+  protected static borderTopWidth: BorderWidth = {
+    1: 'border-t-[1px]',
+    2: 'border-t-[2px]',
+    3: 'border-t-[3px]',
+    4: 'border-t-[4px]',
+    5: 'border-t-[5px]',
+    6: 'border-t-[6px]',
+    7: 'border-t-[7px]',
+    8: 'border-t-[8px]',
+    9: 'border-t-[9px]',
+    10: 'border-t-[10px]',
+    11: 'border-t-[11px]',
+    12: 'border-t-[12px]',
+  }
+  protected static borderLeftWidth: BorderWidth = {
+    1: 'border-l-[1px]',
+    2: 'border-l-[2px]',
+    3: 'border-l-[3px]',
+    4: 'border-l-[4px]',
+    5: 'border-l-[5px]',
+    6: 'border-l-[6px]',
+    7: 'border-l-[7px]',
+    8: 'border-l-[8px]',
+    9: 'border-l-[9px]',
+    10: 'border-l-[10px]',
+    11: 'border-l-[11px]',
+    12: 'border-l-[12px]',
+  }
+  protected static backgroundOpacity: Opacity = {
+    10: 'bg-opacity-10',
+    20: 'bg-opacity-20',
+    30: 'bg-opacity-30',
+    40: 'bg-opacity-40',
+    50: 'bg-opacity-50',
+    60: 'bg-opacity-60',
+    70: 'bg-opacity-70',
+    80: 'bg-opacity-80',
+    90: 'bg-opacity-90',
+    100: 'bg-opacity-100',
+  }
+  protected static opacity: Opacity = {
+    10: 'opacity-10',
+    20: 'opacity-20',
+    30: 'opacity-30',
+    40: 'opacity-40',
+    50: 'opacity-50',
+    60: 'opacity-60',
+    70: 'opacity-70',
+    80: 'opacity-80',
+    90: 'opacity-90',
+    100: 'opacity-100',
+  }
+  protected static marginBottom: Spacing = {
+    '0': 'mb-0',
+    '3xs': 'mb-3xs',
+    '2xs': 'mb-2xs',
+    xs: 'mb-xs',
+    sm: 'mb-sm',
+    md: 'mb-md',
+    lg: 'mb-lg',
+    xl: 'mb-xl',
+    '2xl': 'mb-2xl',
+    '3xl': 'mb-3xl',
+  }
+}
+
+export default MCLTheme

package/theme/theme.types.ts

@@ -0,0 +1,57 @@
+// Colors for bg-color and font-color
+export type ColorPalette =
+  | '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'
+// Available spacings
+export type SpacingLevel =
+  | '0'
+  | '3xs'
+  | '2xs'
+  | 'xs'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | '2xl'
+  | '3xl'
+// Available heading levels
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4'
+// Available heading sizes
+export type HeadingSize = 'sm' | 'md' | 'lg' | 'xl'
+// Available body text sizes
+export type BodyText = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+// Font weight
+export type FontWeight = 'light' | 'normal' | 'bold'
+// border positions
+export type Position = 'left' | 'right'
+// link targets
+export type CtaTarget = '_self' | '_blank'
+// Highlight positions
+export type Location = 'left' | 'top'
+// available ranges
+export type Range<T extends number> = number extends T ? number : _Range<T, []>
+export type _Range<
+  T extends number,
+  R extends unknown[]
+> = R['length'] extends T ? R['length'] : R['length'] | _Range<T, [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'
+export type ColumnWidth = 25 | 50 | 75 | 100
+export type CrossOrigin = 'use-credentials' | 'anonymous'
+export type InputType = 'text' | 'email' | 'password'

package/themeVariables.cjs

@@ -0,0 +1,210 @@
+const mclTheme = {
+  fontSize: {
+    xs: '12px',
+    sm: '14px',
+    md: '16px',
+    lg: '18px',
+    xl: '20px',
+  },
+  container: {
+    center: true,
+    screens: {
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+    },
+  },
+  extend: {
+    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',
+    },
+  },
+}
+
+const mclHeading = ({ addComponents, theme }) => {
+  addComponents({
+    body: {
+      // default font size
+      fontSize: '1rem',
+      lineHeight: '1.5',
+    },
+    h1: {
+      // default medium size
+      fontSize: '30px',
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+      '@screen  md': { fontSize: '30px' },
+      '@screen lg': { fontSize: '48px' },
+    },
+    '.h1-sm': {
+      fontSize: '24px',
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+      '@screen  md': { fontSize: '24px' },
+      '@screen lg': { fontSize: '36px' },
+    },
+    '.h1-md': {
+      fontSize: '30px',
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+      '@screen  md': { fontSize: '30px' },
+      '@screen lg': { fontSize: '48px' },
+    },
+    '.h1-lg': {
+      fontSize: '36px',
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+      '@screen  md': { fontSize: '36px' },
+      '@screen lg': { fontSize: '56px' },
+    },
+    '.h1-xl': {
+      fontSize: '56px',
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+      '@screen  md': { fontSize: '56px' },
+      '@screen lg': { fontSize: '72px' },
+    },
+    h2: {
+      // default medium size
+      fontSize: '24px',
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+      '@screen  md': { fontSize: '24px' },
+      '@screen lg': { fontSize: '36px' },
+    },
+    '.h2-sm': {
+      fontSize: '18px',
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+      '@screen  md': { fontSize: '18px' },
+      '@screen lg': { fontSize: '24px' },
+    },
+    '.h2-md': {
+      fontSize: '24px',
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+      '@screen  md': { fontSize: '24px' },
+      '@screen lg': { fontSize: '36px' },
+    },
+    '.h2-lg': {
+      fontSize: '30px',
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+      '@screen  md': { fontSize: '30px' },
+      '@screen lg': { fontSize: '48px' },
+    },
+    '.h2-xl': {
+      fontSize: '48px',
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+      '@screen  md': { fontSize: '48px' },
+      '@screen lg': { fontSize: '60px' },
+    },
+    h3: {
+      // default medium size
+      fontSize: '18px',
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+      '@screen  md': { fontSize: '18px' },
+      '@screen lg': { fontSize: '20px' },
+    },
+    '.h3-sm': {
+      fontSize: '16px',
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+      '@screen  md': { fontSize: '16px' },
+      '@screen lg': { fontSize: '16px' },
+    },
+    '.h3-md': {
+      fontSize: '18px',
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+      '@screen  md': { fontSize: '18px' },
+      '@screen lg': { fontSize: '20px' },
+    },
+    '.h3-lg': {
+      fontSize: '18px',
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+      '@screen  md': { fontSize: '18px' },
+      '@screen lg': { fontSize: '24px' },
+    },
+    '.h3-xl': {
+      fontSize: '30px',
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+      '@screen  md': { fontSize: '30px' },
+      '@screen lg': { fontSize: '36px' },
+    },
+    h4: {
+      // default medium size
+      fontSize: '16px',
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+      '@screen  md': { fontSize: '16px' },
+      '@screen lg': { fontSize: '18px' },
+    },
+    'h4-sm': {
+      fontSize: '14px',
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+      '@screen  md': { fontSize: '14px' },
+      '@screen lg': { fontSize: '16px' },
+    },
+    'h4-md': {
+      fontSize: '16px',
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+      '@screen  md': { fontSize: '16px' },
+      '@screen lg': { fontSize: '18px' },
+    },
+    'h4-lg': {
+      fontSize: '16px',
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+      '@screen  md': { fontSize: '16px' },
+      '@screen lg': { fontSize: '20px' },
+    },
+    'h4-xl': {
+      fontSize: '24px',
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+      '@screen  md': { fontSize: '24px' },
+      '@screen lg': { fontSize: '30px' },
+    },
+    '.mcl-link': {
+      color: theme('colors.primary'),
+      textDecoration: 'underline',
+    },
+  })
+}
+
+module.exports = {
+  mclTheme: mclTheme,
+  mclHeading: mclHeading,
+}