Skip to content

Commit 1744a9a

Browse files
yordan-styordan-st
committed
refactor: standardize variable references across SCSS files
1 parent 50dffae commit 1744a9a

File tree

8 files changed

+38
-43
lines changed

8 files changed

+38
-43
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,13 @@
3636

3737
.table-striped {
3838
.tr:nth-child(odd) > .td {
39-
background-color: var(--grid-bg-striped, $bg-color-secondary);
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, $bg-color-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: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
left: 0;
6565
padding: 0;
6666
margin: 0;
67-
background: var(--bg-color-secondary, $bg-color);
67+
background: var(--bg-color-secondary, $bg-color-secondary);
6868
z-index: 51;
6969
border-radius: 8px;
7070
list-style-type: none;
@@ -86,13 +86,13 @@
8686
}
8787

8888
&.filter-selected {
89-
background-color: var(--gray-lighter, $hover-color);
89+
background-color: var(--gray-lighter, $gray-lighter);
9090
color: var(--brand-primary, $brand-primary);
9191
}
9292

9393
&:hover,
9494
&.filter-highlighted {
95-
background-color: var(--gray-lighter, $hover-color);
95+
background-color: var(--gray-lighter, $gray-lighter);
9696
}
9797
}
9898
}
@@ -106,7 +106,7 @@
106106
display: flex;
107107
align-items: center;
108108
font-weight: normal;
109-
min-height: var(--spacing-larger, $item-min-height);
109+
min-height: var(--spacing-larger, $spacing-larger);
110110
cursor: pointer;
111111
padding: 0 var(--spacing-small, $spacing-small);
112112

@@ -117,13 +117,13 @@
117117
}
118118

119119
&.filter-selected {
120-
background-color: var(--gray-lighter, $hover-color);
120+
background-color: var(--gray-lighter, $gray-lighter);
121121
color: var(--brand-primary, $brand-primary);
122122
}
123123

124124
&:hover,
125125
&:focus {
126-
background-color: var(--gray-lighter, $hover-color);
126+
background-color: var(--gray-lighter, $gray-lighter);
127127
}
128128

129129
label {
@@ -138,7 +138,7 @@
138138
}
139139

140140
:not(.dropdown-content) > .dropdown-list {
141-
background: var(--bg-color-secondary, $bg-color);
141+
background: var(--bg-color-secondary, $bg-color-secondary);
142142
border-radius: 8px;
143143
box-shadow:
144144
0 2px 20px 1px rgba(5, 15, 129, 0.05),
@@ -148,7 +148,7 @@
148148
}
149149

150150
.dropdown-content {
151-
background: var(--bg-color-secondary, $bg-color);
151+
background: var(--bg-color-secondary, $bg-color-secondary);
152152
border-radius: 8px;
153153
box-shadow:
154154
0 2px 20px 1px rgba(5, 15, 129, 0.05),
@@ -199,7 +199,7 @@
199199
left: 0;
200200
margin: 0 var(--spacing-small, $spacing-small);
201201
padding: 0;
202-
background: var(--bg-color-secondary, $bg-color);
202+
background: var(--bg-color-secondary, $bg-color-secondary);
203203
z-index: 102;
204204
border-radius: 8px;
205205
list-style-type: none;
@@ -213,7 +213,7 @@
213213
display: flex;
214214
align-items: center;
215215
font-weight: normal;
216-
min-height: var(--spacing-larger, $item-min-height);
216+
min-height: var(--spacing-larger, $spacing-larger);
217217
cursor: pointer;
218218
padding: 0 var(--spacing-small, $spacing-small);
219219

@@ -224,13 +224,13 @@
224224
}
225225

226226
&.filter-selected {
227-
background-color: var(--gray-lighter, $hover-color);
227+
background-color: var(--gray-lighter, $gray-lighter);
228228
color: var(--brand-primary, $brand-primary);
229229
}
230230

231231
&:hover,
232232
&:focus {
233-
background-color: var(--gray-lighter, $hover-color);
233+
background-color: var(--gray-lighter, $gray-lighter);
234234
}
235235

236236
label {

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ $root: ".widget-datagrid";
77
.table {
88
position: relative;
99
border-width: 0;
10-
background-color: var(--bg-color-secondary, $bg-color);
10+
background-color: var(--bg-color-secondary, $bg-color-secondary);
1111

1212
/* Pseudo Row, to target this object please use .tr > .td or .tr > div */
1313
.tr {
@@ -19,7 +19,7 @@ $root: ".widget-datagrid";
1919
:where(.widget-datagrid-grid .th) {
2020
display: flex;
2121
align-items: flex-start;
22-
background-color: var(--bg-color-secondary, $bg-color);
22+
background-color: var(--bg-color-secondary, $bg-color-secondary);
2323
border-width: 0;
2424
border-color: var(--grid-border-color, $grid-border-color);
2525
padding: var(--spacing-medium, $spacing-medium);
@@ -43,7 +43,7 @@ $root: ".widget-datagrid";
4343
position: absolute;
4444
top: 0;
4545
height: 100%;
46-
width: var(--spacing-smaller, $dragging-effect-size);
46+
width: var(--spacing-smaller, $spacing-smaller);
4747
background-color: $dragging-color-effect;
4848

4949
z-index: 1;
@@ -109,7 +109,7 @@ $root: ".widget-datagrid";
109109

110110
/* Header text */
111111
.column-header {
112-
margin: 1px 1px calc((-1 * var(--spacing-smaller, $dragging-effect-size)) + 2px);
112+
margin: 1px 1px calc((-1 * var(--spacing-smaller, $spacing-smaller)) + 2px);
113113
display: flex;
114114
align-items: baseline;
115115
font-weight: 600;
@@ -125,9 +125,9 @@ $root: ".widget-datagrid";
125125

126126
svg {
127127
margin-left: 8px;
128-
flex: 0 0 var(--btn-font-size, $icon-size);
129-
color: var(--gray-dark, $icon-color);
130-
height: var(--btn-font-size, $icon-size);
128+
flex: 0 0 var(--btn-font-size, $btn-font-size);
129+
color: var(--gray-dark, $gray-dark);
130+
height: var(--btn-font-size, $btn-font-size);
131131
align-self: center;
132132
}
133133

@@ -187,8 +187,8 @@ $root: ".widget-datagrid";
187187
padding: 0;
188188
margin: 0;
189189

190-
height: calc(var(--btn-font-size, $icon-size) + $icon-margin * 2 + $icon-slack-size);
191-
width: calc(var(--btn-font-size, $icon-size) + $icon-margin * 2 + $icon-slack-size);
190+
height: calc(var(--btn-font-size, $btn-font-size) + $icon-margin * 2 + $icon-slack-size);
191+
width: calc(var(--btn-font-size, $btn-font-size) + $icon-margin * 2 + $icon-slack-size);
192192

193193
svg {
194194
margin: $icon-margin;
@@ -201,7 +201,7 @@ $root: ".widget-datagrid";
201201
right: 0;
202202
margin: 8px;
203203
padding: 0 16px;
204-
background: var(--bg-color-secondary, $bg-color);
204+
background: var(--bg-color-secondary, $bg-color-secondary);
205205
z-index: 102;
206206
overflow-y: auto;
207207
width: fit-content;
@@ -320,7 +320,7 @@ $root: ".widget-datagrid";
320320

321321
.pagination-button {
322322
padding: 6px;
323-
color: var(--gray-darker, $pagination-button-color);
323+
color: var(--gray-darker, $gray-darker);
324324
border-color: transparent;
325325
background-color: transparent;
326326

@@ -359,7 +359,7 @@ $root: ".widget-datagrid";
359359
right: 0;
360360
margin: 8px 0;
361361
padding: 0 16px;
362-
background: var(--bg-color-secondary, $bg-color);
362+
background: var(--bg-color-secondary, $bg-color-secondary);
363363
z-index: 102;
364364
overflow-y: auto;
365365
width: fit-content;

‎packages/modules/data-widgets/src/themesource/datawidgets/web/_date-picker.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ $dg-border-color: #d7d7d7;
6060
&:hover {
6161
border-radius: 50%;
6262
color: var(--brand-primary, $brand-primary);
63-
background-color: var(--gray-ligter, $hover-color);
63+
background-color: var(--gray-ligter, $gray-lighter);
6464
}
6565
}
6666

@@ -76,7 +76,7 @@ $dg-border-color: #d7d7d7;
7676
.react-datepicker__day--today:not(.react-datepicker__day--in-range),
7777
.react-datepicker__day--keyboard-selected {
7878
color: var(--brand-primary, $brand-primary);
79-
background-color: var(--gray-ligter, $hover-color);
79+
background-color: var(--gray-ligter, $gray-lighter);
8080
}
8181

8282
.react-datepicker__month-select:focus-visible,

‎packages/modules/data-widgets/src/themesource/datawidgets/web/_export-alert.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
$brand-primary: #264ae5 !default;
2-
31
.widget-datagrid-export-alert {
42
background-color: rgba(255, 255, 255, 1);
53
border-radius: 4px;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,15 +52,15 @@
5252
.widget-gallery-hover {
5353
.widget-gallery-items {
5454
.widget-gallery-item:hover {
55-
background-color: var(--grid-bg-hover, $bg-color-hover);
55+
background-color: var(--grid-bg-hover, $grid-bg-hover);
5656
}
5757
}
5858
}
5959

6060
// Striped styles
6161
.widget-gallery-striped {
6262
.widget-gallery-item:nth-child(odd) {
63-
background-color: var(--grid-bg-striped, $bg-color-secondary);
63+
background-color: var(--grid-bg-striped, $grid-bg-striped);
6464
}
6565
.widget-gallery-item:nth-child(even) {
6666
background-color: #fff;

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,9 @@
44
//== Design Properties
55
//## Helper classes to change the look and feel of the component
66
========================================================================== */
7-
$grid-border-color: #ced0d3;
8-
$bg-color-hover: #f5f6f6;
9-
107
.widget-tree-node-hover {
118
.widget-tree-node-branch:hover > .widget-tree-node-branch-header {
12-
background-color: var(--grid-bg-hover, $bg-color-hover);
9+
background-color: var(--grid-bg-hover, $grid-bg-hover);
1310
}
1411
}
1512

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
// Atlas UI compatible variable naming for data widgets
22
// Background colors
33
$bg-color: #fff !default;
4-
$bg-color-secondary: #fafafb !default;
5-
$bg-color-hover: #f5f6f6 !default;
4+
$grid-bg-striped: #fafafb !default;
5+
$grid-bg-hover: #f5f6f6 !default;
66
$hover-color: #f8f8f8 !default;
77
$selected-color: #dadcde !default;
88

@@ -12,24 +12,24 @@ $brand-light: #e6eaff !default;
1212
$grid-selected-row-background: $brand-light !default;
1313

1414
// Text and icon colors
15-
$icon-color: #606671 !default;
16-
$pagination-button-color: #3b4251 !default;
15+
$gray-dark: #606671 !default;
16+
$gray-darker: #3b4251 !default;
1717
$pagination-caption-color: #0a1325 !default;
1818

1919
// Border colors
2020
$border-color-default: #ced0d3 !default;
2121
$grid-border-color: #ced0d3 !default;
2222

2323
// Sizing and spacing
24-
$icon-size: 14px !default;
24+
$btn-font-size: 14px !default;
25+
$spacing-smaller: 4px !default;
2526
$spacing-small: 8px !default;
2627
$spacing-medium: 16px !default;
2728
$spacing-large: 24px !default;
28-
$item-min-height: 32px !default;
29+
$spacing-larger: 32px !default;
2930

3031
// Effects and animations
3132
$dragging-color-effect: rgba(10, 19, 37, 0.8) !default;
32-
$dragging-effect-size: 4px !default;
3333
$skeleton-background: linear-gradient(90deg, rgba(194, 194, 194, 0.2) 0%, #d2d2d2 100%) !default;
3434

3535
// Assets

0 commit comments

Comments
 (0)