Skip to content

Commit 2d86021

Browse files
gjulivangjulivan
committed
chore: data widget scss css variables cleanup
1 parent b4e17b0 commit 2d86021

13 files changed

+128
-119
lines changed

‎packages/modules/data-widgets/CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66

77
## [Unreleased]
88

9+
### Changed
10+
11+
- We consolidated all SCSS variables from individual files into variables.scss to have a better alignment with atlas variables.
12+
913
## [3.4.0] DataWidgets - 2025-09-12
1014

1115
### Added

‎packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid-design-properties.scss‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,48 @@
11
.table-compact {
22
.th {
3-
padding: var(--spacing-small, $dg-spacing-small);
3+
padding: var(--spacing-small, $spacing-small);
44

55
.filter-selectors {
6-
margin: 0 var(--spacing-small, $dg-spacing-small);
6+
margin: 0 var(--spacing-small, $spacing-small);
77
}
88
}
99

1010
&:has(.th .column-container .filter:not(:empty)) {
1111
.th {
1212
&.column-selector {
13-
padding: var(--spacing-small, $dg-spacing-small) 0;
13+
padding: var(--spacing-small, $spacing-small) 0;
1414
}
1515
&.widget-datagrid-col-select {
16-
padding-bottom: calc(var(--spacing-small, $dg-spacing-small) + 11px);
16+
padding-bottom: calc(var(--spacing-small, $spacing-small) + 11px);
1717
}
1818
}
1919
}
2020

2121
.td {
22-
padding: var(--spacing-small, $dg-spacing-small);
22+
padding: var(--spacing-small, $spacing-small);
2323
}
2424

2525
.dropdown-container .dropdown-list {
26-
margin: 0 var(--spacing-small, $dg-spacing-small);
26+
margin: 0 var(--spacing-small, $spacing-small);
2727
}
2828

2929
.column-selector {
3030
/* Column content */
3131
.column-selector-content {
32-
padding-right: var(--spacing-small, $dg-spacing-small);
32+
padding-right: var(--spacing-small, $spacing-small);
3333
}
3434
}
3535
}
3636

3737
.table-striped {
3838
.tr:nth-child(odd) > .td {
39-
background-color: var(--grid-bg-striped, $dg-grid-bg-striped);
39+
background-color: var(--grid-bg-striped, $grid-bg-striped);
4040
}
4141
}
4242

4343
.table-hover {
4444
.tr:hover > .td {
45-
background-color: var(--grid-bg-hover, $dg-grid-bg-hover);
45+
background-color: var(--grid-bg-hover, $grid-bg-hover);
4646
}
4747
}
4848

‎packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid-filters.scss‎

Lines changed: 19 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,3 @@
1-
$dg-hover-color: #f8f8f8;
2-
$dg-background-color: #fff;
3-
$dg-selected-color: #dadcde;
4-
$dg-border-color: #ced0d3;
5-
$dg-spacing-small: 8px;
6-
$arrow: "resources/dropdown-arrow.svg";
7-
$dg-item-min-height: 32px;
8-
91
@import "date-picker";
102

113
@font-face {
@@ -72,7 +64,7 @@ $dg-item-min-height: 32px;
7264
left: 0;
7365
padding: 0;
7466
margin: 0;
75-
background: var(--bg-color-secondary, $dg-background-color);
67+
background: var(--bg-color-secondary, $bg-color-secondary);
7668
z-index: 51;
7769
border-radius: 8px;
7870
list-style-type: none;
@@ -94,13 +86,13 @@ $dg-item-min-height: 32px;
9486
}
9587

9688
&.filter-selected {
97-
background-color: var(--gray-lighter, $dg-hover-color);
98-
color: var(--brand-primary, $dg-brand-primary);
89+
background-color: var(--gray-lighter, $gray-lighter);
90+
color: var(--brand-primary, $brand-primary);
9991
}
10092

10193
&:hover,
10294
&.filter-highlighted {
103-
background-color: var(--gray-lighter, $dg-hover-color);
95+
background-color: var(--gray-lighter, $gray-lighter);
10496
}
10597
}
10698
}
@@ -114,9 +106,9 @@ $dg-item-min-height: 32px;
114106
display: flex;
115107
align-items: center;
116108
font-weight: normal;
117-
min-height: var(--spacing-larger, $dg-item-min-height);
109+
min-height: var(--spacing-larger, $spacing-larger);
118110
cursor: pointer;
119-
padding: 0 var(--spacing-small, $dg-spacing-small);
111+
padding: 0 var(--spacing-small, $spacing-small);
120112

121113
.filter-label {
122114
overflow: hidden;
@@ -125,13 +117,13 @@ $dg-item-min-height: 32px;
125117
}
126118

127119
&.filter-selected {
128-
background-color: var(--gray-lighter, $dg-hover-color);
129-
color: var(--brand-primary, $dg-brand-primary);
120+
background-color: var(--gray-lighter, $gray-lighter);
121+
color: var(--brand-primary, $brand-primary);
130122
}
131123

132124
&:hover,
133125
&:focus {
134-
background-color: var(--gray-lighter, $dg-hover-color);
126+
background-color: var(--gray-lighter, $gray-lighter);
135127
}
136128

137129
label {
@@ -146,7 +138,7 @@ $dg-item-min-height: 32px;
146138
}
147139

148140
:not(.dropdown-content) > .dropdown-list {
149-
background: var(--bg-color-secondary, $dg-background-color);
141+
background: var(--bg-color-secondary, $bg-color-secondary);
150142
border-radius: 8px;
151143
box-shadow:
152144
0 2px 20px 1px rgba(5, 15, 129, 0.05),
@@ -156,7 +148,7 @@ $dg-item-min-height: 32px;
156148
}
157149

158150
.dropdown-content {
159-
background: var(--bg-color-secondary, $dg-background-color);
151+
background: var(--bg-color-secondary, $bg-color-secondary);
160152
border-radius: 8px;
161153
box-shadow:
162154
0 2px 20px 1px rgba(5, 15, 129, 0.05),
@@ -176,7 +168,7 @@ $dg-item-min-height: 32px;
176168
display: flex;
177169
flex-flow: row nowrap;
178170
align-items: center;
179-
padding: 0 var(--spacing-small, $dg-spacing-small);
171+
padding: 0 var(--spacing-small, $spacing-small);
180172
min-height: 40px;
181173
}
182174

@@ -205,9 +197,9 @@ $dg-item-min-height: 32px;
205197

206198
.dropdown-list {
207199
left: 0;
208-
margin: 0 var(--spacing-small, $dg-spacing-small);
200+
margin: 0 var(--spacing-small, $spacing-small);
209201
padding: 0;
210-
background: var(--bg-color-secondary, $dg-background-color);
202+
background: var(--bg-color-secondary, $bg-color-secondary);
211203
z-index: 102;
212204
border-radius: 8px;
213205
list-style-type: none;
@@ -221,9 +213,9 @@ $dg-item-min-height: 32px;
221213
display: flex;
222214
align-items: center;
223215
font-weight: normal;
224-
min-height: var(--spacing-larger, $dg-item-min-height);
216+
min-height: var(--spacing-larger, $spacing-larger);
225217
cursor: pointer;
226-
padding: 0 var(--spacing-small, $dg-spacing-small);
218+
padding: 0 var(--spacing-small, $spacing-small);
227219

228220
.filter-label {
229221
overflow: hidden;
@@ -232,13 +224,13 @@ $dg-item-min-height: 32px;
232224
}
233225

234226
&.filter-selected {
235-
background-color: var(--gray-lighter, $dg-hover-color);
236-
color: var(--brand-primary, $dg-brand-primary);
227+
background-color: var(--gray-lighter, $gray-lighter);
228+
color: var(--brand-primary, $brand-primary);
237229
}
238230

239231
&:hover,
240232
&:focus {
241-
background-color: var(--gray-lighter, $dg-hover-color);
233+
background-color: var(--gray-lighter, $gray-lighter);
242234
}
243235

244236
label {

0 commit comments

Comments
 (0)