Skip to content

Commit 2b66d25

Browse files
simeonoffsimeonoff
authored
Themes: Refactor Checkbox, Switch, and Radio (#14232)
1 parent 7343afa commit 2b66d25

File tree

11 files changed

+1790
-1360
lines changed

11 files changed

+1790
-1360
lines changed

‎package-lock.json‎

Lines changed: 1492 additions & 1146 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
"@types/source-map": "0.5.2",
7171
"express": "^4.19.2",
7272
"fflate": "^0.8.1",
73-
"igniteui-theming": "^6.3.1",
73+
"igniteui-theming": "^7.0.0",
7474
"igniteui-trial-watermark": "^3.0.2",
7575
"lodash-es": "^4.17.21",
7676
"rxjs": "^7.8.0",
@@ -140,4 +140,4 @@
140140
"typedoc-plugin-localization": "^3.0.4",
141141
"typescript": "5.4.5"
142142
}
143-
}
143+
}

‎projects/igniteui-angular/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
"igniteui-trial-watermark": "^3.0.2",
7575
"lodash-es": "^4.17.21",
7676
"uuid": "^9.0.0",
77-
"igniteui-theming": "^6.3.1",
77+
"igniteui-theming": "^7.0.0",
7878
"@igniteui/material-icons-extended": "^3.0.0"
7979
},
8080
"peerDependencies": {

‎projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,10 @@
7373
@extend %cbx-composite--invalid !optional;
7474
}
7575

76+
@include e(composite-wrapper) {
77+
@extend %cbx-composite-wrapper--invalid !optional;
78+
}
79+
7680
@include e(label) {
7781
@extend %cbx-label--invalid !optional;
7882
}
@@ -123,6 +127,8 @@
123127
}
124128

125129
&:hover {
130+
@extend %igx-checkbox--focused-hovered !optional;
131+
126132
@include e(ripple) {
127133
@extend %cbx-ripple--focused !optional;
128134
}
@@ -195,6 +201,10 @@
195201
@extend %cbx-composite-mark--x !optional;
196202
}
197203

204+
@include e(composite-wrapper) {
205+
@extend %cbx-composite-wrapper--x !optional;
206+
}
207+
198208
&:hover {
199209
@include e(ripple) {
200210
@extend %cbx-ripple--hover !optional;

‎projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss‎

Lines changed: 83 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
@use 'sass:map';
22
@use 'sass:math';
33
@use '../../base' as *;
4-
@use '../ripple/ripple-component' as *;
5-
@use '../ripple/ripple-theme' as *;
64
@use 'igniteui-theming/sass/animations' as *;
75
@use '../../themes/schemas' as *;
86

@@ -19,10 +17,11 @@
1917
/// @param {Color} $label-color-hover [null]- The text color used for the label text on hover.
2018
/// @param {Color} $empty-color [null] - The unchecked border color.
2119
/// @param {Color} $empty-color-hover [null] - The unchecked border color on hover.
20+
/// @param {Color} $empty-fill-color [null] - The unchecked fill color.
2221
/// @param {Color} $fill-color [null] - The checked border and fill colors.
2322
/// @param {Color} $fill-color-hover [null] - The checked border and fill colors on hover.
2423
/// @param {Color} $tick-color [null] - The checked mark color.
25-
/// @param {Color} tick-color-hover [null] - The checked mark color on hover.
24+
/// @param {Color} $tick-color-hover [null] - The checked mark color on hover.
2625
/// @param {Color} $disabled-color [null] - The disabled border and fill colors.
2726
/// @param {Color} $disabled-indeterminate-color [null] - The disabled border and fill colors in indeterminate state.
2827
/// @param {Color} $disabled-color-label [null] - The disabled label color.
@@ -47,6 +46,7 @@
4746
$label-color-hover: null,
4847
$empty-color: null,
4948
$empty-color-hover: null,
49+
$empty-fill-color: null,
5050
$fill-color: null,
5151
$fill-color-hover: null,
5252
$tick-color: null,
@@ -77,6 +77,7 @@
7777
label-color-hover: $label-color-hover,
7878
empty-color: $empty-color,
7979
empty-color-hover: $empty-color-hover,
80+
empty-fill-color: $empty-fill-color,
8081
fill-color: $fill-color,
8182
fill-color-hover: $fill-color-hover,
8283
tick-color: $tick-color,
@@ -99,8 +100,6 @@
99100
/// @deprecated Use the `css-vars` mixin instead.
100101
/// @see {mixin} css-vars
101102
/// @param {Map} $theme - The theme used to style the component.
102-
/// @requires {mixin} ripple
103-
/// @requires ripple-theme
104103
@mixin checkbox($theme) {
105104
@include css-vars($theme);
106105
$theme-variant: map.get($theme, '_meta', 'theme-variant');
@@ -137,7 +136,12 @@
137136
indigo-design: none,
138137
), $variant);
139138

140-
$label-margin: rem(8px);
139+
$label-margin: map.get((
140+
material: rem(12px),
141+
fluent: rem(8px),
142+
bootstrap: rem(8px),
143+
indigo-design: rem(8px),
144+
), $variant);
141145

142146
$mark-stroke: map.get((
143147
material: 3,
@@ -147,10 +151,10 @@
147151
), $variant);
148152

149153
$mark-offset: map.get((
150-
material: 0,
154+
material: .5px,
151155
fluent: -1px,
152-
bootstrap: 0,
153-
indigo-design: 0,
156+
bootstrap: .5px,
157+
indigo-design: 1px,
154158
), $variant);
155159

156160
$mark-length: 24;
@@ -159,11 +163,6 @@
159163
$ripple-size: rem(40px);
160164
$ripple-radius: math.div($ripple-size, 2);
161165

162-
$ripple-theme: ripple-theme(
163-
$schema: $light-material-schema,
164-
$color: var-get($theme, 'fill-color')
165-
);
166-
167166
@include scale-in-center();
168167

169168
%cbx-display {
@@ -191,6 +190,14 @@
191190
position: relative;
192191
width: $size;
193192
height: $size;
193+
194+
//ripple color
195+
--color: #{var-get($theme, 'empty-color')};
196+
}
197+
198+
%cbx-composite-wrapper--x {
199+
//ripple color
200+
--color: #{var-get($theme, 'fill-color')};
194201
}
195202

196203
%cbx-composite {
@@ -200,6 +207,7 @@
200207
width: $size;
201208
height: $size;
202209
min-width: $size;
210+
background: var-get($theme, 'empty-fill-color');
203211
border-width: $border-width;
204212
border-style: solid;
205213
border-color: var-get($theme, 'empty-color');
@@ -210,7 +218,7 @@
210218
}
211219

212220
%cbx-composite--hover {
213-
@if $variant == 'indigo-design' {
221+
@if $variant == 'indigo-design' or $variant == 'bootstrap' {
214222
border-color: var-get($theme, 'empty-color-hover');
215223
}
216224
}
@@ -222,14 +230,21 @@
222230

223231
%cbx-composite--invalid {
224232
border-color: var-get($theme, 'error-color');
233+
234+
@if $variant == 'bootstrap' and $theme-variant == 'dark' {
235+
%cbx-composite-mark {
236+
stroke: black;
237+
}
238+
}
239+
}
240+
241+
%cbx-composite-wrapper--invalid {
242+
//ripple color
243+
--color: #{var-get($theme, 'error-color')};
225244
}
226245

227246
%cbx-composite--invalid--hover {
228-
@if $variant != 'bootstrap' {
229-
border-color: var-get($theme, 'error-color-hover');
230-
} @else {
231-
border-color: var-get($theme, 'error-color');
232-
}
247+
border-color: var-get($theme, 'error-color-hover');
233248
}
234249

235250
%cbx-composite--x--invalid {
@@ -243,26 +258,20 @@
243258
}
244259

245260
%cbx-composite--x--invalid--hover {
246-
@if $variant != 'bootstrap' {
247-
border-color: var-get($theme, 'error-color-hover');
248-
background: var-get($theme, 'error-color-hover');
249-
} @else {
250-
border-color: var-get($theme, 'error-color');
251-
background: var-get($theme, 'error-color');
252-
}
261+
border-color: var-get($theme, 'error-color-hover');
262+
background: var-get($theme, 'error-color-hover');
253263
}
254264

255265
%cbx-composite--disabled {
256266
border-color: var-get($theme, 'disabled-color');
257-
background: transparent;
258267

259-
@if $bootstrap-theme {
260-
border-color: var-get($theme, 'disabled-color-label');
268+
@if $variant == 'bootstrap' and $theme-variant == 'dark' {
269+
background: color($color: 'surface', $variant: 500);
261270
}
262271
}
263272

264273
%cbx-composite--x--disabled {
265-
@if $variant != 'indigo-design' {
274+
@if $variant == 'material' or $variant == 'fluent' {
266275
background: var-get($theme, 'disabled-color');
267276
}
268277

@@ -273,7 +282,8 @@
273282
}
274283

275284
@if $bootstrap-theme {
276-
border-color: var-get($theme, 'disabled-color');
285+
background: var-get($theme, 'disabled-indeterminate-color');
286+
border-color: transparent;
277287
}
278288
}
279289

@@ -289,6 +299,10 @@
289299
opacity: 0;
290300
z-index: 1;
291301
transition: opacity .1s $ease-out-quad;
302+
303+
@if $variant == 'material' {
304+
inset-inline-start: -.5px;
305+
}
292306
}
293307

294308
%igx-checkbox--indeterminate {
@@ -303,6 +317,8 @@
303317

304318
@if $variant != 'fluent' {
305319
background: var-get($theme, 'fill-color-hover');
320+
} @else {
321+
background: transparent;
306322
}
307323

308324
&::before {
@@ -325,7 +341,7 @@
325341

326342
%cbx-composite {
327343
background: transparent;
328-
344+
329345
&::before {
330346
content: '';
331347
position: absolute;
@@ -356,13 +372,8 @@
356372
}
357373

358374
%cbx-composite--x--hover {
359-
@if $variant != 'bootstrap' {
360-
border-color: var-get($theme, 'error-color-hover');
361-
background: var-get($theme, 'error-color-hover');
362-
} @else {
363-
border-color: var-get($theme, 'error-color');
364-
background: var-get($theme, 'error-color');
365-
}
375+
border-color: var-get($theme, 'error-color-hover');
376+
background: var-get($theme, 'error-color-hover');
366377
}
367378

368379
@if $variant == 'fluent' {
@@ -380,6 +391,7 @@
380391

381392
&:hover {
382393
%cbx-composite {
394+
background: transparent;
383395
border-color: var-get($theme, 'error-color-hover');
384396

385397
&::before {
@@ -420,6 +432,10 @@
420432
@if $variant == 'fluent' {
421433
stroke: var-get($theme, 'error-color');
422434
}
435+
436+
@if $variant == 'fluent' and $theme-variant == 'dark' {
437+
stroke: color($color: 'error', $variant: 500);
438+
}
423439
}
424440

425441
%cbx-composite-mark--in--fluent {
@@ -434,6 +450,7 @@
434450
cursor: pointer;
435451
user-select: none;
436452
word-wrap: break-all;
453+
transition: color .2s $ease-out-quad;
437454

438455
&:empty {
439456
margin: 0;
@@ -473,8 +490,6 @@
473490
}
474491

475492
%cbx-ripple {
476-
@include ripple($ripple-theme);
477-
@include css-vars($ripple-theme);
478493
display: $ripple-display;
479494
position: absolute;
480495
top: calc(50% - #{$ripple-radius});
@@ -507,24 +522,21 @@
507522
%igx-checkbox--focused {
508523
@if $variant == 'fluent' {
509524
position: relative;
510-
$focus-outline-offset-top: rem(2px);
511-
$focus-outline-offset-left: rem(2px);
525+
$focus-outline-offset: rem(2px);
512526

513527
&::after {
514528
content: '';
515529
position: absolute;
516-
top: -$focus-outline-offset-top;
517-
inset-inline-start: -$focus-outline-offset-left;
530+
inset: -$focus-outline-offset;
518531
box-shadow: 0 0 0 rem(1px) var-get($theme, 'focus-outline-color');
519-
width: calc(100% + (#{$focus-outline-offset-left} * 2));
520-
height: calc(100% + (#{$focus-outline-offset-top} * 2));
521532
}
522533
}
523534

524535
@if $variant == 'bootstrap' {
525536
%cbx-composite {
526537
border-radius: var-get($theme, 'border-radius');
527-
box-shadow: 0 0 0 rem(2px) var-get($theme, 'focus-outline-color');
538+
border-color: color($color: 'primary', $variant: 200);
539+
box-shadow: 0 0 0 rem(4px) var-get($theme, 'focus-outline-color');
528540
}
529541
}
530542

@@ -536,19 +548,40 @@
536548
}
537549
}
538550

551+
%igx-checkbox--focused-hovered {
552+
@if $variant == 'bootstrap' {
553+
%cbx-composite {
554+
border-color: color($color: 'primary', $variant: 300);
555+
}
556+
}
557+
}
558+
539559
%igx-checkbox--focused-checked {
540560
@if $variant == 'indigo-design' {
541561
%cbx-composite {
542562
border-radius: var-get($theme, 'border-radius');
543563
box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-focused');
544564
}
545565
}
566+
567+
@if $variant == 'bootstrap' {
568+
%cbx-composite {
569+
border-color: transparent;
570+
}
571+
}
546572
}
547573

548574
%igx-checkbox--focused-invalid {
549575
@if $variant == 'bootstrap' {
550576
%cbx-composite {
551-
box-shadow: 0 0 0 rem(2px) var-get($theme, 'error-color-hover');
577+
border-color: var-get($theme, 'error-color');
578+
box-shadow: 0 0 0 rem(4px) var-get($theme, 'focus-outline-color-error');
579+
}
580+
581+
&:hover {
582+
%cbx-composite {
583+
border-color: var-get($theme, 'error-color-hover');
584+
}
552585
}
553586
}
554587

0 commit comments

Comments
 (0)