Changeset View
Standalone View
native/themes/colors.js
| Show First 20 Lines • Show All 129 Lines • ▼ Show 20 Lines | const light = Object.freeze({ | ||||
| drawerOpenCommunityBackground: designSystemColors.shadesWhite90, | drawerOpenCommunityBackground: designSystemColors.shadesWhite90, | ||||
| drawerBackground: designSystemColors.shadesWhite100, | drawerBackground: designSystemColors.shadesWhite100, | ||||
| subthreadsModalClose: designSystemColors.shadesBlack60, | subthreadsModalClose: designSystemColors.shadesBlack60, | ||||
| subthreadsModalBackground: designSystemColors.shadesWhite80, | subthreadsModalBackground: designSystemColors.shadesWhite80, | ||||
| subthreadsModalSearch: '#00000008', | subthreadsModalSearch: '#00000008', | ||||
| messageLabel: designSystemColors.shadesBlack100, | messageLabel: designSystemColors.shadesBlack100, | ||||
| modalSeparator: designSystemColors.shadesWhite60, | modalSeparator: designSystemColors.shadesWhite60, | ||||
| secondaryButtonBorder: designSystemColors.shadesWhite100, | secondaryButtonBorder: designSystemColors.shadesWhite100, | ||||
| inviteLinkHeaderColor: designSystemColors.shadesBlack100, | |||||
| inviteLinkButtonBackground: designSystemColors.shadesWhite60, | |||||
ashoat: Do we really need a new family of colors for invite links? Did you try finding any existing… | |||||
tomekAuthorUnsubmitted Done Inline ActionsFor inviteLinkHeaderColor, the only other entry with the same color in dark theme is listSeparatorLabel - definitely not a good match. Do you have a suggestion of how we should approach this? For me it seems like spending too much time on such a simple thing as colors isn't effective. We should probably start with creating consistent design, with a couple of predefined color pairs (light and dark) and then update all the components to use them. tomek: For `inviteLinkHeaderColor`, the only other entry with the same color in dark theme is… | |||||
ashoatUnsubmitted Not Done Inline Actions
My general feeling is that invite link buttons and headers should not be specific to invite links. We should rely on a consistent design system for things like buttons and headers. I'm pushing back here because this pattern of "every engineer introduces their own button for their screen" leads to an incredibly fractured design system. Can you sync with @ted to figure out if invite link button / headers REALLY need to be distinct? If yes, can we come up with a more generic name for them here that describes what the button / header looks like, and how it can be reused? ashoat: > Do you have a suggestion of how we should approach this?
My general feeling is that invite… | |||||
tomekAuthorUnsubmitted Done Inline ActionsTalked with @ted and he suggested that:
As @ted is off for now, I don't think it makes sense to block this diff on this change. tomek: Talked with @ted and he suggested that:
1. `inviteLinkLinkColor` as a new color should stay
2. | |||||
| }); | }); | ||||
| export type Colors = $Exact<typeof light>; | export type Colors = $Exact<typeof light>; | ||||
| const dark: Colors = Object.freeze({ | const dark: Colors = Object.freeze({ | ||||
| blockQuoteBackground: '#A9A9A9', | blockQuoteBackground: '#A9A9A9', | ||||
| blockQuoteBorder: designSystemColors.shadesBlack60, | blockQuoteBorder: designSystemColors.shadesBlack60, | ||||
| codeBackground: designSystemColors.shadesBlack100, | codeBackground: designSystemColors.shadesBlack100, | ||||
| disabledButton: designSystemColors.shadesBlack80, | disabledButton: designSystemColors.shadesBlack80, | ||||
| ▲ Show 20 Lines • Show All 75 Lines • ▼ Show 20 Lines | const dark: Colors = Object.freeze({ | ||||
| subthreadsModalBackground: designSystemColors.shadesBlack90, | subthreadsModalBackground: designSystemColors.shadesBlack90, | ||||
| subthreadsModalSearch: '#FFFFFF04', | subthreadsModalSearch: '#FFFFFF04', | ||||
| typeaheadTooltipBackground: '#1F1F1f', | typeaheadTooltipBackground: '#1F1F1f', | ||||
| typeaheadTooltipBorder: designSystemColors.shadesBlack80, | typeaheadTooltipBorder: designSystemColors.shadesBlack80, | ||||
| typeaheadTooltipText: 'white', | typeaheadTooltipText: 'white', | ||||
| messageLabel: designSystemColors.shadesWhite60, | messageLabel: designSystemColors.shadesWhite60, | ||||
| modalSeparator: designSystemColors.shadesBlack80, | modalSeparator: designSystemColors.shadesBlack80, | ||||
| secondaryButtonBorder: designSystemColors.shadesWhite100, | secondaryButtonBorder: designSystemColors.shadesWhite100, | ||||
| inviteLinkHeaderColor: designSystemColors.shadesWhite80, | |||||
| inviteLinkButtonBackground: designSystemColors.shadesBlack80, | |||||
| }); | }); | ||||
| const colors = { light, dark }; | const colors = { light, dark }; | ||||
| const colorsSelector: (state: AppState) => Colors = createSelector( | const colorsSelector: (state: AppState) => Colors = createSelector( | ||||
| (state: AppState) => state.globalThemeInfo.activeTheme, | (state: AppState) => state.globalThemeInfo.activeTheme, | ||||
| (theme: ?GlobalTheme) => { | (theme: ?GlobalTheme) => { | ||||
| const explicitTheme = theme ? theme : 'light'; | const explicitTheme = theme ? theme : 'light'; | ||||
| return colors[explicitTheme]; | return colors[explicitTheme]; | ||||
| ▲ Show 20 Lines • Show All 127 Lines • Show Last 20 Lines | |||||
Do we really need a new family of colors for invite links? Did you try finding any existing families we could use? cc @ted