igniteui-theming 19.2.0 → 19.3.0-beta.1
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "igniteui-theming",
|
|
3
|
-
"version": "19.
|
|
3
|
+
"version": "19.3.0-beta.1",
|
|
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": {
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
@use '../../../../utils/map' as *;
|
|
2
|
+
@use '../light/chat' as *;
|
|
3
|
+
|
|
4
|
+
////
|
|
5
|
+
/// @package theming
|
|
6
|
+
/// @group schemas
|
|
7
|
+
/// @access public
|
|
8
|
+
////
|
|
9
|
+
|
|
10
|
+
/// Generates a dark material chat schema.
|
|
11
|
+
/// @type {Map}
|
|
12
|
+
/// @requires $material-chat
|
|
13
|
+
$dark-material-chat: extend(
|
|
14
|
+
$material-chat,
|
|
15
|
+
(
|
|
16
|
+
_meta: (
|
|
17
|
+
theme: 'material',
|
|
18
|
+
variant: 'dark',
|
|
19
|
+
),
|
|
20
|
+
)
|
|
21
|
+
);
|
|
22
|
+
|
|
23
|
+
/// Generates a dark fluent chat schema.
|
|
24
|
+
/// @type {Map}
|
|
25
|
+
/// @requires $fluent-chat
|
|
26
|
+
$dark-fluent-chat: extend(
|
|
27
|
+
$fluent-chat,
|
|
28
|
+
(
|
|
29
|
+
_meta: (
|
|
30
|
+
theme: 'fluent',
|
|
31
|
+
variant: 'dark',
|
|
32
|
+
),
|
|
33
|
+
)
|
|
34
|
+
);
|
|
35
|
+
|
|
36
|
+
/// Generates a dark bootstrap chat schema.
|
|
37
|
+
/// @type {Map}
|
|
38
|
+
/// @requires $bootstrap-chat
|
|
39
|
+
$dark-bootstrap-chat: extend(
|
|
40
|
+
$bootstrap-chat,
|
|
41
|
+
(
|
|
42
|
+
_meta: (
|
|
43
|
+
theme: 'bootstrap',
|
|
44
|
+
variant: 'dark',
|
|
45
|
+
),
|
|
46
|
+
)
|
|
47
|
+
);
|
|
48
|
+
|
|
49
|
+
/// Generates a dark indigo chat schema.
|
|
50
|
+
/// @type {Map}
|
|
51
|
+
/// @requires $indigo-chat
|
|
52
|
+
$dark-indigo-chat: extend(
|
|
53
|
+
$indigo-chat,
|
|
54
|
+
(
|
|
55
|
+
_meta: (
|
|
56
|
+
theme: 'indigo',
|
|
57
|
+
variant: 'dark',
|
|
58
|
+
),
|
|
59
|
+
)
|
|
60
|
+
);
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
@use './calendar' as *;
|
|
15
15
|
@use './card' as *;
|
|
16
16
|
@use './carousel' as *;
|
|
17
|
+
@use './chat' as *;
|
|
17
18
|
@use './checkbox' as *;
|
|
18
19
|
@use './chip' as *;
|
|
19
20
|
@use './column-actions' as *;
|
|
@@ -77,6 +78,7 @@ $dark-material-schema: (
|
|
|
77
78
|
calendar: $dark-material-calendar,
|
|
78
79
|
card: $dark-material-card,
|
|
79
80
|
carousel: $dark-material-carousel,
|
|
81
|
+
chat: $dark-material-chat,
|
|
80
82
|
checkbox: $dark-material-checkbox,
|
|
81
83
|
chip: $dark-material-chip,
|
|
82
84
|
column-actions: $dark-material-column-actions,
|
|
@@ -146,6 +148,7 @@ $dark-fluent-schema: (
|
|
|
146
148
|
calendar: $dark-fluent-calendar,
|
|
147
149
|
card: $dark-fluent-card,
|
|
148
150
|
carousel: $dark-fluent-carousel,
|
|
151
|
+
chat: $dark-fluent-chat,
|
|
149
152
|
checkbox: $dark-fluent-checkbox,
|
|
150
153
|
chip: $dark-fluent-chip,
|
|
151
154
|
column-actions: $dark-fluent-column-actions,
|
|
@@ -215,6 +218,7 @@ $dark-bootstrap-schema: (
|
|
|
215
218
|
calendar: $dark-bootstrap-calendar,
|
|
216
219
|
card: $dark-bootstrap-card,
|
|
217
220
|
carousel: $dark-bootstrap-carousel,
|
|
221
|
+
chat: $dark-bootstrap-chat,
|
|
218
222
|
checkbox: $dark-bootstrap-checkbox,
|
|
219
223
|
chip: $dark-bootstrap-chip,
|
|
220
224
|
column-actions: $dark-bootstrap-column-actions,
|
|
@@ -284,6 +288,7 @@ $dark-indigo-schema: (
|
|
|
284
288
|
calendar: $dark-indigo-calendar,
|
|
285
289
|
card: $dark-indigo-card,
|
|
286
290
|
carousel: $dark-indigo-carousel,
|
|
291
|
+
chat: $dark-indigo-chat,
|
|
287
292
|
checkbox: $dark-indigo-checkbox,
|
|
288
293
|
chip: $dark-indigo-chip,
|
|
289
294
|
column-actions: $dark-indigo-column-actions,
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
@use '../../../../utils/map' as *;
|
|
2
|
+
@use '../../../../typography/functions' as *;
|
|
3
|
+
|
|
4
|
+
////
|
|
5
|
+
/// @package theming
|
|
6
|
+
/// @group schemas
|
|
7
|
+
/// @access public
|
|
8
|
+
////
|
|
9
|
+
|
|
10
|
+
/// Generates a light chat component schema.
|
|
11
|
+
/// @type {Map}
|
|
12
|
+
/// @prop {Map} background [color: ('surface', 500)] - The background color of the chat component.
|
|
13
|
+
/// @prop {Map} header-background [color: ('surface', 500)] - The background color of the chat header.
|
|
14
|
+
/// @prop {Map} header-color [contrast-color: ('surface', 500)] - The text color of the chat header.
|
|
15
|
+
/// @prop {Map} message-background [color: ('gray', 200)] - The background color of the sent message bubble.
|
|
16
|
+
/// @prop {Map} message-background [color: ('gray', 200)] - The background color of the sent message bubble.
|
|
17
|
+
/// @prop {Map} message-color [color: ('gray', 800)] - The text color of the chat messages.
|
|
18
|
+
/// @prop {Map} image-background [color: ('gray', 100)] - The background color of the image message container.
|
|
19
|
+
/// @prop {Map} image-border [color: ('gray', 300)] - The border color of the image message container.
|
|
20
|
+
$light-chat: (
|
|
21
|
+
background: (
|
|
22
|
+
color: (
|
|
23
|
+
'surface',
|
|
24
|
+
500,
|
|
25
|
+
),
|
|
26
|
+
),
|
|
27
|
+
header-background: (
|
|
28
|
+
color: (
|
|
29
|
+
'surface',
|
|
30
|
+
500,
|
|
31
|
+
),
|
|
32
|
+
),
|
|
33
|
+
header-color: (
|
|
34
|
+
contrast-color: (
|
|
35
|
+
'surface',
|
|
36
|
+
500,
|
|
37
|
+
),
|
|
38
|
+
),
|
|
39
|
+
message-background: (
|
|
40
|
+
color: (
|
|
41
|
+
'gray',
|
|
42
|
+
200,
|
|
43
|
+
),
|
|
44
|
+
),
|
|
45
|
+
message-color: (
|
|
46
|
+
color: (
|
|
47
|
+
'gray',
|
|
48
|
+
800,
|
|
49
|
+
),
|
|
50
|
+
),
|
|
51
|
+
image-background: (
|
|
52
|
+
color: (
|
|
53
|
+
'gray',
|
|
54
|
+
100,
|
|
55
|
+
),
|
|
56
|
+
),
|
|
57
|
+
image-border: (
|
|
58
|
+
color: (
|
|
59
|
+
'gray',
|
|
60
|
+
300,
|
|
61
|
+
),
|
|
62
|
+
),
|
|
63
|
+
);
|
|
64
|
+
|
|
65
|
+
/// Generates a light material chat schema.
|
|
66
|
+
/// @type {Map}
|
|
67
|
+
/// @requires {Map} $light-chat
|
|
68
|
+
$material-chat: extend(
|
|
69
|
+
$light-chat,
|
|
70
|
+
(
|
|
71
|
+
_meta: (
|
|
72
|
+
theme: 'material',
|
|
73
|
+
variant: 'light',
|
|
74
|
+
),
|
|
75
|
+
)
|
|
76
|
+
);
|
|
77
|
+
|
|
78
|
+
/// Generates a light fluent chat schema.
|
|
79
|
+
/// @type {Map}
|
|
80
|
+
/// @requires {Map} $light-chat
|
|
81
|
+
$fluent-chat: extend(
|
|
82
|
+
$light-chat,
|
|
83
|
+
(
|
|
84
|
+
_meta: (
|
|
85
|
+
theme: 'fluent',
|
|
86
|
+
variant: 'light',
|
|
87
|
+
),
|
|
88
|
+
)
|
|
89
|
+
);
|
|
90
|
+
|
|
91
|
+
/// Generates a light bootstrap chat schema.
|
|
92
|
+
/// @type {Map}
|
|
93
|
+
/// @requires {Map} $light-chat
|
|
94
|
+
$bootstrap-chat: extend(
|
|
95
|
+
$light-chat,
|
|
96
|
+
(
|
|
97
|
+
_meta: (
|
|
98
|
+
theme: 'bootstrap',
|
|
99
|
+
variant: 'light',
|
|
100
|
+
),
|
|
101
|
+
)
|
|
102
|
+
);
|
|
103
|
+
|
|
104
|
+
/// Generates a light indigo chat schema.
|
|
105
|
+
/// @type {Map}
|
|
106
|
+
/// @requires {Map} $light-chat
|
|
107
|
+
$indigo-chat: extend(
|
|
108
|
+
$light-chat,
|
|
109
|
+
(
|
|
110
|
+
_meta: (
|
|
111
|
+
theme: 'indigo',
|
|
112
|
+
variant: 'light',
|
|
113
|
+
),
|
|
114
|
+
)
|
|
115
|
+
);
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
@use './calendar' as *;
|
|
15
15
|
@use './card' as *;
|
|
16
16
|
@use './carousel' as *;
|
|
17
|
+
@use './chat' as *;
|
|
17
18
|
@use './checkbox' as *;
|
|
18
19
|
@use './chip' as *;
|
|
19
20
|
@use './column-actions' as *;
|
|
@@ -77,6 +78,7 @@ $light-material-schema: (
|
|
|
77
78
|
calendar: $material-calendar,
|
|
78
79
|
card: $material-card,
|
|
79
80
|
carousel: $material-carousel,
|
|
81
|
+
chat: $material-chat,
|
|
80
82
|
checkbox: $material-checkbox,
|
|
81
83
|
chip: $material-chip,
|
|
82
84
|
column-actions: $material-column-actions,
|
|
@@ -146,6 +148,7 @@ $light-fluent-schema: (
|
|
|
146
148
|
calendar: $fluent-calendar,
|
|
147
149
|
card: $fluent-card,
|
|
148
150
|
carousel: $fluent-carousel,
|
|
151
|
+
chat: $fluent-chat,
|
|
149
152
|
checkbox: $fluent-checkbox,
|
|
150
153
|
chip: $fluent-chip,
|
|
151
154
|
column-actions: $fluent-column-actions,
|
|
@@ -215,6 +218,7 @@ $light-bootstrap-schema: (
|
|
|
215
218
|
calendar: $bootstrap-calendar,
|
|
216
219
|
card: $bootstrap-card,
|
|
217
220
|
carousel: $bootstrap-carousel,
|
|
221
|
+
chat: $bootstrap-chat,
|
|
218
222
|
checkbox: $bootstrap-checkbox,
|
|
219
223
|
chip: $bootstrap-chip,
|
|
220
224
|
column-actions: $bootstrap-column-actions,
|
|
@@ -284,6 +288,7 @@ $light-indigo-schema: (
|
|
|
284
288
|
calendar: $indigo-calendar,
|
|
285
289
|
card: $indigo-card,
|
|
286
290
|
carousel: $indigo-carousel,
|
|
291
|
+
chat: $indigo-chat,
|
|
287
292
|
checkbox: $indigo-checkbox,
|
|
288
293
|
chip: $indigo-chip,
|
|
289
294
|
column-actions: $indigo-column-actions,
|