@bobbykim/manguito-theme 0.2.0 → 0.3.0

package/README.md

@@ -92,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'
-import type { ClassType, InputType } from './theme'
+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.2.0",
+  "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": "aaee823ffe3d684532eb08f0553b96a4a5475a88"
+  "gitHead": "2c169fa8137650bf3fbc02ef2158c4c4e147a9ce"
 }

package/theme/index.ts

@@ -1,4 +1,4 @@
-import MCLTheme from './theme'
+import MCLTheme from './theme.js'
 import type {
   ColorPalette,
   HeadingSize,
@@ -16,68 +16,82 @@ import type {
  * @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 const colorType = [
+  'BGCOLOR',
+  'BEFOREBG',
+  'AFTERBG',
+  'HVBGCOLOR',
+  'ACTIVEBG',
+  'TEXTCOLOR',
+  'HVTEXTCOLOR',
+  'DISABLEDTEXTCOLOR',
+  'SVGFILL',
+  'RINGCOLOR',
+  'FOCUSRING',
+  'ACTIVERING',
+  'OFFSETRING',
+  'DUMMYCOLOR',
+  'BTNCOLOR',
+  'LISTCOLOR',
+  'BORDER',
+  'BORDERX',
+  'BORDERY',
+  'BORDERT',
+  'BORDERB',
+  'BORDERL',
+  'BORDERR',
+] as const
+
+export const textType = [
+  'H1',
+  'H2',
+  'H3',
+  'H4',
+  'BODYTEXT',
+  'FONTWEIGHT',
+  'TEXTALIGN',
+] as const
+export const borderWidthType = [
+  'BORDERW',
+  'BORDERXW',
+  'BORDERYW',
+  'BORDERTW',
+  'BORDERBW',
+  'BORDERLW',
+  'BORDERRW',
+] as const
+export const scaleType = ['BGOPACITY', 'OPACITY'] as const
+export const spacingType = [
+  'MARGIN',
+  'MARGINX',
+  'MARGINY',
+  'MARGINT',
+  'MARGINB',
+  'MARGINL',
+  'MARGINR',
+  'PADDING',
+  'PADDINGX',
+  'PADDINGY',
+  'PADDINGT',
+  'PADDINGB',
+  'PADDINGL',
+  'PADDINGR',
+  'GAP',
+] as const
+const allType = [
+  ...colorType,
+  ...textType,
+  ...borderWidthType,
+  ...scaleType,
+  ...spacingType,
+] as const
+
+export type ClassType = (typeof allType)[number]
+export type ColorClassType = (typeof colorType)[number]
+export type TextClassType = (typeof textType)[number]
+export type BorderWidthClassType = (typeof borderWidthType)[number]
+export type ScaleClassType = (typeof scaleType)[number]
+export type SpacingClassType = (typeof spacingType)[number]
 
 export type InputType =
   | ColorPalette
@@ -98,9 +112,9 @@ class GenerateMCLClass extends MCLTheme {
     this.classType = classType
     this.classValue = classValue
   }
-  generateClassName(): string {
+  // handle color classes types
+  generateColorClass(): string {
     switch (this.classType) {
-      // case: color class
       case 'BGCOLOR':
         return this.getBgColorClass()
       case 'HVBGCOLOR':
@@ -125,11 +139,12 @@ class GenerateMCLClass extends MCLTheme {
         return this.getFocusRingColorClass()
       case 'ACTIVERING':
         return this.getActiveRingColorClass()
+      case 'OFFSETRING':
+        return this.getRingOffsetColorClass()
       case 'BTNCOLOR':
         return this.getBtnColorClass()
       case 'LISTCOLOR':
         return this.getRingColorClass()
-      // case: border color class
       case 'BORDER':
         return this.getBorderColorClass()
       case 'BORDERX':
@@ -144,6 +159,13 @@ class GenerateMCLClass extends MCLTheme {
         return this.getBorderLeftColorClass()
       case 'BORDERR':
         return this.getBorderRightColorClass()
+      default:
+        return ' '
+    }
+  }
+  // handle text class types
+  generateTextClass(): string {
+    switch (this.classType) {
       // case: heading text class
       case 'H1':
         return this.getH1Class()
@@ -162,6 +184,13 @@ class GenerateMCLClass extends MCLTheme {
       // case: text alignment class
       case 'TEXTALIGN':
         return this.getTextAlignClass()
+      default:
+        return ' '
+    }
+  }
+  // handle border width class types
+  generateBorderWidthClass(): string {
+    switch (this.classType) {
       // case: border width class
       case 'BORDERW':
         return this.getBorderWidthClass()
@@ -177,13 +206,24 @@ class GenerateMCLClass extends MCLTheme {
         return this.getBorderLeftWidthClass()
       case 'BORDERRW':
         return this.getBorderWidthClass()
+      default:
+        return ' '
+    }
+  }
+  generateScaleClass(): string {
+    switch (this.classType) {
       // case: opacity class
       case 'OPACITY':
         return this.getOpacityClass()
       case 'BGOPACITY':
         return this.getBgOpacityClass()
-      // case: spacing class
-      // margins
+      default:
+        return ' '
+    }
+  }
+  generateSpacingClass(): string {
+    switch (this.classType) {
+      // case: margins
       case 'MARGIN':
         return this.getMarginClass()
       case 'MARGINX':
@@ -198,7 +238,7 @@ class GenerateMCLClass extends MCLTheme {
         return this.getMarginLeftClass()
       case 'MARGINR':
         return this.getMarginRightClass()
-      // paddings
+      // case: paddings
       case 'PADDING':
         return this.getPaddingClass()
       case 'PADDINGX':
@@ -213,7 +253,7 @@ class GenerateMCLClass extends MCLTheme {
         return this.getPaddingLeftClass()
       case 'PADDINGR':
         return this.getPaddingRightClass()
-      // gap
+      // case: gap
       case 'GAP':
         return this.getGapClass()
       default:
@@ -297,6 +337,12 @@ class GenerateMCLClass extends MCLTheme {
     }
     return MCLTheme.ringActiveColor[this.classValue as ColorPalette]
   }
+  getRingOffsetColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.ringOffsetColor[this.classValue as ColorPalette]
+  }
   // btn & list
   getBtnColorClass(): string {
     if (!this.validateColorType) {
@@ -604,6 +650,9 @@ class GenerateMCLClass extends MCLTheme {
     }
     return validatorRe.test(this.classValue)
   }
+  dummyMethod(): any {
+    return this.getRingOffsetColorClass()
+  }
 }
 
 export default GenerateMCLClass

package/theme/theme.ts

@@ -3,93 +3,40 @@
  * @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,
+  Position,
+} from './theme.types'
 
-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 type ColorClass = {
+  [key in ColorPalette]: string
 }
-
-export interface HeaderSizeClass {
-  sm: string
-  md: string
-  lg: string
-  xl: string
+export type HeaderSizeClass = {
+  [key in HeadingSize]: string
 }
-
-export interface BodyTextClass {
-  xs: string
-  sm: string
-  md: string
-  lg: string
-  xl: string
+export type BodyTextClass = {
+  [key in BodyText]: string
 }
-
-export interface FontWeightClass {
-  light: string
-  normal: string
-  bold: string
+export type FontWeightClass = {
+  [key in FontWeight]: 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 type BorderWidth = {
+  [key in Range<1, 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 type Opacity = {
+  [key in OpacityRange]: string
 }
-
-export interface Spacing {
-  '0': string
-  '3xs': string
-  '2xs': string
-  xs: string
-  sm: string
-  md: string
-  lg: string
-  xl: string
-  '2xl': string
-  '3xl': string
+export type Spacing = {
+  [key in SpacingLevel]: string
 }
-
-export interface Alignment {
-  left: string
-  center: string
-  right: string
+export type Alignment = {
+  [key in Position]: string
 }
 
 abstract class MCLTheme {
@@ -333,6 +280,45 @@ abstract class MCLTheme {
     white: 'active:ring-white',
     transparent: 'active:ring-transparent',
   }
+  // ring-offset color class
+  protected static ringOffsetColor: ColorClass = {
+    primary: 'ring-offset-primary',
+    secondary: 'ring-offset-secondary',
+    success: 'ring-offset-success',
+    danger: 'ring-offset-danger',
+    info: 'ring-offset-info',
+    warning: 'ring-offset-warning',
+    'light-1': 'ring-offset-light-1',
+    'light-2': 'ring-offset-light-2',
+    'light-3': 'ring-offset-light-3',
+    'light-4': 'ring-offset-light-4',
+    'dark-1': 'ring-offset-dark-1',
+    'dark-2': 'ring-offset-dark-2',
+    'dark-3': 'ring-offset-dark-3',
+    'dark-4': 'ring-offset-dark-4',
+    black: 'ring-offset-black',
+    white: 'ring-offset-white',
+    transparent: 'ring-offset-transparent',
+  }
+  protected static dummyColor: ColorClass = {
+    primary: 'ring-offset-primary',
+    secondary: 'ring-offset-secondary',
+    success: 'ring-offset-success',
+    danger: 'ring-offset-danger',
+    info: 'ring-offset-info',
+    warning: 'ring-offset-warning',
+    'light-1': 'ring-offset-light-1',
+    'light-2': 'ring-offset-light-2',
+    'light-3': 'ring-offset-light-3',
+    'light-4': 'ring-offset-light-4',
+    'dark-1': 'ring-offset-dark-1',
+    'dark-2': 'ring-offset-dark-2',
+    'dark-3': 'ring-offset-dark-3',
+    'dark-4': 'ring-offset-dark-4',
+    black: 'ring-offset-black',
+    white: 'ring-offset-white',
+    transparent: 'ring-offset-transparent',
+  }
   // btn color class
   protected static btnColor: ColorClass = {
     primary: 'btn-primary',

package/theme/theme.types.ts

@@ -57,6 +57,7 @@ export type Range<T extends number, R extends number> = IntRange<
   _RangeArray<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'

package/themeVariables.cjs

@@ -4,7 +4,6 @@ const mclTheme = plugin.withOptions(
   () => {
     return ({ addBase, theme, addComponents, addUtilities, e }) => {
       const colors = theme('colors')
-      // console.log(colors)
       const listColors = Object.keys(colors).reduce((accumulator, key) => {
         if (typeof colors[key] === 'string') {
           return {
@@ -29,6 +28,34 @@ const mclTheme = plugin.withOptions(
           ),
         }
       }, {})
+      const linkColors = Object.keys(colors).reduce((accumulator, key) => {
+        const invalidKeys = ['current', 'transparent', 'inherit']
+        if (invalidKeys.includes(key)) {
+          return
+        }
+        if (typeof colors[key] === 'string') {
+          return {
+            ...accumulator,
+            [`.mcl-link.text-${e(key)}`]: {
+              '&:hover': {
+                [`@apply text-${key}/60`]: {},
+              },
+            },
+          }
+        }
+        const colorShades = Object.keys(colors[key])
+        return {
+          ...accumulator,
+          ...colorShades.reduce((acc, level) => ({
+            ...acc,
+            [`.mcl-link.text-${e(key)}-${level}`]: {
+              '&:hover': {
+                [`@apply text-${key}-${level}/60`]: {},
+              },
+            },
+          })),
+        }
+      })
       const btnColors = Object.keys(colors).reduce((accumulator, key) => {
         if (typeof colors[key] === 'string') {
           return {
@@ -56,6 +83,13 @@ const mclTheme = plugin.withOptions(
                 '@apply ring-0': {},
               },
             },
+            [`.btn.btn-progress.btn-${e(key)}`]: {
+              [`@apply before:bg-${key} border-${key} text-${key} bg-transparent`]:
+                {},
+              '&:hover, &:focus': {
+                '@apply text-white': {},
+              },
+            },
           }
         }
 
@@ -90,6 +124,13 @@ const mclTheme = plugin.withOptions(
                   '@apply ring-0': {},
                 },
               },
+              [`.btn.btn-progress.btn-${e(key)}-${level}`]: {
+                [`@apply before:bg-${key}-${level} border-${key}-${level} text-${key}-${level} bg-transparent`]:
+                  {},
+                '&:hover, &:focus': {
+                  '@apply text-white': {},
+                },
+              },
             }),
             {}
           ),
@@ -252,6 +293,10 @@ const mclTheme = plugin.withOptions(
         '.mcl-link': {
           color: theme('colors.primary'),
           textDecoration: 'underline',
+          '@apply transition-colors duration-200 ease-in': {},
+          '&:hover': {
+            '@apply text-primary/60': {},
+          },
         },
         '.mcl-list': {
           'list-style-position': 'inside',
@@ -325,10 +370,47 @@ const mclTheme = plugin.withOptions(
             '@apply bg-primary text-white bg-opacity-100': {},
           },
         },
+        '.btn.btn-progress': {
+          position: 'relative',
+          '&::before': {
+            content: '""',
+            position: 'absolute',
+            height: '100%',
+            width: '0',
+            bottom: '0',
+            left: '0',
+            transition: 'width 300ms linear',
+          },
+          '@apply before:bg-primary border-2 border-primary text-primary bg-transparent':
+            {},
+        },
+        '.btn.btn-progress > *': {
+          position: 'relative',
+        },
+        '.btn.btn-progress.btn-progress-r': {
+          '&::before': {
+            left: '100%',
+            transition: 'all 300ms linear',
+          },
+        },
+        '.btn.btn-progress:hover, .btn.btn-progress:focus': {
+          '@apply text-white': {},
+          '&::before': {
+            width: '100%',
+          },
+        },
+        '.btn.btn-progress.btn-progress-r:hover, .btn.btn-progress.btn-progress-r:focus':
+          {
+            '&::before': {
+              width: '100%',
+              left: '0',
+            },
+          },
       })
 
       addUtilities(listColors)
       addUtilities(btnColors)
+      addUtilities(linkColors)
     }
   },
   (options = {}) => {