Changeset View
Changeset View
Standalone View
Standalone View
native/themes/colors.js
| Show First 20 Lines • Show All 131 Lines • ▼ Show 20 Lines | const light = Object.freeze({ | ||||
| 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, | inviteLinkHeaderColor: designSystemColors.shadesBlack100, | ||||
| inviteLinkButtonBackground: designSystemColors.shadesWhite60, | inviteLinkButtonBackground: designSystemColors.shadesWhite60, | ||||
| secondaryDestructiveButton: designSystemColors.errorDark50, | |||||
ted: Hey @tomek! I took a look at our color.js file, and did notice that errorDark50 isn't used in… | |||||
tomekAuthorUnsubmitted For me there's a value in distinguishing between error and destructive actions. So having different colors for them makes sense. But merging these also is an option. I've checked how it looks like with an alternative color. It's indeed brighter. But compared to the older color, that button looks a little bit like it's disabled. (but only in comparison)  tomek: For me there's a value in distinguishing between error and destructive actions. So having… | |||||
ashoatUnsubmitted @ted is on vacation now, but I agree the darker color looks a little bit disabled in comparison. Personally, I think I'd prefer the brighter red ashoat: @ted is on vacation now, but I agree the darker color looks a little bit disabled in comparison. | |||||
| }); | }); | ||||
| 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 77 Lines • ▼ Show 20 Lines | const dark: Colors = Object.freeze({ | ||||
| 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, | inviteLinkHeaderColor: designSystemColors.shadesWhite80, | ||||
| inviteLinkButtonBackground: designSystemColors.shadesBlack80, | inviteLinkButtonBackground: designSystemColors.shadesBlack80, | ||||
| secondaryDestructiveButton: designSystemColors.errorDark50, | |||||
| }); | }); | ||||
| 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 | |||||
Hey @tomek! I took a look at our color.js file, and did notice that errorDark50 isn't used in any other components yet. I know the designs are using errorDark50, but thinking about it, it may be better to use
My only concern with the primary color was how bright it may be and attention grabbing, but we already have components using the primary in our system. What do you think?