_config.scss

@use 'sass:map';
@use 'sass:math';
@use 'sass:list';
@use 'sass-true/sass/config/throw';

@use 'defaults';
@use 'flags';
@use 'theme';
@use 'functions';
@use 'constants';

// ==================================================
// User config
// ==================================================
// Deep merged with the default config. This means that this will override existing keys and append new key value pairs.
// If you pass in null for any field, it will clear the values from default-config. Example:
//
//      $config :(
//          colors: (
//              blues: null
//          )
//      );
//
// This will disable all blues defined in $default-config from being generated.
$config: (
    extend: (),
) !default;

// ==================================================
// Default config
// ==================================================
$default-config: (
    // Turn on/off generating viewport classes to save on size.
    // TODO extend to include "!important" option
    viewports:
        (
            flags.$CLEARFIX: true,
            flags.$DISPLAY: true,
            flags.$FLEX: true,
            flags.$FLOAT: true,
            flags.$OVERFLOW: true,
            flags.$POSITION: true,
            flags.$TEXT: true,
            flags.$MARGIN-PADDING: true,
            flags.$OPACITY: true,
            flags.$BACKGROUND-OPACITY: false,
            flags.$COLOR-OPACITY: false,
            flags.$BORDER-OPACITY: false,
            flags.$WIDTHS: true,
            flags.$HEIGHTS: true,
            flags.$ZINDEX: false,
            flags.$ABSOLUTES: false,
            flags.$GAP: false,
            flags.$MIN-HEIGHT: false,
            flags.$MAX-HEIGHT: false,
            flags.$MIN-WIDTH: false,
            flags.$MAX-WIDTH: false,
            flags.$GRID: true,
            flags.$BLUR: false,
            flags.$TRANSITION-DURATION: false,
            flags.$LINE-HEIGHT: false,
            flags.$BORDER-WIDTH: false,
        ),
    // Extend all existing styles here
    extend:
        (
            avatars: (
                sizes: ()
            ),
            border: (
                widths: ()
            ),
            breakpoints: (
                widths: (),
                breakpoint-pairs: ()
            ),
            buttons: (
                sizes: ()
            ),
            // Please define all colors using hex
            // Omitting some colors may break Cirrus builds
            colors:
                (
                    semantic: (),
                    control-themes: (),
                    extended: (
                        // Note: The quotes matter!
                        'pink': (),
                        'red': (),
                        'orange': (),
                        'yellow': (),
                        'green': (),
                        'teal': (),
                        'blue': (),
                        'indigo': (),
                        'purple': (),
                        'gray': (),
                    ),
                ),
            fonts: (
                sizes: (
                    heading: (),
                    headline: (),
                    text: (),
                ),
                font-families: (),
                letter-spacing: (),
                transforms: (),
                weights: (),
            ),
            forms: (
                input-sizes: (),
                input-contains-icon-padding: (),
                input-icon-sizes: (),
                label-sizes: (),
            ),
            progress: (
                sizes: (),
                themes: (),
            ),
            space-sizes: (),
            tab-sizes: (),
            absolute: (),
            filters: (
                blurs:(),
            ),
            flex: (
                properties: (),
            ),
            grid: (
                properties: (),
            ),
            heights: (),
            minmax-heights: (),
            minmax-widths: (),
            opacity: (),
            round: (),
            sizing-system: (),
            shadows: (),
            widths: (),
            z-index: (),
        ),
    // Turn off certain features from being loaded. If left blank, all components are generated by default.
    excludes: (),
    // Enable certain classes to be generated. Takes precedence over $EXCLUDE.
    includes: (),
    // COMPONENTS //
    // Avatar
    avatars: (
        sizes: (
            constants.$xs: (
                font-size: 0.8rem,
                width: 1.6rem,
                height: 1.6rem,
            ),
            constants.$sm: (
                font-size: 1rem,
                width: 2.4rem,
                height: 2.4rem,
            ),
            constants.$lg: (
                font-size: 2rem,
                width: 4.8rem,
                height: 4.8rem,
            ),
            constants.$xl: (
                font-size: 3rem,
                width: 6.4rem,
                height: 6.4rem,
            ),
        )
    ),
    breakpoints: (
        widths: defaults.$default-breakpoints,
        // Pairs for generating viewport media queries. Pairs are (current viewport: viewport that is 1 smaller)
        breakpoint-pairs: (
            constants.$sm: constants.$xs,
            constants.$md: constants.$sm,
            constants.$lg: constants.$md,
            constants.$xl: constants.$lg,
        ),
    ),
    // Button
    buttons: (
        sizes: (
            constants.$xs: (
                padding: 0 0.5rem,
                font-size: 50%,
            ),
            constants.$sm: (
                padding: 0.25rem 1rem,
                font-size: 70%,
            ),
            constants.$md: (
                padding: 0.5rem 1.5rem,
                font-size: 90%,
            ),
            constants.$lg: (
                padding: 0.75rem 2rem,
                font-size: 110%,
            ),
            constants.$xl: (
                padding: 1rem 2.5rem,
                font-size: 130%,
            ),
        )
    ),
    colors: (
        semantic: (
            'primary': theme.$cirrus-primary,
            'success': theme.$cirrus-success,
            'warning': theme.$cirrus-warning,
            'danger': theme.$cirrus-danger,
            'light': theme.$cirrus-light,
            'dark': theme.$cirrus-dark,
            'link': theme.$cirrus-link,
            'link-dark': theme.$cirrus-link-dark,
            'info': theme.$cirrus-info,
            'black': theme.$cirrus-black,
            'white': theme.$cirrus-white,
        ),
        control-themes: (
            'primary': (
                bg: theme.$cirrus-primary,
                fg: theme.$cirrus-light
            ),
            'dark': (
                bg: theme.$cirrus-dark,
                fg: theme.$cirrus-light
            ),
            'link': (
                bg: theme.$cirrus-link,
                fg: theme.$cirrus-light
            ),
            'info': (
                bg: theme.$cirrus-info,
                fg: theme.$cirrus-light
            ),
            'success': (
                bg: theme.$cirrus-success,
                fg: theme.$cirrus-light
            ),
            'warning': (
                bg: theme.$cirrus-warning,
                fg: theme.$cirrus-dark
            ),
            'danger': (
                bg: theme.$cirrus-danger,
                fg: theme.$cirrus-light
            ),
        ),
        extended: (
            'pink': (
                '100': #fce8f3,
                '200': #fad1e8,
                '300': #f8b4d9,
                '400': #f17eb8,
                '500': #e74694,
                '600': #d61f69,
                '700': #bf125d,
                '800': #99154b,
                '900': #751a3d,
            ),
            'red': (
                '100': #fde8e8,
                '200': #fbd5d5,
                '300': #f8b4b4,
                '400': #f98080,
                '500': #f05252,
                '600': #e02424,
                '700': #c81e1e,
                '800': #9b1c1c,
                '900': #771d1d,
            ),
            'orange': (
                '100': #feecdc,
                '200': #fcd9bd,
                '300': #fdba8c,
                '400': #ff8a4c,
                '500': #ff5a1f,
                '600': #d03801,
                '700': #b43403,
                '800': #8a2c0d,
                '900': #73230d,
            ),
            'yellow': (
                '100': #fdf6b2,
                '200': #fce96a,
                '300': #faca15,
                '400': #e3a008,
                '500': #c27803,
                '600': #9f580a,
                '700': #8e4b10,
                '800': #723b13,
                '900': #633112,
            ),
            'green': (
                '100': #def7ec,
                '200': #bcf0da,
                '300': #84e1bc,
                '400': #31c48d,
                '500': #0e9f6e,
                '600': #057a55,
                '700': #046c4e,
                '800': #03543f,
                '900': #014737,
            ),
            'teal': (
                '100': #d5f5f6,
                '200': #afecef,
                '300': #7edce2,
                '400': #16bdca,
                '500': #0694a2,
                '600': #047481,
                '700': #036672,
                '800': #05505c,
                '900': #014451,
            ),
            'blue': (
                '100': #e1effe,
                '200': #c3ddfd,
                '300': #a4cafe,
                '400': #76a9fa,
                '500': #3f83f8,
                '600': #1c64f2,
                '700': #1a56db,
                '800': #1e429f,
                '900': #233876,
            ),
            'indigo': (
                '100': #e5edff,
                '200': #cddbfe,
                '300': #b4c6fc,
                '400': #8da2fb,
                '500': #6875f5,
                '600': #5850ec,
                '700': #5145cd,
                '800': #42389d,
                '900': #362f78,
            ),
            'purple': (
                '100': #edebfe,
                '200': #dcd7fe,
                '300': #cabffd,
                '400': #ac94fa,
                '500': #9061f9,
                '600': #7e3af2,
                '700': #6c2bd9,
                '800': #5521b5,
                '900': #4a1d96,
            ),
            'gray': (
                '000': #f8f9fa,
                '100': #f1f3f5,
                '200': #e9ecef,
                '300': #dee2e6,
                '400': #ced4da,
                '500': #adb5bd,
                '600': #868e96,
                '700': #495057,
                '800': #343a40,
                '900': #212529,
            ),
        ),
    ),
    fonts: (
        sizes: (
            heading: (
                h6: (
                    default: (
                        font-size: constants.$font-size-m,
                    ),
                    sm-above: (
                        font-size: constants.$font-size-l,
                    ),
                ),
                h5: (
                    default: (
                        font-size: 1.25rem,
                    ),
                    sm-above: (
                        font-size: constants.$font-size-xl,
                    ),
                ),
                h4: (
                    default: (
                        font-size: 1.5rem,
                    ),
                    sm-above: (
                        font-size: 1.75rem,
                    ),
                ),
                h3: (
                    default: (
                        font-size: 1.75rem,
                    ),
                    sm-above: (
                        font-size: 2rem,
                    ),
                ),
                h2: (
                    default: (
                        font-size: 2rem,
                    ),
                    sm-above: (
                        font-size: 2.5rem,
                    ),
                ),
                h1: (
                    default: (
                        font-size: 2.25rem,
                    ),
                    sm-above: (
                        font-size: 3rem,
                        letter-spacing: 0.025rem,
                    ),
                ),
            ),
            headline: (
                headline-4: (
                    default: (
                        font-size: 3rem,
                    ),
                    sm-above: (
                        font-size: 3.5rem,
                    ),
                ),
                headline-3: (
                    default: (
                        font-size: 3.25rem,
                    ),
                    sm-above: (
                        font-size: 4.5rem,
                    ),
                ),
                headline-2: (
                    default: (
                        font-size: 3.5rem,
                    ),
                    sm-above: (
                        font-size: 5.5rem,
                    ),
                ),
                headline-1: (
                    default: (
                        font-size: 3.75rem,
                    ),
                    sm-above: (
                        font-size: 6.5rem,
                    ),
                ),
            ),
            text: (
                constants.$xs: (
                    font-size: constants.$font-size-xs !important,
                    line-height: 1.5rem !important,
                ),
                constants.$sm: (
                    font-size: constants.$font-size-s !important,
                    line-height: 1.75rem !important,
                ),
                constants.$md: (
                    font-size: constants.$font-size-m !important,
                    line-height: 2rem !important,
                ),
                constants.$lg: (
                    font-size: constants.$font-size-l !important,
                    line-height: 2.25rem !important,
                ),
                constants.$xl: (
                    font-size: constants.$font-size-xl !important,
                    line-height: 2.25rem !important,
                ),
            ),
        ),
        font-families: (
            primary: ('Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial,
            sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'),
            secondary: ('Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial,
            sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'),
        ),
        letter-spacing: (
            tightest: -0.075em,
            tighter: -0.05em,
            tight: -0.025em,
            normal: 0,
            loose: 0.025em,
            looser: 0.05em,
            loosest: 0.1em,
        ),
        line-heights: (
            none: 1,
            tighter: 1.25,
            tight: 1.375,
            normal: 1.5,
            loose: 1.625,
            looser: 2,
        ),
        transforms: (
            uppercase: uppercase,
            lowercase: lowercase,
            capitalize: capitalize,
        ),
        weights: (
            'extrathin': 100,
            'thin': 200,
            'light': 300,
            'normal': 400,
            'medium': 500,
            'semibold': 600,
            'bold': 700,
            'extrabold': 800,
            'black': 900,
        ),
    ),
    forms: (
        input-sizes: (
            constants.$xs: (
                font-size: constants.$font-size-xs,
                padding: 0.35rem 0.9rem,
            ),
            constants.$sm: (
                font-size: constants.$font-size-s,
                padding: 0.55rem 1rem,
            ),
            constants.$lg: (
                font-size: constants.$font-size-l,
            ),
            constants.$xl: (
                font-size: constants.$font-size-xl,
            ),
        ),
        input-contains-icon-padding: (
            constants.$xs: 2rem,
            constants.$sm: 2.5rem,
            constants.$lg: 3.5rem,
            constants.$xl: 4rem,
        ),
        input-icon-sizes: (
            constants.$xs: (
                line-height: 1.75rem,
                width: 1.75rem,
                font-size: 7px,
            ),
            constants.$sm: (
                width: 2.5rem,
                font-size: 14px,
            ),
            constants.$lg: (
                line-height: 3.5rem,
                width: 3.5rem,
                font-size: 28px,
            ),
            constants.$xl: (
                line-height: 2.5rem,
                width: 3.75rem,
                font-size: 35px,
            ),
        ),
        label-sizes: (
            constants.$xs: constants.$font-size-xs,
            constants.$sm: constants.$font-size-s,
            constants.$lg: constants.$font-size-l,
            constants.$xl: constants.$font-size-xl,
        ),
    ),
    // Progress Bar Heights
    progress:
        (
            sizes: (
                constants.$xs: (
                    height: 0.25rem,
                ),
                constants.$sm: (
                    height: 0.5rem,
                ),
                constants.$md: (
                    height: 0.75rem,
                ),
                constants.$lg: (
                    height: 1rem,
                ),
                constants.$xl: (
                    height: 1.25rem,
                ),
            ),
        ),
    // Space sizes
    space-sizes:
        (
            constants.$lg: (
                padding: 1rem 0,
            ),
            constants.$xl: (
                padding: 2rem 0,
            ),
        ),
    // Tabs
    tabs: (
            font-sizes: (
                constants.$xs: constants.$font-size-xs,
                constants.$sm: constants.$font-size-s,
                constants.$lg: constants.$font-size-l,
                constants.$xl: constants.$font-size-xl,
            ),
        ),
    // Tags
    tags:
        (
            font-sizes: (
                constants.$xs: constants.$font-size-xs,
                constants.$sm: constants.$font-size-s,
                constants.$md: constants.$font-size-m,
                constants.$lg: constants.$font-size-l,
                constants.$xl: constants.$font-size-xl,
            ),
        ),
    // UTILITIES / Non-components //
    absolute: functions.map-multi-merge(
    (
        auto: auto,
        0: 0,
    ),
        (functions.get-negative-value-map(defaults.$default-quartile-percentages)),
        (functions.get-negative-value-map(functions.map-range(defaults.$default-sizing-system, 0, defaults.$default-absolutes-max)))
    ),
    border: (
        width: (
            0: 0px,
            1: 1px,
            2: 2px,
            4: 4px,
            8: 8px,
        )
    ),
    filters: (
        blurs: (
            'none': (
                --cirrus-blur: blur(0),
            ),
            constants.$xs: (
                --cirrus-blur: blur(0.25rem),
            ),
            constants.$sm: (
                --cirrus-blur: blur(0.5rem),
            ),
            constants.$md: (
                --cirrus-blur: blur(1rem),
            ),
            constants.$lg: (
                --cirrus-blur: blur(1.5rem),
            ),
            constants.$xl: (
                --cirrus-blur: blur(3rem),
            ),
        ),
    ),
    flex: (
        properties: (
            flex-columns: 12,
        ),
    ),
    grid: (
        properties: (
            default-grid-gap: 2,
            grid-columns: 12,
        ),
    ),
    heights: functions.map-multi-merge(defaults.$default-sizing-system, defaults.$default-percentages, (
        0: 0,
        auto: auto,
        screen: 100vh,
    )),
    min-heights: functions.map-multi-merge(defaults.$default-percentages, (
        0: 0,
        screen: 100vh,
    )),
    max-heights: functions.map-multi-merge(defaults.$default-percentages, (
        'none': none,
        screen: 100vh,
    )),
    min-widths: functions.map-multi-merge(defaults.$default-breakpoints, defaults.$default-percentages, (
        0: 0,
        screen: 100vw,
    )),
    max-widths: functions.map-multi-merge(defaults.$default-breakpoints, defaults.$default-percentages, (
        'none': none,
        screen: 100vw,
    )),
    opacity: (
        0: 0,
        10: 0.1,
        20: 0.2,
        30: 0.3,
        40: 0.4,
        50: 0.5,
        60: 0.6,
        70: 0.7,
        80: 0.8,
        90: 0.9,
        100: 1,
    ),
    round: (
        'none': 0px,
        constants.$xs: 0.25rem,
        constants.$sm: 0.5rem,
        constants.$md: 0.75rem,
        constants.$lg: 1rem,
        constants.$xl: 1.25rem,
        'full': 9001px,
    ),
    sizing-system: defaults.$default-sizing-system,
    shadows: (
        'none': (
            --cirrus-shadow: 0 0 #000,
        ),
        constants.$xs: (
            --cirrus-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05),
        ),
        constants.$sm: (
            --cirrus-shadow: (
                0 1px 3px 0 rgba(0, 0, 0, 0.1),
                0 1px 2px 0 rgba(0, 0, 0, 0.06),
            ),
        ),
        constants.$md: (
            --cirrus-shadow: (
                0 4px 6px -1px rgba(0, 0, 0, 0.1),
                0 2px 4px -1px rgba(0, 0, 0, 0.06),
            ),
        ),
        constants.$lg: (
            --cirrus-shadow: (
                0 10px 15px -3px rgba(0, 0, 0, 0.1),
                0 4px 6px -2px rgba(0, 0, 0, 0.05),
            ),
        ),
        constants.$xl: (
            --cirrus-shadow: (
                0 20px 25px -5px rgba(0, 0, 0, 0.1),
                0 10px 10px -5px rgba(0, 0, 0, 0.04),
            ),
        ),
        'inset': (
            --cirrus-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06),
        ),
    ),
    transitions: (
        durations: (
            75: 75ms,
            100: 100ms,
            200: 200ms,
            300: 300ms,
            500: 500ms,
            700: 700ms,
            1000: 1000ms,
        ),
    ),
    widths: functions.map-multi-merge((
        0: 0,
        auto: auto,
        screen: 100vw,
    ), defaults.$default-percentages, defaults.$default-sizing-system),
    z-index: (
        'n1': -1,
        0: 0,
        1: 1,
        10: 10,
        20: 20,
        30: 30,
        40: 40,
        50: 50,
        auto: auto,
    )
) !default;

// ==================================================
// Exported values
// ==================================================
$all-config: map.deep-merge($default-config, $config);

// ==================================================
// Exported values
// ==================================================

// FLAGS
$viewport-flags: map.get($all-config, viewports);
$excludes: map.get($all-config, excludes);
$includes: map.get($all-config, includes);

// BREAKPOINTS
$breakpoints: functions.get-with-extend($all-config, breakpoints, widths);
$breakpoint-pairs: functions.get-with-extend($all-config, breakpoints, breakpoint-pairs);

// COLORS
$semantic-colors: functions.get-with-extend($all-config, colors, semantic);
$control-themes: functions.get-with-extend($all-config, colors, control-themes);
$v2Colors: functions.get-with-extend($all-config, colors, extended);

// COMPONENTS
$avatar-sizes: functions.get-with-extend($all-config, avatars, sizes);
$button-sizes: functions.get-with-extend($all-config, buttons, sizes);
$font-heading-sizes: functions.get-with-extend($all-config, fonts, sizes, heading);
$font-headline-sizes: functions.get-with-extend($all-config, fonts, sizes, headline);
$font-text-sizes: functions.get-with-extend($all-config, fonts, sizes, text);
$font-families: functions.get-with-extend($all-config, fonts, font-families);
$font-letter-spacing: functions.get-with-extend($all-config, fonts, letter-spacing);
$font-line-heights: functions.get-with-extend($all-config, fonts, line-heights);
$font-transforms: functions.get-with-extend($all-config, fonts, transforms);
$font-weights: functions.get-with-extend($all-config, fonts, weights);

// Form sizes
$input-sizes: functions.get-with-extend($all-config, forms, input-sizes);
$input-contains-icon-padding: functions.get-with-extend($all-config, forms, input-contains-icon-padding);
$input-icon-sizes: functions.get-with-extend($all-config, forms, input-icon-sizes);
$form-label-sizes: functions.get-with-extend($all-config, forms, label-sizes);

$progress-bar-sizes: functions.get-with-extend($all-config, progress, sizes);
$space-sizes: functions.get-with-extend($all-config, space-sizes);
$tab-font-sizes: functions.get-with-extend($all-config, tabs, font-sizes);
$tag-font-sizes: functions.get-with-extend($all-config, tags, font-sizes);

// UTILS
$absolute: functions.get-with-extend($all-config, absolute);
$border-widths: functions.get-with-extend($all-config, border, width);

$blurs: functions.get-with-extend($all-config, filters, blurs);

$heights: functions.get-with-extend($all-config, heights);
$widths: functions.get-with-extend($all-config, widths);
$min-heights: functions.get-with-extend($all-config, min-heights);
$max-heights: functions.get-with-extend($all-config, max-heights);
$min-widths: functions.get-with-extend($all-config, min-widths);
$max-widths: functions.get-with-extend($all-config, max-widths);

$flex-properties: functions.get-with-extend($all-config, flex, properties);
$flex-columns: map.get($flex-properties, flex-columns);
$flex-width: math.div(1, $flex-columns);

$grid-properties: functions.get-with-extend($all-config, grid, properties);
$grid-columns: map.get($grid-properties, grid-columns);
$default-grid-gap: map.get($grid-properties, default-grid-gap);

$opacities: functions.get-with-extend($all-config, opacity);
$round: functions.get-with-extend($all-config, round);
$shadows: functions.get-with-extend($all-config, shadows);
$spacing-system: functions.get-with-extend($all-config, sizing-system);
$transition-durations: functions.get-with-extend($all-config, transitions, durations);
$z-indexes: functions.get-with-extend($all-config, z-index);

/*
    Fetch feature flag for different utility class types for generating viewport classes (e.g., u-flex-sm, u-flex-md, etc.).
*/
@function get-viewport-flag($name) {
    @return get-viewport-flag-internal($viewport-flags, $name);
}
@function get-viewport-flag-internal($flag-map, $name) {
    @if not map-has-key($flag-map, $name) {
        @return throw.error(
            $message: '[get-viewport-flag] Unknown constant `#{$name}`.',
            $source: 'get-viewport-flag()',
            $catch: true
        );
    }

    @return map.get($flag-map, $name);
}

/*
  Helper function to determine if a set of classes should be generated based on given include/exclude configuration.
*/
@function should-generate-classes($flag) {
    @return should-generate-classes-internal($includes, $excludes, $flag);
}
@function should-generate-classes-internal($to-include, $to-exclude, $flag) {
    $generate-classes: true;
    @if list.index($to-exclude, flags.$ALL) or list.index($to-exclude, 'ALL') {
        $generate-classes: false;
    }
    @if list.index($to-exclude, $flag) {
        $generate-classes: false;
    }

    // TODO: Unit test
    @if list.index($to-include, $flag) or list.index($to-include, flags.$ALL) or list.index($to-include, 'ALL') {
        $generate-classes: true;
    }

    @return $generate-classes;
}