Skip to content

Commit bdd3f89

Browse files
mayagbarnesmayagbarnes
committed
Clean up
1 parent 2ef6e92 commit bdd3f89

File tree

7 files changed

+80
-55
lines changed

7 files changed

+80
-55
lines changed

‎frontend/lib/src/components/elements/Metric/Metric.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,10 @@ import { Placement } from "~lib/components/shared/Tooltip"
3636
import TooltipIcon from "~lib/components/shared/TooltipIcon"
3737
import { StyledWidgetLabelHelpInline } from "~lib/components/widgets/BaseWidget"
3838
import { useCalculatedDimensions } from "~lib/hooks/useCalculatedDimensions"
39-
import { getMetricBackgroundColor } from "~lib/theme/getColors"
39+
import { getMetricBackgroundColor, getMetricColor } from "~lib/theme/getColors"
4040
import { labelVisibilityProtoValueToEnum } from "~lib/util/utils"
4141

4242
import {
43-
getMetricColor,
4443
StyledMetricChart,
4544
StyledMetricContainer,
4645
StyledMetricContent,
@@ -101,9 +100,11 @@ export function getMetricChartSpec(
101100
}),
102101
...(chartType === MetricProto.ChartType.AREA && {
103102
type: "area",
103+
// Controls the color of the shaded area of area chart (bg color)
104104
color: getMetricBackgroundColor(theme, metricColor),
105105
opacity: 1,
106106
line: {
107+
// Controls the color of the line in area chart (main color)
107108
color: getMetricColor(theme, metricColor),
108109
opacity: 1,
109110
strokeWidth: 2,

‎frontend/lib/src/components/elements/Metric/styled-components.ts‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,7 @@ import styled from "@emotion/styled"
1919
import { Metric as MetricProto } from "@streamlit/protobuf"
2020

2121
import { StyledWidgetLabel } from "~lib/components/widgets/BaseWidget/styled-components"
22-
import { EmotionTheme } from "~lib/theme"
23-
import { getMetricBackgroundColor } from "~lib/theme/getColors"
22+
import { getMetricBackgroundColor, getMetricColor } from "~lib/theme/getColors"
2423
import { LabelVisibilityOptions } from "~lib/util/utils"
2524

2625
export interface StyledMetricContainerProps {
@@ -99,24 +98,11 @@ export interface StyledMetricDeltaTextProps {
9998
metricColor: MetricProto.MetricColor
10099
}
101100

102-
export const getMetricColor = (
103-
theme: EmotionTheme,
104-
color: MetricProto.MetricColor
105-
): string => {
106-
switch (color) {
107-
case MetricProto.MetricColor.RED:
108-
return theme.colors.metricNegativeDeltaColor
109-
case MetricProto.MetricColor.GREEN:
110-
return theme.colors.metricPositiveDeltaColor
111-
// this must be grey
112-
default:
113-
return theme.colors.metricNeutralDeltaColor
114-
}
115-
}
116-
117101
export const StyledMetricDeltaText = styled.div<StyledMetricDeltaTextProps>(
118102
({ theme, metricColor }) => ({
103+
// TODO (mgbarnes): Upon default text color updates, use text color instead of main colors
119104
color: getMetricColor(theme, metricColor),
105+
// Uses same color as shaded bg of area chart (bg color)
120106
backgroundColor: getMetricBackgroundColor(theme, metricColor),
121107
fontSize: theme.fontSizes.sm,
122108
display: "inline-flex",

‎frontend/lib/src/components/widgets/DateInput/DateInput.tsx‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,8 @@ function DateInput({
113113
const [isEmpty, setIsEmpty] = useState(false)
114114
const [error, setError] = useState<string | null>(null)
115115

116-
const { colors, fontSizes, lineHeights, spacing, sizes } = useEmotionTheme()
116+
const { colors, fontSizes, fontWeights, lineHeights, spacing, sizes } =
117+
useEmotionTheme()
117118

118119
const { locale } = useContext(LibContext)
119120
const loadedLocale = useIntlLocale(locale)
@@ -282,7 +283,7 @@ function DateInput({
282283
overrides: {
283284
Body: {
284285
style: {
285-
marginTop: theme.spacing.px,
286+
marginTop: spacing.px,
286287
},
287288
},
288289
},
@@ -415,7 +416,7 @@ function DateInput({
415416
// Baseweb has an error prop for the input, but its coloring doesn't reconcile
416417
// with our dark theme - we handle error state coloring manually here
417418
...(error && {
418-
backgroundColor: colors.dangerBg,
419+
backgroundColor: colors.redBackgroundColor,
419420
}),
420421
},
421422
},
@@ -445,7 +446,7 @@ function DateInput({
445446
},
446447
Input: {
447448
style: {
448-
fontWeight: theme.fontWeights.normal,
449+
fontWeight: fontWeights.normal,
449450
// Baseweb requires long-hand props, short-hand leads to weird bugs & warnings.
450451
paddingRight: spacing.sm,
451452
paddingLeft: spacing.md,
@@ -454,7 +455,7 @@ function DateInput({
454455
lineHeight: lineHeights.inputWidget,
455456

456457
"::placeholder": {
457-
color: theme.colors.fadedText60,
458+
color: colors.fadedText60,
458459
},
459460

460461
// Change input value text color in error state - matches st.error in light and dark mode
@@ -476,12 +477,12 @@ function DateInput({
476477
overrides: {
477478
ControlContainer: {
478479
style: {
479-
height: theme.sizes.minElementHeight,
480+
height: sizes.minElementHeight,
480481
// Baseweb requires long-hand props, short-hand leads to weird bugs & warnings.
481-
borderLeftWidth: theme.sizes.borderWidth,
482-
borderRightWidth: theme.sizes.borderWidth,
483-
borderTopWidth: theme.sizes.borderWidth,
484-
borderBottomWidth: theme.sizes.borderWidth,
482+
borderLeftWidth: sizes.borderWidth,
483+
borderRightWidth: sizes.borderWidth,
484+
borderTopWidth: sizes.borderWidth,
485+
borderBottomWidth: sizes.borderWidth,
485486
},
486487
},
487488
},

‎frontend/lib/src/theme/createBaseUiTheme.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -195,13 +195,13 @@ const createBaseUiThemeOverrides = (
195195

196196
modalCloseColor: colors.bodyText,
197197

198-
notificationInfoBackground: colors.infoBg,
198+
notificationInfoBackground: colors.blueBackgroundColor,
199199
notificationInfoText: colors.info,
200-
notificationPositiveBackground: colors.successBg,
200+
notificationPositiveBackground: colors.greenBackgroundColor,
201201
notificationPositiveText: colors.success,
202-
notificationWarningBackground: colors.warningBg,
202+
notificationWarningBackground: colors.yellowBackgroundColor,
203203
notificationWarningText: colors.warning,
204-
notificationNegativeBackground: colors.dangerBg,
204+
notificationNegativeBackground: colors.redBackgroundColor,
205205
notificationNegativeText: colors.danger,
206206
progressbarTrackFill: widgetBackgroundColor,
207207

‎frontend/lib/src/theme/getColors.test.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {
2424
getDividerColors,
2525
getMarkdownBgColors,
2626
getMetricBackgroundColor,
27+
getMetricColor,
2728
hasLightBackgroundColor,
2829
} from "./getColors"
2930

@@ -209,6 +210,49 @@ describe("getMarkdownBgColors", () => {
209210
})
210211
})
211212

213+
describe("getMetricColor", () => {
214+
it("returns correct metric color for light theme", () => {
215+
const colors = lightTheme.emotion.colors
216+
217+
const result1 = getMetricColor(
218+
lightTheme.emotion,
219+
MetricProto.MetricColor.RED
220+
)
221+
const result2 = getMetricColor(
222+
lightTheme.emotion,
223+
MetricProto.MetricColor.GREEN
224+
)
225+
const result3 = getMetricColor(
226+
lightTheme.emotion,
227+
MetricProto.MetricColor.GRAY
228+
)
229+
230+
expect(result1).toBe(colors.redColor)
231+
expect(result2).toBe(colors.greenColor)
232+
expect(result3).toBe(colors.grayColor)
233+
})
234+
235+
it("returns correct metric color for dark theme", () => {
236+
const colors = darkTheme.emotion.colors
237+
const result1 = getMetricColor(
238+
darkTheme.emotion,
239+
MetricProto.MetricColor.RED
240+
)
241+
const result2 = getMetricColor(
242+
darkTheme.emotion,
243+
MetricProto.MetricColor.GREEN
244+
)
245+
const result3 = getMetricColor(
246+
darkTheme.emotion,
247+
MetricProto.MetricColor.GRAY
248+
)
249+
250+
expect(result1).toBe(colors.redColor)
251+
expect(result2).toBe(colors.greenColor)
252+
expect(result3).toBe(colors.grayColor)
253+
})
254+
})
255+
212256
describe("getMetricBackgroundColor", () => {
213257
it("returns correct metric background colors for light theme", () => {
214258
const colors = lightTheme.emotion.colors

‎frontend/lib/src/theme/getColors.ts‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -85,18 +85,6 @@ export const createEmotionColors = (
8585
codeTextColor: genericColors.green,
8686
codeBackgroundColor: derivedColors.bgMix,
8787

88-
// TODO (mgbarnes): These currently control both the metric delta text and chart
89-
// line/bar/area top line color. Dislocate these with text color updates.
90-
metricPositiveDeltaColor: genericColors.greenColor,
91-
metricNegativeDeltaColor: genericColors.redColor,
92-
metricNeutralDeltaColor: genericColors.grayColor,
93-
94-
// Status element colors
95-
infoBg: genericColors.blueBackgroundColor,
96-
dangerBg: genericColors.redBackgroundColor,
97-
successBg: genericColors.greenBackgroundColor,
98-
warningBg: genericColors.yellowBackgroundColor,
99-
10088
borderColor: derivedColors.fadedText10,
10189
borderColorLight: derivedColors.fadedText05,
10290

@@ -147,6 +135,21 @@ export function getDividerColors(theme: EmotionTheme): DividerColors {
147135
}
148136
}
149137

138+
export function getMetricColor(
139+
theme: EmotionTheme,
140+
color: MetricProto.MetricColor
141+
): string {
142+
switch (color) {
143+
case MetricProto.MetricColor.RED:
144+
return theme.colors.redColor
145+
case MetricProto.MetricColor.GREEN:
146+
return theme.colors.greenColor
147+
// this must be grey
148+
default:
149+
return theme.colors.grayColor
150+
}
151+
}
152+
150153
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- TODO: Replace 'any' with a more specific type.
151154
export function getMarkdownTextColors(theme: EmotionTheme): any {
152155
const lightTheme = hasLightBackgroundColor(theme)

‎frontend/lib/src/theme/types.ts‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -75,16 +75,6 @@ export type SpecialEmotionColors = {
7575
codeTextColor: string
7676
codeBackgroundColor: string
7777

78-
metricPositiveDeltaColor: string
79-
metricNegativeDeltaColor: string
80-
metricNeutralDeltaColor: string
81-
82-
// Status element colors
83-
infoBg: string
84-
dangerBg: string
85-
successBg: string
86-
warningBg: string
87-
8878
borderColor: string
8979
borderColorLight: string
9080

0 commit comments

Comments
 (0)