Update docs to use functional color variables #1111

VanAnderson · 2021-03-05T16:47:35Z

This PR updates the documentation to remove references to old color values.

It also updates some language to make the language around colors more functional and less specific to a particular theme. This work is concentrated in the commit d204e73.

There are a few area's that still need attention, putting some notes on this one.

Part of #1108

Tweak color in sidenav

changeset-bot · 2021-03-05T16:47:37Z

🦋 Changeset detected

Latest commit: 360e359

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2021-03-05T16:47:40Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/primer/primer-components/JB1zrtNhGP95HmLpdhWdsHBjUxHY
✅ Preview: https://primer-compone-git-vananderson-update-docs-for-functiona-0474b6.vercel.app

docs/content/Position.md

docs/content/Timeline.md

VanAnderson · 2021-03-05T17:05:15Z

docs/content/overriding-styles.mdx

@@ -2,17 +2,17 @@
 title: Overriding styles with the sx prop
 ---

-Our goal with Primer React is to hit the sweet spot between providing too little and too much styling flexibility; too little and the design system is too rigid, and too much and it becomes too difficult to maintain a consistent style. Our components already support a standard set of [system props](/system-props), but sometimes a component just isn't *quite* flexible enough to look the way you need it to look. For those cases, we provide the `sx` prop.
+Our goal with Primer React is to hit the sweet spot between providing too little and too much styling flexibility; too little and the design system is too rigid, and too much and it becomes too difficult to maintain a consistent style. Our components already support a standard set of [system props](/system-props), but sometimes a component just isn't _quite_ flexible enough to look the way you need it to look. For those cases, we provide the `sx` prop.


My default linter is really going to town on some of these files... not sure if I should try to tone it down?

I think it's fine 👍

VanAnderson · 2021-03-05T17:06:44Z

docs/content/StyledOcticon.md

+| Name          | Type      |    Default    | Description                                                                                                  |
+| :------------ | :-------- | :-----------: | :----------------------------------------------------------------------------------------------------------- |
+| ariaLabel     | String    |               | Specifies the `aria-label` attribute, which is read verbatim by screen readers                               |
+| icon          | Component |               | [Octicon component](https://github.com/primer/octicons/tree/master/lib/octicons_react) used in the component |
+| size          | Number    |      16       | Sets the uniform `width` and `height` of the SVG element                                                     |
+| verticalAlign | String    | `text-bottom` | Sets the `vertical-align` CSS property                                                                       |


linter is really working overtime, but I think the extra spacing here makes it much easier to read in an IDE.

VanAnderson · 2021-03-05T17:11:30Z

docs/content/Box.md

+  Box can be used to create both{' '}
+  <Box as="span" bg="bg.success">
+    inline
+  </Box>{' '}
+  and
+  <Box bg="bg.danger">block-level elements,</Box>
+  <Box bg="bg.warning" width={[1, 1, 1 / 2]}>
+    elements with fixed or responsive width and height,
+  </Box>
+  <Box bg="bg.info" p={4} mt={2}>
+    and more!
+  </Box>


Some of these functional color choices I was trying out end up being very light shades - we could maybe consider switching to [success/danger/info]Inverse?

Agreed. I think using the *Inverse colors for Box, Grid, and Flex examples is fine. We'd probably need to pair that with color="text.inverse" as well.

Tweak color in timeline timeline tweaks

colebemis · 2021-03-05T18:00:31Z

docs/content/Box.md

+  Box can be used to create both{' '}
+  <Box as="span" bg="bg.success">
+    inline
+  </Box>{' '}
+  and
+  <Box bg="bg.danger">block-level elements,</Box>
+  <Box bg="bg.warning" width={[1, 1, 1 / 2]}>
+    elements with fixed or responsive width and height,
+  </Box>
+  <Box bg="bg.info" p={4} mt={2}>
+    and more!
+  </Box>


Agreed. I think using the *Inverse colors for Box, Grid, and Flex examples is fine. We'd probably need to pair that with color="text.inverse" as well.

docs/content/LabelGroup.md

docs/content/Position.md

docs/content/SideNav.md

Co-authored-by: Cole Bemis <colebemis@github.com>

VanAnderson · 2021-03-08T20:03:15Z

yeah, much nicer!

colebemis · 2021-03-08T20:51:46Z

docs/content/ProgressBar.mdx

+| progress | Number  |                 | Used to set the size of the green bar                                                                                            |
+| barSize  | String  |    'default'    | Controls the height of the progress bar. Can be 'small', 'large', or 'default'. If omitted, height is set to the default height. |
+| inline   | Boolean |      false      | Styles the progress bar inline                                                                                                   |
+| bg       | String  | 'state.success' | Set the progress bar color, defaults to bg-green                                                                                 |


I just noticed that state.success is not a color that's defined in Primer Primitives. Let's see if we can find an alternative.

bg.successInverse might be the closest?

yep, looks good to me!

updated both docs and component in cbe8ca4

VanAnderson added 13 commits March 4, 2021 16:51

Use functional variables in documentation for BorderBox

85a6cbb

Use functional variables in documentation for Box

4eb4072

Use functional variables in documentation for CircleOcticon

d3aa1f1

Use functional variables in documentation for Flex

4bf7e0f

Use functional variables in documentation for Grid

d71cd30

Use functional variables in documentation for Label

8ee28cc

Use functional variables in documentation for LabelGroup

1c3f71a

Use functional variables in documentation for PointerBox

cab2433

Use functional variables in documentation for Position

2e96d5e

Use functional variables in documentation for ProgressBar

1979e1a

Use functional variables in documentation for SideNav

67e63d3

Tweak color in sidenav

Use functional variables in documentation for StyledOcticon

c546b19

Use functional variables in documentation for Text

e3238af

VanAnderson added the status: wip label Mar 5, 2021

VanAnderson commented Mar 5, 2021

View reviewed changes

docs/content/Position.md Outdated Show resolved Hide resolved

VanAnderson commented Mar 5, 2021

View reviewed changes

docs/content/Timeline.md Outdated Show resolved Hide resolved

VanAnderson commented Mar 5, 2021

View reviewed changes

VanAnderson mentioned this pull request Mar 5, 2021

Remove old theme variables #1108

Closed

8 tasks

VanAnderson added 3 commits March 5, 2021 11:33

Use functional variables in documentation for Timeline

dccfc6c

Tweak color in timeline timeline tweaks

Use functional variables in documentation for overriding styles

03e8cbf

further language tweaks

d204e73

VanAnderson force-pushed the VanAnderson/update-docs-for-functional-vars branch from 72508cc to d204e73 Compare March 5, 2021 17:33

vercel bot temporarily deployed to Preview March 5, 2021 17:36 Inactive

colebemis reviewed Mar 5, 2021

View reviewed changes

VanAnderson added 2 commits March 8, 2021 12:44

box docs colors use inverse text

38534d5

remove info badge from timeline docs

30453eb

VanAnderson added 3 commits March 8, 2021 13:51

Grid docs colors use inverse text

512f256

Flex docs colors use inverse text

06e60c7

Use solid colors for position docs

c074356

vercel bot temporarily deployed to Preview March 8, 2021 19:57 Inactive

More tweaks to documentation to adjust towards functional colors.

be95acc

Co-authored-by: Cole Bemis <colebemis@github.com>

vercel bot temporarily deployed to Preview March 8, 2021 20:02 Inactive

VanAnderson marked this pull request as ready for review March 8, 2021 20:03

Merge branch 'main' into VanAnderson/update-docs-for-functional-vars

e1e6a0e

vercel bot temporarily deployed to Preview March 8, 2021 20:06 Inactive

colebemis reviewed Mar 8, 2021

View reviewed changes

update ProgressBar color

cbe8ca4

vercel bot temporarily deployed to Preview March 8, 2021 20:58 Inactive

VanAnderson removed the status: wip label Mar 8, 2021

colebemis approved these changes Mar 9, 2021

View reviewed changes

Create fair-feet-know.md

360e359

VanAnderson merged commit 057a489 into main Mar 9, 2021

VanAnderson deleted the VanAnderson/update-docs-for-functional-vars branch March 9, 2021 20:02

github-actions bot mentioned this pull request Mar 9, 2021

Release Tracking #1116

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update docs to use functional color variables #1111

Update docs to use functional color variables #1111

VanAnderson commented Mar 5, 2021 •

edited

Loading

changeset-bot bot commented Mar 5, 2021 •

edited

Loading

vercel bot commented Mar 5, 2021 •

edited

Loading

VanAnderson Mar 5, 2021

colebemis Mar 5, 2021

VanAnderson Mar 5, 2021

VanAnderson Mar 5, 2021

colebemis Mar 5, 2021

colebemis Mar 5, 2021

VanAnderson commented Mar 8, 2021

colebemis Mar 8, 2021

colebemis Mar 8, 2021

VanAnderson Mar 8, 2021

VanAnderson Mar 8, 2021

Update docs to use functional color variables #1111

Update docs to use functional color variables #1111

Conversation

VanAnderson commented Mar 5, 2021 • edited Loading

changeset-bot bot commented Mar 5, 2021 • edited Loading

🦋 Changeset detected

vercel bot commented Mar 5, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

VanAnderson commented Mar 8, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

VanAnderson commented Mar 5, 2021 •

edited

Loading

changeset-bot bot commented Mar 5, 2021 •

edited

Loading

vercel bot commented Mar 5, 2021 •

edited

Loading