igniteui-theming 1.4.2 → 1.4.3-beta.2

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

@@ -0,0 +1,376 @@
+@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,
+                0.8,
+            ),
+        ),
+        focused-item-background: (
+            color: (
+                'gray',
+                100,
+                0.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,
+                0.15,
+            ),
+        ),
+        focused-item-background: (
+            color: (
+                'primary',
+                500,
+                0.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),
+    )
+);

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

@@ -0,0 +1,55 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a light icon schema.
+/// @type {Map}
+/// @prop {Color} color [color: ('gray', 800)] - The icon color.
+/// @prop {String} size [rem(24px)] - The icon size.
+/// @prop {Color} disabled-color [color: ('gray', 500)] - The disabled icon color.
+$light-icon: (
+    color: (
+        color: (
+            'gray',
+            800,
+        ),
+    ),
+    size: rem(24px),
+    disabled-color: (
+        color: (
+            'gray',
+            500,
+        ),
+    ),
+);
+
+/// Generates a fluent icon schema.
+/// @type {Map}
+/// @requires {Map} $light-icon
+$fluent-icon: $light-icon;
+
+/// Generates a bootstrap icon schema.
+/// @type {Map}
+/// @requires {Map} $light-icon
+$bootstrap-icon: $light-icon;
+
+/// Generates an indigo icon schema.
+/// @type {Map}
+/// @prop {Map} disabled-color [color: ('gray', 400)] - The disabled icon color.
+/// @requires {Map} $light-icon
+$indigo-icon: extend(
+    $light-icon,
+    (
+        disabled-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+    )
+);

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

@@ -0,0 +1,121 @@
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+@use './avatar' as *;
+@use './button' as *;
+@use './icon' as *;
+@use './navbar' as *;
+@use './input-group' as *;
+@use './checkbox' as *;
+@use './switch' as *;
+@use './radio' as *;
+@use './tabs' as *;
+@use './rating' as *;
+@use './select' as *;
+@use './slider' as *;
+@use './drop-down' as *;
+@use './combo' as *;
+@use './tree' as *;
+
+/// Used to create material component themes.
+/// Use in combination with light palettes.
+/// @type Map.
+$light-material-schema: (
+    avatar: $light-avatar,
+    button: $light-button,
+    icon: $light-icon,
+    navbar: $light-navbar,
+    input-group: $light-input-group,
+    checkbox: $light-checkbox,
+    switch: $light-switch,
+    radio: $light-radio,
+    tabs: $light-tabs,
+    rating: $light-rating,
+    select: $light-select,
+    slider: $light-slider,
+    dropdown: $light-drop-down,
+    combo: $light-combo,
+    tree: $light-tree,
+    _meta: (
+        theme: 'material',
+        variant: 'light',
+    ),
+);
+
+/// Used to create fluent component themes.
+/// Use in combination with light palettes.
+/// @type Map
+$light-fluent-schema: (
+    avatar: $fluent-avatar,
+    button: $fluent-button,
+    icon: $fluent-icon,
+    navbar: $fluent-navbar,
+    input-group: $fluent-input-group,
+    checkbox: $fluent-checkbox,
+    switch: $fluent-switch,
+    radio: $fluent-radio,
+    tabs: $fluent-tabs,
+    rating: $fluent-rating,
+    select: $fluent-select,
+    slider: $fluent-slider,
+    dropdown: $fluent-drop-down,
+    combo: $fluent-combo,
+    tree: $fluent-tree,
+    _meta: (
+        theme: 'fluent',
+        variant: 'light',
+    ),
+);
+
+/// Used to create bootstrap component themes.
+/// Use in combination with light palettes.
+/// @type Map
+$light-bootstrap-schema: (
+    avatar: $bootstrap-avatar,
+    button: $bootstrap-button,
+    icon: $bootstrap-icon,
+    navbar: $bootstrap-navbar,
+    input-group: $bootstrap-input-group,
+    checkbox: $bootstrap-checkbox,
+    switch: $bootstrap-switch,
+    radio: $bootstrap-radio,
+    tabs: $bootstrap-tabs,
+    rating: $bootstrap-rating,
+    select: $bootstrap-select,
+    slider: $bootstrap-slider,
+    dropdown: $bootstrap-drop-down,
+    combo: $bootstrap-combo,
+    tree: $bootstrap-tree,
+    _meta: (
+        theme: 'bootstrap',
+        variant: 'light',
+    ),
+);
+
+/// Used to create indigo component themes.
+/// Use in combination with light palettes.
+/// @type Map
+$light-indigo-schema: (
+    avatar: $indigo-avatar,
+    button: $indigo-button,
+    icon: $indigo-icon,
+    navbar: $indigo-navbar,
+    input-group: $indigo-input-group,
+    checkbox: $indigo-checkbox,
+    switch: $indigo-switch,
+    radio: $indigo-radio,
+    tabs: $indigo-tabs,
+    rating: $indigo-rating,
+    select: $indigo-select,
+    slider: $indigo-slider,
+    dropdown: $indigo-drop-down,
+    combo: $indigo-combo,
+    tree: $indigo-tree,
+    _meta: (
+        theme: 'indigo-design',
+        variant: 'light',
+    ),
+);