From aa118c9d5cae491829fe00b2aecb1fd7560c8f19 Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Thu, 4 Nov 2021 12:35:23 -0400 Subject: [PATCH] Add token for slim border radius --- UNRELEASED.md | 1 + documentation/Color system.md | 43 ++++++++++++++++++----------------- scripts/color-system-docs.js | 2 +- src/utilities/theme/tokens.ts | 1 + 4 files changed, 25 insertions(+), 22 deletions(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index 8f819fbec6e..9309a356ce5 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -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 diff --git a/documentation/Color system.md b/documentation/Color system.md index 8862a0b96ea..60acf505880 100644 --- a/documentation/Color system.md +++ b/documentation/Color system.md @@ -35,6 +35,7 @@ The surface role is used for the backgrounds of the UI. With a light color schem | 
--p-surface-hovered
| 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)
#f6f6f7 | ![](https://www.gifpng.com/64x64/2f3133/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#2f3133 | | 
--p-surface-pressed
| 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)
#f1f2f3 | ![](https://www.gifpng.com/64x64/3e4043/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#3e4043 | | 
--p-surface-depressed
| 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)
#edeeef | ![](https://www.gifpng.com/64x64/505356/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#505356 | +| 
--p-surface-search-field
| 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)
#f1f2f3 | ![](https://www.gifpng.com/64x64/2f3133/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#2f3133 | | 
--p-backdrop
| 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)
#000000 | ![](https://www.gifpng.com/64x64/000000/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#000000 | | 
--p-overlay
| 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)
#ffffff | ![](https://www.gifpng.com/64x64/212121/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#212121 | | 
--p-shadow-from-dim-light
| 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)
#000000 | ![](https://www.gifpng.com/64x64/ffffff/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#ffffff | @@ -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 | -| ------------------------------------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | -| 
--p-surface-search-field
| 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)
#f1f2f3 | ![](https://www.gifpng.com/64x64/2f3133/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#2f3133 | -| 
--p-border
| 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)
#8c9196 | ![](https://www.gifpng.com/64x64/505356/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#505356 | -| 
--p-border-neutral-subdued
| 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)
#babfc3 | ![](https://www.gifpng.com/64x64/82878b/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#82878b | -| 
--p-border-hovered
| 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)
#999ea4 | ![](https://www.gifpng.com/64x64/505356/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#505356 | -| 
--p-border-disabled
| 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)
#d2d5d8 | ![](https://www.gifpng.com/64x64/676b6f/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#676b6f | -| 
--p-border-subdued
| 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)
#c9cccf | ![](https://www.gifpng.com/64x64/82878b/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#82878b | -| 
--p-border-depressed
| 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)
#575959 | ![](https://www.gifpng.com/64x64/8e9191/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#8e9191 | -| 
--p-border-shadow
| 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)
#aeb4b9 | ![](https://www.gifpng.com/64x64/5b5f62/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#5b5f62 | -| 
--p-border-shadow-subdued
| 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)
#babfc4 | ![](https://www.gifpng.com/64x64/82878b/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#82878b | -| 
--p-divider
| 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)
#e1e3e5 | ![](https://www.gifpng.com/64x64/1a1c1d/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#1a1c1d | -| 
--p-icon
| 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)
#5c5f62 | ![](https://www.gifpng.com/64x64/a6acb2/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#a6acb2 | -| 
--p-icon-hovered
| 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)
#1a1c1d | ![](https://www.gifpng.com/64x64/e1e3e5/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#e1e3e5 | -| 
--p-icon-pressed
| 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)
#44474a | ![](https://www.gifpng.com/64x64/a6acb2/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#a6acb2 | -| 
--p-icon-disabled
| 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)
#babec3 | ![](https://www.gifpng.com/64x64/54575a/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#54575a | -| 
--p-icon-subdued
| 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)
#8c9196 | ![](https://www.gifpng.com/64x64/787d81/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#787d81 | -| 
--p-text
| For use as a text color. | ![](https://www.gifpng.com/64x64/202223/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)
#202223 | ![](https://www.gifpng.com/64x64/e3e5e7/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#e3e5e7 | -| 
--p-text-disabled
| 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)
#8c9196 | ![](https://www.gifpng.com/64x64/6f7377/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#6f7377 | -| 
--p-text-subdued
| 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)
#6d7175 | ![](https://www.gifpng.com/64x64/999fa4/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#999fa4 | +| CSS variable | Description | Light mode | Dark mode | +| ------------------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | +| 
--p-border
| 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)
#8c9196 | ![](https://www.gifpng.com/64x64/505356/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#505356 | +| 
--p-border-neutral-subdued
| 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)
#babfc3 | ![](https://www.gifpng.com/64x64/82878b/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#82878b | +| 
--p-border-hovered
| 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)
#999ea4 | ![](https://www.gifpng.com/64x64/505356/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#505356 | +| 
--p-border-disabled
| 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)
#d2d5d8 | ![](https://www.gifpng.com/64x64/676b6f/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#676b6f | +| 
--p-border-subdued
| 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)
#c9cccf | ![](https://www.gifpng.com/64x64/82878b/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#82878b | +| 
--p-border-depressed
| 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)
#575959 | ![](https://www.gifpng.com/64x64/8e9191/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#8e9191 | +| 
--p-border-shadow
| 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)
#aeb4b9 | ![](https://www.gifpng.com/64x64/5b5f62/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#5b5f62 | +| 
--p-border-shadow-subdued
| 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)
#babfc4 | ![](https://www.gifpng.com/64x64/82878b/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#82878b | +| 
--p-divider
| 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)
#e1e3e5 | ![](https://www.gifpng.com/64x64/454749/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#454749 | +| 
--p-icon
| 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)
#5c5f62 | ![](https://www.gifpng.com/64x64/a6acb2/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#a6acb2 | +| 
--p-icon-hovered
| 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)
#1a1c1d | ![](https://www.gifpng.com/64x64/e1e3e5/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#e1e3e5 | +| 
--p-icon-pressed
| 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)
#44474a | ![](https://www.gifpng.com/64x64/a6acb2/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#a6acb2 | +| 
--p-icon-disabled
| 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)
#babec3 | ![](https://www.gifpng.com/64x64/54575a/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#54575a | +| 
--p-icon-subdued
| 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)
#8c9196 | ![](https://www.gifpng.com/64x64/787d81/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#787d81 | +| 
--p-text
| For use as a text color. | ![](https://www.gifpng.com/64x64/202223/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)
#202223 | ![](https://www.gifpng.com/64x64/e3e5e7/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#e3e5e7 | +| 
--p-text-disabled
| 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)
#8c9196 | ![](https://www.gifpng.com/64x64/6f7377/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#6f7377 | +| 
--p-text-subdued
| 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)
#6d7175 | ![](https://www.gifpng.com/64x64/999fa4/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)
#999fa4 | --- @@ -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%` | diff --git a/scripts/color-system-docs.js b/scripts/color-system-docs.js index b703f400c13..4fdf6a43d11 100644 --- a/scripts/color-system-docs.js +++ b/scripts/color-system-docs.js @@ -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 = diff --git a/src/utilities/theme/tokens.ts b/src/utilities/theme/tokens.ts index 0a9f46d20f6..bf54642a951 100644 --- a/src/utilities/theme/tokens.ts +++ b/src/utilities/theme/tokens.ts @@ -1,5 +1,6 @@ export const Tokens = { // Border Radiuses + borderRadiusSlim: rem('2px'), borderRadiusBase: rem('4px'), borderRadiusWide: rem('8px'), borderRadiusFull: '50%',