-
Notifications
You must be signed in to change notification settings - Fork 584
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1115 from primer/VanAnderson/remove-old-color-vars
Remove old theme variables
- Loading branch information
Showing
26 changed files
with
330 additions
and
434 deletions.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| --- | ||
| '@primer/components': major | ||
| --- | ||
|
|
||
| Removes deprecated presentational theme variables in favor of _functional variables_ for styling components that are consistent across multiple themes. | ||
|
|
||
| ## Migration guide | ||
|
|
||
| If you don't use any color-related system props (e.g. `color`, `bg`, `borderColor`), all components should work without changes. If you're using color-related system props, you'll need to update them to use the new functional variables. Reference the tables below to see how old variables map to new functional variables. | ||
|
|
||
| If you have any questions, feel free to reach out in the #design-systems channel. | ||
|
|
||
| #### Text | ||
|
|
||
| | `v25` | `v26` | | ||
| | ------------------------ | ------------------------ | | ||
| | `color="text.gray"` | `color="text.secondary"` | | ||
| | `color="text.grayLight"` | `color="text.tertiary"` | | ||
| | `color="text.grayDark"` | `color="text.primary"` | | ||
| | `color="text.red"` | `color="text.danger"` | | ||
| | `color="text.white"` | `color="text.inverse"` | | ||
| | `color="gray.6"` | `color="text.secondary"` | | ||
| | `color="gray.5"` | `color="text.tertiary"` | | ||
| | `color="gray.9"` | `color="text.primary"` | | ||
| | `color="red.6"` | `color="text.danger"` | | ||
| | `color="white"` | `color="text.inverse"` | | ||
| | `color="blue.5"` | `color="text.link"` | | ||
| | `color="gray.4"` | `color="text.disabled"` | | ||
| | `color="green.5"` | `color="text.success"` | | ||
| | `color="yellow.8"` | `color="text.warning"` | | ||
|
|
||
| #### Icon | ||
|
|
||
| | `v25` | `v25` | | ||
| | ------------------ | ------------------------ | | ||
| | `color="gray.9"` | `color="icon.primary"` | | ||
| | `color="gray.6"` | `color="icon.secondary"` | | ||
| | `color="gray.4"` | `color="icon.tertiary"` | | ||
| | `color="blue.5"` | `color="icon.info"` | | ||
| | `color="red.5"` | `color="icon.danger"` | | ||
| | `color="green.6"` | `color="icon.success"` | | ||
| | `color="yellow.8"` | `color="icon.warning"` | | ||
|
|
||
| #### Border | ||
|
|
||
| | `v25` | `v26` | | ||
| | --------------------------------- | ------------------------------- | | ||
| | `borderColor="border.blue"` | `borderColor="border.info"` | | ||
| | `borderColor="border.blueLight"` | n/a | | ||
| | `borderColor="border.grayLight"` | `borderColor="border.primary"` | | ||
| | `borderColor="border.grayDark"` | `borderColor="border.tertiary"` | | ||
| | `borderColor="border.grayDarker"` | n/a | | ||
| | `borderColor="border.green"` | `borderColor="border.success"` | | ||
| | `borderColor="border.greenLight"` | n/a | | ||
| | `borderColor="border.purple"` | n/a | | ||
| | `borderColor="border.red"` | `borderColor="border.danger"` | | ||
| | `borderColor="border.redLight"` | n/a | | ||
| | `borderColor="border.white"` | `borderColor="border.inverse"` | | ||
| | `borderColor="border.whiteFace"` | n/a | | ||
| | `borderColor="border.yellow"` | `borderColor="border.warning"` | | ||
| | `borderColor="border.blackFade"` | `borderColor="fade.fg15"` | | ||
| | `borderColor="border.whiteFade"` | `borderCOlor="fade.white15"` | | ||
| | `borderColor="blue.5"` | `borderColor="border.info"` | | ||
| | `borderColor="gray.2"` | `borderColor="border.primary"` | | ||
| | `borderColor="gray.3"` | `borderColor="border.tertiary"` | | ||
| | `borderColor="green.4"` | `borderColor="border.success"` | | ||
| | `borderColor="red.5"` | `borderColor="border.danger"` | | ||
| | `borderColor="white"` | `borderColor="border.inverse"` | | ||
|
|
||
| #### Background | ||
|
|
||
| | `v25` | `v26` | | ||
| | ------------------- | ------------------------ | | ||
| | `bg="white"` | `bg="bg.primary"` | | ||
| | `bg="bg.grayLight"` | `bg="bg.secondary"` | | ||
| | `bg="bg.gray"` | `bg="bg.tertiary"` | | ||
| | `bg="bg.grayDark"` | `bg="bg.canvasInverse"` | | ||
| | `bg="blue.0"` | `bg="bg.info"` | | ||
| | `bg="blue.5"` | `bg="bg.infoInverse"` | | ||
| | `bg="red.0"` | `bg="bg.danger"` | | ||
| | `bg="red.5"` | `bg="bg.dangerInverse"` | | ||
| | `bg="green.1"` | `bg="bg.success"` | | ||
| | `bg="green.5"` | `bg="bg.successInverse"` | | ||
|
|
||
| #### Labels | ||
|
|
||
| _Note the change in pluralization from 'labels' to 'label'._ | ||
|
|
||
| | `v25` | `v26` | | ||
| | ----------------------------- | ------------------------------------- | | ||
| | `color="labels.grayDarkText"` | `color="label.primary.text` | | ||
| | `borderColor="labels.gray"` | `borderColor="label.primary.border` | | ||
| | `color="labels.grayText"` | `color="label.secondary.text` | | ||
| | `borderColor="labels.gray"` | `borderColor="label.secondary.border` | | ||
| | `color="labels.blueText"` | `color="label.info.text` | | ||
| | `borderColor="labels.blue"` | `borderColor="label.info.border` | | ||
| | `color="labels.greenText"` | `color="label.success.text` | | ||
| | `borderColor="labels.green"` | `borderColor="label.success.border` | | ||
| | `color="labels.yellowText"` | `color="label.warning.text` | | ||
| | `borderColor="labels.yellow"` | `borderColor="label.warning.border` | | ||
| | `color="labels.redText"` | `color="label.danger.text` | | ||
| | `borderColor="labels.red"` | `borderColor="label.danger.border` | | ||
| | `color="labels.orangeText"` | `color="label.primary.text` | | ||
| | `borderColor="labels.orange"` | `borderColor="label.primary.text` | | ||
| | `color="labels.pinkText"` | n/a | | ||
| | `borderColor="labels.pink"` | n/a | | ||
| | `color="labels.purpleText"` | n/a | | ||
| | `borderColor="labels.purple"` | n/a | | ||
|
|
||
| #### Counters | ||
|
|
||
| | `v25` | `v26` | | ||
| | --------------------- | -------------------- | | ||
| | `scheme="gray"` | `scheme="primary"` | | ||
| | `scheme="gray-light"` | `scheme="secondary"` | | ||
|
|
||
| #### Timeline | ||
|
|
||
| | `v25` | `v26` | | ||
| | ----------------------------------------- | ----------------------------- | | ||
| | `bg="red.5"` | `bg="prState.closed.bg"` | | ||
| | `bg="green.5"` | `bg="prState.open.bg"` | | ||
| | `bg="purple.5"` | `bg="prState.merged.bg"` | | ||
| | `bg="gray.5"` | `bg="prState.draft.bg"` | | ||
| | `color="white"` (context: closed PR icon) | `color="prState.closed.text"` | | ||
| | `color="white"` (context: open PR icon) | `color="prState.open.text"` | | ||
| | `color="white"` (context: merged PR icon) | `color="prState.merged.text"` | | ||
| | `color="white"` (context: merged PR icon) | `color="prState.draft.text"` | |
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
84 changes: 84 additions & 0 deletions
84
docs/src/@primer/gatsby-theme-doctocat/components/live-code.js
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,84 @@ | ||
| import {Absolute, Flex, Relative, Text} from '@primer/components' | ||
| import ClipboardCopy from '@primer/gatsby-theme-doctocat/src/components/clipboard-copy' | ||
| import LivePreviewWrapper from '@primer/gatsby-theme-doctocat/src/components/live-preview-wrapper' | ||
| import githubTheme from '@primer/gatsby-theme-doctocat/src/github' | ||
| import scope from '@primer/gatsby-theme-doctocat/src/live-code-scope' | ||
| import htmlReactParser from 'html-react-parser' | ||
| import React, {useState} from 'react' | ||
| import reactElementToJsxString from 'react-element-to-jsx-string' | ||
| import {LiveEditor, LiveError, LivePreview, LiveProvider} from 'react-live' | ||
| import {ThemeContext} from 'styled-components' | ||
|
|
||
| // Temporarily shadowing this file to update the border color of the live examples. | ||
| // We can remove this file when Doctocat uses functional color variables. | ||
|
|
||
| const languageTransformers = { | ||
| html: html => htmlToJsx(html), | ||
| jsx: jsx => wrapWithFragment(jsx) | ||
| } | ||
|
|
||
| function htmlToJsx(html) { | ||
| try { | ||
| const reactElement = htmlReactParser(removeNewlines(html)) | ||
| // The output of htmlReactParser could be a single React element | ||
| // or an array of React elements. reactElementToJsxString does not accept arrays | ||
| // so we have to wrap the output in React fragment. | ||
| return reactElementToJsxString(<>{reactElement}</>) | ||
| } catch (error) { | ||
| return wrapWithFragment(html) | ||
| } | ||
| } | ||
|
|
||
| function removeNewlines(string) { | ||
| return string.replace(/(\r\n|\n|\r)/gm, '') | ||
| } | ||
|
|
||
| function wrapWithFragment(jsx) { | ||
| // eslint-disable-next-line github/unescaped-html-literal | ||
| return `<React.Fragment>${jsx}</React.Fragment>` | ||
| } | ||
|
|
||
| function LiveCode({code, language, noinline}) { | ||
| const theme = React.useContext(ThemeContext) | ||
| const [liveCode, setLiveCode] = useState(code) | ||
| const handleChange = updatedLiveCode => setLiveCode(updatedLiveCode) | ||
|
|
||
| return ( | ||
| <Flex flexDirection="column" mb={3}> | ||
| <LiveProvider scope={scope} code={liveCode} transformCode={languageTransformers[language]} noInline={noinline}> | ||
| <Flex | ||
| sx={{ | ||
| border: '1px solid', | ||
| borderColor: 'border.primary', | ||
| borderTopRightRadius: 2, | ||
| borderTopLeftRadius: 2 | ||
| }} | ||
| > | ||
| <LivePreviewWrapper> | ||
| <LivePreview /> | ||
| </LivePreviewWrapper> | ||
| </Flex> | ||
| <Relative> | ||
| <LiveEditor | ||
| onChange={handleChange} | ||
| theme={githubTheme} | ||
| ignoreTabKey={true} | ||
| padding={theme.space[3]} | ||
| style={{ | ||
| fontFamily: theme.fonts.mono, | ||
| fontSize: '85%', | ||
| borderBottomLeftRadius: theme.radii[2], | ||
| borderBottomRightRadius: theme.radii[2] | ||
| }} | ||
| /> | ||
| <Absolute top={0} right={0} p={2}> | ||
| <ClipboardCopy value={liveCode} /> | ||
| </Absolute> | ||
| </Relative> | ||
| <Text as={LiveError} m={0} p={3} fontFamily="mono" fontSize={1} color="white" bg="red.5" /> | ||
| </LiveProvider> | ||
| </Flex> | ||
| ) | ||
| } | ||
|
|
||
| export default LiveCode |
12 changes: 9 additions & 3 deletions
12
docs/src/@primer/gatsby-theme-doctocat/components/wrap-page-element.js
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 |
|---|---|---|
|
|
@@ -1599,6 +1599,11 @@ | |
| resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-3.0.0.tgz#ccfb324b478b2373733535ec49f8de29e238c55d" | ||
| integrity sha512-ISXB43vcA+kg5pmGtGo3lPlHmY5Mg9nLhliePJu3Y5aP7g28TO+9cC99gL240pZHYsO0aVyU26WZwUXn6UIqJQ== | ||
|
|
||
| "@primer/[email protected]": | ||
| version "4.1.0" | ||
| resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-4.1.0.tgz#33d83b38e2021f294f446c41bca65f5d7ffd898a" | ||
| integrity sha512-bACUj3Xl2z5dnYKE/76BpNqN4/JXFngf26dbb7Goph2PU5wcf+Z2Kk3nXwtJPGG8JByO+FcU3gpZjLNoyuLMHQ== | ||
|
|
||
| "@reach/component-component@^0.3.0": | ||
| version "0.3.0" | ||
| resolved "https://registry.yarnpkg.com/@reach/component-component/-/component-component-0.3.0.tgz#ccf593e26132cbec0ad92774b80356dcf544d5c5" | ||
|
|
@@ -4910,6 +4915,11 @@ deep-is@~0.1.3: | |
| resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34" | ||
| integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ= | ||
|
|
||
| [email protected]: | ||
| version "4.2.2" | ||
| resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955" | ||
| integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg== | ||
|
|
||
| default-gateway@^4.2.0: | ||
| version "4.2.0" | ||
| resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b" | ||
|
|
||
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
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
Oops, something went wrong.
a469b85There 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.
Successfully deployed to the following URLs: