@bobbykim/manguito-theme 0.1.4 → 0.3.0

package/theme/theme.ts

@@ -3,87 +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 type Alignment = {
+  [key in Position]: string
 }
 
 abstract class MCLTheme {
@@ -167,6 +120,26 @@ abstract class MCLTheme {
     white: 'after:bg-white',
     transparent: 'after:bg-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',
+  }
   // text color class
   protected static textColor: ColorClass = {
     primary: 'text-primary',
@@ -307,25 +280,84 @@ abstract class MCLTheme {
     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',
+  // 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',
+    secondary: 'btn-secondary',
+    success: 'btn-success',
+    danger: 'btn-danger',
+    info: 'btn-info',
+    warning: 'btn-warning',
+    'light-1': 'btn-light-1',
+    'light-2': 'btn-light-2',
+    'light-3': 'btn-light-3',
+    'light-4': 'btn-light-4',
+    'dark-1': 'btn-dark-1',
+    'dark-2': 'btn-dark-2',
+    'dark-3': 'btn-dark-3',
+    'dark-4': 'btn-dark-4',
+    black: 'btn-black',
+    white: 'btn-white',
+    transparent: 'btn-transparent',
+  }
+  // list color class
+  protected static listColor: ColorClass = {
+    primary: 'mcl-list-primary',
+    secondary: 'mcl-list-secondary',
+    success: 'mcl-list-success',
+    danger: 'mcl-list-danger',
+    info: 'mcl-list-info',
+    warning: 'mcl-list-warning',
+    'light-1': 'mcl-list-light-1',
+    'light-2': 'mcl-list-light-2',
+    'light-3': 'mcl-list-light-3',
+    'light-4': 'mcl-list-light-4',
+    'dark-1': 'mcl-list-dark-1',
+    'dark-2': 'mcl-list-dark-2',
+    'dark-3': 'mcl-list-dark-3',
+    'dark-4': 'mcl-list-dark-4',
+    black: 'mcl-list-black',
+    white: 'mcl-list-white',
+    transparent: 'mcl-list-transparent',
   }
   // h1 class
   protected static heading1: HeaderSizeClass = {
@@ -446,6 +478,25 @@ abstract class MCLTheme {
     white: 'border-t-white',
     transparent: 'border-t-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',
+  }
   protected static borderLeftColor: ColorClass = {
     primary: 'border-l-primary',
     secondary: 'border-l-secondary',
@@ -465,26 +516,68 @@ abstract class MCLTheme {
     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',
+  protected static borderRightColor: ColorClass = {
+    primary: 'border-r-primary',
+    secondary: 'border-r-secondary',
+    success: 'border-r-success',
+    danger: 'border-r-danger',
+    info: 'border-r-info',
+    warning: 'border-r-warning',
+    'light-1': 'border-r-light-1',
+    'light-2': 'border-r-light-2',
+    'light-3': 'border-r-light-3',
+    'light-4': 'border-r-light-4',
+    'dark-1': 'border-r-dark-1',
+    'dark-2': 'border-r-dark-2',
+    'dark-3': 'border-r-dark-3',
+    'dark-4': 'border-r-dark-4',
+    black: 'border-r-black',
+    white: 'border-r-white',
+    transparent: 'border-r-transparent',
+  }
+  // Border width class
+  protected static borderWidth: BorderWidth = {
+    1: 'border-[1px]',
+    2: 'border-[2px]',
+    3: 'border-[3px]',
+    4: 'border-[4px]',
+    5: 'border-[5px]',
+    6: 'border-[6px]',
+    7: 'border-[7px]',
+    8: 'border-[8px]',
+    9: 'border-[9px]',
+    10: 'border-[10px]',
+    11: 'border-[11px]',
+    12: 'border-[12px]',
+  }
+  protected static borderXWidth: BorderWidth = {
+    1: 'border-x-[1px]',
+    2: 'border-x-[2px]',
+    3: 'border-x-[3px]',
+    4: 'border-x-[4px]',
+    5: 'border-x-[5px]',
+    6: 'border-x-[6px]',
+    7: 'border-x-[7px]',
+    8: 'border-x-[8px]',
+    9: 'border-x-[9px]',
+    10: 'border-x-[10px]',
+    11: 'border-x-[11px]',
+    12: 'border-x-[12px]',
+  }
+  protected static borderYWidth: BorderWidth = {
+    1: 'border-y-[1px]',
+    2: 'border-y-[2px]',
+    3: 'border-y-[3px]',
+    4: 'border-y-[4px]',
+    5: 'border-y-[5px]',
+    6: 'border-y-[6px]',
+    7: 'border-y-[7px]',
+    8: 'border-y-[8px]',
+    9: 'border-y-[9px]',
+    10: 'border-y-[10px]',
+    11: 'border-y-[11px]',
+    12: 'border-y-[12px]',
   }
-  // Border width class for top/left
   protected static borderTopWidth: BorderWidth = {
     1: 'border-t-[1px]',
     2: 'border-t-[2px]',
@@ -499,6 +592,20 @@ abstract class MCLTheme {
     11: 'border-t-[11px]',
     12: 'border-t-[12px]',
   }
+  protected static borderBottomWidth: BorderWidth = {
+    1: 'border-b-[1px]',
+    2: 'border-b-[2px]',
+    3: 'border-b-[3px]',
+    4: 'border-b-[4px]',
+    5: 'border-b-[5px]',
+    6: 'border-b-[6px]',
+    7: 'border-b-[7px]',
+    8: 'border-b-[8px]',
+    9: 'border-b-[9px]',
+    10: 'border-b-[10px]',
+    11: 'border-b-[11px]',
+    12: 'border-b-[12px]',
+  }
   protected static borderLeftWidth: BorderWidth = {
     1: 'border-l-[1px]',
     2: 'border-l-[2px]',
@@ -513,6 +620,21 @@ abstract class MCLTheme {
     11: 'border-l-[11px]',
     12: 'border-l-[12px]',
   }
+  protected static borderRightWidth: BorderWidth = {
+    1: 'border-r-[1px]',
+    2: 'border-r-[2px]',
+    3: 'border-r-[3px]',
+    4: 'border-r-[4px]',
+    5: 'border-r-[5px]',
+    6: 'border-r-[6px]',
+    7: 'border-r-[7px]',
+    8: 'border-r-[8px]',
+    9: 'border-r-[9px]',
+    10: 'border-r-[10px]',
+    11: 'border-r-[11px]',
+    12: 'border-r-[12px]',
+  }
+  // opacity
   protected static backgroundOpacity: Opacity = {
     10: 'bg-opacity-10',
     20: 'bg-opacity-20',
@@ -537,6 +659,55 @@ abstract class MCLTheme {
     90: 'opacity-90',
     100: 'opacity-100',
   }
+  // spacing: margin
+  protected static margin: Spacing = {
+    '0': 'm-0',
+    '3xs': 'm-3xs',
+    '2xs': 'm-2xs',
+    xs: 'm-xs',
+    sm: 'm-sm',
+    md: 'm-md',
+    lg: 'm-lg',
+    xl: 'm-xl',
+    '2xl': 'm-2xl',
+    '3xl': 'm-3xl',
+  }
+  protected static marginX: Spacing = {
+    '0': 'mx-0',
+    '3xs': 'mx-3xs',
+    '2xs': 'mx-2xs',
+    xs: 'mx-xs',
+    sm: 'mx-sm',
+    md: 'mx-md',
+    lg: 'mx-lg',
+    xl: 'mx-xl',
+    '2xl': 'mx-2xl',
+    '3xl': 'mx-3xl',
+  }
+  protected static marginY: Spacing = {
+    '0': 'my-0',
+    '3xs': 'my-3xs',
+    '2xs': 'my-2xs',
+    xs: 'my-xs',
+    sm: 'my-sm',
+    md: 'my-md',
+    lg: 'my-lg',
+    xl: 'my-xl',
+    '2xl': 'my-2xl',
+    '3xl': 'my-3xl',
+  }
+  protected static marginTop: Spacing = {
+    '0': 'mt-0',
+    '3xs': 'mt-3xs',
+    '2xs': 'mt-2xs',
+    xs: 'mt-xs',
+    sm: 'mt-sm',
+    md: 'mt-md',
+    lg: 'mt-lg',
+    xl: 'mt-xl',
+    '2xl': 'mt-2xl',
+    '3xl': 'mt-3xl',
+  }
   protected static marginBottom: Spacing = {
     '0': 'mb-0',
     '3xs': 'mb-3xs',
@@ -549,6 +720,115 @@ abstract class MCLTheme {
     '2xl': 'mb-2xl',
     '3xl': 'mb-3xl',
   }
+  protected static marginLeft: Spacing = {
+    '0': 'ml-0',
+    '3xs': 'ml-3xs',
+    '2xs': 'ml-2xs',
+    xs: 'ml-xs',
+    sm: 'ml-sm',
+    md: 'ml-md',
+    lg: 'ml-lg',
+    xl: 'ml-xl',
+    '2xl': 'ml-2xl',
+    '3xl': 'ml-3xl',
+  }
+  protected static marginRight: Spacing = {
+    '0': 'mr-0',
+    '3xs': 'mr-3xs',
+    '2xs': 'mr-2xs',
+    xs: 'mr-xs',
+    sm: 'mr-sm',
+    md: 'mr-md',
+    lg: 'mr-lg',
+    xl: 'mr-xl',
+    '2xl': 'mr-2xl',
+    '3xl': 'mr-3xl',
+  }
+  // spacing: padding
+  protected static padding: Spacing = {
+    '0': 'p-0',
+    '3xs': 'p-3xs',
+    '2xs': 'p-2xs',
+    xs: 'p-xs',
+    sm: 'p-sm',
+    md: 'p-md',
+    lg: 'p-lg',
+    xl: 'p-xl',
+    '2xl': 'p-2xl',
+    '3xl': 'p-3xl',
+  }
+  protected static paddingX: Spacing = {
+    '0': 'px-0',
+    '3xs': 'px-3xs',
+    '2xs': 'px-2xs',
+    xs: 'px-xs',
+    sm: 'px-sm',
+    md: 'px-md',
+    lg: 'px-lg',
+    xl: 'px-xl',
+    '2xl': 'px-2xl',
+    '3xl': 'px-3xl',
+  }
+  protected static paddingY: Spacing = {
+    '0': 'py-0',
+    '3xs': 'py-3xs',
+    '2xs': 'py-2xs',
+    xs: 'py-xs',
+    sm: 'py-sm',
+    md: 'py-md',
+    lg: 'py-lg',
+    xl: 'py-xl',
+    '2xl': 'py-2xl',
+    '3xl': 'py-3xl',
+  }
+  protected static paddingTop: Spacing = {
+    '0': 'pt-0',
+    '3xs': 'pt-3xs',
+    '2xs': 'pt-2xs',
+    xs: 'pt-xs',
+    sm: 'pt-sm',
+    md: 'pt-md',
+    lg: 'pt-lg',
+    xl: 'pt-xl',
+    '2xl': 'pt-2xl',
+    '3xl': 'pt-3xl',
+  }
+  protected static paddingBottom: Spacing = {
+    '0': 'pb-0',
+    '3xs': 'pb-3xs',
+    '2xs': 'pb-2xs',
+    xs: 'pb-xs',
+    sm: 'pb-sm',
+    md: 'pb-md',
+    lg: 'pb-lg',
+    xl: 'pb-xl',
+    '2xl': 'pb-2xl',
+    '3xl': 'pb-3xl',
+  }
+  protected static paddingLeft: Spacing = {
+    '0': 'pl-0',
+    '3xs': 'pl-3xs',
+    '2xs': 'pl-2xs',
+    xs: 'pl-xs',
+    sm: 'pl-sm',
+    md: 'pl-md',
+    lg: 'pl-lg',
+    xl: 'pl-xl',
+    '2xl': 'pl-2xl',
+    '3xl': 'pl-3xl',
+  }
+  protected static paddingRight: Spacing = {
+    '0': 'pr-0',
+    '3xs': 'pr-3xs',
+    '2xs': 'pr-2xs',
+    xs: 'pr-xs',
+    sm: 'pr-sm',
+    md: 'pr-md',
+    lg: 'pr-lg',
+    xl: 'pr-xl',
+    '2xl': 'pr-2xl',
+    '3xl': 'pr-3xl',
+  }
   // spacing gap class for flex/grid
   protected static gap: Spacing = {
     '0': 'gap-0',
@@ -562,6 +842,12 @@ abstract class MCLTheme {
     '2xl': 'gap-2xl',
     '3xl': 'gap-3xl',
   }
+  // text alignment
+  protected static textAlign: Alignment = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+  }
 }
 
 export default MCLTheme

package/theme/theme.types.ts

@@ -38,17 +38,26 @@ export type BodyText = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 // Font weight
 export type FontWeight = 'light' | 'normal' | 'bold'
 // border positions
-export type Position = 'left' | 'right'
+export type Position = 'left' | 'center' | 'right'
 // link targets
 export type CtaTarget = '_self' | '_blank'
 // Highlight positions
-export type Location = 'left' | 'top'
+export type Location = 'left' | 'right' | 'top' | 'bottom'
 // available ranges
-export type Range<T extends number> = number extends T ? number : _Range<T, []>
-export type _Range<
+type _RangeArray<
   T extends number,
-  R extends unknown[]
-> = R['length'] extends T ? R['length'] : R['length'] | _Range<T, [T, ...R]>
+  R extends unknown[] = []
+> = R['length'] extends T ? R : _RangeArray<T, [...R, 1]>
+type IntRange<
+  T extends number[],
+  E extends number,
+  R extends number = never
+> = T['length'] extends E ? R | E : IntRange<[...T, 1], E, R | T['length']>
+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'