diff --git a/polaris.shopify.com/content/design/colors.md b/polaris.shopify.com/content/design/colors.md
deleted file mode 100644
index 4a1421eca6b..00000000000
--- a/polaris.shopify.com/content/design/colors.md
+++ /dev/null
@@ -1,88 +0,0 @@
----
-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
- - color strategy
- - color use
----
-
-
-
----
-
-# {frontmatter.title}
-
-{frontmatter.description}
-
-## Using color
-
-
-
-### 1. Reinforce the purpose of the page
-
-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.
-
-### 2. Design accessible experiences
-
-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.
-
-### 3. Create hierarchy
-
-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.
-
----
-
-## Color palette
-
-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.
-
-
-
-## Tokens
-
-
-
-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.
-
-### Token names
-
-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`
-
-**Example:** `--p-color-bg-critical-subdued-hover`
-
-| 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.
-
-### Examples
-
-
-
-## Applying tokens
-
-### Using color roles
-
-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.
-
-
-
-### Variants
-
-Use variants to create hierarchy within the experience. Strong variants put emphasis on an element while subdued variants push them more into the background.
-
-
-
-### Interaction states
-
-State tokens make interactions clear to merchants as they manage their store.
-
-
diff --git a/polaris.shopify.com/content/design/colors/index.md b/polaris.shopify.com/content/design/colors/index.md
new file mode 100644
index 00000000000..bf85eb1bb81
--- /dev/null
+++ b/polaris.shopify.com/content/design/colors/index.md
@@ -0,0 +1,218 @@
+---
+title: Color
+description: Color highlights important areas, communicates status, urgency, and directs attention.
+icon: ColorsMajor
+keywords:
+ - color role
+ - color strategy
+ - color use
+ - black and white
+ - grayscale
+---
+
+# {frontmatter.title}
+
+{frontmatter.description}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ## Color has purpose
+
+ The purpose of using color has to be clear. Color needs to support a message or a status that needs to be easily identifiable by merchants.
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+ Each usage of color within the Shopify admin is purposefully tied to a specific meaning. For instance, red signifies critical errors, green represents success messages, and blue is used to draw attention to tips and offers. Using color as decoration is exclusive to illustration.
+
+ This deliberate color coding facilitates merchants in identifying which parts of the user interface require focus and distinguishes them from the default features provided by the Shopify admin.
+
+
+
+
+
+
+
+
+ 
+
+
+ Use color to support different states merchants need to be informed about.
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ Use color to decorate or to distract merchants from performing tasks.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ## Color has impact
+
+ The Shopify admin interface adopts a black and white color scheme, intentionally creating a neutral backdrop. By employing this monochromatic design, elements that incorporate color gain heightened visual impact and prominence.
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+ The intentional design of the overall interface in black and white enables strategically positioned and carefully selected elements to grab merchants' attention. By utilizing color purposefully, the focus is directed towards crucial information, actions, and visual cues.
+
+ Create impact when using color by using appropriate shades to convey the importance of what is being communicated to merchants.
+
+
+
+
+
+
+
+
+
+ 
+
+
+ Use strong, vivid colors to grab attention to things that matter most.
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ Contradict or diminish messaging by using subdued colors or grayscale.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ## Color is accessible
+
+ Polaris offers consistent color palettes for each color role. This means that each color is assigned a specific relationship within the overall palette.
+
+ These color relationships ensure that color contrasts remain consistent across every application of color and ensure proper legibility and understanding when it comes to combining texts with color and interactive shapes with various backgrounds.
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+ Colors are meant to be easily understood and read by all merchants. Sufficient contrast makes things easier to find, identify and interact with.
+
+
+
+
+
+
+
+
+
+ 
+
+
+ Use color in conjunction with other discernible elements to amplify the message.
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ Use color alone to convey meaning
+
+
+
+
+
+
+
+
+
+
+
diff --git a/polaris.shopify.com/content/design/colors/palettes-and-roles.md b/polaris.shopify.com/content/design/colors/palettes-and-roles.md
new file mode 100644
index 00000000000..b2a0ef7af73
--- /dev/null
+++ b/polaris.shopify.com/content/design/colors/palettes-and-roles.md
@@ -0,0 +1,217 @@
+---
+title: Palettes and roles
+order: 1
+description: Color highlights important areas, communicates status, urgency, and directs attention.
+keywords:
+ - color role
+ - color strategy
+ - color use
+ - black and white
+ - grayscale
+---
+
+# Color → {frontmatter.title}
+
+{frontmatter.description}
+
+
+
+
+
+
+
+
+
+
+
+
+ ## Color has purpose
+
+ The purpose of using color has to be clear. Color needs to support a message or a status that needs to be easily identifiable by merchants.
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+ Each usage of color within the Shopify admin is purposefully tied to a specific meaning. For instance, red signifies critical errors, green represents success messages, and blue is used to draw attention to tips and offers. Using color as decoration is exclusive to illustration.
+
+ This deliberate color coding facilitates merchants in identifying which parts of the user interface require focus and distinguishes them from the default features provided by the Shopify admin.
+
+
+
+
+
+
+
+
+ 
+
+
+ Use color to support different states merchants need to be informed about.
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ Use color to decorate or to distract merchants from performing tasks.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ## Color has impact
+
+ The Shopify admin interface adopts a black and white color scheme, intentionally creating a neutral backdrop. By employing this monochromatic design, elements that incorporate color gain heightened visual impact and prominence.
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+ The intentional design of the overall interface in black and white enables strategically positioned and carefully selected elements to grab merchants' attention. By utilizing color purposefully, the focus is directed towards crucial information, actions, and visual cues.
+
+ Create impact when using color by using appropriate shades to convey the importance of what is being communicated to merchants.
+
+
+
+
+
+
+
+
+
+ 
+
+
+ Use strong, vivid colors to grab attention to things that matter most.
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ Contradict or diminish messaging by using subdued colors or grayscale.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ## Color is accessible
+
+ Polaris offers consistent color palettes for each color role. This means that each color is assigned a specific relationship within the overall palette.
+
+ These color relationships ensure that color contrasts remain consistent across every application of color and ensure proper legibility and understanding when it comes to combining texts with color and interactive shapes with various backgrounds.
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+ Colors are meant to be easily understood and read by all merchants. Sufficient contrast makes things easier to find, identify and interact with.
+
+
+
+
+
+
+
+
+
+ 
+
+
+ Use color in conjunction with other discernible elements to amplify the message.
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ Use color alone to convey meaning
+
+
+
+
+
+
+
+
+
+
+
diff --git a/polaris.shopify.com/content/design/typography/index.md b/polaris.shopify.com/content/design/typography/index.md
index 7744a09b178..e6aee31683a 100644
--- a/polaris.shopify.com/content/design/typography/index.md
+++ b/polaris.shopify.com/content/design/typography/index.md
@@ -198,17 +198,17 @@ textarea {
- - Refer to the platform’s native font scales when designing experiences for native apps
- - Refer to the small-screen scale when designing experiences for mobile browsers
- - Use the platform-specific component library
+ - Refer to the platform’s native font scales when designing experiences for native apps
+ - Refer to the small-screen scale when designing experiences for mobile browsers
+ - Use the platform-specific component library
- - Use the native font scale
- - Keep in mind that all UI elements containing text will be affected
- - Explore additional content height, width, truncation, and line wraps
+ - Use the native font scale
+ - Keep in mind that all UI elements containing text will be affected
+ - Explore additional content height, width, truncation, and line wraps
diff --git a/polaris.shopify.com/public/images/design/colors/color-intro@2x.png b/polaris.shopify.com/public/images/design/colors/_old/color-intro@2x.png
similarity index 100%
rename from polaris.shopify.com/public/images/design/colors/color-intro@2x.png
rename to polaris.shopify.com/public/images/design/colors/_old/color-intro@2x.png
diff --git a/polaris.shopify.com/public/images/design/colors/color-roles@2x.png b/polaris.shopify.com/public/images/design/colors/_old/color-roles@2x.png
similarity index 100%
rename from polaris.shopify.com/public/images/design/colors/color-roles@2x.png
rename to polaris.shopify.com/public/images/design/colors/_old/color-roles@2x.png
diff --git a/polaris.shopify.com/public/images/design/colors/color-token-naming-example@2x.png b/polaris.shopify.com/public/images/design/colors/_old/color-token-naming-example@2x.png
similarity index 100%
rename from polaris.shopify.com/public/images/design/colors/color-token-naming-example@2x.png
rename to polaris.shopify.com/public/images/design/colors/_old/color-token-naming-example@2x.png
diff --git a/polaris.shopify.com/public/images/design/colors/color-tokens@2x.png b/polaris.shopify.com/public/images/design/colors/_old/color-tokens@2x.png
similarity index 100%
rename from polaris.shopify.com/public/images/design/colors/color-tokens@2x.png
rename to polaris.shopify.com/public/images/design/colors/_old/color-tokens@2x.png
diff --git a/polaris.shopify.com/public/images/design/colors/color-usage-123@2x.png b/polaris.shopify.com/public/images/design/colors/_old/color-usage-123@2x.png
similarity index 100%
rename from polaris.shopify.com/public/images/design/colors/color-usage-123@2x.png
rename to polaris.shopify.com/public/images/design/colors/_old/color-usage-123@2x.png
diff --git a/polaris.shopify.com/public/images/design/colors/color-variants@2x.png b/polaris.shopify.com/public/images/design/colors/_old/color-variants@2x.png
similarity index 100%
rename from polaris.shopify.com/public/images/design/colors/color-variants@2x.png
rename to polaris.shopify.com/public/images/design/colors/_old/color-variants@2x.png
diff --git a/polaris.shopify.com/public/images/design/colors/interaction-states@2x.png b/polaris.shopify.com/public/images/design/colors/_old/interaction-states@2x.png
similarity index 100%
rename from polaris.shopify.com/public/images/design/colors/interaction-states@2x.png
rename to polaris.shopify.com/public/images/design/colors/_old/interaction-states@2x.png
diff --git a/polaris.shopify.com/public/images/design/colors/color-overview-accessible@2x.png b/polaris.shopify.com/public/images/design/colors/color-overview-accessible@2x.png
new file mode 100644
index 00000000000..66c3fd20764
Binary files /dev/null and b/polaris.shopify.com/public/images/design/colors/color-overview-accessible@2x.png differ
diff --git a/polaris.shopify.com/public/images/design/colors/color-overview-alone-dont@2x.png b/polaris.shopify.com/public/images/design/colors/color-overview-alone-dont@2x.png
new file mode 100644
index 00000000000..e7a01365802
Binary files /dev/null and b/polaris.shopify.com/public/images/design/colors/color-overview-alone-dont@2x.png differ
diff --git a/polaris.shopify.com/public/images/design/colors/color-overview-conjunction-do@2x.png b/polaris.shopify.com/public/images/design/colors/color-overview-conjunction-do@2x.png
new file mode 100644
index 00000000000..22ebd064d6d
Binary files /dev/null and b/polaris.shopify.com/public/images/design/colors/color-overview-conjunction-do@2x.png differ
diff --git a/polaris.shopify.com/public/images/design/colors/color-overview-decorate-dont@2x.png b/polaris.shopify.com/public/images/design/colors/color-overview-decorate-dont@2x.png
new file mode 100644
index 00000000000..6343069b41e
Binary files /dev/null and b/polaris.shopify.com/public/images/design/colors/color-overview-decorate-dont@2x.png differ
diff --git a/polaris.shopify.com/public/images/design/colors/color-overview-diminish-dont@2x.png b/polaris.shopify.com/public/images/design/colors/color-overview-diminish-dont@2x.png
new file mode 100644
index 00000000000..471e29e06c3
Binary files /dev/null and b/polaris.shopify.com/public/images/design/colors/color-overview-diminish-dont@2x.png differ
diff --git a/polaris.shopify.com/public/images/design/colors/color-overview-impact@2x.png b/polaris.shopify.com/public/images/design/colors/color-overview-impact@2x.png
new file mode 100644
index 00000000000..b8fa9b34cb5
Binary files /dev/null and b/polaris.shopify.com/public/images/design/colors/color-overview-impact@2x.png differ
diff --git a/polaris.shopify.com/public/images/design/colors/color-overview-purpose@2x.png b/polaris.shopify.com/public/images/design/colors/color-overview-purpose@2x.png
new file mode 100644
index 00000000000..e939c733967
Binary files /dev/null and b/polaris.shopify.com/public/images/design/colors/color-overview-purpose@2x.png differ
diff --git a/polaris.shopify.com/public/images/design/colors/color-overview-states-do@2x.png b/polaris.shopify.com/public/images/design/colors/color-overview-states-do@2x.png
new file mode 100644
index 00000000000..5f8e1310e91
Binary files /dev/null and b/polaris.shopify.com/public/images/design/colors/color-overview-states-do@2x.png differ
diff --git a/polaris.shopify.com/public/images/design/colors/color-overview-vivid-do@2x.png b/polaris.shopify.com/public/images/design/colors/color-overview-vivid-do@2x.png
new file mode 100644
index 00000000000..9ac3bd58fe9
Binary files /dev/null and b/polaris.shopify.com/public/images/design/colors/color-overview-vivid-do@2x.png differ
diff --git a/polaris.shopify.com/public/images/icon-do.svg b/polaris.shopify.com/public/images/icon-do.svg
index 70df921cb8d..a2855ddbe0d 100644
--- a/polaris.shopify.com/public/images/icon-do.svg
+++ b/polaris.shopify.com/public/images/icon-do.svg
@@ -1 +1,3 @@
-
+
diff --git a/polaris.shopify.com/public/images/icon-dont.svg b/polaris.shopify.com/public/images/icon-dont.svg
index 29aa3e22796..5b84c4ca250 100644
--- a/polaris.shopify.com/public/images/icon-dont.svg
+++ b/polaris.shopify.com/public/images/icon-dont.svg
@@ -1 +1,3 @@
-
+
diff --git a/polaris.shopify.com/public/images/icon-polaris12-fill.svg b/polaris.shopify.com/public/images/icon-polaris12-fill.svg
new file mode 100644
index 00000000000..9fde94f12c6
--- /dev/null
+++ b/polaris.shopify.com/public/images/icon-polaris12-fill.svg
@@ -0,0 +1,3 @@
+
diff --git a/polaris.shopify.com/src/components/Markdown/components/DoDont/styles.module.scss b/polaris.shopify.com/src/components/Markdown/components/DoDont/styles.module.scss
index 4bad9a47cca..9eaed92db5c 100644
--- a/polaris.shopify.com/src/components/Markdown/components/DoDont/styles.module.scss
+++ b/polaris.shopify.com/src/components/Markdown/components/DoDont/styles.module.scss
@@ -22,32 +22,34 @@
font-size: var(--font-size-300);
position: relative;
flex: 1;
- background: var(--surface-subdued);
- padding: 0.5rem 1.5rem;
border-radius: var(--border-radius-400);
- background-color: #13b2881c;
+ background-color: var(--surface);
h4:first-child {
- @include heading-3;
- margin-top: 1rem;
+ display: inline-block;
+ background-color: var(--fill-success);
+ color: var(--text-success-onfill);
+ padding: var(--p-space-05) var(--p-space-2) var(--p-space-05)
+ var(--p-space-5);
+ border-radius: var(--p-space-2);
+ font-size: var(--font-size-100);
+ font-weight: var(--font-weight-600);
+ line-height: 1rem;
+ position: relative;
}
- &:after {
+ h4:first-child:after {
content: '';
display: block;
position: absolute;
- top: -13px;
left: 0;
- right: 0;
- height: 28px;
- width: 28px;
- margin: 0 auto;
- background-color: var(--surface);
+ top: 0;
+ height: 20px;
+ width: 20px;
background-image: url(/images/icon-do.svg);
background-repeat: no-repeat;
background-position: left center;
background-size: cover;
- border-radius: var(--border-radius-round);
z-index: 1;
}
@@ -60,16 +62,20 @@
font-size: var(--font-size-300);
color: var(--text);
}
+
+ p {
+ margin: var(--p-space-2) 0 0 0;
+ font: var(--font-body-md);
+ }
}
.Dont {
- background-color: #ea584517;
-
- &:after {
- background-image: url(/images/icon-dont.svg);
+ h4:first-child {
+ background-color: var(--fill-critical);
+ color: var(--text-critical-onfill);
}
- &::before {
- background: #ea5945;
+ h4:first-child:after {
+ background-image: url(/images/icon-dont.svg);
}
}
diff --git a/polaris.shopify.com/src/styles/globals.scss b/polaris.shopify.com/src/styles/globals.scss
index 22547e3ce3d..59773d494fe 100644
--- a/polaris.shopify.com/src/styles/globals.scss
+++ b/polaris.shopify.com/src/styles/globals.scss
@@ -92,6 +92,13 @@
--border-radius-700: 12px;
--border-radius-800: 14px;
--border-radius-round: 1000px;
+
+ --border-radius-400-new: var(--p-border-radius-4);
+
+ --card-padding-md: var(--p-space-4);
+ --card-padding-lg: var(--p-space-8);
+
+ --font-body-md: 400 14px/20px Inter;
}
.light-mode,
@@ -202,6 +209,14 @@ body,
--surface-information: #dcf5f0;
--surface-subdued: #f9f9f9;
--surface-warning: #ffeceb;
+ --fill-success: #29845a;
+ --fill-caution: #ffe600;
+ --fill-critical: #e51c00;
+ --fill-info: #91d0ff;
+ --text-success-onfill: #ffffff;
+ --text-caution-onfill: #332e00;
+ --text-critical-onfill: #ffffff;
+ --text-info-onfill: #002133;
--primary: #008060;
--border-color: #e9e9e9;
--border: 1px solid var(--border-color);
@@ -342,3 +357,20 @@ button {
.tip-banner__header h4 {
margin: 0 !important;
}
+
+.text-extra-padding {
+ padding: var(--card-padding-md);
+}
+
+.directive {
+ font-size: 0;
+ line-height: 0;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+
+ div {
+ padding: var(--card-padding-md);
+ background-color: var(--surface-subdued);
+ }
+}