Skip to content

Add token for slim border radius #4573

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 4, 2021
Merged

Add token for slim border radius #4573

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions UNRELEASED.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
### Enhancements

- Added helper hooks `useIndexTableRowHovered`, `useIndexTableRowSelected`, and `useIndexTableContainerScroll` to `IndexTable` ([#4286](https://github.com/Shopify/polaris-react/pull/4286))
- Added token for slim border radius ([#4573](https://github.com/Shopify/polaris-react/pull/4573))

### Bug fixes

Expand Down
43 changes: 22 additions & 21 deletions documentation/Color system.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ The surface role is used for the backgrounds of the UI. With a light color schem
| <pre>--p-surface-hovered</pre> | For use as a surface color on interactive elements such as resource list items and action list items when in a hovered state. | ![](https://www.gifpng.com/64x64/f6f6f7/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#f6f6f7 | ![](https://www.gifpng.com/64x64/2f3133/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#2f3133 |
| <pre>--p-surface-pressed</pre> | For use as a surface color on interactive elements such as resource list items and action list items when in a pressed state. | ![](https://www.gifpng.com/64x64/f1f2f3/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#f1f2f3 | ![](https://www.gifpng.com/64x64/3e4043/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#3e4043 |
| <pre>--p-surface-depressed</pre> | For use as a surface color on interactive elements such as resource list items and action list items when in a depressed state. | ![](https://www.gifpng.com/64x64/edeeef/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#edeeef | ![](https://www.gifpng.com/64x64/505356/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#505356 |
| <pre>--p-surface-search-field</pre> | For use as a background color, in components on surface elements such as SearchField | ![](https://www.gifpng.com/64x64/f1f2f3/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#f1f2f3 | ![](https://www.gifpng.com/64x64/2f3133/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#2f3133 |
| <pre>--p-backdrop</pre> | For use as the background color of the backdrop component for navigation and modal. This color has an alpha of `0.5`. | ![](https://www.gifpng.com/64x64/000000/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#000000 | ![](https://www.gifpng.com/64x64/000000/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#000000 |
| <pre>--p-overlay</pre> | For use as the background color of elements which lay on top of surfaces to obscure their contents. This color has an alpha of `0.5`. | ![](https://www.gifpng.com/64x64/ffffff/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#ffffff | ![](https://www.gifpng.com/64x64/212121/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#212121 |
| <pre>--p-shadow-from-dim-light</pre> | For use in building shadows for modals. This color has an alpha of `0.02`. | ![](https://www.gifpng.com/64x64/000000/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#000000 | ![](https://www.gifpng.com/64x64/ffffff/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#ffffff |
Expand All @@ -50,26 +51,25 @@ The surface role is used for the backgrounds of the UI. With a light color schem

The onSurface role is made up of elements which appear on top of a surface, including borders, secondary icons, and text. When a light surface is provided, onSurface values will be dark. When a dark surface is provided, onSurface values will be light.

| CSS variable | Description | Light mode | Dark mode |
| ------------------------------------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| <pre>--p-surface-search-field</pre> | For use as a background color, in components on surface elements such as SearchField | ![](https://www.gifpng.com/64x64/f1f2f3/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#f1f2f3 | ![](https://www.gifpng.com/64x64/2f3133/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#2f3133 |
| <pre>--p-border</pre> | For use as the default border on elements. | ![](https://www.gifpng.com/64x64/8c9196/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#8c9196 | ![](https://www.gifpng.com/64x64/505356/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#505356 |
| <pre>--p-border-neutral-subdued</pre> | For use as the border on banners. | ![](https://www.gifpng.com/64x64/babfc3/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#babfc3 | ![](https://www.gifpng.com/64x64/82878b/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#82878b |
| <pre>--p-border-hovered</pre> | Used for borders on hovered interactive elements | ![](https://www.gifpng.com/64x64/999ea4/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#999ea4 | ![](https://www.gifpng.com/64x64/505356/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#505356 |
| <pre>--p-border-disabled</pre> | Used for disabled borders on interactive elements | ![](https://www.gifpng.com/64x64/d2d5d8/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#d2d5d8 | ![](https://www.gifpng.com/64x64/676b6f/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#676b6f |
| <pre>--p-border-subdued</pre> | For use as a subdued border on elements. | ![](https://www.gifpng.com/64x64/c9cccf/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#c9cccf | ![](https://www.gifpng.com/64x64/82878b/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#82878b |
| <pre>--p-border-depressed</pre> | For use as a border on depressed elements. | ![](https://www.gifpng.com/64x64/575959/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#575959 | ![](https://www.gifpng.com/64x64/8e9191/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#8e9191 |
| <pre>--p-border-shadow</pre> | For use as an additional bottom border on elements. | ![](https://www.gifpng.com/64x64/aeb4b9/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#aeb4b9 | ![](https://www.gifpng.com/64x64/5b5f62/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#5b5f62 |
| <pre>--p-border-shadow-subdued</pre> | For use as an additional, subdued bottom border on elements. | ![](https://www.gifpng.com/64x64/babfc4/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#babfc4 | ![](https://www.gifpng.com/64x64/82878b/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#82878b |
| <pre>--p-divider</pre> | For use as a divider between elements. | ![](https://www.gifpng.com/64x64/e1e3e5/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#e1e3e5 | ![](https://www.gifpng.com/64x64/1a1c1d/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#1a1c1d |
| <pre>--p-icon</pre> | For use as the fill color of icons. | ![](https://www.gifpng.com/64x64/5c5f62/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#5c5f62 | ![](https://www.gifpng.com/64x64/a6acb2/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#a6acb2 |
| <pre>--p-icon-hovered</pre> | For use as the fill color of hovered icons. | ![](https://www.gifpng.com/64x64/1a1c1d/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#1a1c1d | ![](https://www.gifpng.com/64x64/e1e3e5/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#e1e3e5 |
| <pre>--p-icon-pressed</pre> | For use as the fill color of pressed icons. | ![](https://www.gifpng.com/64x64/44474a/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#44474a | ![](https://www.gifpng.com/64x64/a6acb2/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#a6acb2 |
| <pre>--p-icon-disabled</pre> | For use as the fill color of disabled icons. | ![](https://www.gifpng.com/64x64/babec3/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#babec3 | ![](https://www.gifpng.com/64x64/54575a/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#54575a |
| <pre>--p-icon-subdued</pre> | For use as the fill color of subdued icons. | ![](https://www.gifpng.com/64x64/8c9196/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#8c9196 | ![](https://www.gifpng.com/64x64/787d81/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#787d81 |
| <pre>--p-text</pre> | For use as a text color. | ![](https://www.gifpng.com/64x64/202223/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#202223 | ![](https://www.gifpng.com/64x64/e3e5e7/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#e3e5e7 |
| <pre>--p-text-disabled</pre> | For use as a disabled text color and as a placeholder text color. | ![](https://www.gifpng.com/64x64/8c9196/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#8c9196 | ![](https://www.gifpng.com/64x64/6f7377/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#6f7377 |
| <pre>--p-text-subdued</pre> | For use as a subdued text color. | ![](https://www.gifpng.com/64x64/6d7175/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#6d7175 | ![](https://www.gifpng.com/64x64/999fa4/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#999fa4 |
| CSS variable | Description | Light mode | Dark mode |
| ------------------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| <pre>--p-border</pre> | For use as the default border on elements. | ![](https://www.gifpng.com/64x64/8c9196/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#8c9196 | ![](https://www.gifpng.com/64x64/505356/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#505356 |
| <pre>--p-border-neutral-subdued</pre> | For use as the border on banners. | ![](https://www.gifpng.com/64x64/babfc3/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#babfc3 | ![](https://www.gifpng.com/64x64/82878b/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#82878b |
| <pre>--p-border-hovered</pre> | Used for borders on hovered interactive elements | ![](https://www.gifpng.com/64x64/999ea4/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#999ea4 | ![](https://www.gifpng.com/64x64/505356/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#505356 |
| <pre>--p-border-disabled</pre> | Used for disabled borders on interactive elements | ![](https://www.gifpng.com/64x64/d2d5d8/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#d2d5d8 | ![](https://www.gifpng.com/64x64/676b6f/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#676b6f |
| <pre>--p-border-subdued</pre> | For use as a subdued border on elements. | ![](https://www.gifpng.com/64x64/c9cccf/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#c9cccf | ![](https://www.gifpng.com/64x64/82878b/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#82878b |
| <pre>--p-border-depressed</pre> | For use as a border on depressed elements. | ![](https://www.gifpng.com/64x64/575959/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#575959 | ![](https://www.gifpng.com/64x64/8e9191/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#8e9191 |
| <pre>--p-border-shadow</pre> | For use as an additional bottom border on elements. | ![](https://www.gifpng.com/64x64/aeb4b9/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#aeb4b9 | ![](https://www.gifpng.com/64x64/5b5f62/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#5b5f62 |
| <pre>--p-border-shadow-subdued</pre> | For use as an additional, subdued bottom border on elements. | ![](https://www.gifpng.com/64x64/babfc4/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#babfc4 | ![](https://www.gifpng.com/64x64/82878b/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#82878b |
| <pre>--p-divider</pre> | For use as a divider between elements. | ![](https://www.gifpng.com/64x64/e1e3e5/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#e1e3e5 | ![](https://www.gifpng.com/64x64/454749/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#454749 |
| <pre>--p-icon</pre> | For use as the fill color of icons. | ![](https://www.gifpng.com/64x64/5c5f62/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#5c5f62 | ![](https://www.gifpng.com/64x64/a6acb2/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#a6acb2 |
| <pre>--p-icon-hovered</pre> | For use as the fill color of hovered icons. | ![](https://www.gifpng.com/64x64/1a1c1d/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#1a1c1d | ![](https://www.gifpng.com/64x64/e1e3e5/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#e1e3e5 |
| <pre>--p-icon-pressed</pre> | For use as the fill color of pressed icons. | ![](https://www.gifpng.com/64x64/44474a/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#44474a | ![](https://www.gifpng.com/64x64/a6acb2/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#a6acb2 |
| <pre>--p-icon-disabled</pre> | For use as the fill color of disabled icons. | ![](https://www.gifpng.com/64x64/babec3/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#babec3 | ![](https://www.gifpng.com/64x64/54575a/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#54575a |
| <pre>--p-icon-subdued</pre> | For use as the fill color of subdued icons. | ![](https://www.gifpng.com/64x64/8c9196/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#8c9196 | ![](https://www.gifpng.com/64x64/787d81/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#787d81 |
| <pre>--p-text</pre> | For use as a text color. | ![](https://www.gifpng.com/64x64/202223/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#202223 | ![](https://www.gifpng.com/64x64/e3e5e7/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#e3e5e7 |
| <pre>--p-text-disabled</pre> | For use as a disabled text color and as a placeholder text color. | ![](https://www.gifpng.com/64x64/8c9196/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#8c9196 | ![](https://www.gifpng.com/64x64/6f7377/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#6f7377 |
| <pre>--p-text-subdued</pre> | For use as a subdued text color. | ![](https://www.gifpng.com/64x64/6d7175/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#6d7175 | ![](https://www.gifpng.com/64x64/999fa4/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#999fa4 |

---

Expand Down Expand Up @@ -253,10 +253,11 @@ Used to decorate elements where color does convey a specific meaning in componen

[↑ Back to top](#table-of-contents)

### UNSTABLE these variables are being @deprecated
### UNSTABLE these may become @deprecated at any time

| CSS variable | Value |
| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| `--p-border-radius-slim` | `0.2rem` |
| `--p-border-radius-base` | `0.4rem` |
| `--p-border-radius-wide` | `0.8rem` |
| `--p-border-radius-full` | `50%` |
Expand Down
2 changes: 1 addition & 1 deletion scripts/color-system-docs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ const overridesContents = Object.entries(Tokens).reduce(
(accumulator, [override, value]) => {
return accumulator + Template.overrideItem(override, value);
},
'### UNSTABLE these variables are being @deprecated\n|CSS variable|Value|\n|---|---|\n',
'### UNSTABLE these may become @deprecated at any time\n|CSS variable|Value|\n|---|---|\n',
);

const data =
Expand Down
Loading