@other_fg: #aaa;
@other_bg: #EEEEEE;

@define_fg: #984ea3;
@define_bg: #F8D0FD;

@getdata_fg: #d7191c;
@getdata_bg: rgb(255, 192, 192);

@explore_fg: #fdae61;
@explore_bg: #AF6013;

@create_fg: #f1b6da;
@create_bg: #cc4037;

@enrich_fg: #abdda4;
@enrich_bg: #4F8348;

@transform_fg: #2b83ba;
@transform_bg: #0B3D5C;

@unk_fg: #000;
@unk_bg: #C9C9C9;

@colors: 'other', 'define', 'getdata', 'explore', 'create', 'enrich', 'transform', 'unk';

.-(@i: length(@colors)) when (@i > 0) {
    @name: e(extract(@colors, @i));
    @fg: "@{name}_fg";
    @bg: "@{name}_bg";
    .wf_@{name}.light {
    	background: @@bg;
    	color: @@fg;
    }
    .wf_@{name}.dark {
    	background: @@fg;
    	color: @@bg;
    }
    .wf_@{name}.fill-light {
        fill: @@fg;
    }
    .wf_@{name}.fill-dark {
        fill: @@bg;
    }
    .wf_@{name}.stroke-light {
        stroke: @@fg;
    }
    .wf_@{name}.stroke-dark {
        stroke: @@bg;
    }
    .-((@i - 1));
} .-;