diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/index.md b/polaris.shopify.com/content/tools/stylelint-polaris/index.md index 8d48db7abc5..5d61b85560e 100644 --- a/polaris.shopify.com/content/tools/stylelint-polaris/index.md +++ b/polaris.shopify.com/content/tools/stylelint-polaris/index.md @@ -196,4 +196,458 @@ yarn run stylelint path/to/component.scss ## Rules -[Stylelint Polaris Rules](/tools/stylelint-polaris/rules) +### Conventions + +#### conventions/custom-property-allowed-list + +Allows definition of custom properties not prefixed with `--p-`, `--pc-`, or `--polaris-version-`. + +```diff +root: { +// Don't +- --p-animation-name-drag-handle-pulse: osui_drag-handle-pulse; +// Do ++ --osui_animation-name-drag-handle-pulse: osui_drag-handle-pulse; +}; +``` + +Flags declaration property values using `--p-*` that are not valid Polaris tokens. + +```diff +// Don't +- font-size: var(--p-fontsize-200); +// Do ++ font-size: var(--p-font-size-200); +``` + +Flags declaration property values using private `--pc-*` tokens. + +```diff +// Don't +- background: var(--pc-button-color-depressed); +// Do ++ background: var(--p-action-secondary-depressed); +``` + +### Colors + +#### colors/color-named + +```diff +// Don't +- color: black; +- fill: dimgray; +// Do ++ color: var(--p-text); ++ fill: var(--p-icon) +``` + +#### colors/color-no-hex + +```diff +// Don't +- color: #202223; +- fill: #5c5f62; +// Do ++ color: var(--p-text); ++ fill: var(--p-icon) +``` + +#### colors/declaration-property-value-disallowed-list + +```diff +// Don't +- background: black; +- opacity: 0.15; +// Do ++ background: var(--p-hint-from-direct-light); +``` + +#### colors/function-disallowed-list + +```diff +// Don't +- color: rgb(140, 145, 150); +- background: color('hover'); +// Do ++ color: var(--p-text-disabled); ++ background: var(--p-action-secondary-hovered-dark); +``` + +#### colors/at-rule-disallowed-list + +```diff +// Don't +- fill: recolor-icon(--p-text-subdued); +// Do ++ fill: var(--p-icon-subdued); +``` + +#### colors/global-disallowed-list + +Disallows use of legacy custom properties. + +```diff +// Don't +- border: var(--p-override-transparent); +// Do ++ border: transparent; +``` + +Disallows use of legacy mixin map data. + +```diff +- @type map $filter-palette-data: $polaris-color-filters; +``` + +### Motion + +#### motion/function-disallowed-list + +```diff + +``` + +#### motion/declaration-property-unit-disallowed-list + +```diff +// Don't +- transition-duration: 200ms; +// Do ++ transition-duration: var(--p-duration-200); +``` + +#### motion/at-rule-disallowed-list + +```diff + +``` + +#### motion/global-disallowed-list + +```diff + +``` + +### Typography + +#### typography/declaration-property-value-disallowed-list + +```diff + +``` + +#### typography/declaration-property-unit-disallowed-list + +```diff +// Don't +- font-size: 12px; +- line-height: 1.5rem +// Do ++ font-size: var(--p-font-size-75); ++ line-height: var(--p-font-line-height-3); +``` + +#### typography/function-disallowed-list + +```diff + +``` + +#### typography/at-rule-disallowed-list + +```diff + +``` + +#### typography/property-disallowed-list + +```diff + +``` + +### Shape + +#### shape/declaration-property-value-disallowed-list + +```diff + +``` + +#### shape/declaration-property-unit-disallowed-list + +```diff +// Don't +- border-width: 2px; +- border-radius: 0.5rem; +// Do ++ border-width: var(--p-border-width-2); ++ border-radius: var(--p-border-radius-2); +``` + +#### shape/function-disallowed-list + +```diff + +``` + +#### shape/at-rule-disallowed-list + +```diff + +``` + +#### shape/property-disallowed-list + +```diff + +``` + +### Spacing + +#### spacing/declaration-property-value-disallowed-list + +```diff + +``` + +#### spacing/declaration-property-unit-disallowed-list + +```diff +// Don't +- gap: 2px; +- margin: 12px 0; +// Do ++ gap: var(--p-space-05); ++ margin: var(--p-space-3) 0; +``` + +#### spacing/function-disallowed-list + +```diff + +``` + +#### spacing/at-rule-disallowed-list + +```diff + +``` + +#### spacing/property-disallowed-list + +```diff + +``` + +### Depth + +_{Insert why depth consistency impacts merchant [wayfinding, etc]}_ + +Have you found that merchants benefit from {an additional layer of visual hierarchy that's not in the depth tokens? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: + +- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution +- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion +- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition + +#### depth/declaration-property-unit-disallowed-list + +Use the [Polaris depth tokens](https://polaris.shopify.com/tokens/z-index) instead of custom shadows. + +```diff +// Don't +- box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); +// Do ++ box-shadow: var(--p-shadow-card); +``` + +#### depth/function-disallowed-list + +Use the [Polaris depth tokens](https://polaris.shopify.com/tokens/z-index) instead of custom shadows. + +```diff +// Don't +- filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); +// Do ++ box-shadow: var(--p-shadow-base); +``` + +#### depth/global-disallowed-list + +Use the [Polaris depth tokens](https://polaris.shopify.com/tokens/z-index) instead of legacy mixins/variables. + +```diff +// Don't +- box-shadow: var(--p-card-shadow); +// Do ++ box-shadow: var(--p-shadow-card); +``` + +#### depth/property-disallowed-list + +Instead of using properties like `text-shadow`, make sure the text has proper contrast with the background so that it is readable without a shadow. + +```diff +// Don't +- text-shadow: 2px 2px #ff0000; +``` + +### Media queries + +#### media-queries/function-disallowed-list + +Use the [Polaris breakpoint sass variables](https://polaris.shopify.com/tokens/breakpoints#sass-variables) instead of legacy mixins/variables. + +```diff +// Don't +- @include breakpoint-after(layout-width(page-with-nav)) {} +// Do ++ @media (min-width: var(--p-breakpoints-md)) {} +``` + +#### media-queries/media-queries-allowed-list + +Try to use the [Polaris breakpoint sass variables](https://polaris.shopify.com/tokens/breakpoints#sass-variables) before creating your own custom styles. + +```diff +// Don't +- @include @media #{$my-var} {} +// Do ++ @include @media #{$p-breakpoints-sm-up} {} +``` + +#### media-queries/at-rule-disallowed-list + +Use the [Polaris breakpoint sass variables](https://polaris.shopify.com/tokens/breakpoints#sass-variables) instead of legacy mixins/variables. + +```diff +// Don't +- @include breakpoint-before(layout-width(page-with-nav)) {} +// Do ++ @media (max-width: var(--p-breakpoints-md)) {} +``` + +### Z-Index + +#### z-index/declaration-property-value-allowed-list + +Try to use the [Polaris z-index tokens](https://polaris.shopify.com/tokens/z-index) before creating your own custom styles. + +```diff +// Don't +- z-index: 1; +// Do ++ z-index: var(--p-z-1); +``` + +#### z-index/function-disallowed-list + +Use the [Polaris z-index tokens](https://polaris.shopify.com/tokens/z-index) instead of legacy mixins/variables. + +```diff +// Don't +- z-index: z-index(content); +// Do ++ z-index: var(--p-z-1); +``` + +#### z-index/global-disallowed-list + +Use the [Polaris z-index tokens](https://polaris.shopify.com/tokens/z-index) instead of legacy mixins/variables. + +```diff +// Don't +- z-index(toast, $fixed-element-stacking-order); +// Do ++ z-index: var(--p-z-1); +``` + +### Layout + +#### layout/declaration-property-value-disallowed-list + +There are many ways to use [Polaris components](https://polaris.shopify.com/components) to compose desired layouts. Please explore the layout components before writing custom styles. + +```diff +// Don't +- width: 100%; +// Do ++ +``` + +#### layout/function-disallowed-list + +Use hard coded pixel or rem values for `width` and `height` instead of legacy mixins/variables or spacing tokens. + +```diff +// Don't +- height: top-bar-height(); +// Do ++ height: 56px; +``` + +#### layout/at-rule-disallowed-list + +Instead of using a legacy mixin, try and use [Polaris components](https://polaris.shopify.com/components) to compose desired layouts. If what you need isn't possible, either use the mixin's contents or consider contributing to an existing Polaris component. + +```diff +// Don't +- @include print-hidden; +// Do ++ @media print { ++ display: none; ++ } +``` + +#### layout/property-disallowed-list + +There are many ways to use [Polaris components](https://polaris.shopify.com/components) to compose desired layouts. Please explore the layout components before writing custom styles. + +```diff +// Don't +- display: grid; +// Do ++ +``` + +#### layout/global-disallowed-list + +If [Polaris components](https://polaris.shopify.com/components) cannot be composed to create the styles you need, consider contributing to an existing Polaris component before creating custom styles. + +```diff +// Don't +- height: var(--p-choice-size); +// Do ++ +``` + +### Legacy + +#### legacy/at-rule-disallowed-list + +If [Polaris components](https://polaris.shopify.com/components) cannot be composed to create the styles you need, consider contributing to an existing Polaris component before creating custom styles. + +```diff +// Don't +- @include unstyled-button; +// Do ++ +``` + +#### legacy/function-disallowed-list + +```diff +// Don't +- @include available-names +``` + +#### legacy/global-disallowed-list + +Use [Polaris tokens](https://polaris.shopify.com/tokens) when possible. Otherwise use hard coded pixel or rem values instead of legacy mixins/variables. + +```diff +// Don't +- left: -1 * $timeline-border-width; +// Do ++ left: calc(-1 * var(--p-space-1)); +``` diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-at-rule-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-at-rule-disallowed-list.md deleted file mode 100644 index b64a656729c..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-at-rule-disallowed-list.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: colors/at-rule-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -```diff -// Don't -- fill: recolor-icon(--p-text-subdued); -// Do -+ fill: var(--p-icon-subdued); -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-color-named.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-color-named.md deleted file mode 100644 index 4b9b610bcc7..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-color-named.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: colors/color-named -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - colors ---- - -Please use Polaris [color tokens](https://polaris.shopify.com/tokens/colors) instead of custom styles so that colors are consistent across the Admin. This helps merchants have a coherent user experience and also ensures that colors are in sync with updates from the design system. - - -```diff -// Don't -- color: black; -- fill: dimgray; -// Do -+ color: var(--p-text); -+ fill: var(--p-icon) -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-color-no-hex.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-color-no-hex.md deleted file mode 100644 index d02e2ddbf92..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-color-no-hex.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: colors/color-no-hex -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -```diff -// Don't -- color: #202223; -- fill: #5c5f62; -// Do -+ color: var(--p-text); -+ fill: var(--p-icon) -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-declaration-property-value-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-declaration-property-value-disallowed-list.md deleted file mode 100644 index b1e886f695e..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-declaration-property-value-disallowed-list.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: colors/declaration-property-value-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -```diff -// Don't -- background: black; -- opacity: 0.15; -// Do -+ background: var(--p-hint-from-direct-light); -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-function-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-function-disallowed-list.md deleted file mode 100644 index 42cdc7c3409..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-function-disallowed-list.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: colors/function-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -```diff -// Don't -- color: rgb(140, 145, 150); -- background: color('hover'); -// Do -+ color: var(--p-text-disabled); -+ background: var(--p-action-secondary-hovered-dark); -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-global-disallowed-list.md deleted file mode 100644 index 47284550d19..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-global-disallowed-list.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: colors/global-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -Disallows use of legacy custom properties. - -```diff -// Don't -- border: var(--p-override-transparent); -// Do -+ border: transparent; -``` - -Disallows use of legacy mixin map data. - -```diff -- @type map $filter-palette-data: $polaris-color-filters; -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/conventions-custom-property-allowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/conventions-custom-property-allowed-list.md deleted file mode 100644 index e5220a123b4..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/conventions-custom-property-allowed-list.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: conventions/custom-property-allowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - conventions ---- - -Allows definition of custom properties not prefixed with `--p-`, `--pc-`, or `--polaris-version-`. - -```diff -root: { -// Don't -- --p-animation-name-drag-handle-pulse: osui_drag-handle-pulse; -// Do -+ --osui_animation-name-drag-handle-pulse: osui_drag-handle-pulse; -}; -``` - -Flags declaration property values using `--p-*` that are not valid Polaris tokens. - -```diff -// Don't -- font-size: var(--p-fontsize-200); -// Do -+ font-size: var(--p-font-size-200); -``` - -Flags declaration property values using private `--pc-*` tokens. - -```diff -// Don't -- background: var(--pc-button-color-depressed); -// Do -+ background: var(--p-action-secondary-depressed); -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-declaration-property-unit-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-declaration-property-unit-disallowed-list.md index 1b7fe73730b..1b2a7883214 100644 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-declaration-property-unit-disallowed-list.md +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-declaration-property-unit-disallowed-list.md @@ -3,40 +3,23 @@ title: depth/declaration-property-unit-disallowed-list description: Disallows box-shadow declarations with hard coded px, rem, or em units keywords: - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css + - stylelint polaris - depth + - depth rules + - shadows --- -Please use Polaris [depth tokens](https://polaris.shopify.com/tokens/depth) instead of custom styles so that depth is consistent across the Admin. This helps merchants have a coherent user experience and also ensures that depth are in sync with updates from the design system. - -_{Insert why depth consistency impacts merchant [wayfinding, etc]}_ - -Have you found that merchants benefit from {an additional layer of visual hierarchy that's not in the depth tokens? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition - - -Use the [Polaris depth tokens](https://polaris.shopify.com/tokens/z-index) instead of custom shadows. +Use a [Polaris depth token](https://polaris.shopify.com/tokens/depth) instead of a custom box-shadow so that visual depth is consistent throughout the admin. This helps merchants have a coherent user experience. Using the depth tokens will also ensure that your feature can benefit from future design language updates automatically. ```diff -// Don't -- box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); // Do + box-shadow: var(--p-shadow-card); + +// Don't +- box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); ``` -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: +Have you found that merchants benefit from an additional layer of visual hierarchy that's not in the [Polaris depth tokens](https://polaris.shopify.com/tokens/depth)? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution - Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-function-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-function-disallowed-list.md deleted file mode 100644 index d5d1ce6dd61..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-function-disallowed-list.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: depth/function-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -Use the [Polaris depth tokens](https://polaris.shopify.com/tokens/z-index) instead of custom shadows. - -```diff -// Don't -- filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); -// Do -+ box-shadow: var(--p-shadow-base); -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-global-disallowed-list.md deleted file mode 100644 index 0506ee16452..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-global-disallowed-list.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: depth/global-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -Use the [Polaris depth tokens](https://polaris.shopify.com/tokens/z-index) instead of legacy mixins/variables. - -```diff -// Don't -- box-shadow: var(--p-card-shadow); -// Do -+ box-shadow: var(--p-shadow-card); -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-property-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-property-disallowed-list.md deleted file mode 100644 index bda92f46dbe..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-property-disallowed-list.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: depth/property-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -Instead of using properties like `text-shadow`, make sure the text has proper contrast with the background so that it is readable without a shadow. - -```diff -// Don't -- text-shadow: 2px 2px #ff0000; -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/index.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/index.md index 5ee0382019c..72bdf6746b6 100644 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/index.md +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/index.md @@ -1,82 +1,88 @@ --- title: Rules -description: Stylelint Polaris rules that promote adoption and track coverage of the Polaris design system in consuming apps. +description: There are over 40 rules configured in Stylelint Polaris to help you avoid errors and follow stylistic and non-stylistic conventions while building for the Shopify admin. hideChildren: true +keywords: + - rules + - stylelint rules + - css rules --- -## Conventions - -- [conventions/custom-property-allowed-list](/tools/stylelint-polaris/rules/conventions-custom-property-allowed-list): TODO - ## Colors -- [colors/color-named](/tools/stylelint-polaris/rules/colors-color-named): TODO -- [colors/color-no-hex](/tools/stylelint-polaris/rules/colors-color-no-hex): TODO -- [colors/declaration-property-value-disallowed-list](/tools/stylelint-polaris/rules/colors-declaration-property-value-disallowed-list): TODO -- [colors/function-disallowed-list](/tools/stylelint-polaris/rules/colors-function-disallowed-list): TODO -- [colors/at-rule-disallowed-list](/tools/stylelint-polaris/rules/colors-at-rule-disallowed-list): TODO -- [colors/global-disallowed-list](/tools/stylelint-polaris/rules/colors-global-disallowed-list): TODO +- [colors/color-named](/tools/stylelint-polaris/rules/colors-color-named): Disallows named colors +- [colors/color-no-hex](/tools/stylelint-polaris/rules/colors-color-no-hex): Disallows hex colors +- [colors/declaration-property-value-disallowed-list](/tools/stylelint-polaris/rules/colors-declaration-property-value-disallowed-list): Disallows custom decimal opacity values +- [colors/function-disallowed-list](/tools/stylelint-polaris/rules/colors-function-disallowed-list): Disallows allows use of built in and legacy color functions +- [colors/at-rule-disallowed-list](/tools/stylelint-polaris/rules/colors-at-rule-disallowed-list): Disallows use of legacy color mixins +- [colors/global-disallowed-list](/tools/stylelint-polaris/rules/colors-global-disallowed-list): Disallows use of legacy color custom properties and mixin map data ## Motion -- [motion/function-disallowed-list](/tools/stylelint-polaris/rules/motion-function-disallowed-list): TODO -- [motion/declaration-property-unit-disallowed-list](/tools/stylelint-polaris/rules/motion-declaration-property-unit-disallowed-list): TODO -- [motion/at-rule-disallowed-list](/tools/stylelint-polaris/rules/motion-at-rule-disallowed-list): TODO -- [motion/global-disallowed-list](/tools/stylelint-polaris/rules/motion-global-disallowed-list): TODO +- [motion/function-disallowed-list](/tools/stylelint-polaris/rules/motion-function-disallowed-list): Disallows use of legacy Sass motion functions +- [motion/declaration-property-unit-disallowed-list](/tools/stylelint-polaris/rules/motion-declaration-property-unit-disallowed-list): Disallows use of hard-coded millisecond `ms` and second `s` values on transition and animation properties +- [motion/at-rule-disallowed-list](/tools/stylelint-polaris/rules/motion-at-rule-disallowed-list): Disallows use of CSS @keyframes +- [motion/global-disallowed-list](/tools/stylelint-polaris/rules/motion-global-disallowed-list): Disallows use of legacy Polaris motion tokens ## Typography -- [typography/declaration-property-value-disallowed-list](/tools/stylelint-polaris/rules/typography-declaration-property-value-disallowed-list): TODO -- [typography/declaration-property-unit-disallowed-list](/tools/stylelint-polaris/rules/typography-declaration-property-unit-disallowed-list): TODO -- [typography/function-disallowed-list](/tools/stylelint-polaris/rules/typography-function-disallowed-list): TODO -- [typography/at-rule-disallowed-list](/tools/stylelint-polaris/rules/typography-at-rule-disallowed-list): TODO -- [typography/property-disallowed-list](/tools/stylelint-polaris/rules/typography-property-disallowed-list): TODO +- [typography/declaration-property-value-disallowed-list](/tools/stylelint-polaris/rules/typography-declaration-property-value-disallowed-list): Disallows hard-coded alphanumeric font-weight values +- [typography/declaration-property-unit-disallowed-list](/tools/stylelint-polaris/rules/typography-declaration-property-unit-disallowed-list): Disallows hard-coded `px`, `em`, and `rem` values for font-size and line-height properties +- [typography/function-disallowed-list](/tools/stylelint-polaris/rules/typography-function-disallowed-list): Disallows use of legacy Sass typography functions +- [typography/at-rule-disallowed-list](/tools/stylelint-polaris/rules/typography-at-rule-disallowed-list): Disallows use of legacy Sass typography mixins +- [typography/property-disallowed-list](/tools/stylelint-polaris/rules/typography-property-disallowed-list): Disallows use of legacy typography custom properties and Sass mixin data -## Shape +## Layout -- [shape/declaration-property-value-disallowed-list](/tools/stylelint-polaris/rules/shape-declaration-property-value-disallowed-list): TODO -- [shape/declaration-property-unit-disallowed-list](/tools/stylelint-polaris/rules/shape-declaration-property-unit-disallowed-list): TODO -- [shape/function-disallowed-list](/tools/stylelint-polaris/rules/shape-function-disallowed-list): TODO -- [shape/at-rule-disallowed-list](/tools/stylelint-polaris/rules/shape-at-rule-disallowed-list): TODO -- [shape/property-disallowed-list](/tools/stylelint-polaris/rules/shape-property-disallowed-list): TODO +- [layout/declaration-property-value-disallowed-list](/tools/stylelint-polaris/rules/layout-declaration-property-value-disallowed-list): Disallows declaration of positioning and dimension property values with Polaris tokens +- [layout/function-disallowed-list](/tools/stylelint-polaris/rules/layout-function-disallowed-list): Disallows use of internal Sass layout functions +- [layout/at-rule-disallowed-list](/tools/stylelint-polaris/rules/layout-at-rule-disallowed-list): Disallows use of legacy Sass mixins +- [layout/property-disallowed-list](/tools/stylelint-polaris/rules/layout-property-disallowed-list): Disallows declarations of layout properties +- [layout/global-disallowed-list](/tools/stylelint-polaris/rules/layout-global-disallowed-list): Disallows use of legacy custom properties and Sass mixin map data ## Spacing -- [spacing/declaration-property-value-disallowed-list](/tools/stylelint-polaris/rules/spacing-declaration-property-value-disallowed-list): TODO -- [spacing/declaration-property-unit-disallowed-list](/tools/stylelint-polaris/rules/spacing-declaration-property-unit-disallowed-list): TODO -- [spacing/function-disallowed-list](/tools/stylelint-polaris/rules/spacing-function-disallowed-list): TODO -- [spacing/at-rule-disallowed-list](/tools/stylelint-polaris/rules/spacing-at-rule-disallowed-list): TODO -- [spacing/property-disallowed-list](/tools/stylelint-polaris/rules/spacing-property-disallowed-list): TODO +- [spacing/declaration-property-unit-disallowed-list](/tools/stylelint-polaris/rules/spacing-declaration-property-unit-disallowed-list): Disallows use of hard-coded px, em, and rem values on gap, margin, and padding properties +- [spacing/function-disallowed-list](/tools/stylelint-polaris/rules/spacing-function-disallowed-list): Disallows use of legacy Sass spacing functions +- [spacing/global-disallowed-list](/tools/stylelint-polaris/rules/spacing-property-disallowed-list): Disallows use of legacy spacing custom properties and Sass mixin data + +## Shape + +- [shape/function-disallowed-list](/tools/stylelint-polaris/rules/shape-function-disallowed-list): Disallows use of legacy Sass border functions +- [shape/declaration-property-unit-disallowed-list](/tools/stylelint-polaris/rules/shape-declaration-property-unit-disallowed-list): Disallows hard-coded `px`, `em`, and `rem` units in border property values +- [shape/at-rule-disallowed-list](/tools/stylelint-polaris/rules/shape-at-rule-disallowed-list): Disallows use of legacy Sass border mixins +- [shape/property-disallowed-list](/tools/stylelint-polaris/rules/shape-global-disallowed-list): Disallows use of legacy border custom properties and Sass mixin map data ## Depth +- [depth/function-disallowed-list](/tools/stylelint-polaris/rules/depth-function-disallowed-list): Disallows use of built-in and legacy shadow functions - [depth/declaration-property-unit-disallowed-list](/tools/stylelint-polaris/rules/depth-declaration-property-unit-disallowed-list): Disallows box-shadow declarations with hard coded px, rem, or em units -- [depth/function-disallowed-list](/tools/stylelint-polaris/rules/depth-function-disallowed-list): TODO -- [depth/global-disallowed-list](/tools/stylelint-polaris/rules/depth-global-disallowed-list): TODO -- [depth/property-disallowed-list](/tools/stylelint-polaris/rules/depth-property-disallowed-list): TODO +- [depth/global-disallowed-list](/tools/stylelint-polaris/rules/depth-global-disallowed-list): Disallows use of legacy shadow custom properties and Sass mixin data -## Media queries +## Z-Index -- [media-queries/function-disallowed-list](/tools/stylelint-polaris/rules/media-queries-function-disallowed-list): TODO -- [media-queries/media-queries-allowed-list](/tools/stylelint-polaris/rules/media-queries-media-queries-allowed-list): TODO -- [media-queries/at-rule-disallowed-list](/tools/stylelint-polaris/rules/media-queries-at-rule-disallowed-list): TODO +- [z-index/declaration-property-value-allowed-list](/tools/stylelint-polaris/rules/z-index-declaration-property-value-allowed-list): Disallows declaration of `z-index` values that are not Polaris z-index tokens +- [z-index/function-disallowed-list](/tools/stylelint-polaris/rules/z-index-function-disallowed-list): Disallows use of the legacy z-index Sass function +- [z-index/global-disallowed-list](/tools/stylelint-polaris/rules/z-index-global-disallowed-list): Disallows the use of legacy z-index custom properties and Sass mixin data -## Z-index +## Conventions -- [z-index/declaration-property-value-allowed-list](/tools/stylelint-polaris/rules/z-index-declaration-property-value-allowed-list): TODO -- [z-index/function-disallowed-list](/tools/stylelint-polaris/rules/z-index-function-disallowed-list): TODO -- [z-index/global-disallowed-list](/tools/stylelint-polaris/rules/z-index-global-disallowed-list): TODO +- [conventions/custom-property-allowed-list](/tools/stylelint-polaris/rules/conventions-custom-property-allowed-list): + - Allows definition of custom properties not using Polaris prefixes + - Flags declaration property values that are not valid Polaris tokens + - Flags declaration property values using private tokens -## Layout +## Media queries -- [layout/declaration-property-value-disallowed-list](/tools/stylelint-polaris/rules/layout-declaration-property-value-disallowed-list): TODO -- [layout/function-disallowed-list](/tools/stylelint-polaris/rules/layout-function-disallowed-list): TODO -- [layout/at-rule-disallowed-list](/tools/stylelint-polaris/rules/layout-at-rule-disallowed-list): TODO -- [layout/property-disallowed-list](/tools/stylelint-polaris/rules/layout-property-disallowed-list): TODO -- [layout/global-disallowed-list](/tools/stylelint-polaris/rules/layout-global-disallowed-list): TODO +- [media-queries/media-queries-allowed-list](/tools/stylelint-polaris/rules/media-queries-media-queries-allowed-list): + - Allows declaration of `print` and `screen` `@media` queries + - Allows `@media` queries for `forced-colors` and `ms-high-contrast` features + - Allows `@media` queries using Polaris breakpoints +- [media-queries/function-disallowed-list](/tools/stylelint-polaris/rules/media-queries-function-disallowed-list): Disallows use of legacy breakpoint sass functions +- [media-queries/at-rule-disallowed-list](/tools/stylelint-polaris/rules/media-queries-at-rule-disallowed-list): Disallows use of legacy breakpoint Sass mixins ## Legacy -- [legacy/at-rule-disallowed-list](/tools/stylelint-polaris/rules/legacy-at-rule-disallowed-list): TODO -- [legacy/function-disallowed-list](/tools/stylelint-polaris/rules/legacy-function-disallowed-list): TODO -- [legacy/global-disallowed-list](/tools/stylelint-polaris/rules/legacy-global-disallowed-list): TODO +- [legacy/at-rule-disallowed-list](/tools/stylelint-polaris/rules/legacy-at-rule-disallowed-list): Disallows use pf legacy Sass mixins +- [legacy/function-disallowed-list](/tools/stylelint-polaris/rules/legacy-function-disallowed-list): Disallows use off legacy Sass functions +- [legacy/global-disallowed-list](/tools/stylelint-polaris/rules/legacy-global-disallowed-list): Disallows use of legacy custom properties and Sass mixin map data diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-at-rule-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-at-rule-disallowed-list.md deleted file mode 100644 index 51f9a4191c2..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-at-rule-disallowed-list.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: layout/at-rule-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -Instead of using a legacy mixin, try and use [Polaris components](https://polaris.shopify.com/components) to compose desired layouts. If what you need isn't possible, either use the mixin's contents or consider contributing to an existing Polaris component. - -```diff -// Don't -- @include print-hidden; -// Do -+ @media print { -+ display: none; -+ } -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-declaration-property-value-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-declaration-property-value-disallowed-list.md deleted file mode 100644 index 424b4b05364..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-declaration-property-value-disallowed-list.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: layout/declaration-property-value-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - layout ---- - -Please use Polaris [layout components](https://polaris.shopify.com/components) instead of custom styles so that layout is consistent across the Admin. This helps merchants have a coherent user experience and also ensures that layout are in sync with updates from the design system. - - -There are many ways to use [Polaris components](https://polaris.shopify.com/components) to compose desired layouts. Please explore the layout components before writing custom styles. - -```diff -// Don't -- width: 100%; -// Do -+ -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-function-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-function-disallowed-list.md deleted file mode 100644 index 31d2a772e61..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-function-disallowed-list.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: layout/function-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -Use hard coded pixel or rem values for `width` and `height` instead of legacy mixins/variables or spacing tokens. - -```diff -// Don't -- height: top-bar-height(); -// Do -+ height: 56px; -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-global-disallowed-list.md deleted file mode 100644 index 45a11bbd44c..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-global-disallowed-list.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: layout/global-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -If [Polaris components](https://polaris.shopify.com/components) cannot be composed to create the styles you need, consider contributing to an existing Polaris component before creating custom styles. - -```diff -// Don't -- height: var(--p-choice-size); -// Do -+ -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-property-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-property-disallowed-list.md deleted file mode 100644 index b96c63b1701..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-property-disallowed-list.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: layout/property-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -There are many ways to use [Polaris components](https://polaris.shopify.com/components) to compose desired layouts. Please explore the layout components before writing custom styles. - -```diff -// Don't -- display: grid; -// Do -+ -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/legacy-at-rule-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/legacy-at-rule-disallowed-list.md deleted file mode 100644 index 2877d3e5c67..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/legacy-at-rule-disallowed-list.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: legacy/at-rule-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - legacy ---- - - -If [Polaris components](https://polaris.shopify.com/components) cannot be composed to create the styles you need, consider contributing to an existing Polaris component before creating custom styles. - -```diff -// Don't -- @include unstyled-button; -// Do -+ -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/legacy-function-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/legacy-function-disallowed-list.md deleted file mode 100644 index fbda8e73371..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/legacy-function-disallowed-list.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: legacy/function-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -```diff -// Don't -- @include available-names -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/legacy-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/legacy-global-disallowed-list.md deleted file mode 100644 index 12f292f33ed..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/legacy-global-disallowed-list.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: legacy/global-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -Use [Polaris tokens](https://polaris.shopify.com/tokens) when possible. Otherwise use hard coded pixel or rem values instead of legacy mixins/variables. - -```diff -// Don't -- left: -1 * $timeline-border-width; -// Do -+ left: calc(-1 * var(--p-space-1)); -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/media-queries-at-rule-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/media-queries-at-rule-disallowed-list.md deleted file mode 100644 index 7086a26906b..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/media-queries-at-rule-disallowed-list.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: media-queries/at-rule-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -Use the [Polaris breakpoint sass variables](https://polaris.shopify.com/tokens/breakpoints#sass-variables) instead of legacy mixins/variables. - -```diff -// Don't -- @include breakpoint-before(layout-width(page-with-nav)) {} -// Do -+ @media (max-width: var(--p-breakpoints-md)) {} -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/media-queries-function-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/media-queries-function-disallowed-list.md deleted file mode 100644 index 517cbc9f3e9..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/media-queries-function-disallowed-list.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: media-queries/function-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - media queries ---- - -Please use Polaris [breakpoints tokens](https://polaris.shopify.com/tokens/breakpoints) instead of custom styles so that media queries are consistent across the Admin. This helps merchants have a coherent user experience and also ensures that media queries are in sync with updates from the design system. - - -Use the [Polaris breakpoint sass variables](https://polaris.shopify.com/tokens/breakpoints#sass-variables) instead of legacy mixins/variables. - -```diff -// Don't -- @include breakpoint-after(layout-width(page-with-nav)) {} -// Do -+ @media (min-width: var(--p-breakpoints-md)) {} -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/media-queries-media-queries-allowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/media-queries-media-queries-allowed-list.md deleted file mode 100644 index f3db9ae760e..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/media-queries-media-queries-allowed-list.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: media-queries/media-queries-allowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -Try to use the [Polaris breakpoint sass variables](https://polaris.shopify.com/tokens/breakpoints#sass-variables) before creating your own custom styles. - -```diff -// Don't -- @include @media #{$my-var} {} -// Do -+ @include @media #{$p-breakpoints-sm-up} {} -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-at-rule-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-at-rule-disallowed-list.md deleted file mode 100644 index a7bf2ba4a83..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-at-rule-disallowed-list.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: motion/at-rule-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -```diff - -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-declaration-property-unit-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-declaration-property-unit-disallowed-list.md deleted file mode 100644 index 91ed55ed904..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-declaration-property-unit-disallowed-list.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: motion/declaration-property-unit-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -```diff -// Don't -- transition-duration: 200ms; -// Do -+ transition-duration: var(--p-duration-200); -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-function-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-function-disallowed-list.md deleted file mode 100644 index d9697276fbd..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-function-disallowed-list.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: motion/function-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - motion ---- - -Please use Polaris [motion tokens](https://polaris.shopify.com/tokens/motion) instead of custom styles so that motion is consistent across the Admin. This helps merchants have a coherent user experience and also ensures that motion are in sync with updates from the design system. - - -```diff - -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-global-disallowed-list.md deleted file mode 100644 index c93fa90faa7..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-global-disallowed-list.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: motion/global-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -```diff - -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-at-rule-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-at-rule-disallowed-list.md deleted file mode 100644 index 10918230dbc..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-at-rule-disallowed-list.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: shape/at-rule-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -```diff - -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-declaration-property-unit-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-declaration-property-unit-disallowed-list.md deleted file mode 100644 index 5d170e06c36..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-declaration-property-unit-disallowed-list.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: shape/declaration-property-unit-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -```diff -// Don't -- border-width: 2px; -- border-radius: 0.5rem; -// Do -+ border-width: var(--p-border-width-2); -+ border-radius: var(--p-border-radius-2); -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-declaration-property-value-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-declaration-property-value-disallowed-list.md deleted file mode 100644 index d53de71ec29..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-declaration-property-value-disallowed-list.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: shape/declaration-property-value-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - shape ---- - -Please use Polaris [shape tokens](https://polaris.shopify.com/tokens/shape) instead of custom styles so that shape is consistent across the Admin. This helps merchants have a coherent user experience and also ensures that shape are in sync with updates from the design system. - - -```diff - -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-function-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-function-disallowed-list.md deleted file mode 100644 index f525c1575f8..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-function-disallowed-list.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: shape/function-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -```diff - -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-property-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-property-disallowed-list.md deleted file mode 100644 index 2a5f828556e..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-property-disallowed-list.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: shape/property-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -```diff - -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-at-rule-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-at-rule-disallowed-list.md deleted file mode 100644 index df79b56de48..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-at-rule-disallowed-list.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: spacing/at-rule-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -```diff - -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-declaration-property-unit-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-declaration-property-unit-disallowed-list.md deleted file mode 100644 index 40dac83f17d..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-declaration-property-unit-disallowed-list.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: spacing/declaration-property-unit-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -```diff -// Don't -- gap: 2px; -- margin: 12px 0; -// Do -+ gap: var(--p-space-05); -+ margin: var(--p-space-3) 0; -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-declaration-property-value-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-declaration-property-value-disallowed-list.md deleted file mode 100644 index 84e3f434c1e..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-declaration-property-value-disallowed-list.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: spacing/declaration-property-value-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - spacing ---- - -Please use Polaris [spacking tokens](https://polaris.shopify.com/tokens/spacing) instead of custom styles so that spacing is consistent across the Admin. This helps merchants have a coherent user experience and also ensures that spacing are in sync with updates from the design system. - - -```diff - -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-function-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-function-disallowed-list.md deleted file mode 100644 index 22384640bf6..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-function-disallowed-list.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: spacing/function-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -```diff - -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-property-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-property-disallowed-list.md deleted file mode 100644 index aee9d0ae306..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-property-disallowed-list.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: spacing/property-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -```diff - -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-at-rule-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-at-rule-disallowed-list.md deleted file mode 100644 index a3900ede9c8..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-at-rule-disallowed-list.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: typography/at-rule-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -```diff - -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-declaration-property-unit-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-declaration-property-unit-disallowed-list.md deleted file mode 100644 index a8257d27666..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-declaration-property-unit-disallowed-list.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: typography/declaration-property-unit-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -```diff -// Don't -- font-size: 12px; -- line-height: 1.5rem -// Do -+ font-size: var(--p-font-size-75); -+ line-height: var(--p-font-line-height-3); -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-declaration-property-value-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-declaration-property-value-disallowed-list.md deleted file mode 100644 index ee01a79c1b5..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-declaration-property-value-disallowed-list.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: typography/declaration-property-value-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - typography ---- - -Please use the [text component](https://polaris.shopify.com/components/text) or [font tokens](https://polaris.shopify.com/tokens/font) instead of custom styles so that typography is consistent across the Admin. This helps merchants have a coherent user experience and also ensures that typography are in sync with updates from the design system. - - -```diff - -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-function-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-function-disallowed-list.md deleted file mode 100644 index 3c50a99073a..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-function-disallowed-list.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: typography/function-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -```diff - -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-property-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-property-disallowed-list.md deleted file mode 100644 index a625b0c7b0f..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-property-disallowed-list.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: typography/property-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -```diff - -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-declaration-property-value-allowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-declaration-property-value-allowed-list.md deleted file mode 100644 index 5c1356c8320..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-declaration-property-value-allowed-list.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: z-index/declaration-property-value-allowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - z-index ---- - -Please use Polaris [z-index tokens](https://polaris.shopify.com/tokens/z-index) instead of custom styles so that z-index is consistent across the Admin. This helps merchants have a coherent user experience and also ensures that z-index are in sync with updates from the design system. - - -Try to use the [Polaris z-index tokens](https://polaris.shopify.com/tokens/z-index) before creating your own custom styles. - -```diff -// Don't -- z-index: 1; -// Do -+ z-index: var(--p-z-1); -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-function-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-function-disallowed-list.md deleted file mode 100644 index 5f7e2c16179..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-function-disallowed-list.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: z-index/function-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -Use the [Polaris z-index tokens](https://polaris.shopify.com/tokens/z-index) instead of legacy mixins/variables. - -```diff -// Don't -- z-index: z-index(content); -// Do -+ z-index: var(--p-z-1); -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-global-disallowed-list.md deleted file mode 100644 index a816c184a1f..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-global-disallowed-list.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: z-index/global-disallowed-list -description: TODO -keywords: - - stylelint - - dev tools - - developer tools - - tools - - tooling - - development - - plugin - - rules - - linter - - linting - - css - - ---- - -Use the [Polaris z-index tokens](https://polaris.shopify.com/tokens/z-index) instead of legacy mixins/variables. - -```diff -// Don't -- z-index(toast, $fixed-element-stacking-order); -// Do -+ z-index: var(--p-z-1); -``` - -Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by: - -- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution -- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion -- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition diff --git a/polaris.shopify.com/src/components/Code/Code.tsx b/polaris.shopify.com/src/components/Code/Code.tsx index 8214a45be1d..700d3537572 100644 --- a/polaris.shopify.com/src/components/Code/Code.tsx +++ b/polaris.shopify.com/src/components/Code/Code.tsx @@ -75,6 +75,7 @@ function HighlightedCode({ const match = /language-(\w+)/.exec(className || ''); return (