// Ripple Design System - Settings

// Here we define local settings for the Design System.
// Settings are merged on update, so we only need to specify what we want to change.

// Tp update the default settings, we use:
// $design-settings: design-settings-apply(...);

// We note the full list of settings here for visibility, and only change our values of choice.
// By default we only turn off a few helper settings to cut down CSS package size.
$design-settings: design-settings-apply((

    // // 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,
    // ),
    // 'variables': false, // DISABLE all CSS Variables

    // // 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',
    // ),
    // 'defaults': false, // DISABLE all Defaults (maps, styles, and 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
    // ),
    // 'preload': false, // DISABLE Preload CSS output

    // // 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,
    // ),
    // 'helpers': false, // DISABLE all Helpers

    // // 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)
    // ),
    // 'utilities': false, // DISABLE all Utilities

    // // 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': (
    //         // 2xs:                    0,
    //         // xs:                     480px,
    //         xs:                     0,
    //         sm:                     720px,
    //         md:                     1020px,
    //         lg:                     1280px,
    //         xl:                     1440px,
    //         // 2xl:                    1600px,
    //         // 3xl:                   1920px,
    //         // 4xl:                  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,
    // ),

));