Merge pull request #66 from IgniteUI/mpopov/updae-css-variables

style(theme): update theming variables and improve border styles for cells and rows

Author: simeonoff

package-lock.json

@@ -60,7 +60,7 @@
     "autoprefixer": "^10.5.0",
     "concurrently": "^9.2.1",
     "husky": "^9.1.7",
-    "igniteui-theming": "^26.0.1",
+    "igniteui-theming": "^27.3.0",
     "lint-staged": "^17.0.5",
     "node-watch": "^0.7.4",
     "playwright": "^1.60.0",

package.json

@@ -1,8 +1,7 @@
 @use '../common' as *;
 @use '../themes/light/themes' as *;
 
-$theme: $indigo;
-$inset-shadow-width: #{rem(1px)};
+$theme: $material;
 
 :host {
     position: relative;
@@ -11,7 +10,9 @@ $inset-shadow-width: #{rem(1px)};
     align-items: center;
     padding: 0 $ig-cells-padding;
     color: inherit;
-    border-right: rem(1px) solid transparent;
+    border-inline-end:
+	    var-get($theme, 'header-border-width')
+	    solid;
     font-size: rem(13px);
     overflow-wrap: anywhere;
 	min-height: sizable(rem(32px), rem(40px), rem(48px));
@@ -47,9 +48,13 @@ $inset-shadow-width: #{rem(1px)};
     outline: none;
 	color: var-get($theme, 'cell-selected-text-color');
 	background: var-get($theme, 'cell-selected-background');
+	background-clip: padding-box;
 
 	&::after {
-		border: $inset-shadow-width solid var-get($theme, 'cell-active-border-color')
+		border:
+			var-get($theme, 'cell-active-border-width')
+			var-get($theme, 'active-state-border-style')
+			var-get($theme, 'cell-active-border-color')
 	}
 }
 

src/styles/body-cell/body-cell.scss

@@ -6,7 +6,7 @@ $theme: $material;
 :host {
     display: grid;
     width: 100%;
-    border-block-end: rem(1px) solid var-get($theme, 'row-border-color');
+    border-block-end: var-get($theme, 'row-border-width') var-get($theme, 'row-border-style') var-get($theme, 'row-border-color');
     background: var-get($theme, 'content-background');
     color: var-get($theme, 'row-odd-text-color');
     z-index: var(--z-index-base);
@@ -20,14 +20,26 @@ $theme: $material;
 :host(:nth-of-type(odd)) {
 	background: var-get($theme, 'row-odd-background');
 	color: var-get($theme, 'row-odd-text-color');
+	
+	&::part(cell) {
+		border-inline-end-color: var-get($theme, 'body-column-border-color-odd');
+	}
 }
 
 :host(:nth-of-type(even)) {
     background: var-get($theme, 'row-even-background');
     color: var-get($theme, 'row-even-text-color');
+	
+	&::part(cell) {
+		border-inline-end-color: var-get($theme, 'body-column-border-color-even');
+	}
 }
 
 :host(:hover) {
     background: var-get($theme, 'row-hover-background');
     color: var-get($theme, 'row-hover-text-color');
+	
+	&::part(cell) {
+		border-inline-end-color: var-get($theme, 'body-column-hover-border-color');
+	}
 }