igniteui-theming 21.0.0-beta.3 → 21.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/sass/themes/components/avatar/_avatar-theme.scss +1 -0
- package/sass/themes/components/badge/_badge-theme.scss +1 -0
- package/sass/themes/components/banner/_banner-theme.scss +1 -0
- package/sass/themes/components/bottom-nav/_bottom-nav-theme.scss +1 -0
- package/sass/themes/components/button/_button-theme.scss +1 -0
- package/sass/themes/components/button/_contained-button-theme.scss +1 -0
- package/sass/themes/components/button/_fab-button-theme.scss +1 -0
- package/sass/themes/components/button/_flat-button-theme.scss +1 -0
- package/sass/themes/components/button/_outlined-button-theme.scss +1 -0
- package/sass/themes/components/button-group/_button-group-theme.scss +1 -0
- package/sass/themes/components/calendar/_calendar-theme.scss +1 -0
- package/sass/themes/components/card/_card-theme.scss +1 -0
- package/sass/themes/components/carousel/_carousel-theme.scss +1 -0
- package/sass/themes/components/checkbox/_checkbox-theme.scss +1 -0
- package/sass/themes/components/chip/_chip-theme.scss +1 -0
- package/sass/themes/components/column-actions/_column-actions-theme.scss +1 -0
- package/sass/themes/components/combo/_combo-theme.scss +1 -0
- package/sass/themes/components/date-range-picker/_date-range-picker-theme.scss +1 -0
- package/sass/themes/components/dialog/_dialog-theme.scss +1 -0
- package/sass/themes/components/divider/_divider-theme.scss +1 -0
- package/sass/themes/components/dock-manager/_dock-manager-theme.scss +1 -0
- package/sass/themes/components/drop-down/_drop-down-theme.scss +1 -0
- package/sass/themes/components/expansion-panel/_expansion-panel-theme.scss +1 -0
- package/sass/themes/components/grid/_grid-summary-theme.scss +1 -0
- package/sass/themes/components/grid/_grid-theme.scss +1 -0
- package/sass/themes/components/grid/_grid-toolbar-theme.scss +1 -0
- package/sass/themes/components/highlight/_highlight-theme.scss +1 -0
- package/sass/themes/components/icon/_icon-theme.scss +1 -0
- package/sass/themes/components/icon-button/_contained-icon-button-theme.scss +29 -0
- package/sass/themes/components/icon-button/_flat-icon-button-theme.scss +29 -0
- package/sass/themes/components/icon-button/_icon-button-theme.scss +23 -0
- package/sass/themes/components/icon-button/_outlined-icon-button-theme.scss +29 -0
- package/sass/themes/components/input/_input-theme.scss +1 -0
- package/sass/themes/components/label/_label-theme.scss +1 -0
- package/sass/themes/components/list/_list-theme.scss +1 -0
- package/sass/themes/components/navbar/_navbar-theme.scss +1 -0
- package/sass/themes/components/navdrawer/_navdrawer-theme.scss +2 -1
- package/sass/themes/components/overlay/_overlay-theme.scss +1 -0
- package/sass/themes/components/paginator/_paginator-theme.scss +1 -0
- package/sass/themes/components/progress/_circular-theme.scss +6 -1
- package/sass/themes/components/progress/_linear-theme.scss +1 -2
- package/sass/themes/components/query-builder/_query-builder-theme.scss +5 -1
- package/sass/themes/components/radio/_radio-theme.scss +1 -0
- package/sass/themes/components/rating/_rating-theme.scss +1 -0
- package/sass/themes/components/ripple/_ripple-theme.scss +1 -0
- package/sass/themes/components/scrollbar/_scrollbar-theme.scss +1 -0
- package/sass/themes/components/select/_select-theme.scss +1 -0
- package/sass/themes/components/slider/_slider-theme.scss +1 -0
- package/sass/themes/components/snackbar/_snackbar-theme.scss +1 -0
- package/sass/themes/components/splitter/_splitter-theme.scss +4 -3
- package/sass/themes/components/stepper/_stepper-theme.scss +1 -0
- package/sass/themes/components/switch/_switch-theme.scss +1 -0
- package/sass/themes/components/tabs/_tabs-theme.scss +1 -2
- package/sass/themes/components/time-picker/_time-picker-theme.scss +1 -0
- package/sass/themes/components/toast/_toast-theme.scss +1 -6
- package/sass/themes/components/tooltip/_tooltip-theme.scss +2 -5
- package/sass/themes/components/tree/_tree-theme.scss +1 -0
- package/sass/themes/components/watermark/_watermark-theme.scss +1 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "igniteui-theming",
|
|
3
|
-
"version": "21.0.0
|
|
3
|
+
"version": "21.0.0",
|
|
4
4
|
"description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -6,6 +6,35 @@
|
|
|
6
6
|
@use '../../../color/functions' as *;
|
|
7
7
|
@use '../../../elevations/' as *;
|
|
8
8
|
|
|
9
|
+
////
|
|
10
|
+
/// @package theming
|
|
11
|
+
/// @group themes
|
|
12
|
+
/// @access public
|
|
13
|
+
/// @author <a href="https://github.com/SisIvanova" target="_blank">Silvia Ivanova</a>
|
|
14
|
+
////
|
|
15
|
+
|
|
16
|
+
/// Generates a theme map for the contained variant of the icon button component.
|
|
17
|
+
/// @param {Map} $schema [$light-material-schema] - The schema map or icon-button schema to use.
|
|
18
|
+
/// @param {Color} $background [null] - Background color for the contained icon button.
|
|
19
|
+
/// @param {Color} $foreground [null] - Foreground (icon) color.
|
|
20
|
+
/// @param {Color} $shadow-color [null] - Shadow color for the icon button.
|
|
21
|
+
/// @param {Color} $hover-background [null] - Background color on hover.
|
|
22
|
+
/// @param {Color} $hover-foreground [null] - Foreground color on hover.
|
|
23
|
+
/// @param {Color} $focus-background [null] - Background color on focus.
|
|
24
|
+
/// @param {Color} $focus-foreground [null] - Foreground color on focus.
|
|
25
|
+
/// @param {Color} $focus-hover-background [null] - Background color on focus + hover.
|
|
26
|
+
/// @param {Color} $focus-hover-foreground [null] - Foreground color on focus + hover.
|
|
27
|
+
/// @param {Color} $active-background [null] - Background color when active.
|
|
28
|
+
/// @param {Color} $active-foreground [null] - Foreground color when active.
|
|
29
|
+
/// @param {Length} $border-radius [null] - Border radius for the icon button.
|
|
30
|
+
/// @param {Color} $border-color [null] - Border color.
|
|
31
|
+
/// @param {Color} $focus-border-color [null] - Border color on focus.
|
|
32
|
+
/// @param {Color} $disabled-background [null] - Background color when disabled.
|
|
33
|
+
/// @param {Color} $disabled-foreground [null] - Foreground color when disabled.
|
|
34
|
+
/// @param {Color} $disabled-border-color [null] - Border color when disabled.
|
|
35
|
+
/// @param {Length} $size [null] - Size of the icon button.
|
|
36
|
+
/// @requires $light-material-schema
|
|
37
|
+
/// @return {Map} - A map containing the theme name, selector, and theme values for the contained icon button.
|
|
9
38
|
@function contained-icon-button-theme(
|
|
10
39
|
$schema: $light-material-schema,
|
|
11
40
|
|
|
@@ -6,6 +6,35 @@
|
|
|
6
6
|
@use '../../../color/functions' as *;
|
|
7
7
|
@use '../../../elevations/' as *;
|
|
8
8
|
|
|
9
|
+
////
|
|
10
|
+
/// @package theming
|
|
11
|
+
/// @group themes
|
|
12
|
+
/// @access public
|
|
13
|
+
/// @author <a href="https://github.com/SisIvanova" target="_blank">Silvia Ivanova</a>
|
|
14
|
+
////
|
|
15
|
+
|
|
16
|
+
/// Generates a theme map for the flat variant of the icon button component.
|
|
17
|
+
/// @param {Map} $schema [$light-material-schema] - The schema map or icon-button schema to use.
|
|
18
|
+
/// @param {Color} $background [null] - Background color for the flat icon button.
|
|
19
|
+
/// @param {Color} $foreground [null] - Foreground (icon) color.
|
|
20
|
+
/// @param {Color} $shadow-color [null] - Shadow color for the icon button.
|
|
21
|
+
/// @param {Color} $hover-background [null] - Background color on hover.
|
|
22
|
+
/// @param {Color} $hover-foreground [null] - Foreground color on hover.
|
|
23
|
+
/// @param {Color} $focus-background [null] - Background color on focus.
|
|
24
|
+
/// @param {Color} $focus-foreground [null] - Foreground color on focus.
|
|
25
|
+
/// @param {Color} $focus-hover-background [null] - Background color on focus + hover.
|
|
26
|
+
/// @param {Color} $focus-hover-foreground [null] - Foreground color on focus + hover.
|
|
27
|
+
/// @param {Color} $active-background [null] - Background color when active.
|
|
28
|
+
/// @param {Color} $active-foreground [null] - Foreground color when active.
|
|
29
|
+
/// @param {Length} $border-radius [null] - Border radius for the icon button.
|
|
30
|
+
/// @param {Color} $border-color [null] - Border color.
|
|
31
|
+
/// @param {Color} $focus-border-color [null] - Border color on focus.
|
|
32
|
+
/// @param {Color} $disabled-background [null] - Background color when disabled.
|
|
33
|
+
/// @param {Color} $disabled-foreground [null] - Foreground color when disabled.
|
|
34
|
+
/// @param {Color} $disabled-border-color [null] - Border color when disabled.
|
|
35
|
+
/// @param {Length} $size [null] - Size of the icon button.
|
|
36
|
+
/// @requires $light-material-schema
|
|
37
|
+
/// @return {Map} - A map containing the theme name, selector, and theme values for the flat icon button.
|
|
9
38
|
@function flat-icon-button-theme(
|
|
10
39
|
$schema: $light-material-schema,
|
|
11
40
|
|
|
@@ -10,11 +10,34 @@
|
|
|
10
10
|
@forward './outlined-icon-button-theme';
|
|
11
11
|
|
|
12
12
|
////
|
|
13
|
+
/// @package theming
|
|
13
14
|
/// @group themes
|
|
14
15
|
/// @access public
|
|
15
16
|
/// @author <a href="https://github.com/SisIvanova" target="_blank">Silvia Ivanova</a>
|
|
16
17
|
////
|
|
17
18
|
|
|
19
|
+
/// Generates a theme map for the icon button component.
|
|
20
|
+
/// @param {Map} $schema [$light-material-schema] - The schema map or icon-button schema to use.
|
|
21
|
+
/// @param {Color} $background [null] - Background color for the icon button.
|
|
22
|
+
/// @param {Color} $foreground [null] - Foreground (icon) color.
|
|
23
|
+
/// @param {Color} $shadow-color [null] - Shadow color for the icon button.
|
|
24
|
+
/// @param {Color} $hover-background [null] - Background color on hover.
|
|
25
|
+
/// @param {Color} $hover-foreground [null] - Foreground color on hover.
|
|
26
|
+
/// @param {Color} $focus-background [null] - Background color on focus.
|
|
27
|
+
/// @param {Color} $focus-foreground [null] - Foreground color on focus.
|
|
28
|
+
/// @param {Color} $focus-hover-background [null] - Background color on focus + hover.
|
|
29
|
+
/// @param {Color} $focus-hover-foreground [null] - Foreground color on focus + hover.
|
|
30
|
+
/// @param {Color} $active-background [null] - Background color when active.
|
|
31
|
+
/// @param {Color} $active-foreground [null] - Foreground color when active.
|
|
32
|
+
/// @param {Length} $border-radius [null] - Border radius for the icon button.
|
|
33
|
+
/// @param {Color} $border-color [null] - Border color.
|
|
34
|
+
/// @param {Color} $focus-border-color [null] - Border color on focus.
|
|
35
|
+
/// @param {Color} $disabled-background [null] - Background color when disabled.
|
|
36
|
+
/// @param {Color} $disabled-foreground [null] - Foreground color when disabled.
|
|
37
|
+
/// @param {Color} $disabled-border-color [null] - Border color when disabled.
|
|
38
|
+
/// @param {Length} $size [null] - Size of the icon button.
|
|
39
|
+
/// @requires $light-material-schema
|
|
40
|
+
/// @return {Map} - A map containing the theme name, variant, and themes for the icon button.
|
|
18
41
|
@function icon-button-theme(
|
|
19
42
|
$schema: $light-material-schema,
|
|
20
43
|
|
|
@@ -6,6 +6,35 @@
|
|
|
6
6
|
@use '../../../color/functions' as *;
|
|
7
7
|
@use '../../../elevations/' as *;
|
|
8
8
|
|
|
9
|
+
////
|
|
10
|
+
/// @package theming
|
|
11
|
+
/// @group themes
|
|
12
|
+
/// @access public
|
|
13
|
+
/// @author <a href="https://github.com/SisIvanova" target="_blank">Silvia Ivanova</a>
|
|
14
|
+
////
|
|
15
|
+
|
|
16
|
+
/// Generates a theme map for the outlined variant of the icon button component.
|
|
17
|
+
/// @param {Map} $schema [$light-material-schema] - The schema map or icon-button schema to use.
|
|
18
|
+
/// @param {Color} $background [null] - Background color for the outlined icon button.
|
|
19
|
+
/// @param {Color} $foreground [null] - Foreground (icon) color.
|
|
20
|
+
/// @param {Color} $shadow-color [null] - Shadow color for the icon button.
|
|
21
|
+
/// @param {Color} $hover-background [null] - Background color on hover.
|
|
22
|
+
/// @param {Color} $hover-foreground [null] - Foreground color on hover.
|
|
23
|
+
/// @param {Color} $focus-background [null] - Background color on focus.
|
|
24
|
+
/// @param {Color} $focus-foreground [null] - Foreground color on focus.
|
|
25
|
+
/// @param {Color} $focus-hover-background [null] - Background color on focus + hover.
|
|
26
|
+
/// @param {Color} $focus-hover-foreground [null] - Foreground color on focus + hover.
|
|
27
|
+
/// @param {Color} $active-background [null] - Background color when active.
|
|
28
|
+
/// @param {Color} $active-foreground [null] - Foreground color when active.
|
|
29
|
+
/// @param {Length} $border-radius [null] - Border radius for the icon button.
|
|
30
|
+
/// @param {Color} $border-color [null] - Border color.
|
|
31
|
+
/// @param {Color} $focus-border-color [null] - Border color on focus.
|
|
32
|
+
/// @param {Color} $disabled-background [null] - Background color when disabled.
|
|
33
|
+
/// @param {Color} $disabled-foreground [null] - Foreground color when disabled.
|
|
34
|
+
/// @param {Color} $disabled-border-color [null] - Border color when disabled.
|
|
35
|
+
/// @param {Length} $size [null] - Size of the icon button.
|
|
36
|
+
/// @requires $light-material-schema
|
|
37
|
+
/// @return {Map} - A map containing the theme name, selector, and theme values for the outlined icon button.
|
|
9
38
|
@function outlined-icon-button-theme(
|
|
10
39
|
$schema: $light-material-schema,
|
|
11
40
|
|
|
@@ -8,8 +8,13 @@
|
|
|
8
8
|
@use '../../../color/functions' as *;
|
|
9
9
|
@use '../../../elevations/' as *;
|
|
10
10
|
|
|
11
|
+
////
|
|
12
|
+
/// @package theming
|
|
13
|
+
/// @group themes
|
|
14
|
+
/// @access public
|
|
15
|
+
////
|
|
16
|
+
|
|
11
17
|
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
|
|
12
|
-
///
|
|
13
18
|
/// @param {Color} $base-circle-color [null] - The base circle fill color.
|
|
14
19
|
/// @param {Color | List<Color>} $fill-color-default [null] - The progress circle fill color.
|
|
15
20
|
/// @param {Color} $fill-color-danger [null] - The track danger fill color.
|
|
@@ -7,10 +7,9 @@
|
|
|
7
7
|
@use '../../../elevations/' as *;
|
|
8
8
|
|
|
9
9
|
////
|
|
10
|
+
/// @package theming
|
|
10
11
|
/// @group themes
|
|
11
12
|
/// @access public
|
|
12
|
-
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
|
|
13
|
-
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
|
|
14
13
|
////
|
|
15
14
|
|
|
16
15
|
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
|
|
@@ -6,8 +6,12 @@
|
|
|
6
6
|
@use '../../../color/functions' as *;
|
|
7
7
|
@use '../../../elevations/' as *;
|
|
8
8
|
|
|
9
|
-
////
|
|
9
|
+
////
|
|
10
|
+
/// @package theming
|
|
11
|
+
/// @group themes
|
|
10
12
|
/// @access public
|
|
13
|
+
////
|
|
14
|
+
|
|
11
15
|
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
|
|
12
16
|
/// @param {Color} background [null] - The background color of the filtering row.
|
|
13
17
|
/// @param {Color} header-background [null] - The background color of the query builder header.
|
|
@@ -6,11 +6,12 @@
|
|
|
6
6
|
@use '../../../color/functions' as *;
|
|
7
7
|
@use '../../../elevations/' as *;
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
////
|
|
10
|
+
/// @package theming
|
|
10
11
|
/// @group themes
|
|
11
12
|
/// @access public
|
|
12
|
-
|
|
13
|
-
|
|
13
|
+
////
|
|
14
|
+
|
|
14
15
|
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
|
|
15
16
|
///
|
|
16
17
|
/// @param {Color} $bar-color [null] - The background color of the bar.
|
|
@@ -7,13 +7,12 @@
|
|
|
7
7
|
@use '../../../elevations/' as *;
|
|
8
8
|
|
|
9
9
|
////
|
|
10
|
+
/// @package theming
|
|
10
11
|
/// @group themes
|
|
11
12
|
/// @access public
|
|
12
13
|
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
|
|
13
14
|
////
|
|
14
15
|
|
|
15
|
-
/// If only background color is specified,
|
|
16
|
-
/// the idle item color will be assigned automatically to a contrasting color.
|
|
17
16
|
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
|
|
18
17
|
/// @param {Color} $item-text-color [null] - The color used for the tab text color.
|
|
19
18
|
/// @param {Color} $item-background [null] - The background color used for the tabs header.
|
|
@@ -7,24 +7,19 @@
|
|
|
7
7
|
@use '../../../elevations/' as *;
|
|
8
8
|
|
|
9
9
|
////
|
|
10
|
+
/// @package theming
|
|
10
11
|
/// @group themes
|
|
11
12
|
/// @access public
|
|
12
13
|
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
|
|
13
14
|
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
|
|
14
15
|
////
|
|
15
16
|
|
|
16
|
-
/// If only background color is specified,
|
|
17
|
-
/// the text-color will be assigned automatically to a contrasting color.
|
|
18
|
-
///
|
|
19
17
|
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
|
|
20
|
-
///
|
|
21
18
|
/// @param {Color} $background [null] - The background color used for the toast.
|
|
22
19
|
/// @param {Color} $text-color [null] - The text-color used for the toast.
|
|
23
20
|
/// @param {Color} $border-color [null] - The border-color used for the toast.
|
|
24
|
-
///
|
|
25
21
|
/// @param {List} $border-radius [null] - The border radius used for the toast component.
|
|
26
22
|
/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the toast.
|
|
27
|
-
///
|
|
28
23
|
/// @requires $light-material-schema
|
|
29
24
|
///
|
|
30
25
|
/// @example scss Set a custom background color
|
|
@@ -7,23 +7,20 @@
|
|
|
7
7
|
@use '../../../elevations/' as *;
|
|
8
8
|
|
|
9
9
|
////
|
|
10
|
+
/// @package theming
|
|
10
11
|
/// @group themes
|
|
11
12
|
/// @access public
|
|
12
13
|
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
|
|
13
14
|
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
|
|
14
15
|
////
|
|
15
16
|
|
|
16
|
-
/// Returns a map containing all style properties related to the theming the tooltip
|
|
17
|
+
/// Returns a map containing all style properties related to the theming of the tooltip.
|
|
17
18
|
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
|
|
18
|
-
///
|
|
19
19
|
/// @param {Color} $background [null] - The background color of the tooltip.
|
|
20
20
|
/// @param {Color} $text-color [null] - The text color of the tooltip.
|
|
21
|
-
///
|
|
22
21
|
/// @param {List} $border-radius [null] - The border radius used for the tooltip component.
|
|
23
22
|
/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the tooltip component.
|
|
24
|
-
///
|
|
25
23
|
/// @requires $light-material-schema
|
|
26
|
-
///
|
|
27
24
|
/// @example scss Change the tooltip background
|
|
28
25
|
/// $my-tooltip-theme: tooltip-theme($background: magenta);
|
|
29
26
|
/// // Pass the theme to the css-vars() mixin
|