igniteui-theming 1.4.2 → 1.4.3-beta.1

package/sass/themes/schemas/components/light/_checkbox.scss

@@ -0,0 +1,212 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/* stylelint-disable max-line-length */
+
+/// Generates a light checkbox schema.
+/// @type {Map}
+/// @prop {Map} tick-color [color: ('surface', 500)] - The checked mark color.
+/// @prop {Map} tick-color-hover [color: ('surface', 500)] - The checked mark color on hover.
+/// @prop {Map} label-color [color: ('gray', 900)]- The text color used for the label text.
+/// @prop {Map} empty-color [color: ('gray', 600)] - The unchecked border color.
+/// @prop {Map} fill-color [color: ('secondary', 500)] - The checked border and fill colors.
+/// @prop {Map} fill-color-hover [color: ('secondary', 500)] - The checked border and fill colors on hover.
+/// @prop {Map} disabled-color [color: ('gray', 400)] - The disabled border and fill colors.
+/// @prop {Map} disabled-indeterminate-color [color: ('secondary', 200)] - The disabled border and fill colors in indeterminate state.
+/// @prop {Map} disabled-color-label [color: ('gray', 500)] - The disabled color of the label.
+/// @prop {Map} error-color [color: ('error', 500)] - The border and fill colors in invalid state.
+/// @prop {Map} error-color-hover [color: ('error', 500)] - The border and fill colors in invalid state on hover.
+/// @prop {Map} error-color-focus [color: ('error', 500)] - The border and fill colors in invalid state on focus.
+/// @prop {Number} border-radius [2px] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-radius-ripple [24px] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent.
+$light-checkbox: extend(
+    (
+        type: 'light',
+        tick-color: (
+            color: ('surface', 500)
+        ),
+        tick-color-hover: (
+            color: ('surface', 500)
+        ),
+        label-color: (
+            color: ('gray', 900)
+        ),
+        empty-color: (
+            color: ('gray', 600)
+        ),
+        fill-color: (
+            color: ('secondary', 500)
+        ),
+        fill-color-hover: (
+            color: ('secondary', 500)
+        ),
+        disabled-color: (
+            color: ('gray', 400)
+        ),
+        disabled-indeterminate-color: (
+            color: ('secondary', 100)
+        ),
+        disabled-color-label: (
+            color: ('gray', 500)
+        ),
+        error-color: (
+            color: ('error', 500)
+        ),
+        error-color-hover: (
+            color: ('error', 500)
+        ),
+        error-color-focus: (
+            color: ('error', 500)
+        ),
+        border-radius: rem(2px),
+        border-radius-ripple: rem(24px)
+    )
+);
+
+/// Generates a fluent checkbox schema.
+/// @type {Map}
+/// @prop {Map} tick-color [color: ('surface', 500)] - The checked mark color.
+/// @prop {Map} tick-color-hover [color: ('gray', 700)] - The checked mark color on hover when the control in unchecked.
+/// @prop {Map} empty-color [color: ('gray', 900)] - The unchecked border color.
+/// @prop {Map} fill-color [color: ('primary', 500)] - The checked border and fill colors.
+/// @prop {Map} fill-color-hover [color: ('primary', 900)] - The checked border and fill colors on hover.
+/// @prop {Map} disabled-color [color: ('gray', 400)] - The disabled border and fill colors.
+/// @prop {Map} disabled-color-label [color: ('gray', 400)] - The disabled color of the label.
+/// @prop {Map} focus-outline-color [color: ('gray', 800)] - The focus outlined color.
+/// @prop {Map} error-color [color: ('error', 500)] - The border and fill colors in invalid state on hover.
+/// @prop {Map} error-color-hover [color: ('error', 700)] - The border and fill colors in invalid state on hover.
+/// @prop {Number} border-radius [2px] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-radius-ripple [2px] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-checkbox
+$fluent-checkbox: extend(
+    $light-checkbox,
+    (
+        tick-color-hover: (
+            color: ('gray', 700)
+        ),
+        focus-outline-color: (
+            color: ('gray', 800)
+        ),
+        empty-color: (
+            color: ('gray', 900)
+        ),
+        fill-color: (
+            color: ('primary', 500)
+        ),
+        fill-color-hover: (
+            color: ('primary', 900)
+        ),
+        disabled-color: (
+            color: ('gray', 400)
+        ),
+        disabled-color-label: (
+            color: ('gray', 400)
+        ),
+        error-color: (
+            color: ('error', 500)
+        ),
+        error-color-hover: (
+            color: ('error', 700)
+        ),
+        border-radius: rem(2px),
+        border-radius-ripple: rem(2px)
+    )
+);
+
+/// Generates a bootstrap checkbox schema.
+/// @type {Map}
+/// @prop {Map} fill-color [color: ('primary', 500)] - The checked border and fill colors.
+/// @prop {Map} empty-color [color: ('gray', 500)] - The unchecked border color.
+/// @prop {Map} disabled-color [color: ('primary', 200)] - The disabled border and fill colors.
+/// @prop {Map} disabled-color-label [color: ('gray', 400)] - The disabled color of the label.
+/// @prop {Map} focus-outline-color [color: ('primary', 100)] - The focus outlined color.
+/// @prop {Map} error-color-hover [color: ('error', 100)] - The focus outlined color in invalid state.
+/// @prop {Number} border-radius [4px] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-radius-ripple [4px] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-checkbox
+$bootstrap-checkbox: extend(
+    $light-checkbox,
+    (
+        focus-outline-color: (
+            color: ('primary', 100)
+        ),
+        fill-color: (
+            color: ('primary', 500)
+        ),
+        empty-color: (
+            color: ('gray', 500)
+        ),
+        disabled-color: (
+            color: ('primary', 200)
+        ),
+        disabled-color-label: (
+            color: ('gray', 400)
+        ),
+        error-color-hover: (
+            color: ('error', 100)
+        ),
+        border-radius: rem(4px),
+        border-radius-ripple: rem(4px)
+    )
+);
+
+/// Generates an indigo checkbox schema.
+/// @type {Map}
+/// @prop {Color} tick-color [color: 'surface'] - The checked mark color.
+/// @prop {Color} tick-color-hover [color: 'surface'] - The checked mark color on hover.
+/// @prop {Map} fill-color [color: ('primary', 500)] - The checked border and fill colors.
+/// @prop {Map} empty-color [color: ('gray', 500)] - The unchecked border color.
+/// @prop {Map} disabled-color [color: ('gray', 300)] - The disabled border and fill colors.
+/// @prop {Map} disabled-color-label [color: ('gray', 300)] - The disabled label color.
+/// @prop {Map} focus-outline-color [color: ('gray', 300, .87)] - The focus outlined color.
+/// @prop {Map} focus-outline-color-focused [color: ('secondary', 200, .87)] - The focus outlined color for focused state.
+/// @prop {Map} outline-color-hover-unchecked [color: ('gray', 200, .87)] - The hover outlined color for unchecked state.
+/// @prop {Map} outline-color-hover-checked [color: ('secondary', 100, .87)] - The hover outlined color for checked state.
+/// @prop {Map} error-color-hover [color: ('error', 100, .87)] - The focus outlined color in invalid state.
+/// @prop {Map} error-color-focus [color: ('error', 200, .87)] - The border and fill colors in invalid state on focus.
+/// @prop {Number} border-radius [3px] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-radius-ripple [3px] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-checkbox
+$indigo-checkbox: extend(
+    $light-checkbox,
+    (
+        outline-color-hover-unchecked: (
+            color: ('gray', 200, .87)
+        ),
+        outline-color-hover-checked: (
+            color: ('secondary', 100, .87)
+        ),
+        focus-outline-color: (
+            color: ('gray', 300, .87)
+        ),
+        focus-outline-color-focused: (
+            color: ('secondary', 200, .87)
+        ),
+        fill-color: (
+            color: ('primary', 500)
+        ),
+        empty-color: (
+            color: ('gray', 500)
+        ),
+        disabled-color: (
+            color: ('gray', 300),
+        ),
+        disabled-color-label: (
+            color: ('gray', 300),
+        ),
+        error-color-hover: (
+            color: ('error', 100, .87)
+        ),
+        error-color-focus: (
+            color: ('error', 200, .87)
+        ),
+        border-radius: rem(3px),
+        border-radius-ripple: rem(3px)
+    )
+);

package/sass/themes/schemas/components/light/_combo.scss

@@ -0,0 +1,203 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/* stylelint-disable max-line-length */
+
+/// Generates a light combo schema.
+/// @type {Map}
+/// @prop {Map} empty-list-background [color: 'surface'] - The combo list background color.
+/// @prop {Map} search-separator-border-color [color: ('gray', 500)] - The combo search box separator color.
+/// @prop {Map} empty-list-placeholder-color [color: ('gray', 700)] - The combo placeholder text color.
+/// @prop {Map} toggle-button-background [color: ('gray', 300)] - The combo toggle button background color.
+/// @prop {Map} toggle-button-background-focus [color: ('gray', 400, .3)] - The combo toggle button background color when the combo is focused.
+/// @prop {Map} toggle-button-foreground [color: ('gray', 700)] - The combo toggle button foreground color.
+/// @prop {Map} toggle-button-foreground-focus [color: ('gray', 700)] - The combo toggle button foreground color when the combo is focused.
+/// @prop {Map} toggle-button-foreground-filled [color: ('gray', 900)] - The combo toggle button foreground color when the combo is focused.
+/// @prop {Map} toggle-button-background-disabled [color: ('gray', 300)] - The combo toggle button background color when the combo is disabled.
+/// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 700)] - The combo toggle button foreground color when the combo is disabled.
+/// @prop {Color} clear-button-background [transparent] - The combo clear button background color.
+/// @prop {Color} clear-button-background-focus [transparent] - The combo clear button background color when the combo is focused.
+/// @prop {Map} clear-button-foreground [contrast-color: ('gray', 100)] - The combo toggle clear foreground color.
+/// @prop {Map} clear-button-foreground-focus [contrast-color: ('gray', 100)] - The combo clear button foreground color when the combo is focused.
+/// @prop {Map} case-icon-color [color: ('gray', 400)] - The case sensitive icon color in inactive state for combo search input
+/// @prop {Map} case-icon-color--active [color: ('primary', 500)] - The case sensitive icon color in active state for combo search input
+$light-combo: (
+    case-icon-color: (
+        color: ('gray', 400)
+    ),
+    case-icon-color--active: (
+        color: ('primary', 500)
+    ),
+    empty-list-background: (
+        color: 'surface'
+    ),
+    search-separator-border-color: (
+        color: ('gray', 500),
+    ),
+    empty-list-placeholder-color: (
+        color: ('gray', 700),
+    ),
+    toggle-button-background: (
+        color: ('gray', 300),
+    ),
+    toggle-button-background-focus: (
+        color: ('gray', 400, .3),
+    ),
+    toggle-button-foreground: (
+        color: ('gray', 700),
+    ),
+    toggle-button-foreground-focus: (
+        color: ('gray', 700),
+    ),
+    toggle-button-foreground-filled: (
+        color: ('gray', 900),
+    ),
+    clear-button-background: transparent,
+    clear-button-background-focus: transparent,
+    clear-button-foreground: (
+        contrast-color: ('gray', 100),
+    ),
+    clear-button-foreground-focus: (
+        contrast-color: ('gray', 100),
+    ),
+    toggle-button-background-disabled: (
+        color: ('gray', 300),
+    ),
+    toggle-button-foreground-disabled: (
+        color: ('gray', 500),
+    ),
+);
+
+/// Generates a fluent combo schema.
+/// @type {Map}
+/// @prop {Map} toggle-button-background [color: ('gray', 100)] - The combo toggle button background color.
+/// @prop {Map} toggle-button-background-focus [color: ('gray', 100)] - The combo toggle button background color when the combo is focused.
+/// @prop {Color} clear-button-background [color: ('gray', 100)] - The combo clear button background color.
+/// @prop {Color} clear-button-background-focus [color: ('gray', 100)] - The combo clear button background color when the combo is focused.
+/// @prop {Map} toggle-button-foreground-filled [color: ('gray', 700)] - The combo toggle button foreground color when the combo is focused.
+/// @prop {Map} toggle-button-background-disabled [color: ('gray', 100)] - The combo toggle button background color when the combo is disabled.
+/// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 400)] - The combo toggle button foreground color when the combo is disabled.
+/// @requires {Map} $light-combo
+$fluent-combo: extend(
+    $light-combo,
+    (
+        toggle-button-background: (
+            color: ('gray', 100),
+        ),
+        toggle-button-background-focus: (
+            color: ('gray', 100),
+        ),
+        toggle-button-foreground-filled: (
+            color: ('gray', 700),
+        ),
+        clear-button-background: (
+            color: ('gray', 100),
+        ),
+        clear-button-background-focus: (
+            color: ('gray', 100),
+        ),
+        toggle-button-background-disabled: (
+            color: ('gray', 100),
+        ),
+        toggle-button-foreground-disabled: (
+            color: ('gray', 400),
+        ),
+    )
+);
+
+/// Generates a bootstrap combo schema.
+/// @type {Map}
+/// @prop {Map} toggle-button-foreground [color: ('gray', 800)] - The combo toggle button foreground color.
+/// @prop {Map} toggle-button-foreground-filled [color: ('gray', 800)] - The combo toggle button foreground color when the combo is focused.
+/// @prop {Map} empty-list-background [color: ('surface')] - The combo list background color.
+/// @prop {Map} search-separator-border-color [color: ('gray', 400)] - The combo search box separator color.
+/// @prop {Map} empty-list-placeholder-color [color: ('gray', 600)] - The combo placeholder text color.
+/// @prop {Map} clear-button-background [color: ('gray', 300)] - The combo clear button background color.
+/// @prop {Map} clear-button-background-focus [color: ('gray', 300)] - The combo clear button background color when the combo is focused.
+/// @prop {Map} clear-button-foreground [color: ('gray', 800)] - The combo toggle clear foreground color.
+/// @prop {Map} clear-button-foreground-focus [color: ('gray', 800)] - The combo clear button foreground color when the combo is focused.
+/// @prop {Map} toggle-button-background-disabled [color: ('gray', 300)] - The combo toggle button background color when the combo is disabled.
+/// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 400)] - The combo toggle button foreground color when the combo is disabled.
+/// @prop {Map} toggle-button-background-focus [color: ('gray', 300)] - The combo toggle button background color when the combo is focused.
+/// @requires {Map} $light-combo
+$bootstrap-combo: extend(
+    $light-combo,
+    (
+        empty-list-background: (
+            color: ('surface')
+        ),
+        search-separator-border-color: (
+            color: ('gray', 400)
+        ),
+        empty-list-placeholder-color: (
+            color: ('gray', 600)
+        ),
+        clear-button-foreground: (
+            color: ('gray', 800),
+        ),
+        clear-button-foreground-focus: (
+            color: ('gray', 800),
+        ),
+        clear-button-background: (
+            color: ('gray', 300)
+        ),
+        clear-button-background-focus: (
+            color: ('gray', 300)
+        ),
+        toggle-button-foreground: (
+            color: ('gray', 800),
+        ),
+        toggle-button-foreground--focus: (
+            color: ('gray', 800),
+        ),
+        toggle-button-foreground-filled: (
+            color: ('gray', 800),
+        ),
+        toggle-button-background-focus: (
+            color: ('gray', 300),
+        ),
+        toggle-button-background-disabled: (
+            color: ('gray', 300),
+        ),
+        toggle-button-foreground-disabled: (
+            color: ('gray', 400),
+        ),
+    )
+);
+
+/// Generates an indigo combo schema.
+/// @type {Map}
+/// @prop {Color} clear-button-background-focus [transparent] - The combo clear button background color when the combo is focused.
+/// @prop {Map} clear-button-foreground [color: ('gray', 600)] - The combo toggle clear foreground color.
+/// @prop {Map} clear-button-foreground-focus [color: ('gray', 600)] - The combo clear button foreground color when the combo is focused.
+/// @prop {Map} toggle-button-background-disabled [color: ('gray', 100)] - The combo toggle button background color when the combo is disabled.
+/// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 300)] - The combo toggle button foreground color when the combo is disabled.
+/// @prop {Map} toggle-button-background-focus [color: ('gray', 300)] - The combo toggle button background color when the combo is focused.
+/// @requires {Map} $light-combo
+$indigo-combo: extend(
+    $light-combo,
+    (
+        clear-button-background-focus: transparent,
+        clear-button-foreground: (
+            color: ('gray', 600),
+        ),
+        toggle-button-background-focus: (
+            color: ('gray', 300),
+        ),
+        clear-button-foreground-focus: (
+            color: ('gray', 600),
+        ),
+        toggle-button-background-disabled: (
+            color: ('gray', 100),
+        ),
+        toggle-button-foreground-disabled: (
+            color: ('gray', 300),
+        ),
+    )
+);

package/sass/themes/schemas/components/light/_drop-down.scss

@@ -0,0 +1,245 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+@use '../elevation/drop-down' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/* stylelint-disable max-line-length */
+
+/// Generates a light drop-down schema.
+/// @type {Map}
+/// @prop {Map} background-color [color: 'surface'] - The drop-down background color.
+/// @prop {Map} header-text-color [color: ('secondary', 500)] - The drop-down header text color.
+/// @prop {Map} item-text-color [color: ('gray', 800)] - The drop-down text color.
+/// @prop {Map} hover-item-text-color [color: ('gray', 800)] - The drop-down hover text color.
+/// @prop {Map} hover-item-background [color: ('gray', 100, .8)4] - The drop-down hover item background color.
+/// @prop {Map} focused-item-background [color: ('gray', 100, .8)] - The drop-down focused item background color.
+/// @prop {Map} focused-item-text-color [color: ('gray', 800)] - The drop-down focused item text color.
+/// @prop {Map} selected-item-background [color: ('secondary', 100)] - The drop-down selected item background color.
+/// @prop {Map} selected-item-text-color [contrast-color: ('secondary', 100)] - The drop-down selected item text color.
+/// @prop {Map} selected-hover-item-background [color: ('secondary', 200)] - The drop-down selected item hover background color.
+/// @prop {Map} selected-hover-item-text-color [contrast-color: ('secondary', 200)] - The drop-down selected item hover text color.
+/// @prop {Map} selected-focus-item-background [color: ('secondary', 200)] - The drop-down selected item focus background color.
+/// @prop {Map} selected-focus-item-text-color [contrast-color: ('secondary', 200)] - The drop-down selected item focus text color.
+/// @prop {Color} disabled-item-background [transparent] - The drop-down disabled item background color.
+/// @prop {Map} disabled-item-text-color [color: 'surface', text-contrast: (), rgba: .38] - The drop-down disabled item text color.
+/// @prop {Number} elevation [8] - The elevation level, between 0-24, to be used for the drop-down shadow.
+/// @prop {Number} border-width [0] - The border width used for drop-down component.
+/// @prop {Map} border-color [color: ('gray', 300)] - The border color used for drop-down component.
+/// @prop {Number} border-radius [4px] - The border radius used for drop-down component. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} item-border-radius [0] - The border radius used for the drop-down items. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $default-elevation-drop-down
+$light-drop-down: extend(
+    $default-elevation-drop-down,
+    (
+        background-color: (
+            color: 'surface'
+        ),
+        header-text-color: (
+            color: ('secondary', 500)
+        ),
+        item-text-color: (
+            color: ('gray', 800)
+        ),
+        hover-item-text-color: (
+            color: ('gray', 800)
+        ),
+        hover-item-background: (
+            color: ('gray', 100, .8)
+        ),
+        focused-item-background: (
+            color: ('gray', 100, .8)
+        ),
+        focused-item-text-color: (
+            color: ('gray', 800)
+        ),
+        selected-item-background: (
+            color: ('secondary', 100),
+        ),
+        selected-item-text-color: (
+            contrast-color: ('secondary', 100)
+        ),
+        selected-hover-item-background: (
+            color: ('secondary', 200),
+        ),
+        selected-hover-item-text-color: (
+            contrast-color: ('secondary', 200)
+        ),
+        selected-focus-item-background: (
+            color: ('secondary', 200),
+        ),
+        selected-focus-item-text-color: (
+            contrast-color: ('secondary', 200)
+        ),
+        disabled-item-background: (
+            color: ('gray', 50, 0)
+        ),
+        disabled-item-text-color: (
+            color: ('gray', 400)
+        ),
+        border-color: (
+            color: ('gray', 300),
+        ),
+        border-width: 0,
+        border-radius: rem(4px),
+        item-border-radius: rem(0)
+    )
+);
+
+/// Generates a fluent drop-down schema.
+/// @type {Map}
+/// @prop {Map} selected-item-background [color: ('gray', 100)] - The drop-down selected item background color.
+/// @prop {Map} selected-item-text-color [contrast-color: ('gray', 100)] - The drop-down selected item text color.
+/// @prop {Map} selected-hover-item-background [color: ('gray', 200)] - The drop-down selected item hover background color.
+/// @prop {Map} selected-hover-item-text-color [contrast-color: ('gray', 200)] - The drop-down selected item hover text color.
+/// @prop {Map} selected-focus-item-background [color: ('gray', 200)] - The drop-down selected item focus background color.
+/// @prop {Map} selected-focus-item-text-color [contrast-color: ('gray', 200)] - The drop-down selected item focus text color.
+/// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used for the drop-down shadow.
+/// @prop {Number} border-radius [2px] - The border radius used for drop-down component. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} item-border-radius [0] - The border radius used for the drop-down items. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-drop-down
+/// @requires {Map} $fluent-elevation-drop-down
+$fluent-drop-down: extend(
+    $light-drop-down,
+    $fluent-elevation-drop-down,
+    (
+        selected-item-background: (
+            color: ('gray', 100)
+        ),
+        selected-item-text-color: (
+            contrast-color: ('gray', 100)
+        ),
+        selected-hover-item-background: (
+            color: ('gray', 100)
+        ),
+        selected-hover-item-text-color: (
+            contrast-color: ('gray', 200)
+        ),
+        selected-focus-item-background: (
+            color: ('gray', 200)
+        ),
+        selected-focus-item-text-color: (
+            contrast-color: ('gray', 200)
+        ),
+        border-radius: rem(2px),
+    )
+);
+
+/// Generates a bootstrap drop-down schema.
+/// @type {Map}
+/// @prop {Map} header-text-color [color: ('gray', 700)] - The drop-down header text color.
+/// @prop {Map} hover-item-background [color: ('gray', 100)] - The drop-down hover item background color.
+/// @prop {Map} focused-item-background [color: ('primary', 500)] - The drop-down focused item background color.
+/// @prop {Map} focused-item-text-color [contrast-color('primary', 600)] - The drop-down focused item text color.
+/// @prop {Map} selected-item-background [color: ('primary', 500)] - The drop-down selected item background color.
+/// @prop {Map} selected-item-text-color [contrast-color('primary', 600)] - The drop-down selected item text color.
+/// @prop {Map} selected-hover-item-background [color: ('primary', 600)] - The drop-down selected item hover background color.
+/// @prop {Map} selected-hover-item-text-color [contrast-color('primary', 600)] - The drop-down selected item hover text color.
+/// @prop {Map} selected-focus-item-background [color: ('primary', 600)] - The drop-down selected item focus background color.
+/// @prop {Map} selected-focus-item-text-color [contrast-color('primary', 600)] - The drop-down selected item focus text color.
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the drop-down shadow.
+/// @prop {Number} border-radius [4px] - The border radius used for drop-down component. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} item-border-radius [0] - The border radius used for the drop-down items. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-width [1px] - The border width used for drop-down component.
+/// @requires {Map} $light-drop-down
+/// @requires {Map} $bootstrap-elevation-drop-down
+$bootstrap-drop-down: extend(
+    $light-drop-down,
+    $bootstrap-elevation-drop-down,
+    (
+        header-text-color: (
+            color: ('gray', 700)
+        ),
+        hover-item-background: (
+            color: ('gray', 100)
+        ),
+        focused-item-background: (
+            color: ('primary', 500)
+        ),
+        focused-item-text-color: (
+            contrast-color: ('primary', 600)
+        ),
+        selected-item-background: (
+            color: ('primary', 500),
+        ),
+        selected-item-text-color: (
+            contrast-color: ('primary', 600)
+        ),
+        selected-hover-item-background: (
+            color: ('primary', 600),
+        ),
+        selected-hover-item-text-color: (
+            contrast-color: ('primary', 600)
+        ),
+        selected-focus-item-background: (
+            color: ('primary', 600),
+        ),
+        selected-focus-item-text-color: (
+            contrast-color: ('primary', 600)
+        ),
+        border-width: 1px,
+        disabled-item-text-color: (
+            color: ('gray', 400)
+        )
+    )
+);
+
+/// Generates an indigo drop-down schema.
+/// @type {Map}
+/// @prop {Map} header-text-color [color: ('primary', 500)] - The drop-down header text color.
+/// @prop {Color} item-text-color [color: ('gray', 700)] - The drop-down text color.
+/// @prop {Map} hover-item-background [color: ('primary', 500, .15)] - The drop-down hover item background color.
+/// @prop {Map} focused-item-background [color: ('primary', 500, .15)] - The drop-down focused item background color.
+/// @prop {Map} selected-item-background [color: ('primary', 500)] - The drop-down selected item background color.
+/// @prop {Color} selected-item-text-color [#fff] - The drop-down selected item text color.
+/// @prop {Map} selected-hover-item-background [color: ('primary', 400)] - The drop-down selected item hover background color.
+/// @prop {Color} selected-hover-item-text-color [#fff] - The drop-down selected item hover text color.
+/// @prop {Map} selected-focus-item-background [color: ('primary', 400)] - The drop-down selected item focus background color.
+/// @prop {Color} selected-focus-item-text-color [#fff] - The drop-down selected item focus text color.
+/// @prop {Number} elevation [3] - The elevation level, between 0-24, to be used for the badge shadow.
+/// @prop {Number} border-radius [2px] - The border radius used for drop-down component. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} item-border-radius [2px] - The border radius used for the drop-down items. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $light-drop-down
+/// @requires {Map} $indigo-elevation-drop-down
+$indigo-drop-down: extend(
+    $light-drop-down,
+    $indigo-elevation-drop-down,
+    (
+        header-text-color: (
+            color: ('primary', 500)
+        ),
+        item-text-color: (
+            color: ('gray', 700)
+        ),
+        hover-item-background: (
+            color: ('primary', 500, .15),
+        ),
+        focused-item-background: (
+            color: ('primary', 500, .15),
+        ),
+        selected-item-background: (
+            color: ('primary', 500),
+        ),
+        selected-item-text-color: (
+            contrast-color: ('primary', 500),
+        ),
+        selected-hover-item-background: (
+            color: ('primary', 400),
+        ),
+        selected-hover-item-text-color: (
+            contrast-color: ('primary', 400),
+        ),
+        selected-focus-item-background: (
+            color: ('primary', 400),
+        ),
+        selected-focus-item-text-color: (
+            contrast-color: ('primary', 400),
+        ),
+        border-radius: rem(2px),
+        item-border-radius: rem(2px)
+    )
+);