// RIVER Design-System: System - Settings //

// Master settings for the design-system, access via design-setting(...).
// These enable/disable high-level features, and define default functionality.
// Note, removing any of these settings may cause unexpected behaviour or errors.

// To update settings, use design-settings-apply(...) with valid group/settings as follows:
// $design-settings: design-settings-apply(( 'variables': ..., 'preload': ... ));
// This merges in your defined settings, so you only need to define what you want to update.

// Default Settings
$design-settings-defaults: (

    // System Settings - Variables; set to false to disable CSS Variables output
    'variables': (
        // Whether to output CSS Variables for the design system under :root, as part of 'preload/variables'
        'output':                   true,

        // Whether to allow CSS Variables to reference other variables within a range
        // eg, --colors-brand-primary--title: var(--colors-brand-primary--normal)
        // If disabled, CSS Variables output will include literal values only by default (no variable references)
        'references':               true,
    ),

    // System Settings - Defaults; set to false to disable loading defaults
    'defaults': (
        // Turn groups on or off, or set to a whitelist of valid options
        'maps':                     true, // 'colors' 'notifications' 'type' 'sizes' 'common',
        'styles':                   true, // 'base' 'typography',
        'utilities':                true, // 'utilities',
    ),

    // System Settings - Preload; set to false to disable preloading
    'preload': (
        'normalise':                false,
        'reset':                    true,
        'base':                     true,
        // Refer to 'variables.output' to enable/disable variables as part of preloading
    ),

    // System Settings - Helpers; set to false to disable all Helpers
    'helpers': (
        'display-general':          true,
        'layout-general':           true,
        'layout-container':         true,
        'layout-section':           true,
        'styles-typography':        true,
        'styles-formats':           true,
        'styles-lists':             true,
        'styles-visuals':           true,
        'styles-notifications':     true,
        'styles-scope':             true,
        'widths':                   true,
        'grid-cols':                true,
        'flex-cols':                true,
        'flex-general':             true,
    ),

    // System Settings - Utilities; set to false to disable all Utilities
    // Refer to 'defaults/utilities' to view all predefined utilities, and define your own as desired.
    'utilities': (
        // Default utility settings to apply during 'utilities/normalise'
        enabled: true, // whether to include this utility in utility classes (quick way to exclude a set of utility classes)
        properties: null, // REQUIRED, the map of prefix/property pairs to define (or a single property to apply the utility without a prefix, such as "display")
        values: (), // REQUIRED, the map of label/value pairs to output for each property (or a '@group.range' design system reference, followed by an optional whitelist of references)
        responsive: false, // whether to include the responsive variations (design-breakpoint-up mobile-first media queries); true, or a whitelist of breakpoints
        responsiveAt: false, // whether to include the 'md-at:' style breakpoint variations (design-breakpoint-at specific media queries); true, or a whitelist of breakpoints
        responsiveDown: false, // whether to include the 'md-down:' style breakpoint variations (design-breakpoint-down deskptop-first media queries); true, or a whitelist of breakpoints
        states: false, // whether to include the interactive state variations; true, or a whitelist of states (active, hover, focus, disabled)
        media: false, // whether to include the media type variation; true, or a whitelist of media types (all, print, screen, speech)
        calculation: false, // whether to perform a multiplication calculation on the values (eg, -1)
        important: false, // whether to set the property value(s) as !important
        importantVariation: false, // whether to also include a '{class-name}!' version of the utility class with an !important override
        valuePrefix: false, // whether to prefix the value part of the class (for design-maps, this is used to build the range prefix, such as 'primary.normal')
        valueSuffix: false, // whether to add a suffix to the value (class name as a whole); eg, '-negataive' is commonly used with calculation: -1
        defaultValue: false, // for design-maps, whether to output a default value without using the --label; eg, 'color-primary': { var(--color-primary--normal); }
        includeRange: false, // for design-maps, whether to include the numbered design range in utility output (if false, only named references such as 'normal' are output)
        includeXero: false, // for design-maps, whether to include 0 from the range (useful as you'll often want a '0' none option, even if the range is turned off)
    ),

    // System Settings - Language
    'lang': (
        // For CSS Variables, the seperator between a group and the range
        // eg, --colors'-'grayscale, --sizes'-'size, etc
        'variables.range-seperator': '-',

        // For CSS Variables, the seperator between a range (or group) and the value
        // eg, --colors-grayscale'-'normal, --colors'-'base, --sizes-size'-'normal, etc
        'variables.value-seperator': '-',

        // For Utilities, the seperator between the utility name and value (if a utility name is present)
        // eg, .display{--}block, .bg{--}base, etc
        'utilities.value-seperator': '--',

        // For Utilities, the seperator used within design-map ranges
        // eg, .color--primary'.'normal, .bg--gray'.'normal, etc
        'utilities.range-seperator': '.',

        // For Utilities, the seperator used for variations
        // eg, md':'..., hover':'..., etc
        'utilities.variation-seperator': ':',
    ),

    // General Settings - Responsive
    'responsive': (
        'fluid-from':               'md',
        'breakpoint-snap':          20px,
        'breakpoints': (
            // xxs:                    0,
            // xs:                     480px,
            xs:                     0,
            sm:                     720px,
            md:                     1020px,
            lg:                     1280px,
            xl:                     1440px,
            // xxl:                    1600px,
            // xxxl:                   1920px,
            // xxxxl:                  2560px,
        ),
    ),

    // Design Settings - Color
    'colors': (
        // The default % change between shifts in color
        'shift':                    15%,
    ),

    // Design Settings - Type
    'type': (
        // Font scale setup (font-size range)
        'scale.count':              25, // Number of values in our range
        'scale.base':               1rem, // Font sizes in rems
        'scale.multiplier':         1.08, // Font Size n = 1rem * 1.08^(n-1)

        // Default root-size for font, applied to the HTML element by default
        // This is applied via 'defaults/map-base', and output via 'preload/base'
        'root-size':                62.5%, // 1rem = 10px
    ),

    // Design Settings - Sizes
    'sizes': (
        // Size scale setup (size range)
        'scale.count':              50, // Number of values in our range
        'scale.base':               1rem, // Sizes in rems
        'scale.increments':         0.5, // Size n = 1rem * (0.5n); even increments
    ),

    // Helper Settings - Widths
    'widths': (
        'count':                    12,
        'percents': (20%, 25%, 33%, 40%, 50%, 60%, 66%, 75%, 80%, 100%),
        'width-helpers':            true,
        'offset-helpers':           true,
    ),

    // Helper Settings - Grid Cols
    'grid-cols': (
        'variations':               true,
        'gap-variable':             false, // Called with design-variable(...)
        'count':                    12,
        'col-helpers':              true,
        'span-helpers':             true,
    ),

    // Helper Settings - Flex Cols
    'flex-cols': (
        'variations':               true,
        'gutter-variable':          ('sizes.gutter.normal', 3rem), // Called with design-variable(...)
        'col-helpers':              true,
    ),

) !default;

// Custom Settings
$design-settings: () !default;

// Deep merge in custom settings
$design-settings: map-deep-merge(
    $design-settings-defaults,
    $design-settings,
);