<commit_before>@use "setup";

/* ==========================================================================
   ONLY for use in design patterns - classes NOT USED in actual site builds.
   ========================================================================== */

/**
 * Make sure code examples use black text within information blocks.
 */

.information code {
    color: var(--clr-text);
}

/**
 * Extra pad above sections.
 */

.design-patterns--section {
    margin-top: 2em;
}


/* Colour palette.
   ========================================================================== */

/**
 * Generate the colour swatches dynamically.
 */

$colors: (
    "text-promoted":     var(--clr-text-promoted),
    "text":              var(--clr-text),
    "text-footnote":     var(--clr-text-demoted),
    "grad-from":         var(--clr-grad-from),
    "grad-to":           var(--clr-grad-to),
    "brdr":              var(--clr-brdr),
    "brdr-lite":         var(--clr-brdr-lite),
    "brdr-x-lite":       var(--clr-brdr-x-lite),
    "brdr-dark":         var(--clr-brdr-dark),
    "brdr-x-dark":       var(--clr-brdr-x-dark),
    "a":                 var(--clr-a),
    "a-hover":           var(--clr-a-interact),
    "focus":             var(--clr-focus),
    "selecting":         var(--clr-selecting),
    "selected":          var(--clr-selected),
    "bkgd":              var(--clr-bkgd),
    "bkgd-box":          var(--clr-bkgd-box),
    "hilite-box":        var(--clr-hilite-box),
    "strong-hilite-box": var(--clr-strong-hilite-box),
    "hilite":            var(--clr-hilite),
    "success-text":      var(--clr-success-text),
    "success-bkgd":      var(--clr-success-bkgd),
    "warning-text":      var(--clr-warning-text),
    "warning-bkgd":      var(--clr-warning-bkgd),
    "error-text":        var(--clr-error-text),
    "error-bkgd":        var(--clr-error-bkgd),
    "info-text":         var(--clr-info-text),
    "info-bkgd":         var(--clr-info-bkgd)
);

.design-patterns--clr {
    display: block;
    height: 2.375em; // 38px / 16px
    margin: 1em 0;
    border: 1px solid var(--clr-brdr);
}

@each $name, $color in $colors {
    .design-patterns--clr-#{$name} {
        background: $color;
    }
}


/* Layout grid examples.
   ========================================================================== */

.design-patterns--box {
    margin-top: 0;
    padding: 1em;
    background: rgba(0, 0, 0, 0.33);
}

/**
 * Ensure information blocks clear any preceding grid cell floats.
 */

#section-grid .information {
    clear: both;
}


/* jQuery UI styling specific to design patterns.
   ========================================================================== */

/**
 * The list of all available icons.
 */

.jquery-ui-icons li {
    display: inline-block;
    padding: 0.25em;
    list-style: none;
}

/**
 * The vertical slider example.
 */

.jquery-ui-slider-vertical {
    display: flex;

    span {
        display: block;
        height: 120px;
        margin: 0 1rem;
    }
}

/**
 * Declare a width for jQuery UI menus.
 */

.ui-menu {
    width: 10em;
}

/**
 * Absolute positioning for miscellaneous jQuery UI menus.
 */

.ui-menu:not(.jquery-ui-menu) {
    position: absolute;
    z-index: 1000;
}


/* Breakpoint indicator.
   ========================================================================== */

/**
 * Visually show which breakpoint is currently active.
 *
 * Example HTML:
 *
 * <ol class="design-patterns--breakpoints list--no-bullets">
 *     <li class="design-patterns--breakpoint-0">No breakpoint</li>
 *     <li class="design-patterns--breakpoint-1">Breakpoint 1</li>
 *     <li class="design-patterns--breakpoint-2">Breakpoint 2</li>
 *     <li class="design-patterns--breakpoint-3">Breakpoint 3</li>
 * </ol>
 */

.design-patterns--breakpoints {
    display: flex;
}

.design-patterns--breakpoint-0,
.design-patterns--breakpoint-1,
.design-patterns--breakpoint-2,
.design-patterns--breakpoint-3 {
    padding: 0.5em;
    background-color: #ff0000;
    color: #ffffff;
}

.design-patterns--breakpoint-1,
.design-patterns--breakpoint-2,
.design-patterns--breakpoint-3 {
    display: none;
}

@media (min-width: setup.$breakpoint-1) {
    .design-patterns--breakpoint-0 {
        display: none;
    }

    .design-patterns--breakpoint-1 {
        display: block;
    }
}

@media (min-width: setup.$breakpoint-2) {
    .design-patterns--breakpoint-1 {
        display: none;
    }

    .design-patterns--breakpoint-2 {
        display: block;
    }
}

@media (min-width: setup.$breakpoint-3) {
    .design-patterns--breakpoint-2 {
        display: none;
    }

    .design-patterns--breakpoint-3 {
        display: block;
    }
}
<commit_msg>Fix colours in design patterns<commit_after>@use "setup";

/* ==========================================================================
   ONLY for use in design patterns - classes NOT USED in actual site builds.
   ========================================================================== */

/**
 * Make sure code examples use black text within information blocks.
 */

.information code {
    color: var(--clr-text);
}

/**
 * Extra pad above sections.
 */

.design-patterns--section {
    margin-top: 2em;
}


/* Colour palette.
   ========================================================================== */

/**
 * Generate the colour swatches dynamically.
 */

$colors: (
    "text-promoted":     var(--clr-text-promoted),
    "text":              var(--clr-text),
    "text-demoted":      var(--clr-text-demoted),
    "grad-from":         var(--clr-grad-from),
    "grad-to":           var(--clr-grad-to),
    "brdr":              var(--clr-brdr),
    "brdr-lite":         var(--clr-brdr-lite),
    "brdr-x-lite":       var(--clr-brdr-x-lite),
    "brdr-dark":         var(--clr-brdr-dark),
    "brdr-x-dark":       var(--clr-brdr-x-dark),
    "a":                 var(--clr-a),
    "a-interact":        var(--clr-a-interact),
    "focus":             var(--clr-focus),
    "selecting":         var(--clr-selecting),
    "selected":          var(--clr-selected),
    "bkgd":              var(--clr-bkgd),
    "bkgd-box":          var(--clr-bkgd-box),
    "hilite-box":        var(--clr-hilite-box),
    "strong-hilite-box": var(--clr-strong-hilite-box),
    "hilite":            var(--clr-hilite),
    "success-text":      var(--clr-success-text),
    "success-bkgd":      var(--clr-success-bkgd),
    "warning-text":      var(--clr-warning-text),
    "warning-bkgd":      var(--clr-warning-bkgd),
    "error-text":        var(--clr-error-text),
    "error-bkgd":        var(--clr-error-bkgd),
    "info-text":         var(--clr-info-text),
    "info-bkgd":         var(--clr-info-bkgd)
);

.design-patterns--clr {
    display: block;
    height: 2.375em; // 38px / 16px
    margin: 1em 0;
    border: 1px solid var(--clr-brdr);
}

@each $name, $color in $colors {
    .design-patterns--clr-#{$name} {
        background: $color;
    }
}


/* Layout grid examples.
   ========================================================================== */

.design-patterns--box {
    margin-top: 0;
    padding: 1em;
    background: rgba(0, 0, 0, 0.33);
}

/**
 * Ensure information blocks clear any preceding grid cell floats.
 */

#section-grid .information {
    clear: both;
}


/* jQuery UI styling specific to design patterns.
   ========================================================================== */

/**
 * The list of all available icons.
 */

.jquery-ui-icons li {
    display: inline-block;
    padding: 0.25em;
    list-style: none;
}

/**
 * The vertical slider example.
 */

.jquery-ui-slider-vertical {
    display: flex;

    span {
        display: block;
        height: 120px;
        margin: 0 1rem;
    }
}

/**
 * Declare a width for jQuery UI menus.
 */

.ui-menu {
    width: 10em;
}

/**
 * Absolute positioning for miscellaneous jQuery UI menus.
 */

.ui-menu:not(.jquery-ui-menu) {
    position: absolute;
    z-index: 1000;
}


/* Breakpoint indicator.
   ========================================================================== */

/**
 * Visually show which breakpoint is currently active.
 *
 * Example HTML:
 *
 * <ol class="design-patterns--breakpoints list--no-bullets">
 *     <li class="design-patterns--breakpoint-0">No breakpoint</li>
 *     <li class="design-patterns--breakpoint-1">Breakpoint 1</li>
 *     <li class="design-patterns--breakpoint-2">Breakpoint 2</li>
 *     <li class="design-patterns--breakpoint-3">Breakpoint 3</li>
 * </ol>
 */

.design-patterns--breakpoints {
    display: flex;
}

.design-patterns--breakpoint-0,
.design-patterns--breakpoint-1,
.design-patterns--breakpoint-2,
.design-patterns--breakpoint-3 {
    padding: 0.5em;
    background-color: #ff0000;
    color: #ffffff;
}

.design-patterns--breakpoint-1,
.design-patterns--breakpoint-2,
.design-patterns--breakpoint-3 {
    display: none;
}

@media (min-width: setup.$breakpoint-1) {
    .design-patterns--breakpoint-0 {
        display: none;
    }

    .design-patterns--breakpoint-1 {
        display: block;
    }
}

@media (min-width: setup.$breakpoint-2) {
    .design-patterns--breakpoint-1 {
        display: none;
    }

    .design-patterns--breakpoint-2 {
        display: block;
    }
}

@media (min-width: setup.$breakpoint-3) {
    .design-patterns--breakpoint-2 {
        display: none;
    }

    .design-patterns--breakpoint-3 {
        display: block;
    }
}

{'fraction_non_alphanumeric': 0.2556087187666135, 'fraction_numerical': 0.013397129186602871, 'mean_word_length': 2.39689418562658, 'pattern_counts': {'":': 56, '<': 23, '<?xml version=': 0, '>': 23, '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': '1064893', 'n_tokens_mistral': 3321, 'n_tokens_neox': 3129, 'n_words': 560}