From f4a4d90431f055f6753321f8f60d0a7b4158e7d4 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Fri, 17 Oct 2025 01:32:15 +0300 Subject: [PATCH 1/4] feat(checkbox): set tick-width property --- .../lib/core/styles/components/checkbox/_checkbox-theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss index 7b4cdd24724..f71f9874345 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss @@ -205,7 +205,7 @@ inset: 0; stroke: var-get($theme, 'tick-color'); stroke-linecap: square; - stroke-width: $mark-stroke; + stroke-width: var-get($theme, 'tick-width'); stroke-dasharray: $mark-length; stroke-dashoffset: $mark-length; fill: none; From d65cada0932e42577ba2b4f9a3dfe31f474cfb47 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Mon, 20 Oct 2025 13:08:15 +0300 Subject: [PATCH 2/4] feat(checkbox): update fluent tick width --- .../lib/core/styles/components/checkbox/_checkbox-theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss index f71f9874345..a9dcde2e9c8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss @@ -51,7 +51,7 @@ $mark-stroke: map.get(( 'material': 3, - 'fluent': 1, + 'fluent': 1.5, 'bootstrap': 3, 'indigo': 3, ), $variant); From b18824b982ad8807c004a64e6390318329edbd43 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Wed, 22 Oct 2025 12:05:12 +0300 Subject: [PATCH 3/4] chore(theming): bump to 22.0.0-beta.1 --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5849e3ed253..6ef83711baa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "@types/source-map": "0.5.2", "express": "^5.1.0", "fflate": "^0.8.1", - "igniteui-theming": "^21.0.2", + "igniteui-theming": "^22.0.0-beta.1", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", @@ -13403,9 +13403,9 @@ } }, "node_modules/igniteui-theming": { - "version": "21.0.2", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-21.0.2.tgz", - "integrity": "sha512-RXs8b3PThVlS1FhLeUT9TlLMcPoNAiwJm/L+jHU7jrwsgZU7gGjipjEbQQRe97AURyTxgXKiC4M8CAuUilWQ2A==", + "version": "22.0.0-beta.1", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-22.0.0-beta.1.tgz", + "integrity": "sha512-9+itoHayUT2h029KTxPqI8lG+JG6u2IgcrIbbml+4MWLzF8bRbPQQkGy9JAsOaRp2+FZUspSLh9kyyZCs3gr/g==", "license": "MIT" }, "node_modules/igniteui-trial-watermark": { diff --git a/package.json b/package.json index 37449a322a4..a941b44f90f 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,7 @@ "@types/source-map": "0.5.2", "express": "^5.1.0", "fflate": "^0.8.1", - "igniteui-theming": "^21.0.2", + "igniteui-theming": "^22.0.0-beta.1", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", From 1e47b1c3c42c7e96a5aaf9934032d98735feaafe Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 23 Oct 2025 17:28:28 +0300 Subject: [PATCH 4/4] refactor(checkbox): remove redundant mark-stroke declaratioin The $mark-stroke has been defined as tick-width as token in the Ignite UI Theming package, thus it's no longer needed. --- .../styles/components/checkbox/_checkbox-theme.scss | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss index a9dcde2e9c8..83dc5b45d3f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss @@ -1,3 +1,4 @@ +/* stylelint-disable max-nesting-depth */ @use 'sass:map'; @use 'sass:math'; @use '../../base' as *; @@ -49,13 +50,6 @@ 'indigo': rem(8px), ), $variant); - $mark-stroke: map.get(( - 'material': 3, - 'fluent': 1.5, - 'bootstrap': 3, - 'indigo': 3, - ), $variant); - $mark-offset: map.get(( 'material': 0, 'fluent': -1px, @@ -64,7 +58,7 @@ ), $variant); $mark-length: 24; - $mark-x-factor: math.div($mark-stroke, $mark-length); + $mark-x-factor: calc(#{var-get($theme, 'tick-width')} / $mark-length); $ripple-size: rem(40px); $ripple-radius: math.div($ripple-size, 2); @@ -366,7 +360,7 @@ %cbx-composite-mark--in { stroke-dashoffset: 41; /* length of path - adjacent line length */ opacity: 1; - transform: rotate(45deg) translateX(-#{$mark-x-factor}em); + transform: rotate(45deg) translateX(calc(#{$mark-x-factor} * -1em)); } %cbx-composite-mark--fluent {