diff --git a/documentation/Color system.md b/documentation/Color system.md
deleted file mode 100644
index 9f9f36c4305..00000000000
--- a/documentation/Color system.md
+++ /dev/null
@@ -1,295 +0,0 @@
-## Table of contents
-
-- [surface](#surface)
-- [onSurface](#onSurface)
-- [interactive](#interactive)
-- [secondary](#secondary)
-- [primary](#primary)
-- [critical](#critical)
-- [warning](#warning)
-- [highlight](#highlight)
-- [success](#success)
-- [decorative](#decorative)
-- [Overrides](#Overrides)
-
-## surface
-
-[↑ Back to top](#table-of-contents)
-
-The surface role is used for the backgrounds of the UI. With a light color scheme, surface colors are nearly white, while in a dark color scheme, surface colors are nearly black. The color passed to the surface role impacts the rest of the color roles and their variants, adjusting them for light or dark contexts.
-
-| CSS variable | Description | Light mode | Dark mode |
-| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| --p-background
| For use as a background color, in components such as Page and Frame backgrounds. | 
#f6f6f7 | 
#0b0c0d |
-| --p-background-hovered
| For use when an action or navigation is used on a background. | 
#f1f2f3 | 
#0b0c0d |
-| --p-background-pressed
| For use when an action or navigation is used on a background. | 
#edeeef | 
#0b0c0d |
-| --p-background-selected
| For use in the selected item in navigation | 
#edeeef | 
#0b0c0d |
-| --p-surface
| For use as a background color, in components such as Card, Modal, and Popover. | 
#ffffff | 
#202123 |
-| --p-surface-neutral
| For use as a background color in neutral badges. | 
#e4e5e7 | 
#313335 |
-| --p-surface-neutral-hovered
| For use as a hovered background color in neutral badges. | 
#dbdddf | 
#313335 |
-| --p-surface-neutral-pressed
| For use as a pressed background color in neutral badges. | 
#c9ccd0 | 
#313335 |
-| --p-surface-neutral-disabled
| For use as a disabled background color in neutral badges. | 
#f1f2f3 | 
#313335 |
-| --p-surface-neutral-subdued
| For use as a background color in neutral banners. | 
#f6f6f7 | 
#44474a |
-| --p-surface-subdued
| For use as a subdued background color, in components such as Card, Modal, and Popover. | 
#fafbfb | 
#1a1c1d |
-| --p-surface-disabled
| For use as a surface color on disabled interactive elements such as option list items and action list items when in a disabled state. | 
#fafbfb | 
#1a1c1d |
-| --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. | 
#f6f6f7 | 
#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. | 
#f1f2f3 | 
#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. | 
#edeeef | 
#505356 |
-| --p-surface-search-field
| For use as a background color, in components on surface elements such as SearchField | 
#f1f2f3 | 
#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`. | 
#000000 | 
#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`. | 
#ffffff | 
#212121 |
-| --p-shadow-from-dim-light
| For use in building shadows for modals. This color has an alpha of `0.02`. | 
#000000 | 
#ffffff |
-| --p-shadow-from-ambient-light
| For use in building shadows for popovers, and cards. This color has an alpha of `0.05`. | 
#171818 | 
#171818 |
-| --p-shadow-from-direct-light
| For use in building shadows for popovers and cards. This color has an alpha of `0.15`. | 
#000000 | 
#ffffff |
-| --p-hint-from-direct-light
| For use in building shadows scrollables. | 
#000000 | 
#b9b9b9 |
-
----
-
-## onSurface
-
-[↑ Back to top](#table-of-contents)
-
-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-border
| For use as the default border on elements. | 
#8c9196 | 
#505356 |
-| --p-border-neutral-subdued
| For use as the border on banners. | 
#babfc3 | 
#82878b |
-| --p-border-hovered
| Used for borders on hovered interactive elements | 
#999ea4 | 
#505356 |
-| --p-border-disabled
| Used for disabled borders on interactive elements | 
#d2d5d8 | 
#676b6f |
-| --p-border-subdued
| For use as a subdued border on elements. | 
#c9cccf | 
#82878b |
-| --p-border-depressed
| For use as a border on depressed elements. | 
#575959 | 
#8e9191 |
-| --p-border-shadow
| For use as an additional bottom border on elements. | 
#aeb4b9 | 
#5b5f62 |
-| --p-border-shadow-subdued
| For use as an additional, subdued bottom border on elements. | 
#babfc4 | 
#82878b |
-| --p-divider
| For use as a divider between elements. | 
#e1e3e5 | 
#454749 |
-| --p-icon
| For use as the fill color of icons. | 
#5c5f62 | 
#a6acb2 |
-| --p-icon-hovered
| For use as the fill color of hovered icons. | 
#1a1c1d | 
#e1e3e5 |
-| --p-icon-pressed
| For use as the fill color of pressed icons. | 
#44474a | 
#a6acb2 |
-| --p-icon-disabled
| For use as the fill color of disabled icons. | 
#babec3 | 
#54575a |
-| --p-icon-subdued
| For use as the fill color of subdued icons. | 
#8c9196 | 
#787d81 |
-| --p-text
| For use as a text color. | 
#202223 | 
#e3e5e7 |
-| --p-text-disabled
| For use as a disabled text color and as a placeholder text color. | 
#8c9196 | 
#6f7377 |
-| --p-text-subdued
| For use as a subdued text color. | 
#6d7175 | 
#999fa4 |
-
----
-
-## interactive
-
-[↑ Back to top](#table-of-contents)
-
-The interactive role is used to express interactivity in components. It is used in links, as an indicator of focus, and as an indicator of selected interactive states.
-
-| CSS variable | Description | Light mode | Dark mode |
-| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| --p-interactive
| Used for links, plain buttons, and as the fill color for selected checkboxes and radio buttons. | 
#2c6ecb | 
#36a3ff |
-| --p-interactive-disabled
| Used for disabled links and plain buttons. | 
#bdc1cc | 
#2662b6 |
-| --p-interactive-hovered
| Used for hovered links and plain buttons. | 
#1f5199 | 
#67afff |
-| --p-interactive-pressed
| Used for pressed links and plain buttons. | 
#103262 | 
#88bcff |
-| --p-focused
| For use in the focus ring on interactive elements. | 
#458fff | 
#2662b6 |
-| --p-surface-selected
| For use as a surface color in selected interactive elements, in components such as action list and resource list. | 
#f2f7fe | 
#020e23 |
-| --p-surface-selected-hovered
| For use as a surface color in selected interactive elements that are hovered, in components such as action list and resource list. | 
#edf4fe | 
#071d3d |
-| --p-surface-selected-pressed
| For use as a surface color in selected interactive elements that are pressed, in components such as action list and resource list. | 
#e5effd | 
#0d2b56 |
-| --p-icon-on-interactive
| For use as a fill color for icons on interactive elements. | 
#ffffff | 
#ffffff |
-| --p-text-on-interactive
| For use as a text color on interactive elements. | 
#ffffff | 
#ffffff |
-
----
-
-## secondary
-
-[↑ Back to top](#table-of-contents)
-
-A secondary interactive color role, for use in secondary and tertiary buttons as a background color, as well as in form elements as a background color.
-
-| CSS variable | Description | Light mode | Dark mode |
-| ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| --p-action-secondary
| Used for secondary buttons and tertiary buttons, as well as in form elements as a background color and pontentially other secondary surfaces. | 
#ffffff | 
#4d5053 |
-| --p-action-secondary-disabled
| Used as a disabled state for secondary buttons | 
#ffffff | 
#202223 |
-| --p-action-secondary-hovered
| Used as a hovered state for secondary buttons | 
#f6f6f7 | 
#54575b |
-| --p-action-secondary-pressed
| Used as a pressed state for secondary buttons | 
#f1f2f3 | 
#606467 |
-| --p-action-secondary-depressed
| Used as a depressed state for secondary buttons | 
#6d7175 | 
#7b7f84 |
-
----
-
-## primary
-
-[↑ Back to top](#table-of-contents)
-
-A primary interactive color, for use in primary buttons as a background color. Also used in navigation and tabs for icons, and for a surface color when in a selected state.
-
-| CSS variable | Description | Light mode | Dark mode |
-| ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| --p-action-primary
| Used as the background color for primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states. | 
#008060 | 
#008060 |
-| --p-action-primary-disabled
| Used as the background color for disabled primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states. | 
#f1f1f1 | 
#005640 |
-| --p-action-primary-hovered
| Used as the background color for hovered primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states. | 
#006e52 | 
#009671 |
-| --p-action-primary-pressed
| Used as the background color for pressed primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states. | 
#005e46 | 
#00a47c |
-| --p-action-primary-depressed
| Used as the background color for pressed primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states. | 
#003d2c | 
#00b388 |
-| --p-icon-on-primary
| For use as a fill color for icons on primary actions. Not for use in icons on navigation and tabs. | 
#ffffff | 
#e6fff4 |
-| --p-text-on-primary
| For use as a text color on primary actions. Not for use in text on navigation and tabs. | 
#ffffff | 
#ffffff |
-| --p-text-primary
| For use as primary text color on background. For use in text in components such as Navigation. | 
#007b5c | 
#008d6a |
-| --p-text-primary-hovered
| For use as primary hovered text color on background. For use in text in components such as Navigation. | 
#006c50 | 
#009e78 |
-| --p-text-primary-pressed
| For use as primary pressed text color on background. For use in text in components such as Navigation. | 
#005c44 | 
#00b085 |
-| --p-surface-primary-selected
| Used as a surface color to indicate selected interactive states in navigation and tabs. | 
#f1f8f5 | 
#0c1210 |
-| --p-surface-primary-selected-hovered
| Used as a surface color to indicate selected interactive states that are hovered in navigation and tabs. | 
#b3d0c3 | 
#28302c |
-| --p-surface-primary-selected-pressed
| Used as a surface color to indicate selected interactive states that are pressed in navigation and tabs. | 
#a2bcb0 | 
#36403b |
-
----
-
-## critical
-
-[↑ Back to top](#table-of-contents)
-
-Used to communicate destructive outcomes on interactive elements, for communicating errors, and to indicate a critical event in inert elements that requires immediate merchant action.
-
-| CSS variable | Description | Light mode | Dark mode |
-| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| --p-border-critical
| For use as a border on critical components such as an outline on interactive elements in an error state. | 
#fd5749 | 
#e32f0e |
-| --p-border-critical-subdued
| For use as a border on critical components such as banners. | 
#e0b3b2 | 
#e32f0e |
-| --p-border-critical-disabled
| For use as a disabled border on critical components such as banners, and as an outline on interactive elements in an error state. | 
#ffa7a3 | 
#831704 |
-| --p-icon-critical
| For use as an icon fill color on top of critical elements. | 
#d72c0d | 
#da2d0d |
-| --p-surface-critical
| For use as a surface color on critical elements including badges. | 
#fed3d1 | 
#450701 |
-| --p-surface-critical-subdued
| For use as a subdued surface color on critical elements including banners. | 
#fff4f4 | 
#450701 |
-| --p-surface-critical-subdued-hovered
| For use as a surface color on critical interactive elements including action list items in a hovered state. | 
#fff0f0 | 
#441714 |
-| --p-surface-critical-subdued-pressed
| For use as a surface color on critical interactive elements including action list items in a pressed state. | 
#ffe9e8 | 
#6b1003 |
-| --p-surface-critical-subdued-depressed
| For use as a surface color on critical interactive elements including action list items in a depressed state. | 
#febcb9 | 
#871805 |
-| --p-text-critical
| For use as a text color in inert critical elements such as exception list. Not for use as a text color on banners and badges. | 
#d72c0d | 
#e9807a |
-| --p-action-critical
| For use as the background color for destructive buttons, and as the background color for error toast messages. | 
#d82c0d | 
#cd290c |
-| --p-action-critical-disabled
| For use as the background color for disabled destructive buttons, and as the background color for error toast messages. | 
#f1f1f1 | 
#bb250a |
-| --p-action-critical-hovered
| For use as the background color for hovered destructive buttons, and as the background color for error toast messages. | 
#bc2200 | 
#e32f0e |
-| --p-action-critical-pressed
| For use as the background color for pressed destructive buttons, and as the background color for error toast messages. | 
#a21b00 | 
#fa3511 |
-| --p-action-critical-depressed
| For use as the background color for depressed destructive buttons, and as the background color for error toast messages. | 
#6c0f00 | 
#fd5749 |
-| --p-icon-on-critical
| For use as a fill color for icons on critical actions. | 
#ffffff | 
#fff8f7 |
-| --p-text-on-critical
| For use as a text color on critical actions. | 
#ffffff | 
#ffffff |
-| --p-interactive-critical
| For use as the text color for destructive interactive elements: links, plain buttons, error state of selected checkboxes and radio buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges. | 
#d82c0d | 
#fd726a |
-| --p-interactive-critical-disabled
| For use as a text color in disabled destructive plain buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges. | 
#fd938d | 
#feaca8 |
-| --p-interactive-critical-hovered
| For use as a text color in hovered destructive plain buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges. | 
#cd290c | 
#fd8a84 |
-| --p-interactive-critical-pressed
| For use as a text color in pressed destructive plain buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges. | 
#670f03 | 
#fd9f9b |
-
----
-
-## warning
-
-[↑ Back to top](#table-of-contents)
-
-For use as an indicator that action should be taken by merchants in components including badges, banners, and exception lists.
-
-| CSS variable | Description | Light mode | Dark mode |
-| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| --p-border-warning
| For use as a border on warning components such as... | 
#b98900 | 
#997000 |
-| --p-border-warning-subdued
| For use as a border on warning components such as banners. | 
#e1b878 | 
#997000 |
-| --p-icon-warning
| For use as an icon fill color on top of warning elements. | 
#b98900 | 
#684b00 |
-| --p-surface-warning
| For use as a surface color on warning elements including badges. | 
#ffd79d | 
#997000 |
-| --p-surface-warning-subdued
| For use as a subdued surface color on warning elements including banners. | 
#fff5ea | 
#4d3b1d |
-| --p-surface-warning-subdued-hovered
| For use as a subdued surface color on warning elements including banners. | 
#fff2e2 | 
#523f20 |
-| --p-surface-warning-subdued-pressed
| For use as a subdued surface color on warning elements including banners. | 
#ffebd3 | 
#574322 |
-| --p-text-warning
| For use as a text color in inert critical elements such as exception list. Not for use as a text color on banners and badges. | 
#916a00 | 
#ca9500 |
-
----
-
-## highlight
-
-[↑ Back to top](#table-of-contents)
-
-Used to highlight elements of the UI that are important for merchants, but do not require immediate action. Used in information banners and badges, indicators that draw attention to new information, bars that indicate loading or progress, and in data visualization.
-
-| CSS variable | Description | Light mode | Dark mode |
-| ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| --p-border-highlight
| For use as a border on informational components such as... | 
#449da7 | 
#449da7 |
-| --p-border-highlight-subdued
| For use as a border on informational components such as banners. | 
#98c6cd | 
#449da7 |
-| --p-icon-highlight
| For use as an icon fill color on top of informational elements. | 
#00a0ac | 
#2c6c73 |
-| --p-surface-highlight
| For use as a surface color on information elements including badges. | 
#a4e8f2 | 
#006971 |
-| --p-surface-highlight-subdued
| For use as a surface color on information elements including banners. | 
#ebf9fc | 
#123539 |
-| --p-surface-highlight-subdued-hovered
| For use as a surface color on information elements including banners. | 
#e4f7fa | 
#143a3e |
-| --p-surface-highlight-subdued-pressed
| For use as a surface color on information elements including banners. | 
#d5f3f8 | 
#184146 |
-| --p-text-highlight
| For use as a text color in inert informational elements. Not for use as a text color on banners and badges. | 
#347c84 | 
#a2effa |
-
----
-
-## success
-
-[↑ Back to top](#table-of-contents)
-
-Used to indicate the result of a successful action taken by a merchant, to indicate a positive event, or to illustrate growth.
-
-| CSS variable | Description | Light mode | Dark mode |
-| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| --p-border-success
| For use as a border on success components such as text inputs. | 
#00a47c | 
#008766 |
-| --p-border-success-subdued
| For use as a border on success components such as banners. | 
#95c9b4 | 
#008766 |
-| --p-icon-success
| For use as an icon fill color on top of success elements. | 
#007f5f | 
#005e46 |
-| --p-surface-success
| For use as a surface color on success elements including badges. | 
#aee9d1 | 
#005e46 |
-| --p-surface-success-subdued
| For use as a surface color on information elements including banners. | 
#f1f8f5 | 
#1c352c |
-| --p-surface-success-subdued-hovered
| For use as a surface color on information elements including banners. | 
#ecf6f1 | 
#1f3a30 |
-| --p-surface-success-subdued-pressed
| For use as a surface color on information elements including banners. | 
#e2f1ea | 
#234136 |
-| --p-text-success
| For use as a text color in inert success elements. Not for use as a text color on banners and badges. | 
#008060 | 
#58ad8e |
-
----
-
-## decorative
-
-[↑ Back to top](#table-of-contents)
-
-Used to decorate elements where color does convey a specific meaning in components like avatars
-
-| CSS variable | Description | Light mode | Dark mode |
-| --------------------------------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| --p-decorative-one-icon
| For use as a decorative icon color that is applied on a decorative surface. | 
#7e5700 | 
#ffba43 |
-| --p-decorative-one-surface
| For use as a decorative surface color. | 
#ffc96b | 
#8e6609 |
-| --p-decorative-one-text
| For use as a decorative text color that is applied on a decorative surface. | 
#3d2800 | 
#ffffff |
-| --p-decorative-two-icon
| For use as a decorative icon color that is applied on a decorative surface. | 
#af294e | 
#f5b6c0 |
-| --p-decorative-two-surface
| For use as a decorative surface color. | 
#ffc4b0 | 
#ce5814 |
-| --p-decorative-two-text
| For use as a decorative text color that is applied on a decorative surface. | 
#490b1c | 
#ffffff |
-| --p-decorative-three-icon
| For use as a decorative icon color that is applied on a decorative surface. | 
#006d41 | 
#00e38d |
-| --p-decorative-three-surface
| For use as a decorative surface color. | 
#92e6b5 | 
#007c5a |
-| --p-decorative-three-text
| For use as a decorative text color that is applied on a decorative surface. | 
#002f19 | 
#ffffff |
-| --p-decorative-four-icon
| For use as a decorative icon color that is applied on a decorative surface. | 
#006a68 | 
#00ddda |
-| --p-decorative-four-surface
| For use as a decorative surface color. | 
#91e0d6 | 
#167c79 |
-| --p-decorative-four-text
| For use as a decorative text color that is applied on a decorative surface. | 
#002d2d | 
#ffffff |
-| --p-decorative-five-icon
| For use as a decorative icon color that is applied on a decorative surface. | 
#ae2b4c | 
#f4b7bf |
-| --p-decorative-five-surface
| For use as a decorative surface color. | 
#fdc9d0 | 
#c23356 |
-| --p-decorative-five-text
| For use as a decorative text color that is applied on a decorative surface. | 
#4f0e1f | 
#ffffff |
-
----
-
-## Overrides
-
-[↑ Back to top](#table-of-contents)
-
-### 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%` |
-| `--p-font-weight-regular` | `400` |
-| `--p-font-weight-medium` | `500` |
-| `--p-font-weight-semibold` | `600` |
-| `--p-font-weight-bold` | `700` |
-| `--p-card-shadow` | `0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light)` |
-| `--p-popover-shadow` | `-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light)` |
-| `--p-modal-shadow` | `0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light)` |
-| `--p-top-bar-shadow` | `0 2px 2px -1px var(--p-shadow-from-direct-light)` |
-| `--p-button-drop-shadow` | `0 1px 0 rgba(0, 0, 0, 0.05)` |
-| `--p-button-inner-shadow` | `inset 0 -1px 0 rgba(0, 0, 0, 0.2)` |
-| `--p-button-pressed-inner-shadow` | `inset 0 1px 0 rgba(0, 0, 0, 0.15)` |
-| `--p-override-loading-z-index` | `514` |
-| `--p-choice-size` | `2rem` |
-| `--p-icon-size` | `1rem` |
-| `--p-choice-margin` | `0.1rem` |
-| `--p-control-border-width` | `0.2rem` |
-| `--p-banner-border-default` | `inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued)` |
-| `--p-banner-border-success` | `inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued)` |
-| `--p-banner-border-highlight` | `inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued)` |
-| `--p-banner-border-warning` | `inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued)` |
-| `--p-banner-border-critical` | `inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued)` |
-| `--p-thin-border-subdued` | `0.1rem solid var(--p-border-subdued)` |
-| `--p-text-field-spinner-offset` | `0.2rem` |
-| `--p-text-field-focus-ring-offset` | `-0.4rem` |
-| `--p-text-field-focus-ring-border-radius` | `0.7rem` |
-| `--p-button-group-item-spacing` | `-0.1rem` |
-| `--p-duration-100` | `100ms` |
-| `--p-duration-150` | `150ms` |
-| `--p-ease-in` | `cubic-bezier(0.5, 0.1, 1, 1)` |
-| `--p-ease` | `cubic-bezier(0.4, 0.22, 0.28, 1)` |
-| `--p-range-slider-thumb-size-base` | `1.6rem` |
-| `--p-range-slider-thumb-size-active` | `2.4rem` |
diff --git a/package.json b/package.json
index becbba76d65..50186c6d9d0 100644
--- a/package.json
+++ b/package.json
@@ -63,10 +63,7 @@
"readme-update-version": "node ./scripts/readme-update-version",
"version": "yarn run readme-update-version",
"storybook": "start-storybook -p 6006 --quiet",
- "storybook:build": "yarn run copy-polaris-tokens && build-storybook -o build-internal/storybook/static",
- "precolordocs": "yarn run build",
- "colordocs": "node ./scripts/color-system-docs",
- "postcolordocs": "yarn run format"
+ "storybook:build": "yarn run copy-polaris-tokens && build-storybook -o build-internal/storybook/static"
},
"dependencies": {
"@shopify/polaris-icons": "^4.10.0",
diff --git a/pre-commit b/pre-commit
index d9afae53643..fda17a3e579 100755
--- a/pre-commit
+++ b/pre-commit
@@ -1,14 +1,12 @@
#!/usr/bin/ruby --disable-gems
NON_COMMITTABLE_FILE_PATHS = ['playground/Playground.tsx']
-COLOR_DOC_SOURCE_FILE_PATHS = ['src/utilities/theme/tokens.ts']
module PreCommit
extend self
def main
ignore_playground
- generate_color_docs
end
private
@@ -24,16 +22,6 @@ module PreCommit
end
end
- def generate_color_docs
- changed_files.each do |path|
- if COLOR_DOC_SOURCE_FILE_PATHS.include? path
- puts "Color system changes detected. Generating new docs (may take a couple minutes)..."
- %x(yarn run colordocs)
- %x(git add "documentation/Color system.md")
- end
- end
- end
-
def changed_files
@changed_files ||= %x(git diff --cached --name-only HEAD).lines.map(&:chomp)
end
diff --git a/scripts/color-system-docs.js b/scripts/color-system-docs.js
deleted file mode 100644
index 4fdf6a43d11..00000000000
--- a/scripts/color-system-docs.js
+++ /dev/null
@@ -1,135 +0,0 @@
-const {resolve: resolvePath} = require('path');
-
-const {writeFileSync} = require('fs-extra');
-const {
- config: roleVariants,
-} = require('@shopify/polaris-tokens/dist-modern/configs/base');
-const theme = require('@shopify/polaris-tokens/dist-modern/theme/base.json');
-const {colorFactory} = require('@shopify/polaris-tokens/dist-modern');
-
-const {
- rgbToHex,
- UNSTABLE_toCssCustomPropertySyntax: cssify,
- UNSTABLE_Tokens: Tokens,
-} = require('../');
-
-const ColorSwatch = {
- Width: 32,
- Height: 32,
- Padding: 16,
-};
-
-const RoleDescription = {
- surface:
- 'The surface role is used for the backgrounds of the UI. With a light color scheme, surface colors are nearly white, while in a dark color scheme, surface colors are nearly black. The color passed to the surface role impacts the rest of the color roles and their variants, adjusting them for light or dark contexts.',
- onSurface:
- '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.',
- interactive:
- 'The interactive role is used to express interactivity in components. It is used in links, as an indicator of focus, and as an indicator of selected interactive states.',
- secondary:
- 'A secondary interactive color role, for use in secondary and tertiary buttons as a background color, as well as in form elements as a background color.',
- primary:
- 'A primary interactive color, for use in primary buttons as a background color. Also used in navigation and tabs for icons, and for a surface color when in a selected state.',
- critical:
- 'Used to communicate destructive outcomes on interactive elements, for communicating errors, and to indicate a critical event in inert elements that requires immediate merchant action.',
- warning:
- 'For use as an indicator that action should be taken by merchants in components including badges, banners, and exception lists.',
- highlight:
- 'Used to highlight elements of the UI that are important for merchants, but do not require immediate action. Used in information banners and badges, indicators that draw attention to new information, bars that indicate loading or progress, and in data visualization.',
- success:
- 'Used to indicate the result of a successful action taken by a merchant, to indicate a positive event, or to illustrate growth.',
- decorative:
- 'Used to decorate elements where color does convey a specific meaning in components like avatars',
-};
-
-const lightColors = colorFactory(theme, 'light');
-const darkColors = colorFactory(theme, 'dark');
-
-const Template = {
- tocItem: (name) => `- [${name}](#${name})\n`,
- section: (name, description) =>
- `## ${name}\n\n[↑ Back to top](#table-of-contents)\n\n${
- description ? `${description}\n\n` : ''
- }`,
- heading:
- '|CSS variable|Description|Light mode|Dark mode|\n|---|---|---|---|\n',
- hr: '\n\n---\n\n',
- variant: (name, description, light, dark) => {
- const {Width, Height, Padding} = ColorSwatch;
- const size = `${Width + Padding * 2}x${Height + Padding * 2}`;
-
- return `|${cssify(
- name,
- )}|${description} |}&text=%20)
#${light}|}&text=%20)
#${dark}|\n`;
- },
- overrideItem: (name, value) => `|\`${cssify(name)}\`|\`${value}\`|\n`,
-};
-
-const tocTitle = '## Table of contents\n\n';
-
-const tocContents = Object.keys(roleVariants).reduce(
- (accumulator, role) => accumulator + Template.tocItem(role),
- '',
-);
-
-const contents = Object.entries(roleVariants).reduce(
- (tableMarkdown, [role, variants]) => {
- const children = variants.reduce((rowMarkdown, variant) => {
- const light = toHex(lightColors[variant.name]);
- const dark = toHex(darkColors[variant.name]);
-
- return (
- rowMarkdown +
- Template.variant(variant.name, variant.description, light, dark)
- );
- }, '');
-
- return (
- tableMarkdown +
- Template.section(role, RoleDescription[role]) +
- Template.heading +
- children +
- Template.hr
- );
- },
- '',
-);
-
-const overridesContents = Object.entries(Tokens).reduce(
- (accumulator, [override, value]) => {
- return accumulator + Template.overrideItem(override, value);
- },
- '### UNSTABLE these may become @deprecated at any time\n|CSS variable|Value|\n|---|---|\n',
-);
-
-const data =
- tocTitle +
- tocContents +
- Template.tocItem('Overrides') +
- contents +
- Template.section('Overrides') +
- overridesContents;
-
-writeFileSync(resolvePath('documentation/Color system.md'), data);
-
-function stringToRgba(rgba) {
- const [red, green, blue] = rgba
- .substring(5)
- .slice(0, -1)
- .split(', ')
- .map((num) => Number(num));
-
- return {
- red,
- green,
- blue,
- };
-}
-
-function toHex(color) {
- return rgbToHex(stringToRgba(color)).substr(1);
-}
diff --git a/src/index.ts b/src/index.ts
index 952d9615435..526d112c55e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -57,8 +57,3 @@ export {
useRowSelected as useIndexTableRowSelected,
useContainerScroll as useIndexTableContainerScroll,
} from './utilities/index-table';
-
-export {
- toCssCustomPropertySyntax as UNSTABLE_toCssCustomPropertySyntax,
- Tokens as UNSTABLE_Tokens,
-} from './utilities/theme';
diff --git a/src/utilities/custom-properties/custom-properties.ts b/src/utilities/custom-properties/custom-properties.ts
index ba8f131d3a7..e50516aa3a6 100644
--- a/src/utilities/custom-properties/custom-properties.ts
+++ b/src/utilities/custom-properties/custom-properties.ts
@@ -1,6 +1,8 @@
import {config} from '@shopify/polaris-tokens/dist-modern/configs/base';
-import {toCssCustomPropertySyntax, Tokens} from '../theme';
+function toCssCustomPropertySyntax(camelCase: string) {
+ return `--p-${camelCase.replace(/([A-Z]|[0-9]+)/g, '-$1').toLowerCase()}`;
+}
export const nonDesignLangaugeCustomProperties = [
'--global-ribbon-height',
@@ -22,5 +24,4 @@ export const designLangaugeCustomProperties = ([] as string[]).concat(
...Object.values(config).map((variant) =>
variant.map(({name}) => toCssCustomPropertySyntax(name)),
),
- ...Object.keys(Tokens).map(toCssCustomPropertySyntax),
);
diff --git a/src/utilities/theme/index.ts b/src/utilities/theme/index.ts
deleted file mode 100644
index 99e2bdc5e8a..00000000000
--- a/src/utilities/theme/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export {toCssCustomPropertySyntax, toString} from './utils';
-
-export * from './tokens';
diff --git a/src/utilities/theme/tokens.ts b/src/utilities/theme/tokens.ts
deleted file mode 100644
index b0e4c017c54..00000000000
--- a/src/utilities/theme/tokens.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-export const Tokens = {
- // Border Radiuses
- borderRadiusSlim: '0.2rem',
- borderRadiusBase: '0.4rem',
- borderRadiusWide: '0.8rem',
- borderRadiusFull: '50%',
-
- // Font-Weights
- fontWeightRegular: 400,
- fontWeightMedium: 500,
- fontWeightSemibold: 600,
- fontWeightBold: 700,
-
- // Shadows
- cardShadow:
- '0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light)',
- popoverShadow:
- '-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light)',
- modalShadow:
- '0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light)',
- topBarShadow: '0 2px 2px -1px var(--p-shadow-from-direct-light)',
- buttonDropShadow: '0 1px 0 rgba(0, 0, 0, 0.05)',
- buttonInnerShadow: 'inset 0 -1px 0 rgba(0, 0, 0, 0.2)',
- buttonPressedInnerShadow: 'inset 0 1px 0 rgba(0, 0, 0, 0.15)',
-
- // Overrides
- overrideLoadingZIndex: '514',
- choiceSize: '2rem',
- iconSize: '1rem',
- choiceMargin: '0.1rem',
- controlBorderWidth: '0.2rem',
- bannerBorderDefault: buildBannerBorder('--p-border-neutral-subdued'),
- bannerBorderSuccess: buildBannerBorder('--p-border-success-subdued'),
- bannerBorderHighlight: buildBannerBorder('--p-border-highlight-subdued'),
- bannerBorderWarning: buildBannerBorder('--p-border-warning-subdued'),
- bannerBorderCritical: buildBannerBorder('--p-border-critical-subdued'),
- thinBorderSubdued: '0.1rem solid var(--p-border-subdued)',
- textFieldSpinnerOffset: '0.2rem',
- textFieldFocusRingOffset: '-0.4rem',
- textFieldFocusRingBorderRadius: '0.7rem',
- buttonGroupItemSpacing: '-0.1rem',
- duration100: '100ms',
- duration150: '150ms',
- easeIn: 'cubic-bezier(0.5, 0.1, 1, 1)',
- ease: 'cubic-bezier(0.4, 0.22, 0.28, 1)',
- rangeSliderThumbSizeBase: '1.6rem',
- rangeSliderThumbSizeActive: '2.4rem',
-};
-
-function buildBannerBorder(cssVar: string) {
- return `inset 0 0.1rem 0 0 var(${cssVar}), inset 0 0 0 0.1rem var(${cssVar})`;
-}
diff --git a/src/utilities/theme/utils.ts b/src/utilities/theme/utils.ts
deleted file mode 100644
index 917ff77bdde..00000000000
--- a/src/utilities/theme/utils.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-type CustomPropertiesObject = Record;
-
-export function toString(obj?: CustomPropertiesObject) {
- if (obj) {
- return Object.entries(obj)
- .map((pair) => pair.join(':'))
- .join(';');
- } else {
- return '';
- }
-}
-
-export function toCssCustomPropertySyntax(camelCase: string) {
- return `--p-${camelCase.replace(/([A-Z]|[0-9]+)/g, '-$1').toLowerCase()}`;
-}