export namespace TagProps {
  export type DarkMode = 'light' | 'auto' | 'dark' | 'dim'
  export type ThemeColor = 'comun' | 'leaf' | 'heart' | 'droplet' |

    'brick' | 'flower' | 'lip' | 'wine' | 'theater' | 'bat' | 'poizon' | 'eggplant' | 'ufo' | 'alien' | 'tombstone' | 'ninja' | 'moon' | 'rain' | 'unicorn' | 'axe' | 'gem' | 'soap' | 'drizzle' | 'building' | 'fish' | 'icicles' | 'water' | 'tree1' | 'tree2' | 'tree3' | 'battery' | 'seedle' | 'greenTea' | 'oak' | 'salad' | 'cloudy' | 'lemon' | 'angel' | 'parasol' | 'pizza' | 'thunder' | 'latte' | 'island' | 'shovel' | 'coffee' | 'carrot' | 'cactus' | 'volcano' | 'choco' | 'industry' | 'gun' | 'galaxy' |

    'line' | 'twitter' | 'amazon' | 'facebook' | 'android' | 'slackBlue' | 'slackGreen' | 'slackRed' | 'slackYellow' | 'slackBase' | 'googleBlue' | 'googleGreen' | 'googleYellow' | 'googleRed'

  export type Roundness = 0 | 1 | 2 | 3 | 4 | 5

  export type BasicElement = BasicTag & Params
  export type Params = Properties & {
    freeCSS?: React.CSSProperties

    UnderBreakPointStyles?: Properties

    ssEffectsOnActive?: Others.EffectsOnActive | Others.EffectsOnActive[] | false
    ssPushable?: boolean
    ssLastChildLossBorder?: 'bottom' | 'right' | false
  }

  export type BasicTag = {
    className?: string
    id?: string
    componentID?: string
  }
  export type Properties = Pargins.Params & Fonts.Params & Borders.Params & FlexGrids.Params & Sizes.Params & StyleSets.Params & {
    backgroundColor?: Others.BackgroundColor
    gradients?: {
      deg: number
      colors: string[]
    }

    // 0 => 0.thin
    // 1 => 0.normal
    // 2 => 1.remark
    // 3 => 3.remark
    // 4 => 4.remark
    // -1 => 0.remark.inset
    // -2 => 1.remark.inset
    // -3 => 2.remark.inset
    // boxShadow?: 0 | 1 | 2 | 3 | 4 | -1 | -2 | -3 | 'none' | 'borderBox'
    boxShadow?:
    '3.thin.inset' | '3.normal.inset' | '3.remark.inset' | '3.thick.inset' | '3.most.inset' |
    '2.thin.inset' | '2.normal.inset' | '2.remark.inset' | '2.thick.inset' | '2.most.inset' |
    '1.thin.inset' | '1.normal.inset' | '1.remark.inset' | '1.thick.inset' | '1.most.inset' |
    '0.thin.inset' | '0.normal.inset' | '0.remark.inset' | '0.thick.inset' | '0.most.inset' |

    '0.thin' | '0.normal' | '0.remark' | '0.thick' | '0.most' |
    '1.thin' | '1.normal' | '1.remark' | '1.thick' | '1.most' |
    '2.thin' | '2.normal' | '2.remark' | '2.thick' | '2.most' |
    '3.thin' | '3.normal' | '3.remark' | '3.thick' | '3.most' |
    '4.thin' | '4.normal' | '4.remark' | '4.thick' | '4.most' |
    '5.thin' | '5.normal' | '5.remark' | '5.thick' | '5.most' |
    'none'

    display?: 'block' | 'none' | 'flex' | 'grid' | 'inlineBlock' | 'inlineFlex'

    gap?: Others.gap
    overflow?: Others.overflow
    position?: 'relative' | 'absolute' | 'fixed' | 'sticky' | 'static'

    top?: Others.TRBL | 'topBase' | 'topNavigationHeight'
    right?: Others.TRBL
    bottom?: Others.TRBL
    left?: Others.TRBL

    opacity?: 'trans' | 'few' | 'low' | 'middle' | 'high' | 'most'

    transition?: 'none' | 'short' | 'middle' | 'long'
  }
  export namespace Pargins {
    export type Params = {
      margin?: Group
      marginTop?: Unit
      marginRight?: Unit
      marginBottom?: Unit
      marginLeft?: Unit

      padding?: Group
      paddingTop?: Unit
      paddingRight?: Unit
      paddingBottom?: Unit
      paddingLeft?: Unit
    }

    export type Unit =
      0 | '1/12' | '1/6' | '1/4' | '1/3' | '1/2' | '2/3' | '3/4' |
      1 | 1.5 | 2 | 2.5 | 3 | 4 |
      'auto' | 'safeAreaTop' | 'safeAreaBottom'
    export type Group = Unit | [ Unit,Unit ] | [ Unit,Unit,Unit,Unit ]
  }
  export namespace Borders {
    export type Params = {
      border?: Border
      borderTop?: Border
      borderRight?: Border
      borderBottom?: Border
      borderLeft?: Border

      borderWidth?: Width
      borderColor?: Color
      borderStyle?: Style

      borderRadius?: Radius
      borderTopLeftRadius?: Radius
      borderTopRightRadius?: Radius
      borderBottomLeftRadius?: Radius
      borderBottomRightRadius?: Radius
    }
    export type Border = boolean | '0.trans' | '1.thin' | '2.normal' | '3.strong' | 'unset'
    export type Width = 0 | 1 | 2 | 3 | 4
    export type Color = '0.trans' | '1.thin' | '2.normal' | '3.strong' | 'theme' | 'posi' | 'nega' | 'warn' | 'white'
    export type Style = 'solid' | 'dashed' | 'double' | 'dotted' | 'none'
    export type Radius = 0 | '1/3' | '2/3' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 'sphere' | 'inherit' |
      '1.tone.primary' | '2.tone.secondary' | '3.tone.tertiary'
  }
  export namespace FlexGrids {
    export type Params = {
      flexSizing?: 'none' | 'auto' | 0
      flexWrap?: boolean
      flexCenter?: boolean
      flexType?: Type
      flexChilds?: 'even' | 'auto' | 'none' | 'unset'
      flexGrid?: Grid
      flexNewLine?: boolean
      verticalAlign?: VerticalAlign
      horizontalAlign?: HorizontalAlign

      gridCenter?: boolean
      gridCols?: GridCols
    }

    export type Type = 'row' | 'row-r' | 'col' | 'col-r'
    export type VerticalAlign = 'center' | 'top' | 'bottom' | 'baseline' | 'unset'
    export type HorizontalAlign = 'center' | 'left' | 'right' | 'between' | 'around' | 'even' | 'unset'
    export type Grid = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'unset'

    export type GridCols = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
  }
  export namespace Fonts {
    export type Params = {
      fontColor?: Color
      fontSize?: Size
      fontWeight?: Weight

      isLightFont?: boolean
      isSemiBoldFont?: boolean
      isBoldFont?: boolean

      isRounded?: boolean

      textAlign?: 'left' | 'center' | 'right'
    }
    export type Weight = '0.thin' | '1.light' | '2.normal' | '3.semiBold' | '4.bold' | '5.extraBold' | 'inherit' | 'lighter' | 'bolder'
    export type Color =
      Others.UniColors |
      '1.clear' | '2.normal' | '3.blur' | '4.thin' | '5.translucent' | '6.clear' |
      'mono' | 'monoSecond' | 'logo' | 'trans'
    export type Size =
      '0.xs' |
      '1.mini' |
      '2.normal' |
      '3.paragraph' |
      '4.thirdTitle' |
      '5.subTitle' |
      '6.title' |
      '7.landing' |
      '8.xl' | 'inherit'
  }
  export namespace Sizes {
    export type Params = {
      maxHeight?: 0 | 1 | 'viewHeight' | 'topNavigationHeight' | 'sideNavigationHeight' | 'contentHeight' | 'unset'
      minHeight?: 0 | 1 | 'viewHeight' | 'topNavigationHeight' | 'sideNavigationHeight' | 'contentHeight' | 'unset'
      minWidth?: 0 | 1 | 'unset'
      maxWidth?: 0 | 1 | 'unset'

      unitWidth?: Size
      unitHeight?: Size
      width?: 0 | 1 | 'viewWidth' | 'auto'
      height?: 0 | 1 | 'viewHeight' | 'topNavigationHeight' | 'sideNavigationHeight' | 'contentHeight' | 'auto'
    }

    export type Size = 0 | '1/12' | '1/6' | '1/4' | '1/3' | '1/2' | '2/3' | '3/4' | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 6 | 8 | 12 | 'unset'
  }
  export namespace StyleSets {
    export type Params = {
      ssCardBox?: boolean | 'border' | 'layer' | 'cloud' | 'shadow'
      ssSphere?: Sizes.Size
      ssSquare?: Sizes.Size
      ssAbsoluteCovered?: boolean
      ssTextEllipsis?: boolean
    }
  }
  export namespace Others {
    export type gapUnit = 0 | '1/12' | '1/6' | '1/4' | '1/3' | '1/2' | '2/3' | '3/4' | 1 | 1.5 | 2 | 2.5 | 3 | 4
    export type gap = gapUnit | [ gapUnit,gapUnit ]

    export type overflowUnit = 'auto' | 'hidden' | 'scroll' | 'visible' | 'unset'
    export type overflow = overflowUnit | [ overflowUnit,overflowUnit ]

    export type UniColors = 'inherit' | 'theme' | 'posi' | 'nega' | 'warn' | 'white' | 'black' | ThemeColor
    export type BackgroundColor = UniColors |
      '1.layer.base' | '2.layer.cloud' | '3.layer.canvas' | '4.layer.darken' | '5.layer.darker' | '6.layer.darkest' |
      'cloud' |

      'lcOpFew' | 'lcOpLow' | 'lcOpMiddle' | 'lcOpHigh' |
      'tcOpFew' | 'tcOpLow' | 'tcOpMiddle' | 'tcOpHigh' |
      'tcLighten' | 'tcLighter' | 'tcLightest' |
      'tcDarken' | 'tcDarker' | 'tcDarkest' |
      'negaOpLow' | 'negaOpMiddle' |
      'posiOpLow' | 'posiOpMiddle' |
      'trans' | 'dark' | 'monoPrime' | 'monoSecond' | 'none'

    export type TRBL =
      0 | '1/12' | '1/6' | '1/4' | '1/3' | '1/2' | '2/3' | '3/4' |
      1 | 2 | 3 | 4 |
      '50%' | '100%'

    export type EffectsOnActive =
      'ripple.white' |
      'ripple.cloud' |
      'ripple.theme' |
      'push' |
      'expand' |
      'shrink' |
      'pudding' |
      'fade' |
      'none'
  }
}