<commit_before>// ---------- COLOR

// BASE COLOR
//== base color variables *** this is where the magic happens :)
// enter optional hue variable or custom hue range 0-360
@hue: 180;
// saturation range 0-100 st
@saturation: 80;
// lightness range 0-100 (0 = black, 100 = white)
@lightness: 50;
@alpha: 1;

//== base color function
@color-base: hsla(@hue, (@saturation/100), (@lightness/100), @alpha);
//== base color mixins
.color-base(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    color: @color-base;
}

.background-base(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    background: @color-base;
}

.fill-base(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    fill: @color-base;
}

// COMPLEMENTARY COLOR
//== complementary color function
@cc: spin(@color-base, 180);
//== complementary color mixins
.color-complementary(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    color: @cc;
}

.background-complementary(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    background: @cc;
}

.fill-complementary(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    fill: @cc;
}

// ANALOGOUS COLOR
//== analogous color functions
@ac-one: spin(@color-base, -30);
@ac-two: spin(@color-base, 30);
//== analogous color mixins
.color-analogous-one(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    color: @ac-one;
}

.color-analogous-two(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    color: @ac-two;
}

.background-analogous-one(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    background: @ac-one;
}

.background-analogous-two(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    background: @ac-two;
}

.fill-analogous-one(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    fill: @ac-one;
}

.fill-analogous-two(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    fill: @ac-two;
}

// SPLIT COMPLEMENTARY
//== split complementary color functions
@scc-one: spin(@color-base, (180-30));
@scc-two: spin(@color-base, (180+30));
//== split complementary mixins
.color-split-complementary-one(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    color: @scc-one;
}

.color-split-complementary-two(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    color: @scc-two;
}

.background-split-complementary-one(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    background: @scc-one;
}

.background-split-complementary-two(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    background: @scc-two;
}

.fill-split-complementary-one(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    fill: @scc-one;
}

.fill-split-complementary-two(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    fill: @scc-two;
}

// TRIADIC COLOR
//== triadic color functions
@tc-one: spin(@color-base, -120);
@tc-two: spin(@color-base, 120);
//== triadic color mixins
.color-triadic-one(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    color: @tc-one;
}

.color-triadic-two(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    color: @tc-two;
}

.background-triadic-one(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    background: @tc-one;
}

.background-triadic-two(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    background: @tc-two;
}

.fill-triadic-one(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    fill: @tc-one;
}

.fill-triadic-two(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    fill: @tc-two;
}

// BORDER
//== border variables
@bds: solid;
@bdw: 1;
@bdc: @color-base;
//== border mixins
// add border on all sides, e.g., .border(all, 2, dotted, red); result = border-width: 0.125em; border-style: dotted; border-color: red;
.border (@mixin, @border-width: @bdw, @border-style: @bds, @border-color: @bdc, @border-top-style: @bds, @border-right-style: @bds, @border-bottom-style: @bds, @border-left-style: @bds, @border-top-color: @bdc, @border-right-color: @bdc, @border-bottom-color: @bdc, @border-left-color: @bdc) when (@mixin =all) {
    border: unit((@border-width / @fz), em) @border-style @border-color;
}

// add top border, e.g., .border(@mixin: top, @border-top-color: red); result = border-width: 0.0625em; border-top-style: solid; border-top-color: red;
.border (@mixin, @border-width: @bdw, @border-style: @bds, @border-color: @bdc, @border-top-style: @bds, @border-right-style: @bds, @border-bottom-style: @bds, @border-left-style: @bds, @border-top-color: @bdc, @border-right-color: @bdc, @border-bottom-color: @bdc, @border-left-color: @bdc) when (@mixin =top) {
    border: unit((@border-width / @fz), em) @border-top-style @border-top-color;
}

// add right border, e.g., .border(@mixin: right, @border-right-color: red); result = border-width: 0.0625em; border-right-style: solid; border-right-color: red;
.border (@mixin, @border-width: @bdw, @border-style: @bds, @border-color: @bdc, @border-top-style: @bds, @border-right-style: @bds, @border-bottom-style: @bds, @border-left-style: @bds, @border-top-color: @bdc, @border-right-color: @bdc, @border-bottom-color: @bdc, @border-left-color: @bdc) when (@mixin =right) {
    border: unit((@border-width / @fz), em) @border-right-style @border-right-color;
}

// add bottom border, e.g., .border(@mixin: bottom, @border-bottom-color: red); result = border-width: 0.0625em; border-bottom-style: solid; border-bottom-color: red;
.border (@mixin, @border-width: @bdw, @border-style: @bds, @border-color: @bdc, @border-top-style: @bds, @border-right-style: @bds, @border-bottom-style: @bds, @border-left-style: @bds, @border-top-color: @bdc, @border-right-color: @bdc, @border-bottom-color: @bdc, @border-left-color: @bdc) when (@mixin =bottom) {
    border: unit((@border-width / @fz), em) @border-bottom-style @border-bottom-color;
}

// add left border, e.g., .border(@mixin: left, @border-width:2, @border-left-color:green); result = border-width: 0.125em; border-left-style: solid; border-left-color: green;
.border (@mixin, @border-width: @bdw, @border-style: @bds, @border-color: @bdc, @border-top-style: @bds, @border-right-style: @bds, @border-bottom-style: @bds, @border-left-style: @bds, @border-top-color: @bdc, @border-right-color: @bdc, @border-bottom-color: @bdc, @border-left-color: @bdc) when (@mixin =left) {
    border: unit((@border-width / @fz), em) @border-left-style @border-left-color;
}<commit_msg>Correct border mixins to display correctly<commit_after>// ---------- COLOR

// BASE COLOR
//== base color variables *** this is where the magic happens :)
// enter optional hue variable or custom hue range 0-360
@hue: 180;
// saturation range 0-100 st
@saturation: 80;
// lightness range 0-100 (0 = black, 100 = white)
@lightness: 50;
@alpha: 1;

//== base color function
@color-base: hsla(@hue, (@saturation/100), (@lightness/100), @alpha);
//== base color mixins
.color-base(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    color: @color-base;
}

.background-base(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    background: @color-base;
}

.fill-base(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    fill: @color-base;
}

// COMPLEMENTARY COLOR
//== complementary color function
@cc: spin(@color-base, 180);
//== complementary color mixins
.color-complementary(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    color: @cc;
}

.background-complementary(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    background: @cc;
}

.fill-complementary(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    fill: @cc;
}

// ANALOGOUS COLOR
//== analogous color functions
@ac-one: spin(@color-base, -30);
@ac-two: spin(@color-base, 30);
//== analogous color mixins
.color-analogous-one(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    color: @ac-one;
}

.color-analogous-two(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    color: @ac-two;
}

.background-analogous-one(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    background: @ac-one;
}

.background-analogous-two(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    background: @ac-two;
}

.fill-analogous-one(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    fill: @ac-one;
}

.fill-analogous-two(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    fill: @ac-two;
}

// SPLIT COMPLEMENTARY
//== split complementary color functions
@scc-one: spin(@color-base, (180-30));
@scc-two: spin(@color-base, (180+30));
//== split complementary mixins
.color-split-complementary-one(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    color: @scc-one;
}

.color-split-complementary-two(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    color: @scc-two;
}

.background-split-complementary-one(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    background: @scc-one;
}

.background-split-complementary-two(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    background: @scc-two;
}

.fill-split-complementary-one(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    fill: @scc-one;
}

.fill-split-complementary-two(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    fill: @scc-two;
}

// TRIADIC COLOR
//== triadic color functions
@tc-one: spin(@color-base, -120);
@tc-two: spin(@color-base, 120);
//== triadic color mixins
.color-triadic-one(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    color: @tc-one;
}

.color-triadic-two(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    color: @tc-two;
}

.background-triadic-one(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    background: @tc-one;
}

.background-triadic-two(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    background: @tc-two;
}

.fill-triadic-one(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    fill: @tc-one;
}

.fill-triadic-two(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
    fill: @tc-two;
}

// BORDER
//== border variables
@bds: solid;
@bdw: 1;
@bdc: @color-base;
//== border mixins
// add border on all sides, e.g., .border(all, 2, dotted, red); result = border: 0.125em dotted red;
.border (@mixin, @border-width: @bdw, @border-style: @bds, @border-color: @bdc, @border-top-style: @bds, @border-right-style: @bds, @border-bottom-style: @bds, @border-left-style: @bds, @border-top-color: @bdc, @border-right-color: @bdc, @border-bottom-color: @bdc, @border-left-color: @bdc) when (@mixin =all) {
    border: unit((@border-width / @fz), em) @border-style @border-color;
}

// add top border, e.g., .border(@mixin: top, @border-top-color: red); result = border-top: 0.0625em solid red;
.border (@mixin, @border-width: @bdw, @border-style: @bds, @border-color: @bdc, @border-top-style: @bds, @border-right-style: @bds, @border-bottom-style: @bds, @border-left-style: @bds, @border-top-color: @bdc, @border-right-color: @bdc, @border-bottom-color: @bdc, @border-left-color: @bdc) when (@mixin =top) {
    border-top: unit((@border-width / @fz), em) @border-top-style @border-top-color;
}

// add right border, e.g., .border(@mixin: right, @border-right-color: red); result = border-right: 0.0625em solid red;
.border (@mixin, @border-width: @bdw, @border-style: @bds, @border-color: @bdc, @border-top-style: @bds, @border-right-style: @bds, @border-bottom-style: @bds, @border-left-style: @bds, @border-top-color: @bdc, @border-right-color: @bdc, @border-bottom-color: @bdc, @border-left-color: @bdc) when (@mixin =right) {
    border-right: unit((@border-width / @fz), em) @border-right-style @border-right-color;
}

// add bottom border, e.g., .border(@mixin: bottom, @border-bottom-color: red); result = border-bottom: 0.0625em solid red;
.border (@mixin, @border-width: @bdw, @border-style: @bds, @border-color: @bdc, @border-top-style: @bds, @border-right-style: @bds, @border-bottom-style: @bds, @border-left-style: @bds, @border-top-color: @bdc, @border-right-color: @bdc, @border-bottom-color: @bdc, @border-left-color: @bdc) when (@mixin =bottom) {
    border-bottom: unit((@border-width / @fz), em) @border-bottom-style @border-bottom-color;
}

// add left border, e.g., .border(@mixin: left, @border-width:2, @border-left-color:green); result = border-left: 0.125em solid green;
.border (@mixin, @border-width: @bdw, @border-style: @bds, @border-color: @bdc, @border-top-style: @bds, @border-right-style: @bds, @border-bottom-style: @bds, @border-left-style: @bds, @border-top-color: @bdc, @border-right-color: @bdc, @border-bottom-color: @bdc, @border-left-color: @bdc) when (@mixin =left) {
    border-left: unit((@border-width / @fz), em) @border-left-style @border-left-color;
}
{'fraction_non_alphanumeric': 0.2048245295357117, 'fraction_numerical': 0.011480055220518781, 'mean_word_length': 4.751776013372336, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '107025', 'n_tokens_mistral': 5482, 'n_tokens_neox': 5325, 'n_words': 1193}