Remove deprecated v8 custom properties, functions, mixins, and mixin maps from stylelint-polaris

[alex-page]

Remove the following deprecated v8 custom properties, functions, mixins, and maps from stylelint-polaris (can happen on main branch before v11). If any of these exist in the _legacy-polaris-v8.scss file they should be removed if possible.

Remove Now

Custom Properties

Name	Not in web?
--p-badge-font-weight	✅
--p-badge-mix-blend-mode	✅
--p-button-drop-shadow	✅
--p-button-font-weight	✅
--p-button-inner-shadow	✅
--p-button-pressed-inner-shadow	✅
--p-card-shadow	✅
--p-duration-1-0-0	✅
--p-duration-1-5-0	✅
--p-icon-size	✅
--p-modal-shadow	✅
--p-non-null-content	✅
--p-popover-shadow	✅
--p-override-none	✅
--p-override-one	✅
--p-override-transparent	✅
--p-override-visible	✅
--p-override-zero	✅
--p-range-slider-thumb-scale	✅
--p-text-field-focus-ring-border-radius	✅
--p-top-bar-shadow	✅

Functions & Mixins

Name	Not in web?
border()	✅
border-radius()	✅
border-width()	✅
color-icon()	✅
duration()	✅
easing()	✅
font-family()	✅
icon-size()	✅
px()	✅
skeleton-page-header-layout()	✅
skeleton-page-secondary-actions-layout()	✅
spacing()	✅

Mixin Maps

Name	Not in web?
$duration-data	✅
$polaris-duration-map	✅
$easing-data	✅
$typography-condensed	✅
$font-family-data	✅
$spacing-data	✅
$actions-vertical-spacing	✅
$border-radius-data	✅
$border-width-data	✅
$border-radius-data	✅
$borders-data	✅

Remove In the Future

The following need to be removed from web before we can remove them from stylelint:

Custom Properties

Name	Not in web?
--p-border-radius-wide	❌ (1 instance)

Functions & Mixins

Name	Not in web?
available-names()	❌ (13 instances)
color()	❌ (358 instances)
color-multiply()	✅ but ❌ (used in color())
em()	❌ (8 instances)
filter()	❌ (1 instance)
hidden-when-printing()	❌ (50 instances)
high-contrast-border()	❌ (1 instance)
high-contrast-outline()	❌ (3 instances)
map-extend()	✅ but ❌ (used in color())
ms-high-contrast-color()	❌ (10 instances)
print-hidden()	❌ (1 instance)
rem()	❌ (2838 instances)
shadow()	❌ (43 instances)
skeleton-shimmer()	❌ (34 instances)
state()	❌ (28 instances)
unstyled-link()	❌ (18 instances)
unstyled-list()	❌ (40 instances)
when-not-printing()	❌ (1 instance)
z-index()	❌ (28 instances)

Mixin Maps

Name	Not in web?
$polaris-colors	❌ (used in color())
$color-filter-palette-data	❌ (used in filter())
$color-palette-data	❌ (used in color())
$base-font-size	❌ (used in rem())
$line-height-data	❌ (used in line-height())
$font-size-data	❌ (used in font-size())
$default-browser-font-size	❌ (used in em())
$layout-width-data	❌ (used in layout-width())
$navigation-width	❌ (1 instance & used in layout-width())
$small-thumbnail-size	❌ (used in thumbnail-size())
$large-thumbnail-size	❌ (used in thumbnail-size())
$medium-thumbnail-size	❌ (used in thumbnail-size())
$thumbnail-sizes	❌ (used in thumbnail-size())
$polaris-spacing	❌ (1 instance)
$shadows-data	❌ (used in shadow())
$fixed-element-stacking-order	❌ (22 instances)
$global-elements	❌ (used in `z-index()
$skeleton-shimmer-duration	❌ used in skeleton-shimmer()

[sam-b-rose]

@alex-page Is this still something we want to do within this project scope?

[alex-page]

This needs to happen in v11 imo

[lgriffee]

Creating a audit here of which deprecated v8 custom properties, functions, mixins, and maps we can remove from stylelint-polaris. If something is being used in web then we cannot remove it.

Custom Properties

Name	Not in web?
--p-badge-font-weight	✅
--p-badge-mix-blend-mode	✅
--p-border-radius-wide	❌ (1 instance)
--p-button-drop-shadow	✅
--p-button-font-weight	✅
--p-button-inner-shadow	✅
--p-button-pressed-inner-shadow	✅
--p-card-shadow	✅
--p-duration-1-0-0	✅
--p-duration-1-5-0	✅
--p-icon-size	✅
--p-modal-shadow	✅
--p-non-null-content	✅
--p-popover-shadow	✅
--p-override-none	✅
--p-override-one	✅
--p-override-transparent	✅
--p-override-visible	✅
--p-override-zero	✅
--p-range-slider-thumb-scale	✅
--p-text-field-focus-ring-border-radius	✅
--p-top-bar-shadow	✅

Functions & Mixins

Name	Not in web?
available-names()	❌ (13 instances)
border()	✅
border-radius()	✅
border-width()	✅
color()	❌ (358 instances)
color-icon()	✅
color-multiply()	✅ but ❌ (used in color())
duration()	✅
em()	❌ (8 instances)
easing()	✅
filter()	❌ (1 instance)
font-family()	✅
hidden-when-printing()	❌ (50 instances)
high-contrast-border()	❌ (1 instance)
high-contrast-outline()	❌ (3 instances)
icon-size()	✅
map-extend()	✅ but ❌ (used in color())
ms-high-contrast-color()	❌ (10 instances)
print-hidden()	❌ (1 instance)
px()	✅
rem()	❌ (2838 instances)
shadow()	❌ (43 instances)
skeleton-page-header-layout()	✅
skeleton-page-secondary-actions-layout()	✅
skeleton-shimmer()	❌ (34 instances)
spacing()	✅
state()	❌ (28 instances)
unstyled-link()	❌ (18 instances)
unstyled-list()	❌ (40 instances)
when-not-printing()	❌ (1 instance)
z-index()	❌ (28 instances)

Mixin Maps

Name	Not in web?
$polaris-colors	❌ (used in color())
$color-filter-palette-data	❌ (used in filter())
$color-palette-data	❌ (used in color())
$duration-data	✅
$polaris-duration-map	✅
$skeleton-shimmer-duration	❌ used in skeleton-shimmer()
$easing-data	✅
$typography-condensed	✅
$base-font-size	❌ (used in rem())
$line-height-data	❌ (used in line-height())
$font-family-data	✅
$font-size-data	❌ (used in font-size())
$default-browser-font-size	❌ (used in em())
$layout-width-data	❌ (used in layout-width())
$navigation-width	❌ (1 instance & used in layout-width())
$small-thumbnail-size	❌ (used in thumbnail-size())
$large-thumbnail-size	❌ (used in thumbnail-size())
$medium-thumbnail-size	❌ (used in thumbnail-size())
$thumbnail-sizes	❌ (used in thumbnail-size())
$polaris-spacing	❌ (1 instance)
$spacing-data	✅
$actions-vertical-spacing	✅
$border-radius-data	✅
$border-width-data	✅
$border-radius-data	✅
$borders-data	✅
$shadows-data	❌ (used in shadow())
$fixed-element-stacking-order	❌ (22 instances)
$global-elements	❌ (used in `z-index()

In addition to removing the above mixins/functions and maps we should also remove these values from the _legacy-polaris-v8 file if possible.