Skip to content

Commit 4c0200e

Browse files
dsmmckendsmmcken
authored
fix: adjust filter bar colour (#1666)
- add full accent-100-1400 hsl colours - use accent colours with transparency to more closely match original grid design for filter bar colour - use those variables in the filter input field, with a hacky stacked solid colour linear gradient, such that transperncy has the colour underneath as canvas would - --dh-color-grid-row-hover-bg was too dark, bumped up one level (no longer the same as elsewhere, but grid stripes are lighter so it needs more contrast
1 parent fd8a6c6 commit 4c0200e

3 files changed

Lines changed: 61 additions & 23 deletions

File tree

‎packages/components/src/theme/theme-dark/theme-dark-semantic-grid.css‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
/* Row */
1616
--dh-color-grid-row-0-bg: var(--dh-color-gray-300);
1717
--dh-color-grid-row-1-bg: var(--dh-color-gray-100);
18-
--dh-color-grid-row-hover-bg: var(--dh-color-highlight-hover);
18+
--dh-color-grid-row-hover-bg: var(--dh-color-gray-400);
1919
--dh-color-grid-row-hover-bg-selected: var(
2020
--dh-color-highlight-selected-hover
2121
);
@@ -49,12 +49,19 @@
4949
--dh-color-grid-string-null: var(--dh-color-gray-600);
5050

5151
/* Filter Bar */
52-
--dh-color-grid-filter-bar-active-bg: var(--dh-color-accent-300);
52+
--dh-color-grid-filter-bar-active-bg: hsla(
53+
var(--dh-color-accent-700-hsl),
54+
0.5
55+
);
5356
--dh-color-grid-filter-bar-active: var(--dh-color-accent-600);
5457
--dh-color-grid-filter-bar-expanded-bg: var(--dh-color-gray-200);
55-
--dh-color-grid-filter-bar-expanded-active-bg: var(--dh-color-accent-100);
56-
--dh-color-grid-filter-bar-expanded-active-cell-bg: var(
57-
--dh-color-accent-200
58+
--dh-color-grid-filter-bar-expanded-active-bg: hsla(
59+
var(--dh-color-accent-1000-hsl),
60+
0.19
61+
);
62+
--dh-color-grid-filter-bar-expanded-active-cell-bg: hsla(
63+
var(--dh-color-accent-700-hsl),
64+
0.32
5865
);
5966
--dh-color-grid-filter-bar-separator: var(--dh-color-gray-600);
6067
--dh-color-grid-filter-bar-error: var(--dh-color-visual-negative);

‎packages/components/src/theme/theme-dark/theme-dark-semantic.css‎

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,21 @@
66
--dh-color-foreground-hsl: var(--dh-color-white-hsl);
77

88
--dh-color-accent-hsl: var(--dh-color-blue-600-hsl);
9+
--dh-color-accent-100-hsl: var(--dh-color-blue-100-hsl);
10+
--dh-color-accent-200-hsl: var(--dh-color-blue-200-hsl);
11+
--dh-color-accent-300-hsl: var(--dh-color-blue-300-hsl);
12+
--dh-color-accent-400-hsl: var(--dh-color-blue-400-hsl);
13+
--dh-color-accent-500-hsl: var(--dh-color-blue-500-hsl);
14+
--dh-color-accent-600-hsl: var(--dh-color-blue-600-hsl);
15+
--dh-color-accent-700-hsl: var(--dh-color-blue-700-hsl);
16+
--dh-color-accent-800-hsl: var(--dh-color-blue-800-hsl);
17+
--dh-color-accent-900-hsl: var(--dh-color-blue-900-hsl);
18+
--dh-color-accent-1000-hsl: var(--dh-color-blue-1000-hsl);
19+
--dh-color-accent-1100-hsl: var(--dh-color-blue-1100-hsl);
20+
--dh-color-accent-1200-hsl: var(--dh-color-blue-1200-hsl);
21+
--dh-color-accent-1300-hsl: var(--dh-color-blue-1300-hsl);
22+
--dh-color-accent-1400-hsl: var(--dh-color-blue-1400-hsl);
23+
924
--dh-color-info-hsl: var(--dh-color-cyan-1000-hsl);
1025
--dh-color-neutral-hsl: var(--dh-color-gray-500-hsl);
1126
--dh-color-notice-hsl: var(--dh-color-yellow-1000-hsl);
@@ -69,20 +84,20 @@
6984
--dh-color-contrast-light: hsl(var(--dh-color-contrast-light-hsl));
7085

7186
/** Accent Colors */
72-
--dh-color-accent-100: var(--dh-color-blue-100);
73-
--dh-color-accent-200: var(--dh-color-blue-200);
74-
--dh-color-accent-300: var(--dh-color-blue-300);
75-
--dh-color-accent-400: var(--dh-color-blue-400);
76-
--dh-color-accent-500: var(--dh-color-blue-500);
77-
--dh-color-accent-600: var(--dh-color-blue-600);
78-
--dh-color-accent-700: var(--dh-color-blue-700);
79-
--dh-color-accent-800: var(--dh-color-blue-800);
80-
--dh-color-accent-900: var(--dh-color-blue-900);
81-
--dh-color-accent-1000: var(--dh-color-blue-1000);
82-
--dh-color-accent-1100: var(--dh-color-blue-1100);
83-
--dh-color-accent-1200: var(--dh-color-blue-1200);
84-
--dh-color-accent-1300: var(--dh-color-blue-1300);
85-
--dh-color-accent-1400: var(--dh-color-blue-1400);
87+
--dh-color-accent-100: hsl(var(--dh-color-accent-100-hsl));
88+
--dh-color-accent-200: hsl(var(--dh-color-accent-200-hsl));
89+
--dh-color-accent-300: hsl(var(--dh-color-accent-300-hsl));
90+
--dh-color-accent-400: hsl(var(--dh-color-accent-400-hsl));
91+
--dh-color-accent-500: hsl(var(--dh-color-accent-500-hsl));
92+
--dh-color-accent-600: hsl(var(--dh-color-accent-600-hsl));
93+
--dh-color-accent-700: hsl(var(--dh-color-accent-700-hsl));
94+
--dh-color-accent-800: hsl(var(--dh-color-accent-800-hsl));
95+
--dh-color-accent-900: hsl(var(--dh-color-accent-900-hsl));
96+
--dh-color-accent-1000: hsl(var(--dh-color-accent-1000-hsl));
97+
--dh-color-accent-1100: hsl(var(--dh-color-accent-1100-hsl));
98+
--dh-color-accent-1200: hsl(var(--dh-color-accent-1200-hsl));
99+
--dh-color-accent-1300: hsl(var(--dh-color-accent-1300-hsl));
100+
--dh-color-accent-1400: hsl(var(--dh-color-accent-1400-hsl));
86101

87102
/* Accent Background */
88103
--dh-color-accent-default-bg: hsl(var(--dh-color-accent-hsl));

‎packages/iris-grid/src/FilterInputField.scss‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -56,13 +56,29 @@
5656
}
5757

5858
&.iris-grid-has-filter {
59-
// same as filter-bar-expanded-active-bg
60-
background: scale-color($primary, $saturation: -75%, $lightness: -60%);
59+
// This is a hack to get the filter bar inputs to match the canvas rendered equivalent
60+
// --dh-color-filter-bar-expanded-active-bg relies on transparency of being drawn overtop of
61+
// the grid background. Since we can't do that here, we need to mimic the effect by stacking
62+
// backgrounds using a single color linear gradients as a hack. Performance is not an issue
63+
// since it only applies to the selected filter bar cell.
64+
background: linear-gradient(
65+
var(--dh-color-grid-filter-bar-expanded-active-bg) 100%,
66+
var(--dh-color-grid-filter-bar-expanded-active-bg)
67+
),
68+
linear-gradient(var(--dh-color-grid-bg) 100%, var(--dh-color-grid-bg));
6169
}
6270

6371
&.active {
64-
//same as filter-bar-expanded-active-cell-bg
65-
background: scale-color($primary, $saturation: -50%, $lightness: -40%);
72+
// the canvas color to mimic here is based on the above, with yet another color stacked on top in
73+
background: linear-gradient(
74+
var(--dh-color-grid-filter-bar-expanded-active-cell-bg) 100%,
75+
var(--dh-color-grid-filter-bar-expanded-active-cell-bg)
76+
),
77+
linear-gradient(
78+
var(--dh-color-grid-filter-bar-expanded-active-bg) 100%,
79+
var(--dh-color-grid-filter-bar-expanded-active-bg)
80+
),
81+
linear-gradient(var(--dh-color-grid-bg) 100%, var(--dh-color-grid-bg));
6682
}
6783

6884
&:focus {

0 commit comments

Comments
 (0)
⚡