Utility Classes in heybooster project

utility-classes.scss

@import "~@/scss/variables/_variables.scss";


// Color Palette
$colors: (
  'primary':$primaryColor,
  'accent':$accentColor,
  'secondary':$secondaryColor,
  'white':$whiteColor,
  'black':$blackColor,
  'grey':$greyColor,
  'light':$lightColor,
  'codgray':$CodGrayColor,
  'niagara':$NiagaraColor,
  'urgent':$urgent,
  'warning':$warning,
  'opportunity':$opportunity,
  'perfect':$perfect,
  'darkcyan':$darkCyan,
  'alto':$altoColor,
  'nileblue':$nileBlue,
  'dodgerblue':$dodgerBlue,
  'dovegray':$doveGray,
  'athensgray':$athensGray,
  'catskillwhite':$catskillWhite,
  'basia':$basiaColor,
  'cerulean':$ceruleanColor,
  'whitesmoke':$whiteSmoke,
  'azureRadiance':$azureRadiance,
  'malibu':$malibu,
  'concretesolid':$concretesolid,
  'palesky':$concretesolid,
  'ghostwhite':$ghostWhite,
  'blackSqueeze':$blackSqueeze,
  'whiteChocolate':$whiteChocolate,
  'desertStorm':$desertStorm,
  'seashellPeach':$seashellPeach
);

// Font Weight List
$fontWeightValues:(
  'light':$light,
  'regular':$regular,
  'medium':$medium,
  'semibold':$semi-bold,
  'bold':$bold,
  'extrabold':$extraBold,
  'black':$bolder,
);



$utilities: (
  'color':(
    prefix:'text',
    values:$colors
  ),
  'background-color':(
    prefix:'bg',
    values:$colors,
  ),
  'font-weight':(
    prefix:'font-weight',
    values:$fontWeightValues
  ),
  'font-family':(
    prefix:'font-family',
    values:(
      'avenir':Avenir ', Arial, Helvetica, sans-serif',
      'avenir-next':'"Avenir-Next", Arial, Helvetica, sans-serif'
    )
  ),
  'display':(
    prefix:'display',
    values:(
      "n": none,
      "b": block,
      "f": flex,
      "g": grid,
    )
  ),
  'justify-content':(
    prefix:'justify-content',
    values:(
      'center':center,
      'end':flex-end,
      'between':space-between
    )
  ),
  'flex-direction':(
    prefix:'flex-direction',
    values:(
      'column':column
    )
  ),
  'align-items':(
    prefix:'align-items',
    values:(
      'center':center
    )
  ),
  'place-items':(
    prefix:'place-items',
    values:(
      'center':center
    )
  ),
  'flex-wrap':(
    prefix:'flex-wrap',
    values:(
      'wrap':wrap
    )
  ),
  'align-self':(
    prefix:'align-self',
    values:(
      'end':flex-end
    )
  ),
  'position':(
    prefix:'p',
    values:(
      'relative':relative
    )
  ),
  'border':(
    prefix:'border',
    values:(
      'perfect':1px solid $perfect,
      'primary':1px solid $primaryColor,
      'opportunity':1px solid $opportunity,
      'urgent':1px solid $urgent,
      'warning':1px solid $warning,
      'dodgerblue':1px solid $dodgerBlue,
    )
  ),
  'margin':(
    prefix:'m',
    values:(
      '0':0px
    )
  ),
  'margin-left':(
    prefix:'ml',
    values:(
      'auto':auto
    )
  ),
  'margin-right':(
    prefix:'mr',
    values:(
      'auto':auto
    )
  ),
  'padding':(
    prefix:'p',
    values:(
      '0':0px
    )
  ),
);


@each $property, $map in $utilities {
  $prefix: map-get($map, "prefix");
  $values: map-get($map, "values");

  @each $key, $value in $values {

    .#{$prefix}-#{$key} {
      #{$property}: $value;
    }

  }
}