mixin ColorPalette(val, index, gradient)
  .p-3.d-flex.flex-center(class=`bg-${val} ${gradient? gradient:''} ${(val === 'white' || val === 'light' || val === 100 || val === 200) ? 'border border-300' : ''}` style='height: 180px')
    pre
      if gradient
        code(class=`${(index < 8 && val !== 'light') ? 'text-white' : 'text-black'}`) .bg-gradient
        br
      code(class=`${(index < 8 && val !== 'light') ? 'text-white' : 'text-black'}`) .bg-#{val}  
      
mixin ThemeColorsDemo
  .row.g-0
    each val, index in colors
      .col-6.col-sm-4.col-lg-3
        +ColorPalette(val, index)
  
mixin GrayShadeDemo
  .row.g-0(data-bs-theme="light")
    each val, index in grays
      .col-6.col-sm-4.col-lg-3
        +ColorPalette(val, index)

mixin BackgroundGradientDescription
  p&attributes(attributes)
    | By adding a 
    code .bg-gradient
    |  class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.
  p.mb-0
    | Do you need a gradient in your custom CSS? Just add 
    code background-image: var(--bs-gradient);
    | .

mixin BackgroundGradientDemo
  .row.g-0
    each val, index in colors
      .col-6.col-sm-4.col-lg-3
        +ColorPalette(val, index, 'bg-gradient')

mixin SubtleColorsDemo
  .row.g-0
    each val, index in colors
      .col-6.col-sm-4.col-lg-3
        .p-3.d-flex.flex-center(class=`bg-${val}-subtle` style='height: 180px')
          pre
            code(class=`${val !== 'light' ? `text-${val}` : 'text-black'}`) .bg-#{val}-subtle

mixin ColorAndBackgroundDemo
  .row.g-0
    each val, index in colors
      .col-6.col-sm-4.col-lg-3
        .p-3.d-flex.flex-center(class=`text-bg-${val}` style='height: 180px')
          pre
            code .text-bg-#{val}