@bobbykim/manguito-theme 0.1.4 → 0.3.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',
+      },
+    }),
+  ],
 }
 ```
 
@@ -51,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,28 @@
-import GenerateMCLClass from './theme/generateClass'
-import type { ClassType, InputType } from './theme/generateClass'
+import GenerateMCLClass, {
+  colorType,
+  textType,
+  borderWidthType,
+  scaleType,
+} from './theme'
+import type { ClassType, InputType } from './theme/index.js'
 
 const generateClass = (type: ClassType, value: InputType): string => {
+  console.log('running generate class')
   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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobbykim/manguito-theme",
-  "version": "0.1.4",
+  "version": "0.3.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": "690a0c4e354da9ec206a97e04508d078506fe2bd"
+  "gitHead": "2c169fa8137650bf3fbc02ef2158c4c4e147a9ce"
 }