Skip to content

Commit 47e296b

Browse files
desig9steindesig9stein
authored
refactor(themes): consume grid schemas from theming package (#7)
1 parent e571e23 commit 47e296b

38 files changed

+309
-482
lines changed

‎demo/demo.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ const themeChoose = html`
9090
<igc-select
9191
value="bootstrap"
9292
outlined
93-
label="Choose theme"
93+
title="Choose theme"
9494
@igcChange=${({ detail }) => setTheme(detail.value)}
9595
>
9696
${themes.map(theme => html`<igc-select-item .value=${theme}>${theme}</igc-select-item>`)}

‎demo/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
body {
1818
--ig-size: 1;
1919
--sample-body-padding: 20px;
20-
background: hsla(var(--ig-surface-100));
20+
background: var(--ig-surface-300);
2121
margin: 0;
2222
padding: var(--sample-body-padding);
2323
overflow: hidden;
@@ -34,7 +34,7 @@
3434
align-items: center;
3535
padding: 0.5rem 0;
3636
gap: 1rem;
37-
min-height: 79px;
37+
min-height: 75px;
3838
}
3939

4040
#demo {

‎package-lock.json‎

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

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
"concurrently": "^9.2.0",
6363
"globby": "^14.1.0",
6464
"husky": "^9.1.7",
65-
"igniteui-theming": "^22.1.0",
65+
"igniteui-theming": "^24.0.0",
6666
"lint-staged": "^16.1.2",
6767
"node-watch": "^0.7.4",
6868
"playwright": "^1.53.2",

‎src/components/grid.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,9 @@ import { asArray, autoGenerateColumns, getFilterOperandsFor } from '../internal/
2626
import { watch } from '../internal/watch.js';
2727
import type { FilterExpression } from '../operations/filter/types.js';
2828
import type { SortExpression } from '../operations/sort/types.js';
29-
import { styles } from '../styles/grid/themes/grid.base.css.js';
30-
import { all } from '../styles/grid/themes/themes.js';
29+
import { styles } from '../styles/themes/grid.base.css.js';
30+
import { all } from '../styles/themes/grid-themes.js';
31+
import { styles as shared } from '../styles/themes/shared/grid.common.css.js';
3132
import IgcGridLiteCell from './cell.js';
3233
import IgcFilterRow from './filter-row.js';
3334
import IgcGridLiteHeaderRow from './header-row.js';
@@ -135,7 +136,7 @@ export class IgcGridLite<T extends object> extends EventEmitterBase<IgcGridLiteE
135136
return GRID_TAG;
136137
}
137138

138-
public static override styles = styles;
139+
public static override styles = [styles, shared];
139140

140141
public static register() {
141142
registerComponent(

‎src/components/header.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,10 @@ import {
1111
import { partNameMap } from '../internal/part-map.js';
1212
import { registerComponent } from '../internal/register.js';
1313
import { GRID_HEADER_TAG } from '../internal/tags.js';
14+
import { addThemingController } from '../internal/theming.js';
1415
import type { ColumnConfiguration, IgcHeaderContext } from '../internal/types.js';
1516
import { styles } from '../styles/header-cell/header-cell.css.js';
17+
import { all } from '../styles/themes/grid-header-themes.js';
1618

1719
export default class IgcGridLiteHeader<T extends object> extends LitElement {
1820
public static get tagName() {
@@ -47,6 +49,11 @@ export default class IgcGridLiteHeader<T extends object> extends LitElement {
4749
@property({ attribute: false })
4850
public column!: ColumnConfiguration<T>;
4951

52+
constructor() {
53+
super();
54+
55+
addThemingController(this, all);
56+
}
5057
#addResizeEventHandlers() {
5158
const config: AddEventListenerOptions = { once: true };
5259

‎src/internal/theming.ts‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -107,14 +107,12 @@ function isOfTypeThemeVariant(variant: string): variant is ThemeVariant {
107107
}
108108

109109
function getTheme() {
110-
if (!(theme && themeVariant)) {
111-
const cssVars = getAllCssVariables();
112-
const foundTheme = cssVars.igTheme;
113-
const foundVariant = cssVars.igThemeVariant;
110+
const cssVars = getAllCssVariables();
111+
const foundTheme = cssVars.igTheme;
112+
const foundVariant = cssVars.igThemeVariant;
114113

115-
theme = isOfTypeTheme(foundTheme) ? foundTheme : 'bootstrap';
116-
themeVariant = isOfTypeThemeVariant(foundVariant) ? foundVariant : 'light';
117-
}
114+
theme = isOfTypeTheme(foundTheme) ? foundTheme : 'bootstrap';
115+
themeVariant = isOfTypeThemeVariant(foundVariant) ? foundVariant : 'light';
118116

119117
return { theme, themeVariant };
120118
}

‎src/styles/_common.scss‎

Lines changed: 38 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,44 @@
1-
@use "../../node_modules/igniteui-theming/" as *;
2-
@forward "../../node_modules/igniteui-theming/";
1+
@use 'igniteui-theming' as *;
2+
@forward 'igniteui-theming';
33

44
$ig-cells-padding: sizable(rem(8px), rem(16px), rem(24px));
55
$ig-cells-min-height: sizable(rem(24px), rem(34px), rem(50px));
66

7-
:host {
8-
@include sizable();
7+
@mixin ig-scrollbar($track-size, $track-bg, $thumb-bg) {
8+
// Firefox only
9+
scrollbar-width: $track-size;
10+
scrollbar-color: $thumb-bg $track-bg;
11+
12+
// Chromium only
13+
::-webkit-scrollbar {
14+
width: $track-size;
15+
height: $track-size;
16+
background: $track-bg;
17+
}
18+
19+
::-webkit-scrollbar-thumb {
20+
background: $thumb-bg;
21+
}
22+
}
923

10-
--component-size: 3;
24+
:host {
25+
@include sizable();
26+
27+
--component-size: 3;
28+
29+
30+
position: relative;
31+
box-sizing: border-box;
32+
33+
@include ig-scrollbar(
34+
var(--ig-scrollbar-size, var(--sb-size)),
35+
var(--ig-scrollbar-track-background, var(--sb-track-bg-color)),
36+
var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))
37+
);
38+
39+
*,
40+
*::before,
41+
*::after {
42+
box-sizing: border-box;
43+
}
1144
}

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

Lines changed: 35 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@use '../common' as *;
2+
@use '../themes/light/themes' as *;
23

3-
$row-border-width: var(--igx-row-border-width, var(--row-border-width));
4-
$cell-active-border-color: var(--igx-cell-active-border-color, var(--cell-active-border-color));
4+
$theme: $material;
55
$inset-shadow-width: #{rem(1px)};
66

77
:host {
@@ -11,8 +11,8 @@ $inset-shadow-width: #{rem(1px)};
1111
align-items: center;
1212
padding: 0 $ig-cells-padding;
1313
color: inherit;
14-
border-right: $row-border-width solid transparent;
15-
font-size: #{rem(13px)};
14+
border-right: rem(1px) solid transparent;
15+
font-size: rem(13px);
1616
overflow-wrap: anywhere;
1717

1818
&:last-of-type {
@@ -22,40 +22,46 @@ $inset-shadow-width: #{rem(1px)};
2222

2323
:host([active]) {
2424
outline: none;
25-
box-shadow: inset 0 0 0 $inset-shadow-width $cell-active-border-color;
25+
box-shadow: inset 0 0 0 $inset-shadow-width var-get($theme, 'cell-active-border-color');
26+
color: var-get($theme, 'cell-selected-text-color');
27+
background: var-get($theme, 'cell-selected-background');
2628
}
2729

2830
:host(:last-child) {
2931
border-inline-end: none;
3032
}
3133

3234
igc-input {
33-
position: absolute;
34-
left: 0;
35-
height: calc(100% - ($inset-shadow-width * 2));
36-
width: 100%;
37-
38-
&::part(container),
39-
&::part(input) {
40-
border-color: transparent;
41-
box-shadow: none;
42-
height: 100%;
43-
}
35+
position: absolute;
36+
left: 0;
37+
height: calc(100% - ($inset-shadow-width * 2));
38+
width: 100%;
4439
}
4540

4641
igc-input,
4742
igc-select {
48-
&::part(container),
49-
&::part(input) {
50-
background: inherit;
51-
color: inherit;
52-
font-size: #{rem(13px)};
53-
}
54-
55-
&::part(helper-text),
56-
&::part(container) {
57-
&::after {
58-
display: none;
59-
}
60-
}
43+
&::part(container) {
44+
height: calc(100% - ($inset-shadow-width * 2));
45+
46+
&::before {
47+
box-shadow: none;
48+
}
49+
}
50+
51+
&::part(container),
52+
&::part(input) {
53+
box-shadow: none;
54+
height: 100%;
55+
background: inherit;
56+
border: 0;
57+
color: inherit;
58+
font-size: rem(13px);
59+
}
60+
61+
&::part(helper-text),
62+
&::part(container) {
63+
&::after {
64+
display: none;
65+
}
66+
}
6167
}

‎src/styles/body-row/body-row.scss‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,33 @@
11
@use '../common' as *;
2+
@use '../themes/light/themes' as *;
23

3-
$row-border-width: var(--igx-row-border-width, var(--header-border-width));
4-
$row-border-style: var(--igx-row-border-style, var(--header-border-style));
5-
$row-border-color: var(--igx-row-border-color, var(--header-border-color));
6-
$row-odd-background: var(--igx-row-odd-background, var(--row-odd-background));
7-
$row-odd-text-color: var(--igx-row-odd-text-color, var(--row-odd-text-color));
8-
$row-even-background: var(--igx-row-even-background, var(--row-even-background));
9-
$row-even-text-color: var(--igx-row-even-text-color, var(--row-even-text-color));
10-
$row-hover-background: var(--igx-row-hover-background, var(--row-hover-background));
11-
$row-hover-text-color: var(--igx-row-hover-text-color, var(--row-hover-text-color));
4+
$theme: $material;
125

136
:host {
147
display: grid;
158
width: 100%;
169
min-height: $ig-cells-min-height;
17-
border-block-end: $row-border-width $row-border-style $row-border-color;
18-
background: $row-odd-background;
19-
color: $row-odd-text-color;
10+
border-block-end: rem(1px) solid var-get($theme, 'row-border-color');
11+
background: var-get($theme, 'content-background');
12+
color: var-get($theme, 'row-odd-text-color');
2013
z-index: var(--z-index-base);
2114
}
2215

2316
:host(:last-of-type) {
2417
border-bottom: 0;
2518
}
2619

20+
:host(:nth-of-type(odd)) {
21+
background: var-get($theme, 'row-odd-background');
22+
color: var-get($theme, 'row-odd-text-color');
23+
}
24+
2725
:host(:nth-of-type(even)) {
28-
background: $row-even-background;
29-
color: $row-even-text-color;
26+
background: var-get($theme, 'row-even-background');
27+
color: var-get($theme, 'row-even-text-color');
3028
}
3129

3230
:host(:hover) {
33-
background: $row-hover-background;
34-
color: $row-hover-text-color;
31+
background: var-get($theme, 'row-hover-background');
32+
color: var-get($theme, 'row-hover-text-color');
3533
}

0 commit comments

Comments
 (0)