Skip to content

Web: Remove hard coded coloring (mainly for discover related components)#25156

Closed
kimlisa wants to merge 4 commits intomasterfrom
lisa/touch-up-theme
Closed

Web: Remove hard coded coloring (mainly for discover related components)#25156
kimlisa wants to merge 4 commits intomasterfrom
lisa/touch-up-theme

Conversation

@kimlisa
Copy link
Copy Markdown
Contributor

@kimlisa kimlisa commented Apr 25, 2023

I renamed the theme colors (grey -> blueGrey and lightGrey -> grey) to its more appropriate form at the last two commits

const StyledFieldInput = styled(FieldInput)`
input {
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid ${props => props.theme.colors.text.placeholder};
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think after @rudream changes, this will be called muted instead of placeholder right?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Correct

padding: ${props => `${props.theme.space[3]}px`};
border-radius: ${props => `${props.theme.space[2]}px`};
border: 2px solid #2f3659;
border: 2px solid ${props => props.theme.colors.text.placeholder};
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here (note to self)

Copy link
Copy Markdown
Member

@ravicious ravicious left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure if adding a new color variant to the theme is a good idea. If this follows some recent color scheme discussions that I'm not aware of then that's fine. But otherwise I feel like we should avoid adding new colors to the palette, especially if they don't seem to play well with the concept of custom themes: what if someone wants to have a theme that has no greys?

background-color: ${props => props.theme.colors.spotBackground[0]};
padding: ${props => `${props.theme.space[3]}px`};
border-radius: ${props => `${props.theme.space[2]}px`};
border: 2px solid #2f3659;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was this border supposed to be removed?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, this border was unnecessary (early days of discover)

light: '#FFFFFF',

grey: {
blueGrey: {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I renamed the theme colors (grey -> blueGrey and lightGrey -> grey) to its more appropriate form at the last two commits

"More appropriate" as in the new names describe the colors better or is there a doc that describes those colors as such? I couldn't find blue greys and greys in the application design system.

Overall I think we should probably use these greys as sparingly as possible since they don't seem to play well with the concept of custom themes. But I suppose this is something that we'll have to take care of once we get to actually allowing custom themes.

return state.data.isFixed
? {
...base,
backgroundColor: `${theme.colors.grey['600']} !important`,
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we able to avoid adding colors.grey in the first place, like replace it here with another color? This seems to be the only place which uses it. 😶‍🌫️

Copy link
Copy Markdown
Contributor Author

@kimlisa kimlisa May 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks for the callout, i misunderstand how this all worked. i am closing this PR to address this (specific to select creatable) later, the other hard coded removal (replacing with existing theme colors) is addressed here instead: #25438

tracking: #25453

@kimlisa
Copy link
Copy Markdown
Contributor Author

kimlisa commented May 1, 2023

closing: #25156 (comment)

@kimlisa kimlisa closed this May 1, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants