Skip to content

Commit fe7e920

Browse files
stevegoltonstevegolton
committed
Revert unrelated changes
1 parent e4c94e3 commit fe7e920

11 files changed

Lines changed: 87 additions & 208 deletions

File tree

‎ui/src/assets/theme_provider.scss‎

Lines changed: 31 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,15 @@
2727
&--light {
2828
--pf-color-void: white;
2929
--pf-color-background: white;
30-
--pf-color-background-secondary: #f4f6fa;
30+
--pf-color-background-secondary: #edf0f1;
3131
--pf-color-background-tertiary: #e3e9eb;
3232
--pf-color-interactive-base: rgb(4, 33, 56);
3333
--pf-color-text: #333;
34-
--pf-color-text-hint: #808080;
35-
--pf-color-text-muted: #989ea2;
34+
--pf-color-text-muted: #75797c;
3635
--pf-color-text-disabled: gray;
3736
--pf-color-border: #ccc;
3837
--pf-color-border-secondary: #e0e0e0;
38+
--pf-color-text-hint: #808080;
3939
--pf-color-box-shadow: rgba(0, 0, 0, 0.2);
4040
--pf-color-neutral: gray;
4141
--pf-color-accent: #2667e7;
@@ -51,25 +51,15 @@
5151
--pf-color-warning: rgb(232, 158, 0);
5252
--pf-color-text-on-warning: var(--pf-color-text);
5353

54-
// Chart color palette for data visualization. Original teal→orange ramp,
55-
// extended around the hue circle to cover the full spectrum.
56-
// Series wrap modulo this palette.
57-
--pf-chart-color-1: #1a8a8f; // Teal
58-
--pf-chart-color-2: #bc4f24; // Orange
59-
--pf-chart-color-3: #3373bf; // Blue
60-
--pf-chart-color-4: #3f8a4a; // Green
61-
--pf-chart-color-5: #8a3f7a; // Magenta
62-
--pf-chart-color-6: #b8901a; // Goldenrod
63-
--pf-chart-color-7: #4d62a8; // Slate Blue
64-
--pf-chart-color-8: #95463f; // Rust
65-
--pf-chart-color-9: #2382b9; // Cyan-Blue
66-
--pf-chart-color-10: #8a9520; // Olive
67-
--pf-chart-color-11: #5a3f8a; // Purple
68-
--pf-chart-color-12: #cd6f1a; // Amber Orange
69-
--pf-chart-color-13: #685572; // Warm Slate
70-
--pf-chart-color-neutral: #9e9e9e; // Gray (for unknown/other)
71-
// Foreground color for text/icons drawn on top of any --pf-chart-color-*.
72-
--pf-chart-color-on: #f5f5f5;
54+
// Chart color palette for data visualization
55+
--pf-chart-color-1: #4285f4; // Google Blue
56+
--pf-chart-color-2: #ea4335; // Google Red
57+
--pf-chart-color-3: #fbbc04; // Google Yellow
58+
--pf-chart-color-4: #34a853; // Google Green
59+
--pf-chart-color-5: #ff6d01; // Orange
60+
--pf-chart-color-6: #46bdc6; // Cyan
61+
--pf-chart-color-7: #9334e6; // Purple
62+
--pf-chart-color-8: #185abc; // Dark Blue
7363

7464
--pf-color-track-summary-collapsed: #f4fafb;
7565
--pf-color-track-summary-expanded: #262f3b;
@@ -88,48 +78,39 @@
8878
&--dark {
8979
--pf-color-void: #181818;
9080
--pf-color-background: #202020;
91-
--pf-color-background-secondary: #2c2c2c;
81+
--pf-color-background-secondary: #343434;
9282
--pf-color-background-tertiary: #4a4a4a;
9383
--pf-color-interactive-base: white;
9484
--pf-color-text: #dce0e2;
95-
--pf-color-text-hint: #9aa0a6;
96-
--pf-color-text-muted: #8c8e91;
97-
--pf-color-text-disabled: #727272;
85+
--pf-color-text-muted: #a0a2a5;
86+
--pf-color-text-disabled: #8d8d8e;
9887
--pf-color-border: #484848;
99-
--pf-color-border-secondary: #3a3a3a;
88+
--pf-color-border-secondary: #383838;
89+
--pf-color-text-hint: #9aa0a6;
10090
--pf-color-box-shadow: rgba(0, 0, 0, 0.4);
10191
--pf-color-neutral: gray;
102-
--pf-color-accent: oklch(0.66 0.14 245);
92+
--pf-color-accent: #2667e7;
10393
--pf-color-text-on-accent: white;
10494
--pf-color-highlight: #5f4d06;
10595

106-
--pf-color-primary: oklch(0.66 0.14 245);
96+
--pf-color-primary: #598bed;
10797
--pf-color-text-on-primary: #333;
108-
--pf-color-danger: oklch(0.68 0.18 25);
98+
--pf-color-danger: rgb(230, 90, 90);
10999
--pf-color-text-on-danger: #333;
110-
--pf-color-success: oklch(0.74 0.13 155);
100+
--pf-color-success: rgb(99, 192, 99);
111101
--pf-color-text-on-success: #333;
112-
--pf-color-warning: oklch(0.78 0.13 80);
102+
--pf-color-warning: rgb(244, 188, 67);
113103
--pf-color-text-on-warning: #333;
114104

115-
// Chart color palette for data visualization. Ordered ramp: teal → blue →
116-
// slate → orange. Tuned brighter for the dark theme.
117-
--pf-chart-color-1: #5cc8c4; // Teal
118-
--pf-chart-color-2: #e57038; // Orange
119-
--pf-chart-color-3: #759ce3; // Blue
120-
--pf-chart-color-4: #6fbf7a; // Green
121-
--pf-chart-color-5: #c270b0; // Magenta
122-
--pf-chart-color-6: #e0b550; // Goldenrod
123-
--pf-chart-color-7: #9085c6; // Slate Blue
124-
--pf-chart-color-8: #c2675a; // Rust
125-
--pf-chart-color-9: #5cb8da; // Cyan-Blue
126-
--pf-chart-color-10: #b8c060; // Olive
127-
--pf-chart-color-11: #9078c2; // Purple
128-
--pf-chart-color-12: #f08c33; // Amber Orange
129-
--pf-chart-color-13: #9d7480; // Warm Slate
130-
--pf-chart-color-neutral: #9e9e9e; // Gray (for unknown/other)
131-
// Foreground color for text/icons drawn on top of any --pf-chart-color-*.
132-
--pf-chart-color-on: #1a1a1a;
105+
// Chart color palette for data visualization (brighter for dark mode)
106+
--pf-chart-color-1: #5e97f6; // Lighter Blue
107+
--pf-chart-color-2: #f28b82; // Lighter Red
108+
--pf-chart-color-3: #fdd663; // Lighter Yellow
109+
--pf-chart-color-4: #81c995; // Lighter Green
110+
--pf-chart-color-5: #ff8866; // Lighter Orange
111+
--pf-chart-color-6: #78d9e4; // Lighter Cyan
112+
--pf-chart-color-7: #c58af9; // Lighter Purple
113+
--pf-chart-color-8: #669df6; // Lighter Dark Blue
133114

134115
--pf-color-track-summary-collapsed: #2f3437;
135116
--pf-color-track-summary-expanded: #454d55;

‎ui/src/assets/widgets/chart_svg.scss‎

Lines changed: 0 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,6 @@
1616
display: flex;
1717
min-height: 0;
1818
min-width: 0;
19-
overflow: clip; // Make sure the chart content never overflows leading to a resize oberver loop.
20-
contain: content; // Ensure the chart is self-contained and doesn't cause reflows outside of it.
2119

2220
&.pf-chart-svg--fill-parent {
2321
height: 100%;
@@ -158,42 +156,3 @@
158156
.pf-chart-svg__tooltip-value {
159157
font-weight: bold;
160158
}
161-
162-
.pf-chart-svg__axis-title {
163-
color: var(--pf-color-text-muted);
164-
font-size: var(--pf-font-size-s);
165-
}
166-
167-
.pf-chart-svg__tick-label {
168-
color: var(--pf-color-text-muted);
169-
font-size: var(--pf-font-size-s);
170-
}
171-
172-
.pf-chart-svg__line {
173-
color: var(--pf-color-border);
174-
}
175-
176-
.pf-chart-svg__gridline {
177-
color: var(--pf-color-border);
178-
opacity: 0.3;
179-
}
180-
181-
.pf-chart-svg__hover-guide {
182-
color: var(--pf-color-text-muted);
183-
}
184-
185-
.pf-chart-svg__selection {
186-
color: var(--pf-color-accent);
187-
fill-opacity: 0.08;
188-
stroke-opacity: 0.3;
189-
}
190-
191-
.pf-chart-svg__brush {
192-
color: var(--pf-color-accent);
193-
fill-opacity: 0.15;
194-
stroke-opacity: 0.5;
195-
}
196-
197-
.pf-chart-svg__point-marker {
198-
fill: var(--pf-color-background);
199-
}

‎ui/src/assets/widgets/radio_group.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
@import "../theme";
1616

1717
.pf-radio-group {
18-
font-family: var(--pf-font-compact);
1918
display: inline-flex;
2019
flex-direction: row;
2120
align-items: baseline;

‎ui/src/components/widgets/charts/chart_theme.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,12 +47,11 @@ export interface ChartThemeColors {
4747
* element. The element must be within the DOM tree that has the theme CSS
4848
* variables defined (typically a child of .pf-theme-provider).
4949
*/
50-
const NUM_CHART_COLORS = 13;
5150
export function getChartThemeColors(el: Element): ChartThemeColors {
5251
const style = getComputedStyle(el);
5352

5453
const chartColors: string[] = [];
55-
for (let i = 1; i <= NUM_CHART_COLORS; i++) {
54+
for (let i = 1; i <= 8; i++) {
5655
chartColors.push(style.getPropertyValue(`--pf-chart-color-${i}`).trim());
5756
}
5857

‎ui/src/components/widgets/charts/line_chart.ts‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -88,18 +88,6 @@ export interface LineChartAttrs {
8888
*/
8989
readonly selection?: {readonly start: number; readonly end: number};
9090

91-
/**
92-
* Vertical markers drawn at specific X values. Each marker renders as a
93-
* thin vertical line spanning the plot area with a small dot at the top.
94-
* Useful for annotating point-in-time events (e.g. LMK kills) on top of
95-
* a time series.
96-
*/
97-
readonly markers?: ReadonlyArray<{
98-
readonly x: number;
99-
readonly color?: string;
100-
readonly label?: string;
101-
}>;
102-
10391
/**
10492
* Fill parent container. Defaults to false.
10593
*/

‎ui/src/components/widgets/charts_svg/common.ts‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,16 @@
1515
import m from 'mithril';
1616

1717
// Number of --pf-chart-color-N CSS variables defined by the theme.
18-
const CHART_COLOR_COUNT = 13;
18+
const CHART_COLOR_COUNT = 8;
1919

2020
// Series colour for the i-th series, as a CSS variable reference.
2121
export function chartColorVar(i: number): string {
2222
return `var(--pf-chart-color-${(i % CHART_COLOR_COUNT) + 1})`;
2323
}
2424

25+
export const TEXT_COLOR = 'var(--pf-color-text)';
26+
export const BORDER_COLOR = 'var(--pf-color-border)';
27+
2528
// Default approximate tick count used when picking nice axis steps.
2629
const APPROX_TICK_COUNT = 5;
2730

@@ -140,10 +143,10 @@ export function logRange(rawMin: number, rawMax: number): AxisRange {
140143
// A point marker: a white dot ringed in the series color.
141144
export function pointMarker(cx: number, cy: number, color: string, r: number) {
142145
return m('circle', {
143-
'className': 'pf-chart-svg__point-marker',
144146
'cx': cx,
145147
'cy': cy,
146148
'r': r,
149+
'fill': '#fff',
147150
'stroke': color,
148151
'stroke-width': 2,
149152
});
@@ -211,10 +214,10 @@ export function renderPlotFrame(opts: {
211214
m(
212215
'text',
213216
{
214-
'className': 'pf-chart-svg__axis-title',
215217
'x': AXIS_NAME_FONT_SIZE,
216218
'y': padTop + plotH / 2,
217-
'fill': 'currentColor',
219+
'fill': TEXT_COLOR,
220+
'font-size': AXIS_NAME_FONT_SIZE,
218221
'text-anchor': 'middle',
219222
'transform': `rotate(-90 ${AXIS_NAME_FONT_SIZE} ${padTop + plotH / 2})`,
220223
},
@@ -224,47 +227,44 @@ export function renderPlotFrame(opts: {
224227
m(
225228
'text',
226229
{
227-
'className': 'pf-chart-svg__axis-title',
228-
'fill': 'currentColor',
229230
'x': padLeft + plotW / 2,
230231
'y': height - 4,
232+
'fill': TEXT_COLOR,
233+
'font-size': AXIS_NAME_FONT_SIZE,
231234
'text-anchor': 'middle',
232235
},
233236
xName,
234237
),
235238
m('line', {
236-
className: 'pf-chart-svg__line',
237239
x1: padLeft,
238240
y1: padTop + plotH,
239241
x2: padLeft + plotW,
240242
y2: padTop + plotH,
241-
stroke: 'currentColor',
243+
stroke: BORDER_COLOR,
242244
}),
243245
m('line', {
244-
className: 'pf-chart-svg__line',
245246
x1: padLeft,
246247
y1: padTop,
247248
x2: padLeft,
248249
y2: padTop + plotH,
249-
stroke: 'currentColor',
250+
stroke: BORDER_COLOR,
250251
}),
251252
yTicks.map((t) =>
252253
m('g', [
253254
m('line', {
254-
className: 'pf-chart-svg__line',
255255
x1: padLeft - TICK_LENGTH,
256256
y1: t.y,
257257
x2: padLeft,
258258
y2: t.y,
259-
stroke: 'currentColor',
259+
stroke: BORDER_COLOR,
260260
}),
261261
m(
262262
'text',
263263
{
264-
'className': 'pf-chart-svg__tick-label',
265264
'x': padLeft - TICK_LENGTH - TICK_LABEL_GAP,
266265
'y': t.y,
267-
'fill': 'currentColor',
266+
'fill': TEXT_COLOR,
267+
'font-size': AXIS_LABEL_FONT_SIZE,
268268
'text-anchor': 'end',
269269
'dominant-baseline': 'middle',
270270
},

‎ui/src/components/widgets/charts_svg/histogram_svg.ts‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@ import type {HistogramAttrs, HistogramData} from '../charts/histogram';
1818
import {clamp} from '../../../base/math_utils';
1919
import {shortUuid} from '../../../base/uuid';
2020
import {
21+
AXIS_LABEL_FONT_SIZE,
22+
BORDER_COLOR,
23+
TEXT_COLOR,
2124
TICK_LABEL_GAP,
2225
TICK_LENGTH,
2326
computePlotLayout,
@@ -380,20 +383,19 @@ export class HistogramSvg implements m.ClassComponent<HistogramAttrs> {
380383
const x = slotX(i);
381384
return m('g', [
382385
m('line', {
383-
className: 'pf-chart-svg__line',
384386
x1: x,
385387
y1: padTop + plotH,
386388
x2: x,
387389
y2: padTop + plotH + TICK_LENGTH,
388-
stroke: 'currentColor',
390+
stroke: BORDER_COLOR,
389391
}),
390392
m(
391393
'text',
392394
{
393-
'className': 'pf-chart-svg__tick-label',
394395
'x': x,
395396
'y': padTop + plotH + TICK_LENGTH + TICK_LABEL_GAP,
396-
'fill': 'currentColor',
397+
'fill': TEXT_COLOR,
398+
'font-size': AXIS_LABEL_FONT_SIZE,
397399
'text-anchor': 'middle',
398400
'dominant-baseline': 'hanging',
399401
},
@@ -408,20 +410,19 @@ export class HistogramSvg implements m.ClassComponent<HistogramAttrs> {
408410
const x = slotX(dataSlots - 1) + adjBarWidth;
409411
return m('g', [
410412
m('line', {
411-
className: 'pf-chart-svg__line',
412413
x1: x,
413414
y1: padTop + plotH,
414415
x2: x,
415416
y2: padTop + plotH + TICK_LENGTH,
416-
stroke: 'currentColor',
417+
stroke: BORDER_COLOR,
417418
}),
418419
m(
419420
'text',
420421
{
421-
'className': 'pf-chart-svg__tick-label',
422422
'x': x,
423423
'y': padTop + plotH + TICK_LENGTH + TICK_LABEL_GAP,
424-
'fill': 'currentColor',
424+
'fill': TEXT_COLOR,
425+
'font-size': AXIS_LABEL_FONT_SIZE,
425426
'text-anchor': 'middle',
426427
'dominant-baseline': 'hanging',
427428
},
@@ -434,10 +435,10 @@ export class HistogramSvg implements m.ClassComponent<HistogramAttrs> {
434435
m(
435436
'text',
436437
{
437-
'className': 'pf-chart-svg__tick-label',
438438
'x': slotX(dataSlots) + adjBarWidth / 2,
439439
'y': padTop + plotH + TICK_LENGTH + TICK_LABEL_GAP,
440-
'fill': 'currentColor',
440+
'fill': TEXT_COLOR,
441+
'font-size': AXIS_LABEL_FONT_SIZE,
441442
'text-anchor': 'middle',
442443
'dominant-baseline': 'hanging',
443444
},
@@ -453,13 +454,12 @@ export class HistogramSvg implements m.ClassComponent<HistogramAttrs> {
453454
const x = slotX(lo);
454455
const w = slotX(hi) + adjBarWidth - x;
455456
return m('rect', {
456-
'className': 'pf-chart-svg__brush',
457457
'x': x,
458458
'y': padTop,
459459
'width': Math.max(0, w),
460460
'height': plotH,
461-
'fill': 'currentColor',
462-
'stroke': 'currentColor',
461+
'fill': 'rgba(0, 120, 212, 0.15)',
462+
'stroke': 'rgba(0, 120, 212, 0.5)',
463463
'stroke-width': 1,
464464
'pointer-events': 'none',
465465
});

0 commit comments

Comments
 (0)