diff --git a/.changeset/lucky-mugs-fold.md b/.changeset/lucky-mugs-fold.md
new file mode 100644
index 00000000000..da4410d6d62
--- /dev/null
+++ b/.changeset/lucky-mugs-fold.md
@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': minor
+---
+
+Added a `shadow` token page
diff --git a/polaris.shopify.com/pages/tokens/shadow.tsx b/polaris.shopify.com/pages/tokens/shadow.tsx
new file mode 100644
index 00000000000..ed3a9564fb6
--- /dev/null
+++ b/polaris.shopify.com/pages/tokens/shadow.tsx
@@ -0,0 +1,16 @@
+import type {NextPage} from 'next';
+import React from 'react';
+import TokensPage from '../../src/components/TokensPage';
+import PageMeta from '../../src/components/PageMeta';
+
+const Components: NextPage = () => {
+ return (
+ <>
+
+
+
+ >
+ );
+};
+
+export default Components;
diff --git a/polaris.shopify.com/src/components/TokensPage/TokensPage.module.scss b/polaris.shopify.com/src/components/TokensPage/TokensPage.module.scss
index 9e59da96481..8ea9817fb30 100644
--- a/polaris.shopify.com/src/components/TokensPage/TokensPage.module.scss
+++ b/polaris.shopify.com/src/components/TokensPage/TokensPage.module.scss
@@ -37,6 +37,8 @@
li {
flex: 1;
+ // Temporality adding this style until v11 ships and we get rid of the depth token group
+ min-width: 125px;
}
a {
@@ -79,10 +81,12 @@
padding: 0.66rem 0;
}
- li:nth-last-child(1),
- li:nth-last-child(2),
- li:nth-last-child(3),
- li:nth-last-child(4) {
+ // Temporality disabling these styles until v11 ships and we get rid of the depth token group
+ // li:nth-last-child(1),
+ // li:nth-last-child(2),
+ // li:nth-last-child(3),
+ // li:nth-last-child(4) {
+ li:nth-last-child(1) {
a {
border-bottom: none;
}
diff --git a/polaris.shopify.com/src/components/TokensPage/TokensPage.tsx b/polaris.shopify.com/src/components/TokensPage/TokensPage.tsx
index 98fdb04639a..715f4b5b361 100644
--- a/polaris.shopify.com/src/components/TokensPage/TokensPage.tsx
+++ b/polaris.shopify.com/src/components/TokensPage/TokensPage.tsx
@@ -14,6 +14,7 @@ interface Props {
| 'depth'
| 'font'
| 'motion'
+ | 'shadow'
| 'shape'
| 'spacing'
| 'zIndex';
@@ -47,6 +48,10 @@ const navItems: NavItem[] = [
title: 'Depth',
url: `/tokens/depth`,
},
+ {
+ title: 'Shadow',
+ url: `/tokens/shadow`,
+ },
{
title: 'Motion',
url: `/tokens/motion`,
@@ -84,6 +89,7 @@ function TokensPage({tokenGroup}: Props) {
depth: tokensToFilteredArray(filter, allTokens.depth),
font: tokensToFilteredArray(filter, allTokens.font),
motion: tokensToFilteredArray(filter, allTokens.motion),
+ shadow: tokensToFilteredArray(filter, allTokens.shadow),
shape: tokensToFilteredArray(filter, allTokens.shape),
spacing: tokensToFilteredArray(filter, allTokens.spacing),
zIndex: tokensToFilteredArray(filter, allTokens.zIndex),