igniteui-theming 4.3.0 → 4.4.1-patch

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.
Files changed (7) hide show
  1. package/json/typography/presets/typescales.json +1 -1
  2. package/package.json +11 -5
  3. package/sass/themes/schemas/components/dark/_button.scss +220 -139
  4. package/sass/themes/schemas/components/dark/_icon-button.scss +124 -23
  5. package/sass/themes/schemas/components/light/_button.scss +257 -322
  6. package/sass/themes/schemas/components/light/_icon-button.scss +131 -52
  7. package/sass/typography/presets/_fluent.scss +1 -1
package/sass/themes/schemas/components/dark/_icon-button.scss CHANGED
@@ -35,25 +35,94 @@ $dark-material-icon-button: (
35
35
  contained: $material-contained-icon-button-dark,
36
36
  );
37
37
 
38
+ /// @type {Map}
39
+ /// @prop {Map} hover-background [color: ('gray', 50)] - The hover background color of the fluent icon button.
40
+ /// @prop {Map} focus-border-color [color: ('gray', 400)] - The focus border color of the fluent dark icon button.
41
+ /// @prop {Map} disabled-background [color: ('gray', 50)] - The disabled background color of the icon button.
42
+ /// @prop {Color} disabled-foreground [color: ('gray', 200)] - The disabled foreground color of the icon button.
43
+ $fluent-base-icon-button-dark: (
44
+ hover-background: (
45
+ color: (
46
+ 'gray',
47
+ 50,
48
+ ),
49
+ ),
50
+ focus-border-color: (
51
+ color: (
52
+ 'gray',
53
+ 400,
54
+ ),
55
+ ),
56
+ disabled-background: (
57
+ color: (
58
+ 'gray',
59
+ 50,
60
+ ),
61
+ ),
62
+ disabled-foreground: (
63
+ color: (
64
+ 'gray',
65
+ 200,
66
+ ),
67
+ ),
68
+ );
69
+
38
70
  /// Generates a dark fluent flat icon button schema.
39
71
  /// @type {Map}
72
+ /// @prop {Map} hover-foreground [color: ('primary', 400)] - The hover text color of the fluent icon button.
73
+ /// @prop {Map} focus-hover-background [color: ('gray', 50)] - The background color on focus hovered state of the icon button.
74
+ /// @prop {Map} focus-hover-foreground [color: ('primary', 400)] - The foreground color on focus hovered state of the icon button.
40
75
  /// @requires {Map} $fluent-flat-icon-button
41
- $fluent-flat-icon-button-dark: extend($fluent-flat-icon-button);
76
+ /// @requires {Map} $fluent-base-icon-button-dark
77
+ $fluent-flat-icon-button-dark: extend(
78
+ $fluent-flat-icon-button,
79
+ $fluent-base-icon-button-dark,
80
+ (
81
+ hover-background: (
82
+ color: (
83
+ 'gray',
84
+ 50,
85
+ ),
86
+ ),
87
+ hover-foreground: (
88
+ color: (
89
+ 'primary',
90
+ 400,
91
+ ),
92
+ ),
93
+ focus-hover-background: (
94
+ color: (
95
+ 'gray',
96
+ 50,
97
+ ),
98
+ ),
99
+ focus-hover-foreground: (
100
+ color: (
101
+ 'primary',
102
+ 400,
103
+ ),
104
+ ),
105
+ )
106
+ );
42
107
 
43
108
  /// Generates a dark fluent contained icon button schema.
44
109
  /// @type {Map}
45
110
  /// @prop {Map} background [color: ('primary', 300)] - The background color of the fluent dark contained icon button.
46
- /// @prop {Map} foreground [color: ('surface', 500)] - The idle text color of the fluent dark contained icon button.
111
+ /// @prop {Map} foreground [contrast-color: ('primary', 300)] - The idle text color of the fluent dark contained icon button.
47
112
  /// @prop {Map} hover-background [color: ('primary', 200)] - The hover background color of the fluent dark contained icon button.
48
- /// @prop {Map} hover-foreground [color: ('surface', 500)] - The hover text color of the fluent dark contained icon button.
49
- /// @prop {Map} focus-background [color: ('primary', 200)] - The focus background color of the fluent dark contained icon button.
50
- /// @prop {Map} focus-foreground [color: ('surface', 500)] - The focus text color of the fluent dark contained icon button.
113
+ /// @prop {Map} hover-foreground [contrast-color: ('primary', 300)] - The hover text color of the fluent dark contained icon button.
114
+ /// @prop {Map} focus-background [color: ('primary', 300)] - The focus background color of the fluent dark contained icon button.
115
+ /// @prop {Map} focus-foreground [contrast-color: ('primary', 300)] - The focus text color of the fluent dark contained icon button.
116
+ /// @prop {Map} focus-hover-background [color: ('primary', 200)] - The background color on focus hovered state of the icon button.
117
+ /// @prop {Map} focus-hover-foreground [contrast-color: ('primary', 300)] - The foreground color on focus hovered state of the icon button.
51
118
  /// @prop {Map} active-background [color: ('primary', 200)] - The active background color of the fluent dark contained icon button.
52
- /// @prop {Map} active-foreground [color: ('surface', 500)] - The active text color of the fluent dark contained icon button.
53
- /// @prop {Map} focus-border-color [color: ('surface', 500)] - The focus border color of the fluent dark contained icon button.
119
+ /// @prop {Map} active-foreground [contrast-color: ('primary', 300)] - The active text color of the fluent dark contained icon button.
120
+ /// @prop {Map} focus-border-color [contrast-color: ('primary', 300)] - The focus border color of the fluent dark contained icon button.
54
121
  /// @requires {Map} $fluent-contained-icon-button
122
+ /// @requires {Map} $fluent-base-icon-button-dark
55
123
  $fluent-contained-icon-button-dark: extend(
56
124
  $fluent-contained-icon-button,
125
+ $fluent-base-icon-button-dark,
57
126
  (
58
127
  background: (
59
128
  color: (
@@ -62,9 +131,9 @@ $fluent-contained-icon-button-dark: extend(
62
131
  ),
63
132
  ),
64
133
  foreground: (
65
- color: (
66
- 'surface',
67
- 500,
134
+ contrast-color: (
135
+ 'primary',
136
+ 300,
68
137
  ),
69
138
  ),
70
139
  hover-background: (
@@ -74,21 +143,33 @@ $fluent-contained-icon-button-dark: extend(
74
143
  ),
75
144
  ),
76
145
  hover-foreground: (
77
- color: (
78
- 'surface',
79
- 500,
146
+ contrast-color: (
147
+ 'primary',
148
+ 300,
80
149
  ),
81
150
  ),
82
151
  focus-background: (
83
152
  color: (
84
153
  'primary',
85
- 200,
154
+ 300,
86
155
  ),
87
156
  ),
88
157
  focus-foreground: (
158
+ contrast-color: (
159
+ 'primary',
160
+ 300,
161
+ ),
162
+ ),
163
+ focus-hover-background: (
89
164
  color: (
90
- 'surface',
91
- 500,
165
+ 'primary',
166
+ 200,
167
+ ),
168
+ ),
169
+ focus-hover-foreground: (
170
+ contrast-color: (
171
+ 'primary',
172
+ 300,
92
173
  ),
93
174
  ),
94
175
  active-background: (
@@ -98,15 +179,15 @@ $fluent-contained-icon-button-dark: extend(
98
179
  ),
99
180
  ),
100
181
  active-foreground: (
101
- color: (
102
- 'surface',
103
- 500,
182
+ contrast-color: (
183
+ 'primary',
184
+ 300,
104
185
  ),
105
186
  ),
106
187
  focus-border-color: (
107
- color: (
108
- 'surface',
109
- 500,
188
+ contrast-color: (
189
+ 'primary',
190
+ 300,
110
191
  ),
111
192
  ),
112
193
  )
@@ -114,8 +195,28 @@ $fluent-contained-icon-button-dark: extend(
114
195
 
115
196
  /// Generates a dark fluent outlined icon button schema.
116
197
  /// @type {Map}
198
+ /// @prop {Map} border-color [color: ('gray', 400)] - The border color of the fluent outlined icon button.
199
+ /// @prop {Map} disabled-border-color [color: ('gray', 100)] - The disabled focused border color of an outlined icon button.
117
200
  /// @requires {Map} $fluent-outlined-icon-button
118
- $fluent-outlined-icon-button-dark: extend($fluent-outlined-icon-button);
201
+ /// @requires {Map} $fluent-base-icon-button-dark
202
+ $fluent-outlined-icon-button-dark: extend(
203
+ $fluent-outlined-icon-button,
204
+ $fluent-base-icon-button-dark,
205
+ (
206
+ border-color: (
207
+ color: (
208
+ 'gray',
209
+ 400,
210
+ ),
211
+ ),
212
+ disabled-border-color: (
213
+ color: (
214
+ 'gray',
215
+ 100,
216
+ ),
217
+ ),
218
+ )
219
+ );
119
220
 
120
221
  /// Generates a dark fluent icon button schema.
121
222
  /// @type {Map}