// RIVER Design-System - Local Utilities

// Here we define and/or update the default utility settings for output.
// Each utility can define its own list of values, or point to a design map.
// Utility classes have the format: {utility|property}--{value} (see 'system/mixins-utilities' for more information).

// To define a completley new set of utilities and clear the existing ones:
// $design-utilities: design-utilities-set((...));

// To add new utilities and/or override existing utilities that match:
// $design-utilities: design-utilities-add((...));

// To extend and update existing utilities:
// $design-utilities: design-utilities-add((...));

// By default all design map references are disabled, so we turn a few back on.
// Note, as we're only turning some utilities on/off, we need to ensure we refer to the correct names.


// Update existing utilities
$design-utilities: design-utilities-apply((

    // Display
    'display-important': (
        enabled: true,
        responsive: true, // 'sm' 'md' 'lg',
    ),
    'display-common': (
        enabled: true,
        responsive: false, // 'sm' 'md' 'lg',
    ),

    // Position
    'position': (
        enabled: true,
        responsive: false,
    ),

    // Text
    'text': (
        enabled: true,
        responsive: 'sm' 'md' 'lg',
    ),

    // Flex
    'flex-direction': (
        enabled: true,
        responsive: 'sm' 'md' 'lg',
    ),
    'flex-wrap': (
        enabled: true,
        responsive: false,
    ),
    'justify-content': (
        enabled: true,
        responsive: 'sm' 'md' 'lg',
    ),
    'align-items': (
        enabled: true,
        responsive: 'sm' 'md' 'lg',
    ),
    'align-content': (
        enabled: false, // Rarely used...
        responsive: false,
    ),
));

// Update existing utilities for design
// Note, design utilties are defined though disabled by default
$design-utilities: design-utilities-apply((

    // Design - Borders @common
    'border-helpers': (
        enabled: true,
        responsive: false,
    ),

    // Design - Color @colors
    'design-color-all': (
        enabled: true,
        responsive: false,
        states: false,
        // values: '@colors',
        values: '@colors' 'base' 'reverse' 'light' 'normal' 'dark' 'border' 'bg', // limited references
        defaultValue: 'normal',
    ),
    'design-color-primary': (
        enabled: false,
        responsive: false,
        states: 'hover',
        // values: '@colors.primary',
        values: '@colors.primary' 'light' 'normal' 'dark' 'border' 'bg', // limited references
        valuePrefix: 'primary' + design-setting('lang.utilities.range-seperator'),
        defaultValue: 'normal',
    ),
    'design-color-gray': (
        enabled: false,
        responsive: false,
        states: false,
        // values: '@colors.gray',
        values: '@colors.gray' 'light' 'normal' 'dark' 'border' 'bg', // limited references
        valuePrefix: 'gray' + design-setting('lang.utilities.range-seperator'),
        defaultValue: 'normal',
    ),

    // Design - Notification Color @notifications
    'design-notifications-text': (
        enabled: true,
        responsive: false,
    ),
    'design-notifications-bg': (
        enabled: true,
        responsive: false,
    ),
    'design-notifications-border': (
        enabled: true,
        responsive: false,
    ),

    // Design - Type @type
    'design-type-font': (
        enabled: false,
        responsive: false,
        values: '@type.font',
        // values: '@type.font' 'primary' 'secondary', // limited references
    ),
    'design-type-size': (
        enabled: true,
        responsive: 'sm' 'md' 'lg',
        values: '@type.size', // 'small' 'normal' 'large'
        // values: '@type.size' 'small' 'normal' 'large', // limited references
    ),
    'design-type-weight': (
        enabled: true,
        // values: '@type.weight',
        values: '@type.weight' 'normal' 'bold' 'title', // limited references
    ),

    'design-type-spacing': (
        enabled: true,
        responsive: false,
        values: '@type.spacing',
        // values: '@type.spacing' 'normal' 'small', // limited references
    ),

    'design-type-line-height': (
        enabled: false,
        responsive: false,
        values: '@type.line-height', // 'none' 'small' 'normal' 'large'
    ),
    'design-type-letter-spacing': (
        enabled: false,
        responsive: false,
        values: '@type.letter-spacing',
        // values: '@type.letter-spacing' 'normal', // limited references
    ),

    // Design - Dimension @sizes
    'design-dimension-width': (
        // Note, this is separate from the width helper, which outputs '.width--' classes
        enabled: true,
        responsive: 'md',
        // values: '@sizes.size'
        values: '@sizes.size' 'subtle' 'smallest' 'x-small' 'small' 'normal' 'large' 'x-large', // limited references
    ),
    'design-dimension-height': (
        enabled: true,
        responsive: 'md',
        // values: '@sizes.size'
        values: '@sizes.size' 'subtle' 'smallest' 'x-small' 'small' 'normal' 'large' 'x-large', // limited references
    ),
    'dimension-helpers': (
        enabled: true,
         responsive: 'md',
    ),

    // Design - Margin @sizes
    'design-margin': (
        enabled: true,
        responsive: 'md',
        // values: '@sizes.size'
        values: '@sizes.size' 'subtle' 'smallest' 'x-small' 'small' 'normal' 'large' 'x-large', // limited references
    ),
    'design-margin-negative': (
        enabled: false,
        responsive: 'md',
        // values: '@sizes.size'
        values: '@sizes.size' 'subtle' 'smallest' 'x-small' 'small' 'normal' 'large' 'x-large', // limited references
    ),
    'margin-helpers': (
        enabled: true,
        responsive: 'md',
    ),

    // Design - Padding @sizes
    'design-padding': (
        enabled: true,
        responsive: 'md',
        // values: '@sizes.size'
        values: '@sizes.size' 'subtle' 'smallest' 'x-small' 'small' 'normal' 'large' 'x-large', // limited references
    ),
    'padding-helpers': (
        enabled: true,
        responsive: 'md',
    ),
    'design-padding-box': (
        enabled: true,
        responsive: 'md',
    ),

    // Design - Gap @sizes
    'design-gap': (
        enabled: true,
        responsive: 'md',
        // values: '@sizes.size'
        values: '@sizes.size' 'subtle' 'smallest' 'x-small' 'small' 'normal' 'large' 'x-large', // limited references
    ),
    'gap-helpers': (
        enabled: true,
        responsive: 'md',
    ),

));