diff --git a/.changeset/chilly-news-tan.md b/.changeset/chilly-news-tan.md
new file mode 100644
index 00000000000..a980c6c308e
--- /dev/null
+++ b/.changeset/chilly-news-tan.md
@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Updated Colors page with v11 content
diff --git a/polaris.shopify.com/content/design/colors.md b/polaris.shopify.com/content/design/colors.md
index 85e28e91a2d..5613d3410e4 100644
--- a/polaris.shopify.com/content/design/colors.md
+++ b/polaris.shopify.com/content/design/colors.md
@@ -1,6 +1,6 @@
---
-title: Colors
-description: Our color system builds on the recognition of the Shopify brand colors to make the admin interface more usable.
+title: Color
+description: Color is a powerful tool that helps merchants quickly navigate and manage their businesses in the Shopify Admin.
icon: ColorsMajor
keywords:
- visual patterns
@@ -8,104 +8,77 @@ keywords:
- color use
---
-
+
---
-## Principles
+## Using color
-### Communication is key
+
-Although we value an aesthetically pleasing use of color, we place a higher value on clear communication. Color supports the purpose of the content, communicating things like hierarchy of information, interactive states, and the difference between distinct elements.
+### 1. Reinforce the purpose of the page
-### Colors have meaning
+Always use color that supports the purpose of the content and the overall goal of the page. Color can help communicate things like hierarchy of information, interactive states, and distinct elements, all of which make it easier for merchants to get their work done.
-Colors have assigned roles, which hold a specific meaning based on how they function within the interface. Defined color roles make things easy to modify and customize later. They also extend the color system so it works across any touchpoint at Shopify.
+### 2. Design accessible experiences
-### Colors follow accessibility guidelines
+The color system is designed to meet WCAG 2.1 contrast ratios. Sufficient contrast makes things easier to find, identify, and interact with for all merchants. However, you should never convey information using color alone. For example, using an icon or a label in addition to using red, yellow, or green when communicating the status of something ensures that the status is visible to merchants who are color blind.
-The color system is designed within the HSLuv color space to generate themes that meet WCAG 2.1 compliant contrast ratios. This makes things easier to find, identify, and interact with. It also makes the whole experience more accessible for merchants who are color blind or who have low vision. However you should never convey information using color alone.
+### 3. Create heirarchy
----
-
-## Color roles
-
-
-
-We define colors based on the role they play in the interface. There are 10 color roles, which we use to generate the values of all the color variants in the palette.
-
-
-
-### Color variants
-
-Color variants are variables that apply color to the UI, and their values are generated from the color roles. Color variants are available as tokens.
-
-
-
-Variants share a naming pattern that references their color role, the interaction state they define, and any UI elements they’re linked to.
+Color plays a key role in creating the overall hierarchy of a screen. Using the subdued and strong token variants is an easy way to change that hierarchy and draw a merchant's attention to the right place.
---
-## The color system in action
-
-How the color roles relate to the variants, and how they’re applied across the interface.
-
-### Surface
-
-Surface colors affect surfaces of components, such as page, card, sheet, and popover.
-
-
-
-### On surface
-
-Apply on-surface colors to elements that appear on neutral surfaces, usually borders, secondary icons, and text elements.
-
-
-
-### Primary
+## Color pallette
-Use primary colors for primary actions like buttons, icons and text on navigation and tabs, and for the background in navigation and tab interactive states.
+The Polaris color palette is composed of 8 different colors, each with 10 unique shades. These colors are then used to create semantic tokens that style both Polaris components and custom components within the Shopify admin.
-
+
-### Secondary
+## Tokens
-Use secondary colors for secondary and tertiary buttons and the background of form elements.
+
-
+Polaris provides a comprehensive suite of [color tokens](/tokens/colors) for styling each part of the user interface. These tokens are passed into components and are available via css variables to style custom UI elements within the Shopify admin.
-### Interactive
+### Token names
-Use interactive colors for things like links, focus indicators, and selected interactive states.
+Each color token follows the same naming convention. The purpose and intent of a color token is built into the name itself. This makes it easy to understand how and when any given token should be used.
-
+**Naming formula:** `--p-color-element-role-variant-state`
-### Success
+**Example:** `--p-color-bg-critical-subdued-hover`
-Success colors indicate something positive, like the success of a merchant action or to illustrate growth.
+| Name space | Description | Examples |
+| ---------- | --------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
+| Element | This refers to the actual UI element being styled. | bg, text, icon & border |
+| Role | Assigned roles to specific colors to ensure consistent communication of color throughout the admin. | interactive, caution, success, primary, critical, info & magic |
+| Variant | This is the key descriptor of a token that communicates exactly what this token is to be used for. | subdued, strong, on-color, inverse |
+| State | Communicates the state on which this token is applied. | hover, active, selected, disabled & focus |
-
+The element slot is the only one that is required. When there is no role, variant or state associated with a token those slots are omitted from the final token name.
-### Warning
+### Examples
-Warning colors let the merchant know they need to take action, and are applied to badges, banners, and exception lists.
+
-
+## Applying tokens
-### Critical
+### Using color roles
-Critical colors are for destructive interactive elements, errors, and critical events that require immediate action.
+Colors have assigned roles, which hold a specific meaning based on how they function within the interface. Using these color roles correctly brings consistency across the admin, making it easier for merchants to work.
-
+
-### Highlight
+### Variants
-Highlight colors indicate important elements that don’t require immediate action. They’re used with informational banners and badges, indicators that draw attention to new information, loading or progress bars, and data visualization.
+Use variants to create hierarchy within the experience. Strong variants put emphasis on an element while subdued variants push them more into the background.
-
+
-### Decorative
+### Interaction states
-Decorative colors are for expressive communications that assert the Shopify brand presence.
+State tokens make interactions clear to merchants as they manage their store.
-
+
diff --git a/polaris.shopify.com/public/images/design/colors/color-intro@2x.png b/polaris.shopify.com/public/images/design/colors/color-intro@2x.png
index 0674a829ec4..c3e4abaf01e 100644
Binary files a/polaris.shopify.com/public/images/design/colors/color-intro@2x.png and b/polaris.shopify.com/public/images/design/colors/color-intro@2x.png differ
diff --git a/polaris.shopify.com/public/images/design/colors/color-role-critical@2x.png b/polaris.shopify.com/public/images/design/colors/color-role-critical@2x.png
deleted file mode 100644
index 389f9d2dd1b..00000000000
Binary files a/polaris.shopify.com/public/images/design/colors/color-role-critical@2x.png and /dev/null differ
diff --git a/polaris.shopify.com/public/images/design/colors/color-role-decorative@2x.png b/polaris.shopify.com/public/images/design/colors/color-role-decorative@2x.png
deleted file mode 100644
index 1d6a106eaae..00000000000
Binary files a/polaris.shopify.com/public/images/design/colors/color-role-decorative@2x.png and /dev/null differ
diff --git a/polaris.shopify.com/public/images/design/colors/color-role-highlight@2x.png b/polaris.shopify.com/public/images/design/colors/color-role-highlight@2x.png
deleted file mode 100644
index f2bd9a15771..00000000000
Binary files a/polaris.shopify.com/public/images/design/colors/color-role-highlight@2x.png and /dev/null differ
diff --git a/polaris.shopify.com/public/images/design/colors/color-role-interactive@2x.png b/polaris.shopify.com/public/images/design/colors/color-role-interactive@2x.png
deleted file mode 100644
index 58bf5805899..00000000000
Binary files a/polaris.shopify.com/public/images/design/colors/color-role-interactive@2x.png and /dev/null differ
diff --git a/polaris.shopify.com/public/images/design/colors/color-role-onsurface@2x.png b/polaris.shopify.com/public/images/design/colors/color-role-onsurface@2x.png
deleted file mode 100644
index 9a81032e915..00000000000
Binary files a/polaris.shopify.com/public/images/design/colors/color-role-onsurface@2x.png and /dev/null differ
diff --git a/polaris.shopify.com/public/images/design/colors/color-role-primary@2x.png b/polaris.shopify.com/public/images/design/colors/color-role-primary@2x.png
deleted file mode 100644
index 1a37459dd69..00000000000
Binary files a/polaris.shopify.com/public/images/design/colors/color-role-primary@2x.png and /dev/null differ
diff --git a/polaris.shopify.com/public/images/design/colors/color-role-secondary@2x.png b/polaris.shopify.com/public/images/design/colors/color-role-secondary@2x.png
deleted file mode 100644
index 98206b54c67..00000000000
Binary files a/polaris.shopify.com/public/images/design/colors/color-role-secondary@2x.png and /dev/null differ
diff --git a/polaris.shopify.com/public/images/design/colors/color-role-success@2x.png b/polaris.shopify.com/public/images/design/colors/color-role-success@2x.png
deleted file mode 100644
index 58eac3b380c..00000000000
Binary files a/polaris.shopify.com/public/images/design/colors/color-role-success@2x.png and /dev/null differ
diff --git a/polaris.shopify.com/public/images/design/colors/color-role-surface@2x.png b/polaris.shopify.com/public/images/design/colors/color-role-surface@2x.png
deleted file mode 100644
index 22333ed1ac5..00000000000
Binary files a/polaris.shopify.com/public/images/design/colors/color-role-surface@2x.png and /dev/null differ
diff --git a/polaris.shopify.com/public/images/design/colors/color-role-warning@2x.png b/polaris.shopify.com/public/images/design/colors/color-role-warning@2x.png
deleted file mode 100644
index be01458d008..00000000000
Binary files a/polaris.shopify.com/public/images/design/colors/color-role-warning@2x.png and /dev/null differ
diff --git a/polaris.shopify.com/public/images/design/colors/color-roles@2x.png b/polaris.shopify.com/public/images/design/colors/color-roles@2x.png
index 4735cbdf460..e22d254a73d 100644
Binary files a/polaris.shopify.com/public/images/design/colors/color-roles@2x.png and b/polaris.shopify.com/public/images/design/colors/color-roles@2x.png differ
diff --git a/polaris.shopify.com/public/images/design/colors/color-token-naming-example@2x.png b/polaris.shopify.com/public/images/design/colors/color-token-naming-example@2x.png
new file mode 100644
index 00000000000..abe78c6d226
Binary files /dev/null and b/polaris.shopify.com/public/images/design/colors/color-token-naming-example@2x.png differ
diff --git a/polaris.shopify.com/public/images/design/colors/color-tokens@2x.png b/polaris.shopify.com/public/images/design/colors/color-tokens@2x.png
new file mode 100644
index 00000000000..c89faae86d4
Binary files /dev/null and b/polaris.shopify.com/public/images/design/colors/color-tokens@2x.png differ
diff --git a/polaris.shopify.com/public/images/design/colors/color-usage-123@2x.png b/polaris.shopify.com/public/images/design/colors/color-usage-123@2x.png
new file mode 100644
index 00000000000..184a3b03386
Binary files /dev/null and b/polaris.shopify.com/public/images/design/colors/color-usage-123@2x.png differ
diff --git a/polaris.shopify.com/public/images/design/colors/color-variant-naming@2x.png b/polaris.shopify.com/public/images/design/colors/color-variant-naming@2x.png
deleted file mode 100644
index 5d3e32892f7..00000000000
Binary files a/polaris.shopify.com/public/images/design/colors/color-variant-naming@2x.png and /dev/null differ
diff --git a/polaris.shopify.com/public/images/design/colors/color-variants@2x.png b/polaris.shopify.com/public/images/design/colors/color-variants@2x.png
index 343b1cb5e71..22b24818c3f 100644
Binary files a/polaris.shopify.com/public/images/design/colors/color-variants@2x.png and b/polaris.shopify.com/public/images/design/colors/color-variants@2x.png differ
diff --git a/polaris.shopify.com/public/images/design/colors/interaction-states@2x.png b/polaris.shopify.com/public/images/design/colors/interaction-states@2x.png
new file mode 100644
index 00000000000..7a8533fc724
Binary files /dev/null and b/polaris.shopify.com/public/images/design/colors/interaction-states@2x.png differ
diff --git a/polaris.shopify.com/src/styles/globals.scss b/polaris.shopify.com/src/styles/globals.scss
index 08fe7b28f58..5519cc58cf7 100644
--- a/polaris.shopify.com/src/styles/globals.scss
+++ b/polaris.shopify.com/src/styles/globals.scss
@@ -411,3 +411,31 @@ button {
.tip-banner__header h4 {
margin: 0 !important;
}
+
+.colors {
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ gap: var(--p-space-4);
+ margin-bottom: var(--p-space-8);
+ font-size: var(--font-size-75);
+ font-weight: var(--p-font-weight-semibold);
+}
+
+@media (min-width: $breakpointTablet) {
+ .colors {
+ grid-template-columns: repeat(10, 1fr);
+ }
+}
+
+.colors-swatch {
+ position: relative;
+ overflow: hidden;
+ border-radius: var(--p-border-radius-2);
+ margin-bottom: var(--p-space-2);
+
+ &:before {
+ content: "";
+ display: block;
+ padding-bottom: 75%;
+ }
+}
diff --git a/polaris.shopify.com/src/utils/markdown.mjs b/polaris.shopify.com/src/utils/markdown.mjs
index c70bea8ddc6..e8c0f7b8101 100644
--- a/polaris.shopify.com/src/utils/markdown.mjs
+++ b/polaris.shopify.com/src/utils/markdown.mjs
@@ -1,5 +1,7 @@
import yaml from 'js-yaml';
+import * as colors from '../../../polaris-tokens/dist/esm/src/colors.mjs';
+
export const parseMarkdown = (inputMarkdown) => {
const readmeSections = inputMarkdown.split('---');
const frontMatterSection = readmeSections[1];
@@ -66,6 +68,40 @@ export const parseMarkdown = (inputMarkdown) => {
});
}
+ // Add some custom HTML to tags
+ const colorsRegex = //gis;
+ if (markdown.match(colorsRegex)) {
+ markdown = markdown.replace(colorsRegex, (match) => {
+ const colorOrder = [
+ 'gray',
+ 'green',
+ 'teal',
+ 'blue',
+ 'purple',
+ 'red',
+ 'orange',
+ 'yellow',
+ ];
+
+ return colorOrder.reduce((acc, color) => {
+ const shades = colors[color] ?? [];
+ const swatches = Object.entries(shades)
+ .sort(([prevShade], [nextShade]) =>
+ Number(prevShade) < Number(nextShade) ? 1 : -1,
+ )
+ .map(
+ ([shade, value]) =>
+ ``,
+ )
+ .join('');
+
+ return `${acc}${capitalize(
+ color,
+ )}
${swatches}
`;
+ }, '');
+ });
+ }
+
const out = {
frontMatter,
description,
@@ -74,3 +110,7 @@ export const parseMarkdown = (inputMarkdown) => {
return out;
};
+
+function capitalize(string) {
+ return string.charAt(0).toUpperCase() + string.slice(1);
+}
diff --git a/polaris.shopify.com/tsconfig.json b/polaris.shopify.com/tsconfig.json
index 097f49b6942..3e9fffea951 100644
--- a/polaris.shopify.com/tsconfig.json
+++ b/polaris.shopify.com/tsconfig.json
@@ -28,7 +28,8 @@
"**/*.json",
"next-env.d.ts",
"scripts/get-props/src/get-props.ts",
- "constants.js"
+ "constants.js",
+ "../polaris-tokens/dist"
],
"exclude": ["node_modules", "scripts/get-props/testData"]
}