Generated by SassMeister.com.

input.scss

$background-colors: (
    black: #000,
    grey: #f1f2f2,
    blue-bold-dark: #0c2746,
    credit-suisse-blue: #003868,
    blue-bold-bright: #265682,
    blue-bold-light: #507cab,
    blue-dimmed-bright: #a7bbd4,
    blue-dimmed-light: #d7e4f6,
);
$colors: (
    black: #fff,
    grey: #000,
    blue-bold-dark: #fff,
    credit-suisse-blue: #fff,
    blue-bold-bright: #fff,
    blue-bold-light: #000,
    blue-dimmed-bright: #000,
    blue-dimmed-light: #000,
);

@mixin get-color-theme-base() {
    @each $name, $hex in $colors {
        $bgColor: map-get($map: $background-colors, $key: $name);
        
        
        &.ui-colortheme--#{$name} {
            color: $hex;
            background-color: $bgColor;
        }
    }
}
 .aem-MY-COMPONENT {
         @include get-color-theme-base();
    
 }
 
 
 
@mixin unify-parent($child) {
  
    @content;
  
}

.field {
  @include unify-parent("input") {
    a{
        border:1px solid 
        
    };
    
  }
}

output.css

.aem-MY-COMPONENT.ui-colortheme--black {
  color: #fff;
  background-color: #000;
}
.aem-MY-COMPONENT.ui-colortheme--grey {
  color: #000;
  background-color: #f1f2f2;
}
.aem-MY-COMPONENT.ui-colortheme--blue-bold-dark {
  color: #fff;
  background-color: #0c2746;
}
.aem-MY-COMPONENT.ui-colortheme--credit-suisse-blue {
  color: #fff;
  background-color: #003868;
}
.aem-MY-COMPONENT.ui-colortheme--blue-bold-bright {
  color: #fff;
  background-color: #265682;
}
.aem-MY-COMPONENT.ui-colortheme--blue-bold-light {
  color: #000;
  background-color: #507cab;
}
.aem-MY-COMPONENT.ui-colortheme--blue-dimmed-bright {
  color: #000;
  background-color: #a7bbd4;
}
.aem-MY-COMPONENT.ui-colortheme--blue-dimmed-light {
  color: #000;
  background-color: #d7e4f6;
}

.field a {
  border: 1px solid;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}