[POC] Emotion Theming #382
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -128,9 +128,10 @@ | |
| "yarn-run-all": "^3.1.1" | ||
| }, | ||
| "dependencies": { | ||
| "@emotion/core": "10.0.35", | ||
| "@emotion/styled": "10.0.27", | ||
| "@react-aria/focus": "^3.0.2", | ||
| "emotion-theming": "10.0.27", | ||
| "lodash.round": "^4.0.4", | ||
| "lodash.throttle": "^4.1.1", | ||
| "lodash.uniqueid": "^4.0.1", | ||
|
|
@@ -146,6 +147,7 @@ | |
| "peerDependencies": { | ||
| "@emotion/core": "10.0.35", | ||
| "@emotion/styled": "10.0.27", | ||
| "emotion-theming": "10.0.27", | ||
|
There was a problem hiding this comment. We've run into compatibility issues in the past in applications that use our library if there's an It's higher maintenance to handle it this way but I think it is worth the small cost. |
||
| "react": "^16.13.1", | ||
| "react-dom": "^16.13.1" | ||
| }, | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| import COLORS from '.'; | ||
|
|
||
| const PRIMARY_COLORS = { | ||
| // brand colors | ||
| primary: COLORS.purple100, | ||
| primaryTint1: COLORS.purple85, | ||
| primaryTint2: COLORS.purple70, | ||
| primaryTint3: COLORS.purple30, | ||
| secondary: COLORS.lavender100, | ||
| tertiary: COLORS.purple4, | ||
|
|
||
| // general colors | ||
| success: COLORS.statusGreen, | ||
| successBackground: COLORS.statusGreenBackground, | ||
| successBorder: COLORS.statusGreenBorder, | ||
| info: COLORS.statusPurple, | ||
| infoBackground: COLORS.statusPurpleBackground, | ||
| infoBorder: COLORS.statusPurpleBorder, | ||
| error: COLORS.statusRed, | ||
| errorBackground: COLORS.statusRedBackground, | ||
| errorBorder: COLORS.statusRedBorder, | ||
| default: COLORS.purple70, | ||
| defaultBackground: COLORS.purple10, | ||
| defaultBorder: COLORS.purple15, | ||
| accent: COLORS.red, | ||
| disabled: COLORS.purple10, | ||
| failure: COLORS.red, | ||
| hover: COLORS.purple4, | ||
| warning: COLORS.yellowLight, | ||
|
|
||
| // ui colors | ||
| background: COLORS.purple4, | ||
| backgroundDark: COLORS.purple4, | ||
| border: COLORS.purple10, | ||
| divider: COLORS.purple10, | ||
|
|
||
| // form colors | ||
| radioBorder: COLORS.purple30, | ||
| radioBorderSelected: COLORS.lavender100, | ||
|
|
||
| // typography | ||
| textMuted: COLORS.purple70, | ||
| textGhost: COLORS.purple30, | ||
| textDisabled: COLORS.purple30, | ||
|
|
||
| // overlay | ||
| overlay: 'rgba(45, 45, 48, 0.7)', | ||
| overlaySolid: 'rgba(45, 45, 48, 1)', | ||
|
|
||
| black: COLORS.black, | ||
| white: COLORS.white, | ||
| }; | ||
|
|
||
| export const PRIMARY_COLORS_PROP_TYPES = PropTypes.oneOf( | ||
| Object.values(PRIMARY_COLORS), | ||
| ); | ||
|
|
||
| export default PRIMARY_COLORS; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| import { COLORS } from '..'; | ||
|
|
||
| const SECONDARY_COLORS = { | ||
| // brand colors | ||
| primary: null, | ||
| primaryTint1: '#000000', | ||
| primaryTint2: null, | ||
| primaryTint3: '#cccccc', | ||
| secondary: '#414a4c', | ||
| tertiary: null, | ||
|
|
||
| // general colors | ||
| success: null, | ||
| successBackground: null, | ||
| successBorder: null, | ||
| info: null, | ||
| infoBackground: null, | ||
| infoBorder: null, | ||
| error: null, | ||
| errorBackground: null, | ||
| errorBorder: null, | ||
| default: null, | ||
| defaultBackground: null, | ||
| defaultBorder: null, | ||
| accent: null, | ||
| disabled: null, | ||
| failure: null, | ||
| hover: null, | ||
| warning: null, | ||
|
|
||
| // ui colors | ||
| background: null, | ||
| backgroundDark: null, | ||
| border: null, | ||
| divider: null, | ||
|
|
||
| // form colors | ||
| radioBorder: null, | ||
| radioBorderSelected: null, | ||
|
|
||
| // typography | ||
| textMuted: null, | ||
| textGhost: null, | ||
| textDisabled: null, | ||
|
|
||
| // overlay | ||
| overlay: null, | ||
| overlaySolid: null, | ||
|
|
||
| black: COLORS.black, | ||
| white: COLORS.white, | ||
| }; | ||
|
|
||
| export const SECONDARY_COLORS_PROP_TYPES = PropTypes.oneOf( | ||
| Object.values(SECONDARY_COLORS), | ||
| ); | ||
|
|
||
| export default SECONDARY_COLORS; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import PRIMARY_COLORS from './primary'; | ||
| import SECONDARY_COLORS from './secondary'; | ||
|
|
||
| describe('theme colors', () => { | ||
| it('primary and secondary colors have the same number of properties', () => { | ||
| expect(Object.keys(PRIMARY_COLORS).length).toEqual( | ||
| Object.keys(SECONDARY_COLORS).length, | ||
| ); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export { default as primaryTheme } from './primary'; | ||
| export { default as secondaryTheme } from './secondary'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import PRIMARY_COLORS from '../colors/primary'; | ||
|
|
||
| export default { | ||
| __type: 'primary', | ||
| BOX_SHADOW: {}, | ||
| COLORS: PRIMARY_COLORS, | ||
| } as const; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import SECONDARY_COLORS from '../colors/secondary'; | ||
|
|
||
| export default { | ||
| __type: 'secondary', | ||
| BOX_SHADOW: {}, | ||
| COLORS: SECONDARY_COLORS, | ||
| } as const; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import primaryTheme from './primary'; | ||
| import secondaryTheme from './secondary'; | ||
|
|
||
| type BoxShadow = | ||
| | typeof primaryTheme['BOX_SHADOW'] | ||
| | typeof secondaryTheme['BOX_SHADOW']; | ||
|
|
||
| type Colors = typeof primaryTheme['COLORS'] | typeof secondaryTheme['COLORS']; | ||
|
|
||
| export type ThemeType = { | ||
| __type: 'primary' | 'secondary'; | ||
| BOX_SHADOW: BoxShadow; | ||
| COLORS: Colors; | ||
| }; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We will have to update our Usage documentation to note that all applications using
radiance-uineed to set up aThemeProviderat the top level of their App--or at least at the highest-level that makes use ofradiance-uicomponents: https://emotion.sh/docs/theming