_variables.scss

@import "core/functions/_index.scss";
@import "core/_color-system.scss";


// Options
$enable-rounded: true !default;
$enable-shadows: true !default;
$enable-gradients: true !default;
$enable-transitions: true !default;
$enable-flex-classes: true !default;
$enable-grid-classes: true !default;

$use-calc-badge-size: true !default;
$use-input-button-width: true !default;
$use-input-spinner-width: true !default;
$use-input-spinner-icon-offset: false !default;
$use-picker-select-width: true !default;


// Spacing
$spacer: 1em !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;

$spacing: (
    0: 0,
    1: 4px,
    2: 8px,
    3: 12px,
    4: 16px,
    5: 20px,
    6: 24px,
    7: 28px,
    8: 32px,
    9: 36px,
    10: 40px,
    11: 44px,
    12: 48px,
    13: 52px,
    14: 56px,
    15: 60px,
    16: 64px,
    17: 68px,
    18: 72px,
    19: 76px,
    20: 80px,
    21: 84px,
    22: 88px,
    23: 92px,
    24: 96px,
    xs: 4px,
    sm: 8px,
    md: 12px,
    lg: 16px,
    xl: 24px,
    thin: 2px,
    hair: 1px
) !default;

$default-scrollbar-width: 17px !default;


// Icons
$icon-size: 16px !default;
$icon-size-lg: 32px !default;
$icon-spacing: map-get( $spacing, 1 ) !default;

/// The URL to the icon font that will be used by the theme
/// The default value of `null` embeds the package font with a `data:` URL
/// @group icons
$icon-font-url: null !default;


// Metrics
$padding-x: 8px !default;
$padding-y: 4px !default;
$padding-x-sm: $padding-x / 2 !default;
$padding-y-sm: $padding-y / 2 !default;
$padding-x-lg: $padding-x * 1.5 !default;
$padding-y-lg: $padding-y * 1.5 !default;

/// Border radius for all components.
$border-radius: 2px !default;
$border-radius-sm: $border-radius / 2 !default;
$border-radius-lg: $border-radius * 2 !default;

$panel-padding-x: $padding-x !default;
$panel-padding-y: $padding-y !default;

$header-padding-x: $padding-x !default;
$header-padding-y: $padding-y * 2 !default;

$nav-item-margin: 0px !default;
$nav-item-padding-x: $padding-x-lg !default;
$nav-item-padding-y: $padding-y-lg !default;

$table-cell-padding-x: 12px !default;
$table-cell-padding-y: 8px !default;
$header-cell-padding-x: 12px !default;
$header-cell-padding-y: 8px !default;

$zindex-popup: 1 !default;
$zindex-window: 2 !default;


// Color settings
$dark-theme: false !default;


// Deprecated
/// The color that focuses the user attention.
/// @deprecated Will be removed in v5. Use `$primary` variable instead.
/// @group color-system
/// @type Color
$accent: #ff6358 !default;
/// The color used along with the accent color denoted by $primary.
/// @deprecated Will be removed in v5. Use `$primary-contrast` variable instead.
/// @group color-system
/// @type Color
$accent-contrast: contrast-wcag( $accent ) !default;


// Theme colors
/// The color that focuses the user attention.
/// Used for primary buttons and for elements of primary importance across the theme.
/// @group color-system
/// @type Color
$primary: #ff6358 !default;
$primary-lighter: tint( $primary, 2 ) !default;
$primary-darker: shade( $primary, 2 ) !default;

/// The color used along with the accent color denoted by $primary.
/// Used to provide contrast between the background and foreground colors.
/// @group color-system
/// @type Color
$primary-contrast: contrast-wcag( $primary ) !default;

/// The secondary color of the theme.
/// @group color-system
/// @type Color
$secondary: #666666 !default;
$secondary-lighter: tint( $secondary, 2 ) !default;
$secondary-darker: shade( $secondary, 2 ) !default;

/// The color used along with the secondary color denoted by $secondary.
/// Used to provide contrast between the background and foreground colors.
/// @group color-system
/// @type Color
$secondary-contrast: contrast-wcag( $secondary ) !default;

/// The tertiary color of the theme.
/// @group color-system
/// @type Color
$tertiary: #03a9f4 !default;
$tertiary-lighter: tint( $tertiary, 2 ) !default;
$tertiary-darker: shade( $tertiary, 2 ) !default;

/// The color used along with the tertiary color denoted by $tertiary.
/// Used to provide contrast between the background and foreground colors.
/// @group color-system
/// @type Color
$tertiary-contrast: contrast-wcag( $tertiary ) !default;

/// The color for informational messages and states.
/// @group color-system
/// @type Color
$info: #0058e9 !default;
$info-lighter: tint( $info, 2 ) !default;
$info-darker: shade( $info, 2 ) !default;

/// The color for success messages and states.
/// @group color-system
/// @type Color
$success: #37b400 !default;
$success-lighter: tint( $success, 2 ) !default;
$success-darker: shade( $success, 2 ) !default;

/// The color for warning messages and states.
/// @group color-system
/// @type Color
$warning: #ffc000 !default;
$warning-lighter: tint( $warning, 2 ) !default;
$warning-darker: shade( $warning, 2 ) !default;

/// The color for error messages and states.
/// @group color-system
/// @type Color
$error: #f31700 !default;
$error-lighter: tint( $error, 2 ) !default;
$error-darker: shade( $error, 2 ) !default;

/// The dark color of the theme.
/// @group color-system
/// @type Color
$dark: #424242 !default;

/// The light color of the theme.
/// @group color-system
/// @type Color
$light: #ebebeb !default;

/// Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
/// @group color-system
$inverse: if( $dark-theme, $light, $dark ) !default;


$kendo-theme-colors: (
    "primary": $primary,
    "secondary": $secondary,
    "tertiary": $tertiary,
    "info": $info,
    "success": $success,
    "warning": $warning,
    "error": $error,
    "dark": $dark,
    "light": $light,
    "inverse": $inverse
) !default;

// Cursor utility classes
$cursors: ( auto, default, none, context-menu, help, pointer, progress, wait, cell, crosshair, text,
    vertical-text, alias, copy, move, no-drop, not-allowed, e-resize, n-resize, ne-resize, nw-resize,
    s-resize, se-resize, sw-resize, w-resize, ew-resize, ns-resize, nesw-resize, nwse-resize, col-resize,
    row-resize, all-scroll, zoom-in, zoom-out, grab, grabbing ) !default;


// Root styles
$body-bg: $white !default;
$body-text: #424242 !default;

$heading-text: #292929 !default;
$subtle-text: #666666 !default;
$disabled-text: #8f8f8f !default;

$app-bg: try-shade( $body-bg, .25 ) !default;
$app-text: $body-text !default;
$app-border: rgba( $black, .08 ) !default;


// Components

// Component
/// Background color of a component.
/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !default;`.
/// @group component
$component-bg: $body-bg !default;
/// Text color of a component.
/// Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$grid-text: component-text !default;`.
/// @group component
$component-text: $body-text !default;
/// Border color of a component.
/// Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$grid-border: component-border !default;`.
/// @group component
$component-border: rgba( if( $dark-theme, $white, $black ), .08 ) !default;


/// The background of the components' chrome area.
$base-bg: #fafafa !default;
/// The text color of the components' chrome area.
$base-text: $body-text !default;
/// The border color of the components' chrome area.
$base-border: rgba( black, .08 ) !default;
/// The gradient background of the components' chrome area.
$base-gradient: rgba( black, 0 ), rgba( black, .02 ) !default;

/// The background of hovered items.
$hovered-bg: try-shade( $base-bg, .5 ) !default;
/// The text color of hovered items.
$hovered-text: $base-text !default;
/// The border color of hovered items.
$hovered-border: $base-border !default;
/// The gradient background of hovered items.
$hovered-gradient: $base-gradient !default;

/// The background of selected items.
$selected-bg: $primary !default;
/// The text color of selected items.
$selected-text: contrast-wcag( $selected-bg ) !default;
/// The border color of selected items.
$selected-border: $base-border !default;
/// The gradient background of selected items.
$selected-gradient: $base-gradient !default;

$selected-hover-bg: try-shade( $selected-bg, .5 ) !default;
$selected-hover-text: $selected-text !default;
$selected-hover-border: $base-border !default;
$selected-hover-gradient: $base-gradient !default;

// TODO: refactor
$focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
$primary-focused-shadow: inset 0 0 0 2px rgba($primary, .3) !default;

$transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default;


// Disabled mixin variables
$disabled-filter: grayscale(.1) !default;
$disabled-opacity: .6 !default;


// Generic styles

// TODO: refactor once we extract drag drop as separate module
$font-size: 14px !default;
$font-family: inherit !default;
$line-height: ( 20 / 14 ) !default;


// Drop Hint
$equilateral-index: 1.7320508076 !default;
$equilateral-height: .8660254038 !default;

$drop-hint-arrow-size: 8px !default;
$drop-hint-arrow-spacing: ($drop-hint-arrow-size / 2) !default;
$drop-hint-line-h-width: 20px !default;
$drop-hint-line-h-height: 1px !default;
$drop-hint-line-v-width: $drop-hint-line-h-height !default;
$drop-hint-line-v-height: $drop-hint-line-h-width !default;

$drop-hint-bg: $primary !default;


// Panel
$panel-bg: $component-bg !default;
$panel-text: $component-text !default;
$panel-border: $component-border !default;


// Grouping
$grouping-header-bg: $body-text !default;
$grouping-header-text: $body-bg !default;
$grouping-header-border: $component-border !default;
$frozen-grouping-header-text: null !default;
$frozen-grouping-header-border-width: null !default;


// Header
$header-bg: $base-bg !default;
$header-text: $base-text !default;
$header-border: $base-border !default;
$header-gradient: null !default;


// Loading


// Placeholder
$placeholder-line-width: 100% !default;
$placeholder-line-height: 10px !default;
$placeholder-bg: rgba(0, 0, 0, .1) !default;


// Table


// Validator
$invalid-bg: null !default;
$invalid-text: $error !default;
$invalid-border: rgba( $error, .5 ) !default;
$invalid-shadow: null !default;


// Drag clue
$drag-clue-padding-x: $padding-x !default;
$drag-clue-padding-y: $padding-y !default;
$drag-clue-border-width: 1px !default;
$drag-clue-border-radius: $border-radius !default;
$drag-clue-font-size: $font-size !default;
$drag-clue-font-family: $font-family !default;
$drag-clue-line-height: $line-height !default;

$drag-clue-bg: $base-bg !default;
$drag-clue-text: $base-text !default;
$drag-clue-border: $base-border !default;
$drag-clue-gradient: null !default;
$drag-clue-shadow: null !default;

$drag-clue-opacity: null !default;


// Layout
$grid-cols: 12 !default;
$grid-rows: 10 !default;
$grid-gap: 10px !default;


// Disabled Styling maps
$disabled-styling: (
    opacity: $disabled-opacity,
    filter: $disabled-filter
) !default;