Skip to content

Commit 8f73bc3

Browse files
robinrendleRobin Rendle
robinrendle
and
Robin Rendle
authored
Replacing old color variables (#19421)
* fix(ui): refactored old color vars * tests * fix(ui): remove old color variables * tests * replaced old vars * removed final color vars * tests * replaced red vars * tests * fixed pink color var * tests * added borderDark/borderLight vars * tests * fixed border color variables * docs border vars * replaced purpleDarkest variable * replaced borderDark * fixed border colors * fixed styles * fixed regression * fixed span bg color regression * fixed tests Co-authored-by: Robin Rendle <[email protected]>
1 parent 9a8abd1 commit 8f73bc3

File tree

119 files changed

+529
-560
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

119 files changed

+529
-560
lines changed

‎docs-ui/components/circleIndicator.stories.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import CircleIndicator from 'app/components/circleIndicator';
88
storiesOf('UI|CircleIndicator', module).add(
99
'default',
1010
withInfo('Description')(() => {
11-
let enabled = boolean('Enabled', true);
11+
const enabled = boolean('Enabled', true);
1212
return (
1313
<React.Fragment>
1414
<CircleIndicator
@@ -23,7 +23,7 @@ storiesOf('UI|CircleIndicator', module).add(
2323
enabled={!enabled}
2424
/>
2525

26-
<CircleIndicator size={number('Size', 14)} enabled={enabled} color="purple" />
26+
<CircleIndicator size={number('Size', 14)} enabled={enabled} color="purple400" />
2727
</React.Fragment>
2828
);
2929
})

‎docs-ui/components/iconProps.stories.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ storiesOf('Style|Icons', module).add(
111111
);
112112

113113
const Highlight = styled('span')`
114-
color: ${p => p.theme.purple};
114+
color: ${p => p.theme.purple400};
115115
font-weight: 600;
116116
`;
117117

‎docs-ui/components/layout-thirds.stories.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ storiesOf('Layouts|Thirds', module)
142142
const Container = styled('div')`
143143
background: ${p => p.theme.gray200};
144144
margin: ${space(2)};
145-
border: 1px solid ${p => p.theme.gray400};
145+
border: 1px solid ${p => p.theme.borderDark};
146146
`;
147147

148148
const MarginedButtonBar = styled(ButtonBar)`

‎src/sentry/static/sentry/app/components/activity/note/input.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -328,7 +328,7 @@ const getNoteInputErrorStyles = p => {
328328
height: 0;
329329
border-top: 7px solid transparent;
330330
border-bottom: 7px solid transparent;
331-
border-right: 7px solid ${p.theme.red};
331+
border-right: 7px solid ${p.theme.red400};
332332
position: absolute;
333333
left: -7px;
334334
top: 12px;

‎src/sentry/static/sentry/app/components/alerts/toastIndicator.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const Icon = styled('div')`
4747
display: block;
4848
}
4949
50-
color: ${p => (p.type === 'success' ? p.theme.green400 : p.theme.red)};
50+
color: ${p => (p.type === 'success' ? p.theme.green400 : p.theme.red400)};
5151
`;
5252

5353
const Message = styled('div')`
@@ -70,7 +70,7 @@ const Undo = styled('div')`
7070
const StyledLoadingIndicator = styled(LoadingIndicator)`
7171
.loading-indicator {
7272
border-color: ${p => p.theme.gray700};
73-
border-left-color: ${p => p.theme.purple};
73+
border-left-color: ${p => p.theme.purple400};
7474
}
7575
`;
7676

‎src/sentry/static/sentry/app/components/assistant/guideAnchor.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ const GuideAnchor = createReactClass<Props, State>({
186186
<StyledHovercard
187187
show
188188
body={this.getHovercardBody()}
189-
tipColor={theme.purple}
189+
tipColor={theme.purple400}
190190
position={position}
191191
offset={offset}
192192
>
@@ -202,8 +202,8 @@ const GuideContainer = styled('div')`
202202
grid-gap: ${space(2)};
203203
text-align: center;
204204
line-height: 1.5;
205-
background-color: ${p => p.theme.purple};
206-
border-color: ${p => p.theme.purple};
205+
background-color: ${p => p.theme.purple400};
206+
border-color: ${p => p.theme.purple400};
207207
color: ${p => p.theme.gray100};
208208
`;
209209

@@ -234,7 +234,7 @@ const GuideAction = styled('div')`
234234
`;
235235

236236
const StyledButton = styled(Button)`
237-
border-color: ${p => p.theme.gray100};
237+
border-color: ${p => p.theme.borderLighter};
238238
min-width: 40%;
239239
`;
240240

@@ -244,7 +244,7 @@ const DismissButton = styled(StyledButton)`
244244
&:hover,
245245
&:focus,
246246
&:active {
247-
border-color: ${p => p.theme.gray100};
247+
border-color: ${p => p.theme.borderLighter};
248248
}
249249
`;
250250

@@ -256,7 +256,7 @@ const StepCount = styled('div')`
256256

257257
const StyledHovercard = styled(Hovercard)`
258258
${HovercardBody} {
259-
background-color: ${theme.purple};
259+
background-color: ${theme.purple400};
260260
margin: -1px;
261261
border-radius: ${theme.borderRadius};
262262
}

‎src/sentry/static/sentry/app/components/avatar/avatarList.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ const CollapsedUsers = styled('div')<{size: number}>`
109109
position: relative;
110110
text-align: center;
111111
font-weight: 600;
112-
background-color: ${p => p.theme.borderLight};
112+
background-color: ${p => p.theme.gray300};
113113
color: ${p => p.theme.gray500};
114114
font-size: ${p => Math.floor(p.size / 2.3)}px;
115115
width: ${p => p.size}px;

‎src/sentry/static/sentry/app/components/avatar/projectList.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ const CollapsedProjects = styled('div')<{size: number}>`
7373
height: ${p => p.size}px;
7474
border-radius: 3px;
7575
box-shadow: 0 0 0 3px #fff;
76-
background-color: ${p => p.theme.borderLight};
76+
background-color: ${p => p.theme.gray300};
7777
color: ${p => p.theme.gray500};
7878
position: relative;
7979
margin-left: -${p => Math.floor(p.size / 10)}px;

‎src/sentry/static/sentry/app/components/badge.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import space from 'app/styles/space';
66
import theme from 'app/utils/theme';
77

88
const priorityColors = {
9-
new: theme.red,
9+
new: theme.red400,
1010
strong: theme.blue400,
1111
highlight: theme.green400,
1212
} as const;

‎src/sentry/static/sentry/app/components/charts/components/yAxis.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default function YAxis(props = {}) {
1313
},
1414
splitLine: {
1515
lineStyle: {
16-
color: theme.gray100,
16+
color: theme.borderLighter,
1717
},
1818
},
1919
...props,

‎src/sentry/static/sentry/app/components/charts/percentageTableChart.jsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,11 @@ const StyledDelta = styled('div')`
4040
margin-right: ${space(0.5)};
4141
font-size: ${p => p.theme.fontSizeSmall};
4242
color: ${p =>
43-
p.direction > 0 ? p.theme.green400 : p.direction < 0 ? p.theme.red : p.theme.gray500};
43+
p.direction > 0
44+
? p.theme.green400
45+
: p.direction < 0
46+
? p.theme.red400
47+
: p.theme.gray500};
4448
`;
4549

4650
class PercentageTableChart extends React.Component {

‎src/sentry/static/sentry/app/components/charts/releaseSeries.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ class ReleaseSeries extends React.Component {
106106
markLine: MarkLine({
107107
lineStyle: {
108108
normal: {
109-
color: theme.purpleLight,
109+
color: theme.purple400,
110110
opacity: 0.3,
111111
type: 'solid',
112112
},

‎src/sentry/static/sentry/app/components/charts/worldMapChart.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export default class WorldMapChart extends React.Component {
8787
min: 0,
8888
max: maxValue,
8989
inRange: {
90-
color: [theme.purpleLightest, theme.purpleDarkest],
90+
color: [theme.purple300, theme.purple500],
9191
},
9292
text: ['High', 'Low'],
9393

‎src/sentry/static/sentry/app/components/checkboxFancy/checkboxFancy.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,14 @@ const disabledStyles = (p: Props & {theme: Theme}) =>
1717
p.isDisabled &&
1818
css`
1919
background: ${p.isChecked || p.isIndeterminate ? p.theme.gray400 : p.theme.gray100};
20-
border-color: ${p.theme.gray400};
20+
border-color: ${p.theme.borderDark};
2121
`;
2222

2323
const hoverStyles = (p: Props & {theme: Theme}) =>
2424
!p.isDisabled &&
2525
css`
2626
border: 2px solid
27-
${p.isChecked || p.isIndeterminate ? p.theme.purple : p.theme.gray700};
27+
${p.isChecked || p.isIndeterminate ? p.theme.purple400 : p.theme.gray700};
2828
`;
2929

3030
const CheckboxFancy = styled(
@@ -48,9 +48,10 @@ const CheckboxFancy = styled(
4848
width: ${p => p.size};
4949
height: ${p => p.size};
5050
border-radius: 5px;
51-
background: ${p => (p.isChecked || p.isIndeterminate ? p.theme.purple : 'transparent')};
51+
background: ${p =>
52+
p.isChecked || p.isIndeterminate ? p.theme.purple400 : 'transparent'};
5253
border: 2px solid
53-
${p => (p.isChecked || p.isIndeterminate ? p.theme.purple : p.theme.gray500)};
54+
${p => (p.isChecked || p.isIndeterminate ? p.theme.purple400 : p.theme.gray500)};
5455
cursor: ${p => (p.isDisabled ? 'not-allowed' : 'pointer')};
5556
${p => (!p.isChecked || !p.isIndeterminate) && 'transition: 500ms border ease-out'};
5657

‎src/sentry/static/sentry/app/components/dropdownBubble.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ const getMenuArrow = ({menuWithArrow, alignMenu}: Params) => {
103103
};
104104

105105
const DropdownBubble = styled('div')<Params>`
106-
background: ${p => p.theme.background};
106+
background: ${p => p.theme.white};
107107
border: 1px solid ${p => p.theme.borderDark};
108108
position: absolute;
109109
top: calc(100% - 1px);

‎src/sentry/static/sentry/app/components/eventOrGroupHeader.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ const iconStyles = css`
160160

161161
const Muted = styled('span')`
162162
${iconStyles};
163-
color: ${p => p.theme.red};
163+
color: ${p => p.theme.red400};
164164
`;
165165

166166
const Starred = styled('span')`
@@ -178,15 +178,15 @@ const GroupLevel = styled('div')`
178178
background-color: ${p => {
179179
switch (p.level) {
180180
case 'sample':
181-
return p.theme.purple;
181+
return p.theme.purple400;
182182
case 'info':
183183
return p.theme.blue400;
184184
case 'warning':
185185
return p.theme.yellow400;
186186
case 'error':
187187
return p.theme.orange400;
188188
case 'fatal':
189-
return p.theme.red;
189+
return p.theme.red400;
190190
default:
191191
return p.theme.gray500;
192192
}

‎src/sentry/static/sentry/app/components/events/errorLevel.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ function getLevelColor({level = '', theme}) {
99
error: theme.orange400,
1010
info: theme.blue400,
1111
warning: theme.orange300,
12-
fatal: theme.red,
13-
sample: theme.purple,
12+
fatal: theme.red400,
13+
sample: theme.purple400,
1414
};
1515

1616
return `background-color: ${COLORS[level] || theme.orange400};`;

‎src/sentry/static/sentry/app/components/events/errors.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ const StyledBanner = styled(BannerContainer)`
9191
`;
9292

9393
const StyledIconWarning = styled(IconWarning)`
94-
color: ${p => p.theme.red};
94+
color: ${p => p.theme.red400};
9595
`;
9696

9797
// TODO(theme) don't use a custom pink

‎src/sentry/static/sentry/app/components/events/eventDataSection.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ const SectionHeader = styled('div')<{isCentered?: boolean}>`
161161
}
162162
& small a {
163163
color: ${p => p.theme.gray700};
164-
border-bottom: 1px dotted ${p => p.theme.gray400};
164+
border-bottom: 1px dotted ${p => p.theme.borderDark};
165165
font-weight: normal;
166166
}
167167

‎src/sentry/static/sentry/app/components/events/interfaces/breadcrumbs/getBreadcrumbDetails.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ function getBreadcrumbDetails(breadcrumb: Breadcrumb): Partial<Output> {
2727
case BreadcrumbType.USER:
2828
case BreadcrumbType.UI: {
2929
return {
30-
color: 'purple',
30+
color: 'purple400',
3131
icon: <IconUser />,
3232
renderer: <DefaultRenderer breadcrumb={breadcrumb} />,
3333
};
@@ -58,7 +58,7 @@ function getBreadcrumbDetails(breadcrumb: Breadcrumb): Partial<Output> {
5858
case BreadcrumbType.MESSAGE:
5959
case BreadcrumbType.ERROR: {
6060
return {
61-
color: 'red',
61+
color: 'red400',
6262
icon: <IconWarning />,
6363
renderer: <ErrorRenderer breadcrumb={breadcrumb} />,
6464
};

‎src/sentry/static/sentry/app/components/events/interfaces/breadcrumbsV2/styles.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const IconWrapper = styled('div', {
2020
border-radius: 32px;
2121
z-index: ${p => p.theme.zIndex.breadcrumbs.iconWrapper};
2222
position: relative;
23-
border: 1px solid ${p => p.theme.gray400};
23+
border: 1px solid ${p => p.theme.borderDark};
2424
color: ${p => p.theme.gray800};
2525
${p =>
2626
p.color &&
@@ -65,7 +65,7 @@ const GridCellLeft = styled(GridCell)`
6565
top: 0;
6666
bottom: 0;
6767
left: 21px;
68-
background: ${p => (p.hasError ? '#fa4747' : p.theme.borderLight)};
68+
background: ${p => (p.hasError ? '#fa4747' : p.theme.gray300)};
6969
position: absolute;
7070
@media (min-width: ${p => p.theme.breakpoints[0]}) {
7171
left: 29px;

‎src/sentry/static/sentry/app/components/events/interfaces/openInContextLine.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ const OpenInContainer = styled('div')<{columnQuantity: number}>`
6060
display: grid;
6161
grid-template-columns: repeat(${p => p.columnQuantity}, max-content);
6262
grid-gap: ${space(1)};
63-
color: ${p => p.theme.purple2};
63+
color: ${p => p.theme.gray600};
6464
background-color: ${p => p.theme.white};
6565
font-family: ${p => p.theme.text.family};
6666
border-bottom: 1px solid ${p => p.theme.borderLight};

‎src/sentry/static/sentry/app/components/events/interfaces/spans/header.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -523,7 +523,7 @@ const TickText = styled('span')<{align: TickAlignment}>`
523523
const TickMarker = styled('div')`
524524
width: 1px;
525525
height: 4px;
526-
background-color: ${p => p.theme.borderDark};
526+
background-color: ${p => p.theme.gray400};
527527
position: absolute;
528528
top: 0;
529529
left: 0;
@@ -633,7 +633,7 @@ const CursorGuide = styled('div')`
633633
position: absolute;
634634
top: 0;
635635
width: 1px;
636-
background-color: ${p => p.theme.red};
636+
background-color: ${p => p.theme.red400};
637637
transform: translateX(-50%);
638638
`;
639639

‎src/sentry/static/sentry/app/components/events/interfaces/spans/spanBar.tsx

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -856,13 +856,13 @@ const CursorGuide = styled('div')`
856856
position: absolute;
857857
top: 0;
858858
width: 1px;
859-
background-color: ${p => p.theme.red};
859+
background-color: ${p => p.theme.red400};
860860
transform: translateX(-50%);
861861
height: 100%;
862862
`;
863863

864864
export const DividerLine = styled('div')`
865-
background-color: ${p => p.theme.borderDark};
865+
background-color: ${p => p.theme.gray400};
866866
position: absolute;
867867
height: 100%;
868868
width: 1px;
@@ -923,15 +923,16 @@ const SpanTreeTogglerContainer = styled('div')<TogglerTypes>`
923923
const SpanTreeConnector = styled('div')<TogglerTypes & {orphanBranch: boolean}>`
924924
height: ${p => (p.isLast ? SPAN_ROW_HEIGHT / 2 : SPAN_ROW_HEIGHT)}px;
925925
width: 100%;
926-
border-left: 1px ${p => (p.orphanBranch ? 'dashed' : 'solid')} ${p => p.theme.gray400};
926+
border-left: 1px ${p => (p.orphanBranch ? 'dashed' : 'solid')}
927+
${p => p.theme.borderDark};
927928
position: absolute;
928929
top: 0;
929930
930931
&:before {
931932
content: '';
932933
height: 1px;
933934
border-bottom: 1px ${p => (p.orphanBranch ? 'dashed' : 'solid')}
934-
${p => p.theme.gray400};
935+
${p => p.theme.borderDark};
935936
936937
width: 100%;
937938
position: absolute;
@@ -953,7 +954,8 @@ const SpanTreeConnector = styled('div')<TogglerTypes & {orphanBranch: boolean}>`
953954
const ConnectorBar = styled('div')<{orphanBranch: boolean}>`
954955
height: 250%;
955956
956-
border-left: 1px ${p => (p.orphanBranch ? 'dashed' : 'solid')} ${p => p.theme.gray400};
957+
border-left: 1px ${p => (p.orphanBranch ? 'dashed' : 'solid')}
958+
${p => p.theme.borderDark};
957959
top: -5px;
958960
position: absolute;
959961
`;
@@ -972,15 +974,15 @@ const getTogglerTheme = ({
972974
if (disabled) {
973975
return `
974976
background: ${buttonTheme.background};
975-
border: 1px solid ${theme.gray400};
977+
border: 1px solid ${theme.borderDark};
976978
color: ${buttonTheme.color};
977979
cursor: default;
978980
`;
979981
}
980982

981983
return `
982984
background: ${buttonTheme.background};
983-
border: 1px solid ${theme.gray400};
985+
border: 1px solid ${theme.borderDark};
984986
color: ${buttonTheme.color};
985987
`;
986988
};

0 commit comments

Comments
 (0)